/* The Gearbox Company - design system
   ---------------------------------------------------------------------------------------------
   The brand already exists and it is unusual for a workshop: a deep magenta wordmark on grey
   gears, PANTONE 228 C. Rather than fight that with the usual automotive blue-or-red, the site is
   built around it - magenta does all the accent work against a neutral graphite and a lot of white
   space, so the photography of real gearboxes carries the page.

   --brand is the logo colour, measured off the client's own artwork (#9c1461). It clears 7.9:1 on
   white, so unlike the sister site's blue it needs no separate darker variant for links: one token
   serves buttons, links, eyebrows and focus rings. --brand-lo is its on-dark counterpart (9.0:1 on
   --ink), used for eyebrows and links on the hero scrim, the dark bands and the footer.

   A single muted amber (--warn) marks fault symptoms - the "signs your gearbox is in trouble" list
   - because a warning light is exactly the mental model there.

   This deliberately shares its structure and class vocabulary with autotransmissions.co.nz (same
   owner, same fleet template) while looking like a different business: different palette, squarer
   corners, heavier rules, and a header that lets the logo lead instead of shrinking it. */

:root{
  --ink:#1a1d21;          /* neutral graphite - warmer than a cool blue-black, which fights magenta */
  --ink-2:#3b414a;
  --muted:#666e78;
  --line:#e4e4e7;
  --paper:#f6f5f6;        /* faintly warm off-white so the magenta does not go cold */
  --white:#fff;

  /* Dark surfaces for hero scrims and the enquiry band. */
  --steel:#212429;
  --steel-2:#2b2f36;

  --brand:#9c1461;        /* PANTONE 228 C, from the logo. 7.9:1 on white - safe for body links. */
  --brand-dk:#7d0f4d;     /* hover / pressed */
  --brand-lo:#f0a7cf;     /* on dark surfaces only - 9.0:1 on --ink */
  --gear:#d9d9d9;         /* the logo's own gear grey, used for rules and dividers */

  --warn:#b45309;         /* fault-symptom marker, AA on white */
  --warn-lo:#f2b45c;      /* symptom marker on dark */

  --shadow:0 1px 2px rgba(26,29,33,.05), 0 8px 24px rgba(26,29,33,.08);
  --radius:3px;
  --wrap:1180px;
  /* System stack on purpose: no third-party font request, no FOUT, nothing to self-host. */
  --ff:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{font-family:var(--ff);color:var(--ink);background:var(--paper);line-height:1.65;
  font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--radius)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- type ---------- */
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
/* h1 needs its own bottom margin. Only h2 carried one, so on every inner page the lede paragraph
   butted straight against the headline with no gap at all - fine in the hero, where `.hero .lede`
   supplies its own margin-top, and wrong everywhere else. */
h1{font-size:clamp(2.05rem,5vw,3.4rem);margin-bottom:.5em}
h2{font-size:clamp(1.55rem,3.3vw,2.35rem);margin-bottom:.6em}
.hero h1{margin-bottom:0}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin-bottom:1.1em;max-width:68ch}
.lede{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--ink-2)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);display:block;margin-bottom:.9em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:#fff;font-weight:700;font-size:.95rem;
  padding:14px 26px;border:none;border-radius:var(--radius);text-decoration:none;
  cursor:pointer;transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--brand-dk)}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:10px 18px;font-size:.88rem}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--white);border-color:var(--ink)}

/* ---------- header ----------
   The logo is a near-square stacked lockup (432x351), not a slim wordmark, so it cannot be shrunk
   into a 40px strip and stay legible - three lines of type inside 351 units means anything under
   ~80px tall turns the smallest line to mush. The header is therefore taller than the fleet norm
   and the logo leads. It is a true SVG (converted from the client's vector PDF by
   build/pdf-logo-to-svg.py), so it costs nothing to render it this size and it stays sharp on any
   display. */
.hdr{position:sticky;top:0;z-index:50;background:rgba(246,245,246,.94);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:22px;min-height:96px}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}
.brand__logo{width:104px;height:auto;flex:0 0 auto}
.brand__sub{font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.6;color:var(--muted);border-left:1px solid var(--line);padding-left:13px}
/* On the near-black footer the grey gears would disappear and the magenta would drop to 2.2:1, so
   the lockup keeps its real colours on a white plaque rather than being recoloured. */
.brand--ftr .brand__logo{background:#fff;border-radius:var(--radius);padding:9px 11px;width:124px}
.brand--ftr .brand__sub{color:rgba(255,255,255,.55);border-left-color:rgba(255,255,255,.18)}
@media(max-width:420px){
  .brand__logo{width:88px}
  .brand__sub{display:none}
  .hdr__in{min-height:82px}
}

.nav{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:.87rem;font-weight:500;color:var(--ink-2);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}
.hdr__cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr__phone{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-weight:700;font-size:.92rem;white-space:nowrap}
.hdr__phone:hover{color:var(--brand)}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;
  padding:9px;cursor:pointer}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-m{display:none;flex-direction:column;border-top:1px solid var(--line);background:var(--white)}
.nav-m a{padding:14px 22px;text-decoration:none;border-bottom:1px solid var(--line);font-weight:500}
.nav-m__cta{background:var(--brand);color:#fff;font-weight:700;border-bottom:none!important}

@media(max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .nav-m[data-open]{display:flex}
  .hdr__phone span{display:none}
}
@media(max-width:520px){ .hdr__cta .btn{display:none} }

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.8}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(26,29,33,.93) 0%,rgba(26,29,33,.8) 42%,rgba(26,29,33,.36) 76%,rgba(26,29,33,.12) 100%)}
/* The scrim above runs LEFT to RIGHT, which works on a wide screen: the copy sits on the dark end
   and the photograph is still visible on the right. On a phone the column is narrower than the
   dark end of the gradient, so the whole image disappears behind it and the hero reads as a flat
   grey box - the racking shot is the strongest thing we have and it was invisible on mobile.
   Turning the gradient vertical keeps the text legible over the top while letting the photo show
   through underneath. */
@media(max-width:860px){
  .hero::after{background:linear-gradient(180deg,rgba(26,29,33,.92) 0%,rgba(26,29,33,.86) 45%,rgba(26,29,33,.62) 78%,rgba(26,29,33,.5) 100%)}
  .hero__media img{opacity:.9}
}
.hero__in{position:relative;z-index:2;padding-top:clamp(60px,10vw,118px);padding-bottom:clamp(60px,10vw,118px)}
/* --brand is the eyebrow colour on LIGHT sections; on this scrim it measures 2.2:1, a plain WCAG
   failure. --brand-lo is the on-dark variant and gives 9.0:1. */
.hero .eyebrow{color:var(--brand-lo)}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{color:rgba(255,255,255,.85);max-width:56ch;margin-top:18px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero__trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.hero__trust div{font-size:.86rem;color:rgba(255,255,255,.74)}
.hero__trust b{display:block;font-size:1.25rem;color:#fff;font-weight:800;letter-spacing:-.02em}

/* ---------- sections ---------- */
.sec{padding:clamp(52px,8vw,86px) 0}
.sec--paper{background:var(--paper)}
.sec--white{background:var(--white)}
.sec--ink{background:var(--ink);color:#fff}
.sec--ink h2{color:#fff}
.sec--ink p{color:rgba(255,255,255,.78)}
.sec__head{max-width:64ch;margin-bottom:40px}

/* ---------- service cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfc3ca}
.card__img{aspect-ratio:4/3;background:var(--line);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card__img img{transform:scale(1.04)}
.card__body{padding:20px 22px 24px}
.card h3{margin-bottom:.4em}
.card p{font-size:.94rem;color:var(--muted);margin-bottom:.8em}
.card__more{font-size:.86rem;font-weight:700;color:var(--brand)}

/* ---------- option comparison ----------
   Two or three panels side by side so the customer can see the routes at once. Pete's whole pitch
   is that the choice between a used unit, a partial repair and a full recondition should be an
   informed one, and a paragraph cannot show a comparison. */
.opts{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.opt{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 24px;display:flex;flex-direction:column}
.opt h3{margin-bottom:.5em}
.opt>p{font-size:.96rem;color:var(--muted)}
.opt .ticks{grid-template-columns:1fr;gap:10px;margin:0 0 20px!important}
.opt .ticks li{font-weight:400;font-size:.94rem}
.opt__more{margin-top:auto;font-size:.88rem;font-weight:700;color:var(--brand);text-decoration:none}
.opt__more:hover{text-decoration:underline}
.opts__foot{margin:26px auto 0;text-align:center;max-width:74ch;font-size:.96rem}
.sec--ink .opt{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.sec--ink .opt h3{color:#fff}
.sec--ink .opt>p{color:rgba(255,255,255,.7)}
.sec--ink .opt .ticks li{color:rgba(255,255,255,.86)}
.sec--ink .opt__more{color:var(--brand-lo)}
/* Inline links on a dark band need a visible colour; the .prose rules do not reach here. */
.sec--ink a:not(.btn):not(.opt__more){color:var(--brand-lo);text-decoration:underline;
  text-underline-offset:2px}

/* ---------- prose ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.6em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em}
.prose li{margin-bottom:.45em}
.prose a:not(.btn){color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.prose a:not(.btn):hover{color:var(--brand-dk)}
.prose blockquote{border-left:3px solid var(--brand);background:var(--paper);
  padding:16px 20px;margin:1.4em 0;border-radius:0 var(--radius) var(--radius) 0}
.prose blockquote p{margin-bottom:.4em;font-style:italic;color:var(--ink-2)}
.prose blockquote cite{font-style:normal;font-weight:600;font-size:.88rem;color:var(--muted)}
.split{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:1.15fr .85fr;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split__media img{border-radius:var(--radius);width:100%}
.split__media figcaption{font-size:.82rem;color:var(--muted);margin-top:8px}
@media(min-width:861px){.split__media{position:sticky;top:116px}}

/* callout - process notes, guarantees */
.note{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius);padding:18px 22px;margin:1.6em 0}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink)}

/* ---------- symptom / fault list ---------- */
.symptoms{list-style:none;margin:0!important;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.symptoms li{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px 13px 42px;position:relative;font-size:.95rem;font-weight:500;margin:0}
.symptoms li::before{content:'';position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--warn);
  box-shadow:0 0 0 4px rgba(180,83,9,.15)}

/* ---------- numbered process ---------- */
.steps{list-style:none;margin:0!important;counter-reset:step;display:grid;gap:14px}
.steps li{position:relative;padding-left:52px;counter-increment:step;margin:0;min-height:34px;
  display:flex;flex-direction:column;justify-content:center}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center}
.steps li strong{display:block}
.steps li span{font-size:.92rem;color:var(--muted)}
/* .steps carries margin:0!important, so anything following it butts against the last step. */
.steps + p{margin-top:1.3em}

/* ---------- feature ticks ---------- */
.ticks{list-style:none;margin:0!important;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ticks li{position:relative;padding-left:32px;font-weight:500;margin:0}
.ticks li::before{content:'';position:absolute;left:0;top:4px;width:20px;height:20px;
  border-radius:50%;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat}
.sec--ink .ticks li::before{background:var(--brand-lo)}

/* ---------- vehicle / capability chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.chips span{font-size:.9rem;background:var(--white);border:1px solid var(--line);
  padding:8px 15px;border-radius:99px;color:var(--ink-2);font-weight:500}
.sec--ink .chips span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}

/* ---------- stat band ---------- */
.stats{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));text-align:center}
.stat b{display:block;font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;color:var(--brand-lo)}
.stat span{font-size:.92rem;color:rgba(255,255,255,.74)}

/* ---------- gallery ---------- */
.grid-img{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-img img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);width:100%}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:700;cursor:pointer;list-style:none;position:relative;
  padding-right:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--brand);transition:transform .2s}
.faq details[open] summary::after{content:'\2212'}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq__a{padding:16px 22px 20px}
.faq__a p{margin-bottom:.7em}
.faq__a p:last-child{margin-bottom:0}

/* ---------- areas served ---------- */
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.areas span{font-size:.85rem;background:var(--white);border:1px solid var(--line);
  padding:6px 13px;border-radius:99px;color:var(--ink-2)}

/* ---------- sister-site cross reference ----------
   Auto Transmissions Ltd is the same owner at the same address. Sending automatic work there (and
   receiving manual work back) is genuinely useful to the visitor, so it gets a real panel rather
   than a footer link nobody reads. */
.sister{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius);
  padding:22px 26px}
.sister__body{flex:1 1 380px}
.sister__body p:last-child{margin-bottom:0}
.sec--ink .sister{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);
  border-left-color:var(--brand-lo)}

/* ---------- enquiry ---------- */
.enq{background:var(--ink);color:#fff;padding:clamp(52px,8vw,84px) 0}
.enq__grid{display:grid;gap:clamp(30px,5vw,60px);grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:860px){.enq__grid{grid-template-columns:1fr}}
.enq h2{color:#fff}
.enq p{color:rgba(255,255,255,.78)}
.enq__facts{list-style:none;margin:22px 0}
.enq__facts li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.96rem}
.enq__facts a{color:#fff;text-decoration:none;font-weight:600}
.enq__facts a:hover{color:var(--brand-lo)}
.enq__note{font-size:.88rem;color:rgba(255,255,255,.55)!important}

.form{background:var(--white);border-radius:var(--radius);padding:26px}
.form__row{margin-bottom:15px}
.form label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.form input,.form textarea{width:100%;font:inherit;font-size:.95rem;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.form input:focus,.form textarea:focus{border-color:var(--brand);background:#fff;outline:none}
.form textarea{resize:vertical}
.form .btn{width:100%;margin-top:6px}
.form .err{display:block;color:#b3261e;font-size:.8rem;margin-top:5px;
  text-transform:none;letter-spacing:0}
.form .err:empty{display:none}
.form__msg{margin:12px 0 0;font-size:.9rem;min-height:1.2em}
.form__msg.ok{color:#2f7d43}
.form__msg.err{color:#b3261e}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.ftr{background:#15171a;color:rgba(255,255,255,.62);padding:52px 0 0;font-size:.92rem}
.ftr__grid{display:grid;gap:34px;grid-template-columns:1.5fr 1fr 1fr;padding-bottom:38px}
@media(max-width:760px){.ftr__grid{grid-template-columns:1fr}}
.ftr h3{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.ftr a{display:block;text-decoration:none;padding:5px 0;color:rgba(255,255,255,.62)}
.ftr a:hover{color:var(--brand-lo)}
/* .ftr a sets display:block and beats a single .brand class, so restate the lockup here. */
.ftr .brand{display:flex;align-items:center;margin-bottom:14px;padding-top:0}
.ftr p{color:rgba(255,255,255,.55)}
.ftr__btm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 22px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem}
.ftr__credit{color:rgba(255,255,255,.62);text-decoration:none}
.ftr__credit:hover{color:#fff;text-decoration:underline}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.84rem;color:var(--muted);padding-top:18px;padding-bottom:0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brand)}

/* ---------- responsive map embed (contact) ---------- */
.map-wrap{position:relative;width:100%;aspect-ratio:16/10;margin-top:26px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:640px){ .map-wrap{aspect-ratio:4/3} }

/* ---------- floating contact bar ----------
   Fleet component (see F:\_Websites\CLAUDE.md). Expandable icon stack pinned lower right, built by
   site.js from /api/config, so a field left blank in /dash simply has no icon and the bar shrinks
   to whatever the client actually filled in. */
.floatbar{--fb-bg:var(--brand);--fb-icon:#fff;--fb-hover-bg:var(--ink);--fb-hover-icon:#fff;
  --fb-size:52px;--fb-gap:10px;
  position:fixed;right:clamp(.85rem,2vw,1.5rem);bottom:clamp(.85rem,2vw,1.5rem);z-index:150;
  display:flex;flex-direction:column;align-items:center;gap:var(--fb-gap)}
.floatbar__list{display:flex;flex-direction:column;gap:var(--fb-gap)}
.floatbar__btn,.floatbar__toggle{width:var(--fb-size);height:var(--fb-size);display:flex;
  align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--fb-bg);
  color:var(--fb-icon);cursor:pointer;text-decoration:none;box-shadow:0 6px 18px rgba(26,29,33,.24);
  transition:background .25s ease,color .25s ease,transform .25s ease}

/* Collapsed: the buttons stay in the DOM but leave the tab order. `visibility`, not `display`, so
   the transition can run and nothing hidden is focusable. --i counts DOWN from the top item, so
   opening cascades upward from the toggle. */
.floatbar__btn{opacity:0;visibility:hidden;transform:translateY(14px) scale(.8);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,visibility .28s,background .25s ease,color .25s ease;
  transition-delay:calc(var(--i,1) * 35ms)}
.floatbar[data-open] .floatbar__btn{opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* 🔴 This hover rule MUST come after the [data-open] rule above. In the jedibuilders original it did
   not, and `[data-open] .floatbar__btn{transform:none}` has equal specificity and won on source
   order, so the hover scale silently never fired on the link buttons - only on the toggle. */
.floatbar__btn:hover,.floatbar__btn:focus-visible,
.floatbar[data-open] .floatbar__btn:hover,.floatbar[data-open] .floatbar__btn:focus-visible,
.floatbar__toggle:hover,.floatbar__toggle:focus-visible{
  background:var(--fb-hover-bg);color:var(--fb-hover-icon);transform:scale(1.08)}

.floatbar__toggle svg{transition:transform .3s ease}
.floatbar[data-open] .floatbar__toggle svg{transform:rotate(180deg)}
@media(max-width:560px){ .floatbar{--fb-size:46px;--fb-gap:8px} }
@media(prefers-reduced-motion:reduce){ .floatbar__btn{transition-delay:0ms} }

/* Phone popup - tablet and desktop only, where a tel: link has nowhere useful to go. On a handset
   the click is never intercepted, so this never appears there. */
.phonepop{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:1.25rem;background:rgba(26,29,33,.72);backdrop-filter:blur(4px)}
.phonepop[data-open]{display:flex;animation:phonepop-in .2s ease}
@keyframes phonepop-in{from{opacity:0}to{opacity:1}}
.phonepop__panel{position:relative;background:var(--steel);color:#fff;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:2.4rem 3rem 2.1rem;
  text-align:center;box-shadow:0 18px 48px rgba(0,0,0,.45);max-width:min(92vw,26rem)}
.phonepop__label{margin:0 0 .3rem;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-lo)}
.phonepop__num{display:inline-block;font-size:clamp(1.8rem,5vw,2.5rem);font-weight:800;
  letter-spacing:-.03em;color:#fff;text-decoration:none;white-space:nowrap}
.phonepop__num:hover{color:var(--brand-lo)}
.phonepop__close{position:absolute;top:.55rem;right:.55rem;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;
  color:rgba(255,255,255,.7);cursor:pointer;transition:background .2s ease,color .2s ease}
.phonepop__close:hover{background:rgba(255,255,255,.1);color:#fff}