:root{
  --ink:#1A1813; --ink-deep:#100F0C; --ink-soft:#2A2721;
  --cream:#F5F2EA; --cream-2:#F0ECE2; --paper:#FAF8F3;
  --terra:#C96A3C; --terra-soft:rgba(201,106,60,.10);
  /* the accent at full strength is only 3.5:1 on cream, so small text uses a
     darkened cut of the same hue that clears AA on both paper and cream */
  --terra-ink:#A85932;
  --moss:#4F6B3A;
  --rule:rgba(26,24,19,.14); --rule-2:rgba(26,24,19,.08);
  --rule-dark:rgba(240,236,226,.16); --rule-dark-2:rgba(240,236,226,.08);
  --muted:rgba(26,24,19,.64); --muted-dark:rgba(240,236,226,.62);
  --bp:rgba(26,24,19,.42); --bp-2:rgba(26,24,19,.20);
  --bp-txt:rgba(26,24,19,.5); --bp-tick:rgba(26,24,19,.45);
  --bp-faint:rgba(26,24,19,.08);
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --wrap:1200px; --gut:40px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;overflow-x:clip;background:var(--cream);color:var(--ink);
     font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.45;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* height:auto is load bearing: width/height attributes are set on images for
   layout stability, and without this the height attribute lands as a literal
   CSS height and object-fit:fill stretches the picture. Components that want
   a fixed height set it themselves and win on specificity. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--cream);
      padding:12px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.13em}
.skip:focus{left:0}

/* ---------------- type ---------------- */
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,5.2vw,64px);line-height:.92;letter-spacing:-.032em}
h2{font-size:clamp(30px,3.6vw,44px);line-height:.94;letter-spacing:-.028em}
h3{font-size:22px;line-height:1.06;letter-spacing:-.018em}
h4{font-size:17px;line-height:1.15;letter-spacing:-.012em}
p{margin:0}
.lede{font-size:clamp(18px,1.5vw,20px);line-height:1.42;color:var(--muted);max-width:62ch;
      letter-spacing:-.008em}
.body{font-size:17px;line-height:1.45;color:var(--muted);max-width:64ch}
.small{font-size:15px;line-height:1.5;color:var(--muted)}
.label{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
       text-transform:uppercase;color:var(--muted);line-height:1}
.tag{display:inline-block;font-family:var(--mono);font-weight:500;font-size:10px;
     letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;
     border:1px solid var(--rule);color:var(--muted);line-height:1}
.num{font-variant-numeric:tabular-nums}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:500;
     font-size:11px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
     padding:16px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--cream);
     transition:background .18s ease,color .18s ease,border-color .18s ease;line-height:1;
     white-space:nowrap}
.btn:hover{background:transparent;color:var(--ink)}
.btn .ar{display:grid;place-items:center;width:20px;height:20px;border:1px solid currentColor;
         font-size:10px;line-height:1}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent;
           border-bottom:1px solid var(--ink);padding:16px 2px}
.btn-ghost:hover{background:transparent;color:var(--muted);border-bottom-color:var(--muted)}
.btn-light{background:var(--cream-2);border-color:var(--cream-2);color:var(--ink)}
.btn-light:hover{background:transparent;color:var(--cream-2)}
/* Inside a dark section --ink is remapped to cream, so a solid button would be
   cream on cream. Every button variant resolves to the light treatment there. */
.dark .btn,.dark .btn-light,.close .btn,.close .btn-light,.band .btn{background:#F0ECE2;border-color:#F0ECE2;color:#1A1813}
.dark .btn:hover,.dark .btn-light:hover,.close .btn:hover,.close .btn-light:hover{background:transparent;color:#F0ECE2}
.dark .btn-ghost,.close .btn-ghost,.band .btn-ghost{background:transparent;color:#F0ECE2;border-color:transparent;
                 border-bottom-color:#F0ECE2}
.dark .btn-ghost:hover,.close .btn-ghost:hover{background:transparent;color:rgba(240,236,226,.62);
                       border-bottom-color:rgba(240,236,226,.62)}
:where(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--terra);
     outline-offset:3px}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(245,242,234,.88);
     backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
     border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:32px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{height:20px;width:auto}
.brand .wm{font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1}
.nav-links{display:flex;align-items:center;gap:8px;margin-inline:auto}
.nav-links>*{position:relative}
.nav-links a{display:block;padding:8px 12px;font-family:var(--mono);font-weight:500;font-size:11px;
             letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--muted);
             transition:color .16s ease;line-height:1}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.has-menu>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.has-menu:focus-within>a::after,.has-menu.open>a::after{transform:translateY(0) rotate(225deg)}
@media (hover:hover){.has-menu:hover>a::after{transform:translateY(0) rotate(225deg)}}
.menu{position:absolute;left:0;top:calc(100% + 10px);min-width:240px;background:var(--paper);
  border:1px solid var(--rule);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  box-shadow:0 18px 40px -24px rgba(26,24,19,.4)}
.has-menu:focus-within .menu,.has-menu.open .menu{opacity:1;visibility:visible;transform:none}
@media (hover:hover){.has-menu:hover .menu{opacity:1;visibility:visible;transform:none}}
.menu a{display:flex;align-items:baseline;gap:10px;padding:11px 12px;text-transform:none;
        font-family:var(--sans);font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.menu a:hover{background:var(--cream-2)}
.menu a .mk{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--muted);flex:none}
.nav-cta{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;
         font-size:11px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;flex:none;
         line-height:1}
.nav-cta .ar{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--ink);
             font-size:10px;transition:background .18s ease,color .18s ease}
.nav-cta:hover .ar{background:var(--ink);color:var(--cream)}
.burger{display:none;flex:none;width:40px;height:40px;margin-right:-8px;background:none;border:0;
        padding:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:1.5px;background:var(--ink);
             transition:transform .26s var(--ease),opacity .2s ease}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:23px}
body.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.mobile{display:none}

/* ---------------- page shells ---------------- */
.sec{padding:96px 0;border-bottom:1px solid var(--rule)}
.sec.tight{padding:72px 0}
.sec.flush{border-bottom:0}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:64px;max-width:72ch}
.sec-head.mid{align-items:center;text-align:center;margin-inline:auto}
/* head sits close to its content when the content is the point (quotes, stage list) */
.sec-head.snug{margin-bottom:40px}
.sec-head.mid .lede{text-align:center}
/* A dark section remaps the ink tokens rather than restating a colour on every
   component. Anything built from var(--ink) / --muted / --rule / --paper / --bp
   inverts on its own, which is what stops body copy going dark on dark.
   The literals below are deliberate: resolving --ink here would pick up the
   remapped value declared in the same block. */
.dark,.close,.sfoot,.band,.proof-media{color:#F0ECE2;
  --ink:#F0ECE2;
  --muted:rgba(240,236,226,.62);
  --rule:rgba(240,236,226,.16);
  --rule-2:rgba(240,236,226,.08);
  --paper:rgba(240,236,226,.025);
  --terra-ink:#E08A5A;
  --bp:rgba(240,236,226,.44);
  --bp-2:rgba(240,236,226,.22);
  --bp-txt:rgba(240,236,226,.56);
  --bp-tick:rgba(240,236,226,.45);
  --bp-faint:rgba(240,236,226,.07)}
.dark{background:#1A1813;border-bottom:0;
}
.dark h1,.dark h2,.dark h3,.dark h4{color:#F0ECE2}
.deep{background:#100F0C}

/* Plates that deliberately stay light inside a dark section restore the
   light-mode tokens for their own subtree. */
.dark .phase,.dark .rgroup{background:#FAF8F3;
  --ink:#1A1813;
  --muted:rgba(26,24,19,.64);
  --rule:rgba(26,24,19,.14);
  --rule-2:rgba(26,24,19,.08);
  --terra-ink:#A85932;
  --bp:rgba(26,24,19,.42);
  --bp-2:rgba(26,24,19,.20);
  --bp-txt:rgba(26,24,19,.5);
  --bp-tick:rgba(26,24,19,.45);
  --bp-faint:rgba(26,24,19,.08)}
.dark .phase h4,.dark .rgroup h4{color:#1A1813}

/* ---------------- hero (home) ---------------- */
.hero{position:relative;border-bottom:1px solid var(--rule);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.06fr;align-items:center;gap:56px;
           padding-block:72px 64px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero-art{position:relative;will-change:transform}
.hero-art .h-float{position:relative;animation:heroFloat 9s ease-in-out infinite}
.hero-art .h-anno{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-art .h-anno .march{animation-duration:5s}
.hero-art .plate{width:100%}
.hero-art .glow{position:absolute;left:24%;top:42%;width:36%;height:44%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%, rgba(224,146,84,.5), rgba(224,146,84,0) 68%);
  filter:blur(10px);mix-blend-mode:multiply;animation:heroGlow 6.5s ease-in-out infinite}
.hero-art .sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(ellipse 74% 62% at 50% 47%,#000 45%,transparent 78%);
          mask-image:radial-gradient(ellipse 74% 62% at 50% 47%,#000 45%,transparent 78%);
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  background-size:280% 100%;background-position:120% 0;
  animation:heroSheen 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes heroGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes heroSheen{0%,55%{background-position:120% 0}85%,100%{background-position:-40% 0}}

/* Visually hidden, but present for screen readers and for anything reading the
   page as text. Never display:none, which would take it out of both. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Typewriter object in the hero headline.

   The HTML holds exactly ONE complete headline, "Agents that run the full
   lifecycle". The other four phrases are not in the markup at all, they are
   listed in data-rot and added by site.js. So a crawler or a screen reader with
   no JS gets one clean sentence rather than the five phrase run-on copy v3
   shipped.

   Every phrase has to read correctly after "Agents that run": the full
   lifecycle / acquisition / conversion / retention / growth.

   Layout is the thing to protect. All phrases share one grid cell, and site.js
   adds a hidden ghost copy of each, so the cell is always as wide as the
   longest phrase. The headline therefore holds the same two lines whatever is
   on screen and whatever fraction of it has been typed. Measured against the
   516px column: stem 438, widest phrase 433, and the line count is identical
   for every phrase from a 240px column up. Re-measure before adding one.

   Nothing animates until site.js adds .typing, so the static phrase stays put
   if the script never runs, and reduced motion never starts it. */
/* text-wrap:balance is on every heading, and it rebalances the two lines as the
   typed string grows and shrinks, so the break point walks around mid-type.
   The hero wraps greedily instead: the cell is a fixed width, so the break is
   the same for every phrase and at every point in the typing. */
.hero-copy h1{text-wrap:normal}
.rot{display:inline-grid;vertical-align:top;text-align:left}
.rot>span{grid-area:1/1}
.hl{color:var(--terra)}
/* The caret needs room, and the ghosts have to reserve the same room or the
   longest phrase would overflow the cell by exactly one caret width. */
.rot.typing>span{padding-right:.14em}
/* The caret sits on the live span only, so the ghosts have to reserve its
   width too (.055em bar + .06em margin) or the cell grows by exactly one caret
   whenever the longest phrase is fully typed, and the headline re-breaks. */
.rot.typing>.rot-ghost{visibility:hidden;padding-right:.255em}
.rot.typing>span:first-child::after{content:"";display:inline-block;
  width:.055em;height:.82em;margin-left:.06em;vertical-align:-.04em;
  background:currentColor;animation:caret 1.06s steps(1,end) infinite}
@keyframes caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------------- hero (interior pages) ---------------- */
.phero{position:relative;border-bottom:1px solid var(--rule);overflow:hidden;
  background-color:var(--cream);
  background-image:linear-gradient(var(--rule-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);
  background-size:40px 40px}
.phero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;
          padding-block:88px 80px}
/* gap is the headline-to-lede distance; crumb and actions restate their own
   spacing so tightening it does not pull the whole stack together */
.phero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.phero-copy .crumb{margin-bottom:8px}
.phero-copy h1{max-width:16ch}
/* Two line headline, one idea per line, the second in the accent. The size
   follows the column so "The customer lifecycle," always holds on one line:
   that line measures 10.14em in Instrument Sans, and 9.6cqw leaves 5% slack.
   Under about 460px the floor of 40px wins and the first line wraps, which is
   the right failure: the accent line still starts on its own row. */
.phero-copy{container-type:inline-size}
.phero-copy h1.two{max-width:none;font-size:min(64px,max(40px,9.6cqw))}
.phero-copy h1.two span{display:block}
.phero .lede{max-width:54ch}
.phero-side{display:flex;flex-direction:column;gap:24px;align-items:stretch;justify-content:center;
            min-width:0}
.phero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:16px}
/* ---------------- legal documents ----------------
   Long prose needs a narrower measure than the 1200px wrap, so the document
   sits in a two column grid with a sticky index beside it. The index is the
   only navigation on these pages, so it collapses to a plain list rather than
   disappearing on narrow screens. */
.legal{display:grid;grid-template-columns:216px minmax(0,1fr);gap:80px;align-items:start}
.ltoc{position:sticky;top:96px;display:flex;flex-direction:column;gap:8px;
      padding-right:24px;border-right:1px solid var(--rule)}
.ltoc h2{margin:0 0 8px;color:var(--muted)}
.ltoc a{font-size:14px;line-height:1.35;color:var(--muted);text-decoration:none;
        padding:4px 0;transition:color .2s var(--ease)}
.ltoc a:hover{color:var(--ink)}
.lbody{max-width:68ch}
.lsec{scroll-margin-top:88px}
.lsec + .lsec{margin-top:48px;padding-top:48px;border-top:1px solid var(--rule-2)}
.lsec h2{font-size:clamp(22px,2vw,26px);line-height:1.15;letter-spacing:-.02em;margin:0 0 16px}
.lsec p{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.lsec p:last-child,.lsec ul:last-child{margin-bottom:0}
.lsec strong{color:var(--ink);font-weight:500}
.lsec ul{margin:0 0 16px;padding-left:0;list-style:none;
         display:flex;flex-direction:column;gap:12px}
.lsec li{position:relative;padding-left:24px;font-size:17px;line-height:1.6;color:var(--muted)}
/* the 5px terracotta square is the site's list marker, set by .ti li */
.lsec li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
                 background:var(--terra)}
.lsec a{color:var(--terra-ink);text-decoration:none;
        border-bottom:1px solid rgba(168,89,50,.35)}
.lsec a:hover{border-bottom-color:var(--terra-ink)}
@media (max-width:900px){
  .legal{grid-template-columns:minmax(0,1fr);gap:40px}
  .ltoc{position:static;border-right:0;padding-right:0;padding-bottom:32px;
        border-bottom:1px solid var(--rule)}
}

.crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;
       font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}

/* ---------------- marquee ---------------- */
.partners{border-bottom:1px solid var(--rule);padding:40px 0 48px;text-align:center}
.marq{overflow:hidden;margin-top:32px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq-track{display:flex;width:max-content;animation:marq 36s linear infinite}
.marq-track img{height:34px;width:auto;max-width:none;margin-right:96px}
@keyframes marq{to{transform:translateX(-50%)}}

/* rotating claim strip — Public Sector has no logos to show */
.claims{border-bottom:1px solid var(--rule);padding:32px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.claims-track{display:flex;width:max-content;animation:marq 44s linear infinite;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);align-items:center}
.claims-track span{display:flex;align-items:center;gap:32px;padding-right:32px;white-space:nowrap}
.claims-track span::after{content:"";width:5px;height:5px;background:var(--terra);flex:none}

/* ---------------- capability cards ---------------- */
/* rows and columns are gapped, each card carries its own hairline */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:600/260;overflow:hidden;background-color:var(--paper);
  background-image:linear-gradient(var(--bp-faint) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bp-faint) 1px,transparent 1px);
  background-size:28px 28px;border-bottom:1px solid var(--rule)}
.card-media svg{position:absolute;inset:0;width:100%;height:100%}
.card-num{position:absolute;left:0;top:0;z-index:2;background:var(--ink);color:var(--cream-2);
          font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em;padding:7px 10px;
          line-height:1}
.card-body{padding:28px 28px 32px;display:flex;flex-direction:column;gap:12px}
.card-body p{font-size:16px;line-height:1.45;color:var(--muted)}

/* ---------------- blueprint drawing rules ---------------- */
.bp{font-family:var(--mono)}
.bp .ln{stroke:var(--bp);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.bp .lnf{stroke:var(--bp-2);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.bp .ac{stroke:var(--terra);fill:none;vector-effect:non-scaling-stroke}
.bp .txt{font-size:9px;letter-spacing:.12em;fill:var(--bp-txt);font-weight:500}
.bp .tick{stroke:var(--bp-tick);stroke-width:1}
.bp .draw{stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.3s var(--ease)}
[data-reveal].in .bp .draw,[data-reveal].in.bp .draw{stroke-dashoffset:0}
.bp .d1{transition-delay:.15s}.bp .d2{transition-delay:.3s}.bp .d3{transition-delay:.45s}
@keyframes bpSweep{to{transform:rotate(360deg)}}
.bp .sweep{transform-origin:300px 132px;animation:bpSweep 7s linear infinite}
@keyframes bpBlip{0%,8%{opacity:0}12%,30%{opacity:1}55%,100%{opacity:0}}
.bp .blip{fill:var(--terra);animation:bpBlip 7s infinite}
@keyframes bpOrbit{to{offset-distance:100%}}
.bp .sat{offset-path:ellipse(104px 100px at 300px 132px);animation:bpOrbit 11s linear infinite}
@keyframes bpDash{to{stroke-dashoffset:-40px}}
.bp .march{stroke-dasharray:5 7;animation:bpDash 2.6s linear infinite}
@keyframes bpPulse{0%{transform:scale(.35);opacity:.9}70%{opacity:.25}100%{transform:scale(1.06);opacity:0}}
.bp .pulse{transform-origin:224px 132px;animation:bpPulse 3s cubic-bezier(.25,.6,.45,1) infinite}
@keyframes bpRecv{0%,55%{opacity:.25}68%,80%{opacity:1}100%{opacity:.25}}
.bp .recv{animation:bpRecv 3s infinite}
@keyframes bpScan{0%{transform:translateY(0)}100%{transform:translateY(var(--sc,156px))}}
.bp .scan{animation:bpScan 6s linear infinite}
@keyframes bpCheck{0%,12%{stroke-dashoffset:100}30%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.bp .chk{stroke-dasharray:100;stroke-dashoffset:100;animation:bpCheck 6s infinite}
@keyframes bpFlag{0%,45%{opacity:.25}55%,80%{opacity:1}100%{opacity:.25}}
.bp .flag{animation:bpFlag 6s infinite}
@keyframes bpHand{to{transform:rotate(360deg)}}
.bp .hand{transform-origin:150px 62px;animation:bpHand 15s linear infinite}
@keyframes bpDot{0%,100%{opacity:.35}50%{opacity:1}}
.bp .pdot{animation:bpDot 2.4s ease-in-out infinite}
.bp .grow{transition:opacity .5s ease;opacity:0}
[data-reveal].in .bp .grow{opacity:1}
@keyframes loopRide{to{offset-distance:100%}}
.bp .loop-pkt{offset-path:ellipse(150px 102px at 222px 206px);
  animation:loopRide 10.2s linear infinite}
/* industry card motion: a packet along a straight line (--x0 -> --x1 at --y), a voice bar,
   a two-state value, a stamp that lands late, a packet that dies at the air gap, and a
   packet riding the small in-perimeter loop */
@keyframes bpPkt{0%{transform:translate(var(--x0),var(--y));opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translate(var(--x1),var(--y));opacity:0}}
.bp .pkt{animation:bpPkt 3.3s ease-in-out infinite}
@keyframes bpReply{0%,58%{opacity:0}70%,100%{opacity:1}}
.bp .reply{animation:bpReply 3.3s infinite}
@keyframes bpWave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.bp .wave{transform-box:fill-box;transform-origin:center;animation:bpWave 1.1s ease-in-out infinite}
@keyframes bpFlipA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes bpFlipB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.bp .flipA{animation:bpFlipA 6s infinite}
.bp .flipB{animation:bpFlipB 6s infinite}
@keyframes bpStamp{0%,48%{opacity:0;transform:translateY(4px)}58%,90%{opacity:1;transform:none}100%{opacity:0}}
.bp .stamp{animation:bpStamp 6s ease-out infinite}
@keyframes bpBlocked{0%{transform:translate(var(--x0),var(--y));opacity:0}10%{opacity:1}78%{transform:translate(var(--x1),var(--y));opacity:1}84%{transform:translate(var(--x1),var(--y)) scale(1.8);opacity:0}100%{opacity:0}}
.bp .blocked{animation:bpBlocked 3.2s ease-in-out infinite}
.bp .ind-pkt{offset-path:ellipse(66px 44px at 316px 190px);animation:loopRide 6s linear infinite}
/* travelling packet along the architecture spine */
@keyframes bpFlow{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* ---------------- photo band ---------------- */
.band{position:relative;min-height:336px;display:flex;align-items:flex-end;
      background:var(--ink-deep);overflow:hidden}
.band img{position:absolute;left:0;right:0;top:-14%;width:100%;height:128%;object-fit:cover;
          opacity:.66;will-change:transform}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,15,12,.18),rgba(16,15,12,.76))}
.band-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.band-in{position:relative;z-index:1;width:100%;display:flex;align-items:flex-end;
         justify-content:space-between;gap:40px;padding-block:48px;color:var(--cream-2)}
.band h2{font-size:clamp(24px,2.4vw,30px);max-width:22ch;line-height:1.1;color:var(--cream-2)}
.band .tag{border-color:var(--rule-dark);color:var(--cream-2)}
.band-stats{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.13em;
            text-align:right;line-height:2;color:var(--cream-2);white-space:nowrap}

/* ---------------- isometric plates ---------------- */
.systems{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:48px;align-items:center}
/* A lead module sits centred above the diagram row when one of the four needs to
   read first. It reuses .sys so the chip to paragraph rhythm matches its siblings
   exactly. */
.sys-lead{display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:52ch;margin:0 auto 56px}
.sys-col{display:flex;flex-direction:column;gap:64px}
.sys-col.right{text-align:right}
.sys-chip{display:inline-flex;gap:12px;font-family:var(--mono);font-weight:500;font-size:11px;}
.sys-chip{
          letter-spacing:.12em;border:1px solid var(--rule-dark);padding:9px 12px;color:var(--cream-2);
          line-height:1}
.sys p{font-size:15px;line-height:1.5;color:var(--muted-dark);margin-top:12px}
.iso{--isoscale:1;position:relative;width:520px;height:calc(600px*var(--isoscale));
  left:50%;transform:translateX(-50%) scale(var(--isoscale));transform-origin:top center;
  transform-style:preserve-3d}
@media (max-width:1300px){.iso{--isoscale:.8}}
.iso .plate{position:absolute;left:90px;width:340px;height:340px;
  transform:rotateX(60deg) rotateZ(45deg);border:1px solid rgba(240,236,226,.32);
  background-image:linear-gradient(rgba(240,236,226,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(240,236,226,.07) 1px,transparent 1px);
  background-size:25px 25px;background-color:rgba(26,24,19,.55);
  opacity:0;transition:opacity .8s ease,margin-top .9s var(--ease),border-color .35s ease,background-color .35s ease;
  transition-delay:calc(var(--n)*.12s);margin-top:26px;
  animation:isoBob 7s ease-in-out infinite;animation-delay:calc(var(--n)*-1.4s)}
[data-reveal].in .iso .plate,.iso.in .plate{opacity:1;margin-top:0}
.iso .plate svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.iso .plate.hot{border-color:var(--terra);background-color:rgba(201,106,60,.10)}
/* the chip on the side (or the auto cycle) lights its plate */
.iso .plate.lit{border-color:var(--cream-2);background-color:rgba(240,236,226,.07)}
.iso .plate.hot.lit{border-color:var(--terra);background-color:rgba(201,106,60,.18)}
.iso .plate.lit .ln{stroke:rgba(240,236,226,.7)}
@keyframes isoBob{0%,100%{transform:rotateX(60deg) rotateZ(45deg) translateZ(0)}
                  50%{transform:rotateX(60deg) rotateZ(45deg) translateZ(13px)}}
/* one dashed spine through the plate centres, a packet riding it downward */
.iso .iso-spine{position:absolute;left:259px;width:1px;
  background:repeating-linear-gradient(180deg,var(--bp-2) 0 5px,transparent 5px 12px);
  opacity:0;transition:opacity .8s ease .6s}
[data-reveal].in .iso .iso-spine,.iso.in .iso-spine{opacity:1}
.iso .iso-spine i{position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--terra);box-shadow:0 0 10px rgba(201,106,60,.7);animation:isoPkt 3.2s ease-in-out infinite}
@keyframes isoPkt{0%{transform:translateY(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(354px);opacity:0}}
/* drawings on the plates */
.iso .iso-sweep{transform-origin:170px 170px;animation:bpSweep 7s linear infinite}
.iso .iso-blip{animation:bpBlip 7s infinite}
.iso .iso-arc{stroke-dasharray:100;stroke-dashoffset:100;animation:isoArc 5s ease-in-out infinite}
@keyframes isoArc{0%{stroke-dashoffset:100}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.iso .iso-cell{animation:bpDot 6s ease-in-out infinite}
.iso .caret{animation:bpDot 1.1s steps(2) infinite}
.sys{transition:opacity .35s ease}
.systems.has-lit .sys:not(.lit){opacity:.55}

/* ---------------- Mira product demo ----------------
   The app rebuilt as elements rather than filmed. Everything is laid out at a
   fixed 1040x648 and the whole frame is scaled to fit its container, so the
   proportions never reflow and the cursor can live in one flat coordinate
   space. site.js sets --md-s and the stage height. The stage caps at 728px,
   which is 70% of the 1040 layout width, so the demo renders at 0.7 scale.

   The frame sits on a blueprint plate, same drawing language as .arch and
   .card-media: hairline, paper ground, a 32px grid and two mono labels in the
   corners. It is what stops a 70% frame reading as a small screenshot dropped
   on an empty page.

   Its own palette on purpose: this is a picture of a different product, and
   recolouring it into the cream would make it stop reading as one. */
/* 826 = the 728 frame + 48 of plate either side + the plate's two hairlines.
   Everything is border-box, so a round 824 would leave the frame at 726 and the
   demo would render at 0.698 rather than the 0.7 it is specified at. */
.mdemo{margin:8px auto 0;max-width:826px}
.md-plate{position:relative;padding:24px 48px 48px;border:1px solid var(--rule);
  background-color:var(--paper);overflow:hidden}
.md-plate::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--bp-faint) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bp-faint) 1px,transparent 1px);
  background-size:32px 32px}
.md-plate-head{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:24px;margin-bottom:24px;font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.md-stage{--md-s:1;position:relative;width:100%;max-width:728px;margin-inline:auto;
  overflow:hidden;border-radius:14px;
  border:1px solid var(--rule);box-shadow:0 18px 44px rgba(20,34,58,.10)}
.md-frame{position:absolute;top:0;left:0;width:calc(var(--md-w)*1px);
  height:calc(var(--md-h)*1px);transform-origin:top left;transform:scale(var(--md-s));
  background:#F7FAFE;color:#0E2A55;font-family:var(--sans);
  display:flex;flex-direction:column;text-align:left;cursor:none}
.md-frame *{box-sizing:border-box}
.md-mono{font-family:var(--mono)}

.md-top{flex:none;height:58px;display:flex;align-items:center;gap:12px;padding:0 20px;
  background:#FFFFFF;box-shadow:inset 0 -1px 0 #EBF1F9}
.md-logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#086FFB,#3D96FF);
  color:#FFF;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.md-brand{display:flex;flex-direction:column;line-height:1.15;margin-right:6px}
.md-brand b{font-size:13px;font-weight:700}
.md-brand i{font-style:normal;font-size:9px;color:#8593A9}
.md-ws{display:flex;align-items:center;gap:7px;border:1px solid #E3ECF9;border-radius:8px;
  padding:5px 11px;font-size:11px;font-weight:600;color:#3C4F6E;background:#F9FBFE}
.md-ws .md-dot{width:5px;height:5px;border-radius:50%;background:#086FFB}
.md-crumb{font-size:12px;font-weight:600;color:#0E2A55}
.md-crumb::before{content:"/";color:#C4CDDA;margin-right:10px;font-weight:400}
.md-spacer{flex:1}
.md-av{width:34px;height:34px;flex:none;border-radius:10px;color:#FFF;font-weight:700;font-size:13px;
  background:linear-gradient(135deg,#086FFB,#3D96FF);display:flex;align-items:center;justify-content:center}
.md-av.sm{width:28px;height:28px;border-radius:8px;font-size:11px}

.md-body{flex:1;display:flex;min-height:0}
.md-side{flex:none;width:196px;padding:14px 12px;background:#FFFFFF;
  box-shadow:inset -1px 0 0 #EBF1F9;overflow:hidden}
.md-cap{font-size:8.5px;font-weight:700;letter-spacing:.2em;color:#8593A9}
.md-side .md-cap{margin:12px 0 6px;padding-left:10px}
.md-side .md-cap:first-child{margin-top:0}
.md-nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;
  font-size:12.5px;font-weight:500;color:#5D6B82;transition:background .2s ease,color .2s ease}
.md-nav.on{background:#086FFB;color:#FFFFFF;font-weight:600;
  box-shadow:0 5px 12px rgba(8,111,251,.26)}

.md-main{flex:1;min-width:0;position:relative;padding:26px 28px;overflow:hidden}
.md-pane{position:absolute;inset:26px 28px auto;opacity:0;transform:translateY(10px);
  transition:opacity .34s ease,transform .34s var(--ease);pointer-events:none}
.md-pane.on{opacity:1;transform:none}
.md-h1{font-size:27px;font-weight:300;letter-spacing:-.02em;line-height:1.1}
.md-lede{font-size:12px;color:#5F6F88;margin-top:9px}
.md-mt{margin-top:20px}

.md-tiles{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;
  background:#FFF;border:1px solid #EBF1F9;border-radius:14px;overflow:hidden}
.md-tile{padding:14px 16px;box-shadow:inset 1px 0 0 #F0F4FA}
.md-tile:first-child{box-shadow:none}
.md-fig{font-size:26px;font-weight:300;margin-top:6px;font-variant-numeric:tabular-nums}
.md-sub{font-size:10px;color:#8593A9;margin-top:4px}

.md-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.md-row{display:flex;align-items:center;gap:12px;background:#FFF;border:1px solid #EBF1F9;
  border-radius:12px;padding:11px 15px}
.md-grow{flex:1;min-width:0;display:block}
.md-grow b{display:block;font-size:12.5px;font-weight:600}
.md-grow i{display:block;font-style:normal;font-size:10.5px;color:#8593A9;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-meta{font-size:10.5px;color:#9DA9BC;flex:none}
.md-age{width:52px;text-align:right}
.md-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:10.5px;font-weight:600;flex:none}
.md-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.md-pill.on{background:#EAF9F1;color:#12965A}
.md-pill.off{background:#FFF4E5;color:#B45309}
.md-agent .md-av{width:32px;height:32px;border-radius:10px;font-size:12px}

.md-chips{display:flex;gap:7px;margin-top:16px}
.md-chip{padding:6px 12px;border-radius:8px;background:#FFF;border:1px solid #E3ECF9;
  font-size:10.5px;font-weight:500;color:#5D6B82}
.md-chip.on{background:#086FFB;border-color:#086FFB;color:#FFF;font-weight:600}
.md-kind{width:32px;height:32px;flex:none;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:8.5px;font-weight:700;letter-spacing:.04em}
.kr{background:#EAF2FE;color:#086FFB}
.kp{background:#F3EEFE;color:#6B4BE8}
.ka{background:#FFF4E5;color:#B45309}
.md-btn{background:#086FFB;color:#FFF;border-radius:9px;padding:8px 16px;font-size:11.5px;
  font-weight:600;flex:none;display:inline-block;transition:background .2s ease}
.md-btn.sm{padding:6px 13px;font-size:11px}
.md-btn.ghost{background:#FFF;color:#3C4F6E;box-shadow:inset 0 0 0 1px #DCE6F5}
.md-btn.ghost.danger{color:#B4384A}
.md-btn.sent{background:#12965A}

.md-split{display:grid;grid-template-columns:250px 1fr;gap:12px;margin-top:16px}
.md-card{background:#FFF;border:1px solid #EBF1F9;border-radius:14px;padding:14px}
.md-qh{font-size:12px;font-weight:600;margin-bottom:10px}
.md-count{font-family:var(--mono);font-size:10px;color:#086FFB;background:#EAF2FF;
  border-radius:6px;padding:2px 7px;margin-left:5px}
.md-draft{border-radius:10px;padding:9px 11px;margin-bottom:5px;transition:background .25s ease}
.md-draft.on{background:#EAF2FF;box-shadow:inset 0 0 0 1px #B9D4FF}
.md-draft .md-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#C4CDDA;margin-right:7px}
.md-draft.on .md-dot{background:#086FFB}
.md-draft b{font-size:11.5px;font-weight:600}
.md-draft .md-age{float:right;font-size:9.5px;color:#9DA9BC;width:auto}
.md-draft i{display:block;font-style:normal;font-size:10px;color:#7C8AA0;margin-top:5px;
  line-height:1.45}
.md-tag{display:inline-block;margin-top:7px;padding:2px 7px;border-radius:5px;
  font-size:8.5px;font-weight:700;letter-spacing:.05em}
.ta{background:#FFF4E5;color:#B45309}
.tp{background:#F3EEFE;color:#6B4BE8}
.tg{background:#EAF9F1;color:#12965A}
.md-rh{display:flex;align-items:center;gap:11px;padding-bottom:10px;
  box-shadow:inset 0 -1px 0 #F0F4FA;margin-bottom:10px}
.md-quote{background:#F7FAFE;border:1px solid #EBF1F9;border-radius:11px;padding:11px 14px;
  font-size:11px;line-height:1.6;color:#28405F;margin:8px 0 11px}
.md-acts{display:flex;gap:8px;margin-bottom:13px}
.md-journey{margin-top:8px}
.md-step{display:flex;gap:10px;padding-bottom:7px;opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .3s var(--ease)}
.md-step.on{opacity:1;transform:none}
.md-tick{width:11px;height:11px;flex:none;margin-top:2px;border-radius:50%;
  border:2px solid #1DC975;background:#1DC975}
.md-step:last-child .md-tick{border-color:#F59E0B;background:#FFF}
.md-step.done:last-child .md-tick{border-color:#1DC975;background:#1DC975}
.md-step b{font-size:11.5px;font-weight:600}
.md-step em{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.07em;
  background:#EEF3FA;color:#5D6B82;border-radius:4px;padding:2px 6px;margin-left:7px}
.md-step i{display:block;font-style:normal;font-size:10.5px;color:#8593A9;margin-top:3px}

.md-counts{display:flex;gap:34px;margin-top:16px}
.md-counts .md-fig{display:block;margin-top:4px}
.md-ok{font-size:10.5px;font-weight:600;color:#12965A;flex:none}

/* The cursor. Positioned in the frame's own unscaled coordinates, so it lands
   on the same spot at every size. */
.md-cursor{position:absolute;top:0;left:0;width:19px;height:19px;pointer-events:none;
  opacity:0;transform:translate(-100px,-100px);z-index:5;
  transition:transform .72s cubic-bezier(.5,.05,.2,1),opacity .3s ease;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8.4-6.1 1.4L9.6 19z' fill='%23FFF' stroke='%230E2A55' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter:drop-shadow(0 2px 4px rgba(14,42,85,.32))}
.md-cursor.in{opacity:1}
.md-cursor.tap::after{content:"";position:absolute;left:-9px;top:-9px;width:34px;height:34px;
  border-radius:50%;border:2px solid #086FFB;animation:mdTap .5s var(--ease) forwards}
@keyframes mdTap{from{transform:scale(.3);opacity:.9}to{transform:scale(1);opacity:0}}

.md-cap-txt{margin:20px 0 0;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.md-still{display:none;position:relative;margin:0;border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;background:#F7FAFE;box-shadow:0 18px 44px rgba(20,34,58,.10)}
.md-still img{display:block;width:100%;height:auto}
/* Between 760 and 900 the plate's own padding is what limits the frame, so it
   gives most of it back. Below 760 the frame is not built at all. */
@media (max-width:900px){
  .md-plate{padding:16px 24px 24px}}
@media (max-width:760px){
  .mdemo{margin-top:48px}
  .md-plate{padding:16px}
  .md-plate-head{margin-bottom:16px;font-size:9px}
  .md-still{display:block;border-radius:9px;border:none;box-shadow:none}
  .md-stage{display:none}
  .md-cap-txt{font-size:10px}}

/* No cursor, no tab switching, no motion. The first pane simply stands still. */
@media (prefers-reduced-motion:reduce){
  .md-cursor{display:none}
  .md-pane,.md-step{transition:none}
  .md-step{opacity:1;transform:none}
}

/* ---------------- four-module architecture (Mira) ---------------- */
.arch{position:relative;border:1px solid var(--rule-dark);background:rgba(240,236,226,.02);
      padding:40px;overflow:hidden}
.arch::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--rule-dark-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-dark-2) 1px,transparent 1px);
  background-size:32px 32px}
.arch svg{position:relative;width:100%;height:auto;display:block}
.arch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.node{border:1px solid var(--rule-dark);padding:24px;display:flex;flex-direction:column;gap:10px;
      background:rgba(240,236,226,.02);transition:border-color .25s ease,background .25s ease}
.node:hover{border-color:var(--terra);background:var(--terra-soft)}
.node .k{display:flex;align-items:center;gap:12px}
.node .k b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
           color:var(--terra-ink)}
.node h4{color:var(--cream-2)}
.node p{font-size:15px;line-height:1.45;color:var(--muted-dark)}
.node.wide{grid-column:1 / -1}

/* ---------------- message samples (industry pages) ---------------- */
.says{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
/* figure carries a UA margin of 1em 40px; without the reset the cards sit inset and
   the rows drift apart */
.say{margin:0;border:1px solid var(--rule);background:var(--paper);padding:24px;display:flex;
     flex-direction:column;gap:14px;position:relative}
.say::before{content:"";position:absolute;left:-1px;top:24px;width:2px;height:32px;
             background:var(--terra)}
.say q{quotes:none;font-size:18px;line-height:1.42;letter-spacing:-.01em}
.say q::before,.say q::after{content:none}
.say .by{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.13em;
         text-transform:uppercase;color:var(--muted);line-height:1.6;padding-top:12px;
         border-top:1px solid var(--rule);margin-top:auto}

/* ---------------- built-for chips ---------------- */
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--rule);
      padding:12px 16px;font-size:15px;letter-spacing:-.01em;line-height:1;
      transition:border-color .2s ease,background .2s ease}
.chip::before{content:"";width:5px;height:5px;background:var(--terra);flex:none}
.chip:hover{border-color:var(--ink);background:var(--paper)}
.dark .chip:hover{border-color:var(--cream-2);background:rgba(240,236,226,.04)}

/* ---------------- lifecycle stages ---------------- */
.stages{border-top:1px solid var(--rule)}
.stage{display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.4fr);gap:32px;
       align-items:start;padding:24px 0;border-bottom:1px solid var(--rule);
       transition:background .25s ease}
.stage:hover{background:var(--paper)}
.stage .n{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.13em;
          color:var(--muted);padding-top:6px}
.stage h3{font-size:20px}
.stage p{font-size:16px;line-height:1.45;color:var(--muted)}
.dark .stage:hover{background:rgba(240,236,226,.03)}

/* ---------------- trust grid ---------------- */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.trust.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ti{border:1px solid var(--rule);background:var(--paper);padding:28px;display:flex;
    flex-direction:column;gap:12px}
.ti .k{display:flex;align-items:center;gap:12px;padding-bottom:14px;
       border-bottom:1px solid var(--rule)}
.ti .k b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
         color:var(--terra-ink);line-height:1}
.ti h4{flex:1}
.ti p{font-size:16px;line-height:1.45;color:var(--muted)}
.ti ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ti li{display:flex;gap:12px;font-size:16px;line-height:1.4;color:var(--muted)}
.ti li::before{content:"";width:5px;height:5px;background:var(--terra);flex:none;margin-top:7px}
.ti ul.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}

/* ---------------- phase timeline (Public Sector) ---------------- */
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative}
.phase{border:1px solid var(--rule);background:var(--paper);padding:28px;display:flex;
       flex-direction:column;gap:12px;position:relative}
.phase .n{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
          color:var(--terra-ink);line-height:1}
.phase p{font-size:16px;line-height:1.45;color:var(--muted)}
.phase::after{content:"";position:absolute;right:-24px;top:50%;width:24px;height:1px;
              background:var(--rule)}
.phase:last-child::after{display:none}
/* light plates deliberately invert inside a dark section, so the heading has to
   opt out of the blanket .dark heading colour or it goes cream on cream */

/* a pair of schematics shown side by side as figures */
.figpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:24px}
.figpair>div{border:1px solid var(--rule);background:var(--paper);padding:24px}

/* ---------------- stat blocks ---------------- */
.out-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
          margin-bottom:40px;flex-wrap:wrap}
.out-head h2{max-width:22ch}
.outs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.out{border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column}
.out-media{aspect-ratio:300/120;overflow:hidden;position:relative;background-color:var(--paper);
  background-image:linear-gradient(var(--bp-faint) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bp-faint) 1px,transparent 1px);
  background-size:20px 20px;border-bottom:1px solid var(--rule)}
.out-media svg{position:absolute;inset:0;width:100%;height:100%}
.out-body{padding:24px;display:flex;flex-direction:column;gap:8px}
.out .big{font-weight:600;font-size:48px;letter-spacing:-.04em;line-height:1;color:var(--terra);
          font-variant-numeric:tabular-nums}
.out .cap{font-weight:600;font-size:16px;letter-spacing:-.01em}
.out p{font-size:15px;line-height:1.45;color:var(--muted)}
.dark .out-media{background-color:transparent;border-color:var(--rule-dark);
  background-image:linear-gradient(var(--rule-dark-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-dark-2) 1px,transparent 1px)}

/* results groups (Entertainment) */
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rgroup{border:1px solid var(--rule);background:var(--paper);padding:28px}
.rgroup h4{padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.rgroup ul{margin:0;padding:0;list-style:none}
.rgroup li{display:flex;align-items:baseline;gap:16px;padding:14px 0;
           border-bottom:1px solid var(--rule-2);font-size:16px;line-height:1.35}
.rgroup li:last-child{border-bottom:0;padding-bottom:0}
.rgroup li b{font-weight:600;font-size:19px;letter-spacing:-.02em;flex:none;min-width:74px;
             font-variant-numeric:tabular-nums}
.rgroup li span{color:var(--muted)}

/* ---------------- comparison ---------------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cmp-col{padding:28px;border:1px solid var(--rule);background:var(--paper)}
.cmp-col.mira{background:var(--ink);color:var(--cream-2);border-color:var(--ink)}
.cmp h4{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
        color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--rule);
        text-transform:uppercase}
.cmp-col.mira h4{color:var(--muted-dark);border-color:var(--rule-dark)}
.cmp ul{list-style:none;margin:0;padding:0}
.cmp li{display:flex;align-items:center;gap:16px;padding:16px 0;
        border-bottom:1px solid var(--rule);font-size:16px;line-height:1.35}
.cmp li:last-child{border-bottom:0}
.cmp-col.mira li{border-color:var(--rule-dark)}
.cmp .ar{font-family:var(--mono);font-size:14px;color:var(--muted);flex:none}
.cmp-col.mira .ar{color:var(--terra)}

/* ---------------- policy ledger ---------------- */
.gov{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.policy{border:1px solid var(--rule);background:var(--paper);padding:24px}
.policy h4{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
           color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--rule);
           text-transform:uppercase}
.prow{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule);
      font-size:16px}
.dot{width:8px;height:8px;flex:none;background:var(--moss)}
.dot.esc{background:var(--terra)}
.prow .st{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:10px;
          letter-spacing:.12em;color:var(--muted)}
.policy .foot{padding-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
              color:var(--muted)}

/* ---------------- proof / pull quote ---------------- */
.proof{display:grid;grid-template-columns:.42fr .58fr;align-items:stretch;
       border-bottom:1px solid var(--rule);background:var(--paper)}
/* That rule separates two light sections. When the next section is dark it
   composites over the dark media column into a pale hairline trapped between
   two dark blocks, which reads as a white gap. Two dark sections meeting need
   no rule at all. */
.proof:has(+ .band, + .dark, + .close){border-bottom:0}
.proof.flip{grid-template-columns:.58fr .42fr}
.proof.flip .proof-img{order:2}
.proof-img{position:relative;min-height:336px;overflow:hidden;background:#1A1813}
.proof-media{position:relative;min-height:336px;overflow:hidden;background:#1A1813;
  background-image:linear-gradient(rgba(240,236,226,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(240,236,226,.055) 1px,transparent 1px);
  background-size:32px 32px;display:grid;place-items:center;padding:40px}
.proof-media svg{width:100%;height:auto}
.proof.flip .proof-media{order:2}
.proof-img img{position:absolute;left:0;right:0;top:-10%;width:100%;height:120%;object-fit:cover;
               will-change:transform}
.proof-body{padding:72px var(--gut);display:flex;flex-direction:column;gap:24px;
            align-items:flex-start}
.proof-body blockquote{margin:0;font-weight:500;font-size:clamp(22px,2.4vw,29px);line-height:1.12;
                       letter-spacing:-.025em;max-width:22ch;text-wrap:balance}
.attrib{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.13em;
        line-height:1.9;color:var(--muted)}

/* ---------------- manifesto (About) ---------------- */
.mani{display:grid;grid-template-columns:.34fr .66fr;gap:56px;align-items:start}
.mani-body{display:flex;flex-direction:column;gap:24px}
.mani-body p{font-size:19px;line-height:1.45;letter-spacing:-.012em}
.mani-body p.em{font-size:clamp(23px,2.4vw,29px);line-height:1.1;letter-spacing:-.025em;
                font-weight:500;color:var(--ink)}
.dark .mani-body p{color:var(--muted-dark)}
.dark .mani-body p.em{color:var(--cream-2)}
.mani-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:16px;
            align-items:flex-start}

/* ---------------- sector cards / industry teasers ---------------- */
.inds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ind{border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column;
     text-decoration:none;transition:border-color .25s ease,transform .3s var(--ease)}
.ind:hover{border-color:var(--ink);transform:translateY(-4px)}
.ind-media{position:relative;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid var(--rule);background-color:var(--paper);
  background-image:linear-gradient(var(--bp-faint) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bp-faint) 1px,transparent 1px);
  background-size:24px 24px}
.ind-media svg{position:absolute;inset:0;width:100%;height:100%}
.dark .ind-media{background-color:transparent;
  background-image:linear-gradient(var(--rule-dark-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-dark-2) 1px,transparent 1px)}
.ind-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.ind-body h3{font-size:20px}
.ind-body p{font-size:16px;line-height:1.45;color:var(--muted);flex:1}
.ind .more{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
           text-transform:uppercase;display:flex;align-items:center;gap:10px;padding-top:8px}
.ind .more .ar{transition:transform .25s var(--ease)}
.ind:hover .more .ar{transform:translateX(4px)}
.dark .ind:hover{border-color:var(--cream-2)}

/* ---------------- accordion / FAQ ---------------- */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{display:flex;align-items:center;gap:18px;padding:20px 2px;cursor:pointer;
             list-style:none;font-weight:600;font-size:17px;letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc .n{font-family:var(--mono);font-weight:500;font-size:10px;color:var(--muted);
        border:1px solid var(--rule);padding:5px 8px;letter-spacing:.08em;flex:none;line-height:1}
.acc .pm{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;flex:none;
         border:1px solid var(--rule);font-family:var(--mono);font-size:13px;color:var(--muted);
         transition:transform .25s var(--ease)}
.acc .pm::after{content:'+'}
.acc details[open] .pm{transform:rotate(45deg)}
.acc .ans{padding:0 2px 24px 62px;font-size:16px;line-height:1.5;color:var(--muted);max-width:74ch}
.faq{display:grid;grid-template-columns:.38fr .62fr;gap:56px;align-items:start}
.faq-aside{display:flex;flex-direction:column;align-items:flex-start;gap:20px;
           position:sticky;top:104px}
.faq .acc summary{font-weight:500}

/* ---------------- contact form ---------------- */
.form-grid{display:grid;grid-template-columns:.4fr .6fr;gap:56px;align-items:start}
.form{display:flex;flex-direction:column;gap:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:10px}
.field label{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
             text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{font-family:var(--sans);font-size:16px;
  line-height:1.4;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  padding:14px 16px;transition:border-color .2s ease;-webkit-appearance:none;appearance:none;
  border-radius:0;width:100%}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                               linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px}
.field textarea{resize:vertical;min-height:144px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);outline:none}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--terra)}
.form-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
           line-height:1.7}
.form-status{display:none;padding:16px;border:1px solid var(--rule);background:var(--paper);
             font-size:16px}
.form-status.on{display:block}
.form-status.err{border-color:var(--terra);color:var(--terra)}
.contact-aside{display:flex;flex-direction:column;gap:32px;position:sticky;top:104px}
.cblock{display:flex;flex-direction:column;gap:10px;padding-bottom:24px;
        border-bottom:1px solid var(--rule)}
.cblock:last-child{border-bottom:0;padding-bottom:0}

/* ---------------- closing + footer ---------------- */
/* the closing CTA and the footer are separate elements that happen to share a
   background, so a page without a CTA still gets a dark footer */
/* literal, not var(--ink): the token is remapped to cream on this very
   element, so resolving it here would paint the footer cream on cream */
.close{background:#1A1813;padding:104px 0 96px}
.sfoot{background:#1A1813}
.close-in{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.close h2{max-width:16ch;color:var(--cream-2)}
.close .lede{color:var(--muted-dark);max-width:44ch}
.close-copy{display:flex;flex-direction:column;gap:24px}
.close-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;flex:none}
.fnav{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:40px;
      border-top:1px solid var(--rule-dark);padding-top:64px}
.fbrand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.fbrand img{height:22px;width:auto}
.fbrand p{font-size:15px;line-height:1.5;color:var(--muted-dark);max-width:30ch}
.fcol{display:flex;flex-direction:column;gap:14px}
/* the column label shares the 22px header row with the lockup and sits on its baseline,
   so the tagline and the first link of every column start on the same line */
.fcol h4{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
         text-transform:uppercase;color:var(--muted-dark);height:22px;display:flex;align-items:flex-end;line-height:1}
.fcol a{font-size:15px;text-decoration:none;color:var(--cream-2);opacity:.78;
        transition:opacity .18s ease;line-height:1.5}
.fcol a:hover{opacity:1}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;
      border-top:1px solid var(--rule-dark);margin-top:48px;padding:24px 0 32px;
      font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--muted-dark);
      text-transform:uppercase}
.foot a{text-decoration:none}
.foot a:hover{color:var(--cream-2)}

/* ---------------- reveal cascade ---------------- */
.anim [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.anim .iso[data-reveal]{transform:translateX(-50%) translateY(22px) scale(var(--isoscale))}
.anim .iso[data-reveal].in{transform:translateX(-50%) scale(var(--isoscale))}
.anim [data-reveal][data-rv="left"]{transform:translateX(-30px)}
.anim [data-reveal][data-rv="right"]{transform:translateX(30px)}
.anim [data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){
  .arch-grid,.trust,.trust.three,.says,.results,.figpair{grid-template-columns:minmax(0,1fr)}
  .outs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phase:nth-child(2n)::after{display:none}
  .inds{grid-template-columns:minmax(0,1fr)}
  .fnav{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
  :root{--gut:24px}
  .sec{padding:64px 0}
  .sec.tight{padding:48px 0}
  .sec-head{margin-bottom:40px}
  .nav-links{display:none}
  .burger{display:block}
  .nav-cta{display:none}
  .nav-in{gap:16px;justify-content:space-between}
  .mobile{display:block;position:fixed;inset:64px 0 0;z-index:39;background:var(--cream);
          border-top:1px solid var(--rule);padding:24px var(--gut) 40px;overflow-y:auto;
          transform:translateY(-8px);opacity:0;visibility:hidden;
          transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
  body.menu-open{overflow:hidden}
  body.menu-open .mobile{opacity:1;visibility:visible;transform:none}
  .mobile a{display:block;padding:16px 0;border-bottom:1px solid var(--rule);text-decoration:none;
            font-size:19px;letter-spacing:-.02em}
  .mobile .sub a{padding-left:20px;font-size:16px;color:var(--muted)}
  .mobile .mlabel{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
                  color:var(--muted);padding:24px 0 8px}
  /* Industries is a real disclosure on touch: a button with aria-expanded and
     the panel it controls, collapsed by default and already open when you are
     on one of the industry pages. */
  .mobile .mtoggle{display:flex;align-items:center;justify-content:space-between;gap:16px;
                   width:100%;background:none;border:0;cursor:pointer;text-align:left;
                   font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
                   text-transform:uppercase;color:var(--muted);padding:24px 0 8px}
  .mobile .mtoggle::after{content:"";flex:none;width:6px;height:6px;
                          border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
                          transform:translateY(-2px) rotate(45deg);
                          transition:transform .26s var(--ease)}
  .mobile .mtoggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
  /* max-height rather than the grid-template-rows 0fr trick: with an
     overflow:hidden child the fr track resolved to 0 in Chrome and the panel
     never opened. 400px clears four links at 56px with room to spare. */
  .mobile .sub{max-height:0;overflow:hidden;opacity:0;
               transition:max-height .32s var(--ease),opacity .22s var(--ease)}
  .mobile .sub.open{max-height:400px;opacity:1}
  .mobile .btn{margin-top:24px;width:100%;justify-content:space-between}
  html:not(.anim) .mobile .sub{max-height:none;opacity:1}
  .hero-grid,.gov,.proof,.faq,.mani,.form-grid,.phero-in{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:36px;padding-block:40px 32px;min-height:0}
  .phero-in{padding-block:56px 48px;gap:32px;align-items:start}
  .phero-copy{max-width:none}
  .cards,.cmp,.frow{grid-template-columns:minmax(0,1fr)}
  .outs{grid-template-columns:1fr 1fr}
  .systems{grid-template-columns:minmax(0,1fr);gap:36px}
  .sys-col{gap:28px}
  .sys-col.right{text-align:left}
  .iso{--isoscale:.62;order:-1}
  .band-in{flex-direction:column;align-items:flex-start}
  .band-stats{text-align:left}
  .band{min-height:264px}
  .close{padding-top:64px}
  .close-in{flex-direction:column;align-items:flex-start;gap:32px;padding-bottom:48px}
  .fnav{padding-top:40px}
  .foot{flex-direction:column;align-items:flex-start;gap:12px}
  .proof-img{min-height:240px}
  .proof-body{padding:48px var(--gut)}
  .acc .ans{padding-left:2px}
  .acc summary{gap:12px;font-size:16px}
  .gov,.faq,.mani,.form-grid{gap:36px}
  .mani-aside,.faq-aside,.contact-aside{position:static}
  .marq-track img{height:26px;margin-right:64px}
  .stage{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 0}
  .stage .n{padding-top:0}
  .arch{padding:24px}
  .out .big{font-size:36px}
}
@media (max-width:560px){
  .outs,.fnav{grid-template-columns:minmax(0,1fr)}
  .phases{grid-template-columns:minmax(0,1fr)}
  .phase::after{display:none}
  .iso{--isoscale:.5}
  .ti ul.cols{grid-template-columns:minmax(0,1fr)}
  .hero-actions,.phero-actions,.close-actions{gap:16px}
  .btn{padding:14px 15px}
  .card-media{aspect-ratio:600/300}
  .cards{gap:16px}
  .says,.trust,.outs,.results,.arch-grid,.inds,.figpair{gap:16px}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .anim [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .mobile .sub,.mobile .mtoggle::after{transition:none!important}
  /* .iso uses its transform to centre itself (left:50% then translateX(-50%)), so the
     blanket transform:none above shunts the whole stack right and it lands on top of
     the system labels. Restore its own transform, it is a layout rule not an animation. */
  .anim .iso[data-reveal]{transform:translateX(-50%) scale(var(--isoscale))!important}
  .marq-track,.claims-track,
  .hero-art .h-float,.hero-art .glow,.hero-art .sheen,
  .bp .sweep,.bp .blip,.bp .sat,.bp .march,.bp .pulse,.bp .recv,.bp .flow,
  .bp .pkt,.bp .blocked,.bp .flipB{display:none}
  .bp .scan,.bp .chk,.bp .flag,.bp .hand,.bp .pdot,.bp .pkt,.bp .reply,.bp .wave,.bp .flipA,.bp .flipB,.bp .stamp,.bp .blocked,.bp .ind-pkt,.iso .plate,.iso .iso-spine i,.iso .iso-sweep,.iso .iso-blip,.iso .iso-arc,.iso .iso-cell,.iso .caret{animation:none!important}
  .bp .draw{stroke-dashoffset:0!important;transition:none!important}
  .bp .chk{stroke-dashoffset:0!important}
  .bp .grow{opacity:1!important}
  .iso .plate,.iso .iso-spine{opacity:1!important;margin-top:0!important}
  .iso .plate{transform:rotateX(60deg) rotateZ(45deg)!important}
  .ind:hover{transform:none}
  /* site.js never starts the typewriter under reduced motion, so the complete
     headline just sits there. Kill the caret too. */
  .rot.typing>span:first-child::after{display:none}
}