/* ============================================================
   DASH WORLD — single-file front end.
   Committed dark identity (black / metallic gold).
   ============================================================ */

:root{
  --ink:        #07070A;
  --ink-1:      #0B0C11;
  --ink-2:      #101219;
  --ink-3:      #171A23;
  --fg:         #EDEDF2;
  --fg-2:       #9698A8;
  --fg-3:       #5C5E70;
  --rule:       rgba(255,255,255,.075);
  --rule-2:     rgba(255,255,255,.14);
  --au-hi:      #FBEAB6;
  --au:         #D9B25A;
  --au-lo:      #8A6520;
  --au-soft:    rgba(217,178,90,.14);
  --au-edge:    rgba(217,178,90,.42);
  --alloy:      linear-gradient(148deg,var(--au-hi) 0%,var(--au) 44%,var(--au-lo) 100%);
  --live:       #5BD6A0;
  --gutter:     clamp(20px,3vw,48px);
  --maxw:       1600px;
  --f-display:  "Archivo","Archivo Expanded",system-ui,sans-serif;
  --f-body:     "Instrument Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:     "JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3{ font-family:var(--f-display); font-weight:900; font-stretch:118%; letter-spacing:-.03em; line-height:.98; text-wrap:balance; margin:0; }
p{margin:0}
a{color:inherit}
:focus-visible{ outline:2px solid var(--au); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.tag{ font-family:var(--f-mono); font-size:.6875rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); }
.tag--au{ color:var(--au) }
.rule{ height:1px; background:var(--rule); border:0; margin:0 }

.head{ display:grid; grid-template-columns:1fr; gap:16px; padding-block:clamp(56px,8vw,96px) clamp(28px,4vw,44px); }
.head h2{ font-size:clamp(1.85rem,4.4vw,3.05rem) }
.head p{ color:var(--fg-2); max-width:56ch; margin-top:14px }
@media (min-width:900px){
  .head{ grid-template-columns:200px 1fr; gap:0 48px; align-items:start }
  .head .tag{ padding-top:.55em }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 24px;
  font-family:var(--f-body); font-size:.95rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  border:1px solid var(--rule-2); border-radius:2px;
  background:transparent; color:var(--fg);
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.btn:hover{ border-color:var(--au-edge); background:rgba(217,178,90,.07) }
.btn--au{
  background:var(--alloy); color:#0A0805; border-color:transparent; font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
}
.btn--au:hover{ background:var(--alloy); filter:brightness(1.08) }
.btn--full{ width:100% }
.btn__arrow{ transition:transform .22s ease }
.btn:hover .btn__arrow{ transform:translateX(3px) }
@media (prefers-reduced-motion:reduce){ .btn__arrow{transition:none} }

/* Sept 7-13 Promo Bar */
.promo{ position:relative; z-index:40; background:var(--alloy); color:#0A0805; }
.promo__in{
  max-width:var(--maxw); margin-inline:auto; padding:9px var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:2px 16px; flex-wrap:wrap;
  font-size:.8rem; text-align:center;
}
.promo b{ font-weight:700 }
.promo__in > span{ position:relative }
@media (min-width:641px){ .promo__in > span + span::before{ content:" b7"; position:absolute; left:-10px; opacity:.5 } }
.promo__cta{
  font-family:var(--f-mono); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-bottom:1.5px solid rgba(10,8,5,.5); white-space:nowrap;
}
.promo__x{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:#0A0805; opacity:.55; font-size:16px; line-height:1;
}
.promo__x:hover{ opacity:1 }
@media (max-width:640px){
  .promo__in{ padding-right:38px; padding-left:14px; font-size:.72rem; gap:1px 14px }
}

.hdr{ position:sticky; top:0; z-index:30; border-bottom:1px solid transparent; transition:background .25s ease,border-color .25s ease; }
.hdr.is-stuck{ background:rgba(7,7,10,.82); backdrop-filter:blur(14px); border-bottom-color:var(--rule); }
.hdr__in{ max-width:var(--maxw); margin-inline:auto; padding:14px var(--gutter); display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto }
.brand__mark{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border:1px solid var(--au-edge); border-radius:2px;
  font-family:var(--f-display); font-weight:900; font-stretch:118%; font-size:.9rem; letter-spacing:-.02em;
  background:var(--alloy); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand__name{ font-family:var(--f-display); font-weight:900; font-stretch:118%; font-size:.95rem; letter-spacing:.02em; line-height:1.15; }
.brand__sub{ font-family:var(--f-mono); font-size:.55rem; letter-spacing:.22em; color:var(--fg-3); text-transform:uppercase; }
.nav{ display:none; gap:28px; align-items:center; }
.nav > a{ font-size:.88rem; color:var(--fg-2); text-decoration:none; transition:color .18s ease; }
.nav > a:hover{ color:var(--fg) }
.hdr .btn{ min-height:42px; padding:0 18px; font-size:.85rem }
@media (min-width:940px){ .nav{display:flex} }
@media (max-width:939px){ .hdr__cta{display:none} .nav .btn{display:inline-flex; margin-top:12px} }
@media (min-width:940px){ .nav .btn{ display:none } }

/* Ecosystem Dropdown Integration */
.nav-dropdown { position: relative; padding-block: 10px; cursor: pointer; }
.nav-dropdown > span { font-size:.88rem; color:var(--fg-2); transition:color .18s ease; }
.nav-dropdown:hover > span { color:var(--au); }
.nav-dropdown-content { 
  display: none; position: absolute; top: 100%; left: -20px; 
  background: var(--ink-1); border: 1px solid var(--rule); border-radius: 4px; 
  padding: 12px 0; min-width: 180px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); flex-direction: column; 
}
.nav-dropdown:hover .nav-dropdown-content { display: flex; }
.nav-dropdown-content a { padding: 8px 24px; font-size: .85rem; color: var(--fg-2); transition: .2s; }
.nav-dropdown-content a:hover { color: var(--fg); background: rgba(217,178,90,.05); }

.hero{ position:relative; isolation:isolate; padding-block:clamp(52px,9vw,104px) clamp(40px,6vw,64px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; z-index:-2; width:min(920px,120vw); aspect-ratio:1; right:-18%; top:-46%;
  background:radial-gradient(circle,rgba(217,178,90,.20) 0%,rgba(217,178,90,.05) 38%,transparent 66%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-3;
  background-image: linear-gradient(var(--rule) 1px,transparent 1px), linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:76px 76px; -webkit-mask-image:radial-gradient(ellipse 90% 70% at 60% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 90% 70% at 60% 0%,#000 10%,transparent 72%); opacity:.85;
}
.hero__ghost{
  position:absolute; z-index:-1; left:var(--gutter); bottom:-.18em;
  font-family:var(--f-display); font-weight:900; font-stretch:125%;
  font-size:clamp(4rem,15vw,11rem); line-height:.8; letter-spacing:-.05em; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.045); pointer-events:none; user-select:none; white-space:nowrap;
}
.hero h1{ font-size:clamp(2.5rem,7.4vw,5rem); max-width:16ch; margin-top:20px; }
.hero h1 em{ font-style:normal; background:var(--alloy); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lede{ margin-top:22px; max-width:52ch; font-size:clamp(1.02rem,1.9vw,1.2rem); color:var(--fg-2); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
@media (max-width:560px){ .hero__cta{ flex-direction:column; align-items:stretch } .hero__cta .btn{ width:100% } }
.hero__terms{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; }
.hero__terms span{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--fg-3); }
.hero__terms b{ color:var(--fg-2); font-weight:400 }

.proof{ margin-top:clamp(38px,6vw,58px); border-top:1px solid var(--rule); }
.proof__lbl{ padding-top:18px; display:block }
.proof__row{ display:grid; gap:0; grid-template-columns:1fr; margin-top:6px; }
@media (min-width:760px){ .proof__row{ grid-template-columns:repeat(3,1fr); gap:0 32px } }
.proof__item{ display:flex; align-items:baseline; gap:10px; padding:13px 0; border-bottom:1px solid var(--rule); text-decoration:none; transition:padding-left .22s ease; }
@media (min-width:760px){ .proof__item{ border-bottom:0 } }
.proof__item:hover{ padding-left:6px }
.proof__dot{ width:6px; height:6px; flex:none; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgba(91,214,160,.14); transform:translateY(-2px); }
.proof__name{ font-weight:600; font-size:.95rem }
.proof__url{ font-family:var(--f-mono); font-size:.7rem; color:var(--fg-3); margin-left:auto; white-space:nowrap; }
.proof__item:hover .proof__url{ color:var(--au) }
@media (prefers-reduced-motion:reduce){ .proof__item{transition:none} }

.work{ display:grid; gap:1px; background:var(--rule); border-block:1px solid var(--rule) }
@media (min-width:820px){ .work{ grid-template-columns:1fr 1fr } }

.card{ position:relative; background:var(--ink); padding:clamp(22px,3.4vw,34px); text-decoration:none; display:flex; flex-direction:column; gap:20px; min-height:340px; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--au-soft),transparent 62%); opacity:0; transition:opacity .3s ease; }
.card:hover::before{ opacity:1 }
.card > *{ position:relative }

.card__top{ display:flex; align-items:center; gap:12px }
.card__status{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.card__status i{ width:5px; height:5px; border-radius:50%; background:var(--live); font-style:normal; }
.card__status--wip i{ background:var(--au) }
.shot{ flex:1; min-height:132px; border:1px solid var(--rule); background:var(--ink-1); display:grid; place-items:center; padding:14px; overflow:hidden; }
.shot svg{ width:100%; height:auto; display:block; max-height:180px }
.card h3{ font-size:clamp(1.35rem,2.6vw,1.85rem) }
.card__desc{ color:var(--fg-2); font-size:.94rem; margin-top:8px; max-width:44ch }
.card__foot{ display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--rule); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--fg-2); }
.card:hover .card__foot{ color:var(--au) }
.card__foot span:last-child{ margin-left:auto }

.svc{ border-top:1px solid var(--rule) }
.svc__row{ display:grid; grid-template-columns:1fr; gap:6px 40px; padding:26px 0; border-bottom:1px solid var(--rule); }
@media (min-width:900px){ .svc__row{ grid-template-columns:200px minmax(0,1fr) 150px; align-items:start } }
.svc__row h3{ font-size:1.22rem; letter-spacing:-.015em; font-stretch:112% }
.svc__body{ color:var(--fg-2); font-size:.95rem; max-width:60ch }
.svc__inc{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-family:var(--f-mono); font-size:.68rem; color:var(--fg-3); letter-spacing:.04em; padding:0; margin-bottom:0 }
.svc__inc li{ list-style:none }
.svc__from{ font-family:var(--f-mono); font-size:.78rem; color:var(--au); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (min-width:900px){ .svc__from{ text-align:right } }

.assure{ background:var(--ink-1); border-block:1px solid var(--rule) }
.assure__grid{ display:grid; gap:1px; background:var(--rule); border-top:1px solid var(--rule); margin-bottom:clamp(56px,8vw,84px); }
@media (min-width:720px){ .assure__grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1060px){ .assure__grid{ grid-template-columns:repeat(4,1fr) } }
.assure__cell{ background:var(--ink-1); padding:26px 24px 30px }
.assure__cell h3{ font-size:1.05rem; margin:14px 0 8px; font-stretch:110% }
.assure__cell p{ color:var(--fg-2); font-size:.9rem }
.assure__ico{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--au-edge); border-radius:2px; color:var(--au); }
.assure__ico svg{ width:17px; height:17px }

.tiers{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:860px){ .tiers{ grid-template-columns:repeat(3,1fr) } }
.tier{ background:var(--ink); padding:28px 24px 30px; display:flex; flex-direction:column }
.tier--pick{ background:var(--ink-2); position:relative }
.tier--pick::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--alloy); }
.tier__pill{ position:absolute; top:14px; right:20px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--au); }
.tier h3{ font-size:1.15rem; font-stretch:112%; margin-top:12px }
.tier__price{ font-family:var(--f-mono); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.05rem); font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin:16px 0 4px; background:var(--alloy); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tier__unit{ font-family:var(--f-mono); font-size:.68rem; color:var(--fg-3); letter-spacing:.08em }
.tier__list{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px }
.tier__list li{ display:grid; grid-template-columns:14px 1fr; gap:10px; font-size:.9rem; color:var(--fg-2); }
.tier__list li::before{ content:"—"; color:var(--au); font-family:var(--f-mono); font-size:.7rem; line-height:1.7 }
.tier__not{ margin-top:20px; padding-top:16px; border-top:1px solid var(--rule); font-size:.82rem; color:var(--fg-3); }
.tier__not b{ color:var(--fg-2); font-weight:500 }
.tier .btn{ margin-top:24px }
.tier__spacer{ flex:1 }

.steps{ display:grid; gap:0; border-top:1px solid var(--rule) }
.step{ display:grid; grid-template-columns:auto 1fr; gap:6px 20px; padding:22px 0; border-bottom:1px solid var(--rule); align-items:start; }
@media (min-width:820px){ .step{ grid-template-columns:64px 200px 1fr 120px; align-items:baseline } }
.step__n{ font-family:var(--f-mono); font-size:.72rem; color:var(--au); font-variant-numeric:tabular-nums; letter-spacing:.1em; }
.step h3{ font-size:1.05rem; font-stretch:110%; grid-column:2 }
@media (min-width:820px){ .step h3{ grid-column:auto } }
.step p{ color:var(--fg-2); font-size:.92rem; grid-column:2; max-width:56ch }
@media (min-width:820px){ .step p{ grid-column:auto } }
.step__when{ font-family:var(--f-mono); font-size:.7rem; color:var(--fg-3); grid-column:2; letter-spacing:.06em; }
@media (min-width:820px){ .step__when{ grid-column:auto; text-align:right } }

.q{ background:var(--ink-1); border-block:1px solid var(--rule) }
.q__shell{ border:1px solid var(--rule); background:var(--ink); margin-bottom:clamp(56px,8vw,84px); }
.q__bar{ display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--rule); }
.q__count{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; color:var(--fg-3) }
.q__track{ flex:1; height:2px; background:var(--rule); overflow:hidden }
.q__fill{ height:100%; width:25%; background:var(--alloy); transition:width .35s cubic-bezier(.3,.8,.3,1) }
@media (prefers-reduced-motion:reduce){ .q__fill{transition:none} }
.q__back{ background:none; border:0; cursor:pointer; padding:4px 2px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.q__back:hover{ color:var(--fg) }
.q__back[hidden]{ display:none }
.q__step{ padding:clamp(22px,4vw,34px) }
.q__step[hidden]{ display:none }
.q__q{ font-size:clamp(1.25rem,3vw,1.7rem); font-family:var(--f-display); font-weight:900; font-stretch:114%; letter-spacing:-.02em }
.q__hint{ color:var(--fg-2); font-size:.9rem; margin-top:8px }
.q__opts{ display:grid; gap:10px; margin-top:22px }
@media (min-width:640px){ .q__opts{ grid-template-columns:1fr 1fr } }
.opt{ display:flex; align-items:center; gap:12px; min-height:56px; padding:0 18px; text-align:left; background:var(--ink-2); border:1px solid var(--rule); border-radius:2px; color:var(--fg); font-family:var(--f-body); font-size:.95rem; font-weight:500; cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.opt:hover{ border-color:var(--au-edge); background:var(--ink-3) }
.opt__k{ font-family:var(--f-mono); font-size:.68rem; color:var(--fg-3) }
.opt:hover .opt__k{ color:var(--au) }
.q__fields{ display:grid; gap:14px; margin-top:22px; max-width:520px }
.q__fields label{ display:grid; gap:7px }
.q__fields .tag{ color:var(--fg-3) }
.q__fields input{ min-height:52px; padding:0 16px; background:var(--ink-2); border:1px solid var(--rule); border-radius:2px; color:var(--fg); font-family:var(--f-body); font-size:1rem; }
.q__fields input:focus{ outline:none; border-color:var(--au-edge) }
.q__fields input::placeholder{ color:var(--fg-3) }
.q__preview{ margin-top:20px; padding:16px 18px; background:var(--ink-2); border:1px solid var(--rule); font-family:var(--f-mono); font-size:.76rem; line-height:1.75; color:var(--fg-2); white-space:pre-wrap; word-break:break-word; max-height:210px; overflow:auto; }
.q__send{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px }

.faq{ border-top:1px solid var(--rule) }
.faq details{ border-bottom:1px solid var(--rule) }
.faq summary{ display:flex; align-items:center; gap:16px; padding:20px 0; cursor:pointer; list-style:none; font-size:1.02rem; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; margin-left:auto; color:var(--au); font-family:var(--f-mono); font-size:1.1rem; line-height:1; }
.faq details[open] summary::after{ content:"–" }
.faq details[open] summary{ color:var(--au) }
.faq__a{ color:var(--fg-2); font-size:.94rem; max-width:64ch; padding-bottom:22px }

.closer{ position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(64px,10vw,116px); border-top:1px solid var(--rule); }
.closer::before{ content:""; position:absolute; z-index:-1; inset:auto 0 -60% 0; height:150%; background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(217,178,90,.16),transparent 70%); }
.closer h2{ font-size:clamp(2rem,6vw,3.8rem); max-width:15ch }
.closer .btn{ margin-top:30px }

.foot{ border-top:1px solid var(--rule); background:var(--ink-1) }
.foot__in{ display:grid; gap:32px; padding-block:44px 20px; }
@media (min-width:760px){ .foot__in{ grid-template-columns:1.4fr 1fr 1fr 1fr } }
.foot h4{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); margin:0 0 14px; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.foot a{ color:var(--fg-2); text-decoration:none; font-size:.92rem }
.foot a:has(.ico-wa){ display:inline-flex; align-items:center; gap:9px }
.foot a:hover{ color:var(--au) }
.foot__sig{ font-family:var(--f-display); font-weight:900; font-stretch:120%; font-size:clamp(1.5rem,4.4vw,2.4rem); letter-spacing:-.03em; background:var(--alloy); -webkit-background-clip:text; background-clip:text; color:transparent; margin-top:6px; }
.foot__legal{ display:flex; flex-wrap:wrap; gap:8px 20px; padding-block:18px 96px; border-top:1px solid var(--rule); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; color:var(--fg-3); }
@media (min-width:760px){ .foot__legal{ padding-bottom:26px } }

.ico-wa{ width:19px; height:19px; flex:none; fill:#25D366; display:block }
.btn--wa{ padding:0 18px }
.dock{ position:fixed; z-index:50; left:0; right:0; bottom:0; display:grid; grid-template-columns:auto 1fr; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(7,7,10,.9); backdrop-filter:blur(14px); border-top:1px solid var(--rule); }
.dock .btn{ min-height:48px; padding:0 12px; font-size:.86rem }
@media (min-width:760px){ .dock{ display:none } }

/* ============================================================
   SEPT BUILD — WebGL stage, hero reel, work reel, mobile nav
   ============================================================ */

/* --- WebGL canvas sits behind the hero, never above content --- */
#gl{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; will-change:opacity }
#gl canvas{ display:block; width:100%; height:100% }
.hero{ contain:layout paint }

/* --- Brand logo with graceful text fallback --- */
.brand__logo{ height:34px; width:auto; display:block }
.brand__logo[hidden]{ display:none }

/* --- Mobile navigation --- */
.navtoggle{
  display:none; width:44px; height:44px; margin-left:auto;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--rule); border-radius:2px;
  color:var(--fg); cursor:pointer; font-size:18px; line-height:1;
}
@media (max-width:939px){
  .navtoggle{ display:inline-flex }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:rgba(7,7,10,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--rule);
    flex-direction:column; gap:0; padding:6px var(--gutter) 18px;
  }
  .nav.is-open{ display:flex }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--rule); font-size:1rem }
  .nav a:last-child{ border-bottom:0 }
  .hdr{ position:sticky }
  .hdr__in{ position:relative }
}

/* --- HERO REEL ------------------------------------------------
   One stage, six offers. Slides are stacked in the same grid cell
   so the hero never changes height between them (no layout shift).
   --------------------------------------------------------------*/
.reel{ display:grid; margin-top:22px }
.reel__slide{
  grid-area:1/1; min-width:0;
  opacity:0; visibility:hidden;
  transform:translateY(18px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1), visibility 0s linear .6s;
}
.reel__slide.is-on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.reel__kind{ display:block; margin-bottom:14px }
.reel__slide h1,.reel__slide h2{
  font-family:var(--f-display); font-weight:900; font-stretch:118%;
  letter-spacing:-.03em; line-height:.98; text-wrap:balance;
  font-size:clamp(2.1rem,6.6vw,4.5rem); max-width:17ch; margin:0;
}
.reel__slide em{ font-style:normal; background:var(--alloy); -webkit-background-clip:text; background-clip:text; color:transparent }
.reel__sub{ margin-top:18px; max-width:48ch; color:var(--fg-2); font-size:clamp(1rem,1.9vw,1.16rem) }
.reel__offer{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  padding:8px 14px; border:1px solid var(--au-edge); border-radius:2px;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em; color:var(--au);
  font-variant-numeric:tabular-nums;
}
.reel__offer--wip{ border-color:var(--rule-2); color:var(--fg-2) }
.reel__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }
.reel__names{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:20px }
.reel__names a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:600; font-size:.98rem;
}
.reel__names a:hover{ color:var(--au) }
.reel__names i{ width:6px; height:6px; border-radius:50%; background:var(--live); font-style:normal; flex:none }

/* reel controls */
.reel__bar{
  display:flex; align-items:center; gap:16px;
  margin-top:clamp(26px,4vw,38px); padding-top:16px;
  border-top:1px solid var(--rule);
}
.reel__count{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--fg-3); font-variant-numeric:tabular-nums; flex:none }
.reel__track{ flex:1; height:2px; background:var(--rule); overflow:hidden; min-width:40px }
.reel__prog{ display:block; height:100%; width:0; background:var(--alloy); transform-origin:left }
.reel__nav{ display:none; gap:6px; flex:none }
@media (min-width:760px){ .reel__nav{ display:flex } }
.reel__btn{
  width:40px; height:40px; display:grid; place-items:center;
  background:none; border:1px solid var(--rule); border-radius:2px;
  color:var(--fg-2); cursor:pointer; font-size:15px; line-height:1;
  transition:border-color .2s ease,color .2s ease;
}
.reel__btn:hover{ border-color:var(--au-edge); color:var(--au) }
.reel__dots{ display:flex; gap:7px; flex:none }
.reel__dot{
  width:22px; height:14px; padding:0; background:none; border:0; cursor:pointer;
  display:grid; place-items:center;
}
.reel__dot::before{ content:""; width:100%; height:2px; background:var(--rule-2) }
.reel__dot[aria-current="true"]::before{ background:var(--au) }
@media (max-width:759px){ .reel__dots{ display:none } }

@media (prefers-reduced-motion:reduce){
  .reel__slide{ transition:none }
  .reel__prog{ transition:none }
}

/* --- SELECTED WORK REEL -------------------------------------- */
.wreel{ position:relative }
.wreel__scroll{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(280px,86vw);
  gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px;
  scrollbar-width:none;
}
.wreel__scroll::-webkit-scrollbar{ display:none }
@media (min-width:760px){ .wreel__scroll{ grid-auto-columns:minmax(300px,420px) } }
@media (prefers-reduced-motion:reduce){ .wreel__scroll{ scroll-behavior:auto } }
.wreel .card{ scroll-snap-align:start; border:1px solid var(--rule); min-height:0 }
.wreel__bar{ display:flex; align-items:center; gap:12px; margin-top:18px }
.wreel__hint{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; color:var(--fg-3); margin-right:auto }
@media (min-width:760px){ .wreel__hint{ visibility:hidden } }

/* shot area accepts a real screenshot, falls back to the drawn preview */
.shot img{ width:100%; height:100%; object-fit:cover; display:block }
.shot--img{ padding:0 }
.shot__note{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3);
  background:rgba(7,7,10,.72); padding:3px 7px; border:1px solid var(--rule);
}
.shot{ position:relative }

/* --- DASH APP PRODUCT BAND ----------------------------------- */
.dapp{ position:relative; isolation:isolate; overflow:hidden; border-top:1px solid var(--rule); background:var(--ink-1) }
.dapp::before{
  content:""; position:absolute; z-index:-1; inset:-40% -10% auto auto;
  width:min(720px,90vw); aspect-ratio:1;
  background:radial-gradient(circle,rgba(217,178,90,.15),transparent 65%);
}
.dapp__in{ display:grid; gap:34px; padding-block:clamp(56px,8vw,92px) }
@media (min-width:900px){ .dapp__in{ grid-template-columns:1.1fr .9fr; align-items:center; gap:56px } }
.dapp h2{ font-size:clamp(2.2rem,6vw,3.6rem); margin-top:14px }
.dapp__lede{ color:var(--fg-2); margin-top:16px; max-width:46ch }
.dapp__cats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding:0; list-style:none }
.dapp__cats li{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-2); border:1px solid var(--rule); padding:7px 11px;
}
.dapp__status{
  display:inline-flex; align-items:center; gap:9px; margin-top:24px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--au);
}
.dapp__status i{ width:6px; height:6px; border-radius:50%; background:var(--au); font-style:normal }
.dapp__art{ border:1px solid var(--rule); background:var(--ink); padding:22px }
.dapp__art svg{ width:100%; height:auto; display:block }

/* --- pricing footnote ---------------------------------------- */
.pricenote{
  margin-top:18px; font-size:.86rem; color:var(--fg-3);
  border-top:1px solid var(--rule); padding-top:16px;
}

/* --- global overflow guard ----------------------------------- */
html,body{ max-width:100%; overflow-x:hidden }
img,svg,video{ max-width:100%; height:auto }

.r{ transform:translateY(14px); transition:transform .6s cubic-bezier(.22,1,.36,1) }
.r.in{ transform:none }
@media (prefers-reduced-motion:reduce){ .r{ transform:none; transition:none } }


/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */
.nav a[aria-current="page"]{ color:var(--au) }

/* page masthead — smaller sibling of the homepage hero */
.masthead{ position:relative; isolation:isolate; padding-block:clamp(42px,7vw,84px) clamp(28px,4vw,46px); border-bottom:1px solid var(--rule) }
/* lets the globe through but keeps small type legible over it */
.masthead::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(7,7,10,.86) 0%,rgba(7,7,10,.58) 55%,rgba(7,7,10,.8) 100%) }
.masthead h1{ font-size:clamp(2.1rem,6vw,3.8rem); max-width:18ch; margin-top:16px }
.masthead h1 em{ font-style:normal; background:var(--alloy); -webkit-background-clip:text; background-clip:text; color:transparent }
.masthead p{ margin-top:18px; max-width:56ch; color:var(--fg-2); font-size:clamp(1rem,1.8vw,1.12rem) }
.crumb{ display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2) }
.crumb a{ color:var(--fg-3); text-decoration:none }
.crumb a:hover{ color:var(--au) }

/* generic body copy block */
.prose{ max-width:64ch; color:var(--fg-2) }
.prose p + p{ margin-top:14px }
.prose strong{ color:var(--fg); font-weight:600 }

/* full-width project entries on the Work page */
.entry{ display:grid; gap:26px; padding-block:clamp(34px,5vw,54px); border-bottom:1px solid var(--rule) }
@media (min-width:900px){ .entry{ grid-template-columns:1fr 1fr; gap:48px; align-items:center } }
.entry__shot{ position:relative; border:1px solid var(--rule); background:var(--ink-1); padding:16px; overflow:hidden }
.entry__shot img{ width:100%; height:auto; display:block }
.entry__shot svg{ width:100%; height:auto; display:block }
.entry h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); margin-top:12px }
.entry__desc{ color:var(--fg-2); margin-top:14px; max-width:52ch }
.entry__meta{ display:grid; gap:0; margin-top:22px; border-top:1px solid var(--rule) }
.entry__meta div{ display:flex; gap:16px; padding:11px 0; border-bottom:1px solid var(--rule) }
.entry__meta dt, .entry__meta span:first-child{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); min-width:104px }
.entry__meta span:last-child{ font-size:.92rem; color:var(--fg) }
.entry .btn{ margin-top:24px }

/* compact teasers on the homepage */
.teaser{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (min-width:640px){ .teaser{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .teaser{ grid-template-columns:repeat(3,1fr) } }
.teaser a{ background:var(--ink); padding:22px 20px; text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:background .2s ease }
.teaser a:hover{ background:var(--ink-2) }
.teaser h3{ font-size:1.05rem; font-stretch:110% }
.teaser p{ color:var(--fg-2); font-size:.88rem }
.teaser .from{ margin-top:auto; padding-top:12px; font-family:var(--f-mono); font-size:.72rem; color:var(--au); font-variant-numeric:tabular-nums }

/* two headline price anchors */
.anchors{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (min-width:720px){ .anchors{ grid-template-columns:1fr 1fr } }
.anchor{ background:var(--ink); padding:clamp(24px,3.4vw,34px); text-decoration:none; display:block; transition:background .2s ease }
.anchor:hover{ background:var(--ink-2) }
.anchor .big{ font-family:var(--f-mono); font-weight:700; font-size:clamp(1.7rem,4.4vw,2.4rem); font-variant-numeric:tabular-nums; letter-spacing:-.02em; background:var(--alloy); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin:10px 0 6px }
.anchor .lede{ color:var(--fg-2); font-size:.92rem; max-width:38ch }
.anchor .go{ display:inline-block; margin-top:16px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--au) }

/* "see everything" strip that closes a homepage section */
.more{ display:flex; align-items:center; gap:14px; padding-block:22px; border-top:1px solid var(--rule) }
.more a{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--au); text-decoration:none; margin-left:auto }
.more a:hover{ text-decoration:underline }
.more span{ font-size:.9rem; color:var(--fg-3) }

/* protection page cells */
.guard{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (min-width:760px){ .guard{ grid-template-columns:1fr 1fr } }
.guard__cell{ background:var(--ink); padding:28px 26px 32px }
.guard__cell h2{ font-size:1.12rem; font-stretch:110%; margin:14px 0 10px }
.guard__cell p{ color:var(--fg-2); font-size:.94rem }
.guard__ico{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--au-edge); border-radius:2px; color:var(--au) }
.guard__ico svg{ width:17px; height:17px }

.pagefoot{ padding-block:clamp(48px,7vw,84px) }

.work-grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (min-width:820px){ .work-grid{ grid-template-columns:1fr 1fr } }
.work-grid .card{ border:0; min-height:360px }

.ico-soc{ width:16px; height:16px; flex:none; display:block; color:var(--fg-2) }
.foot a.soc{ display:inline-flex; align-items:center; gap:10px }
.foot a.soc:hover .ico-soc{ color:var(--au) }

/* [hidden] must always win over a component's own display rule —
   otherwise JS-toggled elements stay on screen. */
[hidden]{ display:none !important }
.brand__name{ white-space:nowrap }
.brand{ min-width:0 }
@media (max-width:420px){ .brand__logo{ height:28px } .brand__sub{ font-size:.5rem } }
.brand__name em{ font-style:normal; background:var(--alloy); -webkit-background-clip:text; background-clip:text; color:transparent }