@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter-var.woff2') format('woff2-variations'),url('/assets/fonts/Inter-var.woff2') format('woff2');}@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/JetBrainsMono-var.woff2') format('woff2-variations'),url('/assets/fonts/JetBrainsMono-var.woff2') format('woff2');}

/* ============================================================================
   THEME. The palette is semantic and flips: light is the default on bare :root,
   dark is an override, and a visitor on system-dark with no stored preference
   gets dark too.

   Worst-case contrast is --ink-3 on --surface-2: 5.15:1 light, 7.39:1 dark.

   Code blocks stay dark in both themes, so they carry their own --code /
   --code-ink pair.
   ============================================================================ */
:root{
  /* ground - light */
  --ground:#F6F7F9; --surface:#FFFFFF; --surface-2:#EEF1F5; --surface-3:#E2E7EE;

  /* ink - light */
  --ink:#0D1219; --ink-2:#3E4856; --ink-3:#5B6675;

  /* console surfaces - light. The shell and panels go white; only the code
     listing and the diff stay dark. */
  --panel:#FFFFFF; --console:#FFFFFF; --tab-on:#ECEFF4; --row-hi:#FBF4E6;
  --col-hi:#EFF4FB; --dot:#C9D0D9; --track:#E2E7EE; --grain:rgba(76,90,130,.11);

  /* spectral ramp, FILL tier - gradients, glows, large display. Not for body text. */
  --indigo:#3B1E7A; --violet:#6D28D9; --blue:#2563EB; --sky:#0EA5E9; --amber:#F59E0B;

  /* spectral ramp, TEXT tier - light. Darkened from the dark-theme tints, which
     sit at 1.5-2:1 on white and are unreadable there. */
  --violet-t:#6D28D9; --blue-t:#1D4ED8; --sky-t:#0369A1; --amber-t:#92400E;
  --cyan-t:#0E7490;
  --ok:#166534; --alert:#B91C1C;

  --spectrum:linear-gradient(90deg,#3B1E7A,#6D28D9,#2563EB,#0EA5E9);

  /* lines - light */
  --rule:#E3E7ED; --rule-2:#D1D8E0; --rule-hi:#B6C0CC;

  /* code blocks - identical in both themes */
  --code:#0E1420; --code-ink:#C8D2E0; --code-ink-hi:#FFFFFF; --gutter:#8A93A6;
  --code-add:#8FDCB4; --code-del:#F0A8A8;
  --plate:#F2F5FA;
  --bar-bg:rgba(246,247,249,.38); --bar-bg-2:rgba(255,255,255,.94);
  --bloom-1:.07; --bloom-2:.06; --bloom-3:.05;

  --shell:min(1440px,92vw);
  --bar:72px;
  --r:14px; --r-sm:10px;

  --ease:cubic-bezier(.85,0,0,1);
  --t:.55s;

  /* TYPE SCALE. Every size resolves to one of these eight; --fs-label is the floor. */
  --fs-display:clamp(2.9rem,4.8vw,4rem);   /* 46-64  page title            */
  --fs-h2:clamp(2.4rem,3.5vw,3.125rem);    /* 38-50  section heading       */
  --fs-h3:2rem;                            /* 32     sub heading           */
  --fs-h4:1.625rem;                        /* 26     card heading          */
  --fs-lead:1.5625rem;                     /* 25     lead paragraph        */
  --fs-body:1.4375rem;                     /* 23     body                  */
  --fs-sm:1.25rem;                         /* 20     secondary             */
  --fs-label:1.125rem;                     /* 18     mono labels. THE FLOOR */

  /* --ink-4 aliases --ink-3 because a lighter step would miss 4.5:1 on --surface-2 */
  --ink-4:var(--ink-3);
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 20px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 18px/1.72 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

/* no balance: a heading breaks only when it runs out of room, and pretty keeps a lone word off the last line */
h1,h2,h3,h4{margin:0;font-family:Inter,sans-serif;font-weight:700;line-height:1.02;text-wrap:pretty}
.d1{font-size:var(--fs-display);letter-spacing:-.028em;line-height:1.12}
.d2{font-size:var(--fs-h2);letter-spacing:-.026em;line-height:1.14}
.d3{font-size:var(--fs-h3);letter-spacing:-.02em;font-weight:700;line-height:1.28}
.d4{font-size:var(--fs-h4);letter-spacing:-.014em;font-weight:700;line-height:1.4}
p{margin:0 0 1.1em;max-width:64ch;text-wrap:pretty;color:var(--ink-2)}
/* Text is justified everywhere and words are never hyphenated. A justified line ends on
   the left, so centred blocks keep their last line centred. */
p,blockquote,dd,figcaption{text-align:justify;text-justify:inter-word;-webkit-hyphens:manual;hyphens:manual}
/* headings set as paragraphs are not prose: one or two lines, never stretched */
.shead p{text-align:center}
.head p,.hstage .stage p,.dv-note,.shead p{text-align-last:center}
p.ragged{text-align:start;text-align-last:auto}
.head p.ragged,.shead p.ragged,.recrow p.ragged,.lhead p.ragged{text-align:center}
/* phones only: at 25-30 characters a line, justifying opens wide gaps between words,
   which is the opposite of what it is for, so text there runs ragged-right */
@media (max-width:560px){
  p,blockquote,dd,figcaption,.head .lead{text-align:start;text-align-last:auto}
  .head p,.head .lead,.shead p{text-align:center}
}
p:last-child{margin-bottom:0}
/* a lead takes the width its column gives it; columns, not caps, set the measure */
.lead{font-size:var(--fs-lead);line-height:1.7;color:var(--ink-2);max-width:none}

.mono{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.eyebrow{display:inline-flex;align-items:center;gap:14px;color:var(--violet-t);margin:0 0 18px;
  font-size:clamp(1.375rem,1.35vw,1.625rem);font-weight:600;letter-spacing:.12em}
.eyebrow::before{width:34px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--spectrum);border-radius:2px}

/* Gradient type. -webkit-text-fill-color:transparent hides the real colour, so a
   fallback colour is set first for any engine that does not support the clip. */
.grad{
  color:var(--violet-t);
  background:var(--spectrum);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{-webkit-text-fill-color:currentColor;background:none;color:var(--violet-t)}
}

/* ---- dark ---------------------------------------------------------------- */
:root[data-theme="dark"]{
  --ground:#050C1B; --surface:#0C1528; --surface-2:#131E35; --surface-3:#1B2844;
  --ink:#FFFFFF; --ink-2:#C6C4D6; --ink-3:#ABA8C0;
  --panel:#120F22; --console:#0C0A17; --tab-on:#1A1630; --row-hi:#1E1733;
  --col-hi:#181430; --dot:#2A2440; --track:#221D3A; --grain:rgba(160,150,230,.07);
  --violet-t:#A78BFA; --blue-t:#7CA8FF; --sky-t:#38BDF8; --amber-t:#FBBF24;
  --cyan-t:#22D3EE;
  --ok:#5FBE8E; --alert:#E08585;
  --rule:#241F3D; --rule-2:#332C52; --rule-hi:#443A68;
  --gutter:#8A7EB5;
  --bar-bg:rgba(5,12,27,.38); --bar-bg-2:rgba(8,7,15,.92);
  --bloom-1:.28; --bloom-2:.22; --bloom-3:.16;
}
/* System-dark, for a visitor who has not chosen. Guarded so an explicit light
   choice still wins. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#050C1B; --surface:#0C1528; --surface-2:#131E35; --surface-3:#1B2844;
    --ink:#FFFFFF; --ink-2:#C6C4D6; --ink-3:#ABA8C0;
    --panel:#120F22; --console:#0C0A17; --tab-on:#1A1630; --row-hi:#1E1733;
    --col-hi:#181430; --dot:#2A2440; --track:#221D3A; --grain:rgba(160,150,230,.07);
    --violet-t:#A78BFA; --blue-t:#7CA8FF; --sky-t:#38BDF8; --amber-t:#FBBF24;
    --cyan-t:#22D3EE;
    --ok:#5FBE8E; --alert:#E08585;
    --rule:#241F3D; --rule-2:#332C52; --rule-hi:#443A68;
    --gutter:#8A7EB5;
    --bar-bg:rgba(5,12,27,.38); --bar-bg-2:rgba(8,7,15,.92);
    --bloom-1:.28; --bloom-2:.22; --bloom-3:.16;
  }
}

::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet-t);outline-offset:3px;border-radius:3px}
input,textarea{caret-color:var(--violet-t)}


/* ---- top bar ------------------------------------------------------------ */
.top{
  position:fixed;inset:0 0 auto;z-index:80;height:var(--bar);
  background:var(--bar-bg);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease);
}
/* see-through glass in both themes. The text takes the theme's ink, except over the dark
   hero in light mode, where dark text would not read: there the glass tints dark and the
   text turns white (.on-dark, set in the script). */
.top,.top.scrolled{backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:color-mix(in srgb,var(--rule) 60%,transparent)}
.top.on-dark:not(.open){background:rgba(5,12,27,.38);border-bottom-color:rgba(255,255,255,.08)}
.top.on-dark:not(.open) .brand .word{color:#fff}
.top.on-dark:not(.open) .nav > li > a,.top.on-dark:not(.open) .nav > li > button{color:rgba(255,255,255,.88)}
.top.on-dark:not(.open) .nav > li > a:hover,.top.on-dark:not(.open) .nav > li > button:hover{color:#fff}
.top.on-dark:not(.open) .themed,.top.on-dark:not(.open) .lang > button{color:#fff;border-color:rgba(255,255,255,.35)}
.top.on-dark:not(.open) .srch input{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.top.on-dark:not(.open) .srch input::placeholder{color:rgba(255,255,255,.7)}
.top.on-dark:not(.open) .srch svg{stroke:rgba(255,255,255,.8)}
.top.on-dark:not(.open) .burger{background:transparent;border-color:rgba(255,255,255,.35)}
.top.on-dark:not(.open) .burger span,.top.on-dark:not(.open) .burger span::before,
.top.on-dark:not(.open) .burger span::after{background:#fff}
/* same gutters as the full-width hero, so the bar and the first screen share edges */
.top .in{width:100%;padding:0 clamp(24px,4vw,64px);height:100%;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}

/* ---- the brand mark ------------------------------------------------------ */
/* The hover is the "this takes you home" affordance: the mark turns and a spectrum rule
   draws under the name. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand img{height:30px;width:auto;flex:0 0 auto;transition:transform var(--t) var(--ease)}
.brand .word{
  font-family:Inter,sans-serif;font-weight:700;font-size:var(--fs-body);letter-spacing:-.02em;
  white-space:nowrap;color:var(--ink);position:relative;padding-bottom:2px;
}
.brand .word::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--spectrum);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease)}
.brand:hover img,.brand:focus-visible img{transform:rotate(-12deg) scale(1.08)}
.brand:hover .word::after,.brand:focus-visible .word::after{transform:scaleX(1)}

/* the CTA never shrinks, so its label is never cut; the nav tightens instead */
.top .cta{flex:none;padding:12px 22px;font-size:var(--fs-sm)}
/* laptop widths: the bar tightens before anything is allowed to run off the edge */
@media (max-width:1340px){
  .top .in{gap:14px}
  .nav{gap:12px}
  .brand .word{font-size:var(--fs-sm)}
  .top .cta{padding:10px 16px}
}

/* ---- nav + products dropdown -------------------------------------------- */
.nav{display:flex;gap:clamp(12px,1.6vw,24px);margin:0 0 0 auto;padding:0;align-items:center;height:100%}
.nav > li{list-style:none;height:100%;display:flex;align-items:center;position:relative}
.nav a,.nav button{
  text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color .22s var(--ease);
}
.nav a:hover,.nav button:hover,.nav a[aria-current="page"]{color:var(--ink)}
.top{transition:transform .35s var(--ease),border-color .3s var(--ease)}
.top.hide{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.top{transition:none}}
.nav .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.nav li.open .caret{transform:rotate(225deg) translateY(-2px)}

.menu{position:absolute;top:100%;left:-18px;padding-top:12px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:70}
.nav>li.open .menu{opacity:1;visibility:visible;transform:none}
.menu{width:max-content}
/* the rightmost menu opens leftwards so it stays on screen */
.nav > li.menu-end .menu{left:auto;right:0}
.mcol li a{white-space:nowrap}
.msheet{display:grid;gap:clamp(16px,2vw,28px);
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:18px 20px;box-shadow:0 30px 64px -22px rgba(0,0,0,.85)}
.msheet{grid-template-columns:minmax(240px,max-content)}
.mcol{display:grid;gap:6px;align-content:start}
.mcol ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mcol li a{display:block;padding:8px 10px;border-radius:var(--r-sm);border-left:2px solid transparent;
  transition:background .16s,border-color .16s}
.mcol li a:hover{background:var(--surface-2);border-left-color:var(--violet-t)}
.menu .n{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink);letter-spacing:-.012em}

.burger{
  display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--rule-2);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--surface);border-top:1px solid var(--rule);padding:76px 0 32px;position:relative}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--spectrum)}
.foot .in{width:var(--shell);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.foot-brand{margin-bottom:18px;display:inline-flex}
.foot-brand img{height:38px;width:auto}
.foot .tag{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);max-width:34ch}
.foot .tag-cred{margin:14px 0 0;font-size:var(--fs-label);letter-spacing:.12em;color:var(--violet-t)}
.foot h4{color:var(--ink-3);margin-bottom:14px;font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{text-decoration:none;font-size:var(--fs-sm);color:var(--ink-2);transition:color .22s var(--ease)}
.foot ul a:hover{color:var(--violet-t)}
.foot-base{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3)}


main{padding-top:var(--bar)}
.sec{padding:clamp(48px,6vh,80px) 0;position:relative}
.sec > .in{width:var(--shell);margin:0 auto;position:relative;z-index:1}
.sec.tight{padding:clamp(40px,6vh,76px) 0}
/* a faint dot lattice so the ground is not a flat fill */
.b-ground{background:var(--ground) radial-gradient(var(--grain) 1px,transparent 1.2px) 0 0/24px 24px}
.b-surface{background:var(--surface)}
.b-deep{background:linear-gradient(180deg,var(--ground),var(--surface-2))}
/* in dark mode every band is the hero's navy, so nothing reads as a separate strip */
:root[data-theme="dark"] .b-surface,:root[data-theme="dark"] .b-deep{
  background:var(--ground) radial-gradient(var(--grain) 1px,transparent 1.2px) 0 0/24px 24px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .b-surface,:root:not([data-theme="light"]) .b-deep{
  background:var(--ground) radial-gradient(var(--grain) 1px,transparent 1.2px) 0 0/24px 24px}}

/* a hairline spectral divider between bands */
.edge{position:relative}
/* no rule on section tops: under the header's own border it would show a double line */

/* centred, and wide enough not to break a short headline */
.lhead{display:grid;gap:14px;justify-items:center;text-align:center;margin:0 0 clamp(28px,4vh,44px)}
.lhead .eyebrow{margin:0}
.lhead-t{margin:0;font-size:var(--fs-display);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
.lhead-d{margin:0;max-width:62ch;color:var(--ink-3);text-align:center;text-align-last:center}
/* the Products overview runs the full width of the page */
#products .lhead-d{max-width:none;width:100%;text-align:justify;text-wrap:pretty}
/* homepage section heading: title > subtitle > description */
.shead{text-align:center;margin:0 auto clamp(36px,5vh,60px);display:grid;justify-items:center;gap:12px}
.shead-t{font-size:min(var(--fs-display),3.15vw);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0;color:var(--ink)}
@media (min-width:901px){.shead-t{white-space:nowrap}}
@media (max-width:900px){.shead-t{font-size:var(--fs-h2)}}

.shead-d{font-size:var(--fs-body);line-height:1.6;color:var(--ink-3);margin:6px 0 0;max-width:68ch}
.head{max-width:none;margin:0 auto clamp(32px,4.5vh,52px);text-align:center;
  display:grid;justify-items:center}
.head .lead{margin-top:18px;margin-left:auto;margin-right:auto;text-align:justify;text-align-last:center;max-width:none}
/* stacked and centred, so a lone link never sits out in an empty right half */

/* ---- Vulcan Ventura program graphics --------------------------------------- */
/* the diagrams carry small lettering, so they show whole and no wider than their native
   960px, where they are still sharp */
.vfig{margin:0 auto;max-width:960px;border-radius:var(--r);overflow:hidden;border:1px solid var(--rule)}
.vfig img{display:block;width:100%;height:auto}
#vulcan .card .shot{aspect-ratio:2/1}

/* ---- side tabs: Request a demo / Request a callback --------------------------- */
/* one form; its heading follows the ask */
.side-cta{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:grid;gap:8px;justify-items:end;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease)}
.side-cta.show{opacity:1;pointer-events:auto}
.side-cta a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.02em;padding:12px 16px 12px 14px;
  border-radius:10px 0 0 10px;box-shadow:0 12px 30px -14px rgba(0,0,0,.5);
  transition:transform .25s var(--ease)}
.side-cta a:hover{transform:translateX(-4px)}
.side-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.side-cta .sc-call{background:var(--violet);color:#fff}
@media (max-width:820px){
  .side-cta{top:auto;bottom:14px;right:14px;transform:none;grid-auto-flow:column}
  .side-cta a{border-radius:999px}
  .side-cta a:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.side-cta,.side-cta a{transition:none}}

/* ---- cookie notice ------------------------------------------------------- */
.cookie[hidden]{display:none}
.cookie{position:fixed;left:16px;bottom:16px;z-index:90;max-width:min(430px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:18px 20px;box-shadow:0 22px 50px -18px rgba(0,0,0,.45);display:grid;gap:14px}
.cookie p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);margin:0;max-width:none}
.cookie-act{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:10px 18px;font-size:var(--fs-label)}

/* ---- sections that fill the window ------------------------------------------ */
/* every section is one screen, so the next never shows at the bottom of the current one.
   No scroll snapping: settling on sections gets in the way of ordinary scrolling. */
.full-screen main > section{min-height:calc(100svh - var(--bar))}
main > section{display:flex;flex-direction:column;justify-content:center}
/* a page header and the section after it read as one block, not two padded bands */
main > section.tight:not(.hero){padding-bottom:clamp(20px,3vh,36px)}
main > section.tight:not(.hero) + section{padding-top:clamp(20px,3vh,36px)}
main > section.ctarow{min-height:0;padding:clamp(36px,5vh,56px) 0}
/* the certifications band is short; a full screen would leave a large blank around it */
.full-screen main > section#partners{min-height:0}
/* the hero spans its full height: headline in the dark band at the top, the one-liner,
   buttons and stage strip in the dark band at the bottom, the picture in between */
main > section.hero.wide{flex-direction:row;justify-content:stretch;align-items:stretch}
.hero.wide > .hwrap{flex:1}
.ctarow-in{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.ctarow-in h2{margin:0 0 6px}
.ctarow-in p{margin:0;color:var(--ink-2);font-size:var(--fs-body);max-width:none}
.ctarow-in .btnrow{margin:0}
main > section > .in{width:var(--shell)}
@media (max-width:820px){main > section{min-height:0}}

/* ---- the problem, and our answer ------------------------------------------ */
.pa{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(20px,3vw,48px);
  align-items:stretch}
.pa-side{padding:clamp(28px,3.2vw,48px);border-radius:var(--r);border:1px solid var(--rule);background:var(--ground)}
.pa-side p{margin:14px 0 0;font-size:var(--fs-h3);font-weight:600;line-height:1.35;color:var(--ink);
  letter-spacing:-.012em;max-width:none}
.pa-k{font-size:var(--fs-sm);letter-spacing:.14em;font-weight:700}
.pa-prob .pa-k{color:var(--alert)}
.pa-ans .pa-k{color:var(--ok)}
.pa-prob{border-top:3px solid var(--alert)}
.pa-ans{border-top:3px solid var(--ok)}
.pa-ar{align-self:center;font-size:var(--fs-h2);color:var(--violet-t)}
.pa{margin-bottom:clamp(48px,7vh,88px)}
@media (max-width:900px){.pa{grid-template-columns:1fr}.pa-ar{transform:rotate(90deg);justify-self:center}}

/* ---- certifications: one row each, the same size until opened ------------- */
.crows{display:grid;gap:12px}
.crow{display:grid;grid-template-columns:112px minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start;
  padding:clamp(18px,2vw,24px);border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
  transition:border-color .25s var(--ease)}
.crow:hover{border-color:var(--rule-hi)}
.crow-logo{width:112px;height:112px;display:grid;place-items:center;padding:12px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--rule)}
.crow-logo img{max-width:100%;max-height:100%;object-fit:contain}
.crow-txt h3{margin:4px 0 8px}
/* two lines, then the dots; the expand animates to the text's real height */
.crow-body{max-height:3.3em;overflow:hidden;position:relative;transition:max-height .5s var(--ease)}
.crow-body p{margin:0;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2);max-width:none}
.crow:not(.open) .crow-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crow-more{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:0;border:0;background:none;
  cursor:pointer;color:var(--violet-t);font:600 var(--fs-label)/1 Inter,sans-serif}
.crow-more .ar{transition:transform .3s var(--ease)}
.crow.open .crow-more .ar{transform:rotate(180deg)}
@media (max-width:560px){.crow{grid-template-columns:72px minmax(0,1fr)}.crow-logo{width:72px;height:72px;padding:8px}}
@media (prefers-reduced-motion:reduce){.crow-body{transition:none}}

/* ---- global presence: the map, then the offices left to right ------------ */
.geo{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,36px);
  align-items:center}
.gmap{position:relative;width:min(1080px,100%);margin:0 auto;padding:clamp(16px,2vw,28px);border:1px solid var(--rule);
  border-radius:var(--r);background:var(--ground)}
.gmap img{display:block;width:100%;height:auto;opacity:.55}
.pin{position:absolute;transform:translate(-50%,-50%);display:block;width:0;height:0}
.pin i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 25%,transparent)}
.pin i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--violet);
  animation:pin-ping 2.4s var(--ease) infinite;opacity:0}
.pin.hq i{background:var(--sky-t);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky-t) 25%,transparent)}
.pin.hq i::after{border-color:var(--sky-t)}
@keyframes pin-ping{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(1.8)}}
.pin b{position:absolute;white-space:nowrap;font-size:var(--fs-label);font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:3px 9px;
  box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
.pin-r b{left:12px;top:-12px}
.pin-l b{right:12px;top:-12px}
.pin-t b{left:50%;bottom:12px;transform:translateX(-50%)}

.pin-bl b{right:4px;top:12px}
@media (max-width:1300px){.pin-bl b{right:auto;left:-6px;top:26px}}
/* the cards share row lines, so label, place and note sit level across each row. Three
   then two, each row full width: five in one row is too narrow and wraps place names */
.glocs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px}
.gloc{grid-column:span 2}
.gloc:nth-child(n+4){grid-column:span 3}
.gloc{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px;align-content:start;padding:18px 20px;margin-bottom:12px;
  background:var(--ground);border:1px solid var(--rule);border-left:3px solid var(--rule-hi);
  border-radius:var(--r-sm)}
.gloc.hq{border-left-color:var(--violet)}
.gloc h3{margin:0}
.gloc p{font-size:var(--fs-sm);color:var(--ink-2);margin:0}
.flag{width:36px;height:24px;border-radius:3px;box-shadow:0 0 0 1px var(--rule-2);margin-top:3px}
@media (max-width:1100px){.glocs{grid-template-columns:1fr 1fr}.gloc,.gloc:nth-child(n+4){grid-column:auto}
  .gloc:last-child{grid-column:1 / -1}}
@media (max-width:640px){.glocs{grid-template-columns:1fr}}
@media (max-width:760px){.pin b{display:none}}
@media (prefers-reduced-motion:reduce){.pin i::after{animation:none}}

/* ---- resources: the featured quote and the article cards -------------------- */
.pquote{margin:clamp(32px,5vh,56px) 0 0;padding:clamp(26px,3vw,44px);border-left:4px solid var(--violet);
  border-radius:0 var(--r) var(--r) 0;background:var(--surface)}
.pquote blockquote{margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.pquote figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:18px;font-size:var(--fs-sm)}
.pquote figcaption b{color:var(--ink)}
.pquote figcaption span{color:var(--ink-3)}
.pquote figcaption a{color:var(--violet-t);text-decoration:none;font-weight:600}
.rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.rcard{display:grid;grid-template-rows:auto 1fr;overflow:hidden;text-decoration:none;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--surface);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.rcard:hover{border-color:var(--violet-t);transform:translateY(-3px)}
.rc-img{display:block;margin:0;aspect-ratio:16/9;overflow:hidden;background:#0B1426}
.rc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.rcard:hover .rc-img img{transform:scale(1.04)}
.rc-hd{margin:clamp(34px,5vh,52px) 0 clamp(16px,2.2vh,24px)}
.rgroup + .rgroup{margin-top:clamp(64px,9vh,110px);padding-top:clamp(44px,6vh,68px);border-top:1px solid var(--rule)}
.rgroup .head{margin-bottom:0}
.rc-body{display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:20px 22px}
.rc-body .lbl{font-size:var(--fs-label);letter-spacing:.1em;color:var(--violet-t)}
.rc-body b{font-size:var(--fs-body);line-height:1.4;color:var(--ink)}
.rc-body .go{font-size:var(--fs-sm);font-weight:600;color:var(--violet-t)}
@media (max-width:1000px){.rcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rcards{grid-template-columns:1fr}}

/* ---- hero: 75 / 25, the whole first screen ---------------------------------- */
/* Full-bleed: the photograph runs edge to edge behind the frosted bar, so the first
   screen looks the same in both themes. */
.hero.wide{min-height:calc(100svh + var(--hfade));margin-top:calc(-1 * var(--bar));--hfade:clamp(60px,9vh,110px);
  padding:calc(var(--bar) + clamp(14px,2.2vh,24px)) 0 calc(var(--hfade) + clamp(14px,2.2vh,24px));display:flex;
  position:relative;isolation:isolate;color:#fff;
  background:#050D1E var(--hero-img) center top/100% auto no-repeat}
/* the photograph dissolves into the page instead of ending on a hard edge */
.hero.wide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hfade);
  z-index:-1;background:linear-gradient(180deg,transparent,var(--ground));pointer-events:none}
/* the picture carries the message, so the middle stays clear. Only the bands the text
   sits on are darkened: the title band at the top, the strip band at the bottom. */
.hero.wide::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,10,24,.92) 0%,rgba(4,10,24,.6) 11%,rgba(4,10,24,.08) 20%,rgba(4,10,24,.05) 46%,
               rgba(4,10,24,.1) 54%,rgba(4,10,24,.7) 64%,rgba(4,10,24,.93) 72%,rgba(4,10,24,.97) 100%),
             linear-gradient(90deg,rgba(4,10,24,.25) 0%,transparent 25%,transparent 72%,rgba(4,10,24,.5) 100%)}
.sec.wide > .hwrap{width:100%;max-width:none;margin:0;padding:0 clamp(24px,4vw,64px);
  display:grid;grid-template-columns:3fr 1fr;grid-template-rows:1fr auto;gap:0 clamp(14px,1.4vw,24px);align-items:stretch;
  position:relative;z-index:1}

.hstage{position:relative;color:#fff;display:grid;grid-template-rows:auto 1fr auto}
.hstage .stage{max-width:none;text-align:center;text-shadow:0 2px 24px rgba(4,10,24,.9)}
.htop{grid-row:1;padding-top:0;margin-top:calc(-1 * clamp(10px,1.6vh,20px))}
.htop .eyebrow{justify-content:center}
.hstage .hbot{grid-row:3;display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;
  flex-wrap:wrap;text-align:left;padding-bottom:clamp(10px,1.6vh,18px)}
.hbot .lead{flex:1 1 0;min-width:280px;margin:0 !important}
/* the hero line: bold, italic, kept on one line */
.hstage .hbot .lead.hline{font-size:clamp(1.05rem,1.42vw,1.9rem);font-weight:700;font-style:italic;
  color:#fff;white-space:nowrap;text-align:start;letter-spacing:-.005em}
/* the line sits low, just above the awards bar, clear of the picture */
.hstage .hbot{row-gap:6px !important}
/* the awards pill: as long as its words, centred under the hero sentence rather than the
   page. The column is as wide as the sentence. */
.hstage .hbot{display:grid;grid-template-columns:minmax(0,max-content);justify-content:center;justify-items:center}
.hstage .hbot .lead.hline{justify-self:stretch}
.hstage .hbot .awardbar{margin-top:0}
@media (max-width:1100px){.hstage .hbot .lead.hline{white-space:normal;font-size:var(--fs-lead)}}
/* keep the one-liner and the buttons on one row, so the picture keeps the middle */
@media (max-width:1600px){.hstage .hbot .lead{font-size:var(--fs-sm)}.hstage .hbot{gap:14px 24px}}
.hpic{grid-row:2}
.hstage .eyebrow{color:#A5B4FC}
.hstage .d1{max-width:none;color:#fff;font-size:clamp(2.2rem,3vw,4rem);line-height:1.04;
  letter-spacing:-.03em;margin-bottom:0}
/* the banner: one line across the top of the picture */
.hstage .d1.hbanner{font-size:clamp(1.6rem,2.25vw,3rem);white-space:nowrap}
.hstage .d1.hbanner .grad{display:inline}
@media (max-width:1100px){.hstage .d1.hbanner{white-space:normal}.hstage .d1.hbanner .grad{display:block}}
/* solid, not a gradient: a see-through fill picks up every colour in the photograph
   behind it */
.hstage .d1 .grad{display:block;background:none;-webkit-text-fill-color:currentColor;color:#8FE3FF;
  font-weight:800;text-shadow:0 2px 6px rgba(4,10,24,.9),0 0 32px rgba(4,10,24,.95)}
.hstage .d1{text-shadow:0 2px 6px rgba(4,10,24,.9),0 0 32px rgba(4,10,24,.95)}
.hstage .lead{max-width:none;color:rgba(236,242,255,.92);margin:0;font-size:var(--fs-body);line-height:1.5}
.hcta .btn.sec{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.04)}
.hcta .btn.sec:hover{border-color:#fff;color:#fff}

/* five-stage strip, inception to commercialization, spanning the stage and the cards */
.hsteps{grid-column:1 / -1;grid-row:2;list-style:none;margin:0;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:start;
  padding:clamp(16px,2.4vh,26px) 0;
  border-top:1px solid rgba(255,255,255,.16)}
.hsteps li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px;padding:0 10px}
.hsteps li + li::before{content:"";position:absolute;left:-5px;top:12px;width:10px;height:10px;
  border-top:2px solid #38BDF8;border-right:2px solid #38BDF8;transform:rotate(45deg)}
.hsteps svg{width:30px;height:30px;fill:none;stroke:#38BDF8;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.hs-t{font-size:var(--fs-label);letter-spacing:.14em;color:#fff;font-weight:700}

/* compact product cards, identical in size, see-through and no taller than their
   content, so the right of the image stays visible */
.hboxes{display:grid;align-content:center;gap:14px}
/* the hero buttons sit under the product cards, the width of the card column */
.btnrow.hcta{flex-wrap:nowrap;gap:10px;margin:2px 0 0}
.hcta .btn{flex:1 1 auto;justify-content:center;padding:13px 12px;white-space:nowrap}
/* laptop widths: the card column is under 330px, so the labels drop to the type floor
   and the arrow goes, to keep both buttons on one line */
@media (max-width:1600px){.hcta .btn{font-size:var(--fs-label);padding:12px 10px}.hcta .btn .ar{display:none}}
.hbox{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;padding:14px;min-height:0;
  text-decoration:none;background:rgba(8,16,34,.62);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  border-radius:var(--r);backdrop-filter:blur(8px) saturate(130%);-webkit-backdrop-filter:blur(8px) saturate(130%);
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
a.hbox:hover{border-color:rgba(196,181,253,.7);transform:translateX(-3px);background:rgba(8,16,34,.6)}
.hb-img{position:relative;width:112px;height:112px;border-radius:var(--r-sm);overflow:hidden;background:#0B1730}
.hb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
a.hbox:hover .hb-img img{transform:scale(1.08)}
.hb-body{display:grid;gap:5px;min-height:0}
.hbox h2{font-size:var(--fs-h4);font-weight:700;letter-spacing:-.015em;margin:0;color:#fff}
.hbox p{font-size:var(--fs-sm);line-height:1.45;color:rgba(226,236,255,.8);margin:0;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hbox .go{font-size:var(--fs-sm);font-weight:600;color:#C4B5FD}
/* short laptop screens: each card is one link, so its "Read more" line goes first, then
   the blurb, keeping the cards and the stage strip on the first screen */
@media (min-width:1101px) and (max-height:860px){.hbox .go{display:none}}
@media (min-width:1101px) and (max-height:780px){.hbox p{-webkit-line-clamp:1}}
@media (min-width:1101px) and (max-height:660px){.hbox p{display:none}}
@media (min-width:1101px) and (max-height:900px){
  .hstage .d1{font-size:clamp(2rem,2.9vw,3.8rem);margin-bottom:14px}
  .hstage .lead{font-size:var(--fs-body);line-height:1.6;margin-bottom:20px}
  .hsteps{padding-top:14px;padding-bottom:14px}
}

@media (max-width:1100px){
  .hero.wide{min-height:0}
  .sec.wide > .hwrap{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(14px,1.4vw,24px)}
  .hsteps{grid-row:auto}
  .hstage .lead{max-width:62ch}
  /* stacked: the picture shows whole between the headline and the buttons instead of
     being stretched behind a tall column */
  .hero.wide{background:#050D1E}
  .hstage .hbot{justify-content:center;text-align:center}
  .hpic{aspect-ratio:16/9;margin:clamp(16px,3vw,28px) 0;border-radius:var(--r);
    background:var(--hero-img) center/cover no-repeat;box-shadow:0 20px 50px -24px rgba(0,0,0,.7)}
  .hsteps{display:flex;flex-wrap:wrap;justify-content:center;row-gap:18px}
  .hsteps li{flex:1 0 20%}
  .hsteps li + li::before{display:none}
  .hs-t{letter-spacing:.05em}
  .hboxes{grid-template-rows:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .hcta{grid-column:1 / -1;max-width:520px;width:100%;justify-self:center}
}

@media (max-width:600px){
  .hsteps li{flex:0 0 33.333%;padding:0 4px}
  .hs-t{letter-spacing:0;font-size:11px}
}

/* ---- certifications link ------------------------------------------------- */
.certlink{display:flex;justify-content:center;margin:0 0 clamp(22px,3vh,34px)}
.certlink .btn{gap:11px}
.certlink svg{flex:none}
@media (max-width:560px){.certlink{padding:0 16px}.certlink .btn{white-space:normal;text-align:center}}

/* ---- theme toggle -------------------------------------------------------- */
/* language menu */
.lang{position:relative;flex:none}
.lang > button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;cursor:pointer;
  font:600 var(--fs-label)/1 Inter,sans-serif;letter-spacing:.06em;color:var(--ink);
  background:transparent;border:1px solid var(--rule-2);border-radius:999px}
.lang > button:hover{border-color:var(--ink-3)}
.lang .caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;margin:0;padding:6px;list-style:none;z-index:90;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r-sm);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.lang-menu button{display:block;width:100%;white-space:nowrap;text-align:left;padding:9px 12px;
  font:500 var(--fs-sm) Inter,sans-serif;color:var(--ink-2);background:none;border:0;
  border-radius:var(--r-sm);cursor:pointer}
.lang-menu button:hover{background:var(--surface-2);color:var(--ink)}
.lang-menu button[aria-checked="true"]{color:var(--ink);font-weight:600}
.lang-menu button[aria-disabled="true"]{cursor:default}
.lang-menu button[aria-disabled="true"]:hover{background:none;color:var(--ink-2)}
.lang-menu .soon{margin-left:8px;font-size:var(--fs-label);color:var(--violet-t)}

/* Site search: a fixed index (assets/search.json), results under the field as you type */
/* left of the bar beside the wordmark, as wide as the bar allows */
.srch{position:relative;flex:1 1 auto;max-width:440px;min-width:0;display:flex;align-items:center;
  margin-left:clamp(12px,2vw,36px)}
.srch svg{position:absolute;left:12px;width:16px;height:16px;fill:none;stroke:var(--ink-3);
  stroke-width:2;stroke-linecap:round;pointer-events:none}
.srch input{width:100%;height:38px;padding:0 12px 0 34px;font:400 var(--fs-sm) Inter,sans-serif;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-2);border-radius:999px;outline:0;
  transition:border-color .2s var(--ease)}
.srch input::placeholder{color:var(--ink-3)}
.srch input:focus{border-color:var(--violet-t)}
.srch input::-webkit-search-cancel-button{-webkit-appearance:none}
.srch-list{position:absolute;top:calc(100% + 8px);left:0;width:min(380px,92vw);max-height:min(420px,70vh);
  overflow-y:auto;margin:0;padding:6px;list-style:none;z-index:90;background:var(--surface);
  border:1px solid var(--rule-2);border-radius:var(--r-sm);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.srch-list a{display:grid;gap:2px;padding:9px 12px;border-radius:var(--r-sm);text-decoration:none}
.srch-list a b{font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.35}
.srch-list a span{font-size:var(--fs-label);color:var(--ink-3)}
.srch-list [aria-selected="true"] a,.srch-list a:hover{background:var(--surface-2)}
.srch-list .none{padding:10px 12px;font-size:var(--fs-sm);color:var(--ink-3)}
/* laptop widths: the full nav leaves under 150px for a field, so search is a round button
   beside the wordmark. Opened, the field drops below the bar, never over the nav links. */
@media (min-width:1240px) and (max-width:1559px){
  .srch{flex:0 0 38px;height:38px;border:1px solid var(--rule-2);border-radius:999px;cursor:pointer}
  .top.on-dark:not(.open) .srch{border-color:rgba(255,255,255,.35)}
  .srch svg{left:10px}
  .srch input{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0;cursor:pointer}
  .srch:focus-within input{opacity:1;inset:auto;top:calc(100% + (var(--bar) - 38px) / 2 + 10px);left:0;width:340px;height:42px;
    padding:0 14px;cursor:text;background:var(--surface);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
  .top.on-dark:not(.open) .srch:focus-within input{background:#0C1528}
  .srch:focus-within .srch-list{top:calc(100% + (var(--bar) - 38px) / 2 + 60px)}
}
/* small tablets: "QV" for the wordmark, so the search field has room */
@media (min-width:768px) and (max-width:899px){
  .top .brand .word{display:none}
  .top .brand .word.word-s{display:inline}
}
/* phones: "QV" for the wordmark, and the demo button moves into the menu, so the bar
   holds only the mark, the theme switch and the menu */
.brand .word-s,.nav > li.nav-demo{display:none}
@media (max-width:767px){
  .top .brand .word{display:none}
  .top .brand .word.word-s{display:inline}
  .top .in{gap:10px}
  .top .cta{display:none}
  .nav > li.nav-demo{display:block;border-bottom:0;padding:16px 0 4px}
  .nav > li.nav-demo .btn{width:100%;justify-content:center;padding:14px 20px;color:#fff}
  .themed{margin-left:auto}
}
/* phones: the bar keeps the wordmark and the menu button; search and language move into
   the open menu, above the links */
@media (max-width:767px){
  .srch,.lang{display:none}
  .top.open .srch{display:flex;position:fixed;top:calc(var(--bar) + 14px);left:4vw;right:calc(4vw + 88px);z-index:3}
  .top.open .lang{display:block;position:fixed;top:calc(var(--bar) + 14px);right:4vw;z-index:3}
  .top.open .nav{padding-top:68px}
  /* a solid strip under the pinned search row, so menu links scroll behind it, not around it */
  .top.open::after{content:"";position:fixed;top:var(--bar);left:0;right:0;height:66px;z-index:2;
    background:var(--ground)}
  .srch-list{left:0;right:auto;width:92vw}
}
.themed{display:grid;place-items:center;width:38px;height:38px;flex:none;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:999px;background:transparent;color:var(--ink-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.themed:hover{border-color:var(--rule-hi);color:var(--ink);background:var(--surface-2)}
.themed svg{grid-area:1/1;fill:none;stroke:currentColor;stroke-width:1.7}
.t-moon{fill:currentColor;stroke:none}
/* Show the destination, not the current state: a light page offers the moon. */
.t-moon{display:block} .t-sun{display:none}
:root[data-theme="dark"] .t-moon{display:none}
:root[data-theme="dark"] .t-sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .t-moon{display:none}
  :root:not([data-theme="light"]) .t-sun{display:block}
}

/* ---- buttons ------------------------------------------------------------- */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  white-space:nowrap;
  font-size:var(--fs-sm);font-weight:500;line-height:1;padding:15px 26px;border-radius:999px;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn.pri{background:var(--violet);color:#fff;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.btn.pri:hover{background:var(--blue);transform:translateY(-2px)}
/* transparent stated outright: a <button> otherwise keeps the browser's grey fill */
.btn.sec{border-color:var(--rule-hi);color:var(--ink);background:transparent}
.btn.sec:hover{border-color:var(--violet-t);color:var(--violet-t);transform:translateY(-2px)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}



/* ---- hero ---------------------------------------------------------------- */
/* no min-height: the hero takes only the room its content needs */
.hero{padding:clamp(40px,6vh,80px) 0 clamp(36px,5vh,64px);overflow:hidden}
.hero .in{width:var(--shell);margin:0 auto}

.hero .d1{margin:0 0 22px}
.hero .lead{margin-bottom:30px}

/* the ambient spectral bloom behind the hero. Desktop only - it is the one piece
   of pure atmosphere on the page and a phone gets the flat composition instead. */
.bloom{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bloom i{position:absolute;border-radius:50%;filter:blur(110px);opacity:var(--bloom-1)}
.bloom i:nth-child(1){width:44vw;height:44vw;left:-8vw;top:-10vw;background:var(--indigo)}
.bloom i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:6vw;background:var(--blue);opacity:var(--bloom-2)}
.bloom i:nth-child(3){width:30vw;height:30vw;right:14vw;bottom:-12vw;background:var(--sky);opacity:var(--bloom-3)}
@media (max-width:900px),(hover:none){ .bloom{display:none} }

/* ---- staged load reveal --------------------------------------------------- */
/* Sequenced, not simultaneous: rule, then eyebrow, then each headline line, then
   body, then buttons. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stage > *{opacity:0;animation:rise .9s var(--ease) forwards}
.stage > *:nth-child(1){animation-delay:.05s}
.stage > *:nth-child(2){animation-delay:.17s}
.stage > *:nth-child(3){animation-delay:.29s}
.stage > *:nth-child(4){animation-delay:.41s}
.stage > *:nth-child(5){animation-delay:.53s}
.hero .d1 .ln{display:block;overflow:hidden}
.hero .d1 .ln > span{display:block;opacity:0;animation:rise 1s var(--ease) forwards}
.hero .d1 .ln:nth-child(1) > span{animation-delay:.2s}
.hero .d1 .ln:nth-child(2) > span{animation-delay:.32s}
.hero .d1 .ln:nth-child(3) > span{animation-delay:.44s}

/* vertical rhythm inside a stage, set here rather than left to each child's margins */
.stage .d1{margin-bottom:20px}
.stage .lead{margin-bottom:32px}
.stage .stats{margin-bottom:36px}
.stage .stats + .btnrow{margin-top:0}

/* ---- scroll reveal -------------------------------------------------------- */
/* Gated on .js, which an inline script sets on <html> before first paint. Without
   that gate the starting state is opacity:0 and any JS failure - script error,
   blocked bundle, JS disabled, a crawler - leaves every section below the fold
   permanently invisible. Hiding content is only safe once you know you can unhide it. */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.vis{opacity:1;transform:none}
/* Named dl* and NOT d1..d5: .d1-.d4 are the type-scale classes, so a reveal delay
   called .d2 silently gave every delayed element 3.9rem uppercase display type. */
.rv.dl1{transition-delay:.09s} .rv.dl2{transition-delay:.18s} .rv.dl3{transition-delay:.27s}
.rv.dl4{transition-delay:.36s} .rv.dl5{transition-delay:.45s}

/* ---- spec strip ----------------------------------------------------------- */

/* ---- cards ---------------------------------------------------------------- */
/* Square corners, image bleeding to the edge, caps label, and a CTA cover that
   rises on hover. The whole card lifts and the image scales inside its own
   overflow box so the crop tightens rather than the card growing. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(14px,1.8vw,22px)}
.card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.card .shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,7,15,.85));opacity:.7;transition:opacity var(--t) var(--ease)}
.card .body{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.card .lbl{color:var(--violet-t)}
.card h3{color:var(--ink)}
.card p{font-size:var(--fs-sm);line-height:1.58;margin:0;flex:1}
.card .meta{color:var(--ink-3);padding-top:12px;border-top:1px solid var(--rule)}
/* the spectral edge that wipes across the top on hover */
.card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease);z-index:2}
a.card:hover{transform:translateY(-8px);border-color:var(--rule-hi);
  box-shadow:0 34px 70px -30px rgba(37,99,235,.42)}
a.card:hover::before{transform:scaleX(1)}
a.card:hover .shot img{transform:scale(1.07)}
a.card:hover .shot::after{opacity:.45}
.card .go{display:inline-flex;align-items:center;gap:7px;color:var(--violet-t);
  font-size:var(--fs-sm);font-weight:500;transition:gap .3s var(--ease)}
a.card:hover .go{gap:13px}
@media (prefers-reduced-motion:reduce){
  a.card:hover{transform:none}
  a.card:hover .shot img{transform:none}
}

/* ---- agency columns ---------------------------------------------------------- */
/* a column per agency with the programmes cascading beneath it */
.agencies{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(12px,1.5vw,20px);align-items:start}
/* columns share the full width, so a short list never leaves the right of the shell blank */

.prog{font-size:var(--fs-body);background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:20px 22px;display:grid;gap:9px;align-content:start;
  transition:border-color .25s,background .25s}
.prog:hover{border-color:var(--rule-hi);background:var(--surface-2)}
.prog .ph{color:var(--violet-t);display:block;font-size:var(--fs-label);letter-spacing:.14em}

/* ---- programs by domain: tiles that filter, wide cards that read across --------- */
.dtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);
  margin-bottom:clamp(22px,3vh,32px)}
.dtile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;column-gap:14px;
  row-gap:4px;align-content:start;text-align:left;padding:18px 20px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--rule);background:var(--surface);color:inherit;font:inherit;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.dtile:hover{border-color:var(--rule-hi);transform:translateY(-2px)}
.dtile[aria-pressed="true"]{border-color:var(--violet);background:var(--surface-2);
  box-shadow:inset 0 -3px 0 var(--violet)}
.dtile svg,.pc-dom svg{fill:none;stroke:var(--violet-t);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dtile svg{grid-row:1 / span 2;width:36px;height:36px;padding:6px;border-radius:10px;
  background:color-mix(in srgb,var(--violet) 12%,transparent)}
.dt-n{font-size:var(--fs-sm);font-weight:700;color:var(--ink);line-height:1.25}
.dt-c{font-size:var(--fs-label);color:var(--ink-3);letter-spacing:.06em}
.dt-d{grid-column:1 / -1;margin-top:8px;font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:clamp(14px,2vh,22px)}
.pf-blurb{color:var(--ink-3);font-size:var(--fs-sm);margin:0}
.pc-all{border:0;background:none;color:var(--violet-t);font:600 var(--fs-sm)/1 Inter,sans-serif;cursor:pointer}
.pc-all[hidden]{display:none}
.pcards{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);overflow:hidden}
.pcard{display:grid;grid-template-columns:minmax(170px,.55fr) minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(18px,2.4vw,40px);align-items:start;padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px);
  border-top:1px solid var(--rule);transition:background .2s}
.pcards .pcard:first-child,.pcards .pcard[hidden] + .pcard:not([hidden]){border-top:0}
.pcard:hover{background:var(--surface-2)}
.pcard[hidden]{display:none}
.pc-meta{display:grid;align-content:start;gap:10px}
.pc-ag{font-size:var(--fs-label);letter-spacing:.14em;font-weight:700}
.pc-dom{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:600;color:var(--ink)}
.pc-dom svg{width:20px;height:20px}
.pcard h3{margin:0;line-height:1.3}
.pc-desc p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.pc-pt{display:block;margin-top:10px;font-size:var(--fs-label);color:var(--ink-3)}
@media (max-width:1100px){.dtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcard{grid-template-columns:minmax(140px,.5fr) minmax(0,1.5fr)}.pc-desc{grid-column:2}}
@media (max-width:560px){.pcard{grid-template-columns:1fr;gap:12px}.pc-desc{grid-column:auto}
  .dtile{min-width:0;padding:14px;column-gap:10px}.dtile svg{width:30px;height:30px}}
@media (max-width:420px){.dtiles{grid-template-columns:1fr}}

/* ---- big-type field list ---------------------------------------------------- */

/* each field takes the next stop on the ramp, so the list reads as a spectrum */

/* ---- the record: three programmes as image cards -------------------------- */

.reclink{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  text-decoration:none;padding:16px 20px;border:1px solid var(--rule-2);
  border-radius:var(--r);background:var(--surface);max-width:420px;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.reclink:hover{border-color:var(--violet);background:var(--surface-2);transform:translateY(-2px)}
.rl-glyph{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  width:42px;height:42px;flex:none}
.rl-glyph i{background:var(--violet-t);border-radius:2px;opacity:.5;
  transition:opacity .25s var(--ease)}
.reclink:hover .rl-glyph i{opacity:.9}
.rl-glyph i:nth-child(3),.rl-glyph i:nth-child(5),.rl-glyph i:nth-child(7){opacity:.85}
/* The ninth tile is replaced by the remainder, so the glyph counts the record rather
   than being decoration that happens to sit next to a number. */
.rl-glyph b{position:absolute;right:-7px;bottom:-7px;font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-label);font-weight:700;color:var(--ink);background:var(--violet);
  border-radius:999px;padding:1px 6px;line-height:1.35}
.rl-text{display:grid;gap:3px;min-width:0}
/* the record heading holds one line; the lead and the link card share the row below */

/* the one-line Domains lead with the link card to its right, centred as a pair */
.recrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px clamp(20px,2.4vw,36px);
  margin-bottom:clamp(26px,4vh,40px)}
.recrow .lead{margin:0;max-width:none;text-align:center;text-align-last:center}
/* sized so the line and the card share one row on laptops and up */
@media (min-width:1240px){.recrow{flex-wrap:nowrap}.recrow .lead{white-space:nowrap;font-size:min(var(--fs-lead),1.5vw)}}

.rl-text b{font-size:var(--fs-sm);font-weight:700;color:var(--ink);letter-spacing:-.012em}
.rl-text span{font-size:var(--fs-label);color:var(--ink-3);line-height:1.4}
.rl-go{font-size:var(--fs-h4);color:var(--violet-t);transition:transform .3s var(--ease)}
.reclink:hover .rl-go{transform:translateX(5px)}
@media (max-width:680px){.reclink{max-width:none;width:100%}}

.pgcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);
  margin-top:clamp(30px,4vh,46px)}
.pgcard{display:grid;grid-template-rows:auto 1fr;text-decoration:none;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.pgcard:hover{border-color:var(--rule-hi);transform:translateY(-3px)}
.pgshot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.pgshot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.pgcard:hover .pgshot img{transform:scale(1.04)}
/* The agency chip sits on the photograph, so it needs its own ground rather than
   relying on whatever the image happens to be doing behind it. */
.pgshot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,15,.62) 0%,rgba(8,7,15,0) 42%,rgba(8,7,15,.55) 100%)}
.pgag{position:absolute;top:13px;left:14px;z-index:2;font-size:var(--fs-label);
  letter-spacing:.14em;font-weight:600}
.pgbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px}
.pgdom{font-size:var(--fs-label);letter-spacing:.11em;color:var(--ink-3)}
.pgtitle{font-size:var(--fs-h4);font-weight:700;line-height:1.3;letter-spacing:-.018em;
  color:var(--ink);margin:0}
.pgblurb{font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2);margin:0;max-width:none}
.pgcard .go{margin-top:auto;padding-top:11px}

@media (max-width:1000px){.pgcards{grid-template-columns:1fr 1fr}}

/* 404: centred, a large gradient code, the main destinations as cards */
.nf .in{min-height:min(72vh,760px);display:grid;place-items:center}
.nf-stage{text-align:center;max-width:46rem;width:100%}
.nf-code{margin:0;text-align:center;text-align-last:center;font-size:clamp(6rem,16vw,12rem);font-weight:800;line-height:.9;letter-spacing:-.05em;
  background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-h{margin:18px 0 10px;font-size:var(--fs-h2);font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.nf-p{margin:0 auto;max-width:44ch;color:var(--ink-2);text-align:center;text-align-last:center}
.nf-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:clamp(28px,4vh,44px) 0 0;text-align:left}
.nf-link{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:4px;
  padding:16px 18px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--surface);text-decoration:none;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.nf-link:hover{border-color:var(--violet);transform:translateY(-2px)}
.nf-link b{color:var(--ink);font-size:var(--fs-body)}
.nf-link span:not(.ar){grid-column:1;color:var(--ink-3);font-size:var(--fs-sm);line-height:1.45}
.nf-link .ar{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--violet-t)}
.nf-btns{justify-content:center;margin-top:clamp(24px,3.4vh,36px)}
@media (max-width:520px){.nf-links{grid-template-columns:1fr}}
/* the hero's long thin bar down to the awards table */
.awardbar{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:max-content;max-width:100%;margin-top:clamp(14px,2vh,22px);
  padding:12px 22px;border-radius:999px;text-decoration:none;color:#fff;font-weight:700;font-size:var(--fs-body);
  letter-spacing:.01em;background:linear-gradient(90deg,#6D28D9,#2563EB);
  box-shadow:0 10px 30px -12px rgba(109,40,217,.8);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.awardbar:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(109,40,217,.95)}
.awardbar .ar{transition:transform .2s var(--ease)}
.awardbar:hover .ar{transform:translateY(3px)}
.plead .plead-b{text-align:start;text-align-last:auto}
/* Awards showcase: stats strip, search, agency chips, and a list/cards switch with the
   list as the default */
.wins{margin-top:clamp(48px,6vh,80px);scroll-margin-top:96px}
.wins [hidden]{display:none !important}
.wins .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wins svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wins-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-bottom:18px}
.wins-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:var(--fs-label);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-t);
  background:color-mix(in srgb,var(--violet) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--violet) 25%,transparent)}
.wins-pill svg{width:13px;height:13px;fill:currentColor;stroke:none}
.wins-h{margin:12px 0 0;font-size:var(--fs-h2);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.wins-stats{display:flex;flex-wrap:wrap;align-items:center;padding:10px 6px;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--surface);box-shadow:0 14px 34px -26px rgba(30,16,70,.45)}
.wins-stat{display:flex;align-items:center;gap:8px;padding:2px 13px;font-size:var(--fs-label);color:var(--ink-3);white-space:nowrap}
.wins-stat + .wins-stat{border-left:1px solid var(--rule)}
.wins-stat i{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;color:var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent)}
.wins-stat i svg{width:16px;height:16px}
.wins-stat b{color:var(--ink);font-weight:800}
.wins-bar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:12px;margin-bottom:18px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.wins-search{flex:1 1 300px;max-width:400px;display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;
  border:1px solid var(--rule-2);border-radius:10px;background:var(--surface-2);color:var(--ink-3);cursor:text}
.wins-search:focus-within{border-color:var(--violet)}
.wins-search svg{width:16px;height:16px;flex:none}
.wins-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs-label);color:var(--ink);outline:none}
.wins-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;flex:1 1 auto}
.wins-chip{padding:6px 14px;border-radius:999px;border:1px solid var(--rule-2);background:var(--surface-2);
  font:inherit;font-size:var(--fs-label);font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.wins-chip:hover{border-color:var(--violet)}
.wins-chip[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff;
  box-shadow:0 6px 16px -8px rgba(109,40,217,.8)}
.wins-view{display:flex;gap:2px;padding:4px;border-radius:10px;background:var(--surface-2);border:1px solid var(--rule)}
.wins-view button{display:flex;align-items:center;gap:7px;padding:7px 12px;border:0;border-radius:7px;background:none;
  font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink-3);cursor:pointer}
.wins-view button[aria-pressed="true"]{background:var(--surface);color:var(--violet-t);box-shadow:0 2px 8px -3px rgba(0,0,0,.25)}
.wins-view svg{width:15px;height:15px}
.wins-box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  box-shadow:0 26px 60px -44px rgba(30,16,70,.55)}
.wins-t{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-sm);line-height:1.5}
.wins-t thead th{padding:16px 20px;text-align:left;font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);background:color-mix(in srgb,var(--ink) 3%,var(--surface));
  border-bottom:1px solid var(--rule)}
.wins-t thead th:nth-child(1){width:16%}
.wins-t thead th:nth-child(2){width:32%}
.wins-t thead th:nth-child(3){width:7%}
.wins-t thead th:nth-child(4){width:21%}
.wins-t thead th:nth-child(5){width:24%}
.wins-t tbody th,.wins-t tbody td{padding:18px 20px;text-align:left;vertical-align:middle;color:var(--ink-2);
  font-weight:400;border-top:1px solid var(--rule);transition:background .2s var(--ease)}
.wins-t tbody tr:first-child > *{border-top:0}
.wins-t tbody tr:hover > *{background:color-mix(in srgb,var(--violet) 5%,transparent)}
.wins-t tbody tr:hover > th{box-shadow:inset 3px 0 0 var(--violet)}
.wins-t tbody td:nth-child(2){color:var(--ink);font-weight:500}
/* columns 2 and 4 carry a soft violet wash top to bottom with a thin accent edge */
@media (min-width:861px){
  .wins-t thead th:nth-child(2),.wins-t thead th:nth-child(4){color:var(--violet-t);
    background:color-mix(in srgb,var(--violet) 9%,var(--surface))}
  .wins-t tbody td:nth-child(2),.wins-t tbody td:nth-child(4){
    background:linear-gradient(90deg,color-mix(in srgb,var(--violet) 7%,transparent),color-mix(in srgb,var(--blue-t) 4%,transparent));
    box-shadow:inset 2px 0 0 color-mix(in srgb,var(--violet) 35%,transparent)}
  .wins-t tbody td:nth-child(4){color:var(--ink);font-weight:500}
  .wins-t tbody tr:hover > td:nth-child(2),.wins-t tbody tr:hover > td:nth-child(4){
    background:color-mix(in srgb,var(--violet) 13%,transparent)}
}
.wins-t .wtrl{text-align:center}
.wsp{display:block;font-weight:700;color:var(--ink)}
.wph{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:6px;font-size:var(--fs-label);font-weight:700;
  color:var(--violet-t);background:color-mix(in srgb,var(--violet) 10%,transparent)}
.wtrl-b{display:inline-block;min-width:36px;padding:3px 8px;border-radius:7px;font-size:var(--fs-label);font-weight:700;
  white-space:nowrap;text-align:center;color:var(--blue-t);background:color-mix(in srgb,var(--blue-t) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--blue-t) 30%,transparent)}
.wins-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:20px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.wcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--violet) 40%,var(--rule));
  box-shadow:0 22px 44px -30px rgba(76,29,149,.6)}
.wcard-top{position:relative;display:flex;align-items:flex-start;gap:12px}
.wcard-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--violet-t);
  background:color-mix(in srgb,var(--violet) 10%,transparent)}
.wcard-ic svg{width:20px;height:20px}
.wcard-id{flex:1;min-width:0;padding-right:120px}
/* a quarter circle tucked into the card's corner (its centre is the corner itself), with
   the TRL centred in the visible quarter, clear of both card edges and the curve */
.wcard::before{content:"";position:absolute;top:-140px;right:-140px;width:280px;height:280px;border-radius:50%;
  background:color-mix(in srgb,var(--violet) 8%,transparent)}
.wcard-trl{position:absolute;top:38px;right:38px;transform:translate(50%,-50%);display:grid;justify-items:center;
  gap:4px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink-3)}
.wcard-trl .wtrl-b{min-width:44px}
.wcard h4{position:relative;margin:0;font-size:var(--fs-body);font-weight:700;line-height:1.4;color:var(--ink)}
.wcard-meta{position:relative;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);display:grid;gap:8px;
  font-size:var(--fs-sm);line-height:1.45;color:var(--ink-3)}
.wcard-meta span{display:flex;align-items:flex-start;gap:8px}
.wcard-meta svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--violet-t)}
.wins-empty{margin:0;padding:32px;text-align:center;color:var(--ink-3)}
@media (max-width:1100px){.wins-cards{grid-template-columns:1fr 1fr}.wins-chips{justify-content:flex-start}}
@media (max-width:860px){
  .wins-stats{width:100%}
  .wins-stat{flex:1 1 40%;padding:6px 12px}
  .wins-stat + .wins-stat{border-left:0}
  .wins-search{max-width:none}
  .wins-box{background:none;border:0;border-radius:0;overflow:visible;box-shadow:none}
  .wins-t,.wins-t tbody,.wins-t tr,.wins-t th,.wins-t td{display:block;width:auto}
  .wins-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .wins-t tbody{display:grid;gap:12px}
  .wins-t tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-content:start;
    background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:14px 16px}
  .wins-t tbody th,.wins-t tbody td{grid-column:1 / -1;padding:6px 0;border-top:0}
  .wins-t tbody th{grid-column:1;grid-row:1;padding:0 0 10px}
  .wins-t tbody td.wtrl{grid-column:2;grid-row:1;padding:0;text-align:right}
  .wins-t tbody td:nth-child(2){font-weight:600;border-top:1px solid var(--rule);padding-top:10px}
  .wins-t tbody td:nth-child(n+4)::before{content:attr(data-l);display:block;font-size:var(--fs-label);font-weight:600;
    letter-spacing:.04em;color:var(--ink-3);margin-bottom:2px}
  .wins-t tbody tr:hover > th{box-shadow:none}
}
@media (min-width:561px) and (max-width:860px){.wins-t tbody{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.wins-cards{grid-template-columns:1fr}.wins-view{width:100%}.wins-view button{flex:1;justify-content:center}}
@media (max-width:680px){
  .pgcards{grid-template-columns:1fr}
  
}

/* ---- partner carousel ---------------------------------------------------------- */
/* Spacing is margin-right on each item, NOT flex gap: with gap the track measures
   2N*W+(2N-1)*G but the duplicate sits at N*(W+G), so translateX(-50%) lands half a
   gap short and the loop visibly jumps once per cycle. */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:flex;width:max-content;animation:marq 48s linear infinite}
/* Deliberately no hover pause: it must keep moving. */
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-25%)}}
/* a light plate in both themes: the seals are drawn for white paper and some vanish on a
   dark surface */
.marquee figure{flex:0 0 auto;width:clamp(126px,13vw,168px);margin:0 clamp(12px,1.5vw,20px) 0 0;
  background:var(--plate);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);
  padding:16px;display:grid;place-items:center;aspect-ratio:1;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.marquee figure:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(0,0,0,.9)}
.marquee img{max-height:100%;width:auto;object-fit:contain;filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .mtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:14px}
  .mtrack figure{margin:0}
  .mtrack figure[aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- stats ---------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:22px}
.stats>div{border-top:1px solid var(--rule-2);padding-top:14px}
.stats .fig{font-family:Inter,sans-serif;font-weight:700;font-size:var(--fs-h4);
  letter-spacing:-.018em;line-height:1.25;display:block}
.stats .l{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);margin-top:6px;display:block;
  max-width:30ch;font-family:Inter,sans-serif;letter-spacing:0;text-transform:none}

/* ---- prose / lists ---------------------------------------------------------------- */

.spec{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.spec th,.spec td{text-align:left;padding:17px 0;border-top:1px solid var(--rule);vertical-align:top}
.spec th{width:32%;font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--ink-3);padding-right:26px}
.spec td{color:var(--ink-2)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:1px solid var(--rule)}

/* ---- people / orgs ------------------------------------------------------------------ */
/* list left, selected entry right: team and certifications. Reads left to right, and
   the expand opens sideways into the panel rather than stretching one card down. */
.split{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.6fr);gap:clamp(16px,2vw,28px);
  align-items:start}
.sp-list{display:grid;gap:8px}
.sp-tab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;text-align:left;
  padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface);
  cursor:pointer;font:inherit;color:inherit;position:relative;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.sp-tab:hover{border-color:var(--rule-hi);transform:translateX(3px)}
.sp-tab[aria-selected="true"]{border-color:var(--violet);background:var(--surface-2)}
.sp-tab[aria-selected="true"]::after{content:"";position:absolute;right:-1px;top:14px;bottom:14px;
  width:3px;border-radius:3px;background:var(--spectrum)}
.sp-tt{display:grid;gap:2px;min-width:0}
.sp-tt b{font-size:var(--fs-sm);color:var(--ink);line-height:1.35}
.sp-sub{font-size:var(--fs-label);letter-spacing:.05em;color:var(--violet-t)}
.sp-tease{font-size:var(--fs-label);color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sp-mark{width:46px;height:46px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center}

.sp-init{background:var(--spectrum);color:#fff;font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em;
  border-radius:50%}
.sp-panels{position:sticky;top:calc(var(--bar) + 20px)}
.sp-panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start}
.sp-panel + .sp-panel{margin-top:14px}
.js .sp-panel + .sp-panel{margin-top:0}
.sp-panel[hidden]{display:none}
.sp-panel.enter{animation:sp-in .45s var(--ease)}
@keyframes sp-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.sp-ph{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.sp-ph .sp-mark{width:64px;height:64px}
.sp-ph h3{margin:0 0 4px}
.sp-panel p{font-size:var(--fs-body);line-height:1.72;color:var(--ink-2);max-width:72ch;margin:0}
.sp-link{font-size:var(--fs-sm);color:var(--violet-t);text-decoration:none;font-weight:600}
.sp-link:hover{text-decoration:underline}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .sp-panels{position:static}
}
@media (prefers-reduced-motion:reduce){.sp-panel.enter{animation:none}.sp-tab{transition:none}}
.naicsg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.naics{display:grid;gap:4px;justify-items:center;align-content:center;min-height:96px;padding:18px 10px;
  border:1px solid var(--rule-2);border-radius:var(--r-sm);background:var(--surface);text-decoration:none;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.naics:hover{border-color:var(--violet-t);transform:translateY(-2px)}
.naics b{font-size:var(--fs-h4);letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.naics span{font-size:var(--fs-label);color:var(--ink-3)}
@media (max-width:1100px){.naicsg{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.naicsg{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* strategic cards close to two lines like the rows below; Read more opens the rest,
   including any address */
.crow-strat .crow-txt p{margin:0;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2);max-width:none}
.crow-strat .crow-txt p.crow-addr{margin-top:10px;color:var(--ink-3);text-align:start}
.crow-strat:not(.open) .crow-addr{display:none}
.crow-acts{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap}
.crow-visit{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:600 var(--fs-label)/1 Inter,sans-serif;
  color:var(--violet-t);text-decoration:none}

/* ---- forms ---------------------------------------------------------------------------- */
/* Contact page: details and a booking card beside the form, so neither side is empty */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4.5vw,64px);align-items:stretch}
@media (max-width:900px){.cgrid{grid-template-columns:1fr}}
.chead{display:grid;justify-items:center;gap:14px;margin-bottom:clamp(24px,3.4vh,36px);text-align:center}
.chead .lead{margin:0;max-width:none;text-align:center;text-align-last:center}
.chead .eyebrow{margin:0}
.cinfo{display:flex;flex-direction:column;gap:clamp(16px,2.2vh,24px)}
/* the last card takes up any slack, so both columns end on one line */
@media (min-width:901px){.cinfo-card{flex:1}}
.cf-title{margin:0 0 clamp(16px,2.4vh,24px)}
.cboxes{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);
  grid-auto-flow:column;gap:10px 18px}
.cboxes legend{font-size:var(--fs-sm);font-weight:500;margin-bottom:10px;padding:0}
@media (max-width:560px){.cboxes{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}
.cbox{display:flex !important;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:400;cursor:pointer}
.form .cbox input{width:20px;height:20px;padding:0;margin:0;flex:none;accent-color:var(--violet);border:0;background:none;box-shadow:none}
.ccount{justify-self:end;font-size:var(--fs-label);color:var(--ink-3);font-weight:400}
.ccard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(20px,2.2vw,28px)}
.ccard h2{margin:0 0 10px}
.ccard p{margin:0 0 16px;color:var(--ink-2);font-size:var(--fs-sm);max-width:none}
.cbook{border-color:color-mix(in srgb,var(--violet-t) 45%,var(--rule))}
.cdl{display:grid;gap:22px;margin:8px 0 26px}
.cdl > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px 18px;align-items:baseline}
.cdl dt{font:500 var(--fs-sm)/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--ink-3)}
.cdl dd{margin:0;font-size:var(--fs-lead);line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
/* links read as links: blue and underlined */
.cdl dd a{color:var(--blue-t);text-decoration:underline;text-underline-offset:3px}
.cdl dd a:hover{color:var(--violet-t)}
.cdl dd span{display:block;color:var(--ink-3)}
.csoc{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--rule)}
.csoc span{font-size:var(--fs-sm);color:var(--ink-3)}
.csoc a{width:48px;height:48px;border-radius:999px;border:1px solid var(--rule-2);display:grid;place-items:center;color:var(--ink-2)}
.csoc a:hover{color:var(--ink);border-color:var(--violet-t)}
.csoc svg{width:21px;height:21px;fill:currentColor}
.cinfo .ccard h2{font-size:var(--fs-h3)}
.cinfo .ccard p{font-size:var(--fs-body)}
.cformwrap{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(22px,2.6vw,34px)}
.cformwrap .form{max-width:none}
/* the form card runs the full height of the details column, so both end on one line */
@media (min-width:901px){.cformwrap{display:flex;flex-direction:column}
  .cformwrap .form{flex:1;display:flex;flex-direction:column}
  .cformwrap .form label:has(textarea){flex:1;grid-template-rows:auto 1fr}
  .cformwrap .form textarea{height:100%}}
@media (max-width:480px){.cdl > div{grid-template-columns:1fr}.cdl dd{font-size:var(--fs-body)}}
.form{display:grid;gap:17px;max-width:540px}
.form label{display:grid;gap:8px;font-size:var(--fs-sm);font-weight:500}
.form input,.form textarea{padding:14px 16px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--fs-sm);width:100%;color:var(--ink);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.form input:user-invalid{border-color:#F87171}
.form textarea{resize:vertical;min-height:140px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:var(--fs-sm);min-height:1.4em;margin:0}
.status.ok{color:var(--ok)} .status.err{color:var(--alert)}

/* ---- media ------------------------------------------------------------------------------ */
.figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--rule);margin:0}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* same size, width and setting as the programme leads below it */
.vabout{margin:clamp(18px,2.6vh,28px) 0 0;width:100%;max-width:none}
.vabout p{max-width:none;font-size:var(--fs-lead);line-height:1.7;color:var(--ink-2);
  text-align:justify;text-align-last:center}
.vabout p.ragged{text-align:center}
/* a longer, multi-paragraph hero intro, body size so the hero does not turn into a wall
   of lead-size text */
.plead{margin:0 0 26px}
.plead p{font-size:var(--fs-body);line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:none}
.plead p:last-child{margin-bottom:0}
.plead .plead-b{margin-bottom:6px}
.plead .plead-b b{color:var(--ink);font-weight:700}
.plead p + .plead-b{margin-top:22px}
/* green eyebrow for the green-tech product */
.eyebrow.green{color:var(--ok)}
.eyebrow.green::before{background:var(--ok)}


/* console text is interface, not prose: it stays ragged-right (see the justify rule in BASE) */
.cns p,.cns dd{text-align:start}
/* ======================================================================
   PRODUCT CONSOLES
   Copy left, the product's own interface right.
   ====================================================================== */

.cns{background:var(--console);border:1px solid var(--rule-2);position:relative;
  border-radius:var(--r-sm);overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}

/* console tone set, measured on #0C0A17: #5FBE8E is 7.4:1, #E08585 is 6.4:1, both safe
   on readouts */
.c-ok{color:var(--ok)}.c-alert{color:var(--alert)}.c-warn{color:var(--amber-t)}
.c-sky{color:var(--sky-t)}.c-violet{color:var(--violet-t)}.c-amber{color:var(--amber-t)}
.c-dim{color:var(--ink-3)}
.cbarfill.c-ok{background:var(--ok)}.cbarfill.c-alert{background:var(--alert)}
.cbarfill.c-warn{background:var(--amber)}.cbarfill.c-sky{background:var(--sky)}
.cbarfill.c-amber{background:var(--amber)}.cbarfill.c-dim{background:var(--rule-2)}

/* bar */
.cns-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:11px 14px;background:var(--panel);
  border-bottom:1px solid var(--rule);min-width:0}
/* the title owns the first row at every width, so tabs and badge always share the second */
.cns-id{display:flex;align-items:center;gap:7px;min-width:0;flex:1 0 100%}
.cns-bar > .cns-badge{margin-left:auto}
.cns-id i{width:7px;height:7px;border-radius:50%;background:var(--dot);flex:none}
.cns-id i:first-child{background:var(--violet)}
.cns-id span{font-size:var(--fs-label);color:var(--ink-3);margin-left:6px;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis;
  flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}
.ctabs{display:flex;gap:2px;flex:none}
.ctab{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);letter-spacing:.05em;
  padding:5px 10px;color:var(--ink-3);border:1px solid transparent;border-radius:4px}
.ctab.on{color:var(--ink);background:var(--tab-on);border-color:var(--rule-2)}
/* ---- fixed console geometry ---------------------------------------------- */
/* Every console is the same fixed height, so no console can move the page under the
   reader. The active view scrolls internally when it is taller; the shell never resizes. */
.cns{display:grid;grid-template-rows:auto 1fr}
.cns-body{overflow:hidden;min-height:0;align-content:start}
.cns-body > .cns-view.on{min-height:0}
/* ---- console footer bar -------------------------------------------------- */
/* the run control sits in its own bar, full width, flush to the bottom edge */
.cns .cns-report{position:absolute;left:15px;right:15px;bottom:78px;z-index:4;padding:18px 20px;
  border:1px solid var(--rule-2);border-radius:var(--r-sm);background:var(--panel);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);animation:cr-in .4s var(--ease)}
@keyframes cr-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cns .cr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cns .cr-head b{font-size:var(--fs-sm);color:var(--ink)}
.cns .cr-x{border:0;background:none;color:var(--ink-3);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.cns .cns-report dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.cns .cns-report dl div{background:var(--panel);padding:10px 12px}
.cns .cns-report dt{font-size:var(--fs-label);color:var(--ink-3)}
.cns .cns-report dd{margin:2px 0 0;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.cns .cns-report p{margin:12px 0 0;font-size:var(--fs-label);line-height:1.5;color:var(--ink-2);max-width:none}
@media (prefers-reduced-motion:reduce){.cns .cns-report{animation:none}}
.cns-foot{position:sticky;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 15px;border-top:1px solid var(--rule);background:var(--panel);
  margin:0 -15px -15px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.cns-body.flush .cns-foot{margin:0;border-radius:0}
.cns-stat{font-size:var(--fs-label);color:var(--ink-3);text-transform:none;letter-spacing:0;
  text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-running] .cns-stat,[data-alarm] .cns-stat{color:var(--ink)}

/* ---- live packet bars ---------------------------------------------------- */
.bars{display:flex;align-items:flex-end;gap:3px;height:56px;padding:8px 12px 10px}
.bars i{flex:1;background:var(--sky-t);border-radius:2px 2px 0 0;height:var(--h);
  transform-origin:bottom;animation:barpulse 1.9s var(--ease) infinite;
  animation-delay:var(--d);opacity:.85;
  transition:height 2.8s var(--ease),background-color .8s var(--ease)}
@keyframes barpulse{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1.18)}}
/* Three phases: the surge pins every bar at full height in red, mitigation lets them
   fall while still red, and only then do they go blue. */
[data-alarm] .bars i{background:var(--alert);animation-duration:.9s}
[data-alarm="surge"] .bars i{height:100%;animation:none;transform:none;
  transition:height .45s var(--ease),background-color .3s var(--ease)}
@media (prefers-reduced-motion:reduce){.bars i{animation:none}}

/* ---- scan traversal ------------------------------------------------------ */
/* A scan that changes nothing on screen is not a demo. The file being read and the
   line being read both light up as the pass walks the repository. */
.tnode[data-file].reading{background:color-mix(in srgb,var(--violet) 16%,transparent);
  color:var(--ink);border-left-color:var(--violet-t)}
.tnode[data-file].done{color:var(--ink-2)}
.cline.reading{background:color-mix(in srgb,var(--violet) 18%,transparent)}
.cline.reading .gsev{background:var(--violet-t)}
/* the agent's pointer: glides between targets, and a ring pulses where it clicks */
[data-cns]{position:relative}
.agent-cur{position:absolute;left:0;top:0;z-index:5;width:20px;height:20px;pointer-events:none;
  opacity:0;transition:transform .5s cubic-bezier(.3,.7,.2,1),opacity .3s var(--ease)}
.agent-cur.on{opacity:1}
.agent-cur svg{width:20px;height:20px;fill:var(--violet);stroke:#fff;stroke-width:1.4;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.agent-cur::after{content:"";position:absolute;left:-7px;top:-7px;width:18px;height:18px;
  border-radius:50%;border:2px solid var(--violet);opacity:0}
.agent-cur.tap::after{animation:agent-tap .55s var(--ease)}
@keyframes agent-tap{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.8)}}
@media (prefers-reduced-motion:reduce){.agent-cur{transition:none}.agent-cur.tap::after{animation:none}}
/* an attack has to be visible in the picture, not only in the numbers */

[data-alarm]{box-shadow:0 0 0 1px var(--alert), 0 26px 60px -28px rgba(224,133,133,.55)}
[data-alarm] .cns-bar{background:color-mix(in srgb, var(--alert) 12%, var(--panel))}
[data-alarm]{transition:color .4s var(--ease),box-shadow .4s var(--ease)}
/* Vanguard: the running step pulses so the campaign reads as moving. */
@keyframes pstep-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.pstep.run{animation:pstep-pulse 1s ease-in-out infinite}
.pstep.run b{color:var(--amber-t)}
.pstep.done b{color:var(--ok)}
.pstep.blocked b{color:var(--alert)}
[data-running] .cns-bar{background:color-mix(in srgb, var(--amber-t) 12%, var(--panel))}
button.ctab{cursor:pointer;background:none;transition:color .18s,background .18s,border-color .18s}
button.ctab:hover{color:var(--ink);background:var(--surface-2)}
.cns-view{display:none}
.cns-view.on{display:grid;gap:11px}
.cns-body.flush .cns-view.on{gap:0}

.cns .cns-act{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);font-weight:600;
  letter-spacing:.06em;padding:10px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--violet);background:var(--violet);color:#fff;
  transition:filter .2s,opacity .2s}
.cns .cns-act:hover{filter:brightness(1.12)}
.cns .cns-act[disabled]{opacity:.62;cursor:default}

.path{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border-top:1px solid var(--rule)}
.pstep{background:var(--panel);padding:13px 12px;display:grid;gap:5px;justify-items:start}
.pstep b{font-size:var(--fs-sm);color:var(--ink);font-weight:600}
.pstep > span:last-child{font-size:var(--fs-label);color:var(--ink-3);
  font-family:'JetBrains Mono',monospace;text-transform:none;letter-spacing:0}
.pdot{width:9px;height:9px;border-radius:50%;background:var(--rule-hi);transition:background .3s}
.pstep.run .pdot{background:var(--amber-t)}
.pstep.done .pdot{background:var(--ok)}
.pstep.blocked .pdot{background:var(--alert)}
.pstep.skip{opacity:.55}
@media (max-width:820px){.path{grid-template-columns:1fr 1fr}}
.cns-badge{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);font-weight:600;
  letter-spacing:.11em;padding:4px 9px;flex:none;margin-left:auto;
  border:1px solid currentColor;
  border-radius:4px;white-space:nowrap}

.cns-body{padding:15px;display:grid;gap:11px}
.cns-body.flush{padding:0;gap:0}
.dim{color:var(--ink-3)}

.cns-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.kpi{background:var(--panel);padding:13px 14px;display:grid;gap:5px;align-content:start}
.kpi .k{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.kpi .v{font-family:'JetBrains Mono',monospace;font-size:var(--fs-h4);font-weight:700;
  line-height:1.15;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.kpi .n{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--ink-3);
  line-height:1.45}

.cns-panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm)}
.plot-hd{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;
  border-bottom:1px solid var(--rule);font-size:var(--fs-label);color:var(--ink-2);letter-spacing:.04em}

@keyframes tracemove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.cns-feed{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm)}
.fhd{padding:9px 12px;border-bottom:1px solid var(--rule);font-size:var(--fs-label);
  letter-spacing:.14em;color:var(--ink-3)}
.frows{display:grid}
.frow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:9px 12px;border-bottom:1px solid rgba(36,31,61,.7);font-size:var(--fs-label);
  height:calc(1.5 * var(--fs-label) + 19px);box-sizing:border-box}
.frow:last-child{border-bottom:0}
.frow.new{animation:rowin .45s var(--ease)}
@keyframes rowin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ft{color:var(--violet-t);font-size:var(--fs-label);flex:none;font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0}
.fm{color:var(--ink-2);min-width:0;line-height:1.5;display:-webkit-box;
  -webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.fs{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);font-weight:700;
  letter-spacing:.1em;flex:none}

.mtr{display:grid;gap:7px}
.mrow{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:var(--fs-sm)}
.mrow b{font-weight:600;color:var(--ink)}
.mrow span{font-size:var(--fs-label);color:var(--ink-3);font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0}
.cbar{height:4px;background:var(--track);overflow:hidden;border-radius:2px}
.cbarfill{height:100%;transition:width .9s var(--ease)}
.mnote{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--ink-3);line-height:1.45}

.dhead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding-bottom:13px;border-bottom:1px solid var(--rule)}
.dlabel{font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:6px}
.dhead h4{font-size:var(--fs-body);font-weight:700;letter-spacing:-.016em;color:var(--ink)}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.dcell{background:var(--panel);padding:11px 12px;display:grid;gap:5px}
.dcell .k{font-size:var(--fs-label);letter-spacing:.12em;color:var(--ink-3)}
.dcell .v{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0}
.dwhy{background:var(--panel);border:1px solid var(--rule);padding:13px;border-radius:var(--r-sm)}
.dwhy .k{font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:8px}
.dwhy p{font-size:var(--fs-sm);line-height:1.66;color:var(--ink-2);max-width:none;margin:0}
.dbars{display:grid;gap:14px}

.cl-wrap{display:grid;grid-template-columns:150px 1fr;min-height:262px}
.cl-tree{border-right:1px solid var(--rule);padding:12px 0;display:grid;align-content:start;
  background:var(--panel)}
.tnode{padding:5px 12px;font-size:var(--fs-label);color:var(--ink-3);white-space:pre;
  border-left:2px solid transparent;text-transform:none;letter-spacing:0}
.tnode.dir{color:var(--ink-2);font-weight:600}
.tnode.hit{border-left-color:currentColor;background:rgba(109,40,217,.12)}
.cl-code{padding:12px 0;overflow-x:auto;background:var(--code)}
.cl-src[hidden]{display:none}
.cl-fname{font-size:var(--fs-label);color:var(--code-ink);opacity:.7;padding:0 14px 8px;margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.08);text-transform:none;letter-spacing:0}
.cline{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:baseline;
  padding:2px 14px 2px 0}
.cline.hot{background:rgba(224,133,133,.09)}
.gsev{width:3px;align-self:stretch;background:transparent}
.cline.hot .gsev{background:currentColor}
.cno{font-size:var(--fs-label);color:var(--gutter);width:32px;text-align:right;flex:none;
  font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.cl-code code{font-size:var(--fs-label);line-height:1.78;color:var(--code-ink);white-space:pre;
  overflow:hidden;text-overflow:ellipsis;font-family:'JetBrains Mono',monospace}
.cline.hot code{color:var(--code-ink-hi)}
.cl-find{grid-column:1 / -1;border-top:1px solid var(--rule);padding:14px;display:grid;gap:9px;
  align-content:start;background:var(--panel)}
.cl-find h4{font-size:var(--fs-sm);font-weight:700;letter-spacing:-.012em;line-height:1.4;color:var(--ink)}
.cl-find p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3);max-width:none;margin:0}
.cl-find .cns-badge{justify-self:start}
.fmeta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:4px;padding-top:11px;
  border-top:1px solid var(--rule)}
.fmeta>span{display:grid;gap:3px}
.fmeta b{font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0}
.fmeta span span{font-size:var(--fs-label);letter-spacing:.1em;color:var(--ink-3)}

.cell-wrap{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;align-items:center;
  background:var(--panel);border:1px solid var(--rule);padding:14px;border-radius:var(--r-sm)}
.cell-svg{width:100%;height:auto}
.cs-tank{fill:none;stroke:var(--rule-2);stroke-width:1}
.cs-fluid{fill:rgba(109,40,217,.1)}
.cs-plate rect{fill:#1C1734;stroke:var(--violet);stroke-width:.8}
.cs-ion circle{fill:var(--sky-t);opacity:.85}
.cs-flow path{fill:none;stroke:var(--violet);stroke-width:1}
@media (prefers-reduced-motion:no-preference){
  .cns.run .cs-ion circle{animation:ionflow 3.4s ease-in-out infinite}
  .cns.run .cs-ion circle:nth-child(2){animation-delay:.5s}
  .cns.run .cs-ion circle:nth-child(3){animation-delay:1s}
  .cns.run .cs-ion circle:nth-child(4){animation-delay:1.6s}
  .cns.run .cs-ion circle:nth-child(5){animation-delay:2.2s}
}
@keyframes ionflow{0%{transform:translateX(0);opacity:0}12%{opacity:.9}
  88%{opacity:.9}100%{transform:translateX(92px);opacity:0}}
.cs-lbl{fill:var(--ink-3);font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.13em}
.cell-side{display:grid;gap:14px}
.cell-side.wide{grid-template-columns:repeat(3,1fr);gap:18px}
.cns-steps{display:flex;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.cns-steps span{flex:1;text-align:center;padding:9px 6px;background:var(--panel);font-size:var(--fs-label);
  color:var(--ink-3);letter-spacing:.06em;transition:color .4s,background .4s}
.cns-steps span.on{color:var(--violet-t);background:var(--tab-on)}

.pdot{width:8px;height:8px;background:currentColor;margin-top:7px;flex:none;border-radius:1px}

/* carousel */

.cslide[hidden]{display:none}
.cslide{animation:slidein .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.cslide{animation:none}}
@keyframes slidein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

.ccap{position:absolute;inset:0;font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);
  letter-spacing:.06em;color:var(--ink-3);opacity:0;transition:opacity .3s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ccap.on{opacity:1}

.cdot{width:7px;height:7px;padding:0;border:0;cursor:pointer;background:var(--rule-2);
  border-radius:50%;transition:background .25s,transform .25s}
.cdot.on{background:var(--violet-t);transform:scale(1.25)}

@media (max-width:1180px){
  .ctabs{display:none}
  .cl-wrap{grid-template-columns:118px 1fr}
  .cl-find{grid-column:1 / -1;border-left:0;border-top:1px solid var(--rule)}
  .dgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .cns-kpis{grid-template-columns:1fr}
  .cell-wrap,.cell-side.wide,.cl-wrap{grid-template-columns:1fr}
  /* nothing in a console scrolls sideways on a phone: the file list wraps */
  .cl-tree{border-right:0;border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;padding:8px 0}
  .tnode{white-space:nowrap}
  /* grid and flex children default to their content's width, which is what pushed the
     consoles wider than a phone; let every part shrink to the console instead */
  .cns *{min-width:0}
  .cns-id span{flex:0 1 auto}
  .cline{grid-template-columns:auto auto minmax(0,1fr)}
  .cl-code{overflow-x:hidden}
  
  .frow{grid-template-columns:auto 1fr;row-gap:3px}
  .frow .fs{grid-column:2}
}

/* --- product feature rows: a heading and a paragraph beside a visual, alternating
   sides ------------------------------------------------------------------------ */
/* NOT .frow / .frows: those are the console's event-feed rows. Reusing the names put the
   feed's grid and border rules on every product feature. */
.feats{display:grid;gap:clamp(48px,7vh,92px)}
.feat>*{min-width:0}
.feat{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,64px);
  align-items:start}
.feat.b .fcopy{order:2}
.feat.b .fvis{order:1}
.fcopy{max-width:42rem}
.fcopy .d3{margin-bottom:20px}
.fkick{margin-bottom:18px}
.fbody{font-size:var(--fs-body);line-height:1.72;color:var(--ink-2);margin:0;max-width:52ch}
/* The panels are taller than the copy, so top-aligning moved the void to the bottom of
   the text column rather than removing it. Pinning the copy turns that space into
   something the layout is using: the argument stays in view while its evidence scrolls
   past it. Only above the single-column breakpoint, and only where the row is actually
   taller than the copy - sticky is inert otherwise. */
@media (min-width:1001px){
  .fcopy{position:sticky;top:calc(var(--bar) + 56px);align-self:start}
}
.fcopy h3{margin-bottom:16px}
.fcopy p{font-size:var(--fs-body);line-height:1.78;color:var(--ink-2);max-width:60ch;margin:0}
.fvis .figure{margin:0;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
@media (max-width:1000px){
  .feat,.feat.b{grid-template-columns:1fr;gap:26px}
  .feat.b .fcopy,.feat.b .fvis{order:0}
  .fcopy{max-width:none}
}

/* product hero: copy left, its console right */
.phero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,64px);align-items:center}
.phero>*{min-width:0}
.phero .stage{max-width:none}
@media (max-width:1000px){.phero{grid-template-columns:1fr;gap:30px}.phero .stage{max-width:none}}
@media (max-width:820px){.phero .cns,.fvis .cns{overflow-x:auto}}
@media (min-width:1001px){
  .phero-l{align-items:stretch}
  .phero-l > .rv{display:flex;flex-direction:column}
  .phero-l > .rv > .cns{flex:1;display:flex;flex-direction:column}
  .phero-l > .rv .cns-body{flex:1;display:flex;flex-direction:column}
  .phero-l > .rv .cell-wrap{flex:1;align-content:center}
  .phero-l .stage .stats{margin-bottom:0}
}
.phero-full{grid-column:1 / -1}
.phero-full .plead{margin-top:clamp(8px,1.6vh,16px)}

/* the joint venture is named as one, in the heading */

/* --- product showcase: every product once, copy left, its console right ---------- */
.ptabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:clamp(26px,4vh,44px);
  overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
/* phones: the tabs share the width instead of scrolling sideways */
@media (max-width:760px){
  .ptabs{flex-wrap:wrap;overflow:visible}
  .ptabs button{flex:1 1 auto;padding:12px 10px;font-size:var(--fs-sm)}
}
.ptabs button{padding:15px 22px;border:0;background:none;font-size:var(--fs-body);font-weight:600;
  color:var(--ink-3);cursor:pointer;white-space:nowrap;position:relative;transition:color .2s}
.ptabs button:hover{color:var(--ink-2)}
.ptabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--violet-t);transform:scaleX(0);transition:transform .3s var(--ease)}
.ptabs button[aria-selected="true"]{color:var(--ink)}
.ptabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ppanel[hidden]{display:none}
/* one products section, one numbered row per product line, all in the same shape so
   they read as one family */
.pline + .pline{margin-top:clamp(56px,8vh,96px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--rule)}
.pline-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px clamp(16px,2vw,28px);
  align-items:baseline;margin-bottom:clamp(22px,3.4vh,36px)}
/* number and category title share one size, 32px, on all three rows */
.pline-n{font-size:var(--fs-h3);font-weight:400;line-height:1.08;color:var(--violet-t);letter-spacing:-.02em}
.pline-head .pline-cat{font-size:var(--fs-h3);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.pline-head h3{margin:0 0 8px}
/* every row reads the same: number and category in the warm accent, its one line in
   grey, then the product name in white */
.pline-cat{color:#FFE3B8}
:root[data-theme="light"] .pline-cat{color:#C2410C}
.pline-name{margin:0 0 16px;color:var(--ink)}
.pline-head .lead{margin:0;max-width:62ch;font-size:var(--fs-sm);color:var(--ink-3);text-align:start;text-align-last:auto}
.pline-name{font-size:var(--fs-h3)}
/* tick marks on Speed / Scalability / Integration */
.pkeys{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.pkeys li{position:relative;padding-left:40px;font-size:var(--fs-body);line-height:1.5;color:var(--ink-2)}
.pkeys li::before{content:"";position:absolute;left:0;top:.15em;width:26px;height:26px;border-radius:7px;
  background:color-mix(in srgb,var(--violet) 12%,transparent) no-repeat center/15px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E");
  border:1px solid color-mix(in srgb,var(--violet) 30%,transparent)}
.pkeys b{color:var(--ink)}
.vhead{text-align:center;display:grid;justify-items:center;max-width:none}
.vhead .lead{margin-left:auto;margin-right:auto;text-align:center}
/* the product taglines as banners, so they do not read as a second title; one line at
   desktop sizes */
.ptagline.ponel{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:0 0 20px;
  font-size:var(--fs-label);font-weight:600;color:var(--violet-t);
  background:color-mix(in srgb,var(--violet) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--violet) 28%,transparent);border-radius:var(--r-sm)}
.ptagline.ponel svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
@media (min-width:1001px){.ptagline.ponel{width:max-content;max-width:100%}}
.ptagline{font-size:var(--fs-body);font-weight:700;line-height:1.4;color:var(--ink);margin:0 0 12px;max-width:none;text-align:start;text-align-last:auto}
/* Discovium is a full-width band: full screen tall, the picture as tall as the band at its
   own proportions, 5vw past the right edge, with fades. It stays row 02 of the products
   section. */
#products{overflow-x:clip}
.pline-dv{position:relative;isolation:isolate;min-height:calc(100svh - var(--bar));
  display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vh,64px) 0}
.pline + .pline-dv{margin-top:clamp(40px,6vh,72px);padding-top:clamp(40px,6vh,64px);border-top:0}
.pline-dv + .pline{margin-top:0}
.dv-art{position:absolute;z-index:-1;top:0;bottom:0;left:calc((100% - 100vw) / 2);right:calc((100% - 100vw) / 2);
  background:#050C1B var(--dv-img) right -5vw center/auto 100% no-repeat}
.dv-art::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ground) 0%,transparent clamp(60px,9vh,110px)),
             linear-gradient(90deg,rgba(5,12,27,.96) 0%,rgba(5,12,27,.82) 34%,rgba(5,12,27,.1) 62%,transparent 100%),
             linear-gradient(0deg,rgba(5,12,27,.97) 0%,rgba(5,12,27,.9) 22%,transparent 44%)}
.dv-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(50px,7vh,90px);
  background:linear-gradient(180deg,transparent,var(--ground))}
:root[data-theme="light"] .dv-art{background:var(--ground) var(--dv-img-light) right -5vw center/auto 100% no-repeat}
:root[data-theme="light"] .dv-art::before{
  background:linear-gradient(90deg,var(--ground) 0%,var(--ground) 36%,color-mix(in srgb,var(--ground) 0%,transparent) 56%),
             linear-gradient(0deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 0%,transparent) 26%),
             linear-gradient(180deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 0%,transparent) 12%)}
:root[data-theme="light"] .dv-art::after{display:none}
.dv-copy{max-width:min(48rem,54%)}
.dv-copy .pline-head{margin-bottom:clamp(18px,2.6vh,28px)}

.dv-copy .lead{margin-bottom:24px}
.dv-copy > .lead{max-width:38rem}
.dv-copy .pline-head .lead{margin-bottom:0}
.dv-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);
  margin-top:clamp(36px,6vh,64px);padding-top:clamp(18px,2.6vh,26px);border-top:1px solid var(--rule)}
.dv-figs b{display:block;font-size:var(--fs-h2);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#FFE3B8}
.dv-figs span{font-size:var(--fs-sm);color:var(--ink-3)}
:root[data-theme="light"] .dv-figs b{color:var(--ink)}
@media (max-width:980px){
  .pline-dv{min-height:0}
  .dv-art{background-position:70% center}
  .dv-art::before{background:linear-gradient(0deg,rgba(5,12,27,.97) 20%,rgba(5,12,27,.6) 100%)}
  .dv-copy{max-width:none}
  .dv-figs{grid-template-columns:1fr 1fr}
}
.pgrid{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(28px,3.6vw,58px);align-items:center}
.pcopy{max-width:38rem}
.pconsole{min-width:0}
/* the three homepage consoles are one height, and each gives the extra to its main visual:
   the packet bars on CyberNeuro-RT, the kill chain on Vanguard */
@media (min-width:1001px){
  .ppanel .pconsole .cns-body{display:flex;flex-direction:column}
  .ppanel .pconsole .cns-view.on{flex:1;display:flex;flex-direction:column}
  .ppanel .pconsole .cns-view.on > .cns-panel:has(.bars),
  .ppanel .pconsole .cns-view.on > .cns-panel:has(.path){flex:1;display:flex;flex-direction:column}
  .ppanel .pconsole .cns-panel:has(.bars) .bars{height:150px}
  .ppanel .pconsole .cns-panel:has(.path) .path{flex:1}
  .ppanel .pconsole .cns-view.on > .cns-foot{margin-top:auto}
}
.pcopy .lbl{color:var(--violet-t);display:block;margin-bottom:14px}
.lbl-pill{display:inline-block;padding:4px 10px;margin-right:4px;border-radius:6px;color:var(--violet-t);
  background:color-mix(in srgb,var(--violet) 14%,transparent);border:1px solid color-mix(in srgb,var(--violet) 32%,transparent)}
/* product tabs, L-shaped: copy (with the first feature under Integration) and the demo
   share the top row; the other two features run as full-width rows underneath */
.ptab{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
.ptab-c{align-items:center}
.ptab .pcopy{max-width:none}
.ptab .pfirst{margin-bottom:0}
.ptab .pfull{grid-column:1 / -1}
.ptab .pfull .ppt{padding:22px 0}
@media (min-width:1081px){
  .ptab-l{align-items:stretch;row-gap:28px}
  .ptab-l .pfirst .ppt:last-child{padding-bottom:0}
  .ptab-l .pconsole{display:flex;flex-direction:column}
  .ptab-l .pconsole .cns{flex:1;display:flex;flex-direction:column}
  .ptab-l .pconsole .cns-body{flex:1}
  .ptab-l .pconsole .cns-panel:has(.bars) .bars{flex:1;height:auto;min-height:150px}
}
.pcopy h3{margin-bottom:16px}
.pcopy .lead{margin-bottom:24px}
.ppts{display:grid;gap:0;margin-bottom:28px}
.ppt{padding:15px 0;border-top:1px solid var(--rule)}
.ppt b{display:block;font-size:var(--fs-body);font-weight:700;color:var(--ink);margin-bottom:4px;
  letter-spacing:-.012em}
.ppt span{font-size:var(--fs-body);line-height:1.66;color:var(--ink-2)}
@media (max-width:1080px){
  .pgrid{grid-template-columns:1fr;gap:30px}
  .pcopy{max-width:none}
}

/* Product "how it works": cards, never a list. */

/* --- CyberNeuro-RT placements + triage ------------------------------------ */
.dep{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.dep-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,1.2fr) auto;
  gap:16px;align-items:center;background:var(--panel);padding:14px 15px}
.dep-n{display:grid;gap:3px}
.dep-n b{font-size:var(--fs-sm);color:var(--ink);font-weight:600}
.dep-hw{font-size:var(--fs-label);color:var(--ink-3)}
.dep-bar{display:grid;gap:6px}
.dep-note{font-size:var(--fs-label);color:var(--ink-3)}

.tq{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.tq-row{display:grid;grid-template-columns:auto 1fr;gap:14px;background:var(--panel);padding:14px 15px}
.tq-rank{font-size:var(--fs-h4);font-weight:700;color:var(--ink-3);line-height:1.1;width:20px}
.tq-body{display:grid;gap:8px;min-width:0}
.tq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tq-where{font-size:var(--fs-label);color:var(--ink-2)}
.tq-why{font-size:var(--fs-sm);line-height:1.55;color:var(--ink);margin:0;max-width:none}
.tq-sup{display:flex;align-items:baseline;gap:12px;padding:13px 15px;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm)}
.tq-supn{font-size:var(--fs-h4);font-weight:700;color:var(--violet-t);line-height:1}
.tq-supl{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-3)}

@media (max-width:820px){
  .dep-row{grid-template-columns:1fr auto;row-gap:10px}
  .dep-row .dep-bar{grid-column:1 / -1}
}

/* --- PANELS: other screens of the same product -------------------------------------
   These sit in the feature rows and share the console's chrome, density and tokens. --- */
.cns-split{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.prow-k{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:14px;
  background:var(--panel);padding:13px 15px;align-items:baseline}
.prow-k .rk{font-size:var(--fs-label);letter-spacing:.11em;color:var(--ink-3);
  overflow-wrap:anywhere;line-height:1.35}
/* Not `.rv`: that is the scroll-reveal class and sets opacity:0 until an observer adds
   `.vis`. Panel cells are never observed, so naming them .rv made them invisible. */
.prow-k .pv{font-size:var(--fs-sm);color:var(--ink);font-weight:600}

.scope-list{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm);
  overflow:hidden}
.scope-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--ink)}
.scope-row.out{color:var(--ink-3)}
.scope-row .mono{font-size:var(--fs-sm)}

.vloop{display:grid;gap:10px}
.mgcard{margin-top:clamp(24px,3.5vh,40px);display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:clamp(20px,2.4vw,30px);border:1px solid var(--rule);
  border-left:3px solid var(--violet);border-radius:var(--r-sm);background:var(--surface)}
.mgcard .eyebrow{margin-bottom:8px}
.mgcard p{margin:0;color:var(--ink-2);font-size:var(--fs-body)}
.vl-row{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:baseline;
  padding:14px 15px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--panel)}
.vl-n{font-size:var(--fs-label);color:var(--amber-t)}
.vl-row b{font-size:var(--fs-sm);color:var(--ink)}
.vl-d{font-size:var(--fs-label);color:var(--ink-3)}
.vbox{padding:13px 15px;border:1px solid var(--amber-t);border-radius:var(--r-sm);
  color:var(--amber-t);font-size:var(--fs-label);
  background:color-mix(in srgb,var(--amber-t) 8%,transparent)}

.lib{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.lib-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(90px,1.1fr) auto;
  gap:16px;align-items:center;background:var(--panel);padding:14px 15px}
.lib-name{font-size:var(--fs-sm);color:var(--ink);font-weight:600}

.vf-head{display:grid;gap:7px}
.vf-head h4{font-size:var(--fs-h4);font-weight:700;color:var(--ink);letter-spacing:-.016em}
.vf-head .mono{font-size:var(--fs-label)}
.vf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.vf-col{background:var(--panel);padding:15px;display:grid;gap:10px;align-content:start;
  justify-items:start}
.vf-col.agree{background:var(--col-hi)}
.vf-k{font-size:var(--fs-label);letter-spacing:.13em;color:var(--ink-3)}
.vf-col p{font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2);margin:0;max-width:none}
.vf-rejects{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm);
  overflow:hidden}
.vf-rej{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;gap:14px;
  align-items:center;padding:13px 15px;border-top:1px solid var(--rule)}
.vf-rej .mono{font-size:var(--fs-label);color:var(--ink-3)}
.vf-why{font-size:var(--fs-sm);color:var(--ink-3)}

.stages{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.st-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:14px;align-items:center;
  background:var(--panel);padding:12px 15px}
.st-row.resumed{background:var(--row-hi)}
.st-ck{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(95,190,142,.18);color:var(--ok);font-size:var(--fs-label);line-height:1}
.st-ck.run{background:rgba(251,191,36,.18);border:2px solid var(--amber-t)}
.st-ck.wait{background:none;border:2px solid var(--rule-hi)}
.st-n{font-size:var(--fs-label);color:var(--ink-3);width:14px}
.st-name{font-size:var(--fs-sm);color:var(--ink)}
.st-dur{font-size:var(--fs-label);color:var(--ink-3)}
.st-dur.dim{color:var(--ink-3)}

.diff{background:var(--code);border:1px solid var(--rule);border-radius:var(--r-sm);
  overflow:hidden}
.dline{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:6px 15px;align-items:baseline}
.dline code{font-size:var(--fs-sm);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--code-ink)}
.dline .dn{font-size:var(--fs-label);color:var(--gutter);width:30px;text-align:right}
.dline.del{background:rgba(224,133,133,.12)}
.dline.del code{color:var(--code-del)}
.dline.add{background:rgba(95,190,142,.11)}
.dline.add code{color:var(--code-add)}

/* `.mono` in this design is a LABEL style: uppercase with wide tracking. That is right
   for "AUTHORIZED BY" and wrong for anything literal - source code, a hostname, a file
   path, a reference id. Those read as shouting and, worse, as inaccurate: memcpy is not
   MEMCPY. Reset wherever the monospace is carrying real content. */
.diff code,.dline .dn,.scope-row .mono,.vf-head .mono,.vf-rej .mono,
.prow-k .pv.mono,.act,.st-dur,.cns-id span,
.dep-hw,.dep-note,.tq-where,
.cl-code code,.cno,.tnode{text-transform:none;letter-spacing:0}
.rk,.vf-k,.fhd{text-transform:uppercase}

.acts{display:flex;gap:10px;flex-wrap:wrap}
.act{font-size:var(--fs-label);padding:9px 15px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--rule-2);color:var(--ink-2);font-family:'JetBrains Mono',monospace}
.act:first-child{background:var(--violet);border-color:var(--violet);color:#fff}

@media (max-width:820px){
  .vf-grid{grid-template-columns:1fr}
  .lib-row{grid-template-columns:1fr auto;gap:10px}
  .lib-row .cbar{grid-column:1 / -1}
  .prow-k{grid-template-columns:1fr;gap:5px}
  .vf-rej{grid-template-columns:1fr auto}
  .st-row{grid-template-columns:auto auto 1fr;row-gap:6px}
  .st-row .st-dur,.st-row .cns-badge{grid-column:3}
}


@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  
}
/* the bar needs ~1240px with the wordmark always shown, so the burger takes over below
   that rather than at 820, where the CTA would run off the screen */
@media (max-width:1239px){
  .nav{display:none;position:fixed;inset:var(--bar) 0 auto;background:var(--ground);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    margin:0;padding:16px 4vw;gap:0;height:auto;max-height:calc(100svh - var(--bar));overflow-y:auto}
  .top.open .nav{display:flex}
  .nav > li{height:auto;display:block;border-bottom:1px solid var(--rule)}
  .nav > li:last-child{border-bottom:0}
  .nav a,.nav button{padding:15px 0;font-size:var(--fs-body);width:100%;justify-content:space-between}
  /* the dropdown becomes an inline accordion rather than a floating panel */
  .menu{position:static;translate:none;width:auto;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;display:none;grid-template-columns:1fr;padding:0 0 12px}
  .nav li.open .menu{display:grid}
  .menu a{padding:11px 14px;background:var(--surface);margin-bottom:4px}
  /* the desktop panel is two columns side by side; in the menu the groups stack */
  .msheet{grid-template-columns:1fr;gap:14px;padding:0;background:none;border:0;box-shadow:none}
  .burger{display:flex;margin-left:0}
  .lang{margin-left:auto}
  .top .cta{padding:9px 16px}
}
@media (max-width:820px){
  
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:var(--fs-body)}
  
  .hero{min-height:0}
}

/* ---- Discovium ---------------------------------------------------------------- */
/* figure colour code: ember is strength, steel is survival, white-hot is confidence.
   The plates stay dark in both themes, like the consoles. */
.dv-plate{--dv-ground:#131C26;--dv-raised:#1D2935;--dv-line:#2E3D4C;--dv-text:#E6ECF1;
  --dv-dim:#9FB0BF;--dv-ember:#FF8B3D;--dv-steel:#86B4DA;--dv-hot:#FFE3B8;
  background:var(--dv-ground);color:var(--dv-text);border-radius:var(--r);
  box-shadow:0 30px 60px -34px rgba(5,13,30,.6)}
.sw-ember{background:#FF8B3D}.sw-steel{background:#86B4DA}
.sw-hot{background:#FFE3B8;box-shadow:0 0 12px #FFE3B8}
.dv-space{margin:0;padding:16px;display:grid;gap:10px}
.dv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dv-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--dv-raised,#1D2935)}
.dv-seg button{border:0;background:none;color:#9FB0BF;font:600 var(--fs-label)/1 Inter,sans-serif;
  padding:9px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.dv-seg button[aria-pressed="true"]{background:#FF8B3D;color:#131C26}
.dv-hint{font-size:var(--fs-label);color:#9FB0BF}
.dv-canvas{position:relative;aspect-ratio:1/0.82}
#dv-space{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none;border-radius:10px}
#dv-space.dragging{cursor:grabbing}
#dv-space:focus-visible{outline:2px solid #FF8B3D;outline-offset:2px}
.dv-readout{font-size:var(--fs-sm);color:#9FB0BF}
.dv-readout b{color:#FFE3B8;font-size:var(--fs-h4);margin-right:8px}
.dv-space figcaption{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-label);color:#9FB0BF}
.dv-key{display:inline-flex;align-items:center;gap:7px}
.dv-key i{width:9px;height:9px;border-radius:50%}
.k-hot{background:#FFE3B8;box-shadow:0 0 8px #FFE3B8}.k-dim{background:#9FB0BF}
.dv-two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,64px);
  align-items:center;margin-bottom:clamp(28px,4vh,48px)}
.dv-dims{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.dv-dim{padding:clamp(20px,2.4vw,28px);border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.dv-dim p{margin:0;color:var(--ink-2)}
.dv-sw{display:block;width:40px;height:6px;border-radius:3px;margin-bottom:16px}
.dv-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);
  margin-top:clamp(28px,4vh,44px);padding-top:clamp(22px,3vh,32px);border-top:1px solid var(--rule)}
.dv-figs b{display:block;font-size:var(--fs-display);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.dv-figs span{color:var(--ink-3);font-size:var(--fs-sm)}
.dv-scale{margin:0 0 clamp(26px,4vh,40px)}
.dv-band{position:relative;margin-left:50%;width:20%;text-align:center;padding-bottom:10px}
.dv-band span{font-size:var(--fs-label);font-weight:600;color:#C7401A;white-space:nowrap}
.dv-bar{height:14px;border-radius:999px;position:relative;
  background:linear-gradient(90deg,#86B4DA,#FFC37A 45%,#FF8B3D 65%,#C7401A 85%,#7A1E12)}
.dv-bar::after{content:"";position:absolute;left:50%;width:20%;top:-6px;bottom:-6px;border-radius:8px;
  border:2px solid var(--ink);opacity:.7}
.dv-ticks{display:flex;justify-content:space-between;margin-top:10px;font-size:var(--fs-label);color:var(--ink-3)}
.dv-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
.dv-pair p{color:var(--ink-2);margin:0}
.dv-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:10px;vertical-align:1px}
.dv-loopgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center}
.dv-steps{list-style:none;margin:clamp(20px,3vh,30px) 0 0;padding:0;display:grid;gap:8px}
.dv-steps li{padding:14px 18px;border:1px solid var(--rule);border-left:3px solid var(--rule);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.dv-steps li.on{border-left-color:#FF8B3D;background:var(--surface-2)}
.dv-steps h3{font-size:var(--fs-sm);margin:0 0 4px;color:var(--ink)}
.dv-steps p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.dv-loop{display:block;width:100%;height:auto;font-family:Inter,sans-serif}
.dv-loop .dv-node circle{fill:#1D2935;stroke:#2E3D4C;stroke-width:1.5;transition:fill .3s,stroke .3s}
.dv-loop .dv-node text{fill:#9FB0BF;transition:fill .3s}
.dv-loop .dv-node.on circle{fill:#2A1A12;stroke:#FF8B3D}
.dv-loop .dv-node.on text{fill:#FFE3B8}
.dv-p{color:var(--ink-2);max-width:none}
.dv-record{padding:clamp(20px,2.4vw,28px)}
.dv-rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dv-rhead strong{font-size:var(--fs-sm)}
.dv-redact{width:120px;height:12px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#2E3D4C 0 10px,#1D2935 10px 14px)}
#dv-rows{margin-top:16px;display:grid;gap:12px}
.dv-row{display:grid;grid-template-columns:130px 1fr 96px;gap:14px;align-items:center;font-size:var(--fs-label)}
.dv-meter{height:8px;border-radius:999px;background:#1D2935;overflow:hidden}
.dv-meter i{display:block;height:100%;width:0;border-radius:999px;transition:width .9s var(--ease)}
.dv-tier{text-align:right;font-weight:600}
.dv-tier.t1{color:#86B4DA}.dv-tier.t2{color:#E6ECF1}.dv-tier.t3{color:#FF8B3D}
.dv-cap{margin-top:16px;padding-top:14px;border-top:1px solid #2E3D4C;font-size:var(--fs-sm);color:#9FB0BF}
.dv-cap b{color:#E6ECF1}
.dv-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.dv-proof-i{padding:clamp(20px,2.4vw,28px);border:1px solid var(--rule);border-top:3px solid #FF8B3D;
  border-radius:var(--r);background:var(--surface)}
.dv-proof-i p{margin:0;color:var(--ink-2);font-size:var(--fs-sm)}
.dv-table{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.dv-table table{width:100%;border-collapse:collapse;min-width:640px}
.dv-table th,.dv-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--rule);
  font-size:var(--fs-sm);vertical-align:top}
.dv-table thead th{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.dv-table thead th:last-child{color:#C7401A}
.dv-table tbody th{color:var(--ink);width:18%}
.dv-table td{color:var(--ink-2)}
.dv-table td:last-child{color:var(--ink);font-weight:600}
/* phones: the table fits the screen and wraps, rather than scrolling sideways */
@media (max-width:640px){
  .dv-table{overflow-x:visible}
  .dv-table table{min-width:0;table-layout:fixed}
  .dv-table th,.dv-table td{padding:12px 10px;overflow-wrap:anywhere}
  .dv-table tbody th{width:28%}
}
.dv-table tr:last-child th,.dv-table tr:last-child td{border-bottom:0}
.dv-table tbody tr:hover{background:var(--surface-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dv-domains{list-style:none;margin:0 0 clamp(22px,3vh,32px);padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px}
.dv-domains li{padding:10px 18px;border:1px solid var(--rule-2);border-radius:999px;
  background:var(--surface);font-size:var(--fs-sm);color:var(--ink-2)}
.dv-note{text-align:center;max-width:none;margin:clamp(20px,3vh,30px) auto 0;font-size:var(--fs-label);color:var(--ink-3)}
@media (max-width:980px){
  .dv-two,.dv-loopgrid{grid-template-columns:1fr}
  .dv-dims,.dv-proof{grid-template-columns:1fr}
  .dv-figs{grid-template-columns:1fr 1fr}
  .dv-pair{grid-template-columns:1fr}
  .dv-band{margin-left:40%;width:30%}
}
@media (max-width:640px){.dv-band{margin-left:0;width:auto;text-align:left}
  .dv-space{min-width:0}.dv-seg{flex-wrap:wrap;border-radius:16px}.dv-seg button{padding:8px 11px}}
@media (max-width:520px){.dv-row{grid-template-columns:96px 1fr 80px}}