section[id]{scroll-margin-top:96px}
:root{--brand:#EC8644;/* Fortitude orange (from vector logo) */
  --brand-dk:#D6712F;/* AA-safe orange for small text on light backgrounds and for fills
     behind white text. 5.24:1 on white, 4.80:1 on the soft grey.
     Brand orange #EC8644 is unchanged and still used for fills,
     graphics, large display and orange text on dark sections. */
  --brand-text:var(--brand);
  --on-brand:#22333F;/* CO 22 Sep 2026: navy for text sitting ON the orange, and for the orange-text
     background on hover. #293C4B measured 4.38 against #EC8644 and the standard is 4.5.
     #22333F measures 5.0. The orange itself is untouched. */--brand-tint:#FBEEE1;--ink:#293C4B;/* Fortitude navy (from vector logo) — headings */
  --navy:#293C4B;/* dark sections */
  --navy-deep:#1E2C38;/* deepest — cta / loader */

  --body:#48535c;--mute:#646e75;--hair:#E6E8EA;--hair-2:#eef0f0;--bg:#ffffff;--bg-soft:#F5F5F2;--font:"helvetica-neue-lt-pro","Helvetica Neue",Helvetica,"Nimbus Sans",Arial,sans-serif;--maxw:1240px;--gutter:clamp(20px,5vw,64px);--nav-h:91px;--ease:cubic-bezier(.16,1,.3,1)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--body);background:var(--bg);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--ink);font-weight:500;line-height:1.05;letter-spacing:-.03em}
.display{font-weight:500;letter-spacing:-.045em;line-height:1}
h1{font-size:clamp(2.4rem,6.2vw,5rem)}
h2{font-size:clamp(1.95rem,4vw,3.2rem);font-weight:500;letter-spacing:-.035em}
h3{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:500;letter-spacing:-.02em}
p{font-size:clamp(1rem,1.1vw,1.12rem);max-width:64ch}
.lead{font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:400;color:var(--ink);line-height:1.4;letter-spacing:-.02em;max-width:52ch}
strong{font-weight:600;color:var(--ink)}

/* small section label (sentence case, not shouty) */

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding:clamp(64px,9vw,132px) 0}
.section-soft{background:var(--bg-soft)}
.section-dark{background:var(--navy);color:#c3ccd2}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.grid{display:grid;gap:clamp(24px,3vw,56px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-size:.92rem;font-weight:500;letter-spacing:.01em;padding:15px 26px;border-radius:3px;transition:all .4s var(--ease);position:relative;overflow:hidden}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn-brand{background:var(--brand);color:var(--on-brand)}
.btn-brand:hover{background:var(--on-brand);color:var(--brand)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--brand);color:var(--on-brand)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--on-brand);color:var(--brand)}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost.on-dark:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:500;color:var(--ink);border-bottom:1.5px solid var(--brand);padding-bottom:3px;transition:gap .35s var(--ease)}
.link-arrow:hover{gap:.9em}

/* ============================================================ LOADER (minimal) */
/* translucent veil: the page shows through while the symbol forges */
#preloader{position:fixed;inset:0;z-index:9999;background:rgba(30,44,56,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;transition:opacity .45s var(--ease),visibility .45s;perspective:900px}
#preloader.done{opacity:0;visibility:hidden}
#preloader.instant{transition:none}
#preloader .fmark{width:clamp(76px,12vw,116px);height:clamp(76px,12vw,116px)}

/* ===== Signature FF mark: two interlocking F's forging together ===== */
.fmark{display:block}
.fmark .ff-a,.fmark .ff-b{fill:var(--brand)}
.fmark .ff-a,.fmark .ff-b,.fmark .ff-all{transform-box:fill-box;transform-origin:center}
.fmark.loop .ff-a{animation:ffJoinA 4.4s var(--ease) infinite}
.fmark.loop .ff-b{animation:ffJoinB 4.4s var(--ease) infinite}
.fmark.loop .ff-all{animation:ffSettle 4.4s var(--ease) infinite}
@keyframes ffJoinA{
  0%{transform:translate(-60px,-8px);opacity:0}
  14%{opacity:1}
  36%{transform:translate(0,0)}
  42%{transform:translate(3px,0)}
  48%{transform:translate(0,0)}
  80%{transform:translate(0,0);opacity:1}
  93%,100%{transform:translate(-60px,-8px);opacity:0}
}
@keyframes ffJoinB{
  0%{transform:translate(60px,8px);opacity:0}
  14%{opacity:1}
  36%{transform:translate(0,0)}
  42%{transform:translate(-3px,0)}
  48%{transform:translate(0,0)}
  80%{transform:translate(0,0);opacity:1}
  93%,100%{transform:translate(60px,8px);opacity:0}
}
@keyframes ffSettle{
  0%,36%{transform:scale(1)}
  42%{transform:scale(1.055)}
  50%{transform:scale(1)}
  100%{transform:scale(1)}
}
/* one-shot forge for page transitions: flies in, clicks together, holds */
.fmark.once .ff-a{animation:ffOnceA 1.05s var(--ease) forwards}
.fmark.once .ff-b{animation:ffOnceB 1.05s var(--ease) forwards}
.fmark.once .ff-all{animation:ffOnceS 1.05s var(--ease) forwards}
@keyframes ffOnceA{
  0%{transform:translate(-60px,-8px);opacity:0}
  18%{opacity:1}
  58%{transform:translate(0,0)}
  72%{transform:translate(3px,0)}
  86%,100%{transform:translate(0,0);opacity:1}
}
@keyframes ffOnceB{
  0%{transform:translate(60px,8px);opacity:0}
  18%{opacity:1}
  58%{transform:translate(0,0)}
  72%{transform:translate(-3px,0)}
  86%,100%{transform:translate(0,0);opacity:1}
}
@keyframes ffOnceS{
  0%,58%{transform:scale(1)}
  72%{transform:scale(1.055)}
  86%,100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .fmark.loop .ff-a,.fmark.loop .ff-b,.fmark.loop .ff-all{animation:none;transform:none;opacity:1}
}
@keyframes markspin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* ============================================================ NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);display:flex;align-items:center;background:rgba(20,30,40,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .45s var(--ease),box-shadow .45s var(--ease),height .45s var(--ease)}
.nav.light{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Nav is not constrained to the body max-width: it uses the available width and flexes */
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:min(1560px,100%);gap:clamp(16px,2vw,48px)}
.nav .nav-logo{flex:0 0 auto}
.nav-logo{display:flex;align-items:center;gap:13px}
.nav-logo .nav-word{height:23px;width:auto;display:block}
.nav-mark{display:block;width:32px;height:32px;flex:0 0 auto}
.nav-mark .fmark{width:100%;height:100%;overflow:visible}
.nav-logo .logo-dark{display:none}
.nav.solid .nav-logo .logo-rev,.nav.light .nav-logo .logo-rev{display:none}
.nav.solid .nav-logo .logo-dark,.nav.light .nav-logo .logo-dark{display:block}
/* hover: the symbol re-forges (F's fly apart and lock back together) */
.nav-logo:hover .nav-mark .ff-a{animation:ffHoverA .85s cubic-bezier(.4,0,.2,1)}
.nav-logo:hover .nav-mark .ff-b{animation:ffHoverB .85s cubic-bezier(.4,0,.2,1)}
@keyframes ffHoverA{0%{transform:translate(0,0)}48%{transform:translate(-7px,0)}100%{transform:translate(0,0)}}
@keyframes ffHoverB{0%{transform:translate(0,0)}48%{transform:translate(7px,0)}100%{transform:translate(0,0)}}
.nav-links{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(13px,1.7vw,34px);min-width:0}
.nav-links a{font-size:clamp(.95rem,.72vw + .42rem,1.08rem);font-weight:500;color:rgba(255,255,255,.85);letter-spacing:0;position:relative;padding:4px 0;transition:color .3s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--brand);transition:width .35s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-cta{font-weight:600;white-space:nowrap}
/* dropdowns */
.nitem{position:relative;display:flex;align-items:center}
.nitem>a .cv{font-size:.62em;margin-left:6px;opacity:.55;transition:transform .3s;display:inline-block}
.nitem:hover>a .cv,.nitem:focus-within>a .cv{transform:rotate(180deg)}
.nitem .sub{position:absolute;top:calc(100% + 16px);left:-18px;min-width:240px;background:#fff;border-radius:4px;box-shadow:0 18px 50px -18px rgba(30,46,58,.45),0 1px 0 var(--hair);padding:10px 0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.nitem .sub::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nitem:hover .sub,.nitem:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nitem .sub a{display:block;padding:9px 20px;color:var(--body) !important;font-size:.95rem;white-space:nowrap}
.nitem .sub a::after{display:none !important}
.nitem .sub a:hover{color:var(--ink) !important;background:var(--bg-soft)}
.nav .nav-links a.nav-portal{border:1px solid rgba(255,255,255,.45);border-radius:3px;padding:6px clamp(10px,1vw,15px);font-weight:600;white-space:nowrap;color:rgba(255,255,255,.9);transition:border-color .3s,color .3s}
.nav .nav-links a.nav-portal::after{display:none !important}
.nav .nav-links a.nav-portal:hover{border-color:#fff;color:#fff}
.nav.solid .nav-links a.nav-portal,.nav.light .nav-links a.nav-portal{border-color:rgba(18,49,79,.4);color:var(--body)}
.nav.solid .nav-links a.nav-portal:hover,.nav.light .nav-links a.nav-portal:hover{border-color:var(--ink);color:var(--ink)}
.nav.solid{background:#fff;height:79px;box-shadow:0 1px 0 var(--hair)}
.nav.solid .nav-logo{color:var(--ink)}
.nav.solid .nav-links a{color:var(--body)}
.nav.solid .nav-links a:hover,.nav.solid .nav-links a.active{color:var(--ink)}
.nav.light .nav-logo{color:var(--ink)}
.nav.light .nav-links a{color:var(--body)}
.nav.light .nav-links a:hover,.nav.light .nav-links a.active{color:var(--ink)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:24px;height:2px;background:#fff;transition:.3s}
.nav.solid .nav-toggle span,.nav.light .nav-toggle span{background:var(--ink)}

/* ============================================================ HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.hero-slides{position:absolute;inset:0}
.hslide{position:absolute;inset:0;background-size:cover;background-position:center 40%;transform-origin:center 78%;opacity:0;will-change:opacity,transform;animation:heroKen 30s linear infinite}
@keyframes heroKen{
  0%{opacity:0;transform:scale(1.04)}
  2.5%{opacity:1}
  14%{opacity:1;transform:scale(1.11)}
  18%{opacity:0;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.12)}
}
.hero-media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(22,35,46,.55) 0%,rgba(22,35,46,.15) 38%,rgba(22,35,46,.86) 100%)}
.hero-inner{position:relative;z-index:3;padding-bottom:clamp(56px,9vh,120px);padding-top:calc(var(--nav-h) + 40px);width:100%}
.rotator{position:relative;height:1.5em;margin:0 0 8px;font-size:clamp(1.2rem,2.9vw,2.2rem);font-weight:500;color:#fff;letter-spacing:-.01em}
.rotator .ph{position:absolute;left:0;bottom:0;white-space:nowrap;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rotator .ph.active{opacity:1;transform:none}
.hero-fort{margin:0;line-height:0;font-size:0}
.hero-wordmark{display:block;width:auto;height:clamp(2.9rem,11.5vw,10rem);filter:drop-shadow(0 2px 40px rgba(0,0,0,.25))}
.hero-wordmark .wch{opacity:0;transform:translateY(34%);transform-box:fill-box;transform-origin:50% 100%;animation:fortch 1s var(--ease) both}
@keyframes fortch{to{opacity:1;transform:translateY(0)}}
.hero-fort .ch{display:inline-block;transform:translateY(112%);opacity:0;animation:fortin .9s var(--ease) forwards}
.hero-fort .dotred{color:var(--brand-text)}
@keyframes fortin{to{transform:none;opacity:1}}
.hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* opening statement */
.intro{padding:clamp(48px,7vw,96px) 0}
.intro .wrap{max-width:var(--maxw)}
.intro-statement{position:relative;background:#EDF0F2;color:var(--ink);border-radius:6px;padding:clamp(36px,5vw,72px);padding-bottom:clamp(64px,6.5vw,92px);font-size:clamp(1.5rem,3.05vw,2.45rem);line-height:1.36;letter-spacing:-.02em;max-width:none}
.intro-mark{position:absolute;right:clamp(24px,3.6vw,52px);bottom:clamp(22px,3vw,40px);width:clamp(19px,2.4vw,33px);height:clamp(19px,2.4vw,33px);pointer-events:none}
.intro-mark .fmark{width:100%;height:100%}
.intro-statement[data-reveal]{opacity:1;transform:none}
.intro-statement .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.intro-statement.in .w{opacity:1;transform:none}
.intro-statement .lt{font-weight:300}
.intro-statement .em{font-weight:600}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;font-size:.7rem;letter-spacing:.14em;color:rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll .sline{width:1px;height:40px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero-scroll .sline::after{content:"";position:absolute;top:-40px;left:0;width:1px;height:40px;background:var(--brand);animation:scrolldn 2s var(--ease) infinite}
@keyframes scrolldn{0%{top:-40px}60%,100%{top:40px}}
@media(max-width:600px){.rotator{font-size:1.05rem;height:2.6em;white-space:normal}.rotator .ph{white-space:normal}}

/* page hero (inner pages) */
.phero{position:relative;padding-top:calc(var(--nav-h) + clamp(56px,10vw,120px));padding-bottom:clamp(40px,6vw,80px);background:var(--navy-deep);border-bottom:none}
.phero h1,.phero .display{color:#fff}
.phero .lead{color:rgba(255,255,255,.88);max-width:52ch}
.phero h1{max-width:18ch}
.phero .lead{margin-top:20px}
.crumb{font-size:.82rem;color:var(--mute);margin-bottom:20px;letter-spacing:0}
.crumb a:hover{color:var(--ink)}
.crumb b{color:var(--brand-text);font-weight:600}

/* ============================================================ VIDEO BLOCK */
.videoblock{position:relative;border-radius:4px;overflow:hidden;background:var(--navy);aspect-ratio:16/9;cursor:pointer}
.videoblock.tall{aspect-ratio:4/5}
.videoblock video,.videoblock .vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.videoblock .vshade{position:absolute;inset:0;z-index:1}
.vplay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2.4vw,30px);color:#fff}
.vplay .pbtn{flex:0 0 auto;width:64px;height:64px;min-width:64px;min-height:64px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;margin-bottom:auto;transition:all .4s var(--ease)}
.videoblock:hover .pbtn{background:var(--brand);border-color:var(--brand-text);transform:scale(1.08)}
.vplay .pbtn svg{margin-left:3px}
.vmeta .vt{font-size:.92rem;font-weight:600;color:#ffb37a;margin-bottom:6px;letter-spacing:0}
.vmeta h3{color:#fff;font-weight:500;margin-bottom:4px}
.vmeta p{color:rgba(255,255,255,.82);font-size:.95rem;max-width:46ch}
.vfile{display:inline-block;margin-top:12px;font-size:.7rem;letter-spacing:.02em;color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.3);border-radius:3px;padding:4px 9px;font-family:ui-monospace,monospace}

/* ============================================================ CARDS */
.card{background:#fff;border:1px solid var(--hair);border-radius:4px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 46px -24px rgba(30,46,58,.32)}
.card .cbody{padding:26px}
.card h3{margin-bottom:10px}
.card p{font-size:.98rem;color:var(--body)}

/* ESG credentials: official artwork in assets/img/creds/ shows automatically;
   until a file exists, the slot falls back to a typographic credit line */
.credrow{display:flex;gap:clamp(22px,3vw,52px);flex-wrap:wrap;align-items:center;justify-content:center;margin-top:26px}
.credslot{width:200px;height:64px;border-radius:6px;background:#c8ced3;display:flex;align-items:center;justify-content:center;padding:0 12px;box-sizing:border-box;transition:transform .3s}
.credslot img{display:block;width:auto;height:auto;max-width:100%;opacity:.95;transition:opacity .3s}
.credslot img[src*='unpri']{max-height:44px}
.credslot img[src*='climate-active']{max-height:37px}
.credslot img[src*='aic']{max-height:25px}
.credslot:hover{transform:translateY(-2px)}.credslot:hover img{opacity:1}
.credslot .cred{display:none}
.credslot.txt{background:none;width:auto;height:auto;padding:0}
.credslot.txt img{display:none}
.credslot.txt .cred{display:block;font-size:.94rem;color:#aeb8be;line-height:1.35}
.credslot.txt .cred b{display:block;font-weight:600;font-size:1.02rem;color:#fff;letter-spacing:-.01em}
@media(max-width:600px){.credslot{width:164px;height:53px}.credslot img[src*='unpri']{max-height:36px}.credslot img[src*='climate-active']{max-height:31px}.credslot img[src*='aic']{max-height:21px}}

/* ------------------------------------------------------------------
   Audience pathways: type-led, no boxes, no borders, no shadows.
   Editorial columns; the heading carries the interaction.
   ------------------------------------------------------------------ */
.pathways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,26px);margin-top:clamp(30px,4vw,56px);align-items:stretch}
.pathitem{display:flex;flex-direction:column;height:100%;color:inherit;background:var(--bg-soft);padding:clamp(26px,2.5vw,40px);border-radius:4px;transition:background .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.pathitem .ptitle{position:relative;display:inline-block;align-self:flex-start;font-size:clamp(1.2rem,1.45vw,1.46rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--ink);transition:color .4s var(--ease)}
.pathitem .ptitle::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.pathitem p{margin-top:18px;color:var(--body);font-size:.98rem;flex:1 1 auto;transition:color .4s var(--ease)}
.pathitem .pgo{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:.9rem;font-weight:600;color:var(--brand-text)}
.pathitem .pgo .arw{display:inline-block;transition:transform .45s var(--ease)}
.pathitem:hover{background:var(--brand-tint);transform:translateY(-4px);box-shadow:0 18px 40px -30px rgba(41,60,75,.55)}
.pathitem:hover .ptitle{color:var(--brand-dk,#b3560f)}
.pathitem:hover .ptitle::after{transform:scaleX(1)}
.pathitem:hover p{color:var(--ink)}
.pathitem:hover .pgo .arw{transform:translateX(9px)}
/* two-up variant */
.pathways.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.pathways,.pathways.two{grid-template-columns:1fr;gap:14px}}

/* image-topped cards: photo pulses on rollover (universal) */
.card{overflow:hidden}
.card>img{transition:transform .7s var(--ease),filter .7s var(--ease);transform:translateZ(0);backface-visibility:hidden}
.card:hover>img{animation:imgPulse 1.6s var(--ease) infinite}
@keyframes imgPulse{0%{transform:scale(1)}50%{transform:scale(1.045)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.card:hover>img{animation:none}}

.pcard{border-radius:4px;overflow:hidden;background:transparent}
.pcard img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--ease)}
.pcard:hover img{transform:scale(1.05)}
.pcard .pinfo{color:#fff}
.pcard .pinfo .role{font-size:.82rem;color:rgba(255,255,255,.82);margin-top:3px;letter-spacing:0}
.pcard .monogram{width:100%;aspect-ratio:4/5;background:var(--teal);color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:2.6rem;font-weight:300;letter-spacing:.04em}
/* team member card = image on top, details below, clickable bio trigger */
.tmember{cursor:pointer;text-align:left}
.tmember .ph{border-radius:4px;overflow:hidden;background:#eef0f0}
.tmember img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.tmember .monogram{width:100%;aspect-ratio:4/5;background:var(--teal);color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:300;letter-spacing:.04em}
.tmember .info{padding-top:13px}
.tmember .name{font-weight:600;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em}
.tmember .role{color:var(--mute);font-size:.88rem;margin-top:2px}
.tmember .biocue{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;color:var(--brand-text);margin-top:8px}
.tmember .biocue.need{color:var(--brand-text);opacity:.85}
.tmember:hover .biocue{color:var(--brand-dk)}
/* bio modal */
.biomodal{position:fixed;inset:0;z-index:1000;display:none}
.biomodal.open{display:block}
.biomodal .bg{position:absolute;inset:0;background:rgba(22,35,46,.62)}
.biomodal .card{position:relative;z-index:2;max-width:640px;width:calc(100% - 40px);margin:7vh auto;background:#fff;border-radius:8px;padding:clamp(24px,4vw,40px);max-height:84vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.biomodal .close{position:absolute;top:12px;right:16px;font-size:1.9rem;line-height:1;color:var(--mute);background:none;border:none;cursor:pointer}
.biomodal .close:hover{color:var(--ink)}
.biomodal .bmhead{display:flex;gap:20px;align-items:center;margin-bottom:20px}
.biomodal .bmphoto{width:92px;height:116px;object-fit:cover;border-radius:4px;flex:none}
.biomodal .bmmono{width:92px;height:116px;background:var(--teal);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:300;border-radius:4px;flex:none}
.biomodal .bmname{font-size:1.35rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.biomodal .bmrole{color:var(--brand-text);font-weight:600;font-size:.9rem;margin-top:3px}
.biomodal .bmbio p{font-size:.98rem;margin-bottom:12px;color:var(--body)}
.biomodal .bmbio .link-arrow{margin-top:6px}
@media print{.biomodal{display:none!important}}
/* investment detail — key metrics strip */
.imetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:6px;overflow:hidden;margin-top:8px}
.imetric{background:#fff;padding:18px 20px}
.imetric .ilabel{font-size:.74rem;letter-spacing:.02em;color:var(--mute);margin-bottom:6px;font-weight:600}
.imetric .ival{font-size:1.12rem;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.imetric .ival a{color:var(--brand-text)}
/* investment hero — focal-point image (robust crop) */
.ihero{position:relative;min-height:clamp(440px,64vh,660px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--teal)}
.ihero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:0}
.ihero .heroshade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,35,46,.32) 0%,rgba(22,35,46,.38) 45%,rgba(22,35,46,.9) 100%)}
/* Stronger scrim where the hero photograph is light or busy, so the white type holds. */
.ihero.dim .heroshade{background:linear-gradient(180deg,rgba(22,35,46,.52) 0%,rgba(22,35,46,.60) 45%,rgba(22,35,46,.94) 100%)}
.ihero .wrap{position:relative;z-index:2;padding-top:calc(var(--nav-h) + 30px);padding-bottom:clamp(34px,5vw,64px)}
.ihero .tagline{color:#ffb37a;font-weight:600;margin-bottom:10px}
.ihero h1{color:#fff}
.ihero .one{color:rgba(255,255,255,.9);font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:300;margin-top:14px;max-width:46ch}
@media(max-width:700px){.imetrics{grid-template-columns:1fr 1fr}}
/* moving logo ticker */
.tickerwrap{padding:clamp(30px,4vw,46px) 0 clamp(40px,5vw,62px);background:rgba(41,60,75,.08);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ticker{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tickerscroll 45s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{padding:0 clamp(20px,2.6vw,44px);white-space:nowrap;color:var(--mute);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:-.01em;transition:color .4s var(--ease)}
.ticker-item:hover{color:var(--teal)}
/* logo inside portfolio current tiles — grey, roll to colour on hover */
@keyframes tickerscroll{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;justify-content:center;flex-wrap:wrap;gap:20px 28px;width:100%}.ticker-item.dup{display:none}}
/* portfolio company logo tiles */
/* portfolio tiles: same treatment as the homepage pathway boxes
   (pale panel, equal heights, tint lift on hover, arrow slides) */
.logogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);align-items:stretch}
.section-soft .logotile{background:#fff}
.section-soft .pathitem{background:#fff}
.logotile{background:var(--bg-soft);border:none;border-radius:4px;padding:clamp(22px,2.2vw,34px);min-height:150px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:5px;transition:background .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
a.logotile:hover{background:var(--brand-tint);transform:translateY(-4px);box-shadow:0 18px 40px -30px rgba(41,60,75,.55)}
.logotile .lname{position:relative;display:inline-block;font-weight:500;color:var(--ink);font-size:1.3rem;letter-spacing:-.015em;line-height:1.15}
a.logotile .lname::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
a.logotile:hover .lname{color:var(--brand-dk,#b3560f)}
a.logotile:hover .lname::after{transform:scaleX(1)}
.logotile .lmeta{font-size:.85rem;color:var(--mute);margin-top:4px}
.logotile span{transition:transform .45s var(--ease)}
a.logotile:hover span{transform:translateX(6px)}
@media(max-width:760px){.logogrid{grid-template-columns:repeat(2,1fr)}}

.steps{display:grid;gap:0}
/* ===== Approach: process step boxes with rollover ===== */
.stepcards{display:grid;gap:12px}
.scard{position:relative;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;background:#fff;border:1px solid var(--hair);border-radius:8px;padding:26px 30px;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
/* pulse lives on an overlay layer (opacity only) so it never fights the hover transition */
.scard::after{content:"";position:absolute;inset:-1px;border-radius:9px;pointer-events:none;box-shadow:0 0 0 2px var(--brand),0 16px 32px -22px rgba(41,60,75,.5);opacity:0;animation:scardPulse 5s ease-in-out infinite}
.scard:nth-child(1)::after{animation-delay:0s}
.scard:nth-child(2)::after{animation-delay:.35s}
.scard:nth-child(3)::after{animation-delay:.7s}
.scard:nth-child(4)::after{animation-delay:1.05s}
.scard:nth-child(5)::after{animation-delay:1.4s}
.scard:hover{border-color:var(--brand-text);transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(41,60,75,.45)}
@keyframes scardPulse{0%{opacity:0}6%{opacity:.9}16%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.scard::after{animation:none}}
.scard-n{font-size:clamp(2.4rem,3.6vw,3.4rem);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--brand-text);font-variant-numeric:tabular-nums;min-width:84px}
.scard h3{font-size:clamp(1.25rem,1.5vw,1.55rem);line-height:1.2}
.scard p{color:var(--mute);font-size:.95rem;margin:0}
/* ===== Approach: animated journey path ===== */
.jsplit{position:relative;align-items:start}
.jlead{display:flex;flex-direction:column;align-items:flex-start}
.jlead-node{align-self:flex-end;width:14px;height:14px;border-radius:50%;background:var(--brand);margin-top:34px;box-shadow:0 0 0 5px var(--brand-tint)}
.jconnector{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
.jconnector path{fill:none;stroke:var(--brand);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
.jconnector.drawn path{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease) .15s}
.steps.journey{position:relative;counter-reset:step}
.steps.journey::before{content:"";position:absolute;left:19px;top:44px;bottom:44px;width:2px;background:var(--hair);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease) .25s}
.steps.journey.in::before{transform:scaleY(1)}
.steps.journey .step{position:relative;border:none;padding:18px 0 18px 56px;align-items:start}
.steps.journey .step:last-child{border:none}
.steps.journey .step .snum{position:absolute;left:0;top:16px;width:40px;height:40px;border-radius:50%;border:2px solid var(--hair);background:#fff;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:600;color:var(--mute);letter-spacing:0;z-index:1;transition:border-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.steps.journey .step .snum::before{content:"0" counter(step)}
.steps.journey .sbody{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.steps.journey.in .step .snum{border-color:var(--brand-text);color:var(--brand-text);box-shadow:0 0 0 5px var(--brand-tint)}
.steps.journey.in .sbody{opacity:1;transform:none}
.steps.journey.in .step:nth-child(1) .snum,.steps.journey.in .step:nth-child(1) .sbody{transition-delay:.35s}
.steps.journey.in .step:nth-child(2) .snum,.steps.journey.in .step:nth-child(2) .sbody{transition-delay:.5s}
.steps.journey.in .step:nth-child(3) .snum,.steps.journey.in .step:nth-child(3) .sbody{transition-delay:.65s}
.steps.journey.in .step:nth-child(4) .snum,.steps.journey.in .step:nth-child(4) .sbody{transition-delay:.8s}
.steps.journey.in .step:nth-child(5) .snum,.steps.journey.in .step:nth-child(5) .sbody{transition-delay:.95s}
@media (max-width:820px){.jconnector{display:none}.jlead-node{display:none}}
@media (prefers-reduced-motion:reduce){.steps.journey .sbody{opacity:1;transform:none}.steps.journey::before{transform:scaleY(1)}}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);padding:34px 0;border-top:1px solid var(--hair);align-items:start}
.step:last-child{border-bottom:1px solid var(--hair)}
.step .snum{font-size:clamp(2rem,3vw,2.8rem);font-weight:300;color:var(--brand-text);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.step .snum::before{content:"0" counter(step)}
.steps{counter-reset:step}
.step .snum{counter-increment:step}
.step h3{margin-bottom:8px}

/* Numerical counters, site-wide rules:
   1. ONE colour per figure. Units and symbols inherit the figure colour, never a second colour.
   2. The whole figure is centred over its label. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,50px)}
.stat{text-align:center}
.stat .num{font-size:clamp(2.4rem,5vw,4rem);font-weight:300;color:var(--ink);letter-spacing:-.03em;line-height:1}
.stat .num .u{color:inherit}
/* dark sections: the whole figure is brand orange (still one colour, unit inherits) */
.section-dark .stat .num,.cta-band .stat .num{color:var(--brand-text)}
.stat .lbl{margin-top:12px;font-size:.9rem;color:var(--mute);max-width:26ch;margin-left:auto;margin-right:auto;letter-spacing:-.006em;line-height:1.45;text-wrap:balance}
.stat .lbl .l1,.stat .lbl .l2{display:block;white-space:nowrap}
/* scale chart (Approach): a real axis with ticks; the highlighted band sits at
   its true position and carries its own value labels. Band draws on scroll. */
.ranges{max-width:820px}
.scalechart{display:grid;gap:56px}
.srow .stitle{font-size:1.18rem;font-weight:500;color:var(--ink);margin-bottom:38px}
.strack{position:relative;height:12px;border-radius:6px;background:var(--hair-2)}
.sband{position:absolute;top:0;bottom:0;left:var(--x0);width:0;background:var(--brand);border-radius:6px;transition:width 1.2s var(--ease) .25s}
[data-reveal].in .sband{width:calc(var(--x1) - var(--x0))}
.sband em{position:absolute;top:-38px;font-style:normal;font-size:clamp(1.2rem,1.6vw,1.55rem);font-weight:300;letter-spacing:-.02em;color:var(--brand-dk,#b3560f);white-space:nowrap;opacity:0;transition:opacity .5s var(--ease) 1s}
[data-reveal].in .sband em{opacity:1}
.sband .sv0{left:0;transform:translateX(-50%)}
.sband .sv1{right:0;transform:translateX(50%)}
.stick{position:absolute;top:100%;height:8px;width:1px;background:#c9d0d8}
.stick b{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-weight:300;font-size:.95rem;color:var(--mute);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sband{transition:none;width:calc(var(--x1) - var(--x0))}.sband em{transition:none;opacity:1}}

/* universal counter motion: figure settles from a slight rise + blur as it counts */
.stat .num.counting{animation:statSettle 1.6s var(--ease) both}
@keyframes statSettle{0%{opacity:0;transform:translateY(14px);filter:blur(6px)}45%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.stat .num.counting{animation:none}}

.pillar{padding:32px 0;border-top:2px solid var(--ink)}
.pillar h3{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pillar h3 .k{font-size:clamp(2.4rem,3.6vw,3.4rem);color:var(--brand-text);font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.knum{display:block;font-size:clamp(2.4rem,3.6vw,3.4rem);color:var(--brand-text);font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}

.callout{background:var(--brand-tint);border-radius:4px;padding:clamp(26px,4vw,52px)}
.quote{font-weight:300;font-size:clamp(1.4rem,2.8vw,2.3rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.quote .accent{color:var(--brand-text)}
.quote-by{margin-top:22px;font-size:.92rem;color:var(--mute)}
.quote-by b{color:var(--ink);font-weight:600}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split .media{border-radius:4px;overflow:hidden}
.split .media img{width:100%;aspect-ratio:4/3;object-fit:cover}

.pathway{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:pw;margin-top:40px}
.pathway .pw{position:relative;padding:22px 18px 22px 0;border-top:2px solid var(--hair)}
.pathway .pw .pk{counter-increment:pw;font-size:.85rem;font-weight:700;color:var(--brand-text)}
.pathway .pw .pk::before{content:"0" counter(pw) "  "}
.pathway .pw h4{font-size:1rem;font-weight:500;color:var(--ink);margin-top:6px}
.pathway .pw p{font-size:.88rem;color:var(--mute)}
.pathway .pw.on{border-top-color:var(--brand-text)}

.logostrip{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center}
.logostrip span{font-size:clamp(1.1rem,2vw,1.6rem);font-weight:300;color:var(--mute);letter-spacing:.01em}

.cta-band{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden}
.cta-band h2{color:#fff;max-width:22ch}
.cta-band .lead{color:rgba(255,255,255,.85)}
.cta-band .wrap{position:relative;z-index:2}
.cta-fort{position:absolute;right:-3%;bottom:-16%;font-size:26vw;font-weight:300;color:rgba(255,255,255,.035);letter-spacing:-.04em;z-index:0;pointer-events:none;white-space:nowrap}

.form{display:grid;gap:20px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:.9rem;color:var(--body);font-weight:500;letter-spacing:0}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);border:none;border-bottom:1.5px solid var(--hair);background:transparent;padding:11px 2px;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-text)}
.field textarea{resize:vertical;min-height:110px}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:#9aa5ac;padding-top:clamp(56px,7vw,90px)}
.footer a:hover{color:#fff}
.footer .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer .flogo{margin-bottom:18px}
.footer .flogo img{height:30px;width:auto}
.footer h5{color:#fff;font-size:.95rem;letter-spacing:0;margin-bottom:18px;font-weight:600}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:.92rem}
.footer .fbot{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:.85rem;color:#79848b;flex-wrap:wrap;gap:12px}
.footer .fdisc{max-width:64ch;font-size:.8rem;color:#79848b;padding:22px 0 0;line-height:1.6}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.08s}
[data-reveal].d2{transition-delay:.16s}
[data-reveal].d3{transition-delay:.24s}
[data-reveal].d4{transition-delay:.32s}

.growth path.line{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s var(--ease)}
.growth.in path.line{stroke-dashoffset:0}
.growth .dot{opacity:0;transition:opacity .5s ease}
.growth.in .dot{opacity:1;transition-delay:2s}

.protobadge{position:fixed;left:14px;bottom:14px;z-index:800;background:rgba(22,35,46,.9);color:#fff;font-size:.72rem;letter-spacing:0;padding:7px 12px;border-radius:3px;border:1px solid rgba(255,255,255,.14)}
.protobadge b{color:var(--brand-text)}

/* ---------- content-gap highlighter ---------- */

/* ---------- responsive ---------- */
@media(max-width:940px){
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer .ftop{grid-template-columns:1fr 1fr}
  .pathway{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .g2,.split,.split.rev,.form{grid-template-columns:1fr}
  .g4,.g3,.stats,.pathway{grid-template-columns:1fr 1fr}
  .split.rev .media{order:-1}
}
@media(max-width:480px){
  .g4,.g3,.pathway{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
}

/* --- Nav CTA: solid orange button, near-square corners, white text, rollover --- */
.nav .nav-links a.nav-cta{background:var(--brand);color:var(--on-brand);font-weight:600;padding:12px clamp(14px,1.5vw,22px);border-radius:2px;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.nav .nav-links a.nav-cta::after{display:none}
.nav .nav-links a.nav-cta:hover{background:var(--on-brand);color:var(--brand);transform:translateY(-1px)}
.nav.solid .nav-links a.nav-cta,.nav.light .nav-links a.nav-cta{color:var(--on-brand)}
.nav.solid .nav-links a.nav-cta:hover,.nav.light .nav-links a.nav-cta:hover{color:var(--brand)}

/* ------------------------------------------------------------------
   Nav collapse: ONE breakpoint, set at the width where the inline row
   actually runs out of room (logo + 6 links + Portal + CTA at their
   smallest fluid sizes). Above this the nav flexes; below it collapses
   to the hamburger drawer.
   ------------------------------------------------------------------ */
@media(max-width:1280px){
  /* the closed mobile menu sits off the right edge; clip it so it cannot
     add a sideways scroll to the page. No sticky elements on this site. */
  html,body{overflow-x:hidden}
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:min(82vw,340px);background:#fff;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:24px;padding:96px 40px 48px;transform:translateX(100%);transition:transform .5s var(--ease);box-shadow:-20px 0 60px -30px rgba(30,46,58,.4);z-index:950;overflow-y:auto}
  .nav-links.open{transform:none}
  .nav-links a{color:var(--ink) !important;font-size:1.05rem}
  .nav-toggle{display:flex;z-index:960}
  .nav-toggle.open span{background:var(--ink)}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav .nav-links a.nav-cta{display:inline-block;color:var(--on-brand) !important;padding:12px 22px}
  .nav .nav-links a.nav-portal{display:inline-block;border-color:rgba(18,49,79,.4) !important;color:var(--ink) !important;padding:8px 16px}
  .nitem{display:block;width:100%}
  .nitem>a .cv{display:none}
  .nitem .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;padding:8px 0 0 16px;gap:2px}
  .nitem .sub a{padding:5px 0;font-size:.92rem !important;color:var(--body) !important}
}

/* partner films: strict two columns, 2x2 */
.pfilms{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:700px){.pfilms{grid-template-columns:1fr}}

/* film header: full-bleed video still, tall band, single left scrim.
   Stills are 16:9 interview frames, top-anchored so heads are never cropped;
   per-page object-position set inline on the img. */
.phero.has-img{position:relative;background:var(--navy-deep);border-bottom:none;overflow:hidden;display:flex;align-items:center;min-height:clamp(480px,58vh,680px)}
.phero.has-img .pheroimg{position:absolute;top:0;left:0;height:100%;width:100%;max-width:none;object-fit:cover;object-position:center top;z-index:1}
.phero.has-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,
    rgba(30,44,56,.94) 0%, rgba(30,44,56,.86) 28%,
    rgba(30,44,56,.6) 46%, rgba(30,44,56,.18) 62%,
    rgba(30,44,56,0) 74%)}
.phero.has-img .wrap{position:relative;z-index:3;width:100%}
.phero.has-img .display{color:#fff;max-width:15ch}
.phero.has-img .lead{color:rgba(255,255,255,.9);max-width:42ch}
.phero.has-img .crumb{color:rgba(255,255,255,.72)}
.phero.has-img .crumb a{color:rgba(255,255,255,.72)}
.phero.has-img .crumb b{color:#fff}
/* header play button */
.hplay{display:inline-flex;align-items:center;gap:16px;margin-top:30px;background:transparent;border:0;padding:0;cursor:pointer;color:#fff;font:inherit}
.hplay .pc{width:58px;height:58px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex:0 0 auto;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.hplay .pc svg{margin-left:3px}
.hplay:hover .pc{transform:scale(1.12);box-shadow:0 12px 34px rgba(0,0,0,.45)}
.hplay .pl{text-align:left;font-weight:600;font-size:1.02rem;line-height:1.3}
.hplay .ps{display:block;font-weight:400;font-size:.82rem;color:rgba(255,255,255,.68);margin-top:2px}
/* video lightbox */
.vlb{position:fixed;inset:0;z-index:1300;display:grid;place-items:center}
.vlb-bg{position:absolute;inset:0;background:rgba(30,44,56,.86);backdrop-filter:blur(8px)}
.vlb-box{position:relative;width:min(1100px,92vw);z-index:1;animation:vlbIn .35s cubic-bezier(.2,.7,.3,1) both}
.vlb-box video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vlb-x{position:absolute;top:-46px;right:0;background:transparent;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:6px}
.vlb-x:hover{color:var(--brand-text)}
@keyframes vlbIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:1100px){
  .phero.has-img{display:flex;flex-direction:column;justify-content:flex-end;min-height:0;padding-bottom:0}
  .phero.has-img::after{display:none}
  .phero.has-img .pheroimg{position:static;order:2;width:100%!important;height:auto;margin-top:34px;object-fit:unset;object-position:unset!important}
  .phero.has-img .wrap{order:1}
  .phero.has-img .display,.phero.has-img .lead{max-width:none}
}


/* portfolio tiles: logo slot, investment date, realised narrative.
   .logoslot holds the position and footprint of the supplied logo. Until the
   vector files arrive it sets the company name as a neutral wordmark, so the
   tile is complete rather than showing a broken image or a favicon. */
.logotile .logoslot{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:34px;padding:0 10px;margin-bottom:16px;border-radius:3px;background:rgba(236,134,68,.10);color:var(--brand-text);font-size:.86rem;font-weight:700;letter-spacing:.02em;transition:background .4s var(--ease),color .4s var(--ease)}
a.logotile:hover .logoslot{background:var(--brand);color:var(--on-brand)}
.logotile .ldate{font-size:.78rem;color:var(--mute);margin-top:9px;font-variant-numeric:tabular-nums}
.logotile .lgo{color:var(--brand-text);font-size:.8rem;margin-top:12px}
.logotile.ltall{min-height:250px}
.logotile .lstory{font-size:.88rem;color:var(--body);margin-top:12px;line-height:1.5}
a.ticker-item{text-decoration:none}
a.ticker-item:hover .tw{color:var(--brand-text)}
@media(max-width:1100px){.logogrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.logogrid{grid-template-columns:1fr}}

/* Keyboard focus. The browser default was a 1px auto outline, effectively invisible
   on the navy header. This is a deliberate ring that works on light and dark. */
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:2px}
.nav :focus-visible,.section-dark :focus-visible,.cta-band :focus-visible,.footer :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(236,134,68,.55)}
:focus:not(:focus-visible){outline:none}

/* Skip link, so a keyboard user is not forced through the whole navigation. */
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:#fff;color:var(--ink);padding:12px 18px;border-radius:0 0 4px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* Navigation links were 16px tall as pointer targets. */
.nav-links > a,.nitem > a{padding-top:8px;padding-bottom:8px}
.nitem .sub a{padding-top:11px;padding-bottom:11px}

/* Footer muted grey was 2.98:1 on navy. This is 5.65:1. */
.footer .fbot,.footer .fbot span{color:#AEB8BE}

.footer .fh{color:#fff;font-size:.95rem;letter-spacing:0;margin-bottom:18px;font-weight:600}



/* Company logos, from Fortitude's own portfolio deck. Real assets, hosted locally.
   The monogram beneath is a safety net only: it is hidden whenever a logo is
   present, and returns if an image ever fails to load. */
.logotile .ltlogo{align-self:flex-start;display:block;box-sizing:border-box;width:auto;max-width:190px;height:46px;object-fit:contain;object-position:left bottom;margin-bottom:18px;filter:none;opacity:1;transition:filter .45s var(--ease),opacity .45s var(--ease)}
a.logotile:hover .ltlogo{filter:none;opacity:1}
.logotile.ltall .ltlogo{height:46px}
.logotile .ltlogo + .logoslot{display:none}
.ticker-item .tlogo{width:clamp(26px,2.6vw,32px);height:clamp(26px,2.6vw,32px);object-fit:contain;flex:none;filter:none;opacity:.9;transition:filter .4s var(--ease),opacity .4s var(--ease)}
.ticker-item:hover .tlogo{opacity:1}
.ticker-item .tw{font-weight:600;white-space:nowrap}
.ticker-item{display:inline-flex;align-items:center;gap:11px}
@media(max-width:640px){.logotile .ltlogo{height:40px;max-width:165px}
  .logotile .ltlogo.wm{padding-top:23px}
  .logotile .ltlogo.wm-gm{padding-top:17px}
  .logotile .ltlogo.wm-nomad{padding-top:23px}}


/* Realised investment pages (13 Aug 2026). Fortitude asked for a case study per company;
   these are the pages behind the nine realised tiles. */
.backlink{font-size:.86rem;color:var(--mute);text-decoration:none;letter-spacing:.01em}
.backlink:hover{color:var(--brand)}
ul.tick{list-style:none;padding:0;margin:0}
ul.tick li{position:relative;padding-left:26px;margin-bottom:15px;line-height:1.62;color:var(--body)}
ul.tick li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--brand);opacity:.85}
.section-dark ul.tick li{color:#d6dde2}
.returnsnote{margin-top:30px;max-width:70ch;font-size:.84rem;line-height:1.6;color:#9aa5ac;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
/* a realised tile is now a link, so it needs the same affordance as a current one */
a.logotile.ltall{text-decoration:none}
a.logotile.ltall .lgo{color:var(--brand);font-size:.8rem;margin-top:14px;display:block}

/* Full logo on the company's own page. The grid carries the square symbol; here there is
   room for the whole lockup, so it runs at proper size above the facts. Sits in its own
   light band so a dark logo is never asked to hold up against the hero. */
.pagelogo{margin:0 0 26px}
.pagelogo img{width:auto;max-width:250px;height:52px;object-fit:contain;object-position:left center;display:block}
@media(max-width:640px){.pagelogo img{height:42px;max-width:200px}}

/* Compact wordmarks. GM Hotels, Hospital Pharmacy Services and Nomad Breads have no symbol
   in their artwork, so the tile carries a small wordmark taken from the real logo rather
   than initials set in a substitute typeface. Wider box, lower height, same visual weight. */
/* Wordmark ink heights, set by padding inside the fixed 46px slot so the slot itself
   never changes and the company name below always lands on the same line.
   HPS 19px, GM 26px, Nomad Breads 19px. */
.logotile .ltlogo.wm{padding-top:27px}          /* HPS, 46 - 19 */
.logotile .ltlogo.wm-gm{padding-top:20px}       /* GM,  46 - 26 */
.logotile .ltlogo.wm-nomad{padding-top:27px}    /* Nomad, 46 - 19 */
.ticker-item .tlogo.wm{width:auto;max-width:120px;height:clamp(13px,1.3vw,16px)}
.ticker-item .tlogo.full{width:auto;max-width:200px;height:clamp(24px,2.2vw,34px);opacity:1}
.ticker-item.fulllogo .tw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ticker-item .tlogo.wm-gm{height:clamp(15px,1.5vw,19px)}
.ticker-item .tlogo.wm-nomad{height:clamp(11px,1.1vw,14px)}


/* Company image slot on the portfolio company pages. The image fills the slot when it
   exists; when it does not, .empty is added by the onerror handler and the slot shows its
   own label instead of a broken image or a hole. */
.media.cslot{position:relative;padding:0}
.media.cslot .cimg{width:100%;height:100%;object-fit:cover;display:block}
/* CO 27 Aug 2026, Bryan Brown: placeholder caption removed so the site can launch
   before every company image has arrived. An empty slot now shows the soft panel only. */
.media.cslot.empty::after{content:"";position:absolute;inset:0}


/* Video tiles.
   A promise, what the viewer takes away, and the running time, over a soft foot scrim.
   The button is a ring that fills on approach rather than a flat disc. */
.videoblock .vshade{background:linear-gradient(180deg,rgba(22,35,46,.06) 0%,rgba(22,35,46,.12) 42%,
  rgba(18,30,39,.58) 74%,rgba(15,26,34,.86) 100%)}
.videoblock .vplay{position:absolute;left:0;right:0;top:auto;bottom:0;z-index:3;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:15px;padding:clamp(17px,2.1vw,26px);pointer-events:none;text-align:left}
.videoblock .pbtn{flex:0 0 auto;width:50px;height:50px;min-width:50px;min-height:50px;margin:0;border-radius:50%;background:transparent;border:1.5px solid rgba(255,255,255,.85);backdrop-filter:none;display:flex;align-items:center;justify-content:center;position:relative;transition:background .42s var(--ease),border-color .42s var(--ease),transform .42s var(--ease)}
.videoblock .pbtn svg{margin-left:2px;position:relative;z-index:2;transition:transform .42s var(--ease)}
.videoblock .vtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.videoblock .vtitle{color:#fff;font-weight:600;font-size:clamp(.95rem,1.28vw,1.2rem);letter-spacing:-.012em;line-height:1.25;text-shadow:0 1px 14px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.videoblock .vsub{color:rgba(255,255,255,.78);font-size:clamp(.78rem,.92vw,.875rem);font-weight:300;line-height:1.4;text-shadow:0 1px 10px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.videoblock .vdur{display:block;margin-top:2px;color:rgba(255,255,255,.62);font-size:clamp(.72rem,.82vw,.79rem);font-weight:500;letter-spacing:.02em;white-space:nowrap}
.videoblock:hover .pbtn,.videoblock:focus-visible .pbtn{background:#EC8644;border-color:#EC8644;transform:scale(1.06)}
.videoblock:hover .pbtn svg,.videoblock:focus-visible .pbtn svg{transform:scale(1.08)}
.videoblock:hover .vposter{transform:scale(1.04)}
.videoblock .vposter{transition:transform 1.1s var(--ease)}
@media(max-width:560px){
  .videoblock .pbtn{width:42px;height:42px;min-width:42px;min-height:42px}
  .videoblock .vsub{display:none}}
@media(prefers-reduced-motion:reduce){
  .videoblock .pbtn,.videoblock .pbtn svg,.videoblock .vposter{transition:none}
  .videoblock:hover .pbtn,.videoblock:hover .pbtn svg,.videoblock:hover .vposter{transform:none}}

/* Homepage portfolio cards that lead to a film.
   The cue sits over the picture and only fully resolves on approach. */
.pcard{position:relative}
.pcard .pcue{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;padding:44px 18px 18px;pointer-events:none;background:linear-gradient(180deg,rgba(18,30,39,0) 0%,rgba(18,30,39,.38) 30%,
    rgba(18,30,39,.8) 66%,rgba(15,26,34,.94) 100%)}
.pcard .pcbtn{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:transparent;border:1.4px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.pcard .pcbtn svg{margin-left:2px}
.pcard .pctxt{display:flex;flex-direction:column;gap:3px;min-width:0;color:#fff}
.pcard .pcwho{display:block;font-size:.9rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:#fff}
.pcard .pctopic{display:block;font-size:.9rem;font-weight:300;letter-spacing:-.01em;line-height:1.3;color:rgba(255,255,255,.9)}
.pcard .pcsub{display:block;margin-top:4px;font-size:.74rem;font-weight:500;color:rgba(255,255,255,.62);line-height:1.3;letter-spacing:.02em;white-space:nowrap}
.pcard:hover .pcbtn,.pcard:focus-visible .pcbtn{background:#EC8644;border-color:#EC8644;transform:scale(1.08)}
.pcard .pinfo{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:20px 18px 74px;background:linear-gradient(180deg,rgba(18,30,39,0) 0%,rgba(18,30,39,.34) 34%,
    rgba(18,30,39,.78) 68%,rgba(15,26,34,.93) 100%)}
.pcard .pinfo .name{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
@media(prefers-reduced-motion:reduce){
  .pcard .pcbtn{transition:none}.pcard:hover .pcbtn{transform:none}}

/* Slow zoom on header images.
   One pass, ease-out, then it holds. The origin is set inline per page to match that
   page's object-position, so the focal point stays put and only the frame grows. */
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.07)}}
.ihero .heroimg,
.phero.has-img .pheroimg{animation:heroDrift 22s cubic-bezier(.16,.62,.32,1) both;will-change:transform;backface-visibility:hidden}
.phero.has-img .pheroimg{transform-origin:center top}
.ihero .heroimg{transform-origin:center 25%}
@media(prefers-reduced-motion:reduce){
  .ihero .heroimg,.phero.has-img .pheroimg{animation:none}}

/* Statistics rise and fade in, one after another. No counting. */
.stats .stat{opacity:0;transform:translateY(14px);transition:opacity .85s cubic-bezier(.16,.62,.32,1),transform .85s cubic-bezier(.16,.62,.32,1)}
.stats .stat.shown{opacity:1;transform:none}
.stats .stat .num{filter:blur(6px);transition:filter .85s cubic-bezier(.16,.62,.32,1)}
.stats .stat.shown .num{filter:blur(0)}
@media(prefers-reduced-motion:reduce){
  .stats .stat{opacity:1;transform:none;transition:none}
  .stats .stat .num{filter:none;transition:none}}

/* Narrow 3-up video tiles: the play button sits on its own row so the title and
   the subline each get the full tile width and stay on one line. */
.grid.g3 .videoblock .vplay{flex-direction:column;align-items:flex-start;gap:10px}
.grid.g3 .videoblock .pbtn{width:44px;height:44px;min-width:44px;min-height:44px}
.grid.g3 .videoblock .vtxt{width:100%}
.grid.g3 .videoblock .vtitle{font-size:clamp(.88rem,1.10vw,1.05rem)}
.grid.g3 .videoblock .vsub{font-size:clamp(.74rem,.86vw,.83rem)}


/* Warm-grey panels: the audience boxes and the investor value cards read as one
   family. No numerals, and both lift on hover. */
.pathitem.static{background:#F1EEE8;cursor:default}
.pathitem.static:hover{background:#EAE6DE;transform:translateY(-4px);box-shadow:0 18px 40px -30px rgba(41,60,75,.55)}
.section-soft .pathitem.static{background:#F1EEE8}
.section-soft .pathitem.static:hover{background:#EAE6DE}
.pathitem.static:hover .ptitle{color:var(--ink)}
.pathitem.static:hover .ptitle::after{transform:scaleX(1)}
.card.warm{background:#F1EEE8;border-color:#E4DFD6}
.card.warm:hover{background:#EAE6DE}


/* CO:HEADING-LEVELS  21 Aug 2026
   Heading LEVELS corrected for search and accessibility; appearance unchanged.
   h2.h3-scale renders at the h3 scale. Team names became h3 and are pinned
   back to the body line-height so the cards do not move. */
h2.h3-scale{font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:-.02em}
.tmember h3.name{line-height:1.6}
/* The promoted headings sit inside .card (contact) and .step (founder-journey),
   which previously styled them via 'h3'. Restore those two margins. */
.card h2.h3-scale{margin-bottom:10px}
.step h2.h3-scale{margin-bottom:8px}
/* CO:HERO-REDUCED-MOTION  hold the first frame still for visitors who ask for less motion */
@media (prefers-reduced-motion:reduce){.hslide{animation:none}.hslide:first-child{opacity:1;transform:none}}
/* CO:VISUALLY-HIDDEN  21 Aug 2026
   Standard accessible text-alternative. Used once, in the hero H1, so the word the
   logotype draws also exists as real text. font-size and line-height are restored
   because .hero-fort sets both to 0 for the SVG. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;font-size:1rem;line-height:1.2}
/* CO:ICON-SQ  square icon link, used for LinkedIn on the partner pages */
.icon-sq{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #DCD7CE;border-radius:3px;color:var(--ink);background:#fff;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.icon-sq svg{width:20px;height:20px;fill:currentColor;display:block}
.icon-sq:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand);transform:translateY(-2px)}
.icon-sq:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* CO:BIO-DROPDOWN  21 Aug 2026
   Biographies moved out of the pop-up and into a disclosure, so the text is really
   on the page and can be read by search engines, screen readers and the keyboard. */
.tmember.has-drop{cursor:default}
.biodrop{margin-top:8px}
.biodrop summary{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;
  color:var(--brand-text);cursor:pointer;list-style:none;user-select:none}
.biodrop summary::-webkit-details-marker{display:none}
.biodrop summary::after{content:"\2193";font-weight:400;transition:transform .25s var(--ease);display:inline-block}
.biodrop[open] summary::after{transform:rotate(180deg)}
.biodrop summary:hover{color:var(--brand-dk)}
.biodrop summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.biobody{padding-top:10px}
.biobody p{font-size:.92rem;line-height:1.55;color:var(--body);margin:0 0 9px;max-width:none}
.biobody p:last-of-type{margin-bottom:10px}
.icon-sq.sm{width:34px;height:34px}
.icon-sq.sm svg{width:15px;height:15px}

/* CO:CASE-METRICS - headline figures on a realised investment page */
.casestudy .stats{grid-template-columns:repeat(3,1fr)}
.casestudy .stat .num{font-size:clamp(2.1rem,4.2vw,3.2rem)}
@media(max-width:720px){.casestudy .stats{grid-template-columns:1fr;gap:26px}}

/* CO:HONEYPOT - spam trap, never shown to a person */
.hpot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* CO:PHERO-TAGLINE - the eyebrow on a plain dark page hero */
.phero .tagline{color:var(--brand)}

/* CO:NOTFOUND - the page a visitor lands on when an address no longer exists */
.phero.notfound{padding-top:calc(var(--nav-h) + clamp(40px,7vw,90px));padding-bottom:clamp(40px,7vw,90px)}
.nf-wrap{display:flex;align-items:center;gap:clamp(30px,6vw,80px);justify-content:space-between}
.nf-copy{flex:1 1 auto}
.nf-copy .display{max-width:14ch;margin:0}
.nf-mark{flex:0 0 auto;width:clamp(64px,8vw,104px);opacity:.9}
.nf-mark .fmark{width:100%;height:auto}
@media(max-width:760px){.nf-wrap{flex-direction:column;align-items:flex-start;gap:30px}.nf-mark{width:64px}}

/* CO:MOBILE-TOUCH - phone sizes only. Bigger tap areas and no text under 12px. */
@media(max-width:940px){
  .nav-toggle{min-width:44px;min-height:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
  .icon-sq{min-width:44px;min-height:44px}
  .imetric .ilabel{font-size:.79rem}
  .videoblock .vdur{font-size:.79rem}
  .pcard .pcsub{font-size:.79rem}
  .nav-logo,.flogo{padding-top:6px;padding-bottom:6px}
}

/* CO:TOUCH-ANY-WIDTH - any touch screen, including a tablet held sideways,
   which is wide enough to get the desktop layout but still finger-operated. */
@media (hover:none) and (pointer:coarse){
  .nav-toggle{min-width:44px;min-height:44px}
  .icon-sq{min-width:44px;min-height:44px}
  .btn{min-height:44px}
  .imetric .ilabel{font-size:.79rem}
  .videoblock .vdur{font-size:.79rem}
  .pcard .pcsub{font-size:.79rem}
  .logotile .lmeta,.logotile .ldate{font-size:.82rem}
  input,select,textarea{min-height:44px;font-size:16px}
}

/* CO:WHOLESALE - the wholesale-only notice above the fund sections.
   Bryan Brown, 20 Aug 2026: the restriction covers the fund information,
   not the whole website. Pending confirmation from their counsel. */
.wholesale{border:1px solid var(--hair);background:var(--bg-soft);padding:24px 26px;max-width:78ch}
.wholesale .wh-h{font-size:.95rem;font-weight:600;color:var(--ink);margin:0 0 10px;letter-spacing:.01em}
.wholesale p{font-size:.93rem;color:var(--body);margin:0 0 10px;line-height:1.6}
.wholesale p:last-child{margin-bottom:0}
.wholesale .wh-f{color:var(--mute)}

/* Films not yet delivered. wire_films.py puts data-pending on the block; the still
   stays as a placeholder and the play control comes off, so nothing is a dead button.
   Drop the film into video/, re-run the script, and this all reverses. */
.videoblock[data-pending]{cursor:default}
.videoblock[data-pending] .vplay .pbtn{display:none}
.videoblock[data-pending] .vplay .vdur{display:none}
.videoblock[data-pending] .vplay{opacity:.82}


/* Ken Burns on the page hero image, matching the homepage drift without the crossfade.
   transform-origin sits high so the zoom grows downward and never crops a head. */
@keyframes pheroKen{ from{transform:scale(1)} to{transform:scale(1.08)} }
.phero.has-img .pheroimg{ transform-origin:center 22%; will-change:transform;
  animation:pheroKen 28s ease-in-out infinite alternate }
@media (prefers-reduced-motion:reduce){ .phero.has-img .pheroimg{animation:none} }

/* ---- About hero: rotating team portraits (28 Aug 2026) ----------------
   Scoped to #teamhero so every other .phero.has-img page is untouched.
   The dark wash is dropped: flat cream ground, navy type, portrait on the right.
   Every frame runs the same push, applied at one moment and never restarted,
   so all frames stay in step and a crossfade is opacity only. The origin sits
   on the face, which keeps the head still while the frame grows. */

#teamhero{background:#ECE9E2}
#teamhero::after{display:none}
#teamhero .display,#teamhero h1{color:var(--ink)}
#teamhero .lead{color:var(--ink);opacity:.82}
#teamhero .crumb,#teamhero .crumb a{color:rgba(41,60,75,.7)}
#teamhero .crumb b{color:var(--ink)}

@keyframes pheroPortraitKen{ from{transform:scale(1)} to{transform:scale(1.13)} }
#teamhero .pheroimg{
  opacity:0;transition:opacity 650ms ease;animation:none;
  transform-origin:72% 40%;will-change:transform}
#teamhero .pheroimg.is-on{opacity:1}
#teamhero .pheroimg.ken{
  animation:pheroPortraitKen 16s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  #teamhero .pheroimg.ken{animation:none}
  #teamhero .pheroimg{transition:none}
}
@media(max-width:1100px){
  #teamhero .pheroimg.rot{display:none}
  #teamhero .pheroimg{opacity:1}
}

/* ---- Widow control (28 Aug 2026) --------------------------------------
   Stops a paragraph ending on a single orphaned word. text-wrap:pretty is
   ignored by browsers that do not support it, so the fix degrades quietly. */
p,.lead,.biobody p,.cbody p{text-wrap:pretty}
h1,h2,h3,.display{text-wrap:balance}

/* CO 16 Sep 2026: phone-width test pass (Bryan Brown, 14 Sep: "Mobile friendly - have we considered this?") */
.imetrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.imetric{min-width:0}
.imetric .ival{overflow-wrap:anywhere}
@media(max-width:700px){.imetrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.imetrics{grid-template-columns:minmax(0,1fr)}}
.stick[style*="left:100%"] b{left:auto;right:0;transform:none}
.stick[style*="left:0"] b{left:0;transform:none}
@media(max-width:560px){
  .footer .ftop{grid-template-columns:minmax(0,1fr);gap:34px}
  .footer .ftop>div{min-width:0}
  .footer ul li,.footer .fdisc,.footer .fbot{overflow-wrap:anywhere}
}
.nb{white-space:nowrap}

/* CO 18 Sep 2026: founder question pages */
.qanswer .qa{color:var(--ink);max-width:none}
.qanswer .qa+.qa{margin-top:22px}
.qmore{list-style:none;padding:0;margin:14px 0 0}
.qmore li{border-top:1px solid var(--hair);padding:14px 0}
.qmore li:last-child{border-bottom:1px solid var(--hair)}
.qmore a{color:var(--ink);text-decoration:none;font-weight:500}
.qmore a:hover .arw{transform:translateX(5px)}
.qlist{list-style:none;padding:0;margin:26px 0 0}
.qlist li{border-top:1px solid var(--hair)}
.qlist li:last-child{border-bottom:1px solid var(--hair)}
.qlist a{display:grid;grid-template-columns:3ch 1fr auto;gap:18px;align-items:baseline;padding:20px 0;color:var(--ink);text-decoration:none;font-size:clamp(1.05rem,1.4vw,1.3rem);font-weight:500;letter-spacing:-.01em}
.qlist a:hover .arw{transform:translateX(5px)}
.qlist .qn,.qentry .qn{color:var(--brand);font-weight:600;font-variant-numeric:tabular-nums}
.qentry{border-top:1px solid var(--hair)}
.qentry:last-of-type{border-bottom:1px solid var(--hair)}
.qentry>a{display:grid;grid-template-columns:3ch 1fr;gap:clamp(18px,3vw,40px);padding:clamp(28px,4vw,44px) 0;color:var(--ink);text-decoration:none}
.qentry h2{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.03em;line-height:1.15;max-width:24ch}
.qentry p{margin-top:14px;max-width:66ch;color:var(--ink)}
.qentry .qread{display:inline-block;margin-top:16px;font-weight:500}
.qentry>a:hover .arw{transform:translateX(5px)}
@media(max-width:560px){.qlist a{grid-template-columns:3ch 1fr;font-size:1.05rem}.qlist .arw{display:none}}

/* CO 22 Sep 2026: monogram placeholder for a team member with no portrait yet (var(--teal) is not defined) */
.tmember .monogram{background:#ECE9E2;color:var(--navy);font-weight:500}

/* Portfolio ticker logos muted to ~50% grey. REVERT: delete this block; colour source files are unchanged. (1 Oct 2026) */
.ticker-item .tlogo.full{filter:grayscale(1);opacity:.5}
.ticker-item:hover .tlogo.full{filter:grayscale(1);opacity:.5}

/* About hero (#teamhero) portraits: fit by height and pin right, so the face stays a
   constant size and never over-crops as the window widens. Fade, Ken Burns zoom and
   rotation are unchanged. Desktop only; mobile (<=1100px) stacks as before. (1 Oct 2026) */
@media(min-width:1101px){
  #teamhero .pheroimg{width:auto;height:124%;max-width:none;left:auto;right:2%;top:-5%;object-fit:contain;object-position:right center}
}

/* CO 1 Oct 2026: tall mobile hero focal points - keep one featured person centred above the copy.
   Portrait phones only; each slide's subject sits at a different horizontal point in the source. */
@media (max-width:700px) and (orientation:portrait){
  .hero-slides .hslide:nth-child(1){background-position-x:72%}
  .hero-slides .hslide:nth-child(2){background-position-x:64%}
  .hero-slides .hslide:nth-child(3){background-position-x:49%}
  .hero-slides .hslide:nth-child(4){background-position-x:74%}
  .hero-slides .hslide:nth-child(5){background-position-x:32%}
  .hero-slides .hslide:nth-child(6){background-position-x:65%}
}