/* ============================================================
   AVS — Assured Value Structures
   Light scheme. Palette is locked to five values:
     #108ACB Ocean Blue   #F7FDFF Alice Blue   #1C3D68 Regal Navy
     #EBEBEB Platinum     #AED7EA Light Blue
   First three dominate. Platinum is borders only. Light Blue is
   hover and soft fills only.
   ============================================================ */

:root {
  /* Palette */
  --blue:    #108ACB;
  --alice:   #F7FDFF;
  --navy:    #1C3D68;
  --platinum:#EBEBEB;
  --sky:     #AED7EA;

  --white:   #FFFFFF;

  /* Derived text tiers, all mixed from Regal Navy so nothing
     reads as an unconsidered neutral grey. */
  --ink:     #1C3D68;
  --ink-2:   #52698A;
  --ink-3:   #8296B0;

  --line:    #EBEBEB;
  --line-2:  #DDE6EC;

  --blue-soft: rgba(16, 138, 203, 0.08);
  --blue-glow: rgba(16, 138, 203, 0.28);

  /* Video acts stay navy-tinted so white copy holds over footage */
  --scrim-1: rgba(28, 61, 104, 0.86);
  --scrim-2: rgba(28, 61, 104, 0.42);

  /* Type */
  --display: 'Yantramanav', system-ui, sans-serif;
  --body:    'Yantramanav', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
  /* Interface face: navigation, buttons, breadcrumbs. Purpose-built for
     UI legibility — tall x-height, open apertures, unambiguous letter-
     forms — and geometric enough to read as a distinct layer against
     Yantramanav's narrower grotesque. */
  --ui:      'Plus Jakarta Sans', system-ui, sans-serif;

  /* Interface sizes. Nav and CTA labels were 12–13px uppercase mono with
     wide tracking, which is the least readable combination available:
     all-caps strips the word-shape cues readers rely on, and heavy
     tracking breaks words into separate glyphs. Sentence case, larger,
     near-normal tracking. */
  --t-nav: 0.9375rem;   /* 15px */
  --t-cta: 0.9375rem;   /* 15px */

  /* Four hero lines have to clear a 900px viewport with the nav and
     scroll cue in the same frame, so the ceiling is deliberately low. */
  --t-hero: clamp(2.25rem, 6.4vw, 5.75rem);
  --t-h2:   clamp(1.85rem, 4.4vw, 3.6rem);
  --t-h3:   clamp(1.25rem, 2.2vw, 1.85rem);
  /* Paragraph scale, +30% on the previous values. */
  --t-lead: clamp(1.33rem, 1.89vw, 1.66rem);
  --t-body: 1.38rem;
  --t-sm:   1.22rem;
  --t-mono: 0.75rem;

  --gut:  clamp(1.25rem, 5vw, 6rem);
  --maxw: 1400px;
  --rail: 0px; /* set to rail width on wide screens */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--alice);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` rather than `hidden`: hidden on the root turns the element
     into a scroll container and breaks position:sticky on the acts. */
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--alice);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  /* No overflow-x here. With `clip` on <html>, body's overflow no longer
     propagates to the viewport, so `hidden` would make body its own
     scroll container — and the acts' position:sticky would bind to that
     instead of the viewport and silently stop sticking. The clip on
     <html> already handles sideways overflow. */
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Weights sit at 600/700 rather than 800. The same face carries far
   more visual weight on a light ground than it did on black. */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -0.003em; color: var(--navy); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--blue); color: #fff; }

/* ---------- PRIMITIVES ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  /* Same face as the main navigation. Jakarta sits wider than Plex Mono
     at the same size, so tracking comes down and weight goes up to keep
     the label reading as one unit rather than loose letters. */
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
}
.tag::before { content: ''; width: 2rem; height: 1px; background: currentColor; opacity: 0.5; }
.tag--mute { color: var(--ink-3); }

.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.02;
  text-wrap: balance;
  color: var(--navy);
}

.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--ink-2); max-width: 54ch; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.85rem;
  font-family: var(--ui);
  font-size: var(--t-cta);
  font-weight: 700;
  letter-spacing: 0.005em;
  border-radius: 2px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn svg { width: 1rem; height: 1rem; flex: none; transition: transform 0.4s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 26px -10px var(--blue-glow);
}
.btn--primary:hover { background: #0E7AB5; }

.btn--ghost { border: 1px solid var(--line-2); color: var(--navy); background: var(--white); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* On dark video acts */
.on-dark .btn--ghost { border-color: rgba(255,255,255,0.35); color: #fff; background: rgba(255,255,255,0.05); }
.on-dark .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.14); color: #fff; }

/* ============================================================
   PRELOADER
   ============================================================ */
.pre {
  position: fixed; inset: 0; z-index: 999;
  background: var(--alice);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.25rem;
}
.pre__mark { width: 190px; }
.pre__bar { width: min(280px, 60vw); height: 2px; background: var(--platinum); overflow: hidden; }
.pre__fill { height: 100%; width: 0%; background: var(--blue); transition: width 0.35s var(--ease); }
.pre__pct {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.2em; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ============================================================
   SCROLL PROGRESS RAIL
   ============================================================ */
.rail {
  /* SWITCHED OFF. Change to `flex` to bring the rail back — the markup
     and its scroll wiring are untouched. */
  display: none;

  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9rem;
  pointer-events: none;
}
.rail__track {
  width: 2px;
  height: 190px;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.rail__fill {
  position: absolute; inset: 0;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: top;
}
.rail__pct {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  writing-mode: vertical-rl;
}
/* Inverted while a dark video act fills the viewport */
.rail.is-dark .rail__track { background: rgba(255,255,255,0.28); }
.rail.is-dark .rail__pct   { color: rgba(255,255,255,0.7); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.35rem var(--gut);
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              padding 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.nav.is-stuck {
  background: rgba(247, 253, 255, 0.92);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
  padding-block: 0.85rem;
  box-shadow: 0 6px 24px -18px rgba(28,61,104,0.5);
}

/* Two logos crossfade: white over the hero video, navy once stuck. */
.nav__logo { width: 215px; flex: none; position: relative; }
.nav__logo img { width: 100%; transition: opacity 0.45s var(--ease); }
.nav__logo img + img { position: absolute; inset: 0; }
.nav__logo .logo-dark { opacity: 0; }
.nav.is-stuck .logo-light { opacity: 0; }
.nav.is-stuck .logo-dark  { opacity: 1; }

.nav__links {
  display: flex; gap: 1.9rem;
  font-family: var(--ui);
  font-size: var(--t-nav);
  font-weight: 600;
  letter-spacing: 0.005em;
}
.nav__links a {
  color: rgba(255,255,255,0.75);
  position: relative; padding-block: 0.4rem;
  transition: color 0.35s var(--ease);
}
.nav.is-stuck .nav__links a { color: var(--ink-2); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--blue);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: #fff; }
.nav.is-stuck .nav__links a:hover,
.nav.is-stuck .nav__links a[aria-current="page"] { color: var(--blue); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav__right { display: flex; align-items: center; gap: 1.4rem; }
.nav__tel {
  font-family: var(--ui);
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.85);
  transition: color 0.35s var(--ease);
}
.nav.is-stuck .nav__tel { color: var(--ink-2); }
.nav__tel:hover { color: var(--blue); }
.nav .btn { padding: 0.72rem 1.3rem; }

/* Inner pages have a light hero, so the nav starts in its dark-text state */
.nav--solid .nav__links a,
.nav--solid .nav__tel { color: var(--ink-2); }
.nav--solid .logo-light { opacity: 0; }
.nav--solid .logo-dark  { opacity: 1; }

.burger { display: none; width: 30px; height: 20px; position: relative; flex: none; }
.burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: #fff;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}
.nav.is-stuck .burger span, .nav--solid .burger span { background: var(--navy); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 18px; }
.burger.is-open span { background: var(--navy); }
.burger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--alice);
  display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
  padding: 0 var(--gut);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  pointer-events: none;
}
.drawer.is-open { clip-path: inset(0 0 0% 0); pointer-events: auto; }
/* Direct children only. As a descendant selector this also captured the
   contact links inside .drawer__foot, rendering the phone and email at
   32px with a divider — indistinguishable from the primary menu items. */
.drawer > a {
  font-family: var(--display);
  font-size: clamp(1.85rem, 8.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
}
.drawer__foot {
  margin-top: 2.25rem;
  font-family: var(--ui); font-size: 1rem;
  font-weight: 500; letter-spacing: 0.005em; color: var(--ink-2);
  display: flex; flex-direction: column; gap: 0.7rem;
}

/* ============================================================
   ACTS — pinned, scrubbed video
   ============================================================ */
.act { position: relative; height: 340vh; }
.act--hero  { height: 380vh; }
.act--close { height: 300vh; }

.act__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--navy);
}
.act__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}
/* Two layers, both normal blend. A multiply tint on top of a navy
   gradient compounds and buries the footage — the point is to keep
   the film readable while the copy stays legible over it. */
.act__tint {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(28,61,104,0.62) 0%,
    rgba(28,61,104,0.34) 45%,
    rgba(16,138,203,0.24) 100%);
}
/* Weighted toward the edge the copy sits on, so the centre of frame
   stays open. */
.act__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(20,45,78,0.72) 0%, rgba(20,45,78,0.28) 55%, rgba(20,45,78,0.12) 100%),
    linear-gradient(to bottom, rgba(20,45,78,0.5) 0%, rgba(20,45,78,0.1) 30%, rgba(20,45,78,0.42) 100%);
}
/* The closing act is centred, so the side weighting would be wrong. */
.act--close .act__scrim {
  background: radial-gradient(90% 80% at 50% 50%,
    rgba(20,45,78,0.72) 0%, rgba(20,45,78,0.42) 60%, rgba(20,45,78,0.6) 100%);
}
.act__frame {
  /* SWITCHED OFF (border lines + corner marks). Change to `block`
     to bring the frame back. */
  display: none;

  position: absolute; inset: clamp(0.85rem, 2.5vw, 2.25rem);
  z-index: 2; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.16);
}
.act__frame::before, .act__frame::after {
  content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--sky);
}
.act__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.act__frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.act__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  padding-block: clamp(4.25rem, 9vh, 6.5rem) clamp(4.5rem, 10vh, 7rem);
}

/* Everything inside an act sits on navy, so invert the text tiers */
.on-dark, .on-dark p, .on-dark .lead { color: rgba(255,255,255,0.82); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .display { color: #fff; }
.on-dark .tag { color: var(--sky); }

.act__meta {
  /* SWITCHED OFF (act number, label, progress bar, percentage).
     Change to `flex` to bring the readout back. */
  display: none;

  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 3;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  align-items: center; gap: 1rem;
}
.act__meta b { color: var(--sky); font-weight: 500; }
.act__progress { width: 90px; height: 1px; background: rgba(255,255,255,0.25); position: relative; overflow: hidden; }
.act__progress i { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; }

/* ---------- HERO ---------- */
/* Cap sized to the longest manually-broken line ("Your commercial space").
   Too narrow and the explicit line breaks get re-broken by wrapping, which
   turns three lines into six. `ch` scales with the font size, so this holds
   proportionally at every clamp step. */
.hero__title { font-size: var(--t-hero); margin-block: 1.4rem 1.9rem; max-width: 21ch; }
.hero__title em { font-style: normal; color: var(--sky); }
.line { display: block; overflow: hidden; }
.line > span { display: block; }
.hero__lead { max-width: 46ch; margin-bottom: 2.5rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.scroll-cue {
  /* SWITCHED OFF. Change to `flex` to bring the cue back. */
  display: none;

  position: absolute;
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 3;
  align-items: center; gap: 0.9rem;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.scroll-cue__track { width: 1px; height: 54px; background: rgba(255,255,255,0.25); position: relative; overflow: hidden; }
.scroll-cue__track i {
  position: absolute; top: 0; left: 0; width: 100%; height: 40%;
  background: var(--sky); animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

.act__title { font-size: var(--t-h2); margin-block: 1.3rem 1.4rem; max-width: 17ch; }

/* Commitments */
.commits {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: clamp(2rem, 5vw, 4rem);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.16);
}
.commit {
  background: rgba(28, 61, 104, 0.62);
  backdrop-filter: blur(10px);
  padding: clamp(1.25rem, 2.2vw, 2.1rem);
  display: flex; flex-direction: column; gap: 0.6rem;
  /* Grid stretches every card to the tallest, so cards with shorter copy
     carry the slack. Centring splits that slack evenly instead of letting
     it all collect below the text. */
  justify-content: center;
  min-height: 175px;
}
.commit__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.25; color: #fff; }
/* No `margin-top: auto` here. It pinned the description to the bottom of
   the card, so the space above it stretched while the space below stayed
   at exactly the padding value — which is what made top and bottom read
   unequal. Content now flows from the top against uniform padding. */
.commit__d { font-size: var(--t-sm); color: rgba(255,255,255,0.72); line-height: 1.6; }

/* Outcome stats */
.outcome {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.on-dark .outcome { border-top-color: rgba(255,255,255,0.25); }
.outcome__n {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.015em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.on-dark .outcome__n { color: #fff; }
.outcome__n sup { font-size: 0.45em; color: var(--blue); vertical-align: super; margin-left: 0.08em; }
.on-dark .outcome__n sup { color: var(--sky); }
.outcome__l {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 0.6rem;
}
.on-dark .outcome__l { color: rgba(255,255,255,0.6); }

/* ============================================================
   LIGHT SECTIONS
   ============================================================ */
.sec { position: relative; padding-block: clamp(2rem, 3.6vw, 3.75rem); }
.sec--tight { padding-block: clamp(1.25rem, 2.2vw, 2rem); }
.sec--white { background: var(--white); }

.sec__head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem);
}
.sec__title { font-size: var(--t-h2); margin-top: 1.1rem; max-width: 18ch; }

/* ---------- TRUST ---------- */
.trust { border-block: 1px solid var(--line); padding-block: 1.85rem; }
.trust__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 4vw, 3.5rem); flex-wrap: wrap; }
.trust__label { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.trust__names { display: flex; gap: clamp(1.25rem, 4vw, 3.25rem); flex-wrap: wrap; align-items: center; }
.trust__names span {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(0.95rem, 1.45vw, 1.25rem);
  letter-spacing: -0.005em; color: var(--ink-3);
  transition: color 0.4s var(--ease);
}
.trust__names span:hover { color: var(--navy); }

/* ---------- CERTIFICATIONS ---------- */
/* Three cards, full width. Kept separate from the 4-up grids below so
   removing a card doesn't leave an orphan cell. */
.certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cert {
  background: var(--white);
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: background 0.45s var(--ease);
}
.cert:hover { background: var(--alice); }
.cert__ico { width: 2rem; height: 2rem; color: var(--blue); margin-bottom: 0.35rem; }
.cert__ico svg { width: 100%; height: 100%; }
.cert__t { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.004em; color: var(--navy); }
.cert__d { font-size: 1.06rem; color: var(--ink-2); line-height: 1.55; }

/* ---------- SERVICES ---------- */
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid;
  grid-template-columns: 5rem 1fr 1.15fr auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.35rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background 0.5s var(--ease);
}
.svc::before {
  content: '';
  position: absolute;
  left: calc(var(--gut) * -1); right: calc(var(--gut) * -1);
  top: 0; bottom: 0;
  background: var(--blue-soft);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.svc:hover::before { opacity: 1; }
.svc__n { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease); }
.svc:hover .svc__n { color: var(--blue); }
.svc__t {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.003em; line-height: 1.1;
  color: var(--navy);
}
.svc__d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }
.svc__go {
  width: 2.65rem; height: 2.65rem;
  border: 1px solid var(--line-2); border-radius: 50%;
  display: grid; place-items: center; flex: none;
  color: var(--navy);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
              transform 0.45s var(--ease), color 0.45s var(--ease);
}
.svc__go svg { width: 1rem; height: 1rem; }
.svc:hover .svc__go { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(-45deg); }

/* ---------- PROCESS ---------- */
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.proc__step {
  background: var(--white);
  padding: clamp(1.35rem, 2.5vw, 2.35rem);
  display: flex; flex-direction: column; gap: 0.8rem;
  min-height: 240px;
  transition: background 0.5s var(--ease);
}
.proc__step:hover { background: var(--alice); }
.proc__n {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.2em; color: var(--blue);
  font-variant-numeric: tabular-nums;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
  margin-bottom: 0.35rem;
}
.proc__t { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.008em; line-height: 1.2; color: var(--navy); }
.proc__d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.62; margin-top: auto; }

/* ---------- QUOTES ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quote { background: var(--white); padding: clamp(1.5rem, 2.8vw, 2.6rem); display: flex; flex-direction: column; gap: 1.35rem; }
.quote__mark { font-family: var(--display); font-size: 3rem; line-height: 0.6; color: var(--sky); }
.quote__body { font-size: 1.38rem; line-height: 1.68; color: var(--ink); flex: 1; }
.quote__who { padding-top: 1.15rem; border-top: 1px solid var(--line); }
.quote__name { font-weight: 700; font-size: var(--t-sm); color: var(--navy); }
.quote__role { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.1em; color: var(--ink-3); margin-top: 0.3rem; }

/* ---------- CLOSE ---------- */
.close { text-align: center; max-width: 48rem; margin-inline: auto; }
.close__title { font-size: var(--t-h2); margin-block: 1.35rem 1.6rem; max-width: 15ch; margin-inline: auto; }
.close__lead { margin-inline: auto; text-align: center; margin-bottom: 2.5rem; }
.close__cta { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ---------- FOOTER ---------- */
.foot { background: var(--navy); color: rgba(255,255,255,0.75); }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 4rem); padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.foot__mark { width: 180px; margin-bottom: 1.35rem; }
.foot__blurb { font-size: var(--t-sm); color: rgba(255,255,255,0.68); max-width: 34ch; line-height: 1.65; }
.foot__h { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky); margin-bottom: 1.25rem; }
.foot__list { display: flex; flex-direction: column; gap: 0.75rem; }
.foot__list a, .foot__list li { font-size: var(--t-sm); color: rgba(255,255,255,0.7); transition: color 0.3s var(--ease); }
.foot__list a:hover { color: #fff; }
.foot__bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.25rem; flex-wrap: wrap;
  padding-block: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.1em; color: rgba(255,255,255,0.5);
}

/* ---------- FLOATING WHATSAPP ---------- */
.wa {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90; width: 3.3rem; height: 3.3rem; border-radius: 50%;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 10px 30px -10px rgba(37, 211, 102, 0.7);
  transition: transform 0.45s var(--ease);
}
.wa:hover { transform: scale(1.08); }
.wa svg { width: 1.55rem; height: 1.55rem; fill: #fff; }

/* ---------- MOBILE STICKY CTA ---------- */
.mbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -18px rgba(28,61,104,0.6);
  padding: 0.6rem 0.75rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  gap: 0.6rem;
}
.mbar a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 0.5rem;
  font-family: var(--ui); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.005em;
  border-radius: 2px;
}
.mbar svg { width: 1rem; height: 1rem; }
.mbar__call { border: 1px solid var(--line-2); color: var(--navy); }
.mbar__quote { background: var(--blue); color: #fff; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.phero {
  position: relative;
  padding-block: clamp(6rem, 9.5vw, 8rem) clamp(1.75rem, 3.2vw, 2.75rem);
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.phero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.14;
  filter: saturate(0.5);
}
.phero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), var(--alice));
}
.phero .wrap { position: relative; z-index: 2; }
.phero__title { font-size: clamp(2.15rem, 5.8vw, 4.75rem); margin-top: 1.2rem; max-width: 16ch; }
.phero__lead { margin-top: 1.5rem; }

.crumb { font-family: var(--ui); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.005em; color: var(--ink-3); display: flex; gap: 0.5rem; }
.crumb a { transition: color 0.3s var(--ease); }
.crumb a:hover { color: var(--blue); }

/* ---------- SPLIT ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.split--rev > *:first-child { order: 2; }
.split__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--platinum); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body p + p { margin-top: 1.1rem; }
.split__body p { color: var(--ink-2); }

.feat { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.85rem; }
.feat li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.feat li::before { content: ''; width: 5px; height: 5px; background: var(--blue); flex: none; margin-top: 0.62em; }

/* ---------- CARDS ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--white); padding: clamp(1.35rem, 2.4vw, 2.15rem); display: flex; flex-direction: column; gap: 0.65rem; transition: background 0.5s var(--ease); }
.card:hover { background: var(--alice); }
.card__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; color: var(--navy); }
.card__d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }
.card__role { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.75rem);
  text-align: left;
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  font-weight: 700; letter-spacing: -0.005em; color: var(--navy);
  transition: color 0.35s var(--ease);
}
.faq__q:hover { color: var(--blue); }
.faq__ico { position: relative; width: 14px; height: 14px; flex: none; }
.faq__ico::before, .faq__ico::after { content: ''; position: absolute; background: var(--blue); transition: transform 0.45s var(--ease); }
.faq__ico::before { top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -0.75px; }
.faq__ico::after  { left: 50%; top: 0; height: 100%; width: 1.5px; margin-left: -0.75px; }
.faq__item.is-open .faq__ico::after { transform: scaleY(0); }
.faq__a { overflow: hidden; height: 0; }
.faq__a p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; max-width: 68ch; padding-bottom: 1.6rem; }

/* ---------- CONTACT ---------- */
.contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.75rem, 4vw, 4rem); }
.cdetail { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.25rem; }
.cdetail__row { display: flex; flex-direction: column; gap: 0.3rem; padding-bottom: 1.35rem; border-bottom: 1px solid var(--line); }
.cdetail__l { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.cdetail__v { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.004em; color: var(--navy); }
.cdetail__v a { transition: color 0.3s var(--ease); }
.cdetail__v a:hover { color: var(--blue); }
.cdetail__s { font-size: var(--t-sm); color: var(--ink-2); }

.form { background: var(--white); border: 1px solid var(--line); padding: clamp(1.35rem, 3.5vw, 2.85rem); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 0.65rem 0; color: var(--navy);
  font-family: var(--body); font-size: var(--t-body);
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.field textarea { resize: vertical; min-height: 105px; }
.field select { appearance: none; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--blue); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field.is-bad input, .field.is-bad select { border-bottom-color: #C4453C; }
.field__err { font-size: 0.75rem; color: #C4453C; display: none; }
.field.is-bad .field__err { display: block; }

.form__note { font-size: 1.06rem; color: var(--ink-3); margin-top: 1.35rem; line-height: 1.6; }
.form__note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

.form__ok { display: none; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; padding-block: 2.5rem; }
/* Keyed to [data-form] rather than .form so every form on the site
   gets the success state, not just the one on the contact page. */
[data-form].is-sent .form__grid,
[data-form].is-sent .book__row,
[data-form].is-sent .field,
[data-form].is-sent .form__note,
[data-form].is-sent .btn { display: none; }
[data-form].is-sent .form__ok { display: flex; }
.form__ok svg { width: 2.75rem; height: 2.75rem; color: var(--blue); }

/* ---------- PROJECT BOOK / LEAD CAPTURE ---------- */
.book {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.book__title { font-size: var(--t-h3); margin-block: 1rem 0.9rem; }
.book__form { display: flex; flex-direction: column; gap: 1.1rem; }
.book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sector { background: var(--white); padding: clamp(1.35rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: 0.55rem; transition: background 0.45s var(--ease); }
.sector:hover { background: var(--alice); }
.sector__n { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; color: var(--blue); }
.sector__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; color: var(--navy); }
.sector__d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

/* ============================================================
   STATIC FALLBACK (phones, save-data, reduced motion)
   ============================================================ */
.act--static { height: auto; }
.act--static .act__stage {
  position: relative; height: auto; min-height: 100svh;
  background-size: cover; background-position: center;
}
.act--static .act__meta { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1500px) { :root { --rail: 90px; } }

@media (max-width: 1180px) {
  /* .certs stays 3-up here — a 2-col grid would strand the third card
     in a half-width orphan row. It drops straight to 1-up at 620px. */
  .commits, .proc, .cards { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
  .outcome { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .sectors { grid-template-columns: repeat(2, 1fr); }
  .svc { grid-template-columns: 3.5rem 1fr auto; }
  .svc__d { display: none; }
  .rail { display: none; }
}

/* The phone drops out earlier than the rest of the nav.

   Between 900 and ~1010px the bar carries logo (215) + five links (373)
   + phone (90) + CTA (106) = 784px before gaps, against roughly 796px of
   content width. The CTA gets pushed past the right edge, and because
   <html> uses `overflow-x: clip` it is silently cut rather than producing
   a scrollbar. Dropping the phone here reclaims ~113px and keeps the CTA
   on screen; the sticky call bar below covers the same need. */
@media (max-width: 1050px) {
  .nav__tel { display: none; }
  .mbar { display: flex; }
  .wa { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  body { padding-bottom: 4.5rem; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav .btn { display: none; }
  .sec__head { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; }
  .split--rev > *:first-child { order: 0; }
  .contact { grid-template-columns: 1fr; }
  .book { grid-template-columns: 1fr; }
  /* .mbar, .wa offset and body padding now start at 1050px, above. */
  /* Act scroll distance is NOT collapsed here. Whether an act pins is
     decided once, by .act--static, so CSS and JS cannot disagree — a
     width rule here would flatten the scroll track while the script was
     still scrubbing a pinned video. */
}

@media (max-width: 620px) {
  .commits, .proc, .cards, .certs, .sectors { grid-template-columns: 1fr; }
  .outcome { grid-template-columns: 1fr 1fr; }
  .form__grid, .book__row { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .act__meta { display: none; }
  .trust__row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .commit, .proc__step { min-height: 0; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .scroll-cue span:last-child { display: none; }
}

@media (max-width: 400px) {
  .outcome { grid-template-columns: 1fr; }
  .mbar a { font-size: 0.6875rem; padding-inline: 0.35rem; }
}

/* ---------- SHORT VIEWPORTS ----------
   The acts are pinned at 100svh, so on a short laptop the copy plus
   its grid can exceed the stage. Tighten rather than clip. */
@media (max-height: 900px) and (min-width: 900px) {
  :root { --t-hero: clamp(2rem, 4.6vw, 3.6rem); }
  .act__title { font-size: clamp(1.5rem, 3.2vw, 2.5rem); }
  .act .lead  { font-size: 0.95rem; max-width: 48ch; }
  .hero__title { margin-block: 1rem 1.4rem; }
  .hero__lead  { margin-bottom: 1.6rem; }
  .commits    { margin-top: 1.6rem; }
  .commit     { min-height: 0; padding: 1.05rem 1.2rem; gap: 0.4rem; }
  .commit__t  { font-size: 0.9375rem; }
  .commit__d  { font-size: 0.8125rem; line-height: 1.5; }
  .outcome    { margin-top: 1.5rem; padding-top: 1.35rem; }
  .outcome__n { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
}

/* ---------- MOTION SAFETY ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .act, .act--hero, .act--close { height: auto !important; }
  .act__stage { position: relative; height: auto; min-height: 100svh; }
  .scroll-cue__track i { animation: none; }
}

/* ============================================================
   SCROLL MOUSE — video acts
   ============================================================ */
.scroll-mouse {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}
.scroll-mouse__body {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  position: relative;
}
.scroll-mouse__wheel {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #fff;
  animation: wheel 2s var(--ease) infinite;
}
@keyframes wheel {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}
.scroll-mouse__chev {
  width: 14px; height: 14px;
  color: rgba(255, 255, 255, 0.85);
  animation: chev 2s var(--ease) infinite;
}
.scroll-mouse__chev svg { width: 100%; height: 100%; }
@keyframes chev {
  0%, 100% { transform: translateY(0);   opacity: 0.45; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
.ba {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  user-select: none;
  touch-action: pan-y;
}
.ba__img { position: absolute; inset: 0; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Top layer is clipped from the right by the handle position. */
.ba__img--before { clip-path: inset(0 var(--ba-clip, 50%) 0 0); }

.ba__tag {
  position: absolute;
  top: 1rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(28, 61, 104, 0.72);
  backdrop-filter: blur(6px);
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
  pointer-events: none;
}
.ba__tag--before { left: 1rem; }
.ba__tag--after  { right: 1rem; }

.ba__line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 14px rgba(0,0,0,0.35);
}
.ba__grip {
  position: absolute;
  top: 50%; left: var(--ba-pos, 50%);
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 22px rgba(10, 25, 45, 0.35);
  pointer-events: none;
  color: var(--navy);
}
.ba__grip svg { width: 20px; height: 20px; }

/* The range input is the real control: draggable, focusable, and
   arrow-key operable for free. Visually transparent, sits on top. */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: none;
}
.ba__range::-webkit-slider-thumb { appearance: none; width: 46px; height: 100%; }
.ba__range::-moz-range-thumb { width: 46px; height: 100%; border: 0; }
.ba__range:focus-visible ~ .ba__grip {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ============================================================
   INTERACTIVE TIMELINE
   ============================================================ */
.tl { border-top: 1px solid var(--line); }
.tl__item { border-bottom: 1px solid var(--line); }
.tl__head {
  width: 100%;
  display: grid;
  grid-template-columns: 4.5rem 1fr 8rem auto;
  gap: clamp(0.75rem, 2vw, 2rem);
  align-items: center;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  text-align: left;
  transition: color 0.35s var(--ease);
}
.tl__head:hover { color: var(--blue); }
.tl__wk {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.tl__t {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--navy);
  transition: color 0.35s var(--ease);
}
.tl__head:hover .tl__t { color: var(--blue); }
.tl__meta {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-align: right;
}
.tl__ico { position: relative; width: 13px; height: 13px; flex: none; }
.tl__ico::before, .tl__ico::after {
  content: ''; position: absolute; background: var(--blue);
  transition: transform 0.45s var(--ease);
}
.tl__ico::before { top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -0.75px; }
.tl__ico::after  { left: 50%; top: 0; height: 100%; width: 1.5px; margin-left: -0.75px; }
.tl__item.is-open .tl__ico::after { transform: scaleY(0); }

.tl__body { overflow: hidden; height: 0; }
.tl__inner { padding: 0 0 1.5rem clamp(0rem, 4.5rem, 5.25rem); }
.tl__inner p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; max-width: 62ch; }
.tl__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tl__list span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--alice);
  border: 1px solid var(--line);
  padding: 0.35rem 0.65rem;
  border-radius: 2px;
}
.sec--white .tl__list span { background: var(--white); }

/* Progress bar across the whole programme */
.tl__scale {
  display: flex;
  height: 6px;
  margin-bottom: 2rem;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line);
}
.tl__scale i { display: block; height: 100%; transition: opacity 0.35s var(--ease); }
.tl__scale i.is-dim { opacity: 0.28; }

/* ============================================================
   COVERAGE MAP
   ============================================================ */
.cov { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.cov__stage {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1rem, 2.5vw, 2rem);
}
.cov__svg { width: 100%; height: auto; display: block; }

.cov__zone { cursor: pointer; }
.cov__zone rect, .cov__zone circle, .cov__zone polygon {
  fill: var(--alice);
  stroke: var(--line-2);
  stroke-width: 1.5;
  transition: fill 0.35s var(--ease), stroke 0.35s var(--ease);
}
.cov__zone text {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink-2);
  pointer-events: none;
  transition: fill 0.35s var(--ease);
}
.cov__zone:hover rect, .cov__zone:hover polygon,
.cov__zone.is-active rect, .cov__zone.is-active polygon {
  fill: var(--sky);
  stroke: var(--blue);
}
.cov__zone.is-hq rect { fill: var(--blue); stroke: var(--blue); }
.cov__zone.is-hq text { fill: #fff; }
.cov__zone:hover text, .cov__zone.is-active text { fill: var(--navy); }
.cov__zone.is-hq:hover text, .cov__zone.is-hq.is-active text { fill: #fff; }

.cov__panel { display: flex; flex-direction: column; gap: 1rem; }
.cov__name { font-size: var(--t-h3); font-weight: 700; color: var(--navy); letter-spacing: -0.008em; }
.cov__desc { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; }
.cov__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 0.5rem; }
.cov__fig { background: var(--white); padding: 1rem 1.15rem; }
.sec--white .cov__fig { background: var(--alice); }
.cov__fig b {
  display: block;
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cov__fig span {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.4rem;
}
.cov__hint {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .cov { grid-template-columns: 1fr; }
  .ba { aspect-ratio: 4 / 3; }
  .tl__head { grid-template-columns: 3.5rem 1fr auto; }
  .tl__meta { display: none; }
  .tl__inner { padding-left: 0; }
}
@media (max-width: 620px) {
  .cov__figs { grid-template-columns: 1fr; }
  .scroll-mouse { bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-mouse__wheel, .scroll-mouse__chev { animation: none; }
}

/* ============================================================
   GOOGLE REVIEWS
   ============================================================ */
.rev-head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.rev-head__score {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.rev-head__meta { display: flex; flex-direction: column; gap: 0.3rem; }
.rev-head__count {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rev-head__g {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
.rev-head__g:hover { color: var(--blue); }
.rev-head__g svg { width: 1.05rem; height: 1.05rem; }

/* ---------- STARS ---------- */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 1rem; height: 1rem; }
.stars .on  { fill: #F5A623; }
.stars .off { fill: var(--line-2); }

/* ---------- GRID ---------- */
.revs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.rev {
  background: var(--white);
  /* Padding was the bug in the old quote cards: a vw-based value ate
     most of the card at wide viewports, leaving a ~3-word text column.
     Capped low enough that the text column always stays readable. */
  padding: clamp(1.35rem, 1.8vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rev__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rev__date {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.rev__body {
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink);
  flex: 1;
  /* Equal-height cards: clamp long reviews, link out for the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev__more {
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue);
  align-self: flex-start;
  transition: opacity 0.3s var(--ease);
}
.rev__more:hover { opacity: 0.7; }

.rev__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.rev__av {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--sky);
  color: var(--navy);
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 700;
  overflow: hidden;
}
.rev__av img { width: 100%; height: 100%; object-fit: cover; }
.rev__name { font-family: var(--ui); font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
.rev__src {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.15rem;
}

@media (max-width: 1100px) { .revs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  {
  .revs { grid-template-columns: 1fr; }
  .rev__body { -webkit-line-clamp: 6; }
  .rev-head__g { margin-left: 0; width: 100%; }
}

/* ============================================================
   SOCIAL ICONS
   Brand colours by request. Note these four hues sit outside the
   locked five-colour palette — kept contained to the glyphs only.
   ============================================================ */
.socials { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; }
.socials a {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.socials svg { width: 100%; height: 100%; display: block; }
.socials a:hover { transform: translateY(-2px); }

/* Over the dark hero video the glyphs need to read before the nav
   sticks; brand colours are bright enough on navy without help. */
.nav .socials a { width: 1.45rem; height: 1.45rem; }

.foot .socials { margin-top: 1.4rem; }
.foot .socials a { width: 1.75rem; height: 1.75rem; }

.cdetail .socials { margin-top: 0.35rem; }
.cdetail .socials a { width: 1.75rem; height: 1.75rem; }

/* Hidden below 1150px, not 900px.

   The header carries logo (215) + five nav links (373) + phone (90) +
   socials (91) + CTA (106) = 875px of content before gaps. Below roughly
   1070px that no longer fits, and the CTA — the conversion path — is the
   element that gets pushed out. `overflow-x: clip` on <html> hides the
   overflow rather than producing a scrollbar, so it fails silently.

   The phone stays because it is a one-tap call; the socials go because
   they are also in the footer and on the contact page. */
@media (max-width: 1150px) {
  .nav .socials { display: none; }
}

/* ============================================================
   PROJECT CARDS + LIGHTBOX
   ============================================================ */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proj {
  position: relative;
  display: block;
  background: var(--white);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.proj img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.proj:hover img { transform: scale(1.04); }

.proj__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(20,45,78,0.88) 0%, rgba(20,45,78,0.35) 45%, rgba(20,45,78,0.05) 100%);
  transition: opacity 0.5s var(--ease);
}
.proj:hover .proj__veil { opacity: 0.85; }

.proj__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  z-index: 2;
}
.proj__sector {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
}
.proj__loc {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.008em;
  color: #fff;
  margin-top: 0.3rem;
}
.proj__count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.proj__count svg { width: 0.95rem; height: 0.95rem; }

/* ---------- LIGHTBOX ---------- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12, 28, 48, 0.96);
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
}
.lb.is-open { display: flex; }
body.lb-open { overflow: hidden; }

.lb__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  color: #fff;
  flex: none;
}
.lb__title { display: flex; flex-direction: column; gap: 0.2rem; }
.lb__sector {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky);
}
.lb__loc { font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: #fff; }
.lb__count {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.12em; color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
}
.lb__x {
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; flex: none;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.lb__x:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.lb__x svg { width: 1.1rem; height: 1.1rem; }

.lb__stage {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 clamp(1rem, 6vw, 5rem) 1rem;
  min-height: 0;
}
.lb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.lb__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  display: grid; place-items: center;
  color: #fff;
  transition: background 0.35s var(--ease);
}
.lb__nav:hover { background: rgba(255,255,255,0.28); }
.lb__nav svg { width: 1.2rem; height: 1.2rem; }
.lb__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lb__nav[disabled] { opacity: 0.25; pointer-events: none; }

.lb__strip {
  display: flex; gap: 0.5rem;
  padding: 0.85rem clamp(1rem, 3vw, 2rem) 1.25rem;
  overflow-x: auto;
  flex: none;
  scrollbar-width: thin;
}
.lb__thumb {
  width: 74px; height: 56px;
  flex: none;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb:hover { opacity: 0.8; }
.lb__thumb.is-current { opacity: 1; border-color: var(--blue); }

@media (max-width: 1100px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .proj-grid { grid-template-columns: 1fr; }
  .lb__thumb { width: 58px; height: 44px; }
  .lb__nav { width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .proj:hover img { transform: none; }
}