/* ---- fonts ----
   Declared here instead of through a Google Fonts stylesheet: that stylesheet was one more server to wait for
   before anything could paint, and inner pages loaded a second one whose fonts nothing used. These are the
   same files Google serves, upright only (no italic was ever set, yet 100 KB of it downloaded on the home).
   Each page <head> preloads the ones its first screen needs. If Google ever retires a URL the text falls back
   to the system face named in --display / --body / --mono; refresh the URLs from fonts.googleapis.com/css2. */
@font-face{font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100% 125%; font-display:swap; src:url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100% 125%; font-display:swap; src:url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter Tight'; font-style:normal; font-weight:400 600; font-display:swap; src:url(https://fonts.gstatic.com/s/intertight/v9/NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter Tight'; font-style:normal; font-weight:400 600; font-display:swap; src:url(https://fonts.gstatic.com/s/intertight/v9/NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Duckframe — next home (phase 1). Production palette, motion-first. */
:root{
  --navy0:#000814; --navy1:#001D3D; --navy2:#003566; --ink:#F5F7FA; --dim:#9BB0C9; --gold:#FFC300; --gold2:#FFD60A;
  --display:'Archivo', 'Arial Black', Impact, sans-serif; --body:'Inter Tight', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace;
  --pad:clamp(20px, 4vw, 56px); --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{background:var(--navy0); color:var(--ink); -webkit-text-size-adjust:100%;}
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
body{font-family:var(--body); font-size:16px; line-height:1.5; overflow-x:hidden; min-height:100svh;}
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%;}
.display{font-family:var(--display); font-weight:900; font-stretch:125%; letter-spacing:-0.04em; line-height:0.92; text-transform:uppercase;}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;}
.gold{color:var(--gold);}
main{position:relative; z-index:2;}
@media (hover:hover) and (pointer:fine){ html.js body{cursor:none;} html.js a, html.js button{cursor:none;} }

/* ---- preloader ----
   The intro (duck, wordmark, tagline) is a CSS animation, so it starts with the first paint. It used to be a
   GSAP timeline: the screen stayed empty and dark until the scripts and the fonts had arrived. next.js only
   runs the count and opens the page. */
#loader{position:fixed; inset:0; z-index:100; display:grid; place-items:center; pointer-events:none;}
.loader-panel{position:absolute; left:0; right:0; height:50.5%; background:var(--navy0);}
.loader-panel.top{top:0;} .loader-panel.bottom{bottom:0;}
.loader-inner{position:relative; z-index:2; display:grid; justify-items:center; gap:18px;}
.loader-duck{width:min(28vw, 180px); height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.6)); opacity:0; transform:translateY(30px) scale(0.8); animation:ldDuck .9s cubic-bezier(.34,1.56,.64,1) both;}
.loader-word{display:flex; font-size:clamp(34px, 8vw, 96px); color:var(--ink); overflow:hidden;}
.loader-word span{display:inline-block; transform:translateY(110%); animation:ldUp .9s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(.15s + var(--i, 0) * .04s);}
.loader-word span:nth-child(2){--i:1;} .loader-word span:nth-child(3){--i:2;} .loader-word span:nth-child(4){--i:3;} .loader-word span:nth-child(5){--i:4;}
.loader-word span:nth-child(6){--i:5;} .loader-word span:nth-child(7){--i:6;} .loader-word span:nth-child(8){--i:7;} .loader-word span:nth-child(9){--i:8;}
.loader-meta{display:flex; gap:28px; color:var(--dim); opacity:0; animation:ldFade .5s ease .6s both;}
.loader-meta #loaderCount{color:var(--gold); min-width:3ch; text-align:right;}
@keyframes ldDuck{to{opacity:1; transform:none;}}
@keyframes ldUp{to{transform:none;}}
@keyframes ldFade{to{opacity:1;}}
html.loaded #loader{display:none;}
/* without scripts nothing would ever lift the curtain */
html.motion-off #loader, html.no-js #loader{display:none;}

/* ---- cursor ---- */
#cursor{position:fixed; left:0; top:0; z-index:90; pointer-events:none; display:none;}
@media (hover:hover) and (pointer:fine){ html.js:not(.motion-off) #cursor{display:block;} }
#cursor .dot{position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:var(--gold);}
#cursor .ring{position:absolute; left:-20px; top:-20px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,195,0,0.7); display:grid; place-items:center; will-change:transform; transition:transform .35s var(--ease), background-color .3s, border-color .3s;}
#cursor .ring span{font-size:4.6px; letter-spacing:0.08em; color:var(--navy0); opacity:0; transition:opacity .2s; white-space:nowrap;}
#cursor.hover .ring{transform:scale(1.6); background:rgba(255,195,0,0.16); border-color:var(--gold);}
#cursor.label .ring{transform:scale(2.4); background:var(--gold); border-color:var(--gold);}
#cursor.label .ring span{opacity:1;}
#cursor.label .dot{opacity:0;}
#cursor.grab .ring{transform:scale(2); border-style:dashed;}

/* ---- nav ---- */
#nav{position:fixed; left:0; right:0; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px var(--pad); mix-blend-mode:normal;
  opacity:0; transform:translateY(-12px);}
html.loaded #nav{opacity:1; transform:none; transition:opacity .8s ease .2s, transform .9s var(--ease) .2s;}
html.motion-off #nav{opacity:1; transform:none;}
.brand{display:flex; align-items:center; gap:10px; font-size:17px; letter-spacing:-0.02em;}
#nav::before{content:''; position:absolute; inset:-1px 0 -40px; background:linear-gradient(180deg, rgba(0,8,20,0.85), rgba(0,8,20,0.5) 55%, transparent); pointer-events:none; z-index:-1;}
.brand .display{font-size:17px; text-transform:none; letter-spacing:-0.03em; font-stretch:110%;}
.nav-links{display:flex; gap:26px;}
.nav-links a{position:relative; padding:6px 0; color:var(--dim); transition:color .25s;}
.nav-links a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:100% 50%; transition:transform .45s var(--ease);}
.nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{transform:scaleX(1); transform-origin:0 50%;}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang{min-height:44px; min-width:44px; color:var(--dim); border:1px solid rgba(245,247,250,0.18); border-radius:100px; padding:0 12px; transition:color .25s, border-color .25s;}
.lang:hover{color:var(--ink); border-color:var(--gold);}
.burger{display:none; position:relative; width:44px; height:44px; border-radius:50%; border:1px solid rgba(245,247,250,0.18); flex-shrink:0; transition:border-color .25s;}
.burger span{position:absolute; left:50%; top:50%; width:18px; height:1.5px; background:var(--ink); transition:transform .45s var(--ease), background-color .25s;}
.burger span:nth-child(1){transform:translate(-50%, -50%) translateY(-4px);} .burger span:nth-child(2){transform:translate(-50%, -50%) translateY(4px);}
html.menu .burger{border-color:var(--gold);} html.menu .burger span{background:var(--gold);}
html.menu .burger span:nth-child(1){transform:translate(-50%, -50%) rotate(45deg);} html.menu .burger span:nth-child(2){transform:translate(-50%, -50%) rotate(-45deg);}
#menu{position:fixed; inset:0; z-index:48; background:var(--navy0); display:flex; flex-direction:column; justify-content:space-between; padding:110px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom)); visibility:hidden; pointer-events:none; clip-path:circle(0px at calc(100% - 40px) 40px); transition:clip-path .7s var(--ease), visibility 0s .7s;}
html.menu #menu{visibility:visible; pointer-events:auto; clip-path:circle(160% at calc(100% - 40px) 40px); transition:clip-path .7s var(--ease);}
.menu-links{display:flex; flex-direction:column; gap:2px;}
.menu-links a{font-size:clamp(34px, 9.6vw, 72px); line-height:1.02; color:var(--ink); opacity:0; transform:translateY(24px); transition:opacity .45s ease, transform .7s var(--ease); min-height:44px;}
html.menu .menu-links a{opacity:1; transform:none;}
.menu-links a:nth-child(1){transition-delay:.12s} .menu-links a:nth-child(2){transition-delay:.17s} .menu-links a:nth-child(3){transition-delay:.22s} .menu-links a:nth-child(4){transition-delay:.27s} .menu-links a:nth-child(5){transition-delay:.32s} .menu-links a:nth-child(6){transition-delay:.37s} .menu-links a:nth-child(7){transition-delay:.42s}
.menu-links a:hover{color:var(--gold);}
.menu-foot{display:grid; gap:12px; opacity:0; transform:translateY(16px); transition:opacity .45s ease .45s, transform .7s var(--ease) .45s;}
html.menu .menu-foot{opacity:1; transform:none;}
.menu-foot p{color:var(--dim);}
html.menu body{overflow:hidden;}
@media (max-width:760px){ .nav-links{display:none;} .burger{display:block;} #nav .nav-quote{display:none;} #nav{padding:14px 18px;} } /* #nav: must beat .btn-gold{display:inline-flex} below, or the quote button pushes the burger off-screen */
@media (min-width:761px){ #menu{display:none;} }

/* ---- buttons ---- */
.btn-gold,.btn-line{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:100px; font-weight:700; position:relative; overflow:hidden; white-space:nowrap; transition:color .3s, border-color .3s, box-shadow .3s;}
.btn-gold{background:linear-gradient(135deg, var(--gold), var(--gold2)); color:var(--navy0); box-shadow:0 10px 34px -10px rgba(255,195,0,0.55);}
.btn-gold::after{content:''; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(105deg, transparent, rgba(255,255,255,0.6), transparent); transform:skewX(-20deg); transition:left .7s var(--ease);}
.btn-gold:hover::after{left:140%;} .btn-gold:hover{box-shadow:0 18px 50px -12px rgba(255,195,0,0.8);}
.btn-line{border:1px solid rgba(245,247,250,0.28); color:var(--ink);}
.btn-line:hover{border-color:var(--gold); color:var(--gold);}
.btn-gold.big,.btn-line.big{min-height:60px; padding:0 34px; font-size:13px;}
@media (max-width:360px){ .btn-gold,.btn-line{max-width:100%; white-space:normal; text-align:center;} } /* 320px phones: long labels wrap instead of widening the page */
@media (hover:hover) and (pointer:fine){ .magnet{will-change:transform;} }

/* ---- hero ---- */
#hero{position:relative; min-height:100svh; display:grid; align-items:end; padding:calc(var(--pad) + 60px) var(--pad) var(--pad); overflow:hidden; isolation:isolate;}
.hero-media{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-media video{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease;}
html.loaded .hero-media video{opacity:0.55;}
.hero-veil{position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 45%, transparent 0%, rgba(0,8,20,0.55) 55%, var(--navy0) 100%), linear-gradient(180deg, rgba(0,8,20,0.6), transparent 30%, transparent 70%, var(--navy0));}
#duck3d{position:fixed; inset:0; width:100%; height:100%; z-index:45; pointer-events:none; opacity:0; transition:opacity .8s ease;}
#quack{position:fixed; z-index:46; pointer-events:none; font-size:14px; color:var(--navy0); background:var(--gold); padding:6px 12px; border-radius:100px; opacity:0; transform:translate(-50%, -50%) scale(0.6); letter-spacing:-0.02em;}
html.duck-on #duck3d{opacity:1;}
html.dragduck{cursor:grabbing;}
.duck-fallback{position:absolute; right:-2vw; top:50%; width:min(36vh, 28vw); height:auto; transform:translateY(-55%); z-index:1; pointer-events:none; filter:drop-shadow(0 40px 50px rgba(0,0,0,0.6)) drop-shadow(0 0 80px rgba(255,195,0,0.16)); opacity:0; transition:opacity .6s ease;}
html.no3d .duck-fallback, html.motion-off .duck-fallback, html.no-js .duck-fallback{opacity:1;}
.hero-grid{position:relative; z-index:2; display:grid; gap:40px; width:100%;}
.hero-k{display:inline-flex; align-items:center; gap:10px; color:var(--gold2); margin-bottom:22px;}
.blip{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); animation:blip 1.6s ease-in-out infinite;}
@keyframes blip{0%,100%{opacity:1;} 50%{opacity:0.25;}}
h1{font-size:clamp(44px, 6.6vw, 108px); max-width:none;}
.h1-line .w{display:inline-block; white-space:nowrap;}
.h1-line{display:block; overflow:hidden; padding-bottom:0.06em; margin-bottom:-0.06em;}
.h1-line .char{display:inline-block;}
.hero-sub{font-size:clamp(16px, 1.5vw, 20px); color:var(--dim); max-width:44ch; margin-top:28px; line-height:1.55;}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:34px;}
.wa{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 8px; color:var(--dim); text-decoration:underline; text-underline-offset:6px; text-decoration-color:rgba(255,195,0,0.4); transition:color .2s;}
.wa::before{content:''; width:7px; height:7px; border-radius:50%; background:#25D366; box-shadow:0 0 10px rgba(37,211,102,0.7);}
.wa:hover{color:var(--ink);}
.hero-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; border-top:1px solid rgba(245,247,250,0.12); padding-top:18px;}
.hero-proof{display:flex; flex-wrap:wrap; gap:4px 20px; color:var(--dim);}
.hero-proof .k{color:var(--gold2);}
.hero-proof a{display:inline-flex; align-items:center; gap:8px; min-height:32px; color:var(--ink); transition:color .2s;}
.hero-proof a::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--gold);}
.hero-proof a:hover{color:var(--gold);}
.hero-hint{color:var(--dim); white-space:nowrap;}
html.motion-off .hero-hint, html.no3d .hero-hint{display:none;} /* the static duck can't be dragged */
html.js .hero-k, html.js .hero-sub, html.js .hero-cta, html.js .hero-foot{opacity:0;}
html.motion-off .hero-k, html.motion-off .hero-sub, html.motion-off .hero-cta, html.motion-off .hero-foot{opacity:1;}
@media (max-width:760px){
  #hero{padding-top:170px; align-items:start;}
  h1{font-size:clamp(32px, 9.3vw, 56px);}
  .hero-grid{min-width:0;}
  /* same corner as the 3D duck on phones: top right, clear of the subtitle and the buttons */
  .duck-fallback{right:-2vw; top:74px; bottom:auto; width:34vw; max-width:168px; transform:none;}
  .hero-foot{flex-direction:column; align-items:flex-start;}
  .hero-hint{display:none;}
}

/* ---- marquee ---- */
.marquee{position:relative; z-index:2; overflow:hidden; border-top:1px solid rgba(255,195,0,0.2); border-bottom:1px solid rgba(255,195,0,0.2); background:var(--navy0); padding:22px 0;}
.marquee-track{display:flex; align-items:center; white-space:nowrap; width:max-content; font-size:clamp(28px, 5vw, 68px); color:transparent; -webkit-text-stroke:1px rgba(245,247,250,0.55); will-change:transform;}
.marquee-track span{padding:0 28px;}
.marquee-track span:nth-child(4n+3){color:var(--gold); -webkit-text-stroke:0;}
.marquee-track i{width:10px; height:10px; border-radius:50%; background:var(--gold); flex-shrink:0;}

/* ---- manifesto ---- */
#manifesto{position:relative; z-index:2; min-height:70svh; display:grid; place-items:center; padding:20vh var(--pad); background:var(--navy0);}
#dust{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;}
html.dust .manifesto{opacity:0;}
html.dust .manifesto .word{color:var(--ink);} html.dust .manifesto .word.g{color:var(--gold);}
.manifesto{font-size:clamp(30px, 5.6vw, 88px); max-width:16ch; text-align:center; color:var(--ink);}
.manifesto .word{display:inline-block; color:rgba(245,247,250,0.18); transition:color .4s;}
.manifesto .word.lit{color:var(--ink);}
.manifesto .word.lit.g{color:var(--gold);}

/* ---- sections ---- */
section{position:relative; z-index:2; background:var(--navy0);}
#work,#pricing{padding:clamp(80px, 12vw, 160px) var(--pad);}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:clamp(40px, 6vw, 80px);}
h2{font-size:clamp(34px, 6vw, 92px); max-width:14ch;}
.sec-k{color:var(--dim);}
.split .word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.08em; margin-bottom:-0.08em;}
.split .word > span{display:inline-block;}

/* ---- work ---- */
.work-list{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3vw, 44px);}
.work-item{position:relative; display:block;}
.work-item:nth-child(2){margin-top:clamp(40px, 10vw, 140px);}
.work-item:nth-child(4){margin-top:clamp(40px, 10vw, 140px);}
.work-img{aspect-ratio:4/3; overflow:hidden; border-radius:18px; background:var(--navy1); border:1px solid rgba(255,195,0,0.12);}
.work-img img{width:100%; height:118%; object-fit:cover; object-position:50% 0; will-change:transform; transition:filter .6s;}
.work-item:hover .work-img img{filter:saturate(1.1);}
.work-txt{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:baseline; padding:18px 4px 0;}
.work-txt .num{color:var(--gold); grid-row:span 2;}
.work-txt h3{font-size:clamp(22px, 2.6vw, 38px); letter-spacing:-0.03em;}
.work-txt p{color:var(--dim);}
.work-more{margin-top:clamp(40px, 6vw, 80px); text-align:center;}
@media (max-width:760px){ .work-list{grid-template-columns:1fr;} .work-item:nth-child(2), .work-item:nth-child(4){margin-top:0;} }

/* ---- pricing ---- */
.plans{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.plan{position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 28px 26px; border-radius:20px; background:var(--navy1); border:1px solid rgba(255,195,0,0.14); transition:transform .6s var(--ease), border-color .3s, box-shadow .6s;}
.plan:hover{transform:translateY(-8px); border-color:rgba(255,195,0,0.6); box-shadow:0 40px 90px -40px rgba(255,195,0,0.4);}
.plan.featured{border-color:rgba(255,195,0,0.5); background:linear-gradient(160deg, rgba(0,53,102,0.7), var(--navy1));}
.plan .tag{position:absolute; top:-12px; left:24px; background:var(--gold); color:var(--navy0); padding:6px 12px; border-radius:100px; font-weight:700;}
.plan h3{font-size:24px; letter-spacing:-0.03em;}
.price{font-size:clamp(34px, 3.4vw, 46px); display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; letter-spacing:-0.05em;}
.price small{color:var(--dim); font-weight:400;}
.plan .desc{color:var(--dim); line-height:1.7; text-transform:none; letter-spacing:0.02em; font-size:12.5px;}
.plan .go{margin-top:auto; color:var(--gold); font-weight:700; min-height:44px; display:inline-flex; align-items:center;}
@media (max-width:900px){ .plans{grid-template-columns:1fr;} }

/* ---- contact ---- */
#contact{padding:clamp(100px, 16vw, 220px) var(--pad); text-align:center; display:grid; justify-items:center; gap:24px;}
#contact h2{max-width:none;}
#contact > p{color:var(--dim); max-width:40ch; text-transform:none; letter-spacing:0.02em; font-size:13px; line-height:1.7;}
.contact-cta{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; margin-top:10px;}
.mail{color:var(--dim); min-height:44px; display:inline-flex; align-items:center; padding:0 8px; text-transform:none;}
.mail:hover{color:var(--gold);}

/* ---- footer ---- */
footer{position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding:26px var(--pad) calc(var(--pad) + 8px); border-top:1px solid rgba(245,247,250,0.1); color:var(--dim); background:var(--navy0);}
footer a:hover{color:var(--gold);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip{position:fixed; left:12px; top:-80px; z-index:100000; background:var(--gold); color:var(--navy0); padding:12px 16px; font-weight:600; border-radius:4px;}
.skip:focus{top:12px;}
footer .foot-legal{flex-basis:100%; margin:0; text-transform:none; letter-spacing:0.02em; line-height:1.7;}
footer .foot-legal a{text-decoration:underline; text-underline-offset:3px;}
/* On a phone the footer's links are a list of things to tap, not a sentence: a 16 px strip of them wrapped over
   four lines is easy to miss. Each one gets a full-height row and the dots between them go (font-size:0 on the
   list hides the separators, the links set their own size back). */
@media (max-width:760px){
  footer .foot-links{display:flex; flex-wrap:wrap; gap:0 20px; font-size:0;}
  footer .foot-links a{display:inline-flex; align-items:center; min-height:44px; font-size:12px;}
  footer .foot-legal{line-height:2.1;}
  footer .foot-legal a{padding:8px 0;}
}
.motion-btn{color:var(--dim); text-decoration:underline; text-underline-offset:4px; min-height:44px;}

/* ---- motion off ---- */
html.motion-off .h1-line .char, html.motion-off .split .word > span{transform:none !important; opacity:1 !important;}
html.motion-off .marquee-track{animation:marq 40s linear infinite;}
@keyframes marq{to{transform:translateX(-50%);}}
html.motion-off .manifesto .word{color:var(--ink);}
html.motion-off .blip{animation:none;}
html.motion-off .hero-media video{display:none;}

/* ---- cases: each client site opens to full bleed; the video plays on its own and speeds up with the scroll ---- */
#work{padding-bottom:0;}
.cases{margin:0 calc(-1 * var(--pad));}
.case{position:relative; height:200svh;}
.case-stage{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; align-items:end; background:var(--navy0);}
.case-frame{position:absolute; inset:0; overflow:hidden; border-radius:26px; transform:scale(0.62); transform-origin:50% 50%; will-change:transform; background:var(--navy1); box-shadow:0 60px 120px -40px rgba(0,0,0,0.7);}
.case-frame video{width:100%; height:100%; object-fit:cover; object-position:50% 0; transform:scale(1.06); will-change:transform;}
.case-veil{position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,8,20,0.96) 0%, rgba(0,8,20,0.8) 36%, rgba(0,8,20,0.18) 66%, transparent 100%), linear-gradient(180deg, rgba(0,8,20,0.25), transparent 30%, transparent 55%, rgba(0,8,20,0.9) 100%);}
.case-ghost{position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); z-index:1; font-size:clamp(120px, 28vw, 420px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,195,0,0.35); pointer-events:none; will-change:transform; letter-spacing:-0.06em;}
.case-copy{position:relative; z-index:2; padding:0 var(--pad) clamp(28px, 5vh, 64px); max-width:720px; display:grid; gap:10px; justify-items:start;}
.case-idx{color:var(--gold2); display:flex; align-items:center; gap:12px;}
.case-idx .tag{border:1px solid rgba(255,195,0,0.5); border-radius:100px; padding:4px 10px; font-size:10.5px;}
.case-name{font-size:clamp(34px, 5.2vw, 78px); letter-spacing:-0.04em; text-shadow:0 2px 30px rgba(0,8,20,0.6);}
.case-name .char{display:inline-block;} .case-name .w{display:inline-block; white-space:nowrap;}
.case-ind{color:var(--dim);}
.case-desc{font-size:clamp(15px, 1.3vw, 18px); line-height:1.55; color:var(--ink); max-width:46ch; opacity:0.9;}
.case-copy .btn-line{margin-top:8px; background:rgba(0,8,20,0.45);}
.case-bar{position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:0 50%; z-index:3;}
@media (max-width:760px){
  .case{height:170svh;}
  .case-frame{transform:scale(0.86); border-radius:18px; box-shadow:none;}
  .case-frame video{object-position:0% 0%;}
  .case-veil{background:linear-gradient(180deg, rgba(0,8,20,0.2), rgba(0,8,20,0.1) 35%, rgba(0,8,20,0.94) 75%);}
  .case-ghost{top:22%; right:12px; font-size:34vw;}
  .case-name{font-size:clamp(30px, 9vw, 44px);}
  .case-copy{padding-bottom:28px;}
}
html.motion-off .case{height:auto;}
html.motion-off .case-stage{position:static; height:auto; min-height:70svh;}
html.motion-off .case-frame{position:relative; height:60svh; transform:none; border-radius:18px; margin:0 var(--pad);}
html.motion-off .case-frame video{transform:none;}
html.motion-off .case-ghost, html.motion-off .case-bar{display:none;}

/* ---- process: four steps on a horizontal track pinned to the screen (stacked on phones) ---- */
#process{padding:clamp(80px, 12vw, 160px) var(--pad) 0;}
.steps-pin{position:relative; height:100svh; margin:0 calc(-1 * var(--pad)); overflow:hidden;}
.steps-track{position:absolute; left:0; top:50%; transform:translateY(-50%); display:flex; gap:clamp(18px, 2vw, 32px); padding:0 var(--pad); will-change:transform;}
.step{flex:0 0 min(78vw, 560px); min-height:min(62svh, 520px); display:flex; flex-direction:column; gap:14px; padding:clamp(24px, 3vw, 40px); border-radius:22px; background:var(--navy1); border:1px solid rgba(255,195,0,0.14); position:relative; overflow:hidden;}
.step::after{content:''; position:absolute; right:-30%; bottom:-40%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,195,0,0.16), transparent 65%); pointer-events:none;}
.step-n{font-size:clamp(64px, 9vw, 140px); line-height:0.9; color:var(--gold); letter-spacing:-0.06em;}
.step h3{font-size:clamp(24px, 2.6vw, 38px); letter-spacing:-0.03em; margin-top:auto;}
.step p{color:var(--dim); line-height:1.6; font-size:15px; max-width:40ch;}
.step-t{color:var(--gold2); margin-top:6px;}
.steps-bar{position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(20px, 4vh, 40px); height:1px; background:rgba(245,247,250,0.14);}
.steps-bar::after{content:''; position:absolute; left:0; top:0; height:100%; width:100%; background:var(--gold); transform:scaleX(var(--p, 0)); transform-origin:0 50%;}
@media (max-width:760px){
  .steps-pin{height:auto; margin:0; overflow:visible;}
  .steps-track{position:static; transform:none; flex-direction:column; padding:0; gap:14px;}
  .step{flex-basis:auto; min-height:0; padding:22px;}
  .step h3{margin-top:14px;}
  .steps-bar{display:none;}
}
html.motion-off .steps-pin{height:auto; overflow:visible;} html.motion-off .steps-track{position:static; transform:none; flex-wrap:wrap;}

/* ---- studio ---- */
#studio{padding:clamp(80px, 12vw, 160px) var(--pad);}
.studio-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px, 6vw, 90px); align-items:start;}
.studio-sig{color:var(--gold2); margin-top:26px; padding-left:34px; position:relative;}
.studio-sig::before{content:''; position:absolute; left:0; top:50%; width:22px; height:1px; background:var(--gold);}
.studio-clock{color:var(--dim); margin-top:12px; padding-left:34px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.studio-clock #clock{color:var(--ink);}
.studio-body .lead{font-size:clamp(18px, 1.7vw, 24px); line-height:1.5; color:var(--ink); letter-spacing:-0.01em;}
.studio-body p + p{margin-top:18px; color:var(--dim); font-size:16px; line-height:1.65;}
.studio-list{list-style:none; margin:30px 0 32px; padding:0; display:grid; gap:12px;}
.studio-list li{padding-left:30px; position:relative; line-height:1.5; color:var(--ink);}
.studio-list li::before{content:''; position:absolute; left:0; top:0.65em; width:18px; height:1px; background:var(--gold);}
@media (max-width:760px){ .studio-grid{grid-template-columns:1fr; gap:28px;} }

/* ---- pricing extras + FAQ ---- */
.pricing-note{color:var(--dim); margin-top:26px; max-width:76ch; line-height:1.7; text-transform:none; letter-spacing:0.02em;}
.plan{transform-style:preserve-3d;}
#faq{padding:clamp(60px, 9vw, 120px) var(--pad) 0;}
.faq{display:grid; border-top:1px solid rgba(245,247,250,0.12); max-width:900px;}
.faq details{border-bottom:1px solid rgba(245,247,250,0.12);}
.faq summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; cursor:pointer; font-family:var(--display); font-weight:700; font-stretch:110%; font-size:clamp(17px, 1.6vw, 22px); letter-spacing:-0.02em; color:var(--ink); min-height:44px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary i{flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,195,0,0.5); position:relative; transition:transform .5s var(--ease), background-color .3s;}
.faq summary i::before, .faq summary i::after{content:''; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--gold); transform:translate(-50%,-50%);}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq details[open] summary i{transform:rotate(45deg); background:rgba(255,195,0,0.12);}
.faq p{color:var(--dim); line-height:1.65; font-size:16px; padding:0 0 24px; max-width:66ch;}

/* ---- page transition ---- */
#wipe{position:fixed; inset:0; z-index:95; pointer-events:none; visibility:hidden;}
#wipe .panel{position:absolute; left:0; right:0; height:50.5%; background:var(--navy0); transform:scaleY(0);}
#wipe .panel.top{top:0; transform-origin:50% 0;} #wipe .panel.bottom{bottom:0; transform-origin:50% 100%;}
#wipe .wm{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; opacity:0;}
html.leaving #wipe{visibility:visible; pointer-events:auto;}

/* ---- process scenes: each step is a small live scene; the active card lights up and the duck hops onto it ---- */
.steps-path{position:absolute; left:calc(var(--pad) + 60px); right:calc(var(--pad) + 60px); top:calc(50% + 2px); height:1px; background:repeating-linear-gradient(90deg, rgba(255,195,0,0.4) 0 8px, transparent 8px 16px); z-index:0; pointer-events:none;}
.step{position:relative; z-index:1; transition:transform .7s var(--ease), border-color .5s, box-shadow .7s, opacity .5s; opacity:0.6; transform:scale(0.96);}
.step.on{opacity:1; transform:scale(1); border-color:rgba(255,195,0,0.55); box-shadow:0 40px 90px -50px rgba(255,195,0,0.45);}
.step-n{transition:color .5s, -webkit-text-stroke-color .5s; color:transparent; -webkit-text-stroke:1.5px rgba(255,195,0,0.5);}
.step.on .step-n{color:var(--gold); -webkit-text-stroke-color:transparent;}
.step-art{position:relative; height:150px; margin:8px 0 6px; display:grid; align-content:center; color:var(--gold);}
/* 01 chat */
.art-chat{gap:10px; font-family:var(--body); font-size:13.5px; line-height:1.35;}
.bub{max-width:80%; padding:10px 14px; border-radius:16px; opacity:0; transform:translateY(10px) scale(0.96); transition:opacity .4s ease, transform .6s var(--ease);}
.bub.you{background:rgba(245,247,250,0.1); color:var(--ink); border-bottom-left-radius:4px; justify-self:start;}
.bub.me{background:var(--gold); color:var(--navy0); border-bottom-right-radius:4px; justify-self:end; position:relative; min-height:40px;}
.bub.me span{opacity:0; transition:opacity .3s ease;}
.bub.me .dots{position:absolute; left:14px; top:50%; transform:translateY(-50%); display:flex; gap:4px;}
.bub.me .dots b{width:6px; height:6px; border-radius:50%; background:var(--navy0); opacity:0.5; animation:dot 0.9s ease-in-out infinite;}
.bub.me .dots b:nth-child(2){animation-delay:.15s} .bub.me .dots b:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{transform:translateY(0); opacity:.4} 50%{transform:translateY(-4px); opacity:1}}
.step.on .bub.you{opacity:1; transform:none; transition-delay:.2s;}
.step.on .bub.me{opacity:1; transform:none; transition-delay:.7s;}
.step.on .bub.me span{opacity:1; transition-delay:1.9s;}
.step.on .bub.me .dots{animation:hide 0s linear 1.9s forwards;}
@keyframes hide{to{opacity:0; visibility:hidden}}
/* 02 build: the wireframe draws itself */
.art-build svg{width:100%; max-width:320px; height:auto; color:rgba(255,195,0,0.9);}
.art-build .d{stroke-dasharray:1000; stroke-dashoffset:1000;}
.step.on .art-build .d{animation:draw 1.6s var(--ease) forwards;}
.step.on .art-build .d:nth-child(2){animation-delay:.15s} .step.on .art-build .d:nth-child(3){animation-delay:.25s} .step.on .art-build .d:nth-child(4){animation-delay:.3s} .step.on .art-build .d:nth-child(5){animation-delay:.45s} .step.on .art-build .d:nth-child(6){animation-delay:.6s} .step.on .art-build .d:nth-child(7){animation-delay:.75s} .step.on .art-build .d:nth-child(8){animation-delay:.9s} .step.on .art-build .d:nth-child(9){animation-delay:1.1s}
@keyframes draw{to{stroke-dashoffset:0}}
.art-build .caret{position:absolute; left:calc(50% + 60px); top:38%; width:2px; height:18px; background:var(--gold); opacity:0;}
.step.on .art-build .caret{animation:blink 1s steps(2) infinite 1.4s;}
@keyframes blink{50%{opacity:1}}
/* 03 review: a phone with the preview and the approval stamp */
.art-review{place-items:center;}
.phone{width:78px; height:140px; border:2px solid rgba(255,195,0,0.7); border-radius:16px; position:relative; padding:14px 10px; display:grid; gap:7px; align-content:start; transform:translateY(14px) rotate(-6deg); opacity:0; transition:transform .8s var(--ease), opacity .5s;}
.step.on .phone{transform:none; opacity:1;}
.phone .bar{width:22px; height:3px; border-radius:2px; background:rgba(255,195,0,0.7); justify-self:center; margin-bottom:6px;}
/* the lines grow with a transform, not with their width (a width transition re-lays-out the pinned section every frame) */
.phone .l{height:5px; border-radius:3px; background:rgba(245,247,250,0.55); transform:scaleX(0); transform-origin:left center; transition:transform .6s var(--ease);}
.phone .w1{width:80%;} .phone .w2{width:62%;} .phone .w3{width:70%;}
.step.on .phone .l{transform:none;}
.step.on .phone .w1{transition-delay:.5s} .step.on .phone .w2{transition-delay:.65s} .step.on .phone .w3{transition-delay:.8s}
.phone .btn{width:34px; height:10px; border-radius:6px; background:var(--gold); margin-top:6px; transform:scale(0); transition:transform .5s var(--ease) 1s;}
.step.on .phone .btn{transform:none;}
.stamp{position:absolute; right:14%; top:30%; padding:6px 12px; border:2px solid var(--gold); color:var(--gold); border-radius:8px; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; transform:rotate(-12deg) scale(2.2); opacity:0;}
.step.on .stamp{animation:stamp .5s cubic-bezier(.2,1.4,.4,1) 1.5s forwards;}
@keyframes stamp{to{transform:rotate(-12deg) scale(1); opacity:1}}
/* 04 launch: the address goes live, gold confetti */
.art-launch{place-items:center;}
.url{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:100px; border:1px solid rgba(245,247,250,0.2); font-family:var(--mono); font-size:13px; letter-spacing:0.04em; color:var(--ink); background:rgba(0,8,20,0.5); transform:scale(0.9); opacity:0; transition:transform .7s var(--ease), opacity .4s;}
.step.on .url{transform:none; opacity:1;}
.url .live{width:9px; height:9px; border-radius:50%; background:#25D366; box-shadow:0 0 0 0 rgba(37,211,102,0.6);}
.step.on .url .live{animation:pulse 1.6s ease-out infinite .6s;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.6)} 100%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}
.confetti{position:absolute; inset:0; pointer-events:none;}
.confetti b{position:absolute; left:50%; top:50%; width:7px; height:7px; background:var(--gold); border-radius:1px; opacity:0;}
.confetti b:nth-child(odd){background:var(--gold2); width:5px; height:9px;}
.step.on .confetti b{animation:burst 1.3s cubic-bezier(.2,.8,.3,1) .5s forwards;}
.confetti b:nth-child(1){--dx:-120px;--dy:-70px} .confetti b:nth-child(2){--dx:110px;--dy:-80px} .confetti b:nth-child(3){--dx:-80px;--dy:60px} .confetti b:nth-child(4){--dx:90px;--dy:55px} .confetti b:nth-child(5){--dx:-150px;--dy:-10px} .confetti b:nth-child(6){--dx:140px;--dy:-20px} .confetti b:nth-child(7){--dx:-40px;--dy:-90px} .confetti b:nth-child(8){--dx:50px;--dy:-95px} .confetti b:nth-child(9){--dx:-100px;--dy:20px} .confetti b:nth-child(10){--dx:120px;--dy:25px} .confetti b:nth-child(11){--dx:-20px;--dy:80px} .confetti b:nth-child(12){--dx:30px;--dy:75px}
@keyframes burst{0%{transform:translate(0,0) rotate(0); opacity:1} 100%{transform:translate(var(--dx), calc(var(--dy) + 40px)) rotate(200deg); opacity:0}}
@media (max-width:760px){ .steps-path{display:none;} .step{opacity:1; transform:none;} .step-art{height:130px;} }
html.motion-off .step{opacity:1; transform:none;} html.motion-off .step-art{display:none;}

/* ---- bottom pass: contained widths, studio panel, reactive pricing, big FAQ, finale ---- */
.sec-head, .plans, .pricing-note, .faq, .studio-grid, .contact-inner{max-width:1360px; margin-left:auto; margin-right:auto;}
#faq .sec-head{margin-bottom:clamp(28px, 4vw, 48px);}
/* studio */
.studio-panel{margin-top:28px; border:1px solid rgba(255,195,0,0.18); border-radius:18px; background:linear-gradient(160deg, rgba(0,53,102,0.35), rgba(0,29,61,0.2)); max-width:440px;}
.studio-panel .row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 18px; border-top:1px solid rgba(245,247,250,0.08); color:var(--dim);}
.studio-panel .row:first-child{border-top:0;}
.studio-panel b{font-weight:500; color:var(--ink); display:inline-flex; align-items:center; gap:8px;}
.studio-panel .count{color:var(--gold); font-weight:700;}
/* pricing */
.plans{grid-template-columns:1.15fr 1fr 1fr; gap:20px; align-items:stretch;}
.plan{--mx:50%; --my:50%; padding:34px 30px 30px; isolation:isolate;}
.plan::before{content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(360px circle at var(--mx) var(--my), rgba(255,195,0,0.14), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; z-index:-1;}
.plan:hover::before{opacity:1;}
@property --a{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.plan.featured::after{content:''; position:absolute; inset:-1px; border-radius:21px; padding:1.5px; background:conic-gradient(from var(--a), rgba(255,195,0,0) 0%, var(--gold) 12%, rgba(255,214,10,0.9) 20%, rgba(255,195,0,0) 38%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:ring 5s linear infinite; pointer-events:none;}
@keyframes ring{to{--a:360deg;}}
.plans.off .plan.featured::after{animation-play-state:paused;} /* next.js: plans off screen */
.plan h3{font-size:clamp(22px, 2vw, 28px);}
.price{font-size:clamp(38px, 3.4vw, 54px); display:block; line-height:1;}
.price small{display:block; margin-top:8px; font-size:12px;}
.price .num{font-variant-numeric:tabular-nums;}
.plan .desc{display:grid; gap:9px; list-style:none; padding:0; margin:4px 0 0; text-transform:none; letter-spacing:0.02em; font-size:12.5px; color:var(--ink);}
.plan .desc li{display:flex; gap:10px; align-items:flex-start; line-height:1.45;}
.plan .desc li svg{flex-shrink:0; width:16px; height:16px; margin-top:2px; stroke:var(--gold); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30;}
.plan.in .desc li svg{animation:tick .5s var(--ease) forwards; animation-delay:calc(var(--i) * 90ms + 300ms);}
@keyframes tick{to{stroke-dashoffset:0;}}
.plan .go{margin-top:18px; display:inline-flex; align-items:center; gap:8px;}
.plan .go::after{content:'→'; transition:transform .3s var(--ease);}
.plan:hover .go::after{transform:translateX(6px);}
.pricing-note{margin-top:22px;}
@media (max-width:900px){ .plans{grid-template-columns:1fr;} .plan{padding:28px 22px 24px;} }
/* faq */
.faq{max-width:1360px; display:grid; grid-template-columns:1fr; border-top:1px solid rgba(245,247,250,0.12);}
.faq summary{padding:26px 0; gap:22px; font-size:clamp(20px, 2.2vw, 32px); align-items:center;}
.faq .qi{flex-shrink:0; width:3ch; color:var(--gold2); font-size:12px;}
.faq .q{flex:1; transition:color .3s, transform .5s var(--ease);}
.faq details[open] .q, .faq summary:hover .q{color:var(--gold);}
.faq summary:hover .q{transform:translateX(6px);}
.faq summary i{width:40px; height:40px;}
.faq .ans{overflow:hidden;}
.faq .ans p{padding:0 0 28px calc(3ch + 22px); font-size:clamp(15px, 1.25vw, 18px); max-width:70ch;}
@media (max-width:760px){ .faq .ans p{padding-left:0;} .faq summary{padding:20px 0; gap:14px;} .faq .qi{width:2.4ch;} }
/* contact finale */
#contact{position:relative; overflow:hidden; padding:clamp(120px, 18vw, 240px) var(--pad) clamp(100px, 14vw, 200px); isolation:isolate;}
.contact-bg{position:absolute; inset:0; z-index:-1; pointer-events:none;}
.contact-bg video{width:100%; height:100%; object-fit:cover; opacity:0.5;}
.contact-bg .veil{position:absolute; inset:0; background:radial-gradient(90% 70% at 50% 50%, transparent 0%, rgba(0,8,20,0.55) 60%, var(--navy0) 100%), linear-gradient(180deg, var(--navy0), transparent 25%, transparent 75%, var(--navy0));}
.contact-inner{display:grid; justify-items:center; gap:22px; text-align:center;}
.contact-k{display:inline-flex; align-items:center; gap:10px; color:var(--gold2);}
#contact h2{font-size:clamp(42px, 8.5vw, 132px); max-width:none; letter-spacing:-0.05em;}
.contact-p{color:var(--dim); max-width:44ch; font-size:clamp(16px, 1.4vw, 19px); line-height:1.6;}
.contact-cta{margin-top:6px;}
.mail{display:inline-flex; align-items:center; gap:12px; color:var(--dim); padding:0 8px; min-height:44px; text-transform:none; letter-spacing:0.02em; font-size:13px;}
.mail em{font-style:normal; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold2); border:1px solid rgba(255,195,0,0.4); border-radius:100px; padding:4px 10px; transition:background-color .3s, color .3s;}
.mail:hover em, .mail.done em{background:var(--gold); color:var(--navy0);}
html.motion-off .plan.featured::after{animation:none;} html.motion-off .contact-bg video{display:none;}

/* ---- studio pass: heading across, the badge, the body ---- */
.studio-grid{grid-template-columns:minmax(300px, 420px) 1fr; grid-template-areas:"head head" "badge body"; gap:clamp(36px, 5vw, 72px) clamp(36px, 6vw, 90px); align-items:start;}
.studio-head{grid-area:head;}
#studio h2{max-width:22ch;}
.badge-wrap{grid-area:badge; perspective:1200px;}
.studio-body{grid-area:body; padding-top:12px;}
.badge{position:relative; border-radius:22px; padding:22px 22px 18px; background:linear-gradient(165deg, #06284f, var(--navy1) 55%, #001229); border:1px solid rgba(255,195,0,0.28); box-shadow:0 50px 100px -50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06); transform-style:preserve-3d; will-change:transform; transform:rotate(-2.5deg); transition:transform .8s var(--ease);}
.badge.in{transform:rotate(0deg);}
.badge::before{content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 45%, transparent 60%); pointer-events:none;}
.badge .hole{position:absolute; left:50%; top:10px; width:44px; height:8px; margin-left:-22px; border-radius:100px; background:var(--navy0); box-shadow:inset 0 1px 2px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,195,0,0.25);}
.badge-top{display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--dim); font-size:10.5px; letter-spacing:0.12em;}
.badge-top span:last-child{margin-left:auto; color:var(--gold2);}
.badge-photo{position:relative; aspect-ratio:4/5; margin:18px 0 16px; border-radius:14px; overflow:hidden; background:radial-gradient(120% 100% at 30% 20%, #0a3d74, var(--navy1) 60%, #00132a); display:grid; place-items:center;}
.badge-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%;}
.badge-photo .mono-p{font-size:clamp(120px, 14vw, 180px); color:transparent; -webkit-text-stroke:2px rgba(255,195,0,0.55); letter-spacing:-0.06em; line-height:1;}
.badge-photo .ring{position:absolute; inset:14px; border-radius:12px; border:1px dashed rgba(255,195,0,0.35); pointer-events:none;}
.badge-photo.has-photo .mono-p, .badge-photo.has-photo .ring{display:none;}
.badge-name{font-size:clamp(26px, 2.4vw, 34px); letter-spacing:-0.04em; text-transform:uppercase; line-height:0.95;}
.badge-role{color:var(--gold2); margin-top:6px; font-size:11px;}
.badge .studio-panel{margin-top:16px; max-width:none; border-color:rgba(255,195,0,0.14); background:rgba(0,8,20,0.35);}
.badge .studio-panel .row{padding:11px 14px;}
.badge-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; color:rgba(245,247,250,0.58); font-size:12px; letter-spacing:0.02em; min-width:0;}
.badge-bar span:first-child{flex:1; min-width:0; overflow:hidden; white-space:nowrap;} .badge-bar span:last-child{flex-shrink:0;}
.badge{overflow:hidden;}
.badge-bar span:first-child{letter-spacing:-0.08em; font-size:16px; color:rgba(245,247,250,0.35);}
.studio-body .lead{font-size:clamp(20px, 2vw, 28px); line-height:1.35; letter-spacing:-0.02em;}
@media (max-width:900px){
  .studio-grid{grid-template-columns:1fr; grid-template-areas:"head" "badge" "body"; gap:28px;}
  .badge-wrap{max-width:400px;}
  .badge{transform:rotate(-1.5deg);}
}
.studio-grid > *, .badge-wrap, .badge{min-width:0; max-width:100%;}

/* ---- the portrait inside the pass ---- */
.badge-photo img{object-position:50% 12%; transform:scale(1.02); transition:transform 1.2s var(--ease);}
.badge:hover .badge-photo img{transform:scale(1.06);}
.badge-photo .shade{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(0,18,41,0.55) 100%), radial-gradient(120% 80% at 80% 10%, rgba(255,195,0,0.12), transparent 55%);}

/* ---- pricing v2: clearer cards, segment control, "included in all three" ---- */
#pricing .sec-head{align-items:flex-end;}
.pricing-sub{margin-top:18px; max-width:56ch; color:var(--dim); font-size:clamp(15px, 1.25vw, 18px); line-height:1.6;}
.seg{display:inline-flex; gap:4px; padding:4px; border-radius:100px; border:1px solid rgba(245,247,250,0.14); background:rgba(0,29,61,0.4); flex-shrink:0;}
.seg button{min-height:40px; padding:0 18px; border-radius:100px; color:var(--dim); transition:color .25s, background-color .3s;}
.seg button.on{background:var(--gold); color:var(--navy0); font-weight:700;}
.seg button:not(.on):hover{color:var(--ink);}
.plan{gap:10px; padding:30px 28px 26px;}
.plan .tag{top:-12px;}
.plan .kicker{color:var(--gold2); font-size:11px; letter-spacing:0.12em;}
.plan h3{font-size:clamp(26px, 2.3vw, 34px); margin-top:-2px;}
.plan .what{font-size:15px; line-height:1.5; color:var(--ink); max-width:34ch; min-height:3em;}
.price{margin-top:6px;}
.plan .start{color:var(--gold2); font-size:11.5px; letter-spacing:0.04em; text-transform:none; margin-top:-2px;}
.plan .desc{margin-top:14px; padding-top:16px; border-top:1px solid rgba(245,247,250,0.1); gap:10px;}
.plan .desc li i{flex-shrink:0; width:16px; height:16px; margin-top:1px; position:relative;}
.plan .desc li.ok i::before{content:''; position:absolute; left:2px; top:2px; width:5px; height:9px; border:solid var(--gold); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transform-origin:60% 60%; transition:transform .35s var(--ease);}
.plan.in .desc li.ok i::before{transform:rotate(45deg) scale(1); transition-delay:calc(var(--i, 0) * 70ms + 300ms);}
.plan .desc li.no{color:var(--dim);}
.plan .desc li.no i::before{content:''; position:absolute; left:2px; top:8px; width:11px; height:1.5px; background:rgba(245,247,250,0.35);}
.plan .ideal{margin-top:14px; padding-top:14px; border-top:1px solid rgba(245,247,250,0.1); color:var(--dim); text-transform:none; letter-spacing:0.02em; font-size:12px; line-height:1.6;}
.plan.dim{pointer-events:none;}
.pricing-all{margin:26px auto 0; max-width:1360px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:18px 22px; border-radius:18px; border:1px solid rgba(255,195,0,0.16); background:rgba(0,29,61,0.28);}
.pricing-all > p{color:var(--gold2); flex-shrink:0;}
.pricing-all .chips{flex:1; min-width:0;}
.pricing-all .chips li{color:var(--ink); border-color:rgba(245,247,250,0.14); display:inline-flex; align-items:center; gap:8px;}
.pricing-all .chips li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--gold);}
.pricing-all .chips li:last-child{color:var(--dim);} .pricing-all .chips li:last-child::before{background:rgba(245,247,250,0.3);}
@media (max-width:900px){ #pricing .sec-head{align-items:flex-start;} .seg{width:100%; justify-content:stretch;} .seg button{flex:1; padding:0 8px; font-size:11px;} .plan .what{min-height:0;} .pricing-all{padding:16px;} }

/* ---- faq v2: sticky intro + accordion ---- */
.faq-grid{max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(260px, 0.9fr) minmax(0, 1.3fr); gap:clamp(30px, 6vw, 90px); align-items:start;}
.faq-side{position:sticky; top:110px; container-type:inline-size;}
/* sized to its own column, not the viewport: "PREGUNTAS," is ~8.2em wide and
   must never run under the questions (first line = browsers without cqi) */
.faq-side h2{max-width:none; font-size:clamp(30px, 4.1vw, 60px); font-size:clamp(30px, 11.6cqi, 92px);}
.faq-sub{margin:20px 0 24px; color:var(--dim); font-size:clamp(15px, 1.25vw, 18px); line-height:1.6; max-width:34ch;}
.faq{max-width:none; border-top:1px solid rgba(245,247,250,0.12);}
.faq details{position:relative;}
.faq details::before{content:''; position:absolute; left:-18px; top:22px; bottom:22px; width:2px; background:var(--gold); transform:scaleY(0); transform-origin:50% 0; transition:transform .5s var(--ease);}
.faq details[open]::before{transform:scaleY(1);}
.faq details[open] .qi{color:var(--gold);}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr; gap:26px;} .faq-side{position:static;} .faq details::before{left:-10px;} }
/* ---- contact v2: three paths + what happens next ---- */
.paths{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; width:100%; max-width:1080px; margin-top:16px; text-align:left;}
.path{position:relative; display:grid; gap:6px; align-content:start; padding:22px 22px 20px; border-radius:18px; border:1px solid rgba(245,247,250,0.14); background:rgba(0,8,20,0.55); backdrop-filter:blur(8px); color:var(--ink); transition:transform .5s var(--ease), border-color .3s, background-color .3s; min-height:150px;}
.path:hover{transform:translateY(-4px); border-color:rgba(255,195,0,0.55);}
.path.gold{background:linear-gradient(160deg, rgba(255,195,0,0.16), rgba(0,8,20,0.6)); border-color:rgba(255,195,0,0.5);}
.path-k{color:var(--gold2); font-size:10.5px; letter-spacing:0.12em;}
.path strong{font-family:var(--display); font-weight:900; font-stretch:115%; font-size:clamp(20px, 1.8vw, 24px); letter-spacing:-0.03em; line-height:1.05;}
.path-d{color:var(--dim); font-size:13.5px; line-height:1.5;}
.path-go{position:absolute; right:18px; top:18px; color:var(--gold); font-size:16px; transition:transform .4s var(--ease);}
.path:hover .path-go{transform:translateX(4px);}
.path-go em{font-style:normal; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; border:1px solid rgba(255,195,0,0.4); border-radius:100px; padding:4px 10px; transition:background-color .3s, color .3s;}
.path.done .path-go em, .path:hover .path-go em{background:var(--gold); color:var(--navy0);}
button.path{text-align:left; font:inherit;}
.next{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; color:var(--dim);}
.next li{display:inline-flex; align-items:center; gap:10px;}
.next li b{color:var(--gold); font-weight:700;}
.next li + li::before{content:'→'; color:rgba(255,195,0,0.5); margin-right:18px;}
@media (max-width:900px){ .paths{grid-template-columns:1fr;} .path{min-height:0;} .next{flex-direction:column; align-items:flex-start; gap:8px;} .next li + li::before{display:none;} }
.price .cur{font-size:0.62em; vertical-align:baseline; margin-right:2px;}

/* ---- concepts rail: six demos drifting past, the whole strip is a link to the gallery ---- */
.concepts{margin:clamp(70px, 9vw, 130px) calc(-1 * var(--pad)) 0; padding:0 0 clamp(60px, 8vw, 110px); border-top:1px solid rgba(255,195,0,0.14);}
.concepts-head{max-width:1360px; margin:0 auto; padding:clamp(40px, 6vw, 80px) var(--pad) 28px; display:grid; grid-template-columns:1.1fr 1fr; gap:24px 60px; align-items:end;}
.concepts-head h3{font-size:clamp(28px, 4.2vw, 64px); letter-spacing:-0.04em; max-width:16ch;}
.concepts-head p{color:var(--dim); font-size:clamp(15px, 1.25vw, 18px); line-height:1.6; max-width:48ch;}
.concepts-rail{display:block; overflow:hidden; padding:14px 0 22px; cursor:pointer;}
.concepts-track{display:flex; gap:18px; width:max-content; padding-left:var(--pad); will-change:transform;}
.ccard{flex:0 0 clamp(260px, 26vw, 380px); margin:0; border-radius:18px; overflow:hidden; background:var(--navy1); border:1px solid rgba(255,195,0,0.16); position:relative; transform:rotate(calc((var(--i) - 2.5) * 0.6deg)) translateY(calc(var(--i) * 3px)); transition:transform .6s var(--ease), border-color .3s, box-shadow .6s;}
.ccard:hover{transform:rotate(0deg) translateY(-8px) scale(1.03); border-color:rgba(255,195,0,0.6); box-shadow:0 40px 80px -40px rgba(255,195,0,0.4); z-index:2;}
.ccard video{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:0 0; display:block; filter:saturate(0.9); transition:filter .4s;}
.ccard.playing video{filter:none;}
.ccard figcaption{position:absolute; left:12px; right:12px; bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border-radius:100px; background:rgba(0,8,20,0.78); color:var(--ink); font-size:11px; letter-spacing:0.06em;}
.ccard figcaption i{font-style:normal; color:var(--gold2); border:1px solid rgba(255,195,0,0.4); border-radius:100px; padding:3px 8px; font-size:9.5px;}
.concepts .work-more{margin-top:26px; text-align:center;}
@media (max-width:760px){
  .concepts-head{grid-template-columns:1fr; gap:12px;}
  .concepts-rail{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none;}
  .concepts-rail::-webkit-scrollbar{display:none;}
  .concepts-track{transform:none !important; gap:12px; padding:0 var(--pad);}
  .ccard{flex-basis:78vw; transform:none; scroll-snap-align:center;}
  .ccard[aria-hidden]{display:none;}
}
html.motion-off .concepts-track{transform:none !important;} html.motion-off .ccard{transform:none;}

/* phones: iOS re-blurs a backdrop on every scroll frame; at this opacity the blur adds nothing */
@media (hover:none) and (pointer:coarse){ .path{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(0,8,20,0.82);} }

/* ==== cooler pass (2026-09-29) ==== */
/* hero: the headline keeps clear of the duck on desktop */
@media (min-width:901px){ h1{font-size:clamp(44px, 5.8vw, 96px);} #h1{max-width:62vw;} }
.brand{min-height:44px;}
/* spotlight borders: a gold edge lights up under the cursor (injected by next.js on desktop pointers) */
.spot{position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:3; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,214,10,0.95), rgba(255,195,0,0.28) 38%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
:is(.plan, .path, .step, .ccard, .badge):hover > .spot{opacity:1;}
@media (hover:none){ .spot{display:none;} }
/* studio: text centred against the badge, no empty block beside it */
.studio-grid{align-items:center;}
.studio-head{align-self:start;}
/* phones: each client is a browser-window card, copy underneath, nothing pinned, nothing over the video */
@media (max-width:760px){
  .cases{margin:0;}
  .case{height:auto; padding-bottom:clamp(48px, 13vw, 68px);}
  .case-stage, html.motion-off .case-stage{position:relative; height:auto; min-height:0; overflow:visible; display:block; background:none;}
  .case-frame, html.motion-off .case-frame{position:relative; inset:auto; height:auto; margin:0; aspect-ratio:16/11; transform:none; will-change:auto; border-radius:16px; padding-top:30px; background:#0b1a33; border:1px solid rgba(245,247,250,0.12); box-shadow:0 34px 60px -34px rgba(0,0,0,0.9);}
  .case-frame::before{content:attr(data-url); position:absolute; left:0; right:0; top:0; height:30px; display:flex; align-items:center; justify-content:center; font:500 10.5px/1 var(--mono); letter-spacing:0.04em; color:rgba(245,247,250,0.6); background:linear-gradient(#10264a, #0b1a33); border-bottom:1px solid rgba(245,247,250,0.08); z-index:2;}
  .case-frame::after{content:''; position:absolute; left:13px; top:11px; width:8px; height:8px; border-radius:50%; background:#ff5f57; box-shadow:13px 0 0 #febc2e, 26px 0 0 #28c840; z-index:3;}
  .case-frame video{position:absolute; left:0; top:30px; width:100%; height:calc(100% - 30px); object-position:0 0; transform:none; scale:1.16; will-change:auto;}
  .case-veil, .case-bar{display:none;}
  .case-ghost{top:auto; bottom:clamp(40px, 12vw, 60px); right:0; transform:none !important; font-size:30vw; opacity:0.5; will-change:auto;}
  .case-copy{padding:22px 0 0; max-width:none; gap:8px;}
  .case-name{font-size:clamp(28px, 8.4vw, 40px); text-shadow:none;}
  .case-copy .btn-line{background:transparent;}
}

/* ==== cooler pass 2 ==== */
/* gold dust where you tap or click */
.spark{position:fixed; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:radial-gradient(circle, #FFF6C4 0%, var(--gold) 55%, rgba(255,195,0,0) 72%); box-shadow:0 0 8px rgba(255,195,0,0.75); pointer-events:none; z-index:95;}
/* phones: the duck swims along the bottom edge as you read */
.duck-swim{position:fixed; left:0; right:0; bottom:calc(8px + env(safe-area-inset-bottom)); height:24px; z-index:44; pointer-events:none; opacity:0; transition:opacity .4s ease;}
.duck-swim.on{opacity:1;}
.ds-trail{position:absolute; left:0; right:0; bottom:3px; height:2px; background:linear-gradient(90deg, rgba(255,195,0,0), rgba(255,195,0,0.75)); transform-origin:0 50%; transform:scaleX(0);}
.ds-duck{position:absolute; left:6px; bottom:1px; width:20px; height:20px; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6));}
/* a gold line draws across the top of each big section */
#work, #process, #studio, #pricing, #faq, #contact{position:relative;}
.sec-line{position:absolute; left:var(--pad); right:var(--pad); top:0; height:1px; background:linear-gradient(90deg, rgba(255,195,0,0), var(--gold) 50%, rgba(255,195,0,0)); transform:scaleX(0); transform-origin:50% 50%; pointer-events:none; z-index:2;}
/* the pass hangs from its lanyard hole */
.badge{transform-origin:50% 3%;}
/* phones: the plans are a swipe row with the middle card forward */
.plans-dots{display:none;}
@media (max-width:760px){
  .plans{display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); padding:24px calc(var(--pad) + 5vw) 18px; scrollbar-width:none; perspective:1000px;}
  .plans::-webkit-scrollbar{display:none;}
  .plan{flex:0 0 80vw; scroll-snap-align:center;}
  .plans-dots{display:flex; justify-content:center; gap:9px; margin:2px 0 10px;}
  .plans-dots i{width:7px; height:7px; border-radius:50%; background:rgba(245,247,250,0.25); transition:background .3s, transform .3s;}
  .plans-dots i.on{background:var(--gold); transform:scale(1.35);}
}
html.motion-off .duck-swim, html.motion-off .spark, html.motion-off .sec-line{display:none;}

/* phones under 375 px, real font widths (2026-10-12): "DESCUBRIMIENTO" at 24 px is 282 px wide
   (11.75 px per font px) and the step card only has 100vw − 86 px. See next/chrome.css. */
@media (max-width:374px){ .step h3{font-size:calc((100vw - 86px) / 12);} }