/* =========================================================================
   AutoZone Swellendam — design system
   Display: Saira Condensed · Body & labels: Barlow
   ========================================================================= */

/* ---- Fonts (self-hosted, latin subset) ---------------------------------- */
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/SairaCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SairaCondensed-700.woff2) format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/SairaCondensed-800.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Barlow-600.woff2) format('woff2')}

/* ---- Tokens -------------------------------------------------------------
   One theme, always light. The site does not follow the visitor's OS setting.
   color-scheme:light also stops the browser auto-darkening form controls,
   scrollbars and dropdowns for visitors whose OS is in dark mode.
   ------------------------------------------------------------------------- */
:root{
  color-scheme:light;

  --red:#D91E35;            /* sampled from the AutoZone wordmark */
  --red-lit:#F32B44;
  --red-deep:#A9152A;
  --signal:#12855A;

  --ground:#FFFFFF;         /* the page itself is white */
  --panel:#FFFFFF;          /* cards and raised surfaces */
  --paper:#FCFCFD;          /* plain sections - white with a trace of tone */
  /* darkened from #F7F8FA: against --paper the old value was a ~2% step and
     stopped reading as a band at all */
  --panel-2:#F1F3F6;        /* banded sections */
  --panel-3:#E9EBEF;        /* image placeholders */
  --fg:#14171B;
  --fg-strong:#000000;
  --muted:#525A66;
  --faint:#7A828D;
  --line:rgba(13,15,18,.13);
  --line-soft:rgba(13,15,18,.07);
  --shadow:0 1px 2px rgba(13,15,18,.04), 0 14px 34px -26px rgba(13,15,18,.4);
  --on-red:#FFFFFF;

  /* charcoal surfaces — the stat strip and the footer. Accents inside a light
     page, not a second theme. Anything sitting on charcoal uses the --on-dark
     text ramp and --red-lit, since --red is too dark to read against it. */
  --charcoal:#16191E;
  --on-dark:#F2F4F6;
  --on-dark-muted:#A2AAB4;
  --on-dark-faint:#858E99;
  --on-dark-line:rgba(255,255,255,.14);
  /* brand red lifted until it clears 4.5:1 on charcoal (--red is 3.5:1 there
     and --red-lit only 4.4:1). Use this for small text on a dark surface;
     --red-lit is fine for large text, rules and outlines. */
  --red-on-dark:#FF3D54;

  --shell:min(1240px,100% - 2.6rem);
  --rail:1px;

  /* Buttons lean forward to echo the italic wordmark. Negative skewX shears the
     top edge to the right; dial the whole site's lean from this one value. */
  --tilt:-10deg;

  --step--1:clamp(.78rem,.76rem + .10vw,.84rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.09rem);
  --step-1:clamp(1.16rem,1.10rem + .30vw,1.34rem);
  --step-2:clamp(1.45rem,1.32rem + .62vw,1.86rem);
  --step-3:clamp(1.95rem,1.66rem + 1.42vw,2.95rem);
  --step-4:clamp(2.5rem,1.94rem + 2.75vw,4.4rem);
  --step-5:clamp(3.1rem,2.11rem + 4.85vw,6.6rem);
}

/* ---- Reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ground);
  color:var(--fg);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto keeps the HTML width/height attributes from acting as
   presentational hints and stretching an image on the unset axis */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{
  font-family:'Saira Condensed','Barlow Condensed',system-ui,sans-serif;
  font-weight:800;
  line-height:1;
  letter-spacing:-.005em;
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px}
/* --red is too dark to see against charcoal; --red-lit clears 3:1 on it */
.phead :focus-visible,.ftr :focus-visible,.stats :focus-visible{outline-color:var(--red-lit)}
::selection{background:var(--red);color:#fff}

.shell{width:var(--shell);margin-inline:auto}
.skip{
  position:absolute;left:.6rem;top:-100px;z-index:200;
  background:var(--red);color:var(--on-red);padding:.6rem 1rem;
  font:600 .9rem/1 'Barlow',sans-serif;letter-spacing:.02em;
  text-decoration:none;transition:top .16s;
}
.skip:focus{top:.6rem}

/* ---- Shared atoms ------------------------------------------------------- */

/* section eyebrow — a small red rule and a quiet label */
.bay{
  display:flex;align-items:center;gap:.7rem;
  font-family:'Barlow',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.1rem;
}
.bay__dot{width:1.6em;height:2px;background:var(--red);flex:none}
.bay--center{margin:0;justify-content:center}

/* The chequered flag from the wordmark, reused as a divider. Two rows only —
   deeper than that and it stops reading as the flag and becomes wallpaper. Used
   at the two structural transitions per page (out of the dark opening band, and
   into the footer) rather than sprinkled as decoration.
   repeating-conic-gradient paints a 2x2 check per tile, so a tile of 18px gives
   9px squares and a height of 18px gives exactly two rows. */
.checker{
  height:18px;
  background-image:repeating-conic-gradient(var(--charcoal) 0% 25%,#FFFFFF 0% 50%);
  background-size:18px 18px;
}
/* against the charcoal footer the white squares carry it, so soften the dark
   ones to avoid a hard black seam where the band meets the footer */
.checker--onto-dark{background-image:repeating-conic-gradient(#3A4048 0% 25%,#FFFFFF 0% 50%)}

.btn{
  --btn-bg:var(--red);--btn-fg:var(--on-red);--btn-line:var(--red);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.5rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:var(--rail) solid var(--btn-line);
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transform:skewX(var(--tilt));
  transition:background .18s ease,color .18s ease,border-color .18s ease,
             transform .18s ease,box-shadow .18s ease;
}
/* deepens rather than lightens on hover: white on --red-lit is only 3.65:1,
   where white on --red-deep is 7.1:1. The lift and shadow carry the feedback. */
.btn:hover{
  background:var(--red-deep);border-color:var(--red-deep);
  transform:skewX(var(--tilt)) translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(217,30,53,.65);
}
.btn:active{transform:skewX(var(--tilt));box-shadow:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-line:var(--line)}
.btn--ghost:hover{--btn-bg:transparent;background:transparent;border-color:var(--red);color:var(--red);box-shadow:none}
.btn--onphoto{--btn-bg:transparent;--btn-fg:#fff;--btn-line:rgba(255,255,255,.5)}
.btn--onphoto:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;box-shadow:none}
/* black fill, white label. Must sit after .btn:hover or the shared red-deep
   hover wins the source-order tie and the button flashes red. */
.btn--dark{--btn-bg:var(--charcoal);--btn-fg:#FFFFFF;--btn-line:var(--charcoal)}
/* Inverts to white-on-red-text rather than filling red: a red fill would make
   it look like the primary button, collapsing the hierarchy between "call now"
   and "check availability". Both options measure 5.01:1, so contrast was a wash
   and legibility of the hierarchy decided it. */
.btn--dark:hover{
  background:#FFFFFF;border-color:var(--red);color:var(--red);
  box-shadow:0 10px 22px -12px rgba(13,15,18,.45);
}
/* Counter-skewed so the icons stay geometrically true. Shearing letterforms is
   what the wordmark already does, but a sheared arrow just reads as distorted. */
.btn__ico{
  width:1.05em;height:1.05em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;
  transform:skewX(calc(var(--tilt) * -1));
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
/* The WhatsApp mark is a solid glyph rather than one of the stroked line
   icons, so it needs the fill/stroke pair the other way round. */
.btn__ico--fill{fill:currentColor;stroke:none}
/* nudge trailing arrows only — a phone icon sliding sideways looks wrong */
.btn:hover .btn__ico:last-child{transform:skewX(calc(var(--tilt) * -1)) translateX(3px)}


/* ---- Header ------------------------------------------------------------- */
/* #top / tabindex="-1" makes the header the back-to-top target and focus
   landing point. It is not tab-reachable, so suppress the outline — a ring
   around the whole sticky bar reads as a rendering fault. */
.hdr:focus{outline:none}
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 90%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:var(--rail) solid var(--line);
}
/* Logo sits in the centre column, so it is centred on the page regardless of
   how wide the link groups are. Home/About fill the left column from the edge,
   Products/Contact start just right of the logo, and the phone is pushed to the
   far right — which leaves matching gaps either side of the logo. */
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;min-height:80px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none;transition:opacity .18s ease}
.brand:hover{opacity:.7}
.brand img{height:42px;width:auto}
@media (max-width:560px){.brand img{height:34px}}

.nav{display:flex;align-items:center;gap:.25rem}
/* pull Home/About over to sit against the logo rather than the screen edge */
.nav--left{justify-content:flex-end}
.hdr__right{display:flex;align-items:center;gap:.25rem}
.hdr__call{margin-left:auto}
.nav a{
  position:relative;padding:.55rem .95rem;text-decoration:none;
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:1.02rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);transition:color .15s;
}
.nav a::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.28rem;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.nav a:hover{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--fg)}
.hdr .btn{padding:.7rem 1.15rem;font-size:.98rem}
/* Icon-only, so square off the padding — and hold the mark still on hover.
   The trailing-icon nudge is meant for arrows; a logo with no label beside
   it just looks like it slipped. Scoped under .hdr so it outweighs the
   .hdr .btn padding above rather than losing the specificity tie. */
.hdr .hdr__wa{padding:.7rem .8rem}
.hdr__wa:hover .btn__ico{transform:skewX(calc(var(--tilt) * -1))}
/* .25rem is enough between two skewed labels, but the icon button sits right
   against the phone button's leaning edge, so give it a little more. */
.hdr__wa{margin-left:.4rem}
/* Below ~1000px the two nav groups, the wordmark and the phone button already
   fill the bar; a fifth item tips it into horizontal overflow. Drop the icon
   there — WhatsApp is still in the hero, the CTA band and the footer, and
   under 900px the drawer carries it with a full label. */
@media (max-width:1000px){.hdr__wa{display:none}}
@media (max-width:900px){
  .hdr__in{grid-template-columns:1fr auto}
  .nav,.hdr__right{display:none}
}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;flex:none;
  background:none;border:var(--rail) solid var(--line);color:var(--fg);cursor:pointer;
  place-items:center;transition:border-color .18s ease,color .18s ease;
}
.burger:hover{border-color:var(--red);color:var(--red)}
.burger span{display:block;width:19px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;transition:transform .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:900px){.burger{display:grid}}

.drawer{
  position:fixed;inset:0;z-index:80;display:none;
  background:var(--ground);padding:1.4rem;
  flex-direction:column;
}
.drawer[data-open="true"]{display:flex}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.drawer__close{
  width:44px;height:44px;background:none;border:var(--rail) solid var(--line);
  color:var(--fg);font-size:1.4rem;line-height:1;cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.drawer__close:hover{border-color:var(--red);color:var(--red)}
.drawer nav{display:flex;flex-direction:column;margin-top:2rem;border-top:var(--rail) solid var(--line)}
.drawer nav a{
  padding:1.15rem .2rem;border-bottom:var(--rail) solid var(--line);text-decoration:none;
  font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.8rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--fg);
  transition:color .18s ease,padding-left .22s cubic-bezier(.2,.7,.3,1);
}
.drawer nav a:hover{color:var(--red);padding-left:.7rem}
.drawer nav a[aria-current="page"]{color:var(--red)}
.drawer .btn{margin-top:2rem;justify-content:center}
/* the 2rem above is the gap off the nav list; stacked buttons only need air */
.drawer .btn + .btn{margin-top:.7rem}

/* ---- Hero --------------------------------------------------------------- */
/* Two-column hero: copy left, photo right, on a charcoal band. The photo is a
   real grid item now rather than a full-bleed background, so no veil or
   text-shadow is needed to keep the type legible. */
.hero{background:var(--charcoal);color:var(--on-dark);overflow:hidden}
.hero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(3.5rem,7vw,5.5rem);
}
.hero h1{font-size:var(--step-4);color:#FFFFFF;max-width:18ch;letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:var(--red-lit);display:block}
.hero__lede{margin-top:1.4rem;max-width:52ch;font-size:var(--step-1);color:var(--on-dark-muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:1.8rem;margin-top:2.4rem;
  font-family:'Barlow',sans-serif;font-weight:400;font-size:.95rem;
  color:var(--on-dark-muted);
}
.hero__meta b{color:#FFFFFF;font-weight:600}
.hero__fig{position:relative;outline:2px solid var(--on-dark-line);outline-offset:12px}
/* owner.jpg is cropped to 3:2 in the file, so cover neither scales nor shifts
   it. aspect-ratio stays to hold the box open before the image loads. */
.hero__fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* Wrapper so the credit sits outside .hero__fig — the 12px outline offset
   frames the photograph alone, and the caption clears it. */
.hero__side{display:grid}
.hero__owner{
  margin-top:1.9rem;text-align:center;color:#FFFFFF;
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:1.2rem;letter-spacing:.06em;text-transform:uppercase;
  transform:skewX(var(--tilt));
}
.hero__owner span{
  display:block;margin-bottom:.3rem;
  font-size:.78rem;letter-spacing:.18em;color:var(--on-dark-faint);
}
@media (max-width:860px){
  .hero__in{grid-template-columns:1fr;gap:2.4rem}
  .hero__fig{outline-offset:8px}
  .hero__owner{margin-top:1.5rem}
}

/* ---- Sections ----------------------------------------------------------- */
.sec{padding-block:clamp(3rem,6.5vw,5.5rem)}
.sec--tight{padding-block:clamp(2.4rem,4.5vw,4rem)}
.sec--panel{background:var(--panel-2)}
/* charcoal band — white cards sit on top of it and lift off the page.
   Separate from .sec--panel so the grey band on About is unaffected. */
.sec--dark{background:var(--charcoal);color:var(--on-dark)}
.sec--dark .sec__head h2{color:#FFFFFF}
.sec--dark .sec__head p{color:var(--on-dark-muted)}
/* Plain sections take a near-white tone rather than pure white. Reads as white,
   but gives the large empty gaps above and below content something to be, and
   lets the pure-white cards and photos sit on top of it. */
.sec:not(.sec--dark):not(.sec--panel){background:var(--paper)}

.sec--dark .bay{color:var(--on-dark-muted)}
.sec--dark .bay__dot{background:var(--red-lit)}
/* The cards on this band are white, so they must NOT inherit the band's
   --on-dark text colour — that put light grey type on a white card. Reset the
   whole card to the light-page ramp rather than patching each child. */
.sec--dark .baycard{color:var(--fg)}
.sec__head{max-width:62ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.sec__head h2{font-size:var(--step-3)}
.sec__head p{margin-top:1.1rem;color:var(--muted);font-size:var(--step-1)}

/* ---- Stat strip --------------------------------------------------------- */
/* charcoal block — the one dark moment inside the light page */
.stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--charcoal);color:var(--on-dark);box-shadow:var(--shadow)}
.stat{padding:clamp(1.6rem,3.4vw,2.6rem);border-right:var(--rail) solid var(--on-dark-line);transition:background .28s ease}
.stat:hover{background:rgba(255,255,255,.045)}
.stat:last-child{border-right:0}
.stat__n{
  font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:clamp(2.4rem,5.6vw,4rem);line-height:.95;color:#FFFFFF;
  letter-spacing:-.02em;
}
.stat__l{margin-top:.7rem;color:var(--on-dark-muted);max-width:24ch}
.stat__k{
  display:block;margin-bottom:.8rem;color:var(--red-on-dark);
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:var(--rail) solid var(--on-dark-line)}
  .stat:last-child{border-bottom:0}
}

/* ---- Range cards (product range) ---------------------------------------- */
.bays{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.baycard{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--panel);border:var(--rail) solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.baycard:hover{border-color:var(--red);box-shadow:var(--shadow)}
.baycard__fig{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--panel-3)}
.baycard__fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.baycard:hover .baycard__fig img{transform:scale(1.04)}
/* hairline inset frame, tightening to red on hover */
.baycard__fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .25s ease;
}
.baycard:hover .baycard__fig::after{box-shadow:inset 0 0 0 2px var(--red)}
/* red rule sweeps across the foot of the photo */
.baycard__fig::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.baycard:hover .baycard__fig::before{transform:scaleX(1)}
.baycard__body{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.baycard__body h3{font-size:var(--step-2);text-transform:none;letter-spacing:0;line-height:1.15;color:var(--red)}
.baycard__body p{color:var(--muted);font-size:.97rem}
.baycard__go{
  margin-top:auto;padding-top:.9rem;color:var(--red);
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.95rem;
  display:flex;align-items:center;gap:.5rem;
}
.baycard:hover .baycard__go span{transform:translateX(4px)}
.baycard__go span{transition:transform .2s}

/* ---- Reviews ------------------------------------------------------------ */
/* All three reviews are short and similar in length now, so equal-height cards
   with the name row bottom-aligned reads tidier than letting each size itself. */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem}
.review{
  display:flex;flex-direction:column;gap:.95rem;padding:1.6rem;
  background:var(--panel);border:var(--rail) solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.review:hover{border-color:var(--red);box-shadow:var(--shadow)}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.review__stars{display:flex;gap:.12rem}
.review__star{width:17px;height:17px;flex:none;fill:#FBBC04}
.review__star[data-empty="true"]{fill:var(--panel-3)}
/* the G keeps the per-path brand colours from its own fill attributes, so no
   fill is set here — do not add one */
.review__google{width:18px;height:18px;flex:none}
.review__text{margin:0;color:var(--muted);flex:1;quotes:none}
.review__text::before,.review__text::after{content:none}
.review__who{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding-top:.95rem;border-top:var(--rail) solid var(--line-soft);
}
.review__name{
  font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.08rem;
  letter-spacing:.02em;text-transform:uppercase;
}
.reviews__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  margin-top:1.8rem;font-size:.95rem;color:var(--muted);
}
.reviews__foot a{color:var(--red);font-weight:600;text-decoration:none}
.reviews__foot a:hover{text-decoration:underline}

/* ---- Split rows (product detail / about) -------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--flip .split__fig{order:2}
/* copy beside a portrait: top-align the two so the photo anchors to the first
   line of text instead of floating against the middle of it. Must follow .split
   to win the align-items tie. */
.split--copy{align-items:start}
/* A concentric frame standing off the photo, closing in to hug it on hover.
   Drawn with outline rather than a pseudo-element: outlines are never clipped
   by overflow and never occluded by an ancestor's background, so this holds up
   wherever the figure is placed. */
.split__fig{
  position:relative;border:var(--rail) solid var(--line);background:var(--panel-3);
  outline:2px solid var(--line);outline-offset:12px;
  transition:border-color .3s ease,outline-color .3s ease,
             outline-offset .45s cubic-bezier(.2,.7,.3,1);
}
.split__fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.split__fig:hover{border-color:var(--red);outline-color:var(--red);outline-offset:0}
.split__fig figcaption{
  position:absolute;left:0;bottom:0;padding:.55rem 1rem;background:var(--panel);
  border-top:var(--rail) solid var(--line);border-right:var(--rail) solid var(--line);
  font-family:'Barlow',sans-serif;font-weight:500;font-size:.85rem;color:var(--muted);
}
.split__body h2,.split__body h3{font-size:var(--step-3);margin-bottom:1.2rem}
.split__body p{color:var(--muted);max-width:58ch}
.split__body p + p{margin-top:1.05rem}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split--flip .split__fig{order:0}
}

/* ---- Legal pages (privacy policy, terms) -------------------------------- */
.legal{max-width:70ch}
.legal p,.legal li{color:var(--muted)}
.legal p + p{margin-top:1.1rem}
.legal h2{font-size:var(--step-2);margin-top:2.6rem;margin-bottom:.9rem}
.legal h3{font-size:var(--step-1);text-transform:none;letter-spacing:0;margin-top:1.9rem;margin-bottom:.6rem}
.legal > :first-child{margin-top:0}
.legal ul,.legal ol{margin:1rem 0 0;padding-left:1.4rem;display:grid;gap:.55rem}
.legal a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.legal strong{color:var(--fg)}
.legal__stub{
  border:var(--rail) solid var(--red);
  background:color-mix(in srgb,var(--red) 7%,transparent);
  padding:1.4rem;
}
/* inline marker for a value that must be filled in before publishing */
.legal__todo{
  display:inline-block;padding:.05em .45em;
  border:var(--rail) solid var(--red);
  background:color-mix(in srgb,var(--red) 10%,transparent);
  color:var(--red);font-weight:600;
}

/* ---- Prose (about) ------------------------------------------------------ */
/* Type ladder here is eyebrow -> h2 -> standfirst -> body. The standfirst sits
   at --step-1, one step above the body, not --step-2: a 1.7x drop in a single
   step read as headline-then-fine-print. Weight and colour carry the rest of
   the distinction so the size difference doesn't have to. */
.prose{max-width:65ch}
/* One voice throughout: every paragraph takes what used to be the lead
   treatment on :first-of-type, so the story reads as a single block of copy
   rather than an intro followed by smaller, greyer body text. */
.prose p{color:var(--fg);font-size:var(--step-1);line-height:1.55;font-weight:500}
.prose p + p{margin-top:1.35rem}

/* The team shot is a square file with a circular crop — hold it at 1:1 so it
   stays a circle even if the file is ever swapped for a rectangular photo.
   Left uncapped in a half-width column the circle renders ~550px across, taller
   than the copy beside it and with dead space at the four corners a square crop
   would have filled. Capping it and centring it in the column evens out the two
   halves, and the caption centres under the curve instead of hanging off the
   invisible left edge of the bounding box. */
.portrait{position:relative;display:grid;justify-items:center;text-align:center}
/* Chequered flag rim. padding opens a 12px ring inside the circle, and the
   element background paints through it — the photo occupies only the content
   box, so the ring is the visible band between the two circles. A conic
   gradient is what lets the check follow the curve; 4deg per square gives 90
   squares, about 14px of arc each, so they read square against a 12px ring.
   The file's own transparent corners fall outside the border-radius clip, so
   they never show the pattern. */
.portrait img{
  width:100%;max-width:500px;aspect-ratio:1;object-fit:cover;border-radius:50%;
  padding:13px;
  background:repeating-conic-gradient(var(--charcoal) 0deg 3deg,#FFFFFF 3deg 6deg);
  box-shadow:0 0 0 1px var(--line), 0 20px 44px -30px rgba(13,15,18,.55);
  transition:box-shadow .32s ease,transform .45s cubic-bezier(.2,.7,.3,1);
}
.portrait:hover img{
  box-shadow:0 0 0 3px var(--red), 0 22px 46px -26px rgba(13,15,18,.55);
  transform:scale(1.015);
}
/* Display font, caps, leaning. Sheared with --tilt rather than font-style:italic
   because there is no italic Saira Condensed file — italic would fall back to the
   browser's synthetic oblique, which differs per engine. --tilt is the same angle
   the buttons use, so the lean matches them and the wordmark exactly. */
.portrait figcaption{
  margin-top:1.3rem;color:var(--muted);
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:1.15rem;letter-spacing:.09em;text-transform:uppercase;
  transform:skewX(var(--tilt));
}

/* ---- Quote band --------------------------------------------------------- */
.quotes{background:var(--panel-2);overflow:hidden}
.quotes__in{padding-block:clamp(3rem,6vw,5rem);display:grid;gap:1.8rem;justify-items:center;text-align:center}
.quotes blockquote{margin:0;max-width:34ch}
.quotes q{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:var(--step-2);line-height:1.2;
  quotes:none;display:block;text-wrap:balance;color:var(--fg);
}
.quotes q::before,.quotes q::after{content:none}
.quotes cite{
  display:block;margin-top:1.1rem;font-style:normal;color:var(--muted);
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.9rem;
}
.quotes__dots{display:flex;gap:.5rem}
.quotes__dots button{
  width:26px;height:4px;padding:0;border:0;cursor:pointer;background:var(--line);
  transition:background .2s;
}
.quotes__dots button[aria-pressed="true"]{background:var(--red)}
.qslide{display:none}
.qslide[data-active="true"]{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.qslide[data-active="true"]{animation:none}}

/* About carries the shopfront behind the quotes. The wash is what makes the
   type legible — the photo runs pale in the sky and busy across the signage,
   so neither end of it holds white text on its own. Layered in the background
   shorthand rather than a pseudo-element: no extra stacking context, and the
   charcoal underneath covers the image until it loads. */
.quotes--photo{
  background:
    linear-gradient(rgba(13,15,18,.84),rgba(13,15,18,.74)),
    url("img/storefront.jpg") 50% 62%/cover no-repeat,
    var(--charcoal);
  color:var(--on-dark);
}
.quotes--photo q{color:#FFFFFF}
.quotes--photo cite{color:var(--on-dark)}
.quotes--photo .bay{color:var(--on-dark)}
.quotes--photo .bay__dot{background:var(--red-lit)}
.quotes--photo .quotes__dots button{background:var(--on-dark-line)}
.quotes--photo .quotes__dots button[aria-pressed="true"]{background:var(--red-lit)}
.quotes--photo :focus-visible{outline-color:var(--red-lit)}

/* ---- Page header (inner pages) ------------------------------------------ */
/* charcoal page-heading block. On the home page the hero photo plays this role,
   so every page opens on a dark band before the white content starts. */
.phead{
  position:relative;padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,5vw,3.5rem);
  background:var(--charcoal);color:var(--on-dark);
}
.phead h1{font-size:var(--step-4);max-width:16ch;color:#FFFFFF}
.phead p{margin-top:1.3rem;max-width:58ch;color:var(--on-dark-muted);font-size:var(--step-1)}
.crumb{
  display:flex;gap:.55rem;align-items:center;margin-bottom:1.3rem;
  font-family:'Barlow',sans-serif;font-weight:500;font-size:.92rem;color:var(--on-dark-faint);
}
.crumb a{text-decoration:none;transition:color .18s ease}
.crumb a:hover{color:var(--red-on-dark)}
/* Contact opens on the shopfront rather than flat charcoal — the photograph
   does the "here is where we are" job the page is for, without a standalone
   block interrupting it. Same layered-background approach as .quotes--photo,
   and the header's on-dark type ramp already suits it; only the faintest tier
   steps up, because a photograph has pale patches flat charcoal does not. */
.phead--photo{
  background-color:var(--charcoal);
  background-image:
    linear-gradient(rgba(13,15,18,.86),rgba(13,15,18,.76)),
    var(--phead-photo);
  background-position:50% var(--phead-y,46%);
  background-size:cover;
  background-repeat:no-repeat;
}
.phead--shopfront{--phead-photo:url("img/storefront.jpg")}
.phead--photo p{color:var(--on-dark)}
.phead--photo .crumb{color:var(--on-dark-muted)}

/* ---- Contact ------------------------------------------------------------ */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,4.5vw,4rem);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

.infolist{display:grid;border:var(--rail) solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.info{position:relative;display:flex;gap:1.1rem;padding:1.4rem;border-bottom:var(--rail) solid var(--line);text-decoration:none;color:inherit;transition:background .18s ease}
.info:last-child{border-bottom:0}
a.info:hover{background:var(--panel-2)}
/* red marker wipes down the left edge of the row */
.info::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
a.info:hover::before,a.info:focus-visible::before{transform:scaleY(1)}
a.info:hover .info__ico{transform:scale(1.1)}
.info__ico{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.info__ico{width:22px;height:22px;flex:none;margin-top:.25rem;stroke:var(--red);fill:none;stroke-width:1.7}
.info__k{
  display:block;font-family:'Barlow',sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.info__v{font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.42rem;letter-spacing:.01em;margin-top:.2rem;line-height:1.15}
.info__note{color:var(--muted);font-size:.92rem;margin-top:.2rem}

.hours{width:100%;border-collapse:collapse;background:var(--panel);border:var(--rail) solid var(--line);margin-top:1.4rem;box-shadow:var(--shadow)}
.hours caption{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  text-align:left;padding:1.1rem 1.4rem;border-bottom:var(--rail) solid var(--line);
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.hours tbody tr{transition:background .2s ease}
.hours tbody tr:not([data-today="true"]):hover{background:var(--panel-2)}
.hours th,.hours td{padding:.85rem 1.4rem;text-align:left;font-weight:400;border-bottom:var(--line-soft) solid 1px}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours th{font-weight:500;color:var(--muted)}
.hours td{font-size:.95rem;text-align:right;color:var(--fg)}
.hours tr[data-today="true"]{background:color-mix(in srgb,var(--red) 7%,transparent)}
.hours tr[data-today="true"] th{color:var(--fg);font-weight:600}
.hours tr[data-today="true"] th::after{content:" · today";color:var(--red);font-size:.85rem;font-weight:500}

/* ---- Form --------------------------------------------------------------- */
.form{background:var(--panel);border:var(--rail) solid var(--line);padding:clamp(1.5rem,3.2vw,2.4rem);box-shadow:var(--shadow)}
.form h2{font-size:var(--step-2)}
.form__note{color:var(--muted);margin-top:.7rem;margin-bottom:2rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:600px){.grid2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.15rem}
.field > label,.legend{
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.92rem;
  letter-spacing:.01em;color:var(--fg);
}
.field .req{color:var(--red)}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem .95rem;background:var(--panel-2);
  border:var(--rail) solid var(--line);color:var(--fg);
  font-family:'Barlow',sans-serif;font-size:1rem;line-height:1.4;border-radius:0;
  transition:border-color .15s,background .15s;
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);background:var(--panel)}
.field input:invalid:not(:placeholder-shown){border-color:var(--red-deep)}
.err{display:none;color:var(--red);font-size:.88rem}
.field[data-invalid="true"] .err{display:block}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:var(--red)}

fieldset{border:0;padding:0;margin:0 0 1.15rem}
.legend{display:block}
.choices{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.6rem}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{
  display:block;padding:.7rem 1.1rem;background:var(--panel-2);
  border:var(--rail) solid var(--line);
  font-family:'Barlow',sans-serif;font-weight:500;font-size:.95rem;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.choice:hover span{border-color:var(--red);color:var(--red)}
.choice input:checked + span{color:var(--on-red)}
.choice input:checked + span{background:var(--red);border-color:var(--red);color:var(--on-red)}
.choice input:focus-visible + span{outline:2px solid var(--red);outline-offset:3px}
.form .btn{width:100%;justify-content:center;margin-top:.5rem}

.sent{
  border:var(--rail) solid var(--signal);background:color-mix(in srgb,var(--signal) 10%,transparent);
  padding:1.5rem;margin-bottom:1.5rem;display:none;
}
.sent[data-show="true"]{display:block}
/* the panel carries both outcomes; the handler picks one via data-state */
.sent[data-state="ok"] .sent__fallback,
.sent[data-state="fallback"] .sent__ok{display:none}
.sent h3{font-size:var(--step-2);color:var(--fg)}
.sent p{margin-top:.6rem;color:var(--muted)}
.sent a{color:var(--red)}

/* ---- Map ----------------------------------------------------------------
   OpenStreetMap's export embed, which needs no API key. The card overlays the
   map on desktop and drops below it under 760px.
   ------------------------------------------------------------------------- */
.map{position:relative;background:var(--panel-3)}
.map__frame{display:block;width:100%;height:clamp(360px,48vh,560px);border:0}
/* pointer-events:none on the overlay so the map stays draggable everywhere the
   card itself isn't sitting */
.map__over{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.map__card{
  pointer-events:auto;max-width:350px;padding:1.8rem;
  background:var(--charcoal);color:var(--on-dark);box-shadow:var(--shadow);
}
.map__card h2{font-size:var(--step-2);color:#FFFFFF}
.map__card p{margin-top:.45rem;color:var(--on-dark-muted)}
.map__card .bay{color:var(--on-dark-muted)}
.map__card .bay__dot{background:var(--red-on-dark)}
.map__card .btn{margin-top:1.4rem}
.map__card :focus-visible{outline-color:var(--red-lit)}
@media (max-width:760px){
  .map__over{position:static;display:block;pointer-events:auto;padding-block:1.8rem}
  .map__card{max-width:none}
}

/* ---- CTA band ----------------------------------------------------------- */
.cta{position:relative;background:var(--red);color:#fff;overflow:hidden}
.cta__in{padding-block:clamp(3.2rem,7vw,5.5rem);display:grid;gap:2rem;grid-template-columns:1fr auto;align-items:center}
.cta h2{font-size:var(--step-3);color:#fff;max-width:18ch}
.cta p{margin-top:.9rem;color:rgba(255,255,255,.88);max-width:48ch}
.cta .btn:not(.btn--onphoto){--btn-bg:#fff;--btn-fg:var(--red-deep);--btn-line:#fff}
.cta .btn:not(.btn--onphoto):hover{background:#0D0F12;border-color:#0D0F12;color:#fff}
.cta .btn--onphoto{--btn-line:rgba(255,255,255,.55)}
@media (max-width:800px){.cta__in{grid-template-columns:1fr}}

/* ---- Footer ------------------------------------------------------------- */
/* charcoal footer — anchors the bottom of every page */
.ftr{background:var(--charcoal);color:var(--on-dark);padding-top:clamp(3rem,6vw,4.5rem)}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h3{
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:1.1rem;
}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
/* the underline grows from the left on hover instead of just recolouring */
.ftr a{
  text-decoration:none;color:var(--on-dark-muted);
  background-image:linear-gradient(var(--red-lit),var(--red-lit));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:color .18s ease,background-size .28s cubic-bezier(.2,.7,.3,1);
}
.ftr a:hover{color:#FFFFFF;background-size:100% 1px}
.ftr__brand img{height:44px;width:auto;margin-bottom:1.2rem}
.ftr__brand p{color:var(--on-dark-muted);max-width:34ch}
.ftr__hours{display:grid;gap:.45rem;font-size:.95rem;color:var(--on-dark-muted)}
.ftr__hours b{color:#FFFFFF;font-weight:600}
.ftr__base{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.4rem;
  border-top:var(--rail) solid var(--on-dark-line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.88rem;color:var(--on-dark-faint);
}

/* ---- Back to top --------------------------------------------------------
   Red at rest, flipping to the chequered flag on hover. 48px face with 16px
   tiles gives 8px squares, six per side, so the grid lands on whole squares.
   The arrow is drawn twice: a wide halo path under a thin one. At rest the halo
   is transparent so it reads as a plain white arrow; on hover the halo turns
   white and the arrow red, which keeps it legible over both the black and the
   white squares. A single-colour arrow would vanish into one or the other.
   It is a real anchor to #main, so it works with no JS and inherits the page's
   smooth scrolling (already disabled under prefers-reduced-motion).
   ------------------------------------------------------------------------- */
/* The anchor is now just a frame: the ring sits on it and the coloured disc is
   .totop__face inside. Face and arrow are sized in % of the frame, so the mobile
   breakpoint only has to change one number. */
.totop{
  position:fixed;right:1.3rem;bottom:1.3rem;z-index:70;
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.56,.64,1),
             visibility 0s linear .28s;
}
/* appears once you are past the masthead */
.totop[data-show="true"]{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.56,.64,1),visibility 0s;
}
.totop[data-show="true"]:hover{transform:translateY(-3px)}
.totop[data-show="true"]:active{transform:translateY(0)}

/* lap counter. rotate(-90deg) starts the arc at twelve o'clock; the dash length
   is the circumference of r=27.5 in the 60-unit viewBox (2*pi*27.5 = 172.79),
   and JS drives stroke-dashoffset from that down to 0 as you scroll. */
.totop__ring{position:absolute;inset:0;width:100%;height:100%;fill:none;transform:rotate(-90deg)}
.totop__track{stroke:rgba(13,15,18,.16);stroke-width:3}
.totop__prog{
  stroke:var(--red);stroke-width:3;
  stroke-dasharray:172.79;stroke-dashoffset:172.79;
  transition:stroke-dashoffset .12s linear,stroke .35s ease;
}

.totop__face{
  width:77%;height:77%;border-radius:50%;
  display:grid;place-items:center;
  background-color:var(--red);
  background-size:11px 11px;background-position:center;
  box-shadow:0 8px 20px -10px rgba(13,15,18,.55);
  transition:background-color .35s ease;
}
.totop__face svg{width:46%;height:46%;fill:none}
.totop__halo path{stroke:transparent;stroke-width:4.5}
.totop__arrow path{stroke:#FFFFFF;stroke-width:2}

/* course completed: lap full, chequered flag drops as you cross into the footer.
   background-position:center keeps the pattern centred so the circular clip cuts
   the rim symmetrically rather than lopsidedly. */
.totop[data-finished="true"] .totop__face{
  background-color:#FFFFFF;
  background-image:repeating-conic-gradient(var(--charcoal) 0% 25%,#FFFFFF 0% 50%);
}
/* Snap the lap to full at the finish. On mobile the collapsing URL bar changes
   innerHeight, so scrollHeight - innerHeight can leave the computed progress a
   percent or two short of 1 and the ring visibly unfinished. !important because
   the running value is an inline style set by JS. */
.totop[data-finished="true"] .totop__prog{
  stroke:var(--charcoal);
  stroke-dashoffset:0 !important;
}
.totop[data-finished="true"] .totop__halo path{stroke:#FFFFFF}
.totop[data-finished="true"] .totop__arrow path{stroke:var(--red)}
@media (max-width:560px){.totop{right:.9rem;bottom:.9rem;width:54px;height:54px}}

/* ---- Reveal on scroll --------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
[data-reveal][data-shown="true"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}



/* ---- Footer social ------------------------------------------------------ */
/* Selectors are a.ftr__social rather than .ftr__social on purpose: .ftr a paints
   the growing underline and .ftr a:hover forces white, and both outrank a bare
   class here. `background:none` clears the whole underline shorthand, not just
   the image. The icon is fill:currentColor, so it reddens with the label and
   travels with it — one movement, not two. */
.ftr a.ftr__social{
  display:inline-flex;align-items:center;gap:.65rem;margin-top:1.35rem;
  text-decoration:none;color:var(--on-dark-muted);
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.95rem;
  background:none;
  transition:color .18s ease,transform .26s cubic-bezier(.34,1.56,.64,1);
}
.ftr a.ftr__social:hover{
  color:var(--red-on-dark);
  background:none;
  transform:translateY(-4px);
}
.ftr__social-ico{width:28px;height:28px;flex:none;fill:currentColor}

/* ---- Contact page: charcoal cards ---------------------------------------
   The info list, hours table and form are all charcoal, so everything inside
   them moves to the --on-dark ramp and --red-on-dark.
   ------------------------------------------------------------------------- */
.infolist,.hours,.form{background:var(--charcoal);color:var(--on-dark);border-color:var(--on-dark-line)}

.info{border-bottom-color:var(--on-dark-line)}
a.info:hover{background:rgba(255,255,255,.05)}
.info::before{background:var(--red-on-dark)}
.info__ico{fill:var(--red-on-dark);stroke:none}
.info__k{color:var(--on-dark-faint)}
.info__v{color:#FFFFFF}
.info__note{color:var(--on-dark-muted)}

.hours caption{border-bottom-color:var(--on-dark-line);color:var(--on-dark-faint)}
.hours th{color:var(--on-dark-muted)}
.hours td{color:var(--on-dark)}
.hours th,.hours td{border-bottom-color:rgba(255,255,255,.08)}
.hours tbody tr:not([data-today="true"]):hover{background:rgba(255,255,255,.05)}
.hours tr[data-today="true"]{background:color-mix(in srgb,var(--red) 24%,transparent)}
.hours tr[data-today="true"] th{color:#FFFFFF}
.hours tr[data-today="true"] th::after{color:var(--red-on-dark)}

.form h2{color:#FFFFFF}
.form .bay{color:var(--on-dark-muted)}
.form .bay__dot{background:var(--red-on-dark)}
.form__note{color:var(--on-dark-muted)}
.field > label,.legend{color:var(--on-dark)}
.field .req,.err{color:var(--red-on-dark)}
.field input,.field textarea,.field select{
  background:rgba(255,255,255,.06);border-color:var(--on-dark-line);color:var(--on-dark);
}
.field input:focus,.field textarea:focus,.field select:focus{
  background:rgba(255,255,255,.10);border-color:var(--red-on-dark);
}
.field input::placeholder,.field textarea::placeholder{color:var(--on-dark-faint)}
/* --red-deep is only ~2.2:1 on charcoal, invisible as an error border */
.field input:invalid:not(:placeholder-shown){border-color:var(--red-on-dark)}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:var(--red-on-dark)}
.choice span{background:rgba(255,255,255,.06);border-color:var(--on-dark-line)}
.choice:hover span{border-color:var(--red-on-dark);color:var(--red-on-dark)}
.choice input:checked + span{background:var(--red);border-color:var(--red);color:var(--on-red)}
.contact :focus-visible{outline-color:var(--red-lit)}

.sent{background:color-mix(in srgb,var(--signal) 18%,var(--charcoal));border-color:var(--signal);color:var(--on-dark)}
.sent h3{color:#FFFFFF}
.sent p{color:var(--on-dark-muted)}
.sent a{color:var(--red-on-dark)}

/* ---- Reduced motion -----------------------------------------------------
   Keep the colour changes so hover still reads as hover, drop the movement.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn,.btn__ico,.baycard,.baycard__fig img,.baycard__fig::before,.baycard__fig::after,
  .portrait img,.info,.info::before,.info__ico,.split__fig,.brand,.stat,.choice span{
    transition-property:background,background-color,border-color,color,box-shadow,outline-color,opacity;
    transition-duration:.18s;
  }
  .baycard:hover .baycard__fig img,.portrait:hover img,
  a.info:hover .info__ico,.ftr a.ftr__social:hover,
  .totop,.totop[data-show="true"]:hover{transform:none}
  /* the tilt is styling, not motion — keep it, just drop the hover lift */
  .btn:hover,.btn:active{transform:skewX(var(--tilt))}
  .btn:hover .btn__ico:last-child{transform:skewX(calc(var(--tilt) * -1))}
  .split__fig,.split__fig:hover{outline-offset:2px}
}