/* The whole site runs on this one stylesheet.
   Look and feel modelled on hark.com: white canvas, near-black ink, an editorial serif for
   display type with italics for emphasis, a quiet grotesk for text, pill buttons,
   big soft-cornered cards and an atmospheric gradient behind the heroes, here in a scale of greens.
   Fonts are free stand-ins for Hark's own: Newsreader (serif) and Inter (sans).
   All motion is CSS-only and switches off under prefers-reduced-motion. */

:root{
  --bg:#FFFFFF;
  --surface:#F1F5F1;   /* card fill, faint green */
  --surface-2:#E4EDE6; /* soft pill fill */
  --surface-3:#D6E4DA; /* pill hover */
  --ink:#10201B;       /* green-black */
  --ink-2:#152A22;     /* button fill */
  --mut:#4D5F57;       /* secondary text, 6.6:1 on white */
  --faint:#5C6D65;     /* small labels, 5.4:1 on white */
  --line:#DCE6DF;
  --on-ink:#F4F8F5;

  /* green scale, darkest to lightest */
  --g-900:#0C2E24; --g-800:#16443A; --g-700:#1F5A47; --g-600:#2E6B57; --g-500:#5E9A7F;
  --g-400:#8DB5A0; --g-300:#B5D1BF; --g-200:#D3E5D8; --g-100:#ECF3EC;

  --forest:linear-gradient(155deg,var(--g-900) 0%,var(--g-700) 48%,var(--g-500) 100%);
  --sage:linear-gradient(155deg,#BCD8C2 0%,#D7E8CC 55%,#EEEACF 100%);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-lg:28px;
  --r-md:20px;
  --ease:cubic-bezier(.22,1,.36,1);  /* soft "expo out" used by every transition */
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg)}
body{font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--g-600);color:#fff}
a{color:var(--ink);text-decoration:none;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--g-600);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.cap{font-size:12px;letter-spacing:.02em;font-weight:500;color:var(--faint)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;position:fixed;z-index:99;background:var(--ink-2);color:var(--on-ink);padding:10px 16px;border-radius:100px;font-size:14px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
h1 i,h2 i,h3 i,.pull i,.statement i{font-style:italic;color:var(--g-600)}

/* Text links that grow an underline on hover */
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px}
.ul:hover{background-size:100% 1px}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:500;font-size:15px;color:var(--g-700);
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px}
.more::after{content:"→";transition:transform .4s var(--ease)}
.more:hover{background-size:0 1px;color:var(--g-600)}
.more:hover::after{transform:translateX(5px)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(16,32,27,.06);view-transition-name:topbar}
.bar{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:23px;line-height:1;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand .badge{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;padding:5px 9px 4px;border-radius:100px;background:var(--g-700);color:#fff;transition:background .3s var(--ease),transform .4s var(--ease)}
.brand:hover .badge{background:var(--g-600);transform:translateY(-1px)}
.bar .links{display:flex;gap:2px;margin-left:auto}
.bar .links a{position:relative;font-size:14.5px;color:var(--ink);padding:8px 13px;border-radius:100px}
.bar .links a:hover{background:rgba(46,107,87,.09)}
.bar .links a.on{background:rgba(46,107,87,.14);color:var(--g-800)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--ink);padding:10px 18px;border-radius:100px;font-size:14.5px;font-weight:500;white-space:nowrap}
.pill:hover{background:var(--surface-3);transform:translateY(-1px)}
.bar .pill{background:var(--ink-2);color:var(--on-ink)}
.bar .pill:hover{background:var(--g-700);color:#fff}

/* Home: the bar floats clear over the hero, then frosts once the page scrolls (CSS scroll timeline;
   browsers without it keep a light frost throughout). */
.topbar.over{position:fixed;left:0;right:0;background:rgba(255,255,255,.2);border-bottom-color:transparent}
@supports (animation-timeline:scroll()){
  .topbar.over{animation:frost linear both;animation-timeline:scroll(root);animation-range:0 320px}
  @keyframes frost{
    from{background:rgba(255,255,255,0);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
    to{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:rgba(16,32,27,.06)}
  }
}

/* Below 980px the bar keeps brand + pill; the page links move to a swipeable row underneath. */
.mobnav{display:none;gap:6px;overflow-x:auto;padding:0 20px 12px;margin-top:-6px;scrollbar-width:none}
.mobnav::-webkit-scrollbar{display:none}
.mobnav a{flex:none;font-size:14px;padding:7px 13px;border-radius:100px;background:rgba(46,107,87,.08);color:var(--ink)}
.mobnav a.on{background:var(--ink-2);color:var(--on-ink)}
.topbar.over .mobnav a{background:rgba(255,255,255,.5)}
.topbar.over .mobnav a.on{background:var(--ink-2)}
@media (max-width:980px){
  .bar .links{display:none}
  .bar .pill{margin-left:auto}
  .mobnav{display:flex}
}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink-2);color:var(--on-ink);padding:15px 26px;border-radius:100px;font-size:15px;font-weight:500;border:none;cursor:pointer;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g-600);transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease)}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,58,44,.25)}
.btn:hover::before{transform:translateY(0)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.light{background:rgba(255,255,255,.75);color:var(--ink)}
.btn.light::before{background:#fff}
.btn.light:hover{color:var(--ink)}

/* ---------- atmosphere: the green "meadow" gradient behind heroes ---------- */
.meadow{position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(90% 55% at 50% 110%,#F2F1E6 0%,rgba(242,241,230,0) 70%),
    radial-gradient(55% 30% at 18% 38%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#5F927C 0%,#8DB5A0 30%,#C3DACB 62%,#F0F2EA 100%)}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.7;will-change:transform}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-14vw;background:radial-gradient(circle,#2E6B57 0%,transparent 65%);animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;right:-8vw;top:6vw;background:radial-gradient(circle,#E9F2DA 0%,transparent 65%);animation:drift2 26s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:36vw;height:36vw;left:30vw;bottom:-14vw;background:radial-gradient(circle,#A7CDB3 0%,transparent 65%);animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(12vw,8vw) scale(1.15)}}
@keyframes drift2{to{transform:translate(-10vw,10vw) scale(.9)}}
@keyframes drift3{to{transform:translate(-14vw,-6vw) scale(1.2)}}
.glass{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 60px rgba(12,46,36,.16)}

/* ---------- load-in motion: add .rise with style="--d:n" to stagger ---------- */
.rise{animation:rise 1s var(--ease) both;animation-delay:calc(var(--d,0) * 110ms + 80ms)}
.rise-scale{animation:risescale 1.3s var(--ease) both;animation-delay:calc(var(--d,0) * 110ms + 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes risescale{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}

/* ---------- home hero ---------- */
.hero-home{min-height:min(100vh,900px);display:flex;align-items:center;padding:130px 0 90px}
.hero-home::after{content:"";position:absolute;left:0;right:0;bottom:0;height:240px;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;width:100%}
.tag{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border-radius:100px;background:rgba(255,255,255,.55);font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--g-900)}
.tag .dot{width:8px;height:8px;border-radius:50%;background:var(--g-600);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(46,107,87,.55)}70%,100%{box-shadow:0 0 0 10px rgba(46,107,87,0)}}
.hero-home h1{margin:26px 0 0;font-size:clamp(50px,6.8vw,96px);line-height:.98;letter-spacing:-.03em}
.hero-home h1 i{color:var(--g-800);opacity:.78}
.hero-home .lede{margin:28px 0 0;max-width:31em;font-size:clamp(17px,1.6vw,20px);line-height:1.5;font-weight:500;color:var(--ink)}
.hero-home .ctas{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero-visual-wrap{justify-self:end;width:100%;max-width:420px}
.hero-visual{position:relative}
.frame{border-radius:32px;padding:10px;transform:rotate(1.5deg);transition:transform .8s var(--ease)}
.frame:hover{transform:rotate(0) scale(1.01)}
.frame img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:24px}
.chip{position:absolute;display:flex;align-items:baseline;gap:9px;border-radius:20px;padding:13px 18px;max-width:230px}
.chip b{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--g-900)}
.chip span{font-size:13.5px;font-weight:600;line-height:1.25;color:var(--g-800)}
.chip-a{left:-70px;top:9%;animation:float 7s ease-in-out infinite}
.chip-b{right:-48px;top:30%;animation:float 8s ease-in-out -2s infinite}
.chip-c{left:-56px;bottom:22%;animation:float 7.5s ease-in-out -4s infinite}
.chip-d{right:-36px;bottom:5%;animation:float 8.5s ease-in-out -6s infinite}
@keyframes float{50%{transform:translateY(-12px)}}

/* ---------- manifesto statement ---------- */
.statement{margin:0 auto;max-width:18ch;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,80px);line-height:1.08;letter-spacing:-.025em}
.statement-wrap{padding:140px 0}
.statement-wrap .cap{display:block;text-align:center;margin-bottom:26px;color:var(--g-600)}

/* ---------- feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:center;padding:56px 0}
.feature.flip .ftext{order:2}
.ftext h2{margin:0;font-size:clamp(30px,3.4vw,42px);line-height:1.1}
.ftext p{margin:18px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:40ch}
.media{border-radius:var(--r-lg);padding:34px;color:#fff;position:relative;overflow:hidden;isolation:isolate;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.media:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(12,46,36,.22)}
.media.forest{background:var(--forest)}
.media.sage{background:var(--sage);color:var(--ink)}
/* a light sheen that sweeps across gradient cards on hover */
.media::after,.ainative::after,.role.now::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-100%);transition:transform 1.1s var(--ease)}
.media:hover::after,.ainative:hover::after,.role.now:hover::after{transform:translateX(100%)}

/* stats on a gradient card (home) */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{border-radius:var(--r-md);padding:20px 20px 18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);transition:background .4s var(--ease),transform .5s var(--ease)}
.stat:hover{background:rgba(255,255,255,.22);transform:translateY(-3px)}
.stat .n{font-family:var(--serif);font-size:42px;line-height:1;letter-spacing:-.02em}
.stat .n small{font-size:24px;font-style:italic;opacity:.75}
.stat .t{margin-top:10px;font-size:14px;font-weight:600}
.stat .s{margin-top:4px;font-size:13px;line-height:1.45;opacity:.85}

/* pipeline (home) */
.pipe{display:grid;grid-template-columns:1fr;gap:10px}
.pipe .stage{border-radius:var(--r-md);padding:20px 22px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.65)}
.pipe .stage .cap{display:block;margin-bottom:8px;color:var(--g-800)}
.pipe .stage-io .txt{font-family:var(--serif);font-size:21px;line-height:1.3}
.pipe .stage-io .txt i{color:var(--g-600)}
.pipe .stage-engine{background:rgba(255,255,255,.85)}
.pipe .stage-engine ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pipe .stage-engine li{font-size:13.5px;font-weight:500;padding:6px 12px;border-radius:100px;background:var(--surface-2);transition:background .3s var(--ease),color .3s var(--ease)}
.pipe .stage-engine li:hover{background:var(--g-700);color:#fff}
.pipe .arrow{display:block;width:2px;height:22px;margin:0 auto;background:repeating-linear-gradient(180deg,var(--g-700) 0 4px,transparent 4px 8px);background-size:2px 16px;animation:flow 1s linear infinite;opacity:.6}
@keyframes flow{to{background-position:0 16px}}
.pipe .more{margin-top:14px}

/* index cards (home) */
.shead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;gap:20px;flex-wrap:wrap}
.shead h2{margin:0;font-size:clamp(30px,3.4vw,42px);line-height:1.1}
.idx{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.idx a{position:relative;display:flex;flex-direction:column;gap:6px;min-height:200px;padding:26px;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);overflow:hidden;isolation:isolate}
.idx a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--forest);opacity:0;transition:opacity .5s var(--ease)}
.idx a::after{content:"→";position:absolute;right:26px;top:24px;font-size:20px;transform:translateX(-8px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.idx a:hover{color:#fff;transform:translateY(-4px);box-shadow:0 22px 50px rgba(12,46,36,.2)}
.idx a:hover::before{opacity:1}
.idx a:hover::after{transform:none;opacity:1}
.idx a:hover .no,.idx a:hover p{color:rgba(255,255,255,.82)}
.idx .no{font-size:13px;color:var(--faint);font-weight:500;transition:color .5s var(--ease)}
.idx h3{margin:auto 0 0;font-size:30px;line-height:1.1}
.idx p{margin:4px 0 0;font-size:14.5px;color:var(--mut);transition:color .5s var(--ease)}
.footnote{margin:40px 0 0;font-size:13px;color:var(--faint);text-align:center}

/* closing call to action (home) */
.closer{margin-top:110px;padding:130px 0 140px;text-align:center}
.closer::after{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:-1;background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}
.closer-card{max-width:520px;margin:0 auto;border-radius:32px;padding:44px 36px}
.closer-card h2{margin:0;font-size:clamp(32px,4vw,46px);line-height:1.08}
.closer-card p{margin:14px auto 0;max-width:30ch;color:var(--ink-2)}
.closer-card .ctas{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.closer-card .btn{width:100%}

/* ---------- inner-page hero ---------- */
section{padding:64px 0}
.hero.sub{position:relative;padding:100px 0 76px}
.hero.sub::before{content:"";position:absolute;z-index:-1;top:-70px;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:linear-gradient(180deg,rgba(255,255,255,0) 50%,#fff 100%),linear-gradient(180deg,#9CC2AC 0%,#C6DCCD 45%,#EEF1E8 100%)}
.hero.sub>*{animation:rise 1s var(--ease) both}
.hero.sub>:nth-child(2){animation-delay:.1s}
.hero.sub>:nth-child(3){animation-delay:.2s}
.hero.sub .cap{display:inline-block;padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.6);color:var(--g-900);font-size:13.5px;font-weight:600}
.hero.sub h1{margin:22px 0 0;font-size:clamp(42px,6.2vw,82px);line-height:1.02;letter-spacing:-.025em;max-width:16ch}
.hero.sub p{margin:24px 0 0;max-width:36em;font-size:clamp(17px,1.7vw,20px);line-height:1.5;font-weight:500;color:var(--ink-2)}
.hero.sub p strong{font-weight:600}
main{position:relative;z-index:0}

.divide{border:none;border-top:1px solid var(--line);margin:0}
.nextnav{text-align:center;padding:24px 0 96px}

/* ---------- about ---------- */
.pull{font-family:var(--serif);font-size:clamp(32px,4.6vw,58px);line-height:1.1;letter-spacing:-.02em;max-width:22ch;margin:0}
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start}
.beat{padding:30px 0;border-bottom:1px solid var(--line)}
.beat:first-child{padding-top:0}
.beat:last-of-type{border-bottom:none}
.beat .cap{color:var(--g-600)}
.beat h3{margin:10px 0 0;font-size:28px;line-height:1.18}
.beat p{margin:12px 0 0;font-size:16px;line-height:1.65;color:var(--mut);max-width:60ch}
.spec{position:sticky;top:96px}
.speclist{background:var(--surface);border-radius:var(--r-lg);padding:8px 24px}
.speclist>div{padding:15px 0;border-bottom:1px solid var(--line)}
.speclist>div:last-child{border-bottom:none}
.speclist .v{margin-top:3px;font-family:var(--serif);font-size:19px;line-height:1.3}
.offclock{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:baseline;margin:0 0 72px;padding:44px 48px;border-radius:var(--r-lg);background:var(--sage)}
.offclock .cap{color:var(--g-800);font-size:13px;font-weight:600}
.offclock p{margin:0;font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);line-height:1.4;color:var(--ink)}

/* ---------- metrics ---------- */
.metric{display:grid;grid-template-columns:240px 1fr;gap:40px;padding:40px;margin-bottom:14px;border-radius:var(--r-lg);background:var(--surface);transition:background .5s var(--ease),box-shadow .6s var(--ease)}
.metric:hover{background:#EAF2EC;box-shadow:0 18px 44px rgba(12,46,36,.09)}
.mnum{font-family:var(--serif);font-size:84px;line-height:.95;letter-spacing:-.03em;color:var(--g-800)}
.mnum small{font-size:42px;font-style:italic;color:var(--g-500)}
.metric .cap{color:var(--g-600)}
.metric .lede{margin:8px 0 0;font-family:var(--serif);font-size:26px;line-height:1.3}
details.case{margin-top:18px}
details.case summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:9px 16px;border-radius:100px;background:var(--surface-2);color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.metric details.case summary{background:#fff}
details.case summary::-webkit-details-marker{display:none}
details.case summary::after{content:"↓";transition:transform .4s var(--ease)}
details.case[open] summary::after{transform:rotate(180deg)}
details.case summary:hover{background:var(--ink-2);color:var(--on-ink)}
/* smooth open/close where supported */
details.case::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .5s var(--ease),opacity .5s var(--ease),content-visibility .5s allow-discrete}
details.case[open]::details-content{block-size:auto;opacity:1}
.star{margin:22px 0 0;display:grid;grid-template-columns:110px 1fr;gap:14px 26px}
.star dt{font-size:13px;font-weight:600;padding-top:1px;color:var(--g-700)}
.star dd{margin:0;font-size:15px;line-height:1.65;color:var(--mut)}
.quote{text-align:center;padding:96px 0}
.quote .q{font-family:var(--serif);font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-.02em;max-width:22ch;margin:0 auto}
.quote .who{margin-top:18px}

/* ---------- record ---------- */
.role{position:relative;display:grid;grid-template-columns:260px 1fr;gap:48px;padding:48px 0;border-bottom:1px solid var(--line)}
.role:first-of-type{padding-top:8px}
.role.now{padding:44px;margin-bottom:24px;border:none;border-radius:var(--r-lg);background:var(--forest);color:#fff;overflow:hidden;isolation:isolate}
.role.now .date,.role.now .sector,.role.now .pts li,.role.now .rlede{color:rgba(255,255,255,.88)}
.role.now .pts li::before{background:#fff;opacity:.7}
.role.now h3 i{color:var(--g-300)}
.role.now .count{background:rgba(255,255,255,.16);color:#fff}
.role .date{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--g-700)}
.role.now .date .dot{width:8px;height:8px;border-radius:50%;background:#9FE0BE;animation:pingw 2.4s var(--ease) infinite}
@keyframes pingw{0%{box-shadow:0 0 0 0 rgba(159,224,190,.6)}70%,100%{box-shadow:0 0 0 10px rgba(159,224,190,0)}}
.role .org{margin-top:10px;font-family:var(--serif);font-size:24px;line-height:1.2}
.role .sector{margin-top:4px;font-size:14px;color:var(--mut)}
.role .count{margin-top:12px;display:inline-block;font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:100px;background:var(--surface-2);color:var(--ink)}
.role h3{margin:0;font-size:clamp(28px,3vw,38px);line-height:1.12}
.role .rlede{margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--mut);max-width:62ch}
.pts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pts li{font-size:15.5px;line-height:1.6;color:var(--mut);padding-left:20px;position:relative}
.pts li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--g-600);opacity:.6}
.pts.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.subrole{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.subrole>div{padding:24px 26px;border-radius:var(--r-md);background:var(--surface);transition:background .4s var(--ease),transform .5s var(--ease)}
.subrole>div:hover{background:#EAF2EC;transform:translateX(4px)}
.subrole .sdate{font-size:13px;font-weight:500;color:var(--g-600)}
.subrole h4{margin:6px 0 0;font-size:22px;line-height:1.2}
.subrole .pts{margin-top:12px}

/* ---------- capabilities ---------- */
.ainative{position:relative;overflow:hidden;isolation:isolate;background:var(--forest);color:#fff;border-radius:var(--r-lg);padding:48px;margin-bottom:14px}
.ainative .cap{color:rgba(255,255,255,.75)}
.ainative .lead{margin:14px 0 0;font-family:var(--serif);font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.02em}
.ainative .desc{margin:16px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.88)}
.ainative .aipills{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.ainative .aipills span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:100px;padding:7px 14px;font-size:13.5px;font-weight:500}

/* the engine diagram: input -> wheel of eight nodes around an AI core -> output */
.engine{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;align-items:center;padding:40px 32px;margin-bottom:14px;border-radius:var(--r-lg);background:radial-gradient(60% 70% at 50% 50%,#fff 0%,var(--g-100) 100%);position:relative;overflow:hidden}
.eio{position:relative;z-index:2;border-radius:var(--r-md);padding:20px;background:#fff;box-shadow:0 10px 30px rgba(12,46,36,.08)}
.eio .cap{display:block;margin-bottom:8px;color:var(--g-600)}
.eio p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.3}
.eio p i{color:var(--g-600)}
.eio.out{background:var(--forest);color:#fff}
.eio.out .cap{color:rgba(255,255,255,.75)}
.eio.out p i{color:var(--g-300)}
.ecenter{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}
.eflow{height:2px;background:repeating-linear-gradient(90deg,var(--g-600) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:flowx 1s linear infinite;opacity:.6}
@keyframes flowx{to{background-position:24px 0}}
.wheel{position:relative;aspect-ratio:1;width:100%;max-width:540px;margin:0 auto}
.wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wheel .ring{fill:none;stroke:var(--g-400);stroke-width:.3;stroke-dasharray:1 1.6;transform-origin:50px 50px;animation:spin 60s linear infinite}
.wheel .ring.inner{stroke:var(--g-600);stroke-width:.35;stroke-dasharray:3 2;animation-duration:24s;animation-direction:reverse}
.wheel .spoke{stroke:var(--g-500);stroke-width:.35;stroke-dasharray:1.2 1.2;animation:spokeflow 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spokeflow{to{stroke-dashoffset:-2.4}}
.core{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;background:var(--forest);color:#fff;box-shadow:0 0 0 10px rgba(46,107,87,.12),0 20px 50px rgba(12,46,36,.3);animation:breathe 5s ease-in-out infinite}
.core b{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.9vw,25px);line-height:1.1}
.core span{margin-top:6px;font-size:11.5px;letter-spacing:.04em;opacity:.8}
@keyframes breathe{50%{box-shadow:0 0 0 22px rgba(46,107,87,.06),0 20px 50px rgba(12,46,36,.3)}}
.node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:100px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.15;white-space:nowrap;box-shadow:0 8px 22px rgba(12,46,36,.1)}
.node em{font-style:normal;display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--g-200);color:var(--g-800);font-size:11px;font-weight:600;transition:background .3s var(--ease),color .3s var(--ease)}
.node:hover{background:var(--ink-2);color:#fff;transform:translate(-50%,-50%) scale(1.06);box-shadow:0 14px 30px rgba(12,46,36,.25)}
.node:hover em{background:var(--g-500);color:#fff}

.capgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.capcard{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:32px;min-height:210px;display:flex;flex-direction:column;scroll-margin-top:110px;transition:background .5s var(--ease),box-shadow .6s var(--ease),outline-color .5s}
.capcard:hover,.capcard:target{background:#EAF2EC;box-shadow:0 22px 50px rgba(12,46,36,.1)}
.capcard:target{outline:2px solid var(--g-500);outline-offset:-2px}
.capcard .cap{color:var(--g-600)}
.capcard h3{margin:auto 0 0;padding-top:28px;font-size:30px;line-height:1.1}
.capcard p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--mut)}

/* ---------- reach ---------- */
.region{display:grid;grid-template-columns:56px 1fr 180px;gap:28px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.region:first-of-type{padding-top:8px}
.region .no{font-size:13px;font-weight:500;color:var(--g-600)}
.region h3{margin:0;font-size:32px;line-height:1.1;transition:transform .5s var(--ease),color .3s var(--ease)}
.region:hover h3{transform:translateX(6px);color:var(--g-700)}
.region p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--mut);max-width:60ch}
.region .meta{display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right}
.region .mk{font-size:13.5px;font-weight:500}
.rexp{margin:18px 0 0;padding:22px 24px;border-radius:var(--r-md);background:var(--surface);display:grid;grid-template-columns:140px 1fr;gap:10px 22px}
.rexp dt{font-size:13px;font-weight:600;padding-top:1px;color:var(--g-700)}
.rexp dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}
.dots{display:inline-flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
.dots i.f{background:var(--g-600)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{background:var(--surface);border-radius:100px;padding:9px 16px;font-size:14.5px;font-weight:500;transition:background .3s var(--ease),color .3s var(--ease),transform .4s var(--ease)}
.pills span:hover{background:var(--g-700);color:#fff;transform:translateY(-2px)}
.twocol{display:grid;grid-template-columns:1.2fr 1fr;gap:64px}
.twocol .note{margin:26px 0 0;max-width:44ch;font-family:var(--serif);font-size:22px;line-height:1.35;color:var(--mut)}
.lrow{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.lrow:last-of-type{border-bottom:none}
.lrow .nm{font-family:var(--serif);font-size:22px}
.lrow .lv{font-size:12.5px;font-weight:500;color:var(--faint);letter-spacing:.04em}

/* ---------- contact: one block, five cells ---------- */
.cblock{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;border-radius:var(--r-lg);overflow:hidden;background:var(--line);box-shadow:0 30px 70px rgba(12,46,36,.1)}
.ccell{position:relative;grid-column:span 3;display:block;padding:38px;background:var(--surface);color:var(--ink);overflow:hidden;isolation:isolate;transition:background .5s var(--ease)}
.ccell.small{grid-column:span 2;padding:30px 34px;background:#fff}
a.ccell:hover{background:#E6EFE8}
.ccell.lead{background:var(--forest);color:#fff}
a.ccell.lead:hover{background:var(--forest)}
.ccell.lead .cap,.ccell.lead .sub{color:rgba(255,255,255,.82)}
.ccell .cap{color:var(--g-600)}
.ccell .val{margin-top:16px;font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.01em;word-break:break-word}
.ccell .place{margin-top:10px;font-family:var(--serif);font-size:24px;line-height:1.2}
.ccell .sub{margin-top:10px;font-size:14.5px;color:var(--mut)}
.ccell .go{position:absolute;right:32px;top:32px;font-size:22px;transition:transform .5s var(--ease)}
a.ccell:hover .go{transform:translate(4px,-4px)}
.ccell.lead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-100%);transition:transform 1.1s var(--ease)}
.ccell.lead:hover::after{transform:translateX(100%)}
/* The contact card sits on the first screen of a short page, so it loads in once and then stays
   sharp, rather than riding the scroll motion (which would leave it half-blurred at rest). */
.ccell{animation:rise 1s var(--ease) both;animation-delay:calc(var(--d,0) * 90ms + 250ms)}
.ccell:nth-child(2){--d:1}.ccell:nth-child(3){--d:2}.ccell:nth-child(4){--d:3}.ccell:nth-child(5){--d:4}

/* ---------- footer ---------- */
.site{border-top:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--g-100))}
.ftop{display:flex;justify-content:space-between;gap:48px;padding:56px 0 64px;flex-wrap:wrap}
.fmark{display:inline-flex;flex-direction:column;gap:12px;font-family:var(--serif);font-size:30px;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.fmark .badge{align-self:flex-start;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;padding:5px 10px 4px;border-radius:100px;background:var(--g-700);color:#fff}
.fcols{display:flex;gap:72px;flex-wrap:wrap}
.fcols div{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:500}
.fcols a{align-self:flex-start}
.fcols .flabel{font-weight:400;color:var(--faint);margin-bottom:6px}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0 30px;border-top:1px solid var(--line);font-size:14px}
.fbot .fmeta{color:var(--faint)}

/* ---------- scroll motion ----------
   One rule for the whole site: every content block ("unit") fades, rises and sharpens in as it
   enters from the bottom, then fades, lifts and blurs out as it leaves the top, so content is always
   handing over to what comes next. Units are leaf-level blocks (cards, rows, headings, list items),
   never a container AND its children, so nothing animates twice.
   u-out has only a "to" keyframe, so before it starts it sits on whatever u-in produced.
   Both use translate/scale/filter, leaving `transform` free for the hover lifts. */
@supports (animation-timeline:view()){
  /* home */
  .statement-wrap .cap,.statement,.ftext,.feature .media,.shead,.idx a,.footnote,.closer-card,
  /* inner-page openers */
  .nextnav,
  /* brief */
  .pull,.split>div>.beat,.spec>.cap,.speclist>div,.offclock,
  /* metrics */
  .metric,.quote .q,.quote .who,
  /* record */
  .role.now,.role:not(.now)>div:first-child,.role:not(.now) h3,.role:not(.now) .rlede,.role:not(.now)>div>.pts li,.subrole>div,
  /* capabilities */
  .engine,.ainative,.capcard,
  /* reach */
  .region,.twocol .shead,.twocol .pills,.twocol .note,.lrow,
  /* footer */
  .ftop>*,.fbot>*{
    animation:u-in linear both,u-out linear both;animation-timeline:view(),view();
    animation-range:entry 0% entry calc(0% + 240px),exit calc(100% - 210px) exit 100%}
  @keyframes u-in{from{opacity:0;translate:0 90px;scale:.92;filter:blur(8px)}}
  @keyframes u-out{to{opacity:0;translate:0 -60px;scale:.94;filter:blur(6px)}}
  /* the footer sits at the very end of the page and never scrolls off, so it only comes in */
  .ftop>*,.fbot>*{animation:u-in linear both;animation-timeline:view();animation-range:entry 0% entry calc(0% + 200px)}

  /* home hero: the intro drifts up and dissolves as the thesis arrives */
  .hero-home{view-timeline:--hero}
  .hero-copy{animation:hero-copy-out linear both;animation-timeline:--hero;animation-range:exit calc(100% - 560px) exit 95%}
  .hero-visual-wrap{animation:hero-photo-out linear both;animation-timeline:--hero;animation-range:exit calc(100% - 560px) exit 100%}
  @keyframes hero-copy-out{to{opacity:0;translate:0 -160px;filter:blur(8px)}}
  @keyframes hero-photo-out{to{opacity:0;translate:0 -80px;scale:.86;filter:blur(6px)}}

  /* inner-page heroes lift away the same way */
  .hero.sub{animation:sub-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes sub-out{to{opacity:0;translate:0 -90px;filter:blur(8px)}}
}

/* ---------- page-to-page transitions (cross-document view transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease) both}
::view-transition-new(root){animation:vt-in .6s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}

/* ---------- small screens ---------- */
@media (max-width:880px){
  .wrap{padding:0 20px}
  .bar{height:62px}
  .brand{font-size:20px;gap:8px}
  .hero-home{min-height:0;padding:140px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-visual-wrap{justify-self:center;max-width:320px}
  .chip{padding:9px 13px;gap:7px;max-width:170px}
  .chip b{font-size:28px}
  .chip span{font-size:12px}
  .chip-a{left:-30px}
  .chip-b{right:-26px}
  .chip-c{left:-26px}
  .chip-d{right:-18px}
  .statement-wrap{padding:96px 0}
  .feature,.feature.flip{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .feature.flip .ftext{order:0}
  .media{padding:18px;border-radius:24px}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat .n{font-size:34px}
  .idx{grid-template-columns:1fr}
  .idx a{min-height:0}
  .idx h3{margin-top:18px}
  .closer{margin-top:72px;padding:90px 0 100px}
  .hero.sub{padding:56px 0 44px}
  .hero.sub::before{top:-112px}
  section{padding:44px 0}
  .split,.twocol{grid-template-columns:1fr;gap:32px}
  .cblock{grid-template-columns:1fr}
  .ccell,.ccell.small{grid-column:auto;padding:26px 24px}
  .offclock{grid-template-columns:1fr;gap:12px;padding:28px 24px;margin-bottom:44px}
  .spec{position:static}
  .metric{grid-template-columns:1fr;gap:12px;padding:26px 22px}
  .mnum{font-size:64px}
  .metric .lede{font-size:21px}
  .role{grid-template-columns:1fr;gap:18px;padding:34px 0}
  .role.now{padding:28px 22px}
  .pts.cols{grid-template-columns:1fr}
  .subrole>div{padding:20px}
  .capgrid{grid-template-columns:1fr}
  .capcard{min-height:0;padding:26px}
  .ainative{padding:30px 24px}
  /* engine stacks: input, core, nodes in a grid, output */
  .engine{grid-template-columns:1fr;padding:20px}
  .ecenter{grid-template-columns:1fr}
  .eflow{width:2px;height:28px;margin:0 auto;background:repeating-linear-gradient(180deg,var(--g-600) 0 6px,transparent 6px 12px);background-size:2px 24px;animation:flowy 1s linear infinite}
  @keyframes flowy{to{background-position:0 24px}}
  .wheel{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:184px}
  .wheel svg{display:none}
  .core{top:0;width:164px;transform:translateX(-50%)}
  .node{position:static;transform:none;white-space:normal;font-size:13px;padding:8px 12px 8px 8px;border-radius:16px}
  .node:hover{transform:scale(1.03)}
  .region{grid-template-columns:36px 1fr;gap:0 14px}
  .region .meta{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-top:14px}
  .region h3{font-size:27px}
  .star,.rexp{grid-template-columns:1fr;gap:4px}
  .star dd,.rexp dd{margin-bottom:12px}
  .rexp{padding:18px}
  .ftop{flex-direction:column;gap:32px;padding:44px 0}
  .fcols{gap:40px}
  .fbot{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .bar .pill{display:none}
  .chip-a,.chip-c{left:-12px}
  .chip-b,.chip-d{right:-10px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
}