:root{
  /* RGB companions for palette presets that also appear at partial alpha
     below. Keeping these in sync with theme.json is one line each; the
     alternative (rgba() literals repeating the palette's numbers) is 44
     places that silently go stale the next time a preset colour changes. */
  --abyss-rgb:4,8,20;--deep-alt-rgb:10,21,38;
  --cy-rgb:91,200,232;--cy-dk-rgb:46,158,196;
  --gold-rgb:245,200,106;--gold-dk-rgb:184,147,47;
  --navy-rgb:27,42,94;--ember-rgb:255,138,107;
  --cyg:rgba(var(--cy-rgb),.5);
  --goldg:rgba(var(--gold-rgb),.5);
  --em-dk:#C4593C;
  --line:rgba(255,255,255,.1);
  --f:var(--wp--preset--font-family--display);
  --fb:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --gut:clamp(18px,4.5vw,60px);--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
/* The nav is position:fixed, so an in-page anchor stops with the target
   section's top edge at the viewport top and the bar sits over the first
   70-80px of it. Above 1040px the band's own top padding is deep enough to
   absorb that; below it the padding is 54px against a 70px bar, so every
   anchor in the mobile menu landed with the section's eyebrow line hidden
   underneath. Reserve the bar's height on every anchor jump instead. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
@media(max-width:1040px){html{scroll-padding-top:70px}}
body{margin:0;font-family:var(--fb);font-size:16.5px;line-height:1.62;color:var(--wp--preset--color--tx);background:var(--wp--preset--color--abyss);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wp--style--global--wide-size);margin:0 auto;padding:0 var(--gut);position:relative;z-index:3}

/* Gutenberg's block gap. Core emits `.wp-site-blocks > *` and
   `:root :where(.is-layout-flow|constrained) > *{margin-block:24px 0}`, plus
   a `:last-child{margin-block-end:0}`. Both land on top of the spacing this
   stylesheet already carries, and the mockup has neither: the gap opens a
   24px strip of body background between every full-bleed band (a visible
   seam wherever two bands were drawn to share an edge) and adds ~40px of
   air inside every card, while the last-child rule drops the closing
   paragraph's margin at the foot of one. Switch the gap off for the page's
   own stack and restore the two element margins the last-child rule eats,
   both at the lowest specificity that outranks core (0,1,0 / 0,1,1) so
   every component rule further down this file still wins. */
.wp-site-blocks > *,
.wp-site-blocks :where(.is-layout-flow,.is-layout-constrained) > *{margin-block-start:0}
.wp-site-blocks :where(.is-layout-flow,.is-layout-constrained) > :where(p){margin-block-end:1em}
.wp-site-blocks :where(.is-layout-flow,.is-layout-constrained) > :where(h1,h2,h3){margin-block-end:.5em}
.wp-site-blocks :where(.is-layout-flow,.is-layout-constrained) > :where(h4){margin-block-end:.4em}

h1,h2,h3,h4{font-family:var(--f);margin:0 0 .5em;line-height:1.13;font-weight:600;letter-spacing:-.024em;color:#fff}
.lite h2,.lite h3,.lite h4{color:var(--wp--preset--color--navy)}
h1{font-size:clamp(32px,5vw,62px);font-weight:700;letter-spacing:-.038em}
h2{font-size:clamp(24px,3.05vw,40px)}
h2 .ac{color:var(--wp--preset--color--cy);display:block}
.lite h2 .ac{color:var(--wp--preset--color--gold-dk)}
h3{font-size:clamp(17px,1.85vw,22px)}
h4{font-size:16px;margin-bottom:.4em}
/* The card sub-headings under a big figure or a step number sit at h3 --
   nothing on the page occupies h2's next level down, so an h4 there would
   skip a level for anyone navigating by heading. They keep h4's type scale. */
.hsm{font-size:16px;margin-bottom:.4em}
p{margin:0 0 1em;max-width:64ch}
strong{color:#fff;font-weight:600}.lite strong{color:var(--wp--preset--color--navy)}
.lede{font-size:clamp(16px,1.8vw,19px);line-height:1.5;color:#DEE8F4}
.lite .lede{color:var(--wp--preset--color--ink)}
.sm{font-size:13px;line-height:1.55;color:var(--wp--preset--color--mute)}
.lite .sm{color:#6B6754}
.eb{font-family:var(--f);font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--wp--preset--color--cy);margin:0 0 16px}
.eb.g{color:var(--wp--preset--color--gold)}.eb.gr{color:var(--wp--preset--color--gr)}
.lite .eb{color:var(--wp--preset--color--navy)}
/* No overflow:hidden here (unlike the mockup): .aur below extends 28% past
   this box on every side (inset:-28%), and a box's own overflow past its
   *bottom* edge creates scrollable overflow -- so overflow:hidden here would
   make every .sec its own scroll container, and the browser would resolve an
   in-page anchor click's "scroll into view" against that scroll container
   instead of the page. That is a real bug we hit: on this page it silently
   ate every #gap/#evidence/#readiness/#platform/#company/#cta nav click. The
   clipping .aur and .key need is instead scoped to .aurwrap, immediately
   below, which cannot itself overflow because its inset is 0. */
.sec{padding:clamp(54px,7.5vw,112px) 0;position:relative;isolation:isolate;perspective:1500px}
.lite{background:linear-gradient(172deg,var(--wp--preset--color--cream),var(--wp--preset--color--cream-alt));color:#4A4636}

/* headings run wide so they break over two lines, not four */
.head{max-width:min(1120px,96%);margin-bottom:clamp(28px,3.4vw,48px)}
.head h2{max-width:none}
.head p{max-width:74ch}
.head.ctr{margin-left:auto;margin-right:auto;text-align:center}
.head.ctr h2{max-width:52ch;margin-left:auto;margin-right:auto}
.head.ctr p{margin-left:auto;margin-right:auto}

/* ambience */
/* .aurwrap is exactly .sec's padding box (inset:0), so it is the same
   containing block .aur resolved its inset:-28% against when .sec itself did
   the clipping. Wrapping .aur here reproduces the mockup's clipped look
   pixel-for-pixel while keeping the clip local to this element instead of
   making the whole section a scroll container (see the note on .sec above). */
.aurwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aur{position:absolute;inset:-28%;z-index:0;pointer-events:none;filter:blur(80px);opacity:.8}
.aur i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.aur i:nth-child(1){width:50%;padding-bottom:42%;left:2%;top:4%;background:radial-gradient(circle,rgba(var(--cy-rgb),.28),transparent 68%);animation:fl1 28s ease-in-out infinite}
.aur i:nth-child(2){width:44%;padding-bottom:38%;right:2%;bottom:4%;background:radial-gradient(circle,rgba(122,107,255,.2),transparent 68%);animation:fl2 34s ease-in-out infinite}
.aur i:nth-child(3){width:40%;padding-bottom:34%;left:40%;top:32%;background:radial-gradient(circle,rgba(var(--gold-rgb),.14),transparent 68%);animation:fl3 40s ease-in-out infinite}
@keyframes fl1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,-4%,0) scale(1.12)}}
@keyframes fl2{0%,100%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-6%,5%,0) scale(.94)}}
@keyframes fl3{0%,100%{transform:translate3d(0,0,0) scale(.96)}50%{transform:translate3d(4%,-6%,0) scale(1.1)}}
.lite .aur{opacity:.32;filter:blur(100px)}
.lite .aur i:nth-child(1){background:radial-gradient(circle,rgba(var(--navy-rgb),.15),transparent 68%);mix-blend-mode:multiply}
.lite .aur i:nth-child(2){background:radial-gradient(circle,rgba(var(--gold-dk-rgb),.15),transparent 68%);mix-blend-mode:multiply}
.lite .aur i:nth-child(3){background:radial-gradient(circle,rgba(var(--cy-dk-rgb),.1),transparent 68%);mix-blend-mode:multiply}
.key{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(600px circle at var(--lx,50%) var(--ly,32%),rgba(var(--cy-rgb),.1),transparent 62%)}
.lite .key{background:radial-gradient(640px circle at var(--lx,50%) var(--ly,32%),rgba(var(--navy-rgb),.05),transparent 62%)}

/* cards */
/* No transform-style:preserve-3d here (nor on .fit below), unlike the mockup.
   Nothing between .sec (which owns the perspective) and .card preserves 3D, so
   the card's context has no perspective and every translateZ inside it is
   already orthographic -- the "lift" is inert whether the flag is set or not.
   What the flag does do is put the card's subtree in a 3D rendering context
   whose hit test Chromium resolves against document-space coordinates while
   painting it in section-space: on this page's tall #cta band that put the
   clickable area of all three call-to-action buttons 164px above the pixels
   they are drawn on. The mockup, whose #cta is half the height and which has
   no enquiry form under the cards, never drifted far enough to show it. */
.card{position:relative;border-radius:16px;padding:26px clamp(18px,2vw,28px);
  border:1px solid rgba(var(--cy-rgb),.2);will-change:transform;
  background:linear-gradient(162deg,rgba(var(--cy-rgb),.085),rgba(var(--deep-alt-rgb),.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 24px 56px -32px rgba(0,0,0,.9);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .45s;
  display:flex}
/* The cursor-following sheen. It was an empty <div class="spec"> in the
   markup, which the block editor rendered as a full-width "Group blocks
   together" placeholder -- 20 of them on the Home page, an empty core/group
   having nothing else to show. As a pseudo-element it is identical on screen
   and absent from the block tree. --mx/--my are set by site.js on the card
   itself, so the pseudo-element inherits them. */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 58%)}
.card:hover::after{opacity:1}
.card:hover{border-color:rgba(var(--cy-rgb),.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 44px 82px -34px rgba(0,0,0,.95),0 0 52px -24px var(--cyg)}
.card p{max-width:none}
/* The lift's translateZ pair went with the preserve-3d above: with no
   perspective in this subtree they never moved a pixel, and a translateZ
   anywhere in the card is what pulls the hit test out of alignment. */
.card .lift{flex:1;display:flex;flex-direction:column;width:100%}
.card.gold{border-color:rgba(var(--gold-rgb),.32);background:linear-gradient(162deg,rgba(var(--gold-rgb),.1),rgba(var(--deep-alt-rgb),.85))}
.card.gold:hover{border-color:rgba(var(--gold-rgb),.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 44px 82px -34px rgba(0,0,0,.95),0 0 52px -24px var(--goldg)}
.card.warn{border-color:rgba(var(--ember-rgb),.26);background:linear-gradient(162deg,rgba(var(--ember-rgb),.09),rgba(var(--deep-alt-rgb),.85))}
.card.warn:hover{border-color:rgba(var(--ember-rgb),.6);box-shadow:0 44px 82px -34px rgba(0,0,0,.95),0 0 52px -26px rgba(var(--ember-rgb),.5)}
.lite .card{background:linear-gradient(162deg,#fff,#FCFAF3);border-color:var(--wp--preset--color--line-l);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(var(--navy-rgb),.04),0 20px 44px -30px rgba(var(--navy-rgb),.28)}
.lite .card:hover{border-color:rgba(var(--gold-dk-rgb),.55);box-shadow:0 40px 72px -34px rgba(var(--navy-rgb),.3)}
.lite .card::after{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(var(--gold-dk-rgb),.1),transparent 58%)}

.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,28px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(15px,1.9vw,24px)}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1050px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:880px){.g2,.g3{grid-template-columns:1fr}}
@media(max-width:620px){.g5{grid-template-columns:1fr}}

.big{font-family:var(--f);font-size:clamp(30px,3.9vw,48px);font-weight:600;letter-spacing:-.035em;line-height:1;margin-bottom:12px;
  background:linear-gradient(148deg,#fff,var(--wp--preset--color--cy));-webkit-background-clip:text;background-clip:text;color:transparent}
.card.warn .big{background:linear-gradient(148deg,#fff,var(--wp--preset--color--ember));-webkit-background-clip:text;background-clip:text}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f);font-weight:600;font-size:15.5px;
  padding:15px 30px;border-radius:100px;text-decoration:none;overflow:hidden;will-change:transform;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* direct child only: the label span carries the sheen stacking context, but a
   visually-hidden "(opens in a new tab)" note nested inside it must keep the
   position:absolute that hides it -- position:relative leaves it inline, where
   width/height/overflow do not apply and the text renders at full size. */
.btn>span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .4s;
  background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 60%)}
.btn:hover::after{opacity:1}
.btn-p{background:linear-gradient(150deg,var(--wp--preset--color--cy-lo),var(--wp--preset--color--cy) 48%,var(--wp--preset--color--cy-dk));color:#03212B;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 30px -12px var(--cyg)}
.btn-p:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 52px -14px var(--cyg),0 0 72px -22px var(--cyg)}
.btn-g{border:1px solid rgba(var(--cy-rgb),.45);color:#fff;background:rgba(var(--cy-rgb),.06);backdrop-filter:blur(8px)}
.btn-g:hover{border-color:var(--wp--preset--color--cy);box-shadow:0 18px 42px -18px var(--cyg)}
.lite .btn-g{border-color:rgba(var(--navy-rgb),.28);color:var(--wp--preset--color--navy);background:#fff}
.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.ctr .btns{justify-content:center}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:120;transition:background .5s var(--ease),backdrop-filter .5s,box-shadow .5s}
nav.stuck{background:rgba(var(--abyss-rgb),.8);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 1px 0 rgba(255,255,255,.08)}
nav .wrap{display:flex;align-items:center;gap:30px;height:80px}
.brand img{height:40px;width:auto}
nav ul{list-style:none;display:flex;gap:26px;margin:0 0 0 auto;padding:0}
nav ul a{color:#B4C2DA;text-decoration:none;font-size:14.5px;position:relative;transition:color .35s;font-family:var(--f)}
nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--wp--preset--color--cy);box-shadow:0 0 10px var(--cyg);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
nav ul a:hover{color:#fff}nav ul a:hover::after{transform:scaleX(1)}
nav .btn{padding:11px 22px;font-size:14px}
/* the standalone .mag "Request Demo" button already covers desktop; the
   in-menu li.cta duplicate is mobile-menu-only (shown again below), so it
   doesn't get announced twice by a screen reader on desktop and its
   section-level .cta gradient doesn't bleed onto a visible desktop <li> */
nav ul li.cta{display:none}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger i{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .4s var(--ease),opacity .3s}
nav.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .burger i:nth-child(2){opacity:0}
nav.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1040px){
  .burger{display:block}
  nav .wrap{height:70px;gap:14px}
  nav>.wrap>.btn{display:none}
  nav ul{position:fixed;top:70px;left:0;right:0;flex-direction:column;gap:0;background:rgba(var(--abyss-rgb),.97);backdrop-filter:blur(18px);
    padding:8px var(--gut) 26px;transform:translateY(-14px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .35s,transform .4s var(--ease),visibility 0s .35s;
    border-bottom:1px solid var(--line);max-height:calc(100svh - 70px);overflow:auto}
  /* visibility:hidden (delayed on close, immediate on open) keeps the closed
     menu's links out of the tab order and the accessibility tree, on top of
     opacity/pointer-events -- a closed menu that only hides visually still
     traps keyboard focus and gets announced as present by a screen reader */
  nav.open ul{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .35s,transform .4s var(--ease)}
  nav ul li{border-bottom:1px solid var(--line)}
  nav ul a{display:block;padding:16px 0;font-size:16px}
  nav ul a::after{display:none}
  nav ul li.cta{display:block}
  nav ul li.cta a{color:var(--wp--preset--color--cy)}
}

/* subpages: nav is position:fixed, so any template without the hero's own
   130px top padding needs clearance or its first ~80px sit under the bar */
.subpage-main{padding-top:120px}
@media(max-width:1040px){.subpage-main{padding-top:100px}}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:130px 0 60px;
  background:radial-gradient(130% 95% at 74% 10%,#0E1C3E 0%,var(--wp--preset--color--abyss) 62%)}
.hero .wrap{width:100%}
.hero h1{max-width:15ch;margin-bottom:20px;background:linear-gradient(170deg,#fff 32%,#D3EEF7 64%,#9FE0EE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:52ch}
.arena{position:absolute;inset:0;z-index:1;pointer-events:none}
.arena canvas{width:100%;height:100%;display:block}
.arena::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,var(--wp--preset--color--abyss) 8%,rgba(var(--abyss-rgb),.86) 34%,rgba(var(--abyss-rgb),.18) 62%,transparent 82%)}
@media(max-width:900px){.arena::after{background:linear-gradient(180deg,rgba(var(--abyss-rgb),.5) 0%,rgba(var(--abyss-rgb),.9) 46%,var(--wp--preset--color--abyss) 78%)}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.6vw,54px);margin-top:clamp(32px,4vw,50px);padding-top:30px;border-top:1px solid var(--line)}
.stats b{display:block;font-family:var(--f);font-size:clamp(30px,4vw,50px);font-weight:600;letter-spacing:-.035em;line-height:1;margin-bottom:8px;color:#fff}
.stats b i{color:var(--wp--preset--color--cy);font-style:normal}
.stats span{font-size:14px;color:var(--wp--preset--color--mute)}
@media(max-width:780px){.stats{grid-template-columns:1fr;gap:22px}}

/* ===== GAP FIGURE ===== */
/* An SVG line chart: pathSays holds roughly flat (stated reasoning), pathDoes
   falls away (measured behaviour), and a wedge shades the widening gap
   between them. revealRect (inside clipPath#revealClip) wipes the figure in
   on scroll; dotSays/dotDoes travel the two paths via getTotalLength(). See
   site.js. Replaces the old .gapwrap/.gapscene layered-planes figure. */
.gapfig{margin-top:clamp(22px,3vw,40px)}
.glegend{display:flex;gap:clamp(16px,2.6vw,34px);flex-wrap:wrap;justify-content:center;margin-bottom:clamp(14px,2vw,24px);
  font-family:var(--f);font-size:clamp(11.5px,1.15vw,13.5px);color:var(--wp--preset--color--mute)}
.glegend b{display:inline-flex;align-items:center;gap:9px;font-weight:500}
.glegend i{width:20px;height:3px;border-radius:2px;display:block;flex:0 0 auto}
.gplot{position:relative}
.gplot svg{display:block;width:100%;height:auto;overflow:visible}
.gbadge{position:absolute;right:0;top:47%;transform:translateY(-50%);text-align:left;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease) .3s}
.in .gbadge{opacity:1}
.gbadge b{display:block;font-family:var(--f);font-size:clamp(11.5px,1.2vw,14px);font-weight:700;letter-spacing:.14em;color:var(--wp--preset--color--gold);white-space:nowrap}
.gbadge b{max-width:9ch;white-space:normal;line-height:1.3}
.gaxis{position:relative;height:clamp(30px,4vw,38px);margin-top:6px}
.gaxis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f);font-size:clamp(9.5px,1.05vw,12px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A6E4F2}
@media(max-width:640px){
  .gbadge{position:static;transform:none;margin-top:14px;text-align:center}
  .gbadge b{max-width:none}
  .gaxis span{letter-spacing:.06em}
}

/* ===== EVIDENCE CHART ===== */
.chart{margin-top:clamp(26px,3.4vw,44px)}
.chart svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px;font-family:var(--f);font-size:12.5px;color:var(--wp--preset--color--mute)}
.legend b{display:inline-flex;align-items:center;gap:9px;font-weight:500}
.legend i{width:16px;height:8px;border-radius:3px;display:block}
.findings{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(15px,1.9vw,24px);margin-top:clamp(26px,3.2vw,40px)}
@media(max-width:880px){.findings{grid-template-columns:1fr}}
.findings .v{font-family:var(--f);font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1;margin-bottom:10px}
.findings .a .v{color:var(--wp--preset--color--ember)}.findings .b .v{color:var(--wp--preset--color--gold)}.findings .c .v{color:var(--wp--preset--color--cy)}
.findings p{font-size:15px;margin:0}

/* steps: status pinned to the bottom */
.step .n{font-family:var(--f);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--gr);margin-bottom:11px;display:block}
.step p{font-size:14.8px;margin-bottom:18px}
/* Scoped to .step: the status line is a paragraph block here, not the
   mockup's <span>, so `.step p` (0,1,1) outranked a bare `.st` (0,1,0) and
   the label rendered at 14.8px with an 18px trailing margin instead of the
   designed 10.5px sitting flush at the card's foot. These two labels carry
   the palette's meaning -- cyan "Live", gold "In development" -- so their
   weight on the card is not cosmetic. */
.step .st{font-family:var(--f);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:block;color:var(--wp--preset--color--cy);margin:auto 0 0;padding-top:10px}
.step .st.dev{color:var(--wp--preset--color--gold)}

/* fit */
.fit{margin-top:6px}
.fit .row{display:grid;grid-template-columns:minmax(180px,34%) 1fr;gap:clamp(12px,2.4vw,34px);padding:17px clamp(12px,1.6vw,22px);
  border-bottom:1px solid var(--line);align-items:baseline;border-radius:11px;will-change:transform;
  transition:background .4s,transform .55s var(--ease),box-shadow .55s var(--ease)}
.fit .row:hover{background:rgba(var(--cy-rgb),.06)}
.fit .w{font-family:var(--f);font-weight:500;color:#fff;font-size:15.5px}
.fit .row p{margin:0;font-size:15.5px}
.fit .us{margin-top:12px;border-bottom:0;border:1px solid rgba(var(--cy-rgb),.42);
  background:linear-gradient(150deg,rgba(var(--cy-rgb),.15),rgba(var(--deep-alt-rgb),.9));padding:25px clamp(14px,1.8vw,24px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 36px 70px -32px rgba(0,0,0,.9)}
.fit .us:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 48px 88px -32px rgba(0,0,0,.95),0 0 60px -26px var(--cyg)}
.fit .us .w{color:var(--wp--preset--color--cy)}.fit .us p{color:#fff}
@media(max-width:700px){.fit .row{grid-template-columns:1fr;gap:5px}}

/* design-specific overrides that Gutenberg's core-block attributes can't
   express (max-width, text-align-as-caption, grid item alignment) — kept as
   real classes rather than inline style so the block's saved HTML matches
   its JSON attributes exactly; see task-8b-report.md */
.cap{margin-top:16px;text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}
.loop{margin-top:28px;max-width:min(940px,96%)}
.tight{max-width:20ch}
.g2.top{align-items:start}
#cta .lede{max-width:54ch}
.pstrip .p4p img{height:34px}

ul.tick{list-style:none;margin:12px 0 0;padding:0}
ul.tick li{position:relative;padding:9px 0 9px 24px;font-size:15.5px;border-bottom:1px solid var(--line)}
.lite ul.tick li{border-bottom-color:var(--wp--preset--color--line-l)}
ul.tick li:last-child{border-bottom:0}
ul.tick li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;border-radius:50%;background:var(--wp--preset--color--cy);box-shadow:0 0 9px var(--cyg)}
.gold ul.tick li::before{background:var(--wp--preset--color--gold);box-shadow:0 0 9px var(--goldg)}
.lite .gold ul.tick li::before{background:var(--wp--preset--color--gold-dk)}
.tlab{font-family:var(--f);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.gold .tlab{color:var(--wp--preset--color--gold)}.agent .tlab{color:var(--wp--preset--color--cy)}
.lite .gold .tlab{color:var(--wp--preset--color--gold-dk)}

.quote{font-family:var(--f);font-size:clamp(19px,2.5vw,30px);line-height:1.28;font-weight:500;color:#fff;max-width:28ch;
  padding-left:22px;border-left:2px solid var(--wp--preset--color--cy);margin:clamp(28px,3.4vw,44px) 0 0}
.lite .quote{color:var(--wp--preset--color--navy);border-left-color:var(--wp--preset--color--gold-dk)}

/* video + partner strip */
.vid{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--wp--preset--color--line-l);box-shadow:0 30px 64px -34px rgba(var(--navy-rgb),.4);background:#000}
.vid .ratio{position:relative;padding-top:56.25%}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pstrip{margin-top:20px;background:linear-gradient(150deg,#0C1826,#122038);border-radius:14px;padding:22px clamp(16px,2vw,26px);
  display:flex;align-items:center;justify-content:space-around;gap:clamp(16px,3vw,34px);flex-wrap:wrap}
.pstrip img{height:30px;width:auto;opacity:.9;transition:opacity .35s}
.pstrip img:hover{opacity:1}
.pstrip .imm{height:24px}
.pstrip .partners img{height:auto;width:100%;max-width:560px;opacity:.9}
/* The caption under the partner panel inherits p{max-width:64ch}, which
   stops it ~7px short of the panel's right edge and reads as misalignment. */
.pstrip + .sm{max-width:none}

/* credibility */
.credgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:8px}
.credgrid .c{background:var(--wp--preset--color--deep-alt);padding:26px 22px;transition:background .4s;display:flex;flex-direction:column}
.credgrid .c:hover{background:#0E1B30}
.credgrid .mark{height:46px;display:flex;align-items:center;margin-bottom:18px}
/* height, not max-height (unlike the mockup): every logo here is taller than
   its cap, so the two are visually identical once loaded -- but before that,
   an unloaded <img> that is a flex item with both width and height computing
   to "auto" (max-height is a ceiling, not a used size) only gets a correctly
   sized placeholder box from its width/height attributes' aspect ratio when
   WordPress has also added sizes="auto" to it, which core only does when the
   image has a matching srcset candidate. NVIDIA's attachment has none (its
   only generated size is a hard-cropped 150x150 thumbnail, the wrong aspect
   ratio to offer), so it never gets sizes="auto" and, under max-height, sat
   at 0x0 -- collapsing the grid cell -- for the whole time it was off-screen
   and lazy-loaded. A definite height sidesteps the auto-sizes dependency
   entirely: width:auto can resolve from the aspect ratio immediately. */
.credgrid .mark img{height:42px;width:auto}
.credgrid .mark.nv img{height:46px;border-radius:5px}
/* Was `.credgrid b` / `.credgrid span`, when this text lived in a
   core/html block. It is card copy, so it is now two paragraph blocks a
   person can edit in wp-admin; the classes carry the same styling. */
.credgrid .cname{display:block;font-family:var(--f);font-size:15px;color:#fff;margin:0 0 5px}
.credgrid .cdesc{font-size:14px;color:var(--wp--preset--color--mute);margin:0}
@media(max-width:900px){.credgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.credgrid{grid-template-columns:1fr}}

.cta{background:linear-gradient(160deg,#152449,var(--wp--preset--color--deep) 62%,var(--wp--preset--color--abyss))}
/* --mute (#7A8CA3) was picked against the abyss ground, where it reads
   5.8:1. The #cta band's gradient starts at #152449, and against that it
   falls to 4.42:1 -- under AA's 4.5 for body text. Nothing else on the page
   puts small print on a ground this light, so this band's small print takes
   one step lighter (5.7:1 at the worst sampled pixel) rather than the whole
   token moving. The enquiry form's own labels carry the same #93A5BD inline,
   next to the rest of their inline styling. */
.cta .sm{color:#93A5BD}
footer{background:#02050E;padding:44px 0 38px;border-top:1px solid var(--line);position:relative;z-index:3}
.fbar{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
footer p{font-size:13.5px;color:var(--wp--preset--color--mute);margin:0;max-width:60ch}
.flinks{display:flex;gap:26px;flex-wrap:wrap}
.flinks a{color:var(--wp--preset--color--mute);text-decoration:none;font-size:13.5px;font-family:var(--f);transition:color .3s}
.flinks a:hover{color:var(--wp--preset--color--cy)}

/* privacy policy page: long-form legal text needs a narrower measure than
   the marketing sections' 1220px .wrap, and the numbering it inherits from
   its source (nested "N.N" paragraphs under numbered headings) needs a
   plain, undecorated list rather than the marketing page's cyan-dot
   ul.tick — this is reference text, not a feature list. Both are scoped to
   .privacy so neither rule can reach the homepage or any other page.
   Contrast: this page's section gradient runs navy (top) to abyss
   (bottom) -- tx (#C3D0E0) measures 8.72:1 on navy and 12.78:1 on abyss,
   both comfortably past AA's 4.5:1 (see task-11-report.md for the full
   figures, including the white-on-navy/abyss headings). */
.privacy .narrow{max-width:70ch;margin-left:auto;margin-right:auto}
.privacy ul.wp-block-list{margin:0 0 1em;padding-left:1.3em}
.privacy ul.wp-block-list li{margin:0 0 .4em}

.rise{opacity:0;transform:translate3d(0,30px,0);transition:opacity .9s var(--ease),transform 1.05s var(--ease)}
.rise.in{opacity:1;transform:none}
.fade{opacity:0;transition:opacity .9s var(--ease) .45s}.in .fade{opacity:1}
.pop{opacity:0;transform:scale(.55);transform-origin:center;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.in .pop{opacity:1;transform:scale(1)}
.in .pop.d1{transition-delay:.9s}.in .pop.d2{transition-delay:1.15s}.in .pop.d3{transition-delay:1.4s}
.grow{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease)}
.in .grow{transform:scaleX(1)}
.in .grow.g2d{transition-delay:.25s}.in .grow.g3d{transition-delay:.5s}
:focus-visible{outline:3px solid var(--wp--preset--color--cy);outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto}
  /* the universal rule above can't outrank html{scroll-behavior:smooth} (an
     element selector beats *, regardless of source order) — override it at
     matching specificity so reduced-motion visitors actually lose smooth
     anchor scrolling instead of only losing transitions/animations. */
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}.fade,.pop{opacity:1;transform:none}.grow{transform:none}}

/* ===== TEAM PAGE (/team/) ===== */
/* Twelve selectors new to this page: .thero, .tgrid, .pcard, .pphoto,
   .pbody, .prole, .plinks, .plink, .agrid, .acard, .aphoto, .about. Built
   from the mockup's own team-v10.html CSS, using this file's existing
   custom properties (the --*-rgb companions, --cyg/--goldg, --f, --ease)
   rather than the mockup's separate :root palette. Two deliberate
   omissions from the mockup, in the same spirit as this file's other
   documented divergences:

   1. No `.ac-solo`/`.ac-solo.mix`/`@keyframes sheen` — the mockup's
      animated, whole-heading gradient-sheen treatment for "The core team"
      and "Pioneers in AI, science and global impact". Every other heading
      on this site (including this page's own hero h1 and about-band h2)
      uses one of two established techniques: a static background-clip
      gradient (`.hero h1`, reused below as `.thero h1`) or a plain white
      heading with a `.ac` accent span (`h2 .ac`, reused in the about
      band). Introducing a third, animated heading treatment for two
      headings would mean a 13th and 14th new selector plus a new
      `@keyframes` this page's brief didn't ask for; both headings render
      as plain `h2` instead, which is the same choice already made for
      every other section heading on the homepage.
   2. `.thero h1`'s gradient reuses `.hero h1`'s static three-stop
      version rather than porting the mockup's own animated one, for the
      same reason.

   Portrait `<img>`s sit inside `.pphoto`/`.aphoto`, which need a definite
   height for the mockup's `img{width:100%;height:100%;object-fit:cover}`
   circle-crop to resolve (percentage height needs a sized ancestor).
   team-core.php and team-advisors.php wrap each portrait in a real
   `wp:image` block for wp-admin editability (see those files), which
   inserts a `<figure>` between `.pphoto`/`.aphoto` and the `<img>` that
   the mockup's own bare-`<img>` markup never had — `.pphoto
   .wp-block-image`/`.aphoto .wp-block-image` below give that figure
   `width:100%;height:100%` so the percentage sizing still resolves
   against `.pphoto`/`.aphoto` exactly as the mockup intended. */

.thero{padding:clamp(140px,15vw,190px) 0 clamp(20px,2.4vw,32px);
  background:radial-gradient(120% 90% at 76% 6%,#0E1C3E 0%,var(--wp--preset--color--abyss) 62%)}
.thero h1{max-width:14ch;margin-bottom:14px;background:linear-gradient(170deg,#fff 32%,#D3EEF7 64%,#9FE0EE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.thero .tag{font-family:var(--f);font-size:clamp(18px,2.2vw,26px);font-weight:500;color:var(--wp--preset--color--gold);letter-spacing:-.02em;margin:0 0 22px}

.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.1vw,26px)}
@media(max-width:1000px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tgrid{grid-template-columns:1fr}}
/* padding-top rather than a margin on .pphoto: WordPress emits
   `:root :where(.is-layout-flow) > :first-child{margin-block-start:0}`,
   which ties .pphoto on specificity (0,1,0) and wins on source order, so
   the photo sat flush against the card's top edge. .acard avoids this by
   padding the card itself, which is what this now matches. */
.pcard{position:relative;border-radius:18px;overflow:hidden;padding-top:24px;border:1px solid rgba(var(--cy-rgb),.2);
  background:linear-gradient(162deg,rgba(var(--cy-rgb),.08),rgba(var(--deep-alt-rgb),.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 56px -32px rgba(0,0,0,.9);
  display:flex;flex-direction:column;will-change:transform;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .45s}
.pcard:hover{border-color:rgba(var(--cy-rgb),.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 44px 82px -34px rgba(0,0,0,.95),0 0 52px -26px var(--cyg)}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;z-index:4;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 58%)}
.pcard:hover::after{opacity:1}
.pphoto{position:relative;width:clamp(118px,11vw,150px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  margin:0 clamp(18px,2vw,26px);
  border:1px solid rgba(var(--cy-rgb),.3);box-shadow:0 0 0 6px rgba(var(--cy-rgb),.06);
  background:linear-gradient(160deg,#0E1B30,#16224A)}
.pphoto .wp-block-image{width:100%;height:100%;margin:0;display:block}
.pphoto img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 1.1s var(--ease)}
.pcard:hover .pphoto img{transform:scale(1.06)}
.pbody{padding:18px clamp(18px,2vw,26px) 24px;display:flex;flex-direction:column;flex:1}
.pbody .prole{font-family:var(--f);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--gold);margin:0 0 9px}
.pbody p{font-size:14.5px;line-height:1.6;color:#B3C0D6;margin:0 0 18px;max-width:none}
.plinks{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto}
p.plink{display:inline-flex;align-items:center;font-family:var(--f);font-size:12.5px;font-weight:500;
  padding:8px 15px;border-radius:100px;margin:0;max-width:none;border:1px solid rgba(var(--cy-rgb),.3);
  background:rgba(var(--cy-rgb),.07);transition:border-color .35s,background .35s,transform .4s var(--ease)}
.plink a{color:#D6E3F3;text-decoration:none;transition:color .35s}
.plink:hover{border-color:var(--wp--preset--color--cy);background:rgba(var(--cy-rgb),.16);transform:translateY(-2px)}
.plink:hover a{color:#fff}

.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,20px)}
@media(max-width:1080px){.agrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.agrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.agrid{grid-template-columns:1fr}}
.acard{position:relative;border-radius:16px;padding:24px 20px;text-align:center;border:1px solid rgba(var(--gold-rgb),.2);
  background:linear-gradient(162deg,rgba(var(--gold-rgb),.07),rgba(var(--deep-alt-rgb),.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s}
.acard:hover{transform:translateY(-6px);border-color:rgba(var(--gold-rgb),.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 36px 68px -32px rgba(0,0,0,.95),0 0 46px -24px var(--goldg)}
.aphoto{width:96px;height:96px;border-radius:50%;overflow:hidden;margin-bottom:16px;border:1px solid rgba(var(--gold-rgb),.35);
  box-shadow:0 0 0 5px rgba(var(--gold-rgb),.07)}
.aphoto .wp-block-image{width:100%;height:100%;margin:0;display:block}
.aphoto img{width:100%;height:100%;object-fit:cover;object-position:center top}
.acard p{font-size:13.5px;line-height:1.55;color:#A9B7CF;margin:0 0 16px;max-width:none}
.acard p.plink{margin-top:auto;font-size:12px;padding:7px 14px;border-color:rgba(var(--gold-rgb),.32);background:rgba(var(--gold-rgb),.08)}
.acard p.plink:hover{border-color:var(--wp--preset--color--gold);background:rgba(var(--gold-rgb),.18)}

.about{background:linear-gradient(172deg,var(--wp--preset--color--cream),var(--wp--preset--color--cream-alt));color:#4A4636}
.about h2{color:var(--wp--preset--color--navy)}
.about h2 .ac{color:var(--wp--preset--color--gold-dk)}
.about .eb{color:var(--wp--preset--color--gold-dk)}
.about .lede{color:var(--wp--preset--color--ink)}
.about .aur{opacity:.3;filter:blur(100px)}
.about .aur i:nth-child(1){background:radial-gradient(circle,rgba(var(--navy-rgb),.15),transparent 68%);mix-blend-mode:multiply}
.about .aur i:nth-child(2){background:radial-gradient(circle,rgba(var(--gold-dk-rgb),.15),transparent 68%);mix-blend-mode:multiply}
.about .aur i:nth-child(3){background:radial-gradient(circle,rgba(var(--cy-dk-rgb),.1),transparent 68%);mix-blend-mode:multiply}
.about .key{background:radial-gradient(640px circle at var(--lx,50%) var(--ly,32%),rgba(var(--navy-rgb),.05),transparent 62%)}
.about .btn-g{border-color:rgba(var(--navy-rgb),.24);color:var(--wp--preset--color--navy);
  background:linear-gradient(168deg,#FFFFFF 0%,#FBF9F2 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(var(--navy-rgb),.06),
             0 2px 4px rgba(var(--navy-rgb),.07),0 10px 22px -10px rgba(var(--navy-rgb),.22),0 24px 44px -18px rgba(var(--navy-rgb),.2)}
.about .btn-g:hover{border-color:var(--wp--preset--color--gold-dk);transform:translateY(-4px);
  box-shadow:inset 0 1px 0 #fff,0 4px 8px rgba(var(--navy-rgb),.09),0 18px 34px -12px rgba(var(--navy-rgb),.28),0 34px 60px -20px rgba(var(--gold-dk-rgb),.35)}
.about .btn-p{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(3,33,43,.18),
             0 2px 5px rgba(var(--navy-rgb),.12),0 12px 26px -10px rgba(var(--cy-dk-rgb),.55),0 28px 52px -18px rgba(var(--cy-dk-rgb),.45)}
.about .btn-p:hover{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 12px rgba(var(--navy-rgb),.14),0 22px 42px -12px rgba(var(--cy-dk-rgb),.6),0 40px 70px -20px rgba(var(--cy-dk-rgb),.5)}
.about .btns{margin-top:34px}

/* ===== AI PARTNERS BAND (11th section, after #cta) ===== */
/* Named .ai-partners, not the mockup's bare .partners -- that name is
   already taken in this theme by elowyn.php's combined FRAG/Polygon/
   Immutable/Playing-for-the-Planet image (className "partners", styled via
   the pre-existing ".pstrip .partners img" rule above). Reusing it here
   would leak this band's padding onto that unrelated image. */
.ai-partners{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)}
.prow{display:flex;align-items:center;justify-content:center;gap:clamp(26px,5vw,68px);flex-wrap:wrap;margin-top:26px}
.prow .wp-block-image{margin:0}
.prow img{height:clamp(24px,2.4vw,32px);width:auto;opacity:.88;transition:opacity .4s,transform .5s var(--ease)}
.prow img:hover{opacity:1;transform:translateY(-3px)}
.prow .lift-dark img{filter:brightness(1.55) saturate(1.15)}
@media(max-width:620px){.prow{gap:24px}}