/* ==========================================================================
   MUSTAVES — White theme option
   Clean · Premium · Minimal · Corporate · Spacious
   Parallel design option — dark theme remains at root.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color — white theme */
  --bg: #FFFFFF;
  --bg-2: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --ink: #0F172A;
  --ink-2: #475569;
  --ink-3: #64748B;
  /* Brand teal — deepened slightly for contrast on white */
  --accent: #0E9AA6;
  --accent-2: #0A9B82;
  --accent-ink: #FFFFFF;
  --grad-accent: linear-gradient(100deg, #0E9AA6 0%, #05A88C 100%);
  /* Section backgrounds now use the same bright gradient as the buttons directly (per
     explicit direction), not a darkened variant. NOTE: this measures ~3–3.5:1 contrast for
     white text — meets AA for large text/UI (3:1) but not small body text (4.5:1). Text
     opacities below are pushed as high as reasonable to compensate within that constraint. */
  --accent-deep: #0B5F63;
  --accent-deep-2: #0A6F72;
  --accent-deep-3: #045C4C;
  --grad-brand: var(--grad-accent);
  /* Alternate — same two stops, reversed direction — so consecutive brand sections don't
     read as identical copy-pasted blocks. */
  --grad-brand-alt: linear-gradient(-100deg, #05A88C 0%, #0E9AA6 100%);
  /* Very light brand-tinted wash — dark text stays readable, used for a softer rhythm beat
     between white and the deep --grad-brand sections. */
  --tint: #EAF7F6;
  --grad-tint: linear-gradient(165deg, #E3F5F3 0%, #FAFDFD 70%, #FFFFFF 100%);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.06), 0 28px 64px rgba(15, 23, 42, 0.1);

  /* Type */
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Font-weight system — the full editorial scale, used deliberately by role
     rather than tuned per-element. Every value below is one of the axis steps
     Inter Tight is actually loaded at (see the Google Fonts <link> in <head>:
     300;350;400;450;500;550;600;650;700), so nothing here relies on synthetic
     bolding. JetBrains Mono only loads 400/500/600/700 — mono-set text (kickers,
     mono labels, footer columns, etc.) should stick to --fw-regular/medium/
     semibold/extrabold and skip thin/light/bold on that family. */
  --fw-thin: 300;       /* decorative numerals / chapter marks only */
  --fw-light: 350;      /* quiet supporting copy, footnotes, muted paragraphs */
  --fw-regular: 400;    /* default body text, nav at rest, mixed-weight headline accents */
  --fw-medium: 500;     /* eyebrows/labels, secondary CTAs, list items, active nav */
  --fw-semibold: 600;   /* subheadings, card/list titles, primary-adjacent emphasis */
  --fw-bold: 650;        /* section headings, plan/card titles that need to lead */
  --fw-extrabold: 700;  /* hero + main display headlines, primary CTA, brand mark */

  /* Fluid type scale */
  --fs-hero: clamp(3.3rem, 9vw, 8.2rem);
  --fs-display: clamp(2.7rem, 6.2vw, 5.6rem);
  --fs-title: clamp(2.1rem, 4vw, 3.5rem);
  --fs-heading: clamp(1.55rem, 2.4vw, 2.1rem);
  --fs-lead: clamp(1.2rem, 1.6vw, 1.45rem);
  --fs-body: 1.125rem;
  --fs-small: 0.975rem;
  --fs-micro: 0.8rem;

  /* Layout — 8px grid */
  --wrap: 1320px;
  --wrap-narrow: 880px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --sect: clamp(5rem, 11vw, 10rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;

  /* Misc — 12–16px radii */
  /* Tightened slightly from the original 8/12/16 — a crisper, more architectural radius
     reads editorial rather than the soft, overly-rounded "SaaS startup" look. */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --header-h: 76px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the fixed header */
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

/* Light scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,0.2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border-radius: 99px;
  border: 2px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.28); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: rgba(14, 154, 166, 0.18); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: 0.6rem 1.1rem; border-radius: 99px;
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 14px; }

.page-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90rem 48rem at 85% -15%, rgba(31, 194, 206, 0.08), transparent 55%),
    radial-gradient(70rem 40rem at -10% 110%, rgba(5, 228, 188, 0.05), transparent 55%),
    var(--bg);
}
.page-bg::after { display: none; }

/* ---------- Typography ----------
   The weight scale below is deliberate, not decorative: display/heading text
   defaults bold-to-extrabold so it dominates; the .serif accent span used
   throughout headlines (see t-hero/t-display/t-title usage on every page)
   stays at --fw-regular, so the mixed-weight "bold statement + light accent
   word" contrast happens automatically wherever that pattern is used, without
   per-headline overrides. Body/lead text stays light-to-regular for comfortable
   reading; labels and emphasis sit in the medium/semibold middle. */
h1, h2, h3, h4 {
  font-weight: var(--fw-bold);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.t-hero { font-size: var(--fs-hero); font-weight: var(--fw-extrabold); }
.t-display { font-size: var(--fs-display); font-weight: var(--fw-bold); }
.t-title { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.1; }
.t-heading { font-size: var(--fs-heading); font-weight: var(--fw-semibold); line-height: 1.22; letter-spacing: -0.018em; }
.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: var(--fw-light);
  letter-spacing: 0;
  max-width: 34em;
}

.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
}

.kicker {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker::before {
  content: ""; width: 1.6rem; height: 1px;
  background: var(--accent);
  flex: none;
}
.kicker--accent { color: var(--accent); }
.kicker--bare::before { display: none; }

.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.accent-text { color: var(--accent); }

.grad-text {
  background: linear-gradient(100deg, #0C7F8A 0%, #05A88C 45%, #0E9AA6 70%, #059d84 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradPan 7s ease-in-out infinite alternate;
  /* background-clip:text only paints inside the element's box, but italic serif
     descenders and overhangs (the tail of the "g" in "grow") reach past it and were
     cut off. Extend the painted box; the matching side margins keep the text in place,
     and inline vertical padding doesn't change line height. */
  padding: 0 0.12em 0.2em;
  margin: 0 -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@keyframes gradPan {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* ---------- Layout ---------- */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--narrow { width: min(var(--wrap-narrow), 100% - var(--gutter) * 2); margin-inline: auto; }

.sect { padding-block: var(--sect); }
.sect--tight { padding-block: calc(var(--sect) * 0.6); }
.sect--line-top { border-top: 1px solid var(--line); }

/* ---------- Section colour rhythm ----------
   Two deliberate "anchor" treatments used sparingly to break up an all-white page:
   --tint (soft wash, text stays dark, zero contrast rework) for text-heavy sections,
   --accent (full brand colour, white text) for short, high-impact sections. */
.sect--tint { background: var(--grad-tint); }

.sect--accent {
  background: var(--grad-brand);
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow: hidden;
  border-top: 0; border-block-color: transparent;
}
.sect--accent::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46rem 24rem at 88% -12%, rgba(255, 255, 255, 0.07), transparent 60%);
}
/* Alternate deep-gradient recipe so consecutive brand sections down a page don't repeat
   the identical background — same shade family, reversed angle/emphasis. Add alongside
   .sect--accent (all its text/contrast overrides still apply). */
.sect--accent.sect--accent-alt,
.sect--line-top.sect--accent.sect--accent-alt { background: var(--grad-brand-alt); }
.sect--accent.sect--accent-alt::before {
  background: radial-gradient(42rem 22rem at 10% 108%, rgba(255, 255, 255, 0.08), transparent 58%);
}
.sect--accent .kicker { color: rgba(255, 255, 255, 0.8); }
.sect--accent .kicker::before { background: rgba(255, 255, 255, 0.7); }
.sect--accent .kicker--accent { color: rgba(255, 255, 255, 0.9); }
.sect--accent .kicker--accent::before { background: rgba(255, 255, 255, 0.75); }
.sect--accent h2, .sect--accent h3 { color: #fff; }
.sect--accent .t-lead, .sect--accent .muted { color: rgba(255, 255, 255, 0.94); }
.sect--accent .dim { color: rgba(255, 255, 255, 0.78); }
.sect--accent .ai-facts { border-top-color: rgba(255, 255, 255, 0.22); }
.sect--accent .ai-fact { border-color: rgba(255, 255, 255, 0.22); }
.sect--accent .ai-fact h3 { color: #fff; }
.sect--accent .ai-fact p { color: rgba(255, 255, 255, 0.94); }
.sect--accent .ai-fact .mono-tag { color: #EFFFFB; }
.sect--accent .stat { border-top-color: rgba(255, 255, 255, 0.32); }
.sect--accent .stat__num { color: #fff; }
.sect--accent .stat__num sub, .sect--accent .stat__num .unit { color: #6FF0DE; }
.sect--accent .stat__label { color: rgba(255, 255, 255, 0.94); }

/* Manifesto section, when coloured */
.manifesto.sect--accent p { color: rgba(255, 255, 255, 0.9); }
.manifesto.sect--accent.lit p .hl { color: #fff; }
.manifesto.sect--accent .manifesto__note p { color: rgba(255, 255, 255, 0.94); }

/* "Does this sound familiar?" pain/fix pairs, when the wrapping section is coloured */
.sect--accent .pain { border-top-color: rgba(255, 255, 255, 0.25); }
.sect--accent .pain q { color: #fff; }
.sect--accent .pain p { color: rgba(255, 255, 255, 0.94); }
.sect--accent .pain p strong { color: #EFFFFB; }

/* Chapters (Build / Grow / Engage), when coloured */
.chapter.sect--accent { border-top-color: transparent; }
.chapter.sect--accent .chapter__index { -webkit-text-stroke-color: rgba(255, 255, 255, 0.18); }
.chapter.sect--accent .chapter__problem { color: rgba(255, 255, 255, 0.94); border-left-color: rgba(255, 255, 255, 0.7); }
.sect--accent .chapter__list a, .sect--accent .chapter__list-item {
  color: rgba(255, 255, 255, 0.88); border-bottom-color: rgba(255, 255, 255, 0.22);
}
.sect--accent .chapter__list a:hover { color: #fff; }
.sect--accent .chapter__list a .arr { color: rgba(255, 255, 255, 0.65); }
.sect--accent .chapter__list a:hover .arr { color: #fff; }
.sect--accent .chapter__outcome { color: #EFFFFB; }

/* About: origin-note cards and values, when their section is coloured */
.sect--accent .about-note { border-left-color: rgba(255, 255, 255, 0.6); }
.sect--accent .about-note span { color: rgba(255, 255, 255, 0.94); }
.sect--accent .values__item { border-bottom-color: rgba(255, 255, 255, 0.22); }
.sect--accent .values__item::before { color: #EFFFFB; }
.sect--accent .values__item p { color: rgba(255, 255, 255, 0.94); }

/* Services ledger accordions, when their chapter is coloured */
.sect--accent .ledger__row { border-bottom-color: rgba(255, 255, 255, 0.22); }
.sect--accent .ledger__num { color: rgba(255, 255, 255, 0.75); }
.sect--accent .ledger__name { color: #fff; }
.sect--accent .ledger__toggle { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); }
.sect--accent .ledger__btn[aria-expanded="true"] .ledger__toggle { border-color: #fff; color: #fff; }
.sect--accent .ledger__cell dt { color: rgba(255, 255, 255, 0.9); }
.sect--accent .ledger__cell dd { color: rgba(255, 255, 255, 0.94); }

/* Portfolio: case-study steps and the work index table, when coloured */
.sect--accent .story__step p { color: rgba(255, 255, 255, 0.94); }
.sect--accent .story__label .num { color: #EFFFFB; }
.sect--accent .story__results div { border-left-color: rgba(255, 255, 255, 0.35); }
.sect--accent .story__results dd em { color: #6FF0DE; }
.sect--accent .story__results dt { color: rgba(255, 255, 255, 0.75); }
.sect--accent .windex { border-top-color: rgba(255, 255, 255, 0.22); }
.sect--accent .windex__row { border-bottom-color: rgba(255, 255, 255, 0.22); }
.sect--accent .windex__row:hover { background: rgba(255, 255, 255, 0.06); }
.sect--accent .windex__cell { color: rgba(255, 255, 255, 0.92); }
.sect--accent .windex__cell--metric { color: #6FF0DE; }
.sect--accent .windex__arrow { color: rgba(255, 255, 255, 0.6); }
.sect--accent .topic-chip { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); }
.sect--accent .topic-chip:hover, .sect--accent .topic-chip.is-active { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.1); }

/* Pricing FAQ, when coloured */
.sect--accent .faq { border-top-color: rgba(255, 255, 255, 0.22); }
.sect--accent .faq__item { border-bottom-color: rgba(255, 255, 255, 0.22); }
.sect--accent .faq__q { color: #fff; }
.sect--accent .faq__q:hover { color: #EFFFFB; }
.sect--accent .faq__icon { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.sect--accent .faq__q[aria-expanded="true"] .faq__icon { border-color: #fff; color: #fff; }
.sect--accent .faq__a p { color: rgba(255, 255, 255, 0.94); }

.sect-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1.2rem; }
.sect-head .t-display, .sect-head .t-title { max-width: 16em; }

/* Split (asymmetric editorial two-column) */
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
  .split--flip > :first-child { order: 2; }
  .split--top { align-items: start; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
              color 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* Light sweep across buttons on hover */
.btn::before {
  content: ""; position: absolute; top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.btn:hover::before { left: 130%; }

/* Filled/primary-style variants read as the confident choice; the outline
   .btn--line stays at the base medium weight — refined, not competing. */
.btn--solid,
.btn--accent {
  font-weight: var(--fw-semibold);
}
.btn--solid {
  background: var(--accent); color: #fff;
}
.btn--solid:hover {
  background: #0c8792;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn--line {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: #fff;
}
.btn--line:hover {
  background: rgba(14, 154, 166, 0.06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn--accent {
  background: var(--grad-accent); color: #fff;
}
.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px -12px rgba(14, 154, 166, 0.4);
}

.btn--lg { padding: 1.15rem 2.3rem; font-size: 1.1rem; }
.btn--sm { padding: 0.65rem 1.3rem; font-size: 0.92rem; }

/* Text link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: var(--fw-medium); font-size: 1.02rem;
  color: var(--ink);
  position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink .arr { transition: transform 0.35s var(--ease); color: var(--accent); }
.tlink:hover .arr { transform: translateX(4px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.header__inner {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.65rem; }
.brand img { width: 26px; height: 26px; }
.brand__word {
  font-weight: var(--fw-bold); font-size: 1.15rem; letter-spacing: -0.01em;
}

.nav { display: none; }
@media (min-width: 1020px) {
  .nav { display: flex; align-items: center; gap: 0.4rem; }
}
/* Nav stays understated at rest (regular); hover/active/open pick up medium
   weight rather than a colour change alone, so the current/important item
   is legible even without colour. */
.nav__link {
  position: relative;
  padding: 0.55rem 0.95rem;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  color: var(--ink-2);
  border-radius: 99px;
  transition: color 0.3s var(--ease), background 0.3s var(--ease), font-weight 0.3s var(--ease);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); font-weight: var(--fw-medium); }
.nav__link.is-active { color: var(--ink); font-weight: var(--fw-medium); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
}
.nav__caret { transition: transform 0.3s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.header__cta { display: none; }
@media (min-width: 1020px) { .header__cta { display: inline-flex; } }

/* --- Mega menu --- */
.mega {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 99;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__inner {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr;
  gap: 2.5rem;
  padding-block: 2.6rem;
}
.mega__col .kicker { margin-bottom: 1.1rem; }
.mega__col p { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 1.1rem; max-width: 24em; }
.mega__list { display: grid; gap: 0.15rem; }
.mega__item {
  display: block; padding: 0.42rem 0.6rem; margin-left: -0.6rem;
  font-size: 1.02rem; font-weight: var(--fw-regular); color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color 0.25s var(--ease), background 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.mega__item:hover { color: var(--ink); background: var(--surface-2); padding-left: 0.85rem; }
.mega__aside {
  border-left: 1px solid var(--line);
  padding-left: 2.5rem;
  display: flex; flex-direction: column; gap: 1rem; justify-content: center;
}
.mega__aside strong { font-weight: var(--fw-semibold); font-size: 1.15rem; letter-spacing: -0.01em; }
.mega__aside p { font-size: var(--fs-small); color: var(--ink-3); }

/* --- Mobile toggle & overlay --- */
.menu-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; align-items: center;
  border-radius: 50%;
  z-index: 130; position: relative;
}
.menu-btn span {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 1020px) { .menu-btn { display: none; } }

.mnav {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav__inner {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: 3rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  flex: 1;
}
.mnav__link, .mnav__acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 1.05rem 0.25rem;
  font-size: clamp(1.8rem, 6.5vw, 2.5rem);
  font-weight: var(--fw-medium); letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  text-align: left;
}
.mnav.is-open .mnav__link, .mnav.is-open .mnav__acc-btn {
  opacity: 1; transform: translateY(0);
}
.mnav.is-open > .mnav__inner > *:nth-child(1) { transition-delay: 0.06s; }
.mnav.is-open > .mnav__inner > *:nth-child(2) { transition-delay: 0.11s; }
.mnav.is-open > .mnav__inner > *:nth-child(3) { transition-delay: 0.16s; }
.mnav.is-open > .mnav__inner > *:nth-child(4) { transition-delay: 0.21s; }
.mnav.is-open > .mnav__inner > *:nth-child(5) { transition-delay: 0.26s; }
.mnav.is-open > .mnav__inner > *:nth-child(6) { transition-delay: 0.31s; }
.mnav.is-open > .mnav__inner > *:nth-child(7) { transition-delay: 0.36s; }
.mnav.is-open > .mnav__inner > *:nth-child(8) { transition-delay: 0.41s; }
.mnav.is-open > .mnav__inner > *:nth-child(9) { transition-delay: 0.46s; }
.mnav__num { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.15em; }
.mnav__acc-btn .nav__caret { transition: transform 0.35s var(--ease); color: var(--ink-3); }
.mnav__acc-btn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.mnav__acc-panel {
  overflow: hidden; max-height: 0;
  transition: max-height 0.5s var(--ease);
}
.mnav__acc-panel ul { padding: 0.9rem 0.25rem 1.4rem; display: grid; gap: 0.85rem; }
.mnav__acc-panel a { font-size: 1.15rem; color: var(--ink-2); font-weight: var(--fw-regular); }
.mnav__acc-panel a:active { color: var(--accent); }
.mnav__foot {
  margin-top: auto; padding-top: 2.5rem;
  display: grid; gap: 1rem;
  opacity: 0; transition: opacity 0.5s var(--ease) 0.4s;
}
.mnav.is-open .mnav__foot { opacity: 1; }
.mnav__foot .btn { width: 100%; }
.mnav__foot-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }

body.nav-locked { overflow: hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  /* Margin (not padding) clears the fixed header — keeping it out of the box below means
     min-height + symmetric padding-block center the content against the true visible
     area under the header, not against a padding-top that's taller than padding-bottom. */
  margin-top: var(--header-h);
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 6vh, 4rem);
}
/* Layered brand-colour depth behind the hero — kept faint enough that headline/CTA
   contrast against white is untouched; the glow sits behind the visual, not under it. */
.hero { overflow: clip; }
/* Real element (not ::before) so the parallax script can transform it independently of
   the hero content — the slowest-moving layer, giving the hero a sense of depth. */
.hero__glow {
  position: absolute; inset: -8% -4%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 80% 6%, rgba(14, 154, 166, 0.11), transparent 62%),
    radial-gradient(44rem 30rem at 6% 92%, rgba(5, 168, 140, 0.07), transparent 58%);
  /* Opacity, not transform — the scroll-parallax script drives transform on this element,
     so the "breathing" glow lives on a separate property to avoid the two fighting. */
  animation: heroGlowBreathe 9s ease-in-out infinite;
}
@keyframes heroGlowBreathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Hero main-visual card: gentle continuous float (transform) + mouse-parallax (also
   transform, applied via inline style by JS) intentionally share this element — the
   float uses a translateY keyframe, mouse-parallax adds an extra translate on hover-move.
   Kept on .hero-visual__inner (not the scroll-parallax element itself) so the two never
   collide on the same property/element. */
.hero-visual__inner { animation: heroVizFloat 7s ease-in-out infinite; }
@keyframes heroVizFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.viz__chip { animation: heroChipFloat 5.2s ease-in-out infinite; }
@keyframes heroChipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__glow, .hero-visual__inner, .viz__chip { animation: none; }
}
.hero__kicker { margin-bottom: 1.6rem; }
/* Bolder sans weight against the light italic serif accent gives the two-line
   headline real weight contrast instead of one uniform grey mass. */
.hero h1 {
  max-width: 11.5em;
  font-weight: var(--fw-extrabold);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
/* .serif already sits at --fw-regular globally — the pairing of this
   extrabold statement with that lighter accent word is the mixed-weight
   contrast the hero is meant to lead with. */
.hero__sub { margin-top: 1.9rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.5rem; }

/* Small, quiet value indicators under the CTAs — icon + one line, no borders/cards. */
.hero__values {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.1rem;
  margin-top: clamp(2.4rem, 5.5vw, 3.4rem);
}
.hero__value {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; font-weight: var(--fw-medium); color: var(--ink-2);
}
.hero__value-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: rgba(14, 154, 166, 0.1);
  color: var(--accent);
}

/* ==========================================================================
   HERO GRAPHIC — homepage-only abstract growth composition
   Replaces a literal dashboard mockup with a layered, editorial data-visual:
   a soft colour field, a large geometric ring, a floating growth-index panel,
   and a couple of small labelled data points. Each layer carries its own
   scroll-parallax speed (data-parallax, background→foreground) and its own
   mouse-parallax depth (data-depth on .hero-graphic__inner, set in main.js),
   so the two motion systems never fight over the same transform.
   ========================================================================== */
.hero-graphic {
  position: relative;
  width: 100%;
  min-height: clamp(400px, 40vw, 560px);
  max-width: 460px;
  margin-inline: auto;
}
@media (min-width: 900px) { .hero-graphic { max-width: none; margin-inline: 0; } }

.hero-graphic__layer { position: absolute; inset: 0; pointer-events: none; }
.hero-graphic__inner { position: absolute; inset: 0; }

/* Background — very soft colour field, slowest layer */
.hero-graphic__glow { position: absolute; border-radius: 50%; animation: hgGlowBreathe 9s ease-in-out infinite; }
.hero-graphic__glow--a {
  width: 58%; aspect-ratio: 1; top: -8%; right: -6%;
  background: radial-gradient(closest-side, rgba(14, 154, 166, 0.22), transparent 72%);
}
.hero-graphic__glow--b {
  width: 44%; aspect-ratio: 1; bottom: -4%; left: -2%;
  background: radial-gradient(closest-side, rgba(5, 168, 140, 0.15), transparent 72%);
  animation-delay: -4s;
}
@keyframes hgGlowBreathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* Large geometric form + a fine connecting thread — slow layer */
.hero-graphic__ring {
  position: absolute; top: -4%; right: 8%; width: 62%; aspect-ratio: 1;
  border: 1px solid rgba(11, 95, 99, 0.2); border-radius: 50%;
}
.hero-graphic__thread {
  position: absolute; top: 2%; right: 24%; width: 1px; height: 20%;
  background: linear-gradient(var(--accent), transparent);
  opacity: 0.45;
}

/* Main visual — a floating growth-index panel, medium layer */
.hero-graphic__panel {
  position: absolute; inset: 21% 6% 12% 12%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero-graphic__panel-label {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero-graphic__panel-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent-2);
  animation: pulse 2.4s ease-in-out infinite;
}
/* The panel's content — the growth pathway (.gpath) — lives in the MOTION VISUALS block. */

/* Small floating labels + editorial numbering — foreground, fastest layer */
.hero-graphic__tag {
  position: absolute;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.5rem 0.95rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em;
  color: var(--ink-2);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: heroChipFloat 5.6s ease-in-out infinite;
}
.hero-graphic__tag .pulse {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent-2);
  animation: pulse 2.4s ease-in-out infinite;
}
.hero-graphic__tag--a { top: 4%; left: -2%; }
.hero-graphic__tag--b { bottom: 6%; right: -2%; animation-delay: -2.6s; }
.hero-graphic__num {
  position: absolute; left: 2%; bottom: -7%;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .hero-graphic__glow,
  .hero-graphic__panel-label::before,
  .hero-graphic__tag,
  .hero-graphic__tag .pulse { animation: none; }
}

@media (max-width: 899px) {
  .hero-graphic { min-height: clamp(300px, 62vw, 380px); }
  .hero-graphic__ring,
  .hero-graphic__thread,
  .hero-graphic__num { display: none; }
  .hero-graphic__panel { inset: 6% 4% 8% 8%; }
}
@media (max-width: 699px) {
  .hero-graphic { min-height: clamp(260px, 66vw, 320px); }
  .hero-graphic__tag--b { display: none; }
}

/* Page hero (interior pages) */
.phero {
  padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 6rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.phero .kicker { margin-bottom: 1.4rem; }
.phero h1 { max-width: 12em; }
.phero__sub { margin-top: 1.8rem; }

/* ---------- Hero visual system ----------
   Reusable right-column graphic for hero/page-hero sections, reusing the same abstract
   "device mockup" visual language as the Build/Grow/Engage chapters (.viz/.dash/.serp/.feed)
   so every page's hero feels like one system rather than a one-off illustration.
   Text stays primary: visual sits in the narrower ~40% column and is capped in width. */
.hero-visual { max-width: 400px; margin-inline: auto; }
@media (min-width: 900px) { .hero-visual { max-width: none; margin-inline: 0; } }
@media (max-width: 899px) { .hero .split, .phero .split { gap: 2.5rem; } }

/* Each interior page hero's visual (Services, Pricing, About, Insights, Contact) is a
   content-specific [data-mv] composition — see the MOTION VISUALS block. */

/* ---------- Marquee ticker ---------- */
/* Top edge is a tapered rule rather than a full-bleed hard line, so the hero doesn't
   end on an abrupt break — an intentional, softened handoff instead. */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-block: 1.15rem;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent);
}
.ticker__track {
  display: flex; gap: 3.5rem; width: max-content;
  animation: ticker 36s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 3.5rem;
  font-family: var(--mono); font-size: 0.8rem; font-weight: var(--fw-medium);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
.ticker__item::after { content: "◆"; font-size: 0.5rem; color: var(--accent); opacity: 0.7; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   CRAFTED VISUALS (CSS interface mockups)
   ========================================================================== */
.viz {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #fff 0%, var(--bg-2) 100%);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease),
              box-shadow 0.6s var(--ease);
}
.viz:hover {
  transform: translateY(-5px);
  border-color: rgba(14, 154, 166, 0.4);
  box-shadow: var(--shadow-lg);
}
.viz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40rem 20rem at 85% -10%, rgba(31,194,206,0.12), transparent 55%);
}

/* Browser chrome frame */
.viz__bar {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.viz__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.viz__url {
  margin-left: 0.8rem;
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3);
  background: var(--surface-2);
  padding: 0.3rem 0.9rem; border-radius: 99px;
  letter-spacing: 0.05em;
}
.viz__body { padding: clamp(1.2rem, 3vw, 2rem); position: relative; }


/* Floating chip on visuals */
.viz__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.5rem 1rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--ink-2);
  box-shadow: var(--shadow-md);
  z-index: 3;
}
.viz__chip .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,228,188,0.5); }
  55% { box-shadow: 0 0 0 7px rgba(5,228,188,0); }
}

/* Generic skeleton lines for mock content */
.sk { border-radius: 4px; background: rgba(15,23,42,0.08); height: 10px; }
.sk--lg { height: 16px; }
.sk--accent { background: linear-gradient(90deg, rgba(31,194,206,0.55), rgba(5,228,188,0.55)); }
.sk--dim { background: rgba(15,23,42,0.05); }

/* Search results mock (Grow) */
.serp { display: grid; gap: 1rem; }
.serp__query {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid var(--line-strong); border-radius: 99px;
  padding: 0.7rem 1.2rem;
  font-size: 0.85rem; color: var(--ink-2);
}
.serp__result {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1rem 1.2rem; display: grid; gap: 0.45rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.serp__result--top {
  border-color: rgba(14,154,166,0.35);
  background: linear-gradient(120deg, rgba(14,154,166,0.08), #fff);
}
.serp__badge {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent-2);
}
.serp__title { font-size: 0.92rem; font-weight: var(--fw-semibold); }
.serp__url { font-family: var(--mono); font-size: 0.65rem; color: var(--ink-3); }

/* Social post card (Engage) */
.feed__post {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.feed__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; }
.feed__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--grad-accent);
  display: grid; place-items: center;
  color: #fff; font-weight: var(--fw-extrabold); font-size: 0.72rem;
}
.feed__name { font-size: 0.82rem; font-weight: var(--fw-semibold); }
.feed__meta { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3); }

/* ==========================================================================
   MANIFESTO (big editorial statement)
   ========================================================================== */
.manifesto p {
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height: 1.28;
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
  max-width: 26em;
  color: var(--ink-3);
}
/* Emphasis here is colour AND weight together, not colour alone. */
.manifesto p .hl { color: inherit; font-weight: var(--fw-semibold); transition: color 0.7s var(--ease); }
.manifesto.lit p .hl { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .manifesto p .hl { color: var(--ink); }
  /* On the dark accent treatment the highlight must stay light, or it disappears */
  .manifesto.sect--accent p .hl { color: #fff; }
}
.manifesto__note {
  margin-top: 2.2rem;
  display: flex; gap: 1rem; align-items: flex-start;
  max-width: 30em;
}
.manifesto__note p { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); letter-spacing: 0; font-weight: var(--fw-light); max-width: none; }

/* ==========================================================================
   CHAPTERS (services on home & services page)
   ========================================================================== */
.chapter {
  border-top: 1px solid var(--line);
  padding-block: var(--sect);
  position: relative;
}
.chapter__index {
  font-family: var(--mono);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: var(--fw-thin);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(15, 23, 42, 0.1);
  user-select: none;
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  right: var(--gutter);
  pointer-events: none;
}
.chapter__body { display: grid; gap: 1.4rem; align-content: start; }
.chapter__problem {
  font-size: var(--fs-small);
  color: var(--ink-3);
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  max-width: 28em;
}
.chapter__list { margin-top: 1rem; display: grid; }
.chapter__list a, .chapter__list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-weight: var(--fw-medium); font-size: 1.1rem;
  color: var(--ink-2);
  transition: color 0.3s var(--ease), padding-left 0.35s var(--ease);
}
.chapter__list a:hover { color: var(--ink); padding-left: 0.7rem; }
.chapter__list a .arr { color: var(--ink-3); transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.chapter__list a:hover .arr { color: var(--accent); transform: translateX(3px); }
.chapter__outcome {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.4rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--accent-2);
}

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats {
  display: grid; gap: 3rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: grid; gap: 0.6rem; align-content: start; border-top: 1px solid var(--line-strong); padding-top: 1.4rem; }
.stat__num {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat__num sub, .stat__num .unit { font-size: 0.45em; color: var(--accent); font-weight: var(--fw-medium); vertical-align: baseline; }
.stat__label { font-size: var(--fs-small); color: var(--ink-3); max-width: 16em; }

/* ==========================================================================
   WORK / CASE ROWS
   ========================================================================== */
.case-row {
  display: grid; gap: 1.6rem;
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 5vw, 3.4rem);
  transition: background 0.4s var(--ease);
  position: relative;
}
@media (min-width: 900px) {
  .case-row { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 4rem; }
}
.case-row:last-of-type { border-bottom: 1px solid var(--line); }
.case-row__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 99px;
  padding: 0.32rem 0.8rem; color: var(--ink-2);
}
.case-row h3 { font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: var(--fw-bold); letter-spacing: -0.025em; }
.case-row__desc { margin-top: 1rem; color: var(--ink-2); max-width: 30em; }
.case-row__metrics { display: flex; gap: 2.4rem; margin-top: 1.6rem; flex-wrap: wrap; }
.case-row__metrics div { display: grid; gap: 0.15rem; }
.case-row__metrics dd { font-size: 1.65rem; font-weight: var(--fw-semibold); letter-spacing: -0.02em; }
.case-row__metrics dd em { font-style: normal; color: var(--accent); }
.case-row__metrics dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.case-row__visual { order: -1; }
@media (min-width: 900px) { .case-row__visual { order: 0; } }

/* Abstract case visual */
.case-visual {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
a.case-link:hover .case-visual, .case-row:hover .case-visual {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.case-visual__mark {
  /* Large editorial wordmark, not a small centred label — fills the frame with
     typography instead of leaving it a mostly-empty tile. */
  font-family: var(--serif); font-style: italic; font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 0.92;
  color: var(--ink);
  z-index: 2;
  transition: transform 0.5s var(--ease);
}
a.case-link:hover .case-visual__mark,
.windex__row:hover .case-visual__mark {
  transform: translateY(-4px);
}
.case-visual__arrow {
  position: absolute; top: clamp(1.2rem, 3vw, 2rem); right: clamp(1.2rem, 3vw, 2rem);
  z-index: 2; color: var(--ink-3);
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
}
a.case-link:hover .case-visual__arrow, .case-row:hover .case-visual__arrow {
  transform: translate(3px, -3px); color: var(--accent);
}
.case-visual--a { background: radial-gradient(30rem 18rem at 20% 10%, rgba(31,194,206,0.2), transparent 55%), var(--bg-2); }
.case-visual--b { background: radial-gradient(30rem 18rem at 80% 90%, rgba(5,228,188,0.16), transparent 55%), var(--bg-2); }
.case-visual--c { background: radial-gradient(26rem 16rem at 50% 120%, rgba(31,194,206,0.14), transparent 60%), var(--bg-2); }
.case-visual::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
}

/* Work index table (portfolio) */
.windex { border-top: 1px solid var(--line); }
.windex__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 2rem;
  align-items: center;
  padding: 1.6rem 0.2rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease), padding-left 0.35s var(--ease);
  color: inherit;
}
@media (min-width: 900px) {
  .windex__row { grid-template-columns: 2fr 1.3fr 1.3fr 0.6fr auto; }
}
.windex__row:hover { background: var(--bg-2); padding-left: 1rem; }
.windex__name { font-size: clamp(1.3rem, 2.7vw, 1.9rem); font-weight: var(--fw-medium); letter-spacing: -0.02em; }
.windex__cell { font-size: var(--fs-small); color: var(--ink-3); }
.windex__cell--metric { color: var(--accent-2); font-family: var(--mono); font-size: 0.78rem; }
.windex__arrow { color: var(--ink-3); transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.windex__row:hover .windex__arrow { transform: translate(4px, -4px); color: var(--accent); }
@media (max-width: 899px) {
  .windex__cell--services, .windex__cell--year { display: none; }
}

/* ==========================================================================
   NARRATIVE CASE STUDY (Challenge → Strategy → Execution → Results)
   ========================================================================== */
.story { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.story__step {
  display: grid; gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
}
@media (min-width: 900px) {
  .story__step { grid-template-columns: 220px 1fr; gap: 3rem; }
}
.story__label { display: grid; gap: 0.4rem; align-content: start; }
.story__label .num { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.2em; }
.story__label .name { font-size: 1.2rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.story__step p { color: var(--ink-2); max-width: 38em; }
.story__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin-top: 0.5rem; }
.story__results div { border-left: 1px solid var(--line-strong); padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.story__results dd { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.story__results dd em { font-style: normal; color: var(--accent); }
.story__results dt { font-size: 0.78rem; color: var(--ink-3); }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .process { grid-template-columns: repeat(4, 1fr); }
  .process__step { border-right: 1px solid var(--line); }
  .process__step:last-child { border-right: 0; }
}
.process__step {
  padding: 2.2rem 1.8rem 2.2rem 0;
  border-bottom: 1px solid var(--line);
  display: grid; gap: 1rem; align-content: start;
  position: relative;
  transition: background 0.4s var(--ease);
}
@media (min-width: 900px) {
  .process__step { padding: 2.6rem 2rem; border-bottom: 0; }
  .process__step:first-child { padding-left: 0; }
}
.process__step:hover { background: var(--bg-2); }
.process__num {
  font-family: var(--mono); font-size: 0.75rem; color: var(--accent);
  letter-spacing: 0.2em;
}
.process__step h3 { font-size: 1.5rem; font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.process__step p { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.65; }

/* ==========================================================================
   TESTIMONIALS (editorial pull-quote rotator)
   ========================================================================== */
.quotes { position: relative; }
.quotes__stage { position: relative; min-height: 340px; }
@media (min-width: 700px) { .quotes__stage { min-height: 300px; } }
.quote {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease), visibility 0.65s;
  display: grid; gap: 2rem; align-content: start;
}
.quote.is-active { opacity: 1; visibility: visible; transform: translateY(0); position: relative; }
.quote blockquote {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.32;
  font-weight: var(--fw-regular);
  letter-spacing: -0.018em;
  max-width: 24em;
  text-wrap: balance;
}
.quote blockquote .serif { color: var(--accent); }
.quote figcaption { display: flex; align-items: center; gap: 1rem; }
.quote__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-accent);
  display: grid; place-items: center;
  color: #fff; font-weight: var(--fw-extrabold); font-size: 0.85rem;
  flex: none;
}
.quote__who strong { display: block; font-weight: var(--fw-semibold); font-size: 1.05rem; }
.quote__who span { font-size: 0.9rem; color: var(--ink-3); }
.quotes__nav { display: flex; gap: 0.6rem; margin-top: 2.4rem; align-items: center; }
.quotes__dot {
  width: 32px; height: 3px; border-radius: 2px;
  background: rgba(15, 23, 42, 0.14);
  transition: background 0.4s var(--ease);
  position: relative; overflow: hidden;
}
.quotes__dot.is-active { background: rgba(15, 23, 42, 0.22); }
.quotes__dot.is-active::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: left;
  animation: dotfill 7s linear forwards;
}
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.quotes__arrows { margin-left: auto; display: flex; gap: 0.5rem; }
.quotes__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.quotes__arrow:hover { border-color: var(--accent); color: var(--accent); background: rgba(14,154,166,0.06); }

/* ==========================================================================
   AI SECTION
   ========================================================================== */
.ai-band {
  position: relative;
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
}
.ai-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52rem 26rem at 50% 120%, rgba(31,194,206,0.1), transparent 60%);
}
/* Same specificity as .ai-band above — needs the extra class to win regardless of
   source order when the accent-colour treatment is applied. */
.ai-band.sect--accent { background: var(--grad-brand); border-block-color: transparent; }
.ai-band.sect--accent.sect--accent-alt { background: var(--grad-brand-alt); }
.ai-band.sect--accent::before { background: none; }
.ai-band.sect--tint { background: var(--grad-tint); border-block-color: transparent; }
.ai-band__inner { position: relative; }
.ai-facts { display: grid; gap: 0; margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--line); }
@media (min-width: 800px) { .ai-facts { grid-template-columns: repeat(3, 1fr); } }
.ai-fact {
  padding: 2rem 2rem 2rem 0;
  border-bottom: 1px solid var(--line);
  display: grid; gap: 0.7rem; align-content: start;
}
@media (min-width: 800px) {
  .ai-fact { border-bottom: 0; border-right: 1px solid var(--line); padding: 2.4rem 2rem; }
  .ai-fact:first-child { padding-left: 0; }
  .ai-fact:last-child { border-right: 0; }
}
.ai-fact h3 { font-size: 1.25rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.ai-fact p { font-size: var(--fs-small); color: var(--ink-3); }
.ai-fact .mono-tag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); }

/* ==========================================================================
   SERVICES PAGE — service ledger rows
   ========================================================================== */
.ledger { border-top: 1px solid var(--line); }
.ledger__row { border-bottom: 1px solid var(--line); }
.ledger__btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.7rem 0.2rem;
  text-align: left;
  transition: padding-left 0.35s var(--ease);
}
.ledger__btn:hover { padding-left: 0.9rem; }
.ledger__num { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.15em; }
.ledger__name { font-size: clamp(1.35rem, 2.9vw, 2rem); font-weight: var(--fw-medium); letter-spacing: -0.02em; }
.ledger__toggle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink-2); flex: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
/* Rotate only the plus into a cross — rotating the bordered box itself turns the
   square toggle into a diamond that pokes past the content edge on small screens. */
.ledger__toggle svg { transition: transform 0.45s var(--ease); }
.ledger__btn[aria-expanded="true"] .ledger__toggle { border-color: var(--accent); color: var(--accent); }
.ledger__btn[aria-expanded="true"] .ledger__toggle svg { transform: rotate(45deg); }
.ledger__panel { overflow: hidden; max-height: 0; transition: max-height 0.55s var(--ease); }
.ledger__panel-inner {
  display: grid; gap: 2rem;
  padding: 0.4rem 0.2rem 2.2rem;
}
@media (min-width: 900px) {
  .ledger__panel-inner { grid-template-columns: repeat(3, 1fr); gap: 3rem; padding-left: calc(0.2rem + 2.6rem); }
}
.ledger__cell dt {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.6rem;
}
.ledger__cell dd { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.7; }

/* Sticky chapter nav (services page) */
.chapnav {
  position: sticky; top: var(--header-h); z-index: 50;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-block: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.chapnav::-webkit-scrollbar { display: none; }
.chapnav__inner {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex; gap: 0.4rem;
  padding-block: 0.7rem;
}
.chapnav__link {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 1.1rem; border-radius: 99px;
  color: var(--ink-3); white-space: nowrap;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.chapnav__link:hover { color: var(--ink); }
.chapnav__link.is-active { color: #fff; background: var(--grad-accent); font-weight: var(--fw-semibold); }
/* On narrow screens the links scroll sideways: size the strip to its content so the
   last link keeps a gutter instead of running into the screen edge. */
@media (max-width: 899px) {
  .chapnav__inner { width: max-content; margin-inline: 0; padding-inline: var(--gutter); }
}
/* Anchored chapters and service rows must clear the sticky chapter bar as well as the
   fixed header (html's scroll-padding-top already covers the header). */
.chapnav ~ section[id],
.chapnav ~ section .ledger__row[id] { scroll-margin-top: 4rem; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.path-tag {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}

/* One-time projects list */
.projects-list { border-top: 1px solid var(--line); }
.projects-list__row {
  display: grid; gap: 0.6rem 2rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1.5rem 0.2rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.35s var(--ease), background 0.35s var(--ease);
  color: inherit;
}
@media (min-width: 900px) { .projects-list__row { grid-template-columns: 1.2fr 2fr auto; } }
.projects-list__row:hover { padding-left: 0.9rem; background: var(--bg-2); }
.projects-list__name { font-size: 1.28rem; font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.projects-list__desc { font-size: var(--fs-small); color: var(--ink-3); }
@media (max-width: 899px) { .projects-list__desc { grid-column: 1 / -1; } }

/* Plans */
.plans { display: grid; gap: 1.4rem; }
@media (min-width: 980px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.plan {
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.6rem;
  border-radius: var(--r-lg);
  position: relative;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.plan:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
@media (min-width: 980px) {
  .plans .plan { border-radius: 0; border-right-width: 0; }
  .plans .plan:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
  .plans .plan:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-right-width: 1px; }
  .plans .plan--hot {
    border-radius: var(--r-lg);
    border-right-width: 1px;
    transform: scale(1.03);
    z-index: 2;
  }
}
.plan--hot {
  border-color: rgba(14, 154, 166, 0.35);
  background:
    radial-gradient(24rem 14rem at 50% -20%, rgba(14,154,166,0.08), transparent 60%),
    #fff;
  box-shadow: var(--shadow-lg);
}
.plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad-accent); color: #fff;
  font-family: var(--mono); font-size: 0.6rem; font-weight: var(--fw-extrabold);
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.42rem 1.1rem; border-radius: 99px;
  white-space: nowrap;
}
.plan__head { display: grid; gap: 0.5rem; }
.plan__stage { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.plan__name { font-size: 2.1rem; font-weight: var(--fw-semibold); letter-spacing: -0.025em; }
.plan__tagline { font-size: var(--fs-small); color: var(--accent-2); font-weight: var(--fw-medium); }
.plan__who {
  font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6;
  border-left: 2px solid var(--line-strong);
  padding-left: 0.9rem;
}
.plan__list { display: grid; gap: 0.7rem; }
.plan__list li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: var(--fs-small); color: var(--ink-2);
}
.plan__list li::before {
  content: "";
  width: 14px; height: 14px; flex: none; margin-top: 3px;
  background: var(--accent);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / contain no-repeat;
}
.plan__list li.plan__carry { color: var(--ink-3); }
.plan__list li.plan__carry::before { background: var(--ink-3); }
.plan__meta { display: grid; gap: 0.5rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.plan__meta div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.plan__meta dt { color: var(--ink-3); }
.plan__meta dd { color: var(--ink); font-weight: var(--fw-medium); text-align: right; }
.plan .btn { margin-top: auto; width: 100%; }

/* "Choose your path" cards (pricing + home teaser) */
.path-cards { display: grid; gap: 1.4rem; }
@media (min-width: 800px) { .path-cards { grid-template-columns: 1fr 1fr; } }
.path-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 4.5vw, 3.2rem);
  display: grid; gap: 1.2rem; align-content: start;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  color: inherit;
}
.path-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(30rem 16rem at 50% -20%, rgba(31,194,206,0.12), transparent 60%);
  transition: opacity 0.5s var(--ease);
}
.path-card:hover { border-color: rgba(14, 154, 166, 0.4); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.path-card:hover::before { opacity: 1; }
.path-card__tag {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.path-card h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: var(--fw-bold); letter-spacing: -0.025em; }
.path-card p { color: var(--ink-2); font-size: 1.02rem; max-width: 28em; }
.path-card__list {
  display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--ink-3);
}
.path-card .tlink { margin-top: 0.6rem; }

/* "Does this sound familiar?" pain list */
.pains { display: grid; gap: 1.6rem 3rem; }
@media (min-width: 800px) { .pains { grid-template-columns: 1fr 1fr; } }
.pain {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  display: grid; gap: 0.55rem;
}
.pain q {
  quotes: "\201C" "\201D";
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.3; color: var(--ink);
  letter-spacing: -0.01em;
}
.pain p { font-size: var(--fs-small); color: var(--ink-3); max-width: 30em; }
.pain p strong { color: var(--accent-2); font-weight: var(--fw-semibold); }

/* Client logo strip */
.logo-strip {
  display: flex; flex-wrap: wrap; gap: 1.6rem 3.5rem;
  justify-content: space-between; align-items: center;
  border-block: 1px solid var(--line);
  padding-block: 2.2rem;
}
.logo-strip span {
  font-family: var(--mono); font-weight: var(--fw-medium);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.35s var(--ease);
}
.logo-strip span:hover { color: var(--ink); }

/* Dark-themed map embed */
.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.map-frame iframe {
  display: block; width: 100%; height: clamp(300px, 40vw, 420px); border: 0;
  filter: grayscale(0.35) contrast(0.95) brightness(1.02);
  border-radius: var(--r-lg);
}

/* Pricing principles */
.principles { display: grid; gap: 1.2rem; }
@media (min-width: 800px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.3rem;
  display: grid; gap: 0.5rem; align-content: start;
}
.principle h2,
.principle h3 { font-size: 1.18rem; font-weight: var(--fw-semibold); }
.principle p { font-size: var(--fs-small); color: var(--ink-3); }

/* ==========================================================================
   FAQ — editorial accordion
   A sticky heading column beside a numbered, thin-ruled list of questions.
   Markup: .faq[data-faq] > .faq__item > h3.faq__h > button.faq__q[aria-expanded][aria-controls]
   + .faq__a. Without JS every answer is simply visible; main.js adds .faq--js, collapses
   the answers and animates them open. Collapsed answers are visibility:hidden, so screen
   readers and the tab order skip them.
   ========================================================================== */
.faq-layout { display: grid; gap: clamp(2.2rem, 5vw, 3.5rem); }
.faq-layout__head { display: grid; gap: 1.1rem; justify-items: start; align-content: start; }
.faq-layout__title {
  font-size: var(--fs-title); font-weight: var(--fw-extrabold);
  letter-spacing: -0.035em; line-height: 1.02; max-width: 9em;
}
.faq-layout__title .serif { font-weight: var(--fw-regular); letter-spacing: -0.01em; color: var(--accent-deep); }
.faq-layout__intro { font-weight: var(--fw-light); color: var(--ink-2); max-width: 24em; }
.faq-layout__head .tlink { margin-top: 0.4rem; }
@media (min-width: 960px) {
  .faq-layout {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.4fr);
    column-gap: clamp(3rem, 7vw, 7rem); align-items: start;
  }
  .faq-layout__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.faq { position: relative; max-width: 50rem; border-top: 1px solid var(--line-strong); }
.faq__item { position: relative; border-bottom: 1px solid var(--line); }
/* Accent hairline that draws across the top of an open question */
.faq__item::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.faq__item.is-open::before { transform: scaleX(1); }
.faq__h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.faq__q {
  width: 100%; min-height: 3.5rem;
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.55rem) 0;
  background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--ink);
  font-family: var(--sans); font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1.35;
  transition: color 0.35s var(--ease), padding-left 0.45s var(--ease);
}
.faq__q:hover { padding-left: 0.4rem; }
.faq__q:hover,
.faq__item.is-open .faq__q { color: var(--accent-deep); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq__num {
  font-family: var(--mono); font-size: 0.7rem; font-weight: var(--fw-medium);
  letter-spacing: 0.16em; color: var(--ink-3);
  transition: color 0.35s var(--ease);
}
.faq__q:hover .faq__num,
.faq__item.is-open .faq__num { color: #087078; }
/* A plus that becomes a minus: the vertical stroke rotates flat */
.faq__icon {
  position: relative; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 0.78rem; height: 1.5px; margin: -0.75px 0 0 -0.39rem;
  background: currentColor; border-radius: 1px;
  transition: transform 0.45s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q:hover .faq__icon { border-color: var(--accent); }
.faq__item.is-open .faq__icon { border-color: var(--accent); background-color: rgba(14, 154, 166, 0.08); color: #087078; }
.faq__item.is-open .faq__icon::after { transform: rotate(180deg); }

.faq__a p {
  max-width: 42em;
  padding: 0 3.25rem clamp(1.4rem, 2.6vw, 1.9rem) 3.6rem;
  font-size: 1.05rem; font-weight: var(--fw-light); line-height: 1.7; color: var(--ink-2);
}
.faq__a a { color: #087078; text-decoration: underline; text-underline-offset: 3px; }
.faq--js .faq__a {
  max-height: 0; overflow: hidden; visibility: hidden;
  /* Closing: stay visible until the height has collapsed, then leave the a11y tree */
  transition: max-height 0.5s var(--ease), visibility 0s linear 0.5s;
}
/* Opening: visibility is deliberately not transitioned, so the answer is exposed at once
   and only the height animates. */
.faq--js .faq__item.is-open .faq__a {
  visibility: visible;
  transition: max-height 0.5s var(--ease);
}

@media (max-width: 599px) {
  .faq__q { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.7rem; }
  .faq__icon { width: 2rem; height: 2rem; }
  .faq__a p { padding: 0 0 1.4rem 2.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__item::before,
  .faq__q,
  .faq__icon::before,
  .faq__icon::after,
  .faq--js .faq__a,
  .faq--js .faq__item.is-open .faq__a { transition: none; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.values { counter-reset: val; border-top: 1px solid var(--line); }
.values__item {
  counter-increment: val;
  display: grid; gap: 0.8rem 3rem;
  padding: 2rem 0.2rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .values__item { grid-template-columns: 90px 260px 1fr; align-items: baseline; }
}
.values__item::before {
  content: "0" counter(val);
  font-family: var(--mono); font-size: 0.78rem; color: var(--accent);
  letter-spacing: 0.2em;
}
.values__item h3 { font-size: clamp(1.45rem, 2.9vw, 2rem); font-weight: var(--fw-semibold); letter-spacing: -0.02em; }
.values__item p { color: var(--ink-3); font-size: 1.05rem; max-width: 34em; }

/* Big statement w/ floating meta */
.about-note {
  border-left: 2px solid var(--accent);
  padding-left: 1.4rem;
  display: grid; gap: 0.4rem;
  max-width: 26em;
}
.about-note strong { font-weight: var(--fw-semibold); }
.about-note span { font-size: var(--fs-small); color: var(--ink-3); }

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.featured-article {
  display: grid; gap: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.featured-article:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.featured-article--soon:hover { border-color: var(--line); transform: none; box-shadow: var(--shadow-sm); }
@media (min-width: 900px) { .featured-article { grid-template-columns: 1.1fr 1fr; gap: 0; } }
.featured-article__visual {
  min-height: 260px;
  background:
    radial-gradient(26rem 16rem at 25% 15%, rgba(31,194,206,0.22), transparent 60%),
    radial-gradient(22rem 14rem at 85% 95%, rgba(5,228,188,0.14), transparent 55%),
    var(--surface-2);
  position: relative;
  display: grid; place-items: center;
}
.featured-article__visual .serif {
  font-size: clamp(3.5rem, 8vw, 6.5rem); color: var(--ink);
}
.featured-article__body {
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid; gap: 1.2rem; align-content: center;
}
.featured-article__body h2 { font-size: clamp(1.7rem, 3.3vw, 2.5rem); font-weight: var(--fw-bold); letter-spacing: -0.022em; }
.featured-article__body p { color: var(--ink-2); font-size: 1.05rem; max-width: 32em; }
.art-meta { display: flex; gap: 1.2rem; align-items: center; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.art-meta .topic { color: var(--accent); }

.article-list { border-top: 1px solid var(--line); }
.article-item {
  display: grid; gap: 0.6rem 2.5rem;
  padding: 1.8rem 0.2rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.35s var(--ease), background 0.35s var(--ease);
  color: inherit;
  align-items: center;
  grid-template-columns: 1fr auto;
}
@media (min-width: 900px) { .article-item { grid-template-columns: auto 1fr auto auto; } }
.article-item:hover { padding-left: 1rem; background: var(--bg-2); }
.article-item--soon:hover { padding-left: 0.2rem; background: transparent; }
.article-item__num { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.15em; display: none; }
@media (min-width: 900px) { .article-item__num { display: block; } }
.article-item h3 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.article-item p { font-size: var(--fs-small); color: var(--ink-3); grid-column: 1 / -1; max-width: 44em; }
@media (min-width: 900px) { .article-item p { grid-column: 2; } }
.article-item .art-meta { justify-self: end; }

.topics { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.topic-chip {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 99px;
  padding: 0.6rem 1.3rem; color: var(--ink-2);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.topic-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(14,154,166,0.06); }
button.topic-chip { appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; font: inherit; font-family: var(--mono); }
.topic-chip.is-active { border-color: var(--accent); color: var(--accent); background: rgba(14,154,166,0.06); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.channel-list { display: grid; border-top: 1px solid var(--line); }
.channel {
  display: flex; align-items: center; gap: 1.3rem;
  padding: 1.4rem 0.2rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.35s var(--ease), background 0.35s var(--ease);
  color: inherit;
}
.channel:hover { padding-left: 0.9rem; background: var(--bg-2); }
.channel__icon,
.icon-circle {
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
/* Reusable icon container for service/process icons — same visual language as the
   contact-page channel icons, so it reads as one system across the site. */
.icon-circle { width: 40px; height: 40px; }
.icon-circle svg { width: 18px; height: 18px; }
.ledger__btn:hover .icon-circle,
.process__step:hover .icon-circle { background: rgba(14, 154, 166, 0.08); border-color: var(--accent); transform: scale(1.06); }
.sect--accent .icon-circle { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.sect--accent .ledger__btn:hover .icon-circle { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.channel:hover .channel__icon { background: rgba(14,154,166,0.08); border-color: var(--accent); }
.channel__label { display: grid; gap: 0.1rem; }
.channel__label dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.channel__label dd { font-weight: var(--fw-medium); font-size: 1.12rem; }
.channel .arr { margin-left: auto; color: var(--ink-3); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.channel:hover .arr { transform: translateX(4px); color: var(--accent); }
.channel--region:hover { padding-left: 0.2rem; background: transparent; }
.channel__actions { margin-left: auto; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.channel__action {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 99px; padding: 0.55rem 1.1rem; white-space: nowrap;
  color: var(--ink-2); transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.channel__action:hover { border-color: var(--accent); color: var(--accent); background: rgba(14,154,166,0.06); }

/* WhatsApp region picker (floating WhatsApp button + "WhatsApp us" CTAs) */
.wa-menu {
  position: absolute; z-index: 60; min-width: 15rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 0.5rem; display: grid; gap: 0.2rem;
}
.wa-menu__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.8rem; border-radius: var(--r-sm, 8px); color: inherit;
  font-size: 0.85rem;
}
.wa-menu__item:hover, .wa-menu__item:focus-visible { background: var(--bg-2); }
.wa-menu__item span:last-child { color: var(--ink-3); font-family: var(--mono); font-size: 0.72rem; }

/* Form */
.form { display: grid; gap: 2rem; }
.form__row { display: grid; gap: 2rem; }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.55rem; position: relative; }
.field label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.field input, .field textarea, .field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.7rem 0.1rem;
  font-size: 1.15rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
  width: 100%;
}
.field select {
  appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23647573" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  cursor: pointer;
}
.field select option { background: var(--surface); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 0.7; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 110px; }
.field .err {
  font-size: 0.75rem; color: #DC2626; display: none;
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-bottom-color: #DC2626; }
.field.has-error .err { display: block; }
.form [data-form-submit-error] { color: #DC2626; font-size: 0.85rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__done {
  border: 1px solid rgba(14,154,166,0.35);
  border-radius: var(--r-lg);
  background: rgba(14,154,166,0.06);
  padding: 2rem;
  display: none;
  gap: 0.6rem;
}
.form__done.is-visible { display: grid; }
.form__done strong { font-size: 1.25rem; font-weight: var(--fw-semibold); }
.form__done p { font-size: var(--fs-small); color: var(--ink-2); }

/* Office meta */
.office-meta { display: grid; gap: 1.6rem; }
.office-meta div { display: grid; gap: 0.25rem; }
.office-meta dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.office-meta dd { font-size: 1.05rem; color: var(--ink-2); }

/* ==========================================================================
   CTA BLOCK (pre-footer)
   ========================================================================== */
.cta-block {
  position: relative;
  text-align: left;
}
.cta-block__inner {
  position: relative;
  display: grid; gap: 2.4rem;
  padding-block: var(--sect);
}
.cta-block h2 { font-size: var(--fs-display); font-weight: var(--fw-bold); max-width: 12em; }
.cta-block__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.cta-block__hint { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-3); }

/* CTA block only takes the brand treatment when it lands on a "brand" slot in a page's
   light/brand alternation (see .sect--accent) — otherwise it stays a plain light section. */
.cta-block.sect--accent .kicker--accent { color: rgba(255, 255, 255, 0.85); }
.cta-block.sect--accent .kicker--accent::before { background: rgba(255, 255, 255, 0.7); }
.cta-block.sect--accent h2 { color: #fff; }
.cta-block.sect--accent h2 .grad-text {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  animation: none;
  color: #EFFFFB;
}
.cta-block.sect--accent .btn--accent { background: #fff; color: var(--accent-2); }
.cta-block.sect--accent .btn--accent:hover { box-shadow: 0 14px 44px -14px rgba(0,0,0,0.35); }
.cta-block.sect--accent .btn--line { border-color: rgba(255, 255, 255, 0.6); color: #fff; background: transparent; }
.cta-block.sect--accent .btn--line:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.cta-block.sect--accent .cta-block__hint { color: rgba(255, 255, 255, 0.94); }
.cta-block__hint a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Dark footer: the one deliberate contrast "bookend" on an otherwise light site —
   closes the page with intent instead of fading out on the same flat white. */
.footer {
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
}
.footer__grid {
  position: relative;
  display: grid; gap: 3rem;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.3fr 0.9fr 0.8fr 0.8fr 1.1fr; gap: 1.6rem; } }
.footer__brand { display: grid; gap: 1.2rem; align-content: start; }
.footer__brand .brand__word { color: #fff; }
.footer__brand p { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.5); font-weight: var(--fw-light); max-width: 22em; }
.footer__tag {
  margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid; gap: 0.3rem;
}
.footer__tag-line {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #4FE0D4;
}
.footer__tag-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.04em; }
.footer__col h3 {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: var(--fw-semibold);
  margin-bottom: 1.2rem;
}
.footer__col ul { display: grid; gap: 0.65rem; }
.footer__col a {
  font-size: 1rem; color: rgba(255, 255, 255, 0.78); font-weight: var(--fw-light);
  transition: color 0.25s var(--ease);
}
.footer__col a:hover { color: #4FE0D4; }
.footer__reach { gap: 0.9rem !important; }
.footer__reach li { display: flex; align-items: flex-start; gap: 0.7rem; }
.footer__reach svg { flex: none; width: 17px; height: 17px; margin-top: 0.15rem; color: #4FE0D4; }
.footer__reach a { display: block; font-size: 0.95rem; font-weight: var(--fw-regular); }
.footer__reach-sub { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.4); font-weight: var(--fw-light); }
/* Mono text below only ever uses the weights JetBrains Mono actually loads
   (400/500/600/700) — regular here keeps the copyright line quiet without
   requesting a synthetic light weight the font file doesn't have. */
.footer__bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem;
  justify-content: space-between;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.55);
}
/* Decorative only — absolutely positioned so it never contributes to the footer's own
   height (it previously sat in normal document flow, ~160px tall, which is what was
   reading as a huge empty area below the real content). Clipped by .footer's overflow:
   hidden, so it can bleed off the bottom edge purely as a background flourish. */
.footer__watermark {
  position: absolute;
  left: 0; right: 0; bottom: -0.14em;
  z-index: 0;
  pointer-events: none; user-select: none;
  line-height: 0.78;
  font-size: clamp(3.5rem, 11vw, 11rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.04em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
}
.footer__grid, .footer__bottom { position: relative; z-index: 1; }

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
/* Hidden start states apply only once the page is marked .js (set inline in each page's
   <head>) — if JavaScript never runs, content is simply visible instead of invisible. */
.js .rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--rv-delay, 0s);
}
.js .rv.in-view { opacity: 1; transform: translateY(0); }
.js .rv--left { transform: translateX(-28px); }
.js .rv--left.in-view { transform: translateX(0); }
.js .rv--right { transform: translateX(28px); }
.js .rv--right.in-view { transform: translateX(0); }
.js .rv--scale { transform: scale(0.96) translateY(16px); }
.js .rv--scale.in-view { transform: scale(1) translateY(0); }

[data-parallax] { will-change: transform; }

/* Reduced motion: kill everything gracefully */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .rv { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  [data-parallax] { transform: none !important; }
}

/* ==========================================================================
   FLOATING WHATSAPP (appears after scroll)
   ========================================================================== */
.fab {
  position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-accent); color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.9);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s;
}
.fab.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(5, 228, 188, 0.4);
  animation: fabRing 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes fabRing {
  0% { transform: scale(0.85); opacity: 0.9; }
  70%, 100% { transform: scale(1.25); opacity: 0; }
}

/* Scroll cue (hero) */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.scroll-cue svg { animation: cueBob 2.2s var(--ease) infinite; color: var(--accent); }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------- Utilities ---------- */
.hide-mobile { display: none; }
@media (min-width: 900px) { .hide-mobile { display: revert; } }
@media (min-width: 900px) { .hide-desktop { display: none; } }


/* ---------- White-theme section rhythm ---------- */
.sect--line-top { background: transparent; }
/* ...except the deliberate colour-rhythm sections — same specificity as the rule
   above, so these need the extra class to win regardless of source order. */
.sect--line-top.sect--accent { background: var(--grad-brand); }
.sect--line-top.sect--tint { background: var(--grad-tint); }
.ticker { background: var(--bg-2); }
.logo-strip { background: #fff; border-radius: var(--r-lg); padding-inline: 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.ledger__row, .faq__item, .windex, .article-list, .channel-list, .projects-list { background: transparent; }
.field input, .field textarea, .field select {
  border-bottom-color: var(--line-strong);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--accent);
}
.menu-btn span { background: var(--ink); }
.skip-link { background: var(--ink); color: #fff; }
/* Inline SVG placeholder icons drawn for the dark theme */
.featured-article__visual .serif { color: rgba(15, 23, 42, 0.75); }

/* ==========================================================================
   EDITORIAL REFINEMENT
   The site is intentionally built from rules, type and image crops rather than
   soft containers. These final overrides keep every existing component intact
   while giving the shared system a more assured, magazine-like rhythm.
   ========================================================================== */
:root {
  --wrap: 1360px;
  --sect: clamp(4.5rem, 9vw, 9rem);
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 5px;
  --accent-deep: #07585e;
  --accent-deep-2: #063f46;
  --accent-deep-3: #032f35;
  --grad-brand: linear-gradient(128deg, #063e45 0%, #086b6b 48%, #087b6e 100%);
  --grad-brand-alt: linear-gradient(118deg, #075e64 0%, #06454d 52%, #08796e 100%);
}

body {
  background-color: #fff;
  background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.018) 1px, transparent 1px);
  background-size: min(8.333vw, 112px) 100%;
}
.page-bg {
  background:
    radial-gradient(90rem 48rem at 85% -15%, rgba(31, 194, 206, 0.08), transparent 55%),
    radial-gradient(70rem 40rem at -10% 110%, rgba(5, 228, 188, 0.05), transparent 55%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.018) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, min(8.333vw, 112px) 100%, auto;
}

/* Let the header belong to the hero at the top of a page; it gains definition
   only when the reader has moved into the content. */
.header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}
.nav { gap: clamp(0.2rem, 0.8vw, 0.75rem); }
.nav__link {
  padding: 0.5rem 0.3rem;
  border-radius: 0;
}
.nav__link:hover,
.nav__link[aria-expanded="true"] { background: transparent; color: var(--accent-deep); }
.nav__link::before {
  content: "";
  position: absolute;
  left: 0.3rem; right: 0.3rem; bottom: 0.15rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover::before,
.nav__link.is-active::before,
.nav__link[aria-expanded="true"]::before { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active::after { display: none; }

/* Buttons are deliberate labels, not soft app controls. */
.btn { border-radius: 2px; padding: 0.9rem 1.55rem; }
.btn--lg { padding: 1.05rem 1.85rem; }
.btn--sm { padding: 0.62rem 1rem; }
.btn--solid:hover,
.btn--accent:hover,
.btn--line:hover { transform: translate(3px, -3px); }
.kicker--accent,
.accent-text,
.path-tag,
.chapter__outcome,
.ai-fact .mono-tag { color: #087078; }
.tag,
.plan__flag,
.chapnav__link,
.mono-tag,
.topic-chip { border-radius: 1px; }

/* Every hero gets a restrained data-inspired field. It occupies former empty
   space but stays behind the typography and never reads as stock illustration. */
.hero,
.phero { isolation: isolate; }
.hero::after,
.phero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: clamp(16rem, 31vw, 34rem);
  aspect-ratio: 1;
  right: clamp(-11rem, -7vw, -3rem);
  top: clamp(2.5rem, 9vh, 7rem);
  opacity: 0.7;
  border: 1px solid rgba(14, 154, 166, 0.23);
  background:
    linear-gradient(90deg, rgba(14, 154, 166, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(14, 154, 166, 0.09) 1px, transparent 1px),
    linear-gradient(135deg, transparent 48%, rgba(14, 154, 166, 0.16) 48.15%, rgba(14, 154, 166, 0.16) 48.5%, transparent 48.65%);
  background-size: 2.6rem 2.6rem, 2.6rem 2.6rem, 100% 100%;
  transform: rotate(8deg);
}
/* The homepage hero replaces this generic grid patch with the fully art-directed
   .hero-graphic composition — cancel it here so the two don't overlap. */
.hero::after { content: none; }
.hero .split,
.phero .split { position: relative; }
.hero .split > :first-child,
.phero .split > :first-child { position: relative; z-index: 1; }
.hero .split > :first-child::after,
.phero .split > :first-child::after {
  content: "";
  display: block;
  width: min(11rem, 42%);
  height: 1px;
  margin-top: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(90deg, var(--accent), rgba(14, 154, 166, 0));
}
@media (min-width: 900px) {
  /* A touch less left-heavy than the shared 1.25fr default, so the growth
     composition has room to read as a real visual rather than a sliver. */
  .hero .split--wide-left { grid-template-columns: 1.12fr 1fr; }
}
.hero-visual,
.phero .hero-visual { filter: drop-shadow(0 18px 30px rgba(6, 63, 70, 0.06)); }
.viz,
.case-visual,
.plan,
.path-card,
.featured-article,
.logo-strip { border-radius: var(--r-md); }
.viz,
.case-visual,
.plan,
.path-card { box-shadow: none; }
.viz { border-color: rgba(15, 23, 42, 0.12); }
.viz::before { opacity: 0.7; }

/* Deep colour sections now have enough contrast to function as visual chapter
   changes, while the accent remains reserved for actions and small markers. */
.sect--accent,
.sect--line-top.sect--accent,
.ai-band.sect--accent { background: var(--grad-brand); }
.sect--accent::after {
  content: "";
  position: absolute;
  width: min(42vw, 40rem);
  aspect-ratio: 1;
  right: -14%; bottom: -58%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.sect--accent > .wrap { position: relative; z-index: 1; }
.sect--accent .muted,
.sect--accent .dim,
.sect--accent .t-lead,
.sect--accent .chapter__problem,
.sect--accent .chapter__list a,
.sect--accent .chapter__list-item,
.sect--accent .ai-fact p { color: rgba(255, 255, 255, 0.78); }
.sect--accent .chapter__list a,
.sect--accent .chapter__list-item,
.sect--accent .ai-facts,
.sect--accent .ai-fact { border-color: rgba(255, 255, 255, 0.2); }
.sect--accent .chapter__list a:hover { color: #fff; }
.sect--accent .chapter__outcome,
.sect--accent .ai-fact .mono-tag { color: #b8fff1; }

/* Keep information surfaces flat and typographic. */
.path-card,
.plan,
.principle,
.values__item,
.featured-article,
.case-visual { border-radius: 0; }
.path-card,
.plan,
.featured-article { box-shadow: none; }
.plan--hot { box-shadow: inset 0 3px 0 var(--accent); }
.plan:hover { box-shadow: inset 0 3px 0 var(--accent); transform: translateY(-4px); }
.plan__flag { border-radius: 0; }
.logo-strip { box-shadow: none; border-radius: 0; }
.case-visual { border-width: 1px; }
.case-visual::after { background-size: 36px 36px; }
.case-row { transition: padding-left 0.45s var(--ease), background 0.45s var(--ease); }
.case-row:hover { padding-left: clamp(0.5rem, 1.3vw, 1.2rem); background: rgba(14, 154, 166, 0.035); }

/* Make section boundaries feel composed instead of like repeated blocks. */
.sect--tint { position: relative; }
.sect--tint::after {
  content: "";
  position: absolute;
  width: clamp(6rem, 16vw, 14rem);
  height: 1px;
  top: 0; left: var(--gutter);
  background: var(--accent);
}
.chapter__index { font-size: clamp(5rem, 12vw, 10rem); letter-spacing: -0.09em; }
.chapter { overflow: hidden; }
.process__step:hover { background: linear-gradient(135deg, rgba(14, 154, 166, 0.075), transparent 70%); }
.ledger__toggle,
.quotes__arrow { border-radius: 2px; }

/* The footer remains compact: its decorative type is contained and is never a
   layout participant. */
.footer {
  background:
    radial-gradient(48rem 24rem at 100% 0%, rgba(14, 154, 166, 0.24), transparent 58%),
    linear-gradient(120deg, #081b25, #082f36 64%, #075952);
}
.footer__grid { padding-block: clamp(3rem, 5vw, 4.5rem) clamp(1.7rem, 3vw, 2.5rem); }
.footer__watermark { bottom: -0.17em; }

@media (max-width: 899px) {
  body { background-image: none; }
  .hero::after,
  .phero::after { width: 16rem; right: -8rem; top: 5rem; opacity: 0.35; }
  .hero .split > :first-child::after,
  .phero .split > :first-child::after { margin-top: 1.6rem; }
  .case-row:hover { padding-left: 0.35rem; }
  .sect--accent::after { width: 19rem; right: -45%; bottom: -25%; }
}

@media (max-width: 699px) {
  :root { --sect: clamp(4rem, 18vw, 5.5rem); }
  .btn { width: auto; min-height: 2.9rem; }
  .hero__actions .btn { flex: 1 1 auto; }
  .phero { padding-top: calc(var(--header-h) + 3rem); }
  .hero-visual__inner { animation: none; }
  .hero__glow { animation: none; }
  .viz__chip { animation: none; }
  .hero-graphic__glow,
  .hero-graphic__tag,
  .hero-graphic__tag .pulse,
  .hero-graphic__panel-label::before { animation: none; }
  .sect--tint::after { width: 5rem; }
}

/* ==========================================================================
   OUR WORK — featured project + "request more work"
   One real project presented as an editorial case study (large live-site visual,
   overlapping text panel, minimal metadata), followed by an on-request route to
   further examples. Shared by the portfolio page and the homepage work section.
   ========================================================================== */

/* Portfolio hero: two-line index of what's on the page */
.work-hero__aside { align-self: end; display: grid; gap: 1rem; }
.work-hero__label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.work-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.work-index a {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline;
  gap: 1.1rem; padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  transition: padding-left 0.45s var(--ease), background 0.45s var(--ease);
}
.work-index a:hover { padding-left: 0.6rem; background: rgba(14, 154, 166, 0.035); }
.work-index__num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; color: #087078; }
.work-index__name { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: var(--fw-medium); letter-spacing: -0.02em; }
.work-index__cat { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.work-index svg { align-self: center; color: var(--ink-3); transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.work-index a:hover svg { transform: translateY(3px); color: var(--accent); }

/* Featured project */
.feature-work { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 2.4rem); }
.feature-work__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 0.6rem 2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.feature-work__head strong { color: #087078; font-weight: var(--fw-semibold); }

.feature-work__visual { position: relative; display: block; color: inherit; isolation: isolate; }
.feature-work__visual:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
/* Theme-colour tint block offset behind the frame */
.feature-work__visual::before {
  content: "";
  position: absolute; z-index: -1;
  inset: 16% -2.5% -6% 24%;
  background: linear-gradient(150deg, rgba(14, 154, 166, 0.16), rgba(5, 168, 140, 0.05) 75%);
  transition: transform 0.9s var(--ease);
}
.feature-work__frame {
  background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 40px 90px -52px rgba(6, 63, 70, 0.5);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.feature-work__bar {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
}
.feature-work__dots { display: flex; gap: 0.35rem; }
.feature-work__dots span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(15, 23, 42, 0.14); }
.feature-work__url {
  flex: 1; min-width: 0; max-width: 22rem; margin-inline: auto;
  padding: 0.32rem 0.8rem;
  background: var(--bg-2);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feature-work__bar svg { transition: transform 0.4s var(--ease), color 0.4s var(--ease); }
/* The screen matches the screenshot's exact ratio, so the whole page is shown uncropped.
   Scroll parallax moves the entire frame (.feature-work__float), never the image inside it. */
.feature-work__screen { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #2a2723; }
.feature-work__screen img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.feature-work__badge {
  position: absolute; z-index: 2;
  right: clamp(0.9rem, 2.4vw, 1.8rem); bottom: clamp(0.9rem, 2.4vw, 1.8rem);
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.05rem;
  background: #fff; color: var(--ink);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 12px 30px -12px rgba(6, 63, 70, 0.45);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.feature-work__badge svg { color: var(--accent); }
.feature-work__visual:hover .feature-work__frame,
.feature-work__visual:focus-visible .feature-work__frame {
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 50px 100px -48px rgba(6, 63, 70, 0.55);
}
.feature-work__visual:hover::before { transform: translate(10px, 8px); }
.feature-work__visual:hover .feature-work__bar svg { transform: translate(2px, -2px); color: var(--accent); }
.feature-work__visual:hover .feature-work__badge,
.feature-work__visual:focus-visible .feature-work__badge { opacity: 1; transform: none; }
@media (hover: none) { .feature-work__badge { opacity: 1; transform: none; } }

.feature-work__side { display: none; }

.feature-work__body { position: relative; z-index: 3; display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.feature-work__title {
  font-size: clamp(2.5rem, 5.4vw, 5rem);
  font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 0.98;
}
.feature-work__alt {
  margin-top: -0.3rem;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.2;
  color: var(--accent-deep);
}
.feature-work__desc { color: var(--ink-2); max-width: 34em; }
.feature-work__meta {
  justify-self: stretch;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem 1.5rem;
  margin-top: 0.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.feature-work__meta div { display: grid; gap: 0.3rem; align-content: start; }
.feature-work__meta dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.feature-work__meta dd { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ink); }
.feature-work__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin-top: 0.8rem; }
.feature-work__note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-3); }

.feature-work__aside { display: grid; gap: 1rem; align-content: start; }
.feature-work__aside-label {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.feature-work__features { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.feature-work__features li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink-2);
}
.feature-work__features span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: #087078; }

@media (min-width: 900px) {
  .feature-work {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: 0;
  }
  .feature-work__head { grid-column: 1 / -1; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .feature-work__visual { grid-column: 1 / 12; grid-row: 2; }
  .feature-work__side {
    display: block; grid-column: 12 / 13; grid-row: 2;
    justify-self: end; align-self: start;
    writing-mode: vertical-rl;
    padding-top: 3.2rem;
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--ink-3);
  }
  /* Asymmetric panel: hangs off the visual's bottom-right edge without covering any
     of the screenshot, so the whole live page stays visible */
  .feature-work__body {
    grid-column: 6 / 13; grid-row: 3;
    margin-top: 0;
    padding: clamp(2rem, 3.4vw, 3.2rem);
    background: #fff;
    box-shadow: inset 0 3px 0 var(--accent), 0 30px 70px -50px rgba(6, 63, 70, 0.35);
  }
  .feature-work__aside { grid-column: 1 / 5; grid-row: 3; padding-top: clamp(2.4rem, 4vw, 3.6rem); }
}
@media (min-width: 1200px) {
  .feature-work__body { grid-column: 7 / 13; }
}

/* "Want to see more?" strip (homepage) */
.more-work-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line-strong);
}
.more-work-strip__title { font-size: var(--fs-heading); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.2; }
.more-work-strip__title .serif { color: var(--accent-deep); }

/* "Want to see more of our work?" section (portfolio) */
.more-work__grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .more-work__grid { grid-template-columns: 1.3fr 1fr; align-items: end; column-gap: clamp(3rem, 7vw, 7rem); }
}
.more-work__title {
  margin-top: 1.2rem;
  font-size: var(--fs-display); font-weight: var(--fw-bold);
  letter-spacing: -0.035em; line-height: 1; max-width: 10em;
}
.more-work__title .serif { color: var(--accent-deep); }
.more-work__copy { display: grid; gap: 1.5rem; justify-items: start; }
.more-work__copy p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 24em; }
.more-work__hint { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.more-work__cta[aria-expanded="true"] .arr { transform: rotate(90deg); }

/* Request-more-work panel. Without JS it is simply open; main.js adds
   .is-collapsible and expands it from the CTA (visibility keeps the collapsed
   form out of the tab order). */
.request-panel { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.request-panel.is-collapsible {
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height 0.8s var(--ease), visibility 0s linear 0.8s;
}
.request-panel.is-collapsible.is-open {
  visibility: visible;
  transition: max-height 0.8s var(--ease), visibility 0s linear 0s;
}
.request-panel__inner {
  position: relative;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-strong);
}
.request-panel__inner::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: clamp(5rem, 12vw, 10rem); height: 1px;
  background: var(--accent);
}
@media (min-width: 900px) {
  .request-panel__inner { grid-template-columns: 1fr 1.6fr; column-gap: clamp(3rem, 7vw, 7rem); }
}
.request-panel__intro { display: grid; gap: 1.1rem; align-content: start; }
.request-panel__intro h3 { font-size: var(--fs-heading); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.2; }
.request-steps { list-style: none; margin: 0.8rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.request-steps li {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.6rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink-2);
}
.request-steps span { padding-top: 0.2rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; color: #087078; }

@media (prefers-reduced-motion: reduce) {
  .request-panel.is-collapsible,
  .feature-work__frame,
  .feature-work__visual::before { transition: none; }
}

/* ==========================================================================
   MOTION VISUALS — content-specific, animated illustrations
   Every [data-mv] visual renders as a complete, static composition by default;
   that is exactly what reduced-motion and no-JS visitors see. When motion is
   allowed, main.js adds html.mv-on and, per visual:
     .is-seen     once, on first view   → plays the one-off entrance sequence
     .is-playing  only while on screen  → runs ambient loops (paused off-screen)
   Shared vocabulary, so every visual moves the same way:
     .mv-in      fade + rise entrance            (stagger with --i)
     .mv-grow    horizontal build-in             (stagger with --i)
     .mv-draw    SVG stroke draws in             (element needs pathLength="1")
     .mv-travel  a signal dot running along a path (needs pathLength="100")
     .mv-lite    a secondary loop, dropped on small screens
   Rhythm: entrances ~1s, signals 3–5s, ambient drift 6–9s, one easing curve.
   Parallax depth comes from data-parallax on separate layers (background
   slowest, foreground fastest) — never on an element that also animates transform.
   ========================================================================== */
:root {
  --mv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mv-in: 1.1s;
  --mv-stagger: 0.14s;
}

@keyframes mvRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mvPop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes mvGrowX { from { transform: scaleX(0); } to { transform: none; } }
@keyframes mvDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mvTravel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes mvRun { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes mvBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes mvDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mvPing { 0% { transform: scale(0.7); opacity: 0.75; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes mvGlint { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes mvWipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes mvStrike { from { transform: scaleX(0); } to { transform: none; } }

.mv-grow { transform-origin: left center; }
.mv-on [data-mv]:not(.is-seen) .mv-in { opacity: 0; }
.mv-on [data-mv]:not(.is-seen) .mv-grow { transform: scaleX(0); }
.mv-on [data-mv]:not(.is-seen) .mv-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-mv].is-seen .mv-in { animation: mvRise var(--mv-in) var(--mv-ease) calc(var(--i, 0) * var(--mv-stagger)) both; }
[data-mv].is-seen .mv-grow { animation: mvGrowX 0.9s var(--mv-ease) calc(var(--i, 0) * var(--mv-stagger)) both; }
[data-mv].is-seen .mv-draw { stroke-dasharray: 1; animation: mvDraw 1.6s var(--mv-ease) calc(0.15s + var(--i, 0) * var(--mv-stagger)) both; }
.mv-travel { fill: none; stroke-dasharray: 0.1 99.9; stroke-linecap: round; opacity: 0; }
[data-mv].is-playing .mv-travel { opacity: 1; animation: mvTravel var(--dur, 4.8s) linear var(--delay, 0s) infinite; }

/* ---- Home hero · one growth pathway: strategy → website → visibility → enquiry ---- */
.gpath { display: block; width: 100%; height: auto; overflow: visible; }
.gpath__grid line { stroke: rgba(15, 23, 42, 0.06); }
.gpath__base { stroke: rgba(14, 154, 166, 0.1); stroke-width: 12; stroke-linecap: round; }
.gpath__line { stroke-width: 2.5; stroke-linecap: round; }
.gpath__travel { stroke: #05A88C; stroke-width: 9; }
.gpath__node { transform-box: fill-box; transform-origin: center; }
.gpath__node circle { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.gpath__node--end circle { fill: var(--accent-2); stroke: #fff; stroke-width: 2.5; }
.gpath__halo { fill: rgba(5, 168, 140, 0.22); transform-box: fill-box; transform-origin: center; opacity: 0; }
.gpath__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-3); }
.gpath__label--end { fill: #087078; font-weight: var(--fw-semibold); }
.mv-on [data-mv]:not(.is-seen) .gpath__node { opacity: 0; }
[data-mv].is-seen .gpath__node { animation: mvPop 0.6s var(--mv-ease) calc(0.6s + var(--i, 0) * 0.32s) both; }
[data-mv].is-playing .gpath__halo { animation: gpHalo 4.8s ease-out var(--d, 0s) infinite; }
@keyframes gpHalo { 0% { opacity: 0.9; transform: scale(0.5); } 28%, 100% { opacity: 0; transform: scale(2.2); } }
@media (max-width: 699px) { .gpath__label { font-size: 14px; } }

/* ---- Home · Build · a page assembling itself, its brand kit, and the same page on a phone ---- */
.build-viz { position: relative; padding: 0 clamp(1.6rem, 6vw, 3.8rem) clamp(2.4rem, 5vw, 3.2rem) 0; }
.build-viz__back { position: absolute; inset: 14% 0 0 20%; background: linear-gradient(150deg, rgba(14, 154, 166, 0.14), rgba(5, 168, 140, 0.04) 75%); }
.build-viz__page { display: grid; gap: 1.1rem; }
.build-viz__nav { display: flex; align-items: center; gap: 0.7rem; }
.build-viz__nav .sk { display: block; width: 44px; height: 7px; }
.build-viz__logo { width: 22px; height: 22px; border-radius: 6px; background: var(--grad-accent); flex: none; }
.build-viz__navcta { margin-left: auto; width: 64px; height: 20px; border-radius: 99px; border: 1px solid rgba(14, 154, 166, 0.45); }
.build-viz__hero { display: grid; gap: 0.65rem; padding-top: 0.4rem; }
.build-viz__cta {
  position: relative; justify-self: start; margin-top: 0.45rem;
  padding: 0.5rem 1rem; border-radius: 99px;
  background: var(--grad-accent); color: #fff;
  font-size: 0.72rem; font-weight: var(--fw-semibold);
}
.build-viz__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent-2); opacity: 0; }
.build-viz__cursor { position: absolute; left: 72%; top: 58%; width: 16px; height: 16px; color: var(--ink); opacity: 0; pointer-events: none; }
.build-viz__kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.build-viz__tile { display: grid; gap: 0.5rem; align-content: space-between; min-height: 84px; padding: 0.8rem 0.9rem; background: #fff; border: 1px solid var(--line); }
.build-viz__tile em { font-style: normal; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.build-viz__type { font-family: var(--serif); font-style: italic; font-size: 1.9rem; line-height: 1; color: var(--ink); }
.build-viz__swatches { display: flex; gap: 0.3rem; }
.build-viz__swatches i { width: 18px; height: 18px; border-radius: 50%; }
.build-viz__swatches i:nth-child(1) { background: #07585e; }
.build-viz__swatches i:nth-child(2) { background: #0E9AA6; }
.build-viz__swatches i:nth-child(3) { background: #9fe3da; }
.build-viz__grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 10px 10px; gap: 3px; width: 44px; }
.build-viz__grid i { background: rgba(14, 154, 166, 0.22); }
.build-viz__grid i:nth-child(1) { grid-row: span 2; background: rgba(14, 154, 166, 0.45); }
.build-viz__phone { position: absolute; right: 0; bottom: 0; z-index: 4; width: clamp(92px, 26%, 132px); }
.build-viz__phone-inner {
  display: grid; align-content: start; gap: 0.45rem;
  aspect-ratio: 9 / 18; padding: 0.8rem 0.6rem;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 24px 50px -24px rgba(6, 63, 70, 0.45);
}
.build-viz__phone-inner .sk { display: block; height: 6px; }
.build-viz__phone-inner .sk--lg { height: 9px; }
.build-viz__notch { justify-self: center; width: 34%; height: 5px; margin-bottom: 0.3rem; border-radius: 99px; background: var(--line-strong); }
.build-viz__phone-cta { display: block; height: 16px; margin-top: 0.3rem; border-radius: 99px; background: var(--grad-accent); }
.build-viz__phone-block { display: block; aspect-ratio: 4 / 3; margin-top: 0.3rem; background: linear-gradient(150deg, rgba(14, 154, 166, 0.2), rgba(5, 168, 140, 0.06)); }
[data-mv].is-playing .build-viz__cursor { animation: bvCursor 6s var(--mv-ease) 1.8s infinite; }
[data-mv].is-playing .build-viz__cta::after { animation: bvClick 6s ease-out 1.8s infinite; }
@keyframes bvCursor {
  0% { opacity: 0; transform: translate(70px, 46px); }
  12% { opacity: 1; }
  38% { opacity: 1; transform: translate(0, 0); }
  44% { transform: translate(0, 0) scale(0.84); }
  50% { transform: translate(0, 0) scale(1); }
  72% { opacity: 1; transform: translate(0, 0); }
  86%, 100% { opacity: 0; transform: translate(10px, 8px); }
}
@keyframes bvClick { 0%, 42% { opacity: 0; transform: scale(1); } 45% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
@media (max-width: 699px) { .build-viz__cursor { display: none; } .build-viz { padding-right: 2.4rem; } }

/* ---- Home · Grow · a search where your listing rises to where decisions start ---- */
.serp-viz__typed { display: inline-block; white-space: nowrap; }
.serp-viz__caret { display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); opacity: 0; }
/* Fixed row heights so the rise can be expressed as exact offsets:
   end state  you 0 · a 112 · b 188   —   start state  a 0 · b 76 · you 152 */
.serp-viz__results { position: relative; height: 252px; }
.serp-viz__row { position: absolute; left: 0; right: 0; align-content: start; overflow: hidden; }
.serp-viz__row--you { top: 0; height: 100px; z-index: 2; }
.serp-viz__row--a { top: 112px; height: 64px; }
.serp-viz__row--b { top: 188px; height: 64px; }
.serp-viz__row--you .serp__title { white-space: nowrap; }
.mv-on [data-mv]:not(.is-seen) .serp-viz__typed { clip-path: inset(0 100% 0 0); }
.mv-on [data-mv]:not(.is-seen) .serp-viz__row--you { transform: translateY(152px); }
.mv-on [data-mv]:not(.is-seen) .serp-viz__row--a,
.mv-on [data-mv]:not(.is-seen) .serp-viz__row--b { transform: translateY(-112px); }
[data-mv].is-seen .serp-viz__typed { animation: svType 1.3s steps(24, end) 0.2s both; }
[data-mv].is-seen .serp-viz__row--you { animation: svRiseYou 1.4s var(--mv-ease) 1.7s both; }
[data-mv].is-seen .serp-viz__row--a,
[data-mv].is-seen .serp-viz__row--b { animation: svDrop 1.4s var(--mv-ease) 1.7s both; }
[data-mv].is-playing .serp-viz__caret { animation: svCaret 1.1s steps(1) infinite; }
@keyframes svType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes svRiseYou { from { transform: translateY(152px); } to { transform: none; } }
@keyframes svDrop { from { transform: translateY(-112px); } to { transform: none; } }
@keyframes svCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---- Home · Engage · a planned week of content and the video going out ---- */
.engage-viz .viz__body { display: grid; gap: 1rem; }
.engage-viz__cal { padding: 0.9rem 1rem 1rem; background: #fff; border: 1px solid var(--line); }
.engage-viz__cal-head { display: flex; justify-content: space-between; margin-bottom: 0.8rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.engage-viz__week { position: relative; }
.engage-viz__days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.engage-viz__days li { display: grid; justify-items: center; gap: 0.45rem; }
.engage-viz__days em { font-style: normal; font-family: var(--mono); font-size: 0.56rem; color: var(--ink-3); }
.engage-viz__slot { position: relative; display: block; width: 100%; aspect-ratio: 1; border: 1px dashed var(--line-strong); }
.engage-viz__slot.is-post { border: 0; background: linear-gradient(150deg, rgba(14, 154, 166, 0.6), rgba(5, 168, 140, 0.35)); }
.engage-viz__slot.is-video { border: 0; background: #07585e; }
.engage-viz__slot.is-video::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -2px; border-left: 7px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.engage-viz__slot.is-story { border: 0; border-radius: 50%; background: rgba(14, 154, 166, 0.2); }
.engage-viz__today { position: absolute; left: 0; top: -0.25rem; bottom: -0.25rem; width: calc((100% - 2.1rem) / 7); border: 1px solid var(--accent); opacity: 0; pointer-events: none; }
.engage-viz__post .feed__head { padding: 0.7rem 0.9rem; }
.engage-viz__media { position: relative; aspect-ratio: 16 / 7.5; overflow: hidden; background: #0b4b52; }
.engage-viz__media::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 50% at 30% 40%, rgba(31, 194, 206, 0.55), transparent 70%),
    radial-gradient(35% 45% at 75% 70%, rgba(5, 228, 188, 0.4), transparent 70%);
}
.engage-viz__frame { position: absolute; inset: 16% 12%; }
.engage-viz__frame i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(255, 255, 255, 0.75); }
.engage-viz__frame i:nth-child(1) { left: 0; top: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.engage-viz__frame i:nth-child(2) { right: 0; top: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.engage-viz__frame i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.engage-viz__frame i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.engage-viz__play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.85); }
.engage-viz__play::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -3px; border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.engage-viz__play::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); opacity: 0; }
.engage-viz__rec { position: absolute; left: 0.8rem; top: 0.7rem; display: flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.16em; color: #fff; }
.engage-viz__rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5ff0d8; }
.engage-viz__actions { display: flex; gap: 0.9rem; padding: 0.65rem 0.9rem; color: var(--ink-2); }
.engage-viz__actions svg { width: 15px; height: 15px; }
.engage-viz__actions .is-save { margin-left: auto; }
[data-mv].is-playing .engage-viz__today { opacity: 1; animation: evToday 10.5s steps(7, end) 1.2s infinite; }
[data-mv].is-playing .engage-viz__media::before { animation: evPan 9s ease-in-out infinite alternate; }
[data-mv].is-playing .engage-viz__play::after { animation: mvPing 3.2s ease-out infinite; }
[data-mv].is-playing .engage-viz__rec::before { animation: mvGlint 1.6s ease-in-out infinite; }
[data-mv].is-playing .engage-viz__actions .is-save path { animation: evSave 5s ease-in-out 2s infinite; }
@keyframes evToday { from { transform: translateX(0); } to { transform: translateX(calc(700% + 2.45rem)); } }
@keyframes evPan { from { transform: translate3d(-4%, -2%, 0); } to { transform: translate3d(4%, 3%, 0) scale(1.06); } }
@keyframes evSave { 0%, 40% { fill: transparent; } 50%, 90% { fill: #087078; } 100% { fill: transparent; } }

/* ---- Featured project · the screenshot is uncovered once, editorially, then left alone ---- */
.feature-work__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(120deg, #063e45, #087b6e);
  transform: scaleX(0); transform-origin: right center;
}
.mv-on [data-mv]:not(.is-seen) .feature-work__screen::after { transform: scaleX(1); }
[data-mv].is-seen .feature-work__screen::after { animation: mvWipe 1.2s var(--mv-ease) 0.25s both; }

/* ---- Services hero · three outcomes overlapping into one plan ---- */
.outcome-viz { position: relative; max-width: 420px; aspect-ratio: 36 / 34; margin-block: 1.2rem; }
.outcome-viz__field { position: absolute; inset: 8% 4% 4% 8%; background: radial-gradient(closest-side, rgba(14, 154, 166, 0.14), transparent 75%); }
.outcome-viz__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.outcome-viz__breathe { transform-box: fill-box; transform-origin: center; }
.outcome-viz__ring { stroke: rgba(7, 88, 94, 0.5); stroke-width: 1.2; }
.outcome-viz__ring--build { fill: rgba(14, 154, 166, 0.07); }
.outcome-viz__ring--grow { fill: rgba(5, 168, 140, 0.07); }
.outcome-viz__ring--engage { fill: rgba(7, 88, 94, 0.05); }
.outcome-viz__core { fill: #05A88C; }
.outcome-viz__halo { fill: rgba(5, 168, 140, 0.28); transform-box: fill-box; transform-origin: center; opacity: 0; }
.outcome-viz__labels { position: absolute; inset: 0; }
.outcome-viz__label { position: absolute; }
.outcome-viz__label > span { display: grid; gap: 0.15rem; }
.outcome-viz__label b { font-family: var(--mono); font-size: 0.62rem; font-weight: var(--fw-medium); letter-spacing: 0.16em; text-transform: uppercase; color: #087078; }
.outcome-viz__label em { font-style: normal; font-size: 0.88rem; font-weight: var(--fw-medium); color: var(--ink); }
.outcome-viz__label--build { left: 50%; top: -5%; transform: translateX(-50%); text-align: center; }
.outcome-viz__label--grow { left: -2%; bottom: -5%; }
.outcome-viz__label--engage { right: -2%; bottom: -5%; text-align: right; }
.outcome-viz__center { position: absolute; left: 50%; top: calc(55.9% + 1.4rem); transform: translateX(-50%); }
.outcome-viz__center > span { display: block; padding: 0.3rem 0.65rem; background: #fff; border: 1px solid rgba(14, 154, 166, 0.35); font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: #087078; white-space: nowrap; }
[data-mv].is-playing .outcome-viz__breathe { animation: mvBreathe 8s ease-in-out calc(var(--i, 0) * -2.7s) infinite; }
[data-mv].is-playing .outcome-viz__halo { animation: mvPing 3.4s ease-out 1.2s infinite; }

/* ---- Services · AI · where AI speeds things up, and where people decide ---- */
.ai-flow { position: relative; margin-top: clamp(2.5rem, 6vw, 4rem); }
.ai-flow__track { position: absolute; left: 12.5%; right: 12.5%; top: 1.25rem; height: 1px; overflow: hidden; background: var(--line-strong); }
.ai-flow__runner { position: absolute; inset: 0; transform: translateX(-100%); }
.ai-flow__runner::after { content: ""; position: absolute; right: 0; top: 0; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-2)); }
.ai-flow__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ai-flow__steps li { display: grid; justify-items: center; gap: 0.55rem; text-align: center; }
.ai-flow__node {
  position: relative; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: #fff; border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 0.62rem; font-weight: var(--fw-semibold); letter-spacing: 0.08em; color: var(--ink-2);
}
.ai-flow__node svg { width: 15px; height: 15px; }
.ai-flow__node--ai { border-color: rgba(14, 154, 166, 0.5); color: #087078; }
.ai-flow__node--human { background: #07585e; border-color: #07585e; color: #fff; }
.ai-flow__node--human::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid #07585e; opacity: 0; }
.ai-flow__steps b { margin-top: 0.2rem; font-size: 0.98rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.ai-flow__steps em { font-style: normal; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
[data-mv].is-playing .ai-flow__runner { animation: mvRun 4.2s cubic-bezier(0.55, 0, 0.35, 1) 1s infinite; }
[data-mv].is-playing .ai-flow__node--human::after { animation: mvPing 4.2s ease-out 3.1s infinite; }
@media (max-width: 699px) {
  .ai-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .ai-flow__track { display: none; }
}

/* ---- Pricing hero · three plan stages, each carrying the one before ---- */
.plan-layers { position: relative; max-width: 440px; padding-block: 0.5rem 2.6rem; }
.plan-layers__path { position: absolute; left: 6%; top: 6%; width: 88%; height: 76%; overflow: visible; }
.plan-layers__path path { fill: none; stroke: rgba(14, 154, 166, 0.45); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.plan-layers__stack { position: relative; display: grid; gap: 0.75rem; }
.plan-layers__layer { position: relative; display: grid; gap: 0.2rem; padding: 0.95rem 1.2rem 1rem 1.35rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(6, 63, 70, 0.4); }
.plan-layers__layer::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--accent); transform: scaleY(0.3); transform-origin: bottom; opacity: 0.4; }
.plan-layers__layer--1 { margin-right: 26%; }
.plan-layers__layer--2 { margin-inline: 13%; }
.plan-layers__layer--3 { margin-left: 26%; border-color: rgba(14, 154, 166, 0.3); }
.plan-layers__stage { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.plan-layers__layer b { font-size: 1.2rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--ink); }
.plan-layers__layer em { font-style: normal; font-size: 0.78rem; line-height: 1.35; color: var(--ink-3); }
.plan-layers__note { position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: #087078; }
[data-mv].is-playing .plan-layers__layer::before { animation: plStage 7.5s var(--mv-ease) calc(1.2s + var(--s, 0) * 2.5s) infinite; }
@keyframes plStage { 0% { transform: scaleY(0.3); opacity: 0.4; } 10%, 30% { transform: scaleY(1); opacity: 1; } 42%, 100% { transform: scaleY(0.3); opacity: 0.4; } }
@media (max-width: 699px) {
  .plan-layers__layer--1 { margin-right: 14%; }
  .plan-layers__layer--2 { margin-inline: 7%; }
  .plan-layers__layer--3 { margin-left: 14%; }
}

/* ---- About hero · tangled jargon pulled into one plain line ---- */
.untangle { position: relative; max-width: 440px; aspect-ratio: 36 / 26; }
.untangle__field { position: absolute; inset: 10% 0 0 16%; background: radial-gradient(closest-side, rgba(14, 154, 166, 0.14), transparent 75%); }
.untangle__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.untangle__knot { fill: none; stroke: rgba(15, 23, 42, 0.26); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.untangle__start { fill: #fff; stroke: rgba(15, 23, 42, 0.35); stroke-width: 1.4; }
.untangle__line { fill: none; stroke-width: 3; stroke-linecap: round; }
.untangle__travel { stroke: #05A88C; stroke-width: 9; }
.untangle__end { fill: var(--accent-2); }
.untangle__tag { position: absolute; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }
.untangle__tag--a { left: 2%; top: 8%; color: var(--ink-3); }
.untangle__tag--a s { text-decoration-thickness: 1px; text-decoration-color: var(--accent); }
.untangle__tag--b { right: 0; top: calc(57.7% + 1.1rem); color: #087078; font-weight: var(--fw-semibold); }
.mv-on [data-mv]:not(.is-seen) .untangle__knot { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-mv].is-seen .untangle__knot { stroke-dasharray: 1; animation: mvDraw 2.2s ease-in-out 0.1s both; }
[data-mv].is-playing .untangle__drift { animation: mvDrift 7s ease-in-out 2.4s infinite; }

/* ---- About · process · the four steps connected as one path ---- */
.process { position: relative; }
.process__rail { display: none; }
@media (min-width: 900px) {
  .process__rail { display: block; position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; pointer-events: none; }
  .process__rail-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left center; }
  .process__rail-run { position: absolute; inset: 0; transform: translateX(-100%); }
  .process__rail-run::after { content: ""; position: absolute; right: 0; top: 0; width: 14%; height: 2px; background: linear-gradient(90deg, transparent, #fff); }
  .mv-on [data-mv].process:not(.is-seen) .process__rail-fill { transform: scaleX(0); }
  [data-mv].process.is-seen .process__rail-fill { animation: mvGrowX 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both; }
  [data-mv].process.is-playing .process__rail-run { animation: mvRun 5.5s cubic-bezier(0.55, 0, 0.35, 1) 3s infinite; }
}
[data-mv].process.is-seen .process__step .icon-circle { animation: prStep 0.9s var(--mv-ease) 0.3s both; }
[data-mv].process.is-seen .process__step:nth-child(2) .icon-circle { animation-delay: 0.9s; }
[data-mv].process.is-seen .process__step:nth-child(3) .icon-circle { animation-delay: 1.5s; }
[data-mv].process.is-seen .process__step:nth-child(4) .icon-circle { animation-delay: 2.1s; }
@keyframes prStep { 0% { transform: scale(0.85); } 50% { transform: scale(1.1); border-color: var(--accent); background-color: rgba(14, 154, 166, 0.14); } 100% { transform: none; } }

/* ---- Insights hero · jargon struck out, plain words written in ---- */
.plain-words { position: relative; max-width: 440px; padding: 1.4rem 0 2rem 1.4rem; }
.plain-words__field { position: absolute; inset: 0 14% 16% 0; background: linear-gradient(150deg, rgba(14, 154, 166, 0.14), rgba(5, 168, 140, 0.04) 75%); }
.plain-words__layer { position: relative; }
.plain-words__sheet { padding: 1.4rem 1.5rem 1.1rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(6, 63, 70, 0.45); }
.plain-words__kicker { display: block; margin-bottom: 0.7rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.plain-words__line { display: grid; gap: 0.15rem; justify-items: start; padding-block: 0.75rem; border-top: 1px solid var(--line); }
.plain-words__was { position: relative; font-size: 0.85rem; color: var(--ink-3); }
.plain-words__was::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 1.5px; background: var(--accent); transform-origin: left center; }
.plain-words__now { font-family: var(--serif); font-style: italic; font-size: 1.45rem; line-height: 1.15; color: var(--ink); }
.mv-on [data-mv]:not(.is-seen) .plain-words__was::after { transform: scaleX(0); }
.mv-on [data-mv]:not(.is-seen) .plain-words__now { opacity: 0; }
[data-mv].is-seen .plain-words__was::after { animation: mvStrike 0.6s var(--mv-ease) calc(0.5s + var(--i, 0) * 0.9s) both; }
[data-mv].is-seen .plain-words__now { animation: mvRise 0.8s var(--mv-ease) calc(0.95s + var(--i, 0) * 0.9s) both; }
[data-mv].is-playing .plain-words__sheet { animation: mvDrift 8s ease-in-out 3.5s infinite; }

/* ---- Insights featured guide · a page annotated with the five points it covers ---- */
.anatomy { position: relative; width: min(78%, 360px); margin-block: 2rem 3.4rem; }
.anatomy__page { position: relative; display: grid; gap: 0.8rem; padding: 1rem 1.1rem 1.2rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(6, 63, 70, 0.45); }
.anatomy .sk { display: block; }
.anatomy__bar { display: flex; gap: 0.35rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.anatomy__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.anatomy__hero { display: grid; gap: 0.5rem; padding-block: 0.3rem; }
.anatomy__hero .sk--lg { width: 70%; }
.anatomy__hero .sk:not(.sk--lg) { width: 88%; }
.anatomy__btn { display: block; width: 38%; height: 18px; margin-top: 0.2rem; border-radius: 99px; background: var(--grad-accent); }
.anatomy__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.anatomy__cols i { aspect-ratio: 4 / 3; background: var(--bg-2); border: 1px solid var(--line); }
.anatomy__foot .sk { width: 50%; }
.anatomy__pin {
  position: absolute; display: grid; place-items: center;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: #07585e; color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
  font-family: var(--mono); font-size: 0.62rem; font-weight: var(--fw-semibold);
}
.anatomy__pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #0E9AA6; opacity: 0; }
.mv-on [data-mv]:not(.is-seen) .anatomy__pin { opacity: 0; }
[data-mv].is-seen .anatomy__pin { animation: mvPop 0.55s var(--mv-ease) calc(1.2s + var(--i, 0) * 0.28s) both; }
[data-mv].is-playing .anatomy__pin::after { animation: mvPing 5s ease-out calc(2.8s + var(--i, 0) * 1s) infinite; }

/* ---- Contact hero · one team, reachable from three regions ---- */
.channel-map { position: relative; max-width: 440px; aspect-ratio: 36 / 28; }
.channel-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.channel-map__link { stroke: rgba(7, 88, 94, 0.45); stroke-width: 1.3; stroke-linecap: round; }
.channel-map__link--soft { stroke: rgba(7, 88, 94, 0.22); }
.channel-map__travel { stroke: #05A88C; stroke-width: 7; }
.channel-map__travel--soft { stroke: rgba(5, 168, 140, 0.6); }
.channel-map__node { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.channel-map__node--hub { fill: #07585e; stroke: #fff; stroke-width: 3; }
.channel-map__ring { stroke: rgba(14, 154, 166, 0.5); stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0; }
.channel-map__labels { position: absolute; inset: 0; }
.channel-map__label { position: absolute; transform: translate(-50%, 14px); white-space: nowrap; text-align: center; }
.channel-map__label--above { transform: translate(-50%, calc(-100% - 16px)); }
.channel-map__label > span { display: grid; gap: 0.1rem; }
.channel-map__label b { font-size: 0.86rem; font-weight: var(--fw-semibold); color: var(--ink); }
.channel-map__label em { font-style: normal; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.channel-map__chips { position: absolute; right: 0; top: 0; display: grid; gap: 0.45rem; justify-items: end; }
.channel-map__chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgba(6, 63, 70, 0.4); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.channel-map__chip svg { width: 12px; height: 12px; color: #087078; }
[data-mv].is-playing .channel-map__ring { animation: mvPing 3.6s ease-out var(--d, 0s) infinite; }
[data-mv].is-playing .channel-map__chip { animation: mvDrift 6s ease-in-out calc(var(--i, 0) * -2s) infinite; }
@media (max-width: 699px) { .channel-map__chips { display: none; } }

/* Page-hero visuals are built from absolutely positioned layers, so they have no
   intrinsic width — below desktop, .hero-visual's auto side margins would shrink them
   to nothing. Let them fill the (max-width-capped) column instead. */
.outcome-viz,
.untangle,
.channel-map,
.plan-layers,
.plain-words { width: 100%; }

/* The featured guide card is white inside a dark accent section: its heading and
   "coming soon" note must not inherit the section's white text. */
.sect--accent .featured-article__body h2 { color: var(--ink); }
.sect--accent .featured-article__body .dim { color: var(--ink-3); }

/* Small screens keep entrances but drop secondary loops; reduced motion drops everything. */
@media (max-width: 699px) {
  [data-mv].is-playing .mv-lite,
  [data-mv].is-playing .mv-lite::before,
  [data-mv].is-playing .mv-lite::after { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-mv] *,
  [data-mv] *::before,
  [data-mv] *::after { animation: none !important; }
  .mv-travel { opacity: 0 !important; }
}

/* ==========================================================================
   AUDIT REFINEMENTS — accessibility & robustness (final layer)
   Colours here were measured against WCAG 2.1 AA on the site's real backgrounds,
   including the lightest stop of each brand gradient. The bright brand teal stays for
   rules, fills, icons and large display type; small text uses the deep teal.
   ========================================================================== */
:root {
  /* Secondary text, a touch deeper so it passes on the tint wash as well as on white */
  --ink-3: #566372;
  /* White-text fills (primary buttons, active chapter pill, plan flag, chat button):
     this deeper pair keeps at least 4.8:1 across the whole gradient */
  --grad-accent: linear-gradient(100deg, #087078 0%, #07806c 100%);
}
.btn--solid { background: #087078; }
.btn--solid:hover { background: #07585e; }
.btn--line { color: #087078; border-color: #087078; }
.btn--line:hover { background: rgba(8, 112, 120, 0.06); }
.cta-block.sect--accent .btn--accent { color: #07585e; }

/* Accent used as small text */
.process__num,
.art-meta .topic,
.ledger__cell dt,
.path-card__tag,
.serp__badge,
.pain p strong,
.plan__tagline,
.windex__cell--metric,
.story__label .num,
.chapter__outcome { color: #087078; }

/* Dark accent sections: supporting text and labels bright enough to read */
.sect--accent .muted,
.sect--accent .dim,
.sect--accent .t-lead,
.sect--accent .chapter__problem,
.sect--accent .chapter__list a,
.sect--accent .chapter__list-item,
.sect--accent .ai-fact p { color: rgba(255, 255, 255, 0.92); }
.sect--accent .kicker,
.sect--accent .kicker--accent,
.cta-block.sect--accent .kicker--accent { color: rgba(255, 255, 255, 0.94); }
.sect--accent .ledger__num { color: rgba(255, 255, 255, 0.9); }
.sect--accent .windex__cell--metric,
.sect--accent .path-tag { color: #b8fff1; }

/* White cards and mockups inside dark sections keep dark text — the section rule that
   turns h2/h3 white was making card headings (e.g. pricing plan names) invisible. */
.sect--accent .path-card h3,
.sect--accent .plan h3,
.sect--accent .viz { color: var(--ink); }

/* Footer supporting text */
.footer__brand p,
.footer__tag-sub,
.footer__reach-sub { color: rgba(255, 255, 255, 0.72); }
.footer__col h3,
.footer__bottom { color: rgba(255, 255, 255, 0.75); }

/* The decorative grid patch behind interior page heroes hangs past the right edge.
   It is absolutely positioned, so the hero must be its containing block before the
   horizontal clip can contain it — otherwise small screens gain a sideways scroll. */
.phero { position: relative; overflow-x: hidden; overflow-x: clip; }

/* Hero visuals are vertically centred against the hero copy on every page, rather than
   hanging from the top of the column on the interior pages. */
@media (min-width: 900px) {
  .hero .split > .hero-graphic,
  .phero .split > .hero-visual,
  .phero .split > .work-hero__aside { align-self: center; }
}

@media (max-width: 699px) {
  .fab { width: 48px; height: 48px; }
  /* On phones the content visibly continues below the hero — the cue only adds height */
  .scroll-cue { display: none; }
}