@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --navy: #0D1B2A;
  --navy-mid: #1B3350;
  --gold: #C9A84C;
  --gold-light: #E8C97A;
  /* 15 September 2026: the same gold on a cream or white background measures about
     2.1:1, far below the 4.5:1 readable minimum. This is the same hue darkened for use
     on the light sections: 5.27:1 on white, 4.65:1 on cream. Navy sections keep --gold. */
  --gold-ink: #816927;
  --cream: #F5F0E8;
  --cream-dark: #EDE7DB;
  --white: #FFFFFF;
  --text: #1A1A1A;
  --muted: #666055;
  --border: rgba(201,168,76,0.25);
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Jost', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }
/* Held back from view for a moment while a recruitment address is opened, so
   the reader never sees the top of the page slide away. Removed as soon as the
   form is in place and in any case after 1.4 seconds, so it can never stick. */
html.bhh-deeplink body { visibility: hidden; }
html.bhh-deeplink { background: #0D1B2A; }

body {
  font-family: var(--ff-body);
  background: var(--cream);
  color: var(--text);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.eyebrow {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.lead { font-size: 1.1rem; font-weight: 300; line-height: 1.8; color: var(--muted); max-width: 640px; }
.enquire-panel .lead { color: rgba(245,240,232,0.85); }
/* ── Get-in-touch tab icons ──
   Each icon carries its own INACTIVE colour via a single-class selector.
   The ACTIVE tab's icon is overridden to gold by a higher-specificity rule
   (.enquire-tab--active .tab-icon = two classes) so active always wins,
   regardless of source order. Label colours are unaffected (set inline). */
.tab-icon { display: block; flex-shrink: 0; }
.tab-icon--guest   { stroke: #7FA8C9; } /* soft blue */
.tab-icon--host    { stroke: #C4826A; } /* terracotta */
.tab-icon--partner { stroke: #9BB08A; } /* sage green */
.tab-icon--scout   { stroke: #7FB3AE; } /* muted teal */
.tab-icon--transport { stroke: #A991C0; } /* muted violet */
.enquire-tab--active .tab-icon { stroke: var(--gold); }
/* ── Transport & Narrowboat choice cards (interstitial before the shared form) ── */
.transport-choice{ display:flex; gap:1rem; margin:0 0 1.5rem; }
.tchoice{ flex:1; display:flex; flex-direction:column; text-align:left; padding:0; background:rgba(201,168,76,0.05); border:1px solid rgba(201,168,76,0.35); border-radius:6px; overflow:hidden; cursor:pointer; color:var(--cream); font-family:var(--ff-body); transition:border-color .2s, background .2s, transform .2s; }
.tchoice:hover{ border-color:var(--gold); background:rgba(201,168,76,0.12); transform:translateY(-2px); }
.tchoice-media{ display:block; height:120px; overflow:hidden; }
.tchoice-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tchoice-body{ display:block; padding:0.9rem 1rem 1.1rem; }
.tchoice-title{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400; font-size:1.25rem; color:var(--cream); margin-bottom:0.25rem; }
.tchoice-sub{ display:block; font-size:0.78rem; line-height:1.4; color:rgba(245,240,232,0.6); }
.transport-back{ display:inline-block; margin:0 0 1rem; padding:0; background:none; border:none; color:var(--gold); font-family:var(--ff-body); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; }
.transport-back:hover{ text-decoration:underline; }
@media (max-width:600px){ .transport-choice{ flex-direction:column; } } /* active → gold, matches label exactly, wins on specificity */

/* ── LAYOUT ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 7rem 0; }
.section--dark { background: var(--navy); color: var(--cream); }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }

/* ── GOLD DIVIDER ── */
.gold-line {
  width: 60px; height: 1px;
  background: var(--gold);
  margin: 1.5rem 0;
}
.gold-line--center { margin: 1.5rem auto; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0.5rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(13,27,42,0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav-logo { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.nav-logo-img {
  height: 115px;
  width: auto;
  display: block;
}
.nav-logo-text {
  font-family: var(--ff-display);
  font-size: 1.44rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.08em;
}
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.75);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }

/* ── JOIN US DROPDOWN (desktop) ── */
.nav-join { position: relative; }
.nav-join-caret { font-size: 0.85em; margin-left: 0.15rem; }
.nav-join-menu {
  position: absolute; right: 0; top: 100%;
  margin: 0; padding: 0.4rem; min-width: 232px;
  list-style: none;
  background: rgba(13,27,42,0.99);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
}
.nav-join:hover .nav-join-menu,
.nav-join:focus-within .nav-join-menu,
.nav-join.open .nav-join-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-join-menu a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 0.85rem; border-radius: 4px;
  color: var(--cream) !important; white-space: nowrap;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.nav-join-menu a:hover { background: rgba(201,168,76,0.12); color: var(--gold) !important; }

/* ── HAMBURGER + MOBILE MENU ── */
.nav-toggle {
  display: none; background: transparent; border: none; cursor: pointer;
  padding: 0.3rem; color: var(--gold); line-height: 0;
}
.nav-toggle svg { width: 28px; height: 28px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle.is-open .icon-bars { display: none; }
.nav-toggle.is-open .icon-close { display: block; }
.mobile-menu {
  position: fixed; left: 0; right: 0; top: 0; z-index: 95;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1rem 1.5rem 1.6rem;
  background: rgba(13,27,42,0.99);
  border-bottom: 1px solid rgba(201,168,76,0.3);
  backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mobile-menu a {
  color: rgba(245,240,232,0.85); text-decoration: none;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.75rem 0.4rem; border-bottom: 1px solid rgba(245,240,232,0.06);
}
.mobile-menu a:hover { color: var(--gold); }
/* Non-clickable group heading above the 4 "Become a …" links (mobile only).
   Lighter/white and smaller than the links, with a thin gold top-border divider
   matching the menu's own border; its items are indented to read as a group. */
.mobile-menu-heading {
  margin-top: 0.8rem; padding: 0.85rem 0.4rem 0.4rem;
  border-top: 1px solid rgba(201,168,76,0.3);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(245,240,232,0.55);
}
.mobile-menu a.mobile-subitem { padding-left: 1.3rem; }
.mobile-menu .mobile-door {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--cream); border-bottom: none;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 6px; margin-top: 0.4rem; padding: 0.9rem;
  font-weight: 500;
}
.mobile-menu .mobile-door:hover { background: rgba(201,168,76,0.14); color: var(--gold); }
@media (max-width: 768px) { .nav-toggle { display: inline-flex; } }
@media (min-width: 769px) { .mobile-menu { display: none; } }

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s;
  cursor: pointer;
  border: none;
}
.btn-gold {
  background: var(--gold);
  color: var(--navy);
}
.btn-gold:hover { background: var(--gold-light); }
.btn-outline-gold {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.btn-outline-gold:hover { background: var(--gold); color: var(--navy); }
.btn-outline-cream {
  background: transparent;
  border: 1px solid rgba(245,240,232,0.5);
  color: var(--cream);
}
.btn-outline-cream:hover { background: rgba(245,240,232,0.1); }

/* ── HERO ── */
.hero {
  background: var(--navy);
  display: block !important;
  min-height: auto !important;
  position: relative;
  overflow: hidden;
  padding-top: 142px;
}
/* hero-bg removed - using img approach now */
.hero-pattern {
  position: absolute; inset: 0; opacity: 0.03;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 79px,
    rgba(201,168,76,0.8) 79px, rgba(201,168,76,0.8) 80px
  ), repeating-linear-gradient(
    90deg, transparent, transparent 79px,
    rgba(201,168,76,0.8) 79px, rgba(201,168,76,0.8) 80px
  );
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
.hero h1 {
  color: var(--cream);
  margin-bottom: 1.5rem;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.8rem, 5.5vw, 3.8rem);
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lead { color: rgba(245,240,232,0.7); margin-bottom: 2.5rem; max-width: 560px; margin-left: auto; margin-right: auto; font-size: 1.4rem; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
/* hero-scroll removed */
/* Compact hero + trim services top padding so #services is visible on load */
.hero .gold-line--center { margin: 0.1rem auto; }
.hero .eyebrow { font-size: 1.1rem; margin-bottom: 0.6rem; }
@media (max-width: 600px) {
  .hero { padding-top: 161px; }                     /* mobile nav is 151px tall; +10px clearance */
  .hero .lead { font-size: 1.25rem; }               /* scaled up; kept below desktop 1.4rem to avoid heavy wrap at 390px */
}
#services { padding-top: 2rem; }

/* ── SERVICES GRID ── */
.services-intro { text-align: center; margin-bottom: 1rem; }
.services-intro h2 { color: var(--navy); font-size: 2.7rem; }
.services-intro .lead { font-size: 0.92rem; }
.services-intro .gold-line--center { margin: 0.3rem auto; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.services-cat{
  grid-column:1 / -1;
  margin:1.8rem 0 0.5rem;
  font-family:var(--ff-display);
  font-size:1.55rem;
  color:var(--navy);
}
.services-cat:first-child{ margin-top:0; }
.services-cat span{
  display:block;
  font-family:var(--ff-body);
  font-size:0.64rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.25rem;
}
.service-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  text-decoration: none;
}
/* THE HEIGHT CAP IS GONE FROM .services-grid ABOVE. It used to read
   max-height:calc(100vh - 220px) with overflow:hidden, sized for the 3 by 3 desktop grid
   on a tall window. On any window shorter than about 780px the three rows did not fit
   inside that cap and overflow:hidden simply cut rows 2 and 3 off, so a visitor on a wide
   short screen (a television used as a monitor, a laptop with a short viewport) saw three
   cards and had no way to learn the other six existed. Nothing needs to be clipped here:
   the grid is nine cards in normal flow, so it now takes its natural height and the page
   scrolls, at every width and every window height. Phones carried max-height:none and
   overflow:visible to undo the cap; with the cap deleted at source those two are dead and
   have been removed, leaving only align-items:start, which is what actually stops the rows
   stretching, and the per card 4/3 fallback. */
@media (max-width:767px){
  .services-grid{ align-items:start; }
  .services-grid .service-card{ aspect-ratio:4/3; height:auto; }
}

/* RESTING STATE OF THE EXPERIENCE CARDS ON DESKTOP AND TABLET, RESTORED.
   The services section carries an inline display:flex, so its .container is a flex item
   with flex grow 0 and is sized to fit its widest child rather than filling the row. That
   widest child is the section heading. When the long dash came out of "Everything England
   has to offer, privately" the heading measured about 38px narrower, so the container, the
   grid and every card shrank with it: each card lost roughly 10px of height. The number and
   the name sit a fixed distance above the bottom of the card, so on a shorter card they
   rose into the middle of the photo, and on card 01 the name landed on the book. The width
   is now pinned to the value the section had before that heading edit (739px of grid plus
   the 32px padding on each side), so the cards keep their old size and the caption sits
   back at the bottom left no matter what the heading text says. Phones are not affected:
   this rule starts at 768px, and below that the container still shrinks with the viewport
   exactly as it did before. */
@media (min-width:768px){
  #services > .container{ width:100%; max-width:803px; }
}
.service-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.service-card:hover .service-card-img { transform: scale(1.06); }
.service-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0.3) 50%, transparent 100%);
  transition: background 0.4s;
}
.service-card:hover .service-card-overlay {
  background: linear-gradient(to top, rgba(13,27,42,0.97) 0%, rgba(13,27,42,0.5) 60%, rgba(13,27,42,0.1) 100%);
}
/* 17 September 2026: the card heading sits directly on a photograph, and that
   photograph changes every few seconds as the card cycles through its three
   pictures. Measured against the pixels actually behind the words, the heading
   fell as low as 1.8 to 1 on the brightest frames, against the 3 to 1 minimum
   for text this size. The overlay is therefore deepened where the words sit and
   the words carry their own shadow, so that reading them no longer depends on
   which photograph happens to be showing. Phones are untouched: below 768px the
   card text already sits on a solid navy panel. */
/* 18 September 2026, second pass. The veil above ran all the way to the top of
   the card, so the whole photograph was behind it and very little of the picture
   could be seen. It only ever needed to cover the strip the words sit in. The
   card padding is reduced so the name sits lower, and the veil is made stronger
   where the words are and gone entirely by two thirds of the way up. Measured
   across all 25 photograph states at 1440 and 768 pixels, every heading now
   reads higher than it did before this change, the lowest being 3.53 against the
   3 to 1 minimum. */
@media (min-width:768px){
  .service-card-overlay {
    background: linear-gradient(to top, rgba(13,27,42,0.97) 0%, rgba(13,27,42,0.94) 22%,
                                rgba(13,27,42,0.88) 40%, rgba(13,27,42,0.52) 54%, transparent 68%);
  }
  .service-card:hover .service-card-overlay {
    background: linear-gradient(to top, rgba(13,27,42,0.98) 0%, rgba(13,27,42,0.94) 28%,
                                rgba(13,27,42,0.88) 46%, rgba(13,27,42,0.54) 60%, transparent 76%);
  }
  .services-grid .service-card-content{ padding:0.9rem 1.1rem 1rem; }
  .service-card h3 { text-shadow: 0 1px 3px rgba(13,27,42,0.95), 0 0 12px rgba(13,27,42,0.8); }
  /* The 01 / 09 label is decoration. The group heading above each row already
     says which three of the nine these are, and this label carried the worst
     contrast of anything on the page. It is no longer shown. It stays in the
     markup because the phone overlay reads its text. */
  .services-grid .service-card-num { display: none; }
}
.service-card-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem;
}
.service-card-num {
  font-size: 0.65rem; letter-spacing: 0.2em;
  color: var(--gold); margin-bottom: 0.5rem;
  font-family: var(--ff-body); font-weight: 500;
}
.service-card h3 {
  color: var(--cream);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.service-card-desc {
  color: rgba(245,240,232,0.65);
  font-size: 0.85rem;
  line-height: 1.6;
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s;
  opacity: 0;
}
.service-card:hover .service-card-desc { max-height: 80px; opacity: 1; }
.service-card-arrow {
  display: inline-block;
  margin-top: 1rem;
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s;
}
.service-card:hover .service-card-arrow { opacity: 1; transform: translateX(0); }
/* Desktop and tablet hover: the description used to be capped at 80px and the whole text
   block grew upward out of a 192px card, so the "01 / 09" number and the end of every
   description were cut off. On hover the block now compacts (tighter padding, smaller
   heading, smaller description) and the cap is raised to 200px, which is more than the
   longest description needs at this size, so the number, the name, the whole description
   and the arrow all sit inside the card. Phones never show this state. */
@media (min-width:768px){
  .service-card:hover .service-card-content{ padding:0.65rem 0.9rem; }
  .service-card:hover .service-card-num{ font-size:0.55rem; letter-spacing:0.14em; margin-bottom:0.15rem; }
  .service-card:hover h3{ font-size:0.98rem; line-height:1.1; margin-bottom:0.2rem; }
  .service-card:hover .service-card-desc{ max-height:260px; font-size:0.66rem; line-height:1.3; }
  .service-card:hover .service-card-arrow{ margin-top:0.3rem; font-size:0.58rem; }
}
/* Icon-based service cards (no photo) — same format as the photo cards */
.service-card--icon .service-card-overlay {
  background: linear-gradient(to top, rgba(13,27,42,0.95) 0%, rgba(13,27,42,0.55) 45%, rgba(201,168,76,0.05) 100%);
}
.service-card--icon:hover .service-card-overlay {
  background: linear-gradient(to top, rgba(13,27,42,0.97) 0%, rgba(13,27,42,0.6) 55%, rgba(201,168,76,0.08) 100%);
}

/* ── WHO WE SERVE ── */

/* ── PROMISE ── */
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}
.promise-item { text-align: center; }
.promise-num {
  font-family: var(--ff-display);
  font-size: 3.5rem;
  color: var(--gold);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.promise-item h4 { font-size: 1.2rem; color: var(--cream); margin-bottom: 0.5rem; }
.promise-item p { font-size: 0.88rem; color: rgba(245,240,232,0.55); line-height: 1.7; }

/* ── PROCESS ── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 4rem;
  border: 1px solid rgba(201,168,76,0.2);
}
.process-step {
  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(201,168,76,0.2);
  position: relative;
}
.process-step:last-child { border-right: none; }
.process-step-num {
  font-family: var(--ff-display);
  font-size: 4rem;
  color: rgba(201,168,76,0.35);
  line-height: 1;
  margin-bottom: 1rem;
}
.process-step h4 { font-size: 1.2rem; color: var(--cream); margin-bottom: 0.5rem; font-weight:500; }
.process-step p { font-size: 0.92rem; color: rgba(245,240,232,0.8); line-height: 1.7; }

/* ── ABOUT ── */
.credential { text-align: center; }

/* ── FORMS ── */
.form-section { max-width: 720px; margin: 0 auto; }
.form-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.form-panel.active { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
/* Preferred Dates row (was inline styles; moved here unchanged so the phone
   block below can restack it without !important). */
.date-range-row { display: flex; gap: 0.5rem; align-items: center; }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 15 September 2026: was rgba(245,240,232,0.5), measured 4.7:1 on the navy. Small
     uppercase text at that weight reads as faint, so raised to 8.4:1. */
  color: rgba(245,240,232,0.72);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
/* 15 September 2026: the guest form was one undifferentiated ladder of 18 fields.
   These headings break it into four short runs. Presentational only: no field, no field
   name, no validation and no stored value changes. */
.form-section-head{ display:flex; align-items:center; gap:0.7rem; margin:2.2rem 0 1rem; }
.form-section-head > span{
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600; white-space:nowrap;
}
.form-section-head::after{ content:""; flex:1; height:1px; background:rgba(201,168,76,0.25); }
/* The two information panels were boxed in gold, which added to the form-like feel.
   One gold rule down the left says the same thing more quietly. */
.form-note-panel{
  background:none; border:0; border-left:2px solid rgba(201,168,76,0.45);
  border-radius:0; padding:0.15rem 0 0.15rem 1rem;
}

/* 16 September 2026: nine cards in three groups of three, in a two column grid, leaves the
   third card of EVERY group alone with an empty cell beside it. The grid children run
   heading, card, card, card, so the orphan is every fourth child. Centred here, which keeps
   all nine cards the same size. */
@media (max-width:768px){
  .services-grid > .service-card:nth-child(4n){
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 1px);
  }
}
/* ═══ 16 September 2026: small gold TEXT on the light sections ═══
   The brand gold measures about 2.1:1 on cream and 2.3:1 on white, well under the 4.5:1
   readable minimum, and these are wayfinding labels a visitor reads, not ornament. They
   now use --gold-ink, the same hue darkened, which measures 4.65:1 on cream and 5.27:1
   on white. Scoped to the light sections only, so every gold element on navy is
   untouched, where it already measures 7.6:1. Rules, borders, dividers and the large
   ornamental numerals keep the lighter gold on purpose. */
.section--white .eyebrow,
.section--cream .eyebrow,
.section--white .services-cat span,
.section--cream .services-cat span,
.section--white .service-card-num,
.section--cream .service-card-num,
.section--white .service-card-arrow,
.section--cream .service-card-arrow,
.legal-modal-inner .eyebrow{
  color: var(--gold-ink);
}
/* The Heritage Trail label on a card sits over the PHOTOGRAPH, not over the cream, so it
   keeps the lighter gold. Darkening it there took it from 7.6:1 down to 3.3:1. */

/* ═══ 15 September 2026: readability of the enquiry form ═══
   --muted (#666055) is a dark grey chosen for the cream sections, where it is correct.
   Used inside the navy enquiry section it measured 2.79:1, well below the 4.5:1
   readability standard, so the consent lines and the privacy note there now use a cream
   based muted instead. Placeholders carried no colour at all, so each browser supplied
   its own grey, 3.78:1 in Chrome. Nothing outside #enquire is touched. */
:root{ --muted-on-navy: rgba(245,240,232,0.78); }
#enquire input::placeholder,
#enquire textarea::placeholder{ color: rgba(245,240,232,0.55); opacity: 1; }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(245,240,232,0.05);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: 0.9rem;
  font-weight: 300;
  transition: border-color 0.2s;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  background: rgba(201,168,76,0.05);
}
.form-group select option { background: var(--navy); color: var(--cream); }
.form-group textarea { height: 120px; resize: none; }
.form-note {
  font-size: 0.78rem;
  color: rgba(245,240,232,0.35);
  text-align: center;
  margin-top: 1rem;
  line-height: 1.6;
}

/* ── FORM ON CREAM BACKGROUND ── */
.section--cream .form-group label {
  color: var(--muted);
}
.section--cream .form-group input,
.section--cream .form-group select,
.section--cream .form-group textarea {
  background: rgba(13,27,42,0.04);
  border: 1px solid var(--border);
  color: var(--text);
}
.section--cream .form-group input:focus,
.section--cream .form-group select:focus,
.section--cream .form-group textarea:focus {
  border-color: var(--gold);
  background: rgba(201,168,76,0.08);
}
.section--cream .form-group select option {
  background: var(--white);
  color: var(--text);
}

/* ── Languages multi-select (scoped: .langml) ── */
.langml { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
.langml__control { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.langml__select {
  width: 100%; padding: 0.8rem 1rem;
  background: rgba(245,240,232,0.05);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--cream); font-family: var(--ff-body);
  font-size: 0.9rem; font-weight: 300;
  transition: border-color 0.2s, background-color 0.2s;
  outline: none; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.langml__select:focus-visible {
  border-color: var(--gold); background: rgba(201,168,76,0.05);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.55);
}
.langml__select option { background: var(--navy); color: var(--cream); }
.langml__other { display: flex; gap: 0.4rem; }
.langml__other[hidden] { display: none; }
.langml__other-input {
  flex: 1; min-width: 0; padding: 0.65rem 0.8rem;
  background: rgba(245,240,232,0.05);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--cream); font-family: var(--ff-body);
  font-size: 0.85rem; font-weight: 300; outline: none;
  border-radius: 0; -webkit-appearance: none; transition: border-color 0.2s;
}
.langml__other-input:focus-visible {
  border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,0.55);
}
.langml__other-add {
  flex-shrink: 0; padding: 0 0.9rem;
  background: transparent; border: 1px solid var(--gold);
  color: var(--gold); font-family: var(--ff-body);
  font-size: 0.75rem; letter-spacing: 0.04em; cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.langml__other-add:hover { background: var(--gold); color: var(--navy); }
.langml__other-add:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,168,76,0.7); }
.langml__side {
  min-width: 0; padding: 0.55rem 0.65rem;
  background: rgba(245,240,232,0.03);
  border: 1px solid rgba(201,168,76,0.15);
}
.langml__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.langml__chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.35rem 0.3rem 0.7rem;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.45);
  color: var(--cream); font-size: 0.8rem; line-height: 1.2;
  border-radius: 999px; max-width: 100%;
}
.langml__chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langml__chip-remove {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; border: none;
  background: rgba(201,168,76,0.25); color: var(--cream);
  font-size: 0.9rem; line-height: 1; cursor: pointer; padding: 0;
  transition: background-color 0.2s, color 0.2s;
}
.langml__chip-remove:hover { background: var(--gold); color: var(--navy); }
.langml__chip-remove:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,168,76,0.75); }
.langml__empty { margin: 0.1rem 0 0; font-size: 0.78rem; font-style: italic; color: rgba(245,240,232,0.7); } /* 15 September 2026: was 0.4, measured 3.43:1; now 8:1 */
.langml__count { margin: 0.45rem 0 0; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(245,240,232,0.5); }
.langml__error { grid-column: 1 / -1; margin: 0.1rem 0 0; font-size: 0.78rem; color: #E8A0A0; }
.langml__error[hidden] { display: none; }
@media (max-width: 640px) { .langml { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .langml__select, .langml__other-input, .langml__other-add, .langml__chip-remove { transition: none; }
}

/* ── FOOTER ── */
footer {
  background: #080F17;
  color: rgba(245,240,232,0.5);
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(201,168,76,0.15);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.8;
  margin-top: 1rem;
  max-width: 280px;
}
.footer-col h5 {
  font-family: var(--ff-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a {
  color: rgba(245,240,232,0.5);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(201,168,76,0.1);
  padding-top: 2rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem;
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: rgba(245,240,232,0.6); text-decoration: none; font-size: 0.72rem; } /* 16 September 2026: was 0.35, measured 2.94:1 */

/* ── PAGE HERO (inner pages) ── */
.page-hero .lead { margin: 1.5rem auto 0; color: rgba(245,240,232,0.6); text-align: center; }

/* ── SERVICE DETAIL ── */
.service-detail-content .lead { color: rgba(245,240,232,0.65); }

/* ── CONTACT ── */

/* ── ANIMATIONS ── */
.fade-up {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .serve-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .serve-panel:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .promise-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* 15 September 2026: at exactly 768px the services grid fell to ONE column, because the
   single column rule was written max-width:768px while the phone grid rule stops at 767px,
   so that width alone got one tall card per row. Two columns. */
@media (min-width:768px) and (max-width:768px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
  /* remainder of the original block continues below */
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid rgba(201,168,76,0.2); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  nav { padding: 1rem; }
  .nav-links { display: none; }
}

/* ── IMAGE CAROUSEL ── */
.service-card-carousel {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
}
.service-card-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.service-card-carousel img:first-child {
  opacity: 1;
}
.service-card-carousel img.active {
  opacity: 1;
}
.service-card-carousel img.inactive {
  opacity: 0;
}
/* ── PAUSE CONTROL FOR THE EXPERIENCE PHOTOGRAPHS ──
   18 September 2026. The nine experience cards change photograph every 3.5
   seconds on their own, with no way to stop them. Pause, Stop, Hide, at Level
   A, asks for a way to stop moving content that starts by itself, runs for
   more than five seconds and sits beside other content. This control is that
   way. It also honours the setting a visitor can turn on to ask for less
   movement: where that is set nothing rotates and the control offers to start
   it rather than to stop it. */
.motion-control{ display:flex; justify-content:center; margin:1.8rem auto 0; }
.motion-toggle{
  font-family:inherit; font-size:0.8rem; letter-spacing:0.09em; text-transform:uppercase;
  color:#0D1B2A; background:transparent; border:1px solid rgba(13,27,42,0.6);
  border-radius:999px; padding:0.55rem 1.4rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.6rem;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.motion-toggle:hover{ background:rgba(13,27,42,0.07); border-color:#0D1B2A; }
.motion-toggle:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
  box-shadow:0 0 0 6px rgba(13,27,42,0.95);
}
.motion-toggle__glyph{ width:0.7rem; height:0.8rem; flex:none; }
@media (prefers-reduced-motion: reduce){
  .service-card-carousel img{ transition:none !important; }
}

/* Tier card selection — v6 tier block */
.tier-card.selected {
  border: 1.5px solid #C9A84C !important;
  background: rgba(201,168,76,0.18) !important;
}
.tier-card:hover {
  background: rgba(201,168,76,0.12);
}

/* ═══════ v8 COMPACT SERVICE CARDS (horizontal, 2-row flex) ═══════ */
#service-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.service-card-v8 {
  flex: 1 1 calc(33.333% - 0.34rem);
  min-width: 150px;
  border: 0.5px solid #C9A84C;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  background: rgba(201,168,76,0.06);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.service-card-v8:hover {
  background: rgba(201,168,76,0.12);
}
.service-card-v8 .svc-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #F5F0E8;
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.service-card-v8 .service-card-check {
  width: 14px;
  height: 14px;
  border: 1px solid #C9A84C;
  border-radius: 2px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
}
.service-card-v8.selected {
  border: 1.5px solid #0a1d3d !important;
  background: rgba(201,168,76,0.18) !important;
}
.service-card-v8.selected .service-card-check {
  background: #0a1d3d !important;
  border-color: #0a1d3d !important;
}
.service-card-v8.selected .service-card-check::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #C9A84C;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ═══════ v8 PER-SERVICE TIER SLOTS ═══════ */
.tier-slot {
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 0.5px solid rgba(201,168,76,0.2);
}
.tier-slot:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tier-slot-header {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: #C9A84C;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.tier-slot-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.tier-slot-card {
  border: 0.5px solid #C9A84C;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  background: rgba(201,168,76,0.06);
  cursor: pointer;
  transition: all 0.15s;
}
.tier-slot-card:hover {
  background: rgba(201,168,76,0.12);
}
.tier-slot-card.selected {
  border: 1.5px solid #C9A84C !important;
  background: rgba(201,168,76,0.18) !important;
}
.tier-slot-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #F5F0E8;
  margin-bottom: 0.15rem;
  letter-spacing: 0.3px;
}
.tier-slot-card-desc {
  font-size: 0.7rem;
  color: rgba(245,240,232,0.75);
  line-height: 1.4;
}
/* v8.2 capacity note shown below each service's tier cards */
.tier-slot-capacity {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: rgba(201,168,76,0.08);
  border-left: 2px solid #C9A84C;
  border-radius: 3px;
  font-size: 0.72rem;
  color: rgba(245,240,232,0.85);
  line-height: 1.4;
  font-style: italic;
}
.tier-slot-capacity strong {
  color: #C9A84C;
  font-style: normal;
}

@media (max-width: 640px) {
  .service-card-v8 {
    flex: 1 1 calc(50% - 0.25rem);
  }
}

/* ── HERO REBUILD ─────────────────────────────────────────────────── */
.hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.hero-inner {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px; /* nav height */
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,27,42,0.72) 0%,
    rgba(13,27,42,0.55) 40%,
    rgba(13,27,42,0.65) 75%,
    rgba(13,27,42,0.90) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  padding: 0 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero-content h1 {
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  margin: 0.6rem 0 1.2rem;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.hero-sub {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: rgba(245,240,232,0.85);
  max-width: 580px;
  line-height: 1.7;
  margin: 0 auto 2.2rem;
}
.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
}
.hero-services-strip {
  position: relative;
  z-index: 2;
  width: 100%;
  background: rgba(13,27,42,0.75);
  border-top: 1px solid rgba(201,168,76,0.25);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  backdrop-filter: blur(6px);
}
.hero-svc-pill {
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.75);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.hero-svc-pill:hover { color: var(--gold); }
.hero-svc-dot { color: var(--gold); opacity: 0.5; font-size: 1.2rem; }

@media (max-width: 600px) {
  .hero-content h1 { font-size: 2.6rem; }
  .hero-sub { font-size: 0.95rem; }
  .hero-svc-dot { display: none; }
  .hero-svc-pill { font-size: 0.75rem; }
}
/* ── END HERO REBUILD ─────────────────────────────────────────────── */

/* ═══ HERO NEWS-FLASH SERVICE SHOWCASE (additive; existing hero untouched) ═══ */
.hero-newsflash{
  position:fixed; bottom:24px; right:26px; width:280px; /* viewport-fixed — stays visible while scrolling; JS (placeCard) sizes it */
  z-index:20; opacity:0; transform:translateY(6px);
  transition:opacity 1s ease, transform 1s ease; pointer-events:none;
}
.hero-newsflash.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.hero-newsflash__card{
  display:block; text-decoration:none; color:inherit;
  background:rgba(10,29,61,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--gold); border-radius:140px 140px 14px 14px;
  overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.hero-newsflash__imgwrap{
  position:relative; height:260px; margin:8px 8px 0; background:var(--navy);
  border:1px solid rgba(201,168,76,.5); border-radius:132px 132px 8px 8px; overflow:hidden;
}
.hero-newsflash__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:opacity .3s ease; }
.hero-newsflash__blur{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(14px) brightness(.55); transform:scale(1.15); z-index:0; display:none;
}
.hero-newsflash.is-contain .hero-newsflash__img{ object-fit:contain; }
.hero-newsflash.is-contain .hero-newsflash__blur{ display:block; }
.hero-newsflash__cap{ text-align:center; padding:.7rem 1rem 1rem; }
.hero-newsflash__eyebrow{
  display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.3rem;
}
.hero-newsflash__name{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:17px; line-height:1.15; color:var(--white); margin-bottom:.35rem;
}
.hero-newsflash__cta{ display:block; font-size:.75rem; letter-spacing:.05em; color:var(--gold-light); }
.hero-newsflash__close{
  position:absolute; top:6px; right:10px; z-index:5; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,20,35,.55); border:1px solid rgba(201,168,76,.4);
  color:rgba(245,240,232,.8); font-size:1rem; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:color .2s, background .2s;
}
.hero-newsflash__close:hover{ color:var(--gold); background:rgba(10,20,35,.8); }
/* 15 September 2026: from about 1100px down to 768px the hero text spans nearly the
   full width, so the fixed showcase card lands on the subtitle and on the second
   button. In that band the card is held back until the visitor has scrolled past
   the hero, then behaves exactly as before. Wider and narrower widths untouched. */
@media (min-width:768px) and (max-width:1100px){
  /* 17 September 2026: holding the card back until the visitor scrolled past the hero
     moved the problem rather than solving it. Once past the hero the fixed card landed
     on the experience cards, covering one of the nine almost completely at 768px.
     In this band the content column is nearly the full width, so there is no free
     corner for it to sit in. The card is therefore not shown at all here. Desktop
     above 1100px and phones below 768px are untouched. */
  .hero-newsflash,
  .hero-newsflash.is-visible,
  html.nf-scrolled .hero-newsflash.is-visible{ display:none !important; }
}
/* Mobile: shrink. Phone cut-off is 767px, so a 768px iPad portrait keeps desktop behaviour. */
@media (max-width:767px){
  .hero-newsflash{ width:240px; bottom:16px; right:12px; }
  .hero-newsflash__card{ border-radius:120px 120px 12px 12px; }
  .hero-newsflash__imgwrap{ height:200px; border-radius:112px 112px 6px 6px; }
  .hero-newsflash__name{ font-size:17px; }
}
/* ═══ PHONE ONLY (≤767px): persistent card + experience overlay ═══
   Everything below is scoped to ≤767px or to elements that are display:none
   outside that width, so desktop and tablet (768px and wider) are unchanged. */
.hero-newsflash__next,
.hero-newsflash__all,
.hero-newsflash__cta--phone{ display:none; }
.nf-ov{ display:none; }

@media (max-width:560px){
  /* Card used to be hidden below 560px. It now stays (no timed fade-out), so it is
     made smaller here to leave the hero heading and buttons readable. */
  .hero-newsflash{ width:186px; right:10px; }
  .hero-newsflash__imgwrap{ height:150px; }
  .hero-newsflash__name{ font-size:16px; }
}

@media (max-width:767px){
  /* ── card label: "Tap to view" replaces "Click to enquire" on phones ── */
  .hero-newsflash__cta--desktop{ display:none; }
  .hero-newsflash__cta--phone{ display:block; }

  /* ── card controls (44×44 tap targets) ── */
  .hero-newsflash__close{ width:44px; height:44px; top:2px; right:2px; font-size:1.3rem; }
  .hero-newsflash__next{
    display:flex; position:absolute; right:2px; bottom:52px; z-index:5;
    width:44px; height:44px; border-radius:50%;
    align-items:center; justify-content:center;
    background:rgba(10,20,35,.55); border:1px solid rgba(201,168,76,.4);
    color:var(--gold-light); font-size:1.6rem; line-height:1; cursor:pointer;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .hero-newsflash__all{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:44px; margin-top:8px; padding:0;
    background:transparent; border:0; cursor:pointer; white-space:nowrap;
    font-family:var(--ff-body); font-size:12px; letter-spacing:.05em;
    color:var(--gold-light); text-decoration:underline;
  }

  /* ── full-screen overlay (above nav z-index 100 / mobile menu 95, below the
        thank-you modals at 9999) ── */
  .nf-ov{
    position:fixed; inset:0; z-index:9500;
    flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:rgba(13,27,42,.97);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    font-family:var(--ff-body); color:var(--cream); overscroll-behavior:contain;
  }
  .nf-ov.is-open{ display:flex; }
  .nf-ov__close{
    position:fixed; top:10px; right:10px; z-index:3; width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,20,35,.8); border:1px solid var(--gold);
    color:var(--gold-light); font-size:1.5rem; line-height:1; cursor:pointer;
  }
  .nf-ov__view{ display:none; }
  .nf-ov__view.is-active{ display:block; }

  /* single experience */
  .nf-ov__media{
    position:relative; width:100%; aspect-ratio:4/3; margin-top:64px;
    background:var(--navy); overflow:hidden;
  }
  .nf-ov__blur{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:blur(14px) brightness(.55); transform:scale(1.15); z-index:0;
  }
  .nf-ov__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1; }
  .nf-ov__arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,20,35,.6); border:1px solid rgba(201,168,76,.5);
    color:var(--gold-light); font-size:1.7rem; line-height:1; cursor:pointer;
  }
  .nf-ov__arrow--prev{ left:8px; }
  .nf-ov__arrow--next{ right:8px; }
  .nf-ov__body{ padding:1.1rem 1.2rem 2.2rem; text-align:center; }
  .nf-ov__eyebrow{
    display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:.35rem;
  }
  .nf-ov__name{
    font-family:var(--ff-display); font-weight:400; font-size:26px; line-height:1.15;
    color:var(--white); margin:0 0 .55rem;
  }
  .nf-ov__desc{ font-size:14px; line-height:1.5; color:rgba(245,240,232,.85); margin:0 0 1.3rem; }
  .nf-ov__cta{
    display:block; width:100%; min-height:48px; padding:.85rem 1rem;
    background:var(--gold); color:var(--navy); border:1px solid var(--gold); border-radius:4px;
    font-family:var(--ff-body); font-size:14px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; cursor:pointer;
  }

  /* all nine, 2-column grid */
  .nf-ov__gridwrap{ padding:64px 12px 2.2rem; }
  .nf-ov__gridtitle{
    font-family:var(--ff-display); font-weight:400; font-size:24px; color:var(--white);
    text-align:center; margin:0 0 1rem;
  }
  .nf-ov__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .nf-ov__tile{
    display:block; width:100%; padding:0; background:transparent; border:0; cursor:pointer;
    text-align:center; font-family:var(--ff-body); color:var(--cream);
  }
  .nf-ov__tilemedia{
    display:block; position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
    background:var(--navy); border:1px solid rgba(201,168,76,.45); border-radius:6px;
  }
  .nf-ov__tilemedia img{ position:absolute; inset:0; width:100%; height:100%; }
  .nf-ov__tilemedia img.nf-b{ object-fit:cover; filter:blur(10px) brightness(.55); transform:scale(1.15); }
  .nf-ov__tilemedia img.nf-f{ object-fit:contain; }
  .nf-ov__tilename{
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:44px; padding:.35rem 2px; font-size:12.5px; line-height:1.25; color:var(--cream);
  }
}

/* ══ COMPUTER AND TABLET (≥768px): the same experience pop up, laid out wide ══
   The markup and the script are shared with the phone. Only the appearance
   differs: a centred panel, the photograph on the left, the name, description
   and the enquire button on the right, and the all nine view in three columns. */
@media (min-width:768px){
  .nf-ov{
    position:fixed; inset:0; z-index:9500;
    align-items:center; justify-content:center; padding:48px 32px;
    background:rgba(13,27,42,.97);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    font-family:var(--ff-body); color:var(--cream); overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nf-ov.is-open{ display:flex; }
  .nf-ov__close{
    position:fixed; top:24px; right:28px; z-index:3; width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,20,35,.85); border:1px solid var(--gold);
    color:var(--gold-light); font-size:1.5rem; line-height:1; cursor:pointer;
  }
  .nf-ov__view{ display:none; }
  #nf-ov-single.is-active{
    display:flex; align-items:stretch; width:min(1040px,92vw);
    background:rgba(10,20,35,.55); border:1px solid rgba(201,168,76,.35);
    border-radius:8px; overflow:hidden;
  }
  #nf-ov-single .nf-ov__media{
    position:relative; width:58%; min-height:470px; margin:0;
    background:var(--navy); overflow:hidden; aspect-ratio:auto;
  }
  #nf-ov-single .nf-ov__blur{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:blur(14px) brightness(.55); transform:scale(1.15); z-index:0;
  }
  #nf-ov-single .nf-ov__img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1;
  }
  #nf-ov-single .nf-ov__arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,20,35,.6); border:1px solid rgba(201,168,76,.5);
    color:var(--gold-light); font-size:1.7rem; line-height:1; cursor:pointer;
  }
  #nf-ov-single .nf-ov__arrow--prev{ left:12px; }
  #nf-ov-single .nf-ov__arrow--next{ right:12px; }
  #nf-ov-single .nf-ov__body{
    width:42%; padding:2.8rem 2.6rem; text-align:left;
    display:flex; flex-direction:column; justify-content:center;
  }
  #nf-ov-single .nf-ov__eyebrow{
    display:block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:.6rem;
  }
  #nf-ov-single .nf-ov__name{
    font-family:var(--ff-display); font-weight:400; font-size:38px; line-height:1.1;
    color:var(--white); margin:0 0 1rem;
  }
  #nf-ov-single .nf-ov__desc{
    font-size:15.5px; line-height:1.75; color:rgba(245,240,232,.85); margin:0 0 1.8rem;
  }
  #nf-ov-single .nf-ov__cta{
    align-self:flex-start; width:auto; min-height:0; padding:1rem 2.2rem;
    background:var(--gold); color:var(--navy); border:1px solid var(--gold); border-radius:4px;
    font-family:var(--ff-body); font-size:13px; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; cursor:pointer;
  }
  #nf-ov-gridview.is-active{ display:block; width:min(1100px,92vw); }
  #nf-ov-gridview .nf-ov__gridwrap{ padding:0; }
  #nf-ov-gridview .nf-ov__gridtitle{
    font-family:var(--ff-display); font-weight:400; font-size:30px; color:var(--white);
    text-align:center; margin:0 0 1.6rem;
  }
  #nf-ov-gridview .nf-ov__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  #nf-ov-gridview .nf-ov__tile{
    display:block; width:100%; padding:0; background:transparent; border:0; cursor:pointer;
    text-align:center; font-family:var(--ff-body); color:var(--cream);
  }
  #nf-ov-gridview .nf-ov__tilemedia{
    display:block; position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
    background:var(--navy); border:1px solid rgba(201,168,76,.45); border-radius:6px;
  }
  #nf-ov-gridview .nf-ov__tilemedia img{ position:absolute; inset:0; width:100%; height:100%; }
  #nf-ov-gridview .nf-ov__tilemedia img.nf-b{ object-fit:cover; filter:blur(10px) brightness(.55); transform:scale(1.15); }
  #nf-ov-gridview .nf-ov__tilemedia img.nf-f{ object-fit:contain; }
  #nf-ov-gridview .nf-ov__tilename{
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:42px; padding:.5rem 4px; font-size:14px; line-height:1.3; color:var(--cream);
  }
}

/* ══ PHONE ONLY (≤767px): stop the page scrolling sideways ═══════════
   Every rule below is inside a ≤767px media query, so 768px and wider
   (tablet and desktop) are untouched. No overflow:hidden on the page is
   used here - each cause is fixed where it is created. */
@media (max-width:767px){

  /* 1. Preferred Dates: two native date inputs sat side by side with
        flex:1. A flex item cannot shrink below its min-content width by
        default, and a date field's min-content is about 175px, so the pair
        forced the page to about 400px. Stacked on phones, so each field
        keeps its full readable width instead of being squeezed. */
  .date-range-row{ flex-direction:column; align-items:stretch; gap:0.45rem; }
  .date-range-row > span{ text-align:center; }
  .date-range-row > input{ min-width:0; width:100%; }

  /* 2. Footer columns: the 2-column grid uses 1fr tracks, and a 1fr track
        cannot shrink below its content's minimum width, so on narrow phones
        the two columns together demanded about 330px and pushed the page
        out. The tracks are allowed to shrink, the column gap is reduced,
        long words and email addresses may wrap, and the footer logo row
        wraps instead of forcing its own width. */
  .footer-grid{ gap:2.5rem 1.5rem; }
  .footer-grid > *{ min-width:0; }
  .footer-brand > div{ flex-wrap:wrap; }
  .footer-brand p,
  .footer-col h5,
  .footer-col li,
  .footer-col a{ overflow-wrap:anywhere; }

  /* 3. Top bar: the logo image, the brand wordmark and the menu button are
        laid out in one row that cannot shrink, so it can be wider than the
        screen. Allowing the brand block to shrink stops it forcing the
        menu button off the edge. */
  .nav-logo{ min-width:0; }
  .nav-logo-text{ min-width:0; }
}

/* Very narrow phones only (≤360px, e.g. iPhone SE 1st generation and the
   360px Android sizes). Even fully shrunk, the logo image plus the wordmark
   plus the menu button need about 362px, so on these screens the gap and the
   wordmark are made smaller. The logo image keeps its height, so the top bar
   stays exactly as tall as it is now and the hero spacing is unaffected. */
@media (max-width:360px){
  .nav-logo{ gap:0.4rem; }
  .nav-logo-text{ font-size:1rem; }

  /* "How it works" steps: two columns each carrying 2rem of side padding,
     which left too little room for the longest word and pushed the row
     wider than the screen. Side padding is trimmed and long words may
     wrap on these very narrow screens. */
  .process-step{ padding:1.6rem 1rem; min-width:0; }
  .process-step h4,
  .process-step p{ overflow-wrap:anywhere; }
}

/* ── LEGAL MODAL ──────────────────────────────────────────────────── */
.legal-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,0.92);
  z-index: 9000;
  overflow-y: auto;
  padding: 2rem;
}
.legal-modal.open { display: block; }
.legal-modal-inner {
  max-width: 820px;
  margin: 4rem auto;
  background: var(--white);
  padding: 4rem;
  position: relative;
  border-radius: 4px;
}
.legal-modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-family: var(--ff-body);
}
.legal-modal-close:hover { background: var(--navy); color: var(--cream); }
/* ── END LEGAL MODAL ─────────────────────────────────────────────── */

.svc-pill {
  display:inline-flex;align-items:center;gap:0.3rem;
  font-size:0.7rem;color:rgba(245,240,232,0.75);
  background:rgba(201,168,76,0.06);
  border:1px solid rgba(201,168,76,0.25);
  border-radius:20px;padding:0.2rem 0.55rem;
  white-space:nowrap;cursor:pointer;
  transition:all 0.2s;
  text-transform:none;letter-spacing:0;font-weight:400;
}
.svc-pill:has(input:checked) {
  background:rgba(201,168,76,0.2);
  border-color:#C9A84C;
  color:#C9A84C;font-weight:500;
}
.svc-pill:has(input:checked)::before { content:"✓ "; }
.svc-pill input[type=checkbox] { display:none; }
.svc-pill:has(input:checked) {
  background:rgba(201,168,76,0.2);
  border-color:#C9A84C;
  color:#C9A84C;font-weight:500;
}
.svc-pill:has(input:checked)::before { content:"✕ "; }

.host-type-pill {
  display:inline-flex;flex-direction:column;align-items:center;
  padding:0.8rem 1.4rem;border:1px solid rgba(201,168,76,0.3);
  border-radius:8px;cursor:pointer;text-align:center;
  font-size:0.88rem;color:rgba(245,240,232,0.75);
  background:rgba(201,168,76,0.05);transition:all 0.2s;
  text-transform:none;letter-spacing:0;font-weight:400;min-width:140px;
}
.host-type-pill input[type=radio] { display:none; }
.host-type-pill.selected {
  border-color:#C9A84C;background:rgba(201,168,76,0.15);
  color:#C9A84C;font-weight:500;
}

/* ══ PHONE HERO + TAB STRIP (phones only) ═══════════════════════════
   Everything below is either inside a max-width:767px media query or is a
   default rule for an element that only ever appears on phones, so 768px
   and wider (tablet and desktop) render exactly as before.
   Placed at the end of the stylesheet so it wins over the earlier phone
   blocks without needing extra specificity. */

/* Screen-size wording swaps: the phone wording is hidden by default and
   the desktop wording is hidden inside the phone media query, the same
   technique already used for the showcase card's "Tap to view" label. */
.hero-sub--phone{ display:none; }

/* The reply line now appears on every screen size. */
.hero-reply-line{
  display:block;
  margin:0.9rem auto 0;
  text-align:center;
  font-family:var(--ff-body);
  font-weight:300;
  font-size:0.85rem;
  line-height:1.5;
  color:rgba(245,240,232,0.85);
}
/* Desktop and tablet only. The hero gained the reply line and lost the star row, so
   the block is taller than it was and the eyebrow was sliding under the fixed top bar.
   The vertical rhythm is tightened just enough that the eyebrow clears the bar and the
   reply line stays above the fold at 1280 by 800. Phones are untouched: every rule
   here is min-width 768px. */
@media (min-width:768px){
  /* The star row used to sit at the very top of the hero content and absorbed the
     overlap with the fixed bar (the stars themselves were partly behind it). With the
     stars gone the eyebrow became the first line, so the top padding is raised to clear
     the 132px bar, and the spacing is tightened so the new reply line still lands above
     the fold at 1280 by 800. */
  .hero-inner{ padding-top:144px; }
  .hero-content .eyebrow{ margin-bottom:0.5rem; }
  .hero-content h1{ margin:0.3rem 0 0.8rem; }
  .hero-sub{ margin:0 auto 0.8rem; }
}

@media (max-width:767px){

  /* 1. Top bar: shorter. Smaller badge (aspect ratio kept, height only),
        brand wordmark on one line at a smaller size, tighter bar padding.
        The menu button keeps its look and is given a full 44x44 tap area. */
  nav{ padding:0.5rem 1rem; }
  .nav-logo{ gap:0.55rem; }
  .nav-logo-img{ height:48px; }
  .nav-logo-text{
    font-size:0.86rem;
    letter-spacing:0.05em;
    white-space:nowrap;
    line-height:1.1;
  }
  .nav-toggle{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 auto;
  }

  /* Hero content sits clear of the shorter bar. */
  .hero-inner{ padding-top:72px; }

  /* 3 and 5. Phone wording on, desktop wording off. */
  .hero-sub--desktop{ display:none; }
  .hero-sub--phone{ display:inline; }

  /* Tighter vertical rhythm so headline, sub line, both buttons and the
     reply line all sit above the fold on a short phone. */
  .hero .eyebrow{ font-size:0.82rem; margin-bottom:0.5rem; }
  .hero-content h1{ margin:0.4rem 0 0.9rem; }
  .hero-sub{ margin:0 auto 1.4rem; }

  /* 7. The strip of nine service names under the hero photo is hidden on
        phones only; it is untouched on desktop. */
  .hero-services-strip{ display:none; }

  /* 9 (side effect). The Contact block's email address is now real text
     rather than the Cloudflare placeholder text, and the real address
     is wider. It is allowed to wrap on very narrow phones so it cannot
     push the page sideways. */
  #contact{ min-width:0; }
  #contact > .container{ min-width:0; }
  #contact a[href^="mailto:"]{ overflow-wrap:anywhere; }

  /* 8. Enquiry form tabs: the strip used to scroll sideways inside its own
        box, which cut off the last label. On phones the five tabs wrap onto
        two rows (three then two, the second row centred) so all five are
        fully visible with no sideways scrolling. Icons, full text, the gold
        underline on the active tab and all tab behaviour are unchanged.
        The strip and the buttons carry inline styles, so these overrides
        are marked important; they are inside the phone media query only. */
  .enquire-tabs{
    flex-wrap:wrap !important;
    justify-content:center !important;
    overflow-x:visible !important;
    margin:2rem auto 2.5rem !important;
  }
  .enquire-tabs .enquire-tab{
    flex:0 0 33.333% !important;
    max-width:33.333% !important;
    white-space:normal !important;
    padding:0.7rem 0.25rem !important;
    min-height:44px !important;
    font-size:0.6rem !important;
    letter-spacing:0.04em !important;
    line-height:1.25 !important;
    gap:6px !important;
    -webkit-hyphens:none; hyphens:none;
    overflow-wrap:break-word;
  }
  .enquire-tabs .enquire-tab svg{ flex:0 0 auto; }
}

/* Enquiry tab strip, added 12 Sep 2026. The five tabs need 939px but the strip was
   capped at 880px, so the fifth tab sat cut off behind a sideways scroll at every
   width above the phone rules. From 1024 up the cap is raised just enough to fit all
   five on one row. Between 768 and 1023 the tabs wrap onto two centred rows, the same
   treatment the phone query below already applies. Phone behaviour is untouched. */
@media (min-width:1024px){
  .enquire-tabs{ max-width:960px !important; overflow-x:visible !important; }
}
@media (min-width:768px) and (max-width:1023px){
  .enquire-tabs{
    flex-wrap:wrap !important;
    justify-content:center !important;
    overflow-x:visible !important;
  }
  .enquire-tabs .enquire-tab{
    flex:0 0 33.333% !important;
    max-width:33.333% !important;
    white-space:normal !important;
    line-height:1.25 !important;
  }
}

/* TRUST BAR under the hero, added 12 September 2026. One centred row of five short
   facts on desktop, wrapping to two or three rows as the screen narrows, and a single
   centred column on phones. No script and no images, so it costs nothing to load. */
.trust-bar{ background:var(--navy); padding:1.1rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-bar__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0.6rem 2rem; }
.trust-bar__list li{ position:relative; color:var(--cream); font-family:var(--ff-body); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; line-height:1.5; text-align:center; }
.trust-bar__list li::before{ content:"\25C6"; color:var(--gold); margin-right:0.6rem; font-size:0.55rem; vertical-align:middle; }
@media (min-width:1200px){
  .trust-bar .container{ max-width:1320px; }
  .trust-bar__list{ gap:0.6rem 1.6rem; }
  .trust-bar__list li{ font-size:0.66rem; }
}
@media (max-width:767px){
  .trust-bar{ padding:1rem 0; }
  .trust-bar__list{ flex-direction:column; gap:0.55rem; }
  .trust-bar__list li{ font-size:0.68rem; letter-spacing:0.06em; }
}

/* Very narrow phones: keep the brand wordmark on one line next to the badge
   and the menu button. */
@media (max-width:360px){
  .nav-logo{ gap:0.4rem; }
  .nav-logo-img{ height:44px; }
  .nav-logo-text{ font-size:0.72rem; letter-spacing:0.03em; }
  .hero .eyebrow{ font-size:0.72rem; }
  .enquire-tabs .enquire-tab{ font-size:0.55rem !important; padding:0.7rem 0.15rem !important; }
}
/* ═══ THE EXPERIENCE CARDS AT 768 PIXELS AND WIDER ═══════════════════
   18 September 2026. The name used to sit on top of the photograph, which meant
   a dark veil had to be drawn over the picture for the words to be readable at
   all, and the picture could barely be seen. The card is now built the way the
   phone already builds it: the photograph is shown whole with nothing over it,
   and the name sits in a solid navy strip beneath. White on navy measures 15.6
   to 1, so no photograph can ever make the name hard to read. The short
   description that used to appear when the pointer rested on a card is dropped,
   as it is on phones; the card still opens its own experience page. */
@media (min-width:768px){
  .services-grid .service-card{
    aspect-ratio:auto; height:auto;
    display:flex; flex-direction:column;
    background:var(--navy);
  }
  .services-grid .service-card-img{
    position:relative; width:100%; height:auto; aspect-ratio:4/3; flex:0 0 auto;
  }
  .services-grid .service-card-overlay{ display:none !important; }
  .services-grid .service-card-content{
    position:static; flex:1 1 auto;
    background:var(--navy); padding:0.75rem 1.1rem 1.05rem; text-align:left;
  }
  .services-grid .service-card-num{
    display:block !important; color:var(--gold);
    font-size:0.72rem; letter-spacing:0.14em; margin-bottom:0.3rem;
  }
  .services-grid .service-card h3{
    color:var(--white); text-shadow:none; margin-bottom:0;
  }
  /* The rule that hid the sentence and the Discover more line used to sit here.
     They are shown at all times now: see the block further down. */
}
/* ═══ THE CARD WORDING, SHOWN AT ALL TIMES ════════════════════════
   18 September 2026. The sentence and the Discover more line used to be hidden
   until the pointer rested on the card, which meant no one on a phone or a
   tablet ever saw them. They are now part of the navy strip and are always
   there. Nothing moves when the pointer passes over a card.

   The hover rules written for the old card shrank the name and collapsed the
   sentence to nothing, because in that design the wording had to squeeze itself
   into a photograph. The card no longer works that way, so those rules are
   cancelled here for the nine experience cards. Cards elsewhere on the page are
   not touched. */
@media (min-width:768px){
  .services-grid .service-card-desc{
    display:block !important; max-height:none !important; opacity:1 !important;
    color:rgba(245,240,232,0.72); font-size:0.8rem; line-height:1.5; margin:0.45rem 0 0;
    transition:none !important;
  }
  .services-grid .service-card-arrow{
    display:inline-block !important; opacity:1 !important; transform:none !important;
    margin-top:0.6rem; white-space:nowrap; transition:none !important;
  }
  /* The Heritage Trail line was given a height of zero in the old card so it
     could hang over the description without pushing it out of a card that had no
     room. The new card has room, so it takes its place in the flow again. */
  .services-grid .service-card-trail,
  .services-grid .service-card:hover .service-card-trail{
    display:block; height:auto; overflow:visible;
    margin:0.4rem 0 0; font-size:0.68rem; letter-spacing:0.06em; white-space:normal;
  }

  /* the same at rest and under the pointer */
  .services-grid .service-card:hover .service-card-content{ padding:0.75rem 1.1rem 1.05rem; }
  .services-grid .service-card:hover .service-card-num{ font-size:0.72rem; letter-spacing:0.14em; margin-bottom:0.3rem; }
  .services-grid .service-card:hover h3{ font-size:1.6rem; line-height:1.2; margin-bottom:0; }
  .services-grid .service-card:hover .service-card-desc{ font-size:0.8rem; line-height:1.5; }
  .services-grid .service-card:hover .service-card-arrow{ margin-top:0.6rem; font-size:0.75rem; }
}
/* ═══ PHONE ONLY (≤767px): two column experiences grid, no showcase card ═══
   Placed last in this stylesheet so it wins over the earlier phone rules. Every rule is
   inside a max-width:767px query, so 768px and wider (tablet and desktop) is untouched. */
@media (max-width:767px){
  /* 1. The fixed news flash showcase card itself never appears on phones. The full
        screen overlay below it IS used on phones now: tapping an experience card opens
        it, so it must NOT be hidden here. */
  .hero-newsflash{ display:none !important; }

  /* 2. "Nine Signature Experiences" — two columns, and each card is now two stacked
        parts: the photo on top with NOTHING drawn over it, and a solid navy caption
        strip directly under it carrying the number and the name. */
  .services-grid{ grid-template-columns:repeat(2,1fr); gap:2px; align-items:stretch; }
  .services-grid .service-card{
    aspect-ratio:auto; height:auto;
    display:flex; flex-direction:column;
    background:var(--navy);
  }
  /* the photo: full width, roughly 4 by 3, nothing over it */
  .services-grid .service-card-img{
    position:relative; width:100%; height:auto; aspect-ratio:4/3; flex:0 0 auto;
  }
  /* the caption strip: solid navy, left aligned, under the photo */
  .services-grid .service-card-content{
    position:static; flex:1 1 auto;
    background:var(--navy); padding:0.5rem 0.6rem 0.6rem; text-align:left;
  }
  .services-grid .service-card-num{
    font-size:11px; letter-spacing:0.14em; line-height:1.2;
    color:var(--gold); margin-bottom:0.22rem;
  }
  .services-grid .service-card h3{
    font-size:16px; line-height:1.16; margin-bottom:0; color:var(--white);
    overflow-wrap:break-word; -webkit-hyphens:none; hyphens:none;
  }
  /* The hover reveal description and the "Discover more" arrow cannot be used by touch,
     and a tap on iOS leaves the :hover state stuck on the card, so on phones they are
     removed from the render tree in EVERY state: normal, hover, focus, focus within,
     active and the state a finger leaves behind. display:none plus visibility, zero
     opacity, zero size and no transition or animation, all with !important, so no
     partial frame or opacity ramp can ever paint over the photo. Nothing but the
     number and the name is left over the picture. */
  .services-grid .service-card-desc,
  .services-grid .service-card-arrow,
  .services-grid .service-card:hover .service-card-desc,
  .services-grid .service-card:hover .service-card-arrow,
  .services-grid .service-card:focus .service-card-desc,
  .services-grid .service-card:focus .service-card-arrow,
  .services-grid .service-card:focus-within .service-card-desc,
  .services-grid .service-card:focus-within .service-card-arrow,
  .services-grid .service-card:active .service-card-desc,
  .services-grid .service-card:active .service-card-arrow{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    max-height:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    pointer-events:none !important;
  }
  /* The gradient band that used to sit over the photo is gone: the text lives in its
     own strip now, so nothing is drawn over the picture in any state. */
  .services-grid .service-card-overlay{ display:none !important; }
  /* The photo never moves or cross fades on a phone: no rotation (see the carousel
     script), no zoom on a stuck :hover, no fade. One still picture per card. */
  .services-grid .service-card-carousel img{ transition:none !important; }
  .services-grid .service-card:hover .service-card-img,
  .services-grid .service-card:focus .service-card-img,
  .services-grid .service-card:active .service-card-img{ transform:none !important; }
}
/* Narrowest phones: keep the three-line names inside the shorter card. */
@media (max-width:360px){
  .services-grid .service-card-content{ padding:0.4rem 0.45rem 0.5rem; }
  .services-grid .service-card-num{ margin-bottom:0.15rem; }
  .services-grid .service-card h3{ font-size:15px; line-height:1.14; }
}

/* ═══ THE HERITAGE TRAIL ═══════════════════════════════════════════════════
   Added below the nine card grid. Everything here reuses the existing tokens
   (--navy, --gold, --cream, --white, --muted, --ff-display, --ff-body), the
   existing .section padding, the existing .services-intro heading block and
   the existing .btn / .btn-gold button, so the section matches the page. The
   tiles carry no border radius, exactly like .service-card. */

/* (a) The one gold line under the name on experience card 01. It sits inside
       the caption block, above the hover description, so it is visible in the
       resting state on desktop, tablet and phone and never collides with the
       description when the card is hovered. */
.service-card-trail{
  display:block;
  color:var(--gold);
  font-family:var(--ff-body);
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.06em;
  line-height:1.3;
  margin-top:0.25rem;
}
@media (min-width:768px){
  /* At rest this line must not push the card name upwards: the caption block is anchored
     to the bottom of the card, so any height it added would raise the Heritage Guide name
     above the names on the other eight cards. It is therefore given zero flow height and
     no margin, and paints downwards into the space the hidden description and the hidden
     "Discover more" arrow already occupy. The name then sits at exactly the same height on
     all nine cards. white-space:nowrap plus the smaller size keep it on ONE line: the
     services container is pinned at 803px from 768px upwards, so the card is 245px wide
     and the caption is 181px wide at 1024, 1280 and 1440 alike. */
  .service-card-trail{
    height:0; margin:0; overflow:visible;
    white-space:nowrap;
    font-size:0.62rem; letter-spacing:0.02em;
  }
  /* On hover the whole caption block re-lays out and compacts, so the line returns to
     normal flow and sits between the name and the description, with no overlap. */
  .service-card:hover .service-card-trail{
    height:auto; margin-top:0.12rem; font-size:0.62rem;
  }
}

/* (b) The section itself. */
#heritage-trail .services-intro{ margin-bottom:2.2rem; }
.trail-intro{
  max-width:560px; margin:0 auto; text-align:center;
}
.trail-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  max-width:1040px;
  margin:0 auto;
  align-items:stretch;
}
.trail-tile{
  display:flex; flex-direction:column;
  background:var(--navy);
  overflow:hidden;
  min-width:0;
}
/* photo block, about 4 by 3. Swap the src on the img to change a tile picture. */
.trail-tile-img{
  width:100%; aspect-ratio:4/3;
  background:var(--navy);
  overflow:hidden;
}
.trail-tile-img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* solid navy caption strip under the photo */
.trail-tile-cap{
  background:var(--navy);
  padding:0.55rem 0.7rem 0.7rem;
  text-align:left;
  flex:1 1 auto;
}
.trail-tile-name{
  font-family:var(--ff-display); font-weight:400;
  font-size:1.05rem; line-height:1.2;
  color:var(--white);
  overflow-wrap:break-word;
}
.trail-tile-days{
  font-family:var(--ff-body);
  font-size:0.7rem; letter-spacing:0.08em; line-height:1.3;
  color:rgba(245,240,232,0.55);
  margin-top:0.2rem;
}
.trail-cta{
  margin-top:2.5rem;
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:0.9rem 1.5rem;
}
.trail-cta-note{ font-size:0.82rem; color:var(--muted); }

/* Phones: two tiles across, smaller caption type. Nothing here can widen the
   page: the grid is two 1fr columns inside the existing .container padding. */
@media (max-width:767px){
  .trail-grid{ grid-template-columns:repeat(2,1fr); }
  .trail-tile-name{ font-size:16px; line-height:1.16; }
  .trail-tile-days{ font-size:11px; letter-spacing:0.05em; }
  .trail-cta{ margin-top:2rem; }
  .services-grid .service-card-trail{ font-size:11px; letter-spacing:0.04em; margin-top:0.22rem; }
}
@media (max-width:360px){
  .trail-tile-cap{ padding:0.45rem 0.5rem 0.55rem; }
  .trail-tile-name{ font-size:15px; }
  .services-grid .service-card-trail{ font-size:10px; }
}

/* ═══ HERO HEADLINE AT THE WIDEST DESKTOP WIDTHS ══════════════════════════
   .hero-content h1 is sized clamp(4rem, 9vw, 8rem), so it reaches its 8rem
   (128px) ceiling from about 1422px upwards. "British heritage, as it truly
   lives" is longer than the headline it replaced and takes three lines at that
   ceiling, which pushed the hero 72px taller at 1440. Lowering only the upper
   end of the clamp puts it back on two lines and returns the hero to its former
   height. The query starts above 1280, so 1280, 1024 and every phone width keep
   the size they have today, and below about 1244px the 9vw value is under 7rem
   anyway, so nothing changes there either. */
@media (min-width:1281px){
  .hero-content h1{ font-size: clamp(4rem, 9vw, 7rem); }
}

/* ═══ THE HERITAGE TRAIL, THREE LEVEL BROWSER ═════════════════════════════
   Level 1 is the four nation tiles on the page and reuses .trail-tile exactly.
   Levels 2 and 3 are drawn into one overlay panel, built on the same pattern as
   the phone photo overlay: fixed navy sheet, scrolls inside itself, close cross,
   escape key. Every colour and font here is an existing token. */

/* Level 1 tiles are buttons now, so the browser's own button styling is reset
   and the tile look is inherited unchanged from .trail-tile. */
.trail-tile--nation{
  border:0; padding:0; margin:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer; appearance:none; width:100%;
}
.trail-tile--nation:hover .trail-tile-name{ color:var(--gold-light); }
.trail-tile--nation:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 6px rgba(13,27,42,0.95); }

/* The overlay sheet. */
.trail-ov{
  position:fixed; inset:0; z-index:9600;
  display:none; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:rgba(13,27,42,.97);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--ff-body); color:var(--cream);
}
.trail-ov.is-open{ display:block; }
.trail-ov__close{
  position:fixed; top:10px; right:10px; z-index:3; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,20,35,.8); border:1px solid var(--gold);
  color:var(--gold-light); font-size:1.5rem; line-height:1; cursor:pointer;
}
.trail-ov__inner{
  max-width:1040px; margin:0 auto; padding:72px 1.5rem 3rem; width:100%;
}
.trail-ov__back{
  display:inline-block; margin:0 0 1rem; padding:0;
  background:none; border:none; cursor:pointer;
  color:var(--gold); font-family:var(--ff-body);
  font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
}
/* The Photo credits panel keeps the size the back link had before, so only the
   two navigation links inside the browser were made smaller. */
.trail-ov__back--credits{ font-size:0.72rem; }
.trail-ov__back:hover{ color:var(--gold-light); }
.trail-ov__title{
  font-family:var(--ff-display); font-weight:400; color:var(--cream);
  font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.15; margin:0;
  overflow-wrap:break-word;
}
.trail-ov .gold-line{ margin:1rem 0 1.6rem; }

/* Level 2, the subject tiles. Each one is a 4 by 3 photo block over a navy
   caption strip, the same treatment as the four nation tiles on the page. A
   subject with no picture keeps a plain navy block in the photo area, so every
   tile in a row is the same height either way. */
.trail-subjects{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
}
.trail-subject{
  display:flex; flex-direction:column; justify-content:flex-start; min-width:0;
  background:var(--navy); border:1px solid rgba(201,168,76,0.25);
  padding:0; overflow:hidden;
  font:inherit; text-align:left; cursor:pointer; appearance:none;
}
.trail-subject-img{
  width:100%; aspect-ratio:4/3; background:var(--navy); overflow:hidden;
}
.trail-subject-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.trail-subject-cap{ padding:0.7rem 0.8rem 0.85rem; flex:1 1 auto; }
.trail-subject:hover{ border-color:var(--gold); background:rgba(201,168,76,0.08); }
.trail-subject:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 6px rgba(13,27,42,0.95); }
.trail-subject-name{
  display:block;
  font-family:var(--ff-display); font-size:1.05rem; line-height:1.2;
  color:var(--gold); overflow-wrap:break-word;
}
.trail-subject-count{
  display:block;
  font-family:var(--ff-body); font-size:0.7rem; letter-spacing:0.08em;
  color:rgba(245,240,232,0.55); margin-top:0.3rem;
}

/* Level 3, the place cards. */
.trail-places{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
}
.trail-place{
  display:flex; flex-direction:column; min-width:0;
  background:var(--navy); border:1px solid rgba(201,168,76,0.18);
}
.trail-place-img{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  padding:0.6rem; text-align:center;
}
.trail-place-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.trail-place-imgname{
  font-family:var(--ff-display); font-size:0.95rem; line-height:1.2;
  color:rgba(245,240,232,0.5); overflow-wrap:break-word;
}
.trail-place-cap{ padding:0.6rem 0.7rem 0.8rem; flex:1 1 auto; }
.trail-place-name{
  font-family:var(--ff-display); font-size:1rem; line-height:1.2;
  color:var(--white); overflow-wrap:break-word;
}
.trail-place-line{
  font-family:var(--ff-body); font-size:0.72rem; line-height:1.45;
  color:rgba(245,240,232,0.6); margin-top:0.3rem;
}
.trail-ov__cta{
  margin-top:2.5rem; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:0.9rem 1.5rem;
}
.trail-ov__cta .trail-cta-note{ color:rgba(245,240,232,0.6); }

/* Tablet and phone. Two columns from 767px down, so no row can ever be wider
   than the panel and the page never scrolls sideways. */
@media (max-width:1023px){
  .trail-subjects, .trail-places{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px){
  .trail-ov__inner{ padding:64px 12px 2.5rem; }
  .trail-subjects, .trail-places{ grid-template-columns:repeat(2,1fr); }
  .trail-subject-cap{ padding:0.55rem 0.6rem 0.7rem; }
  .trail-subject-name{ font-size:15px; }
  .trail-subject-count{ font-size:11px; }
  .trail-place-name{ font-size:15px; }
  .trail-place-line{ font-size:11.5px; }
  .trail-place-imgname{ font-size:13px; }
}
@media (max-width:360px){
  .trail-ov__inner{ padding:60px 8px 2.2rem; }
  .trail-subject-cap{ padding:0.45rem 0.5rem 0.6rem; }
  .trail-place-cap{ padding:0.5rem 0.5rem 0.6rem; }
}

/* The small muted "Photo credits" link under the price line, and the list it
   opens inside the same overlay panel. */
.trail-credits-link{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--ff-body); font-size:0.78rem;
  color:var(--muted); text-decoration:underline;
}
.trail-credits-link:hover{ color:var(--navy); }
.trail-credits-intro{
  max-width:640px; font-size:0.85rem; line-height:1.7;
  color:rgba(245,240,232,0.65); margin:0 0 1.6rem;
}
.trail-credits{ list-style:none; margin:0; padding:0; max-width:760px; }
.trail-credits li{
  padding:0.7rem 0; border-bottom:1px solid rgba(201,168,76,0.18);
  display:flex; flex-direction:column; gap:0.15rem;
}
.trail-credits-place{ font-family:var(--ff-display); font-size:1.02rem; color:var(--cream); }
.trail-credits-meta{ font-size:0.76rem; color:rgba(245,240,232,0.6); }
.trail-credits-file{ font-size:0.72rem; color:var(--gold); text-decoration:none; }
.trail-credits-file:hover{ color:var(--gold-light); text-decoration:underline; }
@media (max-width:767px){
  .trail-credits-place{ font-size:15px; }
  .trail-credits-meta{ font-size:11.5px; }
  .trail-credits-file{ font-size:11px; }
}
/* ═══ READABLE TYPE SIZES ══════════════════════════════════
   18 September 2026. Much of the page was set between 10 and 13 pixels while the
   headline ran to 112. A browser's own default for ordinary reading is 16. This
   block sets a floor: no readable words below 13 pixels, sentences at 15, buttons
   at 14, and the wide letter spacing on the small capitals is eased, since wide
   tracking at a small size is harder to read, not easier. Nothing else changes:
   no colours, no spacing beyond what the larger words need, no headline sizes. */
.trust-bar__list li{ font-size:0.82rem; font-weight:400; letter-spacing:0.05em; }
.eyebrow{ font-size:0.82rem; letter-spacing:0.16em; }
.services-cat span{ font-size:0.8rem; letter-spacing:0.14em; }
.form-section-head span{ font-size:0.8rem; letter-spacing:0.14em; }
.btn{ font-size:0.875rem; letter-spacing:0.13em; }
.enquire-tab{ font-size:0.84rem; letter-spacing:0.07em; }
.form-group label, .form-group > label{ font-size:0.85rem; letter-spacing:0.06em; }
.service-card-num{ font-size:0.82rem; letter-spacing:0.12em; }
.service-card-arrow{ font-size:0.82rem; letter-spacing:0.11em; }
.service-card-trail{ font-size:0.8rem; }
.hero-svc-pill{ font-size:0.875rem; letter-spacing:0.11em; }
.hero-reply-line{ font-size:0.95rem; }
.hero-newsflash__eyebrow{ font-size:0.8rem !important; letter-spacing:0.12em; }
.hero-newsflash__cta{ font-size:0.82rem; }
.trail-tile-days{ font-size:0.82rem; }
.trail-credits-link{ font-size:0.88rem; }
.trail-cta-note{ font-size:0.95rem; }
footer h5{ font-size:0.8rem; letter-spacing:0.13em; }
footer p, footer li, footer a, footer span, footer div{ font-size:0.95rem; }
footer .footer-legal, footer .footer-legal a, footer small{ font-size:0.88rem; }
@media (min-width:768px){
  .services-grid .service-card-desc{ font-size:0.875rem; line-height:1.55; }
  .services-grid .service-card:hover .service-card-desc{ font-size:0.875rem; line-height:1.55; }
  .services-grid .service-card-arrow,
  .services-grid .service-card:hover .service-card-arrow{ font-size:0.82rem; }
  .services-grid .service-card-num,
  .services-grid .service-card:hover .service-card-num{ font-size:0.82rem; }
}
/* second pass: a few rules elsewhere in the sheet were more specific than the
   ones above, so the floor is stated plainly for those. */
.service-card-trail,
.services-grid .service-card-trail,
.services-grid .service-card:hover .service-card-trail{ font-size:0.8rem !important; }
.enquire-tab{ font-size:0.84rem !important; letter-spacing:0.07em !important; }
.btn{ font-size:0.875rem !important; }
.motion-toggle{ font-size:0.85rem !important; }
footer h5, footer .footer-col h5, .footer-grid h5{ font-size:0.8rem !important; letter-spacing:0.13em !important; }
footer p, footer li, footer a, footer span, footer div{ font-size:0.95rem !important; }
footer .footer-bottom, footer .footer-bottom *{ font-size:0.88rem !important; }
#enquire p, #enquire small, .form-group p, .form-note, .form-hint{ font-size:0.84rem !important; }
#enquire a{ font-size:inherit !important; }
/* ═══ ONE COMPLETE FIRST SCREEN ════════════════════════════
   The opening block used to be the height of the whole screen PLUS the space
   left for the bar at the top, so it was always taller than the screen. The nine
   names and the five assurances underneath were pushed out of sight, and a
   visitor arriving saw a picture cut through the middle with no way of telling
   where the page ended. Everything from the bar at the top to the assurances now
   fits inside one screen, and the experiences begin immediately after it. */
:root{ --first-screen:100vh; --bhh-nav:132px; --bhh-trust:104px; }
@supports (height:100svh){ :root{ --first-screen:100svh; } }
.hero{
  padding-top:0 !important;
  display:flex !important; flex-direction:column;
  min-height: calc(var(--first-screen) - var(--bhh-trust)) !important;
}
.hero-inner{
  min-height:0 !important; flex:1 1 auto;
  padding-top: var(--bhh-nav) !important;
  justify-content:center;
}
/* the opening words shrink on a short screen as well as a narrow one */
.hero h1{ font-size: clamp(2.1rem, min(5.5vw, 10.2vh), 3.8rem) !important; margin-bottom:1rem !important; }
.hero-sub{ font-size: clamp(1.1rem, min(2.5vw, 3.4vh), 1.7rem) !important; margin:0 auto 1.4rem !important; line-height:1.55 !important; }
.hero .eyebrow{ font-size:0.85rem !important; margin-bottom:0.4rem !important; }
.hero-reply-line{ margin-top:0.7rem !important; margin-bottom:0 !important; }
.hero-services-strip{ padding:0.62rem 2rem !important; }
.trust-bar{ padding:0.8rem 0 !important; }
/* ═══ THE SHOWCASE CARD, SMALLER ═════════════════════════════
   18 September 2026. The card that shows one experience at a time stood 280 by
   370 pixels, which is nearly half the height of a laptop screen, and it covered
   a good part of the photograph behind it. It is now about a quarter smaller in
   each direction, so it takes roughly half the area it did. It still says the
   same three things and still opens the same enquiry. */
.hero-newsflash{ width:195px; }   /* placeCard() confirms this and shortens it on a very short screen */
.hero-newsflash__card{ border-radius:96px 96px 12px 12px !important; }
.hero-newsflash__imgwrap{ height:178px; border-radius:90px 90px 7px 7px !important; margin:6px 6px 0 !important; }
.hero-newsflash__cap{ padding:.5rem .7rem .75rem !important; }
.hero-newsflash__eyebrow{ font-size:0.68rem !important; letter-spacing:.14em !important; margin-bottom:.2rem !important; }
.hero-newsflash__name{ font-size:15px !important; margin-bottom:.25rem !important; }
.hero-newsflash__cta{ font-size:0.74rem !important; }
.hero-newsflash__close{ width:22px !important; height:22px !important; top:5px !important; right:8px !important; font-size:.85rem !important; }
/* ═══ ARRIVING FROM AN EXPERIENCE CARD ═══════════════════════
   19 September 2026. A visitor who reaches the enquiry section from an
   experience page has already said what they want. Until now they were put back
   at the general counter: five tabs, and the experience they chose shown as one
   tick among seven. In that arrival only, the other four tabs are hidden, the
   chosen experience is named above the form, and the other six sit behind one
   line. Nothing changes for a visitor who reaches the section any other way, and
   one quiet link gives the full counter back. */
/* the whole row goes: with four tabs hidden the fifth only repeats what the
   heading below it already says, and it was being cut by the fixed bar */
html.bhh-focus #enquire .enquire-tabs{ display:none !important; }

/* ── ONE ROUTE, ONE FORM ──────────────────────────────────────────────────
   19 September 2026. Pressing Plan Your Private Visit, or Enquire, landed a
   guest on a row of five tabs, four of which invite them to join the business.
   Those four already have their own place in the Work with us menu in the top
   bar, so the row was a second copy of a menu the visitor already has. Whichever
   route a visitor takes now, they meet that one form, and one quiet line gives
   the whole row back to anyone who wants it. */
html.bhh-one #enquire .enquire-tabs{ display:none !important; }
.bhh-one-back{ text-align:center; margin:0 0 1.6rem; }
.bhh-one-back button{
  background:none; border:none; padding:0.35rem;
  font-family:var(--ff-body); font-size:0.88rem; color:rgba(245,240,232,0.62);
  text-decoration:underline; cursor:pointer;
}
.bhh-one-back button:hover{ color:var(--gold); }
.bhh-one-back button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.bhh-focus-head{ max-width:880px; margin:0 auto 1.8rem; text-align:center; }
.bhh-focus-eyebrow{ font-family:var(--ff-body); font-size:0.8rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:0.4rem; }
.bhh-focus-name{ font-family:var(--ff-display); font-size:2rem; line-height:1.15; color:var(--cream); }
.bhh-focus-else{ margin-top:0.8rem; background:none; border:none; color:rgba(245,240,232,0.72);
  font-family:var(--ff-body); font-size:0.9rem; text-decoration:underline; cursor:pointer; padding:0.35rem; }
.bhh-focus-else:hover{ color:var(--gold); }
.bhh-focus-else:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
#service-card-grid.bhh-tucked .service-card-v8:not(.selected){ display:none !important; }
.bhh-more-exp{ display:block; width:100%; margin:0.8rem 0 0; background:none;
  border:1px dashed rgba(201,168,76,0.55); border-radius:4px; color:var(--gold);
  font-family:var(--ff-body); font-size:0.9rem; padding:0.75rem 1rem; cursor:pointer; text-align:left; }
.bhh-more-exp:hover{ background:rgba(201,168,76,0.08); }
.bhh-more-exp:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* 19 September 2026: 48 style rules were taken out here. Every class name in them
   appeared nowhere in this page or its scripts, so no element could ever have
   matched them. They were left from earlier designs of the who we serve panels,
   the about section, the older enquiry form tabs, the inner page headers and the
   service detail pages, which now have a stylesheet of their own. */


/* ── THE TOP BAR ON ONE LINE ──────────────────────────────────────────────
   19 September 2026. Below 1366 pixels the six menu items wrapped onto two
   lines, and below 1100 onto three, with the company name splitting after
   British Heritage. The bar is a fixed height, so the wrapped words were
   crammed into it rather than the bar growing.
   Nothing is removed. The spacing between items, the spacing inside the
   letters and the size of the company name now shrink gently with the window
   instead of staying at their widest setting, and every item is told never to
   split. The badge is untouched. The smallest the menu ever reaches is about
   13 pixels, the floor set for readability, and at 1600 pixels and wider
   everything is exactly the size it is today. */
@media (min-width:768px){
  nav{ padding:0.5rem clamp(0.9rem, 1.5vw, 2rem); gap:clamp(0.7rem, 1.6vw, 2rem); }
  .nav-logo{ flex:0 1 auto; min-width:0; gap:clamp(0.5rem, 1vw, 1rem); }
  .nav-logo-text{
    white-space:nowrap;
    font-size:clamp(0.95rem, 0.8vw + 0.35rem, 1.44rem);
    letter-spacing:clamp(0.03em, 0.05vw, 0.08em);
  }
  .nav-links{ flex-wrap:nowrap; gap:clamp(0.85rem, 1.5vw, 2.5rem); }
  .nav-links > li{ flex:0 0 auto; }
  .nav-links a{
    white-space:nowrap;
    font-size:clamp(0.82rem, 0.62vw + 0.3rem, 1rem);
    letter-spacing:clamp(0.06em, 0.09vw, 0.15em);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   NINE EXPERIENCES QUICK PREVIEW (added 20 September 2026)
   Sits inside the Nine Signature Experiences intro on the home page. Nine
   small photographs, numbered and titled, so a visitor sees there are nine
   experiences without scrolling. Clicking one opens it larger immediately
   below: photograph, title, description and a link to its own page. The
   full row of detailed cards that used to sit directly under this intro
   now lives on its own page, experiences/index.html, reached by the link
   under the grid. The original detailed grid stays in this page too, kept
   only so the floating showcase card in the hero (which reads its
   descriptions from those cards) keeps working, so it is hidden here with
   #servicesArchive rather than removed. ═══════════════════════════════════ */
#servicesArchive{ display:none !important; }

.services-split{
  display:grid; grid-template-columns:minmax(0,1fr) 250px;
  gap:1.5rem; align-items:start; margin-top:0;
}
.services-split .services-intro{ text-align:left; margin-bottom:0; }
.services-split .services-intro .eyebrow{ font-size:0.75rem; }
.services-split .services-intro h2{ font-size:2.1rem; line-height:1.1; margin:0.2rem 0; }
.services-split .services-intro .gold-line--center{ margin:0.25rem 0; }
.services-split .services-intro .lead{ text-align:left; margin:0.4rem 0 0; font-size:0.9rem; line-height:1.4; }
.services-split .motion-control{ text-align:left; margin-top:0.55rem; }
.services-split .motion-control .motion-toggle{ padding:0.3rem 0.6rem; font-size:0.72rem; }

.services-preview__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0.4rem;
}
.services-preview__tile{
  position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
  border:2px solid transparent; padding:0; background:var(--navy); cursor:pointer;
  font:inherit; display:block; width:100%;
}
.services-preview__tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.services-preview__num{
  position:absolute; left:0.3rem; top:0.3rem; color:var(--white);
  font-family:var(--ff-body); font-size:0.58rem; letter-spacing:0.05em;
  background:rgba(13,27,42,0.6); padding:0.05rem 0.3rem; border-radius:3px;
}
.services-preview__tag{
  position:absolute; left:0; right:0; bottom:0; color:var(--white);
  font-family:var(--ff-body); font-size:0.64rem; letter-spacing:0.02em; line-height:1.2;
  background:linear-gradient(transparent, rgba(13,27,42,0.82)); padding:0.8rem 0.35rem 0.3rem;
  text-align:left;
}
.services-preview__tile:hover, .services-preview__tile:focus-visible{ border-color:var(--gold); outline:none; }
.services-preview__tile.is-active{ border-color:var(--gold); }

.services-preview__expand{ margin-top:0.8rem; }
.services-preview__card{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:1rem;
  align-items:center; background:var(--cream-dark); border-radius:10px; padding:0.75rem;
  text-align:left;
}
.services-preview__card .photo{ border-radius:6px; overflow:hidden; aspect-ratio:4/3; }
.services-preview__card .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.services-preview__card .num{ font-family:var(--ff-body); font-size:0.7rem; letter-spacing:0.08em; color:var(--gold-ink); }
.services-preview__card h3{ margin:0.15rem 0 0.3rem; font-size:1.4rem; }
.services-preview__card p{ font-size:0.88rem; line-height:1.4; color:var(--muted); margin:0 0 0.45rem; }
.services-preview__card a{ font-family:var(--ff-body); font-size:0.78rem; letter-spacing:0.05em; color:var(--navy); text-decoration:underline; }

.services-preview__more{ text-align:center; margin-top:0.7rem; }
.services-preview__more-link{
  display:inline-block; font-family:var(--ff-body); font-size:0.76rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--white); background:var(--navy);
  padding:0.5rem 1.2rem; border-radius:999px; text-decoration:none;
}
.services-preview__more-link:hover{ background:var(--navy-mid); }

@media (max-width:900px){
  .services-split{ grid-template-columns:1fr; gap:0.9rem; }
  .services-split .services-intro{ text-align:center; }
  .services-split .services-intro h2{ font-size:1.5rem; line-height:1.15; margin:0.25rem 0; }
  .services-split .services-intro .gold-line--center{ margin:0.25rem auto; }
  .services-split .services-intro .lead{ text-align:center; margin:0.35rem auto 0; font-size:0.85rem; line-height:1.4; }
  .services-split .motion-control{ text-align:center; margin-top:0.5rem; }
  .services-split .motion-control .motion-toggle{ padding:0.3rem 0.8rem; font-size:0.74rem; }
  .services-preview__grid{ width:100%; max-width:640px; margin-left:auto; margin-right:auto; gap:0.45rem; }
  .services-preview__tag{ font-size:0.68rem; }
  .services-preview__num{ font-size:0.62rem; }
  .services-preview__expand{ margin-top:0.7rem; }
}

@media (max-width:480px){
  .services-preview__card{ grid-template-columns:1fr; gap:0.6rem; padding:0.7rem; }
  .services-preview__card .photo{ max-width:100%; aspect-ratio:16/9; }
  .services-preview__card h3{ font-size:1.25rem; margin:0.1rem 0 0.25rem; }
  .services-preview__card p{ font-size:0.85rem; }
}

/* 20 September 2026. When Explore our experiences or Our Services lands on the
   section, the script gives the heading keyboard focus so the keyboard arrives
   where the eye does. Safari on iPhone draws a blue box around any focused
   element, so the heading appeared boxed. No ring on that programmatic focus. */
#services h2[tabindex="-1"]:focus{ outline:none; box-shadow:none; }

/* 20 September 2026. The Heritage Trail is the multi day guided journey and
   was reachable only by scrolling to its own section further down. A small
   strip with a Windsor Castle photograph now sits inside the block, beside
   the pause control on the same row, so it is on the first screen without
   making the text column taller than the nine cards. */
.services-intro__row{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.6rem; margin-top:0.35rem; }
.services-intro__row .motion-control{ margin-top:0; }
.services-trail{
  display:flex; align-items:center; gap:0.45rem; text-decoration:none; max-width:215px;
  background:var(--cream-dark); border-radius:8px; padding:0.2rem 0.45rem 0.2rem 0.2rem; color:var(--navy);
}
.services-trail img{ width:40px; height:30px; object-fit:cover; border-radius:4px; flex:none; }
.services-trail span{ display:flex; flex-direction:column; line-height:1.2; }
.services-trail strong{ font-family:var(--ff-display); font-weight:400; font-size:0.88rem; }
.services-trail em{ font-style:normal; font-family:var(--ff-body); font-size:0.64rem; color:var(--muted); }
.services-trail:hover strong{ color:var(--gold-ink); }
@media (max-width:900px){
  .services-intro__row{ justify-content:center; }
  .services-trail{ max-width:300px; text-align:left; }
}