:root{
  --s1:#e4e7ea; --s2:#cdd1d5; --s3:#bcc0c6;
  --ink:#0c0d0f; --ink-2:#26292e; --muted:#464a51; --line:rgba(12,13,15,.14); --line-2:rgba(12,13,15,.3);
  --accent:#0a0a0a; --accent-2:#2e2e2e; --accent-ink:#0a0a0a; --accent-fg:#ffffff;
  --dark:#141517; --dark-2:#1d1f22; --on-dark:#eceef0; --on-dark-2:#9ba1a9; --line-d:rgba(255,255,255,.12);
  --display:"Inter Tight","Helvetica Neue",Arial,sans-serif; --head:"Archivo","Inter Tight",Arial,sans-serif;
  --mono:var(--display); /* one family site-wide; "mono" now names the label role */
  /* type roles */
  --t-label:12px; --t-small:14px; --t-body:16px; --t-lede:clamp(19px,1.55vw,23px); --t-desc:clamp(17px,1.25vw,19px); --t-title:clamp(24px,2.25vw,34px);
  --g:clamp(16px,2.4vw,32px);   /* page gutter */
  --inset:clamp(8px,.9vw,12px); /* media inset, Anduril-style */
  --r:10px;
  --nav:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--display);color:var(--ink);background-color:var(--s2);
  background-image:radial-gradient(1100px 700px at 80% -10%,rgba(255,255,255,.8),transparent 60%),linear-gradient(180deg,var(--s1),var(--s2) 40%,var(--s3));
  background-attachment:fixed;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.3;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/120px 120px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.3));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.3))}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px}
.skip:focus{left:8px}
.wrap{padding:0 var(--g)}
.mono{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase}
.idx{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.idx b{color:var(--accent);font-weight:500}
.up{text-transform:uppercase;font-variation-settings:"wdth" 100;font-weight:700;letter-spacing:-.025em;line-height:.9}
.h-xl{font-size:clamp(44px,7.4vw,128px)}
.h-l{font-size:clamp(38px,5.2vw,88px)}
.h-m{font-size:clamp(32px,3.5vw,56px)}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--muted);max-width:46ch;font-weight:500}
/* body copy sits at 500 so it holds up against the heavy display type */
.p-what,.row-head p,.fl-desc,.sc-does,.tier .sub,.spec li,.step p,.callout p,.sc-note,.sc-status,.price-note,.fine,.shot .cap{font-weight:500}
.arrow-ne{display:inline-block;width:14px;height:14px}
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn-ink{background:var(--ink);color:var(--s1);border-color:var(--ink)}
.btn-ink:hover{background:#000}
.btn-light{background:rgba(255,255,255,.9);color:var(--ink);border-color:transparent}
.btn-light:hover{background:#fff}
.btn-glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn-accent:hover{background:var(--accent-2)}
.btn .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ========== NAV ========== */
.nav{position:fixed;top:var(--inset);left:var(--inset);right:var(--inset);z-index:50;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 calc(var(--g) - var(--inset));color:#fff;border-radius:var(--r);transition:background .35s,color .35s,box-shadow .35s}
.nav.solid{background:rgba(222,225,229,.78);color:var(--ink);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 0 0 1px var(--line),0 10px 30px -18px rgba(0,0,0,.4)}
.logo{font-variation-settings:"wdth" 125;font-weight:850;font-size:17px;letter-spacing:.02em}
.nav-links{display:flex;gap:26px}
.nav-links a{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;opacity:.82;padding:6px 0;position:relative}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .3s}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-r{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;align-items:center;justify-content:center;opacity:.8}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:14px;height:1px;background:currentColor;position:relative;transition:transform .3s,background .3s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-4px}
.menu-btn span::after{top:4px}
.nav.open .menu-btn span{background:transparent}
.nav.open .menu-btn span::before{transform:translateY(4px) rotate(45deg)}
.nav.open .menu-btn span::after{transform:translateY(-4px) rotate(-45deg)}

/* ========== MEDIA BLOCK (inset, full-bleed) ========== */
.media{position:relative;margin:0 var(--inset);border-radius:var(--r);overflow:hidden;background:var(--dark);isolation:isolate;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 40px 80px -50px rgba(0,0,0,.6)}
.media>video,.media>img,.media>.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hud-c{position:absolute;width:14px;height:14px;border:0 solid rgba(255,255,255,.4);z-index:5;pointer-events:none}
.hud-c.tl{top:14px;left:14px;border-width:1px 0 0 1px}
.hud-c.tr{top:14px;right:14px;border-width:1px 1px 0 0}
.hud-c.bl{bottom:14px;left:14px;border-width:0 0 1px 1px}
.hud-c.br{bottom:14px;right:14px;border-width:0 1px 1px 0}

/* ========== HERO ========== */
.hero{height:calc(100vh - var(--inset)*2);height:calc(100svh - var(--inset)*2);min-height:560px;margin-top:var(--inset);color:#fff}
.hero video{opacity:0;transition:opacity 1s ease;transform:scale(1.02)}
.hero video.on{opacity:1;z-index:1}
.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hero .shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(8,9,10,.55) 0%,rgba(8,9,10,0) 22%,rgba(8,9,10,0) 45%,rgba(8,9,10,.82) 100%),linear-gradient(90deg,rgba(8,9,10,.45),transparent 55%)}
.hero .inner{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 calc(var(--g) - var(--inset)) clamp(22px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.hero h1{max-width:12ch;margin:18px 0 22px}
.hero .kick{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);display:flex;gap:12px;flex-wrap:wrap}
.hero .kick span+span::before{content:"/";margin-right:12px;color:var(--accent)}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap}
/* capabilities: sites strip (shot cards on a slow loop) */
.shots{--shot-gap:clamp(16px,1.6vw,28px);min-width:0;margin-top:clamp(18px,2vw,28px)}
.shots-track{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.shots-row{list-style:none;display:flex;gap:var(--shot-gap);padding-right:var(--shot-gap);flex:none;animation:shots 96s linear infinite}
@keyframes shots{to{transform:translateX(-100%)}
}
.shot{flex:none;width:clamp(240px,24vw,420px);display:flex;flex-direction:column;gap:10px}
.shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:8px;
  box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(0,0,0,.45);transition:transform .35s,box-shadow .35s}
.shot:hover img{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-2),0 18px 34px -16px rgba(0,0,0,.55)}
.shots-rev .shots-row{animation-direction:reverse;animation-duration:128s}
.shot.reel{width:clamp(240px,24vw,420px)}
.shot.reel video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--dark);
  box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(0,0,0,.45);transition:transform .35s,box-shadow .35s}
.shot.reel:hover video{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-2),0 18px 34px -16px rgba(0,0,0,.55)}
.shots-ai .shots-row{animation-duration:110s}
.shot.sys-card{width:clamp(240px,24vw,420px)}
.sys-card a{aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(8px,.9vw,14px);padding:clamp(14px,1.4vw,22px);border-radius:8px;
  background:var(--dark);color:var(--on-dark);box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(0,0,0,.45);transition:transform .35s,background .35s}
.sys-card a:hover{transform:translateY(-3px);background:var(--dark-2)}
.sys-card.acc a{background:var(--accent);color:var(--ink)}
.sys-card.acc a:hover{background:var(--accent-2)}
.sc-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.sc-top b{font-weight:500;color:var(--accent)}
.sys-card.acc .sc-top b{color:var(--ink)}
.sc-name{font-size:var(--t-title);font-weight:650;letter-spacing:-.015em;line-height:1.05;text-wrap:balance}
.sc-does{margin-top:auto;font-size:var(--t-body);line-height:1.4;opacity:.82;max-width:34ch}
/* small accent text: black on light surfaces, white on dark ones */
.idx b,.tier .id b,.price-note .mo{color:var(--accent-ink)}
.contact .idx b,.callout .idx b,.tier.feat .id b,.tier.feat .price-note .mo{color:var(--accent-2)}
.tier .id b,.price-note .mo{font-size:var(--t-label)}
/* capabilities: where to start, then one row per discipline */
.paths{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2.4vw,40px)}
.path{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;height:100%;padding:16px 0 4px;border-top:1px solid var(--line-2);transition:border-color .3s}
.p-need{font-size:var(--t-title);font-weight:650;letter-spacing:-.02em;line-height:1.05}
.p-what{font-size:var(--t-body);line-height:1.5;color:var(--muted);max-width:38ch}
.p-go{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.p-go::after{content:"→";transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.path:hover{border-color:var(--accent)}
.path:hover .p-go{color:var(--accent)}
.path:hover .p-go::after{transform:translateX(4px)}
.row-head{margin-top:clamp(56px,6.5vw,104px);margin-bottom:clamp(16px,1.8vw,26px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px 40px;align-items:start}
.row-head > p,.row-head .modes{padding-top:.5em}
.row-head p{font-size:var(--t-body);line-height:1.5;color:var(--muted);max-width:52ch}
.row-head p b{color:var(--ink);font-weight:600}
.row-head a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.row-head a:hover{color:var(--accent)}
.modes{display:flex;flex-direction:column;gap:6px}
.row-head + .shots{margin-top:0}
html{scroll-padding-top:calc(var(--nav) + var(--inset) + 16px)}
@media (max-width:900px){.paths{grid-template-columns:1fr;gap:0}
.path{grid-template-rows:auto;padding:16px 0 18px}
.row-head{grid-template-columns:1fr}
}



.shot .cap{display:flex;flex-direction:column;gap:1px;line-height:1.25;min-width:0}
.shot .cap b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot .cap b{font-size:var(--t-small);font-weight:600;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.shots-track{overflow-x:auto}
.shots-row{animation:none}
.shots-row[aria-hidden]{display:none}
}

/* ========== SECTION HEAD (Anduril: label row + big type) ========== */
.sec{padding:clamp(80px,10vw,150px) 0 0}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:28px 40px;align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.head .rule{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}
.head h2{margin-top:6px}

/* ========== CAPABILITY TILES ========== */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--inset);padding:0 var(--inset)}












/* ========== EXPLODE (sticky scroll scrub) ========== */


.ex-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.5fr);gap:10px 36px;align-items:end;padding:0 var(--g) 14px}
.ex-head .idx{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;margin-bottom:6px}
.ex-head h2{font-size:clamp(34px,4.6vw,78px)}
.ex-head .lede{font-size:var(--t-body)}
.phase{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;margin-top:12px}



















/* ========== FEATURE STATEMENT (full-bleed media + overlay) ========== */
.feature{margin-top:clamp(80px,10vw,140px);height:clamp(520px,88vh,900px);color:#fff}
.feature::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,9,10,.78),rgba(8,9,10,.2) 60%,rgba(8,9,10,.4)),linear-gradient(0deg,rgba(8,9,10,.6),transparent 40%)}
.feature .inner{position:absolute;z-index:3;inset:0;padding:clamp(24px,3vw,44px) calc(var(--g) - var(--inset));display:flex;flex-direction:column;justify-content:space-between}
.feature .row{display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}


.feature h2{max-width:11ch}
.feature .bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);gap:30px;align-items:end}
.feature .bottom p{color:rgba(255,255,255,.78);line-height:1.55;max-width:44ch}

/* ========== PRICING ========== */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--inset);padding:0 var(--inset)}
.tier{position:relative;border-radius:var(--r);padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.26));box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(12,13,15,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tier:hover{transform:translateY(-3px)}
.tier::before{content:"";position:absolute;left:-40%;top:0;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left 1s ease;pointer-events:none}
.tier:hover::before{left:125%}
.tier .id{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)}
.tier .id b{font-weight:500}
.tier h3{margin:clamp(28px,4vw,56px) 0 6px;font-size:var(--t-title);font-weight:650;letter-spacing:-.015em;line-height:1}
.tier .sub{color:var(--muted);font-size:var(--t-body);line-height:1.45}
.price{display:flex;align-items:flex-start;gap:4px;margin:24px 0 6px;text-transform:uppercase;font-variation-settings:"wdth" 100;font-weight:700;letter-spacing:-.035em;font-feature-settings:"tnum"}
.price .cur{font-size:26px;margin-top:8px}
.price .amt{font-size:clamp(60px,5.6vw,96px);line-height:.85}
.price.custom .amt{font-size:clamp(44px,4vw,70px);line-height:.9}
.price-note{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.price-note .mo{font-weight:500}
.spec{list-style:none;flex:1;margin-bottom:26px;border-top:1px solid var(--line)}
.spec li{display:grid;grid-template-columns:30px 1fr;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--line);font-size:var(--t-body)}
.spec li::before{content:counter(s,decimal-leading-zero);counter-increment:s;font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
.spec{counter-reset:s}
.tier .btn{justify-content:center;width:100%}
.tier.feat{background:radial-gradient(120% 80% at 80% 0%,#34373c,#18191c 62%);color:var(--on-dark);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 40px 80px -40px rgba(0,0,0,.7)}
.tier.feat::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.1),transparent)}
.tier.feat .id{color:var(--on-dark-2);border-color:var(--line-d)}
.tier.feat .sub,.tier.feat .price-note{color:var(--on-dark-2)}
.tier.feat .spec{border-color:var(--line-d)}
.tier.feat .spec li{border-color:rgba(255,255,255,.09)}
.tier.feat .spec li::before{color:var(--accent)}
.tier.feat .price{color:#fff}
.tier.feat .ring{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0 72%,rgba(255,255,255,.85) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 8s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}
}
.pill{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid rgba(128,128,128,.55);color:var(--accent-2)}
.fine{padding:14px var(--g) 0;font-family:var(--mono);font-size:var(--t-small);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ========== AI CATALOG (Anduril product grid) ========== */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:0 var(--g);margin-bottom:16px}
.chip{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.3);transition:background .2s,color .2s}
.chip:hover{background:rgba(255,255,255,.65)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--s1);border-color:var(--ink)}
.chip .c{opacity:.55;margin-left:6px}
.catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--inset);padding:0 var(--inset)}
.sys{aspect-ratio:4/5}
.sys[hidden]{display:none}
.sys .t-bot{flex-direction:column;align-items:stretch}
.sys .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.sys .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.sys .more>div{overflow:hidden}
.sys:hover .more,.sys:focus-within .more{grid-template-rows:1fr}
.sys .desc{font-size:var(--t-body);color:rgba(255,255,255,.8);line-height:1.45;padding-top:10px;max-width:40ch}
.sys .fallback{position:absolute;inset:0;background:radial-gradient(70% 60% at 60% 35%,rgba(255,255,255,.08),transparent 60%),radial-gradient(80% 80% at 30% 70%,rgba(200,210,220,.12),transparent 60%),#18191b}
.callout{margin-top:var(--inset);min-height:clamp(360px,52vh,520px);color:#fff}
.callout::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,9,10,.85),rgba(8,9,10,.35) 70%,rgba(8,9,10,.55))}
.callout .inner{position:relative;z-index:3;padding:clamp(28px,4vw,56px) calc(var(--g) - var(--inset));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;min-height:inherit}
.callout .idx{color:rgba(255,255,255,.65);margin-bottom:16px}
.callout p{color:rgba(255,255,255,.75);max-width:48ch;margin-top:16px;line-height:1.55}

/* ========== PROCESS ========== */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0 var(--g)}
.step{padding:16px 22px 0 0;border-top:2px solid var(--line-2)}
.step .idx{display:flex;justify-content:space-between}
.step h3{margin:36px 0 10px;font-size:var(--t-title);font-weight:650;letter-spacing:-.015em}
.step p{font-size:var(--t-body);line-height:1.5;color:var(--muted);max-width:32ch}

/* ========== CONTACT ========== */
.contact{margin:clamp(90px,11vw,160px) var(--inset) var(--inset);border-radius:var(--r);background:linear-gradient(180deg,#1d1e21,#111214);color:var(--on-dark);padding:clamp(60px,8vw,120px) calc(var(--g) - var(--inset)) 26px;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/120px 120px;-webkit-mask-image:radial-gradient(80% 80% at 50% 0%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 0%,#000,transparent)}
.contact>*{position:relative}
.contact .idx{color:var(--on-dark-2)}
.contact h2{margin:18px 0 36px}
.mail{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mail a{font-size:clamp(30px,6vw,96px);font-weight:500;letter-spacing:-.035em;line-height:1.05;overflow-wrap:anywhere;color:#f2f3f5}
.cform{max-width:960px;margin-bottom:clamp(48px,6vw,80px)}
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.fld.full{grid-column:1/-1}
.fld span{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.fld span i{font-style:normal;opacity:.6;margin-left:6px}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--on-dark);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:12px 14px;transition:border-color .2s,background .2s}
.fld textarea{resize:vertical;min-height:130px;line-height:1.5}
.fld select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--on-dark-2) 50%),linear-gradient(135deg,var(--on-dark-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.fld select option{color:#111}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.07)}
.fld [aria-invalid="true"]{border-color:#ff6b6b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.csend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.csend .btn[disabled]{opacity:.6;cursor:wait}
.cstatus{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.cstatus.ok{color:#7ee2a8}
.cstatus.err{color:#ff8a8a}
.or{margin-bottom:10px}
@media (max-width:640px){.cgrid{grid-template-columns:1fr}
.csend .btn{width:100%;justify-content:center}
}
.copy{height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase}
.copy:hover{border-color:var(--accent)}
.foot{margin-top:clamp(70px,9vw,130px);padding-top:18px;border-top:1px solid var(--line-d);display:grid;grid-template-columns:1fr auto auto;gap:18px 40px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.foot .logo{color:var(--on-dark);font-size:14px;font-family:var(--display);letter-spacing:.02em;text-transform:none}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a:hover{color:#fff}

.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--s1);font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;border-radius:999px;z-index:80;transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ========== RESPONSIVE ========== */
@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile.wide{aspect-ratio:16/10}
  .catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  .head{grid-template-columns:1fr}
  .ex-head{grid-template-columns:1fr}
  .ex-head .lede{display:none}
  .parts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .feature .bottom{grid-template-columns:1fr}
  .callout .inner{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-links{position:fixed;top:calc(var(--nav) + var(--inset) + 6px);left:var(--inset);right:var(--inset);flex-direction:column;gap:0;background:rgba(226,229,232,.97);color:var(--ink);border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 20px 40px -20px rgba(0,0,0,.4);padding:6px 18px 12px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:all .25s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav-links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--t-label);opacity:1}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a::after{display:none}
  .nav.open .nav-links{transform:none;opacity:1;visibility:visible}
  .menu-btn{display:flex}
  .hero .inner{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  :root{--nav:56px}
  .tiles,.catalog{grid-template-columns:1fr}
  
  
  
  
  
  .ex-head h2{font-size:clamp(30px,9vw,44px)}
  
  


  
  .steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .hud-c{display:none}
  .hero .ctas .btn{flex:1;justify-content:center}
  .shot{width:220px}
  .shot.reel{width:220px}
  .shot.sys-card{width:260px}
  .sys-card a{aspect-ratio:auto;min-height:230px}
  .sys .more{grid-template-rows:1fr}
  .sys .desc{display:none}
}
@media (max-height:780px) and (min-width:1101px){
  .ex-head h2{font-size:clamp(30px,3.6vw,56px)}
  .ex-head .lede{display:none}
  
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* ========== CREW PAGE ========== */
.nav.static{background:rgba(222,225,229,.78);color:var(--ink);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 0 0 1px var(--line),0 10px 30px -18px rgba(0,0,0,.4)}
.crew-intro{padding:calc(var(--nav) + clamp(64px,9vw,128px)) var(--g) 0}
.crew-intro h1{margin-bottom:24px}
.crew-list{list-style:none;margin:clamp(56px,8vw,112px) var(--g) 0;border-top:1px solid var(--line-2)}
.member{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px 48px;padding:clamp(32px,4vw,56px) 0;border-bottom:1px solid var(--line)}
.member h2{font-size:clamp(44px,6vw,96px)}
.member .role{display:block;margin-top:14px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.member blockquote{font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.01em;line-height:1.25;max-width:30ch}
.member p{margin-top:16px;font-size:var(--t-body);line-height:1.6;color:var(--muted);max-width:52ch}
.skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none}
.skills li{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.35)}
.crew-cta .btn{margin-top:8px}
@media (max-width:900px){.member{grid-template-columns:1fr}
}

/* the frame counter is for the scroll animation only; visitors don't need it */


/* ========== SCROLL STORIES (how we build / how we shoot) ==========
   Timeless on purpose: hairline rules, a 4px grid, one accent, motion only where something changes. */
/* scroll anchoring fights the pinned stages: when a scene swaps, the browser "corrects" the scroll and flips the step back */
html{overflow-anchor:none}
.story{position:relative;margin-top:clamp(8px,1vw,16px)}
.story.scroll{height:calc(var(--steps) * 140vh + 100svh)}
.fl-pin{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:clamp(20px,2.2vw,32px)}
.story.scroll .fl-pin{position:sticky;top:calc(var(--nav) + var(--inset) + 16px);height:calc(100svh - var(--nav) - var(--inset) - 40px);max-height:960px}
.fl-side{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
.fl-steps{display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.fl-step{display:flex;flex-direction:column;gap:8px;text-align:left;padding:16px 0 0;color:var(--muted);transition:color .3s}
.fl-step .n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.fl-step .t{font-size:var(--t-title);font-weight:650;letter-spacing:-.02em;line-height:1.15}
.fl-step .d{display:none}
.fl-step[aria-selected="true"]{color:var(--ink)}
.fl-step[aria-selected="true"] .n{color:var(--accent-ink)}
.fl-step:hover{color:var(--ink)}
.fl-copy{display:block}
.fl-count{display:none;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.fl-count b{color:var(--ink);font-weight:600}
.fl-desc{font-size:var(--t-body);line-height:1.5;color:var(--ink-2);max-width:none;text-wrap:pretty;height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fl-desc.swap{animation:flIn .5s cubic-bezier(.2,.7,.2,1) both}
.fl-rail{order:-1;position:relative;height:1px;background:var(--line-2)}
.fl-rail i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .15s linear}
@keyframes flIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.fl-stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--dark);color:var(--on-dark);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -40px rgba(0,0,0,.6)}
.st-bar{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px) minmax(0,1fr);align-items:center;gap:16px;height:52px;padding:0 16px;background:#1b1c1f;border-bottom:1px solid rgba(0,0,0,.5);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.st-left{display:flex;align-items:center;gap:18px}
.st-nav{display:flex;gap:10px}.st-nav svg{width:16px;height:16px;fill:none;stroke:#8b9097;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.st-nav svg + svg{stroke:#4a4e54}
.st-dots{display:flex;gap:8px}.st-dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:0 0 0 .5px rgba(0,0,0,.35) inset}.st-dots i:nth-child(2){background:#febc2e}.st-dots i:nth-child(3){background:#28c840}
.st-url{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:32px;padding:0 34px;border-radius:8px;background:#2a2b2f;font-size:14px;font-weight:500;color:var(--on-dark);white-space:nowrap;overflow:hidden}
.st-url > span:not(.st-lock){overflow:hidden;text-overflow:ellipsis}
.st-rl{position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;fill:none;stroke:#8b9097;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-load{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);opacity:0}
.st-load.on{animation:stLoad 1.4s cubic-bezier(.3,.6,.2,1) .15s forwards}
@keyframes stLoad{0%{transform:scaleX(0);opacity:1}75%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.st-lock{width:9px;height:10px;border:1.5px solid var(--on-dark-2);border-radius:2px;position:relative;flex:none;margin-top:3px}
.st-lock::before{content:"";position:absolute;left:1px;right:1px;top:-5px;height:5px;border:1.5px solid var(--on-dark-2);border-bottom:0;border-radius:4px 4px 0 0}




.st-scenes{position:relative;flex:1;min-height:0}
.sc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:clamp(24px,3.2vw,48px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s ease-out,transform .18s ease-out,visibility 0s .18s}
.sc.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1) .16s,transform .6s cubic-bezier(.2,.7,.2,1) .16s,visibility 0s}
.sc[hidden]{display:flex!important}
.st-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 16px;border-top:1px solid var(--line-d)}
.fl-hint{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.fl-back,.fl-next{font-size:14px;padding:9px 16px;border-radius:999px;transition:background .25s,color .25s,opacity .25s}
.fl-back{color:var(--on-dark-2)}.fl-back:hover{color:#fff}
.fl-next{background:var(--on-dark);color:var(--ink);font-weight:600}.fl-next:hover{background:#fff}
.fl-back:disabled,.fl-next:disabled{opacity:0;pointer-events:none}
.story.scroll .fl-back,.story.scroll .fl-next{display:none}
.story.scroll .st-foot{justify-content:center}
.story:not(.scroll) .fl-hint{display:none}
@media (min-width:901px){.story:not(.scroll) .fl-stage{min-height:560px}}
.story.last .fl-hint{visibility:hidden}

/* shared controls inside the stages */
.sc-center{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:20px;text-align:center;align-items:center}
.sc-q{font-size:var(--t-title);font-weight:650;letter-spacing:-.02em}
.sc-input{font:inherit;font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.03em;text-align:center;color:#fff;background:transparent;border:0;border-bottom:1px solid var(--line-d);padding:6px 0 10px;width:100%;border-radius:0;transition:border-color .3s}
.sc-input.sm{font-size:var(--t-title);text-align:left}
.sc-input::placeholder{color:#8a9098}
.sc-input:focus{outline:none;border-bottom-color:var(--accent)}
.sc-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--line-d);border-radius:999px;padding:4px;gap:4px;width:100%;max-width:440px}
.sc-seg.four{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.sc-seg button{font-size:14px;padding:10px 12px;border-radius:999px;color:var(--on-dark-2);transition:background .25s,color .25s}
.sc-seg button:hover{color:#fff}
.sc-seg button[aria-pressed="true"]{background:var(--on-dark);color:var(--ink)}
.sc-status{display:flex;align-items:center;gap:10px;font-size:var(--t-body);color:var(--on-dark-2);text-align:left}
.ok{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(126,226,168,.16);position:relative}
.ok::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;border:solid #7ee2a8;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.sc-note{font-size:var(--t-body);line-height:1.5;color:var(--on-dark-2);max-width:52ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ag-list{display:flex;flex-direction:column}
.ag-list button{display:flex;align-items:center;gap:12px;text-align:left;font-size:15px;padding:11px 0;border-bottom:1px solid var(--line-d);color:var(--on-dark-2);transition:color .25s}
.ag-list button:hover{color:#fff}
.ag-list button i{flex:none;width:16px;height:16px;border:1px solid #5a5f66;border-radius:4px;position:relative;transition:background .2s,border-color .2s}
.ag-list button[aria-pressed="true"]{color:#fff}
.ag-list button[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent)}
.ag-list button[aria-pressed="true"] i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.ag-list.row{flex-direction:row;flex-wrap:wrap;gap:4px 20px}
.ag-list.row button{border-bottom:0;padding:6px 0}
.fl-cta{align-self:flex-start}

/* build: call (video-call layout; Discord or Zoom) */
.call{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:center;min-height:0;max-height:100%}
.vc{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;height:100%;max-height:420px;padding:10px;border-radius:10px;background:#111214}

.bm{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;flex:none}
.bm::before{content:"";width:13px;height:13px;background:#fff;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.bm.discord{background:#5865F2;--m:url("brands/discord.svg")}
.bm.zoom{background:#0B5CFF;--m:url("brands/zoom.svg")}
.bm.zoom{width:38px}.bm.zoom::before{width:30px;height:12px}

.vc-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}
.vt{position:relative;border-radius:8px;display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden}
.vt.t1{background:#3a3c41}.vt.t2{background:#7d8594}.vt.t3{background:#9b8468}.vt.you{background:#5c2f2c;box-shadow:0 0 0 2px var(--accent) inset}
.vt .av{width:clamp(40px,4.4vw,60px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#1e1f22;color:#fff;font-weight:700;font-size:clamp(16px,1.6vw,22px)}
.vt.you .av{background:var(--accent);color:var(--ink)}
.vt .nm{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:3px 8px;border-radius:4px;background:rgba(0,0,0,.55);font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.vc-ctl{display:flex;gap:8px}
.vb{width:36px;height:32px;border-radius:8px;display:grid;place-items:center;background:#1e1f22}
.vb svg{width:18px;height:18px;fill:none;stroke:#dbdee1;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vb.off svg{stroke:#f23f43}
.vb.end{width:48px;background:#da373c}.vb.end svg{fill:#fff;stroke:none}
.agenda{display:flex;flex-direction:column;gap:6px;min-width:0}
.ag-h{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.ag-sub{font-size:var(--t-body);font-weight:600;margin-bottom:6px}

/* build: code + preview */

.code{border-radius:8px;background:#0f1012;border:1px solid var(--line-d);padding:12px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;overflow:hidden;min-width:0}

.code ol{list-style:none;counter-reset:ln}
.code li{counter-increment:ln;padding:0 14px;white-space:pre;overflow:hidden;text-overflow:ellipsis;color:#cfd3d8;opacity:0;animation:flIn .35s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 70ms)}
.code li::before{content:counter(ln);display:inline-block;width:22px;color:#555a61;margin-right:10px;text-align:right}
.code .k{color:#9aa0a8}.code .s{color:var(--accent-2)}.code .c{color:#7ee2a8}












/* the build scene never runs past its window: the code fades out instead of being cut */

.code{display:flex;flex-direction:column;min-height:0}
.code ol{flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}

.vc{max-height:calc(100% - 12px)}
/* build: launch */

.log{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--on-dark-2)}
.log li{display:flex;align-items:center;gap:10px;opacity:0;animation:flIn .4s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 260ms)}






/* shoot: slate */

/* shoot: plan */
.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center}









.f1::before{left:8%;right:8%;bottom:22%;height:0}.f1::after{left:40%;bottom:22%;width:8%;height:30%;border-radius:40% 40% 0 0}
.f2::before{left:34%;bottom:0;width:32%;height:62%;border-radius:45% 45% 0 0}.f2::after{left:43%;top:18%;width:14%;height:24%;border-radius:50%}
.f3::before{left:30%;top:14%;width:40%;height:78%;border-radius:50%}.f3::after{display:none}
.f4::before{left:28%;top:22%;width:44%;height:56%;border-radius:50%}.f4::after{left:46%;top:30%;width:8%;height:24%;border-radius:2px}

/* shoot: pre-production canvas (planned in Figma, Milanote or Canva) */
.pp{display:grid;grid-template-columns:44px minmax(0,1fr);min-height:0;max-height:100%;height:100%;border:1px solid var(--line-d);border-radius:10px;overflow:hidden;background:#0f1012}















.bm.figma{background:#1e1e1e;box-shadow:0 0 0 1px #3a3d42 inset;--m:url("brands/figma.svg")}
.bm.figma::before{background:#f24e1e}
.bm.milanote{background:#31303a;box-shadow:0 0 0 1px #4a4955 inset;--m:url("brands/milanote.svg")}
.bm.canva{background:#00C4CC;--m:url("brands/canva.svg")}
















@keyframes ppTick{to{background:var(--accent);border-color:var(--accent)}}
@keyframes ppMark{to{transform:rotate(45deg) scale(1)}}








/* example board inside a step: mood board + treatment */
.sl-media{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;margin-top:clamp(8px,1vw,16px)}
.mb-tag{margin-left:auto;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mb-scroll{overflow-x:auto;border-radius:var(--r);scrollbar-width:thin}
.mb{position:relative;width:100%;min-width:960px;aspect-ratio:2/1;border-radius:var(--r);background-color:#141518;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.2px);background-size:18px 18px;color:var(--on-dark);overflow:hidden}
.mb-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mb-lines path{vector-effect:non-scaling-stroke}
.mb-chip{position:absolute;transform:translateX(-50%);padding:6px 12px;border-radius:6px;background:#5f6f89;font-size:12px;color:#fff;white-space:nowrap}
.mb-chip.warm{background:#b4625a}.mb-chip.gold{background:#8f7444}
.mb-col{position:absolute;top:25%;width:13%;display:flex;flex-direction:column;gap:6px}
.mb-col.a{left:18%}.mb-col.b{left:33%}.mb-col.c{left:48%}.mb-col.d{left:63%}
.mb-col img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.mb-sw{position:absolute;width:9%;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:6px;background:var(--c);color:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.mb-sw span{display:block;height:28px}
.mb-sw b{font-size:12px;font-weight:600}.mb-sw i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.8}
.mb-sw.light{color:var(--ink)}
.mb-sw.s1{left:4%;top:30%;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}.mb-sw.s2{left:4%;top:60%;color:var(--ink)}
.mb-sw.s3{left:33%;top:80%;color:var(--ink)}.mb-sw.s4{left:44%;top:80%;color:var(--ink)}.mb-sw.s5{left:63%;top:62%;color:var(--ink)}
.mb-sw.s6{left:82%;top:64%}
.mb-card{position:absolute;left:80%;top:18%;width:16%;padding:12px;border-radius:6px;background:#efece4;color:var(--ink);box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.mb-ch{font-size:13px;font-weight:650;margin-bottom:6px}
.mb-card ul{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.35}
.mb-card li{padding-left:12px;position:relative}.mb-card li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent-ink)}
.tp-col{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:8px;background:#1d1f23;border:1px solid var(--line-d);min-width:0}
.tp-h{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);padding-bottom:8px;border-bottom:1px solid var(--line-d)}
.tp-col ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}
.tp-col li{padding-left:12px;position:relative}.tp-col li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.tp-col img{margin-top:auto;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:4px}
.mb-hint{display:none}
@media (max-width:900px){.mb-tag{margin-left:0;width:100%}.mb-hint{display:block;width:100%;font-size:var(--t-small);color:var(--muted)}}
/* the board inside a step card */
.sl-media.in-stage{height:100%;min-height:0;margin:0;gap:10px}
.in-stage .mb-tag{color:var(--on-dark-2)}
.in-stage .mb-scroll{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:8px}
.in-stage .mb-size{display:block;width:calc(1200px * var(--s,0.5));height:calc(600px * var(--s,0.5))}
.in-stage .mb[data-view="mood"]{position:absolute;left:var(--x,0px);top:0;width:1200px;height:600px;min-width:0;aspect-ratio:auto;transform:scale(var(--s,0.5));transform-origin:0 0}
@media (max-width:900px){
  .in-stage .mb-scroll{overflow-x:auto;overflow-y:hidden}
}
/* delivery: a frame from the edit; --eh keeps the image and the spec row the same width */
.sc{--eh:min(41vh,380px)}
.edit-shot{display:block;width:auto;max-width:100%;height:auto;max-height:var(--eh);margin:0 auto;border-radius:8px;box-shadow:0 0 0 1px var(--line-d),0 18px 40px -24px rgba(0,0,0,.8)}
@media (max-width:900px){.edit-shot{max-height:none;width:100%}}





/* type-led cards (no footage until we have our own) */




/* shoot: viewfinder */






@keyframes fFocus{0%{transform:translate(-40%,-10%)}50%{transform:translate(30%,15%)}100%{transform:translate(-10%,-20%)}}
.vf-l,.vf-r{position:absolute;bottom:14px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase}
.vf-l{left:40px}.vf-r{right:40px}
.sw{display:flex;align-items:center;gap:12px;font-size:var(--t-body);cursor:pointer}
.sw input{appearance:none;width:40px;height:24px;border-radius:999px;background:#3a3d42;position:relative;flex:none;transition:background .25s;cursor:pointer}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.sw input:checked{background:var(--accent)}
.sw input:checked::after{transform:translateX(16px)}

/* shoot: grade + timeline */


.g-after{filter:contrast(1.12) saturate(1.15)}
.g-before{filter:saturate(.25) contrast(.72) brightness(1.18) sepia(.08);clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.g-line{position:absolute;top:0;bottom:0;left:var(--cut);width:1px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.4)}
.g-line::after{content:"";position:absolute;top:50%;left:-14px;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
.g-tag{position:absolute;top:12px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.45);color:#fff}
.g-tag.l{left:12px}.g-tag.r{right:12px}
.g-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.g-range:focus-visible + *{outline:none}






@keyframes flPlay{to{left:calc(100% - 13px)}}

/* shoot: delivery formats */

.fmt{position:relative;height:100%;border-radius:6px;overflow:hidden;background:#000;transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1);opacity:.32}
.fmt.on{opacity:1;transform:translateY(-4px)}
.fmt img{width:100%;height:100%;object-fit:cover}
.fmt b{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;padding:3px 6px;border-radius:3px;background:rgba(0,0,0,.55);color:#fff;font-weight:500}
.fmt.r169{aspect-ratio:16/9}.fmt.r916{aspect-ratio:9/16}.fmt.r45{aspect-ratio:4/5}.fmt.r11{aspect-ratio:1/1}

/* shorter desktop screens: give the stage every pixel the header doesn't need */
@media (min-width:901px) and (max-height:860px){
  .fl-pin{gap:16px}
  .fl-step{padding-top:12px;gap:4px}
  .fl-step .t{font-size:clamp(17px,1.4vw,20px)}
  .fl-desc{font-size:15px}
  .story.scroll .st-foot{display:none}
  .st-bar{height:44px}
  .sc{padding:16px clamp(20px,2.4vw,32px);gap:12px}
  .sc-center{gap:14px}.sc-input{font-size:clamp(24px,2.4vw,34px)}
  .call{gap:16px;height:100%}
  .vc{max-height:none}
  .ag-list button{padding:8px 0;font-size:14px}
  .code{font-size:12px;line-height:1.45;padding:8px 0}
  .vc{max-height:calc(100% - 20px)}
  .code-h{padding-bottom:6px;margin-bottom:6px}
  .prev{padding:10px;gap:8px}
  .pv-h{font-size:clamp(20px,1.8vw,28px)}
  .pv-blocks span{padding:7px 9px;font-size:12px}
  .stack>span{padding:4px 10px;font-size:12px}
  .launch{gap:10px}.log{gap:4px;font-size:13px}
  .ln-big{font-size:clamp(24px,2.4vw,36px)}
  .sum li{padding:6px 0;font-size:14px}
  .plan{gap:20px}
  .sc{--eh:min(39vh,280px)}
  .pp-main{gap:8px;padding:10px}
  .pp-canvas{padding:36px 10px 10px;gap:8px}
  .pp-note{padding:10px}.pp-treat{font-size:14px;line-height:1.4}
  .pp-shots li{padding:4px 0}.pp-sched li{padding:5px 8px}
  .pp-frames span{aspect-ratio:16/9}.pp-frames span:nth-child(3){display:none}
  .sheet div{padding:8px 0}
  .board{max-width:440px;gap:8px}
  .vf{max-height:min(230px,40vh)}
  .grade{max-height:min(230px,40vh)}
  .formats{height:min(44%,200px);min-height:120px}
}
/* very short phones: the board drops its schedule strip */
@media (max-width:900px) and (max-height:720px){.pp-sched{display:none}}
/* phones: the same pinned story as desktop, rearranged to fit a narrow, tall screen */
.fl-now{display:none}
@media (max-width:900px){
  .fl-pin{gap:12px}
  .fl-side{gap:8px}
  .fl-steps{gap:6px}
  .fl-step{padding-top:10px;gap:0}
  .fl-step .t{display:none}
  .fl-now{display:block;font-size:22px;font-weight:650;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
  .fl-now.swap{animation:flIn .5s cubic-bezier(.2,.7,.2,1) both}
  .fl-desc{font-size:15px;height:4.5em;-webkit-line-clamp:3}
  .story.scroll .fl-pin{top:calc(var(--nav) + var(--inset) + 8px);height:calc(100svh - var(--nav) - var(--inset) - 20px);max-height:none}
  .story.scroll .st-foot{display:none}
  .st-bar{height:42px;padding:0 10px;gap:8px;grid-template-columns:auto minmax(0,1fr) 0}
  .st-nav{display:none}.st-dots{gap:6px}.st-dots i{width:10px;height:10px}
  .st-url{font-size:13px;height:28px;padding:0 28px}.st-rl{right:8px}
  
  .sc{padding:14px;gap:12px}
  /* tap-through fallback (reduced motion): scenes size to their content */
  .story:not(.scroll) .st-scenes{display:grid;grid-template-columns:minmax(0,1fr)}
  .story:not(.scroll) .sc{position:relative;inset:auto;grid-area:1/1;justify-content:flex-start;min-width:0}
  /* domain */
  .sc-center{gap:12px}.sc-q{font-size:20px}.sc-input{font-size:26px}
  .sc-seg button{padding:9px 8px;font-size:13px}
  .sc-seg.four{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px}
  /* call */
  .call,.plan{grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch;max-height:none;height:auto}
  .vc{max-height:none;height:auto;padding:6px;gap:6px}
  .vc-grid{flex:none;grid-template-rows:auto auto;gap:4px}
  .vt{aspect-ratio:2/1}
  .vt .av{width:32px;font-size:13px}
  .vt .nm{left:4px;bottom:4px;max-width:calc(100% - 8px);padding:2px 6px;font-size:11px}
  
  
  .bm{width:18px;height:18px}.bm.zoom{width:32px}
  .vb{width:30px;height:26px}.vb.end{width:40px}.vb svg{width:16px;height:16px}
  .ag-h{display:none}
  .ag-sub{font-size:15px;margin-bottom:2px}
  .agenda .ag-list{flex-direction:row;flex-wrap:wrap;gap:5px}
  .agenda .ag-list button{border:1px solid var(--line-d);border-radius:999px;padding:5px 10px;font-size:13px;gap:6px}
  .agenda .ag-list button i{width:12px;height:12px;border-radius:3px}
  .agenda .ag-list button[aria-pressed="true"] i::after{left:3px;top:.5px;width:3px;height:6px}
  /* build */
  .code{font-size:11px;line-height:1.5;padding:6px 0;max-height:170px}
  
  .code li{padding:0 10px}.code li::before{width:16px;margin-right:6px}
  
  
  
  
  
  /* launch */
.log{gap:4px;font-size:13px}
  
  
  /* slate + plan */
  .sc-input.sm{font-size:18px}
  
  
  .pp{grid-template-columns:minmax(0,1fr);height:auto}
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* shoot day, grade, delivery */
  .vf-l{left:32px}.vf-r{right:32px}
  .sw{font-size:15px}.sc-note{font-size:14px}
  
  .fmt{height:100%}
  .fmt b{left:4px;bottom:4px;padding:2px 4px;font-size:11px;letter-spacing:.02em}
  .ag-list.row{gap:2px 14px}.ag-list.row button{font-size:14px}
  .fl-cta{padding:0 16px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  
  .code li,.log li{animation:none;opacity:1}
}

[hidden]{display:none!important}

/* ===== build 04: the finished homepage, live, with the launch report beside it ===== */
.golive{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:clamp(20px,2.6vw,40px);align-items:stretch;width:100%;height:100%;min-height:0}
.gl-site{position:relative;display:flex;flex-direction:column;min-height:0;border-radius:8px;overflow:hidden;background:#eef0f2;color:var(--ink);box-shadow:0 0 0 1px var(--line-d),0 24px 50px -30px rgba(0,0,0,.9);
  background-image:linear-gradient(90deg,rgba(12,13,15,.06) 1px,transparent 1px);background-size:25% 100%;
  animation:glIn .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes glIn{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0);opacity:1}}
.gl-nav{flex:none;display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);padding:14px clamp(14px,2vw,26px);font-size:13px;font-weight:500;border-bottom:1px solid rgba(12,13,15,.1)}
.gl-nav > b{margin-right:auto;font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gl-links{display:flex;gap:clamp(10px,1.4vw,20px);color:var(--muted)}
.gl-pill{flex:none;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600}
.gl-hero{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.8vw,28px);align-items:center;padding:clamp(12px,2vw,32px) clamp(14px,2vw,26px)}
.gl-copy{display:flex;flex-direction:column;gap:10px;min-width:0}
.gl-photo{align-self:stretch;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:6px}
.gl-h{font-size:clamp(34px,4.6vw,76px);font-weight:800;letter-spacing:-.04em;line-height:.92;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:balance}
.gl-s{font-size:var(--t-body);font-weight:500;color:var(--muted)}
.gl-s span{color:var(--ink);font-weight:600}
.gl-btns{display:flex;gap:8px;margin-top:6px}
.gl-btns span{padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600}
.gl-b1{background:var(--accent);color:var(--ink)}
.gl-b2{box-shadow:0 0 0 1px rgba(12,13,15,.25) inset}
.gl-row{flex:none;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:8px;padding:0 clamp(14px,2vw,26px) clamp(14px,2vw,22px)}
.gl-row span{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:6px;background:#fff;font-size:12px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 0 rgba(12,13,15,.06);opacity:0;animation:flIn .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.7s + var(--i) * 120ms)}
.gl-row i{font-style:normal;color:var(--accent-ink)}
.gl-side{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2vh,24px);min-width:0}
.gl-side .log li{animation-delay:calc(.5s + var(--i) * 220ms)}
.gl-care{display:flex;flex-direction:column;gap:6px;padding-top:clamp(12px,1.8vh,20px);border-top:1px solid var(--line-d)}
.gl-k{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);font-weight:500}
.gl-care-h{font-size:clamp(18px,1.6vw,24px);font-weight:650;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.gl-price{font-size:var(--t-small);color:var(--on-dark-2);font-weight:500}
.gl-price b{font-size:var(--t-body);color:var(--accent);font-weight:650;font-variant-numeric:tabular-nums}
.gl-side .fl-cta{align-self:flex-start}
@media (min-width:901px) and (max-height:860px){.gl-nav{padding:10px 18px}.gl-hero{gap:6px}.gl-care-h{font-size:18px}}
@media (max-width:900px){
  .golive{display:flex;flex-direction:column;height:auto;gap:12px}
  .gl-site{flex:none}
  .gl-side .log{display:none}
  .gl-links{display:none}
  .gl-hero{padding:18px 14px;grid-template-columns:minmax(0,1fr)}
  .gl-photo{display:none}
  .gl-h{font-size:32px}.gl-s{font-size:13px}
  .gl-row{display:none}
  .gl-side{gap:10px}
  .gl-care{padding-top:10px}.gl-care-h{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.gl-site,.gl-row span{animation:none;opacity:1}}

/* ===== shoot 04: pick where you post, get a frame for each ===== */
.plats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:860px;margin:0 auto}
.plats button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid var(--line-d);border-radius:999px;font-size:var(--t-small);font-weight:500;color:var(--on-dark-2);transition:color .2s,border-color .2s,background .2s}
.plats button:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.plats button[aria-pressed="true"]{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.plats .bm{width:15px;height:15px;background:none;border-radius:0}
.plats .bm::before{width:15px;height:15px;background:currentColor}
.bm.instagram{--m:url("brands/instagram.svg")}.bm.tiktok{--m:url("brands/tiktok.svg")}.bm.youtube{--m:url("brands/youtube.svg")}.bm.facebook{--m:url("brands/facebook.svg")}
.bm.linkedin{--m:url("brands/linkedin.svg")}.bm.x{--m:url("brands/x.svg")}.bm.snapchat{--m:url("brands/snapchat.svg")}.bm.pinterest{--m:url("brands/pinterest.svg")}
.crop{transition:opacity .35s}
.crop.off{opacity:.28}
.ag-in{margin-bottom:14px}
.crops{list-style:none;display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,1.6vw,24px);--ch:min(calc(var(--eh) * .66),260px)}
.crop{display:flex;flex-direction:column;gap:6px;min-width:0}
.crop > span{display:block;align-self:flex-start;height:var(--ch);border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line-d)}
.crop img{width:100%;height:100%;object-fit:cover}
.crop[data-fmt="r169"] > span{aspect-ratio:16/9}.crop[data-fmt="r916"] > span{aspect-ratio:9/16}.crop[data-fmt="r45"] > span{aspect-ratio:4/5}.crop[data-fmt="r11"] > span{aspect-ratio:1/1}
.crop b{font-size:var(--t-label);letter-spacing:.1em;font-weight:600;color:var(--on-dark);font-variant-numeric:tabular-nums}
.crop i{font-style:normal;font-size:13px;line-height:1.35;color:var(--on-dark-2);font-weight:500;max-width:24ch;min-height:2.7em}
@media (max-width:900px){
  
  .plats{gap:4px;justify-content:flex-start}.plats button{height:28px;padding:0 9px;font-size:12px;gap:5px}.plats .bm,.plats .bm::before{width:12px;height:12px}
  .crops{flex-wrap:wrap;justify-content:flex-start;--ch:82px;gap:10px}
  .crop i{min-height:0}
  .crop i{max-width:20ch}
  .crop i{font-size:12px}
}

/* AI section: the card row sits between the intro and the catalog */
.ai-sec .shots-ai{margin-top:clamp(8px,1vw,16px);margin-bottom:clamp(40px,5vw,72px)}

/* ===== kickoff call: drawn like a Discord call with cameras off =====
   16:9 tiles, Discord's default avatars (no invented faces), a green ring on whoever is talking, grouped controls */
@media (min-width:901px){.call{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:center;height:100%;max-height:100%}.st-browser .sc:has(.call){padding-top:16px;padding-bottom:16px}}
.vc{container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;max-height:100%;min-height:0;padding:0;background:none;border-radius:0}
.vc-grid{flex:none;width:min(100cqw,(100cqh - 48px) * 16 / 9);aspect-ratio:16/9;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}
.vt{border-radius:8px}
.vt.t1{background:#3c3d42}.vt.t2{background:#868c9a}.vt.t3{background:#a5896a}.vt.you{background:#642f2f;box-shadow:none}
.vt .av{width:clamp(44px,5vw,76px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:0;transition:box-shadow .2s}
.vt .av::before{content:"";width:58%;height:58%;background:#fff;-webkit-mask:url("brands/discord.svg") center/contain no-repeat;mask:url("brands/discord.svg") center/contain no-repeat}
.av.d1{background:#5865f2}.av.d2{background:#3ba55c}.av.d3{background:#faa81a}.av.d4{background:#ed4245}
.vt.you .av{background:#ed4245}
.vt .nm{left:8px;bottom:8px;padding:3px 8px;border-radius:4px;background:rgba(0,0,0,.6);font-size:12px;font-weight:500}
/* whoever is talking gets Discord's green ring; it passes between the three founders */
@media (prefers-reduced-motion:no-preference){
  .vt.t1 .av,.vt.t2 .av,.vt.t3 .av{animation:talk 7.5s infinite}
  .vt.t2 .av{animation-delay:2.5s}.vt.t3 .av{animation-delay:5s}
}
@keyframes talk{0%,4%{box-shadow:0 0 0 0 #23a55a}6%,30%{box-shadow:0 0 0 3px #23a55a}33%,100%{box-shadow:0 0 0 0 #23a55a}}
.vc-bar{flex:none;display:flex;justify-content:center;align-items:center;gap:8px}
.vg{display:flex;align-items:center;height:38px;padding:0 4px;border-radius:8px;background:#2b2d31}
.vg .vb{width:36px;height:30px;background:none;border-radius:6px}
.vg .ct{width:14px;height:14px;margin:0 4px 0 -2px;fill:none;stroke:#b5bac1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vg.off{background:rgba(242,63,67,.16)}.vg.off svg{stroke:#f23f43}
.vg.end{background:#da373c;padding:0 8px}.vg.end svg{fill:#fff;stroke:none}
.vb svg{stroke:#dbdee1}
.ag-plat{display:flex;align-items:center;gap:8px;font-size:var(--t-small);font-weight:500;color:var(--on-dark-2);margin-bottom:6px}
.ag-plat .bm{width:24px;height:24px;border-radius:6px}.ag-plat .bm::before{width:15px;height:15px}
.ag-plat .bm.zoom{width:52px}.ag-plat .bm.zoom::before{width:42px;height:14px}
@media (max-width:900px){
  .vc{height:auto;container-type:normal}
  .vc-grid{width:100%;gap:4px}
  .vt{aspect-ratio:auto}
  .vt .av{width:36px}
  .vt .nm{font-size:11px;left:4px;bottom:4px;padding:2px 6px}
  .vc-bar{gap:6px}.vg{height:32px;padding:0 2px}.vg .vb{width:28px;height:26px}.vg .vb svg{width:16px;height:16px}.vg .ct{width:12px;height:12px}
  .ag-plat{font-size:13px;margin-bottom:2px}
}

/* ===== build 03: the editor, with the page it's building running beside it ===== */
.ide{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr) auto;width:100%;height:100%;min-height:0;border-radius:10px;overflow:hidden;background:#151619;box-shadow:0 0 0 1px var(--line-d)}
.ide-tree{grid-row:1;padding:12px 0;background:#121315;border-right:1px solid var(--line-d);font-size:12.5px;min-width:0;overflow:hidden}
.it-h{padding:0 14px 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6d7279;font-weight:600}
.ide-tree ul{list-style:none}
.ide-tree li{padding:3px 14px 3px calc(14px + var(--d) * 14px);color:#9ba1a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ide-tree li.dir{color:#cfd3d8;font-weight:600}
.ide-tree li.dir::before{content:"";display:inline-block;width:0;height:0;margin-right:7px;border:4px solid transparent;border-top:5px solid #6d7279;border-bottom:0;vertical-align:2px}
.ide-tree li.on{background:rgba(255,255,255,.06);color:#fff;box-shadow:2px 0 0 var(--accent) inset}
.ide-tree li.new{color:#7ee2a8}
.ide-ed{grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.ide-tabs{flex:none;display:flex;height:34px;background:#121315;border-bottom:1px solid var(--line-d);font-size:12.5px}
.ide-tabs span{display:flex;align-items:center;padding:0 14px;color:#6d7279;border-right:1px solid var(--line-d)}
.ide-tabs span.on{background:#151619;color:#e6e8eb;box-shadow:0 1px 0 #151619,0 -2px 0 var(--accent) inset}
.ide .code{flex:1;border:0;border-radius:0;background:none;padding:12px 0}
.ide .code ol{-webkit-mask-image:none;mask-image:none}
.ide .code li:last-child::after{content:"";display:inline-block;width:7px;height:1.1em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ide .code .k{color:#c792ea}.ide .code .s{color:#ffb86b}.ide .code .c{color:#6a737d;font-style:italic}
.ide-prev{grid-row:1;display:flex;flex-direction:column;gap:8px;padding:10px;background:#0f1012;border-left:1px solid var(--line-d);min-width:0;min-height:0}
.ip-bar{flex:none;display:flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:6px;background:#1d1f22;font-size:12px;color:#9ba1a9;font-weight:500}
.ip-dot{width:7px;height:7px;border-radius:50%;background:#28c840}
.gl-site.sm{flex:1;animation:none;box-shadow:none}
.gl-site.sm .gl-nav{padding:9px 12px;font-size:11px;gap:10px}.gl-site.sm .gl-nav > b{font-size:11px}.gl-site.sm .gl-pill{font-size:10px;padding:4px 9px}
.gl-site.sm .gl-hero{padding:12px;gap:10px}
.gl-site.sm .gl-h{font-size:clamp(20px,2vw,32px)}
.gl-site.sm .gl-btns span{padding:6px 10px;font-size:11px}
.gl-site.sm .gl-row{padding:0 12px 12px;gap:6px}.gl-site.sm .gl-row span{padding:7px 8px;font-size:10.5px}
.ide-status{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:16px;height:26px;padding:0 12px;background:#1b1c1f;border-top:1px solid var(--line-d);font-size:11.5px;font-weight:500;color:#9ba1a9;white-space:nowrap;overflow:hidden}
.ide-status .ai{margin-left:auto;color:var(--accent-2)}
@media (prefers-reduced-motion:reduce){.ide .code li:last-child::after{animation:none}}
@media (max-width:1180px) and (min-width:901px){.ide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ide-tree{display:none}}
@media (max-width:900px){
  .ide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;height:auto}
  .ide-tree{display:none}
  .ide .code{max-height:150px;font-size:11px}
  .ide-prev{grid-row:auto;border-left:0;border-top:1px solid var(--line-d)}
  .gl-site.sm .gl-photo{display:none}.gl-site.sm .gl-row{display:none}
  .ide-status{grid-row:auto;gap:10px;font-size:10.5px}.ide-status span:nth-child(3),.ide-status span:nth-child(4){display:none}
}

/* edit: the real timeline, one line of copy */
.ed-line{max-width:calc(var(--eh) * 1.784);margin:0 auto;font-size:var(--t-body);line-height:1.5;font-weight:500;color:var(--on-dark-2);text-wrap:pretty}
.ed-line b{color:var(--on-dark);font-weight:600}
/* deliver: a framing guide, true ratios drawn in hairlines; the frames your platforms need light up */
.crop > span{display:grid;place-items:center;background:rgba(255,255,255,.02);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;border-radius:4px;transition:box-shadow .3s,background .3s}
.crop em{font-style:normal;font-size:clamp(18px,1.8vw,28px);font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-dark)}
.crop:not(.off) > span{box-shadow:0 0 0 1.5px var(--accent) inset;background:rgba(128,128,128,.06)}
.crop.off{opacity:.35}
.crop i{margin-top:2px}
@media (max-width:900px){.crop em{font-size:15px}}
@media (min-width:901px){.story .sc .edit-shot{max-height:calc(100% - 56px)}.story .sc:has(.edit-shot){gap:14px;padding-top:20px;padding-bottom:20px}.ed-line{max-width:none;text-align:center}}

/* polish: phone tap targets reach 44px; selection and caret follow the palette */
::selection{background:var(--accent);color:var(--accent-fg)}
input,textarea{caret-color:var(--accent)}
@media (max-width:900px){
  .fl-step{min-height:44px;justify-content:center}
  .sc-seg button{min-height:40px}
  .agenda .ag-list button{min-height:36px;padding:6px 12px}
}

/* what we make: our real work, set in device mockups */
.p-img{display:block;margin:4px 0 8px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#141517}
.p-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.path:hover .p-img img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.path:hover .p-img img{transform:none}}

/* the visitor's site: a finished concept, photo-led */
.gl-site{background:#2a2420;color:#fff;background-image:none;isolation:isolate}
.gl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.gl-site::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,16,12,.72),rgba(20,16,12,.25) 60%,rgba(20,16,12,.1)),linear-gradient(0deg,rgba(20,16,12,.45),transparent 40%)}
.gl-nav{border-bottom-color:rgba(255,255,255,.18)}
.gl-links{color:rgba(255,255,255,.8)}
.gl-pill{background:#fff;color:var(--ink)}
.gl-s{color:rgba(255,255,255,.82)}.gl-s span{color:#fff}
.gl-b2{box-shadow:0 0 0 1px rgba(255,255,255,.6) inset;color:#fff}
.gl-row span{background:rgba(255,255,255,.92);color:var(--ink)}
.gl-h{text-shadow:0 2px 24px rgba(0,0,0,.25)}
@media (min-width:901px){.st-monitor .sc:has(.call){padding:clamp(24px,2.4vw,36px)}}
@media (max-width:900px){
  .vc-grid{aspect-ratio:2/1}
  .agenda .ag-list button{min-height:34px}
  .ag-plat{margin-bottom:0}.ag-in{margin-bottom:6px}
}
@media (max-width:900px){.vc{max-height:none;flex:none}}
@media (max-width:900px){
  .vc-grid{aspect-ratio:16/9;width:min(100%,250px);margin:0 auto}
  .vc{align-items:center}
  .sc:has(.call){padding:10px 14px}
  #bs1 .ag-plat{display:none}
  .agenda .ag-list button{min-height:32px}
}

/* ===== nav: the one action that matters gets a pill ===== */
.nav-links a.nav-cta{padding:6px 14px;border:1px solid currentColor;border-radius:999px;opacity:1}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
@media (max-width:900px){.nav-links a.nav-cta{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0}}

/* ===== FAQ: heading holds still on the left, answers open on the right ===== */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(28px,5vw,96px);align-items:start}
.faq-head{position:sticky;top:calc(var(--nav) + var(--inset) + 32px);display:flex;flex-direction:column;gap:18px}
.faq-head a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;white-space:nowrap}
.faq-list{border-top:1px solid var(--line-2)}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-size:var(--t-title);font-weight:650;letter-spacing:-.02em;line-height:1.2;transition:color .25s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-ink)}
.qa summary i{position:relative;flex:none;width:18px;height:18px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa p{max-width:62ch;padding:0 0 24px;font-size:var(--t-body);line-height:1.6;font-weight:500;color:var(--ink-2)}
.qa[open] p{animation:flIn .4s cubic-bezier(.2,.7,.2,1) both}
@media (max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}.faq-head{position:static}.qa summary{font-size:19px;padding:18px 0}}

/* ===== contact: the promise and a direct line on the left, the brief on the right ===== */
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,96px);align-items:start}
.ct-side{position:sticky;top:calc(var(--nav) + var(--inset) + 32px);display:flex;flex-direction:column;gap:22px}
.contact .ct-side h2{margin:0}
.ct-promise{font-size:var(--t-lede);line-height:1.5;font-weight:500;color:var(--on-dark);max-width:34ch}
.ct-direct{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line-d)}
.ct-k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.ct .mail a{font-size:clamp(22px,2.4vw,36px)}
.contact .cform{max-width:none;margin:0}
.chips{border:0;padding:0;margin:0;display:flex;flex-flow:row wrap;gap:8px}
.chips legend{width:100%;margin-bottom:10px;padding:0;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:14px;font-weight:500;color:var(--on-dark);transition:background .2s,border-color .2s,color .2s}
.chip:hover span{border-color:rgba(255,255,255,.45)}
.chip input:checked + span{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.ct-fine{margin-top:14px;font-size:13px;font-weight:500;color:var(--on-dark-2)}
.ct-fine a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.fld input::placeholder,.fld textarea::placeholder{color:#7d838b}
/* footer: three short columns, then the name, large */
.foot{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:28px clamp(32px,5vw,80px);align-items:start}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col a{font-family:var(--display);font-size:var(--t-small);letter-spacing:0;text-transform:none;font-weight:500;color:var(--on-dark)}
.foot-col a:hover{color:var(--accent-2)}
.foot-copy{justify-self:end;align-self:end}
.wordmark{margin:clamp(40px,6vw,80px) 0 -.12em;font-size:clamp(64px,17.4vw,300px);font-weight:850;font-variation-settings:"wdth" 125;letter-spacing:-.02em;line-height:.8;color:rgba(255,255,255,.07);white-space:nowrap;overflow:hidden;user-select:none}
@media (max-width:900px){
  .ct{grid-template-columns:minmax(0,1fr)}.ct-side{position:static}
  .foot{grid-template-columns:1fr 1fr}.foot-copy{justify-self:start;grid-column:1/-1}
  .foot-col a{min-height:36px;display:inline-flex;align-items:center}
}

/* ===== legal pages ===== */
.legal{max-width:760px;margin:0 auto;padding:calc(var(--nav) + clamp(64px,9vw,120px)) var(--g) 0}
.lg-head{display:flex;flex-direction:column;gap:18px;padding-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--line-2)}
.lg-date{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lg-s{padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--line)}
.lg-s h2{font-size:var(--t-title);font-weight:650;letter-spacing:-.02em;margin-bottom:12px}
.lg-s p{font-size:var(--t-body);line-height:1.65;font-weight:500;color:var(--ink-2);max-width:65ch}
.lg-s p + p{margin-top:10px}
.lg-s a,.lede a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.contact .ct-side h2{font-size:clamp(40px,4.8vw,84px)}
.chips .chip input{position:absolute;opacity:0;width:1px;height:1px;padding:0;margin:0;border:0;background:none}
.chips .chip span{font-family:var(--display);font-size:14px;letter-spacing:0;text-transform:none;color:var(--on-dark);background:none}
.chips .chip input:checked + span{background:var(--on-dark);color:var(--ink)}
.chips .chip{display:inline-flex;height:auto;padding:0;border:0;background:none;box-shadow:none;font:inherit}
.wordmark{font-size:calc((100vw - 2 * var(--g)) / 7.3);overflow:visible}
.foot .foot-col{gap:10px}

/* ===== stories: timed slides, no scroll-scrubbing ===== */
.fl-rail,.st-foot{display:none}
@media (min-width:901px){.story .fl-stage,.story:not(.scroll) .fl-stage{height:clamp(440px,calc(100svh - 260px),620px);min-height:0}}
.st-scenes{overflow:hidden}
.sc{opacity:1;transform:translateX(100%);visibility:hidden;transition:transform .9s cubic-bezier(.76,0,.24,1),visibility 0s .9s}
.sc.on{opacity:1;transform:translateX(0);visibility:visible;transition:transform .9s cubic-bezier(.76,0,.24,1),visibility 0s}
@media (prefers-reduced-motion:reduce){.sc,.sc.on{transition:none}}
/* a thin bar above each step: done steps full, the active one fills over its hold time */
.fl-step{position:relative}
.fl-step::before,.fl-step::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px}
.fl-step::before{background:var(--line-2)}
.fl-step::after{background:var(--ink);transform-origin:left;transform:scaleX(0)}
.fl-step.done::after{transform:scaleX(1);background:var(--line-2)}
.fl-step.run::after{animation:flBar var(--hold,6500ms) linear forwards}
.story.paused .fl-step.run::after{animation-play-state:paused}
@keyframes flBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.fl-step.run::after{animation:none;transform:scaleX(1)}}
.fl-copy{position:relative}
.fl-play{float:right;margin:0 0 6px 16px;height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:border-color .2s,background .2s}
.fl-play:hover{border-color:var(--ink)}
.fl-play[aria-pressed="true"]{background:var(--ink);color:var(--s1);border-color:var(--ink)}

/* ===== build 01: the domain, handled ===== */
.dom{width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px)}
.dom-field{display:flex;align-items:center;gap:16px;padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px);border-radius:16px;background:linear-gradient(180deg,#232528,#1a1b1e);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 24px 50px -30px rgba(0,0,0,.9)}
.dom-field .st-lock{width:14px;height:15px;border-width:2px;border-color:#7ee2a8;margin-top:6px}
.dom-field .st-lock::before{border-width:2px;border-color:#7ee2a8;top:-8px;height:8px;left:1.5px;right:1.5px}
.dom-name{min-width:0;font-size:clamp(28px,3.6vw,54px);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;clip-path:inset(0 0 0 0);animation:domType 1.1s steps(18,end) .25s both}
.dom-name b{color:var(--accent);font-weight:700}
.dom-name::after{content:"";display:inline-block;width:3px;height:.9em;margin-left:4px;vertical-align:-.08em;background:var(--accent);animation:caret 1s steps(1) infinite}
@keyframes domType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.dom-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.dom-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-content:start;padding-top:14px;border-top:1px solid var(--line-d);opacity:0;animation:flIn .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(1.3s + var(--i) * 260ms)}
.dom-steps .ok{grid-row:span 2;margin-top:2px}
.dom-steps b{font-size:var(--t-body);font-weight:650;color:var(--on-dark)}
.dom-steps i{font-style:normal;font-size:13px;line-height:1.4;font-weight:500;color:var(--on-dark-2)}
@media (prefers-reduced-motion:reduce){.dom-name,.dom-steps li{animation:none;opacity:1;clip-path:none}}
@media (max-width:900px){.dom-steps{grid-template-columns:minmax(0,1fr)}.dom-steps li{padding-top:10px}.dom-name{font-size:26px}.dom-field{padding:14px 16px;gap:12px}}

/* taglines and descriptions read one step larger */
.p-what,.row-head p,.fl-desc,.sc-does,.tier .sub,.step p,.qa p,.callout p,.ct-promise,.spec li{font-size:var(--t-desc)}
.lede{max-width:44ch}
@media (min-width:901px) and (max-height:860px){.fl-step .t{font-size:clamp(19px,1.6vw,23px)}}
@media (max-width:900px){.fl-desc{display:block;height:auto;min-height:calc(1.5em * var(--desc-lines,5));-webkit-line-clamp:unset;overflow:visible}}

/* readability: taglines and descriptions in near-black, not mid-gray */
.lede,.p-what,.row-head p,.fl-desc,.tier .sub,.step p,.qa p,.faq-head .lede,.spec li,.price-note{color:var(--ink-2)}
/* what we make: the three cards share rows, so titles of any length keep descriptions level */
@media (min-width:901px){
  .paths{grid-template-rows:auto auto auto 1fr}
  .paths > li{display:grid;grid-row:span 4;grid-template-rows:subgrid}
  .paths .path{grid-row:span 4;grid-template-rows:subgrid;align-content:start}
}

/* deliverables card: the edit, then the phone; each held 3.6s, then slid across in 0.9s */
.p-slides{position:relative}
.ps{position:absolute;inset:0;transform:translateX(100%)}
.ps img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .ps{animation:psSlide 9s cubic-bezier(.76,0,.24,1) infinite}
  .ps:nth-child(1){animation-delay:-.9s}
  .ps:nth-child(2){animation-delay:3.6s}
}
@media (prefers-reduced-motion:reduce){.ps:first-child{transform:none}}
@keyframes psSlide{0%{transform:translateX(100%)}10%,50%{transform:translateX(0)}60%{transform:translateX(-100%)}60.01%,100%{transform:translateX(100%)}}
.path:hover .p-slides img{transform:none}

/* ===== type: Archivo Expanded (wdth 125) for headings, Inter Tight for everything you read ===== */
.up,h1,h2,.h-xl,.h-l,.h-m,.logo,.wordmark,.p-need,.fl-step .t,.fl-now,.tier h3,.step h3,.qa summary,.sc-name,.price,.ln-big,.cs-name,.ct-side h2{font-family:var(--head);font-variation-settings:normal}
.up{font-weight:800;letter-spacing:-.02em;line-height:.98}
.h-xl{font-size:clamp(34px,5.4vw,92px)}
.h-l{font-size:clamp(28px,3.7vw,62px)}
.h-m{font-size:clamp(22px,2.5vw,40px)}
.contact .ct-side h2{font-size:clamp(30px,3.4vw,58px)}
.p-need,.tier h3,.step h3,.sc-name{font-size:clamp(18px,1.6vw,25px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.fl-step .t{font-size:clamp(15px,1.3vw,20px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
@media (min-width:901px) and (max-height:860px){.fl-step .t{font-size:clamp(14px,1.15vw,18px)}}
.fl-now{font-size:19px;font-weight:700}
.qa summary{font-size:clamp(16px,1.35vw,21px);font-weight:600;letter-spacing:-.01em}
.logo{font-weight:800;font-size:15px;letter-spacing:.01em}
.wordmark{font-weight:800;letter-spacing:-.03em;font-size:calc((100vw - 2 * var(--g)) / 8.6)}
.price{font-weight:800;letter-spacing:-.04em}
.tier.feat .spec li,.tier.feat .sub,.tier.feat .price-note{color:var(--on-dark-2)}
.tier.feat .spec li{color:var(--on-dark)}
/* two offers: websites and film */
.paths{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.paths,.tiers{grid-template-columns:minmax(0,1fr)}}
/* story steps: room between the step names, the description and the stage */
.fl-copy{padding-top:clamp(14px,1.5vw,22px)}
.fl-desc{max-width:72ch;line-height:1.6}
.story .fl-pin{gap:clamp(26px,2.8vw,44px)}
@media (max-width:900px){.fl-copy{padding-top:12px}.story .fl-pin{gap:18px}}
@media (min-width:901px){.fl-desc{height:3.2em}}
.hero h1{font-size:clamp(40px,6.6vw,116px);line-height:.95}

/* ===== shoot 04: deliver. A real Reel on a phone, and where the cuts go ===== */
.dv{display:grid;grid-template-columns:auto minmax(0,440px);gap:clamp(28px,5vw,88px);align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.dv-phone{height:min(100%,calc(var(--eh) + 40px));aspect-ratio:585/1266;padding:7px;border-radius:30px;background:#0b0b0c;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.9)}
.dv-phone img{width:100%;height:100%;object-fit:cover;border-radius:24px}
.dv-copy{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);min-width:0}
.dv-h{font-family:var(--head);font-size:clamp(24px,2.4vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase;color:#fff}
.dv-list{list-style:none;border-top:1px solid var(--line-d)}
.dv-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(8px,1vw,12px) 0;border-bottom:1px solid var(--line-d);font-size:var(--t-body);font-weight:500;color:var(--on-dark)}
.dv-m{display:flex;align-items:center;gap:12px}
.dv-list .bm{width:18px;height:18px;background:none;border-radius:0}
.dv-list .bm::before{width:18px;height:18px;background:var(--on-dark-2)}
.dv-web{width:16px;height:16px;border:1.5px solid var(--on-dark-2);border-radius:4px;position:relative;margin:0 1px}
.dv-web::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1.5px solid var(--on-dark-2)}
.dv-list b{font-size:var(--t-label);letter-spacing:.1em;font-weight:600;color:var(--on-dark-2);font-variant-numeric:tabular-nums}
@media (min-width:901px) and (max-height:860px){.dv-list li{padding:7px 0;font-size:15px}.dv-h{font-size:clamp(22px,2vw,30px)}}
@media (max-width:900px){
  .dv{grid-template-columns:minmax(0,1fr);gap:16px;height:auto;justify-items:center}
  .dv-phone{height:260px;border-radius:24px;padding:5px}.dv-phone img{border-radius:19px}
  .dv-copy{width:100%}.dv-h{font-size:22px}.dv-list li{padding:7px 0;font-size:15px}
}

/* edit step: AI assist, off unless the client says yes */
.aisw{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto}
.sw-ios{position:relative;flex:none;width:51px;height:31px;border-radius:999px;background:#39393d;transition:background .25s ease}
.sw-ios span{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.16);transition:transform .25s cubic-bezier(.3,.7,.2,1)}
.sw-ios[aria-checked="true"]{background:#34c759}
.sw-ios[aria-checked="true"] span{transform:translateX(20px)}
.sw-ios:active span{width:31px}
.sw-ios[aria-checked="true"]:active span{transform:translateX(16px)}
.aisw-t{display:flex;flex-direction:column;gap:2px;text-align:left}
.aisw-t b{font-size:var(--t-body);font-weight:600;color:var(--on-dark)}
.aisw-t span{font-size:var(--t-small);font-weight:500;color:var(--on-dark-2)}
@media (max-width:900px){.aisw{justify-content:flex-start}}


/* production row: on-camera / AI-made switch */
.prod-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.prod-sw{display:flex;align-items:center;gap:12px}
.prod-sw .ps-l{font-size:var(--t-small);font-weight:600;color:var(--muted);transition:color .2s}
.prod-sw .ps-l.on{color:var(--ink)}
.prod-sw .sw-ios{background:#a9adb3}
.prod-sw .sw-ios[aria-checked="true"]{background:#34c759}
.prod-note{margin:-6px 0 clamp(14px,1.6vw,22px);font-size:var(--t-small);font-weight:500;color:var(--ink-2)}
.reel-cam{min-height:clamp(200px,24vw,300px);display:grid;place-items:center;margin-top:8px}
.reel-cam p{max-width:46ch;text-align:center;font-size:var(--t-desc);font-weight:500;color:var(--ink-2);padding:clamp(28px,4vw,56px);border:1px dashed var(--line-2);border-radius:var(--r);width:100%}
.reel-cam a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* more air between a row heading and its carousel */
.row-head:has(+ .shots){margin-bottom:clamp(28px,3vw,46px)}

/* three-line hero headline */
.hero h1{max-width:none;font-size:clamp(34px,5vw,88px)}

/* deliver step: the finished Reel, photographed on a phone */
.dv-photo{height:min(100%,calc(var(--eh) + 40px));aspect-ratio:1400/1045;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -30px rgba(0,0,0,.9)}
.dv-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.dv-photo{height:220px}}

/* the sites carousel holds 24 now: slow the loop so the pace stays the same */
.shots:not(.shots-rev) .shots-row{animation-duration:230s}

/* story steps: bigger, heavier titles and a glass progress track */
.fl-step{padding-top:24px;gap:10px}
.fl-step .t{font-size:clamp(19px,1.75vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.12}
@media (min-width:901px) and (max-height:860px){.fl-step .t{font-size:clamp(17px,1.5vw,24px)}}
.fl-step::before{top:0;height:10px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 1px rgba(0,0,0,.05),0 0 0 .5px rgba(20,22,26,.12),0 2px 6px -2px rgba(20,22,26,.18);
  -webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8)}
.fl-step::after{top:2px;left:2px;right:2px;height:6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0,rgba(255,255,255,0) 55%),linear-gradient(90deg,#2b2d31,#0e0f11);
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.fl-step.run::after{background:linear-gradient(180deg,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 55%),linear-gradient(90deg,#ff8a4d,var(--accent));box-shadow:0 0 10px -1px rgba(128,128,128,.55)}
.fl-step.done::after{background:linear-gradient(180deg,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 60%),rgba(20,22,26,.32);box-shadow:none}
@media (prefers-reduced-transparency:reduce){.fl-step::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:#e7e8ea}}
@media (max-width:900px){.fl-step{padding-top:18px}.fl-step::before{height:8px}.fl-step::after{height:4px}}

/* ---------- domain scene: search, check, buy ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dom{position:relative;max-width:760px;gap:clamp(20px,2.6vw,34px)}
.dsr{position:relative;border-radius:22px;padding:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.95),0 0 120px -40px rgba(128,128,128,.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.dsr-bar{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);padding:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) clamp(18px,2vw,26px);border-radius:16px;background:linear-gradient(180deg,#1f2124,#17181b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.06)}
.dsr-ico{flex:none;width:clamp(22px,2vw,28px);height:clamp(22px,2vw,28px);color:var(--on-dark-2)}
.dsr-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dsr-q{flex:1;min-width:0;display:flex;align-items:center;font-size:clamp(24px,3.1vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.1;color:#fff;white-space:nowrap;overflow:hidden;min-height:1.1em}
.dsr-typed{overflow:hidden;text-overflow:ellipsis}
.dsr-caret{flex:none;width:3px;height:.95em;margin-left:3px;border-radius:2px;background:var(--accent);animation:caret 1s steps(1) infinite}
.dom:not([data-s="idle"]):not([data-s="type"]) .dsr-caret{opacity:0;animation:none}
.dsr-check{flex:none;position:relative;display:grid;place-items:center;height:clamp(40px,3.6vw,52px);padding:0 clamp(16px,1.8vw,24px);border-radius:12px;font-size:var(--t-small);font-weight:650;color:#0c0d0e;background:linear-gradient(180deg,#fff,#dcdde0);box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(0,0,0,.8);transition:transform .15s,filter .2s}
.dom[data-s="check"] .dsr-check{transform:scale(.96);filter:brightness(.9)}
.dom[data-s="check"] .dsr-check span{opacity:0}
.dom[data-s="check"] .dsr-check::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(12,13,14,.25);border-top-color:#0c0d0e;animation:dspin .6s linear infinite}
@keyframes dspin{to{transform:rotate(360deg)}}
/* results tray */
.dsr-res{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .75s cubic-bezier(.2,.8,.2,1),opacity .5s}
.dsr-res>*{min-height:0}
.dsr-in{overflow:hidden}
.dom[data-s="found"] .dsr-res,.dom[data-s="buy"] .dsr-res,.dom[data-s="done"] .dsr-res{grid-template-rows:1fr;opacity:1}
.dsr-row{overflow:hidden;display:flex;align-items:center;gap:12px;padding:0 clamp(16px,1.8vw,22px);font-size:var(--t-body);color:var(--on-dark)}
.dsr-row>*{margin:clamp(10px,1.1vw,14px) 0}
.dsr-row.hit{margin-top:8px;border-radius:14px;background:linear-gradient(90deg,rgba(126,226,168,.10),rgba(126,226,168,.02) 60%);box-shadow:inset 0 0 0 1px rgba(126,226,168,.22)}
.dsr-row.hit .dsr-dn{font-size:clamp(17px,1.5vw,21px);font-weight:700;color:#fff}
.dsr-row.alt{color:var(--on-dark-2);font-size:14px}
.dsr-row.alt>*{margin:9px 0}
.dom[data-s="done"] .dsr-row.hit .dsr-tag{opacity:0}
.dsr-tag{transition:opacity .3s}
.dsr-row.alt+.dsr-row.alt{border-top:1px solid rgba(255,255,255,.06)}
.dsr-row b{font-weight:600}
.dsr-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#7ee2a8;box-shadow:0 0 0 4px rgba(126,226,168,.14)}
.dsr-row.taken .dsr-dot{background:#5b5e64;box-shadow:none}
.dsr-tag{font-size:12px;font-weight:600;letter-spacing:.02em;color:#7ee2a8}
.dsr-row.taken .dsr-tag{color:var(--on-dark-2)}
.dsr-buy{margin-left:auto!important;position:relative;display:grid;place-items:center;min-width:118px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px -8px rgba(128,128,128,.75);transition:transform .15s,background .35s,box-shadow .35s}
.dsr-buy>span{grid-area:1/1;transition:opacity .25s,transform .25s}
.dsr-buy .b2{opacity:0;transform:translateY(6px)}
.dom[data-s="buy"] .dsr-buy{transform:scale(.94)}
.dom[data-s="done"] .dsr-buy{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 55%),#1f7a4d;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px -10px rgba(52,199,89,.6)}
.dom[data-s="done"] .dsr-buy .b1{opacity:0;transform:translateY(-6px)}
.dom[data-s="done"] .dsr-buy .b2{opacity:1;transform:none}
.dom[data-s="buy"] .dsr-buy::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(128,128,128,.6);animation:dring .5s ease-out forwards}
@keyframes dring{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}
/* setup steps */
.dom .dom-steps li{opacity:1;animation:none;transition:opacity .35s;border-top:1px solid var(--line-d);position:relative}
.dom .dom-steps li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:#7ee2a8;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.dom .dom-steps li.s-ok::before{width:100%}
.dom .dom-steps li:not(.s-run):not(.s-ok){opacity:.38}
.dst{grid-row:span 2;margin-top:2px;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);position:relative;flex:none}
.s-run .dst{box-shadow:none;border:1.5px solid rgba(126,226,168,.25);border-top-color:#7ee2a8;animation:dspin .7s linear infinite}
.s-ok .dst{box-shadow:none;background:rgba(126,226,168,.18)}
.s-ok .dst::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;border:solid #7ee2a8;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
/* the pointer */
.dsr-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;pointer-events:none;fill:#fff;stroke:#0c0d0e;stroke-width:1.2;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transform-origin:22% 13%;transition:transform .8s cubic-bezier(.45,0,.2,1)}
.dom[data-s="check"] .dsr-cursor,.dom[data-s="buy"] .dsr-cursor{animation:dclick .32s ease-out}
@keyframes dclick{0%,100%{scale:1}40%{scale:.86}}
@media (max-width:900px){.dsr-q{font-size:clamp(17px,4.8vw,22px)}.dsr-bar{gap:10px;padding:12px 10px 12px 14px}.dsr-ico{width:18px;height:18px}.dsr-check{height:36px;padding:0 12px;font-size:13px}.dsr-row{gap:8px;padding:0 12px}.dsr-row.hit .dsr-dn{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dsr-row.hit .dsr-tag{display:none}.dsr-buy{min-width:0;height:34px;padding:0 14px;font-size:13px}.dsr-row.alt{display:none}}
@media (prefers-reduced-motion:reduce){.dsr-cursor{display:none}.dsr-res{transition:none}}

/* hero type: nav and buttons in the logo face (Archivo Expanded); the subline stays in Inter Tight */
.nav-links a,.hero .btn{font-family:var(--head);font-weight:600;letter-spacing:.06em;font-size:calc(var(--t-label) - 1px)}
.hero .btn{font-weight:700}

/* the stack we build with, under Websites and apps */
.p-stack{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.p-stack .ps-k{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.p-stack>span:not(.ps-k){font-family:var(--head);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:7px 11px;white-space:nowrap;border-radius:999px;color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--line)}
.p-stack,.p-stack *{cursor:default;user-select:none;-webkit-user-select:none}
/* official marks for the stack, on small glass tiles */
.p-stack{gap:10px}
.p-stack>span.lg{padding:0;width:26px;height:26px;display:grid;place-items:center;background:none;box-shadow:none;border:0;border-radius:0}
.p-stack .lg::before{content:"";width:22px;height:22px;background:var(--c);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.hero h1{margin-bottom:clamp(14px,1.2vw,18px)}
/* short screens (phones in landscape): keep the whole hero in view */
@media (max-height:520px){.hero{min-height:0}.hero h1{font-size:clamp(24px,4.4vw,40px);margin-bottom:16px}.hero .inner{padding-bottom:14px}.hero .btn{height:38px}}
.hero h1 br.sb{display:none}
@media (max-width:760px){.hero h1 br.lb{display:none}.hero h1 br.sb{display:inline}.hero h1{font-size:min(30px,7.6vw)}}
.gl-stg{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;line-height:1.35;color:var(--on-dark-2)}
.gl-stg-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#f5b14c;box-shadow:0 0 0 3px rgba(245,177,76,.16)}

/* Archivo at its expanded width everywhere it is used (Inter Tight has no width axis, so body text is unaffected) */
html{font-stretch:125%}

/* ===== audit quick fixes ===== */
/* contrast: chips, the steel swatch and form placeholders clear 4.5:1 */
.mb-chip.warm{background:#a2564f}.mb-chip.gold{background:#7f6638}
.mb-sw.s6{color:#0c0d0e}
.fld input::placeholder,.fld textarea::placeholder{color:#8f959d}
/* the pricing footnote is a sentence, so it reads in sentence case */
.fine{text-transform:none;letter-spacing:.01em;font-family:var(--display)}
/* smallest label up to a readable size */
.p-stack .ps-k{font-size:12px}
/* touch targets: invisible 44px hit areas, no visual change */
.fl-play,.foot a,.logo{position:relative}
.fl-play::before,.foot a::before,.logo::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.sw-ios::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}

/* carousel: real work vs concepts, said plainly */
.shot .cap{flex-direction:row;align-items:center;gap:8px}
.ctag{flex:none;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.ctag.real{color:#1f7a4d;box-shadow:inset 0 0 0 1px rgba(31,122,77,.35);background:rgba(52,199,89,.08)}

/* pricing reassurance */
.assure{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);padding:clamp(22px,2.6vw,34px) var(--g) 0}
.assure li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:var(--t-body);line-height:1.45;color:var(--ink-2)}
.assure b{color:var(--ink);font-weight:650}
.as-ok{width:20px;height:20px;border-radius:50%;background:rgba(52,199,89,.14);position:relative;margin-top:1px;grid-row:span 2}
.as-ok::after{content:"";position:absolute;left:7px;top:4px;width:4px;height:9px;border:solid #1f7a4d;border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (max-width:900px){.assure{grid-template-columns:minmax(0,1fr)}}

/* what happens after you send */
.next-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-d)}
.next-steps li{display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.4;color:var(--on-dark-2)}
.next-steps b{font-family:var(--head);font-size:11px;letter-spacing:.08em;color:var(--accent)}
@media (max-width:760px){.next-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* mobile sticky CTA */
.m-cta{display:none}
@media (max-width:760px){
  .m-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;height:52px;align-items:center;justify-content:center;gap:10px;border-radius:999px;
    font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(18,19,21,.86);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px -12px rgba(0,0,0,.6);
    transform:translateY(calc(100% + 24px));opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none}
  .m-cta.on{transform:none;opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.m-cta{transition:none}}

/* desktop hero: the film is sized by the hero's height, so the watch always clears the headline, even fully exploded */
@media (min-width:761px){
  .hero{background:#060607}
  .hero video,.hero .poster{inset:auto;top:-5%;left:50%;height:74%;width:auto;aspect-ratio:16/9;object-fit:cover;transform:translateX(-50%);
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
}

/* promises notice, bottom left, dismissible */
.notice{position:fixed;right:16px;bottom:16px;z-index:60;width:min(440px,calc(100vw - 32px));padding:20px 20px 16px;border-radius:18px;color:var(--on-dark);
  background:rgba(18,19,21,.9);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.08),0 24px 60px -24px rgba(0,0,0,.7);
  transform:translateY(16px);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.notice.on{transform:none;opacity:1}
.nt-k{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.nt-h{font-family:var(--head);font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.005em;color:#fff;padding-right:30px}
.nt-lead{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--on-dark-2)}
.nt-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.nt-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;font-size:13px;line-height:1.45;color:var(--on-dark-2)}
.nt-list li b{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--accent);padding-top:2px}
.nt-list strong{color:var(--on-dark);font-weight:600}
.nt-fine{margin-top:12px;font-size:12px;line-height:1.4;color:rgba(155,161,169,.85)}
.nt-foot{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.nt-foot a{color:var(--on-dark-2);text-decoration:underline;text-underline-offset:3px}
.nt-foot a:hover{color:#fff}
.nt-ok{margin-left:auto;height:36px;padding:0 16px;border-radius:999px;background:#fff;color:#0c0d0e;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nt-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;color:var(--on-dark-2);font-size:20px;line-height:1;display:grid;place-items:center}
.nt-x:hover{color:#fff;background:rgba(255,255,255,.08)}
.nt-ok:focus-visible,.nt-x:focus-visible,.nt-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.notice-open .m-cta{opacity:0;pointer-events:none}
@media (max-width:760px){.notice{left:10px;right:10px;bottom:10px;width:auto;padding:16px 16px 12px}.nt-list{gap:8px;margin-top:12px;padding-top:12px}.nt-lead{font-size:13px}.nt-h{font-size:14px}}
@media (prefers-reduced-motion:reduce){.notice{transition:none}}

/* Built to tolerance: the three things every business needs */
.p-need .p-k{display:block;margin-bottom:8px;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}

/* section labels and card links: bold so they read at a glance */
.rule.idx,.rule.idx b{font-weight:700}
.rule.idx{color:var(--ink-2)}
.p-go{font-weight:700}
.fl-play{display:none}

/* Built to tolerance now follows the two carousels */
.cap-head{margin-top:clamp(72px,8vw,128px)}
.shots{--shot-gap:clamp(22px,2.4vw,40px)}

/* ========== HERO WORD ROTATOR ========== */
/* A slot-machine reel: a one-line window (height set by the script) over a
   vertical strip of words. The strip moves on transform only; the curve
   overshoots slightly so each word lands with a small mechanical settle,
   and the words blur while the reel is moving fast. */
.rot{display:inline-block;vertical-align:bottom;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.rot-strip{display:block;transition:transform 800ms cubic-bezier(.2,.85,.3,1.02)}
.rot-w{display:block;white-space:nowrap;transition:filter 220ms ease}
.rot-strip.spinning .rot-w{filter:blur(3px)}
@media (prefers-reduced-motion:reduce){.rot-strip,.rot-w{transition:none}}

/* ========== SECTION BREAK (under the hero) ========== */
/* A hairline draws in from the left, then each word rises out of its own
   mask in sequence. Driven by the shared .rv / .in reveal observer. */
.brk{--ease-out:cubic-bezier(0.23,1,0.32,1);position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 32px;padding-top:clamp(20px,2.2vw,32px);margin-bottom:clamp(44px,5.5vw,80px)}
.brk.rv{opacity:1;transform:none}
.brk p{margin:0}
.brk-rule{position:absolute;top:0;left:var(--g);right:var(--g);height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:left center;transition:transform 1100ms var(--ease-out)}
.brk.in .brk-rule{transform:scaleX(1)}
.brk .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.brk .w>span{display:inline-block;transform:translateY(110%);transition:transform 800ms var(--ease-out);transition-delay:calc(200ms + var(--i) * 70ms)}
.brk.in .w>span{transform:none}
.brk-l{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,24px)}
.brk-n,.brk-t,.brk-big{font-family:var(--head);font-weight:800;font-variation-settings:"wdth" 125;text-transform:uppercase;line-height:1;font-size:clamp(26px,3.3vw,54px);letter-spacing:-.015em}
.brk-n{color:var(--accent);font-feature-settings:"tnum"}
.brk-t{color:var(--ink)}
.brk-r{display:flex;align-items:flex-end;gap:12px}
.brk-big{color:var(--ink);font-feature-settings:"tnum"}
.brk-sm{font-family:var(--mono);font-size:var(--t-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:.35em}
@media (prefers-reduced-motion:reduce){.brk-rule{transform:none;transition:none}.brk .w>span{transform:none;transition:none}}

/* ========== ACCENT ON DARK SURFACES ==========
   The accent is black; inside dark sections and dark mockups it flips to
   white so buttons, labels and rings stay visible. */
.media,.hero,.contact,.callout,.tier.feat,.toast,.fl-stage,.st-bar,.code,.mb,.tp-col,.ide,.vc,.pp,.notice,.dv-phone,.dsr-bar,.dom-field,.p-img,.shot.reel{--accent:#ffffff;--accent-2:#d6d6d6;--accent-ink:#ffffff;--accent-fg:#0a0a0a}

/* ========== EDIT SLIDE: a working video editor ==========
   Designed at 1240x698 and scaled to fit the slide by the script. A cursor
   drops a clip, grades it, turns on captions, plays, exports and downloads;
   each step is a class on .vx so the whole run is driven from one timeline. */
.vx-fit{position:relative;flex:1;min-height:0;width:100%}
@media (max-width:900px){.vx-fit{flex:none;aspect-ratio:1240/698}}
.vx{position:absolute;left:var(--vx-x,0px);top:var(--vx-y,0px);width:1240px;height:698px;transform:scale(var(--vx-s,.5));transform-origin:0 0;display:grid;grid-template-rows:46px minmax(0,1fr) 214px;
  background:#0f1013;color:#e9eaee;border-radius:14px;overflow:hidden;font-family:var(--display);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.8)}
.vx button{font:inherit;color:inherit;cursor:default}
.vx-top{display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px}
.vx-dots{display:flex;gap:6px}.vx-dots i{width:11px;height:11px;border-radius:50%;background:#2c2e33}
.vx-app{font-weight:700;letter-spacing:.02em}.vx-proj{color:#9aa0aa}.vx-sp{flex:1}.vx-res{color:#7d838d;font-size:12px}
.vx-export{height:30px;padding:0 16px;border-radius:8px;background:#fff;color:#0b0c0e!important;font-weight:600;font-size:13px;transition:transform .15s}
.vx-body{display:grid;grid-template-columns:230px minmax(0,1fr) 270px;min-height:0}
.vx-bin{padding:14px;border-right:1px solid rgba(255,255,255,.07)}
.vx-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7d838d;margin-bottom:10px}
.vx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vx-th{position:relative;display:block;padding:0;border-radius:6px;overflow:hidden;aspect-ratio:16/10;outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s,transform .15s}
.vx-th img{width:100%;height:100%;object-fit:cover;display:block}
.vx-th i{position:absolute;right:4px;bottom:4px;font-style:normal;font-size:10px;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.65)}
.vx-th.sel{outline-color:#fff}
.vx-view{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:#0b0c0e;min-width:0}
.vx-screen{position:relative;height:290px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.vx-screen img{width:100%;height:100%;object-fit:cover;display:block;transition:filter 1s ease}
.vx.graded .vx-screen img{filter:saturate(1.28) contrast(1.12) sepia(.16) brightness(1.05)}
.vx-cap{position:absolute;left:50%;bottom:16px;padding:6px 12px;border-radius:6px;background:rgba(0,0,0,.62);font-size:17px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .35s,transform .35s}
.vx.caps .vx-cap{opacity:1;transform:translate(-50%,0)}
.vx-trans{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.vx-tc.dim{color:#6f7580}
.vx-play{width:34px;height:34px;padding:0;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .15s}
.vx-play svg{width:14px;height:14px;fill:#0b0c0e}
.vx-insp{display:flex;flex-direction:column;gap:13px;padding:14px;border-left:1px solid rgba(255,255,255,.07)}
.vx-tabs{display:flex;gap:4px;padding:3px;border-radius:8px;background:#17181c}
.vx-tab{flex:1;text-align:center;font-size:12px;padding:6px 0;border-radius:6px;color:#9aa0aa;transition:background .2s,color .2s}
.vx-tab.on{background:#2a2c31;color:#fff}
.vx-sl{display:grid;grid-template-columns:76px 1fr 36px;align-items:center;gap:10px;font-size:12px;color:#aab0b9}
.vx-sl b{position:relative;height:4px;border-radius:4px;background:#26282d}
.vx-sl b i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);border-radius:4px;background:#e9eaee;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.vx-sl b i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.vx-sl em{font-style:normal;text-align:right;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.vx-row{display:flex;justify-content:space-between;align-items:center;padding-top:9px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:#aab0b9}
.vx-row em{font-style:normal;font-family:var(--mono);color:#7d838d}
.vx-tog{position:relative;width:36px;height:20px;padding:0;border-radius:20px;background:#2a2c31;transition:background .25s}
.vx-tog i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s}
.vx.caps .vx-tog{background:#4f8cff}.vx.caps .vx-tog i{transform:translateX(16px)}
.vx-tl{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 14px 10px;border-top:1px solid rgba(255,255,255,.07);background:#0d0e11}
.vx-ruler{display:flex;justify-content:space-between;margin-left:34px;font-family:var(--mono);font-size:10px;color:#6f7580}
.vx-tr{display:grid;grid-template-columns:28px 1fr;gap:6px;align-items:center;height:36px}
.vx-tr b{font-family:var(--mono);font-size:10px;color:#7d838d}
.vx-lane{position:relative;height:100%;border-radius:4px;background:#15161a}
.vx-clip{position:absolute;left:var(--x);width:var(--w);top:2px;bottom:2px;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vx-clip img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.vx-clip.drop{opacity:0;transform:translateY(-46px) scale(.92);box-shadow:inset 0 0 0 2px #fff;transition:opacity .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.vx.dropped .vx-clip.drop{opacity:1;transform:none}
.vx-txt{position:absolute;left:var(--x);width:var(--w);top:6px;bottom:6px;display:flex;align-items:center;padding:0 6px;border-radius:4px;background:#3f45a8;font-size:10px;white-space:nowrap;overflow:hidden;opacity:0;transform:scaleX(.2);transform-origin:left;transition:opacity .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.vx.caps .vx-txt{opacity:1;transform:none}.vx.caps .vx-txt:nth-child(2){transition-delay:.12s}.vx.caps .vx-txt:nth-child(3){transition-delay:.24s}
.vx-wave{display:flex;align-items:center;gap:2px;padding:0 4px;overflow:hidden}
.vx-wave i{flex:1;min-width:1px;border-radius:1px;background:#3f8a63}
.vx-head{position:absolute;top:8px;bottom:10px;left:calc(48px + var(--p,.16) * (100% - 62px));width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.vx-head::before{content:"";position:absolute;left:-5px;top:-2px;border:6px solid transparent;border-top-color:#fff}
.vx.playing .vx-head{transition:left 1.5s linear}
.vx-pop{position:absolute;right:16px;top:54px;z-index:6;width:300px;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;background:#1a1b20;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.85);
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .25s,transform .3s}
.vx.ex .vx-pop{opacity:1;transform:none}
.vx-pop-h{font-weight:600;font-size:14px}
.vx-pop-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#9aa0aa}
.vx-pop-row b{color:#e9eaee;font-weight:500}
.vx-chips{display:flex;gap:4px}.vx-chips i{font-style:normal;font-size:11px;padding:2px 7px;border-radius:5px;background:#2a2c31;color:#fff}
.vx-dl{position:relative;height:38px;padding:0;border-radius:9px;background:#fff;color:#0b0c0e!important;font-weight:600;font-size:13px;overflow:hidden;transition:transform .15s}
.vx-dl-t{position:relative;z-index:1}
.vx-bar{position:absolute;inset:0}.vx-bar i{position:absolute;inset:0;background:#cfe8d9;transform:scaleX(0);transform-origin:left}
.vx.dling .vx-bar i{transform:scaleX(1);transition:transform 1s cubic-bezier(.4,0,.2,1)}
.vx .press{transform:scale(.94)}
.vx-cursor,.mb-cursor{position:absolute;left:0;top:0;z-index:9;pointer-events:none;fill:#fff;stroke:#0c0d0e;stroke-width:1.2;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transition:transform .7s cubic-bezier(.45,0,.2,1)}
.vx-cursor{width:24px;height:24px}
.mb-cursor{width:34px;height:34px}
.vx-cursor.click,.mb-cursor.click{animation:curclick .3s ease-out}
@keyframes curclick{50%{scale:.8}}

/* ========== MOOD BOARD: the cursor wires it up ========== */
.mb-lines path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.45,0,.2,1)}
.mb .mb-pick{outline:2px solid #fff;outline-offset:3px}
.mb-col img{transition:transform .5s cubic-bezier(.2,.8,.2,1),outline-color .2s}
.mb-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.mb-card.mb-pick{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.vx-cursor,.mb-cursor{display:none}.mb-lines path{transition:none}}
/* the mindset break sits right above "Built to tolerance": it takes the section's top spacing and hugs the heading */
.brk:has(+ .cap-head){margin-top:clamp(72px,8vw,128px);margin-bottom:clamp(24px,3vw,40px)}
.brk + .cap-head{margin-top:0}

/* ========== DEPTH: branding, advertising, content, design ========== */
.deep{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(8px,1vw,16px);border-top:1px solid var(--line-2)}
.deep li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px clamp(16px,2vw,28px);align-content:start;padding:clamp(24px,2.8vw,40px) clamp(16px,2.4vw,40px) clamp(24px,2.8vw,40px) 0;border-bottom:1px solid var(--line)}
.deep li:nth-child(even){padding-left:clamp(16px,2.4vw,40px);padding-right:0;border-left:1px solid var(--line)}
.deep .dn{grid-row:span 2;font-family:var(--head);font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(30px,3.2vw,52px);line-height:.9;color:var(--accent);font-feature-settings:"tnum"}
.deep h3{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:var(--t-title);line-height:1}
.deep p{font-size:var(--t-desc);line-height:1.5;color:var(--muted);max-width:42ch}
@media (max-width:760px){.deep{grid-template-columns:1fr}.deep li,.deep li:nth-child(even){padding-left:0;padding-right:0;border-left:0}}
.deep-img{grid-column:1/-1;margin:0 0 clamp(14px,1.6vw,22px);border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#1a1b1e;box-shadow:0 0 0 1px var(--line),0 24px 50px -32px rgba(0,0,0,.55)}
.deep-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.deep li:hover .deep-img img{transform:scale(1.03)}}

/* ========== WHAT WE BUILD: tucked under the hero ========== */
/* pulled up to close the gap after the hero, bigger cards, and the
   carousels sit inside the same edge inset as the hero film */
.hero + .sec{padding-top:clamp(36px,4vw,64px)}
.hero + .sec > .brk{margin-bottom:clamp(34px,3.6vw,56px)}
.brk + .row-head{margin-top:0}
.hero + .sec .row-head:has(+ .shots){margin-bottom:clamp(18px,2vw,30px)}
.hero + .sec .prod-head{margin-top:clamp(44px,4.6vw,76px)}
.hero + .sec .shots{margin-inline:var(--inset)}
.hero + .sec .shots-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.hero + .sec .shot,.hero + .sec .shot.reel{width:clamp(280px,31vw,580px)}
@media (max-width:760px){.hero + .sec .shot,.hero + .sec .shot.reel{width:min(78vw,320px)}}

/* How we build a site: a taller browser window */
@media (min-width:901px){.story[data-flow="build"] .fl-stage{height:clamp(520px,calc(100svh - 150px),780px)}}

/* We go deeper now follows the three paths under Built to tolerance */
.paths + .deep-head{margin-top:clamp(72px,8vw,128px)}

/* pricing: each tier reads "Book a call" in place of a number, on one line */
.tier .price.custom .amt{font-size:clamp(28px,2.7vw,46px);line-height:1}
/* 901-1100px: three tiers across the full width (the 640px cap is for the single column) */
@media (min-width:901px) and (max-width:1100px){.tiers{max-width:none;margin:0}}
/* the production reel holds 10 now: shorter loop so the pace matches the old 17 at 128s */
.shots-ai-reel .shots-row{animation-duration:75s}

/* hero: after the watch, three full-bleed clips play in turn. They fill the
   whole frame (no oval), and a darker veil keeps the headline readable over them */
.hero .hero-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:761px){.hero video.hero-reel{inset:0;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;transform:none;-webkit-mask-image:none;mask-image:none}}
.hero .shade::after{content:"";position:absolute;inset:0;background:rgba(8,9,10,.38);opacity:0;transition:opacity 1s ease}
.hero.reel-on .shade::after{opacity:1}
/* clips stack above the watch in page order; the watch stays fully visible underneath */
.hero .hero-reel{z-index:1}

/* Our mindset now opens the section right under the hero; What we build and the carousels follow We go deeper */
.hero + .sec > .brk:first-child{margin-top:0}
.deep + .brk{margin-top:clamp(72px,8vw,128px)}

/* We go deeper: four compact blocks in one row on desktop, each with a
   "What you get" list. Nested list items are reset so the block styles above
   (grid, hairlines, padding) only apply to the four blocks themselves. */
.deep > li .dn{grid-row:auto;align-self:center;font-size:clamp(22px,2vw,32px)}
.deep > li h3{align-self:center;font-size:clamp(17px,1.35vw,22px)}
.deep > li > p{grid-column:1/-1;font-size:var(--t-small);line-height:1.55;max-width:none}
.deep-img{aspect-ratio:4/3;margin-bottom:clamp(10px,1.2vw,16px)}
.deep .deep-k{margin-top:6px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.deep .deep-get{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;gap:6px}
.deep > li .deep-get li{display:block;padding:0 0 0 16px;border:0;position:relative;font-size:var(--t-small);line-height:1.45;color:var(--ink-2)}
.deep > li .deep-get li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--ink)}
@media (min-width:1100px){
  .deep{grid-template-columns:repeat(4,minmax(0,1fr))}
  .deep > li,.deep > li:nth-child(even){padding:clamp(22px,2.2vw,32px) clamp(14px,1.4vw,22px);border-left:1px solid var(--line)}
  .deep > li:first-child{border-left:0;padding-left:0}
  .deep > li:last-child{padding-right:0}
}
@media (max-width:760px){.deep-img{aspect-ratio:16/10}}
.deep > li{column-gap:12px}

/* We go deeper, leveled: every block is the same width (dividers drawn in the
   gaps, not as padding), and each block's rows (image, title, text, label,
   list) share one row grid with its neighbours, so they line up across */
@media (min-width:761px){
  .deep{--cg:clamp(28px,2.8vw,44px);column-gap:var(--cg)}
  .deep > li,.deep > li:nth-child(even),.deep > li:first-child,.deep > li:last-child{padding:clamp(22px,2.2vw,32px) 0;border-left:0;position:relative;
    grid-row:span 5;grid-template-rows:subgrid;row-gap:8px}
  .deep > li::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--cg) / -2);width:1px;background:var(--line);display:none}
  .deep > li > .deep-img{grid-row:1}
  .deep > li > .dn,.deep > li > h3{grid-row:2}
  .deep > li > p:not(.deep-k){grid-row:3;align-self:start}
  .deep > li > .deep-k{grid-row:4;align-self:end}
  .deep > li > .deep-get{grid-row:5;align-self:start}
}
@media (min-width:761px) and (max-width:1099px){.deep > li:nth-child(even)::before{display:block}}
@media (min-width:1100px){.deep > li:not(:first-child)::before{display:block}}

/* Our mindset now runs: We go deeper, then Built to tolerance, then What we build */
.brk + .deep-head{margin-top:0}
.deep + .cap-head{margin-top:clamp(72px,8vw,128px)}
.paths + .brk{margin-top:clamp(72px,8vw,128px)}

/* We go deeper: larger, bolder copy */
.deep > li > p:not(.deep-k){font-size:clamp(15px,1.15vw,17px);font-weight:600;line-height:1.5;color:var(--ink)}
.deep .deep-k{font-size:13px;font-weight:700;color:var(--ink-2)}
.deep > li .deep-get li{font-size:clamp(14.5px,1.05vw,16px);font-weight:600;color:var(--ink)}
.deep > li .deep-get li::before{top:.68em;height:1.5px}

/* ========== TIGHTER RHYTHM ==========
   One pass over the page's vertical spacing so no section sits in dead air:
   section tops, sub-section breaks, heading-to-content and the contact block
   all come down roughly a third, scaled the same way on every screen size. */
.sec{padding-top:clamp(56px,6.4vw,96px)}
.head{margin-bottom:clamp(22px,2.6vw,36px)}
.cap-head,.deep + .cap-head{margin-top:clamp(56px,6vw,88px)}
.paths + .brk,.deep + .brk{margin-top:clamp(56px,6vw,88px)}
.contact{margin-top:clamp(56px,6.4vw,96px);padding-top:clamp(44px,5.5vw,84px)}
.cform{margin-bottom:0}
.foot{margin-top:clamp(40px,4.5vw,64px)}
.wordmark{margin-top:clamp(24px,3vw,44px)}
.paths + .brk{margin-top:clamp(44px,4.6vw,68px)}

/* ========== HOW WE BUILD / HOW WE SHOOT: SIDE BY SIDE ==========
   On wide screens the steps become a vertical list beside the player, each
   step with its explanation; the step that's playing carries the progress bar.
   Build: steps left, player right. Shoot: mirrored, player left, steps right. */
@media (min-width:1100px){
  .story .fl-pin{grid-template-columns:minmax(300px,.85fr) minmax(0,2.15fr);grid-template-rows:none;align-items:stretch;column-gap:clamp(28px,3vw,52px)}
  .story[data-flow="shoot"] .fl-side{order:2}
  .story .fl-side{display:flex;flex-direction:column;justify-content:center;gap:18px;min-width:0}
  .story .fl-steps{grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,22px)}
  .story .fl-step{padding-top:16px;gap:6px}
  .story .fl-step .t{font-size:clamp(20px,1.65vw,26px)}
  .story .fl-step .d{display:block;font-size:clamp(14.5px,1.05vw,16px);font-weight:500;line-height:1.5;color:var(--muted);transition:color .3s}
  .story .fl-step[aria-selected="true"] .d{color:var(--ink-2)}
  .story .fl-copy .fl-desc,.story .fl-copy .fl-now{display:none}
  .story .fl-copy{display:flex;justify-content:flex-start}
  .story .fl-play{float:none;margin:0}
  .story .fl-stage,.story:not(.scroll) .fl-stage,.story[data-flow="build"] .fl-stage{height:clamp(540px,calc(100svh - 170px),720px)}
}
@media (min-width:1100px){.story[data-flow="shoot"] .fl-pin{grid-template-columns:minmax(0,2.15fr) minmax(300px,.85fr)}}
/* players a little smaller: a fixed 16:10 frame beside a wider steps column, inside the site gutters */
@media (min-width:1100px){
  .story .fl-pin{grid-template-columns:minmax(300px,1fr) minmax(0,1.55fr);align-items:center}
  .story[data-flow="shoot"] .fl-pin{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}
  .story .fl-stage,.story:not(.scroll) .fl-stage,.story[data-flow="build"] .fl-stage{height:auto;aspect-ratio:16/10;max-height:calc(100svh - 150px)}
}

/* ========== POLISH PASS ========== */
/* section heads: the hairline stays, the decorative "Fig." eyebrow is gone */
.head .rule{padding-top:0;min-height:0}
/* pricing: the hover shine waits fully off-card, so it never shades the first letters */
.tier::before{left:-80%}
/* mobile breaks: the section label stands alone; the count only fits beside it on wider screens */
@media (max-width:760px){.brk-r{display:none}}
/* browser surfaces: page scrollbar in the site's greys */
html{scrollbar-color:#8f959c transparent;scrollbar-width:thin}
/* side-by-side players: never shorter than the scenes need, and the launch
   step's right column packs tighter so the button keeps clear of the frame */
@media (min-width:1100px){
  .story .fl-stage,.story:not(.scroll) .fl-stage,.story[data-flow="build"] .fl-stage{min-height:480px}
  .story .sc{padding:clamp(22px,2.4vw,36px);gap:16px}
  .story .gl-side{gap:12px;justify-content:center}
  .story .gl-side .log{gap:6px}
  .story .gl-care{gap:4px;padding-top:12px}
  .story .gl-care-h{font-size:clamp(16px,1.35vw,21px)}
}
/* How we build a site: no browser chrome, the scenes sit straight in the frame */
.st-browser .st-bar{display:none}
/* mood board: always the whole board, scaled and centred in its frame (no sideways panning) */
.in-stage .mb[data-view="mood"]{top:var(--y,0px)}
@media (max-width:900px){.in-stage .mb-scroll{overflow:hidden}.in-stage .mb-size{display:none}}
/* deliver step: the photo is sized by its column, never wider, so it can't run under the copy */
@media (min-width:901px){
  .story .dv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:clamp(18px,2.2vw,32px);height:100%;min-height:0}
  .story .dv-photo{width:100%;height:auto;max-height:100%;aspect-ratio:1400/1045}
  .story .dv-h{font-size:clamp(20px,1.9vw,32px)}
  .story .dv-list li{padding:clamp(6px,.8vw,10px) 0;font-size:clamp(13px,1vw,15px)}
}
/* contrast + legibility fixes from the detector pass */
.nav-links a.nav-cta:hover{color:var(--accent-fg)}
.ctag.real{color:#155c38;box-shadow:inset 0 0 0 1px rgba(21,92,56,.45)}
.ctag,.p-stack .ps-k,.p-stack>span:not(.ps-k),.nt-k,.nt-list li b{font-size:11px}
.dom[data-s="done"] .dsr-buy{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px -12px rgba(0,0,0,.6)}
/* tablets and small laptops (stacked layout): the step tabs and the player fit
   on one screen together instead of the player running past the fold */
@media (min-width:901px) and (max-width:1099px){
  .story .fl-stage,.story:not(.scroll) .fl-stage,.story[data-flow="build"] .fl-stage{height:clamp(420px,calc(100svh - 290px),560px);min-height:0}
}
/* step progress bar: the leftover orange is gone; a solid ink fill with the same soft gloss */
.fl-step.run::after{background:linear-gradient(180deg,rgba(255,255,255,.35) 0,rgba(255,255,255,0) 55%),var(--ink);box-shadow:0 2px 6px -2px rgba(0,0,0,.35)}
/* the player always takes its column's width: the 480px floor adds height, never width
   (aspect-ratio + min-height alone let it grow wider than the column and spill sideways) */
@media (min-width:1100px){
  .story .fl-stage,.story:not(.scroll) .fl-stage,.story[data-flow="build"] .fl-stage{width:100%;min-width:0;justify-self:stretch}
}

/* ========== TYPE SYSTEM ==========
   One voice per role, so the same kind of thing reads the same everywhere.
   Display: Archivo (expanded). Text: Inter Tight. */
/* buttons */
.btn{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
/* small labels: tier names, step numbers, card kickers, list labels, links, form labels */
.tier .id,.tier .id b,.fl-step .n,.price-note,.price-note .mo,.pill,.fld span,.ct-k,.p-go,.p-need .p-k,.deep .deep-k,.idx,.idx b{
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
/* item titles: one size, one weight, sentence case */
.p-need,.deep > li h3,.story .fl-step .t,.fl-step .t,.tier h3,.step h3,.fl-now{
  font-family:var(--head);font-weight:700;text-transform:none;font-size:clamp(19px,1.55vw,24px);letter-spacing:-.015em;line-height:1.15}
/* text weights the loaded Inter Tight actually has */
.assure b{font-weight:600}
.copy{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.08em}
.hero .btn{letter-spacing:.08em}
.chips legend{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em}
.next-steps li b{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em}
.deep > li .dn{font-size:clamp(19px,1.55vw,24px);font-weight:700;font-variation-settings:normal;letter-spacing:-.015em;line-height:1.15;color:var(--muted)}
.hero video.instant{transition:none}
/* kickoff call: two founders on top, your business centred below */
.vc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.vc-grid .vt{grid-column:span 2}
.vc-grid .vt.you{grid-column:2 / span 2}
/* subheadings share the descriptions' typeface (Inter Tight), set bold; the uppercase
   section headings stay in Archivo as the display voice */
.p-need,.deep > li h3,.deep > li .dn,.story .fl-step .t,.fl-step .t,.tier h3,.step h3,.fl-now,.qa summary,.crew-list .role{
  font-family:var(--display);font-variation-settings:normal;letter-spacing:-.01em}
.p-need,.deep > li h3,.deep > li .dn,.story .fl-step .t,.fl-step .t,.tier h3,.step h3,.fl-now{font-weight:700}
.qa summary{font-weight:600}
/* hero without the watch: the poster is a full-bleed frame like the clips, no oval */
@media (min-width:761px){.hero .poster{inset:0;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;transform:none;-webkit-mask-image:none;mask-image:none}}
/* the branding card plays the exploded-watch loop in place of a still */
.deep-img video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.deep li:hover .deep-img video{transform:scale(1.03)}}

/* ========== PACKAGES: prices, "from", and the video row ========== */
.tier .price .from{align-self:flex-end;margin:0 8px .55em 0;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vrow{margin:var(--inset) var(--inset) 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:var(--inset);align-items:stretch}
.vrow-head{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:clamp(18px,1.8vw,26px) clamp(18px,1.6vw,24px)}
.vrow-k{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(20px,1.8vw,28px);line-height:1}
.vrow-s{font-size:var(--t-small);font-weight:500;color:var(--ink-2)}
.vitem{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,1.8vw,26px) clamp(18px,1.6vw,24px);border-radius:var(--r);color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.24));box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(12,13,15,.12);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.vitem:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(12,13,15,.3)}
.vi-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vi-name{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.55vw,24px);letter-spacing:-.01em}
.vi-price{font-family:var(--head);font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;white-space:nowrap}
.vi-price i{font-style:normal;font-size:.5em;font-weight:600;color:var(--muted);margin-left:2px}
.vi-desc{font-size:var(--t-small);line-height:1.5;font-weight:500;color:var(--ink-2)}
.vi-go{margin-top:auto;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:900px){.vrow{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}}
.vi-price.vi-call{font-size:clamp(13px,1vw,15px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}