/* ═══════════════════════════════════════════════════════════════
   SWAN Yoga Retreat — Goa
   Layout system for swan-yoga-goa.com
   Palette taken verbatim from swan-yoga-goa.com brand tokens:
     var(--saffron) orange · var(--ochre-ink) deep orange · var(--ink) bark
     var(--ink-2) body grey · var(--gold) gold · var(--paper-3) sand · var(--paper-2) mist
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* Taken off the live site, swan-yoga-goa.com: the dark-brown footer
     (#3c3023), the near-white page (#fcfcfc) with its #f7f7f7 alternate band,
     #444 headings on #626262 body copy, and #ddd rules.

     The accent is the one departure. The live site's header orange was
     brighter and failed WCAG AA as text in either direction — contrast is
     symmetric, and it measured about 2.65 against white. Text therefore
     already used a darkened #c25000, which measures 4.73 against white and
     clears AA. That darker tone is now the accent EVERYWHERE, surfaces
     included, so orange text and orange surfaces are a single colour, and
     white text on an orange surface clears AA as well. The lighter #ff9a4d
     is kept for hover states, where it is the only way a filled button can
     still visibly react. */

  /* ink + paper */
  --ink: #444444;          /* headings */
  --ink-2: #626262;        /* body copy */
  /* the live site's blue-grey is #737e86, which measures 4.05 on the page and
     carries a lot of small text — captions, dates, labels. Darkened just
     enough to clear AA (4.81); the hue is unchanged. */
  --ink-3: #68727a;        /* meta, captions */
  --paper: #fcfcfc;        /* the page */
  --paper-2: #ffffff;      /* cards */
  --paper-3: #f7f7f7;      /* alternate band + pale buttons */
  --rule: #dddddd;
  --rule-2: #c9c9c9;

  /* the one accent */
  --orange-mid: #c25000;   /* the live header orange, darkened for AA */
  --orange-light: #ff9a4d;
  --orange-deep-ink: #c25000;   /* the same orange, deep enough to carry text */

  /* darks */
  --forest: #3c3023;       /* the live footer brown */
  --forest-2: #2c2c2c;     /* the live top action bar */

  /* component aliases — the rest of the stylesheet speaks in these */
  --moss: #c25000;
  --leaf: #c25000;
  --olive: #ff9a4d;
  --saffron: #c25000;
  --ochre-ink: #c25000;
  --gold: #c25000;
  --gold-light: #ff9a4d;
  --orange: var(--orange-mid);
  --orange-deep: var(--orange-deep-ink);
  --bark: var(--forest);
  --bark-2: var(--forest);
  --bark-3: var(--forest-2);
  --cream: #f7f7f7;
  --cream-2: #d6d6d6;
  --cream-3: #b0b0b0;

  /* body copy runs the full width of its column — one width site-wide */
  --measure: none;
  --container: 1240px;
  --nav-h: 74px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Anchor targets sit under the sticky nav otherwise: a jump to #some-section
   lands with its heading hidden behind the bar, which reads as a broken link.
   scroll-margin only applies to an element the browser is scrolling TO, so
   this costs nothing on the elements it never touches. */
section[id],
h2[id],
h3[id] {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

/* The guard against a stray wide element sits on the root, not on <body>.
   A clipping ancestor stops position:sticky working for everything inside it,
   which silently broke the sticky teacher portraits and section photographs;
   on the root the clip still reaches the viewport and sticky survives. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}

/* A single linked word inside a heading — "an ashram" in the homepage
   welcome, where the term needs explaining to visitors who have never met it.
   Links are undecorated site-wide, so a bare <a> inside an h2 would be
   invisible. This keeps the heading's colour and marks the word with an
   underline in the accent instead of recolouring it, so the heading still
   reads as one sentence. The underline sits clear of the descenders. */
a.h-link {
  text-decoration: underline;
  text-decoration-color: var(--orange-mid);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
a.h-link:hover,
a.h-link:focus-visible {
  color: var(--orange-mid);
  text-decoration-color: currentColor;
}
ul,
ol {
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
}
table {
  border-collapse: collapse;
  width: 100%;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
.wrap-narrow {
  /* A reading column, not a page: long-form articles run to 2,700 words and
     a full-width line is tiring to read. About 75 characters at body size. */
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--orange-deep);
  color: #ffffff;
  padding: 12px 20px;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.85rem;
}
.skip:focus {
  left: 0;
}

/* ── type ─────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5 {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  /* the live site sets every heading in Roboto Condensed Light */
  font-weight: 300;
  color: var(--ink);
  line-height: 1.14;
}

.eyebrow {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-deep);
  display: block;
  margin-bottom: 14px;
}
.eyebrow.on-dark,
.on-dark .eyebrow {
  color: var(--gold-light);
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: var(--paper);
}
.on-dark p,
.on-dark li {
  color: var(--cream-2);
}

p.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
}
.rich p {
  margin-bottom: 16px;
}
.rich h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin: 34px 0 14px;
}
.rich h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 26px 0 10px;
}
.rich ul {
  margin: 0 0 22px;
}
.rich ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
}
.rich ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.rich a:not(.btn) {
  color: var(--orange-deep);
  border-bottom: 1px solid rgba(122, 53, 32, 0.4);
}
.rich a:not(.btn):hover {
  border-bottom-color: var(--orange-deep);
}

.section-head {
  text-align: center;
  max-width: var(--container);
  margin: 0 auto 40px;
}
.section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.section-head p {
  margin-top: 14px;
  color: var(--ink-3);
  /* centred intros ran the whole width of the page — 160 characters a line */
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}
/* 14px is the gap under the h2, which is tighter than a line of body text.
   Between two paragraphs that reads as one wrapped block rather than two. */
.section-head p + p {
  margin-top: 1.1em;
}

/* ── buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

.btn-fill {
  background: var(--moss);
  color: var(--paper);
}
.btn-fill:hover {
  /* --leaf was the brighter orange and lifted this button on hover. It is
     #c25000 now, the same as --moss, so hovering would do nothing visible;
     --orange-light keeps the lift in the same hue. */
  background: var(--orange-light);
  color: var(--paper);
}

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--paper);
}

.btn-line {
  background: transparent;
  color: var(--moss);
  border-color: var(--moss);
}
.btn-line:hover {
  background: var(--moss);
  color: var(--paper);
}

.btn-dark {
  background: var(--bark);
  color: var(--paper);
}
.btn-dark:hover {
  background: var(--bark-2);
}

/* ── nav ──────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 32px;
  /* over the hero the live site lets the photograph through behind a soft
     scrim; once it sticks it goes solid orange. */
  background: linear-gradient(
    to bottom,
    rgba(44, 44, 44, 0.55),
    rgba(44, 44, 44, 0)
  );
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-nav.is-solid {
  /* the live site's sticky header is this exact orange */
  background: var(--orange);
  padding: 13px 32px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}
body.nav-static .site-nav {
  background: var(--orange);
  position: sticky;
}

.nav-logo img {
  /* The mark is wide and shallow, so it is sized by its width and left to
     work out its own height. Setting a height instead lets the width
     attribute on the tag win and squashes the dot into an ellipse. */
  width: 88px;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  /* the live navigation: Roboto Condensed regular, 15px, sentence case,
     no letter-spacing */
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.nav-links > a,
.nav-item > a {
  color: #ffffff;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.nav-links > a:hover,
.nav-item > a:hover,
.nav-item:hover > a {
  opacity: 1;
}
.nav-links a.active {
  /* on the orange bar a second orange would vanish — the live site marks the
     current page by weight instead */
  opacity: 1;
  color: #ffffff;
  font-weight: 700;
}

/* dropdown */
.nav-item {
  position: relative;
}
.nav-item > a::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 268px;
  background: var(--bark);
  border-top: 2px solid var(--orange);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-item::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop a {
  display: block;
  padding: 10px 22px;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--cream-2);
  text-transform: none;
  font-size: 0.88rem;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  letter-spacing: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-drop a:hover {
  background: rgba(255, 119, 19, 0.16);
  color: var(--paper);
}

.nav-cta {
  /* sitting on the orange bar, the button reverses out of it: white fill,
     orange label. 4.70 either way round. */
  background: #ffffff;
  color: var(--orange-deep) !important;
  padding: 11px 20px;
  border-radius: 3px;
  font-weight: 700;
  opacity: 1 !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-cta:hover {
  background: var(--paper-3);
  color: var(--orange-deep) !important;
}

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-burger span {
  width: 25px;
  height: 2px;
  background: var(--paper);
  display: block;
}

/* mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--bark);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 20px 26px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s ease;
  visibility: hidden;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.mobile-menu-head img {
  width: 132px;
  height: auto;
}
.mobile-close {
  background: none;
  border: 0;
  color: var(--paper);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.mobile-menu > a {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 1.25rem;
  color: var(--paper);
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .btn {
  margin-top: 22px;
}
.m-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.m-group > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 1.25rem;
  color: var(--paper);
  padding: 13px 0;
  text-align: left;
}
.m-group > button::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--orange);
}
.m-group.open > button::after {
  content: "–";
}
.m-sub {
  display: none;
  padding: 0 0 12px 14px;
}
.m-group.open .m-sub {
  display: block;
}
.m-sub a {
  display: block;
  color: var(--cream-2);
  padding: 8px 0;
  font-size: 1rem;
}

/* ── hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background-color: var(--bark-3);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Deep enough for the brightest of the seven hero photographs. Measured on
     the rendered page at the lightest pixel behind the headline: the old scrim
     left four of them between 2.3 and 2.9 against white, under the 3.0 that
     large text needs, and the daylit shala shots were the worst of them. This
     puts the weakest at 4.6 while still letting the picture through. */
  background: linear-gradient(
    to top,
    rgba(29, 23, 16, 0.82) 0%,
    rgba(29, 23, 16, 0.52) 52%,
    rgba(29, 23, 16, 0.18) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px 92px;
}
.hero .eyebrow {
  color: var(--gold-light);
}
.hero h1 {
  color: var(--paper);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 10px;
}
.hero .place {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  color: var(--cream-2);
  font-size: 1.18rem;
  margin-bottom: 16px;
}
.hero .tagline {
  color: var(--cream);
  font-size: 1.16rem;
  margin-bottom: 32px;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* On phones the home hero's two buttons sit under the photograph instead of
   on top of it. CSS cannot lift an element out of the hero, so the markup
   carries the pair twice and the breakpoint decides which one shows:
   display:none keeps the other out of the accessibility tree as well, so the
   links are never announced or tabbed to twice. Only the home hero carries
   .has-weekly, so no other page's hero is touched. The copy below the hero
   sits on the white page, where .btn-ghost (white text, translucent white
   border) would be invisible — it uses .btn-line instead. */
.hero-ctas-below {
  display: none;
}
@media (max-width: 640px) {
  .hero.has-weekly .hero-inner .hero-ctas {
    display: none;
  }
  .hero-ctas-below {
    display: block;
    margin-top: 28px;
  }
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--paper);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  50% {
    top: 100%;
  }
  100% {
    top: 100%;
  }
}

/* page hero (inner pages) */
.page-hero {
  position: relative;
  /* A banner this wide throws away most of a photograph. At the old 60vh the
     frame came out around 2.67:1, which kept only 62% of the height of the
     median hero photograph here (and 25% of the most upright one). Driving the
     height off the WIDTH instead holds the frame near 2.2:1 on every desktop
     size, keeping ~77%, and on a phone the floor makes it nearly square —
     which is the shape these photographs actually are.

       1440x900  -> 662px  2.18:1        390 phone -> 430px  0.91:1
       1920x1080 -> 842px  2.28:1        768 tablet -> 430px  1.79:1 */
  min-height: clamp(430px, 46vw, 78vh);
  display: flex;
  align-items: flex-end;
  background-color: var(--bark-3);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to top,
    rgba(29, 23, 16, 0.68) 0%,
    rgba(29, 23, 16, 0.32) 55%,
    rgba(29, 23, 16, 0.16) 100%
  );
}
/* A hero photograph that is bright exactly where the headline sits needs more
   cover than the standard wash gives. Measured against the lightest pixel
   behind the glyphs, the standard gradient left this page's headline at
   2.56:1, under the 3:1 large text needs; this takes it clear of that. */
.page-hero.deep::before {
  background: linear-gradient(
    to top,
    rgba(29, 23, 16, 0.86) 0%,
    rgba(29, 23, 16, 0.62) 55%,
    rgba(29, 23, 16, 0.42) 100%
  );
}
/* On a phone the headline wraps to three or four lines, so it climbs out of
   the dark foot of that gradient and into the picture. Measured against the
   real rendered pixels, the Panchakarma header came out at 2.06:1 and the
   Yoga Shalas one at 2.89:1 — both under the 3:1 that large text needs. A
   deeper gradient at this width, where the picture is mostly behind text
   anyway, puts every header over the line. */
/* Below 640px there is no scrim at all: the copy is no longer over the
   picture, so the photograph is shown plain. See the stacking block further
   down, under "phones: the words move out from under the photograph". */
.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 130px 32px 66px;
}
.page-hero h1 {
  color: var(--paper);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin-bottom: 14px;
}
.page-hero p {
  color: var(--cream-2);
  font-size: 1.1rem;
  /* the standfirst under the headline ran the full width of the page */
  max-width: 68ch;
}
.page-hero .eyebrow {
  color: var(--gold-light);
}

/* breadcrumb */
.crumbs {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.76rem;
  color: var(--ink-3);
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumbs li::after {
  content: "/";
  margin-left: 8px;
  color: var(--rule-2);
}
.crumbs li:last-child::after {
  content: "";
}
.crumbs a:hover {
  color: var(--orange-deep);
}
.crumbs li[aria-current] {
  color: var(--ink);
}

/* ── welcome / intro ──────────────────────────────────── */
.welcome {
  padding: 76px 0 38px;
}
.welcome-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.welcome h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 20px;
}
.welcome p {
  margin-bottom: 16px;
}
.welcome-photo img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* stats strip */
.stats {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat {
  padding: 40px 22px;
  text-align: center;
  border-right: 1px solid var(--rule);
}
.stat:last-child {
  border-right: 0;
}
.stat b {
  display: block;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 2.3rem;
  font-weight: 500;
  color: var(--orange-deep);
  line-height: 1;
  margin-bottom: 8px;
}
.stat span {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── product cards (paths) ────────────────────────────── */
.paths {
  padding: 70px 0;
}
.paths.alt {
  background: var(--paper-2);
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.path-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.path-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.path-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  /* A fixed 3/4 box clipped any card whose copy ran long — the Garden, Temple
     & Fake Beach card lost its heading off the top and the rest sat over the
     bright part of the photograph. A minimum height keeps the tall shape, and
     the grid stretches every card in the row to match the tallest, so they
     stay even without anything being cut. */
  min-height: clamp(360px, 29vw, 460px);
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  isolation: isolate;
  background: var(--bark-3);
}
.path-card img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s ease;
}
.path-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* reaches further up the card than before, so a long heading is still
     legible where it crosses a bright part of the photograph */
  background: linear-gradient(
    to top,
    rgba(31, 25, 18, 0.80) 0%,
    rgba(31, 25, 18, 0.60) 45%,
    rgba(31, 25, 18, 0.30) 100%
  );
}
.path-card:hover img {
  transform: scale(1.06);
}
.path-card-body {
  padding: 28px 24px;
  width: 100%;
}
.path-card h3 {
  color: var(--paper);
  font-size: 1.45rem;
  margin-bottom: 6px;
}
.path-card p {
  color: var(--cream-2);
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.path-card .go {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 3px;
}
.path-card:hover .go {
  border-bottom-color: var(--orange);
}
.path-icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 13px;
  color: var(--gold);
}
.path-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

/* ── programme cards (listing with price) ─────────────── */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.prog-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease,
    border-color 0.25s ease;
}
.prog-card:hover {
  box-shadow: 0 16px 38px rgba(60, 48, 35, 0.14);
  transform: translateY(-3px);
  border-color: var(--paper-3);
}
.prog-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--paper-3);
}
.prog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.prog-card:hover .prog-media img {
  transform: scale(1.05);
}
.prog-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--orange-deep);
  color: #ffffff;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 2px;
}
.prog-body {
  padding: 24px 24px 0;
  flex: 1 1 auto;
}
.prog-body h3 {
  font-size: 1.32rem;
  margin-bottom: 9px;
}
.prog-body p {
  font-size: 0.96rem;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.prog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.74rem;
  color: var(--ink-3);
  padding-bottom: 18px;
}
.prog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prog-meta svg {
  width: 14px;
  height: 14px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.6;
  flex: none;
}
.prog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.prog-price {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.76rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.prog-price b {
  display: block;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
}
.prog-foot .go {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange-deep);
  border-bottom: 1px solid rgba(122, 53, 32, 0.45);
  padding-bottom: 3px;
  white-space: nowrap;
}
.prog-card:hover .prog-foot .go {
  border-bottom-color: var(--orange-deep);
}

/* ── feature band (dark, image bg) ────────────────────── */
.band {
  position: relative;
  padding: 96px 0;
  background-color: var(--bark-3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.band::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgba(29, 23, 16, 0.70) 0%,
    rgba(29, 23, 16, 0.52) 46%,
    rgba(29, 23, 16, 0.18) 100%
  );
}
.band-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
}
.band-inner h2 {
  color: var(--paper);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  margin-bottom: 18px;
}
.band-inner p {
  color: var(--cream-2);
  margin-bottom: 28px;
  /* centred display text ran the full width of the page — 143 characters a
     line before the page was widened, 167 after */
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.band.center {
  text-align: center;
}
.band.center::before {
  background: rgba(29, 23, 16, 0.62);
}
/* A band photograph brighter than most needs more cover. Measured against the
   lightest pixel behind the glyphs, 0.62 left this band's paragraph at 4.28:1,
   under the 4.5:1 body text needs; 0.70 puts it back above 5:1. */
.band.center.deep::before {
  background: rgba(29, 23, 16, 0.70);
}
.band.center .band-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.band.center .band-inner p {
  margin-left: auto;
  margin-right: auto;
}
/* A subheading between a band's h2 and its body copy. Set from the heading
   side rather than the body side — lighter and smaller than the h2, but
   larger than body text and in paper rather than cream, so it reads as a
   second line of the heading and not as a first paragraph.

   .band-inner p carries margin-left/right:auto, which in a left-aligned band
   centres the text block inside .band-inner. Inheriting that would float the
   subheading somewhere between the h2's left edge and the paragraph's, and
   matching the paragraph's 62ch would not fix it either, since ch scales with
   font-size and this line is set larger. So the left margin is pinned to 0:
   the subheading starts exactly where the h2 above it starts, which is what a
   second line of a heading should do. The max-width only caps the measure. */
.band-inner .band-sub {
  color: var(--paper);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.45;
  font-style: italic;
  margin-bottom: 20px;
  max-width: 48ch;
  margin-left: 0;
  margin-right: auto;
}
/* Centred bands put it back on the centre line with everything else. */
.band.center .band-inner .band-sub {
  margin-left: auto;
  margin-right: auto;
}
.band-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.band.center .band-ctas {
  justify-content: center;
}

/* ── split (image + text) ─────────────────────────────── */
.split {
  padding: 70px 0;
}
.split.alt {
  background: var(--paper-2);
}
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.split-grid.narrow-img {
  grid-template-columns: 0.85fr 1.15fr;
}
.split-grid img {
  width: 100%;
  border-radius: 4px;
  height: auto;
}
.split-grid.tall img {
  aspect-ratio: 4/5;
}
/* Sections whose photograph travels with the reader. Each picture keeps its
   own proportions — nothing is cropped — so the column is aligned to the top
   rather than centred, which is also what lets the sticky position work. */
.split-grid.sticky-media {
  align-items: start;
}
.split-grid.sticky-media img {
  height: auto;
  object-fit: contain;
}
@media (min-width: 1001px) {
  /* the copy in these sections runs several paragraphs past the photograph,
     which would otherwise leave a column of empty paper beside it */
  .split-grid.sticky-media .split-media {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
  }
}
.split h2 {
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  margin-bottom: 16px;
}
.split p {
  margin-bottom: 18px;
}
/* `reverse` is written on the grid itself in most of the page sources and on
   the section in a few, so match both — otherwise every alternating block
   silently renders photograph-left and the page reads as one column. */
.split.reverse .split-media,
.split-grid.reverse .split-media {
  order: 2;
}

/* ── duo cards ────────────────────────────────────────── */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.duo-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/5;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--bark-3);
}
.duo-card img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s ease;
}
.duo-card:hover img {
  transform: scale(1.05);
}
.duo-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(29, 23, 16, 0.72) 0%,
    rgba(29, 23, 16, 0.08) 62%
  );
}
.duo-card-body {
  padding: 30px;
}
.duo-card .eyebrow {
  color: var(--gold-light);
}
.duo-card h3 {
  color: var(--paper);
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.duo-card p {
  color: var(--cream-2);
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.duo-card .go {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 3px;
}

/* ── detail page layout ───────────────────────────────── */
.detail {
  padding: 54px 0 64px;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 50px;
  align-items: start;
}
/* grid items default to min-width:auto, so a wide child (the scrollable
   pricing tables) stretches the column past the viewport on phones */
.detail-grid > *,
.split-grid > *,
.welcome-grid > *,
.contact-grid > * {
  min-width: 0;
}

/* the sidebar column: card sticks, photos below scroll with the page */
.side-col {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.sticky-card {
  position: static;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  overflow: hidden;
}
.sticky-card .sc-head {
  background: var(--bark);
  color: var(--paper);
  padding: 22px 24px;
}
.sticky-card .sc-head h3 {
  color: var(--paper);
  font-size: 1.22rem;
  margin-bottom: 4px;
}
.sticky-card .sc-head span {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.sc-rows {
  padding: 6px 24px 22px;
}
.sc-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.96rem;
}
.sc-row:last-child {
  border-bottom: 0;
}
.sc-row dt {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
  padding-top: 3px;
}
.sc-row dd {
  text-align: right;
  color: var(--ink);
}
.sc-actions {
  /* The two buttons measure identically at every width; what read as
     misaligned was the rhythm — a 10px gap between two 52px buttons, tighter
     than the space above them, so the pair looked squeezed against the rows. */
  padding: 4px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sc-actions .btn {
  width: 100%;
}
.sc-note {
  padding: 0 24px 22px;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.76rem;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ── tables ───────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 26px;
  -webkit-overflow-scrolling: touch;
}
.tbl {
  min-width: 480px;
  font-size: 0.97rem;
}
/* the surrounding <h2> already names the table on screen, so the caption is
   kept for screen readers only rather than repeated visually */
.tbl caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tbl th,
.tbl td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.tbl thead th {
  background: var(--bark);
  color: var(--paper);
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 0;
}
.tbl tbody tr:nth-child(even) {
  background: var(--paper-2);
}
.tbl tbody tr:hover {
  background: #fdf2e8;
}
.tbl td b {
  color: var(--ink);
}
.tbl .num {
  white-space: nowrap;
}

/* schedule table */
.tbl.schedule td:first-child {
  width: 190px;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.8rem;
  color: var(--orange-deep);
  white-space: nowrap;
}

/* ── pricing tiers ────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 14px;
}
.tier {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 24px 20px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.tier.featured {
  border-color: var(--orange);
  box-shadow: 0 10px 30px rgba(255, 119, 19, 0.13);
}
/* These headings are h3: they sit directly under their section h2, so an h4
   skipped a level. Both tags are matched so the rule holds whichever the
   markup carries, and margin-top is pinned because most of these blocks sit
   inside .rich, whose h3 rule has a margin shorthand that would otherwise
   push the heading down 26px. */
.tier h3,
.tier h4 {
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 6px;
}
.tier .tier-sub {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.73rem;
  color: var(--ink-3);
  line-height: 1.45;
  margin-bottom: 16px;
  min-height: 42px;
}
.tier .price {
  border-top: 1px solid var(--rule);
  padding-top: 13px;
  margin-top: auto;
}
.tier .price + .price {
  margin-top: 10px;
}
.tier .price span {
  display: block;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.tier .price b {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 1.24rem;
  font-weight: 500;
  color: var(--ink);
}
.price-note {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-bottom: 26px;
}

/* ── inclusion lists ──────────────────────────────────── */
.incl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  margin-bottom: 8px;
}
.incl-col h3,
.incl-col h4 {
  font-size: 1.08rem;
  margin-top: 0;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.incl-col h3 svg,
.incl-col h4 svg {
  width: 19px;
  height: 19px;
  flex: none;
  stroke-width: 1.8;
  fill: none;
}
.incl-col.yes h3 svg,
.incl-col.yes h4 svg {
  stroke: #3d8b4a;
}
.incl-col.no h3 svg,
.incl-col.no h4 svg {
  stroke: var(--saffron);
}
.incl-col ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.96rem;
}
/* reset the .rich bullet dot — these lists use a tick / cross glyph instead */
.incl-col ul li::before {
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  top: 0;
  left: 0;
  font-weight: 700;
  line-height: 1.6;
}
.incl-col.yes ul li::before {
  content: "✓";
  color: #3d8b4a;
}
.incl-col.no ul li::before {
  content: "×";
  color: var(--saffron);
  font-size: 1.15rem;
}

/* ── highlight chips ──────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.chip {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper-3);
  border-radius: 100px;
  padding: 8px 16px;
}
.chip.accent {
  background: rgba(255, 119, 19, 0.1);
  /* a shade deeper than --ochre-ink: on the 10% orange tint behind it,
     #c25000 reads at 4.19:1 and this reads at 4.63:1, clearing AA. */
  color: #b84a00;
}

/* ── feature list (icons) ─────────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 36px;
}
.feat h3 {
  font-size: 1.16rem;
  margin-bottom: 9px;
}
.feat p {
  font-size: 0.96rem;
  color: var(--ink-2);
}
.feat-icon {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--orange);
  margin-bottom: 14px;
}
.feat-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

/* ── gallery ──────────────────────────────────────────── */
.gal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.gal img {
  width: 100%;
  border-radius: 4px;
  height: auto;
}
.gal.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ── accordion (FAQ) ──────────────────────────────────── */
.acc {
  border-top: 1px solid var(--rule);
  max-width: var(--container);
}
.acc-item {
  border-bottom: 1px solid var(--rule);
}
.acc-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 1.1rem;
  color: var(--ink);
  padding: 20px 0;
}
.acc-q::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--orange);
  line-height: 1;
  flex: none;
}
.acc-item.open .acc-q::after {
  content: "–";
}
.acc-a {
  display: none;
  padding: 0 0 22px;
}
.acc-item.open .acc-a {
  display: block;
}
.acc-a p {
  margin-bottom: 12px;
}
.acc-a p:last-child {
  margin-bottom: 0;
}

/* ── testimonials ─────────────────────────────────────── */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  /* Guest reviews vary from one line to two thousand characters, and a video
     card is shorter again — left to themselves the three cards in a row ended
     at three different heights, which looked ragged. They now share a height:
     long reviews are clamped behind "Read more", a video card's poster fills
     its card, and the row only grows when somebody opens one of them. */
  align-items: stretch;
}
.quote {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.quote .stars {
  /* the stars carry the rating, so they have to read as text: the mid orange
     measures 2.59 on a light card, the deep one 5.21. */
  color: var(--orange-deep);
  letter-spacing: 2px;
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.quote blockquote {
  font-size: 1.02rem;
  color: var(--ink-2);
  margin-bottom: 18px;
  flex: 1 1 auto;
}
.quote cite {
  font-style: normal;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.quote cite b {
  display: block;
  font-size: 0.92rem;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 2px;
}

/* ── video testimonial cards (share the .quotes grid) ── */
.quote-video {
  padding: 0;
  overflow: hidden;
}
.tv-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bark-3);
  overflow: hidden;
}
.tv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tv-media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to top,
    rgba(29, 23, 16, 0.55),
    rgba(29, 23, 16, 0.05) 55%
  );
}
/* play button / placeholder marker */
.tv-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 66px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.tv-play svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.tv-play .play-bg {
  fill: rgba(29, 23, 16, 0.72);
  transition: fill 0.2s ease;
}
.tv-play .play-tri {
  fill: var(--paper);
}
.tv-media:hover .tv-play {
  transform: translate(-50%, -50%) scale(1.06);
}
.tv-media:hover .tv-play .play-bg {
  fill: var(--orange);
}
.tv-play.is-soon {
  cursor: default;
  opacity: 0.8;
}
.tv-play.is-soon .play-bg {
  fill: rgba(29, 23, 16, 0.6);
}

/* source badge */
.tv-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tv-youtube {
  background: #a8231f;
}
.tv-instagram {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c 30%,
    #dc2743 60%,
    #bc1888
  );
}

.tv-soon {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: rgba(29, 23, 16, 0.7);
  padding: 5px 11px;
  border-radius: 100px;
}

.tv-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.tv-blurb {
  font-size: 1rem;
  color: var(--ink-2);
  margin-bottom: 16px;
  flex: 1 1 auto;
}
.quote-video cite {
  font-style: normal;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.quote-video cite b {
  display: block;
  font-size: 0.92rem;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 2px;
}

/* once the facade is clicked, the iframe replaces the poster */
.tv-media.is-playing img,
.tv-media.is-playing .tv-play,
.tv-media.is-playing .tv-badge,
.tv-media.is-playing::after {
  display: none;
}
.tv-media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── people ───────────────────────────────────────────── */
.people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.person img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 14px;
}
.person h3 {
  font-size: 1.12rem;
  margin-bottom: 3px;
}
.person span {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.person p {
  font-size: 0.93rem;
  margin-top: 9px;
}

/* ── contact ──────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.cinfo {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cinfo-item {
  display: flex;
  gap: 16px;
}
.cinfo-item svg {
  width: 22px;
  height: 22px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 1.5;
  flex: none;
  margin-top: 4px;
}
.cinfo-item h3,
.cinfo-item h4 {
  font-size: 1.02rem;
  margin-top: 0;
  margin-bottom: 4px;
}
.cinfo-item p,
.cinfo-item a {
  font-size: 0.98rem;
  color: var(--ink-2);
}
.cinfo-item a:hover {
  color: var(--orange-deep);
}

.form-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 32px;
}
/* ── enquiry form: spam trap and reply line ───────────────────────────────
   The honeypot is taken out of the flow rather than display:none'd: some
   bots skip what is display:none, and this way the field still exists to
   be filled in. aria-hidden and tabindex="-1" keep it from anyone real. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* The line that tells the visitor what happened. Without it the only
   confirmation is the page not changing, which reads as a broken button. */
.form-note {
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  font-size: 0.93rem;
  line-height: 1.55;
}
.form-note.is-ok {
  border-color: #3f7d4e;
  background: #eef6ef;
  color: #255233;
}
.form-note.is-error {
  border-color: #b3472d;
  background: #fbeeea;
  color: #8a2f18;
}
.form-note.is-working {
  color: var(--ink-3);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #b3472d;
}
.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 1rem;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
.field textarea {
  min-height: 128px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--orange);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 119, 19, 0.15);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.map-embed {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  filter: saturate(0.9);
}

/* ── whatsapp float ───────────────────────────────────── */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.wa-float:hover {
  transform: scale(1.07);
}
.wa-float svg {
  width: 30px;
  height: 30px;
  fill: var(--paper);
}

/* ── back to top ──────────────────────────────────────────
   Sits directly above the WhatsApp float, clearing it by 10px and sharing its
   right edge: that button is 56px tall at 20px from the bottom, so its top
   edge is at 76px. Hidden with `visibility` rather than opacity alone, so it
   stays out of the tab order until it is actually on screen. */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 86px;
  z-index: 300;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--orange-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* scale on hover, the same reaction the WhatsApp button gives */
.to-top.is-on:hover {
  transform: scale(1.07);
}
.to-top svg {
  width: 24px;
  height: 24px;
  fill: var(--paper);
}
@media (max-width: 640px) {
  /* the WhatsApp button drops to 50px at 14px from each edge here, so its top
     edge is at 64px — the same 10px gap above it */
  .to-top {
    width: 50px;
    height: 50px;
    right: 14px;
    bottom: 74px;
  }
  .to-top svg {
    width: 22px;
    height: 22px;
  }
}
/* ── footer ───────────────────────────────────────────── */
footer {
  background: var(--forest);
  color: var(--paper);
  padding: 60px 0 24px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.foot-brand img {
  width: 168px;
  height: auto;
  margin-bottom: 18px;
}
.foot-brand p {
  font-size: 0.95rem;
  color: var(--cream-2);
}
.foot-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.94rem;
}
.foot-contact a,
.foot-contact span {
  color: var(--cream-2);
}
.foot-contact a:hover {
  color: var(--paper);
}
.foot-social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cream-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease;
}
.foot-social a svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}
.foot-social a:hover {
  color: var(--bark);
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(-2px);
}
/* The footer's column headings. h2 inside the footer landmark, not h5:
   the level should say where a heading sits, not how big it looks. */
footer h2 {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.73rem;
  margin-top: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.94rem;
}
.foot-col a,
.foot-col span {
  color: var(--cream-2);
}
.foot-col a:hover {
  color: var(--paper);
}
.foot-bottom a {
  display: inline-block;
  padding: 5px 2px;
}
.foot-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.78rem;
  color: var(--cream-3);
}
.foot-bottom a:hover {
  color: var(--paper);
}

/* ── utility ──────────────────────────────────────────── */
.mt-0 {
  margin-top: 0;
}
.mb-40 {
  margin-bottom: 40px;
}
.center {
  text-align: center;
}
.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;
}

/* ═══════════ responsive ═══════════ */
@media (max-width: 1180px) {
  .nav-links {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .detail-grid {
    grid-template-columns: 1fr 310px;
    gap: 40px;
  }
}

@media (max-width: 1000px) {
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .welcome-photo {
    order: -1;
    max-width: 430px;
  }
  .path-grid,
  .path-grid.two,
  .path-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prog-grid,
  .prog-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split-grid,
  .split-grid.narrow-img {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .split.reverse .split-media,
  .split-grid.reverse .split-media {
    order: 0;
  }
  .split-grid img {
    max-width: 560px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .side-col {
    position: static;
    max-width: 460px;
  }
  .duo {
    grid-template-columns: 1fr;
  }
  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quotes {
    grid-template-columns: 1fr;
  }
  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat:nth-child(2) {
    border-right: 0;
  }
  .stat:nth-child(1),
  .stat:nth-child(2) {
    border-bottom: 1px solid var(--rule);
  }
  .gal.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }
  .wrap,
  .wrap-narrow {
    padding: 0 20px;
  }
  .hero-inner {
    padding: 0 20px 72px;
  }
  .hero {
    background-position: 62% 40%;
  }
  .hero .tagline {
    max-width: none;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .page-hero {
    /* the clamp above already shapes this; only the inner padding changes */
    min-height: clamp(430px, 54vw, 70vh);
  }
  .page-hero-inner {
    padding: 116px 20px 52px;
  }
  .welcome {
    padding: 66px 0 34px;
  }
  .paths,
  .split {
    padding: 62px 0;
  }
  .detail {
    padding: 50px 0 66px;
  }
  .band {
    padding: 84px 0;
  }
  .path-grid,
  .path-grid.two,
  .path-grid.four {
    grid-template-columns: 1fr;
  }
  .prog-grid,
  .prog-grid.two {
    grid-template-columns: 1fr;
  }
  .tiers {
    grid-template-columns: 1fr;
  }
  .feat-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .people {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .incl {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .gal,
  .gal.four {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-card {
    padding: 24px 20px;
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .foot-bottom {
    flex-direction: column;
  }
  .band-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .stat:last-child {
    border-bottom: 0;
  }
  .section-head {
    margin-bottom: 38px;
  }
  .map-embed {
    height: 320px;
  }
  .wa-float {
    width: 50px;
    height: 50px;
    right: 14px;
    bottom: 14px;
  }
  .wa-float svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 380px) {
  .people,
  .gal,
  .gal.four {
    grid-template-columns: 1fr;
  }
}

/* ── motion / print ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-nav,
  .mobile-menu,
  .wa-float,
  .to-top,
  .scroll-cue,
  .band,
  footer {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  .hero,
  .page-hero {
    min-height: auto;
    background: none;
  }
  .hero h1,
  .page-hero h1 {
    color: #000;
  }
}

/* ── homepage hero photograph ──────────────────────────────────────────
   One still photograph, sitting beneath the existing overlay gradient. The
   frame advances once a week; the swap happens in the markup, not here, so
   there is no slider, no controls and nothing moving on an interval.
   ------------------------------------------------------------------- */
.hero.has-weekly {
  background-image: none;
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

/* the existing scrim sits above the photograph, below the copy */
.hero.has-weekly::before {
  z-index: 1;
}
.hero.has-weekly .hero-inner {
  z-index: 2;
}

@media (max-width: 640px) {
  .hero .scroll-cue {
    display: none;
  }
}

/* ── phones: the words move out from under the photograph ───────────────
   Both heroes printed the headline across the bottom of the picture. At
   375px that copy covers most of the frame, so whatever the photograph was
   of sat behind it, and the home hero filled the whole screen before a word
   of the page. The picture keeps the tall 9:16 frame it always had — at 375px
   that is the 667px the home hero used to fill — but it is now a block of its
   own, and the copy follows underneath on the hero's dark ground, where it
   needs no scrim to stay
   readable. Nothing in the markup changes: both heroes already carry the
   photograph in a child or in their own background. */
@media (max-width: 640px) {
  /* the home page, whose photograph is a real <img> written into .hero-media */
  .hero {
    display: block;
    min-height: 0;
  }
  .hero::before {
    content: none;
  }
  .hero-media {
    position: static;
    aspect-ratio: 9 / 16;
  }
  .hero-inner {
    padding: 26px 20px 38px;
  }
  /* the buttons can sit with their own text again, on the dark ground. The
     duplicate pair that was moved below the hero onto the white page exists
     only because the copy used to be over the photograph. */
  .hero.has-weekly .hero-inner .hero-ctas {
    display: flex;
  }
  .hero-ctas-below {
    display: none;
  }

  /* the other 39 pages, whose photograph is an inline background-image: the
     ::before that used to be the scrim carries it instead. background-image
     and background-position are inherited, so every page keeps the focal
     point it was given, and the header itself stops painting the picture. */
  .page-hero {
    display: block;
    min-height: 0;
    background-size: 0 0;
  }
  .page-hero::before,
  .page-hero.deep::before {
    position: static;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    background-image: inherit;
    background-position: inherit;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .page-hero-inner {
    padding: 26px 20px 42px;
  }

  /* The fixed nav still floats over the top of the picture, and the hero's
     own scrim used to be what kept the white wordmark and the burger legible
     there. Measured on the rendered page, dropping it took the worst hero
     from 3.17 against the logo to 1.25. This puts the darkening back, but
     only across the band the nav occupies, so the rest of the photograph is
     shown plain: ~0.57 alpha through the nav's height holds every hero above
     3.0 even where the photograph is pure white, then it fades out. */
  .hero::after,
  .page-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 130px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(29, 23, 16, 0.62) 0%,
      rgba(29, 23, 16, 0.55) 45%,
      rgba(29, 23, 16, 0) 100%
    );
  }
}

@supports not (object-fit: cover) {
  /* very old Edge: fall back to a plain centred crop */
  .hero-media img {
    width: auto;
    min-width: 100%;
    min-height: 100%;
  }
}

/* ── in-flow imagery (inside .rich columns) ───────────── */
/* Figures deliberately run the full width of the text column rather than the
   narrower measure, so the column reads as a designed block instead of a
   ragged strip of text with dead space beside it. */
.rich-fig {
  margin: 30px 0 32px;
}
.rich-fig img {
  width: 100%;
  border-radius: 5px;
  height: auto;
}
.rich-fig figcaption {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--orange);
}

/* two or three images side by side inside a text column */
.fig-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 30px 0 32px;
}
.fig-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 30px;
}
/*.fig-duo img,
.fig-trio img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 5px;
}*/

/* No aspect-ratio here on purpose. Declaring `aspect-ratio: auto` overrides
   the ratio the width and height attributes give the browser, so the box
   collapsed to nothing until the photograph had downloaded — pictures popped
   in and the page jumped under the reader's thumb. Left undeclared, the
   attributes reserve the right box and the picture is still uncropped. */
.fig-duo img, .fig-trio img {
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}
/* A row of three sits in a third of the text column, so the pictures are small.
   Giving them one shared ratio keeps the row level; each photograph's own focal
   point (stamped by focalpoint.py) decides what the crop keeps. The duo above
   stays uncropped — those are large enough to show the whole frame.
   The crop is declared only above phone width rather than declared and then
   undone: on a phone they stack one per row and there is no reason to crop,
   and leaving the property unset is what lets the width and height attributes
   hold the space open while the photograph downloads. */
@media (min-width: 641px) {
  .fig-trio img {
      aspect-ratio: 4 / 3;
  }
}
.fig-duo.portrait img {
  aspect-ratio: 3/4;
}
/* A pair whose two photographs are shaped differently enough that leaving them
   uncropped would step the bottom edge. One shared ratio levels the row; each
   picture's own focal point decides what the crop keeps. Declared only above
   phone width, for the reason given on .fig-trio img above. */
@media (min-width: 641px) {
  .fig-duo.level img {
    aspect-ratio: 4/3;
  }
}

/* offset pair — one image dropped lower than the other, for visual rhythm */
.fig-offset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0 34px;
  align-items: start;
}
.fig-offset img {
  width: 100%;
  border-radius: 5px;
  height: auto;
}
.fig-offset > :nth-child(2) {
  margin-top: 42px;
}

/* ── full-bleed photo strip between sections ──────────── */
.img-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.img-band img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.img-band figure {
  overflow: hidden;
  margin: 0;
}
.img-band figure:hover img {
  transform: scale(1.07);
}
.img-band.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.img-band.six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.img-band.six img {
  aspect-ratio: 1/1;
}

/* ── mosaic gallery (mixed sizes) ─────────────────────── */
/* Justified rows: every row is flush to both edges and the tiles in it share
   one height. assets/gallery.js gives each figure a flex-basis and flex-grow
   proportional to its own photograph; without scripting the tiles simply share
   the row evenly, which is why the basis below is 220px rather than auto. */
.mosaic {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mosaic img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: block;
  object-fit: cover;
}
.mosaic figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 5px;
  flex: 1 1 220px;
  height: 220px;
}
/* once the script has sized them, the aspect-ratio it sets governs the height */
.mosaic.is-live figure {
  height: auto;
}
.mosaic figure img {
  transition: transform 0.7s ease;
}
.mosaic figure:hover img {
  transform: scale(1.06);
}
.mosaic.is-live figure {
  cursor: zoom-in;
}
.mosaic.is-live figure:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
/* `big` kept its meaning under the old column layout; in a justified gallery
   every tile is sized from its own photograph, so it is simply a wider pull */
.mosaic .big {
  flex-grow: 2;
}

/* ── lightbox ─────────────────────────────────────────── */
.lb {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: rgba(20, 16, 11, 0.92);
  align-items: center;
  justify-content: center;
  padding: 40px 72px;
}
.lb.is-open {
  display: flex;
}
/* the floating WhatsApp button would otherwise sit over the viewer, and on a
   phone it lands exactly on the "next" arrow */
body.lb-on .wa-float,
body.lb-on .to-top {
  display: none;
}
.lb-stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lb-stage img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  border-radius: 4px;
  display: block;
}
.lb-stage figcaption {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--cream-2, #e0dbd5);
  text-align: center;
  max-width: 70ch;
}
.lb-x,
.lb-nav {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  line-height: 1;
}
.lb-x {
  top: 10px;
  right: 16px;
  font-size: 2.2rem;
}
.lb-nav {
  top: 50%;
  transform: translateY(-50%);
}
.lb-prev {
  left: 6px;
}
.lb-next {
  right: 6px;
}
.lb-nav svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-x:hover,
.lb-nav:hover svg {
  opacity: 0.7;
}
.lb-x:focus-visible,
.lb-nav:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.lb-count {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 640px) {
  .lb {
    padding: 56px 10px 44px;
  }
  .lb-nav {
    top: auto;
    bottom: 6px;
    transform: none;
  }
  .lb-prev {
    left: 14px;
  }
  .lb-next {
    right: 14px;
  }
  .lb-stage img {
    max-height: calc(100vh - 170px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic figure img {
    transition: none;
  }
  .mosaic figure:hover img {
    transform: none;
  }
}

/* ── caption cards (image + short label) ──────────────── */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.cap-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cap-card img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 12px;
  height: auto;
  /* Four thumbnails on one line, left at their own heights, finished 216,
     209, 200 and 157px deep, so each caption started somewhere different.
     One shared ratio levels the row — same reasoning as .fig-trio, and
     4/3 is close enough to all four that little is cropped away. Each
     photograph's focal point decides what survives. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cap-card h3,
.cap-card h4 {
  font-size: 1.05rem;
  margin-top: 0;
  margin-bottom: 4px;
}
.cap-card p {
  font-size: 0.9rem;
  color: var(--ink-3);
}

/* ── text + image intro (replaces centred lone paragraphs) ── */
.lead-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 52px;
  align-items: center;
}
/* a stack of photos is taller than the text beside it, so top-align that
   variant instead of centring and leaving a gap above the first line */
.lead-grid.stacked {
  align-items: start;
}
.lead-grid .lead-media img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.lead-grid.wide-media {
  grid-template-columns: 0.9fr 1.1fr;
}
.lead-grid.wide-media .lead-media img {
  aspect-ratio: 4/3;
}

/* stacked pair beside a lead paragraph */
.lead-stack {
  display: grid;
  gap: 14px;
}
.lead-stack img {
  width: 100%;
  border-radius: 5px;
  height: auto;
}
/* More than a pair: one column of four ran to 1,985px beside 319px of text,
   leaving most of the left half of the section empty. Columns rather than a
   grid, so each photograph keeps its own proportions instead of being
   cropped to a shared row height; and the two sides are close enough in
   height now that centring the text reads better than top-aligning it. */
.lead-grid.two-up {
  align-items: center;
}
.lead-grid.two-up .lead-stack {
  display: block;
  column-count: 2;
  column-gap: 14px;
}
.lead-grid.two-up .lead-stack img {
  break-inside: avoid;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  /* two columns of ~170px on a phone are too small to read */
  .lead-grid.two-up .lead-stack {
    column-count: 1;
  }
}

/* ── sidebar image under the sticky card ──────────────── */
.side-figs {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.side-figs img {
  width: 100%;
  border-radius: 5px;
  height: auto;
}
.side-figs figcaption {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.74rem;
  color: var(--ink-3);
  margin-top: 7px;
}

@media (max-width: 1000px) {
  .mosaic figure {
    flex-basis: 170px;
    height: 170px;
  }
  .cap-grid,
  .cap-grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .img-band,
  .img-band.six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lead-grid,
  .lead-grid.wide-media {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .lead-grid .lead-media {
    max-width: 460px;
  }
  /* the cap above keeps a lone picture from going huge once the grid is one
     column — but a two-column set of them just leaves a hole to its right */
  .lead-grid.two-up .lead-media {
    max-width: none;
  }
  .side-figs {
    display: none;
  }
}

@media (max-width: 640px) {
  .rich-fig {
    margin: 22px 0 24px;
  }
  .fig-trio {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 8px;
  }
  .fig-duo,
  .fig-offset {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fig-offset > :nth-child(2) {
    margin-top: 0;
  }
  .mosaic {
    gap: 8px;
  }
  .mosaic figure {
    flex-basis: 135px;
    height: 135px;
  }
    .img-band,
  .img-band.three,
  .img-band.six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cap-grid,
  .cap-grid.three {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cap-card h3,
  .cap-card h4 {
    font-size: 0.95rem;
  }
  .cap-card p {
    font-size: 0.82rem;
  }
}

@supports not (aspect-ratio: 1 / 1) {
  /* The figure slots size themselves from the photograph's own width and
     height attributes, so they need no fallback and must NOT be given one —
     a fixed height here would crop the picture on exactly the old browsers
     this block is meant to help. Only the slots that still crop get a height. */
  .img-band img {
    height: 260px;
  }
  .lead-grid .lead-media img {
    height: 520px;
  }
  .img-band img,
  .lead-grid .lead-media img {
    object-fit: cover;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Legacy browser fallbacks
   aspect-ratio landed in Chrome 88 / Safari 15 / Firefox 89. On anything
   older the ratio boxes collapse, so give those elements a fixed height
   instead. Modern browsers skip this block entirely.
   ═══════════════════════════════════════════════════════════════ */
@supports not (aspect-ratio: 1 / 1) {
  .path-card {
    min-height: 460px;
  }
  .duo-card {
    height: 480px;
  }
  .prog-media {
    height: 230px;
  }
  .welcome-photo img {
    height: 520px;
  }
  .split-grid img {
  height: auto;
}
  .split-grid.tall img {
    height: 440px;
  }
  .gal img {
  height: auto;
}
  .person img {
    height: 240px;
  }
  .path-card img,
  .duo-card img,
  .prog-media img,
  .welcome-photo img,
  .split-grid img,
  .gal img,
  .person img {
    object-fit: cover;
  }
}

/* Flexbox gap landed in Safari 14.1. Older Safari ignores it, so the
   buttons and social icons would butt together — margins restore the
   spacing and are harmless where gap already works. */
@supports not (gap: 1px) {
  .hero-ctas .btn,
  .band-ctas .btn {
    margin: 0 14px 14px 0;
  }
  .foot-social a {
    margin: 0 12px 0 0;
  }
  .nav-links > a,
  .nav-links > .nav-item {
    margin-left: 26px;
  }
  .chips .chip {
    margin: 0 10px 10px 0;
  }
}

/* ── 2026 rebuild: media & downloads, boutique ─────────── */
.plain-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.plain-list li {
  padding: 5px 0 5px 16px;
  position: relative;
  border-bottom: 1px solid rgba(60, 48, 35, 0.09);
}
.plain-list li:last-child {
  border-bottom: 0;
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.note {
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  border-radius: 3px;
  font-size: 0.96rem;
}
.tbc {
  margin-top: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre-ink);
}

/* Four items read better as a 2x2 than as a row of three with one orphan.
   Falls back to the shared one-column rule at phone width. */
@media (min-width: 701px) {
  .feat-grid.pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── testimonial blocks of fewer than three ───────────────
   Guest reviews are allocated per page, so some pages carry one or two rather
   than three. Centre those instead of leaving empty columns. */
.quotes-1 {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}
.quotes-2 {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
}
@media (max-width: 1000px) {
  .quotes-1,
  .quotes-2 {
    grid-template-columns: 1fr;
  }
}


/* ── long guest reviews ───────────────────────────────────
   Some reviews run to a couple of thousand characters. Collapse those behind a
   "Read more" toggle so one long review cannot set the height of a whole row.
   The full text stays in the page; only its height is capped. */
.quote blockquote {
  position: relative;
  overflow: hidden;
}
.quote.is-long blockquote {
  max-height: 20em;
}
.quote.is-long blockquote::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.5em;
  background: linear-gradient(to bottom, rgba(247, 247, 247, 0), var(--paper) 85%);
  pointer-events: none;
}
.quote.is-long.is-open blockquote {
  max-height: none;
}
.quote.is-long.is-open blockquote::after {
  display: none;
}
.quote-more {
  align-self: flex-start;
  margin: 0 0 16px;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quote-more:hover {
  color: var(--bark);
}
.quote-more:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ── blog: index cards ─────────────────────────────────────────────────
   One featured card above a three-up grid. The card is a single <a>, so the
   whole tile is the target rather than the headline alone.
   ------------------------------------------------------------------- */
.post-lead {
  margin: 0 0 56px;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  /* stretch, not start: equal-height cards put every "Read article" on the
     same line across the row */
  align-items: stretch;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule));
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(122, 53, 32, 0.4);
  box-shadow: 0 14px 34px rgba(29, 23, 16, 0.1);
}

.post-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--paper-2);
}
.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.post-card:hover .post-media img {
  transform: scale(1.04);
}

.post-cat {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(44, 44, 44, 0.78);
  padding: 6px 11px;
  border-radius: 3px;
}
.post-cat.flat {
  position: static;
  background: var(--ochre-ink);
}

.post-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}
.post-body h2,
.post-body h3 {
  font-size: 1.22rem;
  line-height: 1.24;
  margin: 0 0 10px;
}
.post-body p {
  color: var(--ink-2);
  font-size: 0.97rem;
  margin: 0 0 18px;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.post-meta > * + *::before {
  content: "·";
  margin-right: 14px;
  color: var(--rule));
}

.post-card .go {
  margin-top: auto;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ochre-ink);
}
.post-card .go::after {
  content: " →";
  transition: margin-left 0.2s ease;
}
.post-card:hover .go::after {
  margin-left: 4px;
}

/* the featured card runs photograph-beside-copy on wide screens */
.post-card.featured {
  flex-direction: row;
}
.post-card.featured .post-media {
  flex: 0 0 55%;
  aspect-ratio: auto;
}
.post-card.featured .post-body {
  justify-content: center;
  padding: 36px 40px;
}
.post-card.featured .post-body h2,
.post-card.featured .post-body h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 14px;
}
.post-card.featured .post-body p {
  font-size: 1.04rem;
  margin-bottom: 0;
}
.post-card.featured .post-body .go {
  margin-top: 20px;
}

/* a centred rule with a label, separating the featured post from the grid */
.post-rule {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.78rem;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 30px;
}
.post-rule::before,
.post-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

/* ── the article's own furniture ──────────────────────── */
.post-deck {
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.post-credit {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-3);
}

/* the index filters: buttons, so they are reachable from the keyboard */
.post-filter {
  margin-bottom: 26px;
}
.post-filter .chip {
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.post-filter .chip:hover {
  border-color: var(--rule-2);
}
.post-filter .chip.is-on {
  border-color: rgba(255, 119, 19, 0.45);
}
.chip-n {
  opacity: 0.55;
  margin-left: 3px;
}

/* ── blog: the article page ───────────────────────────────────────── */
.post-article {
  padding: 56px 0 10px;
}
.post-article .lead-meta {
  margin: 18px 0 20px;
}
.post-article .post-figure {
  margin: 30px 0 38px;
}
.post-rich {
  padding-bottom: 60px;
}

.post-pull {
  margin: 30px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--saffron);
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 1.28rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
}

.note.tbc {
  display: inline-block;
  margin-bottom: 8px;
}

@media (max-width: 1000px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .post-card.featured {
    flex-direction: column;
  }
  .post-card.featured .post-media {
    flex: none;
    aspect-ratio: 16/10;
  }
  .post-card.featured .post-body {
    padding: 24px 26px 26px;
  }
}

@media (max-width: 700px) {
  /* a shade narrower on a phone, so the sticky bar stays shallow */
  .nav-logo img {
    width: 76px;
  }
  .mobile-menu-head img {
    width: 120px;
  }
  .foot-brand img {
    width: 150px;
  }
  .post-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .post-lead {
    margin-bottom: 40px;
  }
  .post-article {
    padding-top: 36px;
  }
  .post-pull {
    font-size: 1.14rem;
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-media img {
    transition: none;
  }
  .post-card:hover {
    transform: none;
  }
  .post-card:hover .post-media img {
    transform: none;
  }
}

/* ── blog article: two columns with a recent-articles rail ─────────────
   The featured photograph used to be a CSS background on .page-hero, which
   Google Images cannot see, which carries no alt text, and which the browser
   will not preload as the LCP element. It is a real <img> now, at the head of
   the left column, with the title under it.
   ------------------------------------------------------------------- */
.post-layout {
  display: block;
}
@media (min-width: 1001px) {
  .post-layout {
    display: grid;
    /* minmax(0,…) or a long word in the prose would push the column past its
       share and squeeze the rail */
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 52px;
    align-items: start;
  }
}

.post-cover {
  margin: 0 0 24px;
}
.post-cover img {
  width: 100%;
  /* The photographs run from 1400x620 to 788x1400, so the frame is fixed and
     each picture is cropped to it about its own focal point — otherwise an
     upright photograph would open the article two screens tall. */
  height: clamp(220px, 32vw, 460px);
  object-fit: cover;
  object-position: center 40%;
}

.post-main > h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.post-main .lead-meta {
  margin: 16px 0 22px;
}
.post-main .lede {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-3);
  font-weight: 300;
  margin-bottom: 26px;
}
/* No measure cap on the prose here. The rail already narrows this column, and
   capping the text as well left it ending 310px short of the photograph above
   it — a void down the right-hand side that reads as text cut off mid-column.
   The text now runs to the same edges as the picture. */

/* ── the rail ─────────────────────────────────────────── */
.post-side {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 1001px) {
  .post-side {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    /* html carries overflow-x:clip rather than hidden precisely so that
       sticky still works inside it */
    position: sticky;
    top: calc(var(--nav-h) + 18px);
  }
}
.post-side h2 {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.side-post {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.side-post img {
  width: 92px;
  height: 68px;
  object-fit: cover;
  object-position: center 40%;
}
.side-post-t {
  display: block;
  font-size: 0.97rem;
  line-height: 1.32;
  color: var(--ink);
}
.side-post time {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.side-post:hover .side-post-t,
.side-post:focus-visible .side-post-t {
  color: var(--orange-deep);
}
.post-side .btn {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
/* A single tall rail is wrong on a tablet, where it sits under the article at
   full width: run the recent articles as two columns of cards instead. */
@media (min-width: 641px) and (max-width: 1000px) {
  .post-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  .post-side h2,
  .post-side .btn {
    grid-column: 1 / -1;
  }
}


/* ── the boutique: product tiles ───────────────────────────────────────
   Not a storefront — the shop does not sell online. Photograph, name, price,
   nothing else, so the page reads as a window rather than a checkout.
   ------------------------------------------------------------------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 26px;
}

.shop-item {
  text-align: center;
}
.shop-media {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper-2);
  margin-bottom: 14px;
}
.shop-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-item h3 {
  font-size: 1.02rem;
  line-height: 1.25;
  margin: 0 0 4px;
}
.shop-price {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.95rem;
  color: var(--ochre-ink);
  margin: 0;
}
.shop-from {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 1000px) {
  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }
}

/* ── practice recordings ───────────────────────────────────────────────
   One unbroken session per card, so each gets a player and a download rather
   than sitting in a track list.
   ------------------------------------------------------------------- */
.tracks {
  display: grid;
  gap: 20px;
}
.track {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 24px 26px;
}
/* Each audio track is a section of the page in its own right — these were
   h3 with no h2 above them. Promoted to h2; the size is pinned because
   `.split h2` would otherwise enlarge them. 1.17em is the UA h3 default,
   which is the size these headings have always rendered at. */
.track h2,
.track h3 {
  font-size: 1.17em;
  margin: 0;
}
.track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  margin-bottom: 8px;
}
.track-head h3 {
  font-size: 1.22rem;
  margin: 0;
}
.track-meta {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: 0;
}
.track > p {
  color: var(--ink-2);
  margin: 0 0 16px;
  max-width: none;
}
.track audio {
  width: 100%;
  display: block;
}
.track-dl {
  margin: 12px 0 0;
}
.track-dl a {
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ochre-ink);
}
.track-dl a::after {
  content: " ↓";
}

@media (max-width: 700px) {
  .track {
    padding: 20px 18px;
  }
}


/* ── reversed split: keep the narrow column narrow ─────────────────────
   `order` moves the photo into the SECOND grid track, so on a narrow-img
   grid it landed in the 1.15fr column and the text in the 0.85fr one —
   photos came out bigger on alternate blocks and the text squeezed. Swap the
   track sizes when the block is reversed so the photo column stays the
   narrower one either way.
   ------------------------------------------------------------------- */
@media (min-width: 1001px) {
  .split-grid.narrow-img.reverse,
  .split.reverse .split-grid.narrow-img {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* ── teacher portraits ─────────────────────────────────────────────────
   These five photographs run from 3:2 landscape to 2:3 upright. The shared
   4:3 crop cut the upright ones roughly in half, so each is shown at its own
   proportions in a column of fixed width instead. The bios are long, so the
   portrait sits at the top of the bio rather than floating halfway down an
   empty column.
   ------------------------------------------------------------------- */
.split-grid.teacher-bio {
  align-items: start;
}
@media (min-width: 1001px) {
  .split-grid.teacher-bio {
    gap: 48px;
  }
}
.split-grid.teacher-bio img {
  /* each portrait carries its own ratio inline, which also reserves its box
     before the lazy image arrives */
  height: auto;
}
@media (min-width: 1001px) {
  /* the bios run long; the portrait travels with the reader instead of
     leaving a column of empty paper beside the last four paragraphs */
  .split-grid.teacher-bio .split-media {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
  }
}
.split-grid.teacher-bio h2 {
  margin-top: 0;
}

@media (max-width: 1000px) {
  .split-grid.teacher-bio img {
    max-width: 420px;
  }
}

@supports not (aspect-ratio: 1 / 1) {
  /* Safari 14 and older, and pre-Chromium Edge: without aspect-ratio these
     media boxes collapse to nothing, so give them explicit heights. */
  .post-media {
    height: 232px;
  }
  .post-card.featured .post-media {
    height: 420px;
  }
  .shop-media {
    height: 220px;
  }
  .tv-media {
    height: 200px;
  }
}

/* ── photographs on a narrow screen ────────────────────────────────────
   The wide slots (16/9, 3/2) are letterbox slits on a phone, and these
   photographs are mostly 3/2 or more upright — so a wide slot throws away
   most of each one. Squaring the boxes up at phone width keeps far more of
   the picture; the focal point stamped on each <img> decides what survives.

   This block lost its @media line at some point and was applying at every
   width: on a desktop it squared up .lead-stack pictures that are 3:4 or
   2:1, cutting heads off and — since .lead-stack img sets no object-fit —
   stretching the rest out of shape.
   ------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* .lead-stack is deliberately NOT squared up here. Its pictures are sized
     height:auto, so they already show the whole frame at every width — and
     the rule sets no object-fit, so squaring them stretched them instead of
     cropping. Only the fixed-ratio slots below need it. */
  .post-media img,
  .post-card.featured .post-media {
    aspect-ratio: 4 / 3;
  }
  .split-grid img,
  .gal img,
  .cap-card img,
  .side-figs img {
    height: auto;
  }
  .fig-offset img {
    height: auto;
  }
}

/* the Saturday/Sunday note that sits under every schedule carrying a Havan
   row — the <caption> above it is clipped to screen readers, so this is the
   line a visitor actually reads */
.sched-note {
  margin: -8px 0 26px;
}

/* ── video testimonials ────────────────────────────────────────────────
   The poster sits in a landscape box; once a video is playing the box takes
   the shape that video actually needs (an Instagram reel is far taller than
   16:10, which is what was cutting them off). The height is set per video in
   the page script, from the size Instagram reports for that post.
   ------------------------------------------------------------------- */
.tv-media.is-playing {
  aspect-ratio: auto;
}
.quote-video[data-source="youtube"] .tv-media.is-playing {
  aspect-ratio: 16 / 9;
}
.tv-media.is-playing img,
.tv-media.is-playing .tv-play,
.tv-media.is-playing .tv-badge {
  display: none;
}

/* the way to the original post, always present under the card */
.tv-open {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: "Roboto Condensed", Arial, Tahoma, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(31, 25, 18, 0.82);
  padding: 7px 12px;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.tv-open:hover,
.tv-open:focus-visible {
  background: var(--orange-deep);
}
.tv-media.is-playing .tv-open {
  position: static;
  display: block;
  margin: 10px 0 0;
  text-align: center;
}

/* ── testimonial cards: one height until opened ────────────────────────
   The grid stretches every card in a row to the tallest. For a video card
   that means the poster fills the card rather than sitting in a short box
   above empty space; when the video is played the script gives the box the
   exact height that video needs and the row grows with it.
   ------------------------------------------------------------------- */
.quote-video .tv-media {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 230px;
}
.quote-video .tv-media.is-playing {
  /* the height the script measured wins over filling the card */
  flex: 0 0 auto;
}
.quote-video[data-source="youtube"] .tv-media.is-playing {
  aspect-ratio: 16 / 9;
}

/* the attribution sits at the foot of the card, so a short review does not
   leave its name floating in the middle of a stretched card */
.quote figcaption {
  margin-top: auto;
}

/* the postal address under the footer logo, set on its own lines */
.foot-address {
  font-style: normal;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--cream-2);
  margin-top: 18px;
}

/* "do not impose a ratio on this picture". It has to stay !important to beat
   the layout rule it cancels — which also means it beats an inline ratio, so a
   picture carrying its own `style="aspect-ratio: …"` must NOT also carry this
   class, or its box collapses to nothing until the file downloads. */
.sp-no-asprat{
	aspect-ratio: auto !important;
}

/* ── page banner cover ───────────────────────────────────────────────────
   For a cover that is artwork rather than a photograph. The lettering on it
   has to stay readable, so the image is never cropped: it sits at its own
   size, centred on a band of its own background colour, and the page title
   goes underneath instead of on top. */
.page-banner {
  display: block;
  width: 100%;
  line-height: 0;              /* no stray baseline gap under the image */
  /* The navigation is transparent and sits over the top of the page. A
     photograph can take that; lettering cannot, so the artwork starts below
     the nav and the band's own colour fills the space behind it. */
  padding-top: 127px;
}
.page-banner-img {
  display: block;
  width: 100%;
  max-width: 851px;            /* the artwork's own width — never upscaled */
  height: auto;
  margin: 0 auto;
}
.page-banner-head {
  background: var(--bg-2, #faf7f2);
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--line, #e8e0d5);
}
.page-banner-head h1 {
  margin: 6px 0 10px;
}
.page-banner-head p {
  margin: 0;
  color: var(--ink-3, #6b6257);
  max-width: 62ch;
}
@media (max-width: 640px) {
  .page-banner { padding-top: 118px; }
  .page-banner-head { padding: 24px 0 22px; }
}

/* A collage cover is four pictures side by side, so a phone, which crops to
   the middle of the band, would show only the middle two — split down the
   collage's own seam, which reads as a broken image rather than a design. The
   same four are stacked two-by-two in a tall version for narrow screens. Used
   by the team page's cover and by its consultation band, which carries the
   same picture. The rule needs !important because both set their cover as an
   inline style. */
@media (max-width: 760px) {
  .page-hero.hero-collage,
  .band.collage {
    background-image: url('img/ayurveda-team-collage-tall.jpg') !important;  /* relative to assets/, where this file lives */
    background-position: center center !important;
  }
}

/* ── pairs inside a half-width media column ──────────────────────────────
   A .fig-duo is built for the full text column. Dropped into the narrow
   media column of a split section it gave two ~270px pictures adrift in the
   middle of a tall empty column, and a landscape beside a portrait left one
   of them twice the height of the other. Stacked, each picture fills the
   column, and one shared ratio keeps the pair even. Only the cottages page
   uses this arrangement. */
.split-media .fig-duo {
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
}
.split-media .fig-duo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* A row of pictures sat on one line with its heights left to each
   photograph, so the row finished at three different depths. */
.gal img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ── a long bio beside one photograph ────────────────────────────────────
   The team sections pair a ten to twelve paragraph life story with a single
   picture. Centred in its grid track, that picture floats in the middle of a
   column two to four times its height: on ayurveda-team.html the three
   sections together left about 2,400px of empty column, which is what the
   page looked like it was made of.

   Pinning the picture instead keeps the face beside the words the whole way
   down, which is the only reason it is there, and the column below it stops
   reading as a hole. Desktop only: stacked on a phone the picture sits above
   the text, where pinning it would hold a photograph over half the screen
   while someone tries to read. */
@media (min-width: 1001px) {
  .split-grid.pin-media .split-media {
    position: sticky;
    top: 92px;
    align-self: start;
  }
}

/* ── headings and lists in a plain split column ──────────────────────────
   `.rich` carries the spacing and the orange bullet, but a split section's
   text side is an ordinary <div>, so "Teaches at SWAN" sat flush against the
   paragraph above it and its list came out as bare unindented lines. Five
   blocks across four pages were affected. Matches `.rich` exactly rather than
   inventing a second set of numbers; `:not(.rich)` keeps the two from
   stacking where a column has both. */
.split-grid > div:not(.rich) > h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 26px 0 10px;
}
.split-grid > div:not(.rich) > ul {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
}
.split-grid > div:not(.rich) > ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
}
.split-grid > div:not(.rich) > ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* ── the page you are already on, inside a menu ──────────────────────────
   The section was marked but its entries were not, so someone on the Weekend
   retreat page saw "Yoga Retreats" in bold over five identical-looking lines.
   The orange bar at the left is the marker rather than colour alone, since the
   dropdown sits on dark bark where a colour shift reads as a hover state. */
.nav-drop a.active {
  color: var(--paper);
  font-weight: 700;
  background: rgba(255, 119, 19, 0.1);
  box-shadow: inset 3px 0 0 var(--orange);
}
.m-sub a.active {
  color: var(--paper);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--orange);
  padding-left: 12px;
}

/* ── wider picture area (every page but the home page) ──────────────────
   The reading column had grown to 97 characters a line on course pages and
   over 140 on the text-and-picture sections — far past what is comfortable.
   Widening the page and capping the prose does both jobs at once: the
   photographs get the extra width, the text gets shorter lines.
   Opted in per page by `wide-page` on <body>, so the home page and the
   hand-written legacy pages are untouched.
   ------------------------------------------------------------------- */
@media (min-width: 1001px) {
  body.wide-page {
    --container: 1440px;
  }
  /* Line length. Capping paragraphs alone left a void beside them, which read
     as text cut off mid-column, so the measure is set on the whole block of
     prose instead — headings, lists and paragraphs together.
     A section of prose running the full width of the page is centred, so the
     narrower measure reads as an article column rather than a gap on the
     right. */
  body.wide-page .wrap:not([class*="-grid"]) > .rich {
    max-width: 74ch;
    margin-left: auto;
    margin-right: auto;
  }
  /* Beside the booking panel the prose keeps its left edge, shared with the
     photographs, which run the full width of the column. The cap is the width
     this column had before it was widened, so no line is longer than it was. */
  body.wide-page .detail-grid > .rich > p,
  body.wide-page .detail-grid > .rich > ul,
  body.wide-page .detail-grid > .rich > ol,
  body.wide-page .detail-grid > .rich > blockquote {
    max-width: 800px;
  }
  /* the pictures are what the extra width is for */
  body.wide-page .rich-fig,
  body.wide-page .fig-duo,
  body.wide-page .fig-trio,
  body.wide-page .fig-offset,
  body.wide-page .mosaic,
  body.wide-page .img-band {
    max-width: none;
  }
  body.wide-page .detail-grid {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
  /* On the alternating text/picture sections, give the picture the larger
     half. The picture is ALWAYS the first child in the markup; `.reverse`
     moves it to the second column with `order: 2`, so which column to widen
     is decided by that class, not by document order. An earlier version of
     this rule tested `:has(> .split-media:last-child)`, which never matches
     anything on this site — every reversed section therefore gave its
     picture the NARROW half and its text the wide one, the opposite of the
     intent, and made the alternating sections disagree with each other down
     the page. */
  body.wide-page .split-grid {
    grid-template-columns: 56fr 44fr;
  }
  body.wide-page .split-grid.reverse {
    grid-template-columns: 44fr 56fr;
  }
  /* A one-line footnote is not a column of prose: left to itself it ran the
     full 1376px of the widened page, a single sentence of small print
     stretched from edge to edge. Hold it to the measure of the text above. */
  body.wide-page .price-note {
    max-width: 74ch;
  }
}