/*
 * Shared design system, extracted from the approved designs.
 *
 * The designs are authored with 100% inline styles. Extraction here is mechanical: the
 * computed result must be identical. Values are transcribed literally, including the
 * fractional font sizes and the negative letter-spacing.
 *
 * Layer order:
 *   fonts.css   self-hosted @font-face
 *   base.css    tokens, reset, shared chrome (nav, mobile menu, footer)
 *   <page>.css  one file per page, loaded by that page only
 */

/* ===== Brand tokens, ALL colours tunable here ===== */
:root {
  --blue: #16307F;
  --blue-bright: #16307F;
  --blue-deep: #16307F;
  --blue-light: #16307F;
  --cream: #FBF5E9;
  --cream-2: #F4E9D4;
  --cream-3: #EFE2C7;
  --ink: #3D2B1F;
  --ink-soft: #6B5F4C;
  --gold: #C9A24B;
  --gold-lite: #E6CC86;
  --gold-dark: #EF9C2E;
  --tomato: #C9A24B;
  --orange: #EF9C2E;
  --honey: #E9A92B;
  --green: #16307F;

  /*
   * Gold used as text on a light ground, rather than as an accent, a rule or a fill.
   *
   * The approved golds sit at 2.04:1 (#EF9C2E) and 2.21:1 (#C9A24B) against cream, well
   * under the 4.5:1 that WCAG 2.2 AA asks for below 18.66px. Every gold label on the
   * site therefore fails, and the design is signed off, so the colour is not changed
   * here. These tokens resolve to the approved values and exist so the decision is a
   * two-line edit once the client has made it.
   *
   * Compliant on cream, same hue: --gold-text #9B651E, --gold-text-muted #876D32.
   *
   * Only the light-ground labels route through these tokens. Gold on the navy panels is
   * deliberately left on --gold-dark: it is light-on-dark there, and darkening it drops
   * that text to 2.42:1, worse than what it started at. One global darkening is not a
   * fix. See the handover note for the full list of what a client "yes" would touch.
   */
  --gold-text: #EF9C2E;
  --gold-text-muted: #C9A24B;

  /*
   * Layout grid shared by the nav and every page section.
   *
   * The design is drawn on a 1280px content column. Held at that width on a large
   * monitor it stops growing while the window does not, so left-aligned content drifts
   * further from the edge with every step up in width and the page reads as a narrow
   * strip in the middle of the screen.
   *
   * --container-scale grows the wide containers with the viewport instead. It applies
   * only to grids and section wrappers, which gain from the room. Prose blocks are
   * capped at 1000px and below and are deliberately excluded: a paragraph stretched
   * across a 2560px screen runs past 200 characters a line and stops being readable,
   * which is why editorial sites cap their measure however wide the window is.
   */
  --container-scale: 1;
  --content-max: calc(1280px * var(--container-scale));
  --content-pad: 50px;
  --nav-height: 84px;
}

/* Small steps rather than three large ones, so widening the window or zooming out reads
   as the layout growing rather than as it jumping. */
@media (min-width: 1500px) { :root { --container-scale: 1.07; } }
@media (min-width: 1650px) { :root { --container-scale: 1.14; } }
@media (min-width: 1800px) { :root { --container-scale: 1.21; } }
@media (min-width: 1950px) { :root { --container-scale: 1.28; } }
@media (min-width: 2100px) { :root { --container-scale: 1.35; } }
@media (min-width: 2250px) { :root { --container-scale: 1.42; } }
@media (min-width: 2400px) { :root { --container-scale: 1.50; } }

* { box-sizing: border-box; }

/*
 * The hidden attribute has to beat a class that sets display.
 *
 * Browsers hide it through a user-agent rule of [hidden] { display: none }, which any
 * author rule of the same weight overrides, and a class does. The loading spinner on the
 * quote form carried display:inline-block, so it stayed on screen with the attribute set
 * and the button looked like it was submitting from the moment the page loaded.
 *
 * Every state this codebase toggles, spinners, form errors, showcase panels, is driven by
 * the hidden attribute, so it is worth asserting once here rather than per component.
 */
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img { max-width: 100%; }

/*
 * <picture> only selects a source; it must never take part in layout. Without this it
 * becomes the element that CSS positions and that :first-child / > img selectors see,
 * and every image wrapped for WebP delivery ends up mis-positioned.
 */
picture { display: contents; }

/*
 * display:contents promotes the picture's children into the parent's layout, and that
 * includes the <source>. It draws nothing, but as a flex or grid item it still takes a
 * slot and, worse, a gap: every flex row holding a <picture> gained one extra gap of
 * padding, which pushed text into an extra wrapped line and shifted whole pages.
 *
 * A <source> is metadata. It should never be laid out at all.
 */
picture > source { display: none; }

/* ---------------------------------------------------------------- accessibility */

/*
 * The designs ship with no visible focus state, which makes keyboard navigation
 * invisible across a lot of interactive UI. A gold ring is added here for keyboard
 * users only, so the approved look is unchanged for mouse users.
 */
:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Focus inside the navy footer and nav panels needs the light ring to stay readable. */
footer :focus-visible,
.mfx-hero :focus-visible {
  outline-color: var(--gold-lite);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--blue-deep);
  color: #fff;
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/*
 * Extends a small control's clickable area to the 24x24 minimum in WCAG 2.2 without
 * changing where anything sits. The pseudo-element is invisible and unpositioned in
 * flow, so the approved spacing is untouched.
 */
.hit-target { position: relative; }

.hit-target::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 24px);
  height: max(100%, 24px);
  transform: translate(-50%, -50%);
}

/* Visually hidden but available to assistive technology, used for form labels the
   design renders as placeholders. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================== category accent classes */

/*
 * Per-category accent, exposed as --accent to every component inside the element.
 *
 * These are classes rather than an inline custom property because the strict
 * Content-Security-Policy carries no 'unsafe-inline' for styles: a style attribute is
 * silently dropped and the component renders with no accent at all.
 *
 * Source of truth for the values is config/app.php -> category_accents, which is
 * developer-owned by design, since a typo here would restyle whole pages. Adding a
 * category means adding it in both places.
 */

/* Fallback first, so an unrecognised category still renders, in brand gold. */
[class*="accent-"]    { --accent: var(--gold); }

.accent-spreads       { --accent: #E08A2C; }
.accent-condiments    { --accent: #C0392B; }
.accent-convenience   { --accent: #3E7D4F; }
.accent-beverages     { --accent: #E7A400; }
.accent-cookingaids   { --accent: #4E7E8C; }
.accent-confectionary { --accent: #6E4A2B; }

/* ------------------------------------------------------------------- animations */

@keyframes mfxBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
@keyframes mfxMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes mfxMarqueeRev { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@keyframes mfxSway { 0%, 100% { transform: rotate(-2.5deg) } 50% { transform: rotate(2.5deg) } }
@keyframes mfxFloat { 0%, 100% { transform: translateY(0) rotate(-7deg) } 50% { transform: translateY(-16px) rotate(-3deg) } }
@keyframes mfxBirdIn { from { transform: translate(-60px, -50px) rotate(-12deg) scaleX(-1); opacity: 0 } to { transform: translate(0, 0) rotate(-3deg) scaleX(-1); opacity: 1 } }
@keyframes mfxBirdHover { 0%, 100% { transform: translate(0, 0) rotate(-3deg) scaleX(-1) } 50% { transform: translate(14px, -14px) rotate(3deg) scaleX(-1) } }
@keyframes mfxRise { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: translateY(0) } }
@keyframes mfx3dTilt {
  0% { transform: perspective(1100px) rotateY(-10deg) rotateX(3deg) translateY(0) }
  50% { transform: perspective(1100px) rotateY(10deg) rotateX(-2deg) translateY(-12px) }
  100% { transform: perspective(1100px) rotateY(-10deg) rotateX(3deg) translateY(0) }
}
@keyframes mRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================== desktop navigation */

/* Spans the viewport so .nav-surface, the scrolled cream bar, reaches both edges.
   .nav-inner keeps the logo and links on the --content-max grid. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 90;
  display: flex;
  align-items: center;
}

.nav-surface {
  position: absolute;
  inset: 0;
  background: var(--cream);
  box-shadow: 0 6px 24px rgba(36, 28, 18, .07);
}

/* The home hero sits under a transparent nav until the page scrolls. Other pages
   start on cream, so the surface is opaque from the first paint. */
.nav--overlay .nav-surface { opacity: 0; transition: opacity .25s ease; }
.nav--overlay.is-scrolled .nav-surface { opacity: 1; }
.nav--overlay .nav-center { text-shadow: 0 1px 12px rgba(12, 20, 40, .45); }
.nav--overlay.is-scrolled .nav-center { text-shadow: none; }
/* The caret is a sibling of the link, not a child, so it has to be named alongside it.
   Left out, it inherits --ink from the nav and stays dark against the hero while the
   labels beside it turn white. It tracks both states, never a fixed colour: white over
   the hero, ink once the cream surface has faded in. */
.nav--overlay .nav-link,
.nav--overlay .nav-caret-btn { color: #fff; }
.nav--overlay.is-scrolled .nav-link,
.nav--overlay.is-scrolled .nav-caret-btn { color: var(--ink); }

.nav-inner {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--content-pad);
}

/*
 * The -26px offset compensates for transparent padding baked into mitchells-logo.png,
 * so the visible mark lines up with the 1280px content grid. If the logo is ever
 * re-exported without that padding, remove this offset with it.
 */
.nav-logo-a {
  position: absolute;
  left: var(--content-pad);
  margin-left: -26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.nav-logo {
  height: 104px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(36, 28, 18, .12));
}

.nav-center { display: flex; align-items: center; gap: 30px; }

.nav-link {
  position: relative;
  font-family: 'Bricolage Grotesque';
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-link--home { font-weight: 700; }

/*
 * WCAG 2.2 SC 2.5.8 wants a 24px target. Giving the label a 24px box made the nav row
 * 24px tall where the design's is 17px, which spread the items apart. The target is an
 * invisible pseudo-element instead: it is not in flow, so the design's metrics stand.
 */
.nav-link::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* The current top-level section keeps the gold underline from the design. */
.nav-link[aria-current="page"] {
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}

/*
 * The design opens each panel on hover alone, which leaves it unreachable by keyboard
 * and on touch. The label stays a link to the section page and this small caret button
 * carries the disclosure semantics, so the visual result is unchanged.
 */
/*
 * The button carries a real 24x24 box for WCAG 2.2 SC 2.5.8, built from padding and
 * taken straight back out with negative margins, so in flow it occupies exactly the
 * 7x4 the caret draws and the nav spacing is the design's.
 *
 * Padding rather than a pseudo-element: a pseudo does make the area clickable, but
 * neither Lighthouse nor a human auditor can see it in the box model, and a target
 * nobody can verify is a target that gets queried.
 */
.nav-caret-btn {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  padding: 10px 9px;
  margin: -10px -9px -10px -4px;
}

/*
 * The button takes the size of its 10px glyph, exactly as the design's <span> does.
 * A 24x24 box here made the caret read as an oversized control and pushed the nav
 * items apart; the target size is carried by the pseudo-element below, which draws
 * nothing and takes no space.
 */
.nav-caret-btn { font-size: 10px; }


/*
 * Drawn, not typed. The design's caret is the character U+25BE, which Bricolage
 * Grotesque does not carry, so it lands on whatever the OS substitutes: Lucida Grande
 * on the design machine, .SF NS here, and something else again on Windows. Each draws a
 * different shape at a different weight. An SVG renders identically everywhere.
 */
.nav-caret {
  display: block;
  width: 7px;
  height: 4px;
  transition: transform .2s ease;
}
.nav-caret-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-cta {
  position: absolute;
  right: var(--content-pad);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  color: var(--blue-deep);
  background: #ef9c2e;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(239, 156, 46, .42);
}

/* ------------------------------------------------------------ dropdown panels */

.nav-menu { position: relative; height: var(--nav-height); display: flex; align-items: center; }

.nav-panel {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: 100vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 80;
  text-shadow: none;
}

/* Hover opens the panel for mouse users; the JS toggle adds .is-open for keyboard
   and touch users, which the CSS-only design had no equivalent of. */
.nav-menu:hover .nav-panel,
.nav-menu .nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-panel-surface {
  background: rgba(251, 245, 233, .96);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-top: 1px solid rgba(201, 162, 75, .4);
  border-radius: 0 0 28px 28px;
  box-shadow: 0 30px 54px rgba(12, 20, 40, .17);
  overflow: hidden;
}

.nav-panel-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 46px var(--content-pad) 48px;
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 52px;
  align-items: start;
}

.nav-panel-grid--wide { grid-template-columns: 290px 1fr; gap: 56px; padding: 44px var(--content-pad) 46px; }


/* A menu row for a page that does not exist yet: reads as a label, not a link. */
.gov-link--disabled { color: var(--ink-soft); opacity: .72; cursor: default; }

.nav-panel-title {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 34px;
  letter-spacing: .02em;
  color: var(--blue-deep);
  line-height: .95;
}

.nav-panel-lede {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 16px 0 20px;
}

.nav-panel-kicker {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 14px;
}

.nav-panel-kicker--spaced { margin-bottom: 20px; }
.nav-panel-kicker--tight { margin-bottom: 16px; }

.nav-panel-cols {
  display: flex;
  gap: 70px;
  padding-top: 6px;
  padding-left: 52px;
  border-left: 1px solid rgba(201, 162, 75, .3);
}

.nav-panel-cols--brands { gap: 56px; padding-top: 0; padding-left: 56px; }

.nav-panel-list { padding-left: 52px; border-left: 1px solid rgba(201, 162, 75, .3); }

.gov-link {
  display: block;
  font-family: 'Bricolage Grotesque';
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color .16s ease;
}
.gov-link:last-child { margin-bottom: 0; }
.gov-link:hover { color: var(--blue-deep); }

.nav-panel-cta {
  display: inline-block;
  margin-top: 22px;
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  color: var(--gold-text);
  border-bottom: 2px solid rgba(201, 162, 75, .5);
  padding-bottom: 3px;
}
.nav-panel-cta--tight { margin-top: 0; }

.ab-row {
  display: block;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 12px;
  margin-left: -12px;
  transition: background .16s ease, padding-left .16s ease;
}
.ab-row:hover { background: rgba(201, 162, 75, .1); padding-left: 14px; }

.ab-row-title { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.ab-row-desc { font-family: 'Figtree', 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.ab-row--disabled { display: block; padding: 11px 12px; border-radius: 12px; margin-left: -12px; cursor: not-allowed; opacity: .55; }
.ab-row--disabled .ab-row-title { display: flex; align-items: center; gap: 8px; }

.pill-soon {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: rgba(201, 162, 75, .16);
  border: 1px solid rgba(201, 162, 75, .4);
  padding: 2px 7px;
  border-radius: 999px;
}

.bcol a {
  display: block;
  font-family: 'Bricolage Grotesque';
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 11px;
  transition: color .16s ease, padding-left .16s ease;
}
.bcol a:last-child { margin-bottom: 0; }
.bcol a:hover { color: var(--blue-deep); padding-left: 4px; }

.gov-card {
  display: block;
  background: #fff;
  border: 1px solid rgba(201, 162, 75, .28);
  border-radius: 18px;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(12, 20, 40, .08);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.gov-card:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(12, 20, 40, .16); }

.gov-card-pad { padding: 22px 22px 24px; }
.gov-card-img { width: 100%; height: 132px; object-fit: cover; display: block; }
.gov-card-body { padding: 18px 22px 22px; }
.gov-card-kicker { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.gov-card-title { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 18px; color: var(--blue-deep); line-height: 1.15; margin-top: 6px; }
.gov-card-text { font-family: 'Bricolage Grotesque'; font-weight: 500; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 0; }
.gov-card-more { display: inline-block; margin-top: 14px; font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 13px; color: var(--gold-text); }

/* ===================================== mobile navigation, heritage full-screen */

.mnav-btn { display: none; }
.mdrawer { display: none; }

@media (max-width: 1100px) {
  .nav-center { display: none !important; }
  .nav-cta { display: none !important; }

  .mnav-btn {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 96;
    background: none;
    border: 0;
    padding: 0;
  }

  .mnav-bars,
  .mnav-bars::before,
  .mnav-bars::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 2.5px;
    background: var(--blue-deep);
    border-radius: 2px;
    transition: transform .28s ease, opacity .2s ease;
  }
  .mnav-bars::before { transform: translateY(-8px); }
  .mnav-bars::after { transform: translateY(8px); }

  .mdrawer {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 120;
    background: rgba(251, 245, 233, .72);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    transition: opacity .4s ease, transform .55s cubic-bezier(.22, 1, .36, 1), visibility .4s;
  }

  .mdrawer.is-open { opacity: 1; visibility: visible; transform: scale(1); }

  .mdrawer-inner {
    position: relative;
    min-height: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 26px 28px 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .m-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(201, 162, 75, .4);
  }
  .m-top img { height: 66px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(36, 28, 18, .12)); }

  .m-close {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 75, .5);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--blue-deep);
    padding: 0;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .m-close:hover { background: var(--blue-deep); color: #fff; transform: rotate(90deg); }
  /* Only the bar span. The design's `.m-close span` also caught the visually hidden
     label, which outranks .sr-only and drew it as a second stroke beside the cross. */
  .m-close .m-close-bar { position: relative; width: 20px; height: 2.4px; background: currentColor; border-radius: 2px; transform: rotate(45deg); }
  .m-close .m-close-bar::before { content: ''; position: absolute; inset: 0; background: currentColor; border-radius: 2px; transform: rotate(90deg); }

  .m-index { flex: 1; padding-top: 6px; }

  .mrow { padding: 20px 0; border-bottom: 1px solid rgba(201, 162, 75, .26); }
  .mdrawer.is-open .mrow { animation: mRise .55s both; }
  .mdrawer.is-open .mrow:nth-child(1) { animation-delay: .08s; }
  .mdrawer.is-open .mrow:nth-child(2) { animation-delay: .15s; }
  .mdrawer.is-open .mrow:nth-child(3) { animation-delay: .22s; }
  .mdrawer.is-open .mrow:nth-child(4) { animation-delay: .29s; }
  .mdrawer.is-open .mrow:nth-child(5) { animation-delay: .36s; }

  .mrow-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-decoration: none; }
  .mrow-num { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); line-height: 1; }
  .mrow-name { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: clamp(28px, 8vw, 34px); line-height: .98; letter-spacing: -.01em; color: var(--blue-deep); transition: color .2s ease; }
  .mrow-head:hover .mrow-name { color: var(--gold-dark); }

  .mrow-subs { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 14px 0 0 0; }
  .mrow-subs a { position: relative; font-family: 'Bricolage Grotesque'; font-weight: 600; font-size: 14px; color: var(--ink-soft); text-decoration: none; transition: color .18s ease; }
  .mrow-subs a:hover { color: var(--blue-deep); }

  /* Active page indicator. Driven by the server-side current route, not by matching
     the URL basename in the browser. */
  .mrow-current { border-left: 3px solid var(--gold-dark); padding-left: 15px; margin-left: -18px; }
  .mrow-current .mrow-name { color: var(--gold-dark) !important; }
  .mrow-current .mrow-num::after { content: ' \00B7 You are here'; color: var(--gold-dark); font-weight: 800; }
  .mrow-subs a.subcur { color: var(--blue-deep) !important; font-weight: 800 !important; border-bottom: 2px solid var(--gold-dark); }

  .m-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    background: var(--orange);
    color: var(--blue-deep);
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    padding: 17px 22px;
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(239, 156, 46, .42);
  }
  .mdrawer.is-open .m-cta { animation: mRise .55s .44s both; }

  .m-foot { margin-top: 20px; }
  .m-foot span { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(201, 162, 75, .85); }

  .m-bird { position: absolute; right: -40px; bottom: -24px; width: 210px; opacity: .12; pointer-events: none; }

  .nav-logo { height: 74px !important; }
  .nav-logo-a { left: 26px !important; margin-left: 0 !important; }

  /* The drawer is a modal surface; the page behind it must not scroll. */
  body.mnav-open { overflow: hidden; }
}

@media (max-width: 820px) {
  .nav-logo-a { left: 4px !important; }
}

/* ============================================================== shared footer */

/* Capped and centred like .page-shell and .nav. The design wraps the whole document,
   footer included, in a 1440px canvas; leaving this one full-bleed made it the only band
   that reached the viewport edge on a wide screen. */
/* Full-bleed navy band; .footer-inner holds its contents on the content grid. */
.site-footer { position: relative; background: #16307F; padding: 70px 48px 40px; overflow: hidden; }

.footer-bird { position: absolute; bottom: -30px; right: 40px; width: 240px; opacity: .14; pointer-events: none; }

.footer-grid {
  position: relative;
  max-width: calc(1240px * var(--container-scale));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

/*
 * Width leads, height follows.
 *
 * A fixed height with width:auto looks right until the column is narrower than the logo:
 * the global img max-width:100% then clamps the width while the height stays put, and the
 * mark is squeezed. The footer keeps two columns on a phone, so that column is about
 * 130px, and the logo was rendering at a 1.21 ratio against its natural 1.75. Sizing by
 * width and letting height derive keeps the proportions at every width.
 */
.footer-logo {
  width: 182px;
  max-width: 100%;
  height: auto;
  display: block;
  /*
   * mitchells-logo.png carries 186px of transparent padding down its left edge, 14.5% of
   * the file's width, so the mark reads as indented against the name and tagline beneath
   * it. The nav compensates with a fixed -26px, which is the same 14.5% of the 182px it
   * renders at. Here the logo scales with the column, so the shift has to scale too:
   * a percentage translate resolves against the element's own width, unlike a percentage
   * margin, which would resolve against the column and over-shoot.
   *
   * If the logo is ever re-exported without the padding, remove this and the nav offset.
   */
  transform: translateX(-14.5%);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .25));
}
.footer-name { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 16px; line-height: 1.35; color: #fff; margin: 18px 0 0; }
.footer-tagline { font-family: 'Bricolage Grotesque'; font-weight: 500; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); max-width: 280px; margin: 6px 0 0; }
.footer-heading { font-family: 'Bricolage Grotesque'; font-weight: 600; font-size: 16px; color: #fff; margin-bottom: 14px; }

/*
 * 24px minimum height per link, for WCAG 2.2 SC 2.5.8: at 17px tall with a 9px gap the
 * targets were too close together to qualify for the spacing exception.
 *
 * The margin is reduced by the same amount the box grows, so each row keeps its 26px
 * rhythm and the footer's overall height is unchanged.
 */
.footer-grid a {
  display: flex;
  align-items: center;
  min-height: 24px;
  font-family: 'Bricolage Grotesque';
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  margin-bottom: 2px;
  transition: color .16s ease;
}
.footer-grid a:last-child { margin-bottom: 0; }
.footer-grid a:hover { color: #fff; }

.footer-social a { display: flex; align-items: center; gap: 10px; }
.footer-social span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.footer-social img { width: 16px; height: 16px; object-fit: contain; }

.footer-legal {
  position: relative;
  max-width: calc(1240px * var(--container-scale));
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-family: 'Bricolage Grotesque';
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

/* The footer keeps two columns on mobile. It must never collapse to one. */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}

/* ====================================================== shared page furniture */

/*
 * The design is authored on a fixed 1440px canvas, so past that width it stopped and the
 * page sat in a column with the body showing either side. That reads as a broken layout
 * on a large monitor, and at browser zoom below 100%.
 *
 * The cap is removed so full-width bands (hero photography, the navy footer, section
 * backgrounds) reach the viewport edge. Line length is unaffected: every section already
 * caps its own content on the --content-max grid, so the widest text on any page measures
 * 1280px whether the viewport is 1440 or 3440.
 */
.page-shell { position: relative; width: 100%; margin: 0 auto; background: var(--cream); overflow: hidden; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: 'Figtree', 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: '\203A'; color: rgba(201, 162, 75, .8); }
.breadcrumbs a { position: relative; color: var(--ink-soft); text-decoration: none; transition: color .16s ease; }

/*
 * Breadcrumb links sit in a flex row rather than a sentence, so the inline exemption
 * in SC 2.5.8 does not apply and each needs the 24px minimum in its own right.
 */
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.breadcrumbs a:hover { color: var(--blue-deep); }
.breadcrumbs [aria-current="page"] { color: var(--blue-deep); font-weight: 700; }

/* ============================================== shared product card component */
/*
 * Used by the catalogue grid and by the related-products strip on a product page.
 * Shared, so it lives here rather than in either page's stylesheet.
 */

.prod-card {
  background: #fff;
  border: 1px solid rgba(201, 162, 75, .30);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(22, 48, 127, .08);
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.prod-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent, var(--gold));
  box-shadow: 0 20px 40px rgba(22, 48, 127, .16);
}

.prod-card-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 1px solid rgba(201, 162, 75, .20);
  /* The tint is the category accent at low opacity, as in the design. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--gold)) 14%, #fff) 0%, color-mix(in srgb, var(--accent, var(--gold)) 6%, #fff) 100%);
}

/* Fallback for browsers without color-mix: the cream ground the design starts from. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .prod-card-figure { background: linear-gradient(180deg, var(--cream-2) 0%, #fff 100%); }
}

.prod-card-shadow {
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%);
  width: 60%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(22, 48, 127, .20) 0%, rgba(22, 48, 127, 0) 72%);
  filter: blur(3px);
}

.prod-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  filter: drop-shadow(0 10px 18px rgba(22, 48, 127, .14));
}

.prod-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.prod-card-initial {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(201, 162, 75, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 30px;
  color: var(--gold-dark);
  box-shadow: 0 8px 20px rgba(36, 28, 18, .08);
}

.prod-card-soon {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .65;
}

.prod-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent, var(--gold));
  padding: 5px 9px;
  border-radius: 999px;
}

.prod-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }

.prod-card-name { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 18px; line-height: 1.12; color: var(--blue-deep); }
.prod-card-size { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 11.5px; letter-spacing: .03em; color: var(--gold-text); margin-top: 6px; }
.prod-card-desc { font-family: 'Bricolage Grotesque'; font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; }

.prod-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--gold-text);
}