/* ==========================================================================
   THE MARKET OFFICE — Research. Strategy. Growth.
   Understand first. Act second.
   --------------------------------------------------------------------------
   00  Variables & tokens
   01  Reset & base
   02  Typography
   03  Layout & grid
   04  Rules, marks & the hand-drawn system
   05  Components
   06  Navigation
   07  Custom cursor
   08  Motion & reveals
   09  Page sections
   10  Responsive
   11  Accessibility, reduced motion & print
   --------------------------------------------------------------------------
   Visual language: 70% editorial · 20% hand-drawn intelligence · 10% movement
   ========================================================================== */


/* ==========================================================================
   00  VARIABLES & TOKENS
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Monochrome only. Near-black ink on warm white / ivory paper.
     Every grey in the system is ink at reduced opacity — never a grey hue. */
  --ink-rgb: 18, 18, 17;
  --ink: rgb(var(--ink-rgb));
  --ink-80: rgba(var(--ink-rgb), 0.80);
  --ink-60: rgba(var(--ink-rgb), 0.60);
  /* 0.60 is the lightest tint that clears WCAG AA (4.75:1) on paper, so it
     is the floor for any text. 0.45 and below are for rules, sketch detail
     and decorative marks only — never for words that must be read. */
  --ink-45: rgba(var(--ink-rgb), 0.45);
  --ink-30: rgba(var(--ink-rgb), 0.30);
  --ink-18: rgba(var(--ink-rgb), 0.18);
  --ink-12: rgba(var(--ink-rgb), 0.12);
  --ink-08: rgba(var(--ink-rgb), 0.08);

  --paper: #FFFFFF;        /* pure white */
  --paper-tone: #FFFFFF;   /* pure white — statement bands */
  --paper-rgb: 255, 255, 255;

  --rule: var(--ink-12);
  --rule-strong: var(--ink-30);

  /* --- Type families -----------------------------------------------------
     Interface / navigation: Google Sans where the system provides it,
     otherwise Inter — the sans named in the visual language document.
     Editorial / body: Castoro. */
  --font-ui: "Google Sans", "Google Sans Text", "Product Sans", "Inter",
             "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-editorial: "Castoro", "Iowan Old Style", "Palatino Linotype",
             Palatino, Georgia, "Times New Roman", serif;
  --font-heading: "Poppins", "Google Sans", "Inter", system-ui, sans-serif;

  /* --- Unified Hero H1 typography (all pages) ----------------------------- */
  --hero-heading-size: clamp(2.6rem, 5.6vw, 6rem);
  --hero-heading-weight: 600;
  --hero-heading-lh: 1.05;
  --hero-heading-tracking: -0.02em;

  /* --- Type scale (fluid, editorial) ------------------------------------ */
  --t-display-1: clamp(3rem, 8.4vw, 9.5rem);
  --t-display-2: clamp(2.35rem, 6.1vw, 6.4rem);
  --t-display-3: clamp(1.95rem, 4.1vw, 4.1rem);
  --t-display-4: clamp(1.6rem, 2.7vw, 2.6rem);
  --t-lead:      clamp(1.16rem, 1.42vw, 1.5rem);
  --t-body:      clamp(1.0625rem, 1.02vw, 1.1875rem);
  --t-small:     clamp(0.9375rem, 0.86vw, 1rem);
  --t-meta:      0.8125rem;
  --t-label:     0.6875rem;

  /* --- Spacing & rhythm ------------------------------------------------- */
  --m-page: clamp(1.375rem, 5.2vw, 7.5rem);   /* page margin */
  --gutter: clamp(1rem, 1.9vw, 2.25rem);      /* grid gutter */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.5rem;
  --s-4: 2.25rem;
  --s-5: 3.25rem;
  --s-6: 4.5rem;
  --s-7: 6.5rem;
  --s-section: clamp(3rem, 6vw, 6rem);
  --s-section-lg: clamp(3.5rem, 7.5vw, 7.5rem);

  --measure: 62ch;         /* controlled reading width */
  --measure-tight: 48ch;

  /* --- Motion -----------------------------------------------------------
     Editorial easing. Transitions stay inside the 400–700ms band the
     visual language specifies for page-level movement. */
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 240ms;
  --d-mid: 480ms;
  --d-slow: 700ms;

  --header-h: clamp(4.5rem, 8.5vw, 8.25rem);
}

/* --- Dark theme -----------------------------------------------------------
   Skiper UI (free license) — centred circular reveal theme toggle.
   Pure token inversion: ink becomes light, paper becomes near-black. The
   derived greys (--ink-60, --rule, ...) follow automatically because they
   reference --ink-rgb. Inverse sections (background: var(--ink)) become light
   islands on the dark page — the same editorial rhythm, inverted. */
:root[data-theme="dark"] {
  --ink-rgb: 236, 235, 231;   /* warm light ink */
  --paper: #141312;           /* near-black paper */
  --paper-tone: #141312;      /* statement bands */
  --paper-rgb: 20, 19, 18;
  color-scheme: dark;
}

[data-theme="dark"] .wordmark-img { filter: invert(1); }

/* Footer shares the same wordmark PNG as the header; invert it in dark theme
   so the black logo becomes a visible light mark on the dark footer. Applies
   globally to every page's footer. */
[data-theme="dark"] .footer-logo-img { filter: invert(1); }


/* ==========================================================================
   01  RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--t-body);
  line-height: 1.72;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Locks scroll while the full-screen menu is open. */
body.is-menu-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
svg { height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

main { display: block; }


/* ==========================================================================
   02  TYPOGRAPHY
   Typography first. Content second. Hand-drawn details third. Interaction
   fourth. Hierarchy is built from size, weight, tracking, measure and
   position — not from colour or decoration.
   ========================================================================== */

/* --- Display: the editorial serif ---------------------------------------- */
.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: var(--font-heading);
  font-weight: 400;
  text-wrap: balance;
}

.display-1 {
  font-size: var(--t-display-1);
  line-height: 0.94;
  letter-spacing: -0.024em;
}

.display-2 {
  font-size: var(--t-display-2);
  line-height: 1.0;
  letter-spacing: -0.019em;
}

.display-3 {
  font-size: var(--t-display-3);
  line-height: 1.08;
  letter-spacing: -0.014em;
}

.display-4 {
  font-size: var(--t-display-4);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Optical correction: very large serif settings need tighter leading and a
   hair of negative tracking to hold together as a block. */
.display-1 > em,
.display-2 > em,
.display-3 > em {
  font-style: italic;
  letter-spacing: -0.005em;
}

/* --- Body ---------------------------------------------------------------- */
.lead,
.lead.body {
  font-size: var(--t-lead);
  line-height: 1.58;
  letter-spacing: -0.005em;
  max-width: var(--measure);
}

.body {
  font-size: var(--t-body);
  line-height: 1.78;
  max-width: var(--measure);
}

.body + .body,
.lead + .lead,
.lead + .body,
.body + .lead { margin-top: 1.35em; }

.body-small {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-80);
  max-width: var(--measure);
}

/* --- Interface type: the sans -------------------------------------------- */
.label,
.meta,
.nav-link,
.menu-toggle,
.field-label,
.diagram text,
.stage-marker {
  font-family: var(--font-ui);
  font-weight: 500;
}

.label {
  display: block;
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.label--ink { color: var(--ink); }

.meta {
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-60);
}

/* --- Emphasis -----------------------------------------------------------
   Key words carry weight through the italic serif or a drawn mark, never
   through colour. Used sparingly: one emphasis per statement. */
.em {
  font-style: italic;
}

.em-solid {
  font-style: normal;
  color: var(--ink);
}

/* A cascade of short statement lines, indented in sequence — the document's
   "spacious typographic" voice. */
.cascade {
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 0.5vw, 0.35rem);
}

.cascade li {
  font-family: var(--font-editorial);
  font-size: var(--t-display-4);
  line-height: 1.28;
  letter-spacing: -0.012em;
}

.cascade--stepped li:nth-child(2) { padding-left: clamp(0rem, 4vw, 5rem); }
.cascade--stepped li:nth-child(3) { padding-left: clamp(0rem, 8vw, 10rem); }
.cascade--stepped li:nth-child(4) { padding-left: clamp(0rem, 12vw, 15rem); }

.cascade--muted li { color: var(--ink-60); }
.cascade--muted li:last-child { color: var(--ink); }


/* ==========================================================================
   03  LAYOUT & GRID
   Desktop 12 columns · tablet 8 · mobile 4. Generous margins, active
   whitespace, asymmetry by intent. Not every section is centred.
   ========================================================================== */

.shell {
  width: 100%;
  padding-inline: var(--m-page);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0;
}

/* Column placement utilities — deliberately few. Section-specific
   composition lives with the section, so pages stay readable. */
.col-1-3  { grid-column: 1 / span 3; }
.col-1-4  { grid-column: 1 / span 4; }
.col-1-5  { grid-column: 1 / span 5; }
.col-1-6  { grid-column: 1 / span 6; }
.col-1-7  { grid-column: 1 / span 7; }
.col-1-8  { grid-column: 1 / span 8; }
.col-1-12 { grid-column: 1 / span 12; }
.col-2-6  { grid-column: 2 / span 6; }
.col-2-7  { grid-column: 2 / span 7; }
.col-3-7  { grid-column: 3 / span 7; }
.col-4-6  { grid-column: 4 / span 6; }
.col-4-8  { grid-column: 4 / span 8; }
.col-5-7  { grid-column: 5 / span 7; }
.col-6-6  { grid-column: 6 / span 6; }
.col-7-5  { grid-column: 7 / span 5; }
.col-7-6  { grid-column: 7 / span 6; }
.col-8-5  { grid-column: 8 / span 5; }
  .col-9-4  { grid-column: 9 / span 4; }
  .col-9-3  { grid-column: 9 / span 3; }
  .col-10-3 { grid-column: 10 / span 3; }
  .col-5-4  { grid-column: 5 / span 4; }
  .col-7-3  { grid-column: 7 / span 3; }
  .col-6-4  { grid-column: 6 / span 4; }

/* --- Sections ------------------------------------------------------------ */
.section {
  position: relative;
  padding-block: var(--s-section);
}

.section--lg { padding-block: var(--s-section-lg); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 7rem); }

/* One step deeper ivory, for statement and manifesto moments only. */
.section--tone { background: var(--paper-tone); }

.section--ruled { border-top: 1px solid var(--rule); }


/* ==========================================================================
   04  RULES, MARKS & THE HAND-DRAWN SYSTEM
   20% of the visual language: fine-liner sketches, loose circles, arrows,
   underlines and simple strategic diagrams. Selective — one or two
   meaningful drawing moments per page. Never decorative filler.
   ========================================================================== */

.rule {
  height: 1px;
  border: 0;
  background: var(--rule);
  margin: 0;
}

.rule--strong { background: var(--rule-strong); }

/* Every drawing is a 1px-feel black stroke on paper. */
.sketch {
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sketch--hair { stroke-width: 1.15; }
.sketch--soft { stroke: var(--ink-45); }

.sketch text,
.diagram text {
  stroke: none;
  fill: var(--ink);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.diagram text.is-soft { fill: var(--ink-45); }

/* Annotation asides sit at a slight angle, in the editorial italic — the
   nearest equivalent to a handwritten margin note within the type pair. */
.diagram text.is-note {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  fill: var(--ink-60);
}

.diagram {
  width: 100%;
  height: auto;
}

/* Feedback loop on the hero diagram: a soft, dashed return stroke that
   suggests growth feeding back into market. It fades in after the main
   sequence (its --draw-delay is set by the Sketch module from its DOM
   order) and carries no motion of its own, so reduced-motion users see it
   immediately. Monochrome and lighter than the primary strokes. */
.js .draw .loop-return {
  stroke: var(--ink-45);
  stroke-width: 1.2;
  stroke-dasharray: 5 7;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease) calc(var(--draw-delay, 0ms) + 250ms);
}

.js .draw.is-drawn .loop-return { opacity: 1; }

/* --- Word marks: a drawn underline or loose circle around a key phrase --- */
.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.mark > svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 108%;
  pointer-events: none;
  overflow: visible;
}

.mark--underline > svg {
  bottom: -0.24em;
  height: 0.42em;
}

/* A drawn strike-through: used where the copy rejects something outright. */
.mark--strike > svg {
  top: 45%;
  height: 0.5em;
  width: 106%;
}

.mark--circle > svg {
  top: -0.26em;
  height: 1.62em;
  width: 150%;
}

/* Allow a marked phrase to wrap on small screens rather than overflow. */
@media (max-width: 40em) {
  .mark { white-space: normal; }
}


/* ==========================================================================
   05  COMPONENTS
   ========================================================================== */

/* --- Text link: a rule that draws itself under the label ----------------- */
.link {
  position: relative;
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.45em;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--d-mid) var(--ease);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(0.34);
}

.link .arrow {
  display: inline-block;
  margin-left: 0.6em;
  transition: transform var(--d-mid) var(--ease);
}

.link:hover .arrow,
.link:focus-visible .arrow { transform: translateX(0.34em); }

/* --- Primary editorial call to action ------------------------------------
     A serif line with a drawn rule beneath it. No button, no pill, no fill. */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(0.75rem, 1.6vw, 1.35rem);
  font-family: var(--font-editorial);
  font-size: clamp(1.5rem, 2.9vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  padding-bottom: 0.22em;
  text-align: left;
  border-bottom: 1px solid var(--ink-30);
  transition: border-color var(--d-mid) var(--ease);
}

.cta:hover,
.cta:focus-visible { border-color: var(--ink); }

.cta .arrow {
  flex: none;
  font-family: var(--font-ui);
  font-size: 0.5em;
  transform: translateY(-0.15em);
  transition: transform var(--d-mid) var(--ease-out);
}

.cta:hover .arrow,
.cta:focus-visible .arrow { transform: translate(0.4em, -0.15em); }

/* --- Editorial rows: services, disciplines, journal subjects -------------
     Horizontal rows divided by thin rules. Never boxed cards. */
.rows { border-top: 1px solid var(--rule); }

.row {
  position: relative;
  border-bottom: 1px solid var(--rule);
}

.row-inner {
  display: grid;
  grid-template-columns: minmax(0, 3.5rem) minmax(0, 7fr) minmax(0, 5fr) minmax(0, 3rem);
  column-gap: var(--gutter);
  align-items: start;
  padding-block: clamp(1.9rem, 3.4vw, 3.15rem);
  padding-inline: 0;
  width: 100%;
  text-align: left;
  /* Renders as a <button> for keyboard access; strip native chrome. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.row-index {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-60);
  padding-top: 0.75em;
  transition: color var(--d-mid) var(--ease);
}

.row-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.55vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  transition: transform var(--d-mid) var(--ease-out);
  transform-origin: left;
  will-change: transform;
}

/* Keep the first discipline title ("Market Intelligence") on one line at
   desktop. Scoped to :first-child and >=62em so no other row or smaller
   viewport is affected; the grid, description column and animation are
   untouched. The gutter absorbs the few px the title can extend. */
@media (min-width: 62em) {
  .row:first-child .row-title { white-space: nowrap; }
}

.row-body {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-60);
  padding-top: 0.5em;
  max-width: 44ch;
  transition: color var(--d-mid) var(--ease);
}

/* The row's sketch symbol — arrow, chart or loose circle. It moves on
   hover, so the drawing responds to attention. */
.row-mark {
  justify-self: end;
  width: 2rem;
  padding-top: 0.6em;
  opacity: 0.42;
  transform: translateX(-0.35rem);
  transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease-out);
}

/* A rule that expands across the row on hover — the "line expands" move. */
.row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-out);
}

.row.is-active::after,
.row:hover::after,
.row:focus-within::after { transform: scaleX(1); }

.row.is-active .row-title,
.row:hover .row-title,
.row:focus-within .row-title { transform: translateX(clamp(0.4rem, 1vw, 1.1rem)); }

.row.is-active .row-index,
.row:hover .row-index,
.row:focus-within .row-index { color: var(--ink); }

.row.is-active .row-body,
.row:hover .row-body,
.row:focus-within .row-body { color: var(--ink-80); }

.row.is-active .row-mark,
.row:hover .row-mark,
.row:focus-within .row-mark {
  opacity: 1;
  transform: translateX(0.15rem);
}

/* Rows awaiting publication: the system is shown, nothing is faked. */
.row--quiet .row-title { color: var(--ink-60); }
.row--quiet .row-mark { opacity: 0.22; }

/* Expanded detail: a quiet panel beneath the row, never a card. It opens with
   a CSS grid-row animation so the height is intrinsic (no JS measurement, no
   jank) and collapses cleanly under reduced motion. */
.row-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-mid) var(--ease-out);
}

.row.is-open .row-detail { grid-template-rows: 1fr; }

.row-detail-inner {
  overflow: hidden;
  min-height: 0;
}

.row-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 3.5rem) minmax(0, 11fr) minmax(0, 5fr);
  column-gap: var(--gutter);
  padding-top: clamp(0.25rem, 1vw, 0.75rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.row-detail-lead { grid-column: 2; }

.row-detail-desc {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-80);
  max-width: 52ch;
}

.row-detail-approach {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-60);
  max-width: 52ch;
}

.row-detail-approach .label { display: block; margin-bottom: 0.55em; }

.row-detail-aside { grid-column: 3; padding-top: 0.2em; }

.row-detail-list {
  list-style: none;
  margin-top: clamp(0.4rem, 1vw, 0.7rem);
}

.row-detail-list li {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-80);
  padding-block: 0.6em;
  border-top: 1px solid var(--rule);
}

.row-detail-list li:first-child { border-top: 0; padding-top: 0; }

.row-detail-foot {
  grid-column: 2 / span 2;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
}

/* The open row's mark turns downward — a quiet, honest expand affordance. */
.row.is-open .row-mark {
  opacity: 1;
  transform: translateX(0.15rem) rotate(90deg);
}

/* Without scripting the panels stay open so the content is never trapped. */
html:not(.js) .row-detail { grid-template-rows: 1fr; }

/* --- Numbered step sequence (QUESTION → UNDERSTAND → FIND → MOVE) -------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: 1px solid var(--rule);
}

.step {
  padding-top: clamp(1.1rem, 2vw, 1.75rem);
  position: relative;
}

.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-out);
}

.step.is-active::before,
.step:hover::before { transform: scaleX(1); }

.step-index {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-60);
  display: block;
  margin-bottom: clamp(1.75rem, 4vw, 4rem);
  transition: color var(--d-mid) var(--ease);
}

.step-word {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.15vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  display: block;
  transition: transform var(--d-mid) var(--ease-out);
  transform-origin: left;
}

.step.is-active .step-index,
.step:hover .step-index { color: var(--ink); }

.step.is-active .step-word,
.step:hover .step-word { transform: translateY(-0.14em); }

/* Each How We Think question now carries its own PNG above the label. */
.step-illu {
  display: block;
  width: 100%;
  max-width: 11rem;
  height: auto;
  margin: 0 auto clamp(0.9rem, 1.6vw, 1.4rem);
}

/* --- Pull statement ------------------------------------------------------ */
.statement {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-width: 26ch;
  text-wrap: balance;
}

.statement--left { text-align: left; }

.contact-label { margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem); }

/* --- Contact form: rules only, no boxes ---------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.field { position: relative; }

.field-label {
  display: block;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 0.85em;
  transition: color var(--d-fast) var(--ease);
}

.field:focus-within .field-label { color: var(--ink); }

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-editorial);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-18);
  border-radius: 0;
  padding: 0 0 0.6em;
  transition: border-color var(--d-mid) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  resize: vertical;
  min-height: 5.5em;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-45);
  font-style: italic;
}

.field input:hover,
.field textarea:hover { border-color: var(--ink-30); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--ink); }

/* The select shares the inputs' underline treatment and a quiet editorial
   chevron drawn as a background so it stays centred and right-aligned. */
.field select {
  width: 100%;
  font-family: var(--font-editorial);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3E%3Cpath%20d='M3%205.5%20L7%209.5%20L11%205.5'%20fill='none'%20stroke='%23121211'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.7em auto;
  border: 0;
  border-bottom: 1px solid var(--ink-18);
  border-radius: 0;
  padding: 0 1.75em 0.6em 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--d-mid) var(--ease);
}

.field select:hover { border-color: var(--ink-30); }
.field select:focus { outline: none; border-color: var(--ink); }

[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3E%3Cpath%20d='M3%205.5%20L7%209.5%20L11%205.5'%20fill='none'%20stroke='%23ECEBE7'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.field-note {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: 0.01em;
  color: var(--ink-60);
  margin-top: 0.7em;
  min-height: 1.4em;
}

/* Inside the form column the CTA is set a step down so it holds one line. */
.form-submit {
  align-self: start;
  cursor: pointer;
  font-size: clamp(1.3rem, 2vw, 2rem);
}

.form-status {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: 0.01em;
  color: var(--ink-60);
  min-height: 1.5em;
}

/* --- Footer -------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 1.75rem);
}

.footer-grid { align-items: center; row-gap: 1.25rem; }

.footer-logo { display: inline-block; transition: opacity var(--d-mid) var(--ease-out); }
.footer-logo:hover,
.footer-logo:focus-visible { opacity: 0.78; }

/* Reuses the supplied wordmark PNG (same asset as the header), set to a
   clearly visible size — noticeable, but below the old giant text wordmark. */
.footer-logo-img {
  display: block;
  height: clamp(4rem, 8vw, 6rem);
  width: auto;
}

.footer-meta { display: grid; justify-items: end; gap: 0.6rem; text-align: right; }

.footer-tag {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.footer-list { display: grid; gap: 0.6em; }

.footer-list a,
.footer-contact a {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: 0.01em;
  position: relative;
  display: inline-block;
}

.footer-list a::after,
.footer-contact a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.22em;
  width: 100%;
  height: 1px;
  background: var(--ink-30);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-mid) var(--ease), background-color var(--d-mid) var(--ease);
}

.footer-list a:hover::after,
.footer-list a:focus-visible::after,
.footer-contact a:hover::after,
.footer-contact a:focus-visible::after {
  transform: scaleX(1);
  background: var(--ink);
}

.footer-base {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: clamp(0.9rem, 1.25vw, 1.1rem);
  border-top: 1px solid var(--rule);
  align-items: baseline;
  row-gap: 0.75rem;
}

.footer-base .meta { font-size: var(--t-meta); color: var(--ink-60); }


/* ==========================================================================
   06  NAVIGATION
   Logo left, navigation right. Small uppercase sans labels with tracking.
   A thin divider before Let's Talk. On mobile: logo plus a minimal menu
   mark opening a full-screen editorial menu.
   ========================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;   /* above the full-screen menu — see .menu */
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(var(--paper-rgb), 0);
  transition: background-color var(--d-mid) var(--ease),
              height var(--d-mid) var(--ease);
}

/* The header earns a rule and a paper backing only once the page moves. */
.header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--rule);
  opacity: 0;
  transition: opacity var(--d-mid) var(--ease);
}

.header.is-scrolled {
  background: rgba(var(--paper-rgb), 0.92);
  backdrop-filter: saturate(180%) blur(9px);
  -webkit-backdrop-filter: saturate(180%) blur(9px);
  height: calc(var(--header-h) - clamp(0.35rem, 1vw, 1rem));
}

.header.is-scrolled::after { opacity: 1; }

/* While the menu is open the header carries no bar of its own — the menu
   is already a full sheet of paper. */
.is-menu-open .header,
.is-menu-open .header.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.is-menu-open .header::after { opacity: 0; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gutter);
  width: 100%;
}

/* --- Wordmark ------------------------------------------------------------ */
.wordmark {
  display: inline-flex;
  align-items: center;
  padding-block: 0.5em;
}

/* The supplied logo image, sized to sit cleanly in the header without
   distortion. Height is fixed; width follows the image's own ratio. */
.wordmark-img {
  display: block;
  height: clamp(4rem, 9vw, 7.5rem);
  width: auto;
}

/* The wordmark opens a little on hover — tactile and quiet. */
.wordmark { transition: opacity var(--d-mid) var(--ease-out); }
.wordmark:hover,
.wordmark:focus-visible { opacity: 0.78; }

.menu-foot a {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ink-30);
  padding-bottom: 0.2em;
  transition: border-color var(--d-mid) var(--ease);
}

.menu-foot a:hover,
.menu-foot a:focus-visible { border-color: var(--ink); }

/* --- Desktop navigation -------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  /* Keep a comfortable, responsive gap before the fixed theme button so the
     nav sits in the right portion of the header without colliding with it. */
  margin-right: max(0rem, calc(clamp(1.1rem, 3vw, 2.5rem) + 4rem - var(--m-page)));
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.75rem);
}

.nav-link {
  position: relative;
  display: inline-block;
  font-size: var(--t-label);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding-block: 0.55em;
  transition: color var(--d-fast) var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-mid) var(--ease-out);
}

.nav-link:hover,
.nav-link:focus-visible { color: var(--ink); }

.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

/* Current page: named, not merely coloured. */
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--ink-30);
}

/* Thin divider before Let's Talk. */
.nav-divider {
  width: 1px;
  height: 1.15em;
  background: var(--rule-strong);
  margin-inline: clamp(0.35rem, 1vw, 1rem);
}

.nav-cta { color: var(--ink); }
.nav-cta::after { transform: scaleX(1); background: var(--ink-30); }
.nav-cta:hover::after,
.nav-cta:focus-visible::after { background: var(--ink); }



/* --- Menu mark (mobile / tablet) ----------------------------------------
   Two 1px rules of unequal width — an editorial mark, not a hamburger.
   They cross into an X when the menu opens. */
.menu-toggle {
  display: none;
  position: relative;
  align-items: center;
  gap: 0.7em;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.75em 0;
}

.menu-mark {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 0.5rem;
  flex: none;
}

.menu-mark i {
  position: absolute;
  left: 0;
  height: 1px;
  background: var(--ink);
  transition: transform var(--d-mid) var(--ease-out),
              width var(--d-mid) var(--ease-out),
              opacity var(--d-fast) var(--ease);
}

.menu-mark i:first-child { top: 0; width: 100%; }
.menu-mark i:last-child { bottom: 0; width: 62%; }

.menu-toggle:hover .menu-mark i:last-child { width: 100%; }

.is-menu-open .menu-mark i:first-child { transform: translateY(0.25rem) rotate(15deg); }
.is-menu-open .menu-mark i:last-child { width: 100%; transform: translateY(-0.25rem) rotate(-15deg); }

/* --- Theme toggle (Skiper UI: centred circular reveal) ------------------ */
/* --- Theme toggle (Skiper UI): an independent hanging object ------------
   Taken out of the header flex flow (position: fixed) so it never affects
   the navigation. It hangs from a thin thread in the top-right and swings
   gently like a lightweight pendant. The circular button itself is unchanged. */
.theme-toggle {
  position: fixed;
  top: 0;
  right: clamp(1.1rem, 3vw, 2.5rem);
  z-index: 150;            /* above header (100); below modals (200+) */
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: theme-swing 5s ease-in-out infinite alternate;
  pointer-events: none;    /* only the button is interactive */
}

.theme-toggle-stem {
  display: block;
  width: 1px;
  height: clamp(2.25rem, 5vw, 3.75rem);
  background: var(--rule-strong);
  opacity: 0.85;
}

.theme-toggle-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color var(--d-mid) var(--ease),
              background-color var(--d-mid) var(--ease);
}
.theme-toggle-btn:hover { border-color: var(--ink); }
.theme-toggle-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-toggle-btn svg {
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  transition: opacity var(--d-mid) var(--ease), transform 0.5s var(--ease-out);
}
.theme-toggle-btn .icon-sun { opacity: 0; transform: rotate(-90deg); }
.theme-toggle-btn .icon-moon { opacity: 1; transform: rotate(0deg); }
[data-theme="dark"] .theme-toggle-btn .icon-sun { opacity: 1; transform: rotate(0deg); }
[data-theme="dark"] .theme-toggle-btn .icon-moon { opacity: 0; transform: rotate(90deg); }

/* Pendulum: pivots from the top attachment, very small amplitude. */
@keyframes theme-swing {
  from { transform: rotate(4deg); }
  to   { transform: rotate(-4deg); }
}

/* Hover settles the swing so the button is easy to click. */
.theme-toggle:hover { animation-play-state: paused; }

/* Mobile: tuck beneath the header so it never meets the menu button,
   and keep it small and subtle. */
@media (max-width: 40em) {
  .theme-toggle {
    top: calc(var(--header-h) + 0.4rem);
    right: clamp(0.75rem, 4vw, 1.25rem);
  }
  .theme-toggle-stem { height: clamp(1.5rem, 4vw, 2.25rem); }
  .theme-toggle-btn { width: 2.1rem; height: 2.1rem; }
}

/* Reduced motion: no swing, button static, theme switching unchanged. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { animation: none !important; }
}

/* --- Full-screen editorial menu ------------------------------------------ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;   /* under .header, whose menu mark closes it */
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: calc(var(--header-h) + clamp(2rem, 6vh, 5rem)) clamp(2.25rem, 6vh, 4rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--d-mid) var(--ease),
              transform var(--d-slow) var(--ease-out),
              visibility var(--d-mid) step-end;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--d-mid) var(--ease),
              transform var(--d-slow) var(--ease-out),
              visibility 0s;
}

.menu-list { display: grid; }

.menu-item { border-bottom: 1px solid var(--rule); }
.menu-item:first-child { border-top: 1px solid var(--rule); }

.menu-item a {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(0.85rem, 2.6vh, 1.45rem);
  font-family: var(--font-editorial);
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(0.55rem);
  transition: opacity var(--d-mid) var(--ease), transform var(--d-slow) var(--ease-out);
}

.menu.is-open .menu-item a {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(90ms + var(--i, 0) * 55ms);
}

.menu-item .menu-index {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-60);
  flex: none;
}

.menu-item a[aria-current="page"] .menu-index { color: var(--ink); }
.menu-item a[aria-current="page"] .menu-word { font-style: italic; }

.menu-foot {
  display: grid;
  gap: 0.9rem;
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease);
}

.menu.is-open .menu-foot { opacity: 1; transition-delay: 380ms; }


/* ==========================================================================
   07  CUSTOM CURSOR
   Desktop only. A transparent circular outline, 1px black border, no fill.
   Smooth movement with subtle inertia. Never a filled blob. Enhancement
   only — the site is fully usable without it.
   ========================================================================== */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 220;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: opacity var(--d-mid) var(--ease),
              width var(--d-mid) var(--ease-out),
              height var(--d-mid) var(--ease-out),
              border-radius var(--d-mid) var(--ease-out),
              border-color var(--d-mid) var(--ease);
  will-change: transform;
}

/* The ring only exists where a fine pointer does. */
.has-cursor .cursor { opacity: 1; }
.has-cursor.is-cursor-out .cursor { opacity: 0; }

/* Native cursor hidden on desktop only. */
@media (hover: hover) and (pointer: fine) {
  .has-cursor,
  .has-cursor a,
  .has-cursor button,
  .has-cursor summary,
  .has-cursor [role="button"] { cursor: none; }
}

.cursor-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scale(1);
  transition: transform var(--d-mid) var(--ease-out);
}

.cursor-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--d-fast) var(--ease), transform var(--d-mid) var(--ease-out);
  white-space: nowrap;
}

/* Clickable hover expands the ring — inside the 1.8x–2.5x band. */
.cursor.is-hover { border-color: var(--ink); }
.cursor.is-hover .cursor-ring { transform: scale(2); }

/* Primary CTA reveals a word inside the ring at its widest setting. */
.cursor.is-label .cursor-ring { transform: scale(2.5); }
.cursor.is-label .cursor-label { opacity: 1; transform: scale(1); }

/* Over text fields the ring becomes a thin caret rule: a quiet, meaningful
   state change rather than a hidden cursor. */
.cursor.is-text {
  width: 2px;
  height: 30px;
  margin: -15px 0 0 -1px;
  border-radius: 0;
  border-width: 0;
  background: var(--ink);
}

.cursor.is-text .cursor-ring { transform: scale(1); }

@media (hover: hover) and (pointer: fine) {
  .has-cursor input,
  .has-cursor textarea { cursor: none; }
}

/* Keyboard users get the native cursor back the moment they tab. */
.is-keyboard .cursor { opacity: 0 !important; }
.is-keyboard.has-cursor,
.is-keyboard.has-cursor a,
.is-keyboard.has-cursor button,
.is-keyboard.has-cursor input,
.is-keyboard.has-cursor textarea { cursor: auto; }


/* ==========================================================================
   08  MOTION & REVEALS
   Movement rewards curiosity; it never interrupts reading. Transform and
   opacity only. Scrolling is never hijacked.
   ========================================================================== */

/* Reveals are opt-in and only armed once JS is present, so the page is
   complete and readable with scripting disabled. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.15rem);
  transition: opacity var(--d-slow) var(--ease),
              transform var(--d-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Line-by-line reveal for headline typography: a clip, not a fade. */
.reveal-lines { display: block; overflow: hidden; }

.reveal-line {
  display: block;
  overflow: hidden;
  /* The tight display line-height leaves the line box shorter than the
     glyph ascenders, so overflow:hidden trims the tops of tall letters
     (e.g. the "f" in "find"). Padding gives the clip box breathing room;
     the matching negative margin keeps glyph positions, inter-line gaps
     and spacing to surrounding elements unchanged. */
  padding-top: 0.2em;
  margin-top: -0.2em;
}

.reveal-line > span {
  display: block;
  transform: translateY(100%);
  transition: transform 860ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}

.js .is-in .reveal-line > span,
.js .reveal-line.is-in > span { transform: translateY(0); }

/* Without JS the clipped lines must simply be visible. */
html:not(.js) .reveal-line > span { transform: none; }

/* WWD "just getting started" heading: display-2's tight 1.0 line-height lets
   the descenders of "g"/"j" overflow the reveal mask's clip box. Give the
   inner animated span real bottom padding (no cancelling negative margin, which
   would shrink the ancestor clip box again) so the mask grows to include the
   descender room. A few pixels of extra space below the heading is the only
   side effect; nothing else on the page changes. */
#next .reveal-line > span {
  padding-bottom: 0.22em;
}

/* Statement headings (e.g. Our Approach): the reveal mask's overflow:hidden
   trims the descenders of "g"/"j". Give the animated inner span bottom padding
   so the mask grows to include them. No negative margin (that would shrink the
   clip box again). Only the heading's own box grows slightly. */
.statement .reveal-line > span {
  padding-bottom: 0.22em;
}

/* Drawn strokes: the dash values are set from getTotalLength() in JS, so a
   drawing without scripting renders complete rather than invisible. */
.js .draw path,
.js .draw line,
.js .draw circle,
.js .draw ellipse,
.js .draw polyline {
  stroke-dasharray: var(--len, none);
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset var(--draw-d, 1100ms) var(--ease)
              calc(var(--draw-delay, 0ms));
}

.js .draw.is-drawn path,
.js .draw.is-drawn line,
.js .draw.is-drawn circle,
.js .draw.is-drawn ellipse,
.js .draw.is-drawn polyline { stroke-dashoffset: 0; }

/* Text inside a drawing fades rather than draws. */
.js .draw text {
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease) var(--text-delay, 500ms);
}

.js .draw.is-drawn text { opacity: 1; }

/* Parallax layers are translated by script; declare the intent here. */
[data-parallax] { will-change: transform; }

/* Page transitions: a paper veil crosses the screen between spreads.
   The veil is created by script, so a page without JS simply navigates. */
.transition-veil {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 460ms var(--ease);
}

.is-leaving .transition-veil {
  opacity: 1;
  pointer-events: auto;
}

/* Theme switch: a centred circular reveal, Skiper UI (free license).
   Only the theme toggle uses the View Transition API; page navigation keeps
   its own paper-veil system above. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) {
    z-index: 2;
    animation: theme-reveal 0.7s var(--ease-out);
  }

  @keyframes theme-reveal {
    from { clip-path: circle(0% at 50% 50%); }
    to   { clip-path: circle(100% at 50% 50%); }
  }
}

/* Arrival: the spread settles into place once. */
.js .page { animation: page-in 620ms var(--ease-out) both; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(0.55rem); }
  to   { opacity: 1; transform: none; }
}

/* Anchored sections clear the fixed header when linked to directly. */
:target,
[id].anchor {
  scroll-margin-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem));
}

/* Scroll cue: a thin rule that travels down its own track. */
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.9em;
}

.scroll-cue-track {
  position: relative;
  width: 1px;
  height: clamp(2.5rem, 5vw, 4rem);
  background: var(--ink-18);
  overflow: hidden;
  flex: none;
}

.scroll-cue-track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 45%;
  background: var(--ink);
  animation: cue 2.6s var(--ease) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(230%); }
  100% { transform: translateY(230%); }
}

/* Marginal reading-stage marker: NOTICE → UNDERSTAND → EXPLORE → TRUST →
   THINK → ACT, the customer experience arc the document describes. */
.stage-marker {
  position: fixed;
  left: clamp(1rem, 2vw, 1.9rem);
  top: 50%;
  z-index: 60;
  display: none;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-45);
  pointer-events: none;
  transition: opacity var(--d-slow) var(--ease);
}

.stage-marker span {
  display: inline-block;
  transition: opacity var(--d-mid) var(--ease), color var(--d-mid) var(--ease);
}

@media (min-width: 78em) {
  .stage-marker { display: block; }
}


/* ==========================================================================
   09  PAGE SECTIONS
   Each page reads as a sequence of spacious screens, not one compressed
   poster. Composition is asymmetric by intent.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  box-sizing: border-box;
  padding-top: calc(var(--header-h) + clamp(1.25rem, 3.5vh, 2.75rem));
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.hero--home {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-main { align-items: start; row-gap: clamp(2rem, 4vw, 3rem); }

/* The hero proposition is set a step below the display maximum so its
   authored line breaks survive on a 7–8 column measure. */
.hero-title {
  font-family: var(--font-heading);
  font-size: var(--hero-heading-size);
  font-weight: var(--hero-heading-weight);
  line-height: var(--hero-heading-lh);
  letter-spacing: var(--hero-heading-tracking);
  max-width: 20ch;
}

.hero-eyebrow { margin-bottom: clamp(2rem, 4.5vw, 3.75rem); }

.hero-diagram { align-self: center; }

.hero-foot {
  align-items: end;
  row-gap: 1.5rem;
  margin-top: clamp(1rem, 2.5vh, 2rem);
}

.hero-tag {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* Interior pages: a title, a rule, and air. Set one step below the Home
   proposition so the homepage keeps the largest typographic moment. */
.hero--page .hero-title {
  max-width: 22ch;
}

.hero--page .hero-sub {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  color: var(--ink-60);
}

/* --- What We Do hero: TMO composition (label · heading · challenge + role
       copy · WIDE horizontal illustration) ----------------------------- */
/* Tightened for a single-viewport fit and a clean heading → subheading
   flow. The display-1 leading (0.94) is raised here only, so the wrapped
   heading lines and the underline sketch no longer collide with the lede. */
.hero--wwd {
  padding-top: calc(var(--header-h) + clamp(0.75rem, 2vh, 1.5rem));
  padding-bottom: clamp(0.5rem, 1.2vh, 1rem);
}
.hero-wwd-grid { align-items: center; row-gap: clamp(2rem, 4vw, 3rem); }
.hero-wwd-copy { display: flex; flex-direction: column; }
.hero--wwd .hero-title {
  padding-bottom: 0.4em;
  margin-top: clamp(0.85rem, 2vw, 1.4rem);
  max-width: 18ch;
}

.hero-lede {
  font-family: var(--font-editorial);
  font-size: clamp(1.3rem, 1.95vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-80);
  margin-top: clamp(1.25rem, 2.6vw, 1.9rem);
}
.hero-wwd-copy .cascade { margin-top: clamp(1rem, 2vw, 1.4rem); }
.hero-wwd-copy .cascade li { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }

.hero-rule {
  display: block;
  width: clamp(2.5rem, 5vw, 4rem);
  height: 1px;
  background: var(--ink-30);
  margin: clamp(1.1rem, 2.4vw, 1.6rem) 0;
}
.hero-role {
  font-family: var(--font-editorial);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.hero-wwd-copy .approach-list { margin-top: clamp(0.85rem, 1.6vw, 1.2rem); }
.hero-wwd-copy .approach-list li { font-size: clamp(1.05rem, 1.5vw, 1.4rem); }

/* Wide horizontal illustration area for the future asset. object-fit:
   contain so a very wide image is never cropped or distorted. */
.hero-figure { width: 100%; }
.hero-figure-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  background: var(--paper-tone);
  border-radius: 2px;
}
.hero-figure-note {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.hero-figure-img,
.hero-figure-inner > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* What We Do hero: the illustration sits in the right-hand column. Enlarge the
   actual image ~15% (it overflows its column) without touching the grid, the
   column width, or the container. The small left overflow lands inside the grid
   gutter (no overlap with the copy); the right overflow stays within --m-page
   (no clipping). Desktop only so mobile never crops the artwork. */
@media (min-width: 62.01em) {
  .hero--wwd .hero-figure-img {
    width: 115%;
    margin-left: -3.6%;
    max-width: none;
  }
}

/* --- Home · change cascade ---------------------------------------------- */
.change-lines li { font-size: var(--t-display-3); line-height: 1.16; }

/* --- Home · the challenge (typographic contrast) ------------------------ */
.challenge-a {
  color: var(--ink-60);
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

.challenge-b { position: relative; }

.challenge-c {
  margin-top: clamp(2.75rem, 6vw, 5.5rem);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--t-display-4);
  line-height: 1.24;
  color: var(--ink-60);
}

/* --- Home · intro ------------------------------------------------------- */
.intro-foot {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* --- Approach ----------------------------------------------------------- */
.approach-list {
  display: grid;
  gap: clamp(0.4rem, 1vw, 0.7rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.approach-list li {
  font-family: var(--font-editorial);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.26;
  letter-spacing: -0.012em;
  display: flex;
  align-items: baseline;
  gap: 1.15em;
}

.approach-list li::before {
  content: "";
  flex: none;
  width: clamp(1.25rem, 2.5vw, 2rem);
  height: 1px;
  background: var(--ink-30);
  transform: translateY(-0.4em);
}

.approach-close { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* --- Disciplines / services / subjects ---------------------------------- */
.rows-head {
  align-items: baseline;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  row-gap: 1rem;
}

.rows-foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  justify-content: flex-end;
}

/* --- How we think ------------------------------------------------------- */
.think-diagram { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* --- Teasers ------------------------------------------------------------ */
.teaser-statement { max-width: 26ch; }

.teaser-foot { margin-top: clamp(2.5rem, 5vw, 4rem); }

.teaser-status {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--t-display-4);
  color: var(--ink-60);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* --- Closing CTA -------------------------------------------------------- */
.cta-section { padding-block: var(--s-section-lg); }

.cta-grid .col-1-5 > .label {
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.cta-question {
  max-width: 20ch;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  font-size: clamp(1.9rem, 4vw, 3rem);
}

/* ==========================================================================
   ABOUT PAGE — TMO-inspired editorial composition
   Restructures the existing About content into an asymmetric three-column
   hero, a three-up "work" row, and a two-column manifesto. Copy, illustrations
   and approved animations are unchanged; only structure/spacing changed.
   ========================================================================== */
.about-hero {
  padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.about-hero-grid { align-items: start; row-gap: clamp(0.75rem, 1.5vw, 1.25rem); }

/* About Hero: two columns. LEFT = label + heading + supporting belief copy.
   RIGHT = the illustration only. The belief block is nested inside the left
   lead column so it sits directly under the heading (not under the illustration). */
.about-hero-lead { grid-row: 1; }
.about-hero-diagram { grid-column: 7 / span 6; grid-row: 1; align-self: center; }

.about-hero-lead .label { margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem); }

.about-hero-title {
  max-width: 22ch;
}

.about-hero-belief { max-width: 44ch; margin-top: clamp(1.1rem, 2.2vw, 1.6rem); }
.about-hero-belief .lead { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.about-hero-belief .belief-point { margin-top: clamp(0.75rem, 1.5vw, 1.25rem); }
.about-hero-belief .body { color: var(--ink-80); }
.about-hero-diagram .body { color: var(--ink-80); }

.about-hero-diagram .diagram { width: 100%; max-width: 30rem; margin-inline: auto; }

/* Journal hero — TMO-inspired composition: small section label, dominant
   editorial heading (left), and supporting copy distributed to a complementary
   right column. Consolidates the old sparse hero + "The Journal" intro.
   Scoped to .journal-hero so the locked discipline index is untouched. */
.hero.journal-hero {
  padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}

/* Two-column hero: copy (label · heading · support) on the left,
   illustration on the right. Stacks on small screens. */
.journal-hero-grid {
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.journal-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.journal-hero-copy .label {
  margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
}
.journal-hero-copy .hero-title {
  margin: 0;
}
.journal-hero-support {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: var(--ink-80);
  max-width: 40ch;
}

@media (max-width: 62em) {
  .journal-hero-grid {
    grid-template-columns: 1fr;
  }
}

/* The Work — three editorial columns with vertical rules. */
.work-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.work-col {
  padding-inline: clamp(1rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.work-col:first-child { padding-left: 0; }
.work-col:not(:first-child) { border-left: 1px solid var(--rule); }
.work-col .label { color: var(--ink-60); }
.work-statement {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Manifesto / closing — belief cascade beside the CTA. */
.manifesto-close {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 62em) {
  .work-cols { grid-template-columns: 1fr; row-gap: clamp(1.5rem, 4vw, 2.5rem); }
  .work-col { padding-inline: 0; }
  .work-col:not(:first-child) {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: clamp(1.25rem, 3vw, 2rem);
  }
}

/* Homepage CTA heading — reduced from the giant display-1 scale and set to a
   controlled size so it reads as a strong section heading in three lines.
   Scoped to this section only; other display-1 uses are untouched. */
.cta-grid .cta-question { font-size: clamp(1.9rem, 4vw, 3rem); }

.cta-aside {
  margin-top: clamp(3rem, 6vw, 5rem);
  color: var(--ink-60);
}

/* --- Home · horizontal zones (TMO-style composition, Marketplace visuals) -- */
.approach-grid,
.challenge-grid,
.cta-grid { align-items: start; }

.approach-lead .label { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.approach-art {
  align-self: center;
  display: flex;
  justify-content: center;
}
.approach-magnifier {
  width: 100%;
  max-width: 8.5rem;
  height: auto;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.challenge-grid .challenge-a { margin-bottom: 0; }
.challenge-grid .challenge-c { margin-top: 0; }

.cta-support {
  color: var(--ink-60);
  max-width: 26ch;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}
.cta-aside-col {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

/* Homepage closing CTA — reduced moderately so it balances the section
   without dominating the right column. Scoped to this section only. */
.cta-aside-col .cta { font-size: clamp(1.3rem, 2.1vw, 2.05rem); }

.intro-grid { align-items: start; }
.intro-lead .label { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.intro-foot-col { display: flex; justify-content: flex-end; }

/* --- Home · restructured homepage (TMO content, Marketplace visuals) ----- */
/* Hierarchy beneath the headline:
     MAIN HEADING  → .hero-title      (display-1, dominant)
     PRIMARY       → .hero-narrative  (content immediately under the heading)
     SECONDARY     → .hero-mission     (the longer explanatory paragraphs) */
.hero-narrative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hero-narrative-col { display: grid; gap: 0.5rem; }
.hero-narrative-col p {
  font-family: var(--font-editorial);
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink-80);
}
.hero-narrative-col p.em-solid { color: var(--ink); font-weight: 600; }

.hero-mission {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-60);
  max-width: 52ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hero-mission + .hero-mission { margin-top: clamp(0.85rem, 1.6vw, 1.25rem); }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.hero-media { align-self: center; }

/* Home hero: balanced, structure-safe footprint.
   Scoped to the homepage and desktop only so other pages/mobile are untouched.
   Text 6/12, image 6/12. */
@media (min-width: 62.01em) {
  .hero--home .col-1-8 { grid-column: 1 / span 6; }
  .hero--home .col-9-4 { grid-column: 7 / span 6; }
}
.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - var(--header-h) - 3rem);
  object-fit: contain;
  color: var(--ink-30);
}

.challenge-bridge {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 6.6fr);
  align-items: center;
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
  margin-top: 0;
}
.challenge-bridge-a {
  color: var(--ink-60);
  max-width: none;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.14;
  transition: color var(--d-mid) var(--ease);
}
.challenge-bridge-b {
  color: var(--ink);
  max-width: none;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.14;
  text-align: left;
}
.challenge-bridge-arrow {
  color: var(--ink);
  display: flex;
  flex: none;
  transition: transform var(--d-mid) var(--ease);
}
.challenge-bridge-arrow svg { width: clamp(3.25rem, 6vw, 5.5rem); height: auto; }

/* Hover reuses the existing hand-drawn arrow (.draw) — see ChallengeHover.
   The arrow nudges and the muted half warms toward full ink. */
.challenge-bridge.is-hover .challenge-bridge-arrow { transform: translateX(clamp(0.2rem, 1vw, 0.6rem)); }
.challenge-bridge.is-hover .challenge-bridge-a { color: var(--ink-80); }

/* Challenge as a single horizontal flow: TEXT → ARROW → TEXT → SPACE → IMAGE.
   The bridge keeps its internal A|arrow|B layout; the illustration now sits on
   the same line, with breathing room, and is enlarged. */
.challenge-flow {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.challenge-flow .challenge-illo {
  max-width: clamp(24rem, 42vw, 46rem);
  width: 100%;
  margin: 0;
}

/* The Challenge — calm, single-play entrance sequence (label → heading A
   lines → arrow draws → heading B lines). Transitions only; no replay on
   scroll, respects prefers-reduced-motion via the global reveal fallback. */
.js .challenge-bridge-a .reveal-line > span { transition-delay: calc(220ms + var(--i, 0) * 95ms); }
.js .challenge-bridge-arrow .draw path,
.js .challenge-bridge-arrow .draw line,
.js .challenge-bridge-arrow .draw polyline { transition-delay: calc(640ms + var(--draw-delay, 0ms)); }
.js .challenge-bridge-b .reveal-line > span { transition-delay: calc(1520ms + var(--i, 0) * 95ms); }

.bring-grid { align-items: center; row-gap: clamp(2.5rem, 5vw, 4rem); }
.bring-lockup {
  align-self: center;
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  text-align: right;
}
.bring-lockup-rule { margin-left: auto; }
.bring-lockup-words {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.bring-lockup-rule {
  width: clamp(8rem, 14vw, 12rem);
  height: auto;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.step-desc {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-60);
  max-width: 24ch;
}

.cta-prompts {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 0.85rem);
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 40em) {
  .cta-prompts { white-space: normal; }
}

@media (max-width: 900px) {
  .hero-narrative { grid-template-columns: 1fr; gap: 1rem; }
  .challenge-bridge { grid-template-columns: 1fr; }
  .challenge-bridge-arrow { transform: rotate(90deg); justify-content: center; }
  .challenge-bridge-a, .challenge-bridge-b { max-width: none; }
  .challenge-flow { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 3rem); }
  .challenge-flow .challenge-illo { max-width: 26rem; margin-inline: auto; justify-self: center; }
  .bring-lockup { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: clamp(1.5rem, 4vw, 2.5rem); }
}

@media (max-width: 40em) {
  .step-desc { grid-column: 1 / -1; margin-top: 0.4rem; }
}

/* --- About · three ideas ------------------------------------------------ */
.ideas-diagram { margin-block: clamp(2rem, 4vw, 4rem); }

.story { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }

.story-days li {
  font-family: var(--font-editorial);
  font-size: clamp(1.15rem, 1.75vw, 1.65rem);
  line-height: 1.42;
  padding-block: clamp(0.9rem, 1.8vw, 1.35rem);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 3rem) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
}

.story-days li:first-child { border-top: 1px solid var(--rule); }

.story-days .label { padding-top: 0.5em; }

.closing-statement {
  font-family: var(--font-heading);
  font-size: var(--t-display-2);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* --- Journal ------------------------------------------------------------ */
.journal-note { margin-top: clamp(2.5rem, 5vw, 4rem); }

.coming {
  font-family: var(--font-editorial);
  font-size: var(--t-display-2);
  line-height: 1;
  letter-spacing: -0.02em;
}

.coming-note { margin-top: clamp(1.5rem, 3vw, 2.25rem); color: var(--ink-60); }

/* --- Contact ------------------------------------------------------------ */
.contact-main { row-gap: clamp(3rem, 6vw, 4.5rem); }

/* Contact hero: label + heading on the left, illustration on the right. */
.contact-hero-grid {
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.contact-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.contact-hero-copy .label {
  margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
}
.contact-hero-copy .hero-title {
  margin: 0;
}
.contact-hero-illo {
  margin: 0;
  max-width: 100%;
  align-self: center;
  justify-self: center;
}
@media (max-width: 62em) {
  .contact-hero-grid { grid-template-columns: 1fr; }
  .contact-hero-illo {
    margin: clamp(1.5rem, 5vw, 2.5rem) auto 0;
    max-width: 30rem;
  }
}

.questions { display: grid; border-top: 1px solid var(--rule); }

.question {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  width: 100%;
  text-align: left;
  padding-block: clamp(1.1rem, 2.2vw, 1.85rem);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.5vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  transition: color var(--d-mid) var(--ease);
}

.question::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-out);
}

.question:hover::after,
.question:focus-visible::after,
.question.is-chosen::after { transform: scaleX(1); }

.question-text {
  display: inline-block;
  transition: transform var(--d-mid) var(--ease-out);
  transform-origin: left;
}

.question:hover .question-text,
.question:focus-visible .question-text { transform: translateX(clamp(0.3rem, 0.8vw, 0.85rem)); }

.question-mark {
  flex: none;
  width: 1.6rem;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease-out);
}

.question:hover .question-mark,
.question:focus-visible .question-mark,
.question.is-chosen .question-mark { opacity: 0.65; transform: translateX(0); }

.question.is-chosen { font-style: italic; }

.contact-details {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}

.contact-details a,
.contact-details span { font-family: var(--font-ui); font-size: var(--t-small); }

.contact-email {
  font-family: var(--font-editorial) !important;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem) !important;
  position: relative;
  display: inline-block;
}

.contact-diagram { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Dedicated inquiry form: the form and its success state share one column. */
.contact-inquiry.is-sent .form { display: none; }
.contact-inquiry.is-sent .form-success { display: block; }

.form-success { display: none; }
.form-success h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.form-success p {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-60);
  max-width: 46ch;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.form-success-actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Subtle copy-email enhancement — the address is real Marketplace data. */
.contact-line { display: flex; align-items: baseline; gap: 1em; flex-wrap: wrap; }
.copy-email {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink-30);
  padding: 0 0 0.2em;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.copy-email:hover,
.copy-email:focus-visible { color: var(--ink); border-color: var(--ink); }
.copy-email.is-copied { color: var(--ink); border-color: var(--ink); }


/* ==========================================================================
   09b  DISCIPLINE SHOWCASE — Skiper44-inspired scroll interaction
   --------------------------------------------------------------------------
   FIXED phrase "What We Bring Together" anchored on the left, vertically
   centred. A vertical STACK of all six disciplines sits to its right; every
   state is present at once. The active discipline (the one aligned with the
   fixed phrase) is dark / sharp / full-size, while the others recede (lighter,
   smaller, subtly blurred) around it. Scroll moves the active state through the
   stack. A settled state is always crisp (blur 0 / opacity 1 / scale 1).
   Native, monochrome, dependency-free. Without JS (or reduced motion) the six
   disciplines fall back to a readable static stack.
   ========================================================================== */

/* External spacing ONLY — aggressively reduced. The scroll-driven height
   lives in CSS on .showcase when .is-engaged, so the animation is untouched. */
.discipline-showcase { position: relative; padding-block: clamp(0.5rem, 1vw, 0.9rem); }

/* Pull the Disciplines section right up under the showcase. */
#services { padding-top: clamp(0.5rem, 1vw, 0.9rem); padding-bottom: clamp(1.75rem, 3vw, 2.75rem); }

/* "Just Getting Started" — keep it compact and inside one viewport. */
#next { padding-block: clamp(2rem, 3.5vw, 3.25rem); }

.showcase {
  --showcase-steps: 6;            /* number of disciplines */
  --showcase-step-scroll: 60vh;   /* scroll distance per state transition */
  position: relative;
  height: auto;                   /* base: no-JS / reduced motion */
}

.showcase-sticky {
  position: static;               /* base: not pinned until engaged */
  height: auto;
}

.showcase-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  width: 100%;
}

/* Two columns: fixed phrase (left) + vertical discipline stack (right). Both
   vertically centred, so the active discipline lines up with the fixed phrase. */
.showcase-composition {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: center;
  column-gap: clamp(2rem, 6vw, 6rem);
}

/* Permanent anchor — left column, vertically centred, never animated. Stays on
   a single line so the fixed phrase and active discipline read as one row. */
.showcase-fixed {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}

/* Vertical stack of all six disciplines — right column. Every item is present;
   JS positions them and recedes the inactive ones around the active line. */
.showcase-stack {
  position: relative;
  height: clamp(22rem, 62vh, 36rem);
  pointer-events: none;           /* decorative — never steals the cursor */
}

.showcase-item {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Base (no-JS / reduced motion): a readable static stack, all visible. */
.showcase-item + .showcase-item { margin-top: clamp(0.5rem, 1.6vw, 1rem); }

/* --- Engaged state (JS present, motion allowed) -------------------------
    The composition pins; stack items are absolutely placed and moved by scroll.
    Transform/opacity/filter only — no layout shift. */
html.js .discipline-showcase.is-engaged .showcase {
  height: calc(100vh + (var(--showcase-steps) - 1) * var(--showcase-step-scroll));
}
html.js .discipline-showcase.is-engaged .showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 2.5rem));
}
html.js .discipline-showcase.is-engaged .showcase-stack { height: clamp(22rem, 62vh, 36rem); }
html.js .discipline-showcase.is-engaged .showcase-item {
  position: absolute;
  left: 0;
  top: 50%;
  margin: 0;
  width: 100%;
  font-size: clamp(1.8rem, 3.6vw, 3.6rem);
  transform-origin: left center;
  will-change: transform, opacity, filter;
  white-space: nowrap;            /* keep the active discipline on one line */
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 62em) {
  .showcase-composition { column-gap: clamp(1.5rem, 4vw, 3rem); }
  .showcase-fixed { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
  .showcase-stack { height: clamp(20rem, 56vh, 30rem); }
  .showcase-item { font-size: clamp(1.6rem, 4.4vw, 3rem); }
}

/* --- Mobile: fixed phrase above the stack, same concept preserved --------
    Wrapping is allowed here so nothing is clipped or overflows. */
@media (max-width: 40em) {
  .showcase-composition {
    grid-template-columns: 1fr;
    row-gap: clamp(1.5rem, 6vw, 3rem);
  }
  .showcase-fixed { max-width: none; white-space: normal; }
  .showcase-stack { height: clamp(18rem, 64vh, 28rem); }
  .showcase-item { font-size: clamp(1.6rem, 9vw, 3rem); white-space: normal; }
}


/* ==========================================================================
    10  RESPONSIVE
   Tablet is an 8-column grid, mobile a 4-column grid. Mobile is composed,
   not a narrowed desktop layout: type scale, spacing, navigation, section
   order and interaction are all reconsidered.
   ========================================================================== */

/* --- Tablet & small laptop ---------------------------------------------- */
@media (max-width: 62em) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

  .col-1-3, .col-1-4, .col-1-5, .col-1-6, .col-1-7, .col-1-8, .col-1-12,
  .col-2-6, .col-2-7, .col-3-7, .col-4-6, .col-4-8, .col-5-7,
  .col-6-6, .col-7-5, .col-7-6,   .col-8-5, .col-9-3, .col-9-4, .col-5-4, .col-7-3,
  .col-6-4, .col-10-3 { grid-column: 1 / span 8; }

  /* Navigation collapses to the wordmark plus the menu mark. */
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }

  /* Columns stack, so a section label now sits directly above the title it
     opens and needs the air the side-by-side composition gave it. */
  .grid > * > .label:only-child { margin-bottom: clamp(1rem, 2.6vw, 1.6rem); }

  /* The hero diagram sits under the proposition, at reduced presence. */
  .hero--home { min-height: 0; }
  .hero-main { row-gap: clamp(2.5rem, 6vw, 4rem); }
  .hero-diagram { max-width: 26rem; }
  .hero-title { max-width: 20ch; }

  /* What We Do hero: the copy and the wide illustration stack, the image
     keeps a wide aspect and sits below the text with intentional air. */
  .hero-wwd-grid { grid-template-columns: 1fr; }
  .hero-wwd-figure { margin-top: clamp(2rem, 5vw, 3rem); }
  .hero-figure-inner { aspect-ratio: 16 / 9; }

  .row-inner {
    grid-template-columns: minmax(0, 3rem) minmax(0, 1fr) minmax(0, 2rem);
    row-gap: 0.9rem;
  }
  .row-body { grid-column: 2 / span 1; max-width: 52ch; }
  .row-mark { grid-column: 3 / span 1; grid-row: 1; }

  /* Detail panel stacks under the row at tablet width. */
  .row-detail-grid { grid-template-columns: minmax(0, 3rem) minmax(0, 1fr); }
  .row-detail-lead,
  .row-detail-aside,
  .row-detail-foot { grid-column: 2; }
  .row-detail-aside { padding-top: clamp(1.5rem, 4vw, 2.25rem); }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 5vw, 3rem); }
  .step:nth-child(n + 3) { border-top: 1px solid var(--rule); }

  .cascade--stepped li:nth-child(2) { padding-left: clamp(0rem, 3vw, 2.5rem); }
  .cascade--stepped li:nth-child(3) { padding-left: clamp(0rem, 6vw, 5rem); }
  .cascade--stepped li:nth-child(4) { padding-left: clamp(0rem, 9vw, 7.5rem); }

  .footer-base { row-gap: 1.25rem; }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 40em) {
  :root {
    --t-display-1: clamp(2.55rem, 12.5vw, 3.6rem);
    --t-display-2: clamp(2rem, 9.5vw, 2.9rem);
    --t-display-3: clamp(1.7rem, 7.6vw, 2.35rem);
    --t-display-4: clamp(1.35rem, 5.6vw, 1.75rem);
    --s-section: clamp(3rem, 9vw, 4.5rem);
    --s-section-lg: clamp(3.5rem, 11vw, 5.5rem);
    --measure: 40ch;
  }

  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .col-1-3, .col-1-4, .col-1-5, .col-1-6, .col-1-7, .col-1-8, .col-1-12,
  .col-2-6, .col-2-7, .col-3-7, .col-4-6, .col-4-8, .col-5-7,
  .col-6-6, .col-7-5, .col-7-6,   .col-8-5, .col-9-3, .col-9-4, .col-5-4, .col-7-3,
  .col-6-4, .col-10-3 { grid-column: 1 / span 4; }

  body { line-height: 1.68; }

  .hero { padding-top: calc(var(--header-h) + clamp(2.25rem, 9vh, 4rem)); }
  .hero-title, .hero--page .hero-title { max-width: none; }
  .hero-diagram { max-width: 19rem; margin-top: 0.75rem; }

  /* The stepped cascade returns to a flush left column on narrow screens —
     indentation stops reading as rhythm and starts reading as noise. */
  .cascade--stepped li { padding-left: 0 !important; }

  /* Rows: number and title on one line, description beneath. The row mark
     moves inline with the title so the row keeps its editorial edge. */
  .row-inner {
    grid-template-columns: minmax(0, 2.25rem) minmax(0, 1fr);
    row-gap: 0.7rem;
    padding-block: 1.6rem;
  }
  .row-body { grid-column: 2 / span 1; }
  .row-mark { display: none; }
  .row-title { font-size: clamp(1.35rem, 6.4vw, 1.85rem); }
  .row.is-active .row-title,
  .row:hover .row-title { transform: none; }

  /* Detail panel spans the full single column on the smallest screens. */
  .row-detail-grid { grid-template-columns: minmax(0, 2.25rem) minmax(0, 1fr); }
  .row-detail-lead,
  .row-detail-aside,
  .row-detail-foot { grid-column: 2; }
  .row-detail-aside { padding-top: clamp(1.5rem, 6vw, 2rem); }

  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .step {
    display: grid;
    grid-template-columns: minmax(0, 2.25rem) minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: baseline;
    padding-block: 1.35rem;
    border-top: 1px solid var(--rule);
  }
  .step:first-child { border-top: 0; }
  .step-index { margin-bottom: 0; }

  .story-days li { grid-template-columns: minmax(0, 2.25rem) minmax(0, 1fr); }

  .question { padding-block: 1.15rem; }
  .question-mark { display: none; }

  .approach-list li::before { width: 1.5rem; }

  /* One step down so the authored statement lines break where intended
     rather than orphaning a preposition. */
  .statement { font-size: clamp(1.65rem, 7.1vw, 2.1rem); }

  .footer-lockup { font-size: clamp(1.9rem, 12vw, 2.75rem); }

  /* Cursor and marginal marker are desktop devices; both stand down. */
  .stage-marker { display: none; }
}

/* --- Large desktop ------------------------------------------------------
   Wide screens gain margin, not measure: the reading column stays fixed
   while whitespace grows. */
@media (min-width: 105em) {
  :root {
    --m-page: clamp(7.5rem, 9vw, 12rem);
    --t-display-1: clamp(8rem, 7.4vw, 10.5rem);
  }
}

/* Touch and coarse pointers: no ring cursor, no hover-dependent state. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
  .row-mark { opacity: 0.42; }
  .question-mark { opacity: 0.45; transform: none; }
}


/* ==========================================================================
   11  ACCESSIBILITY, REDUCED MOTION & PRINT
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85em 1.4em;
  transition: transform var(--d-fast) var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

/* A single, consistent focus treatment: a hairline ring in ink. */
:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

.row-inner:focus-visible,
.question:focus-visible { outline-offset: 3px; }

/* Reduced motion: the site must remain beautiful with animation removed.
   Nothing moves; everything is present and legible. */
/* ==========================================================================
   13  JOURNAL
   Article index, filtering, search, pagination and the reader overlay. The
   same editorial vocabulary as the Services rows — monochrome, rule-driven,
   no cards — so the Journal reads as part of the same publication.
   ========================================================================== */

/* Journal-specific rhythm. The index is a denser reading surface than a
   marketing section, so the section air is tightened here ONLY — the global
   --s-section / --s-section-lg tokens other pages rely on are left intact. */
.journal .hero--page { padding-bottom: clamp(2.25rem, 5vw, 4rem); }
.journal .section { padding-block: clamp(2.75rem, 6vw, 5.5rem); }
.journal .section--lg { padding-block: clamp(3.25rem, 7vw, 6rem); }
.journal .cta-section { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Filter bar — text controls, never pills. The active control carries a hair
   underline; nothing else moves. */
.jbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(0.85rem, 1.6vw, 1.15rem);
  margin-top: clamp(1.1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.jbar::-webkit-scrollbar { display: none; }

.jfilter {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0 0 0.3em;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  border-bottom: 1.5px solid transparent;
  transition: color var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease);
}
.jfilter:hover,
.jfilter:focus-visible { color: var(--ink); }
.jfilter.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}

/* Search — an editorial underline input, consistent with the Let's Talk form. */
.jsearch {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--ink-30);
  padding-bottom: 0.5rem;
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  transition: border-color var(--d-mid) var(--ease);
}
.jsearch:focus-within { border-bottom-color: var(--ink); }

.jsearch-label {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-45);
  flex: none;
}

.jsearch-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  font-family: var(--font-editorial);
  font-size: var(--t-lead);
  color: var(--ink);
  padding: 0.1em 0;
}
.jsearch-input::placeholder { color: var(--ink-30); }
.jsearch-input:focus { outline: none; }

/* The list — ruled rows, the publication's native unit. */
.jlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.jrow {
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.jrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-out);
}
.jrow:hover::after,
.jrow:focus-within::after { transform: scaleX(1); }

.jrow-inner {
  display: grid;
  grid-template-columns: minmax(0, 2.75rem) minmax(0, 5.5fr) minmax(0, 5.5fr) minmax(0, 5.5rem) minmax(0, 2.5rem);
  column-gap: var(--gutter);
  align-items: start;
  width: 100%;
  text-align: left;
  padding-block: clamp(1.35rem, 2.3vw, 2.1rem);
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.jrow-index {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-60);
  padding-top: 0.5em;
  transition: color var(--d-mid) var(--ease);
}

.jrow-head { display: block; }
.jrow-cat {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 0.7em;
}
.jrow-title {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  transition: transform var(--d-mid) var(--ease-out);
  transform-origin: left;
  will-change: transform;
}

.jrow-body {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-60);
  padding-top: 0.6em;
  max-width: 46ch;
  transition: color var(--d-mid) var(--ease);
}

.jrow-date {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  color: var(--ink-45);
  padding-top: 0.7em;
  letter-spacing: 0.04em;
}

.jrow-mark {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.6em;
  color: var(--ink);
}
.jrow-glyph { width: 1.4rem; height: 1.4rem; opacity: 0.5; transition: opacity var(--d-mid) var(--ease); }
.jrow-glyph-svg { width: 100%; height: 100%; display: block; }
.jrow-arrow {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.7;
  transform: translateX(-0.3rem);
  transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease-out);
}

.jrow:hover .jrow-index,
.jrow:focus-within .jrow-index { color: var(--ink); }
.jrow:hover .jrow-title,
.jrow:focus-within .jrow-title { transform: translateX(clamp(0.35rem, 0.9vw, 0.9rem)); }
.jrow:hover .jrow-body,
.jrow:focus-within .jrow-body { color: var(--ink-80); }
.jrow:hover .jrow-glyph,
.jrow:focus-within .jrow-glyph { opacity: 1; }
.jrow:hover .jrow-arrow,
.jrow:focus-within .jrow-arrow { opacity: 1; transform: translateX(0.15rem); }

.jempty {
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-60);
  padding: clamp(2rem, 4vw, 3rem) 1rem;
}

/* Pagination — restrained numerals, current carries the underline. */
.jpager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
}
.jpage {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-60);
  font: inherit;
  letter-spacing: 0.08em;
  padding-bottom: 0.2em;
  border-bottom: 1.5px solid transparent;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.jpage:hover:not(:disabled),
.jpage:focus-visible:not(:disabled) { color: var(--ink); }
.jpage.is-current {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.jpage:disabled { opacity: 0.3; cursor: not-allowed; }
.jpage--prev,
.jpage--next { font-size: 1.1rem; }

/* --- Reader overlay -------------------------------------------------------- */
.reader {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-mid) var(--ease), visibility var(--d-mid) step-end;
}
.reader.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--d-mid) var(--ease), visibility 0s;
}
.reader-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.reader-panel {
  position: relative;
  width: 100%;
  max-width: 60rem;
  max-height: calc(100vh - 2 * clamp(1.25rem, 4vw, 3rem));
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4.5rem);
  transform: translateY(1.5rem);
  opacity: 0;
  transition: transform var(--d-slow) var(--ease-out), opacity var(--d-mid) var(--ease);
}
.reader.is-open .reader-panel { transform: none; opacity: 1; }

.reader-close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.75rem);
  right: clamp(1rem, 2.5vw, 1.75rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-60);
  transition: color var(--d-fast) var(--ease);
}
.reader-close:hover,
.reader-close:focus-visible { color: var(--ink); }
.reader-close svg { width: 1.25rem; height: 1.25rem; }
.reader-close path { stroke: currentColor; stroke-width: 1.5; }

.reader-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  color: var(--ink-60);
}
.reader-num { font-weight: 600; color: var(--ink); }
.reader-cat { font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.reader-dot { color: var(--ink-30); }

.reader-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.reader-excerpt {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-60);
  border-left: 2px solid var(--ink-30);
  padding-left: 1em;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.reader-rule {
  height: 1px;
  background: var(--rule);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.reader-body {
  font-family: var(--font-editorial);
  font-size: var(--t-body);
  line-height: 1.72;
  color: var(--ink-80);
}
.reader-body p { margin: 0 0 1.4em; max-width: var(--measure); }
.reader-body p:last-child { margin-bottom: 0; }

.reader-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--rule);
}
.reader-sign {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--t-small);
  color: var(--ink-45);
}
.reader-back {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .jrow-inner {
    grid-template-columns: minmax(0, 2.5rem) minmax(0, 1fr) minmax(0, 2.25rem);
    grid-template-areas:
      "index head mark"
      "index body mark"
      "index date mark";
    row-gap: 0.7rem;
  }
  .jrow-index { grid-area: index; }
  .jrow-head { grid-area: head; }
  .jrow-body { grid-area: body; max-width: none; }
  .jrow-date { grid-area: date; padding-top: 0.4em; }
  .jrow-mark { grid-area: mark; align-self: start; padding-top: 0.4em; }
  .jrow:hover .jrow-title,
  .jrow:focus-within .jrow-title { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .js .reveal-line > span { transform: none; }
  .js .draw path,
  .js .draw line,
  .js .draw circle,
  .js .draw ellipse,
  .js .draw polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .draw text { opacity: 1; }
  .js .page { animation: none; }
  .transition-veil { display: none; }
  [data-parallax] { transform: none !important; }
  .scroll-cue-track::after { animation: none; height: 100%; opacity: 0.4; }

}

@media print {
  .header, .menu, .cursor, .stage-marker, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 2.5rem; break-inside: avoid; }
  a::after { content: none !important; }
}

/* ==========================================================================
   12  LET'S TALK MODAL
   A reusable, quiet editorial overlay. One instance, built and opened by
   script, triggered from the header and from service inquiry CTAs. Without
   scripting the CTAs fall back to the Contact page (mailto), so the markup
   is injected at runtime rather than duplicated across pages.
   ========================================================================== */

/* Scroll-lock the page behind the open modal (the panel scrolls itself). */
html.is-modal-open,
html.is-modal-open body { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;            /* above header (90) and menu (90), below nothing interactive */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-mid) var(--ease),
              visibility var(--d-mid) step-end;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--d-mid) var(--ease),
              visibility 0s;
}

/* The dimming wash — ink, never a colour. */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* The panel: paper, thin frame, generous air. */
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 64rem;
  max-height: calc(100vh - 2 * clamp(1.25rem, 4vw, 3rem));
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: clamp(2rem, 5vw, 4.5rem) 0;
  transform: translateY(1.5rem);
  opacity: 0;
  transition: transform var(--d-slow) var(--ease-out),
              opacity var(--d-mid) var(--ease);
}

.modal.is-open .modal-panel {
  transform: none;
  opacity: 1;
}

/* Close control — an editorial X, top-right. */
.modal-close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.75rem);
  right: clamp(1rem, 2.5vw, 1.75rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-60);
  transition: color var(--d-fast) var(--ease);
}

.modal-close:hover,
.modal-close:focus-visible { color: var(--ink); }

.modal-close svg { width: 1.25rem; height: 1.25rem; }
.modal-close path { stroke: currentColor; stroke-width: 1.5; }

/* Two-column editorial composition following the site grid. */
.modal-grid {
  align-items: start;
  row-gap: clamp(2rem, 4vw, 3rem);
}

.modal-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: 0.4em;
}

.modal-copy {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-60);
  max-width: 38ch;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
}

.modal-context {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--ink-45);
}

/* The modal form reuses .form / .field, so the base .field select rule above
   provides its chevron and underline. No modal-specific select styling needed. */

/* Success state replaces the form contents. */
.modal-success { display: none; }
.modal.is-sent .modal-form-col .form { display: none; }
.modal.is-sent .modal-success { display: block; }

.modal-success h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.modal-success p {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-60);
  max-width: 46ch;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* --- Kalam supporting-text utility --------------------------------------
   Applied ONLY to the specifically selected supporting statements
   (Home Our Approach x2, What We Do frameworks line, About belief lines x2,
   Journal intro). Headings stay Poppins; all other body text keeps its
   existing font. Kalam has tall ascenders/descenders, so a slightly looser
   line-height prevents clipping without changing sizes or layout. */
.kalam-text {
  font-family: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 400;
  line-height: 1.7;
}

/* --- Supplied hand-drawn illustrations (assets/illustration/*.svg) ------
   These are dark-on-transparent grayscale sketches (3120x1755, ~16:9). They
   scale fluidly and invert in dark mode — the same technique the site already
   uses for .wordmark-img. Because the artwork is pure grayscale, invert(1)
   only flips luminance (preserving every shading relationship), so the line
   work stays clearly visible on the dark background instead of vanishing. */
.art-illu {
  display: block;
  width: 100%;
  height: auto;
}

.art-fig { margin: 0; }

/* Slot-specific sizing (all keep intrinsic aspect ratio; none are cropped). */
.hero-illo,
.about-illo,
.hero-figure-img { width: 100%; }

/* Wide editorial illustrations get a contained, centered footprint so they
   strengthen the composition without ballooning into empty space. */
.challenge-illo,
.think-illo,
.office-illo,
.journal-hero-illo {
  max-width: 115%;
  margin: 0;
  align-self: center;
  justify-self: center;
}

@media (max-width: 62em) {
  .journal-hero-illo {
    margin: clamp(1.5rem, 5vw, 2.5rem) auto 0;
    max-width: 30rem;
  }
}

/* Office section: balanced 3-column single row (text | text | illustration).
   The illustration is placed in the third column instead of spanning full
   width below the copy. Uses its own grid so it is independent of the
   12-column page grid. */
.office-heading {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.office-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.office-grid .office-col { min-width: 0; }
.office-grid .office-illo {
  margin: 0;
  max-width: 120%;
  align-self: center;
  justify-self: center;
}

@media (max-width: 48em) {
  .office-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(2rem, 5vw, 3rem);
  }
  .office-grid .office-illo {
    margin: clamp(1.5rem, 5vw, 2.5rem) auto 0;
    max-width: 26rem;
  }
}

/* ============================================================
   MOBILE AUDIT — phone refinements (max-width: 40em / 640px).
   Stacks and SIZES content that was already reflowing at tablet
   width; approved desktop layouts (>=62.01em) are untouched.
   Keep every illustration proportional, contained, and clearly
   visible — neither tiny nor edge-to-edge full-bleed.
   ============================================================ */
@media (max-width: 40em) {
  /* Home hero: cap and center the wide lead illustration so it reads as a
     strong horizontal band within the shell rather than a full-bleed slab. */
  .hero--home .hero-media { justify-self: center; }
  .hero--home .hero-illo { max-width: 26rem; margin-inline: auto; }

  /* About hero: same contained, centered treatment for the diagram. */
  .about-hero-diagram { justify-self: center; }
  .about-illo { max-width: 24rem; margin-inline: auto; }

  /* Contact hero: tighten the contained cap already applied at tablet width. */
  .contact-hero-illo { max-width: 24rem; }

  /* Gentle vertical rhythm without introducing whitespace spikes. */
  .hero-narrative { margin-top: clamp(1.5rem, 4vw, 2rem); }
  .hero-main { row-gap: clamp(2rem, 6vw, 3rem); }
}

[data-theme="dark"] .art-illu { filter: invert(1); }

/* ============================================================
   ABOUT + JOURNAL — HERO FLOW FIXES (tablet + mobile)
   ------------------------------------------------------------
   Root-cause fixes, not band-aids:

   1) ABOUT hero — `.about-hero-diagram { grid-row: 1 }` stayed set
      at stack widths, pinning the illustration to the same grid row
      as the text lead. That made the image overlap the supporting
      copy instead of flowing below it. Releasing grid-row lets the
      two areas stack in DOM order (label, heading, belief, then
      illustration).

   2) JOURNAL hero — later `.grid` re-declarations (repeat(8) at 62em,
      repeat(4) at 40em) overrode the two-column `.journal-hero-grid`
      template, so the copy + illustration (which have no col-*
      utility) were squeezed into a single ~58px track. Re-declaring a
      single column here (end of file) wins, so copy stacks then the
      illustration flows below it as an intentional part of the hero.

   Desktop (>=62.01em) is untouched.
   ============================================================ */

@media (max-width: 62em) {
  .about-hero-lead,
  .about-hero-diagram { grid-row: auto; }

  /* Cap the stacked About diagram block so it reads as intentional on
     tablets without dominating the hero (phones already derive their
     width from the shell; the cap only binds when the column is wide). */
  .about-hero-diagram { max-width: 30rem; margin-inline: auto; }

  .journal-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40em) {
  /* Filters wrap to new lines instead of scrolling internally. */
  .jbar { flex-wrap: wrap; }
}

/* ============================================================
   CONTACT HERO — MOBILE STACK (root cause fix)
   ------------------------------------------------------------
   `.contact-hero-grid` is a `.grid` element whose own `1fr` collapse
   (declared early) was overridden by the later responsive `.grid`
   re-declarations (repeat(8) at 62em, repeat(4) at 40em). That
   squeezed the copy + illustration into single ~58px tracks — the
   same bug journal had. Re-declaring the single column here (end of
   file) wins on specificity/source, so the hero stacks naturally:
   CONTACT label, heading, then the illustration below at full shell
   width. Desktop (>=62.01em) keeps the approved two-column layout.
   ============================================================ */

@media (max-width: 62em) {
  .contact-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-hero-illo {
    margin: clamp(1.5rem, 5vw, 2.5rem) auto 0;
    max-width: 30rem;
  }
}

/* ============================================================
   MOBILE HEADER — MENU PUSHED TO THE RIGHT EDGE
   ------------------------------------------------------------
   On small screens the header holds only two in-flow controls: the
   logo and the menu button (theme toggle is `position: fixed`, out
   of flow). `justify-content: flex-start` previously sat the menu
   button immediately next to the logo. Replacing the fill behaviour
   with `space-between` pushes the menu to the right edge of the
   shell (so it keeps the design's horizontal padding), leaving
   flexible space between logo and menu. Desktop navigation is
   unchanged (this rule only applies below 62em).
   ============================================================ */

@media (max-width: 62em) {
  .header-inner { justify-content: space-between; }
}

/* ============================================================
   MOBILE — ILLUSTRATION ALIGNMENT: LEFT ONLY
   ------------------------------------------------------------
   Phone-only rule (<=40em). Leaves every illustration's size,
   aspect ratio, vertical position, and responsive behaviour as it
   is. It only removes the horizontal centring (margin auto / margin
   `auto 0` / justify-self centre) so each image starts at the same
   left edge as its surrounding content. Tablet (40-62em) and
   desktop keep their current alignment untouched.
   ============================================================ */

@media (max-width: 40em) {
  /* Home hero lead illustration. */
  .hero--home .hero-media { justify-self: start; }
  .hero--home .hero-illo { margin-inline: 0 auto; }

  /* Home — the challenge bridge figure. */
  .challenge-flow .challenge-illo { justify-self: start; margin-inline: 0 auto; }

  /* Home — How We Think step images. */
  .step-illu { margin-left: 0; }

  /* About hero diagram (block + its image). */
  .about-hero-diagram { justify-self: start; margin-inline: 0 auto; }
  .about-illo { margin-inline: 0 auto; }

  /* About — the office illustration. */
  .office-grid .office-illo { justify-self: start; margin-left: 0; }

  /* Journal hero illustration. */
  .journal-hero-illo { justify-self: start; margin-left: 0; }

  /* Contact hero illustration. */
  .contact-hero-illo { justify-self: start; margin-left: 0; }
}