/* PromoSecret public site.
   A dark stage lit in the brand's gold, so the real posters — which are loud,
   colourful things — are the brightest objects on the page. Depth comes from
   CSS 3D rather than a WebGL library: the audience is on mobile data, and a
   transform costs nothing to download. */

:root{
  --bg:#0C0A09; --bg-2:#131110; --bg-3:#1B1816;
  --cream:#FDF9F3; --paper:#FFFFFF; --ink:#151210;
  --text:#F6F0E6; --muted:rgba(246,240,230,.66); --faint:rgba(246,240,230,.44);
  --gold:#E8A317; --gold-2:#F5C542; --gold-3:#FFD978; --ember:#FF8A3D;
  --gold-soft:rgba(232,163,23,.14);
  --forest:#12564A; --mint:#3FC1A0; --mint-soft:rgba(63,193,160,.14);
  --clay:#E0674A;
  --line:rgba(246,240,230,.10); --line-2:rgba(246,240,230,.18);
  --glass:rgba(255,250,240,.045); --glass-2:rgba(255,250,240,.08);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-lg:0 40px 90px -34px rgba(0,0,0,.95);
  --radius:24px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* Registered so they can be animated and transitioned: a floating bob that
   composes with whatever transform an element already has, a spotlight that
   fades rather than snaps, and the angle of the best-value card's border. */
@property --bob{syntax:"<length>";inherits:false;initial-value:0px}
@property --spot{syntax:"<number>";inherits:true;initial-value:0}
@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);color-scheme:dark}
/* The nav floats over the page, so an anchor jump would otherwise land the
   heading underneath it. */
section[id],header[id]{scroll-margin-top:92px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@supports (overflow:clip){body{overflow-x:clip}}
/* Film grain over everything: flat black reads as a screen, grain reads as a
   place. One small SVG, rasterised once. */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.025em; line-height:1.05; margin:0; color:var(--text)}
p{margin:0}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--gold);color:var(--ink)}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:1.1rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}

/* ---------- ambient: progress bar, cursor light ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold),var(--ember) 55%,var(--mint));
  box-shadow:0 0 14px rgba(232,163,23,.7);
}
.cursor-glow{
  position:fixed; left:0; top:0; z-index:85; width:560px; height:560px; margin:-280px 0 0 -280px;
  border-radius:50%; pointer-events:none; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(circle,rgba(245,197,66,.085),rgba(245,197,66,.03) 38%,transparent 64%);
}
.cursor-glow.on{opacity:1}

/* ---------- buttons ---------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.76rem 1.4rem;
  background:var(--glass-2); color:var(--text); border:1px solid var(--line-2); border-radius:999px;
  text-decoration:none; font-weight:600; font-size:.95rem; cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--ease),translate .35s var(--ease),box-shadow .3s var(--ease),background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid rgba(245,197,66,.6); outline-offset:3px}
.btn .arrow{display:inline-block; transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-lg{padding:1.05rem 2rem; font-size:1.04rem}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-3),var(--gold) 52%,#D98A0B); color:#2A1D02; border-color:transparent;
  box-shadow:0 12px 32px -12px rgba(232,163,23,.8),inset 0 1px 0 rgba(255,255,255,.55);
}
/* A light sweep every few seconds — the eye goes to what moves. */
.btn-gold::after,.btn-ink::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-130%); animation:sheen 5s var(--ease) 1.8s infinite;
}
.btn-ink::after{background:linear-gradient(110deg,transparent 30%,rgba(245,197,66,.35) 50%,transparent 70%)}
@keyframes sheen{0%{transform:translateX(-130%)}35%,100%{transform:translateX(130%)}}
.btn-gold:hover{color:#2A1D02; box-shadow:0 20px 44px -12px rgba(232,163,23,.95),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-ghost{background:rgba(255,255,255,.03); color:var(--text); border:1px solid var(--line-2); backdrop-filter:blur(8px)}
.btn-ghost:hover{background:var(--cream); color:var(--ink); border-color:var(--cream); box-shadow:0 16px 36px -16px rgba(253,249,243,.45)}
.btn-ink{background:var(--ink); color:var(--cream); border-color:rgba(21,18,16,.9); box-shadow:0 22px 50px -18px rgba(21,18,16,.85)}
.btn-ink:hover{background:#000; color:#fff}

/* ---------- nav ---------- */
nav{
  position:fixed; top:12px; left:12px; right:12px; z-index:100;
  display:flex; justify-content:center; pointer-events:none;
  transition:transform .45s var(--ease);
}
nav.tucked{transform:translateY(calc(-100% - 20px))}
.nav-in{
  pointer-events:auto; position:relative; width:min(1180px,100%);
  display:flex; align-items:center; gap:.75rem; min-height:62px; padding:.5rem .55rem .5rem 1.15rem;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(18,15,13,.42); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
nav.stuck .nav-in{background:rgba(18,15,13,.82); border-color:var(--line-2); box-shadow:0 18px 50px -24px rgba(0,0,0,.9)}
.logo{display:flex; align-items:center; text-decoration:none; flex:none}
.brand-logo-header{display:block; width:190px; height:auto}
footer .brand-logo-header{width:220px}
.nav-links{display:flex; gap:.2rem; align-items:center; margin-left:auto}
.nav-links a{
  position:relative; padding:.55rem .9rem; border-radius:999px; font-size:.92rem; font-weight:500;
  color:var(--muted); text-decoration:none; transition:color .2s ease,background .2s ease;
}
.nav-links a:hover{color:var(--text); background:var(--glass-2)}
.nav-cta{padding:.7rem 1.25rem}
.nav-toggle{
  display:none; position:relative; width:44px; height:44px; flex:none; border-radius:50%;
  border:1px solid var(--line-2); background:var(--glass-2); cursor:pointer; padding:0;
}
.nav-toggle span{position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:var(--text); transition:transform .35s var(--ease),top .35s var(--ease)}
.nav-toggle span:first-child{top:17px}.nav-toggle span:last-child{top:25px}
nav.open .nav-toggle span:first-child{top:21px; transform:rotate(45deg)}
nav.open .nav-toggle span:last-child{top:21px; transform:rotate(-45deg)}
.nav-toggle:focus-visible{outline:3px solid rgba(245,197,66,.6); outline-offset:2px}
@media(max-width:860px){
  .brand-logo-header{width:156px}
  .nav-in{padding-left:1rem}
  .nav-links{
    position:absolute; top:calc(100% + 10px); left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:.2rem; padding:.7rem;
    border:1px solid var(--line-2); border-radius:26px; background:#15120F;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.95);
    opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98); transform-origin:50% 0;
    transition:opacity .3s ease,transform .4s var(--ease),visibility .3s;
  }
  .nav-links a{padding:.95rem 1.1rem; font-size:1.05rem; color:var(--text)}
  nav.open .nav-links{opacity:1; visibility:visible; transform:none}
  .nav-cta{margin-left:auto}
  .nav-toggle{display:block}
}
@media(max-width:420px){
  .wrap{padding-left:18px; padding-right:18px}
  nav{top:8px; left:8px; right:8px}
  .brand-logo-header{width:132px}
  .nav-in{gap:.45rem; min-height:56px; padding:.4rem .4rem .4rem .85rem}
  .nav-cta{padding:.62rem .95rem; font-size:.88rem}
  .nav-toggle{width:40px; height:40px}
  .nav-toggle span{left:12px; right:12px}
  .nav-toggle span:first-child{top:15px}.nav-toggle span:last-child{top:23px}
  nav.open .nav-toggle span:first-child,nav.open .nav-toggle span:last-child{top:19px}
}

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:max(720px,min(100svh,980px)); padding:150px 0 120px;
  display:flex; align-items:center;
  --px:0; --py:0; --sy:0;
}
.hero-bg{position:absolute; inset:0; z-index:-3; pointer-events:none; overflow:hidden}
.aurora{position:absolute; border-radius:50%; will-change:transform; animation:drift 22s ease-in-out infinite alternate}
.aurora.a1{width:980px; height:980px; top:-470px; right:-240px; background:radial-gradient(circle,rgba(232,163,23,.30),rgba(232,163,23,.08) 38%,transparent 64%)}
.aurora.a2{width:820px; height:820px; bottom:-420px; left:-300px; background:radial-gradient(circle,rgba(63,193,160,.22),transparent 64%); animation-duration:27s; animation-delay:-9s}
.aurora.a3{width:620px; height:620px; top:26%; left:28%; background:radial-gradient(circle,rgba(224,103,74,.15),transparent 64%); animation-duration:31s; animation-delay:-15s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(70px,-50px,0) scale(1.12)}
  100%{transform:translate3d(-50px,60px,0) scale(.94)}
}
/* A lit floor the phone stands on, running towards the viewer. */
.hero-floor{
  position:absolute; left:-30%; right:-30%; bottom:-4px; height:42%; overflow:hidden;
  transform:perspective(520px) rotateX(66deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 88%); mask-image:linear-gradient(to top,#000 8%,transparent 88%);
}
.hero-floor i{
  position:absolute; inset:-64px 0 0; display:block;
  background-image:linear-gradient(rgba(245,197,66,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(245,197,66,.16) 1px,transparent 1px);
  background-size:64px 64px; animation:floor 2.8s linear infinite;
}
@keyframes floor{to{transform:translate3d(0,64px,0)}}

/* The wall of real posters, leaning back into the dark. */
.hero-wall{
  position:absolute; z-index:-2; top:-8%; bottom:-8%; right:-8%; width:66%;
  perspective:1500px; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 58% 50%,#000 38%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 58% at 58% 50%,#000 38%,transparent 100%);
  translate:calc(var(--px) * -14px) calc(var(--sy) * .22px + var(--py) * -10px);
}
.wall-plane{
  position:absolute; left:50%; top:50%; width:880px; height:1500px; margin:-750px 0 0 -440px;
  display:flex; gap:20px; opacity:.44;
  transform:rotateX(22deg) rotateY(-20deg) rotateZ(14deg);
}
.wall-col{flex:1; min-width:0}
.wall-track{animation:wallUp 56s linear infinite; will-change:transform}
.wall-col:nth-child(even) .wall-track{animation-name:wallDown; animation-duration:64s}
.wall-col:nth-child(3) .wall-track{animation-duration:50s}
/* A margin rather than a flex gap, so half the track is exactly one set and
   the loop has no seam. */
.wall-track img{display:block; width:100%; height:auto; aspect-ratio:9/16; margin-bottom:20px; border-radius:14px; box-shadow:0 26px 50px -24px rgba(0,0,0,.9); background:var(--bg-3)}
@keyframes wallUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes wallDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

.hero-grid{position:relative; display:grid; grid-template-columns:1.04fr .96fr; gap:2.5rem; align-items:center; width:100%}
.hero-copy{translate:0 calc(var(--sy) * .16px); opacity:calc(1 - var(--sy) / 900)}
.pill{
  display:inline-flex; align-items:center; gap:.6rem; padding:.45rem 1rem .45rem .7rem; margin-bottom:1.7rem;
  border-radius:999px; background:rgba(63,193,160,.10); border:1px solid rgba(63,193,160,.3);
  color:#9BE8D3; font-size:.82rem; font-weight:600; backdrop-filter:blur(8px);
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--mint); animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(63,193,160,.6)}80%,100%{box-shadow:0 0 0 11px rgba(63,193,160,0)}}
h1{font-size:clamp(3rem,6.4vw,5.5rem); font-weight:700; letter-spacing:-.03em; line-height:.98}
.hero-title .line{display:block}
.hero-title .word{display:inline-block}
.hero-title em{font-style:italic; font-weight:600; padding-right:.06em}
.shine{
  background:linear-gradient(100deg,var(--gold-3) 0%,var(--gold) 28%,var(--ember) 50%,var(--gold) 72%,var(--gold-3) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 6s ease-in-out infinite;
}
@keyframes shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero p.lead{font-size:clamp(1.08rem,1.5vw,1.25rem); color:var(--muted); margin:1.6rem 0 2.3rem; max-width:32rem}
.hero-cta{display:flex; gap:.85rem; flex-wrap:wrap; align-items:center}
.hero-note{display:flex; align-items:center; gap:.6rem; margin-top:1.5rem; font-size:.9rem; color:var(--faint)}
.note-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold)}

/* Opening sequence: words rise out of a blur, then everything else follows. */
@media (prefers-reduced-motion:no-preference){
  .js .hero-title .word{animation:wordIn 1s var(--ease) backwards; animation-delay:calc(var(--w) * 75ms + 120ms)}
  .js .hero-title em.word{animation:wordIn 1s var(--ease) backwards,shine 6s ease-in-out 1.4s infinite; animation-delay:calc(var(--w) * 75ms + 120ms),1.4s}
  .js .hero .intro{animation:fadeUp .9s var(--ease) backwards; animation-delay:calc(var(--d) * 110ms + 600ms)}
  .js .pill.intro{animation-delay:40ms}
  .js .phone-rig{animation:phoneIn 1.5s var(--ease) .25s backwards}
  .js .hero-wall .wall-plane{animation:wallIn 2s var(--ease) backwards}
  .js .chip{animation:chipIn .9s var(--spring) backwards,bob 6s ease-in-out infinite}
  .js .chip-a{animation-delay:1.1s,1.1s}.js .chip-b{animation-delay:1.25s,-2s}
  .js .chip-c{animation-delay:1.4s,-4s}.js .chip-d{animation-delay:1.55s,-1s}
}
@keyframes wordIn{from{opacity:0; transform:translateY(.55em) rotateX(-50deg); filter:blur(10px)}to{opacity:1; transform:none; filter:blur(0)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}
@keyframes phoneIn{from{opacity:0; transform:translate3d(60px,80px,-500px) rotateY(-40deg) rotateX(18deg)}to{opacity:1; transform:rotateX(5deg)}}
@keyframes wallIn{from{opacity:0; transform:rotateX(40deg) rotateY(-30deg) rotateZ(20deg) translateZ(-400px)}to{opacity:.44; transform:rotateX(22deg) rotateY(-20deg) rotateZ(14deg)}}
@keyframes chipIn{from{opacity:0; scale:.4}to{opacity:1; scale:1}}

/* ---------- phone stage ---------- */
.phone-stage{position:relative; display:grid; place-items:center; min-height:620px; perspective:1400px; translate:0 calc(var(--sy) * -.06px)}
.stage-glow{
  position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(232,163,23,.38),rgba(232,163,23,.1) 42%,transparent 68%);
  animation:breathe 7s ease-in-out infinite;
}
.stage-ring{
  position:absolute; width:560px; height:560px; border-radius:50%; pointer-events:none;
  border:1px solid rgba(245,197,66,.16);
  transform:rotateX(74deg) translateY(210px); box-shadow:0 0 60px rgba(232,163,23,.18),inset 0 0 60px rgba(232,163,23,.12);
}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.85}50%{transform:scale(1.1); opacity:1}}
.phone-rig{
  position:relative; z-index:3; transform-style:preserve-3d;
  rotate:y calc(-15deg + var(--px) * 12deg);
  transform:rotateX(calc(5deg + var(--py) * -8deg));
}
.phone{
  width:300px; border-radius:46px; padding:10px; position:relative;
  background:linear-gradient(150deg,#3A342F 0%,#171412 38%,#0D0B0A 100%);
  /* Stacked offsets give the frame a machined edge on the side the tilt
     turns towards the viewer. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10), inset 0 2px 1px rgba(255,255,255,.12),
    1px 0 0 #3a332e,2px 1px 0 #332d29,3px 1px 0 #2e2925,4px 2px 0 #292421,5px 2px 0 #24201d,6px 3px 0 #201c19,7px 3px 0 #1c1816,
    30px 50px 90px -24px rgba(0,0,0,.95), 0 0 80px -10px rgba(232,163,23,.25);
  transform:translateY(var(--bob));
  animation:bob 7s ease-in-out infinite;
}
@keyframes bob{0%,100%{--bob:0px}50%{--bob:-14px}}
.screen{position:relative; background:#0B141A; border-radius:36px; overflow:hidden}
/* Island, then a glass reflection that sweeps across now and then. */
.screen::before{content:""; position:absolute; top:9px; left:50%; z-index:3; width:86px; height:24px; margin-left:-43px; border-radius:20px; background:#000}
.screen::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.10) 47%,rgba(255,255,255,.02) 55%,transparent 60%);
  transform:translateX(-100%); animation:glare 9s ease-in-out 2.5s infinite;
}
@keyframes glare{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.wa-top{display:flex; align-items:center; gap:.6rem; padding:2.35rem .95rem .8rem; background:#1F2C34}
.wa-av{width:32px; height:32px; border-radius:50%; flex:none; background:url("/brand/icon-96.png") center/cover,linear-gradient(145deg,var(--gold),var(--gold-2))}
.wa-name{color:#E9EDEF; font-size:.86rem; font-weight:600}
.wa-sub{color:#8696A0; font-size:.68rem; min-height:1em; transition:color .2s}
.wa-sub.is-typing{color:#25D366}
.wa-body{
  height:452px; padding:.3rem .8rem .9rem; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  background:#0B141A radial-gradient(circle at 20% 10%,rgba(255,255,255,.025),transparent 40%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px); mask-image:linear-gradient(to bottom,transparent 0,#000 44px);
  transition:opacity .5s ease;
}
.wa-body.fade{opacity:0}
/* Each message opens its own height, so the conversation scrolls up the way
   a real one does instead of jumping. */
.msg{display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s var(--ease)}
.msg-in{min-height:0; overflow:hidden; display:flex; padding-top:.45rem}
.msg.me .msg-in{justify-content:flex-end}
.msg .bub{transition:transform .5s var(--spring),opacity .35s ease}
.chat-live .msg:not(.show){grid-template-rows:0fr}
.chat-live .msg:not(.show) .bub{opacity:0; transform:translateY(12px) scale(.7)}
.msg.me .bub{transform-origin:100% 100%}.msg.them .bub{transform-origin:0 100%}
.msg.typing{display:none}
.chat-live .msg.typing{display:grid}
.bub{max-width:84%; padding:.5rem .7rem; border-radius:12px; font-size:.78rem; line-height:1.42; color:#E9EDEF}
.bub.them{background:#1F2C34; border-top-left-radius:4px}
.bub.me{background:#005C4B; border-top-right-radius:4px}
.bub b{font-weight:600}
.bub .tiny{display:block; font-size:.62rem; color:#8696A0; margin-top:.2rem}
.bub.me .tiny{color:#9FD8CB}
.voice{display:flex; align-items:center; gap:.5rem; min-width:150px}
.wave{display:flex; gap:2px; align-items:center; flex:1}
.wave i{width:2px; background:#8FD0C4; border-radius:2px; display:block}
.play{width:20px; height:20px; border-radius:50%; background:#E9EDEF; display:grid; place-items:center; flex:none}
.play::after{content:""; border-left:6px solid #005C4B; border-top:4px solid transparent; border-bottom:4px solid transparent; margin-left:2px}
.shot{display:block; width:150px; height:auto; border-radius:6px}
.result-shots{display:flex; gap:4px; margin-bottom:.45rem}
.result-shots img{width:52px; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:5px; box-shadow:0 6px 14px -6px rgba(0,0,0,.8)}
.chat-live .msg.show .result-shots img{animation:pop .6s var(--spring) both}
.chat-live .msg.show .result-shots img:nth-child(2){animation-delay:.12s}
.chat-live .msg.show .result-shots img:nth-child(3){animation-delay:.24s}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.6) rotate(-6deg)}to{opacity:1; transform:none}}
.dots{display:flex; gap:4px; padding:.2rem .1rem}
.dots i{width:6px; height:6px; border-radius:50%; background:#8696A0; animation:typing 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-4px); opacity:1}}

/* Real posters beside the phone. Whole, uncropped, and with nothing laid over
   them — they already carry their own headline and price, which is the proof.
   The file's own shape governs, so nothing is letterboxed or cropped. */
.float{
  position:absolute; z-index:1; display:block; width:auto; height:auto; border-radius:12px; cursor:zoom-in;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06);
  transition:scale .6s var(--ease),filter .5s ease,box-shadow .6s var(--ease),z-index 0s .3s;
  animation:bob 8s ease-in-out infinite;
}
.float:not([src]){visibility:hidden}
.float.one{
  width:178px; left:-14px; top:34px;
  transform:translate3d(calc(var(--px) * -22px),calc(var(--py) * -16px + var(--bob)),-60px) rotateY(24deg) rotate(-7deg);
}
.float.two{
  width:196px; right:-34px; bottom:40px; animation-delay:-3.5s;
  transform:translate3d(calc(var(--px) * 26px),calc(var(--py) * 18px + var(--bob)),-40px) rotateY(-22deg) rotate(6deg);
}
.float:hover{
  z-index:5; scale:1.1; filter:saturate(1.1) brightness(1.04); transition-delay:0s;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(245,197,66,.55),0 0 60px rgba(232,163,23,.35);
}
.phone-stage:has(.float:hover) .phone{filter:brightness(.85)}
@media(max-width:940px){.float{display:none}}

.chip{
  position:absolute; z-index:4; display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .95rem .45rem .45rem; border-radius:999px; font-size:.82rem; font-weight:600; color:var(--text);
  background:rgba(24,20,18,.7); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translate3d(calc(var(--px) * var(--depth) * 1px),calc(var(--py) * var(--depth) * 1px + var(--bob)),0);
}
.chip svg{width:28px; height:28px; padding:6px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--gold-3),var(--gold)); fill:none; stroke:#2A1D02; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.chip-a{left:2%; top:14%; --depth:34}
.chip-b{right:4%; top:26%; --depth:-30}
.chip-c{left:-2%; bottom:26%; --depth:24}
.chip-d{right:0; bottom:10%; --depth:-40}
.chip-b svg{background:linear-gradient(135deg,#8FE3CC,var(--mint))}
.chip-d svg{background:linear-gradient(135deg,#FFB38A,var(--clay))}


@media(min-width:941px) and (max-width:1200px){
  .chip-a{left:-5%}.chip-b{right:-3%}.chip-c{left:-9%; bottom:34%}.chip-d{right:-5%; bottom:6%}
}
@media(max-width:940px){
  .hero{padding:128px 0 110px; min-height:0}
  .hero-grid{grid-template-columns:1fr; gap:2rem; text-align:left}
  .hero-wall{width:auto; left:-30%; right:-30%; top:auto; bottom:-4%; height:720px;
    -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 100%);
    mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 100%)}
  .wall-plane{width:760px}
  .wall-col:nth-child(4){display:none}
  .phone-stage{min-height:600px}
  .chip-a{left:4%; top:8%}.chip-b{right:3%; top:22%}.chip-c{left:2%; bottom:24%}.chip-d{right:3%; bottom:8%}
}
@media(max-width:520px){
  .hero{padding-top:112px}
  h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .hero-cta .btn{flex:1 1 auto}
  .phone-stage{min-height:560px}
  .phone{width:272px}
  .wa-body{height:410px}
  .stage-glow{width:380px; height:380px}
  .stage-ring{width:400px; height:400px; transform:rotateX(74deg) translateY(170px)}
  .chip{font-size:.74rem; padding-right:.8rem}
  .chip svg{width:24px; height:24px; padding:5px}
  .chip-a{left:0; top:4%}.chip-d{right:0; bottom:4%}
  .chip-b,.chip-c{display:none}
}

/* ---------- tapes ---------- */
.tapes{position:relative; z-index:5; height:176px; margin:-84px 0 -14px; overflow:hidden; pointer-events:none}
.tape{position:absolute; left:-6%; right:-6%; overflow:hidden; padding:.95rem 0; pointer-events:auto}
.tape-gold{
  top:20px; z-index:2; transform:rotate(-2.2deg); color:#2A1D02;
  background:linear-gradient(90deg,var(--gold-2),var(--gold) 50%,#F0B230);
  box-shadow:0 24px 50px -20px rgba(232,163,23,.55),inset 0 1px 0 rgba(255,255,255,.4);
}
.tape-dark{top:98px; transform:rotate(1.4deg); background:#15120F; border-block:1px solid var(--line-2); box-shadow:0 24px 50px -20px rgba(0,0,0,.9)}
.tape-track{display:flex; width:max-content; animation:marquee 40s linear infinite}
.tape-dark .tape-track{animation-direction:reverse; animation-duration:52s}
.tape-set{display:flex; align-items:center; gap:1.5rem; padding-right:1.5rem; flex:none}
.tape-gold span{font:700 1.3rem/1 Fraunces,Georgia,serif; letter-spacing:-.01em; white-space:nowrap}
.tape-gold i{font-style:normal; font-size:1rem; opacity:.65}
.tape-dark .label{font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); white-space:nowrap}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
/* Generic marks, not brand logos — a card is a card, a QR is a QR. Swapping in
   Payfast's official badge pack is a file drop; inventing something that looks
   like a trademark is not a thing to do on a payment page. */
.method{
  display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .85rem;
  background:var(--glass-2); border:1px solid var(--line); border-radius:10px;
  font-size:.84rem; color:var(--text); font-weight:500; white-space:nowrap;
}
.method svg{width:16px; height:16px; flex:none; fill:none; stroke:var(--gold-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* A quick answer to the four questions people ask before they try a new
   service: what is free, what they must hand over, whether the work is real,
   and whether they are stuck with the first result. */
.proof-strip{position:relative; padding:3rem 0 0}
.proof-strip-in{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.proof-strip span{
  display:flex; flex-direction:column; gap:.45rem; padding:1.35rem 1.4rem; border-radius:22px;
  background:linear-gradient(180deg,rgba(255,250,240,.06),rgba(255,250,240,.015)); border:1px solid var(--line);
  color:var(--muted); font-size:.9rem; line-height:1.35;
}
.proof-strip b{
  font:700 2.3rem/1 Fraunces,Georgia,serif; letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--gold-3),var(--gold) 60%,var(--ember)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media(max-width:860px){.proof-strip-in{grid-template-columns:repeat(2,1fr)}}
@media(max-width:390px){.proof-strip span{padding:1.1rem} .proof-strip b{font-size:1.9rem}}

/* ---------- sections ---------- */
section{position:relative; padding:6.5rem 0}
.head{max-width:44rem; margin-bottom:3.8rem}
h2{font-size:clamp(2.25rem,4.6vw,3.7rem); letter-spacing:-.028em}
.head p{color:var(--muted); font-size:1.12rem; margin-top:1.15rem; max-width:36rem}

/* Split headings: each word rises out of its own slot. */
.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .12em; margin:0 -.04em -.12em}
.split .w > span{display:inline-block; translate:0 105%; transition:translate 1s var(--ease); transition-delay:calc(var(--w) * 55ms + 80ms)}
.in .split .w > span,.split.in .w > span{translate:0 0}

/* ---------- how it works ---------- */
.how{padding-top:6rem}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; perspective:1400px}
.step,.price,.compare,.story-card{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s var(--ease),border-color .3s ease,box-shadow .4s var(--ease),--spot .35s ease,opacity .9s var(--ease),translate .9s var(--ease),rotate .9s var(--ease);
}
[data-tilt]:hover{--spot:1}
.step{
  position:relative; padding:1rem 1rem 2rem; border-radius:30px; transform-style:preserve-3d;
  background:
    radial-gradient(420px circle at var(--mx) var(--my),rgba(245,197,66,calc(var(--spot) * .13)),transparent 45%),
    linear-gradient(180deg,rgba(255,250,240,.065),rgba(255,250,240,.015));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.step:hover{border-color:rgba(245,197,66,.35); box-shadow:var(--shadow),0 30px 70px -30px rgba(232,163,23,.35)}
.step .art{
  position:relative; height:200px; border-radius:22px; overflow:hidden; margin-bottom:1.5rem;
  background:#0B141A; display:flex; align-items:center; justify-content:center;
  transform:translateZ(26px); box-shadow:0 20px 40px -24px rgba(0,0,0,.9);
}
/* One picture of what actually happens at each step, so the column is not
   three paragraphs of prose in a row. All three are the real thing: photos
   that were sent, the voice note bubble, the posters that came back. */
.art-photos img{width:100%; height:100%; object-fit:cover; display:block; animation:kenburns 16s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.16) translate(-3%,-2%)}}
.art-tag{position:absolute; right:12px; top:12px; padding:.28rem .6rem; border-radius:999px; background:rgba(0,92,75,.9); color:#E9EDEF; font-size:.72rem; font-weight:600}
.art-voice{background:radial-gradient(circle at 50% 120%,rgba(0,92,75,.5),transparent 60%),#0B141A}
.vn{display:flex; align-items:center; gap:.65rem; background:#005C4B; padding:.75rem .9rem; border-radius:14px; border-top-right-radius:4px; box-shadow:0 18px 30px -14px rgba(0,0,0,.8)}
.vn b{color:#8FD0C4; font-size:.72rem; font-weight:500}
.art-voice .wave i{animation:wave 1.15s ease-in-out infinite; transform-origin:50% 50%}
.art-voice .wave i:nth-child(3n){animation-delay:-.35s}
.art-voice .wave i:nth-child(3n+1){animation-delay:-.7s}
.art-voice .wave i:nth-child(4n){animation-duration:.9s}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.3)}}
.art-out{gap:.5rem; padding:1rem; background:radial-gradient(circle at 50% 110%,rgba(232,163,23,.35),transparent 60%),#15110D}
.art-out img{
  height:100%; width:auto; border-radius:7px; object-fit:cover;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.8); transition:transform .6s var(--spring);
}
.art-out img:nth-child(1){transform:rotate(-6deg) translateX(10px)}
.art-out img:nth-child(2){position:relative; z-index:1; transform:translateY(-4px)}
.art-out img:nth-child(3){transform:rotate(6deg) translateX(-10px)}
.step:hover .art-out img:nth-child(1){transform:rotate(-12deg) translate(-8px,6px)}
.step:hover .art-out img:nth-child(2){transform:translateY(-12px) scale(1.08)}
.step:hover .art-out img:nth-child(3){transform:rotate(12deg) translate(8px,6px)}
.num{
  position:relative; z-index:2; width:48px; height:48px; margin:-3.1rem 0 1.1rem 1rem; border-radius:15px;
  display:grid; place-items:center; font:700 1.25rem Fraunces,Georgia,serif; color:#2A1D02;
  background:linear-gradient(135deg,var(--gold-3),var(--gold)); transform:translateZ(46px);
  box-shadow:0 14px 28px -10px rgba(232,163,23,.85),inset 0 1px 0 rgba(255,255,255,.5);
}
.step h3{font-size:1.4rem; margin:0 .8rem .55rem; transform:translateZ(18px)}
.step p{color:var(--muted); font-size:.98rem; margin:0 .8rem}
@media(max-width:900px){.steps{grid-template-columns:1fr; max-width:520px}}

/* ---------- what you get ---------- */
.get-section{padding-top:1rem}
.get{
  position:relative; overflow:hidden; margin:0 16px; padding:6rem 0; border-radius:44px; border:1px solid var(--line);
  background:
    radial-gradient(900px 520px at 8% 0%,rgba(232,163,23,.20),transparent 60%),
    radial-gradient(800px 520px at 100% 100%,rgba(63,193,160,.16),transparent 60%),
    linear-gradient(180deg,#191512,#0F0D0B);
}
.get::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(246,240,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,240,230,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 70%); mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 70%);
}
.get .wrap{position:relative; padding:0 44px}
@media(max-width:700px){.get{margin:0 10px; border-radius:32px; padding:4.5rem 0}.get .wrap{padding:0 22px}}
.pieces{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; padding-top:1rem}
.piece{
  position:relative; margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line-2);
  background:#0B0908; box-shadow:0 34px 70px -34px rgba(0,0,0,.95);
  transform-origin:50% 130%;
  transform:translateY(var(--arc)) rotate(var(--fan));
  transition:transform 1s var(--ease),opacity .8s ease,box-shadow .4s ease,border-color .4s ease;
}
.piece:nth-child(1){--fan:-5deg; --arc:30px; --stack:155%}
.piece:nth-child(2){--fan:-1.7deg; --arc:6px; --stack:52%; transition-delay:.06s}
.piece:nth-child(3){--fan:1.7deg; --arc:6px; --stack:-52%; transition-delay:.12s}
.piece:nth-child(4){--fan:5deg; --arc:30px; --stack:-155%; transition-delay:.18s}
@media (prefers-reduced-motion:no-preference){
  .js .pieces:not(.in) .piece{opacity:0; transform:translateX(var(--stack)) translateY(60px) rotate(0) scale(.84)}
}
.pieces.in .piece:hover{transform:translateY(-22px) rotate(0) scale(1.05); z-index:2; transition-delay:0s; border-color:rgba(245,197,66,.6); box-shadow:0 50px 90px -30px rgba(232,163,23,.45)}
.piece img,.piece video{display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:#0B0908}
.piece.horse-piece img{aspect-ratio:9/16; object-fit:fill}
.piece video{cursor:pointer}
.play-badge{
  position:absolute; left:50%; top:40%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%;
  background:rgba(12,10,9,.55); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.play-badge::after{content:""; position:absolute; left:23px; top:18px; border-left:16px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent}
.piece.playing .play-badge{opacity:0; transform:scale(.6)}
.piece figcaption{padding:.95rem 1.05rem 1.05rem; background:linear-gradient(180deg,rgba(255,250,240,.05),transparent)}
.piece figcaption b{display:block; font-size:.98rem; margin-bottom:.1rem}
.piece figcaption span{font-size:.8rem; color:rgba(253,249,243,.62)}
.made-note{margin-top:3rem; font-size:.95rem; color:var(--faint); max-width:44rem}
@media(max-width:960px){
  .pieces{grid-template-columns:repeat(2,1fr); gap:1.1rem}
  .piece:nth-child(n){--fan:0deg; --arc:0px}
  .piece:nth-child(odd){--stack:40%}.piece:nth-child(even){--stack:-40%}
}
@media(max-width:520px){
  .pieces{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -22px; padding:1rem 22px 1.5rem; gap:.9rem; scrollbar-width:none}
  .pieces::-webkit-scrollbar{display:none}
  .piece{flex:0 0 72%; scroll-snap-align:center}
}

/* ---------- our work: a coverflow that opens into a full-screen viewer ---------- */
.work-section{
  padding:7.5rem 0 6rem; overflow:hidden;
  background:radial-gradient(1100px 560px at 50% 0%,rgba(232,163,23,.12),transparent 62%),#080706;
}
.work-section .wrap{max-width:1280px}
.work-head{display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:1rem}
.work-head .head{margin:0}
.work-tools{display:flex; flex-direction:column; align-items:flex-end; gap:1rem}
.work-hint{color:var(--faint); font-size:.86rem; white-space:nowrap}
.work-arrows{display:flex; gap:.6rem}
.work-arrows button{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line-2); background:var(--glass-2); color:var(--text);
  font-size:1.6rem; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.work-arrows button:hover{background:var(--gold); color:var(--ink); border-color:var(--gold); transform:scale(1.06)}
.work-arrows button:focus-visible{outline:3px solid rgba(245,197,66,.6); outline-offset:3px}
.work-gallery{
  position:relative; display:flex; gap:1.3rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:3rem max(24px,calc((100vw - 1280px) / 2)) 3.5rem; scroll-padding-inline:24px;
  perspective:1600px; scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain;
}
.work-gallery::-webkit-scrollbar{display:none}
.work-gallery.dragging{cursor:grabbing; scroll-snap-type:none}
.work-gallery.dragging .work-card{pointer-events:none}
.work-card{
  --off:0; --abs:0;
  position:relative; flex:0 0 min(30vw,370px); height:min(66vh,650px); padding:0;
  border:1px solid var(--line-2); border-radius:24px; overflow:hidden; background:#211e1b;
  cursor:zoom-in; scroll-snap-align:center; color:inherit; text-align:left; font:inherit;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  transform:rotateY(calc(var(--off) * -24deg)) translateZ(calc(var(--abs) * -110px));
  transition:translate .4s var(--ease),border-color .3s ease,box-shadow .4s ease;
}
.work-card::before{content:""; position:absolute; inset:0; z-index:2; background:#050404; opacity:calc(var(--abs) * .45); pointer-events:none}
.work-card:hover{translate:0 -10px; border-color:rgba(232,163,23,.7); box-shadow:0 50px 90px -40px rgba(232,163,23,.4)}
.work-card:focus-visible{outline:3px solid var(--gold); outline-offset:4px}
.work-card img{width:100%; height:100%; display:block; object-fit:cover; transition:transform .8s var(--ease)}
.work-card:hover img{transform:scale(1.05)}
.work-card::after{content:""; position:absolute; inset:auto 0 0; height:34%; background:linear-gradient(transparent,rgba(8,7,6,.9)); pointer-events:none}
.work-card-copy{position:absolute; z-index:1; left:1.25rem; right:1.25rem; bottom:1.15rem; display:flex; align-items:end; justify-content:space-between; gap:1rem}
.work-card-copy b{display:block; font:600 1.2rem/1.15 Fraunces,serif}
.work-card-copy span{display:block; color:rgba(253,249,243,.66); font-size:.78rem; margin-top:.25rem}
.work-open-icon{width:36px; height:36px; border-radius:50%; display:grid!important; place-items:center; background:rgba(253,249,243,.16); color:#fff!important; font-size:1rem!important; flex:none; backdrop-filter:blur(8px); transition:background .25s ease,color .25s ease,transform .3s var(--spring)}
.work-card:hover .work-open-icon{background:var(--gold); color:var(--ink)!important; transform:rotate(45deg)}
.trade-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.trade-row > span{color:var(--faint); font-size:14px; font-weight:600; margin-right:4px}
.trade-row a{padding:9px 16px; border:1px solid var(--line-2); border-radius:999px; color:var(--text); font-size:14px; font-weight:600; text-decoration:none; transition:background .2s ease,border-color .2s ease,color .2s ease}
.trade-row a:hover{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.trade-row a.all{border:0; color:var(--muted); text-decoration:underline; text-underline-offset:4px; padding-inline:6px}
.trade-row a.all:hover{background:none; color:var(--gold-2)}

.work-lightbox{width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(8,7,6,.97); color:#fff; overflow:hidden}
.work-lightbox[open]{display:grid; grid-template-columns:72px minmax(0,1fr) 72px; grid-template-rows:72px minmax(0,1fr) 86px; align-items:center; animation:fadeIn .3s ease}
.work-lightbox::backdrop{background:rgba(8,7,6,.97)}
.work-lightbox figure{display:contents}
.work-lightbox img{grid-column:2; grid-row:2; justify-self:center; align-self:center; display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 30px 100px rgba(0,0,0,.6),0 0 120px -30px rgba(232,163,23,.35)}
.work-lightbox img.swap{animation:swapIn .5s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes swapIn{from{opacity:0; transform:perspective(1200px) rotateY(-12deg) scale(.94)}to{opacity:1; transform:none}}
.work-lightbox figcaption{grid-column:2; grid-row:3; text-align:center; align-self:center}
.work-lightbox figcaption b{display:block; font:600 1.05rem Fraunces,serif}
.work-lightbox figcaption span{display:block; color:rgba(255,255,255,.55); font-size:.8rem; margin-top:.2rem}
.work-close,.work-arrow{border:0; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; border-radius:50%; display:grid; place-items:center; transition:background .15s ease,transform .15s ease,color .15s ease}
.work-close{position:absolute; z-index:2; right:18px; top:16px; width:44px; height:44px; font-size:1.6rem}
.work-arrow{width:48px; height:48px; font-size:1.7rem; justify-self:center}
.work-arrow:hover,.work-close:hover{background:var(--gold); color:var(--ink); transform:scale(1.06)}
.work-prev{grid-column:1; grid-row:2}.work-next{grid-column:3; grid-row:2}
@media(max-width:820px){
  .work-head{display:block}
  .work-tools{align-items:flex-start; margin-top:1.4rem; flex-direction:row; justify-content:space-between; width:100%}
  .work-hint{white-space:normal}
  .work-arrows button{width:44px; height:44px}
  .work-card{flex-basis:min(70vw,340px); height:min(64vh,600px)}
  .work-lightbox[open]{grid-template-columns:58px minmax(0,1fr) 58px; grid-template-rows:66px minmax(0,1fr) 82px}
  .work-arrow{width:40px; height:40px}
}
@media(max-width:520px){
  .work-section{padding-top:5.5rem}
  .work-gallery{padding-inline:18px; padding-top:2rem}
  .work-card{flex-basis:78vw}
  .work-arrows{display:none}
  .work-lightbox[open]{grid-template-columns:48px minmax(0,1fr) 48px}
  .work-arrow{width:36px; height:36px; font-size:1.3rem}
  .work-lightbox img{border-radius:4px}
}

/* ---------- customer stories ---------- */
.stories-section{overflow:hidden; background:linear-gradient(180deg,#080706 0%,var(--bg) 40%)}
.stories-section::before{content:""; position:absolute; width:720px; height:720px; right:-280px; top:-200px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(232,163,23,.16),transparent 65%)}
.story-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; perspective:1600px}
.story-card{
  display:grid; grid-template-columns:minmax(220px,.86fr) 1.14fr; min-height:480px; overflow:hidden; border-radius:32px;
  background:
    radial-gradient(520px circle at var(--mx) var(--my),rgba(245,197,66,calc(var(--spot) * .09)),transparent 45%),
    linear-gradient(180deg,rgba(255,250,240,.06),rgba(255,250,240,.015));
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.story-card:hover{border-color:rgba(245,197,66,.3)}
.story-visual{position:relative; min-height:480px; overflow:hidden; background:#211e1b}
.story-visual img{
  position:absolute; width:62%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  transition:rotate .7s var(--spring),translate .7s var(--spring),scale .7s var(--spring);
  transform:translateY(var(--bob)); animation:bob 7s ease-in-out infinite;
}
.story-visual img:first-child{left:8%; top:8%; rotate:-6deg}
.story-visual img:last-child{right:5%; bottom:7%; rotate:6deg; animation-delay:-3.5s}
.story-card:hover .story-visual img:first-child{rotate:-11deg; translate:-10px -6px; scale:1.03}
.story-card:hover .story-visual img:last-child{rotate:10deg; translate:10px 6px; scale:1.06}
.story-visual-blooms{background:radial-gradient(circle at 30% 25%,rgba(245,190,183,.6),transparent 45%),linear-gradient(145deg,#6E1938,#260817)}
.story-visual-barber{background:radial-gradient(circle at 75% 25%,rgba(232,163,23,.34),transparent 45%),linear-gradient(145deg,#233E36,#101713)}
.story-copy{display:flex; flex-direction:column; justify-content:center; padding:2.3rem 2.1rem}
.story-kicker{display:block; margin-bottom:.8rem; color:var(--mint); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.story-copy h3{font-size:1.95rem; margin-bottom:1rem}
.story-copy p{color:var(--muted); font-size:.96rem; line-height:1.7}
.story-copy p b{color:var(--text)}
.story-facts{list-style:none; padding:0; margin:1.3rem 0 1.4rem; display:grid; gap:.55rem}
.story-facts li{position:relative; padding-left:1.6rem; color:var(--text); font-size:.84rem; font-weight:600}
.story-facts li::before{content:"✓"; position:absolute; left:0; top:.08rem; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--mint-soft); color:var(--mint); font-size:.62rem}
.story-copy a{width:max-content; color:var(--gold-2); font-size:.88rem; font-weight:700; text-decoration:none}
.story-copy a span{display:inline-block; transition:transform .25s var(--ease)}
.story-copy a:hover span{transform:translateX(5px)}
@media(max-width:1080px){.story-card{grid-template-columns:1fr}.story-visual{min-height:400px}.story-copy{padding:2rem}}
@media(max-width:740px){.story-grid{grid-template-columns:1fr}.story-card{min-height:0}.story-visual{min-height:400px}.story-copy h3{font-size:1.7rem}}
@media(max-width:420px){.story-visual{min-height:360px}.story-copy{padding:1.6rem 1.4rem}}

/* ---------- pricing ---------- */
.pricing-section{overflow:hidden}
.pricing-section::before{content:""; position:absolute; left:50%; top:30%; width:1100px; height:700px; margin-left:-550px; pointer-events:none; background:radial-gradient(ellipse,rgba(232,163,23,.10),transparent 65%)}
.pricing-guide{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin:-1rem 0 3.2rem; border-radius:26px; overflow:hidden;
  background:linear-gradient(135deg,rgba(63,193,160,.16),rgba(18,86,74,.10)); border:1px solid rgba(63,193,160,.26);
}
.pricing-guide div{padding:1.5rem 1.6rem; border-left:1px solid rgba(63,193,160,.18)}
.pricing-guide div:first-child{border-left:0}
.pricing-guide span{display:block; margin-bottom:.5rem; color:var(--gold-2); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.pricing-guide b{display:block; font:600 1.08rem/1.28 Fraunces,Georgia,serif}
.pricing-guide small{display:block; margin-top:.5rem; color:var(--muted); font-size:.76rem; line-height:1.5}
@media(max-width:760px){.pricing-guide{grid-template-columns:1fr; margin-top:-1.4rem}.pricing-guide div{border-left:0; border-top:1px solid rgba(63,193,160,.18); padding:1.25rem 1.35rem}.pricing-guide div:first-child{border-top:0}}
.prices{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:start; perspective:1600px}
.prices.four{grid-template-columns:repeat(4,1fr); gap:1.15rem}
@media(max-width:1080px){.prices.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.prices.four{grid-template-columns:1fr}}
.prices.four .price{padding:2rem 1.6rem}
.prices.four .amount{font-size:2.8rem}
.cents{font-size:.5em; letter-spacing:0}
.promo{
  display:inline-block; margin-bottom:.8rem; padding:.24rem .65rem; border-radius:999px;
  background:var(--mint-soft); color:#8FE3CC; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.limit{margin-top:1rem; font-size:.8rem; color:var(--faint)}
.price{
  position:relative; display:block; text-decoration:none; color:inherit; border-radius:var(--radius); padding:2.2rem 2rem;
  background:
    radial-gradient(360px circle at var(--mx) var(--my),rgba(245,197,66,calc(var(--spot) * .14)),transparent 45%),
    linear-gradient(180deg,rgba(255,250,240,.065),rgba(255,250,240,.015));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
a.price:hover{border-color:rgba(232,163,23,.5); box-shadow:0 40px 80px -34px rgba(0,0,0,.95),0 0 0 1px rgba(232,163,23,.2)}
a.price:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.price.best{
  border:1.5px solid transparent;
  background:
    radial-gradient(360px circle at var(--mx) var(--my),rgba(245,197,66,calc(var(--spot) * .16)),transparent 45%) padding-box,
    linear-gradient(180deg,#221C15,#15110E) padding-box,
    conic-gradient(from var(--angle),var(--gold-3),var(--ember),var(--gold),var(--mint),var(--gold-3)) border-box;
  box-shadow:0 30px 70px -30px rgba(232,163,23,.55);
  animation:spinBorder 6s linear infinite;
}
@keyframes spinBorder{to{--angle:360deg}}
a.price.best:hover{box-shadow:0 44px 90px -30px rgba(232,163,23,.7)}
.pick{margin-top:1.5rem; font-size:.9rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:.35rem; transition:color .2s ease,gap .25s var(--ease)}
a.price:hover .pick{color:var(--gold-2); gap:.65rem}
.tag{position:absolute; top:-14px; left:1.6rem; padding:.3rem .85rem; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em; color:#2A1D02; background:linear-gradient(135deg,var(--gold-3),var(--gold)); box-shadow:0 10px 24px -8px rgba(232,163,23,.9)}
.amount{
  font-family:Fraunces,serif; font-size:3rem; font-weight:700; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(180deg,#FFFFFF,#E9DCC6); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.price.best .amount{background:linear-gradient(120deg,var(--gold-3),var(--gold) 60%,var(--ember)); -webkit-background-clip:text; background-clip:text}
.per{color:var(--muted); font-size:.92rem; margin-top:.5rem}
.price h3{font-size:1.02rem; margin-bottom:1.1rem; color:var(--muted); font-family:Inter,sans-serif; font-weight:600; letter-spacing:0; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.save{font-style:normal; font-size:.7rem; font-weight:700; letter-spacing:.02em; background:var(--mint-soft); color:#8FE3CC; padding:.2rem .6rem; border-radius:999px}
.per s{color:var(--faint); text-decoration-thickness:1px; margin-right:.15rem}
.price ul{list-style:none; padding:0; margin:1.7rem 0 0; display:flex; flex-direction:column; gap:.7rem}
.price li{display:flex; gap:.6rem; font-size:.93rem; color:var(--muted); align-items:flex-start}
.tick{flex:none; width:19px; height:19px; border-radius:50%; background:var(--mint-soft); color:var(--mint); display:grid; place-items:center; font-size:.62rem; font-weight:700; margin-top:.14rem}
.free-note{text-align:center; margin-top:2.8rem; color:var(--muted); font-size:.97rem}
.free-note b{color:var(--text)}
.free-note .small{font-size:.85rem; color:var(--faint)}

/* ---------- promise ---------- */
.promise-section{padding-top:3rem}
.promise{display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center}
@media(max-width:860px){.promise{grid-template-columns:1fr; gap:2.5rem}}
.promise-lead{color:var(--muted); font-size:1.1rem; margin-top:1.3rem}
.promise-sub{color:var(--faint); margin-top:1rem}
.compare{
  border-radius:30px; padding:1.1rem 1.9rem;
  background:
    radial-gradient(420px circle at var(--mx) var(--my),rgba(63,193,160,calc(var(--spot) * .10)),transparent 45%),
    linear-gradient(180deg,rgba(255,250,240,.065),rgba(255,250,240,.015));
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.row{display:flex; gap:1rem; padding:1.1rem 0; align-items:flex-start; transition:opacity .6s var(--ease),translate .6s var(--ease)}
.row + .row{border-top:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){
  .js .compare:not(.in) .row{opacity:0; translate:-18px 0}
  .compare .row:nth-child(2){transition-delay:.1s}.compare .row:nth-child(3){transition-delay:.2s}
  .compare .row:nth-child(4){transition-delay:.3s}.compare .row:nth-child(5){transition-delay:.4s}
}
.mark{flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:.82rem; font-weight:700}
.yes{background:var(--mint-soft); color:var(--mint); box-shadow:0 0 18px -4px rgba(63,193,160,.5)}
.no{background:rgba(224,103,74,.14); color:var(--clay); box-shadow:0 0 18px -4px rgba(224,103,74,.45)}
.row div b{display:block; font-size:.98rem}
.row div span{font-size:.88rem; color:var(--muted)}

/* ---------- faq ---------- */
.faq-section{padding-top:3rem}
.faq{max-width:820px}
.faq .head{margin-bottom:2.5rem}
details{
  margin-bottom:.8rem; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,250,240,.05),rgba(255,250,240,.015));
  transition:border-color .3s ease,background .3s ease;
}
details:hover{border-color:var(--line-2)}
details[open]{border-color:rgba(245,197,66,.3); background:linear-gradient(180deg,rgba(245,197,66,.07),rgba(255,250,240,.015))}
summary{padding:1.3rem 1.6rem; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:1.04rem}
summary::-webkit-details-marker{display:none}
summary::after{
  content:""; flex:none; width:30px; height:30px; border-radius:50%; background-color:var(--glass-2);
  background-image:linear-gradient(var(--text),var(--text)),linear-gradient(var(--text),var(--text));
  background-size:12px 2px,2px 12px; background-position:center; background-repeat:no-repeat;
  transition:transform .4s var(--ease),background-color .3s ease;
}
details[open] summary::after{transform:rotate(135deg); background-color:var(--gold); background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink))}
summary:focus-visible{outline:3px solid rgba(245,197,66,.55); outline-offset:-3px; border-radius:20px}
details p{padding:0 1.6rem 1.35rem; color:var(--muted); font-size:.98rem}

/* ---------- closing call ---------- */
.start-section{padding:2rem 0 0}
.cta{
  position:relative; isolation:isolate; overflow:hidden; margin:0 16px; padding:7.5rem 2rem; border-radius:48px; text-align:center; color:var(--ink);
  background:
    radial-gradient(900px 500px at 15% 0%,rgba(255,236,170,.9),transparent 60%),
    radial-gradient(800px 500px at 100% 100%,rgba(255,138,61,.55),transparent 60%),
    linear-gradient(135deg,#FFD978,#F5C542 35%,#E8A317 72%,#D98A0B);
  box-shadow:0 60px 120px -50px rgba(232,163,23,.6);
}
.cta-rays{
  position:absolute; left:50%; top:50%; z-index:-1; width:1600px; height:1600px; margin:-800px 0 0 -800px; pointer-events:none; opacity:.35;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0deg 4deg,transparent 4deg 18deg);
  -webkit-mask-image:radial-gradient(circle,#000 5%,transparent 55%); mask-image:radial-gradient(circle,#000 5%,transparent 55%);
  animation:spin 80s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-copy{position:relative; z-index:2}
.cta h2{color:var(--ink); font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:700; max-width:17ch; margin:0 auto 1.2rem}
.cta p{color:rgba(42,29,2,.78); max-width:34rem; margin:0 auto 2.4rem; font-size:1.12rem}
.cta-btn-wrap{position:relative; display:inline-block}
.cta-btn-wrap::before,.cta-btn-wrap::after{
  content:""; position:absolute; inset:-2px; border-radius:999px; border:2px solid rgba(21,18,16,.45); pointer-events:none;
  animation:ripple 2.6s var(--ease) infinite;
}
.cta-btn-wrap::after{animation-delay:1.3s}
@keyframes ripple{from{transform:scale(1); opacity:.9}to{transform:scale(1.35,1.9); opacity:0}}
.cta .btn-lg{padding:1.2rem 2.4rem; font-size:1.1rem}
.cta-float{
  position:absolute; z-index:1; width:150px; height:auto; aspect-ratio:9/16; border-radius:14px; object-fit:cover;
  box-shadow:0 30px 60px -20px rgba(80,40,0,.6),0 0 0 1px rgba(255,255,255,.3);
  transform:translate3d(0,calc(var(--pa,0px) + var(--bob)),0) rotate(var(--r));
  animation:bob 7s ease-in-out infinite;
}
.cta-float.f1{left:4%; top:12%; --r:-12deg}
.cta-float.f2{left:11%; bottom:-6%; --r:8deg; width:128px; animation-delay:-2s}
.cta-float.f3{right:4%; top:10%; --r:11deg; animation-delay:-4s}
.cta-float.f4{right:12%; bottom:-8%; --r:-7deg; width:128px; animation-delay:-1s}
@media(max-width:1100px){.cta-float.f2,.cta-float.f4{display:none}.cta-float{width:120px; opacity:.9}.cta-float.f1{left:-2%}.cta-float.f3{right:-2%}}
@media(max-width:760px){.cta{margin:0 10px; padding:5.5rem 1.4rem; border-radius:34px}.cta-float{display:none}}

/* A small mobile hand-off appears only after the hero is gone and disappears
   again beside the full closing CTA. It never competes with the consent panel. */
.mobile-start{display:none}
@media(max-width:760px){
  .mobile-start{
    position:fixed; z-index:95; left:12px; right:12px; bottom:max(10px,env(safe-area-inset-bottom));
    align-items:center; justify-content:space-between; gap:1rem; padding:.78rem 1rem .78rem 1.15rem;
    border:1px solid var(--line-2); border-radius:20px; background:rgba(20,17,15,.9); color:#fff; text-decoration:none;
    box-shadow:0 20px 50px -16px rgba(0,0,0,.9),0 0 0 1px rgba(232,163,23,.12); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    opacity:0; visibility:hidden; transform:translateY(18px); transition:opacity .25s ease,transform .35s var(--ease),visibility .25s;
  }
  .mobile-start.visible{display:flex; opacity:1; visibility:visible; transform:none}
  .mobile-start b,.mobile-start small{display:block}
  .mobile-start b{font-size:.92rem}
  .mobile-start small{margin-top:.05rem; color:var(--muted); font-size:.7rem}
  .mobile-start > span:last-child{width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--gold-3),var(--gold)); color:#2A1D02; font-weight:700; box-shadow:0 0 20px rgba(232,163,23,.5)}
  body.analytics-consent-open .mobile-start{opacity:0; visibility:hidden; transform:translateY(18px)}
}

/* ---------- footer ---------- */
footer{position:relative; overflow:hidden; padding:5rem 0 2.5rem; margin-top:7rem; border-top:1px solid var(--line)}
footer::before{content:""; position:absolute; left:50%; top:-1px; width:60%; height:1px; margin-left:-30%; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.foot{display:flex; justify-content:space-between; gap:2.5rem 4rem; flex-wrap:wrap; align-items:flex-start}
.foot-brand{max-width:26rem}
.foot p{font-size:.9rem; color:var(--muted); max-width:26rem}
.foot .logo{margin-bottom:1.1rem}
.foot-links{display:flex; flex-direction:column; gap:.6rem; font-size:.92rem; color:var(--muted)}
.foot-links b{color:var(--text); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.35rem}
.foot a{text-decoration:none; transition:color .2s ease}
.foot a:not(.logo):hover{color:var(--gold-2)}
.foot-btn{appearance:none; border:0; background:none; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer}
.foot-btn:hover{color:var(--gold-2)}
.foot-giant{
  margin:4rem 0 0; text-align:center; user-select:none; white-space:nowrap;
  font:700 clamp(3.2rem,13.4vw,13.5rem)/.82 Fraunces,Georgia,serif; letter-spacing:-.05em;
  background:linear-gradient(180deg,rgba(245,197,66,.34),rgba(245,197,66,.02) 85%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.legal{font-size:.82rem; color:var(--faint); margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line)}

/* ---------- reveal on scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; translate:0 44px; transition:opacity .9s var(--ease),translate .9s var(--ease),rotate .9s var(--ease)}
  .js .reveal.flip{translate:0 60px; rotate:x -16deg; transform-origin:50% 100%}
  .js .reveal.in{opacity:1; translate:0 0; rotate:none}
  /* Tilt cards keep their own transition list; the reveal properties are in it. */
  .js .step.reveal,.js .price.reveal,.js .compare.reveal,.js .story-card.reveal{transition:transform .5s var(--ease),border-color .3s ease,box-shadow .4s var(--ease),--spot .35s ease,opacity .9s var(--ease),translate .9s var(--ease),rotate .9s var(--ease)}
}

/* ---------- reduced motion ---------- */
.paused,.paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .tape-track{animation:none!important; flex-wrap:wrap; width:auto; justify-content:center}
  .tape-set[aria-hidden]{display:none}
  .wall-track{animation:none!important}
  .cursor-glow{display:none}
}

/* ---- /work/ trade pages ---- */
body.workpage{background:radial-gradient(1000px 600px at 85% -10%,rgba(232,163,23,.16),transparent 60%),var(--bg)}
body.workpage section{padding:3.4rem 0}
body.workpage footer{margin-top:3.5rem}
.workhead{padding:8.5rem 0 0 !important}
.crumb{font-size:.86rem; color:var(--faint); margin:0 0 1.2rem}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--gold-2)}
.workhead h1{margin:0 0 1rem; font-size:clamp(2.6rem,5.6vw,4.6rem)}
.workhead .lead{max-width:40rem; margin:1rem 0 0; color:var(--muted); font-size:1.12rem}
.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.4rem; margin:2.6rem 0 0}
.shots figure{margin:0; transition:transform .5s var(--ease)}
.shots figure:hover{transform:translateY(-8px)}
.shots img{display:block; width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line-2); box-shadow:0 30px 60px -30px rgba(0,0,0,.95); background:var(--bg-3); transition:box-shadow .4s ease,border-color .4s ease}
.shots figure:hover img{border-color:rgba(245,197,66,.55); box-shadow:0 40px 80px -30px rgba(232,163,23,.4)}
.shots figcaption{margin-top:.7rem; font-size:.88rem; color:var(--muted); line-height:1.5}
.shots-note{margin:1.4rem 0 0; font-size:.88rem; color:var(--faint)}
body.workpage .head{margin-bottom:1.4rem; max-width:38rem}
body.workpage .head h2{margin:0}
.prose{max-width:42rem}
.prose h2{margin:0 0 .8rem; font-size:clamp(1.8rem,3.4vw,2.5rem)}
.prose section{padding:0 !important; margin:0 0 2.4rem}
.prose section:last-child{margin-bottom:0}
.prose p{color:var(--muted); font-size:1.05rem; line-height:1.75; margin:0}
.pricebox{max-width:42rem; margin:1.2rem 0 0; padding:1.5rem 1.6rem; border:1px solid var(--line-2); border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,250,240,.07),rgba(255,250,240,.02)); box-shadow:var(--shadow)}
.pricebox p{margin:0 0 .55rem; color:var(--muted)}
.pricebox p:last-child{margin:0; font-size:.9rem}
.pricebox strong{color:var(--gold-2)}
.work-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.tradelinks{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:0}
.tradelinks a{padding:.65rem 1.1rem; border:1px solid var(--line-2); border-radius:999px; background:var(--glass); color:var(--text); font-size:.92rem; font-weight:600; text-decoration:none; transition:background .2s ease,border-color .2s ease,color .2s ease}
.tradelinks a:hover{background:var(--gold); border-color:var(--gold); color:var(--ink)}
@media(max-width:640px){
  body.workpage section{padding:2.4rem 0}
  .workhead{padding-top:7rem !important}
  .shots{grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:1rem; margin-top:1.8rem}
}