/* ================= 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;
  --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}     /* hero, hub section hero, cinema feature */
.ar-21x9{aspect-ratio:21/9}     /* wide map / wayfinding strip */
.ar-4x3{aspect-ratio:4/3}       /* 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){
  html.anim body.tier-rich .reveal{transform:translateY(12px)}
  html.anim body.tier-rich .reveal.in{animation:bsRevIn var(--dur-reveal) var(--ease) both}
  html.anim body.tier-rich .reveal.done{transform:none;animation:none}
}
@keyframes bsRevIn{from{transform:translateY(12px)}to{transform:none}}
/* utility tier never animates content in */
body.tier-utility .reveal{opacity:1;transform:none;animation:none}

/* 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)}
.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}

/* 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}
.lnk-ext::after{content:"\2197";font-weight:600;margin-left:.1em}   /* ↗ 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)}
.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}

/* 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). */
.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:inline-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)}
.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}
.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){
  .azrow{flex-wrap:wrap;gap:6px 12px}
  .azrow .go{flex-basis:100%;order:3}
}

/* 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)}}
/* mobile: media full-bleed FIRST, then copy on paper — matches the homepage stack */
@media(max-width:760px){
  .mhero{grid-template-columns:1fr}
  .mhero__media{order:1;min-height:250px;margin:0 calc(50% - 50vw);border-radius:0}
  .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-block}
  .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}

/* === 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) */
}

/* ===================== 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)}

@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:flex;flex:1 1 auto;flex-wrap:wrap}
.ledger .lg-cell{flex:1 1 auto;padding:14px 18px;min-width:120px}
.ledger .lg-cell+.lg-cell{border-left:1px solid var(--line)}
.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)}
.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}
  .nav__row .nav__burger,.nav .row .burger{order:-1;margin:0}
  .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)}
.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}