/* A Life Redesign — rebuild
   A distinct identity from Take Time to BE YOU: white, editorial, vibrant but elegant.
   Type: Fraunces (display serif, Google Fonts) + Glacial Indifference (body, self-hosted).
   Both SIL Open Font License. Glacial has only 400 and 700 weights.
   Palette (fixed, from Carolina's swatch): flame #f66930, white, cream #f8ebcb,
   blush #eabaa1, sage #d1ccab. Warm near-black ink. Vibrant orange used with restraint. */

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/glacial-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/glacial-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --white:      #ffffff;
  --cream:      #f8ebcb;
  --blush:      #eabaa1;
  --sage:       #d1ccab;
  /* ACCENT (chosen 31 Aug): raw blush #eabaa1. Buttons carry dark text
     (white on blush is unreadable). Blush on white is ~1.7:1, so small accent
     text, numerals and the nav "Join us" read faintly by design. */
  --flame:      #eabaa1;   /* fills, buttons, large accents */
  --flame-ink:  #eabaa1;   /* accent text / links / numerals */
  --ink:        #231f1d;
  --body:       #4c4641;
  --muted:      #8a8178;
  --rule:       #e7e1d5;   /* warm hairline */
  --cream-soft: #fbf4e3;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Glacial Indifference', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(3rem, 8.5vw, 6.5rem);
  --fs-h1:   clamp(2.5rem, 6vw, 4.75rem);
  --fs-h2:   clamp(1.9rem, 3.8vw, 3rem);
  --fs-h3:   clamp(1.3rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.2rem, 1.7vw, 1.45rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 1.09rem;
  line-height: 1.72;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; margin-bottom: 0.6rem; }

p { margin-bottom: 1.15rem; }
p:last-child { margin-bottom: 0; }

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

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

strong, b { font-weight: 700; color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.measure { max-width: 40rem; }
.measure-wide { max-width: 52rem; }

/* ---------- Eyebrow / labels ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flame-ink);
  margin-bottom: 1.1rem;
  display: block;
}

.eyebrow.on-dark { color: var(--blush); }

/* Section marker — replaces the uppercase eyebrow above section headings.
   One knob: change this block to restyle every section label at once. */
.marker {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--flame-ink);
  margin-bottom: 0.85rem;
}
.marker.on-dark { color: var(--blush); }
.section-head.center .marker { text-align: center; }

/* ---------- Links in prose ---------- */

.prose a,
a.inline-link {
  color: var(--ink);
  box-shadow: inset 0 -0.08em 0 var(--flame);
  transition: box-shadow 150ms ease, color 150ms ease;
}
.prose a:hover,
a.inline-link:hover { box-shadow: inset 0 -0.55em 0 var(--blush); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.15em 2.2em;
  border-radius: 0;
  background: var(--flame);
  color: var(--ink);
  border: 1px solid var(--flame);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: transparent; color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: #fff; }

.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost.on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

.textlink {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  box-shadow: inset 0 -2px 0 var(--flame);
  padding-bottom: 3px;
  transition: box-shadow 150ms ease;
}
.textlink:hover { box-shadow: inset 0 -0.7em 0 var(--blush); }
.textlink.on-dark { color: #fff; box-shadow: inset 0 -2px 0 var(--blush); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink);
  transition: background 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

.site-header.is-solid,
.site-header.is-open,
body.page-light .site-header {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--rule);
}

.logo {
  display: inline-flex;
  flex-direction: column;
  gap: 0.28rem;
  white-space: nowrap;
}
.logo .logo-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo .logo-sub {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--body);
  line-height: 1;
}

.main-nav { display: flex; align-items: center; gap: 0.35rem; }

.main-nav a {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.7rem;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--flame-ink); }

.main-nav a.nav-cta {
  color: var(--flame-ink);
  margin-left: 0.3rem;
}
.main-nav a.nav-cta:hover {
  color: var(--flame-ink);
  box-shadow: inset 0 -2px 0 var(--flame);
}

.nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  background: none; border: none; color: inherit;
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0.2rem;
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  padding: clamp(9rem, 20vh, 13rem) 0 clamp(3.5rem, 8vh, 6rem);
  background: var(--white);
  overflow: hidden;
}

.hero .wrap { position: relative; z-index: 2; }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 400;
  max-width: 15ch;
  margin-bottom: 1.5rem;
}
.hero h1 em {
  font-style: italic;
  color: var(--flame-ink);
}

.hero .lead {
  font-size: var(--fs-lead);
  max-width: 34rem;
  color: var(--body);
  margin-bottom: 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }

.hero-figure {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  min-width: 320px;
  z-index: 1;
  /* Feather the video's own left edge to nothing, so it dissolves into the
     white background with no seam. Also softens the top and bottom edges. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 58%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0%, #000 58%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hero-figure img,
.hero-figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Phones and tablets: the video fills the whole hero as a background, with the
   text sitting on top of it, instead of a separate band beside or below it.
   A soft white wash over the video keeps the headline readable and fades out
   lower down, so the buttons sit over a clearer view of the video. */
@media (max-width: 900px) {
  .hero { padding-bottom: clamp(3rem, 12vh, 5rem); }
  .hero-figure {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.92) 30%,
      rgba(255, 255, 255, 0.62) 58%,
      rgba(255, 255, 255, 0.34) 100%
    );
  }
  .hero-figure video { object-position: 62% 30%; }
}

/* ---------- Section rhythm ---------- */

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section + .section { border-top: 1px solid var(--rule); }

.section.bg-cream { background: var(--cream); border-top: none; }
.section.bg-cream-soft { background: var(--cream-soft); border-top: none; }
.section.bg-blush { background: var(--blush); border-top: none; }
.section.bg-sage { background: var(--sage); border-top: none; }
.section.bg-ink { background: var(--ink); color: rgba(255,255,255,0.82); border-top: none; padding: clamp(3.25rem, 6.5vw, 5rem) 0; }
.section.bg-ink h1, .section.bg-ink h2, .section.bg-ink h3 { color: #fff; }

/* The three-cards section sits close under the cream block above it, with no
   divider line — a crisp colour change, not a fade. */
.section + .ways-section { border-top: none; }
.ways-section { padding-top: clamp(2.5rem, 6vw, 4rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: var(--fs-lead); color: var(--body); }
.section.bg-ink .section-head p { color: rgba(255,255,255,0.75); }

/* Big editorial statement */
.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 24ch;
}
.statement em { font-style: italic; color: var(--flame-ink); }
.section.bg-ink .statement { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.01em; }
.section.bg-ink .statement em { color: var(--blush); }

/* ---------- Split / founder ---------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split.img-first { grid-template-columns: 0.95fr 1.05fr; }
.split img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split .prose p { color: var(--body); font-size: 1.15rem; }
.split .prose p + p { margin-top: 1rem; }

/* Text one side, a masonry photo column the other. Used on the About page
   ceremony section. */
.media-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.media-split .prose p { color: var(--body); font-size: 1.08rem; }
.media-split .prose p + p { margin-top: 1rem; }
.media-split .photo-wall { margin-top: 0; }
@media (max-width: 820px) {
  .media-split { grid-template-columns: 1fr; gap: 2.5rem; }
}

.prose p.kicker,
.kicker {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.12;
  margin-bottom: 1.3rem;
}

/* About page: a long personal story beside the portrait. The portrait stays in
   view while the text scrolls past it. */
.split--story { align-items: start; }
@media (min-width: 801px) {
  .split--story img { position: sticky; top: 6.5rem; }
}

@media (max-width: 800px) {
  .split, .split.img-first { grid-template-columns: 1fr; gap: 2rem; }
  .split img { max-width: 420px; aspect-ratio: 4/5; }
}

/* ---------- Join page ---------- */

.join-split {
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.stand-list { list-style: none; margin: 1.5rem 0 0; }
.stand-list li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
}
.stand-list li:last-child { border-bottom: 1px solid var(--rule); }

.join-form { background: var(--cream); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.join-form h2 { font-size: 1.3rem; margin-bottom: 0.55rem; }
.join-form p { color: var(--body); font-size: 0.95rem; }
.join-form form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.3rem; }
.join-form input[type=email] {
  padding: 0.9em 1em;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  background: #fff;
  color: var(--ink);
}
.join-form input[type=email]::placeholder { color: var(--muted); }
.join-form .btn { align-self: flex-start; }
.join-signoff {
  font-family: 'Caveat', var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 1.6rem 0 0;
}
.join-signoff span { font-size: 1.75rem; }

@media (max-width: 800px) {
  .join-split { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
}

/* ---------- Ways in (three feeling-led blocks) ---------- */

.ways-heading {
  max-width: 24ch;
  font-size: var(--fs-h2);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: clamp(1.8rem, 4vw, 3.2rem);
}

@media (max-width: 820px) {
  .media-split { grid-template-columns: 1fr; gap: 2.5rem; }
}

.prose p.kicker,
.kicker {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.12;
  margin-bottom: 1.3rem;
}

/* About page: a long personal story beside the portrait. The portrait stays in
   view while the text scrolls past it. */
.split--story { align-items: start; }
@media (min-width: 801px) {
  .split--story img { position: sticky; top: 6.5rem; }
}

@media (max-width: 800px) {
  .split, .split.img-first { grid-template-columns: 1fr; gap: 2rem; }
  .split img { max-width: 420px; aspect-ratio: 4/5; }
}

/* ---------- Join page ---------- */

.join-split {
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.stand-list { list-style: none; margin: 1.5rem 0 0; }
.stand-list li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
}
.stand-list li:last-child { border-bottom: 1px solid var(--rule); }

.join-form { background: var(--cream); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.join-form h2 { font-size: 1.3rem; margin-bottom: 0.55rem; }
.join-form p { color: var(--body); font-size: 0.95rem; }
.join-form form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.3rem; }
.join-form input[type=email] {
  padding: 0.9em 1em;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  background: #fff;
  color: var(--ink);
}
.join-form input[type=email]::placeholder { color: var(--muted); }
.join-form .btn { align-self: flex-start; }
.join-signoff {
  font-family: 'Caveat', var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 1.6rem 0 0;
}
.join-signoff span { font-size: 1.75rem; }

@media (max-width: 800px) {
  .join-split { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
}

/* ---------- Ways in (three feeling-led blocks) ---------- */

.ways-heading {
  max-width: 24ch;
  font-size: var(--fs-h2);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: clamp(1.8rem, 4vw, 3.2rem);
}

/* Each way is a whole clickable card: a solid colour panel so the block
   reads as three doors to choose between, not three articles to read. A big
   faint numeral gives it the feel of steps/options rather than blog posts.
   Equal height across the row; the button bottom-aligns regardless of copy
   length. Lifts with a soft shadow on hover to feel pressable. */
.way {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 19rem;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.way:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -14px rgba(35, 31, 29, 0.22);
}
.way--cream { background: var(--cream); }
.way--blush { background: var(--blush); }
.way--sage  { background: var(--sage); }

.way-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.2rem, 5vw, 3.8rem);
  height: clamp(3.2rem, 5vw, 3.8rem);
  border-radius: 50%;
  background: var(--cream-soft);
  margin-bottom: 1.3rem;
}
.way-icon {
  width: clamp(1.5rem, 2.2vw, 1.8rem);
  height: clamp(1.5rem, 2.2vw, 1.8rem);
  color: var(--ink);
  opacity: 0.8;
}

.way h3 { font-weight: 400; font-size: 1.55rem; line-height: 1.2; margin-bottom: 0.7rem; }
.way p { color: var(--body); font-size: 0.95rem; margin-bottom: 1.8rem; }

.way-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.way-cta span { transition: transform 0.2s ease; }
.way:hover .way-cta span { transform: translateX(3px); }

@media (max-width: 820px) {
  .ways { grid-template-columns: 1fr; max-width: 32rem; gap: 2.6rem; }
}

/* ---------- Trio (ecosystem / simple cards) ---------- */

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.trio > div { border-top: 2px solid var(--ink); padding-top: 1.4rem; }
.trio h3 { margin-bottom: 0.5rem; }
.trio p { color: var(--body); font-size: 1rem; margin-bottom: 1.1rem; }
.section.bg-ink .trio > div { border-top-color: var(--blush); }
.section.bg-ink .trio p { color: rgba(255,255,255,0.75); }
@media (max-width: 800px) { .trio { grid-template-columns: 1fr; } }

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

.newsletter { max-width: 40rem; }
.newsletter.center { margin: 0 auto; text-align: center; }
.newsletter form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.newsletter.center form { justify-content: center; }
.newsletter input[type=email] {
  flex: 1 1 16rem;
  padding: 1em 1.1em;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  background: #fff;
  color: var(--ink);
}
.newsletter input[type=email]::placeholder { color: var(--muted); }

/* ---------- Contact form ---------- */

.form-field { margin-bottom: 1.6rem; }
.form-field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.9em 1em;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
}
.form-field input:focus,
.form-field textarea:focus { outline: 2px solid var(--blush); outline-offset: 1px; }
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.9rem; }
.form-note a { color: inherit; }

.kit-errors { list-style: none; margin: 0; padding: 0; flex-basis: 100%; }
.kit-errors:empty { display: none; }
.kit-errors li { color: #b3311f; font-size: 0.85rem; margin-top: 0.3rem; }

/* Kit swaps the whole form for this message once someone submits, so it
   needs real visual weight, otherwise it looks like nothing happened. */
.formkit-alert-success {
  display: block;
  background: var(--blush);
  padding: 1.2rem 1.4rem;
  margin: 0.2rem 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Page head (inner pages) ---------- */

.page-head {
  padding: clamp(8rem, 16vh, 11rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--cream);
}
.page-head.bg-blush { background: var(--blush); }
.page-head.bg-sage { background: var(--sage); }
.page-head.bg-white { background: #fff; border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: var(--fs-h1); font-weight: 400; max-width: 18ch; margin-bottom: 1rem; }
.page-head h1 em { font-style: italic; color: var(--flame-ink); }
/* soft tone-on-tone emphasis on a coloured banner (e.g. "you need" on the blush directory head) */
.page-head.bg-blush h1 em.tint,
.page-head.bg-sage h1 em.tint { color: #fff; }
.page-head .standfirst { font-size: var(--fs-lead); max-width: 40rem; color: var(--body); }

/* ---------- Long-form prose (about) ---------- */

.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose .measure > p { font-size: 1.2rem; }
.prose .dropcap::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 4.2rem;
  line-height: 0.82;
  padding: 0.05em 0.12em 0 0;
  color: var(--flame-ink);
  font-weight: 500;
}

.factlist { list-style: none; margin: 1.5rem 0; padding: 0; }
.factlist li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
}
.factlist li:first-child { border-top: 1px solid var(--rule); }
.factlist .label { font-family: var(--sans); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--flame-ink); }
.factlist .val { color: var(--body); }

.pullquote {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 26ch;
  margin: 0;
}
.pullquote cite {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Practitioner directory ---------- */

.dir-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  align-items: center;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.dir-outro {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.dir-outro p {
  font-size: 1.05rem;
  color: var(--body);
}
.dir-outro p + p { margin-top: 1rem; }
.dir-join {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 0.95rem;
  color: var(--body);
}

/* ---------- Practitioner resources (private page) ---------- */

/* Jump links under the banner (mirrors the directory filter buttons). */
.res-jump .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  padding-top: 1.6rem;
  padding-bottom: 0.4rem;
}
.res-jump a {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--rule);
  color: var(--body);
  transition: border-color 0.14s ease, color 0.14s ease;
}
.res-jump a:hover { border-color: var(--ink); color: var(--ink); }
#spaces, #mindset, #skill-building, #community { scroll-margin-top: 5.5rem; }

.res-group { margin-top: clamp(2rem, 4vw, 3.2rem); }
.res-group > h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  margin-bottom: 1.4rem;
}
.res-group + .res-group {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

/* A grid of link cards that line up in rows, in the spirit of the elink boards. */
.res-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.4rem;
}
.res-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--white);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.res-card:hover { border-color: var(--ink); transform: translateY(-3px); }

.res-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--cream);
}
.res-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.15rem 1.2rem;
}
.res-tag {
  align-self: flex-start;
  margin-bottom: 0.7rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--cream);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
}
.res-title {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.res-card:hover .res-title { color: var(--flame-ink); }
.res-desc {
  display: block;
  margin-top: 0.5rem;
  color: var(--body);
  font-size: 0.9rem;
  line-height: 1.5;
}
.res-host {
  display: block;
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.filter-btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: #fff;
  color: var(--body);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(2.8rem, 5.5vw, 4.5rem) clamp(1.2rem, 2.5vw, 2rem);
}

.pract {
  display: flex;
  flex-direction: column;
}
.pract .photo {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--cream);
  margin-bottom: 1rem;
  filter: saturate(0.96);
}
.pract .region {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-ink);
  margin-bottom: 0.35rem;
}
.pract h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.pract .role { font-size: 0.95rem; color: var(--body); margin-bottom: 0.5rem; }
.pract .langs { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.7rem; }
.pract .visit {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  align-self: flex-start;
  box-shadow: inset 0 -2px 0 var(--flame);
  padding-bottom: 2px;
}
.pract .visit:hover { box-shadow: inset 0 -0.7em 0 var(--blush); }

.dir-note {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 44rem;
}

/* Centred section variant — used to draw the eye to a single block,
   e.g. the testimonials video on the Events page. */
.center-block { text-align: center; }
.center-block .measure,
.center-block .measure-wide { margin-left: auto; margin-right: auto; }
.center-block .testimonial-video { margin-left: auto; margin-right: auto; }
.center-block .dir-note {
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(4rem, 8vw, 6rem);
  text-align: center;
}

/* ---------- Self-guided shop ---------- */

/* Button colour variants — used only on the shop, to give the money page a bit
   more life while staying inside the locked palette. */
.btn--sage  { background: var(--sage);  border-color: var(--sage);  color: var(--ink); }
.btn--sage:hover  { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--flame { background: #f66930; border-color: #f66930; color: #fff; }
.btn--flame:hover { background: transparent; color: #b8460f; border-color: currentColor; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: clamp(1.8rem, 4vw, 3rem);
}

.shop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--rule);
}
.shop-card > a.shop-card-media { display: block; }
.shop-card .shop-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--cream);
}
.shop-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  gap: 0.55rem;
}
.shop-card .q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.shop-card .q a { color: inherit; }
.shop-card .q a:hover { box-shadow: inset 0 -2px 0 var(--blush); }
.shop-card .lede { color: var(--body); font-size: 1rem; }
.shop-card .price {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
}
.shop-card .includes {
  list-style: none;
  margin: 0.4rem 0 0.6rem;
  padding: 0;
  font-size: 0.92rem;
  color: var(--body);
}
.shop-card .includes li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.35rem;
}
.shop-card .includes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blush);
}
.shop-card-actions {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
}
.shop-card-actions .btn { padding: 0.95em 1.6em; font-size: 0.74rem; }

@media (max-width: 900px) {
  .shop-grid { grid-template-columns: 1fr; max-width: 32rem; gap: 2.4rem; }
}

/* Product detail page */

.product {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}
.product-media img { width: 100%; height: auto; }
.product-media { position: sticky; top: 6rem; }
.product-body .lead-line { font-size: var(--fs-lead); color: var(--body); margin-bottom: 1.6rem; }
.product-body h2 { font-size: 1.4rem; margin: 2rem 0 0.8rem; }
.product-body p { color: var(--body); }

.includes-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.includes-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: 1px solid var(--rule);
  color: var(--body);
}
.includes-list li:first-child { border-top: 1px solid var(--rule); }
.includes-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blush);
}

.buy-box {
  margin-top: 2.4rem;
  padding: 1.8rem;
  background: var(--cream);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}
.buy-box .price-big {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--ink);
  line-height: 1;
}
.buy-box .note { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); margin: 0; }
.credit-line { margin-top: 1.5rem; }

.quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--rule);
  padding-left: 1.25rem;
  margin: 1.75rem 0 0;
}
.quote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.back-link {
  display: inline-block;
  margin-bottom: 1.4rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
}
.back-link:hover { color: var(--ink); }

@media (max-width: 820px) {
  .product { grid-template-columns: 1fr; }
  .product-media { position: static; max-width: 26rem; }
}

/* Download pages (post-purchase) */

.dl-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.dl-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.dl-list li:first-child { border-top: 1px solid var(--rule); }
.dl-list .dl-name { font-weight: 700; color: var(--ink); }
.dl-list .dl-meta { font-size: 0.85rem; color: var(--muted); }
.dl-list .dl-get {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--blush);
  padding-bottom: 2px;
}
.dl-list .dl-get:hover { box-shadow: inset 0 -0.7em 0 var(--blush); }

/* Download rows with a preview image */
.dl-list li.dl-item {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: 0.4rem 1.4rem;
}
.dl-list .dl-thumb {
  width: 7rem;
  height: 7rem;
  object-fit: cover;
  display: block;
  background: var(--cream);
}
.dl-list .dl-info { display: flex; flex-direction: column; gap: 0.3rem; }
.dl-list li.dl-item .dl-get { margin-left: 0; }
@media (max-width: 34rem) {
  .dl-list li.dl-item { grid-template-columns: 4.5rem 1fr; gap: 0.6rem 1rem; }
  .dl-list .dl-thumb { width: 4.5rem; height: 4.5rem; }
  .dl-list li.dl-item .dl-get { grid-column: 2; justify-self: start; }
}

/* Meditation player: a larger, on-brand replacement for the browser's audio bar.
   Without JavaScript the plain audio element inside stays visible and working. */
.player {
  margin: 1.6rem 0 0.5rem;
  padding: 1.7rem 1.9rem;
  background: var(--cream-soft);
  border: 1px solid var(--rule);
}
.player-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.player-sub { margin: 0.45rem 0 0; font-size: 0.95rem; color: var(--muted); }
.player audio { display: block; width: 100%; margin-top: 1.1rem; }
.player-row { display: none; align-items: center; gap: 1.1rem; margin-top: 1.4rem; }
.player.is-ready .player-row { display: flex; }
.player.is-ready audio { display: none; }
.player-btn {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  background: var(--blush);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.player-btn:hover { background: var(--ink); color: #fff; }
.player-btn svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.player-btn .icon-pause { display: none; }
.player.is-playing .player-btn .icon-pause { display: block; }
.player.is-playing .player-btn .icon-play { display: none; }
.player-btn:focus-visible,
.player-seek:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.player-seek {
  --pct: 0%;
  flex: 1;
  min-width: 0;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.player-seek::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right, var(--ink) var(--pct), var(--rule) var(--pct));
}
.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background: var(--ink);
  border: 0;
}
.player-seek::-moz-range-track { height: 4px; background: var(--rule); }
.player-seek::-moz-range-progress { height: 4px; background: var(--ink); }
.player-seek::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); border: 0; border-radius: 0; }
.player-time {
  flex: none;
  min-width: 6.2rem;
  text-align: right;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 34rem) {
  .player { padding: 1.4rem 1.2rem; }
  .player-row { flex-wrap: wrap; gap: 0.9rem; }
  .player-time { margin-left: auto; }
  .player-seek { order: 3; flex-basis: 100%; }
}

.dl-audio { width: 100%; margin: 1.4rem 0 0.5rem; }

.dl-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 1.4rem 0 0.5rem;
  background: var(--cream);
}
.dl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dl-care {
  margin-top: 2.5rem;
  padding: 1.4rem 1.6rem;
  background: var(--cream-soft);
  font-size: 0.9rem;
  color: var(--body);
}
.dl-care strong { display: block; margin-bottom: 0.3rem; }

/* ---------- Learn (modality library) ---------- */

/* Library section: trim the top padding so the search sits closer to the
   standfirst above it rather than drifting down towards the entries. */
.learn-section { padding-top: clamp(2rem, 4vw, 3rem); }

.learn-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 23rem;
  margin: 0 0 clamp(3.5rem, 7vw, 5rem) auto;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.7rem 1.25rem;
}
.learn-search:focus-within { box-shadow: 0 0 0 3px var(--blush); }
.learn-search .search-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: var(--muted);
}
.learn-search .lbl {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-ink);
}
.learn-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  padding: 0;
  text-overflow: ellipsis;
}
.learn-search input:focus { outline: none; }
.learn-search input::placeholder {
  font-style: italic;
  color: var(--muted);
  opacity: 0.75;
}

.learn-list { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

.learn-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.learn-entry:first-child { border-top: 0; padding-top: 0; }
.learn-entry .frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--cream);
}
.learn-entry .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.learn-entry h2 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.learn-entry .who {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flame-ink);
  margin-bottom: 0.5rem;
  display: block;
}
.learn-entry p { color: var(--body); }
.learn-entry .learn-links { margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.learn-entry.is-hidden { display: none; }

@media (max-width: 800px) {
  .learn-entry { grid-template-columns: 1fr; }
}

/* ---------- Events ---------- */

.event {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--rule);
}
.event:first-of-type { border-top: 0; padding-top: 0; }
.event h2 { font-size: var(--fs-h2); margin-bottom: 0.4rem; }
.cadence {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flame-ink);
  margin-bottom: 1.5rem;
  display: block;
}
.event p { color: var(--body); }
.event .btn { margin-top: 1.4rem; }

/* Featured event: image carousel left, copy right */
.event--featured {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.6rem, 5vw, 4rem);
  align-items: start;
  padding-top: 0;
  border-top: 0;
}
.event--featured .event-copy { max-width: 34rem; }
@media (max-width: 820px) {
  .event--featured { grid-template-columns: 1fr; }
  .event--featured .event-copy { max-width: none; }
}

.carousel {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream);
}
@media (min-width: 821px) {
  .carousel { aspect-ratio: auto; height: clamp(22rem, 34vw, 30rem); }
}
.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease;
}
.carousel img.is-active { opacity: 1; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.85);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-arrow:hover { background: #fff; }
.carousel-arrow.prev { left: 0.6rem; }
.carousel-arrow.next { right: 0.6rem; }

.carousel-dots {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.9rem;
}
.carousel-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--rule);
  transition: background 150ms ease;
}
.carousel-dots button.is-active { background: var(--flame); }

/* Masonry photo wall — images keep their own shape, flow into columns */
.photo-wall {
  column-width: 240px;
  column-gap: 0.7rem;
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
}
.photo-wall.tight { column-width: 200px; }
.photo-wall img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 0.7rem;
  break-inside: avoid;
  background: var(--cream);
}

/* Tidy version: a script lays the photos out in rows of equal height that fill
   the full width, so the wall has straight edges on every side and no photo is
   cropped. Without the script the plain masonry above still works. */
.photo-wall.is-justified { columns: auto; column-width: auto; display: block; }
.photo-wall.is-justified .wall-row { display: flex; gap: 0.7rem; margin-bottom: 0.7rem; }
.photo-wall.is-justified .wall-row:last-child { margin-bottom: 0; }
.photo-wall.is-justified img {
  flex: var(--r) 1 0;
  min-width: 0;
  width: auto;
  margin: 0;
  object-fit: cover;
}

/* Wider container so the wall reaches most of the screen */
.wall-wide {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.testimonial-video {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 1.8rem 0 0;
  padding-top: min(56.25%, 461px);
  background: var(--cream);
}
.testimonial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: clamp(3rem, 7vw, 5rem) 0 2.5rem;
}
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-brand {
  font-family: 'Caveat', var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  line-height: 1.3;
  color: #fff;
  max-width: none;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.footer-nav a { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.footer-nav a:hover { color: var(--flame); }
.footer-bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}
.footer-social { display: flex; gap: 0.8rem; }
.footer-social a {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.7);
}
.footer-social a:hover { border-color: var(--flame); color: var(--flame); }

/* ---------- Mobile nav ---------- */

@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    z-index: 1;
    inset: 0 0 0 auto;
    width: min(20rem, 82vw);
    background: var(--white);
    color: var(--ink);
    flex-direction: column;
    align-items: stretch;
    padding: 5.5rem 1.6rem 2rem;
    transform: translateX(100%);
    transition: transform 260ms ease;
    box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    overflow-y: auto;
  }
  .site-header.is-open .main-nav { transform: translateX(0); }
  .main-nav a { color: var(--ink); padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--rule); }
  .main-nav a.nav-cta { margin: 1.1rem 0 0; text-align: left; border-bottom: none; color: var(--flame-ink); }
}