/* =========================================================================
   00. Typography — Inter loaded from Google Fonts (see head.njk preconnect)

   A metric-matched "Inter Fallback" face is declared first so that the
   first paint (system-font) reserves the same horizontal/vertical space
   as Inter. Without this, swapping system-ui → Inter causes the hero
   text to reflow and contributes the bulk of the mobile CLS budget.
   Adjustment values come from the Malte Ubl / Google Fonts
   size-adjust calculator for Inter at system-ui. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.40%;
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}


/* =========================================================================
   01. Design tokens
   ========================================================================= */
:root {
  /* Brand colours — based on the original design reference */
  --c-brand:        #3B62E2;
  --c-brand-dark:   #2A4ACB;
  --c-brand-deep:   #1E37A8;
  --c-brand-soft:   #5B82EA;
  --c-accent:       #f4c20d;
  --c-accent-dark:  #d9a800;
  --c-accent-soft:  #fff5cc;

  /* Surfaces */
  --c-surface:      #FFFFFF;
  --c-surface-alt:  #f5f7fb;
  --c-surface-blue: #1E37A8;
  --c-surface-blue-2: #2A4ACB;

  /* Text */
  --c-text:         #010101;
  --c-text-muted:   #3a3a3a;
  --c-text-soft:    #555555;
  --c-text-on-dark: #ffffff;
  --c-text-on-dark-muted: #c9d2e6;

  /* Borders & dividers */
  --c-border:       #e2e7f1;
  --c-border-strong:#c8d0e0;

  /* State */
  --c-success:      #1f7a4c;
  --c-danger:       #b3261e;

  /* Typography */
  --ff-sans: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-serif: Georgia, "Times New Roman", serif;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  3.75rem;   /* 60 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  /* Spacing scale (rem) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 6rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(11, 61, 145, 0.06), 0 1px 3px rgba(11, 61, 145, 0.04);
  --sh-md: 0 6px 18px rgba(11, 61, 145, 0.08), 0 2px 6px rgba(11, 61, 145, 0.05);
  --sh-lg: 0 18px 40px rgba(11, 61, 145, 0.12), 0 6px 14px rgba(11, 61, 145, 0.06);
  --sh-focus: 0 0 0 3px rgba(244, 194, 13, 0.55);

  /* Layout */
  --container: 1200px;
  --header-h: 84px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================================================
   02. Reset / base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* belt-and-braces against any stray horizontal scroll */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-brand); text-decoration: none; transition: color 120ms var(--ease); }
a:hover { color: var(--c-brand-dark); text-decoration: underline; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-text);
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-lg); letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-4); }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-8) 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Wrapper for the skip-to-main link. We need a real landmark here
   (so screen readers can recognise the skip link as inside a labelled
   region) but we don't want any visible chrome — the skip link is
   the only thing inside, and it is hidden until focused. The wrapper
   itself stays in the accessibility tree but has no visual layout. */
.visually-hidden-nav {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
  display: block;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  background: var(--c-brand);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* =========================================================================
   03. Layout helpers
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section { padding-block: var(--sp-10); }
.section--alt { background: var(--c-surface-alt); }
.section--blue {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(244,194,13,0.18), transparent 60%),
    linear-gradient(180deg, var(--c-brand-deep) 0%, var(--c-brand) 100%);
  color: var(--c-text-on-dark);
}
.section--blue h2, .section--blue h3 { color: #fff; }
.section--blue .lead { color: var(--c-text-on-dark-muted); }
.section--blue .section__head .lead { color: var(--c-text-on-dark-muted); }

.section__head { max-width: 720px; margin-bottom: var(--sp-8); }
.section__head .lead { color: var(--c-text-muted); }

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--c-text-muted);
  margin: 0;
}

.section__intro { margin: 0 0 var(--sp-8); }
.section--blue .section__intro { color: var(--c-text-on-dark-muted); }

/* =========================================================================
   04. Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease), transform 120ms var(--ease), box-shadow 120ms var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-dark); color: #fff; box-shadow: var(--sh-md); }
.btn--accent { background: var(--c-accent); color: var(--c-brand-deep); }
.btn--accent:hover { background: var(--c-accent-dark); color: var(--c-brand-deep); box-shadow: var(--sh-md); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn--outline { background: transparent; color: var(--c-brand); border-color: var(--c-brand); }
.btn--outline:hover { background: var(--c-brand); color: #fff; }
.btn--outline-white { background: transparent; color: #fff; border-color: #fff; }
.btn--outline-white:hover { background: #fff; color: var(--c-brand-deep); }

/* Phone CTA — clickable on every device.
   `tel:` links trigger the platform dialler on mobile, and the
   desktop handler (FaceTime, Skype, your default dialer) on desktop.
   The subtle ring pulse and the small "opens phone app" hint
   make the affordance obvious to first-time visitors. */
.btn--phone {
  background: var(--c-accent);
  color: var(--c-brand-deep);
  border-color: var(--c-accent);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 700;
  position: relative;
  box-shadow: var(--sh-md), 0 0 0 0 rgba(244, 194, 13, 0.55);
  animation: btn-phone-pulse 2.6s ease-out infinite;
}
.btn--phone:hover {
  background: var(--c-accent-dark);
  color: var(--c-brand-deep);
  border-color: var(--c-accent-dark);
  box-shadow: var(--sh-lg), 0 0 0 0 rgba(244, 194, 13, 0.55);
}
.btn--phone:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: var(--sh-lg);
  animation: none;
}
.btn--phone__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--c-brand);
  color: var(--c-accent);
  flex: none;
  transition: transform 160ms var(--ease);
}
.btn--phone:hover .btn--phone__icon { transform: rotate(-12deg) scale(1.05); }
.btn--phone__body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; gap: 2px; min-width: 0; }
.btn--phone__label { font-size: var(--fs-xs); font-weight: 600; opacity: 0.78; letter-spacing: 0.04em; text-transform: uppercase; }
.btn--phone__number { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.005em; white-space: nowrap; }
.btn--phone__hint { display: none; }
@media (prefers-reduced-motion: reduce) {
  .btn--phone { animation: none; }
}
@keyframes btn-phone-pulse {
  0%   { box-shadow: var(--sh-md), 0 0 0 0   rgba(244, 194, 13, 0.55); }
  60%  { box-shadow: var(--sh-md), 0 0 0 14px rgba(244, 194, 13, 0); }
  100% { box-shadow: var(--sh-md), 0 0 0 0   rgba(244, 194, 13, 0); }
}

/* =========================================================================
   05. Brand mark
   ========================================================================= */
.brand-mark {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-brand-deep);
  display: inline-grid;
  place-items: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  box-shadow: var(--sh-sm);
}
.brand-mark__inner { transform: translateY(2px); }
.brand-mark--dark { background: var(--c-accent); color: var(--c-brand-deep); }

.brand-wordmark { display: inline-flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-wordmark__name { font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--c-text); white-space: nowrap; }
.brand-wordmark__tag {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-wordmark--light .brand-wordmark__name { color: #fff; }
.brand-wordmark--light .brand-wordmark__tag { color: var(--c-text-on-dark-muted); }

/* =========================================================================
   06. Site header
   ========================================================================= */

/* Utility bar — sits above the site header.
   Slim strip showing address, phone and live open/closed status. */
.utility-bar {
  background: var(--c-brand-deep);
  color: var(--c-text-on-dark);
  font-size: var(--fs-base);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.utility-bar a {
  color: var(--c-text-on-dark);
  text-decoration: none;
  font-weight: 500;
}
.utility-bar a:hover { color: var(--c-accent); text-decoration: none; }
.utility-bar__inner {
  display: flex;
  justify-content: flex-end;
  padding-block: 10px;
}
.utility-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}
.utility-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: var(--fs-base);
}
.utility-bar__item svg { color: var(--c-accent); flex: none; }
.utility-bar__status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-text-soft);
  flex: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.utility-bar__status-dot[data-state="open"] {
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74,222,128,0.25);
  animation: pulse-dot 2s ease-in-out infinite;
}
.utility-bar__status-dot[data-state="closed"] { background: #ef4444; }
.utility-bar__status-text { font-weight: 700; }
.utility-bar__item--status[data-open="true"] .utility-bar__status-text { color: #ffffff; }
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.85; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: saturate(120%) blur(8px);
  box-shadow: 0 1px 0 rgba(11,61,145,0.04);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
}
.site-header__brand:hover { text-decoration: none; }

.site-header__cta {
  margin-left: auto;
  display: none; /* hidden on mobile, shown on desktop */
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sh-sm);
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms var(--ease);
}
.site-header__cta:hover {
  background: var(--c-brand-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
.site-header__cta-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-brand-deep);
  display: inline-grid;
  place-items: center;
}
.site-header__cta-text { display: inline-flex; flex-direction: column; line-height: 1.1; }
.site-header__cta-label { font-size: var(--fs-xs); font-weight: 500; opacity: 0.85; }
.site-header__cta-number { font-size: var(--fs-sm); font-weight: 700; }

/* Mobile nav toggle */
.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-brand);
  border: 0;
  color: #fff;
  padding: 0;
  border-radius: var(--r-md);
  margin-left: auto;
  font-weight: 600;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  overflow: hidden;
}
.nav-toggle:hover { background: var(--c-brand-dark); }
.nav-toggle__icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: none;
}
.nav-toggle__icon-open,
.nav-toggle__icon-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  display: block;
  margin: 0;
  padding: 0;
  transition: opacity 160ms var(--ease), transform 200ms var(--ease);
}
/* Closed (default): show hamburger, hide close */
.nav-toggle__icon-close { opacity: 0; transform: rotate(-90deg) scale(0.8); }
.nav-toggle__icon-open { opacity: 1; transform: rotate(0) scale(1); }
/* Open: show close, hide hamburger */
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-close {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-open {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}

/* Desktop nav hidden on mobile */
.desktop-nav { display: none; }

/* Mobile nav */
.mobile-nav {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__inner { padding: var(--sp-4) 0 var(--sp-6); }
.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__item { border-bottom: 1px solid var(--c-border); display: flex; flex-direction: column; }

/* When a mobile-nav item contains a Products-style sub-list, the whole
   item still spans the row but the chevron `::after` is suppressed on the
   disclosure button because the disclosure's own caret is the affordance. */
.mobile-nav__item > .mobile-nav__link,
.mobile-nav__item > .mobile-nav__toggle { width: 100%; }

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-text);
  min-height: 56px;
}
.mobile-nav__link:hover { color: var(--c-brand); text-decoration: none; }

/* The trailing chevron on plain nav links is just a visual hint; we
   suppress it on the Products disclosure because that row has its own
   caret that flips with state. */
.mobile-nav__item:not(.mobile-nav__item--has-children) > .mobile-nav__link::after {
  content: "›";
  color: var(--c-text-soft);
  font-size: 1.2em;
}

/* Disclosure button — styled as a regular mobile-nav row, with a chevron
   on the right that rotates 180 degrees when expanded. Visually it looks
   like a normal menu item that opens when tapped.

   Browsers apply slightly different UA defaults to <button> versus <a>
   (font-weight 400 in some engines, slightly different baseline). Reset
   every font-related property to the same values used by .mobile-nav__link
   so the disclosure row renders identically to the other rows apart from
   the rotating chevron. Layout (display / padding / min-height) is
   inherited from .mobile-nav__link via the shared class. */
.mobile-nav__toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  color: inherit;
}
.mobile-nav__toggle > span:first-child { flex: 1; }
.mobile-nav__toggle:hover { color: var(--c-brand); }
/* The disclosure button is a <button> element so it picks up the
   site's global :focus-visible ring automatically — no extra rule
   needed. That keeps the Products row visually identical to the other
   mobile-nav links apart from the rotating chevron. */
.mobile-nav__caret {
  flex: 0 0 18px;
  color: var(--c-text-soft);
  transition: transform 150ms ease-out;
  margin-left: var(--sp-3);
}
.mobile-nav__toggle.is-open .mobile-nav__caret { transform: rotate(180deg); }

/* Collapsible panel: holds the "View all products" entry link and the
   category list. Bounded max-height keeps the panel scrollable inside
   the drawer on very small screens, so Repairs / About / Contact are
   still reachable. */
.mobile-nav__sublist-wrap {
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 480px);
  overflow-y: auto;
}
.mobile-nav__sublist-wrap[hidden] { display: none; }
.mobile-nav__sublist { background: var(--c-surface-alt); padding: var(--sp-2) 0; }
.mobile-nav__sublist a {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  padding-left: var(--sp-7);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: 500;
  min-height: 48px;
}
.mobile-nav__sublist a:hover { color: var(--c-brand); text-decoration: none; background: rgba(11,61,145,0.04); }
.mobile-nav__item--contact .mobile-nav__contact {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-accent);
  color: var(--c-brand-deep);
  font-weight: 800;
  text-align: center;
  margin: var(--sp-4) var(--sp-5);
  border-radius: var(--r-pill);
  min-height: 48px;
  line-height: 1.4;
}

/* =========================================================================
   07. Mega menu (desktop)
   ========================================================================= */
/* The mega-menu is rendered inside its trigger <li>, but for positioning
   reliability across desktop widths we anchor it to the viewport and
   center horizontally. This guarantees it can never push content off
   the page regardless of trigger position. */
.desktop-nav__item.has-children { position: relative; }

.mega-menu {
  position: fixed;
  top: calc(var(--header-h) + var(--sp-2));
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow:
    0 24px 48px rgba(4,29,74,0.18),
    0 6px 18px rgba(11,61,145,0.08);
  display: none;
  z-index: 60;
  animation: mega-in 160ms var(--ease);
  overflow: hidden;
}
@keyframes mega-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.mega-menu__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding: var(--sp-6);
  min-width: 0;
  background:
    radial-gradient(420px 240px at 100% 0%, rgba(244,194,13,0.12), transparent 60%);
}
.mega-menu__group { display: flex; flex-direction: column; min-width: 0; }
.mega-menu__group-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.mega-menu__group-intro {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.mega-menu__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  min-width: 0;
}
.mega-menu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-text);
  transition: background 120ms var(--ease), color 120ms var(--ease);
  min-width: 0;
}
.mega-menu__item:hover {
  background: var(--c-surface-alt);
  color: var(--c-brand);
  text-decoration: none;
}
.mega-menu__item-icon {
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-brand-deep);
  display: inline-grid;
  place-items: center;
}
.mega-menu__item-icon svg { width: 20px; height: 20px; }
.mega-menu__item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.mega-menu__name {
  font-weight: 600;
  color: inherit;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--c-accent);
  color: var(--c-brand-deep);
  border-radius: var(--r-pill);
  padding: 2px 6px;
  line-height: 1;
  flex: none;
}
.mega-menu__hint {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  line-height: 1.45;
  min-width: 0;
}

/* =========================================================================
   08. Hero
   ========================================================================= */
.hero {
  position: relative;
  color: var(--c-text-on-dark);
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 90% 10%, rgba(244,194,13,0.22), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(29,89,182,0.55), transparent 60%),
    linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 55%, var(--c-brand-soft) 100%);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
  padding-block: var(--sp-10) var(--sp-11);
  position: relative;
  z-index: 1;
}
.hero__content { max-width: 640px; }
.hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 24px 60px rgba(4,29,74,0.35),
    0 8px 20px rgba(4,29,74,0.20);
  /* Reserve the hero image's intrinsic space (560x420 -> 4:3) before the
     image loads so it cannot cause a Cumulative Layout Shift. */
  aspect-ratio: 4 / 3;
}
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--sp-5);
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 4.6vw + 1rem, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}
.hero .lead {
  color: var(--c-text-on-dark-muted);
  font-size: var(--fs-lg);
  max-width: 60ch;
  margin-bottom: var(--sp-7);
}
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* Decorative dots/grid */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* =========================================================================
   09. Grids & cards
   ========================================================================= */
.grid {
  display: grid;
  gap: var(--sp-5);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-text);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--c-accent);
  text-decoration: none;
}
.cat-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16/10;
  background:
    radial-gradient(400px 200px at 80% 10%, rgba(244,194,13,0.25), transparent 60%),
    linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: var(--c-accent);
}
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cat-card__icon-wrap {
  display: inline-grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.12);
  color: var(--c-accent);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.cat-card__icon-wrap svg { width: 40px; height: 40px; }
.cat-card__age {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--c-accent);
  color: var(--c-brand-deep);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.cat-card__body { padding: var(--sp-5); }
.cat-card__body h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
}
.cat-card__body p { color: var(--c-text-muted); margin: 0; }

/* Compact cards */
.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.card__icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-brand-deep);
  margin-bottom: var(--sp-2);
}
.card__icon svg { width: 26px; height: 26px; }

/* Media card — large icon/illustration as a placeholder for an image */
.card--media {
  padding: 0;
  overflow: hidden;
  align-self: stretch;
}
.card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(400px 240px at 80% 10%, rgba(244,194,13,0.22), transparent 60%),
    linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: var(--c-accent);
  padding: var(--sp-7);
}
.card__media svg { width: 96px; height: 96px; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* When the media slot contains a real photo, hide the placeholder
   gradient, drop the padding, and let the image define the slot height.
   Skip galleries (data-gallery) where the card is positioned for an
   absolute-positioned image slider that needs its own aspect-ratio. */
.card--media:not([data-gallery]):has(.card__media img) .card__media {
  padding: 0;
  background: none;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
.card__media-caption {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.card__media-caption strong { color: var(--c-text); }

/* Story grid — text + media card on the right */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.story-grid__text h2 { margin-bottom: var(--sp-4); }
.story-grid__text p { line-height: var(--lh-loose); color: var(--c-text-muted); }
.story-grid__media { min-width: 0; }

/* Invitation — centred "come and say hello" closing section */
.invitation {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.invitation h2 { margin-bottom: var(--sp-4); }
.invitation .lead { margin-inline: auto; }
.invitation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

@media (min-width: 1024px) {
  .story-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-10);
  }
}

/* Legal page with right-hand aside (other legal pages panel) */
.legal-page--with-aside .legal-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.legal-page--with-aside .legal-page__body { min-width: 0; }
.legal-page__aside { min-width: 0; }

@media (min-width: 1024px) {
  .legal-page--with-aside .legal-page__layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--sp-10);
  }
  .legal-page__aside {
    position: sticky;
    top: calc(var(--header-h, 84px) + var(--sp-5));
  }
}

/* Other legal pages panel */
.legal-aside {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-sm);
}
.legal-aside__title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.legal-aside__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal-aside__link {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  min-height: 44px;
  border-radius: var(--r-md);
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.3;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.legal-aside__link:hover {
  background: var(--c-surface-alt);
  color: var(--c-brand);
  text-decoration: none;
}
.legal-aside__icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-brand-deep);
  display: inline-grid;
  place-items: center;
  flex: none;
}
.legal-aside__icon svg { width: 18px; height: 18px; }
.legal-aside__label { min-width: 0; }
.legal-aside__arrow {
  color: var(--c-text-soft);
  font-weight: 500;
  transition: transform 160ms var(--ease), color 120ms var(--ease);
}
.legal-aside__link:hover .legal-aside__arrow {
  color: var(--c-brand);
  transform: translateX(2px);
}

/* Current page marker in the aside */
.legal-aside__link--current {
  position: relative;
  background: var(--c-accent-soft);
  color: var(--c-brand-deep);
  cursor: default;
  padding-left: var(--sp-4);
}
.legal-aside__link--current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: var(--c-accent);
  border-radius: 0 3px 3px 0;
}
.legal-aside__link--current:hover {
  background: var(--c-accent-soft);
  color: var(--c-brand-deep);
}
.legal-aside__link--current .legal-aside__icon {
  background: #fff;
  color: var(--c-brand);
}
.card__cta {
  margin-top: auto;
  font-weight: 600;
  color: var(--c-brand);
}
.card__cta:hover { color: var(--c-brand-dark); text-decoration: none; }
.card--light {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: var(--c-text-on-dark);
}
.card--light h3 { color: #fff; }
.card--light p { color: var(--c-text-on-dark-muted); margin: 0; }
.card--light .card__cta { color: var(--c-accent); }
.card--light .card__cta:hover { color: #fff; }

/* Service card */
.service-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.service-card__icon {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--c-brand);
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}
.service-card__icon svg { width: 24px; height: 24px; }

/* =========================================================================
   10. Visit-store panel
   ========================================================================= */
.visit-panel {
  display: grid;
  gap: var(--sp-7);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.visit-panel__body { padding: var(--sp-7); }
.visit-panel__map {
  background: var(--c-surface-alt);
  min-height: 260px;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--c-text-muted);
  padding: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.visit-panel__map-embed {
  width: 100%; height: 100%; min-height: 260px; border: 0; display: block;
}
.visit-panel address { font-style: normal; line-height: 1.7; margin-bottom: var(--sp-5); color: var(--c-text); }
.visit-panel__hours {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--c-border);
}
.visit-panel__hours li { display: flex; justify-content: space-between; padding: var(--sp-1) 0; color: var(--c-text); }

/* =========================================================================
   11. FAQs
   ========================================================================= */
.faq-section { margin-top: var(--sp-7); }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq-item__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  min-height: 56px;
  background: transparent;
  border: 0;
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-text);
}
.faq-item__q:hover { background: var(--c-surface-alt); }
.faq-item__q[aria-expanded="true"] { color: var(--c-brand); }
.faq-item__icon {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-brand-deep);
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  transition: transform 160ms var(--ease);
}
.faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__a { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-text-muted); }
.faq-item__a[hidden] { display: none; }

/* =========================================================================
   12. Breadcrumbs
   ========================================================================= */
.breadcrumbs {
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  color: var(--c-text-muted);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs a,
.breadcrumbs span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }
.breadcrumbs li + li::before { content: "›"; color: var(--c-text-soft); }
.breadcrumbs [aria-current="page"] { color: var(--c-text); font-weight: 600; }

/* Breadcrumbs on a dark background (inside page hero) */
.breadcrumbs--on-dark {
  background: transparent;
  border: 0;
  padding-top: var(--sp-5);
  color: var(--c-text-on-dark-muted);
}
.breadcrumbs--on-dark ol { padding-block: 0; }
.breadcrumbs--on-dark a { color: rgba(255,255,255,0.78); }
.breadcrumbs--on-dark a:hover { color: var(--c-accent); text-decoration: none; }
.breadcrumbs--on-dark li + li::before { color: rgba(255,255,255,0.45); }
.breadcrumbs--on-dark [aria-current="page"] { color: #fff; font-weight: 600; }

/* =========================================================================
   13. Site footer
   ========================================================================= */
.site-footer {
  background: var(--c-surface-blue);
  color: var(--c-text-on-dark);
  margin-top: var(--sp-10);
}
.site-footer a { color: var(--c-text-on-dark-muted); }
.site-footer a:hover { color: var(--c-accent); text-decoration: none; }
.site-footer__inner {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-10);
  grid-template-columns: 1fr;
}
.site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.site-footer__about { color: var(--c-text-on-dark-muted); margin-bottom: var(--sp-5); }
.site-footer__social { margin-top: 0; }
.site-footer__social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.site-footer__social-list li { margin: 0; padding: 0; }
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.site-footer .site-footer__social-link:hover,
.site-footer .site-footer__social-link:focus-visible {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-brand-deep);
}
.site-footer__social-icon { width: 20px; height: 20px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .site-footer__social-link { transition: none; }
}
.site-footer__address { font-style: normal; color: var(--c-text-on-dark-muted); line-height: 1.7; }
.site-footer__address--standalone strong { color: #fff; }
.site-footer__heading {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.site-footer__links { display: flex; flex-direction: column; gap: 0; }
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--sp-1);
}
.site-footer__address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer__hours-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.site-footer__hours-list li {
  display: flex;
  justify-content: space-between;
  color: var(--c-text-on-dark-muted);
  padding: var(--sp-1) 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.site-footer__hours-note { color: var(--c-text-on-dark-muted); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.site-footer__base {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer__base-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  color: var(--c-text-on-dark-muted);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.site-footer__base-inner p { margin: 0; }
.site-footer__base-tagline { opacity: 0.85; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Silktide persistent cookie/settings icon.
   The vendor already sets outline: none plus a 2px / 4px box-shadow ring
   on #stcm-icon:focus, but the 2px inner ring is var(--backgroundColor)
   (white in our config), which is invisible on a white page. The
   project-level rule below keeps the vendor's visual treatment and adds
   a brand-colour outline on :focus-visible so the focus indicator is
   always visible against any section background. The wrapper sits in
   front of everything (z-index: 99999) so a coloured outline is what
   stands out, not a coloured box-shadow. */
#stcm-icon:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 3px;
}

/* =========================================================================
   14. Utilities
   ========================================================================= */
.center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

/* Age notice pill */
.age-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-accent);
  color: var(--c-brand-deep);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

/* =========================================================================
   15. Responsive — mobile-first
   ========================================================================= */
@media (max-width: 479px) {
  /* Compress the brand on the smallest phones so the menu toggle fits */
  .brand-wordmark__tag { display: none; }
  .site-header__inner { gap: var(--sp-3); }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.1; }
  .hero__inner { padding-block: var(--sp-9) var(--sp-10); }
  .hero .lead { font-size: var(--fs-base); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero__media { transform: rotate(-1deg); max-width: 92%; margin-inline: auto; }
  .section { padding-block: var(--sp-9); }
  .section--blue { padding-block: var(--sp-9); }
  .section__head { margin-bottom: var(--sp-6); }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
}

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .container { padding-inline: var(--sp-6); }
}

@media (min-width: 1024px) {
  /* Switch from mobile nav to desktop nav */
  .nav-toggle { display: none; }
  .desktop-nav { display: block; }
  /* .site-header__cta hidden everywhere — phone is in the utility bar above */

  /* Site header layout for desktop */
  .site-header__inner { gap: var(--sp-6); }

  /* Hero: 2-column layout with the shopfront image on the right */
  .hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--sp-9);
    padding-block: var(--sp-11) var(--sp-12);
  }
  .hero__media {
    transform: rotate(1.5deg);
  }

  /* Desktop nav */
  .desktop-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
  .desktop-nav__item { position: relative; }
  .desktop-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-text);
    font-weight: 700;
    font-size: var(--fs-md);
    border-radius: var(--r-md);
    text-decoration: none;
    letter-spacing: 0.005em;
    transition: color 120ms var(--ease), background 120ms var(--ease);
    min-height: 48px;
  }
  .desktop-nav__link::after {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: 6px;
    height: 3px;
    background: var(--c-accent);
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 160ms var(--ease);
  }
  .desktop-nav__link:hover { color: var(--c-brand); text-decoration: none; }
  .desktop-nav__link:hover::after,
  .desktop-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
  /* Mega menu opens only via click (data-open toggled in main.js). */
  .desktop-nav__item .mega-menu[data-open="true"] {
    display: block;
  }
  .caret { font-size: 0.7em; color: var(--c-text-soft); }

  /* Mega menu */
  .mega-menu__inner { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }

  /* Grids */
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .section { padding-block: var(--sp-11); }

  /* Footer */
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
    gap: var(--sp-7);
  }

  /* Visit panel */
  .visit-panel { grid-template-columns: 1.1fr 1fr; }
  .visit-panel__map { border-top: 0; border-left: 1px solid var(--c-border); min-height: 360px; }
}

@media (min-width: 1200px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================================================================
   16. Page layouts (non-product pages)
   ========================================================================= */

/* Generic page (about, contact, repairs, etc.) */
.page,
.legal-page {
  padding-block: var(--sp-9);
}
.page__header,
.legal-page .page__header {
  max-width: 760px;
  margin-bottom: var(--sp-8);
}
.page__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-accent-dark);
  background: var(--c-accent-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.page__title {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  color: var(--c-text);
}
.page__lead {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  margin: 0;
  max-width: 60ch;
}
.page__body {
  max-width: 760px;
}
.page__body h2 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xl);
}
.page__body h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-md);
}
.page__body ul,
.page__body ol {
  margin: var(--sp-3) 0 var(--sp-5);
  padding-left: var(--sp-6);
}
.page__body ul { list-style: disc; }
.page__body ol { list-style: decimal; }
.page__body li { margin-bottom: var(--sp-2); line-height: var(--lh-base); }
.page__body p { line-height: var(--lh-loose); }
.page__body a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.page__body a:hover { color: var(--c-brand-dark); }

@media (min-width: 1024px) {
  .page,
  .legal-page { padding-block: var(--sp-10); }
}

/* Legal page — narrower column, dated */
.legal-page__body { max-width: 720px; }
.legal-page__body h2 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
}
.legal-page__body h2:not(:first-child) {
  margin-top: var(--sp-9);
}
.legal-page__body h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.legal-page__body p,
.legal-page__body ul,
.legal-page__body ol {
  line-height: var(--lh-loose);
}
.legal-page__body p { margin: 0 0 var(--sp-4); }
.legal-page__body ul,
.legal-page__body ol {
  margin: var(--sp-3) 0 var(--sp-5);
  padding-left: var(--sp-6);
}
.legal-page__body ul { list-style: disc; }
.legal-page__body ol { list-style: decimal; }
.legal-page__body li { margin-bottom: var(--sp-2); }
.legal-page__body a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.legal-page__body a:hover { color: var(--c-brand-dark); }
@media (max-width: 600px) {
  .legal-page__body h2,
  .legal-page__body h2:not(:first-child) { margin-top: var(--sp-7); }
  .legal-page__body h3 { margin-top: var(--sp-5); }
}
.legal-page__updated {
  margin-top: var(--sp-3);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.legal-page__note {
  background: var(--c-surface-alt);
  border-left: 4px solid var(--c-accent);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--c-text);
  margin: var(--sp-5) 0;
}
.legal-page__note strong { color: var(--c-brand); }

/* Information pages hub (/pages/) — vertical list of link cards */
.page-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 var(--sp-4);
  display: grid;
  gap: var(--sp-4);
  max-width: 760px;
}
.page-list__item { margin: 0; padding: 0; }
.page-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.page-list__link:hover,
.page-list__link:focus-visible {
  border-color: var(--c-brand);
  box-shadow: 0 4px 14px rgba(11, 61, 145, 0.08);
  transform: translateY(-1px);
}
.page-list__title {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-brand);
  margin-bottom: var(--sp-2);
}
.page-list__desc {
  display: block;
  grid-column: 1;
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.page-list__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-brand-deep);
  font-weight: 700;
  font-size: 1.1rem;
}
.page-list__link:hover .page-list__arrow,
.page-list__link:focus-visible .page-list__arrow { background: var(--c-accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .page-list__link,
  .page-list__link:hover,
  .page-list__link:focus-visible { transform: none; transition: none; }
}

/* Page hero (used at the top of content pages) */
.page-hero {
  position: relative;
  background:
    radial-gradient(700px 320px at 90% 0%, rgba(244,194,13,0.18), transparent 60%),
    linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 100%);
  color: var(--c-text-on-dark);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-5) var(--sp-7);
  max-width: 760px;
}
.page-hero__inner--center { margin-inline: auto; text-align: center; }
.page-hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand-deep);
  background: var(--c-accent);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.page-hero__title {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-3);
  color: #fff;
}
.page-hero__lead {
  font-size: var(--fs-md);
  color: var(--c-text-on-dark-muted);
  margin: 0;
  max-width: 60ch;
  line-height: 1.55;
}
.page-hero__actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Contact details block */
.contact-details { background: var(--c-surface-alt); padding-block: var(--sp-10); }
.contact-details__grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}
.contact-details__heading {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
  color: var(--c-text);
}
.contact-details__heading--sm {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-brand);
}
.contact-details__list { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.contact-details__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-4);
  align-items: flex-start;
}
.contact-details__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-brand-deep);
  display: inline-grid;
  place-items: center;
}
.contact-details__label {
  margin: 0 0 2px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--c-brand);
}
.contact-details__value {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-text);
}
.contact-details__value a { color: var(--c-brand); }
.contact-details__hint {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.contact-details__map {
  margin-top: var(--sp-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  min-height: 260px;
}
.contact-details__map iframe {
  width: 100%; height: 100%; min-height: 260px; border: 0; display: block;
}
.contact-details__hours {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
  align-self: start;
}
.contact-details__hours-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.contact-details__hours-list li {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--c-border);
}
.contact-details__hours-list li:last-child { border-bottom: 0; }
.contact-details__hours-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

@media (min-width: 1024px) {
  .contact-details__grid { grid-template-columns: 1.6fr 1fr; gap: var(--sp-10); }
  .contact-details__map { min-height: 320px; }
  .contact-details__map iframe { min-height: 320px; }
}

/* Contact form */
.contact-form { padding-block: var(--sp-9); background: var(--c-surface); }
.contact-form__inner { max-width: 720px; }
.contact-form__notice {
  background: var(--c-surface-alt);
  border-left: 4px solid var(--c-accent);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: var(--sp-6);
  color: var(--c-text);
  font-size: var(--fs-sm);
}
.form-grid { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.form-field .required { color: var(--c-danger); margin-left: 2px; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font: inherit;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  min-height: 44px;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--sh-focus);
}
.form-field .help {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.form-help {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin: 4px 0 0;
}
.form-error {
  font-size: var(--fs-xs);
  color: var(--c-danger);
  margin: 4px 0 0;
  display: none;
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}
.form-field [aria-invalid="true"] ~ .form-error { display: block; }
.form-actions {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.form-actions .btn { min-height: 48px; }

/* Contact grid — details on the left, form on the right (desktop) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-9);
  align-items: start;
}
.contact-grid__details h2 { margin-bottom: var(--sp-4); }
.contact-grid__details h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.contact-grid__address {
  font-style: normal;
  line-height: 1.75;
  color: var(--c-text);
  margin-bottom: var(--sp-6);
}
.contact-grid__address a { color: var(--c-brand); }
.contact-grid__address strong { color: var(--c-text); }
.contact-grid__muted {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}
.contact-grid__form h2 { margin-bottom: var(--sp-3); }
.contact-grid__form > .lead { margin-bottom: var(--sp-5); color: var(--c-text-muted); font-size: var(--fs-base); }
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--sp-10);
  }
}

/* Opening hours table */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: var(--sp-2) 0 var(--sp-2);
}
.hours-table th,
.hours-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.hours-table th {
  font-weight: 600;
  color: var(--c-text);
  width: 50%;
}
.hours-table td {
  color: var(--c-text-muted);
}
.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }

/* Full-width map card */
.map-card {
  margin-top: var(--sp-5);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
}
.map-card__embed {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
@media (min-width: 1024px) {
  .map-card__embed { height: 480px; }
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
/* Append: category page CSS */

@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   18. Category page revisions
   Replaces/overrides some rules from section 17 based on user feedback:
   - .cat-hero: unchanged (no buttons now live here, see category-hero.njk)
   - .cat-gallery: REMOVED — replaced by .cat-showcase below
   - .cat-range: now 2-column (text + media card), CTAs at the bottom
   - .cat-local: simpler full-width layout, no hint box
   - .cat-showcase: single-image (with optional auto-rotation when 2+)
   ========================================================================= */

/* --- Category hero (unchanged - already styled in section 17) ----------- */

/* --- Category showcase (replaces old cat-gallery) -------------------- */
.cat-showcase__layout {
  display: grid;
  gap: var(--sp-9);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .cat-showcase__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sp-9);
  }
}
.cat-showcase__intro h2 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-4);
}
.cat-showcase__intro .lead {
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  margin: 0 0 var(--sp-5);
}
.cat-showcase__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand);
  background: var(--c-accent-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.cat-showcase__extra { color: var(--c-text-muted); margin-bottom: var(--sp-5); }
.cat-showcase__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.cat-showcase__viewport {
  position: relative;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  box-shadow: var(--sh-lg);
}
.cat-showcase__track { position: relative; }
.cat-showcase__item {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  aspect-ratio: 4 / 3;
}
.cat-showcase__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-showcase__item--placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(400px 240px at 80% 10%, rgba(244,194,13,0.22), transparent 60%),
    linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: var(--c-accent);
}
.cat-showcase__placeholder-icon {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
}
.cat-showcase__caption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
.cat-showcase__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.cat-showcase__dot {
  width: 10px; height: 10px;
  padding: 17px;
  box-sizing: content-box;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  cursor: pointer;
  transition: background 120ms var(--ease), transform 120ms var(--ease);
}
.cat-showcase__dot[aria-current="true"] {
  background: var(--c-accent);
  transform: scale(1.2);
}
.cat-showcase__dot:focus-visible { box-shadow: var(--sh-focus); }

/* --- Category range (2-column with media card + CTAs) ------------------ */
.cat-range .lead { color: var(--c-text-muted); margin-bottom: var(--sp-6); max-width: 60ch; }
.cat-range__layout {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .cat-range__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-10);
  }
}
.cat-range__text h2 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-4);
}
.cat-range__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand);
  background: var(--c-accent-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}
.cat-range__list {
  display: grid;
  gap: var(--sp-3) var(--sp-5);
  grid-template-columns: 1fr;
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .cat-range__list { grid-template-columns: repeat(2, 1fr); } }
.cat-range__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 0;
  background: none;
  border: 0;
}
.cat-range__bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  margin-top: 9px;
  flex: none;
}
.cat-range__name {
  font-weight: 500;
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.cat-range__notice {
  display: block;
  background: var(--c-surface-alt);
  border-left: 4px solid var(--c-accent);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  margin: 0 0 var(--sp-5);
}
.cat-range__notice strong { color: var(--c-brand-deep); }
.cat-range__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

/* Media card on the right of the range section */
.cat-range__media .card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.cat-range__media .card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(400px 240px at 80% 10%, rgba(244,194,13,0.22), transparent 60%),
    linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: var(--c-accent);
  position: relative;
  overflow: hidden;
}
.cat-range__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}
.cat-range__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-range__media .card__media svg {
  width: 120px;
  height: 120px;
  align-self: center;
  justify-self: center;
}
.cat-range__media .card__media-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  color: #fff;
  background: linear-gradient(to top, rgba(4,29,74,0.85), rgba(4,29,74,0));
  text-align: center;
  font-weight: 500;
}
.cat-range__media .card__media-caption strong { color: #fff; }
.cat-range__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
.cat-range__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-brand);
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.cat-range__nav:hover {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}
.cat-range__nav:focus-visible { box-shadow: var(--sh-focus); outline: 0; }
.cat-range__nav[hidden] { display: none; }
.cat-range__position {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
  min-width: 3.5em;
  text-align: center;
}

/* --- Category local SEO (simple full-width alt section) ---------------- */
.cat-local { padding-block: var(--sp-9); }
.cat-local__layout {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: center;
}
.cat-local__icon {
  display: flex;
  justify-content: center;
}
.cat-local__icon-shape {
  width: 120px;
  height: 120px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: var(--c-accent);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-md);
  position: relative;
  overflow: hidden;
}
.cat-local__icon-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(244,194,13,0.22), transparent 60%);
  pointer-events: none;
}
.cat-local__icon-shape svg {
  width: 64px;
  height: 64px;
  position: relative;
  z-index: 1;
}
.cat-local__copy h2 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-5);
}
.cat-local__copy p {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
  line-height: 1.7;
}
.cat-local__copy p:last-child { margin-bottom: 0; }
.cat-local__copy .lead { font-size: var(--fs-md); }

@media (min-width: 1024px) {
  .cat-local__layout {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--sp-9);
    align-items: center;
  }
  .cat-local__icon { justify-content: flex-start; }
  .cat-local__icon-shape { width: 144px; height: 144px; }
  .cat-local__icon-shape svg { width: 76px; height: 76px; }
}

/* --- Category related (4-up card grid) --------------------------------- */
.cat-related .lead { color: var(--c-text-muted); margin-bottom: var(--sp-7); }
.cat-related__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .cat-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cat-related__grid { grid-template-columns: repeat(4, 1fr); } }
.cat-related__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-text);
  text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
  height: 100%;
}
.cat-related__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--c-accent);
  color: var(--c-brand);
  text-decoration: none;
}
.cat-related__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-brand-deep);
  display: inline-grid;
  place-items: center;
  flex: none;
}
.cat-related__icon svg { width: 24px; height: 24px; display: block; }
.cat-related__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cat-related__name { font-weight: 700; font-size: var(--fs-base); color: inherit; line-height: 1.3; }
.cat-related__hint { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.4; }
.cat-related__cta {
  font-weight: 700;
  color: var(--c-brand);
  font-size: var(--fs-sm);
  margin-top: 2px;
}
.cat-related__card:hover .cat-related__cta { color: var(--c-brand-dark); }

/* --- Category FAQ ------------------------------------------------------- */
.cat-faq .section__head { margin-bottom: var(--sp-6); }
.cat-faq__list { max-width: 760px; margin: 0 auto; }

/* --- Category bottom CTA ----------------------------------------------- */
.cat-cta__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.cat-cta__inner h2 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-4);
  color: #fff;
}
.cat-cta__inner p {
  color: var(--c-text-on-dark-muted);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-6);
  line-height: 1.55;
}
.cat-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }

/* =========================================================================
   19. Products hub page
   Main /products/ landing page: hero, category cards, help, visit panel.
   ========================================================================= */

/* --- Products hero ------------------------------------------------------ */
.products-hero {
  position: relative;
  color: var(--c-text-on-dark);
  background:
    radial-gradient(700px 320px at 90% 0%, rgba(244,194,13,0.20), transparent 60%),
    linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 100%);
  overflow: hidden;
}
.products-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.products-hero .container { position: relative; z-index: 1; }
.products-hero__inner {
  padding-block: var(--sp-5) var(--sp-7);
  max-width: 760px;
}
.products-hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand-deep);
  background: var(--c-accent);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.products-hero__title {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  color: #fff;
}
.products-hero__lead {
  font-size: var(--fs-lg);
  color: var(--c-text-on-dark-muted);
  margin-bottom: var(--sp-6);
  max-width: 60ch;
  line-height: 1.55;
}
.products-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Products categories grid ------------------------------------------ */
.products-categories { padding-block: var(--sp-10); }
.products-categories__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand);
  background: var(--c-accent-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}
.products-categories h2 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-4);
}
.products-categories__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .products-categories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .products-categories__grid { grid-template-columns: repeat(3, 1fr); } }

/* Image-led vertical card */
.products-categories__card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--c-text);
  height: 100%;
  overflow: hidden;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.products-categories__card:hover,
.products-categories__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--c-accent);
  color: var(--c-brand);
  text-decoration: none;
}
.products-categories__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(400px 200px at 80% 10%, rgba(244,194,13,0.25), transparent 60%),
    linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: var(--c-accent);
  overflow: hidden;
}
.products-categories__icon {
  display: inline-grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.products-categories__icon svg { width: 56px; height: 56px; }
.products-categories__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 240ms var(--ease);
}
.products-categories__card:hover .products-categories__media img,
.products-categories__card:focus-visible .products-categories__media img {
  transform: scale(1.04);
}
.products-categories__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.products-categories__name {
  font-weight: 700;
  font-size: var(--fs-xl);
  color: inherit;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.products-categories__hint {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  line-height: 1.5;
}
.products-categories__cta {
  font-weight: 700;
  color: var(--c-brand);
  font-size: var(--fs-sm);
  margin-top: var(--sp-3);
}
.products-categories__card:hover .products-categories__cta,
.products-categories__card:focus-visible .products-categories__cta { color: var(--c-brand-dark); }

/* Age-restricted pill on the Vape Products card */
.products-categories__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--c-accent);
  color: var(--c-brand-deep);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  line-height: 1.4;
}

/* --- Products help section ---------------------------------------------- */
.products-help { padding-block: var(--sp-10); }
.products-help__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.products-help__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand);
  background: var(--c-accent-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}
.products-help__inner h2 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-5);
}
.products-help__inner p {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
  line-height: 1.7;
}
.products-help__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- Products visit panel removed. Opening hours are in the footer and
     the products-help section already provides the CTAs, so this section
     is no longer rendered. -} */


/* =========================================================================
   20. Services page (Repairs & Services)
   Designed for elderly village residents: simple, single column, large
   text, one obvious primary action (call us), no marketing fluff.
   ========================================================================= */

/* Services hero uses the standard .page-hero styles — see section 15. */
.services-hero__hint { display: none; }

/* --- Services list: simple numbered list, one column ------------------ */
.services-list { padding-block: var(--sp-10); }
.services-list .container { max-width: 760px; }
.services-list__title {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-4);
}
.services-list__lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-7);
}
.services-list__items {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  counter-reset: services-step;
}
.services-list__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-5);
  align-items: start;
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.services-list__num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: 1;
}
.services-list__name {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text);
  margin: 6px 0 var(--sp-2);
  line-height: 1.25;
}
.services-list__short {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  line-height: 1.55;
  margin: 0 0 var(--sp-3);
}
.services-list__detail {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--sp-3);
}
.services-list__row {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  line-height: 1.55;
  margin: 0 0 var(--sp-2);
}
.services-list__row strong { color: var(--c-text); }
.services-list__row--accent {
  background: var(--c-surface-alt);
  border-left: 3px solid var(--c-accent);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-top: var(--sp-2);
}
.services-list__note {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  line-height: 1.6;
}
.services-list__note strong { color: var(--c-text); }
.services-list__note a { color: var(--c-brand); font-weight: 600; }

/* --- Services FAQ ---------------------------------------------------- */
.services-faq { padding-block: var(--sp-10); }
.services-faq .container { max-width: 760px; }
.services-faq__title {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-4);
  text-align: center;
}
.services-faq__lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
  text-align: center;
}
.services-faq__lead a { color: var(--c-brand); font-weight: 600; }

/* Override the .faq-item styles for services — slightly larger text */
.services-faq .faq-item {
  border-width: 2px;
  margin-bottom: var(--sp-3);
}
.services-faq .faq-item__q {
  padding: var(--sp-5) var(--sp-5);
  font-size: var(--fs-md);
  min-height: 56px;
}
.services-faq .faq-item__a {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.services-faq .faq-item__a p { margin: 0; }

/* --- Services CTA: prominent "give us a ring" panel just above FAQ --- */
/* --- Services CTA: prominent "give us a ring" panel just above FAQ ---
   Edge-to-edge deep blue gradient. Two-column composition on desktop:
   left = primary action (eyebrow chip + h2 + big yellow call button +
   "send us a message" alt link). Right = a self-contained white "visit us"
   card with a yellow accent bar, a location pin icon, the address, and
   a quiet meta line. The two halves share the yellow accent so they
   feel like one design. -# */
.services-cta {
  padding-block: var(--sp-12);
  background:
    radial-gradient(ellipse 60% 80% at 80% 0%, rgba(29, 89, 182, 0.5) 0%, transparent 60%),
    linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.services-cta::before {
  content: "";
  position: absolute;
  top: -120px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(244,194,13,0.30), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.services-cta::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(244,194,13,0.15), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.services-cta > * { position: relative; z-index: 1; }

.services-cta__inner {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
@media (min-width: 760px) {
  .services-cta__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    padding-inline: var(--sp-8);
    align-items: stretch;
  }
}

/* Primary column (left) */
.services-cta__primary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-3);
  max-width: 560px;
}
.services-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand-deep);
  background: var(--c-accent);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.services-cta__title {
  font-size: clamp(1.625rem, 2.4vw + 0.5rem, 2.25rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: var(--sp-6);
  color: #fff;
  font-weight: 700;
  max-width: 18ch;
}
.services-cta__call {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  background: var(--c-accent);
  color: var(--c-brand-deep);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
  align-self: flex-start;
  min-height: 80px;
}
.services-cta__call:hover,
.services-cta__call:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.30);
  color: var(--c-brand-deep);
  text-decoration: none;
}
.services-cta__call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: var(--c-brand);
  color: var(--c-accent);
  border-radius: 50%;
  flex: none;
}
.services-cta__call-body {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.services-cta__call-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0.85;
}
.services-cta__call-number {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 2px;
  line-height: 1;
}
.services-cta__alt {
  margin-top: var(--sp-5);
  margin-bottom: 0;
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.85);
}
.services-cta__alt a {
  color: var(--c-accent);
  text-decoration: underline;
  font-weight: 600;
}
.services-cta__alt a:hover { color: #fff; }

/* Vertical divider between the two columns on desktop */
@media (min-width: 760px) {
  .services-cta__primary {
    padding-right: var(--sp-9);
    border-right: 1px solid rgba(255,255,255,0.18);
  }
  .services-cta__card {
    padding-left: var(--sp-9);
  }
}

/* Right column: a self-contained white "visit us" card.
   Sits on the gradient, with a yellow accent bar at the top, a small
   location pin icon, the address, and a quiet meta line. -# */
.services-cta__card {
  background: #ffffff;
  color: var(--c-text);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.services-cta__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--c-accent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.services-cta__card-pin {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-brand);
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--sp-1);
}
.services-cta__card-pin svg { display: block; }
.services-cta__card-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--c-brand);
  margin-top: var(--sp-1);
}
.services-cta__card-address {
  font-style: normal;
  font-size: var(--fs-base);
  color: var(--c-text);
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}
.services-cta__card-address strong {
  display: block;
  color: var(--c-text);
  font-weight: 800;
  font-size: var(--fs-md);
  margin-bottom: 4px;
}
.services-cta__card-meta {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
  font-style: italic;
}

/* --- 404 page --------------------------------------------------------- */
.not-found {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-7) 0;
}
.not-found__eyebrow {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent);
  margin: 0 0 var(--sp-4);
  letter-spacing: -2px;
}
.not-found__title {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-4);
}
.not-found__lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-6);
  line-height: var(--lh-loose);
}
.not-found__actions {
  margin: 0;
}
.not-found__links-title {
  font-size: var(--fs-lg);
  text-align: center;
  margin: 0 0 var(--sp-5);
}
.not-found__links {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 480px;
  display: grid;
  gap: var(--sp-2);
}
.not-found__links li {
  margin: 0;
}
.not-found__links a {
  display: block;
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-brand);
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.not-found__links a:hover,
.not-found__links a:focus-visible {
  border-color: var(--c-brand);
  transform: translateY(-1px);
}

/* ----- Contact form: honeypot + result panel -------------------------- */
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.form-result {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.form-result:focus { outline: none; }
.form-result--ok {
  background: #ecf7ee;
  border-color: #1f7a3a;
  color: #0f3a1f;
}
.form-result--error {
  background: #fdecec;
  border-color: #b3261e;
  color: #5a0d0d;
}