/* Opportune Studio. Tokens and components follow the approved design canvas (os.css).
   The homepage hero rules further down belong to the hero build and are left untouched. */
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('/fonts/cabinet-grotesk-light.woff2') format('woff2');
  font-weight:300;
  font-display:swap}
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('/fonts/cabinet-grotesk-regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap}
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('/fonts/cabinet-grotesk-medium.woff2') format('woff2');
  font-weight:500;
  font-display:swap}
@font-face{
  font-family:Geist;
  src:url('/fonts/geist-latin.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap}
@font-face{
  font-family:'Geist Mono';
  src:url('/fonts/geist-mono-latin.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap}

:root{
  /* primitives */
  --ink:#0b0b0b;
  --ink-2:#151515;
  --ink-3:#202020;
  --paper:#f5f5f2;
  --paper-2:#ebebe7;
  --white:#ffffff;
  --grey-500:#5f5f5b;
  --grey-400:#9a9a96;
  --grey-300:#c9c9c4;
  --line-light:#d8d8d3;
  --line-dark:#2b2b2b;
  --field-line:#8f8f8a;
  --signal:#ff5a1f;
  --signal-hover:#ff7a47;
  --error:#b4210f;
  --ink-hover:#2a2a2a;
  /* semantic: the names every page and the hero build against */
  --bg:var(--paper);
  --fg:var(--ink);
  --muted:var(--grey-500);
  --line:var(--line-light);
  --accent:var(--signal);
  --accent-text:var(--ink);
  --focus:var(--ink);
  --font-display:'Cabinet Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-body:Geist,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --radius-sheet:28px;
  --radius:6px;
  --chamfer:40px;
  --gutter:40px;
  --max:1440px;
  --nav-h:56px;
  --ease-snap:cubic-bezier(.16,1,.3,1);
  /* earlier names, kept as aliases */
  --sage:var(--paper-2);
  --yellow:#dcdcd7;
  --green:var(--ink);
  --display:var(--font-display);
  --body:var(--font-body)}
.dark,.card-media,.diagram,.next-case,.code-output,.queue-trace,.site-header.nav-dark{
  --accent-text:var(--signal);
  --focus:var(--signal)}
.site-header.nav-dark[data-scrolled]{
  --accent-text:var(--ink);
  --focus:var(--ink)}
.dark{
  background:var(--ink);
  color:var(--white);
  --fg:var(--white);
  --muted:var(--grey-400);
  --line:var(--line-dark)}

*,*::before,*::after{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  scrollbar-color:var(--ink) var(--paper)}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}
::selection{
  background:var(--accent);
  color:var(--ink)}
input,textarea{
  caret-color:var(--accent)}
[hidden]{
  display:none!important}
h1,h2,h3,h4,p,figure,dl,dd{
  margin:0}
h1,h2{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1;
  letter-spacing:-.03em;
  text-wrap:balance}
h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.2}
ul,ol{
  margin:0;
  padding:0;
  list-style:none}
a{
  color:inherit;
  text-decoration:none}
button,input,select,textarea{
  font:inherit;
  color:inherit;
  border-radius:0}
button{
  cursor:pointer}
button:disabled{
  cursor:not-allowed;
  opacity:.45}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent}
button,a{
  touch-action:manipulation}
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px}
img{
  display:block;
  max-width:100%;
  height:auto}
svg{
  width:18px;
  height:18px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round}
code,pre,kbd,samp{
  font-family:var(--font-mono);
  font-size:.92em}
a,button{
  transition:color .16s var(--ease-snap),background-color .16s var(--ease-snap),border-color .16s var(--ease-snap)}
a svg,button svg{
  transition:transform .16s var(--ease-snap)}

/* type */
.display-xl{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(52px,8.4vw,128px);
  line-height:.94;
  letter-spacing:-.035em;
  text-wrap:balance}
.display-l{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(40px,5.4vw,80px);
  line-height:.98;
  letter-spacing:-.03em;
  text-wrap:balance}
.display-m{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(30px,3.4vw,48px);
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:pretty}
.title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(22px,2vw,30px);
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance}
.title.light{
  font-weight:400}
.lead{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.55;
  color:var(--muted);
  text-wrap:pretty}
.body{
  color:var(--muted)}
.label,.mono-label{
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted)}
.counter{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted)}
.counter b{
  font-family:var(--font-display);
  font-weight:300;
  font-size:40px;
  letter-spacing:-.02em;
  color:var(--fg);
  line-height:1}
.accent-text{
  color:var(--accent-text)}

/* layout */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter)}
.section{
  padding-block:clamp(72px,9vw,144px)}
.section-head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:end;
  margin-bottom:clamp(40px,5vw,72px)}
.section-head>.label{
  grid-column:1/span 3;
  align-self:start}
.section-head>h2{
  grid-column:4/span 6}
.section-head>.aside{
  grid-column:10/span 3;
  justify-self:end}
.sheet{
  position:relative;
  z-index:2;
  background:var(--bg);
  border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  margin-top:calc(var(--radius-sheet) * -1)}
.chamfer{
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
.card-media{
  position:relative;
  background:var(--ink-2);
  color:var(--white);
  aspect-ratio:16/10;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 16px;
  border:1px solid var(--line);
  background:transparent;
  font-size:14px;
  white-space:nowrap}
.chip:hover{
  border-color:var(--fg)}
.chip[aria-pressed=true]{
  background:var(--ink);
  color:var(--white);
  border-color:var(--ink)}
.tag{
  display:inline-flex;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 10px;
  background:var(--paper-2);
  color:var(--ink)}
.dark .tag{
  background:var(--ink-3);
  color:var(--white)}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.skip-link{
  position:absolute;
  left:16px;
  top:-100px;
  z-index:100;
  padding:12px 20px;
  background:var(--ink);
  color:var(--white)}
.skip-link:focus{
  top:12px}

/* reveal: headings rise once when they first enter the viewport */
@keyframes os-rise{
  from{
    opacity:0;
    transform:translateY(24px)}
}
.is-revealed{
  animation:os-rise .5s var(--ease-snap) both}

/* logo: the 3D render, graphite on light bars and ceramic wherever the bar is dark */
.logo{
  display:inline-flex;
  align-items:center;
  color:var(--fg)}
.logo img{
  display:block;
  width:auto;
  height:24px}
.logo .logo-ceramic,
:is(.site-header.nav-dark:not([data-scrolled]),body:has(main>[data-nav-over]:first-child) .site-header:not([data-scrolled]):not([data-open])) .logo-graphite{
  display:none}
:is(.site-header.nav-dark:not([data-scrolled]),body:has(main>[data-nav-over]:first-child) .site-header:not([data-scrolled]):not([data-open])) .logo-ceramic{
  display:block}

/* navigation */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:stretch;
  height:var(--nav-h);
  border-bottom:1px solid var(--line);
  background:var(--bg);
  color:var(--fg);
  font-size:14px;
  transition:background-color .2s var(--ease-snap),color .2s var(--ease-snap)}
.site-header nav{
  display:contents}
.site-header>*,.site-header nav>*{
  display:flex;
  align-items:center;
  padding-inline:24px;
  border-left:1px solid var(--line)}
.site-header>.logo{
  border-left:0;
  padding-inline:var(--gutter) 24px;
  margin-right:auto}
.site-header .nav-link{
  gap:8px}
.site-header .nav-link:hover{
  text-decoration:underline;
  text-underline-offset:.3em}
.site-header .nav-link[aria-current=page]{
  box-shadow:inset 0 -2px 0 var(--accent-text)}
.site-header .nav-cta{
  gap:48px;
  padding-inline:24px 22px;
  border-left:0;
  background:var(--accent);
  color:var(--ink);
  font-weight:500;
  --focus:var(--ink)}
.site-header .nav-cta:hover{
  background:var(--signal-hover);
  color:var(--ink)}
.site-header .nav-cta:hover svg{
  transform:translateX(4px)}
.site-header .nav-cta:focus-visible{
  outline-offset:-5px}
.site-header>*:focus-visible,.site-header nav>*:focus-visible{
  outline-offset:-4px}
.site-header .nav-menu{
  display:none;
  font-weight:500}
.site-header.nav-dark{
  --line:rgba(255,255,255,.14);
  --muted:var(--grey-400);
  --fg:var(--white);
  background:var(--ink);
  color:var(--white)}
.site-header.nav-dark[data-scrolled]{
  --line:var(--line-light);
  --muted:var(--grey-500);
  --fg:var(--ink);
  background:var(--paper);
  color:var(--ink)}
/* A dark full-bleed hero can opt in to a transparent bar by carrying data-nav-over. */
body:has(main>[data-nav-over]:first-child) .site-header:not([data-scrolled]):not([data-open]){
  --line:rgba(255,255,255,.14);
  --muted:var(--grey-400);
  --fg:var(--white);
  --accent-text:var(--signal);
  --focus:var(--signal);
  margin-bottom:calc(var(--nav-h) * -1);
  background:transparent;
  color:var(--white)}
.cta-short{
  display:none}
.meta-bar a{
  display:inline-flex;
  align-items:center;
  gap:6px}
.meta-bar a svg{
  width:14px;
  height:14px}

/* buttons and links */
.btn,.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:52px;
  padding:0 18px 0 20px;
  background:var(--ink);
  color:var(--white);
  border:1px solid var(--ink);
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none}
.btn:hover:not(:disabled),.button:hover:not(:disabled){
  background:var(--ink-hover);
  border-color:var(--ink-hover);
  color:var(--white)}
.btn:hover:not(:disabled) svg,.button:hover:not(:disabled) svg{
  transform:translateX(4px)}
.btn-signal,.button.signal{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink)}
.btn-signal:hover:not(:disabled),.button.signal:hover:not(:disabled){
  background:var(--signal-hover);
  border-color:var(--signal-hover);
  color:var(--ink)}
.btn-ghost,.button.secondary{
  background:transparent;
  color:var(--fg);
  border-color:var(--line)}
.btn-ghost:hover:not(:disabled),.button.secondary:hover:not(:disabled){
  background:transparent;
  border-color:var(--fg);
  color:var(--fg)}
.dark .btn-ghost{
  border-color:rgba(255,255,255,.28)}
.btn-white{
  background:var(--white);
  color:var(--ink);
  border-color:var(--white)}
.btn-white:hover:not(:disabled){
  background:var(--paper-2);
  border-color:var(--paper-2);
  color:var(--ink)}
.quiet-button{
  min-height:44px;
  padding:0 12px;
  background:none;
  border:0;
  text-decoration:underline;
  text-underline-offset:.3em;
  font-size:15px}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  border-bottom:1px solid currentColor;
  padding-bottom:3px}
.text-link:hover{
  border-bottom-width:2px;
  padding-bottom:2px}
.text-link:hover svg{
  transform:translateX(4px)}
.footer a:hover{
  text-decoration:underline;
  text-underline-offset:.2em}
.go{
  width:48px;
  height:48px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line)}

/* breadcrumbs */
.crumbs{
  padding-block:20px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)}
.crumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px}
.crumbs li+li::before{
  content:'/';
  margin-right:10px}
.crumbs a:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.15em}
.crumbs [aria-current]{
  color:var(--fg)}

/* footer */
.footer{
  position:relative;
  z-index:2;
  background:var(--ink);
  color:var(--white)}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:72px;
  padding-top:96px}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px}
.footer-about{
  grid-column:1/span 4;
  display:flex;
  flex-direction:column;
  gap:20px}
.footer-about p:last-child{
  font-family:var(--font-display);
  font-weight:300;
  font-size:28px;
  line-height:1.15;
  max-width:16em}
.footer-cols nav:nth-of-type(1){
  grid-column:6/span 2}
.footer-cols nav:nth-of-type(2){
  grid-column:8/span 2}
.footer-cols nav:nth-of-type(3){
  grid-column:10/span 3}
.footer-cols h2{
  margin-bottom:18px}
.footer-cols ul{
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:15px;
  color:#d6d6d2}
.footer-cols a{
  display:inline-block;
  padding-block:2px}
.footer-logo{
  display:block;
  color:var(--white)}
.footer-logo img{
  display:block;
  width:100%;
  height:auto}
/* === logo light === */
/* A light that follows the pointer over the 3D logo renders. src/logo-light.js only moves it
   (--lx/--ly for the light, --tx/--ty for the tilt, --near as it reaches the sphere); hover and
   focus switch it on through --lit. The light layer is masked to the render's own alpha and blended
   with hard-light, where 50% grey changes nothing: white is the specular hotspot and darker grey the
   falloff that rakes across the far letters. The glow sits behind the render, round the sphere. */
@property --lit{syntax:'<number>';inherits:true;initial-value:0}
@property --lx{syntax:'<percentage>';inherits:true;initial-value:22%}
@property --ly{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --tx{syntax:'<number>';inherits:true;initial-value:0}
@property --ty{syntax:'<number>';inherits:true;initial-value:0}
@property --near{syntax:'<number>';inherits:true;initial-value:0}
[data-logo-light]{
  --sx:14.4%;
  --sy:22%;
  --mask:url(/brand/logo-3d-ceramic.webp);
  --tilt:9deg;
  --depth:320px;
  --hot:#cfcfcf;
  --shade:#6c6c6c;
  --reach:70px;
  --glow:28px;
  --glow-a:.45;
  transition:color .16s var(--ease-snap),--lit .4s var(--ease-snap),--lx .14s ease-out,--ly .14s ease-out,--tx .5s var(--ease-snap),--ty .5s var(--ease-snap),--near .3s ease-out}
.logo-art{
  position:relative;
  display:block;
  isolation:isolate;
  transform:perspective(var(--depth)) rotateX(calc(var(--ty) * var(--tilt) * -.45)) rotateY(calc(var(--tx) * var(--tilt)))}
.logo-art::before,
[data-light-ready] .logo-art::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:var(--lit)}
.logo-art::before{
  z-index:-1;
  left:var(--sx);
  top:var(--sy);
  width:var(--glow);
  aspect-ratio:1;
  border-radius:50%;
  translate:calc(-50% - var(--tx) * 3%) calc(-50% - var(--ty) * 3%);
  scale:calc(.85 + var(--near) * .35);
  background:radial-gradient(closest-side,rgb(255 90 31 / var(--glow-a)),rgb(255 90 31 / calc(var(--glow-a) * .4)) 22%,rgb(255 90 31 / calc(var(--glow-a) * .1)) 55%,rgb(255 90 31 / 0))}
[data-light-ready] .logo-art::after{
  inset:0;
  -webkit-mask:var(--mask) center/100% 100% no-repeat;
  mask:var(--mask) center/100% 100% no-repeat;
  mix-blend-mode:hard-light;
  background:
    radial-gradient(3.2% 17% at var(--sx) var(--sy),rgb(255 150 96 / calc(.2 + var(--near) * .55)),rgb(255 150 96 / 0)),
    linear-gradient(108deg,rgb(255 255 255 / 0) calc(var(--lx) - 6%),rgb(255 255 255 / .34) var(--lx),rgb(255 255 255 / 0) calc(var(--lx) + 6%)),
    radial-gradient(circle var(--reach) at var(--lx) var(--ly),var(--hot),#a8a8a8 7%,#949494 24%,#808080 52%,var(--shade))}
@media(hover:hover){
  [data-logo-light]:hover{
    --lit:1}
}
.logo:focus-visible{
  --lit:1}
.footer-logo{
  --mask:url(/brand/logo-3d-footer.webp);
  --tilt:4deg;
  --depth:1800px;
  --hot:#e6e6e6;
  --shade:#585858;
  --reach:min(46vw,620px);
  --glow:46%;
  --glow-a:.55}
.footer-logo .logo-art::before{
  scale:calc(.7 + var(--near) * .45)}
@keyframes logo-sweep{
  0%{--lit:0;--lx:-20%;--ly:-30%}
  30%,65%{--lit:1}
  100%{--lit:0;--lx:115%;--ly:80%}
}
[data-logo-light][data-sweep]{
  animation:logo-sweep 2.2s cubic-bezier(.45,0,.25,1) both}
@media(prefers-reduced-motion:reduce){
  [data-logo-light]{
    transition:none}
  .logo-art{
    transform:none}
  [data-logo-light][data-sweep]{
    animation:none}
}
@media(forced-colors:active){
  .logo-art::before,
  [data-light-ready] .logo-art::after{
    display:none}
}
/* === end logo light === */
.meta-bar{
  display:flex;
  flex-wrap:wrap;
  gap:12px 40px;
  align-items:center;
  padding-block:20px;
  border-top:1px solid var(--line-dark);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey-400)}
.meta-bar a{
  margin-left:auto;
  color:var(--white)}
.meta-bar a:hover{
  text-decoration:underline;
  text-underline-offset:.2em}
/* CC BY 4.0 attribution for the hero's device models. */
.meta-bar .footer-credit a{
  margin-left:0;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.2em}
.meta-bar .footer-credit a:hover{
  color:var(--white)}

/* shared sections */
.intro{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:end;
  padding-block:clamp(64px,8vw,120px) 48px}
.intro>.label{
  grid-column:1/-1}
.intro>h1{
  grid-column:1/span 8}
.intro>.lead{
  grid-column:9/span 4}
.callout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:end;
  padding-block:clamp(72px,9vw,128px);
  border-top:1px solid var(--line)}
.callout>h2{
  grid-column:1/span 7}
.callout>div{
  grid-column:9/span 4;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:flex-start}
.cta{
  position:relative;
  z-index:2;
  background:var(--accent);
  color:var(--ink);
  --fg:var(--ink);
  --muted:var(--ink);
  --accent-text:var(--ink);
  --focus:var(--ink)}
.cta .wrap{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:end;
  padding-block:clamp(80px,10vw,160px)}
.cta h2{
  grid-column:1/span 8}
.cta .side{
  grid-column:9/span 4;
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:flex-start}
.cta .side>p:not(.label){
  font-size:19px;
  line-height:1.5}
.page-top{
  position:relative}
.page-top+.sheet{
  margin-top:calc(var(--radius-sheet) * -1)}

/* home, below the hero */
.statement{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
  row-gap:32px}
.statement .label{
  grid-column:1/span 3;
  padding-top:14px}
.statement .display-m{
  grid-column:4/span 9}
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding-block:28px}
.marquee-track{
  display:flex;
  width:max-content;
  animation:os-marquee 48s linear infinite}
.marquee ul{
  display:flex;
  align-items:center;
  gap:40px;
  padding-right:40px;
  font-family:var(--font-display);
  font-weight:300;
  font-size:44px;
  letter-spacing:-.02em;
  white-space:nowrap}
.marquee li{
  display:flex;
  align-items:center;
  gap:40px}
.marquee li::after{
  content:'';
  width:10px;
  height:10px;
  background:var(--accent)}
.marquee:hover .marquee-track{
  animation-play-state:paused}
@keyframes os-marquee{
  to{
    transform:translateX(-50%)}
}
.cap-open{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
  row-gap:28px;
  padding-block:40px;
  border-top:1px solid var(--line)}
.cap-open .counter{
  grid-column:1/span 3;
  align-self:start}
.cap-open .card-media{
  grid-column:4/span 5}
.cap-open .cap-copy{
  grid-column:9/span 4;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-self:center;
  align-items:flex-start}
.cap-row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
  align-items:center;
  min-height:112px;
  border-top:1px solid var(--line)}
.cap-row:last-child{
  border-bottom:1px solid var(--line)}
.cap-row .counter{
  grid-column:1/span 3}
.cap-row .title{
  grid-column:4/span 5;
  font-weight:400;
  font-size:clamp(24px,2.4vw,34px)}
.cap-row .body{
  grid-column:9/span 3;
  font-size:15px}
.cap-row .go{
  grid-column:12;
  justify-self:end}
.cap-row:hover .title{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.15em}
.cap-row:hover .go{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white)}
.schema{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 28px;
  width:72%;
  font-family:var(--font-mono);
  font-size:12px}
.schema span{
  display:flex;
  justify-content:space-between;
  padding:12px 14px;
  border:1px solid #3a3a3a;
  background:#1b1b1b}
.schema em{
  font-style:normal;
  color:var(--accent-text)}
.work-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px}
.work-feature{
  grid-column:1/span 7}
.work-feature .card-media{
  aspect-ratio:4/3.4}
.work-feature .title{
  font-size:clamp(26px,2.6vw,36px)}
.work-side{
  grid-column:8/span 5;
  display:flex;
  flex-direction:column;
  gap:40px}
.work-side .card-media{
  --chamfer:28px}
.project-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0}
.project-card .card-link{
  display:flex;
  flex-direction:column;
  gap:16px}
.project-card .meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px}
.project-card .title{
  font-weight:400}
.project-card .card-media>*{
  transition:transform .6s var(--ease-snap)}
.project-card .card-link:hover .card-media>*{
  transform:scale(1.03)}
.project-card .card-link:hover .title{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.15em}
.project-card .card-link:focus-visible{
  outline-offset:6px}
.event-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:76%;
  font-family:var(--font-mono);
  font-size:13px}
.event-lines span{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:#1b1b1b;
  border:1px solid #2e2e2e;
  color:#d6d6d2}
.event-lines b{
  font-weight:400}
.event-lines em{
  font-style:normal;
  color:#bdbdb9;
  text-align:right}
.event-lines .ok em{
  color:var(--white)}
.event-lines .hot{
  border-color:var(--accent)}
.event-lines .hot em{
  color:var(--accent-text)}
.net{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:12px}
.net b{
  padding:10px 12px;
  border:1px solid #3a3a3a;
  background:#1b1b1b;
  font-weight:400}
.net b.core{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink)}
.net hr{
  width:28px;
  margin:0;
  border:0;
  border-top:1px dashed #666}
.net div{
  display:flex;
  flex-direction:column;
  gap:8px}
.object-mark{
  position:relative;
  width:220px;
  height:230px;
  transform:rotate(-18deg)}
.object-mark i{
  position:absolute;
  display:block;
  width:190px;
  height:80px;
  top:calc(var(--i)*12px);
  left:calc(var(--i)*2px);
  border:6px solid #e9e9e6;
  border-radius:50%;
  transform:rotate(calc(var(--i)*2deg))}
.object-mark i:nth-child(7){
  border-color:var(--accent)}
.card-media img{
  width:70%;
  height:auto}

/* idea cloud: every automation idea as a chip; the dialog shows one at a time */
.ideas-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px 48px;
  margin-bottom:24px}
.ideas-head>div{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:760px}
.idea-cloud{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px}
.idea-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px}
/* the 3D stream: a full-bleed WebGL stage, fading out at top and bottom */
.idea-stage{
  position:relative;
  width:100%;
  height:clamp(520px,74vh,840px)}
.idea-stage canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:pan-y;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.idea-stage-hint{
  position:absolute;
  left:var(--gutter);
  bottom:18px;
  pointer-events:none}
.idea-motion{
  position:absolute;
  right:var(--gutter);
  bottom:8px;
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(11,11,11,.6);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase}
.idea-motion:hover{
  border-color:var(--white)}
/* with the stream running, the chips become a quick-pick strip underneath */
.idea-cloud[data-stream=on] .idea-chips{
  flex-wrap:nowrap;
  justify-content:flex-start;
  max-width:none;
  width:100%;
  overflow-x:auto;
  padding:4px var(--gutter) 12px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
.idea-cloud[data-stream=on] .idea-chip{
  flex:none;
  max-width:none}
.idea-cloud[data-stream=on] .idea-chip a{
  padding:9px 14px;
  font-size:14px;
  font-weight:400;
  animation:none}
.idea-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px}
.idea-filters button{
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--grey-300);
  font-size:14px;
  transition:background-color .16s,color .16s,border-color .16s}
.idea-filters button:hover{
  border-color:var(--white);
  color:var(--white)}
.idea-filters button[aria-pressed=true]{
  background:var(--white);
  border-color:var(--white);
  color:var(--ink)}
.idea-status{
  min-height:1.4em}
.idea-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px 14px;
  max-width:1180px;
  padding-block:16px 8px}
.idea-chip a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  color:var(--white);
  font-family:var(--font-display);
  font-weight:400;
  font-size:15px;
  line-height:1.15;
  text-decoration:none;
  transition:background-color .16s,border-color .16s,color .16s,opacity .3s;
  animation:idea-drift 6s ease-in-out calc(var(--i) * -.37s) infinite alternate}
.idea-chip.size-2 a{
  padding:12px 18px;
  font-size:19px}
.idea-chip.size-3 a{
  padding:14px 22px;
  border-color:rgba(255,255,255,.34);
  font-size:clamp(20px,2vw,26px);
  font-weight:500}
.idea-chip a:hover{
  border-color:var(--signal);
  background:rgba(255,90,31,.08)}
.idea-chip a:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px}
.idea-chip.is-dimmed a{
  opacity:.22}
.idea-guide-dot{
  display:inline-block;
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--signal)}
@keyframes idea-drift{
  from{transform:translateY(-3px)}
  to{transform:translateY(3px)}}
.idea-note{
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 12px;
  margin-top:40px;
  text-align:center;
  font-size:14px;
  color:var(--muted)}
.idea-details{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
  width:100%;
  margin-top:24px}
.idea-detail{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px;
  border:1px solid var(--line)}
.idea-detail .title{
  font-weight:400}
.idea-services ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px}
.idea-services li{
  padding:5px 9px;
  background:var(--paper-2);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase}
.idea-details .idea-services li{
  background:var(--ink-3);
  color:var(--white)}
.idea-trigger,.idea-result{
  display:flex;
  flex-direction:column;
  gap:6px}
.idea-result{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:300;
  line-height:1.2}
.idea-steps{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line)}
.idea-steps li{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:8px;
  padding-block:10px;
  border-bottom:1px solid var(--line)}
.idea-steps small{
  padding-top:3px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted)}
.idea-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  margin-top:8px}
.idea-dialog{
  --bg:var(--paper);
  --fg:var(--ink);
  --muted:var(--grey-500);
  --line:var(--line-light);
  --accent-text:var(--ink);
  --focus:var(--ink);
  width:min(640px,calc(100% - 32px));
  max-height:calc(100svh - 32px);
  padding:0;
  border:0;
  background:var(--paper);
  color:var(--ink);
  overflow:auto}
.idea-dialog::backdrop{
  background:rgba(11,11,11,.72);
  backdrop-filter:blur(4px)}
.idea-dialog[open]{
  animation:idea-open .32s var(--ease-snap)}
@keyframes idea-open{
  from{opacity:0;transform:translateY(16px)}}
.idea-dialog .idea-detail{
  padding:44px 40px 28px;
  border:0}
.idea-dialog-nav{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-top:1px solid var(--line);
  background:var(--paper)}
.idea-close{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink)}
.idea-close svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round}
@media(max-width:760px){
  .idea-stage{
    height:480px}
  .idea-stage-hint{
    display:none}
  .idea-chips{
    gap:8px}
  .idea-chip{
    max-width:calc(50% - 4px)}
  .idea-chip.size-3{
    max-width:100%}
  .idea-chip a{
    padding:8px 11px;
    font-size:13px}
  .idea-chip.size-2 a{
    padding:9px 12px;
    font-size:15px}
  .idea-chip.size-3 a{
    padding:11px 15px;
    font-size:17px}
  .idea-dialog .idea-detail{
    padding:56px 20px 20px}
  .idea-dialog-nav .btn{
    min-height:44px;
    padding-inline:14px;
    gap:12px}}
@media(prefers-reduced-motion:reduce){
  .idea-chip a,.idea-dialog[open]{
    animation:none}}
/* automation flow diagrams, used by the guides */
.automation-flow{
  display:flex;
  flex-direction:column;
  gap:36px}
.automation-intro{
  display:flex;
  flex-direction:column;
  gap:16px}
.automation-intro .lead{
  max-width:620px}
.automation-steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px}
.automation-steps li{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0}
.automation-symbol{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #3a3a3a;
  background:var(--ink-2);
  color:var(--white)}
.automation-symbol svg{
  width:24px;
  height:24px}
.automation-steps li:last-child .automation-symbol{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink)}
.automation-steps li:not(:last-child)::after{
  content:'';
  position:absolute;
  top:28px;
  left:68px;
  right:4px;
  border-top:1px dashed #555}
.automation-step-copy{
  display:flex;
  flex-direction:column;
  gap:4px}
.automation-step-copy small{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey-400)}
.automation-step-copy :is(h3,h4){
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  line-height:1.3}
.automation-step-copy p{
  font-size:14px;
  line-height:1.5;
  color:#bdbdb9}
.automation-result{
  display:flex;
  gap:32px;
  align-items:baseline;
  padding-block:24px;
  border-block:1px solid var(--line)}
.automation-result .label{
  flex:none}
.automation-result>p:not(.label){
  font-family:var(--font-display);
  font-weight:300;
  font-size:26px;
  line-height:1.2;
  color:var(--white)}
.automation-flow .text-link{
  align-self:flex-start}
.principles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px}
.principles li{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:24px;
  border-top:1px solid var(--line)}

/* work index */
.work-tools{
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  align-items:end;
  justify-content:space-between;
  padding-block:24px;
  border-block:1px solid var(--line);
  margin-bottom:24px}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.search-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:min(360px,100%)}
.search-field span{
  font-size:13px;
  font-weight:500}
.search-field input,.field input,.field textarea,.bench select{
  border:1px solid var(--field-line);
  background:var(--white);
  color:var(--ink);
  font-size:16px}
.search-field input{
  height:48px;
  padding:0 14px}
.search-field input:focus,.field input:focus,.field textarea:focus,.bench select:focus{
  outline:2px solid var(--focus);
  outline-offset:0;
  border-color:var(--ink)}
::placeholder{
  color:#6b6b67;
  opacity:1}
.results-count{
  margin-bottom:32px}
.automation-directory .intro{
  padding-bottom:clamp(56px,7vw,96px)}
.dark .section-head>.aside.body{
  justify-self:start;
  max-width:300px}
.work-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:64px 24px}
.work-cards .card-media{
  aspect-ratio:16/10.5}
.work-cards .title{
  font-size:clamp(24px,2.2vw,32px)}
.work-cards .body{
  max-width:560px}
.empty-results{
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
  padding-block:64px}

/* case studies */
.case-head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:end;
  padding-block:56px 112px}
.case-head>div:first-child{
  grid-column:1/span 8;
  display:flex;
  flex-direction:column;
  gap:24px}
.case-head>div:last-child{
  grid-column:9/span 4;
  display:flex;
  flex-direction:column;
  gap:20px}
.case-main{
  display:flex;
  flex-direction:column;
  gap:clamp(72px,9vw,128px);
  padding-block:72px clamp(72px,9vw,128px)}
.bench{
  padding:40px;
  background:var(--white);
  border:1px solid var(--line)}
.bench-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px}
.bench-controls{
  grid-column:1/span 4;
  display:flex;
  flex-direction:column;
  gap:24px}
.bench-state{
  grid-column:5/span 8;
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0}
.demo-heading{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(28px,2.6vw,36px);
  line-height:1.08;
  letter-spacing:-.02em}
.bench p{
  max-width:62ch}
.bench .body{
  font-size:15px}
.bench fieldset{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  margin:0;
  padding:0;
  border:0}
.bench legend{
  margin-bottom:10px}
.toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:52px;
  padding:0 14px;
  border:1px solid var(--line);
  font-size:15px;
  cursor:pointer}
.toggle input,.check-control input{
  width:22px;
  height:22px;
  margin:0;
  accent-color:var(--ink)}
.check-control{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-size:15px}
.actions{
  display:flex;
  flex-direction:column;
  gap:8px}
.actions .btn,.actions .button{
  width:100%}
.bench-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px}
.bench-row>div{
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.log-wrap{
  overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  text-align:left;
  font-variant-numeric:tabular-nums}
caption{
  padding-bottom:12px;
  text-align:left;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  caption-side:top}
caption span{
  float:right}
th,td{
  padding:14px 12px;
  border-top:1px solid var(--line);
  text-align:left;
  vertical-align:top}
thead th{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted)}
tbody th{
  font-weight:400}
tbody th code{
  margin-right:10px;
  font-size:13px}
tbody th span,td small{
  display:block;
  color:var(--muted);
  font-size:13px}
#event-log td:first-child{
  font-family:var(--font-mono);
  font-size:13px}
.queue-table tr td:nth-child(2){
  font-family:var(--font-mono);
  font-size:12px}
.queue-table tr td:nth-child(2)::before{
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:8px;
  background:var(--grey-400)}
.queue-table tr[data-state=complete] td:nth-child(2)::before{
  background:var(--ink)}
.queue-table tr:is([data-state=retry],[data-state=parked]) td:nth-child(2)::before{
  background:var(--accent)}
.queue-trace{
  padding:20px 22px;
  background:var(--ink);
  color:#e9e9e6}
.queue-trace summary{
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--white)}
.queue-trace summary::marker{
  color:var(--accent-text)}
.queue-trace>p{
  margin:10px 0 14px;
  font-size:13px;
  color:var(--grey-400)}
.queue-trace ol{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.6}
.queue-trace li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:12px}
.queue-trace li span:first-child{
  color:var(--grey-400)}
.queue-summary{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)}
.pipeline-flow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase}
.pipeline-flow>span{
  flex:1;
  padding:14px 8px;
  text-align:center;
  border:1px solid var(--line)}
.pipeline-flow>span:last-of-type{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white)}
.code-output{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px;
  background:var(--ink);
  color:#e9e9e6;
  min-width:0}
.code-output>span{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grey-400)}
.code-output pre{
  margin:0 0 12px;
  font-size:13px;
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.bench label:not(.toggle):not(.check-control){
  display:block;
  font-size:14px;
  font-weight:500}
.bench select{
  width:100%;
  height:52px;
  padding:0 12px}
.schema-map{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px}
.schema-map button{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:18px;
  text-align:left;
  background:var(--paper);
  border:1px solid var(--line);
  overflow-wrap:anywhere}
.schema-map button:hover{
  border-color:var(--ink)}
.schema-map button[aria-pressed=true]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white)}
.schema-map strong{
  font:500 14px var(--font-mono)}
.schema-map span{
  font:12px/1.5 var(--font-mono);
  opacity:.75}
.entity-detail{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:18px 40px;
  padding-top:32px}
.entity-detail h2{
  grid-column:1}
.entity-detail p{
  grid-column:2;
  grid-row:1/3;
  color:var(--muted)}
.entity-detail pre{
  grid-column:1/-1;
  margin:0;
  padding:20px;
  overflow:auto;
  background:var(--ink);
  color:#e9e9e6;
  font-size:13px}
.entity-detail #entity-relation{
  grid-column:1/-1;
  grid-row:auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase}
.object-stage{
  position:relative;
  height:420px;
  min-width:0;
  background:var(--ink-2)}
.object-stage canvas{
  display:block;
  width:100%;
  height:100%}
.object-fallback{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  height:100%;
  color:var(--white);
  font-size:13px}
.object-controls output{
  float:right;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums}
.object-controls input[type=range]{
  width:100%;
  accent-color:var(--accent)}
.object-description{
  font-size:14px;
  color:var(--muted)}
.status-line{
  font-size:15px}
.flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line)}
.flow li{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:28px 24px;
  border-left:1px solid var(--line)}
.flow li:first-child{
  border-left:0}
.flow li:last-child{
  background:var(--ink);
  color:var(--white);
  --muted:var(--grey-400)}
.story{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px}
.story>div:first-child{
  grid-column:1/span 4;
  display:flex;
  flex-direction:column;
  gap:28px}
.story>div:last-child{
  grid-column:6/span 7;
  display:flex;
  flex-direction:column;
  gap:14px}
.story h3{
  margin-top:20px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  line-height:1.2}
.story h3:first-child{
  margin-top:0}
.story .body{
  max-width:68ch}
.next-case{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:center;
  padding:48px 40px;
  background:var(--ink);
  color:var(--white);
  --muted:var(--grey-400)}
.next-case>div{
  grid-column:1/span 9;
  display:flex;
  flex-direction:column;
  gap:12px}
.next-case .go{
  grid-column:12;
  justify-self:end;
  width:72px;
  height:72px;
  border:0;
  background:var(--accent);
  color:var(--ink)}
.next-case .go svg{
  width:26px;
  height:26px}
.next-case:hover .go{
  background:var(--signal-hover)}
.next-case:hover .go svg{
  transform:translateX(4px)}
.next-case:focus-visible{
  outline-offset:4px}
/* The connected-spaces study embeds the hero's interactive system; give it the bench ground. */
.case .interactive-section>.system{
  padding:0;
  background:transparent;
  border-radius:0}

/* automation directory and guides */
.dir{
  border-top:1px solid var(--line)}
.dir a{
  display:grid;
  grid-template-columns:72px minmax(0,4fr) minmax(0,4fr) 56px;
  gap:24px;
  align-items:center;
  min-height:120px;
  border-bottom:1px solid var(--line)}
.dir .ico{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:var(--white)}
.dir .ico svg{
  width:24px;
  height:24px}
.dir-groups{
  display:flex;
  flex-direction:column;
  gap:56px}
.dir-area{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:16px;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(28px,3vw,40px);
  letter-spacing:-.02em}
.dir h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.1}
.dir .go{
  justify-self:end}
.dir-group:first-child .dir a:first-child .go{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink)}
.dir a:hover h4{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.15em}
.dir a:hover .go svg{
  transform:translateX(4px)}
.dir-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:28px}
.guide-head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:end;
  padding-block:48px 72px}
.guide-head>div:first-child{
  grid-column:1/span 8;
  display:flex;
  flex-direction:column;
  gap:24px}
.guide-head>div:last-child{
  grid-column:9/span 4;
  display:flex;
  flex-direction:column;
  gap:16px}
.guide-main{
  display:flex;
  flex-direction:column;
  gap:clamp(72px,9vw,120px);
  padding-bottom:clamp(72px,9vw,128px)}
.diagram{
  padding:clamp(28px,4vw,56px);
  background:var(--ink);
  color:var(--white);
  --fg:var(--white);
  --muted:var(--grey-400);
  --line:var(--line-dark)}
.diagram .automation-flow{
  gap:40px}
.diagram .automation-steps{
  gap:20px}
.diagram .automation-symbol{
  width:64px;
  height:64px}
.diagram .automation-symbol svg{
  width:26px;
  height:26px}
.diagram .automation-steps li:not(:last-child)::after{
  top:32px;
  left:76px;
  right:0}
.diagram .automation-step-copy{
  gap:8px}
.diagram .automation-step-copy h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:20px;
  line-height:1.15}
.diagram .automation-result{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  padding-top:32px;
  padding-bottom:0;
  border-bottom:0}
.diagram .automation-result .label{
  grid-column:1/span 2}
.diagram .automation-result>p:nth-child(2){
  grid-column:3/span 6;
  font-size:30px;
  line-height:1.15}
.diagram .automation-result>p:nth-child(3){
  grid-column:9/span 4;
  font-family:var(--font-body);
  font-size:14px;
  color:#bdbdb9}
.inputs{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line)}
.inputs li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:12px;
  padding-block:14px;
  border-bottom:1px solid var(--line);
  color:var(--muted)}
.inputs li span{
  padding-top:3px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted)}
.faq details{
  border-top:1px solid var(--line)}
.faq details:last-child{
  border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:72px;
  padding-block:12px;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.2}
.faq summary::-webkit-details-marker{
  display:none}
.faq summary:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.15em}
.faq summary svg{
  transition:transform .2s var(--ease-snap)}
.faq details[open] summary svg{
  transform:rotate(45deg)}
.faq details p{
  max-width:640px;
  padding-bottom:24px}
.related{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px}
.related>.label{
  grid-column:1/-1}
.rel{
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start}
.rel .card-media{
  --chamfer:28px;
  width:100%;
  padding:24px;
  text-align:center}
.rel:nth-of-type(2) .card-media,.rel:nth-of-type(3) .card-media{
  --accent-text:var(--ink);
  --focus:var(--ink)}
.rel:nth-of-type(2) .card-media{
  background:var(--paper-2);
  color:var(--ink);
  --muted:var(--ink)}
.rel:nth-of-type(3) .card-media{
  background:var(--accent);
  color:var(--ink);
  --muted:var(--ink)}
.rel .card-media .label{
  color:inherit}
.rel:hover .title{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.15em}
.disclosure{
  max-width:42ch}
.disclosure a{
  text-decoration:underline;
  text-underline-offset:.25em}

/* studio */
.studio-head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  padding-block:clamp(72px,9vw,128px) clamp(96px,10vw,160px)}
.studio-head h1{
  grid-column:1/span 9}
.studio-head .statement-copy{
  grid-column:6/span 7;
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:56px}
.studio-head .statement-copy p:first-child{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.15;
  color:var(--white)}
.studio-main{
  display:flex;
  flex-direction:column;
  gap:clamp(96px,10vw,160px);
  padding-block:clamp(72px,9vw,128px)}
.interests{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px}
.interests li,.process li{
  display:flex;
  flex-direction:column;
  gap:16px}
.interests li{
  padding-top:24px;
  border-top:1px solid var(--line)}
.interests .ico{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:var(--white)}
.interests .ico svg{
  width:24px;
  height:24px}
.interests li:first-child .ico{
  background:var(--accent);
  color:var(--ink)}
.long{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px}
.long>div:first-child{
  grid-column:1/span 5;
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:flex-start}
.long>div:last-child{
  grid-column:7/span 6;
  display:flex;
  flex-direction:column;
  gap:20px;
  font-size:18px;
  line-height:1.6}
.process{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line)}
.process li{
  gap:14px;
  padding:28px 24px 0 0}
.process li+li{
  padding-left:24px;
  border-left:1px solid var(--line)}

/* contact form fields (the conversation's own styles are in contact/contact.css) */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0}
.field label{
  font-size:14px;
  font-weight:500}
.field input{
  height:52px;
  padding:0 14px}
.field textarea{
  min-height:180px;
  padding:14px;
  resize:vertical}
.field-hint{
  font-size:13px;
  color:var(--muted)}
.field-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.form-trap{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap}
.turnstile{
  min-height:65px;
  width:100%;
  overflow:hidden}
.form-status{
  min-height:22px;
  font-size:14px}
.form-status[data-error=true]{
  color:var(--error)}
.form-notice{
  font-size:14px}
.privacy-note{
  font-size:13px;
  color:var(--muted)}
.privacy-note a{
  text-decoration:underline;
  text-underline-offset:.25em}

/* not found */
.page-dark{
  background:var(--ink)}
.not-found{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:center;
  min-height:calc(100vh - var(--nav-h));
  padding-block:clamp(72px,9vw,128px)}
.not-found>div:first-child{
  grid-column:1/span 7;
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:flex-start}
.not-found .buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px}
.not-found>div:last-child{
  grid-column:8/span 5;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px}
.node{
  width:120px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #3a3a3a;
  background:var(--ink-2);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#bdbdb9}
.node.hot{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink)}
.gap{
  width:140px;
  display:flex;
  align-items:center;
  gap:10px}
.gap span{
  flex:1;
  border-top:1px dashed #666}
.gap b{
  font-family:var(--font-display);
  font-weight:300;
  font-size:28px;
  color:var(--accent-text)}

/* tablet */
@media(max-width:1100px){
  :root{
    --gutter:32px}
  .site-header>*,.site-header nav>*{
    padding-inline:18px}
  .site-header .nav-cta{
    gap:28px}
  .automation-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:28px}
  .automation-steps li:nth-child(3n)::after{
    display:none}
  .dir a{
    grid-template-columns:56px minmax(0,1fr) 48px}
  .dir a .body{
    grid-column:2;
    grid-row:2;
    margin-top:-12px;
    padding-bottom:16px}
  .dir .go{
    grid-column:3;
    grid-row:1/span 2}
  .interests,.principles{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-about{
    grid-column:1/-1}
  .footer-cols nav:nth-of-type(1){
    grid-column:1/span 4}
  .footer-cols nav:nth-of-type(2){
    grid-column:5/span 4}
  .footer-cols nav:nth-of-type(3){
    grid-column:9/span 4}
}

/* phones */
@media(max-width:760px){
  :root{
    --gutter:20px;
    --chamfer:24px;
    --radius-sheet:20px;
    --nav-h:52px}
  .site-header .nav-link{
    display:none}
  .site-header .nav-menu{
    display:flex;
    min-width:72px;
    justify-content:center}
  .site-header>.logo{
    padding-inline:var(--gutter) 12px}
  .site-header .logo img{
    height:20px}
  .site-header .nav-cta{
    gap:10px;
    padding-inline:16px}
  .cta-long{
    display:none}
  .cta-short{
    display:inline}
  .site-header[data-open]{
    flex-wrap:wrap;
    height:auto;
    background:var(--bg)}
  .site-header.nav-dark[data-open]{
    background:var(--ink)}
  .site-header[data-open]>*{
    height:var(--nav-h)}
  .site-header[data-open] .nav-link{
    display:flex;
    order:5;
    flex:0 0 100%;
    height:64px;
    padding-inline:var(--gutter);
    border-left:0;
    border-top:1px solid var(--line);
    font-family:var(--font-display);
    font-weight:300;
    font-size:28px;
    letter-spacing:-.02em}
  .site-header[data-open] .nav-link[aria-current=page]{
    box-shadow:inset 3px 0 0 var(--accent-text)}
  .section-head{
    grid-template-columns:minmax(0,1fr)}
  .section-head>.label,.section-head>h2,.section-head>.aside{
    grid-column:1;
    justify-self:start}
  .intro>h1,.intro>.lead,.callout>h2,.callout>div,.cta h2,.cta .side{
    grid-column:1/-1}
  .statement .label,.statement .display-m{
    grid-column:1/-1}
  .marquee ul{
    gap:28px;
    padding-right:28px;
    font-size:28px}
  .marquee li{
    gap:28px}
  .cap-open .counter,.cap-open .card-media,.cap-open .cap-copy{
    grid-column:1/-1}
  .cap-row{
    grid-template-columns:minmax(0,1fr) 48px;
    row-gap:8px;
    padding-block:20px}
  .cap-row .counter,.cap-row .title,.cap-row .body{
    grid-column:1}
  .cap-row .go{
    grid-column:2;
    grid-row:1/span 3}
  .schema{
    width:84%;
    gap:10px;
    font-size:11px}
  .work-feature,.work-side{
    grid-column:1/-1}
  .work-side{
    gap:48px}
  .work-feature .card-media{
    aspect-ratio:4/3.6}
  .event-lines{
    width:86%;
    font-size:11px}
  .event-lines span{
    padding:11px 12px}
  .net{
    gap:8px;
    font-size:10px}
  .net hr{
    width:14px}
  .automation-steps,.diagram .automation-steps{
    grid-template-columns:minmax(0,1fr);
    gap:0}
  .automation-steps li{
    flex-direction:row;
    align-items:center;
    gap:16px;
    padding-block:12px;
    border-bottom:1px solid var(--line-dark)}
  .diagram .automation-steps li{
    align-items:flex-start;
    padding-block:16px}
  .automation-steps li::after{
    display:none}
  .automation-symbol,.diagram .automation-symbol{
    width:48px;
    height:48px}
  .automation-result{
    flex-direction:column;
    gap:10px}
  .automation-result>p:not(.label){
    font-size:22px}
  .diagram .automation-result{
    display:flex}
  .principles,.interests,.process{
    grid-template-columns:minmax(0,1fr)}
  .work-tools{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch}
  .filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:none}
  .search-field{
    width:100%}
  .work-cards{
    grid-template-columns:minmax(0,1fr);
    gap:48px}
  .work-cards .project-card .meta>.label{
    display:none}
  .case-head>div:first-child,.case-head>div:last-child,.bench-controls,.bench-state,.story>div:first-child,.story>div:last-child,.guide-head>div:first-child,.guide-head>div:last-child{
    grid-column:1/-1}
  .case-head{
    padding-block:32px 72px}
  .bench{
    padding:20px}
  .schema-map{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .entity-detail{
    display:flex;
    flex-direction:column;
    gap:14px}
  .pipeline-flow{
    flex-direction:column;
    align-items:stretch;
    gap:6px}
  .pipeline-flow>svg{
    align-self:center;
    transform:rotate(90deg)}
  .flow{
    grid-template-columns:minmax(0,1fr)}
  .flow li{
    border-left:0;
    border-top:1px solid var(--line)}
  .flow li:first-child{
    border-top:0}
  .next-case{
    padding:32px 24px}
  .next-case>div{
    grid-column:1/span 9}
  .next-case .go{
    width:56px;
    height:56px}
  .dir a{
    grid-template-columns:48px minmax(0,1fr) 44px;
    row-gap:6px;
    padding-block:20px}
  .dir .ico{
    grid-row:1/span 2;
    width:44px;
    height:44px}
  .dir h4,.dir a .body{
    grid-column:2;
    margin:0;
    padding:0}
  .dir .go{
    grid-column:3;
    grid-row:1/span 2;
    width:44px;
    height:44px}
  .diagram .automation-result .label,.diagram .automation-result>p{
    grid-column:1/-1}
  .rel{
    grid-column:1/-1}
  .studio-head h1,.studio-head .statement-copy,.long>div:first-child,.long>div:last-child{
    grid-column:1/-1}
  .studio-head .statement-copy{
    margin-top:24px}
  .process li,.process li+li{
    padding:24px 0;
    border-left:0}
  .process li+li{
    border-top:1px solid var(--line)}
  .field-row{
    grid-template-columns:minmax(0,1fr)}
  .not-found>div:first-child,.not-found>div:last-child{
    grid-column:1/-1}
  .not-found>div:last-child{
    min-height:200px}
  .node{
    width:88px;
    height:88px}
  .gap{
    width:80px}
  .footer-inner{
    gap:40px;
    padding-top:56px}
  .footer-about,.footer-cols nav:nth-of-type(1),.footer-cols nav:nth-of-type(2),.footer-cols nav:nth-of-type(3){
    grid-column:span 6}
  .footer-about{
    grid-column:1/-1}
  .footer-about p:last-child{
    font-size:22px}
  
  .meta-bar{
    gap:10px 24px}
  .meta-bar a{
    margin-left:0}
}
@media(max-width:380px){
  .site-header .nav-menu{
    min-width:0;
    padding-inline:12px}
  .site-header .nav-cta{
    padding-inline:12px}
  .site-header .nav-cta svg{
    display:none}
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition:none!important}
}
@media print{
  .site-header{
    position:static}
}
.system-stage{
  height:310px;
  position:relative;
  overflow:hidden}
.system-stage canvas{
  width:100%;
  height:100%;
  display:block}
.scene-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  height:100%;
  font-family:var(--display);
  font-size:20px}
.scene-fallback>div{
  padding:30px 20px;
  background:var(--sage);
  border-radius:12px}
.scene-fallback>div:nth-of-type(2){
  background:var(--yellow)}
.model-labels{
  position:absolute;
  inset:0;
  pointer-events:none}
.model-labels span{
  position:absolute;
  transform:translate(-50%,0);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  opacity:0}
.system-stage[data-ready] .model-labels span{
  opacity:1}
.scene-note{
  position:absolute;
  bottom:18px;
  right:0;
  font-size:12px;
  color:var(--muted)}
.system-controls{
  display:grid;
  grid-template-columns:minmax(230px,1fr) auto 1fr;
  align-items:center;
  gap:30px;
  border-top:1px solid var(--line);
  padding:23px 0}
.scenario-field label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:5px}
.scenario-field select{
  border:0;
  background:transparent;
  color:var(--ink);
  font-weight:700;
  font-size:15px;
  padding:3px 25px 3px 0;
  width:100%;
  max-width:300px}
.system-status{
  font-size:13px;
  line-height:1.6;
  justify-self:end;
  max-width:260px}
.system-steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px}
.system-steps button{
  width:100%;
  text-align:left;
  display:flex;
  gap:20px;
  align-items:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:7px;
  padding:14px 16px;
  min-height:57px}
.system-steps button[aria-pressed=true]{
  background:var(--yellow);
  border-color:transparent}
.system-steps button:hover{
  background:var(--sage)}
.system-steps span{
  font-size:13px;
  font-weight:700}
.system-steps small{
  font-size:12px;
  color:var(--muted)}
.step-explanation{
  font-size:13px;
  margin-top:16px;
  min-height:22px}
.demo-note{
  font-size:12px;
  color:var(--muted);
  margin-top:10px}
.system>.demo-note{
  padding-bottom:26px}
.interactive-section>.system{
  background:#e6ebdf;
  border-radius:var(--radius);
  padding:0 28px 8px}
.interactive-section .system-stage{
  height:400px}
@media(min-width:1500px){
  .system-stage{
  height:430px}
}

@media(max-width:1100px){
  .wrap{
  width:calc(100% - 64px)}
.system-stage{
  height:340px}
.system-controls{
  grid-template-columns:1fr auto 1fr;
  gap:20px}
.system-steps button{
  display:block}
.system-steps small{
  display:block;
  margin-top:4px}
.wrap{
  width:100%}
}

@media(max-width:760px){
.system-stage{
  height:300px}
.scene-note{
  right:0;
  bottom:8px;
  font-size:12px}
.system-controls{
  grid-template-columns:1fr auto;
  gap:16px;
  padding:22px 0}
.system-status{
  grid-column:1/-1;
  justify-self:start;
  max-width:none;
  font-size:12px}
.system-controls .button{
  gap:12px;
  padding:13px 15px;
  font-size:12px}
.scenario-field select{
  font-size:13px;
  max-width:230px}
.scenario-field label{
  font-size:12px}
.system-steps{
  grid-template-columns:1fr 1fr;
  gap:8px}
.system-steps button{
  padding:12px;
  min-height:60px}
.system-steps small{
  font-size:12px}
.step-explanation{
  min-height:44px;
  font-size:12px}
.scene-fallback{
  gap:8px;
  flex-wrap:wrap;
  font-size:13px}
.scene-fallback>div{
  padding:20px 12px}
.scene-fallback svg{
  width:15px}
.model-labels span{
  font-size:12px}
.interactive-section>.system{
  padding:0 15px 8px;
  margin-inline:-5px}
.interactive-section .system-stage{
  height:270px}
}

@media(max-width:380px){
.automation-directory .page-intro h1{
  font-size:2.1rem}
.system-controls{
  grid-template-columns:1fr}
.system-controls .button{
  justify-self:start}
.scenario-field select{
  max-width:100%}
.system-stage{
  height:260px}
.system-status{
  grid-column:1}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*::before,*::after{
  animation:none!important;
  transition:none!important}
}



@media(max-width:760px){
  table{
  min-width:0;
  font-size:12px}
th,td{
  padding:11px 9px}
td:first-child{
  white-space:nowrap}
.system-stage{
  height:315px}
.interactive-section .system-stage{
  height:315px}
}


@media (max-width: 760px) {
  .system-controls { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
  .scenario-field select { max-width: none; width: 100%; font-size: 14px; padding-block: 7px; }
  .system-controls .button { justify-self: start; }
  .system-status { grid-column: 1; }
  .pipeline-flow { flex-direction: column; gap: 8px; }
  .pipeline-flow > span { width: 100%; }
  .pipeline-flow svg { transform: rotate(90deg); }
}

/* === hero === */
/* The homepage reel: a full-bleed dark hero under the transparent bar (data-nav-over; chrome.js turns
   the bar paper once the hero has scrolled past). The copy is real HTML on the left; the reel frames
   its shots in the area the copy leaves (index.js sets --reel-*). The paper sheet overlaps the bottom. */
.hero{
  --hero-mono:var(--font-mono,ui-monospace,Menlo,monospace);
  --hero-accent:var(--accent,#ff5a1f);
  position:relative;
  height:min(900px,100svh);
  min-height:640px;
  overflow:hidden;
  background:var(--ink,#0b0b0b);
  color:var(--white,#fff)}
.hero-stage{
  position:absolute;
  inset:0}
/* The bar drops its negative margin once it turns paper (or the phone menu opens); the hero takes
   the margin over so the page below never jumps. */
.site-header:is([data-scrolled],[data-open])~main>.hero[data-nav-over]{
  margin-top:calc(var(--nav-h,56px) * -1)}
/* Scrims: the bar and the meta bar stay legible, and the copy keeps a dark field whatever passes behind it. */
.hero-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(rgba(11,11,11,.7),transparent 150px),
    linear-gradient(0deg,rgba(11,11,11,.85),transparent 220px),
    linear-gradient(90deg,rgba(11,11,11,.78),rgba(11,11,11,.45) 34%,transparent 52%)}
.hero-frame{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:radial-gradient(60% 70% at 70% 52%,#2a2a2a,var(--ink,#0b0b0b))}
.hero-frame picture{
  display:contents}
.hero-poster,.hero-frame canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%}
.hero-poster{
  object-fit:cover;
  object-position:70% 50%}
.hero-stage[data-ready] .hero-poster{
  visibility:hidden}
.hero-stage:not([data-ready]) .hero-kinetic{
  visibility:hidden}
.hero-kinetic{
  position:absolute;
  top:var(--reel-y,0px);
  left:var(--reel-x,48%);
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  width:var(--reel-w,52%);
  height:var(--reel-h,82%);
  padding:0 var(--gutter,40px) 18px 28px;
  pointer-events:none}
.hero-line{
  position:relative;
  max-width:none;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4.4vw,5.4rem);
  font-weight:300;
  line-height:.92;
  letter-spacing:-.05em;
  white-space:nowrap}
.hero-word{
  display:inline-block;
  /* The clip box reaches below the baseline so rising glyphs, descenders and dots stay hidden until they land. */
  padding-bottom:.2em;
  margin-bottom:-.2em;
  clip-path:inset(-.3em -.15em 0 -.15em)}
.hero-char{
  display:inline-block;
  will-change:transform}
.hero-stop{
  color:var(--hero-accent)}
.hero-caret{
  position:absolute;
  top:.08em;
  width:.05em;
  height:.78em;
  margin-left:.04em;
  background:var(--hero-accent)}
.hero-sub:empty{
  display:none}
.hero-copy{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  height:100%;
  padding-top:var(--nav-h,56px);
  padding-bottom:calc(var(--radius-sheet,28px) + 72px)}
.hero-copy>div{
  max-width:600px}
.hero-label{
  margin-bottom:24px;
  font:400 12px/1.2 var(--hero-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey-400,#9a9a96)}
.hero-copy h1{
  max-width:none;
  font-family:var(--font-display);
  font-size:clamp(44px,5.8vw,84px);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--white,#fff)}
.hero-lead{
  max-width:520px;
  margin-top:24px;
  font-size:17px;
  line-height:1.45;
  color:rgba(255,255,255,.72)}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px}
.hero-meta{
  position:absolute;
  right:0;
  bottom:calc(var(--radius-sheet,28px) + 18px);
  left:0;
  z-index:3;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
  font:400 11px/1.4 var(--hero-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--grey-400,#9a9a96)}
.hero-reel{
  display:flex;
  align-items:center;
  gap:14px;
  white-space:nowrap}
.hero-progress{
  display:flex;
  gap:4px;
  list-style:none}
.hero-progress li{
  position:relative;
  width:20px;
  height:2px;
  overflow:hidden;
  background:rgba(255,255,255,.2)}
.hero-progress li[data-state=done]{
  background:var(--white,#fff)}
.hero-progress b{
  position:absolute;
  inset:0;
  background:var(--hero-accent);
  transform:scaleX(0);
  transform-origin:left}
.hero-progress li:not([data-state=current]) b{
  visibility:hidden}
.hero-controls{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  /* Room for both controls before the script reveals them, so the bar never shifts. */
  min-width:184px;
  min-height:40px}
.hero-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 14px 0 10px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:0;
  background:rgba(11,11,11,.4);
  color:var(--white,#fff);
  font:400 11px/1 var(--hero-mono);
  letter-spacing:.06em;
  text-transform:uppercase}
.hero-toggle:hover{
  border-color:var(--white,#fff)}
.hero-toggle:focus-visible{
  outline:2px solid var(--hero-accent);
  outline-offset:3px}
.hero-toggle:disabled{
  opacity:.6}
.hero-toggle svg{
  width:15px;
  height:15px;
  stroke-width:1.8}
.hero-toggle svg+svg,
.hero[data-paused=true] [data-hero-toggle] svg:first-of-type,
.hero[data-muted=true] [data-hero-sound] svg:first-of-type{
  display:none}
.hero[data-paused=true] [data-hero-toggle] svg+svg,
.hero[data-muted=true] [data-hero-sound] svg+svg{
  display:block}
.hero[data-paused=true] [data-hero-toggle] svg+svg{
  fill:currentColor}
.hero-sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap}
@media(max-width:1100px){
  .hero-meta{
    grid-template-columns:auto auto;
    row-gap:10px}
  .hero-controls{
    justify-self:end}
}
/* Phones: the headline sits above the devices, which take the space between it and the meta bar. */
@media(max-width:760px){
  .hero{
    height:auto;
    min-height:0}
  .hero-stage::after{
    background:
      linear-gradient(rgba(11,11,11,.92) 0,rgba(11,11,11,.8) 46%,transparent 62%),
      linear-gradient(0deg,rgba(11,11,11,.85),transparent 200px)}
  .hero-copy{
    height:auto;
    padding-top:calc(var(--nav-h,52px) + 28px);
    padding-bottom:calc(var(--radius-sheet,20px) + 420px)}
  .hero-copy h1{
    font-size:clamp(36px,10vw,52px)}
  .hero-label{
    margin-bottom:16px}
  .hero-lead{
    margin-top:18px;
    font-size:15px}
  .hero-ctas{
    flex-wrap:nowrap;
    gap:8px;
    margin-top:24px}
  .hero-ctas .btn{
    gap:12px;
    padding-inline:14px}
  .hero-kinetic{
    padding:0 20px 8px}
  .hero-line{
    font-size:clamp(2rem,10vw,3rem)}
  .hero-poster{
    object-position:50% 100%}
  .hero-meta{
    grid-template-columns:1fr auto;
    gap:10px 12px}
  .hero-reel span{
    display:none}
  .hero-controls{
    min-width:88px}
  .hero-toggle{
    justify-content:center;
    width:40px;
    padding:0}
  .hero-toggle span:not(.hero-sr){
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)}
}
/* === /hero === */