/* Sandbanks Pressure Washing. One environment: dusk charcoal, champagne gold. Phone first. */

/* fonts served from this site (no visitor data sent to font services) */
@font-face{font-family:"Jost";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/jost.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/manrope.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --canvas:#101317;
  --panel:#181c22;
  --panel-2:#1e232a;
  --accent:#d2c39a;
  --accent-hover:#e4d8b3;
  --accent-muted:rgba(210,195,154,.18);
  --accent-ink:#14161a;
  --text-secondary:#a7adb6;
  --text-primary:#eef0f2;
  --line:rgba(238,240,242,.12);
  --line-strong:rgba(238,240,242,.34);

  --f-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --tshadow:0 1px 2px rgba(5,6,9,.95),0 4px 18px rgba(5,6,9,.75);
  --gutter:clamp(18px,5vw,80px);
  --radius:14px;
  --dock-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);color:var(--text-primary);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
html.js body{opacity:0;transition:opacity .9s var(--ease-out)}
html.js body.loaded{opacity:1}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;background:var(--accent);color:var(--accent-ink);border-radius:8px;font-weight:600;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
#main:focus{outline:none}

/* ---------- The environment layer ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env-glow{position:absolute;inset:-20%;background:
  radial-gradient(40% 35% at 20% 20%,rgba(210,195,154,.07),transparent 70%),
  radial-gradient(45% 40% at 85% 70%,rgba(96,120,150,.09),transparent 70%);
  animation:envDrift 90s var(--ease-io) infinite alternate;animation-delay:-30s}
.env-mist{position:absolute;inset:-10%;background:
  radial-gradient(30% 20% at 70% 25%,rgba(238,240,242,.035),transparent 70%),
  radial-gradient(25% 18% at 30% 75%,rgba(238,240,242,.03),transparent 70%);
  animation:envMist 70s linear infinite;animation-delay:-20s}
.env-grain{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes envDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
@keyframes envMist{from{transform:translate3d(-6%,0,0)}to{transform:translate3d(6%,0,0)}}

/* ---------- Nav ---------- */
.nav{
  position:fixed;z-index:50;top:0;left:0;right:0;height:72px;
  display:flex;align-items:center;gap:28px;padding:0 var(--gutter);
  padding-top:env(safe-area-inset-top);
  transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav::before{content:"";position:absolute;inset:0 0 -20px;z-index:-1;background:linear-gradient(to bottom,rgba(8,10,13,.72),rgba(8,10,13,0));transition:opacity .5s var(--ease-out);pointer-events:none}
.nav.solid{background:rgba(14,17,21,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.solid::before{opacity:0}
.nav-logo{display:block;flex:none;text-decoration:none}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{position:relative;text-decoration:none;font-size:14px;font-weight:500;color:rgba(238,240,242,.78);padding:6px 0;transition:color .3s var(--ease-out);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-actions{display:flex;align-items:center;gap:18px}
.nav-call{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-mono);font-size:13px;color:var(--text-primary);padding:6px 0}
.nav-call-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;color:var(--accent);background:rgba(8,9,13,.35);transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
.nav-call:hover .nav-call-icon{border-color:var(--accent);transform:rotate(-12deg)}
.nav-cta{
  position:relative;display:inline-flex;align-items:center;height:40px;padding:0 18px;
  text-decoration:none;font-weight:600;font-size:14px;color:var(--accent-ink);
  background:var(--accent);border-radius:999px;overflow:hidden;
  transition:transform .35s var(--ease-out),background-color .35s var(--ease-out);
}
.nav-cta span{position:relative}
.nav-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease-out)}
.nav-cta:hover{background:var(--accent-hover)}
.nav-cta:hover::before{transform:translateX(120%)}
.nav-cta:active{transform:scale(.97)}

/* ---------- The films ---------- */
.film{position:relative}
.film-a{height:560vh}
.film-b{height:1150vh}
/* Fixed full-screen height. 100dvh resized the frame every time a phone's address bar slid in or out, which made the film jump. */
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--canvas);isolation:isolate;--fx:50%}
/* the strip of the frame that can sit under a phone's address bar, so captions stay above it */
@supports (height:100lvh){.stage{--bar:calc(100lvh - 100svh)}}
.poster,.still{position:absolute;inset:0;background-size:cover;background-position:var(--fx) 50%}
.stills{position:absolute;inset:0;display:none}
.stage.use-stills .stills{display:block}
.still{opacity:0;transition:opacity .7s var(--ease-out)}
.still.on{opacity:1}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx) 50%;opacity:0;transform:translateZ(0);will-change:transform;transition:opacity .9s var(--ease-out)}
.stage.video-ready .film-video{opacity:1}
.stage.video-failed .film-video{display:none}
.scrim,.scrim-r{position:absolute;inset:0;pointer-events:none}
.scrim{background:
  radial-gradient(ellipse 62% 70% at 4% 96%,rgba(6,7,10,.7) 0%,rgba(6,7,10,.46) 42%,rgba(6,7,10,0) 76%),
  radial-gradient(ellipse 120% 90% at 55% 40%,rgba(8,10,14,0) 38%,rgba(8,10,14,.6) 100%),
  linear-gradient(to bottom,rgba(8,10,14,.5) 0%,rgba(8,10,14,0) 18%,rgba(8,10,14,0) 62%,rgba(8,10,14,.55) 100%)}
.scrim-r{opacity:var(--rv,0);background:radial-gradient(ellipse 62% 70% at 96% 96%,rgba(6,7,10,.72) 0%,rgba(6,7,10,.46) 42%,rgba(6,7,10,0) 76%)}

/* water-mist pass at each scene change */
.mist{position:absolute;inset:-10%;pointer-events:none;opacity:calc(var(--mist,0) * .55);transform:translate3d(calc(var(--mist,0) * -3%),0,0) scale(calc(1 + var(--mist,0) * .06))}
.mist span{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(230,236,240,.55),rgba(230,236,240,0))}
.mist span:nth-child(1){width:70%;height:60%;left:5%;top:15%}
.mist span:nth-child(2){width:55%;height:50%;left:45%;top:35%}
.mist span:nth-child(3){width:45%;height:45%;left:25%;top:50%}

/* caption bands */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  --k:0;
  --ks:clamp(0,(var(--k) - .42) * 2.6,1);
  --kb:clamp(0,(var(--k) - .66) * 3.4,1);
  position:absolute;left:var(--gutter);bottom:calc(clamp(110px,15vh,170px) + var(--bar,0px));
  width:min(620px,46vw);opacity:0;visibility:hidden;isolation:isolate;will-change:opacity;
  text-shadow:var(--tshadow);
}
.band.live{visibility:visible}
.band::before{
  content:"";position:absolute;inset:-28% -34% -30% -22%;z-index:-1;pointer-events:none;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 64% 62% at 40% 44%,rgba(6,7,10,.8) 0%,rgba(6,7,10,.6) 46%,rgba(6,7,10,0) 78%);
}
.band[data-pos="rb"]{left:auto;right:var(--gutter);text-align:right}
.band[data-pos="rb"]::before{inset:-28% -22% -30% -34%;background:radial-gradient(ellipse 64% 62% at 60% 44%,rgba(6,7,10,.8) 0%,rgba(6,7,10,.6) 46%,rgba(6,7,10,0) 78%)}
.band[data-pos="rb"] .band-sub{margin-left:auto}
.band-title{font-family:var(--f-display);font-weight:600;font-size:clamp(2.5rem,4.7vw,4.9rem);line-height:1.02;letter-spacing:-.018em}
.band-sub{margin-top:20px;max-width:40ch;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.55;color:rgba(238,240,242,.92);opacity:var(--ks);transform:translate3d(0,calc((1 - var(--ks)) * 12px),0)}
.band-cta{margin-top:28px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;opacity:var(--kb);transform:translate3d(0,calc((1 - var(--kb)) * 12px),0);pointer-events:auto}
.band .cta-hero,.band .cta-settle,.band .cta-call{text-shadow:none}
.band:not(.live) .band-cta{pointer-events:none}
.band-settle{width:min(720px,56vw)}
.band-settle::before{background:radial-gradient(ellipse 66% 64% at 40% 46%,rgba(6,7,10,.86) 0%,rgba(6,7,10,.66) 48%,rgba(6,7,10,0) 80%)}
.band-settle .band-title{font-size:clamp(3rem,6.4vw,6.6rem);line-height:1}

/* split text */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vis{display:block}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
[data-fx="rise"] .w,[data-fx="settle"] .w{--kc:clamp(0,(var(--k) - var(--th)) * 2.8,1);opacity:var(--kc);transform:translate3d(0,calc((1 - var(--kc)) * .55em),0)}
[data-fx="drift"] .w{--kc:clamp(0,(var(--k) - var(--th)) * 2.8,1);opacity:var(--kc);transform:translate3d(0,calc((1 - var(--kc)) * -26px),0)}
[data-fx="snap"] .c{--kc:clamp(0,(var(--k) - var(--cto)) * 3.2,1);opacity:var(--kc);transform:translate3d(calc((1 - var(--kc)) * var(--jx)),0,0)}
[data-fx="scatter"] .c{--kc:clamp(0,(var(--k) - var(--cth)) * 2.6,1);opacity:var(--kc);transform:translate3d(calc((1 - var(--kc)) * var(--jx)),calc((1 - var(--kc)) * var(--jy)),0) rotate(calc((1 - var(--kc)) * var(--jr)))}
[data-fx="blur"] .band-title{position:relative}
[data-fx="blur"] .vis-soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k))}
[data-fx="blur"] .vis-sharp{opacity:var(--k);transform:scale(calc(.97 + .03 * var(--k)))}
[data-fx="punch"] .w{--kc:clamp(0,(var(--k) - var(--th)) * 3,1);--ks2:clamp(0,(var(--k) - var(--th) - var(--sd,.1)) * var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12)) * var(--kc) - var(--ov,.12) * var(--ks2)));transform-origin:50% 70%}
[data-fx="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6;color:var(--accent)}

/* hero CTAs */
.cta-hero{display:inline-flex;flex-direction:column;gap:8px;text-decoration:none;font-weight:600;font-size:17px;color:var(--text-primary);padding:6px 0}
.cta-hero-line{display:block;height:3px;width:100%;border-radius:2px;background:linear-gradient(90deg,#b9a978,var(--accent) 40%,#f1e6c4 60%,var(--accent));transform-origin:left;transition:transform .6s var(--ease-out)}
.cta-hero:hover .cta-hero-line{transform:scaleX(1.18)}
.cta-settle{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px;border-radius:999px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;font-size:16px;box-shadow:0 10px 40px rgba(0,0,0,.35);transition:background-color .35s var(--ease-out),transform .35s var(--ease-out)}
.cta-settle svg{transition:transform .45s var(--ease-out)}
.cta-settle:hover{background:var(--accent-hover)}
.cta-settle:hover svg{transform:translateX(5px)}
.cta-settle:active{transform:scale(.97)}
.cta-call{font-family:var(--f-mono);font-size:14px;text-decoration:none;color:var(--text-primary);border-bottom:1px solid var(--line-strong);padding:4px 0;transition:border-color .3s var(--ease-out)}
.cta-call:hover{border-color:var(--accent)}

/* kerb appeal meter */
.hud{position:absolute;left:var(--gutter);top:94px;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:16px;background:rgba(10,12,16,.78);border:1px solid rgba(238,240,242,.14)}
.ring{width:40px;height:40px;transform:rotate(-90deg);flex:none}
.ring circle{fill:none;stroke-width:3.4}
.ring-track{stroke:rgba(238,240,242,.16)}
.ring-fill{stroke:var(--accent);stroke-linecap:round;stroke-dashoffset:var(--ld,126);transition:stroke-dashoffset .5s var(--ease-out)}
.hud-txt{display:grid;line-height:1.15}
.hud-k,.hud-c{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.hud-c{color:var(--accent)}
.hud-score{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--text-secondary)}
.hud-n{font-size:21px;color:var(--text-primary);font-weight:600;font-variant-numeric:tabular-nums}

.static-hero{display:none}
.jobs{display:none}

@media (max-height:560px) and (min-width:821px){.hud{display:none}}

/* ---------- Shared section bits ---------- */
.sec{position:relative;padding:clamp(88px,13vw,170px) var(--gutter)}
.h2{font-family:var(--f-display);font-weight:600;font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.03;letter-spacing:-.018em}
.lede{margin-top:16px;max-width:46ch;font-size:clamp(1.02rem,1.3vw,1.2rem);color:var(--text-secondary)}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.note{margin-top:12px;font-size:14px;color:var(--text-secondary)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;color:var(--text-primary);padding:7px 12px;border-radius:10px;background:rgba(8,9,13,.62);border:1px solid rgba(150,156,170,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.chip b{font-weight:400;color:var(--accent)}
.gold-line{display:block;width:120px;height:3px;margin-top:20px;border-radius:2px;background:linear-gradient(90deg,#b9a978,var(--accent) 40%,#f3e9c8 55%,var(--accent) 70%,#b9a978);transform-origin:left}
.gold-rule{display:block;height:2px;margin:26px 0;border-radius:2px;background:linear-gradient(90deg,var(--accent),rgba(210,195,154,0));transform-origin:left;animation:ruleGlow 6s var(--ease-io) infinite alternate;animation-delay:-2s}
@keyframes ruleGlow{from{opacity:.55}to{opacity:1}}

/* entrances, prefixed with the container state so they win */
html.js [data-reveal] .r{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.js [data-reveal] .gold-line.r{transform:scaleX(0)}
html.js [data-reveal].in .r{opacity:1;transform:none}
html.js [data-reveal].in .r:nth-child(2){transition-delay:.09s}
html.js [data-reveal].in .r:nth-child(3){transition-delay:.18s}
html.js [data-reveal].in .r:nth-child(4){transition-delay:.27s}
html.js [data-reveal].in .r:nth-child(5){transition-delay:.36s}
html.js [data-reveal].in .r:nth-child(6){transition-delay:.45s}
html.js [data-reveal].in.done .r:nth-child(n){transition-delay:0s}
html.js .drive-head.in .tools.r{transition-delay:.2s}
html.js .drive-head.in.done .tools.r{transition-delay:0s}

/* ---------- Clean this driveway ---------- */
.drive{background:linear-gradient(to bottom,var(--canvas),rgba(16,19,23,0) 30%)}
.drive-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.drive-head > div:first-child{max-width:640px}
.tools{display:inline-flex;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.tool{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .35s var(--ease-out),color .35s var(--ease-out)}
.tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.game{
  position:relative;margin-top:36px;aspect-ratio:16/9;max-height:78vh;width:100%;
  border-radius:var(--radius);overflow:hidden;background:#2a2e33;
  border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.45);
  cursor:none;touch-action:none;user-select:none;-webkit-user-select:none;
}
.game-clean,.game-dirty{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game-dirty{transition:opacity 1.2s var(--ease-out)}
.game.complete .game-dirty{opacity:0}
/* once the driveway is clean, a swipe on it scrolls the page again */
.game.complete{touch-action:pan-y}
.spots{position:absolute;inset:0;pointer-events:none}
.spot{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:5px 9px;border-radius:999px;background:rgba(8,9,13,.68);border:1px solid rgba(238,240,242,.2);color:var(--text-primary);transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out),opacity .6s var(--ease-out)}
.spot::before{content:"";width:7px;height:7px;border-radius:50%;background:#e2a33a;box-shadow:0 0 0 3px rgba(226,163,58,.22)}
.spot.done{background:rgba(210,195,154,.92);color:var(--accent-ink);border-color:transparent}
.spot.done::before{background:var(--accent-ink);box-shadow:none}
.game.complete .spot{opacity:0}
.game-cursor{position:absolute;left:0;top:0;width:var(--cur,clamp(84px,11vw,132px));aspect-ratio:1;margin:calc(var(--cur,clamp(84px,11vw,132px)) / -2) 0 0 calc(var(--cur,clamp(84px,11vw,132px)) / -2);pointer-events:none;opacity:0;transition:opacity .35s var(--ease-out);will-change:transform}
.game.lance .game-cursor{--cur:clamp(54px,6vw,72px)}
.game-cursor svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.cur-lance{display:none}
.game.lance .cur-surface{display:none}
.game.lance .cur-lance{display:block}
.game.hover .game-cursor,.game.active .game-cursor{opacity:1}
.game-bar{transform-origin:60px 60px}
.game.spraying .game-bar{animation:spin .35s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.game-spray{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(235,240,244,0) 55%,rgba(235,240,244,.38) 72%,rgba(235,240,244,0) 100%);opacity:0;transform:scale(.9);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.game.spraying .game-spray{opacity:1;transform:scale(1)}
.game-hud{position:absolute;left:14px;top:14px;display:flex;gap:8px;pointer-events:none}
.game-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:8px 14px;border-radius:999px;background:rgba(8,9,13,.68);border:1px solid rgba(238,240,242,.16);pointer-events:none;transition:opacity .5s var(--ease-out)}
.game-hint::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--accent);vertical-align:1px;animation:hintPulse 2.6s var(--ease-io) infinite;animation-delay:-1s}
@keyframes hintPulse{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.2);opacity:1}}
.game.started .game-hint{opacity:0}
.game-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:24px;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(8,9,13,.62),rgba(8,9,13,0) 80%);opacity:0;visibility:hidden;transition:opacity .9s var(--ease-out) .5s,visibility 0s linear 1.4s;cursor:auto}
.game.complete .game-done{opacity:1;visibility:visible;transition:opacity .9s var(--ease-out) .5s,visibility 0s}
.game-done-title{font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.08;text-shadow:var(--tshadow);max-width:18ch}
.cta-ticket{
  position:relative;display:inline-flex;align-items:center;height:54px;padding:0 30px;
  background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;
  border-radius:8px;transition:transform .4s var(--ease-spring),background-color .3s var(--ease-out);
  -webkit-mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
}
.cta-ticket:hover{background:var(--accent-hover);transform:rotate(-1.5deg) scale(1.03)}
.cta-ticket:active{transform:scale(.97)}
.game-controls{display:flex;gap:24px;margin-top:16px}
.link-btn{background:none;border:0;padding:8px 0;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--line-strong);transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.link-btn:hover{color:var(--text-primary);border-color:var(--accent)}
#game-auto{color:var(--text-primary);border-color:var(--accent)}

.spot-cards{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.spot-cards li{position:relative;padding:20px 18px 22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);transition:border-color .6s var(--ease-out),background-color .6s var(--ease-out),transform .6s var(--ease-spring)}
.spot-cards h3{font-family:var(--f-display);font-weight:600;font-size:1.1rem;line-height:1.2;padding-right:28px}
.spot-cards p{margin-top:6px;color:var(--text-secondary);font-size:.92rem;line-height:1.5}
.sc-tick{position:absolute;right:16px;top:18px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out)}
.sc-tick::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .45s var(--ease-spring)}
.spot-cards li.lit{border-color:rgba(210,195,154,.7);background:linear-gradient(160deg,rgba(210,195,154,.12),var(--panel) 60%);transform:translateY(-3px)}
.spot-cards li.lit .sc-tick{background:var(--accent);border-color:var(--accent)}
.spot-cards li.lit .sc-tick::after{transform:rotate(45deg) scale(1)}

/* ---------- Before / after ---------- */
.ba-sec{padding-left:0;padding-right:0}
.ba-head{padding:0 var(--gutter);max-width:900px}
.ba{position:relative;margin-top:44px;width:100%;aspect-ratio:16/9;max-height:88vh;overflow:hidden;--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 24px rgba(210,195,154,.5);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;display:grid;place-items:center;border-radius:50%;background:var(--canvas);border:2px solid var(--accent);color:var(--accent);box-shadow:0 8px 30px rgba(0,0,0,.45);transition:transform .35s var(--ease-spring)}
.ba:hover .ba-knob{transform:scale(1.08)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:100vh}
.ba-range::-moz-range-thumb{width:64px;height:100vh;border:0;background:transparent}
.ba:focus-within .ba-knob{outline:2px solid var(--accent);outline-offset:4px}
.ba-tag{position:absolute;top:16px;pointer-events:none}
.ba-tag-l{left:var(--gutter)}
.ba-tag-r{right:var(--gutter)}

/* ---------- Reviews ---------- */
.rev-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:clamp(32px,5vw,80px);align-items:start}
.rev-side{position:sticky;top:120px}
.rev-score{display:flex;align-items:center;gap:16px;margin-top:26px}
.rev-big{font-family:var(--f-display);font-weight:600;font-size:clamp(3.4rem,6vw,5.2rem);line-height:.9;letter-spacing:-.03em;color:var(--text-primary)}
.rev-meta{display:grid;gap:4px}
.rev-count{font-size:14px;color:var(--text-secondary)}
.stars{color:var(--accent);letter-spacing:.12em;font-size:18px;line-height:1}
.rev-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 0;font-weight:600;text-decoration:none;color:var(--text-primary);border-bottom:2px solid var(--accent);transition:gap .4s var(--ease-out),color .3s var(--ease-out)}
.rev-link svg{color:var(--accent);transition:transform .4s var(--ease-out)}
.rev-link:hover{gap:14px;color:var(--accent-hover)}
.rev-link:hover svg{transform:translate(2px,-2px)}
.rev-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rev .stars{font-size:15px;margin-bottom:16px}
.rev blockquote p::before{content:"“"}
.rev blockquote p::after{content:"”"}
.rev{position:relative;display:flex;flex-direction:column;padding:34px 30px 28px;border-radius:var(--radius);background:linear-gradient(170deg,var(--panel-2),var(--panel) 70%);border:1px solid var(--line);overflow:hidden;transition:border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.rev:hover{border-color:rgba(210,195,154,.45);transform:translateY(-3px)}
.rev::after{content:"";position:absolute;left:30px;right:30px;top:0;height:2px;background:linear-gradient(90deg,var(--accent),rgba(210,195,154,0))}
.rev blockquote{margin:0;flex:1}
.rev blockquote p{font-family:var(--f-display);font-weight:500;font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.38;color:var(--text-primary)}
.rev-who{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.rev-name{font-weight:600;white-space:nowrap}
.rev-job{text-align:right}
.rev-job{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:900px){
  .rev-grid{grid-template-columns:1fr}
  .rev-side{position:relative;top:0}
}
@media (max-width:820px){
  .rev-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:28px -20px 0;padding:4px 20px 10px;scrollbar-width:none}
  .rev-list::-webkit-scrollbar{display:none}
  .rev{flex:0 0 82%;scroll-snap-align:start;padding:28px 22px 22px}
}

/* ---------- Pressure dial ---------- */
.psi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,100px);align-items:center}
.psi-dial{position:relative;max-width:520px;width:100%;justify-self:center}
.dial{width:100%;height:auto;overflow:visible}
.dial-track{fill:none;stroke:rgba(238,240,242,.1);stroke-width:14;stroke-linecap:round}
.dial-band{fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:round;stroke-dasharray:8 1000;stroke-dashoffset:0;opacity:0;transition:stroke-dasharray .9s var(--ease-out),stroke-dashoffset .9s var(--ease-out),opacity .5s var(--ease-out);filter:drop-shadow(0 0 10px rgba(210,195,154,.35))}
.dial-ticks line{stroke:rgba(238,240,242,.35);stroke-width:1.4}
.dial-ticks line.major{stroke:rgba(238,240,242,.6);stroke-width:2}
.dial-ticks text{fill:var(--text-secondary);font-family:var(--f-mono);font-size:10px;text-anchor:middle}
.dial-needle{transform-origin:160px 140px;transform:rotate(var(--ang,0deg));transition:transform 1.1s var(--ease-spring)}
.dial-needle line{stroke:var(--text-primary);stroke-width:3;stroke-linecap:round}
.dial-needle circle{fill:var(--canvas);stroke:var(--accent);stroke-width:3}
.dial-idle .dial-needle line{animation:needleIdle 5s var(--ease-io) infinite alternate;animation-delay:-1.5s;transform-origin:160px 140px}
@keyframes needleIdle{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}
.dial-read{position:absolute;left:0;right:0;bottom:4%;text-align:center}
.dial-num{display:block;font-family:var(--f-mono);font-size:clamp(1.1rem,2vw,1.6rem);color:var(--text-primary)}
.dial-cap{display:block;margin-top:6px;font-size:13px;color:var(--text-secondary)}
.psi-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.swatch{position:relative;min-height:46px;padding:12px 18px 12px 34px;border-radius:10px;cursor:pointer;background:var(--panel);border:1px solid var(--line);font-size:15px;font-weight:500;transition:border-color .35s var(--ease-out),background-color .35s var(--ease-out),transform .45s var(--ease-spring)}
.swatch::before{content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:3px;border:1.5px solid var(--text-secondary);transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),transform .45s var(--ease-spring)}
.swatch:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.swatch[aria-pressed="true"]{border-color:var(--accent);background:var(--panel-2)}
.swatch[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.psi-text{margin-top:24px;min-height:3.2em;max-width:44ch;font-size:1.1rem;color:var(--text-primary);border-left:2px solid var(--accent);padding-left:18px}

/* ---------- Price ---------- */
.price-head{max-width:820px}
.price-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:48px;align-items:start}
.price-form fieldset{border:0;margin:0 0 30px;padding:0}
.price-form legend{margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line-strong);font-size:15px;font-weight:500;color:var(--text-secondary);transition:color .3s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out),transform .4s var(--ease-spring)}
.pick span::before{content:"";width:0;height:2px;background:var(--accent-ink);border-radius:2px;transition:width .35s var(--ease-out)}
.pick:hover span{color:var(--text-primary);border-color:rgba(238,240,242,.6)}
.pick input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pick input:checked + span::before{width:10px}
.pick input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.pick input:disabled + span{opacity:.4}
.pick:active span{transform:scale(.96)}
.price-out{position:sticky;top:100px;padding:32px 30px;border-radius:var(--radius);background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid rgba(210,195,154,.28);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.price-num{margin-top:12px;font-family:var(--f-display);font-weight:600;font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-to{font-size:.5em;font-weight:500;color:var(--text-secondary)}
.price-jobs{margin-top:14px;color:var(--text-secondary);min-height:3.2em}
.cta-send{position:relative;display:block;width:100%;height:58px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:16px;cursor:pointer;overflow:hidden;transition:background-color .3s var(--ease-out),transform .3s var(--ease-out)}
.cta-send span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s var(--ease-out)}
.cta-send-b{transform:translateY(100%)}
.cta-send:hover{background:var(--accent-hover)}
.cta-send:hover .cta-send-a{transform:translateY(-100%)}
.cta-send:hover .cta-send-b{transform:translateY(0)}
.cta-send:active{transform:scale(.98)}

/* ---------- Promise ---------- */
.promise{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start}
.promise-h{position:sticky;top:120px;font-family:var(--f-display);font-weight:600;font-size:clamp(3rem,8vw,7.4rem);line-height:.96;letter-spacing:-.025em}
.promise-h .r{display:inline-block}
.promise-h .r:last-child{color:var(--accent)}
.promise-list{list-style:none;margin:0;padding:0}
.promise-list li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.promise-list li:last-child{border-bottom:1px solid var(--line)}
.pn{font-family:var(--f-mono);font-size:13px;color:var(--accent)}
.promise-list h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.15}
.promise-list p{margin-top:8px;color:var(--text-secondary);max-width:46ch}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:120px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa h3{font:inherit}
.qa button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:64px;padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--f-display);font-weight:500;font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.3;transition:color .3s var(--ease-out)}
.qa button:hover{color:var(--accent-hover)}
.qa-x{position:relative;flex:none;width:18px;height:18px}
.qa-x::before,.qa-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--accent);border-radius:2px;transition:transform .45s var(--ease-out)}
.qa-x::after{transform:rotate(90deg)}
.qa button[aria-expanded="true"] .qa-x::after{transform:rotate(0deg)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.qa-a > div{overflow:hidden}
.qa-a p{padding:0 0 24px;max-width:58ch;color:var(--text-secondary);opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa.open .qa-a p{opacity:1;transform:none}

/* ---------- Quote ---------- */
.quote{position:relative;overflow:hidden;padding:clamp(100px,14vw,180px) var(--gutter)}
.quote-bg{position:absolute;inset:0;background:url("hero-ending.webp") 50% 40%/cover;opacity:.32;transform:scale(1.04)}
.quote-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(16,19,23,.96) 0%,rgba(16,19,23,.82) 45%,rgba(16,19,23,.6) 100%),linear-gradient(to bottom,var(--canvas),rgba(16,19,23,0) 20%,rgba(16,19,23,0) 80%,var(--canvas))}
.quote-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.steps{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px;counter-reset:none}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-family:var(--f-mono);font-size:14px}
.steps h3{font-family:var(--f-display);font-weight:600;font-size:1.15rem;line-height:1.25}
.steps p{margin-top:2px;color:var(--text-secondary);font-size:.95rem}
.quote-direct{list-style:none;margin:36px 0 0;padding:0;display:grid}
.quote-direct li{border-top:1px solid var(--line)}
.quote-direct li:last-child{border-bottom:1px solid var(--line)}
.quote-direct a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0;text-decoration:none;transition:padding .4s var(--ease-out),color .3s var(--ease-out)}
.quote-direct a:hover{padding-left:10px;color:var(--accent-hover)}
.direct-k{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.direct-v{font-family:var(--f-display);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.45rem)}
.qform{padding:clamp(22px,3vw,40px);border-radius:var(--radius);background:rgba(24,28,34,.92);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.field{margin-bottom:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--text-primary)}
.opt{font-weight:400;color:var(--text-secondary)}
.field input,.field textarea{width:100%;padding:13px 14px;border-radius:10px;border:1px solid rgba(238,240,242,.3);background:rgba(10,12,15,.6);color:var(--text-primary);font:inherit;font-size:16px;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.field textarea{resize:vertical;min-height:52px}
.field input::placeholder,.field textarea::placeholder{color:#8f96a0}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(10,12,15,.85)}
.field input[aria-invalid="true"]{border-color:#e58e7f}
.err{margin-top:6px;font-size:13px;color:#f0a597}
.err:empty{display:none}
.cta-submit{position:relative;width:100%;height:58px;margin-top:8px;border:0;border-radius:12px;cursor:pointer;background:var(--text-primary);color:var(--accent-ink);font-weight:600;font-size:16px;overflow:hidden;transition:transform .3s var(--ease-out)}
.cta-submit span{position:relative;z-index:1}
.cta-submit::before{content:"";position:absolute;inset:0;background:var(--accent);clip-path:circle(0% at 50% 100%);transition:clip-path .6s var(--ease-out)}
.cta-submit:hover::before{clip-path:circle(140% at 50% 100%)}
.cta-submit:active{transform:scale(.98)}
.form-note{margin-top:14px;font-size:13px;color:var(--text-secondary)}
.form-ok{margin-top:18px;padding:18px;border-radius:12px;border:1px solid rgba(210,195,154,.45);background:rgba(210,195,154,.08)}
.form-ok-t{font-weight:600;color:var(--accent-hover);margin-bottom:6px}
.form-ok a{color:var(--accent-hover)}
.form-ok.is-error{border-color:rgba(240,165,151,.45);background:rgba(240,165,151,.08)}
.form-ok.is-error .form-ok-t{color:#f0a597}
.cta-submit:disabled{cursor:progress;opacity:.75}
/* spam trap: hidden from people, bots fill it in */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}

/* ---------- Footer ---------- */
.foot{padding:72px var(--gutter) calc(40px + var(--dock-h));border-top:1px solid var(--line);background:rgba(10,12,15,.6)}
.foot-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-logo{width:min(320px,70vw);height:auto}
.foot-services{color:var(--text-secondary);max-width:34ch}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.foot-k{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.foot-cols a{text-decoration:none;border-bottom:1px solid var(--line-strong)}
.foot-cols a:hover{border-color:var(--accent)}
.foot-legal{margin-top:40px;font-size:13px;color:var(--text-secondary)}

/* ---------- Quick contact dock ---------- */
.dock{
  position:fixed;z-index:60;left:50%;bottom:16px;display:flex;align-items:center;gap:16px;
  padding:7px 7px 7px 22px;border-radius:999px;background:rgba(14,17,21,.96);
  border:1px solid var(--line);
  box-shadow:0 16px 50px rgba(0,0,0,.45);transform:translate3d(-50%,calc(100% + 40px),0);
  transition:transform .6s var(--ease-out);
}
.dock.show{transform:translate3d(-50%,0,0)}
.dock-note{display:flex;gap:12px;font-family:var(--f-mono);font-size:12px;color:var(--text-secondary);white-space:nowrap}
.dock-note span + span::before{content:"·";margin-right:12px;color:var(--accent)}
.dock-btn{display:none}
.dock-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease-out),transform .3s var(--ease-out)}
.dock-cta:hover{background:var(--accent-hover)}
.dock-cta:active{transform:scale(.97)}
.dock.price-mode .dock-cta{background:var(--text-primary)}

/* touch targets */
@media (pointer:coarse){
  .link-btn,.cta-call{min-height:44px;display:inline-flex;align-items:center}
  .nav-cta{min-height:44px}
}

/* ======================= PHONES AND SMALL TABLETS ======================= */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-actions{margin-left:auto}
  .spot-cards{grid-template-columns:1fr 1fr}
  .psi{grid-template-columns:1fr}
  .psi-copy{order:-1}
  .price-grid{grid-template-columns:1fr}
  .price-out{position:relative;top:0}
  .promise{grid-template-columns:1fr}
  .promise-h{position:relative;top:0}
  .faq{grid-template-columns:1fr}
  .faq-side{position:relative;top:0}
  .quote-inner{grid-template-columns:1fr}
}

@media (max-width:820px){
  :root{--dock-h:84px}
  .nav{height:62px;gap:12px}
  .nav-logo img{height:24px}
  .nav-cta,.nav-call-num{display:none}
  .nav-call-icon{width:40px;height:40px}

  .film-a{height:440vh}
  .film-b{height:920vh}

  /* captions sit low and wide, above the dock */
  .band,.band[data-pos="rb"],.band-settle{left:20px;right:20px;width:auto;text-align:left;bottom:calc(var(--dock-h) + 28px + env(safe-area-inset-bottom) + var(--bar,0px))}
  .band::before,.band[data-pos="rb"]::before{inset:-40% -20px -55% -20px;background:radial-gradient(ellipse 85% 70% at 40% 55%,rgba(6,7,10,.82) 0%,rgba(6,7,10,.62) 50%,rgba(6,7,10,0) 82%)}
  .band[data-pos="rb"] .band-sub{margin-left:0}
  .band-title{font-size:clamp(2.1rem,10.2vw,3.2rem);line-height:1.04}
  .band-settle .band-title{font-size:clamp(2.8rem,13vw,4rem)}
  .band-sub{margin-top:12px;font-size:1rem;max-width:34ch}
  .band-cta{margin-top:20px;gap:18px}
  .cta-settle{height:50px;padding:0 22px}
  .scrim{background:
    linear-gradient(to top,rgba(6,7,10,.9) 0%,rgba(6,7,10,.62) 26%,rgba(6,7,10,0) 54%),
    linear-gradient(to bottom,rgba(8,10,14,.6) 0%,rgba(8,10,14,0) 20%)}
  .scrim-r{display:none}
  .hud{top:72px;left:14px;gap:9px;padding:6px 12px 6px 6px;border-radius:14px}
  .ring{width:32px;height:32px}
  .hud-n{font-size:17px}
  .hud-k,.hud-c{font-size:9px}

  .sec{padding:84px 20px}
  .h2{font-size:clamp(2.1rem,9vw,3rem)}
  .drive-head{gap:18px}
  .tools{width:100%}
  .tool{flex:1;justify-content:center}
  .game{aspect-ratio:1/1;max-height:74svh;margin-top:22px;border-radius:12px}
  .spot{font-size:9.5px;padding:4px 7px;gap:5px}
  .spot::before{width:6px;height:6px}
  .game-controls{justify-content:space-between}
  .spot-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:24px -20px 0;padding:4px 20px 8px;scrollbar-width:none}
  .spot-cards::-webkit-scrollbar{display:none}
  .spot-cards li{flex:0 0 72%;scroll-snap-align:start}

  .ba{aspect-ratio:8/7;margin-top:30px}
  .ba-head{padding:0 20px}
  .ba-tag-l{left:16px}
  .ba-tag-r{right:16px}
  .psi-dial{max-width:420px}
  .psi-chips{gap:8px}
  .swatch{padding:11px 14px 11px 30px;font-size:14px}
  .swatch::before{left:12px}
  .pick span{min-height:44px;padding:0 15px;font-size:14px}
  .price-out{padding:26px 22px}
  .promise-list li{grid-template-columns:40px 1fr;padding:22px 0}
  .quote{padding:90px 20px}
  .field-row{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}

  /* the dock becomes a full-width thumb bar */
  .dock{left:0;right:0;bottom:0;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;border-bottom:0;transform:translate3d(0,110%,0)}
  .dock.show{transform:translate3d(0,0,0)}
  .dock-note{display:none}
  .dock-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:none;width:62px;height:54px;border-radius:12px;border:1px solid var(--line-strong);text-decoration:none;font-size:11px;font-weight:600;color:var(--text-primary)}
  .dock-btn svg{color:var(--accent)}
  .dock-cta{flex:1;height:54px;border-radius:12px;font-size:15px}
}

@media (max-width:380px){
  .dock-btn{width:54px}
  .dock-cta{font-size:14px;padding:0 12px}
  .hud-k{display:none}
}

/* pause every loop when the tab is hidden or a section is off screen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}

/* ======== THE STATIC-HERO GATE: reduced motion (must match site.js) ======== */
@media (prefers-reduced-motion: reduce){
  html.js body{opacity:1;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html.js [data-reveal] .r{opacity:1;transform:none}
  html.js [data-reveal] .gold-line.r{transform:none}
  .film-a{height:auto}
  .film-a .stage{position:relative;height:auto;min-height:100svh}
  .film-b{display:none}
  .film-video,.bands,.hud,.mist,.stills,.scrim-r{display:none!important}
  .film-a .poster{background-image:url("hero-ending.webp");background-position:50% 40%}
  .film-a .scrim{background:linear-gradient(to bottom,rgba(8,10,14,.55) 0%,rgba(8,10,14,.1) 30%,rgba(8,10,14,.35) 55%,rgba(16,19,23,.96) 88%,var(--canvas) 100%)}
  .static-hero{display:flex;position:relative;z-index:2;min-height:100svh;align-items:flex-end;padding:120px var(--gutter) 56px}
  .static-copy{max-width:560px;text-shadow:var(--tshadow)}
  .static-title{font-family:var(--f-display);font-weight:600;font-size:clamp(2.4rem,9vw,4.4rem);line-height:1.03;letter-spacing:-.015em}
  .static-sub{margin-top:16px;font-size:1.05rem;color:rgba(238,240,242,.9);max-width:36ch}
  .static-actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  .cta-static{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;text-shadow:none}
  .cta-static-call{display:inline-flex;align-items:center;height:52px;padding:0 4px;font-family:var(--f-mono);font-size:14px;text-decoration:none;border-bottom:1px solid var(--line-strong);text-shadow:none}
  .jobs{display:block;padding:24px var(--gutter) 40px}
}
.jobs-h{font-family:var(--f-display);font-weight:600;font-size:clamp(1.8rem,6vw,2.6rem);line-height:1.05;margin-bottom:22px}
.jobs-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.job{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.job img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.job div{padding:18px 18px 22px}
.job h3{font-family:var(--f-display);font-weight:600;font-size:1.35rem;line-height:1.15}
.job p{margin-top:8px;color:var(--text-secondary);font-size:.98rem}
@media (min-width:640px){.jobs-list{grid-template-columns:1fr 1fr}}

/* =====================================================================
   Version 3 additions
   ===================================================================== */

/* 1. Branded intro: the logo, then the gold clean line sweeps across */
.intro{display:none}
html.js .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:300;background:var(--canvas);transition:opacity .8s var(--ease-out),visibility 0s linear .8s}
html.js.intro-seen .intro{display:none}
.intro.done{opacity:0;visibility:hidden}
.intro-inner{position:relative;width:min(340px,68vw)}
.intro-inner img{width:100%;height:auto;opacity:0;transform:translate3d(0,10px,0);animation:introLogo .9s var(--ease-out) .1s forwards}
.intro-line{position:absolute;left:-6%;right:-6%;bottom:-18px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(210,195,154,0),var(--accent) 30%,#f6ecca 50%,var(--accent) 70%,rgba(210,195,154,0));transform:scaleX(0);transform-origin:left;animation:introLine 1s var(--ease-io) .35s forwards}
@keyframes introLogo{to{opacity:1;transform:none}}
@keyframes introLine{to{transform:scaleX(1)}}

/* 2. Page progress: a thin gold clean line along the top */
.progress{position:fixed;z-index:56;left:0;right:0;top:0;height:2px;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,#b9a978,var(--accent),#f3e9c8);transform:scaleX(var(--pg,0));transform-origin:left;box-shadow:0 0 10px rgba(210,195,154,.55)}

/* 3. Wipe-clean headlines: grime on, a gold squeegee line wipes it off */
.wipe{position:relative;display:block}
html.js .wipe-dirty{color:#7b8073;text-shadow:0 0 1px rgba(90,104,60,.35)}
.wipe-clean{display:none}
html.js .wipe-clean{display:block;position:absolute;inset:0;overflow:hidden;transform:translate3d(-101%,0,0);transition:transform 1.25s var(--ease-io)}
html.js .wipe-inner{display:block;color:var(--text-primary);transform:translate3d(101%,0,0);transition:transform 1.25s var(--ease-io)}
html.js .wipe-clean::after{content:"";position:absolute;top:-4%;bottom:-4%;right:0;width:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 18px rgba(210,195,154,.85);transition:opacity .5s var(--ease-out) 1.05s}
html.js .in .wipe-clean,html.js .in .wipe-inner{transform:none}
html.js .in .wipe-clean::after{opacity:0}
.promise-h .r:last-child .wipe-inner{color:var(--accent)}

/* 4. Trust strip */
.trust{position:relative;padding:clamp(56px,8vw,96px) var(--gutter);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(24,28,34,.6),rgba(16,19,23,.2))}
.trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.trust-list li{display:grid;gap:8px;padding:0 clamp(12px,2.5vw,36px);border-left:1px solid var(--line)}
.trust-list li:first-child{border-left:0;padding-left:0}
.t-num{font-family:var(--f-display);font-weight:600;font-size:clamp(3rem,6vw,5.2rem);line-height:.95;letter-spacing:-.03em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.trust-list li:first-child .t-num{color:var(--accent)}
.t-lab{font-size:clamp(.9rem,1.1vw,1rem);color:var(--text-secondary);max-width:20ch}

/* 5. Services carousel */
.svc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.svc-head > div:first-child{max-width:640px}
.svc-arrows{display:flex;gap:10px}
.svc-arrow{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--text-primary);cursor:pointer;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out),opacity .3s var(--ease-out)}
.svc-arrow:hover{border-color:var(--accent);transform:translateY(-2px)}
.svc-arrow:disabled{opacity:.35;cursor:default;transform:none}
.svc-rail{list-style:none;display:flex;gap:16px;margin:36px calc(var(--gutter) * -1) 0;padding:6px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.svc-rail::-webkit-scrollbar{display:none}
.svc{flex:0 0 clamp(270px,26vw,340px);scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.svc:hover{border-color:rgba(210,195,154,.4);transform:translateY(-4px)}
.svc img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.svc:hover img{transform:scale(1.04)}
.svc-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 20px}
.svc h3{font-family:var(--f-display);font-weight:600;font-size:1.35rem;line-height:1.15}
.svc-body > p:not(.svc-from){margin-top:6px;color:var(--text-secondary);font-size:.95rem;line-height:1.5;flex:1}
.svc-from{margin-top:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.svc-add{display:inline-flex;align-items:center;gap:10px;margin-top:14px;min-height:46px;padding:0 16px 0 10px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font-weight:600;font-size:14px;cursor:pointer;align-self:flex-start;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),transform .4s var(--ease-spring)}
.sa-plus{position:relative;width:26px;height:26px;border-radius:50%;background:var(--accent);flex:none}
.sa-plus::before,.sa-plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:var(--accent-ink);border-radius:2px;transition:transform .45s var(--ease-spring)}
.sa-plus::after{transform:rotate(90deg)}
.svc-add:hover{border-color:var(--accent)}
.svc-add:active{transform:scale(.96)}
.svc-add[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.svc-add[aria-pressed="true"] .sa-plus{background:var(--accent-ink)}
.svc-add[aria-pressed="true"] .sa-plus::before{width:6px;margin:1px 0 0 -6px;background:var(--accent);transform:rotate(45deg)}
.svc-add[aria-pressed="true"] .sa-plus::after{width:11px;margin:-1px 0 0 -2px;background:var(--accent);transform:rotate(-50deg)}
.svc-tally{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:15px;color:var(--text-secondary)}
.st-text b{color:var(--text-primary);font-weight:600}
.st-link{font-weight:600;color:var(--text-primary);text-decoration:none;border-bottom:2px solid var(--accent);padding:4px 0}

/* 6. Before and after tabs */
.ba-tabs{display:inline-flex;gap:4px;margin-top:24px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.ba-tab{min-height:42px;padding:0 18px;white-space:nowrap;border:0;border-radius:999px;background:none;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .35s var(--ease-out),color .35s var(--ease-out)}
.ba-tab[aria-pressed="true"]{background:var(--text-primary);color:var(--accent-ink)}
.ba img{transition:opacity .45s var(--ease-out)}
.ba.swapping img{opacity:.35}

/* 7. Coverage radar and postcode checker */
.area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.pc{margin-top:30px;max-width:460px}
.pc label{display:block;margin-bottom:10px;font-size:14px;font-weight:600}
.pc-row{display:flex;gap:8px;padding:6px;border-radius:16px;background:var(--panel);border:1px solid var(--line-strong);transition:border-color .3s var(--ease-out)}
.pc-row:focus-within{border-color:var(--accent)}
.pc input{flex:1;min-width:0;padding:0 12px;border:0;background:none;color:var(--text-primary);font:inherit;font-size:17px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em}
.pc input:focus{outline:none}
.pc input::placeholder{color:#7f8690}
.pc-go{min-height:50px;padding:0 22px;border:0;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;cursor:pointer;transition:background-color .3s var(--ease-out),transform .3s var(--ease-out)}
.pc-go:hover{background:var(--accent-hover)}
.pc-go:active{transform:scale(.96)}
.pc-out{min-height:1.6em;margin-top:14px;font-size:1.02rem;color:var(--text-secondary)}
.pc-out.yes{color:var(--text-primary)}
.pc-out.yes::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:#7fd19a;box-shadow:0 0 0 4px rgba(127,209,154,.18);vertical-align:1px}
.pc-out a{color:var(--accent-hover);font-weight:600}
.radar{position:relative;width:100%;max-width:520px;aspect-ratio:1;justify-self:center;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 50%,#161b21 0%,#111418 70%);border:1px solid var(--line)}
.radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(210,195,154,.22),rgba(210,195,154,0) 18%,rgba(210,195,154,0) 100%);animation:sweep 9s linear infinite;animation-delay:-3s}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar-svg{position:absolute;inset:0;width:100%;height:100%}
.radar .sea{fill:rgba(70,98,128,.16)}
.radar .coast{fill:none;stroke:rgba(150,178,206,.45);stroke-width:1.4;stroke-dasharray:3 4}
.radar .ring{fill:none;stroke:rgba(238,240,242,.12);stroke-width:1}
.radar .ring-l{fill:rgba(238,240,242,.38);font-family:var(--f-mono);font-size:9px}
.town circle{fill:var(--text-primary)}
.town text{fill:rgba(238,240,242,.85);font-family:var(--f-body);font-weight:600;font-size:12px}
.town.home circle{fill:var(--accent)}
.town.home text{fill:var(--accent);font-size:13px}
.town circle:first-child{animation:townGlow 4.5s var(--ease-io) infinite;animation-delay:calc(var(--d,0s) - 2s)}
@keyframes townGlow{0%,100%{opacity:.75}50%{opacity:1}}
.town .ping{fill:none;stroke:var(--accent);stroke-width:1.5;transform-origin:210px 210px;animation:ping 3.2s var(--ease-out) infinite;animation-delay:-1s}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(4.2);opacity:0}}

/* 8. Game sound switch */
.sound-btn{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.sound-btn .sw-on{display:none}
.sound-btn[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.sound-btn[aria-pressed="true"] .sw-on{display:inline}
.sound-btn[aria-pressed="true"] .sw-off{display:none}
.game-controls{align-items:center}

/* 9. Quote extras */
.photo-cta{display:flex;align-items:center;gap:14px;margin-top:30px;padding:16px 18px;border-radius:16px;text-decoration:none;background:linear-gradient(140deg,rgba(210,195,154,.16),rgba(210,195,154,.04));border:1px solid rgba(210,195,154,.45);transition:transform .4s var(--ease-out),border-color .3s var(--ease-out)}
.photo-cta:hover{transform:translateY(-2px);border-color:var(--accent)}
.pc-ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;background:var(--accent);color:var(--accent-ink)}
.pc-txt{display:grid;gap:2px;flex:1}
.pc-txt b{font-weight:600;color:var(--text-primary)}
.pc-txt span{font-size:14px;color:var(--text-secondary)}
.pc-arr{font-size:20px;color:var(--accent);transition:transform .4s var(--ease-out)}
.photo-cta:hover .pc-arr{transform:translateX(4px)}
.when{border:0;padding:0;margin:0 0 18px}
.when legend{margin-bottom:10px;font-size:14px;font-weight:600}
.when .pick span{min-height:42px;font-size:14px}

/* 10. Share with a neighbour */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:40px;padding:22px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.share-t{font-family:var(--f-display);font-weight:600;font-size:1.2rem;flex:1;min-width:220px}
.share-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;border:0;background:var(--text-primary);color:var(--accent-ink);font-weight:600;font-size:15px;cursor:pointer;transition:transform .3s var(--ease-out),background-color .3s var(--ease-out)}
.share-btn:hover{background:var(--accent)}
.share-btn:active{transform:scale(.97)}
.share-ok{width:100%;font-size:14px;color:var(--accent-hover)}
.share-ok:empty{display:none}

@media (max-width:900px){
  .area{grid-template-columns:1fr}
  .radar{max-width:440px}
}
@media (max-width:820px){
  .trust{padding:48px 20px}
  .trust-list{grid-template-columns:1fr 1fr;row-gap:32px}
  .trust-list li{padding:0 0 0 16px}
  .trust-list li:nth-child(odd){border-left:0;padding-left:0}
  .t-num{font-size:clamp(2.8rem,14vw,3.6rem)}
  .svc-arrows{display:none}
  .svc-rail{margin:26px -20px 0;padding:4px 20px 12px;scroll-padding-left:20px;gap:12px}
  .svc{flex-basis:78%}
  .ba-tabs{display:flex;width:100%}
  .ba-tab{flex:1;padding:0 6px;font-size:13px}
  .pc{max-width:none}
  .radar{max-width:none}
  .game-controls{flex-wrap:wrap;gap:6px 20px}
  .share{padding:20px}
  .share-btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  html.js .intro{display:none}
  html.js .wipe-clean,html.js .wipe-inner{transform:none!important}
  html.js .wipe-clean::after{display:none}
  .radar-sweep{display:none}
}

/* Smoothness: while a film fills the screen, rest the animated page background underneath it */
body.in-film-a .env,body.in-film-b .env{visibility:hidden}
body.in-film-a .env *,body.in-film-b .env *{animation-play-state:paused!important}

/* =====================================================================
   Version 4: fresh-eyes fixes
   ===================================================================== */
:root{color-scheme:dark}
::selection{background:var(--accent);color:var(--accent-ink)}
html{scrollbar-color:#2c323a var(--canvas)}

/* quote: heading, then the form, then the extras (form comes second on phones) */
.quote-inner{grid-template-areas:"head form" "more form";row-gap:0}
.quote-head{grid-area:head}
.quote-more{grid-area:more}
.qform{grid-area:form}
.cta-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin-top:10px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font-weight:600;font-size:16px;cursor:pointer;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out),transform .3s var(--ease-out)}
.cta-wa svg{color:#7fd19a}
.cta-wa:hover{border-color:#7fd19a;background:rgba(127,209,154,.08)}
.cta-wa:active{transform:scale(.98)}

/* game finish: your time and a challenge */
.game-done-time{font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;color:var(--accent-hover);text-shadow:var(--tshadow);margin-top:-8px}
.game-done-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px}
.challenge{min-height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(238,240,242,.5);background:rgba(8,9,13,.55);color:var(--text-primary);font-weight:600;font-size:15px;cursor:pointer;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.challenge:hover{border-color:var(--accent);background:rgba(8,9,13,.8)}

/* price tally reads as a running total */
.st-text{color:var(--text-secondary)}
.st-text b{color:var(--accent-hover)}

@media (max-width:900px){
  .quote-inner{grid-template-areas:"head" "form" "more";row-gap:28px}
  .quote-more .steps{margin-top:6px}
}

/* phones: less dead scrolling between sections */
@media (max-width:820px){
  .sec{padding:60px 20px}
  .ba-sec{padding-left:0;padding-right:0}
  .trust{padding:40px 20px}
  .quote{padding:64px 20px}
  .foot{padding-top:52px}
  .share{margin-top:28px}
  .game-done-title{font-size:1.5rem}
  .game-done-actions{flex-direction:column;gap:10px}
}
.quote-inner{grid-template-rows:auto 1fr}
.game-done{background:radial-gradient(ellipse 85% 75% at 50% 50%,rgba(8,9,13,.8) 0%,rgba(8,9,13,.55) 60%,rgba(8,9,13,.3) 100%)}
.game-done-time{display:inline-block;margin-top:-6px;padding:6px 12px;border-radius:999px;background:rgba(8,9,13,.75);border:1px solid rgba(210,195,154,.35);text-shadow:none}
@media (max-width:900px){.quote-inner{grid-template-rows:none}}

/* ---------- Legal footer line and the privacy page ---------- */
.foot-legal a{color:var(--text-primary);border-bottom:1px solid var(--line-strong);text-decoration:none;margin-left:6px}
.foot-legal a:hover{border-color:var(--accent)}
.legal-body{opacity:1!important}
.legal-back{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:14px;text-decoration:none;border-bottom:2px solid var(--accent)}
.legal-page{max-width:720px;margin:0 auto;padding:130px 20px 70px}
.legal-page h1{font-family:var(--f-display);font-weight:600;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1.05;letter-spacing:-.02em}
.legal-lede{margin-top:12px;font-size:1.1rem;color:var(--text-secondary)}
.legal-page h2{margin-top:40px;font-family:var(--f-display);font-weight:600;font-size:1.4rem}
.legal-page p,.legal-page li{margin-top:12px;color:rgba(238,240,242,.86);line-height:1.65}
.legal-page ul{padding-left:20px;margin:0}
.legal-page a{color:var(--accent-hover)}
.legal-date{margin-top:44px!important;font-size:14px;color:var(--text-secondary)!important}
.legal-foot{padding-bottom:40px}

/* =====================================================================
   Version 5: real job photos
   ===================================================================== */
.real-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 12px;border-radius:999px;border:1px solid rgba(127,209,154,.4);background:rgba(127,209,154,.08);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a6e3b9}
.rb-dot{width:7px;height:7px;border-radius:50%;background:#7fd19a;box-shadow:0 0 0 3px rgba(127,209,154,.18)}

/* the slider now holds square phone photos */
.ba{width:min(calc(100% - 2 * var(--gutter)),calc(76vh * 4 / 3));margin:40px auto 0;aspect-ratio:4/3;max-height:none;border-radius:var(--radius);border:1px solid var(--line)}
.ba-tag-l{left:16px}
.ba-tag-r{right:16px}

/* more real jobs: a swipe rail of before and after cards */
.rj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:64px var(--gutter) 0}
.rj-title{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1}
.rj-sub{margin-top:6px;color:var(--text-secondary)}
.rj-arrows{display:flex;gap:10px}
.rj-rail{--rj-h:440px;list-style:none;display:flex;align-items:flex-start;gap:14px;margin:22px 0 0;padding:6px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.rj-rail::-webkit-scrollbar{display:none}
.rj{flex:none;display:flex;flex-direction:column;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.rj-media{position:relative;height:var(--rj-h);aspect-ratio:var(--ar);overflow:hidden;background:#1a1e24}
.rj-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rj-after{position:absolute;inset:0;overflow:hidden;transform:translate3d(-101%,0,0);transition:transform 1.1s var(--ease-io)}
.rj-after-in{position:absolute;inset:0;transform:translate3d(101%,0,0);transition:transform 1.1s var(--ease-io)}
.rj-after::after{content:"";position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--accent);box-shadow:0 0 16px rgba(210,195,154,.8);opacity:1;transition:opacity .4s var(--ease-out) .9s}
.rj.shown .rj-after,.rj.shown .rj-after-in{transform:none}
.rj.shown .rj-after::after{opacity:0}
.rj-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:8px 10px 8px 14px}
.rj-label{font-weight:600;font-size:14px;white-space:nowrap}
.rj-tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.rj-flip{display:inline-flex;padding:3px;border-radius:999px;background:rgba(238,240,242,.06);border:1px solid var(--line)}
.rj-flip button{min-height:34px;padding:0 11px;border:0;border-radius:999px;background:none;color:var(--text-secondary);font-size:12.5px;font-weight:600;cursor:pointer;transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
.rj-flip button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

@media (max-width:820px){
  .ba{width:calc(100% - 40px);aspect-ratio:1/1;margin-top:28px;border-radius:12px}
  .rj-head{margin:44px 20px 0}
  .rj-arrows{display:none}
  .rj-rail{--rj-h:330px;padding:4px 20px 12px;scroll-padding-left:20px;gap:12px}
  .rj-flip button{min-height:36px}
}
@media (prefers-reduced-motion: reduce){
  .rj-after,.rj-after-in{transition:none}
}

/* =====================================================================
   Version 6: real prices, extras, calculator rows, price list
   ===================================================================== */
.svc-extras{margin-top:8px;font-size:13px;line-height:1.45;color:var(--text-secondary)}
.svc-extras span{display:block;margin-bottom:2px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

.pi-list{display:grid;gap:12px;margin:-6px 0 18px}
.pi{padding:16px 16px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);animation:piIn .45s var(--ease-out)}
@keyframes piIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pi-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pi-name{font-family:var(--f-display);font-weight:600;font-size:1.15rem}
.pi-price{font-family:var(--f-mono);font-size:14px;color:var(--accent-hover);white-space:nowrap}
.seg{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px;padding:4px;border-radius:12px;background:rgba(238,240,242,.05);border:1px solid var(--line)}
.seg button{flex:1;min-height:40px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--text-secondary);font-size:13.5px;font-weight:600;cursor:pointer;transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
.seg button[aria-pressed="true"]{background:var(--text-primary);color:var(--accent-ink)}
.pi-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.pi-k{font-size:14px;color:var(--text-secondary)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper > button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font-size:20px;line-height:1;cursor:pointer;transition:border-color .3s var(--ease-out),transform .2s var(--ease-out)}
.stepper > button:hover{border-color:var(--accent)}
.stepper > button:active{transform:scale(.94)}
.st-in{display:flex;align-items:baseline;gap:4px;min-width:96px;justify-content:center;padding:8px 10px;border-radius:12px;background:rgba(10,12,15,.6);border:1px solid var(--line)}
.st-in input{width:52px;border:0;background:none;color:var(--text-primary);font:inherit;font-family:var(--f-mono);font-size:17px;text-align:right;-moz-appearance:textfield;appearance:textfield}
.st-in input::-webkit-outer-spin-button,.st-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-in input:focus{outline:none}
.st-in:focus-within{border-color:var(--accent)}
.st-in span{font-size:13px;color:var(--text-secondary)}
.pi-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pi-quick button{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-secondary);font-size:12.5px;cursor:pointer;transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.pi-quick button:hover{color:var(--text-primary);border-color:var(--line-strong)}
.pi-extras{margin-top:12px;font-size:13px;color:var(--text-secondary)}
.pi-extras span{margin-right:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pi-select{min-height:44px;padding:0 36px 0 12px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(10,12,15,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23d2c39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/18px;color:var(--text-primary);font:inherit;font-size:15px;-webkit-appearance:none;appearance:none;cursor:pointer}
.pi-select:focus{outline:none;border-color:var(--accent)}
.pi-addons{display:grid;gap:8px;margin-top:12px}
.tick{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-size:14px}
.tick input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.tick em{font-style:normal;color:var(--accent-hover);margin-left:4px;font-family:var(--f-mono);font-size:12.5px}
.price-bins{margin-top:10px;color:var(--text-secondary)}
.price-bins b{color:var(--text-primary)}
.price-num{font-size:clamp(2.1rem,3.8vw,3.2rem)}
.price-num.bump{animation:bump .5s var(--ease-spring)}
@keyframes bump{from{transform:scale(.96);opacity:.6}to{transform:none;opacity:1}}

/* full price list */
.price-list{margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-list summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;cursor:pointer;list-style:none;font-family:var(--f-display);font-weight:600;font-size:1.2rem}
.price-list summary::-webkit-details-marker{display:none}
.price-list summary::after{content:"+";font-family:var(--f-body);font-weight:400;font-size:26px;color:var(--accent);transition:transform .4s var(--ease-out)}
.price-list[open] summary::after{transform:rotate(45deg)}
.pl-wrap{overflow-x:auto;margin:6px 0 10px;-webkit-overflow-scrolling:touch}
.pl{width:100%;border-collapse:collapse;font-size:14.5px}
.pl th{text-align:left;font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:12px 12px 10px 0;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.pl td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:rgba(238,240,242,.88);vertical-align:top}
.pl td:nth-child(2){white-space:nowrap;font-family:var(--f-mono);font-size:13.5px;color:var(--text-primary)}
.pl td:nth-child(3){color:var(--text-secondary)}
.pl-bins td,.pl-bins th{text-align:center;padding-right:8px;padding-left:8px;white-space:nowrap}
.pl-bins td:first-child,.pl-bins th:first-child{text-align:left;padding-left:0}
.pl-bins td{font-family:var(--f-mono);font-size:13px;color:var(--text-primary)}
.pl-bins thead + tbody + thead th{padding-top:26px}
.pl-h{margin-top:26px;font-family:var(--f-display);font-weight:600;font-size:1.1rem}
.pl-addons{list-style:none;margin:14px 0 26px;padding:0;display:grid;gap:8px;color:var(--text-secondary);font-size:14.5px}
.pl-addons b{color:var(--text-primary);font-weight:600}

@media (max-width:820px){
  .pi{padding:14px 14px 12px}
  .seg button{font-size:12.5px;padding:0 6px}
  .pl{font-size:13.5px}
  .pl td:nth-child(3){min-width:160px}
}
@media (max-width:820px){
  .pl:not(.pl-bins) thead{display:none}
  .pl:not(.pl-bins) tr{display:grid;grid-template-columns:1fr auto;column-gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
  .pl:not(.pl-bins) td{padding:0;border:0}
  .pl:not(.pl-bins) td:first-child{font-weight:600;color:var(--text-primary)}
  .pl:not(.pl-bins) td:nth-child(2){text-align:right}
  .pl:not(.pl-bins) td:nth-child(3){grid-column:1/-1;margin-top:4px;min-width:0;font-size:13px}
  .pl:not(.pl-bins) td:nth-child(3):empty{display:none}
}

/* ---------- Links to the service, areas and our-work pages, and the four-column footer (shared by every page) ---------- */
.svc-more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:12px;padding:6px 0;font-size:14px;font-weight:600;text-decoration:none;color:var(--text-primary);border-bottom:1px solid var(--line-strong);transition:border-color .3s var(--ease-out),gap .4s var(--ease-out)}
.svc-more span{color:var(--accent)}
.svc-more:hover{border-color:var(--accent);gap:10px}
.text-link{color:var(--text-primary);font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);transition:color .3s var(--ease-out)}
.text-link:hover{color:var(--accent-hover)}
.rj-more{margin:22px var(--gutter) 0}
.area-more{margin-top:18px}
.foot-cols.foot-cols-4{grid-template-columns:1.2fr 1fr 1fr 1fr}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (max-width:900px){.foot-cols.foot-cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:340px){.foot-cols.foot-cols-4{grid-template-columns:1fr}}
@media (pointer:coarse){.svc-more{min-height:44px}}
.rev-write{margin-top:14px;font-size:14px;color:var(--text-secondary)}
.rev-write a{color:var(--text-primary);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent)}
.rev-write a:hover{color:var(--accent-hover)}