:root {
  /* Wine is reserved for the footer and small accents (text / filled CTAs). */
  --burgundy-deep: #3d0712;
  --burgundy: #6e1322;
  --burgundy-light: #8a1828;
  --burgundy-glow: #a8334a;

  /* Gold / tan accent — used for dividers, outlines, icon strokes. */
  --gold: #af9069;
  --gold-light: #c4ad8a;
  --gold-deep: #8d7150;

  /* Cream family — page bg + layered sections / cards. */
  --cream: #efebe8;
  --cream-warm: #f4f1ed;
  --cream-deep: #e5dfd8;

  /* The single warm beige used only on the homepage hero. */
  --hero-bg: #ccc2b8;

  --ink: #2a0810;
  --mute: #8a6862;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Event hero only — the upcoming sessions block is set in Poppins. */
  --font-event: "Poppins", "Manrope", -apple-system, "Segoe UI", sans-serif;

  --shadow-sm: 0 2px 6px rgba(61, 7, 18, 0.06);
  --shadow-md: 0 8px 24px rgba(61, 7, 18, 0.10);
  --shadow-lg: 0 18px 48px rgba(61, 7, 18, 0.16);
  --shadow-gold: 0 4px 16px rgba(175, 144, 105, 0.28);
}

* { box-sizing: border-box; }
*::selection { background: var(--gold); color: var(--burgundy-deep); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sticky-footer: main grows to fill leftover height when content is short
   so the burgundy site-footer pins to the bottom of the viewport. */
body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
/* `height: auto` is not optional here: uploads carry width/height ATTRIBUTES
   (CKEditor writes them), and with max-width shrinking the width while the
   attribute pins the height, the picture stretches vertically. Rules that
   set an explicit height (.hero-photo img, .team-card-photo img, …) are more
   specific and still win. */
img, svg { display: block; max-width: 100%; height: auto; }
h2, h3, p { margin-top: 0; }

body.is-loading { overflow: hidden; }

/* ============================================================
   PAGE LOADER — premium intro reveal (homepage only)
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(175, 144, 105, 0.18), transparent 60%),
    radial-gradient(ellipse at 90% 90%, rgba(175, 144, 105, 0.12), transparent 55%),
    var(--cream);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.9s ease;
}

.page-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(175, 144, 105, 0.08) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.5;
  pointer-events: none;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader-glow {
  position: absolute;
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(175, 144, 105, 0.18) 0%, transparent 60%);
  filter: blur(40px);
  animation: loader-glow-pulse 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes loader-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 0.95; }
}

.page-loader-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 640px;
  perspective: 1400px;
}

.page-loader-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 0 32px;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0;
  transform-origin: center;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: loader-logo-flip 1.2s 0.2s cubic-bezier(0.2, 0.8, 0.25, 1.05) forwards;
}

.page-loader-logo {
  display: block;
  height: 92px;
  width: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.page-loader-welcome {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  line-height: 1.1;
  color: var(--burgundy-deep);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(12px);
  animation: loader-rise 0.9s 0.55s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

.page-loader-welcome em {
  font-style: italic;
  color: var(--gold-deep);
}

.page-loader-rule {
  width: 0;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: loader-rule-grow 1.2s 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-loader-tagline {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: 0;
  transform: translateY(8px);
  animation: loader-rise 0.8s 1.4s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

@keyframes loader-logo-flip {
  0%   { opacity: 0; transform: rotateY(-100deg) translateZ(-30px) scale(0.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg) translateZ(0) scale(1); }
}

@keyframes loader-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes loader-rule-grow {
  to { width: min(280px, 70vw); opacity: 1; }
}

@media (max-width: 560px) {
  .page-loader-logo { height: 64px; }
  .page-loader-logo-card { padding: 14px 22px; margin-bottom: 24px; }
  .page-loader-tagline { letter-spacing: 0.32em; }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-glow { animation: none; }
  .page-loader-logo-card,
  .page-loader-welcome,
  .page-loader-rule,
  .page-loader-tagline {
    animation: none;
    opacity: 1;
    transform: none;
    width: min(280px, 70vw);
  }
}

/* Sits directly under a page heading, so it drops the top padding that
   would otherwise double up with the heading's own 36px. Two classes because
   `.page-section` is declared further down the file and would win the tie. */
.page-section.page-section--flush { padding-top: 10px; }

/* ============================================================
   EDITORIAL CONTENT PATTERNS
   Classes used inside seeded PageContent bodies (About Us, the
   founder story). Scoped to .article-body so they only apply
   where that typography is already in play.
   ============================================================ */

/* The italic line that sits under a section heading. */
.article-body .content-standfirst {
  margin: -6px 0 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--gold-deep);
}

.article-body .content-list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.article-body .content-list li {
  position: relative;
  margin: 0 0 9px;
  padding-left: 22px;
}

/* Tan diamond rather than a bullet, echoing the section ornaments. */
.article-body .content-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--gold);
}

.article-body .content-pullquote {
  margin: 30px 0;
  padding: 20px 26px;
  border-left: 2px solid var(--gold);
  background: var(--cream-warm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-variation-settings: "SOFT" 100;
  line-height: 1.4;
  color: var(--burgundy);
}

.article-body .content-cta {
  margin: 30px 0 0;
}

.article-body .content-cta a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.article-body .content-cta a:hover {
  background: var(--cream-deep);
  border-color: var(--gold-deep);
}

/* Credentials — qualification, then the awarding institution as a link,
   then where it is. */
.article-body .credential-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.article-body .credential-list li {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 2px solid rgba(175, 144, 105, 0.5);
}

.article-body .credential-list strong,
.article-body .credential-list a,
.article-body .credential-list span {
  display: block;
}

.article-body .credential-list strong {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--burgundy-deep);
}

.article-body .credential-list a {
  /* Block for the line break, but only as wide as the text — a full-width
     block anchor drags its underline right across the column. */
  width: fit-content;
  font-size: 17px;
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(175, 144, 105, 0.75);
}

.article-body .credential-list a:hover { text-decoration-color: var(--burgundy); }

.article-body .credential-list span {
  font-size: 14px;
  font-style: italic;
  color: rgba(42, 8, 16, 0.6);
}

/* ============================================================
   UPCOMING SESSIONS & EVENTS — hero takeover
   Same two-column shape and feature row as the standing hero, so
   the hero height does not jump when an event starts or ends.
   ============================================================ */
.hero--event .hero-content { padding-right: 20px; }

/* Owl fixes item widths from a measurement; belt-and-braces so a bad one can
   never widen the page itself. .hero already clips, but the carousel sits
   inside it and would otherwise stretch the layout before clipping. */
.hero--event .event-hero-viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.hero--event .event-slide { max-width: 100%; }

/* The whole event block is Poppins, not the Cormorant/Fraunces pairing the
   standing hero uses — a session announcement reads as information, and
   Poppins keeps it plain at the smaller sizes this block needs. */
.hero--event .hero-content,
.hero--event .event-title,
.hero--event .event-sub,
.hero--event .event-meta dt,
.hero--event .event-meta dd,
.hero--event .event-eyebrow,
.hero--event .hero-actions .button {
  font-family: var(--font-event);
}

.hero--event .event-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Fraunces, not the Cormorant of the standing hero title: an event name is
   arbitrary editor copy of any length, and Fraunces holds a tighter, more
   even colour when it has to wrap to three lines. */
.hero--event .event-title {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  font-variation-settings: normal;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ---------- The small important details ---------- */
.hero--event .event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(175, 144, 105, 0.4);
  border-bottom: 1px solid rgba(175, 144, 105, 0.4);
}

/* Icon + label/value, so each detail reads at a glance rather than as a
   run of similar-looking text. */
.hero--event .event-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.hero--event .event-meta-item > div { min-width: 0; }

/* Several dates: the schedule takes the whole row so venue names have
   somewhere to go, and fee/places sit under it. */
.hero--event .event-meta--schedule { flex-direction: column; }

.hero--event .event-meta--schedule .event-meta-item--full { width: 100%; }

.hero--event .event-schedule {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero--event .event-schedule li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(175, 144, 105, 0.4);
}

.hero--event .event-schedule li:last-child { border-bottom: 0; }

.hero--event .event-schedule-venue {
  font-weight: 500;
  color: var(--burgundy-deep);
}

.hero--event .event-schedule-when {
  font-size: 12.5px;
  color: rgba(42, 8, 16, 0.62);
}

/* Price line for one sitting. Its own row under the venue, so a figure is
   never left floating between two city names. */
.hero--event .event-schedule-terms {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 2px;
  font-size: 12.5px;
}

.hero--event .event-schedule-price {
  font-weight: 500;
  color: var(--burgundy);
}

.hero--event .event-schedule-early {
  padding: 1px 8px;
  border-radius: 2px;
  background: rgba(175, 144, 105, 0.24);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--burgundy-deep);
}

.hero--event .event-schedule-places {
  font-size: 11.5px;
  font-style: italic;
  color: rgba(42, 8, 16, 0.6);
}

.hero--event .event-meta-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--gold-deep);
}

.hero--event .event-meta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero--event .event-meta dt {
  margin-bottom: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.hero--event .event-meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--burgundy-deep);
}

.hero--event .event-meta-second {
  display: block;
  font-size: 12px;
  color: rgba(42, 8, 16, 0.6);
}

.hero--event .event-sub {
  max-width: 48ch;
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---------- The image stack ---------- */
/* The cards are absolutely positioned on top of each other, so the column
   needs its own height — nothing in flow gives it one. */
/* The event hero is a shorter block than the standing hero: less type, and
   square cards rather than a full-bleed portrait. */
.hero--event .hero-grid { min-height: 440px; }

.hero--event .hero-content { padding-block: 44px 48px; }

/* The stack IS the square. Sizing the container and pinning every card to
   `inset: 0` keeps the deck out of percentage-translate arithmetic entirely —
   the cards cannot drift, and the only transform left is the px deck offset.
   `overflow` has to be reset because .hero-photo hides it, which would clip
   the offset cards behind the front one. */
.hero--event .event-stack {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(405px, 31vw);
  aspect-ratio: 1;
  min-height: 0;
  margin: auto;
  padding: 0;
  overflow: visible;
}

/* Square, centred, and sized off the column rather than filling it — the
   deck offsets are added to the centring translate, so the cards stay put
   as a set instead of drifting toward the edge as the stack deepens. */
.hero--event .event-stack-card {
  --pos: 0;
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border: 6px solid var(--cream-warm);
  border-radius: 2px;
  box-shadow: var(--shadow-md);
  background: var(--cream-warm);
  /* Depth is read straight off --pos: further back means nudged right and
     down, a touch smaller and a touch faded. */
  transform:
    translate(calc(var(--pos) * 18px), calc(var(--pos) * 14px))
    scale(calc(1 - var(--pos) * 0.05));
  opacity: calc(1 - var(--pos) * 0.16);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.9s ease;
}

/* No-JS depth, and the starting position before the shuffle takes over.
   script.js sets --pos inline, which outranks these. */
.hero--event .event-stack-card:nth-child(1) { --pos: 0; }
.hero--event .event-stack-card:nth-child(2) { --pos: 1; }
.hero--event .event-stack-card:nth-child(3) { --pos: 2; }
.hero--event .event-stack-card:nth-child(4) { --pos: 3; }
.hero--event .event-stack-card:nth-child(5) { --pos: 4; }
.hero--event .event-stack-card:nth-child(6) { --pos: 5; }

.hero--event .event-stack-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Carousel between several live events ---------- */
/* Owl is only initialised for two or more; a single event keeps this class
   and never becomes a carousel at all. */
.event-hero-viewport.is-static .event-slide { width: 100%; }

/* Bottom-right, in the gutter the image stack's own bottom padding leaves
   free. Bottom-left would land on top of the feature row. */
.hero--event .owl-dots {
  position: absolute;
  right: 4vw;
  bottom: 16px;
  left: auto;
  z-index: 4;
  margin: 0;
  display: flex;
  gap: 9px;
}

/* Cream fill with a wine ring, so the dots hold up over both the beige
   hero and a photograph if the stack ever reaches under them. */
.hero--event .owl-dots .owl-dot span {
  /* `display: block` is load-bearing: only owl.carousel.min.css is loaded,
     not owl.theme.default.min.css, so nothing else blockifies these spans —
     left inline they ignore width and height and collapse to a hairline. */
  display: block;
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--burgundy);
  opacity: 0.55;
}

.hero--event .owl-dots .owl-dot.active span {
  background: var(--burgundy);
  opacity: 1;
}

@media (max-width: 900px) {
  .hero--event .hero-grid { min-height: 0; }
  .hero--event .event-stack {
    width: min(310px, 70vw);
    margin: 0 auto 34px;
  }
  .hero--event .event-meta {
    gap: 10px 20px;
    justify-content: center;
  }
  .hero--event .event-sub { margin-inline: auto; }
  .hero--event .event-meta dd { font-size: 14px; }
  .hero--event .owl-dots { left: 0; right: 0; justify-content: center; }
  .hero--event .event-stack { padding-bottom: 46px; }
}

/* A deck shuffling on a loop is exactly the motion this preference asks us
   to stop. Flatten it to the top card alone. */
@media (prefers-reduced-motion: reduce) {
  .hero--event .event-stack-card {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .hero--event .event-stack-card:not(:first-child) { display: none; }
}

/* ============================================================
   ABOUT US INTRO + MEET THE FOUNDER PAGE
   Prose in both places reuses .article-body for its typography;
   the classes here only frame it.
   ============================================================ */
.about-intro {
  max-width: 780px;
  margin: 0 auto;
}

/* Signpost from the team section through to /about/founder/. The whole
   point of the dedicated page: the founder is hard to pick out of a grid
   of six, so she gets named before the grid rather than inside it. */
.team-founder-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 16px 26px;
  border: 1px solid rgba(175, 144, 105, 0.45);
  border-radius: 3px;
  background: var(--cream-warm);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.team-founder-link:hover {
  border-color: var(--gold);
  background: var(--cream-deep);
  transform: translateY(-2px);
}

.team-founder-link-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  color: var(--burgundy);
}

.team-founder-link-name {
  flex: 1 1 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(42, 8, 16, 0.72);
}

.team-founder-link-arrow {
  font-size: 17px;
  color: var(--gold-deep);
  transition: transform 0.25s ease;
}

.team-founder-link:hover .team-founder-link-arrow { transform: translateX(4px); }

/* ---------- The founder's own page ---------- */
.founder-profile {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 54px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* position: relative is what .founder-corners anchors its inset to — the
   same gold-corner motif the homepage card and programme cards use. */
.founder-portrait {
  position: relative;
  padding: 14px;
  background: var(--cream-warm);
  border: 1px solid rgba(175, 144, 105, 0.4);
}

.founder-portrait-photo {
  display: block;
  width: 100%;
  height: auto;
}

.founder-profile-name {
  margin: 10px 0 4px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  color: var(--burgundy);
  letter-spacing: -0.01em;
}

.founder-profile-role {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.founder-profile-rule {
  width: 64px;
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.founder-profile-bio {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: rgba(42, 8, 16, 0.82);
}

.founder-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.founder-story {
  max-width: 780px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .founder-profile {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  /* Portrait first but reined in — full-bleed on a phone it dwarfs the
     name and role it is meant to introduce. */
  .founder-portrait {
    max-width: 340px;
    margin: 0 auto;
  }
  .founder-profile-copy { text-align: center; }
  .founder-profile-rule { margin-inline: auto; }
  .founder-profile-actions { justify-content: center; }
}

@media (max-width: 620px) {
  .team-founder-link { padding: 14px 18px; }
}

/* ============================================================
   ANNOUNCEMENT BAR
   Sits above the header on every page when there is a live notice.
   Tan, not wine: burgundy stays reserved for the footer and filled
   CTAs, and #AF9069 under burgundy-deep text still reads as a break
   from the cream page without borrowing the footer's colour.
   ============================================================ */
.announcement-bar {
  position: relative;
  z-index: 11;
  display: flex;
  align-items: center;
  /* Vertical, not horizontal. A left-to-right gradient darkens exactly the
     two edges the marquee mask is already fading, and notices scrolling
     through those zones lose contrast twice over. */
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: var(--burgundy-deep);
  border-bottom: 1px solid rgba(61, 7, 18, 0.16);
}

/* The dismiss script sets `hidden`. Without this the display rule above
   beats the UA stylesheet's [hidden] and the bar never goes away. */
.announcement-bar[hidden] { display: none; }

/* The viewport. Edge mask fades notices in and out instead of letting
   them clip against a hard edge, as on the client marquee. */
.announcement-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.announcement-track {
  display: flex;
  width: max-content;
  /* transform, not `left`: this animates forever, so it has to stay on the
     compositor and off the layout path. */
  will-change: transform;
  animation: announcement-scroll 34s linear infinite;
}

@keyframes announcement-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.announcement-marquee:hover .announcement-track,
.announcement-marquee:focus-within .announcement-track {
  animation-play-state: paused;
}

/* min-width is load-bearing. The -50% loop is only gapless while one copy
   is at least as wide as the viewport, and a single short notice is
   nowhere near that — without this you get a bare stretch of tan sliding
   past between repeats. space-around then distributes the slack evenly
   instead of bunching notices at the left. */
.announcement-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.announcement-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 34px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.announcement-dot {
  font-size: 7px;
  opacity: 0.5;
}

.announcement-link {
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.announcement-link:hover { color: var(--burgundy); }

.announcement-dismiss {
  flex: 0 0 auto;
  margin-right: 6px;
  padding: 2px 8px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.announcement-dismiss:hover { opacity: 1; }

.announcement-dismiss:focus-visible {
  outline: 2px solid var(--burgundy-deep);
  outline-offset: 1px;
  opacity: 1;
}

@media (max-width: 700px) {
  .announcement-item { padding: 10px 22px; font-size: 12px; }
  .announcement-dismiss { font-size: 18px; }
}

/* Reduced motion: no scroll at all. One copy, centred, free to wrap — a
   moving line of text is exactly what this preference is asking us not to
   do, and an announcement still has to be readable standing still. */
@media (prefers-reduced-motion: reduce) {
  .announcement-track { animation: none; width: 100%; }
  .announcement-list:nth-child(2) { display: none; }
  .announcement-list {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }
  .announcement-item { white-space: normal; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: relative;
  z-index: 10;
  min-height: 92px;
  padding: 14px 6vw;
  display: flex;
  align-items: center;
  gap: 36px;
  background: var(--cream);
  color: var(--burgundy-deep);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}

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

.brand-letter {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "SOFT" 80, "opsz" 144;
  color: var(--gold-light);
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease;
  text-shadow: 0 2px 14px rgba(175, 144, 105, 0.25);
}

.brand:hover .brand-letter {
  color: var(--gold);
  transform: translateY(-1px);
}

.brand-tile {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: transform 0.3s ease;
}

.brand:hover .brand-tile {
  transform: translateY(-1px);
}

.brand-logo {
  display: block;
  height: 56px;
  width: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 1.9vw, 30px);
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav a {
  position: relative;
  padding: 6px 2px;
  color: rgba(61, 7, 18, 0.78);
  transition: color 0.25s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.main-nav a:hover,
.main-nav a.is-current { color: var(--burgundy); }
.main-nav a:hover::after,
.main-nav a.is-current::after { transform: scaleX(1); }

.nav-extra {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 2px;
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(61, 7, 18, 0.78);
  transition: color 0.25s ease;
}

.nav-extra::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-extra:hover { color: var(--burgundy); }
.nav-extra:hover::after { transform: scaleX(1); }

/* ============================================================
   BUTTONS
   ============================================================ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button-gold {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--burgundy-deep);
  border-color: var(--gold-deep);
  box-shadow: var(--shadow-gold);
}
.button-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(175, 144, 105, 0.45);
}

.button-red {
  background: linear-gradient(180deg, var(--burgundy-light) 0%, var(--burgundy) 100%);
  color: var(--cream);
  border-color: var(--burgundy-deep);
  box-shadow: var(--shadow-md);
}
.button-red:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-deep) 100%);
}

.button-dark {
  background: var(--burgundy-deep);
  color: var(--cream);
  border-color: rgba(175, 144, 105, 0.45);
}
.button-dark:hover {
  background: #2a0510;
  border-color: var(--gold);
  color: var(--gold-light);
}

.button-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(247, 237, 224, 0.42);
}
.button-ghost:hover {
  background: rgba(247, 237, 224, 0.08);
  border-color: var(--gold);
  color: var(--gold-light);
}

.button-burgundy {
  background: var(--burgundy);
  color: var(--cream);
  border-color: var(--burgundy);
  box-shadow: 0 6px 18px rgba(61, 7, 18, 0.18);
}
.button-burgundy:hover {
  transform: translateY(-1px);
  background: var(--burgundy-deep);
  box-shadow: 0 10px 24px rgba(61, 7, 18, 0.26);
}

.button-outline {
  background: transparent;
  color: var(--burgundy);
  border-color: #af9069;
}
.button-outline:hover {
  background: rgba(175, 144, 105, 0.12);
  border-color: #8d7150;
  color: var(--burgundy-deep);
}

.button-small {
  min-height: 40px;
  padding: 0 22px;
  font-size: 11px;
}

.button-chevron span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 400;
  line-height: 0;
  margin-top: -0.1em;
  opacity: 0.7;
}
.button-chevron span:first-child { margin-right: 4px; }
.button-chevron span:last-child { margin-left: 4px; }

.header-action { min-width: 184px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: #ccc2b8;
  color: var(--burgundy-deep);
}

/* Lift the hero up so the transparent home header sits over it (desktop only).
   Only the left content column pads down to clear the nav — the photo bleeds
   all the way to the top of the viewport. */
@media (min-width: 901px) {
  .page-home main { margin-top: -92px; }
  .page-home .hero-content { padding-top: 148px; }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 560px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 4vw 64px 6vw;
  max-width: 760px;
  justify-self: end;
  width: 100%;
  opacity: 0;
  animation: hero-rise 0.9s 0.15s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

.hero-ornament {
  position: relative;
  width: 116px;
  height: 16px;
  margin-bottom: 26px;
}

.hero-ornament::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #af9069 25%, #af9069 75%, transparent);
  transform: translateY(-50%);
}

.hero-ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid #af9069;
  background: #ccc2b8;
  transform: translate(-50%, -50%) rotate(45deg);
}

.hero-title {
  margin: 0 0 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: normal;
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 400;
  font-variation-settings: normal;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--burgundy);
}

.hero-title .hero-line { display: block; }

.hero-sub {
  max-width: 460px;
  margin: 0 0 30px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(61, 7, 18, 0.78);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Feature row inside the left content column */
.hero-features {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
  padding-top: 26px;
}

.hero-features::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(175, 144, 105, 0.55), rgba(175, 144, 105, 0.15) 80%, transparent);
}

.hero-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.hero-feature + .hero-feature::before {
  content: "";
  position: absolute;
  left: calc(-18px / 2);
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: rgba(175, 144, 105, 0.45);
}

.hero-feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #af9069;
}

.hero-feature-icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.hero-feature-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy-deep);
  line-height: 1.5;
}

.hero-feature-sub {
  margin-top: -6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: rgba(61, 7, 18, 0.66);
}

/* Right-column photo, bleeds to edge with a left-side fade into the beige */
.hero-photo {
  position: relative;
  align-self: stretch;
  overflow: hidden;
}

.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.hero-photo-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    #ccc2b8 0%,
    rgba(204, 194, 184, 0.92) 3%,
    rgba(204, 194, 184, 0.72) 8%,
    rgba(204, 194, 184, 0.42) 14%,
    rgba(204, 194, 184, 0.18) 20%,
    rgba(204, 194, 184, 0) 26%
  );
  z-index: 2;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Transparent header on the homepage ---------- */
.page-home .site-header {
  /* Soft cream backdrop so the burgundy nav text reads cleanly over the
     hero photo. Frosted-glass blur on browsers that support backdrop-filter,
     graceful fallback to the rgba background everywhere else. */
  background: rgba(239, 235, 232, 0.72);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 1px 0 rgba(175, 144, 105, 0.18);
  color: var(--burgundy-deep);
}
.page-home .site-header::after { display: none; }

.page-home .brand-tile {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  mix-blend-mode: multiply;
}
.page-home .brand:hover .brand-tile {
  background: transparent;
  box-shadow: none;
}

.page-home .main-nav a,
.page-home .nav-extra {
  color: rgba(61, 7, 18, 0.78);
}
.page-home .main-nav a:hover,
.page-home .main-nav a.is-current,
.page-home .nav-extra:hover {
  color: var(--burgundy);
}
.page-home .main-nav a::after,
.page-home .nav-extra::after {
  background: #af9069;
}

/* ============================================================
   INTRO / WELCOME / PROGRAMMES
   ============================================================ */
.intro {
  position: relative;
  padding: 64px 6vw 72px;
  background:
    radial-gradient(circle at 0% 0%, rgba(244, 241, 237, 0.95), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(175, 144, 105, 0.06), transparent 40%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}

.intro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 60px;
  background: linear-gradient(180deg, rgba(61, 7, 18, 0.06), transparent);
  pointer-events: none;
}

.intro-inner {
  display: grid;
  grid-template-columns: minmax(280px, 28%) 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
}

.section-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.welcome { text-align: center; }

.welcome h2 {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  line-height: 1.1;
  color: var(--burgundy);
  letter-spacing: -0.015em;
}

.welcome h2 em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 80;
  color: var(--burgundy-deep);
}

.rule {
  width: 70%;
  height: 1px;
  margin: 0 auto 20px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.welcome h3 {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  color: var(--burgundy);
}

.welcome-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--mute);
  margin-bottom: 30px;
}

/* Founder card — replaces the founder portrait */
.founder-card {
  position: relative;
  margin: 22px auto 28px;
  padding: 42px 24px 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(175, 144, 105, 0.14), transparent 60%),
    linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  border: 1px solid rgba(175, 144, 105, 0.45);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 14px 32px rgba(61, 7, 18, 0.1);
}

.founder-card::before,
.founder-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.founder-card::before { top: 12px; }
.founder-card::after { bottom: 12px; }

.founder-corners { position: absolute; inset: 6px; pointer-events: none; }
.founder-corners span {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold-deep);
}
.founder-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.founder-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.founder-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.founder-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.founder-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.founder-monogram {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-weight: 400;
  font-size: 68px;
  line-height: 0.9;
  color: var(--burgundy);
  letter-spacing: -0.04em;
}

.founder-monogram .dot {
  font-size: 32px;
  color: var(--gold-deep);
  font-style: normal;
  position: relative;
  top: -10px;
}

.founder-flourish {
  width: 96px;
  height: 14px;
  margin: 12px auto 8px;
  position: relative;
}

.founder-flourish::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 30%, var(--gold-deep) 70%, transparent);
  transform: translateY(-50%);
}

.founder-flourish::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold-deep);
  background: var(--cream);
  transform: translate(-50%, -50%) rotate(45deg);
}

.founder-mark {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--mute);
  letter-spacing: 0.08em;
}

/* Real photo treatment — replaces the .founder-monogram block */
.founder-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 6px 0 8px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 3px;
  border: 1px solid rgba(175, 144, 105, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 10px 26px rgba(61, 7, 18, 0.2);
}

.founder-card--photo {
  padding-top: 38px;
}

.team-card-monogram--photo {
  padding: 26px 14px 16px;
}

.trainer-name {
  margin: 4px 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  color: var(--burgundy);
  letter-spacing: -0.01em;
}

.trainer-title {
  margin-bottom: 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mute);
}

/* Programmes */
.programmes-wrap {
  display: flex;
  flex-direction: column;
}

.programmes-eyebrow {
  align-self: center;
  margin-bottom: 24px;
}

.programmes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  border: 1px solid rgba(175, 144, 105, 0.28);
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 14px rgba(61, 7, 18, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(175, 144, 105, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 32px rgba(61, 7, 18, 0.14);
}

.card-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(175, 144, 105, 0.22), rgba(175, 144, 105, 0.06) 65%, rgba(110, 19, 34, 0.06));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(175, 144, 105, 0.28);
}

.card-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-cover .icon {
  width: 64px;
  height: 64px;
  margin: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(175, 144, 105, 0.45);
  color: var(--gold-deep);
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.card-cover .icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.card-body {
  position: relative;
  padding: 22px 18px 24px;
}

.card-num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  color: var(--gold-deep);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

.card h3 {
  min-height: 38px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  line-height: 1.1;
  color: var(--burgundy-deep);
  letter-spacing: -0.005em;
}

.card p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mute);
}

.services-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
}

.services-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175, 144, 105, 0.5), transparent);
}

/* ============================================================
   TESTIMONIAL — its own row inside .programmes-wrap (right column)
   ============================================================ */
.testimonial-row {
  margin-top: 28px;
}

.testimonial {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 30%) 1fr;
  min-height: 200px;
  border: 1px solid rgba(175, 144, 105, 0.42);
  border-radius: 3px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 75% 30%, rgba(175, 144, 105, 0.08), transparent 55%),
    linear-gradient(135deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 18px 40px rgba(61, 7, 18, 0.08);
  overflow: hidden;
}

.testimonial-emblem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  background:
    radial-gradient(circle at 50% 30%, rgba(175, 144, 105, 0.14), transparent 65%),
    linear-gradient(180deg, var(--cream-deep) 0%, #d8d2cb 100%);
  border-right: 1px solid rgba(175, 144, 105, 0.32);
}

.testimonial-emblem::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(175, 144, 105, 0.38);
  border-radius: 2px;
  pointer-events: none;
}

.quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: 140px;
  line-height: 0.65;
  color: var(--gold);
  margin-bottom: 8px;
}

.quote-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.testimonial-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 42px 22px;
  text-align: center;
  min-width: 0;
}

.testimonial-copy h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  line-height: 1;
  color: var(--burgundy);
  letter-spacing: -0.005em;
}

.testimonial-copy h2::before,
.testimonial-copy h2::after {
  content: "";
  flex: 0 0 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.testimonial-viewport {
  margin: 0 auto 18px;
  max-width: 720px;
  width: 100%;
}

.testimonial-slide {
  margin: 0;
  padding: 0 6px;
  text-align: center;
}

.testimonial blockquote {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(42, 8, 16, 0.82);
  quotes: "\201C" "\201D";
}

.testimonial blockquote::before { content: open-quote; margin-right: 2px; }
.testimonial blockquote::after { content: close-quote; margin-left: 2px; }

.testimonial figcaption {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.testimonial-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.testimonial-actions .button {
  min-height: 36px;
  padding: 0 22px;
  font-size: 10.5px;
}

/* Owl Carousel customisation */
.testimonial .owl-nav { display: none !important; }

.testimonial .owl-dots {
  display: flex !important;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}

.testimonial .owl-dots .owl-dot span {
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  background: rgba(175, 144, 105, 0.4) !important;
  transition: width 0.3s ease, background 0.3s ease;
}

.testimonial .owl-dots .owl-dot.active span {
  width: 24px !important;
  background: var(--gold) !important;
  border-radius: 4px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .site-header { gap: 20px; padding-inline: 4vw; }
  .main-nav { gap: 14px; font-size: 11px; letter-spacing: 0.14em; }
  .hero-content { padding: 80px 4vw 64px; }
  .programmes { grid-template-columns: repeat(3, 1fr); }
  .intro-inner { gap: 44px; }
}

@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-block: 16px;
  }
  .main-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
    gap: 10px 18px;
  }

  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-content {
    max-width: 100%;
    justify-self: stretch;
    align-items: center;
    text-align: center;
    padding: 72px 6vw 56px;
  }
  .hero-ornament { margin-left: auto; margin-right: auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-photo { min-height: 380px; }
  .hero-features { grid-template-columns: repeat(2, 1fr); gap: 28px; padding-bottom: 40px; }

  .intro-inner { grid-template-columns: 1fr; gap: 56px; }
  .programmes { grid-template-columns: repeat(2, 1fr); }

  .testimonial { grid-template-columns: 1fr; min-height: 0; }
  .testimonial-emblem {
    padding: 28px 20px 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(175, 144, 105, 0.32);
  }
  .quote-mark { font-size: 120px; margin-bottom: 6px; }
  .testimonial-copy { padding: 30px 24px; }
}

@media (max-width: 560px) {
  .site-header { padding: 14px 16px; }
  .brand-letter { font-size: 44px; }
  .brand-name { font-size: 18px; }
  .brand-sub { font-size: 12px; }
  .header-action { width: 100%; }

  .hero-content { padding: 56px 18px 44px; }
  .hero-title { font-size: clamp(34px, 9vw, 52px); }
  .hero-sub { font-size: 14px; }
  .hero-actions .button { width: 100%; }
  .hero-photo { min-height: 300px; }
  .hero-features { padding: 28px 18px 36px; gap: 22px; }

  .intro { padding: 48px 18px 56px; }
  .programmes { grid-template-columns: 1fr; }
  .card { padding: 24px 16px 20px; }

  .testimonial-row { margin-top: 48px; }
  .testimonial-copy { padding: 20px 18px 22px; }
  .testimonial-copy h2 { font-size: 18px; }
  .testimonial-copy h2::before,
  .testimonial-copy h2::after { flex-basis: 30px; }
  .testimonial blockquote { font-size: 14px; }
  .testimonial-actions .button { width: 100%; }
}

/* ============================================================
   INNER PAGES — shared components
   ============================================================ */
.page-banner {
  position: relative;
  padding: 78px 6vw 60px;
  background: var(--cream);
  color: var(--burgundy-deep);
  text-align: center;
  overflow: hidden;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(175, 144, 105, 0.16) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.4;
  pointer-events: none;
}

.page-banner::after {
  content: "";
  position: absolute;
  left: 6vw;
  right: 6vw;
  bottom: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.page-banner-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.page-banner-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.page-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 400;
  font-variation-settings: "SOFT" 80, "opsz" 144;
  line-height: 1.02;
  color: var(--burgundy);
  letter-spacing: -0.025em;
}

.page-banner-rule {
  width: 80px;
  height: 1px;
  margin: 18px auto 14px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.page-banner-sub {
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(42, 8, 16, 0.7);
}

/* Generic content sections */
.page-section {
  padding: 72px 6vw;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}

.page-section-alt {
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
}

.page-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.page-section-inner-narrow {
  max-width: 820px;
}

.section-header {
  text-align: center;
  margin-bottom: 44px;
}

.section-header-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.section-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  line-height: 1.1;
  color: var(--burgundy);
  letter-spacing: -0.02em;
}

.section-header h2 em {
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  color: var(--burgundy-deep);
}

.section-header-rule {
  width: 60px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

/* ============================================================
   ABOUT — Vision / Mission / Team
   ============================================================ */
.vision-mission {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.value-card {
  position: relative;
  padding: 50px 36px 44px;
  background:
    radial-gradient(circle at 50% 0%, rgba(175, 144, 105, 0.12), transparent 60%),
    linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  border: 1px solid rgba(175, 144, 105, 0.42);
  border-radius: 4px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 14px 36px rgba(61, 7, 18, 0.1);
}

.value-card::before,
.value-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.value-card::before { top: 14px; }
.value-card::after { bottom: 14px; }

.value-corners {
  position: absolute;
  inset: 8px;
  pointer-events: none;
}
.value-corners span {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold-deep);
}
.value-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.value-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.value-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.value-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.value-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.value-card h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--burgundy);
  letter-spacing: -0.02em;
  line-height: 1;
}

.value-rule {
  width: 56px;
  height: 1px;
  margin: 14px auto 18px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

.value-card p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}

/* Team */
.team-intro {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
}

.team-intro p {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(42, 8, 16, 0.78);
}

.team-intro p:last-child { margin-bottom: 0; }

/* Flex (not grid) so partial rows center — when there are 6 members, the
   second row of 2 sits centered, not left-aligned. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Flip card: front shows photo + name + role, back reveals the bio.
   Triggered by hover OR keyboard focus (article has tabindex="0"). */
.team-card-flip {
  position: relative;
  flex: 0 1 calc((100% - 24px * 3) / 4);     /* 4 per row */
  max-width: 280px;
  aspect-ratio: 4 / 5;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
}

@media (max-width: 1080px) {
  .team-card-flip { flex-basis: calc((100% - 24px * 2) / 3); }   /* 3 per row */
}

@media (max-width: 820px) {
  .team-grid { gap: 18px; }
  .team-card-flip { flex-basis: calc((100% - 18px) / 2); }       /* 2 per row */
}

@media (max-width: 520px) {
  .team-card-flip { flex-basis: 100%; max-width: 320px; }        /* 1 per row */
}

.team-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  transform-style: preserve-3d;
}

.team-card-flip:hover .team-card-flip-inner,
.team-card-flip:focus .team-card-flip-inner,
.team-card-flip:focus-within .team-card-flip-inner {
  transform: rotateY(180deg);
}

.team-card-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(175, 144, 105, 0.32);
  box-shadow: var(--shadow-sm);
}

.team-card-face-front {
  display: flex;
  flex-direction: column;
  background: var(--cream-warm);
}

.team-card-photo {
  position: relative;
  flex: 1 1 auto;
  background: linear-gradient(135deg, rgba(175, 144, 105, 0.22), rgba(175, 144, 105, 0.06) 65%, rgba(110, 19, 34, 0.06));
  overflow: hidden;
  display: grid;
  place-items: center;
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-monogram-placeholder {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 72px;
  color: var(--gold-deep);
  opacity: 0.55;
  letter-spacing: 0.02em;
  line-height: 1;
}

.team-card-info {
  flex: 0 0 auto;
  padding: 16px 16px 18px;
  text-align: center;
  background: var(--cream-warm);
  border-top: 1px solid rgba(175, 144, 105, 0.22);
}

.team-card-name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 40;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  color: var(--burgundy-deep);
  letter-spacing: -0.005em;
}

.team-card-role {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.team-card-face-back {
  transform: rotateY(180deg);
  background: linear-gradient(140deg, var(--cream-deep), var(--cream-warm));
  border-color: var(--gold);
  padding: 28px 22px;
  display: grid;
  place-items: center;
  text-align: center;
}

.team-card-bio {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(42, 8, 16, 0.85);
}

.team-card {
  padding: 26px 26px 30px;
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  border: 1px solid rgba(175, 144, 105, 0.35);
  border-radius: 4px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 12px 28px rgba(61, 7, 18, 0.08);
}

.team-card-monogram {
  position: relative;
  padding: 30px 16px 22px;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(175, 144, 105, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(175, 144, 105, 0.3);
  border-radius: 3px;
}

.team-name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  color: var(--burgundy);
  letter-spacing: -0.01em;
}

.team-name-muted { color: var(--mute); }

.team-role {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mute);
  letter-spacing: 0.02em;
}

.team-bio {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

.team-placeholder-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 152px;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(175, 144, 105, 0.12), transparent 65%),
    linear-gradient(180deg, var(--cream-deep) 0%, #d8d2cb 100%);
  border: 1px dashed rgba(156, 122, 31, 0.4);
  border-radius: 3px;
}

.team-placeholder-mark {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  color: var(--gold-deep);
  opacity: 0.5;
  line-height: 0.5;
}

/* ============================================================
   CONTACT / POLICY
   ============================================================ */
.policy-block { margin-bottom: 32px; }

.policy-lead {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--burgundy);
  text-align: center;
  padding: 24px 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(175, 144, 105, 0.12), transparent 60%),
    rgba(244, 241, 237, 0.7);
  border-top: 1px solid rgba(175, 144, 105, 0.4);
  border-bottom: 1px solid rgba(175, 144, 105, 0.4);
  margin-bottom: 38px;
}

.policy-block h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  font-variation-settings: "SOFT" 80;
  color: var(--burgundy);
  letter-spacing: -0.01em;
}

.policy-block p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  border: 1px solid rgba(175, 144, 105, 0.35);
  border-radius: 4px;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(175, 144, 105, 0.7);
  box-shadow: 0 14px 28px rgba(61, 7, 18, 0.12);
}

.contact-card-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}

.contact-card-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  font-variation-settings: "SOFT" 100;
  color: var(--burgundy);
  margin-bottom: 6px;
}

.contact-card-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--mute);
}

.contact-cta {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* ============================================================
   SOCIAL CARDS (contact page)
   ============================================================ */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 26px;
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  border: 1px solid rgba(175, 144, 105, 0.35);
  border-radius: 4px;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: rgba(175, 144, 105, 0.7);
  box-shadow: 0 16px 32px rgba(61, 7, 18, 0.14);
}

.social-card-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  background: rgba(175, 144, 105, 0.14);
  border: 1px solid rgba(175, 144, 105, 0.45);
  border-radius: 50%;
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.social-card:hover .social-card-icon {
  background: rgba(175, 144, 105, 0.22);
  color: var(--burgundy);
  transform: scale(1.06);
}

.social-card-icon svg {
  width: 30px;
  height: 30px;
}

.social-card-handle {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  font-variation-settings: "SOFT" 80;
  color: var(--burgundy);
  letter-spacing: -0.005em;
}

.social-card-action {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Location card on contact page */
.location-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px 36px;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(175, 144, 105, 0.08), transparent 60%),
    linear-gradient(135deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  border: 1px solid rgba(175, 144, 105, 0.42);
  border-radius: 4px;
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 14px 32px rgba(61, 7, 18, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.location-card:hover {
  transform: translateY(-2px);
  border-color: rgba(175, 144, 105, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 18px 38px rgba(61, 7, 18, 0.12);
}

.location-card-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: rgba(175, 144, 105, 0.14);
  border: 1px solid rgba(175, 144, 105, 0.45);
  border-radius: 50%;
  color: var(--gold-deep);
}

.location-card-icon svg { width: 30px; height: 30px; }

.location-card-content { min-width: 0; }

.location-card-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.location-card-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  font-variation-settings: "SOFT" 80, "opsz" 144;
  color: var(--burgundy);
  letter-spacing: -0.01em;
}

.location-card-sub {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mute);
}

.location-card-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 0.2s ease, transform 0.2s ease;
}

.location-card:hover .location-card-cta {
  color: var(--burgundy);
  transform: translateX(4px);
}

/* ============================================================
   SITE FOOTER (all pages)
   ============================================================ */
.site-footer {
  position: relative;
  padding: 48px 6vw 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 51, 74, 0.32), transparent 65%),
    linear-gradient(180deg, var(--burgundy-deep) 0%, #1d0309 100%);
  color: var(--cream);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.45;
}

/* Four columns: brand+socials · quick links · contact · newsletter.
   The brand column is widest because it carries the positioning line. */
.site-footer-inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 0.85fr) minmax(0, 1fr)
    minmax(0, 0.85fr) minmax(0, 1.2fr);
  gap: 40px 34px;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  padding-bottom: 44px;
}

.footer-col {
  min-width: 0;
}

.footer-col-title {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cream);
}

.footer-brand-mark {
  display: flex;
  align-items: center;
  padding-right: 14px;
  border-right: 1px solid rgba(175, 144, 105, 0.3);
}

.footer-brand-mark img {
  display: block;
  height: 48px;
  width: auto;
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.005em;
}

.footer-brand-tagline {
  margin: 16px 0 22px;
  max-width: 34ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247, 237, 224, 0.72);
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- Quick links + contact lists ---- */

.footer-links,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-links a,
.footer-contact a {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: rgba(247, 237, 224, 0.78);
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--gold-light);
}

/* ---- Newsletter ---- */

.footer-newsletter-copy {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(247, 237, 224, 0.68);
}

.footer-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-newsletter-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(175, 144, 105, 0.38);
  border-radius: 999px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer-newsletter-input::placeholder {
  color: rgba(247, 237, 224, 0.42);
}

.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}

.footer-newsletter-button {
  flex: 0 0 auto;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy-deep);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-newsletter-button:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.footer-newsletter-note {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(247, 237, 224, 0.72);
}

.footer-newsletter-note--ok {
  color: var(--gold-light);
}

.footer-newsletter-note--error {
  color: #E9A3A3;
}

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

.footer-social {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(175, 144, 105, 0.08);
  border: 1px solid rgba(175, 144, 105, 0.32);
  border-radius: 50%;
  color: var(--gold-light);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.footer-social:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--burgundy-deep);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

/* Address sits as the last item of the contact list — two stacked lines
   rather than the old icon + text row. */
.footer-location {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(175, 144, 105, 0.2);
}

.footer-location-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(247, 237, 224, 0.85);
}

.footer-location-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(247, 237, 224, 0.6);
}

.site-footer-bottom {
  padding: 16px 0;
  border-top: 1px solid rgba(175, 144, 105, 0.18);
  text-align: center;
}

.site-footer-bottom p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(247, 237, 224, 0.55);
}

/* Brand column spans the full width first, then the three text columns
   sit side by side — keeps the tagline readable instead of squeezing it
   into a quarter of a tablet screen. */
@media (max-width: 1180px) {
  .site-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 40px;
  }
  .footer-col--brand {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(175, 144, 105, 0.18);
  }
  .footer-brand-tagline { max-width: 48ch; }
}

@media (max-width: 720px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .footer-brand { justify-content: center; }
  .footer-brand-tagline { margin-inline: auto; }
  .footer-socials { justify-content: center; }
  .footer-links,
  .footer-contact { align-items: center; }
  .footer-location { align-items: center; }
  .footer-newsletter-form { justify-content: center; }
  .footer-newsletter-input { flex-basis: 100%; text-align: center; }
  .footer-newsletter-button { width: 100%; }
}

@media (max-width: 560px) {
  .site-footer { padding: 38px 18px 0; }
  .location-card { grid-template-columns: 1fr; gap: 16px; padding: 22px; text-align: center; }
  .location-card-icon { margin: 0 auto; }
  .social-card { padding: 26px 18px 22px; }
}

/* ============================================================
   BLOG LIST
   ============================================================ */
.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(175, 144, 105, 0.35);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(61, 7, 18, 0.1);
  margin-bottom: 56px;
}

.blog-featured-image {
  display: block;
  background: var(--cream-deep) center / cover no-repeat;
  min-height: 380px;
  overflow: hidden;
  border-right: 1px solid rgba(175, 144, 105, 0.3);
  transition: filter 0.3s ease;
}

.blog-featured-image-photo {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

.blog-featured-image:hover { filter: brightness(1.05); }

.blog-featured-image--etiquette {
  background-image: url("../images/blog-image.8719ba3a7bff.jpeg");
}

.blog-featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px 44px;
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
}

.blog-featured-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.blog-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

.blog-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: var(--gold-deep);
}

.blog-featured-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  line-height: 1.1;
  color: var(--burgundy-deep);
  letter-spacing: -0.02em;
}

.blog-featured-excerpt {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--mute);
}

.blog-featured-cta {
  align-self: flex-start;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(175, 144, 105, 0.3);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(175, 144, 105, 0.6);
  box-shadow: 0 18px 40px rgba(61, 7, 18, 0.12);
}

.blog-card-image {
  display: block;
  height: 200px;
  overflow: hidden;
  background: var(--cream-deep) center / cover no-repeat;
}

/* Uploads render as a real <img> with object-fit rather than a stretched
   background — an off-ratio photo crops instead of distorting. */
.blog-card-image-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-image-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(175, 144, 105, 0.12), transparent 65%),
    linear-gradient(135deg, var(--cream-deep) 0%, #d8d2cb 100%);
  border-bottom: 1px solid rgba(175, 144, 105, 0.25);
}

.blog-card-meta {
  margin-bottom: 8px;
  min-height: 14px;
}

.blog-card-category {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 0.2s ease;
}

.blog-card-category:hover {
  color: var(--burgundy);
}

.blog-categories-section {
  padding-bottom: 0;
}

.placeholder-mark {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 500;
  color: var(--gold-deep);
  opacity: 0.45;
  line-height: 0.5;
}

.blog-card-content { padding: 22px 24px 26px; }

.blog-card-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.blog-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  line-height: 1.2;
  color: var(--burgundy-deep);
  letter-spacing: -0.01em;
}

.blog-card-excerpt {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
}

.blog-card-link {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  align-self: flex-start;
}

.blog-card-placeholder .blog-card-link {
  color: var(--mute);
  border-color: rgba(156, 122, 31, 0.3);
}

/* ============================================================
   BLOG DETAIL (article)
   ============================================================ */
.article-hero {
  position: relative;
  padding: 66px 6vw 44px;
  background: var(--cream);
  color: var(--burgundy-deep);
  text-align: center;
  overflow: hidden;
}

.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(175, 144, 105, 0.14) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.4;
  pointer-events: none;
}

.article-hero-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}

.article-back {
  display: inline-block;
  margin-bottom: 26px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 0.25s ease, transform 0.25s ease;
}

.article-back:hover {
  color: var(--burgundy);
  transform: translateX(-3px);
}

.article-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.article-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  line-height: 1.05;
  color: var(--burgundy);
  letter-spacing: -0.025em;
}

.article-title em {
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  color: var(--burgundy-deep);
}

.article-title-rule {
  width: 70px;
  height: 1px;
  margin: 16px auto 12px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.article-deck {
  max-width: 580px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mute);
}

.article-image {
  width: min(1000px, calc(100% - 12vw));
  height: clamp(280px, 36vw, 460px);
  margin: -40px auto 56px;
  background: var(--cream-deep) center / cover no-repeat;
  border-radius: 4px;
  border: 1px solid rgba(175, 144, 105, 0.4);
  box-shadow: 0 22px 60px rgba(61, 7, 18, 0.28);
  position: relative;
  z-index: 1;
}

.article-image--etiquette {
  background-image: url("../images/blog-image.8719ba3a7bff.jpeg");
}

.article {
  max-width: 760px;
  margin: 0 auto 80px;
  padding: 0 6vw;
}

.article-body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}

.article-body p {
  margin: 0 0 18px;
}

.article-body p.lead {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  line-height: 1.35;
  color: var(--burgundy);
  letter-spacing: -0.01em;
}

.article-body p.pull-quote {
  margin: 32px 0;
  padding: 22px 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-variation-settings: "SOFT" 100;
  text-align: center;
  color: var(--burgundy);
  border-top: 1px solid rgba(175, 144, 105, 0.45);
  border-bottom: 1px solid rgba(175, 144, 105, 0.45);
  line-height: 1.35;
}

.article-body h2 {
  margin: 42px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  line-height: 1.15;
  color: var(--burgundy-deep);
  letter-spacing: -0.015em;
}

.article-body em {
  font-style: italic;
  color: var(--burgundy);
}

/* ------------------------------------------------------------
   CKEditor 5 body content.
   The editor emits <figure class="image"><img></figure>, puts width/height
   ATTRIBUTES on the <img>, and writes an inline width on .image_resized.
   Without `max-width` a full-size upload overruns the 760px column; without
   `height: auto` those attributes hold the original pixel height and squash
   the picture. Both are needed — that pair is the distortion fix.
   ------------------------------------------------------------ */

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(175, 144, 105, 0.35);
  box-shadow: 0 14px 36px rgba(61, 7, 18, 0.14);
}

.article-body figure {
  margin: 36px 0;
}

/* Plain (full-width) image */
.article-body figure.image {
  margin-left: auto;
  margin-right: auto;
}

.article-body figure.image > img {
  width: 100%;
}

/* Editor-resized: the inline width lives on the <figure>, so the <img>
   just fills it. */
.article-body figure.image_resized > img {
  width: 100%;
}

.article-body figure.image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}

.article-body figure.image-style-align-left,
.article-body figure.image-style-side--left {
  float: left;
  max-width: 50%;
  margin: 8px 30px 20px 0;
}

.article-body figure.image-style-align-right,
.article-body figure.image-style-side {
  float: right;
  max-width: 50%;
  margin: 8px 0 20px 30px;
}

/* Inline images sit in the text flow — no block treatment. */
.article-body .image-inline img,
.article-body img.image_resized {
  display: inline-block;
  vertical-align: middle;
}

.article-body figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--mute);
}

/* Floated figures must not escape the article column. */
.article-body::after {
  content: "";
  display: block;
  clear: both;
}

/* The toolbar also offers lists, quotes and links — style them so editor
   output doesn't fall back to browser defaults mid-article. */
.article-body ul,
.article-body ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.article-body li {
  margin-bottom: 8px;
}

.article-body li::marker {
  color: var(--gold-deep);
}

.article-body blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  font-variation-settings: "SOFT" 100;
  line-height: 1.4;
  color: var(--burgundy);
}

.article-body blockquote p:last-child {
  margin-bottom: 0;
}

.article-body a {
  color: var(--burgundy);
  border-bottom: 1px solid var(--gold);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.article-body a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}

.article-body h3 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  line-height: 1.2;
  color: var(--burgundy-deep);
}

.article-body table {
  width: 100%;
  margin: 28px 0;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
}

.article-body th,
.article-body td {
  padding: 10px 14px;
  border: 1px solid rgba(175, 144, 105, 0.35);
  text-align: left;
}

.article-body th {
  background: var(--cream-warm);
  color: var(--burgundy-deep);
}

.article-meta-category {
  color: var(--gold-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.article-meta-category:hover {
  border-bottom-color: var(--gold-deep);
}

.blog-related {
  padding-top: 0;
}

.article-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 64px 0 0;
  padding: 44px 32px 40px;
  background:
    radial-gradient(circle at 50% 0%, rgba(175, 144, 105, 0.16), transparent 60%),
    linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  border: 1px solid rgba(175, 144, 105, 0.4);
  border-radius: 4px;
  text-align: center;
}

.article-tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--burgundy);
  letter-spacing: -0.015em;
}

.article-footer-rule {
  width: 60px;
  height: 1px;
  margin: 12px auto 14px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

.article-footer-sub {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mute);
}

/* ============================================================
   PAGE CTA (shared)
   ============================================================ */
.page-cta {
  position: relative;
  padding: 76px 6vw;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
  color: var(--burgundy-deep);
  text-align: center;
  overflow: hidden;
}

.page-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(175, 144, 105, 0.14) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.4;
  pointer-events: none;
}

.page-cta-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.page-cta-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.page-cta-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 400;
  font-variation-settings: "SOFT" 100;
  line-height: 1.1;
  color: var(--burgundy);
  letter-spacing: -0.015em;
}

.page-cta-sub {
  margin: 0 0 26px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mute);
}

.page-cta-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Responsive for inner pages */
@media (max-width: 900px) {
  .vision-mission { grid-template-columns: 1fr; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-image { min-height: 260px; border-right: 0; border-bottom: 1px solid rgba(175, 144, 105, 0.3); }
  .blog-featured-content { padding: 36px 28px; }
  .article-image { margin-top: -30px; margin-bottom: 40px; }
}

@media (max-width: 560px) {
  .page-banner { padding: 56px 18px 44px; }
  .page-section { padding: 50px 18px; }
  .page-cta { padding: 56px 18px; }
  .article { padding: 0 18px; margin-bottom: 60px; }
  .article-image { width: calc(100% - 36px); margin-bottom: 32px; }
  .value-card { padding: 38px 24px 32px; }
  .policy-lead { padding: 20px 18px; font-size: 17px; }
  .article-body { font-size: 16px; }
  .article-body p.lead { font-size: 20px; }
  .article-body p.pull-quote { font-size: 19px; padding: 18px 16px; }
}

/* ============================================================
   LANDSCAPE SCALING
   Keep the desktop design intact on landscape devices with
   limited height (tablet landscape, phone landscape) — just
   scale everything down proportionally so it all fits.
   ============================================================ */
@media (orientation: landscape) and (max-height: 720px) {
  body { zoom: 0.85; }
}

@media (orientation: landscape) and (max-height: 600px) {
  body { zoom: 0.72; }

  /* Suppress the portrait-mobile stacking rules so the design
     stays in its desktop arrangement when scaled down. */
  .site-header {
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-block: 14px;
  }
  .main-nav {
    order: 0;
    flex-basis: auto;
    flex-wrap: nowrap;
    margin-top: 0;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 580px;
  }
  .hero-content {
    max-width: 640px;
    justify-self: end;
    align-items: flex-start;
    text-align: left;
    padding: 96px 5vw 72px 6vw;
  }
  .hero-ornament { margin-left: 0; }
  .hero-sub { margin: 0 0 36px; }
  .hero-actions { justify-content: flex-start; }
  .hero-photo { min-height: 0; }
  .hero-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .intro-inner { grid-template-columns: minmax(280px, 28%) 1fr; gap: 60px; }
  .programmes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .testimonial {
    grid-template-columns: minmax(200px, 30%) 1fr;
    min-height: 200px;
  }
  .testimonial-emblem {
    border-right: 1px solid rgba(175, 144, 105, 0.32);
    border-bottom: 0;
    padding: 22px 18px;
  }
  .quote-mark { font-size: 140px; margin-bottom: 8px; }
  .testimonial-copy { padding: 24px 42px 22px; }
  .testimonial-actions .button { width: auto; }
  .header-action { width: auto; }
}

@media (orientation: landscape) and (max-height: 420px) {
  body { zoom: 0.58; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   PROGRAMMES CATALOGUE — /programmes/
   Slim intro header, then stacked category sections, each with
   its own programme grid. Reuses the cream/tan palette.
   ============================================================ */

.catalogue-intro {
  background: var(--cream);
  padding: 56px 24px 28px;
  text-align: center;
}

.catalogue-intro-inner {
  max-width: 760px;
  margin: 0 auto;
}

.catalogue-intro-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.catalogue-intro-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 60;
  font-weight: 500;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  color: var(--burgundy-deep);
}

.catalogue-intro-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(42, 8, 16, 0.72);
}

.programmes-catalogue {
  background: var(--cream);
  padding: 24px 24px 80px;
}

.programmes-catalogue-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.programmes-catalogue-inner--narrow {
  max-width: 760px;
}

.catalogue-category + .catalogue-category {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(175, 144, 105, 0.28);
}

.catalogue-category-header {
  text-align: center;
  margin-bottom: 32px;
}

.catalogue-category-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}

.catalogue-category-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60, "SOFT" 50;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 36px);
  color: var(--burgundy-deep);
}

.catalogue-category-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(42, 8, 16, 0.7);
  font-size: 17px;
}

/* Child-category grid. The homepage `.programmes` grid is a hard 5-up
   because it always holds exactly 5 cards; a category can have any number
   of children, so this one flows. Cards themselves are the same `.card`. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
}

/* Cover fallback when a child category has neither image nor icon_choice. */
.card-cover-initial {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100;
  font-size: 52px;
  line-height: 1;
  color: var(--gold-deep);
  opacity: 0.42;
}

/* "3 categories" / "8 programmes" — tells a visitor whether this card leads
   to another level of categories or to the programmes themselves. */
.card-count {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 0.2s ease;
}

.card:hover .card-count {
  color: var(--burgundy);
}

/* Second and later stacked blocks on a category page — the first already
   carries the top padding. */
.programmes-catalogue--secondary {
  padding-top: 0;
}

.programme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.programme-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-warm);
  border: 1px solid rgba(175, 144, 105, 0.32);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.programme-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

.programme-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(175, 144, 105, 0.22), rgba(175, 144, 105, 0.06) 65%, rgba(110, 19, 34, 0.06));
  overflow: hidden;
  border-bottom: 1px solid rgba(175, 144, 105, 0.22);
}

.programme-card-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.programme-card-cover-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  opacity: 0.35;
  letter-spacing: 0.04em;
}

.programme-card-body {
  padding: 22px 22px 24px;
  flex: 1;
}

.programme-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.programme-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 40;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--burgundy-deep);
}

.programme-card-age {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}

.programme-card-summary {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
  color: rgba(42, 8, 16, 0.78);
}

.programme-card-fee {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--burgundy);
}

/* The whole programme card is an <a> — keep it looking like a card. */
a.programme-card { color: inherit; }
a.programme-card:hover { text-decoration: none; }

.programme-card-more {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 0.2s ease;
}

.programme-card:hover .programme-card-more {
  color: var(--burgundy);
}

.catalogue-empty {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(42, 8, 16, 0.6);
  padding: 24px 0;
}

.catalogue-back {
  text-align: center;
  margin-top: 48px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.catalogue-back a {
  color: var(--burgundy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* ============================================================
   PROGRAMME DETAIL — /programmes/<path>/<slug>/
   Two-column lede (copy | photo), then the prose body, then
   sibling programmes. Cream throughout — wine stays in the footer.
   ============================================================ */

.programme-detail {
  background: var(--cream);
  padding: 8px 24px 64px;
}

.programme-detail-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.programme-detail-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.programme-detail-title {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 60;
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--burgundy-deep);
}

.programme-detail-rule {
  width: 64px;
  height: 1px;
  margin: 20px 0 22px;
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}

.programme-detail-summary {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(42, 8, 16, 0.82);
}

/* At-a-glance facts — separated by AF9069 hairlines, same device as the
   homepage .hero-features row. */
.programme-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid rgba(175, 144, 105, 0.34);
  border-bottom: 1px solid rgba(175, 144, 105, 0.34);
}

.programme-fact {
  padding: 0 24px;
  border-left: 1px solid rgba(175, 144, 105, 0.34);
}

.programme-fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.programme-fact dt {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.programme-fact dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--burgundy-deep);
}

.programme-detail-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Figure — photo (or lettered placeholder) inside an inset gold frame. */
.programme-detail-figure {
  position: relative;
  margin: 0;
  padding: 10px;
}

.programme-detail-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.programme-detail-image--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(175, 144, 105, 0.26), rgba(175, 144, 105, 0.08) 60%, rgba(110, 19, 34, 0.07));
  border: 1px solid rgba(175, 144, 105, 0.34);
}

.programme-detail-monogram {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(80px, 12vw, 140px);
  line-height: 1;
  color: var(--gold-deep);
  opacity: 0.4;
}

.programme-detail-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.programme-detail-corners span {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold);
}

.programme-detail-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.programme-detail-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.programme-detail-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.programme-detail-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Prose body */
.programme-body-section {
  background: var(--cream-warm);
  border-top: 1px solid rgba(175, 144, 105, 0.24);
  border-bottom: 1px solid rgba(175, 144, 105, 0.24);
  padding: 68px 24px;
}

.programme-body-inner {
  max-width: 760px;
  margin: 0 auto;
}

.programme-detail-body {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(42, 8, 16, 0.85);
}

.programme-detail-body p {
  margin: 0 0 18px;
}

.programme-detail-body p:last-child {
  margin-bottom: 0;
}

/* Sibling programmes */
.programme-related {
  background: var(--cream);
  padding: 68px 24px 76px;
}

.programme-related-inner {
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .programme-detail-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Photo above the copy on narrow screens — it carries the programme
     faster than the title does. */
  .programme-detail-figure { order: -1; }
  .programme-detail-image { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .programme-detail { padding: 8px 18px 48px; }
  .programme-body-section { padding: 48px 18px; }
  .programme-related { padding: 48px 18px 56px; }

  .programme-facts {
    flex-direction: column;
    gap: 18px;
  }

  .programme-fact {
    padding: 0;
    border-left: 0;
  }

  .programme-detail-actions .button { width: 100%; text-align: center; }
}

/* The homepage 5-card grid was authored for <div class="card">.
   The cards are now <a> elements — these resets keep their visual identical. */
a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; }

/* ============================================================
   PAGE BREADCRUMB — slim alternative to .page-banner
   Used on /blog/. Sits just below the global header.
   ============================================================ */

.page-breadcrumb {
  background: var(--cream);
  padding: 22px 24px 12px;
}

.page-breadcrumb-inner {
  max-width: 1180px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-deep);
}

.page-breadcrumb-inner a {
  color: var(--gold-deep);
  transition: color 0.2s ease;
}

.page-breadcrumb-inner a:hover {
  color: var(--burgundy);
}

.page-breadcrumb-sep {
  color: rgba(141, 113, 80, 0.5);
}

.page-breadcrumb-current {
  color: var(--burgundy);
  font-weight: 600;
}

/* ============================================================
   CONSULTATION FORM — /consultation/
   Slim fee callout up top, then a fieldset-grouped form.
   ============================================================ */

.consultation-page {
  background: var(--cream);
  padding: 8px 24px 80px;
}

.consultation-page-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Slim fee bar — sits right above the submit button, low visual weight,
   so the form feels efficient instead of front-loaded. */
.consultation-fee-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 16px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--cream-warm), var(--cream-deep));
  border: 1px solid var(--gold);
  border-radius: 8px;
}

.consultation-fee-row-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.consultation-fee-row-amount {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 40;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--burgundy-deep);
  letter-spacing: -0.005em;
}

/* Form scaffolding */
.consultation-form {
  background: var(--cream-warm);
  border: 1px solid rgba(175, 144, 105, 0.32);
  border-radius: 14px;
  padding: 28px 28px 32px;
  box-shadow: var(--shadow-sm);
}

.form-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 28px;
}
.form-fieldset:last-of-type { margin-bottom: 16px; }

.form-legend {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0 0 10px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 40;
  font-weight: 500;
  font-size: 18px;
  color: var(--burgundy-deep);
  border-bottom: 1px solid rgba(175, 144, 105, 0.28);
}

.form-row { display: contents; }

.form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 540px) {
  .form-row--split { grid-template-columns: 1fr; gap: 0; }
}

.form-field {
  margin-bottom: 14px;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.form-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(175, 144, 105, 0.45);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(110, 19, 34, 0.12);
}

select.form-input { appearance: auto; }
textarea.form-input { resize: vertical; min-height: 90px; }

.form-help {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(42, 8, 16, 0.6);
}

.form-error {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--burgundy);
}

.form-warning {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--burgundy-deep);
  background: rgba(175, 144, 105, 0.14);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}

.form-errors {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(110, 19, 34, 0.08);
  border-left: 3px solid var(--burgundy);
  border-radius: 4px;
  color: var(--burgundy-deep);
  font-size: 14px;
}

.consultation-form-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.consultation-form-cancel {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--burgundy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* Thanks page */
.consultation-thanks { text-align: center; padding-top: 12px; }

.consultation-thanks-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(42, 8, 16, 0.85);
  margin: 0 0 18px;
}

.consultation-thanks-sub {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(42, 8, 16, 0.7);
  margin: 0 0 28px;
}

.consultation-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ============================================================
   PAGE HEADING — slim h1 used right under .page-breadcrumb
   on every inner page (about, contact, programmes, blog, …).
   Replaces the heavier .page-banner / .catalogue-intro.
   ============================================================ */

.page-heading {
  background: var(--cream);
  padding: 8px 24px 36px;
  text-align: center;
}

.page-heading-inner {
  max-width: 960px;
  margin: 0 auto;
}

.page-heading-title {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 60;
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.08;
  color: var(--burgundy-deep);
}

.page-heading-sub {
  max-width: 620px;
  margin: 16px auto 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(42, 8, 16, 0.72);
}

/* ============================================================
   CLIENT MARQUEE + OUR CLIENTS PAGE
   ============================================================ */

.clients {
  background: var(--cream-warm);
  border-top: 1px solid rgba(175, 144, 105, 0.24);
  border-bottom: 1px solid rgba(175, 144, 105, 0.24);
  padding: 62px 0 58px;
  overflow: hidden;
}

.clients-header {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 38px;
}

.clients-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--burgundy);
}

/* Deliberately no `em` variant here. Other section headings italicise the
   emphasised word; this one is set as a single uninterrupted line. */

/* The viewport. The edge mask fades rows in and out instead of letting
   them clip against a hard border. */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  /* transform (not `left`) so the loop runs on the compositor and never
     triggers layout on a continuously animating element. */
  will-change: transform;
  animation: marquee-scroll 92s linear infinite;
}

/* The track holds the list twice, so -50% lands the second copy exactly
   where the first began — no jump at the loop point. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marquee-item {
  flex: 0 0 auto;
  padding: 0 30px;
  border-right: 1px solid rgba(175, 144, 105, 0.28);
}

.marquee-item > a,
.marquee-item > .client-link {
  color: inherit;
}

/* Mark + name lockup, shared by the marquee and the clients grid. */
.marquee-item .client-link,
.marquee-item > .client-text,
.clients-grid .marquee-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-logo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 4px;
  /* Full colour at rest, not only on hover — on a marquee the logos are
     moving past and most are never hovered at all. */
  transition: transform 0.25s ease;
}

.marquee-item:hover .client-logo,
.clients-grid li:hover .client-logo {
  transform: scale(1.06);
}

/* A logo link that 404s gets this class from script.js — the mark
   collapses and the name carries the row on its own. */
.client-logo.is-broken {
  display: none;
}

.client-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.client-name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 40;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  color: var(--burgundy-deep);
  white-space: nowrap;
}

.client-location {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.clients-actions {
  display: flex;
  justify-content: flex-end;
  max-width: 1320px;
  margin: 34px auto 0;
  padding: 0 6vw;
}

.clients-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  border-bottom: 1px solid var(--gold);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.clients-more:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}

/* The arrow leads the eye to the page the link opens. */
.clients-more-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.25s ease;
}

.clients-more:hover .clients-more-arrow {
  transform: translateX(4px);
}

/* ---- /clients/ ---- */

.clients-count {
  margin: 0 0 44px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--mute);
}

.clients-group + .clients-group {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(175, 144, 105, 0.26);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* On the page the items are cards, not marquee cells — reset the divider
   the marquee adds and give each its own surface. */
.clients-grid .marquee-item {
  padding: 16px 20px;
  border-right: 0;
  background: var(--cream-warm);
  border: 1px solid rgba(175, 144, 105, 0.3);
  border-radius: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.clients-grid .marquee-item:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.clients-grid .client-name {
  white-space: normal;
}

.clients-grid .client-logo {
  width: 72px;
  height: 72px;
}

@media (max-width: 720px) {
  .clients { padding: 46px 0 44px; }
  .marquee-item { padding: 0 20px; }
  .clients-grid { grid-template-columns: 1fr; }
  .clients-actions { justify-content: center; padding: 0 24px; }
}

/* Continuous motion is exactly what vestibular-sensitivity settings ask to
   suppress — park the track and let the row scroll by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-track { animation: none; }
  .marquee-list:nth-child(2) { display: none; }
}

/* ============================================================
   IMPACT FIGURES — top of the homepage right-hand column
   ============================================================ */

.stats {
  margin-bottom: 52px;
}

.stats-eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 26px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 30px 18px 26px;
  /* Gold card, cream detail. Text stays burgundy-deep rather than cream —
     cream on tan is about 2.4:1, which fails on the 11px label. */
  background: linear-gradient(170deg, var(--gold-light) 0%, var(--gold) 100%);
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 18px rgba(61, 7, 18, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 16px 32px rgba(61, 7, 18, 0.16);
}

/* The Girls in ICT figure carries the longest label by some distance, so it
   takes the full width beneath the other four rather than forcing every
   card to the height of its text. */
.stats-grid .stat:nth-child(5) {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  text-align: left;
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: var(--cream);
  border: 1px solid rgba(61, 7, 18, 0.12);
  border-radius: 50%;
  color: var(--burgundy);
  box-shadow: 0 2px 6px rgba(61, 7, 18, 0.12);
}

.stat-icon svg {
  width: 23px;
  height: 23px;
}

/* Plain body sans, not the display face — these read as data, and Fraunces
   made them compete with the section headings. */
.stat-value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(26px, 2.7vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--burgundy-deep);
  /* The digits change every frame while counting — tabular figures stop the
     number jittering as glyph widths swap. */
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: rgba(61, 7, 18, 0.78);
}

.stats-grid .stat:nth-child(5) .stat-label {
  max-width: 34ch;
}

@media (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid .stat:nth-child(5) { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stats { margin-bottom: 40px; padding-bottom: 34px; }
}

/* ============================================================
   LEGAL — /legal/ and each policy
   ============================================================ */

.page-section-inner--narrow {
  max-width: 760px;
}

.legal-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-index-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: var(--cream-warm);
  border: 1px solid rgba(175, 144, 105, 0.3);
  border-radius: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.legal-index-item a:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.legal-index-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.legal-index-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 40;
  font-weight: 500;
  font-size: 19px;
  color: var(--burgundy-deep);
}

.legal-index-summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mute);
}

.legal-index-arrow {
  flex: 0 0 auto;
  font-size: 17px;
  color: var(--gold-deep);
  transition: transform 0.25s ease;
}

.legal-index-item a:hover .legal-index-arrow {
  transform: translateX(4px);
}

.legal-dates {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.legal-page {
  max-width: 820px;
  margin: 0 auto 80px;
  padding: 0 6vw;
}

/* Policy text is denser than an article — tighten the display sizes the
   .article-body rules set for editorial. */
.legal-body {
  font-size: 16.5px;
  line-height: 1.75;
}

.legal-body h2 {
  margin: 36px 0 12px;
  font-size: clamp(19px, 2vw, 23px);
}

.legal-body h3 {
  margin: 26px 0 10px;
  font-size: 17px;
}

.legal-page .catalogue-back {
  margin-top: 48px;
}