:root{
  --ar-og:var(--og,#ff6a00);
  --ar-og-h:var(--og-h,#ff8533);
  --ar-og-f:var(--og-f,rgba(255,106,0,.08));
  --ar-og-b:var(--og-b,rgba(255,106,0,.22));
  --ar-bg:var(--bg,#0a0a0a);
  --ar-bg2:var(--bg2,#111111);
  --ar-bg3:var(--bg3,#161616);
  --ar-line:var(--border,#1e1e1e);
  --ar-text:var(--text,#ffffff);
  --ar-text2:var(--text2,#999999);
  --ar-text3:var(--text3,#555555);
  --ar-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* set explicitly — without this the portal headline falls back to Times */
  --ar-font:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ar-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ar-radius:14px;
}

/* ─── 1. THE HERO PORTAL ─────────────────────────────────────────── */
.ar-drop{height:300vh;position:relative;background:#000;z-index:50}
/* height is svh, not vh. On iOS `vh` is always the LARGE viewport — the one
   you get with the address bar hidden — so a 100vh sticky stage is taller
   than the screen whenever the bar is showing, and the £ sat below the visible
   centre. svh is the small viewport, and unlike dvh it doesn't change as the
   bar slides, so the scroll maths below stays constant. vh first as fallback. */
.ar-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center}
#ar-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* Animated dot field (React Bits <DotField/>). z-index 0 puts it UNDER the
   wireframe rings on #ar-canvas, which is alpha:true and so shows through. */
.ar-dotfield{position:absolute;inset:0;z-index:0;pointer-events:none}
.ar-dotfield canvas,.ar-dotfield svg{position:absolute;inset:0;width:100%;height:100%}
/* SVG rings are the fallback for no-WebGL / mobile / reduced-motion only */
.ar-ringwrap{position:absolute;width:min(78vmin,660px);aspect-ratio:1;display:none;
  align-items:center;justify-content:center;will-change:transform;z-index:1}
body.ar-nowebgl .ar-ringwrap{display:flex}
body.ar-nowebgl #ar-canvas{display:none}
.ar-ringwrap svg{width:100%;height:100%;overflow:visible}
.ar-ringwrap circle{fill:none;stroke:var(--ar-og);vector-effect:non-scaling-stroke}
.ar-streaks{position:absolute;inset:-25% 0;pointer-events:none;opacity:0;z-index:2}
.ar-streak{position:absolute;top:-30%;width:1px;height:32vh;
  background:linear-gradient(to bottom,transparent,var(--ar-og),transparent)}
.ar-head{position:relative;z-index:5;text-align:center;padding:0 24px;color:var(--ar-text);
  font-family:var(--ar-font)}
/* Nothing sits BELOW the number — it's the last line. Even at 1.85x scale
   during the fall there is nothing underneath for it to collide with. */
.ar-head h1,.ar-head .ar-h1{font-family:var(--ar-font);font-size:clamp(24px,3.6vw,48px);font-weight:700;
  letter-spacing:-.025em;margin:0;line-height:1.2}
.ar-line{display:block;font-family:var(--ar-body);font-size:.46em;font-weight:500;
  color:var(--ar-text2);line-height:1.45;margin:0 auto;max-width:34ch;letter-spacing:0}
.ar-wd{display:inline-block;white-space:nowrap}
.ar-ch{display:inline-block;will-change:transform}
.ar-price{display:block;font-size:1.95em;font-weight:700;letter-spacing:-.045em;
  line-height:1.1;margin:.16em 0 0;padding-bottom:.06em;font-variant-numeric:tabular-nums;
  color:var(--ar-text);will-change:transform;transform-origin:50% 45%;
  position:relative;z-index:3}
.ar-price.ar-hit{color:var(--ar-og);text-shadow:0 0 60px var(--ar-og-b)}
.ar-burst{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;
  border:3px solid var(--ar-og);border-radius:50%;opacity:0;pointer-events:none;z-index:2}
.ar-locked{margin-top:30px;font-family:var(--ar-mono);font-size:12px;letter-spacing:.24em;
  color:var(--ar-og);border:1.5px solid var(--ar-og);background:var(--ar-og-f);
  border-radius:999px;padding:9px 20px;display:inline-block;opacity:0;transform:scale(.6)}
/* BUT… and PRICE LOCKED occupy the same cell — one is always invisible,
   so neither reserves space that pushes the other off the number.    */
.ar-beat{display:grid;justify-items:center;margin-top:22px}
.ar-beat>*{grid-area:1/1;margin:0}
.ar-but{font-family:var(--ar-mono);font-size:16px;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ar-og);text-shadow:0 0 34px var(--ar-og-b)}
.ar-sub{margin-top:18px;color:var(--ar-text3);font-size:14px;font-family:var(--ar-mono);letter-spacing:.04em}
.ar-flash{position:absolute;inset:0;z-index:7;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--ar-og),transparent 62%)}
.ar-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:6;
  color:var(--ar-text3);font-family:var(--ar-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.ar-hint::after{content:"";width:1px;height:44px;
  background:linear-gradient(to bottom,var(--ar-og),transparent);animation:ar-hint 1.6s ease-in-out infinite}
@keyframes ar-hint{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{opacity:0}}
.ar-skip{position:absolute;top:24px;right:26px;z-index:6;color:var(--ar-text3);
  font-family:var(--ar-mono);font-size:12px;letter-spacing:.08em;text-decoration:none;
  border:1px solid var(--ar-line);padding:9px 16px;border-radius:999px;transition:.25s}
.ar-skip:hover{color:var(--ar-text);border-color:var(--ar-og)}
/* your own header stays out of the way until the fall is over */
body.ar-falling .ar-hide-during-drop{opacity:0!important;pointer-events:none!important}
.ar-hide-during-drop{transition:opacity .35s}

/* ─── 2. SHARED SECTION FURNITURE ────────────────────────────────── */
.ar-sec{padding:96px 0;position:relative}
.ar-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.ar-kicker{font-family:var(--ar-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ar-og);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.ar-kicker::before{content:"";width:26px;height:2px;background:var(--ar-og)}
.ar-h2{font-family:var(--ar-font);font-size:clamp(28px,4.2vw,46px);font-weight:700;letter-spacing:-.025em;line-height:1.1;
  margin:0 0 14px;color:var(--ar-text)}
.ar-p{font-family:var(--ar-body);color:var(--ar-text2);font-size:16px;line-height:1.65;max-width:620px;margin:0}
.ar-card{background:var(--ar-bg2);border:1px solid var(--ar-line);border-radius:var(--ar-radius);padding:32px}
.ar-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
@media(max-width:900px){.ar-grid2{grid-template-columns:1fr}}
.ar-stamp{display:inline-block;font-family:var(--ar-mono);font-size:11px;letter-spacing:.14em;
  color:var(--ar-og);border:1.5px solid var(--ar-og-b);border-radius:8px;padding:7px 13px;
  background:var(--ar-og-f);font-weight:600}
.ar-btn{font-family:var(--ar-font);display:inline-flex;align-items:center;gap:9px;background:var(--ar-og);color:var(--og-ink,#fff);
  border:none;font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;cursor:pointer;
  text-decoration:none;will-change:transform}
.ar-btn:hover{background:var(--ar-og-h)}

/* ─── 3. LIVE BRAND ENGINE ───────────────────────────────────────── */
.ar-skins{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0}
/* touch-action stops the 300ms tap delay and double-tap zoom stealing the
   tap; :active gives a visible acknowledgement, which :hover never does on
   a phone. -webkit-tap-highlight-color kills the grey iOS flash.          */
.ar-skin{touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  border:1.5px solid var(--ar-line);background:var(--ar-bg3);border-radius:999px;
  padding:10px 17px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ar-text);
  display:flex;align-items:center;gap:9px;transition:.25s;font-family:var(--ar-font)}
.ar-skin .ar-dot{width:12px;height:12px;border-radius:50%}
.ar-skin.on{border-color:var(--ar-og);background:var(--ar-og-f);color:var(--ar-og)}
.ar-skin:active{transform:scale(.95);border-color:var(--ar-og)}
.ar-mini{border:1px solid var(--ar-line);border-radius:10px;overflow:hidden;background:var(--ar-bg2)}
.ar-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--ar-line);background:var(--ar-bg3)}
.ar-bar i{width:9px;height:9px;border-radius:50%;background:var(--ar-line)}
.ar-minihero{padding:26px;background:linear-gradient(135deg,var(--ar-bg3),var(--ar-bg))}
.ar-minihero .t{font-family:var(--ar-font);letter-spacing:-.02em;font-weight:700;font-size:20px;color:var(--ar-text)}
.ar-minihero .s{font-size:12.5px;color:var(--ar-text2);margin-top:6px}
.ar-minihero .b{display:inline-block;margin-top:14px;background:var(--ar-og);color:var(--og-ink,#fff);
  font-size:12px;font-weight:600;padding:8px 16px;border-radius:8px}
/* ── Brand-engine preview: one mini page per skin ──────────────────────
   Every colour here is var(--ar-og) or derived from it, so these retint
   with the page instead of being five hard-coded palettes. A fixed
   min-height stops the card resizing as you click between skins.      */
/* min-height is the TALLEST panel (salon: chips + 2 slot rows + confirm),
   so the card doesn't resize as you click between skins. Measure again if
   you add rows to one of them. */
.ar-minibody{padding:15px 17px 18px;min-height:190px}
.ar-demo{display:none}
.ar-demo.on{display:block;animation:ar-fadein .28s ease-out}
@keyframes ar-fadein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.ar-dhead{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ar-og);margin-bottom:10px}

.ar-drow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ar-text2);
  padding:7px 0;border-top:1px solid var(--ar-line)}
.ar-drow:first-of-type{border-top:0}
.ar-drow em{margin-left:auto;font-style:normal;color:var(--ar-text);font-weight:600;font-size:12px}
.ar-dtick,.ar-dico{color:var(--ar-og);font-size:12px;width:14px;text-align:center;flex-shrink:0}

/* café */
.ar-dsplit{display:flex;gap:16px;align-items:center}
/* no border-radius: it clips a replaced element, which decapitated the cup
   when this stopped being a top-down circle */
.ar-coffee{width:98px;height:98px;flex-shrink:0;
  filter:drop-shadow(0 6px 18px var(--ar-og-b))}
.ar-hours{flex:1;min-width:0}
.ar-hrow{display:flex;font-size:12px;color:var(--ar-text2);padding:5px 0;
  border-top:1px solid var(--ar-line)}
.ar-hrow em{margin-left:auto;font-style:normal;color:var(--ar-text);font-weight:600}
.ar-open{margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--ar-og);text-transform:uppercase}

/* gym */
.ar-week{display:flex;gap:5px;margin-bottom:11px}
.ar-week span{flex:1;text-align:center;font-size:10.5px;font-weight:700;padding:5px 0;
  border-radius:5px;color:var(--ar-text3);background:var(--ar-bg3)}
.ar-week span.on{background:var(--ar-og);color:#0a0a0a}
.ar-class{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ar-text2);
  padding:8px 10px;border-radius:7px;border:1px solid var(--ar-line);margin-bottom:6px}
.ar-class b{color:var(--ar-text);font-size:12px;font-variant-numeric:tabular-nums}
.ar-class.sel{border-color:var(--ar-og);background:var(--ar-og-f)}
.ar-slots{margin-left:auto;font-size:10.5px;color:var(--ar-text3)}
.ar-slots.full{color:var(--ar-text3);text-decoration:line-through}
.ar-book{margin-left:auto;background:var(--ar-og);color:#0a0a0a;font-weight:700;font-size:10.5px;
  padding:4px 11px;border-radius:999px}

/* salon */
.ar-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.ar-chips span{font-size:11px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--ar-line);color:var(--ar-text2)}
.ar-chips span.on{border-color:var(--ar-og);background:var(--ar-og-f);color:var(--ar-og);font-weight:600}
.ar-sublab{font-size:11px;color:var(--ar-text3);margin-bottom:9px}
.ar-slotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ar-slotgrid span{text-align:center;font-size:11.5px;padding:7px 0;border-radius:6px;
  border:1px solid var(--ar-line);color:var(--ar-text2);font-variant-numeric:tabular-nums}
.ar-slotgrid span.on{border-color:var(--ar-og);background:var(--ar-og);color:#0a0a0a;font-weight:700}
.ar-slotgrid span.dim{opacity:.32;text-decoration:line-through}
.ar-confirm{margin-top:11px;text-align:center;background:var(--ar-og);color:#0a0a0a;
  font-weight:700;font-size:11.5px;padding:9px;border-radius:7px}

@media(max-width:420px){
  .ar-dsplit{gap:12px}
  .ar-coffee{width:70px;height:70px}
}

/* ─── 4. COST CALCULATOR ─────────────────────────────────────────── */
.ar-calc{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;margin-top:26px}
@media(max-width:900px){.ar-calc{grid-template-columns:1fr}}
.ar-opt{display:flex;justify-content:space-between;align-items:center;padding:13px 0;
  border-bottom:1px solid var(--ar-line);gap:14px}
.ar-opt:last-child{border-bottom:none}
.ar-opt b{display:block;font-size:14.5px;font-weight:600;color:var(--ar-text)}
.ar-opt span{font-size:12.5px;color:var(--ar-text3)}
.ar-sw{position:relative;width:46px;height:26px;flex-shrink:0}
.ar-sw input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2;margin:0}
.ar-sw i{position:absolute;inset:0;background:#2c2c2c;border-radius:999px;transition:.25s}
.ar-sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:#fff;border-radius:50%;transition:.25s}
.ar-sw input:checked+i{background:var(--ar-og)}
.ar-sw input:checked+i::after{left:23px}
.ar-pages{display:flex;align-items:center;gap:12px}
.ar-pages button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ar-line);
  background:var(--ar-bg3);font-size:16px;cursor:pointer;color:var(--ar-text);line-height:1}
.ar-pages b{font-family:var(--ar-mono);min-width:20px;text-align:center}
.ar-totals{display:flex;flex-direction:column;gap:14px;justify-content:center}
.ar-tote{border:1px solid var(--ar-line);border-radius:var(--ar-radius);padding:22px;background:var(--ar-bg2)}
.ar-tote .l{font-family:var(--ar-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ar-text3)}
.ar-tote .a{font-family:var(--ar-font);font-weight:700;letter-spacing:-.03em;font-size:clamp(30px,3.6vw,44px);margin-top:6px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ar-text3)}
.ar-tote .n{font-size:13px;color:var(--ar-text3);margin-top:4px}
.ar-tote.ar-us{border:2px solid var(--ar-og);background:var(--ar-og-f)}
.ar-tote.ar-us .a{color:var(--ar-og)}
.ar-tote.ar-us .n{color:var(--ar-text2)}
.ar-5yr{font-size:13.5px;color:var(--ar-text3);text-align:center}
.ar-5yr b{color:var(--ar-text)}

/* ─── 5. ANIMATION HELPERS ───────────────────────────────────────── */
[data-ar-reveal]{will-change:transform,opacity}
.ar-noanim [data-ar-reveal]{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ar-drop{height:auto}
  .ar-stage{position:relative;height:auto;min-height:70vh;padding:70px 0}
  .ar-streaks,.ar-hint{display:none}
  .ar-locked{opacity:1;transform:none}
}
@media(max-width:820px){.ar-drop{height:210vh}.ar-sec{padding:64px 0}}