:root{
  --accent:#e8442e; --accent-d:#c9341f;
  --ink:#0b0b0c; --ink-2:#161618; --line:#2a2a2d;
  --paper:#efede9; --white:#fff; --mute:#8d8b87;
  --r:20px; --wrap:1400px;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font);background:var(--ink);color:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.light{background:var(--paper);color:var(--ink)}
.dark{background:var(--ink);color:var(--white)}
.label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;margin-bottom:22px}
.sq{width:9px;height:9px;background:var(--accent);border-radius:2px}
h1,h2,h3{line-height:1.05;letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(34px,5vw,64px)}
section{padding:clamp(56px,8vw,110px) 0}
.logo__in{display:flex;align-items:center;gap:10px}
.logo__mark{position:relative;display:block}
.logo__mark img{height:40px;width:auto}.logo__in>img{height:20px;width:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:999px;font-weight:600;font-size:15px;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--accent{background:var(--accent);color:#fff}
.btn--light{background:#fff;color:var(--ink)}

/* header */
.header{position:fixed;inset:0 0 auto;z-index:50;padding:14px 0;background:#0b0b0ce6;backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500}
.nav__cta{display:none}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:#fff;transition:transform .25s,top .25s}
.burger span:first-child{top:16px}.burger span:last-child{top:24px}
.burger[aria-expanded=true] span:first-child{top:20px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:20px;transform:rotate(-45deg)}
.nav a:not(.btn){opacity:.8;transition:opacity .2s}.nav a:not(.btn):hover{opacity:1}
.header__r{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:12px;font-weight:700}
.lang span{padding:5px 10px;border-radius:999px;color:var(--mute)}
.lang .on{background:var(--white);color:var(--ink)}

/* hero */
.hero{padding:90px 0 30px;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(900px 500px at 85% 0%,#e8442e40,transparent 70%),var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#ddd;margin-bottom:28px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #e8442e33}
.hero__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:center;width:min(var(--wrap),100% - 40px)}
.hero h1{font-size:clamp(40px,5.6vw,84px);font-weight:700}
.hero .hint{margin-top:22px;font-size:13px;color:var(--accent)}
.hero h1 span{display:block}
.hero h1 span:last-child{color:var(--accent)}
.hero__text{max-width:520px;margin:28px 0 32px;font-size:clamp(16px,1.6vw,19px);color:#c9c7c3}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.tags{display:flex;gap:28px;flex-wrap:wrap;margin-top:40px;font-size:14px;color:var(--mute)}

/* trust */
.trust{padding:28px 0;background:var(--ink-2);border-block:1px solid var(--line)}
.trust__in{display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:space-between}
.trust p{font-size:13px;font-weight:600;max-width:240px;color:#cfcdc9}
.trust ul{display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;color:var(--mute);font-weight:800;font-size:18px;letter-spacing:-.02em}

/* about */
.statement{font-size:clamp(28px,4.4vw,56px);max-width:1000px;font-weight:600}
.statement em{font-style:normal;color:#a5a29d}

/* portfolio */
.portfolio{background:var(--ink);overflow:hidden}
.portfolio__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,90px);align-items:center}
.portfolio__txt p:not(.label){margin-top:20px;color:#bdbbb7;max-width:420px}
.portfolio__txt .hint{font-size:13px;color:var(--accent)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;height:min(780px,calc(100vh - 140px));overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.pcol{overflow:hidden}
.ptrack{display:flex;flex-direction:column;animation:scroll-up 40s linear infinite}
.pcol.down .ptrack{animation-name:scroll-down;animation-duration:48s}
.pcol:nth-child(3) .ptrack{animation-duration:34s}
.pset{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
.pgrid:hover .ptrack,.pgrid.paused .ptrack{animation-play-state:paused}
@keyframes scroll-up{to{transform:translateY(-50%)}}
@keyframes scroll-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.pcard{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--ink-2);cursor:pointer;flex:none;transition:transform .3s}
.pcard:hover,.pcard:focus-visible{transform:scale(1.03);z-index:2}
.pcard img,.pcard video,.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph{background:linear-gradient(160deg,hsl(var(--h) 80% 55%),hsl(calc(var(--h) + 40) 70% 18%))}
.pbadge,.pviews{position:absolute;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;background:#0b0b0c99;backdrop-filter:blur(6px)}
.pbadge{top:10px;left:10px}.pbadge svg{width:13px;height:13px}
.pviews{bottom:10px;left:10px}

/* numbers */
.numbers__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.numbers__grid li{border-bottom:1px dashed #bdb9b2;padding-bottom:22px;display:flex;flex-direction:column;gap:8px}
.numbers__grid strong{font-size:clamp(44px,6vw,84px);letter-spacing:-.04em;line-height:1}
.numbers__grid span{font-weight:700}
.numbers__grid small{color:#6d6b67;font-size:13px}

/* services */
.services__head{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;flex-wrap:wrap;margin-bottom:64px}
.services__head p{max-width:380px;color:var(--mute);font-size:15px}
.services__list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.services__list li{background:var(--ink);padding:34px 30px 40px;transition:background .25s}
.services__list li:hover{background:var(--ink-2)}
.num{font-size:12px;font-weight:700;color:var(--accent)}
.services__list h3,.steps h3{font-size:24px;margin:34px 0 12px}
.services__list p{color:var(--mute);font-size:15px}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.steps li{border-top:2px solid var(--ink);padding-top:22px}
.steps h3{margin:18px 0 10px;font-size:22px}
.steps p{color:#55534f;font-size:15px}

/* faq */
.faq{padding-top:0}
.faq__in{display:grid;grid-template-columns:5fr 7fr;gap:60px}
details{border-bottom:1px solid #cfcbc4;padding:22px 0}
summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--accent);font-size:26px;line-height:1}
details[open] summary::after{content:'–'}
details p{margin-top:14px;color:#55534f;max-width:620px}

/* contact */
.contact{background:radial-gradient(700px 400px at 10% 100%,#e8442e30,transparent 70%),var(--ink)}
.contact__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact p:not(.label){margin-top:18px;color:#c9c7c3}
.contact__lines a{font-weight:700;font-size:20px;color:#fff}
.form{display:flex;flex-direction:column;gap:18px;background:var(--ink-2);padding:32px;border-radius:var(--r);border:1px solid var(--line)}
.form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:#cfcdc9}
.form input,.form textarea{font:inherit;color:#fff;background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.form small{color:var(--mute);font-size:12px}
.form .ferr{color:#ff8a7a;font-size:12px;font-weight:600;min-height:0}
.form .ferr:empty{display:none}
.form input.bad,.form textarea.bad{border-color:#ff5a45;box-shadow:0 0 0 3px #ff5a4526}
.form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .cf-turnstile{min-height:0}
.form .btn{justify-content:center}

/* footer */
.footer{padding:60px 0 0;border-top:1px solid var(--line)}
.footer__in{display:grid;grid-template-columns:2fr 1.5fr 1fr;gap:40px}
.footer p{color:var(--mute);margin-top:16px;max-width:320px;font-size:14px}
.footer address{font-style:normal;color:#c9c7c3;font-size:14px;line-height:1.8}
.footer strong{display:block;margin-bottom:10px;font-size:13px;color:#fff}
.social{display:flex;gap:10px}
.social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;transition:background .2s}
.social a:hover{background:var(--accent);border-color:var(--accent)}
.social svg{width:18px;height:18px}
.footer__bar{margin-top:50px;padding:22px 0;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}



/* about + numbers combined */
.about .statement{margin-bottom:clamp(36px,7vh,80px)}
.about .numbers__grid{margin-top:0}

/* one block per screen on laptops/desktops */
@media (min-width:981px) and (min-height:620px){
  section:not(.hero){min-height:100vh;display:flex;align-items:center;padding:96px 0 40px}
  .contact{min-height:calc(100vh - 0px)}
  h2{font-size:clamp(30px,5.6vh,60px)}
  .hero h1{font-size:min(6vh,3.3vw)}
  .statement{font-size:clamp(26px,4.8vh,52px)}
  .services__head{margin-bottom:5vh}
  .services__list li{padding:3.4vh 28px 4vh}
  .services__list h3{font-size:clamp(19px,2.8vh,24px);margin:3vh 0 1vh}
  .steps{margin-top:6vh}
  .steps h3{font-size:clamp(18px,2.6vh,22px)}
  .numbers__grid strong{font-size:clamp(38px,8vh,76px)}
  details{padding:2.2vh 0}
  summary{font-size:clamp(16px,2.3vh,18px)}
  .form{padding:3vh 32px}
  section.phero{min-height:0;display:block;padding:130px 0 60px}
}

/* portfolio page */
.crumbs{font-size:13px;color:var(--mute);margin-bottom:28px}.crumbs a:hover{color:#fff}
.phero{padding:130px 0 50px;background:radial-gradient(900px 500px at 85% 0%,#e8442e45,transparent 70%),radial-gradient(600px 400px at 0% 100%,#e8442e1f,transparent 70%),var(--ink)}
.phero h1{font-size:clamp(34px,9vw,60px);max-width:1100px}
.phero h1>span{display:block}
.phero h1 .hl{color:var(--accent)}
.phero h1 .h1swap{display:block}
.swap.swap--fonts{display:inline-grid;align-items:baseline;clip-path:inset(-.3em -.1em);font:inherit;letter-spacing:inherit}
.swap.swap--fonts{color:var(--accent);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.swap.swap--fonts em{justify-self:start;position:static;grid-area:1/1;display:block}
.swap.swap--fonts em:nth-of-type(1){font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700}
.swap.swap--fonts em:nth-of-type(2){font-family:'Lobster',cursive;font-style:normal;font-weight:400}
.swap.swap--fonts em:nth-of-type(3){font-family:'Oswald',Impact,sans-serif;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.swap.swap--fonts em:nth-of-type(4){font-family:'Caveat','Comic Sans MS',cursive;font-style:normal;font-weight:700;font-size:1.12em}
.phero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:38px}
.phero__lead{max-width:520px;color:#c9c7c3;font-size:clamp(16px,1.5vw,19px)}
.phero__stats{display:flex;gap:clamp(24px,4vw,64px)}
.phero__stats strong{display:block;font-size:clamp(34px,4.4vw,60px);letter-spacing:-.04em;line-height:1}
.phero__stats span{font-size:13px;color:var(--mute)}
.scrollcue{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font-size:13px;font-weight:600;color:var(--mute);animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

.cnav{position:sticky;top:70px;z-index:40;background:#0b0b0cee;backdrop-filter:blur(10px);border-block:1px solid #ffffff14}
.cnav__in{display:flex;align-items:center;gap:24px;padding-block:12px;overflow-x:auto}
.cnav span{font-size:12px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.cnav ul{display:flex;gap:8px}
.cnav a{display:inline-flex;gap:8px;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;transition:background .2s,border-color .2s}
.cnav a b{color:var(--accent)}
.cnav a:hover,.cnav a.on{background:#fff;color:var(--ink);border-color:#fff}

.cases{background:var(--ink)}
.case{position:relative;padding:clamp(60px,9vh,110px) 0;scroll-margin-top:120px;overflow:hidden;background:radial-gradient(800px 500px at 90% 20%,hsl(var(--h) 80% 50% / .22),transparent 70%),var(--ink);border-bottom:1px solid #ffffff14}
.case__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.case__no{font-size:clamp(56px,7vh,84px);font-weight:800;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--accent);margin-bottom:14px}
.case__txt{position:relative}
.case__meta{font-size:13px;color:var(--mute);margin-bottom:14px}.case__meta b{color:#fff}
.case__txt h2{font-size:clamp(28px,3.4vw,46px);margin-bottom:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chips li{border:1px solid #ffffff33;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600}
.case__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:22px}
.case h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.case p:not(.case__no):not(.case__meta),.case__txt ul:not(.chips):not(.results) li{color:#cfcdc9;font-size:14.5px}
.case__txt ul:not(.chips):not(.results) li{padding-left:16px;position:relative;margin-bottom:6px}
.case__txt ul:not(.chips):not(.results) li::before{content:'';position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:2px;background:var(--accent)}
.results{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px dashed #ffffff33}
.results strong{display:block;font-size:clamp(30px,3.6vw,48px);letter-spacing:-.03em;line-height:1}
.results span{font-size:13px;color:var(--mute)}

/* carousel */
.car{min-width:0}
.car__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.car__count{font-size:13px;color:var(--mute);font-weight:600}.car__count b{color:#fff;font-size:18px}
.car__btns{display:flex;gap:8px}
.car__btns button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff33;background:none;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,opacity .2s}
.car__btns button:hover:not(:disabled){background:#fff;color:var(--ink)}
.car__btns button:disabled{opacity:.3;cursor:default}
.car__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:6px;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.car__track.end{-webkit-mask-image:none;mask-image:none}
.car__track::-webkit-scrollbar{display:none}
.car__track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.vcard{position:relative;flex:none;height:min(62vh,600px);aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--ink-2);scroll-snap-align:start;cursor:pointer;transition:transform .3s;user-select:none}
.vcard:hover,.vcard:focus-visible{transform:translateY(-6px)}
.vcard img,.vcard video,.vcard .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vcard::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#0008);pointer-events:none}
.car__foot{display:flex;align-items:center;gap:16px;margin-top:14px;font-size:12px;color:var(--mute)}
.car__prog{flex:1;height:3px;background:#ffffff22;border-radius:3px;overflow:hidden}
.car__prog i{display:block;height:100%;width:30%;background:var(--accent);border-radius:3px;transition:transform .15s}

.ticker--dark{background:var(--ink);border-color:#ffffff14}
.ticker--dark .ticker__s span{-webkit-text-stroke:1.5px #fff}
.ticker--dark .ticker__s span:nth-child(even){color:#fff}


/* tablet */
@media (max-width:980px){
  .burger{display:block}
  .hide-m{display:none}
  .nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#0b0b0cf5;backdrop-filter:blur(14px);padding:8px 20px 24px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s;font-size:18px}
  .nav.open{transform:none}
  .nav a:not(.btn){padding:16px 0;border-bottom:1px solid var(--line)}
  .nav__cta{display:inline-flex;justify-content:center;margin-top:18px}
  .hero{min-height:0;padding:100px 0 50px}
  .pgrid{height:520px}
  .numbers__grid,.steps{grid-template-columns:repeat(2,1fr)}
  .services__list{grid-template-columns:1fr 1fr}
  .footer__in{grid-template-columns:1fr 1fr}
}
/* phone */
@media (max-width:620px){
  .wrap,.hero__in{width:calc(100% - 32px)}
  section{padding:56px 0}
  .hero{padding:92px 0 40px}
  .hero h1{font-size:clamp(34px,10.5vw,48px)}
  .hero__cta .btn{flex:1;justify-content:center}
  .tags{margin-top:28px;gap:14px 20px}
  .pgrid{grid-template-columns:repeat(2,1fr);height:440px}
  .pcol:nth-child(3){display:none}
  .services__list,.steps,.footer__in{grid-template-columns:1fr}
  .numbers__grid{grid-template-columns:1fr 1fr;gap:22px}
  .services__list li{padding:26px 22px}
  .form{padding:22px}
  .logo__mark img{height:34px}.logo__in>img{height:17px}
  .lang span{padding:4px 8px}
  .results{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ptrack{animation:none!important}
  .pgrid{overflow:auto}
  .nav{transition:none}
}

/* about block */
.btn--dark{background:var(--ink);color:#fff}
.about__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,90px);align-items:center}
.about .statement{font-size:clamp(26px,3.4vw,46px);margin-bottom:24px}
.about__p{max-width:560px;color:#55534f;font-size:clamp(15px,1.5vw,18px);margin-bottom:32px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2.6vh,28px);border-radius:var(--r);background:#fff;border:1px solid #dcd8d1;transition:transform .3s}
.stat:hover{transform:translateY(-4px)}
.stat:nth-child(1){background:var(--accent);border-color:var(--accent);color:#fff}
.stat:nth-child(4){background:var(--ink);border-color:var(--ink);color:#fff}
.stat strong{font-size:clamp(40px,7vh,72px);letter-spacing:-.04em;line-height:1}
.stat span{font-weight:700;margin-top:6px}
.stat small{font-size:13px;opacity:.7}
.ticker{overflow:hidden;margin-top:clamp(30px,6vh,70px);border-block:1px solid #cfcbc4;padding:clamp(10px,2vh,22px) 0}
.ticker__t{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker__s{display:flex;flex:none}
.ticker__s span{display:flex;align-items:center;font-size:clamp(34px,7vh,76px);font-weight:800;letter-spacing:-.03em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--ink);padding-right:.6em}
.ticker__s span::after{content:'';width:.28em;height:.28em;background:var(--accent);border-radius:50%;margin-left:.6em;-webkit-text-stroke:0}
.ticker__s span:nth-child(even){color:var(--ink)}
.ticker:hover .ticker__t{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@media (min-width:981px) and (min-height:620px){
  section.about{flex-direction:column;align-items:stretch;justify-content:center;padding:96px 0 0}
  .about .ticker{margin-top:auto}
  .about__grid{margin-block:auto}
}
@media (max-width:980px){.about__grid{grid-template-columns:1fr}}
@media (max-width:620px){.stats{gap:10px}.stat{padding:16px}}
@media (prefers-reduced-motion:reduce){.ticker__t{animation:none}}

/* process timeline */
.process__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,100px);align-items:center}
.process h2{font-size:clamp(30px,4.4vw,56px);margin-bottom:22px}
.tl{position:relative;display:flex;flex-direction:column;gap:clamp(14px,2.6vh,26px)}
.tl::before{content:'';position:absolute;left:34px;top:30px;bottom:30px;width:2px;background:linear-gradient(var(--accent),var(--accent)) top/100% 0 no-repeat,#d3cfc8;transition:background-size 1.4s ease .2s}
.tl.in::before{background-size:100% 100%}
.tl li{position:relative;display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid #dcd8d1;border-radius:var(--r);padding:clamp(16px,3.4vh,38px) 24px clamp(16px,3.4vh,38px) 0;transition:transform .3s,box-shadow .3s,opacity .6s,translate .6s}
.tl li:hover{transform:translateX(6px);box-shadow:0 10px 30px #0b0b0c14}
.tl__n{justify-self:center;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:14px;position:relative;z-index:1}
.tl li:nth-child(1) .tl__n{background:var(--accent)}
.tl h3{font-size:clamp(18px,2.6vh,24px);margin-bottom:6px}
.tl p{font-size:14px;color:#55534f;max-width:460px}
.tl__t{font-size:12px;font-weight:700;border:1px solid #b9b5ad;border-radius:999px;padding:6px 12px;white-space:nowrap}
.js .tl li{opacity:0;translate:0 24px}
.js .tl.in li{opacity:1;translate:0 0}
.js .tl.in li:nth-child(2){transition-delay:.15s}.js .tl.in li:nth-child(3){transition-delay:.3s}.js .tl.in li:nth-child(4){transition-delay:.45s}
@media (max-width:980px){.process__grid{grid-template-columns:1fr}}
@media (max-width:620px){
  .tl::before{left:26px}
  .tl li{grid-template-columns:54px 1fr;padding:16px 16px 16px 0}
  .tl__t{grid-column:2;justify-self:start}
  .tl__n{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.js .tl li{opacity:1;translate:none}.tl::before{transition:none}}

@media (max-width:980px){
  .case__in{grid-template-columns:1fr}
  .vcard{height:min(56vh,480px)}
  .phero{padding:110px 0 40px}
  .cnav{top:70px}
}
@media (max-width:620px){
  .case__cols{grid-template-columns:1fr}
  .vcard{height:min(52vh,420px)}
  .phero__stats{gap:20px}
  .cnav span{display:none}
}

/* logo sparks: little cartoon bolts popping from the fingertips */
.sparks{position:absolute;left:0;right:0;top:12px;height:0;z-index:2;pointer-events:none;overflow:visible}
.sparks i{position:absolute;left:var(--l);top:0;width:var(--sz);height:calc(var(--sz) * 1.17);margin:calc(var(--sz) * -.6) 0 0 calc(var(--sz) / -2);opacity:0;transform-origin:50% 100%;animation:bolt 3.6s ease-out var(--d) infinite}
.sparks svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes bolt{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}
  8%{opacity:1;transform:translate(calc(var(--dx) * .3),calc(var(--dy) * .3)) scale(1.25) rotate(var(--r))}
  16%{transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .5)) scale(1) rotate(var(--r))}
  34%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1) rotate(calc(var(--r) * -.5))}
  46%,100%{opacity:0;transform:translate(calc(var(--dx) * 1.2),calc(var(--dy) * 1.2)) scale(.5) rotate(var(--r))}
}
.logo:hover .sparks i{animation-duration:1.8s}
@media (prefers-reduced-motion:reduce){.sparks{display:none}}

/* ===== Signature hover effects ===== */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn{position:relative;isolation:isolate;transition:color .35s,transform .25s ease-out,box-shadow .35s}
.btn--accent{--fill:#fff;--fill-ink:var(--ink)}
.btn--light{--fill:var(--accent);--fill-ink:#fff}
.btn--dark{--fill:var(--accent);--fill-ink:#fff}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill,#fff);clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .55s cubic-bezier(.2,.8,.2,1)}
.btn::after{content:'';position:absolute;inset:-18px;pointer-events:none;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M15 2 4 15.5h6.2L8 26 21 11.2h-6.6z' fill='%23ff8a1f' stroke='%237a2a0a' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px top 2px/17px 20px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M15 2 4 15.5h6.2L8 26 21 11.2h-6.6z' fill='%23ff8a1f' stroke='%237a2a0a' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 16px bottom 2px/14px 16px}
.btn__t{display:inline-block;overflow:hidden;height:1.5em;line-height:1.5em;vertical-align:top}
.btn__t>span{display:block;text-shadow:0 1.5em currentColor;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .btn:hover{color:var(--fill-ink,inherit);box-shadow:0 10px 30px #e8442e40}
  .btn:hover::before{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
  .btn:hover::after{animation:btnbolt .5s .1s both cubic-bezier(.2,.8,.2,1)}
  .btn:hover .btn__t>span{transform:translateY(-1.5em)}
  .btn:hover svg{animation:arrowfly .5s cubic-bezier(.2,.8,.2,1)}
}
@keyframes btnbolt{0%{opacity:0;transform:scale(.6) rotate(-10deg)}60%{opacity:1;transform:scale(1.1) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes arrowfly{0%{transform:none}45%{transform:translate(12px,-12px);opacity:0}46%{transform:translate(-12px,12px);opacity:0}100%{transform:none;opacity:1}}

/* video cards: 3D tilt + glare + spinning ring + play pulse */
.pcard,.vcard{--rx:0deg;--ry:0deg;transform-style:preserve-3d;will-change:transform}
.pcard::after,.vcard::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgb(255 255 255 / calc(var(--glare,0) * .24)),transparent 45%),linear-gradient(transparent 60%,#0008)}
.pcard::before,.vcard::before{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;padding:3px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:conic-gradient(from var(--a),#e8442e,#ffb36b,#e8442e00 40%,#e8442e 70%,#ffb36b,#e8442e);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 2.2s linear infinite}
@keyframes spin{to{--a:360deg}}
.pplay{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;z-index:3;border-radius:50%;background:var(--accent);display:grid;place-items:center;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.pplay::before{content:'';margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.pplay::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:ring 1.6s ease-out infinite}
@keyframes ring{to{transform:scale(1.9);opacity:0}}
.pbadge,.pviews{z-index:3;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pcard img,.pcard video,.pcard .ph,.vcard img,.vcard video,.vcard .ph{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .pcard:hover,.pcard:focus-visible,.vcard:hover,.vcard:focus-visible{--glare:1;transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.03);transition:transform .15s ease-out}
  .pcard,.vcard{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .pcard:hover::before,.pcard:focus-visible::before,.vcard:hover::before,.vcard:focus-visible::before{opacity:1}
  .pcard:hover .pplay,.vcard:hover .pplay,.pcard:focus-visible .pplay,.vcard:focus-visible .pplay{opacity:1;transform:none}
  .pcard.playing .pplay,.vcard.playing .pplay{opacity:0;transform:scale(.4)}
  .pcard:hover img,.pcard:hover video,.pcard:hover .ph,.vcard:hover img,.vcard:hover video,.vcard:hover .ph{transform:scale(1.08)}
  .pcard:hover .pbadge,.vcard:hover .pbadge{transform:translate(4px,4px)}
  .pcard:hover .pviews,.vcard:hover .pviews{transform:translate(4px,-4px) scale(1.1)}
}
@media (prefers-reduced-motion:reduce){
  .btn::after{display:none}.pcard::before,.vcard::before,.pplay::after{animation:none}
  .btn:hover svg{animation:none}
}

/* portfolio page: each block fits one screen (minus sticky header + case nav) */
@media (min-width:981px) and (min-height:620px){
  .pf .phero{min-height:calc(100vh - 56px);display:flex;align-items:center;padding:90px 0 30px}
  .pf .phero .wrap{width:min(var(--wrap),100% - 40px)}
  .phero h1{font-size:min(8vh,4.4vw)}
  .phero__row{margin-top:4vh}
  .scrollcue{margin-top:4vh}
  .case{min-height:calc(100vh - 126px);display:flex;align-items:center;padding:3vh 0;scroll-margin-top:126px}
  .case__in{width:min(var(--wrap),100% - 40px)}
  .case__no{font-size:5.5vh;margin-bottom:1vh}
  .case__txt h2{font-size:clamp(24px,4.2vh,42px);margin-bottom:1.6vh}
  .chips{margin-bottom:2.4vh}
  .case__cols{margin-bottom:2vh;gap:20px}
  .results{margin-top:2.4vh;padding-top:2vh}
  .results strong{font-size:clamp(28px,5vh,46px)}
  .vcard{height:min(56vh,560px)}
  .car__bar{margin-bottom:1.2vh}
}

/* portfolio hero collage */
.phero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,70px);align-items:center}
.phero__stats{margin-top:clamp(24px,4vh,44px)}
.phero__lead{margin-top:clamp(18px,3vh,32px)}
.collage{position:relative;height:min(70vh,660px)}
.fcard{position:absolute;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--ink-2);box-shadow:0 30px 60px #0009;rotate:var(--rot,0deg);translate:0 0;animation:float 7s ease-in-out var(--fd,0s) infinite;transition:rotate .5s cubic-bezier(.2,.8,.2,1),scale .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;--a:0deg}
.fcard img,.fcard .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fcard::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#000a);pointer-events:none;z-index:1}
.fcard::before{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;padding:3px;pointer-events:none;opacity:0;transition:opacity .3s;background:conic-gradient(from var(--a),#e8442e,#ffb36b,#e8442e00 40%,#e8442e 70%,#ffb36b,#e8442e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 2.2s linear infinite}
.fcard .pbadge{top:10px;left:10px;z-index:3}
.fstats{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;gap:6px;flex-wrap:wrap}
.fstats b{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:6px 9px;border-radius:999px;background:#0b0b0c99;backdrop-filter:blur(6px)}
.fstats b:nth-child(2) svg{color:#ff5a6e}
.fcard--1{left:0;top:16%;height:62%;--rot:-8deg;--fd:0s;z-index:1}
.fcard--2{left:27%;top:0;height:80%;--rot:3deg;--fd:-2s;z-index:3}
.fcard--3{right:0;top:20%;height:62%;--rot:9deg;--fd:-4s;z-index:2}
.chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#ffffffee;color:var(--ink);font-size:13px;font-weight:600;box-shadow:0 14px 30px #0006;animation:float 5s ease-in-out infinite}
.chip strong{font-size:18px;color:var(--accent);letter-spacing:-.02em}
.chip--1{left:-2%;bottom:6%;--fd:-1s;animation-delay:-1s}
.chip--2{right:2%;bottom:0;animation-delay:-3s}
@keyframes float{50%{translate:0 -12px}}
@media (hover:hover){
  .fcard:hover,.fcard:focus-visible{rotate:0deg;scale:1.05;z-index:6;box-shadow:0 40px 80px #000b,0 0 0 1px #e8442e66;animation-play-state:paused}
  .fcard:hover::before,.fcard:focus-visible::before{opacity:1}
  .fcard:hover .pplay,.fcard:focus-visible .pplay{opacity:1;transform:none}
  .fcard:hover img,.fcard:hover .ph{transform:scale(1.08)}
}
@media (max-width:980px){
  .phero__grid{grid-template-columns:1fr}
  .collage{height:min(60vh,460px);max-width:560px;width:100%;margin-inline:auto}
}
@media (max-width:620px){
  .collage{height:380px}
  .chip{padding:8px 12px;font-size:12px}.chip strong{font-size:15px}
  .fstats b{font-size:10px;padding:5px 7px}
}
@media (prefers-reduced-motion:reduce){.fcard,.chip{animation:none}.fcard::before{animation:none}}

/* ===== Why us page ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.whero{background:radial-gradient(900px 600px at 80% 40%,#e8442e38,transparent 70%),radial-gradient(500px 400px at 0% 100%,#e8442e1f,transparent 70%),var(--ink);overflow:hidden;padding:130px 0 60px}
.whero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,70px);align-items:center}
.why h1{font-size:clamp(34px,9vw,60px);line-height:1.04}
.why h1 .h1a,.why h1 .h1b{display:block}
.why h1 .h1b{color:var(--accent)}
.swap{display:inline-block;position:relative;vertical-align:baseline;text-align:left;clip-path:inset(-.12em -.06em);font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;letter-spacing:-.01em}
.swap__sizer{visibility:hidden;white-space:nowrap}
.swap em{position:absolute;left:0;top:0;font:inherit;white-space:nowrap;opacity:0;animation:swap calc(var(--n) * 2.2s) infinite backwards;animation-delay:calc(var(--i) * 2.2s)}
@keyframes swap{0%{opacity:0;transform:translateY(100%)}4%,21%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-100%)}}
.whero__lead{margin:clamp(18px,3.4vh,34px) 0 clamp(20px,4vh,36px);max-width:560px;color:#c9c7c3;font-size:clamp(16px,1.5vw,19px)}

.orbit{--S:min(58vh,500px);position:relative;width:var(--S);max-width:100%;aspect-ratio:1;margin-inline:auto}
.orbit__ring{position:absolute;inset:0;width:100%;height:100%;animation:rot 34s linear infinite}
.orbit__ring text{fill:#ffffff80;font:700 17px Manrope,system-ui,sans-serif;letter-spacing:.06em}
.orbit__glow{position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle,#e8442e99,transparent 70%);animation:pulse 3.2s ease-in-out infinite}
.orbit__mark{position:absolute;left:50%;top:50%;width:22%;height:auto;translate:-50% -50%}
.orbit__bolt{position:absolute;width:9%;animation:float 4s ease-in-out infinite}
.orbit__bolt svg{display:block;width:100%;height:auto;overflow:visible}
.orbit__bolt--1{left:30%;top:24%;rotate:-18deg}
.orbit__bolt--2{left:63%;top:22%;rotate:16deg;width:7%;animation-delay:-1.3s}
.orbit__bolt--3{left:66%;top:62%;rotate:24deg;width:8%;animation-delay:-2.4s}
.orbit__track{position:absolute;inset:0}
.orbit__dot{position:absolute;left:50%;top:50%;width:calc(var(--S) * .11);height:calc(var(--S) * .11);margin:calc(var(--S) * -.055) 0 0 calc(var(--S) * -.055);border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 24px #0007;animation:orb 18s linear infinite}
.orbit__dot svg{width:48%;height:48%}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes orb{from{transform:rotate(calc(var(--k) * 120deg)) translateY(calc(var(--S) * -.31)) rotate(calc(var(--k) * -120deg))}to{transform:rotate(calc(var(--k) * 120deg + 360deg)) translateY(calc(var(--S) * -.31)) rotate(calc(var(--k) * -120deg - 360deg))}}
@keyframes pulse{50%{transform:scale(1.18);opacity:.7}}

/* reasons */
.reasons h2{font-size:clamp(30px,5.6vh,60px);margin-bottom:clamp(24px,5vh,56px)}
.reasons__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.reasons__grid li{position:relative;background:#fff;border:1px solid #dcd8d1;border-radius:var(--r);padding:clamp(18px,3vh,32px) 26px clamp(20px,3.4vh,36px);transition:background .35s,color .35s,transform .35s,box-shadow .35s}
.reasons__grid li:hover{background:var(--ink);color:#fff;transform:translateY(-6px);box-shadow:0 24px 50px #0b0b0c33}
.rno{position:absolute;top:18px;right:22px;font-size:13px;font-weight:800;color:#b9b5ad;transition:color .35s}
.reasons__grid li:hover .rno{color:var(--accent)}
.ric{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--paper);color:var(--ink);margin-bottom:clamp(14px,3vh,28px);transition:background .35s,color .35s}
.ric svg{width:28px;height:28px}
.reasons__grid li:hover .ric{background:var(--accent);color:#fff}
.reasons__grid li:hover .ric svg{animation:wiggle .6s}
@keyframes wiggle{20%{rotate:-14deg}50%{rotate:12deg}80%{rotate:-6deg}100%{rotate:0}}
.reasons__grid h3{font-size:clamp(18px,2.8vh,24px);margin-bottom:10px}
.reasons__grid p{font-size:14.5px;color:#55534f;transition:color .35s}
.reasons__grid li:hover p{color:#c9c7c3}
.js [data-reveal] li,.js [data-reveal] .cmp__row{opacity:0;translate:0 26px;transition:opacity .6s calc(var(--i,0) * .09s),translate .6s calc(var(--i,0) * .09s),background .35s,color .35s,transform .35s,box-shadow .35s}
.js [data-reveal].in li,.js [data-reveal].in .cmp__row{opacity:1;translate:0 0}

/* anatomy */
.anatomy{background:radial-gradient(700px 500px at 85% 50%,#e8442e30,transparent 70%),var(--ink)}
.anatomy__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center}
.anatomy h2{font-size:clamp(30px,5.6vh,60px);margin-bottom:18px}
.anatomy__p{max-width:540px;color:#c9c7c3;margin-bottom:clamp(18px,3.4vh,34px)}
.segs{display:flex;flex-direction:column;gap:10px;max-width:560px}
.seg{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:start;border-left:3px solid #ffffff22;padding:6px 0 6px 16px;opacity:.4;animation:segoff 10s infinite}
.seg h3{font-size:clamp(17px,2.6vh,22px);margin-bottom:2px}
.seg p{font-size:14px;color:#c9c7c3}
.seg__t{font-size:12px;font-weight:800;color:var(--accent);padding-top:4px}
.seg--1{animation-name:seg1}.seg--2{animation-name:seg2}.seg--3{animation-name:seg3}
@keyframes seg1{0%,19%{opacity:1;border-color:var(--accent)}20%,100%{opacity:.4;border-color:#ffffff22}}
@keyframes seg2{0%,19%{opacity:.4;border-color:#ffffff22}20%,79%{opacity:1;border-color:var(--accent)}80%,100%{opacity:.4;border-color:#ffffff22}}
@keyframes seg3{0%,79%{opacity:.4;border-color:#ffffff22}80%,99%{opacity:1;border-color:var(--accent)}100%{opacity:.4;border-color:#ffffff22}}
.phone{justify-self:center;width:min(270px,100%);aspect-ratio:9/18.5;max-height:68vh;border:8px solid #26262a;border-radius:38px;background:#000;box-shadow:0 40px 80px #000a,0 0 0 1px #ffffff1a;position:relative}
.phone::before{content:'';position:absolute;top:8px;left:50%;width:30%;height:16px;margin-left:-15%;background:#000;border-radius:10px;z-index:5}
.phone__screen{position:absolute;inset:0;border-radius:30px;overflow:hidden}
.phone__bg{position:absolute;inset:-10%;background:linear-gradient(160deg,#e8442e,#ff9a3c 45%,#6a1b9a);animation:bgs 10s infinite}
@keyframes bgs{0%,18%{filter:hue-rotate(0)}22%,76%{filter:hue-rotate(150deg)}82%,100%{filter:hue-rotate(290deg)}}
.cap{position:absolute;left:12%;right:12%;top:46%;text-align:center;font-weight:800;font-size:clamp(20px,3.2vh,30px);line-height:1.1;letter-spacing:-.02em;text-shadow:0 4px 20px #0008;opacity:0;animation-duration:10s;animation-iteration-count:infinite}
.cap--1{animation-name:c1}.cap--2{animation-name:c2}.cap--3{animation-name:c3}
@keyframes c1{0%{opacity:0;transform:scale(.7)}3%,18%{opacity:1;transform:scale(1.08)}20%,100%{opacity:0}}
@keyframes c2{0%,20%{opacity:0;transform:translateY(20px)}24%,76%{opacity:1;transform:none}80%,100%{opacity:0}}
@keyframes c3{0%,80%{opacity:0;transform:translateY(20px)}84%,97%{opacity:1;transform:none}100%{opacity:0}}
.phone__bar{position:absolute;left:14px;right:14px;bottom:16px;height:5px;background:linear-gradient(90deg,#ffffff40 0 19.5%,transparent 19.5% 20.5%,#ffffff40 20.5% 79.5%,transparent 79.5% 80.5%,#ffffff40 80.5%);border-radius:3px;overflow:hidden}
.phone__bar i{position:absolute;inset:0;background:#fff;transform-origin:left;animation:fill 10s linear infinite}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* comparison: head-to-head duel */
.cmp h2{font-size:clamp(28px,5.2vh,56px);margin-bottom:clamp(20px,4vh,44px)}
.vs{display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,13vw,190px) minmax(0,1fr);position:relative}
.vs__c{display:flex;align-items:center;gap:14px;padding:clamp(11px,2.1vh,19px) 26px;font-size:15px;border-top:1px solid #00000014}
.vs__them{background:#e4e0d9;color:#6d6b67;justify-content:flex-end;text-align:right;flex-direction:row-reverse}
.vs__us{background:var(--ink);color:#fff;font-weight:700;border-top-color:#ffffff14}
.vs__head{border-top:0!important;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding-block:clamp(14px,2.6vh,22px)}
.vs__head--them{justify-content:flex-end;border-radius:var(--r) 0 0 0}
.vs__head--us{background:var(--accent);color:#fff;border-radius:0 var(--r) 0 0}
.vs__mid{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.vs__k span{background:#fff;border:1px solid #d3cfc8;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:800;box-shadow:0 6px 16px #0b0b0c14;white-space:nowrap}
.vs__badge{display:grid;place-items:center;width:64px;height:64px;margin-block:-8px;border-radius:50%;background:var(--ink);color:#fff;font-size:18px;font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 6px var(--paper),0 14px 30px #0b0b0c55;position:relative;animation:vspulse 2.4s ease-in-out infinite}
.vs__badge::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);animation:ring 2.4s ease-out infinite}
@keyframes vspulse{50%{transform:scale(1.08)}}
.vs__c svg{flex:none;width:28px;height:28px;padding:6px;border-radius:50%}
.vs__them svg{background:#cfcac2;color:#8d8b87}
.vs__us svg{background:var(--accent);color:#fff}
.vs__them span{text-decoration:line-through;text-decoration-color:#9a968f66}
.vs__score{padding-block:clamp(14px,2.6vh,24px);gap:2px;align-items:baseline}
.vs__score b{font-size:clamp(34px,6vh,60px);letter-spacing:-.04em;line-height:1}
.vs__score small{font-size:16px;opacity:.6;font-weight:700}
.vs__them.vs__score{border-radius:0 0 0 var(--r);flex-direction:row;justify-content:flex-end}
.vs__us.vs__score{border-radius:0 0 var(--r) 0;background:linear-gradient(135deg,var(--ink),#2a1410);color:#fff}
.vs__us.vs__score b{color:var(--accent)}
.vs__us{box-shadow:inset 3px 0 0 var(--accent)}
.vs__score.vs__them span{text-decoration:none}
.js [data-reveal] .vs__c,.js [data-reveal] .vs__k{opacity:0;transition:opacity .6s calc(var(--i,0) * .09s + .1s),translate .6s calc(var(--i,0) * .09s + .1s)}
.js [data-reveal] .vs__them{translate:-36px 0}
.js [data-reveal] .vs__us{translate:36px 0}
.js [data-reveal] .vs__k{translate:0 12px}
.js [data-reveal].in .vs__c,.js [data-reveal].in .vs__k{opacity:1;translate:0 0}
.js [data-reveal] .vs__head{opacity:1;translate:none}

@media (max-width:980px){
  .whero{padding:100px 0 50px}
  .whero__grid,.anatomy__grid{grid-template-columns:1fr}
  .orbit{--S:min(78vw,380px)}
  .reasons__grid{grid-template-columns:1fr 1fr}
  .phone{max-height:none;width:240px}
}
@media (max-width:620px){
  .reasons__grid{grid-template-columns:1fr}
  .vs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vs__mid.vs__head{display:none}
  .vs__head--them{border-radius:var(--r) 0 0 0}
  .vs__k{grid-column:1/-1;grid-row:auto;order:0;background:var(--paper);padding:14px 0 6px;justify-content:flex-start}
  .vs__c{padding:12px 14px;font-size:13.5px;gap:10px}
  .vs__them{flex-direction:row-reverse;order:calc(var(--i) * 3 + 2)}
  .vs__us{order:calc(var(--i) * 3 + 3)}
  .vs__k{order:calc(var(--i) * 3 + 1)}
  .vs__head--them{order:-3}.vs__head--us{order:-2}
  .vs__c svg{width:24px;height:24px;padding:5px}
  .seg{grid-template-columns:64px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .swap em{animation:none}.swap em:first-of-type{opacity:1}
  .orbit__ring,.orbit__dot,.orbit__glow,.orbit__bolt,.seg,.phone__bg,.cap,.phone__bar i{animation:none}
  .cap--1{opacity:1}.seg{opacity:1}
  .js [data-reveal] li,.js [data-reveal] .vs__c,.js [data-reveal] .vs__k{opacity:1;translate:none}
}

/* ===== Contact form: success animation inside the form ===== */
.sparks--burst i{animation:none;opacity:0}
@keyframes burst{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}
  22%{opacity:1;transform:translate(calc(var(--dx) * .35),calc(var(--dy) * .35)) scale(1.25) rotate(var(--r))}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5) rotate(calc(var(--r) * 1.6))}
}
.form{position:relative;overflow:hidden}
.form__err{color:#ff8a7a;font-size:13px;font-weight:600}
.form__done{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;
  background:radial-gradient(circle at 50% 40%,#e8442e33,transparent 60%),rgb(6 6 7 / .97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
.form__done .logo__in{gap:12px;margin-bottom:14px;opacity:0;transform:scale(.82);filter:blur(10px);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.3,1),filter .25s ease}
.form__done .logo__mark img{height:64px}.form__done .logo__in>img{height:32px}
.form__done .sparks{top:18px}
.form__done h3{font-size:clamp(20px,2.4vw,26px);opacity:0;transform:translateY(10px);transition:opacity .3s ease .35s,transform .3s ease .35s}
.form__done p{color:#c9c7c3;font-size:14px;max-width:300px;opacity:0;transform:translateY(10px);transition:opacity .3s ease .45s,transform .3s ease .45s}
.form.sent .form__done{opacity:1;visibility:visible;pointer-events:all;transition:opacity .3s ease,visibility 0s}
.form.sent .form__done .logo__in{opacity:1;transform:none;filter:none;transition-delay:.12s}
.form.sent .form__done h3,.form.sent .form__done p{opacity:1;transform:none}
.form.sent .sparks--burst i{animation:burst .7s cubic-bezier(.2,.7,.3,1) calc(var(--d) + .15s) both}
.form.sent.leaving .form__done{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}

/* ===== Sound toggle ===== */
.sound{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:none;color:#fff;cursor:pointer;transition:background .25s,border-color .25s}
.sound .on{display:none}
.sound[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.sound[aria-pressed=true] .on{display:block}.sound[aria-pressed=true] .off{display:none}
@media (hover:none){.sound{display:none}}

/* ===== Easter egg ===== */
.logo__mark.rock img{animation:rockshake .7s ease-in-out}
@keyframes rockshake{15%{transform:rotate(-16deg) scale(1.2)}35%{transform:rotate(14deg) scale(1.25)}55%{transform:rotate(-10deg) scale(1.15)}75%{transform:rotate(6deg)}100%{transform:none}}
.eggbolt{position:fixed;z-index:9990;pointer-events:none;left:0;top:0}
.eggbolt svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 6px #0006)}
.eggtoast{position:fixed;z-index:9991;pointer-events:none;padding:10px 18px;border-radius:999px;background:var(--accent);color:#fff;font:800 14px Manrope,system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 14px 34px #e8442e66}

/* ===== Scroll storytelling (Why us) ===== */
.anatomy__sticky{width:100%}
.scrubhint{display:none}
.anatomy.scrub{display:block!important;min-height:0!important;height:320vh;padding:0!important}
.anatomy.scrub .anatomy__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:70px}
.scrub .seg,.scrub .cap,.scrub .phone__bg,.scrub .phone__bar i{animation:none}
.scrub .seg{opacity:.4;border-color:#ffffff22;transition:opacity .4s,border-color .4s}
.scrub[data-stage="1"] .seg--1,.scrub[data-stage="2"] .seg--2,.scrub[data-stage="3"] .seg--3{opacity:1;border-color:var(--accent)}
.scrub .cap{opacity:0;transform:translateY(24px) scale(.9);transition:opacity .45s,transform .45s}
.scrub[data-stage="1"] .cap--1,.scrub[data-stage="2"] .cap--2,.scrub[data-stage="3"] .cap--3{opacity:1;transform:none}
.scrub .phone__bg{transition:filter .7s;filter:none}
.scrub[data-stage="2"] .phone__bg{filter:hue-rotate(150deg)}
.scrub[data-stage="3"] .phone__bg{filter:hue-rotate(290deg)}
.scrub .phone__bar i{transform:scaleX(var(--p,0))}
.scrub .scrubhint{display:block;margin-top:clamp(14px,3vh,28px);font-size:13px;font-weight:600;color:var(--accent);transition:opacity .4s}
.scrub:not([data-stage="1"]) .scrubhint{opacity:0}
.scrub .phone{transition:transform .3s;transform:rotate(calc((var(--p,0) - .5) * 5deg))}

/* ===== Mobile hardening (from Playwright audit) ===== */
body{overflow-x:clip}
.phero,.whero,.hero{overflow-x:clip}
.pbadge,.pviews{font-size:12px}
@media (max-width:980px){
  .hero__in,.faq__in,.contact__in,.phero__grid,.whero__grid,.anatomy__grid,.process__grid,.case__in,.about__grid,.reasons__grid,.footer__in{grid-template-columns:minmax(0,1fr)}
  .hero__in>*,.faq__in>*,.contact__in>*,.phero__grid>*,.whero__grid>*,.anatomy__grid>*,.process__grid>*,.case__in>*,.about__grid>*{min-width:0}
  summary,.faq__list p,h1,h2,h3,p{overflow-wrap:anywhere}
  .logo{display:inline-flex;align-items:center;min-height:44px}
  .lang span{padding:9px 12px}
  .crumbs a,.footer address a,.contact__lines a{display:inline-block;padding:10px 0}
  .scrollcue{padding:10px 0}
  .cnav a{padding:11px 14px}
  .form input,.form textarea,.form .btn{min-height:48px}
}
@media (max-width:980px) and (min-width:621px){.reasons__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .fstats b{font-size:12px;padding:5px 8px}
  .services__list,.steps,.numbers__grid,.footer__in,.case__cols,.reasons__grid{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
summary{min-height:44px;align-items:center}
.fstats b{font-size:12px}
.vs__head--them{background:#cfcac2;color:var(--ink)}
.cmp h2{margin-bottom:clamp(16px,3vh,36px)}
.vs__score{padding-block:clamp(10px,1.8vh,18px)}
html{overflow-x:clip}.cmp,.reasons,.vs{overflow-x:clip}

/* ===== Mobile conversion hooks ===== */
.mbar,.mcta{display:none}
@media (hover:none){.hero .hint{display:none}}
@media (max-width:620px){
  .hero{padding:84px 0 24px}
  .hero .eyebrow{margin-bottom:14px}
  .hero h1{margin-bottom:0}
  .hero__text{margin:14px 0 18px;font-size:15.5px}
  .hero .tags,.hero .hint{display:none}
  .hero__cta{flex-direction:column;gap:10px}
  .hero__cta .btn{width:100%;justify-content:center}
  .hero__cta .btn--light{background:transparent;color:#fff;border:1px solid #ffffff44}
  .hero__in{gap:22px}
  .pgrid{height:300px;margin-bottom:-10px}
  .mcta{display:flex;width:100%;justify-content:center;margin-top:28px}
  .faq__list .mcta{margin-top:30px}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#0b0b0cf2;backdrop-filter:blur(14px);border-top:1px solid #ffffff1a;transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .mbar.show{transform:none}
  .mbar .btn{flex:1;justify-content:center;padding:14px 18px}
  .mbar__call{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ink)}
}

/* ===== Phone / email hover effect ===== */
.fx-link{position:relative;display:inline-flex;align-items:center;gap:10px}
.fx-link .ic{display:grid;place-items:center;flex:none;width:1.05em;height:1.05em;color:var(--accent)}
.fx-link .ic svg{width:100%;height:100%;overflow:visible}
.fx-link .txt{display:inline-flex}
.fx-link .ch{display:inline-block}
.fx-link::after{content:'';position:absolute;left:calc(1.05em + 10px);right:0;bottom:-3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),#ffb36b);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .fx-link:hover::after,.fx-link:focus-visible::after{transform:scaleX(1)}
  .fx-link:hover .ch,.fx-link:focus-visible .ch{animation:chwave .6s ease calc(var(--i) * 30ms) both}
  .fx-tel:hover .ic,.fx-tel:focus-visible .ic{animation:phonering .7s ease}
  .fx-mail:hover .ic,.fx-mail:focus-visible .ic{animation:mailhop .6s cubic-bezier(.2,.8,.2,1)}
  .fx-mail:hover .flap,.fx-mail:focus-visible .flap{animation:flap .6s ease}
}
@keyframes chwave{0%{transform:none;color:inherit}35%{transform:translateY(-7px) rotate(-5deg);color:var(--accent)}70%{transform:translateY(1px);color:var(--accent)}100%{transform:none;color:inherit}}
@keyframes phonering{0%,100%{rotate:0deg}15%{rotate:-22deg}30%{rotate:20deg}45%{rotate:-16deg}60%{rotate:12deg}75%{rotate:-6deg}}
@keyframes mailhop{0%{transform:none}35%{transform:translateY(-6px) scale(1.15)}65%{transform:translateY(1px)}100%{transform:none}}
@keyframes flap{35%{transform:translateY(-3px) scaleY(-1);transform-origin:50% 40%}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.fx-link .ch,.fx-link .ic,.fx-link .flap{animation:none!important}}

/* ===== Video cards: real videos, sound indicator ===== */
.pcard video,.vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:#000}
.psnd{position:absolute;top:10px;right:10px;z-index:4;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0b0b0c99;backdrop-filter:blur(6px);color:#fff;opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.psnd .off{display:none}
.pcard.playing .psnd{opacity:1;transform:none}
.pcard.is-muted .psnd{background:var(--accent)}
.pcard.is-muted .psnd .on{display:none}.pcard.is-muted .psnd .off{display:block}
.pcard .pbadge{max-width:calc(100% - 56px)}
/* the playing video must sit above the poster image */
.pcard video,.vcard video{z-index:1}
.pcard img,.vcard img{z-index:0}

/* brand badge as a link to the original post */
.pbadge--link{cursor:pointer;transition:background .2s,transform .35s cubic-bezier(.2,.8,.2,1)}
.pbadge--link .ext{opacity:.7;transition:transform .25s,opacity .25s}
.pbadge--link:hover{background:var(--accent)}
.pbadge--link:hover .ext{opacity:1;transform:translate(2px,-2px)}

.pbadges{position:absolute;top:10px;left:10px;right:48px;z-index:4;display:flex;gap:6px;align-items:center}
.pbadges .pbadge{position:static;min-width:0;max-width:100%}
.pbadges .pbn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pig{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#0b0b0c99;backdrop-filter:blur(6px);color:#fff;transition:background .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.pig svg{width:14px;height:14px}
.pig:hover{background:var(--accent);transform:scale(1.12)}
.pcard:hover .pbadges .pbadge{transform:none}

/* hero carousel is moved by JS (wheel-controllable); CSS animation off */
.pgrid .pcol .ptrack{animation:none!important;will-change:transform}
@media (prefers-reduced-motion:no-preference){.pgrid{overscroll-behavior:contain}}


/* ===== Scroll cue on the hero carousel: universal symbol (chevron, mouse wheel, chevron), no text ===== */
.pwrap{position:relative;min-width:0}
.wcue{position:absolute;right:14px;top:50%;z-index:6;display:none;flex-direction:column;align-items:center;gap:7px;padding:12px 10px;border-radius:999px;background:#0b0b0ccc;backdrop-filter:blur(10px);border:1px solid #ffffff22;color:#fff;pointer-events:none;transform:translateY(-50%);animation:cuein .8s .6s both cubic-bezier(.2,.8,.2,1)}
.wcue__mouse{position:relative;width:20px;height:32px;border:2px solid #fff;border-radius:11px;flex:none}
.wcue__mouse i{position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--accent);animation:wheeldot 1.6s ease-in-out infinite}
.wcue__chev{display:block;width:9px;height:9px;border-left:2px solid #fff;border-top:2px solid #fff;opacity:.35}
.wcue__chev--up{transform:rotate(45deg);animation:chevup 1.6s ease-in-out infinite}
.wcue__chev--dn{transform:rotate(225deg);animation:chevdn 1.6s ease-in-out .8s infinite}
@keyframes cuein{from{opacity:0;transform:translateY(-50%) translateX(14px)}to{opacity:1;transform:translateY(-50%)}}
@keyframes wheeldot{0%{transform:translateY(0);opacity:1}60%{transform:translateY(10px);opacity:0}61%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes chevup{0%,100%{opacity:.35;transform:rotate(45deg) translate(0,0)}50%{opacity:1;transform:rotate(45deg) translate(-3px,-3px)}}
@keyframes chevdn{0%,100%{opacity:.35;transform:rotate(225deg) translate(0,0)}50%{opacity:1;transform:rotate(225deg) translate(-3px,-3px)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.wcue{display:flex}}
.pwrap.done .wcue{animation:cueout .45s forwards cubic-bezier(.2,.8,.2,1)}
@keyframes cueout{from{opacity:1;transform:translateY(-50%)}to{opacity:0;transform:translateY(-50%) translateX(10px);visibility:hidden}}

/* ===== Engagement popup ===== */
.pop{position:fixed;right:24px;bottom:96px;z-index:71;width:min(350px,calc(100vw - 24px));padding:16px 16px 16px;border-radius:24px;background:rgb(12 12 14 / .93);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#fff;box-shadow:0 30px 70px #000b,0 0 60px #e8442e22;opacity:0;visibility:hidden;transform:translateY(26px) scale(.9);transform-origin:100% 100%;transition:opacity .35s,transform .7s cubic-bezier(.2,1.3,.3,1),visibility 0s .7s;--a:0deg}
.pop[hidden]{display:none}
.pop::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--a),#e8442e,#ffb36b,#e8442e00 40%,#e8442e 70%,#ffb36b,#e8442e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 3.2s linear infinite}
.pop.show{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .7s cubic-bezier(.2,1.3,.3,1),visibility 0s}
.pop.leaving{opacity:0;visibility:hidden;transform:translateY(18px) scale(.94);transition:opacity .3s,transform .4s ease,visibility 0s .4s}
.pop__x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:0;background:#ffffff14;color:#fff;cursor:pointer;transition:background .2s,transform .3s}
.pop__x:hover{background:var(--accent);transform:rotate(90deg)}
.pop__bolt{position:absolute;right:46px;top:-18px;width:30px;rotate:18deg;animation:float 3.4s ease-in-out infinite;filter:drop-shadow(0 6px 10px #0008)}
.pop__bolt svg{display:block;width:100%;height:auto}
.pop__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pop__av{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#ff8a1f,#e8442e);flex:none;box-shadow:0 0 0 3px #e8442e33}
.pop__av img{height:24px;width:auto;position:relative;z-index:1}
.pop__av .sparks{top:12px;left:0;right:0;z-index:0}
.pop__who{display:flex;flex-direction:column;line-height:1.15}
.pop__who b{font-size:14px}
.pop__who small{display:flex;align-items:center;gap:6px;font-size:11px;color:#9a9893}
.pop__who small i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px #3ddc8433;animation:pulse 2s ease-in-out infinite}
.pop__bubble{position:relative;min-height:74px;padding:14px 16px;border-radius:6px 20px 20px 20px;background:#ffffff12;border:1px solid #ffffff14}
.pop__typing{position:absolute;left:16px;top:20px;display:flex;gap:5px;transition:opacity .2s}
.pop__typing i{width:8px;height:8px;border-radius:50%;background:#bdbab5;animation:typing 1s ease-in-out infinite}
.pop__typing i:nth-child(2){animation-delay:.15s}.pop__typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.pop__msg{display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(8px) scale(.97);transform-origin:0 0;transition:opacity .35s,transform .45s cubic-bezier(.2,1.2,.3,1)}
.pop__msg strong{font-size:22px;line-height:1.1;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#ffb36b);-webkit-background-clip:text;background-clip:text;color:transparent}
.pop__msg span{font-size:16px;font-weight:600;color:#e6e4e0}
.pop.typed .pop__typing{opacity:0}
.pop.typed .pop__msg--ask{opacity:1;transform:none}
.pop__scan{position:absolute;left:16px;right:16px;top:14px}
.pop__msg--res{display:none}
.pop.done .pop__msg--res{display:flex}
.pop__scan{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;visibility:hidden;transition:opacity .25s;text-align:center;padding-top:2px}
.pop__ring{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--accent);border:3px solid #ffffff1f;border-top-color:var(--accent);animation:rot .8s linear infinite}
.pop__ring svg{animation:rot .8s linear infinite reverse}
.pop__scantxt{font-size:14px;font-weight:600;color:#e6e4e0}
.pop__bar{width:100%;height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden}
.pop__bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#ff8a1f,#e8442e)}
.pop.auditing .pop__msg--ask{opacity:0;transform:translateY(-8px);pointer-events:none}
.pop.auditing .pop__scan{opacity:1;visibility:visible}
.pop.auditing .pop__bar i{animation:popbar 2.6s cubic-bezier(.4,.1,.3,1) forwards}
.pop.auditing .pop__cta{opacity:.5;pointer-events:none}
.pop.done .pop__msg--ask,.pop.done .pop__scan{display:none}
.pop.done .pop__msg--res{opacity:1;animation:popres .6s cubic-bezier(.2,1.3,.3,1) both}
.pop.done .pop__msg--res strong{animation:popshake .5s .35s}
.pop.done .pop__cta{display:none}
.pop__call{display:none;width:100%;justify-content:center;margin-top:12px}
.pop.done .pop__call{display:inline-flex;animation:popres .6s .25s cubic-bezier(.2,1.3,.3,1) both}
.pop.done .pop__bubble{border-color:#e8442e66;box-shadow:0 0 0 4px #e8442e1f}
@keyframes popbar{to{width:100%}}
@keyframes popres{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}
@keyframes popshake{20%{transform:translateX(-5px) rotate(-1deg)}40%{transform:translateX(5px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.pop__cta{width:100%;justify-content:center;margin-top:12px}
.pop.show .sparks--burst i{animation:burst .8s cubic-bezier(.2,.7,.3,1) calc(var(--d) + .3s) both}
@media (prefers-reduced-motion:reduce){.pop,.pop.show{transition:opacity .2s}.pop::before,.pop__bolt,.pop__who small i,.pop__typing i{animation:none}.pop .sparks{display:none}}


/* ===== Messenger-style launcher + panel ===== */
.pop::after{content:'';position:absolute;right:22px;bottom:-7px;width:16px;height:16px;background:rgb(12 12 14);border-right:2px solid #e8442e;border-bottom:2px solid #ff8a1f;border-bottom-right-radius:5px;transform:rotate(45deg);pointer-events:none}
.chat-fab{position:fixed;right:24px;bottom:24px;z-index:72;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff8a1f,#e8442e);box-shadow:0 14px 34px #e8442e66,0 0 0 1px #ffffff26 inset;opacity:0;visibility:hidden;transform:scale(.4) translateY(20px);transition:opacity .35s,transform .6s cubic-bezier(.2,1.4,.3,1),visibility 0s .6s,box-shadow .3s}
.chat-fab.ready{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .6s cubic-bezier(.2,1.4,.3,1),visibility 0s,box-shadow .3s}
.chat-fab:hover{box-shadow:0 18px 40px #e8442e88,0 0 0 1px #ffffff40 inset;transform:scale(1.07)}
.chat-fab svg{grid-area:1/1;width:28px;height:28px;transition:transform .4s cubic-bezier(.2,1.2,.3,1),opacity .25s}
.chat-fab__x{opacity:0;transform:rotate(-90deg) scale(.5)}
.chat-fab[aria-expanded=true] .chat-fab__ic{opacity:0;transform:rotate(90deg) scale(.5)}
.chat-fab[aria-expanded=true] .chat-fab__x{opacity:1;transform:none}
.chat-fab::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #ff8a1f;animation:ring 2.4s ease-out infinite;pointer-events:none}
.chat-fab[aria-expanded=true]::before{animation:none;opacity:0}
.chat-fab__badge{position:absolute;top:-3px;right:-3px;display:none;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#fff;color:#e8442e;font:800 11px/20px Manrope,system-ui,sans-serif;font-style:normal;box-shadow:0 4px 10px #0006;animation:badgepop .5s cubic-bezier(.2,1.6,.3,1)}
.chat-fab.has-msg .chat-fab__badge{display:block}
@keyframes badgepop{from{transform:scale(0)}to{transform:scale(1)}}
@media (max-width:620px){
  .chat-fab{right:14px;bottom:calc(88px + env(safe-area-inset-bottom));width:54px;height:54px}
  .pop{left:12px;right:12px;width:auto;bottom:calc(158px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.chat-fab::before{animation:none}}

/* muted-until-first-click hint on playing cards */
.psnd em{display:none;font-style:normal;font-size:11px;font-weight:700;white-space:nowrap}
.pcard.is-muted .psnd{width:auto;padding:0 11px 0 9px;gap:6px;border-radius:999px;display:flex;align-items:center}
.pcard.is-muted .psnd em{display:inline}
.pcard.is-muted .psnd{top:46px;left:10px;right:auto}

/* "click once for sound" gate shown over the hero carousel until the first click (browser autoplay rule) */
.scue{position:absolute;left:50%;top:14px;z-index:7;display:none;align-items:center;gap:9px;max-width:calc(100% - 24px);padding:9px 16px 9px 12px;border-radius:999px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;line-height:1.2;box-shadow:0 12px 30px #e8442e66;pointer-events:none;transform:translateX(-50%);animation:scuein .6s .5s both cubic-bezier(.2,1.3,.3,1),scuepulse 2.2s 1.2s ease-in-out infinite}
.scue svg{flex:none}
@keyframes scuein{from{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
@keyframes scuepulse{50%{box-shadow:0 12px 40px #e8442eaa,0 0 0 6px #e8442e33}}
@media (hover:hover){.pwrap.locked .scue{display:flex}}
@media (prefers-reduced-motion:reduce){.scue{animation:none;opacity:1}}

/* ================= MOBILE / TOUCH ================= */
@media (hover:none){
  .pgrid{touch-action:none}
  .scue__d{display:none}
  .pwrap.locked .scue{display:flex}
  .psnd em{display:none!important}
  .sound:not(.sound--menu){display:none}
}
.scue__t{display:none}
@media (hover:none){.scue__t{display:inline}}

/* tap feedback: same look as the desktop hover effects, driven by a .tap class */
.btn.tap{color:var(--fill-ink,inherit);box-shadow:0 10px 30px #e8442e40}
.btn.tap::before{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.btn.tap::after{animation:btnbolt .5s .05s both cubic-bezier(.2,.8,.2,1)}
.btn.tap .btn__t>span{transform:translateY(-1.5em)}
.btn.tap svg{animation:arrowfly .5s cubic-bezier(.2,.8,.2,1)}
.btn:active{scale:.97}
.pcard.pressed,.vcard.pressed{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.955)!important;transition:transform .15s ease-out;--glare:1}
.pcard.pressed::before,.vcard.pressed::before{opacity:1}
.fx-link.tap::after{transform:scaleX(1)}
.fx-link.tap .ch{animation:chwave .6s ease calc(var(--i) * 30ms) both}
.fx-tel.tap .ic{animation:phonering .7s ease}
.fx-mail.tap .ic{animation:mailhop .6s cubic-bezier(.2,.8,.2,1)}
.fx-mail.tap .flap{animation:flap .6s ease}

/* scroll progress bar */
.sbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;pointer-events:none;display:none}
.sbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffb36b);transform-origin:left;transform:scaleX(var(--sp,0))}
@media (max-width:980px){.sbar{display:block}}

/* entrance reveals on phones/tablets */
@media (max-width:980px){
  .js .rv{opacity:0;translate:0 34px;transition:opacity .7s var(--rd,0s),translate .8s var(--rd,0s) cubic-bezier(.2,.8,.2,1)}
  .js .rv.in{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;translate:none}}

/* mobile menu: sound toggle row */
.sound--menu{display:none}
@media (max-width:980px){
  .sound--menu{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;height:auto;margin-top:14px;padding:14px 16px;border-radius:16px;font:700 15px Manrope,system-ui,sans-serif}
  .sound--menu .on{display:none}
  .sound--menu[aria-pressed=true] .on{display:block}.sound--menu[aria-pressed=true] .off{display:none}
}

/* swipe-up cue in the hero (phones) */
.swipecue{display:none}
@media (max-width:620px){
  .swipecue{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px;font-size:12px;font-weight:700;color:#cfcdc9;transition:opacity .4s}
  .swipecue__ch{width:12px;height:12px;border-left:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg);animation:swbob 1.4s ease-in-out infinite}
  .swipecue.gone{opacity:0}
}
@keyframes swbob{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.4}50%{transform:rotate(45deg) translate(-5px,-5px);opacity:1}}

/* "Why us": pinned phone story on phones, one step at a time */
@media (max-width:980px){
  .anatomy.scrub .anatomy__sticky{height:100vh;height:100dvh;padding-top:74px;align-items:center}
  .anatomy.scrub .anatomy__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .anatomy.scrub h2{font-size:clamp(24px,7vw,32px);margin-bottom:6px}
  .anatomy.scrub .label{margin-bottom:10px}
  .anatomy.scrub .anatomy__p{display:none}
  .anatomy.scrub .segs .seg{display:none}
  .anatomy.scrub[data-stage="1"] .seg--1,.anatomy.scrub[data-stage="2"] .seg--2,.anatomy.scrub[data-stage="3"] .seg--3{display:grid}
  .anatomy.scrub .phone{width:auto;max-height:none;height:min(42vh,400px);aspect-ratio:9/18.5;margin-inline:auto}
  .anatomy.scrub .scrubhint{margin-top:6px;font-size:12px}
}

/* chat: bottom sheet on phones */
.pop__grab{display:none}
@media (max-width:620px){
  .pop{left:0;right:0;bottom:0;width:auto;border-radius:26px 26px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transform-origin:50% 100%;touch-action:none}
  .pop.show{transform:translateY(var(--dy,0px))}
  .pop.leaving{transform:translateY(100%)}
  .pop.dragging{transition:none}
  .pop::after{display:none}
  .pop__grab{display:block;width:44px;height:5px;border-radius:3px;background:#ffffff33;margin:0 auto 12px}
  .pop__x{top:16px}
  .chat-fab[aria-expanded=true]{opacity:0;visibility:hidden;pointer-events:none}
}

/* ================= REELS MODE (phones) ================= */
.reels{position:fixed;inset:0;z-index:95;background:#000;color:#fff;display:none}
.reels.open{display:block}
html.reels-lock{overflow:hidden}
.reels__feed{height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.reels__feed::-webkit-scrollbar{display:none}
.rl{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000}
.rl img,.rl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.rl video{z-index:1}
.rl::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(transparent 52%,#000c);pointer-events:none}
.rl__tap{position:absolute;inset:0;z-index:3;background:none;border:0;padding:0;width:100%}
.rl__meta{position:absolute;left:16px;right:88px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:4;pointer-events:none}
.rl__brand{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#0b0b0cb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:800;font-size:15px}
.rl__brand svg{width:16px;height:16px}
.rl__title{margin-top:10px;font-size:15px;font-weight:600;line-height:1.3;text-shadow:0 2px 12px #000a}
.rl__views{margin-top:6px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#e6e4e0}
.rl__side{position:absolute;right:12px;bottom:calc(40px + env(safe-area-inset-bottom));z-index:4;display:flex;flex-direction:column;gap:14px}
.rl__btn{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#0b0b0cb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;color:#fff}
.rl__btn svg{width:22px;height:22px}
.rl__mute .on{display:none}
.rl.is-on .rl__mute .on{display:block}.rl.is-on .rl__mute .off{display:none}
.rl__bar{position:absolute;left:0;right:0;top:0;height:3px;z-index:5;background:#ffffff26}
.rl__bar i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.rl__flash{position:absolute;left:50%;top:50%;z-index:6;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:#000a;display:grid;place-items:center;opacity:0;pointer-events:none}
.rl__flash svg{width:38px;height:38px}
.rl__flash.go{animation:rlflash .8s ease-out}
@keyframes rlflash{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
.rl--end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:28px;text-align:center;background:radial-gradient(circle at 50% 35%,#e8442e66,transparent 62%),#0b0b0c}
.rl--end::after{display:none}
.rl--end h3{font-size:clamp(28px,8vw,40px);letter-spacing:-.03em;line-height:1.08;max-width:320px}
.rl--end .btn{width:100%;max-width:340px;justify-content:center}
.reels__x{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:99;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#0b0b0cb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;color:#fff}
.reels__count{position:fixed;top:calc(22px + env(safe-area-inset-top));left:16px;z-index:99;padding:8px 13px;border-radius:999px;background:#0b0b0cb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;font-weight:700}
.reels__count b{font-size:15px}
.reels__hint{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:99;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 14px;border-radius:999px;background:#e8442ee6;font-size:12px;font-weight:800;pointer-events:none;animation:rlhint 4s .4s both}
@keyframes rlhint{0%{opacity:0;transform:translate(-50%,14px)}12%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px);visibility:hidden}}

/* ---- cookie consent ---- */
.cookie{position:fixed;left:20px;bottom:20px;z-index:90;width:min(420px,calc(100vw - 24px));padding:16px 18px;border-radius:18px;background:rgb(12 12 14 / .96);border:1px solid #ffffff1f;box-shadow:0 20px 50px #000a;color:#d8d6d2;font-size:13px;line-height:1.5;animation:popres .5s cubic-bezier(.2,1.2,.3,1) both}
.cookie[hidden]{display:none}
.cookie p{margin:0 0 12px}
.cookie__btns{display:flex;gap:10px}
.cookie__btns .btn{flex:1;justify-content:center}
.cookie-open{margin-left:14px;background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.cookie-open:hover{color:#fff}
@media (max-width:620px){.cookie{left:12px;right:12px;width:auto;bottom:calc(88px + env(safe-area-inset-bottom))}}

/* ---- legal / privacy page ---- */
.legal{padding:clamp(100px,14vh,150px) 0 80px}
.legal__in{max-width:780px}
.legal h1{font-size:clamp(32px,6vw,52px);margin-bottom:10px}
.legal__date{color:var(--mute);font-size:13px;margin-bottom:24px}
.legal__intro{font-size:18px;color:#d8d6d2;margin-bottom:34px}
.legal section{margin-bottom:28px;padding:0;min-height:0;display:block}
.legal h2{font-size:20px;letter-spacing:-.01em;margin-bottom:10px}
.legal p{color:#c9c7c3;margin:0 0 10px;line-height:1.65}
.legal a:not(.btn){color:var(--accent);text-decoration:underline}
.cookie a{color:#fff;text-decoration:underline}