:root{
  --obsidian:#08080a;
  --carbon:#0f0f12;
  --panel:#141418;
  --graphite:#26262c;
  --line:#2c2c33;
  --ash:#8a8a92;
  --ash-dim:#5a5a62;
  --bone:#f3f3f4;
  --white:#ffffff;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--obsidian);
  color:var(--bone);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--bone);color:var(--obsidian)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- type ---------- */
.display{font-family:'Space Grotesk',sans-serif;font-weight:500;line-height:.98;letter-spacing:-.02em}
.eyebrow{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--ash)}
.outline{color:transparent;-webkit-text-stroke:1px var(--bone);text-stroke:1px var(--bone)}
.outline-dim{color:transparent;-webkit-text-stroke:1px var(--ash-dim);text-stroke:1px var(--ash-dim)}

/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;height:1px;width:0%;background:var(--bone);z-index:200;transition:width .1s linear}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);border-bottom:1px solid transparent}
header.scrolled{background:rgba(8,8,10,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;transition:height .5s var(--ease)}
header.scrolled .nav{height:64px}
.brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.02em;font-size:17px}
.brand .mark{width:26px;height:26px;display:block}
.menu{display:flex;gap:38px;align-items:center}
.menu a{font-size:14px;color:var(--ash);position:relative;transition:color .3s var(--ease)}
.menu a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--bone);transition:width .35s var(--ease)}
.menu a:hover{color:var(--bone)}
.menu a:hover::after,.menu a.active::after{width:100%}
.menu a.active{color:var(--bone)}
.menu a.cta{color:var(--bone);border:1px solid var(--line);border-radius:999px;padding:9px 20px;transition:border-color .3s var(--ease),color .3s var(--ease)}
.menu a.cta::after{display:none}
.menu a.cta:hover,.menu a.cta.active{border-color:var(--bone)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:1.5px;background:var(--bone);transition:.3s var(--ease)}

/* ---------- buttons ---------- */
.btn{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;letter-spacing:.01em;padding:15px 30px;border-radius:999px;border:1px solid var(--line);cursor:pointer;transition:.35s var(--ease);display:inline-flex;align-items:center;gap:10px;background:none;color:var(--bone)}
.btn-solid{background:var(--bone);color:var(--obsidian);border-color:var(--bone)}
.btn-solid:hover{background:transparent;color:var(--bone)}
.btn-ghost:hover{border-color:var(--bone)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:84px}
.hero-snake{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;opacity:.5}
.hero-snake svg{width:min(120vh,1100px);height:auto}
.hero-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 55% at 50% 42%,rgba(40,40,48,.5),transparent 70%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:30px;opacity:0}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--bone);box-shadow:0 0 16px 2px rgba(243,243,244,.6)}
.hero h1{font-size:clamp(56px,11vw,168px);line-height:.9;letter-spacing:-.03em;font-weight:500}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.hero.ready h1 .l span{transform:translateY(0)}
.hero h1 .l:nth-child(2) span{transition-delay:.08s}
.hero-sub{margin-top:38px;max-width:540px;font-size:clamp(16px,2vw,19px);color:var(--ash);opacity:0;transform:translateY(20px);transition:.9s var(--ease) .5s}
.hero.ready .hero-eyebrow{opacity:1;transition:opacity .9s var(--ease) .35s}
.hero.ready .hero-sub{opacity:1;transform:none}
.hero-actions{margin-top:46px;display:flex;gap:18px;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:.9s var(--ease) .65s}
.hero.ready .hero-actions{opacity:1;transform:none}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim);display:flex;flex-direction:column;align-items:center;gap:12px}
.scroll-hint .bar{width:1px;height:46px;background:linear-gradient(var(--ash),transparent);position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--bone);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{top:-50%}60%,100%{top:120%}}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;overflow:hidden;padding:172px 0 90px}
.page-hero-snake{position:absolute;right:-4%;top:0;bottom:0;display:flex;align-items:center;opacity:.36;pointer-events:none;z-index:0}
.page-hero-snake svg{width:min(48vw,620px);height:auto}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .crumb{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.page-hero .crumb .dot{width:6px;height:6px;border-radius:50%;background:var(--bone);box-shadow:0 0 16px 2px rgba(243,243,244,.55)}
.page-hero h1{font-size:clamp(48px,9vw,128px);font-weight:500;letter-spacing:-.03em;line-height:.92}
.page-hero .lede{margin-top:34px;max-width:580px;color:var(--ash);font-size:clamp(16px,2vw,20px)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.1s}
[data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s}

/* ---------- sections ---------- */
section{position:relative}
.pad{padding:140px 0}
.pad-sm{padding:96px 0}
.section-head{max-width:760px}
.section-head h2{font-size:clamp(34px,5.5vw,72px);font-weight:500;letter-spacing:-.025em;line-height:1.02;margin-top:22px}
.section-head p{margin-top:26px;color:var(--ash);font-size:18px;max-width:560px}

/* manifesto */
.manifesto{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.manifesto .big{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(28px,4.6vw,58px);line-height:1.12;max-width:1000px}

/* services list (home) */
.svc-grid{margin-top:80px;border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:90px 1.1fr 1.4fr;gap:40px;align-items:start;padding:48px 0;border-bottom:1px solid var(--line);position:relative;transition:padding-left .5s var(--ease)}
.svc:hover{padding-left:14px}
.svc .num{font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ash-dim)}
.svc h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.05}
.svc p{color:var(--ash);font-size:16px;max-width:440px}
.svc .tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.svc .tags span{font-size:12px;letter-spacing:.04em;color:var(--ash);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.svc .glyph{position:absolute;right:0;top:48px;opacity:0;transform:translateX(-12px);transition:.5s var(--ease);color:var(--bone)}
.svc:hover .glyph{opacity:1;transform:none}

/* service detail (services page) */
.svc-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;padding:96px 0;border-bottom:1px solid var(--line);align-items:start}
.svc-detail:first-of-type{border-top:1px solid var(--line)}
.svc-detail .left .num{font-family:'Space Grotesk',sans-serif;font-size:14px;color:var(--ash-dim);letter-spacing:.04em}
.svc-detail .left h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,4.4vw,52px);font-weight:500;letter-spacing:-.025em;line-height:1.02;margin-top:20px}
.svc-detail .left p{color:var(--ash);font-size:17px;margin-top:24px;max-width:420px}
.svc-detail .included{list-style:none}
.svc-detail .included li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.svc-detail .included li:first-child{border-top:1px solid var(--line)}
.svc-detail .included li .k{font-family:'Space Grotesk',sans-serif;color:var(--bone);font-size:17px;min-width:200px;font-weight:500}
.svc-detail .included li .v{color:var(--ash);font-size:15px}
.svc-detail .sticky{position:sticky;top:110px}

/* process */
.process{background:var(--carbon);border-top:1px solid var(--line)}
.proc-grid{margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:1px solid var(--line)}
.proc{padding:34px 28px;border-right:1px solid var(--line);border-top:1px solid var(--line);min-height:280px;display:flex;flex-direction:column;transition:background .4s var(--ease)}
.proc:hover{background:var(--panel)}
.proc .pn{font-family:'Space Grotesk',sans-serif;font-size:48px;font-weight:500;letter-spacing:-.03em;-webkit-text-stroke:1px var(--ash-dim);color:transparent}
.proc h3{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:500;margin-top:auto;letter-spacing:-.01em}
.proc p{color:var(--ash);font-size:14px;margin-top:14px}

/* engagement cards */
.engage{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:72px}
.eng-card{border:1px solid var(--line);border-radius:18px;padding:42px;background:var(--panel);transition:border-color .4s var(--ease),transform .5s var(--ease)}
.eng-card:hover{border-color:var(--graphite);transform:translateY(-5px)}
.eng-card .tag{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.eng-card h3{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:500;margin-top:18px;letter-spacing:-.02em}
.eng-card p{color:var(--ash);font-size:15px;margin-top:16px;max-width:380px}
.eng-card ul{list-style:none;margin-top:24px}
.eng-card ul li{color:var(--ash);font-size:15px;padding:9px 0;border-top:1px solid var(--line);display:flex;gap:12px}
.eng-card ul li::before{content:"—";color:var(--ash-dim)}

/* work */
.work{background:var(--carbon);border-top:1px solid var(--line)}
.work-snake{position:absolute;right:-6%;top:8%;opacity:.32;pointer-events:none;z-index:0}
.work-snake svg{width:min(46vw,640px);height:auto}
.work .wrap{position:relative;z-index:2}
.work-grid{margin-top:80px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:36px;transition:border-color .45s var(--ease),transform .6s var(--ease)}
.case:hover{border-color:var(--graphite);transform:translateY(-6px)}
.case .bg{position:absolute;inset:0;z-index:0;opacity:.5;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.case:hover .bg{opacity:.85;transform:scale(1.04)}
.case .meta{position:relative;z-index:2}
.case .field{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.case h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.02em;margin-top:14px;line-height:1.05}
.case .res{margin-top:18px;display:flex;gap:28px;border-top:1px solid var(--line);padding-top:18px}
.case .res div span{display:block;font-family:'Space Grotesk',sans-serif;font-size:24px;color:var(--bone)}
.case .res div small{color:var(--ash);font-size:12px;letter-spacing:.04em}

/* work rows (our work page) */
.worklist{margin-top:30px;border-top:1px solid var(--line)}
.wrow{display:grid;grid-template-columns:64px 1.4fr 1fr 110px;gap:32px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease),background .4s var(--ease)}
.wrow:hover{padding-left:16px}
.wrow .wn{font-family:'Space Grotesk',sans-serif;color:var(--ash-dim);font-size:14px}
.wrow .wt h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.02em}
.wrow .wt .field{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-top:8px}
.wrow .wmetric{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.4vw,28px);color:var(--bone)}
.wrow .wmetric small{display:block;font-family:'Inter';font-size:12px;color:var(--ash);letter-spacing:.04em;margin-top:6px;font-weight:300}
.wrow .warr{justify-self:end;color:var(--ash-dim);transition:color .35s var(--ease),transform .35s var(--ease)}
.wrow:hover .warr{color:var(--bone);transform:translateX(6px)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:96px;border-top:1px solid var(--line);padding-top:60px}
.stat .n{font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,6vw,76px);font-weight:500;letter-spacing:-.03em;line-height:1}
.stat .n.outline{-webkit-text-stroke:1.5px var(--bone)}
.stat p{color:var(--ash);font-size:14px;margin-top:14px;letter-spacing:.02em}

/* cta band */
.cta-band{border-top:1px solid var(--line);text-align:center;position:relative;overflow:hidden}
.cta-band-snake{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.2;pointer-events:none;z-index:0}
.cta-band-snake svg{width:min(90vw,980px);height:auto}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-size:clamp(40px,8vw,120px);font-weight:500;letter-spacing:-.03em;line-height:.94}
.cta-band p{color:var(--ash);font-size:18px;max-width:480px;margin:28px auto 0}
.cta-band .btn{margin-top:44px}

/* contact */
.contact{border-top:1px solid var(--line);position:relative;overflow:hidden}
.contact-snake{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.22;pointer-events:none;z-index:0}
.contact-snake svg{width:min(90vw,1000px);height:auto}
.contact .wrap{position:relative;z-index:2;text-align:center}
.contact h2{font-size:clamp(44px,9vw,140px);font-weight:500;letter-spacing:-.03em;line-height:.92}
.contact .lead{margin:34px auto 0;max-width:520px;color:var(--ash);font-size:18px}
.contact .mail{display:inline-flex;align-items:center;gap:14px;margin-top:48px;font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--line);padding-bottom:8px;transition:border-color .4s var(--ease)}
.contact .mail:hover{border-color:var(--bone)}
.contact .place{margin-top:60px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}

/* contact page layout */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-info .block{padding:30px 0;border-bottom:1px solid var(--line)}
.contact-info .block:first-child{border-top:1px solid var(--line)}
.contact-info .block .k{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:12px}
.contact-info .block .v{font-size:clamp(18px,2.2vw,24px);font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.01em}
.contact-info .block .v a{transition:color .3s var(--ease)}
.contact-info .block small{display:block;color:var(--ash);font-size:14px;margin-top:8px}

/* form */
.form{display:flex;flex-direction:column;gap:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0}
.field-group{position:relative;border-bottom:1px solid var(--line);padding:22px 0}
.field-row .field-group:first-child{padding-right:24px}
.field-group label{display:block;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:12px}
.field-group input,.field-group textarea,.field-group select{width:100%;background:none;border:0;color:var(--bone);font-family:'Inter';font-size:17px;font-weight:300;outline:none;resize:none}
.field-group input::placeholder,.field-group textarea::placeholder{color:var(--ash-dim)}
.field-group select{appearance:none;cursor:pointer}
.field-group select option{background:var(--carbon);color:var(--bone)}
.field-group.focused{border-color:var(--bone)}
.form .actions{margin-top:36px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.form-note{color:var(--ash-dim);font-size:13px}
.form-success{display:none;border:1px solid var(--line);border-radius:16px;padding:34px;background:var(--panel)}
.form-success.show{display:block}
.form-success h3{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:500;letter-spacing:-.01em}
.form-success p{color:var(--ash);margin-top:12px;font-size:15px}
.err{display:none;color:#d9777c;font-size:12px;margin-top:8px;letter-spacing:.02em}
.field-group.invalid .err{display:block}
.field-group.invalid{border-color:#7a4a4d}

/* faq */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--bone);font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.2vw,24px);font-weight:500;letter-spacing:-.01em;padding:30px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq-q .pm{font-size:24px;color:var(--ash);transition:transform .4s var(--ease);flex-shrink:0}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{color:var(--ash);font-size:16px;padding:0 60px 30px 0;max-width:680px}

/* footer */
footer{border-top:1px solid var(--line);padding:64px 0 50px}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot .col h4{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.04em;color:var(--ash);margin-bottom:18px;font-weight:500;text-transform:uppercase}
.foot .col a{display:block;color:var(--ash);font-size:15px;padding:5px 0;transition:color .3s var(--ease)}
.foot .col a:hover{color:var(--bone)}
.foot .brand-col{max-width:280px}
.foot .brand-col p{color:var(--ash);font-size:14px;margin-top:18px}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line);color:var(--ash-dim);font-size:13px}

/* mobile menu */
.m-menu{position:fixed;inset:0;background:var(--obsidian);z-index:99;display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:8px;transform:translateY(-100%);transition:transform .6s var(--ease);opacity:0}
.m-menu.open{transform:none;opacity:1}
.m-menu a{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:500;letter-spacing:-.02em;padding:10px 0;color:var(--bone)}
.m-menu a.active{-webkit-text-stroke:1px var(--bone);color:transparent}
.m-menu .place{margin-top:40px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}

@media(max-width:900px){
  .menu{display:none}
  .burger{display:flex}
  .pad{padding:96px 0}
  .pad-sm{padding:72px 0}
  .page-hero{padding:140px 0 70px}
  .svc{grid-template-columns:1fr;gap:14px;padding:38px 0}
  .svc .glyph{display:none}
  .svc-detail{grid-template-columns:1fr;gap:40px;padding:64px 0}
  .svc-detail .sticky{position:static}
  .svc-detail .included li .k{min-width:150px}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .engage{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .wrow{grid-template-columns:40px 1fr;gap:14px 18px}
  .wrow .wmetric{grid-column:2}
  .wrow .warr{display:none}
  .stats{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .contact-grid{grid-template-columns:1fr;gap:50px}
  .foot{gap:36px}
}
@media(max-width:540px){
  .wrap{padding:0 22px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .proc-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .case .res{gap:20px}
  .field-row{grid-template-columns:1fr}
  .field-row .field-group:first-child{padding-right:0}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.hero-sub,.hero-eyebrow,.hero-actions{opacity:1!important;transform:none!important}
  .hero h1 .l span{transform:none!important}
}

/* =====================================================================
   v2 — logo, mobile spacing, and additional scroll interactions
   ===================================================================== */

/* logo image mark */
.brand img.mark{width:30px;height:30px;object-fit:contain;display:block;flex-shrink:0}
.foot .brand-col .brand img.mark{width:30px;height:30px}

/* anchor offset so in-page jumps clear the fixed header */
section[id]{scroll-margin-top:90px}

/* keep huge outline headings from overflowing on small screens */
.hero h1,.page-hero h1,.contact h2,.cta-band h2,.section-head h2{overflow-wrap:break-word;word-break:break-word}

/* ---- directional + scale reveals (IO adds .in); :not(.in) keeps hover transforms intact ---- */
[data-reveal]{transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
[data-reveal]:not(.in){opacity:0}
[data-reveal="left"]:not(.in){transform:translateX(-46px)}
[data-reveal="right"]:not(.in){transform:translateX(46px)}
[data-reveal="scale"]:not(.in){transform:scale(.92)}
[data-reveal="blur"]:not(.in){filter:blur(14px)}

/* ---- scroll-drawn serpent divider ---- */
.serpent-divider{position:relative;padding:70px 0;overflow:hidden}
.serpent-divider svg{display:block;width:100%;height:auto}
.serpent-divider path.draw{stroke:#34343c;stroke-width:2;fill:none;stroke-linecap:round}

/* ---- outline marquee strip ---- */
.marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:inline-flex;white-space:nowrap;will-change:transform}
.marquee-track span{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(30px,6vw,72px);letter-spacing:-.02em;padding:0 36px;color:transparent;-webkit-text-stroke:1px var(--ash-dim);text-stroke:1px var(--ash-dim)}
.marquee-track span em{font-style:normal;-webkit-text-stroke:1px var(--bone);color:transparent}
.marquee-track .dot{display:inline-flex;align-items:center;color:var(--ash-dim);-webkit-text-stroke:0;padding:0 4px}

/* ---- back to top ---- */
#toTop{position:fixed;right:26px;bottom:26px;z-index:120;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:rgba(8,8,10,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--bone);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:.4s var(--ease)}
#toTop.show{opacity:1;transform:none;pointer-events:auto}
#toTop:hover{border-color:var(--bone)}

/* =====================================================================
   v2 — mobile refinement (overrides earlier rules via source order)
   ===================================================================== */
@media(max-width:900px){
  .pad{padding:84px 0}
  .pad-sm{padding:64px 0}
  .page-hero{padding:132px 0 60px}
  .section-head p{font-size:16px}
  /* services list: clearer rhythm, numbered eyebrow on its own line */
  .svc{padding:32px 0;row-gap:10px}
  .svc .num{font-size:13px;letter-spacing:.18em;text-transform:uppercase}
  .svc h3{font-size:26px}
  .svc .tags{gap:8px;margin-top:16px}
  .svc .tags span{padding:6px 12px;font-size:11px}
  /* service detail: stack key/value pairs so nothing is cramped */
  .svc-detail .included li{flex-direction:column;gap:6px;padding:18px 0}
  .svc-detail .included li .k{min-width:0;font-size:16px}
  .svc-detail .included li .v{font-size:14px}
  .engage{gap:16px}
  .eng-card{padding:32px}
  .stats{gap:36px 20px;padding-top:48px}
  .marquee{padding:22px 0}
  .serpent-divider{padding:44px 0}
  #toTop{right:18px;bottom:18px;width:46px;height:46px}
  .foot .col a{padding:8px 0}            /* bigger tap targets */
}

@media(max-width:540px){
  :root{--maxw:100%}
  .wrap{padding:0 20px}
  .pad{padding:64px 0}
  .pad-sm{padding:52px 0}
  .nav{height:70px}
  header.scrolled .nav{height:58px}
  .page-hero{padding:118px 0 52px}
  .hero{padding-top:70px}
  .hero h1{font-size:clamp(52px,17vw,72px)}
  .page-hero h1{font-size:clamp(46px,15vw,72px)}
  .hero-sub,.page-hero .lede{font-size:16px}
  .section-head h2{font-size:clamp(30px,8vw,40px)}
  .svc-detail{padding:48px 0;gap:32px}
  .svc-detail .left h2{font-size:clamp(28px,9vw,40px)}
  .eng-card{padding:26px}
  .eng-card h3{font-size:26px}
  .case{min-height:320px;padding:28px}
  .contact .mail{font-size:18px}
  .m-menu a{font-size:34px}
  .faq-q{font-size:18px;padding:24px 0}
  .faq-a p{padding-right:20px}
  .foot-base{flex-direction:column;gap:8px}
  .marquee-track span{font-size:clamp(26px,10vw,40px);padding:0 22px}
}

/* =====================================================================
   v3 — real screenshot cases, live links, subtle logo watermark
   ===================================================================== */

/* image-backed case cards */
.case .bg{background-size:cover;background-position:top center;background-repeat:no-repeat}
.case.live-case{min-height:420px;text-decoration:none}
.case .live{position:absolute;top:22px;right:22px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);border:1px solid var(--line);background:rgba(8,8,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;transition:border-color .35s var(--ease)}
.case.live-case:hover .live{border-color:var(--bone)}
.case .visit{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ash);transition:color .35s var(--ease)}
.case .visit span{transition:transform .35s var(--ease)}
.case.live-case:hover .visit{color:var(--bone)}
.case.live-case:hover .visit span{transform:translate(3px,-3px)}

/* subtle logo watermark in section backgrounds */
.logo-bg{position:absolute;pointer-events:none;user-select:none;z-index:0;opacity:.045;filter:none}
.footer-rel{position:relative;overflow:hidden}
.footer-rel .wrap{position:relative;z-index:2}

@media(max-width:540px){
  .case.live-case{min-height:300px}
  .case .live{top:16px;right:16px}
}

/* =====================================================================
   v4 — content & creative gallery + managed-account feature
   ===================================================================== */
.creative{border-top:1px solid var(--line)}

/* managed account highlight */
.ig-feature{margin-top:64px;display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.ig-phone{position:relative;max-width:300px;margin:0 auto;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--panel);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.ig-phone img{width:100%;display:block}
.ig-feature .ig-copy .tag{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.ig-feature .ig-copy h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3.4vw,40px);font-weight:500;letter-spacing:-.02em;margin-top:16px;line-height:1.05}
.ig-feature .ig-copy p{color:var(--ash);font-size:16px;margin-top:20px;max-width:460px}
.ig-stats{display:flex;gap:40px;margin-top:34px;border-top:1px solid var(--line);padding-top:28px;flex-wrap:wrap}
.ig-stats .s span{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,4vw,40px);font-weight:500;letter-spacing:-.02em;color:var(--bone)}
.ig-stats .s small{color:var(--ash);font-size:13px;letter-spacing:.04em}
.ig-feature .ig-copy .handle{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--ash);border-bottom:1px solid var(--line);padding-bottom:7px;transition:color .35s var(--ease),border-color .35s var(--ease)}
.ig-feature .ig-copy .handle:hover{color:var(--bone);border-color:var(--bone)}

/* creative graphics gallery (masonry via CSS columns) */
.gallery{margin-top:64px;columns:3;column-gap:22px}
.g-item{position:relative;break-inside:avoid;margin-bottom:22px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.g-item img{width:100%;display:block;transition:transform 1.1s var(--ease),opacity .6s var(--ease)}
.g-item:hover img{transform:scale(1.05)}
.g-item .glabel{position:absolute;left:0;right:0;bottom:0;padding:46px 20px 18px;background:linear-gradient(transparent,rgba(8,8,10,.9));opacity:0;transform:translateY(10px);transition:.45s var(--ease)}
.g-item:hover .glabel{opacity:1;transform:none}
.g-item .glabel .b{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:500;color:var(--bone)}
.g-item .glabel .t{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-top:4px}

@media(max-width:900px){
  .ig-feature{grid-template-columns:1fr;gap:40px}
  .ig-phone{max-width:260px}
  .gallery{columns:2;column-gap:16px}
  .g-item{margin-bottom:16px}
  /* labels always visible on touch (no hover) */
  .g-item .glabel{opacity:1;transform:none}
}
@media(max-width:540px){
  .gallery{columns:1}
  .ig-stats{gap:28px}
}

/* =====================================================================
   v5 — neon accent · browser-frame live cards · reels · lightbox
   ===================================================================== */
:root{ --neon:#b9ff3d; --neon-soft:rgba(185,255,61,.5); }

/* neon — used sparingly */
.neon{color:var(--neon);text-shadow:0 0 6px var(--neon-soft),0 0 22px rgba(185,255,61,.22)}

/* ---- browser-frame live site cards ---- */
.live-grid{margin-top:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.live-grid .site-card:nth-child(3):last-child{grid-column:1 / -1}
.site-card{display:block;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);transition:border-color .45s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
.site-card:hover{border-color:var(--graphite);transform:translateY(-6px);box-shadow:0 30px 70px -50px rgba(0,0,0,.9)}
.site-card .browser{position:relative;line-height:0}
.site-card .chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--carbon);line-height:1}
.site-card .chrome .d{width:9px;height:9px;border-radius:50%;background:var(--graphite);flex-shrink:0}
.site-card .chrome .addr{margin-left:10px;flex:1;font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--ash);background:var(--obsidian);border:1px solid var(--line);border-radius:999px;padding:5px 14px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-card .chrome .live{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--neon);flex-shrink:0}
.site-card .chrome .live .pulse{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon);animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
.site-card .shot{display:block;width:100%;height:auto;filter:saturate(1.02)}
.site-card .site-meta{padding:24px 26px 28px}
.site-card .site-meta .field{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.site-card .site-meta h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:-.02em;margin-top:10px;line-height:1.05}
.site-card .site-meta .visit{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:14px;color:var(--ash);transition:color .35s var(--ease)}
.site-card:hover .site-meta .visit{color:var(--bone)}
.site-card .site-meta .visit span{transition:transform .35s var(--ease)}
.site-card:hover .site-meta .visit span{transform:translate(3px,-3px)}

/* ---- reels ---- */
.reels{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,300px)) 1fr;gap:24px;align-items:stretch}
.reel{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#000;aspect-ratio:9/16;cursor:pointer;transition:border-color .45s var(--ease),transform .6s var(--ease)}
.reel:hover{border-color:var(--graphite);transform:translateY(-6px)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel .r-grad{position:absolute;inset:0;background:linear-gradient(transparent 52%,rgba(8,8,10,.86));pointer-events:none;z-index:1}
.reel .r-label{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;pointer-events:none}
.reel .r-label .b{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:500;color:var(--bone)}
.reel .r-label .t{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-top:4px}
.reel .r-sound{position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(8,8,10,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:var(--bone);cursor:pointer;transition:border-color .3s var(--ease)}
.reel:hover .r-sound{border-color:var(--bone)}
.reel .r-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.reel.paused .r-play{opacity:1}
.reel .r-play svg{width:54px;height:54px;color:var(--bone);filter:drop-shadow(0 6px 20px rgba(0,0,0,.6))}
.reel-copy{display:flex;flex-direction:column;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:36px}
.reel-copy .tag{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.reel-copy h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:500;letter-spacing:-.02em;margin-top:16px;line-height:1.06}
.reel-copy p{color:var(--ash);font-size:15px;margin-top:18px;max-width:340px}

/* gallery click cue */
.g-item{cursor:pointer}
.g-item .zoom{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(8,8,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--bone);opacity:0;transform:scale(.8);transition:.4s var(--ease)}
.g-item:hover .zoom{opacity:1;transform:none}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(5,5,7,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:90vw;max-height:84vh;border-radius:12px;border:1px solid var(--line);transform:scale(.96);transition:transform .4s var(--ease)}
.lightbox.open img{transform:scale(1)}
.lightbox .lb-close{position:absolute;top:24px;right:28px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(8,8,10,.6);color:var(--bone);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.lightbox .lb-close:hover{border-color:var(--neon);color:var(--neon)}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:rgba(8,8,10,.6);color:var(--bone);cursor:pointer;font-size:24px;display:flex;align-items:center;justify-content:center;transition:border-color .3s var(--ease)}
.lightbox .lb-nav:hover{border-color:var(--bone)}
.lightbox .lb-prev{left:24px}.lightbox .lb-next{right:24px}
.lightbox .lb-cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.04em;color:var(--ash)}

/* footer address line */
.foot .brand-col .foot-addr{color:var(--ash);font-size:13px;margin-top:14px;line-height:1.6}

@media(max-width:900px){
  .live-grid{grid-template-columns:1fr}
  .live-grid .site-card:nth-child(3):last-child{grid-column:auto}
  .reels{grid-template-columns:repeat(2,1fr)}
  .reel-copy{grid-column:1 / -1}
  .lightbox .lb-nav{width:42px;height:42px}
}
@media(max-width:540px){
  .reels{grid-template-columns:1fr}
  .lightbox .lb-prev{left:10px}.lightbox .lb-next{right:10px}
  .lightbox .lb-close{top:14px;right:16px}
}

/* =====================================================================
   v6 — compact 3-up live thumbnails · small portfolio grid · small reels
   ===================================================================== */

/* 3-up symmetric live site thumbnails (curved, hover-interactive) */
.live3{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.live3 .case.live-case{min-height:300px;padding:24px;border-radius:18px}
.live3 .case .bg{opacity:.62;background-position:top center}
.live3 .case.live-case:hover .bg{opacity:.95}
.live3 .case h3{font-size:clamp(20px,2vw,24px)}
.live3 .case .visit{font-size:14px}
.live3 .case .cta-hover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.live3 .case.live-case:hover .cta-hover{opacity:1}
.live3 .case .cta-hover span{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);border:1px solid var(--bone);border-radius:999px;padding:10px 20px;background:rgba(8,8,10,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(max-width:900px){ .live3{grid-template-columns:1fr 1fr;gap:16px} }
@media(max-width:540px){ .live3{grid-template-columns:1fr} .live3 .case.live-case{min-height:260px} }

/* small portfolio graphics grid */
.pgrid{margin-top:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pgrid .g-item{margin:0;border-radius:14px;aspect-ratio:1/1;break-inside:auto}
.pgrid .g-item img{width:100%;height:100%;object-fit:cover}
.pgrid .g-item .glabel{padding:36px 14px 14px}
.pgrid .g-item .glabel .b{font-size:14px}
.pgrid .g-item .glabel .t{font-size:10px;margin-top:2px}
.pgrid .g-item .zoom{width:30px;height:30px;top:10px;right:10px;font-size:14px}
@media(max-width:900px){ .pgrid{grid-template-columns:repeat(3,1fr)} .pgrid .g-item .glabel{opacity:1;transform:none} }
@media(max-width:540px){ .pgrid{grid-template-columns:repeat(2,1fr);gap:10px} }

/* portfolio sub-label + section divider */
.portfolio{border-top:1px solid var(--line)}
.psub{margin-top:52px;margin-bottom:0}

/* small reels row (overrides v5 large grid via source order) */
.reels{margin-top:22px;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.reels .reel{width:190px;flex:0 0 auto;border-radius:18px}
.reels .reel .r-label .b{font-size:14px}
.reels .reel .r-label .t{font-size:10px}
.reels .reel .r-sound{width:34px;height:34px;top:12px;right:12px}
.reels .reel .r-play svg{width:46px;height:46px}
@media(max-width:540px){ .reels .reel{width:calc(50% - 9px)} }

/* =====================================================================
   v7 — refined spacing + unified 3-up portfolio grids
   ===================================================================== */

/* live screenshots — balanced spacing, better mobile */
.live3{gap:22px}
@media(max-width:980px){ .live3{grid-template-columns:1fr 1fr;gap:18px} }
@media(max-width:640px){ .live3{grid-template-columns:1fr;gap:16px} .live3 .case.live-case{min-height:230px} }

/* graphics — 3 per row, curved square cards (match screenshot row) */
.pgrid{margin-top:40px;grid-template-columns:repeat(3,1fr);gap:22px}
.pgrid .g-item{border-radius:18px;aspect-ratio:1/1}
.pgrid .g-item .glabel{padding:48px 18px 18px}
.pgrid .g-item .glabel .b{font-size:16px}
.pgrid .g-item .glabel .t{font-size:11px;margin-top:3px}
.pgrid .g-item .zoom{width:34px;height:34px;top:14px;right:14px;font-size:16px}
@media(max-width:980px){ .pgrid{grid-template-columns:1fr 1fr;gap:18px} }
@media(max-width:540px){ .pgrid{grid-template-columns:1fr 1fr;gap:12px} }

/* reels — same 3-up grid + curved cards, kept vertical 9:16 */
.reels{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.reels .reel{width:auto;flex:initial;border-radius:18px;aspect-ratio:9/16}
@media(max-width:980px){ .reels{grid-template-columns:1fr 1fr;gap:18px} }
@media(max-width:540px){ .reels{grid-template-columns:1fr 1fr;gap:12px} }

/* =====================================================================
   v8 — unified portfolio wall: small equal cards, 3-up, centered
   ===================================================================== */
.pwall{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:20px}
.pwall > :last-child{grid-column:auto}        /* full 3×3 grid — no lone-item centring needed */

.p-card{position:relative;margin:0;aspect-ratio:4/5;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#000;transition:border-color .45s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}
.p-card:hover{border-color:var(--graphite);transform:translateY(-5px);box-shadow:0 24px 60px -44px rgba(0,0,0,.9)}

/* graphic cards (fill, cover) */
.p-card.g-item img{width:100%;height:100%;object-fit:cover;display:block}

/* reel cards (keep full vertical reel visible — contain on black) */
.p-card.reel{cursor:pointer}
.p-card.reel video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.p-card.reel .r-play svg{width:46px;height:46px}
.p-card.reel .r-sound{width:34px;height:34px;top:12px;right:12px}
.p-card.reel .r-label{left:14px;right:14px;bottom:14px}

@media(max-width:980px){
  .pwall{grid-template-columns:repeat(2,minmax(0,300px))}
  .pwall > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:min(300px,100%)}
}
@media(max-width:540px){
  .pwall{grid-template-columns:minmax(0,1fr);gap:14px;max-width:340px;margin-left:auto;margin-right:auto}
  .pwall > :last-child{grid-column:auto}
}

/* ===== floating call button (v9) ===== */
.vt-call{position:fixed;right:22px;bottom:22px;z-index:950;height:58px;width:58px;padding:0;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  background:#b9ff3d;color:#08080a;border-radius:50%;text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  animation:vt-bob 3.2s ease-in-out infinite;
  transition:width .28s ease,border-radius .28s ease,padding .28s ease}
.vt-call svg{width:26px;height:26px;display:block;flex:0 0 auto}
.vt-call .vt-call-label{max-width:0;overflow:hidden;white-space:nowrap;margin-left:0;
  font-family:'Space Grotesk',Inter,system-ui,sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em;
  opacity:0;transition:max-width .28s ease,opacity .2s ease,margin .28s ease}
.vt-call::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#b9ff3d;
  z-index:-1;animation:vt-ring 2.2s ease-out infinite}
@media(hover:hover){
  .vt-call:hover,.vt-call:focus-visible{width:152px;border-radius:30px;padding:0 20px;justify-content:flex-start}
  .vt-call:hover .vt-call-label,.vt-call:focus-visible .vt-call-label{max-width:120px;opacity:1;margin-left:10px}
}
@keyframes vt-ring{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.65);opacity:0}100%{transform:scale(1.65);opacity:0}}
@keyframes vt-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:540px){.vt-call{right:16px;bottom:16px;height:54px;width:54px}.vt-call svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.vt-call{animation:none}.vt-call::before{animation:none;opacity:0}}

/* =====================================================================
   v10 — mobile fixes: manifesto side padding + scroll-hint placement
   ===================================================================== */

/* The manifesto carries both .wrap and .pad on the SAME element, so the
   later `.pad{padding:Npx 0}` rule wiped out `.wrap`'s horizontal padding
   and the big text ran flush to the screen edges. Restore explicit
   left/right padding (3-class selector wins over .pad / .wrap). */
.manifesto .wrap.pad{padding-left:32px;padding-right:32px}

@media(max-width:540px){
  /* a little extra breathing room on phones */
  .manifesto .wrap.pad{padding-left:26px;padding-right:26px}

  /* On phones the hero content is tall enough that the absolutely
     positioned scroll hint sat on top of the buttons. Drop it into normal
     flow so it sits cleanly BELOW the action buttons, as on desktop. */
  .hero{flex-direction:column;justify-content:center}
  .scroll-hint{position:static;transform:none;margin:40px auto 0}
}