/* ============================================================
   base.css — structure, layout, and components.
   Theme-agnostic: every color and font comes from a custom
   property defined in one of the styles/theme-*.css files.
   ============================================================ */

/* ---- Layout defaults -------------------------------------
   Structural only. Theme files may override any of these, and
   own all color/font tokens outright.
   ---------------------------------------------------------- */
:root {
  --maxw: 1120px;
  --gut: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --radius-sm: 11px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --display-weight: 600;
  --display-tracking: -.015em;
  --h1-tracking: -.028em;
  --hero-glow: .85;
}

/* ---- Reset / base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.lede { font-size: clamp(17px, 2vw, 19px); color: var(--ink-soft); max-width: 62ch; }

section { padding-block: clamp(64px, 9vw, 120px); }

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 560;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-1px); }

.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 24px; }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; font-weight: 620; font-size: 16px; letter-spacing: -.01em;
}
.brand .mark {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--accent);
  display: grid; place-items: center; flex: none;
}
.brand .mark svg { width: 15px; height: 15px; fill: var(--on-accent); }

/* 22px rather than 30: six links plus the split button run ~825px wide, which
   left the menu almost touching the wordmark just above the collapse point. */
.nav-links { display: flex; align-items: center; gap: 22px; }
/* :not(.btn) so the CTA keeps .btn-primary's colors — a bare `.nav-links a`
   rule outranks `.btn-primary` on specificity and turns the button's label
   into low-contrast body text. */
.nav-links a:not(.btn) {
  text-decoration: none; font-size: 15px; color: var(--ink-soft);
  transition: color .16s ease;
}
.nav-links a:not(.btn):hover { color: var(--accent); }
.nav-cta { margin-left: 6px; }

/* ---- Split CTA button ------------------------------------- */
.cta-split { position: relative; display: inline-flex; }
.cta-split .btn-primary {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding-right: 16px;
}
.cta-caret {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 13px; cursor: pointer;
  border: none; border-left: 1px solid color-mix(in srgb, var(--on-accent) 28%, transparent);
  background: var(--accent); color: var(--on-accent);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  box-shadow: var(--shadow);
  transition: background .18s ease;
}
.cta-caret:hover { background: var(--accent-ink); }
.cta-caret svg { width: 14px; height: 14px; transition: transform .2s ease; }
.cta-split.open .cta-caret svg { transform: rotate(180deg); }

.cta-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 236px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  display: none;
}
.cta-split.open .cta-menu { display: block; }
.cta-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  text-decoration: none; font-size: 14.5px; color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.cta-menu a:hover { background: var(--accent-wash); color: var(--accent-ink); }
.cta-menu svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

/* Right-hand cluster. .nav-links takes the slack so the menu stays beside it
   rather than drifting to the middle of the bar. */
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-links { margin-left: auto; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; color: var(--ink-soft);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.theme-toggle svg { width: 17px; height: 17px; }
/* Show the destination, not the current state: moon in light mode means
   "go dark". */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 18px; height: 18px; }

/* Collapse at 1000px. Six links, the split button and the theme toggle run
   ~900px wide; below this the menu starts crowding the wordmark. */
@media (max-width: 1000px) {
  .nav-links {
    position: absolute; inset: 70px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 20px; box-shadow: var(--shadow);
    display: none;
  }
  .nav-links.open { display: flex; }
  /* Direct children only — the split-button menu holds its own <a>s. */
  .nav-links > a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .nav-cta { margin: 14px 0 0; justify-content: center; }
  .nav-toggle { display: block; }

  /* No dropdown needed in the collapsed panel — there's room to just list the
     alternatives. Caret goes away, menu renders inline, and the duplicate
     Calendly entry drops since the button above it already does that. */
  .cta-split { display: flex; flex-direction: column; width: 100%; }
  .cta-split .btn-primary { border-radius: var(--radius-pill); justify-content: center; padding-right: 22px; }
  .cta-caret { display: none; }
  .cta-menu {
    position: static; display: block; margin-top: 10px;
    min-width: 0; box-shadow: none; background: transparent; border: none; padding: 0;
  }
  .cta-menu a:first-child { display: none; }
  .cta-menu a { padding: 12px 2px; font-size: 15px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-block: clamp(56px, 9vw, 104px) clamp(48px, 7vw, 88px);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; top: -30%; right: -10%;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-wash) 0%, transparent 68%);
  opacity: var(--hero-glow, .85); pointer-events: none;
}
.hero .wrap { position: relative; }

.hero-grid {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(32px, 6vw, 72px);
  /* start, not center: the visual column is ~350px shorter than the text, and
     centring left a matching void above and below it with the portrait's top
     edge relating to nothing. Anchoring both columns to a shared top edge
     puts the photo alongside the headline. */
  align-items: start;
}
/* Collapse later than the draft did — the two columns still read fine at ~950px */
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.availability {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  /* Tight to the headline — it's a label belonging to it, not a separate block. */
  padding: 7px 15px 7px 12px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Sized for a short headline. At 52px "Analytics that unlock value." broke
   with "value." orphaned on line two; at 62 it splits evenly after "that". */
h1 { font-size: clamp(36px, 5.8vw, 62px); letter-spacing: var(--h1-tracking); }
h1 em { font-style: normal; color: var(--accent); }

/* Rhythm down the column, loosest at the biggest break: the headline block
   gets room before the body copy, consecutive paragraphs sit closer together
   than the gap that separates them from the headline. */
.hero p.lede { margin-top: 30px; font-size: clamp(17px, 2.1vw, 20px); }
.hero p.lede + p.lede { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.hero-note {
  margin-top: 28px; font-size: 14px; color: var(--muted);
  /* flex-start, not center: these wrap to two lines on narrow screens and a
     centred tick floats in the middle of the block instead of sitting with
     the first line. The 4px nudge optically centres it on that line. */
  display: flex; align-items: flex-start; gap: 8px;
}
/* Consecutive notes read as one short list, not two separate asides. */
.hero-note + .hero-note { margin-top: 8px; }
.hero-note svg { width: 15px; height: 15px; flex: none; color: var(--accent); margin-top: 4px; }

/* ---- Hero visual: portrait stacked above the chart card ----
   Capped at 340px so portrait + card together stay close to the height of
   the text column, which keeps the hero from growing. Square crop rather
   than 4:5 — the source is near-square, so 1:1 shows it essentially
   uncropped and the face isn't fighting the frame. */
.hero-visual {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 340px; justify-self: end;
}

.hero-portrait {
  /* Full column width so the portrait and the card below share both edges.
     No aspect-ratio and no object-fit: height comes from the tag's own
     width/height attributes, so the whole 575x587 photo shows uncropped —
     any fixed frame here would cut the face, since the source is near-square
     and the column is wider than it is tall. */
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.hero-visual .chart-card { width: 100%; padding: 16px; }
.hero-visual .chart-card .chart-value { font-size: 24px; margin: 4px 0 0; }
.hero-visual .chart-card .chart-delta { font-size: 12px; margin-bottom: 12px; }
.hero-visual .chart-card .chart-head h3 { font-size: 13px; }

@media (max-width: 880px) {
  .hero-visual { justify-self: center; max-width: 380px; }
}

/* ---- Hero chart card -------------------------------------- */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}
.chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.chart-head h3 { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.chart-head span { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.chart-value { font-family: var(--font-display); font-size: 34px; line-height: 1.1; margin: 6px 0 2px; }
.chart-delta { font-size: 13px; color: var(--accent); font-weight: 560; margin-bottom: 16px; }
.chart-card svg { width: 100%; height: auto; }

.bar { transform-origin: bottom; animation: grow .9s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes grow { from { transform: scaleY(0); } }
.spark { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.6s .35s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bar, .spark { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   TOOLS STRIP
   ============================================================ */
.strip { border-block: 1px solid var(--line); background: var(--bg-alt); padding-block: 30px; }
.strip .wrap {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 52px);
  flex-wrap: wrap; justify-content: center;
}
.strip-label {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.tool { font-size: 15px; font-weight: 560; color: var(--ink-soft); opacity: .82; }

/* Credibility strip sits directly under the hero — names carry more weight
   than the tool list, so give them a touch more presence. */
.strip-names .tool { font-size: 16px; opacity: 1; color: var(--ink); }

/* Second row of the credibility strip. It's a .wrap inside .strip, so it
   inherits the flex/centring; this just separates it from the names above
   and dials the tools back so they don't compete with the company names. */
.tools-row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.strip-names .tools-row .tool { font-size: 15px; opacity: .82; color: var(--ink-soft); }

/* ============================================================
   MID-PAGE CTA
   ============================================================ */
.cta-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(22px, 4vw, 48px); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 42px) clamp(26px, 4vw, 46px);
  box-shadow: var(--shadow);
}
.cta-band h2 { font-size: clamp(22px, 2.9vw, 30px); }
.cta-band p { margin-top: 10px; color: var(--ink-soft); font-size: 16px; max-width: 52ch; }
.cta-band .btn { flex: none; }
#cta-mid { padding-block: clamp(20px, 3vw, 36px); }

/* ============================================================
   SERVICES
   ============================================================ */
.section-head { max-width: 68ch; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head h2 { font-size: clamp(29px, 4vw, 42px); }
.section-head p { margin-top: 16px; }

/* Six service cards divide evenly three-up, which also keeps the section
   from running to three tall rows. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.card .ico {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--accent-wash); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 20px;
}
.card .ico svg { width: 20px; height: 20px; }
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 15.5px; }
.card ul { margin: 12px 0 0; padding: 0; list-style: none; }
.card li { font-size: 14.5px; color: var(--muted); padding-left: 20px; position: relative; margin-top: 8px; }
/* Bullets stay single-column now that cards are three-up and ~330px wide. */
.card li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .7;
}

/* Bullet list is tucked behind a click-to-expand toggle so the six cards
   don't sit at ragged heights from differing list lengths. */
.card-details { margin-top: 16px; }
.card-details summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600;
  color: var(--muted);
  transition: color .16s ease;
}
.card-details summary:hover { color: var(--accent); }
.card-details summary::-webkit-details-marker { display: none; }
.card-details summary::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.card-details[open] summary::after { transform: rotate(-135deg); }
.card-details summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .card-details summary::after { transition: none; }
}

/* ============================================================
   PROCESS
   ============================================================ */
/* Tinted band. Applied to alternating sections to give the page rhythm —
   not tied to the process section specifically. */
.band { background: var(--bg-alt); border-block: 1px solid var(--line); }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; counter-reset: step; }
/* Five across needs ~1080px to stay readable; below that go three-up, then
   two, then stacked. */
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } }
@media (max-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: 30px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--accent);
}
.step::after {
  content: ""; position: absolute; top: 8px; left: 30px; right: -12px; height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}
.step:last-child::after { display: none; }
/* Connector only makes sense while the steps sit on one unbroken row. */
@media (max-width: 1080px) { .step::after { display: none; } }
.step h3 { font-family: var(--font-body); font-size: 17px; font-weight: 620; letter-spacing: -.005em; margin-bottom: 8px; }
.step p { font-size: 14.8px; color: var(--muted); }

/* Scope/qualification signal under the process steps. */
.scope-note {
  margin-top: clamp(30px, 4vw, 42px);
  padding-top: clamp(24px, 3vw, 30px);
  border-top: 1px solid var(--line);
  font-size: 15.5px; color: var(--muted); max-width: 70ch;
}

/* ============================================================
   SCENARIOS — "sound familiar?" checklist
   ============================================================ */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
@media (max-width: 760px) { .checks { grid-template-columns: 1fr; } }

/* Grouped scenarios as an accordion. Fourteen undifferentiated boxes stopped
   being scannable; four collapsible runs let someone scan the categories and
   open only what applies. <details> gives keyboard support, screen-reader
   semantics and find-in-page expansion for free — no JS, and it still works
   if the stylesheet never arrives. */
.check-group { border-top: 1px solid var(--line); }
.check-group:last-of-type { border-bottom: 1px solid var(--line); }

.check-group-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; cursor: pointer;
  list-style: none;          /* Firefox */
}
.check-group-head::-webkit-details-marker { display: none; }
.check-group-head:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}
.check-group-head:hover .check-group-label { color: var(--accent); }

/* CSS chevron rather than an icon file — inherits the theme colour and has
   one thing to animate. */
.check-group-head::after {
  content: ""; flex: none;
  width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.check-group[open] .check-group-head::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .check-group-head::after { transition: none; }
}

.check-group-label {
  /* Still an h3 for the document outline, but now the thing you click, so it
     carries heading weight. Sentence case, not caps — uppercase at 20px reads
     shouty and scans slower. */
  flex: 1; margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 20px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.25;
  text-transform: none;
  color: var(--ink);
  transition: color .16s ease;
}

.check-group .checks { padding-bottom: 20px; gap: 8px 24px; }

/* Slimmer now that the group headings carry the weight. */
.check {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  transition: border-color .2s ease;
}
.check:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.check svg { width: 17px; height: 17px; flex: none; color: var(--accent); margin-top: 4px; }
/* Keyword emphasis so the list scans in one pass. Weight + full-strength ink
   rather than the accent colour — accent is already carrying the eyebrows,
   icons, ticks and bullets, and seven more uses of it would turn to noise. */
.check strong { color: var(--ink); font-weight: 620; }

/* ============================================================
   ENGAGEMENT MODES
   ============================================================ */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .modes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .modes { grid-template-columns: 1fr; } }

.mode { padding-top: 18px; border-top: 2px solid var(--accent); }
.mode h3 {
  font-family: var(--font-body); font-size: 16.5px; font-weight: 620;
  letter-spacing: -.005em; margin-bottom: 7px;
}
.mode p { font-size: 14.8px; color: var(--muted); }

/* Divider between the modes block and the process block in one section */
.subhead {
  margin: clamp(52px, 7vw, 84px) 0 clamp(30px, 4vw, 44px);
  padding-top: clamp(44px, 6vw, 68px);
  border-top: 1px solid var(--line);
}
.subhead h3 {
  font-size: clamp(22px, 2.8vw, 28px);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}
.subhead p { margin-top: 12px; color: var(--ink-soft); max-width: 60ch; font-size: 16px; }

/* ============================================================
   PRIOR CLIENTS
   ============================================================ */
.clients { display: flex; flex-wrap: wrap; gap: 12px; }
.client {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 15.5px; font-weight: 560; color: var(--ink);
}
.client::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.client .sector {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
}
.clients-note { margin-top: 24px; font-size: 15px; color: var(--muted); max-width: 62ch; }

/* ============================================================
   REFERENCES
   ============================================================ */
.refs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 820px) { .refs { grid-template-columns: 1fr; } }

.ref {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px 24px;
  display: flex; flex-direction: column;
}
.ref .mark-q {
  font-family: var(--font-display); font-size: 40px; line-height: .8;
  color: var(--accent); opacity: .32; margin-bottom: 10px;
}
/* flex:1 pushes every figcaption to the card floor, so uneven quote lengths
   still line their attributions up across the row. */
.ref blockquote {
  margin: 0 0 20px; flex: 1;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 17.5px);
  line-height: 1.6; letter-spacing: -.006em;
  color: var(--ink-soft);
}
.ref blockquote p + p { margin-top: 1em; }
.ref figcaption { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 16px; }
.ref figcaption strong { display: block; color: var(--ink); font-weight: 620; font-size: 14.8px; }
.refs-note { margin-top: 26px; font-size: 15px; color: var(--muted); }

/* The single-quote .ref-featured panel was removed when a second reference
   arrived — two cards side by side read as corroboration in a way stacked
   panels don't. It's in git history if you ever drop back to one. */

/* ============================================================
   ABOUT
   ============================================================ */
/* Background comes from .band where the alternating rhythm calls for it —
   see the section order in index.html. */
.about { border-block: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 6vw, 68px); align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.portrait {
  aspect-ratio: 4 / 5; width: 100%;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
  display: grid; place-items: center; color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  text-align: center; padding: 20px; overflow: hidden;
}
/* When a real <img> replaces the placeholder div it inherits the same frame.
   height:auto is load-bearing — the width/height attributes on the tag make
   both dimensions definite, which switches aspect-ratio off entirely. The
   attributes stay so the browser can reserve space before the image loads. */
img.portrait { object-fit: cover; height: auto; padding: 0; }

.about-body h2 { font-size: clamp(28px, 3.6vw, 38px); margin-bottom: 20px; }
/* :not(.eyebrow) — a bare `.about-body p` outranks `.eyebrow` on specificity
   and was recolouring the section label to body text, so About's eyebrow
   rendered grey while every other section's was teal. */
.about-body p:not(.eyebrow) { color: var(--ink-soft); font-size: 16.5px; }
.about-body p + p { margin-top: 16px; }
/* Results paragraph: lift the figures out of the body colour so they register
   when skimmed. This is the only proof left on the page carrying numbers. */
.about-body strong { color: var(--ink); font-weight: 620; }

/* Inline labels within the About prose. Muted, not accent: the section
   eyebrow and the creed cards keep the teal, so colour still signals "new
   region" rather than marking every paragraph too. The mono face, caps and
   tracking already read as a label without it. */
.about-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 8px;
}
/* The h2 already carries its own bottom margin. */
.about-body h2 + .about-label { margin-top: 6px; }

/* Guiding principles / values. Lifted out of the running prose so they read
   as a stated position rather than two more paragraphs of biography. */
.creed-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 28px;
}
@media (max-width: 620px) { .creed-cards { grid-template-columns: 1fr; } }

.creed-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
}
.creed-card h3 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
  margin-bottom: 14px;
}
.creed-card ul { margin: 0; padding: 0; list-style: none; }
.creed-card li {
  position: relative; padding-left: 18px;
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
.creed-card li + li { margin-top: 9px; }
.creed-card li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .7;
}

.facts {
  display: flex; gap: 40px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line);
}
.fact .n { font-family: var(--font-display); font-size: 27px; line-height: 1; }
.fact .l { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.quote-wrap { max-width: 800px; margin-inline: auto; text-align: center; }
.quote {
  font-family: var(--font-display); font-size: clamp(21px, 2.8vw, 28px); line-height: 1.45;
  letter-spacing: -.012em; color: var(--ink);
}
.quote-mark {
  font-family: var(--font-display); font-size: 54px; line-height: 1;
  color: var(--accent); opacity: .35; display: block; margin-bottom: 4px;
}
.attrib { margin-top: 24px; font-size: 14.5px; color: var(--muted); }
.attrib strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--bg-alt); border-top: 1px solid var(--line); }
.contact-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 60px);
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 5vw, 60px); align-items: center;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 860px) { .contact-card { grid-template-columns: 1fr; } }
.contact-card h2 { font-size: clamp(28px, 3.8vw, 40px); }
/* Same specificity trap as .about-body p — the eyebrow must keep its accent. */
.contact-card p:not(.eyebrow) { margin-top: 16px; color: var(--ink-soft); }

.contact-actions { display: flex; flex-direction: column; gap: 12px; }
.contact-line {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border: 1px solid var(--line); border-radius: 11px;
  text-decoration: none; font-size: 15px; color: var(--ink);
  transition: border-color .18s ease, background .18s ease;
}
.contact-line:hover { border-color: var(--accent); background: var(--accent-wash); }
.contact-line svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.contact-line span { color: var(--muted); font-size: 13px; margin-left: auto; font-family: var(--font-mono); }

/* The trailing badges are decoration. Below ~1080px the actions column is
   narrow enough — either because the card is still two-up, or because the
   card's own padding eats a phone-width row — that a long label plus its
   badge wraps to two lines and the rows stop matching height. Drop the badge
   instead of letting that happen. */
@media (max-width: 1080px) {
  .contact-line span { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer { padding-block: 40px; border-top: 1px solid var(--line); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot p { font-size: 14px; color: var(--muted); }
.foot nav { display: flex; gap: 22px; }
.foot a { font-size: 14px; color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* ============================================================
   UTILITIES
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 8px; z-index: 100; text-decoration: none;
}
.skip:focus { left: var(--gut); }