/* =====================================================
   MANSON'S TYRES · BERWICK V.
   Straight talk. Serious grip.
   Black, grey and white · Rally Red is the only accent
   ===================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/barlow-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url('../assets/fonts/barlow-condensed-800-italic.woff2') format('woff2')}

/* Metric-matched fallbacks for the footer wordmark. That line is sized from a
   measured width-to-font-size ratio, so a substitute face with wider glyphs
   would overrun the viewport and be clipped mid-word before the webfont
   arrives. size-adjust scales each substitute back to Barlow's proportions. */
@font-face{
  font-family:'Wordmark Fallback';
  src:local('Arial Narrow Bold Italic'),local('Arial Narrow Italic'),local('Arial Narrow');
  font-style:italic;
  font-weight:800;
  size-adjust:82.5%;
}
@font-face{
  font-family:'Wordmark Fallback 2';
  src:local('Arial Bold Italic'),local('Arial Italic'),local('Arial'),local('Helvetica');
  font-style:italic;
  font-weight:800;
  size-adjust:67.5%;
}

/* ---------- Tokens ---------- */
:root{
  /* Black, grey and white carry the site and Rally Red is the only accent.
     Every neutral is a true grey: equal red, green and blue, so nothing
     reads cool or blue next to the red. Same values as
     BRANDING/brand-tokens.css and the brand guidelines, v2.1. */
  --ink:#111111;       /* black: headings, body text, the darkest grounds */
  --graphite:#2B2B2B;  /* the darker grey: menu, dark cards */
  --steel:#5A5A5A;     /* secondary text */
  --smoke:#9C9C9C;     /* placeholders */
  --silver:#D5D5D5;    /* hairlines */
  --mist:#EBEBEB;      /* soft borders */
  --wshop:#F4F4F4;     /* light ground */
  --white:#FFFFFF;
  --red:#CD2239;
  --red-dark:#B01C31;

  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Barlow',Arial,Helvetica,sans-serif;

  --fs-display:clamp(3.2rem,13vw,9.5rem); /* hero display */
  --fs-h2:clamp(1.9rem,3.6vw,3rem);     /* Headline 28-48px */
  --fs-h3:clamp(1.35rem,2vw,1.75rem);   /* Subheading 20-28px */
  --fs-lede:clamp(1.3rem,2.3vw,1.85rem);
  --fs-body:clamp(1rem,1.1vw,1.125rem);
  --fs-label:.8rem;

  --sp-section:clamp(2.25rem,4.5vw,3.5rem);
  --wrap:1280px;
  --gutter:clamp(1.1rem,3.5vw,2.5rem);
  --radius-lg:28px;
  --radius:18px;
  --radius-sm:12px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-soft:0 18px 45px -18px rgba(17,17,17,.28),0 4px 14px -6px rgba(17,17,17,.12);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* iOS Safari would not tint its status bar from theme-color or
   color-scheme on the client's phone, so the page stops asking and paints
   that strip itself: viewport-fit=cover lets the page render behind the
   status bar, and this fixed band keeps it black whatever scrolls under.
   env() is 0 where there is no safe area, so the band has no height on a
   desktop and nothing changes. */
.safe-cap{
  position:fixed;
  top:0;left:0;right:0;
  height:env(safe-area-inset-top,0px);
  background:#000;
  z-index:70;
  pointer-events:none;
}

/* The browser's own surfaces. theme-color alone is not enough on iOS:
   Safari tints its status bar and toolbars from color-scheme, so the page
   declares dark and paints the canvas black. The page itself stays light,
   every surface on it sets its own colour. */
html{scroll-behavior:smooth;background:#000;color-scheme:dark}
/* menu jumps land below the fixed header, not under it */
[id]{scroll-margin-top:calc(4.5rem + env(safe-area-inset-top,0px))}
body{
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--wshop);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
sup{font-size:.6em;letter-spacing:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.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;
}
::selection{background:var(--red);color:var(--white)}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.blueprint :focus-visible,.duo-dark :focus-visible,
.footer :focus-visible,.mobile-menu :focus-visible,
.person-card :focus-visible{outline-color:var(--white)}
/* the header sits over photography, so the ring carries its own dark halo */
.nav :focus-visible{outline-color:var(--white);box-shadow:0 0 0 6px rgba(17,17,17,.8)}

/* ---------- Type utilities ---------- */
.dot-label{
  font-family:var(--body);
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:.55em;
}
.dot-label::before{content:'';width:24px;height:2px;background:var(--red);flex:none}
.dot-label.light{color:var(--white)}
/* for a label whose own casing matters, like FAQs, in an all-caps menu;
   named with the menus so it outranks their uppercase rule */
.nav-links a.keep-case,.mobile-menu nav a.keep-case{text-transform:none}
.accent-red{color:var(--red)}
.hero .accent-red,.page-hero .accent-red{text-shadow:0 2px 26px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35)}

/* Display level: Barlow Condensed ExtraBold Italic, ALL CAPS */
.display{
  font-family:var(--cond);
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.02em;
}

/* Headline level: Barlow Condensed Bold, ALL CAPS */
.h2-big,.showcase h2,.faq-head,.people-head h2,.finder-h,.trust-line{
  font-family:var(--cond);
  font-weight:700;
  font-size:var(--fs-h2);
  line-height:1.03;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ---------- Buttons ---------- */
.pill{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums lining-nums;
  padding:.9em 1.7em;
  border-radius:999px;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),color .3s;
  will-change:transform;
}
.pill::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .5s var(--ease-out);
}
.pill:hover::before,.pill:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.pill-red{background:var(--red);color:var(--white);box-shadow:0 10px 24px -12px rgba(205,34,57,.55)}
.pill-red::before{background:var(--red-dark)}
.pill-red:hover{transform:translateY(-3px);box-shadow:0 20px 34px -14px rgba(205,34,57,.65)}
.pill-white{background:var(--white);color:var(--ink)}
.pill-white::before{background:var(--silver)}
.pill-white:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(0,0,0,.5)}
.pill:active{transform:translateY(-1px)}
.pill-arrow{display:inline-block;transition:transform .35s var(--ease-out)}
.pill:hover .pill-arrow{transform:translateX(5px)}

.text-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:3px;
}
.text-link::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .45s var(--ease-out);
}
.text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.text-link.light{color:var(--white)}
.pill-arrow.red{color:var(--red)}

.circle-btn{
  position:relative;
  overflow:hidden;
  flex:none;
  width:54px;height:54px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--silver);
  font-size:1.2rem;
  transition:transform .45s var(--ease-out),color .3s,border-color .3s;
}
.circle-btn::before{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  background:var(--ink);
  transform:scale(0);
  transition:transform .45s var(--ease-out);
}
.circle-btn > *{position:relative;z-index:1}
.circle-btn svg{width:40%;height:40%}
.circle-btn:hover{color:var(--white);border-color:var(--ink);transform:rotate(45deg)}
.circle-btn:hover::before{transform:scale(1)}
.circle-btn.sm{width:46px;height:46px;font-size:1rem}
.circle-btn[disabled]{opacity:.35;pointer-events:none}
.circle-btn.solid{background:var(--ink);color:var(--white);border-color:var(--ink)}
.circle-btn.solid::before{background:var(--red)}
.circle-btn.solid:hover{border-color:var(--red)}

.bracket{
  position:absolute;
  width:34px;height:34px;
  border:2px solid var(--red);
  pointer-events:none;
  z-index:2;
}
.bracket.tl{top:16px;left:16px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.bracket.br{bottom:16px;right:16px;border-left:0;border-top:0;border-bottom-right-radius:10px}

/* =====================================================
   NAV
   ===================================================== */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  border-bottom:1px solid transparent;
  transition:background-color .4s,box-shadow .4s,backdrop-filter .4s,border-color .4s;
}
.nav-inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:calc(.9rem + env(safe-area-inset-top,0px)) var(--gutter) .9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
/* the wordmark is black art; invert paints it white over dark ground.
   Over the hero it is white, on the glass over light sections it flips
   to black, and it goes back to white while the dark menu is open. */
.nav-badge img{
  width:190px;height:auto;
  filter:invert(1) drop-shadow(0 3px 9px rgba(17,17,17,.45));
  transition:transform .35s var(--ease-out),filter .3s,width .3s;
}
.nav-badge:hover img{transform:scale(1.04)}
.nav-links{display:flex;gap:2.4rem}
.nav-links a{
  position:relative;
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--white);
  padding:.4em 0;
  transition:color .25s;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:100%;height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-links sup{
  opacity:.5;
  margin-left:.15em;
  font-weight:600;
  letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums;
  transition:opacity .25s;
}
.nav-links a:hover sup,.nav-links a.is-active sup{opacity:.85}
/* Fallback for browsers without backdrop-filter: stay solid, never risk the
   white links washing out. */
.nav.scrolled{background:var(--ink);box-shadow:0 8px 30px -14px rgba(17,17,17,.5)}

/* Clear frosted glass: no colour tint at all, just blur. The page scrolls
   through white sections, so instead of darkening the bar the nav text flips
   to black over light ground and stays white over the hero and footer. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.scrolled{
    background:transparent;
    -webkit-backdrop-filter:blur(20px) saturate(1.3);
    backdrop-filter:blur(20px) saturate(1.3);
    border-bottom-color:rgba(255,255,255,.16);
    box-shadow:none;
  }
  .nav.scrolled.on-light{border-bottom-color:rgba(17,17,17,.12)}
  .nav.scrolled.on-light .nav-links a{color:var(--ink)}
  .nav.scrolled.on-light .nav-burger span{background:var(--ink)}
  .nav.on-light:not(.menu-open) .nav-badge img{filter:none}
  /* over light ground the red ring is the legible one again */
  .nav.scrolled.on-light :focus-visible{outline-color:var(--red);box-shadow:none}
}
.nav.scrolled .nav-inner{padding-block:.55rem}
.nav.scrolled .nav-badge img{width:170px}

.nav-burger{display:none;flex-direction:column;gap:6px;padding:.5rem}
.nav-burger span{width:26px;height:2px;background:var(--white);transition:transform .3s,opacity .3s}
/* open, it sits on the dark menu whatever is under it, so it is always white */
.nav.menu-open .nav-burger span,
.nav.scrolled.on-light.menu-open .nav-burger span{background:var(--white)}
.nav-burger.open span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-burger.open span:last-child{transform:translateY(-4px) rotate(-45deg)}

.mobile-menu[hidden]{display:none}
.mobile-menu{
  position:fixed;inset:0;z-index:55;
  background:linear-gradient(168deg,var(--graphite) 0%,var(--ink) 100%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* ambient light, the same language as the dark panels */
.mm-glow{position:absolute;border-radius:50%;pointer-events:none}
.mm-glow.a{
  width:70vw;height:70vw;
  right:-30vw;top:-18vw;
  background:radial-gradient(circle,rgba(205,34,57,.2) 0%,transparent 65%);
}
.mm-glow.b{
  width:85vw;height:85vw;
  left:-38vw;bottom:-30vw;
  background:radial-gradient(circle,rgba(0,0,0,.55) 0%,transparent 68%);
}
.mm-noise{
  position:absolute;inset:0;
  opacity:.28;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
/* A landscape phone is short, so the list is its own scroller in the room
   between the header and the call bar: centred when it fits, scrollable when
   it doesn't, and never cut off where a link can't be reached. */
.mobile-menu{
  padding-top:calc(5.5rem + env(safe-area-inset-top,0px)); /* header with the 190px badge */
  padding-bottom:calc(3.9rem + env(safe-area-inset-bottom,0px));
}
.mobile-menu nav{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(.5rem,1.6vh,1.1rem);
  min-height:0;
  max-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  /* room for the CTA's shadow and the focus ring inside the scroller */
  padding:.6rem clamp(1.5rem,7vw,3.5rem) 1.6rem;
}
.mobile-menu nav a{
  display:inline-flex;
  align-items:baseline;
  gap:.55rem;
  font-family:var(--cond);
  font-weight:700;
  font-size:clamp(2.1rem,8.5vw,3rem);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:rgba(255,255,255,.42);
  transition:color .25s,transform .3s var(--ease-out);
}
.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible{color:var(--white);transform:translateX(6px)}
.mobile-menu nav a.is-here{color:var(--white)}
/* The menu lists seven places to go and one thing to do, so the one thing to
   do is dressed as an action: the same red pill the rest of the site uses
   for its single primary CTA, sized down from the display links so it reads
   as a button rather than an eighth heading. */
.mobile-menu nav a.mm-cta{
  align-items:center;
  margin-top:clamp(.7rem,2.2vh,1.3rem);
  padding:.72em 1.5em;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font-size:clamp(1.3rem,5.4vw,1.75rem);
  letter-spacing:.04em;
  box-shadow:0 14px 30px -12px rgba(205,34,57,.75);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.mobile-menu nav a.mm-cta:hover,
.mobile-menu nav a.mm-cta:focus-visible{
  color:var(--white);
  transform:translateY(-3px);
  box-shadow:0 20px 36px -12px rgba(205,34,57,.85);
}
.mobile-menu nav a.mm-cta .pill-arrow{
  color:var(--white);
  font-size:.8em;
}
.mobile-menu nav a.mm-cta:hover .pill-arrow{transform:translateX(4px)}

.mobile-menu nav a sup{
  font-family:var(--body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--smoke);
}
/* the split contact bar pinned to the base */
.mm-bar{
  position:absolute;
  left:0;right:0;bottom:0;
  display:grid;
  border-top:1px solid rgba(255,255,255,.16);
}
.mm-bar a{
  padding:1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  text-align:center;
  font-weight:600;
  font-size:.88rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--white);
  transition:background-color .25s;
}
.mm-bar a:hover{background:rgba(255,255,255,.08)}

/* entrance: the panel fades, the links rise in a stagger */
.js .mobile-menu{animation:mmIn .3s ease-out}
.js .mobile-menu nav a{animation:mmLink .55s var(--ease-out) backwards}
.js .mobile-menu nav a:nth-child(1){animation-delay:.05s}
.js .mobile-menu nav a:nth-child(2){animation-delay:.11s}
.js .mobile-menu nav a:nth-child(3){animation-delay:.17s}
.js .mobile-menu nav a:nth-child(4){animation-delay:.23s}
.js .mobile-menu nav a:nth-child(5){animation-delay:.29s}
.js .mobile-menu nav a:nth-child(6){animation-delay:.35s}
.js .mobile-menu nav a:nth-child(7){animation-delay:.41s}
.js .mobile-menu nav a:nth-child(8){animation-delay:.47s}
.js .mobile-menu .mm-bar{animation:mmLink .55s var(--ease-out) .51s backwards}
@keyframes mmIn{from{opacity:0}to{opacity:1}}
@keyframes mmLink{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:var(--ink);
}
/* the photo layer is oversized so it can drift on scroll without ever
   exposing the edge of the hero */
.hero-slides{position:absolute;inset:-28% 0;will-change:transform}
.hero-slide{position:absolute;inset:0}
.hero-slide{
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.4s ease,transform 8s linear;
}
.hero-slide.is-on{opacity:1;transform:scale(1)}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(17,17,17,.74) 0%,rgba(17,17,17,.34) 34%,rgba(17,17,17,.28) 55%,rgba(17,17,17,.80) 100%),
    linear-gradient(100deg,rgba(17,17,17,.72) 0%,rgba(17,17,17,.36) 46%,rgba(17,17,17,.10) 70%);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:9rem var(--gutter) 8.5rem;
  flex:1;
  display:flex;
  align-items:flex-start;
}
.hero-copy{margin-top:clamp(1rem,6vh,4rem)}
.hero-copy .display{
  color:var(--white);
  font-size:var(--fs-display);
  text-shadow:0 4px 30px rgba(17,17,17,.45);
}
.hero-copy .display span{display:block}
.hero-sub{
  color:var(--white);
  font-weight:500;
  font-size:clamp(.95rem,1.3vw,1.1rem);
  line-height:1.5;
  margin:1.5rem 0 2.1rem;
  opacity:.92;
}
.hero-meta{
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:0;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter) 2rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}
.hero-count{display:flex;align-items:center;gap:1.1rem}
.hc{
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--white);
  opacity:.55;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.4em 0;
  transition:opacity .3s;
}
.hc:hover{opacity:.85}
.hc.is-on{opacity:1}
.hc.is-on::after{content:'';width:52px;height:1px;background:var(--white);display:inline-block}
.hero-pp{
  position:relative;
  width:44px;height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transition:transform .35s var(--ease-out);
}
.hero-pp:hover{transform:scale(1.08)}
.hero-pp-ico{
  position:absolute;
  width:12px;height:12px;
  display:block;
}
/* two bars for pause, one triangle for play */
.hero-pp-ico::before,.hero-pp-ico::after{
  content:'';
  position:absolute;
  top:1px;
  width:3.5px;height:10px;
  background:var(--white);
  transition:opacity .2s;
}
.hero-pp-ico::before{left:1px}
.hero-pp-ico::after{right:1px}
.hero-pp[aria-pressed="true"] .hero-pp-ico::before{
  left:2px;top:0;
  width:0;height:0;
  background:transparent;
  border-left:9px solid var(--white);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.hero-pp[aria-pressed="true"] .hero-pp-ico::after{opacity:0}
.hero-progress{width:44px;height:44px;transform:rotate(-90deg)}
.hero-progress .track{fill:none;stroke:rgba(255,255,255,.25);stroke-width:2}
.hero-progress .fill{
  fill:none;stroke:var(--white);stroke-width:2;
  stroke-dasharray:119.4;
  stroke-dashoffset:119.4;
  stroke-linecap:round;
}
.hero-progress .fill.run{animation:ringfill var(--slide-ms,6500ms) linear forwards}
@keyframes ringfill{to{stroke-dashoffset:0}}

/* the rotating call ring */
.hero-ring{
  position:absolute;
  z-index:3;
  /* lower right, clear of the headline at every width */
  left:auto;
  right:clamp(2rem,7vw,7rem);
  top:auto;
  bottom:clamp(7rem,16vh,11rem);
  translate:0 0;
  width:132px;height:132px;
  display:grid;
  place-items:center;
}
.hero-ring svg{position:absolute;inset:0;animation:spin 22s linear infinite}
.ring-text{
  fill:var(--white);
  font-family:var(--body);
  font-weight:600;
  font-size:9.5px;
  letter-spacing:.22em;
  font-variant-numeric:tabular-nums lining-nums;
}
.ring-btn{
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.4);
  display:grid;
  place-items:center;
  color:var(--white);
  transition:background-color .3s,transform .35s var(--ease-out);
}
.ring-btn svg{width:22px;height:22px;position:static;animation:none}
.hero-ring:hover .ring-btn{background:var(--red);border-color:var(--red);transform:scale(1.08)}
@keyframes spin{to{rotate:360deg}}

/* =====================================================
   TRUST STRIP
   ===================================================== */
.trust{padding:var(--sp-section) 0}
.trust-grid{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4rem);
  align-items:center;
}
.trust-card{
  display:flex;
  align-items:center;
  gap:.85rem;
  flex-direction:column;
  align-items:flex-start;
  padding:1.35rem 1.6rem;
  border-radius:var(--radius);
  background:var(--graphite);
  color:var(--white);
  box-shadow:var(--shadow-soft);
}
.trust-card p{font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.72)}
.trust-card strong{color:var(--white);font-weight:600}
.trust-line{margin-top:.6rem}
.trust-line span{display:block}

/* =====================================================
   TYRES AND MECHANICAL
   Two real sections rather than tabs, so each has its own place in the
   menu. They share one body: the copy beside a pair of photos, with
   Mechanical mirrored so the pair reads as a spread, not a repeat.
   ===================================================== */
.showcase{padding:var(--sp-section) 0}
.show-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.showcase h2{margin:.6rem 0 1rem;max-width:18ch}
.svc-lede{color:var(--steel);max-width:46ch;line-height:1.68}

/* brands as a row of tags: the names are the point, so they are set in the
   display face rather than listed in a sentence */
.brand-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin-top:clamp(1.25rem,2.6vw,1.75rem);
}
.brand-tags li{display:flex}
/* the brand names link out to each brand's own site, so they carry a small
   arrow and behave like the site's other links; "and much more" does not */
.brand-tags a,.brand-tags li.more{
  font-family:var(--cond);
  font-weight:700;
  font-size:1.05rem;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.55em 1em;
  border:1px solid var(--silver);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
}
.brand-tags a{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  transition:background-color .25s,border-color .25s,color .25s,transform .3s var(--ease-out);
}
.brand-tags a svg{width:.72em;height:.72em;flex:none;opacity:.5;transition:opacity .25s,transform .3s var(--ease-out)}
.brand-tags a:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--white)}
.brand-tags a:focus-visible svg{opacity:1}
@media (hover:hover){
  .brand-tags a:hover{background:var(--ink);border-color:var(--ink);color:var(--white);transform:translateY(-2px)}
  .brand-tags a:hover svg{opacity:1;transform:translate(1px,-1px)}
}
/* the brands' own logos, shown in one colour so they sit in the black and
   white site: black on the white tag, white when the tag fills on hover */
.brand-tags a.brand-logo{min-height:2.6rem; padding-block:0; padding-inline:1.1em .95em; gap:.6em}
.brand-tags a.brand-logo img{display:block; width:auto; filter:brightness(0); transition:filter .25s}
.brand-tags a.brand-logo:focus-visible img{filter:brightness(0) invert(1)}
@media (hover:hover){ .brand-tags a.brand-logo:hover img{filter:brightness(0) invert(1)} }
/* Windows High Contrast would repaint the pill in system colours while the
   filter keeps the logo black or white, hiding it on a dark or a light theme.
   The pills are already black and white, so they keep their own colours. */
@media (forced-colors:active){
  .brand-tags a.brand-logo{forced-color-adjust:none; background:#fff; color:#111; border-color:#111}
  .brand-tags a.brand-logo:focus-visible{background:#111; color:#fff; outline:3px solid #fff; box-shadow:0 0 0 5px #111}
}
@media (forced-colors:active) and (hover:hover){
  .brand-tags a.brand-logo:hover{background:#111; color:#fff}
}
.brand-tags li.more{
  align-items:center;
  min-height:2.6rem;
  font-family:var(--body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.12em;
  padding:0 1.1em;
  border-style:dashed;
  border-color:var(--steel);
  background:transparent;
  color:var(--steel);
}

/* the services as a ruled index, numbered the way the menu is */
.svc-list{
  list-style:none;
  counter-reset:svc;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--silver);
}
.svc-list li{
  counter-increment:svc;
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr);
  align-items:baseline;
  padding:.8rem 0;
  border-top:1px solid var(--silver);
  font-family:var(--cond);
  font-weight:700;
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  line-height:1.15;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.svc-list li::before{
  content:counter(svc,decimal-leading-zero);
  font-family:var(--body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--red);
  font-variant-numeric:tabular-nums lining-nums;
}
.svc-list abbr{text-decoration:none;cursor:help}
.svc-list small{
  display:block;
  margin-top:.3rem;
  font-family:var(--body);
  font-weight:500;
  font-size:.82rem;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--steel);
}
.svc-badge{
  display:inline-block;
  vertical-align:.2em;
  margin-left:.45rem;
  padding:.45em .8em;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font-family:var(--body);
  font-style:normal;
  font-weight:600;
  font-size:.64rem;
  line-height:1;
  letter-spacing:.1em;
}

.svc-sub{margin-top:clamp(1.75rem,3.4vw,2.5rem)}
.svc-sub .brand-tags{margin-top:.9rem}

.show-media{display:grid;grid-template-columns:1.55fr 1fr;gap:1rem;align-items:center}
.show-shot{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--silver);
}
.show-shot.big{aspect-ratio:3/3.4}
.show-shot.small{aspect-ratio:3/3.9}
.show-shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.show-shot:hover > img,.show-shot:hover > picture > img{transform:scale(1.04)}
.js .show-shot.in:hover > img,.js .show-shot.in:hover > picture > img{transform:scale(1.04)}

/* Side by side on a wide screen. The Tyres list runs long, so the photos
   ride along beside it rather than floating in the middle of a gap, and
   Mechanical is mirrored: photos first, the big one hard against the copy.
   Below this width the copy always leads and the photos follow. */
@media (min-width:1081px){
  .show-body{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .show-media{position:sticky;top:6.5rem}
  .svc-flip .show-body{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .svc-flip .show-media{order:-1;grid-template-columns:1fr 1.55fr}
  .svc-flip .show-shot.big{order:2}
}

/* =====================================================
   THE FAMILY
   ===================================================== */
.people{padding:var(--sp-section) 0}
.people-head{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4rem);
  align-items:end;
  margin-bottom:clamp(2rem,4vw,3.25rem);
}
.people-head h2{max-width:18ch}
.people-note{color:var(--steel);font-size:.95rem;line-height:1.6;max-width:40ch}

.people-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);
  gap:1rem;
  align-items:stretch;
}
.quote-card{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  padding:clamp(1.5rem,3vw,2.25rem);
  border-radius:var(--radius);
  background:var(--white);
  border:1px solid var(--mist);
  box-shadow:var(--shadow-soft);
}
.quote-card p{
  font-family:var(--cond);
  font-weight:700;
  font-size:var(--fs-h3);
  line-height:1.16;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ink);
}
.quote-card footer{
  font-weight:600;font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel);
}
.quote-card .pill{align-self:flex-start;margin-top:auto}

/* a portrait frame keeps the faces in shot at every width */
.person-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
  min-height:300px;
  background:var(--ink);
}
.person-card img{width:100%;height:100%;object-fit:cover;object-position:center 34%;position:absolute;inset:0}
.person-card figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:1.5rem 1.15rem 1.05rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  background:linear-gradient(to top,rgba(17,17,17,.9),rgba(17,17,17,0));
  color:var(--white);
}
.person-name{
  font-family:var(--cond);font-weight:700;font-size:1.3rem;
  text-transform:uppercase;letter-spacing:.04em;
}
.person-role{
  font-weight:600;font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}

/* =====================================================
   STATEMENT BAND
   ===================================================== */
/* trimmed where it meets the full-bleed panel, so every join matches */
.band{padding:var(--sp-section) var(--gutter) calc(var(--sp-section) * .5)}
.band-block{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--white);
  border:1px solid var(--mist);
  box-shadow:var(--shadow-soft);
  color:var(--ink);
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  padding:clamp(1.5rem,3vw,2.25rem);
}
.band-shot{
  position:relative;z-index:2;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/3.6;
}
.band-shot img{width:100%;height:100%;object-fit:cover}
.band-copy{position:relative;z-index:2;padding-right:clamp(0px,2vw,1.5rem)}
.band-statement{
  font-family:var(--cond);
  font-weight:700;
  font-size:clamp(1.6rem,3vw,2.5rem);
  line-height:1.06;
  text-transform:uppercase;
  letter-spacing:.02em;
  max-width:20ch;
  color:var(--ink);
}
.band-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
.bstat{
  padding:1.1rem 1rem;
  border-radius:var(--radius-sm);
  background:var(--wshop);
  border:1px solid var(--mist);
  transition:transform .4s var(--ease-out),border-color .3s;
}
.bstat:hover{transform:translateY(-3px);border-color:var(--silver)}
.bstat-num{
  display:block;
  font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(1.9rem,3.4vw,2.75rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.bstat-label{
  display:block;
  margin-top:.5rem;
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel);
}

/* =====================================================
   WORKSHOP · TWO CARDS
   ===================================================== */
/* Full-bleed workshop photo behind glass cards, the same treatment the
   booking panel used. */
.duo{
  position:relative;
  overflow:hidden;
  /* full-bleed panels run a touch deeper than the light sections */
  padding:calc(var(--sp-section) * 2.4) 0;
  color:var(--white);
}
.duo-bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.duo-shade{
  position:absolute;
  inset:0;
  z-index:1;
  /* lighter than the form panel: here the photo is meant to read */
  background:
    linear-gradient(180deg,rgba(17,17,17,.86) 0%,rgba(17,17,17,.68) 45%,rgba(17,17,17,.88) 100%),
    linear-gradient(100deg,rgba(17,17,17,.55) 0%,rgba(17,17,17,.2) 60%);
}
.duo-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:1rem;
  align-items:stretch;
}
.duo-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:rgba(17,17,17,.44);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.duo-dark{
  padding:clamp(2rem,4vw,3.5rem);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.15rem;
}
/* concentric rings, a nod to the tread pattern */
.duo-dark h2{
  font-family:var(--cond);
  font-weight:700;
  font-size:var(--fs-h2);
  line-height:1.03;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--white);
  max-width:13ch;
  font-size:clamp(2.1rem,4.2vw,3.4rem);
}
.duo-dark p{color:rgba(255,255,255,.78);max-width:38ch;line-height:1.72;font-size:var(--fs-body)}
.duo-dark .pill{margin-top:auto}

/* ---------- Blueprint panel ---------- */
.blueprint{
  padding:clamp(1.75rem,3.5vw,3rem);
  display:flex;
  flex-direction:column;
}
.bp-noise{
  position:absolute;inset:0;
  opacity:.3;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.bp-head{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:1rem;
  margin-bottom:clamp(.75rem,2vw,1.25rem);
}
.bp-title{
  font-family:var(--cond);
  font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--white);
  white-space:nowrap;
}
.bp-rule{flex:1;height:1px;background:rgba(255,255,255,.22)}
.bp-body{
  position:relative;z-index:2;
  display:flex;
  flex-direction:column;
  gap:clamp(1rem,2.5vw,1.75rem);
}

.bp-legend{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.4rem;
}
.bp-legend li{list-style:none}
.bp-item{
  position:relative;
  width:100%;
  display:block;
  text-align:left;
  padding:.95rem .1rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.bp-item .bp-name{transition:transform .4s var(--ease-out),color .3s}
.bp-item:hover .bp-name,.bp-item.is-on .bp-name{transform:translateX(.5rem)}
/* the rule under each row fills in rather than a box appearing around it */
.bp-item::after{
  content:'';
  position:absolute;
  left:0;bottom:-1px;
  width:100%;height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--ease-out);
}
.bp-item.is-on::after{transform:scaleX(1)}
.bp-name{
  display:block;
  font-family:var(--cond);
  font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  transition:color .3s;
}
.bp-item.is-on .bp-name{color:var(--white)}
.bp-item:hover .bp-name{color:var(--white)}
.bp-readout{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:.85rem;
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.22);
}
.bp-ro-text{color:rgba(255,255,255,.82);font-size:var(--fs-body);line-height:1.6;max-width:64ch}

/* =====================================================
   FAQ
   ===================================================== */
.faq{padding:calc(var(--sp-section) * .6) 0 var(--sp-section)}
.faq-head{text-align:center;max-width:22ch;margin:0 auto clamp(2rem,4vw,3.25rem)}
.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.faq-list{
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:var(--radius-lg);
  padding:clamp(1rem,2.5vw,1.75rem);
  box-shadow:var(--shadow-soft);
}
.acc{border-bottom:1px solid var(--mist)}
.acc:last-of-type{border-bottom:0}
.acc summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem .35rem;
  font-family:var(--cond);
  font-weight:700;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--ink);
  transition:color .25s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--red)}
.acc-ico{
  position:relative;flex:none;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--silver);
  transition:background-color .3s,border-color .3s,transform .4s var(--ease-out);
}
.acc-ico::before,.acc-ico::after{
  content:'';position:absolute;top:50%;left:50%;
  translate:-50% -50%;
  background:var(--ink);
  transition:background-color .3s,opacity .3s;
}
.acc-ico::before{width:11px;height:1.5px}
.acc-ico::after{width:1.5px;height:11px}
.acc[open] .acc-ico{background:var(--ink);border-color:var(--ink);transform:rotate(90deg)}
.acc[open] .acc-ico::before{background:var(--white)}
.acc[open] .acc-ico::after{opacity:0}
.acc-body{padding:0 .35rem 1.25rem}
.acc-body p{color:var(--steel);line-height:1.7;max-width:56ch}
.js .acc[open] .acc-body{animation:accOpen .5s var(--ease-out)}
@keyframes accOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq-ask{display:flex;align-items:center;gap:.7rem;padding:1.25rem .35rem .35rem}

.faq-shot{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/4.2;
  background:var(--silver);
}
.faq-shot img{width:100%;height:100%;object-fit:cover}

/* =====================================================
   BOOKING
   Dormant on the homepage: the section's markup lives in
   archive/booking-form-section.html for the coming contact
   page, which shares this stylesheet.
   ===================================================== */
.booking{
  position:relative;
  overflow:hidden;
  padding:calc(var(--sp-section) * 1.45) 0;
  color:var(--white);
}
.booking-bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.booking-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(17,17,17,.94) 0%,rgba(17,17,17,.86) 45%,rgba(17,17,17,.95) 100%),
    linear-gradient(100deg,rgba(17,17,17,.7) 0%,rgba(17,17,17,.35) 60%);
}
.booking-inner{position:relative;z-index:2}
.booking-head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
  margin-bottom:clamp(2rem,4vw,3rem);
}
/* a short rule instead of the site's red dot, so the two eyebrows differ */
.rule-label{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--smoke);
}
.rule-label-line{width:34px;height:1px;background:var(--red);flex:none}
.booking-title{
  font-family:var(--cond);
  font-weight:700;
  font-size:var(--fs-h2);
  line-height:1.02;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--white);
  margin:1.1rem 0 1.2rem;
}
.booking-intro p{color:rgba(255,255,255,.76);max-width:46ch;line-height:1.7}
.booking-intro .text-link{margin-top:1.4rem;font-variant-numeric:tabular-nums lining-nums}

/* opening hours */
.hours{border-left:3px solid var(--red);padding-left:1.4rem}
.hours h3{
  font-family:var(--cond);
  font-weight:700;
  font-size:var(--fs-h3);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:1.1rem;
}
.hours-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.hours-row dt{
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.hours-row dd{
  font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--white);
}
/* placeholder style kept for the contact page's hours panel */
.hours-row dd.tbc{color:rgba(255,255,255,.5);font-weight:500;font-style:italic}
.hours-note{margin-top:1.1rem;color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.6}

/* the glass form card */
.booking-form{
  border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3.5vw,2.5rem);
  background:rgba(17,17,17,.44);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.bf-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.4rem);
}
.bf-field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.bf-wide{grid-column:1/-1}
.bf-field label{
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.bf-field input,.bf-field select,.bf-field textarea{
  color-scheme:light;
  font:inherit;
  font-size:1rem;
  width:100%;
  color:var(--white);
  background:rgba(17,17,17,.5);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-sm);
  padding:.85em 1em;
  transition:border-color .25s,background-color .25s;
}
.bf-field textarea{resize:vertical;min-height:96px}
.bf-field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.7) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.7) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.6em;
}
.bf-field select option{background:var(--ink);color:var(--white)}
.bf-field ::placeholder{color:rgba(255,255,255,.42)}
.bf-field input:hover,.bf-field select:hover,.bf-field textarea:hover{border-color:rgba(255,255,255,.36)}
.bf-field input:focus,.bf-field select:focus,.bf-field textarea:focus{
  outline:none;
  border-color:var(--white);
  background:rgba(17,17,17,.7);
}
.bf-field input:focus-visible,.bf-field select:focus-visible,.bf-field textarea:focus-visible{
  outline:3px solid var(--white);
  outline-offset:2px;
}
.bf-field :user-invalid{border-color:var(--red)}

.bf-submit{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  margin-top:clamp(1.1rem,2.5vw,1.75rem);
  padding:1.05em 2em;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:0 14px 30px -14px rgba(205,34,57,.7);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.bf-submit::before{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:var(--red-dark);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .5s var(--ease-out);
}
.bf-submit:hover{transform:translateY(-3px);box-shadow:0 22px 40px -16px rgba(205,34,57,.75)}
.bf-submit:hover::before{transform:scaleX(1);transform-origin:left center}
.bf-note{margin-top:.9rem;text-align:center;color:rgba(255,255,255,.6);font-size:.85rem}

@media (max-width:1080px){
  .booking-head{grid-template-columns:1fr;gap:2.25rem}
  .bf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .bf-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .bf-submit,.bf-submit::before,.bf-field input,.bf-field select,.bf-field textarea{transition:none}
}

/* =====================================================
   WHERE TO FIND US
   A keyless Google embed, centred exactly on the shop
   with interaction off, so the badge pin overlaid at the
   centre is always on the money. Clicking opens Maps.
   ===================================================== */
.finder{padding:var(--sp-section) 0}
.finder .rule-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  border-bottom:1px solid var(--silver);
  padding-bottom:.9rem;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.finder .rule-tag{
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
}
.finder-card{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.finder-map{
  position:relative;
  display:block;
  min-height:clamp(320px,40vw,480px);
  background:var(--silver);
}
.finder-map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  /* interaction stays off so the centred pin can never drift */
  pointer-events:none;
  filter:saturate(.85);
  transition:filter .4s;
}
.finder-map:hover iframe{filter:saturate(1.05)}

/* the badge pin: puck, arrow stem, ground dot */
.finder-pin{
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}
.finder-pin-float{
  display:flex;
  flex-direction:column;
  align-items:center;
  filter:drop-shadow(0 16px 20px rgba(17,17,17,.35));
  transition:transform .4s var(--ease-out);
}
.finder-map:hover .finder-pin-float{transform:translateY(-5px)}
.finder-pin-puck{
  display:block;
  background:var(--white);
  border-radius:14px;
  padding:.5rem .6rem;
}
/* the tyre mark is portrait, so it is sized by height to fill the puck */
.finder-pin-puck img{height:clamp(44px,5vw,56px);width:auto;display:block}
.finder-pin-stem{
  width:0;height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:13px solid var(--white);
}
.finder-pin-dot{
  margin-top:7px;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 5px rgba(205,34,57,.25);
}

.finder-info{
  padding:clamp(1.75rem,3.5vw,2.75rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.9rem;
}
.finder-info h3{
  font-family:var(--cond);
  font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.05;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
}
.finder-info address{
  font-style:normal;
  color:var(--steel);
  line-height:1.65;
  font-size:var(--fs-body);
}
.finder-serving{color:var(--steel);font-size:.92rem;line-height:1.6}
.finder-hours{
  color:var(--ink);
  font-weight:600;
  font-size:.92rem;
  font-variant-numeric:tabular-nums lining-nums;
}
.finder-actions{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
  margin-top:.4rem;
}
.finder-tel{font-variant-numeric:tabular-nums lining-nums}

@media (max-width:900px){
  .finder-card{grid-template-columns:1fr}
  .finder-map{min-height:0;aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .finder-map iframe,.finder-pin-float{transition:none}
  .finder-map:hover .finder-pin-float{transform:none}
}

/* =====================================================
   FINALE
   ===================================================== */
.finale{padding:calc(var(--sp-section) * .8) 0 var(--sp-section);text-align:center}
.finale-kicker{
  font-family:var(--body);
  font-weight:600;font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);
}
.finale-word{
  display:block;
  margin:.35em 0 .2em;
  font-family:var(--cond);
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(3rem,12vw,10rem);
  line-height:.86;
  letter-spacing:.01em;
  color:var(--ink);
  transition:color .35s;
}
.finale-word:hover{color:var(--red)}
.finale-sub{color:var(--steel);font-size:.95rem}

/* =====================================================
   GOOGLE REVIEWS
   Dormant: the section's markup is parked in
   archive/google-reviews-section.html until the client
   wants it back. Google's own marks keep their own
   colours, the same way the tyre partner logos do.
   ===================================================== */
.greviews{padding:calc(var(--sp-section) * .8) 0 var(--sp-section);background:var(--wshop)}
.grev-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,2rem) clamp(1.5rem,3.5vw,2.5rem);
  box-shadow:var(--shadow-soft);
}
.grev-title{
  font-family:var(--body);
  font-weight:700;
  font-size:clamp(1.4rem,2.2vw,1.8rem);
  letter-spacing:-.01em;
  color:var(--ink);
}
.gc-b{color:#4285F4}.gc-r{color:#EA4335}.gc-y{color:#FBBC04}.gc-g{color:#34A853}
.grev-rating{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-top:.4rem;
}
.grev-rating strong{
  font-weight:700;
  font-size:1.6rem;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink);
}
.grev-stars{position:relative;display:inline-block;font-size:1.45rem;line-height:1;letter-spacing:.06em}
.grev-count{color:var(--steel);font-size:.95rem;font-variant-numeric:tabular-nums lining-nums}
.grev-stars-bg{color:var(--mist)}
.grev-stars-fill{
  position:absolute;
  left:0;top:0;
  overflow:hidden;
  white-space:nowrap;
  color:#FBBC04;
}
.grev-cta{
  flex:none;
  background:var(--ink);
  color:var(--white);
  font-weight:600;
  font-size:.92rem;
  padding:.85em 1.7em;
  border-radius:999px;
  transition:background-color .25s,transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.grev-cta:hover{background:var(--red);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(205,34,57,.6)}

.grev-carousel[hidden]{display:none}
.grev-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-top:1.25rem;
}
.grev-viewport{overflow:hidden;flex:1}
.grev-track{
  display:flex;
  gap:1rem;
  transition:transform .6s var(--ease-out);
}
.grev-card{
  flex:0 0 calc(25% - .75rem);
  min-width:0;
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:var(--radius);
  padding:1.4rem;
  box-shadow:var(--shadow-soft);
}
.grev-head{display:flex;align-items:center;gap:.8rem}
.grev-avatar{
  flex:none;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--ink);
  color:var(--white);
  display:grid;place-items:center;
  font-weight:700;
  font-size:1.1rem;
}
.grev-name{font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.25}
.grev-when{color:var(--steel);font-size:.8rem}
.grev-card .stars{color:#FBBC04;font-size:1.05rem;letter-spacing:.08em;margin:.7rem 0 .45rem}
.grev-text{
  color:var(--steel);
  font-size:.92rem;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.grev-card.open .grev-text{display:block;-webkit-line-clamp:unset}
.grev-more{
  margin-top:.5rem;
  font-weight:600;
  font-size:.85rem;
  color:var(--ink);
  cursor:pointer;
  background:none;border:0;padding:0;
}
.grev-more:hover{text-decoration:underline}
.grev-nav{flex:none}

@media (max-width:1080px){.grev-card{flex-basis:calc(50% - .5rem)}}
@media (max-width:640px){
  .grev-card{flex-basis:100%}
  .grev-bar{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .grev-track{transition:none}
  .grev-cta,.grev-nav{transition:none}
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer{
  background:var(--ink);
  color:var(--white);
  padding:calc(var(--sp-section) * 1.3) 0 0;
  overflow:hidden;
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-badge{width:230px;height:auto;margin-bottom:1.25rem;filter:invert(1)}
.foot-brand p{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.7;max-width:40ch}
.foot-legal{margin-top:1.25rem;color:rgba(255,255,255,.45);font-size:.82rem}
.foot-credit{margin-top:.45rem;color:rgba(255,255,255,.45);font-size:.82rem}
.foot-credit a{
  color:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(255,255,255,.25);
  transition:color .25s,border-color .25s;
}
.foot-credit a:hover{color:var(--white);border-color:var(--white)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.foot-col h2{
  font-family:var(--body);
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:.35rem;
}
.foot-col a{
  position:relative;
  color:rgba(255,255,255,.72);
  font-size:.92rem;
  line-height:1.5;
  padding-bottom:2px;
  transition:color .25s;
}
.foot-col a::after{
  content:'';position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .4s var(--ease-out);
}
.foot-col a:hover{color:var(--white)}
.foot-col a:hover::after{transform:scaleX(1);transform-origin:left center}
.foot-phone{
  font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--white)!important;
  font-size:1.05rem!important;
}
.foot-social{display:inline-flex;align-items:center;gap:.5rem;margin-top:.35rem}

/* opening hours, mirrored from the booking section */
.foot-hours{width:100%;display:flex;flex-direction:column;gap:.1rem}
.foot-hours > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.foot-hours > div:last-child{border-bottom:0}
.foot-hours dt{
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.foot-hours dd{
  font-weight:600;
  font-size:.9rem;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--white);
}
.foot-hours dd.tbc{color:rgba(255,255,255,.5);font-weight:500;font-style:italic}
.foot-social-ico{width:20px;height:20px;display:inline-flex}
.foot-social-ico svg{width:100%;height:100%}

/* The oversized wordmark that lands the page. It is sized to span the full
   width at every viewport: "Manson's Tyres" in Barlow Condensed 800 italic
   at this tracking measures 6.1131x its own font-size, so dividing the
   container width by that ratio makes the line fill edge to edge without
   ever distorting the letterforms. */
.foot-word{
  font-family:'Barlow Condensed','Wordmark Fallback','Wordmark Fallback 2','Arial Narrow',sans-serif;
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  /* fallback: a touch narrower, since 100vw counts the scrollbar */
  font-size:calc(100vw / 6.25);
  line-height:.78;
  letter-spacing:.005em;
  text-align:center;
  color:var(--graphite);
  margin-top:clamp(1.5rem,3vw,2.5rem);
  margin-bottom:-.15em;
  white-space:nowrap;
  user-select:none;
}
/* container units measure the footer itself, so the scrollbar never counts */
@supports (font-size:1cqi){
  .footer{container-type:inline-size}
  .foot-word{font-size:calc(100cqi / 6.13)}
}

/* =====================================================
   BOOK A FITTING PAGE
   ===================================================== */
.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(380px,52vh,560px);
  display:flex;
  align-items:flex-end;
  color:var(--white);
  background:var(--ink);
}
.page-hero-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
}
.page-hero-shade{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(17,17,17,.68) 0%,rgba(17,17,17,.56) 45%,rgba(17,17,17,.82) 100%);
}
.page-hero-inner{
  width:100%;
  padding-top:8rem;
  padding-bottom:clamp(2.25rem,5vw,3.5rem);
}
.page-hero .display{
  font-size:clamp(3rem,8.5vw,6.5rem);
  color:var(--white);
  margin-top:1rem;
  text-shadow:0 4px 30px rgba(17,17,17,.45);
}
.page-hero-sub{
  margin-top:1.1rem;
  max-width:44ch;
  color:rgba(255,255,255,.85);
  font-size:var(--fs-body);
}

/* ---------- the multi-step form ---------- */
.booking-page{padding:var(--sp-section) 0;scroll-margin-top:5rem}
.ms-form{
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:clamp(1.5rem,3.5vw,3rem);
}

/* progress line */
.ms-steps{
  list-style:none;
  display:flex;
  margin:0 0 clamp(1.75rem,4vw,2.75rem);
  padding:0;
}
.ms-step{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.65rem;
  min-width:0;
}
/* the connecting line, drawn from each dot to the next */
.ms-step:not(:last-child)::before{
  content:'';
  position:absolute;
  top:14px;
  left:36px;
  right:8px;
  height:2px;
  background:var(--silver);
}
.ms-step.is-done:not(:last-child)::before{background:var(--ink)}
.ms-dot{
  width:28px;height:28px;
  border-radius:50%;
  display:grid;place-items:center;
  font-weight:600;
  font-size:.82rem;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--steel);
  background:var(--white);
  border:2px solid var(--silver);
  transition:background-color .3s,border-color .3s,color .3s;
}
.ms-step.is-done .ms-dot{background:var(--ink);border-color:var(--ink);color:var(--white)}
.ms-step.is-current .ms-dot{background:var(--red);border-color:var(--red);color:var(--white)}
.ms-step-name{
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--steel);
  transition:color .3s;
}
.ms-step.is-current .ms-step-name{color:var(--ink)}
.ms-step.is-done .ms-step-name{color:var(--steel)}

/* panels */
@keyframes swap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ms-panel{border:0;padding:0;margin:0;min-width:0}
.js .ms-panel{display:none}
.js .ms-panel.is-current{display:block;animation:swap .45s var(--ease-out)}
/* no JS: all panels stack into one long form, with room between them */
html:not(.js) .ms-panel + .ms-panel{margin-top:2.5rem}
.ms-legend{
  font-family:var(--cond);
  font-weight:700;
  font-size:var(--fs-h3);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
  padding:0;
}
.ms-legend:focus{outline:none}
.ms-hint{color:var(--steel);font-size:.95rem;line-height:1.6;margin:.5rem 0 1.4rem;max-width:56ch}
.ms-tel{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.ms-tel:hover{text-decoration:underline}

.ms-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.4rem);
}
.ms-field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.ms-wide{grid-column:1/-1;margin-top:clamp(.9rem,2vw,1.4rem)}
.ms-grid .ms-wide{margin-top:0}
.ms-field label{
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
}
.ms-opt{color:var(--steel);letter-spacing:.04em;text-transform:none;font-weight:500}
.ms-field input,.ms-field select,.ms-field textarea{
  color-scheme:light;
  font:inherit;
  /* never below 16px: smaller focused inputs make iOS zoom the page */
  font-size:1rem;
  width:100%;
  color:var(--ink);
  background:var(--wshop);
  border:1px solid var(--silver);
  border-radius:var(--radius-sm);
  padding:.85em 1em;
  min-width:0;
  max-width:100%;
  transition:border-color .25s,background-color .25s;
}
/* iOS gives date inputs an intrinsic width and ignores width:100% until
   the native appearance is reset, so the field spills out of the card */
.ms-field input[type="date"]{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  text-align:left;
  min-height:52px;
}
.ms-field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.ms-field input[type="date"]::-webkit-calendar-picker-indicator{margin-inline-start:auto}
.ms-field textarea{resize:vertical;min-height:96px}
.ms-field select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),
                   linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.6em;
}
.ms-field ::placeholder{color:var(--smoke)}
.ms-field input:hover,.ms-field select:hover,.ms-field textarea:hover{border-color:var(--steel)}
.ms-field input:focus,.ms-field select:focus,.ms-field textarea:focus{
  outline:none;
  border-color:var(--ink);
  background:var(--white);
}
.ms-field input:focus-visible,.ms-field select:focus-visible,.ms-field textarea:focus-visible{
  outline:3px solid var(--red);
  outline-offset:2px;
}

/* in-house validation, no browser bubbles */
.ms-field.is-invalid input,.ms-field.is-invalid select,.ms-field.is-invalid textarea{
  border-color:var(--red);
  background:#FCF4F5;
}
.ms-error{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:600;
  font-size:.85rem;
  color:var(--red);
  animation:swap .35s var(--ease-out);
}
.ms-error::before{
  content:'';
  flex:none;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--red);
}

/* service choices as tick chips */
.ms-choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;
}
.ms-choice{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1rem;
  border:1px solid var(--silver);
  border-radius:var(--radius-sm);
  background:var(--wshop);
  cursor:pointer;
  transition:border-color .25s,background-color .25s,transform .3s var(--ease-out);
}
.ms-choice:hover{border-color:var(--steel);transform:translateY(-2px)}
.ms-choice input{
  appearance:none;
  flex:none;
  width:20px;height:20px;
  margin:0;
  border:2px solid var(--silver);
  border-radius:6px;
  background:var(--white);
  display:grid;place-items:center;
  transition:background-color .2s,border-color .2s;
  cursor:pointer;
}
.ms-choice input::after{
  content:'';
  width:10px;height:6px;
  border:2px solid var(--white);
  border-top:0;border-right:0;
  rotate:-45deg;
  translate:0 -1px;
  opacity:0;
}
.ms-choice input:checked{background:var(--red);border-color:var(--red)}
.ms-choice input:checked::after{opacity:1}
.ms-choice input:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.ms-choice:has(input:checked){border-color:var(--red);background:var(--white)}
.ms-choice span{font-weight:600;font-size:.9rem;color:var(--ink)}

.ms-restored{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.15rem .5rem;
  margin-bottom:1.25rem;
  padding:.7rem .95rem;
  border-radius:var(--radius-sm);
  background:var(--wshop);
  border:1px solid var(--silver);
  color:var(--steel);
  font-size:.9rem;
}
.ms-fresh{
  font:inherit;
  font-weight:600;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  padding:0;
}
.ms-fresh:hover{color:var(--red)}

/* step 4 picks: one tap instead of a native wheel picker */
.ms-grid-stack{grid-template-columns:1fr}
.ms-picks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.6rem;
}
.ms-pick{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:.8rem .9rem;
  text-align:center;
  border:1px solid var(--silver);
  border-radius:var(--radius-sm);
  background:var(--wshop);
  cursor:pointer;
  transition:border-color .25s,background-color .25s,color .25s,transform .3s var(--ease-out);
}
.ms-pick span{font-weight:600;font-size:.92rem;color:var(--ink);transition:color .25s}
.ms-pick input{
  position:absolute;
  font-size:1rem; /* invisible, but never leave a focusable control under 16px */
  opacity:0;
  width:100%;height:100%;
  margin:0;
  cursor:pointer;
}
.ms-pick:hover{border-color:var(--steel);transform:translateY(-2px)}
.ms-pick:has(input:checked){background:var(--ink);border-color:var(--ink)}
.ms-pick:has(input:checked) span{color:var(--white)}
.ms-pick:has(input:focus-visible){outline:3px solid var(--red);outline-offset:2px}
@supports not selector(:has(*)){
  .ms-pick input{opacity:.001;appearance:auto;width:auto;height:auto;position:static;margin-right:.5rem}
  .ms-pick{justify-content:flex-start}
}
/* the native controls stay for no-JS; chips replace them when JS runs */
.js .ms-field.has-chips select,
.js .ms-field-day.has-chips input[type="date"]{display:none}
.js .ms-field-day.has-chips.show-date input[type="date"]{display:block;margin-top:.2rem;width:100%;min-width:0;max-width:100%}
.ms-note{
  margin-top:.2rem;
  color:var(--steel);
  font-size:.88rem;
  line-height:1.5;
}
.ms-note[hidden]{display:none}

.ms-hours{
  margin-top:1.25rem;
  color:var(--steel);
  font-weight:600;
  font-size:.9rem;
  font-variant-numeric:tabular-nums lining-nums;
}

/* review list */
.ms-review{display:flex;flex-direction:column;gap:.1rem;margin-top:.5rem}
.ms-review-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--mist);
}
.ms-review-row dt{
  flex:none;
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel);
}
.ms-review-row dd{color:var(--ink);text-align:right;overflow-wrap:anywhere}

/* back / next / send */
.ms-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:clamp(1.75rem,4vw,2.5rem);
}
.ms-back{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--silver);
  border-radius:999px;
  padding:.85em 1.6em;
  transition:border-color .25s,transform .35s var(--ease-out);
}
.ms-back:hover{border-color:var(--ink);transform:translateY(-2px)}
.ms-back-arrow{color:var(--red)}
.ms-sent{
  margin-bottom:1.25rem;
  padding:.9rem 1.1rem;
  border-radius:var(--radius-sm);
  background:var(--wshop);
  border:1px solid var(--silver);
  color:var(--ink);
  font-size:.92rem;
  line-height:1.6;
}
/* the booking went through: a Rally Red edge, the one accent on a working form */
.ms-sent.is-ok{border-left:3px solid var(--red)}
.ms-sent .ms-ref{font-weight:700;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
/* a field only bots fill in. Off-screen rather than display:none, which some bots skip */
.ms-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ms-count{
  font-weight:600;
  font-size:.85rem;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--steel);
}
.ms-next,.ms-send{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--red);
  border-radius:999px;
  padding:.9em 1.9em;
  box-shadow:0 10px 24px -12px rgba(205,34,57,.55);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.ms-next::before,.ms-send::before{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:var(--red-dark);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .5s var(--ease-out);
}
.ms-next:hover,.ms-send:hover{transform:translateY(-3px);box-shadow:0 20px 34px -14px rgba(205,34,57,.65)}
/* never leave a dead button looking live */
.ms-next:disabled,.ms-send:disabled{opacity:.55;pointer-events:none}
.ms-next:hover::before,.ms-send:hover::before{transform:scaleX(1);transform-origin:left center}
.ms-next:hover .pill-arrow{transform:translateX(4px)}
/* display on these would otherwise override the hidden attribute */
.ms-back[hidden],.ms-next[hidden],.ms-send[hidden]{display:none}
/* without JS the stepper buttons mean nothing; only Send shows */
html:not(.js) .ms-nav .ms-next,
html:not(.js) .ms-count{display:none}
html:not(.js) .ms-send{display:inline-flex!important}
html:not(.js) .ms-send[hidden]{display:inline-flex!important}

/* ---------- visit strip ---------- */
.visit-strip{padding:0 0 var(--sp-section)}
.visit-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.visit-card{
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.8rem;
}
.visit-card h2{
  font-family:var(--cond);
  font-weight:700;
  font-size:var(--fs-h3);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.visit-card address{font-style:normal;color:var(--steel);line-height:1.65}
.visit-p{color:var(--steel);font-size:.95rem}
.visit-tel{
  font-weight:700;
  font-size:1.35rem;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink);
}
.visit-tel:hover{color:var(--red)}
.foot-hours.dark-text > div{border-bottom-color:var(--mist)}
.foot-hours.dark-text dt{color:var(--steel)}
.foot-hours.dark-text dd{color:var(--ink)}
.foot-hours.dark-text dd.tbc{color:var(--steel)}
.visit-card .foot-hours{width:100%}

@media (max-width:900px){
  .ms-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visit-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ms-grid{grid-template-columns:1fr}
  .ms-choices{grid-template-columns:1fr}
  .ms-step-name{display:none}
  .ms-steps{margin-bottom:1.9rem}
  /* the dots above already say which step you are on, so the button row
     gives its space to the buttons instead of a squeezed counter */
  .ms-count{display:none}
  .ms-nav{gap:.6rem}
  .ms-back{padding:.85em 1.3em}
  .ms-next,.ms-send{flex:1;justify-content:center;padding:.9em 1.2em}
  .ms-step:not(:last-child)::before{left:34px;right:6px}
}
@media (prefers-reduced-motion:reduce){
  .js .ms-panel.is-current{animation:none}
  .ms-back,.ms-next,.ms-send,.ms-choice,.ms-dot{transition:none}
  .ms-next::before,.ms-send::before{transition:none}
}

/* =====================================================
   MOTION SYSTEM
   ===================================================== */

/* word-split headings · .split is added by the same script that wraps the
   words, so a JS failure can never leave a heading invisible */
.js [data-split].split .w,
.js [data-split-load].split .w{
  display:inline-block;
  opacity:0;
  transform:translateY(.42em);
  transition:opacity .72s var(--ease-out),transform .72s var(--ease-out);
  transition-delay:calc(var(--wi,0) * 52ms);
  will-change:transform,opacity;
}
.js [data-split].split.in .w,
.js [data-split-load].split.ready .w{opacity:1;transform:none}

.js [data-split-load].split .w{transition-delay:calc(120ms + var(--wi,0) * 58ms)}

/* image curtain · the clip NEVER goes on the observed element. A clipped box
   reports an intersection ratio of 0, so the observer that reveals it could
   never fire, and clip-path would cut off the element's own shadow. */
picture{display:contents}   /* a wrapper for choosing the file, not a box in the layout */
.js .reveal-img > img,.js .reveal-img > picture > img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.12);
  transition:clip-path 1.15s var(--ease-out),transform 1.5s var(--ease-out);
  will-change:clip-path,transform;
}
.js .reveal-img.in > img,.js .reveal-img.in > picture > img{clip-path:inset(0 0 0 0);transform:scale(1);will-change:auto}
.js .person-card.reveal-img figcaption{opacity:0;transition:opacity .55s var(--ease-out) .5s}
.js .person-card.reveal-img.in figcaption{opacity:1}

/* staggered fade-up */
.js .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  transition-delay:var(--d,0s);
  will-change:transform,opacity;
}
.js .reveal.in{opacity:1;transform:translateY(0);will-change:auto}

/* hero load cascade */
/* backwards, not forwards: a forwards fill keeps owning transform after the
   animation ends, which silently kills every :hover lift on these elements */
.cascade{animation:rise 1s var(--ease-out) backwards}
.c3{animation-delay:.5s}
.c4{animation-delay:.65s}
.c5{animation-delay:.95s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* nav entrance */
.js .nav-inner{opacity:0;transform:translateY(-14px);animation:navdrop .85s var(--ease-out) .1s forwards}
@keyframes navdrop{to{opacity:1;transform:none}}

/* blueprint line-draw */

/* =====================================================
   RESPONSIVE
   ===================================================== */
/* Six menu items need the room. Tighten the spacing, then drop the numbers,
   then hand over to the burger, so a label never wraps onto two lines and
   the badge is never squeezed to make space. */
.nav-badge{flex:none}
.nav-links a{white-space:nowrap}
@media (max-width:1180px){
  .nav-links{gap:1.6rem}
}
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
}

@media (max-width:1080px){
  .nav-links{gap:1.3rem}
  .nav-links sup{display:none}
  .show-body{gap:2rem}
  .show-media{grid-template-columns:1.4fr 1fr}
  .show-shot.big{aspect-ratio:4/3}
  .show-shot.small{aspect-ratio:3/3.4}
  .people-row{grid-template-columns:1fr 1fr}
  .quote-card{grid-column:1/-1}
  .duo-grid{grid-template-columns:1fr}
  .band-block{grid-template-columns:1fr}
  .bp-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-grid{grid-template-columns:1fr}
  .faq-shot{aspect-ratio:16/9}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

@media (max-width:760px){
  .nav-badge img{width:152px}
  .mobile-menu{padding-top:calc(4.75rem + env(safe-area-inset-top,0px))} /* the smaller badge */
  .nav.scrolled .nav-badge img{width:140px}
  .hero-inner{padding-top:7.5rem;padding-bottom:9rem}
  .hero-ring{left:auto;right:var(--gutter);top:auto;bottom:7.5rem;translate:0 0;width:108px;height:108px}
  .ring-btn{width:54px;height:54px}
  .trust-grid{grid-template-columns:1fr}
  .people-head{grid-template-columns:1fr;align-items:start}
  /* the portraits pair up side by side; the quote card spans above them.
     The image sits in normal flow here so it gives the card its height on
     every engine: Safari zero-heights the absolute-image + aspect-ratio
     combination inside a grid, which Chromium happily renders. */
  .people-row{grid-template-columns:1fr 1fr;gap:.7rem}
  .person-card{min-height:0;aspect-ratio:auto}
  .person-card img{position:static;width:100%;height:auto}
  .person-card figcaption{padding:1.1rem .8rem .75rem}
  .person-name{font-size:1.05rem}
  .person-role{font-size:.66rem;letter-spacing:.09em}
  .show-media{grid-template-columns:1fr;gap:.8rem}
  .show-shot.big,.show-shot.small{aspect-ratio:16/11}
  .band-stats{grid-template-columns:1fr}
  .bp-legend{grid-template-columns:1fr}
  .bp-caption{display:none}
    .foot-top{grid-template-columns:1fr;gap:2rem}
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cascade,.reveal,.js .reveal{opacity:1;transform:none;animation:none;transition:none}
  .js [data-split].split .w,.js [data-split-load].split .w{opacity:1;transform:none;transition:none}
  .js .reveal-img > img,.js .reveal-img > picture > img{clip-path:none;transform:none;transition:none}
  .js .person-card.reveal-img figcaption{opacity:1;transition:none}
  .js .nav-inner{opacity:1;transform:none;animation:none}
  .js .blueprint .hair,    .js .acc[open] .acc-body{animation:none}
  .js .mobile-menu,.js .mobile-menu nav a,.js .mobile-menu .mm-bar{animation:none}
  .mobile-menu nav a{transition:color .25s}
  /* the pill out-specifies the line above, so it is named directly */
  .mobile-menu nav a.mm-cta,
  .mobile-menu nav a.mm-cta .pill-arrow{transition:none}
  .pill::before,.circle-btn::before,.foot-col a::after,.nav-links a::after{transition:none}
  .show-shot img,.brand-tags a,.brand-tags a svg,.brand-tags a.brand-logo img{transition:none}
  .hero-slide{transition:opacity .4s ease;transform:none}
  .hero-slides{transform:none!important}
  .hero-ring svg{animation:none}
  .hero-progress .fill.run{animation:none;stroke-dashoffset:0}
}