/* SmartFix Dagenham — v2
   Tokens
   navy   #04142E  base
   deep   #020D22  alternate sections, footer
   raise  #0B2A57  raised surfaces
   yellow #FFCA03  the ticket + actions only
   S-mark #FD7909 #FE4418 #0A3CFF #19C3FF  service tiles only
   Type: Open Sans. Display = 75% width, 800. Body = 100% width, 400. */

:root{
  --navy:#04142E; --deep:#020D22; --raise:#0B2A57; --y:#FFCA03; --y-hi:#FFD94A;
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.76); --ink-3:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.12);
  --gut:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--ink);font:400 17px/1.6 'Open Sans',system-ui,sans-serif;font-stretch:100%;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:80px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 16px;border-radius:999px;background:var(--y);color:var(--navy);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gut)}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-fill{width:20px;height:20px;flex:none;fill:currentColor}

/* type */
.hero-h,.h2,.svc h3,.step-n,.rating-n,.t-status{font-family:'Poppins','Open Sans',system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}
.h2{font-size:clamp(32px,3.9vw,52px);line-height:1.08;text-wrap:balance}
.lede{margin-top:18px;max-width:34ch;color:var(--ink-2);font-size:17px}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.pill:active{transform:scale(.98)}
.pill-y{background:var(--y);color:var(--navy);font-weight:800}
.pill-y:hover{background:var(--y-hi)}
.pill-n{background:var(--navy);color:var(--y);font-weight:800}
.pill-n:hover{background:var(--raise)}
.pill-o{border:1px solid rgba(255,255,255,.28);color:var(--ink)}
.pill-o:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.pill-line{border:1px solid rgba(255,202,3,.55);color:var(--y)}
.pill-line:hover{background:var(--y);color:var(--navy);border-color:var(--y)}
.pill-o .i,.pill-y .i{width:20px;height:20px}
.tlink{display:inline-flex;align-items:center;gap:8px;color:var(--y);font-weight:700;text-decoration:none;text-underline-offset:5px}
.tlink:hover{text-decoration:underline}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(2,13,34,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
.top-in{display:flex;align-items:center;gap:32px;min-height:72px}
.brand img{height:42px;width:auto}
.nav{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:600}
.nav a{color:var(--ink-2);text-decoration:none;padding:6px 0;background:linear-gradient(var(--y),var(--y)) left bottom/0 2px no-repeat;transition:color .3s,background-size .4s var(--ease)}
.nav a:hover{color:var(--ink);background-size:100% 2px}
.top-wa{min-height:44px;padding:0 20px;font-size:15px}

/* hero */
/* hero light: true circles (never stretched ellipses), eased fall-off so there are no visible edges */
.hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#071E52 0%,var(--navy) 85%)}
.hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-glow i{position:absolute;border-radius:50%;will-change:transform}
.hero-glow .g-blue{width:1300px;height:1300px;right:-380px;top:-420px;
  background:radial-gradient(closest-side,rgba(10,69,216,.62),rgba(10,69,216,.46) 25%,rgba(10,69,216,.26) 50%,rgba(10,69,216,.1) 72%,rgba(10,69,216,0));animation:drift 26s ease-in-out infinite alternate}
.hero-glow .g-sky{width:1000px;height:1000px;left:-420px;bottom:-520px;
  background:radial-gradient(closest-side,rgba(25,140,255,.34),rgba(25,140,255,.22) 30%,rgba(25,140,255,.09) 62%,rgba(25,140,255,0));animation:drift 32s ease-in-out -8s infinite alternate-reverse}
.hero-glow .g-orange{width:900px;height:900px;right:-300px;top:-200px;
  background:radial-gradient(closest-side,rgba(253,121,9,.3),rgba(253,121,9,.2) 30%,rgba(254,68,24,.08) 62%,rgba(254,68,24,0));animation:drift 22s ease-in-out -4s infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-40px,30px,0) scale(1.06)}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:340px;z-index:-1;background:linear-gradient(180deg,rgba(4,20,46,0),rgba(4,20,46,.18) 25%,rgba(4,20,46,.45) 50%,rgba(4,20,46,.76) 75%,rgba(4,20,46,.94) 90%,var(--navy));pointer-events:none}

.hero-in{--hc:minmax(0,1fr) minmax(0,1.12fr);--hg:clamp(32px,4.5vw,64px);max-width:1260px;display:grid;grid-template-columns:var(--hc);grid-template-areas:"text media" "act act";column-gap:var(--hg);row-gap:clamp(48px,5.5vw,80px);align-items:center;padding-block:clamp(44px,5.5vw,84px) clamp(64px,8vw,112px)}
.hero-text{grid-area:text}
.hero-media{grid-area:media}
.hero-act{grid-area:act;display:grid;grid-template-columns:var(--hc);column-gap:var(--hg);align-items:center}
.hero-h{font-size:clamp(40px,4.3vw,62px);line-height:1.13;text-wrap:balance;font-weight:800;letter-spacing:-.03em}
/* hero headline: the start stays, the ending is typed, deleted and replaced (JS); min-height fits the longest ending */
.hero-h .rot{display:block;white-space:nowrap;color:var(--y)}
.caret{display:inline-block;width:.07em;height:.8em;margin:0 -.11em 0 .05em;vertical-align:-.03em;border-radius:2px;background:#fff;animation:blink 1s steps(1) infinite}
.caret.busy{animation:none}
@keyframes blink{50%{opacity:0}}
.hero-sub{margin-top:26px;max-width:46ch;font-size:clamp(17px,1.5vw,19px);color:var(--ink-2)}

/* promo video */
.pv{position:relative;border-radius:26px;overflow:hidden;background:var(--deep);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.1)}
.pv video{width:100%;aspect-ratio:1280/1067;object-fit:contain;background:#0A3FCB}
/* click the video = open it big with sound */
.pv-open{all:unset;position:absolute;inset:0;cursor:zoom-in;display:flex;align-items:center;justify-content:center}
.pv-open:focus-visible{outline:2px solid var(--y);outline-offset:-4px;border-radius:26px}
.pv-big{display:inline-flex;align-items:center;gap:10px;padding:0 20px;min-height:48px;border-radius:999px;color:var(--navy);background:var(--y);font-weight:800;font-size:15px;box-shadow:0 14px 30px -10px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease)}
.pv-big .i{width:20px;height:20px}
@media (hover:hover){.pv:hover .pv-big{opacity:1;transform:none}}
.pv-open:focus-visible .pv-big{opacity:1;transform:none}
/* small pause / play in the corner */
.pv-hit{all:unset;position:absolute;right:12px;bottom:12px;z-index:1;cursor:pointer;border-radius:50%}
.pv-circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(2,13,34,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:background-color .3s,transform .3s var(--ease)}
.pv-hit:hover .pv-circle{background:rgba(2,13,34,.8);transform:scale(1.06)}
/* pause/play only shows on hover (mouse), after a tap (touch), on keyboard focus, or while paused */
.pv-hit{opacity:0;transition:opacity .5s ease}
.pv.paused .pv-hit,.pv.awake .pv-hit,.pv-hit:focus-visible{opacity:1;transition-duration:.2s}
@media (hover:hover){.pv:hover .pv-hit{opacity:1;transition-duration:.2s}}
.pv-circle .i-fill{width:18px;height:18px}
.pv-hit:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.pv .ic-play{display:none}.pv.paused .ic-play{display:block}.pv.paused .ic-pause{display:none}
/* promo popup */
.pm-box{position:relative;width:min(1100px,100%)}
.pm-box video{width:100%;max-height:82vh;aspect-ratio:1280/1067;border-radius:18px;background:#000}
.pm-box .tt-close{top:-54px;right:0}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-inline:4px;color:var(--ink-3);font-size:14px;font-weight:600}
.snd{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font:700 14px/1 'Open Sans',sans-serif;white-space:nowrap;color:var(--ink-2);border:1px solid rgba(255,255,255,.22);transition:color .3s,border-color .3s,background-color .3s}
.snd:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.snd:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.snd-off,.snd-on{display:inline-flex;align-items:center;gap:9px}
.snd .i{width:18px;height:18px}
.snd-on{display:none}.snd.on .snd-on{display:inline-flex}.snd.on .snd-off{display:none}
.snd.on{background:var(--y);border-color:var(--y);color:var(--navy)}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{display:block;width:3px;height:100%;border-radius:2px;background:currentColor;transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.35s}.eq i:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* THE TICKET — the one bold element */
.ticket{max-width:520px;color:var(--navy);filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));transform:rotate(-1.2deg);transform-origin:20% 0;animation:drop 1.1s .25s var(--ease) both}
@keyframes drop{0%{opacity:0;transform:translateY(-28px) rotate(-5deg)}60%{opacity:1;transform:translateY(4px) rotate(-.6deg)}100%{transform:rotate(-1.2deg)}}
.t-top,.t-stub{background:var(--y);--r:13px}
.t-top{padding:26px 30px 24px;border-radius:20px 20px 0 0;
  -webkit-mask:radial-gradient(circle var(--r) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--r) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--r) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--r) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat}
.t-stub{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:22px 30px 26px;border-radius:0 0 20px 20px;
  -webkit-mask:radial-gradient(circle var(--r) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--r) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--r) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--r) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat}
.t-stub::before{content:"";position:absolute;top:0;left:22px;right:22px;border-top:2px dashed rgba(4,20,46,.28)}
.t-shop{font-weight:700;font-size:14px;opacity:.72}
.t-status{display:flex;align-items:center;gap:12px;margin-top:8px;font-weight:800;font-size:clamp(28px,2.7vw,36px);line-height:1.1}
.t-dot{width:12px;height:12px;flex:none;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px rgba(4,20,46,.14)}
.ticket.is-open .t-dot{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(4,20,46,.14)}50%{box-shadow:0 0 0 8px rgba(4,20,46,0)}}
.ticket.is-closed .t-dot{background:transparent;box-shadow:inset 0 0 0 2.5px var(--navy)}
.t-when{margin-top:4px;padding-left:24px;font-size:17px;font-weight:700}
.t-addr{margin-top:14px;font-size:15px;font-weight:600;opacity:.8}
.t-dir{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.t-dir:hover{text-decoration-thickness:3px}
.t-stub .pill-n:focus-visible,.t-dir:focus-visible{outline-color:var(--navy)}
/* the facts beside the ticket */
.proof-card{padding:10px 30px}
.proof li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:center;padding:20px 0}
.proof li+li{border-top:1px solid rgba(255,255,255,.1)}
.p-ic{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:var(--y);background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.p-ic .i,.p-ic .i-fill{width:24px;height:24px}
.proof strong{display:block;font-family:'Poppins','Open Sans',sans-serif;font-weight:700;font-size:clamp(18px,1.6vw,21px);line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.proof span span,.proof .p-sub{display:block;margin-top:3px;font-size:14.5px;line-height:1.45;color:var(--ink-3)}

/* sections: one even navy everywhere below the hero, so sections flow into each other with no lines or tint changes */
.sec{padding-block:clamp(72px,9vw,128px);background:var(--navy)}
.sec-deep{background:var(--navy)}

/* glass: soft body, a rim of light that slowly travels the edge, and a slow sheen every few seconds */
@property --rim{syntax:'<angle>';inherits:false;initial-value:0deg}
/* The rim is a real 1px border painted by the background's border-box layer (no CSS mask: masked rings left
   stray bright pixels on the edge in mobile Chrome). The body fill is therefore opaque: the glass tint pre-mixed over navy. */
.glass{--fill:linear-gradient(180deg,#19283F,#0A1A33 65%);position:relative;isolation:isolate;border-radius:26px;border:1px solid transparent;
  background:var(--fill) padding-box,conic-gradient(from var(--rim),rgba(255,255,255,.1) 0deg,rgba(255,255,255,.1) 150deg,rgba(255,255,255,.18) 200deg,rgba(255,255,255,.3) 245deg,rgba(255,226,140,.38) 275deg,rgba(255,255,255,.3) 305deg,rgba(255,255,255,.18) 335deg,rgba(255,255,255,.1) 360deg) border-box #04142E;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden;animation:rim 12s linear infinite}
.glass::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 60%) no-repeat;background-size:260% 100%;background-position:160% 0;
  animation:sheen 9s var(--ease) infinite}
@keyframes rim{to{--rim:360deg}}
@keyframes sheen{0%,62%{background-position:160% 0}100%{background-position:-60% 0}}
.quote.glass::after{animation-delay:-3s}.also.glass::after{animation-delay:-6s}
.quote.glass{animation-delay:-4s}.also.glass{animation-delay:-8s}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.split-head{position:sticky;top:110px}

/* services */
.svc-list{display:grid;gap:40px}
.svc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:28px;align-items:center}
.svc h3{font-size:clamp(24px,2.3vw,30px);line-height:1.15}
.svc p{margin-top:8px;max-width:52ch;color:var(--ink-2)}
.tile{position:relative;overflow:hidden;width:96px;height:96px;border-radius:26px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -10px 18px rgba(0,0,0,.18),0 16px 30px -10px var(--glow)}
.tile::before{content:"";position:absolute;left:-20%;top:-30%;width:90%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.45),rgba(255,255,255,0))}
.tile .i{position:relative;width:46px;height:46px;stroke-width:1.6}
.tile-o{--glow:rgba(253,121,9,.55);background:linear-gradient(160deg,#FFCA03 0%,#FD7909 50%,#FE4418 100%)}
.tile-b{--glow:rgba(10,60,255,.55);background:linear-gradient(160deg,#19C3FF 0%,#0A3CFF 100%)}
.tile-y{--glow:rgba(255,202,3,.45);background:linear-gradient(160deg,#FFE36B 0%,#FFCA03 55%,#F5A800 100%);color:var(--navy)}
.also{margin-top:64px;padding:30px 32px;border-radius:24px}
.also.glass{--fill:linear-gradient(180deg,#13233A,#091932)}
.also-h{font-size:15px;font-weight:700;color:var(--ink-3)}
.also-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:18px}
.also-list li{display:flex;flex-direction:column;gap:14px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink-2)}
.also-list strong{display:block;color:var(--ink);font-size:17px;margin-bottom:2px}
.mini{width:46px;height:46px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--y);background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.mini .i{width:24px;height:24px;stroke-width:1.7}

/* how it works — a real sequence, so it is numbered */
.how-h{max-width:12ch}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:56px;counter-reset:none}
.steps li{position:relative;padding-top:22px}
.steps li::before{content:"";position:absolute;top:0;left:0;right:-40px;height:2px;background:linear-gradient(90deg,var(--y) 0 56px,rgba(255,255,255,.12) 56px)}
.steps li:last-child::before{right:0}
/* steps: the yellow part of each line draws in, numbers rise, one after another */
.steps.anim li::before{background:linear-gradient(var(--y),var(--y)) 0 0/0 100% no-repeat,rgba(255,255,255,.12);transition:background-size 1s var(--ease) calc(var(--i,0)*160ms + 100ms)}
.steps.anim.in li::before{background-size:56px 100%,auto}
.steps.anim .step-n{opacity:0;transform:translateY(16px);transition:opacity .6s ease calc(var(--i,0)*160ms),transform .8s var(--ease) calc(var(--i,0)*160ms)}
.steps.anim.in .step-n{opacity:1;transform:none}
/* section headings rise in word by word when they scroll into view */
.h2.words .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.h2.words .wd>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease) calc(var(--i,0)*70ms)}
.h2.words.in .wd>span{transform:none}
.step-n{display:block;font-size:60px;line-height:1;color:var(--y);font-weight:800}
.steps h3{margin-top:14px;font-size:20px;line-height:1.3;font-weight:700}
.steps p{margin-top:8px;font-size:15.5px;color:var(--ink-2)}

/* repair videos */
.row-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.row-head .h2{max-width:14ch}
.row-tools{display:flex;align-items:center;gap:20px}
.vs-arrows{display:none;gap:8px}
.vs-btn{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--y);border:1px solid rgba(255,202,3,.5);transition:background-color .3s,color .3s,opacity .3s}
.vs-btn:hover:not(:disabled){background:var(--y);color:var(--navy)}
.vs-btn:disabled{opacity:.3;cursor:default}
.vs-btn:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.vstrip.dragging{cursor:grabbing;scroll-snap-type:none !important;scroll-behavior:auto}
.vstrip.dragging .vid{pointer-events:none}
.vstrip-wrap{max-width:1200px;margin:48px auto 0;padding-inline:var(--gut)}
.vstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.vid{display:block;text-decoration:none;color:var(--ink)}
.vthumb{position:relative;display:block;aspect-ratio:5/6;border-radius:20px;overflow:hidden;background:var(--deep);box-shadow:0 24px 48px -20px rgba(0,0,0,.7)}
.vthumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(2,13,34,0) 55%,rgba(2,13,34,.6));pointer-events:none;transition:box-shadow .4s}
.vthumb img,.vthumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vthumb video{opacity:0;transition:opacity .5s}
.vplay{position:absolute;left:16px;bottom:16px;z-index:1;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--y);color:var(--navy);transition:transform .4s var(--ease)}
.vplay .i-fill{width:18px;height:18px;margin-left:2px}
.vtitle{display:block;margin-top:14px;font-weight:700;font-size:16px;line-height:1.35}
.vid:hover .vthumb video{opacity:1}
.vid:hover .vthumb::after{box-shadow:inset 0 0 0 2px var(--y)}
.vid:hover .vplay{transform:scale(1.08)}

/* photos */
.shop-h{max-width:13ch}
.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(160px,17vw,230px);gap:16px;margin-top:48px}
.ph{position:relative;overflow:hidden;border-radius:20px;background:var(--navy)}
.ph-main{grid-column:span 2;grid-row:span 2}
.ph{box-shadow:0 24px 48px -18px rgba(0,0,0,.6)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ph:hover img{transform:scale(1.06)}
.ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none;transition:box-shadow .45s}
.ph:hover::after{box-shadow:inset 0 0 0 2px var(--y)}
.ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;font-size:14px;font-weight:700;background:linear-gradient(180deg,rgba(2,13,34,0),rgba(2,13,34,.85))}
.ph-open{all:unset;position:absolute;inset:0;z-index:1;cursor:zoom-in;border-radius:inherit}
.ph-open:focus-visible{outline:2px solid var(--y);outline-offset:-3px}
@supports (animation-timeline:view()){
  .ph{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  @keyframes rise{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:none}}
}
/* photo popup */
.lb-box{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(1100px,100%)}
.lb-box img{max-width:100%;max-height:78vh;width:auto;border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);animation:lbin .35s var(--ease) both}
@keyframes lbin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lb-box figcaption{display:flex;gap:16px;justify-content:space-between;width:100%;margin-top:14px;font-weight:700;font-size:15px}
.lb-n{color:var(--ink-3);font-weight:600}
.lb-box .tt-close{top:-54px;right:0}
.lb-nav{all:unset;cursor:pointer;position:absolute;top:calc(50% - 40px);width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy);background:var(--y);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.lb-nav:hover{transform:scale(1.08)}
.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-nav .i{width:24px;height:24px;stroke-width:2.4}
.lb-prev{left:14px}.lb-next{right:14px}

/* reviews */
.rating{display:flex;align-items:center;gap:20px;margin-top:28px}
.rating-n{font-size:84px;line-height:.9;color:var(--y);font-weight:800}
.rating-meta{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--ink-2)}
.stars{display:flex;gap:3px;color:var(--y)}
.stars .i-fill{width:22px;height:22px}
.quote{position:relative;padding:clamp(28px,4vw,48px);border-radius:28px}
.quote.glass{--fill:linear-gradient(180deg,#18273E,#0A1A33 60%)}
.quote blockquote{margin:0}
.quote p{font-size:clamp(26px,3vw,38px);line-height:1.25;font-weight:600;text-wrap:pretty}
.quote figcaption{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:14px;color:var(--ink-3)}
.quote figcaption strong{display:block;color:var(--ink);font-size:16px}
.avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:linear-gradient(160deg,#19C3FF,#0A3CFF)}
.rev-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.rev-note{margin-top:18px;max-width:52ch;font-size:15px;color:var(--ink-3)}

/* faq */
.faq{display:grid;gap:10px}
.acc{position:relative;border-radius:20px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 rgba(0,0,0,0);transition:background-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.acc:hover{background:rgba(255,255,255,.055)}
/* open item: lifts slightly, a yellow line draws down its left edge, the answer fades in after the panel opens */
.acc::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--y);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.acc.is-open{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 50px -28px rgba(0,0,0,.7);transform:translateY(-1px)}
.acc.is-open::before{transform:scaleY(1);transition-delay:.12s}
.acc-inner p{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .45s var(--ease)}
.acc.is-open .acc-inner p{opacity:1;transform:none;transition:opacity .5s ease .18s,transform .6s var(--ease) .18s}
.acc h3{margin:0;font-size:inherit}
.acc-q{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:14px 24px;font:700 17px/1.4 'Open Sans',sans-serif;color:var(--ink)}
.acc-q:focus-visible{outline:2px solid var(--y);outline-offset:-2px;border-radius:20px}
.chev{color:var(--y);transition:transform .4s var(--ease)}
.acc-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.chev{width:32px;height:32px;padding:6px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,202,3,.4);transition:transform .5s var(--ease),background-color .4s,color .4s}
.acc.is-open .chev{background:var(--y);color:var(--navy);box-shadow:none}
.acc-body.open{grid-template-rows:1fr}
.acc-inner{overflow:hidden;min-height:0}
.acc-inner p{padding:0 24px 22px;max-width:62ch;color:var(--ink-2);font-size:16px}

/* visit */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:stretch}
.v-addr{margin-top:22px;font-size:22px;line-height:1.4;font-weight:700}
.hours{margin-top:28px;width:100%;max-width:420px;border-collapse:collapse;font-size:16px}
.hours th{text-align:left;font-weight:400;color:var(--ink-2);padding:7px 0}
.hours td{text-align:right;font-weight:700;padding:7px 0;font-variant-numeric:tabular-nums}
.hours td.closed{color:var(--ink-3)}
.hours tr.today th,.hours tr.today td{color:var(--y);font-weight:800}
.hours tr.today th::after{content:" (today)";font-weight:600}
.contact{display:grid;gap:16px;margin-top:30px}
.c-row{display:flex;gap:14px;align-items:flex-start;text-decoration:none;font-size:14px;color:var(--ink-3)}
.c-row .i{color:var(--y);margin-top:3px}
.c-row strong{display:block;color:var(--ink);font-size:17px}
.c-row:hover strong{text-decoration:underline;text-underline-offset:4px}
.v-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.map{position:relative;min-height:440px;border-radius:26px;overflow:hidden;background:var(--deep);box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* footer */
.foot{background:var(--deep);border-top:1px solid rgba(255,255,255,.07)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:44px}
.foot-logo{height:38px;width:auto}
.foot-meta{font-size:14px;line-height:1.7;color:var(--ink-3)}
.foot-meta a{color:var(--ink-2)}
.soc{display:flex;gap:10px}
.soc a{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);transition:border-color .3s,color .3s}
.soc a:hover{border-color:var(--y);color:var(--y)}

/* TikTok popup */
.tt-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.tt-modal[hidden]{display:none}
.tt-backdrop{position:absolute;inset:0;background:rgba(2,13,34,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade .3s ease both}
.tt-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(360px,100%)}
.tt-frame{position:relative;width:100%;aspect-ratio:9/16;max-height:78vh;border-radius:18px;overflow:hidden;background:#000}
.tt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transition:opacity .35s}
/* while TikTok loads: the video's own cover + a spinner instead of a black box */
.tt-frame{background-size:cover;background-position:center}
.tt-frame.loading iframe{opacity:0}
.tt-frame.loading::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:var(--y);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tt-close{all:unset;cursor:pointer;position:absolute;top:-54px;right:0;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.tt-close:hover{background:rgba(255,255,255,.2)}
.tt-close:focus-visible{outline:2px solid var(--y);outline-offset:2px}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* mobile sticky bar */
.mbar{display:none}

/* ---------- tablet ---------- */
@media (max-width:980px){
  .nav{display:none}
  .top-wa{margin-left:auto}
  .hero-in{--hc:minmax(0,1fr) minmax(0,1fr);grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "media" "act";row-gap:40px}
  .hero-h{max-width:16ch;font-size:clamp(42px,6.8vw,62px)}
  .hero-act{row-gap:28px}
  .ticket{max-width:none}
  .proof-card{padding:6px 24px}
}
@media (max-width:820px){
  .hero-act{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .split-head{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .steps li:nth-child(2)::before{right:0}
  .also-list{grid-template-columns:minmax(0,1fr)}
  .visit{grid-template-columns:minmax(0,1fr)}
  .map{min-height:360px}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  body{font-size:16px}
  .top-in{min-height:64px;gap:12px}
  .brand img{height:36px}
  .top-wa{width:46px;height:46px;min-height:0;padding:0}
  .top-wa .i{width:24px;height:24px}
  .top-wa-text{display:none}

  .hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "media" "act";row-gap:28px;padding-block:36px 56px}
  .hero-h{font-size:clamp(34px,10.2vw,46px);max-width:none}
  .hero-sub{margin-top:18px}
  .pv{border-radius:20px}
  .ticket{max-width:none;transform:none;animation-name:drop-m}
  @keyframes drop-m{0%{opacity:0;transform:translateY(-20px) rotate(-3deg)}100%{opacity:1;transform:none}}
  .t-top{padding:22px 22px 20px}
  .t-stub{padding:20px 22px 22px}
  .t-stub .pill{flex:1 1 100%}
  .t-dir{margin-inline:auto}
  .hero-act{row-gap:22px}
  .proof-card{padding:4px 20px;border-radius:22px}
  .proof li{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:14px 0}
  .p-ic{width:40px;height:40px;border-radius:12px}
  .p-ic .i,.p-ic .i-fill{width:20px;height:20px}
  .proof strong{font-size:16.5px}
  .proof .p-sub{font-size:13.5px}
  /* phones: glows much wider than the screen and centred on it, so no glow edge ever crosses the view */
  .hero-glow .g-blue{width:1700px;height:1700px;left:calc(50% - 650px);right:auto;top:-380px}
  .hero-glow .g-orange{width:900px;height:900px;left:calc(50% - 150px);right:auto;top:-520px}
  .hero-glow .g-sky{width:1500px;height:1500px;left:calc(50% - 1050px);bottom:-700px}
  .hero-glow i{animation:none}

  .sec{padding-block:64px}
  .svc-list{gap:28px}
  .svc{grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:start}
  .tile{width:72px;height:72px;border-radius:20px}
  .tile .i{width:36px;height:36px}
  .svc h3{font-size:23px}
  .also{margin-top:40px;padding:24px 20px}

  .steps{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:32px}
  .steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-top:0}
  .steps li::before{display:none}
  .step-n{grid-row:span 2;font-size:44px;line-height:1}
  .steps h3{margin-top:2px}
  .steps p{margin-top:4px}
  .also-list li{flex-direction:row}

  .row-tools{width:100%;justify-content:space-between}
  .vs-arrows{display:flex}
  .vstrip-wrap{padding-inline:0;margin-top:28px}
  .vstrip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 8px;scroll-padding-inline:var(--gut);scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
  .vstrip::-webkit-scrollbar{display:none}
  .vstrip li{flex:0 0 64%;scroll-snap-align:start}

  .photos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:10px;margin-top:32px}
  .ph{border-radius:16px}
  .ph-main{grid-column:1/-1;grid-row:span 2}
  .ph figcaption{padding:30px 12px 10px;font-size:12.5px}

  .rating-n{font-size:80px}
  .quote{border-radius:22px}
  .rev-actions .pill{flex:1 1 100%}

  .acc-q{padding:12px 18px;font-size:16px;min-height:60px}
  .acc-inner p{padding:0 18px 18px;font-size:15px}

  .v-actions .pill{flex:1 1 100%}
  .map{min-height:300px}

  .foot-in{flex-direction:column;justify-content:center;text-align:center;gap:20px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .soc{justify-content:center}
  .lb-nav{top:auto;bottom:-6px;width:46px;height:46px}
  .lb-prev{left:auto;right:58px}.lb-next{right:0}
  .lb-box figcaption{flex-direction:column;gap:2px;padding-right:120px;text-align:left}

  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(2,13,34,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.08);transform:translateY(110%);transition:transform .45s var(--ease)}
  .mbar.show{transform:none}
  .mbar .pill{width:100%;min-height:48px}
}
@media (max-width:360px){
  .brand img{height:32px}
  .t-status{font-size:24px}
}

/* touch: nothing depends on hover */
@media (hover:none){
  /* "Watch full size" hidden until the video is tapped; a tap on it then opens the popup */
  .pv-big{min-height:44px;padding:0 18px;font-size:14px;pointer-events:none}
  .pv.awake .pv-big{opacity:1;transform:none}
  /* keep the playing video smooth: no constantly repainting effects on phones/tablets */
  .glass,.glass::after{animation:none}
  .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(2,13,34,.95)}
  .vid:hover .vthumb::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  .vid:hover .vplay{transform:none}
  .ph:hover img{transform:none}
  .ph:hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .ticket{transform:rotate(-1.2deg)}
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){.ticket{transform:none}}