/* THE HOME PAGE (C5, "after Karima", 22 Sep 2026). Only index.html loads this, with mark.css.
   Ported from design/isms/ (base.css, r3.css, r5.css, c5.css and c5-filter.html's own rules), with the
   review chrome removed and the choices Gryph made baked in: the small labels restyled, Dean's line
   as he sent it, the why line option 1. Reduce Motion is a media query here rather than the study's
   html.rm class, so the page needs no new inline script and the CSP hashes stay as they are.

   READABILITY (Karima, relayed by Gryph): no body or brief text under 17px on a desktop or 16px on a
   phone; grey on black #9E9894 is 6.91:1, grey on the white #55595C is 6.5:1. */

/* 'Display' and 'Text' come from assets/type.css, which every public page loads. */

:root{
  --ink:#0B0B0C; --paper:#F4F5F8; --cream:#EFEBE6;
  --red:#FFB547;        /* accent on dark: AMBER (Dean, Karima, Gryph, 22 Sep), 11.20:1 on #0B0B0C */
  --blood:#FFB547;      /* the one band (the door), amber with ink type */
  --muted:#9E9894;      /* grey on dark, 6.91:1 */
  --ltmuted:#55595C;    /* grey on the white, 6.5:1 */
  --ltred:#8A5200;      /* accent on the white: dark amber, 5.86:1 on #F4F5F8 */
  --line-d:rgba(239,235,230,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#0B0B0C}
body{font-family:'Text',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0B0B0C;color:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-weight:400;font-family:'Display',Georgia,serif;letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:#FFB547;color:#0B0B0C;padding:12px 18px;z-index:100;font-weight:600}
.skip:focus{left:0}
.wrap{max-width:1320px;margin:0 auto;padding:0 38px}

/* ── the bar: the wordmark alone. Hidden while the opening plays (home.js writes --nav), and its
      ground follows the page, dark over black and light over the white half (--topbg/--topfg). ── */
.top{position:fixed;inset:0 0 auto;z-index:60;display:flex;justify-content:flex-start;align-items:center;gap:20px;
  padding:17px 34px;opacity:var(--nav,1);pointer-events:none;
  background:linear-gradient(180deg,var(--topbg,rgba(11,11,12,.92)),var(--topbg0,rgba(11,11,12,0)));
  color:var(--topfg,#EFEBE6)}
.top a{pointer-events:none;text-decoration:none;color:inherit;display:inline-flex;align-items:center}
.navon .top a{pointer-events:auto}
.wmk{font-family:'Display',Georgia,serif;font-weight:400;line-height:1;letter-spacing:-.005em;white-space:nowrap}
.top .wm-ax,.top .wm-line{font-size:24px}
.top .wm-stack{display:inline-flex;flex-direction:column;font-size:15px;line-height:.98}

/* ── the pinned opening ── */
.seq{position:relative;height:640vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0B0B0C}
/* the load fade lives on the wrapper: an animation with fill-mode forwards beats a scroll-driven
   value on the same property (v21) */
.axw{position:absolute;inset:0;display:grid;place-items:center;z-index:8;pointer-events:none;
  opacity:0;animation:axin 1400ms cubic-bezier(.22,.9,.24,1) 200ms forwards}
@keyframes axin{to{opacity:1}}
/* the mark is AX over VENTURES, variant 6b of design/ax-logo-contrast.html (Gryph, 23 Sep): the serif
   letters mirrored so the A's left leg and the X's rising stroke carry the weight, the X outlined in amber at
   twice the A's line and in front of it, VENTURES outlined from Hanken Grotesk 400. Its viewBox keeps the
   earlier mark's proportions (359.92 x 298.74), so these width limits size it exactly as before. */
.axw .ax{width:min(41.95vw,377.5px,58.73vh);height:auto;color:var(--cream);
  opacity:var(--m,1);transform:scale(calc(.8 + var(--m,1) * .2));will-change:opacity,transform}
.axw .axword{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--cream);
  font-family:'Display',Georgia,serif;font-weight:400;letter-spacing:-.012em;text-align:center;
  opacity:var(--m,1);transform:scale(calc(.8 + var(--m,1) * .2));will-change:opacity,transform}
.axw .axword.wm-line{font-size:clamp(46px,7.6vw,128px);line-height:1;white-space:nowrap}
.axw .axword.wm-stack{font-size:clamp(56px,9.4vw,158px);line-height:.94}
/* The opening spells the name out (Gryph, 23 Sep 2026, option C of the three rendered): "Axel" large in EB Garamond
   SemiBold over VENTURES in small, widely spaced Hanken Grotesk capitals, the shape of the AX lockup it replaces.
   The AX mark stays in the markup, hidden, so it can come back with one line. The lockup inherits .axword's fade
   and scale, so it recedes on scroll exactly as the mark did. Heights are capped by the screen's height as well as
   its width, for phones held sideways. */
@font-face{font-family:'DisplayStrong';font-weight:500 700;font-display:swap;src:url(fonts/display-strong.woff2) format('woff2')}
.axw .ax{display:none!important}
.axw .axlock{line-height:1}
.axw .axlock .axbig{font-family:'DisplayStrong','Display',Georgia,serif;font-weight:600;letter-spacing:-.02em;line-height:.9;
  font-size:clamp(64px,min(14vw,30vh),230px)}
.axw .axlock .axsmall{font-family:'Text',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.62em;padding-left:.62em;
  margin-top:.9em;font-size:clamp(12px,min(1.55vw,2.9vh),26px)}
@media (max-width:820px){
  .axw .axlock .axbig{font-size:clamp(64px,min(27vw,24vh),150px)}
  .axw .axlock .axsmall{font-size:clamp(12px,min(3.6vw,2.4vh),18px)}
}
.cue{position:absolute;bottom:5vh;left:50%;width:1px;height:44px;z-index:8;
  background:linear-gradient(var(--red),transparent);opacity:var(--m,1)}
.l1{position:absolute;inset:0;display:grid;place-items:center;padding:0 8vw;z-index:7;pointer-events:none}
.l1 p{font-family:'Display',serif;font-size:clamp(36px,5.6vw,88px);line-height:1.04;letter-spacing:-.012em;
  text-align:center;max-width:min(100%,1100px);text-wrap:balance;
  opacity:var(--l1,0);transform:scale(calc(.9 + var(--l1s,0) * .14));will-change:opacity,transform}
.land{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:var(--land,0);
  display:grid;place-items:center;padding:0 8vw;text-align:center}
.land p{font-family:'Display',serif;line-height:1.02;letter-spacing:-.012em;text-wrap:balance;
  max-width:min(100%,1100px);font-size:clamp(42px,5.6vw,92px);text-shadow:0 2px 40px rgba(11,11,12,.8)}

/* ── the filter: three columns drift at three speeds, and a picture lights only as it crosses the
      middle, with the reason on the left. Only the companies light (home.js, home-crowd.js). ── */
.pnl{position:absolute;left:5vw;top:0;bottom:0;width:min(34vw,520px);z-index:5;pointer-events:none;opacity:var(--po,0)}
.pn{position:absolute;left:0;right:0;top:50%;transform:translateY(-44%);display:flex;flex-direction:column;gap:14px;
  opacity:0;transition:opacity .35s ease,transform .5s cubic-bezier(.22,.9,.24,1)}
.pn.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.pn .rs{font-family:'Display',serif;line-height:1.04;letter-spacing:-.006em;font-size:clamp(36px,3.9vw,64px);text-wrap:balance}
.pn .rule{height:1px;background:var(--line-d);margin:8px 0 4px}
.pn .brf{font-size:17px;line-height:1.55;color:var(--muted);max-width:420px}
.pn .mk{display:inline-flex;align-items:center;height:28px;text-decoration:none}
.pn .mk svg,.pn .mk img{height:28px;width:auto;max-width:150px;filter:brightness(0) invert(.93)}
/* three of the live cards carry their wordmark as a PNG (Peak, Kalos, Anew), not an SVG */
.pn .mk .nm{font-family:'Display',serif;font-size:25px;line-height:1}
/* the small labels, restyled (Gryph: "less about removing and more like just tweaking the font and the
   formatting"): the body face at reading size, sentence case, no wide tracking, grey not red */
.lab{font-family:'Text',-apple-system,sans-serif;font-size:17px;line-height:1.4;letter-spacing:.005em;
  text-transform:none;font-weight:500;color:var(--muted)}
.crowd{position:absolute;left:42vw;right:3vw;top:0;bottom:0;overflow:hidden;z-index:3;opacity:var(--co,0);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%)}
.col{position:absolute;top:0;display:flex;flex-direction:column;gap:28px;will-change:transform}
.ph{position:relative;overflow:hidden;background:#141416;flex:none}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.42) grayscale(.6);transition:filter .4s ease}
.ph.lit img{filter:none}
.ph.lit{box-shadow:0 0 0 1px rgba(255,181,71,.85)}
.ph .tg{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;font-size:15px;line-height:1.3;color:#EFEBE6;
  background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.88));opacity:0;transition:opacity .35s ease}
.ph.lit .tg{opacity:1}
/* the line a picture has to cross to light */
.tick{position:absolute;top:50%;width:14px;height:1px;background:var(--red);z-index:4;opacity:var(--co,0)}
.tick.l{left:calc(42vw - 22px)}.tick.r{right:calc(3vw - 22px)}

/* ── after the pin: the text is simply there. Nothing lights word by word and nothing rises
      (Karima: "you've already had your hero moment"). ── */
.say{position:relative;padding:clamp(70px,13vh,150px) 0 clamp(90px,15vh,170px);background:#0B0B0C}
.say .thesis{font-family:'Display',serif;font-size:clamp(40px,5.8vw,94px);line-height:1.01;letter-spacing:-.014em;
  max-width:min(100%,1160px);text-wrap:balance}
.say .redrule{width:72px;height:2px;background:var(--red);margin:clamp(28px,4.4vh,44px) 0 clamp(22px,3.4vh,34px)}
.say .backs{font-family:'Display',serif;font-size:clamp(25px,2.6vw,40px);line-height:1.16;max-width:min(100%,780px);text-wrap:balance}
.say .lived{color:var(--muted);font-size:18px;line-height:1.62;max-width:560px;margin-top:18px;text-wrap:pretty}

/* ── "We invest in ___": the flip, the landing, then the whole screen turns white as one colour
      change (never an edge), and the why line arrives on the white ── */
.flip{position:relative;height:320vh;background:#0B0B0C}
.fstick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;
  background:var(--fg,#0B0B0C);overflow:hidden}
.fstick>.wrap{width:100%;position:relative}
.flead{font-family:'Display',serif;font-size:clamp(40px,4.8vw,80px);line-height:1.02;letter-spacing:-.012em;opacity:var(--ft,1)}
.fbox{position:relative;margin-top:2px;opacity:var(--ft,1)}
.fslot{height:1.08em;overflow:hidden;font-family:'Display',serif;font-size:clamp(58px,8.2vw,142px);line-height:1.08;
  letter-spacing:-.016em;color:var(--red)}
.fwords{display:flex;flex-direction:column;transition:transform .34s cubic-bezier(.22,.9,.24,1);will-change:transform}
/* each word gets 1.4em of track while the slot shows 1.08em, so a neighbour's descenders or ascenders never
   sit inside the slot at rest (Schibsted's ran 2.7px into it at 1440) */
.fw{display:block;height:1.4em;white-space:nowrap}
.fland{position:absolute;left:0;top:0;right:0;font-family:'Display',serif;font-size:clamp(48px,6.2vw,108px);line-height:1.03;
  letter-spacing:-.014em;max-width:min(100%,1180px);text-wrap:balance;opacity:0}
.fstage{margin-top:clamp(24px,3.8vh,40px);opacity:0}
.fwhy{position:absolute;left:38px;right:38px;top:50%;transform:translateY(-50%);opacity:0;
  font-family:'Display',Georgia,serif;font-size:clamp(30px,3.4vw,54px);line-height:1.14;letter-spacing:-.008em;
  max-width:min(100% - 76px,1040px);text-wrap:balance;color:#0B0B0C;pointer-events:none}
/* only without motion: a still band carries the page from black to white */
.ramp{display:none;height:38vh;background:linear-gradient(180deg,#0B0B0C 0%,#1B1C1E 18%,#5B5D61 48%,#B3B5B9 76%,#F4F5F8 100%)}

/* ── the white half ── */
.white{position:relative;background:var(--paper);color:var(--ink);--muted:var(--ltmuted);--red:var(--ltred);
  padding:clamp(40px,6vh,70px) 0 clamp(40px,7vh,80px)}
.whyline{display:none;font-family:'Display',Georgia,serif;font-size:clamp(30px,3.4vw,54px);line-height:1.14;
  letter-spacing:-.008em;max-width:min(100%,1040px);text-wrap:balance;color:var(--ink);margin-bottom:clamp(80px,13vh,150px)}
/* No photograph beside Why us (Gryph, 22 Sep: the pines were never asked for). The text runs alone, at a readable measure. */
.whygrid{display:grid;grid-template-columns:1fr;max-width:820px;align-items:start}
.white .lab{display:block;margin-bottom:16px}
.banner{font-family:'Display',Georgia,serif;font-weight:400;font-size:clamp(34px,4.2vw,66px);line-height:1.04;
  letter-spacing:-.01em;max-width:min(100%,640px);text-wrap:balance;color:var(--ink)}
/* decorative lines on the white take the Talk to us amber: the dark amber read as leftover red on a thin
   line (Gryph, 22 Sep). Text and focus on the white stay --ltred, which is what keeps them readable. */
.white .redrule{width:72px;height:2px;background:var(--blood);margin:22px 0 4px}
.body{font-size:19.5px;line-height:1.62;color:#34383B;max-width:600px;margin-top:20px}

/* ── the companies: the live site's row (public.css, "the companies: photographs on the page,
      wordmarks under them, no card chrome"), no header, TMRW last. The brief is at reading size. ── */
.show{position:relative;background:var(--paper);color:var(--ink);padding:clamp(24px,4vh,44px) 0 0}
.carousel{position:relative;z-index:2;display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:26px 34px 52px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.carousel:active{cursor:grabbing}
.carousel::-webkit-scrollbar{display:none}
.card.pc{flex:0 0 clamp(256px,23vw,330px);height:auto;border:0;border-radius:0;background:none;color:var(--ink);
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;text-decoration:none;
  transition:opacity .3s ease}
.pcimg{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:22px;background:#DDE3E3}
.pcimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.22,.9,.24,1)}
.card.pc:hover .pcimg img{transform:scale(1.035)}
.pcbar{display:flex;align-items:center;height:58px;padding:0 2px;border-bottom:1px solid transparent;transition:border-color .28s ease}
.card.pc:hover .pcbar,.card.pc:focus-visible .pcbar{border-bottom-color:var(--blood)}
.pcbar .mk{display:flex;align-items:center;justify-content:flex-start;position:static;padding:0;opacity:1;color:#0B0B0C}
.pcbar .mk svg{width:auto;height:var(--mh);max-width:100%;min-height:0;max-height:var(--mh,34px);filter:brightness(0)}
.pcbar .mk img{width:auto;height:var(--mh);max-width:100%;max-height:var(--mh,34px);object-fit:contain;filter:brightness(0)}
.pcbrief{display:block;padding:2px 2px 0;font-size:17px;line-height:1.45;color:var(--ltmuted);min-height:74px;max-width:300px}
.carousel:hover .card.pc{opacity:.34}
.carousel:hover .card.pc:hover,.carousel .card.pc:focus-visible{opacity:1}
@media (hover:none){.carousel:hover .card.pc{opacity:1}}

/* ── the door: the thin red band with caps ── */
.door{background:var(--blood);color:#0B0B0C;text-align:center;padding:clamp(34px,5vh,56px) 24px}
.door a{display:inline-flex;align-items:center;gap:20px;text-decoration:none;color:#0B0B0C;font-weight:600;
  font-size:clamp(14px,1.15vw,18px);letter-spacing:.22em;text-transform:uppercase}
.door svg{width:44px;height:auto;transition:transform .3s cubic-bezier(.22,.9,.24,1)}
.door a:hover svg{transform:translateX(8px)}
.door a:focus-visible{outline:2px solid #0B0B0C;outline-offset:6px}

/* ── the footer: the name again, the disclaimer, the legal links ── */
.c5foot{background:var(--paper);color:var(--ink);border-top:1px solid rgba(11,11,12,.20);padding:clamp(34px,5vh,52px) 34px 64px}
.c5foot .fmark{color:inherit;text-decoration:none;display:inline-flex}
.c5foot .wm-ax,.c5foot .wm-line{font-size:clamp(30px,2.5vw,38px)}
.c5foot .wm-stack{display:inline-flex;flex-direction:column;font-size:clamp(24px,2vw,30px);line-height:.96}
.c5legal{margin-top:26px;font-size:17px;line-height:1.6;color:var(--ltmuted);max-width:820px}
.c5links{margin-top:20px;display:flex;gap:22px;flex-wrap:wrap;font-size:17px;line-height:1.6}
.c5links a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(11,11,12,.3);transition:color .2s,border-color .2s}
.c5links a:hover{color:var(--ltred);border-color:var(--ltred)}

@media (max-width:820px){
  .wrap{padding:0 20px}
  .top{padding:13px 18px}
  .top .wm-ax,.top .wm-line{font-size:21px}
  .top .wm-stack{font-size:14px}
  .axw .axword.wm-line{font-size:clamp(34px,10.4vw,72px)}
  .axw .axword.wm-stack{font-size:clamp(48px,15vw,96px)}
  /* the mark is under half its desktop size here, so its hairlines would fall to ~0.5px and read grey:
     hold them at a real pixel width instead (the A's line, and the X's at about twice it). */
  .axw .ax g path{vector-effect:non-scaling-stroke;stroke-width:1px}
  .axw .ax>path[stroke]{vector-effect:non-scaling-stroke;stroke-width:1.7px}
  .crowd{left:18px;right:18px;bottom:40vh;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 88%,transparent 100%)}
  .col{gap:12px}
  .tick{top:30vh}.tick.l{left:4px}.tick.r{right:4px}
  .pnl{left:22px;right:22px;width:auto;top:60vh;bottom:0}
  .pn{top:14px;transform:translateY(8px);gap:8px}
  .pn.on{transform:none}
  .pn .rs{font-size:clamp(28px,8vw,38px)}
  .pn .brf{display:none}
  .pn .rule{margin:4px 0 2px}
  .pn .mk{height:24px}.pn .mk svg,.pn .mk img{height:22px}
  .lab{font-size:16px}
  .ph .tg{font-size:13px;padding:24px 8px 8px}
  .say .lived{font-size:17px}
  .fwhy{left:20px;right:20px;max-width:none;font-size:clamp(26px,7vw,40px)}
  .body{font-size:18px}
  .carousel{padding:22px 22px 48px}
  .c5foot{padding:30px 22px 70px}
  .c5legal,.c5links{font-size:16px}
}
@media (max-width:560px){
  .card.pc{flex-basis:clamp(232px,62vw,268px)}
  .pcbrief{font-size:16px;min-height:70px}
}

/* ── Reduce Motion, and no script at all: everything is still and in reading order ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card.dup{display:none}
  .carousel{-webkit-mask-image:none;mask-image:none}
  .seq,.flip{height:auto}
  .stage{position:relative;height:auto;overflow:visible}
  .axw{position:relative;inset:auto;opacity:1;animation:none;padding:16vh 0 4vh}
  .axw .ax,.axw .axword{opacity:1;transform:none}
  .axw .ax{width:min(35.66vw,230.7px)}
  .cue,.pnl,.tick{display:none}
  .l1{position:relative;inset:auto;padding:0 8vw 8vh}
  .l1 p{opacity:1;transform:none}
  .crowd{position:relative;left:auto;right:auto;top:auto;bottom:auto;opacity:1;-webkit-mask-image:none;mask-image:none;
    display:flex;gap:20px;padding:0 5vw}
  .col{position:relative;flex:1;transform:none!important;left:auto!important;width:auto!important}
  .ph img{filter:none}
  .ph .tg{opacity:1}
  .land{position:relative;inset:auto;opacity:1;padding:12vh 8vw}
  .fstick{position:relative;height:auto;padding:12vh 0;background:#0B0B0C}
  .fslot{display:none}
  .fland{position:relative;opacity:1}
  .fstage{opacity:1}
  .fwhy{display:none}
  .ramp{display:block}
  .whyline{display:block}
  .white{padding-top:clamp(80px,13vh,150px)}
  .top a{pointer-events:auto}
}
html:not(.js) .seq,html:not(.js) .flip{height:auto}
html:not(.js) .stage{position:relative;height:auto;overflow:visible}
html:not(.js) .axw{position:relative;inset:auto;opacity:1;animation:none;padding:16vh 0 4vh}
html:not(.js) .cue,html:not(.js) .pnl,html:not(.js) .tick,html:not(.js) .crowd,html:not(.js) .fslot,html:not(.js) .fwhy{display:none}
html:not(.js) .l1{position:relative;inset:auto;padding:0 8vw 8vh}
html:not(.js) .l1 p{opacity:1;transform:none}
html:not(.js) .land{position:relative;inset:auto;opacity:1;padding:12vh 8vw}
html:not(.js) .fstick{position:relative;height:auto;padding:12vh 0}
html:not(.js) .fland,html:not(.js) .fstage{position:relative;opacity:1}
html:not(.js) .ramp,html:not(.js) .whyline{display:block}
html:not(.js) .top{opacity:1}
html:not(.js) .top a{pointer-events:auto}