/* ═══════════════════════════════════════════════════════════
   CryptoMiners - design system

   Calibrated against hearstcorporation.io, measured at 1440px:
     H1 80px / weight 400 / ls -0.007em / lh 1.0
     H2 48px / weight 400 / ls -0.01em  / lh 1.1
     H3 16px / weight 500 / ls -0.025em / lh 1.2   ← headings stay small
     body 16px / lh 1.5
     section padding 128px · page gutter 64px · content 1300px
     true black ground, one typeface, accent used sparingly

   The discipline is restraint: light heading weights, small
   sub-headings, flat surfaces, and space doing the work that
   borders and gradients would otherwise do.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ground - true black, like the reference */
  --bg:#000000;
  --s1:#151517;
  --s2:#1C1C1F;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  /* Borders that ARE the control (input underlines, button outlines, the
     segmented control) need 3:1 against their surface under WCAG 1.4.11.
     --line-2 is 1.66:1 on black - fine as decoration, not as an edge a
     user has to find. */
  --line-ctl:rgba(255,255,255,.42);

  /* brand - gold is the CryptoMiners logo, used sparingly */
  --gold:#F9B41A;
  --gold-hi:#FFC646;
  --on-gold:#0A0A0A;
  --green:#57C98A;

  /* text
     --fg-3 was #6E6E74: 4.15:1 on black, 3.36:1 on --s2 - under the 4.5:1 AA
     floor on every surface it is used on, and it carries form labels, spec
     labels, kickers, footer headings and the account demo-mode notice.
     #8A8A90 clears AA everywhere (6.12 / 5.31 / 4.95) and still reads a clear
     step quieter than --fg-2. */
  --fg:#F5F4F1;
  --fg-2:#ABABB0;
  --fg-3:#8A8A90;

  /* type - one family */
  --ui:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --red:#FF9C9E;

  /* rhythm - --maxw is the OUTER box, so content lands at 1300px */
  --gutter:clamp(24px,4.4vw,64px);
  --sec:clamp(72px,9vw,128px);
  --sec-sm:clamp(56px,6vw,80px);
  --maxw:1428px;
  --card-pad:clamp(26px,3vw,40px);
  --card-divide:26px;
  --nav-h:76px;

  --e:cubic-bezier(.16,1,.3,1);

  /* deliberate off-palette exception: WhatsApp brand green for the chat fab */
  --wa:#25D366;
  --on-wa:#fff;
  --r:10px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ui);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,video,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

/* Headings are light. This single rule is most of the look. */
h1,h2,h3,h4{ font-weight:400; margin:0; }

::selection{ background:var(--gold); color:var(--on-gold); }

:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:3px;
}

.skip-link{
  position:fixed; top:10px; left:10px; z-index:300;
  transform:translateY(-180%);
  background:var(--gold); color:var(--on-gold); font-weight:500;
  padding:10px 16px; border-radius:6px; text-decoration:none;
  transition:transform .2s var(--e);
}
.skip-link:focus{ transform:none; }

/* ── type scale ───────────────────────────────────────────
   FOUR ramps and SIX fixed steps. That is the whole scale.

   The rule was documented but not kept: this file had grown to 22 discrete
   font sizes - 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5 all in use at once -
   plus seven clamp() ramps including three near-duplicate pairs
   (30/3.4/48 next to 34/3.6/48, 40/5/68 next to 40/5.4/76). Sizes that close
   together are not a hierarchy, they are noise.

     display  clamp(40px,5.4vw,76px)  .display .ratecard__v
     h2       clamp(30px,3.4vw,48px)  .h2 .seq__cap h2 .stat__v
     t-lg     clamp(22px,2.2vw,28px)  card titles, .kpi b, .auth__title,
                                      .post__body h2, .legal h2, .drawer a
     t-sm     16px                    sub-heads

     11 · 13 · 14 · 15 · 17 · 19      badges, meta, labels, body, ledes

   Add a selector to a group. Do not add a font-size to a component. */
.display{
  font-size:clamp(40px,5.4vw,76px);
  font-weight:600; letter-spacing:-.03em; line-height:1.02;
}
.h2,.seq__cap h2{
  font-size:clamp(30px,3.4vw,48px);
  font-weight:600; letter-spacing:-.025em; line-height:1.08;
}
/* Two title tiers and no more. Every card heading references one of these -
   ad-hoc per-component clamp() values are what let the scale drift. */
.t-lg,.vs h3,.calc__head h3,.cool__top h3,.office h3{
  font-size:clamp(22px,2.2vw,28px); font-weight:500; letter-spacing:-.02em; line-height:1.15;
}
.t-sm,.h3,h3,.tier__name,.acc__h,.loc h3,.cool__sub,.foot__nav h4,.flow b,.pd__sub,.faq__q{
  font-size:16px; font-weight:500; letter-spacing:-.025em; line-height:1.2;
}

.kicker{
  font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--fg-3); display:flex; align-items:baseline; gap:12px; margin-bottom:24px;
}
.kicker b{ color:var(--gold); font-weight:500; }


/* ── layout ─────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--sec); position:relative; }

/* Section header: heading left, supporting note right. No rule line -
   space separates the header from the content instead. */
.sec__head{
  display:grid; gap:24px;
  margin-bottom:clamp(40px,5vw,72px);
}
@media (min-width:900px){
  .sec__head{ grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); align-items:end; }
}
.sec__note{ color:var(--fg-2); font-size:16px; line-height:1.5; max-width:46ch; }

/* ── buttons ────────────────────────────────────────────── */
.btn{
  --bg-b:transparent; --fg-b:var(--fg); --bd:var(--line-ctl);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 22px; border-radius:100px;
  background:var(--bg-b); color:var(--fg-b); border:1px solid var(--bd);
  font-size:15px; font-weight:500; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .22s var(--e), border-color .22s var(--e), color .22s var(--e);
}
.btn:hover{ --bd:var(--fg); }
.btn--gold{ --bg-b:var(--gold); --fg-b:var(--on-gold); --bd:var(--gold); font-weight:600; }
.btn--gold:hover{ --bg-b:var(--gold-hi); --bd:var(--gold-hi); }
.btn--glass{ --bg-b:rgba(255,255,255,.06); }
.btn--glass:hover{ --bg-b:rgba(255,255,255,.12); --bd:var(--fg); }
.btn--sm{ min-height:36px; padding:7px 16px; font-size:14px; }
.btn--block{ display:flex; width:100%; }

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--e), transform .35s var(--e);
}
.nav.is-solid{ background:rgba(0,0,0,.8); backdrop-filter:blur(16px); }
.nav.is-up{ transform:translateY(-100%); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:18px var(--gutter);
  display:flex; align-items:center; gap:24px;
}
.brand{ flex:none; display:block; }
.brand img{ height:30px; width:auto; }

.nav__links{ display:none; gap:30px; margin-inline:auto; align-items:center; }
.nav__links a{
  font-size:14px; font-weight:400; color:var(--fg-2); text-decoration:none;
  transition:color .2s;
}
.nav__links a:hover{ color:var(--fg); }
@media (min-width:1040px){ .nav__links{ display:flex; } }

/* Products dropdown - same pattern as cryptominers.ae, in our tokens */
.prod{ position:relative; }
.prod__btn{
  display:flex; align-items:center; gap:7px;
  font-size:14px; font-weight:400; color:var(--fg-2);
  background:none; border:0; padding:0; cursor:pointer;
  line-height:1.5; /* identical line box to the sibling links */
  transition:color .2s;
}
.prod__btn:hover,.prod__btn[aria-expanded="true"]{ color:var(--fg); }
.prod__btn svg{ transition:transform .3s var(--e); }
.prod__btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.prod__menu{
  /* same panel language as .cselect__list - one dropdown family site-wide */
  position:absolute; top:calc(100% + 14px); left:-14px;
  width:248px; padding:6px;
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 20px 48px rgba(0,0,0,.5);
}
.prod__menu::before{ /* hover bridge so the pointer can travel to the panel */
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.prod__i{
  display:block; padding:11px 12px; border-radius:6px;
  font-size:15px; color:var(--fg-2); text-decoration:none;
  transition:background .15s, color .15s;
}
.prod__i:hover{ background:var(--s2); color:var(--fg); }
.prod__i--all{ padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--line); border-radius:6px 6px 0 0; }
.prod__i--all b{ display:block; font-size:15px; font-weight:500; color:var(--fg); }
.prod__i--all i{ display:block; font-style:normal; font-size:13px; color:var(--fg-3); margin-top:3px; }

.nav__end{ display:flex; align-items:center; gap:10px; margin-left:auto; }
@media (min-width:1040px){ .nav__end{ margin-left:0; } }

.nav__wa{
  display:none; align-items:center; gap:7px;
  font-size:14px; color:var(--fg-2); text-decoration:none;
  transition:color .2s;
}
.nav__wa:hover{ color:var(--fg); }
@media (min-width:720px){ .nav__wa{ display:inline-flex; } }
/* The primary conversion action used to vanish below 560px, so on a phone -
   where most of this traffic is - there was no quote CTA in the nav at all.
   It stays, just tighter. */
.nav__end .btn{ display:inline-flex; }
@media (max-width:559px){
  .nav__end{ gap:4px; }
  .nav__end .btn{ padding:9px 14px; font-size:13px; }
  .nav__ic{ width:36px; }
}
@media (max-width:479px){
  /* on phones the account icon and the DHS/$ toggle give way before the CTA
     does - both are reachable from the drawer. Measured: with the toggle in the
     bar, a 390px screen pushed the burger 5-20px past the right edge. Matched
     by href so the 80-odd blog pages (which link ../account.html) are covered. */
  .nav__end .nav__ic[href$="account.html"]{ display:none; }
  .nav__end .curtog{ display:none; }
}
@media (max-width:389px){
  .nav__end .btn{ padding:9px 12px; font-size:12.5px; }
}

.burger{
  width:40px; height:40px; border-radius:100px; flex:none;
  background:transparent; border:1px solid var(--line-ctl);
  display:grid; place-content:center; gap:5px; cursor:pointer;
}
.burger span{ width:15px; height:1px; background:var(--fg); display:block; transition:transform .3s var(--e); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }
@media (min-width:1040px){ .burger{ display:none; } }

.drawer{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:99;
  background:rgba(0,0,0,.97); backdrop-filter:blur(20px);
  padding:16px var(--gutter) 32px; overflow-y:auto;
  display:flex; flex-direction:column;
}
.drawer a{
  display:flex; align-items:baseline; gap:16px;
  padding:20px 0; text-decoration:none; border-bottom:1px solid var(--line);
  /* full-screen mobile nav - the t-lg tier, not a body size */
  font-size:clamp(22px,2.2vw,28px); font-weight:400; letter-spacing:-.02em;
}
.drawer a i{ font-size:13px; font-style:normal; color:var(--fg-3); }
.drawer__foot{ margin-top:auto; padding-top:28px; }
.drawer__foot a{ border:0; font-size:15px; padding:0; }
.drawer__foot p{ margin-top:16px; text-align:center; font-size:13px; color:var(--fg-3); }

/* ═══════════ SCROLL SEQUENCE ═══════════════════════════ */
/* HOW LONG THE WALKTHROUGH TAKES TO SCROLL THROUGH.
   This was 760vh, so the answer depended on the monitor: 5,280 px of scrolling
   on a small laptop but 9,504 px on a large screen - nearly twice as long for
   the same walkthrough. A fixed pixel distance makes the duration the same for
   everybody, which is the only way "20 seconds" can mean anything.

   3,000 px of travel, with the full 1,568-frame walkthrough mapped onto it:
     ~150 px/s (crawling)            -> 20 s
     ~250 px/s (slow, watching it)   -> 12 s
     ~400 px/s (normal wheel scroll) ->  7 s
   20 s is the SLOW bound - you have to be crawling to take longer than that.
   One number to change if you want it longer or shorter. */
:root{ --seq-travel:3000px; }
.seq{ position:relative; height:calc(100svh + var(--seq-travel)); background:var(--bg); }
.seq__stage{ position:sticky; top:0; height:100svh; width:100%; overflow:hidden; display:grid; }
.seq__stage > *{ grid-area:1/1; }
.seq__canvas{ width:100%; height:100%; }
.seq__still-wrap{ display:grid; place-items:center; background:var(--bg); }
.seq__still-wrap video,.seq__still{ width:100%; height:100%; object-fit:cover; }

.seq__scrim{
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.1) 22%, rgba(0,0,0,0) 40%),
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 24%, rgba(0,0,0,.16) 48%, rgba(0,0,0,0) 68%),
    linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,0) 72%);
}

.seq__block{
  /* Matches .wrap geometry so the H1 shares a left edge with every
     heading below it, instead of hanging ~70px further left. */
  place-self:end center;
  width:100%; max-width:var(--maxw);
  padding-inline:var(--gutter);
  margin:0 0 clamp(64px,9vh,112px);
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--e), transform .6s var(--e);
  pointer-events:none;
}
.seq__block.is-on{ opacity:1; transform:none; pointer-events:auto; }

.seq__hero .kicker{ color:var(--fg-2); }
.display span{ color:var(--gold); }
.lede-hero{
  margin-top:26px; color:var(--fg-2); font-size:17px; line-height:1.5;
}
.lede-hero b{ color:var(--fg); font-weight:500; }
.row-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }

.seq__hero > *{ max-width:820px; }
.seq__cap > *{ max-width:560px; }
.cap__no{ font-size:13px; color:var(--gold); display:block; margin-bottom:16px; }
.seq__cap p{ margin-top:16px; color:var(--fg-2); font-size:16px; }

.seq__rail{
  place-self:stretch end;
  width:1px; margin:clamp(88px,14vh,150px) clamp(16px,2.2vw,30px);
  background:var(--line-2); overflow:hidden;
}
.seq__rail span{ display:block; width:100%; height:0%; background:var(--gold); }
@media (max-width:899px){ .seq__rail{ display:none; } }

/* The readout sits on top of whatever the first frame happens to be - here a
   bright morning sky. As 12px --fg-3 with nothing behind it, it was
   effectively invisible, so the hero just looked frozen rather than loading.
   It now carries its own surface. */
.seq__hud{
  place-self:start center; width:100%; max-width:var(--maxw);
  padding-inline:var(--gutter); margin:82px 0 0; justify-content:flex-end;
  display:flex; align-items:center;
  font-size:13px; color:var(--fg-3);
  transition:opacity .5s var(--e);
  pointer-events:none;
}
.seq__hud > *{ position:relative; z-index:1; }
.seq__hud-inner{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:100px;
  background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  color:var(--fg-2);
}
.seq__hud.is-done{ opacity:0; pointer-events:none; }
.seq__hud-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.25; } }
.seq__hud-pct{ color:var(--gold); font-variant-numeric:tabular-nums; }
.seq__hud-bar{ width:52px; height:2px; border-radius:2px; background:rgba(255,255,255,.24); overflow:hidden; }
.seq__hud-bar i{ display:block; height:100%; width:0%; background:var(--gold); transition:width .25s linear; }
@media (max-width:559px){ .seq__hud-txt{ display:none; } }

/* ═══════════ TICKER ════════════════════════════════════ */
.ticker{ border-block:1px solid var(--line); overflow:hidden; padding-block:18px; position:relative; z-index:2; }
.ticker__row{ display:flex; white-space:nowrap; will-change:transform; align-items:center; }
.ticker__row span{ flex:none; padding-inline:26px; font-size:16px; font-weight:400; color:var(--fg-2); }
.ticker__row i{ flex:none; width:3px; height:3px; border-radius:50%; background:var(--fg-3); }

/* ── live coin prices ──────────────────────────────────
   Logo · symbol · price · 24h change. The dash stays put until real numbers
   arrive, and stays put for good if CoinGecko is unreachable. */
.tk{ display:inline-flex; align-items:center; gap:9px; font-variant-numeric:tabular-nums; }
.tk img{ width:22px; height:22px; flex:none; border-radius:50%; }
.tk b{ font-weight:500; color:var(--fg); letter-spacing:-.01em; }
.tk em{ font-style:normal; color:var(--fg-2); }
.tk s{ text-decoration:none; font-size:13px; color:var(--fg-3); }
.tk s.up{ color:var(--green); }
.tk s.down{ color:var(--red); }

/* ═══════════ STATS ═════════════════════════════════════ */
.stats{ border-bottom:1px solid var(--line); position:relative; z-index:2; }
.stats__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
@media (min-width:900px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding:clamp(36px,4.4vw,64px) 24px clamp(36px,4.4vw,64px) 0; }
@media (min-width:900px){ .stat{ padding-right:32px; } }
.stat__k{ display:block; font-size:14px; color:var(--fg-3); margin-bottom:16px; }
.stat__v{
  display:flex; align-items:baseline; gap:2px;
  font-size:clamp(30px,3.4vw,48px); font-weight:600; letter-spacing:-.025em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--gold);
}
.stat__v em{ font-style:normal; font-size:.4em; color:var(--fg-3); margin-left:4px; }
.stat__v em.pre{ margin:0 2px 0 0; }

/* ═══════════ VERSUS ════════════════════════════════════ */
.versus{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:900px){ .versus{ grid-template-columns:1fr 1fr; } }
.vs{ background:var(--s1); padding:var(--card-pad); display:flex; flex-direction:column; }
.vs__tag{ font-size:13px; color:var(--fg-3); }
.vs__tag--gold{ color:var(--gold); }
.vs h3{ margin-top:14px; }
.vs__lead{ margin-top:12px; color:var(--fg-2); font-size:16px; max-width:38ch; }
.vs__list{ margin-top:32px; display:grid; }
.vs__list li{
  display:grid; grid-template-columns:110px 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--line); align-items:baseline;
}
.vs__list b{ font-size:14px; font-weight:400; color:var(--fg-3); }
.vs__list span{ font-size:15px; color:var(--fg-2); }
.vs--b .vs__list span i{ font-style:normal; color:var(--fg); }

.vs__caveat{
  margin-top:32px; color:var(--fg-3); font-size:15px; max-width:84ch; line-height:1.6;
}

/* ═══════════ CALCULATOR ════════════════════════════════ */
.calc{
  margin-top:clamp(40px,5vw,72px);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--s1);
}
.calc__head{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end;
  padding:var(--card-pad); border-bottom:1px solid var(--line);
}
.calc__head .kicker{ margin-bottom:14px; }
.calc__price{ font-size:14px; color:var(--fg-3); }
.calc__price b{ color:var(--fg); font-weight:400; font-variant-numeric:tabular-nums; }
.calc__price span{ display:block; margin-top:4px; font-size:13px; }

.calc__body{ display:grid; grid-template-columns:minmax(0,1fr); }   /* minmax(0,..) - a long <select> option must not widen the card past a phone screen */
@media (min-width:1040px){ .calc__body{ grid-template-columns:minmax(300px,.8fr) 1.2fr; } }

.calc__controls,.calc__out{ min-width:0; }
.calc__controls{
  padding:var(--card-pad); display:grid; gap:26px; align-content:start;
  border-bottom:1px solid var(--line);
}
@media (min-width:1040px){ .calc__controls{ border-bottom:0; border-right:1px solid var(--line); } }
.ctl{ display:grid; gap:12px; }
.ctl--2{ grid-template-columns:1fr 1fr; gap:22px; }
.ctl--2 > div{ display:grid; gap:12px; }
.ctl label{ font-size:14px; color:var(--fg-3); display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.ctl label b{ color:var(--fg); font-weight:400; font-variant-numeric:tabular-nums; }
.ctl select{
  background:var(--bg); border:1px solid var(--line-ctl); border-radius:6px;
  padding:11px 34px 11px 13px; min-height:44px; color:var(--fg);
  font-family:var(--ui); font-size:15px; width:100%; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237F7F7F' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.ctl select:focus{ border-color:var(--fg); }
.ctl__note{ font-size:14px; color:var(--fg-3); line-height:1.55; }

.ctl input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:28px;
  background:transparent; cursor:pointer; margin:0;
}
.ctl input[type=range]::-webkit-slider-runnable-track{ height:1px; background:var(--line-ctl); }
.ctl input[type=range]::-moz-range-track{ height:1px; background:var(--line-ctl); }
/* 12px was under the 24px minimum target size (WCAG 2.5.8) and these are the
   controls the whole calculator turns on. 16px on a 28px row clears it, and
   coarse pointers get more. */
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%; margin-top:-7.5px;
  background:var(--gold); border:0;
  transition:transform .15s var(--e);
}
.ctl input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--gold); border:0; }
.ctl input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.25); }
@media (pointer:coarse){
  .ctl input[type=range]{ height:36px; }
  .ctl input[type=range]::-webkit-slider-thumb{ width:22px; height:22px; margin-top:-10.5px; }
  .ctl input[type=range]::-moz-range-thumb{ width:22px; height:22px; }
}

.calc__out{ padding:var(--card-pad); display:grid; gap:28px; align-content:start; }
.calc__kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 24px; }
@media (min-width:560px){ .calc__kpis{ grid-template-columns:repeat(4,1fr); } }
.kpi span{ display:block; font-size:14px; color:var(--fg-3); }
.kpi b{
  display:block; margin-top:10px; font-size:clamp(22px,2.2vw,28px);
  font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.kpi:last-child b{ color:var(--gold); }

.chart{ margin:0; position:relative; }
.chart canvas{ width:100%; height:260px; display:block; cursor:crosshair; }
.chart canvas:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* hover / keyboard readout - the chart showed the shape of the answer but
   never the number at a given month */
.chart__tip{
  position:absolute; z-index:4; pointer-events:none;
  min-width:172px; padding:12px 14px;
  background:rgba(10,10,12,.94); border:1px solid var(--line-ctl);
  border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-4px);
  transition:opacity .12s var(--e), transform .12s var(--e);
  font-variant-numeric:tabular-nums;
}
.chart__tip.is-on{ opacity:1; transform:none; }
.chart__tip b{ display:block; font-size:13px; font-weight:500; color:var(--fg-3); margin-bottom:9px; }
.chart__tip-r{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--fg-2); margin-top:5px;
}
.chart__tip-r i{ width:9px; height:2px; border-radius:2px; flex:none; }
.chart__tip-r i.lg--mine{ background:var(--gold); }
.chart__tip-r i.lg--hold{ background:var(--green); }
.chart__tip-r em{ margin-left:auto; font-style:normal; font-weight:500; color:var(--fg); }
.chart__tip-d{
  display:block; margin-top:9px; padding-top:8px; border-top:1px solid var(--line);
  font-size:13px; color:var(--fg-3);
}
@media (prefers-reduced-motion:reduce){ .chart__tip{ transition:none; } }
@media (min-width:1040px){ .chart canvas{ height:300px; } }
.chart__legend{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:18px; }
.lg{ font-size:14px; color:var(--fg-3); display:inline-flex; align-items:center; gap:9px; }
.lg::before{ content:""; width:14px; height:1px; background:currentColor; }
.lg--mine{ color:var(--gold); }
.lg--hold{ color:var(--green); }

.calc__verdict{ font-size:16px; color:var(--fg-2); max-width:70ch; }
.calc__verdict b{ color:var(--fg); font-weight:500; }
.calc__verdict .up{ color:var(--gold); }
.calc__verdict .down{ color:var(--red); }
.calc__fine{
  padding:var(--card-pad); border-top:1px solid var(--line);
  font-size:13px; color:var(--fg-3); line-height:1.6;
}

/* ═══════════ AIR vs HYDRO ══════════════════════════════ */
.hi{ color:var(--fg); font-weight:500; }
.cool{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:900px){ .cool{ grid-template-columns:1fr 1fr; } }
.cool__c{ background:var(--s1); display:flex; flex-direction:column; }
.cool__img{ aspect-ratio:16/8; overflow:hidden; background:var(--s2); }
/* Both frames now come from the same shoot, same hall, same light, and are
   cut to the card's exact 16:8 - so the CSS no longer has to grade one toward
   the other. The slight hold-back is just so a white-walled hall does not
   punch a hole in a black page; it lifts on hover. */
.cool__img img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.96);
  transition:transform .8s var(--e), filter .5s var(--e);
}
.cool__c:hover .cool__img img{ filter:none; }
.cool__c:hover .cool__img img{ transform:scale(1.03); }
.cool__body{ padding:var(--card-pad); display:flex; flex-direction:column; flex:1; }
.cool__top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cool__rate{ font-size:clamp(22px,2.2vw,28px); font-weight:600; letter-spacing:-.02em; color:var(--gold); font-variant-numeric:tabular-nums; }
.cool__rate i{ font-style:normal; font-size:.44em; color:var(--fg-3); margin-left:3px; }
.cool__lead{ margin-top:14px; color:var(--fg-2); font-size:16px; padding-bottom:var(--card-divide); }
.cool__sub{ margin-top:0; color:var(--fg-3); padding-top:var(--card-divide); border-top:1px solid var(--line); }
.cool__txt{ margin-top:12px; color:var(--fg-2); font-size:15px; padding-bottom:var(--card-divide); }
.cool__list{ margin-top:14px; display:grid; gap:12px; }
.cool__list li{ position:relative; padding-left:20px; font-size:15px; color:var(--fg-2); }
.cool__list li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--gold); }
.cool__foot{
  margin-top:36px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
.cool__foot p{ color:var(--fg-2); font-size:16px; max-width:62ch; }
.cool__foot b{ color:var(--fg); font-weight:500; }

/* ═══════════ HOSTING ═══════════════════════════════════ */
.ratecard{
  display:grid; gap:24px; align-items:center; margin-bottom:40px;
  padding-bottom:40px; border-bottom:1px solid var(--line);
}
@media (min-width:720px){ .ratecard{ grid-template-columns:auto 1fr; gap:clamp(36px,6vw,88px); } }
.ratecard__l{ display:grid; gap:10px; }
.ratecard__k{ font-size:14px; color:var(--fg-3); }
.ratecard__v{
  font-size:clamp(40px,5.4vw,76px); font-weight:600; letter-spacing:-.03em;
  color:var(--gold); line-height:1; font-variant-numeric:tabular-nums;
}
.ratecard__v i{ font-style:normal; font-size:.28em; color:var(--fg-3); margin-left:4px; }
.ratecard__p{ color:var(--fg-2); font-size:16px; max-width:58ch; }
.ratecard__p b{ color:var(--fg); font-weight:500; }

.tiers{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:900px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
.tier{ background:var(--s1); padding:var(--card-pad); position:relative; }
/* The middle tier already carried .tier--hot in the markup with nothing
   attached to it - "Most hosted" was a gold word and no more. It now reads as
   the recommended option before you get to the label. */
.tier--hot{ background:var(--s2); }
.tier--hot::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--gold);
}
.tier__flag{ font-size:13px; color:var(--gold); display:block; margin-bottom:14px; }
.tier__flag--soon{ color:var(--fg-3); }
.tier__top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.tier__for{ margin-top:10px; color:var(--fg-3); font-size:15px; padding-bottom:var(--card-divide); }
.tier__list{ display:grid; gap:12px; padding-top:var(--card-divide); border-top:1px solid var(--line); }
.tier__list li{ position:relative; padding-left:20px; font-size:15px; color:var(--fg-2); }
.tier__list li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--gold); }

.host-flow{ margin-top:clamp(40px,5vw,72px); display:grid; gap:clamp(32px,4vw,64px); }
@media (min-width:900px){ .host-flow{ grid-template-columns:1.2fr .8fr; align-items:start; } }
.flow{ counter-reset:s; }
.flow li{
  counter-increment:s;
  display:grid; grid-template-columns:auto 1fr; column-gap:20px; row-gap:6px;
  padding:22px 0; border-top:1px solid var(--line);
}
.flow li::before{ content:counter(s,decimal-leading-zero); grid-row:1/3; font-size:13px; color:var(--fg-3); padding-top:3px; }
.flow span{ color:var(--fg-2); font-size:15px; }

.host-note{ display:grid; gap:24px; align-content:start; }
.host-note p{ color:var(--fg-2); font-size:16px; }
.host-note b{ color:var(--fg); font-weight:500; }

/* ═══════════ ACCORDION ═════════════════════════════════ */
.acc{ display:grid; gap:8px; }
@media (min-width:900px){ .acc{ display:flex; height:min(60vh,500px); min-height:380px; gap:8px; } }
.acc__p{
  position:relative; overflow:hidden; border-radius:var(--r);
  border:0; background:var(--s1);
  cursor:pointer; text-align:left; padding:0; appearance:none;
  min-height:84px;
  transition:flex .6s var(--e), min-height .5s var(--e);
}
@media (min-width:900px){ .acc__p{ flex:1; min-height:0; } .acc__p.is-open{ flex:4.2; } }
@media (max-width:899px){ .acc__p.is-open{ min-height:290px; } }
/* .62 on source photography that was already dim turned the three closed
   panels into blank black slabs. The panels now carry properly-lit frames
   from the facility shoot, so this only needs to hold them back far enough
   for the gradient to carry the caption. */
.acc__p img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.86);
  transition:transform .8s var(--e), filter .5s var(--e);
}
.acc__p.is-open img{ filter:brightness(1); transform:scale(1.03); }
/* The panels now hold properly-exposed frames, some with white walls right
   where the caption sits - so the scrim has to work harder than it did over
   the old murky ones. */
.acc__p::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.94) 4%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.06) 100%);
}
.acc__spine{
  position:absolute; z-index:2; left:18px; bottom:22px;
  font-size:15px; font-weight:500; color:var(--fg);
  text-shadow:0 1px 14px rgba(0,0,0,.95);
  transition:opacity .3s var(--e);
}
@media (min-width:900px){ .acc__spine{ writing-mode:vertical-rl; text-orientation:mixed; } }
.acc__p.is-open .acc__spine{ opacity:0; }
.acc__c{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(22px,2.6vw,34px); display:block;
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--e) .12s, transform .4s var(--e) .12s;
}
.acc__p.is-open .acc__c{ opacity:1; transform:none; }
.acc__n{ display:block; font-size:13px; color:var(--gold); margin-bottom:14px; }
.acc__h{ display:block; }
.acc__d{ display:block; margin-top:12px; color:var(--fg-2); font-size:15px; max-width:44ch; }

/* ═══════════ GALLERY ═══════════════════════════════════ */
.gal{ display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .gal{ grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; } }
.gal__i{ margin:0; position:relative; overflow:hidden; border-radius:var(--r); background:var(--s1); }
.gal__i img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; filter:brightness(.86); transition:transform .8s var(--e), filter .5s; }
.gal__i:hover img{ transform:scale(1.03); filter:brightness(1); }
.gal__i figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px;
  font-size:14px; color:var(--fg-2);
  background:linear-gradient(to top, rgba(0,0,0,.9), transparent);
}
@media (min-width:900px){
  .gal__i--a{ grid-column:span 2; grid-row:span 2; }
  .gal__i--a img{ aspect-ratio:auto; height:100%; }
}

/* Built in-house fabrication grid */
.buildgrid{ display:grid; gap:8px; grid-template-columns:repeat(2,1fr); margin-top:clamp(28px,3.5vw,44px); }
@media (min-width:900px){ .buildgrid{ grid-template-columns:repeat(4,1fr); } }
.buildgrid__i{ margin:0; position:relative; overflow:hidden; border-radius:var(--r); background:var(--s1); }
.buildgrid__i img{ display:block; width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; filter:brightness(.82); transition:transform .8s var(--e), filter .5s; }
.buildgrid__i:hover img{ transform:scale(1.04); filter:brightness(1); }
.buildgrid__i figcaption{ position:absolute; left:0; right:0; bottom:0; padding:15px 18px; font-size:13.5px; font-weight:500; color:var(--fg); background:linear-gradient(to top, rgba(0,0,0,.92), transparent); }

/* hosting-floor banner */
.host-hero{ margin:clamp(24px,3vw,38px) 0 clamp(20px,2.6vw,30px); position:relative; border-radius:var(--r); overflow:hidden; }
/* height:auto matters: the <img> carries height="600" as an attribute, which
   otherwise wins over aspect-ratio and squeezes phones into a 345x600 portrait crop */
.host-hero img{ display:block; width:100%; height:auto; aspect-ratio:16/6; object-fit:cover; filter:brightness(.82); }
/* phones get a dedicated 4:3 crop (host-floor-m.webp) - a 16:6 strip is a sliver at 390px */
@media (max-width:767px){ .host-hero img{ aspect-ratio:4/3; } }
.host-hero figcaption{ position:absolute; left:0; right:0; bottom:0; padding:16px 20px; font-size:13.5px; font-weight:500; color:var(--fg); background:linear-gradient(to top, rgba(0,0,0,.85), transparent); }

/* ═══════════ ROTATOR ═══════════════════════════════════
   The statement section it belonged to is gone. */
@media (prefers-reduced-motion:reduce){
    }

/* ═══════════ GLOBE / LOCATIONS ═════════════════════════ */
.globe{
  position:relative; overflow:hidden; isolation:isolate; background:var(--bg);
  padding-block:var(--sec); min-height:min(74svh,700px);
  display:grid; align-items:center;
}
/* .55 plus two scrims left the earth all but invisible - the section read as
   a black hole with two addresses in it, and the video was 570KB of nothing. */
.globe__v{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:brightness(.85); }
.globe__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.14) 28%, rgba(0,0,0,0) 48%),
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.34) 58%, rgba(0,0,0,0) 78%);
}
.globe__in{ display:grid; gap:clamp(48px,7vw,96px); }
.globe__head{ max-width:720px; }
.globe__note{
  margin-top:22px; max-width:60ch;
  color:rgba(255,255,255,.86); font-size:16px; line-height:1.55;
  text-shadow:0 1px 12px rgba(0,0,0,.9);
}
/* six locations, so a fixed ladder rather than auto-fit - auto-fit put four
   on a row at 1440 and left a single orphan on the second */
.globe__grid{ display:grid; gap:36px 40px; }
@media (min-width:560px){ .globe__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .globe__grid{ grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,56px); } }
.office__city{ font-size:14px; color:var(--fg-3); margin-bottom:16px; }
.office__addr{ margin-top:18px; color:rgba(255,255,255,.88); font-size:16px; text-shadow:0 1px 12px rgba(0,0,0,.9); }
.office h3{ text-shadow:0 2px 20px rgba(0,0,0,.9); }
.office a{
  text-shadow:0 1px 12px rgba(0,0,0,.9);
  display:inline-block; margin-top:14px; text-decoration:none; font-size:16px;
  font-variant-numeric:tabular-nums; color:var(--fg); transition:color .2s;
}
.office a:hover{ color:var(--gold); }

/* ═══════════ CONTACT ═══════════════════════════════════ */
.contact{ display:grid; gap:clamp(32px,4vw,64px); }
@media (min-width:900px){ .contact{ grid-template-columns:.8fr 1.2fr; align-items:start; } }
.contact__side{ display:grid; gap:0; align-content:start; }
.loc{ padding:26px 0; border-top:1px solid var(--line); }
.loc:last-child{ border-bottom:1px solid var(--line); }
.loc h3{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.loc h3 span{ font-size:13px; color:var(--fg-3); }
.loc p{ margin-top:12px; color:var(--fg-2); font-size:15px; }
.loc a{ display:block; margin-top:12px; text-decoration:none; font-variant-numeric:tabular-nums; transition:color .2s; }
.loc a:hover{ color:var(--gold); }

/* the international branches - a compact list, not four more full blocks */
.loc__branches{ display:grid; gap:14px; margin-top:16px; }
.loc__branches li{ color:var(--fg-2); font-size:15px; line-height:1.5; }
.loc__branches b{ display:block; color:var(--fg); font-weight:500; margin-bottom:2px; }

.form{ display:grid; gap:20px; align-content:start; }
.f2{ display:grid; gap:20px; }
@media (min-width:560px){ .f2{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:10px; }
.field label{ font-size:14px; color:var(--fg-3); }
.field input,.field textarea,.field select{
  background:transparent; border:0; border-bottom:1px solid var(--line-ctl); border-radius:0;
  padding:10px 0; min-height:44px;
  color:var(--fg); font-family:var(--ui); font-size:16px;
  width:100%; resize:vertical;
  transition:border-color .22s;
}
.field select{
  appearance:none; cursor:pointer; padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237F7F7F' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
}
.ctl select option,.field select option{ background:var(--s1); color:var(--fg); }
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-3); }
.field input:focus,.field textarea:focus,.field select:focus{
  border-bottom-color:var(--gold);
  box-shadow:0 1px 0 0 var(--gold);
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:none; }
.field.is-bad input,.field.is-bad textarea{ border-bottom-color:var(--red); }
.form .btn{ margin-top:8px; }
.form__status{ font-size:14px; color:var(--fg-2); min-height:1.3em; }
.form__status.is-ok{ color:var(--green); }
.form__status.is-bad{ color:var(--red); }

/* ═══════════ FOOTER ════════════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding-top:var(--sec-sm); }
.foot__top{ display:grid; gap:48px; padding-bottom:var(--sec-sm); }
@media (min-width:900px){ .foot__top{ grid-template-columns:1fr 1.3fr; } }
.foot__brand img{ height:34px; width:auto; }
.foot__brand p{ margin-top:20px; color:var(--fg-3); font-size:15px; max-width:34ch; }
.foot__nav{ display:grid; gap:36px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.foot__nav h4{ color:var(--fg); margin-bottom:18px; }
.foot__nav a{ display:block; color:var(--fg-2); text-decoration:none; font-size:15px; padding:6px 0; transition:color .2s; }
.foot__nav a:hover{ color:var(--fg); }
.foot__legal{
  border-top:1px solid var(--line); padding-block:26px 32px;
  display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between;
  font-size:13px; color:var(--fg-3);
}

/* ═══════════ REVEAL ════════════════════════════════════ */
.reveal{ opacity:0; transform:translateY(16px); }
@media (prefers-reduced-motion:no-preference){
  .reveal{ transition:opacity .6s var(--e), transform .6s var(--e); }
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--d1{ transition-delay:.06s; }
.reveal--d2{ transition-delay:.12s; }
.reveal--d3{ transition-delay:.18s; }

/* Degraded sequence layout - used by BOTH reduced-motion (media query
   below) and phones (sequence.js adds .is-degraded: the 44MB frame scrub
   is a liability on mobile, so phones get the looping video hero with
   the chapters stacked as normal flow). */
.seq.is-degraded{ height:auto; }
.seq.is-degraded .seq__stage{ position:static; height:auto; display:block; }
.seq.is-degraded .seq__canvas,
.seq.is-degraded .seq__scrim,
.seq.is-degraded .seq__rail,
.seq.is-degraded .seq__hud{ display:none; }
.seq.is-degraded .seq__block{ margin:0 auto; padding-block:var(--sec-sm); opacity:1; transform:none; pointer-events:auto; }
.seq.is-degraded .seq__still-wrap video{ height:auto; aspect-ratio:16/9; margin-top:var(--nav-h); }

/* Phones got a 16:9 letterbox strip of video with the headline dropped onto
   flat black underneath - a hero with no hero in it. Give the video real
   height and put the H1 back on top of it, which is the composition the
   desktop scrub delivers. The four chapter captions still stack below. */
@media (max-width:767px){
  .seq.is-degraded .seq__stage{ position:relative; }
  .seq.is-degraded .seq__still-wrap{
    position:absolute; inset:0 0 auto 0; height:100svh; z-index:0;
  }
  .seq.is-degraded .seq__still-wrap video{
    height:100%; width:100%; aspect-ratio:auto; object-fit:cover; margin-top:0;
  }
  .seq.is-degraded .seq__scrim{
    display:block; position:absolute; inset:0 0 auto 0; height:100svh; z-index:1;
  }
  .seq.is-degraded .seq__hero{
    position:relative; z-index:2;
    min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
    padding-block:var(--nav-h) calc(var(--sec-sm) + 26px);
  }
  /* clear the WhatsApp fab, which otherwise parks on the second CTA */
  .seq.is-degraded .seq__hero .row-cta{ padding-bottom:18px; }
}

@media (prefers-reduced-motion:reduce){
  /* All five sequence blocks share one grid cell, so simply un-hiding them
     stacks the hero and every chapter caption on top of each other. Unstick
     the section and let them flow instead. */
  .seq{ height:auto; }
  .seq__stage{ position:static; height:auto; display:block; }
  .seq__canvas,.seq__scrim,.seq__rail,.seq__hud{ display:none; }
  .seq__block{ margin:0 auto; padding-block:var(--sec-sm); }
  .reveal,.seq__block{ opacity:1; transform:none; }
  .seq__hud-dot{ animation:none; }
  .acc__p img,.gal__i img,.cool__img img{ transition:none; }
}

/* ═══════════ NARROW ════════════════════════════════════ */
@media (max-width:719px){
  .seq__scrim{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.14) 18%, rgba(0,0,0,0) 34%),
      linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.42) 50%, rgba(0,0,0,0) 74%);
  }
  .seq__block{ margin-bottom:clamp(44px,6vh,72px); }
  .row-cta .btn{ flex:1 1 auto; }
  .display br{ display:none; }
  .vs__list li{ grid-template-columns:1fr; gap:4px; }
  .ctl--2{ grid-template-columns:1fr; }
  .cool__foot{ flex-direction:column; align-items:flex-start; }
  .cool__foot .btn{ width:100%; }
  .stat{ padding-right:20px; }
}

/* ═══════════ PRODUCTS PAGE ═════════════════════════════ */
.pagehead{ padding-top:calc(var(--nav-h) + clamp(40px,6vw,72px)); }

.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(28px,3.5vw,48px); }
.pillbtn{
  min-height:40px; padding:8px 18px; border-radius:100px;
  background:none; border:1px solid var(--line-ctl); color:var(--fg-2);
  font-size:14px; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.pillbtn:hover{ border-color:var(--fg); color:var(--fg); }
.pillbtn.is-on{ background:var(--fg); border-color:var(--fg); color:var(--bg); }
/* brand row sits tight under the category pills, one visual step quieter */
.pills--brand{ gap:6px; margin-top:calc(-1 * clamp(20px,2.6vw,38px)); }
.pillbtn--sm{ font-size:12.5px; padding:7px 13px; color:var(--fg-3); }

/* toolbar: search + availability */
.ptools{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.psearch{ position:relative; flex:1 1 300px; max-width:440px; }
.psearch svg{
  position:absolute; left:17px; top:50%; transform:translateY(-50%);
  color:var(--fg-3); pointer-events:none;
}
.psearch input{
  width:100%; min-height:44px; padding:10px 20px 10px 44px;
  border-radius:100px; background:var(--s1); border:1px solid var(--line-ctl);
  color:var(--fg); font-family:var(--ui); font-size:15px;
  transition:border-color .2s;
}
.psearch input::placeholder{ color:var(--fg-3); }
.psearch input:focus{ border-color:var(--gold); outline:none; }

.avail{
  display:flex; gap:4px; padding:4px;
  background:var(--s1); border:1px solid var(--line); border-radius:100px;
}
.avail button{
  min-height:36px; padding:6px 16px; border-radius:100px; border:0;
  background:none; color:var(--fg-2); font-size:14px; cursor:pointer;
  transition:background .2s, color .2s;
}
.avail button:hover{ color:var(--fg); }
.avail button.is-on{ background:var(--fg); color:var(--bg); }

.pcount{ margin-left:auto; font-size:14px; color:var(--fg-3); font-variant-numeric:tabular-nums; }

.pempty{ padding:clamp(40px,6vw,72px) 0; }
.pempty p{ margin:12px 0 24px; color:var(--fg-2); max-width:52ch; }

/* One column on phones. At 2-up on a 390px screen each card was ~160px wide,
   which forced "Dhs. 54,200" to wrap onto two lines on every card and squeezed
   the title to three. A single column is also the honest shape for a purchase
   that starts at four figures. */
.plist{ display:grid; gap:8px; grid-template-columns:1fr; }
@media (min-width:480px){ .plist{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:720px){ .plist{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1040px){ .plist{ grid-template-columns:repeat(4,1fr); } }
/* one card per row: a wider photo and a full-width action, which is what a
   four-figure purchase deserves on a phone */
@media (max-width:479px){
  .plist .pcard__img{ aspect-ratio:4/3; }
  .plist .pcard__b{ padding:16px 18px 18px; }
}

.pcard{ border-radius:var(--r); overflow:hidden; background:var(--s1); }
.pcard__img{ display:block; aspect-ratio:1/1; background:var(--s2); overflow:hidden; }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e); }
.pcard:hover .pcard__img img{ transform:scale(1.04); }
.pcard__b{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; flex:1; }
.pcard__m{ font-size:13px; color:var(--fg-3); }
.pcard__row{
  margin-top:auto; padding-top:14px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.pcard__row b{ font-size:17px; font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums; color:var(--gold); }
.pcard__row i{ font-style:normal; font-size:13px; color:var(--fg-3); white-space:nowrap; }
.pcard__row i.in{ color:var(--green); }
.pcard__was{ margin-left:8px; font-size:13px; font-weight:400; color:var(--fg-3); }

.plist__note{ margin-top:clamp(28px,3.5vw,48px); color:var(--fg-3); font-size:15px; }
.plist__note a{ color:var(--fg-2); }
.plist__note a:hover{ color:var(--gold); }

/* nav: mark the page you are on */
.prod__btn.is-here{ color:var(--fg); }

/* ═══════════ NAV ICONS + BADGE ═════════════════════════ */
.nav__ic{
  position:relative; width:40px; height:40px; border-radius:100px; flex:none;
  display:grid; place-content:center; color:var(--fg-2); text-decoration:none;
  transition:color .2s, background .2s;
}
.nav__ic:hover{ color:var(--fg); background:rgba(255,255,255,.06); }
.nav__ic.is-here{ color:var(--fg); }
.nav__badge{
  position:absolute; top:1px; right:-1px; min-width:16px; height:16px; padding:0 4px;
  border-radius:100px; background:var(--gold); color:var(--on-gold);
  font-size:11px; font-weight:600; line-height:16px; text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ═══════════ PHOTO STEPPER ═════════════════════════════
   Arrows over a product photo, on the catalogue card and on the product
   page. Built by CMGallery() in main.js, and only when a machine actually
   has more than one shot. */
.pcard__media{ position:relative; display:block; }

.galnav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:38px; height:38px; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--line-ctl); border-radius:100px;
  background:rgba(0,0,0,.55); color:var(--fg);
  backdrop-filter:blur(6px); cursor:pointer;
  transition:background .2s var(--e), border-color .2s var(--e),
             color .2s var(--e), opacity .2s var(--e);
}
.galnav svg{ width:18px; height:18px; }
.galnav--prev{ left:10px; }
.galnav--next{ right:10px; }
.galnav--next svg{ transform:rotate(180deg); }
.galnav:hover{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }

/* On the card the arrows stay out of the way until the card is engaged -
   a grid of 25 cards with 50 permanent arrows is noise. They are always
   present for keyboard and touch. */
@media (hover:hover) and (pointer:fine){
  .pcard__nav{ opacity:0; }
  .pcard__media:hover .pcard__nav,
  .pcard__nav:focus-visible{ opacity:1; }
}

/* the product page photo is the subject of the page - no hiding */
.galnav--lg{ width:46px; height:46px; }
.galnav--lg svg{ width:22px; height:22px; }
.galnav--lg.galnav--prev{ left:14px; }
.galnav--lg.galnav--next{ right:14px; }

@media (max-width:559px){
  .galnav{ width:40px; height:40px; }
  .galnav--prev{ left:8px; }
  .galnav--next{ right:8px; }
}
@media (prefers-reduced-motion:reduce){
  .galnav{ transition:none; }
}

/* ═══════════ PRODUCT CARD: ADD TO CART ═════════════════ */
.pcard{ display:flex; flex-direction:column; }
.pcard__add{ margin-top:14px; }
/* quiet by default - see the note in main.js on gold budget. The card action
   warms to gold on hover, so the affordance is still obvious. */
.pcard__add:hover{ --bg-b:var(--gold); --fg-b:var(--on-gold); --bd:var(--gold); }
.pcard__add--out{ --fg-b:var(--fg-2); text-decoration:none; }
.pcard__add--out:hover{ --bg-b:transparent; --fg-b:var(--fg); --bd:var(--fg); }

/* ═══════════ CART PAGE ═════════════════════════════════ */
.cempty{ padding:clamp(24px,4vw,48px) 0; }
.cempty p{ margin:12px 0 26px; color:var(--fg-2); max-width:52ch; }

/* Dead ends - 404, empty cart, unknown SKU - used to be a headline, a button
   and most of a viewport of nothing. Give the visitor somewhere to go. */
.deadend{ margin-top:clamp(44px,6vw,72px); padding-top:28px; border-top:1px solid var(--line); max-width:880px; }
.deadend h2{ font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--fg-3); margin-bottom:16px; }
.deadend ul{ display:grid; gap:2px; grid-template-columns:1fr; }
@media (min-width:560px){ .deadend ul{ grid-template-columns:1fr 1fr; gap:2px 32px; } }
@media (min-width:900px){ .deadend ul{ grid-template-columns:repeat(3,1fr); } }
.deadend a{
  display:block; padding:11px 0; font-size:15px; color:var(--fg-2);
  text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s;
}
.deadend a:hover{ color:var(--gold); }

.cfull{ display:grid; gap:clamp(28px,4vw,56px); align-items:start; }
@media (min-width:900px){ .cfull{ grid-template-columns:1.5fr 1fr; } }

/* the only product surface in the funnel that was bare on black - products.html
   uses .pcard and checkout.html uses .co__panel, so the two halves of the cart
   read as different products side by side */
.citems{ display:block; background:var(--s1); border-radius:var(--r); padding:4px var(--card-pad); }
.citem{ display:flex; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.citem:last-child{ border-bottom:0; }
.citem > img{ width:72px; height:72px; border-radius:8px; object-fit:cover; background:var(--s1); flex:none; }
.citem__b{ flex:1; min-width:200px; }
.citem__m{ display:block; font-size:13px; color:var(--fg-3); margin-top:3px; }
.citem__p{ display:block; font-size:13px; color:var(--fg-2); margin-top:7px; }
.citem__end{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }

.qty{ display:flex; align-items:center; padding:2px; border:1px solid var(--line-ctl); border-radius:100px; }
.qty button{
  width:32px; height:32px; border-radius:100px; border:0; background:none;
  color:var(--fg-2); font-size:16px; line-height:1; cursor:pointer;
  transition:background .2s, color .2s;
}
.qty button:hover{ background:var(--s2); color:var(--fg); }
.qty b{ min-width:30px; text-align:center; font-weight:500; font-variant-numeric:tabular-nums; }
/* editable quantity box - looks like the static number, but you can type in it */
.qty__num{ width:46px; min-width:30px; text-align:center; font:inherit; font-weight:500; font-variant-numeric:tabular-nums; color:var(--fg); background:none; border:0; padding:2px 0; -moz-appearance:textfield; }
.qty__num::-webkit-outer-spin-button, .qty__num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty__num:focus{ outline:none; }
.qty--sm .qty__num{ width:38px; min-width:24px; font-size:13px; }

.citem__line{ min-width:96px; text-align:right; font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums; }
.citem__rm{ border:0; background:none; color:var(--fg-3); font-size:13px; cursor:pointer; transition:color .2s; min-height:44px; display:inline-flex; align-items:center; padding:0 4px; }
.citem__rm:hover{ color:var(--red); }

.csum{
  background:var(--s1); border-radius:var(--r); padding:var(--card-pad);
  display:grid; gap:16px; align-content:start;
  position:sticky; top:calc(var(--nav-h) + 16px);
}
.csum__rows div{
  display:flex; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:15px;
}
.csum__rows dt{ color:var(--fg-3); }
.csum__rows dd{ margin:0; font-variant-numeric:tabular-nums; color:var(--fg); }
.csum__hint{ color:var(--fg-3); font-size:12px; font-weight:400; }
.csum__grand{ border-bottom:0 !important; padding-top:16px !important; }
.csum__grand dt{ color:var(--fg); }
#cart-total,#co-total{ color:var(--gold); font-weight:600; font-size:18px; }
.csum__ask{ font-size:13px; color:var(--fg-2); }
.csum__fine{ font-size:13px; color:var(--fg-3); }
.csum__contact{ display:grid; gap:14px; }
.csum__contact .field label{ font-size:13px; color:var(--fg-3); }
.csum__status{ font-size:13.5px; line-height:1.5; padding:10px 12px; border-radius:8px; background:var(--s2); color:var(--fg-2); }
.csum__status.is-ok{ color:var(--green); background:rgba(87,201,138,.10); }
.csum__status.is-bad{ color:var(--red); background:rgba(255,156,158,.08); }
.csum__promo{ display:flex; gap:8px; }
/* matches the .field language used by every other input on this card */
.csum__promo input{ flex:1 1 auto; min-width:0; background:transparent; border:0; border-bottom:1px solid var(--line-ctl); border-radius:0; color:var(--fg); font:inherit; font-size:16px; min-height:44px; padding:8px 2px; text-transform:uppercase; }
.csum__promo input::placeholder{ text-transform:none; color:var(--fg-3); }
.csum__promo input:focus{ outline:none; border-bottom-color:var(--gold); box-shadow:0 1px 0 0 var(--gold); }
.csum__promo .btn{ flex:0 0 auto; }
.csum__promonote{ font-size:13px; line-height:1.5; color:var(--fg-2); }
.csum__promonote.is-ok{ color:var(--green); }
.csum__promonote.is-bad{ color:var(--red); }
#cart-discount{ color:var(--green); }

/* ═══════════ AUTH / ACCOUNT ════════════════════════════ */
.auth-wrap{ max-width:560px; }
.auth{ background:var(--s1); border-radius:var(--r); padding:var(--card-pad); }

.auth__logo{ display:flex; justify-content:center; margin:8px 0 28px; }
.auth__logo img{ height:46px; width:auto; }

.auth__head{ text-align:center; margin-bottom:26px; }
.auth__title{ font-size:clamp(22px,2.2vw,28px); font-weight:600; letter-spacing:-.025em; }
.auth__sub{ margin:10px auto 0; color:var(--fg-2); font-size:14px; max-width:38ch; }

.auth__tabs{
  display:flex; gap:4px; padding:4px; margin-bottom:22px;
  background:var(--bg); border:1px solid var(--line); border-radius:100px;
}
.auth__tab{
  flex:1; min-height:40px; border-radius:100px; border:0; background:none;
  color:var(--fg-2); font-size:14px; cursor:pointer;
  transition:background .2s, color .2s;
}
.auth__tab:hover{ color:var(--fg); }
.auth__tab.is-on{ background:var(--fg); color:var(--bg); font-weight:500; }

.auth form{ display:grid; gap:18px; }
.field--pw{ position:relative; }
.field--pw input{ padding-right:56px; }
.pw-toggle{
  position:absolute; right:0; bottom:11px; border:0; background:none;
  color:var(--fg-3); font-size:13px; cursor:pointer; transition:color .2s;
}
.pw-toggle:hover{ color:var(--fg); }
.field__hint{ color:var(--fg-3); font-size:13px; margin-left:8px; }

.auth__error{
  background:rgba(255,156,158,.08); border:1px solid rgba(255,156,158,.3);
  color:var(--red); padding:10px 14px; border-radius:8px; font-size:14px; margin-bottom:16px;
}
/* This is the single most important sentence on the page - the visitor is
   about to type a password into something that has no server behind it. It
   was set as the smallest, faintest text on the card. */
.auth__demo{
  margin-top:20px; padding:12px 14px;
  background:var(--bg); border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:8px; font-size:13px; line-height:1.5; color:var(--fg-2);
}
.auth__forgot{ margin-top:14px; text-align:center; }
.auth__forgot button{ background:none; border:0; padding:4px; font:inherit; font-size:13.5px; color:var(--fg-3); cursor:pointer; }
.auth__forgot button:hover{ color:var(--gold); text-decoration:underline; }
.auth__alt{ margin-top:10px; font-size:13px; color:var(--fg-2); }
.auth__alt a{ color:var(--gold); text-decoration:none; }

.acct .kicker{ margin-bottom:16px; }
.acct__email{ color:var(--fg-3); margin-top:8px; }
.acct__box{ margin:24px 0; padding:18px 20px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.acct__box p{ margin-top:8px; color:var(--fg-2); font-size:14px; }
.acct__box a{ color:var(--gold); }

/* ═══════════ MINI-CART DRAWER ══════════════════════════ */
/* "added to cart" toast - subtle confirmation on add (bottom-centre, clears the WhatsApp button) */
.ctoast{ position:fixed; left:50%; bottom:clamp(18px,3vw,30px); z-index:210; display:flex; align-items:center; gap:12px;
  max-width:min(380px,calc(100vw - 32px)); background:var(--s1); border:1px solid var(--line-2); border-radius:14px;
  padding:11px 14px; box-shadow:0 14px 44px rgba(0,0,0,.5); transform:translateX(-50%) translateY(20px); opacity:0;
  pointer-events:none; transition:transform .3s var(--e), opacity .3s var(--e); }
.ctoast.is-on{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.ctoast__ic{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:50%; background:var(--gold); color:#0a0a0b; font-weight:700; font-size:14px; }
.ctoast__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.ctoast__txt b{ font-size:14px; }
.ctoast__txt span{ font-size:12px; color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctoast__view{ margin-left:auto; flex:0 0 auto; background:none; border:0; color:var(--gold); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:6px 4px; }
.ctoast__view:hover{ text-decoration:underline; }

.mcart{ position:fixed; inset:0; z-index:220; }
.mcart__scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .3s var(--e);
}
.mcart__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, calc(100vw - 24px));
  background:var(--s1); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s var(--e);
}
.mcart.is-open .mcart__scrim{ opacity:1; }
.mcart.is-open .mcart__panel{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .mcart__scrim,.mcart__panel{ transition:none; }
}

.mcart__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--line);
}
.mcart__head h3{ font-size:17px; font-weight:500; letter-spacing:-.02em; }
.mcart__x{
  width:36px; height:36px; border-radius:100px; border:1px solid var(--line-ctl);
  background:none; color:var(--fg-2); display:grid; place-content:center; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.mcart__x:hover{ color:var(--fg); border-color:var(--fg); }

.mcart__items{ flex:1; overflow-y:auto; padding:8px 24px; }
.mrow{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.mrow:last-child{ border-bottom:0; }
.mrow > img{ width:56px; height:56px; border-radius:8px; object-fit:cover; background:var(--s2); flex:none; }
.mrow__b{ flex:1; min-width:0; }
.mrow__b h4{ font-size:15px; font-weight:500; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow__tag{
  display:inline-block; margin-bottom:5px; padding:2px 8px; border-radius:100px;
  background:var(--gold); color:var(--on-gold); font-size:11px; font-weight:600;
}
.mrow__m{ display:block; margin-top:3px; font-size:13px; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.qty--sm{ margin-top:10px; align-self:flex-start; }
.qty--sm button{ width:26px; height:26px; font-size:14px; }
.qty--sm b{ min-width:24px; font-size:13px; }
.mcart__empty{ padding:28px 0; color:var(--fg-3); font-size:15px; }

.mrow__line{ font-weight:600; color:var(--gold); font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mrow.is-new{ animation:mrow-in .5s var(--e); }
@keyframes mrow-in{ from{ opacity:0; transform:translateY(-8px); } }
@media (prefers-reduced-motion:reduce){ .mrow.is-new{ animation:none; } }

.mcart__foot{ padding:18px 24px 22px; border-top:1px solid var(--line); display:grid; gap:12px; }
.mcart__sub{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; }
.mcart__sub span{ color:var(--fg-3); }
.mcart__sub b{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--gold); font-variant-numeric:tabular-nums; }
.mcart__note{ font-size:13px; color:var(--fg-3); }

/* ═══════════ CUSTOM SELECT ═════════════════════════════ */
.cselect{ position:relative; }
.cselect-native{
  position:absolute !important; width:1px; height:1px;
  opacity:0; pointer-events:none; margin:-1px; overflow:hidden;
}
.cselect__btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; cursor:pointer; font-family:var(--ui);
}
.cselect__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cselect__btn svg{ flex:none; color:var(--fg-3); transition:transform .3s var(--e); }
.cselect.is-open .cselect__btn svg{ transform:rotate(180deg); }

/* boxed context (calculator) */
.ctl .cselect__btn{
  background:var(--bg); border:1px solid var(--line-ctl); border-radius:8px;
  padding:11px 13px; min-height:44px; color:var(--fg); font-size:15px;
  transition:border-color .2s;
}
.ctl .cselect__btn:hover{ border-color:var(--fg-3); }
.ctl .cselect.is-open .cselect__btn{ border-color:var(--gold); }

/* underline context (forms) */
.field .cselect__btn{
  background:transparent; border:0; border-bottom:1px solid var(--line-ctl);
  border-radius:0; padding:10px 0; min-height:44px; color:var(--fg); font-size:16px;
  transition:border-color .2s, box-shadow .2s;
}
.field .cselect.is-open .cselect__btn,
.field .cselect__btn:focus-visible{
  outline:none; border-bottom-color:var(--gold); box-shadow:0 1px 0 0 var(--gold);
}

/* the panel - same language as the nav Products menu */
.cselect__list{
  position:absolute; z-index:80; top:calc(100% + 8px); left:0; right:0;
  max-height:290px; overflow:auto; padding:6px;
  background:var(--s1); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 24px 56px rgba(0,0,0,.55);
}
.cselect__opt{
  padding:11px 12px; border-radius:6px; font-size:15px; color:var(--fg-2);
  cursor:pointer; transition:background .15s, color .15s;
}
.cselect__opt:hover,.cselect__opt.is-active{ background:var(--s2); color:var(--fg); }
.cselect__opt[aria-selected="true"]{ color:var(--gold); }

/* admin console: enhanced selects wear the same black-inset field style */
#admin-app .cselect__btn{
  background:var(--bg); border:1px solid var(--line-2); border-radius:9px;
  padding:10px 12px; min-height:0; color:var(--fg); font-size:14px;
  transition:border-color .15s var(--e), box-shadow .15s var(--e);
}
#admin-app .cselect.is-open .cselect__btn,
#admin-app .cselect__btn:focus-visible{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(249,180,26,.16);
}
#admin-app .admin__pfield .cselect__btn,
#admin-app .admin__enqrow .cselect__btn{ padding:8px 10px; font-size:13px; text-transform:none; letter-spacing:0; }

/* ═══════════ ABOUT PAGE ════════════════════════════════ */
.story{ display:grid; gap:clamp(24px,3vw,40px); margin-bottom:clamp(32px,4vw,56px); }
@media (min-width:900px){ .story{ grid-template-columns:repeat(3,1fr); } }
.story__col h3{ color:var(--gold); margin-bottom:12px; }
.story__col p{ color:var(--fg-2); font-size:15px; line-height:1.65; }

.strip{ display:grid; gap:8px; grid-template-columns:repeat(4,1fr); align-items:start; }
.strip img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--s1); filter:brightness(.88); }
@media (max-width:719px){ .strip{ grid-template-columns:repeat(2,1fr); } }

.team{ display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .team{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1040px){ .team{ grid-template-columns:repeat(4,1fr); } }
.tcard{ background:var(--s1); border-radius:var(--r); overflow:hidden; padding-bottom:18px; }
/* The source portraits are all 360x250 landscape on the same grey. Forcing
   them into a 1:1 box threw away 30% of each frame at a different place on
   every photo - some heads ended up touching the top edge, others floating.
   A 4:3 box crops far less, and anchoring high keeps every eyeline in roughly
   the same place across the grid. */
.tcard img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 18%;
  background:var(--s2);
  filter:grayscale(.25) contrast(1.03); transition:filter .4s var(--e);
}
.tcard:hover img{ filter:contrast(1.03); }
.tcard h3{ margin:14px 18px 0; }
.tcard span{ display:block; margin:4px 18px 0; font-size:13px; color:var(--fg-3); }

/* ═══════════ BLOG ══════════════════════════════════════ */
.bgrid{ display:grid; gap:8px; }
@media (min-width:720px){ .bgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .bgrid{ grid-template-columns:repeat(3,1fr); } }
.bcard{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--s1); border-radius:var(--r); overflow:hidden;
}
/* The migrated hero art has the article headline baked into it in loud yellow
   display type - a second, competing type system sitting directly above the
   card's own title. Holding it back a stop lets our typography lead; it comes
   back to full strength on hover, where it is the thing being looked at. */
.bcard__img{ display:block; aspect-ratio:16/9; overflow:hidden; background:#121216; position:relative; }
.bcard__img img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.78) saturate(.85);
  transition:transform .6s var(--e), filter .4s var(--e);
}
.bcard__img::after{ /* seats the image into the card instead of ending on a hard edge */
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, var(--s1), rgba(21,21,23,0));
  pointer-events:none;
}
.bcard:hover .bcard__img img{ transform:scale(1.04); filter:brightness(1) saturate(1); }
@media (prefers-reduced-motion:reduce){
  .bcard__img img,.bcard:hover .bcard__img img{ transition:none; transform:none; }
}
.bcard__b{ display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.bcard__d{ font-size:13px; color:var(--fg-3); }
.bcard__b h3{ margin-top:8px; font-size:17px; line-height:1.3; }
.bcard__x{
  margin-top:8px; color:var(--fg-2); font-size:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bcard__go{ margin-top:auto; padding-top:14px; color:var(--gold); font-size:14px; font-weight:500; }

.pager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:clamp(32px,4vw,56px); }
.pager .pillbtn{ text-decoration:none; display:inline-flex; align-items:center; }

/* ═══════════ POST PAGE ═════════════════════════════════ */
/* `max-width:820px` on a .wrap (which is margin-inline:auto) centred the whole
   article, so every blog page started ~374px from the left while the rest of
   the site starts at 70px - the one place the "every left edge aligned" rule
   broke. The wrap now keeps the normal page box and the MEASURE is what is
   constrained, so the column is both correctly short and correctly aligned. */
/* 540px puts running text at ~72 characters per line in Inter Tight, inside
   the 45-75 band. The old 820px centred box measured ~88. */
.post{ max-width:860px; margin-inline:auto; --measure:760px; --measure-wide:860px; }
.post > *{ max-width:var(--measure); }
/* display type reads fine on a longer line than body copy does */
.post > .h2{ max-width:760px; }
.post__img{ max-width:min(var(--measure-wide),100%); }
/* the body box runs wide so tables and figures have room; the running text
   inside it stays at the reading measure */
.post__body{ max-width:min(var(--measure-wide),100%); }
.post__body > :is(p,ul,ol,h2,h3,h4,blockquote){ max-width:var(--measure); }
.post__back{ margin-bottom:26px; font-size:14px; }
.post__back a{ color:var(--fg-3); text-decoration:none; }
.post__back a:hover{ color:var(--fg); }
.post .h2{ margin-bottom:26px; }
.post__img{
  width:100%; height:auto; /* height attr is a hint only - never a fixed box */
  max-height:560px; object-fit:cover;
  border-radius:var(--r); background:var(--s1);
  margin-bottom:clamp(26px,3.5vw,40px);
  /* same reason as .bcard__img - the hero repeats the headline in its own
     type, directly under the real <h1> */
  filter:brightness(.86) saturate(.92);
}
/* Long-form gets the primary text colour and a size up. 3,000 words set in
   --fg-2 at 16px is a fatiguing read; --fg-2 is for supporting copy. */
.post__body p{ color:var(--fg); font-size:17px; line-height:1.72; margin-bottom:20px; }
/* one step above body, so the opening paragraph reads as an opening */
.post__lede{ font-size:19px; color:var(--fg); }
.post__pending{
  padding:16px 18px; border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:8px; font-size:15px;
}

/* ═══════════ SHARED UTILITIES + LEGAL PAGES ════════════ */
.nav__links a.is-here{ color:var(--fg); }
.mt-lg{ margin-top:clamp(40px,5vw,64px); }
.sec--flush{ padding-top:0; }

/* Same fix as the post page: `max-width` on a .wrap centres the whole column,
   which put the legal pages ~400px in from a left edge every other page shares.
   Constrain the measure, keep the page box. */
.legal{ max-width:820px; margin-inline:auto; }
.legal > *{ max-width:none; }
.legal h1{ margin-bottom:10px; }
.legal .upd{
  display:inline-block; color:var(--fg-3); font-size:13px; margin-bottom:clamp(28px,3.5vw,44px);
  padding:5px 12px; border:1px solid var(--line); border-radius:100px;
}
/* Each section is a card, like the rest of the site - the legal pages used to
   be unstyled prose on flat black, which read as an unfinished page. */
.legal h2{
  font-size:clamp(19px,1.9vw,23px); font-weight:600; letter-spacing:-.015em;
  margin:0 0 14px; padding-left:14px; border-left:2px solid var(--gold);
}
.legal h2 + p, .legal h2 + ul{ margin-top:0; }
.legal p, .legal li{ color:var(--fg-2); font-size:15.5px; line-height:1.75; }
.legal p{ margin-bottom:14px; }
.legal p:last-child, .legal ul:last-child{ margin-bottom:0; }
.legal b{ color:var(--fg); font-weight:600; }
.legal a{ color:var(--gold); text-underline-offset:3px; }
.legal ul{ list-style:none; padding-left:0; display:grid; gap:11px; margin:10px 0 18px; }
.legal ul li{ position:relative; padding-left:20px; }
.legal ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.75;
}
.legal .notice{
  margin-top:48px; padding:16px 18px; border:1px solid var(--line);
  border-radius:8px; color:var(--fg-3); font-size:13px;
}

/* ═══════════ ARTICLE BODY (generated blog pages) ═══════ */
/* h2 was 22px/500 against 17px/500 bold run-ins - a section heading that read
   no louder than an emphasised phrase inside a paragraph. Size and weight now
   put real daylight between the two. */
.post__body h2{
  font-size:clamp(22px,2.2vw,28px); font-weight:600; letter-spacing:-.025em;
  line-height:1.15; margin:clamp(36px,4.4vw,52px) 0 16px;
}
.post__body h3{ font-size:17px; font-weight:600; letter-spacing:-.02em; margin:28px 0 8px; }
.post__body ul{ list-style:disc; padding-left:22px; display:grid; gap:8px; margin:0 0 20px; }
.post__body ol{ list-style:decimal; padding-left:22px; display:grid; gap:8px; margin:0 0 20px; }
.post__body li{ color:var(--fg); font-size:17px; line-height:1.68; }
.post__body li::marker{ color:var(--fg-3); }
.post__body b{ color:var(--fg); font-weight:600; }
.post__body table{
  width:100%; border-collapse:collapse; margin:6px 0 22px; font-size:15px;
}
/* narrow screens: let a wide comparison table scroll rather than crush every
   column to two characters */
@media (max-width:559px){
  .post__body table{ display:block; overflow-x:auto; white-space:nowrap; }
}
.post__body th{
  text-align:left; font-weight:500; color:var(--fg-3); font-size:13px;
  padding:10px 14px 10px 0; border-bottom:1px solid var(--line-2);
}
.post__body td{
  color:var(--fg-2); padding:10px 14px 10px 0; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}

/* ── premium polish: lead paragraph, section dividers, links, callouts ── */
/* the opening paragraph reads as an opening - a size up, full-strength ink */
.post__body > p:first-of-type{ font-size:clamp(18px,1.7vw,20px); line-height:1.7; color:var(--fg); }
/* each section opens with a hairline rule + a short gold tick, so the article
   has real structure instead of one undifferentiated column of text */
.post__body h2{ margin-top:clamp(22px,3vw,34px); padding-top:clamp(26px,3.2vw,38px); border-top:1px solid var(--line); }
.post__body h2::before{ content:""; display:block; width:32px; height:3px; border-radius:2px; background:var(--gold); margin-bottom:15px; }
.post__body h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
/* sub-headings a clear step above body copy */
.post__body h3{ font-size:19px; letter-spacing:-.02em; margin-top:34px; }
/* links carry the brand gold with a soft underline that firms up on hover */
.post__body a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(249,180,26,.38); transition:border-color .2s; }
.post__body a:hover{ border-bottom-color:var(--gold); }
.post__body li::marker{ color:var(--gold); }
/* pull-quotes read as callouts, not stray italics */
.post__body blockquote{ margin:26px 0; padding:16px 20px; background:var(--s1); border-left:3px solid var(--gold); border-radius:0 10px 10px 0; font-size:18px; line-height:1.6; color:var(--fg); }
.post__body blockquote p{ margin:0; }

/* ── contents (built by main.js on posts with 4+ sections) ── */
.toc{
  /* a two-column index, not running text - it gets its own width */
  max-width:680px; margin:0 0 clamp(30px,4vw,44px);
  padding:22px 24px; background:var(--s1);
  border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--r);
}
/* beats `.post__body h2`, which is more specific than a bare class */
.post__body .toc__h,.toc__h{
  font-size:13px; font-weight:500; letter-spacing:.02em;
  line-height:1.2; color:var(--fg-3); margin:0 0 14px;
}
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:toc; }
.toc li{ counter-increment:toc; }
.toc a{
  display:grid; grid-template-columns:26px 1fr; gap:4px; align-items:baseline;
  padding:6px 0; font-size:15px; line-height:1.4;
  color:var(--fg-2); text-decoration:none; transition:color .2s;
}
.toc a::before{ content:counter(toc,decimal-leading-zero); font-size:13px; color:var(--fg-3); }
.toc a:hover{ color:var(--gold); }
/* the contents card sits inside .post__body, so it inherited the prose link
   underline on every row and the h2 section tick above its heading */
.post__body .toc a{ border-bottom:0; }
.post__body .toc__h::before{ display:none; }
@media (min-width:720px){ .toc ol{ grid-template-columns:1fr 1fr; gap:2px 28px; } }

.post__pn{
  display:grid; gap:8px; margin-top:clamp(32px,4vw,56px);
  padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--line);
}
@media (min-width:720px){ .post__pn{ grid-template-columns:1fr 1fr; } }
.post__pn a{
  display:block; padding:16px 18px; border-radius:10px; background:var(--s1);
  text-decoration:none; transition:background .2s;
}
.post__pn a:hover{ background:var(--s2); }
.post__pn span{ display:block; font-size:13px; color:var(--fg-3); margin-bottom:6px; }
.post__pn b{ font-size:14px; font-weight:500; line-height:1.35; }
.post__pn-r{ text-align:right; }

/* ═══════════ PRODUCT DETAIL PAGE ═══════════════════════
   Two columns - gallery left, buy box right - then specs
   and description below. Card titles stay inside the four
   type tiers; the price is a figure, not a heading. */
.pd{ display:grid; gap:clamp(28px,4vw,56px); }
@media (min-width:900px){
  .pd{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:start; }
}
.pd__gal{ display:grid; gap:10px; }
.pd__main{
  position:relative; border-radius:var(--r); background:var(--s1);
  aspect-ratio:1/1; overflow:hidden;
}
.pd__main img{ width:100%; height:100%; object-fit:cover; }
.pd__thumbs{ display:flex; gap:10px; }
.pd__thumbs button{
  width:78px; height:78px; padding:0; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:var(--s1); cursor:pointer; flex:0 0 auto;
  transition:border-color .2s;
}
.pd__thumbs button.is-on{ border-color:var(--gold); }
.pd__thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

/* the gallery is tall; the buy column was short and left a void beside it.
   It now rides down with the reader instead. */
@media (min-width:900px){
  .pd__info{ position:sticky; top:calc(var(--nav-h) + 20px); }
}
.pd__info > .kicker{ margin-bottom:14px; }
.pd__meta{ margin-top:10px; color:var(--fg-2); font-size:15px; }
.pd__buy{
  margin-top:clamp(20px,2.4vw,30px); padding:var(--card-pad);
  background:var(--s1); border-radius:var(--r);
  display:grid; gap:18px;
}
/* the four figures a buyer actually decides on, lifted out of the 14-row
   spec table and into the buy box */
.pd__figs{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 20px;
  margin:2px 0 0; padding-top:20px; border-top:1px solid var(--line);
}
@media (min-width:560px){ .pd__figs{ grid-template-columns:repeat(4,1fr); } }
.pd__figs dt{ font-size:13px; color:var(--fg-3); }
.pd__figs dd{
  margin:6px 0 0; font-size:16px; font-weight:500;
  letter-spacing:-.015em; font-variant-numeric:tabular-nums;
}

.pd__more{
  border:0; background:none; padding:0; cursor:pointer;
  font-size:13px; color:var(--gold); text-decoration:underline;
  text-underline-offset:2px;
}
.pd__more:hover{ color:var(--gold-hi); }

.pd__price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pd__price b{
  font-size:clamp(22px,2.2vw,28px); font-weight:600; letter-spacing:-.02em;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.pd__price i{ font-style:normal; font-size:13px; color:var(--fg-3); }
.pd__stock{ font-size:13px; color:var(--fg-3); }
.pd__stock.in{ color:var(--green); }
.pd__ctl{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pd__ctl .btn{ flex:1 1 200px; }
.pd__note{ font-size:13px; color:var(--fg-3); line-height:1.55; }
.pd__note a{ color:var(--fg-2); }
.pd__note a:hover{ color:var(--gold); }

.pd__lower{ margin-top:clamp(28px,4vw,56px); display:grid; gap:clamp(28px,4vw,56px); }
@media (min-width:900px){ .pd__lower{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:start; } }
.pd__sub{ display:block; margin-bottom:16px; }
.pd__specs{ margin:0; }
.pd__specs > div{
  display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.pd__specs dt{ color:var(--fg-3); font-size:14px; }
.pd__specs dd{ margin:0; color:var(--fg); font-size:14px; font-variant-numeric:tabular-nums; }
.pd__desc p{ color:var(--fg-2); font-size:15px; line-height:1.7; margin:0 0 16px; }
.pd__desc p:last-child{ margin-bottom:0; }

/* ═══════════ FAQ (hosting) ═════════════════════════════ */
/* The rows used to span the full 1300px content width with the "+" parked at
   the far right edge - a very long trip for the eye between a six-word
   question and its control. Held to a reading measure instead. */
.faq{ border-top:1px solid var(--line); max-width:880px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:baseline;
  justify-content:space-between; gap:18px; padding:20px 0;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; color:var(--fg-2); font-size:19px; font-weight:400;
  line-height:1; transition:transform .3s var(--e), color .2s;
}
.faq summary:hover::after{ color:var(--gold); }
.faq details[open] summary::after{ transform:rotate(45deg); color:var(--gold); }
.faq summary:hover .faq__q{ color:var(--gold); }
.faq__q{ transition:color .2s; }
.faq__a{ padding:0 0 22px; color:var(--fg-2); font-size:15px; line-height:1.7; max-width:68ch; }
.faq__a a{ color:var(--fg-2); }
.faq__a a:hover{ color:var(--gold); }

/* ═══════════ FLOATING WHATSAPP ═════════════════════════
   Injected by main.js on every page. Sits under the
   mini-cart overlay (z 220) and above page content. */
.wafab{
  position:fixed; right:clamp(16px,2.4vw,28px);
  bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom,0px));
  z-index:120; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wa); color:var(--on-wa);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:transform .25s var(--e), box-shadow .25s var(--e), opacity .25s var(--e);
}
.wafab:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.55); }
.wafab svg{ width:28px; height:28px; }
/* The fab is fixed to the viewport, so at the bottom of every page it parked
   on top of the footer's legal line (the risk disclaimer was being clipped
   mid-word). It yields once the footer is on screen - the footer carries the
   same WhatsApp link anyway, so nothing becomes unreachable. */
.wafab.is-tucked{ opacity:0; transform:translateY(80%) scale(.9); pointer-events:none; }
@media (prefers-reduced-motion:reduce){
  .wafab.is-tucked{ transform:none; }
}

/* ═══════════ OFFERS SIDE TAB (products page) ═══════════
   Was solid gold and wiggling on a 2.6s loop, for ever. Against restrained
   photography and a page whose only other gold is the price and the nav CTA,
   that read as a banner ad on our own site. It now sits quietly and comes
   forward on hover - the pill in the filter row is the real entry point. */
.offertab{
  position:fixed; right:0; top:50%; z-index:110;
  transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  background:var(--gold); color:var(--on-gold); text-decoration:none;
  border:1px solid var(--gold); border-right:0;
  box-shadow:-4px 4px 20px rgba(249,180,26,.35);
  font-size:13px; font-weight:600; letter-spacing:.02em;
  padding:18px 9px; border-radius:8px 0 0 8px;
  transition:box-shadow .22s var(--e);
  animation:offershake 2s ease-in-out infinite;
  transform-origin:center;
}
.offertab:hover,.offertab:focus-visible{
  animation:none; transform:translateY(-50%) scale(1.05);
  box-shadow:-6px 6px 28px rgba(249,180,26,.55);
}
/* an energetic wiggle for ~1s, then rests ~1s, on a loop - keeps the centring transform */
@keyframes offershake{
  0%,52%,100%{ transform:translate(0,-50%) rotate(0deg); }
  4%  { transform:translate(-4px,-50%) rotate(-6deg); }
  8%  { transform:translate(0,-50%)   rotate(5deg); }
  12% { transform:translate(-4px,-50%) rotate(-5deg); }
  16% { transform:translate(0,-50%)   rotate(4deg); }
  20% { transform:translate(-3px,-50%) rotate(-4deg); }
  24% { transform:translate(0,-50%)   rotate(3deg); }
  28% { transform:translate(-2px,-50%) rotate(-3deg); }
  32% { transform:translate(0,-50%)   rotate(2deg); }
  36% { transform:translate(-1px,-50%) rotate(-2deg); }
  40% { transform:translate(0,-50%)   rotate(1deg); }
}
.pcard__flag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--gold); color:var(--on-gold); font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px;
}
.pcard__img{ position:relative; }
.pcard__lnk{ text-decoration:none; color:inherit; display:block; }
.pcard__b h3 a{ text-decoration:none; color:inherit; transition:color .2s; }
.pcard__b h3 a:hover{ color:var(--gold); }
.pcard:has(.pcard__lnk:hover) h3 a{ color:var(--gold); }

@media (prefers-reduced-motion: reduce){
  .wafab, .wafab:hover{ transition:none; transform:none; }
  .offertab{ animation:none; }
}
.mt0{ margin-top:0; }
.pd__back{ color:var(--fg-3); text-decoration:none; transition:color .2s; }
.pd__back:hover{ color:var(--gold); }

/* ═══════════ REVIEW FIXES ══════════════════════════════ */
/* screen-reader-only text (offer signal on card title links) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* floating overlays yield to the open mobile menu */
body.menu-open .wafab, body.menu-open .offertab{ display:none; }
/* on narrow screens the offers pill is the entry point - the side tab
   would overlap edge-to-edge controls (search field, cards) */
/* On mobile/tablet the toolbar "Latest offers" pill is the entry point;
   hide the fixed side tab so it never overlaps the search field or cards. */
@media (max-width:700px){ .offertab{ display:none; } }
/* cart rows wrap on narrow screens so qty/total/remove stay reachable */
@media (max-width:479px){
  .citem{ flex-wrap:wrap; }
  .citem__b{ flex:1 1 calc(100% - 88px); min-width:0; }
  .citem__end{ flex:1 1 100%; justify-content:space-between; }
}
/* footer social row */
.foot__soc{ display:flex; gap:8px; margin-top:20px; }
.foot__soc a{
  width:38px; height:38px; border-radius:100px; border:1px solid var(--line-ctl);
  display:grid; place-items:center; color:var(--fg-3);
  transition:color .2s, border-color .2s;
}
.foot__soc a:hover{ color:var(--gold); border-color:var(--gold); }
.foot__soc svg{ width:17px; height:17px; }

/* ═══════════ AUTH / ACCOUNT (Supabase) ═════════════════ */
.auth__note{
  margin:0 0 16px; padding:11px 14px; border-radius:8px;
  background:rgba(87,201,138,.10); border:1px solid rgba(87,201,138,.30);
  color:var(--green); font-size:13.5px; line-height:1.5;
}
.acct__q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:14px 0; border-top:1px solid var(--line);
}
.acct__q:first-child{ border-top:0; }
.acct__q > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.acct__q b{ font-size:14.5px; font-weight:500; }
.acct__q span{ font-size:12.5px; color:var(--fg-3); }
.acct__q em{ font-style:normal; font-size:12.5px; color:var(--fg-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38ch; }
.acct__q-total{ color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums; }
.acct__muted{ color:var(--fg-3); font-size:14px; line-height:1.6; }
.acct__muted a{ color:var(--fg-2); }
.acct__muted a:hover{ color:var(--gold); }

/* ═══════════ STICKY MOBILE CTA ═════════════════════════ */
.mcta{ display:none; }
@media (max-width:700px){
  .mcta{
    position:fixed; left:0; right:0; bottom:0; z-index:130;
    display:flex; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(10,10,11,.94); backdrop-filter:blur(10px);
    border-top:1px solid var(--line-2);
  }
  .mcta a{
    flex:1; text-align:center; padding:13px 10px; border-radius:100px;
    font-size:14px; font-weight:600; text-decoration:none; letter-spacing:-.01em;
  }
  .mcta__wa{ background:var(--wa); color:var(--on-wa); }
  .mcta__q{ background:var(--gold); color:var(--on-gold); }
  .wafab{ display:none; }          /* the bar carries WhatsApp on mobile */
  body{ padding-bottom:66px; }     /* keep content & footer clear of the bar */
  body.menu-open .mcta{ display:none; }
}

/* ═══════════ DIRECTIONS LINK (locations) ═══════════════ */
.loc__dir{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-size:14px; color:var(--gold); text-decoration:none;
}
.loc__dir:hover{ text-decoration:underline; }
.loc__dir svg{ width:15px; height:15px; }

/* ═══════════ CASE STUDY / RESULTS ══════════════════════ */
.cstudy{ background:var(--s1); border-radius:var(--r); padding:clamp(28px,4vw,52px); }
.cstudy__grid{ display:grid; gap:clamp(24px,3vw,40px); }
@media (min-width:820px){ .cstudy__grid{ grid-template-columns:1.1fr 1fr; align-items:center; } }
.cstudy__metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px; }
.cstudy__m b{ display:block; font-size:clamp(28px,4vw,42px); font-weight:600; letter-spacing:-.02em; color:var(--gold); line-height:1; font-variant-numeric:tabular-nums; }
.cstudy__m span{ display:block; margin-top:8px; font-size:13.5px; color:var(--fg-3); }
.cstudy__q{ font-size:clamp(18px,2vw,22px); line-height:1.5; color:var(--fg); }
.cstudy__by{ margin-top:16px; font-size:13.5px; color:var(--fg-3); }

/* ═══════════ BREADCRUMBS ═══════════════════════════════ */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13px; color:var(--fg-3); margin:0 0 clamp(18px,2.6vw,28px); }
.crumb a{ color:var(--fg-3); text-decoration:none; transition:color .2s; }
.crumb a:hover{ color:var(--gold); }
.crumb i{ font-style:normal; opacity:.5; }
.crumb [aria-current]{ color:var(--fg-2); }
.pd__back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--fg-2); text-decoration:none; margin:-12px 0 clamp(16px,2.4vw,24px); transition:color .2s,gap .2s; }
.pd__back:hover{ color:var(--gold); gap:10px; }

/* ═══════════ CURRENCY TOGGLE (nav) ═════════════════════ */
.curtog{ display:inline-flex; border:1px solid var(--line-2); border-radius:100px; overflow:hidden; flex:none; }
.curtog button{ border:0; background:none; color:var(--fg-3); font-size:12.5px; font-weight:600; padding:6px 11px; cursor:pointer; line-height:1; transition:background .2s, color .2s; }
.curtog button.is-on{ background:var(--gold); color:var(--on-gold); }
.curtog button:not(.is-on):hover{ color:var(--fg); }

/* ═══════════ NEWSLETTER (footer) ═══════════════════════ */
.foot__news{ border-bottom:1px solid var(--line); padding-bottom:clamp(28px,3.5vw,40px); margin-bottom:clamp(28px,3.5vw,40px); }
.news{ display:grid; gap:10px; max-width:460px; }
.news h4{ color:var(--fg); font-size:16px; font-weight:500; letter-spacing:-.02em; }
.news p{ color:var(--fg-3); font-size:13.5px; margin:0; }
.news__row{ display:flex; gap:8px; margin-top:4px; }
.news__row input{ flex:1; min-width:0; background:var(--s1); border:1px solid var(--line-2); border-radius:100px; padding:12px 18px; color:var(--fg); font:inherit; font-size:14px; }
.news__row input:focus{ outline:none; border-color:var(--gold); }
.news__row button{ flex:none; }
.news__status{ font-size:13px; min-height:1.2em; margin:2px 0 0; }
.news__status.is-ok{ color:var(--green); }
.news__status.is-bad{ color:var(--red); }

/* ═══════════ ADMIN PANEL ═══════════════════════════════ */
.admin__grid{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(2,1fr); align-items:start; margin-top:clamp(28px,3.5vw,44px); }
@media (max-width:820px){ .admin__grid{ grid-template-columns:1fr; } }
.admin__card{ background:var(--s1); border-radius:var(--r); padding:var(--card-pad); }
.admin__card--wide{ grid-column:1/-1; }
.admin__card h2{ margin:0 0 6px; letter-spacing:-.02em; }
.admin__card h2 + .admin__muted{ margin:0 0 22px; max-width:72ch; }

/* one field style across the whole console: black inset, gold focus ring */
.admin__opt select, .admin__opt input, #ad-input, .admin__sel, .admin__search,
.admin__pfield input, .admin__pfield select, .admin__enqstate,
.admin__bcform textarea, .admin__addform input, .admin__addform select{
  background:var(--bg); border:1px solid var(--line-2); border-radius:9px;
  color:var(--fg); font:inherit; font-size:14px; padding:10px 12px;
  transition:border-color .15s var(--e), box-shadow .15s var(--e);
}
.admin__opt select:focus, .admin__opt input:focus, #ad-input:focus, .admin__search:focus,
.admin__pfield input:focus, .admin__pfield select:focus, .admin__enqstate:focus,
.admin__bcform textarea:focus, .admin__addform input:focus, .admin__addform select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(249,180,26,.16);
}
.admin__card ::placeholder{ color:var(--fg-3); }

.admin__opts{ display:flex; flex-wrap:wrap; gap:16px 22px; margin-bottom:20px; align-items:flex-end; }
.admin__opt{ font-size:13px; color:var(--fg-2); display:flex; align-items:center; gap:9px; }
.admin__opt--stack{ flex-direction:column; align-items:stretch; gap:8px; margin-bottom:0; }
.admin__opt--stack > input, .admin__opt--stack > select, .admin__opt--stack > textarea{ width:100%; }
.admin__opt input[type=number]{ width:120px; }
.admin__opt--stack > input[type=number]{ width:100%; }
#ad-input{ width:100%; border-radius:10px; padding:14px 16px; line-height:1.55; resize:vertical; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }
.admin__row{ display:flex; gap:12px; align-items:center; margin-top:20px; flex-wrap:wrap; }
.admin__summary{ margin-top:18px; font-size:14px; color:var(--fg-2); }
.admin__result{ margin-top:14px; overflow-x:auto; }

/* forms fill the width of their (wide) card */
.admin__addform{ display:grid; gap:18px; margin:2px 0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.admin__bcform{ display:grid; gap:18px; margin:2px 0; grid-template-columns:1fr 1fr; }
.admin__bcform > label:nth-child(3), .admin__bcform > label:nth-child(4){ grid-column:1/-1; }
.admin__bcform textarea{ width:100%; resize:vertical; }
.admin__addform input[type=file]{ color:var(--fg-3); padding:9px 10px; }
/* per-product photo manager (order the gallery; first = main image) */
.admin__pgal{ grid-column:1/-1; display:grid; gap:14px; padding:14px; background:var(--s1); border:1px solid var(--line); border-radius:10px; }
.admin__pgalstrip{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.admin__pgalcell{ margin:0; width:110px; display:grid; gap:6px; justify-items:center; }
.admin__pgalcell img{ width:104px; height:76px; object-fit:cover; border-radius:8px; background:var(--s2); }
.admin__pgalcell figcaption{ font-size:10.5px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.05em; }
.admin__pgalcell:first-child figcaption{ color:var(--gold); font-weight:600; }
.admin__pgalctl{ display:flex; gap:3px; }
.admin__pgalctl button{ width:24px; height:24px; border-radius:6px; border:1px solid var(--line-2); background:var(--bg); color:var(--fg-2); font-size:12px; line-height:1; cursor:pointer; transition:color .15s, border-color .15s; }
.admin__pgalctl button:hover:not(:disabled){ color:var(--fg); border-color:var(--fg-3); }
.admin__pgalctl button:disabled{ opacity:.35; cursor:default; }
.admin__pgaladd{ cursor:pointer; }
.admin__pgalbar{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* promo code compound fields (code + Generate, value + type) */
.admin__pcrow{ display:flex; gap:8px; width:100%; align-items:stretch; }
.admin__pcrow input{ flex:1 1 auto; min-width:0; }
.admin__pcrow select{ flex:0 0 auto; width:auto; }
.admin__pcrow .btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:820px){ .admin__addform, .admin__bcform{ grid-template-columns:1fr; } }

/* direct product editor rows */
.admin__search{ width:100%; margin:2px 0 18px; }
.admin__plist{ display:grid; gap:10px; max-height:560px; overflow-y:auto; padding-right:6px; }
.admin__prow{ display:grid; grid-template-columns:56px minmax(0,1fr) 112px 112px 96px auto; gap:14px; align-items:center; background:var(--s2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; transition:border-color .15s var(--e); }
.admin__prow:hover{ border-color:var(--line-2); }
.admin__pthumb{ width:56px; height:44px; object-fit:cover; border-radius:8px; background:var(--s1); }
.admin__pmain{ min-width:0; }
.admin__pmain b{ display:block; font-size:14px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin__psku{ display:block; font-size:11px; color:var(--fg-3); margin-top:2px; }
.admin__pfield{ display:flex; flex-direction:column; gap:5px; font-size:10.5px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.05em; }
.admin__pfield input, .admin__pfield select{ text-transform:none; letter-spacing:0; font-size:13px; padding:8px 10px; border-radius:8px; }
.admin__pactions{ display:flex; gap:8px; align-items:center; }
.admin__upl{ cursor:pointer; margin:0; }
.admin__pnote{ grid-column:1/-1; font-size:12px; }
.admin__pnote:empty{ display:none; }
.admin__logprice{ font-size:13px; color:var(--fg-2); }
.acct__admin{ margin:12px 0 4px; }
.admin__hbadge{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:100px; background:rgba(255,80,80,.16); color:#ff9d9d; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }

/* enquiry queue + price log: status rows */
.admin__enqrow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; background:var(--s2); border:1px solid var(--line); border-left:2px solid var(--line-2); border-radius:0 9px 9px 0; margin-bottom:8px; font-size:13px; line-height:1.5; }
.admin__enqrow--new{ border-left-color:var(--gold); }
.admin__enqrow--contacted{ border-left-color:#5aa9ff; }
.admin__enqrow--closed{ border-left-color:var(--line-2); opacity:.62; }
.admin__enqstate{ flex:0 0 auto; padding:8px 10px; }

@media (max-width:720px){
  .admin__prow{ grid-template-columns:48px minmax(0,1fr); }
  .admin__pthumb{ height:48px; }
  .admin__pfield, .admin__pactions{ grid-column:2; }
}
.admin__tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.admin__tbl th{ text-align:left; color:var(--fg-3); font-weight:500; font-size:12px; padding:8px 10px; border-bottom:1px solid var(--line-2); }
.admin__tbl td{ padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.admin__tbl tr.is-err{ background:rgba(255,156,158,.06); }
.admin__raw{ display:block; font-size:11px; color:var(--fg-3); opacity:.7; margin-top:2px; font-family:ui-monospace,monospace; }
.admin__hr{ color:var(--fg-3); font-size:12px; }
.admin__dot{ font-size:12px; } .admin__dot--ok{ color:var(--green); } .admin__dot--err{ color:var(--red); }
.admin__new{ color:var(--gold); } .admin__err{ color:var(--red); font-size:12.5px; } .admin__ok{ color:var(--green); }
.admin__muted{ color:var(--fg-3); font-size:13px; line-height:1.55; }
.admin__stat b{ font-size:28px; color:var(--gold); font-weight:600; } .admin__stat{ margin:2px 0 14px; }
.admin__list{ display:grid; gap:8px; max-height:340px; overflow:auto; margin:4px 0 14px; }
.admin__submail{ font-size:13px; color:var(--fg-2); padding:8px 0; border-bottom:1px solid var(--line); }
.admin__who{ font-size:13px; color:var(--fg-3); margin-right:4px; }


/* ═══ card checkout (checkout.html) ═══════════════════════ */
.cfull.co{ grid-template-columns:1fr; }
@media (min-width:900px){ .cfull.co{ grid-template-columns:minmax(0,1.25fr) minmax(320px,.95fr); } }
.co__main{ display:grid; gap:20px; align-content:start; min-width:0; }
.co__steps{ counter-reset:step; display:flex; flex-wrap:wrap; gap:4px 0; list-style:none; margin:0; padding:0; font-size:13px; color:var(--fg-3); }
.co__steps li{ display:flex; align-items:center; gap:8px; }
.co__steps li::before{
  content:counter(step); counter-increment:step;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:11.5px; font-weight:600; border:1px solid var(--line-ctl); color:var(--fg-2);
}
.co__steps li.is-on{ color:var(--fg); }
.co__steps li.is-on::before{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.co__steps li.is-done{ color:var(--fg-2); }
.co__steps li.is-done::before{ content:"\2713"; background:rgba(87,201,138,.14); border-color:transparent; color:var(--green); }
.co__steps li:not(:last-child)::after{ content:""; width:28px; height:1px; background:var(--line-2); margin:0 10px; }
.co__panel{ background:var(--s1); border-radius:var(--r); padding:var(--card-pad); display:grid; gap:18px; align-content:start; min-width:0; }
.co__panel h3{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.co__form{ display:grid; gap:14px; }
.co__form .field label{ font-size:13px; color:var(--fg-3); }
.co__form .btn{ justify-self:start; }
.co__who-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 14px; background:var(--bg); border:1px solid var(--line); border-radius:9px; font-size:14px; color:var(--fg-2); }
.co__who{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co__who-edit{ flex:none; background:none; border:0; color:var(--gold); cursor:pointer; font:inherit; font-size:13px; }
.co__who-edit:hover{ text-decoration:underline; }
#payment-element{ min-height:150px; }
.co__lock{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--fg-3); line-height:1.4; }
.co__lock svg{ flex:none; }
.co__items{ list-style:none; display:grid; gap:12px; margin:0; padding:0 0 16px; border-bottom:1px solid var(--line); }
.co__item{ display:flex; gap:12px; align-items:center; font-size:14px; min-width:0; }
.co__item img{ width:48px; height:48px; border-radius:8px; object-fit:cover; background:var(--s2); flex:none; }
.co__item div{ flex:1; min-width:0; }
.co__item b{ display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co__item span{ font-size:12.5px; color:var(--fg-3); }
.co__item em{ font-style:normal; color:var(--gold); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.co__edit{ font-size:13px; color:var(--fg-3); justify-self:start; }
.co__edit:hover{ color:var(--gold); }
.co__sum .csum__rows{ margin-top:-4px; }
.co__done{ gap:14px; }
.co__tick{ width:44px; height:44px; border-radius:50%; background:rgba(87,201,138,.14); color:var(--green); display:grid; place-items:center; font-size:20px; font-weight:600; }
.co__done-p{ color:var(--fg-2); font-size:15px; line-height:1.55; max-width:56ch; }
.co__done-p b{ color:var(--fg); font-weight:600; }
.co__done-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.csum__status a{ color:inherit; text-decoration:underline; }
.csum__status .admin__muted{ color:var(--fg-3); }
/* cart: card first, quote as the alternative */
.csum__pay{ display:grid; gap:10px; }
.csum__or{ text-align:center; font-size:12px; color:var(--fg-3); letter-spacing:.06em; text-transform:uppercase; }
/* admin: order status badges */
.admin__ost{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:100px; background:var(--s2); color:var(--fg-2); vertical-align:middle; margin-right:6px; }
.admin__ost--paid{ background:rgba(87,201,138,.14); color:var(--green); }
.admin__ost--pending{ background:rgba(249,180,26,.12); color:var(--gold); }
.admin__ost--failed,.admin__ost--review{ background:rgba(255,156,158,.12); color:var(--red); }
.admin__ost--refunded{ background:rgba(255,255,255,.08); color:var(--fg-2); }
.admin__ordtot{ font-weight:600; color:var(--fg); white-space:nowrap; }
.admin__ordlines{ display:block; color:var(--fg-2); font-size:13px; margin-top:3px; }
.acct__q-ord{ color:var(--green); }
.co__test{ display:inline-block; margin-left:10px; padding:3px 9px; border-radius:100px; background:rgba(249,180,26,.14); color:var(--gold); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }
.admin__ost--test{ background:rgba(249,180,26,.14); color:var(--gold); }

/* ═══ round-4 responsive fixes ═══════════════════════════ */
/* the currency switch inside the mobile drawer (nav copy is hidden under 480px) */
.drawer__cur{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 14px; margin-bottom:14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--fg-3); }
/* phones: filter chips scroll sideways on one line instead of stacking three rows
   above the first machine */
@media (max-width:600px){
  .pills{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
          margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); padding:2px var(--gutter) 8px; margin-bottom:18px; }
  .pills::-webkit-scrollbar{ display:none; }
  .pills .pillbtn{ flex:none; scroll-snap-align:start; }
  .pills--brand{ margin-top:-6px; }
  .pillbtn--sm{ font-size:13.5px; padding:9px 14px; }
  .pills .pcount{ display:none; }
}
/* the "added to cart" toast must clear the sticky bar on phones */
@media (max-width:700px){
  .ctoast{ bottom:calc(80px + env(safe-area-inset-bottom)); }
}
/* account: the Paid label really is green (the generic span rule won on specificity) */
.acct__q span.acct__q-ord{ color:var(--green); }

/* ═══ legal pages: section cards ═════════════════════════ */
/* h2 + everything up to the next h2 is wrapped by js/main.js into .legal__sec */
.legal__sec{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px); margin-bottom:14px;
}
.legal__sec:hover{ border-color:var(--line-2); }
@media (max-width:560px){
  .legal__sec{ padding:20px 18px; }
  .legal{ max-width:none; }
}

/* ═══ account: no flash of the wrong card ════════════════ */
/* Default (we already know, or JS is off): show the sign-in card, hide the
   placeholder. .is-resuming (set inline before paint when a session token
   exists) swaps them until account.js confirms. */
.auth--resume{ display:none; }
html.is-resuming .auth--resume{ display:grid; place-items:center; gap:18px; min-height:280px; }
html.is-resuming #auth-card{ display:none; }
.auth__resume-t{ color:var(--fg-3); font-size:14px; }
.auth--resume img{ height:46px; width:auto; opacity:.55; animation:authpulse 1.4s ease-in-out infinite; }
@keyframes authpulse{ 0%,100%{ opacity:.35 } 50%{ opacity:.75 } }
@media (prefers-reduced-motion: reduce){ .auth--resume img{ animation:none; } }

/* ═══ audit fixes: shared chrome + phone sizing ═══════════ */
/* #12 the legal row was the only browser-underlined link in the chrome */
.foot__legal a{ color:var(--fg-2); text-decoration:none; display:inline-block; padding:8px 0; transition:color .2s; }
.foot__legal a:hover{ color:var(--gold); }
/* #4 the contents card stopped short of the prose measure it sits in */
.post__body .toc{ max-width:none; }
/* #10 the locations band sets type straight onto video - give it the site's card.
   NO backdrop-filter here. There are six of these cards and they sit on top of
   a looping <video>, so every video frame invalidates six separate blur layers
   whether or not the page is scrolling. The opaque-enough background below
   gives the same separation for free. */
.office{
  background:rgba(21,21,23,.86); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px);
}
.office h3, .office__addr{ text-shadow:none; }
/* #10 gallery captions were washed out next to the same component elsewhere */
.gal__i figcaption{
  color:var(--fg); font-weight:500; font-size:13.5px;
  background:linear-gradient(to top, rgba(0,0,0,.92), transparent);
}
/* #11 tap targets: these six sat under the 44px the rest of the site meets */
@media (max-width:700px){
  .btn--sm{ min-height:44px; }
  .nav__ic{ width:44px; height:44px; }
  .burger{ width:44px; height:44px; }
  .foot__soc a{ width:44px; height:44px; }
  .foot__nav a{ padding:10px 0; }
}
/* #11 cart rows shattered into a three-line ladder between 480 and 600px */
@media (max-width:600px){
  .citem{ flex-wrap:wrap; }
  .citem__end{ flex:1 1 100%; justify-content:space-between; }
}
/* #7 the admin login card stretched the full page width */
.admin-gate-wrap{ max-width:560px; margin-inline:auto; }
/* #7 admin has no newsletter/nav columns, so the full footer left an empty band */
.foot--bare{ padding-top:0; }
.foot--bare .foot__legal{ border-top:1px solid var(--line); }