/* =========================================================
   MRD Production — Swiss / International Typographic Style
   Grid: 12 col · margin = 100/1920 of the hero frame
   ========================================================= */

:root {
  --navy: #171e35;
  --navy-2: #1f2742;
  --ink: #0f1426;
  --paper: #efeee9;
  --paper-2: #e4e2db;
  --white: #ffffff;
  --accent: #6574a6;
  --btn-fs: clamp(14px, .95vw, 49px); /* shared by .btn and text links next to it */
  --muted-d: rgba(255, 255, 255, .56);
  --muted-l: rgba(23, 30, 53, .58);
  --rule-d: rgba(255, 255, 255, .18);
  --rule-l: rgba(23, 30, 53, .2);

  --m: clamp(16px, 5.2083vw, 267px);       /* outer margin */
  --g: clamp(12px, 1.25vw, 64px);          /* gutter */
  --sec: clamp(88px, 11vw, 563px);         /* section padding */

  --f: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }

/* scrollbar: navy track, accent thumb (standard props for Firefox/Chromium, webkit for Safari) */
html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--navy); }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--navy); }
  ::-webkit-scrollbar-thumb { background: var(--accent); border: 3px solid var(--navy); border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: #8592bd; }
}
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* keep the scrollbar while Lenis is stopped (opening, menu) so the page never jumps sideways when it returns;
   wheel/touch are blocked by Lenis, keys and scrollbar drags by the guard in main.js */
.lenis.lenis-stopped { overflow-y: scroll; }

body {
  margin: 0;
  letter-spacing: 0; /* small text stays at 0 — -2% only on large type below */
  background: var(--paper);
  color: var(--navy);
  font-family: var(--f);
  font-size: clamp(16px, 1.05vw, 54px);
  line-height: 1.5;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--accent); color: var(--white); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--white); padding: 8px 12px; }
.skip:focus { left: 8px; }

.wrap { padding-inline: var(--m); }
.dark { background: var(--navy); color: var(--white); }

/* ---------- type scale ---------- */
/* -2% tracking for large type only (~20px and up) */
.display, .lead, .brand__name, .menu__list a, .pl-word, .hero__title, .stat dd, .quote__text,
.svc h3, .equip h3, .ticker__track span, .vw--l, .vw--r, .vitem h3, .pf-title,
.cta__track span, .cta__text, .office--main p, .big-link, .footer__giant, .lb__title { letter-spacing: -.02em; }
.display {
  font-size: clamp(40px, 6.4vw, 328px);
  font-weight: 400;
  line-height: .98;

  max-width: 14ch;
}
.lead { font-size: clamp(20px, 1.8vw, 92px); line-height: 1.25; }

/* no orphaned last words: balance headings, prettify paragraphs */
h1, h2, h3, .display, .lead, .quote__text, .cta__text, .pf-title, .lb__title { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }

/* split-line reveal */
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-line > span { display: inline-block; will-change: transform; }

/* ---------- section head (Swiss index row) ---------- */
.section { padding-block: var(--sec); position: relative; }
.sec-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--g);
  align-items: baseline;
  border-top: 1px solid currentColor;
  padding-top: 14px;
  margin-bottom: clamp(48px, 6vw, 307px);
  font-size: max(13px, 0.860vw);

  font-weight: 500;
}
.sec-head__no { grid-column: 1 / 3; font-variant-numeric: tabular-nums; }
.sec-head__no::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 10px; vertical-align: 1px; }
.sec-head__label { grid-column: 3 / 8; }
.sec-head__meta { grid-column: 8 / 13; text-align: right; opacity: .55; }

/* ================= HEADER ================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: clamp(14px, 2.34vw, 120px) var(--m) 0;
  color: var(--white);
  pointer-events: none;
  transition: padding .6s var(--ease), color .35s ease;
}
/* adaptive colour: navy over light (paper) sections, white everywhere else */
.site-header.on-light { color: var(--navy); }
.site-header > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: clamp(10px, 1.25vw, 64px); }
/* logo drawn as a mask so it follows currentColor */
.brand__mark {
  display: block; flex: none; width: clamp(48px, 4.4vw, 225px); aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url("assets/logo.webp") center / contain no-repeat;
          mask: url("assets/logo.webp") center / contain no-repeat;
  transition: width .6s var(--ease), transform .8s var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(-90deg); }
.brand__name {
  font-size: clamp(20px, 1.95vw, 100px);
  font-weight: 500; line-height: 1;
  transition: font-size .6s var(--ease), opacity .4s;
}
.menu-btn {
  width: clamp(44px, 2.9vw, 148px); height: clamp(44px, 2.9vw, 148px);
  display: grid; place-content: center; gap: clamp(8px, .73vw, 37px);
  position: relative; z-index: 2;
}
.menu-btn span { display: block; width: clamp(26px, 1.7vw, 87px); height: 4px; border-radius: 0; background: currentColor; transition: transform .5s var(--ease); }

/* right side: full section nav over the hero, swaps to the menu button once compact */
.site-header > .header__right { pointer-events: none; }
.header__right { flex: 1; align-self: center; display: grid; justify-items: end; align-items: center; }
.header__right > * { grid-area: 1 / 1; }
.menu-btn { pointer-events: auto; }
.hnav { display: none; }
@media (min-width: 1100px) {
  /* lives inside the hero (not the fixed header) so it scrolls away with the page */
  .hnav {
    position: absolute; z-index: 3; right: var(--m); top: clamp(14px, 2.34vw, 120px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--white);
  }
  .hnav a {
    position: relative; display: flex; align-items: flex-start; gap: 8px;
    font-size: var(--btn-fs); font-weight: 500; line-height: 1; padding-block: 8px;
    pointer-events: auto;
  }
  .hnav a > span:not(.text-roll) { font-size: max(11px, 0.728vw); opacity: .55; font-variant-numeric: tabular-nums; }
  .site-header.is-compact .hnav { opacity: 0; transform: translateY(-14px); visibility: hidden; transition: opacity .3s ease, transform .5s var(--ease), visibility 0s .5s; }
  .site-header.is-compact .hnav a { pointer-events: none; }
  /* menu button stays hidden while the nav is spread out */
  .site-header:not(.is-compact) .menu-btn { pointer-events: none; }
  .site-header:not(.is-compact) .menu-btn span { transform: scaleX(0); transform-origin: right; }
  .site-header.is-compact .menu-btn span:last-child { transition-delay: .06s; }
}
.js .hnav a { opacity: 0; }

/* compact header after scrolling past hero */
.site-header.is-compact { padding-top: 20px; }
.site-header.is-compact .brand__mark { width: 44px; }
.site-header.is-compact .brand__name { font-size: max(20px, 1.323vw); }
body.menu-open .site-header { color: var(--white); }
body.menu-open .menu-btn span:first-child { transform: translateY(calc(clamp(8px, .73vw, 37px) / 2 + 2px)) rotate(45deg); }
body.menu-open .menu-btn span:last-child { transform: translateY(calc(clamp(8px, .73vw, 37px) / -2 - 2px)) rotate(-45deg); }

/* ================= MENU ================= */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--accent); color: var(--white);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease);
  visibility: hidden;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__inner {
  height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g);
  align-content: end; padding: var(--m);
}
.menu__list { grid-column: 1 / 10; }
.menu__list li { overflow: hidden; border-top: 1px solid rgba(255,255,255,.35); }
.menu__list a {
  display: flex; align-items: baseline; gap: 2vw;
  font-size: clamp(34px, min(6vw, 8vh), 344px); line-height: 1.04;
  transform: translateY(105%); transition: transform .9s var(--ease-out), padding .4s var(--ease-out);
}
.menu__list a > span:not(.text-roll) { font-size: max(13px, 0.860vw); font-weight: 500; min-width: 3ch; }

/* text roll (nav links, quote): every letter rolls up in turn and a copy rolls in from below.
   JS writes two .text-roll-line copies of the text, one .char span per letter with --char-i */
.text-roll { display: block; position: relative; overflow: hidden; margin: -.3em 0; padding: .3em 0; }
.text-roll-line { display: block; white-space: nowrap; }
.text-roll-line:last-child { position: absolute; left: 0; top: .3em; }
.text-roll .char {
  display: inline-block; white-space: pre; will-change: transform;
  transition: transform .25s ease-in; transition-delay: calc(var(--char-i, 0) * var(--roll-step, 20ms));
}
.text-roll-line:last-child .char { transform: translateY(var(--roll, 1.6em)); }
.is-text-roll:hover .text-roll .char, .is-text-roll:focus-visible .text-roll .char {
  transition: transform .3s cubic-bezier(.165, .84, .44, 1); transition-delay: calc(var(--char-i, 0) * var(--roll-step-in, 30ms));
}
.is-text-roll:hover .text-roll-line:first-child .char, .is-text-roll:focus-visible .text-roll-line:first-child .char { transform: translateY(calc(var(--roll, 1.6em) * -1)); }
.is-text-roll:hover .text-roll-line:last-child .char, .is-text-roll:focus-visible .text-roll-line:last-child .char { transform: translateY(0); }
/* the quote is long and large: quicker stagger, slower roll */
.quote__text { --roll-step: 12ms; --roll-step-in: 18ms; cursor: default; }
.quote__text .text-roll .char { transition-duration: .45s; }
/* lines sit tight (line-height .95): clip each line to its own box so rolling letters
   never show over the neighbouring line */
.quote__text .text-roll { margin: -.06em 0; padding: .06em 0; }
.quote__text .text-roll-line:last-child { top: .06em; }
.quote__text { --roll: 1.15em; }
.quote__text.is-text-roll:hover .text-roll .char { transition-duration: .6s; }
.menu__list a:hover { padding-left: 1.5vw; }
body.menu-open .menu__list a { transform: none; }
body.menu-open .menu__list li:nth-child(n) a { transition-delay: calc(.25s + var(--i, 0) * .05s); }
.menu__meta { grid-column: 10 / 13; align-self: end; font-size: max(14px, 0.926vw); display: grid; gap: 6px; }

/* ================= HERO ================= */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  background: var(--navy); color: var(--white); overflow: hidden;
  isolation: isolate;
}
.hero__stage { position: absolute; inset: 0; overflow: hidden; }
.js .hero__stage { clip-path: inset(50% 50% 50% 50%); }
.js .site-header .brand__mark, .js .brand__name, .js .menu-btn { opacity: 0; }
.js .hero__content { visibility: hidden; }

/* ================= PRELOADER ================= */
.preloader { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: none; }
.js .preloader { display: block; --fs: clamp(72px, 13vw, 666px); --bt: clamp(16px, 3.5vh, 105px); }
.pl-word {
  position: absolute; bottom: var(--bt);
  font-size: var(--fs); line-height: .82; padding-bottom: .04em;
  font-weight: 500; color: #e9e8e3;
}
.pl-word > span { display: block; }
.pl-left { left: var(--m); }
.pl-right { right: var(--m); }
.pl-mark {
  --s: clamp(64px, 8vw, 410px);
  /* centre the mark on the cap-height of the words */
  position: absolute; left: 50%; bottom: calc(var(--bt) + var(--fs) * .47 - var(--s) / 2);
  width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
}
/* 1280×720 artboard (Figma hero) scaled to "cover" the viewport */
.hero__layers {
  --s: max(100vw / 1280, 100svh / 720);
  position: absolute; left: 50%; top: 50%;
  width: calc(1280 * var(--s)); height: calc(720 * var(--s));
  translate: -50% -50%;
  background: var(--navy);
}
@supports not (height: 100svh) { .hero__layers { --s: max(100vw / 1280, 100vh / 720); } }
/* portrait screens: keep the main truss in frame */
@media (max-aspect-ratio: 1/1) { .hero__layers { translate: -62% -50%; } }
/* the speaker and truss art are pre-coloured navy, so no blend modes. --x/--y place the
   unrotated box, --r turns it about its centre (CSS rotate, so GSAP's transform stays free) */
.layer {
  position: absolute;
  left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s)); height: auto; max-width: none;
  rotate: calc(var(--r, 0) * 1deg);
  will-change: transform;
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,30,53,0) 55%, rgba(23,30,53,.55) 100%);
}

/* full-height column: the info bar sits under the logo, headline + actions at the bottom */
.hero__content {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: calc(clamp(14px, 2.34vw, 120px) + clamp(48px, 4.4vw, 225px) + clamp(20px, 2.34vw, 120px)) var(--m) clamp(24px, 3.4vw, 174px);
  display: flex; flex-direction: column; row-gap: clamp(18px, 2.34vw, 120px);
}
.hero__content a { pointer-events: auto; }
.hero__bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid rgba(255,255,255,.28); padding-top: clamp(20px, 2.34vw, 120px);
  font-size: max(13px, 0.860vw); font-weight: 500;
}
/* leave the right column to the section nav */
@media (min-width: 1100px) { .hero__bar { margin-right: max(150px, 11.8vw); } }
.hero__bar > :nth-child(2) { font-variant-numeric: tabular-nums; }
.hero__title { margin-top: auto; }
.hero__title {
  position: relative;
  font-size: clamp(34px, 5.38vw, 275px);
  font-weight: 400; line-height: .94;
  text-wrap: initial;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .line > span { display: inline-block; white-space: nowrap; }
@media (max-width: 760px) {
  .hero__title { text-wrap: balance; }
  .hero__title .line, .hero__title .line > span { display: inline; white-space: normal; overflow: visible; }
  .hero__bar > :nth-child(2), .hero__bar > :nth-child(3) { display: none; }
}
.hero__foot { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: end; row-gap: 20px; }
.hero__lead { grid-column: 1 / 6; max-width: 44ch; font-size: clamp(15px, 1.15vw, 59px); line-height: 1.45; color: rgba(255,255,255,.72); }
.hero__actions { grid-column: 8 / 13; justify-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2vw, 102px); }
@media (max-width: 960px) { .hero__lead, .hero__actions { grid-column: 1 / -1; justify-self: start; } }
.hero .btn--light:hover { background: var(--accent); color: var(--white); }
.hero .btn--light:hover i { transform: translateY(3px); }
.hero__link {
  font-size: var(--btn-fs); font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px;
  transition: background-size .5s var(--ease);
}
.hero__link:hover { background-size: 0 1px; background-position: 100% 100%; }
.scroll-cue i { font-style: normal; display: inline-block; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ================= ABOUT ================= */
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 48px; }
.about__title { grid-column: 1 / 8; }
.about__copy { grid-column: 8 / 13; display: grid; gap: 24px; align-content: start; padding-top: .6em; }
.about__copy p:not(.lead) { color: var(--muted-l); max-width: 46ch; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--g);
  margin-top: clamp(64px, 8vw, 410px);
}
.stat { border-top: 1px solid var(--rule-l); padding-top: 14px; }
.stat dt { font-size: max(13px, 0.860vw); font-weight: 500; color: var(--muted-l); }
.stat dd { font-size: clamp(48px, 7.2vw, 369px); line-height: 1; font-variation-settings: "wdth" 80; font-variant-numeric: tabular-nums; margin-top: 10px; }

.about__photo { margin-top: clamp(64px, 8vw, 410px); height: clamp(320px, 52vw, 2662px); overflow: hidden; position: relative; }
.about__photo img, .values__photo img { width: 100%; height: 130%; object-fit: cover; position: absolute; top: -15%; left: 0; will-change: transform; }
.about__photo { background: var(--navy); }

.quote { padding-top: clamp(64px, 8vw, 410px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.quote { text-align: center; }
.quote__text { grid-column: 1 / -1; max-width: 16ch; margin-inline: auto; font-size: clamp(40px, 7.3vw, 374px); line-height: .95; }
/* hanging quote marks: the words centre on their own, the marks sit outside */
.quote__text .split-line { padding-inline: .6em; margin-inline: -.6em; } /* room so the clip doesn't cut the marks */
.quote__text .split-line:first-child > span,
.quote__text .split-line:last-child > span { position: relative; }
/* top: 0 keeps the marks on the line even though the rolling text inside is a block */
.quote__text .split-line:first-child > span::before { content: "\201C"; position: absolute; top: 0; right: 100%; padding-right: .04em; }
.quote__text .split-line:last-child > span::after { content: "\201D"; position: absolute; top: 0; left: 100%; padding-left: .02em; }
.quote__text:not(:has(.split-line))::before { content: "\201C"; }
.quote__text:not(:has(.split-line))::after { content: "\201D"; }
.quote footer { grid-column: 1 / -1; margin-top: 28px; font-size: max(13px, 0.860vw); font-weight: 500; color: var(--muted-l); }

/* ================= SERVICES ================= */
.services .display { margin-bottom: clamp(56px, 7vw, 358px); }
.svc-list { border-bottom: 1px solid var(--rule-d); counter-reset: s; }
.svc {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: center;
  border-top: 1px solid var(--rule-d); padding-block: clamp(18px, 2vw, 102px);
  position: relative; isolation: isolate;
}
/* wipe enters from the left, exits to the right */
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease);
}
.svc:hover::before { transform: scaleX(1); transform-origin: left; }
.svc__no {
  grid-column: 1 / 2; padding-left: clamp(12px, 1.4vw, 72px);
  font-size: clamp(18px, 1.5vw, 77px); font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums;
}
.svc h3 {
  grid-column: 2 / 9; font-weight: 400;
  font-size: clamp(30px, 4.2vw, 215px); line-height: 1;
  transition: transform .6s var(--ease), font-variation-settings .6s var(--ease);
}
.svc:hover h3 { transform: translateX(clamp(8px, 1vw, 51px)); font-variation-settings: "wdth" 112; }
/* the number sits flush left at rest and steps in only while the row is hovered */
.svc__no { padding-left: 0; transition: padding-left .6s var(--ease), color .4s; }
.svc:hover .svc__no { padding-left: clamp(12px, 1.4vw, 72px); }
.svc h3, .svc p { align-self: last baseline; }
.svc p { grid-column: 9 / 13; color: var(--muted-d); font-size: max(15px, 0.992vw); max-width: 34ch; transition: color .4s; }
.svc:hover p, .svc:hover .svc__no { color: var(--white); opacity: 1; }
/* hover preview: one photo follows the cursor over the list and swaps per row (desktop pointers only) */
.svc-preview {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  width: clamp(240px, 22vw, 700px); aspect-ratio: 4 / 3; overflow: hidden;
  opacity: 0; visibility: hidden; background: var(--navy);
}
.svc-preview { isolation: isolate; }
.svc-preview__frame { position: absolute; inset: 0; overflow: hidden; background: var(--navy); isolation: isolate; clip-path: inset(100% 0 0 0); }
.svc-preview img { mix-blend-mode: luminosity; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .svc-preview { display: none; } }

/* ================= EQUIPMENT ================= */
/* typographic index: big label on the left, the equipment set as one flowing line of type on the right */
.equip { display: grid; }
.equip__col {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: start;
  border-top: 1px solid var(--navy); padding-block: clamp(40px, 6vw, 307px);
}
.equip__col:last-child { border-bottom: 1px solid var(--navy); }
.equip h3 {
  grid-column: 1 / 5; position: sticky; top: 120px;
  font-size: clamp(22px, 2.2vw, 113px); font-weight: 400; line-height: 1.05;
  display: flex; gap: 16px; align-items: baseline;
}
.equip h3 span { font-size: max(13px, 0.860vw); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.equip ul { grid-column: 6 / 13; display: flex; flex-wrap: wrap; column-gap: .35em; row-gap: .1em; }
.equip li {
  font-size: clamp(26px, 3.3vw, 169px); font-weight: 400; line-height: 1.12; letter-spacing: -.03em;
  transition: color .3s;
}
.equip li:not(:last-child)::after { content: "/"; margin-left: .35em; color: var(--accent); opacity: .5; }
.equip li:hover { color: var(--accent); }
/* equipment items roll like the quote; li is a flex row so the "/" separator stays on the same line */
.equip li { display: flex; align-items: flex-start; --roll: 1.15em; --roll-step: 14ms; --roll-step-in: 20ms; }
.equip li .text-roll { margin: -.08em 0; padding: .08em 0; }
.equip li .text-roll-line:last-child { top: .08em; }

.ticker { margin-top: var(--sec); overflow: hidden; border-block: 1px solid var(--navy); }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__track span {
  font-size: clamp(56px, 10vw, 512px); line-height: 1.05; white-space: nowrap;
  font-variation-settings: "wdth" 70; font-weight: 500; padding-block: .06em;
}

/* ================= VALUES ================= */
/* photo across the top fading into navy; headline left, a vertical timeline right.
   the line fills as you scroll and each value slides its number tab out of the line */
.values { padding-bottom: 0; }
/* the scene is one screen tall and pinned by JS: opening first, then the timeline point by point */
.vscene { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--navy); }
.values__media {
  position: absolute; z-index: -1; inset: 0; margin: 0;
  overflow: hidden; background: var(--navy);
}
.values__media img {
  width: 100%; height: 118%; object-fit: cover; object-position: 50% 55%;
  opacity: .62; will-change: transform;
}
/* flat #171e35 tint over the photo */
.values__media::after { content: ""; position: absolute; inset: 0; background: rgba(23, 30, 53, .38); pointer-events: none; }
/* navy gradient over the photo. It is twice the scene's height: at rest its fade sits over the
   photo; JS slides it up while the points play so the navy climbs until it covers the photo */
.vscene__shade {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 200%; pointer-events: none;
  /* eased ramp (many stops, slow in and slow out) so there is no visible band or edge; solid navy by 40% */
  background: linear-gradient(180deg,
    rgba(23,30,53,0) 0%, rgba(23,30,53,.015) 4%, rgba(23,30,53,.06) 8%, rgba(23,30,53,.14) 12%,
    rgba(23,30,53,.25) 16%, rgba(23,30,53,.4) 20%, rgba(23,30,53,.56) 24%, rgba(23,30,53,.72) 28%,
    rgba(23,30,53,.85) 32%, rgba(23,30,53,.95) 36%, #171e35 40%, #171e35 100%);
  will-change: transform;
}
.values__body {
  --pad-b: clamp(48px, 15vh, 450px); /* lifts the headline + timeline up the scene */
  position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: var(--pad-b);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g);
}
/* "Our 04 Values": the big words of the opening, they drift apart and drop away as the photo opens */
.vscene__words {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 3.5vh, 105px);
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-inline: var(--m); pointer-events: none; color: #e9e8e3;
}
.vw { display: block; line-height: .82; padding-bottom: .04em; }
.vw > span { display: block; }
.vw--l, .vw--r { font-size: clamp(64px, 12vw, 614px); font-weight: 500; }
.vw--c { position: absolute; left: 50%; bottom: 1.2em; translate: -50% 0; font-size: max(13px, 0.860vw); font-weight: 500; line-height: 1.2; padding-bottom: 0; }
.values__intro { grid-column: 1 / 6; display: flex; flex-direction: column; }
.values__intro .display { font-size: clamp(36px, 4.9vw, 251px); max-width: 6.6em; }
.values__hint { margin-top: auto; padding-top: 48px; max-width: 30ch; font-size: clamp(14px, 1.05vw, 54px); line-height: 1.5; }

.vline { --split: 51%; --tab-w: clamp(44px, 4.15vw, 212px); --tab-h: clamp(38px, 3.5vw, 179px); --gap: clamp(20px, 2.35vw, 120px);
  grid-column: 6 / 13; position: relative; }
.vline__track {
  position: absolute; left: var(--split); top: 0; width: 1px;
  bottom: calc(-1 * var(--pad-b)); /* run down to the scene's bottom edge */
  background: rgba(255,255,255,.18);
}
.vline__fill { position: absolute; inset: 0; background: var(--white); transform-origin: top; }
.js .vline__fill { transform: scaleY(0); }
.vline__list { display: grid; row-gap: clamp(24px, min(4.7vw, 6.5vh), 240px); }
.vitem { display: grid; grid-template-columns: var(--split) 1fr; align-items: start; }

/* number tab: a white block with one corner cut, sitting against the line */
.vitem__no { display: block; overflow: hidden; width: var(--tab-w); height: var(--tab-h); }
.vitem__no > span {
  display: block; height: 100%; padding: .12em .3em; background: var(--white); color: var(--navy);
  font-size: clamp(18px, 1.7vw, 87px); line-height: 1.1; font-variant-numeric: tabular-nums;
  transition: transform .8s var(--ease-out);
}
.vitem--r .vitem__no { grid-column: 1; grid-row: 1; justify-self: end; }
.vitem--r .vitem__no > span { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 0 72%); }
.vitem--l .vitem__no { grid-column: 2; grid-row: 1; justify-self: start; }
.vitem--l .vitem__no > span { clip-path: polygon(0 0, 100% 0, 100% 72%, 74% 100%, 0 100%); }

.vitem__body { grid-row: 1; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.vitem__body p { max-width: 36ch; text-align: justify; text-align-last: left; hyphens: auto; }
.vitem--r .vitem__body { grid-column: 2; padding-left: var(--gap); }
.vitem--l .vitem__body { grid-column: 1; padding-right: var(--gap); text-align: right; justify-self: end; }
.vitem--l .vitem__body p { max-width: 33ch; margin-left: auto; text-align-last: right; } /* justified, last line to the right */
.vitem h3 { font-weight: 400; line-height: 1.1; font-size: clamp(28px, 3.1vw, 159px); }
.vitem p { margin-top: .7em; color: rgba(255,255,255,.8); font-size: clamp(14px, 1.05vw, 54px); line-height: 1.3; }

/* resting state before the line reaches an item (JS only) */
.js .vitem--r:not(.is-on) .vitem__no > span { transform: translateX(101%); }
.js .vitem--l:not(.is-on) .vitem__no > span { transform: translateX(-101%); }
.js .vitem:not(.is-on) .vitem__body { opacity: .18; }
.js .vitem--r:not(.is-on) .vitem__body { transform: translateX(-16px); }
.js .vitem--l:not(.is-on) .vitem__body { transform: translateX(16px); }

/* ================= CLIENTS ================= */
/* two logo rows drift in opposite directions around a centred headline */
.clients { padding-block: var(--sec); display: grid; row-gap: clamp(44px, 5.8vw, 297px); overflow: hidden; }
.clients__title {
  justify-self: center; text-align: center; padding-inline: var(--m);
  font-size: clamp(40px, 6.25vw, 320px); line-height: 1; max-width: 13em; text-wrap: balance;
}
.logo-row { overflow: hidden; }
/* the moving track is its own layer, so give it the paper colour for the logos' multiply blend */
.logo-row__track { display: flex; width: max-content; will-change: transform; background: var(--paper); }
.logo-row__track li { flex: none; width: clamp(84px, 9.77vw, 500px); margin-right: clamp(40px, 5.15vw, 264px); }
.logo-row__track img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  clip-path: inset(2.5%); mix-blend-mode: multiply; filter: grayscale(1); opacity: .8;
  transition: filter .5s, opacity .5s, transform .7s var(--ease-out);
}
.logo-row__track li:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* ================= PORTFOLIO ================= */
.portfolio { padding-bottom: 0; overflow: hidden; }
.portfolio .sec-head { margin-bottom: 0; }
.pf-pin { position: relative; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 3.5vw, 179px); padding-block: 72px 40px; }
.pf-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pf-intro .display { font-size: clamp(36px, 4.6vw, 236px); max-width: 16ch; }
.pf-hint { font-size: max(13px, 0.860vw); font-weight: 500; opacity: .6; white-space: nowrap; }
.pf-track {
  --th: clamp(300px, calc(100svh - clamp(170px, 22vh, 360px)), 1400px); /* height of the strip of columns */
  display: flex; align-items: stretch; gap: clamp(40px, 6vw, 300px);
  height: var(--th); padding-inline: var(--m); width: max-content; will-change: transform;
}
/* the section heading is the first column of the strip, so it travels sideways with the projects */
.pf-lead { flex: none; width: max-content; display: flex; align-items: flex-end; }
.pf-lead .display { font-size: clamp(36px, 4.6vw, 236px); max-width: none; white-space: nowrap; }
.pf-proj { display: flex; align-items: stretch; gap: clamp(24px, 3.2vw, 160px); flex: none; }
.pf-col { display: flex; flex-direction: column; flex: none; }
/* title column: number, big title, small meta; sits high on odd projects and low on even ones */
.pf-col--title { width: clamp(240px, 27vw, 1380px); justify-content: flex-start; gap: 14px; position: relative; z-index: 1; }
.pf-no { font-size: max(13px, 0.860vw); font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.pf-title { font-size: clamp(24px, 2.6vw, 134px); font-weight: 400; line-height: 1.04; letter-spacing: -.03em; }
/* full event names, never shortened; up to three lines, balanced so no single word is left alone on the last line */
.pf-title .pf-card {
  display: block; text-align: left; text-wrap: balance;
}
.pf-meta { font-size: max(13px, 0.860vw); opacity: .55; white-space: nowrap; }
.pf-col--a { width: clamp(300px, 36vw, 1800px); justify-content: flex-end; }
/* the photos slide left under the title column, so the title text fills the white space above (or below) them */
@media (min-width: 961px) {
  .pf-col--a { margin-left: calc(clamp(240px, 27vw, 1380px) * -.85); }
  /* the photos only reach their resting spot as they leave the screen, so while a project is visible its
     right-hand column still trails to the right; the wider gap keeps it clear of the next project's title */
  .pf-track { gap: 16vw; }
}
.pf-col--b { width: clamp(180px, 19vw, 960px); justify-content: space-between; }
.pf-item { display: grid; gap: 10px; }
.pf-cap { font-size: max(13px, 0.860vw); opacity: .55; font-variant-numeric: tabular-nums; }
.pf-shot { display: block; text-align: left; width: 100%; }
.pf-shot__media { display: block; position: relative; overflow: hidden; background: var(--navy); isolation: isolate; }
.pf-shot__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity; transition: scale 1.1s var(--ease-out);
}
.pf-shot:hover .pf-shot__media img { scale: 1.06; }
.pf-item--lg .pf-shot__media { aspect-ratio: 16 / 10; }
.pf-item--tall .pf-shot__media { aspect-ratio: 4 / 5; }
.pf-item--sm { width: 82%; align-self: flex-end; }
.pf-item--sm .pf-shot__media { aspect-ratio: 16 / 10; }
/* odd projects: title low, large photo high, small photo pair swapped */
.pf-proj.is-alt .pf-col--title { justify-content: flex-end; }
.pf-proj.is-alt .pf-col--a { justify-content: flex-start; }
.pf-proj.is-alt .pf-col--b { flex-direction: column-reverse; }
.pf-proj.is-alt .pf-item--sm { align-self: flex-start; }
.pf-progress { display: flex; align-items: center; gap: 20px; font-size: max(13px, 0.860vw); font-weight: 500; }
/* mini navigation: one marker per event on the progress line, each sitting where that event becomes current */
.pf-nav { flex: 1; position: relative; height: 32px; display: flex; align-items: center; }
.pf-progress__bar { flex: 1; height: 1px; background: var(--rule-d); position: relative; overflow: hidden; }
.pf-progress__bar::after { content: ""; position: absolute; inset: 0; background: var(--white); transform-origin: left; transform: scaleX(var(--p, 0)); }
.pf-mark {
  position: absolute; top: 0; left: var(--at, 0%); width: 24px; height: 32px; margin-left: -12px;
  display: grid; place-items: center;
}
.pf-mark::before {
  content: ""; width: 1px; height: 8px; background: var(--muted-d);
  transition: height .3s var(--ease-out), background-color .3s var(--ease-out);
}
.pf-mark.is-past::before { background: var(--white); }
.pf-mark:hover::before, .pf-mark:focus-visible::before, .pf-mark[aria-current="true"]::before { height: 16px; background: var(--white); }
.pf-mark__label {
  position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 4px;
  display: flex; gap: 8px; white-space: nowrap; pointer-events: none;
  font-size: max(13px, 0.860vw); font-weight: 500; color: var(--white);
  opacity: 0; transition: opacity .25s var(--ease-out), translate .25s var(--ease-out);
}
.pf-mark__label b { font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.pf-mark.is-start .pf-mark__label { left: 0; translate: 0 4px; }
.pf-mark.is-end .pf-mark__label { left: auto; right: 0; translate: 0 4px; }
.pf-mark:hover .pf-mark__label, .pf-mark:focus-visible .pf-mark__label { opacity: 1; translate: -50% 0; }
.pf-mark.is-start:hover .pf-mark__label, .pf-mark.is-start:focus-visible .pf-mark__label,
.pf-mark.is-end:hover .pf-mark__label, .pf-mark.is-end:focus-visible .pf-mark__label { translate: 0 0; }
.pf-step { display: flex; align-items: center; gap: 4px; }
.pf-step__btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--muted-d); transition: color .25s var(--ease-out);
}
.pf-step__btn:hover, .pf-step__btn:focus-visible { color: var(--white); }
.pf-step__btn:disabled { opacity: .3; cursor: default; color: var(--muted-d); }
.pf-progress__count { font-variant-numeric: tabular-nums; min-width: 6ch; text-align: center; }

/* ================= CTA ================= */
.cta { background: var(--accent); color: var(--white); padding-block: clamp(72px, 9vw, 461px); overflow: hidden; }
.cta__marquee { overflow: hidden; margin-bottom: clamp(48px, 6vw, 307px); }
.cta__track { display: flex; width: max-content; will-change: transform; }
.cta__track span { padding-bottom: .14em; font-size: clamp(72px, 15vw, 768px); line-height: .9; white-space: nowrap; font-weight: 500; font-variation-settings: "wdth" 75; }
.cta__body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 40px; align-items: end; }
.cta__text { grid-column: 1 / 9; font-size: clamp(30px, 3.8vw, 195px); line-height: 1.02; }
.btn {
  grid-column: 10 / 13; justify-self: end;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--white); color: var(--navy);
  padding: clamp(11px, .9vw, 46px) clamp(16px, 1.4vw, 72px);
  border-radius: 0; font-size: var(--btn-fs); font-weight: 500;
  transition: background .4s, color .4s;
  will-change: transform;
}
.btn i { font-style: normal; display: inline-block; transition: transform .5s var(--ease-out); }
.btn:hover { background: var(--navy); color: var(--white); }
.btn:hover i { transform: rotate(45deg); }

/* ================= CONTACT ================= */
.contact { padding-bottom: 0; overflow: hidden; }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 56px; }
.office h3 { font-size: max(13px, 0.860vw); font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid var(--rule-d); margin-bottom: 16px; }
.office--main { grid-column: 1 / 7; grid-row: span 3; }
.office--main p { font-size: clamp(20px, 1.6vw, 82px); line-height: 1.3; max-width: 26ch; margin-bottom: 40px; }
.office:not(.office--main) { grid-column: 8 / 13; }
.office dl { display: grid; gap: 4px; }
.office dt { font-size: max(13px, 0.860vw); color: var(--muted-d); margin-top: 10px; }
.office dt:first-child { margin-top: 0; }
.office dd { font-size: max(15px, 0.992vw); max-width: 44ch; }
.big-link {
  display: block; width: fit-content;
  font-size: clamp(22px, 2.6vw, 133px); line-height: 1.25;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease);
  overflow-wrap: anywhere;
}
.big-link:hover { background-size: 100% 1px; }

.footer { margin-top: var(--sec); border-top: 1px solid var(--rule-d); }
.footer__row { display: flex; justify-content: space-between; padding-block: 18px; font-size: max(13px, 0.860vw); font-weight: 500; }
.footer__row p { opacity: .6; }
.footer__giant {
  font-size: 15vw; line-height: .8; font-weight: 600;
  font-variation-settings: "wdth" 62; white-space: nowrap; text-align: center;
  text-align: left; margin: 0; padding: 0; color: var(--navy-2);
  translate: 0 .14em; /* push the baseline below the section edge so the word is cropped */
  -webkit-text-stroke: 1px rgba(255,255,255,.14);
}

/* ================= LIGHTBOX ================= */
.lightbox {
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: var(--m); border: 0;
  background: var(--ink); color: var(--white);
  display: none; grid-template-rows: auto 1fr auto; gap: 20px;
}
.lightbox[open] { display: grid; animation: lbIn .6s var(--ease) both; }
.lightbox::backdrop { background: rgba(10, 13, 25, .7); }
@keyframes lbIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.lb__head { display: grid; grid-template-columns: 4ch 1fr auto; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--rule-d); padding-bottom: 14px; }
.lb__no { font-size: max(13px, 0.860vw); font-weight: 500; color: var(--accent); }
.lb__title { font-size: clamp(22px, 2.4vw, 123px); font-weight: 400; line-height: 1.05; }
.lb__close { font-size: max(13px, 0.860vw); font-weight: 500; padding: 8px 0; }
.lb__stage { position: relative; min-height: 0; display: grid; place-items: center; }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb__nav { position: absolute; top: 50%; translate: 0 -50%; width: 56px; height: 56px; border-radius: 0; background: var(--white); color: var(--navy); font-size: max(20px, 1.323vw); transition: background .3s, color .3s; }
.lb__nav:hover { background: var(--accent); color: var(--white); }
.lb__prev { left: 0; } .lb__next { right: 0; }
.lb__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.lb__thumbs button { flex: none; width: 112px; aspect-ratio: 16 / 9; opacity: .4; transition: opacity .3s; outline-offset: 2px; }
.lb__thumbs button[aria-current="true"] { opacity: 1; outline: 1px solid var(--white); }
.lb__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ================= CURSOR ================= */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 0;
  background: var(--accent); color: var(--white); display: grid; place-items: center;
  font-size: max(13px, 0.860vw); font-weight: 500; scale: 0; transition: scale .4s var(--ease-out);
}
.cursor.is-on { scale: 1; }
@media (hover: none) { .cursor { display: none; } }

/* reveal defaults (JS adds .is-in); content stays visible without JS */
.js [data-reveal] { opacity: 0; transform: translateY(40px); }

/* ================= RESPONSIVE ================= */
@media (max-width: 960px) {
  .about__title, .about__copy { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .svc h3 { grid-column: 2 / 13; }
  .svc p { grid-column: 2 / 13; margin-top: 10px; }
  .equip h3, .equip ul { grid-column: 1 / -1; position: static; }
  .equip__col { row-gap: 20px; }
  /* values: headline on top, then the timeline with the line on the left and every item to its right */
  .values__intro, .vline { grid-column: 1 / -1; }
  .values__intro .display { font-size: clamp(36px, 9vw, 461px); max-width: 10ch; }
  .values__hint { display: none; }
  .values__body { row-gap: 28px; }
  .vline { --split: var(--tab-w); --gap: 18px; }
  .vitem--l .vitem__no { grid-column: 1; justify-self: end; }
  .vitem--l .vitem__no > span { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 0 72%); }
  .vitem--l .vitem__body { grid-column: 2; padding: 0 0 0 var(--gap); text-align: left; justify-self: start; }
  .vitem--r .vitem__body, .vitem--l .vitem__body { max-width: none; }
  .vitem--l .vitem__body p { margin-left: 0; text-align-last: left; }
  .js .vitem--l:not(.is-on) .vitem__no > span { transform: translateX(101%); }
  .js .vitem--l:not(.is-on) .vitem__body { transform: translateX(-16px); }
  .vitem h3 { font-size: clamp(26px, 7vw, 358px); }
  .cta__text, .btn { grid-column: 1 / -1; justify-self: start; }
  .office--main, .office:not(.office--main) { grid-column: 1 / -1; grid-row: auto; }
  .menu__list, .menu__meta { grid-column: 1 / -1; }
  .menu__meta { margin-top: 32px; }

  /* portfolio becomes a vertical list */
  .pf-pin { height: auto; padding-block: 48px 0; }
  .pf-intro { flex-direction: column; align-items: flex-start; }
  .pf-lead { width: 100%; }
  .pf-lead .display { white-space: normal; }
  .pf-track { width: auto; height: auto; flex-direction: column; gap: 56px; }
  .pf-proj { flex-direction: column; gap: 20px; }
  .pf-col, .pf-col--title, .pf-col--a, .pf-col--b { width: 100%; }
  .pf-proj.is-alt .pf-col--b { flex-direction: column; }
  .pf-item--sm, .pf-proj.is-alt .pf-item--sm { width: 100%; align-self: auto; }
  .pf-col--b { gap: 20px; }
  .pf-progress { display: none; }
}
@media (max-width: 640px) {
  .sec-head__label { grid-column: 3 / 9; }
  .sec-head__meta { grid-column: 9 / 13; }
  .quote__text { grid-column: 1 / -1; text-indent: 0; }
  .lb__nav { width: 44px; height: 44px; }
  .footer__row { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* without GSAP / with reduced motion the values scene is a plain stack */
html:not(.js) .vscene { height: auto; overflow: visible; }
html:not(.js) .vscene__words { display: none; }
html:not(.js) .values__media { position: relative; height: clamp(320px, 50vw, 2560px); }
html:not(.js) .values__body { position: relative; margin-top: -12vw; }


/* ================= DECOR (compressed vector trusses) ================= */
.about, .services, .contact { overflow: clip; }
.about > .wrap, .services > .wrap, .contact > .wrap, .contact > .footer { position: relative; z-index: 1; }
.deco { position: absolute; z-index: 0; pointer-events: none; height: auto; max-width: none; will-change: transform; }
.deco--about { right: -10vw; top: 0; width: clamp(240px, 30vw, 1536px); opacity: .05; }
.deco--services { right: -10vw; top: 0; width: clamp(280px, 36vw, 1843px); opacity: .55; }
.deco--contact { left: -10vw; top: 0; width: clamp(260px, 30vw, 1536px); opacity: .4; scale: -1 1; }
@media (max-width: 760px) { .deco { opacity: .18; width: 70vw; } }