/* ==========================================================================
   Andy Porter, Psychic Surgeon
   Design system. Every layout primitive here maps to a native Elementor
   widget or a flex container. No CSS grid anywhere.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:        #0B0B10;   /* primary dark ground */
  --ink-2:      #14141C;   /* raised panels on dark */
  --ink-3:      #1D1D28;   /* cards, borders on dark */
  --ink-line:   #2B2B38;

  /* Brand colours, taken from the logo.
     GOLD is the accent on dark grounds. PURPLE is the accent on light grounds.
     They are not interchangeable - see the two rules below. */
  --gold:       #d7ae41;   /* logo gold. On ink: 9.3:1, safe for text */
  --gold-soft:  #e6cd8a;   /* headings + links on ink: 12.6:1 */
  --gold-deep:  #b8912f;   /* hover on dark */
  --purple:     #673c9c;   /* logo purple. On parchment: 6.9:1, safe for text */
  --purple-deep:#4E2E77;   /* hover on light: 9.5:1 */
  --teal:       #2e788d;   /* logo teal. On parchment: 4.5:1. NOT safe on ink (3.9:1) */

  /* RULE 1 - never gold text on parchment. #d7ae41 on #F5F2EA is 1.9:1,
     a bad WCAG failure. Use --purple on light grounds.
     RULE 2 - never purple text on ink. #673c9c on #0B0B10 is 2.6:1.
     Purple on dark is only ever a filled background with white text (7.7:1).
     RULE 3 - teal is a light-ground colour only. #2e788d on parchment is
     4.5:1 and fine; on ink it is 3.9:1 and fails. As a filled ground with
     white text it measures 5.1:1 and is safe anywhere. */

  --parchment:  #F5F2EA;   /* long-form reading ground */
  --parchment-2:#EBE6DA;   /* alternating band on light */
  --paper-line: #DCD5C4;

  --on-dark:      #C6C3BC; /* body copy on ink */
  --on-dark-head: #F2EFE8; /* headings on ink */
  --on-light:     #3A3730; /* body copy on parchment */
  --on-light-head:#1A1814; /* headings on parchment */

  --font-head: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --wrap-narrow: 760px;   /* reading measure for long-form */
  --pad-y: 6.5rem;
  --radius: 10px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--on-dark-head);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .75rem;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.13rem; }
p  { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.lede { font-size: 1.18rem; line-height: 1.7; }
.muted { opacity: .82; }
.center { text-align: center; }
.center .row { justify-content: center; }
.mw { max-width: 720px; }
.center .mw { margin-left: auto; margin-right: auto; }

/* --- Sections and containers -------------------------------------------- */
/* Elementor: Container (boxed), padding 6.5rem top/bottom */
.section { padding: var(--pad-y) 0; position: relative; }
.section-sm { padding: 3.6rem 0; }
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--wrap-narrow); }

.sec-ink       { background: var(--ink); }
.sec-raised    { background: var(--ink-2); }
.sec-parchment { background: var(--parchment); color: var(--on-light); }
.sec-parchment h1, .sec-parchment h2, .sec-parchment h3,
.sec-parchment h4, .sec-parchment h5 { color: var(--on-light-head); }
.sec-parchment .eyebrow { color: var(--purple); }
.sec-parchment a { color: var(--purple); }
.sec-parchment a:hover { color: var(--purple-deep); }
.sec-parchment-2 { background: var(--parchment-2); color: var(--on-light); }
.sec-parchment-2 h1, .sec-parchment-2 h2, .sec-parchment-2 h3,
.sec-parchment-2 h4 { color: var(--on-light-head); }
.sec-parchment-2 .eyebrow { color: var(--purple); }
.sec-parchment-2 a { color: var(--purple); }

/* A hairline rule between two dark sections */
.sec-topline { border-top: 1px solid var(--ink-line); }

/* --- Flower of life motif ------------------------------------------------ */
/* Elementor: Container background image, position centre, no-repeat */
.geo { position: relative; overflow: hidden; }
.geo::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(980px, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../images/flower-of-life.svg") center/contain no-repeat;
  opacity: .17;
  pointer-events: none;
}
.geo > * { position: relative; z-index: 1; }
.geo-top::before { top: 8%; }
/* Raised from .07 to .17 on 16 Sep 2026 so the motif reads clearly on page
   heads and dark sections. The hero carries the full emblem as its own
   layer, so its line drawing stays at the original faint level. */
.hero.geo::before { opacity: .07; }

/* --- Rows and columns ---------------------------------------------------- */
/* Elementor: Container → Flex → Row → Wrap, children at 50 / 33 / 25% */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  align-items: stretch;
}
.row > * { flex: 1 1 100%; min-width: 0; }
.col-2 > * { flex-basis: calc(50% - 1.1rem); }
.col-3 > * { flex-basis: calc(33.333% - 1.47rem); }
.col-4 > * { flex-basis: calc(25% - 1.65rem); }
.row-tight { gap: 1.2rem; }
.row-tight.col-3 > * { flex-basis: calc(33.333% - .8rem); }
.row-middle { align-items: center; }

/* Elementor: two child containers at 56% / 38% */
.split { display: flex; flex-wrap: wrap; gap: 3.4rem; align-items: center; }
.split > * { flex: 1 1 100%; min-width: 0; }
.split-60 > *:first-child { flex-basis: 56%; }
.split-60 > *:last-child  { flex-basis: calc(44% - 3.4rem); }
.split-40 > *:first-child { flex-basis: calc(44% - 3.4rem); }
.split-40 > *:last-child  { flex-basis: 56%; }
.split-even > * { flex-basis: calc(50% - 1.7rem); }
.split-top { align-items: flex-start; }

/* --- Buttons ------------------------------------------------------------- */
/* Elementor: Button widget */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.9rem;
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--gold-soft); }
.btn-ghost:hover { background: rgba(215,174,65,.14); color: var(--gold-soft); }
.sec-parchment .btn-ghost, .sec-parchment-2 .btn-ghost { border-color: var(--purple); color: var(--purple); }
.sec-parchment .btn-ghost:hover, .sec-parchment-2 .btn-ghost:hover { background: rgba(103,60,156,.1); color: var(--purple-deep); }
.btn-lg { padding: 1.1rem 2.4rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: .9rem; }
.center .btn-group { justify-content: center; }

/* --- Cards --------------------------------------------------------------- */
/* Elementor: Container with border, radius 10px, padding 2.2rem */
.card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card-pad-sm { padding: 1.6rem; }
.sec-parchment .card, .sec-parchment-2 .card {
  background: #FFFDF8;
  border-color: var(--paper-line);
}
.card-media { padding: 0; overflow: hidden; }
.card-media img { border-radius: var(--radius) var(--radius) 0 0; width: 100%; }
.card-media .card-body { padding: 1.7rem; }
.card-gold { border-color: var(--gold); }

/* --- Icon boxes ---------------------------------------------------------- */
/* Elementor: Icon Box widget */
.icon-box { display: flex; flex-direction: column; gap: .1rem; }
.icon-box .ico {
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  flex: 0 0 auto;
}
.icon-box .ico svg { width: 22px; height: 22px; }
.sec-parchment .icon-box .ico, .sec-parchment-2 .icon-box .ico { border-color: var(--purple); color: var(--purple); }
.icon-box h3, .icon-box h4 { margin-bottom: .35rem; }
.icon-box p { font-size: .97rem; margin-bottom: 0; }

/* Horizontal variant */
.icon-row { display: flex; gap: 1.1rem; align-items: flex-start; }
.icon-row .ico { margin-bottom: 0; }

/* --- Numbered steps ------------------------------------------------------ */
/* Elementor: Icon Box, or Heading + Text */
.step { display: flex; gap: 1.3rem; align-items: flex-start; }
.step-num {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
}
.step h3 { margin-bottom: .3rem; }
.step p { margin-bottom: 0; }

/* --- Tick list ----------------------------------------------------------- */
/* Elementor: Icon List with a tick icon */
.check { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.check li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .62rem;
}
.check li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.sec-parchment .check li::before, .sec-parchment-2 .check li::before { border-color: var(--purple); }
.check-lg li { margin-bottom: .95rem; }

/* --- Testimonials -------------------------------------------------------- */
/* Elementor: Testimonial widget */
.quote {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 2rem 2.1rem;
  display: flex;
  flex-direction: column;
}
.sec-parchment .quote, .sec-parchment-2 .quote {
  background: #FFFDF8;
  border-color: var(--paper-line);
  border-left-color: var(--purple);
}
.quote blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--font-head);
  font-size: 1.16rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--on-dark-head);
}
.sec-parchment .quote blockquote, .sec-parchment-2 .quote blockquote { color: var(--on-light-head); }
.quote cite {
  font-style: normal;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  margin-top: auto;
}
.quote cite span { display: block; font-weight: 400; opacity: .75; letter-spacing: 0; }

/* Elementor: Star Rating widget */
.stars { display: flex; gap: .18rem; margin-bottom: .9rem; color: var(--gold); }
.sec-parchment .stars, .sec-parchment-2 .stars { color: var(--purple); }
.stars svg { width: 16px; height: 16px; }

/* --- Price tables -------------------------------------------------------- */
/* Elementor: Price Table widget */
.price {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 2.1rem;
  display: flex;
  flex-direction: column;
}
.price.featured { border-color: var(--gold); }
.price .price-tag {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin: .5rem 0 .3rem;
}
.sec-parchment .price { background: #FFFDF8; border-color: var(--paper-line); }
.sec-parchment .price .price-tag { color: var(--purple); }
.price .price-note { font-size: .88rem; opacity: .75; margin-bottom: 1.3rem; }
.price .btn { margin-top: auto; }
.price .check { margin-bottom: 1.5rem; }
.badge {
  display: inline-block;
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  margin-bottom: .8rem;
}

/* --- Accordion ----------------------------------------------------------- */
/* Elementor: Accordion widget */
.accordion { border-top: 1px solid var(--ink-line); }
.sec-parchment .accordion, .sec-parchment-2 .accordion { border-color: var(--paper-line); }
.accordion details { border-bottom: 1px solid var(--ink-line); }
.sec-parchment .accordion details, .sec-parchment-2 .accordion details { border-color: var(--paper-line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--on-dark-head);
}
.sec-parchment .accordion summary, .sec-parchment-2 .accordion summary { color: var(--on-light-head); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  position: absolute;
  right: .4rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.sec-parchment .accordion summary::after, .sec-parchment-2 .accordion summary::after { border-color: var(--purple); }
.accordion details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.accordion .acc-body { padding: 0 0 1.5rem; }
.accordion .acc-body p:last-child { margin-bottom: 0; }

/* --- Media --------------------------------------------------------------- */
.media img { border-radius: var(--radius); width: 100%; }
.media-round img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
/* Elementor: Image widget + box-shadow */
.media-offset img { border-radius: var(--radius); box-shadow: 16px 16px 0 rgba(215,174,65,.9); }
.media-frame img { border-radius: var(--radius); border: 1px solid var(--ink-3); }
.sec-parchment .media-frame img { border-color: var(--paper-line); }
.media-tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.media-wide img { aspect-ratio: 16 / 10; object-fit: cover; }
.figcap { font-size: .84rem; opacity: .7; margin-top: .6rem; }

/* Elementor: Image Gallery widget */
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; }
.gallery > * { flex: 1 1 calc(33.333% - .67rem); min-width: 0; }
.gallery img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; width: 100%; }

/* --- Stats --------------------------------------------------------------- */
/* Elementor: Counter widget */
.stat { text-align: center; }
.stat .stat-num {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}
.sec-parchment .stat .stat-num, .sec-parchment-2 .stat .stat-num { color: var(--purple); }
.stat .stat-label { font-size: .93rem; opacity: .85; }

/* --- Long-form article --------------------------------------------------- */
.prose { max-width: var(--wrap-narrow); margin: 0 auto; }
.prose h2 { margin-top: 2.8rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.prose h3 { margin-top: 2rem; }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose figure { margin: 2.2rem 0; }
.prose blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--purple);
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--on-light-head);
}

/* --- Notice / disclaimer ------------------------------------------------- */
.notice {
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  background: rgba(215,174,65,.05);
  font-size: .97rem;
}
.sec-parchment .notice, .sec-parchment-2 .notice {
  border-color: var(--paper-line);
  border-left-color: var(--purple);
  background: rgba(103,60,156,.05);
}
.notice strong { color: var(--on-dark-head); }
.sec-parchment .notice strong, .sec-parchment-2 .notice strong { color: var(--on-light-head); }

/* --- Header -------------------------------------------------------------- */
/* Elementor: Header template + Nav Menu widget */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,11,16,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand img { width: 38px; height: 38px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--on-dark-head);
  letter-spacing: -0.01em;
}
.brand-tag {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  display: inline-block;
  padding: .55rem .72rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
}
.nav a:hover { color: var(--gold-soft); background: rgba(215,174,65,.09); }
.nav a[aria-current="page"] { color: var(--gold); }
.header-cta { flex: 0 0 auto; }
.header-cta .btn { padding: .68rem 1.35rem; font-size: .88rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  color: var(--on-dark-head);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 76px 0 0;
  background: var(--ink);
  z-index: 99;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 3rem;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: .95rem .2rem;
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--on-dark-head);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-line);
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--gold); }
.mobile-nav .btn { margin-top: 1.6rem; }
body.nav-open { overflow: hidden; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 6rem 0 5.5rem;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-flower-of-life.webp");
  background-repeat: no-repeat;
  background-position: center 22%;
  background-size: cover;
  opacity: .85;
}
/* Brightened 16 Sep 2026. This layer used to be the whole logo on a white
   ground at 30%, under a scrim of 72 to 100%, so only 4 to 8% of it came
   through and the white read as a grey haze. hero-flower-of-life.webp is
   the same emblem cut out onto transparency with the wordmark removed, so
   it can run much brighter. The scrim now has two layers. The first darkens
   the text column (the boxed 1180px container starts at 50% minus 590px)
   and eases off to the right, where there is no copy. The second fades the
   whole layer to ink at the foot so the hero meets the next section cleanly. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(11,11,16,.25) 0,
      rgba(11,11,16,.45) calc(50% - 590px),
      rgba(11,11,16,.38) calc(50% - 110px),
      rgba(11,11,16,.18) calc(50% + 110px),
      rgba(11,11,16,0) calc(50% + 310px)),
    linear-gradient(180deg,
      rgba(11,11,16,.30) 0%,
      rgba(11,11,16,.38) 40%,
      rgba(11,11,16,.55) 65%,
      rgba(11,11,16,.85) 88%,
      var(--ink) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 1.2rem; }
.hero .lede { max-width: 620px; }
.hero-credit {
  margin: 1.6rem 0 1.8rem;
  font-size: .92rem;
  opacity: .8;
  max-width: 620px;
}
/* A soft ink halo behind the hero copy. It disappears over the dark parts
   of the emblem and only shows where a line of text crosses the glowing
   figure, which keeps the smaller type readable now the layer is brighter.
   The buttons have their own grounds, so they are left alone. */
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .hero-credit {
  text-shadow:
    0 0 1px rgba(11,11,16,.85),
    0 1px 3px rgba(11,11,16,.8),
    0 0 12px rgba(11,11,16,.7),
    0 0 28px rgba(11,11,16,.55);
}
/* On a phone the copy runs the full width, straight across the figure, so
   the layer steps back a little and the scrim is even from side to side. */
@media (max-width: 700px) {
  .hero-bg { opacity: .7; }
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(11,11,16,.42) 0%,
      rgba(11,11,16,.50) 45%,
      rgba(11,11,16,.68) 75%,
      var(--ink) 100%);
  }
}

/* Page header for inner pages */
.page-head { padding: 4.5rem 0 3.4rem; background: var(--ink-2); border-bottom: 1px solid var(--ink-line); }
.page-head h1 { margin-bottom: .9rem; }
.page-head .lede { max-width: 660px; }

/* --- Breadcrumb ---------------------------------------------------------- */
.crumb { font-size: .85rem; opacity: .75; margin-bottom: 1rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span { padding: 0 .45rem; }

/* --- CTA band ------------------------------------------------------------ */
/* Elementor: save this as a global section: it repeats on every page */
.cta-band { background: var(--ink-2); border-top: 1px solid var(--ink-line); }
.cta-band h2 { margin-bottom: 1rem; }

/* --- Footer -------------------------------------------------------------- */
/* Elementor: Footer template */
.site-footer {
  background: #07070B;
  border-top: 1px solid var(--ink-line);
  padding: 4rem 0 2rem;
  font-size: .93rem;
}
.footer-cols { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.footer-cols > * { flex: 1 1 100%; min-width: 0; }
.footer-brand { flex-basis: 30%; }
.footer-col { flex-basis: calc(23.333% - 2.5rem); }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); text-decoration: underline; }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .85rem;
  opacity: .8;
}
.footer-legal { max-width: 680px; font-size: .82rem; opacity: .75; margin-top: 1.6rem; line-height: 1.65; }
.social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  color: var(--on-dark);
}
.social a:hover { border-color: var(--gold); color: var(--gold); }
.social svg { width: 17px; height: 17px; }

/* --- Forms --------------------------------------------------------------- */
/* Elementor: Form widget */
.form-card { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--radius); padding: 2.2rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .42rem; color: var(--on-dark-head); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem .95rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-dark-head);
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 8px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.field textarea { min-height: 145px; resize: vertical; }
.field-hint { font-size: .84rem; opacity: .72; margin-top: .35rem; }

/* --- Utilities ----------------------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.divider { height: 1px; background: var(--ink-line); border: 0; margin: 3rem 0; }
.sec-parchment .divider { background: var(--paper-line); }
.skip-link {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--ink);
  padding: .8rem 1.2rem; font-weight: 700; z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Responsive ---------------------------------------------------------- */
/* Elementor: set tablet + mobile widths on every container */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
}
@media (max-width: 980px) {
  :root { --pad-y: 4.4rem; }
  .col-3 > *, .col-4 > * { flex-basis: calc(50% - 1.1rem); }
  .row-tight.col-3 > * { flex-basis: calc(50% - .6rem); }
  .split { gap: 2.4rem; }
  .split-60 > *:first-child, .split-60 > *:last-child,
  .split-40 > *:first-child, .split-40 > *:last-child,
  .split-even > * { flex-basis: 100%; }
  .split-40 > *:first-child { order: 2; }
  .split-40 > *:last-child { order: 1; }
  .footer-brand, .footer-col { flex-basis: calc(50% - 1.25rem); }
  .media-offset img { box-shadow: 12px 12px 0 rgba(215,174,65,.9); }
}
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  :root { --pad-y: 3.6rem; }
  .col-2 > *, .col-3 > *, .col-4 > * { flex-basis: 100%; }
  .row-tight.col-3 > * { flex-basis: 100%; }
  .gallery > * { flex-basis: calc(50% - .5rem); }
  .footer-brand, .footer-col { flex-basis: 100%; }
  .card, .price, .form-card, .quote { padding: 1.6rem; }
  .hero { padding: 4rem 0 3.6rem; }
  .btn-group .btn { width: 100%; }
  .media-offset img { box-shadow: 8px 8px 0 rgba(215,174,65,.9); }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Visually hidden, still read by screen readers and still a real heading for
   document outline purposes. Elementor: Heading widget + CSS class "sr-only". */
.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;
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* Solid buttons inside light sections.
   `.sec-parchment a` (0,1,1) outranks `.btn` (0,1,0), so without this the
   solid button's label inherits the bronze link colour and renders bronze on
   gold at 2.99:1, a WCAG AA failure. `:not(.btn-ghost)` keeps ghost buttons
   bronze, which is correct on a light ground. */
.sec-parchment a.btn:not(.btn-ghost),
.sec-parchment-2 a.btn:not(.btn-ghost) { color: var(--ink); }
.sec-parchment a.btn:not(.btn-ghost):hover,
.sec-parchment-2 a.btn:not(.btn-ghost):hover { color: var(--ink); }

/* --- Shop -------------------------------------------------------------- */
/* Elementor: Image Box, or a container with an Image + Heading + Text */
.product {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sec-parchment .product, .sec-parchment-2 .product {
  background: #FFFDF8;
  border-color: var(--paper-line);
}
.product img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.product h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.product .product-price {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 .2rem;
}
.sec-parchment .product .product-price, .sec-parchment-2 .product .product-price { color: var(--purple); }
.product .product-stock {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .7rem;
}
.product p { font-size: .95rem; margin-bottom: 1rem; }
.product .btn { margin-top: auto; align-self: flex-start; }
.product.is-soldout img { filter: grayscale(1); opacity: .5; }
.product.is-soldout .product-price { color: inherit; opacity: .7; }

/* --- Booking rows -------------------------------------------------------- */
/* Mirrors the live site's stacked appointment blocks rather than a price grid.
   Elementor: Container > Flex > Row, two child containers at 30% / 70%,
   both set to 100% width on tablet and below. */
.booking-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.booking-row > * { flex: 1 1 100%; min-width: 0; }
.booking-meta   { flex-basis: 30%; }
.booking-detail { flex-basis: calc(70% - 2rem); }
.booking-item {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 2.2rem;
  margin-bottom: 1.4rem;
}
.booking-item.featured { border-color: var(--gold); }
.booking-item h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .6rem; }
.booking-item .price-tag {
  font-family: var(--font-head);
  font-size: 2.9rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin: 0 0 .3rem;
}
.booking-item .same-day {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.sec-parchment .booking-item { background: #FFFDF8; border-color: var(--paper-line); }
.sec-parchment .booking-item .price-tag { color: var(--purple); }
.sec-parchment .booking-item .same-day { color: var(--purple); }

@media (max-width: 980px) {
  .booking-meta, .booking-detail { flex-basis: 100%; }
  .booking-row { gap: 1.2rem; }
}
@media (max-width: 700px) {
  .booking-item { padding: 1.6rem; }
  .booking-item .price-tag { font-size: 2.4rem; }
}

/* --- Issue list ---------------------------------------------------------- */
/* Elementor: Icon Box in a 2-column row, or an Accordion if it feels long */
.issue { display: flex; gap: 1rem; align-items: flex-start; }
.issue .issue-mark {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: .62em;
  transform: rotate(45deg);
  background: var(--gold);
}
.sec-parchment .issue .issue-mark, .sec-parchment-2 .issue .issue-mark { background: var(--purple); }
.issue h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.issue p { font-size: .97rem; margin-bottom: 0; }

/* --- Quick select ------------------------------------------------------- */
/* Jump links to each appointment block, so nobody has to scroll the whole
   page to find the one they want.
   Elementor: a Container set to Flex > Row > Wrap, holding Button widgets
   with the link set to the matching section anchor. */
.quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.8rem;
}
.quick-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .72rem 1.05rem;   /* 44px tall - comfortable tap target */
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--on-dark);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.quick-nav a:hover,
.quick-nav a:focus-visible {
  border-color: var(--gold);
  background: rgba(215,174,65,.1);
  color: var(--on-dark-head);
}
.quick-nav .qn-price {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.quick-nav-label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 2rem 0 0;
}

/* The header is sticky at 76px, so anchored blocks need clearance or the
   heading lands underneath it. */
.booking-item { scroll-margin-top: 96px; }

@media (max-width: 700px) {
  .quick-nav { gap: .45rem; }
  /* 44px minimum tap target - these are the primary control on the page */
  .quick-nav a { padding: .75rem .95rem; font-size: .88rem; }
}

/* --- Shop category tiles ------------------------------------------------- */
/* The whole tile is one link. Elementor: Image Box widget with the link set on
   the box, or a Container with a link and Image + Heading + Text inside. */
.cat-tile {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--on-dark);
  transition: border-color .18s ease, transform .18s ease;
}
.cat-tile:hover, .cat-tile:focus-visible { border-color: var(--gold); transform: translateY(-2px); color: var(--on-dark); }
.cat-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cat-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.cat-title {
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--on-dark-head);
  line-height: 1.2;
  margin-bottom: .4rem;
}
.cat-meta {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .75rem;
}
.cat-price { color: var(--gold); margin-left: .4rem; letter-spacing: 0; }
.cat-lede { font-size: .95rem; line-height: 1.6; margin-bottom: 1.1rem; }
.cat-go { margin-top: auto; font-weight: 700; font-size: .93rem; color: var(--gold-soft); }
.cat-tile:hover .cat-go { color: var(--gold); }
.sec-parchment .cat-tile, .sec-parchment-2 .cat-tile { background: #FFFDF8; border-color: var(--paper-line); color: var(--on-light); }
.sec-parchment .cat-title, .sec-parchment-2 .cat-title { color: var(--on-light-head); }
.sec-parchment .cat-price, .sec-parchment-2 .cat-price,
.sec-parchment .cat-go, .sec-parchment-2 .cat-go { color: var(--purple); }

/* Four-up product grid on category pages */
.row-tight.col-4 > * { flex-basis: calc(25% - .9rem); }
@media (max-width: 980px) { .row-tight.col-4 > * { flex-basis: calc(33.333% - .8rem); } }
@media (max-width: 760px)  { .row-tight.col-4 > * { flex-basis: calc(50% - .6rem); } }
@media (max-width: 430px)  { .row-tight.col-4 > * { flex-basis: 100%; } }

/* --- Product page -------------------------------------------------------- */
.product-hero { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; }
.product-hero > * { flex: 1 1 100%; min-width: 0; }
.product-hero .product-gallery { flex-basis: 48%; }
.product-hero .product-info    { flex-basis: calc(52% - 3rem); }
.product-gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--ink-3); }
.product-info .price-tag {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin: .4rem 0 .2rem;
}
.product-info .stock-line {
  font-size: .84rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.4rem;
}
@media (max-width: 900px) {
  .product-hero { gap: 2rem; }
  .product-hero .product-gallery, .product-hero .product-info { flex-basis: 100%; }
  .product-info .price-tag { font-size: 2.4rem; }
}

/* --- CTA band ------------------------------------------------------------ */
/* Two earlier attempts filled this band with a flat colour - first the brand
   purple, then the brand gold. Both looked wrong, and for the same reason: a
   large flat slab of saturated colour fights a site whose whole character is
   dark, quiet and typographic. The hue was never the problem.

   So this version stands out through LIGHT rather than paint: a soft purple
   glow rising out of the dark, the flower-of-life motif turned up so it reads
   as deliberate ornament, hairline gold rules top and bottom, and the gold
   button left as the single bright thing on the page. Both brand colours are
   present - as light, not as fill. */
.cta-band {
  background:
    radial-gradient(ellipse 90% 120% at 50% 55%, rgba(103,60,156,.30) 0%, rgba(103,60,156,.10) 45%, rgba(11,11,16,0) 72%),
    var(--ink);
  border-top: 1px solid rgba(215,174,65,.32);
  border-bottom: 1px solid rgba(215,174,65,.32);
  color: var(--on-dark);
  padding: 7.5rem 0;
}
.cta-band h2 {
  color: var(--on-dark-head);
  font-size: clamp(2rem, 4vw, 3rem);
}
.cta-band .eyebrow { color: var(--gold); }
.cta-band .lede { color: #D8D5CE; }

/* the motif is ornament here, not texture - bigger and brighter than elsewhere */
.cta-band.geo::before {
  background-image: url("../images/flower-of-life.svg");
  width: min(1100px, 150vw);
  opacity: .25;
}

/* the one bright element, so the eye goes to it */
.cta-band .btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 34px rgba(215,174,65,.28);
}
.cta-band .btn:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--ink);
  box-shadow: 0 0 42px rgba(215,174,65,.42);
}
.cta-band .btn-ghost {
  background: transparent;
  border-color: rgba(230,205,138,.55);
  color: var(--gold-soft);
  box-shadow: none;
}
.cta-band .btn-ghost:hover {
  background: rgba(215,174,65,.12);
  border-color: var(--gold-soft);
  color: var(--gold-soft);
  box-shadow: none;
}

@media (max-width: 700px) {
  .cta-band { padding: 4.6rem 0; }
}

/* Purple keeps a quiet structural role: the rule under the sticky header. */
.site-header { border-bottom-color: var(--purple); }


/* --- Teal: informational callouts ---------------------------------------- */
/* The third logo colour. Gold means brand and action, purple is the secondary
   accent, teal marks information. Used only on light grounds, where it
   measures 4.5:1 - it is not safe as text on the ink ground. */
.sec-parchment .notice,
.sec-parchment-2 .notice {
  border-left-color: var(--teal);
  background: rgba(46,120,141,.07);
}
.sec-parchment .notice strong,
.sec-parchment-2 .notice strong { color: #235C6D; }

/* --- Shop landing tiles ---------------------------------------------------- */
/* The product photograph sits clear at the top of each tile, with the wording
   in a box underneath it and a small badge in the corner marking anything new.

   The wording used to sit on the photograph under a dark gradient, as it does
   on the live shop, but that hid the products themselves. The box below keeps
   every photograph fully visible and the type readable whatever the picture. */
.shop-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

/* Fixed basis rather than a stretching flex-grow: with thirteen tiles the last
   row holds one, and a grown tile would balloon to the full width. Centring a
   fixed-width orphan reads as deliberate instead. */
.shop-grid > .shop-tile { flex: 0 0 calc(25% - 1.125rem); }

.shop-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  text-decoration: none;
  color: var(--on-dark);
  transition: border-color .18s ease, transform .18s ease;
}
.shop-tile:hover, .shop-tile:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
  color: var(--on-dark);
}
.shop-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.shop-tile__frame {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ink-3);
}
/* Absolute fill, and deliberately over-specific.

   WooCommerce ships '.woocommerce img, .woocommerce-page img { height: auto }'
   in woocommerce-layout-grid.min.css. The shop page carries the
   .woocommerce-page body class, so that rule scores 0,1,1 against the 0,1,0 of
   a lone .shop-tile__img and wins - the photograph then renders at its natural
   ratio and stops short of the frame on any image squarer than 3:4. Repeating
   the parent class takes this to 0,2,0, which beats it without !important. */
.shop-tile .shop-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.shop-tile:hover .shop-tile__img { transform: scale(1.04); }

.shop-tile__ribbon {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Purple filled with white text, which the palette allows on dark; gold would
   read as another "new" badge and this one means the opposite. */
.shop-tile__soldout {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 2;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* The wording box. It grows to fill the tile, so every box in a row is the
   same height, and the button is pushed to the foot of it so the buttons line
   up across the row whatever the length of the description. */
.shop-tile__body {
  flex: 1 1 auto;
  padding: 1.1rem 1.25rem 1.3rem;
  border-top: 1px solid var(--ink-3);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.shop-tile__title {
  font-family: var(--font-head);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--on-dark-head);
  margin-bottom: .35rem;
}
.shop-tile__desc {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--on-dark);
  margin-bottom: .9rem;
}
.shop-tile__cta {
  align-self: flex-start;
  margin-top: auto;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  transition: background-color .18s ease, color .18s ease;
}
.shop-tile:hover .shop-tile__cta,
.shop-tile:focus-visible .shop-tile__cta {
  background: var(--gold);
  color: var(--ink);
}

@media (max-width: 1100px) { .shop-grid > .shop-tile { flex: 0 0 calc(33.333% - 1rem); } }
@media (max-width: 860px)  { .shop-grid > .shop-tile { flex: 0 0 calc(50% - .75rem); } }
@media (max-width: 520px)  {
  .shop-grid { gap: 1.1rem; }
  .shop-grid > .shop-tile { flex: 0 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-tile, .shop-tile__img { transition: none; }
  .shop-tile:hover { transform: none; }
  .shop-tile:hover .shop-tile__img { transform: none; }
}


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

/* The four-way chooser at the top of the events page. These are jump links to
   sections further down the same page, not navigation away from it, so they
   are deliberately quieter than the shop tiles: no photograph, no ribbon. */
.path-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}
.path-grid > .path-tile { flex: 0 0 calc(25% - .94rem); }

.path-tile {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  text-decoration: none;
  color: var(--on-dark);
  transition: border-color .18s ease, transform .18s ease;
}
.path-tile:hover, .path-tile:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
  color: var(--on-dark);
}
.path-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.path-tile__title {
  font-family: var(--font-head);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--on-dark-head);
  margin-bottom: .3rem;
}
.path-tile__desc { font-size: .9rem; line-height: 1.5; margin-bottom: .9rem; }
.path-tile__go { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--gold-soft); }
.path-tile:hover .path-tile__go { color: var(--gold); }

/* One live event or course: picture on one side, the wording on the other.
   Alternating sides down the page stops four of these in a column reading as a
   form. The flip is a modifier rather than an :nth-child rule so the order can
   change without the layout reshuffling itself. */
.event-row {
  display: flex;
  gap: 2.25rem;
  align-items: flex-start;
  padding: 2rem 0;
  border-top: 1px solid var(--ink-line);
}
.event-row:first-of-type { border-top: 0; padding-top: 0; }
.event-row--flip { flex-direction: row-reverse; }

.event-media { flex: 0 0 38%; }
.event-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--ink-3);
}
.event-body { flex: 1 1 auto; min-width: 0; }
.event-body h3 {
  font-family: var(--font-head);
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--on-dark-head);
  margin: 0 0 .75rem;
}
.event-body p { margin-bottom: .9rem; }
.event-body p:last-child { margin-bottom: 0; }

/* Date, time and price. A definition list rather than a paragraph because that
   is what it is, and it lets the labels line up without a table. */
.event-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1rem;
  margin: 0 0 1.1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
}
.event-facts dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  align-self: baseline;
}
.event-facts dd { margin: 0; font-size: .93rem; color: var(--on-dark); }
.event-facts .is-free { color: var(--gold-soft); font-weight: 700; }

/* Said once, plainly, where a date would otherwise sit. Better than printing a
   date that has already passed. */
.event-tbc {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px dashed var(--teal-line);
  background: var(--teal-wash);
  font-size: .86rem;
  color: var(--on-dark);
}

/* The catch-up replays. Three of them, equal weight, so a plain grid. */
.replay-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.replay-grid > .replay-card { flex: 0 0 calc(33.333% - 1rem); }
.replay-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
}
/* 4:3 rather than something wider: these three are promotional posters with
   type on them, one of them square, and a letterbox crop cut the wording off
   the top. */
.replay-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.replay-card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.replay-card__kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}
.replay-card__body h3 {
  font-family: var(--font-head);
  font-size: 1.22rem;
  line-height: 1.25;
  color: var(--on-dark-head);
  margin: 0 0 .5rem;
}
.replay-card__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  font-size: .9rem;
  line-height: 1.55;
}
.replay-card__body li { padding-left: 1.15rem; position: relative; }
.replay-card__body li::before { content: "\2022"; position: absolute; left: .25rem; color: var(--gold); }
.replay-card__foot { margin-top: auto; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.replay-card__price { font-weight: 700; color: var(--gold); }

@media (max-width: 1100px) {
  .path-grid > .path-tile { flex: 0 0 calc(50% - .625rem); }
  .replay-grid > .replay-card { flex: 0 0 calc(50% - .75rem); }
}
@media (max-width: 860px) {
  .event-row, .event-row--flip { flex-direction: column; gap: 1.4rem; }
  .event-media { flex: 0 0 auto; max-width: 420px; }
}
@media (max-width: 560px) {
  .path-grid > .path-tile { flex: 0 0 100%; }
  .replay-grid > .replay-card { flex: 0 0 100%; }
  .event-facts { grid-template-columns: 1fr; gap: .15rem; }
  .event-facts dt { margin-top: .5rem; }
  .event-facts dt:first-child { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .path-tile { transition: none; }
  .path-tile:hover { transform: none; }
}


/* --- Path chooser icons ---------------------------------------------------- */
/* The live site puts a piece of clipart above each chooser heading. These are
   line icons drawn in the brand gold instead: at this size a filled illustration
   turns into a blob, and the outline keeps the tile quiet enough that the
   heading still leads. Centred layout is a modifier so the plain left-aligned
   tile on the events page is unaffected. */
.path-tile__icon {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: .85rem;
  color: var(--gold);
}
.path-tile__icon svg { width: 100%; height: 100%; display: block; }

.path-grid--centred .path-tile { text-align: center; align-items: center; }
.path-grid--centred .path-tile__icon { margin-left: auto; margin-right: auto; }

/* On parchment the gold would fail contrast as a line, so the icon and the
   read-on link both switch to purple - the light-ground accent. */
.sec-parchment .path-tile__icon,
.sec-parchment-2 .path-tile__icon { color: var(--purple); }


/* --- Workshop replay pages ------------------------------------------------- */
/* On a replay page the recording is the thing people paid for, so it gets the
   full reading width rather than the 760px the inline .video-embed uses where a
   video sits beside other content. */
.video-embed--wide { max-width: 980px; margin-top: 0; }

.video-note {
  max-width: 980px;
  margin: .9rem auto 0;
  text-align: center;
  font-size: .88rem;
  color: var(--on-dark);
  opacity: .85;
}

/* A heading that reads as an h3 while keeping the right level in the outline:
   inside the two overview cards these are section headings (h2) but set at the
   card's scale. */
.h3 {
  font-family: var(--font-head);
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 0 0 1.1rem;
}

/* The three reader questions sit in a notice on parchment; tighten the gaps so
   they read as one block rather than three loose paragraphs. */
.prose .notice p { margin-bottom: .55rem; }
.prose h3 { margin-top: 2.4rem; }


/* A card is --ink-2 and so is .sec-raised, so on a raised section a card had no
   fill of its own and only a 1px border to say where it ended. Dropping it to
   --ink keeps a card reading as a card on either dark ground. Applies to the
   three workshop replay pages and the courses page's recorded workshops. */
.sec-raised .card { background: var(--ink); }


/* --- Free guide landing pages ---------------------------------------------- */
/* A guide cover is a portrait book cover rather than a square event picture, so
   it takes a narrower column, drops the frame and gets a soft shadow so it reads
   as an object sitting on the page. On a phone it is capped and centred so it
   does not fill the whole screen before the words start. */
.event-media--cover { flex-basis: 32%; }
.event-media--cover img { border: 0; box-shadow: 0 18px 44px rgba(0,0,0,.55); }

/* One quiet line under a button or a closing call to action. */
.small-print { font-size: .86rem; opacity: .8; margin-top: 1rem; margin-bottom: 0; }

@media (max-width: 860px) {
  .event-media--cover { flex-basis: auto; max-width: 300px; align-self: center; }
}

/* Elementor zeroes figure margins inside its widgets with a (0,4,1) selector,
   which beats .prose figure above, so a picture in running text sat hard
   against the paragraph under it. This puts the intended spacing back. */
body .elementor .elementor-widget-html .prose figure.media { margin: 2rem 0 2.2rem; }

/* Captions on parchment are set in --teal-deep for contrast, but .figcap also
   fades them to 70%, which drops them to about 3.3:1. At full strength they
   read at over 6:1. */
.sec-parchment .figcap, .sec-parchment-2 .figcap { opacity: 1; }


/* --- A second item inside a section ------------------------------------- */
/* For a block laid out differently from the rows around it, such as the Ask
   Chen live stream sitting under the worldwide meditation on the courses and
   events pages. The rule matches the line the event rows draw between
   themselves, so it reads as the next item in the same list rather than a new
   section. After an event row the row's own bottom padding does the spacing. */
.block-divider { border-top: 1px solid var(--ink-line); margin-top: 3rem; padding: 3rem 0 2rem; }
.event-row + .block-divider { margin-top: 0; }
.block-divider:last-child { padding-bottom: 0; }


/* --- Pictures set into a long story ---------------------------------------- */
/* Andy's story on the About page runs to around 1,400 words, so pictures sit to
   one side of the text, alternating sides, to break it into shorter blocks.
   Each heading clears the picture above it so every part of the story starts
   on its own line. On a phone the pictures sit full width between paragraphs.
   A div rather than a figure, because Elementor zeroes figure margins inside
   its widgets. */
.prose-story .inline-img { float: right; width: 42%; margin: .35rem 0 1.4rem 2rem; }
.prose-story .inline-img--left { float: left; margin: .35rem 2rem 1.4rem 0; }
.prose-story .inline-img img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--paper-line); }
.prose-story h3 { clear: both; }
.prose-story::after { content: ""; display: block; clear: both; }
@media (max-width: 700px) {
  .prose-story .inline-img, .prose-story .inline-img--left { float: none; width: 100%; margin: 1.6rem 0; }
}