/* ============================================================
   EmotionX design system, v3
   Monochrome. Black, white, and the greys between.
   Structure: fixed dark nav, full-bleed media hero, alternating
   dark and light bands, sharp corners against one round pill.
   ============================================================ */

:root{
  --black:#000000;
  --ink:#0B0C0D;
  --nav:#121415;
  --surface:#17191B;
  --surface-2:#202325;
  --paper:var(--white);
  --paper-2:#E9EAEB;
  --white:#FFFFFF;

  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.82);
  --on-dark-3:rgba(255,255,255,.64);
  --on-dark-4:rgba(255,255,255,.54);

  --on-light:#0B0C0D;
  --on-light-2:#3C4145;
  --on-light-3:#666C71;
  --on-light-4:#63686D;

  --line-d:rgba(255,255,255,.13);
  --line-d-2:rgba(255,255,255,.07);
  --line-l:#DEE0E2;
  --line-l-2:#EBECED;

  --alert:#C4485C;

  --ff:"Google Sans","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"Google Sans","Helvetica Neue",Arial,sans-serif;

  --container:1240px;
  --pad:40px;
  --band-y:104px;
  --r:2px;
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--ink);color:var(--on-light-2);
  font-family:var(--ff);font-size:15px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white);color:var(--ink);padding:10px 16px;font-family:var(--ff-mono);font-size:12px}
.skip:focus{left:16px;top:16px}

/* ---------- type ---------- */

h1,h2,h3,h4{font-family:var(--ff);color:inherit;margin:0 0 .5em;font-weight:700;letter-spacing:-.022em}
h1{font-size:clamp(34px,5.2vw,60px);line-height:1.04}
h2{font-size:clamp(26px,3.4vw,42px);line-height:1.08}
h3{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em}
h4{font-size:16px;line-height:1.35;font-weight:600;letter-spacing:-.008em}

p{margin:0 0 1.1em;max-width:68ch}
p:last-child{margin-bottom:0}
.lead{font-size:18px;line-height:1.6;max-width:60ch;margin-bottom:1.4em}

.ey{display:block;font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0 0 20px}
.ey i{font-style:normal;opacity:.55}
.cap{font-size:12.5px;line-height:1.55;max-width:62ch;margin:18px 0 0}
.mono{font-family:var(--ff-mono)}
.small{font-size:14px}

/* ---------- layout ---------- */

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
@media (max-width:640px){:root{--pad:22px;--band-y:68px}}

.band{padding:var(--band-y) 0;background:var(--ink);color:var(--on-dark-2);border-bottom:1px solid var(--line-d-2)}
.band h1,.band h2,.band h3,.band h4{color:var(--on-dark)}
.band .ey{color:var(--on-dark-3)}
.band .lead{color:var(--on-dark-2)}
.band .cap{color:var(--on-dark-4)}
.band.alt{background:var(--surface)}

.band.light{background:var(--paper);color:var(--on-light-2);border-bottom:1px solid var(--line-l)}
.band.light h1,.band.light h2,.band.light h3,.band.light h4{color:var(--on-light)}
.band.light .ey{color:var(--on-light-3)}
.band.light .lead{color:var(--on-light-2)}
.band.light .cap{color:var(--on-light-4)}
.band.light-2{background:var(--white)}

.band.tight{padding:64px 0}
.narrow{max-width:800px}

.rv{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.rv.rv-pending{opacity:0;transform:translateY(10px)}
.rv.in{opacity:1;transform:none}

/* ---------- nav ---------- */

.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--nav);border-bottom:1px solid var(--line-d-2)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;gap:24px}
.mark{display:flex;align-items:center;flex:none}
.mark img{height:19px;width:auto}

.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--on-dark-3);padding:3px 0;border-bottom:1.5px solid transparent;transition:color .18s ease,border-color .18s ease;white-space:nowrap}
.nav-links a:hover{color:var(--on-dark)}
.nav-links a[aria-current="page"]{color:var(--on-dark);border-bottom-color:var(--white)}

.nav-cta{flex:none;margin-left:8px;display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--ink);font-size:12.5px;font-weight:600;padding:9px 20px;border-radius:999px;border:1px solid var(--white);transition:background .18s ease,color .18s ease}
.nav-cta:hover{background:transparent;color:var(--white)}

.burger{display:none;appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--white);width:44px;height:44px;flex:none;cursor:pointer;align-items:center;justify-content:center;padding:0;margin-left:auto;border-radius:50%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .18s ease}
.burger i{display:block;width:24px;height:16px;position:relative;pointer-events:none}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;top:50%;margin-top:-1px;width:24px;height:2px;background:currentColor;border-radius:999px;transition:transform .2s ease}
.burger i::before{transform:translateY(-4px)}
.burger i::after{transform:translateY(4px)}
.burger[aria-expanded="true"] i::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:rotate(-45deg)}
.burger:active{background:rgba(255,255,255,.1)}
@media(hover:hover) and (pointer:fine){.burger:hover{background:rgba(255,255,255,.06)}}
@media(prefers-reduced-motion:reduce){.burger,.burger i::before,.burger i::after{transition:none}}

@media (max-width:1000px){
  .burger{display:flex}
  .nav-cta{display:none}
  .nav-links{position:absolute;top:var(--nav-h);left:0;right:0;margin:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--nav);border-bottom:1px solid var(--line-d);padding:6px 22px 18px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;width:100%;border-bottom:1px solid var(--line-d-2);font-size:15px}
}

main{padding-top:var(--nav-h);position:relative}

/* ---------- hero ---------- */

/* 16:9 frame. Below ~1000px viewport the ratio would leave too little
   room for the headline, so min-height takes over and the media crops. */
.hero{position:relative;width:100%;aspect-ratio:16/9;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:var(--black)}
.hero.tall{aspect-ratio:16/9}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.media-play{position:absolute;top:16px;right:20px;z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(11,12,13,.85);color:#fff;font:500 14px var(--ff);cursor:pointer}
.media-play[hidden]{display:none}
.media-play::before{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 26%,rgba(0,0,0,.12) 52%,rgba(0,0,0,0) 74%),linear-gradient(to right,rgba(0,0,0,.40) 0%,rgba(0,0,0,.06) 52%,rgba(0,0,0,0) 80%)}
.hero-scrim.mid{background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.66) 24%,rgba(0,0,0,.30) 50%,rgba(0,0,0,0) 78%),linear-gradient(to right,rgba(0,0,0,.50) 0%,rgba(0,0,0,.10) 55%,rgba(0,0,0,0) 82%)}
.hero-scrim.strong{background:linear-gradient(to top,rgba(0,0,0,.93) 0%,rgba(0,0,0,.83) 26%,rgba(0,0,0,.58) 54%,rgba(0,0,0,.18) 82%,rgba(0,0,0,0) 100%),linear-gradient(to right,rgba(0,0,0,.60) 0%,rgba(0,0,0,.16) 58%,rgba(0,0,0,0) 88%)}
.hero-scrim.max{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.25) 88%,rgba(0,0,0,0) 100%),linear-gradient(to right,rgba(0,0,0,.80) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 90%)}
.hero-in{position:relative;z-index:2;width:100%;padding:0 0 76px}
.hero .ey{color:rgba(255,255,255,.62)}
.hero h1{color:#fff;max-width:15ch}
.hero .lead{color:rgba(255,255,255,.86);max-width:52ch}
.hero .ethos,.hero p{color:rgba(255,255,255,.92)}
@media (max-width:640px){.hero-in{padding-bottom:52px}}

/* lanyard (About Us) — anchored to hero, canvas overflows below it so the card can be dragged out; above hero content (z50), below nav (z100) */
.lanyard{position:absolute;left:0;top:0;z-index:50;pointer-events:none}
.lanyard-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* ---------- buttons ---------- */

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn,.btn-ghost{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;padding:12px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-family:var(--ff);transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn:hover{background:transparent;color:var(--white)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.band.light .btn{background:var(--ink);color:var(--white);border-color:var(--ink)}
.band.light .btn:hover{background:transparent;color:var(--ink)}
.band.light .btn-ghost{color:var(--ink);border-color:rgba(0,0,0,.24)}
.band.light .btn-ghost:hover{border-color:var(--ink);background:rgba(0,0,0,.05)}

.tlink{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--ff-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .2s ease}
.tlink:hover{gap:13px}

/* ---------- panels ---------- */

.grid{display:grid;gap:1px;margin-top:44px;background:var(--line-d-2)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.band.light .grid{background:var(--line-l)}

.panel{position:relative;background:var(--ink);padding:34px 30px 30px;transition:background .2s ease}
.band.alt .panel{background:var(--surface)}
.panel:hover{background:var(--surface-2)}
.band.light .panel{background:var(--paper)}
.band.light .panel:hover{background:var(--white)}
.panel h3,.panel h4{margin-bottom:.5em}
.panel p{font-size:14.5px;max-width:none;opacity:.82}

.cnr{position:absolute;top:16px;right:18px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.62}
.panel .cnr + h3,.panel .cnr + h4{padding-right:60px}

.st-now,.st-road{display:inline-block;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border:1px solid currentColor;border-radius:999px;opacity:.7}

.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;padding:0;list-style:none}
.tagrow li,.chip{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.08em;border:1px solid var(--line-d);border-radius:999px;padding:7px 16px}
.band.light .tagrow li,.band.light .chip{border-color:var(--line-l)}

/* Floating logo banner (marquee) — company (Collective Experience) + schools (Academic Foundations) */
.logomarquee{margin-top:100px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.logomarquee.edu{margin-top:80px}
.logotrack{display:flex;align-items:center;width:max-content;will-change:transform;animation:logoscroll 56s linear infinite}
.logomarquee.edu .logotrack{animation-duration:36s}
.logotrack img{height:44px;width:auto;margin-right:84px;flex:0 0 auto;opacity:1;user-select:none;-webkit-user-drag:none;filter:grayscale(1)}
.logomarquee.edu .logotrack img{height:80px;margin-right:92px}
.logomarquee:hover .logotrack{animation-play-state:paused}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){.logotrack img{height:34px;margin-right:60px}.logomarquee.edu .logotrack img{height:56px;margin-right:64px}}
@media (prefers-reduced-motion:reduce){
  .logotrack{animation:none;flex-wrap:wrap;justify-content:center;gap:44px 72px;width:auto}
  .logotrack img{margin-right:0}
  .logotrack img[aria-hidden="true"]{display:none}
}

/* Academic Foundations: fields marquee (scroll-velocity driven, charcoal gradient text) */
.fieldmarquee{position:relative;margin-top:80px;overflow:hidden;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.fieldtrack{display:flex;align-items:center;width:max-content;will-change:transform}
.fieldcopy{display:flex;align-items:center;flex:0 0 auto}
.fld{flex:0 0 auto;margin-right:72px;white-space:nowrap;
  font-family:var(--ff);font-weight:600;font-size:clamp(22px,2.8vw,36px);letter-spacing:-.01em;
  background:linear-gradient(155deg,#5b626c 0%,#2b2f35 50%,#0d0f12 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
@media (max-width:640px){.fld{margin-right:42px}}
@media (prefers-reduced-motion:reduce){
  .fieldtrack{transform:none!important;flex-wrap:wrap;justify-content:center;width:auto}
  .fieldcopy{flex-wrap:wrap;justify-content:center;gap:16px 40px}
  .fld{margin-right:0}
  .fieldcopy[aria-hidden="true"]{display:none}
}

/* Academic Foundations: static institution logos, three on top, two below */
.edurow{display:flex;flex-direction:column;align-items:center;gap:40px;margin-top:80px}
.edurow-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px 68px}
.edurow img{height:80px;width:auto;flex:0 0 auto;user-select:none;-webkit-user-drag:none;filter:grayscale(1)}
@media (max-width:640px){
  .logomarquee{margin-top:64px}
  .fieldmarquee{margin-top:56px}
  .edurow{gap:30px;margin-top:56px}
  .edurow-line{gap:28px 44px}
  .edurow img{height:56px}
}

/* ---------- signal trace ---------- */

.sig{display:block;width:100%;height:auto;overflow:visible}
.sig path{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.sig .dot{fill:currentColor;stroke:none}
.sig.draw path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.6s cubic-bezier(.4,0,.2,1) forwards}
.sig.draw .dot{opacity:0;animation:dotin .5s ease 1.35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dotin{to{opacity:1}}

.divider{display:flex;align-items:center;gap:16px;margin:0;padding:0;border:0}
.divider::before{content:"";flex:1;height:1px;background:var(--line-d)}
.band.light .divider::before{background:var(--line-l)}
.divider .seg{width:96px;height:1px;background:currentColor;opacity:.5;flex:none}
.divider .lbl{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;flex:none}

.readouts{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.68}
.figure{border:1px solid var(--line-d);padding:32px 28px 26px;position:relative}

/* ---------- pull quote ---------- */

.pull{font-size:clamp(22px,2.9vw,32px);line-height:1.24;letter-spacing:-.022em;font-weight:600;margin:40px 0;padding-left:26px;border-left:2px solid currentColor;max-width:26ch}
.pull.wide{max-width:36ch}
.pull.pull--belief{position:relative;max-width:none;border-left:0;padding-left:72px;font-size:clamp(18px,2vw,24px);text-wrap:balance}
.pull__quote{position:absolute;left:0;top:2px;width:48px;height:42px}
@media (max-width:600px){.pull.pull--belief{padding-left:48px}.pull__quote{width:32px;height:28px}}
.mission-copy > p{text-align:justify;text-align-last:left}
.band:has(> .mission-copy):has(+ .band > .mission-copy){padding-bottom:40px}
.band:has(> .mission-copy) + .band:has(> .mission-copy){padding-top:40px}
.mission-copy .ey--large{font-size:20px;font-weight:700;letter-spacing:.08em}
.mission-copy .ey--shiny{width:fit-content;color:#555b60;background-image:linear-gradient(120deg,#555b60 0%,#555b60 35%,#fff 50%,#555b60 65%,#555b60 100%);background-size:200% auto;background-position:150% center;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:mission-label-shine 8s linear infinite}
@keyframes mission-label-shine{from{background-position:150% center}to{background-position:-50% center}}
@media(prefers-reduced-motion:reduce){.mission-copy .ey--shiny{animation:none;background:none;-webkit-text-fill-color:#555b60}}
@media(forced-colors:active){.mission-copy .ey--shiny{animation:none;background:none;-webkit-text-fill-color:CanvasText}}
.belief-reveal{position:relative;margin:48px 0}
.belief-reveal__defs{position:absolute;pointer-events:none}
.belief-reveal__stage{position:relative;height:clamp(190px,20vw,240px)}
@media(min-width:761px){.belief-reveal__stage{height:150px}}
.belief-reveal__window{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#49381e}
.belief-reveal__painting{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.belief-reveal__window::after{content:"";position:absolute;inset:0;background:rgba(15,12,6,.35);pointer-events:none}
.belief-reveal__quote{position:relative;z-index:1;width:100%;max-width:none;margin:0;padding:32px;color:#fff;font-size:clamp(20px,2vw,24px);line-height:1.35;font-weight:600;letter-spacing:-.02em;text-align:center;text-wrap:balance;text-shadow:0 2px 15px rgba(0,0,0,.3)}
.belief-reveal-copy--pinned{position:sticky;top:var(--belief-pin-top)}
.mission-copy:has(> .belief-reveal){opacity:1;transform:none;transition:none}
.belief-reveal__scroll-space{pointer-events:none}
.belief-reveal__window{clip-path:url(#belief-aperture)}
@media(max-width:600px){.belief-reveal__quote{padding:24px}}
.band .pull{color:var(--on-dark)}
.band.light .pull{color:var(--on-light)}

/* ---------- flow ---------- */

.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:40px;background:var(--line-d-2)}
.flow div{background:var(--ink);padding:26px 22px}
.band.alt .flow div{background:var(--surface)}
.band.light .flow{background:var(--line-l)}
.band.light .flow div{background:var(--paper)}
.flow b{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;opacity:.68;font-weight:500}
.flow span{font-size:14px;line-height:1.55}
@media (max-width:860px){.flow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}

/* ---------- emotional agency questions ---------- */
.band.band--no-divider{border-bottom:0}
.question-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:24px;margin:38px 0}
.question-card{position:relative;display:flex;flex-direction:column;min-width:0;perspective:800px}
.question-card__label{display:block;text-align:center;font-size:inherit;line-height:inherit;margin-bottom:16px}
.question-card:hover{z-index:1}
.question-card__inner{position:relative;display:flex;flex:1;align-items:center;width:100%;min-height:300px;padding:36px;border-radius:15px;transform-style:preserve-3d;background:#11161a;box-shadow:0 16px 35px -20px rgba(0,0,0,.5)}
.question-card__inner::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.65)),url('../img/question-card-interior.webp') center/cover;transform:translateZ(0);pointer-events:none}
.question-card p{position:relative;margin:0;max-width:none;color:#fff;font-size:clamp(18px,1.7vw,22px);line-height:1.4;font-weight:700;letter-spacing:-.014em;transform:translateZ(30px);text-shadow:0 2px 8px rgba(0,0,0,.45)}
@media (max-width:760px){.question-cards{grid-template-columns:1fr;gap:16px}.question-card__inner{min-height:260px;padding:28px}}
.question-cards--compact{position:relative;grid-template-columns:repeat(2,minmax(0,calc(40% - 9.6px)));justify-content:space-between}
.question-cards__chevrons{position:absolute;left:50%;top:calc(50% + 20.6px);transform:translate(-50%,-50%);width:66px;height:32px;color:var(--on-light-2);pointer-events:none}
.question-cards--compact .question-card__inner{min-height:240px;padding:28.8px;border-radius:12px}
.question-cards--compact .question-card p{font-size:clamp(14.4px,1.36vw,17.6px)}
.question-cards--compact .question-card:last-child .question-card__inner::before{background-image:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.30)),url('../img/question-card-light.jpg')}
@media (max-width:760px){
  .question-cards--compact{grid-template-columns:1fr}
  .question-cards__chevrons{display:none}
  .question-cards--compact .question-card{width:80%}
  .question-cards--compact .question-card:last-child{justify-self:end}
  .question-cards--compact .question-card__inner{min-height:208px;padding:22.4px}
}

/* ---------- film poster ---------- */

.film{position:relative;aspect-ratio:16/9;border:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:36px;background:var(--black)}
.film .sigwrap{position:absolute;inset:0;display:flex;align-items:center;opacity:.35}
.film .play{position:relative;z-index:2;width:72px;height:72px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center}
.film .play::after{content:"";width:0;height:0;margin-left:5px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.film .tag{position:absolute;left:20px;bottom:18px;z-index:2;font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ---------- faq ---------- */

.faq{margin-top:40px;border-top:1px solid var(--line-d)}
.band.light .faq{border-color:var(--line-l)}
.faq details{border-bottom:1px solid var(--line-d)}
.band.light .faq details{border-color:var(--line-l)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-size:19px;font-weight:600;letter-spacing:-.014em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:22px;font-family:var(--ff-mono);font-size:20px;opacity:.5}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 26px}
.faq .a p{max-width:none;font-size:15px;opacity:.78;text-align:justify;text-align-last:left}
/* inline "fine" wordmark, sized to the surrounding text (inherits the text's tone/opacity) */
.fine-wm{display:inline-block;height:.86em;width:auto;vertical-align:-.05em}
/* FAQ: label centred on top, question list centred in a column */
.faq-block{max-width:880px;margin:0 auto}
.faq-head{text-align:center}
/* FAQ label sized to match the question titles below */
.faq-head .sec-label{font-size:19px;font-weight:600;letter-spacing:.02em;opacity:1;color:var(--on-light);margin:0;line-height:1.68}

/* ---------- timeline ---------- */

.tl{margin-top:40px;border-top:1px solid var(--line-d)}
.band.light .tl{border-color:var(--line-l)}
.tl .row{display:grid;grid-template-columns:140px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--line-d)}
.band.light .tl .row{border-color:var(--line-l)}
.tl .when{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.68;padding-top:5px}
.tl h3{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:.4em}
.tl p{font-size:14.5px;opacity:.8;max-width:none}
@media (max-width:680px){.tl .row{grid-template-columns:1fr;gap:8px}.tl .when{padding-top:0}}

.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:1px;background:var(--line-d-2);margin-top:38px}
.feature .poster{position:relative;background:var(--surface);min-height:300px;display:flex;align-items:center;padding:28px;overflow:hidden}
.feature .poster-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block;background:#0b0c0d}
.band.light .feature .poster .badge.over-video{
  color:#fff;border-color:rgba(255,255,255,.3);
  background:rgba(10,11,13,.5);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);
}
.feature .badge{position:absolute;left:24px;top:22px;z-index:2;font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line-d);padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.4)}
.feature .body{background:var(--ink);padding:38px 34px}
.band.alt .feature .body{background:var(--surface)}
.feature .body p{font-size:15px;opacity:.82}
@media (max-width:820px){.feature{grid-template-columns:1fr}.feature .poster{min-height:200px}}

/* ---------- about: layers ---------- */

.layergroup{border:1px solid var(--line-d);padding:28px;margin-top:20px}
.band.light .layergroup{border-color:var(--line-l)}
.layergroup > .lhead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line-d)}
.band.light .layergroup > .lhead{border-color:var(--line-l)}
.layergroup > .lhead b{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.layergroup > .lhead span{font-size:14.5px;opacity:.75}

.roles{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}

/* ===== Profile cards (Team System) — ProfileCard port, rainbow holo + portrait ===== */
.pcard{
  --card-radius:26px;
  --pointer-x:50%;--pointer-y:50%;
  --pointer-from-center:0;--pointer-from-top:.5;--pointer-from-left:.5;
  --card-opacity:0;
  --rotate-x:0deg;--rotate-y:0deg;
  --background-x:50%;--background-y:50%;
  /* rainbow sunpillar spectrum (original ProfileCard) */
  --sunpillar-1:hsl(2,100%,73%);--sunpillar-2:hsl(53,100%,69%);--sunpillar-3:hsl(93,100%,69%);
  --sunpillar-4:hsl(176,100%,76%);--sunpillar-5:hsl(228,100%,74%);--sunpillar-6:hsl(283,100%,73%);
  --inner-gradient:linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%);
  --behind-glow-color:rgba(125,190,255,.67);--behind-glow-size:50%;
  /* holo mask (breaks shine into sparkle) + grain — generated SVG noise, no external asset */
  --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 1.6 1.6 0 -2.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0.6 0.6 0 -0.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  position:relative;width:320px;max-width:100%;perspective:520px;transform:translate3d(0,0,.1px)}
.pc-behind{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:var(--card-radius);
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),var(--behind-glow-color) 0%,transparent var(--behind-glow-size));
  filter:blur(46px) saturate(1.05);opacity:0;transition:opacity .25s ease}
.pcard:hover .pc-behind{opacity:.8}

.pc-shell{position:relative;z-index:1}
.pc-card{aspect-ratio:.66;width:100%;display:grid;border-radius:var(--card-radius);position:relative;
  box-shadow:rgba(0,0,0,.62) calc((var(--pointer-from-left) * 10px) - 3px) calc((var(--pointer-from-top) * 20px) - 6px) 22px -6px;
  transition:transform 1s ease;transform:translateZ(0) rotateX(0deg) rotateY(0deg);
  background:rgba(0,0,0,.9);backface-visibility:hidden;overflow:hidden}
.pcard:hover .pc-card,.pcard.active .pc-card{transition:none;transform:translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x))}
.pcard.tilt-entering .pc-card{transition:transform .18s ease-out}
.pc-card *{display:grid;grid-area:1/-1;border-radius:var(--card-radius);pointer-events:none}
.pc-inside{inset:0;position:absolute;background-image:var(--inner-gradient);background-color:rgba(0,0,0,.9)}

/* rainbow holographic shine (faithful ProfileCard) */
.pc-shine{transition:filter .28s ease;filter:brightness(.66) contrast(1.2) saturate(.3) opacity(.4);
  animation:holo-bg 18s linear infinite;mix-blend-mode:color-dodge;
  -webkit-mask-image:var(--icon);mask-image:var(--icon);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:150%;mask-size:150%;
  -webkit-mask-position:top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
  mask-position:top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x))}
.pc-shine,.pc-shine::after{--space:5%;--angle:-45deg;transform:translate3d(0,0,1px);overflow:hidden;z-index:3;
  background-size:cover;background-position:center;
  background-image:
    repeating-linear-gradient(0deg,var(--sunpillar-1) calc(var(--space)*1),var(--sunpillar-2) calc(var(--space)*2),var(--sunpillar-3) calc(var(--space)*3),var(--sunpillar-4) calc(var(--space)*4),var(--sunpillar-5) calc(var(--space)*5),var(--sunpillar-6) calc(var(--space)*6),var(--sunpillar-1) calc(var(--space)*7)),
    repeating-linear-gradient(var(--angle),#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,0%,.1) 12%,hsla(0,0%,0%,.15) 20%,hsla(0,0%,0%,.25) 120%);
  background-position:0 var(--background-y),var(--background-x) var(--background-y),center;
  background-blend-mode:color,hard-light;background-size:500% 500%,300% 300%,200% 200%;background-repeat:repeat}
.pc-shine::before,.pc-shine::after{content:'';background-position:center;background-size:cover;grid-area:1/1;opacity:0;transition:opacity .28s ease}
.pcard:hover .pc-shine{filter:brightness(.72) contrast(1.15) saturate(.4);animation-play-state:paused}
.pcard:hover .pc-shine::before,.pcard:hover .pc-shine::after{opacity:.4}
.pc-shine::before{
  background-image:linear-gradient(45deg,var(--sunpillar-4),var(--sunpillar-5),var(--sunpillar-6),var(--sunpillar-1),var(--sunpillar-2),var(--sunpillar-3)),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),hsl(0,0%,70%) 0%,hsla(0,0%,30%,.2) 90%),
    var(--grain);
  background-size:250% 250%,100% 100%,220px 220px;
  background-position:var(--pointer-x) var(--pointer-y),center,calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);
  background-blend-mode:color-dodge;
  filter:brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2)) saturate(calc(.5 + var(--pointer-from-center)));
  mix-blend-mode:luminosity}
.pc-shine::after{background-position:0 var(--background-y),calc(var(--background-x)*.4) calc(var(--background-y)*.5),center;
  background-size:200% 300%,700% 700%,100% 100%;mix-blend-mode:difference;filter:brightness(.8) contrast(1.5)}
.pc-glare{transform:translate3d(0,0,1.1px);overflow:hidden;z-index:4;opacity:.5;
  background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsl(248,18%,54%) 12%,hsla(207,28%,20%,.8) 90%);
  mix-blend-mode:overlay;filter:brightness(.72) contrast(1.08)}
@keyframes holo-bg{0%{background-position:0 var(--background-y),0 0,center}100%{background-position:0 var(--background-y),90% 90%,center}}

/* avatar placeholder (swap in <img class="avatar" src=...> later) */
.pc-avatar-content{mix-blend-mode:luminosity;overflow:hidden;transform:translateZ(2px);backface-visibility:hidden}
.pc-avatar-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(58% 52% at 50% 44%,rgba(255,255,255,.05),rgba(255,255,255,0) 64%)}
.pc-avatar-ph svg{width:46%;max-width:158px;height:auto;fill:rgba(255,255,255,.16);transform:translateY(8%)}
.pc-avatar-content .avatar{width:100%;position:absolute;left:50%;bottom:-1px;transform-origin:50% 100%;
  transform:translateX(calc(-50% + (var(--pointer-from-left) - .5) * 6px)) translateZ(0) scaleY(calc(1 + (var(--pointer-from-top) - .5) * .02)) scaleX(calc(1 + (var(--pointer-from-left) - .5) * .01));
  backface-visibility:hidden;will-change:transform;transition:transform .12s ease-out}

/* bottom description panel (replaces handle / status / contact) */
.pc-user-info{position:absolute;--ui-inset:16px;left:var(--ui-inset);right:var(--ui-inset);bottom:var(--ui-inset);z-index:2;
  display:block;background:rgba(9,11,16,.56);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:calc(max(0px,var(--card-radius) - var(--ui-inset) + 6px));
  padding:13px 15px;text-align:center;pointer-events:none}
.pc-user-info .pc-desc{display:block;margin:0;color:rgba(255,255,255,.94);font-size:12.5px;line-height:1.5}

/* top role label */
.pc-content:not(.pc-avatar-content){max-height:100%;overflow:hidden;text-align:center;position:relative;z-index:5;mix-blend-mode:luminosity;
  transform:translate3d(calc(var(--pointer-from-left) * -6px + 3px),calc(var(--pointer-from-top) * -6px + 3px),.1px)}
.pc-details{width:100%;position:absolute;top:1.9em;display:flex;flex-direction:column;padding:0 20px}
.band.light .pcard .pc-details h3{font-weight:600;margin:0;font-size:20px;line-height:1.22;letter-spacing:-.01em;
  background-image:linear-gradient(to bottom,#fff,#c8cede);-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text}

@media (max-width:760px){.pcard{width:min(360px,100%)}}
@media (prefers-reduced-motion:reduce){.pc-shine{animation:none}}

/* ---------- letter ---------- */

.letter{max-width:720px;margin:40px auto 0}
@media(min-width:881px){
  .wrap.mission-copy,.wrap.team-letter-column{max-width:800px;padding-inline:0}
  .team-letter-column .letter{max-width:800px}
}
.letter p{font-size:16.5px;line-height:1.75;max-width:none;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.letter .signoff{margin-top:38px;font-size:18px;font-weight:600;line-height:1.5}
.letter .signoff b{display:block;font-weight:700;color:var(--on-light-3)}

/* ---------- culture rail ---------- */

.railgrid{display:grid;grid-template-columns:220px 1fr;gap:64px;margin-top:44px}
@media (max-width:940px){.railgrid{grid-template-columns:1fr;gap:0}}
.rail{position:sticky;top:calc(var(--nav-h) + 32px);align-self:start}
.rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-d)}
.band.light .rail ol{border-color:var(--line-l)}
.rail li a{display:block;padding:10px 0 10px 18px;margin-left:-1px;border-left:1.5px solid transparent;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.64}
.rail li a:hover{opacity:.9}
.rail li a.on{opacity:1;border-left-color:currentColor}
@media (max-width:940px){.rail{display:none}}

.chapter{margin-bottom:64px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.chapter > .chead{margin-bottom:30px}
.principle{padding:30px 0;border-top:1px solid var(--line-d);scroll-margin-top:calc(var(--nav-h) + 24px)}
.band.light .principle{border-color:var(--line-l)}
.principle h3{margin-bottom:.55em}
.principle p{opacity:.8}
.principle .pull{margin:26px 0 0;font-size:clamp(19px,2.2vw,25px)}
.principle .marker{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.64}
.principle .marker::before{content:"";width:16px;height:1px;background:currentColor;display:block}

.ethos{font-size:clamp(22px,3.2vw,36px);line-height:1.2;letter-spacing:-.024em;font-weight:700;margin:0 0 30px;max-width:24ch}

.signal-map{margin-top:36px;border-top:1px solid var(--line-d)}
.band.light .signal-map{border-color:var(--line-l)}
.signal-map .row{display:grid;grid-template-columns:36px 210px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line-d);align-items:baseline}
.band.light .signal-map .row{border-color:var(--line-l)}
.signal-map .n{font-family:var(--ff-mono);font-size:11px;opacity:.62}
.signal-map .what{font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.signal-map .means{font-size:14.5px;opacity:.75}
@media (max-width:900px){.signal-map .row{grid-template-columns:30px 1fr;gap:5px 16px}.signal-map .what,.signal-map .means{grid-column:2}}

/* ---------- cta + footer ---------- */

.cta{background:var(--black);color:var(--on-dark-2);padding:96px 0;border-top:1px solid var(--line-d-2)}
.cta h2{color:#fff;max-width:none;font-size:clamp(24px,3.1vw,39px)}
.cta .lead{color:var(--on-dark-2);max-width:none}

.foot{background:var(--black);color:var(--on-dark-3);padding:64px 0 32px;border-top:1px solid var(--line-d-2)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px;margin-top:40px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot .about .mark img{height:18px}
.foot .about p{font-size:14px;margin-top:20px;max-width:42ch;opacity:.84}
.foot h2{font-family:var(--ff-mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin:0 0 16px;color:var(--on-dark-4)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:11px}
.foot li a{font-size:14px;color:var(--on-dark-3)}
.foot li a:hover{color:#fff}
.foot li a.foot-product{display:inline-flex;align-items:center;gap:6px;color:#fff;opacity:.64;transition:opacity .2s ease}
.foot li a.foot-product:hover,.foot li a.foot-product:focus-visible{opacity:1}
.foot-product .fine-wm{height:14px;width:auto;filter:brightness(0) invert(1)}
.foot .base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:52px;padding-top:24px;border-top:1px solid var(--line-d-2);font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-4)}

/* ---------- orb field ---------- */

/* Shared white-canvas infinity section separator. */
.ecosystem-intro,.ecosystem-software,.ecosystem-hardware{--intro-separator-gap:clamp(64px,6vw,88px)}
.band.ecosystem-intro{padding-bottom:0;border-bottom:0;margin-bottom:-1px}
.ecosystem-intro .software-separator,.ecosystem-software .software-separator{margin-top:var(--intro-separator-gap)}
/* Account for the 1px overlap between the white sections. */
.band.ecosystem-software{padding-top:calc(var(--intro-separator-gap) + 1px)}
.band.ecosystem-hardware{padding-top:var(--intro-separator-gap)}
.software-separator{
  color:#363636;
  display:flex;justify-content:center;align-items:center;
  gap:clamp(20px,3.3vw,48px);width:calc(100% - 2 * clamp(24px,8vw,120px));
  max-width:1120px;margin:clamp(32px,3.4vw,48px) auto 0;
}
.software-separator__line{display:none}
.software-separator__art{width:clamp(44px,4.4vw,64px);opacity:1;height:auto;aspect-ratio:769/366;object-fit:contain;mix-blend-mode:multiply}
.scene[data-scene="software"] + .software-separator{transform:none}
.band.mission-vision,.band.band--infinity-divider{position:relative;border-bottom:0}
.mission-vision > .software-separator,.band--infinity-divider > .software-separator{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);margin:0;z-index:1}

.scene{position:relative}
.stage{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));min-height:680px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.stage-bg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);opacity:.25;pointer-events:none}
.stage-title{position:absolute;left:50%;top:clamp(20px,5vh,52px);transform:translateX(-50%);text-align:center;z-index:5;pointer-events:auto;max-width:min(760px,92vw);padding:0 24px}
.stage-title p{font-size:15px;line-height:1.5;margin:10px auto 0;max-width:none;opacity:.7}
.scene[data-scene="software"] .stage-title{width:min(900px,96vw);max-width:none}
.track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;will-change:transform;z-index:2}
.orbslot{flex:none;width:min(46vw,380px);display:flex;align-items:center;justify-content:center;position:relative;height:100%}

.orb{position:relative;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;width:var(--orb,130px);height:var(--orb,130px);border-radius:50%;border:1px solid var(--line-d);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.02) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:10px;text-align:center;transition:transform .45s cubic-bezier(.4,0,.2,1),border-color .3s ease,background .3s ease;animation:drift var(--dur,12s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.orb .olabel{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.35;max-width:88%;opacity:.7}
.orb .oglyph{width:26px;height:9px;overflow:visible}
.orb .oglyph path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;opacity:.6}
.orb:hover{border-color:rgba(255,255,255,.45)}
.orbslot.core .orb{--orb:170px}
.orbslot.focus .orb{transform:scale(1.5);border-color:#fff;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);animation-play-state:paused}
.orbslot.focus .orb .olabel{opacity:1}
@keyframes drift{0%,100%{transform:translate3d(0,var(--y0,-14px),0)}50%{transform:translate3d(0,var(--y1,16px),0)}}

.ocard{position:absolute;left:50%;transform:translateX(-50%) translateY(14px);top:auto;bottom:70px;width:min(86vw,350px);border:1px solid var(--line-d);background:rgba(12,13,14,.92);backdrop-filter:blur(8px);padding:22px 22px 20px;text-align:left;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease;z-index:6}
.orbslot.focus .ocard{opacity:1;transform:translateX(-50%);pointer-events:auto}
.ocard .pop{font-size:17px;font-weight:600;letter-spacing:-.012em;margin:0 0 9px;color:#fff}
.ocard .hook{font-size:15px;line-height:1.4;margin:0 0 11px;opacity:.9}
.ocard .thesis{font-size:13.5px;line-height:1.6;margin:0;max-width:none;opacity:.66}
.ocard .app{display:inline-block;margin-top:12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
/* software population cards — centred title, two columns, uniform height */
.scene[data-scene="software"] .ocard{width:min(94vw,1140px);padding:0;min-height:216px;bottom:54px}
/* the description now sits directly on the light band — no box, no fill, no border */
.band.light .scene[data-scene="software"] .ocard{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.scene[data-scene="software"] .ocard .pop{text-align:center;margin:0 0 2px;font-size:18px}
.scene[data-scene="software"] .ocard-split{display:grid;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);gap:32px;text-align:left;margin-top:0;position:relative}
.software-column-connector{display:flex;align-items:center;justify-content:center;padding-top:30px;pointer-events:none}
.software-column-connector svg{display:block;width:66px;height:26px;overflow:visible}
.band.light .scene[data-scene="software"] .ocard-sub{color:#806c52}
/* vertical rule between the two columns */
/* divider between the two body paragraphs — anchored to the right body so it starts at the first body row (not up in the titles) */
.scene[data-scene="software"] .ocard-col:last-child .ocard-body{position:relative}
.scene[data-scene="software"] .ocard-sub{font-family:var(--ff-mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:700;text-align:center;color:var(--ink)}
.scene[data-scene="software"] .ocard-body{font-size:15px;line-height:1.62;margin:0;opacity:.82;text-align:justify}
@media (max-width:700px){.scene[data-scene="software"] .ocard{min-height:0}.scene[data-scene="software"] .ocard-split{grid-template-columns:1fr;gap:16px}}
@media (max-width:700px){.software-column-connector{padding:0;height:66px}.software-column-connector svg{transform:rotate(90deg)}}
.scene.flat[data-scene="software"] .ocard-split{grid-template-columns:1fr;gap:16px}
.scene.flat .software-column-connector{padding:0;height:66px}
.scene.flat .software-column-connector svg{transform:rotate(90deg)}

/* Pinned mode: one card stays put in the stage and its text swaps as each orb
   reaches the centre. The in-track cards become hidden content sources. */
.scene:not(.flat) .track .ocard{display:none}
.stagecard{display:block;opacity:1;pointer-events:auto;transform:translateX(-50%);transition:opacity .2s ease}
.stagecard.is-swapping{opacity:0}
.scene.flat .stagecard{display:none}
/* Hardware: horizontal browsing with a full-photo reveal. */
.hardware-portfolio{--hardware-gap:40px;--hardware-inset:clamp(24px,4vw,72px);scroll-margin-top:90px}
.hardware-heading{max-width:1160px;padding:0 24px;margin:0 auto;text-align:center}
.hardware-heading p{max-width:none;font-size:15px;line-height:1.6;margin:18px auto 0;opacity:.7;text-wrap:balance}
@media(min-width:1024px){
  .hardware-intro-line{display:block;width:max-content;max-width:100%;margin-inline:auto}
}
.hardware-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:0}
.hardware-controls button{display:grid;place-items:center;width:52px;height:52px;border:1px solid #858585;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:26px;cursor:pointer;transition:background .2s,opacity .2s,transform .2s}
.hardware-controls button:hover:not(:disabled){background:#ededeb}
.hardware-controls button:active:not(:disabled){transform:scale(.95)}
.hardware-controls button:disabled{opacity:.3;cursor:default}
.hardware-category-heading{max-width:900px;margin:0 auto 24px;padding:0 24px;text-align:center}
.hardware-category-heading h3{font-size:clamp(25px,3vw,34px);line-height:1.2;letter-spacing:-.025em;margin:0}
.hardware-category-heading p{font-size:15px;line-height:1.65;color:#806c52;opacity:1;max-width:none;margin:12px 0 0;text-wrap:pretty}
.hardware-category-dots{display:flex;align-items:center;justify-content:center;gap:2px;margin:8px 0 0}
.hardware-category-dots button{width:32px;height:32px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.hardware-category-dots button::before{content:"";width:6px;height:6px;border:1px solid var(--line-l);border-radius:50%;background:transparent;transition:background .25s ease,transform .25s ease}
.hardware-category-dots button[aria-current="true"]::before{background:var(--on-light);border-color:var(--on-light);transform:scale(1.4)}
.hardware-category-dots button:focus-visible{outline:2px solid #333;outline-offset:0;border-radius:50%}
.hardware-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hardware-product[hidden]{display:none}
.hardware-track.is-single{justify-content:center}
.hardware-track.is-single .hardware-product{flex:0 1 600px;width:100%}
.hardware-track.is-single .hardware-visual{width:min(100%,360px);height:340px;aspect-ratio:auto;margin:auto}
.hardware-track{position:relative;display:flex;gap:var(--hardware-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hardware-inset);padding:16px var(--hardware-inset) 48px;scrollbar-width:none}
.hardware-track::-webkit-scrollbar{display:none}
.hardware-product{flex:0 0 clamp(400px,29vw,460px);min-width:0;scroll-snap-align:start}
.hardware-visual{position:relative;height:340px;aspect-ratio:auto}
.hardware-image-toggle{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hardware-image-toggle img{position:absolute;display:block;transition:opacity 1s ease-in-out,transform 1s ease-in-out;pointer-events:none}
.hardware-image-front{width:260px;height:260px;max-width:86%;max-height:86%;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:cover;border-radius:50%;opacity:1}
.hardware-image-full{inset:0;width:100%;height:100%;object-fit:contain;border-radius:28px;opacity:0;transform:scale(.97)}
.has-wear-photo .hardware-image-front{object-fit:contain;border-radius:0}
.has-wear-photo .hardware-image-full{inset:50% auto auto 50%;width:min(100%,300px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:0;transform:translate(-50%,-50%) scale(.97)}
.has-wear-photo .hardware-image-toggle[aria-pressed="true"] .hardware-image-full,.has-wear-photo .hardware-image-toggle:focus-visible .hardware-image-full{transform:translate(-50%,-50%) scale(1)}
.hardware-image-toggle[aria-pressed="true"] .hardware-image-front,.hardware-image-toggle:focus-visible .hardware-image-front{opacity:0}
.hardware-image-toggle[aria-pressed="true"] .hardware-image-full,.hardware-image-toggle:focus-visible .hardware-image-full{opacity:1;transform:scale(1)}
@media (hover:hover) and (pointer:fine){
  .hardware-visual:hover .hardware-image-front{opacity:0}
  .hardware-visual:hover .hardware-image-full{opacity:1;transform:scale(1)}
  .has-wear-photo .hardware-visual:hover .hardware-image-full{transform:translate(-50%,-50%) scale(1)}
}
.hardware-copy{text-align:center;padding:22px 4px 0}
.hardware-copy .pop{font-size:23px;line-height:1.2;margin:0 0 16px;letter-spacing:-.025em}
.band.light .hardware-copy .pop{color:#806c52}
.hardware-copy .hook{box-sizing:border-box;font-size:15px;line-height:1.65;width:min(100%,430px);margin:0 auto;padding:22px 24px;opacity:1;color:#6b6d70;text-align:justify;text-align-last:left;text-wrap:wrap;max-width:none;border:1px solid rgba(181,163,139,.22);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(235,231,223,.38));-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 24px rgba(72,63,49,.06)}
.hardware-controls button:focus-visible,.hardware-image-toggle:focus-visible,.hardware-track:focus-visible{outline:2px solid #333;outline-offset:5px;border-radius:20px}
@media(min-width:1100px){
  .hardware-track:not(.is-single){justify-content:space-around}
  .hardware-track:not(.is-single) .hardware-product{flex:0 1 460px;width:calc((100% - 2 * var(--hardware-gap))/3)}
}
@media(max-width:700px){
  .hardware-portfolio{--hardware-gap:24px}
  .hardware-product{flex-basis:82vw}
  .hardware-controls{padding-top:24px}
  .hardware-controls button{width:44px;height:44px}
  .hardware-image-front{width:236px;height:236px}
  .hardware-copy{padding-top:14px}
  .hardware-category-heading{margin-bottom:8px}
  .hardware-visual,.hardware-track.is-single .hardware-visual{height:300px}
}
@media(prefers-reduced-motion:reduce){.hardware-image-toggle img{transition:none}}
/* ---- Software population photo cards (replace the abstract orbs) ----
   The photo floats on its own; its lifted drift centre keeps it on one
   horizontal line while leaving room for the title + description below. */
.scene[data-scene="software"] .orbslot{flex-direction:column;justify-content:center;width:min(69vw,570px)}
.scene[data-scene="software"] .photo-float{display:flex;flex-direction:column;align-items:center;
  --y0:-58px;--y1:-34px;animation:drift var(--dur,12s) ease-in-out infinite;animation-delay:var(--delay,0s);will-change:transform}
.scene[data-scene="software"] .orb.photo-orb{width:min(233px,30.6vw,25.2vh);height:min(233px,30.6vw,25.2vh);border-radius:18px;border:0;padding:0;background:none;overflow:hidden;display:block;animation:none;
  box-shadow:0 22px 46px -22px rgba(0,0,0,.42), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.scene[data-scene="software"] .orb.photo-orb .orb-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;
  filter:grayscale(100%);transition:filter .45s ease}
/* Only the active centre photo is in colour; surrounding photos stay grayscale. */
.scene[data-scene="software"] .orbslot.focus .orb-photo{filter:grayscale(0%)}
/* the photo is drawn to the centre and grows there (magnetic pull, via the transition) */
.scene:not(.flat)[data-scene="software"] .orbslot.focus .orb.photo-orb{transform:scale(1.5)}
/* population name caps the description group — fixed above the body, swapping + fading with it (see .stagecard) */
.scene[data-scene="software"] .ocard-name{margin:0 0 20px;font-family:"Plus Jakarta Sans",var(--ff);font-weight:700;
  font-size:clamp(26px,2.6vw,32px);line-height:1.05;letter-spacing:-.01em;color:var(--on-light);text-align:center}
.scene[data-scene="software"] .ocard-name{position:relative;top:-10px}
/* short viewports (e.g. 1366×768 laptops): hold the photo to a size that still
   clears the title and the card — taller screens get the full size above. */
@media (max-height:800px){
  .scene[data-scene="software"] .orb.photo-orb{width:min(194px,25.2vw,20.7vh);height:min(194px,25.2vw,20.7vh)}
  .scene[data-scene="software"] .photo-float{--y0:-61px;--y1:-37px}
  /* less headroom on short screens, so the centred photo grows a little less */
  .scene:not(.flat)[data-scene="software"] .orbslot.focus .orb.photo-orb{transform:scale(1.33)}
}
/* flat / mobile: larger photos, no float (they sit in a horizontal scroll-snap row) */
.scene.flat[data-scene="software"] .photo-float{animation:none;gap:14px}
.scene.flat[data-scene="software"] .orb.photo-orb{width:min(66vw,300px);height:min(66vw,300px)}
.scene[data-scene="software"] .software-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;width:min(100%,660px);margin:20px auto 0;padding:0;gap:24px}
.scene[data-scene="software"] .software-controls button{flex:none;width:44px;height:44px}
.scene[data-scene="software"] .software-population-title{font-family:"Plus Jakarta Sans",var(--ff);font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;margin:0;text-align:center}
.scene[data-scene="software"] .stage-title .dots{position:static;transform:none;display:flex;justify-content:center;margin:14px 0 0;height:12px;align-items:center}
.scene[data-scene="software"] .ocard-name{display:none}
.scene[data-scene="software"] .photo-float{--y0:0px;--y1:16px}
.scene[data-scene="software"] .stagecard{min-height:0;bottom:28px}
@media (min-width:861px) and (max-height:800px){
  .scene[data-scene="software"] .stage-title{top:20px}
  .scene[data-scene="software"] .software-controls{margin-top:14px}
  .scene[data-scene="software"] .stage-title p{font-size:14px}
  .scene[data-scene="software"] .ocard-body{font-size:14px;line-height:1.5}
}
@media (max-width:700px){
  .scene[data-scene="software"] .software-controls{gap:12px}
  .scene[data-scene="software"] .software-population-title{font-size:21px;min-height:3.45em;display:grid;align-items:center}
}

.dots{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:4;display:flex;gap:10px}
.dots button{width:6px;height:6px;padding:0;border-radius:50%;border:1px solid var(--line-d);background:transparent;cursor:pointer;transition:background .25s ease,transform .25s ease}
.dots button.on{background:#fff;border-color:#fff;transform:scale(1.4)}

.anno{position:absolute;z-index:4;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.66;pointer-events:none}
.anno.a-tl{left:var(--pad);top:28px}
.anno.a-tr{right:var(--pad);top:28px}
.anno.a-bl{left:var(--pad);bottom:28px}
.anno.a-br{right:var(--pad);bottom:28px}

.scene-cap{padding:28px 0 0;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-align:center;opacity:.68}

.scene.flat{height:auto !important}
.scene.flat .stage{position:static;height:auto;min-height:0;overflow:visible;display:block;padding:8px 0 0}
.scene.flat .stage-bg,.scene.flat .dots,.scene.flat .anno{display:none}
.scene.flat .stage-title{position:static;transform:none;max-width:640px;margin:0 auto 32px}
.scene.flat .track{position:static;transform:none !important;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:6px 22px 24px}
.scene.flat .orbslot{width:min(78vw,300px);height:auto;scroll-snap-align:center;flex-direction:column;gap:20px;padding:8px 0}
.scene.flat .orb,.scene.flat .orbslot.core .orb{--orb:118px;animation:none}
.scene.flat .orbslot.focus .orb{transform:none}
.scene.flat .ocard{position:static;transform:none;opacity:1;pointer-events:auto;width:100%}

/* ---------- roles list ---------- */

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.roleslayout{display:grid;grid-template-columns:270px 1fr;gap:60px;margin-top:40px}
@media (max-width:900px){.roleslayout{grid-template-columns:1fr;gap:36px}}
.rolebar{position:sticky;top:calc(var(--nav-h) + 32px);align-self:start}
@media (max-width:900px){.rolebar{position:static}}
.rolebar h3{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin:0 0 16px;opacity:.72}
.rolebar .grp + .grp{margin-top:36px}

.field{position:relative;margin-bottom:14px}
.field input,.field select{width:100%;font:inherit;font-size:14.5px;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--line-d);border-radius:0;padding:11px 30px 11px 0;-webkit-appearance:none;appearance:none}
.band.light .field input,.band.light .field select{border-bottom-color:var(--line-l)}
.field input::placeholder{opacity:.4}
.field select{cursor:pointer;opacity:.75}
.field select option{background:var(--surface);color:#fff}
.band.light .field select option{background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-bottom-color:currentColor}
.field .ico{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none;opacity:.5}
.field .ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.clearf{display:none;margin-top:18px;padding:0 0 2px;background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:inherit;opacity:.85}
.clearf.on{display:inline-block}

.rolecount{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding-bottom:18px;border-bottom:1px solid var(--line-d);opacity:.68}
.band.light .rolecount{border-color:var(--line-l)}

.deptgroup{margin-top:36px}
.deptgroup:first-of-type{margin-top:28px}
.deptname{display:flex;align-items:baseline;gap:11px;font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0 0 6px;opacity:.75}

.rolerow{display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:center;padding:22px 4px 22px 0;border-bottom:1px solid var(--line-d);transition:padding-left .2s ease}
.band.light .rolerow{border-color:var(--line-l)}
.rolerow:first-of-type{border-top:1px solid var(--line-d)}
.band.light .rolerow:first-of-type{border-top-color:var(--line-l)}
.rolerow:hover{padding-left:9px}
.rolerow .rt{font-size:19px;font-weight:600;letter-spacing:-.014em}
.rolerow .rm{grid-column:1;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.68}
.rolerow .ra{grid-row:1 / span 2;grid-column:2;font-family:var(--ff-mono);font-size:16px;opacity:.6}
@media (max-width:520px){.rolerow{grid-template-columns:1fr}.rolerow .ra{display:none}}

.roleempty{border:1px solid var(--line-d);padding:38px 32px 34px;margin-top:28px;position:relative}
.band.light .roleempty{border-color:var(--line-l)}
.roleempty h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:.5em}
.roleempty p{font-size:15px;opacity:.78}

.band.light .cnr,.band.light .rolecount,.band.light .deptname,.band.light .rolerow .rm,.band.light .divider .lbl,.band.light .formnote,.band.light .ff label,.band.light .ff .hint,.band.light .scene-cap,.band.light .tl .when,.band.light .rolebar h3{opacity:.86}

/* Open roles: one contained search-and-results surface. */
.roles-form{
  padding:clamp(24px,4vw,52px);border:0;border-radius:0;
  background:linear-gradient(180deg,#FAFBFC 0%,#F5F6F7 100%);
  box-shadow:0 2px 4px rgba(13,15,17,.04),0 14px 30px -10px rgba(13,15,17,.15),0 36px 64px -24px rgba(13,15,17,.2);
}
.roles-form > h2{font-size:clamp(28px,3vw,38px);line-height:1.15;margin:0}
.roles-form .roleslayout{grid-template-columns:250px minmax(0,1fr);gap:48px;margin-top:36px}
.roles-form .rolebar{position:static;min-width:0}
.roles-form .rolebar h2{font-size:18px;line-height:1.3;letter-spacing:-.01em;margin:0 0 16px}
.roles-form .rolebar .grp + .grp{margin-top:28px}
.roles-form .field{margin-bottom:12px}
.roles-form .field input,.roles-form .field select{
  min-height:48px;padding:12px 42px 12px 16px;border:1px solid #D8DDE0;border-radius:10px;
  background:#fff;color:var(--on-light-2);font-size:15px;opacity:1;
}
.roles-form .field input::placeholder{color:#73797E;opacity:1}
.roles-form .field input:focus,.roles-form .field select:focus{border-color:#686F74;outline:2px solid rgba(104,111,116,.2);outline-offset:2px}
.roles-form .field .ico{right:16px;opacity:.7}
.roles-form .clearf{font-size:11px;letter-spacing:.08em}
.roles-form .roles-results{min-width:0}
.roles-form .rolecount{max-width:none;margin:0;padding:2px 0 18px;color:#687078;opacity:1}
.roles-form .roleempty{border:0;padding:32px 0 12px;margin:0}
.roles-form .roleempty .cnr{display:none}
.roles-form .roleempty h3{font-size:clamp(22px,2.1vw,28px);line-height:1.25;margin-bottom:12px}
.roles-form .roleempty p{max-width:54ch;margin:0;line-height:1.65}
@media(max-width:900px){
  .roles-form .roleslayout{grid-template-columns:1fr;gap:28px}
  .roles-form .rolebar{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .roles-form .rolebar .grp + .grp{margin-top:0}
}
@media(max-width:560px){
  .roles-form .roleslayout{margin-top:28px}
  .roles-form .rolebar{grid-template-columns:1fr;gap:24px}
  .roles-form .roleempty{padding-top:24px}
}

/* ---------- contact forms ---------- */

.segbar{
  display:inline-flex;gap:6px;padding:4px 0;flex-wrap:wrap;
  border:0;border-radius:999px;position:relative;overflow:visible
}
.segbar button{font:inherit;font-size:13.5px;font-weight:600;padding:11px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;background:transparent;color:inherit;opacity:.72;position:relative;z-index:1;transform-origin:center center;will-change:transform;transition:color .3s ease,opacity .2s ease}
.segbar button:hover{opacity:.95}
.segbar button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.segbar button::after{content:"";position:absolute;inset:0;border-radius:999px;background:#fff;opacity:0;transform:scale(.9);transition:opacity .35s ease,transform .35s ease;z-index:-1}
.segbar button[aria-selected="true"]{background:transparent;color:var(--ink);opacity:1;z-index:2}
.segbar button[aria-selected="true"]::after{opacity:1;transform:scale(1)}
.band.light .segbar button[aria-selected="true"]{background:transparent;color:#fff}
.band.light .segbar button::after{background:rgba(13,15,17,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 16px rgba(0,0,0,.16)}

@media (max-width:600px){
  .segbar{display:flex;width:100%;border-radius:var(--r);padding:5px}
  .segbar button{flex:1 1 100%;border-radius:var(--r);transform:none !important}
}

.formpanel{border:1px solid var(--line-d);padding:38px 34px 32px;margin-top:30px}
.band.light .formpanel{border-color:var(--line-l)}
@media (max-width:560px){.formpanel{padding:26px 20px 24px}}
.formpanel[hidden]{display:none}
.formintro{font-size:16.5px;line-height:1.65;max-width:64ch;margin:0 0 34px;opacity:.85}

.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.fgrid .full{grid-column:1 / -1}
@media (max-width:720px){.fgrid{grid-template-columns:1fr}}

.ff label,.ff .flabel{display:block;font-family:var(--ff-mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:9px;opacity:.72}
.ff input[type="text"],.ff input[type="email"],.ff input[type="url"],.ff input[type="date"],.ff select,.ff textarea{width:100%;font:inherit;font-size:14.5px;color:inherit;background:rgba(255,255,255,.03);border:1px solid var(--line-d);border-radius:var(--r);padding:12px 14px;transition:border-color .2s ease,background .2s ease}
.band.light .ff input,.band.light .ff select,.band.light .ff textarea{background:rgba(0,0,0,.02);border-color:var(--line-l)}
.ff textarea{min-height:116px;resize:vertical;line-height:1.6}
.ff select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 L8 10.5 L12.5 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
.ff select option{background:var(--surface);color:#fff}
.band.light .ff select option{background:#fff;color:var(--ink)}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:currentColor}
.ff ::placeholder{opacity:.35}
.ff .hint{font-size:12px;line-height:1.5;margin-top:8px;opacity:.66}
.ff input:disabled{cursor:not-allowed;opacity:.45}

.deadline-row{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:20px;align-items:center}
.deadline-none{align-items:center;white-space:nowrap}
.deadline-none input{margin-top:0}
.deadline-none label{margin:0}
@media (max-width:560px){.deadline-row{grid-template-columns:1fr;gap:14px}.deadline-none{white-space:normal}}

.radios{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding-top:2px}
.radios span{display:inline-flex;align-items:center;gap:9px}
.radios input{accent-color:#fff;width:16px;height:16px}
.band.light .radios input,.band.light .check input{accent-color:var(--ink)}
.radios label{margin:0;font-family:var(--ff);font-size:14.5px;letter-spacing:0;text-transform:none;opacity:.9;font-weight:400;display:inline}

.check{display:flex;gap:13px;align-items:flex-start}
.check input{accent-color:#fff;width:17px;height:17px;margin-top:2px;flex:none}
.check label{margin:0;font-family:var(--ff);font-size:14px;line-height:1.6;letter-spacing:0;text-transform:none;font-weight:400;opacity:.85}

.fielderr{display:none;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;color:var(--alert);margin-top:8px}
.invalid .fielderr{display:block}
.invalid input,.invalid select,.invalid textarea{border-color:var(--alert)}

.formfoot{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-top:34px;padding-top:28px;border-top:1px solid var(--line-d);text-align:center}
.band.light .formfoot{border-color:var(--line-l)}
.formnote{font-size:12.5px;max-width:46ch;margin:0;opacity:.68}
.formnote:empty{display:none}
.fsuccess{border:1px solid currentColor;padding:30px 26px;margin-top:28px}
.fsuccess h3{margin-bottom:.45em}
.fsuccess p{font-size:15px;opacity:.8}
.fsuccess[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .sig.draw path{stroke-dasharray:none;stroke-dashoffset:0}
  .sig.draw .dot{opacity:1}
}

/* ============================================================
   v3.1 — editorial section system
   Spacing on a 4px scale. Breakpoints: 768 / 1280 / 1440.
   ============================================================ */

:root{
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;
}

/* ---- Section: rail (number + label) beside a measured body ---- */

.sec{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:var(--s8);align-items:start}
.sec-rail{position:sticky;top:calc(var(--nav-h) + var(--s7));align-self:start}
.sec-num{
  display:block;font-size:clamp(64px,7vw,112px);line-height:.82;
  font-weight:700;letter-spacing:-.06em;font-variant-numeric:tabular-nums;
  color:currentColor;opacity:.13;margin-bottom:var(--s3);
}
.sec-label{
  display:block;font-family:var(--ff-mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;opacity:.72;
}
/* the numeral is gone, so the standalone rail label carries the marker */
.sec-rail .sec-label{
  font-family:var(--ff);font-size:clamp(19px,1.7vw,24px);font-weight:600;
  letter-spacing:-.01em;text-transform:none;opacity:1;line-height:1.2;
}
.sec-rail::after{content:"";display:block;width:40px;height:1px;background:currentColor;opacity:.28;margin-top:var(--s4)}
.sec-body{max-width:62ch}
.sec-body > h2{margin-bottom:var(--s5)}
.sec-body > p{font-size:16px}

@media (max-width:1279px){
  .sec{grid-template-columns:1fr;gap:var(--s5)}
  .sec-rail{position:static;display:flex;align-items:baseline;gap:var(--s4)}
  .sec-num{font-size:48px;margin-bottom:0;line-height:1}
  .sec-rail::after{display:none}
}

/* ---- Hero: scroll cue (graphic only) ---- */

.scrollcue{
  position:absolute;right:var(--pad);bottom:var(--s8);z-index:3;
  width:44px;height:64px;display:flex;align-items:flex-end;justify-content:center;
}
.scrollcue span{display:block;width:1px;height:56px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.scrollcue span::after{
  content:"";position:absolute;left:0;top:-56px;width:1px;height:56px;background:#fff;
  animation:cue 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cue{0%{transform:translateY(0)}60%,100%{transform:translateY(112px)}}
.scrollcue:hover span{background:rgba(255,255,255,.5)}
@media (max-width:767px){.scrollcue{display:none}}

/* ---- Panel: hairline draws in on hover, arrow on linked cards ---- */

.panel{padding:var(--s6) var(--s6) var(--s6)}
.panel::before{
  content:"";position:absolute;left:0;top:0;height:1px;width:0;
  background:currentColor;opacity:.85;transition:width .42s cubic-bezier(.4,0,.2,1);
}
.panel:hover::before,.panel:focus-within::before{width:100%}
.panel > h3,.panel > h4{margin-bottom:var(--s3)}

/* ---- Flow: a numbered sequence, not four loose boxes ---- */

.flow{counter-reset:step;margin-top:var(--s7)}
.flow div{position:relative;padding:var(--s6) var(--s5) var(--s5)}
.flow div::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:var(--s5);left:var(--s5);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;opacity:.5;
}
.flow b{margin-top:var(--s5)}

/* ---- Section head used above full-width components ---- */

.sechead{margin-bottom:var(--s7);max-width:62ch}
.sechead .sec-label{margin-bottom:var(--s4)}
.sechead h2{margin-bottom:var(--s4)}
.sechead .lead{margin-bottom:0}
.sechead-row{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s4)}
.sechead-row .sec-num{font-size:44px;margin-bottom:0;line-height:1;opacity:.32}

/* ---- Tap targets ---- */

.nav-links a{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:1000px){.nav-links a{min-height:48px}}
.faq summary{min-height:48px}
.tlink{min-height:44px;align-items:center}

/* ============================================================
   v3.2 — light-band variants for components authored dark-first
   Middle sections are now light; only the hero, CTA and footer
   stay dark. These keep the orb field and the feature card legible.
   ============================================================ */

/* ---- news feature card ---- */
.band.light .feature{background:var(--line-l)}
.band.light .feature .poster{background:var(--paper-2)}
.band.light .feature .body{background:var(--paper)}
.band.light .feature .badge{border-color:var(--line-l);background:rgba(255,255,255,.7)}

/* ---- orb field ---- */
.band.light .orb{
  border-color:var(--line-l);
  background:radial-gradient(circle at 32% 28%,rgba(0,0,0,.055) 0%,rgba(0,0,0,.028) 45%,rgba(0,0,0,.012) 100%);
}
.band.light .orb:hover{border-color:rgba(0,0,0,.4)}
.band.light .orbslot.focus .orb{
  border-color:var(--on-light);
  background:radial-gradient(circle at 32% 28%,rgba(0,0,0,.10) 0%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.02) 100%);
}
.band.light .ocard{
  border-color:var(--line-l);
  background:rgba(255,255,255,.94);
}
.band.light .ocard .pop{color:var(--on-light)}
.band.light .dots button{border-color:var(--line-l)}
.band.light .dots button.on{background:var(--on-light);border-color:var(--on-light)}

/* ---- film poster stays a black frame on a light band ---- */
.band.light .film{border-color:var(--line-l)}
.band.light .film .tag{color:rgba(255,255,255,.6)}

/* Muted text loses contrast far faster on a light band than on a dark one,
   so anything dimmed for the dark theme gets a higher floor here. */
.band.light .anno,
.band.light .stage-title p,
.band.light .orb .olabel,
.band.light .rail li a,
.band.light .principle .marker,
.band.light .principle p,
.band.light .segbar button,
.band.light .ff label,
.band.light .ff .flabel,
.band.light .ff .hint,
.band.light .check label,
.band.light .ocard .thesis,
.band.light .ocard .hook,
.band.light .formintro,
.band.light .panel p,
.band.light .flow span,
.band.light .tl p,
.band.light .faq .a p,
.band.light .signal-map .means,
.band.light .layergroup > .lhead span,
.band.light .st-now,
.band.light .st-road,
.band.light .roleempty p,
.band.light .fsuccess p,
.band.light .feature .body p,
.band.light .readouts,
.band.light .ocard .app{opacity:.88}
.band.light .rail li a.on{opacity:1}

/* ============================================================
   v3.3 — bare video hero + AI for Humanity statement (Mission)
   ============================================================ */

/* hero with no text: the video is the whole story */
.hero-bare{align-items:stretch}

/* oversized manifesto statement */
.statement{padding-top:var(--s10);padding-bottom:var(--s10)}
.st-line{
  font-size:clamp(48px,11.8vw,158px);
  line-height:.9;letter-spacing:-.045em;font-weight:700;
  margin:0;max-width:none;white-space:nowrap;
}
.st-lead{
  font-size:clamp(18px,2.4vw,27px);line-height:1.4;font-weight:400;
  max-width:none;margin:clamp(28px,4vw,48px) 0 0;
}
@media (max-width:520px){
  .st-line{white-space:normal;letter-spacing:-.035em}
}

/* Technology page — relocated intro paragraph, centered */
.intro-line{
  max-width:min(1160px,94vw);margin:0 auto;text-align:center;
  font-size:clamp(15px,1.5vw,20px);line-height:1.5;font-weight:400;
  max-inline-size:min(1160px,94vw);
}
/* on narrow screens the hard breaks would leave lopsided lines — let it wrap naturally */
@media (max-width:900px){.intro-line br{display:none}}

/* long hero headline forced onto one line (About Us) */
.hero h1.h1-fit{max-width:none;white-space:nowrap;font-size:clamp(24px,3.85vw,47px);line-height:1.06}
@media (max-width:640px){.hero h1.h1-fit{white-space:normal;font-size:clamp(30px,8vw,42px)}}

/* Contact — center the segmented toggle; let intro text fill the panel width */
.segbar-wrap{text-align:center;margin-bottom:var(--s3)}
.segbar-wrap .segbar{margin:0 auto}
.formintro{max-width:none}

/* align body paragraphs right edge with headings inside narrow columns */
.wrap.narrow p:not([class]){max-width:none}

/* ============================================================
   Careers — principle flip cards
   Front: title. Back (on hover/focus): the pull quote.
   Body paragraph sits to the right. All cards identical size.
   ============================================================ */

.principle.flipcard{
  display:grid;grid-template-columns:300px 1fr;gap:var(--s7);
  align-items:start;padding:var(--s7) 0;border-top:1px solid var(--line-l);
}
@media (max-width:760px){
  .principle.flipcard{grid-template-columns:1fr;gap:var(--s5)}
}

/* the card, fixed size for every principle */
.fc{perspective:1400px;height:230px;outline:none}
@media (max-width:760px){.fc{height:200px;max-width:420px}}

.fc-inner{
  position:relative;width:100%;height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;
}
.fc.has-quote{cursor:pointer}
.fc.has-quote:hover .fc-inner,
.fc.has-quote:focus-visible .fc-inner{transform:rotateY(180deg)}
.fc.has-quote:focus-visible{outline:2px solid var(--on-light);outline-offset:4px;border-radius:var(--r)}

.fc-face{
  position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s6);border-radius:14px;overflow:hidden;
  background:#3d3c3d;
  box-shadow:0 22px 45px -18px rgba(0,0,0,.6), 0 4px 12px -6px rgba(0,0,0,.45);
}
/* soft white glow blob, brightest at the top-left edge */
.fc-face::before{
  content:"";position:absolute;z-index:0;
  width:72%;height:66%;left:-30%;top:-38%;
  background:#fff;border-radius:50%;filter:blur(30px);opacity:.9;
}
/* inset inner panel (the darker card face) */
.fc-face::after{
  content:"";position:absolute;z-index:1;inset:2px;border-radius:12px;
  background:#323132;opacity:.92;
}
/* keep real content above the glow + panel */
.fc-face > *{position:relative;z-index:2}

.fc-front{background:#3d3c3d}
.flipcard .fc-front h3{
  margin:0;font-size:clamp(20px,2vw,26px);line-height:1.14;color:#fff;
}

.fc-hint{
  position:absolute;z-index:2;right:var(--s6);left:auto;bottom:var(--s4);text-align:right;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}

.fc-back{transform:rotateY(180deg);background:#fff;box-shadow:0 16px 36px -18px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.08)}
.fc-back::before,.fc-back::after{display:none}
.fc-back .fc-quote{
  margin:0;color:#333;font-weight:600;letter-spacing:-.012em;
  font-size:clamp(16px,1.7vw,21px);line-height:1.32;max-width:none;
}

.fc-body{padding-top:var(--s1)}
.fc-body p{font-size:16px;max-width:none;color:var(--on-light-2);text-align:justify;text-align-last:left}
.fc-body p + p{margin-top:1em}

/* keep static (no-quote) cards visually settled, title centered */
.fc:not(.has-quote) .fc-front{justify-content:center}

@media (prefers-reduced-motion:reduce){
  .fc-inner{transition:none}
}

/* ============================================================
   Hero scrims, reduced per image (v3.3)
   Each darkened only as much as white-text legibility requires.
   home/base is unchanged: its lit patches already sit at the AA
   floor, so any reduction would drop the lead text below 4.5:1.
   ============================================================ */

.hero-scrim.sc-mission{background:
  linear-gradient(to top,rgba(0,0,0,.39) 0%,rgba(0,0,0,.30) 24%,rgba(0,0,0,.14) 50%,rgba(0,0,0,0) 78%),
  linear-gradient(to right,rgba(0,0,0,.23) 0%,rgba(0,0,0,.05) 55%,rgba(0,0,0,0) 82%)}

.hero-scrim.sc-tech{background:
  linear-gradient(to top,rgba(0,0,0,.47) 0%,rgba(0,0,0,.42) 26%,rgba(0,0,0,.29) 54%,rgba(0,0,0,.09) 82%,rgba(0,0,0,0) 100%),
  linear-gradient(to right,rgba(0,0,0,.30) 0%,rgba(0,0,0,.08) 58%,rgba(0,0,0,0) 88%)}

.hero-scrim.sc-about{background:
  linear-gradient(to top,rgba(0,0,0,.42) 0%,rgba(0,0,0,.37) 26%,rgba(0,0,0,.26) 54%,rgba(0,0,0,.08) 82%,rgba(0,0,0,0) 100%),
  linear-gradient(to right,rgba(0,0,0,.27) 0%,rgba(0,0,0,.07) 58%,rgba(0,0,0,0) 88%)}

.hero-scrim.sc-careers{background:
  linear-gradient(to top,rgba(0,0,0,.49) 0%,rgba(0,0,0,.46) 30%,rgba(0,0,0,.37) 62%,rgba(0,0,0,.13) 88%,rgba(0,0,0,0) 100%),
  linear-gradient(to right,rgba(0,0,0,.42) 0%,rgba(0,0,0,.18) 50%,rgba(0,0,0,0) 90%)}

.hero-scrim.sc-contact{background:
  linear-gradient(to top,rgba(0,0,0,.47) 0%,rgba(0,0,0,.42) 26%,rgba(0,0,0,.29) 54%,rgba(0,0,0,.09) 82%,rgba(0,0,0,0) 100%),
  linear-gradient(to right,rgba(0,0,0,.30) 0%,rgba(0,0,0,.08) 58%,rgba(0,0,0,0) 88%)}

.hero-scrim.sc-news{background:
  linear-gradient(to top,rgba(0,0,0,.77) 0%,rgba(0,0,0,.69) 26%,rgba(0,0,0,.48) 54%,rgba(0,0,0,.15) 82%,rgba(0,0,0,0) 100%),
  linear-gradient(to right,rgba(0,0,0,.50) 0%,rgba(0,0,0,.13) 58%,rgba(0,0,0,0) 88%)}

/* ============================================================
   Careers — How We Work: horizontal chapter bar, centered column
   ============================================================ */

.railgrid.stacked{display:block;max-width:1040px;margin:var(--s6) auto 0}
.hww-ey{text-align:center}

/* Rail lifted out to .worktrack so it stays pinned across How We Work, Who We
   Hire and Open Roles. Full-width sticky bar; links stay centred within 1040px. */
.worktrack{position:relative}
.rail-h{
  position:sticky;top:var(--nav-h);z-index:10;background:var(--paper);
  padding:var(--s3) 0;margin-bottom:0;
  border-bottom:1px solid var(--line-l);
}
.rail-h ol{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--s2) var(--s6);border-left:0;margin:0 auto;list-style:none;
  max-width:1040px;padding:0 var(--pad);
}
.rail-h li a{
  display:inline-block;border-left:0;margin-left:0;
  padding:8px 2px;border-bottom:2px solid transparent;white-space:nowrap;
}
.rail-h li a.on{opacity:1;border-left-color:transparent;border-bottom-color:currentColor}
.chapters{margin:0 auto}

@media (max-width:640px){
  .rail-h ol{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
}

/* Mission statement, centered */
.statement .wrap{text-align:center}
.statement .st-lead{margin-left:auto;margin-right:auto}

/* About Us: reversed emphasis (title as headline, description as subhead) */
.rev-h{margin-bottom:var(--s2)}
.subhead{font-size:clamp(17px,2vw,21px);line-height:1.4;font-weight:400;color:var(--on-light-2);margin:0 0 var(--s5);max-width:62ch}

/* ============================================================
   v3.4 — breathing charcoal + glassmorphism
   ============================================================ */

:root{ --ink:#0D0F11; }               /* lift base off pure black */
body{ background:#0D0F11; }

/* --- breathing charcoal: CTA + footer as one continuous surface --- */
.cta, .foot{ position:relative; overflow:hidden; }
/* base gradients meet at the same tone (#0E1013) so there is no seam */
.cta{ background:linear-gradient(180deg,#16191C 0%,#121417 55%,#0E1013 100%); }
.foot{ background:linear-gradient(180deg,#0E1013 0%,#0C0D0F 100%); border-top:0; }
/* Rounded lower corners of the light page reveal the footer behind them. */
.foot{--footer-curve:48px;margin-top:calc(-1 * var(--footer-curve));padding-top:calc(64px + var(--footer-curve))}
.foot::after{content:"";position:absolute;inset:0 0 auto;height:var(--footer-curve);background:var(--paper);border-radius:0 0 var(--footer-curve) var(--footer-curve);z-index:2;pointer-events:none}
@media(max-width:640px){.foot{--footer-curve:28px}}
.cta > *, .foot > *{ position:relative; z-index:1; }
/* one soft, centered glow per block, faded well before the edges, so the
   shared boundary is pure base tone on both sides at every animation phase */
.cta::before, .foot::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(72% 92% at 32% 42%, rgba(86,94,104,.15) 0%, rgba(86,94,104,0) 68%);
  animation:breathe 20s ease-in-out infinite; will-change:transform,opacity;
}
@keyframes breathe{
  0%,100%{ transform:translate3d(-3%,-2%,0) scale(1.06); opacity:.68; }
  50%{ transform:translate3d(3%,2%,0) scale(1.20); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .cta::before, .foot::before{ animation:none; } }

/* --- glassmorphism: buttons & pills --- */

/* primary + ghost buttons (dark context: hero, CTA) */
.btn, .btn-ghost{
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
}
.btn{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.32);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.22), 0 8px 30px rgba(0,0,0,.34);
}
.btn:hover{ background:rgba(255,255,255,.26); color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.22);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }

/* light-band buttons: dark frosted glass */
.band.light .btn{
  background:rgba(13,15,17,.86); color:#fff; border-color:rgba(13,15,17,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 22px rgba(0,0,0,.16);
}
.band.light .btn:hover{ background:rgba(13,15,17,.72); color:#fff; }
.band.light .btn-ghost{
  background:rgba(13,15,17,.03); color:var(--ink); border-color:rgba(13,15,17,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.band.light .btn-ghost:hover{ background:rgba(13,15,17,.06); border-color:var(--ink); }

/* ---- Specular submit buttons (contact forms): WebGL rim-light overlay ----
   Driven by assets/specular-button.js. The canvas overlay sits above the
   button's own dark fill but below the label, and overscans by 20px (matching
   PAD in the script) so the rim glow can bleed just past the pill edge. The
   host .btn keeps all of its existing fill, border, shadow and padding. */
button.specular{ position:relative; overflow:visible; isolation:isolate; }
button.specular .specular-fx{ position:absolute; inset:-20px; pointer-events:none; z-index:0; }
button.specular .specular-fx canvas{ display:block; width:100%; height:100%; }
button.specular .specular-label{ position:relative; z-index:1; }

/* nav CTA pill */
.nav-cta,.hardware-controls button.portfolio-chevron{
  background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 18px rgba(0,0,0,.3);
}
.nav-cta:hover,.hardware-controls button.portfolio-chevron:hover:not(:disabled){ background:rgba(255,255,255,.22); color:#fff; }
/* Match the nav's dark backdrop on the white portfolio canvas. */
.hardware-controls button.portfolio-chevron{border-radius:999px;background:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)),#111314;transition:background .18s ease,color .18s ease,opacity .2s ease,transform .2s ease}
.hardware-controls button.portfolio-chevron:hover:not(:disabled){background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)),#111314}
.hardware-controls button.portfolio-chevron svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Three gentle glow pulses on the software arrow's first appearance. */
.software-controls .software-next.is-hinting{animation:software-next-glow 1.25s ease-in-out .25s 3}
@keyframes software-next-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 18px rgba(0,0,0,.3),0 0 0 0 rgba(181,163,139,0),0 0 0 0 rgba(181,163,139,0)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 18px rgba(0,0,0,.22),0 0 0 5px rgba(181,163,139,.2),0 0 26px 8px rgba(181,163,139,.55)}
}
@media(prefers-reduced-motion:reduce){.software-controls .software-next.is-hinting{animation:none}}

/* segmented toggle: no container — tabs sit directly on the band */

/* small pills: chips, tags, status, badges */
.chip, .tagrow li, .st-now, .st-road, .feature .badge, .rolecard .tag{
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  background:rgba(255,255,255,.05);
}
.band.light .chip, .band.light .tagrow li, .band.light .st-now, .band.light .st-road,
.band.light .feature .badge, .band.light .rolecard .tag{
  background:rgba(13,15,17,.035);
}

/* ============================================================
   3D tilt-on-hover card (Newsroom coverage / feature)
   ============================================================ */
.tilt{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  will-change:transform;
  position:relative;
}
.tilt:hover{ box-shadow:0 34px 70px -24px rgba(0,0,0,.35); z-index:2; }
/* cursor-following sheen for extra depth */
.tilt::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 62%);
}
.tilt:hover::after{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .tilt{ transition:box-shadow .2s ease; }
  .tilt::after{ display:none; }
}

/* About Us: body paragraphs fill the section width (not the 68ch cap) */
.abfull > p:not([class]){max-width:none}

/* Pill nav effect (ReactBits PillNav): a WHITE rounded container holding BLACK pills
   with white text; on hover a white circle fills the pill and the label flips to black.
   The current page stays in that filled (black-text) state. */
.nav-links{gap:3px;background:var(--white);border-radius:999px;padding:5px}
.nav-links a.pill{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;min-height:0;padding:0 16px;border:0;border-radius:999px;
  background:var(--ink);color:var(--white);font-size:13.5px;font-weight:600;line-height:1;transition:none;
}
.nav-links a.pill .hover-circle{
  position:absolute;left:50%;bottom:0;border-radius:50%;background:var(--white);
  z-index:1;pointer-events:none;will-change:transform;
  transform:translateX(-50%) scale(0);transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.nav-links a.pill:hover .hover-circle,
.nav-links a.pill[aria-current="page"] .hover-circle{transform:translateX(-50%) scale(1.2)}
.nav-links a.pill:hover .hover-circle{transition-duration:.35s}
.nav-links a.pill .label-stack{position:relative;z-index:2;display:block;overflow:hidden;line-height:1}
.nav-links a.pill .pill-label{display:block;transition:transform .32s cubic-bezier(.16,1,.3,1)}
.nav-links a.pill .pill-label-hover{position:absolute;left:0;top:0;color:var(--ink);transform:translateY(115%);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.nav-links a.pill:hover .pill-label,
.nav-links a.pill[aria-current="page"] .pill-label{transform:translateY(-115%)}
.nav-links a.pill:hover .pill-label-hover,
.nav-links a.pill[aria-current="page"] .pill-label-hover{transform:translateY(0)}

/* Initial load animation: logo scales in, nav items reveal left-to-right.
   Plays on first open of the site and on a manual reload. On internal tab-to-tab
   navigation the inline head script adds .nav-no-intro to <html>, which cancels it
   (see the suppression rule below). */
@keyframes navLogoIn{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes navItemsIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.nav .mark{animation:navLogoIn .55s cubic-bezier(.2,.75,.25,1) both}
@media (min-width:769px){.nav-links{animation:navItemsIn .6s cubic-bezier(.2,.75,.25,1) both}}
@media (prefers-reduced-motion:reduce){.nav .mark,.nav-links{animation:none}}
/* Suppress the intro when arriving via an in-site tab click (higher specificity
   than the rules above, so it wins regardless of the min-width media query). */
.nav-no-intro .nav .mark,
.nav-no-intro .nav-links{animation:none}

@media (max-width:768px){
  .nav-links{background:var(--nav);border-radius:0;padding:6px 22px 18px}
  .nav-links a.pill{height:auto;padding:13px 0;border-radius:0;overflow:visible;width:100%;justify-content:flex-start;font-size:15px;background:transparent;color:var(--on-dark-3);font-weight:500}
  .nav-links a.pill .hover-circle,.nav-links a.pill .pill-label-hover{display:none}
  .nav-links a.pill .label-stack{overflow:visible}
  .nav-links a.pill:hover .pill-label,
  .nav-links a.pill[aria-current="page"] .pill-label{transform:none}
  .nav-links a.pill[aria-current="page"]{color:var(--on-dark)}
}

/* Glare hover on the "Get in touch" nav button (ReactBits GlareHover):
   a white glare sweeps diagonally across on hover, repeating each time. */
.nav-cta,.hardware-controls button.portfolio-chevron{position:relative;overflow:hidden}
.nav-cta::after,.hardware-controls button.portfolio-chevron::after{
  content:"";position:absolute;top:-75%;left:0;width:45%;height:250%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg, hsla(0,0%,100%,0), rgba(255,255,255,.32), hsla(0,0%,100%,0));
  transform:translateX(-260%) rotate(-30deg);
}
.nav-cta:hover::after,.hardware-controls button.portfolio-chevron:hover:not(:disabled)::after{transform:translateX(320%) rotate(-30deg);transition:transform 1.15s ease}
@media (prefers-reduced-motion:reduce){.nav-cta::after,.hardware-controls button.portfolio-chevron::after{display:none}}

/* Footer liquid-ether background (WebGL fluid, behind the footer content) */
.foot .foot-ether{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.72}
.foot .foot-ether canvas{display:block;width:100%;height:100%}

/* ============================================================
   Masked heading (media-filled text) + About Us white CTA
   ============================================================ */
.masked-heading{position:relative;width:100%;margin:0;padding:0;text-wrap:balance;-webkit-font-smoothing:antialiased}
.masked-heading__measure{color:inherit}
.masked-heading.is-ready .masked-heading__measure{color:transparent}
.masked-heading__word{display:inline-block;white-space:pre}
.masked-heading__word:not(:last-child)::after{content:' '}
.masked-heading__baseline{display:inline-block;width:0;height:0}
.masked-heading__defs{position:absolute;width:0;height:0;overflow:hidden}
.masked-heading__reveal{position:absolute;inset:0;display:block;pointer-events:none;overflow:hidden;visibility:hidden}
.masked-heading.is-ready .masked-heading__reveal{visibility:visible}
.masked-heading__clip{position:absolute;inset:0;display:block}
.masked-heading__media{position:absolute;inset:0;display:block;will-change:transform,filter}
.masked-heading__source{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}

/* This CTA on white, centered, with the masked-media heading */
.cta.cta-masked{background:var(--paper);color:var(--on-light-2);border-top:0;text-align:center;padding:104px 0}
/* no divider line directly above the masked CTA (kills the preceding section's border) */
section:has(+ .cta.cta-masked){border-bottom:0}
.cta.cta-masked::before{content:none;display:none}
.cta-masked .wrap{max-width:900px;margin-left:auto;margin-right:auto}
/* The font's ink extends below its tight line box. Reserve media-mask coverage
   for ascenders and descenders, including after the web font changes the metrics. */
.cta-mh{font-family:"Plus Jakarta Sans","Google Sans","Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.06;text-align:center;margin:0 auto;padding-block:.12em .22em}
/* No overflow clip on the reveal: the hard rectangle edge was seaming during the
   rise. Instead the rise is kept short and the lead sits far enough below that the
   letters never overlap it. */
.cta-mh .masked-heading__reveal{overflow:visible}
.cta-career-break{display:none}
@media(min-width:641px){.cta-career-break{display:initial}}
.cta-masked .lead{color:var(--on-light-2);max-width:52ch;margin:50px auto 0}
.cta-masked .lead.lead-1line{max-width:none}
.cta-masked .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.cta-masked .btn{background:var(--ink);color:var(--white);border-color:var(--ink)}
.cta-masked .btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta-masked .btn-ghost{color:var(--ink);border-color:rgba(0,0,0,.24)}
.cta-masked .btn-ghost:hover{color:var(--ink);border-color:var(--ink);background:rgba(0,0,0,.05)}
@media (prefers-reduced-motion:reduce){.masked-heading__media{transform:scale(1.25) !important}}

/* ============================================================
   Split-flap board (Solari) — newsroom hero
   ============================================================ */

/* centred, vertically-middle layer inside a media hero */
.hero-flap-layer{position:absolute;inset:0 0 12% 0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 24px;pointer-events:none}
@media (max-width:640px){.hero-flap-layer{inset:0 0 24% 0}}

.split-flap-text{
  --split-flap-tile-color:#111827;
  --split-flap-text-color:#f8fafc;
  --split-flap-radius:8px;
  --split-flap-gap:6px;
  --split-flap-font-size:52px;
  --split-flap-flip-duration:.12s;
  display:inline-flex;align-items:center;gap:var(--split-flap-gap);
  color:var(--split-flap-text-color);
  font-family:'SFMono-Regular','Roboto Mono','Cascadia Code','Liberation Mono',Menlo,Consolas,monospace;
  font-size:var(--split-flap-font-size);
  font-weight:760;line-height:1;letter-spacing:.035em;white-space:pre;user-select:none;font-variant-numeric:tabular-nums
}
/* hero sizing: fluid so 12 tiles always fit */
.sf-hero{--split-flap-font-size:clamp(20px,8.6vw,138px);--split-flap-gap:clamp(3px,.8vw,16px);max-width:100%}

.split-flap-text__tile{
  position:relative;width:.78em;height:1.08em;overflow:hidden;border-radius:var(--split-flap-radius);
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.16),transparent 44%),
    linear-gradient(180deg,color-mix(in srgb,var(--split-flap-tile-color) 82%,white),var(--split-flap-tile-color));
  box-shadow:
    0 .035em .08em rgba(255,255,255,.08) inset,
    0 -.05em .1em rgba(0,0,0,.38) inset,
    0 .16em .38em rgba(0,0,0,.28);
  perspective:520px;transform-style:preserve-3d;isolation:isolate
}
.split-flap-text__tile::before{
  content:'';position:absolute;z-index:8;top:calc(50% - .5px);left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 18%,rgba(0,0,0,.64) 50%,rgba(255,255,255,.14) 82%,transparent);
  box-shadow:0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.5);pointer-events:none
}
.split-flap-text__tile::after{
  content:'';position:absolute;inset:0;z-index:9;border:1px solid rgba(255,255,255,.08);border-radius:inherit;
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;pointer-events:none
}
.split-flap-text__half,.split-flap-text__flap{
  position:absolute;left:0;width:100%;height:50%;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 34%),var(--split-flap-tile-color);
  backface-visibility:hidden
}
.split-flap-text__half--top,.split-flap-text__flap--front{top:0}
.split-flap-text__half--bottom,.split-flap-text__flap--back{
  bottom:0;
  background:linear-gradient(0deg,rgba(255,255,255,.06),transparent 38%),color-mix(in srgb,var(--split-flap-tile-color) 92%,black)
}
.split-flap-text__char{
  position:absolute;left:0;width:100%;height:200%;display:flex;align-items:center;justify-content:center;
  color:var(--split-flap-text-color);
  text-shadow:0 .025em 0 rgba(255,255,255,.16),0 .09em .16em rgba(0,0,0,.42)
}
.split-flap-text__half--top .split-flap-text__char,.split-flap-text__flap--front .split-flap-text__char{top:0}
.split-flap-text__half--bottom .split-flap-text__char,.split-flap-text__flap--back .split-flap-text__char{bottom:0}
.split-flap-text__flap{z-index:6;will-change:transform,filter;transform-style:preserve-3d}
.split-flap-text__flap--front{transform-origin:center bottom;animation:split-flap-front var(--split-flap-flip-duration) cubic-bezier(.23,1,.32,1) both}
.split-flap-text__flap--back{transform-origin:center top;transform:rotateX(90deg);animation:split-flap-back var(--split-flap-flip-duration) cubic-bezier(.23,1,.32,1) both}

@keyframes split-flap-front{
  0%{transform:rotateX(0deg);filter:brightness(1.08)}
  100%{transform:rotateX(-90deg);filter:brightness(.52)}
}
@keyframes split-flap-back{
  0%,45%{transform:rotateX(90deg);filter:brightness(.58)}
  100%{transform:rotateX(0deg);filter:brightness(1)}
}
@media (prefers-reduced-motion:reduce){.split-flap-text__flap{animation:none !important}}

/* ============ Chroma grid (Agent Crew) ============ */
.agentcrew-intro{margin-bottom:8px}
#agent-crew .rev-h{text-align:center}
#agent-crew .agentcrew-intro{text-align:center;max-width:64ch;margin-left:auto;margin-right:auto}
.agentdept{margin-top:52px}
.agentdept:first-of-type{margin-top:38px}
.dept-head{display:flex;flex-direction:column;gap:5px;margin:0 auto 22px;max-width:1080px;padding:0 4px}
.dept-head b{font-size:18px;letter-spacing:-.01em}
.band .dept-head b{color:var(--on-dark)}
.dept-head span{font-size:14px;color:var(--on-dark-3)}

.chroma-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,236px));justify-content:center;gap:16px;max-width:1080px;margin:0 auto;--x:50%;--y:50%;--r:480px}
@media (max-width:520px){.chroma-grid{grid-template-columns:minmax(200px,300px);--r:320px}}

.chroma-card{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:var(--card-gradient);transition:border-color .3s ease;--mouse-x:50%;--mouse-y:50%;--spotlight-color:rgba(255,255,255,.26)}
.chroma-card:hover{border-color:var(--card-border)}
.chroma-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s ease;background:radial-gradient(circle at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 62%)}
.chroma-card:hover::before{opacity:1}
.chroma-img-wrapper{position:relative;z-index:1;padding:8px}
.chroma-img-wrapper img{width:100%;aspect-ratio:.84;object-fit:cover;object-position:center top;border-radius:10px;display:block}
.chroma-info{position:relative;z-index:1;padding:2px 14px 16px;color:#fff}
.chroma-info .name{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:#fff}
.chroma-info .role{margin:3px 0 0;font-size:12.5px;font-weight:600;color:var(--card-border)}
.chroma-info .desc{margin:8px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.62)}

.chroma-overlay,.chroma-fade{position:absolute;inset:0;pointer-events:none;background:rgba(0,0,0,.001);
  backdrop-filter:grayscale(1) brightness(.82);-webkit-backdrop-filter:grayscale(1) brightness(.82)}
.chroma-overlay{z-index:3;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0%,transparent 14%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.5) 72%,#000 100%);
  mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0%,transparent 14%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.5) 72%,#000 100%)}
.chroma-fade{z-index:4;opacity:1;transition:opacity .5s ease;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#fff 0%,#fff 14%,rgba(255,255,255,.7) 42%,rgba(255,255,255,.4) 72%,transparent 100%);
  mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#fff 0%,#fff 14%,rgba(255,255,255,.7) 42%,rgba(255,255,255,.4) 72%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.chroma-overlay,.chroma-fade{display:none}}

/* ============================================================
   The Human-Agent System — 3D team showcase (pinned, scroll-stepped)
   ============================================================ */
.hteam{position:relative;background:var(--ink);color:#fff}
.hteam-intro{padding:var(--band-y) 0 0}
.hteam-intro .rev-h{color:#fff}
.hteam-intro>p{color:var(--on-dark-3);max-width:60ch;margin-top:18px}

.hteam-pin{position:relative;height:calc(var(--n,8) * 80vh)}
.hteam-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:var(--ink)}

/* Merged intro→crew timeline (progressive enhancement).
   In animated mode the stage shows on white for phase 1 (the scroll-expand
   intro); the expanding black box then becomes the black field the crew
   reveals onto. Static / no-JS falls back to the crew shown directly. */
.hteam-crew{position:absolute;inset:0}
.hteam.is-anim .hteam-stage{background:var(--white)}
.hteam.is-anim .hteam-crew{opacity:var(--crew,0);transform:translate3d(0,calc((1 - var(--crew,0)) * 16px),0);will-change:opacity,transform}
.hteam.is-anim:not(.crew-ready) .hteam-crew{pointer-events:none}
.hteam:not(.is-anim) .sxpand-frame,
.hteam:not(.is-anim) .sxpand-intro,
.hteam:not(.is-anim) .sxpand-titlewrap,
.hteam:not(.is-anim) .sxpand-hint{display:none}
.hteam:not(.is-anim) .hteam-stage{position:relative}
.hteam:not(.is-anim) .hteam-pin{height:auto}

/* per-character accent glow */
.hteam-glow{position:absolute;left:50%;top:50%;width:min(150vw,1500px);height:min(160vh,1450px);
  transform:translate(-50%,-50%);pointer-events:none;z-index:25;mix-blend-mode:screen;opacity:.42;filter:blur(34px);
  background:radial-gradient(circle at 50% 48%,var(--glow,#4f6bed) 0%,transparent 60%);
  transition:background 700ms cubic-bezier(.4,0,.2,1),opacity 700ms cubic-bezier(.4,0,.2,1)}

/* ghost layer word */
/* Centered layer title + subtext, with the crew label centered above.
   Anchored right under the nav; the 30px label->title gap comes from the label's
   own margin so the block sits high without pushing the title toward the character. */
.hteam-ghost{position:absolute;left:0;right:0;top:var(--nav-h);max-width:var(--container);margin-inline:auto;padding:0 var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;pointer-events:none;z-index:1;color:rgba(255,255,255,.6)}
.hteam-ghost #hteamGhost{font-family:"Plus Jakarta Sans",var(--ff);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(18.2px,2.52vw,30.8px);line-height:1.04;color:inherit;white-space:nowrap}
.hteam-ghost-sub{font-family:var(--ff);font-weight:500;font-size:14.5px;letter-spacing:.03em;line-height:1.3;color:inherit;white-space:nowrap;text-align:center}
/* Static "Meet our Human Crew" label above the changing ghost word — matches the
   "Meet our Agent Crew" (.agentcta-lead) treatment; full white over the faded ghost. */
.hteam-crewlabel{align-self:center;text-align:center;font-family:"Plus Jakarta Sans",var(--ff);font-weight:800;font-size:clamp(22px,3.1vw,38px);letter-spacing:-.01em;line-height:1;color:#fff;margin:0 0 20px;text-shadow:0 0 18px rgba(255,255,255,.55),0 0 42px rgba(255,255,255,.28)}

/* carousel */
.hteam-carousel{position:absolute;inset:0;z-index:2}
.hteam-fig{position:absolute;left:50%;bottom:0;height:64vh;aspect-ratio:545/966;margin:0;
  transform:translateX(-50%) scale(.62);opacity:0;pointer-events:none;z-index:3;
  -webkit-mask-image:radial-gradient(150% 108% at 50% 50%,#000 68%,transparent 95%);
          mask-image:radial-gradient(150% 108% at 50% 50%,#000 68%,transparent 95%);
  transition:transform 700ms cubic-bezier(.4,0,.2,1),opacity 700ms cubic-bezier(.4,0,.2,1),
             filter 700ms cubic-bezier(.4,0,.2,1),height 700ms cubic-bezier(.4,0,.2,1),
             left 700ms cubic-bezier(.4,0,.2,1),bottom 700ms cubic-bezier(.4,0,.2,1);
  will-change:transform,opacity,filter}
.hteam-fig img{width:100%;height:100%;object-fit:contain;object-position:center bottom;-webkit-user-drag:none;pointer-events:none;
  /* fade the baked contact-shadow at the base so the character grounds seamlessly into the dark stage
     (compounds with the figure's radial vignette above; feet stay crisp, the hard bottom edge dissolves) */
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 97%);
          mask-image:linear-gradient(to bottom,#000 84%,transparent 97%)}

.hteam-fig.is-center{opacity:1;z-index:20;height:92vh;left:50%;bottom:0;filter:none;transform:translateX(-50%) scale(var(--k,1))}
.hteam-fig.is-prev{opacity:.82;z-index:10;height:66vh;left:14%;bottom:8%;filter:blur(5px) brightness(1.55);transform:translateX(-50%) scale(1)}
.hteam-fig.is-next{opacity:.82;z-index:10;height:66vh;left:86%;bottom:8%;filter:blur(5px) brightness(1.55);transform:translateX(-50%) scale(1)}
.hteam-fig.is-far{opacity:0;z-index:1;transform:translateX(-50%) scale(.55)}

/* bottom-left copy panel */
.hteam-ui{position:absolute;inset:auto 0 0 0;z-index:30;pointer-events:none}
.hteam-panel{pointer-events:auto;padding:0 0 clamp(26px,6vh,64px);max-width:32rem}
.hteam-copy{min-height:9.5em}
.hteam-layer{font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-3);margin:0 0 12px}
.hteam-role{font-family:"Plus Jakarta Sans",var(--ff);font-weight:800;font-size:clamp(26px,3.6vw,44px);line-height:1.04;letter-spacing:-.01em;color:#fff;margin:0 0 14px;text-shadow:0 2px 22px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}
.hteam-desc{font-size:14.5px;line-height:1.66;color:var(--on-dark-2);margin:0;max-width:42ch;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hteam-desc-note{font-size:14.5px;line-height:1.66;color:var(--on-dark-2);font-style:italic;margin:10px 0 0;max-width:42ch;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hteam-desc-note:empty{display:none;margin:0}
.hteam-controls{display:flex;align-items:center;gap:14px;margin-top:26px}
.hteam-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.34);background:rgba(255,255,255,.04);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:transform .15s ease,background .2s ease,border-color .2s ease}
.hteam-btn:hover{transform:scale(1.07);background:rgba(255,255,255,.13);border-color:#fff}
.hteam-btn:disabled{opacity:.28;cursor:default;transform:none}
.hteam-btn svg{width:22px;height:22px}
.hteam-count{font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;color:var(--on-dark-3);margin-left:8px}
.hteam-count b{color:#fff;font-weight:600}

/* progress rail */
.hteam-rail{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:11px}
.hteam-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.24);border:0;padding:0;cursor:pointer;transition:background .25s,transform .25s}
.hteam-dot.on{background:#fff;transform:scale(1.4)}
.hteam-dot:hover{background:rgba(255,255,255,.6)}

/* scroll hint (first frame only) */
.hteam-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;font-family:var(--ff-mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-4);transition:opacity .5s ease}
.hteam-pin.scrolled .hteam-hint{opacity:0}

@media (max-width:860px){
  .hteam-fig.is-prev,.hteam-fig.is-next{opacity:0}
  .hteam-fig.is-center{height:78vh;bottom:0}
  .hteam-panel{max-width:none}
  .hteam-rail{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hteam-fig{transition:opacity .2s ease;filter:none !important}
  .hteam-fig.is-prev,.hteam-fig.is-next{filter:none !important}
  .hteam-glow{transition:none}
}

/* Agent Crew reveal CTA */
.agentcta{background:var(--ink);padding:clamp(52px,10vh,120px) 0;text-align:center}
.agentcta[hidden],#agent-crew[hidden]{display:none}
.agentcta-btn{display:inline-block;padding:0;border:0;background:transparent;cursor:pointer;position:relative;
  width:min(560px,88vw);aspect-ratio:16/9;border-radius:22px;overflow:hidden;line-height:0;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.agentcta-btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 34px 72px -26px rgba(0,0,0,.78), inset 0 0 0 1px rgba(255,255,255,.22)}
.agentcta-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.agentcta-vid{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.agentcta-tap{margin:clamp(14px,2.2vh,20px) 0 0;max-width:none;text-align:center;font-family:var(--ff);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media (max-width:640px){.agentcta-btn{border-radius:16px}}

/* "Meet our Agent Crew" label + animated glowing scroll-down chevrons */
.agentcta-lead{font-family:"Plus Jakarta Sans",var(--ff);font-weight:800;font-size:clamp(22px,3.1vw,38px);letter-spacing:-.01em;color:#fff;margin:0 0 clamp(14px,2.2vh,22px);text-shadow:0 0 26px rgba(255,255,255,.22)}
.scroll-cue{display:flex;flex-direction:column;align-items:center;margin:0 auto clamp(26px,5vh,52px)}
.scroll-cue svg{width:36px;height:21px;margin-top:-8px;opacity:0;filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(255,255,255,.4));animation:scrollCue 1.8s ease-in-out infinite}
.scroll-cue svg:first-child{margin-top:0}
.scroll-cue svg path{stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.scroll-cue svg:nth-child(1){animation-delay:0s}
.scroll-cue svg:nth-child(2){animation-delay:.2s}
.scroll-cue svg:nth-child(3){animation-delay:.4s}
@keyframes scrollCue{0%,100%{opacity:0}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-cue svg{animation:none;opacity:.85}}
/* upward cue for the Agent Crew collapse control (ripples bottom -> top) */
.scroll-cue--up{margin:0 auto}
.scroll-cue--up svg:nth-child(1){animation-delay:.4s}
.scroll-cue--up svg:nth-child(2){animation-delay:.2s}
.scroll-cue--up svg:nth-child(3){animation-delay:0s}
.agent-collapse{text-align:center;padding:clamp(28px,6vh,60px) 0 clamp(6px,2vh,18px)}
.agent-collapse-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 28px;border:0;background:transparent;cursor:pointer;border-radius:14px;transition:transform .15s ease}
/* "COLLAPSE" label under the up-chevrons — matches the "Tap the card to expand" size, in full white */
.agent-collapse-label{font-family:var(--ff);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.agent-collapse-btn:hover{transform:translateY(-2px)}
.agent-collapse-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
#agent-crew h2:focus{outline:none}

/* Human-Agent Integration — scroll-expand intro */
.sxpand{position:relative;width:100%}
.sxpand-track{position:relative;width:100%}
.sxpand-stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:var(--white)}
.sxpand-frame{position:absolute;inset:45% 6%;background:var(--ink);opacity:0;border-radius:14px;will-change:inset,opacity,border-radius;
  --glow-x:50%;--glow-y:50%;--glow-intensity:0;--glow-radius:480px;--frame-glow-op:0}
/* magic-bento glow — soft surface spotlight + bright border ring tracing the edge (cursor-tracked) */
.sxpand-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--frame-glow-op);
  background:radial-gradient(calc(var(--glow-radius) * .95) circle at var(--glow-x) var(--glow-y),
    rgba(255,255,255,calc(var(--glow-intensity) * 0.16)) 0%, rgba(255,255,255,0) 60%)}
.sxpand-frame::after{content:"";position:absolute;inset:0;padding:5px;border-radius:inherit;pointer-events:none;opacity:var(--frame-glow-op);
  background:
    radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),
      rgba(255,255,255,calc(var(--glow-intensity) * 1)) 0%,
      rgba(255,255,255,calc(var(--glow-intensity) * 0.6)) 38%,
      rgba(255,255,255,calc(var(--glow-intensity) * 0.2)) 58%, transparent 72%),
    rgba(255,255,255,.16);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.sxpand-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:opacity,transform}
.sxpand-intro .wrap{max-width:none;text-align:center}
.vidtext{position:relative;isolation:isolate;max-width:min(1040px,94vw);margin:0 auto}
.vidtext__vid{position:absolute;inset:2px 0;width:100%;height:calc(100% - 4px);object-fit:cover;z-index:0;pointer-events:none;filter:brightness(.95) saturate(1.08)}
.vidtext__knock{position:relative;z-index:1;margin:0;background:#fff;color:#000;mix-blend-mode:screen;
  font-family:"Plus Jakarta Sans",var(--ff);font-weight:800;font-size:clamp(18px,3vw,36px);line-height:1.28;letter-spacing:-.015em;text-align:center}
.sxpand-titlewrap{position:absolute;inset:0;color:#fff;mix-blend-mode:difference;opacity:0;pointer-events:none;will-change:opacity,transform}
.sxpand-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 5%;text-align:center;
  font-family:"Plus Jakarta Sans",var(--ff);font-weight:800;font-size:clamp(13px,3.46vw,50px);letter-spacing:-.03em;line-height:1.02;color:inherit;white-space:nowrap}
.sxpand-sub{position:absolute;left:50%;top:61%;transform:translateX(-50%);width:min(64ch,86%);margin:0;text-align:center;
  font-family:var(--ff);font-weight:400;font-size:clamp(14px,1.6vw,19px);line-height:1.55;color:inherit}
@media (max-width:640px){
  .sxpand-title{white-space:normal;padding:0 8%}
  .sxpand-sub{top:64%}
}
.sxpand-hint{position:absolute;left:0;right:0;bottom:26px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-family:var(--ff-mono);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:#000;pointer-events:none}
.sxpand-hint__chev{width:28px;height:26px;color:#000;animation:scrollChev 1.6s ease-in-out infinite}
@keyframes scrollChev{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.sxpand-hint__chev{animation:none}}
@media (max-width:640px){
  .vidtext{max-width:94vw}
  .vidtext__knock{font-size:clamp(13px,4vw,20px)}
}

/* ============================================================
   Agency reveal — a white masked-text statement pinned on top
   that dissolves on scroll to reveal "What We Build" BEHIND it
   (revealed in place, the page does not move down). Mirrors the
   landing stack. Static, accessible flow when not animated.
   ============================================================ */
.agencyrev{position:relative}
.agencyrev__stage{position:relative;background:var(--paper)}
/* default (no-JS / reduced-motion / small screens): simple stacked flow */
.agencyrev__intro{position:relative;display:flex;align-items:center;justify-content:center;min-height:72vh;background:var(--white);padding:10vh var(--pad)}
.agencyrev__intro .vidtext{max-width:min(1280px,94vw)}
/* A <video> is a replaced element: width/height:auto = its intrinsic (huge) size, which breaks the
   mask. Give it explicit size that fills the text box with a 1px inset on every edge, so it covers
   the glyphs, never overflows (no edge seam), and needs no overflow clip (descenders stay intact). */
.agencyrev__intro .vidtext__vid{left:1px;top:1px;right:auto;bottom:auto;width:calc(100% - 2px);height:calc(100% - 2px)}
/* extra line-height + a little bottom room so descenders (g, y) sit fully inside the video fill */
.agencyrev__knock{font-size:clamp(28px,5.4vw,72px);line-height:1.24;letter-spacing:-.022em;padding-bottom:.12em}
.agencyrev__hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#000;background:none;border:0;padding:6px 14px;cursor:pointer;pointer-events:auto;transition:opacity .2s ease}
.agencyrev__hint:hover{opacity:.62}
.agencyrev:not(.is-anim) .agencyrev__intro{flex-direction:column;gap:32px}
.agencyrev:not(.is-anim) .agencyrev__hint{position:static;transform:none;max-width:100%;text-align:center}
.agencyrev__hint svg{width:26px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;animation:scrollChev 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.agencyrev__hint svg{animation:none}}

/* animated: pinned sticky stage, layers stacked, statement dissolves to reveal What We Build behind */
.agencyrev.is-anim .agencyrev__stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
@supports (height:100dvh){.agencyrev.is-anim .agencyrev__stage{height:100dvh}}
.agencyrev.is-anim .agencyrev__intro{position:absolute;inset:0;z-index:2;min-height:0;padding:0 var(--pad);will-change:opacity,transform;pointer-events:none}
.agencyrev.is-anim .agencyrev__behind{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--pad);overflow:hidden}
.agencyrev.is-anim .agencyrev__behind .wrap{width:100%;max-width:var(--container);margin:0 auto}
@media (max-width:640px){.agencyrev__intro{min-height:64vh}.agencyrev__knock{font-size:clamp(22px,6.4vw,34px)}}

/* ============================================================
   What We Build — EmotionX ecosystem (software · hardware · infra)
   ============================================================ */
.band.light.agencyrev__behind,.band.light.wbsteps{border-bottom:0}
.ecosys{--glass-edge:rgba(255,255,255,.85);width:100%;max-width:min(760px,92vw);margin:0 auto;color:var(--ink)}
.flywheel{position:relative;width:100%;max-width:1100px;aspect-ratio:1;margin:0 auto;padding:0;display:grid;align-items:center;isolation:isolate}
.flywheel .ecosys{position:relative;width:70%;max-width:none;z-index:1}
.flywheel__track{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flywheel__chevrons{fill:none;stroke:#B5A38B;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flywheel__chevrons path{vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:50% 50%;opacity:0;animation:flywheelChevron 1.8s ease-in-out infinite}
.flywheel__chevrons path:nth-child(2){animation-delay:.2s}
.flywheel__chevrons path:nth-child(3){animation-delay:.4s}
.flywheel__chevrons path:nth-child(4){animation-delay:.6s}
.flywheel__chevrons path:nth-child(5){animation-delay:.8s}
@keyframes flywheelChevron{0%{opacity:0;transform:rotate(-.7deg)}50%{opacity:1}100%{opacity:0;transform:rotate(.7deg)}}
@media (prefers-reduced-motion:reduce){.flywheel__chevrons path{animation:none;opacity:.85}}
.flywheel__nodes{position:absolute;inset:0;z-index:2;pointer-events:none}
.flywheel__node{position:absolute;transform:translate(-50%,-50%);width:clamp(96px,10vw,132px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:radial-gradient(ellipse at 28% 12%,rgba(218,228,236,.24),transparent 58%),linear-gradient(145deg,rgba(88,99,110,.88),rgba(51,60,70,.94) 58%,rgba(68,79,89,.9));-webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%);border:1px solid rgba(255,255,255,.48);color:#f5f7fa;font-size:clamp(12px,1.2vw,16px);font-weight:600;letter-spacing:-.025em;text-decoration:none;pointer-events:auto;box-shadow:inset 0 2px 3px rgba(255,255,255,.32),inset 0 -4px 10px rgba(27,37,47,.22),inset 0 -1px 2px rgba(213,230,242,.2),0 12px 24px -10px rgba(52,68,84,.32),0 0 0 5px rgba(255,255,255,.32);transition:transform .25s,box-shadow .25s,color .25s}
.flywheel__node span{font-family:var(--ff-mono);font-size:9px;font-weight:400;letter-spacing:.16em;color:#d0dae3}
.flywheel__node:hover{transform:translate(-50%,-50%) scale(1.045);color:#fff;box-shadow:inset 0 2px 5px rgba(255,255,255,.45),inset 0 -4px 10px rgba(27,37,47,.16),inset 0 -1px 3px rgba(213,230,242,.3),0 16px 30px -10px rgba(52,68,84,.38),0 0 0 7px rgba(255,255,255,.5)}
.flywheel__node:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.flywheel__node:active{transform:translate(-50%,-50%) scale(.98)}
.flywheel__node--sense{left:50%;top:5%}
.flywheel__node--engage{left:92.8%;top:36.1%}
.flywheel__node--understand{left:76.5%;top:86.4%}
.flywheel__node--respond{left:23.5%;top:86.4%}
.flywheel__node--learn{left:7.2%;top:36.1%}
.wbstep[id]{scroll-margin-top:100px}
@media (max-width:760px){
  #whatbuild .wrap{overflow-x:auto;padding-block:12px;scrollbar-width:thin}
  .flywheel{min-width:760px}
  .flywheel .ecosys{width:70%}
  .flywheel__node{width:94px;font-size:10px;gap:4px}
  .flywheel__node span{font-size:9px}
}
/* A shared orbit keeps the cues between the bubbles; counter-rotation keeps labels upright. */
.flywheel__track,.flywheel__nodes{animation:flywheelOrbit 180s linear infinite;transform-origin:50% 50%}
.flywheel__node{animation:flywheelUpright 180s linear infinite;transition:box-shadow .25s,color .25s}
.flywheel:has(.flywheel__node:hover) :is(.flywheel__track,.flywheel__nodes,.flywheel__node),
.flywheel:focus-within :is(.flywheel__track,.flywheel__nodes,.flywheel__node){animation-play-state:paused}
@keyframes flywheelOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes flywheelUpright{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){
  .flywheel__track,.flywheel__nodes,.flywheel__node{animation:none}
  .flywheel__node{transition:none}
}

/* Fluid charcoal surfaces breathe independently of their upright labels and orbital motion. */
.flywheel__node{--bubble-delay:0s;--bubble-hue:260;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.6);text-transform:uppercase;font-size:clamp(10px,1.05vw,14px);isolation:isolate;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.flywheel__node:hover{box-shadow:none;color:#fff}
.flywheel__node::before,.flywheel__node::after{content:"";position:absolute;pointer-events:none}
.flywheel__node::before{inset:0;z-index:-1;border-radius:48% 52% 49% 51% / 52% 47% 53% 48%;border:1px solid rgba(229,239,246,.65);background:radial-gradient(ellipse at 27% 19%,rgba(255,255,255,.16),transparent 48%),linear-gradient(rgba(10,20,30,.28),rgba(10,20,30,.48)),var(--bubble-image) center/cover no-repeat;box-shadow:inset 2px 3px 8px rgba(247,252,255,.52),inset -4px -5px 12px rgba(184,204,218,.3),0 9px 24px -9px rgba(71,91,108,.3),0 0 14px rgba(157,186,207,.22);animation:bubbleBreathe 10s ease-in-out infinite,bubbleFloat 10s ease-in-out infinite;animation-delay:var(--bubble-delay)}
.flywheel__node::after{inset:-4px;z-index:-1;border-radius:49% 51% 52% 48%;padding:3px;background:conic-gradient(from 20deg,transparent 0%,rgba(255,255,255,.9) 17%,hsl(var(--bubble-hue) 55% 75% / .5) 29%,transparent 43%,hsl(var(--bubble-hue) 65% 90% / .8) 66%,transparent 81%,rgba(255,255,255,.9) 94%,transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:blur(1px);animation:bubbleSheen 18s linear infinite,bubbleFloat 10s ease-in-out infinite;animation-delay:var(--bubble-delay)}
.flywheel__node--sense{--bubble-image:url("../img/spheres/sense.jpg")}
.flywheel__node--engage{--bubble-image:url("../img/spheres/engage.jpg")}
.flywheel__node--understand{--bubble-image:url("../img/spheres/understand.jpg")}
.flywheel__node--respond{--bubble-image:url("../img/spheres/respond.jpg")}
.flywheel__node--learn{--bubble-image:url("../img/spheres/learn.jpg")}
.flywheel__node:nth-child(2){--bubble-delay:-2s;--bubble-hue:28}
.flywheel__node:nth-child(3){--bubble-delay:-4s;--bubble-hue:215}
.flywheel__node:nth-child(4){--bubble-delay:-6s;--bubble-hue:43}
.flywheel__node:nth-child(5){--bubble-delay:-8s;--bubble-hue:182}
.flywheel__node{font-size:clamp(11px,1.15vw,16px);font-weight:800;letter-spacing:-.04em;text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 7px rgba(0,0,0,.85)}
.flywheel__node span{color:inherit;font-size:1em;font-weight:800;letter-spacing:.02em}
@keyframes bubbleBreathe{
  0%,100%{transform:scale(.95,.98);border-radius:48% 52% 49% 51% / 52% 47% 53% 48%}
  35%{transform:scale(1.065,1.035);border-radius:53% 47% 52% 48% / 48% 54% 46% 52%}
  70%{transform:scale(.985,1.065);border-radius:46% 54% 48% 52% / 51% 46% 54% 49%}
}
@keyframes bubbleFloat{0%,100%{translate:0 3px}35%{translate:0 -7px}70%{translate:0 6px}}
@keyframes bubbleSheen{0%{transform:rotate(0deg) scale(.99);opacity:.55}50%{transform:rotate(180deg) scale(1.035);opacity:.9}100%{transform:rotate(360deg) scale(.99);opacity:.55}}
@media (prefers-reduced-motion:reduce){.flywheel__node::before,.flywheel__node::after{animation:none}}

/* the two glass orbs (smaller, spread wide) + centre EmotionX logo */
.ecosys__heading{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px;text-align:center}
.ecosys__heading .ecosys__logo{position:relative;left:auto;top:auto;transform:none;width:clamp(220px,27vw,320px);max-width:80%;height:auto;order:0}
.logo-shape-blur{--blur-x:50%;--blur-y:50%;--blur-strength:0;display:block;position:relative;isolation:isolate}
.logo-shape-blur img{display:block;width:100%;height:auto;pointer-events:none}
.logo-shape-blur__sharp{-webkit-mask-image:radial-gradient(circle 68px at var(--blur-x) var(--blur-y),rgba(0,0,0,calc(1 - var(--blur-strength))) 12%,#000 100%);mask-image:radial-gradient(circle 68px at var(--blur-x) var(--blur-y),rgba(0,0,0,calc(1 - var(--blur-strength))) 12%,#000 100%)}
.logo-shape-blur .logo-shape-blur__soft{position:absolute;inset:0;filter:blur(4px);opacity:var(--blur-strength);-webkit-mask-image:radial-gradient(circle 68px at var(--blur-x) var(--blur-y),#000 12%,transparent 100%);mask-image:radial-gradient(circle 68px at var(--blur-x) var(--blur-y),#000 12%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.logo-shape-blur__sharp{-webkit-mask-image:none;mask-image:none}.logo-shape-blur .logo-shape-blur__soft{display:none}}
.ecosys__heading .ecosys__sharedlabel{margin:0}
.ecosys__cycle{position:relative;aspect-ratio:1000/400;width:100%}
.ecosys__bridge{position:absolute;left:15%;top:8%;width:70%;height:84%;z-index:0;pointer-events:none}
.ecosys__shared{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:25%;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.ecosys__shared .ecosys__logo{position:static;transform:none;width:88%;height:auto}
.ecosys__sharedlabel{margin:0 0 12px;font-family:var(--ff-mono);font-size:clamp(8px,.72vw,9px);font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#616e78}
.ecosys__capabilities{width:100%}
.ecosys__sharedcards{position:relative;display:grid;grid-template-columns:1fr;gap:10px;width:94%;margin-inline:auto}
.ecosys__capability{position:relative;min-width:0}
.ecosys__capabilitybtn{position:relative;overflow:hidden;width:100%;min-height:56px;padding:8px 6px;border:1px solid rgba(255,255,255,.3);border-radius:20px;background:rgba(255,255,255,.4);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);box-shadow:0 8px 32px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 4px 2px rgba(255,255,255,.2);color:#34434f;font:500 clamp(11px,1vw,13px)/1.4 var(--ff);letter-spacing:-.015em;cursor:pointer;transition:background .2s,box-shadow .2s}
.ecosys__capabilitybtn::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);pointer-events:none}
.ecosys__capabilitybtn::after{content:"";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3));pointer-events:none}
.ecosys__capabilitybtn:hover,.ecosys__capabilitybtn[aria-expanded="true"]{background:rgba(255,255,255,.55);box-shadow:0 10px 32px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.15),inset 0 0 4px 2px rgba(255,255,255,.25)}
.ecosys__capabilitybtn:focus-visible{outline:2px solid #596e7f;outline-offset:3px}
.ecosys__description{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:260px;max-width:70vw;min-height:120px;display:grid;align-items:center;box-sizing:border-box;padding:18px;text-align:center;z-index:3;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(242,242,242,.48));border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.2),inset 0 0 5px 2px rgba(255,255,255,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:infrastructureReveal .18s ease-out}
.ecosys__description::before{content:"";position:absolute;inset:4px;border-radius:16px;border:1px solid rgba(255,255,255,.4);pointer-events:none}
.ecosys__description::after{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);pointer-events:none}
.ecosys__description[hidden]{display:none}
.ecosys__capability:first-child .ecosys__description{top:auto;bottom:calc(100% + 10px)}
.ecosys__description p{margin:0;font-size:13px;line-height:1.6;color:#465662}
@keyframes infrastructureReveal{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ecosys__description{animation:none}.ecosys__capabilitybtn{transition:none}}
.ecosys__orb{position:absolute;top:50%;transform:translateY(-50%);width:36%;aspect-ratio:1;border-radius:50%;z-index:1;
  display:grid;place-items:center;text-align:center;padding:20px 10px;box-sizing:border-box;
  background:radial-gradient(ellipse at 32% 22%,#fff 0%,#f8f8f8 38%,#e9e9e9 76%,#d6d6d6 100%);
  border:0;
  box-shadow:inset -8px -5px 22px rgba(95,95,95,.09)}
.ecosys__orb .ecosys__orbin{position:relative;z-index:1}
.ecosys__orb--soft{left:0}
.ecosys__orb--hard{right:0}
.ecosys__orb .ecosys__kicker,.ecosys__orb .ecosys__tag,.ecosys__orb .ecosys__list{color:#343434;text-shadow:none}
.ecosys__orb .ecosys__rule{background:rgba(64,64,64,.22)}
.ecosys__orb{animation:productSphereFloat 7s ease-in-out infinite}
.ecosys__orb--hard{animation-delay:-3.5s}
.ecosys__orb:hover,.ecosys__orb:focus-within{animation-play-state:paused}
@keyframes productSphereFloat{0%,100%{transform:translateY(calc(-50% + 3px))}50%{transform:translateY(calc(-50% - 3px))}}
@media (prefers-reduced-motion:reduce){.ecosys__orb{animation:none}}
.ecosys__orb[data-orb-popup]{cursor:help}
.ecosys__orb[data-orb-popup]:focus-visible{outline:2px solid #738898;outline-offset:5px}
.orb-popup{position:fixed;top:0;left:0;z-index:110;width:360px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:28px;border-radius:28px;isolation:isolate;border:1px solid rgba(255,255,255,.88);background:radial-gradient(ellipse at var(--glass-x,25%) var(--glass-y,10%),rgba(215,231,242,.12),transparent 55%),linear-gradient(rgba(9,16,22,.5),rgba(9,16,22,.7)),url("../img/product-interior.webp") center/cover no-repeat;-webkit-backdrop-filter:blur(28px) saturate(145%);backdrop-filter:blur(28px) saturate(145%);box-shadow:inset 0 2px 3px rgba(255,255,255,.95),inset 2px 0 8px rgba(255,255,255,.65),inset -2px -3px 8px rgba(148,177,194,.25),0 24px 55px -18px rgba(39,60,77,.3),0 4px 12px -5px rgba(72,94,111,.15);color:#f5f7fa;text-align:left}
.orb-popup::before{content:"";position:absolute;inset:5px;border-radius:23px;border:1px solid rgba(255,255,255,.55);pointer-events:none;z-index:-1}
.orb-popup::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from 145deg,rgba(141,182,197,.45),rgba(255,255,255,.9) 20%,rgba(220,201,176,.45) 37%,rgba(255,255,255,.95) 52%,rgba(170,185,212,.5) 76%,rgba(255,255,255,.85));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.orb-popup__wordmark{filter:brightness(0) invert(1);display:block;width:auto;height:36px;max-width:100%}
.orb-popup h3{margin:8px 0 6px;font-family:var(--ff);font-size:23px;line-height:1.15;letter-spacing:-.03em;color:#fff}
.orb-popup__tagline{margin:0;font-size:14px;line-height:1.5;color:#d8e2e9}
.orb-popup dl{margin:20px 0 0;padding-top:18px;border-top:1px solid rgba(141,164,181,.25)}
.orb-popup dt{font-size:13px;font-weight:600;line-height:1.5;color:#fff}
.orb-popup dd{margin:5px 0 16px;font-size:13px;line-height:1.6;color:#d8e2e9}
.orb-popup dd:last-child{margin-bottom:0}
.ecosys__orbin{width:100%;max-width:none}
.ecosys__kicker{display:block;font-family:var(--ff-mono);font-size:clamp(13px,1.4vw,18px);font-weight:600;line-height:1.4;letter-spacing:.15em;text-transform:uppercase;color:#64717a}
.ecosys__otitle{margin:clamp(6px,1.2vh,12px) 0 0;font-family:var(--ff);font-weight:700;letter-spacing:-.015em;line-height:1.06;font-size:clamp(15px,1.7vw,23px);color:var(--ink)}
.ecosys__fine{display:block;height:clamp(24px,2.7vw,40px);width:auto;margin:clamp(8px,1.5vh,14px) auto 0}   /* "fine" wordmark = Software's title, mirrors Hardware */
.ecosys__tag{margin:clamp(12px,1.5vw,20px) 0 0;font-family:var(--ff);font-weight:500;font-size:clamp(11.5px,1.25vw,16px);line-height:1.6;color:rgba(0,0,0,.66)}
.ecosys__otitle + .ecosys__tag,.ecosys__fine + .ecosys__tag{margin-top:clamp(4px,.9vh,8px)}
.ecosys__rule{display:block;width:clamp(28px,3.4vw,46px);height:1px;background:rgba(0,0,0,.16);margin:clamp(7px,1.3vh,13px) auto}
.ecosys__list{list-style:none;margin:0;padding:0;font-size:clamp(10px,1.05vw,13.5px);line-height:1.7;color:rgba(0,0,0,.62)}
.ecosys__list li{white-space:nowrap}

/* centre logo + the two cycle labels (arrows removed) */
.ecosys__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:clamp(140px,19vw,228px);height:auto}
.ecosys__looplabel{position:absolute;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;
  font-family:var(--ff);font-weight:500;font-size:clamp(12px,1.25vw,15px);color:rgba(0,0,0,.6)}
.ecosys__looplabel--top{top:0}
.ecosys__looplabel--bot{bottom:0}

/* intelligence infrastructure bar (smaller to match) */
.ecosys__infra{margin-top:clamp(14px,2.8vh,32px);border-radius:20px;padding:clamp(14px,2.4vh,22px) clamp(14px,1.5vw,22px);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.4));border:1px solid var(--glass-edge);
  box-shadow:0 22px 46px -30px rgba(70,84,110,.3),inset 0 2px 6px rgba(255,255,255,.85)}
.ecosys__infralabel{display:block;text-align:center;font-family:var(--ff-mono);font-size:clamp(9px,.9vw,11px);letter-spacing:.24em;text-transform:uppercase;color:rgba(0,0,0,.5);margin-bottom:clamp(10px,2vh,16px)}
.ecosys__infragrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.ecosys__infitem{display:flex;align-items:center;gap:clamp(9px,.9vw,12px);padding:0 clamp(10px,1.15vw,17px)}
.ecosys__infitem + .ecosys__infitem{border-left:1px solid rgba(0,0,0,.12)}
.ecosys__infico{flex:0 0 auto;width:clamp(34px,3.3vw,44px);height:clamp(34px,3.3vw,44px);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 32% 20%,#fff,rgba(236,240,244,.6));border:1px solid var(--glass-edge);
  box-shadow:0 10px 20px -14px rgba(70,84,110,.32),inset 0 2px 5px rgba(255,255,255,.9)}
.ecosys__infico svg{width:54%;height:54%}
.ecosys__inftext{min-width:0}
.ecosys__inftext h4{margin:0 0 3px;font-family:var(--ff);font-weight:700;font-size:clamp(13px,1.3vw,17px);line-height:1.15;color:var(--ink)}
.ecosys__inftext p{margin:0;font-size:clamp(11px,1.05vw,13.5px);line-height:1.5;color:rgba(0,0,0,.55)}

@media (max-width:760px){
  .ecosys__cycle{aspect-ratio:auto;max-width:360px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
  .ecosys__orb{position:static;transform:none;width:100%;padding:9%}
  .ecosys__orb--soft{order:1}
  .ecosys__logo{position:static;transform:none;order:2;width:min(180px,62%)}
  .ecosys__orb--hard{order:3}
  .ecosys__looplabel{display:none}
  .ecosys__infragrid{grid-template-columns:1fr}
  .ecosys__infitem{padding:0}
  .ecosys__infitem + .ecosys__infitem{border-left:none;border-top:1px solid rgba(0,0,0,.12);margin-top:14px;padding-top:14px}
}

/* ---- the five masked-number steps (01–05), following the ecosystem ---- */
@media (max-width:760px){
  .flywheel .ecosys__cycle{position:relative;display:block;max-width:none;aspect-ratio:1000/400}
  .flywheel .ecosys__orb{position:absolute;top:50%;transform:translateY(-50%);width:36%;padding:10px 8px}
  .flywheel .ecosys__shared{gap:18px;width:25%}
  .flywheel .ecosys__shared .ecosys__logo{position:static;transform:none;width:88%}
  .flywheel .ecosys__infragrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .flywheel .ecosys__infitem{padding:0 10px}
  .flywheel .ecosys__infitem + .ecosys__infitem{border-top:0;border-left:1px solid rgba(0,0,0,.12);margin-top:0;padding-top:0}
}
.wbsteps{border-bottom:0}
.wbsteps .wrap{max-width:1120px}
.wbstep{display:flex;align-items:center;gap:clamp(20px,4vw,72px);padding:clamp(26px,4.6vh,58px) 0}
.wbstep:nth-child(even){flex-direction:row-reverse}   /* 01 left, 02 right, alternating */
.wbstep__num{flex:1 1 0;min-width:0;text-align:center;
  font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;letter-spacing:-.04em;line-height:.86;
  font-size:clamp(112px,19vw,288px);
  background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wbstep__text{flex:1 1 0;min-width:0;max-width:500px}
.wbstep__title{margin:0 0 12px;font-family:var(--ff);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1;font-size:clamp(22px,2.4vw,34px);color:var(--ink)}
.wbstep__sub{margin:0 0 14px;font-family:var(--ff);font-weight:600;letter-spacing:-.01em;line-height:1.22;font-size:clamp(17px,1.7vw,22px);color:var(--ink)}
.wbstep__body{margin:0;max-width:none;font-size:15px;line-height:1.65;color:rgba(0,0,0,.56);text-align:justify;text-align-last:left}
@media (max-width:760px){
  .wbstep,.wbstep:nth-child(even){flex-direction:column;align-items:flex-start;gap:8px;padding:26px 0}
  .wbstep__num{flex:none;text-align:left;font-size:clamp(96px,30vw,172px);line-height:1}
  .wbstep__text{max-width:100%}
}

/* ============================================================
   Home hero — DriftWall (drifting 3D wall of emotion clips)
   ============================================================ */
.hero-wall{position:relative;height:calc(100vh - var(--nav-h));min-height:600px;overflow:hidden;background:var(--ink);display:flex;align-items:center;justify-content:center;isolation:isolate;--hero-fade:1}
@supports (height:100dvh){.hero-wall{height:calc(100dvh - var(--nav-h))}}
/* even, flat dark: the 50% comes uniformly from the per-tile dim; no radial vignette here */
.hero-wall__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:none}
.hero-wall__content{position:absolute;inset:0;z-index:2;pointer-events:none}
/* headline centred in the viewport — the <br> gives exactly two rows; nowrap keeps each
   row on one line, and the vw-scaled size keeps the longer row within the viewport */
.hero-wall__title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:96vw;white-space:nowrap;text-align:center;margin:0;color:#fff;font-weight:700;letter-spacing:-.03em;line-height:1.18;
  font-size:clamp(20px,3vw,46px);text-shadow:0 2px 34px rgba(0,0,0,.6),0 1px 10px rgba(0,0,0,.45)}
/* logo hangs a fixed 60px above the headline's top edge (anchored to the centred headline) */
.hero-wall__logo{position:absolute;left:50%;bottom:calc(100% + 60px);transform:translateX(-50%);width:clamp(240px,34vw,620px);height:auto;filter:drop-shadow(0 2px 22px rgba(0,0,0,.55));opacity:.98}
@media (max-width:640px){.hero-wall__logo{width:clamp(200px,58vw,340px);bottom:calc(100% + clamp(32px,9vw,60px))}.hero-wall__title{white-space:normal;font-size:clamp(17px,5vw,24px);letter-spacing:-.02em;max-width:92vw}.hero-wall{min-height:560px}}

/* ---- Landing: one pinned stage where the drift wall dissolves (fade + recede)
   to reveal the emotion sphere stacked beneath it, then releases to normal flow.
   Height is set by assets/landing-controller.js; both layers fill the sticky stage. */
.landing{position:relative;width:100%;margin-top:calc(-1 * var(--nav-h));min-height:100vh}
.landing-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:var(--ink)}
@supports (height:100dvh){.landing-stage{height:100dvh}}
.landing-stage .hero-wall,.landing-stage .belief,.landing-stage .emenu{position:absolute;inset:0;height:100%;min-height:0;transform-origin:center center;will-change:opacity,transform}
.landing-stage .emenu{z-index:1}
.landing-stage .belief{z-index:2}
.landing-stage .hero-wall{z-index:3}

/* the belief / manifesto beat between the drift wall and the sphere */
.belief{background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;opacity:0;--belief-scrim:.45}
/* grunge-interior photo behind the manifesto — fades in AFTER the question types (opacity driven by JS).
   --belief-scrim is the single knob: higher = darker photo / more legible text, lower = more room visible. */
.belief-bg{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;will-change:opacity;
  background-image:linear-gradient(rgba(6,7,8,var(--belief-scrim)),rgba(6,7,8,var(--belief-scrim))),url("../img/belief-room.jpg");
  background-size:cover;background-position:center center;background-repeat:no-repeat}
.belief-in{max-width:min(1180px,94vw);margin:0 auto;padding:0 var(--pad);text-align:center}
/* one uniform treatment for every paragraph — matches the hero headline */
.belief-in p{margin:0 auto;font-family:var(--ff);font-weight:700;letter-spacing:-.03em;line-height:1.2;font-size:clamp(13px,2vw,27px);color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.62),0 1px 6px rgba(0,0,0,.5)}
.belief-in p + p{margin-top:clamp(26px,4.4vh,52px)}
.belief-l2 + .belief-w{margin-top:52px}                 /* "We are capable…" → "Yet modern…" */
.belief-l2 + .belief-w + .belief-w{margin-top:52px}     /* "…Fear makes us hesitate." → "We disagree." */
.belief-w + .belief-w + .belief-w{margin-top:clamp(4px,1vh,10px)}   /* "We disagree." → "Emotion is not a defect…" — tight pair, no empty row */
.belief-w{max-width:none}   /* lift the global p{max-width:68ch} so "Yet modern…" fits two rows, not three */
.belief-in{position:relative;z-index:1;will-change:transform}
.belief-l2{transform-origin:center center;will-change:transform,opacity}
.bword{display:inline-block;will-change:opacity,filter}
/* typewriter cursor on the question */
.belief-type{white-space:pre-wrap}
.belief-cursor{display:inline-block;margin-left:.06em;font-weight:400;color:#fff;animation:beliefCaret 1.05s steps(1,end) infinite}
@keyframes beliefCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.belief-cursor.is-hidden{display:none}
/* shiny shimmer on "We are capable of being emotional." */
.shiny{display:inline-block;background-image:linear-gradient(120deg,#b7b7b7 0%,#b7b7b7 35%,#ffffff 50%,#b7b7b7 65%,#b7b7b7 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shinySweep 3.4s linear infinite}
@keyframes shinySweep{0%{background-position:150% center}100%{background-position:-50% center}}
@media (prefers-reduced-motion:reduce){.belief-cursor{animation:none}.shiny{animation:none;-webkit-text-fill-color:#e9e9ec;color:#e9e9ec}}

/* ---- DriftWall ---- */
.drift-wall{position:absolute;inset:0;z-index:0;overflow:hidden;perspective:var(--dw-perspective,1200px);perspective-origin:50% 50%;
  --dw-tile-w:230px;--dw-tile-h:150px;--dw-gap:16px;--dw-radius:14px;--dw-lift:60px;--dw-dim:.5;--dw-gray:0;--dw-overlay:#0B0C0D;--dw-edge:42%;
  /* even wall: thin symmetric edge feather only (no center-bright vignette) */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-composite:intersect}
.drift-wall__plane{position:absolute;top:50%;left:calc(50% + var(--dw-shift-x,0px));display:flex;flex-direction:row;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.drift-wall__col{position:relative;width:calc(var(--dw-tile-w) + var(--dw-gap));transform-style:preserve-3d}
.drift-wall__track{display:flex;flex-direction:column;will-change:transform;transform-style:preserve-3d}
.drift-wall__tile{position:relative;display:block;width:100%;height:calc(var(--dw-tile-h) + var(--dw-gap));flex:0 0 auto;outline:none;transform-style:preserve-3d}
.drift-wall__inner{position:absolute;inset:calc(var(--dw-gap) / 2);display:block;border-radius:var(--dw-radius);overflow:hidden;background:#0b0b12;opacity:var(--dw-dim);transform:translateZ(0);pointer-events:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}
.drift-wall__inner video,.drift-wall__inner img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(var(--dw-gray)) saturate(.92);transition:filter .22s cubic-bezier(.22,1,.36,1);user-select:none;-webkit-user-drag:none}
.drift-wall__overlay{position:absolute;inset:0;background:var(--dw-overlay);opacity:0;pointer-events:none;transition:opacity .22s cubic-bezier(.22,1,.36,1)}
.drift-wall__tile.is-active .drift-wall__inner{opacity:1;transform:translateZ(var(--dw-lift));box-shadow:0 24px 60px -18px rgba(0,0,0,.7)}
.drift-wall__tile.is-active video,.drift-wall__tile.is-active img{filter:grayscale(0) saturate(1.05)}
.drift-wall__tile.is-active .drift-wall__overlay{opacity:0}
@media (prefers-reduced-motion:reduce){.drift-wall__plane,.drift-wall__track{will-change:auto}}

/* ============================================================
   The Emotions — draggable WebGL sphere (InfiniteMenu)
   ============================================================ */
.emenu{position:relative;height:100vh;min-height:620px;background:var(--ink);overflow:hidden;display:block;isolation:isolate;--emotion:#4f6bed;--emenu-col:clamp(300px,24vw,380px)}
@supports (height:100dvh){.emenu{height:100dvh}}
/* faint colour wash that follows the active emotion */
.emenu::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(60% 55% at 50% 46%,color-mix(in srgb,var(--emotion) 22%,transparent) 0%,transparent 70%);
  transition:background .6s ease}
/* Bounded stage: the sphere lives between two reserved side columns (name left, fields
   right) so text never overlaps discs; edges feather so any clipped disc fades softly. */
.emenu-canvas{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - 2 * var(--emenu-col));height:100%;display:block;z-index:1;cursor:grab;touch-action:pan-y;outline:none;
  transition:width .5s cubic-bezier(.22,1,.36,1);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)}
/* while dragging: break out of the column into the full-width immersive globe */
.emenu.is-moving .emenu-canvas{width:100%}
@media (prefers-reduced-motion:reduce){.emenu-canvas{transition:none}}
.emenu-canvas:active{cursor:grabbing}

/* quiet section kicker */
.emenu-eyebrow{position:absolute;left:0;right:0;top:calc(var(--nav-h) + clamp(22px,5vh,54px));z-index:3;text-align:center;pointer-events:none;color:var(--on-dark-3)}

/* CTA — circular arrow button that pops in when the sphere settles (from the reference),
   tinted to the active emotion; links stay inert until wired. */
.emenu-cta{position:absolute;left:50%;bottom:clamp(60px,12vh,120px);z-index:3;
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:var(--emotion);color:#fff;text-decoration:none;
  border:5px solid var(--ink);box-shadow:0 14px 34px -12px rgba(0,0,0,.75);
  transform:translateX(-50%) scale(1);opacity:1;pointer-events:auto;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s ease,background .5s ease}
.emenu-cta__icon{position:relative;top:1px;font-size:26px;line-height:1}
.emenu-cta:hover{transform:translateX(-50%) scale(1.09)}
.emenu.is-moving .emenu-cta{opacity:0;transform:translateX(-50%) translateY(46px) scale(0);pointer-events:none;
  transition:transform .25s ease,opacity .2s ease}

/* focused-photo name, in the left column (auto-shrunk by JS so long words never overflow it) */
.emenu-name{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:3;pointer-events:none;
  width:var(--emenu-col);box-sizing:border-box;padding:0 14px 0 clamp(24px,3vw,56px);white-space:nowrap;
  font-family:var(--ff);font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.55);transition:opacity .3s ease}
.emenu.is-moving .emenu-name{opacity:0;transition:none}   /* vanish instantly on drag/click, no fade-out */
/* the four fields for the focused emotion, in the right column (full text, capped + bottom fade) */
.emenu-fields{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:3;pointer-events:none;
  width:var(--emenu-col);box-sizing:border-box;padding:0 clamp(24px,3vw,56px) 0 26px;
  max-height:74vh;overflow:hidden;display:flex;flex-direction:column;gap:clamp(20px,3.4vh,38px);text-align:left;
  transition:opacity .3s ease}
/* dossier rail — a hairline linking the four numbered fields down the left */
.emenu-fields::before{content:"";position:absolute;left:4px;top:7px;bottom:7px;width:1px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--emotion,#878E97) 60%,transparent) 7%,color-mix(in srgb,var(--emotion,#878E97) 60%,transparent) 93%,transparent)}
.emenu.is-moving .emenu-fields{opacity:0;transition:none}   /* vanish instantly on drag, like the name */
.emenu-fields.is-capped{-webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
.emenu-field{position:relative}
/* node dot centred on the rail (rail centre x = 4.5px), aligned with each field header */
.emenu-field::before{content:"";position:absolute;left:-25px;top:7px;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:var(--emotion,#878E97);box-shadow:0 0 0 2px color-mix(in srgb,var(--emotion,#878E97) 20%,transparent)}
.emenu-field__head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.emenu-field__ico{flex:0 0 auto;width:22px;height:22px;object-fit:contain;opacity:.9}
.emenu-field__label{margin:0;font-family:var(--ff-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.emenu-field__val{display:block;font-family:var(--ff);font-size:clamp(12px,.95vw,14px);line-height:1.5;color:rgba(255,255,255,.86);text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* narrow: no room for side columns — stack name (top) / sphere (middle) / fields (bottom) */
@media (max-width:1160px){
  .emenu{--emenu-col:0px}
  .emenu-canvas{left:0;transform:none;width:100%;top:calc(var(--nav-h) + 12vh);height:calc(50vh - var(--nav-h));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .emenu-eyebrow{display:none}
  .emenu-name{left:0;right:0;top:calc(var(--nav-h) + 4.5vh);transform:none;width:auto;padding:0 20px;white-space:normal;text-align:center}
  .emenu-fields{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:37vh;padding:14px clamp(18px,5vw,48px) 20px;gap:16px}
  .emenu-fields::before,.emenu-field::before{display:none}   /* rail/nodes are a desktop-column flourish */
  .emenu-cta,.emenu-hint{display:none}
}
.emenu-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;pointer-events:none;
  font-family:var(--ff-mono);font-size:18px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-4);
  transition:opacity .4s ease}
.emenu.is-moving .emenu-hint{opacity:0}
/* glow the hint while the section holds for the user to interact */
.emenu.gate-prompt .emenu-hint{color:#fff;animation:hintGlow 1.5s ease-in-out infinite}
@keyframes hintGlow{0%,100%{opacity:.5;text-shadow:none}50%{opacity:1;text-shadow:0 0 16px rgba(255,255,255,.8),0 0 32px rgba(255,255,255,.35)}}
@media (prefers-reduced-motion:reduce){.emenu.gate-prompt .emenu-hint{animation:none;opacity:1;color:#fff}}

/* no WebGL → hide canvas chrome, show the accessible list as real content */
.emenu--nowebgl .emenu-canvas,.emenu--nowebgl .emenu-eyebrow,.emenu--nowebgl .emenu-cta,.emenu--nowebgl .emenu-hint,.emenu--nowebgl .emenu-name,.emenu--nowebgl .emenu-fields{display:none}
.emenu--nowebgl .sr{position:static;width:auto;height:auto;clip:auto;margin:0 auto;max-width:var(--container);padding:calc(var(--nav-h) + 8vh) var(--pad) 8vh;color:var(--on-dark-2)}
.emenu--nowebgl .sr h2{color:#fff}

/* Expanded product overview with the five steps anchored in a bottom row. */
#whatbuild > .wrap{max-width:1520px}
.agencyrev.is-anim .agencyrev__behind #whatbuild{width:100%}
.agencyrev.is-anim #whatbuild > .wrap{max-width:1520px}
.flywheel.flywheel--stacked{min-width:0;max-width:1440px;aspect-ratio:auto;gap:clamp(32px,5vh,64px);grid-template-columns:minmax(0,1fr)}
.flywheel--stacked .ecosys{order:1;width:100%;max-width:min(1440px,calc((100vh - 300px) * 2.5))}
.flywheel--stacked .ecosys__overview-logo{position:absolute;z-index:3;left:50%;top:0;transform:translate(-50%,-20%);width:clamp(280px,28vw,400px);height:auto;max-width:36%;pointer-events:none}
/* Center the visible content, excluding the 150px reserved for hover panels. */
@media(min-width:761px){
  #whatbuild{padding-top:calc(var(--band-y) + 75px);padding-bottom:calc(var(--band-y) - 75px)}
  .agencyrev.is-anim #whatbuild{padding-top:calc(150px + var(--nav-h));padding-bottom:0}
}
.flywheel--stacked .flywheel__nodes{order:2;position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(4px,1vw,16px);width:100%;padding:12px 16px 162px;animation:none;transform:none;pointer-events:auto}
.flywheel--stacked .flywheel__connector{display:flex;flex:1 1 66px;min-width:28px;align-items:center;justify-content:center;pointer-events:none}
.flywheel--stacked .flywheel__connector svg{display:block;width:66px;max-width:100%;height:26px;overflow:visible}
.flywheel--stacked .flywheel__node{position:relative;left:auto;top:auto;flex:0 0 auto;width:clamp(96px,10vw,144px);animation:none;transform:none}
.flywheel--stacked .flywheel__node:hover{transform:none}
.flywheel--stacked .flywheel__node:active{transform:scale(.98)}
.flywheel--stacked .flywheel__node::before,.flywheel--stacked .flywheel__node::after{animation:none;translate:none}
.flywheel--stacked .flywheel__preview{position:absolute;z-index:-2;left:-3px;right:-3px;top:45%;height:calc(55% + 144px);border:1px solid #d6dee2;border-radius:0 0 80px 80px;background:linear-gradient(180deg,#e5eaed,#f3f5f6);box-shadow:0 16px 26px -22px rgba(35,49,60,.35);clip-path:inset(0 0 100%);opacity:0;transition:clip-path .4s cubic-bezier(.22,1,.36,1),opacity .2s;pointer-events:none}
.flywheel--stacked .flywheel__preview-text{position:absolute;left:12px;right:12px;bottom:30px;min-height:90px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--ff);font-size:14px;font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none;text-shadow:none;color:#34434f;opacity:0;transform:translateY(-8px);transition:opacity .25s .08s,transform .35s}
.flywheel--stacked .flywheel__node:is(:hover,:focus-visible) .flywheel__preview{clip-path:inset(0 -40px -40px);opacity:1;pointer-events:auto}
.flywheel--stacked .flywheel__node:is(:hover,:focus-visible) .flywheel__preview-text{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.flywheel--stacked .flywheel__preview,.flywheel--stacked .flywheel__preview-text{transition:none}}
.flywheel--stacked .ecosys__kicker{font-size:clamp(18px,2vw,28px)}
.flywheel--stacked .ecosys__tag{font-size:clamp(16px,1.6vw,22px)}
.flywheel--stacked .ecosys__list{font-size:clamp(14px,1.3vw,18px)}
.flywheel--stacked .ecosys__sharedlabel{font-size:clamp(10px,1vw,13px)}
.flywheel--stacked .ecosys__capabilitybtn{font-size:clamp(13px,1.3vw,18px);min-height:68px}
.ecosys__detail{color:var(--on-light-2);text-align:left;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
.ecosys__cycle:has(.ecosys__orb--soft:is(:hover,:focus-visible)) .ecosys__detail--software,
.ecosys__cycle:has(.ecosys__orb--hard:is(:hover,:focus-visible)) .ecosys__detail--hardware{opacity:1;visibility:visible;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.ecosys__detail{transition:none}}
.ecosys__detail h3{font-size:24px;line-height:1.2;color:var(--ink);margin:0 0 10px}
.ecosys__detail-wordmark{display:inline-block;height:1em;width:auto;vertical-align:baseline}
.ecosys__detail-tagline{font-size:15px;line-height:1.5;margin:0}
.ecosys__detail dl{margin:26px 0 0}
.ecosys__detail dt{font-size:15px;font-weight:700;line-height:1.4;margin:0 0 6px}
.ecosys__detail dd{font-size:14px;line-height:1.6;margin:0 0 20px}
.ecosys__detail dd:last-child{margin-bottom:0}
@media(min-width:1101px){
  #whatbuild > .wrap,.agencyrev.is-anim #whatbuild > .wrap{max-width:2000px;padding-inline:24px}
  .flywheel.flywheel--stacked{max-width:1920px}
  .flywheel--stacked .ecosys{max-width:none;padding-top:84px}
  .flywheel--stacked .ecosys__overview-logo{top:0;transform:translateX(-50%)}
  .flywheel--stacked .ecosys__cycle{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.15fr) minmax(0,.95fr);gap:clamp(18px,1.6vw,32px);aspect-ratio:auto;align-items:center}
  .flywheel--stacked .ecosys__orb{position:relative;inset:auto;transform:none;width:100%;padding:24px 12px;animation:none;cursor:pointer}
  .flywheel--stacked .ecosys__orb--soft{grid-column:2;grid-row:1}
  .flywheel--stacked .ecosys__orb--hard{grid-column:4;grid-row:1}
  .flywheel--stacked .ecosys__shared{position:relative;inset:auto;transform:none;width:100%;grid-column:3;grid-row:1}
  .ecosys__detail--software{grid-column:1;grid-row:1}
  .ecosys__detail--hardware{grid-column:5;grid-row:1}
  .flywheel--stacked .ecosys__kicker{font-size:clamp(17px,1.35vw,26px)}
  .flywheel--stacked .ecosys__tag{font-size:clamp(14px,1.1vw,20px)}
  .flywheel--stacked .ecosys__list{font-size:clamp(12px,.9vw,16px)}
  .flywheel--stacked .flywheel__nodes{max-width:1440px;justify-self:center}
}
@media(max-width:1100px){
  .flywheel--stacked .ecosys{max-width:none;padding-top:80px}
  .flywheel--stacked .ecosys__cycle{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:auto;gap:28px;max-width:none}
  .flywheel--stacked .ecosys__orb{position:relative;inset:auto;transform:none;width:100%;padding:28px;animation:none;cursor:pointer}
  .flywheel--stacked .ecosys__orb--soft{grid-column:1;grid-row:1}
  .flywheel--stacked .ecosys__orb--hard{grid-column:2;grid-row:1}
  .ecosys__detail--software{grid-column:1;grid-row:2}
  .ecosys__detail--hardware{grid-column:2;grid-row:2}
  .flywheel--stacked .ecosys__shared{position:relative;inset:auto;transform:none;width:100%;grid-column:1/-1;grid-row:3}
}
@media(max-width:760px){
  #whatbuild{overflow:hidden}
  .flywheel--stacked .ecosys{max-width:none}
  .flywheel--stacked .ecosys__overview-logo{position:relative;left:auto;top:auto;transform:none;width:280px;max-width:85%;margin:0 auto 32px}
  .flywheel--stacked .ecosys__cycle{display:flex;flex-direction:column;aspect-ratio:auto;max-width:440px;gap:24px}
  .flywheel--stacked .ecosys__orb{position:relative;top:auto;left:auto;right:auto;transform:none;width:100%;padding:32px;animation:none}
  .flywheel--stacked .ecosys__shared{position:relative;left:auto;top:auto;transform:none;width:100%;order:2}
  .flywheel--stacked .flywheel__nodes{gap:12px;padding:12px 6px 162px;overflow-x:auto}
  .flywheel--stacked .flywheel__node{width:92px;font-size:11px}
  .flywheel--stacked .flywheel__connector{flex:0 0 66px}
}
@media(max-width:760px){
  .flywheel--stacked .ecosys{padding-top:0}
  .flywheel--stacked .ecosys__cycle{display:flex}
  .flywheel--stacked .ecosys__orb--soft{order:1}
  .ecosys__detail--software{order:2}
  .flywheel--stacked .ecosys__orb--hard{order:3}
  .ecosys__detail--hardware{order:4}
  .flywheel--stacked .ecosys__shared{order:5}
}

/* Single-population software portfolio: no pinned stage or horizontal rail. */
.scene.software-single .stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible;display:block}
.scene.software-single .stage-title{position:relative;left:auto;top:auto;transform:none;margin:0 auto;width:min(900px,96%)}
.scene.software-single .track{position:relative;inset:auto;display:block;height:auto;transform:none;will-change:auto;margin-top:56px}
.scene.software-single .orbslot{width:100%;height:auto;gap:64px}
.scene.software-single .orbslot[hidden]{display:none}
.scene.software-single .orbslot:not([hidden]){animation:population-appear .3s ease}
.scene.software-single .orbslot .photo-float{--y0:-12px;--y1:12px}
.scene.software-single[data-scene="software"] .orbslot.focus .orb.photo-orb{width:min(350px,70vw);height:min(350px,70vw);transform:none;cursor:default}
.scene.software-single .track .ocard{display:block;position:relative;inset:auto;transform:none;opacity:1;pointer-events:auto;min-height:0;width:min(94%,1140px)}
.scene.software-single .dots span{width:6px;height:6px;border:1px solid #ddd;border-radius:50%;display:block}
.scene.software-single .dots span.on{background:#111;border-color:#111;transform:scale(1.3)}
@keyframes population-appear{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
  .scene.software-single .track{margin-top:36px}
  .scene.software-single .orbslot{gap:40px}
  .scene.software-single .track .ocard{width:calc(100% - 40px)}
}
@media(prefers-reduced-motion:reduce){
  .scene.software-single .orbslot:not([hidden]),.scene.software-single .photo-float{animation:none}
}

.scene.software-single .population-photo-caption{display:block;margin:22px 0 0;padding:0;border:0;background:none;color:var(--on-light-2);font:500 12px/1.5 var(--ff);letter-spacing:.06em;text-align:center}
.scene.software-single button.population-photo-caption{cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.scene.software-single[data-scene="software"] .orbslot.focus button.orb.photo-orb{cursor:pointer}
.app-preview-dialog{width:min(480px,calc(100% - 40px));padding:56px 32px 40px;border:0;border-radius:20px;background:#fff;color:#111;box-shadow:0 24px 80px #0003}
.app-preview-dialog::backdrop{background:rgba(0,0,0,.45)}
.app-preview-dialog h2{font-size:26px;margin:0 0 16px}
.app-preview-dialog p{font-size:15px;margin:0;color:#666}
.app-preview-close{position:absolute;right:16px;top:12px;border:0;background:none;color:#111;font-size:28px;cursor:pointer;width:36px;height:36px}

/* Centered fine introduction and matching store-badge heights. */
.fine-preview-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:48px 44px 40px;overflow-y:auto;text-align:center}
.fine-preview-dialog .fine-preview-brand{margin:0 0 28px}
.fine-preview-logo{display:block;width:96px;height:96px;margin:0 auto;border-radius:22px;box-shadow:0 8px 24px rgba(47,52,70,.14)}
.fine-preview-dialog .fine-preview-description{max-width:46ch;margin:0 auto;font-size:16px;line-height:1.75;color:#53585D;text-wrap:pretty}
.fine-preview-stores{--badge-height:clamp(32px,8.8vw,44px);display:flex;align-items:center;justify-content:center;gap:20px;margin:32px auto 0;padding:12px 0}
.fine-preview-badge{display:flex;align-items:center;justify-content:center;flex:none;height:var(--badge-height)}
.fine-preview-badge--apple{width:calc(var(--badge-height) * 1280 / 380)}
.fine-preview-badge--apple img{width:100%;height:100%}
.fine-preview-badge--google{width:calc(var(--badge-height) * 564 / 168)}
/* The official Google asset includes 41px of transparent clear space. */
.fine-preview-badge--google img{width:auto;max-width:none;height:calc(var(--badge-height) * 250 / 168)}
@media(max-width:480px){
  .fine-preview-dialog{padding:44px 24px 28px}
  .fine-preview-logo{width:88px;height:88px;border-radius:20px}
  .fine-preview-dialog .fine-preview-description{font-size:15px;line-height:1.7}
  .fine-preview-stores{gap:16px;margin-top:24px}
}

.scene.software-single span.population-photo-caption{color:#929292}

.scene[data-scene="software"] .software-population-title{color:#806c52}

.band.light .hardware-category-heading h3,
.band.light .hardware-mobile-categories h3{color:#806c52}

.scene.software-single .population-vote{color:#929292;margin-top:6px;letter-spacing:0;text-transform:none}
.development-vote-confirm{display:block;margin:28px auto 0;padding:12px 32px;border:0;border-radius:999px;background:#111;color:#fff;font:600 15px/1.5 var(--ff);cursor:pointer}

/* Development voting preview, shared across population groups. */
.vote-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:40px;overflow-y:auto;text-align:left}
.vote-dialog .vote-population{font-size:12px;letter-spacing:.06em;color:#806c52;font-weight:600;margin:0 0 12px}
.vote-dialog h2{font-size:28px;line-height:1.2;letter-spacing:-.025em;margin:0 0 16px;outline:none}
.vote-dialog .vote-content > p{font-size:15px;line-height:1.65;color:#606365;margin:0 0 24px}
.vote-dialog h3,.vote-dialog legend{font-size:16px;line-height:1.5;font-weight:700;color:#111;margin:0 0 6px}
.vote-dialog fieldset{padding:0;border:0;margin:24px 0 0;min-width:0}
.vote-dialog .vote-optional{font-size:12px;color:#666;margin:0 0 12px}
.vote-option{display:flex;align-items:flex-start;gap:12px;min-height:40px;padding:8px 0;cursor:pointer;font-size:15px;line-height:1.5;color:#45494b}
.vote-option input{appearance:auto;flex:0 0 17px;width:17px;height:17px;margin:3px 0 0;accent-color:#806c52}
.vote-dialog .vote-primary{display:block;width:100%;margin:24px 0 0;padding:14px 20px;border:1px solid #333;border-radius:999px;background:#111;color:#fff;font:600 15px/1.5 var(--ff);cursor:pointer}
.vote-dialog .vote-primary:hover{background:#333}
.vote-email-form label{display:block;font-size:14px;margin:16px 0 8px}
.vote-email-form label span{color:#888}
.vote-email-form input{box-sizing:border-box;width:100%;padding:13px 14px;border:1px solid #bbb;border-radius:8px;background:#fff;color:#111;font:400 16px/1.5 var(--ff)}
.vote-dialog .vote-content .vote-fineprint{font-size:12px;text-align:center;margin:12px 0;color:#666}
.vote-later{display:block;margin:16px auto 0;padding:8px 12px;background:none;border:0;text-decoration:underline;text-underline-offset:4px;color:#666;font:400 14px/1.5 var(--ff);cursor:pointer}
.vote-dialog button:focus-visible,.vote-dialog input:focus-visible{outline:2px solid #a08c70;outline-offset:3px}
/* Keep the page scrollbar present so vote dialogs do not shift the layout. */
.vote-dialog{overscroll-behavior:contain}
@media(max-width:600px){.vote-dialog{padding:36px 24px 28px}.vote-dialog h2{font-size:25px}}

.vote-back{display:block;margin:16px 0 0;padding:8px 0;background:none;border:0;color:#666;font:400 14px/1.5 var(--ff);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* Hardware stays in normal flow; browsing never consumes vertical scrolling. */
.hardware-stage{display:flex;flex-direction:column;gap:24px}
.hardware-portfolio .hardware-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;width:min(100%,560px);margin:0 auto;padding:0}
.hardware-portfolio .hardware-controls button{width:44px;height:44px}
.hardware-portfolio .hardware-category-heading{width:100%}
.hardware-portfolio .hardware-category-heading h3{font-family:"Plus Jakarta Sans",var(--ff);font-size:clamp(22px,2.4vw,30px)}
.hardware-portfolio .hardware-category-dots{justify-content:center}
/* Wear-photo enquiry controls stay inside the square image. */
.has-wear-photo .hardware-visual{container-type:inline-size}
.has-wear-photo .hardware-image-full{border-radius:28px}
.hardware-interest{position:absolute;z-index:2;right:max(12px,calc(50% - 138px));top:calc(50% + min(50cqw,150px) - 12px);transform:translateY(-100%);border:0;border-radius:999px;background:#fff;color:#333;padding:12px 18px;font:inherit;font-size:14px;box-shadow:0 3px 16px #0002;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.hardware-visual:has(.hardware-image-toggle[aria-pressed="true"]) .hardware-interest,.hardware-visual:has(:focus-visible) .hardware-interest{opacity:1;visibility:visible}
.hardware-visual:has(:focus-visible) .hardware-image-front{opacity:0}
.has-wear-photo .hardware-visual:has(:focus-visible) .hardware-image-full{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:hover) and (pointer:fine){.hardware-visual:hover .hardware-interest{opacity:1;visibility:visible}}
.hardware-interest:focus-visible{outline:2px solid #B5A38B;outline-offset:4px}
.hardware-preorder{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);box-sizing:border-box;overflow:auto;border:1px solid #dedad4;border-radius:28px;padding:36px;background:#fff;color:#171818;box-shadow:0 24px 90px #0003}
.hardware-preorder::backdrop{background:#1118;backdrop-filter:blur(6px)}
.hardware-preorder-close{position:absolute;right:16px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f2f1ef;color:#333;font-size:25px;cursor:pointer}
.hardware-preorder h2{font-size:28px;letter-spacing:-.03em;margin:0 28px 12px 0}
.hardware-preorder p{font-size:14px;line-height:1.6;color:#666}
.hardware-preorder form{display:grid;gap:10px;margin-top:24px}
.hardware-preorder label{font-size:14px;margin-top:5px}
.hardware-preorder label span{color:#777}
.hardware-preorder input,.hardware-preorder textarea{box-sizing:border-box;width:100%;border:1px solid #d6d3ce;border-radius:10px;padding:11px 12px;font:inherit;font-size:16px;background:#fff;color:#222}
.hardware-preorder input[readonly]{background:#f5f3ef;color:#706454}
.hardware-preorder textarea{resize:vertical}
.hardware-preorder input:focus-visible,.hardware-preorder textarea:focus-visible{outline:2px solid #B5A38B;outline-offset:2px}
.hardware-preorder-submit{border:1px solid #555;border-radius:999px;padding:13px 22px;background:#303331;color:#fff;font:inherit;cursor:pointer}
.hardware-preorder .hardware-preorder-note{font-size:12px;margin:6px 0}
#preorder-status:empty{display:none}
@media(max-width:480px){.hardware-preorder{padding:30px 22px}.hardware-interest{font-size:13px;padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.hardware-interest{transition:none}}
/* The same product title travels into the lifestyle image on reveal. */
.has-wear-photo{position:relative}
.has-wear-photo .hardware-copy{position:relative}
.has-wear-photo .hardware-copy .pop{position:relative;z-index:3;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;pointer-events:none;transform-origin:left center;transition:transform 1s ease-in-out,color 1s ease-in-out}
.has-wear-photo .hardware-visual::after{content:"";position:absolute;pointer-events:none;left:50%;top:50%;width:min(100%,300px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:28px;background:linear-gradient(transparent 55%,rgba(0,0,0,.65));opacity:0;transition:opacity 1s ease-in-out}
.has-wear-photo:has(.hardware-visual:has(:focus-visible)) .hardware-copy .pop,.has-wear-photo:has(.hardware-image-toggle[aria-pressed="true"]) .hardware-copy .pop{transform:translate(var(--wear-title-x,0px),var(--wear-title-y,0px)) scale(.74);color:#fff}
.has-wear-photo .hardware-visual:has(:focus-visible)::after,.has-wear-photo .hardware-visual:has(.hardware-image-toggle[aria-pressed="true"])::after{opacity:1}
@media(hover:hover) and (pointer:fine){
 .has-wear-photo:has(.hardware-visual:hover) .hardware-copy .pop{transform:translate(var(--wear-title-x,0px),var(--wear-title-y,0px)) scale(.74);color:#fff}
 .has-wear-photo .hardware-visual:hover::after{opacity:1}
}
@media(prefers-reduced-motion:reduce){.has-wear-photo .hardware-copy .pop,.has-wear-photo .hardware-visual::after{transition:none}}
/* Shared photo and description width, with a borderless floating glass surface. */
.has-wear-photo .hardware-visual,.hardware-track.is-single .has-wear-photo .hardware-visual{width:min(calc(100% - 8px),430px);height:auto;aspect-ratio:1;margin-inline:auto}
.has-wear-photo .hardware-image-front{width:82%;height:82%;max-width:100%;max-height:100%}
.has-wear-photo .hardware-image-full,.has-wear-photo .hardware-visual::after{width:100%;height:100%}
.has-wear-photo .hardware-interest{right:16px;top:auto;bottom:12px;transform:none}
.hardware-copy .hook{border:0;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(235,231,223,.5));box-shadow:inset 0 2px 3px rgba(255,255,255,.95),inset 0 -2px 4px rgba(122,110,90,.08),0 5px 10px rgba(72,63,49,.04),0 16px 28px -10px rgba(72,63,49,.18);transform:perspective(900px) translateY(var(--card-lift,0px)) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .25s ease-out;backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.hardware-copy .hook{transform:none;transition:none}}
/* Both faces share a grid cell so longer details never get clipped. */
.hardware-flip{width:min(100%,430px);margin:auto;perspective:1000px;transform:perspective(900px) translateY(var(--card-lift,0px)) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .25s ease-out}
.hardware-flip-inner{display:grid;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.22,.68,.2,1)}
.hardware-flip.is-flipped .hardware-flip-inner{transform:rotateY(180deg)}
.hardware-flip-face{grid-area:1/1;min-width:0;box-sizing:border-box;padding:22px 24px 62px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(235,231,223,.75));box-shadow:inset 0 2px 3px #fffffff2,inset 0 -2px 4px #7a6e5a14,0 16px 28px -10px #483f312e;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hardware-flip-back{transform:rotateY(180deg);text-align:left;color:#6b6d70;font-size:15px;line-height:1.65}
.hardware-flip-back h4{margin:0 0 12px;font-size:16px;font-weight:600;color:#9b886e;text-align:center}
.hardware-flip-back ul{list-style:none;padding-left:0;margin:0}
.hardware-flip-back li{position:relative;padding-left:23px}
.hardware-flip-back li::before{content:"";position:absolute;left:0;top:.32em;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2398866d' d='M14.9 2.1Q16 .2 17.1 2.1C18.8 11.2 19.8 13.2 29.9 14.9Q31.8 16 29.9 17.1C19.8 18.8 18.8 20.8 17.1 29.9Q16 31.8 14.9 29.9C13.2 20.8 12.2 18.8 2.1 17.1Q.2 16 2.1 14.9C12.2 13.2 13.2 11.2 14.9 2.1Z'/%3E%3C/svg%3E") center/contain no-repeat}
.hardware-flip-back li+li{margin-top:10px}
.hardware-flip .hook{width:100%;padding:0;margin:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;transition:none}
.hardware-flip-toggle{position:absolute;bottom:17px;right:24px;border:0;border-radius:12px;background:transparent;color:#79684f;font:inherit;font-size:13px;padding:7px 0;cursor:pointer}
.hardware-flip-toggle:focus-visible{outline:2px solid #B5A38B;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.hardware-flip{transform:none;transition:none}.hardware-flip-inner{transition:none}}
.hardware-product[data-label="AI Pin"] .hardware-image-front{width:70%;height:70%}
/* One size across categories; the tallest face determines their shared height. */
.hardware-portfolio{--hardware-card-width:min(430px,calc(clamp(400px,29vw,460px) - 8px))}
@media(min-width:1100px){.hardware-portfolio{--hardware-card-width:min(430px,calc((100vw - 2 * var(--hardware-inset) - 2 * var(--hardware-gap))/3 - 8px))}}
@media(max-width:700px){.hardware-portfolio{--hardware-card-width:min(430px,calc(82vw - 8px))}}
.hardware-flip{width:var(--hardware-card-width);max-width:100%;transform:none}
.has-wear-photo .hardware-visual,.hardware-track.is-single .has-wear-photo .hardware-visual{width:var(--hardware-card-width);max-width:calc(100% - 8px)}
.hardware-flip-face{position:relative;overflow:hidden;min-height:var(--hardware-card-height,340px);border:0;background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(235,239,241,.14));color:#60666a;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 1px 2px rgba(255,255,255,.9),inset 0 -1px 3px rgba(125,140,150,.07),0 8px 24px rgba(38,53,64,.09);transition:background .18s ease}
.hardware-flip:hover .hardware-flip-face{background:linear-gradient(135deg,rgba(255,255,255,.56),rgba(235,239,241,.2))}
.hardware-flip .hook{color:#60666a}
.hardware-flip-back h4,.hardware-flip-toggle{color:#79684f}
.hardware-flip-face::after{content:"";position:absolute;top:-75%;left:0;width:45%;height:250%;pointer-events:none;background:linear-gradient(90deg,hsla(0,0%,100%,0),rgba(255,255,255,.32),hsla(0,0%,100%,0));transform:translateX(-260%) rotate(-30deg)}
.hardware-flip:hover .hardware-flip-face::after{transform:translateX(320%) rotate(-30deg);transition:transform 1.15s ease}
@media(prefers-reduced-motion:reduce){.hardware-flip-face::after{display:none}}
/* Center the five-line overview independently of the bottom-right control. */
.hardware-flip-front{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:54px 24px}
.hardware-flip-front h4{margin:0 0 12px;font-size:16px;font-weight:600;line-height:1.65;color:#79684f;text-align:center}
.hardware-flip-front .hook{text-align:justify;text-align-last:left;font-size:15px;line-height:1.65;text-wrap:wrap}

/* Show specifications first, then reveal the experience on hover. */
.hardware-flip-back{transform:none}
.hardware-flip-front{transform:rotateY(180deg)}
.hardware-flip .hardware-flip-front{background:linear-gradient(135deg,rgba(247,240,226,.5),rgba(181,163,139,.15));box-shadow:inset 0 1px 2px rgba(255,251,240,.9),inset 0 -1px 3px rgba(181,163,139,.1),0 8px 24px rgba(110,91,61,.09)}
.hardware-flip:hover .hardware-flip-front{background:linear-gradient(135deg,rgba(247,240,226,.6),rgba(181,163,139,.2))}


.hardware-learn-more{padding:4px 0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#hardware-category-details p{line-height:1.65}
/* Keep the page scrollbar visible while category details are open. */

/* Compact category details and a common product row across all categories. */
.hardware-category-heading #hardware-category-description{margin-top:0}
.hardware-portfolio .hardware-category-heading{margin-bottom:0}
.hardware-portfolio .hardware-track{padding-top:0}
.hardware-portfolio .has-wear-photo .hardware-visual{height:var(--hardware-card-width);aspect-ratio:auto;margin-top:0;margin-bottom:0}

/* Smoked liquid glass on the experience face; the details face stays light. */
.hardware-flip .hardware-flip-front,.hardware-flip:hover .hardware-flip-front{
  border:1px solid rgba(226,237,244,.52);
  background:
    radial-gradient(ellipse at var(--experience-glass-x,18%) var(--experience-glass-y,8%),rgba(224,237,246,.18),transparent 62%),
    radial-gradient(ellipse at 100% 100%,rgba(170,194,211,.12),transparent 50%),
    linear-gradient(135deg,rgba(57,64,70,.91),rgba(30,37,43,.94));
  -webkit-backdrop-filter:blur(24px) saturate(135%);backdrop-filter:blur(24px) saturate(135%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5),inset 2px 0 7px rgba(234,244,251,.16),inset -2px -3px 8px rgba(9,20,29,.28),0 18px 38px -18px rgba(29,46,59,.35),0 3px 8px -4px rgba(29,46,59,.2);
}
.hardware-flip-front::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 8%,rgba(255,255,255,.065) 24%,transparent 44%)}
.hardware-flip .hardware-flip-front::after,.hardware-flip:hover .hardware-flip-front::after{
  display:block;inset:0;width:auto;height:auto;border-radius:inherit;padding:1px;transform:none;transition:none;
  background:conic-gradient(from 12deg,transparent 0deg,rgba(255,255,255,.9) 48deg,transparent 84deg,transparent 142deg,rgba(177,204,222,.65) 184deg,rgba(255,255,255,.75) 210deg,transparent 248deg,transparent 288deg,rgba(255,255,255,.85) 326deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
.hardware-flip-front > *{position:relative;z-index:1}
.band.light .hardware-flip-front h4{color:#fff}
.hardware-flip .hardware-flip-front .hook{color:#f1f3f4;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.hardware-flip-front .fine-wm{filter:brightness(0) invert(1)}
.hardware-flip.is-flipped .hardware-flip-toggle{color:#eee3d3}
/* Explicit face visibility avoids mirrored text from WebKit's touch compositor. */
@media(hover:none),(pointer:coarse){
  .hardware-flip,.hardware-flip .hardware-flip-inner,.hardware-flip.is-flipped .hardware-flip-inner{perspective:none;transform:none;transition:none}
  .hardware-flip .hardware-flip-front{transform:none;visibility:hidden}
  .hardware-flip.is-flipped .hardware-flip-back{visibility:hidden}
  .hardware-flip.is-flipped .hardware-flip-front{visibility:visible}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hardware-flip .hardware-flip-front,.hardware-flip:hover .hardware-flip-front{background-color:#343b40}
}
@media(prefers-reduced-transparency:reduce){
  .hardware-flip .hardware-flip-front,.hardware-flip:hover .hardware-flip-front{background-color:#343b40;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* AI Pin wearing styles, revealed with the lifestyle photo. */
.hardware-wear-options{position:absolute;z-index:3;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:24px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.hardware-wear-options button{position:relative;min-height:36px;padding:8px 0;border:0;background:none;color:#fff;font:500 14px/1.4 var(--ff);text-shadow:0 1px 4px #0005;cursor:pointer}
.hardware-wear-options button::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .2s ease}
.hardware-wear-options button[aria-pressed="true"]::after{transform:scaleX(1)}
.hardware-wear-options button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hardware-product[data-label="AI Pin"] .hardware-visual::after{background:linear-gradient(rgba(0,0,0,.6),transparent 38%),linear-gradient(transparent 55%,rgba(0,0,0,.65))}
.hardware-visual:has(.hardware-image-toggle[aria-pressed="true"]) .hardware-wear-options,.hardware-visual:has(:focus-visible) .hardware-wear-options{opacity:1;visibility:visible}
@media(hover:hover) and (pointer:fine){.hardware-visual:hover .hardware-wear-options{opacity:1;visibility:visible}}
@media(prefers-reduced-motion:reduce){.hardware-wear-options,.hardware-wear-options button::after{transition:none}}

/* Decorative opening quotation mark on Careers card backs. */
.fc-back::before{display:block;content:"";position:absolute;left:var(--s6);top:22px;width:38px;height:36px;background:url("../img/quote-opening.svg") center/contain no-repeat;border-radius:0;filter:none;opacity:1;z-index:1}

/* Let long quotations size both faces, with dedicated space for the mark. */
.fc.has-quote{height:auto;min-height:230px}
.fc.has-quote .fc-inner{display:grid;height:auto;min-height:inherit}
.fc.has-quote .fc-face{position:relative;inset:auto;grid-area:1/1;min-width:0}
.fc.has-quote .fc-back{justify-content:center;gap:16px;padding-top:24px;padding-bottom:28px}
.fc.has-quote .fc-back::before{position:relative;left:auto;top:auto;flex:none;margin:0}
@media(max-width:760px){.fc.has-quote{min-height:200px}}

/* Four values share one description area in each Careers category. */
.chapter-card-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:stretch}
.chapter-card-row .principle.flipcard{display:block;min-width:0;margin:0;padding:0;border:0}
.chapter-card-row .fc.has-quote{height:100%;max-width:none;min-height:250px}
.chapter-card-row .fc.has-quote .fc-inner{height:100%}
.chapter-card-row .fc-face{padding:24px}
.chapter-card-row .fc-front h3{font-size:clamp(19px,1.65vw,24px);line-height:1.25}
.chapter-card-row .fc-back .fc-quote{font-size:18px;line-height:1.35}
.chapter-card-row .fc-hint{right:24px;bottom:20px;font-size:10px}
.chapter-card-row .is-selected .fc{outline:2px solid #b5a38b;outline-offset:5px;border-radius:14px}
.chapter-descriptions{display:grid;margin:36px auto 0;max-width:1100px}
.chapter-descriptions .fc-body{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;padding:0}
.chapter-descriptions .fc-body.is-active{visibility:visible;opacity:1;pointer-events:auto}
.chapter-descriptions .fc-body p{margin-top:0}
@media(max-width:1000px){.chapter-card-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.chapter-card-row{gap:16px}.chapter-card-row .fc-face{padding:18px}.chapter-card-row .fc-front h3{font-size:17px}.chapter-card-row .fc-back .fc-quote{font-size:15px}.chapter-card-row .fc-hint{right:18px;font-size:8px}.chapter-descriptions{margin-top:28px}}

/* Touch cards swap faces explicitly so iOS never composites mirrored text. */
@media(hover:none),(pointer:coarse){
  .chapter-card-row .fc.has-quote{perspective:none;touch-action:manipulation}
  .chapter-card-row .fc.has-quote .fc-inner{transform:none;transition:none}
  .chapter-card-row .fc.has-quote .fc-back{transform:none;visibility:hidden}
  .chapter-card-row .fc.has-quote.is-flipped .fc-front{visibility:hidden}
  .chapter-card-row .fc.has-quote.is-flipped .fc-back{visibility:visible}
}

/* Hiring qualities float around the person, with text on the white canvas. */
.hire-canvas{position:relative;isolation:isolate;height:800px;margin-top:20px}
.hire-person{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:190px;height:auto;pointer-events:none}
.hire-orb{position:absolute;left:var(--x);top:var(--y);width:180px;margin-left:-90px;animation:hire-float var(--duration) ease-in-out var(--delay) infinite alternate;z-index:1;text-align:center}
.hire-bubble{display:block;width:100%;min-height:78px;padding:18px 20px;border-radius:50%;border:1px solid #d8d1c7;background:radial-gradient(ellipse at 35% 20%,#fff 10%,#f5f2ec 75%,#e8e2d8);box-shadow:inset 0 2px 3px #fff,0 12px 24px -16px #85765c66;color:#55534f;font:500 16px/1.3 var(--ff);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.hire-bubble:hover,.hire-orb.is-active .hire-bubble{border-color:#b5a38b;box-shadow:inset 0 2px 3px #fff,0 12px 28px -12px #85765c66}
.hire-bubble:focus-visible{outline:2px solid #b5a38b;outline-offset:5px}
.hire-orb .hire-detail{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:230px;max-width:none;margin:14px 0 0;color:#606367;font-size:15px;line-height:1.55;text-align:center;text-wrap:pretty}
.hire-detail[hidden]{display:none}
.hire-orb.is-active{z-index:3}
.hire-canvas.is-paused .hire-orb{animation-play-state:paused}
@keyframes hire-float{from{transform:translate(-3px,-7px) rotate(-1deg)}to{transform:translate(4px,7px) rotate(1deg)}}
@media(max-width:760px){.hire-canvas{height:1180px}.hire-person{width:90px;top:47%}.hire-orb{left:var(--mobile-x);top:var(--mobile-y);width:130px;margin-left:-65px}.hire-bubble{font-size:14px;min-height:65px;padding:14px 12px}.hire-orb .hire-detail{width:145px;font-size:13px;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.hire-orb{animation:none}.hire-bubble{transition:none}}

/* Use the Home flywheel's photographic glass surfaces for hiring bubbles. */
.hire-bubble{--bubble-delay:0s;--bubble-hue:260;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.6);text-transform:uppercase;font-size:clamp(10px,1.05vw,14px);isolation:isolate;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hire-bubble:hover{box-shadow:none;color:#fff}
.hire-bubble::before,.hire-bubble::after{content:"";position:absolute;pointer-events:none}
.hire-bubble::before{inset:0;z-index:-1;border-radius:48% 52% 49% 51% / 52% 47% 53% 48%;border:1px solid rgba(229,239,246,.65);background:radial-gradient(ellipse at 27% 19%,rgba(255,255,255,.16),transparent 48%),linear-gradient(rgba(10,20,30,.28),rgba(10,20,30,.48)),var(--bubble-image) center/cover no-repeat;box-shadow:inset 2px 3px 8px rgba(247,252,255,.52),inset -4px -5px 12px rgba(184,204,218,.3),0 9px 24px -9px rgba(71,91,108,.3),0 0 14px rgba(157,186,207,.22);animation:bubbleBreathe 10s ease-in-out infinite,bubbleFloat 10s ease-in-out infinite;animation-delay:var(--bubble-delay)}
.hire-bubble::after{inset:-4px;z-index:-1;border-radius:49% 51% 52% 48%;padding:3px;background:conic-gradient(from 20deg,transparent 0%,rgba(255,255,255,.9) 17%,hsl(var(--bubble-hue) 55% 75% / .5) 29%,transparent 43%,hsl(var(--bubble-hue) 65% 90% / .8) 66%,transparent 81%,rgba(255,255,255,.9) 94%,transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:blur(1px);animation:bubbleSheen 18s linear infinite,bubbleFloat 10s ease-in-out infinite;animation-delay:var(--bubble-delay)}

.hire-canvas{height:1000px}
.hire-orb{width:148px;margin-left:-74px}
.hire-bubble{position:relative;display:flex;align-items:center;justify-content:center;width:148px;height:148px;min-height:0;padding:22px;border-radius:50%;font-size:16px;font-weight:800;line-height:1.25;letter-spacing:-.035em;--bubble-delay:var(--delay);--bubble-hue:215}
.hire-bubble:hover,.hire-orb.is-active .hire-bubble{box-shadow:none}





.hire-canvas.is-paused .hire-bubble::before,.hire-canvas.is-paused .hire-bubble::after{animation-play-state:paused}
@media(max-width:760px){.hire-canvas{height:1500px}.hire-orb{width:116px;margin-left:-58px}.hire-bubble{width:116px;height:116px;font-size:13px;padding:15px}.hire-person{top:47%}}
@media(prefers-reduced-motion:reduce){.hire-bubble::before,.hire-bubble::after{animation:none}}

/* Smaller hiring bubbles, retaining the surrounding spacing. */
.hire-orb{width:120px;margin-left:-60px}
.hire-bubble{width:120px;height:120px;padding:16px;font-size:14px}
@media(max-width:760px){.hire-orb{width:94px;margin-left:-47px}.hire-bubble{width:94px;height:94px;padding:12px;font-size:12px}}

/* Allow for the whitespace within the supplied person artwork. */
.hire-person{width:440px;mix-blend-mode:multiply}
@media(max-width:760px){.hire-person{width:180px}}

.hire-canvas.is-wandering .hire-orb{left:0;top:0;margin-left:0;animation:none;will-change:transform}

.hire-orb{--bubble-image:url("../img/hiring-bubble-background-2.webp")}

/* Tighten the hiring canvas and its transition to open roles. */
#who-we-hire{margin-bottom:0}
#who-we-hire .hire-canvas{height:800px}
.worktrack > .band:has(#who-we-hire) > .software-separator{margin-top:16px}
@media(max-width:760px){#who-we-hire .hire-canvas{height:1250px}}

/* White liquid glass for hiring qualities. */
.hire-bubble,.hire-bubble:hover{color:#555b60;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.hire-bubble::before{border-color:rgba(220,228,233,.8);background:radial-gradient(ellipse at 27% 19%,rgba(255,255,255,.98),rgba(255,255,255,.42) 45%,rgba(220,230,237,.38) 78%,rgba(255,255,255,.8));-webkit-backdrop-filter:blur(12px) saturate(115%);backdrop-filter:blur(12px) saturate(115%);box-shadow:inset 2px 3px 8px rgba(255,255,255,1),inset -4px -5px 12px rgba(184,204,218,.25),0 9px 24px -9px rgba(71,91,108,.22),0 0 14px rgba(157,186,207,.12)}
.hire-bubble::after{background:conic-gradient(from 20deg,transparent 0%,rgba(255,255,255,.98) 17%,rgba(193,214,225,.5) 29%,transparent 43%,rgba(226,235,242,.9) 66%,transparent 81%,rgba(255,255,255,.98) 94%,transparent)}

/* Centre the person vertically within the hiring canvas. */
#who-we-hire .hire-person{top:50%}

/* Clear liquid glass: transparent core, curved reflections, defined rim. */
.hire-bubble::before{
  border:1px solid rgba(178,194,204,.52);
  background:
    radial-gradient(ellipse at 30% 17%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.68) 8%,transparent 24%),
    radial-gradient(ellipse at 72% 85%,rgba(255,255,255,.82),transparent 25%),
    radial-gradient(ellipse at 50% 46%,rgba(255,255,255,.03) 44%,rgba(185,206,220,.12) 65%,rgba(146,172,189,.24) 83%,rgba(255,255,255,.8) 96%);
  -webkit-backdrop-filter:blur(3px) saturate(125%);backdrop-filter:blur(3px) saturate(125%);
  box-shadow:inset 2px 3px 3px rgba(255,255,255,.98),inset -2px -3px 5px rgba(115,143,162,.25),inset 0 0 1px 1px rgba(255,255,255,.7),0 9px 15px -10px rgba(64,87,104,.3),0 2px 5px -3px rgba(64,87,104,.16);
}
.hire-bubble::after{
  inset:3px;padding:2px;filter:blur(.3px);
  background:conic-gradient(from 10deg,transparent 0deg,rgba(255,255,255,.95) 38deg,transparent 65deg,transparent 140deg,rgba(152,184,206,.62) 175deg,rgba(255,255,255,.98) 206deg,transparent 234deg,transparent 282deg,rgba(255,255,255,1) 310deg,transparent 345deg);
}
.hire-bubble,.hire-bubble:hover{color:#485158;text-shadow:0 1px 1px rgba(255,255,255,.9)}
/* Shared, centered category Learn more popup. */
#hardware-category-details{
 --category-glass-x:38%;--category-glass-y:22%;--category-glass-angle:115deg;
 box-sizing:border-box;width:min(960px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;
 padding:56px clamp(24px,4vw,48px) 44px;isolation:isolate;
 border:1px solid rgba(255,255,255,.72);background:rgba(250,248,241,.28);text-align:center;
 -webkit-backdrop-filter:blur(28px) saturate(135%);backdrop-filter:blur(28px) saturate(135%);
 box-shadow:0 32px 88px -20px rgba(35,29,19,.36),0 8px 24px -12px rgba(35,29,19,.25),inset 0 2px 2px rgba(255,255,255,.95),inset 0 -2px 4px rgba(131,109,71,.22),inset 2px 0 5px rgba(255,255,255,.65);
}
#hardware-category-details::before,#hardware-category-details::after,#hardware-category-details .category-glass-sheen{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
#hardware-category-details::before{z-index:-1;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),url("../img/hardware/category-background-gold-3.jpg") center/cover no-repeat;opacity:.82}
#hardware-category-details::after{
 z-index:3;padding:2px;
 background:conic-gradient(from var(--category-glass-angle),rgba(255,255,255,.12),rgba(255,255,255,.98) 65deg,rgba(184,160,116,.35) 115deg,rgba(255,255,255,.14) 175deg,rgba(255,255,255,.95) 240deg,rgba(205,182,142,.5) 290deg,rgba(255,255,255,.12));
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
#hardware-category-details .category-glass-sheen{
 z-index:0;
 background:radial-gradient(ellipse at var(--category-glass-x) var(--category-glass-y),rgba(255,255,255,.78),rgba(255,255,255,.16) 34%,transparent 64%),linear-gradient(115deg,transparent 12%,rgba(255,255,255,.34) 30%,transparent 48%,rgba(255,255,255,.16) 76%,transparent 90%);
 box-shadow:inset 0 0 16px rgba(255,255,255,.32);opacity:.65;
}
#hardware-category-details[open]{animation:category-glass-enter .48s cubic-bezier(.16,1,.3,1) both}
#hardware-category-details[open] .category-glass-sheen{animation:category-glass-light 7s ease-in-out infinite alternate}
#hardware-category-details h2,#hardware-category-details p{position:relative;z-index:1;text-align:center}
#hardware-category-details .app-preview-close{z-index:4;border-radius:50%;background:rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.65);transition:background .2s,box-shadow .2s}
#hardware-category-details .app-preview-close:hover{background:rgba(255,255,255,.6);box-shadow:inset 0 1px 1px #fff,0 3px 10px rgba(84,71,47,.12)}
#hardware-category-details .app-preview-close:focus-visible{outline:2px solid #65573d;outline-offset:3px}
#hardware-category-details p{width:100%;max-width:none;margin-inline:auto;color:#454545;line-height:1.75;text-wrap:wrap}
#hardware-category-details .fine-wm{filter:none}
@keyframes category-glass-enter{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes category-glass-light{from{opacity:.4}to{opacity:.82}}
@media(prefers-reduced-motion:reduce){
 #hardware-category-details[open],#hardware-category-details[open] .category-glass-sheen{animation:none}
 #hardware-category-details .app-preview-close{transition:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#hardware-category-details{background:#f4f0e8}#hardware-category-details::before{opacity:1}}
@media(prefers-reduced-transparency:reduce){
 #hardware-category-details{background:#f4f0e8;-webkit-backdrop-filter:none;backdrop-filter:none}
 #hardware-category-details::before{opacity:1}
 #hardware-category-details .category-glass-sheen{display:none}
}

/* Pastel painted surfaces on the twelve culture card fronts. */
.chapter-card-row .fc-front{background:var(--career-card-image) center/cover no-repeat;box-shadow:0 18px 32px -20px rgba(60,54,45,.35),inset 0 0 0 1px rgba(255,255,255,.65)}
.chapter-card-row .fc-front::before,.chapter-card-row .fc-front::after{display:none}
.chapter-card-row .fc-front h3{color:#343638;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.chapter-card-row .fc-front .fc-hint{color:#52565a}
/* Taper the centered category copy toward its first and last lines. */
@media(min-width:1000px){
 #hardware-category-details{width:min(1120px,calc(100vw - 40px))}
 #hardware-category-details .category-description-line{display:block;white-space:nowrap}
 #hardware-category-details p{font-size:clamp(13px,1.34vw,15px)}
}
@media(max-width:999px){#hardware-category-details .category-description-line{display:inline;white-space:normal}}
/* Quiet design disclosure at the foot of the hardware closing section. */
.cta.cta-masked:has(.product-design-note){padding-bottom:72px}
.cta.cta-masked .product-design-note{position:relative;display:block;width:calc(100% - 48px);max-width:none;margin:64px auto 0;text-align:center;color:#707070;font-size:12px;line-height:1.6;opacity:1;visibility:visible}
.product-design-note small{font-size:inherit}
@media(min-width:1100px){.product-design-note{white-space:nowrap}}
@media(max-width:700px){.cta.cta-masked .product-design-note{margin-top:48px}}

/* Black letterpress titles: recessed ink with a fine paper-edge highlight. */
.chapter-card-row .fc-front h3{
  color:#252524;
  background:linear-gradient(180deg,#111211 0%,#252624 45%,#373733 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px .35px rgba(255,255,245,.72));
  text-shadow:0 -1px .7px rgba(0,0,0,.55);
}
@media(forced-colors:active){.chapter-card-row .fc-front h3{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText;filter:none;text-shadow:none}}

/* Individual painted backgrounds beneath the hiring bubbles glass reflections. */
.hire-orb:nth-of-type(1){--bubble-image:url("../img/careers-cards/1.webp")}
.hire-orb:nth-of-type(2){--bubble-image:url("../img/careers-cards/2.webp")}
.hire-orb:nth-of-type(3){--bubble-image:url("../img/careers-cards/3.webp")}
.hire-orb:nth-of-type(4){--bubble-image:url("../img/careers-cards/4.webp")}
.hire-orb:nth-of-type(5){--bubble-image:url("../img/careers-cards/5.webp")}
.hire-orb:nth-of-type(6){--bubble-image:url("../img/careers-cards/6.webp")}
.hire-orb:nth-of-type(7){--bubble-image:url("../img/careers-cards/7.webp")}
.hire-orb:nth-of-type(8){--bubble-image:url("../img/careers-cards/8.webp")}
.hire-orb:nth-of-type(9){--bubble-image:url("../img/careers-cards/9.webp")}
.hire-orb:nth-of-type(10){--bubble-image:url("../img/careers-cards/10.webp")}
.hire-orb:nth-of-type(11){--bubble-image:url("../img/careers-cards/11.webp")}
.hire-bubble::before{background:radial-gradient(ellipse at 27% 19%,rgba(255,255,255,.6),transparent 36%),radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(146,172,189,.16) 83%,rgba(255,255,255,.7) 96%),var(--bubble-image) center/cover no-repeat}
.hire-bubble,.hire-bubble:hover{color:#343638;text-shadow:0 1px 0 rgba(255,255,255,.5)}

.mission-copy > h2{font-size:38px;line-height:1.2;text-wrap:wrap;max-width:none}
@media(min-width:1000px){
 .mission-copy > .mission-belief-question{width:960px;margin-inline:-80px}
 .mission-belief-question > span{display:block;white-space:nowrap}
}

.question-cards--compact .question-card:last-child p{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}

/* Centre the three Mission section labels with a heavier heading face. */
.mission-copy > .ey--large{display:block;width:fit-content;margin-left:auto;margin-right:auto;text-align:center;font-family:"Plus Jakarta Sans",var(--ff);font-weight:800}
/* Store badges alongside the public beta launch announcement. */
.tl .row.fine-launch-row{grid-template-columns:140px minmax(0,1fr) auto;align-items:center}
.fine-launch-row .when{align-self:start}
.fine-launch-stores{--badge-height:36px;gap:18px;margin:0;padding:0}
@media(max-width:1000px){.tl .row.fine-launch-row{grid-template-columns:140px minmax(0,1fr)}.fine-launch-stores{grid-column:2;justify-content:flex-start}}
@media(max-width:600px){.tl .row.fine-launch-row{grid-template-columns:1fr}.fine-launch-stores{grid-column:1;--badge-height:32px;gap:14px}}

/* Mobile reading and progressive enhancement. Keep substantive copy in flow
   until a desktop interaction has successfully initialized. */
html{scroll-padding-top:calc(var(--nav-h) + 20px)}
.nav .mark{min-height:44px}
.nav-links a.nav-mobile-contact{display:none}
.landing:not(.is-anim){height:auto!important;min-height:0;margin-top:0}
.landing:not(.is-anim) .landing-stage{position:relative;height:auto;overflow:visible}
.landing:not(.is-anim) .landing-stage > section{position:relative;inset:auto;opacity:1!important;transform:none!important;pointer-events:auto!important;will-change:auto}
.landing:not(.is-anim) .hero-wall{height:calc(100svh - var(--nav-h));min-height:440px}
.landing:not(.is-anim) .belief{height:auto;min-height:0;padding:72px 0}
.landing:not(.is-anim) .belief-in,.landing:not(.is-anim) .belief-l2,.landing:not(.is-anim) .belief-w,.landing:not(.is-anim) .bword{opacity:1!important;transform:none!important;filter:none!important}
.landing:not(.is-anim) .belief-cursor{display:none}
.landing:not(.is-anim) .belief-in p{font-size:clamp(18px,2vw,27px);line-height:1.5}
.emenu:not(.is-enhanced){height:auto;min-height:0}
.emenu:not(.is-enhanced) :is(.emenu-canvas,.emenu-eyebrow,.emenu-cta,.emenu-hint,.emenu-name,.emenu-fields){display:none}
.emenu:not(.is-enhanced) .sr{position:relative;width:100%;height:auto;clip:auto;clip-path:none;white-space:normal;overflow:visible;max-width:var(--container);margin:0 auto;padding:64px var(--pad);color:var(--on-dark-2)}
.emenu:not(.is-enhanced) h2{color:#fff}
.emenu:not(.is-enhanced) ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:28px 0}
.emenu:not(.is-enhanced) li{padding-top:20px;border-top:1px solid var(--line-d);font-size:16px}
.emenu:not(.is-enhanced) strong{color:#fff}
.hteam.is-flat .hteam-pin{height:auto!important}
.hteam.is-flat .hteam-stage{height:auto;position:relative;overflow:clip}
.hteam.is-flat .sxpand-titlewrap{display:block;position:relative;inset:auto;transform:none!important;opacity:1!important;padding:40px var(--pad) 24px;text-align:center;color:#fff;mix-blend-mode:normal}
.hteam.is-flat .sxpand-title{position:static;transform:none;width:auto;white-space:normal;font-size:clamp(26px,5vw,40px);color:#fff}
.hteam.is-flat .sxpand-sub{position:static;transform:none;width:auto;font-size:16px;max-width:60ch;margin:20px auto 0}
.hteam.is-flat .hteam-crew{position:relative;opacity:1;transform:none}
.hteam.is-flat :is(.hteam-ghost,.hteam-glow,.hteam-hint,.hteam-rail){display:none}
.hteam.is-flat .hteam-carousel{position:relative;height:clamp(210px,32svh,280px)}
.hteam.is-flat .hteam-fig{transition:opacity .2s ease;will-change:opacity}
.hteam.is-flat .hteam-fig.is-center{height:100%;bottom:0;transform:translateX(-50%)}
.hteam.is-flat .hteam-fig:not(.is-center){visibility:hidden}
.hteam.is-flat .hteam-ui{position:relative}
.hteam.is-flat .hteam-panel{display:flex;flex-direction:column;padding:12px 0 48px;max-width:650px;margin:auto}
.hteam.is-flat .hteam-role{font-size:28px;line-height:1.15;overflow-wrap:break-word}
.hteam.is-flat .hteam-role br{display:none}
.hteam.is-flat .hteam-desc{font-size:16px;max-width:none}
.hteam.is-flat .hteam-copy{min-height:0}
.hteam.is-flat .hteam-controls{order:-1;justify-content:center;margin:0 0 24px}
.hteam.is-flat .hteam-btn{touch-action:manipulation}
.hteam:not(.is-anim):not(.is-flat) .hteam-pin{display:none}
.hteam:not(.is-anim):not(.is-flat) > .sr{position:static;width:auto;height:auto;clip:auto;white-space:normal;padding:64px var(--pad)}

@media(max-width:1000px){
  .nav-in{gap:12px}
  .nav-links{background:var(--nav);border-radius:0;padding:12px var(--pad) max(20px,env(safe-area-inset-bottom));max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;animation:none}
  .nav-links a.pill{height:auto;min-height:48px;padding:12px 0;border-radius:0;overflow:visible;width:100%;justify-content:flex-start;font-size:16px;background:transparent;color:var(--on-dark-3);font-weight:500}
  .nav-links a.pill .hover-circle,.nav-links a.pill .pill-label-hover{display:none}
  .nav-links a.pill .label-stack{overflow:visible}
  .nav-links a.pill:hover .pill-label,.nav-links a.pill[aria-current="page"] .pill-label{transform:none}
  .nav-links a.pill[aria-current="page"]{color:#fff}
  .nav-links a.nav-mobile-contact{display:flex;color:#fff;border-top:1px solid var(--line-d);margin-top:8px}
}
@media(max-width:860px){
  .hero-wall__title{width:calc(100% - 2 * var(--pad));max-width:640px;white-space:normal;font-size:clamp(26px,6.8vw,42px);line-height:1.2;text-wrap:balance}
  .hero-wall__title br{display:none}
  .hero-wall__logo{width:min(74vw,320px);bottom:calc(100% + 38px)}
  .hero-wall__scrim{background:linear-gradient(transparent,rgba(0,0,0,.25),transparent)}
  .hero,.hero.tall{aspect-ratio:auto;min-height:440px;height:calc(82svh - var(--nav-h));max-height:680px}
  .hero.hero-film{display:block;height:auto;min-height:0;max-height:none;aspect-ratio:auto}
  .hero-film .hero-media{position:relative;inset:auto;aspect-ratio:16/9}
  .hero-film .hero-media video{display:block;object-fit:contain}
  .hero-film .hero-in{padding:28px 0 36px;background:var(--ink)}
  .hero-film h1,.hero-film h1.h1-fit{font-size:clamp(28px,5vw,38px);line-height:1.15;max-width:22ch;white-space:normal}
  .hero h1{overflow-wrap:break-word}
  .mission-copy > h2{font-size:clamp(28px,6vw,36px);text-wrap:balance}
  .mission-copy > p{text-align:left;font-size:16px}
  .agencyrev__intro{min-height:0;padding:72px var(--pad)}
  .ecosys__detail{visibility:visible;opacity:1;pointer-events:auto;width:100%;text-align:center}
  .ecosys__detail dd{font-size:16px}
  .hteam.is-flat .hteam-copy{text-align:center}
  .hteam.is-flat .hteam-desc-note{margin-inline:auto}
  .hteam.is-flat .hteam-controls{display:grid;grid-template-columns:repeat(2,52px);gap:14px}
  .hteam.is-flat .hteam-count{grid-column:1/-1;text-align:center;margin-left:0}
  .flywheel--stacked .flywheel__nodes{padding-bottom:24px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;justify-content:flex-start}
  .flywheel--stacked .flywheel__node{scroll-snap-align:center}
  .flywheel--stacked .flywheel__preview{display:none}
  .wbstep__body,.letter p{text-align:left;font-size:16px}
  .letter p{-webkit-hyphens:manual;hyphens:manual}
  .scene[data-scene="software"] .ocard-body,.faq .a p,.fc-body p,.hardware-flip-front .hook{text-align:left}
  .ecosys__capability .ecosys__description{position:static;transform:none;width:100%;max-width:none;min-height:0;margin-top:12px;background:#f5f6f7}
  .ecosys__description p{font-size:15px;text-align:left}
  #hardware-category-details{background:#f5f3ee;-webkit-backdrop-filter:none;backdrop-filter:none}
  #hardware-category-details p{text-align:left}
  .app-preview-close,.hardware-preorder-close{width:44px;height:44px}
  .hardware-flip-toggle,.hardware-learn-more,.scene.software-single .population-photo-caption{min-height:44px}
  #whatbuild{padding-bottom:32px}
  .wbsteps{padding-top:32px}
  .lanyard{display:none}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
  .hardware-wear-options button{min-height:44px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .foot-grid .about{grid-column:1/-1}
  .foot li{margin-bottom:0}
  .foot li a{display:inline-flex;align-items:center;min-height:44px}
  .foot .base{letter-spacing:.06em;overflow-wrap:anywhere}
}
@media(max-width:480px){
  :root{--pad:20px}
  .emenu:not(.is-enhanced) ul{grid-template-columns:1fr;gap:16px}
  .hero-wall__title{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.rv.rv-pending{opacity:1;transform:none}}

/* Email draft forms and readable text in the light product sections. */
.form-fields{border:0;margin:0;padding:0;min-width:0}
.contact-delivery{max-width:760px;margin:0 auto 28px;font-size:16px;line-height:1.65}
.contact-delivery a,.formnote a{text-decoration:underline;text-underline-offset:3px}
.hardware-heading p{opacity:1;color:var(--on-light-3)}
.vote-send{display:block;text-align:center;text-decoration:none}
.band.light .flow b{opacity:1;color:var(--on-light-3)}
.signalbox .sigmeta .cnr{opacity:1;color:var(--on-dark-2)}

/* Contact forms are submitted inside Tally's isolated iframe. */
.contact-section > .wrap{max-width:840px}
.contact-section .contact-delivery{margin-bottom:32px}
.contact-section .formpanel{border:0;border-top:1px solid var(--line-l);padding:32px 0 0;margin-top:32px}
.contact-section .formintro{max-width:62ch;margin:0 0 28px;font-size:16px;line-height:1.7}
.contact-form-links{margin:32px auto 0;padding-top:24px;border-top:1px solid var(--line-l);font-size:13px;line-height:1.9;color:var(--on-light-2)}
.contact-form-links a,.contact-form-fallback a{text-decoration:underline;text-underline-offset:3px}
.contact-embed{display:block;width:100%;border:0;color-scheme:light}
.contact-form-status{font-size:14px;color:var(--on-light-2);margin:0 0 16px}
.contact-form-status:empty{display:none}
.contact-form-fallback{font-size:13px;line-height:1.65;margin:20px 0 0;color:var(--on-light-2)}