@charset "UTF-8";
/* ============================================================================
   RAPULA MODIBANE / RETLHALEFILE — MOMENTUM
   ----------------------------------------------------------------------------
   WORLD        Performance-coaching energy. Near-black indigo ground and one
                bright sky blue, both sampled from the client's own logo. Type at
                architectural scale in Bricolage Grotesque. Colour arrives in
                blocks and wipes, never in gradients.
   SIGNATURE    Kinetic type: headlines resolve character by character, marquee
                bands run with scroll velocity, service rows drag an image with
                the cursor.
   PERSON FIRST Rapula leads every viewport he appears in; the company is the
                frame around him, not the subject.
   ============================================================================ */

/* --- 1. Faces ------------------------------------------------------------ */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  /* Palette sampled from the client's own logo: a deep indigo and a bright
     sky blue. Nothing here is invented. */
  --void:      #070b18;   /* the ground — near-black carrying the indigo cast */
  --void-2:    #0f1428;   /* raised panels on the ground */
  --void-3:    #1c2440;   /* hairlines on the ground */
  --paper:     #f4f6fa;   /* light sections */
  --paper-2:   #e6eaf2;
  --ink:       #0a0f1e;
  --ink-2:     #4a5568;   /* secondary on paper — 7.0:1 */
  --chalk:     #eef2f9;   /* primary on void */
  --chalk-2:   #93a1b8;   /* secondary on void — 7.5:1 */

  --brand:      #50b0e0;  /* the accent, straight off the logo swoosh */
  --brand-deep: #202060;  /* the logo's indigo */
  --brand-mid:  #1e5a8f;  /* the blue darkened for text on paper — 6.7:1 */
  --brand-ink:  #04101f;  /* text on the brand blue — 8.1:1 */

  --frame:   84rem;
  --gutter:  clamp(1.25rem, 4.5vw, 4rem);
  --measure: 62ch;

  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4.5rem; --s9:7rem;   --s10:11rem;

  /* Display sizes are deliberately enormous — this is the direction. */
  --t-mega:  clamp(2.7rem, 7.4vw, 7.4rem);
  --t-huge:  clamp(2.2rem, 5vw, 4.6rem);
  --t-big:   clamp(1.85rem, 3.8vw, 3.4rem);
  --t-mid:   clamp(1.5rem, 2.8vw, 2.4rem);
  --t-lede:  clamp(1.1rem, 1.35vw, 1.32rem);
  --t-body:  clamp(1rem, .35vw + .93rem, 1.1rem);
  --t-small: .9rem;
  --t-label: .72rem;

  --ease:  cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --d1: 180ms; --d2: 340ms; --d3: 680ms; --d4: 1100ms;

  --z-bg:1; --z-body:2; --z-nav:60; --z-cursor:90; --z-skip:100;
  color-scheme: dark;
}

/* --- 3. Reset ------------------------------------------------------------ */

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

body {
  margin:0;
  background: var(--void);
  color: var(--chalk);
  font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd { margin:0; }
ul,ol { padding:0; list-style:none; }
img,svg,video { display:block; max-width:100%; }
button,input,textarea,select { font:inherit; color:inherit; }
a { color:inherit; }

::selection { background: var(--brand); color: var(--brand-ink); }
:root { caret-color: var(--brand); accent-color: var(--brand); }
:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }

@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--void-3) var(--void); scrollbar-width: thin; }
}
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--void-3); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* --- 4. Type roles ------------------------------------------------------- */

.display {
  font-family:"Bricolage", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings:"wght" 700, "wdth" 92, "opsz" 48;
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-wrap:balance;
}
.display--tight { letter-spacing:-.04em; }

.eyebrow, .label {
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wght" 620, "wdth" 96;
  font-size: var(--t-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.4;
  font-variant-numeric: tabular-nums;
}
.lede { font-size: var(--t-lede); line-height:1.55; color: var(--chalk-2); max-width:52ch; text-wrap:pretty; }
.on-paper .lede { color: var(--ink-2); }

/* --- 5. Frame ------------------------------------------------------------ */

.wrap { width:100%; max-width:var(--frame); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:var(--z-body); }
.section { padding-block: clamp(4.5rem, 11vw, var(--s10)); position:relative; }
.on-paper { background: var(--paper); color: var(--ink); }
.on-brand { background: var(--brand); color: var(--brand-ink); }

/* Film grain over the whole page — keeps the flat blacks from going dead. */
.grain {
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 6. Skip + nav ------------------------------------------------------- */

.skip {
  position:fixed; left:var(--s4); top:var(--s4); z-index:var(--z-skip);
  transform:translateY(-250%);
  background:var(--brand); color:var(--brand-ink);
  padding:var(--s3) var(--s5); text-decoration:none;
  transition:transform var(--d2) var(--ease);
}
.skip:focus { transform:translateY(0); }

.nav {
  position:fixed; inset-block-start:0; inset-inline:0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding: var(--s5) var(--gutter);
  transition: background var(--d2) var(--ease), border-color var(--d2) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7,11,24,.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--void-3);
}
.nav__brand { display:flex; align-items:center; gap:var(--s3); text-decoration:none; }
.nav__mark { width:2.1rem; height:2.1rem; flex:0 0 auto; }
.foot .nav__mark { width:2.6rem; height:2.6rem; }
/* Reversed lockup: the logo's navy is only a shade off the ground here, so the
   disc lifts to a lighter indigo on dark surfaces. The print/light version in
   assets/img/logo-mark.svg keeps the true #202060. */
.nav__mark rect { fill:#33409c; }
.nav__brand b {
  font-family:"Bricolage", sans-serif;
  font-variation-settings:"wght" 800, "wdth" 88;
  font-size:1.5rem; letter-spacing:-.03em;
}
.nav__brand b span { color:var(--brand); }
.nav__brand span { color:var(--chalk-2); }
.nav__links { display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); }
.nav__links a:not(.btn) {
  text-decoration:none; font-size:var(--t-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--chalk-2);
  font-variation-settings:"wght" 600;
  transition:color var(--d1) var(--ease);
}
.nav__links a:not(.btn):hover { color:var(--chalk); }
.nav__toggle { display:none; background:none; border:1px solid var(--void-3); color:var(--chalk); padding:.5rem .8rem; cursor:pointer; font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; }

/* --- 7. Buttons ---------------------------------------------------------- */

.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-ink);
  position:relative; display:inline-flex; align-items:center; gap:var(--s3);
  padding:1rem 1.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  text-decoration:none; border:0; cursor:pointer;
  font-variation-settings:"wght" 700; font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase;
  overflow:hidden; isolation:isolate;
  transition:transform var(--d1) var(--ease);
}
.btn::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--chalk); transform:translateY(101%);
  transition:transform var(--d3) var(--ease);
}
.btn:hover { color:var(--void); }
.btn:hover::before { transform:translateY(0); }
.btn:active { transform:scale(.975); }

.btn--ghost { --btn-bg:transparent; --btn-fg:var(--chalk); box-shadow:inset 0 0 0 1px var(--void-3); }
.btn--ghost:hover { color:var(--void); }
.on-paper .btn--ghost { --btn-fg:var(--ink); box-shadow:inset 0 0 0 1px rgba(7,11,24,.22); }
.on-paper .btn--ghost::before { background:var(--ink); }
.on-paper .btn--ghost:hover { color:var(--paper); }

.btn__arrow { transition:transform var(--d3) var(--ease); }
.btn:hover .btn__arrow { transform:translateX(.35rem); }

/* --- 8. Hero ------------------------------------------------------------- */

.hero {
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block: clamp(7rem, 15vh, 10rem) var(--s8);
  overflow:hidden;
}
.hero__bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__bg img {
  width:100%; height:100%; object-fit:cover;
  object-position: 62% 40%;
  opacity:.85; filter:grayscale(1) contrast(1.12) brightness(.92);
  will-change:transform;
}
.hero__bg::after {
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(96deg, var(--void) 22%, rgba(7,11,24,.72) 48%, rgba(7,11,24,.25) 78%),
    linear-gradient(180deg, rgba(7,11,24,.9) 0%, transparent 30%, transparent 64%, var(--void) 98%);
}
/* a blue wash bleeding in from the right, behind the portrait */
.hero__bg::before {
  content:""; position:absolute; z-index:1;
  right:-12%; top:8%; width:52%; height:84%;
  background:radial-gradient(52% 60% at 60% 40%, rgba(80,176,224,.22), transparent 72%);
  filter:blur(28px);
}
/* Two scrims: one across for legibility, one from the left so the headline
   always sits on near-black no matter how the photo crops. */
.hero__bg::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--void) 26%, rgba(7,11,24,.72) 50%, rgba(7,11,24,.28) 78%),
    linear-gradient(180deg, rgba(7,11,24,.85) 0%, transparent 26%, transparent 62%, var(--void) 97%);
}

.hero__grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(2rem,5vw,var(--s9));
  align-items:center;
  width:100%; max-width:var(--frame); margin-inline:auto; padding-inline:var(--gutter);
}
.hero__col { display:flex; flex-direction:column; align-items:flex-start; }
.hero__title { font-size:var(--t-mega); max-width:11ch; margin-block:var(--s4) var(--s5); }
.hero__col .lede { max-width:44ch; }

/* The portrait sits in a deliberate frame with a blue plate behind it, so a
   photograph shot against a white conference backdrop reads as a picture
   rather than a cut-out floating on black. */
/* He now stands free in the stairwell rather than sitting in a frame. A soft
   pool under his feet keeps him from floating. */
.hero__figure { position:relative; justify-self:center; width:min(100%, 30rem); align-self:end; }
.hero__figure::before {
  content:""; position:absolute; z-index:0; left:50%; bottom:2.2rem;
  width:118%; height:5rem; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(80,176,224,.30), transparent 70%);
  filter:blur(18px);
}
.hero__figure picture { display:block; position:relative; z-index:1; }
.hero__figure img {
  width:100%; height:auto; max-height:74vh; object-fit:contain; object-position:bottom center;
  filter:contrast(1.06) saturate(.92) drop-shadow(0 26px 34px rgba(4,10,24,.6));
}
.hero__figure figcaption {
  position:relative; z-index:1; margin-top:var(--s4);
  color:var(--chalk-2); text-align:center;
}
.hero__title .ln { display:block; overflow:hidden; }
.hero__title .ln > span { display:block; will-change:transform; }
.hero__title em { font-style:normal; color:var(--brand); }

.hero__meta .lede { margin-top:var(--s4); }
.hero__acts { display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s6); }



.hero__scroll {
  position:absolute; left:var(--gutter); bottom:var(--s5); z-index:3;
  display:flex; align-items:center; gap:var(--s3); color:var(--chalk-2);
}
.hero__scroll i { display:block; width:1px; height:2.2rem; background:var(--void-3); position:relative; overflow:hidden; }
.hero__scroll i::after { content:""; position:absolute; inset-inline:0; height:50%; background:var(--brand); animation:drop 1.9s var(--ease-io) infinite; }
@keyframes drop { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(220%)} }

/* --- 9. Marquee ---------------------------------------------------------- */

.marquee {
  --speed: 42s;
  position:relative; overflow:hidden; display:flex;
  border-block:1px solid var(--void-3);
  padding-block:var(--s4);
  user-select:none;
}
.on-brand .marquee, .marquee--brand { background:var(--brand); color:var(--brand-ink); border-color:rgba(4,16,31,.20); }
.marquee__track { display:flex; flex:0 0 auto; gap:var(--s6); padding-right:var(--s6); animation:slide var(--speed) linear infinite; will-change:transform; }
.marquee--rev .marquee__track { animation-direction:reverse; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-100%); } }
.marquee__item {
  font-family:"Bricolage", sans-serif;
  font-variation-settings:"wght" 700,"wdth" 90;
  font-size:clamp(1.5rem,3.6vw,3rem);
  letter-spacing:-.03em; text-transform:uppercase; white-space:nowrap;
  display:flex; align-items:center; gap:var(--s6);
}
.marquee__item::after { content:""; width:.5rem; height:.5rem; background:var(--brand); flex:0 0 auto; }
.marquee--brand .marquee__item::after { background:var(--brand-ink); }
.marquee__item--hollow { color:transparent; -webkit-text-stroke:1px var(--chalk-2); }

/* --- 10. Section heads --------------------------------------------------- */

.head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:var(--s6) var(--s8); align-items:end; }
.head__title { font-size:var(--t-huge); }
.head__title em { font-style:normal; color:var(--brand); }
.on-paper .head__title em { color:var(--brand-mid); }
.head__num { color:var(--brand); }
.on-paper .head__num { color:var(--brand-mid); }

/* --- 11. Counters -------------------------------------------------------- */

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:var(--s6); margin-top:var(--s8); }
.stat { border-top:1px solid var(--void-3); padding-top:var(--s4); }
.on-paper .stat { border-top-color:rgba(7,11,24,.18); }
.stat__n {
  font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 700,"wdth" 88;
  font-size:clamp(2.4rem,5vw,4.6rem); line-height:.9; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.stat__n sup { font-size:.42em; vertical-align:super; color:var(--brand); }
.on-paper .stat__n sup { color:var(--brand-mid); }
.stat__l { margin-top:var(--s3); color:var(--chalk-2); font-size:var(--t-small); }
.on-paper .stat__l { color:var(--ink-2); }

/* --- 12. Service rows ---------------------------------------------------- */

.rows { margin-top:var(--s8); border-top:1px solid rgba(7,11,24,.18); }
.row {
  position:relative; display:grid;
  grid-template-columns:4rem minmax(0,1fr) minmax(0,.9fr) 3rem;
  gap:var(--s5); align-items:center;
  padding-block:clamp(1.4rem,3vw,2.4rem);
  border-bottom:1px solid rgba(7,11,24,.18);
  text-decoration:none; color:inherit;
  transition:transform var(--d3) var(--ease), color var(--d2) var(--ease);
}
.row::before {
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform var(--d3) var(--ease);
}
.row:hover { color:var(--paper); transform:translateX(var(--s5)); }
.row:hover::before { transform:scaleY(1); }
.row__n { font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 600; font-size:var(--t-small); color:var(--ink-2); }
.row:hover .row__n { color:var(--brand); }
.row__t { font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 600,"wdth" 92; font-size:var(--t-mid); line-height:1.05; letter-spacing:-.03em; }
.row__d { color:var(--ink-2); font-size:var(--t-small); line-height:1.5; }
.row:hover .row__d { color:var(--chalk-2); }
.row__a { justify-self:end; transition:transform var(--d3) var(--ease); }
.row:hover .row__a { transform:translateX(.4rem); }


/* --- 13. Split / portrait feature --------------------------------------- */

.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,var(--s9)); align-items:center; }
.split__media { position:relative; overflow:hidden; }
.split__media img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; transform:scale(1.02); }
.split__media--wide img { aspect-ratio:5/4; object-position:50% 50%; }
.split__body > * + * { margin-top:var(--s5); }

.quote {
  font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 500,"wdth" 92;
  font-size:var(--t-big); line-height:1.05; letter-spacing:-.035em; text-wrap:balance;
}
.quote em { font-style:normal; color:var(--brand); }
.on-paper .quote em { color:var(--brand-mid); }

/* --- 14. Gallery --------------------------------------------------------- */

.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s4); margin-top:var(--s8); }
.gallery figure { overflow:hidden; position:relative; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform var(--d4) var(--ease); }
.gallery figure:hover img { transform:scale(1.05); }
.gallery figcaption {
  position:absolute; inset-inline:0; bottom:0; padding:var(--s4);
  background:linear-gradient(180deg,transparent,rgba(7,11,24,.85));
  color:var(--chalk); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase;
}
.g-a { grid-column:span 5; aspect-ratio:4/5; }
.g-b { grid-column:span 7; aspect-ratio:16/10; }
.g-c { grid-column:span 4; aspect-ratio:1; }
.g-d { grid-column:span 8; aspect-ratio:16/9; }

/* --- 15. Logo wall ------------------------------------------------------- */

/* nine marks: a column count that divides nine leaves no orphan cell */
.logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(7,11,24,.16); border:1px solid rgba(7,11,24,.16); margin-top:var(--s8); }
.logos li { background:var(--paper); display:grid; place-items:center; padding:var(--s6) var(--s5); aspect-ratio:16/6; }
/* multiply drops the white JPG boxes into the paper so the marks sit on the
   ground rather than on visible white rectangles */
.logos img { max-height:4.2rem; max-width:80%; width:auto; object-fit:contain; filter:grayscale(1) contrast(1.05); opacity:.78; mix-blend-mode:multiply; transition:opacity var(--d2) var(--ease), filter var(--d2) var(--ease); }
.logos li:hover img { opacity:1; filter:grayscale(0); }

/* --- 16. CTA ------------------------------------------------------------- */

.cta { text-align:center; }
.cta__t { font-size:var(--t-huge); }
.cta__acts { display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:center; margin-top:var(--s7); }

/* --- 17. Footer ---------------------------------------------------------- */

.foot { border-top:1px solid var(--void-3); padding-block:var(--s8) var(--s6); }
.foot__grid { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(8rem,1fr)); gap:var(--s7) var(--s5); }
.foot a { text-decoration:none; color:var(--chalk-2); transition:color var(--d1) var(--ease); }
.foot a:hover { color:var(--brand); }
.foot li + li { margin-top:var(--s3); }
.foot__end { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s4); margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--void-3); color:var(--chalk-2); font-size:var(--t-small); }

/* --- 18. Reveal (JS adds .in) -------------------------------------------- */

/* Reveal states only exist when JS is there to undo them. Without the .js
   flag the page renders fully visible — a failed script must never leave the
   content hidden. */
.js [data-rise] { opacity:0; transform:translateY(2.2rem); transition:opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }
.js [data-rise].in { opacity:1; transform:none; }
[data-rise-d="1"]{transition-delay:.08s}[data-rise-d="2"]{transition-delay:.16s}
[data-rise-d="3"]{transition-delay:.24s}[data-rise-d="4"]{transition-delay:.32s}

/* The clip lives on the image, never on the observed element: an element
   clipped to zero area reports no intersection, so it could never un-clip
   itself. */
.js .clipreveal img { clip-path:inset(0 0 100% 0); transition:clip-path var(--d4) var(--ease); }
.js .clipreveal.in img { clip-path:inset(0 0 0 0); }

/* --- 19. Cursor ---------------------------------------------------------- */

.cursor {
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  width:1.6rem; height:1.6rem; border:1px solid var(--brand); border-radius:50%;
  pointer-events:none; mix-blend-mode:difference;
  opacity:0; will-change:transform;
  transition:opacity var(--d2) var(--ease), background var(--d2) var(--ease);
}
.cursor::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  transition:transform var(--d2) var(--ease), background var(--d2) var(--ease);
}
.cursor.is-on { opacity:1; }
.cursor.is-big::after { transform:scale(2.5); background:rgba(80,176,224,.20); }
@media (hover:none),(pointer:coarse) { .cursor { display:none; } }

/* --- 20. Responsive ------------------------------------------------------ */

@media (max-width:64rem) {
  /* Mobile hero: one screen, not one and a half. The copy takes the space it
     needs at the top and Rapula fills whatever is left, scaled to fit rather
     than stacked below at a fixed size. */
  .hero {
    height:100svh; min-height:34rem; max-height:100svh; overflow:hidden;
    padding-block: calc(var(--s8) + 1.5rem) 0;
    display:flex; flex-direction:column; justify-content:flex-start;
  }
  .hero__grid {
    grid-template-columns:minmax(0,1fr); gap:0;
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
  }
  .hero__col { flex:0 0 auto; }
  .hero__col .lede { font-size:1rem; line-height:1.5; max-width:36ch; }
  .hero__title { margin-block:0 var(--s4); max-width:14ch; }
  .hero__acts { margin-top:var(--s5); gap:var(--s3); }
  .hero__figure {
    flex:1 1 0; min-height:0; width:100%; overflow:hidden;
    justify-self:auto; align-self:stretch; margin:0;
    display:flex; align-items:flex-end; justify-content:center;
  }
  .hero__figure { position:relative; }
  /* the <picture> is the flex item; without a size the absolute img collapses */
  .hero__figure picture { position:absolute; inset:0; display:block; }
  .hero__figure img {
    position:absolute; inset:0;
    width:100%; height:100%; max-width:none; max-height:none;
    object-fit:contain; object-position:bottom center;
  }
  .hero__figure::before { bottom:0; width:78%; height:3rem; }
  .hero__scroll { display:none; }
  .head, .split { grid-template-columns:minmax(0,1fr); }
  .gallery { grid-template-columns:repeat(6,1fr); }
  .logos { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .logos li { aspect-ratio:4/2.4; }
  .g-a,.g-b,.g-c,.g-d { grid-column:span 6; }
  .g-a{aspect-ratio:4/5}.g-b,.g-d{aspect-ratio:16/10}.g-c{aspect-ratio:4/3}
}

@media (max-width:46rem) {
  .nav__toggle { display:inline-block; }
  .nav__links {
    position:absolute; inset-inline:var(--gutter); top:calc(100% + .4rem);
    display:none; flex-direction:column; align-items:stretch; gap:0;
    background:var(--void-2); border:1px solid var(--void-3); padding:var(--s4) var(--s5) var(--s5);
  }
  .nav__links.is-open { display:flex; }
  .nav__links a:not(.btn) { padding-block:var(--s4); border-bottom:1px solid var(--void-3); }
  .nav__links .btn { margin-top:var(--s4); justify-content:center; }
  .logos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logos li { aspect-ratio:3/2; padding:var(--s4); }
  .row { grid-template-columns:2.4rem minmax(0,1fr); }
  .row__d { grid-column:2; }
  .row__a { display:none; }
}

/* --- 21. Motion preference ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rise] { opacity:1; transform:none; }
  .clipreveal img { clip-path:none; }
  .marquee__track { animation:none; }
  .hero__title .ln > span { transform:none !important; }
}

/* --- 22. Page masthead (inner pages) ------------------------------------- */

.pagehead {
  position:relative;
  padding-block: clamp(8rem, 20vh, 13rem) clamp(3rem, 7vw, 5.5rem);
  overflow:hidden;
}
.pagehead::after {
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-14%; top:-32%; width:56%; height:108%;
  background:radial-gradient(44% 42% at 62% 42%, rgba(80,176,224,.24), transparent 70%);
  filter:blur(34px);
}
.pagehead .wrap { position:relative; z-index:1; }
.pagehead__crumb { display:flex; align-items:center; gap:var(--s3); color:var(--chalk-2); margin-bottom:var(--s6); }
.pagehead__crumb a { color:var(--chalk-2); text-decoration:none; transition:color var(--d1) var(--ease); }
.pagehead__crumb a:hover { color:var(--brand); }
.pagehead__crumb span[aria-hidden] { color:var(--chalk-2); opacity:.5; }
.pagehead__t { font-size:var(--t-mega); max-width:16ch; }
.pagehead__t em { font-style:normal; color:var(--brand); }
.pagehead__l { margin-top:var(--s6); max-width:52ch; }
.pagehead__date { margin-top:var(--s5); color:var(--chalk-2); }

.pagehead--post .pagehead__t--post {
  font-size:clamp(2rem, 4.6vw, 4rem);
  max-width:22ch; text-transform:none; letter-spacing:-.03em; line-height:1.02;
}
.pagehead--404 { text-align:center; padding-block: clamp(9rem,24vh,15rem) clamp(5rem,12vh,9rem); }
.pagehead--404 .pagehead__t, .pagehead--404 .pagehead__l { margin-inline:auto; }
.pagehead--404 .hero__acts { justify-content:center; }
.four04 {
  font-size:clamp(5rem,18vw,14rem); color:transparent;
  -webkit-text-stroke:2px var(--void-3); line-height:.9; margin-bottom:var(--s5);
}

/* --- 23. Spec list ------------------------------------------------------- */

.spec { border-top:1px solid var(--void-3); margin-top:var(--s6); }
.on-paper .spec { border-top-color:rgba(7,11,24,.16); }
.spec div {
  display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:var(--s3) var(--s5); padding-block:var(--s4);
  border-bottom:1px solid var(--void-3);
}
.on-paper .spec div { border-bottom-color:rgba(7,11,24,.12); }
.spec dd { color:var(--chalk-2); }
.on-paper .spec dd { color:var(--ink-2); }

/* --- 24. Cards ----------------------------------------------------------- */

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1px; background:var(--void-3); border:1px solid var(--void-3); margin-top:var(--s8); }
.on-paper .cards { background:rgba(7,11,24,.14); border-color:rgba(7,11,24,.14); }
.card { background:var(--void); padding:var(--s6); }
.on-paper .card { background:var(--paper); }
.card__t { font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 600,"wdth" 94; font-size:var(--t-mid); line-height:1.06; letter-spacing:-.03em; margin-top:var(--s4); }
.card__b { margin-top:var(--s4); color:var(--chalk-2); font-size:var(--t-small); line-height:1.55; }
.on-paper .card__b { color:var(--ink-2); }

/* --- 25. Values ---------------------------------------------------------- */

.values { margin-top:var(--s8); border-top:1px solid rgba(7,11,24,.14); }
.values li {
  display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:var(--s4);
  padding-block:var(--s5); border-bottom:1px solid rgba(7,11,24,.14);
  color:var(--ink-2);
}
.values__n { font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 600; color:var(--brand-mid); }

.foot__note { margin-top:var(--s6); color:var(--ink-2); font-size:var(--t-small); max-width:60ch; }

/* --- 26. Post cards ------------------------------------------------------ */

.posts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7) var(--s6); margin-top:var(--s8); }
@media (max-width:46rem) { .posts { grid-template-columns:minmax(0,1fr); } }
.post { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.post__media { display:block; overflow:hidden; aspect-ratio:16/10; background:var(--void-2); }
.post__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--d4) var(--ease); }
.post:hover .post__media img { transform:scale(1.05); }
.post__meta { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s5); color:var(--chalk-2); }
.post__kind { color:var(--brand); }
.post__t {
  font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 600,"wdth" 94;
  font-size:1.32rem; line-height:1.12; letter-spacing:-.025em; margin-top:var(--s3);
  transition:color var(--d1) var(--ease);
}
.post:hover .post__t { color:var(--brand); }
.post__d { margin-top:var(--s3); color:var(--chalk-2); font-size:var(--t-small); line-height:1.55; }

/* --- 27. Article --------------------------------------------------------- */

.article { max-width:64ch; }
.article > * + * { margin-top:var(--s5); }
.article p { color:var(--chalk-2); text-wrap:pretty; }
.article .lede { color:var(--chalk); }
.article h2 {
  font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 600,"wdth" 94;
  font-size:var(--t-mid); line-height:1.1; letter-spacing:-.03em;
  margin-top:var(--s8); color:var(--chalk);
}
.article a { color:var(--brand); text-underline-offset:.2em; }
.article ul { margin-top:var(--s4); }
.article ul li { position:relative; padding-left:var(--s5); margin-top:var(--s3); color:var(--chalk-2); }
.article ul li::before { content:""; position:absolute; left:0; top:.7em; width:.75rem; height:1px; background:var(--brand); }

.note { margin-top:var(--s7); padding:var(--s5); border:1px solid var(--void-3); background:var(--void-2); }
.note p + p { margin-top:var(--s3); }
.note p:not(.label) { color:var(--chalk-2); font-size:var(--t-small); }

.postnav { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s5); margin-top:var(--s9); padding-top:var(--s6); border-top:1px solid var(--void-3); }
.postnav__next { text-decoration:none; color:inherit; max-width:44ch; }
.postnav__next .label { color:var(--brand); }
.postnav__t { display:block; margin-top:var(--s3); font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 600,"wdth" 94; font-size:1.3rem; line-height:1.14; letter-spacing:-.025em; transition:color var(--d1) var(--ease); }
.postnav__next:hover .postnav__t { color:var(--brand); }

/* --- 28. Channels -------------------------------------------------------- */

.channels { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px; background:var(--void-3); border:1px solid var(--void-3); }
.channels li { background:var(--void); padding:var(--s6); }
.channels__a { display:block; margin-top:var(--s3); font-size:clamp(1.1rem,1.7vw,1.4rem); font-variation-settings:"wght" 600; color:var(--chalk); text-decoration:none; transition:color var(--d1) var(--ease); }
a.channels__a:hover { color:var(--brand); }
.channels__n { margin-top:var(--s3); color:var(--chalk-2); font-size:var(--t-small); }

/* --- 29. Legal ----------------------------------------------------------- */

.legal { max-width:70ch; }
.legal > * + * { margin-top:var(--s4); }
.legal p, .legal li { color:var(--chalk-2); font-size:1rem; line-height:1.68; }
.legal h2 {
  font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 600,"wdth" 94;
  font-size:1.34rem; letter-spacing:-.02em; color:var(--chalk);
  margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--void-3);
}
.legal h3 { font-size:1.06rem; font-variation-settings:"wght" 650; color:var(--chalk); margin-top:var(--s5); }
.legal ul { margin-top:var(--s3); }
.legal ul li { position:relative; padding-left:var(--s5); margin-top:var(--s2); }
.legal ul li::before { content:""; position:absolute; left:0; top:.8em; width:.6rem; height:1px; background:var(--void-3); }
.legal a { color:var(--brand); }
.legal strong { color:var(--chalk); font-variation-settings:"wght" 650; }

/* --- 30. Forms ----------------------------------------------------------- */

.formgrid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.82fr); gap:var(--s8); align-items:start; margin-top:var(--s8); }
.form { max-width:none; }
.field { margin-top:var(--s5); }
.field > label { display:block; margin-bottom:var(--s2); }
.field input, .field textarea {
  width:100%; padding:.85rem .95rem;
  background:var(--void-2); border:1px solid var(--void-3); border-radius:0;
  color:var(--chalk); font-size:var(--t-body);
  transition:border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease);
}
.on-paper .field input, .on-paper .field textarea { background:#ffffff; border-color:rgba(7,11,24,.2); color:var(--ink); }
.field textarea { min-height:9rem; resize:vertical; line-height:1.6; }
.field input::placeholder, .field textarea::placeholder { color:var(--chalk-2); opacity:.85; }
.on-paper .field input::placeholder, .on-paper .field textarea::placeholder { color:var(--ink-2); opacity:.75; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.field__row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.field__err { display:none; margin-top:var(--s2); color:#ff9d8a; font-size:var(--t-small); }
.on-paper .field__err { color:#a81f1a; }
.field.is-invalid input, .field.is-invalid textarea { border-color:#ff9d8a; box-shadow:inset 0 0 0 1px #ff9d8a; }
.on-paper .field.is-invalid input, .on-paper .field.is-invalid textarea { border-color:#a81f1a; box-shadow:inset 0 0 0 1px #a81f1a; }
.form__note { color:var(--chalk-2); font-size:var(--t-small); }
.on-paper .form__note { color:var(--ink-2); }
.form__status { display:none; margin-top:var(--s5); padding:var(--s5); border-left:2px solid var(--brand); background:var(--void-2); }
.on-paper .form__status { background:rgba(7,11,24,.05); color:var(--ink); }
.on-paper .form__status strong { color:var(--ink); }
.on-paper .form__status .form__note, .on-paper .form__status p { color:var(--ink-2); }
.on-paper .form__status a { color:var(--brand-mid); }
.form__status strong { color:var(--chalk); }
.form__status a { color:var(--brand); }
.form__status.is-shown { display:block; }
.form__status p + p { margin-top:var(--s3); }

.formaside { position:sticky; top:6rem; }
.formaside > * + * { margin-top:var(--s6); }
.formaside p { color:var(--chalk-2); font-size:var(--t-small); line-height:1.6; }
.on-paper .formaside p { color:var(--ink-2); }
.formaside ul li { position:relative; padding-left:var(--s5); margin-top:var(--s3); color:var(--chalk-2); font-size:var(--t-small); line-height:1.55; }
.on-paper .formaside ul li { color:var(--ink-2); }
.formaside ul li::before { content:""; position:absolute; left:0; top:.72em; width:.75rem; height:1px; background:var(--brand); }
.on-paper .formaside ul li::before { background:var(--brand-mid); }

.mt6 { margin-top:var(--s6); }

/* --- 31. Responsive for the new blocks ---------------------------------- */

@media (max-width:64rem) {
  .formgrid { grid-template-columns:minmax(0,1fr); gap:var(--s6); }
  .formaside { position:static; }
}
@media (max-width:46rem) {
  .field__row { grid-template-columns:1fr; }
  .spec div { grid-template-columns:minmax(0,1fr); gap:var(--s1); }
  .values li { grid-template-columns:2.6rem minmax(0,1fr); }
  .pagehead { padding-block: clamp(7rem,17vh,10rem) var(--s7); }
}

/* --- 32. Typographic post plate ------------------------------------------ */

.post__media--plain { display:grid; place-items:center; background:var(--void-2); border:1px solid var(--void-3); }
.on-paper .post__media--plain { background:var(--paper-2); border-color:rgba(7,11,24,.14); }
.post__glyph {
  font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 700,"wdth" 92;
  font-size:clamp(1.5rem,3.2vw,2.4rem); text-transform:uppercase; letter-spacing:-.035em;
  color:transparent; -webkit-text-stroke:1px var(--brand); text-align:center; padding:var(--s5);
}

/* ============================================================================
   33. THE ASCENT — the site's signature
   "There is no elevator to success. Take the stairs." The page is the climb:
   a generative stair-field behind everything, a rail that tracks how far you
   have come, and photography treated into one duotone so it reads as art
   direction rather than assembly.
   ========================================================================== */

/* --- Generative stair-field, painted to canvas ------------------------- */

.ascent {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5;
}
.ascent canvas { width: 100%; display: block; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .ascent { opacity: .3; } }

/* --- The rail: how far up you are --------------------------------------- */

.rail {
  position: fixed; z-index: 45;
  left: clamp(.9rem, 2.2vw, 1.9rem);
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  pointer-events: none;
  mix-blend-mode: difference;
}
.rail__n {
  font-family:"Bricolage",sans-serif; font-variation-settings:"wght" 700,"wdth" 88;
  font-size: .78rem; letter-spacing:.06em; color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.rail__track {
  position: relative; width: 1px; height: clamp(7rem, 20vh, 12rem);
  background: rgba(238,242,249,.22); overflow: hidden;
}
.rail__fill {
  position: absolute; inset-inline: -1px; top: 0; height: 100%;
  background: var(--chalk);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 140ms linear;
  will-change: transform;
}
/* the treads: small ticks that light as you pass them */
.rail__steps { display: flex; flex-direction: column; gap: 6px; }
.rail__step {
  width: 15px; height: 2px; background: rgba(238,242,249,.25);
  transform: scaleX(.6); transform-origin: 0 50%;
  transition: background 260ms var(--ease), transform 260ms var(--ease);
}
.rail__step.is-done { background: var(--chalk); transform: scaleX(1); }
.rail__label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family:"Archivo",sans-serif; font-variation-settings:"wght" 600;
  font-size: .6rem; letter-spacing:.24em; text-transform: uppercase;
  color: var(--chalk); opacity:.75; max-height: 11rem; overflow: hidden;
}
@media (max-width: 64rem) { .rail { display: none; } }

/* --- Duotone: one treatment across every photograph --------------------- */

.duo { position: relative; overflow: hidden; isolation: isolate; background: var(--brand-deep); }
.duo > img { display:block; width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.18) brightness(.94); mix-blend-mode: luminosity; }
.duo::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(160deg, rgba(32,32,96,.9), rgba(80,176,224,.55) 62%, rgba(7,11,24,.9));
  mix-blend-mode: color;
  opacity:.52;   /* enough to unify the set, light enough to keep faces legible */
}
.duo--soft::after { opacity:.65; }

/* --- Full-bleed scene band --------------------------------------------- */

.scene {
  position: relative; min-height: clamp(24rem, 62vh, 40rem);
  display: grid; place-items: center; overflow: hidden;
  border-block: 1px solid var(--void-3);
}
.scene__img { position:absolute; inset:0; }
.scene__img img { width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.15); opacity:.5; will-change:transform; }
.scene__img::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--void) 4%, rgba(7,11,24,.35) 46%, rgba(7,11,24,.75)),
              linear-gradient(180deg, var(--void), transparent 26%, transparent 72%, var(--void));
}
.scene__body { position:relative; z-index:2; text-align:center; padding-inline: var(--gutter); }
.scene__t { font-size: var(--t-huge); max-width:20ch; margin-inline:auto; }
.scene__t em { font-style:normal; color:var(--brand); }
.scene__l { margin: var(--s5) auto 0; max-width:46ch; }

/* --- Step markers on section heads -------------------------------------- */

.head { position: relative; }
.head__step {
  display:flex; align-items:center; gap:var(--s3);
  color: var(--brand); margin-bottom: var(--s4);
}
.head__step i { display:block; width:2.2rem; height:1px; background:currentColor; opacity:.6; }
.on-paper .head__step { color: var(--brand-mid); }

/* --- Sections sit above the canvas -------------------------------------- */

.section, .pagehead, .hero, .marquee, .foot, .scene { position: relative; z-index: 1; }
.on-paper, .on-brand { z-index: 1; }

/* --- 34. Mobile ergonomics ----------------------------------------------
   Tap targets, label sizes and spacing tuned for a thumb rather than a
   cursor. 44px is the practical floor for anything you are meant to hit. */

@media (max-width: 64rem) {
  :root { --t-label: .78rem; }   /* 12.5px — 11.5px is too small to read on a phone */

  /* the menu button is the most-tapped control on the page */
  .nav__toggle {
    min-height: 44px; min-width: 44px;
    padding: .7rem 1rem;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav__brand { min-height: 44px; align-items: center; }

  /* standalone list links get a real tap area; inline prose links are exempt */
  .foot ul a,
  .nav__links a:not(.btn),
  .postnav__next,
  .pagehead__crumb a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .foot li + li { margin-top: var(--s2); }

  .channels__a { min-height: 44px; display: flex; align-items: center; }
  .channels li { padding: var(--s5); }

  .btn { min-height: 48px; padding-block: .9rem; }

  /* headings and body get a little more room to breathe */
  .head { gap: var(--s5); }
  .section { padding-block: clamp(3.5rem, 9vw, 5.5rem); }
  .scene { min-height: clamp(20rem, 52vh, 26rem); }
  .scene__t { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .pagehead__t { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .cta__t { font-size: clamp(2rem, 9.5vw, 3rem); }
}

@media (max-width: 46rem) {
  /* buttons stack rather than squeezing two onto one line */
  .hero__acts .btn, .cta__acts .btn { flex: 1 1 100%; justify-content: center; }
  .cta__acts { flex-direction: column; align-items: stretch; }
  /* auto-fit was squeezing four columns into 350px and colliding the text */
  .foot__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s6) var(--s5); }
  .foot__grid > :first-child { grid-column: 1 / -1; }
  .foot__end { flex-direction: column; gap: var(--s2); }
  .gallery { gap: var(--s3); }
  .stats { gap: var(--s5); }
}