/* ==========================================================================
   SCHRANZ LIMITED — Design System
   Brand: navy #001254 · lime #8BBA34 · Fonts: Size (display) / Avenir LT Std
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Size';
  src: url('../fonts/Size-Bold.woff2') format('woff2'),
       url('../fonts/Size-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('../fonts/AvenirLTStd-Roman.woff2') format('woff2'),
       url('../fonts/AvenirLTStd-Roman.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --navy:        #001254;
  --navy-deep:   #000A2E;
  --navy-ink:    #00081F;
  --navy-mid:    #112365;
  --navy-soft:   #223476;

  --lime:        #8BBA34;
  --lime-bright: #9CCB45;
  --lime-dark:   #719430;

  --paper:       #FFFFFF;
  --paper-2:     #F6F7F9;
  --paper-3:     #EDEFF3;
  --line:        #E1E4EC;
  --line-soft:   rgba(0,18,84,.10);

  --ink:         #0A1024;
  --muted:       #5C6478;
  --muted-2:     #8A91A3;

  --ff-display: 'Size', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:    'Avenir LT Std', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --shell:      min(1420px, 100% - 9vw);
  --shell-nar:  min(1120px, 100% - 9vw);

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);

  --head-h: 96px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: clamp(15.5px, .55vw + 13.6px, 17.5px);
  line-height: 1.72;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; }
p { margin: 0; }
::selection { background: var(--lime); color: var(--navy-deep); }

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

/* ---------- Type scale ---------- */
.d1, .d2, .d3, .d4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.9rem, 7.2vw, 6.4rem); letter-spacing: .004em; line-height: .94; }
.d2 { font-size: clamp(2.25rem, 4.6vw, 4.1rem); }
.d3 { font-size: clamp(1.65rem, 2.7vw, 2.5rem); line-height: 1.06; }
.d4 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); line-height: 1.14; }

.lead {
  font-size: clamp(1.05rem, 1.05vw + .78rem, 1.4rem);
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}
.muted { color: var(--muted); }

/* Eyebrow — small caps label with the logo's rebar tick */
.eyebrow {
  display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--ff-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--lime-dark);
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55;
}
.eyebrow--on-dark { color: var(--lime-bright); }
.eyebrow--plain::before { display: none; }

/* ---------- Layout ---------- */
.shell { width: var(--shell); margin-inline: auto; }
.shell-nar { width: var(--shell-nar); margin-inline: auto; }
.section { padding-block: clamp(72px, 9.5vw, 150px); position: relative; }
.section--tight { padding-block: clamp(56px, 6.5vw, 96px); }
.section--paper { background: var(--paper-2); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy .lead, .section--navy .muted { color: rgba(255,255,255,.66); }

.stack-sm > * + * { margin-top: .9rem; }
.stack   > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.4rem; }

.sec-head { display: grid; gap: 1.4rem; max-width: 62ch; }
.sec-head--split {
  max-width: none;
  grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
@media (max-width: 900px) { .sec-head--split { grid-template-columns: 1fr; align-items: start; } }

/* Rebar rule — echoes the vertical strokes in the wordmark */
.rebar {
  display: flex; gap: 9px; align-items: flex-end; height: 30px;
}
.rebar i {
  display: block; width: 2px; height: 100%; background: var(--navy);
  opacity: .22; border-radius: 1px;
  transform-origin: bottom;
}
.rebar i:nth-child(3n)   { height: 62%; }
.rebar i:nth-child(4n+2) { height: 82%; }
.rebar--lime i { background: var(--lime); opacity: .9; }
.rebar--light i { background: #fff; opacity: .3; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--navy); --fg: #fff; --bd: var(--navy);
  position: relative; display: inline-flex; align-items: center; gap: .85em;
  padding: 1.02em 1.9em;
  font-family: var(--ff-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--bd);
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lime);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--navy-deep); border-color: var(--lime); }
.btn .btn-ar { transition: transform .45s var(--ease); }
.btn:hover .btn-ar { transform: translateX(5px); }

.btn--ghost { --bg: transparent; --fg: var(--navy); --bd: var(--line); }
.btn--ghost:hover { border-color: var(--lime); }
.btn--light { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.btn--outline-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.35); }
.btn--lime { --bg: var(--lime); --fg: var(--navy-deep); --bd: var(--lime); }
.btn--lime::after { background: #fff; }

/* Text link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--ff-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy); padding-bottom: .35em;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--ease-out), color .3s var(--ease);
}
.tlink:hover, .tlink:focus-visible { background-size: 100% 2px; }
.tlink--light { color: #fff; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 130;
  height: var(--head-h);
  display: flex; align-items: center;
  transition: height .45s var(--ease), background-color .45s var(--ease),
              box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr__in { width: var(--shell); margin-inline: auto; display: flex; align-items: center; gap: 2rem; }
.hdr__logo { display: block; width: 138px; flex: none; position: relative; z-index: 2; }
.hdr__logo img { width: 100%; transition: opacity .35s var(--ease); }
.hdr__logo .lg-white { position: absolute; inset: 0; }

.hdr__nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.4rem, 2.3vw, 2.7rem); }
.hdr__link {
  position: relative;
  font-family: var(--ff-mono); font-size: .76rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding-block: .5rem;
  transition: color .3s var(--ease);
}
.hdr__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--lime); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.hdr__link:hover::after, .hdr__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hdr__cta { margin-left: .6rem; padding: .82em 1.5em; }

/* transparent (over hero) state */
.hdr--top { color: #fff; }
.hdr--top .lg-blue { opacity: 0; }
.hdr--top .lg-white { opacity: 1; }
.hdr--top .btn--nav { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.4); }

/* solid state */
.hdr--solid {
  height: 74px;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  color: var(--navy);
  box-shadow: 0 10px 40px -28px rgba(0,18,84,.55);
}
.hdr--solid .lg-blue { opacity: 1; }
.hdr--solid .lg-white { opacity: 0; }
.hdr--solid .btn--nav { --bg: var(--navy); --fg: #fff; --bd: var(--navy); }
.hdr--hidden { transform: translateY(-105%); }

/* While the mobile drawer is open the header floats over navy — force the light treatment */
.hdr--drawer {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none; color: #fff;
}
.hdr--drawer .lg-blue { opacity: 0; }
.hdr--drawer .lg-white { opacity: 1; }
.hdr { transition-property: height, background-color, box-shadow, border-color, transform; }

/* Burger */
.burger {
  display: none; width: 46px; height: 46px; margin-left: auto;
  position: relative; z-index: 120; flex: none;
}
.burger span {
  position: absolute; left: 11px; width: 24px; height: 2px; background: currentColor;
  transition: transform .45s var(--ease-out), opacity .25s var(--ease), background-color .3s;
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }
.burger.is-open span { background: #fff; }
.burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 110;
  background: var(--navy);
  display: grid; align-content: center;
  padding: 8vh 9vw 6vh;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .78s var(--ease-out);
  pointer-events: none;
}
.drawer.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.drawer__nav { display: grid; gap: .35rem; }
.drawer__nav a {
  font-family: var(--ff-display); font-size: clamp(2rem, 9vw, 3.4rem);
  color: #fff; line-height: 1.08; padding-block: .18em;
  opacity: 0; transform: translateY(26px);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out), color .3s;
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a:hover { color: var(--lime-bright); }
.drawer__foot {
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.16);
  display: grid; gap: .5rem; color: rgba(255,255,255,.7); font-size: .95rem;
  opacity: 0; transition: opacity .5s .3s var(--ease);
}
.drawer.is-open .drawer__foot { opacity: 1; }
.drawer__foot a:hover { color: var(--lime-bright); }

@media (max-width: 1040px) {
  .hdr__nav { display: none; }
  .burger { display: block; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: grid; overflow: hidden; background: var(--navy-deep); }
.hero__media { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
}
.hero__slide.is-active img { animation: kenburns 9s linear forwards; }
@keyframes kenburns { from { transform: scale(1.045); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active img { animation: none; transform: scale(1.02); }
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,10,46,.30) 0%, rgba(0,18,84,.62) 55%, rgba(0,18,84,.86) 100%),
    linear-gradient(to right, rgba(0,8,31,.72) 0%, rgba(0,8,31,.18) 62%, rgba(0,8,31,.4) 100%);
}
.hero__grain { position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; pointer-events: none; }

.hero__body {
  position: relative; z-index: 2;
  width: var(--shell); margin-inline: auto;
  align-self: center;
  padding-top: var(--head-h);
  color: #fff;
  max-width: 100%;
}
.hero__inner { max-width: min(60rem, 100%); }
.hero h1 { color: #fff; margin-block: 1.4rem 1.8rem; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span {
  display: block; transform: translateY(105%);
  animation: riseIn .95s var(--ease-out) forwards;
}
.hero h1 .ln:nth-child(2) > span { animation-delay: .1s; }
.hero h1 .ln:nth-child(3) > span { animation-delay: .2s; }
@keyframes riseIn { to { transform: none; } }
.hero__sub { max-width: 46ch; color: rgba(255,255,255,.78); font-size: clamp(1rem,.8vw+.85rem,1.22rem); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

.hero__fade-up { opacity: 0; animation: fadeUp .9s .45s var(--ease-out) forwards; }
.hero__fade-up--d2 { animation-delay: .62s; }
.hero__fade-up--d3 { animation-delay: .78s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Hero bottom bar: slide index + scroll cue */
.hero__bar {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(to top, rgba(0,8,31,.5), transparent);
}
.hero__bar-in {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-block: 1.15rem;
  color: rgba(255,255,255,.72);
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
}
.hero__dots { display: flex; gap: .55rem; align-items: center; }
.hero__dots button {
  width: 40px; height: 2px; background: rgba(255,255,255,.28); position: relative; overflow: hidden;
}
.hero__dots button::after {
  content: ""; position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left;
}
.hero__dots button.is-active::after { animation: dotFill 9s linear forwards; }
@keyframes dotFill { to { transform: scaleX(1); } }
.hero__cue { display: inline-flex; align-items: center; gap: .7rem; }
.hero__cue i { display: block; width: 1px; height: 26px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.hero__cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--lime);
  animation: cueRun 2.1s var(--ease) infinite;
}
@keyframes cueRun { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }
@media (max-width: 720px) { .hero__cue { display: none; } }

/* Hero label caption (right rail, echoes original vertical rules) */
.hero__rail {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 3; display: grid; gap: 1.6rem; padding-right: max(2.2rem, 4.5vw);
  writing-mode: vertical-rl;
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 600;
}
.hero__rail span { position: relative; padding-block: 1.2rem; }
.hero__rail span::before {
  content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.22);
}
@media (max-width: 1100px) { .hero__rail { display: none; } }

/* ---------- Page hero (inner pages) ---------- */
.phero {
  position: relative; min-height: clamp(420px, 58vh, 620px);
  display: grid; align-items: end; overflow: hidden; background: var(--navy);
}
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.phero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,10,46,.55), rgba(0,18,84,.66) 60%, rgba(0,18,84,.88)),
    linear-gradient(to right, rgba(0,8,31,.6), transparent 70%);
}
.phero__body {
  position: relative; z-index: 2; width: var(--shell); margin-inline: auto;
  color: #fff; padding-block: clamp(3rem, 6vw, 5.4rem);
  padding-top: calc(var(--head-h) + 2rem);
}
.phero h1 { color: #fff; margin-top: 1.2rem; }
.phero__sub { margin-top: 1.4rem; max-width: 54ch; color: rgba(255,255,255,.76); }

/* Breadcrumb */
.crumb {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600;
}
.crumb a:hover { color: var(--lime-bright); }
.crumb i { width: 16px; height: 1px; background: currentColor; opacity: .5; display: block; }

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
[data-rv] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
[data-rv="fade"] { transform: none; }
[data-rv="left"] { transform: translateX(-34px); }
[data-rv="right"] { transform: translateX(34px); }
[data-rv="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); }
[data-rv].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
[data-rv-d="1"] { transition-delay: .1s; }
[data-rv-d="2"] { transition-delay: .2s; }
[data-rv-d="3"] { transition-delay: .3s; }
[data-rv-d="4"] { transition-delay: .4s; }
[data-rv-d="5"] { transition-delay: .5s; }
/* On narrow screens slide vertically — a horizontal offset would push the page sideways */
@media (max-width: 900px) {
  [data-rv="left"], [data-rv="right"] { transform: translateY(30px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .hero h1 .ln > span, .hero__fade-up { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   INTRO / SPLIT
   ========================================================================== */
.split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center;
}
.split--rev > :first-child { order: 2; }
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 2.6rem; }
  .split--rev > :first-child { order: 0; }
}

.figure { position: relative; }
.figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.figure--wide img { aspect-ratio: 16/11; }
.figure__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--navy); color: #fff; padding: 1.1rem 1.5rem;
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}
.figure__badge {
  position: absolute; right: -1px; top: -1px;
  background: var(--lime); color: var(--navy-deep);
  padding: 1.3rem 1.5rem; display: grid; gap: .1rem; text-align: right;
}
.figure__badge b { font-family: var(--ff-display); font-size: 2rem; line-height: 1; }
.figure__badge span { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }

/* Offset duo image composition */
.duo { position: relative; padding-bottom: 12%; padding-right: 14%; }
.duo__a img { aspect-ratio: 4/4.4; object-fit: cover; width: 100%; }
.duo__b {
  position: absolute; right: 0; bottom: 0; width: 52%;
  box-shadow: -26px -26px 0 0 #fff;
}
.duo__b img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.section--paper .duo__b { box-shadow: -26px -26px 0 0 var(--paper-2); }
.duo__line {
  position: absolute; left: -10px; top: 8%; bottom: 8%; width: 1px; background: var(--line);
}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); }
.section--navy .stats { background: rgba(255,255,255,.14); }
.stat { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem,2vw,2rem); }
.section--navy .stat { background: var(--navy); }
.section--paper .stat { background: var(--paper-2); }
.stat b {
  display: block; font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 1; color: var(--navy);
  letter-spacing: -.01em;
}
.section--navy .stat b { color: #fff; }
.stat b em { font-style: normal; color: var(--lime); }
.stat > span {
  display: block; margin-top: .85rem;
  font-family: var(--ff-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.section--navy .stat > span { color: rgba(255,255,255,.6); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Stats: invitation to join the count ---------- */
.statscta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  margin-top: clamp(2rem, 3.6vw, 3.2rem);
  padding-top: clamp(1.7rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255,255,255,.16);
}
.statscta__t {
  font-family: var(--ff-display);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.16;
  color: #fff; max-width: 36ch;
}
@media (max-width: 620px) { .statscta { display: grid; justify-items: start; } }

/* ==========================================================================
   SERVICES — editorial numbered rows
   ========================================================================== */
.srv {
  border-top: 1px solid var(--line);
  --srv-pad-y: clamp(2rem, 3.4vw, 3.1rem);
  --srv-peek-w: clamp(200px, 15vw, 260px);
}
.section--navy .srv { border-color: rgba(255,255,255,.16); }
.srv__row {
  position: relative; display: grid;
  grid-template-columns: 84px minmax(0,1fr) minmax(0,1.05fr) 60px var(--srv-peek-w);
  gap: clamp(1.2rem, 3vw, 3rem); align-items: center;
  padding-block: var(--srv-pad-y);
  border-bottom: 1px solid var(--line);
  transition: color .45s var(--ease);
}
.section--navy .srv__row { border-color: rgba(255,255,255,.16); }
.srv__row::before {
  content: ""; position: absolute; left: -3vw; right: -3vw; top: 0; bottom: 0;
  background: var(--navy); z-index: -1;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s var(--ease-out);
}
.srv__row:hover::before { transform: scaleY(1); transform-origin: top; }
.srv__row:hover { color: #fff; }
.srv__row:hover .srv__num { color: var(--lime); transform: translateX(.85rem); }
.srv__row:hover .srv__txt { color: rgba(255,255,255,.72); }
.srv__row:hover .srv__ar { border-color: var(--lime); background: var(--lime); color: var(--navy-deep); }
.srv__row:hover .srv__ar svg { transform: translate(3px,-3px); }
.srv__num {
  font-family: var(--ff-mono); font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  color: var(--muted-2); display: inline-block; justify-self: start;
  transition: color .45s var(--ease), transform .45s var(--ease-out);
}
.srv__ttl { font-family: var(--ff-display); font-size: clamp(1.45rem, 2.5vw, 2.35rem); line-height: 1.04; }
.srv__txt { color: var(--muted); font-size: .98rem; line-height: 1.66; transition: color .45s var(--ease); }
.srv__ar {
  width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; justify-self: end;
  transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.srv__ar svg { transition: transform .45s var(--ease); }
/* preview image revealed on hover (desktop) — occupies the last reserved column so it never
   covers text, and bleeds through the row padding so it stands full row height */
.srv__peek {
  display: block; width: 100%;
  align-self: stretch; margin-block: calc(var(--srv-pad-y) * -1);
  overflow: hidden; justify-self: end;
  opacity: 0; transform: scale(.9); pointer-events: none;
  transition: opacity .5s var(--ease), transform .65s var(--ease-out);
}
.srv__peek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.srv__row:hover .srv__peek { opacity: 1; transform: scale(1); }
@media (max-width: 1200px) {
  .srv__peek { display: none; }
  .srv__row { grid-template-columns: 84px minmax(0,1fr) minmax(0,1.05fr) 60px; }
}
@media (max-width: 800px) {
  .srv { --srv-pad-y: 1.9rem; }
  .srv__row { grid-template-columns: 1fr; gap: .8rem; }
  .srv__ar { justify-self: start; width: 46px; height: 46px; margin-top: .4rem; }
  .srv__row::before { left: -5vw; right: -5vw; }
}

/* Simple service chips list */
.chips { display: flex; flex-wrap: wrap; gap: .65rem; }
.chip {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .68em 1.1em; border: 1px solid var(--line);
  font-family: var(--ff-mono); font-size: .73rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  transition: border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.chip::before { content: ""; width: 5px; height: 5px; background: var(--lime); flex: none; }
.chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.section--navy .chip { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.86); }
.section--navy .chip:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.filters button {
  padding: .72em 1.35em; border: 1px solid var(--line);
  font-family: var(--ff-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: all .35s var(--ease);
}
.filters button:hover { border-color: var(--navy); color: var(--navy); }
.filters button.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.grid-p {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.5rem);
}
@media (max-width: 1000px) { .grid-p { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grid-p { grid-template-columns: 1fr; } }

.pcard {
  position: relative; display: grid; overflow: hidden;
  background: var(--navy-deep);
  transition: opacity .45s var(--ease), transform .55s var(--ease-out);
}
.pcard.is-hidden { display: none; }
/* the ratio sizes the row; height:100% then fills whatever the tallest card in
   that row settled on, so a mixed row never leaves a strip of background */
.pcard__img { position: relative; aspect-ratio: 4/3.3; height: 100%; overflow: hidden; }
.pcard--tall .pcard__img { aspect-ratio: 4/5.1; }
/* .pcard--wide is the authored hint; .is-wide / .is-full are what the row
   balancer in main.js sets once it has seen how many cards are visible */
.pcard--wide, .pcard.is-wide { grid-column: span 2; }
.pcard--wide .pcard__img, .pcard.is-wide .pcard__img { aspect-ratio: 16/8.6; }
.pcard.is-full .pcard__img { aspect-ratio: 21/9; }
@media (max-width: 620px) {
  .pcard--wide, .pcard.is-wide { grid-column: span 1; }
  .pcard--wide .pcard__img, .pcard.is-wide .pcard__img { aspect-ratio: 4/3.3; }
}
.pcard__img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); filter: saturate(.92);
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.pcard:hover .pcard__img img { transform: scale(1.09); filter: saturate(1.05); }
.pcard__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,10,46,.94) 0%, rgba(0,10,46,.72) 22%, rgba(0,18,84,.28) 52%, rgba(0,18,84,0) 82%);
  opacity: .95; transition: opacity .5s var(--ease);
}
.pcard:hover .pcard__veil { opacity: 1; }
.pcard__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.3rem, 2.1vw, 2rem);
  color: #fff;
}
.pcard__cat {
  display: inline-block; margin-bottom: .7rem;
  font-family: var(--ff-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--lime-bright);
}
.pcard__ttl {
  font-family: var(--ff-display); font-size: clamp(1.12rem, 1.5vw, 1.5rem); line-height: 1.1;
}
.pcard__go {
  display: flex; align-items: center; gap: .55rem; margin-top: .9rem;
  font-family: var(--ff-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .5s var(--ease-out);
}
.pcard:hover .pcard__go { opacity: 1; transform: none; }
.pcard__rule {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--lime); z-index: 3;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.pcard:hover .pcard__rule { transform: scaleX(1); }

/* Closing band under a project grid — picks the reader up where the work ends */
.wcta {
  position: relative; margin-top: clamp(2.4rem, 4.5vw, 4rem);
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(1.4rem, 3vw, 3rem); align-items: center;
  padding: clamp(1.9rem, 3.2vw, 2.8rem) clamp(1.6rem, 3vw, 2.8rem);
  background: var(--paper); border: 1px solid var(--line);
}
.wcta::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 3px; background: var(--lime);
}
.wcta__t {
  font-family: var(--ff-display); line-height: 1.12; color: var(--navy);
  font-size: clamp(1.35rem, 2.1vw, 1.95rem); margin-top: .6rem; max-width: 24ch;
}
.wcta__acts { display: flex; flex-wrap: wrap; gap: .9rem; }
@media (max-width: 860px) { .wcta { grid-template-columns: 1fr; } }

/* Empty filter state */
.grid-empty {
  display: none; padding: 3.5rem 0; text-align: center; color: var(--muted);
  font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
}
.grid-empty.is-on { display: block; }

/* Marquee band */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line-soft);
  padding-block: 1.6rem; background: var(--paper);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track { display: flex; gap: 3.6rem; width: max-content; animation: slideX 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slideX { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: 3.6rem;
  font-family: var(--ff-display); font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  color: var(--navy); opacity: .5; white-space: nowrap;
  transition: opacity .4s var(--ease);
}
.marquee:hover .marquee__item { opacity: .82; }
.marquee__item::after { content: ""; width: 6px; height: 6px; background: var(--lime); flex: none; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
/* ---- Single-review carousel: one testimonial at a time, centred ---- */
.revx { text-align: center; }
.revx .eyebrow { justify-content: center; }

.revx__stage {
  position: relative; display: grid; align-items: start;
  margin-top: clamp(2.4rem, 4.5vw, 3.8rem);
  transition: height .6s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .revx__stage { transition: none; } }
.revx__item {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .65s var(--ease), transform .8s var(--ease-out), visibility .65s;
  pointer-events: none;
}
.revx__item.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.revx__mark {
  display: block; margin: 0 auto clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--lime);
}
.revx__mark svg { display: block; margin-inline: auto; width: clamp(30px, 3vw, 38px); height: auto; }
.revx__q {
  font-size: clamp(1.12rem, 1.85vw, 1.72rem); line-height: 1.5;
  color: rgba(255,255,255,.94); max-width: 36ch; margin-inline: auto;
  text-wrap: pretty;
}
.revx__n {
  display: block; font-style: normal;
  margin-top: clamp(1.7rem, 2.8vw, 2.4rem);
  font-family: var(--ff-mono); font-weight: 600; font-size: .76rem;
  letter-spacing: .22em; text-transform: uppercase; color: #fff;
}
.revx__m {
  display: block; margin-top: .65rem;
  font-size: .9rem; color: rgba(255,255,255,.55);
}
.revx__m a { color: var(--lime-bright); }
.revx__m a:hover { text-decoration: underline; }

.revx__ctrl {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
}
.revx__arw {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255,255,255,.28); color: #fff;
  display: grid; place-items: center;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.revx__arw:hover { background: var(--lime); border-color: var(--lime); color: var(--navy-deep); }
.revx__dots { display: flex; align-items: center; gap: .5rem; }
.revx__dots button {
  width: 9px; height: 9px; border-radius: 99px;
  background: rgba(255,255,255,.28);
  transition: width .5s var(--ease-out), background-color .4s var(--ease);
}
.revx__dots button.is-on { width: 28px; background: var(--lime); }
@media (max-width: 520px) { .revx__arw { width: 46px; height: 46px; } }

/* Attribution styles shared with the review block on project pages */
.rev__mark {
  font-family: var(--ff-display); font-size: 3.4rem; line-height: .6;
  color: var(--lime); height: .5em;
}
.rev__by {
  display: grid; gap: .3rem;
  padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16);
}
.rev__n { font-family: var(--ff-display); font-size: 1.02rem; color: #fff; line-height: 1.2; }
.rev__r {
  font-family: var(--ff-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55);
}

/* ==========================================================================
   CAREERS
   ========================================================================== */
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1rem,1.6vw,1.4rem); }
.job {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .45s var(--ease), transform .6s var(--ease-out), box-shadow .5s var(--ease);
}
.job:hover { border-color: transparent; transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgba(0,18,84,.42); }
.job__img { position: relative; aspect-ratio: 4/2.85; overflow: hidden; background: var(--navy); }
.job__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-out), filter .6s var(--ease);
  filter: grayscale(.15);
}
.job:hover .job__img img { transform: scale(1.07); filter: grayscale(0); }
.job__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,18,84,.5), transparent 58%);
}
.job__body { padding: clamp(1.4rem,2vw,1.9rem); display: grid; gap: .75rem; flex: 1; align-content: start; }
.job__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  font-family: var(--ff-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.job__meta span { display: inline-flex; align-items: center; gap: .5em; }
.job__meta span::before { content: ""; width: 4px; height: 4px; background: var(--lime); }
.job__ttl { font-family: var(--ff-display); font-size: 1.32rem; line-height: 1.14; color: var(--navy); }
.job__txt { color: var(--muted); font-size: .95rem; }
.job__foot { margin-top: auto; padding: 0 clamp(1.4rem,2vw,1.9rem) clamp(1.4rem,2vw,1.9rem); }

/* ==========================================================================
   VALUES / ICON CARDS
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1px; background: var(--line-soft); }
.section--navy .cards { background: rgba(255,255,255,.15); }
.card {
  background: var(--paper); padding: clamp(1.8rem, 2.8vw, 2.7rem);
  display: grid; gap: 1rem; align-content: start;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.section--paper .card { background: var(--paper-2); }
.section--navy .card { background: var(--navy); }
.card:hover { background: var(--navy); color: #fff; }
.section--navy .card:hover { background: var(--navy-mid); }
.card:hover .card__t { color: #fff; }
.card:hover .card__d { color: rgba(255,255,255,.72); }
.card:hover .card__ico { border-color: var(--lime); background: var(--lime); color: var(--navy-deep); }
.card__ico {
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--navy);
  transition: all .5s var(--ease);
}
.section--navy .card__ico { border-color: rgba(255,255,255,.22); color: var(--lime-bright); }
.card__t { font-family: var(--ff-display); font-size: 1.22rem; color: var(--navy); transition: color .5s var(--ease); }
.section--navy .card__t { color: #fff; }
.card__d { color: var(--muted); font-size: .96rem; transition: color .5s var(--ease); }
.section--navy .card__d { color: rgba(255,255,255,.62); }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.tl { position: relative; display: grid; gap: 0; }
.tl::before { content: ""; position: absolute; left: 0; top: .8rem; bottom: 2rem; width: 1px; background: var(--line); }
.tl__i {
  position: relative; padding: 0 0 clamp(2rem,3.4vw,3rem) clamp(1.8rem, 4vw, 3.4rem);
  display: grid; gap: .6rem;
}
.tl__i::before {
  content: ""; position: absolute; left: -4px; top: .75rem;
  width: 9px; height: 9px; background: var(--lime); border-radius: 50%;
  box-shadow: 0 0 0 5px var(--paper);
}
.section--paper .tl__i::before { box-shadow: 0 0 0 5px var(--paper-2); }
.tl__y {
  font-family: var(--ff-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--lime-dark);
}
.tl__t { font-family: var(--ff-display); font-size: 1.32rem; color: var(--navy); line-height: 1.16; }
.tl__d { color: var(--muted); font-size: .98rem; max-width: 60ch; }

/* ---------- Process: pinned timeline + companion panel ---------- */
/*
 * The section pins itself once it reaches the top of the viewport: the grid
 * stops moving and the next couple of screens of scrolling walk the highlight
 * down the five steps instead. The last step is held for a beat, then the pin
 * releases and the page carries on. JS owns the two moving parts — the height
 * of .process (how much scroll the pin consumes) and --pin-top — because both
 * depend on the measured header and panel heights.
 */
.process { position: relative; }
.process__pin {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items: start;
}
@media (min-width: 901px) {
  .process.is-pinned > .process__pin { position: sticky; top: var(--pin-top, 110px); }
  .process.is-pinned .process__aside { position: static; }
  /*
   * Pinned, all five steps have to sit on one screen at once — the highlight
   * moving down a list you can see in full is the effect. Tighter than the
   * flowing version, which can afford to breathe because you scroll past it.
   */
  .process.is-pinned .tl__i { padding-bottom: clamp(1rem, 1.7vh, 1.9rem); }
  .process.is-pinned .tl__d { font-size: .93rem; }
  /*
   * Fallback for viewports too short to hold the panel: no pin, so the aside
   * sticks on its own and the container needs a tail, or it would be released
   * before the final step ever goes active.
   */
  .process:not(.is-pinned) .process__aside { position: sticky; top: calc(74px + 2.5rem); }
  .process:not(.is-pinned) { padding-bottom: clamp(240px, 34vh, 420px); }
}
@media (max-width: 900px) {
  .process__pin { grid-template-columns: 1fr; }
  .process__aside { display: none; }
}

.pstick { position: relative; overflow: hidden; background: var(--navy-deep); }
.pstick__media { position: relative; aspect-ratio: 4/4.6; }
.pstick__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity .9s var(--ease), transform 1.4s var(--ease-out);
}
.pstick__media img.is-on { opacity: 1; transform: scale(1); }
.pstick__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,10,46,.92) 0%, rgba(0,18,84,.34) 48%, rgba(0,18,84,.06) 100%);
}
.pstick__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.4rem,2.4vw,2.1rem); color: #fff; }
.pstick__n {
  display: block; font-family: var(--ff-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--lime-bright); margin-bottom: .6rem;
}
.pstick__t {
  font-family: var(--ff-display); font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.08; min-height: 2.2em;
}
.pstick__bar { display: flex; gap: 6px; margin-top: 1.3rem; }
.pstick__bar i {
  display: block; height: 2px; flex: 1; background: rgba(255,255,255,.26);
  transition: background-color .5s var(--ease);
}
.pstick__bar i.is-on { background: var(--lime); }

/* active step emphasis in the timeline itself */
.tl__i { transition: opacity .5s var(--ease); }
.process .tl__i { opacity: .48; }
.process .tl__i.is-active { opacity: 1; }
.process .tl__i::before { transition: transform .45s var(--ease-out), background-color .45s var(--ease); }
.process .tl__i.is-active::before { transform: scale(1.45); }
@media (max-width: 900px) { .process .tl__i { opacity: 1; } }

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-block: 1.5rem; text-align: left;
  font-family: var(--ff-display); font-size: clamp(1.05rem,1.4vw,1.28rem); color: var(--navy);
  transition: color .35s var(--ease);
}
.acc__btn:hover { color: var(--lime-dark); }
/* on the navy band the default navy text would be invisible */
.section--navy .acc { border-top-color: rgba(255,255,255,.18); }
.section--navy .acc__i { border-bottom-color: rgba(255,255,255,.18); }
.section--navy .acc__btn { color: #fff; }
.section--navy .acc__btn:hover,
.section--navy .acc__i.is-open .acc__btn { color: var(--lime-bright); }
.section--navy .acc__panel > div { color: rgba(255,255,255,.68); }
.acc__ico { position: relative; width: 18px; height: 18px; flex: none; }
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; background: currentColor; transition: transform .45s var(--ease-out), opacity .3s;
}
.acc__ico::before { left: 0; right: 0; top: 8px; height: 2px; }
.acc__ico::after  { top: 0; bottom: 0; left: 8px; width: 2px; }
.acc__i.is-open .acc__ico::after { transform: scaleY(0); }
.acc__panel { overflow: hidden; height: 0; transition: height .5s var(--ease-out); }
.acc__panel > div { padding-bottom: 1.6rem; color: var(--muted); max-width: 74ch; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

.cinfo { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cinfo__i {
  display: grid; grid-template-columns: 44px 1fr; gap: 1.2rem; align-items: start;
  padding-block: 1.5rem; border-bottom: 1px solid var(--line);
}
.cinfo__ico { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--navy); }
.cinfo__l {
  font-family: var(--ff-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .4rem;
}
.cinfo__v { color: var(--navy); line-height: 1.6; }
.cinfo__v a { transition: color .3s var(--ease); }
.cinfo__v a:hover { color: var(--lime-dark); }

/* Form */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .5rem; }
.field label {
  font-family: var(--ff-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.field input, .field textarea, .field select {
  width: 100%; padding: .95em 1.1em;
  font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 0;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s;
  appearance: none;
}
.section--paper .field input, .section--paper .field textarea, .section--paper .field select { background: #fff; }
.field textarea { min-height: 148px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235C6478' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1em center;
  padding-right: 2.8em;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0,18,84,.09);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.form__note { font-size: .82rem; color: var(--muted-2); }
.form__ok {
  display: none; padding: 1.1rem 1.3rem; background: rgba(139,186,52,.12);
  border-left: 3px solid var(--lime); color: var(--navy); font-size: .95rem;
}
.form__ok.is-on { display: block; }

.map-wrap { position: relative; overflow: hidden; background: var(--paper-3); }
.map-wrap iframe { width: 100%; height: clamp(320px, 46vh, 500px); border: 0; display: block; filter: grayscale(1) contrast(1.06); transition: filter .6s var(--ease); }
.map-wrap:hover iframe { filter: grayscale(0) contrast(1); }

/* ==========================================================================
   PROJECT DETAIL PAGE
   Repeatable template — every block below is driven by content only, so a
   WordPress project post can render identically with different data.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fact strip under the hero — four interchangeable presentations.

   The markup never changes:
     <dl class="facts [modifier]"><div class="fact"><dt>Label</dt><dd>Value</dd></div>…

   Bare .facts  ....... A · the original full-bleed white strip (revert target)
   .facts--band ....... B · navy band welded to the hero, no seam
   .facts--card ....... C · white card lifted over the hero's bottom edge
   .facts--rail ....... D · quiet inline spec line, no boxes

   Swap the modifier on the <dl> in project-*.html and single-project.php.
   -------------------------------------------------------------------------- */

/* ---- A · strip (default / original) ---- */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.fact { background: var(--paper); padding: clamp(1.3rem,2.2vw,2rem) clamp(1rem,1.8vw,1.6rem); }
.fact dt {
  font-family: var(--ff-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .6rem;
}
.fact dd {
  margin: 0; font-family: var(--ff-display); font-size: clamp(1rem,1.35vw,1.28rem);
  line-height: 1.16; color: var(--navy);
}
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }

/* ---- B · band — reads as the last line of the hero rather than the first
        line of the page. Content is inset to the shell so the labels sit on
        the same left edge as the h1 above them. ---- */
.facts--band {
  gap: 0; background: var(--navy-deep);
  border-block: 0; border-bottom: 2px solid var(--lime);
  padding-inline: calc((100% - var(--shell)) / 2);
}
.facts--band .fact {
  background: none; padding: clamp(1.5rem,2.6vw,2.1rem) 0;
  padding-left: clamp(1.2rem,2.4vw,2.2rem);
  border-left: 1px solid rgba(255,255,255,.16);
}
.facts--band .fact:first-child { padding-left: 0; border-left: 0; }
.facts--band .fact dt { color: rgba(255,255,255,.52); }
.facts--band .fact dd { color: #fff; }
@media (max-width: 820px) {
  .facts--band .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts--band .fact:nth-child(n+3) { padding-top: 0; }
}
@media (max-width: 420px) {
  .facts--band .fact { padding-left: 0; border-left: 0; padding-block: .9rem; }
  .facts--band .fact:first-child { padding-top: clamp(1.5rem,2.6vw,2.1rem); }
}

/* ---- C · card — the data lifts off the page and overlaps the hero, so the
        strip belongs to the project rather than floating in the whitespace
        below it. ---- */
.facts--card {
  position: relative; z-index: 3;
  width: var(--shell); margin-inline: auto;
  margin-top: clamp(-4.5rem, -4.4vw, -3rem);
  gap: 1px; background: var(--line);
  border-block: 0; border-top: 3px solid var(--lime);
  box-shadow: 0 26px 60px -30px rgba(0,10,46,.5);
}
.facts--card .fact { padding: clamp(1.5rem,2.4vw,2.2rem) clamp(1.2rem,2vw,1.8rem); }
/* Give the hero room so the card never lands on the standfirst. */
.phero:has(+ .facts--card) .phero__body { padding-bottom: clamp(6.5rem, 10vw, 9rem); }
@media (max-width: 820px) { .facts--card { margin-top: -2.4rem; } }
@media (max-width: 520px) {
  .facts--card { width: 100%; margin-top: 0; box-shadow: none; }
  .phero:has(+ .facts--card) .phero__body { padding-bottom: clamp(3rem, 6vw, 5.4rem); }
}

/* ---- D · rail — label and value on one line, ruled top and bottom. The
        quietest option: it hands the page straight to the narrative. ---- */
.facts--rail {
  display: flex; flex-wrap: wrap;
  gap: .9rem clamp(1.8rem,3.6vw,3.6rem);
  width: var(--shell); margin-inline: auto;
  margin-top: clamp(1.6rem,3vw,2.6rem);
  background: none;
  border-block: 1px solid var(--line);
  padding-block: clamp(1.2rem,2vw,1.6rem);
}
.facts--rail .fact {
  background: none; padding: 0;
  display: flex; align-items: baseline; gap: .85rem;
}
.facts--rail .fact dt { margin-bottom: 0; font-size: .63rem; }
.facts--rail .fact dd { font-size: clamp(.98rem,1.1vw,1.1rem); }
@media (max-width: 420px) { .facts--rail { row-gap: .7rem; } }

/* Phase switcher — the two-posts-in-one presentation */
.phases {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.phase-tab {
  display: inline-flex; align-items: center; gap: .75em;
  padding: .9em 1.5em; border: 1px solid var(--line);
  font-family: var(--ff-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: all .4s var(--ease);
}
.phase-tab .ph-n {
  font-size: .66rem; color: var(--lime-dark); transition: color .4s var(--ease);
}
.phase-tab:hover { border-color: var(--navy); color: var(--navy); }
.phase-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.phase-tab.is-active .ph-n { color: var(--lime-bright); }

/* End-of-gallery hand-off — the tabs alone are easy to miss */
.phase-end {
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  border: 1px solid var(--line); background: var(--paper);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.6vw, 2.4rem);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1.2rem, 2.5vw, 2.5rem);
  align-items: center;
}
@media (max-width: 760px) { .phase-end { grid-template-columns: 1fr; } }
.phase-end__k {
  display: block; font-family: var(--ff-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .55rem;
}
.phase-end__t {
  font-family: var(--ff-display); font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.12; color: var(--navy);
}
.phase-end__d { margin-top: .5rem; color: var(--muted); font-size: .95rem; max-width: 52ch; }
.phase-end .btn { white-space: nowrap; }

.phase-panel { display: none; }
.phase-panel.is-on { display: block; animation: phaseIn .6s var(--ease-out); }
@keyframes phaseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .phase-panel.is-on { animation: none; } }

/* Gallery */
.gal { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.6rem,1vw,1rem); }
/* min-height:100% makes every figure fill its row: the aspect-ratio presets
   below still decide how tall the row is, but a landscape frame sharing a row
   with a portrait one grows to match instead of leaving white space beneath it.
   It has to be min-height rather than height, with width/min-width pinned: a
   definite height feeds back through aspect-ratio into the figure's width, so
   the tile grows past its column track and eats the grid gap to its right.
   The image is absolutely positioned so it fills the stretched tile instead of
   its own ratio box. */
.gal figure {
  margin: 0; position: relative;
  width: 100%; min-width: 0; min-height: 100%;
  overflow: hidden; cursor: zoom-in; background: var(--navy-deep);
}
.gal figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--ease-out), filter .5s var(--ease);
}
.gal figure:hover img { transform: scale(1.06); }
.gal figure::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,18,84,0); transition: background-color .45s var(--ease);
}
.gal figure:hover::after { background: rgba(0,18,84,.16); }
.gal figure .gal__zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--navy);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .45s var(--ease-out);
}
.gal figure:hover .gal__zoom { opacity: 1; transform: none; }

/* span presets — reused for every project so galleries stay consistent */
.g-2 { grid-column: span 2; aspect-ratio: 4/3; }
.g-3 { grid-column: span 3; aspect-ratio: 3/2; }
.g-4 { grid-column: span 4; aspect-ratio: 16/9; }
.g-6 { grid-column: span 6; aspect-ratio: 21/9; }
/* 4/5 rather than 3/4: close enough to the landscape tiles it shares a row with
   that it lifts the row height a little instead of dragging it up dramatically */
.g-2t { grid-column: span 2; aspect-ratio: 4/5; }
/* Every gallery row is authored to span exactly 6 columns, so the grid holds 6
   columns down to the phone breakpoint — the tablet tier used to drop to 4,
   which wrapped the last tile of a row out on its own and left a hole beside
   it. The images simply get narrower instead. Below 560px every figure goes
   full width, so no row can gap there either. */
@media (max-width: 560px) {
  .gal { grid-template-columns: repeat(2, 1fr); }
  .g-3, .g-4, .g-6 { grid-column: span 2; aspect-ratio: 3/2; }
  .g-2, .g-2t { grid-column: span 2; aspect-ratio: 4/3; }
}

/* Scope list */
.scope { display: grid; gap: 0; border-top: 1px solid var(--line); }
.scope__i {
  display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: baseline;
  padding-block: 1.05rem; border-bottom: 1px solid var(--line);
}
.scope__n {
  font-family: var(--ff-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; color: var(--lime-dark);
}
.scope__t { color: var(--navy); font-size: 1rem; }

/* Pull quote */
.pull {
  border-left: 3px solid var(--lime); padding: .4rem 0 .4rem clamp(1.2rem,2.4vw,2rem);
  font-family: var(--ff-display); font-size: clamp(1.25rem,2.1vw,1.9rem);
  line-height: 1.24; color: var(--navy); max-width: 30ch;
}
.section--navy .pull { color: #fff; }

/* Prev / next project */
.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); }
@media (max-width: 700px) { .pnav { grid-template-columns: 1fr; } }
.pnav__i {
  position: relative; overflow: hidden; min-height: 210px;
  display: flex; align-items: flex-end; padding: clamp(1.4rem,2.4vw,2.2rem);
  color: #fff; background: var(--navy);
}
.pnav__i img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .42; transition: transform 1.1s var(--ease-out), opacity .5s var(--ease);
}
.pnav__i:hover img { transform: scale(1.07); opacity: .58; }
.pnav__i > span { position: relative; z-index: 2; display: block; }
.pnav__k {
  font-family: var(--ff-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--lime-bright); margin-bottom: .55rem;
}
.pnav__t { font-family: var(--ff-display); font-size: clamp(1.2rem,1.9vw,1.7rem); line-height: 1.1; }
.pnav__i--next { text-align: right; justify-content: flex-end; }

/* First or last project — the missing neighbour's slot links to the archive
   instead of sitting empty. No thumbnail to carry it, so the tile earns its
   presence from a ruled navy ground and a lime wipe on hover. */
.pnav--single { grid-template-columns: 1fr; }
.pnav__i--all {
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px),
    linear-gradient(135deg, var(--navy-mid), var(--navy-deep) 70%);
}
.pnav__i--all::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--lime); transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease);
}
.pnav__i--all.pnav__i--next::after { transform-origin: right center; }
.pnav__i--all:hover::after, .pnav__i--all:focus-visible::after { transform: scaleX(1); }
.pnav__ar { display: inline-block; margin-left: .3em; transition: transform .45s var(--ease); }
.pnav__i--all:hover .pnav__ar, .pnav__i--all:focus-visible .pnav__ar { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .pnav__i--all::after, .pnav__ar { transition: none; }
}

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,8,31,.94);
  display: none; align-items: center; justify-content: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.lb.is-on { display: flex; animation: lbIn .35s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb__fig { margin: 0; max-width: min(1200px, 92%); max-height: 100%; display: grid; gap: .9rem; }
.lb__fig img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  object-fit: contain; margin-inline: auto;
}
.lb__fig figcaption {
  text-align: center; color: rgba(255,255,255,.72);
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.lb__x {
  position: absolute; top: clamp(.8rem,2vw,1.6rem); right: clamp(.8rem,2vw,1.6rem);
  width: 46px; height: 46px; font-size: 1.9rem; line-height: 1;
  color: #fff; border: 1px solid rgba(255,255,255,.28);
  transition: all .35s var(--ease);
}
.lb__x:hover { background: var(--lime); border-color: var(--lime); color: var(--navy-deep); }
.lb__nav {
  flex: none; width: 52px; height: 52px; font-size: 2rem; line-height: 1;
  color: #fff; border: 1px solid rgba(255,255,255,.28);
  transition: all .35s var(--ease);
}
.lb__nav:hover { background: var(--lime); border-color: var(--lime); color: var(--navy-deep); }
@media (max-width: 640px) {
  .lb__nav { position: absolute; bottom: 1.2rem; width: 46px; height: 46px; }
  .lb__prev { left: 22%; } .lb__next { right: 22%; }
  .lb__fig img { max-height: 66vh; }
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta {
  position: relative; overflow: hidden; background: var(--navy);
  color: #fff; padding-block: clamp(64px, 8.5vw, 128px);
}
.cta__bg { position: absolute; inset: 0; opacity: .18; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__in { position: relative; z-index: 2; width: var(--shell); margin-inline: auto; }
.cta__grid {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(2rem,4vw,4rem); align-items: end;
}
@media (max-width: 860px) { .cta__grid { grid-template-columns: 1fr; align-items: start; } }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.7); max-width: 52ch; }
.cta__acts { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { background: var(--navy-ink); color: rgba(255,255,255,.66); padding-top: clamp(56px, 7vw, 92px); }
.ftr__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.6rem, 4vw, 4rem);
}
@media (max-width: 980px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr__logo { width: 150px; margin-bottom: 1.5rem; }
.ftr__blurb { font-size: .95rem; max-width: 34ch; line-height: 1.7; }
.ftr__h {
  font-family: var(--ff-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: #fff; margin-bottom: 1.35rem;
}
.ftr__list { display: grid; gap: .78rem; font-size: .95rem; }
.ftr__list a { transition: color .3s var(--ease), padding-left .35s var(--ease); position: relative; }
.ftr__list a:hover { color: var(--lime-bright); padding-left: 12px; }
.ftr__list a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 1px; background: var(--lime);
  opacity: 0; transition: opacity .3s var(--ease);
}
.ftr__list a:hover::before { opacity: 1; }
.ftr__addr { font-style: normal; font-size: .95rem; line-height: 1.75; display: grid; gap: .85rem; }
.ftr__addr a:hover { color: var(--lime-bright); }
.ftr__soc { display: flex; gap: .6rem; margin-top: 1.6rem; }
.ftr__soc a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  transition: all .4s var(--ease);
}
.ftr__soc a:hover { background: var(--lime); border-color: var(--lime); color: var(--navy-deep); transform: translateY(-3px); }
.ftr__bot {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.7rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.45);
}
.ftr__bot a:hover { color: var(--lime-bright); }
.ftr__rebar { display: flex; gap: 7px; align-items: flex-end; height: 20px; }
.ftr__rebar i { width: 2px; height: 100%; background: rgba(255,255,255,.2); display: block; }
.ftr__rebar i:nth-child(3n) { height: 55%; }
.ftr__rebar i:nth-child(4n+2) { height: 78%; background: var(--lime); opacity: .8; }

/* ---------- Back to top ---------- */
.totop {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 50px; height: 50px; display: grid; place-items: center;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .5s var(--ease-out), background-color .35s;
}
.totop.is-on { opacity: 1; pointer-events: auto; transform: none; }
.totop:hover { background: var(--lime); border-color: var(--lime); color: var(--navy-deep); }
@media (max-width: 620px) { .totop { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* ---------- Scroll progress ---------- */
.prog {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 140;
  background: var(--lime); width: 0%;
  transition: width .12s linear;
}

/* ---------- Utilities ---------- */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--navy .hr { background: rgba(255,255,255,.16); }
.tc { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxw-60 { max-width: 60ch; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem;
  font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  transition: top .3s var(--ease);
}
.skip:focus { top: 1rem; }