/* ==========================================================================
   sections.css — page sections that repeat across the inner pages
   (about, portfolio, websites, menus, solutions, signage).
   Page-only styles go in css/pages/<page>.css.
   ========================================================================== */

/* ---------- Hero (centred) ---------- */
.hero-center {
  padding: calc(110px + var(--nav-h)) 0 100px;   /* top space = floating navbar + breathing room */
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero-center .eyebrow { justify-content: center; }
.hero-center h1 { max-width: 830px; margin: auto; font-size: 44px; }
.hero-center p { max-width: 700px; margin: 17px auto 0; color: var(--muted); font-size: 18px; }
.hero-center .btns { justify-content: center; }

/* ---------- Section heading (centred) ---------- */
.head { text-align: center; }
.head .eyebrow { justify-content: center; }
.head h2, .section-title { font-size: 32px; }
.head p { max-width: 690px; margin: 14px auto 0; color: var(--muted); font-size: 18px; }

/* ---------- Grid + card ---------- */
.grid { display: grid; gap: 18px; margin-top: 38px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: 22px;
  border: 1px solid #242428;
  border-radius: 6px;
  background: var(--panel);
}
.card h3 { margin-top: 12px; font-size: 18px; }
.card p { margin-top: 9px; color: var(--muted); font-size: 16px; }
.number { display: block; color: var(--orange); font: 700 13px var(--font-head); }

/* ---------- Process (numbered steps on a line) ---------- */
.process { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 42px; }
.process::before { content: ""; position: absolute; top: 14px; left: 5%; right: 5%; height: 1px; background: #303035; }
.process div { z-index: 1; text-align: center; color: #aaa; font-size: 13px; }
.process b {
  display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 9px;
  border: 2px solid #9a4300; border-radius: 50%; background: #090909; color: #fff; font-size: 12px;
}

/* ---------- Stats strip (full width) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #141416; border-bottom: 1px solid var(--line); }
.stat { padding: 34px; text-align: center; border-right: 1px solid #252529; }
.stat:last-child { border-right: 0; }
.stat strong { display: block; color: var(--orange); font: 700 32px var(--font-head); }
.stat span { color: var(--muted); font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid #252529; }
}
@media (max-width: 520px) {
  .hero-center h1 { font-size: 38px; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .process::before { display: none; }
  .btns .btn { width: 100%; }
}

/* ==========================================================================
   Additional shared patterns (product pages: signage, menus, web services)
   ========================================================================== */

/* ---------- Hero with visual on the right ---------- */
.hero-split { padding: calc(95px + var(--nav-h)) 0 95px; border-bottom: 1px solid var(--line); }
.hero-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
.hero-split h1 { max-width: 530px; font-size: 44px; }
.hero-split p { max-width: 540px; margin-top: 16px; color: var(--muted); font-size: 18px; }

/* Boxed visual (image or mock-up) */
.visual { overflow: hidden; background: var(--panel); border: 1px solid #242428; border-radius: 6px; }
.img-fill { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Text + visual split ---------- */
.split { display: grid; grid-template-columns: 1fr 1.08fr; gap: 75px; align-items: center; }
.split h2 { font-size: 32px; }
.split p { margin-top: 13px; color: var(--muted); font-size: 18px; }

.checks { list-style: none; margin: 21px 0 0; padding: 0; }
.checks li { margin: 8px 0; }
.checks li::before { content: "•"; padding-right: 9px; color: var(--orange); }

/* ---------- Cards: variants ---------- */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card--accent { border-color: var(--orange); box-shadow: inset 0 0 0 1px #7d3500; }
.card--dot h3::before { content: "•"; padding-right: 7px; color: var(--orange); }
.number--lg { font-size: 32px; }
.card ol, .card ul { margin: 12px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.85; }

/* ---------- Comparison table ---------- */
.table {
  width: 100%; margin-top: 36px; overflow: hidden;
  border-collapse: separate; border-spacing: 0;
  background: var(--panel); border: 1px solid #242428; border-radius: 5px; font-size: 14px;
}
.table th, .table td { padding: 14px; text-align: left; border-bottom: 1px solid #242428; }
.table th { color: #a7a7ac; font-size: 12px; }
.table td { color: #a8a8ad; }
.table td:last-child { color: var(--orange); }
.table tr:last-child td { border-bottom: 0; }

@media (max-width: 850px) {
  .hero-split__grid, .split { grid-template-columns: 1fr; gap: 38px; }
}
@media (max-width: 800px) {
  .grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero-split { padding: calc(70px + var(--nav-h)) 0 70px; }
  .hero-split h1 { font-size: 38px; }
  .table { font-size: 12px; }
  .table th, .table td { padding: 9px; }
}