:root {
  /* ── Colour Palette ── */
  --color-bg:         #F7F3EE;
  --color-bg-alt:     #EDE8E1;
  --color-text:       #2C2420;
  --color-text-mid:   #6B5E56;
  --color-accent:     #8B3A3A;
  --color-accent-hover: #9E4A4A; /* 4.9:1 on --color-bg-alt (link hover in tinted boxes) */
  --color-rule:       #D6CEC6;
  --color-field-rule: #8F827A;   /* form-field edges: 3:1+ on both backgrounds (WCAG 1.4.11) */

  /* ── Feedback Colours ── */
  --color-error:      #9B2C2C;
  --color-error-bg:   #FBEBE9;
  --color-error-border: #E0A8A8;
  --color-success:    #2D5016;
  --color-success-bg: #E8F0E4;
  --color-success-border: #A8C99B;

  /* ── Type Scale (Major Third · 1.25) ── */
  --text-xs:      0.8rem;
  --text-sm:      0.875rem;
  --text-base:    1.125rem;
  --text-md:      1.25rem;
  --text-lg:      1.563rem;
  --text-xl:      1.953rem;
  --text-2xl:     2.441rem;
  --text-3xl:     3.052rem;
  --text-display: 3.815rem;

  /* ── Spacing (8px grid) ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ── Content Widths ── */
  --width-prose: 42rem;
  --width-wide:  60rem;
  --width-max:   72rem;

  /* ── Fonts ── */
  --font-heading: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Source Serif 4', 'Georgia', 'Times New Roman', serif;

  /* ── Line Heights ── */
  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

@media (max-width: 599px) {
  :root {
    --text-3xl:     2.2rem;
    --text-2xl:     1.953rem;
    --text-xl:      1.563rem;
    --text-display: 2.6rem;
    --space-4xl:    3rem;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  :root {
    --text-3xl:     2.6rem;
    --text-display: 3.2rem;
  }
}
/* ── Self-hosted fonts (latin subset) ── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/source-serif-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-serif-4-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* ── Document ── */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Keep a focused link clear of the fixed .mobile-cta bar. */
@media (max-width: 1080px) {
  html {
    scroll-padding-bottom: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-lg);
}

h3 {
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-md);
}

h4 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

p {
  margin-bottom: var(--space-lg);
}

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

/* ── Links ── */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast);
}

a:visited {
  color: #6E3333;
}

a:hover {
  color: var(--color-accent-hover);
}

/* ── Focus ── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Selection ── */
::selection {
  background-color: #8B3A3A30;
  color: var(--color-text);
}

/* ── Lists ── */
ul, ol {
  padding-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

li {
  margin-bottom: var(--space-sm);
}

/* ── Blockquote ── */
blockquote {
  margin: 0;
  padding: 0;
  border: none;
}

/* ── Horizontal Rule ── */
hr {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin-block: var(--space-2xl);
}

/* ── Images ── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Table base ── */
table {
  border-collapse: collapse;
  width: 100%;
}

/* ── Utilities ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-mid { color: var(--color-text-mid); }

/* ── Skip Link ── */
.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  z-index: 200;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.skip-link:visited {
  color: var(--color-bg);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ── Content Containers ── */
.prose {
  max-width: var(--width-prose);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.wide {
  max-width: var(--width-wide);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.page-wrap {
  max-width: var(--width-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* ── Sections ── */
.section {
  padding-block: var(--space-4xl);
}

.section + .section {
  border-top: 1px solid var(--color-rule);
}

/* Compact-edge variants for stacking sections that should read as one
   continuous block (e.g. hero immediately followed by content). */
.section--compact-bottom {
  padding-block-end: var(--space-xl);
}

.section--compact-top {
  padding-block-start: var(--space-xl);
}

/* ── Lede Paragraph ── */
.lede {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-mid);
  max-width: 36rem;
}

/* ── Accent Rule ── */
.rule {
  border: none;
  border-top: 2px solid var(--color-accent);
  width: 3rem;
  margin-block: var(--space-2xl);
  margin-inline: 0;
}

/* ═══════════════════════════════════
   Site Header / Navigation
   ═══════════════════════════════════ */
.site-header {
  border-bottom: 1px solid var(--color-rule);
}

.site-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-lg);
  gap: var(--space-lg);
}

.site-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.site-name:hover {
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 1.6vw, var(--space-xl));
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Narrow desktop: at 1.6vw the menu runs past the content edge, into the
   page gutter, below ~1110px (with a 15px scrollbar); a tighter gap keeps it
   inside down to 1081px. */
@media (min-width: 1081px) and (max-width: 1119px) {
  .nav-links {
    gap: 0.8rem;
  }
}

/* Base li margins would hang below the baseline and grow the header. */
.nav-links li {
  margin-bottom: 0;
}

.nav-links a {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--color-accent);
}

.nav-links a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.45em;
}

/* ── Hamburger Toggle ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  position: relative;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background-color: var(--color-bg-alt);
  border-radius: 4px;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-text);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all var(--transition-base);
}

.nav-toggle-bar {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle-bar::before {
  content: '';
  top: -7px;
  left: 50%;
}

.nav-toggle-bar::after {
  content: '';
  top: 7px;
  left: 50%;
}

/* Open state */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* ── Mobile Navigation ── */
@media (max-width: 1080px) {
  .nav-toggle {
    display: block;
    flex-shrink: 0;
  }

  /* Lets the name wrap under the WCAG 1.4.12 text-spacing override instead of
     pushing the toggle off-screen; at default spacing it still fits one line. */
  .site-name {
    white-space: normal;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-rule);
    padding: var(--space-lg);
    gap: 0;
    z-index: 100;
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    display: block;
    padding: var(--space-md) 0;
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-rule);
  }

  .nav-links li:last-child a {
    border-bottom: none;
  }

  /* The menu is out of flow here: centre the name on the toggle instead. */
  .site-nav {
    position: relative;
    align-items: center;
  }

}

/* The nowrap site name at --text-lg plus the toggle is ~377px wide:
   scale the name with the viewport on small phones so the header fits at 320px. */
@media (max-width: 420px) {
  .site-name {
    font-size: clamp(1.125rem, 6vw, var(--text-lg));
  }

  .site-nav {
    gap: var(--space-md);
  }
}

/* ═══════════════════════════════════
   Footer
   ═══════════════════════════════════ */
.site-footer {
  padding-block: var(--space-3xl) var(--space-4xl);
}

.footer-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 300;
  margin-bottom: var(--space-md);
}

.site-footer p {
  margin-bottom: var(--space-sm);
}

.site-footer a {
  color: var(--color-text-mid);
}

.site-footer a:hover {
  color: var(--color-accent);
}

/* ── Footer columns ── */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-col--brand {
    grid-column: 1 / -1;
  }
  /* Touch screens: pad the link lists to a ~40px tap target */
  .footer-col li {
    margin-bottom: 0;
  }
  .footer-col li a {
    display: inline-block;
    padding-block: var(--space-sm);
  }
}

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ═══════════════════════════════════
   Pull Quotes (Testimonials)
   ═══════════════════════════════════ */
.pull-quote {
  margin-block: var(--space-3xl);
  padding: 0;
  position: relative;
}

.pull-quote::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 6rem;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1;
  position: absolute;
  top: -0.35em;
  left: -0.05em;
  opacity: 0.25;
  pointer-events: none;
}

.pull-quote p {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 300;
  font-style: italic;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: 0;
}

.pull-quote figcaption {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-mid);
  letter-spacing: 0.02em;
}

.pull-quote + .pull-quote {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-3xl);
}

/* ═══════════════════════════════════
   Pricing Table
   ═══════════════════════════════════ */
.pricing-table {
  margin-block: var(--space-xl);
}

.pricing-table tr {
  border-bottom: 1px solid var(--color-rule);
}

.pricing-table td {
  padding-block: var(--space-lg);
  vertical-align: baseline;
}

.pricing-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  width: 30%;
}

.pricing-name strong {
  font-weight: 500;
}

.pricing-sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-mid);
  margin-top: var(--space-xs);
}

.pricing-detail {
  font-size: var(--text-base);
  color: var(--color-text-mid);
  padding-inline: var(--space-lg);
}

.pricing-price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .pricing-table td {
    display: block;
    width: 100%;
    padding-inline: 0;
    padding-block: var(--space-sm);
  }

  .pricing-table tr:first-child td:first-child {
    padding-top: var(--space-lg);
  }

  .pricing-table tr td:last-child {
    padding-bottom: var(--space-lg);
  }

  .pricing-detail {
    padding-inline: 0;
    margin-top: 0;
  }

  .pricing-price {
    text-align: left;
    margin-top: 0;
  }
}

/* ═══════════════════════════════════
   Comparison Table (compare/ pages)
   ═══════════════════════════════════ */
.compare-table {
  width: 100%;
  margin-block: var(--space-xl);
  border-collapse: collapse;
}

.compare-table th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-mid);
  text-align: left;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) 0;
  border-bottom: 1px solid var(--color-text-mid);
}

.compare-table tbody tr {
  border-bottom: 1px solid var(--color-rule);
}

.compare-table td {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  vertical-align: top;
}

.compare-ensemble {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  width: 26%;
}

.compare-ensemble strong {
  font-weight: 500;
}

.compare-figure {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.compare-note {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  margin-top: var(--space-xs);
}

th.compare-us,
td.compare-us {
  background: var(--color-bg-alt);
  padding-inline: var(--space-lg);
}

td.compare-us .compare-figure,
td.compare-us .compare-saving {
  color: var(--color-accent);
}

.compare-saving {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--space-xs);
}

@media (max-width: 599px) {
  .compare-table thead {
    display: none;
  }

  .compare-table td {
    display: block;
    width: 100%;
    padding: var(--space-sm) 0;
  }

  .compare-table td.compare-ensemble {
    padding-top: var(--space-lg);
  }

  .compare-table td:last-child {
    margin-bottom: var(--space-lg);
  }

  td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-mid);
    margin-bottom: var(--space-xs);
  }

  td.compare-us {
    padding: var(--space-md) var(--space-md);
  }
}

/* ── Compare summary panel ── */
.compare-summary {
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  padding: var(--space-lg) var(--space-xl);
  margin-block: var(--space-xl);
}

.compare-summary dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-mid);
  margin-top: var(--space-md);
}

.compare-summary dt:first-child {
  margin-top: 0;
}

.compare-summary dd {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-base);
}

/* ── Compare columns (what each price covers) ── */
.compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-block: var(--space-lg);
}

.compare-cols h3 {
  margin-top: 0;
}

.compare-cols ul {
  padding-left: 1.2em;
  margin-block: var(--space-sm);
}

.compare-cols li {
  margin-block: var(--space-xs);
}

.compare-col-us {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-lg) var(--space-xl);
}

@media (max-width: 599px) {
  .compare-cols {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════
   Related Guides
   ═══════════════════════════════════ */
.related-guides {
  max-width: var(--width-prose);
  margin-inline: auto;
  padding: var(--space-4xl) var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.related-guides h2 {
  margin-top: 0;
}

.related-guides p {
  margin-block: var(--space-md);
}

.related-guides ul {
  padding-left: 1.2em;
  margin-block: var(--space-md);
}

.related-guides li {
  margin-block: var(--space-xs);
}

.related-guides li a {
  display: inline-block;
  padding-block: 0.25rem;
}

/* ═══════════════════════════════════
   Track Listing (Listen Page)
   ═══════════════════════════════════ */
.track {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}

.track:first-of-type {
  padding-top: 0;
}

.track-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.track-meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-mid);
}

.track-description {
  color: var(--color-text-mid);
  margin-bottom: var(--space-md);
}

/* ═══════════════════════════════════
   Film Grid (Listen pages)
   Cards of click-to-play films (js/video.js). Inside .wide three fit a
   row; two cards share a row between them; phones get one per row.
   ═══════════════════════════════════ */
.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-2xl) var(--space-xl);
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
}

.film-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.film-card .video-embed {
  margin-bottom: var(--space-md);
}

.film-card h3 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.film-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  margin-bottom: var(--space-sm);
}

.film-card p {
  margin-bottom: var(--space-sm);
}

.film-card__link {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 500;
}

/* A paragraph under a heading in a .wide section, held to prose width. */
.section-intro {
  max-width: var(--width-prose);
  color: var(--color-text-mid);
}

/* Pieces without a film: title, ensemble, one line each. */
.repertoire-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-2xl);
  margin: var(--space-lg) 0 var(--space-2xl);
}

.repertoire-list > div {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-md);
}

.repertoire-list dt {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-xs);
}

.repertoire-list dt span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-mid);
}

.repertoire-list dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-mid);
}

/* Titles only, in two columns. */
.piece-list {
  columns: 2;
  column-gap: var(--space-2xl);
  padding-left: 1.2em;
  margin-bottom: var(--space-xl);
}

.piece-list li {
  break-inside: avoid;
}

@media (max-width: 599px) {
  .repertoire-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .piece-list {
    columns: 1;
  }
}

/* ═══════════════════════════════════
   Contact Form
   ═══════════════════════════════════ */
.contact-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0; /* a fieldset otherwise grows to its widest child (the captcha) */
}

.form-field {
  margin-bottom: var(--space-xl);
}

.form-field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
  margin-bottom: var(--space-sm);
}

.form-field .optional {
  font-weight: 400;
  color: var(--color-text-mid);
  font-size: var(--text-sm);
}

/* Optional fields folded away so the short form comes first */
.form-more {
  margin-bottom: var(--space-xl);
}

.form-more summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
  padding: var(--space-xs) 0;
}

.form-more summary .optional {
  font-weight: 400;
  color: var(--color-text-mid);
  font-size: var(--text-sm);
}

.form-more[open] summary {
  margin-bottom: var(--space-lg);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-mid);
  opacity: 1;
}

.form-field input,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-sm) 0;
  border: none;
  border-bottom: 1px solid var(--color-field-rule);
  background: transparent;
  color: var(--color-text);
  border-radius: 0;
  -webkit-appearance: none;
  transition: border-color var(--transition-fast);
}

.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-sm);
  border: 1px solid var(--color-field-rule);
  background: transparent;
  color: var(--color-text);
  border-radius: 0;
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-field textarea:focus {
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* A colour change alone on a 1px underline is too faint a focus cue:
   thicken the underline to 2px in the accent colour. */
.form-field input:focus,
.form-field select:focus {
  box-shadow: 0 1px 0 0 var(--color-accent);
}

.form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B5E56' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: var(--space-lg);
}

/* ── Validation States ── */
.form-field input:user-invalid,
.form-field select:user-invalid,
.form-field textarea:user-invalid,
.form-field [aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field input:user-invalid + .form-error,
.form-field select:user-invalid + .form-error,
.form-field textarea:user-invalid + .form-error {
  display: block;
}

.form-error {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: var(--space-xs);
}

.form-error[data-visible="true"] {
  display: block;
}

/* Optional ad-measurement checkbox (unticked by default), above the captcha.
   Not a .form-field: those rules style inputs as full-width underlined boxes. */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.form-check input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.05em 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.form-check label {
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  cursor: pointer;
}
.form-check-note {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-lg) calc(1.125rem + var(--space-sm));
}

/* hCaptcha's checkbox is a fixed 302px iframe, wider than the 272px form on
   a 320px phone. js/form.js asks for the compact widget there; if hCaptcha
   rendered before it could, shrink the full-size one to fit. The line box
   keeps the unscaled width, so the wrapper clips it (nothing visible). */
@media (max-width: 349px) {
  .h-captcha:not([data-size="compact"]) {
    overflow: hidden;
  }
  .h-captcha:not([data-size="compact"]) iframe {
    transform: scale(0.9);
    transform-origin: 0 0;
  }
}

.form-status {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: var(--text-sm);
  display: none;
}

.form-status[data-visible="true"] {
  display: block;
}

.form-status--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.form-status--error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

.btn {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  padding: var(--space-md) var(--space-2xl);
  background-color: var(--color-accent);
  color: var(--color-bg);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.btn:hover {
  background-color: var(--color-accent-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* On narrow viewports, give the contact form's submit a full-width tap
   target so it reads as the page's clear primary action. */
@media (max-width: 600px) {
  .contact-form .btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════
   Hero Trust Chip
   ═══════════════════════════════════ */
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--color-text-mid);
}

/* ═══════════════════════════════════
   Music Guides
   ═══════════════════════════════════ */
.guide-meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  letter-spacing: 0.02em;
}

.guide-list {
  list-style: none;
  padding-left: 0;
}

.guide-list li {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}

.guide-list li:first-child {
  padding-top: 0;
}

.guide-list h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.guide-list p {
  color: var(--color-text-mid);
  margin-bottom: 0;
}

.guide-category {
  font-size: var(--text-2xl);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
}

.guide-category:first-child {
  margin-top: 0;
}

.guide-list h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

/* ═══════════════════════════════════
   CTA Button Link
   ═══════════════════════════════════ */
.btn-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  padding: var(--space-md) var(--space-2xl);
  background-color: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.btn-link:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-bg);
}

.btn-link:visited,
.btn-link:active {
  color: var(--color-bg);
}

.btn-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Tighten horizontal padding on narrow viewports so labels keep to one line. */
@media (max-width: 480px) {
  .btn,
  .btn-link {
    padding-inline: var(--space-lg);
  }
}

/* Modifier — secondary button: outlined, beside a primary .btn-link. */
.btn-link--secondary,
.btn-link--secondary:visited,
.btn-link--secondary:active {
  background-color: transparent;
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.btn-link--secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* Modifier — button with leading inline icon (e.g. WhatsApp).
   Icon stays subordinate to the label: 0.85em with a tight gap so the
   button reads as text-first, with the glyph as a quiet accent. */
.btn-link--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.btn-link--icon svg {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  opacity: 0.92;
}

/* ═══════════════════════════════════
   Breadcrumb Navigation
   ═══════════════════════════════════ */
.breadcrumb {
  margin-bottom: var(--space-lg);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-mid);
}

.breadcrumb li::after {
  content: '\203A';
  margin-inline: 0.5em;
  color: var(--color-rule);
}

.breadcrumb li:last-child::after {
  display: none;
}

.breadcrumb a {
  color: var(--color-text-mid);
  text-decoration: none;
  display: inline-block;
  padding-block: 0.3em;
  margin-block: -0.3em;
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

/* ═══════════════════════════════════
   Sticky Mobile CTA Bar
   ═══════════════════════════════════ */
.mobile-cta {
  display: none;
}

@media (max-width: 1080px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-rule);
    padding: var(--space-sm) var(--space-lg);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    gap: var(--space-sm);
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }

  .mobile-cta.is-hidden {
    transform: translateY(100%);
    pointer-events: none;
  }

  .mobile-cta a {
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    padding: var(--space-sm) var(--space-sm);
    text-align: center;
    flex: 1;
  }

  .mobile-cta .mobile-cta-enquire,
  .mobile-cta .mobile-cta-enquire:visited,
  .mobile-cta .mobile-cta-enquire:active {
    background-color: var(--color-accent);
    color: var(--color-bg);
  }

  .mobile-cta .mobile-cta-enquire:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-bg);
  }

  .mobile-cta .mobile-cta-whatsapp,
  .mobile-cta .mobile-cta-whatsapp:visited,
  .mobile-cta .mobile-cta-whatsapp:active {
    border: 1px solid var(--color-rule);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
  }

  .mobile-cta .mobile-cta-whatsapp:hover {
    border-color: var(--color-accent);
  }

  .mobile-cta .mobile-cta-whatsapp svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  /* Prevent content from being hidden behind the sticky bar */
  .site-footer {
    padding-bottom: calc(var(--space-4xl) + 3.5rem);
  }
}

/* ═══════════════════════════════════
   H1 Sub-heading
   ═══════════════════════════════════ */
.h1-sub {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  margin-top: var(--space-sm);
}

/* ═══════════════════════════════════
   Hero Banner Layout
   ═══════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-areas:
    "crumb crumb"
    "head  video"
    "offer video"
    "body  video";
  /* The offer row is empty (zero height) on pages without a .hero-offer. */
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--space-3xl);
  align-items: start;
}

.hero > .breadcrumb {
  grid-area: crumb;
}

.hero > h1 {
  grid-area: head;
}

.hero-text {
  grid-area: body;
}

/* Landing-page offer under the h1: the facts and the buttons a visitor needs
   on the first screen. On phones it sits above the film. */
.hero-offer {
  grid-area: offer;
  margin-bottom: var(--space-xl);
}

.hero-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.hero-facts li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--space-xs);
  line-height: 1.45;
}

.hero-facts li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 0.9em;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.hero-video {
  grid-area: video;
  position: sticky;
  top: var(--space-2xl);
  /* Top edge level with the h1's capitals: at the h1's line-height
     (var(--leading-tight)), Cormorant Garamond's cap top sits 0.28 of the
     font size below the top of its line box. Change either and re-measure. */
  margin-top: calc(var(--text-display) * 0.28);
}

.video-caption {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-mid);
}

/* ── Responsive Video Embed ── */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A plain circle in the corner, clear of any title burned into the film. */
.play-btn {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  width: 3.5rem;
  height: 3.5rem;
  overflow: visible;
}

.play-btn circle {
  fill: rgba(28, 22, 20, 0.45);
  stroke: var(--color-bg);
  stroke-width: 1.5;
  transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.play-btn path {
  fill: var(--color-bg);
}

.video-thumb:hover .play-btn circle,
.video-thumb:focus-visible .play-btn circle {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

@media (max-width: 599px) {
  .play-btn {
    left: var(--space-sm);
    bottom: var(--space-sm);
    width: 3rem;
    height: 3rem;
  }
}

/* .video-embed clips overflow, so the global outline (drawn outside) is
   invisible here: draw the focus ring inside the thumbnail instead. */
.video-thumb:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 3px var(--color-accent);
}

/* The playing film (js/video.js) is taller than its 16:9 frame, which
   clips it: YouTube letterboxes the picture to the full width, so the frame
   shows all of it, while the title bar drawn at the player's top and the
   logo and "Watch on YouTube" bar at its bottom land outside the frame. */
.video-embed iframe.video-frame {
  top: -5rem;
  height: calc(100% + 10rem);
}

/* Laid over a playing film (js/video.js) so YouTube's hover controls never
   show. It shows the thumbnail until the film is playing (is-loading) and
   again when paused, covering YouTube's loading and pause screens. */
.video-shield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.video-shield img,
.video-shield .play-btn {
  display: none;
}

.video-shield.is-loading img,
.video-shield.is-paused img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-shield.is-paused .play-btn {
  display: block;
}

.video-shield:hover .play-btn circle,
.video-shield:focus-visible .play-btn circle {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.video-shield:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 3px var(--color-accent);
}

/* Full screen button inside a playing film (js/video.js): the player runs
   without YouTube's own controls, so this is the keyboard route to it. */
.video-fs {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  min-width: 24px;
  min-height: 32px;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.video-fs:hover {
  background: rgba(0, 0, 0, 0.9);
}

.video-fs:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Phones and portrait tablets: the film comes straight after the heading. */
@media (max-width: 805px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "crumb"
      "head"
      "offer"
      "video"
      "body";
    grid-template-rows: none;
  }

  .hero-video {
    position: static;
    margin-top: 0;
    margin-bottom: var(--space-xl);
  }

  /* Listen pages: the visitor came to hear the singers, so the film comes
     before the lede and the buttons. */
  .hero--film-first {
    grid-template-areas:
      "crumb"
      "head"
      "video"
      "offer"
      "body";
  }
}

/* ═══════════════════════════════════
   Guide Index — Filter Chips
   ═══════════════════════════════════ */
.filter-bar {
  margin-block: var(--space-xl) var(--space-2xl);
}

.filter-bar-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-mid);
  margin-bottom: var(--space-md);
  display: block;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-chips li {
  margin: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-rule);
  background-color: transparent;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-chip[aria-current="page"] {
  background-color: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.filter-chip[aria-current="page"]:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-bg);
}

/* ═══════════════════════════════════
   Guide Index — Start Here Card
   ═══════════════════════════════════ */
.start-here {
  position: relative;
  padding: var(--space-xl);
  background-color: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  margin-block: var(--space-xl) var(--space-2xl);
}

.start-here__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.start-here h2 {
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.start-here h2 a {
  color: var(--color-text);
  text-decoration: none;
}

.start-here h2 a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.start-here:hover h2 a {
  color: var(--color-accent);
}

.start-here p {
  color: var(--color-text-mid);
  margin-bottom: 0;
}

.start-here__cta {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
}

/* Three film stills in a start-here card (listen.html's Christmas card).
   Decorative: the card's heading link carries the destination. */
.start-here__films {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.start-here__films img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ═══════════════════════════════════
   Guide Index — Card Grid
   ═══════════════════════════════════ */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3xl);
}

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

.guide-card {
  position: relative;
  padding: var(--space-xl);
  background-color: var(--color-bg-alt);
  border: 1px solid transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  margin: 0;
}

.guide-card:hover {
  border-color: var(--color-accent);
}

.guide-card h3 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.guide-card h3 a {
  color: var(--color-text);
  text-decoration: none;
}

.guide-card h3 a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.guide-card:hover h3 a {
  color: var(--color-accent);
}

.guide-card p {
  color: var(--color-text-mid);
  margin-bottom: var(--space-md);
}

.guide-card__cta {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
}

/* Anchor card — full width, slightly different background */
.guide-card--anchor {
  grid-column: 1 / -1;
  background-color: var(--color-bg);
  border: 1px solid var(--color-rule);
}

.guide-card--anchor h3 {
  font-size: var(--text-xl);
}

/* ═══════════════════════════════════
   Guide Index — Category Section
   ═══════════════════════════════════ */
.guide-category-section {
  margin-block: var(--space-3xl);
}

.guide-category-section:first-of-type {
  margin-top: var(--space-xl);
}

.guide-category-section h2 {
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-md);
}

.guide-category-section .category-rule {
  border: none;
  border-top: 2px solid var(--color-accent);
  width: 3rem;
  margin: 0 0 var(--space-xl) 0;
}

/* Hidden state via JS or no-JS fallback */
.guide-category-section[hidden] {
  display: none;
}

/* ═══════════════════════════════════
   Nav Dropdown (Music Guides)
   ═══════════════════════════════════ */
.has-dropdown {
  position: relative;
}

/* Two borders of a 0.4em box, rotated. The lift raises the closed chevron to
   the middle of the capitals. Open, the stroke is the box's top half, so the
   open rule adds back half the diagonal (0.28em) to keep it in the same place. */
.dropdown-caret {
  --caret-lift: -0.3em;
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.3em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(var(--caret-lift)) rotate(45deg);
  transition: transform var(--transition-fast);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  /* Items are padded --space-lg inside a 1px border: pull the menu left so
     their text starts under the trigger's first letter. */
  left: calc(-1 * (var(--space-lg) + 1px));
  min-width: 12rem;
  list-style: none;
  padding: var(--space-sm) 0;
  margin: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-rule);
  z-index: 150;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background-color: var(--color-bg-alt);
  color: var(--color-accent);
  outline: none;
}

.dropdown-menu a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.dropdown-separator {
  height: 1px;
  background-color: var(--color-rule);
  margin: var(--space-sm) var(--space-md);
}

/* Open on hover / keyboard focus / explicit aria-expanded */
.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu,
.has-dropdown[data-open="true"] > .dropdown-menu {
  display: block;
}

.has-dropdown:hover > .dropdown-trigger .dropdown-caret,
.has-dropdown:focus-within > .dropdown-trigger .dropdown-caret,
.has-dropdown[data-open="true"] > .dropdown-trigger .dropdown-caret {
  transform: translateY(calc(var(--caret-lift) + 0.28em)) rotate(225deg);
}

/* ESC dismisses a desktop dropdown even while hover/focus is still inside (nav.js) */
.has-dropdown[data-dismissed] > .dropdown-menu {
  display: none;
}

.has-dropdown[data-dismissed] > .dropdown-trigger .dropdown-caret {
  transform: translateY(var(--caret-lift)) rotate(45deg);
}

/* Mobile: dropdown becomes an inline expandable block inside the hamburger */
@media (max-width: 1080px) {
  .dropdown-menu {
    display: none;
    position: static;
    border: none;
    border-top: 1px solid var(--color-rule);
    padding: 0;
    background: transparent;
  }

  .has-dropdown[data-open="true"] > .dropdown-menu {
    display: block;
  }

  /* Disable hover-open on touch devices — only the explicit toggle opens it */
  .has-dropdown:hover > .dropdown-menu,
  .has-dropdown:focus-within > .dropdown-menu {
    display: none;
  }

  .has-dropdown[data-open="true"] > .dropdown-menu {
    display: block;
  }

  .dropdown-menu a {
    padding-left: var(--space-2xl);
    text-transform: none;
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-rule);
  }

  .dropdown-menu li:last-child a {
    border-bottom: none;
  }

  .dropdown-separator {
    display: none;
  }
}

/* ═══════════════════════════════════
   Pull Quote — Marquee Variant
   (services.html hero treatment)
   ═══════════════════════════════════ */
.pull-quote--marquee {
  margin-block: 0 var(--space-2xl);
  max-width: 30rem;
}

.pull-quote--marquee p {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.pull-quote--marquee::before {
  font-size: 8rem;
  top: -0.3em;
  left: -0.08em;
  opacity: 0.18;
}

.pull-quote--marquee figcaption {
  margin-top: var(--space-lg);
}

.services-hero {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

.services-hero .pull-quote--marquee {
  margin-block: 0;
}

/* Two columns: the quote rides alongside the text. In the single-column
   layout it must stay static, or it sticks over the text scrolling up. */
@media (min-width: 52rem) {
  .services-hero {
    grid-template-columns: 1fr 1.4fr;
  }

  .services-hero .pull-quote--marquee {
    position: sticky;
    top: var(--space-2xl);
  }
}

/* ═══════════════════════════════════
   Occasion List (services.html hub)
   ═══════════════════════════════════ */
.occasion-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-2xl);
}

.occasion-list li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: var(--space-2xl);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  margin: 0;
}

.occasion-list li:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.occasion-list h3 {
  font-size: var(--text-xl);
  font-weight: 400;
  margin: 0;
}

.occasion-list p {
  color: var(--color-text-mid);
  margin-bottom: var(--space-md);
}

.occasion-list .occasion-cta {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-accent);
  text-decoration: none;
}

.occasion-list .occasion-cta:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .occasion-list li {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ═══════════════════════════════════
   Ensemble Grid (services.html)
   ═══════════════════════════════════ */
.ensemble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 var(--space-2xl);
}

.ensemble-grid li {
  margin: 0;
}

@media (max-width: 899px) {
  .ensemble-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.ensemble-card {
  padding: var(--space-xl);
  background-color: var(--color-bg-alt);
  border: 1px solid transparent;
  transition: border-color var(--transition-fast);
  height: 100%;
}

.ensemble-card:hover {
  border-color: var(--color-accent);
}

.ensemble-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.ensemble-card .voices {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
}

.ensemble-card p {
  color: var(--color-text-mid);
  margin-bottom: 0;
}
/* ═══════════════════════════════════
   Pricing Cards
   ═══════════════════════════════════ */
.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: var(--space-xl) 0 var(--space-lg);
}

.price-card {
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-bg-alt);
  border: 1px solid transparent;
  text-align: center;
  transition: border-color var(--transition-fast);
}

.price-card:hover {
  border-color: var(--color-accent);
}

.price-card .price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.price-card .price-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  margin-top: var(--space-xs);
  letter-spacing: 0.02em;
}

@media (max-width: 899px) {
  .price-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .price-cards {
    grid-template-columns: 1fr;
  }
}

/* ── Value block: "Included with every booking" ───────────────────── */
.included-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.included-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding-block: var(--space-sm);
  border-block-end: 1px solid var(--color-rule);
}
.included-list li:last-child {
  border-block-end: 0;
}
.included-list .tick {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-accent);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  margin-block-start: 0.15rem;
}
.included-price {
  margin-block-start: var(--space-lg);
  color: var(--color-text-mid);
}
.included-price strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-accent);
}

/* ── "How it works" numbered steps (service pages) ── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-lg);
  margin-block: var(--space-lg);
}
.step-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2rem;
  font-variant-numeric: lining-nums; /* Cormorant's old-style 1 reads as a roman I */
  line-height: 1;
  color: var(--color-accent);
}
.step h3 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-block: var(--space-xs);
}
.step p {
  margin: 0;
  color: var(--color-text-mid);
}

/* ── Care strip: "We take the whole thing off your hands" ──────────── */
.care-steps {
  list-style: none;
  padding: 0;
  margin-block: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.care-steps .n {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2rem;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--color-accent);
}
.care-steps h3 {
  font-size: 1.15rem;
  margin-block: var(--space-xs) var(--space-xs);
}
.care-steps p {
  margin: 0;
  color: var(--color-text-mid);
}
@media (max-width: 599px) {
  .care-steps {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════
   Guide link lists (service pages)
   ═══════════════════════════════════ */
.guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ═══════════════════════════════════
   Cookie consent sheet (js/consent.js)
   A full-width sheet at the foot of the window. It never covers the page
   with an overlay or locks scrolling. Accept and Reject share one style.
   The same rules sit in partials/private-register.css.html for the
   private-register pages, so the variables fall back to that palette.
   While open it covers the mobile CTA bar (z-index 1000 against 200), so
   the two never stack; js/consent.js pads the page by its height.
   ═══════════════════════════════════ */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  background-color: var(--color-bg-alt, var(--parchmentLight, #EDE8E1));
  color: var(--color-text, var(--choirStall, #2C2420));
  border-top: 1px solid var(--color-rule, var(--limestone, #D6CEC6));
  box-shadow: 0 -6px 24px rgba(44, 36, 32, 0.1);
  font-family: var(--font-body, 'Source Serif 4', Georgia, serif);
  font-size: 1rem;
  line-height: 1.45;
  animation: consent-in 0.25s ease-out;
}

@keyframes consent-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    animation: none;
  }
}

.consent[hidden] {
  display: none;
}

.consent:focus {
  outline: none;
}

.consent:focus-visible {
  outline: 2px solid var(--color-text, var(--choirStall, #2C2420));
  outline-offset: -4px;
}

.consent__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 0.75rem 2.5rem;
}

.consent__text {
  flex: 1 1 auto;
  max-width: 44rem;
  margin: 0;
}

.consent__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

.consent__actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.consent__btn {
  min-width: 8rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-heading, var(--font-display, 'Cormorant Garamond', Georgia, serif));
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--color-bg, var(--parchment, #F7F3EE));
  background-color: var(--color-text, var(--choirStall, #2C2420));
  border: 1px solid var(--color-text, var(--choirStall, #2C2420));
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.consent__btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.consent__btn:focus-visible {
  outline: 2px solid var(--color-text, var(--choirStall, #2C2420));
  outline-offset: 3px;
}

/* Reopened from "Cookie choices": the current answer is marked the same way
   on either button. */
.consent__btn[aria-pressed="true"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 760px) {
  .consent {
    font-size: 0.9375rem;
  }
  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  .consent__text {
    max-width: none;
  }
  .consent__actions {
    margin-left: 0;
  }
  .consent__btn {
    min-width: 0;
  }
}

/* The open mobile menu reaches the foot of the screen; the sheet steps aside
   until it closes. */
body:has(#nav-menu.is-open) .consent {
  display: none;
}

@media print {
  .consent {
    display: none !important;
  }
}

/* ── Press stills (facts.html, private-events.html) ── */
.press-figure {
  margin: var(--space-md) 0;
}

.press-figure figcaption {
  margin-block-start: var(--space-xs);
}
/* ═══════════════════════════════════
   Print Styles
   ═══════════════════════════════════ */
@media print {
  :root {
    --color-bg: #fff;
    --color-text: #000;
    --color-text-mid: #333;
    --color-accent: #000;
    --color-rule: #ccc;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
    background: #fff;
    color: #000;
  }

  .site-header,
  .nav-toggle,
  .skip-link,
  .contact-form,
  .btn,
  .video-embed,
  .video-caption,
  .mobile-cta {
    display: none !important;
  }

  .section {
    padding-block: 1.5em;
    break-inside: avoid;
  }

  .prose,
  .wide,
  .page-wrap {
    max-width: none;
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  a[href^="mailto"]::after,
  a[href^="tel"]::after {
    content: none;
  }

  .pull-quote {
    border-left: 3px solid #000;
    padding-left: 1em;
    margin-left: 0;
  }

  .pull-quote::before {
    display: none;
  }

  .site-footer {
    border-top: 1px solid #ccc;
    padding-top: 1em;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  img {
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════
   Printable order-of-service sheets
   (music-guides/wedding-order-of-service-music.html,
    music-guides/funeral-order-of-service-music.html)
   ═══════════════════════════════════ */
.oos-list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  counter-reset: oos;
}

.oos-item {
  counter-increment: oos;
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-rule);
}

.oos-item h3 {
  margin-block: 0 var(--space-xs);
}

.oos-sheet > h3 {
  margin-block: var(--space-xl) 0;
}

.oos-list + h2 {
  margin-block-start: var(--space-2xl);
}

.oos-item h3::before {
  content: counter(oos) ". ";
  color: var(--color-text-mid);
}

.oos-item p {
  margin-block: 0 var(--space-xs);
}

.oos-when {
  font-size: var(--text-sm);
  color: var(--color-text-mid);
}

.oos-blank {
  display: flex;
  align-items: flex-end;
  min-height: 2.75em;
  margin-block: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-text-mid);
  font-size: var(--text-sm);
  color: var(--color-text-mid);
}

/* a ruled box for notes: four writing lines */
.oos-notes {
  min-height: 9em;
  margin-block: var(--space-sm) 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2.25em - 1px),
    var(--color-rule) calc(2.25em - 1px),
    var(--color-rule) 2.25em
  );
}

.print-only {
  display: none;
}

@media print {
  body:has(.oos-sheet) .site-footer,
  body:has(.oos-sheet) .breadcrumb,
  body:has(.oos-sheet) .related-guides,
  body:has(.oos-sheet) .no-print {
    display: none !important;
  }

  body:has(.oos-sheet) .print-only {
    display: block;
  }

  body:has(.oos-sheet) .section {
    padding-block: 0.5em;
    break-inside: auto;
  }

  .oos-sheet a[href^="http"]::after {
    content: none;
  }

  .oos-item {
    padding-block: 0.5em;
    break-inside: avoid;
    border-top-color: #999;
  }

  .oos-blank {
    min-height: 2.25em;
    border-bottom-color: #000;
    color: #333;
  }

  .oos-notes {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page {
    margin: 15mm;
  }
}