@import url('../fonts/fonts.css');

/* ==========================================================================
   AGN COMPOSITES
   --------------------------------------------------------------------------
   Everything visual lives in this one file. The design is unchanged from the
   original build - this is the same look expressed as real CSS instead of
   inline style attributes, so it can be edited in one place.

   Contents
     1  Tokens          the palette, type, spacing and motion values
     2  Base            reset and element defaults
     3  Utilities       layout shells, headings, prose, buttons
     4  Header + menu
     5  Home hero + marquee
     6  Page heroes
     7  Content blocks  prose, chips, factor lists, chain
     8  Media           rails, grids, pinned gallery, lightbox
     9  Trackers        reverse engineering steps, timeline
    10  Services + sectors
    11  Legal pages
    12  Contact         form, Turnstile, testimonials, map
    13  Footer + cookie bar
    14  Motion          reveal animations and reduced-motion handling

   Breakpoints match the original JS layout buckets exactly:
     640px  "mid"      two column grids appear
     900px  "wide"     asymmetric editorial layouts, sticky trackers
    1024px  "desktop"  full nav, pinned horizontal gallery
   ========================================================================== */


/* 1  TOKENS
   ========================================================================== */

:root {
  /* Surfaces, darkest first. Sections alternate between --bg and --bg-2. */
  --bg:      #0B0C0D;
  --bg-2:    #141618;
  --bg-3:    #1C1F22;
  --bg-4:    #24282C;

  /* Text, brightest first. */
  --ink:     #E8EBED;
  --ink-2:   #C2C9CE;
  --body:    #A8B0B6;
  --muted:   #8E979E;
  --muted-2: #7E868C;

  /* Brand. */
  --red:     #E0241B;
  --red-lt:  #FF5C52;
  --red-dk:  #8A1710;
  --err:     #FF6259;

  /* Service accent chips. */
  --acc-teal: #2FA8A0;
  --acc-blue: #4A7FB5;
  --acc-grey: #9AA0A6;

  /* Hairlines and glass. */
  --line:    rgba(255, 255, 255, 0.07);
  --line-2:  rgba(255, 255, 255, 0.08);
  --line-3:  rgba(255, 255, 255, 0.12);
  --glass:   rgba(232, 235, 237, 0.07);
  --glass-2: rgba(232, 235, 237, 0.04);
  --glass-3: rgba(232, 235, 237, 0.05);
  --inset:   inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Type. */
  --display: 'Saira', system-ui, sans-serif;
  --sans:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Geometry. --notch is the signature diagonal cut used on banners and the
     sections that tuck up underneath them. Change it once, here. */
  --notch: min(7.87vw, 116px);
  --gut:   clamp(20px, 5vw, 80px);
  --hdr:   72px;

  /* Motion. --ease is the house curve, used on essentially every transition. */
  --ease:  cubic-bezier(.16, 1, .3, 1);
  --ease-2: cubic-bezier(.33, 1, .68, 1);

  /* Scrollbar. Sits a shade above page black so the track reads as a channel
     cut into the page rather than a stripe laid on top of it. */
  --sb-w:          12px;
  --sb-track:      #101315;
  --sb-thumb:      #2E3439;
  --sb-thumb-hover:#454E56;
}


/* 2  BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Anchor jumps must clear the fixed header. */
  scroll-padding-top: var(--hdr);
  /* No scroll-behavior here on purpose. Lenis owns the scroll feel; a CSS
     smooth scroll would animate on top of it with a second, different easing
     curve, which is what makes anchor jumps feel wrong. */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  border: 0;
}

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

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover { color: var(--red); }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
}

p { margin: 0; }

input,
textarea { font: inherit; }

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

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

/* Visible only to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Scrollbars ---------------------------------------------------------
   The page scrollbar is part of the furniture on a site this dark - the stock
   one reads as a bright seam down the edge. This gives it the same treatment
   as everything else: a recessed channel, a flat thumb, and red on grab, which
   matches the header progress bar and every other active state.

   Note for macOS: styling ::-webkit-scrollbar opts out of the auto-hiding
   overlay scrollbar, so the bar becomes permanently visible there. That is the
   trade for controlling how it looks. Delete this block to go back.
   ------------------------------------------------------------------------- */

/* Reserve the gutter permanently so the layout does not jump sideways when the
   menu or lightbox sets overflow:hidden on the body. This property is
   independent of the two styling syntaxes below. */
html { scrollbar-gutter: stable; }

/* The two syntaxes are mutually exclusive, and that matters.

   Chrome 121+ supports the standard scrollbar-width / scrollbar-color. When
   either is set it IGNORES the ::-webkit-scrollbar pseudo-elements outright -
   so declaring both means the standard one silently wins and every detail
   below (the channel border, the inset thumb, red on grab) is thrown away.
   Setting them globally cost exactly that before this was scoped.

   So: pseudo-elements where they exist, standard properties only where they
   do not. */

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: var(--sb-w);
    height: var(--sb-w);
  }
  ::-webkit-scrollbar-track {
    background: var(--sb-track);
    border-left: 1px solid var(--line);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 2px;
    /* A border in the track colour insets the thumb, so it floats in the
       channel instead of filling it wall to wall. */
    border: 3px solid var(--sb-track);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--sb-thumb-hover);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:active {
    background: var(--red);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-corner { background: var(--sb-track); }
}

/* Firefox, which has a much smaller vocabulary: colours only, no geometry. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
  }
}

/* Horizontal scroll rails keep a slimmer version so they do not compete with
   the images they sit under. Same split as above, for the same reason. */
@supports selector(::-webkit-scrollbar) {
  [data-rail]::-webkit-scrollbar { height: 6px; }
  [data-rail]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-left: 0;
  }
  [data-rail]::-webkit-scrollbar-thumb {
    background: #3A4046;
    border: 0;
    border-radius: 0;
  }
  [data-rail]::-webkit-scrollbar-thumb:hover { background: var(--red); }
}

@supports not selector(::-webkit-scrollbar) {
  [data-rail] {
    scrollbar-width: thin;
    scrollbar-color: #3A4046 rgba(255, 255, 255, 0.05);
  }
}


/* 3  UTILITIES
   ========================================================================== */

/* Full-width shell, gutters included. */
.shell {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* Narrower reading shell used inside most content sections. */
.shell-n {
  max-width: 1340px;
  margin: 0 auto;
}

.shell-s { max-width: 1040px; margin: 0 auto; }

/* Section rhythm. */
.sec {
  position: relative;
  padding: clamp(60px, 9vh, 140px) var(--gut);
}
.sec--tight { padding: clamp(56px, 8vh, 110px) var(--gut); }
.sec--flush { padding-left: 0; padding-right: 0; }
.sec--alt   { background: var(--bg-2); }
.sec--edge  { border-top: 1px solid var(--line); }
.sec--clip  { overflow: hidden; }

/* Decorative wash layers. Always aria-hidden in the markup. */
.wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wash--red    { background: radial-gradient(50% 40% at 92% 0%, rgba(224, 36, 27, 0.10) 0%, rgba(11, 12, 13, 0) 66%); }
.wash--red-tl { background: radial-gradient(70% 60% at 8% 0%, rgba(224, 36, 27, 0.14) 0%, rgba(11, 12, 13, 0) 62%); }
.wash--red-bl { background: radial-gradient(52% 44% at 6% 4%, rgba(224, 36, 27, 0.10) 0%, rgba(20, 22, 24, 0) 66%); }
.wash--red-tr { background: radial-gradient(56% 44% at 78% 12%, rgba(224, 36, 27, 0.11) 0%, rgba(11, 12, 13, 0) 70%); }
.wash--red-r  { background: radial-gradient(58% 46% at 85% 26%, rgba(224, 36, 27, 0.12) 0%, rgba(20, 22, 24, 0) 68%); }
.wash--blue   { background: radial-gradient(72% 60% at 50% 0%, rgba(74, 127, 181, 0.20) 0%, rgba(11, 12, 13, 0) 68%); }
.wash--blue-r { background: radial-gradient(50% 40% at 88% 30%, rgba(224, 36, 27, 0.10) 0%, rgba(11, 12, 13, 0) 70%); }
.wash--teal   { background: radial-gradient(60% 50% at 82% 22%, rgba(47, 168, 160, 0.11) 0%, rgba(20, 22, 24, 0) 68%); }
.wash--grey   { background: radial-gradient(64% 56% at 50% 0%, rgba(154, 160, 166, 0.16) 0%, rgba(11, 12, 13, 0) 72%); }
.wash--grey-l { background: radial-gradient(48% 52% at 4% 50%, rgba(154, 160, 166, 0.09) 0%, rgba(11, 12, 13, 0) 68%); }
.wash--centre { background: radial-gradient(60% 140% at 50% 50%, rgba(224, 36, 27, 0.07) 0%, rgba(20, 22, 24, 0) 70%); }
.wash--pin    { background: radial-gradient(46% 40% at 14% 12%, rgba(224, 36, 27, 0.10) 0%, rgba(20, 22, 24, 0) 70%); }

/* Carbon weave texture, used at low opacity behind the menu and footer. */
.wash--weave {
  background-image: url('../img/00-brand/menu-texture.webp');
  background-size: 460px;
  opacity: 0.06;
}

/* Small uppercase mono label that sits above headings. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow--light { color: rgba(232, 235, 237, 0.62); }

/* Display headings. --xl through --sm map to the sizes used in the original. */
.h-xl {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  letter-spacing: -0.032em;
  line-height: 0.94;
  color: var(--ink);
}
.h-lg {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);
  letter-spacing: -0.028em;
  line-height: 0.98;
  color: var(--ink);
  text-wrap: balance;
}
.h-md {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  letter-spacing: -0.024em;
  line-height: 1.04;
  color: var(--ink);
}
.h-sm {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--ink);
}
.h-xs {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.8vw, 1.4rem);
  letter-spacing: -0.014em;
  line-height: 1.2;
  color: var(--ink);
}

/* Body copy. */
.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--body);
}
.lead--bright { color: var(--ink-2); }

.copy {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
}

.note {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Inline links inside prose get a red underline rather than a colour swap. */
.link-u {
  color: var(--ink);
  border-bottom: 1px solid rgba(224, 36, 27, 0.6);
}
.link-u:hover { color: var(--red); }

/* Stacks. */
.stack   { display: flex; flex-direction: column; }
.stack-8  { gap: 8px; }
.stack-10 { gap: 10px; } .stack-12 { gap: 12px; }
.stack-14 { gap: 14px; } .stack-16 { gap: 16px; }
.stack-18 { gap: 18px; } .stack-22 { gap: 22px; }
.stack-24 { gap: 24px; }
.stack-lg { gap: clamp(26px, 4vh, 44px); }
.stack-xl { gap: clamp(28px, 4.5vh, 52px); }

.measure { max-width: 68ch; }

/* Buttons and pills. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 240ms var(--ease), box-shadow 240ms ease,
              background 240ms ease, color 240ms ease;
}

.btn--red {
  background: var(--red);
  color: #FFFFFF;
}
.btn--red:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(224, 36, 27, 0.36);
}

.btn--glass {
  padding: 15px 24px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--line-3);
  color: var(--ink);
  font-size: 0.8125rem;
}
.btn--glass:hover {
  background: var(--red);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* The hero's secondary button brightens rather than turning red. */
.btn--ghost {
  padding: 15px 22px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--line-3);
  color: var(--ink);
  font-size: 0.8125rem;
}
.btn--ghost:hover {
  background: rgba(232, 235, 237, 0.16);
  color: var(--ink);
  transform: translateY(-2px);
}

.btn--self { align-self: flex-start; }

/* Skip link. Off-screen until focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--red);
  color: #FFFFFF;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.skip:focus {
  left: 0;
  color: #FFFFFF;
}


/* 4  HEADER + MENU
   ========================================================================== */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  transform: translateY(0);
  transition: transform 260ms var(--ease);
}
/* Set by JS when scrolling down past 220px. */
.hdr.is-hidden { transform: translateY(-100%); }

.hdr__bar {
  position: relative;
  background: rgba(11, 12, 13, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hdr__inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
  height: var(--hdr);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
}

.hdr__logo {
  display: flex;
  align-items: center;
  line-height: 0;
  flex: 0 0 auto;
}
.hdr__logo img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

.hdr__nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.hdr__right {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 16px);
  justify-content: flex-end;
  flex: 0 0 auto;
}

.hdr__actions {
  display: none;
  align-items: center;
  gap: clamp(8px, 1.6vw, 16px);
}

/* Pill nav links. */
.navlink {
  display: block;
  padding: 9px 13px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--body);
  background: transparent;
  transition: background 240ms ease, color 240ms ease;
}
.navlink:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
/* Current page. */
.navlink[aria-current='page'] {
  color: var(--ink);
  background: rgba(232, 235, 237, 0.09);
}

.navlink--cta {
  padding: 11px 20px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 260ms ease, color 260ms ease, transform 260ms var(--ease);
}
.navlink--cta:hover {
  background: var(--red);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Burger. */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  border: 1px solid var(--line-3);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
}
.burger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
}

/* Scroll progress hairline along the bottom of the header. */
.hdr__prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--red), var(--red-lt));
  box-shadow: 0 0 12px rgba(224, 36, 27, 0.6);
}

@media (min-width: 1024px) {
  .hdr__nav,
  .hdr__actions { display: flex; }
  .burger { display: none; }
}

/* Full-screen menu, compact viewports only. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-2);
  clip-path: polygon(0 0, 200% 0, 200% 100%, -7.87vh 100%);
  animation: agnMenu 420ms var(--ease);
  overflow-y: auto;
  box-shadow: 0 0 120px rgba(0, 0, 0, 0.75);
}
.menu[hidden] { display: none; }

.menu__texture {
  position: absolute;
  inset: 0;
  background-image: url('../img/00-brand/menu-texture.webp');
  background-size: 520px;
  opacity: 0.1;
  pointer-events: none;
}
.menu__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 75% at 88% 4%, rgba(224, 36, 27, 0.16) 0%, rgba(20, 22, 24, 0) 62%);
  pointer-events: none;
}
.menu__inner {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 22px clamp(20px, 7vw, 60px) 44px;
}
.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu__top img {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.menu__close {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 1.125rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.menu__nav {
  display: flex;
  flex-direction: column;
}
.menu__link {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 6.4vw, 2.3rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  padding: 10px 0;
  transition: transform 260ms var(--ease), color 200ms ease;
}
.menu__link:hover {
  transform: translateX(12px);
  color: var(--red);
}
.menu__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
  margin: 14px 0;
}
.menu__meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
  margin-top: auto;
}
.menu__meta a { color: var(--ink); }
.menu__meta .tel { font-size: 1.0625rem; margin-top: 8px; }

/* Stop the page scrolling behind the menu or lightbox. */
body.is-locked { overflow: hidden; }


/* 5  HOME HERO + MARQUEE
   ========================================================================== */

main { display: block; padding-top: var(--hdr); }

.hero {
  position: relative;
  height: min(92vh, 900px);
  min-height: 560px;
  overflow: hidden;
  background: var(--bg);
}

.hero__stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease 300ms;
}
.is-ready .hero__stage { opacity: 1; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms ease;
}
.hero__slide.is-on { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  transform: scale(1);
  transition: transform 0ms linear;
}
/* Slow Ken Burns push on the active slide, plus a short punch-in on arrival. */
.hero__slide.is-on img {
  transform: scale(1.09);
  transition-duration: var(--hero-dur, 3900ms);
  animation: agnPunch 900ms var(--ease);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(4deg,
    rgba(11, 12, 13, 0.97) 0%,
    rgba(11, 12, 13, 0.72) 34%,
    rgba(11, 12, 13, 0.10) 70%,
    rgba(11, 12, 13, 0.55) 100%);
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 12% 88%, rgba(224, 36, 27, 0.16) 0%, rgba(11, 12, 13, 0) 60%);
}
.hero__grain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background-image: url('../img/00-brand/menu-texture.webp');
  background-size: 420px;
  opacity: 0.14;
  mask-image: linear-gradient(to top, #000, transparent);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
}
.hero__sweepwrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 32%;
  background: linear-gradient(90deg,
    rgba(232, 235, 237, 0) 0%,
    rgba(232, 235, 237, 0.13) 50%,
    rgba(232, 235, 237, 0) 100%);
}
.hero__sweep.is-a { animation: agnSweepA 1100ms var(--ease); }
.hero__sweep.is-b { animation: agnSweepB 1100ms var(--ease); }

.hero__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.hero__pad {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--gut) clamp(92px, 14vh, 140px);
}
.hero__lines {
  position: relative;
  min-height: clamp(230px, 28vh, 340px);
}

/* Each headline is stacked at the same baseline and cross-faded. */
.hero__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.hero__line.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* Three headline scales, matching the original per-slide sizing. */
.hero__line--a {
  font-size: clamp(1.6rem, 3.6vw, 3.05rem);
  letter-spacing: -0.022em;
  line-height: 1.06;
  max-width: 34ch;
}
.hero__line--b {
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);
  letter-spacing: -0.028em;
  line-height: 0.98;
  max-width: 16ch;
}
.hero__line--c {
  font-size: clamp(2.9rem, 7.2vw, 5.8rem);
  letter-spacing: -0.032em;
  line-height: 0.94;
  max-width: 13ch;
  text-wrap: normal;
}

/* Words in the first headline rise in one after another on load. */
.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms ease, transform 760ms var(--ease);
}
.is-ready .hero__word { opacity: 1; transform: translateY(0); }
.hero__word:nth-child(1) { transition-delay: 520ms; }
.hero__word:nth-child(2) { transition-delay: 640ms; }
.hero__word:nth-child(3) { transition-delay: 760ms; }

.hero__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 4vh, 40px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease 900ms, transform 700ms var(--ease) 900ms;
}
.is-ready .hero__cta { opacity: 1; transform: translateY(0); }

/* Segmented progress bar + play/pause. */
.hero__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 4.5vh, 42px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  opacity: 0;
  transition: opacity 500ms ease 1020ms;
}
.is-ready .hero__nav { opacity: 1; }

.hero__segs { display: flex; gap: 7px; }
.hero__seg {
  position: relative;
  width: clamp(24px, 5.5vw, 40px);
  height: 20px;
  display: flex;
  align-items: center;
}
.hero__seg > span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(232, 235, 237, 0.24);
}
.hero__seg i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width 220ms linear;
}

.hero__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 100px;
  color: rgba(232, 235, 237, 0.6);
  transition: color 200ms ease, background 200ms ease;
}
.hero__toggle:hover {
  color: var(--ink);
  background: rgba(232, 235, 237, 0.1);
}
/* Only one of the two icons shows, depending on state. */
.hero__toggle .i-play { display: none; }
.hero__toggle.is-paused .i-play { display: block; }
.hero__toggle.is-paused .i-pause { display: none; }

/* Championship marquee. */
.marquee {
  position: relative;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.marquee__inner {
  position: relative;
  padding: clamp(26px, 4vh, 40px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 24px);
}
.marquee__label { padding: 0 var(--gut); }
.marquee__mask {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: agnRoll 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(30px, 4vw, 60px);
  padding-right: clamp(30px, 4vw, 60px);
}
.marquee__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted-2);
  transition: color 300ms ease;
}
.marquee__name:hover { color: var(--ink); }
.marquee__tick {
  display: block;
  width: 1px;
  height: 22px;
  background: var(--line-3);
  transform: skewX(-4.5deg);
}


/* 6  PAGE HEROES
   ========================================================================== */

/* a) Banner hero with the diagonal cut along the bottom. */
.phero-banner {
  position: relative;
  height: clamp(380px, 54vh, 560px);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 0 100%);
}
.phero-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1300ms var(--ease);
}
.is-ready .phero-banner > img { transform: scale(1); }

.phero-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(20deg,
    rgba(11, 12, 13, 0.94) 0%,
    rgba(11, 12, 13, 0.46) 56%,
    rgba(11, 12, 13, 0.30) 100%);
}
.phero-banner__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.phero-banner__pad {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--gut) clamp(76px, 11vw, 150px);
}

/* The section that tucks up under a banner hero, mirroring the cut. */
.tuck {
  position: relative;
  background: var(--bg-2);
  margin-top: calc(-1 * var(--notch));
  clip-path: polygon(0 var(--notch), 100% 0, 100% 100%, 0 100%);
  padding: calc(var(--notch) + clamp(50px, 7vh, 100px)) var(--gut) clamp(64px, 9vh, 120px);
}

/* b) Split hero: copy on the left, image on the right with a leading cut. */
.phero-split {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}
.phero-split__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-height: clamp(440px, 64vh, 680px);
}
.phero-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vh, 30px);
  padding: clamp(60px, 10vh, 120px) var(--gut);
}
.phero-split__media {
  position: relative;
  min-height: clamp(280px, 42vh, 680px);
  overflow: hidden;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%);
}
.phero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1300ms var(--ease);
}
.is-ready .phero-split__media img { transform: scale(1); }
.phero-split__media span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 12, 13, 0.72) 0%, rgba(11, 12, 13, 0) 42%);
}
@media (min-width: 1024px) {
  .phero-split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* c) Centred hero. */
.phero-centre {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  padding: clamp(70px, 12vh, 150px) var(--gut) clamp(60px, 9vh, 110px);
}
.phero-centre__inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 30px);
}

/* d) Left-aligned hero on a plain wash. */
.phero-plain {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  padding: clamp(70px, 13vh, 170px) var(--gut) clamp(56px, 8vh, 100px);
}
.phero-plain__inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.5vh, 34px);
}

/* Load-in for hero text. */
.rise {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms ease var(--d, 0ms), transform 760ms var(--ease) var(--d, 0ms);
}
.is-ready .rise { opacity: 1; transform: translateY(0); }
.fade {
  opacity: 0;
  transition: opacity 500ms ease var(--d, 0ms);
}
.is-ready .fade { opacity: 1; }


/* 7  CONTENT BLOCKS
   ========================================================================== */

/* Asymmetric editorial split: prose left, supporting media right. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Material chip grids. */
.chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.chips span {
  background: var(--bg-3);
  padding: 16px 15px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-2);
  transition: background 240ms ease, color 240ms ease;
}
.chips span:hover {
  background: var(--bg-4);
  color: var(--ink);
}

/* Glass chips, optionally with a colour swatch. */
.swatches {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.swatch {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  background: var(--glass-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 var(--line);
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink-2);
  transition: background 240ms ease, color 240ms ease;
}
.swatch:hover {
  background: rgba(232, 235, 237, 0.09);
  color: var(--ink);
}
.swatch--plain { padding: 16px 18px; }
.swatch i {
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}

/* Method cards on the repair page. */
.method {
  padding: 20px;
  background: var(--glass-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 var(--line-2);
  transition: transform 280ms var(--ease), background 280ms ease;
}
.method:hover {
  transform: translateY(-3px);
  background: rgba(232, 235, 237, 0.08);
}
.method__tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 9px;
}
.method__name {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* Two-column definition rows ("What decides the tooling"). */
.factors {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-2);
}
.factor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, 3vw, 44px);
  padding: clamp(18px, 2.8vh, 28px) 0;
  border-bottom: 1px solid var(--line-2);
}
.factor h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.7vw, 1.3rem);
  letter-spacing: -0.014em;
  line-height: 1.2;
}
.factor p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
  max-width: 52ch;
}
@media (min-width: 900px) {
  .factor { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
}

/* Process chain strip. */
.chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  background: var(--line-2);
}
.chain div {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  padding: 22px 18px;
  background: var(--bg-3);
  transition: background 260ms ease;
}
.chain div:hover { background: var(--bg-4); }
.chain span {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.35;
}
@media (min-width: 900px) {
  .chain { flex-direction: row; }
}

/* Image band with a trailing diagonal cut. */
.band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 0px);
}
.band__media {
  position: relative;
  min-height: clamp(260px, 40vh, 520px);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 100%, 0 100%);
}
.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band__media span {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(20, 22, 24, 0.7) 0%, rgba(20, 22, 24, 0) 44%);
}
.band__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 var(--gut);
}
@media (min-width: 900px) {
  .band { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}


/* 8  MEDIA: rails, grids, pinned gallery, lightbox
   ========================================================================== */

/* Horizontal snap rail. */
.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
}
.rail__item {
  flex: 0 0 clamp(230px, 30vw, 400px);
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line-2);
  display: block;
}
.rail__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease), filter 400ms ease;
}
.rail__item:hover img {
  transform: scale(1.05);
  filter: brightness(1.06);
}

/* Image grids. --cols is set per usage. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.grid--half   { gap: clamp(16px, 2.5vw, 32px); }
.grid--square .shot { aspect-ratio: 1 / 1; }
.grid--tall   .shot { aspect-ratio: 4 / 5; }

@media (min-width: 640px) {
  .grid--half,
  .grid--third,
  .grid--masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--third,
  .grid--masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A single clickable image. */
.shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  display: block;
  background: var(--bg-2);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 420ms ease, transform 700ms var(--ease);
}

/* Desaturated until hovered - the group dims, the hovered one comes alive. */
.grid--dim .shot img { filter: saturate(1) brightness(1); }
@media (hover: hover) {
  .grid--dim:hover .shot img { filter: saturate(0.2) brightness(0.62); }
  .grid--dim .shot:hover img { filter: saturate(1) brightness(1); transform: scale(1.04); }
}
.grid--plain .shot:hover img { transform: scale(1.03); }

/* Masonry-ish pattern grid: portrait images take two rows so the column
   rhythm stays interesting.

   align-self:start matters. Grid items stretch to fill their row by default,
   which left each bordered tile taller than the photograph inside it and
   produced empty boxes above and below the image. Hugging the content instead
   keeps the border tight to the picture. */
.grid--masonry { align-items: start; }
.grid--masonry .shot {
  height: auto;
  align-self: start;
}
.grid--masonry .shot img { height: auto; }
.grid--masonry .shot.is-tall { grid-row: span 2; }

/* Pinned horizontal gallery, desktop only. Two rows translate sideways as the
   page scrolls through the section. */
.pin {
  position: relative;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3vh, 32px);
  padding: var(--hdr) 0 clamp(26px, 4vh, 44px);
}
.pin__head {
  position: relative;
  padding: 0 var(--gut);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.pin__view {
  position: relative;
  overflow: hidden;
}
.pin__track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: max-content;
  padding: 0 var(--gut);
  will-change: transform;
}
.pin__row {
  display: flex;
  gap: 14px;
  height: clamp(150px, 27vh, 265px);
}
.pin__item {
  flex: 0 0 auto;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  display: block;
}
.pin__item img {
  height: 100%;
  width: auto;
  max-width: none;
  transition: filter 400ms ease, transform 650ms var(--ease);
}
@media (hover: hover) {
  .pin__track:hover .pin__item img { filter: saturate(0.16) brightness(0.58); }
  .pin__item:hover img { filter: saturate(1) brightness(1.04); transform: scale(1.04); }
}
.pin__barwrap { position: relative; padding: 0 var(--gut); }
.pin__bartrack { height: 2px; background: rgba(255, 255, 255, 0.1); }
.pin__bar { height: 100%; width: 0; background: var(--red); }

/* The pinned gallery is a desktop-only effect. Below 1024px, and for anyone
   who has asked for reduced motion, the plain scroll rail is shown instead.
   Only one of the two is ever in the layout, so the images in the other are
   never fetched. */
.pin { display: none; }
[data-pin-fallback] { display: block; }

@media (min-width: 1024px) {
  .pin { display: block; }
  [data-pin-fallback] { display: none; }
}
body.no-pin .pin { display: none; }
body.no-pin [data-pin-fallback] { display: block; }

/* Mobile and tablet fall back to a simple scroll rail. */
.gal-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gut) 14px;
}
.gal-rail__item {
  flex: 0 0 auto;
  height: clamp(240px, 42vh, 340px);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  display: block;
}
.gal-rail__item img {
  height: 100%;
  width: auto;
  max-width: none;
}

/* Lightbox. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(11, 12, 13, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vh, 72px);
}
.lb[hidden] { display: none; }
.lb__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lb__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 100px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.125rem;
  background: rgba(232, 235, 237, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 var(--line-3);
  transition: background 200ms ease;
}
.lb__btn:hover { background: var(--red); }
.lb__prev { left: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lb__close {
  top: clamp(12px, 2vw, 26px);
  right: clamp(12px, 2vw, 26px);
  width: 48px;
  height: 48px;
}
.lb__count {
  position: absolute;
  bottom: clamp(14px, 3vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}


/* 9  TRACKERS: reverse engineering steps, timeline
   ========================================================================== */

.track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .track { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

.track__side {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 900px) {
  .track__side { position: sticky; top: 120px; }
  .track__side--tl { top: 34vh; gap: 14px; }
}

.track__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4rem, 11vw, 8rem);
  letter-spacing: -0.05em;
  line-height: 0.78;
  color: var(--red);
}
.track__year {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 6.4rem);
  letter-spacing: -0.045em;
  line-height: 0.82;
  color: var(--red);
}
.track__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
.track__label--tl {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  letter-spacing: -0.018em;
  line-height: 1.08;
  max-width: 18ch;
}
.track__cap {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 30ch;
}
.track__bars { display: flex; gap: 5px; margin-top: 6px; }
.track__bars i {
  display: block;
  width: 34px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 380ms ease;
}
.track__bars i.is-on { background: var(--red); }
.track__bars--tl i { width: 26px; }

.track__list {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 34px);
  padding-bottom: 0;
}
@media (min-width: 900px) {
  .track__list { padding-bottom: 34vh; }
  .track__list--tl { padding-bottom: 34vh; }
}
.track__list--tl { gap: 0; }

/* Reverse engineering step card. */
.step {
  position: relative;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  transition: opacity 620ms ease, transform 760ms var(--ease), border-color 620ms ease;
}
.step__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #16191B;
}
.step__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1);
  transition: filter 620ms ease;
}
.step__foot {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.step__n {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--red);
}
.step__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.012em;
  color: var(--ink);
}
/* Off-focus steps recede, but only where the sticky tracker is active. */
@media (min-width: 900px) {
  .step { opacity: 0.38; transform: scale(0.97); }
  .step img { filter: saturate(0.3); }
  .step.is-on {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(224, 36, 27, 0.5);
  }
  .step.is-on img { filter: saturate(1); }
}

/* Timeline entry. */
.tl {
  position: relative;
  display: flex;
  gap: clamp(16px, 2.5vw, 32px);
  padding: clamp(24px, 4vh, 44px) 0;
  border-bottom: 1px solid var(--line-2);
  opacity: 1;
  transition: opacity 620ms ease;
}
.tl__rail {
  flex: 0 0 auto;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
  transform: skewX(-4.5deg);
  transition: background 500ms ease;
}
.tl__year {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  transition: color 500ms ease;
}
.tl__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
  max-width: 52ch;
}
@media (min-width: 900px) {
  .tl { opacity: 0.4; }
  .tl.is-on { opacity: 1; }
  .tl.is-on .tl__rail { background: var(--red); }
  .tl.is-on .tl__year { color: var(--red); }
}


/* 10  SERVICES + SECTORS
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.tile {
  position: relative;
  grid-column: span 6;
  height: clamp(220px, 52vw, 300px);
  overflow: hidden;
  border: 1px solid var(--line-2);
  display: block;
  background: var(--bg-2);
  transition: border-color 340ms ease;
}
.tile:hover { border-color: rgba(255, 255, 255, 0.26); }

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.42) brightness(0.68);
  transform: scale(1);
  transition: filter 420ms ease, transform 700ms var(--ease);
}
.tile:hover img {
  filter: saturate(1) brightness(0.96);
  transform: scale(1.05);
}
/* The tile for the page you are already on is dimmed. */
.tile[aria-current='page'] img { opacity: 0.5; }

.tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(2deg,
    rgba(11, 12, 13, 0.92) 0%,
    rgba(11, 12, 13, 0.42) 48%,
    rgba(11, 12, 13, 0.12) 100%);
}
.tile__wipe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(90deg,
    rgba(232, 235, 237, 0) 0%,
    rgba(232, 235, 237, 0.17) 50%,
    rgba(232, 235, 237, 0) 100%);
  transform: translateX(-60%) skewX(-4.5deg);
  transition: transform 520ms var(--ease);
}
.tile:hover .tile__wipe { transform: translateX(130%) skewX(-4.5deg); }

.tile__chip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.tile__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, 2.2vw, 24px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  transition: background 340ms ease, backdrop-filter 340ms ease;
}
.tile:hover .tile__plate {
  background: rgba(11, 12, 13, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.tile__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.6vw, 1.4rem);
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--ink);
}
.tile__arrow {
  font-family: var(--mono);
  font-size: 1rem;
  color: rgba(232, 235, 237, 0.5);
  flex: 0 0 auto;
}
.tile[aria-current='page'] .tile__arrow { color: var(--red); }

@media (min-width: 640px) {
  .tile { grid-column: span 3; height: clamp(240px, 32vw, 320px); }
}
@media (min-width: 900px) {
  .tile          { grid-column: span 2; height: clamp(250px, 24vw, 330px); }
  .tile--wide    { grid-column: span 4; height: clamp(300px, 30vw, 420px); }
  .tile--tall    { height: clamp(300px, 30vw, 420px); }
}

/* Sector list. */
.sectors {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-2);
}
.sector {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(10px, 3vw, 40px);
  padding: clamp(16px, 2.6vh, 26px) 0;
  border-bottom: 1px solid var(--line-2);
  transition: transform 460ms var(--ease-2);
}
.sector h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 3.1rem);
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--muted-2);
  transition: color 460ms var(--ease-2);
}
.sector p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 44ch;
  opacity: 0.9;
  transition: opacity 460ms var(--ease-2);
}
.sector:hover { transform: translateX(clamp(6px, 1.4vw, 20px)); }
.sector:hover h3 { color: var(--ink); }
.sector:hover p { opacity: 1; }
@media (min-width: 900px) {
  .sector { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}


/* 11  LEGAL PAGES
   ========================================================================== */

.legal {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.legal h1 {
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing: -0.028em;
  line-height: 1;
}
.legal h2 {
  margin: 14px 0 0;
  font-weight: 600;
  font-size: 1.4375rem;
  letter-spacing: -0.018em;
}
.legal p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
}
.legal ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
}
.legal li { margin-bottom: 8px; }
.legal li:last-child { margin-bottom: 0; }

/* Cookie table rows. */
.ck {
  padding: 18px;
  background: var(--bg-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ck__name {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink);
}
.ck__purpose {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body);
}
.ck__meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}


/* 12  CONTACT
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
}
.field input,
.field textarea {
  width: 100%;
  padding: 15px 16px;
  background: var(--bg-3);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-size: 1rem;
  outline: none;
  transition: border-color 200ms ease;
}
.field textarea {
  min-height: 132px;
  line-height: 1.6;
  resize: vertical;
}
.field input:focus,
.field textarea:focus { border-bottom: 2px solid var(--red); }
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-bottom: 2px solid var(--red); }

.field__err {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--err);
  min-height: 1.2em;
}

/* Honeypot. Off-screen, never shown, never focusable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile mount. Reserves height so the layout does not jump when the
   widget loads. */
.turnstile { min-height: 65px; }
.turnstile__fallback {
  padding: 16px;
  border: 1px dashed var(--line-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--muted-2);
}

.form__submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  align-self: flex-start;
  padding: 17px 30px;
  background: var(--red);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: transform 240ms var(--ease), box-shadow 240ms ease, background 200ms ease;
}
.form__submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(224, 36, 27, 0.32);
}
.form__submit:disabled {
  background: var(--red-dk);
  cursor: default;
}
@media (min-width: 900px) {
  .form__submit { width: auto; }
}

/* Indeterminate progress bar along the bottom of the button while sending. */
.form__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  display: none;
}
.form__submit.is-sending .form__bar { display: block; }
.form__bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--ink);
  animation: agnBar 1s linear infinite;
}

/* Success panel. */
.sent {
  padding: clamp(26px, 4vw, 40px);
  background: var(--glass-3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--inset);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sent h3 {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.018em;
}

/* Failure panel. */
.failed {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(224, 36, 27, 0.5);
  background: rgba(224, 36, 27, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.failed strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
}
.failed span {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
}

[hidden] { display: none !important; }

/* Testimonials. */
.quote {
  position: relative;
  padding: clamp(24px, 3.4vw, 34px);
  background: var(--glass-3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--inset);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
@media (min-width: 900px) {
  .quote { min-height: 260px; }
}
.quote__text {
  position: relative;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.quote__by {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: auto;
}
.quote__dots { display: flex; gap: 6px; }
.quote__dot {
  width: 26px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 240ms ease;
}
.quote__dot[aria-current='true'] { background: var(--red); }

/* Contact details block. */
.details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--body);
}
.details a { color: var(--ink); }
.details .tel { font-size: 1.125rem; margin-top: 8px; }

/* Map card. */
.map {
  position: relative;
  display: block;
  height: clamp(240px, 32vh, 320px);
  border: 1px solid var(--line-2);
  overflow: hidden;
  background: var(--bg-2);
  transition: border-color 260ms ease;
}
.map:hover { border-color: rgba(224, 36, 27, 0.7); }

/* The map is an inline SVG (see src/partials/map.svg). These rules used to live
   in the standalone map file's own <style> block; inlining the SVG means they
   have to live here instead, or the labels render as default black serif text
   and the pin does not pulse. */
.map__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map__lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  fill: var(--ink);
  text-transform: uppercase;
}
.map__sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  fill: var(--muted);
}
.map__ping { animation: agnPing 2.6s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .map__ping {
    animation: none !important;
    opacity: 0 !important;
  }
}

.map__label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}


/* 13  FOOTER + COOKIE BAR
   ========================================================================== */

.ftr {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.ftr__inner {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 68px) var(--gut) 26px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 38px);
}
.ftr__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 42px);
  padding-bottom: clamp(20px, 3vh, 30px);
  border-bottom: 1px solid var(--line-2);
}
.ftr__link {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
  transition: color 200ms ease;
}
.ftr__link:hover { color: var(--red); }

.ftr__mid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.ftr__mark {
  height: 34px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
}
.ftr__social { display: flex; gap: 10px; }
.ftr__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background: rgba(232, 235, 237, 0.06);
  box-shadow: var(--inset);
  color: var(--body);
  transition: background 220ms ease, color 220ms ease, transform 220ms var(--ease);
}
.ftr__ico:hover {
  background: var(--red);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.ftr__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.ftr__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}
.ftr__small {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted-2);
}
.ftr__slink {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  transition: color 200ms ease;
}
.ftr__slink:hover { color: var(--red); }

/* Cookie bar. */
.cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: rgba(20, 22, 24, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
}
.cookiebar[hidden] { display: none; }
.cookiebar__inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 18px var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}
.cookiebar__copy {
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cookiebar__copy strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
}
.cookiebar__copy span {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body);
}
.cookiebar__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.cookiebar__btn {
  padding: 14px 20px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 220ms var(--ease), background 220ms ease;
}
.cookiebar__btn--yes { background: var(--red); color: #FFFFFF; }
.cookiebar__btn--yes:hover { transform: translateY(-2px); color: #FFFFFF; }
.cookiebar__btn--no {
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--line-3);
  color: var(--ink);
}
.cookiebar__btn--no:hover { background: rgba(232, 235, 237, 0.14); }
.cookiebar__more {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--body);
  border-bottom: 1px solid rgba(168, 176, 182, 0.4);
}

/* Pill button used on the cookie notice page. */
.pill {
  align-self: flex-start;
  padding: 14px 22px;
  border-radius: 100px;
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--line-3);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 240ms ease;
}
.pill:hover { background: var(--red); color: #FFFFFF; }


/* 14  MOTION
   ========================================================================== */

@keyframes agnMenu {
  from { clip-path: polygon(100% 0, 200% 0, 200% 100%, calc(100% + 7.87vh) 100%); }
  to   { clip-path: polygon(0 0, 200% 0, 200% 100%, -7.87vh 100%); }
}
@keyframes agnBar {
  0%   { left: -40%; }
  100% { left: 100%; }
}
@keyframes agnRoll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes agnPunch {
  0%   { transform: scale(1.14); }
  100% { transform: scale(1.05); }
}
@keyframes agnSweepA {
  0%   { transform: translateX(-40%) skewX(-4.5deg); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translateX(150%) skewX(-4.5deg); opacity: 0; }
}
@keyframes agnSweepB {
  0%   { transform: translateX(-40%) skewX(-4.5deg); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translateX(150%) skewX(-4.5deg); opacity: 0; }
}
@keyframes agnPing {
  0%   { r: 4;  opacity: 0.55; }
  70%  { r: 17; opacity: 0; }
  100% { r: 17; opacity: 0; }
}

/* Scroll reveal. JS adds .is-in when the element enters the viewport.
   Elements are only hidden once JS has confirmed it is running, so with
   JavaScript disabled everything stays visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease var(--rd, 0ms),
              transform 720ms var(--ease) var(--rd, 0ms),
              clip-path 900ms var(--ease) var(--rd, 0ms);
}
.js [data-reveal='wipe'] {
  transform: none;
  clip-path: polygon(0 0, 0 0, -9% 100%, -9% 100%);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: polygon(0 0, 112% 0, 103% 100%, -9% 100%);
}
.js [data-reveal='wipe'].is-in { clip-path: polygon(0 0, 112% 0, 103% 100%, -9% 100%); }
/* Once the entrance has played, drop the overrides so hover transitions on the
   element behave normally again. */
.js [data-reveal].is-done {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero__word,
  .hero__cta,
  .hero__nav,
  .rise,
  .fade { opacity: 1 !important; transform: none !important; }
  .hero__stage { opacity: 1 !important; }
}

/* Print: drop the furniture, keep the words. */
@media print {
  .hdr, .menu, .cookiebar, .lb, .hero__nav, .ftr__social, .map, .skip { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  main { padding-top: 0; }
  a { color: #000000; }
}