/* ================= HIDDEN-ATTRIBUTE GUARD (R-defect, 12 June) =================
   Author display rules (.azrow{display:flex} etc.) silently override the
   browser's built-in [hidden]{display:none}. This guard makes the hidden
   attribute authoritative for every current and future component. The shops
   A-to-Z filter was visually inert since Sprint 1 because of this. */
[hidden]{display:none!important}

/* bond-system v1.0 - canonical stylesheet, Sprint 0 reconciliation, 11 June 2026
   Base: NEW Getting Here sheet (strict superset of all page families).
   Appended: mission-family reveal stagger + river hero variant (kept per INT-04 Option B).
   NOTE: font url() values reference bundle UUIDs; renamed in Sprint 1 de-bundle. */

/* ============================================================================
   BOND STREET CHELMSFORD — bond-system.css
   THE SINGLE SOURCE OF TRUTH for every page from Phase 2 onward.
   Extracted from the locked, canonical homepage (Concept 1B v4).

   RULES OF USE
   • Every page is built ONLY from the tokens and component classes below.
   • No page introduces its own colours, type sizes, spacing or one-off styles.
   • If a layout needs something not here, ADD it here (named to match the
     system) and record it in the developer reference — never a magic number.
   • Pair with bond-fonts.css (imported below). Heads/schema per
     Bond_Street_OnPage_SEO_Pack.md. Build contract per Developer Requirements.

   CONTENTS
     0  Reset & base
     1  Tokens — colour, type, spacing, radius, border, elevation, z-index
     2  Layout — containers, breakpoints, aspect-ratio reservation (CLS)
     3  Motion system + page-level motion tiers (rich vs utility)
     4  Type treatments (incl. the Escrow "punch")
     5  Components — nav, footer, buttons, hero+scrim, breadcrumb, search,
        cards, facts/proof, pills, colour-band, tenant pattern, tariff table,
        answer block, notices, directory, system states, QA chrome
   ============================================================================ */

/* ============================================================
   BOND STREET CHELMSFORD — FONT LOADING
   Real licensed fonts ARE present in this prototype (client-supplied
   .otf files in /fonts). They will NOT be on a public server by default.
   A clearly-labelled Google Fonts fallback (Montserrat ↔ Gotham,
   Playfair Display ↔ Escrow Banner) is declared below so the page
   renders out of the box if the licensed files are absent.

   HONESTY NOTE (carried into the QA panel):
   • Gotham — supplied: Light / Book / Medium / Bold. Used live.
   • Escrow Banner ITALIC — supplied and used live for the italic
     display accent. The brand's nominated cut is "Escrow Banner BLACK
     Italic"; the supplied file is the Italic weight (lighter than Black).
   • Escrow Banner ROMAN (upright, non-compressed) is NOT supplied, so
     Concept 2's roman display is shown in the Playfair Display fallback,
     clearly labelled. (The supplied Escrow "Compressed Semibold" roman
     is a different, narrower cut and would re-proportion the headlines,
     which Concept 2 forbids — so it is deliberately not used for display.)
   "Final typography must be reviewed with licensed Gotham and Escrow
    Banner before approval."
   ============================================================ */

/* ---- Licensed: Gotham (real) ---- */
@font-face{font-family:"Gotham";src:url("../fonts/Gotham-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Gotham";src:url("../fonts/Gotham-Book.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Gotham";src:url("../fonts/Gotham-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Gotham";src:url("../fonts/Gotham-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;}

/* ---- Licensed: Escrow Banner Italic (real) ---- */
@font-face{font-family:"Escrow Banner";src:url("../fonts/EscrowBanner-BookItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap;}

/* ---- Licensed: Escrow Banner Compressed Semibold (real) — held for campaign/compressed lockups, NOT body display ---- */
@font-face{font-family:"Escrow Banner Compressed";src:url("../fonts/EscrowBannerCompressed-600.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Escrow Banner Compressed";src:url("../fonts/EscrowPunch-600Italic.otf") format("opentype");font-weight:600;font-style:italic;font-display:swap;}

/* ---- "Escrow Punch": the HEAVY uppercase emphasis face the brand calls "Escrow Banner BLACK Italic".
   That cut is NOT in the supplied files. The Compressed Semibold Italic is the HEAVIEST italic Escrow
   available, so it stands in for the Black-Italic punch (heavy, confident) rather than faking weight
   with the lighter Banner Italic. Flagged in every QA panel. Swap to true Escrow Banner Black Italic on sign-off. ---- */
@font-face{font-family:"Escrow Punch";src:url("../fonts/EscrowPunch-600Italic.otf") format("opentype");font-weight:600;font-style:italic;font-display:swap;}

/* ---- Fallbacks (labelled, NOT metric-compatible) ---- */
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-MediumItalic.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900Italic.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-900.otf") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ============================ 0 · RESET & BASE =========================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);background:var(--surface);color:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-toolbar);background:var(--ink);
  color:#fff;padding:10px 16px;border-radius:0 0 var(--r) 0;font-weight:600;font-size:14px}
.skip:focus{left:0}

/* ============================== 1 · TOKENS =============================== */
:root{
  /* --- Colour (named by ROLE, not hue) --- */
  --surface:#FFFFFF;          /* one true white                              */
  --surface-alt:#F4F0E8;      /* one warm off-white (the second neutral)     */
  --ink:#15120f;              /* near-black; type + the boxed logo           */
  --body:#46413a;             /* body copy (AA 8.9:1 on surface-alt)         */
  --muted:#6f685e;            /* secondary/labels (AA 4.8:1 on surface-alt)  */
  --line:#e3ddd0;             /* hairline borders / dividers                 */
  --line-strong:#cdc4b4;      /* heavier rule                                */
  --accent:#0C6B5E;           /* the single sanctioned brand accent — teal   */
  --accent-deep:#0a564b;      /* accent hover/pressed                        */
  --accent-tint:#E7F0ED;      /* river-tint surface (today-row, soft notices)*/
  --band-teal:#0C6B5E;        /* the "stores worth the trip" colour-band     */
                              /* white on band-teal = 6.4:1 (AA pass)        */
  --on-accent:#FFFFFF;
  --focus:#1457c8;            /* focus ring (non-brand, high-contrast)       */
  --flag:#b5630a;             /* QA flag / "to confirm" amber (text only)    */
  --scrim-rgb:15,14,13;       /* one near-black scrim tone, site-wide (A11Y-9)*/

  /* --- Typography ---
     Gotham is primary (Light 300 / Book 400 / Medium 500). Escrow Banner
     Black Italic is the SECONDARY punch only (see .punch, §4).
     FONT FALLBACK NOTE: the licensed cut supplied is "Escrow Banner Italic"
     (confirmed by the client as the installed brand cut). The brand nominates
     the heavier "Black Italic"; if/when that file is licensed, swap the
     @font-face in bond-fonts.css — do NOT fake the weight here. */
  --font-sans:"Gotham","Montserrat",Helvetica,Arial,sans-serif;
  --font-punch:"Escrow Banner",Georgia,"Times New Roman",serif;
  --fw-light:300; --fw-book:400; --fw-med:500; --fw-bold:700;

  /* type scale (clamped, fluid) — use the .t-* classes in §4 */
  --t-display:clamp(40px,6vw,86px);  /* hero H1                     */
  --t-h1:clamp(30px,4vw,52px);       /* page H1                     */
  --t-h2:clamp(27px,3.2vw,42px);     /* section title               */
  --t-h3:clamp(19px,2vw,24px);       /* sub-section                 */
  --t-h4:16px;                        /* card / fact title           */
  --t-lead:clamp(16px,1.4vw,19px);   /* standfirst / lead           */
  --t-body:16px; --t-small:13px; --t-tiny:11px;
  --lh-tight:1.04; --lh-head:1.12; --lh-body:1.6;
  --ls-eyebrow:.2em; --ls-logo:.13em;

  /* --- Spacing scale (4px base) --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:104px;
  --sec-y:clamp(46px,6vw,86px);      /* standard section vertical rhythm */

  /* --- Radius --- */
  --r-sm:4px; --r:6px; --r-md:10px; --r-lg:12px; --r-pill:999px;

  /* --- Elevation --- */
  --shadow-1:0 2px 10px rgba(21,18,15,.08);
  --shadow-2:0 18px 38px rgba(21,18,15,.12);
  --shadow-mast:0 2px 12px rgba(0,0,0,.16);

  /* --- Containers --- */
  --maxw:1240px;        /* marketing / homepage / hubs  */
  --maxw-read:1040px;   /* functional + cluster pages   */
  --maxw-narrow:980px;  /* tenant pages                 */
  --pad-x:clamp(18px,4vw,44px);

  /* --- Motion --- */
  --dur-fast:.2s; --dur:.45s; --dur-reveal:.55s;
  --rev-y:12px;   /* D375 RM-0 - reveal travel becomes a responsive token */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* --- Layout metrics --- */
  --nav-h:70px;          /* sticky nav height; sticky offsets reference this */

  /* --- Z-index scale --- */
  --junction:96px;   /* PAGE-END JUNCTION — Decision 3, pulled forward (Sprint 1.1) */
  --z-base:1; --z-scrim:2; --z-overlay:3; --z-nav:90; --z-toolbar:200; --z-modal:500;
}

/* ============================ 2 · LAYOUT ================================= */
/* Breakpoints used site-wide: 1080 (tablet), 760 (mobile), 540 (small);
   plus the 1366×768 SHORT-LAPTOP case handled with max-height:780 rules in
   hero components so headlines never clip. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.wrap--read{max-width:var(--maxw-read)}
.wrap--narrow{max-width:var(--maxw-narrow)}
.sec{padding:var(--sec-y) 0}

/* Aspect-ratio reservation — mirrors the Media slotting table EXACTLY, so
   layout shift (CLS) is impossible by default. Apply to every media slot. */
.ar{position:relative;overflow:hidden;background:var(--surface-alt)}
.ar>img,.ar>video,.ar>iframe{width:100%;height:100%;object-fit:cover;display:block}
.ar-16x9{aspect-ratio:16/9}
/* D339 - the three directory heroes are supplied at 2304x900, composed for a wide
   band rather than cropped into one. The container follows the artwork so nothing
   is cut: at 1152 it renders 1152x450, between the old 648 and the 306 cap that was
   slicing the compositions in half. */
.ar-hero-wide{aspect-ratio:2304/900}     /* hero, hub section hero, cinema feature */
.ar-21x9{aspect-ratio:21/9}     /* wide map / wayfinding strip */
.ar-4x3{aspect-ratio:4/3}
/* D354 - 9:5 matches the 540x300 mission crops exactly. They were sitting in a 4:3
   frame with object-fit:cover, which showed only the middle 74% of each frame. */
.ar-9x5{aspect-ratio:9/5}       /* mission thumb, featured-store tile, commercial support */
.ar-1x1{aspect-ratio:1/1}       /* proof tile, category tile */
.ar-4x5{aspect-ratio:4/5}       /* mission vertical card */
.ar-9x16{aspect-ratio:9/16}     /* mission vertical loop */

/* ====================== 3 · MOTION + PAGE TIERS ========================= */
/* Tier is set with a body class so behaviour is SYSTEMATIC, not per-page:
     body.tier-rich     — destination/marketing pages (homepage, hub heroes):
                          gentle reveals, one calm title reveal, quiet hover.
     body.tier-utility  — functional pages (Parking, Accessibility, Opening
                          Times, tenant facts, system states, Commercial):
                          NO reveals/title animation; content instant; only
                          essential hover/focus. Speed = the premium signal.
   The reveal start-state is armed by JS adding html.anim (so JS-off and
   reduced-motion are always fully visible). Reveal is TRANSFORM-ONLY at full
   opacity, so motion can never hide or delay content. No bounce/spring. */
/* Reveal = a gentle, TRANSFORM-ONLY rise: a small (12px) upward move, eased, at
   FULL OPACITY so motion can never hide, delay or blank-band content (a full-page
   render, a not-yet-scrolled card grid, print and reduced-motion all stay visible).
   Start-state armed only under html.anim + motion-allowed; JS-off shows content. */
@media(prefers-reduced-motion:no-preference){
  /* D369 - the reveal was a 12px lift with no fade, so a card never actually
   appeared, it nudged. A 3% movement on a 400px card is close to invisible, which
   is why the stagger could not be read. Opacity added alongside the lift. */
html.anim body.tier-rich .reveal{transform:translateY(var(--rev-y));opacity:0}
  html.anim body.tier-rich .reveal.in{animation:bsRevIn var(--dur-reveal) var(--ease) both}
  html.anim body.tier-rich .reveal.done{transform:none;opacity:1;animation:none}
}
@keyframes bsRevIn{from{transform:translateY(var(--rev-y));opacity:0}to{transform:none;opacity:1}}
/* D375 RM-0 - shorter, quicker reveal on touch widths: scroll velocity is higher
   on a phone, so the 12px/.55s desktop rise reads as lag. Approved values 8px/.4s. */
@media(max-width:760px){:root{--rev-y:8px;--dur-reveal:.4s}}
/* utility tier never animates content in */
body.tier-utility .reveal{opacity:1;transform:none;animation:none}

/* D375 RM-5 - image arrival joins the reveal system. Lazy card images used to pop
   raw into the .ar placeholder once decoded, most visibly on mobile where decode
   lands after the card's reveal. Contract: [data-img-rev] is set ONLY by the
   phase2 engine (tier-rich, JS on, motion allowed) and ONLY on images not already
   decoded; the engine guarantees .is-loaded on load, error or the 6s failsafe.
   CSS never hides an image on its own: no html.anim, no arming, opacity stays 1.
   The .ar surface-alt underlay shows during the fade; aspect-ratio reservation
   means zero layout shift. */
.ar img{opacity:1}
@media(prefers-reduced-motion:no-preference){
  html.anim .ar img[data-img-rev]{opacity:0}
  html.anim .ar img[data-img-rev].is-loaded{opacity:1;transition:opacity .5s var(--ease)}
}

/* Shared quiet hover/focus easing on interactive surfaces (BOTH tiers) */
.btn,.card,.pill,.nav__links a,.tile,.fcard,.dcard,.mcard,.azrow{transition:
  transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
  color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
  border-color var(--dur-fast) var(--ease)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =================== 4 · TYPE TREATMENTS ================================ */
/* The Escrow "punch": the ONE reusable Escrow treatment. Uppercase, heavy,
   used as a SINGLE emphasis word inside a Gotham headline, in moderation,
   HEADLINES ONLY — never body, never lowercase, never a sentence flourish. */
.punch{font-family:var(--font-punch);font-style:italic;text-transform:uppercase;
  font-weight:var(--fw-book);font-feature-settings:"kern" 1;display:inline-block}

.eyebrow{font-size:12px;font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--muted)}
.t-display{font-family:var(--font-sans);font-weight:var(--fw-light);font-size:var(--t-display);
  line-height:.96;letter-spacing:-.015em;text-transform:uppercase;color:var(--ink);padding-bottom:.04em}
.t-h1{font-family:var(--font-sans);font-weight:var(--fw-light);font-size:var(--t-h1);
  line-height:var(--lh-head);letter-spacing:-.01em;color:var(--ink);padding-bottom:.04em}
.t-h2{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:var(--t-h2);
  line-height:var(--lh-head);letter-spacing:-.01em;color:var(--ink);padding-bottom:.04em}
.t-h3{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:var(--t-h3);
  line-height:1.2;color:var(--ink)}
.lead{font-size:var(--t-lead);color:var(--body);line-height:1.5}
.kicker{font-size:12px;font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.sec-head{margin-bottom:clamp(26px,3.2vw,42px);max-width:62ch}

/* =================== 5 · COMPONENTS ===================================== */

/* 5.1 NAVIGATION — light, black-box logo, UPPERCASE items */
.nav{background:var(--surface);color:var(--ink);position:sticky;top:0;z-index:var(--z-nav);
  border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;min-height:var(--nav-h);gap:clamp(14px,2.4vw,32px)}
.logo{display:inline-block;flex:none;background:#000 url(../img/brand/bond-street-white.png) center/94px auto no-repeat;
  width:128px;height:38px;font-size:0;line-height:0;white-space:nowrap}
.logo small{display:none}
.nav__links{display:flex;gap:4px}
.nav__links a{position:relative;color:var(--ink);font-size:12px;font-weight:var(--fw-bold);letter-spacing:.12em;
  text-transform:uppercase;padding:10px 13px}
.nav__links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:center;transition:transform var(--dur-fast) var(--ease)}
.nav__links a:hover::after,.nav__links a:focus-visible::after,.nav__links a.is-current::after{transform:scaleX(1)}
.nav__util{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__util .u{color:var(--muted);font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.1em;text-transform:uppercase;transition:color var(--dur-fast) var(--ease)}
.nav__util .u:hover,.nav__util .u:focus-visible{color:var(--accent)}
/* D317 - the label is all-caps, so the glyphs sit high in the line box and the
   descender space below goes unused: optically 1.5px low. Flex-centring the line
   box and nudging it up by 1px balances the ink inside the keyline. */
.nav__burger{display:none;margin-left:auto;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 11px;font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.1em;text-transform:uppercase;min-height:44px;display:none;align-items:center;justify-content:center;line-height:1;padding-top:9px;padding-bottom:7px}

/* 5.2 BUTTONS + the ARROW RULE (A11Y-4)
   .btn--primary  ink solid    .btn--secondary  ink outline   .btn--accent teal
   Outbound ACTION links whose label isn't self-evidently external take a
   VISIBLE ↗ via .lnk-ext (+ a .vh "(opens in a new tab…)" for screen readers).
   Internal links take a plain → via .lnk-int. NEVER both; never ↗ on a URL,
   mailto:/tel:, or "on X's site" phrasing. */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  min-height:48px;padding:0 22px;border-radius:var(--r);cursor:pointer;border:1.5px solid transparent;
  font-family:var(--font-sans);text-align:center;justify-content:center}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:var(--accent)}
.btn--secondary{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--secondary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--accent{background:var(--accent);color:var(--on-accent)}
.btn--accent:hover{background:var(--accent-deep)}
.btn--onaccent{background:#fff;color:var(--ink)}
.btn--sm{min-height:40px;padding:0 16px;font-size:13px}
/* D303 - external-link icon: a box with an arrow leaving it reads as "another website"
   far more clearly than a bare diagonal arrow, and being an SVG mask it cannot be
   substituted with an emoji glyph on mobile. Colour follows the link via currentColor. */
.lnk-ext::after{content:"";display:inline-block;width:.72em;height:.72em;margin-left:.34em;
  vertical-align:-.03em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 9.5V13a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 2 13V5a1.5 1.5 0 0 1 1.5-1.5H7'/%3E%3Cpath d='M10.5 1.5H14.5V5.5'/%3E%3Cpath d='M14.5 1.5L7.5 8.5'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 9.5V13a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 2 13V5a1.5 1.5 0 0 1 1.5-1.5H7'/%3E%3Cpath d='M10.5 1.5H14.5V5.5'/%3E%3Cpath d='M14.5 1.5L7.5 8.5'/%3E%3C/svg%3E") no-repeat center/contain}   /* ↗ outbound */
.lnk-int::after{content:"\2192";margin-left:.35em}                  /* → internal */
.lnk{color:var(--ink);font-weight:600;border-bottom:2px solid var(--accent);
  padding-bottom:2px}
.lnk-accent{color:var(--accent);font-weight:600}

/* 5.3 HERO + the standard SCRIM (A11Y-9) — ONE scrim system site-wide */
.hero{position:relative;overflow:hidden;color:#fff}
.scrim{position:absolute;inset:0;z-index:var(--z-scrim);pointer-events:none;
  /* bottom-aligned page heroes (tenant · hubs · Commercial · Plan Your Visit) */
  background:linear-gradient(0deg,rgba(var(--scrim-rgb),.80) 0%,
    rgba(var(--scrim-rgb),.42) 42%,rgba(var(--scrim-rgb),0) 78%)}
.scrim--center{background:linear-gradient(180deg,rgba(var(--scrim-rgb),.32) 0%,
    rgba(var(--scrim-rgb),.52) 100%)}   /* centred landing hero (homepage) */
.hero__inner{position:relative;z-index:var(--z-overlay)}
/* page hero (bottom-aligned band used across inner pages) */
.pagehero{position:relative;border-radius:var(--r);overflow:hidden;display:flex;
  align-items:flex-end;color:#fff;min-height:clamp(220px,32vw,300px);
  width:100%;max-width:100%} /* Sprint 2 MOB-1: pin width so aspect-ratio+min-height
  can't transfer size to width and blow the viewport on narrow screens */
.pagehero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pagehero .hero__inner{padding:clamp(20px,3vw,28px);width:100%}
.pagehero h1{font-family:var(--font-sans);font-weight:var(--fw-light);
  font-size:var(--t-h1);text-transform:uppercase;line-height:var(--lh-head);padding-bottom:.04em}
.pagehero .stand{font-size:var(--t-lead);color:rgba(255,255,255,.94);margin-top:8px;max-width:58ch;line-height:1.5}
@media(max-height:780px) and (min-width:761px){.pagehero{min-height:240px}}

/* 5.4 BREADCRUMB (mirrors BreadcrumbList JSON-LD, SEO-12) */
.crumb{font-size:12px;color:var(--muted);margin:18px 0 10px}
.crumb a:hover{color:var(--ink)}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{margin:0 6px;color:var(--line-strong)}

/* 5.5 SEARCH field (SRCH-4 hint copy lives in HTML) */
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:var(--r);padding:0 14px;background:var(--surface);min-height:48px}
.search input{border:none;outline:none;font:inherit;font-size:13px;flex:1;color:var(--ink);background:none}
.search input::placeholder{color:var(--muted)}
.search .mag{color:var(--muted)}

/* 5.6 DESTINATION CARD (photo on clean surface, no colour wash) */
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column}
.dcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
/* D389 - non-linking directory card (the Coffee-Bike has no tenant page): no
   hover lift, so a card that goes nowhere does not read as clickable */
.dcard--static:hover{transform:none;box-shadow:none}
.mcard:hover{transform:translateY(-5px)!important;box-shadow:var(--shadow-2)} /* !important: .mcard also carries .reveal for scroll-in; body.tier-rich .reveal.done{transform:none} outranks a plain .mcard:hover on specificity and would otherwise cancel the lift once the reveal finishes */
.dcard .dcard__b{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.dcard h3{font-family:var(--font-sans);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:6px}
.dcard p{font-size:13px;color:var(--body);line-height:1.5;flex:1}
.dcard .go{margin-top:14px;font-size:11px;font-weight:var(--fw-bold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.dcard .go::after{content:"\2192";color:var(--accent);margin-left:7px}
/* D308 - venues with current offers carry a badge on their card; a single jump link
   sits under the filters. The badge is a label, not a link, so each card keeps one destination. */
/* D309 - badge must separate from any photograph. No single flat colour clears 3:1
   across the range of card imagery, so: white fill for dark photos, a defined ink edge
   for light photos, and a shadow for depth. Ink on white text is 18.66:1. */
.offers-flag{position:absolute;top:11px;left:11px;z-index:2;
  padding:5px 11px 4px;border-radius:3px;
  background:#fff;color:var(--ink);border:1px solid rgba(21,18,15,.9);
  font-size:11px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;
  line-height:1.3;box-shadow:0 2px 10px rgba(15,14,13,.35);pointer-events:none}
.offers-jump{margin:14px 0 0;font-size:13.5px;color:var(--body)}

/* D304 - card-style links that open a third-party site swap the internal arrow for the
   external-link icon. Attribute-driven, so any future target=_blank card is covered. */
a[target="_blank"] .go::after,
a[target="_blank"] .offers__go::after{
  content:"";display:inline-block;width:.92em;height:.92em;margin-left:.45em;
  vertical-align:-.12em;background-color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 9.5V13a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 2 13V5a1.5 1.5 0 0 1 1.5-1.5H7'/%3E%3Cpath d='M10.5 1.5H14.5V5.5'/%3E%3Cpath d='M14.5 1.5L7.5 8.5'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 9.5V13a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 2 13V5a1.5 1.5 0 0 1 1.5-1.5H7'/%3E%3Cpath d='M10.5 1.5H14.5V5.5'/%3E%3Cpath d='M14.5 1.5L7.5 8.5'/%3E%3C/svg%3E") no-repeat center/contain}


/* 5.7 CATEGORY TILE (overlay label carries meaning; image alt="") */
.tile{position:relative;border-radius:var(--r);overflow:hidden;display:flex;
  align-items:flex-end;color:#fff;min-height:120px;cursor:pointer;
  border:0;padding:0;background:none;font:inherit;text-align:inherit;
  -webkit-appearance:none;appearance:none} /* button element: UA border/padding reset */
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tile .tile__grad{position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(var(--scrim-rgb),.72),transparent 70%)}
.tile .tile__l{position:relative;z-index:2;padding:11px 13px;font-family:var(--font-sans);
  font-weight:600;font-size:14px;width:100%}
.tile:hover{transform:translateY(-3px)}

/* 5.8 FEATURED-STORE CARD (logo masthead slot + storefront) */
/* logo slot: neutral fixed box for a tenant/brand logo not yet supplied.
   At build: drop a vector/transparent-PNG logo (one-colour treatment) in here. */
.logoslot{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;min-height:34px;padding:4px 10px;
  font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.02em;color:var(--muted);text-align:center}
body.client .logoslot,body:not(.qa) .logoslot{border-style:solid;border-color:var(--line)}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
.fcard .fcard__b{padding:13px 15px 15px}
.fcard h3{font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:3px}
.fcard p{font-size:12px;color:var(--body);line-height:1.45}

/* 5.9 MISSION CARD (time-of-day tag) */
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.mcard .tag{position:absolute;left:9px;top:9px;z-index:2;font-size:9px;font-weight:var(--fw-bold);
  letter-spacing:.07em;text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--ink);
  padding:4px 9px;border-radius:var(--r-pill)}
.mcard .mcard__b{padding:13px 14px 16px}
.mcard h3{font-family:var(--font-sans);font-weight:600;font-size:14.5px;color:var(--ink);
  line-height:1.15;margin-bottom:5px}
.mcard p{font-size:11.5px;color:var(--body);line-height:1.42}

/* 5.10 PROOF / "GOOD TO KNOW" ICON ROW (icons, not photo thumbnails) */
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
.fact{display:flex;gap:14px;align-items:flex-start}
.fact .fi{width:46px;height:46px;flex:none;border-radius:50%;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center}
.fact .fi svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.fact .pt{font-family:var(--font-sans);font-weight:600;font-size:16px;color:var(--ink);
  margin-bottom:5px;line-height:1.18}
.fact .pd{font-size:13px;color:var(--body);line-height:1.45}

/* 5.11 TENANT-NAME PILL */
.pill{font-family:var(--font-sans);font-weight:600;font-size:clamp(14px,1.4vw,16px);
  color:var(--ink);border:1.5px solid var(--line-strong);border-radius:var(--r-pill);
  padding:11px 20px;line-height:1.1;background:var(--surface)}
.pill small{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.pill--onband{color:#fff;border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.06)}
.pill--onband small{color:rgba(255,255,255,.8)}
/* Pill used as an internal-hub link (e.g. the Things to Do practical-links row). */
a.pill{text-decoration:none;display:inline-block}
a.pill:hover{border-color:var(--ink);background:var(--surface-alt)}

/* 5.12 COLOUR-BAND MODULE (the teal "stores worth the trip" pattern) */
.band{background:var(--band-teal);color:#fff}
.band .band__in{padding:clamp(44px,5.4vw,76px) 0}
.band .kicker{color:rgba(255,255,255,.88)}
.band h2{font-family:var(--font-sans);font-weight:var(--fw-light);font-size:clamp(34px,5vw,68px);
  line-height:1;text-transform:uppercase;letter-spacing:-.01em;max-width:18ch;padding-bottom:.04em}
.band h2 .l1,.band h2 .l2{display:block}
.band h2 .punch{color:#fff}
.band p{margin-top:18px;max-width:46ch;font-size:var(--t-lead);color:#fff;line-height:1.5}
.band .pills{margin-top:clamp(26px,3vw,36px);display:flex;flex-wrap:wrap;gap:11px;align-items:center}


/* 5.12b ANCHOR SCENE — the colour-band module (5.12) applied as a mission
   anchor (the R-slots). Full-bleed escape from the read column; the inner
   content returns to the page grid. Copy is untouched protocopy. */
.band--anchor{margin:clamp(44px,5.5vw,72px) calc(50% - 50vw) 0}
.band--anchor .band__in{max-width:var(--maxw);margin:0 auto;
  padding:clamp(44px,5.4vw,76px) var(--pad-x)}

/* 5.13 TENANT PATTERN (TEN-1…8) */
.tenant-hero{position:relative;border-radius:var(--r);overflow:hidden;display:flex;
  align-items:flex-end;min-height:clamp(220px,30vw,300px);
  width:100%;max-width:100%} /* MOB-1, as .pagehero */
.tenant-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* ground tint so a pale/near-white storefront still gives the white masthead a
   crisp edge and keeps any text AA — applied to every tenant hero (P2-6 fix) */
.tenant-hero::after{content:"";position:absolute;inset:0;z-index:var(--z-scrim);pointer-events:none;
  background:linear-gradient(120deg,rgba(var(--scrim-rgb),.34),rgba(var(--scrim-rgb),.12) 60%,rgba(var(--scrim-rgb),.30))}
.masthead{position:relative;z-index:var(--z-overlay);margin:14px;background:#fff;border-radius:var(--r);
  padding:12px 16px;display:flex;align-items:center;min-height:54px;min-width:160px;box-shadow:var(--shadow-mast);border:1px solid rgba(21,18,15,.08)}
.masthead img{height:34px;width:auto;display:block}      /* fixed-height neutral box (TEN-2) */
.tcat{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:14px 0 0}
.tintro{font-size:var(--t-lead);color:var(--body);line-height:1.6;margin-top:6px;max-width:70ch}
.facts-strip{display:flex;flex-wrap:wrap;background:var(--surface-alt);border:1px solid var(--line);
  border-radius:var(--r);margin-top:16px;overflow:hidden}
.facts-strip .fc{flex:1 1 150px;padding:11px 14px;border-right:1px solid var(--line)}
.facts-strip .fc:last-child{border-right:0}
.facts-strip .k{font-size:10px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:2px;line-height:1.3}   /* .k always block (TEN-3) */
.facts-strip .v{font-size:13px;color:var(--ink);font-weight:600;display:block;line-height:1.35}
.hours-line{margin-top:12px;font-size:13px;color:var(--body)}
.hours-line a{color:var(--accent);font-weight:600}
.contact{margin-top:12px;display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 16px}        /* whole block hides if no method (TEN-4) */
.contact .cti{margin:4px 30px 4px 0}
.contact .cti .k{font-size:10px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:1px}
.contact .cti a{font-size:13.5px;color:var(--accent);font-weight:600}
/* JL feature box (What's On, JL-1) */
.feature{margin-top:18px;background:var(--accent);color:#fff;border-radius:var(--r-md);
  padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.feature .feat-x{flex:1 1 320px}
.feature .feat-k{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px}
.feature .feat-t{font-size:14px;color:rgba(255,255,255,.92);line-height:1.5}
/* brands + services directory (TEN-8) */
.brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.brands .brand{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.svccat h5{font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin:14px 0 7px}
.svcrow{display:flex;flex-wrap:wrap;gap:8px}
.svctile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 12px;font-size:12.5px;color:var(--ink);font-weight:600}
.svctile .lvl{display:inline-block;font-size:9.5px;font-weight:var(--fw-bold);color:var(--muted);
  background:var(--surface-alt);border-radius:var(--r-sm);padding:1px 6px;margin-left:6px}

/* 5.14 TARIFF TABLE — hardened (A11Y-2): caption, thead, th scope */
.tariff{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;font-size:14px;margin-top:8px}
.tariff caption{text-align:left;font-weight:600;color:var(--ink);padding:12px 16px;
  background:var(--surface-alt);border-bottom:1px solid var(--line)}
.tariff th,.tariff td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.tariff thead th{background:var(--surface-alt);color:var(--ink);font-weight:600;font-size:12.5px}
.tariff th[scope=row]{font-weight:600;color:var(--ink)}
.tariff tbody tr:last-child td,.tariff tbody tr:last-child th{border-bottom:0}

/* 5.15 VISIBLE ANSWER BLOCK (SEO-20) — plain headings+paras, NOT FAQ schema */
.answer{margin-top:var(--s-6)}
.answer h2,.answer h3{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);
  color:var(--ink);margin-top:var(--s-6)}
.answer p{font-size:14.5px;color:var(--body);line-height:1.6;margin-top:6px;max-width:80ch}
.answer p .declar{color:var(--ink);font-weight:600}  /* the short declarative lead */

/* 5.16 NOTICE / honesty block (A11Y-7) + to-confirm flag (GOV-2) */
.notice{background:var(--surface-alt);border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:14px 16px;margin-top:8px}
.notice h3{font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:5px}
.notice p{font-size:13.5px;color:var(--body);line-height:1.5;max-width:80ch}
.notice p+p{margin-top:8px}
.tc{border:1px dashed var(--flag);background:#FBF4E8;border-radius:var(--r-sm);padding:11px 13px;
  margin-top:10px;font-size:12.5px;color:#7a5a1e;line-height:1.5}
.tc b{color:var(--flag);text-transform:uppercase;letter-spacing:.04em;font-size:10px;display:block;margin-bottom:3px}

/* 5.16b QUICK-GLANCE FACT CARDS — at-a-glance facts on utility pages (e.g. the
   Parking page). Crawlable text; value emphasised, small label beneath. */
.qglance{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.qglance .qf{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;background:var(--surface)}
.qglance .qf b{display:block;font-family:var(--font-sans);font-weight:600;font-size:16px;color:var(--ink);line-height:1.15}
.qglance .qf span{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:4px}
@media(max-width:760px){.qglance{grid-template-columns:1fr 1fr}}

/* 5.17 FACILITIES list (Accessibility) */
.fac{margin-top:6px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.fac .fr{display:flex;gap:14px;align-items:baseline;padding:12px 15px;border-top:1px solid var(--line);flex-wrap:wrap}
.fac .fr:first-child{border-top:none}
.fac .fr .fn{font-weight:600;color:var(--ink);font-size:14px;min-width:150px}
.fac .fr .floc{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:3px 8px;border-radius:var(--r-sm);white-space:nowrap}
.fac .fr .fnote{font-size:13px;color:var(--body);flex:1;min-width:200px}

/* 5.18 CHIPS (dog-friendly lists, suggestions) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 13px;white-space:nowrap}
.chip .dm{color:var(--accent);font-weight:600}

/* 5.18b TAG FILTER BAR — progressive directory filters (Food and Drink). Chips are
   real aria-pressed buttons; the static directory works with JavaScript disabled. */
.fbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;scroll-margin-top:96px}
.fchip{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-pill);
  padding:8px 15px;cursor:pointer;line-height:1.1}
.fchip:hover{border-color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.fchip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fclear{background:none;border:0;color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:6px 4px}
.fclear[hidden]{display:none}
/* [hidden] must beat the card's own display rule when filtering */
#fd-directory .dcard[hidden]{display:none}
/* D72 — static metadata must not dress as controls: pills are for chips only.
   Venue meta = one quiet line: "Italian · Riverside · Kids menu · Dogs welcome" */
.dcard .cl{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dcard .rv,.dcard .bdg{display:inline-block;white-space:nowrap;margin-left:0;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;border:0;border-radius:0;padding:0;vertical-align:baseline}
.dcard .rv::before,.dcard .bdg::before{content:"\00a0\00b7\00a0";color:var(--muted)}

/* 5.19 PROOF STAT BAR (B2B / Commercial ONLY — never on consumer pages, GOV-4) */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:18px}
.statbar .pf{background:var(--surface-alt);padding:16px 15px}
.statbar .n{display:block;font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:23px;
  color:var(--ink);line-height:1.05;margin-bottom:5px}
.statbar .l{display:block;font-size:11px;color:var(--body);line-height:1.35}

/* 5.20 SYSTEM STATES (ST-1…9) */
.empty-state{text-align:center;padding:22px;background:var(--surface-alt);border-radius:var(--r)}
.empty-state .es-h{font-family:var(--font-sans);font-weight:600;font-size:16px;color:var(--ink)}
.empty-state .es-s{font-size:13px;color:var(--body);margin-top:4px}
.skeleton{height:13px;border-radius:var(--r-sm);background:linear-gradient(90deg,#eceae5,#f7f5f1,#eceae5);
  background-size:200% 100%;animation:bsSheen 1.25s linear infinite;margin-top:9px}
.skeleton.t{height:18px;width:45%}
@keyframes bsSheen{0%{background-position:200% 0}100%{background-position:-200% 0}}
.az-hdr{position:sticky;top:var(--nav-h);background:var(--accent);color:#fff;font-family:var(--font-sans);
  font-weight:var(--fw-bold);font-size:13px;padding:4px 10px;border-radius:var(--r-sm);z-index:var(--z-base)}
.az-item{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px}


/* 4.x IN-COPY LINK GRAMMAR (Sprint 2 review fix): links inside running prose
   must read as links. Scoped to direct children of paragraphs and list items
   in main content; component anchors (pills, buttons, cards, .go) untouched. */
main p > a:not(.pill):not(.btn):not(.go),
main li > a:not(.pill):not(.btn){color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}
main p > a:not(.pill):not(.btn):not(.go):hover,
main li > a:not(.pill):not(.btn):hover{color:var(--accent-deep)}
/* the designed link components carry the same base treatment everywhere
   (they previously had only the arrow glyphs, so read as plain text) */
.lnk-int:not(.btn):not(.pill),.lnk-ext:not(.btn):not(.pill){color:var(--accent);
  font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lnk-int:not(.btn):not(.pill):hover,.lnk-ext:not(.btn):not(.pill):hover{color:var(--accent-deep)}
/* arrow glyphs sit outside the underline (no broken-underline gap) */
.lnk-int::after,.lnk-ext::after{display:inline-block;text-decoration:none}
.band p > a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* 5.21 FOOTER v5 — CANONICAL (Sprint 1.1: one footer, swept site-wide).
   Left column = logo · strapline · partnership ONLY. The prose shop-hours
   sentence is REMOVED (hours live on Opening Times, linked in the column);
   the phone line is REMOVED (Contact owns the centre number, linked in the
   column). The About column is retired: Privacy/Terms move to the bottom
   bar; social becomes the Follow column. Bottom bar is ONE aligned row —
   copyright · legal group (Privacy · Terms · Cookie settings as equal
   peers) · build stamp (QA-only: hidden in production, shown with #qa). */
/* D390 - sticky footer. 46 pages (every tenant detail page, 404, opening-times,
   getting-here and others) are shorter than a tall viewport, so the document
   ended above the window edge and the white canvas showed as a strip below the
   warm footer. The body becomes a full-height column and the footer takes
   margin-top:auto, so on short pages it sits on the bottom edge of the window
   and the spare space stays inside the white content area. Tall pages are
   unaffected (min-height only). The homepage carries its own copy of both
   rules in its embedded sheet. */
body{min-height:100vh;display:flex;flex-direction:column}
.footer{margin-top:auto}
.footer{background:var(--surface-alt);color:var(--body);padding:clamp(44px,5vw,54px) 0 0;
  border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .8fr;gap:clamp(26px,3.4vw,40px);
  padding-bottom:clamp(34px,4vw,44px)}
.footer h2{font-family:var(--font-sans);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin-bottom:16px}
.footer__grid a{color:var(--body);font-size:14px;display:block;margin-bottom:13px}
.footer__grid a:hover{color:var(--accent)}
.footer .strap{font-size:14px;color:var(--body);margin-top:18px;max-width:34ch;line-height:1.55}
.footer__logo{display:block;background:#000 url(../img/brand/bond-street-white.png) center/126px auto no-repeat;
  width:170px;height:48px;font-size:0;line-height:0;white-space:nowrap}
.footer__logo small{display:none}
.cfy{margin-top:30px}
.cfy .cfy-cap{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.cfy img{height:34px;width:auto;display:block}
/* D290 — Chelmsford For You footer logo is a link (opens in a new tab) */
.cfy-link{display:inline-block;text-decoration:none;border:0;line-height:0;
  transition:opacity .18s ease}
.cfy-link:hover,.cfy-link:focus-visible{opacity:.72}
.cfy-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.cfy-logo-fallback{display:none;align-items:center;justify-content:center;background:var(--surface);
  border:1px dashed var(--line-strong);color:var(--muted);font-size:9px;font-weight:var(--fw-bold);
  letter-spacing:.05em;padding:12px 16px;border-radius:var(--r-sm);width:170px;height:45px;
  line-height:1.35;text-align:center}
.social{display:flex;gap:12px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line-strong);border-radius:50%;margin:0;color:var(--ink);background:var(--surface)}
.social a:hover{border-color:var(--accent);color:var(--accent)}
.social svg{width:17px;height:17px;fill:currentColor}
.footer__bar{border-top:1px solid var(--line);padding:18px 0;display:flex;align-items:center;gap:22px;
  font-size:12.5px;color:var(--muted)}
.footer__bar .copy{color:var(--body)}
.footer__bar .flinks{display:flex;gap:22px}
.footer__bar .flinks a{display:inline;margin:0;color:var(--body);font-size:12.5px}
.footer__bar .flinks a:hover{color:var(--accent)}
.footer .stamp{display:none}
body.show-qa .footer .stamp{display:inline;margin-left:auto;font-size:11px;color:var(--flag);font-style:italic}
@media(max-width:880px){.footer__bar{flex-wrap:wrap;gap:14px}}

/* 5.21b PAGE-END JUNCTION (Sprint 1.1) — exactly 96px between the last
   content module and the footer on EVERY page. Tail sections' variable
   bottom paddings are zeroed in markup; main supplies the single token. */
main{padding-bottom:var(--junction)}

/* 5.21c ANSWER-BLOCK RULED GRAMMAR (Sprint 1.1) — the stacked answer runs
   on the cinema and food page tails open with a hairline rule. */
.answer--ruled{border-top:1px solid var(--line);padding-top:clamp(18px,2.2vw,26px)}
.answer--ruled h2{margin-top:0}

/* 5.22 QA CHROME — the per-page QA view toggle + media-slot labels + notes.
   QA elements are HIDDEN by default and shown only in QA view (body.qa). */
/* QA toolbar (dev/QA chrome) is HIDDEN in the client/production view; it is shown
   only when the page is opened with #qa (or ?qa) — p2.js adds body.show-qa. So the
   dev bar never ships to or appears in the live view, but reviewers keep the toggle. */
.qa-toolbar{display:none}
body.show-qa .qa-toolbar{position:sticky;top:0;z-index:var(--z-toolbar);background:#100e0c;color:#fff;
  display:flex;align-items:center;gap:14px;padding:8px clamp(14px,3vw,26px);font-size:11px}
.qa-toolbar .id{font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.qa-toolbar .id b{color:#E8a23a}
.qa-toolbar .dim{color:rgba(255,255,255,.55)}
.qa-toolbar .sp{margin-left:auto}
.qa-toolbar button{font:inherit;font-size:11px;font-weight:600;letter-spacing:.04em;color:#fff;
  background:none;border:1px solid rgba(255,255,255,.32);padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;min-height:32px}
.qa-toolbar button:hover{background:rgba(255,255,255,.12)}
.slot{position:absolute;left:10px;top:10px;z-index:var(--z-overlay);background:rgba(22,18,15,.82);
  color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;padding:4px 8px;border-radius:3px;
  line-height:1.4;max-width:90%;display:none}
body.qa .slot{display:block}
.qa-note{display:none;background:#fffbe9;border:1px solid #efe1a8;border-left:4px solid #E0A21E;
  color:#5b4e1f;font-size:12.5px;line-height:1.55;padding:12px 16px;border-radius:var(--r);margin:18px 0}
body.qa .qa-note{display:block}
.qa-note b{color:#3f3614}
.qa-note .flag{color:var(--flag);font-weight:700}
.qa-note ul{margin:6px 0 0 18px}
.qa-note li{margin-bottom:3px}

/* 5.23 TRIP-MISSION MODULES (content cluster, /things-to-do/{slug})
   Shared styles for the modular trip-mission template. Built first for the
   gold-standard "An Afternoon by the River"; the other four missions reuse
   these exact classes. No page-local one-offs. */

/* River hero: a video-capable .pagehero with a TITLE-CASE H1 (trip missions
   read as editorial, not the uppercase destination heroes). Poster-first,
   contained (not full-bleed); video sits behind the standard bottom scrim. */

/* Proof chips — scheme facts as light pills (NOT a stats bar; GOV-4). */
.proof{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 2px}
.proof span{font-size:12px;font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:7px 14px;line-height:1.1}

/* Coffee cards — three contained image + name + one line cards. */
.coffee{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}

/* D295 - venue cards on mission pages are links */
a.ccard{display:block;text-decoration:none;color:inherit}
a.ccard h3,a.ccard p,a.ccard .cl{text-decoration:none}
a.ccard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* D300 - venue cards on mission pages carry a visible View cue, matching directory cards */
a.ccard .go{display:block;margin-top:12px;font-size:11px;font-weight:var(--fw-bold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
a.ccard .go::after{content:"\2192";color:var(--accent);margin-left:7px}
a.ccard:hover .go{color:var(--accent-deep)}
/* D302 - cards that contain their own links stay non-anchor; the View cue becomes a real link */
article.ccard .go{display:inline-block;margin-top:12px;font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none}
article.ccard .go::after{content:"\2192";color:var(--accent);margin-left:7px}
article.ccard .go:hover{color:var(--accent-deep)}


.ccard .ccard__b{padding:15px 17px 18px}
.ccard h3{font-family:var(--font-sans);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:5px}
.ccard p{font-size:13.5px;color:var(--body);line-height:1.5}

/* Chooser tiles — label + venue + one line; used for shops and lunch choosers.
   Restrained, on-system; not a busy dashboard. */
.chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,16px)}
.ctile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;display:flex;flex-direction:column}
.ctile .cl{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px}
.ctile h3{font-family:var(--font-sans);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:5px}
.ctile p{font-size:13.5px;color:var(--body);line-height:1.5}

/* Good to know — SEO-20 answer block in a contained card (parchment header,
   question heading + one declarative lead + detail, generous spacing). Plain
   headings/paragraphs, never FAQPage. */
.gtk{margin-top:var(--s-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.gtk__top{background:var(--surface-alt);padding:16px 22px;border-bottom:1px solid var(--line)}
.gtk__top h2{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);color:var(--ink)}
.gtk .qblk{padding:20px 22px;border-top:1px solid var(--line)}
.gtk .qblk:first-of-type{border-top:none}
.gtk .qblk h3{font-family:var(--font-sans);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:8px}
.gtk .qblk p{font-size:14.5px;color:var(--body);line-height:1.6;max-width:80ch}
.gtk .qblk p .declar{color:var(--ink);font-weight:600}

/* Held [CONFIRM] clause: out of the live reading path (Client view), shown only
   in QA view with a provisional muted/dashed treatment so it is never presented
   as fact. Pairs with the standing GOV "verify before publish" rule. */
.confirm{display:none}
body.qa .confirm{display:inline;color:var(--flag);border-bottom:1px dashed var(--flag);
  padding-bottom:1px}

/* image placeholder treatment (subtle stripe + monospace label) — used where
   final art-directed assets are not yet supplied (P2-6 art direction). */
.imgph{background:repeating-linear-gradient(45deg,#EDE7DC,#EDE7DC 12px,#E5DDCE 12px,#E5DDCE 24px)}

/* 5.27 SHOPS HUB — quick-find spine, derived count line, A–Z directory, cross-link band.
   Reuses .fchip/.fbar (category chips), .tile (category tiles), .fcard (featured),
   .empty-state (ST-01/ST-02), a.pill (visit links). */
.qf{background:var(--surface-alt); /* non-sticky per rethink adjudication C — a second sticky band under the 71px header spends scarce mobile viewport */
  scroll-margin-top:96px;
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;margin-top:16px}
.qf__search{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:11px 13px;min-height:44px}
.qf__search svg{width:18px;height:18px;flex:none;stroke:var(--accent);fill:none;stroke-width:2}
.qf__search input{border:0;outline:0;width:100%;font-family:var(--font-sans);font-size:15px;color:var(--ink);background:transparent}
.qf__search input::placeholder{color:var(--muted)}
.qf .fbar{margin-top:11px}
.qf__jump{margin-top:11px;font-size:12.5px;color:var(--muted)}
.qf__jump a{color:var(--accent);font-weight:600}
.tile[aria-pressed="true"]{outline:2.5px solid var(--accent);outline-offset:2px}
.countline{font-size:15px;font-weight:600;color:var(--accent);margin:13px 0 0}
/* D384 - field CLS 0.145 attributed to #countLine (Cloudflare RUM). Measured:
   the line is 24px unfiltered and 48px in every filtered state below 516px,
   because the filtered wording plus its clear link wraps to two lines. A hash
   deep-link (/shops#dog etc.) applies the filter after first paint with no
   user input, so the rewrite doubled the line's height and shifted the whole
   directory below it. Two lines are reserved at the 540 breakpoint so the
   element occupies its final space before any value is written. Wider
   viewports never wrap (verified by 4px sweep; longest chip state fits from
   516px up). fdcount on food-and-drink shares the class; its strings are
   shorter and never wrap, and the reservation is harmless there. */
@media(max-width:540px){.countline{min-height:48px}}
.countline a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;margin-left:6px}
.countline .term{font-style:italic;color:var(--accent)}
.azwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(16px,2vw,22px)}
.azsec{font-family:var(--font-sans);font-weight:700;font-size:15px;color:var(--accent);margin:16px 0 4px;padding-top:6px;scroll-margin-top:150px}
.azrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.azrow:last-child{border-bottom:0}
.azrow .nm{font-family:var(--font-sans);font-weight:600;color:var(--ink);font-size:15px;flex:1 1 auto}
.azrow .tag{font-size:11.5px;color:var(--muted);background:var(--surface-alt);border:1px solid var(--line);padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap}
.azrow .go{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap;min-height:30px;display:inline-flex;align-items:center}
.azrow:hover{background:var(--surface-alt)}
.azrow:hover .go{color:var(--accent-deep)}
.xband{background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-top:18px;font-size:14px;color:var(--body)}
.xband a{color:var(--accent);font-weight:600}

/* 5.28 CONTACT CARD — structured channel block + static-map anchor (Contact page).
   Channel label small/muted, the actionable detail larger; map confirms location. */
.contactcard{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,2.4vw,30px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(18px,2.4vw,28px);margin-top:18px;align-items:stretch}
.cc-channels{display:flex;flex-direction:column;gap:16px}
.cc-ch{display:flex;flex-direction:column;gap:3px}
.cc-ch .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cc-ch .v{font-family:var(--font-sans);font-weight:600;font-size:clamp(17px,2vw,20px);color:var(--ink);line-height:1.2}
.cc-ch .v a{color:var(--ink)}
.cc-ch .v a:hover{color:var(--accent)}
.cc-ch .sub{font-size:13px;color:var(--body);line-height:1.45}
.cc-ch .sub a{color:var(--accent)}
.cc-map{position:relative;border-radius:var(--r);overflow:hidden;min-height:200px;display:block}
.cc-map .imgph{position:absolute;inset:0}
.cc-map .cc-pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap;box-shadow:var(--shadow-1)}
.cc-map .cc-dir{position:absolute;left:12px;bottom:12px;background:var(--surface);color:var(--accent);
  font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:var(--r-pill);box-shadow:var(--shadow-1)}
@media(max-width:680px){.contactcard{grid-template-columns:1fr}.cc-map{min-height:170px}}
@media(max-width:760px){
  /* D316 - was a wrapping flexbox, so a long description pushed the category tag
     onto its own line and the rows read raggedly. A two-column grid pins the tag
     to the right at the top of the row whatever the description length; the
     description wraps inside its own column, and View shop spans both below. */
  /* D335: three columns. Name and description left, category tag right, chevron on
     the far right and vertically centred, which is the tappable-row convention. */
  .azrow{display:grid;grid-template-columns:1fr auto 18px;gap:6px 12px;align-items:start}
  .azrow .nm{grid-column:1;grid-row:1;min-width:0}
  .azrow .tag{grid-column:2;grid-row:1;align-self:start;margin-top:1px}
  .azrow .go{grid-column:3;grid-row:1;align-self:center;margin-top:2px}
}

/* 5.24 LEGAL PAGE TEMPLATE — type-led plain content (Privacy, Terms). No hero,
   no imagery; generous reading measure; shared by both pages for consistency. */
.legal{max-width:74ch;margin-top:clamp(18px,2.4vw,30px)}
.legal .legal__updated{font-size:13px;color:var(--muted);margin:10px 0 0}
.legal__intro{font-size:var(--t-lead);color:var(--body);line-height:1.55;margin-top:14px;max-width:74ch}
.legal h2{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);color:var(--ink);
  line-height:1.2;margin-top:clamp(28px,3.2vw,40px)}
.legal h2:first-of-type{margin-top:clamp(22px,2.6vw,32px)}
.legal p{font-size:15px;color:var(--body);line-height:1.65;margin-top:12px}
.legal ul{margin-top:12px;padding-left:22px}
.legal li{font-size:15px;color:var(--body);line-height:1.6;margin-top:8px}
.legal a{color:var(--accent);text-underline-offset:2px}
.legal a:hover{color:var(--accent-deep)}
.legal .legal__contact{margin-top:14px}
.legal .legal__contact p{margin-top:4px}

/* 5.25 COOKIE CONSENT — first-layer banner + preferences dialog. Calm bar, not a
   loud overlay; equal-prominence Accept/Reject; default-denied analytics. Hidden
   until JS shows it (fail-closed: no JS, no analytics, no banner blocking). */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-overlay,9000);
  background:var(--surface);border-top:1px solid var(--line-strong);box-shadow:0 -8px 30px rgba(21,18,15,.10);
  padding:clamp(16px,2vw,22px) 0;display:none}
.cc-banner[data-open]{display:block}
.cc-banner__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  display:flex;gap:clamp(16px,3vw,40px);align-items:center;flex-wrap:wrap;justify-content:space-between}
.cc-banner__txt{flex:1 1 460px;min-width:280px}
.cc-banner__txt h2{font-family:var(--font-sans);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:6px}
.cc-banner__txt p{font-size:13.5px;color:var(--body);line-height:1.55;max-width:76ch}
.cc-banner__txt a{color:var(--accent)}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* equal visual weight: Accept and Reject are the same button treatment */
.cc-actions .btn{min-height:44px}

.cc-backdrop{position:fixed;inset:0;z-index:calc(var(--z-overlay,9000) + 1);
  background:rgba(21,18,15,.42);display:none;align-items:center;justify-content:center;padding:20px}
.cc-backdrop[data-open]{display:flex}
.cc-dialog{background:var(--surface);border-radius:var(--r-md);max-width:560px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:var(--shadow-2);padding:clamp(22px,3vw,34px)}
.cc-dialog h2{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);color:var(--ink)}
.cc-dialog__intro{font-size:14px;color:var(--body);line-height:1.55;margin-top:10px}
.cc-cat{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:16px;
  display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.cc-cat__t{flex:1}
.cc-cat__t h3{font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:5px}
.cc-cat__t p{font-size:13px;color:var(--body);line-height:1.5}
.cc-dialog__btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
/* accessible toggle switch (real checkbox underneath) */
.cc-switch{position:relative;display:inline-block;width:48px;height:28px;flex:none}
.cc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cc-switch .track{position:absolute;inset:0;background:var(--line-strong);border-radius:999px;
  transition:background var(--dur-fast,.2s) var(--ease,ease)}
.cc-switch .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--dur-fast,.2s) var(--ease,ease)}
.cc-switch input:checked+.track{background:var(--accent)}
.cc-switch input:checked+.track+.knob{transform:translateX(20px)}
.cc-switch input:focus-visible+.track{outline:2px solid var(--ink);outline-offset:2px}
.cc-switch input:disabled{cursor:not-allowed}
.cc-switch.is-locked .track{background:var(--accent);opacity:.55}
@media(prefers-reduced-motion:reduce){.cc-switch .track,.cc-switch .knob{transition:none}}
@media(max-width:560px){.cc-actions{width:100%}.cc-actions .btn{flex:1 1 auto}}

/* Mission hero video chrome — ambient, contained, poster-first. Shared by every
   trip-mission hero (e.g. Dinner and a Film). TITLE-CASE H1 (editorial, not the
   uppercase destination heroes). Motion-allowed only; reduced-motion / no-JS fall
   back to the poster/still placeholder. (Phase 2: generalised from the river mission.) */

.vchrome{position:absolute;inset:0;z-index:var(--z-overlay);pointer-events:none}
.vlabel{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.vlabel .dot{width:8px;height:8px;border-radius:50%;background:#ff4848}
@media(prefers-reduced-motion:no-preference){.vlabel .dot{animation:vBlink 1.6s ease-in-out infinite}}
@keyframes vBlink{0%,100%{opacity:1}50%{opacity:.35}}
.vtime{position:absolute;right:15px;bottom:14px;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.5);letter-spacing:.02em}
.vprog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.24)}
.vprog i{display:block;height:100%;width:0;background:#fff}
@media(prefers-reduced-motion:no-preference){.vprog i{animation:vScrub 20s linear infinite}}
@keyframes vScrub{from{width:0}to{width:100%}}

/* ============================================================================
   MISSION HERO (.mhero) — Sprint 3 · 13 Jul 2026
   ONE shared two-column hero for the five trip-mission pages, matching the
   HOMEPAGE hero grammar: eyebrow-free copy on paper beside a cover-filling
   video panel, so a PORTRAIT (4:5) or SQUARE (1080x1080) master crops to the
   SAME frame the homepage already uses. Replaces the old .pagehero--river /
   .pagehero--mission 16:9 band (which cover-cropped, destroying portrait video)
   for the missions; those rules are left intact but are now unused by the five
   missions. Homepage keeps its own inline hero this pass (consolidation = Option
   B); folding index.html onto .mhero is logged as a follow-up. Canonical tokens
   only — no new colours; the mission pages carry ZERO page-local CSS.
   A11Y-9: H1 + standfirst sit on PAPER beside the video (dark-on-light, AA); the
   scrim stays on the MEDIA panel only, to keep the VIDEO label / timecode legible
   over the clip. One H1 per page. Poster-first + reduced-motion + JS-off = poster.
   ============================================================================ */
.mhero{display:grid;grid-template-columns:1.04fr .96fr;align-items:stretch}
.mhero__copy{display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding:clamp(20px,3vw,40px) clamp(32px,4vw,64px) clamp(20px,3vw,40px) 0}
.mhero__copy h1{font-family:var(--font-sans);font-weight:var(--fw-light);
  font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-.015em;
  color:var(--ink);text-wrap:balance}
.mhero .stand{margin-top:clamp(14px,1.8vw,22px);max-width:42ch;
  font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--body);text-wrap:pretty}
/* media column = the homepage .shot: a TALL panel so 4:5 / 1:1 covers with light crop */
.mhero__media{position:relative;overflow:hidden;background:var(--surface-alt);
  min-height:clamp(320px,46vw,560px)}
/* video stage — the homepage .vstage, namespaced + canonical (poster-first) */
.mstage{position:absolute;inset:0;overflow:hidden}
.mstage__film,.mstage__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mstage__film{z-index:1}
.mstage__poster{z-index:2;transition:opacity .5s ease}
.mstage.playing .mstage__poster{opacity:0;pointer-events:none}
.mstage__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--scrim-rgb),.28) 0%,rgba(var(--scrim-rgb),0) 30%,
    rgba(var(--scrim-rgb),0) 55%,rgba(var(--scrim-rgb),.5) 100%)}
.mstage__play{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;border:2px solid rgba(255,255,255,.92);
  background:rgba(var(--scrim-rgb),.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.mstage__play:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(var(--scrim-rgb),.5)}
.mstage__play svg{width:26px;height:26px;margin-left:4px;fill:#fff}
.mstage__play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,255,255,.5)}
.mstage__label{position:absolute;z-index:4;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.mstage__dot{width:8px;height:8px;border-radius:50%;background:#ff4848}
.mstage__time{position:absolute;z-index:4;left:14px;bottom:16px;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);letter-spacing:.02em}
.mstage__prog{position:absolute;z-index:4;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.28)}
.mstage__prog i{display:block;height:100%;width:30%;background:#fff}
@media(prefers-reduced-motion:no-preference){
  .mstage__poster,.mstage__film{animation:mKen 20s ease-in-out infinite alternate}
  .mstage__play::after{animation:mPulse 2.6s ease-out infinite}
  .mstage__dot{animation:mBlink 1.6s ease-in-out infinite}
  .mstage__prog i{animation:mScrub 18s linear infinite}
}
@keyframes mKen{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes mPulse{0%{transform:scale(.86);opacity:.8}100%{transform:scale(1.25);opacity:0}}
@keyframes mBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes mScrub{from{width:0}to{width:100%}}
/* short-laptop: keep the panel from dominating the fold (mirrors homepage 780h rule) */
@media(max-height:780px) and (min-width:761px){.mhero__media{min-height:clamp(300px,42vw,460px);aspect-ratio:auto}}
/* mobile: media full-bleed FIRST, then copy on paper — matches the homepage stack */
@media(max-width:760px){
  .mhero{grid-template-columns:1fr}
  /* D331 - the hero artwork is a 1600x1600 square whose content spans 82% of its
     height, not the 64% the source comment claims. A 250px letterbox showed 64% at
     390px and 33% at 760px, clipping the numerals. Aspect-ratio instead of a fixed
     height keeps the crop generous at every width. */
  /* D372 - this container is a grid item with align-items:stretch inheriting from
     .mhero, it carries aspect-ratio, and every child is position:absolute. Those
     three together are ambiguous: stretch says take the row height, aspect-ratio
     says be square, and the row has no content height because absolute children
     contribute none. Blink resolves in favour of aspect-ratio and renders 390px;
     WebKit resolves the other way and renders 0, which hid the video, its poster
     and the event hero on iOS. align-self:start removes the competition and the
     min-height floor guarantees a box even where aspect-ratio does not resolve.
     It was min-height:0 before, which left nothing to fall back to. */
.mhero__media{order:1;aspect-ratio:1/1;min-height:min(100vw,78vh);max-height:78vh;
  align-self:start;margin:0 calc(50% - 50vw);border-radius:0}
@supports not (aspect-ratio:1/1){
  .mhero__media{height:min(100vw,78vh)}
}
  .mhero__copy{order:2;padding:18px 0 4px}
  .mstage__scrim{background:linear-gradient(0deg,rgba(var(--scrim-rgb),.34),rgba(var(--scrim-rgb),0) 42%)}
  .mstage__play{top:14px;right:14px;left:auto;bottom:auto;transform:none}
  .mstage__play:hover{transform:scale(1.07)}
}

/* Venue chooser — image card (.ccard) carrying an eyebrow label (.cl), in a
   four-up grid. Built for Dinner and a Film; reusable by any mission's venue set. */
.eatgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.ccard .cl{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px}

/* Split feature — a two-column editorial block (text + reserved media), used for
   focused content sections (e.g. dine-at-cinema, the cinema block). The --rev
   modifier puts the media first for visual rhythm between stacked blocks. */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);align-items:center;margin-top:16px}
.feature-split .fs-media{border-radius:var(--r-md);overflow:hidden}
.feature-split .fs-body p{font-size:14.5px;color:var(--body);line-height:1.6;max-width:56ch;margin-top:12px}
.feature-split .fs-body .btn{margin-top:20px}
.feature-split--rev .fs-media{order:-1}

/* Accent anchor panel — a contained band-teal block to give a mission's anchor
   module the most visual weight (e.g. Gather the Group's Boom Battle Bar). White
   text + an on-accent button; pairs with .feature-split inside it. */
.panel--accent{background:var(--band-teal);color:#fff;border-radius:var(--r-md);
  padding:clamp(24px,3.4vw,46px);box-shadow:var(--shadow-2)}
.panel--accent .kicker{color:rgba(255,255,255,.82)}
.panel--accent h2,.panel--accent h3{color:#fff}
.panel--accent p,.panel--accent .fs-body p{color:#fff}
.panel--accent .feature-split{margin-top:0}
.panel--accent .callout{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);
  border-radius:var(--r);padding:12px 16px;margin-top:18px;font-size:13px;line-height:1.5;color:#fff}
.panel--accent .callout b{color:#fff}

/* ============================ RESPONSIVE ================================ */
@media(max-width:1080px){
  .facts-grid{grid-template-columns:1fr 1fr}
  .statbar{grid-template-columns:1fr 1fr}
}
@media(max-width:1080px){
  .coffee{grid-template-columns:1fr 1fr}
  .chooser{grid-template-columns:1fr 1fr}
  .eatgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav__links,.nav__util .u{display:none}
  .nav__burger{display:inline-flex}
  .footer__grid{grid-template-columns:1fr 1fr}
  .facts-grid,.statbar{grid-template-columns:1fr}
  .coffee{grid-template-columns:1fr}
  .chooser{grid-template-columns:1fr}
  .eatgrid{grid-template-columns:1fr}
  .feature-split{grid-template-columns:1fr}
  .feature-split--rev .fs-media{order:0}
}
@media(max-width:540px){
  .footer__grid{grid-template-columns:1fr}
}

/* 5.29 OPENING-TIMES (Plan Your Visit cluster) — additive, tier-utility.
   Quick-answer strip (grouped BY INTENT), claim-free today-row highlight on
   the hardened .tariff, and a native <details> seasonal accordion (ST-7).
   No new colours beyond the existing palette; no open/closed status anywhere. */

/* Quick-answer strip — three intent cards (Shops · Food, drink & cinema · Car park) */
.qans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,16px);margin-top:18px}
.qans .qac{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;display:flex;flex-direction:column}
.qans .qac .lbl{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qans .qac .big{font-family:var(--font-sans);font-weight:600;font-size:clamp(17px,2vw,20px);
  color:var(--ink);margin-top:6px;line-height:1.2}
.qans .qac .sub{font-size:13px;color:var(--body);line-height:1.45;margin-top:5px}
.qans .qac .ln{margin-top:auto;padding-top:11px;font-size:13px;font-weight:600;color:var(--accent)}
@media(max-width:760px){.qans{grid-template-columns:1fr}}

/* Claim-free today-row highlight (presentation only; armed by inline JS, degrades
   to a plain complete table with JS off; never asserts open/closed). */
.tariff tbody tr.is-today th[scope=row],.tariff tbody tr.is-today td{
  background:var(--accent-tint);color:var(--ink);font-weight:600}
.tariff tbody tr.is-today .tdy{display:inline-block;margin-left:9px;font-size:10.5px;
  font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}

/* Seasonal accordion — native <details>, keyboard-operable, works without JS (ST-7) */
.acc{margin-top:8px;max-width:80ch}
.acc details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.acc summary{cursor:pointer;list-style:none;padding:14px 16px;font-family:var(--font-sans);
  font-weight:600;font-size:15px;color:var(--ink);display:flex;justify-content:space-between;
  align-items:center;gap:12px;min-height:48px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--accent);font-weight:700;font-size:19px;line-height:1}
.acc details[open] summary::after{content:"\2013"}
.acc summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.acc .acc__body{padding:0 16px 16px;font-size:13.5px;color:var(--body);line-height:1.55}
.acc .acc__empty{color:var(--muted);font-style:italic}

/* 5.30 GETTING HERE (Plan Your Visit cluster) — by-mode blocks. Scannable cards,
   each with a mode label, an H2 and one outbound/internal link. No new colours. */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px);margin-top:14px}
.mode{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(16px,2vw,22px);display:flex;flex-direction:column}
.mode .ml{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px}
.mode h2{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);color:var(--ink);
  line-height:1.18;margin-bottom:8px;padding-bottom:0}
.mode p{font-size:14px;color:var(--body);line-height:1.55;flex:1}
.mode p+p{margin-top:8px;flex:0}
.mode .ma{margin-top:13px;font-size:13.5px;font-weight:600;color:var(--accent)}
@media(max-width:760px){.modes{grid-template-columns:1fr}}

/* Static-map placeholder dressed to read unmistakably as an interactive map embed
   (map paper + streets + river + pin marker + zoom controls + attribution chip).
   Enhances the shared .cc-map component; the real Google/Apple embed loads lazily. */
.mapph{position:absolute;inset:0;background:#E7EBE4}
.mapph svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cc-map .zoom{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;
  border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-1);z-index:2}
.cc-map .zoom span{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--ink);font-size:19px;font-weight:600;line-height:1}
.cc-map .zoom span+span{border-top:1px solid var(--line)}
.cc-map .attrib{position:absolute;right:8px;bottom:8px;z-index:2;font-family:ui-monospace,Menlo,monospace;
  font-size:9px;color:var(--muted);background:rgba(255,255,255,.72);padding:2px 7px;border-radius:3px}


/* === mission-family additions === */
html.anim .proof span.in:nth-child(2){animation-delay:.06s}
html.anim .proof span.in:nth-child(3){animation-delay:.12s}
html.anim .proof span.in:nth-child(4){animation-delay:.18s}
html.anim .coffee .ccard.in:nth-child(2){animation-delay:.09s}
html.anim .coffee .ccard.in:nth-child(3){animation-delay:.18s}
html.anim .chooser .ctile.in:nth-child(2){animation-delay:.06s}
html.anim .chooser .ctile.in:nth-child(3){animation-delay:.12s}
html.anim .chooser .ctile.in:nth-child(4){animation-delay:.18s}
html.anim .chooser .ctile.in:nth-child(5){animation-delay:.24s}
html.anim .chooser .ctile.in:nth-child(6){animation-delay:.30s}
html.anim .more-grid .dcard.in:nth-child(2){animation-delay:.08s}
html.anim .more-grid .dcard.in:nth-child(3){animation-delay:.16s}
html.anim .more-grid .dcard.in:nth-child(4){animation-delay:.24s}
html.anim .more-grid .dcard.in:nth-child(2){animation-delay:.06s}
html.anim .more-grid .dcard.in:nth-child(3){animation-delay:.12s}
html.anim .more-grid .dcard.in:nth-child(4){animation-delay:.18s}
html.anim .more-grid .dcard.in:nth-child(5){animation-delay:.24s}
/* D375 RM-3 - stagger ramps are zeroed once a family renders single-column:
   each card then crosses the threshold on its own scroll position, so a family
   ramp only adds lag between the crossing and the animation. Widths follow the
   point each grid actually collapses to one column in this build (coffee and
   chooser at 760, more-grid at 560, proof chips at 540), not a blanket 540.
   :nth-child(n) keeps specificity equal so cascade order wins, no !important. */
@media(max-width:760px){
  html.anim .coffee .ccard.in:nth-child(n),
  html.anim .chooser .ctile.in:nth-child(n){animation-delay:0s}
}
@media(max-width:560px){
  html.anim .more-grid .dcard.in:nth-child(n){animation-delay:0s}
}
@media(max-width:540px){
  html.anim .proof span.in:nth-child(n){animation-delay:0s}
}

/* === LAY-1 (Sprint 1, ratified 11 June): sections sit on the 1240 grid; ===
   === long-form text keeps a readable measure, left-aligned to the grid  === */
.wrap--read{max-width:var(--maxw)}
.wrap--narrow{max-width:var(--maxw)}
.wrap--read > p, .wrap--read > ul, .wrap--read > ol,
.wrap--narrow > p, .wrap--narrow > ul, .wrap--narrow > ol{max-width:72ch}






/* in-page anchors must clear the 71px sticky header (D58) */
.azsec, #az, [id^="az-"]{scroll-margin-top:96px}

/* A-to-Z one-line trade descriptions (D56 — proposed copy pending Copy Pack) */
.azrow .nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.azrow .nmt{font-weight:600}
.azrow .ds{font-size:13px;line-height:1.4;color:var(--body);font-weight:400}
@media(max-width:560px){.azrow .ds{font-size:12.5px}}

/* attribute chip (Dog friendly): same row, visibly different species (D50/INT-1) */
.fdiv{width:1px;align-self:stretch;background:var(--line-strong);margin:0 6px;flex:0 0 auto}
.fchip--attr{border-color:var(--accent);color:var(--accent)}
.fchip--attr[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* A-to-Z filter title: prominent + announces change (INT-1; reduced-motion
   killed by the global §3 rule). A stray closing brace sat here, predating
   4 August; browsers ignored it but it made the file fail a brace check. */

/* ===================== INT-1 · INTERACTION STANDARD (Sprint 2) =====================
   RULE: every interactive element has a PERCEIVABLE hover and a VISIBLE keyboard
   focus. Hover moves toward the accent (primary buttons: ink -> teal; links:
   accent -> accent-deep; cards/tiles: lift). Motion is transform-only, ~150ms,
   and fully disabled under prefers-reduced-motion (global rule in §3). The old
   primary hover (ink -> #000) was imperceptible — that was the "no hover" bug. */
.btn{transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.agent-card{transition:border-color .15s ease}
.agent-card:hover{border-color:var(--accent)!important} /* zone cue only — the card is not
  one action; the email and phone links inside carry their own hovers (D40) */
.lnk-accent:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.sec--ruled{border-top:1px solid var(--line);margin-top:clamp(26px,3.2vw,42px)}

/* ====================== 7 · SPRINT 2 MOBILE SURGERY ===================== */
/* MOB-2: inline-styled grids (protocopy scaffolding) collapse at phone
   widths; !important is required to beat the inline declarations and is
   confined to this block. Removed when the grids move to classes. */
@media(max-width:560px){
  .more-grid{grid-template-columns:1fr!important}
  .cats{grid-template-columns:repeat(2,1fr)!important}
  .agents-grid{grid-template-columns:1fr!important}
  .fbar{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;
    padding-bottom:6px;scrollbar-width:thin}
  .fbar .fchip{flex:0 0 auto}
}
@media(max-width:760px){
  .more-grid[style*="repeat(3"]{grid-template-columns:1fr 1fr!important}
}

/* dog attribute note (rethink WP) */
.dognote{font-size:13px;color:var(--muted);margin:-6px 0 14px}

/* cross-vertical bridge under the shops list (D67) — one notch louder than the
   footer whisper-band, far quieter than a hero */
.xband--bridge{margin-top:18px;font-size:14.5px}
.xband--bridge a{font-weight:600}

/* ================= REGISTER SYSTEM (Sprint 2, R1/R4/R6/R10) ================= */
/* R1 — teal statement band (hub pages; Shops first). Caps statement, caps
   Escrow-italic accent. Full-bleed band, contained statement. PROTOCOPY. */
.regband{background:var(--accent);width:100vw;margin:clamp(34px,4vw,52px) calc(50% - 50vw) 0;
  padding:clamp(34px,5vw,62px) clamp(18px,4vw,44px)}
.regband__s{max-width:1240px;margin:0 auto;color:#fff;font-family:var(--font-sans);
  font-weight:300;text-transform:uppercase;letter-spacing:-.01em;  /* statement grammar =
  Gotham LIGHT caps, per the locked homepage H1 (D76) */
  font-size:clamp(30px,4.4vw,58px);line-height:1.02}
.regband__s em,.wbox__s em{font-family:'Escrow Banner',Georgia,serif;font-style:italic;font-weight:400;
  letter-spacing:.01em;color:inherit}
/* R4 — white-box statement, anchor pages only; overlaps its image's bottom
   edge by 20 to 40px (anchored, never floating wholly within the image). */
.wbox{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);
  padding:clamp(16px,2.4vw,28px) clamp(20px,3vw,36px);max-width:660px;
  margin:-32px clamp(8px,2vw,24px) 0 auto;position:relative;z-index:5}
.wbox__s{font-family:var(--font-sans);font-weight:300;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(22px,3vw,38px);line-height:1.06;color:var(--ink);margin:0}
/* R6 — capped shopfront hero on the Shops hub so search sits above the fold
   at 1366x768; aspect ratio still governs small screens. */
.pagehero--capped{max-height:clamp(320px,44vh,500px)}
/* R10 — utility de-emphasis: solid teal is reserved for register moments;
   utility panels take the outline/cream treatment. */
.feature--utility{background:var(--surface-alt);color:var(--ink);border:1px solid var(--line)}
.feature--utility .feat-t{color:var(--body)}
.feature--utility .btn--onaccent{background:var(--ink);color:#fff;border-color:var(--ink)}
/* D358 - .btn--onaccent had no hover state at all, the only button on the site
   without one. It sits on the accent ground, so it cannot hover to the accent;
   it lifts to the warm surface instead, the same answer the John Lewis band uses. */
.btn--onaccent:hover{background:var(--surface-alt);color:var(--ink);border-color:var(--surface-alt)}

@media(max-width:900px){
  .wbox{margin:-20px 10px 0 10px}            /* keeps the 20px lower-bound overlap */
  .tenant-hero .masthead{margin-bottom:30px}  /* lifts the logo clear of the box */
}
/* food status line matches the shops treatment: one line, prominent, with reset */
#fdcount{font-size:15px;font-weight:600;color:var(--accent)}
/* ===== Sprint 2 exit review fixes (D78-D80) ===== */
/* D78 — pills are for clicking, not reading (unanimous, both reviewers). */
.azrow .tag{background:none;border:0;border-radius:0;padding:0;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.svcrow{display:block}
.svctile{display:inline;background:none;border:0;border-radius:0;padding:0;
  font-size:13.5px;font-weight:400;color:var(--body);line-height:1.9}
.svctile:not(:first-child)::before{content:"\00a0\00b7\00a0";color:var(--muted)}
/* D79 — density relief: whitespace + 1px rules; cream reserved for short callouts. */
.tariff thead th{background:none;border-bottom:2px solid var(--line-strong)}
.gtk{background:none;border:0;box-shadow:none;padding:0}
.gtk__top{background:none;padding:0 0 12px;border-bottom:1px solid var(--line-strong)}
.gtk .qblk{padding:16px 0;border-bottom:1px solid var(--line);margin:0}
.gtk .qblk:last-child{border-bottom:0}
.gtk .qblk h3{margin-bottom:6px}
/* D80 — scrim heroes take the statement grammar (ratified from Gemini's review):
   same Gotham Light caps scale as the white-box devices; hierarchy is the
   container (box vs scrim), never a drop in typographic quality. */
.pagehero h1{letter-spacing:-.01em;font-size:clamp(30px,4.6vw,56px);line-height:1.04}
@media(max-width:760px){
  /* food chip row wraps instead of clipping mid-chip (truncation defect) */
  .fbar{overflow-x:visible;flex-wrap:wrap;padding-bottom:0}
}

/* D81 — riverside removed from card meta (Guy: not special enough to badge);
   the riverside DATA stays for hub copy and any future filter. */
.dcard .rv{display:none}
.dcard .rv::before{content:none}

/* D84 — at-a-glance fact strips: static facts lose pill chrome (rule D72/D78).
   Quiet middot-separated line; the pill shape now means "pressable" everywhere. */
.proof{display:block}
.proof span{display:inline;background:none;border:0;border-radius:0;padding:0;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;color:var(--body);line-height:1.9}
.proof span:not(:first-child)::before{content:"\00a0\00b7\00a0";color:var(--muted)}

/* D85 — venue-card eyebrow = CUISINE ONLY (Guy's ruling). Kids menu, dogs and
   riverside leave the card: the finder chips + state heading deliver those sets
   (the shops solution); per-tenant detail lives on the tenant page (TEN-3).
   Data attributes untouched — they drive the filters. */
.dcard .bdg{display:none}
.dcard .bdg::before{content:none}

/* ============ §6 REGISTER — CD-PACK-ADOPTION (Sprint 2 exit, 12 June) ============
   Adopted ADDITIVELY from the Claude Design canonical sheet per the diff
   procedure (never wholesale-replace). Marker: CD-PACK-ADOPTION. The legacy
   .regband/.wbox rules above remain for any uncut page; pages migrate to
   these canonical classes as the pack's section 3 edits land.
   NOT adopted from the incoming sheet: base .feature de-teal (the mission-page
   .feature--utility sweep is Sprint 3-4 per the ratified plan, D70). */
.stmt{font-family:var(--font-sans);font-weight:var(--fw-light);text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.04;color:var(--ink);padding-bottom:.04em}
.stmt .punch{font-weight:var(--fw-book);margin:0 .3em 0 .05em;white-space:nowrap}

/* R1 — teal statement band (canonical) */
.r1{background:var(--accent);color:#fff}
.r1__in{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
.r1 .stmt{font-size:clamp(30px,4.4vw,58px);color:#fff;max-width:20ch}
.r1 .stmt .punch{color:#fff}
.r1__line{margin-top:14px;font-size:var(--t-lead);line-height:1.5;
  color:rgba(255,255,255,.92);max-width:52ch}
.r1--compact .r1__in{padding-top:clamp(26px,3.2vw,44px);padding-bottom:clamp(26px,3.2vw,44px)}

/* R4 — white-box statement, HARMONISED placement (client-ratified via the pack):
   overlap 32px desktop; below 900: 28px with 16px side margins (old 20px figure
   and the right-align clause RETIRED; .r4--right kept legacy-only). */
.r4{position:relative;z-index:var(--z-overlay);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-2);
  padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,38px)}
.r4 .stmt{font-size:clamp(26px,3.2vw,42px)}
.r4--anchor{margin-top:-32px}
@media(min-width:900px){
  .r4--right{margin-left:auto;margin-right:clamp(20px,3.4vw,48px);max-width:600px}}
@media(max-width:899.98px){
  .r4--anchor{margin-top:-28px;margin-left:16px;margin-right:16px}}

/* R6 canonical alias (build class .pagehero--capped remains) */
.pagehero--cap{max-height:clamp(320px,44vh,500px);min-height:0}

/* R10 utility panels + rows (canonical) */
.panel{border-radius:var(--r-md);padding:clamp(16px,2vw,22px)}
.panel--outline{background:var(--surface);border:1px solid var(--line)}
.panel--cream{background:var(--surface-alt);border:1px solid var(--line)}
.rows{border-top:1px solid var(--line)}
.rows>.row{display:flex;gap:8px 18px;padding:13px 2px;border-bottom:1px solid var(--line);
  align-items:baseline;flex-wrap:wrap}

/* Pill economy: quiet static metadata */
.qtag{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.glance{font-size:14px;color:var(--body);line-height:1.7}
.glance b{color:var(--ink);font-weight:600}

/* Scrim-hero statement scale: incoming sheet sets leading 1.06 (supersedes 1.04) */
.pagehero h1{line-height:1.06}

/* ---- THE SCENE (Q2 A / Q3 v2): full-bleed media + anchored white box ---- */
.scene{position:relative}
.scene .sc-media{position:relative;aspect-ratio:21/8;min-height:340px;overflow:hidden}
.scene .sc-media .imgph{position:absolute;inset:0}
.scene .sc-media .scrim-bottom{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(var(--scrim-rgb),.34) 0%,rgba(var(--scrim-rgb),0) 42%)}
@media(max-width:899.98px){.scene .sc-media{aspect-ratio:4/3;min-height:0}}

/* ---- Q1 OPTION B: the band fused with the missions ---- */
.fuse .r1__in{padding-bottom:clamp(22px,2.6vw,34px)}
.fuse-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(20px,2.4vw,30px);margin-bottom:-92px}
.fuse-after{padding-top:128px}
@media(max-width:1080px){.fuse-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.fuse-cards{grid-template-columns:1fr 1fr;margin-bottom:-70px}.fuse-after{padding-top:96px}}
@media(max-width:540px){.fuse-cards{grid-template-columns:1fr}}

/* ---- Q4: venue-card cuisine eyebrow + dog-filtered status line ---- */
.dcard .qtag{display:block;font-size:10px;letter-spacing:.14em;margin-bottom:4px;white-space:normal}
.dcard .vc-dog{font-size:13px;color:var(--body);margin-top:10px}
.dcard .vc-dog::before{content:"";display:block;width:34px;border-top:2px solid var(--accent);margin-bottom:8px}
.dcard .vc-dog .st{display:block;font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.statehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.statehead h2{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:24px;color:var(--ink)}

/* ---- Q5: the Ledger fact strip ---- */
.ledger{display:flex;align-items:stretch;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.ledger .lg-title{flex:0 0 auto;display:flex;align-items:center;padding:16px 22px 16px 2px;border-right:1px solid var(--line);margin-right:6px}
.ledger .lg-title span{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ledger .lg-row{display:grid;grid-template-columns:repeat(5,1fr);flex:1 1 auto;min-width:0}
.ledger .lg-cell{flex:1 1 auto;padding:14px 18px;min-width:120px}
.ledger .lg-cell{border-left:1px solid var(--line);min-width:0;overflow-wrap:break-word}
/* D299 - fixed 5-up strip: values wrap inside their cell, cells never wrap to a second row.
   The divider is suppressed on the first cell of every row at each breakpoint. */
.ledger .lg-cell:first-child{border-left:0}
@media(max-width:1180px){
  /* D338 - was a fixed 3 columns below 1180px, which split five cells into 3+2 and
     read as a break rather than a choice. auto-fit lets the row hold as many cells as
     fit and reflow evenly, so five stay on one line until they genuinely cannot, then
     land 3+2 or 2+2+1 with the dividers following. */
  .ledger .lg-row{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
  .ledger .lg-cell{border-left:1px solid var(--line);border-top:0}
  .ledger .lg-cell:first-child{border-left:0}
}
.ledger .lg-k{display:block;font-size:10px;font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ledger .lg-v{display:block;font-size:15px;color:var(--ink);margin-top:3px;line-height:1.35}
.ledger .lg-v small{display:block;font-size:12.5px;color:var(--body);margin-top:1px}
@media(max-width:760px){
  .ledger{flex-direction:column}
  .ledger .lg-title{border-right:0;margin:0;padding:12px 2px 4px}
  .ledger .lg-row{display:grid;grid-template-columns:1fr 1fr}
  .ledger .lg-cell{border-left:0!important;border-top:1px solid var(--line);padding:12px 2px}
  .ledger .lg-row .lg-cell:nth-child(-n+2){border-top:0}
  .ledger .lg-row .lg-cell:last-child:nth-child(odd){grid-column:1/-1}}

/* ---- Q6: the JL store-guide spread ---- */
.guide{border-top:2px solid var(--ink)}
.floor{display:grid;grid-template-columns:240px 1fr;gap:clamp(20px,3vw,52px);
  padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--line)}
.floor:last-of-type{border-bottom:1px solid var(--line-strong)}
.floor .fl-id{display:flex;align-items:flex-start;gap:16px}
.floor .fl-num{font-family:var(--font-sans);font-weight:var(--fw-light);font-size:clamp(44px,4.6vw,64px);
  line-height:.9;color:var(--accent);letter-spacing:-.01em}
.floor .fl-name{padding-top:6px}
.floor .fl-name b{display:block;font-family:var(--font-sans);font-weight:var(--fw-med);font-size:17px;color:var(--ink);line-height:1.2}
.floor .fl-name span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.floor .fl-body{min-width:0}
.fl-group+.fl-group{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fl-group .gk{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fl-group .gv{font-size:14.5px;color:var(--body);line-height:1.85;margin-top:5px}
@media(max-width:760px){
  .floor{grid-template-columns:1fr;gap:14px}
  .floor .fl-num{font-size:40px}}
/* ============ end CD-PACK-ADOPTION ============ */

/* CD-PACK-ADOPTION amendment: below 900 the scene's wrap yields its side
   padding so the anchored box's 16px margins are the VISUAL side margins,
   matching the homepage R5 box exactly (pack QA 4.2: measure, not eyeball). */
@media(max-width:899.98px){.scene>.wrap{padding-left:0;padding-right:0}}

/* ============ ARTWORK-REFERENCE BUILD — asset spec slots surfaced (13 Jun) ============
   This deliverable is the art-direction reference: every image/video slot is
   shown so the artworker can read each export spec (and mobile crop) straight
   off the page. PRODUCTION: delete this block to re-hide slots (the base rule
   keeps them display:none, surfaced only with body.qa). */
.slot{display:block!important;font-size:10px;line-height:1.45;max-width:calc(100% - 20px);
  white-space:normal;box-shadow:0 1px 7px rgba(0,0,0,.34)}
.slot--video{background:rgba(10,40,34,.92);border-left:3px solid #3aa490}
/* a still-vs-moving affordance: video-capable media carries a centred play glyph */
.sc-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media-choice::after{content:"";position:absolute;left:50%;top:50%;width:62px;height:62px;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.93);
  box-shadow:0 6px 22px rgba(0,0,0,.34);z-index:2;pointer-events:none}
.media-choice::before{content:"";position:absolute;left:50%;top:50%;z-index:3;
  transform:translate(-38%,-50%);border-style:solid;border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #15120f;pointer-events:none}
/* ============ end ARTWORK-REFERENCE BUILD ============ */

/* ============ NDR — MOBILE NAV DRAWER (Sprint 2, 13 Jun) ============
   The burger drawer designed to the navigation brief. Namespaced .ndr-*,
   canonical tokens only (fallbacks so it also runs on the standalone
   homepage). Behaviour and markup injection live in js/nav-drawer.js.
   One Escrow beat only: the Things to Do hero. Single teal accent, sparing.
   Closed, the drawer is display:none and an overlay, so it does not touch
   document flow, the 96px junction, or the scrollWidth gate. */
.ndr{position:fixed;inset:0;z-index:1200;display:none}
.ndr[data-open]{display:block}
.ndr__scrim{position:absolute;inset:0;background:rgba(21,18,15,.46);opacity:0;transition:opacity .28s ease}
.ndr[data-open] .ndr__scrim{opacity:1}
.ndr__panel{position:absolute;top:0;right:0;width:min(86vw,400px);height:auto;max-height:100vh;max-height:100dvh;
  background:var(--surface-alt,#F4F0E8);box-shadow:-16px 0 44px rgba(21,18,15,.24);
  display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.ndr[data-open] .ndr__panel{transform:none}
.ndr__head{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;background:var(--surface,#fff);border-bottom:1px solid var(--line,#e3ddd0)}
.ndr__logo{display:inline-block;background:#000 url(../img/brand/bond-street-white.png) center/94px auto no-repeat;
  width:128px;height:38px;font-size:0;line-height:0;text-decoration:none;white-space:nowrap}
.ndr__logo small{display:none}
.ndr__close{appearance:none;width:44px;height:44px;border:1px solid var(--line-strong,#cdc4b4);
  background:var(--surface,#fff);border-radius:6px;color:var(--ink,#15120f);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ndr__close:hover{background:var(--surface-alt,#F4F0E8)}
.ndr__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ndr__hero{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:19px 20px;text-decoration:none;background:var(--surface,#fff);
  border-bottom:2px solid var(--line-strong,#cdc4b4)}
.ndr__herotxt{display:flex;flex-direction:column;gap:5px}
.ndr__heroeyebrow{font-family:var(--font-sans,Helvetica,Arial,sans-serif);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#6f685e)}
.ndr__heroname{font-family:"Escrow Banner",var(--font-punch,Georgia),Georgia,serif;font-style:italic;
  font-size:27px;line-height:.98;color:var(--accent,#0C6B5E)}
.ndr__hero .ndr__arrow{color:var(--accent,#0C6B5E);font-size:19px;flex:none}
.ndr__spine{list-style:none;margin:0;padding:0}
.ndr__hub{border-bottom:1px solid var(--line,#e3ddd0);transition:opacity .25s ease,background .25s ease}
.ndr__spine[data-anyopen] .ndr__hub:not([data-expanded]){opacity:.4}
.ndr__hubtop{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;color:var(--ink,#15120f);
  font-family:var(--font-sans,Helvetica,Arial,sans-serif);font-weight:500;font-size:18px;letter-spacing:-.005em;
  padding:0 20px;min-height:56px}
.ndr__hubtop:hover{color:var(--accent,#0C6B5E)}
.ndr__hub--link .ndr__hubtop .ndr__arrow{color:var(--accent,#0C6B5E);font-size:18px}
.ndr__pm{position:relative;width:15px;height:15px;flex:none}
.ndr__pm::before,.ndr__pm::after{content:"";position:absolute;background:var(--muted,#6f685e);transition:transform .25s ease,opacity .25s ease,background .25s ease}
.ndr__pm::before{left:0;right:0;top:6.5px;height:2px}
.ndr__pm::after{top:0;bottom:0;left:6.5px;width:2px}
.ndr__hub[data-expanded] .ndr__pm::after{transform:scaleY(0);opacity:0}
.ndr__hub[data-expanded] .ndr__pm::before{background:var(--accent,#0C6B5E)}
.ndr__sub{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.22,.61,.36,1)}
.ndr__hub[data-expanded] .ndr__sub{max-height:360px}
.ndr__hub[data-expanded] .ndr__subin{border-left:3px solid var(--accent,#0C6B5E);
  background:linear-gradient(90deg,rgba(12,107,94,.06),rgba(12,107,94,0) 70%);padding-bottom:8px}
.ndr__leaf{display:flex;align-items:center;gap:8px;text-decoration:none;min-height:44px;
  padding:9px 20px 9px 30px;font-family:var(--font-sans,Helvetica,Arial,sans-serif);font-size:15px;color:var(--body,#46413a)}
.ndr__leaf:hover{color:var(--accent,#0C6B5E)}
.ndr__leaf--all{color:var(--ink,#15120f);font-weight:600}
.ndr__leaf--all .ndr__arrow{color:var(--accent,#0C6B5E);font-size:15px}
/* variant B: lead hub (accent treatment on the primary hub, still expandable) + demoted way-in link */
.ndr__hub--lead{border-bottom:2px solid var(--line-strong,#cdc4b4);background:var(--surface,#fff)}
.ndr__hub--lead .ndr__hubtop{flex-wrap:wrap;align-content:center;padding-top:15px;padding-bottom:15px;min-height:66px}
.ndr__leadk{flex-basis:100%;font-family:var(--font-sans,Helvetica,Arial,sans-serif);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#6f685e);margin-bottom:4px}
.ndr__leadname{font-family:"Escrow Banner",var(--font-punch,Georgia),Georgia,serif;font-style:italic;font-size:25px;line-height:1;color:var(--accent,#0C6B5E)}
.ndr__hub--lead .ndr__pm::before,.ndr__hub--lead .ndr__pm::after{background:var(--accent,#0C6B5E)}
.ndr__quiet{display:flex;align-items:center;gap:10px;padding:13px 20px;text-decoration:none;border-bottom:1px solid var(--line,#e3ddd0)}
/* D346 - Things to Do sits below the four primary routes, not among them. It is
   already outside the spine list structurally; this gives it the visual separation
   to match. Spacing only, no extra rule: the quiet link already carries a border
   below, and a second line above would read as a heavier device than intended. */
.ndr__spine+.ndr__quiet{margin-top:16px}
.ndr__quietk{font-family:var(--font-sans,Helvetica,Arial,sans-serif);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#6f685e);white-space:nowrap}
.ndr__quietn{font-family:var(--font-sans,Helvetica,Arial,sans-serif);font-size:15px;font-weight:600;color:var(--ink,#15120f);white-space:nowrap}
.ndr__quiet .ndr__arrow{margin-left:auto;color:var(--accent,#0C6B5E);font-size:16px}
.ndr__services{flex:none;background:var(--surface,#fff);border-top:1px solid var(--line-strong,#cdc4b4);
  display:grid;grid-template-columns:1fr 1fr}
.ndr__svc{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:54px;padding:12px 16px;
  font-family:var(--font-sans,Helvetica,Arial,sans-serif);font-size:13px;font-weight:600;color:var(--ink,#15120f)}
.ndr__svc:nth-child(odd){border-right:1px solid var(--line,#e3ddd0)}
.ndr__svc:nth-child(n+3){border-top:1px solid var(--line,#e3ddd0)}
.ndr__svc:hover{color:var(--accent,#0C6B5E);background:var(--surface-alt,#F4F0E8)}
.ndr__svc svg{width:18px;height:18px;flex:none;stroke:var(--accent,#0C6B5E);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* closed header on mobile (MENU-00): burger left, centred logo, empty right slot */
@media(max-width:760px){
  .nav__row,.nav .row{position:relative}
  /* D307 - burger moves to the top right on mobile: the top-left corner is the hardest
   point to reach one-handed, and the drawer close button is already top right. */
.nav__row .nav__burger,.nav .row .burger{order:1;margin:0 0 0 auto}
  .nav__row .logo,.nav .row .logo{position:absolute;left:50%;transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){.ndr__scrim,.ndr__panel,.ndr__sub,.ndr__hub{transition:none}}
/* ============ end NDR — MOBILE NAV DRAWER ============ */

/* ============ PRODUCTION UPDATE 14 JUN (D122-D125) ============ */
/* §4 John Lewis hours -> visit card (D122) */
.hours-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr);gap:clamp(20px,3vw,40px);
  align-items:stretch;margin-top:8px}
.hours-split .hours-main{min-width:0}
.hours-split .tariff{max-width:none;margin-top:0}
.visit-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2vw,24px);display:flex;flex-direction:column}
.visit-card h3{font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.visit-card .contact{margin-top:0;background:none;border:0;border-radius:0;padding:0;display:block}
.visit-card .contact .cti{margin:0;padding:15px 0;border-bottom:1px solid var(--line)}
.visit-card .vnote{margin-top:auto;padding-top:16px;font-size:13px;color:var(--body);line-height:1.5}
.visit-card .vnote a{color:var(--accent);font-weight:600}
@media(max-width:760px){.hours-split{grid-template-columns:1fr;align-items:start}}


/* §6 John Lewis "why shop here" USPs (D124) */
.usp{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:18px}
.usp .u{background:var(--surface);padding:clamp(20px,2.1vw,26px);display:flex;flex-direction:column}
.usp .u .ui{width:28px;height:28px;color:var(--accent);margin-bottom:13px}
.usp .u .ui svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.usp .u h3{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:15.5px;color:var(--ink);
  letter-spacing:-.005em;margin-bottom:6px;line-height:1.25}
.usp .u p{font-size:13.5px;line-height:1.55;color:var(--body);margin:0}
.usp .u .ub{font-weight:600;color:var(--ink)}
@media(max-width:900px){.usp{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.usp{grid-template-columns:1fr}}

/* §7 50/50 split band variant (D125) */
.band--split .band__in{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,4.5vw,72px);align-items:center}
.band--split .band__copy{min-width:0}
.band--split .band__copy h2{font-size:clamp(32px,3.6vw,56px);max-width:none}
.band--split .band__copy p{max-width:42ch}
.band--split .band__media{position:relative;align-self:stretch;min-height:clamp(300px,28vw,420px);
  border-radius:8px;overflow:hidden;
  background:repeating-linear-gradient(45deg,#0a564b,#0a564b 13px,#0e7666 13px,#0e7666 26px)}
.band--split .band__media .slot{color:#fff}
@media(max-width:760px){.band--split .band__in{grid-template-columns:1fr;gap:26px}
  .band--split .band__media{min-height:0;aspect-ratio:16/9;order:2}}

/* heading-semantics pass (D128): preserve visuals after re-leveling */
.t-h4{font-family:var(--font-sans);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:6px}
.tb h3{font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:3px}

/* D129: John Lewis hero in-page anchors -> clear sticky nav + smooth scroll */
#opening-hours,#store-guide{scroll-margin-top:100px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* flow-in additions (reflect to canonical): card image cover + shared play button */
.ar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;border:2px solid rgba(255,255,255,.92);background:rgba(20,16,12,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vplay svg{width:26px;height:26px;margin-left:4px;fill:#fff}
@media(max-width:760px){.pagehero .vplay{top:14px;right:14px;left:auto;bottom:auto;transform:none}}

/* flow-in: band media image cover (reflect to canonical) */
.band__media{position:relative;overflow:hidden}
.band__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   OFFERS LIST (Food & Drink) — quiet link-out index.
   Deliberately NOT a .dcard photo grid: the four venues already
   appear as photo cards in the directory above, so a second card
   grid would read as a duplicate. Reuses the .azwrap hairline
   link-list grammar; secondary to the directory.
   ============================================================ */
.offers__list{margin-top:clamp(18px,2.2vw,26px);padding:clamp(6px,1vw,12px) clamp(16px,2vw,24px)}
.offers__row{display:grid;grid-template-columns:minmax(150px,200px) 1fr auto;
  align-items:center;gap:clamp(14px,2vw,30px);
  padding:clamp(16px,1.9vw,22px) 2px;border-bottom:1px solid var(--line);
  color:inherit;transition:background var(--dur-fast,.18s) var(--ease,ease)}
.offers__row:last-of-type{border-bottom:0}
.offers__row:hover{background:var(--surface-alt)}
.offers__nm{font-family:var(--font-sans);font-weight:600;font-size:19px;color:var(--ink)}
.offers__desc{font-size:14px;color:var(--body);line-height:1.55}
.offers__go{font-size:12px;font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
  display:inline-flex;align-items:center}
.offers__go::after{content:"\2197";margin-left:7px;font-weight:600;
  transition:transform var(--dur-fast,.18s) var(--ease,ease)}
.offers__row:hover .offers__go{color:var(--accent-deep)}
.offers__row:hover .offers__go::after{transform:translate(2px,-2px)}
.offers__note{margin-top:clamp(16px,1.9vw,22px);font-size:13px;color:var(--muted);
  line-height:1.55;max-width:80ch}
@media(max-width:680px){
  .offers__list{padding-left:clamp(14px,4vw,18px);padding-right:clamp(14px,4vw,18px)}
  .offers__row{grid-template-columns:1fr;gap:6px;align-items:start}
  .offers__go{margin-top:6px}
}

/* ============================================================
   CLICKABLE MAP — image links out to Google Maps with a hover
   affordance (overlay + "Open in Google Maps" pill). Default
   state is the clean static map; the cue appears on hover/focus.
   ============================================================ */
.maplink{display:block;position:relative;border-radius:var(--r,6px);overflow:hidden;outline-offset:3px}
.maplink img{display:block;width:100%;height:100%;object-fit:cover}
.maplink__cue{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  background:var(--ink,#15120f);color:#fff;font-size:12px;font-weight:var(--fw-bold,700);
  letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);transform:translateY(0);
  transition:background var(--dur-fast,.18s) var(--ease,ease)}
.maplink__cue svg{width:14px;height:14px;fill:currentColor}
.maplink::after{content:"";position:absolute;inset:0;background:rgba(21,18,15,0);
  transition:background var(--dur-fast,.18s) var(--ease,ease);pointer-events:none}
.maplink:hover::after,.maplink:focus-visible::after{background:rgba(21,18,15,.10)}
.maplink:hover .maplink__cue,.maplink:focus-visible .maplink__cue{background:var(--accent,#0C6B5E)}
@media(max-width:540px){.maplink__cue{right:10px;bottom:10px;padding:8px 12px;font-size:11px}}


/* ===================== §5.13b STORE PAGE TENANT PATTERN =====================
   Folded from the approved store template (D194/D195) so store pages carry
   ZERO page-local CSS. Union of the standard + anchor variants. Hand this
   delta to Claude Design to fold into the master concept. */
.tenant-lead{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,30px);align-items:start}
@media(min-width:900px){.tenant-lead{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4vw,54px)}}
.tenant-lead__main{display:flex;flex-direction:column;gap:16px;min-width:0}
.tenant-lead__media{min-width:0}
.th-name{font-family:var(--font-sans);font-weight:var(--fw-light);font-size:clamp(30px,4.4vw,46px);line-height:1.03;letter-spacing:-.015em;color:var(--ink)}
.th-desc{font-size:var(--t-lead,18px);color:var(--body);line-height:1.5;max-width:52ch;margin-top:10px}
.tenant-lead__main .fbar{margin-top:2px}
.tenant-hours{margin-top:2px}
.tenant-hours h2{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3,15px);color:var(--ink);margin-bottom:8px}
.tenant-hours .tariff{max-width:420px}
.tenant-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.tenant-shot{position:relative;margin:0}
.tenant-shot>img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-md)}
.tenant-tile{position:absolute;left:16px;bottom:16px;z-index:2;line-height:0;border:3px solid #fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.34)}
.tenant-tile img{display:block;width:clamp(80px,9vw,102px);aspect-ratio:1;object-fit:cover;border-radius:5px}
.tfeatures{display:grid;gap:clamp(12px,1.4vw,16px);margin-top:14px;grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.tfeatures{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.tfeatures{grid-template-columns:1fr}}
.tenant-foot{margin-top:clamp(22px,3vw,32px);padding-top:15px;border-top:1px solid var(--line)}
.tenant-foot a{font-size:14px;font-weight:600;color:var(--accent)}
.sectionlabel{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);color:var(--ink);margin:26px 0 4px}
.tenant-offer{margin-top:clamp(16px,2vw,22px)}
.tenant-offer a{font-size:14px;font-weight:600;color:var(--accent)}
.tenant-offer a:hover{color:var(--accent-deep)}
/* ===================== end §5.13b ===================== */

/* ═══ DESIGN-RECONCILIATION DELTA 14 Jul 2026 (D213–D216) — applied by build pipeline ═══ */
/* D213 · fused band as the page-ender: contained close (Shops) */
.fuse--last .fuse-cards{margin-bottom:0}
.fuse--last .r1__in{padding-bottom:clamp(40px,5vw,68px)}
/* D214 · canonical section intro (retires the inline literal) */
.sec-intro{font-size:14.5px;color:var(--body);line-height:1.6;max-width:80ch;margin-top:10px}
/* D215 · onward-cards grid */
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.more-grid--3{grid-template-columns:repeat(3,1fr)}
.more-grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.more-grid,.more-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.more-grid,.more-grid--3,.more-grid--2{grid-template-columns:1fr}}
/* D216 · mission section-rhythm homes */
#main .sec-head{margin-bottom:18px}
.kicker--gap{margin-bottom:14px}
.kicker--loose{margin:44px 0 14px}
/* D235 · ledger sits a breath below the masthead asset (12px standard; missions carry it inline pending Sprint-3 fold) */
/* D228 · venue lead split (was inline on cinema); stacks on mobile */
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);align-items:center}
@media(max-width:760px){.ev-grid{grid-template-columns:1fr}}
/* NOTE: old v-chrome (.vchrome/.vlabel/.vtime/.vplay) NOT cut — still live on the homepage hero; retire at D219 (B2 consolidation). */

/* D266: minimal pause/play control for autoplaying video — WCAG 2.2.2.
   z-index above any scrim/label so it's always reachable and visible. */
.video-pause-ctrl{position:absolute;z-index:6;right:14px;bottom:14px;width:38px;height:38px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:rgba(20,16,12,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background var(--dur-fast,.18s) var(--ease,ease)}
/* D305 - on narrow screens the hero text card rises into the lower third of the video,
   so the pause control moves to the top of the stage where nothing can collide with it. */
@media(max-width:880px){
  .vstage .video-pause-ctrl{top:12px;bottom:auto;right:12px}
}

.video-pause-ctrl:hover,.video-pause-ctrl:focus-visible{background:rgba(20,16,12,.62)}
.video-pause-ctrl svg{width:15px;height:15px;fill:#fff}

/* RENUMBERED ON MERGE: delivered as section 5.30, but 5.30 is GETTING HERE in
   this build. This module is 5.31. References to "5.30" in events-data.js and
   events-review.js comments mean this section. */
/* ============================================================================
   5.31  UPCOMING EVENTS
   Bond Street Chelmsford · revision 3, 3 August 2026 · NOT YET IN PRODUCTION

   Numbered 5.31, not 5.29: 5.29 is already OPENING-TIMES in the live sheet.
   Insert after 5.29 and before §6 REGISTER. It MUST sit after §5.2: the
   on-accent action colour has the same specificity as the sheet's
   .lnk-ext:not(.btn):not(.pill) accent rule and wins on source order alone.

   ############################################################################
   ##  THIS BLOCK IS THE RULE BOOK FOR THE MODULE.                          ##
   ##  Every rule agreed in the design round is recorded here, in the        ##
   ##  stylesheet, so none of it can be lost when events are added, a page   ##
   ##  is rebuilt, or the module is handed to someone new.                   ##
   ##                                                                        ##
   ##  Rules 1-4 are ENFORCED IN CODE as well as stated here; a breach is    ##
   ##  repaired at render time and reported to the console.                  ##
   ############################################################################

   WHERE THINGS LIVE. Three files, one job each.
     css/events-module.css   this file. Every visual rule. No content.
     js/events-data.js       every event. THE ONLY FILE EDITED PER EVENT.
     js/events-review.js     the formatters, the wording table, the guards.
   Never write an event, a date, a heading or a button into page markup. Never
   add a per-event class. Never override a rule below at a page level.

   ---------------------------------------------------------------------------
   1 · DATE AND TIME LABEL                                  ENFORCED: cleanDate()
   ---------------------------------------------------------------------------
   .evcard .when and .evteaser .line are UPPERCASED BY THIS STYLESHEET. Store the
   words in sentence case; one function, whenText(), produces every label.

   The only permitted forms, in precedence order:
     one verified time      15 Aug · 10am
     two verified times     15 Aug · 10am & 11am
     three or more          15 Aug · 10am, 11am & 12pm
     count, times unknown   15 Aug · Two sessions
     neither known          15 Aug
     a recurrence           Until 20 Aug
   Separator is a centred dot (·). NEVER a hyphen, never an en dash.

   NEVER DISPLAY, in any placement, at any breakpoint:
     Multiple times · Various times · Choose a time · +1 more
     Times vary · See Eventbrite
   These are Eventbrite's words, not ours. cleanDate() strips them and the
   separator they leave behind, then warns naming the record. Fix the data.

   NEVER INFER A TIME. No time in the data means no time in the label.

   KEEP IT TO ONE LINE: about twenty characters uppercased. The date is the first
   thing in a card, so a wrap pushes the category and name down and breaks
   alignment against the cards beside it. This is why a recurrence reads
   "Until 20 Aug" and not "Multiple dates until 20 Aug". text-wrap:balance is the
   safety net, not the solution.

   ---------------------------------------------------------------------------
   2 · NEW TAB                                       ENFORCED: extLink() + guard
   ---------------------------------------------------------------------------
   EVERY link to Eventbrite opens in a new tab. No exceptions. Each one carries
   target="_blank", rel="noopener noreferrer" and a .vh span naming the
   destination. No Eventbrite link ever replaces the Bond Street page the visitor
   is on. One helper builds them all so the attributes cannot be omitted, and a
   load-time guard repairs and reports any outbound link that arrives without.

   ---------------------------------------------------------------------------
   3 · OUTBOUND ARROW                                    ENFORCED: .lnk-ext::after
   ---------------------------------------------------------------------------
   DRAWN, NEVER TYPED. The sheet's .lnk-ext arrow is the character U+2197, which
   Gotham has no glyph for, so its appearance is decided by the browser's font
   fallback: a boxed external-link icon on macOS and iOS, a bare hairline arrow
   elsewhere. Inside 5.31 it is a masked SVG on the same ::after - an open square
   with the arrow leaving it, the device cinema.html shows - inked with
   currentColor so it takes the button's white or the link's accent.

   ONE arrow per link. Never add an arrow span or character to markup; the
   ::after already draws it and you will get two (A11Y-4). Never put .lnk and
   .lnk-ext on the same element (defect D127, a double underline).
   The arrow is for EXTERNAL links only. Internal links take .lnk-int.

   ---------------------------------------------------------------------------
   4 · COLLAPSE WHEN EMPTY                            ENFORCED: inline expiry guard
   ---------------------------------------------------------------------------
   The WHOLE section is generated: wrapper, heading, controls, link, list and
   section spacing. When no live record remains, NOTHING is left behind - not an
   empty state, not a heading, not the spacing. The page reflows as though the
   module had never been written, and only an HTML comment marks the insertion
   point. .empty-state must NOT be used here.

   Three independent layers, any one of which can fail without exposing a stale
   event: the build never writes an expired record; a synchronous INLINE script
   re-checks every card in the browser and sets [hidden]; and a staleness gate
   hides the section if the generated stamp is missing, over an hour in the
   future, or more than 36 hours old. Line 6 of the sheet
   ([hidden]{display:none!important}) is what makes that authoritative. NEVER
   gate visibility on a script succeeding, and never use visibility:hidden: a
   failed load must leave a live module, not a full-height hole.

   ---------------------------------------------------------------------------
   5 · CARD SYSTEM
   ---------------------------------------------------------------------------
   Restrained 1px keyline. CORNER RADIUS 10px. No shadow, no gradient, no imagery, no
   calendar tile, no date box, no badge, no pill, no equal-height cell.
   Existing tokens only; no new colours, type sizes or spacing steps.

   RADIUS, changed 3 August. Square corners were the original rule. They are now
   10px, on every surface in the module: card, shops teaser and page closer, with
   6px on the rail buttons to match the .btn radius the module already renders.
   Three reasons: the homepage build reported 0px corners as a DEFECT, since the
   intended radius token was undefined there; every other card on the site is
   rounded (.hub 10px, .trip 9px, .ccard and .dcard --r-md, .fcard --r), so a
   square event card was the outlier rather than the rule; and on the homepage
   the card sits within a screen of .hub and .trip, where square reads as a
   different system rather than a deliberate choice.
   10px is a literal, deliberately, NOT var(--r-md): --r-md is 8px in
   bond-system.css and 10px in the homepage's alias layer, so the token would
   render two different cards on two pages. One value at convergence, then this
   becomes a token. To reverse the whole decision, set these four radii to 0.

   Order inside a card is fixed, and identical in all three placements:
     date · category · name · description · price · action
   The action is pinned to the bottom with margin-top:auto.

   HEIGHT: cards are a STANDARD HEIGHT in every placement. The rail stretches to
   one height across the set; the grid stretches per row. A ragged row of cards is
   not acceptable.

   The cost of that is unavoidable and worth understanding: the height is set by
   the LONGEST record in the set, so every card pays for the worst case. Two
   things follow. The card's internal rhythm is deliberately tight - the date,
   name and description sit close, and only the gap above the action is generous -
   so the standard height is as low as the content allows. And the fastest way to
   reduce it further is EDITORIAL: shorten the longest approved description in
   the data. Never clamp or truncate copy in CSS to buy back height.

   GROUND: every card, and the shops teaser, sits on --surface-alt. One ground
   colour sitewide, so an event is the same recognisable object on all four
   pages. Do NOT tint a section behind them - parchment on parchment erases the
   cards. Sections are separated by a rule, never by a fill.

   ---------------------------------------------------------------------------
   6 · CATEGORY, NOT ORGANISER
   ---------------------------------------------------------------------------
   The eyebrow under the date is the CATEGORY: Makeup, Skincare, Fragrance, Baby,
   Kids, Home, Fashion, Food, Technology, Festival, Talk. A required data field
   with a fixed vocabulary, never derived from the event name.

   It replaced an organiser line that read "John Lewis" on every card, repeating
   the heading and telling the visitor nothing. The organiser is not lost: .org
   is emitted automatically as a second line whenever a set actually mixes
   organisers, so a Bond Street event can never be read as a John Lewis one
   (Ruling 1). Set a step smaller than the date and in --muted, so the date leads
   in accent and the category labels it underneath rather than competing.

   ---------------------------------------------------------------------------
   7 · WORDING
   ---------------------------------------------------------------------------
   Headings and programme links come from ONE table, WORDING in
   js/events-review.js, keyed by placement. No page contains a literal heading.

     placement  heading                          programme link
     home       Upcoming events at John Lewis    View all upcoming events
     shops      Upcoming events at John Lewis    View all upcoming events at John Lewis
     mission    Upcoming events at John Lewis    View all upcoming events at John Lewis
     tenant     Upcoming events                  View all upcoming events on Eventbrite

   The venue is named wherever the visitor could be anywhere on the site. The
   tenant page is the exception: its own h1 and every heading around it already
   say where you are. The homepage link does not repeat the venue its own heading
   just stated.

   Individual event CTAs are decided by DESTINATION, never hard-coded:
     an Eventbrite listing            Book on Eventbrite
     an Eventbrite listing not bookable  View on Eventbrite
     the Eventbrite programme         View all upcoming events on Eventbrite
     our own tenant page              View all upcoming events
   Spelling is Eventbrite. Not "Event Brite".

   NEVER USE: Book now · Get tickets · Read more · Find out more · View event ·
   Full programme at John Lewis · Discover What's On.

   PRICE IS NEVER INSIDE A CTA. It renders as its own line above the button, in
   the same position, weight and colour whether it reads £15.00 or Free. Neither
   may read as a promotional badge.

   British English. No em-dashes in user-facing copy. No heading ends in a full
   stop. .punch (Escrow) is not used anywhere in this module: dates and event
   names are clerical, and qa.js gates on faux-italic.

   ---------------------------------------------------------------------------
   8 · ORDER, AND HOW MANY
   ---------------------------------------------------------------------------
   Records sort by NEXT AVAILABILITY, not by closing date. A recurrence flagged
   runningNow is open today and sorts as today; ties break on the closing date so
   the series finishing soonest leads. Sorting by closing date buries what can be
   booked this afternoon behind single events weeks away, and on a page with a
   maximum it pushes them off the site entirely.

   Per-page maximums live in BS_EVENT_MAX in js/events-data.js:
     home 10 (a rail scrolls, so its ceiling is not a layout constraint)
     shops 1 (the compact directory teaser)
     mission 2 (the two static cards the brief locks)
     tenant 10 (the programme destination owns the full set)
   Expired records are never shown. These four placements filter to John Lewis.

   ---------------------------------------------------------------------------
   9 · ACCESSIBILITY AND QA GATES
   ---------------------------------------------------------------------------
   No automatic movement: the rail never autoplays and has no pagination dots.
   Controls are native <button type="button"> with accessible names, and are
   disabled at each end of the rail.
   Tap targets are min-height:44px with centred flex. NEVER line-height:44px,
   which breaks the moment a label wraps.
   Focus styles are the system's outline; never suppressed.
   Smooth scrolling sits inside prefers-reduced-motion: no-preference.
   Grid and flex children carry min-width:0 and names carry
   overflow-wrap:anywhere, so a long name cannot force horizontal scroll. The
   DOCUMENT must never scroll sideways at 390px; only the rail may.
   No heading-level skips: a non-heading name on the homepage, .t-h2 on the
   mission page, .stmt on the tenant page.
   The 96px --junction is untouched; the module never touches main's padding.

   ---------------------------------------------------------------------------
   10 · ANCHOR
   ---------------------------------------------------------------------------
   The tenant section is id="upcoming-events" and every internal programme link
   points at it, so those links land on the listing rather than the top of the
   page. It carries scroll-margin-top so the sticky header never covers the
   heading it just took the visitor to.

   ---------------------------------------------------------------------------
   NAMES (house convention: short, system-named, NOT BEM)
   ---------------------------------------------------------------------------
     .upev            generated section wrapper
     .upev--onaccent    variant for the homepage teal band
     .upev--panel       variant for the tenant page programme section
     .upev-head       heading row: the h element + the programme link
     .upev-head .all  the programme link
     .upev-foot       the programme link when it sits at the foot
     .evrail          horizontal rail, native scrolling + scroll snap
     .evrail--single    one card: no snap, no controls, capped width
     .evnav           previous / next buttons
     .evgrid          two-column card grid
     .evcard          the card
     .evcard .when      the date label
     .evcard .when .cat   category eyebrow
     .evcard .when .org   organiser; emitted ONLY when a set mixes organisers
     .evcard .nm        event name
     .evcard .desc      approved summary; omitted when none exists
     .evcard .price     price; its own line, never inside the action
     .evcard .foot      price + action, pinned to the bottom of the card
     .evteaser        the compact shops-directory teaser
     .azrow--ev       the one A-to-Z row that carries a teaser
     .evcloser        the panel that closes a page carrying the module

   ONE LITERAL IN THE WHOLE BLOCK: .evcard .nm is 19px, which is exactly
   .dcard h3 and .offers__nm, the system's existing row and card title size.
   There is no token for it. If you would rather it were named, add --t-row:19px
   to the token block and update the three call sites.
   ========================================================================== */

/* --- section shell ------------------------------------------------------- */
.upev{margin-top:var(--s-7);min-width:0}
.sec.upev{margin-top:0}
.upev-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3) var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-5)}
.upev-head>h2,.upev-head>h3{margin:0}
.upev-head .all{font-size:var(--t-small);font-weight:600;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.upev-foot{margin-top:var(--s-5)}
.upev-foot .all{font-size:var(--t-small);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.upev .tc{margin-bottom:var(--s-4)}

/* --- the card ------------------------------------------------------------ */
/* position:relative is load-bearing: .vh is position:absolute, and inside the
   scroll rail an unpositioned ancestor would let the visually-hidden spans of
   off-screen cards lay out against the page and extend documentElement's
   scrollWidth. The card must be their containing block. */
.evcard{position:relative;display:flex;flex-direction:column;min-width:0;background-color:var(--surface-alt,#F4F0E8);border:1px solid var(--line-strong,#cdc4b4);border-radius:10px;box-shadow:none;padding:clamp(16px,1.8vw,22px)}
/* Keep the date to ONE line: it is the first thing in the card, so a wrap here
   pushes the category and name down and breaks alignment against the cards
   beside it. The rule is enforced in the data (about 20 characters, see
   js/events-data.js), and text-wrap:balance splits it evenly if a longer label
   ever gets through rather than leaving one orphaned word. */
.evcard .when{font-size:var(--t-small);font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);line-height:1.3;margin-bottom:var(--s-2);text-wrap:balance}
/* the eyebrow under the date is the CATEGORY. Set a step smaller than the date
   and in --muted, so the two tracked lines read as a hierarchy rather than
   competing: date leads in accent, category labels it underneath. .org appears
   only when a set actually mixes organisers. */
.evcard .when .cat{display:block;font-size:var(--t-tiny);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);margin-top:var(--s-1)}
.evcard .when .org{display:block;font-size:var(--t-tiny);font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}
.upev--onaccent .evcard .when .cat,.upev--onaccent .evcard .when .org{color:var(--body)}
.evcard .nm{font-family:var(--font-sans);font-weight:600;font-size:19px;line-height:1.22;color:var(--ink);overflow-wrap:anywhere;text-wrap:pretty;margin-bottom:var(--s-2)}
.evcard .desc{font-size:var(--t-small);color:var(--body);line-height:1.5;text-wrap:pretty}
.evcard .foot{margin-top:auto;padding-top:var(--s-5);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.evcard .price{font-size:var(--t-small);font-weight:600;color:var(--ink)}
.evcard .go.btn{min-height:44px}
/* The booking button must stay white-on-ink wherever it lands. Host components
   can out-specify .btn--primary on colour: .azrow .go sets accent teal, which
   left the shops-teaser button teal text on an ink fill. Restated here at
   0,3,0 so it wins in every placement, arrow included. */
.upev .evcard .go.btn--primary,.evteaser .acts .go.btn--primary{color:#fff}
.upev .evcard .go.btn--primary:hover,.evteaser .acts .go.btn--primary:hover{color:#fff}

/* Colour is restated at .upev depth so the card survives inside a coloured
   band: .home .jl p{color:#fff} would otherwise win on specificity. */
.upev .evcard .when{color:var(--accent)}
.upev .evcard .when .org{color:var(--muted)}
.upev .evcard .nm{color:var(--ink)}
.upev .evcard .desc{color:var(--body)}
.upev .evcard .price{color:var(--ink)}


/* OUTBOUND ARROW: removed on merge. bond-system.css already draws this device
   globally via .lnk-ext::after (D303, 30 July) with the same masked SVG. One owner. */

/* --- rail (homepage) ----------------------------------------------------
   Flex, not grid auto-columns: in an overflowing grid the tracks fall back to
   their minimum, so the card count would be decided by content instead of by us.
   The basis sets how many cards are in view: 28% shows about three and a half on
   desktop, so the rail reads as a programme with more to come rather than a pair
   of cards. Below 26rem a card cannot hold a two-line name, a description and a
   44px action without cramping, which is the floor in the clamp. */
/* align-items:stretch (the flex default, restated because it is a decision):
   every card in the rail is the SAME height, so the module reads as one band
   rather than a ragged row. The consequence is that the height is set by the
   longest record in the set, which is why the card's internal rhythm below is
   tight - that worst case is the height every card pays for. */
.evrail{min-width:0;display:flex;align-items:stretch;gap:var(--s-4);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;padding-block:var(--s-1) var(--s-4);scrollbar-width:thin}
.evrail>.evcard{flex:0 0 clamp(14.5rem,28%,22rem);scroll-snap-align:start}
.evrail--single{display:grid;grid-template-columns:minmax(0,min(100%,34rem));overflow:visible;scroll-snap-type:none;padding-bottom:0}
.evrail--single>.evcard{flex:none}
@media(prefers-reduced-motion:no-preference){.evrail{scroll-behavior:smooth}}
/* tablet: three in view. mobile: 88% so part of the next card shows. */
@media(max-width:1080px){.evrail>.evcard{flex-basis:clamp(14.5rem,38%,20rem)}}
@media(max-width:760px){.evrail>.evcard{flex-basis:88%}}

/* the head's right-hand group: the programme link and, on the homepage only, the
   rail arrows. A class, not an inline style, so the homepage build and the
   generated markup agree. */
.upev-head .allwrap{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}

.evnav{display:flex;gap:var(--s-2)}
.evnav button{appearance:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:background var(--dur-fast) var(--ease)}
/* D313 - rail arrows are DRAWN, not typed. Gotham has no glyph for U+2190 or
   U+2192, so the character fell back to Arial or rendered as a tofu box. */
.evnav button::before{content:"";width:17px;height:17px;flex:none;background-color:currentColor;
  -webkit-mask:var(--nav-glyph) center/contain no-repeat;mask:var(--nav-glyph) center/contain no-repeat}
.evnav button[data-events-previous]{--nav-glyph:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 3.2 5 8l4.8 4.8'/%3E%3C/svg%3E")}
.evnav button[data-events-next]{--nav-glyph:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.2 11 8l-4.8 4.8'/%3E%3C/svg%3E")}

.evnav button:hover:not(:disabled){background:var(--surface-alt);border-color:var(--accent);color:var(--accent)}
.evnav button:disabled{opacity:.38;cursor:default}

/* --- grid (mission, tenant) --------------------------------------------- */
.evgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.evgrid>.evcard:only-child{max-width:38rem}
@media(max-width:760px){.evgrid{grid-template-columns:minmax(0,1fr)}}

/* --- ON-ACCENT VARIANT: the homepage John Lewis teal band ---------------
   Full width beneath both columns of the band. Cards take the warm parchment
   ground so the programme reads clearly against the teal. */
.upev--onaccent{grid-column:1/-1;min-width:0;margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid rgba(255,255,255,.28)}
/* The band's own grid uses bare `fr` tracks, whose automatic minimum is the
   spanning item's min-content; the rail's card minimums would otherwise blow the
   first track out and overflow the document. minmax(0,…) removes that floor.
   Same tracks, same proportions, no visual change to the band. */
.home .jl .wrap>.in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.upev--onaccent .upev-head>h3{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:var(--t-h3);line-height:1.2;letter-spacing:0;text-transform:none;color:#fff;max-width:none}
.upev--onaccent .upev-head .all{color:#fff;text-decoration:underline;text-underline-offset:4px}
.upev--onaccent .upev-head .all:hover{color:#fff;text-decoration-thickness:2px}
.upev--onaccent .evcard{border-color:rgba(21,18,15,.16)}
.upev--onaccent .evnav button{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.upev--onaccent .evnav button:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.upev--onaccent .evrail{scrollbar-color:rgba(255,255,255,.5) transparent}

/* --- PANEL VARIANT: the tenant page, the programme destination ----------
   ONE card ground sitewide: every card and the shops teaser sit on
   --surface-alt, so an event looks the same object wherever it appears. That
   means the panel itself can no longer be tinted — parchment on parchment would
   erase the cards. The section is instead delineated by a rule above the
   heading and by the block of tinted cards, which on this white, text-heavy
   page reads harder than a tinted panel with white cards did. */
/* D319 - the module now carries the page's tonal break, taking over from the
   'Regular in-store events' promo box removed above it. The break sits around the
   real listings rather than a description of them, so the keyline is no longer
   needed: the ground change separates it. Full-bleed ground, contained content. */
.upev--panel{padding:clamp(34px,4vw,56px) 0;margin:clamp(26px,3.4vw,44px) 0;
  background:var(--surface-alt);
  box-shadow:0 0 0 100vmax var(--surface-alt);clip-path:inset(0 -100vmax)}
/* D320 - on the cream panel the cards were the same value as their ground, so only
   the keyline separated them. White lifts each card off the panel. Scoped to this
   variant: on the white mission page and the teal homepage rail, cream is correct. */
.upev--panel .evcard{background-color:var(--surface,#fff);border-color:var(--line,#e3ddd0)}

/* the section is an anchor target: the shops teaser and the other internal
   module links land on it, so it must clear the sticky header */
.upev--panel{scroll-margin-top:calc(var(--nav-h,71px) + var(--s-6))}

/* --- COMPACT TEASER: inside the John Lewis A-to-Z entry ----------------- */
.azrow--ev{flex-wrap:wrap}
/* A tinted block, not just a ruled paragraph: against the white A-to-Z rows the
   warm parchment ground is what makes the event read as a separate thing rather
   than more directory metadata. This is the ground every card uses, on all four
   pages. Square corners, 1px keyline, no shadow, as everywhere else. */
.evteaser{flex:1 0 100%;min-width:0;margin-top:var(--s-4);padding:clamp(13px,1.5vw,17px) clamp(14px,1.6vw,18px);background-color:var(--surface-alt,#F4F0E8);border:1px solid var(--line,#e3ddd0);border-radius:10px}
.evteaser .eyebrow{display:block;margin-bottom:var(--s-2)}
.evteaser .line{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;text-wrap:pretty}
.evteaser .line time{color:var(--accent)}
.evteaser .acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);margin-top:var(--s-3)}
.evteaser .acts .go.btn{min-height:44px}
.evteaser .acts .all{font-size:var(--t-small);font-weight:600;min-height:44px;display:inline-flex;align-items:center}

/* --- PAGE CLOSER: the panel that ends a page carrying the module -----------
   Was a block of inline one-offs with a rounded radius, which put it outside the
   card system on the one page where it sits directly under two event cards.
   Named here so it takes the same 10px corners, the same keyline and the same
   drawn outbound arrow, and so the sheet's rule against one-off styles holds.

   Spacing: the button and the follow line are two separate registers, not a
   stacked pair, so the gap between them is --s-6 rather than the --s-4 that read
   as a crowded orphan. The panel's own padding is the card padding, one step up,
   because it spans the full measure. */
.evcloser{background-color:var(--surface-alt,#F4F0E8);border:1px solid var(--line-strong,#cdc4b4);border-radius:10px;padding:clamp(26px,3.2vw,40px) clamp(20px,3vw,38px);text-align:center}
.evcloser>*+*{margin-top:var(--s-6)}
.evcloser .btn{min-height:48px}
.evcloser .flw{font-size:var(--t-small);color:var(--muted);line-height:var(--lh-body);max-width:52ch;margin-left:auto;margin-right:auto}
.evcloser .flw a{white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════════
   §8 BOND STREET TURNS 10 — event campaign page (Release 1, rev. 31 Jul 2026)
   Author: Claude Design. Namespaced .event10-*; canonical tokens, breakpoints,
   focus and motion conventions only; no new colour and no new type scale. Every
   rule exists because no production rule delivers it — audit in
   event10-build-notes.md §4. Nothing here can match markup on the other 22 pages.
   Serves both page states: bond-street-turns-10.html (publication-safe) and
   review/bond-street-turns-10-full-content-review.html (internal mock-up).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 8.1 HERO ACTION — .mhero ships without a CTA row (the five missions carry none)
   and the only hero CTA row in the system is scoped .home. One action only. */
.event10-cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:clamp(20px,2.6vw,30px)}

/* 8.2 INTERNAL MOCK-UP BAR — removed on merge: review-only, deliberately off-brand. */

/* 8.3 PARTNERSHIP AND HOSTS — co-branded panel. The footer .cfy lock-up is a small
   footer credit; this is a page module that must carry two named blocks of copy
   beside the partner mark, which no production component does. */
.event10-part{display:grid;grid-template-columns:minmax(160px,210px) 1fr;gap:clamp(20px,3vw,44px);
  align-items:start;background:var(--surface-alt);border-radius:var(--r-md);padding:clamp(20px,2.6vw,32px)}
.event10-part__mark{display:block;width:100%;height:auto}
.event10-part__blocks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,36px)}
.event10-part h3{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-family:var(--font-sans)}
.event10-part p{font-size:14.5px;color:var(--body);line-height:1.6;max-width:46ch}
@media(max-width:760px){
  .event10-part{grid-template-columns:1fr;gap:20px}
  .event10-part__mark{max-width:190px}
  .event10-part__blocks{grid-template-columns:1fr;gap:18px}}

/* 8.4 WHAT TO EXPECT — five image-led cards (Revision 3; replaces the Revision 2
   icon-only hairline grid). The card itself is the production contained image card
   .ccard; the only new grammar is the composition — a 3+2 row rhythm on a six-column
   track so five items never leave an orphaned cell. The cards carry no link, so the
   .ccard hover lift is suppressed (the .dcard--pending precedent). Images are shown
   at their native 4:3, so nothing is cropped. */
/* D366 - the 'What to expect' intro was removed in the 7 August copy pass. .sec-head
   carries no bottom margin because a paragraph always followed it, so the heading
   sat 6px off the cards. */
.event10-what{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(18px,2.2vw,30px)}
.event10-what__card:hover{transform:none;box-shadow:none}
.event10-what__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* four summary items on a 2x2: larger images, and an even grid at every width */
@media(max-width:760px){.event10-what{grid-template-columns:1fr}}

/* 8.5 PROGRAMME — one component for both states. Ruled rows on a
   [time | activity | type] grid: the publication-safe page runs it without the time
   column (.event10-prog--preview), the confirmed running order runs it with times in
   semantic <time>. Rows, not cards, so a seventeen-item schedule stays compact and
   scannable; plain markup, no accordion, nothing requires JavaScript. */
.event10-prog{border-top:1px solid var(--line-strong);margin-top:16px;list-style:none}
.event10-prog__item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;
  gap:6px clamp(14px,2vw,26px);align-items:baseline;padding:13px clamp(12px,1.4vw,16px);
  border-bottom:1px solid var(--line);border-left:3px solid transparent}
.event10-prog--preview .event10-prog__item{grid-template-columns:minmax(0,1fr) auto;padding-top:16px;padding-bottom:16px}
.event10-prog__when{font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.35;
  color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.event10-prog__when time+time::before{content:"\2013";color:var(--muted);margin:0 1px}
.event10-prog__b h3{font-family:var(--font-sans);font-weight:600;font-size:16.5px;color:var(--ink);line-height:1.3}
.event10-prog__d{font-size:13.5px;color:var(--body);line-height:1.55;max-width:62ch;margin-top:3px}
.event10-prog__loc{font-size:12px;color:var(--muted);margin-top:4px}
/* recurring music slots are distinguished by badge treatment only: every activity
   title stays one size and one weight so the list never reads as a size/weight ramp */
.event10-prog__badge{display:inline-block;font-size:10px;font-weight:var(--fw-bold);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.event10-prog__item[data-type="quiz"] .event10-prog__badge,
.event10-prog__item[data-type="spoken"] .event10-prog__badge,
.event10-prog__item[data-type="business"] .event10-prog__badge{color:var(--accent);border-color:var(--accent)}
.event10-prog__item[data-type="opening"] .event10-prog__badge,
.event10-prog__item[data-type="closing"] .event10-prog__badge{color:var(--ink);border-color:var(--ink)}
/* the fixed birthday moment — the .notice idiom (accent tint + 3px accent rule).
   Colour is never the only signal: the row also gains weight, a filled badge and
   the words "Birthday moment". No tinted infill and no extra padding: the row keeps the
   same box as every other row, so the schedule reads as one even list. Title SIZE is
   deliberately not changed: three rows at
   three sizes read as an accidental ramp rather than as one emphasised row. */
.event10-prog__item--highlight{border-left-color:var(--accent)}
.event10-prog__item--highlight .event10-prog__b h3{font-weight:600;color:var(--ink)}
.event10-prog__item--highlight .event10-prog__badge{background:var(--accent);border-color:var(--accent);color:#fff}
/* footer row: the action leads, and both notes sit as one left-aligned text column
   beside it, optically centred on the button rather than orphaned beneath it */
.event10-prog__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(16px,2vw,24px);margin-top:clamp(18px,2.2vw,26px)}
.event10-prog__notes{display:flex;flex-direction:column;gap:5px;min-width:0}
/* D314 - was white-space:nowrap, which forced 'Participating businesses will be added
   here as they are confirmed' to 440px and scrolled the page sideways at 390px.
   The line must wrap; the dot aligns to the first line rather than the block centre. */
.event10-prog__status{font-size:13px;color:var(--ink);display:flex;align-items:flex-start;
  gap:9px;line-height:1.5;text-wrap:pretty}
.event10-prog__status::before{content:"";flex:0 0 7px;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--accent)}
.event10-prog__hint{font-size:12.5px;color:var(--muted);line-height:1.45;text-wrap:pretty}
.event10-prog__hint span{margin-right:3px}
.event10-prog__ast{margin-left:2px;font-weight:400}
@media(max-width:700px){
  .event10-prog__item,.event10-prog--preview .event10-prog__item{grid-template-columns:1fr auto;gap:4px 12px}
  .event10-prog__when{grid-column:1;grid-row:1}
  .event10-prog__badge{grid-column:2;grid-row:1}
  .event10-prog__b{grid-column:1/-1;grid-row:2}}

/* 8.6 PARTICIPATING BUSINESSES — text-led entry cards. The contribution is the
   heading and the business name sits under it, which inverts every production card
   (.ccard/.dcard/.ctile all lead on the name), so the grammar is new. Filters and
   the empty state reuse canonical .fbar/.fchip/.empty-state. */
.event10-biz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px}
.event10-biz__cat{font-size:10px;font-weight:var(--fw-bold);letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.event10-biz h3{font-family:var(--font-sans);font-weight:600;font-size:17.5px;color:var(--ink);line-height:1.28}
.event10-biz__by{font-size:12.5px;color:var(--muted)}
.event10-biz__d{font-size:13.5px;color:var(--body);line-height:1.55}
.event10-biz__when{font-size:12.5px;color:var(--ink);font-family:ui-monospace,Menlo,monospace;
  border-top:1px solid var(--line);padding-top:9px;margin-top:4px}
.event10-biz__terms{font-size:11.5px;color:var(--muted);line-height:1.45}
.event10-biz .btn{align-self:flex-start;margin-top:8px}

/* 8.7 MAKE A DAY OF IT — one compact two-part text module, replacing two large
   feature splits. .ev-grid is a media/copy lead split; this is copy | copy on a rule. */
/* 8.x HERO ART — the tenth-birthday key visual is artwork, not photography: the two
   numerals must stay whole, so this one poster is contained on its own background
   instead of cover-cropped. Scoped to the event10 hero only. */
/* IMG-01 is artwork, not photography: it is supplied as a 1:1 master with the numerals
   inside a centred safe area, so it covers the panel full-bleed at every width and only
   background is ever cropped. The shared mKen slow-zoom is stilled — it scales the
   poster past the panel and would bite into the numerals. */
.mstage__poster.event10-hero__art{animation:none;transform:none}
.event10-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);
  border-top:1px solid var(--line-strong);padding-top:clamp(18px,2.2vw,26px)}
.event10-two__media{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-md);margin-bottom:clamp(14px,1.7vw,20px)}
.event10-two h3{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);color:var(--ink);margin-bottom:8px}
.event10-two p{font-size:14.5px;color:var(--body);line-height:1.6;max-width:46ch}
@media(max-width:760px){.event10-two{grid-template-columns:1fr;gap:22px}}

/* 8.9 SECTION ENTRANCE — IMG-09 gives the participating-business section an editorial
   opening. The split itself is the production .ev-grid lead split; this adds only the
   media rule, again at native 4:3 so the approved crop is kept. */
.event10-entrance__media{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)}

/* 8.8 DAY-OF ALERT — prepared for material operational changes only; no empty alert
   renders. Slim single line carrying its own update time. */
.event10-alert{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;background:var(--accent-tint);
  border:1px solid var(--accent);border-radius:var(--r);padding:11px 16px;margin-bottom:14px}
.event10-alert__k{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.event10-alert__m{flex:1 1 260px;font-size:14px;color:var(--ink);line-height:1.5}
.event10-alert__t{font-size:12px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}

/* D322 - the John Lewis hours table was held at 590px by a two-column split whose
   second column was a contact card containing one useful fact. The card is gone,
   the table has the full measure, and the phone number sits directly beneath it. */
/* D322b - full width stranded the two columns on the left of a 1152px table with
   a large empty right side. A seven-row, two-column table wants a reading measure,
   not the full grid. Capped, and the Hours column pulled in beside the Day column. */
.hours-table-wrap,#coreHours{max-width:640px}
#coreHours th:first-child,#coreHours td:first-child{width:44%}
.hours-call{margin-top:18px;font-size:15px;color:var(--body)}
.hours-call a{color:var(--accent);font-weight:600;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.hours-call a:hover{color:var(--accent-deep)}

/* ==========================================================================
   5.33  PLAN YOUR VISIT  (4 August 2026, D329)
   Delivered as a separate /css/plan-your-visit.css. Folded in here: the site has
   one shared stylesheet, and a per-page file would start a pattern where the next
   page gets its own too. Nothing else in this section is changed.
   ========================================================================== */
/* ============================================================
   PLAN YOUR VISIT — CSS delta, 4 August 2026 (Claude Design)
   Every new selector is prefixed .pv*. No existing selector is
   redefined except .maplink.lnk-ext::after (see NOTE at the end).
   Uses bond-system.css tokens only; no new colours, no new radii.
   New selectors, in source order:
     --pv-arrow (token)   .pvhead   .pvhead__copy   .pvhead .stand
     .pvhead__media   .pvcard   .pvcard h2 / h2 a   .pvcard p
     .pvcard--lead   .pvrow   .pvfind   .pvfind__map   .pvfind__t
     .pvfind__links   .pvdot   .pvrule   .pvstrip (+ .pvstrip .hub)
   ============================================================ */

/* Drawn arrow. Gotham has no U+2192/U+2197 glyph, so the card cue is an
   SVG mask tinted with the accent, never a typed character. */
:root{--pv-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.7 2.3 7.3 3.7 10.6 7H1v2h9.6l-3.3 3.3 1.4 1.4L15 8z'/%3E%3C/svg%3E")}

/* 1 · PAGE HEAD — copy beside a reduced image band (replaces the 16x9 .pagehero) */
.pvhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,37%);gap:clamp(18px,3vw,40px);align-items:center;margin:4px 0 clamp(22px,3vw,34px)}
.pvhead .stand{font-size:var(--t-lead);color:var(--body);line-height:1.5;margin-top:10px;max-width:46ch;text-wrap:pretty}
.pvhead__media{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--surface-alt)}
.pvhead__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 2 · PRACTICAL CARD — heading is the only link; it also covers the card face,
   so the whole card is one target without a second (nested) anchor. */
.pvcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,22px) clamp(17px,1.9vw,22px);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.pvcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-1);border-color:var(--line-strong)}
.pvcard h2{font-family:var(--font-sans);font-weight:600;font-size:19px;line-height:1.2;color:var(--ink);margin-bottom:7px}
.pvcard h2 a{color:inherit;text-decoration:none}
.pvcard h2 a::before{content:"";position:absolute;inset:0;border-radius:inherit}
.pvcard h2 a::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.4em;background:var(--accent);-webkit-mask:var(--pv-arrow) no-repeat center/contain;mask:var(--pv-arrow) no-repeat center/contain;transition:transform var(--dur-fast) var(--ease)}
.pvcard h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pvcard:hover h2 a::after{transform:translateX(3px)}
.pvcard h2 a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.pvcard p{font-size:14px;color:var(--body);line-height:1.55;text-wrap:pretty}

/* 3 · LEAD CARD — full width, first. Same keyline as the three below (4 Aug):
   prominence comes from position, width, padding and type size only.
   No heavier border, no badge, no flag. */
.pvcard--lead{padding:clamp(19px,2.3vw,28px) clamp(19px,2.3vw,30px)}
.pvcard--lead h2{font-size:var(--t-h3);margin-bottom:9px}
.pvcard--lead p{font-size:15.5px;max-width:68ch}

/* 4 · THREE SUPPORTING CARDS — equal weight, no invented hierarchy, never a carousel */
.pvrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(12px,1.4vw,18px)}

/* 5 · FIND US */
.pvfind{display:grid;grid-template-columns:minmax(0,43%) minmax(0,1fr);gap:clamp(16px,2.2vw,30px);align-items:center;margin-top:clamp(18px,2.4vw,30px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(13px,1.5vw,18px)}
.pvfind__map .ar{border-radius:var(--r);overflow:hidden}
.pvfind__t h2{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);line-height:1.2;color:var(--ink);margin-bottom:8px}
.pvfind__t p{font-size:14.5px;color:var(--body);line-height:1.6;max-width:52ch;text-wrap:pretty}
.pvfind__links{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:12px;font-size:14px}
.pvdot{color:var(--line-strong)}

/* 6 · CLOSING STRIP — hairline rule, no eyebrow, no heading. Holds the homepage
   destination-card module (.hub) verbatim, on the canonical .more-grid--3 grid.
   The .hub component itself is still scoped to `.home` in bond-system.css, so
   these six rules re-home it here, declaration-for-declaration. Delete them the
   moment `.home .hub` is de-scoped to `.hub` in the system sheet. */
.pvrule{border:0;border-top:1px solid var(--line-strong);margin:clamp(26px,3.2vw,42px) 0 clamp(16px,2vw,22px)}
.pvstrip .hub{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.pvstrip .hub:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(21,18,15,.1)}
.pvstrip .hub .pic{position:relative;aspect-ratio:4/3;background:var(--surface-alt)}
.pvstrip .hub .pic.cine::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 70px rgba(21,18,15,.16);pointer-events:none}
.pvstrip .hub .pic img{width:100%;height:100%;object-fit:cover}
.pvstrip .hub .hb{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.pvstrip .hub h3{font-family:var(--font-sans);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:6px}
.pvstrip .hub p{font-size:13px;color:var(--body);line-height:1.5;flex:1}
.pvstrip .hub .go{margin-top:14px;font-size:11px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.pvstrip .hub .go::after{content:"";width:.72em;height:.72em;background:var(--accent);-webkit-mask:var(--pv-arrow) no-repeat center/contain;mask:var(--pv-arrow) no-repeat center/contain;transition:transform var(--dur-fast) var(--ease)}
.pvstrip .hub:hover .go::after{transform:translateX(3px)}

/* 7 · Undecorated links added later in the CMS must not fall back to browser blue */
.pvhead a:not([class]),.pvcard p a:not([class]),.pvfind a:not([class]){color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.pvhead a:not([class]):hover,.pvcard p a:not([class]):hover,.pvfind a:not([class]):hover{color:var(--accent-deep)}

/* 8 · REFLOW — single column by 760px; usable at 320px and 400% zoom.
   The three-card row stacks in source order; it never scrolls sideways. */
@media(max-width:900px){.pvhead{grid-template-columns:1fr;gap:clamp(14px,2.4vw,20px)}.pvhead .stand{max-width:none}}
@media(max-width:760px){.pvrow{grid-template-columns:1fr}.pvfind{grid-template-columns:1fr}.pvfind__t p{max-width:none}}

@media(prefers-reduced-motion:reduce){.pvcard,.pvcard h2 a::after,.pvstrip .hub,.pvstrip .hub .go::after{transition:none}.pvcard:hover,.pvstrip .hub:hover{transform:none}.pvcard:hover h2 a::after,.pvstrip .hub:hover .go::after{transform:none}}

/* NOTE — the one existing selector touched.
   The brief's Find us map markup carries class="maplink lnk-ext", and
   .lnk-ext::after prints a U+2197 character. Inside .maplink (a block-level
   anchor wrapping the map image) that character lands as a stray glyph under
   the map, and the "opens in a new tab" job is already done three times over:
   the aria-label, the .vh span and the visible "Open in Google Maps" cue.
   Suppressed for that pairing only. */
.maplink.lnk-ext::after{content:none}


/* D335 - the whole row is already a link, but 'View shop' repeated 31 times read as
   the only tap target and added a 30px line to every row. A right-aligned chevron is
   the platform convention for a tappable row, sits in the easy thumb arc, and returns
   roughly 930px of scrolling to the list. Each row now carries its own aria-label,
   so screen readers no longer hear 'View shop' thirty-one times. */
.azrow .go{width:18px;height:18px;flex:none;background-color:transparent;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230C6B5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230C6B5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center/contain no-repeat;
  background-color:var(--accent);font-size:0;line-height:0}
.azrow .go::after{content:none}

/* D337 - cards on the teal band lose their border. --line is #e3ddd0, chosen to sit
   at 1.35:1 on a white or cream ground, where it is a whisper. On the teal accent it
   measures 4.73:1 and outlines the card, which is why these read as cut-outs pasted
   onto the band while the identical cards on the homepage look right. The white card
   is already 6.40:1 against teal, so it separates without help. */
/* border:0, not border-color:transparent. A transparent border still occupies 1px,
   and the card's white background shows through it, which left a hairline white band
   framing every image. */
.r1 .mcard,.r1 .dcard,.r1 .ccard{border:0}
.r1 .mcard:hover,.r1 .dcard:hover,.r1 .ccard:hover{border:0}

/* ==========================================================================
   5.34  PLAN YOUR VISIT - CONTACT ROUTING  (5 August 2026, D341)
   Four destinations, ranked. The two visitor routes lead; the Bond Street email
   and the commercial page sit beneath at lower weight. Previously this block
   reused .pvfind, a two-column map layout, so the copy sat in a 479px column
   inside an 1152px card with no gap between paragraphs.
   ========================================================================== */
/* D345 - the footer Contact link landed the section flush with the viewport top,
   putting the heading under the 71px sticky header. The offset clears the header
   with room to spare so the title reads first, matching #opening-hours and the
   events panel. */
.pvcontact{scroll-margin-top:calc(var(--nav-h,71px) + 30px);
  margin-top:clamp(18px,2.4vw,30px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,32px)}
.pvcontact>h2{font-family:var(--font-sans);font-weight:600;font-size:var(--t-h3);
  line-height:1.2;color:var(--ink);margin:0 0 clamp(16px,2vw,22px)}
/* D344 - three equal routes on one row. The secondary block and its dividing rule
   are gone: with no generic email there is no lesser tier, so all three read at the
   same weight. Two columns between 761 and 1080 where three would crush the measure. */
.pvcontact__pair{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px)}
@media(max-width:1080px) and (min-width:761px){.pvcontact__pair{grid-template-columns:1fr 1fr}}
.pvcontact__route{display:flex;flex-direction:column}
.pvcontact__route p{font-size:15px;color:var(--body);line-height:1.6;margin:0 0 10px;
  max-width:44ch;text-wrap:pretty}
.pvcontact__route p:last-child{margin-bottom:0}
.pvcontact__route p.pvcontact__k,.pvcontact__k{font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.pvcontact__route p.pvcontact__big{font-size:22px;font-weight:600;line-height:1.25;margin:2px 0 10px}
/* D342: one line, not two. A border-bottom on an inline-flex with min-height:44px
   draws at the foot of the tap box, 12 to 16px below the text, while the site's
   own underline sits under the glyphs. Underline only; the tap target comes from
   padding, which grows the hit area without moving the line away from the word. */
.pvcontact__big a{color:var(--accent);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;display:inline-block;padding-block:9px}
.pvcontact__big a:hover{color:var(--accent-deep)}
.pvcontact__route p.pvcontact__note{font-size:13.5px;color:var(--muted)}
.pvcontact__route p.pvcontact__cta{margin-top:auto}
.pvcontact__cta a{display:inline-block;padding-block:13px;font-weight:600}
@media(max-width:760px){
  .pvcontact__pair{grid-template-columns:1fr;gap:22px}
  .pvcontact__route+.pvcontact__route{padding-top:20px;border-top:1px solid var(--line)}
}


/* D362 - the footer lock-up is a link to the home page so it behaves like the
   header logo. It was a <span>, so it looked like a logo but did nothing when
   clicked. Appearance unchanged: no hover, no focus ring, no transition. */

/* ==========================================================================
   COMMERCIAL ENQUIRY BAND  (7 August 2026, D363)
   Two labelled routes rather than one paragraph pointing elsewhere: pop-ups and
   advertising go to the media partner, leasing to the two named agents. Every
   destination is a link, so nobody has to scroll back up to find a number.
   ========================================================================== */
.cenq{padding:clamp(22px,2.6vw,30px) clamp(24px,2.8vw,32px)}
main .cenq h2.cenq__h{font-family:var(--font-sans);font-weight:600;font-size:20px;line-height:1.2;color:#fff;text-transform:none;letter-spacing:0;margin:0 0 clamp(16px,2vw,22px)}
.cenq__routes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.cenq__k{font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.78);margin:0 0 10px}
.cenq__mail{margin:0}
main .cenq p > a:not(.pill):not(.btn):not(.go),main .cenq li > a:not(.pill):not(.btn),.cenq a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.55);display:inline-block;padding-block:13px}
main .cenq p > a:not(.pill):not(.btn):not(.go):hover,main .cenq li > a:not(.pill):not(.btn):hover,.cenq a:hover{color:var(--surface-alt);text-decoration-color:currentColor}
.cenq a:focus-visible{outline:2px solid #fff;outline-offset:3px}
main .cenq p.cenq__mail > a:not(.pill):not(.btn):not(.go){font-size:16px;font-weight:600}
.cenq__agents{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cenq__agents li{display:flex;flex-direction:column;align-items:flex-start}
.cenq__name{font-size:14.5px;font-weight:600;color:#fff}
main .cenq li > a:not(.pill):not(.btn){font-size:14px;padding-block:12px}
@media(max-width:760px){
  .cenq__routes{grid-template-columns:1fr;gap:26px}
  .cenq__route+.cenq__route{padding-top:22px;border-top:1px solid rgba(255,255,255,.22)}
}
/* D362 - the lock-up must keep font-size:0 now it is an anchor: .footer__grid a
   sets 14px at higher specificity, which leaked the wordmark text above the black
   box and turned it teal on hover. */
.footer__grid a.footer__logo{font-size:0;line-height:0;color:transparent}

/* ==========================================================================
   COMMERCIAL ENQUIRY BLOCK  (7 August 2026, D363)
   Replaces the 50/50 grid, which forced a 143px route to match a 302px one and
   left 159px of empty teal at desktop, 187px of imbalance stacked. Routes are
   now full-width and content-height, separated by a hairline; the two agents
   are the only thing that shares a row, and they carry equal weight.
   Contacts are buttons: they are the payload and were reading as body copy.
   ========================================================================== */
.cenq--v2{display:block;container-type:inline-size;margin-top:30px;
  background:var(--band-teal);color:#fff;border-radius:var(--r-md);
  padding:clamp(22px,2.6vw,30px) clamp(24px,2.8vw,32px)}
/* hijack-proof: outspecifies any .band h2 display-caps cascade should the block
   ever sit inside a band wrapper again (D-enq2: it must not — see markup note) */
/* the Leasing block links down to this heading; the offset clears the 71px header */
main .cenq--v2 h2.cenq2__h,.cenq2__h{scroll-margin-top:calc(var(--nav-h,71px) + 30px);
  font-family:var(--font-sans);font-weight:600;font-size:20px;
  line-height:1.2;color:#fff;text-transform:none;letter-spacing:0;margin:0 0 clamp(14px,1.8vw,18px)}
.cenq2__route+.cenq2__route{margin-top:clamp(16px,2vw,22px);
  padding-top:clamp(16px,2vw,22px);border-top:1px solid rgba(255,255,255,.28)}
.cenq2__lab{font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 11px}
.cenq2__acts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.cenq2__agents{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.cenq2__agent{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.cenq2__name{font-family:var(--font-sans);font-size:16px;font-weight:600;color:#fff}
.cenq2__firm{font-family:var(--font-sans);font-size:13px;color:rgba(255,255,255,.72);
  margin-bottom:8px}
.cenq2__agent .cenq2__acts{margin-top:auto}
/* the base .btn--onaccent resolves to ink-on-ink because two rules collide in the
   sheet; scoped here so the payload buttons are white on the teal as intended */
/* .cenq a and .band p > a both force an underline; buttons must not carry one */
/* .cenq a and .band p > a both force an underline; buttons must not carry one.
   Geometry is left to the base .btn: min-height 48px with no vertical padding, the
   same as every other button on the site. white-space:normal only so a long email
   can wrap on a narrow screen; the flex box grows past 48px when it does. */
/* .cenq a and .band p > a both force an underline; buttons must not carry one.
   Geometry is left to the base .btn. overflow-wrap:anywhere broke the longest email
   at whatever character happened to fall at the edge, leaving a single letter on the
   second line at 375 and 390px. The label scales down instead so each address holds
   one line, with break-word kept only as a last resort below the point that works. */
.cenq--v2 .btn,.band .cenq--v2 p>a,.cenq--v2 li>a{overflow-wrap:break-word;
  white-space:nowrap;text-align:center;text-decoration:none}
/* 15px to match the on-teal primary in the homepage John Lewis band, which is the
   only other button sitting on this ground. The outlined phone variant is new: the
   homepage secondary there is an underlined text link, which would read as lesser
   beside a solid white button when the two are alternatives, not a hierarchy. */
.cenq--v2 .btn{font-size:15px}
.cenq--v2 .btn--onaccent{background:#fff;color:var(--ink);border-color:#fff}
.cenq--v2 .btn--onaccent:hover{background:var(--accent-tint);border-color:var(--accent-tint);color:var(--ink)}
.cenq--v2 .btn--line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65)}
.cenq--v2 .btn--line:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
/* the site-wide blue focus ring sits at low contrast on teal */
.cenq--v2 a:focus-visible{outline:3px solid #fff;outline-offset:2px}
@container (max-width:860px){
  .cenq2__agents{grid-template-columns:1fr;gap:22px}
  .cenq2__agent+.cenq2__agent{padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
}
@container (max-width:640px){
  .cenq2__acts{flex-direction:column;align-items:stretch}
  .cenq--v2 .btn{width:100%}
}
/* narrow screens: the longest email is 31 characters, so the label steps down
   rather than wrapping mid-word. Placed after the 15px rule so it wins on order. */
@media(max-width:430px){
  .cenq--v2 .btn{font-size:13px;padding-inline:14px}
}
@media(max-width:359px){
  .cenq--v2 .btn{font-size:12px;padding-inline:10px}
}
@supports not (container-type:inline-size){
  @media(max-width:900px){
    .cenq2__agents{grid-template-columns:1fr;gap:22px}
    .cenq2__agent+.cenq2__agent{padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
  }
  @media(max-width:680px){
    .cenq2__acts{flex-direction:column;align-items:stretch}
    .cenq--v2 .btn{width:100%}
  }
}

/* ==========================================================================
   SONGS BUFFET - SITTINGS AND PRICES  (7 August 2026, D364)
   The only tenant priced by sitting rather than by day, and the only one that
   closes between lunch and dinner. The day table stays so "can I go on Tuesday
   evening" and the today highlight work as on every other tenant page; this
   second table carries what the day table cannot express, which is that the
   price changes with the sitting. Reuses .tariff; the numeric columns are the
   only addition.
   ========================================================================== */
.sb-h{font-family:var(--font-sans);font-weight:600;font-size:16px;color:var(--ink);
  margin:clamp(22px,2.6vw,30px) 0 8px}
.sb-tariff th:nth-child(3),.sb-tariff th:nth-child(4),
.sb-tariff td:nth-child(3),.sb-tariff td:nth-child(4){
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* .tenant-hours .tariff caps at 420px, which suits two columns; four needs more */
.tenant-hours .sb-tariff,.sb-tariff{max-width:640px}
.sb-tariff td:nth-child(2){min-width:0}
.sb-notes{list-style:none;margin:12px 0 0;padding:0}
.sb-notes li{position:relative;padding-left:14px;font-size:13.5px;color:var(--muted);
  line-height:1.55;margin-bottom:4px}
.sb-notes li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;
  background:var(--line-strong)}
@media(max-width:560px){
  .sb-tariff th,.sb-tariff td{padding:10px 10px;font-size:13px}
  .sb-tariff th:first-child,.sb-tariff td:first-child{padding-left:14px}
  .sb-tariff th:last-child,.sb-tariff td:last-child{padding-right:14px}
}

/* D365 - the mission pages each repeated the same parking, directions and step-free
   answers. One signpost replaces them; the dedicated pages own the detail. */
.gtk-signpost{flex:1 0 100%;margin-top:clamp(14px,1.8vw,20px);font-size:14.5px;color:var(--body)}

/* D366 - the repeated FAQs were consolidated on 7 August, which removed the block
   that used to sit under the Good to know heading. .gtk__top carried no bottom
   margin because content always followed it directly. */
.gtk__top{margin-bottom:clamp(10px,1.4vw,18px)}
/* D370 - .gtk__top carries a rule below it and the first .qblk carries one above.
   They used to sit flush and read as a single line; the margin above separated them
   into two. The heading rule is the separator, so the first question drops its own. */
.gtk__top+.qblk{border-top:0}

/* ==========================================================================
   OPTICAL ALIGNMENT, PAGE HEAD  (7 August 2026, D367)
   The boxes align on the grid, but every glyph carries its own left side
   bearing, so the ink does not: measured on Things to Do at 1440, H 1.5px,
   T 3.0px, I 2.0px, F 3.5px. A 2px spread, invisible at 100% but plain at
   the sizes display type is read. Pulling each back by roughly its own
   bearing lands the ink on the grid rather than the box.
   Expressed in em so it tracks the type size. Scoped to the plain page head,
   not the hero bands, which set their own measure.
   ========================================================================== */
.wrap--read .t-h1{margin-left:-.052em}
.wrap--read .lead{margin-left:-.028em}
.wrap--read .t-h2{margin-left:-.055em}
/* the mission pages use their own head component */
.mhero__copy h1{margin-left:-.052em}
.mhero__copy .stand{margin-left:-.028em}