@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 ------------------------------------------------------------ */

/* Both faces are subset by tools/subset-fonts.py. The axis ranges below must
   match LIMITS in that script — widen both together before using a new weight
   or width. Each family is split on unicode-range: the -latin file carries
   everything the site uses, and the -latin1 file (accented letters, for a name
   the client adds later) is fetched only if such a character appears. */
@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 85% 100%;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-latin1.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 85% 100%;
  font-display: swap;
  unicode-range: U+00A1-00A8, U+00AA-00B6, U+00B8-00FF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 380 720;
  font-stretch: 90% 104%;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin1.woff2") format("woff2");
  font-weight: 380 720;
  font-stretch: 90% 104%;
  font-display: swap;
  unicode-range: U+00A1-00A8, U+00AA-00B6, U+00B8-00FF;
}

/* --- 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;
}
/* The hero headline sets its own line breaks. Nothing animates: the mask
   and the transform that used it are gone. */
.hero__title .ln { display:block; }
.hero__title .ln > span { display:block; }
.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; }
}

/* --- 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); }
}

/* ============================================================================
   35. COMPANY-LED HERO, FOUNDER BLOCK, THREE-UP GALLERY
   The site leads with Retlhalefile Holding Group, not with a portrait, so the
   hero is a single-column statement over the stairwell rather than a two-column
   layout with a person in the right-hand slot.
   ========================================================================== */

.hero--full .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--full .hero__col  { max-width: 52rem; }
.hero--full .hero__title { max-width: 13ch; }
.hero--full .hero__col .lede { max-width: 52ch; }

/* Without a portrait on the right there is nothing to hide, so the scrim can
   ease off and let the stairwell read. Still opaque enough on the left that
   the headline never sits on photograph. */
.hero--full .hero__bg::after {
  background:
    linear-gradient(104deg, var(--void) 18%, rgba(7,11,24,.82) 44%, rgba(7,11,24,.42) 72%, rgba(7,11,24,.30) 100%),
    linear-gradient(180deg, rgba(7,11,24,.88) 0%, transparent 28%, transparent 58%, var(--void) 96%);
}
.hero--full .hero__bg img { object-position: 58% 38%; opacity: .9; }
.hero--full .hero__bg::before { right:-8%; top:4%; width:60%; height:92%; }

/* The company name is carried by the lede's opening words rather than by an
   eyebrow label above the headline — that shape reads as generic SaaS chrome. */
.hero--full .hero__col .lede b {
  color:var(--chalk); font-weight:inherit;
  font-variation-settings:"wght" 620;
}

/* ---- Founder block ------------------------------------------------------ */
.split__t { font-size:var(--t-big); }
.split__t em { font-style:normal; color:var(--brand); }
.split__role { color:var(--brand); }
/* the body stack sets s5 between every child; name → role should sit tight */
.split__body > .split__t + .split__role { margin-top:var(--s2); }
.split__body > .head__step + .split__t { margin-top:var(--s4); }

/* ---- Three-up gallery ---------------------------------------------------- */
/* Two across, then one wide band. Reads as a composition rather than a grid
   of equal thumbnails. */
.gallery--3 .g-a { grid-column:span 5; aspect-ratio:4/5; }
.gallery--3 .g-b { grid-column:span 7; aspect-ratio:4/5; }
.gallery--3 .g-c { grid-column:span 12; aspect-ratio:21/9; }

@media (max-width:64rem) {
  /* No figure in the company hero, so it sizes to its content and the
     elaborate flex/absolute arrangement built for the cut-out does not apply. */
  .hero--full {
    height:auto; min-height:100svh; max-height:none;
    justify-content:center;
    padding-block: calc(var(--s8) + 2rem) var(--s8);
  }
  .hero--full .hero__grid { display:grid; flex:none; }
  .hero--full .hero__title { margin-block:0 var(--s4); max-width:12ch; }
  .hero--full .hero__col .lede { max-width:46ch; }
  .hero--full .hero__scroll { display:none; }

  .gallery--3 .g-a,
  .gallery--3 .g-b { grid-column:span 6; }
  .gallery--3 .g-c { grid-column:span 6; aspect-ratio:16/9; }
  .gallery--3 .g-a { aspect-ratio:4/5; }
  .gallery--3 .g-b { aspect-ratio:4/5; }
}

@media (max-width:46rem) {
  .gallery--3 .g-a,
  .gallery--3 .g-b,
  .gallery--3 .g-c { grid-column:span 6; }
  .gallery--3 .g-b { aspect-ratio:16/10; }
}

/* ---- Founder portrait (background-removed cut-out) ---------------------- */
/* A cut-out has no frame of its own, so it needs a ground to stand on rather
   than the photographic crop the other split media get. No .duo here: the
   duotone blend expects an opaque image and a direct-child <img>. */
.split__media--cut {
  aspect-ratio:4/5; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  background:
    radial-gradient(64% 46% at 50% 88%, rgba(80,176,224,.22), transparent 72%),
    linear-gradient(168deg, var(--void-3) 0%, var(--void-2) 48%, var(--void) 100%);
}
.split__media--cut picture { display:block; height:97%; }
.split__media--cut img {
  width:auto; height:100%; max-width:100%;
  aspect-ratio:auto; object-fit:contain; object-position:bottom center;
  transform:none;
  filter:contrast(1.05) saturate(.94) drop-shadow(0 22px 30px rgba(4,10,24,.55));
}

/* ---- Service rows on a dark ground -------------------------------------- */
/* The rows component was authored for .on-paper: ink-coloured text, ink
   hairlines and an ink hover fill. On the dark "For institutions" list all
   three all but vanished — the descriptions measured 2.61:1. Give the dark
   ground its own values and scope the paper ones. */
.rows { border-top-color: rgba(238,242,249,.20); }
.row { border-bottom-color: rgba(238,242,249,.20); }
.row__n, .row__d { color: var(--chalk-2); }
.row::before { background: var(--void-3); }
.row:hover { color: var(--chalk); }
.row:hover .row__d { color: var(--chalk); }

.on-paper .rows { border-top-color: rgba(7,11,24,.18); }
.on-paper .row { border-bottom-color: rgba(7,11,24,.18); }
.on-paper .row__n, .on-paper .row__d { color: var(--ink-2); }
.on-paper .row::before { background: var(--ink); }
.on-paper .row:hover { color: var(--paper); }
.on-paper .row:hover .row__d { color: var(--chalk-2); }

/* ---- Form states -------------------------------------------------------- */
/* .field__err is display:none by default; it only appears once the field is
   actually marked invalid. */
.field.is-invalid .field__err { display:block; }
.form__status--bad { border-left-color:#ff9d8a; }
.on-paper .form__status--bad { border-left-color:#a81f1a; }
.form .btn[disabled] { opacity:.6; cursor:progress; }
/* Honeypot: off-screen rather than display:none, which bots skip. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }