@font-face{font-family:Fraunces;src:url(/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:optional}
@font-face{font-family:"Public Sans";src:url(/fonts/publicsans.woff2) format("woff2");font-weight:100 900;font-display:optional}
:root{--paper:#f4efe6;--card:#fbf8f2;--ink:#151311;--ink2:#221f1b;--mut:#57524a;--line:#d9d0c1;--acc:#b8400e;--acc-d:#93330b;--hot:#ff6a2b;--cream:#efe7d8;--serif:Fraunces,Georgia,serif;--sans:"Public Sans",system-ui,-apple-system,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);transition:background-color .6s var(--ease),color .6s var(--ease);overflow-x:hidden}
body.dark{background:var(--ink);color:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc-d);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:450;line-height:1.02;letter-spacing:-.02em;margin:0 0 .5em}
h2{font-size:clamp(2.3rem,5.4vw,4.4rem)}
h3{font-size:1.45rem;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:60ch}
.kicker{font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:20px;display:inline-flex;gap:10px;align-items:center}
.kicker::before{content:"";width:22px;height:2px;background:var(--acc)}
.on-dark .kicker,.hero .kicker{color:#b7ad9c}
.on-dark .kicker::before,.hero .kicker::before{background:var(--hot)}
/* header */
header.top{position:fixed;inset:0 0 auto;z-index:20;transition:transform .4s var(--ease),background-color .3s}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
header.top.solid{background:rgba(21,19,17,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
header.top.hide{transform:translateY(-100%)}
.brand{font:600 1.25rem var(--serif);color:var(--cream);text-decoration:none;display:flex;align-items:center;gap:10px;min-height:44px}
.brand svg{width:28px;height:28px}
nav.main{display:flex;gap:26px;font-size:15px}
nav.main a{color:var(--cream);text-decoration:none;padding:10px 0;position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:var(--hot);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
nav.main a:hover::after{transform:scaleX(1);transform-origin:left}
.page-plain header.top{position:static;background:var(--ink)}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;background:var(--acc);color:#fff;font:600 17px var(--sans);text-decoration:none;border:0;border-radius:999px;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);border-radius:inherit;transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.hero .btn::before,.on-dark .btn::before{background:var(--cream)}
.hero .btn:hover,.on-dark .btn:hover{color:var(--ink)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost::before{background:currentColor}
.btn.ghost:hover{color:var(--paper)}
/* hero */
.hero{background:var(--ink);color:var(--cream);padding:130px 0 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(3rem,8.6vw,7.4rem);font-weight:400;line-height:.95;letter-spacing:-.035em;margin-bottom:28px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block}
.hero h1 em{font-style:italic;color:var(--hot);font-weight:350}
.hero .lede{font-size:clamp(1.1rem,1.8vw,1.3rem);color:#cfc6b6;max-width:40ch;margin:0 0 34px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ctas .alt{color:#b7ad9c;font-size:16px}
.ctas .alt a{color:var(--cream);font-weight:600}
.counters{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border-top:1px solid #3a352f}
.counters div{padding:26px 20px 34px 0;color:#b7ad9c;font-size:15px}
.counters b{display:block;font:400 clamp(2.4rem,4.4vw,3.6rem)/1 var(--serif);color:var(--cream);margin-bottom:8px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.counters b small{font-size:.45em;margin-left:4px;color:#b7ad9c}
/* phone */
.phone{width:min(300px,78vw);aspect-ratio:300/610;border-radius:44px;background:#0b0a09;padding:12px;box-shadow:0 0 0 1.5px #3a352f,0 40px 80px -30px rgba(0,0,0,.7);position:relative;margin-inline:auto}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:84px;height:24px;margin-left:-42px;background:#0b0a09;border-radius:20px;z-index:3}
.screen{position:relative;height:100%;border-radius:33px;overflow:hidden;background:#faf6ef;color:#1b1916;font-size:13px;line-height:1.4}
.scr{position:absolute;inset:0;padding:54px 18px 18px;display:flex;flex-direction:column;gap:10px}
.ui-top{display:flex;justify-content:space-between;align-items:center;font:600 12px var(--sans);color:#6a6358}
.ui-title{font:500 22px/1.1 var(--serif);letter-spacing:-.01em}
.ui-card{background:#fff;border:1px solid #e6dccb;border-radius:14px;padding:12px}
.ui-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ui-pill{display:inline-block;padding:5px 10px;border-radius:999px;background:#f1e8da;font-weight:600;font-size:12px}
.ui-pill.on{background:var(--acc);color:#fff}
.ui-btn{background:var(--ink);color:#fff;border-radius:12px;text-align:center;padding:13px;font-weight:600;margin-top:auto}
.ui-btn.acc{background:var(--acc)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slots span{border:1px solid #e0d5c2;border-radius:9px;text-align:center;padding:8px 0;font-weight:600;font-size:12px}
.slots span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.days7{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:11px;color:#6a6358}
.days7 b{display:block;font-size:14px;color:#1b1916;padding:6px 0;border-radius:8px}
.days7 .on b{background:var(--acc);color:#fff}
.msg{max-width:84%;padding:10px 12px;border-radius:16px;background:#ece3d3}
.msg.me{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:4px}
.msg.them{border-bottom-left-radius:4px}
.stars{color:#c9821a;letter-spacing:2px;font-size:20px}
.card-num{font:600 14px ui-monospace,monospace;letter-spacing:.08em}
.check{width:54px;height:54px;border-radius:50%;background:#2f7d4a;color:#fff;display:grid;place-items:center;font-size:28px;margin:8px auto}
.hero-phone{position:relative}
.hero-phone .float{position:absolute;background:var(--cream);color:var(--ink);border-radius:14px;padding:10px 14px;font-size:13px;font-weight:600;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);white-space:nowrap}
.hero-phone .f1{left:-40px;top:22%}
.hero-phone .f2{right:-30px;bottom:18%}
.hero-phone .f1 i,.hero-phone .f2 i{font-style:normal;color:var(--acc)}
/* marquee */
.marquee{background:var(--acc);color:#fff;overflow:hidden;padding:18px 0;border-block:1px solid #000}
.marquee .track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee span{font:400 clamp(1.4rem,2.6vw,2rem)/1 var(--serif);padding:0 22px;white-space:nowrap;font-style:italic}
.marquee span::after{content:"/";font-style:normal;margin-left:44px;opacity:.6}
@keyframes mq{to{transform:translateX(-50%)}}
section{padding:clamp(80px,11vw,150px) 0;position:relative}
.on-dark{color:var(--cream)}
.on-dark p{color:#cfc6b6}
/* intro statement */
.statement h2{font-size:clamp(2.2rem,5.6vw,4.8rem);max-width:18ch;line-height:1.05}
.statement h2 .dim{color:#b9ae9c;transition:color .3s}
.on-dark .statement h2 .dim{color:#5b544b}
/* features pinned */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px}
.feat-steps .step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s var(--ease)}
.feat-steps .step.active{opacity:1}
.feat-steps .step .n{font:400 1rem var(--serif);color:var(--hot);margin-bottom:12px;display:block}
.feat-steps h3{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:16px}
.feat-steps ul{padding-left:18px;color:#cfc6b6;margin:0}
.feat-steps li{margin-bottom:6px}
.feat-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.feat-stage .scr{opacity:0;transform:translateY(24px) scale(.97);transition:opacity .55s var(--ease),transform .65s var(--ease)}
.feat-stage .scr.show{opacity:1;transform:none}
.feat-stage .ring{position:absolute;width:min(520px,90%);aspect-ratio:1;border-radius:50%;border:1px solid #3a352f}
.feat-stage .ring.r2{width:min(380px,70%);border-color:#2c2823}
.prog{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.prog i{width:3px;height:26px;background:#3a352f;border-radius:3px;transition:background .3s}
.prog i.on{background:var(--hot)}
.feat-mobile-shot{display:none}
/* before / after */
.ba{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line);background:#fff;touch-action:pan-y;user-select:none}
.ba .side{position:absolute;inset:0}
.ba .old{background:#dfe6ee;font-family:"Times New Roman",serif;color:#203a8a;padding:4%}
.ba .old .bar{background:#203a8a;color:#ff0;padding:6px 10px;font:bold 15px Arial,sans-serif}
.ba .old h4{font:bold clamp(18px,3vw,34px) "Comic Sans MS","Times New Roman",serif;color:#b00;margin:14px 0;text-decoration:underline}
.ba .old p{font-size:clamp(11px,1.4vw,16px);color:#333;max-width:none}
.ba .old .counter{display:inline-block;background:#000;color:#0f0;font:12px monospace;padding:3px 6px;margin-top:8px}
.ba .new{background:var(--ink);color:var(--cream);padding:5%;clip-path:inset(0 0 0 var(--x,50%))}
.ba .new .nb{display:flex;justify-content:space-between;font-size:clamp(11px,1.3vw,14px);color:#b7ad9c}
.ba .new h4{font:400 clamp(26px,5vw,62px)/1 var(--serif);margin:6% 0 3%;letter-spacing:-.02em}
.ba .new h4 em{color:var(--hot)}
.ba .new .pb{display:inline-block;background:var(--acc);color:#fff;border-radius:999px;padding:.7em 1.3em;font-weight:600;font-size:clamp(11px,1.4vw,16px)}
.ba .new .row{display:flex;gap:10px;margin-top:5%}
.ba .new .row span{flex:1;border:1px solid #3a352f;border-radius:10px;padding:2%;font-size:clamp(10px,1.2vw,14px)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--hot);transform:translateX(-1px)}
.ba .handle b{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--hot);color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-labels{display:flex;justify-content:space-between;font-size:14px;color:var(--mut);margin-top:12px}
/* days */
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative}
.days .line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.days .line i{display:block;height:100%;background:var(--acc);transform-origin:left;transform:scaleX(var(--p,1))}
.days>div:not(.line){padding:30px 26px 0 0}
.days .d{font:400 clamp(2.6rem,4vw,3.4rem)/1 var(--serif);color:var(--acc);margin-bottom:14px;display:block;letter-spacing:-.02em}
.days p{font-size:16px;color:var(--mut)}
.note{margin-top:48px;padding:20px 24px;background:var(--card);border-radius:12px;border-left:3px solid var(--acc);font-size:16px;max-width:none}
/* gallery */
.gal{overflow:hidden}
.gal-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.gal-track{display:flex;gap:28px;padding:50px 20px 10px max(20px,calc((100vw - 1200px)/2));width:max-content}
.ex{width:min(560px,82vw);flex:none}
.ex .shot{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:8/5}
.ex .shot img.d{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1s var(--ease),opacity .4s}
.ex:hover .shot img.d{transform:scale(1.04)}
.ex .shot img.m{position:absolute;right:16px;bottom:-30px;width:24%;border:5px solid #0b0a09;border-radius:16px;transition:transform .7s var(--ease);box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
.ex:hover .shot img.m{transform:translateY(-22px) rotate(-2deg)}
.ex .shot .go{position:absolute;left:16px;bottom:16px;background:var(--cream);color:var(--ink);border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;transform:translateY(12px);opacity:0;transition:.4s var(--ease)}
.ex:hover .shot .go,.ex a:focus-visible .go{transform:none;opacity:1}
.ex a{text-decoration:none;color:inherit;display:block}
.ex h3{margin:20px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ex p{color:#cfc6b6;font-size:16px}
.tag{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;border:1px solid #5b544b;padding:4px 8px;border-radius:999px;color:#b7ad9c}
.gal-hint{font-size:14px;color:#b7ad9c}
/* pricing */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.price{padding:30px 26px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.price:hover{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(21,19,17,.4)}
.price.main{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.price.main li,.price.main .per{color:#cfc6b6}
.price .badge{align-self:flex-start;background:var(--hot);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:14px}
.price .amt{font:400 3rem/1 var(--serif);margin:14px 0 6px;letter-spacing:-.02em}
.price .per{font-size:15px;color:var(--mut)}
.price ul{padding-left:18px;margin:18px 0 24px;font-size:15.5px}
.price li{margin-bottom:7px}
.price h3{font-size:1.3rem;margin:0}
.price .btn{margin-top:auto;min-height:48px;font-size:15px}
.terms{font-size:15.5px;color:var(--mut);margin-top:26px;max-width:80ch}
/* about */
.about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,88px);align-items:end}
.about blockquote{margin:0;font:400 clamp(1.6rem,3vw,2.3rem)/1.25 var(--serif);font-style:italic;color:var(--cream)}
.about blockquote::before{content:"\201C";display:block;font-size:5rem;line-height:.6;color:var(--hot);margin-bottom:10px}
.about .sig{font:15px var(--sans);color:#b7ad9c;margin-top:18px}
.vet{display:inline-flex;gap:10px;align-items:center;border:1px solid #3a352f;border-radius:999px;padding:8px 16px;font-size:14px;color:#cfc6b6;margin-top:10px}
/* faq */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px)}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;padding:22px 40px 22px 0;font:450 1.25rem var(--serif);list-style:none;position:relative;transition:color .25s}
summary:hover{color:var(--acc)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:18px;font:300 1.7rem var(--sans);color:var(--acc);transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mut);padding-bottom:10px}
/* contact */
.contact h2{font-size:clamp(2.6rem,7vw,6rem)}
.direct{list-style:none;padding:0;margin:30px 0 0;font-size:18px}
.direct li{padding:12px 0;border-top:1px solid #3a352f;color:#b7ad9c}
.direct a{font-weight:600;display:inline-block;min-height:44px;padding-top:8px;color:var(--cream)}
form{display:grid;gap:18px;background:var(--ink2);padding:clamp(22px,3vw,34px);border-radius:20px;border:1px solid #3a352f}
label{display:block;font-size:15px;font-weight:600;margin-bottom:6px;color:var(--cream)}
input,textarea{width:100%;font:16px var(--sans);padding:14px;border:1.5px solid #6b6359;background:#151311;color:#fff;border-radius:10px;transition:border-color .2s}
input:focus,textarea:focus{border-color:var(--hot)}
textarea{min-height:110px;resize:vertical}
.small{font-size:14px;color:#b7ad9c;margin:0}
footer{padding:44px 0 120px;font-size:15px;color:#b7ad9c;background:var(--ink);border-top:1px solid #2c2823}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
footer a{color:var(--cream)}
footer b{color:var(--cream)}
.sticky{display:none}
.page{padding:56px 0 80px;background:var(--paper)}
.page h1{font-size:clamp(2.4rem,6vw,4rem)}
.page h2{font-size:1.7rem;margin-top:1.6em}
@media (max-width:960px){
 nav.main{display:none}
 .hero-grid{grid-template-columns:1fr}
 .hero-phone{margin-top:20px}
 .feat{grid-template-columns:1fr}
 .feat-stage{display:none}
 .feat-steps .step{min-height:0;opacity:1;padding:34px 0;border-top:1px solid #3a352f}
 .feat-mobile-shot{display:block;margin-top:24px}
 .feat-mobile-shot .phone{width:250px}
 .feat-mobile-shot .scr{opacity:1}
 .split,.about{grid-template-columns:1fr}
 .days{grid-template-columns:1fr 1fr;row-gap:20px}
 .prices{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
 .hero{padding-top:100px}
 .hero-phone .f1{left:0}.hero-phone .f2{right:0}
 .counters{grid-template-columns:1fr}
 .counters div{padding:18px 0;border-bottom:1px solid #3a352f}
 .days{grid-template-columns:1fr}
 .days .line{display:none}
 .days>div:not(.line){border-left:2px solid var(--acc);padding:4px 0 4px 18px}
 .prices{grid-template-columns:1fr}
 .gal-track{overflow-x:auto;scroll-snap-type:x mandatory;width:auto;padding-right:20px}
 .gal-track .ex{scroll-snap-align:start}
 .ba{aspect-ratio:4/5}
 header.top .btn{display:none}
 .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid #3a352f;z-index:30;color:var(--cream)}
 .sticky a{flex:1}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}

}
.on-dark{background:var(--ink)}

html.gs .statement h2 .dim{color:#b9ae9c}
.statement h2 .dim{color:var(--acc-d)}
@media (prefers-reduced-motion:reduce){.marquee .track{flex-wrap:nowrap;width:max-content}}
/* hero intro in CSS so it runs before scripts load */
@keyframes hUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes hIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hPh{from{opacity:0;transform:translateY(80px) rotate(4deg)}to{opacity:1;transform:none}}
.hero h1 .ln>span{animation:hUp 1.2s cubic-bezier(.16,1,.3,1) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.1s}.hero h1 .ln:nth-child(3)>span{animation-delay:.2s}
.h-in{animation:hIn 1s cubic-bezier(.16,1,.3,1) .45s both}.lede.h-in{animation-delay:.55s}.ctas.h-in{animation-delay:.65s}
.hero-phone .phone{animation:hPh 1.3s cubic-bezier(.16,1,.3,1) .3s both}
.hero-scr>*{animation:hIn .7s cubic-bezier(.16,1,.3,1) both}
.hero-scr>*:nth-child(1){animation-delay:.8s}.hero-scr>*:nth-child(2){animation-delay:.9s}.hero-scr>*:nth-child(3){animation-delay:1s}.hero-scr>*:nth-child(4){animation-delay:1.1s}.hero-scr>*:nth-child(5){animation-delay:1.2s}.hero-scr>*:nth-child(6){animation-delay:1.3s}
.hero-phone .f1{animation:hIn .8s cubic-bezier(.16,1,.3,1) 1.4s both,bob 5s ease-in-out 2.2s infinite alternate}
.hero-phone .f2{animation:hIn .8s cubic-bezier(.16,1,.3,1) 1.6s both,bob 5.6s ease-in-out 2.4s infinite alternate-reverse}
@keyframes bob{from{translate:0 -8px}to{translate:0 8px}}
.counters>div{animation:hIn 1s cubic-bezier(.16,1,.3,1) both}.counters>div:nth-child(1){animation-delay:.8s}.counters>div:nth-child(2){animation-delay:.9s}.counters>div:nth-child(3){animation-delay:1s}
/* ===== v3: design-studio layout ===== */
.hero{padding-bottom:0}
.hero-copy{max-width:980px}
.hero h1{font-size:clamp(2.8rem,8vw,7rem)}
.hero .ctas .btn.ghost{color:var(--cream)}
.hero .ctas .btn.ghost::before{background:var(--cream)}
.hero .ctas .btn.ghost:hover{color:var(--ink)}
.browser{background:#0b0a09;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #3a352f,0 50px 90px -40px rgba(0,0,0,.75)}
.browser .bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#24211d}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#4a443c}
.browser .bar span{margin-left:14px;flex:1;max-width:340px;background:#151311;color:#a49a89;font-size:12.5px;border-radius:7px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser .vp{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.browser .vp img{width:100%;height:auto}
.dev-phone{width:23%;min-width:120px;background:#0b0a09;border-radius:30px;padding:8px;box-shadow:0 0 0 1px #3a352f,0 40px 70px -25px rgba(0,0,0,.8)}
.dev-phone .vp{aspect-ratio:390/800;overflow:hidden;border-radius:23px;background:#111}
.dev-phone .vp img{width:100%;height:auto}
.hero-stage{position:relative;margin:64px auto 0;width:min(1040px,100%);padding-bottom:40px}
.hero-browser{width:88%}
.hero-phone-d{position:absolute;right:0;bottom:0}
.hero-browser .vp img{animation:pan 22s ease-in-out 2.4s infinite alternate}
.hero-phone-d .vp img{animation:panp 18s ease-in-out 2.8s infinite alternate}
@keyframes pan{0%,8%{transform:none}92%,100%{transform:translateY(-65%)}}@keyframes panp{0%,8%{transform:none}92%,100%{transform:translateY(-38%)}}

.wire{position:absolute;left:0;top:38px;width:88%;aspect-ratio:16/10;pointer-events:none}
.wire i{position:absolute;background:#2c2823;border-radius:6px;animation:wireOut .9s cubic-bezier(.7,0,.2,1) both}
.wire .w1{left:5%;top:6%;width:22%;height:5%;animation-delay:1.1s}
.wire .w2{left:5%;top:20%;width:55%;height:22%;animation-delay:1.2s}
.wire .w3{left:5%;top:48%;width:38%;height:6%;animation-delay:1.3s}
.wire .w4{left:5%;top:62%;width:18%;height:8%;animation-delay:1.4s}
.wire .w5{left:64%;top:16%;width:31%;height:60%;animation-delay:1.25s}
.wire .w6{left:0;top:0;width:100%;height:100%;background:#1c1916;z-index:-1;border-radius:0 0 14px 14px;animation-delay:1.5s}
@keyframes wireOut{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(.96)}}
.hero-stage .note{position:absolute;background:var(--cream);color:var(--ink);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;box-shadow:0 18px 36px -16px rgba(0,0,0,.7);white-space:nowrap;animation:hIn .8s cubic-bezier(.16,1,.3,1) both}
.hero-stage .note::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:1px}
.hero-stage .n1{left:-2%;top:16%;animation-delay:1.9s}
.hero-stage .n2{right:16%;top:-4%;animation-delay:2.1s}
.hero-stage .n3{right:6%;bottom:2%;animation-delay:2.3s;z-index:2}
.hero-browser{animation:hPh 1.3s cubic-bezier(.16,1,.3,1) .25s both}
.hero-phone-d{animation:hPh 1.3s cubic-bezier(.16,1,.3,1) .6s both}
/* showcase */
.show{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;margin-top:20px}
.show-steps .step{min-height:88vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .5s var(--ease)}
.show-steps .step.active{opacity:1}
.show-steps .n{font:400 1rem var(--serif);color:var(--hot);margin-bottom:12px}
.show-steps h3{font-size:clamp(2rem,3.4vw,2.9rem);margin-bottom:12px}
.show-steps .lead{font-size:1.1rem;color:var(--cream)}
.show-steps dl{margin:18px 0 18px;display:grid;gap:12px}
.show-steps dl div{display:grid;grid-template-columns:80px 1fr;gap:12px;padding-top:12px;border-top:1px solid #3a352f;font-size:15.5px}
.show-steps dt{font-weight:700;color:var(--hot);text-transform:uppercase;font-size:12px;letter-spacing:.1em;padding-top:3px}
.show-steps dd{margin:0;color:#cfc6b6}
.show-steps .more{color:var(--cream);font-weight:600;padding:10px 0;display:inline-block}
.show-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.slides{position:relative;width:100%}
.show-stage .slide{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.show-stage .slide .browser{width:90%;clip-path:inset(0 0 100% 0 round 14px);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.show-stage .slide .dev-phone{position:absolute;right:0;bottom:-30px;width:24%;opacity:0;transform:translateY(60px);transition:opacity .6s,transform .9s var(--ease)}
.show-stage .slide.show .browser{clip-path:inset(0 0 0 0 round 14px)}
.show-stage .slide.show .dev-phone{opacity:1;transform:none;transition-delay:.25s}
.show-stage .slide.show{z-index:2}
.show-stage .prog{right:-24px}
.show-mobile{display:none;margin-top:18px}
/* before/after: full page */
.ba{aspect-ratio:16/10}
.ba .old{background:#c9d3dd;font-family:"Times New Roman",serif;padding:0;color:#222}
.ba .old .o-top{background:#1d3a8a;color:#fff;padding:2% 3%}
.ba .old .o-logo{font:bold clamp(14px,2.4vw,30px) Impact,"Arial Black",sans-serif;color:#ffef3a;text-shadow:2px 2px 0 #b00;letter-spacing:1px}
.ba .old .o-nav{font:clamp(10px,1.2vw,14px) Arial,sans-serif;color:#cfe0ff;margin-top:4px;text-decoration:underline}
.ba .old .o-body{display:flex;gap:2%;padding:2% 3%}
.ba .old .o-side{width:22%;background:#e9eef3;border:2px outset #aab;padding:2%;font:clamp(9px,1.1vw,13px) Arial,sans-serif;display:flex;flex-direction:column;gap:6px;color:#00e}
.ba .old .o-side b{color:#222}
.ba .old .o-main{flex:1;background:#fff;border:1px solid #889;padding:2% 3%}
.ba .old h4{font:bold clamp(16px,2.6vw,32px) "Comic Sans MS","Times New Roman",serif;color:#b00;margin:0 0 2%;text-decoration:underline}
.ba .old .o-img{background:#dde;border:1px dashed #889;height:clamp(40px,9vw,120px);display:grid;place-items:center;font:clamp(9px,1vw,12px) monospace;color:#667;margin-bottom:2%}
.ba .old p{font-size:clamp(10px,1.3vw,15px);max-width:none;margin:0 0 1.5%}
.ba .old .o-call{color:#b00;font-weight:bold;text-align:center}
.ba .new{background:#000;padding:0}
.ba .new img{width:100%;height:100%;object-fit:cover;object-position:top}
/* what you get */
.get{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);margin-top:44px}
.get .gh{font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-d);margin-bottom:8px}
.get ol{list-style:none;padding:0;margin:0;counter-reset:g}
.get-col ol[start="7"]{counter-reset:g 6}
.get li{counter-increment:g;display:grid;grid-template-columns:3em 1fr;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--ease)}
.get li::before{content:counter(g,decimal-leading-zero);grid-row:span 2;font:400 1.05rem var(--serif);color:var(--acc)}
.get li:hover{padding-left:8px}
.get li b{font:450 1.35rem var(--serif)}
.get li span{color:var(--mut);font-size:16px}
.get-col:first-child li b{font-size:1.6rem}
.aside{margin-top:20px;font-size:15.5px;color:var(--mut)}
/* process on dark */
#how .days .line{background:#3a352f}
#how .days .d{color:var(--hot)}
#how .days p{color:#cfc6b6}
#how .days h3{font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#b7ad9c}
#how .note{background:var(--ink2);color:#cfc6b6;border-left-color:var(--hot)}
.qh{margin-top:80px;font-size:clamp(1.6rem,3vw,2.2rem)}
.qual{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #3a352f}
.qual div{padding:22px 24px 22px 0;border-bottom:1px solid #3a352f}
.qual b{display:block;font:450 1.25rem var(--serif);color:var(--cream);margin-bottom:6px}
.qual span{color:#cfc6b6;font-size:15.5px}
@media (max-width:960px){
 .show{grid-template-columns:1fr}
 .show-stage{display:none}
 .show-steps .step{min-height:0;opacity:1;padding:40px 0;border-top:1px solid #3a352f}
 .show-mobile{display:block}
 .get{grid-template-columns:1fr}
 .qual{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
 .hero-stage{margin-top:44px;padding-bottom:30px}
 .hero-browser,.wire{width:94%}
 .hero-phone-d{width:34%;right:-2%}
 .hero-stage .note{font-size:12px;padding:6px 11px}
 .hero-stage .n2{display:none}
 .hero-stage .n1{left:2%;top:auto;bottom:-6px}
 .hero-stage .n3{display:none}
 .browser .bar{height:30px}.wire{top:30px}
 .ba{aspect-ratio:3/4}
 .ba .old .o-side{display:none}
 .qual{grid-template-columns:1fr}
 .show-steps dl div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){.wire{display:none}}
.slides{height:min(72vh,620px)}
.show-stage .slide{display:block}
@media (prefers-reduced-motion:no-preference){.lite .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.lite .rv.in{opacity:1;transform:none}}
@media (max-width:700px){.hero-browser .vp img,.hero-phone-d .vp img{animation:none}}
@media (max-width:960px){main>section,.marquee{content-visibility:auto;contain-intrinsic-size:auto 1200px}}