/* A9 Solutions site stylesheet (A9S-1 platform, A9S-2 design v4). Colors are tokens in :root; the page itself uses classes only, no inline styles.
   Order matters: the reference's own rules (copied verbatim from docs/design-v4/index.html, guards and all) come first, then the
   component classes that replaced its inline styles (an inline style beat any rule of the sheet, and these come later to match),
   then the production additions (skip link, hit areas, form, privacy and 404 pages). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo.e3a28eade2.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/geist.19f9c92546.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/geist-mono.684ad5b531.woff2) format("woff2"); }

:root {
  /* A9 Solutions brand colors (brand/a9-solutions) */
  --ink: #0B0C0E;       /* page */
  --bone: #F4F2EE;
  --nine-red: #E5484D;  /* the 9, the Delivery tile, accents */
  --signal: #7AA2F7;    /* links, focus, AI labels */
  --cobalt: #2B5BD7;
  --graphite: #17181B;
  --line: #2A2C31;
  --steel: #9A9DA4;
  --mist: #C9CBD0;
  /* Used on the page, not named in the brand sheet */
  --fog: #ECEDEE;       /* primary text */
  --slate: #6E727B;     /* quiet labels */
}

/* ============ Reference rules: behaviour, depth, motion and breakpoints (verbatim from docs/design-v4/index.html) ============ */
body{margin:0;background:#0B0C0E}
a{color:#ECEDEE;text-decoration:none}
a:hover{color:#7AA2F7}
:focus-visible{outline:2px solid #7AA2F7;outline-offset:3px;border-radius:8px}
::selection{background:#E5484D;color:#FFFFFF}
input,textarea,select{font:inherit}
.grain{background-image:url(/assets/img/grain.3009f2dcea.webp);background-size:220px 220px}
.nav-links a{color:#C9CBD0;transition:color .2s ease}
.nav-links a:hover{color:#FFFFFF}
.btn-primary{transition:background .2s ease, transform .2s ease, box-shadow .25s ease}
.btn-primary:hover{background:#FFFFFF !important;color:#0B0C0E !important;transform:translateY(-1px);box-shadow:0 14px 34px -14px rgba(255,138,91,.55)}
.btn-ghost{transition:border-color .2s ease, color .2s ease}
.btn-ghost:hover{border-color:#FF8A5B !important;color:#FFFFFF !important}
.ext:hover{text-decoration:underline;text-underline-offset:4px}
.card{transition:border-color .3s ease, box-shadow .3s ease}
.card:hover{border-color:#3A3D44 !important}

/* Type */
.tg{background:linear-gradient(172deg,#FFD9C6 0%,#FF9A6B 34%,#FF6A3D 60%,#E5484D 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ghost{position:absolute;font-family:'Archivo',sans-serif;font-weight:900;font-stretch:125%;line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px rgba(255,138,91,.13);pointer-events:none;user-select:none;white-space:nowrap}

/* Hero slab (unchanged from v3) */
.stage{perspective:1700px;perspective-origin:50% 18%}
.p3d{transform-style:preserve-3d}
.tile{animation:a9drop 1.1s cubic-bezier(.2,.8,.2,1) both}
.tile9{animation:a9drop9 1.5s cubic-bezier(.2,.8,.2,1) both, a9glow 3.6s ease-in-out 1.6s infinite}
@keyframes a9drop{from{opacity:0;translate:0 0 240px}to{opacity:1;translate:0 0 0}}
@keyframes a9drop9{0%{opacity:0;translate:0 0 360px}55%{opacity:1}100%{opacity:1;translate:0 0 0}}
@keyframes a9glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
.pool{animation:a9pool 1.6s ease .9s both}
@keyframes a9pool{from{opacity:0}to{opacity:1}}
.live{animation:a9pulse 1.8s ease-in-out infinite}
@keyframes a9pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}60%{box-shadow:0 0 0 8px rgba(229,72,77,0)}}
.wv{transform-origin:50% 50%;animation:a9wave 1.8s ease-in-out infinite alternate}
@keyframes a9wave{from{scale:1 .3}to{scale:1 1}}

/* Reveal: each block plays its entrance once, on its own clock, when it comes into view.
   Needs the small script; without it (or with reduced motion) everything is simply visible. */
.js-rv .rv{opacity:0;translate:0 56px 0;rotate:x 12deg;transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate 1.15s cubic-bezier(.2,.8,.2,1) var(--d,0s),rotate 1.15s cubic-bezier(.2,.8,.2,1) var(--d,0s),border-color .3s ease,box-shadow .3s ease}
.js-rv .rv.in{opacity:1;translate:0 0 0;rotate:x 0deg}
.d1{--d:.08s}.d2{--d:.16s}.d3{--d:.24s}.d4{--d:.32s}.d5{--d:.4s}.d6{--d:.48s}

/* Count-up numbers */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.cnt{counter-reset:n var(--n)}
.cnt::before{content:counter(n)}
.c9{--n:9}.c4{--n:4}.c30{--n:30}
.js-rv .rv.in .cnt{animation:a9count 1.9s cubic-bezier(.16,.8,.24,1) .25s both}
@keyframes a9count{from{--n:0}}

/* Why A9: the tangle draws itself, an idea wanders through it and fades */
.tdraw{stroke-dasharray:1 1;stroke-dashoffset:0}
.js-rv .rv .tdraw{stroke-dashoffset:1}
.js-rv .rv.in .tdraw{animation:a9draw 3.4s cubic-bezier(.45,0,.25,1) .35s forwards}
@keyframes a9draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.comet{stroke-dasharray:.0001 1.6;animation:a9comet 13s linear infinite;filter:drop-shadow(0 0 7px rgba(255,138,91,.85))}
.comett{stroke-dasharray:.05 1.6;animation:a9comett 13s linear infinite}
@keyframes a9comet{0%{stroke-dashoffset:0;stroke:#FF8A5B;opacity:0}3%{opacity:1}40%{stroke:#D6A493}70%{stroke:#8A8F9B;opacity:.85}90%{opacity:.25}100%{stroke-dashoffset:-1;stroke:#4A4D55;opacity:0}}
@keyframes a9comett{0%{stroke-dashoffset:.05;stroke:#FF8A5B;opacity:0}3%{opacity:.55}40%{stroke:#D6A493}70%{stroke:#8A8F9B;opacity:.4}90%{opacity:.1}100%{stroke-dashoffset:-.95;stroke:#4A4D55;opacity:0}}
.tmob{display:none}
@media (max-width: 760px){.tdesk{display:none !important}.tmob{display:block !important}}

/* Why A9: the straight line */
.rail{container-type:inline-size}
.railfill{transform-origin:0 50%;animation:a9railfill 5s linear infinite}
@keyframes a9railfill{0%{scale:0 1;opacity:1}36%{scale:1 1;opacity:1}82%{scale:1 1;opacity:1}96%,100%{scale:1 1;opacity:0}}
.railcomet{animation:a9railcomet 5s linear infinite}
@keyframes a9railcomet{0%{translate:0 0;opacity:1}36%{translate:100cqw 0;opacity:1}40%{translate:100cqw 0;opacity:0}100%{translate:100cqw 0;opacity:0}}
.railend{animation:a9railend 5s ease infinite}
@keyframes a9railend{0%,33%{border-color:#4A2B27;background:rgba(40,22,20,.7);box-shadow:none;color:#9A9DA4}38%,82%{border-color:#FFB08A;background:#FF6A3D;box-shadow:0 0 40px rgba(255,106,61,.75);color:#FFFFFF}96%,100%{border-color:#4A2B27;background:rgba(40,22,20,.7);box-shadow:none;color:#9A9DA4}}
.rlab{display:block}
@media (max-width: 760px){.rlab{display:none !important}.rnode{width:26px !important;height:26px !important;font-size:10px !important}}

/* The nine */
.ninegrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:start}
.ninel{position:sticky;top:104px}
.ncg{grid-template-columns:96px minmax(0,1fr)}
.bnstack{display:none}
@media (max-height: 820px) and (min-width: 901px){.bnbox{height:220px !important}.ninel{top:92px !important}}
@media (max-width: 900px){.ninegrid{grid-template-columns:minmax(0,1fr)}.ninel{position:relative;top:0}.bnbox{height:200px !important}.ticks{display:none !important}}
@media (max-width: 560px){.ncg{grid-template-columns:52px minmax(0,1fr)}.ncn{font-size:38px !important}.ncard{padding:22px 20px !important}}

/* Services fan */
.fan{perspective:1800px}
.fan1{transform:rotateY(10deg) translateZ(-24px)}
.fan2{transform:rotateY(3.5deg)}
.fan3{transform:rotateY(-3.5deg)}
.fan4{transform:rotateY(-10deg) translateZ(-24px)}
@media (max-width: 1000px){.fan1,.fan2,.fan3,.fan4{transform:none}}

/* Work: the product wall cycles through the four brands; the list follows it */
.workgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.cyc{animation-duration:16s;animation-iteration-count:infinite;animation-fill-mode:both}
.ws{opacity:0;animation-name:a9slide;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
.ws1{opacity:1}
.ws2,.wr2,.wb2,.wg2{animation-delay:4s}.ws3,.wr3,.wb3,.wg3{animation-delay:8s}.ws4,.wr4,.wb4,.wg4{animation-delay:12s}
@keyframes a9slide{0%{opacity:0;translate:80px 0 0;scale:.96}4%{opacity:1;translate:0 0 0;scale:1}22%{opacity:1;translate:0 0 0;scale:1}26%{opacity:0;translate:-60px 0 0;scale:.97}100%{opacity:0;translate:-60px 0 0;scale:.97}}
.wrow{animation-name:a9row;animation-timing-function:ease}
@keyframes a9row{0%{background-color:rgba(255,255,255,0);border-color:rgba(255,255,255,0)}3%,23%{background-color:rgba(255,255,255,.045);border-color:rgba(255,138,91,.28)}26%,100%{background-color:rgba(255,255,255,0);border-color:rgba(255,255,255,0)}}
.wbar{transform-origin:0 50%;animation-name:a9wbar;animation-timing-function:linear}
@keyframes a9wbar{0%{scale:0 1;opacity:1}25%{scale:1 1;opacity:1}26%,100%{scale:1 1;opacity:0}}
.wseg{transform-origin:0 50%;animation-name:a9wseg;animation-timing-function:linear}
@keyframes a9wseg{0%{scale:0 1}25%{scale:1 1}25.01%,100%{scale:0 1}}
@media (max-width: 900px){.workgrid{grid-template-columns:minmax(0,1fr)}.wall{order:-1}}
@media (max-width: 700px){.wall > div:first-child{height:300px !important}.wfront{width:40% !important}.wphone{width:28% !important;min-width:0 !important}}

/* Agents: radar sweep, pulses into the owner gate, approved work out to the customer */
.agentgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width: 960px){.agentgrid{grid-template-columns:minmax(0,1fr)}}
.orbit{container-type:inline-size}
.spin{animation:a9spin 9s linear infinite}
.spin80{animation:a9spin 80s linear infinite}
@keyframes a9spin{to{rotate:360deg}}
.agi{animation:a9agi 9s ease-out infinite}
@keyframes a9agi{0%{border-color:#FFB08A;box-shadow:0 0 36px rgba(255,106,61,.85)}16%{border-color:rgba(255,138,91,.55);box-shadow:0 0 14px rgba(255,106,61,.25)}32%,100%{border-color:#34373D;box-shadow:0 0 0 rgba(255,106,61,0)}}
.agg{animation:a9agg 9s ease-out infinite}
@keyframes a9agg{0%{opacity:1}18%{opacity:.18}32%,100%{opacity:0}}
.agi svg{animation:a9agis 9s ease-out infinite}
@keyframes a9agis{0%{stroke:#FFFFFF}20%,100%{stroke:#FF9A6B}}
.pin{animation:a9pin 9s linear infinite}
@keyframes a9pin{0%{translate:34cqw 0;opacity:0}2%{opacity:1}13%{translate:14cqw 0;opacity:1}15%,100%{translate:14cqw 0;opacity:0}}
.gpulse{animation:a9gate 1s ease-out infinite}
@keyframes a9gate{0%{scale:1;opacity:.7}100%{scale:1.45;opacity:0}}
.pout{animation:a9pout 1s linear infinite}
@keyframes a9pout{0%{translate:0 0;opacity:0}10%{opacity:1}85%{opacity:1}100%{translate:0 calc(36.5cqw + 30px);opacity:0}}
.cust{animation:a9cust 1s ease-out infinite}
@keyframes a9cust{0%,70%{box-shadow:0 0 0 rgba(255,106,61,0)}88%{box-shadow:0 0 26px rgba(255,106,61,.55)}100%{box-shadow:0 0 0 rgba(255,106,61,0)}}

/* In the field: photo mosaic */
.mos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,230px);gap:16px}
.mA{grid-column:1 / 8;grid-row:1 / 3}.mB{grid-column:8 / 13;grid-row:1}.mC{grid-column:8 / 13;grid-row:2}.mD{grid-column:1 / 6;grid-row:3}.mE{grid-column:6 / 13;grid-row:3}
@media (max-width: 760px){.mos{grid-template-columns:minmax(0,1fr);grid-auto-rows:240px}.mA,.mB,.mC,.mD,.mE{grid-column:auto;grid-row:auto}.mA{grid-row:span 1}}

/* How we work */
.howcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media (max-width: 900px){.howcols{grid-template-columns:minmax(0,1fr)}.htrack{display:none !important}}
.gw{opacity:0}

/* Films */
.filmgrid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width: 900px){.filmgrid{grid-template-columns:minmax(0,1fr)}}
.ftilt{transform:rotateY(-7deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ftilt:hover{transform:none}
@media (max-width: 900px){.ftilt{transform:none}}

/* Nav and small screens */
@media (max-width: 900px){.nav-links{display:none !important}.ctatext{display:none !important}}
@media (max-width: 700px){.navcta{display:none !important}.stage{height:400px !important}.slabgrid{width:60vw !important}}

.rn0{animation:a9rn0 5s linear infinite}@keyframes a9rn0{2.50%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.rn1{animation:a9rn1 5s linear infinite}@keyframes a9rn1{0%,4.50%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}7.00%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.rn2{animation:a9rn2 5s linear infinite}@keyframes a9rn2{0%,9.00%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}11.50%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.rn3{animation:a9rn3 5s linear infinite}@keyframes a9rn3{0%,13.50%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}16.00%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.rn4{animation:a9rn4 5s linear infinite}@keyframes a9rn4{0%,18.00%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}20.50%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.rn5{animation:a9rn5 5s linear infinite}@keyframes a9rn5{0%,22.50%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}25.00%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.rn6{animation:a9rn6 5s linear infinite}@keyframes a9rn6{0%,27.00%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}29.50%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.rn7{animation:a9rn7 5s linear infinite}@keyframes a9rn7{0%,31.50%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}34.00%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.rn8{animation:a9rn8 5s linear infinite}@keyframes a9rn8{0%,36.00%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}38.50%,82%{background:#FF6A3D;border-color:#FFB08A;box-shadow:0 0 22px rgba(255,106,61,.8);color:#FFFFFF}96%,100%{background:#1E1415;border-color:#4A2B27;box-shadow:none;color:#9A9DA4}}
.ncard{--ncb:#26282E}.ncard:last-child{--ncb:#4A2629}

@media (max-height: 1800px) {
@supports (animation-timeline: view()) {
  .standup{animation:a9stand linear both;animation-timeline:scroll(root);animation-range:0px 900px}
  @keyframes a9stand{to{rotate:x -18deg;translate:0 70px 0}}
  .nine-par{animation:a9ninepar linear both;animation-timeline:scroll(root);animation-range:0px 1200px}
  @keyframes a9ninepar{to{translate:0 260px 0}}
  .showbar{animation:a9show linear both;animation-timeline:scroll(root);animation-range:520px 760px}
  @keyframes a9show{from{opacity:0;translate:0 24px 0}to{opacity:1;translate:0 0 0}}
  .ghost{animation:a9ghost linear both;animation-timeline:view();animation-range:cover}
  @keyframes a9ghost{from{translate:-4% 0 0}to{translate:4% 0 0}}
  .par-a{animation:a9para linear both;animation-timeline:view();animation-range:cover}
  .par-b{animation:a9parb linear both;animation-timeline:view();animation-range:cover}
  @keyframes a9para{from{translate:0 60px 0}to{translate:0 -60px 0}}
  @keyframes a9parb{from{translate:0 20px 0}to{translate:0 -20px 0}}
  .pimg{animation:a9pimg linear both;animation-timeline:view();animation-range:cover}
  @keyframes a9pimg{from{translate:0 -6% 0}to{translate:0 6% 0}}
  .hz{animation:a9hz linear both;animation-timeline:view();animation-range:cover 0% cover 60%}
  @keyframes a9hz{from{scale:.92 1;opacity:.55}to{scale:1 1;opacity:1}}
}
}
@media (max-height: 1800px) and (min-width: 901px) {
@supports (animation-timeline: view()) {
  .bnstatic{display:none !important}.bnstack{display:block}
  .bn{opacity:0;animation:a9bn linear both}
  .bn1{animation-timeline:--c1}
  .bn2{animation-timeline:--c2}
  .bn3{animation-timeline:--c3}
  .bn4{animation-timeline:--c4}
  .bn5{animation-timeline:--c5}
  .bn6{animation-timeline:--c6}
  .bn7{animation-timeline:--c7}
  .bn8{animation-timeline:--c8}
  .bn9{animation-timeline:--c9}
  .bn{animation-range:cover 40.5% cover 59.5%}
  @keyframes a9bn{0%{opacity:0;translate:0 18px 0}14%,86%{opacity:1;translate:0 0 0}100%{opacity:0;translate:0 -18px 0}}
  .tk{animation:a9tk linear both}
  .tk1{animation-timeline:--c1}
  .tk2{animation-timeline:--c2}
  .tk3{animation-timeline:--c3}
  .tk4{animation-timeline:--c4}
  .tk5{animation-timeline:--c5}
  .tk6{animation-timeline:--c6}
  .tk7{animation-timeline:--c7}
  .tk8{animation-timeline:--c8}
  .tk9{animation-timeline:--c9}
  .tk{animation-range:entry 100% cover 50%}
  @keyframes a9tk{from{background-color:#2A2C31;box-shadow:none}to{background-color:#FF6A3D;box-shadow:0 0 12px rgba(255,106,61,.7)}}
}
}
@media (max-height: 1800px) {
@supports (animation-timeline: view()) {
  .nc{animation:a9nc linear both;animation-timeline:view();animation-range:cover 39% cover 61%}
  @keyframes a9nc{0%,100%{border-color:var(--ncb,#26282E)}18%,82%{border-color:rgba(255,154,107,.6)}}
  .nc .ncn{animation:a9ncn linear both;animation-timeline:view();animation-range:cover 39% cover 61%}
  @keyframes a9ncn{0%,100%{color:rgba(255,138,91,0)}18%,82%{color:rgba(255,138,91,1)}}
}
}
@media (max-height: 1800px) and (min-height: 780px) and (min-width: 901px) {
@supports (animation-timeline: view()) {
  .howsec{height:300vh}
  .howpin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
  .howpin > div{padding-top:100px !important;padding-bottom:84px !important;gap:40px !important}
  .hf{animation:a9fill linear both;animation-timeline:--how;animation-range:contain 4% contain 84%}
  @keyframes a9fill{from{scale:0 1}to{scale:1 1}}
  .hd{animation:a9dot linear both}.hb{animation:a9hb linear both}
  .hd0,.hb0{animation-timeline:--how;animation-range:contain 4% contain 9%}
  .hd1,.hb1{animation-timeline:--how;animation-range:contain 24% contain 29%}
  .hd2,.hb2{animation-timeline:--how;animation-range:contain 44% contain 49%}
  .hd3,.hb3{animation-timeline:--how;animation-range:contain 64% contain 69%}
  .hd4,.hb4{animation-timeline:--how;animation-range:contain 84% contain 89%}
  @keyframes a9dot{from{background-color:#0E0F11;border-color:#34373D;color:#9A9DA4;box-shadow:0 0 0 rgba(255,106,61,0)}to{background-color:#E5484D;border-color:#FF8A5B;color:#FFFFFF;box-shadow:0 0 28px rgba(255,106,61,.6)}}
  @keyframes a9hb{from{filter:saturate(0) brightness(.6);translate:0 12px 0}to{filter:saturate(1) brightness(1);translate:0 0 0}}
  .gws{display:none}
  .gw0{animation:a9gw linear both;animation-timeline:--how;animation-range:contain 0% contain 22%}
  .gw1{animation:a9gw linear both;animation-timeline:--how;animation-range:contain 20% contain 42%}
  .gw2{animation:a9gw linear both;animation-timeline:--how;animation-range:contain 40% contain 62%}
  .gw3{animation:a9gw linear both;animation-timeline:--how;animation-range:contain 60% contain 82%}
  .gw4{animation:a9gwlast linear both;animation-timeline:--how;animation-range:contain 80% contain 100%}
  @keyframes a9gw{0%{opacity:0;translate:0 40px 0}18%,82%{opacity:1;translate:0 0 0}100%{opacity:0;translate:0 -40px 0}}
  @keyframes a9gwlast{0%{opacity:0;translate:0 40px 0}18%,100%{opacity:1;translate:0 0 0}}
}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js-rv .rv{opacity:1 !important;translate:none !important;rotate:none !important}
  .ws{opacity:0 !important}.ws1{opacity:1 !important}
  .gw{opacity:0 !important}
  .comet,.comett,.railcomet,.pin,.pout,.gpulse{display:none !important}
  .wbar{scale:0 1}
}

/* Strategy sample pages (A9S-8): each page is drawn once at 376 x 211.5 and scaled as a whole by --s, so the small type never reflows; the steps follow the width of the stage */
.strat-17{container-type:inline-size}
.strat-pgw{--s:.9}
@container (max-width: 1059px){.strat-pgw{--s:.78}}
@container (max-width: 925px){.strat-pgw{--s:.64}}
@container (max-width: 765px){.strat-pgw{--s:.9;transform:none !important}}
@container (max-width: 339px){.strat-pgw{--s:.84}}
@container (max-width: 319px){.strat-pgw{--s:.76}}
@container (max-width: 289px){.strat-pgw{--s:.66}}

/* ============ Components, by section (the reference's inline styles, as classes) ============ */
/* ---- Page ---- */
.page-1 {
  position: relative;
  background: var(--ink);
  color: var(--fog);
  font-family: 'Geist', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}
.page-2 {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* ---- Nav ---- */
.nav-1 {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px clamp(12px, 3vw, 32px) 0;
}
.nav-2 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 9px 9px 9px 22px;
  border-radius: 999px;
  background: rgba(14,15,17,0.66);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-3 {
  display: flex;
  align-items: center;
}
.nav-4 {
  height: 26px;
  width: auto;
  display: block;
}
.nav-5 {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
}
.nav-6 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--fog);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  flex: none;
}

/* ---- Hero ---- */
.hero-1 {
  position: relative;
  overflow: hidden;
  margin-top: -72px;
  padding-top: 72px;
}
.hero-2 {
  position: absolute;
  left: -260px;
  top: -260px;
  width: 900px;
  height: 800px;
  background: radial-gradient(closest-side, rgba(122,162,247,0.12), transparent);
  pointer-events: none;
}
.hero-3 {
  position: absolute;
  right: -200px;
  top: 80px;
  width: 1100px;
  height: 900px;
  background: radial-gradient(closest-side, rgba(229,72,77,0.20), rgba(229,72,77,0.05) 55%, transparent);
  pointer-events: none;
}
.hero-4 {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(236,237,238,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(236,237,238,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero-5 {
  position: absolute;
  right: -8%;
  top: -150px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1100px;
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(229,72,77,0.20);
  pointer-events: none;
  user-select: none;
}
.hero-6 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 48px) clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}
.hero-7 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero-8 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--steel);
}
.hero-9 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nine-red);
  display: inline-block;
  flex: none;
}
.hero-10 {
  margin: 0;
  font-family: 'Archivo', 'Arial Black', sans-serif;
  font-weight: 850;
  font-stretch: 118%;
  font-size: clamp(46px, 6.2vw, 94px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-11 {
  color: var(--slate);
}
.hero-12 {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--mist);
  text-wrap: pretty;
}
.hero-13 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.hero-14 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--fog);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
}
.hero-15 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid #34373D;
  color: var(--mist);
  font-weight: 500;
  font-size: 16px;
  background: rgba(11,12,14,0.4);
}
.hero-16 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-17 {
  position: relative;
  height: clamp(340px, 40vw, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-18 {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 90%;
  height: 46%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(229,72,77,0.34), rgba(229,72,77,0.08) 60%, transparent);
  filter: blur(24px);
}
.hero-19 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(450px, 74vw);
  transform: rotateX(54deg) rotateZ(-40deg);
}
.hero-20 {
  animation-delay: .10s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #1D1E22 0%, #121316 75%);
  border: 1px solid #2F3137;
  box-shadow: -2px 3px 0 #0D0E10, -4px 6px 0 #0A0B0C, -6px 9px 0 #070809, -18px 28px 40px rgba(0,0,0,0.55);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.hero-21 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--slate);
}
.hero-22 {
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 17px);
  line-height: 1.2;
}
.hero-23 {
  animation-delay: .18s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #1D1E22 0%, #121316 75%);
  border: 1px solid #2F3137;
  box-shadow: -2px 3px 0 #0D0E10, -4px 6px 0 #0A0B0C, -6px 9px 0 #070809, -18px 28px 40px rgba(0,0,0,0.55);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.hero-24 {
  animation-delay: .26s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #1D1E22 0%, #121316 75%);
  border: 1px solid #2F3137;
  box-shadow: -2px 3px 0 #0D0E10, -4px 6px 0 #0A0B0C, -6px 9px 0 #070809, -18px 28px 40px rgba(0,0,0,0.55);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.hero-25 {
  animation-delay: .34s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #1D1E22 0%, #121316 75%);
  border: 1px solid #2F3137;
  box-shadow: -2px 3px 0 #0D0E10, -4px 6px 0 #0A0B0C, -6px 9px 0 #070809, -18px 28px 40px rgba(0,0,0,0.55);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.hero-26 {
  animation-delay: .42s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #1D1E22 0%, #121316 75%);
  border: 1px solid #2F3137;
  box-shadow: -2px 3px 0 #0D0E10, -4px 6px 0 #0A0B0C, -6px 9px 0 #070809, -18px 28px 40px rgba(0,0,0,0.55);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.hero-27 {
  animation-delay: .50s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #1D1E22 0%, #121316 75%);
  border: 1px solid #2F3137;
  box-shadow: -2px 3px 0 #0D0E10, -4px 6px 0 #0A0B0C, -6px 9px 0 #070809, -18px 28px 40px rgba(0,0,0,0.55);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.hero-28 {
  animation-delay: .58s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #1D1E22 0%, #121316 75%);
  border: 1px solid #2F3137;
  box-shadow: -2px 3px 0 #0D0E10, -4px 6px 0 #0A0B0C, -6px 9px 0 #070809, -18px 28px 40px rgba(0,0,0,0.55);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.hero-29 {
  animation-delay: .66s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #1D1E22 0%, #121316 75%);
  border: 1px solid #2F3137;
  box-shadow: -2px 3px 0 #0D0E10, -4px 6px 0 #0A0B0C, -6px 9px 0 #070809, -18px 28px 40px rgba(0,0,0,0.55);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.hero-30 {
  animation-delay: .82s;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #F45E63 0%, #C9363C 80%);
  border: 1px solid #FF8A8E;
  transform: translateZ(30px);
  box-shadow: -2px 3px 0 #A92E33, -4px 6px 0 #8C272C, -6px 9px 0 #6E1F23, -8px 12px 0 #5C1A1E, 0 0 70px rgba(229,72,77,0.55), -24px 36px 70px rgba(229,72,77,0.35);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  color: #FFFFFF;
}
.hero-31 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #FFE3E4;
}
.hero-32 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-33 {
  font-weight: 650;
  font-size: clamp(12px, 1.2vw, 17px);
  line-height: 1.2;
}
.hero-34 {
  font-size: clamp(11px, 0.9vw, 13px);
  color: #FFE3E4;
}
.hero-35 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--steel);
}
.hero-36 {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--signal), var(--nine-red));
}
.hero-37 {
  color: var(--fog);
}

/* ---- At a glance ---- */
.glance-1 {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.glance-2 {
  position: absolute;
  left: 50%;
  top: 52%;
  width: max(150%, 640px);
  aspect-ratio: 3 / 1;
  translate: -50% 0;
  border-radius: 50%;
  border-top: 1.5px solid rgba(255,176,138,0.85);
  background: radial-gradient(ellipse 55% 38% at 50% 0%, rgba(255,106,61,0.34), rgba(229,72,77,0.10) 45%, rgba(10,10,12,0) 72%), #0A0A0C;
  box-shadow: 0 -30px 110px -6px rgba(255,106,61,0.42), 0 -2px 26px rgba(255,150,110,0.45);
  pointer-events: none;
}
.glance-3 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 48px) clamp(72px, 8vw, 110px);
}
.glance-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  perspective: 1400px;
}
.glance-5 {
  position: relative;
  border-radius: 20px;
  padding: 28px 26px 26px;
  background: linear-gradient(170deg, rgba(28,24,24,0.72), rgba(14,13,15,0.72));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 60px -30px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.glance-6 {
  font-family: 'Archivo', sans-serif;
  font-weight: 850;
  font-stretch: 120%;
  font-size: clamp(52px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.035em;
  align-self: flex-start;
}
.glance-7 {
  font-size: 15px;
  color: #B4B7BE;
}

/* ---- Why A9 ---- */
.why-1 {
  position: relative;
  overflow: hidden;
  background: radial-gradient(55% 40% at 18% 42%, rgba(122,162,247,0.08), transparent 70%), radial-gradient(60% 40% at 82% 88%, rgba(255,106,61,0.18), transparent 70%), linear-gradient(180deg, #0A0A0C 0%, #0C0B0D 60%, #0D0B0B 100%);
}
.why-2 {
  left: -1%;
  top: 70px;
  font-size: clamp(110px, 16vw, 250px);
}
.why-3 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 124px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.why-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px 48px;
}
.why-5 {
  flex: 1 1 560px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.why-6 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #FF9A6B;
}
.why-7 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(38px, 4.8vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.why-8 {
  margin: 0;
  color: var(--mist);
  font-size: 18px;
  text-wrap: pretty;
  flex: 0 1 420px;
  max-width: 44ch;
}
.why-9 {
  position: relative;
  border-radius: 26px;
  border: 1px solid #252931;
  background: linear-gradient(180deg, rgba(20,22,27,0.94), rgba(12,13,16,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 50px 90px -50px rgba(0,0,0,0.95);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
}
.why-10 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
}
.why-11 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #9AA6BF;
}
.why-12 {
  font-family: 'Archivo', sans-serif;
  font-weight: 750;
  font-stretch: 112%;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--steel);
  letter-spacing: -0.01em;
}
.why-13 {
  position: relative;
  aspect-ratio: 1200 / 460;
  margin-top: 18px;
}
.why-14 {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.why-15 {
  position: absolute;
  left: 20.83%;
  top: 65.22%;
  translate: -50% -50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7D8494;
  background: rgba(11,12,14,0.85);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.why-16 {
  position: absolute;
  left: 39.17%;
  top: 8.70%;
  translate: -50% -50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7D8494;
  background: rgba(11,12,14,0.85);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.why-17 {
  position: absolute;
  left: 39.17%;
  top: 42.61%;
  translate: -50% -50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7D8494;
  background: rgba(11,12,14,0.85);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.why-18 {
  position: absolute;
  left: 66.67%;
  top: 42.61%;
  translate: -50% -50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7D8494;
  background: rgba(11,12,14,0.85);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.why-19 {
  position: absolute;
  left: 71.67%;
  top: 91.30%;
  translate: -50% -50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7D8494;
  background: rgba(11,12,14,0.85);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.why-20 {
  position: absolute;
  left: 10.00%;
  top: 18.26%;
  translate: -50% -50%;
  rotate: -3deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-21 {
  position: absolute;
  left: 32.67%;
  top: 73.48%;
  translate: -50% -50%;
  rotate: 4deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-22 {
  position: absolute;
  left: 51.00%;
  top: 24.35%;
  translate: -50% -50%;
  rotate: -5deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-23 {
  position: absolute;
  left: 24.17%;
  top: 46.52%;
  translate: -50% -50%;
  rotate: 3deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-24 {
  position: absolute;
  left: 60.33%;
  top: 78.70%;
  translate: -50% -50%;
  rotate: -2deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-25 {
  position: absolute;
  left: 75.17%;
  top: 20.43%;
  translate: -50% -50%;
  rotate: 5deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-26 {
  position: absolute;
  left: 49.17%;
  top: 54.78%;
  translate: -50% -50%;
  rotate: -4deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-27 {
  position: absolute;
  left: 83.83%;
  top: 78.26%;
  translate: -50% -50%;
  rotate: 3deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-28 {
  position: absolute;
  left: 91.50%;
  top: 40.43%;
  translate: -50% -50%;
  rotate: -3deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-29 {
  position: absolute;
  left: 10.00%;
  top: calc(18.26% - 42px);
  translate: -50% 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #FF9A6B;
  white-space: nowrap;
}
.why-30 {
  position: relative;
  aspect-ratio: 400 / 640;
  margin-top: 18px;
}
.why-31 {
  position: absolute;
  left: 52.50%;
  top: 26.56%;
  translate: -50% -50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7D8494;
  background: rgba(11,12,14,0.85);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.why-32 {
  position: absolute;
  left: 51.25%;
  top: 49.69%;
  translate: -50% -50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7D8494;
  background: rgba(11,12,14,0.85);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.why-33 {
  position: absolute;
  left: 51.25%;
  top: 72.19%;
  translate: -50% -50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7D8494;
  background: rgba(11,12,14,0.85);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.why-34 {
  position: absolute;
  left: 28.00%;
  top: 7.19%;
  translate: -50% -50%;
  rotate: -3deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-35 {
  position: absolute;
  left: 75.00%;
  top: 20.00%;
  translate: -50% -50%;
  rotate: 4deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-36 {
  position: absolute;
  left: 24.00%;
  top: 32.19%;
  translate: -50% -50%;
  rotate: -4deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-37 {
  position: absolute;
  left: 73.00%;
  top: 43.44%;
  translate: -50% -50%;
  rotate: 3deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-38 {
  position: absolute;
  left: 27.00%;
  top: 55.00%;
  translate: -50% -50%;
  rotate: -2deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-39 {
  position: absolute;
  left: 74.00%;
  top: 66.25%;
  translate: -50% -50%;
  rotate: 4deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-40 {
  position: absolute;
  left: 30.00%;
  top: 77.19%;
  translate: -50% -50%;
  rotate: -3deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-41 {
  position: absolute;
  left: 75.00%;
  top: 87.50%;
  translate: -50% -50%;
  rotate: 3deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-42 {
  position: absolute;
  left: 37.50%;
  top: 95.62%;
  translate: -50% -50%;
  rotate: -2deg;
  padding: 8px 13px;
  border: 1px dashed #464C5A;
  border-radius: 12px;
  background: rgba(17,19,24,0.94);
  font-size: 14px;
  color: #B3B9C6;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9);
}
.why-43 {
  position: absolute;
  left: 28.00%;
  top: calc(7.19% - 42px);
  translate: -50% 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #FF9A6B;
  white-space: nowrap;
}
.why-44 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--steel);
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.why-45 {
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(255,138,91,0.38);
  background: radial-gradient(70% 140% at 100% 40%, rgba(255,106,61,0.24), transparent 62%), linear-gradient(180deg, #1B1213, #110C0D);
  box-shadow: inset 0 1px 0 rgba(255,180,150,0.12), 0 50px 90px -50px rgba(0,0,0,0.95), 0 40px 130px -60px rgba(255,106,61,0.65);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
}
.why-46 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #FF9A6B;
}
.why-47 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(22px, 2.3vw, 30px);
  color: #FFFFFF;
  letter-spacing: -0.015em;
}
.why-48 {
  position: relative;
  padding: 78px 19px 64px;
}
.why-49 {
  position: relative;
  height: 4px;
}
.why-50 {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #2C1E1E;
}
.why-51 {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #FF9A6B, #FF6A3D 60%, var(--nine-red));
  box-shadow: 0 0 18px rgba(255,106,61,0.8);
}
.why-52 {
  position: absolute;
  left: 0.000%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-53 {
  position: absolute;
  left: 12.500%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-54 {
  position: absolute;
  left: 25.000%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-55 {
  position: absolute;
  left: 37.500%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-56 {
  position: absolute;
  left: 50.000%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-57 {
  position: absolute;
  left: 62.500%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-58 {
  position: absolute;
  left: 75.000%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-59 {
  position: absolute;
  left: 87.500%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-60 {
  position: absolute;
  left: 100.000%;
  top: 50%;
  translate: -50% -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4A2B27;
  background: #1E1415;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--steel);
}
.why-61 {
  position: absolute;
  left: -15px;
  top: -13px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, #FFD2BC 28%, rgba(255,106,61,0.9) 50%, rgba(255,106,61,0) 72%);
  filter: drop-shadow(0 0 12px rgba(255,106,61,0.9));
}
.why-62 {
  position: absolute;
  right: -19px;
  bottom: 32px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #4A2B27;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.why-63 {
  position: absolute;
  left: 0.000%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-64 {
  position: absolute;
  left: 12.500%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-65 {
  position: absolute;
  left: 25.000%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-66 {
  position: absolute;
  left: 37.500%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-67 {
  position: absolute;
  left: 50.000%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-68 {
  position: absolute;
  left: 62.500%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-69 {
  position: absolute;
  left: 75.000%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-70 {
  position: absolute;
  left: 87.500%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-71 {
  position: absolute;
  left: 100.000%;
  top: 34px;
  translate: -50% 0;
  font-size: 14px;
  color: var(--mist);
  white-space: nowrap;
}
.why-72 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--fog);
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.why-73 {
  color: #FF8A5B;
}

/* ---- The nine ---- */
.nine-1 {
  position: relative;
  scroll-margin-top: 90px;
  timeline-scope: --c1, --c2, --c3, --c4, --c5, --c6, --c7, --c8, --c9;
  background: radial-gradient(60% 34% at 12% 18%, rgba(255,106,61,0.15), transparent 70%), radial-gradient(50% 30% at 96% 70%, rgba(43,91,215,0.11), transparent 70%), linear-gradient(180deg, #0D0B0B 0%, #0E0B0C 50%, var(--ink) 100%);
}
.nine-2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,138,91,0.45), transparent);
}
.nine-3 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 124px) clamp(16px, 4vw, 48px);
}
.nine-4 {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.nine-5 {
  margin: 0;
  color: var(--mist);
  font-size: 18px;
  text-wrap: pretty;
  max-width: 40ch;
}
.nine-6 {
  position: relative;
  height: 290px;
  margin-top: 6px;
}
.nine-7 {
  position: absolute;
  right: -4%;
  bottom: -30px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 380px;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,138,91,0.22);
  pointer-events: none;
}
.nine-8 {
  position: absolute;
  left: -10%;
  bottom: -10%;
  width: 90%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255,106,61,0.30), transparent);
  filter: blur(10px);
}
.nine-9 {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nine-10 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(150px, 15vw, 210px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  align-self: flex-start;
}
.nine-11 {
  font-family: 'Archivo', sans-serif;
  font-weight: 750;
  font-stretch: 112%;
  font-size: 24px;
  color: var(--fog);
}
.nine-12 {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.nine-13 {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: #FF6A3D;
}
.nine-14 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  perspective: 1400px;
}
.nine-15 {
  view-timeline-name: --c1;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #26282E;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(25,25,29,0.93), rgba(13,13,16,0.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95);
  padding: 26px 30px 26px 26px;
}
.nine-16 {
  grid-row: span 3;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 60px;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: rgba(255,138,91,0);
  -webkit-text-stroke: 1.4px rgba(255,138,91,0.72);
}
.nine-17 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 750;
  font-stretch: 112%;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.nine-18 {
  margin: 0;
  color: #A9ACB3;
  font-size: 16px;
  text-wrap: pretty;
}
.nine-19 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.nine-20 {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--mist);
  background: rgba(255,255,255,0.02);
}
.nine-21 {
  view-timeline-name: --c2;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #26282E;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(25,25,29,0.93), rgba(13,13,16,0.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95);
  padding: 26px 30px 26px 26px;
}
.nine-22 {
  view-timeline-name: --c3;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #26282E;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(25,25,29,0.93), rgba(13,13,16,0.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95);
  padding: 26px 30px 26px 26px;
}
.nine-23 {
  view-timeline-name: --c4;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #26282E;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(25,25,29,0.93), rgba(13,13,16,0.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95);
  padding: 26px 30px 26px 26px;
}
.nine-24 {
  view-timeline-name: --c5;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #26282E;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(25,25,29,0.93), rgba(13,13,16,0.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95);
  padding: 26px 30px 26px 26px;
}
.nine-25 {
  view-timeline-name: --c6;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #26282E;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(25,25,29,0.93), rgba(13,13,16,0.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95);
  padding: 26px 30px 26px 26px;
}
.nine-26 {
  view-timeline-name: --c7;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #26282E;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(25,25,29,0.93), rgba(13,13,16,0.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95);
  padding: 26px 30px 26px 26px;
}
.nine-27 {
  view-timeline-name: --c8;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #26282E;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(25,25,29,0.93), rgba(13,13,16,0.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95);
  padding: 26px 30px 26px 26px;
}
.nine-28 {
  view-timeline-name: --c9;
  position: relative;
  display: grid;
  gap: 6px 22px;
  align-items: start;
  border: 1px solid #4A2629;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(40,20,21,0.95), rgba(20,11,12,0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 64px -38px rgba(0,0,0,0.95), 0 30px 90px -40px rgba(229,72,77,0.5);
  padding: 26px 30px 26px 26px;
}
.nine-29 {
  grid-row: span 3;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 60px;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: rgba(255,138,91,0);
  -webkit-text-stroke: 1.4px rgba(229,72,77,0.95);
}
.nine-30 {
  padding: 5px 11px;
  border: 1px solid #3A2326;
  border-radius: 999px;
  font-size: 13px;
  color: var(--mist);
  background: rgba(255,255,255,0.02);
}

/* ---- Services ---- */
.services-1 {
  position: relative;
  overflow: hidden;
  background: radial-gradient(70% 45% at 50% 105%, rgba(43,91,215,0.20), transparent 70%), radial-gradient(50% 35% at 8% 30%, rgba(255,106,61,0.12), transparent 70%), linear-gradient(180deg, var(--ink) 0%, #0E0F13 55%, #0C0D10 100%);
  scroll-margin-top: 90px;
}
.services-2 {
  right: -2%;
  top: 60px;
  font-size: clamp(110px, 15vw, 230px);
}
.services-3 {
  position: absolute;
  left: 50%;
  bottom: -200px;
  width: 1300px;
  height: 520px;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(122,162,247,0.10), transparent);
  pointer-events: none;
}
.services-4 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.services-5 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
}
.services-6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 16px;
}
.services-7 {
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #3A3D44;
  border-radius: 22px;
  background: linear-gradient(170deg, #1A1B1F 0%, #101113 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 70px -36px rgba(0,0,0,0.95), 0 30px 80px -50px rgba(229,72,77,0.45);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.services-8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.services-9 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--nine-red);
}
.services-10 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.services-11 {
  margin: 0;
  color: var(--steel);
  font-size: 15px;
}
.services-12 {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #24262B;
  font-size: 14px;
  color: var(--mist);
}
.services-13 {
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #24262B;
  border-radius: 22px;
  background: linear-gradient(170deg, var(--graphite) 0%, #0F1012 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 40px 70px -36px rgba(0,0,0,0.95);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.services-14 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--signal);
}
a.services-15 {
  color: var(--signal);
}
.services-16 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid #24262B;
}
.services-17 {
  padding: 26px 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.services-18 {
  font-weight: 650;
}
.services-19 {
  font-size: 15px;
  color: var(--steel);
}
.services-20 {
  padding: 26px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Work ---- */
.work-1 {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
  background: radial-gradient(55% 50% at 78% 52%, rgba(43,91,215,0.16), transparent 70%), radial-gradient(45% 40% at 12% 85%, rgba(255,106,61,0.14), transparent 70%), linear-gradient(180deg, #0C0D10, #0D0D10 50%, var(--ink));
}
.work-2 {
  left: -1%;
  top: 64px;
  font-size: clamp(110px, 15vw, 230px);
}
.work-3 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 124px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.work-4 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
a.work-5 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 20px 22px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0);
  color: var(--fog);
  overflow: hidden;
}
.work-6 {
  height: 32px;
  display: flex;
  align-items: center;
}
.work-7 {
  height: 44px;
  width: auto;
  display: block;
  margin: -6px 0 -6px -4px;
}
.work-8 {
  grid-column: 1 / -1;
  font-size: 15px;
  color: #A9ACB3;
}
.work-9 {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #FF9A6B, var(--nine-red));
}
.work-10 {
  height: 32px;
  width: auto;
  display: block;
}
.work-11 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.work-12 {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #DADCE0;
  line-height: 1;
}
.work-13 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.work-14 {
  position: relative;
  height: clamp(400px, 42vw, 580px);
}
.work-15 {
  position: absolute;
  inset: 0;
  perspective: 1800px;
  perspective-origin: 30% 40%;
}
.work-16 {
  position: absolute;
  right: 0;
  top: 8%;
  width: 86%;
  height: 76%;
  background: radial-gradient(closest-side, rgba(255,106,61,0.34), transparent);
  filter: blur(30px);
}
.work-17 {
  position: absolute;
  right: 2%;
  top: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(14,15,17,0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mist);
  white-space: nowrap;
  z-index: 3;
}
.work-18 {
  position: absolute;
  right: -2%;
  top: 9%;
  width: 90%;
  transform-style: preserve-3d;
}
.work-19 {
  transform: rotateY(-17deg) rotateX(5deg);
}
.work-20 {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--ink);
  box-shadow: 0 70px 110px -40px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.03);
}
.work-21 {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--graphite);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.work-22 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3A3D44;
  display: block;
}
.work-23 {
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 6px;
  background: #0F1012;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #8D9098;
}
.work-24 {
  display: block;
  width: 100%;
  height: auto;
}
.work-25 {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 50%;
  transform-style: preserve-3d;
  z-index: 2;
}
.work-26 {
  transform: rotateY(-13deg) rotateX(4deg) translateZ(90px);
}
.work-27 {
  position: absolute;
  right: 0;
  top: 8%;
  width: 86%;
  height: 76%;
  background: radial-gradient(closest-side, rgba(43,91,215,0.40), transparent);
  filter: blur(30px);
}
.work-28 {
  position: absolute;
  left: 0;
  bottom: 3%;
  width: 50%;
  transform-style: preserve-3d;
  z-index: 2;
}
.work-29 {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 30px 60px 80px -24px rgba(0,0,0,0.95);
}
.work-30 {
  position: absolute;
  right: 0;
  top: 8%;
  width: 86%;
  height: 76%;
  background: radial-gradient(closest-side, rgba(42,86,245,0.34), transparent);
  filter: blur(30px);
}
.work-31 {
  position: absolute;
  left: 2%;
  bottom: 6%;
  width: 44%;
  transform-style: preserve-3d;
  z-index: 2;
}
.work-32 {
  border-radius: 14px;
  background: #FFFFFF;
  color: #13203a;
  overflow: hidden;
  border: 1px solid #d9e0ea;
  box-shadow: 30px 50px 70px -24px rgba(0,0,0,0.9);
}
.work-33 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #0c1a30;
  color: #eef3ff;
}
.work-34 {
  font-weight: 650;
  font-size: 13px;
}
.work-35 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #a9b9da;
}
.work-36 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}
.work-37 {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 2px solid #2a56f5;
  border-radius: 10px;
  background: #e7ecff;
  font-size: 12px;
}
.work-38 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 4px solid #2a56f5;
  box-sizing: border-box;
  background: #FFFFFF;
  flex: none;
}
.work-39 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #e6f4f0;
  color: #0d7560;
  font-size: 12px;
  font-weight: 650;
}
.work-40 {
  position: absolute;
  right: 0;
  top: 8%;
  width: 86%;
  height: 76%;
  background: radial-gradient(closest-side, rgba(11,93,75,0.50), transparent);
  filter: blur(30px);
}
.work-41 {
  position: absolute;
  left: 4%;
  bottom: -4%;
  width: 24%;
  min-width: 120px;
  transform-style: preserve-3d;
  z-index: 2;
}
.work-42 {
  border-radius: 30px;
  border: 6px solid #1C1D21;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 30px 60px 80px -24px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.08);
}
.work-43 {
  display: flex;
  gap: 8px;
  padding: 0 4px;
}
.work-44 {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  display: block;
}
.work-45 {
  display: block;
  width: 100%;
  height: 100%;
  background: #FF8A5B;
}
.work-46 {
  position: relative;
  scroll-margin-top: 90px;
  view-timeline-name: --how;
  background: radial-gradient(60% 45% at 50% 72%, rgba(255,106,61,0.15), transparent 70%), linear-gradient(180deg, var(--ink), #0E0B0B 50%, var(--ink));
}
.work-47 {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(88px, 9vw, 120px) clamp(16px, 4vw, 48px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.work-48 {
  position: absolute;
  right: clamp(16px, 4vw, 48px);
  top: 40px;
  left: 40%;
  height: 220px;
  pointer-events: none;
}
.work-49 {
  position: absolute;
  right: 0;
  top: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(90px, 13vw, 200px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(255,138,91,0.20);
  white-space: nowrap;
}
.work-50 {
  position: absolute;
  right: 0;
  top: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(90px, 13vw, 200px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(255,138,91,0.16);
  white-space: nowrap;
}
.work-51 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}
.work-52 {
  margin: 0;
  color: var(--mist);
  font-size: 18px;
  text-wrap: pretty;
  max-width: 54ch;
}
.work-53 {
  position: relative;
}
.work-54 {
  position: absolute;
  left: 26px;
  right: calc((100% - 72px) / 5 - 26px);
  top: 24px;
  height: 2px;
  background: var(--line);
}
.work-55 {
  position: absolute;
  left: 26px;
  right: calc((100% - 72px) / 5 - 26px);
  top: 23px;
  height: 4px;
  border-radius: 4px;
  transform-origin: left center;
  background: linear-gradient(90deg, #FF9A6B, #FF6A3D 50%, var(--nine-red));
  box-shadow: 0 0 20px rgba(255,106,61,0.75);
}
.work-56 {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.work-57 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.work-58 {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--nine-red);
  border: 2px solid #FF8A5B;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 0 28px rgba(255,106,61,0.6);
}
.work-59 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(255,138,91,0.35);
  background: linear-gradient(170deg, rgba(42,24,22,0.85), rgba(18,13,13,0.85));
  min-height: 210px;
  box-sizing: border-box;
}
.work-60 {
  margin: 0;
  font-size: 21px;
  font-weight: 650;
}
.work-61 {
  margin: 0;
  color: #A9ACB3;
  font-size: 15px;
}

/* ---- Agents ---- */
.agents-1 {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
  background: radial-gradient(40% 40% at 28% 62%, rgba(255,106,61,0.22), transparent 70%), radial-gradient(45% 35% at 92% 18%, rgba(43,91,215,0.12), transparent 70%), linear-gradient(180deg, var(--ink), #0F0B0B 55%, var(--ink));
}
.agents-2 {
  right: -2%;
  top: 64px;
  font-size: clamp(110px, 15vw, 230px);
}
.agents-3 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 124px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.agents-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 28px 64px;
  align-items: end;
}
.agents-5 {
  margin: 0;
  color: var(--mist);
  font-size: 18px;
  text-wrap: pretty;
  max-width: 52ch;
}
.agents-6 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #4A2B27;
  border-radius: 16px;
  background: linear-gradient(170deg, #1E1112, #130B0C);
  box-shadow: 0 30px 70px -40px rgba(255,106,61,0.55);
}
.agents-7 {
  flex: none;
  margin-top: 2px;
}
.agents-8 {
  margin: 0;
  font-size: 15px;
  color: var(--mist);
}
.agents-9 {
  position: relative;
  padding-bottom: 84px;
}
.agents-10 {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.agents-11 {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,106,61,0.42), rgba(229,72,77,0.12) 55%, transparent);
}
.agents-12 {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
}
.agents-13 {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(255,170,130,0.28);
}
.agents-14 {
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
}
.agents-15 {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,106,61,0) 0deg, rgba(255,106,61,0) 290deg, rgba(255,106,61,0.10) 330deg, rgba(255,150,110,0.38) 359deg, rgba(255,106,61,0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 31%);
  mask: radial-gradient(closest-side, transparent 30%, #000 31%);
}
.agents-16 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: -90deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-17 {
  animation-delay: 0s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-18 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: -50deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-19 {
  animation-delay: -8s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-20 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: -10deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-21 {
  animation-delay: -7s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-22 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: 30deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-23 {
  animation-delay: -6s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-24 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: 70deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-25 {
  animation-delay: -5s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-26 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: 110deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-27 {
  animation-delay: -4s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-28 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: 150deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-29 {
  animation-delay: -3s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-30 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: 190deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-31 {
  animation-delay: -2s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-32 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40cqw;
  height: 1px;
  transform-origin: 0 50%;
  rotate: 230deg;
  background: linear-gradient(90deg, rgba(255,138,91,0) 12cqw, rgba(255,138,91,0.30) 30cqw, rgba(255,138,91,0.10));
}
.agents-33 {
  animation-delay: -1s;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD2BC;
  box-shadow: 0 0 12px 3px rgba(255,106,61,0.9);
}
.agents-34 {
  position: absolute;
  left: 50%;
  top: calc(50% + 13.5cqw);
  width: 2px;
  height: calc(36.5cqw + 30px);
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(255,138,91,0.8), rgba(255,138,91,0.25));
  z-index: 1;
}
.agents-35 {
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 14px 4px rgba(255,106,61,0.9);
}
.agents-36 {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 27cqw;
  height: 27cqw;
  min-width: 118px;
  min-height: 118px;
  z-index: 2;
}
.agents-37 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,138,91,0.8);
}
.agents-38 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,170,130,0.7);
  background: radial-gradient(circle at 50% 30%, #3A1C16, #160E0E 70%);
  box-shadow: 0 0 70px rgba(255,106,61,0.55), inset 0 0 34px rgba(255,106,61,0.30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 10px;
}
.agents-39 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(13px, 2.8cqw, 19px);
  line-height: 1.05;
}
.agents-40 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: clamp(8px, 1.6cqw, 10px);
  letter-spacing: 0.12em;
  color: #FF9A6B;
}
.agents-41 {
  position: absolute;
  left: 50.000%;
  top: 10.000%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-42 {
  animation-delay: 0s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-43 {
  animation-delay: 0s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-44 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: 0s;
}
.agents-45 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(12px, 2.5cqw, 16px);
  color: var(--fog);
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.agents-46 {
  position: absolute;
  left: 75.712%;
  top: 19.358%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-47 {
  animation-delay: -8s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-48 {
  animation-delay: -8s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-49 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: -8s;
}
.agents-50 {
  position: absolute;
  left: 89.392%;
  top: 43.054%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-51 {
  animation-delay: -7s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-52 {
  animation-delay: -7s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-53 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: -7s;
}
.agents-54 {
  position: absolute;
  left: 84.641%;
  top: 70.000%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-55 {
  animation-delay: -6s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-56 {
  animation-delay: -6s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-57 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: -6s;
}
.agents-58 {
  position: absolute;
  left: 63.681%;
  top: 87.588%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-59 {
  animation-delay: -5s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-60 {
  animation-delay: -5s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-61 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: -5s;
}
.agents-62 {
  position: absolute;
  left: 36.319%;
  top: 87.588%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-63 {
  animation-delay: -4s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-64 {
  animation-delay: -4s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-65 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: -4s;
}
.agents-66 {
  position: absolute;
  left: 15.359%;
  top: 70.000%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-67 {
  animation-delay: -3s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-68 {
  animation-delay: -3s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-69 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: -3s;
}
.agents-70 {
  position: absolute;
  left: 10.608%;
  top: 43.054%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-71 {
  animation-delay: -2s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-72 {
  animation-delay: -2s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-73 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: -2s;
}
.agents-74 {
  position: absolute;
  left: 24.288%;
  top: 19.358%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
.agents-75 {
  animation-delay: -1s;
  position: relative;
  width: 10cqw;
  height: 10cqw;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 1px solid #34373D;
  background: radial-gradient(circle at 50% 35%, #26282D, #141518);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-76 {
  animation-delay: -1s;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FF9A6B, #D2402F 75%);
  opacity: 0;
}
.agi svg.agents-77 {
  position: relative;
  flex: none;
  width: 46%;
  height: 46%;
  animation-delay: -1s;
}
.agents-78 {
  position: absolute;
  left: 50%;
  top: calc(100% + 30px);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,170,130,0.55);
  background: rgba(30,18,16,0.9);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
}
.agents-79 {
  display: flex;
  flex-direction: column;
}
.agents-80 {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 3px 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.agents-81 {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #34373D;
  background: linear-gradient(170deg, #1C1D21, #121316);
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-82 {
  flex: none;
}
.agents-83 {
  font-size: 16px;
  color: var(--mist);
}
.agents-84 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  color: #FFFFFF;
  font-size: 17px;
  margin-right: 8px;
}
.agents-85 {
  font-size: 13px;
  color: #8D9098;
}
.agents-86 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: #FF7A5C;
}

/* ---- In the field ---- */
.field-1 {
  position: relative;
  overflow: hidden;
  background: radial-gradient(60% 40% at 50% 0%, rgba(255,106,61,0.12), transparent 70%), radial-gradient(40% 30% at 0% 70%, rgba(255,106,61,0.10), transparent 70%), linear-gradient(180deg, var(--ink), #0F0C0B 50%, var(--ink));
}
.field-2 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 124px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.field-3 {
  perspective: 1400px;
}
.field-4 {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #141414;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.95);
}
.field-5 {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  display: block;
}
.field-6 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0) 42%, rgba(8,8,10,0.86) 100%);
}
.field-7 {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-8 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #FF9A6B;
}
.field-9 {
  font-weight: 650;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.3;
  text-wrap: balance;
}
.field-10 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #7D8189;
}
a.field-11 {
  color: #FF9A6B;
}

/* ---- Films ---- */
.films-1 {
  position: relative;
  overflow: hidden;
  background: radial-gradient(50% 50% at 32% 62%, rgba(255,106,61,0.17), transparent 70%), radial-gradient(40% 40% at 92% 30%, rgba(43,91,215,0.12), transparent 70%), linear-gradient(180deg, var(--ink), #0E0B0B 50%, var(--ink));
}
.films-2 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  perspective: 1600px;
}
.films-3 {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,170,130,0.30);
  background: #000;
  box-shadow: 0 60px 110px -40px rgba(0,0,0,0.95), 0 40px 120px -50px rgba(255,106,61,0.6);
}
.films-4 {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.films-5 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.films-6 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #FF9A6B;
}
.films-7 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  font-size: 15px;
  color: var(--mist);
}
.films-8 {
  color: #FFFFFF;
  font-weight: 650;
}
.films-9 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #8D9098;
}
.films-10 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.films-11 {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #000;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.95);
}
.films-12 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--signal);
}
.films-13 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--mist);
}
.films-14 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #8D9098;
  white-space: nowrap;
}

/* ---- Leadership ---- */
.company-1 {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
  background: radial-gradient(50% 35% at 85% 12%, rgba(255,106,61,0.14), transparent 70%), radial-gradient(45% 35% at 10% 80%, rgba(43,91,215,0.12), transparent 70%), linear-gradient(180deg, var(--ink), #0D0C0E 50%, var(--ink));
}
.company-2 {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.company-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.company-4 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}
.company-5 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(38px, 4.8vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.032em;
}
.company-6 {
  margin: 0;
  max-width: 44ch;
  color: var(--mist);
  font-size: 18px;
  text-wrap: pretty;
}
.company-7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  perspective: 1400px;
}
.company-8 {
  margin: 0;
  border: 1px solid #24262B;
  border-radius: 22px;
  background: #111214;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 70px -40px rgba(0,0,0,0.95);
}
.company-9 {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.company-10 {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.company-11 {
  font-size: 20px;
  font-weight: 650;
}
.company-12 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--nine-red);
}
.company-13 {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 4px;
}
.company-14 {
  display: flex;
  align-items: center;
  gap: 16px;
}
.company-15 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--steel);
}
.company-16 {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(42,44,49,0));
}
.company-17 {
  margin: 0;
  border: 1px solid #22293A;
  border-radius: 22px;
  background: #111214;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(122,162,247,0.14), 0 40px 70px -40px rgba(0,0,0,0.95);
}
.company-18 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--signal);
  border: 1px solid rgba(122,162,247,0.4);
  background: rgba(122,162,247,0.08);
  border-radius: 999px;
  padding: 2px 8px;
}
.company-19 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--signal);
}
.company-20 {
  position: relative;
  border: 1px solid #22304A;
  border-radius: 22px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(122,162,247,0.16) 0%, rgba(122,162,247,0) 60%), linear-gradient(180deg, #121620 0%, #0D0F13 100%);
  box-shadow: inset 0 1px 0 rgba(122,162,247,0.16), 0 40px 70px -40px rgba(0,0,0,0.95), 0 30px 90px -50px rgba(43,91,215,0.5);
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.company-21 {
  flex: 1;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.company-22 {
  display: block;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.55;
  animation-delay: -0.0s;
}
.company-23 {
  display: block;
  width: 3px;
  height: 23px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.58;
  animation-delay: -0.14s;
}
.company-24 {
  display: block;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.6;
  animation-delay: -0.27s;
}
.company-25 {
  display: block;
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.63;
  animation-delay: -0.41s;
}
.company-26 {
  display: block;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.66;
  animation-delay: -0.55s;
}
.company-27 {
  display: block;
  width: 3px;
  height: 38px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.69;
  animation-delay: -0.69s;
}
.company-28 {
  display: block;
  width: 3px;
  height: 54px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.72;
  animation-delay: -0.82s;
}
.company-29 {
  display: block;
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.75;
  animation-delay: -0.96s;
}
.company-30 {
  display: block;
  width: 3px;
  height: 49px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.78;
  animation-delay: -1.1s;
}
.company-31 {
  display: block;
  width: 3px;
  height: 55px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.8;
  animation-delay: -1.23s;
}
.company-32 {
  display: block;
  width: 3px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.83;
  animation-delay: -1.37s;
}
.company-33 {
  display: block;
  width: 3px;
  height: 50px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.85;
  animation-delay: -1.51s;
}
.company-34 {
  display: block;
  width: 3px;
  height: 66px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.86;
  animation-delay: -1.64s;
}
.company-35 {
  display: block;
  width: 3px;
  height: 56px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.88;
  animation-delay: -1.78s;
}
.company-36 {
  display: block;
  width: 3px;
  height: 70px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.89;
  animation-delay: -0.12s;
}
.company-37 {
  display: block;
  width: 3px;
  height: 45px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.9;
  animation-delay: -0.26s;
}
.company-38 {
  display: block;
  width: 3px;
  height: 49px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.9;
  animation-delay: -0.39s;
}
.company-39 {
  display: block;
  width: 3px;
  height: 43px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.9;
  animation-delay: -0.53s;
}
.company-40 {
  display: block;
  width: 3px;
  height: 61px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.9;
  animation-delay: -0.67s;
}
.company-41 {
  display: block;
  width: 3px;
  height: 79px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.89;
  animation-delay: -0.8s;
}
.company-42 {
  display: block;
  width: 3px;
  height: 62px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.88;
  animation-delay: -0.94s;
}
.company-43 {
  display: block;
  width: 3px;
  height: 69px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.86;
  animation-delay: -1.08s;
}
.company-44 {
  display: block;
  width: 3px;
  height: 50px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.85;
  animation-delay: -1.21s;
}
.company-45 {
  display: block;
  width: 3px;
  height: 63px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.83;
  animation-delay: -1.35s;
}
.company-46 {
  display: block;
  width: 3px;
  height: 35px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.8;
  animation-delay: -1.49s;
}
.company-47 {
  display: block;
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.78;
  animation-delay: -1.63s;
}
.company-48 {
  display: block;
  width: 3px;
  height: 50px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.75;
  animation-delay: -1.76s;
}
.company-49 {
  display: block;
  width: 3px;
  height: 48px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.72;
  animation-delay: -0.1s;
}
.company-50 {
  display: block;
  width: 3px;
  height: 36px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.69;
  animation-delay: -0.24s;
}
.company-51 {
  display: block;
  width: 3px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.66;
  animation-delay: -0.37s;
}
.company-52 {
  display: block;
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.63;
  animation-delay: -0.51s;
}
.company-53 {
  display: block;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.6;
  animation-delay: -0.65s;
}
.company-54 {
  display: block;
  width: 3px;
  height: 21px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.58;
  animation-delay: -0.78s;
}
.company-55 {
  display: block;
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--cobalt));
  opacity: 0.55;
  animation-delay: -0.92s;
}
.company-56 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.company-57 {
  margin: 0;
  color: var(--mist);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
a.company-58 {
  padding-top: 16px;
  border-top: 1px solid #22293A;
  font-size: 15px;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

/* ---- Contact ---- */
.contact-1 {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
  background: var(--ink);
}
.contact-2 {
  position: absolute;
  left: 50%;
  top: 58%;
  width: max(170%, 760px);
  aspect-ratio: 2.6 / 1;
  translate: -50% 0;
  border-radius: 50%;
  border-top: 1.5px solid rgba(255,176,138,0.85);
  background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255,106,61,0.36), rgba(229,72,77,0.10) 45%, rgba(10,10,12,0) 72%), #09090B;
  box-shadow: 0 -40px 140px -10px rgba(255,106,61,0.45), 0 -2px 26px rgba(255,150,110,0.45);
  pointer-events: none;
}
.contact-3 {
  position: absolute;
  right: -100px;
  bottom: -200px;
  width: 1000px;
  height: 800px;
  background: radial-gradient(closest-side, rgba(229,72,77,0.16), transparent);
  pointer-events: none;
}
.contact-4 {
  position: absolute;
  left: -4%;
  bottom: -260px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 760px;
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(229,72,77,0.2);
  pointer-events: none;
  user-select: none;
}
.contact-5 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(90px, 11vw, 160px) clamp(16px, 4vw, 48px) clamp(120px, 13vw, 190px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 64px;
  align-items: center;
}
.contact-6 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-7 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 850;
  font-stretch: 118%;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.contact-8 {
  margin: 0;
  max-width: 40ch;
  color: var(--mist);
  font-size: 18px;
}
.contact-9 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--steel);
}
.contact-10 {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -30px;
  height: 140px;
  background: radial-gradient(closest-side, rgba(229,72,77,0.35), transparent);
  filter: blur(26px);
}
.contact-11 {
  position: relative;
  border: 1px solid #34373D;
  border-radius: 24px;
  background: linear-gradient(170deg, rgba(26,27,31,0.92), rgba(15,16,18,0.92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 50px 90px -40px rgba(0,0,0,0.95);
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-12 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}
.contact-13 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--mist);
}
.contact-14 {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--fog);
  font-size: 16px;
}
.contact-15 {
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--fog);
  font-size: 16px;
}
.contact-16 {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--fog);
  font-size: 16px;
  resize: vertical;
}
.contact-17 {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--fog);
  color: var(--ink);
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

/* ---- Sticky bar ---- */
.cta-1 {
  position: sticky;
  bottom: 20px;
  z-index: 55;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
.cta-2 {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 7px 7px 22px;
  border-radius: 999px;
  background: rgba(17,18,20,0.74);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.95);
}
.cta-3 {
  font-size: 15px;
  color: var(--steel);
  white-space: nowrap;
}
.cta-4 {
  color: var(--fog);
  font-weight: 600;
}
.cta-5 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--fog);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

/* ---- Footer ---- */
.foot-1 {
  position: relative;
  border-top: 1px solid #1C1E22;
  background: #08090A;
}
.foot-2 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px clamp(16px, 4vw, 48px) 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.foot-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 40px;
}
.foot-4 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.foot-5 {
  height: 28px;
  width: auto;
  display: block;
  align-self: flex-start;
}
.foot-6 {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: 115%;
  font-size: 18px;
  color: var(--fog);
}
.foot-7 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
.foot-8 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #7B7F88;
}
.foot-9 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #1C1E22;
  font-size: 13px;
  color: #7B7F88;
}
.foot-10 {
  display: flex;
  gap: 20px;
}
a.foot-11 {
  color: var(--steel);
}

/* ============ Added for production (not in the reference; nothing here changes the idle look) ============ */
[hidden] { display: none !important; }

/* Skip link: off screen until it has focus, then a Signal-blue ringed pill at the top left. */
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  transform: translateY(-200%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--fog); color: var(--ink); font-weight: 600; font-size: 15px;
}
.skip:focus { transform: none; color: var(--ink); }

/* 44 px hit areas for text links, without moving anything: padding grows the target, the matching negative margin gives the space back. */
.nav-links a, .foot-7 a { padding: 10px 10px; margin: -10px -10px; }
.nav-3 { padding: 9px 0; margin: -9px 0; }
.ext { padding: 13px 6px; margin: -13px -6px; }
a.foot-11 { padding: 12px 10px; margin: -12px -10px; }

.contact-email { color: inherit; }

/* Contact form: honeypot, status line, Turnstile, success panel */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-error { margin: 0; font-size: 14px; color: #F2555A; }
.form-error:empty { display: none; }
.form-actions { display: flex; flex-direction: column; }
.turnstile:not(.is-active) { display: none; }
.turnstile.is-active { display: flex; justify-content: center; margin-bottom: 14px; }
.btn-primary:disabled { opacity: .65; cursor: progress; }
.btn-primary:disabled:hover { background: var(--fog) !important; color: var(--ink) !important; transform: none; box-shadow: none; }
.form-sent { justify-content: center; min-height: 180px; }
.form-sent-text { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 112%; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }

/* Privacy and 404 pages */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) clamp(16px, 4vw, 48px) clamp(80px, 10vw, 140px); display: flex; flex-direction: column; gap: 18px; }
.legal .eyebrow { margin: 0; }
.legal-title { margin: 0 0 6px; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 115%; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.legal-lede { margin: 0; font-size: 19px; color: var(--mist); text-wrap: pretty; }
.legal-h { margin: 22px 0 0; font-family: 'Archivo', sans-serif; font-weight: 750; font-stretch: 112%; font-size: 24px; letter-spacing: -0.015em; }
.legal p { margin: 0; color: var(--mist); text-wrap: pretty; }
.legal .legal-lede { color: var(--mist); }
.legal a { color: var(--signal); }

/* ============ A9S-8: Strategy section, the Assess card, the Products row (docs/specs/a9s-8-strategy-sections.md; mockups in docs/strategy-v1/mockups/) ============ */
a.strat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FF9A6B;
  font-size: 16px;
}

/* ---- Strategy ---- */
.strat-1 {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
  background: var(--ink);
}
.strat-2 {
  left: -2%;
  top: 44px;
  font-size: clamp(110px, 16vw, 250px);
}
.strat-3 {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 124px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
}
.strat-4 {
  color: var(--slate);
}
.strat-6 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.strat-7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  column-gap: 24px;
  row-gap: 32px;
}
.strat-8 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.strat-8h {
  border-top-color: #FF6A3D;
}
.strat-9 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(44px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.strat-9h {
  color: #FF9A6B;
}
.strat-10 {
  max-width: 24ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--steel);
}
.strat-11 {
  margin: 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}

/* The sample-pages panel */
.strat-12 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px clamp(16px, 3vw, 40px) 40px;
  border: 1px solid #1D1E22;
  border-radius: 28px;
  background: radial-gradient(120% 90% at 50% 110%, rgba(255,106,61,0.16), rgba(255,106,61,0) 60%), #0E0F12;
}
.strat-13 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.strat-14 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid #34373D;
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}
.strat-15 {
  display: inline-block;
  width: 18px;
  height: 8px;
  border-radius: 1px;
  background: var(--fog);
}
.strat-16 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
/* Each page is drawn once at its design size (376 x 211.5) and scaled as a whole (--s), so the small type never reflows. The steps follow the width of the stage (the container rules sit with the reference's rules, above). */
.strat-17 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 36px 0 8px;
}
.strat-pgw {
  position: relative;
  flex: none;
  width: calc(376px * var(--s));
  height: calc(211.5px * var(--s));
}
.strat-pgw1 {
  transform: rotate(-2.5deg) translateY(12px);
}
.strat-pgw2 {
  z-index: 2;
  transform: translateY(-10px);
}
.strat-pgw3 {
  transform: rotate(2.5deg) translateY(12px);
}
.strat-pg {
  position: absolute;
  left: 0;
  top: 0;
  width: 376px;
  height: 211.5px;
  box-sizing: border-box;
  padding: 18px 20px 12px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: normal;
  transform-origin: 0 0;
  transform: scale(var(--s));
}
.strat-pgl {
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 34px 60px -28px rgba(0,0,0,0.85);
}
.strat-pgd {
  background: #131418;
  color: var(--fog);
  border: 1px solid #26282D;
  box-shadow: 0 40px 70px -28px rgba(0,0,0,0.9);
}
.strat-pk {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D2402F;
}
.strat-pkd {
  color: #FF8A5B;
}
.strat-pt {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.strat-ptd {
  font-size: 13px;
}
.strat-pl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.strat-pr {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 6px;
  align-items: baseline;
  padding-top: 4px;
  border-top: 1px solid #DDD9D2;
}
.strat-pn {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 7px;
  color: #D2402F;
}
.strat-px {
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.25;
}
.strat-bar {
  display: inline-block;
  width: 44px;
  height: 8px;
  border-radius: 1px;
  background: var(--ink);
  vertical-align: -1px;
}
.strat-barl {
  width: 28px;
  height: 6px;
  background: var(--fog);
}
.strat-pf {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 6px;
  letter-spacing: 0.06em;
  color: var(--slate);
}
.strat-cl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.strat-cr {
  display: grid;
  grid-template-columns: 78px 1fr 28px;
  gap: 6px;
  align-items: center;
}
.strat-cn {
  font-size: 6.5px;
  text-align: right;
  color: var(--steel);
}
.strat-ct {
  display: block;
  height: 6px;
}
.strat-cb {
  display: block;
  height: 6px;
  border-radius: 1px;
  background: #3A3D44;
}
.strat-cv {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 6px;
  color: var(--steel);
}
.strat-w100 { width: 100%; }
.strat-w54 { width: 54%; }
.strat-w43 { width: 43%; }
.strat-w27 { width: 27%; }
.strat-w15 { width: 15%; }
.strat-w10 { width: 10%; }
.strat-w7 { width: 7%; }
.strat-w3 { width: 3px; }
.strat-cho .strat-cn, .strat-cho .strat-cv {
  color: #FF9A6B;
}
.strat-cho .strat-cb {
  background: #FF9A6B;
}
.strat-chn .strat-cn, .strat-chn .strat-cv {
  font-weight: 600;
  color: #FF6A3D;
}
.strat-chn .strat-cb {
  background: #FF6A3D;
}
.strat-rule {
  height: 2px;
  margin-top: 4px;
  background: #FF6A3D;
}
.strat-dg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}
.strat-dc {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.strat-dl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 6px;
  letter-spacing: 0.1em;
  color: #D2402F;
}
.strat-dn {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 11px;
}
.strat-dt {
  font-size: 6.5px;
  line-height: 1.35;
  color: #34373D;
}
.strat-wk {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--fog);
  font-size: 6.5px;
}
.strat-wl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 6px;
  letter-spacing: 0.1em;
  color: #FF8A5B;
}

/* What you get */
.strat-18 {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.strat-19 {
  flex-basis: 420px;
}
.strat-20 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 750;
  font-stretch: 115%;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.strat-21 {
  margin: 0;
  flex: 1 1 340px;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mist);
}
.strat-22 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}
.strat-23 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid #26282D;
  border-radius: 20px;
  background: #121316;
}
.strat-24 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #FF8A5B;
}
.strat-25 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: 112%;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.strat-26 {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--steel);
}

/* The usual way vs. the A9 way (the hand-off section's two panels) */
.strat-27 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}
.strat-28 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.strat-29 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 750;
  font-stretch: 112%;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--mist);
}
.strat-29h {
  color: var(--fog);
}
.strat-30 {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--steel);
}
.strat-30h {
  color: var(--mist);
}
.strat-31 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px dashed #34373D;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
.strat-31h {
  border-top-color: #4A2B27;
  color: #FF9A6B;
}

.strat-32 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.strat-33 {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--steel);
}

/* ---- Services: the featured Assess card ---- */
.strat-sv {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.strat-as {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid #4A2B27;
  border-radius: 24px;
  background: #121316;
  box-shadow: inset 0 1px 0 rgba(255,154,107,0.10), 0 40px 90px -50px rgba(255,106,61,0.45);
}
.strat-as1 {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.strat-as2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.strat-as3 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.strat-as4 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #FF8A5B;
}
.strat-as5 {
  padding: 4px 9px;
  border-radius: 999px;
  background: #FF6A3D;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.strat-as6 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 750;
  font-stretch: 112%;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.strat-as7 {
  margin: 0;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mist);
}
.strat-as8 {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 15px;
}
.strat-as9 {
  color: var(--mist);
}
.strat-as10 {
  flex: 1 1 320px;
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.strat-as10 li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #26282D;
  font-size: 16px;
  color: var(--fog);
}
.strat-as10 li:last-child {
  border-bottom: 0;
}

/* ---- Products: the bottom row ---- */
.strat-prow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.strat-prow-t {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--mist);
}