/* ═══════════════════════════════════════════════════════════
   EcuaCar Detailing
   Dark, minimal, gradient-accented. Simple by design.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#0A0A0F;
  --bg-soft:#101017;
  --surface:rgba(255,255,255,.032);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);

  --text:#F2F3F7;
  --muted:#9A9AAE;
  --dim:#6A6A80;

  --blue:#2D7BFF;
  --green:#14F195;
  --grad:linear-gradient(96deg,#2D7BFF 0%,#14F195 100%);

  --r:14px; --r-lg:20px; --r-xl:28px;
  --wrap:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ff:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fd:'Space Grotesk','Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* ⚠️ Keep this. The `hidden` attribute is only `display:none` in the browser's
   DEFAULT stylesheet, which any author rule that sets `display` overrides —
   and .field / .field-check both set `display:flex`. Without this guard,
   `el.hidden = true` silently does nothing to those elements. That is exactly
   how the "Someone referred me" checkbox and the "Who referred you?" field
   stayed on screen after the referral programme was switched off. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ff);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:999;background:var(--blue);padding:10px 16px;border-radius:8px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ── background ────────────────────────────────────────────
   One soft gradient wash at the top. Nothing else.

   These are radial-gradients, NOT solid circles with filter:blur().
   A blurred solid disc keeps a near-opaque core and only feathers the
   outer ~1 blur-radius, so it reads as a blob with a visible edge. A
   radial-gradient falls off across its whole width and lands on fully
   transparent, which is what makes it read as a wash. It's also far
   cheaper — blur(120px) forces a large offscreen composite every frame. */
.bg-field{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.orb{position:absolute;pointer-events:none}
.orb-1{width:1500px;height:950px;top:-400px;left:50%;transform:translateX(-50%);
  background:radial-gradient(closest-side,
    rgba(45,123,255,.30), rgba(45,123,255,.11) 52%, rgba(45,123,255,0) 100%)}
.orb-2{width:1000px;height:760px;top:-140px;right:-300px;
  background:radial-gradient(closest-side,
    rgba(20,241,149,.14), rgba(20,241,149,0) 100%)}
.grid-mesh{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 20%,transparent 75%);}

/* ── buttons ───────────────────────────────────────────────── */
/* background-origin:border-box is NOT decorative — it fixes a real artifact.
   These buttons carry `border:1px solid transparent` so primary and ghost
   buttons measure the same. But CSS defaults are:
       background-origin: padding-box   (gradient is SIZED to the padding box)
       background-clip:   border-box    (gradient is PAINTED to the border box)
       background-repeat: repeat
   So the 1px ring between padding box and border box falls outside the
   gradient's own box and gets filled by the NEXT TILE — i.e. the far end of
   the gradient wraps around. The result is a 1px sliver of the END colour
   down the LEFT edge and the START colour down the right.
   Sizing the gradient to the border box removes the gap entirely. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:.25s var(--ease);white-space:nowrap;cursor:pointer}
.btn svg{flex:none}
.btn-lg{padding:15px 32px;font-size:16px}
/* ⚠️ background-origin MUST come AFTER the `background` shorthand, not before,
   and not on a parent rule. `background` is a shorthand: it resets EVERY
   longhand it covers — including background-origin — back to the initial
   value (padding-box), even though it doesn't mention it. Setting it on .btn
   and then writing `background:` here silently undid it. */
.btn-primary{background:var(--grad);background-origin:border-box;color:#07070B;font-weight:700}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2);border-color:rgba(255,255,255,.3)}

/* ── nav ───────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;transition:.3s var(--ease);border-bottom:1px solid transparent}
.nav.stuck{background:rgba(10,10,15,.78);backdrop-filter:blur(20px) saturate(150%);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{display:grid;place-items:center}
.brand-text{font-family:var(--fd);font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1;
  display:flex;align-items:baseline;gap:1px}
.brand-text em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand-text small{display:block;font-size:8px;letter-spacing:.38em;color:var(--dim);
  font-weight:600;margin-left:9px;align-self:center}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--muted)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.nav-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── hero ──────────────────────────────────────────────────── */
.hero{padding:88px 0 0;position:relative}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:500;
  color:var(--muted);margin-bottom:28px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px rgba(20,241,149,.9)}
.hero h1{font-size:clamp(44px,6.2vw,78px);font-weight:600;margin-bottom:26px;letter-spacing:-.035em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(16.5px,1.4vw,18.5px);color:var(--muted);max-width:52ch;margin-bottom:36px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:52px}
.hero-stats{display:flex;gap:44px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--line)}
.hero-stats li{display:flex;flex-direction:column;gap:2px}
.hero-stats b{font-family:var(--fd);font-size:25px;font-weight:600;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{font-size:13px;color:var(--dim)}

.hero-visual{position:relative}
.hero-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-2)}
.hero-frame img{aspect-ratio:4/3;object-fit:cover}
.hero-badge{position:absolute;bottom:16px;left:16px;z-index:2;display:flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;background:rgba(10,10,15,.78);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);font-size:12.5px;font-weight:600}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

.marquee{margin-top:96px;padding:15px 0;border-block:1px solid var(--line);overflow:hidden}
.marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:scroll 48s linear infinite;
  font-family:var(--fd);font-size:12px;font-weight:500;letter-spacing:.24em;color:var(--dim)}
.marquee-track i{color:var(--blue);font-style:normal;font-size:7px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ── trust ─────────────────────────────────────────────────── */
.trust{padding:64px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-item{display:flex;gap:13px;padding:22px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);transition:.28s var(--ease)}
.trust-item:hover{border-color:var(--line-2)}
.trust-item svg{width:22px;height:22px;flex:none;color:var(--green)}
.trust-item b{display:block;font-size:14.5px;margin-bottom:3px;font-weight:600}
.trust-item span{font-size:13.5px;color:var(--dim);line-height:1.5}

/* ── sections ──────────────────────────────────────────────── */
.section{padding:104px 0}
.sec-head{max-width:700px;margin-bottom:56px}
.tag{display:inline-block;padding:5px 13px;border-radius:999px;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green);
  background:rgba(20,241,149,.07);border:1px solid rgba(20,241,149,.2);margin-bottom:22px}
.sec-head h2{font-size:clamp(32px,4.2vw,50px);margin-bottom:18px;letter-spacing:-.03em}
.sec-head p{color:var(--muted);font-size:17px}
.sec-head p b{color:var(--text);font-weight:600}
.sec-head p + p{margin-top:14px}
.price-fine{font-size:14.5px!important;color:var(--dim)!important}

/* ── filters ───────────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
/* Same wrapped-gradient fix as .btn — the selected chip is gradient-filled
   and keeps its 1px border, so it needs the gradient sized to the border box. */
.filters button{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:500;
  background:transparent;border:1px solid var(--line);
  color:var(--muted);transition:.22s var(--ease)}
.filters button:hover{border-color:var(--line-2);color:var(--text)}
/* Same shorthand trap as .btn-primary — origin must follow `background`. */
.filters button[aria-selected="true"]{background:var(--grad);background-origin:border-box;color:#07070B;border-color:transparent;font-weight:700}

/* ── before / after ────────────────────────────────────────── */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}
.ba-card{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);transition:.3s var(--ease)}
.ba-card:hover{border-color:var(--line-2)}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:ew-resize;user-select:none;
  touch-action:pan-y;background:var(--bg-soft)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after-wrap{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.5);pointer-events:none;z-index:3;transform:translateX(-50%)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;
  border-radius:50%;background:rgba(10,10,15,.82);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.85);display:grid;place-items:center}
.ba-knob svg{width:20px;height:20px;color:#fff}
.ba-tag{position:absolute;top:13px;z-index:2;padding:4px 11px;border-radius:999px;font-size:10.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(10px);
  pointer-events:none;background:rgba(10,10,15,.7);border:1px solid var(--line-2)}
.ba-tag.b{left:13px;color:#FFA5A5}
.ba-tag.a{right:13px;color:var(--green)}
.ba-meta{padding:16px 19px 17px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.ba-meta b{font-family:var(--fd);font-size:14.5px;display:block;font-weight:600}
.ba-meta span{font-size:13px;color:var(--dim)}
.ba-meta .drag-hint{font-size:10.5px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap}

.work-cta{margin-top:56px;text-align:center;display:grid;gap:20px;justify-items:center}
.work-cta p{font-family:var(--fd);font-size:20px;color:var(--muted);font-weight:500}

/* ── pricing ───────────────────────────────────────────────── */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;padding:34px 28px 30px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);transition:.3s var(--ease);
  display:flex;flex-direction:column}
.plan:hover{border-color:var(--line-2)}
.plan.featured{background:var(--bg-soft);border-color:rgba(45,123,255,.42)}
.plan.featured::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-lg);padding:1px;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55}
.plan-flag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  padding:4px 14px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--grad);color:#07070B;white-space:nowrap;z-index:2}
.plan h3{font-size:21px;margin-bottom:5px;font-weight:600}
.plan .dur{font-size:12px;color:var(--green);letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;margin-bottom:20px}
.plan .price{display:flex;align-items:baseline;gap:2px;margin-bottom:6px}
.plan .price i{font-style:normal;font-size:22px;color:var(--muted);font-weight:500}
.plan .price b{font-family:var(--fd);font-size:52px;line-height:1;letter-spacing:-.04em;font-weight:600}
.plan .price em{font-style:normal;font-size:13.5px;color:var(--dim);margin-left:6px}
.plan .sub{font-size:13.5px;color:var(--dim);margin-bottom:24px;padding-bottom:22px;
  border-bottom:1px solid var(--line)}
.plan ul{display:grid;gap:11px;margin-bottom:28px;flex:1}
.plan li{display:flex;gap:10px;font-size:14.5px;color:var(--muted);line-height:1.45}
.plan li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--green)}
.plan li.inherit{color:var(--text);font-weight:600}
.plan .btn{width:100%}

.addons{margin-top:44px;padding:32px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line)}
.addons h3{font-size:18px;margin-bottom:20px;font-weight:600}
.addons ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.addons li{display:flex;justify-content:space-between;gap:14px;padding:13px 16px;border-radius:11px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.addons li b{color:var(--green);font-family:var(--fd);white-space:nowrap;font-weight:600}
.addon-note{margin-top:22px;font-size:14px;color:var(--dim)}
.addon-note a{color:var(--green)}

/* ── steps ─────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps li{padding:30px 26px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);transition:.3s var(--ease)}
.steps li:hover{border-color:var(--line-2)}
.step-n{font-family:var(--fd);font-size:15px;font-weight:600;line-height:1;margin-bottom:18px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.06em}
.steps h3{font-size:17.5px;margin-bottom:11px;font-weight:600}
.steps p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ── booking ───────────────────────────────────────────────── */
.book-shell{border-radius:var(--r-xl);background:var(--bg-soft);
  border:1px solid var(--line);padding:38px}
.booking-embed{min-height:640px;border-radius:var(--r-lg);overflow:hidden}
.booking-embed iframe{width:100%;min-height:640px;border:0;border-radius:var(--r-lg)}
.booker-step{margin-bottom:32px}
.step-label{display:flex;align-items:center;gap:11px;font-family:var(--fd);font-size:14.5px;
  font-weight:600;margin-bottom:15px}
.step-label span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;background:rgba(45,123,255,.16);border:1px solid rgba(45,123,255,.4);
  color:#A8CBFF;font-weight:600}
.opt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:10px}
.opt{text-align:left;padding:17px 19px;border-radius:13px;background:rgba(255,255,255,.025);
  border:1px solid var(--line);transition:.22s var(--ease)}
.opt:hover{border-color:var(--line-2)}
.opt[aria-pressed="true"]{border-color:var(--green);background:rgba(20,241,149,.06)}
.opt b{display:block;font-size:15px;margin-bottom:3px;font-weight:600}
.opt span{font-size:12.5px;color:var(--dim);line-height:1.45;display:block}
.opt .opt-price{color:var(--green);font-weight:600}

.daystrip{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.daystrip::-webkit-scrollbar{height:4px}
.daystrip::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.day{flex:none;width:78px;padding:13px 8px;border-radius:13px;text-align:center;
  background:rgba(255,255,255,.025);border:1px solid var(--line);transition:.22s var(--ease)}
.day:hover:not(:disabled){border-color:var(--line-2)}
.day[aria-pressed="true"]{border-color:var(--green);background:rgba(20,241,149,.07)}
.day:disabled{opacity:.25;cursor:not-allowed}
.day .dow{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px}
.day .dnum{display:block;font-family:var(--fd);font-size:21px;font-weight:600;line-height:1}
.day .dmo{display:block;font-size:10px;color:var(--dim);margin-top:3px}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:9px}
.slot{padding:12px 8px;border-radius:11px;text-align:center;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.025);border:1px solid var(--line);transition:.2s var(--ease)}
.slot:hover{border-color:var(--line-2)}
.slot[aria-pressed="true"]{border-color:var(--green);background:rgba(20,241,149,.08);color:var(--green)}
.slot small{display:block;font-size:10px;font-weight:400;color:var(--dim);margin-top:2px}
.slot-note{margin-top:12px;font-size:13px;color:var(--dim)}

.booker-summary{margin:6px 0 22px;padding:22px 24px;border-radius:var(--r);
  background:rgba(45,123,255,.06);border:1px solid rgba(45,123,255,.22)}
.booker-summary .sum-row{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;
  padding:7px 0;color:var(--muted)}
.booker-summary .sum-row b{color:var(--text);text-align:right;font-weight:600}
.booker-summary .sum-total{margin-top:12px;padding-top:14px;
  border-top:1px solid rgba(45,123,255,.22);display:flex;justify-content:space-between;align-items:baseline}
.booker-summary .sum-total span{font-family:var(--fd);font-size:14.5px}
.booker-summary .sum-total b{font-family:var(--fd);font-size:30px;font-weight:600;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.booker-summary .incomplete{color:var(--dim);font-size:14px}
.booker-actions{display:flex;gap:11px;flex-wrap:wrap}
.booker-actions .btn{flex:1;min-width:180px}
.btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.booker-fine{margin-top:16px;font-size:13px;color:var(--dim);text-align:center}

/* ── area ──────────────────────────────────────────────────── */
.area-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.area-grid h2{font-size:clamp(30px,3.6vw,42px);margin-bottom:18px;letter-spacing:-.03em}
.area-lede{color:var(--muted);font-size:17px;margin-bottom:28px}
.area-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:22px}
.area-list li{padding:11px 15px;border-radius:10px;background:var(--surface);border:1px solid var(--line);
  font-size:13.5px;color:var(--muted);transition:.22s var(--ease)}
.area-list li:hover{border-color:var(--line-2);color:var(--text)}
.area-note{font-size:14px;color:var(--dim)}
.area-card{padding:32px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.area-card h3{font-size:19px;margin-bottom:20px;font-weight:600}
.area-card p{font-size:14px;color:var(--dim);margin-top:20px}
.check{display:grid;gap:13px}
.check li{display:flex;gap:11px;font-size:14.5px;color:var(--muted);align-items:flex-start}
.check li::before{content:'';flex:none;width:17px;height:17px;margin-top:3px;border-radius:50%;
  background:rgba(20,241,149,.1);border:1px solid rgba(20,241,149,.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314F195' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:10px;background-repeat:no-repeat;background-position:center}

/* ── faq ───────────────────────────────────────────────────── */
.faq{display:grid;gap:9px;max-width:860px}
.faq details{border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  overflow:hidden;transition:.25s var(--ease)}
.faq details[open]{border-color:var(--line-2)}
.faq summary{padding:19px 24px;font-family:var(--fd);font-size:15.5px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:var(--green);font-weight:300;
  transition:transform .25s var(--ease);flex:none;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 24px 21px;color:var(--muted);font-size:15px;max-width:75ch}

/* ── cta band ──────────────────────────────────────────────── */
.cta-band{padding:96px 0;text-align:center;border-block:1px solid var(--line)}
.cta-band h2{font-size:clamp(30px,4vw,46px);margin-bottom:14px;letter-spacing:-.03em}
.cta-band p{color:var(--muted);font-size:17.5px;margin-bottom:34px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── footer ────────────────────────────────────────────────── */
.foot{padding:68px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px}
.foot-brand{margin-bottom:14px}
.foot-blurb{color:var(--dim);font-size:14.5px;max-width:34ch}
.foot h4{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.foot a{display:block;font-size:14.5px;color:var(--muted);margin-bottom:9px;transition:color .2s}
.foot a:hover{color:var(--green)}
.foot p{font-size:14.5px;color:var(--muted)}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}

/* ── mobile sticky bar ─────────────────────────────────────── */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,15,.92);backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.mobile-bar .btn{flex:1;padding:13px}

/* ── reveal ────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr;max-width:540px}
  .area-grid{grid-template-columns:1fr;gap:40px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:820px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    gap:0;padding:12px 24px 22px;background:rgba(10,10,15,.97);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line)}
  .nav.open .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--text)}
  .mobile-bar{display:flex}
  body{padding-bottom:74px}
  .section{padding:76px 0}
  .hero{padding:48px 0 0}
  .book-shell{padding:22px 18px}
  .ba-grid{grid-template-columns:1fr}
  .area-list{grid-template-columns:repeat(2,1fr)}
  .hero-stats{gap:28px}
  .marquee{margin-top:64px}
}
@media (max-width:560px){
  .wrap{padding-inline:18px}
  .trust-grid,.steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-actions .btn,.cta-row .btn{width:100%}
  .booker-actions .btn{min-width:100%}
  /* Keep the wash wider than the viewport so it stays a wash, not a spot. */
  .orb-1{width:820px;height:620px;top:-260px}
  .orb-2{width:620px;height:520px;top:-100px;right:-220px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ── offers ────────────────────────────────────────────────── */
.offer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;align-items:stretch}
/* Set by app.js when the referral programme is switched off and the contest
   is the only card left — otherwise it sits squashed in the first column. */
.offer-grid.solo{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
.offer{position:relative;padding:32px 28px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);display:flex;flex-direction:column;transition:.3s var(--ease)}
.offer:hover{border-color:var(--line-2)}
.offer-hero{background:var(--bg-soft);border-color:rgba(45,123,255,.4)}
.offer-hero::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-lg);padding:1px;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.5}
.offer-badge{align-self:flex-start;padding:4px 12px;border-radius:999px;font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);
  background:rgba(20,241,149,.08);border:1px solid rgba(20,241,149,.25);margin-bottom:16px}
.offer-hero .offer-badge{color:#A8CBFF;background:rgba(45,123,255,.12);border-color:rgba(45,123,255,.32)}
.offer h3{font-size:23px;margin-bottom:10px;font-weight:600}
.offer-hero h3{font-size:30px;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:6px}
.offer-lede{font-family:var(--fd);font-size:16px;color:var(--text);margin-bottom:14px;font-weight:500}
.offer p{font-size:14.5px;color:var(--muted);line-height:1.6}
.offer p b{color:var(--text);font-weight:600}
.offer-prize{margin:20px 0;padding:16px 18px;border-radius:13px;
  background:rgba(20,241,149,.06);border:1px solid rgba(20,241,149,.22)}
.offer-hero .offer-prize{background:rgba(45,123,255,.08);border-color:rgba(45,123,255,.26)}
.offer-prize b{display:block;font-family:var(--fd);font-size:16px;margin-bottom:2px;font-weight:600}
.offer-prize span{font-size:13px;color:var(--dim)}
.offer-prize.compact{margin-top:auto;margin-bottom:14px}
.offer-rules{display:grid;gap:9px;margin-bottom:16px}
.offer-rules li{position:relative;padding-left:18px;font-size:13.5px;color:var(--muted);line-height:1.5}
.offer-rules li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--green)}
.offer-fine{font-size:13px!important;color:var(--dim)!important;margin-top:auto}
.offers-note{margin-top:26px;font-size:14px;color:var(--dim);max-width:80ch}

/* ── booking form fields ───────────────────────────────────── */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field-wide{grid-column:1/-1}
.field > span{font-size:13px;font-weight:500;color:var(--muted)}
.field > span i{font-style:normal;color:var(--green)}
.field input,.field textarea{width:100%;padding:12px 14px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:15px;transition:.2s var(--ease);resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#4E4E63}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);
  background:rgba(255,255,255,.05)}
.field input.invalid,.field textarea.invalid{border-color:#FF6B6B;background:rgba(255,107,107,.06)}
.field-check{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:11px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);cursor:pointer;
  transition:.2s var(--ease)}
.field-check:hover{border-color:var(--line-2)}
.field-check input{flex:none;width:17px;height:17px;margin-top:2px;accent-color:#14F195;cursor:pointer}
.field-check span{font-size:13.5px;color:var(--muted);line-height:1.5}
.field-check span b{color:var(--text);font-weight:600}
.field-check span i{font-style:normal;color:var(--dim)}

.sum-disc b{color:var(--green)!important}
.form-status{margin-top:14px;font-size:14px;text-align:center;min-height:1.2em}
.form-status.err{color:#FF9B9B}
.form-status.warn{color:#FFD27D}

.booked{text-align:center;padding:36px 20px}
.booked-tick{width:58px;height:58px;margin:0 auto 20px;border-radius:50%;display:grid;
  place-items:center;font-size:28px;color:#07070B;background:var(--grad);font-weight:700}
.booked h3{font-size:26px;margin-bottom:12px}
.booked p{color:var(--muted);font-size:16px;max-width:46ch;margin:0 auto 10px}
.booked p b{color:var(--text)}
.booked-fine{font-size:13.5px!important;color:var(--dim)!important}
.booked-fine a{color:var(--green)}

@media (max-width:1080px){
  .offer-grid{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:560px){
  .fields{grid-template-columns:1fr}
}

/* ── live booking embed wrapper ────────────────────────────── */
.embed-note{margin-bottom:22px;padding:18px 20px;border-radius:var(--r);
  background:rgba(45,123,255,.07);border:1px solid rgba(45,123,255,.22)}
.embed-note p{font-size:14.5px;color:var(--muted);line-height:1.6}
.embed-note p b{color:var(--text);font-weight:600}
.embed-fallback{margin-top:8px!important;font-size:13.5px!important;color:var(--dim)!important}
.embed-fallback a{color:var(--green)}

/* ── optional field hint ───────────────────────────────────── */
.field > span em{font-style:normal;color:var(--dim);font-weight:400}
.field-hint{display:block;margin-top:5px;font-size:12px;color:var(--dim);line-height:1.45}
.booker-fine b{color:var(--muted)}