/* ==========================================================================
   BRILLIΛNTZ: Components
   Header, campaign hero, Home sections, footer.
   ========================================================================== */

/* ==========================================================================
   HEADER (UI Spec s.6)
   ========================================================================== */
/* Stack: header-bg (50) < hero artwork (101) < navigation (120).
   Both layers are fixed to the viewport so the header stays pinned to the
   top of the page while scrolling; main is padded by --header-h below to
   compensate for taking the header out of document flow. */
.header-bg {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--c-warm-white);
  border-bottom: 1px solid var(--c-rule-soft);
  z-index: 50;
  pointer-events: none;
}
.site-header { background: transparent; position: fixed; top: 0; left: 0; right: 0; z-index: 120; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-32);
  min-height: var(--header-h);
}

/* Wordmark is the supplied SVG, inlined so it inherits colour.
   Spec s.3: no descriptor or tagline locked to the logo. */
.wordmark { display: block; color: var(--c-ink); }
.wordmark svg { width: clamp(132px, 12vw, 168px); height: auto; fill: currentColor; }

.nav { display: flex; align-items: center; gap: var(--s-32); }
.nav__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-small);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: var(--s-12);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__link:hover { border-bottom-color: var(--c-ink); }

.nav__cta { padding: 14px 22px; min-height: 44px; }

.nav-toggle { display: none; background: none; border: 0; padding: var(--s-12); cursor: pointer; }
.nav-toggle__bar { display: block; width: 24px; height: 2px; background: var(--c-ink); margin: 5px 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-toggle { display: block; }
  /* Full-sheet menu, not a tiny dropdown (UI Spec s.6) */
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--c-warm-white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-32);
    padding: var(--gutter);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav[data-open="true"] { transform: translateY(0); visibility: visible; }
  .nav__link { font-family: var(--font-display); font-size: var(--t-h3); border-bottom: 0; }
}

/* ==========================================================================
   CAMPAIGN HERO (UI Spec s.7.1)
   Full-bleed colour field. Text columns 1-5, object zone 6-12.
   ========================================================================== */
.hero { position: relative; background: var(--c-yellow); color: var(--c-ink); overflow: visible; }
/* The colour field still ends at the hero's edge; only artwork may break out. */
.hero::before { content: ""; position: absolute; inset: 0; background: inherit; z-index: 0; }
.hero > * { position: relative; }
.hero__viewport { overflow: visible; }
.hero[data-text="light"] { color: var(--c-ivory); }

.hero__viewport { position: relative; }

.hero__slide {
  display: none;
  padding-block: clamp(64px, 7vw, 104px);
}
.hero__slide[data-active="true"] { display: block; }
/* No slide-level clip: it cuts at the controls band, 104px above the hero's
   real lower edge, which sliced the cup bases. Slides 02 and 03 are sized to
   sit inside the hero, so nothing needs clipping here. */
.hero__slide { position: relative; }

/* ==========================================================================
   DIRECTIONAL BLEED ARTWORK (Hero 04)
   The flame runs right to left and the torch is meant to originate outside
   the viewport, so this slide's artwork is not confined to the right-hand
   object cell. It becomes a full-bleed layer behind the copy.
   Layering: field 0, artwork 1, copy 2, controls 3.
   overflow stays visible on the art wrapper so the PNG's own alpha fade is
   never clipped into a rectangle.
   ========================================================================== */
/* Directional slide. The artwork sits in a clip window spanning the hero's
   own top and bottom edges, so the flame terminates flush at the top rather
   than running up into the header, and the cupcake can sit near the base. */
.hero__slide[data-bleed="true"] .hero__object {
  position: absolute;
  top: 0;
  bottom: calc(var(--hero-controls-zone, 104px) * -1);
  left: 0; right: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.hero__slide[data-bleed="true"] .hero__object-img {
  position: absolute;
  top: var(--hero-art-top, 0px);
  right: var(--hero-art-right, 0%);
  left: auto;
  transform: none;
  width: var(--hero-art-width, 108%);
  max-width: none;
  max-height: none;
  margin: 0;
}
/* Copy sits above the artwork. The flame may cross behind it, never over it. */
/* Below 1280 the flame no longer reaches above the hero, so it would
   terminate against the left viewport edge. Lifting and widening it keeps the
   approved geometry: the flame exits through the TOP boundary. */
@media (min-width: 900px) and (max-width: 1279px) {
  .hero__slide[data-bleed="true"] .hero__object-img {
    width: 124%;
    top: 30%;
  }
}

.hero__slide[data-bleed="true"] .hero__text { position: relative; z-index: 3; }
/* The flame's bright core can cross directly behind "CEO" and the quote
   (by design -- copy sits over the artwork, not the other way round), but
   with nothing behind the copy itself that crossing faded them to
   near-illegibility. A soft scrim in the slide's own field colour (kept in
   sync with the active campaign via --hero-field-color) sits behind the
   text and above the artwork so the copy stays readable no matter where
   the flame happens to land. */
.hero__slide[data-bleed="true"] .hero__text::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px -28px;
  background: linear-gradient(
    100deg,
    var(--hero-field-color, var(--c-field-red)) 62%,
    color-mix(in srgb, var(--hero-field-color, var(--c-field-red)) 40%, transparent) 88%,
    transparent 100%
  );
  pointer-events: none;
}
.hero__controls-wrap { z-index: 4; }

/* ==========================================================================
   HERO 04 ENVIRONMENTAL LIGHTING
   The field stays a flat colour. Depth comes from broad, low-opacity light
   layers sitting BEHIND the transparent artwork, never baked into the PNG.
   Layering: field 0, lighting 1, artwork 2, copy 3, controls 4.
   ========================================================================== */

/* Primary fire glow: broad warm illumination centred on the body of the
   flame, falling off into the deep red. */
.hero__slide[data-bleed="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 36% at 62% 40%,
      var(--c-glow-warm) 0%,
      var(--c-glow-warm-mid) 38%,
      transparent 72%);
}

/* Reflected light pooling on the field around the cupcake, so the flame
   reads as lighting the environment rather than the cupcake glowing. */
.hero__slide[data-bleed="true"]::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 30%;
  height: 20%;
  left: 54%;
  bottom: 4%;
  pointer-events: none;
  background:
    radial-gradient(ellipse,
      var(--c-glow-pool) 0%,
      var(--c-glow-pool-mid) 45%,
      transparent 72%);
  filter: blur(20px);
}

/* Artwork sits above the lighting. Grounding shadow stops the cupcake
   reading as a floating cutout; the warm second shadow ties it to the fire.
   Restrained on purpose: no visible oval. */
.hero__slide[data-bleed="true"] .hero__object-img {
  z-index: 2;
  filter:
    drop-shadow(0 20px 18px var(--c-shadow-ground))
    drop-shadow(0 0 22px var(--c-shadow-warm));
}

/* Cool bloom immediately around the blue-white core at the nozzle only.
   Creates temperature contrast against the red; never a halo on the whole
   flame. */
.hero__slide[data-bleed="true"] .hero__object::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 13%;
  height: 16%;
  left: 78%;
  top: 38%;
  pointer-events: none;
  background:
    radial-gradient(circle,
      var(--c-glow-cool) 0%,
      var(--c-glow-cool-mid) 45%,
      transparent 70%);
  filter: blur(14px);
}

.hero__grid { align-items: center; row-gap: var(--s-48); }

.hero__text { grid-column: 1 / span 5; }
/* Object starts a column earlier and runs to the edge so it overlaps the
   headline's air and reads as one composition. UI Spec s.15 allows a campaign
   object to extend beyond its nominal columns. */
.hero__object { grid-column: 6 / span 7; }

.hero__count {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  opacity: 0.7;
  margin: 0 0 var(--s-24);
}

.hero__headline {
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 14ch;
}

/* AI slide: quote sits above the headline (Production Spec s.9) */
.hero__quote {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-16);
  opacity: 0.85;
}
.hero__attrib {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 var(--s-32);
}

/* Supporting line. General Sans, deliberately quiet so it never competes
   with the Newsreader headline. Same foreground colour, slightly reduced
   opacity for hierarchy. */
.hero__subline {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  max-width: 400px;
  margin: 26px 0 0;
  opacity: 0.8;
}
@media (max-width: 767px) {
  .hero__subline { font-size: 17px; margin-top: 20px; max-width: 34ch; }
}

.hero__cta { margin-top: var(--s-32); }

/* PLACEHOLDER object container.
   Final campaign objects are isolated product/object photography on the
   colour field. These containers are deliberately neutral and labelled so
   they can be swapped without touching the component. */
/* Real campaign object. Shares the placeholder's footprint so swapping one
   for the other does not shift the composition. Objects are isolated on
   transparency; the colour field behind them is CSS, never baked in. */
.hero__object-img {
  /* Isolated object composed directly on the colour field. No container,
     no rectangle. Pulled left so it sits into the headline's negative space. */
  /* Object column spans 6-12 (755px at 1440). Width 128% with a matching
     negative offset pushes the object ~211px LEFT into the headline's air
     while its right edge stays flush with the container. It crosses the grid
     boundary without ever clipping off-screen. */
  /* Sized per slide via --hero-image-w / -x / -y set on the element by
     hero.js. Assets differ in aspect and ink density, so one object-fit rule
     gives inconsistent optical scale between campaigns. */
  width: var(--hero-image-w, 128%);
  max-width: var(--hero-image-w, 128%);
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  margin-left: var(--hero-image-x, -28%);
  transform: translateY(var(--hero-image-y, 0));
  /* Decorative. Without this the lifted Hero 01 artwork sits at z-index 101
     over the carousel controls and swallows their clicks. */
  pointer-events: none;
}

/* HERO 01 fills the field. The composition runs from the top edge of the
   yellow band to below its lower edge, cropping naturally at the bottom, so
   the puppies read at full scale rather than as an inset picture. */
@media (min-width: 900px) {
  .hero__slide[data-fill="true"] { overflow: visible; }
  .hero__slide[data-fill="true"] .hero__object {
    position: absolute;
    top: calc(var(--hero-overlap, 36px) * -1);   /* rises into the header */
    bottom: calc(var(--hero-controls-zone, 104px) * -1);  /* crops at the hero's base */
    /* Anchored to the viewport edge. Pushing the wrapper itself past the edge
       inflates the document's scroll width: overflow-x: clip hides the
       scrollbar but the box still extends, which full-page capture reveals.
       The offset is applied to the image inside the clip instead. */
    right: 0;
    width: var(--hero-image-w, 97%);
    overflow: hidden;
    z-index: 101;
    /* Decorative wrapper. It extends over the controls band, so without this
       it swallows the carousel buttons. */
    pointer-events: none;
  }
  .hero__slide[data-fill="true"] .hero__object-img {
    position: absolute;
    top: 0;
    left: var(--hero-fill-shift, 12%);
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
  }
}
@media (max-width: 899px) {
  /* Hero 01 only. The shared mobile rule leaves the puppies small with a lot
     of empty yellow; enlarging it globally cropped the cups and the hamster
     on both edges, so this is scoped to the fill slide.
     The asset carries ~40% transparent margin, so the image box has to run
     past the viewport for the puppies to fill it. The object spans the
     gutters and clips, which keeps that overflow off the page box: without
     it the document paints ~78px wider than the viewport. */
  .hero__slide[data-fill="true"] .hero__object {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    overflow: hidden;
  }
  .hero__slide[data-fill="true"] .hero__object-img {
    margin-top: 0;
    width: 160%;
    max-width: 160%;
    margin-left: -37%;
    max-height: 50vh;
  }
}
}
@media (min-width: 900px) and (max-width: 1279px) {
  .hero__object-img {
    width: calc(var(--hero-image-w, 128%) * 0.92);
    max-width: calc(var(--hero-image-w, 128%) * 0.92);
    margin-left: calc(var(--hero-image-x, -28%) * 0.5);
  }
}
@media (max-width: 899px) {
  .hero__object-img {
    width: 112%; max-width: 112%; margin-left: -6%; max-height: 42vh;
  }
}
@media (max-width: 767px) {
  /* Mobile recomposes: headline and subline first, object large beneath. */
  .hero__object-img {
    width: 112%;
    max-width: 112%;
    margin-left: -6%;
    max-height: 42vh;
  }

  /* Hero 04 on mobile: the portrait composition runs full bleed behind the
     copy rather than sitting beneath it. Stacking it made the hero 364px
     taller than the other slides and pushed the cupcake off the fold.
     The artwork is 2:3 and the mobile hero is close to it, so cover crops
     only a sliver. */
  .hero__slide[data-bleed="true"] {
    position: relative;
    /* px floor: 72vh alone collapses on short phones, leaving the hero
       shorter than the artwork so the controls land on the cupcake. */
    min-height: var(--hero-bleed-min, max(72vh, 620px));
  }
  /* Anchored to the base of the hero at its natural aspect rather than
     object-fit: cover. Cover always fills, which pinned the cupcake to the
     hero's lower edge with the carousel controls sitting on top of it.
     This leaves clear red beneath the cupcake for the controls. */
  .hero__slide[data-bleed="true"] .hero__object {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    height: auto;
    width: var(--hero-bleed-w, 103%);
    overflow: visible;
    z-index: 0;
    pointer-events: none;
  }
  .hero__slide[data-bleed="true"] .hero__picture {
    display: block;
    position: static;
  }
  .hero__slide[data-bleed="true"] .hero__object-img {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    object-fit: contain;
  }
  /* Copy sits over the artwork. Only .hero__text is positioned: making the
     grid a containing block traps the absolute artwork inside the copy box. */
  .hero__slide[data-bleed="true"] .hero__text { position: relative; z-index: 3; }
  /* Wrapped short of the candle. Measured across phone sizes, the solid
     subject enters the subline's band at a consistent 54% of the viewport;
     run full width the copy crosses it. */
  .hero__slide[data-bleed="true"] .hero__subline { max-width: 50%; }

}

.hero__object-placeholder {
  aspect-ratio: 4 / 3;
  border: 1px dashed currentColor;
  opacity: 0.4;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-24);
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* Controls align to the global grid at the lower edge (UI Spec s.7.1) */
.hero__controls {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding-bottom: var(--s-48);
}

/* ==========================================================================
   DESKTOP HERO HEIGHT
   Fixed, bounded height so the header, the whole hero, the carousel controls
   and the top of the next section all fit a normal 1440x900 browser window.
   Deliberately not 100vh and not calc(100vh - header): a viewport-locked hero
   grows unusable on tall monitors and collapses on short ones. The clamp caps
   it on large displays instead.
   Mobile is untouched and keeps the flow layout below.
   ========================================================================== */
@media (min-width: 900px) {
  .hero {
    height: clamp(600px, 72vh, 760px);
  }

  /* Composition occupies everything above the controls and is centred in it,
     so reducing hero height removes dead space rather than shrinking the
     object. */
  .hero__viewport {
    position: absolute;
    inset: 0 0 var(--hero-controls-zone, 104px) 0;
  }
  .hero__slide { height: 100%; padding-block: 0; }
  .hero__slide[data-active="true"] { display: grid; align-items: center; }
  .hero__slide > .container { width: 100%; }

  /* Object stays large: it fills the available band rather than being scaled
     down with the section. */
  .hero__object-img {
    /* Per-slide band override where an asset needs more of the vertical
       space; falls back to the shared value. */
    max-height: var(--hero-max-h, calc(clamp(600px, 72vh, 760px) - var(--hero-controls-zone, 104px) - 48px));
    /* Object is vertically centred in the band by the slide grid. */
    align-self: center;
  }

  /* Controls anchored ~36px from the hero's bottom edge. */
  .hero__controls-wrap {
    position: absolute;
    left: 0; right: 0; bottom: 36px;
  }
  .hero__controls { padding-bottom: 0; }
}
.hero__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hero__btn:hover { background: var(--c-ink); color: var(--c-warm-white); }
.hero[data-text="light"] .hero__btn:hover { background: var(--c-warm-white); color: var(--c-ink); }

.hero__dots { display: flex; gap: var(--s-8); margin-left: var(--s-8); align-items: center; }
.hero__dot {
  /* 4px visual, 44px hit area. Padding carries the target; background-clip
     keeps the mark itself thin. */
  width: 30px; height: 4px;
  box-sizing: content-box;
  border: 0;
  padding: 20px 0;
  background: currentColor;
  background-clip: content-box;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.hero__dot[aria-current="true"] { opacity: 1; }

/* Laptop widths keep the copy-left / visual-right composition. Previously
   these stacked at 1279 while the hero kept its fixed height, so the object
   ran past the controls and got clipped. Stacking now starts below 900. */
@media (min-width: 900px) and (max-width: 1279px) {
  .hero__text   { grid-column: 1 / span 3; }
  .hero__object { grid-column: 4 / span 5; }
}
@media (max-width: 899px) {
  .hero__text   { grid-column: 1 / -1; }
  .hero__object { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  /* Recompose rather than stack: headline first, object large beneath it. */
  .hero__text   { grid-column: 1 / -1; }
  .hero__object { grid-column: 1 / -1; }
  .hero__headline { max-width: none; }
  .hero__controls { padding-bottom: var(--s-32); }
}

/* ==========================================================================
   INTRODUCTION (UI Spec s.7.2): H2 cols 1-5, body cols 7-11
   ========================================================================== */
.intro__head { grid-column: 1 / span 5; }
.intro__body { grid-column: 7 / span 5; }
.intro__body p + p { margin-top: var(--s-16); }
.intro__cta { margin-top: var(--s-32); }

@media (max-width: 1279px) {
  .intro__head { grid-column: 1 / span 8; margin-bottom: var(--s-32); }
  .intro__body { grid-column: 1 / span 8; }
}
@media (max-width: 767px) {
  .intro__head, .intro__body { grid-column: 1 / -1; }
}

/* ==========================================================================
   FOLLOW THE PROBLEM
   Four typographic stations joined by one wandering red line. The line is
   inline SVG with a non-scaling stroke, so stretching the viewBox to the
   container never thickens or thins it.
   ========================================================================== */
.lede--strong { font-weight: 500; color: var(--c-ink); }

.trail { position: relative; margin-top: clamp(56px, 6vw, 88px); }

.trail__line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.trail__line path {
  fill: none;
  stroke: var(--c-brilliantz-red, #C8102E);
  stroke-width: 1.7;
  stroke-linecap: round;
}


/* Draw-on, once, on first scroll into view. */
.trail__line path { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); }
.trail[data-drawn="true"] .trail__line path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1350ms cubic-bezier(.4,0,.2,1);
}

.trail__stations {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-32);
  position: relative; z-index: 1;
  min-height: 196px;
}
.trail__station { align-self: start; }

/* Nodes sit on the curve beneath each observation. Positioned by JS so they
   track the path exactly at any width. */
.trail__node {
  position: absolute;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;      /* centre on the computed point */
  border-radius: 50%;
  background: var(--c-brilliantz-red, #C8102E);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.trail[data-drawn="true"] .trail__node {
  opacity: 1;
  transition: opacity 320ms ease 900ms;   /* appear once the line has drawn */
}
/* Gentle stagger. The line threads beneath the text, never through it. */
.trail__station:nth-child(2) { margin-top: 44px; }
.trail__station:nth-child(3) { margin-top: 14px; }
.trail__station:nth-child(4) { margin-top: 56px; }

.trail__station b {
  display: block;
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--c-ink-60);
  margin-bottom: var(--s-8);
}
.trail__station span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.25; letter-spacing: -.02em;
  max-width: 20ch;
}

/* The pattern break. */
.trail__end {
  position: relative; z-index: 1;
  margin: var(--s-24) 0 0; text-align: right;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(21px, 2vw, 30px); letter-spacing: -.02em;
}
.trail__end::after {
  content: ""; display: block; margin: var(--s-12) 0 0 auto;
  width: 132px; height: 2px; background: var(--c-brilliantz-red, #C8102E);
}

/* Between 900 and 1279 the four-column curve still works, so it is kept
   rather than leaving a band with no connective line at all. Below 900 the
   vertical rule takes over, matching the hero's own breakpoint. */
@media (min-width: 900px) and (max-width: 1279px) {
  .trail__stations { column-gap: var(--s-24); }
  .trail__station span { font-size: clamp(17px, 1.9vw, 21px); }
}

/* ==========================================================================
   MOBILE: no squashed curve. A quiet vertical editorial rule with small
   connection marks, all typography kept to the right of it so the line can
   never cross text. Starts at 900 so it meets the curve with no gap.
   ========================================================================== */
@media (max-width: 899px) {
  .trail__line--wide { display: none; }
  .trail__node { display: none; }

  /* Reads as one compact unfolding chain rather than four separated blocks.
     All copy preserved; only the spacing between links is tightened. */
  .trail { margin-top: clamp(32px, 7vw, 48px); }
  .trail__stations {
    grid-template-columns: 1fr;
    row-gap: clamp(26px, 6vw, 34px);
    padding-left: 26px;
    min-height: 0;
    position: relative;
  }
  .trail__station b { margin-bottom: 4px; }
  .trail__station span { font-size: clamp(18px, 4.6vw, 21px); line-height: 1.2; }

  /* the rule itself */
  .trail__stations::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 7px;
    bottom: 0;
    width: 2px;
    background: var(--c-brilliantz-red, #C8102E);
    transform-origin: top;
  }

  /* connection marks, one per observation */
  .trail__station { position: relative; margin-top: 0 !important; }
  .trail__station::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-brilliantz-red, #C8102E);
  }
  .trail__station span { max-width: none; }

  /* the rule turns and leads into the closing statement */
  .trail__end {
    text-align: left;
    padding-left: 26px;
    margin-top: clamp(30px, 7vw, 44px);
    position: relative;
  }
  /* The rule carries on past the last observation and turns into the closing
     statement: one continuous L rather than a detached dash. */
  .trail__end::before {
    content: "";
    position: absolute;
    left: 3px;
    top: calc(-1 * clamp(30px, 7vw, 44px));
    width: 17px;
    height: clamp(30px, 7vw, 44px);
    border-left: 2px solid var(--c-brilliantz-red, #C8102E);
    border-bottom: 2px solid var(--c-brilliantz-red, #C8102E);
    border-bottom-left-radius: 7px;
    background: none;
  }
  .trail__end::after { margin-left: 0; width: 108px; }

  /* draw the rule once, never the dots individually */
  .trail__stations::before { transform: scaleY(0); }
  .trail[data-drawn="true"] .trail__stations::before {
    transform: scaleY(1);
    transition: transform 900ms cubic-bezier(.4,0,.2,1);
  }
}

/* ==========================================================================
   CLIENT PROOF STRIP (UI Spec s.7.3)
   Equal optical weight, not equal bounding boxes. No cards, no borders.
   ========================================================================== */
.clients__label { margin-bottom: var(--s-32); }

.clients__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: nowrap;          /* one desktop row */
  align-items: center;
  justify-content: space-between;
  gap: var(--s-32);
}
.clients__item { display: flex; align-items: center; }

/* Normalised by optical height, individually tuned via --h.
   Base ~32px visible desktop height per the build brief. */
.clients__logo {
  height: var(--h, 32px);
  width: auto;
  opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease);
}
.clients__item:hover .clients__logo { opacity: 1; }

@media (max-width: 1279px) {
  .clients__list { flex-wrap: wrap; justify-content: flex-start; gap: var(--s-48); }
}
@media (max-width: 767px) {
  /* Calm 2 x 3 grid */
  .clients__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-48) var(--s-32);
    justify-items: center;
  }
  .clients__logo { height: calc(var(--h, 32px) * 0.85); }
}

/* ==========================================================================
   CUSTOMER ENTRY POINTS (UI Spec s.7.4)
   Three equal 4-column blocks. Typography and fine rules, no heavy card chrome.
   ========================================================================== */
.entry__label { margin-bottom: var(--s-16); }
/* Quiet definition. Supporting copy, deliberately not another headline. */
.entry__definition {
  font-size: var(--t-body);
  color: var(--c-ink-60);
  max-width: 58ch;
  margin: 0 0 var(--s-32);
}
@media (min-width: 1024px) {
  /* Cards sit closer to the introduction they answer. */
  .entry__definition { margin-bottom: var(--s-24); }
}
.entry__list { list-style: none; margin: 0; padding: 0; display: contents; }

.entry__item { grid-column: span 4; }

.entry__block {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--field, transparent);
  border-radius: 0;           /* flat colour block, not a card */
  overflow: hidden;
}
.entry__img {
  /* Isolated object sitting on the block's own field, not a photo panel
     stacked above a copy panel. One continuous colour throughout. */
  width: 88%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  margin: var(--s-24) auto 0;
}
.entry__body {
  padding: var(--s-32);
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Dark fields flip the text. Ink on the purple field measures 1.67:1, well
   under AA; warm white measures 10.09:1. */
.entry__block[data-text="light"] { color: var(--c-warm-white); }
.entry__block[data-text="light"] .entry__copy { color: var(--c-ivory-78); }
.entry__block[data-text="light"] .link { border-bottom-color: var(--c-ivory-35); }

.entry__title { font-size: var(--t-h3); margin: 0 0 var(--s-16); }
.entry__copy  { color: var(--c-ink-60); margin-bottom: var(--s-32); }
.entry__cta   { margin-top: auto; }
.entry__placeholder {
  width: 88%; aspect-ratio: 4 / 3; margin: var(--s-24) auto 0;
  display: grid; place-items: center; text-align: center;
  padding: var(--s-24);
  border: 1px dashed var(--c-ink-45);
  color: var(--c-ink-60);
  font-family: var(--util); font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}

/* The whole block is clickable; the arrow still shifts on hover. */
.entry__block:hover .arrow { transform: translateX(3px); }
.entry__block .arrow { transition: transform var(--dur-fast) var(--ease); }

@media (max-width: 1279px) {
  .entry__item { grid-column: span 8; }
  .entry__item + .entry__item { margin-top: var(--s-48); }
}
@media (max-width: 767px) {
  .entry__item { grid-column: 1 / -1; }
  .entry__item + .entry__item { margin-top: var(--s-48); }
}

/* ==========================================================================
   ONE BRAND. EVERYWHERE. (UI Spec s.7.5)
   New proposition section. Deliberately NOT the "Same brand. Apparently."
   hero campaign: different composition, different object treatment.
   ========================================================================== */
.onebrand { background: var(--c-paper); }
.onebrand__grid { align-items: stretch; row-gap: var(--s-48); }
.onebrand__text { align-self: center; }
.onebrand__text   { grid-column: 1 / span 4; }
.onebrand__object { grid-column: 6 / span 7; }
.onebrand__title  { margin-bottom: var(--s-24); }
.onebrand__cta    { margin-top: var(--s-32); }

.object-img {
  /* Fills the right-hand field rather than sitting inside it as a photo. */
  width: 100%;
  height: 100%;
  min-height: 408px;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) { .object-img { min-height: 260px; } }

.object-placeholder {
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--c-ink-45);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-24);
  color: var(--c-ink-60);
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

@media (max-width: 1279px) {
  .onebrand__text   { grid-column: 1 / span 8; }
  .onebrand__object { grid-column: 1 / span 8; }
}
@media (max-width: 767px) {
  .onebrand__text, .onebrand__object { grid-column: 1 / -1; }
}

/* ==========================================================================
   THINKING PREVIEW (UI Spec s.7.6)
   Editorial grid, not blog cards. Title outweighs metadata.
   ========================================================================== */
/* Spans the full row. At 8 columns the leftover 4 were being filled by the
   first article, splitting the four teasers across two rows. */
.thinking__head { grid-column: 1 / -1; margin-bottom: var(--s-40, 40px); max-width: 26ch; }
.thinking__more { grid-column: 10 / span 3; align-self: end; margin-bottom: var(--s-64); }
.thinking__more .link { min-height: 44px; }

.thinking__item,
.article-teaser { grid-column: span 3; }
.thinking__link,
.article-teaser__link {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; height: 100%;
}
.thinking__item { display: flex; }
/* Read link pinned to the bottom so all four align regardless of how many
   lines the title wraps to. Titles are never shortened to match. */
.thinking__link > .link { margin-top: auto; }

.thinking__object-img,
.article-teaser__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--s-24);
}
/* Desktop gives the editorial images ~11% more height and a little more
   separation from the headline. Borderless treatment unchanged. */
@media (min-width: 1024px) {
  .thinking__object-img,
  .article-teaser__img {
    aspect-ratio: 1 / 1;          /* ~20% taller again; images now lead */
    margin-bottom: var(--s-32);
  }
}

.thinking__object {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s-24);
  border: 1px dashed var(--c-ink-45);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-16);
  color: var(--c-ink-60);
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.thinking__title,
.article-teaser__title { font-size: var(--t-h3); margin: 0 0 var(--s-12); }
.thinking__deck,
.article-teaser__deck { color: var(--c-ink-60); font-size: var(--t-small); margin-bottom: var(--s-16); }
.thinking__link:hover .arrow,
.article-teaser__link:hover .arrow { transform: translateX(3px); }
.thinking__link .arrow,
.article-teaser__link .arrow { transition: transform var(--dur-fast) var(--ease); }

@media (max-width: 1279px) {
  .thinking__head { grid-column: 1 / span 8; margin-bottom: var(--s-32); }
  .thinking__more { grid-column: 1 / span 8; margin-bottom: var(--s-48); }
  .thinking__item { grid-column: span 4; }
}
@media (max-width: 767px) {
  .thinking__head, .thinking__more, .thinking__item { grid-column: 1 / -1; }
  .thinking__item + .thinking__item { margin-top: var(--s-48); }
}

/* ==========================================================================
   CLOSING CTA (UI Spec s.7.7)
   High-contrast field. One signature line only: both must not be stacked.
   ========================================================================== */
.closing {
  background: var(--c-yellow);
  color: var(--c-ink);
  /* Final punctuation mark of the page: extra air above and below. */
  padding-block: clamp(104px, 10vw, 168px);
}
/* Interior pages close more briskly than the homepage. Declared here so it
   follows .closing in source order and actually applies. */
.closing.closing--snug { padding-block: clamp(64px, 6.2vw, 92px); }
.closing__grid { align-items: center; row-gap: var(--s-32); }
.closing__title {
  grid-column: 1 / span 8;
  font-size: clamp(53px, 5.5vw, 88px);   /* ~10% above --t-h1 */
  margin: 0;
}
.closing__action { grid-column: 10 / span 3; justify-self: end; }

@media (max-width: 1279px) {
  .closing__title  { grid-column: 1 / span 8; }
  .closing__action { grid-column: 1 / span 8; justify-self: start; }
}
@media (max-width: 767px) {
  .closing__title, .closing__action { grid-column: 1 / -1; justify-self: start; }
}

/* ==========================================================================
   FOOTER (UI Spec s.12): no second mission statement
   ========================================================================== */
.site-footer { background: var(--c-ink); color: var(--c-warm-white); padding-block: var(--s-64) var(--s-48); }
.site-footer .wordmark { color: var(--c-warm-white); }
.site-footer .wordmark img { width: 188px; height: auto; }  /* ~12% larger */

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-48);
  padding-bottom: var(--s-48);
  border-bottom: 1px solid var(--c-rule-reverse);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-32); }
.footer__nav a {
  font-family: var(--font-sans); font-weight: 500; font-size: var(--t-small);
  text-decoration: none; opacity: 0.8;
  min-height: 44px; display: inline-flex; align-items: center;
}
.footer__nav a:hover { opacity: 1; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-32);
  justify-content: space-between;
  padding-top: var(--s-32);
  font-size: var(--t-small);
  color: var(--c-rule-reverse);
}
.footer__bottom a { color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer__bottom a:hover { color: var(--c-warm-white); }

@media (max-width: 767px) {
  .footer__top { flex-direction: column; gap: var(--s-32); }
}

/* ==========================================================================
   SERVICES PAGE
   Uses the global tokens, grid and button system. Nothing here overrides a
   global value; page-specific art direction only.
   ========================================================================== */

/* --- Hero: copy left, monumental needle right ---------------------------- */
.svc-hero {
  background: var(--c-yellow);
  color: var(--c-ink);
  overflow: hidden;
}
.svc-hero__grid { align-items: center; row-gap: var(--s-32); }
.svc-hero__text { grid-column: 1 / span 6; padding-block: clamp(72px, 8vw, 120px); }
.svc-hero__art  { grid-column: 8 / span 5; align-self: stretch; }

.svc-hero__title {
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 13ch;
}
.svc-hero__sub {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.45;
  max-width: 44ch;
  margin: 26px 0 0;
  opacity: .82;
}
/* Transparent PNG composed directly on the CSS yellow field. Scaled well
   past its column so the needle reads monumental, and pulled right so the
   eye sits clear of the headline. Aggressive cropping is intentional. */
.svc-hero__art img {
  width: 165%;
  max-width: none;
  height: auto;
  margin-left: -18%;
  display: block;
}

/* Flush to the hero's lower-right corner from tablet up. Sized to the
   column, the needle left a growing gap on wide screens: 294px of empty
   yellow at 2400px and 60px below. The asset has no transparent margin on
   its right or bottom edges, so anchoring the box there puts the needle
   itself against the corner. */
@media (min-width: 768px) {
  .svc-hero { position: relative; overflow: hidden; }
  .svc-hero__art {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: auto;
    pointer-events: none;
  }
  .svc-hero__art img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .svc-hero__text { grid-column: 1 / span 4; }
  .svc-hero__art  { grid-column: 5 / span 4; }
}

/* At tablet the hero is tall relative to its width, so sizing the needle to
   the full hero height ran it into the copy. Capped by width here; it stays
   anchored to the same corner. */
@media (min-width: 768px) and (max-width: 1119px) {
  .svc-hero__art { top: auto; width: 54vw; }
  .svc-hero__art img { height: auto; width: 100%; }
}
@media (max-width: 767px) {
  /* Recomposed: headline first, needle below and still large. */
  .svc-hero__text { grid-column: 1 / -1; padding-block: clamp(48px, 12vw, 72px) 0; }
  .svc-hero__art  { grid-column: 1 / -1; }
  .svc-hero__art img {
    width: 128%;
    max-width: 128%;
    margin-left: -14%;
  }
}

/* --- Three service routes ------------------------------------------------ */
.svc-routes {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: stretch;
}
.svc-route {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* One shared aspect ratio keeps the three image tops and bottoms aligned
   even though the source files differ in shape. */
.svc-route__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.svc-route__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--s-32);
}
.svc-route__q {
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.15;
  margin: 0 0 var(--s-12);
}
.svc-route__lead {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--c-ink-60);
  margin: 0 0 var(--s-24);
  min-height: 3em;            /* keeps the capability lists aligned */
}
.svc-route__caps {
  list-style: none; margin: 0 0 var(--s-32); padding: 0;
  border-top: 1px solid var(--c-rule);
}
.svc-route__caps li {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  padding: 11px 0;
  border-bottom: 1px solid var(--c-rule-soft);
}
.svc-route__cta { margin-top: auto; align-self: flex-start; min-height: 44px; }

@media (max-width: 1279px) {
  .svc-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-64); }
  .svc-route__lead { min-height: 0; }
}
@media (max-width: 767px) {
  .svc-routes { grid-template-columns: 1fr; row-gap: var(--s-64); }
}

/* --- Lower rows: one geometry, alternating image side -------------------- */
.svc-row__grid { align-items: center; row-gap: var(--s-48); }
/* Both children are pinned to row 1. Without this, a reversed row places the
   text at column 7 and grid auto-placement cannot go backwards to column 1,
   so the image drops onto a second row. */
.svc-row__text,
.svc-row__art { grid-row: 1; }
.svc-row__text { grid-column: 1 / span 6; }
.svc-row__art  { grid-column: 7 / span 6; }

/* Reversed rows swap sides without changing the 6/6 split. */
.svc-row--reverse .svc-row__text { grid-column: 7 / span 6; }
.svc-row--reverse .svc-row__art  { grid-column: 1 / span 6; }

.svc-row__text h2 { margin-bottom: var(--s-24); }
.svc-row__emphasis {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3;
  letter-spacing: -.02em;
  margin-top: var(--s-24);
}
.svc-row__cta { margin-top: var(--s-32); }

/* Shared aspect ratio across all three rows so heights match down the page. */
.svc-row__art img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* The grid drops to 8 columns below 1280, so the 6/6 split has to become
   4/4 to stay symmetrical. Without this the rows render 655/285. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .svc-row__text { grid-column: 1 / span 4; }
  .svc-row__art  { grid-column: 5 / span 4; }
  .svc-row--reverse .svc-row__text { grid-column: 5 / span 4; }
  .svc-row--reverse .svc-row__art  { grid-column: 1 / span 4; }
}

@media (max-width: 1023px) {
  .svc-row__text,
  .svc-row__art,
  .svc-row--reverse .svc-row__text,
  .svc-row--reverse .svc-row__art { grid-column: 1 / -1; }
  /* Stacked: release the row pin so they flow, copy first on every row. */
  .svc-row__text { grid-row: auto; order: 1; }
  .svc-row__art  { grid-row: auto; order: 2; }
}

/* --- Closing: eyebrow above the line ------------------------------------- */
.svc-close .closing__title h2 {
  font-size: clamp(53px, 5.5vw, 88px);
  margin: 0;
}

/* ==========================================================================
   SHARED PAGE-HERO PATTERN
   Multi-location, About and Contact all use: copy left, transparent PNG
   right, composed over a CSS colour field. Colour differs per page; the
   geometry does not.
   ========================================================================== */
.ml-hero, .ab-hero, .ct-hero { overflow: hidden; }
.ml-hero { background: var(--c-yellow);     color: var(--c-ink); }
.ab-hero { background: var(--c-field-red);  color: var(--c-ivory); }
.ct-hero { background: var(--c-field-red);  color: var(--c-ivory); }

/* The global eyebrow is ink-60, which measures 1.9:1 on the red field.
   Light heroes need their own value. */
.ab-hero .eyebrow, .ct-hero .eyebrow { color: rgba(246, 241, 232, .72); }

.ml-hero__grid, .ab-hero__grid, .ct-hero__grid { align-items: center; row-gap: var(--s-32); }
.ml-hero__text, .ab-hero__text, .ct-hero__text {
  grid-column: 1 / span 6;
  padding-block: clamp(72px, 8vw, 118px);
}
.ml-hero__art, .ab-hero__art, .ct-hero__art { grid-column: 7 / span 6; }

.ml-hero__title, .ab-hero__title, .ct-hero__title {
  font-size: clamp(44px, 5vw, 82px);
  line-height: .99;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 14ch;
}
.ml-hero__sub, .ab-hero__sub, .ct-hero__sub {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  max-width: 42ch;
  margin: 26px 0 0;
  opacity: .84;
}
.ml-hero__cta, .ct-hero__cta { margin: var(--s-32) 0 0; }

/* Transparent PNGs sit on the field and may bleed past the container. */
.ml-hero__art img, .ab-hero__art img, .ct-hero__art img {
  width: 118%;
  max-width: 118%;
  height: auto;
  margin-left: -6%;
  display: block;
}
.ab-hero__art img { width: 108%; max-width: 108%; margin-left: 0; }
/* Pencil runs oversized on desktop. Debris cropping at the lower right edge
   is intentional; the asset itself is untouched. */
@media (min-width: 768px) {
  .ct-hero__art img { width: 133%; max-width: 133%; margin-left: -9%; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .ml-hero__text, .ab-hero__text, .ct-hero__text { grid-column: 1 / span 4; }
  .ml-hero__art,  .ab-hero__art,  .ct-hero__art  { grid-column: 5 / span 4; }
}
@media (max-width: 767px) {
  /* Recomposed: copy first, subject kept whole rather than cropped away. */
  .ml-hero__text, .ab-hero__text, .ct-hero__text {
    grid-column: 1 / -1; padding-block: clamp(48px, 12vw, 72px) 0;
  }
  .ml-hero__art, .ab-hero__art, .ct-hero__art { grid-column: 1 / -1; }
  .ml-hero__art img, .ab-hero__art img, .ct-hero__art img {
    width: 100%; max-width: 100%; margin-left: 0;
    margin-top: var(--s-32);
  }
}

/* ==========================================================================
   MULTI-LOCATION
   ========================================================================== */
.ml-row__grid { align-items: center; row-gap: var(--s-48); }
.ml-row.section { padding-block: clamp(64px, 6.2vw, 92px); }
.ml-row__text, .ml-row__art { grid-row: 1; }
.ml-row__text { grid-column: 1 / span 5; }
.ml-row__art  { grid-column: 7 / span 6; }
.ml-row__text h2 { margin-bottom: var(--s-24); }
.ml-row__emphasis {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3; letter-spacing: -.02em;
  margin-top: var(--s-24);
}
.ml-row__art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* Three steps. Editorial, not a workflow diagram. */
.ml-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap);
}
.ml-step { border-top: 2px solid var(--c-ink); padding-top: var(--s-24); }
.ml-step__n {
  display: block; font-family: var(--util);
  font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow);
  color: var(--c-ink-60); margin-bottom: var(--s-16);
}
.ml-step__t { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.2; margin: 0 0 var(--s-12); }
.ml-step__p { color: var(--c-ink-60); margin: 0; }

/* Capabilities as an editorial list, deliberately not an icon grid. */
.ml-caps__grid { row-gap: var(--s-48); }
.ml-caps__head { grid-column: 1 / span 4; }
.ml-caps {
  grid-column: 6 / span 7;
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: var(--s-48);
  border-top: 1px solid var(--c-rule);
}
.ml-caps li {
  font-family: var(--font-sans); font-size: var(--t-body);
  padding: 13px 0; border-bottom: 1px solid var(--c-rule-soft);
  break-inside: avoid;
}

/* Corporate + Locations: complementary halves, strict symmetry. */
.ml-pair { margin-block: 0; }
.ml-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap); align-items: stretch;
}
.ml-half { display: flex; flex-direction: column; min-width: 0; }
.ml-half__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.ml-half__body { padding-top: var(--s-24); }
.ml-half__t { font-size: clamp(27px, 2.6vw, 40px); line-height: 1.12; margin: 0; }

.ml-local__grid { row-gap: var(--s-32); }
.ml-local__text { grid-column: 1 / span 5; }
.ml-local__body { grid-column: 7 / span 5; }

@media (min-width: 1024px) and (max-width: 1279px) {
  .ml-row__text { grid-column: 1 / span 4; }
  .ml-row__art  { grid-column: 5 / span 4; }
  .ml-caps__head { grid-column: 1 / span 3; }
  .ml-caps { grid-column: 4 / span 5; }
  .ml-local__text { grid-column: 1 / span 4; }
  .ml-local__body { grid-column: 5 / span 4; }
}
@media (max-width: 1023px) {
  .ml-row__text, .ml-row__art { grid-column: 1 / -1; grid-row: auto; }
  .ml-row__text { order: 1; } .ml-row__art { order: 2; }
  .ml-caps__head, .ml-caps, .ml-local__text, .ml-local__body { grid-column: 1 / -1; }
  .ml-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-48); }
}
@media (max-width: 767px) {
  /* Stacked, the Consistency copy sat too close to its image. */
  .ml-row__grid { row-gap: var(--s-64); }
  .ml-steps { grid-template-columns: 1fr; }
  .ml-caps { columns: 1; }
  .ml-pair { grid-template-columns: 1fr; row-gap: var(--s-64); }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.ab-idea__grid, .ab-work__grid, .ab-local__grid { row-gap: var(--s-48); }
.ab-idea__head, .ab-work__head, .ab-local__head { grid-column: 1 / span 5; }
.ab-idea__body, .ab-work__body, .ab-local__body { grid-column: 7 / span 5; }
.ab-idea.section--snug { padding-block: clamp(56px, 5.2vw, 76px); }
.ab-idea__body p + p { margin-top: var(--s-16); }
.ab-idea__turn { font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; margin-top: var(--s-32); }

.ab-work { background: var(--c-ink); color: var(--c-warm-white); }
.ab-work .eyebrow { color: var(--c-rule-reverse); }
.ab-work__body p { color: var(--c-ivory-78); }
.ab-work__body .lede { color: var(--c-warm-white); }

/* Four beliefs, no icons. */
.ab-beliefs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap);
}
.ab-belief { border-top: 2px solid var(--c-ink); padding-top: var(--s-24); }
.ab-belief__n {
  display: block; font-family: var(--util); font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow); color: var(--c-ink-60); margin-bottom: var(--s-16);
}
/* Desktop gets larger principle titles; the supporting line is unchanged.
   Mobile keeps the original scale. */
.ab-belief__t { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.2; margin: 0 0 var(--s-12); }
@media (min-width: 1024px) {
  .ab-belief__t { font-size: clamp(23px, 2.05vw, 31px); line-height: 1.14; }
}
.ab-belief__p { color: var(--c-ink-60); font-size: var(--t-small); margin: 0; }

.ab-connected { background: var(--c-yellow); color: var(--c-ink); }
.ab-connected__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap);
}
.ab-connected__grid li { border-top: 2px solid var(--c-ink); padding-top: var(--s-24); }
.ab-connected__grid h3 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.2; margin: 0 0 var(--s-8); }
.ab-connected__grid p { font-family: var(--font-sans); font-size: var(--t-small); opacity: .7; margin: 0; }

/* About closes on the same red as its hero, bookending the page.
   Yellow remains the accent, not the default field. */
.closing--red { background: var(--c-field-red); color: var(--c-ivory); }
.closing--red .eyebrow { color: rgba(246, 241, 232, .72); }
.closing--red .btn--primary { background: var(--c-ivory); color: var(--c-ink); }
.closing--red .btn--primary:hover { background: #fff; }

.closing__sub { font-family: var(--font-sans); font-size: var(--t-body); margin-top: var(--s-16); opacity: .8; }

@media (min-width: 1024px) and (max-width: 1279px) {
  .ab-idea__head, .ab-work__head, .ab-local__head { grid-column: 1 / span 4; }
  .ab-idea__body, .ab-work__body, .ab-local__body { grid-column: 5 / span 4; }
}
@media (max-width: 1023px) {
  .ab-idea__head, .ab-idea__body,
  .ab-work__head, .ab-work__body,
  .ab-local__head, .ab-local__body { grid-column: 1 / -1; }
  .ab-beliefs, .ab-connected__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-48); }
}
@media (max-width: 767px) {
  .ab-beliefs, .ab-connected__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
/* Form section: 40/60 split, copy left, form right. Vertical pacing is
   deliberately brisk. Someone clicked Let's talk; the form is the page. */
.ct-form-section.section { padding-block: clamp(48px, 4.6vw, 68px) clamp(40px, 3.8vw, 56px); }
.ct-form__grid { row-gap: var(--s-48); align-items: start; }
.ct-form__intro { grid-column: 1 / span 5; }   /* ~40% */
.ct-form        { grid-column: 6 / span 7; }   /* ~60% */
.ct-form__intro h2 { margin-bottom: var(--s-16); }
.ct-form__email {
  margin-top: var(--s-24);
  font-family: var(--font-sans);
  font-size: var(--t-body);
}
.ct-form__email a {
  border-bottom: 1px solid var(--c-rule); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Fields sit on a faint ground with a weighted base rule, so the inputs read
   as objects rather than gaps between labels. Every field is its own line,
   generously spaced; the label lives inside the control (floats up once the
   field has focus or content) instead of sitting above it. */
.ct-field { margin-bottom: var(--s-24); }

/* First/last name are the one natural pair; everything else stays its own
   full-width line. */
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); margin-bottom: var(--s-24); }
.ct-row .ct-field { margin-bottom: 0; }
@media (max-width: 479px) {
  .ct-row { grid-template-columns: 1fr; gap: var(--s-24); margin-bottom: 0; }
  .ct-row .ct-field { margin-bottom: var(--s-24); }
}

.ct-control { position: relative; }
.ct-control input,
.ct-control textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;                 /* 16px avoids iOS zoom on focus */
  line-height: 1.5;
  color: var(--c-ink);
  background: #F2F0EA;
  border: 1.5px solid var(--c-rule-soft);
  padding: 24px 18px 10px;
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.ct-control label {
  position: absolute;
  left: 19px; top: 18px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 16px; color: var(--c-ink-60);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ct-control input:focus ~ label,
.ct-control input:not(:placeholder-shown) ~ label,
.ct-control textarea ~ label {
  transform: translateY(-10px) scale(.72);
  color: var(--c-ink-45);
}
.ct-control--textarea textarea { padding-top: 30px; resize: vertical; min-height: 128px; }
.ct-control--textarea label { top: 24px; transform: translateY(-10px) scale(.72); }

.ct-control input:hover,
.ct-control textarea:hover { background: #EDEBE4; border-color: var(--c-ink-45); }
.ct-control input:focus,
.ct-control textarea:focus {
  outline: none;
  background: var(--c-warm-white);
  border-color: var(--c-ink);
  box-shadow: 0 0 0 4px rgba(20, 18, 14, 0.08);
}
.ct-control input:focus-visible,
.ct-control textarea:focus-visible { box-shadow: 0 0 0 4px rgba(247, 197, 21, 0.45); }
.ct-field[data-invalid="true"] .ct-control input,
.ct-field[data-invalid="true"] .ct-control textarea { border-color: var(--c-brilliantz-red, #C8102E); }

.ct-error {
  font-family: var(--font-sans); font-size: var(--t-small);
  color: var(--c-brilliantz-red, #C8102E); margin: 8px 0 0;
}

/* Phone: flagged country picker, national number and extension as three
   distinct rounded controls with real air between them, not a fused bar. */
.ct-phone { display: flex; gap: 10px; }
.ct-phone__country {
  flex: 0 0 148px;
  display: flex; align-items: center; gap: 8px;
  background: #F2F0EA;
  border: 1.5px solid var(--c-rule-soft);
  border-radius: var(--radius-md);
  padding-inline: 14px;
  transition: border-color var(--dur-fast) var(--ease);
}
.ct-phone__flag { font-size: 1.2em; line-height: 1; }
.ct-phone__country select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  font-family: var(--font-sans); font-size: 14px; color: var(--c-ink);
  padding: 24px 4px 10px;
  width: 100%;
}
.ct-control--phone { flex: 1 1 auto; min-width: 0; }
.ct-control--ext { flex: 0 0 132px; }
.ct-phone__country:focus-within { border-color: var(--c-ink); }

@media (max-width: 479px) {
  .ct-phone { flex-wrap: wrap; }
  .ct-phone__country { flex-basis: 100%; }
  .ct-control--phone { flex-basis: 100%; }
  .ct-control--ext { flex: 1 1 auto; }
}

/* Send carries more weight than a standard inline CTA. */
.ct-submit {
  margin-top: var(--s-24);
  font-size: var(--t-body);
  padding: 19px 38px;
}
.ct-status {
  margin-top: var(--s-24); font-family: var(--font-sans); font-size: var(--t-small);
  padding: var(--s-16); background: var(--c-paper);
  border-left: 3px solid var(--c-ink);
}
.ct-status--error { border-left-color: var(--c-brilliantz-red, #C8102E); }

/* Success replaces the form outright rather than sitting below it.
   display:flex on its own would win over [hidden]'s UA display:none
   (author origin always beats the UA stylesheet, whatever the source
   order), so the [hidden] case has to be stated explicitly here too. */
.ct-success {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-block: var(--s-32);
}
.ct-success[hidden] { display: none; }
.ct-success__icon { margin-bottom: var(--s-24); }
.ct-success__title { margin-bottom: var(--s-8); }
.ct-success__sub { color: var(--c-ink-60); }

@media (min-width: 1024px) and (max-width: 1279px) {
  .ct-form__intro { grid-column: 1 / span 3; }
  .ct-form        { grid-column: 4 / span 5; }
}
@media (max-width: 1023px) {
  .ct-form__intro, .ct-form { grid-column: 1 / -1; }
}

/* ==========================================================================
   HOMEPAGE VERTICAL PACING
   Scoped to the homepage so Services, Multi-location, About and Contact,
   which are locked, are untouched. Editorial rhythm is preserved: the
   reduction comes from block padding, not from the spacing that separates
   a heading from its own content.
   ========================================================================== */
.page-home .section              { padding-block: clamp(56px, 5.6vw, 80px); }
.page-home .section--intro       { padding-block: clamp(48px, 4.8vw, 68px); }
.page-home .section--compact     { padding-block: clamp(40px, 4vw, 56px); }
.page-home .section--tight-top   { padding-top: clamp(48px, 4.8vw, 68px); }
.page-home .closing              { padding-block: clamp(64px, 6.4vw, 96px); }

.page-home .entry__body          { padding-top: var(--s-24); }
.page-home .onebrand__title      { margin-bottom: var(--s-16); }
.page-home .trail                { margin-top: clamp(32px, 3.4vw, 48px); }
.page-home .entry__definition    { margin-bottom: var(--s-16); }
.page-home .onebrand .object-img { min-height: 376px; }
.page-home .section--compact     { padding-block: clamp(36px, 3.4vw, 46px); }
.page-home .thinking__head       { margin-bottom: var(--s-32); }

/* ==========================================================================
   LEGAL PAGES
   Single readable column. Deliberately plainer than the marketing pages:
   this is a document, not a composition.
   ========================================================================== */
.legal__head { margin-bottom: var(--s-48); }
.legal__head h1 { max-width: 16ch; }
.legal__head .lede { margin-top: var(--s-24); max-width: 52ch; }
.legal__date {
  font-family: var(--util);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-60);
  margin-top: var(--s-32);
  padding-top: var(--s-16);
  border-top: 1px solid var(--c-rule);
  display: inline-block;
}
.legal__body { max-width: 62ch; }
.legal__body h2 {
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.2;
  margin: var(--s-48) 0 var(--s-16);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  margin: 0 0 var(--s-16);
}
.legal__body a {
  border-bottom: 1px solid var(--c-rule);
  text-decoration: none;
  /* tap target */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.legal__body a:hover { border-bottom-color: var(--c-ink); }