/* ==========================================================================
   LONGBRIDGE MANOR — base stylesheet
   --------------------------------------------------------------------------
   Colour system (client directive, verbatim in CLIENT-DIRECTIVES.md):

     Manor Ivory       #F4E8D4   DOMINANT website canvas
     Longbridge Green  #17352C   PRIMARY brand colour
     Ink               #171715   Typography / contrast
     Regatta Red       #8D2435   Dramatic accent
     Faded Rose        #E2A9A1   Wedding/warm accent
     Estate Gold       #D29B45   MICRO-DETAIL ONLY — never bg, never headline
     Midnight          #20253C   After-dark chapter only (Cause a Scene)
     Warm White        #FCF8F1   Neutral variation
     Estate Stone      #B8AE9F   Borders / UI support

   "A normal screen gets 2–3 of these. Not 6."
   Enforced structurally: each page sets data-chapter; the chapter block
   defines exactly --bg / --fg / --accent. Components reference chapter
   custom properties, never raw palette values. Two shared-chrome pieces
   (green CTA banner, footer) are exempt per client ruling.
   ========================================================================== */

:root {
  /* The nine, and only the nine. Plus one measured canvas adjustment:
     client mockups sample rgb(244,237,231) #F4EDE7 for the dominant page
     canvas — a neutral warm off-white, NOT Manor Ivory (their memo says
     ivory is dominant but their mockups don't use it that way; mockups win).
     Manor Ivory #F4E8D4 stays only for the nav bar, chapter-tab strip and
     any alternating section bands. */
  --canvas:     #F4EDE7;
  --ivory:      #F4E8D4;
  --lb-green:   #17352C;
  --ink:        #171715;
  --regatta:    #8D2435;
  --rose:       #E2A9A1;
  --gold:       #D29B45;
  --midnight:   #20253C;
  --warm-white: #FCF8F1;
  --stone:      #B8AE9F;

  /* Shared chrome exemption (client ruling): green CTA banner + footer. */
  --chrome-bg:   var(--lb-green);
  --chrome-fg:   var(--ivory);
  --chrome-link: var(--gold); /* micro-detail arrows on green only */

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
}

/* --------------------------------------------------------------------------
   CHAPTERS — one chapter = max 3 palette colours, set via data-chapter.
   -------------------------------------------------------------------------- */

/* Weddings: Ivory + Ink, Rose accent.
   Red section numerals are the approved executed design (client ruling). */
[data-chapter="weddings"] {
  --bg: var(--canvas);
  --fg: var(--ink);
  --accent: var(--rose);
  --accent-soft: rgba(226, 169, 161, 0.35);
  --numeral: var(--regatta);
  --hairline: rgba(23, 23, 21, 0.18);
}

/* Estate: Ivory + Green + Ink */
[data-chapter="estate"] {
  --bg: var(--canvas);
  --fg: var(--ink);
  --accent: var(--lb-green);
  --hairline: var(--stone);
}

/* Cause a Scene (= CELEBRATE): Midnight + Ivory, Regatta accent.
   Midnight is earned here by the after-dark chapter. */
[data-chapter="scene"] {
  --bg: var(--midnight);
  --fg: var(--ivory);
  --accent: var(--regatta);
  --hairline: rgba(252, 248, 241, 0.25);
}
/* Dark-chapter component tints: cards and banners go translucent ivory
   instead of warm-white; eyebrows carry the Regatta accent. */
[data-chapter="scene"] .card,
[data-chapter="scene"] .inline-banner { background: rgba(244, 232, 212, 0.07); }
[data-chapter="scene"] .eyebrow { color: var(--regatta); }
[data-chapter="scene"] .card .capacity { opacity: 0.7; }

/* Stay: Ivory + Midnight + Ink */
[data-chapter="stay"] {
  --bg: var(--canvas);
  --panel: var(--warm-white);
  --fg: var(--ink);
  --accent: var(--midnight);
  --hairline: var(--stone);
}
/* Stay's dark panel variant: Midnight (not the Film page's green). */
[data-chapter="stay"] .dark-note { background: var(--midnight); }

/* Enquiries: Ivory + Green + Ink, tiny gold detail (micro-detail only) */
[data-chapter="enquiries"] {
  --bg: var(--canvas);
  --fg: var(--ink);
  --accent: var(--lb-green);
  --hairline: rgba(23, 23, 21, 0.18);
}

/* Film & Production: no assignment in directive #2.
   Default Ivory + Green + Ink per build brief — flagged to client. */
[data-chapter="film"] {
  --bg: var(--canvas);
  --fg: var(--ink);
  --accent: var(--lb-green);
  --hairline: var(--stone);
}
[data-chapter="film"] .dark-note { background: var(--lb-green); }

/* Our Story: Ivory + Green + Ink (fallback agreed with client — directive
   #2 assigns no palette to this page). Approach eyebrow runs green here,
   not the weddings red. */
[data-chapter="story"] {
  --bg: var(--canvas);
  --fg: var(--ink);
  --accent: var(--lb-green);
  --hairline: var(--stone);
}
[data-chapter="story"] .approach .eyebrow { color: var(--lb-green); }

/* Homepage: no assignment in directive #2; hero mockup runs Ivory/Ink with
   gold micro-detail. Flagged. */
[data-chapter="home"] {
  --bg: var(--canvas);
  --fg: var(--ink);
  --accent: var(--lb-green);
  --hairline: var(--stone);
}

/* Eat & Drink: Ivory + Ink with one deliberate Regatta Red moment (the
   feature banner). Full page built on the shared component library. */
[data-chapter="eat"] {
  --bg: var(--canvas);
  --fg: var(--ink);
  --accent: var(--regatta);
  --hairline: var(--stone);
}

/* --------------------------------------------------------------------------
   RESET + BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

p { margin: 0 0 1em; }

a {
  color: inherit;
  text-decoration: none;
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.chrome :focus-visible { outline-color: var(--chrome-link); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

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

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  background: var(--ivory);
  color: var(--ink);
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   EYEBROWS, NUMERALS, STAR MARK, ARROW LINKS
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 10px;
}

/* Section numerals 01–09. Weddings chapter: Regatta Red (approved executed
   design). Elsewhere they inherit the chapter accent. */
.numeral {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  line-height: 1;
  color: var(--numeral, var(--accent));
  font-style: normal;
  display: block;
  margin-bottom: 10px;
}

/* Estate Gold micro-detail: the small star mark. Never a bg, never text. */
.star-mark {
  display: inline-block;
  color: var(--star-mark);
  font-size: 1rem;
  line-height: 1;
  margin: 6px 0 14px;
}

.arrow-link {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: gap 0.2s ease;
}
.arrow-link .arrow { transition: transform 0.2s ease; }
.arrow-link:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   HEADER / NAV (shared chrome, ivory bar on all pages)
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--ivory);
  border-bottom: 1px solid var(--stone);
}
[data-chapter="scene"] .site-header {
  background: var(--ivory); /* chrome stays ivory; page body is Midnight */
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
}

.brand { flex: 0 0 auto; display: inline-flex; align-items: center; }

.monogram {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
/* Monogram is the "Lb." lockup — nav per brand guide item #10. */

.primary-nav { margin-left: auto; }

.primary-nav ul {
  display: flex;
  gap: clamp(14px, 2.2vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover { border-bottom-color: var(--stone); }
.primary-nav a[aria-current="page"] {
  border-bottom-color: var(--regatta);
  color: var(--regatta);
}
/* Active nav tint: the mockups show a red underline + red text on the
   current page's nav item. This is shared chrome (nav), matching the
   approved executed design on items #2–#7. */

.btn-viewing {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 18px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-viewing:hover { background: var(--ink); color: var(--ivory); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  padding: 8px 10px;
  cursor: pointer;
  margin-left: auto;
  flex: 0 0 auto;
}
.nav-toggle .bars {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--ink);
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after  { top: 6px; }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--stone);
    padding: 18px 24px;
  }
  .primary-nav.open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 4px; }
  .primary-nav a { display: block; padding-block: 10px; font-size: 0.85rem; }
  .nav-cta { margin-left: 0; margin-top: 14px; align-self: flex-start; }
}

/* BOOK A VIEWING lives inside the nav list, pushed to the far right */
.nav-cta { margin-left: auto; }

/* Homepage nav: transparent bar over the hero photo, but the text stays
   dark ink (readable against the pale overcast sky after the grade fix).
   Interior pages keep the solid ivory bar. */
[data-chapter="home"] .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  border-bottom: 0;
}
[data-chapter="home"] .primary-nav a,
[data-chapter="home"] .btn-viewing,
[data-chapter="home"] .nav-toggle,
[data-chapter="home"] .nav-toggle .bars,
[data-chapter="home"] .nav-toggle .bars::before,
[data-chapter="home"] .nav-toggle .bars::after { color: var(--ink); border-color: var(--ink); background-color: transparent; }
[data-chapter="home"] .nav-toggle .bars,
[data-chapter="home"] .nav-toggle .bars::before,
[data-chapter="home"] .nav-toggle .bars::after { background: var(--ink); border: 0; }
[data-chapter="home"] .primary-nav a:hover { border-bottom-color: var(--ink); }
[data-chapter="home"] .primary-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
[data-chapter="home"] .btn-viewing:hover { background: var(--ink); color: var(--ivory); }
@media (max-width: 960px) {
  /* Mobile dropdown still needs a solid panel for legibility */
  [data-chapter="home"] .primary-nav {
    background: var(--ink);
    border-bottom-color: var(--stone);
  }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--ivory);
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media { isolation: isolate; }
/* Mandatory scrim: bottom-weighted, sits between image and text layer.
   Strengthened after pixel sampling: at 0.55 the background behind the
   headline measured rgb(165,161,158) = 2.15:1 against cream — below the
   3.0:1 large-text minimum. 0.92 at the bottom edge clears 4.5:1. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(23,23,21,0) 40%, rgba(23,23,21,0.92) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding-bottom: 56px;
}

/* Logotype is anchored to the TOP of the hero, not centred against the
   full container — it must sit in open sky and clear the roofline on any
   photo, regardless of how much sky that photo carries. The logotype
   block's height is capped within the sky band so sky + roofline always
   come below it. */
.hero-logotype {
  position: absolute;
  top: clamp(72px, 12vh, 140px);
  left: 0;
  right: 0;
  text-align: center;
  color: var(--ink); /* mockup #1: dark script over pale sky */
}
.hero-logotype .script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.4rem, 10vw, 7.5rem);
  line-height: 0.95;
  display: block;
}
.hero-logotype .manor {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  text-transform: uppercase;
  display: block;
  margin-top: 10px;
}
.hero-logotype .locale {
  font-family: var(--font-ui);
  letter-spacing: 0.3em;
  font-size: 0.68rem;
  display: block;
  margin-top: 8px;
}
.hero-logotype .star-mark { color: var(--gold); margin-top: 10px; }

.hero-overlay {
  max-width: 560px;
  color: var(--ivory);
  text-shadow: 0 1px 18px rgba(23, 23, 21, 0.45);
}
.hero-overlay h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.hero-overlay .arrow-link { color: var(--ivory); }

.hero-pause {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(252, 248, 241, 0.7);
  background: rgba(32, 37, 60, 0.35);
  color: var(--ivory);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   CHAPTER TAB STRIP (Weddings one-pager)
   -------------------------------------------------------------------------- */

.chapter-tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ivory);
  border-bottom: 1px solid var(--stone);
}
.chapter-tabs ul {
  display: flex;
  gap: clamp(12px, 2vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chapter-tabs li { flex: 0 0 auto; }
.chapter-tabs a {
  display: block;
  padding: 16px 2px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}
.chapter-tabs a:hover { border-bottom-color: var(--stone); }
.chapter-tabs a.active {
  color: var(--regatta);
  border-bottom-color: var(--regatta);
}

/* --------------------------------------------------------------------------
   NUMBERED SECTION PATTERN
   -------------------------------------------------------------------------- */

.numbered {
  padding-block: clamp(56px, 8vw, 96px);
  border-bottom: 1px solid var(--hairline);
}
.numbered:last-of-type { border-bottom: 0; }

.numbered-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.numbered-grid > * { min-width: 0; }

.numbered-copy .star-mark { color: var(--star-mark); }

.section-photo img {
  width: 100%;
  height: clamp(260px, 40vw, 460px);
  object-fit: cover;
}
.section-photo figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  padding-top: 8px;
}

@media (max-width: 820px) {
  .numbered-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   CARD GRID
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
/* minmax(0,1fr): placeholder .ph blocks carry aspect-ratio + min-height,
   which would otherwise floor each track at their min-content width
   (267px+) and force horizontal overflow below ~900px (QA finding). */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.estate-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Grid items also need min-width:0 — min-content (e.g. unwrappable
   uppercase figcaptions) would otherwise overflow the 1fr track. */
.card-grid > * { min-width: 0; }
@media (max-width: 1020px) {
  .estate-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .estate-grid { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid var(--hairline);
  background: var(--warm-white);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.card h3 {
  font-size: 0.82rem;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.card p { font-size: 0.92rem; margin: 0; }
.card .capacity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: auto;
}
.card .arrow-link { margin-top: 4px; }

.capacity svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   INLINE BANNER (asides: Religious Ceremonies, Bespoke Drinks, etc.)
   -------------------------------------------------------------------------- */

.inline-banner {
  display: grid;
  grid-template-columns: 64px minmax(0, 200px) minmax(0, 1fr) minmax(0, 160px);
  align-items: center;
  gap: 20px;
  border: 1px solid var(--hairline);
  background: var(--warm-white);
  padding: 22px 26px;
  margin-top: 32px;
}
.inline-banner .banner-icon { font-size: 1.5rem; line-height: 1; }
.inline-banner h3 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.inline-banner p { margin: 0 0 8px; font-size: 0.92rem; }
.inline-banner .arrow-link { justify-self: end; }
@media (max-width: 820px) {
  .inline-banner { grid-template-columns: 1fr; gap: 10px; }
  .inline-banner .arrow-link { justify-self: start; }
}

/* --------------------------------------------------------------------------
   TINTED FEATURE BANNER (Rose / Red per page)
   -------------------------------------------------------------------------- */

.feature-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  padding: 30px 34px;
}
.feature-banner.rose { background: var(--rose); color: var(--ink); }
/* Regatta Red feature banner — the single deliberate "Red moment" on the
   Eat & Drink chapter, and the accent banner on Celebrate. */
.feature-banner.red { background: var(--regatta); color: var(--ivory); }
.feature-banner .script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}
.feature-banner p { margin: 0 0 10px; font-size: 0.95rem; }
.feature-banner .arrow-link { justify-self: end; }
@media (max-width: 820px) {
  .feature-banner { grid-template-columns: 1fr; }
  .feature-banner .arrow-link { justify-self: start; }
}

/* --------------------------------------------------------------------------
   DARK CTA BANNER — shared chrome exemption (Longbridge Green, every page)
   -------------------------------------------------------------------------- */

.cta-banner {
  background: var(--chrome-bg);
  color: var(--chrome-fg);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
}
.cta-banner .cta-copy {
  padding: clamp(36px, 6vw, 64px);
  display: grid;
  gap: 14px;
  align-content: center;
}
.cta-banner h3 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-style: italic;
  margin: 0;
}
.cta-banner p { margin: 0; font-size: 0.95rem; }
.cta-banner .arrow-link { color: var(--chrome-link); }
.cta-banner .cta-photo { position: relative; min-height: 220px; }
.cta-banner .cta-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 700px) {
  .cta-banner { grid-template-columns: 1fr; }
  .cta-banner .cta-photo { min-height: 180px; }
}

/* --------------------------------------------------------------------------
   CHECKLIST ("The Long Bridge Approach", Access & Logistics)
   -------------------------------------------------------------------------- */

.checklist {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.checklist li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 0.95rem;
}
.checklist .tick {
  color: var(--gold);
  font-size: 0.85rem;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   INFO PILLARS (The Details / Production Services)
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
  margin-block: 40px;
}
.pillars > * { min-width: 0; }
.pillar {
  background: var(--bg);
  padding: 34px 26px;
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
  min-width: 0;
}
.pillar .pillar-icon { font-size: 1.6rem; line-height: 1; }
.pillar h3 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.pillar p { font-size: 0.9rem; margin: 0; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* Film page layout helpers */
.film-locations { margin-top: 0; }
/* The locations grid sits in the narrow right column of .numbered-grid;
   4 columns only fit at full desktop width. Below 1200px viewport the
   column drops to ~500px, tighter than the longest figcaption word
   ("Conservatory") — 2 columns until it fits (QA finding). */
@media (max-width: 1200px) {
  .film-locations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.film-locations figcaption {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 4px 0;
}
.film-services {
  margin-block: 0;
  border-block: 0;
  background: transparent;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) { .film-services { grid-template-columns: 1fr; } }
.film-services .pillar {
  border: 1px solid var(--hairline);
  background: var(--warm-white);
  text-align: left;
  justify-items: start;
}

/* Dark note box (Discretion & Security) — Longbridge Green chapter accent */
.dark-note {
  background: var(--lb-green);
  color: var(--ivory);
  padding: 30px 32px;
  max-width: 460px;
  margin-top: -120px;
  margin-left: auto;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}
.dark-note .dark-icon { color: var(--gold); font-size: 1.2rem; }
.dark-note p { margin: 0; font-size: 0.95rem; }
@media (max-width: 820px) { .dark-note { margin-top: 0; max-width: none; } }

/* --------------------------------------------------------------------------
   FOOTER — shared chrome, identical on every page
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--chrome-bg);
  color: var(--chrome-fg);
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 28px;
  flex-wrap: wrap;
}
.footer-script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
}
.footer-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(244, 232, 212, 0.35);
}
.footer-locale {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.footer-talk { margin-left: auto; }
.footer-talk .arrow-link { color: var(--chrome-link); }
.footer-social {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(244, 232, 212, 0.5);
  font-size: 0.7rem;
  color: var(--chrome-fg);
}
.footer-social a:hover { border-color: var(--chrome-link); color: var(--chrome-link); }

/* --------------------------------------------------------------------------
   STUB PAGES
   -------------------------------------------------------------------------- */

.stub {
  padding-block: clamp(72px, 12vw, 140px);
  text-align: center;
}
.stub h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.stub .stub-note {
  max-width: 46ch;
  margin-inline: auto;
  border: 1px solid var(--hairline);
  background: rgba(127, 127, 127, 0.08);
  color: var(--fg);
  padding: 26px 30px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   SUB-HERO (Weddings / Film interior pages)
   -------------------------------------------------------------------------- */

.sub-hero {
  position: relative;
  min-height: min(62vh, 560px);
  display: flex;
  overflow: hidden;
  padding-block: 40px;
}
.sub-hero .sub-media,
.sub-hero .sub-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sub-hero .sub-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(23,23,21,0) 25%, rgba(23,23,21,0.55) 100%);
}
.sub-hero .sub-media .ph {
  position: absolute;
  inset: 0;
  height: 100%;
  background: transparent;
  color: rgba(252, 248, 241, 0.85);
  align-content: end;
  justify-items: start;
  text-align: left;
  padding: 0 0 18px 2px;
  min-height: 0;
  font-size: 0.62rem;
  opacity: 0.9;
}
.sub-hero .wrap {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-block: 96px;
}
.sub-hero .eyebrow { color: var(--ivory); }
.sub-hero h1 {
  color: var(--ivory);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 14ch;
}
.sub-hero .script-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--ivory);
  display: block;
  margin-bottom: 12px;
}
.sub-hero .kicker {
  color: var(--ivory);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  max-width: 44ch;
}
.sub-hero .arrow-link { color: var(--ivory); margin-top: 18px; }

/* --------------------------------------------------------------------------
   QUICK-LINK ICON STRIP (Film page, item #7)
   -------------------------------------------------------------------------- */

.quick-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.quick-links > * { min-width: 0; }
.quick-links a {
  background: var(--bg);
  text-align: center;
  padding: 30px 18px;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.quick-links .q-icon { font-size: 1.4rem; }
.quick-links .q-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.quick-links .q-sub { font-size: 0.8rem; opacity: 0.75; }
@media (max-width: 900px) { .quick-links { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   APPROACH BLOCK ("Our way of doing things.")
   -------------------------------------------------------------------------- */

.approach {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-block: clamp(56px, 8vw, 96px);
}
.approach h3 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.approach .eyebrow { color: var(--regatta); }
.approach-media { position: relative; }
.approach-media .we-note {
  position: absolute;
  right: -14px;
  bottom: 26px;
  background: var(--lb-green);
  color: var(--ivory);
  padding: 22px 20px;
  max-width: 220px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.approach-media .we-note .script {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 8px;
  color: var(--gold);
}
@media (max-width: 820px) {
  .approach { grid-template-columns: 1fr; }
  .approach-media .we-note { right: 8px; }
}

/* --------------------------------------------------------------------------
   ENQUIRY FLOW (5 screens per mockup, Ivory + Green + Ink, gold micro-detail)
   -------------------------------------------------------------------------- */

[data-chapter="enquiries"] .flow-shell {
  max-width: 640px;
  margin-inline: auto;
  padding: 32px 24px 72px;
}

.flow-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.flow-head .flow-script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--lb-green);
}
.flow-head .flow-close {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.flow-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 36px;
}
.flow-progress span {
  flex: 1;
  height: 2px;
  background: var(--stone);
}
.flow-progress span.done { background: var(--lb-green); }

.flow-step h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom: 4px;
}
.flow-step .lede { opacity: 0.8; margin-bottom: 30px; }

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--warm-white);
  border: 1px solid var(--stone);
  border-radius: 0;
}
.field textarea { min-height: 110px; resize: vertical; }
.field-hint { font-size: 0.72rem; opacity: 0.65; margin-top: 6px; }

.flow-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
.flow-back {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.flow-next {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--lb-green);
  color: var(--ivory);
  border: 0;
  padding: 14px 22px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.flow-done {
  text-align: center;
  padding-block: 40px;
}
.flow-done .star-mark { color: var(--gold); }
.flow-done h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.flow-done p { max-width: 40ch; margin-inline: auto; opacity: 0.85; }

/* Calendar + time slots (Step 3, per mockup) */
.choose-time {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
}
@media (max-width: 640px) { .choose-time { grid-template-columns: 1fr; } }

.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 0.8rem;
}
.cal-grid .dow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.6;
  padding-block: 6px;
}
.cal-grid button {
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  padding: 9px 0;
  cursor: pointer;
  color: var(--ink);
}
.cal-grid button:disabled { opacity: 0.3; cursor: default; }
.cal-grid button[aria-pressed="true"] {
  background: var(--lb-green);
  color: var(--ivory);
}

.slot-list {
  display: grid;
  gap: 10px;
  align-content: start;
}
.slot-list .slot-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.slot-list button {
  border: 1px solid var(--stone);
  background: var(--warm-white);
  padding: 12px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.slot-list button[aria-pressed="true"] {
  background: var(--lb-green);
  color: var(--ivory);
  border-color: var(--lb-green);
}

/* Generic photo placeholder — reads as an intentional "photography to come"
   panel: warm Manor Ivory → Estate Stone gradient, hairline border, quiet
   letterspaced caption (brief §7) */
.ph {
  background: linear-gradient(160deg, #EAE2D8 0%, #E4DACE 130%);
  border: 1px solid #DDD3C6;
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(23, 23, 21, 0.38);
  min-height: 200px;
  min-width: 0;
  padding: 12px;
}

/* Hero grade, pushed hard toward the client reference: their overcast
   samples rgb(203,202,202) — near-fully desaturated. Our photo's sky
   sampled rgb(136,173,208) (saturated blue) at saturate(0.85). Tuned by
   pixel sampling until the sky reads ~rgb(200,200,200). */
.hero-media img { filter: saturate(0.05) brightness(1.07) contrast(0.98); }

/* Inline SVG icon alignment (brief §7) */
.footer-social a { display: inline-flex; align-items: center; justify-content: center; }
.footer-social a svg { display: block; }
.banner-icon svg, .star-mark svg, .pillar-icon svg, .q-icon svg, .dark-icon svg { display: block; }