/* ==========================================================================
   Belis Communications
   Design system. Everything is defined once here.

   Colour note: the brief's terracotta (#1E6B4F) is 4.27:1 on soft white and
   3.82:1 on ivory — fine for large type and rules, below AA for small text
   and for white-on-terracotta buttons. So terracotta is kept exactly as
   specified for rules, markers and large numerals, and three derived shades
   carry it wherever it has to behave as text. Do not swap them.
   ========================================================================== */

:root {
  --ink:        #16264A;   /* navy, hue 222deg */
  --charcoal:   #2B3A52;   /* navy-grey, matched to the new ink hue */
  --ivory:      #EDF1F6;
  --white:      #FFFFFF;
  --terracotta: #1E6B4F;   /* rules, markers, large numerals only */
  --terra-text: #17553E;   /* accent as SMALL TEXT — 7.70:1 on band, 8.73:1 on white */
  --terra-btn:  #1A5F46;   /* fills, white text — 7.58:1 */
  --terra-lift: #6FCBA4;   /* mint lift on ink — 8.07:1 */
  --sage:       #8FB3A3;
  --border:     #D5DCE6;

  --body:       #33414F;   /* primary body copy — 10.7:1 on white */
  --body-2:     #3E4B5A;   /* supporting copy — 7.85:1 on band, 8.90:1 on white */
  --on-ink:     #E6ECF2;
  --on-ink-2:   #B9C6D6;   /* on navy 10.38:1 — was 8.43:1 and read washed out */

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* type scale — desktop targets from the brief */
  --t-label: 0.6875rem;                                        /* 11px      */
  --t-sm:    0.9375rem;                                        /* 15px      */
  --t-body:  clamp(1.0625rem, 1.02rem + 0.15vw, 1.1875rem);    /* 17–19px   */
  --t-lede:  clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem);    /* 19–23px   */
  --t-h3:    clamp(1.25rem, 1.11rem + 0.58vw, 1.875rem);       /* 20–30px   */
  --t-h2:    clamp(1.625rem, 1.28rem + 1.28vw, 2.625rem);      /* 26–42px   */
  --t-h1:    clamp(2rem, 1.42rem + 2.0vw, 3.5rem);             /* 32–56px   */
  --t-h1-lg: clamp(2.125rem, 1.4rem + 2.7vw, 4.125rem);        /* 34–66px   */
  --t-display: clamp(2.5rem, 1.1rem + 6.1vw, 5.4rem);          /* 40–86px   */
  --t-num:   clamp(2.5rem, 1.8rem + 2.4vw, 4rem);

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;  --s9: 6rem;

  --band: clamp(2.5rem, 4.4vw, 4rem);        /* 40-64px, one rhythm sitewide */
  /* Both are capped against viewport width as well as text size. The vw terms
     never bind at the default text size on any viewport 320px or wider, so
     normal rendering is unchanged. They bind only when a reader enlarges text
     on a narrow screen, where eleven rem-based gutters would otherwise be
     wider than the page and collapse every column track to zero. */
  --gut:  min(clamp(1.25rem, 4vw, 3.5rem), 8vw);
  --gutter: min(clamp(1rem, 1.6vw, 1.5rem), 5vw);   /* the single column gutter */
  --maxw: 76rem;
  --r: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.22; }

p { margin: 0 0 var(--s4); max-width: 68ch; }

/* Long unbroken tokens such as email addresses must wrap rather than push
   the page sideways, which matters most at large text sizes. */
p, li, h1, h2, h3, td, dd { overflow-wrap: break-word; }
a[href^="mailto:"], a[href^="http"] { overflow-wrap: anywhere; }
p:last-child { margin-bottom: 0; }

a { color: var(--terra-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 44rem; }
.lede { font-size: var(--t-lede); line-height: 1.45; color: var(--body); max-width: 46ch; }
.sm { font-size: var(--t-sm); color: var(--body-2); }

/* ---------- Label ------------------------------------------------------- */

/* The marker sits above the text so the label aligns with the headline. */
.label {
  display: block; position: relative; padding-top: calc(var(--s4) + 2px);
  font-family: var(--sans); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal); margin: 0 0 var(--s5);
}
.label::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 18px; height: 2px; background: var(--terracotta);
}
.on-ink .label { color: var(--on-ink); }

/* ---------- Sections ---------------------------------------------------- */

.section { padding-block: var(--band); }
.section-ivory { background: var(--ivory); }

/* Hairline division between consecutive sections of the same tone. */
.section-ink + .section-ink { border-top: 1px solid #3D4C5E; }
.section-ivory + .section-ivory { border-top: 1px solid var(--border); }
.section-ink   { background: var(--ink); color: var(--on-ink); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--white); }
.section-ink p { color: var(--on-ink-2); }
/* Scoped away from .btn so button labels keep their own colour. */
.section-ink a:not(.btn) { color: var(--terra-lift); }
.section-ink a:not(.btn):hover { color: var(--white); }

/* ---------- Buttons ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.01em; text-decoration: none;
  padding: 0.8125rem 1.375rem; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  min-height: 44px;
}
.btn-primary { background: var(--terra-btn); color: #fff; border-color: var(--terra-btn); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.section-ink .btn-outline { color: var(--white); border-color: #4A5A6E; }
.section-ink .btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* text link with a directional marker */
.link {
  display: inline-flex; align-items: baseline; gap: .5rem;
  max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere;   /* label wraps rather than overflowing */
  padding-block: .6rem;                       /* 44px touch target */
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  color: var(--terra-text); text-decoration: none;
}
.link::after { content: "\2192"; transition: transform .15s ease; }
.link:hover { color: var(--ink); }
.link:hover::after { transform: translateX(3px); }
.section-ink .link { color: var(--terra-lift); }
.section-ink .link:hover { color: var(--white); }

/* ---------- Header ------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.site-header::before {
  content: ""; display: block; height: 3px; background: var(--terracotta);
}
.header-inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); min-height: 68px;
  /* Wrapping never triggers at normal text sizes, where the bar fits on one
     line. It is here so that an enlarged header folds onto a second row
     instead of pushing the whole page sideways. */
  flex-wrap: wrap; row-gap: var(--s2);
}
.nav {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
  flex-wrap: wrap; justify-content: flex-end;
}
/* Scoped away from .btn so the header button keeps its own styling. */
.nav a:not(.btn) {
  font-size: var(--t-sm); font-weight: 500; color: var(--body);
  text-decoration: none; padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--border); }
.nav a:not(.btn)[aria-current="page"] { color: var(--ink); border-bottom-color: var(--terracotta); }
.nav .btn { margin-left: var(--s2); }

.nav-toggle { display: none; }

/* ---------- Hero -------------------------------------------------------- */

.hero { padding-block: clamp(2rem, 3.6vw, 3.25rem) var(--band); }
.hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: var(--s7); align-items: start;
}
/* The headline spans the full measure and the imagery sits beneath it, so the
   first thing on the page is the sentence rather than a column of it. */
.hero-grid > *:nth-child(1) { grid-column: 1 / -1; }
.hero-grid > *:nth-child(2) { grid-column: 1 / span 6; }
.hero h1 {
  font-size: var(--t-display); line-height: 0.96; letter-spacing: -0.03em;
  max-width: 20ch; margin-bottom: var(--s5);
}

/* A hero holding one tall image is narrowed further; a portrait pair is not.
   Scoped to a min-width query so it cannot outrank the mobile stacking rule. */
@media (min-width: 64.0625rem) {
  .hero-grid > figure:not(:has(.portrait-pair)) { grid-column: 1 / span 4; }
}
.hero .lede { max-width: 48ch; }

/* ---------- Metrics ----------------------------------------------------- */

.metrics { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s6); }
.metric { grid-column: span 4; }
.metric { border-top: 2px solid var(--terracotta); padding-top: var(--s4); grid-column: span 4; }
.metric .fig {
  font-family: var(--serif); font-size: var(--t-num); font-weight: 400;
  line-height: 1; color: var(--terra-lift); letter-spacing: -0.02em;
  display: block; margin-bottom: var(--s3);
}
.metric p { font-size: var(--t-sm); color: var(--on-ink); margin: 0; max-width: 26ch; }
.metrics-note {
  font-size: var(--t-sm); color: var(--on-ink-2);
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid #3D4C5E; max-width: none;
}

/* ---------- Situation grid ---------------------------------------------- */

.situations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--border); }
.situations { column-gap: 1px; }
.situation { background: var(--ivory); padding: var(--s6) var(--s6) var(--s6) 0; }
.situations .situation:nth-child(odd)  { padding-right: var(--s7); }
.situations .situation:nth-child(even) { padding-left: var(--s7); }
.situation h3 { font-size: 1.25rem; margin-bottom: var(--s3); }
.situation p { font-size: var(--t-sm); color: var(--body-2); margin: 0; max-width: 40ch; }

/* ---------- Service overview -------------------------------------------- */

.svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s5); align-items: stretch; }
.svc { grid-column: span 4; }
.svc {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s6); background: var(--white);
}
.svc.is-flagship {
  background: var(--ink); border-color: var(--ink); color: var(--on-ink);
}
.svc.is-flagship h3 { color: var(--white); }
.svc.is-flagship p { color: var(--on-ink-2); }
.svc.is-flagship .link { color: var(--terra-lift); }
.svc.is-flagship .link:hover { color: var(--white); }
.flag {
  align-self: flex-start;
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; background: var(--terra-btn);
  padding: .3rem .5rem; border-radius: var(--r); margin-bottom: var(--s4);
}
.svc h3 { margin-bottom: var(--s3); }
.svc p { font-size: var(--t-sm); color: var(--body-2); }
.svc .link { margin-top: auto; padding-top: var(--s5); }

/* ---------- Work cards --------------------------------------------------- */

.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s7); }
.work-card { grid-column: span 6; }
.work-card {
  border-top: 2px solid var(--ink); padding-top: var(--s5);
  display: flex; flex-direction: column;
}
.tag {
  align-self: flex-start;
  max-width: 100%; overflow-wrap: anywhere;   /* the label breaks before the card does */
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; border-radius: var(--r);
  padding: .3rem .5rem; margin-bottom: var(--s4);
}
.tag-client { background: var(--ink); color: var(--white); }
.tag-founder { background: transparent; color: var(--charcoal); border: 1px solid var(--border); }
.work-card h3 { margin-bottom: var(--s3); max-width: 22ch; }
.work-card p { font-size: var(--t-sm); color: var(--body-2); }

/* ---------- Partners ----------------------------------------------------- */

.partners { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s7); }
.partner { grid-column: span 6; }
.partner { border-top: 2px solid var(--ink); padding-top: var(--s5); }
.partner h3 { margin-bottom: var(--s1); }
.partner .role {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--terra-text);
  margin-bottom: var(--s4);
}
.partner p { font-size: var(--t-sm); color: var(--body-2); }

/* ---------- Process ------------------------------------------------------ */

.process { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s6); counter-reset: p; }
.step { grid-column: span 3; }
.process.cols-3 > .step { grid-column: span 4; }
.step { counter-increment: p; border-top: 1px solid var(--border); padding-top: var(--s4); }
.step .n {
  font-family: var(--serif); font-size: var(--t-sm); color: var(--terra-text);
  display: block; margin-bottom: var(--s3);
}
.step h3 { font-size: 1.25rem; margin-bottom: var(--s2); }
.step p { font-size: var(--t-sm); color: var(--body-2); margin: 0; }

/* ---------- Editorial statement / pull ------------------------------------ */

.statement {
  font-family: var(--serif); font-size: clamp(1.375rem, 1.05rem + 1.35vw, 2.125rem);
  line-height: 1.28; letter-spacing: -0.012em; color: var(--ink);
  max-width: 26ch; margin: 0;
}
/* ---------- The grid ------------------------------------------------------
   Every two-column layout on the site is placed on the same 12-column grid
   with the same gutter, so column edges line up from section to section and
   page to page. Ratios differ; grid lines do not.
   -------------------------------------------------------------------------- */
.split, .split-wide, .split-lead,
.entry, .entry-top, .entry .cols,
.case, .case-head, .case .cols,
.qa > div {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s5);
  align-items: start;
}

/* 6 / 6 */
/* .split takes any number of blocks, two to a row. */
.split > *:nth-child(odd)  { grid-column: 1 / span 6; }
.split > *:nth-child(even) { grid-column: 7 / span 6; }
.split-wide > *:nth-child(1) { grid-column: 1 / span 6; }
.split-wide > *:nth-child(2) { grid-column: 7 / span 6; }

/* 4 / 8 — label-and-heading against body copy */
.split-lead > *:nth-child(1),
.entry-top > *:nth-child(1),
.case-head > *:nth-child(1),
.qa > div > *:nth-child(1) { grid-column: 1 / span 4; }
.split-lead > *:nth-child(2),
.entry-top > *:nth-child(2),
.case-head > *:nth-child(2),
.qa > div > *:nth-child(2) { grid-column: 5 / span 7; }

/* Column two is offset by the height of the eyebrow block in column one so
   the first line of each column sits on the same baseline. */
.split-lead > *:first-child:has(> .label + :is(h1, h2)) + * { padding-top: 3.75rem; }  /* label block = 60px */
.entry-top  > *:first-child:has(> .flag) + *               { padding-top: 2.5625rem; } /* flag block  = 41px */
/* .case-head is not offset: column two opens with its own heading. */

/* Interior hero headings get the same 7 / 4 split as the home page hero,
   so every page opens on identical grid lines. */
.hero .split-lead > *:nth-child(1) { grid-column: 1 / span 7; }
.hero .split-lead > *:nth-child(2) { grid-column: 9 / span 4; }

/* Direct children span the full grid unless placed by a rule below. */
.entry > *, .case > * { grid-column: 1 / -1; }

/* entry and case internals hang off the same lines */
.entry > .entry-top, .entry > .cols,
.case > .case-head { grid-column: 1 / -1; }
/* Header row is 4 / 8; detail rows below run the full width. */
.entry > .close, .entry > .btn-row,
.case > .close, .case > .btn-row { grid-column: 1 / span 7; }
.entry .cols > *:nth-child(1), .case .cols > *:nth-child(1) { grid-column: 1 / span 6; }
.entry .cols > *:nth-child(2), .case .cols > *:nth-child(2) { grid-column: 7 / span 6; }

/* ---------- Service detail entries --------------------------------------- */

.entry { padding-block: var(--s7); border-top: 1px solid var(--border); }
/* columns come from the shared 12-column grid above */
.entry h2 { margin-bottom: var(--s3); }
.entry .cols { margin-top: 0; }
.spec-title {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--charcoal);
  margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border);
  max-width: none;
}
.spec ul { list-style: none; margin: 0; padding: 0; }
.spec li {
  font-size: var(--t-sm); color: var(--body-2);
  padding: .3rem 0 .3rem var(--s4); position: relative;
}
.spec li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 6px; height: 1px; background: var(--terracotta);
}
.entry .close, .case .close { margin-top: 0; }

/* ---------- Q&A ----------------------------------------------------------- */

.qa { border-top: 1px solid var(--border); }
.qa > div { padding-block: var(--s5); border-bottom: 1px solid var(--border); row-gap: var(--s2); }
.qa h3 { font-size: 1.1875rem; margin: 0; }
.qa p { font-size: var(--t-sm); color: var(--body-2); margin: 0; }

/* ---------- Case studies --------------------------------------------------- */

.case { padding-block: var(--s7); border-top: 1px solid var(--border); }
/* columns come from the shared 12-column grid above */
.case h2 { margin-bottom: var(--s3); max-width: 20ch; }
.case .meta { font-size: var(--t-sm); color: var(--body-2); }

/* Label above value. */
.meta strong {
  display: block; color: var(--ink); font-weight: 700;
  font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--s1);
}
.meta strong + br { display: none; }
.meta strong:not(:first-child) { margin-top: var(--s4); }

/* ---------- Proof list ------------------------------------------------------ */

.proof { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.proof li {
  break-inside: avoid; font-size: var(--t-sm); color: var(--on-ink);
  padding: var(--s3) 0 var(--s3) var(--s5); border-top: 1px solid #3D4C5E; position: relative;
}
.proof li::before { content: ""; position: absolute; left: 0; top: 1.5em; width: 8px; height: 1px; background: var(--terracotta); }

/* ---------- Form ------------------------------------------------------------ */

.form { max-width: 34rem; }
/* Standalone links are tap targets rather than prose links. */
.spec p > a:only-child { display: inline-block; padding-block: .45rem; }

.form-consent {
  font-size: var(--t-label); line-height: 1.6; letter-spacing: .02em;
  color: var(--body-2); margin: var(--s4) 0 0; max-width: 46ch;
}

.form-legend {
  font-size: var(--t-label); letter-spacing: .04em; color: var(--body-2);
  margin: 0 0 var(--s5); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.field { margin-bottom: var(--s5); }
.field label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-bottom: var(--s2); }
.req { color: var(--terra-text); font-weight: 700; }
.form-legend .req { font-weight: 700; }

.field .hint { display: block; font-weight: 400; color: var(--body-2); font-size: var(--t-label); letter-spacing: .02em; margin-top: 2px; text-transform: none; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: .7rem .75rem; -webkit-appearance: none; appearance: none; min-height: 44px;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--terra-btn); outline-offset: 1px; border-color: var(--terra-btn);
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: var(--terra-btn); border-width: 2px; background: #EEF3F8;
}
.field input:user-invalid + .err, .field textarea:user-invalid + .err { display: block; }
.err {
  display: none; font-size: var(--t-label); color: var(--terra-text);
  margin-top: var(--s2); letter-spacing: .02em; font-weight: 600;
}
.hp { position: absolute; left: -9999px; }
.form-note {
  font-size: var(--t-sm); color: var(--body-2);
  border-left: 2px solid var(--border); padding-left: var(--s4); margin-top: var(--s5);
}

/* ---------- Prose ------------------------------------------------------------ */

.prose { max-width: 40rem; }
.prose h2 { font-size: 1.375rem; margin: var(--s7) 0 var(--s3); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--body-2); }
.prose ul { padding-left: var(--s4); }

/* ---------- Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--ink); color: var(--on-ink-2);
  padding-block: var(--s7) var(--s6);
  border-top: 2px solid var(--terracotta);
}
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s6); }
.footer-grid > *:nth-child(1) { grid-column: span 6; }
.footer-grid > *:nth-child(2) { grid-column: span 3; }
.footer-grid > *:nth-child(3) { grid-column: span 3; }
.site-footer .tagline { font-family: var(--sans); color: var(--on-ink); font-size: 1.0625rem; margin-top: var(--s3); max-width: 26ch; }
.site-footer .footer-title {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--white);
  margin: 0 0 var(--s4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0; }
.site-footer li a { display: block; padding: .7rem 0; }
.site-footer a { color: var(--on-ink-2); text-decoration: none; font-size: var(--t-sm); }
.site-footer a:hover { color: var(--white); }
.site-footer p { font-size: var(--t-sm); color: var(--on-ink-2); }
.legal {
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid #3D4C5E;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between;
  font-size: var(--t-label); letter-spacing: .04em; color: var(--on-ink-2);
}
.legal p { font-size: var(--t-label); margin: 0; }

/* ---------- Proof band (client marquee) ---------------------------------- */

.proof-band {
  border-block: 1px solid var(--border);
  padding-block: var(--s5); overflow: hidden;
}
.proof-band .label { text-align: center; margin-bottom: var(--s4); }
.marquee-track { display: flex; width: max-content; }
.marquee-track > * { display: flex; }
.marquee {
  display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 6rem);
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  animation: marquee-scroll 34s linear infinite;
}
/* Pausing on hover or on keyboard focus lets anyone stop the movement. */
.proof-band:hover .marquee,
.proof-band:focus-within .marquee { animation-play-state: paused; }
.marquee-item { display: flex; align-items: center; height: 44px; flex: 0 0 auto; }
.marquee-item img { display: block; height: 100%; width: auto; max-width: none; object-fit: contain; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Available to assistive technology, never painted. Used to carry the true
   figure while the visible numeral is counting up. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Scroll reveal ------------------------------------------------ */

/* .js-motion is set by script only when motion is welcome, so with no
   JavaScript, or with reduced motion requested, nothing is ever hidden. */
.js-motion [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Persistent contact dock -------------------------------------- */

.cta-dock {
  position: fixed; z-index: 70;
  right: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem);
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: .8rem 1.1rem; border-radius: 999px;
  background: var(--terra-btn); color: var(--white);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; box-shadow: 0 12px 28px -14px rgba(22, 38, 74, .6);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.cta-dock.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.cta-dock:hover { background: var(--terracotta); color: var(--white); }
.cta-dock .arrow { font-size: 1em; line-height: 1; }

/* ---------- Focus & skip ------------------------------------------------------ */

:focus-visible { outline: 2px solid var(--terra-btn); outline-offset: 3px; }
.section-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--sage); }

.skip {
  position: absolute; left: var(--gut); top: -5rem; z-index: 100;
  background: var(--ink); color: var(--white); padding: var(--s3) var(--s4);
  text-decoration: none; font-size: var(--t-sm); font-weight: 600; border-radius: var(--r);
}
.skip:focus { top: var(--s2); }

/* ==========================================================================
   Responsive. Tested at 390 / 768 / 1024 / 1440.
   ========================================================================== */

@media (max-width: 96rem) {
  /* Two across keeps the measure readable. */
  .process:not(.cols-3) > .step { grid-column: span 6; }
}

@media (max-width: 64rem) {          /* 1024 and below */
  /* Lead layouts stop being 4/8 and stack; card grids halve. */
  .split-lead > *:nth-child(n), .entry-top > *:nth-child(n),
  .case-head > *:nth-child(n),
  .entry > .close, .entry > .btn-row,
  .case > .close, .case > .btn-row { grid-column: 1 / -1; }
  .entry > .close, .entry > .btn-row,
  .case > .close, .case > .btn-row { grid-column: 1 / -1; }

  .hero-grid > *:nth-child(n),
  .hero .split-lead > *:nth-child(n) { grid-column: 1 / -1; }
  .split-lead > * + *, .entry-top > * + *, .case-head > * + * { padding-top: 0 !important; }
  .hero h1 { max-width: 18ch; }

  .svc { grid-column: span 6; }
  .svc.is-flagship { grid-column: 1 / -1; order: -1; }
  .step, .process.cols-3 > .step { grid-column: span 6; }
  .footer-grid > *:nth-child(1) { grid-column: span 12; }
  .footer-grid > *:nth-child(2), .footer-grid > *:nth-child(3) { grid-column: span 6; }
}

@media (max-width: 48rem) {          /* 768 and below */
  /* Every child stacks, not just the first two: several of these containers
     hold three or four blocks, which otherwise stayed in half columns. */
  .split > *:nth-child(n), .split-wide > *:nth-child(n),
  .qa > div > *:nth-child(n),
  .entry .cols > *:nth-child(n), .case .cols > *:nth-child(n),
  .svc, .work-card, .partner, .metric { grid-column: 1 / -1; }

  .qa > div { row-gap: var(--s2); }
  .situations { grid-template-columns: minmax(0, 1fr); }
  .situations .situation:nth-child(odd),
  .situations .situation:nth-child(even) { padding: var(--s5) 0; }
  .metrics { row-gap: var(--s5); }
  /* Flex rather than two fixed tracks, so the label drops beneath the numeral
     instead of forcing the row wider than the page when text is enlarged. */
  .metric { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
  .metric .fig { font-size: min(clamp(2.25rem, 9vw, 3rem), 12vw); margin: 0; flex: 0 0 auto; }
  .metric p { flex: 1 1 10ch; min-width: 0; }
  .proof { columns: 1; }
  .statement { max-width: none; }
  .entry, .case { row-gap: var(--s5); }

  /* --- mobile navigation --- */
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s2);
    background: transparent; border: 1px solid var(--border); border-radius: var(--r);
    font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink);
    padding: .55rem .75rem; cursor: pointer; min-height: 44px;
  }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: var(--s3) var(--gut) var(--s5);
    box-shadow: 0 12px 24px -18px rgba(22,38,74,.5);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) {
    padding: var(--s4) 0; border-bottom: 1px solid var(--border);
    font-size: 1.0625rem; min-height: 44px; display: flex; align-items: center;
  }
  .nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--terracotta); }
  .nav .btn { margin: var(--s5) 0 0; width: 100%; }
  .site-header { position: relative; }
  .header-inner { position: relative; min-height: 60px; }
}

@media (max-width: 34rem) {          /* 390-class phones */
  /* The wordmark is a logotype, so it is capped against viewport width rather
     than left to scale with the root font. The vw values equal the rem values
     at a 320px viewport, so nothing changes at default text size; they only
     take effect once the reader enlarges text on a narrow screen, where an
     uncapped wordmark would push the header wider than the page. */
  .site-header .wordmark-lockup .name b { font-size: min(1.375rem, 6.875vw); }
  .site-header .wordmark-lockup .name span { font-size: min(0.625rem, 3.125vw); }
  .header-inner { gap: var(--s3); padding-block: var(--s2); }

  .footer-grid > * { grid-column: 1 / -1 !important; }
  .step, .process.cols-3 > .step { grid-column: 1 / -1; }
  .btn-row .btn { width: 100%; }
  .legal { flex-direction: column; gap: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  /* Belt and braces: the script already skips reveals, but if the preference
     changes after load nothing may be left sitting at zero opacity. */
  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .btn-row, .skip, .cta-dock, .proof-band { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Components added in the rebuild
   ========================================================================== */

/* ---------- Belis B signature mark --------------------------------------- */

/* The B mark and the wordmark are separate expressions of the identity and
   are never locked up together. The mark is used as the favicon. */

.wordmark-lockup { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.wordmark-lockup .name { display: flex; flex-direction: column; line-height: 1; }
.wordmark-lockup .name b {
  font-family: var(--serif); font-weight: 600; font-size: 1.375rem;
  color: var(--ink); letter-spacing: -0.01em;
}
.wordmark-lockup .name span {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--body-2); margin-top: 5px;
}
.site-footer .wordmark-lockup .name b { font-size: 1.5rem; }
.site-footer .wordmark-lockup .name b { color: var(--white); }
.site-footer .wordmark-lockup .name span { color: var(--on-ink-2); }

/* ---------- Breadcrumb ---------------------------------------------------- */

.breadcrumb {
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--body-2); margin: 0 0 var(--s5); display: flex; flex-wrap: wrap; gap: .5rem;
}
.breadcrumb a { color: var(--body-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span[aria-hidden] { color: var(--terracotta); }
.on-ink .breadcrumb, .section-ink .breadcrumb { color: var(--on-ink-2); }
.section-ink .breadcrumb a { color: var(--on-ink-2); }
.section-ink .breadcrumb a:hover { color: var(--white); }

/* ---------- Client logo lockups ------------------------------------------ */

/* A fixed box so logos of different proportions share one footprint. */
.logo-slot { display: flex; align-items: center; height: 84px; }
.client-logo { display: block; width: auto; height: auto; max-height: 100%; object-fit: contain; }
.client-logo-lg { max-width: 300px; }

/* ---------- Figures and evidence ----------------------------------------- */

figure { margin: 0; }
.fig-frame {
  background: var(--ivory); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.fig-frame img { width: 100%; height: auto; display: block; }

/* Photographs fill the frame; document scans are letterboxed so no page
   content is cropped. Both share one ratio. */
.evidence .fig-frame.photo { padding: 0; aspect-ratio: 16 / 10; }
.evidence .fig-frame.photo img {
  width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover;
}
.evidence .fig-frame {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: clamp(.75rem, 1.6vw, 1.25rem);
}
.evidence .fig-frame img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
figcaption {
  font-size: var(--t-label); letter-spacing: .06em; color: var(--body-2);
  margin-top: var(--s3); line-height: 1.5; text-transform: none;
}
.section-ink figcaption { color: var(--on-ink-2); }

.evidence { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s6); }
.evidence > figure { grid-column: span 4; }
.evidence > figure.wide { grid-column: span 6; }
.evidence > figure.full { grid-column: 1 / -1; }

/* ---------- Case study --------------------------------------------------- */

.case-lede { font-size: var(--t-lede); line-height: 1.45; color: var(--body); max-width: 56ch; }
.status-line {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--charcoal); border: 1px solid var(--border); border-radius: var(--r);
  padding: .3rem .55rem;
}
.status-line::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }

/* ---------- Workstream map / timeline ------------------------------------ */

.streams { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s5); }
.stream { grid-column: span 4; border-top: 2px solid var(--terracotta); padding-top: var(--s4); }
.stream-title {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; color: var(--ink);
  margin: 0 0 var(--s3); letter-spacing: .01em;
}
.stream ul { list-style: none; margin: 0; padding: 0; }
.stream li { font-size: var(--t-sm); color: var(--body-2); padding: .22rem 0; }
.section-ink .stream-title { color: var(--white); }
.section-ink .stream li { color: var(--on-ink-2); }
.section-ink .stream { border-top-color: var(--terra-lift); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--border); align-items: baseline;
}
.timeline li:first-child { border-top: 1px solid var(--border); }
.timeline .phase {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--terra-text);
}
.timeline p { margin: 0; font-size: var(--t-sm); color: var(--body-2); }
.timeline strong { color: var(--ink); font-weight: 700; display: block; margin-bottom: .15rem; font-size: var(--t-body); }

/* ---------- Fit / qualification panel ------------------------------------ */

.fit-note {
  border-left: 2px solid var(--terracotta); padding-left: var(--s4);
  font-size: var(--t-sm); color: var(--body-2); max-width: 60ch;
}

/* ---------- Pricing panel ------------------------------------------------- */

.price-panel { border: 1px solid var(--border); border-radius: var(--r); padding: clamp(1.5rem,3vw,2.5rem); background: var(--ivory); }
.price-panel .figure-lg {
  font-family: var(--serif); font-size: clamp(2rem,1.5rem+1.8vw,3rem); color: var(--ink);
  line-height: 1; display: block; margin-bottom: var(--s3);
}

/* ---------- Tabs (advertiser / host enquiry) ------------------------------ */

.tabs { display: flex; gap: var(--s2); border-bottom: 1px solid var(--border); margin-bottom: var(--s6); flex-wrap: wrap; }
.tabs button {
  font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: var(--s3) var(--s2); color: var(--body-2); margin-bottom: -1px; min-height: 44px;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--terracotta); }
.tabs button:hover { color: var(--ink); }
.tabpanel[hidden] { display: none; }

/* ---------- Responsive additions ------------------------------------------ */

@media (max-width: 64rem) {
  .stream { grid-column: span 6; }
  .evidence > figure { grid-column: span 6; }
}
@media (max-width: 48rem) {
  .evidence > figure, .evidence > figure.wide { grid-column: 1 / -1; }
  .stream { grid-column: 1 / -1; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
}

/* ---------- Paired portraits (two owners, one hero) ---------------------- */

.portrait-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
.portrait-pair .fig-frame { aspect-ratio: 4 / 5; }
.portrait-pair .fig-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }


/* ==========================================================================
   Homepage. Scoped to body.home so the other eleven pages are untouched.
   The point of this block is section rhythm, not decoration: blocks run to
   the browser edge, alternate hard between ivory and navy, and sit at
   deliberately unequal heights.
   ========================================================================== */

.home .hero {
  min-height: 92svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(7rem, 14vw, 11rem) clamp(2rem, 4vw, 3.5rem);
}
.home .hero h1 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.75rem, 7.6vw, 6.5rem);
  line-height: .9; letter-spacing: -.045em;
  color: var(--ink); max-width: 15ch; margin: 0;
}
.home .hero-rule { height: 2px; background: var(--ink); margin: clamp(2rem,4.5vw,3.5rem) 0 clamp(1.25rem,2.5vw,2rem); }
.home .hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem 3rem; align-items: end; }
.home .hero-foot .lede { max-width: 46ch; margin: 0; }
@media (max-width: 44rem) { .home .hero-foot { grid-template-columns: minmax(0, 1fr); } }

/* Full-bleed bands. No page margin is the clearest signal a page was designed. */
.home .band { padding-block: clamp(4.5rem, 10vw, 9rem); }
.home .band-tall { padding-block: clamp(6rem, 14vw, 12rem); }
.home .band-short { padding-block: clamp(3rem, 6vw, 5rem); }

/* Figures, on navy, at display scale. */
.home .fig-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); margin-top: clamp(2rem,4vw,3.25rem); }
.home .fig-row .fig {
  font-family: var(--sans); font-weight: 800; color: var(--white);
  /* Capped against viewport width as well as text size. The vw term does not
     bind at the default text size, only when a reader enlarges text on a narrow
     screen, where 2.75rem becomes 88px and "$100M+" no longer fits. */
  font-size: min(clamp(2.75rem, 6.4vw, 5.5rem), 14vw); line-height: .85; letter-spacing: -.05em;
  display: block; margin: 0 0 .875rem;
}
.home .fig-row p { font-size: var(--t-sm); color: var(--on-ink-2); margin: 0; max-width: 22ch; }
@media (max-width: 44rem) { .home .fig-row { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* Situations become numbered rows with a spine, not four equal boxes. */
.home .ledger { border-top: 1px solid var(--border); }
.home .ledger-row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--border);
  align-items: start;
}
.home .ledger-row .idx { font-family: var(--sans); font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; color: var(--terracotta); padding-top: .35rem; }
.home .ledger-row h3 { margin: 0; }
.home .ledger-row p { margin: 0; font-size: var(--t-sm); color: var(--body-2); }
@media (max-width: 52rem) {
  .home .ledger-row { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .5rem 1rem; }
  .home .ledger-row p { grid-column: 2; }
}

/* Services as edge-to-edge cells, flagship inverted. */
.home .cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-block: 1px solid var(--border); }
.home .cell { background: var(--white); padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; }
.home .cell.is-flagship { background: var(--ink); }
.home .cell.is-flagship h3 { color: var(--white); }
.home .cell.is-flagship p { color: var(--on-ink-2); }
.home .cell.is-flagship .link { color: var(--terra-lift); }
.home .cell.is-flagship .link:hover { color: var(--white); }
.home .cell p { font-size: var(--t-sm); color: var(--body-2); }
.home .cell .link { margin-top: auto; padding-top: var(--s5); }
@media (max-width: 52rem) { .home .cells { grid-template-columns: minmax(0, 1fr); } }

/* Process: ghost numerals, on navy. */
.home .stepline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem,3vw,2.5rem); }
.home .stepline .n {
  font-family: var(--sans); font-weight: 800; font-size: clamp(2.25rem,4.2vw,3.75rem);
  line-height: 1; letter-spacing: -.04em; color: #6B7A88; display: block; margin-bottom: .875rem;
}
.home .stepline h3 { color: var(--white); }
.home .stepline p { font-size: var(--t-sm); color: var(--on-ink-2); margin: 0; }
@media (max-width: 52rem) { .home .stepline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 34rem) { .home .stepline { grid-template-columns: minmax(0, 1fr); } }

/* Shared lead pattern: tight label column, wide prose column. */
.home .lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: start; }
.home .lead > *:first-child { position: sticky; top: 6rem; }
@media (max-width: 52rem) {
  .home .lead { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .home .lead > *:first-child { position: static; }
}
.home .lead h2 { margin: 0; }
.home .head-block { max-width: 34ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.home .head-block .lede { margin: 1.25rem 0 0; max-width: 46ch; color: var(--body-2); }

/* Headings follow the hero into Manrope. A Manrope 800 hero above Lora 500
   headings reads as two unrelated pages stacked together. */
/* One type system across all twelve pages. A Manrope 800 homepage sitting in
   front of ten Lora 500 pages reads as two different websites behind one nav. */
h1, h2, h3 { font-family: var(--sans); }
h1 { font-weight: 800; line-height: .92; letter-spacing: -.04em; }
h2 {
  font-weight: 800; font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: .98; letter-spacing: -.035em;
}
h3 {
  font-weight: 700; font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.18; letter-spacing: -.02em;
}
.hero h1 { line-height: .9; letter-spacing: -.045em; }
/* Numerals follow the headings so figures do not stay serif on a sans page. */
.metric .fig, .figure-lg { font-family: var(--sans); font-weight: 800; letter-spacing: -.04em; }

/* The hero .wrap is a flex item in a column flex container, so it was sizing to
   its content instead of stretching, landing 10px right of every other section
   on the page. Alignment is the whole point of a single grid. */
.home .hero > .wrap { width: 100%; }

/* A 52px heading is right for a full-measure section and far too wide for a
   four-column lead, where "Communications" cannot fit and breaks inside itself.
   Headings sitting in a narrow column get their own step on the scale. */
.entry-top h2, .case-head h2, .split-lead h2, .lead h2, .svc h3, .work-card h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.02; letter-spacing: -.03em;
}
.entry-top h3, .case-head h3 { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); }

/* "Communications" is the longest word on the site and it sets the floor for
   how narrow a container holding a heading can be. Two containers were below it. */
.home .head-block { max-width: 32rem; }
.split-lead h1, .entry-top h1 { font-size: clamp(2rem, 5vw, 4.5rem); }

/* ---------- Vertical rhythm ------------------------------------------------
   The homepage was running 144-192px section padding while every other page ran
   45px, so the two halves of the site breathed completely differently. One
   scale now, three steps, tightened at the top end.
   -------------------------------------------------------------------------- */
.home .band       { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.home .band-tall  { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.home .band-short { padding-block: clamp(2rem, 3.5vw, 3.25rem); }
.home .hero       { padding-block: clamp(6rem, 11vw, 8.5rem) clamp(1.75rem, 3vw, 2.75rem); }

/* ---------- Column alignment inside an entry --------------------------------
   .entry-top split 4/8 so its right column began at x=544, while the .cols
   lists directly beneath split 6/6 and began at x=732. Inside a single article
   that 188px step reads as a mistake, because it is one.
   -------------------------------------------------------------------------- */
/* Scoped above the stacking breakpoint. Appended after the mobile rule, an
   unscoped version outranks it and forces six-column headings onto a phone. */
@media (min-width: 64.0625rem) {
  .entry-top > *:nth-child(1) { grid-column: 1 / span 6; }
  .entry-top > *:nth-child(2) { grid-column: 7 / span 6; }
}

/* ---------- Interior page heroes -------------------------------------------
   Every interior page opened with a huge headline on the left and an unrelated
   paragraph floated to its right at a different size, so the eye had to choose
   between two competing starting points. They now open the way the homepage
   does: one headline across the measure, one supporting line beneath it.
   -------------------------------------------------------------------------- */
.hero .split-lead > *:nth-child(n) { grid-column: 1 / -1; }
.hero .split-lead > * + * { padding-top: 0 !important; }
.hero .split-lead > *:nth-child(2) { max-width: 58ch; margin-top: var(--s5); }
.hero .split-lead .lede { max-width: none; }

/* A fixed 2.75rem index column becomes 88px at 200% text and leaves too little
   for the heading beside it. Below the stacking breakpoint the number sits on
   its own line, so there is no fixed column left to overflow. */
@media (max-width: 52rem) {
  .home .ledger-row { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .home .ledger-row .idx { padding-top: 0; }
  .home .ledger-row p { grid-column: 1; }
}

/* 1fr carries a min-content floor, so these tracks could not shrink below the
   widest thing inside them. At 200% text a cell's own padding was 56px a side
   and the flagship label 274px, giving a 386px floor on a 320px screen.
   minmax(0,1fr) removes the floor; the vw caps stop padding and labels growing
   without limit. Neither vw term binds at the default text size. */
.home .cells    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home .fig-row  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home .stepline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home .cell     { padding: min(clamp(1.75rem, 3vw, 2.75rem), 9vw); }
.home .cell .flag, .home .cell .flagtag { overflow-wrap: anywhere; max-width: 100%; }

@media (max-width: 52rem) {
  .home .cells    { grid-template-columns: minmax(0, 1fr); }
  .home .stepline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .home .fig-row  { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 34rem) {
  .home .stepline { grid-template-columns: minmax(0, 1fr); }
}

/* The eyebrow is a long uppercase string with 0.16em tracking. At 200% text it
   was wider than a phone and its container had no room to give. Capped against
   viewport width, and allowed to break rather than push the page. */
.label { overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 34rem) {
  .label { font-size: min(var(--t-label), 4vw); }
}

/* A label 32px below the previous block and 20px above its own content reads as
   belonging to the block above it. Separation between blocks now clearly
   exceeds separation within one. */
.spec-title + .spec > p:first-child,
.spec-title + .spec > ul:first-child { margin-top: 0; }
.spec > p:last-child { margin-bottom: 0; }

/* ---------- Dark sections: one authoritative colour rule ------------------
   Every light-background text token that leaked into a navy section rendered
   at roughly 2.6:1. Rather than chase each rule, anything textual inside a
   dark section is claimed here. Doubling the class raises specificity above
   the component rules that set --body / --body-2 / --charcoal.
   ------------------------------------------------------------------------- */
.section-ink.section-ink :is(p, li, dd, dt, figcaption, blockquote,
  .sm, .meta, .role, .close, .statement, .fit-note, .metrics-note,
  .spec-title, .tag, .price-note, .stream-title, .phase, .status-line),
.on-ink.on-ink :is(p, li, dd, dt, figcaption, blockquote,
  .sm, .meta, .role, .close, .statement, .fit-note, .metrics-note,
  .spec-title, .tag, .price-note, .stream-title, .phase, .status-line) {
  color: var(--on-ink-2);
}
.section-ink.section-ink :is(h1, h2, h3, h4, strong, b),
.on-ink.on-ink :is(h1, h2, h3, h4, strong, b) { color: var(--on-ink); }
.section-ink.section-ink :is(.label, .flag, .flagtag),
.on-ink.on-ink :is(.label, .flag, .flagtag) { color: var(--terra-lift); }
.section-ink.section-ink :is(a:not(.btn)),
.on-ink.on-ink :is(a:not(.btn)) { color: var(--terra-lift); }
.section-ink.section-ink .tag, .on-ink.on-ink .tag { border-color: rgba(230, 236, 242, .35); }
.section-ink.section-ink hr, .on-ink.on-ink hr,
.section-ink.section-ink .spec-title, .on-ink.on-ink .spec-title { border-color: rgba(230, 236, 242, .25); }

/* ---------- Accent placement ----------------------------------------------
   Emerald was doing nothing but buttons and mint appeared once or twice per
   page, so neither read as part of a system. Three jobs, each verified above a
   7:1 bar for small text rather than the 4.5:1 minimum.
   ------------------------------------------------------------------------- */

/* 1. Section eyebrows carry the accent on every page. 7.70:1 on the band. */
.label { color: var(--terra-text); }
.section-ink.section-ink .label, .on-ink.on-ink .label { color: var(--terra-lift); }

/* 3. The large figures are the one place mint has room to work. 7.63:1. */
.home .fig-row .fig, .metric .fig { color: var(--terra-lift); }

/* 5. The flagship cell is a block of colour justified by meaning. Darker than
      the button fill so its body copy clears 7:1 rather than 5.4:1. */
.home .cell.is-flagship { background: #17553E; }
.home .cell.is-flagship h3,
.home .cell.is-flagship .flagtag { color: #FFFFFF; }
.home .cell.is-flagship p { color: #DCEFE6; }
.home .cell.is-flagship .link { color: #C8EFDF; }
.home .cell.is-flagship .link:hover { color: #FFFFFF; }