/* ==========================================================================
   TMR — pages.css
   Page-specific bands: homepage sections, case-study template, 404.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */
.hero {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--s48));
  padding-bottom: var(--s64);
}

.hero__grid { display: grid; gap: var(--s48); align-items: center; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 54fr 46fr; gap: var(--s64); }
}

/* The homepage headline is long and sits in a half-width column, so it takes a
   calmer size than the global h1 scale. Mobile is unchanged at 2.6rem. */
.hero h1 {
  margin-bottom: var(--s24);
  font-size: clamp(2.6rem, 4.2vw, 3.9rem);
  max-width: 24ch;
}
.hero .lead { margin-bottom: var(--s32); }
.hero__buttons { display: flex; flex-wrap: wrap; gap: var(--s12); margin-bottom: var(--s16); }
.hero__meta { margin-top: var(--s32); padding-top: var(--s24); border-top: 1px solid var(--border); }

/* The photograph carries the hero on its own: right-aligned to the page gutter
   on desktop, left-aligned under the buttons once the hero stacks. Capped so a
   9:16 frame cannot outgrow the hero at any width. */
.hero__visual { position: relative; }

.hero__compose { position: relative; }

.hero__portrait {
  width: 100%;
  max-width: 300px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
}
.hero__portrait img { width: 100%; height: auto; }

@media (min-width: 1024px) {
  .hero__portrait { max-width: 380px; margin-left: auto; }
}

.hero__vignette {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%);
}

@media (max-width: 1023px) {
  .hero__visual { margin-top: var(--s24); }
}

/* --------------------------------------------------------------------------
   2. CREDIBILITY BAND
   -------------------------------------------------------------------------- */
.cred { border-top: 1px solid var(--border); }
.cred__grid { display: grid; }
.cred__item { border-bottom: 1px solid var(--border); padding-block: var(--s24); }
.cred__item p { color: var(--text-muted); max-width: 32ch; margin-top: var(--s8); }
.cred__note { padding-top: var(--s24); color: var(--text-dim); }

@media (min-width: 768px) {
  .cred__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--s48); }
}
@media (min-width: 1024px) {
  .cred__grid { grid-template-columns: repeat(4, 1fr); column-gap: var(--s32); }
  .cred__item { border-top: 0; }
}

/* One stretched link per row — nothing interactive nested inside it */
.stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}


/* Restaurant + workforce, shown as the combination it is.
   Composed in markup from the two real dashboard screenshots — no new image. */
.combo { display: grid; gap: var(--s24); align-items: center; }
/* Side by side only once both dashboards still clear their 640px minimum
   rendered width; below that they stack, with the "+" between them. */
@media (min-width: 1400px) {
  .combo { grid-template-columns: 1fr auto 1fr; gap: var(--s32); }
}
.combo__plus {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--text-dim);
  text-align: center;
  line-height: 1;
}
.combo__result {
  margin-top: var(--s32);
  padding-top: var(--s24);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. SERVICES
   -------------------------------------------------------------------------- */
.services__close {
  margin-top: var(--s48);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s24);
  align-items: center;
  justify-content: space-between;
}
.services__close p { max-width: 42ch; color: var(--text-muted); }

.process__note { margin-top: var(--s48); color: var(--text-muted); max-width: 52ch; }

/* --------------------------------------------------------------------------
   7. ABOUT
   -------------------------------------------------------------------------- */
.about__grid { display: grid; gap: var(--s48); }
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 35fr 65fr; gap: var(--s64); align-items: start; }
}

.about__portrait { max-width: 320px; }

/* The photograph is shown at its own full frame — no crop, no fixed ratio box. */
.about__photo {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
}
.about__photo img { width: 100%; height: auto; }

.about__text h2 { margin-bottom: var(--s24); }

/* --------------------------------------------------------------------------
   8. TRUST / WORKING STYLE
   -------------------------------------------------------------------------- */
.trust__rows .row { display: grid; gap: var(--s4); }
@media (min-width: 768px) {
  .trust__rows .row { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--s32); align-items: baseline; }
}
.trust__rows b { font-weight: 500; color: var(--text); }
.trust__rows p { color: var(--text-muted); max-width: 52ch; }

/* --------------------------------------------------------------------------
   9. CONTACT
   -------------------------------------------------------------------------- */
.contact__grid { display: grid; gap: var(--s48); }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 42fr 58fr; gap: var(--s64); align-items: start; }
}

/* Mobile: direct channels come before the form. */
.contact__left { order: 1; }
.contact__right { order: 2; }
@media (min-width: 900px) { .contact__left, .contact__right { order: 0; } }

.channels { display: grid; gap: var(--s12); margin-top: var(--s32); }
.contact__note { margin-top: var(--s24); }

/* --------------------------------------------------------------------------
   10. CASE-STUDY TEMPLATE
   -------------------------------------------------------------------------- */
.cs-hero { padding-top: calc(var(--nav-h) + var(--s64)); padding-bottom: var(--s48); }
.cs-hero h1 { margin-bottom: var(--s24); }
.cs-hero h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  margin-top: var(--s24);
  background: var(--project-accent);
}

.cs-meta { margin-top: var(--s48); border-top: 1px solid var(--border); }
.cs-meta .row {
  display: grid;
  gap: var(--s4);
  border-bottom: 1px solid var(--border);
  padding-block: var(--s16);
}
@media (min-width: 640px) {
  .cs-meta .row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s24); align-items: baseline; }
}
.cs-meta .row > span:last-child { color: var(--text); font-size: 0.9375rem; }

.cs-lead-shot { padding-bottom: var(--section-y); }

.cs-context { background: var(--bg-raised); }
.cs-context__grid { display: grid; gap: var(--s32); }
@media (min-width: 900px) { .cs-context__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s64); } }
.cs-context p { color: var(--text-muted); max-width: 62ch; }

/* Alternating bands */
.band { padding-block: var(--section-y); border-top: 1px solid var(--border); }
.band__grid { display: grid; gap: var(--s32); align-items: center; }
@media (min-width: 1024px) {
  .band__grid { grid-template-columns: 38fr 62fr; gap: var(--s64); }
  .band__text { grid-column: 1; }
  .band__media { grid-column: 2; }
  /* Mirrored bands swap the tracks so the screenshot keeps the wide column. */
  .band--mirror .band__grid { grid-template-columns: 62fr 38fr; }
  .band--mirror .band__text { grid-column: 2; }
  .band--mirror .band__media { grid-column: 1; grid-row: 1; }
}
.band h2 { margin-bottom: var(--s16); }
.band__text p { color: var(--text-muted); max-width: 46ch; }
.band__points { margin-top: var(--s24); border-top: 1px solid var(--border); }
.band__points li {
  border-bottom: 1px solid var(--border);
  padding-block: var(--s12);
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 46ch;
}

/* A full-width band when the screenshot needs the whole container */
.band--full .band__grid { display: block; }
.band--full .band__text { max-width: 62ch; margin-bottom: var(--s48); }

/* Gallery — one or two per row, never three */
.gallery { display: grid; gap: var(--s32); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s48); } }

/* Dashboards need more rendered width than a marketing page screenshot, so a
   dashboard gallery stays one per row until two of them still clear 640px. */
.gallery--dash { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) {
  .gallery--dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Plain labelled list for scope that has no screenshots. Bare surface,
   no image frame — never a fabricated UI. */
.scope-list { border-top: 1px solid var(--border); margin-top: var(--s24); }
.scope-list li {
  border-bottom: 1px solid var(--border);
  padding-block: var(--s16);
  display: grid;
  gap: var(--s4);
}
@media (min-width: 640px) {
  .scope-list li { grid-template-columns: 180px minmax(0, 1fr); gap: var(--s24); align-items: baseline; }
}
.scope-list span:last-child { color: var(--text-muted); font-size: 0.9375rem; max-width: 52ch; }

.no-shots {
  margin-top: var(--s24);
  color: var(--text-dim);
  font-size: 0.875rem;
  max-width: 52ch;
}

/* Technology note */
.tech { border-top: 1px solid var(--border); }
.tech__rows .row { display: grid; gap: var(--s4); }
@media (min-width: 640px) {
  .tech__rows .row { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s24); align-items: baseline; }
}
.tech__rows p { color: var(--text-muted); max-width: 52ch; font-size: 0.9375rem; }

/* Next project */
.next-band { border-top: 1px solid var(--border); }
.next-band a {
  display: block;
  padding-block: var(--s48);
  transition: background-color var(--t-fast) ease;
}
.next-band a:hover { background: var(--bg-raised); }
.next-band__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s16);
  align-items: baseline;
  justify-content: space-between;
}
.next-band h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); max-width: none; }

/* --------------------------------------------------------------------------
   11. LIGHT-SURFACE EXCEPTION — management-system screenshot bands.
       The source software is built on a warm off-white. A full token flip,
       never a half-dark hybrid.
   -------------------------------------------------------------------------- */
.surface-light {
  --bg: #F2F1ED;
  --bg-raised: #FFFFFF;
  --bg-inset: #E9E7E1;
  --border: rgba(24, 20, 16, 0.12);
  --border-strong: rgba(24, 20, 16, 0.26);
  --text: #16120E;
  --text-muted: #554C43;
  --text-dim: #6B6158;
  --shadow-2: 0 24px 64px rgba(24, 20, 16, 0.12);
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}
.surface-light :focus-visible { outline-color: var(--text); }
.surface-light .tag { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12. 404
   -------------------------------------------------------------------------- */
.notfound {
  min-height: 72svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
}

/* Per-project accent on a light surface needs a darker variant to stay AA.
   Each case-study page defines --project-accent (dark shell) alongside
   --project-accent-ink (light shell); the light surface swaps to the latter. */
.surface-light { --project-accent: var(--project-accent-ink, #16120E); }

/* The workforce half of the management system carries the warm accent of the
   software it came from. */
.surface-light .warm { --project-accent: var(--project-accent-warm, #8F4A1E); }

/* The ten modules of the expense tracker: a clean two-column list, not cards. */
.module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s32); }
.module-list li { display: block; }
.module-list span { color: var(--text); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   13. OVERFLOW GUARD
   Grid and flex children default to min-width: auto, which lets a wide
   screenshot widen its track and give the whole page a horizontal scrollbar.
   Every layout child on the site is allowed to shrink instead.
   -------------------------------------------------------------------------- */
.hero__grid > *, .cred__grid > *, .combo > *, .gallery > *, .band__grid > *,
.cs-context__grid > *, .about__grid > *, .contact__grid > *, .cta-band__inner > *,
.footer__grid > *, .testimonials > *, .form > *, .channels > *, .cluster > *,
.nav__inner > *, .next-band__inner > *, .services__close > * {
  min-width: 0;
}

/* A narrow source asset (the app's navigation rail) is shown at its own size
   rather than upscaled to fill the column. */
.shot--narrow { max-width: 340px; }

/* ==========================================================================
   14. INNER-PAGE STRUCTURES
   Added when the site became multi-page. Everything below reuses the existing
   tokens, type scale and spacing scale — no new colours beyond --accent-warm,
   which is the FORNO project accent promoted to a site-wide token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 PAGE HERO — the masthead every inner page opens with
   -------------------------------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--s64));
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { margin-bottom: var(--s24); max-width: 20ch; }
.page-hero .lead { max-width: 56ch; }
.page-hero .eyebrow { color: var(--accent-warm); }

.page-hero__meta {
  margin-top: var(--s48);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s16) var(--s48);
}
.page-hero__meta > div { display: grid; gap: var(--s4); }
.page-hero__meta b { font-weight: 500; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   14.2 HOMEPAGE PREVIEW SECTIONS
   A section head with a heading on the left and a "view all" link on the
   right — the pattern that keeps the homepage short.
   -------------------------------------------------------------------------- */
.preview__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s24);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s48);
}
.preview__head h2 { max-width: 20ch; }
.preview__head .arrow-link { flex: none; }

/* --------------------------------------------------------------------------
   14.3 WORK CARDS — the /work grid and the homepage preview
   -------------------------------------------------------------------------- */
.work-grid { display: grid; gap: var(--s48); }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s64); } }
.work-grid > * { min-width: 0; }

.project-card { position: relative; display: grid; gap: var(--s24); align-content: start; }
.project-card__media { border-radius: var(--r12); overflow: hidden; }
.project-card .shot__frame { transition: transform var(--t-fast) ease, border-color var(--t-fast) ease; }
.project-card:hover .shot__frame { transform: scale(1.01); border-color: var(--border-strong); }
.project-card__meta { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s12); align-items: baseline; }
.project-card__meta .mono { color: var(--accent-warm); }
.project-card h3 { margin-block: var(--s8) var(--s12); }
.project-card p { color: var(--text-muted); max-width: 46ch; }
.project-card .tags { margin-top: var(--s16); }
.project-card .arrow-link { margin-top: var(--s8); }

/* --------------------------------------------------------------------------
   14.4 PROCESS TIMELINE — vertical, numbered, connected
   -------------------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: var(--s48); }
@media (min-width: 768px) { .timeline { gap: var(--s64); } }

.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s24);
  align-items: start;
}
@media (min-width: 768px) {
  .timeline__step { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s32); }
}

/* The connecting rule runs through the node column, stopping at the last step. */
.timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;   /* fill the row so the rule reaches the next node */
}
.timeline__rail::after {
  content: '';
  position: absolute;
  top: 56px;
  bottom: calc(var(--s48) * -1);
  width: 1px;
  background: var(--border);
}
@media (min-width: 768px) { .timeline__rail::after { top: 76px; bottom: calc(var(--s64) * -1); } }
.timeline__step:last-child .timeline__rail::after { display: none; }

.timeline__node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--accent-warm-dim);
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--accent-warm);
}
@media (min-width: 768px) { .timeline__node { width: 64px; height: 64px; font-size: 0.9375rem; } }

.timeline__body { padding-bottom: var(--s8); }
.timeline__when {
  display: block;
  color: var(--accent-warm);
  margin-bottom: var(--s8);
}
.timeline__body h3 { margin-bottom: var(--s12); }
.timeline__body p { color: var(--text-muted); max-width: 58ch; }

.timeline__get {
  margin-top: var(--s24);
  padding-top: var(--s16);
  border-top: 1px solid var(--border);
  max-width: 58ch;
  font-size: 0.9375rem;
  color: var(--text);
}
.timeline__get b {
  display: block;
  margin-bottom: var(--s4);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Compact homepage variant: numbers and titles only, no prose. */
.timeline--compact { gap: 0; }
.timeline--compact .timeline__step {
  border-top: 1px solid var(--border);
  padding-block: var(--s16);
  align-items: center;
}
.timeline--compact .timeline__step:last-child { border-bottom: 1px solid var(--border); }

/* On the homepage the six stages are a teaser, so they run in two columns
   and read down each column in turn. The full timeline is on /process. */
@media (min-width: 900px) {
  .timeline--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s64); }
  .timeline--compact .timeline__step:nth-child(2) { border-top: 1px solid var(--border); }
  .timeline--compact .timeline__step:nth-child(5) { border-bottom: 1px solid var(--border); }
}
.timeline--compact .timeline__rail::after { display: none; }
.timeline--compact .timeline__node { width: 40px; height: 40px; font-size: 0.75rem; }
.timeline--compact .timeline__body h3 { margin-bottom: 0; font-size: 1.0625rem; }
.timeline--compact .timeline__body { padding-bottom: 0; display: grid; gap: var(--s4); }

/* --------------------------------------------------------------------------
   14.5 SERVICE CARDS — the /services grid
   -------------------------------------------------------------------------- */
.svc-grid { display: grid; gap: var(--s24); }
@media (min-width: 720px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s32); } }
.svc-grid > * { min-width: 0; }

.svc {
  display: grid;
  align-content: start;
  gap: var(--s16);
  padding: var(--s32);
  border: 1px solid var(--border);
  border-radius: var(--r20);
  background: var(--bg-raised);
  transition: border-color var(--t-fast) ease;
}
.svc:hover { border-color: var(--border-strong); }

.svc__icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--accent-warm);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc h3 { font-size: 1.1875rem; }
.svc > p { color: var(--text-muted); font-size: 0.9375rem; }

.svc__list { border-top: 1px solid var(--border); margin-top: var(--s8); }
.svc__list li {
  display: flex;
  gap: var(--s12);
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding-block: var(--s12);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.svc__list li:last-child { border-bottom: 0; }

.mark { width: 14px; height: 14px; flex: none; margin-top: 4px; fill: none; stroke-width: 2; }
.mark--yes { stroke: var(--accent-warm); }
.mark--no { stroke: var(--text-dim); }

/* --------------------------------------------------------------------------
   14.6 PRICING CARDS — three tiers
   -------------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--s24); }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s24); align-items: start; } }
.tiers > * { min-width: 0; }

.tier {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s16);
  padding: var(--s32);
  border: 1px solid var(--border);
  border-radius: var(--r20);
  background: var(--bg-raised);
}
.tier--lead { border-color: var(--accent-warm-dim); }

.tier__badge {
  position: absolute;
  top: calc(var(--s12) * -1);
  left: var(--s32);
  padding: var(--s4) var(--s12);
  border-radius: 999px;
  background: var(--accent-warm);
  color: #120500;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tier h3 { font-size: 1.1875rem; }
.tier__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.tier__price .price-value {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.tier__from {
  display: block;
  margin-bottom: var(--s4);
}
.tier__blurb { color: var(--text-muted); font-size: 0.9375rem; max-width: 34ch; }

.tier__list { border-top: 1px solid var(--border); }
.tier__list li {
  display: flex;
  gap: var(--s12);
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding-block: var(--s12);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.tier .btn { margin-top: var(--s8); }

/* --------------------------------------------------------------------------
   14.7 DIRECT vs AGENCY — two-column comparison
   -------------------------------------------------------------------------- */
.compare { display: grid; gap: var(--s24); }
@media (min-width: 860px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32); } }
.compare > * { min-width: 0; }

.compare__col {
  padding: var(--s32);
  border: 1px solid var(--border);
  border-radius: var(--r20);
  background: var(--bg-raised);
}
.compare__col--mine { border-color: var(--accent-warm-dim); }

.compare__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s8) var(--s16);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s24);
}
.compare__col--mine .compare__label {
  border-color: var(--accent-warm-dim);
  color: var(--accent-warm);
}

.compare__list { border-top: 1px solid var(--border); }
.compare__list li {
  display: flex;
  gap: var(--s12);
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding-block: var(--s16);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.compare__col--mine .compare__list li { color: var(--text); }
.compare__list li:last-child { border-bottom: 0; }

.compare__note { margin-top: var(--s32); color: var(--text-dim); max-width: 62ch; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   14.8 ABOUT PAGE — portrait alongside the story
   -------------------------------------------------------------------------- */
.about-lead { display: grid; gap: var(--s48); align-items: start; }
@media (min-width: 900px) {
  .about-lead { grid-template-columns: 38fr 62fr; gap: var(--s64); }
}
.about-lead > * { min-width: 0; }
.about-lead__photo {
  margin: 0;
  max-width: 360px;
  border: 1px solid var(--border);
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
}
.about-lead__photo img { width: 100%; height: auto; }
@media (min-width: 900px) { .about-lead__photo { position: sticky; top: calc(var(--nav-h) + var(--s32)); } }

.skills { display: grid; gap: var(--s8) var(--s32); }
@media (min-width: 640px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skills li {
  border-bottom: 1px solid var(--border);
  padding-block: var(--s12);
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.about__more { margin-top: var(--s32); }
.section__head-lead { margin-top: var(--s16); }
.tiers__aside { margin-top: var(--s48); }
.about-lead__sub { margin-top: var(--s64); margin-bottom: var(--s16); }
.cs-back { margin-bottom: var(--s24); }

/* ==========================================================================
   15. PHONE PASS
   Tuned for a mid-range Android on 4G: less to paint, less to scroll,
   bigger targets, and the call bar always within thumb reach (see
   components.css §4). Every value comes from the existing token scale.
   ========================================================================== */

/* 15.1 Cheaper to paint ---------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --section-y: var(--s64);
    /* A 64px shadow blur is repainted on every scroll frame; a 24px one
       looks the same on a dark page at phone size. */
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
  .surface-light { --shadow-2: 0 8px 24px rgba(24, 20, 16, 0.10); }
}

/* 15.2 Touch --------------------------------------------------------------- */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

@media (hover: none) {
  /* No hover state left stuck on after a tap. */
  .project-card:hover .shot__frame,
  button.shot__frame:hover { transform: none; border-color: var(--border); }
  .svc:hover { border-color: var(--border); }
  .arrow-link:hover .icon { transform: none; }
  .btn--primary:hover, .btn--wa:hover, .channel--wa:hover { opacity: 1; }
  /* A visible press instead of the grey system flash. */
  .btn:active, .channel:active, .arrow-link:active, .faq__q:active,
  .menu__links a:active, .footer__list a:active, .nav__links a:active { opacity: 0.6; }
}

/* 15.3 Type on small phones ------------------------------------------------ */
@media (max-width: 479px) {
  .h1, .hero h1 { font-size: clamp(2.125rem, 9.6vw, 2.6rem); }
  .h2 { font-size: clamp(1.75rem, 7.6vw, 2rem); }
}

/* 15.4 Hidden on phones ---------------------------------------------------- */
@media (max-width: 1023px) {
  /* The call bar carries WhatsApp on every screen, so the hero's quiet text
     link would only repeat it. */
  .hero .wa-link { display: none; }
}
@media (max-width: 767px) {
  /* The hero already shows the same person. On a phone a second 9:16
     photograph is ~600px of scrolling; /about still shows it in full.
     Being lazy-loaded and hidden, it is not downloaded at all. */
  .about__portrait { display: none; }
}
@media (max-width: 479px) {
  .hero__meta { display: none; }          /* the services preview says the same */
  .project-card .tags { display: none; }  /* the case study carries the detail */
}

/* 15.5 Tighter rhythm ------------------------------------------------------ */
@media (max-width: 767px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + var(--s32)); padding-bottom: var(--s48); }
  .hero h1 { margin-bottom: var(--s16); }
  .hero .lead { margin-bottom: var(--s24); }
  .hero__buttons { margin-bottom: 0; }
  .hero__visual { margin-top: var(--s32); }
  .hero__portrait { max-width: 240px; }

  .cred__item { padding-block: var(--s16); }
  .cred__item p { margin-top: var(--s4); }
  .cred__note { padding-top: var(--s16); }

  .section__head, .preview__head { margin-bottom: var(--s32); }
  .preview__head { gap: var(--s16); }
  .project-card { gap: var(--s16); }

  .page-hero { padding-top: calc(var(--nav-h) + var(--s32)); padding-bottom: var(--s48); }
  .page-hero h1 { margin-bottom: var(--s16); }
  .page-hero__meta { margin-top: var(--s32); gap: var(--s16) var(--s32); }
  .cs-hero { padding-top: calc(var(--nav-h) + var(--s32)); padding-bottom: var(--s32); }
  .cs-meta { margin-top: var(--s32); }

  .svc-grid, .tiers, .compare { gap: var(--s16); }
  .svc, .tier, .compare__col { padding: var(--s24); }
  .tier__list li, .compare__list li { padding-block: var(--s8); }
  .compare__label { margin-bottom: var(--s16); }

  /* Capabilities: on a phone the "what's included" list reads as one wrapped
     line instead of a stack of rows — the same content at a third of the
     height, nine cards over. */
  .svc__list { display: block; padding-top: var(--s12); color: var(--text-muted); font-size: 0.875rem; }
  .svc__list li { display: inline; border: 0; padding: 0; }
  .svc__list li .mark { display: none; }
  .svc__list li + li::before { content: ' \00B7  '; color: var(--text-dim); }

  .timeline:not(.timeline--compact) { gap: var(--s32); }
  .timeline:not(.timeline--compact) .timeline__rail::after { bottom: calc(var(--s32) * -1); }
  .timeline__get { margin-top: var(--s16); }

  .channels { margin-top: var(--s24); }
  .form { gap: var(--s16); }
  .cta-band__inner { gap: var(--s24); }
  .next-band a { padding-block: var(--s32); }

  .site-footer { padding-top: var(--s48); }
  .footer__grid { gap: var(--s32); }
  .footer__bottom { margin-top: var(--s32); }
}

/* 15.6 Bigger targets ------------------------------------------------------ */
/* Every touch device — phones and tablets alike, which is also where the call
   bar shows — gets full-size footer targets. */
@media (max-width: 1023px) {
  .footer__list { gap: 0; }
  .footer__list a { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
  /* The site links are single short words, so they pair up in two columns. */
  .footer__col:nth-child(2) .footer__list:first-of-type {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s16);
  }
}

/* 15.7 Readable text ------------------------------------------------------- */
@media (max-width: 767px) {
  /* Reading text never drops below the 15px the rest of the site uses for
     secondary copy. Mono labels (eyebrows, tags, numerals) are a separate,
     deliberate scale and stay as they are. */
  .svc__list li, .tier__list li, .channel__text span, .no-shots { font-size: 0.9375rem; }
  /* The starting price is the most important number on the page. */
  .price-group__head .price-value { font-size: 1rem; }
}