/* ============================================================
   CONSCIOUSLY AWARE — V2
   Loaded in place of styles.css on any page whose front matter
   says `design: v2`. shared.css loads first, on every page.

   Every class here starts with `ca-`, so nothing can collide with
   styles.css or shared.css, and searching "ca-" finds the whole
   new design.

     1. Tokens
     2. Old token names, mapped for shared.css
     3. Reset and base
     4. Focus
     5. Layout
     6. Type
     7. Tones
     8. Buttons
     9. Shared pieces on v2 pages
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* ---- Colour ------------------------------------------------
     Placeholders sampled by eye from the Canva mockup. When the
     exact hex codes come out of Canva, change them here and only
     here.

     Each accent has two tones. The base tone is pulled just dark
     enough to carry white button labels, and small text on cream,
     at WCAG AA (4.5:1); the mockup's brighter originals don't.
     The -bright tone is the mockup's own, for decoration only:
     brush strokes, number badges, oversized display type. */
  --ca-pink:          #D6006A;  /* white on it 5.2:1 · on cream 4.9:1 */
  --ca-pink-bright:   #FF2D8E;  /* on cream 3.3:1, display sizes only */
  --ca-pink-soft:     #F7A8D3;  /* announcement banner ground */
  --ca-blush:         #F8DDD8;  /* icon circles · maroon icons on it 12:1 */
  --ca-orange:        #C84100;  /* white on it 5.0:1 · on cream 4.7:1 */
  --ca-orange-bright: #FF6B1A;  /* decoration only */
  --ca-orange-deep:   #A83600;  /* orange text on soft pink · 3.6:1, display size only */
  --ca-purple:        #6A1FC0;  /* white on it 8.2:1 · on cream 7.7:1 */
  --ca-purple-bright: #9B4DFF;  /* decoration only */
  --ca-purple-deep:   #4B2380;  /* life-areas field · cream on it 10.7:1, bright orange 4.0:1 */
  --ca-lime:          #DCE03C;  /* maroon on it 10.9:1 · never white text */
  --ca-maroon:        #4B0A12;  /* headlines · on cream 14.7:1 */
  --ca-maroon-deep:   #3A060C;  /* hero band and other deep fields · cream on it 16:1 */

  --ca-cream:  #FBF8F2;   /* the page */
  --ca-paper:  #FFFDF9;   /* cards, lifted off the page */
  --ca-note:   #F6F1E6;   /* paper notes, a warmer cream than --ca-paper */
  --ca-line:   #EADFD3;   /* hairlines and dividers */
  --ca-ink:    #2E2226;   /* body text */
  --ca-ink-2:  #5B4B50;   /* secondary text · on cream 7.7:1 */

  /* ---- Type --------------------------------------------------
     Stand-ins until the Canva font names arrive. Anton is the
     closest free match to the heavy condensed headlines,
     Montserrat to the body and caps lines, Caveat Bold to the
     "Clear Connect Reset" script. */
  --ca-font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --ca-font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ca-font-script:  'Caveat', 'Brush Script MT', cursive;
  --ca-font-serif:   Georgia, 'Times New Roman', serif;  /* article titles: a system face, no extra download */

  --ca-text-sm: 0.9375rem;                                  /* 15px */
  --ca-text-md: 1.0625rem;                                  /* 17px, body */
  --ca-text-lg: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);   /* 18–22px, ledes */
  --ca-h3: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);        /* 30–44px, card titles */
  --ca-h2: clamp(2.5rem, 1.5rem + 4vw, 5rem);               /* 40–80px, section titles */

  /* ---- Space and shape ---------------------------------------- */
  --ca-max-w: 1320px;
  --ca-pad-x: clamp(20px, 4vw, 48px);
  --ca-section-py: clamp(56px, 8vw, 112px);
  --ca-radius-card: 22px;
  --ca-radius-pill: 999px;
  --ca-shadow-card: 0 18px 40px -20px rgba(75, 10, 18, 0.22);
}


/* ============================================================
   2. OLD TOKEN NAMES, MAPPED FOR SHARED.CSS
   shared.css is written against the old names. styles.css
   defines them on old pages; here they point at the v2 palette,
   so the floating CTA, side tabs, PIP player and booking modal
   pick up the new look without knowing which design they're in.
   ============================================================ */
:root {
  --ink: var(--ca-maroon);
  --ink2: var(--ca-ink-2);
  --ink3: var(--ca-ink-2);
  --card: var(--ca-paper);
  --cream: var(--ca-cream);
  --teal: var(--ca-pink);
  --teal-dk: var(--ca-pink);
  --gold: var(--ca-lime);
  --font-body: var(--ca-font-body);
  --font-display: var(--ca-font-body); /* Anton is for headlines only */
  --pad-x: var(--ca-pad-x);
  --max-w: var(--ca-max-w);
  --radius-pill: var(--ca-radius-pill);
  --focus-ring: var(--ca-maroon);
}


/* ============================================================
   3. RESET AND BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* No overflow-x clip on html or body. styles.css explains why: with
   smooth scrolling it stops same-page links (#aware-method and the
   rest) from scrolling at all. Anything oversized, like the hero word
   and brush strokes, gets clipped inside its own section instead. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* In-page targets clear the sticky header. Retuned once the header exists. */


body {
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-md);
  line-height: 1.6;
  color: var(--ca-ink);
  background: var(--ca-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ca-pink-soft); color: var(--ca-maroon); }


/* ============================================================
   4. FOCUS
   One ring for every focusable thing. :where() keeps it at zero
   specificity, so any component can restyle its own ring.
   ============================================================ */
:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
/* Put this on any dark or saturated section and the ring turns white. */
.ca-on-dark { --focus-ring: #fff; }


/* ============================================================
   5. LAYOUT
   ============================================================ */
.ca-container {
  width: 100%;
  max-width: calc(var(--ca-max-w) + 2 * var(--ca-pad-x));
  margin-inline: auto;
  padding-inline: var(--ca-pad-x);
}
.ca-section { padding-block: var(--ca-section-py); }

/* Off screen but still read aloud: for labels a sighted reader gets from the design. */
.ca-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   6. TYPE
   ============================================================ */
/* Anton ships one weight. font-synthesis stops browsers faking a
   bold when a heading's default weight lands on it. */
.ca-display {
  font-family: var(--ca-font-display);
  font-weight: 400;
  font-synthesis: none;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ca-maroon);
}
.ca-h2 { font-size: var(--ca-h2); }
.ca-h3 { font-size: var(--ca-h3); }

/* The pink half of a two-tone headline. Bright pink is safe here
   because it only ever appears at display size. */
.ca-accent { color: var(--ca-pink-bright); }

/* Bold caps lines like "CLARITY. CONFIDENCE. REAL CHANGE." Takes
   the tone of whatever it sits in; maroon when there isn't one. */
.ca-kicker {
  font-family: var(--ca-font-body);
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ca-tone, var(--ca-maroon));
}

.ca-lede  { font-size: var(--ca-text-lg); line-height: 1.55; color: var(--ca-ink); }
.ca-muted { color: var(--ca-ink-2); }
.ca-script { font-family: var(--ca-font-script); font-weight: 700; line-height: 1; }


/* ============================================================
   7. TONES
   One class sets the accent for everything inside it: buttons,
   kickers, check marks, badges. A card says ca-tone-orange and
   all its parts follow, so front matter only has to name a colour.
   ============================================================ */
.ca-tone-pink   { --ca-tone: var(--ca-pink);   --ca-tone-bright: var(--ca-pink-bright); }
.ca-tone-orange { --ca-tone: var(--ca-orange); --ca-tone-bright: var(--ca-orange-bright); }
.ca-tone-purple { --ca-tone: var(--ca-purple); --ca-tone-bright: var(--ca-purple-bright); }
/* Maroon: the Perfectionist's Reset. White on it 16:1; the bright tone is a wine-pink for decoration. */
.ca-tone-maroon { --ca-tone: var(--ca-maroon); --ca-tone-bright: color-mix(in srgb, var(--ca-maroon) 55%, var(--ca-pink-bright)); }

/* A circle page sets its colour once, on <main data-circle-tone="…"> (the tone
   named in data/events.yaml). bright = card edges, soft = section backgrounds,
   wash = pale gradients, ink = small coloured text. The fallbacks on the rules
   that read these keep every other page pink. Burnout (pink) is the original. */
[data-circle-tone="pink"] {
  --ca-tone-bright: var(--ca-pink-bright);
  --ca-tone-soft:   var(--ca-pink-soft);
  --ca-tone-wash:   var(--ca-blush);
  --ca-tone-ink:    var(--ca-pink);
}
[data-circle-tone="orange"] {
  --ca-tone-bright: var(--ca-orange-bright);
  --ca-tone-soft:   color-mix(in srgb, var(--ca-orange-bright) 34%, var(--ca-paper));
  --ca-tone-wash:   color-mix(in srgb, var(--ca-orange-bright) 18%, var(--ca-cream));
  --ca-tone-ink:    var(--ca-orange-deep);
}
[data-circle-tone="purple"] {
  --ca-tone-bright: var(--ca-purple-bright);
  --ca-tone-soft:   color-mix(in srgb, var(--ca-purple-bright) 30%, var(--ca-paper));
  --ca-tone-wash:   color-mix(in srgb, var(--ca-purple-bright) 14%, var(--ca-cream));
  --ca-tone-ink:    var(--ca-purple);
}
[data-circle-tone="maroon"] {
  --ca-tone-bright: color-mix(in srgb, var(--ca-maroon) 55%, var(--ca-pink-bright));
  --ca-tone-soft:   color-mix(in srgb, var(--ca-maroon) 20%, var(--ca-paper));
  --ca-tone-wash:   color-mix(in srgb, var(--ca-maroon) 10%, var(--ca-cream));
  --ca-tone-ink:    var(--ca-maroon);
}


/* ============================================================
   8. BUTTONS
   Pill by default, coloured by the surrounding tone (pink if
   none). --square is the flat rectangle the mockup uses in the
   header and the announcement banner. Every pairing clears 4.5:1.
   ============================================================ */
.ca-btn {
  --_bg: var(--ca-tone, var(--ca-pink));
  --_fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8em 1.6em;
  font-family: var(--ca-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--_fg);
  background: var(--_bg);
  border: 2px solid var(--_bg);
  border-radius: var(--ca-radius-pill);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.ca-btn:hover {
  background: color-mix(in srgb, var(--_bg) 84%, #000);
  border-color: color-mix(in srgb, var(--_bg) 84%, #000);
  transform: translateY(-1px);
}

.ca-btn--lime   { --_bg: var(--ca-lime); --_fg: var(--ca-maroon); }
.ca-btn--dark   { --_bg: var(--ca-maroon); }
/* Bright grounds take maroon labels: 5.5:1 on bright orange, 8.5:1 on soft pink. */
.ca-btn--orange-bright { --_bg: var(--ca-orange-bright); --_fg: var(--ca-maroon); }
.ca-btn--pink          { --_bg: var(--ca-pink); }
.ca-btn--pink-soft     { --_bg: var(--ca-pink-soft);     --_fg: var(--ca-maroon); }
/* A link-styled button with no destination yet: looks right, does nothing,
   and stays out of the tab order. */
a.ca-btn:not([href]) { cursor: default; }
.ca-btn--square { border-radius: 0; }
.ca-btn--block  { width: 100%; }
.ca-btn--outline { color: var(--_bg); background: transparent; }
.ca-btn--outline:hover { color: #fff; background: var(--_bg); }

.ca-btn__arrow { transition: transform .2s ease; }
.ca-btn:hover .ca-btn__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .ca-btn, .ca-btn__arrow { transition: none; }
  .ca-btn:hover, .ca-btn:hover .ca-btn__arrow { transform: none; }
}


/* ============================================================
   9. SHARED PIECES ON V2 PAGES
   Section 2 recolours most of shared.css. These are the spots
   where shared.css types a colour in directly, or where the old
   pairing doesn't hold on the new palette.
   ============================================================ */
.floating-footer-cta {
  background: rgba(75, 10, 18, 0.92);
  border-color: rgba(247, 168, 211, 0.30);
}
/* The button turns pink, so its label goes white: maroon on pink is only 3:1. */
.floating-footer-cta__button { color: #fff; border-color: var(--ca-pink); }
.floating-footer-cta__button:hover {
  background: color-mix(in srgb, var(--ca-pink) 84%, #000);
  color: #fff;
}
.floating-footer-cta__toggle:hover,
.reviews-tab__handle:hover,
.reviews-tab__btn--primary:hover {
  background: color-mix(in srgb, var(--ca-lime) 85%, #000);
  border-color: color-mix(in srgb, var(--ca-lime) 85%, #000);
}
.newsletter-tab__handle:hover { background: var(--ca-maroon); }
.floating-footer-cta-restore {
  background: rgba(75, 10, 18, 0.94);
  border-color: rgba(247, 168, 211, 0.38);
}
.ghl-embed__spinner {
  border-color: rgba(214, 0, 106, 0.2);
  border-top-color: var(--ca-pink);
}


/* ============================================================
   10. SKIP LINK
   First thing on the page. Appears when tabbed to.
   ============================================================ */
.ca-skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 10001;
  padding: 12px 18px;
  font-weight: 700;
  color: #fff;
  background: var(--ca-maroon);
  text-decoration: none;
  --focus-ring: var(--ca-lime);
}
.ca-skip:focus { top: 12px; }


/* ============================================================
   11. MASTHEAD AND TOP BAR
   The announcement banner (the top bar, always open) and the
   header stick to the top together, inside .ca-masthead. Slides
   come from data/announcements.yaml; each slide's tone (pink or
   orange) becomes the bar's color while it shows. Once the page
   scrolls past the bar, v2.js adds .is-compact and the bar drops
   to about half height. Without JS only the first slide shows and
   the controls hide.
     1180px+   image, script, title and text in one row
     760-1179  script drops out
     under 760 stacked; text drops out, dots move underneath
   ============================================================ */
/* In-page links stop below the sticky masthead (v2.js keeps --ca-masthead-h current). */
html { scroll-padding-top: calc(var(--ca-masthead-h, 0px) + 12px); }

.ca-masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .25s ease;
}
.ca-masthead.is-stuck { box-shadow: 0 10px 28px -18px rgba(75, 10, 18, 0.3); }

.ca-announce {
  color: var(--ca-maroon);
  background-color: var(--ca-pink-soft);
  overflow: clip;
  transition: background-color .3s ease;
}
/* Each slide names its color; the JS copies it onto the bar when that slide shows. */
.ca-announce[data-tone="orange"] { background-color: var(--ca-orange-bright); }

.ca-announce__inner {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 16px);
  max-width: calc(var(--ca-max-w) + 2 * var(--ca-pad-x));
  margin-inline: auto;
  padding-inline: clamp(4px, 1.5vw, 20px);
}
/* All slides share one grid cell, so the bar is always as tall as its tallest slide
   and doesn't jump when the slide changes. A hidden slide stays in place, invisible. */
.ca-announce__track { flex: 1; min-width: 0; display: grid; }
.ca-announce__track > .ca-announce__slide { grid-area: 1 / 1; }

.ca-announce__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 36px);
  min-height: clamp(120px, 10vw, 156px);
  padding-block: 14px;
}
/* display:flex above would otherwise override the hidden attribute; the slide keeps its
   space but is invisible (and out of the tab order and away from screen readers). */
.ca-announce__slide[hidden] { display: flex; visibility: hidden; }

/* The cutout sits on the banner's bottom edge, in front of an orange circle that
   the banner's own edge cuts off, like the mockup. */
.ca-announce__figure {
  position: relative;
  align-self: flex-end;
  flex: none;
  margin-bottom: -14px;
}
.ca-announce__figure::before {
  content: "";
  position: absolute;
  left: -4%;
  bottom: -20%;
  width: 78%;
  aspect-ratio: 1;
  background: var(--ca-orange-bright);
  border-radius: 50%;
}
.ca-announce__img {
  position: relative;
  display: block;
  width: auto;
  height: clamp(120px, 10vw, 156px);
}
/* min-content puts each word on its own line: Clear. / Connect. / Reset.
   The rule after it is the first divider in the mockup. */
.ca-announce__script {
  width: min-content;
  padding-right: clamp(16px, 2.4vw, 36px);
  font-size: clamp(36px, 3.2vw, 50px);
  text-align: center;
  border-right: 2px solid currentColor;
}
.ca-announce__head { text-align: center; }
.ca-announce__eyebrow {
  font-size: clamp(14px, 1.3vw, 21px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ca-announce__title { font-size: clamp(44px, 5vw, 76px); line-height: 0.9; }
/* The rule before the body is the second divider. */
.ca-announce__body {
  max-width: 360px;
  padding-left: clamp(16px, 2.4vw, 36px);
  border-left: 2px solid var(--ca-maroon);
}
.ca-announce__text {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-announce__btn { min-height: 44px; padding: 0.7em 1.2em; font-size: 13px; }

.ca-announce__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ca-maroon);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease;
}
.ca-announce__arrow:hover { background: rgba(75, 10, 18, 0.08); }
.ca-announce__arrow svg { width: 30px; height: 30px; }

.ca-announce__dots { flex: none; display: flex; }
/* 24px buttons around 12px dots: big enough to tap, small enough to read as the mockup's dots. */
.ca-announce__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  cursor: pointer;
}
.ca-announce__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--ca-maroon);
  border-radius: 50%;
}
.ca-announce__dot[aria-current="true"]::before { background: var(--ca-maroon); }

.no-js .ca-announce__arrow,
.no-js .ca-announce__dots { display: none; }

@media (max-width: 1179px) {
  .ca-announce__figure,
  .ca-announce__script { display: none; }
}
@media (max-width: 759px) {
  .ca-announce__inner { flex-wrap: wrap; padding-block: 2px 8px; }
  .ca-announce__arrow--prev { order: 1; }
  .ca-announce__track { order: 2; }
  .ca-announce__arrow--next { order: 3; }
  .ca-announce__dots { order: 4; flex-basis: 100%; justify-content: center; }
  .ca-announce__slide { flex-direction: column; gap: 10px; min-height: 0; padding-block: 12px 2px; }
  .ca-announce__body { max-width: none; padding-left: 0; border-left: 0; }
  .ca-announce__text { display: none; }
  .ca-announce__title { font-size: 40px; }
  .ca-announce__eyebrow { font-size: 13px; }
  .ca-announce__arrow { width: 40px; height: 40px; }
  .ca-announce__arrow svg { width: 24px; height: 24px; }
}

/* Compact top bar: once the page is scrolled, the JS adds .is-compact and the bar drops to about half height. */
.is-compact .ca-announce__slide { min-height: clamp(60px, 5vw, 78px); padding-block: 7px; gap: clamp(12px, 1.6vw, 24px); }
.is-compact .ca-announce__figure,
.is-compact .ca-announce__script,
.is-compact .ca-announce__eyebrow,
.is-compact .ca-announce__text { display: none; }
.is-compact .ca-announce__title { font-size: clamp(22px, 2.5vw, 38px); }
.is-compact .ca-announce__body { padding-left: 0; border-left: 0; }
.is-compact .ca-announce__btn { min-height: 36px; padding: 0.55em 1em; font-size: 12px; }
.is-compact .ca-announce__arrow svg { width: 24px; height: 24px; }
@media (max-width: 759px) {
  .is-compact .ca-announce__inner { flex-wrap: nowrap; padding-block: 0; }
  .is-compact .ca-announce__dots { display: none; }
  .is-compact .ca-announce__slide { flex-direction: row; gap: 12px; min-height: 56px; padding-block: 6px; }
  .is-compact .ca-announce__title { font-size: 22px; }
  /* The button shrinks to its arrow; the words stay for screen readers. */
  .is-compact .ca-announce__btn { position: relative; width: 40px; min-height: 40px; padding: 0; }
  .is-compact .ca-announce__btn-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* ============================================================
   12. HEADER
   The masthead (section 11) does the sticking. One menu serves both
   sizes: below 1180px it becomes the drop-down panel behind the
   menu button. Keep 1180px in step with v2.js.
   ============================================================ */
.ca-header {
  position: relative;
  background: rgba(251, 248, 242, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.is-stuck .ca-header { border-bottom-color: var(--ca-line); }
.ca-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding-block: 10px;
}
.ca-header__brand { flex: none; display: block; }
.ca-header__brand img { width: auto; height: 50px; }

/* Menu button: three bars that fold into an X. */
.ca-header__menu-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ca-maroon);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.ca-header__menu-icon { display: grid; gap: 5px; width: 24px; }
.ca-header__menu-icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.is-menu-open .ca-header__menu-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-menu-open .ca-header__menu-icon span:nth-child(2) { opacity: 0; }
.is-menu-open .ca-header__menu-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ca-header__cta { display: none; }
.ca-nav__list { list-style: none; }

/* ---- Below 1180px: drop-down panel ---- */
@media (max-width: 1179px) {
  .ca-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--ca-masthead-h, 100%));
    overflow-y: auto;
    padding: 4px var(--ca-pad-x) 24px;
    background: var(--ca-cream);
    border-bottom: 1px solid var(--ca-line);
    box-shadow: 0 24px 40px -24px rgba(75, 10, 18, 0.3);
  }
  .is-menu-open .ca-nav { display: block; }

  .ca-nav__item { border-bottom: 1px solid var(--ca-line); }
  .ca-nav__link {
    display: block;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ca-maroon);
    text-decoration: none;
  }
  .ca-nav__link.is-active { color: var(--ca-pink); }
  .ca-nav__toggle { display: none; }
  .ca-nav__sub { list-style: none; padding: 0 0 12px 16px; }
  .ca-nav__sublink {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ca-ink-2);
    text-decoration: none;
  }
  .ca-nav__sublink[aria-current="page"] { color: var(--ca-pink); }
  .ca-nav__cta-mobile { width: 100%; margin-top: 20px; }

  /* No JS means no menu button, so the menu shows open under the logo. */
  .no-js .ca-header__menu-btn { display: none; }
  .no-js .ca-header__inner { flex-wrap: wrap; }
  .no-js .ca-nav {
    display: block;
    position: static;
    flex-basis: 100%;
    max-height: none;
    padding-inline: 0;
    box-shadow: none;
  }
}

/* ---- 1180px and up: inline menu ---- */
@media (min-width: 1180px) {
  .ca-header__inner { min-height: 96px; }
  .ca-header__brand img { height: 64px; }
  .ca-header__menu-btn,
  .ca-nav__cta-mobile { display: none; }
  .ca-header__cta { display: inline-flex; padding: 0.85em 1.4em; font-size: 14px; }

  .ca-nav { margin-inline: auto; }
  .ca-nav__list { display: flex; align-items: center; gap: clamp(18px, 1.8vw, 30px); }
  .ca-nav__item { position: relative; display: flex; align-items: center; gap: 2px; }

  .ca-nav__link {
    position: relative;
    padding-block: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ca-ink-2);
    text-decoration: none;
    transition: color .2s ease;
  }
  .ca-nav__link:hover,
  .ca-nav__link.is-active { color: var(--ca-maroon); }
  .ca-nav__link.is-active { font-weight: 700; }
  /* The pink underline from the mockup: full under the current
     section, and slides in on hover. */
  .ca-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 3px;
    background: var(--ca-pink-bright);
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .ca-nav__link:hover::after,
  .ca-nav__link.is-active::after { transform: scaleX(1); }

  .ca-nav__toggle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--ca-ink-2);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .ca-nav__toggle:hover { color: var(--ca-maroon); background: rgba(75, 10, 18, 0.06); }
  .ca-nav__toggle svg { width: 13px; height: 13px; transition: transform .2s ease; }
  .ca-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .ca-nav__sub {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 10;
    min-width: 220px;
    padding: 8px;
    list-style: none;
    background: var(--ca-paper);
    border: 1px solid var(--ca-line);
    border-radius: 14px;
    box-shadow: 0 20px 40px -16px rgba(75, 10, 18, 0.28);
    transform: translateX(-50%);
  }
  /* Invisible bridge over the 10px gap, so the mouse can travel down to it without it closing. */
  .ca-nav__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
  }
  .ca-nav__toggle[aria-expanded="true"] + .ca-nav__sub { display: block; }

  .ca-nav__sublink {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ca-ink);
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
  }
  .ca-nav__sublink:hover { color: var(--ca-pink); background: var(--ca-cream); }
  .ca-nav__sublink[aria-current="page"] { color: var(--ca-pink); }
}
/* Hover-to-open only where there's a real mouse; touch screens use the chevron. */
@media (min-width: 1180px) and (hover: hover) {
  .ca-nav__item--parent:hover .ca-nav__sub { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-masthead,
  .ca-announce,
  .ca-header,
  .ca-header__menu-icon span,
  .ca-nav__link,
  .ca-nav__link::after,
  .ca-nav__toggle svg,
  .ca-nav__sublink,
  .ca-announce__arrow { transition: none; }
}


/* ============================================================
   13. FOOTER
   From the Canva home page mockup. Text tones on maroon:
     cream              14.7:1  (tagline, headings)
     cream at 80%        9.6:1  (links, contact details)
     cream at 60%        5.9:1  (fine print; nothing goes lower)
     pink-soft           8.5:1  (contact icons)
     lime               10.9:1  (hover)
   ============================================================ */
.ca-footer {
  --_text: rgba(251, 248, 242, 0.8);
  --_fine: rgba(251, 248, 242, 0.6);
  --_rule: rgba(251, 248, 242, 0.18);
  padding-block: clamp(56px, 7vw, 88px) 32px;
  font-size: var(--ca-text-md);
  line-height: 1.6;
  color: var(--_text);
  background: var(--ca-maroon);
}
.ca-footer a { text-decoration: none; transition: color .2s ease; }
.ca-footer a:hover { color: var(--ca-lime); }

/* ---- Three columns: brand | Explore | Visit + Connect ---- */
.ca-footer__top {
  display: grid;
  gap: 44px;
  padding-bottom: clamp(40px, 5vw, 56px);
}
@media (min-width: 720px) {
  .ca-footer__top { grid-template-columns: 1fr 1fr; }
  .ca-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .ca-footer__top { grid-template-columns: 1.5fr 1fr 1.3fr; gap: 0; }
  .ca-footer__brand { grid-column: auto; padding-right: clamp(32px, 4vw, 64px); }
  /* The two vertical rules between columns in the mockup. */
  .ca-footer__col {
    padding-inline: clamp(32px, 4vw, 64px);
    border-left: 1px solid var(--_rule);
  }
  .ca-footer__col:last-child { padding-right: 0; }
}

/* ---- Brand ---- */
.ca-footer__logo { display: inline-block; margin-bottom: 22px; }
/* White silhouette of whichever logo file is in use. max-height keeps
   the proportions whatever the file's shape. */
.ca-footer__logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76px;
  filter: brightness(0) invert(1);
}
.ca-footer__tagline {
  max-width: 30ch;
  margin-bottom: 28px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ca-cream);
}

.ca-footer__social { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; }
.ca-footer__social a {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--ca-cream);
  border: 1.5px solid rgba(251, 248, 242, 0.55);
  border-radius: 50%;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ca-footer__social a:hover {
  color: var(--ca-maroon);
  background: var(--ca-lime);
  border-color: var(--ca-lime);
}
.ca-footer__social svg { width: 22px; height: 22px; }

/* ---- Columns ---- */
.ca-footer__head {
  margin-bottom: 22px;
  font-family: var(--ca-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ca-cream);
}
.ca-footer__links { display: grid; gap: 12px; list-style: none; }

.ca-footer__contact { font-style: normal; }
.ca-footer__contact ul { display: grid; gap: 18px; list-style: none; }
.ca-footer__contact li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}
.ca-footer__icon {
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: var(--ca-pink-soft);
}

/* ---- Bottom bar ---- */
.ca-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 24px;
  font-size: 0.8125rem;
  color: var(--_fine);
  border-top: 1px solid var(--_rule);
}
.ca-footer__fine { display: grid; gap: 8px; }
.ca-footer__caps { letter-spacing: 0.16em; text-transform: uppercase; }
.ca-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ca-footer__disclaimer a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 900px) {
  .ca-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .ca-footer__fine--end { justify-items: end; text-align: right; }
}
/* The base rule makes every svg a block; this one sits in a line of text. */
.ca-footer__heart {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -1px;
  color: var(--ca-pink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .ca-footer a,
  .ca-footer__social a { transition: none; }
}


/* ============================================================
   14. DECORATION: BRUSH STROKES AND PHOTO FRAMES
   ============================================================ */
/* The hand-drawn stroke from layouts/partials/v2/brush.html. It takes
   the text colour and stretches to its box; each use sets its own
   position, size and colour. */
.ca-brush { display: block; width: 100%; height: 100%; }

/* A stroke that trails the last word of a headline, as in
   "TO DO IT? ~~~~". Sized in em so it scales with the headline. */
.ca-brush--trail {
  display: inline-block;
  width: 4.5em;
  height: 0.22em;
  margin-left: 0.2em;
  vertical-align: 0.25em;
}
@media (max-width: 479px) {
  .ca-brush--trail { width: 2.5em; }
}
.ca-brush--orange { color: var(--ca-orange-bright); }
.ca-brush--purple { color: var(--ca-purple); }
.ca-brush--pink   { color: var(--ca-pink-bright); }
/* The two-stroke version is taller, to fit the second stroke beneath. */
.ca-brush--trail.ca-brush--double { height: 0.33em; vertical-align: 0.15em; }

/* A photo with a solid colour block offset behind it, used all through
   the mockup. The block's position, size and colour are custom
   properties, set per use. No colour, no block. */
.ca-frame {
  position: relative;
  isolation: isolate;
  margin: 0;
}
.ca-frame img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
  object-fit: cover;
  background: var(--ca-line); /* shows while the photo loads */
}
.ca-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--block-top, auto);
  right: var(--block-right, auto);
  bottom: var(--block-bottom, auto);
  left: var(--block-left, auto);
  width: var(--block-w, 60%);
  height: var(--block-h, 80%);
  background: var(--block-color, transparent);
}
/* A second block, for frames that carry two: an orange square and a
   purple bar, say. Same custom properties with a 2 in the name. */
.ca-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--block2-top, auto);
  right: var(--block2-right, auto);
  bottom: var(--block2-bottom, auto);
  left: var(--block2-left, auto);
  width: var(--block2-w, 10%);
  height: var(--block2-h, 50%);
  background: var(--block2-color, transparent);
}
/* Rounded photo; the colour blocks behind it stay square, as in the mockup. */
.ca-frame--rounded img { border-radius: var(--ca-radius-card); }


/* ============================================================
   15. HOME HERO
   Two columns on cream: title, eyebrow, description and CTA on
   the left, one photo on the right with an orange block (top
   right) and a purple block (bottom left) behind it. With no
   photo set, a placeholder of the same shape shows instead.
   Stacks to text-then-photo on phones.
   Content: `hero` in content/_index.md.
   ============================================================ */
.ca-hero {
  /* The photo blocks can reach past the container. Clip them here,
     never on html or body (see section 3). */
  overflow-x: clip;
  background: var(--ca-cream);
}
.ca-hero__grid {
  display: grid;
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
  padding-block: clamp(40px, 6vw, 104px) clamp(56px, 7vw, 120px);
}

/* Text column */
.ca-hero__title {
  font-size: clamp(2.75rem, 1.25rem + 4.8vw, 6.75rem);
  line-height: 0.9;
}
.ca-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-maroon-deep);
}
/* Short orange rule before the eyebrow (decorative). */
.ca-hero__eyebrow::before {
  content: "";
  flex: none;
  width: 2.5em;
  height: 3px;
  background: var(--ca-orange-bright);
}
.ca-hero__text {
  max-width: 38ch;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  line-height: 1.55;
  color: var(--ca-ink);
}
.ca-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(24px, 3vw, 40px);
}
.ca-hero__actions .ca-btn {
  min-height: 60px;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
}

/* Photo column. Block offsets are percentages of the frame,
   so the squares scale with the photo. */
.ca-hero__photo {
  --ratio: 1 / 1; /* the photo is square; the sign must not be cropped */
  --block-color: var(--ca-orange-bright);
  --block-top: -6%;
  --block-right: -8%;
  --block-w: 64%;
  --block-h: 56%;
  --block2-color: var(--ca-purple);
  --block2-bottom: -6%;
  --block2-left: -8%;
  --block2-w: 44%;
  --block2-h: 40%;
  width: min(84%, 420px);
  justify-self: center;
}
.ca-hero__photo img { border: 3px solid var(--ca-paper); }

/* Stand-in until a photo is set: same shape and border as the photo. */
.ca-hero__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 4 / 5);
  background: var(--ca-line);
  border: 3px solid var(--ca-paper);
  color: var(--ca-ink);
}
.ca-hero__placeholder svg { width: 22%; opacity: 0.35; }

/* Phones: full-width button. */
@media (max-width: 759px) {
  .ca-hero__actions .ca-btn { flex-basis: 100%; }
}

/* Tablet and up: two columns, photo on the right. */
@media (min-width: 760px) {
  .ca-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .ca-hero__photo { width: min(100%, 560px); }
}


/* ============================================================
   16. HOME: "YOU KNOW WHAT YOU SHOULD DO"
   Headline, four icon rows and a closing line on the left; a
   photo with an orange block and a purple bar on the right.
   Content: `know` in content/_index.md.
   ============================================================ */
.ca-know { overflow-x: clip; } /* the photo's blocks reach past the container */
.ca-know__inner {
  display: grid;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
@media (min-width: 960px) {
  .ca-know__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.ca-know__title { font-size: var(--ca-h2); line-height: 0.95; }
.ca-know__title > span { display: block; }

.ca-know__lead {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.75rem);
  font-weight: 700;
  color: var(--ca-ink);
}

.ca-know__list {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: 18px;
  list-style: none;
}
.ca-know__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}
.ca-know__icon {
  display: grid;
  place-items: center;
  width: clamp(52px, 4.5vw, 68px);
  height: clamp(52px, 4.5vw, 68px);
  color: var(--ca-maroon);
  background: var(--ca-blush);
  border-radius: 50%;
}
.ca-know__icon .ca-icon { width: 54%; height: 54%; }
.ca-know__text {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
  line-height: 1.4;
  color: var(--ca-ink);
}
/* The second half of each row, the part that turns. */
.ca-know__text strong { display: block; font-weight: 700; }

/* The "Knowing better…" message under the rows, set off by a rule. */
.ca-know__rule {
  margin-top: clamp(24px, 3vw, 40px);
  border: 0;
  border-top: 2px solid var(--ca-line);
}
.ca-know__message { margin-top: clamp(20px, 2.6vw, 32px); }

/* Blocks measured from the mockup: an orange square off the top-left
   corner, a purple bar standing off the right edge. */
.ca-know__photo {
  --ratio: 597 / 750;
  --block-color: var(--ca-orange-bright);
  --block-top: -7%;
  --block-left: -7%;
  --block-w: 44%;
  --block-h: 34%;
  --block2-color: var(--ca-purple);
  --block2-top: 32%;
  --block2-right: -10%;
  --block2-w: 10%;
  --block2-h: 51%;
  width: min(90%, 600px);
  justify-self: center;
}


/* ============================================================
   17. HOME: "WHAT IF THE ANSWER ISN'T THINKING ABOUT IT MORE?"
   Orange field, photos bleeding off both edges, a headline with
   one maroon line, two questions whose endings sit on a pink band.

   The ground is the bright orange (#ff6b1a), as in the mockup. Cream text
   on it measures about 2.8:1, under the 3:1 floor even for headlines, so
   if that matters, point --_ground back at var(--ca-orange) (cream is
   4.7:1 there) or set the text to maroon.
   Content: `answer` in content/_index.md.
   ============================================================ */
.ca-answer {
  --_ground: var(--ca-orange-bright);
  overflow-x: clip;
  padding-block: var(--ca-section-py);
  color: var(--ca-cream);
  background: var(--_ground);
}
/* Full width, no container: the side columns run to the screen edges
   so the photos can bleed off them. */
.ca-answer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
}
.ca-answer__copy {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1; /* stays above the photos' colour blocks where they reach in */
  text-align: center;
}

.ca-answer__title {
  font-size: clamp(2.75rem, 1rem + 6vw, 7.5rem);
  line-height: 0.92;
  color: var(--ca-cream);
}
.ca-answer__title > span { display: block; }
.ca-answer__dark { color: var(--ca-maroon); }

.ca-answer__brush {
  width: 60%;
  height: clamp(10px, 1.1vw, 18px);
  margin: clamp(8px, 1vw, 14px) auto 0;
  color: var(--ca-purple);
}

.ca-answer__q {
  max-width: 44ch;
  margin: clamp(20px, 2.6vw, 36px) auto 0;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ca-answer__q + .ca-answer__q { margin-top: clamp(14px, 1.6vw, 22px); }
/* The pink band behind each question's ending: maroon on #f7a8d3, 8.5:1. */
.ca-answer__q mark {
  padding: 0 0.25em;
  color: var(--ca-maroon);
  background: var(--ca-pink-soft);
  box-decoration-break: clone;
}

/* Full cream on purpose: any transparency drops it under 4.5:1 here. */
.ca-answer__closing {
  max-width: 46ch;
  margin: clamp(24px, 3vw, 40px) auto 0;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-wrap: balance;
}

/* Photos: left one high with a soft-pink block off its top-right
   corner; right one low with a purple bar beneath. Measured from
   the mockup. */
.ca-answer__photo { grid-row: 1; width: min(100%, 380px); }
.ca-answer__photo--left {
  --ratio: 314 / 466;
  --block-color: var(--ca-pink-soft);
  --block-top: -9%;
  --block-right: -20%;
  --block-w: 84%;
  --block-h: 27%;
  grid-column: 1;
  justify-self: start;
  align-self: start;
  margin-top: clamp(24px, 3vw, 56px);
}
.ca-answer__photo--right {
  --ratio: 307 / 450;
  --block-color: var(--ca-purple);
  --block-bottom: -14%;
  --block-right: 0;
  --block-w: 65%;
  --block-h: 14%;
  grid-column: 3;
  justify-self: end;
  align-self: end;
  margin-bottom: clamp(48px, 5vw, 72px); /* room for the purple bar */
}

/* Below 960px the side columns get too narrow for the photos, so the
   section becomes text alone, centred on the orange. */
@media (max-width: 959px) {
  .ca-answer__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--ca-pad-x);
  }
  .ca-answer__copy { grid-column: 1; }
  .ca-answer__photo { display: none; }
}


/* ============================================================
   18. HOME: "THIS IS WHERE WE FLIP THE SCRIPT"
   Cream field (#fbf8f2): headline, a bold line, a paragraph, three
   pillars with white icons in purple circles (a colour that
   isn't gendered), a closing line, and a
   rounded photo with a purple block behind its top-right corner.

   Text here is maroon or ink: 14.7:1 and 15:1 on the cream.
   Content: `flip` in content/_index.md.
   ============================================================ */
.ca-flip {
  /* Colours taken from the mockup: pink ground, cream circles with deep-purple
     icons, deep maroon text. */
  --_ground: #fba2d0;
  --_icon-bg: #faf0e6;
  --_icon: #451755;
  --_block: #59268b;
  --_text: #3a0612;
  overflow-x: clip; /* the photo's block reaches past the container */
  background: var(--_ground);
}
.ca-flip__inner {
  display: grid;
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}
@media (min-width: 960px) {
  .ca-flip__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
}

.ca-flip__title { font-size: var(--ca-h2); line-height: 0.95; color: var(--ca-maroon); }
.ca-flip__title > span { display: block; }

.ca-flip__subtitle {
  max-width: 26ch;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--_text);
}
.ca-flip__text {
  max-width: 46ch;
  margin-top: 12px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
  line-height: 1.5;
  color: var(--_text);
}

.ca-flip__pillars {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 36px);
  list-style: none;
}
.ca-flip__pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}
.ca-flip__icon {
  display: grid;
  place-items: center;
  width: clamp(56px, 5vw, 76px);
  height: clamp(56px, 5vw, 76px);
  color: var(--_icon);          /* deep purple on cream */
  background: var(--_icon-bg);
  border-radius: 50%;
}
.ca-flip__icon .ca-icon { width: 52%; height: 52%; }
.ca-flip__pillar-title {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--_text);
}
.ca-flip__pillar-text {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.45;
  color: var(--_text);
}

.ca-flip__closing {
  max-width: 44ch;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.5rem);
  line-height: 1.4;
  color: var(--_text);
}
.ca-flip__closing strong { font-weight: 700; color: var(--_text); }

/* Purple block off the top-right corner, measured from the mockup. */
.ca-flip__photo {
  --ratio: 676 / 742;
  --block-color: var(--_block);
  --block-top: -6%;
  --block-right: -7%;
  --block-w: 52%;
  --block-h: 58%;
  width: min(92%, 640px);
  justify-self: center;
}


/* ============================================================
   19. HOME: "THE PATTERN MAY START INSIDE YOU"
   Deep-purple field: a headline (white, then cream) trailed by a
   pink arrow that runs right and turns down, then four life areas, each a
   blob-shaped photo, a title and a line of text.

   On this purple: cream 10.7:1, cream at 85% 8.2:1.
   Content: `areas` in content/_index.md.
   ============================================================ */
.ca-areas {
  color: var(--ca-cream);
  background: var(--ca-purple-deep);
}
.ca-areas__title {
  font-size: clamp(2rem, 1.1rem + 3.2vw, 4.25rem);
  line-height: 0.98;
  color: var(--ca-cream);
}
.ca-areas__title > span { display: block; }
.ca-areas__title > span:first-child { color: #fff; }

/* A pink arrow trailing the headline: it runs right, then turns down and points
   at the photos. Sized in em so it scales with the headline; the bar sits at the
   middle of the capitals and the head hangs below the baseline into the gap
   above the list. Pink on this purple is 3.3:1 (a graphic, 3:1 needed). v2.js
   draws it when it scrolls in: the line first, then the head. */
.ca-areas__arrow {
  display: inline-block;
  width: 3.5em;
  height: 1.48em;
  margin-left: 0.25em;
  vertical-align: -0.9em;
  overflow: visible;
  color: var(--ca-pink-bright);
}
.ca-reveal-arrow.is-pending .ca-areas__arrow-line,
.ca-reveal-arrow.is-pending .ca-areas__arrow-head { stroke-dasharray: 1; }
.ca-reveal-arrow.is-pending:not(.is-in) .ca-areas__arrow-line,
.ca-reveal-arrow.is-pending:not(.is-in) .ca-areas__arrow-head { stroke-dashoffset: 1; opacity: 0; }
.ca-reveal-arrow.is-pending.is-in .ca-areas__arrow-line { transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.ca-reveal-arrow.is-pending.is-in .ca-areas__arrow-head { transition: stroke-dashoffset 0.35s ease-out 1.25s; }

/* One column on phones, two on tablets, four with dividers on desktop. */
.ca-areas__list {
  display: grid;
  gap: clamp(36px, 4vw, 48px) clamp(24px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 56px);
  list-style: none;
}
@media (min-width: 640px) {
  .ca-areas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ca-areas__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .ca-areas__item { padding-inline: clamp(16px, 1.8vw, 28px); }
  .ca-areas__item + .ca-areas__item { border-left: 1px solid rgba(251, 248, 242, 0.35); }
}
.ca-areas__item { text-align: center; }

/* Blob-shaped photos: eight-value border-radius gives each one an
   organic outline. Four shapes, cycled in order, so no two
   neighbours match. */
.ca-areas__photo {
  width: 100%;
  aspect-ratio: 7 / 4;
  margin-bottom: clamp(16px, 2vw, 24px);
  object-fit: cover;
  background: rgba(251, 248, 242, 0.12); /* shows while the photo loads */
}
.ca-areas__photo--1 { border-radius: 42% 58% 55% 45% / 55% 45% 58% 42%; }
.ca-areas__photo--2 { border-radius: 52% 48% 38% 62% / 60% 50% 50% 40%; }
.ca-areas__photo--3 { border-radius: 60% 40% 50% 50% / 45% 58% 42% 55%; }
.ca-areas__photo--4 { border-radius: 38% 62% 58% 42% / 52% 40% 60% 48%; }

.ca-areas__name {
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  line-height: 1;
  color: var(--ca-cream);
}
.ca-areas__text {
  max-width: 26ch;
  margin: 10px auto 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  line-height: 1.5;
  text-wrap: balance;
  color: rgba(251, 248, 242, 0.85);
}


/* ============================================================
   20. HOME: "HI, I'M DR. TANYA LEA"
   Photo on the left with an orange circle behind it; a white card
   on the right holding the copy, with an orange block above it and
   a maroon panel running behind it to the screen edge. Photo and
   card both sit on the section's bottom edge.

   The card is a size container, so the headline scales with the
   card rather than the window, and "Dr. Tanya Lea." holds one line.
   Orange text uses the deeper orange: 4.9:1 on the card.
   Content: `meet` in content/_index.md.
   ============================================================ */
.ca-meet {
  --_lead: clamp(40px, 4.5vw, 72px); /* height of the orange block, and the gap above the card */
  position: relative;
  overflow: clip; /* the circle and panel run past the edges */
  padding-top: var(--_lead);
  background: var(--ca-cream);
}
/* Maroon panel behind the card's right side, to the screen edge. */
.ca-meet::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 21%;
  background: var(--ca-maroon);
}
/* Orange block sitting on top of the card, just left of the panel. */
.ca-meet::after {
  content: "";
  position: absolute;
  top: 0;
  right: 21%;
  width: 11%;
  height: var(--_lead);
  background: var(--ca-orange-bright);
}

.ca-meet__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}

/* ---- Photo ---- */
.ca-meet__photo {
  position: relative;
  isolation: isolate;
  justify-self: end;
  width: min(100%, 720px);
  margin: 0;
}
.ca-meet__photo img { display: block; width: 100%; height: auto; }
/* The orange circle behind her, cut off by the section's bottom edge. */
.ca-meet__photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 24%;
  left: -8%;
  width: 104%;
  aspect-ratio: 1;
  background: var(--ca-orange-bright);
  border-radius: 50%;
}

/* The home page's portrait is a round picture with its own orange circle, so
   the drawn circle is dropped and the picture sits centred in its column,
   level with the middle of the card. */
.ca-meet__photo--circle { align-self: center; justify-self: center; width: min(88%, 640px); }
.ca-meet__photo--circle::before { display: none; }

/* ---- Card ---- */
.ca-meet__card {
  container-type: inline-size;
  position: relative; /* paints over the circle where they meet on phones */
  justify-self: end;
  /* An explicit width, never auto margins. A size container measures
     its own content as zero wide, so shrink-to-fit sizing collapses it
     to its padding. */
  width: min(900px, calc(100% - 3.5vw));
  margin-right: 3.5vw;
  padding: clamp(28px, 3.6vw, 64px);
  background: var(--ca-paper);
}
.ca-meet__title { font-size: clamp(2.25rem, 12.5cqi, 7.5rem); line-height: 0.9; }
.ca-meet__title > span { display: block; }
.ca-meet__subtitle {
  margin-top: 0.35em;
  font-size: clamp(1.5rem, 5.6cqi, 3rem);
  line-height: 0.98;
  color: var(--ca-orange);
}
.ca-meet__bio {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--ca-ink);
}
/* The pink-washed callout reaches a little into the card's left padding, as in the mockup. */
.ca-meet__callout {
  margin: clamp(20px, 2.4vw, 28px) 0 0 calc(-1 * clamp(12px, 1.6vw, 32px));
  padding: 14px clamp(12px, 1.6vw, 32px);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.4;
  color: var(--ca-ink);
  background: color-mix(in srgb, var(--ca-pink-soft) 45%, var(--ca-paper));
}
.ca-meet__callout strong { display: block; font-weight: 700; color: var(--ca-maroon); }

/* ---- Credentials | Approach ---- */
.ca-meet__cols {
  display: grid;
  gap: 28px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--ca-line);
}
@container (min-width: 560px) {
  .ca-meet__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .ca-meet__col + .ca-meet__col {
    margin-left: clamp(20px, 3cqi, 36px);
    padding-left: clamp(20px, 3cqi, 36px);
    border-left: 1px solid var(--ca-line);
  }
}
.ca-meet__label {
  margin-bottom: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-meet__creds { display: grid; gap: 10px; list-style: none; }
.ca-meet__creds li,
.ca-meet__approach {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-meet__creds li { position: relative; padding-left: 1.6em; }
.ca-meet__creds li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0.2em;
  width: 0.55em;
  height: 0.55em;
  background: var(--ca-orange-bright);
  border-radius: 50%;
}
.ca-meet__approach strong { font-weight: 700; color: var(--ca-maroon); }
.ca-meet__btn { margin-top: 22px; }
/* The line pointing to the credentials, and the button, under a rule. */
.ca-meet__more {
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--ca-line);
}
.ca-meet__more .ca-meet__btn { display: flex; width: 45%; min-width: max-content; margin-top: 18px; padding-inline: 0.9em; white-space: nowrap; }
@media (max-width: 959px) { .ca-meet__more .ca-meet__btn { width: 100%; min-width: 0; } }
/* A button label given as lines ("Meet" / "Dr. Tanya Lea"): each on its own line. */
.ca-meet__btn-text > span { display: block; }

/* ---- Below 960px: photo above the card, no panel or block ---- */
@media (max-width: 959px) {
  .ca-meet { padding-top: 0; }
  .ca-meet::before,
  .ca-meet::after { display: none; }
  .ca-meet__inner { grid-template-columns: minmax(0, 1fr); }
  .ca-meet__photo {
    justify-self: center;
    width: min(88%, 480px);
    margin-top: clamp(24px, 6vw, 48px);
  }
  .ca-meet__card {
    justify-self: stretch;
    width: auto;
    margin: 0 var(--ca-pad-x) var(--ca-section-py);
  }
}


/* ============================================================
   21. CHECKLIST
   A tone-coloured circle with a white check before each item.
   --2col flows the items down two columns. Shared: the service
   cards use it, and later sections can too.
   ============================================================ */
.ca-check { display: grid; gap: 8px; list-style: none; }
.ca-check li {
  position: relative;
  padding-left: 1.9em;
  line-height: 1.4;
  break-inside: avoid;
}
.ca-check li::before {
  content: "";
  position: absolute;
  top: 0.05em;
  left: 0;
  width: 1.3em;
  height: 1.3em;
  background: var(--ca-tone, var(--ca-pink)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 68% no-repeat;
  border-radius: 50%;
}
.ca-check--2col { display: block; columns: 2; column-gap: 1.25em; }
.ca-check--2col li { margin-bottom: 8px; }
/* One row, items split by thin rules ("A | B | C"); wraps on narrow screens. */
.ca-check--inline { display: flex; flex-wrap: wrap; gap: 10px 0; }
.ca-check--inline li {
  margin-right: 16px;
  padding-right: 16px;
  border-right: 1px solid var(--ca-line);
}
.ca-check--inline li:last-child { margin-right: 0; padding-right: 0; border-right: 0; }


/* ============================================================
   22. HOME: "WAYS WE CAN WORK TOGETHER"
   Two-tone title, a two-part intro split by a rule, and up to
   three service cards. Each card takes its colour from a tone
   class, so its number, kicker, rule, checks and button follow.
   Content: `work` in content/_index.md.
   ============================================================ */
.ca-ways__title { font-size: var(--ca-h2); text-align: center; }

.ca-ways__intro {
  display: grid;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(20px, 2.4vw, 32px);
  text-align: center;
}
.ca-ways__lead {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-ways__text {
  max-width: 36rem;
  margin-inline: auto;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
/* Side by side with the maroon rule between, as in the mockup. */
@media (min-width: 860px) {
  .ca-ways__intro {
    grid-template-columns: auto minmax(0, 36rem);
    align-items: center;
    gap: 0;
    text-align: left;
  }
  .ca-ways__lead {
    margin: 0;
    padding-right: clamp(20px, 2.4vw, 32px);
    border-right: 2px solid var(--ca-maroon);
  }
  .ca-ways__text { margin: 0; padding-left: clamp(20px, 2.4vw, 32px); }
}

/* Cards wrap and centre, so two cards (Studio hidden) or three both sit right. */
.ca-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 2vw, 28px);
  margin-top: clamp(32px, 4vw, 48px);
  list-style: none;
}
.ca-cards > li { display: flex; flex: 1 1 320px; max-width: 440px; }

.ca-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--ca-paper);
  border-radius: var(--ca-radius-card);
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--ca-line); /* shows while the photo loads */
}
.ca-card__body {
  --_pad: clamp(20px, 2.2vw, 30px);
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 var(--_pad) var(--_pad);
}
/* The number sits on a tinted tab that rises into the photo's bottom-left
   corner, curving away on its right. Decorative, so hidden from screen
   readers; the list already conveys the order. */
.ca-card__num {
  position: relative;
  align-self: flex-start;
  margin: -0.62em 0 0 calc(-1 * var(--_pad));
  padding: 0.12em 0.9em 0 var(--_pad);
  font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3.25rem);
  line-height: 1;
  color: var(--ca-tone-bright, var(--ca-pink-bright));
  background: linear-gradient(90deg, color-mix(in srgb, var(--ca-tone-bright, var(--ca-pink-bright)) 22%, var(--ca-paper)), var(--ca-paper));
  border-top-right-radius: 80% 100%;
}
.ca-card__title-link { color: inherit; text-decoration: none; }
.ca-card__title-link:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ca-card__title {
  margin-top: 6px;
  font-size: clamp(1.75rem, 1.45rem + 0.9vw, 2.5rem);
  line-height: 0.95;
}
.ca-card__kicker { margin-top: 6px; }
.ca-card__text {
  margin-top: 10px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-card__rule {
  margin: 16px 0 14px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ca-tone-bright, var(--ca-pink-bright)) 55%, transparent);
}
.ca-card .ca-check {
  margin-bottom: 22px;
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  color: var(--ca-ink);
}
/* Pinned to the bottom so the three buttons line up whatever the copy length. */
.ca-card__btn { margin-top: auto; }

/* An optional quiet line under the cards (a page's workNote). */
.ca-ways__note {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 0.9375rem;
  text-align: center;
  color: var(--ca-ink-2);
}
.ca-ways__note a { color: var(--ca-maroon); text-underline-offset: 3px; }
.ca-ways__note a:hover { color: var(--ca-pink); }


/* ============================================================
   23. HOME: TESTIMONIALS
   One quote at a time on deep maroon, stepped through with the
   arrows. Same carousel script as the banner (v2.js). The slides
   share one grid cell, so the section keeps the height of the
   longest quote and doesn't jump when the quote changes.
   Soft pink on deep maroon: 9.5:1.
   Content: `quotes` in content/_index.md.
   ============================================================ */
.ca-quotes {
  color: var(--ca-cream);
  background: var(--ca-maroon-deep);
}
.ca-quotes__inner {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 32px);
}
.ca-quotes__track { display: grid; flex: 1; min-width: 0; }
.ca-quotes__slide {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  text-align: center;
}
/* Hidden slides keep their place in the grid, so the height holds,
   but are invisible and out of the accessibility tree. */
.ca-quotes__slide[hidden] { display: block; visibility: hidden; }

/* Sentence case here, unlike the other display type: it's a quote. */
.ca-quotes__quote {
  max-width: 12.5em;
  margin-inline: auto;
  font-size: clamp(1.875rem, 1rem + 3.2vw, 4.5rem);
  line-height: 1.02;
  text-transform: none;
  color: var(--ca-pink-soft);
}
.ca-quotes__cite {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ca-cream);
}
/* The short orange rule above the name. */
.ca-quotes__cite::before {
  content: "";
  display: block;
  width: clamp(80px, 8vw, 130px);
  height: 4px;
  margin: 0 auto clamp(16px, 2vw, 24px);
  background: var(--ca-orange-bright);
}
.ca-quotes__cite span { margin-inline: 0.5em; }

.ca-quotes__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ca-cream);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease;
}
.ca-quotes__arrow:hover { background: rgba(251, 248, 242, 0.1); }
.ca-quotes__arrow svg { width: 32px; height: 32px; }
.no-js .ca-quotes__arrow { display: none; }

.ca-quotes__more {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 0.9375rem;
  text-align: center;
}
.ca-quotes__more a { color: var(--ca-cream); text-underline-offset: 3px; }
.ca-quotes__more a:hover { color: var(--ca-lime); }

/* Phones: the quote takes the full width, arrows move underneath. */
@media (max-width: 599px) {
  .ca-quotes__inner { flex-wrap: wrap; justify-content: center; }
  .ca-quotes__track { order: -1; flex-basis: 100%; }
  .ca-quotes__arrow { width: 44px; height: 44px; margin-top: 16px; }
  .ca-quotes__arrow svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-quotes__arrow { transition: none; }
}


/* ============================================================
   24. EYEBROW
   A small spaced-caps label above a headline, in the tone colour
   (maroon when there isn't one). --lines puts a rule either side
   ("— PODCAST —"); --line-after puts one after ("STILL NOT SURE —").
   The text sits in a span so the trailing letter-spacing can be
   cancelled and the label centres true.
   ============================================================ */
.ca-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ca-tone, var(--ca-maroon));
}
.ca-eyebrow > span { margin-inline-end: -0.3em; }
.ca-eyebrow--lines { justify-content: center; }
.ca-eyebrow--lines::before,
.ca-eyebrow--lines::after,
.ca-eyebrow--line-after::after {
  content: "";
  flex: none;
  width: clamp(48px, 6vw, 96px);
  height: 2px;
  background: currentColor;
}
/* A thick orange bar before the words ("▬ SHOP THE ——"). */
.ca-eyebrow--bar::before {
  content: "";
  flex: none;
  width: clamp(64px, 7vw, 112px);
  height: clamp(8px, 0.8vw, 13px);
  background: var(--ca-orange-bright);
  border-radius: 999px;
}


/* ============================================================
   25. VIDEO
   A thumbnail link that v2.js swaps for the YouTube player on
   click. The frame holds 16:9 before and after the swap.
   ============================================================ */
.ca-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 16px;
  box-shadow: var(--ca-shadow-card);
}
.ca-video__link { position: absolute; inset: 0; display: block; }
.ca-video__link img { width: 100%; height: 100%; object-fit: cover; }
/* Drawn inside the frame: the frame clips anything outside it. */
.ca-video__link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.ca-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 54px;
  background: var(--ca-pink);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, background-color .2s ease;
}
/* The white triangle. */
.ca-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}
.ca-video__link:hover .ca-video__play {
  background: color-mix(in srgb, var(--ca-pink) 84%, #000);
  transform: translate(-50%, -50%) scale(1.08);
}
.ca-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ca-video__play { transition: none; }
  .ca-video__link:hover .ca-video__play { transform: translate(-50%, -50%); }
}


/* ============================================================
   26. HOME: PODCAST
   Eyebrow, two-tone title, spaced subtitle, the video, and a
   caption. On wide screens a script note with a pink swash and a
   hand-drawn arrow points at the video from the right.
   "Story" uses the deeper orange: 4.7:1 on cream.
   Content: `podcast` in content/_index.md.
   ============================================================ */
.ca-podcast {
  /* The note beside the video sizes itself to fit (below); this is the
     safety net, never on html or body (see section 3). */
  overflow-x: clip;
  text-align: center;
}
.ca-podcast .ca-eyebrow { margin-bottom: clamp(10px, 1.2vw, 16px); }
.ca-podcast__title { font-size: var(--ca-h2); }
.ca-podcast__accent { color: var(--ca-orange); }
.ca-podcast__subtitle {
  margin-top: 10px;
  font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-podcast__stage {
  position: relative;
  max-width: 780px;
  margin: clamp(20px, 2.4vw, 28px) auto 0;
}
.ca-podcast__caption {
  max-width: 62ch;
  margin: clamp(14px, 1.6vw, 20px) auto 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  line-height: 1.5;
  text-wrap: balance;
  color: var(--ca-ink);
}

/* The note only fits beside the video on wide screens. */
.ca-podcast__note { display: none; }
@media (min-width: 1280px) {
  /* The room to the right of the 780px video is (100vw - 780px) / 2. The note
     (box, words and the pink swash) takes up to 250px of it, leaving 48px for
     the gap and a scrollbar, and scales down to fit on narrower screens: full
     size from about 1440px, 29px type at 1280px. */
  .ca-podcast__note {
    display: block;
    position: absolute;
    top: -2%;
    left: calc(100% + 12px);
    width: min(250px, calc((100vw - 780px) / 2 - 48px));
    color: var(--ca-maroon);
  }
  .ca-podcast__note-text {
    position: relative;
    isolation: isolate;
    width: fit-content;
    margin-left: 28px;
    padding: 0.15em 0.4em;
    font-size: clamp(1.75rem, calc((100vw - 780px) * 0.0719 - 6.9px), 2.5rem);
    line-height: 1;
    text-align: left;
    transform: rotate(-8deg);
  }
  .ca-podcast__note-lead { display: block; }
  .ca-podcast__mark {
    position: relative;
    display: block;
    width: fit-content;
    margin-left: 0.3em;                  /* slight handwritten indent on line two */
  }
  .ca-podcast__mark-text { position: relative; display: inline-block; }
  .ca-podcast__swipe {                   /* the marker swipe behind "Dr. Tanya" */
    position: absolute;
    z-index: -1;
    top: 0.3em;                          /* nudge up or down to move the swipe */
    left: -0.2em;
    width: calc(100% + 0.6em);           /* runs a little past "Tanya" like a quick swipe */
    height: auto;
    aspect-ratio: 200 / 36;
    color: var(--ca-pink-soft);
  }
  .ca-podcast__arrow { width: 110px; height: 90px; margin-top: 4px; }
}


/* Podcast note entrance: write, swipe, point. v2.js adds .is-pending (only if the
   note starts below the fold and motion is allowed) and .is-in on scroll. */
.ca-podcast__note.is-pending .ca-podcast__note-lead,
.ca-podcast__note.is-pending .ca-podcast__mark-text { clip-path: inset(-40% -10% -40% -10%); }
.ca-podcast__note.is-pending .ca-podcast__swipe     { clip-path: inset(0 0 0 0); }
.ca-podcast__note.is-pending .ca-podcast__arrow path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.ca-podcast__note.is-pending:not(.is-in) .ca-podcast__note-lead,
.ca-podcast__note.is-pending:not(.is-in) .ca-podcast__mark-text { clip-path: inset(-40% 100% -40% -10%); }
.ca-podcast__note.is-pending:not(.is-in) .ca-podcast__swipe      { clip-path: inset(0 100% 0 0); }
.ca-podcast__note.is-pending:not(.is-in) .ca-podcast__arrow path { stroke-dashoffset: 1; }

.ca-podcast__note.is-in .ca-podcast__note-lead  { transition: clip-path 0.6s ease-out; }
.ca-podcast__note.is-in .ca-podcast__mark-text  { transition: clip-path 0.5s ease-out 0.5s; }
.ca-podcast__note.is-in .ca-podcast__swipe      { transition: clip-path 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) 1.05s; }  /* fast start, soft finish */
.ca-podcast__note.is-in .ca-podcast__arrow-line { transition: stroke-dashoffset 0.6s ease-in-out 1.45s; }
.ca-podcast__note.is-in .ca-podcast__arrow-head { transition: stroke-dashoffset 0.25s ease-out 2s; }


/* ============================================================
   27. HOME: FAQ
   Not in the mockup; kept because it carries the "coaching, not
   therapy" answer. Blush ground so it doesn't run into the cream
   sections either side. One question open at a time where the
   browser supports <details name> (most do); elsewhere they open
   independently.
   On blush: maroon 11:1, ink 10:1, pink 4.0:1 (display size only).
   Content: `faq` in content/_index.md, which also builds the
   FAQPage structured data.
   ============================================================ */
.ca-faq { background: var(--ca-blush); }
.ca-faq__inner { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 960px) {
  .ca-faq__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    align-items: start;
  }
  /* The heading stays in view while the list scrolls past, just below the sticky masthead (v2.js keeps --ca-masthead-h current). */
  .ca-faq__head { position: sticky; top: calc(var(--ca-masthead-h, 96px) + 24px); }
}
.ca-faq__title { font-size: var(--ca-h2); }
.ca-faq__accent { color: var(--ca-pink); }

.ca-faq__list { display: grid; gap: 12px; }
/* The small title above the questions, in the list's column. */
.ca-faq__label {
  margin-bottom: 4px;
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  line-height: 1;
}
.ca-faq__item {
  background: var(--ca-paper);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(75, 10, 18, 0.06);
}
.ca-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ca-maroon);
  list-style: none;
  border-radius: 14px;
  cursor: pointer;
}
.ca-faq__item summary::-webkit-details-marker { display: none; }
/* Pink plus in a circle; turns into an x when open. */
.ca-faq__item summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  background: var(--ca-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 50% no-repeat;
  border-radius: 50%;
  transition: transform .2s ease;
}
.ca-faq__item[open] summary::after { transform: rotate(45deg); }
.ca-faq__answer {
  padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--ca-ink);
}
@media (prefers-reduced-motion: reduce) {
  .ca-faq__item summary::after { transition: none; }
}


/* ============================================================
   28. HOME: "STILL NOT SURE WHERE TO BEGIN?"
   One row on desktop: eyebrow and two-tone title | a ruled
   paragraph | the lime button that opens the booking popup.
   Stacks and centres below 960px.
   Content: `begin` in content/_index.md.
   ============================================================ */
.ca-begin { background: var(--ca-cream); }
.ca-begin__inner {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  justify-items: center;
  text-align: center;
}
.ca-begin .ca-eyebrow { justify-content: center; }
/* Maroon words, pink rule. */
.ca-begin__eyebrow::after { background: var(--ca-pink-bright); }
.ca-begin__title {
  margin-top: 8px;
  font-size: clamp(2.75rem, 1.4rem + 3.4vw, 5rem);
}
.ca-begin__text {
  max-width: 40ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-begin__btn {
  padding: 0.95em 1.8em;
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.1875rem);
}
/* 960px and up: the heading on its own row, then the text and button
   side by side beneath it. */
@media (min-width: 960px) {
  .ca-begin__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head head"
      "text btn";
    align-items: center;
    justify-items: start;
    gap: clamp(20px, 2.4vw, 32px) clamp(28px, 3vw, 48px);
    text-align: left;
  }
  .ca-begin__head { grid-area: head; }
  .ca-begin__text { grid-area: text; }
  .ca-begin__btn  { grid-area: btn; }
  .ca-begin .ca-eyebrow { justify-content: flex-start; }
}
/* 1360px and up: everything in one row, the text behind a rule, as in
   the mockup. Narrower than this, the heading and button leave the text
   too little room. */
@media (min-width: 1360px) {
  .ca-begin__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "head text btn";
  }
  .ca-begin__text {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-left: clamp(24px, 2.4vw, 40px);
    border-left: 2px solid rgba(75, 10, 18, 0.35);
  }
}


/* ============================================================
   29. ABOUT: HERO, "THIS DIDN'T START WITH A CREDENTIAL."
   Photo with an orange block off its top-left corner and a purple
   bar off its right edge; the story beside it. Photo first on
   phones.
   "Credential." uses the deeper orange: 4.7:1 on cream.
   Content: `hero` in content/about.md.
   ============================================================ */
.ca-origin { overflow-x: clip; } /* the photo's blocks reach past the container */
.ca-origin__inner {
  display: grid;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
@media (min-width: 960px) {
  .ca-origin__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Blocks measured from the mockup. */
.ca-origin__photo {
  --ratio: 644 / 840;
  --block-color: var(--ca-orange-bright);
  --block-top: -6.7%;
  --block-left: -8.2%;
  --block-w: 43%;
  --block-h: 32%;
  --block2-color: var(--ca-purple);
  --block2-top: 39%;
  --block2-right: -9.5%;
  --block2-w: 9.5%;
  --block2-h: 46%;
  width: min(88%, 620px);
  justify-self: center;
}

.ca-origin__title { font-size: clamp(2.75rem, 1.2rem + 5.4vw, 7rem); line-height: 0.9; }
.ca-origin__title > span { display: block; }
.ca-origin__accent { color: var(--ca-orange); }
.ca-origin__kicker {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-origin__rule {
  width: clamp(72px, 7vw, 110px);
  height: 4px;
  margin: clamp(16px, 2vw, 24px) 0;
  border: 0;
  background: var(--ca-orange-bright);
}
.ca-origin__body {
  display: grid;
  gap: 0.9em;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-origin__body strong { font-weight: 700; color: var(--ca-maroon); }


/* ============================================================
   30. PAPER NOTE
   A tilted cream card with a strip of pink tape across its top
   edge, as in the About mockup. --clip adds a paperclip (the
   partial draws it). The tilt eases off on small screens.
   ============================================================ */
.ca-note {
  --_tilt: -2deg;
  position: relative;
  padding: clamp(36px, 4vw, 56px) clamp(24px, 3.2vw, 48px) clamp(28px, 3vw, 44px);
  background: var(--ca-note);
  box-shadow:
    0 2px 4px rgba(75, 10, 18, 0.08),
    0 22px 44px -18px rgba(75, 10, 18, 0.35);
  transform: rotate(var(--_tilt));
}
/* The tape. */
.ca-note::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: clamp(96px, 9vw, 130px);
  height: 30px;
  background: rgba(255, 45, 142, 0.45);
  transform: translateX(-50%) rotate(-3deg);
}
@media (max-width: 759px) {
  .ca-note { --_tilt: -1deg; }
}
.ca-note__title {
  margin-bottom: 0.6em;
  padding-bottom: 0.12em;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  color: var(--ca-maroon);
  border-bottom: 2px solid var(--ca-maroon);
}
/* Paperclip over the note's top-left edge (drawn by the partial; shape
   from Lucide, ISC licence). */
.ca-note__clip {
  position: absolute;
  top: -26px;
  left: 14px;
  width: 56px;
  height: 56px;
  color: #8F8A84;
  transform: rotate(-20deg);
}


/* ============================================================
   31. ABOUT: "WHAT IF THE ANSWER WASN'T TRYING HARDER?"
   Soft-pink field: headline with its last line in burnt orange,
   a short rule, the story, and a paper note listing what she
   discovered.
   Text on this pink is maroon or ink only (ink-2 is 4.5:1, too
   close). The orange line uses --ca-orange-deep: the brighter
   oranges measure under 3:1 on this pink.
   Content: `harder` in content/about.md.
   ============================================================ */
.ca-harder { background: var(--ca-pink-soft); }
.ca-harder__inner {
  display: grid;
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}
@media (min-width: 960px) {
  .ca-harder__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.ca-harder__title { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 6.5rem); line-height: 0.92; }
.ca-harder__title > span { display: block; }
.ca-harder__accent { color: var(--ca-orange-deep); }
.ca-harder__rule {
  width: clamp(72px, 7vw, 110px);
  height: 4px;
  margin: clamp(18px, 2.2vw, 28px) 0;
  border: 0;
  background: var(--ca-orange-deep);
}

.ca-harder__copy p {
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-harder__copy p + p { margin-top: 0.8em; }
.ca-harder__lines span { display: block; }
.ca-harder__strong {
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem) !important;
  font-weight: 700;
  line-height: 1.35 !important;
  color: var(--ca-maroon) !important;
}

.ca-harder__note { width: min(100%, 560px); justify-self: center; }
@media (min-width: 960px) {
  .ca-harder__note { justify-self: end; }
}
.ca-harder__note .ca-check {
  gap: clamp(14px, 1.6vw, 20px);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  color: var(--ca-ink);
}


/* ============================================================
   32. ABOUT: "SHE WENT LOOKING FOR ANSWERS."
   Same layout as the home page's "Hi, I'm Dr. Tanya Lea": the
   .ca-meet classes in section 20 do the work. These are the
   variations this page's card needs: a bigger subtitle, a script
   callout with a purple stroke, display-type column labels,
   stacked credentials, the orange "Mind. Body. …" list, and a
   small scope note. Sizes in cqi follow the card, as in section 20.
   Content: `deeper` in content/about.md; credentials and the
   note from data/credentials.yaml.
   ============================================================ */
.ca-deeper .ca-meet__subtitle { font-size: clamp(1.75rem, 8cqi, 4.5rem); }

/* Script callout: two handwritten lines on the pink wash, the second
   set in and in purple. They appear with the colour-sweep reveal, at the end of this file. */
.ca-meet__callout--script {
  padding-block: 10px 18px;
  font-family: var(--ca-font-script);
  font-size: clamp(1.75rem, 6cqi, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ca-ink);
}
.ca-meet__callout--script span { display: block; }
.ca-meet__callout--script span + span { margin-left: 1.2em; }
.ca-meet__callout--script span + span { color: var(--ca-purple); }

/* Column labels in the display face, each with a short purple underline. */
.ca-meet__label--display {
  margin-bottom: 16px;
  font-family: var(--ca-font-display);
  font-size: clamp(1.125rem, 4cqi, 1.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
}
.ca-meet__label--display::after {
  content: "";
  display: block;
  width: 3em;
  height: 3px;
  margin-top: 8px;
  background: var(--ca-purple);
  border-radius: 2px;
}

/* Credentials as a bold title with a detail line under it, no bullets. */
.ca-meet__creds--stacked { gap: 14px; }
.ca-meet__creds--stacked li { padding-left: 0; }
.ca-meet__creds--stacked li::before { display: none; }
.ca-meet__creds--stacked strong { display: block; font-weight: 700; color: var(--ca-maroon); }
.ca-meet__creds--stacked span { display: block; font-size: 0.9em; }

/* What she brought together: one statement. Each word carries a coloured
   underline (purple, deep orange, lime, soft pink, in list order). The
   underline is a background, so it follows the word if it wraps. Entrances are
   in section 101. */
.ca-brought {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 0.4em;                  /* row gap, space between words */
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
  font-size: clamp(1.5rem, 5.6cqi, 2.5rem);
  line-height: 1;
  color: var(--ca-maroon);
}
.ca-brought li {
  padding-bottom: 0.14em;
  background-image: linear-gradient(var(--ca-u), var(--ca-u));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.14em;       /* the coloured underline */
}
.ca-brought li:nth-child(1) { --ca-u: var(--ca-purple); }
.ca-brought li:nth-child(2) { --ca-u: var(--ca-orange-deep); }
.ca-brought li:nth-child(3) { --ca-u: var(--ca-lime); }
.ca-brought li:nth-child(4) { --ca-u: var(--ca-pink-soft); }

.ca-brought-note {
  margin: 14px 0 0;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--ca-ink);
}

/* Scope note at the foot of the card: ink-2 on the card, 7.9:1. */
.ca-meet__scope {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ca-ink-2);
  border-top: 1px solid var(--ca-line);
}


/* ============================================================
   33. ABOUT: "THAT'S WHEN THIS BECAME ABOUT MORE THAN DR. TANYA."
   Bright orange field with a paper note (clip and tape) holding the
   story, and a tilted photo with a pink block and a purple bar.
   The bright orange is fine here: no text sits on it, only on the
   note. Inside the note, the orange line uses --ca-orange-deep,
   5.8:1 on the note's cream.
   Content: `more` in content/about.md.
   ============================================================ */
.ca-more {
  overflow-x: clip;
  background: var(--ca-orange-bright);
}
.ca-more__inner {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 960px) {
  .ca-more__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}

.ca-more__note { --_tilt: -1.5deg; max-width: 640px; }
.ca-more__title {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem);
  line-height: 0.95;
}
.ca-more__title::after {
  content: "";
  display: block;
  width: clamp(56px, 5vw, 80px);
  height: 4px;
  margin-top: 14px;
  background: var(--ca-pink-bright);
}
.ca-more__story,
.ca-more__after {
  display: grid;
  gap: 0.8em;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  color: var(--ca-ink);
}
.ca-more__story { margin-top: 18px; }
.ca-more__after { margin-top: 10px; }
.ca-more__story strong,
.ca-more__after strong { font-weight: 700; color: var(--ca-maroon); }
.ca-more__rule {
  width: 64px;
  height: 3px;
  margin: 22px 0 12px;
  border: 0;
  background: var(--ca-orange-deep);
}
.ca-more__turn {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ca-orange-deep);
}

/* The photos: stacked on phones; from 960px a column that starts level with the
   top of the section and runs down beside the note, each photo set to one side
   in turn and tucked over the corner of the one above (negative top margin, a
   share of the column's width), so more or taller photos can't stretch the
   section past the note. Every photo reveals as it scrolls in (.ca-frame does that), so the
   next one appears below the last as the page moves. */
.ca-more__photos { display: grid; gap: clamp(36px, 9vw, 56px); }   /* phones: stacked, one after another */
@media (min-width: 960px) {
  .ca-more__inner { align-items: start; }
  .ca-more__photos { gap: 0; }
  .ca-more__photo:nth-child(n + 2) { margin-top: -10%; }
  .ca-more__photo { width: 80%; }
  .ca-more__photo:nth-child(even) { justify-self: end; }
}

/* Tilted photo; blocks peek out at the top-left and lower right, as in the mockup. */
.ca-more__photo {
  --ratio: 840 / 710;
  --block-color: var(--ca-pink-soft);
  --block-top: -3%;
  --block-left: -2.5%;
  --block-w: 24%;
  --block-h: 29%;
  --block2-color: var(--ca-purple);
  --block2-top: 56%;
  --block2-right: -2.5%;
  --block2-w: 4.8%;
  --block2-h: 39%;
  transform: rotate(1.5deg);
}
.ca-more__photo img { border: 4px solid var(--ca-paper); }
.ca-more__photo:nth-child(2) {
  --block-color: var(--ca-purple);
  --block-top: auto; --block-left: auto; --block-right: -3%; --block-bottom: -4%;
  --block-w: 26%; --block-h: 30%;
  --block2-color: var(--ca-pink-soft);
  --block2-top: -3%; --block2-right: auto; --block2-left: -2.5%; --block2-w: 5%; --block2-h: 38%;
  transform: rotate(-1.5deg);
}
.ca-more__photo:nth-child(3) {
  --block-color: var(--ca-lime);
  --block-w: 22%; --block-h: 26%;
  --block2-color: var(--ca-maroon);
  transform: rotate(1deg);
}


/* ============================================================
   35. CUTOUT PHOTO
   A transparent cutout of a person standing on an orange circle.
   The circle is cut off by whatever clips the section.
   ============================================================ */
.ca-cutout {
  position: relative;
  isolation: isolate;
  margin: 0;
}
.ca-cutout img { display: block; width: 100%; height: auto; }
.ca-cutout::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 22%;
  left: -10%;
  width: 100%;
  aspect-ratio: 1;
  background: var(--ca-orange-bright);
  border-radius: 50%;
}


/* ============================================================
   36. ABOUT: "YOU DON'T NEED TO KNOW WHY YOU'RE STUCK" + AWARE
   Two columns from 1200px: the copy, and the AWARE Method panel
   running to the right edge under an orange-and-maroon strip.
   Below 1200px it stacks: copy, then the panel. (There used to be
   a cutout photo in a third column; it was taken out.)
   The panel reads data/method.yaml and carries id="aware-method",
   where /aware-method/ redirects.
   On the panel's pink wash: maroon 11:1, ink 10:1, orange 4.0:1
   (display size only). Orange on cream: 4.7:1.
   Content: `stuck` in content/about.md.
   ============================================================ */
.ca-stuck {
  --_lead: clamp(40px, 4.5vw, 72px);
  position: relative;
  overflow: clip;
  padding-block: var(--ca-section-py);   /* below 1200px the button was running into the next section */
  background: var(--ca-cream);
}
.ca-stuck__inner {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  padding-inline: var(--ca-pad-x);
}
/* Below 1200px the copy's two halves are separate grid items, so the AWARE panel can sit between
   them: title and subtitle, then the panel, then the paragraph, callout and button. */
.ca-stuck__copy  { display: contents; }
.ca-stuck__head  { order: 1; }
.ca-stuck__panel { order: 2; }
.ca-stuck__rest  { order: 3; }

/* ---- Copy ---- */
.ca-stuck__title { font-size: clamp(2.5rem, 1rem + 3.6vw, 5rem); line-height: 0.92; }
.ca-stuck__title > span { display: block; }
.ca-stuck__accent { color: var(--ca-orange); }
.ca-stuck__script {
  position: relative;
  display: inline-block;
  margin-top: 0.2em;
  padding-bottom: 0.22em;
  font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem);
  line-height: 1.1;
  color: var(--ca-ink);
}
/* Purple stroke under the back of the script line, as in the mockup. */
.ca-stuck__script .ca-brush {
  position: absolute;
  left: 35%;
  right: 0;
  bottom: 0;
  width: auto;
  height: 0.28em;
  color: var(--ca-purple);
}
.ca-stuck__body,
.ca-stuck__callout {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-stuck__body { margin-top: clamp(16px, 2vw, 24px); }
.ca-stuck__callout {
  margin-top: clamp(18px, 2vw, 24px);
  padding: 16px 20px;
  background: color-mix(in srgb, var(--ca-pink-soft) 40%, var(--ca-paper));
  border-left: 4px solid var(--ca-purple);
}
.ca-stuck__callout strong { display: block; font-weight: 700; color: var(--ca-maroon); }
.ca-stuck__btn { margin-top: clamp(20px, 2.4vw, 28px); }

/* ---- AWARE panel ---- */
.ca-aware {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px);
  background: color-mix(in srgb, var(--ca-pink-soft) 35%, var(--ca-paper));
}
.ca-aware__title { font-size: clamp(2rem, 1.4rem + 1.8vw, 3.25rem); line-height: 1; }
.ca-aware__accent { color: var(--ca-orange); }
.ca-aware__steps { margin-top: clamp(16px, 2vw, 24px); list-style: none; }
.ca-aware__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: center;
  padding-block: clamp(14px, 1.6vw, 20px);
}
.ca-aware__step + .ca-aware__step { border-top: 1px solid rgba(106, 31, 192, 0.25); }
.ca-aware__letter {
  display: grid;
  place-items: center;
  width: clamp(60px, 5.5vw, 84px);
  height: clamp(60px, 5.5vw, 84px);
  font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem);
  line-height: 1;
  color: var(--ca-maroon);
  background: var(--ca-pink-soft);
  border-radius: 50%;
}
.ca-aware__name { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); line-height: 1; }
.ca-aware__body {
  margin-top: 4px;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  line-height: 1.45;
  color: var(--ca-ink);
}

/* ---- 1200px and up: two columns, the panel bleeding off the right edge ---- */
@media (min-width: 1200px) {
  .ca-stuck { padding-block: var(--_lead) 0; }   /* the copy and the panel carry their own bottom space here */
  /* The orange-and-maroon strip along the top right, above the panel. */
  .ca-stuck::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 15%;
    height: var(--_lead);
    background: var(--ca-maroon);
  }
  .ca-stuck::after {
    content: "";
    position: absolute;
    top: 0;
    right: 15%;
    width: 9%;
    height: var(--_lead);
    background: var(--ca-orange-bright);
  }
  .ca-stuck__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: end;
    /* Left edge in line with the page container; the panel runs to the right edge. */
    padding-inline: max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2)) 0;
  }
  .ca-stuck__copy {
    display: block;                     /* back to one column of copy beside the panel */
    grid-column: 1;
    grid-row: 1;
    order: 0;
    align-self: center;
    padding-block: var(--ca-section-py);
  }
  .ca-stuck__head, .ca-stuck__rest { order: 0; }
  .ca-stuck__panel {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    align-self: start;
    margin: 18px 0 var(--ca-section-py);
  }
}


/* ============================================================
   37. SCRIBBLE
   A handwritten note on a soft-pink swash, tilted, as beside the
   videos in the mockups. Decorative: the partials hide it from
   screen readers.
   ============================================================ */
.ca-scribble {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 9em;
  padding: 0.15em 0.5em;
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
  line-height: 1;
  transform: rotate(-8deg);
}
/* The swash: the brush stroke, stretched tall behind the words. */
.ca-scribble__swash {
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  color: var(--ca-pink-soft);
}


/* ============================================================
   38. ABOUT: PRESS STRIP
   "As featured in": not in the mockup, kept from the previous
   About page. Two items, each a magazine image with a title, a
   line of text and an optional link.
   Content: `press` in content/about.md.
   ============================================================ */
.ca-press { background: var(--ca-paper); }
.ca-press__items {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(18px, 2vw, 26px);
  list-style: none;
}
@media (min-width: 760px) {
  .ca-press__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ca-press__item {
  display: grid;
  grid-template-columns: clamp(88px, 9vw, 120px) 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
}
.ca-press__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--ca-shadow-card);
}
.ca-press__title { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); line-height: 1; }
.ca-press__text {
  margin-top: 6px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-press__link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--ca-maroon);
  text-underline-offset: 3px;
}
.ca-press__link:hover { color: var(--ca-pink); }


/* ============================================================
   39. ABOUT: "YOUR BODY MAY BE TELLING YOU SOMETHING."
   Copy on the left (a short orange rule, a three-tone headline,
   a line of text, and on wide screens a scribbled note with an
   arrow pointing at the video); the video on the right with pink
   and orange swirls behind it, also wide screens only.
   The swirls are simple drawn loops, to swap for Canva art later.
   Orange text on cream: 4.7:1.
   Content: `listen` in content/about.md.
   ============================================================ */
.ca-listen { overflow-x: clip; }
.ca-listen__inner {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 960px) {
  .ca-listen__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.ca-listen__rule {
  width: clamp(80px, 8vw, 124px);
  height: 4px;
  margin: 0 0 clamp(16px, 2vw, 24px);
  border: 0;
  background: var(--ca-orange-bright);
}
.ca-listen__title { font-size: clamp(2.25rem, 1rem + 3.4vw, 4.75rem); line-height: 0.95; }
.ca-listen__title > span { display: block; }
.ca-listen__accent { color: var(--ca-orange); }
.ca-listen__text {
  max-width: 36ch;
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-listen__stage { position: relative; isolation: isolate; }
.ca-listen__swirl,
.ca-listen__note { display: none; }
@media (min-width: 960px) {
  .ca-listen__swirl {
    display: block;
    position: absolute;
    z-index: -1;
    top: -22%;
    left: -10%;
    width: 124%;
    height: 146%;
  }
  .ca-listen__swirl .s1 { stroke: var(--ca-pink-soft); }
  .ca-listen__swirl .s2 { stroke: var(--ca-orange-bright); opacity: 0.85; }
  .ca-listen__note {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: clamp(24px, 3vw, 40px);
    color: var(--ca-maroon);
  }
  .ca-listen__arrow { flex: none; width: 110px; height: 90px; }
}


/* ============================================================
   40. BIG-WORD HERO (Services, Resources)
   One big word filling the width, a cutout photo in front of it
   on the section's bottom edge, the brush swirl behind both, and
   optionally a round badge and a spaced tagline. Everything is
   sized in cqi against the stage, so the photo covers the same
   letters at every screen width.

   Tuning: a page can override the four values on the stage from
   its front matter (wordSize, wordTop, photoWidth, photoShift, photoTop).
   The placeholder face (Anton) is wider than the mockups', so
   expect to retune once the real font is in.
   Content: `hero` in the page's front matter
   (layouts/partials/v2/blocks/bigword.html).
   ============================================================ */
.ca-bigword {
  overflow: clip; /* the swirl runs past the edges */
  background: var(--ca-cream);
}
.ca-bigword__stage {
  --word-size: 24.5cqi;   /* fills the width with "SERVICES" in Anton */
  --word-top: 14cqi;      /* how far down the word sits */
  --photo-width: 40cqi;   /* how big the photo is */
  --photo-shift: 0cqi;    /* nudges the photo left (negative) or right */
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the track never grows past the stage */
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}
/* Everything shares one grid cell, stacked in source order:
   swirl at the back, then the word, the photo, badge and tagline. */
.ca-bigword__stage > * { grid-area: 1 / 1; position: relative; }

.ca-bigword__swirl {
  z-index: 0;
  align-self: start;
  width: 100%;
  margin-top: 2cqi;
  pointer-events: none;
}
.ca-bigword__word {
  z-index: 1;
  align-self: start;
  justify-self: center;
  margin-top: calc(var(--word-top) + var(--_word-drop, 0cqi));
  margin-bottom: 4cqi; /* the letters run past their line box; this keeps the hero tall enough that the bottom edge never clips them */
  font-size: var(--word-size);
  line-height: 0.82;
  white-space: nowrap;
}
.ca-bigword__photo {
  z-index: 2;
  align-self: end;
  justify-self: center;
  width: calc(var(--photo-width) * var(--_photo-scale, 1));
  margin-top: var(--photo-top, 6cqi); /* keeps the head clear of the stage's top edge */
  transform: translateX(var(--photo-shift));
}

/* Round badge, top right ("Tools for real life"): maroon on soft pink, 8.5:1. */
.ca-bigword__badge {
  z-index: 3;
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: clamp(84px, 11cqi, 190px);
  aspect-ratio: 1;
  margin: 4cqi 3cqi 0 0;
  padding: 1.2cqi;
  font-size: clamp(9px, 1.15cqi, 19px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ca-maroon);
  background: var(--ca-pink-soft);
  border-radius: 50%;
  outline: 1px solid var(--ca-maroon);
  outline-offset: calc(-1 * clamp(5px, 0.6cqi, 10px)); /* the inner ring */
}
.ca-bigword__badge span { max-width: 7em; }
.ca-bigword__badge span::before,
.ca-bigword__badge span::after {
  content: "";
  display: block;
  width: 1.6em;
  height: 2px;
  margin: 0.5em auto;
  background: var(--ca-orange-bright);
}

/* Spaced tagline, lower right, with a short orange rule under it. */
.ca-bigword__tagline {
  z-index: 3;
  align-self: end;
  justify-self: end;
  max-width: 34cqi;
  margin: 0 5cqi 9cqi 0;
  font-size: clamp(11px, 1.6cqi, 28px);
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-bigword__tagline::after {
  content: "";
  display: block;
  width: max(4cqi, 40px);
  height: 3px;
  margin: 0.9em auto 0;
  background: var(--ca-orange-bright);
}

/* Phones: the photo grows a little and the word drops a touch. */
@media (max-width: 599px) {
  .ca-bigword__word { --_word-drop: 4cqi; }
  .ca-bigword__photo { --_photo-scale: 1.3; }
}
/* No room beside the photo on narrow screens: the tagline moves below. */
@media (max-width: 759px) {
  .ca-bigword__tagline {
    grid-area: 2 / 1;
    justify-self: center;
    max-width: 90%;
    margin: 20px auto 8px;
  }
}


/* ============================================================
   41. SERVICES: "NOT READY FOR COACHING? START WHERE YOU ARE."
   An intro column (eyebrow, two-tone title, text, button, and a
   row of three resource kinds with icons) beside three product
   columns split by thin rules. Colour-block bars sit at the
   screen edges on wide screens.
   Product subtitles and kind icons take their tone's deeper
   colour: pink 4.9:1, orange 4.7:1, purple 7.7:1 on cream.
   Content: `start` in content/services.md; products from
   data/products.yaml.
   ============================================================ */
.ca-start { position: relative; overflow: clip; }
@media (min-width: 1280px) {
  .ca-start::before,
  .ca-start::after {
    content: "";
    position: absolute;
    top: 6%;
    bottom: 6%;
    width: clamp(28px, 3.4vw, 64px);
  }
  .ca-start::before {
    left: 0;
    background: linear-gradient(to bottom,
      var(--ca-orange-bright) 0 28%,
      var(--ca-maroon) 28% 58%,
      var(--ca-pink-bright) 58% 100%);
  }
  .ca-start::after {
    right: 0;
    background: linear-gradient(to bottom,
      var(--ca-orange-bright) 0 40%,
      var(--ca-pink-bright) 40% 66%,
      var(--ca-maroon) 66% 100%);
  }
}

.ca-start__inner { display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 1100px) {
  .ca-start__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
    align-items: start;
  }
}

/* ---- Intro ---- */
.ca-start__eyebrow::after { background: var(--ca-pink-bright); }
.ca-start__title {
  margin-top: 10px;
  font-size: clamp(2.75rem, 1.4rem + 4vw, 5.5rem);
  line-height: 0.9;
}
.ca-start__title > span { display: block; }
.ca-start__text {
  max-width: 30ch;
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-start__btn { margin-top: clamp(20px, 2.4vw, 28px); border-radius: 6px; }

.ca-start__kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(28px, 3.4vw, 40px);
  list-style: none;
  text-align: center;
}
.ca-start__kind { padding-inline: 10px; }
.ca-start__kind + .ca-start__kind { border-left: 1px solid var(--ca-line); }
.ca-start__kind .ca-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  color: var(--ca-tone);
}
.ca-start__kind-name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-start__kind-text {
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ca-ink-2);
}

/* ---- Products ---- */
.ca-products { display: grid; gap: clamp(32px, 4vw, 40px); list-style: none; }
@media (min-width: 760px) {
  .ca-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ca-product { padding-inline: clamp(14px, 1.6vw, 24px); }
  .ca-product + .ca-product { border-left: 1px solid var(--ca-line); }
}
.ca-product { display: flex; flex-direction: column; }
/* Covers share one box so book and tablet images line up. */
.ca-product__cover {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
  margin-bottom: 14px;
  object-fit: contain;
  object-position: center bottom;
}
/* Shown until a real cover file exists. */
.ca-product__cover--empty {
  display: grid;
  place-items: center;
  padding: 16px;
  font-family: var(--ca-font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--ca-maroon);
  background: color-mix(in srgb, var(--ca-tone-bright) 18%, var(--ca-paper));
  border-radius: 8px;
}
.ca-product__title { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem); line-height: 0.95; }
.ca-product__subtitle {
  margin-top: 6px;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ca-tone);
}
.ca-product__text {
  margin-top: 8px;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-product__meta {
  margin-top: 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
/* Buttons pinned to the bottom so the three line up. */
.ca-product__actions { margin-top: auto; padding-top: 16px; }
.ca-product__btn { width: 100%; }
.ca-product__note {
  margin-top: 8px;
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
  color: var(--ca-ink-2);
}


/* ============================================================
   42. SERVICES: "BRING THE CONVERSATION TO YOUR ROOM."
   A speaking photo filling the left half top to bottom; copy on
   the right with an inline list of audiences and a maroon button.
   Colour-block bars at both screen edges on wide screens; the
   left one overlaps the photo's edge, as in the mockup.
   Photo first on narrow screens.
   "Your room." uses the deeper orange: 4.7:1 on cream.
   Content: `speak` in content/services.md.
   ============================================================ */
.ca-speak {
  position: relative;
  overflow: clip;
  background: var(--ca-cream);
}
.ca-speak__inner { display: grid; }
.ca-speak__photo { margin: 0; }
.ca-speak__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ca-line); /* shows while the photo loads */
}
.ca-speak__copy { padding: var(--ca-section-py) var(--ca-pad-x); }

.ca-speak__eyebrow::after { background: var(--ca-pink-bright); }
.ca-speak__title {
  margin-top: 10px;
  font-size: clamp(2.5rem, 1.2rem + 3.4vw, 5rem);
  line-height: 0.92;
}
.ca-speak__title > span { display: block; }
.ca-speak__accent { color: var(--ca-orange); }
.ca-speak__text {
  max-width: 44ch;
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-speak .ca-check {
  margin-top: clamp(18px, 2vw, 24px);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  color: var(--ca-ink);
}
.ca-speak__btn {
  width: 100%;
  max-width: 560px;
  margin-top: clamp(22px, 2.6vw, 32px);
}

@media (min-width: 960px) {
  .ca-speak__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  /* The photo runs the full height of the row. */
  .ca-speak__photo { padding-left: clamp(24px, 4.3vw, 72px); }
  .ca-speak__photo img { height: 100%; min-height: 520px; aspect-ratio: auto; }
  .ca-speak__copy {
    align-self: center;
    max-width: 860px;
    padding: var(--ca-section-py) clamp(56px, 6vw, 112px) var(--ca-section-py) clamp(32px, 4vw, 64px);
  }
  .ca-speak::before,
  .ca-speak::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: clamp(28px, 4.6vw, 90px);
  }
  .ca-speak::before {
    top: 8%;
    bottom: 8%;
    left: 0;
    background: linear-gradient(to bottom,
      var(--ca-orange-bright) 0 40%,
      var(--ca-pink-bright) 40% 70%,
      var(--ca-maroon) 70% 100%);
  }
  .ca-speak::after {
    top: 14%;
    bottom: 6%;
    right: 0;
    width: clamp(24px, 3.4vw, 64px);
    background: linear-gradient(to bottom,
      var(--ca-orange-bright) 0 45%,
      var(--ca-pink-bright) 45% 70%,
      var(--ca-maroon) 70% 100%);
  }
}


/* ============================================================
   43. RESOURCES: "NOT SURE WHERE TO START? START WITH YOUR BODY."
   Three columns from 1200px: copy on cream; a tablet showing the
   quiz, straddling the edge of a deep-maroon field that runs to
   the right edge; and on that field, four numbered insights.
   Below 1200px it stacks: copy, tablet, then the insights on their
   own maroon panel.
   Orange on cream 4.7:1. On deep maroon: cream 16:1, cream at 80%
   about 11:1, soft pink 9.5:1.
   Content: `quiz` in content/resources.md.
   ============================================================ */
.ca-quiz {
  position: relative;
  overflow: clip;
  background: var(--ca-cream);
}
.ca-quiz__inner { position: relative; z-index: 1; display: grid; }

/* ---- Copy ---- */
.ca-quiz__copy { padding: var(--ca-section-py) var(--ca-pad-x) clamp(32px, 5vw, 56px); }
.ca-quiz__rule {
  width: clamp(80px, 8vw, 124px);
  height: 4px;
  margin: 0 0 clamp(16px, 2vw, 24px);
  border: 0;
  background: var(--ca-orange-bright);
}
.ca-quiz__title { font-size: clamp(2.5rem, 1rem + 3vw, 4.75rem); line-height: 0.92; }
.ca-quiz__title > span { display: block; }
.ca-quiz__accent { color: var(--ca-orange); }
.ca-quiz__text,
.ca-quiz__lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.5; }
.ca-quiz__text { max-width: 40ch; margin-top: clamp(14px, 1.6vw, 20px); color: var(--ca-ink); }
.ca-quiz__lead { margin-top: 14px; font-weight: 700; color: var(--ca-maroon); }
.ca-quiz__btn { width: 100%; max-width: 520px; margin-top: clamp(16px, 2vw, 22px); }
.ca-quiz__note { margin-top: 10px; font-size: 0.875rem; color: var(--ca-ink-2); }

/* ---- The tablet: a drawn bezel around the quiz image, with an orange
   block off its top and a soft-pink block off its lower right. ---- */
.ca-quiz__device {
  --ratio: 3 / 4;
  --block-color: var(--ca-orange-bright);
  --block-top: -12%;
  --block-left: 21%;
  --block-w: 52%;
  --block-h: 37%;
  --block2-color: var(--ca-pink-soft);
  --block2-bottom: -5%;
  --block2-right: -6%;
  --block2-w: 44%;
  --block2-h: 38%;
  justify-self: center;
  width: min(80%, 420px);
  margin-block: clamp(24px, 4vw, 48px);
}
.ca-tablet {
  padding: clamp(10px, 1.2vw, 16px);
  background: #1F1A1C;
  border-radius: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 30px 50px -24px rgba(31, 26, 28, 0.55);
  transform: rotate(-2deg);
}
.ca-tablet img { border-radius: clamp(10px, 1.2vw, 16px); }

/* ---- Insights ---- */
.ca-quiz__panel {
  padding: var(--ca-section-py) var(--ca-pad-x);
  color: var(--ca-cream);
  background: var(--ca-maroon-deep);
}
.ca-quiz__panel-title {
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ca-quiz__panel-title::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 18px;
  background: var(--ca-orange-bright);
}
.ca-quiz__insights { margin-top: clamp(16px, 2vw, 24px); list-style: none; }
.ca-quiz__insight {
  display: grid;
  grid-template-columns: clamp(64px, 6vw, 96px) 1fr;
  gap: clamp(14px, 1.8vw, 24px);
  align-items: center;
  padding-block: clamp(14px, 1.8vw, 22px);
}
.ca-quiz__insight + .ca-quiz__insight { border-top: 1px solid rgba(247, 168, 211, 0.25); }
.ca-quiz__num {
  font-size: clamp(2.75rem, 1.8rem + 2.6vw, 4.5rem);
  line-height: 0.9;
  color: var(--ca-pink-soft);
}
.ca-quiz__insight-title {
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-cream);
}
.ca-quiz__insight-text {
  margin-top: 4px;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  line-height: 1.45;
  color: rgba(251, 248, 242, 0.8);
}

/* ---- 1200px and up: three columns, the maroon field running to the
   right edge and under the right part of the tablet ---- */
@media (min-width: 1200px) {
  .ca-quiz::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 56%;
    background: var(--ca-maroon-deep);
  }
  .ca-quiz__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: center;
  }
  /* Left padding lines the copy up with the page container. */
  .ca-quiz__copy {
    padding: var(--ca-section-py) clamp(24px, 2.4vw, 40px) var(--ca-section-py)
             max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2));
  }
  .ca-quiz__device { width: min(90%, 480px); margin-block: var(--ca-section-py); }
  .ca-quiz__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    padding: var(--ca-section-py) max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2))
             var(--ca-section-py) clamp(32px, 3.4vw, 56px);
    background: transparent; /* the section's maroon field shows through */
  }
}


/* ============================================================
   44. RESOURCES: "SHOP THE RESOURCES"
   An eyebrow with a bar, a big title, and the three products from
   data/products.yaml, each a cover above its text, split by thin
   rules on wide screens. Covers and their placeholders reuse the
   .ca-product__cover rules from section 41.
   Content: `shop` in content/resources.md.
   ============================================================ */
.ca-shop__heading {
  margin-top: 6px;
  font-size: clamp(3.5rem, 1.8rem + 6vw, 9rem);
  line-height: 0.85;
}
.ca-shop__items {
  display: grid;
  gap: clamp(36px, 4vw, 48px);
  margin-top: clamp(28px, 3.4vw, 44px);
  list-style: none;
}
/* The cover sits above its text, in each of the three columns. */
.ca-shop__item {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
}
/* Equal-height columns: the text block fills what's left and the button block sits at its foot,
   so the three buttons share one line however long the descriptions run. The foot always keeps
   room for the small note under the button, so a column with no note lines up too. */
.ca-shop__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.ca-shop__foot { position: relative; margin-top: auto; padding-bottom: 30px; }
.ca-shop__foot .ca-shop__note { position: absolute; left: 0; bottom: 0; margin: 0; }
.ca-shop__text, .ca-shop__meta { margin-bottom: 14px; }
.ca-shop__item .ca-product__cover {
  width: 100%;
  max-width: 340px;
  margin-bottom: 0;
  object-position: center top;
}
@media (min-width: 1100px) {
  /* Three equal columns: the gap is the same on every side of every column (so the covers
     are the same size and height), and the thin rules sit in the middle of the gaps. */
  .ca-shop__items { --_gap: clamp(32px, 3.2vw, 48px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--_gap); }
  .ca-shop__item .ca-product__cover { max-width: none; }
  .ca-shop__item { position: relative; }
  .ca-shop__item + .ca-shop__item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--_gap) / -2);
    border-left: 1px solid var(--ca-line);
  }
}

.ca-shop__name { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); line-height: 0.95; }
.ca-shop__subtitle {
  margin-top: 8px;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--ca-maroon);
}
.ca-shop__text {
  margin-top: 10px;
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-shop__meta {
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-shop__btn { margin-top: 14px; padding: 0.7em 1.3em; font-size: 0.875rem; }
.ca-shop__note { margin-top: 8px; font-size: 0.8125rem; color: var(--ca-ink-2); }


/* ============================================================
   45. ARROW LINK
   A spaced-caps text link with a thick orange underline
   ("VIEW ALL ARTICLES →", "READ ARTICLE →").
   ============================================================ */
.ca-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ca-maroon);
  border-bottom: 3px solid var(--ca-orange-bright);
  transition: color .2s ease, border-color .2s ease;
}
.ca-arrowlink:hover { color: var(--ca-pink); border-color: var(--ca-pink); }
@media (prefers-reduced-motion: reduce) {
  .ca-arrowlink { transition: none; }
}


/* ============================================================
   46. RESOURCES: "THINGS WORTH THINKING ABOUT."
   Eyebrow and title with a "View all articles" link, then the
   newest blog posts as cards: image, category, serif title,
   excerpt, and a read link. Four across on wide screens, split
   by thin rules; two on tablets; one on phones.
   Category labels use the deeper orange: 4.7:1 on cream.
   Content: `articles` in content/resources.md; the posts come
   from the blog section.
   ============================================================ */
.ca-articles__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}
.ca-articles__title {
  margin-top: 6px;
  font-size: clamp(2.25rem, 1rem + 3.6vw, 5rem);
  line-height: 0.95;
}

.ca-articles__list {
  display: grid;
  gap: clamp(32px, 4vw, 44px);
  margin-top: clamp(24px, 3vw, 40px);
  list-style: none;
}
@media (min-width: 640px) {
  .ca-articles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ca-articles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .ca-article { padding-inline: clamp(12px, 1.2vw, 20px); }
  .ca-article:first-child { padding-left: 0; }
  .ca-article:last-child { padding-right: 0; }
  .ca-article + .ca-article { border-left: 1px solid var(--ca-line); }
}

.ca-article { display: flex; flex-direction: column; }
.ca-article__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: color-mix(in srgb, var(--ca-blush) 70%, var(--ca-paper));
}
.ca-article__cat {
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-orange);
}
.ca-article__title {
  margin-top: 6px;
  font-family: var(--ca-font-serif);
  font-size: clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ca-maroon);
}
.ca-article__title a { color: inherit; text-decoration: none; }
.ca-article__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ca-article__text {
  margin-top: 10px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-article__more { align-self: flex-start; }
.ca-article__body { display: flex; flex: 1; flex-direction: column; }
.ca-article__spacer { flex: 1; min-height: 16px; }


/* ============================================================
   47. BIG-WORD HERO: PANEL BACKDROP (Coaching)
   An alternative to the swirl: a soft pink panel behind the
   photo, an orange circle behind the head, and a pink band along
   the bottom of the hero that the word sits into. Turned on with
   backdrop: "panel" in the hero's front matter. All three sit
   behind the word (z-index 0), in this order: band, panel, circle.
   ============================================================ */
.ca-bigword__band,
.ca-bigword__panel,
.ca-bigword__circle { z-index: 0; pointer-events: none; }

/* Full screen width: starts half a screen left of the stage's centre. */
.ca-bigword__band {
  align-self: end;
  justify-self: start;
  width: 100vw;
  height: 9.5cqi;
  margin-left: calc(50% - 50vw);
  background: var(--ca-pink-soft);
}
/* From the top of the hero down to where the band begins. */
.ca-bigword__panel {
  align-self: stretch;
  justify-self: center;
  width: 33cqi;
  margin-bottom: 9.5cqi;
  background: color-mix(in srgb, var(--ca-pink-soft) 55%, var(--ca-cream));
}
.ca-bigword__circle {
  align-self: start;
  justify-self: center;
  width: 14cqi;
  aspect-ratio: 1;
  margin-top: 1.5cqi;
  background: var(--ca-orange-bright);
  border-radius: 50%;
  transform: translateX(-7cqi);
}


/* ============================================================
   48. COACHING: "YOU KNOW SOMETHING NEEDS TO CHANGE."
   Copy on the left; on wide screens a photo flush to the top of
   the section, with an orange bar off its left side, a maroon
   bar off its right, and an orange brush stroke across its
   lower-left corner. Below 1100px the photo follows the copy.
   The italic line uses the deeper orange: 4.7:1 on cream.
   Content: `change` in content/private-coaching/_index.md.
   ============================================================ */
.ca-change {
  overflow-x: clip; /* the bars and brush reach past the photo */
  background: var(--ca-cream);
}
.ca-change__inner { display: grid; }
.ca-change__copy { padding: var(--ca-section-py) var(--ca-pad-x); }

/* A quieter eyebrow than the default: regular weight, light spacing. */
.ca-change__eyebrow { font-weight: 500; letter-spacing: 0.06em; }
.ca-change__eyebrow > span { margin-inline-end: 0; }
.ca-change__eyebrow::after { background: var(--ca-orange-bright); }

.ca-change__title {
  margin-top: 12px;
  font-size: clamp(2.5rem, 1.2rem + 4vw, 6.25rem);
  line-height: 0.92;
}
.ca-change__serif {
  margin-top: 0.15em;
  font-family: var(--ca-font-serif);
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.75rem);
  font-style: italic;
  line-height: 1.05;
  color: var(--ca-orange);
}
.ca-change__body {
  display: grid;
  gap: 0.8em;
  max-width: 46ch;
  margin-top: clamp(18px, 2.2vw, 28px);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.5;
  color: var(--ca-ink);
}

/* Bars measured from the mockup: a tall orange one off the left
   side, a shorter maroon one off the lower right. */
.ca-change__photo {
  --ratio: 642 / 637;
  /* (The orange bar that stood off the photo's left edge is removed.) */
  --block2-color: var(--ca-maroon);
  --block2-bottom: 0;
  --block2-right: -7%;
  --block2-w: 7%;
  --block2-h: 40%;
  justify-self: center;
  width: min(84%, 560px);
  margin-bottom: var(--ca-section-py);
}
@media (min-width: 1100px) {
  .ca-change__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
  /* Left padding lines the copy up with the page container. */
  .ca-change__copy {
    align-self: center;
    padding: var(--ca-section-py) clamp(24px, 3vw, 56px) var(--ca-section-py)
             max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2));
  }
  /* Centred up and down against the copy, with room on the right for the maroon bar. */
  .ca-change__photo {
    align-self: center;
    justify-self: stretch;
    width: auto;
    margin: var(--ca-section-py) clamp(32px, 3.4vw, 64px) var(--ca-section-py) 0;
  }
}


/* ============================================================
   49. COACHING: "DOES ANY OF THIS SOUND FAMILIAR?"
   Six recognitions, each a portrait clipped into a blob shape,
   sitting on a coloured blob, with an icon badge at its top-left
   corner and a line of text. Brush swirls at the section's
   corners on wide screens (from brush-swirl.png; if the file is
   missing they simply don't show).
   Blob and badge colours are set per item with the classes below.
   Badge icons are white on the deeper tones (4.6:1 and up).
   "Familiar?" uses the deeper orange: 4.7:1 on cream.
   Content: `familiar` in content/private-coaching/_index.md.
   ============================================================ */
.ca-familiar { position: relative; overflow: clip; }
.ca-familiar > .ca-container { position: relative; z-index: 1; }
@media (min-width: 1100px) {
  .ca-familiar::before,
  .ca-familiar::after {
    content: "";
    position: absolute;
    z-index: 0;
    aspect-ratio: 2 / 1;
    background: url("/assets/images/brush-swirl.png") no-repeat center / contain;
    pointer-events: none;
  }
  .ca-familiar::before { top: -6%; right: -14%; width: 38%; transform: rotate(8deg); }
  .ca-familiar::after { bottom: -12%; left: -16%; width: 30%; transform: rotate(160deg); }
}

.ca-familiar__eyebrow::after { background: var(--ca-orange-bright); }
.ca-familiar__title {
  margin-top: 10px;
  font-size: clamp(2.25rem, 1rem + 3.6vw, 5rem);
  line-height: 0.95;
}
.ca-familiar__accent { color: var(--ca-orange); }

/* ---- The six items ---- */
.ca-familiar__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 40px) clamp(16px, 3vw, 32px);
  margin-top: clamp(28px, 3.6vw, 48px);
  list-style: none;
}
@media (min-width: 760px) {
  .ca-familiar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ca-familiar__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .ca-familiar__item { padding-inline: clamp(10px, 1vw, 18px); }
  .ca-familiar__item + .ca-familiar__item { border-left: 1px solid var(--ca-line); }
}

/* Colours, set per item. */
.ca-blob-pink   { --_blob: var(--ca-pink-bright); }
.ca-blob-orange { --_blob: var(--ca-orange-bright); }
.ca-blob-purple { --_blob: var(--ca-purple-bright); }
.ca-badge-pink   { --_badge: var(--ca-pink); }
.ca-badge-orange { --_badge: var(--ca-orange); }
.ca-badge-purple { --_badge: var(--ca-purple); }
.ca-badge-maroon { --_badge: var(--ca-maroon); }

.ca-familiar__media {
  position: relative;
  isolation: isolate;
  width: min(88%, 220px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.ca-familiar__blob {
  position: absolute;
  inset: -4% -8% 4% 6%;
  z-index: -1;
  background: var(--_blob, var(--ca-pink-bright));
  border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%;
}
.ca-familiar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ca-line); /* shows while the photo loads */
}
/* Four blob shapes, cycled in order, so neighbours differ. */
.ca-familiar__img--1 { border-radius: 42% 58% 55% 45% / 55% 45% 58% 42%; }
.ca-familiar__img--2 { border-radius: 52% 48% 38% 62% / 60% 50% 50% 40%; }
.ca-familiar__img--3 { border-radius: 60% 40% 50% 50% / 45% 58% 42% 55%; }
.ca-familiar__img--4 { border-radius: 38% 62% 58% 42% / 52% 40% 60% 48%; }
.ca-familiar__badge {
  position: absolute;
  top: -2%;
  left: -8%;
  display: grid;
  place-items: center;
  width: 36%;
  aspect-ratio: 1;
  color: #fff;
  background: var(--_badge, var(--ca-pink));
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ca-cream);
}
.ca-familiar__badge .ca-icon { width: 52%; height: 52%; }
.ca-familiar__text {
  max-width: 16ch;
  margin: 18px auto 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--ca-ink);
}

/* ---- Closing lines ---- */
.ca-familiar__closing {
  max-width: 62ch;
  margin: clamp(32px, 4vw, 52px) auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  color: var(--ca-ink);
}
.ca-familiar__closing strong { display: block; font-weight: 700; color: var(--ca-maroon); }
.ca-familiar__rest { display: block; }
/* Wide screens: each sentence stays on one line (narrower screens wrap, balanced, as before). */
@media (min-width: 1100px) {
  .ca-familiar__closing { max-width: none; text-wrap: wrap; }
  .ca-familiar__closing strong,
  .ca-familiar__rest { white-space: nowrap; }
}


/* ============================================================
   50. COACHING: "IT'S NOT JUST TALK."
   A photo filling the left side (from 1100px), copy on the right
   ending in four numbered features. Colour bars at both screen
   edges and an orange brush stroke across the photo's lower
   right. Below 1100px the photo sits above the copy.
   The italic line and feature icons use the deeper orange
   (4.7:1 on cream); feature numbers are cream on maroon.
   Content: `different` in content/private-coaching/_index.md.
   ============================================================ */
.ca-different {
  position: relative;
  overflow: clip;
  background: var(--ca-cream);
}
.ca-different__inner { display: grid; }

/* ---- Photo ---- */
.ca-different__photo { position: relative; margin: 0; }
.ca-different__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ca-line); /* shows while the photo loads */
}
.ca-different__swoosh {
  position: absolute;
  z-index: 1;
  right: -6%;
  bottom: 6%;
  width: 62%;
  height: 10%;
  color: var(--ca-orange-bright);
  transform: rotate(-32deg);
  transform-origin: right bottom;
  pointer-events: none;
}

/* ---- Copy ---- */
.ca-different__copy { padding: var(--ca-section-py) var(--ca-pad-x); }
.ca-different__eyebrow { font-weight: 500; letter-spacing: 0.06em; }
.ca-different__eyebrow > span { margin-inline-end: 0; }
.ca-different__eyebrow::after { background: var(--ca-orange-bright); }
.ca-different__title {
  margin-top: 10px;
  font-size: clamp(2.5rem, 1.2rem + 3.8vw, 5.5rem);
  line-height: 0.92;
}
.ca-different__serif {
  margin-top: 0.12em;
  font-family: var(--ca-font-serif);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.5rem);
  font-style: italic;
  line-height: 1.05;
  color: var(--ca-orange);
}
.ca-different__body,
.ca-different__strong {
  max-width: 58ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.5;
}
.ca-different__body {
  display: grid;
  gap: 0.8em;
  margin-top: clamp(14px, 1.8vw, 22px);
  color: var(--ca-ink);
}
.ca-different__strong { margin-top: 14px; font-weight: 700; line-height: 1.4; color: var(--ca-maroon); }

/* ---- Four features ---- */
.ca-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
  margin-top: clamp(24px, 3vw, 36px);
  list-style: none;
  text-align: center;
}
@media (min-width: 760px) {
  .ca-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .ca-feature { padding-inline: clamp(8px, 1vw, 16px); }
  .ca-feature + .ca-feature { border-left: 1px solid var(--ca-line); }
}
.ca-feature__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ca-feature__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--ca-cream);
  background: var(--ca-maroon);
  border-radius: 50%;
}
.ca-feature .ca-icon { width: 44px; height: 44px; color: var(--ca-orange); }
.ca-feature__title {
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-feature__text {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ca-ink);
}

/* ---- 1100px and up: photo fills the left, bars at both edges ---- */
@media (min-width: 1100px) {
  .ca-different__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .ca-different__photo img { height: 100%; min-height: 560px; aspect-ratio: auto; }
  /* Right padding lines the copy up with the page container and clears the bars. */
  .ca-different__copy {
    align-self: center;
    padding: var(--ca-section-py)
             max(clamp(48px, 5vw, 80px), calc((100vw - var(--ca-max-w)) / 2))
             var(--ca-section-py)
             clamp(32px, 4vw, 72px);
  }
  .ca-different::before,
  .ca-different::after {
    content: "";
    position: absolute;
    z-index: 1;
  }
  .ca-different::before {
    top: 4%;
    bottom: 8%;
    left: 0;
    width: clamp(28px, 4.4vw, 72px);
    background: linear-gradient(to bottom,
      var(--ca-orange-bright) 0 35%,
      var(--ca-maroon) 35% 62%,
      var(--ca-orange-bright) 62% 100%);
  }
  .ca-different::after {
    top: 24%;
    bottom: 26%;
    right: 0;
    width: clamp(20px, 2.6vw, 44px);
    background: linear-gradient(to bottom,
      var(--ca-orange-bright) 0 48%,
      var(--ca-maroon) 48% 100%);
  }
}


/* ============================================================
   51. COACHING: THE AWARE METHOD CARDS
   Heading on the left with a ruled aside on the right, then five
   tall colour cards from data/method.yaml: a big letter, the step
   name, an icon in a white circle, and the description. On wide
   screens a cutout photo stands at the right edge under a colour bar.
   Card colours are the deeper tones so white text clears 4.5:1
   on every card (maroon 15:1, orange 5.0:1, magenta 6.2:1,
   pink 5.2:1, purple 8.2:1); the top of each card lightens only
   slightly, behind the big letter.
   Content: `process` in content/private-coaching/_index.md;
   steps from data/method.yaml.
   ============================================================ */
.ca-process {
  position: relative;
  overflow: clip;
  background: linear-gradient(to bottom, var(--ca-cream), color-mix(in srgb, var(--ca-blush) 45%, var(--ca-cream)));
}
.ca-process__inner { display: grid; }
.ca-process__main { padding: var(--ca-section-py) var(--ca-pad-x); }

/* ---- Heading and aside ---- */
.ca-process__head { display: grid; gap: 16px; }
@media (min-width: 960px) {
  .ca-process__head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: clamp(28px, 3vw, 48px);
  }
  .ca-process__aside {
    padding-left: clamp(20px, 2vw, 32px);
    border-left: 2px solid var(--ca-maroon);
  }
}
.ca-process__eyebrow { font-weight: 500; letter-spacing: 0.16em; }
.ca-process__eyebrow::after { background: var(--ca-orange-bright); }
.ca-process__title {
  margin-top: 10px;
  font-size: clamp(2.25rem, 1rem + 3.4vw, 4.75rem);
  line-height: 0.92;
}
.ca-process__serif {
  margin-top: 0.1em;
  font-family: var(--ca-font-serif);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.5rem);
  font-style: italic;
  line-height: 1.05;
  color: var(--ca-orange);
}
.ca-process__text,
.ca-process__aside {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-process__text { max-width: 52ch; margin-top: 12px; }

/* ---- The five cards ---- */
.ca-aware-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(24px, 3vw, 36px);
  list-style: none;
}
.ca-aware-card {
  --_c: var(--ca-maroon);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(20px, 2vw, 28px) clamp(14px, 1.4vw, 20px) clamp(22px, 2.2vw, 30px);
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_c) 90%, #fff) 0%, var(--_c) 45%);
  border-radius: 10px;
  --focus-ring: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* A different photo behind each card, faint and in greys, so the card's own colour still comes through. */
.ca-aware-card__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: grayscale(1);
}
.ca-aware-card:nth-child(1) { --_c: var(--ca-maroon); }
.ca-aware-card:nth-child(2) { --_c: var(--ca-orange); }
.ca-aware-card:nth-child(3) { --_c: color-mix(in srgb, var(--ca-pink) 70%, var(--ca-purple)); }
.ca-aware-card:nth-child(4) { --_c: var(--ca-pink); }
.ca-aware-card:nth-child(5) { --_c: var(--ca-purple); }
.ca-aware-card__letter {
  font-size: clamp(3.5rem, 2.4rem + 3vw, 5.5rem);
  line-height: 0.85;
  color: #fff;
}
.ca-aware-card__word {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ca-aware-card__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-top: 4px;
  color: var(--_c);
  background: #fff;
  border-radius: 50%;
}
.ca-aware-card__icon .ca-icon { width: 28px; height: 28px; }
.ca-aware-card__body {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.4;
}

/* ---- Photo: wide screens only ---- */
.ca-process__photo { display: none; }
@media (min-width: 1200px) {
  .ca-process__inner { grid-template-columns: minmax(0, 1fr) clamp(260px, 22vw, 400px); }
  /* Left padding lines the content up with the page container. */
  .ca-process__main {
    padding: var(--ca-section-py) clamp(24px, 2vw, 40px) var(--ca-section-py)
             max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2));
  }
  .ca-process__photo { display: block; align-self: stretch; margin: 0; }
  .ca-process__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0; /* keep the head; the bottom of the photo is cropped */
  }
  /* The orange-to-maroon bar at the top right. */
  .ca-process::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 5%;
    right: 0;
    width: clamp(24px, 3vw, 52px);
    height: 28%;
    background: linear-gradient(to bottom, var(--ca-orange-bright) 0 55%, var(--ca-maroon) 55% 100%);
  }
}


/* ============================================================
   52. COACHING: "THERE'S MORE THAN ONE WAY TO BEGIN." (PRICING)
   Heading, text and an optional photo, then four pricing cards
   from data/coaching.yaml: photo with a colour block off its
   corner, an icon circle, title, tagline, price (monthly with the
   total, or per session), text, checklist and a button pinned to
   the bottom. The featured card gets a badge and a raised orange
   border. Four across from 1200px, two from 700px, one below.
   Badge: white on deeper orange, 5.0:1.
   Content: `investments` in content/private-coaching/_index.md.
   ============================================================ */
.ca-invest { overflow-x: clip; }

/* ---- Heading ---- */
.ca-invest__head { display: grid; gap: clamp(24px, 3vw, 40px); align-items: center; }
@media (min-width: 1100px) {
  .ca-invest__head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.ca-invest__eyebrow { font-weight: 500; letter-spacing: 0.06em; }
.ca-invest__eyebrow > span { margin-inline-end: 0; }
.ca-invest__eyebrow::after { background: var(--ca-orange-bright); }
.ca-invest__title {
  margin-top: 10px;
  font-size: clamp(2.5rem, 1.2rem + 3.8vw, 5.5rem);
  line-height: 0.92;
}
.ca-invest__title > span { display: block; }
.ca-invest__accent { color: var(--ca-orange); }
.ca-invest__text {
  max-width: 54ch;
  margin-top: 14px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-invest__photo {
  --ratio: 16 / 10;
  --block-color: var(--ca-orange-bright);
  --block-top: 10%;
  --block-left: -7%;
  --block-w: 22%;
  --block-h: 38%;
  --block2-color: var(--ca-maroon);
  --block2-bottom: 6%;
  --block2-left: -4%;
  --block2-w: 18%;
  --block2-h: 30%;
}

/* ---- Cards ---- */
.ca-tiers {
  display: grid;
  gap: clamp(28px, 2.4vw, 28px) clamp(16px, 1.6vw, 24px);
  margin-top: clamp(40px, 4.6vw, 60px);
  list-style: none;
}
@media (min-width: 700px)  { .ca-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ca-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ca-tier {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--ca-paper);
  border-radius: var(--ca-radius-card);
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-tier--featured {
  box-shadow: 0 24px 48px -24px rgba(200, 65, 0, 0.45), 0 0 0 2px var(--ca-orange-bright);
}
@media (min-width: 1200px) {
  .ca-tier--featured { transform: translateY(-8px); }
}
.ca-tier__badge {
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 50%;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--ca-orange);
  border-radius: 6px;
  transform: translateX(-50%);
}

.ca-tier__media { position: relative; }
/* Colour block peeking out past the card's top-left corner. */
.ca-tier__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  left: -10px;
  width: 42%;
  height: 55%;
  background: var(--ca-tone-bright);
  border-radius: 6px;
}
.ca-tier__media img {
  display: block;
  width: 100%;
  aspect-ratio: 27 / 10; /* the shape of the photos: wide and shallow */
  object-fit: cover;
  background: var(--ca-line);
  border-radius: var(--ca-radius-card) var(--ca-radius-card) 0 0;
}
.ca-tier__icon {
  position: absolute;
  left: 20px;
  bottom: -30px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: #fff;
  background: var(--ca-tone);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--ca-paper);
}
.ca-tier__icon .ca-icon { width: 30px; height: 30px; }

.ca-tier__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 44px clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 26px);
}
.ca-tier__title { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 0.95; }
.ca-tier__tagline {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-tone);
}
.ca-tier__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
}
.ca-tier__amount { font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem); line-height: 1; color: var(--ca-maroon); }
.ca-tier__per {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-ink-2);
}
.ca-tier__total { margin-top: 4px; font-size: 0.9375rem; color: var(--ca-ink); }
.ca-tier__text { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--ca-ink); }
.ca-tier__rule { margin: 14px 0; border: 0; border-top: 1px solid var(--ca-line); }
.ca-tier .ca-check { gap: 6px; margin-bottom: 20px; font-size: 0.9375rem; color: var(--ca-ink); }
/* Pinned to the bottom so the four buttons line up. */
.ca-tier__btn { margin-top: auto; }

.ca-invest__note {
  max-width: 80ch;
  margin: clamp(24px, 3vw, 32px) auto 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ca-ink-2);
}


/* ============================================================
   53. COACHING: FAQ
   From 1200px, when the photo file exists: the photo at the left
   edge (with colour bars), then the heading and intro with a
   "Still have a question?" box, then the questions. Without the
   photo, or below 1200px: intro and questions side by side from
   960px, stacked below. The accordion reuses the home FAQ's
   .ca-faq__list and .ca-faq__item (section 27), with maroon
   plus buttons and lighter question text.
   Content: `faqIntro` and `faq` in content/private-coaching/_index.md.
   ============================================================ */
.ca-cfaq { position: relative; overflow: clip; background: var(--ca-cream); }
.ca-cfaq__inner {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  padding: var(--ca-section-py) var(--ca-pad-x);
}
@media (min-width: 960px) {
  .ca-cfaq__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    align-items: start;
  }
}

/* ---- Intro ---- */
.ca-cfaq__eyebrow { font-weight: 500; letter-spacing: 0.06em; }
.ca-cfaq__eyebrow > span { margin-inline-end: 0; }
.ca-cfaq__eyebrow::after { background: var(--ca-orange-bright); }
.ca-cfaq__title {
  margin-top: 10px;
  font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5.25rem);
  line-height: 0.9;
}
.ca-cfaq__text {
  max-width: 36ch;
  margin-top: 14px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-cfaq__brush {
  width: 58%;
  height: 12px;
  margin: 8px 0 0 10%;
  color: var(--ca-orange-bright);
}
.ca-cfaq__ask {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 32px);
  padding: 20px;
  background: color-mix(in srgb, var(--ca-pink-soft) 40%, var(--ca-paper));
  border-radius: 14px;
}
.ca-cfaq__ask > .ca-icon { width: 52px; height: 52px; color: var(--ca-maroon); }
.ca-cfaq__ask-title { font-size: 1.5rem; line-height: 1; }
.ca-cfaq__ask-text {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-cfaq__ask .ca-btn { margin-top: 12px; padding: 0.65em 1.3em; font-size: 0.875rem; }

/* ---- Accordion: the home FAQ's, with maroon plus buttons ---- */
.ca-cfaq .ca-faq__item summary { font-weight: 500; color: var(--ca-ink); }
.ca-cfaq .ca-faq__item summary::after { background-color: var(--ca-maroon); }

/* ---- With the photo, from 1200px: three columns ---- */
.ca-cfaq__photo { display: none; }
@media (min-width: 1200px) {
  .ca-cfaq--photo .ca-cfaq__inner {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 0.9fr) minmax(0, 1.35fr);
    column-gap: clamp(28px, 3vw, 48px);
    padding: 0 max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2)) 0 0;
  }
  .ca-cfaq--photo .ca-cfaq__intro,
  .ca-cfaq--photo .ca-cfaq__list { padding-block: var(--ca-section-py); }
  .ca-cfaq--photo .ca-cfaq__photo {
    display: block;
    position: relative;
    align-self: stretch;
    margin: 0;
  }
  .ca-cfaq__photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
  }
  /* Orange-to-maroon bar at the top left, pink bar at the photo's lower right. */
  .ca-cfaq--photo::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 4%;
    left: 0;
    width: clamp(24px, 4vw, 70px);
    height: 34%;
    background: linear-gradient(to bottom, var(--ca-orange-bright) 0 40%, var(--ca-maroon) 40% 100%);
  }
  .ca-cfaq__photo::after {
    content: "";
    position: absolute;
    right: 4%;
    bottom: 2%;
    width: 2.4%;
    min-width: 14px;
    height: 26%;
    background: var(--ca-pink-soft);
  }
}


/* ============================================================
   54. PROSE
   Long-form text from Markdown: blog article bodies. A reading
   column of about 68 characters. Serif maroon subheadings, links
   underlined in orange, orange list markers, pull quotes on a
   pink wash with a purple edge, and the short orange rule as a
   section break.
   ============================================================ */
.ca-prose {
  max-width: 68ch;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.75;
  color: var(--ca-ink);
}
.ca-prose > * + * { margin-top: 1.15em; }
.ca-prose h2 {
  margin-top: 1.9em;
  font-family: var(--ca-font-serif);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ca-maroon);
}
.ca-prose h3 { margin-top: 1.6em; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ca-maroon); }
.ca-prose h4 { margin-top: 1.4em; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--ca-maroon); }
.ca-prose a {
  color: var(--ca-maroon);
  text-decoration-color: var(--ca-orange-bright);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ca-prose a:hover { color: var(--ca-pink); text-decoration-color: currentColor; }
.ca-prose strong { font-weight: 700; color: var(--ca-maroon); }
.ca-prose ul,
.ca-prose ol { padding-left: 1.4em; }
.ca-prose li + li { margin-top: 0.45em; }
.ca-prose li::marker { color: var(--ca-orange); }
.ca-prose blockquote {
  padding: 18px 24px;
  font-family: var(--ca-font-serif);
  font-size: 1.2em;
  font-style: italic;
  line-height: 1.5;
  color: var(--ca-maroon);
  background: color-mix(in srgb, var(--ca-pink-soft) 30%, var(--ca-paper));
  border-left: 4px solid var(--ca-purple);
  border-radius: 0 12px 12px 0;
}
.ca-prose blockquote > * + * { margin-top: 0.6em; }
.ca-prose img { margin-inline: auto; border-radius: 12px; }
.ca-prose figcaption { margin-top: 8px; font-size: 0.875rem; text-align: center; color: var(--ca-ink-2); }
.ca-prose hr {
  width: 96px;
  height: 4px;
  margin: 2.2em auto;
  border: 0;
  background: var(--ca-orange-bright);
}
.ca-prose code {
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--ca-line);
  border-radius: 6px;
}
.ca-prose pre {
  padding: 18px 20px;
  overflow-x: auto;
  color: var(--ca-cream);
  background: var(--ca-maroon-deep);
  border-radius: 12px;
}
.ca-prose pre code { padding: 0; background: none; }
.ca-prose table { width: 100%; font-size: 0.95em; border-collapse: collapse; }
.ca-prose th,
.ca-prose td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ca-line); }
.ca-prose th { color: var(--ca-maroon); }


/* ============================================================
   55. BLOG ARTICLE
   Centred header (breadcrumb, serif title, lede, meta), a framed
   featured image, the prose body, tag chips, an author box, and
   three "Keep reading" cards (the shared article card, section 46).
   Content: the post itself; author from data/author.yaml.
   ============================================================ */
.ca-post__head {
  max-width: calc(52rem + 2 * var(--ca-pad-x));
  padding-top: clamp(40px, 6vw, 80px);
  text-align: center;
}
.ca-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
  color: var(--ca-ink-2);
}
.ca-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--ca-orange-bright); }
.ca-crumbs a { color: var(--ca-maroon); text-decoration: none; }
.ca-crumbs a:hover { color: var(--ca-pink); }
/* The current page is the title right below, so it can stay short. */
.ca-crumbs [aria-current] {
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-post__title {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--ca-font-serif);
  font-size: clamp(2.375rem, 1.5rem + 3vw, 4.5rem);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--ca-maroon);
}
.ca-post__lede {
  max-width: 40ch;
  margin: clamp(14px, 1.8vw, 20px) auto 0;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.45;
  text-wrap: balance;
  color: var(--ca-ink);
}
.ca-post__meta {
  margin-top: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-ink-2);
}

/* Featured image: an orange block off the top-left, a purple bar off the right. */
.ca-post__image {
  --ratio: 16 / 9;
  --block-color: var(--ca-orange-bright);
  --block-top: -4%;
  --block-left: -2.5%;
  --block-w: 24%;
  --block-h: 30%;
  --block2-color: var(--ca-purple);
  --block2-top: 40%;
  --block2-right: -2%;
  --block2-w: 2%;
  --block2-h: 40%;
  width: min(100% - 2 * var(--ca-pad-x), 1040px);
  margin: clamp(32px, 4vw, 52px) auto;
}
.ca-post__image img { border-radius: var(--ca-radius-card); }
.ca-post { overflow-x: clip; }
.ca-post__body { padding-bottom: 8px; }
.ca-post:not(:has(.ca-post__image)) .ca-post__body { margin-top: clamp(32px, 4vw, 52px); }

/* ---- Tags ---- */
.ca-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 68ch;
  margin: 40px auto 0;
  list-style: none;
}
.ca-tags a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--ca-maroon);
  background: color-mix(in srgb, var(--ca-pink-soft) 45%, var(--ca-paper));
  border-radius: 999px;
  transition: background-color .2s ease;
}
.ca-tags a:hover { background: var(--ca-pink-soft); }

/* ---- Author box ---- */
.ca-author {
  display: grid;
  gap: 20px;
  align-items: center;
  max-width: 820px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(22px, 3vw, 36px);
  background: var(--ca-paper);
  border-radius: var(--ca-radius-card);
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
@media (min-width: 640px) {
  .ca-author { grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 36px); }
}
.ca-author__photo {
  position: relative;
  isolation: isolate;
  width: 120px;
  aspect-ratio: 1;
  margin: 0;
}
.ca-author__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ca-author__photo::before {
  content: "";
  position: absolute;
  inset: 8px -8px -8px 8px;
  z-index: -1;
  background: var(--ca-orange-bright);
  border-radius: 50%;
}
.ca-author__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-orange);
}
.ca-author__name { margin-top: 4px; font-size: 2rem; line-height: 1; }
.ca-author__role { margin-top: 6px; font-size: 0.875rem; font-weight: 600; color: var(--ca-ink-2); }
/* Her credentials from data/credentials.yaml, one line of small caps
   separated by orange dots. The dots are decoration: the alt text after
   the slash keeps screen readers from announcing them. */
.ca-author__creds {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  color: var(--ca-maroon);
}
.ca-author__creds li + li::before {
  content: "·";
  content: "·" / "";
  margin-inline: 0.55em;
  color: var(--ca-orange-bright);
}
.ca-author__bio { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--ca-ink); }
.ca-author__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ca-author__actions .ca-btn { padding: 0.65em 1.3em; font-size: 0.875rem; }
/* Social links: small round maroon icons that fill on hover. 40px targets. */
.ca-author__social { display: flex; gap: 8px; margin-top: 14px; list-style: none; }
.ca-author__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ca-maroon);
  border: 1.5px solid color-mix(in srgb, var(--ca-maroon) 35%, transparent);
  border-radius: 50%;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.ca-author__social a:hover {
  color: #fff;
  background: var(--ca-maroon);
  border-color: var(--ca-maroon);
}
.ca-author__social .ca-icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .ca-author__social a { transition: none; }
}

/* ---- Keep reading ---- */
.ca-reads__list {
  display: grid;
  gap: clamp(32px, 4vw, 44px);
  margin-top: clamp(20px, 2.6vw, 32px);
  list-style: none;
}
@media (min-width: 640px) {
  .ca-reads__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ca-reads__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-tags a { transition: none; }
}


/* ============================================================
   56. BLOG LISTINGS
   The blog home, categories, tag pages and the tags index.
   Header with eyebrow, display title, intro and category chips
   (current one filled maroon); a featured card for the newest
   post on the blog home; article cards (section 46) three across
   with thin rules between columns; page numbers; and term chips
   with counts on taxonomy index pages.
   Content: data/blog.yaml for the blog home; each category's
   own _index.md; the posts themselves.
   ============================================================ */
.ca-bloglist__head { padding-bottom: clamp(16px, 2vw, 24px); }
.ca-bloglist__title {
  margin-top: 10px;
  font-size: clamp(2.75rem, 1.4rem + 4.4vw, 6rem);
  line-height: 0.9;
}
.ca-bloglist__intro {
  max-width: 52ch;
  margin-top: 16px;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-bloglist { padding-top: clamp(16px, 2vw, 24px); }
.ca-bloglist__empty { color: var(--ca-ink-2); }

/* ---- Category chips ---- */
.ca-chips { margin-top: clamp(20px, 2.6vw, 32px); }
.ca-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.ca-chips a {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--ca-maroon);
  background: var(--ca-paper);
  border: 1.5px solid var(--ca-line);
  border-radius: 999px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ca-chips a:hover { border-color: var(--ca-maroon); }
.ca-chips a[aria-current="page"] {
  color: #fff;
  background: var(--ca-maroon);
  border-color: var(--ca-maroon);
}

/* ---- Featured post ---- */
.ca-featpost {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 860px) {
  .ca-featpost { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.ca-featpost__media { position: relative; isolation: isolate; display: block; }
/* Orange block peeking past the image's top-left corner. */
.ca-featpost__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12px;
  left: -12px;
  width: 30%;
  height: 40%;
  background: var(--ca-orange-bright);
  border-radius: 8px;
}
.ca-featpost__media img,
.ca-featpost__ph {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: color-mix(in srgb, var(--ca-blush) 70%, var(--ca-paper));
  border-radius: var(--ca-radius-card);
}
.ca-featpost__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-orange);
}
.ca-featpost__title {
  margin-top: 8px;
  font-family: var(--ca-font-serif);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ca-maroon);
}
.ca-featpost__title a { color: inherit; text-decoration: none; }
.ca-featpost__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ca-featpost__text {
  margin-top: 12px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--ca-ink);
}
.ca-featpost__meta {
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-ink-2);
}
.ca-featpost .ca-btn { margin-top: 18px; }

/* ---- Card grid: three across, rules between columns, none at row starts ---- */
.ca-bloglist__grid {
  display: grid;
  gap: clamp(32px, 4vw, 44px);
  list-style: none;
}
@media (min-width: 640px) {
  .ca-bloglist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ca-bloglist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 0; }
  .ca-bloglist__grid .ca-article {
    padding-inline: clamp(12px, 1.2vw, 20px);
    border-left: 1px solid var(--ca-line);
  }
  .ca-bloglist__grid .ca-article:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .ca-bloglist__grid .ca-article:nth-child(3n) { padding-right: 0; }
}

/* ---- Page numbers ---- */
.ca-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: clamp(40px, 5vw, 56px);
}
.ca-pager ol { display: flex; gap: 6px; list-style: none; }
.ca-pager ol a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ca-maroon);
  border: 1.5px solid var(--ca-line);
  border-radius: 999px;
}
.ca-pager ol a:hover { border-color: var(--ca-maroon); }
.ca-pager ol a[aria-current="page"] {
  color: #fff;
  background: var(--ca-maroon);
  border-color: var(--ca-maroon);
}

/* ---- Taxonomy index: every term as a chip with its count ---- */
.ca-tags--index { justify-content: flex-start; max-width: none; margin: 0; }
.ca-tags__count {
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 0.75rem;
  color: #fff;
  background: var(--ca-maroon);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .ca-chips a { transition: none; }
}


/* ============================================================
   57. CONTACT
   Header with the local headline; the studio details card
   (address, phone and email, hours, each under an icon label)
   beside a framed map; and a deep-maroon band with a discovery-
   call button and a link to events. Details from hugo.toml's
   [params]; copy from content/contact.md.
   ============================================================ */
.ca-contact__head { padding-bottom: clamp(20px, 2.6vw, 32px); }
.ca-contact__eyebrow::after { background: var(--ca-orange-bright); }
.ca-contact__title {
  margin-top: 10px;
  font-size: clamp(2.75rem, 1.4rem + 4.4vw, 6rem);
  line-height: 0.9;
}
.ca-contact__title > span { display: block; }
.ca-contact__accent { color: var(--ca-orange); }
.ca-contact__intro {
  max-width: 56ch;
  margin-top: 16px;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--ca-ink);
}

/* ---- Details card and map ---- */
.ca-contact { overflow-x: clip; padding-bottom: var(--ca-section-py); }
.ca-contact__inner { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 960px) {
  .ca-contact__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}
.ca-contact__card {
  display: grid;
  gap: clamp(22px, 2.6vw, 30px);
  padding: clamp(24px, 3vw, 40px);
  background: var(--ca-paper);
  border-radius: var(--ca-radius-card);
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-contact__block + .ca-contact__block {
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--ca-line);
}
.ca-contact__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-contact__label .ca-icon { width: 22px; height: 22px; color: var(--ca-pink); }
.ca-contact__address,
.ca-contact__lines {
  margin-top: 10px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-style: normal;
  line-height: 1.6;
  color: var(--ca-ink);
}
.ca-contact__lines a {
  color: var(--ca-maroon);
  text-decoration-color: var(--ca-orange-bright);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ca-contact__lines a:hover { color: var(--ca-pink); }
.ca-contact__card .ca-arrowlink { margin-top: 12px; }
.ca-contact__note { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--ca-ink-2); }
.ca-contact__hours {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  font-size: 1.0625rem;
  color: var(--ca-ink);
}
.ca-contact__hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--ca-line);
}
.ca-contact__hours div:last-child { padding-bottom: 0; border-bottom: 0; }
.ca-contact__hours dd { margin: 0; font-weight: 600; white-space: nowrap; color: var(--ca-maroon); }

/* The map, framed like the photos: orange block top-left, purple bar right. */
.ca-contact__map {
  --block-color: var(--ca-orange-bright);
  --block-top: -4%;
  --block-left: -4%;
  --block-w: 34%;
  --block-h: 30%;
  --block2-color: var(--ca-purple);
  --block2-bottom: 12%;
  --block2-right: -3.5%;
  --block2-w: 3.5%;
  --block2-h: 40%;
}
.ca-contact__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  background: var(--ca-line); /* shows until the map loads */
  border-radius: var(--ca-radius-card);
}
@media (max-width: 959px) {
  .ca-contact__map { justify-self: center; width: min(92%, 640px); }
}

/* ---- Discovery call band ---- */
.ca-contact__cta { color: var(--ca-cream); background: var(--ca-maroon-deep); }
.ca-contact__cta-inner {
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}
@media (min-width: 960px) {
  .ca-contact__cta-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    gap: 48px;
    text-align: left;
  }
}
.ca-contact__cta-title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
  line-height: 0.95;
  color: var(--ca-cream);
}
.ca-contact__cta-text {
  margin-top: 10px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  color: rgba(251, 248, 242, 0.85); /* 11.9:1 on the deep maroon */
}
.ca-contact__cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
}
.ca-contact__cta .ca-arrowlink { color: var(--ca-cream); }
.ca-contact__cta .ca-arrowlink:hover { color: var(--ca-lime); border-color: var(--ca-lime); }


/* ============================================================
   59. REVEAL ON SCROLL
   Three entrances, set up by v2.js and each run once:
     .ca-reveal-draw     brush strokes wipe on from left to right
     .ca-reveal-frame    framed photos fade up; their colour blocks
                         grow into place behind them
     .ca-reveal-stagger  a list's items fade up one after another
   v2.js adds .is-pending only to elements below the fold, and only
   when motion is allowed, so without JS, under reduced motion, and
   for anything on screen at load, none of this applies.
   Movement uses the individual translate and scale properties, not
   transform, so components that already use transform (the raised
   pricing card, the tilted photos) keep theirs.
   ============================================================ */

/* ---- Brush strokes ---- */
.ca-reveal-draw.is-pending {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .7s cubic-bezier(.65, 0, .35, 1) .15s;
}
.ca-reveal-draw.is-pending.is-in { clip-path: inset(0 0 0 0); }

/* ---- Framed photos ---- */
.ca-reveal-frame.is-pending img,
.ca-reveal-frame.is-pending iframe {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .6s ease, translate .6s ease;
}
.ca-reveal-frame.is-pending::before,
.ca-reveal-frame.is-pending::after {
  opacity: 0;
  scale: 0.6;
  transition: opacity .5s ease .2s, scale .7s cubic-bezier(.2, .8, .2, 1) .2s;
}
.ca-reveal-frame.is-pending.is-in img,
.ca-reveal-frame.is-pending.is-in iframe { opacity: 1; translate: none; }
.ca-reveal-frame.is-pending.is-in::before,
.ca-reveal-frame.is-pending.is-in::after { opacity: 1; scale: 1; }

/* ---- Card groups: a quick ripple that stops growing after the fourth item ---- */
.ca-reveal-stagger.is-pending > * {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .6s ease, translate .6s ease;
}
.ca-reveal-stagger.is-pending > :nth-child(2) { transition-delay: 70ms; }
.ca-reveal-stagger.is-pending > :nth-child(3) { transition-delay: 140ms; }
.ca-reveal-stagger.is-pending > :nth-child(n + 4) { transition-delay: 210ms; }
.ca-reveal-stagger.is-pending.is-in > * { opacity: 1; translate: none; }
/* A slower, longer rise (data-ca-pace="slow"): the Home page's big headline.
   Hidden instantly (no transition), then 1.4s per line, 350ms apart. */
.ca-reveal-stagger[data-ca-pace="slow"].is-pending:not(.is-in) > * {
  translate: 0 32px;
  transition: none;
}
.ca-reveal-stagger[data-ca-pace="slow"].is-pending.is-in > * {
  transition: opacity 1.4s ease, translate 1.4s cubic-bezier(.2, .8, .2, 1);
}
.ca-reveal-stagger[data-ca-pace="slow"].is-pending.is-in > :nth-child(2) { transition-delay: 350ms; }
.ca-reveal-stagger[data-ca-pace="slow"].is-pending.is-in > :nth-child(3) { transition-delay: 700ms; }


/* ============================================================
   60. EVENTS: TONE TOKENS + CALENDAR SKIN
   Each circle in data/events.yaml names a tone; these are what the
   calendar does with it. Label text stays maroon on every tint
   (the deeper orange only measures 4.2:1 on its own tint); the
   tone shows in the bar, the dot and the chip's ground.
   The calendar's styles live in its partial, written against the
   old token names. Section 2 maps most of them; the rest point at
   the v2 palette here, under .ca-calendar, which the partial adds
   on v2 pages. One calendar, two skins.
   ============================================================ */
:root {
  --ca-ev-pink-ink: var(--ca-maroon);
  --ca-ev-pink-mark: var(--ca-pink);
  --ca-ev-pink-tint: color-mix(in srgb, var(--ca-pink-soft) 45%, #fff);

  --ca-ev-orange-ink: var(--ca-maroon);
  --ca-ev-orange-mark: var(--ca-orange);
  --ca-ev-orange-tint: color-mix(in srgb, var(--ca-orange-bright) 14%, #fff);

  --ca-ev-purple-ink: var(--ca-maroon);
  --ca-ev-purple-mark: var(--ca-purple);
  --ca-ev-purple-tint: color-mix(in srgb, var(--ca-purple-bright) 12%, #fff);

  --ca-ev-maroon-ink: var(--ca-maroon);
  --ca-ev-maroon-mark: var(--ca-maroon);
  --ca-ev-maroon-tint: color-mix(in srgb, var(--ca-maroon) 9%, #fff);

  --ca-ev-neutral-ink: var(--ca-ink-2);
  --ca-ev-neutral-mark: var(--ca-ink-2);
  --ca-ev-neutral-tint: var(--ca-paper);
}

.ca-calendar {
  --surface: var(--ca-note);           /* the section, a step warmer than the page */
  --white: #fff;                       /* days with sessions */
  --soft: var(--ca-line);
  --accent: var(--ca-orange);
  --accent-dk: var(--ca-maroon);
  --font-display: var(--ca-font-display); /* section 2 points this at the body face */
  --section-py: var(--ca-section-py);
  --radius-card: 14px;
  font-family: var(--ca-font-body);
}

/* A circle added later without a tone reads neutral rather than blank.
   The tone rules in the partial come later in the page, so they win. */
.ca-calendar .ec-key,
.ca-calendar .ec-ev {
  --ec-c: var(--ca-ev-neutral-ink);
  --ec-mark: var(--ca-ev-neutral-mark);
  --ec-tint: var(--ca-ev-neutral-tint);
}

.ca-calendar .s-title {
  margin: 0 0 14px;
  font-family: var(--ca-font-display);
  font-size: clamp(2.25rem, 1rem + 3.6vw, 5rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ca-maroon);
}
.ca-calendar .s-title em { font-style: normal; color: var(--ca-orange); }

.ca-calendar .ec__month-label,
.ca-calendar .ec-month__title {
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-calendar .ec-dow { color: var(--ca-maroon); }
.ca-calendar .ec-day.is-today .ec-day__num strong { background: var(--ca-maroon); }
.ca-calendar .ec-ev { border-left-width: 4px; }


/* ============================================================
   61. EVENT CARDS
   The next open sittings (v2/events/upcoming.html), as cards: a
   photo with a date tab on its corner, the room or category, the
   title, time / place / price, and the lime "Save your spot" bar
   along the bottom. Each card takes its circle's tone: the deeper
   shade for the kicker and icons (4.7:1 and up on the card), a
   soft one for the date tab and the panel that stands in until a
   photo exists. Used on /events/ now, the Studio page next.
   ============================================================ */
.ca-evcards {
  display: grid;
  gap: clamp(20px, 2vw, 28px);
  list-style: none;
}
@media (min-width: 640px)  { .ca-evcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ca-evcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ca-evcard {
  --_tone: var(--ca-ink-2);
  --_soft: var(--ca-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ca-paper);
  border-radius: 14px;
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-evcard--pink   { --_tone: var(--ca-pink);   --_soft: var(--ca-pink-soft); }
.ca-evcard--orange { --_tone: var(--ca-orange); --_soft: color-mix(in srgb, var(--ca-orange-bright) 32%, var(--ca-paper)); }
.ca-evcard--purple { --_tone: var(--ca-purple); --_soft: color-mix(in srgb, var(--ca-purple-bright) 26%, var(--ca-paper)); }

.ca-evcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--_soft) 50%, var(--ca-paper)); /* stands in until a photo exists */
}
.ca-evcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ca-evcard__media-link { display: block; width: 100%; height: 100%; }
.ca-evcard__date { pointer-events: none; } /* a click on the date tab reaches the photo link beneath */
/* Keeps a time or price together when a card line wraps ("9–11 AM", "$222 total"). */
.ca-nowrap { white-space: nowrap; }

/* The date tab hanging from the photo's top edge, as in the mockup. */
.ca-evcard__date {
  position: absolute;
  top: 0;
  left: 16px;
  display: grid;
  justify-items: center;
  min-width: 62px;
  padding: 8px 10px 9px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ca-maroon);
  background: var(--_soft);
  box-shadow: 0 8px 18px -10px rgba(75, 10, 18, 0.45);
}
.ca-evcard__date span { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; }
.ca-evcard__date strong {
  margin-top: 3px;
  font-family: var(--ca-font-display);
  font-size: 2.25rem;
  font-weight: 400;
  font-synthesis: none;
}

.ca-evcard__body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 22px; }
.ca-evcard__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--_tone);
}
.ca-evcard__title {
  margin-top: 6px;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--ca-maroon);
}
.ca-evcard__title-link { color: inherit; text-decoration: none; }
.ca-evcard__title-link:hover { color: var(--_tone); text-decoration: underline; text-underline-offset: 3px; }
.ca-evcard__meta {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.4;
  list-style: none;
  color: var(--ca-ink);
}
.ca-evcard__meta li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.ca-evcard__meta .ca-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--_tone); }

.ca-evcard__btn { min-height: 52px; font-size: 0.875rem; }
.ca-evcard__btn:hover { transform: none; } /* the bar is the card's edge; lifting it opens a gap */
.ca-evcard__soon {
  padding: 15px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--ca-ink-2);
  border-top: 1px solid var(--ca-line);
}


/* ============================================================
   62. EVENTS: "COMING UP NEXT"
   Under the big-word hero (section 40): eyebrow, title and intro,
   a link down to the calendar, then the next open sittings as
   event cards (section 61), or a note when every date is full.
   Content: `next` in content/events.md.
   ============================================================ */
.ca-evnext__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.ca-evnext__eyebrow::after { background: var(--ca-orange-bright); }
.ca-evnext__title {
  margin-top: 10px;
  font-size: clamp(2.25rem, 1rem + 3.6vw, 5rem);
}
.ca-evnext__text {
  max-width: 56ch;
  margin-top: 14px;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-evnext__empty { font-size: 1.0625rem; color: var(--ca-ink-2); }


/* 63. (Removed: the Events page's "More about what's happening" section.) */


/* 64. (Removed: the Events page's "Host | Follow" section.) */


/* ============================================================
   65. PHOTO STAND-IN AND SOFT TONES
   .ca-ph stands in for a photo whose file doesn't exist yet
   (v2/photo.html): a blush box at the frame's --ratio, so the
   layout holds its shape. The soft tones pair a deeper icon
   colour with a pale ground, for icon cards and circles.
   ============================================================ */
.ca-ph {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
  background: color-mix(in srgb, var(--ca-blush) 75%, var(--ca-paper));
}
.ca-soft-pink   { --_icon: var(--ca-pink);   --_bg: color-mix(in srgb, var(--ca-pink-soft) 40%, var(--ca-paper)); }
.ca-soft-orange { --_icon: var(--ca-orange); --_bg: color-mix(in srgb, var(--ca-orange-bright) 13%, var(--ca-paper)); }
.ca-soft-purple { --_icon: var(--ca-purple); --_bg: color-mix(in srgb, var(--ca-purple-bright) 13%, var(--ca-paper)); }
.ca-soft-maroon { --_icon: var(--ca-maroon); --_bg: color-mix(in srgb, var(--ca-blush) 75%, var(--ca-paper)); }


/* ============================================================
   66. STUDIO: HERO
   Headline in maroon, two orange lines under it (the last
   trailing a short rule), a paragraph, the lime button and a
   rental link; the photo on the right with an orange block off
   its top-left, a purple bar off its right edge and an orange
   square below it. Photo first on narrow screens is skipped on
   purpose: the headline names the page.
   Orange lines: 4.7:1 on cream.
   Content: `hero` in content/studio.md.
   ============================================================ */
.ca-shero { overflow-x: clip; }
.ca-shero__inner { display: grid; gap: clamp(48px, 6vw, 80px); align-items: center; }
@media (min-width: 1000px) {
  .ca-shero__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.ca-shero__title { font-size: clamp(2.75rem, 1.2rem + 5vw, 7rem); line-height: 0.9; }
.ca-shero__sub {
  margin-top: 0.25em;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
  line-height: 0.95;
  color: var(--ca-orange);
}
.ca-shero__sub span { display: block; }
.ca-shero__sub span:last-child::after {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 0.08em;
  margin-left: 0.3em;
  vertical-align: 0.3em;
  background: var(--ca-orange-bright);
}
.ca-shero__text {
  max-width: 40ch;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-shero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: clamp(22px, 2.6vw, 32px);
}
.ca-shero__btn { min-height: 56px; padding-inline: 1.8em; }
.ca-shero__actions .ca-arrowlink { margin-left: 1.6em; } /* sits under the button's label, as in the mockup */

.ca-shero__media { position: relative; isolation: isolate; }
/* The orange square below the photo's lower right. */
.ca-shero__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: -6%;
  width: 13%;
  aspect-ratio: 1;
  background: var(--ca-orange-bright);
}
.ca-shero__photo {
  --ratio: 3 / 2;
  --block-color: var(--ca-orange-bright);
  --block-top: -7%;
  --block-left: -5%;
  --block-w: 24%;
  --block-h: 40%;
  --block2-color: var(--ca-purple);
  --block2-bottom: 8%;
  --block2-right: -3.5%;
  --block2-w: 3.5%;
  --block2-h: 26%;
}


/* ============================================================
   67. STUDIO: "WHAT ARE YOU LOOKING FOR RIGHT NOW?"
   An eyebrow heading, then four tinted cards: icon, display
   title, a line of text. The title's link stretches over the
   whole card. Four across from 1100px, two from 640px.
   Content: `looking` in content/studio.md.
   ============================================================ */
.ca-look__eyebrow::after { background: var(--ca-orange-bright); }
.ca-look__list {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(18px, 2.2vw, 28px);
  list-style: none;
}
@media (min-width: 640px)  { .ca-look__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ca-look__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ca-look__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 2.6vw, 36px) clamp(18px, 2vw, 28px);
  text-align: center;
  background: var(--_bg, var(--ca-paper));
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ca-look__item .ca-icon { width: 56px; height: 56px; color: var(--_icon, var(--ca-maroon)); }
.ca-look__title { margin-top: 14px; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 0.95; }
.ca-look__text {
  max-width: 24ch;
  margin-top: 10px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-look__link { color: inherit; text-decoration: none; }
.ca-look__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ca-look__link:focus-visible { outline: none; }
.ca-look__item:has(.ca-look__link:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.ca-look__item:has(.ca-look__link:hover) { transform: translateY(-2px); box-shadow: var(--ca-shadow-card); }
@media (prefers-reduced-motion: reduce) {
  .ca-look__item { transition: none; }
  .ca-look__item:has(.ca-look__link:hover) { transform: none; }
}


/* ============================================================
   68. STUDIO: "THERE'S ALWAYS SOMETHING HAPPENING."
   Deep maroon. Copy and the calendar button on the left; the
   event cards (section 61) on the right as one row that scrolls
   sideways, three to a view on wide screens, two on tablets,
   most of one on phones, with arrows underneath.
   On deep maroon: cream 16:1, cream at 85% 11.9:1, soft pink
   9.5:1; maroon on the bright orange button 5.5:1.
   Content: `happening` in content/studio.md.
   ============================================================ */
.ca-happening { color: var(--ca-cream); background: var(--ca-maroon-deep); overflow-x: clip; }
.ca-happening__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 1100px) {
  .ca-happening__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr); }
}
.ca-happening__title { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; color: var(--ca-cream); }
.ca-happening__title > span { display: block; }
.ca-happening__accent { color: var(--ca-pink-soft); }
.ca-happening__rule {
  width: clamp(80px, 9vw, 150px);
  height: 4px;
  margin: clamp(16px, 2vw, 24px) 0;
  border: 0;
  background: var(--ca-pink-soft);
}
.ca-happening__text {
  max-width: 40ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: rgba(251, 248, 242, 0.85);
}
.ca-happening__btn { margin-top: clamp(22px, 2.6vw, 32px); }
.ca-happening__empty { font-size: 1.0625rem; color: rgba(251, 248, 242, 0.85); }

/* ---- The row ---- */
.ca-happening__row { min-width: 0; }
.ca-happening__row .ca-evcards {
  /* Positioned so the cards' screen-reader-only labels (position: absolute)
     are contained, and clipped, by the scroller. Without this they sit at
     their far-right static positions and stretch the whole page sideways. */
  position: relative;
  --_gap: clamp(16px, 1.6vw, 24px);
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(250px, 82%);
  gap: var(--_gap);
  padding-bottom: 24px; /* room for the cards' shadows inside the scroller */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 248, 242, 0.35) transparent;
}
@media (min-width: 640px) {
  .ca-happening__row .ca-evcards {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - var(--_gap)) / 2);
  }
}
@media (min-width: 1100px) {
  .ca-happening__row .ca-evcards {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 2 * var(--_gap)) / 3);
  }
}
/* Cards are cream-on-paper islands: their focus rings go back to maroon. */
.ca-happening__row .ca-evcard { scroll-snap-align: start; --focus-ring: var(--ca-maroon); }

.ca-happening__controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.ca-happening__controls[hidden] { display: none; }
.ca-happening__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ca-cream);
  background: none;
  border: 1.5px solid rgba(251, 248, 242, 0.45);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.ca-happening__arrow:hover:not(:disabled) {
  color: var(--ca-maroon);
  background: var(--ca-lime);
  border-color: var(--ca-lime);
}
.ca-happening__arrow:disabled { opacity: 0.35; cursor: default; }
.ca-happening__arrow svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
  .ca-happening__arrow { transition: none; }
}


/* ============================================================
   69. STUDIO: "COME AS YOU ARE. THERE'S ROOM FOR YOU HERE."
   A three-photo collage on a 12-column grid (the room, a group
   overlapping it, a small detail over both, dropping below) with
   an orange block, a purple bar and an orange square; the copy
   beside it, ending in four icons in tinted circles.
   "There's room for you here." uses the deeper orange: 4.7:1.
   Content: `room` in content/studio.md.
   ============================================================ */
.ca-room { overflow-x: clip; }
.ca-room__inner { display: grid; gap: clamp(48px, 6vw, 80px); align-items: center; }
@media (min-width: 1000px) {
  .ca-room__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* ---- Collage ---- */
.ca-room__collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: 6% 3% 12% 4%;
}
.ca-room__collage > figure { grid-row: 1; margin: 0; }
.ca-room__main {
  --ratio: 4 / 3;
  --block-color: var(--ca-orange-bright);
  --block-top: -8%;
  --block-left: -6%;
  --block-w: 26%;
  --block-h: 46%;
  grid-column: 1 / 9;
  align-self: start;
}
.ca-room__group {
  --ratio: 4 / 3;
  --block-color: var(--ca-purple-bright);
  --block-top: -9%;
  --block-right: 6%;
  --block-w: 34%;
  --block-h: 12%;
  grid-column: 6 / 13;
  align-self: start;
  margin-top: 14%;
  z-index: 1;
}
.ca-room__detail {
  --ratio: 1;
  --block-color: var(--ca-orange-bright);
  --block-bottom: -10%;
  --block-right: -16%;
  --block-w: 42%;
  --block-h: 28%;
  grid-column: 4 / 8;
  align-self: end;
  margin-bottom: -14%;
  z-index: 2;
}
.ca-room__group img,
.ca-room__group .ca-ph,
.ca-room__detail img,
.ca-room__detail .ca-ph {
  border: 4px solid var(--ca-paper);
  box-shadow: var(--ca-shadow-card);
}

/* ---- Copy ---- */
.ca-room__title { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; }
.ca-room__title > span { display: block; }
.ca-room__accent { color: var(--ca-orange); }
.ca-room__text {
  max-width: 46ch;
  margin-top: 16px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-room__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  margin-top: clamp(24px, 3vw, 36px);
  list-style: none;
  text-align: center;
}
@media (min-width: 640px) {
  .ca-room__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ca-room__icon {
  display: grid;
  place-items: center;
  width: clamp(64px, 6vw, 84px);
  aspect-ratio: 1;
  margin: 0 auto 12px;
  color: var(--_icon, var(--ca-maroon));
  background: var(--_bg, var(--ca-paper));
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ca-cream), 0 0 0 4px color-mix(in srgb, var(--_icon, var(--ca-maroon)) 35%, transparent);
}
.ca-room__icon .ca-icon { width: 50%; height: 50%; }
.ca-room__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}


/* ============================================================
   70. STUDIO: RENTAL | VIRTUAL
   Side by side from 1100px, running to the screen edges with
   their content lined up to the page container. Rental on
   maroon (cream 14.7:1, cream at 85% 10:1, soft pink 8.5:1)
   with a photo beside the copy; virtual on a pink wash behind a
   soft-pink strip (maroon and ink 9:1 and up).
   Content: `rent` and `virtual` in content/studio.md.
   ============================================================ */
.ca-srow { display: grid; }
@media (min-width: 1100px) {
  .ca-srow { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

/* ---- Rental ---- */
.ca-rent {
  padding: var(--ca-section-py) var(--ca-pad-x);
  color: var(--ca-cream);
  background: var(--ca-maroon);
  overflow-x: clip; /* the photo's blocks reach past it */
}
.ca-rent__inner { display: grid; gap: clamp(36px, 4vw, 48px); align-items: center; }
@media (min-width: 760px) {
  .ca-rent__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .ca-rent {
    padding-left: max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2));
    padding-right: clamp(28px, 3vw, 48px);
  }
}
.ca-rent__eyebrow { letter-spacing: 0.06em; color: var(--ca-pink-soft); }
.ca-rent__eyebrow > span { margin-inline-end: 0; }
.ca-rent__title {
  margin-top: 12px;
  font-size: clamp(2.25rem, 1.2rem + 2.8vw, 4rem);
  line-height: 0.92;
  color: var(--ca-cream);
}
.ca-rent__title > span { display: block; }
.ca-rent__accent { color: var(--ca-pink-soft); }
.ca-rent__text {
  max-width: 44ch;
  margin-top: 16px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  color: rgba(251, 248, 242, 0.85);
}
.ca-rent__btn { margin-top: clamp(20px, 2.4vw, 28px); }
.ca-rent__photo {
  --ratio: 4 / 5;
  --block-color: var(--ca-orange-bright);
  --block-top: -5%;
  --block-left: 16%;
  --block-w: 40%;
  --block-h: 12%;
  --block2-color: var(--ca-orange-bright);
  --block2-bottom: -5%;
  --block2-right: 6%;
  --block2-w: 26%;
  --block2-h: 20%;
}

/* ---- Virtual ---- */
.ca-virtual {
  padding: var(--ca-section-py) var(--ca-pad-x);
  background: color-mix(in srgb, var(--ca-pink-soft) 40%, var(--ca-paper));
}
@media (min-width: 1100px) {
  .ca-virtual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: clamp(32px, 3.4vw, 56px);
    padding-right: max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2));
    border-left: clamp(14px, 1.6vw, 28px) solid var(--ca-pink-soft);
  }
}
.ca-virtual__inner { max-width: 560px; }
.ca-virtual__badge {
  display: inline-block;
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-maroon);
  background: var(--ca-pink-soft);
  border-radius: 999px;
}
.ca-virtual__title { margin-top: 14px; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); line-height: 0.95; }
.ca-virtual__text {
  margin-top: 14px;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  color: var(--ca-ink);
}
.ca-virtual__lead { margin-top: 14px; font-weight: 700; line-height: 1.4; color: var(--ca-maroon); }
.ca-virtual__btn { margin-top: 20px; border-radius: 8px; }


/* ============================================================
   71. SPEAKING: HERO
   The Studio hero (section 66) with a two-tone h1: the second
   line in the deeper orange, 4.7:1 on cream. The headline is a
   sentence, so it runs smaller than the Studio's.
   Content: `hero` in content/speaking.md.
   ============================================================ */
.ca-shero__title > span { display: block; }
.ca-shero__accent { color: var(--ca-orange); }
/* The section under the Speaking hero: the Services "ways" intro layout, centred. */
.ca-argue { text-align: center; }
.ca-argue__title { font-size: var(--ca-h2); line-height: 0.95; }
.ca-argue__text {
  max-width: 40rem;
  margin: clamp(20px, 2.4vw, 32px) auto 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ca-ink);
}
/* With a photo: a white section with the photo pushed to the right edge, so the subject sits on
   the edge of the screen. From the top down the layers are
   - white fading out over the top edge and back in over the bottom edge, so the photo dissolves
     into the section instead of ending in a hard line;
   - a white fade over the photo's left edge, running in toward the subject, which also keeps the
     dark text clear of the busy part of the photo;
   - the photo itself, at the section's height, shoved past the right edge;
   - white underneath.
   The text keeps the page's normal dark colours. Without a photo none of this applies. */
.ca-argue--photo {
  --_blend: clamp(70px, 9vw, 130px);          /* how tall the white fades at top and bottom are */
  padding-block: calc(var(--_blend) + clamp(24px, 3vw, 48px));
  background:
    linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) var(--_blend)),
    linear-gradient(to top, #fff 0, rgba(255, 255, 255, 0) var(--_blend)),
    linear-gradient(90deg, #fff 0%, #fff 70%, rgba(255, 255, 255, 0) 88%),
    /* A fixed photo height (and the min-height below to match) so her head always lands about 94% of
       the way across, clear of the title, whatever the screen width: at 720px tall the photo is
       1286px wide and the middle of her head is 527px in, so it's shoved right by 759px less 6% of
       the width. */
    var(--argue-bg) right calc(6vw - 759px) center / auto 720px no-repeat,
    #fff;
  min-height: 720px;
}
/* The paragraph stays clear of her too. */
.ca-argue--photo .ca-argue__text { max-width: 36rem; }
@media (max-width: 759px) {
  /* Phones: the centred text covers the whole width, so the photo gets a band of its own under the
     buttons instead of sitting behind them. She's pushed right so her head is about 76% across,
     with a white fade over the band's top and left edges. At 340px tall the photo is 607px wide and
     the middle of her head is 249px in, so it's shoved right by 358px less 24% of the width. */
  .ca-argue--photo {
    --_band: 340px;
    min-height: 0;
    padding-bottom: calc(var(--_band) - 30px);
    background:
      linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) var(--_blend)),
      linear-gradient(to top, #fff 0, rgba(255, 255, 255, 0) 48px),
      linear-gradient(to top, rgba(255, 255, 255, 0) calc(var(--_band) - 110px), #fff var(--_band)),
      /* the fade is measured from the photo's own left edge (76% of the width less 249px), so it hides that edge at any phone width */
      linear-gradient(90deg, #fff calc(76vw - 249px + 24px), rgba(255, 255, 255, 0) calc(76vw - 249px + 210px)),
      var(--argue-bg) right calc(24vw - 358px) bottom / auto var(--_band) no-repeat,
      #fff;
  }
}
.ca-argue__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin-top: clamp(22px, 2.6vw, 32px);
}


/* ============================================================
   72. SPEAKING: "DR. TANYA SPEAKS ON:"
   The five keynote topics as AWARE cards (section 51), on the
   Coaching process section's cream-to-blush ground. Titles run
   a little larger and tighter than the AWARE step words.
   Content: `topics` in content/speaking.md.
   ============================================================ */
.ca-topics {
  background: linear-gradient(to bottom, var(--ca-cream), color-mix(in srgb, var(--ca-blush) 45%, var(--ca-cream)));
}
.ca-topics__eyebrow::after { background: var(--ca-orange-bright); }
.ca-topics__title { margin-top: 10px; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; }
.ca-topics__title > span { display: block; }
.ca-topics__accent { color: var(--ca-orange); }
.ca-topics .ca-aware-card__word { font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; }
.ca-topics__cta { margin-top: clamp(28px, 3.4vw, 44px); text-align: center; }


/* ============================================================
   73. SPEAKING: "AUDIENCES REMEMBER THIS TALK."
   Three quotes on deep maroon, side by side from 900px with
   thin rules between. Quote type as in the home testimonials
   (section 23), smaller. Soft pink 9.5:1, cream 16:1, cream at
   70% about 8:1.
   Content: `quotes` in content/speaking.md.
   ============================================================ */
.ca-squotes { color: var(--ca-cream); background: var(--ca-maroon-deep); }
.ca-squotes__title {
  font-size: clamp(2.25rem, 1.2rem + 3vw, 4.25rem);
  line-height: 0.92;
  text-align: center;
  color: var(--ca-cream);
}
.ca-squotes__title > span { display: block; }
.ca-squotes__accent { color: var(--ca-pink-soft); }
.ca-squotes__list {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  margin-top: clamp(32px, 4vw, 52px);
  list-style: none;
}
@media (min-width: 900px) {
  .ca-squotes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ca-squotes__list > li { padding-inline: clamp(20px, 2.4vw, 36px); }
  .ca-squotes__list > li:first-child { padding-left: 0; }
  .ca-squotes__list > li:last-child { padding-right: 0; }
  .ca-squotes__list > li + li { border-left: 1px solid rgba(247, 168, 211, 0.25); }
}
.ca-squote { display: flex; flex-direction: column; height: 100%; margin: 0; }
.ca-squote__quote {
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.25rem);
  line-height: 1.05;
  text-transform: none;
  color: var(--ca-pink-soft);
}
.ca-squote__cite {
  margin-top: auto;
  padding-top: 22px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-cream);
}
.ca-squote__cite::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 14px;
  background: var(--ca-orange-bright);
}
.ca-squote__cite span { display: block; margin-top: 4px; color: rgba(251, 248, 242, 0.7); }


/* ============================================================
   74. SPEAKING: "FOR YOUR NEXT CORPORATE TRAINING."
   Intro, audiences (inline checklist, section 21) and a button
   on the left, staying in view from 1000px; the programs on the
   right as a ruled, numbered list. Numbers are bright orange and
   decorative (hidden from screen readers); taglines use the
   deeper orange, 4.7:1 on cream.
   Content: `training` in content/speaking.md.
   ============================================================ */
.ca-programs__inner { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1000px) {
  .ca-programs__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .ca-programs__head { position: sticky; top: calc(var(--ca-masthead-h, 96px) + 24px); }
}
.ca-programs__eyebrow::after { background: var(--ca-orange-bright); }
.ca-programs__title { margin-top: 10px; font-size: clamp(2.5rem, 1.2rem + 3.4vw, 4.75rem); line-height: 0.92; }
.ca-programs__title > span { display: block; }
.ca-programs__accent { color: var(--ca-orange); }
.ca-programs__text {
  max-width: 40ch;
  margin-top: 16px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-programs__aud { margin-top: 18px; font-size: 0.9375rem; font-weight: 600; color: var(--ca-maroon); }
.ca-programs__btn { margin-top: clamp(22px, 2.6vw, 30px); }

.ca-programs__list { list-style: none; border-top: 1px solid var(--ca-line); }
.ca-program {
  display: grid;
  grid-template-columns: clamp(64px, 6vw, 96px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--ca-line);
}
.ca-program__num { font-size: clamp(2.5rem, 1.8rem + 2vw, 4rem); line-height: 0.85; color: var(--ca-orange-bright); }
.ca-program__title { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 0.95; }
.ca-program__tagline {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-orange);
}
.ca-program__text {
  margin-top: 8px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  color: var(--ca-ink);
}


/* ============================================================
   75. SPEAKING: CLOSING BAND
   The Contact page's discovery-call band (section 57) with a
   two-tone title and a second, cream-outline button. Soft pink
   on deep maroon 9.5:1.
   .ca-btn--ghost-cream is general: a cream outline for any dark
   ground, filling cream with a maroon label on hover.
   Content: `band` in content/speaking.md.
   ============================================================ */
.ca-speakband .ca-contact__cta-title > span { display: block; }
.ca-speakband__accent { color: var(--ca-pink-soft); }
.ca-speakband .ca-contact__cta-text { max-width: 58ch; }

.ca-btn--ghost-cream { --_bg: var(--ca-cream); }
.ca-btn--ghost-cream:hover { color: var(--ca-maroon); }


/* ============================================================
   77. RESET HUB: HERO
   The headline on cream, "It might be time for a reset." as the
   script line with an orange swash under "a reset", then a row of
   three photos. The maroon starts a third of the way down the row
   and carries the white statement, the body text, the pains line
   and the lime button. Left photo orange block, right photo purple.
   Content: `hero` and `heroStack` in the-reset-circle/_index.md.
   ============================================================ */
.ca-shero__text + .ca-shero__text { margin-top: 12px; }

.ca-hhero { overflow-x: clip; background: var(--ca-cream); }

/* Headline on cream */
.ca-hhero__head { padding-top: var(--ca-section-py); text-align: center; }
.ca-hhero__title { font-size: clamp(2.75rem, 1.25rem + 6vw, 7.5rem); line-height: 0.88; }
.ca-hhero__line { display: block; }
.ca-hhero__script {
  display: block;
  margin-top: 0.15em;
  font-family: var(--ca-font-script);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ca-maroon);
}
.ca-hhero__swash { position: relative; isolation: isolate; white-space: nowrap; }
.ca-hhero__swash::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6%;
  right: -4%;
  bottom: 0.02em;
  height: 0.3em;
  background: var(--ca-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14Q100 2 197 5Q199 6 196 7Q100 7 5 18Q0 17 3 14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14Q100 2 197 5Q199 6 196 7Q100 7 5 18Q0 17 3 14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Photo row: cream above the split, maroon below */
.ca-hhero__photos {
  --split: 34%;
  margin-top: clamp(28px, 4vw, 56px);
  background: linear-gradient(transparent var(--split), var(--ca-maroon) var(--split));
}
.ca-hhero__photos-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 1fr);
  column-gap: clamp(12px, 2.4vw, 36px);
  max-width: calc(1120px + 2 * var(--ca-pad-x));
}
.ca-hhero__photo img { object-position: var(--pos, 50% 50%); }
.ca-hhero__photo--left img,
.ca-hhero__photo--right img,
.ca-hhero__photo--left .ca-ph,
.ca-hhero__photo--right .ca-ph {
  border: clamp(2px, 0.4vw, 5px) solid var(--ca-paper);
  box-shadow: var(--ca-shadow-card);
}
.ca-hhero__photo--left {
  --ratio: 1;
  --block-color: var(--ca-orange-bright);
  --block-top: -18%;
  --block-left: -16%;
  --block-w: 58%;
  --block-h: 80%;
  align-self: start;
  margin-top: 4%;
}
.ca-hhero__photo--center { --ratio: 3 / 2; --pos: 50% 30%; }
.ca-hhero__photo--right {
  --ratio: 4 / 5;
  --block-color: var(--ca-purple);
  --block-top: -14%;
  --block-left: -16%;
  --block-w: 72%;
  --block-h: 76%;
  align-self: end;
  margin-bottom: 12%;
}

/* Maroon band */
.ca-hhero__band {
  --focus-ring: var(--ca-lime);
  padding-block: clamp(28px, 4vw, 52px) var(--ca-section-py);
  background: var(--ca-maroon);
  color: var(--ca-cream);
}
.ca-hhero__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ca-hhero__statement { max-width: 20ch; font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem); color: #fff; }
.ca-hhero__statement > span { display: block; }
.ca-hhero__text {
  max-width: 52ch;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}
.ca-hhero__pains {
  max-width: 44ch;
  margin-top: clamp(20px, 2.6vw, 32px);
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
}
.ca-hhero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(22px, 2.6vw, 32px); }
.ca-hhero__btn { min-height: 56px; padding-inline: 1.8em; }

/* The home page's hero: the same layout, with a longer statement, a kicker and two square buttons. */
.ca-hhero--home .ca-hhero__statement { max-width: none; }
.ca-hhero--home .ca-hhero__text { text-wrap: balance; }
.ca-hhero__kicker {
  margin-top: clamp(20px, 2.6vw, 32px);
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
}
.ca-hhero--home .ca-hhero__btn { border-radius: 0; }
.ca-hhero__btn--work  { --_bg: var(--ca-orange-bright); --_fg: var(--ca-maroon); }
.ca-hhero__btn--reset { --_bg: var(--ca-pink-soft);     --_fg: var(--ca-maroon); }
.ca-hhero--home .ca-hhero__btn:hover {
  background: color-mix(in srgb, var(--_bg) 82%, #fff);
  border-color: color-mix(in srgb, var(--_bg) 82%, #fff);
}

/* The four circles' artwork: round, ringed in each circle's colour, linking to its page */
.ca-hhero__circles {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: clamp(14px, 3vw, 36px);
  margin-top: clamp(24px, 3vw, 36px);
  list-style: none;
}
.ca-hhero__circle {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--ca-cream);
  text-decoration: none;
}
.ca-hhero__circle img {
  width: clamp(84px, 11vw, 148px);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 50%;
  background: #fff;
  border: clamp(3px, 0.4vw, 5px) solid var(--ca-tone-bright, var(--ca-pink-bright));
  border-radius: 50%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ca-hhero__circle-name {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ca-hhero__circle:hover img,
.ca-hhero__circle:focus-visible img {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 0 0 3px var(--ca-maroon), 0 0 0 6px var(--ca-tone-bright, var(--ca-pink-bright));
}
@media (prefers-reduced-motion: reduce) {
  .ca-hhero__circle img { transition: none; }
  .ca-hhero__circle:hover img, .ca-hhero__circle:focus-visible img { transform: none; }
}
@media (max-width: 559px) {
  .ca-hhero__circles { grid-template-columns: repeat(2, auto); gap: 22px 28px; }
  .ca-hhero__circle img { width: 112px; }
}

/* Phones: the big photo on top, the two small ones overlapping its bottom corners */
@media (max-width: 699px) {
  .ca-hhero__head { padding-top: clamp(40px, 11vw, 56px); }
  .ca-hhero__title { font-size: clamp(2.5rem, 13vw, 4.5rem); }
  .ca-hhero__script { font-size: clamp(1.875rem, 9vw, 3rem); }

  .ca-hhero__photos { --split: 22%; margin-top: 24px; }
  .ca-hhero__photos-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0; }
  .ca-hhero__photo--center { --ratio: 4 / 3; grid-column: 1 / 13; grid-row: 1; }
  .ca-hhero__photo--left,
  .ca-hhero__photo--right { grid-row: 2; z-index: 1; align-self: start; margin-bottom: 0; }
  .ca-hhero__photo--left img,
  .ca-hhero__photo--right img { border-width: 4px; }
  .ca-hhero__photo--left {
    --block-top: auto;
    --block-bottom: -10%;
    --block-left: -8%;
    --block-w: 50%;
    --block-h: 60%;
    grid-column: 1 / 6;
    margin-top: -38%;
  }
  .ca-hhero__photo--right {
    --block-top: auto;
    --block-left: auto;
    --block-bottom: -10%;
    --block-right: -8%;
    --block-w: 50%;
    --block-h: 60%;
    grid-column: 8 / 13;
    margin-top: -24%;
  }

  .ca-hhero__band { padding-top: 36px; }
  .ca-hhero__statement { max-width: none; font-size: clamp(1.875rem, 9vw, 2.75rem); }
  .ca-hhero__pains { font-size: clamp(1.125rem, 5.4vw, 1.5rem); }
  .ca-hhero--home .ca-hhero__statement { font-size: clamp(1.75rem, 8vw, 2.75rem); }
  .ca-hhero__kicker { font-size: clamp(1.125rem, 5.4vw, 1.5rem); }
  .ca-hhero__actions { align-self: stretch; }
  .ca-hhero__btn { width: 100%; max-width: 380px; }
}


/* ============================================================
   78. RESET HUB: "A CIRCLE HAS NO BEGINNING AND NO END."
   Soft pink. Two photos beside the copy, the second laid slightly
   over the first (tinted placeholders until the files exist). Text
   on this pink is maroon or ink; the accent is the deep orange,
   display size only.
   Content: `ethos` in the-reset-circle/_index.md.
   ============================================================ */
.ca-ethos { overflow-x: clip; background: var(--ca-pink-soft); }
.ca-ethos__inner { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .ca-ethos__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
/* Two photos, the second laid slightly over the first's lower right. */
.ca-ethos__photos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: min(100%, 520px);
  justify-self: center;
  padding: 0 4% 12% 4%;
}
.ca-ethos__photo { grid-row: 1; }
.ca-ethos__photo--a {
  --ratio: 4 / 5;
  --block-color: var(--ca-orange-bright);
  --block-top: -6%;
  --block-left: -6%;
  --block-w: 34%;
  --block-h: 30%;
  grid-column: 1 / 9;
  align-self: start;
}
.ca-ethos__photo--b {
  --ratio: 1;
  --block-color: var(--ca-purple);
  --block-bottom: -6%;
  --block-right: -5%;
  --block-w: 10%;
  --block-h: 44%;
  grid-column: 6 / 13;
  align-self: end;
  margin-bottom: -12%;
  z-index: 1;
}
.ca-ethos__photo--b img,
.ca-ethos__photo--b .ca-ph { border: 4px solid var(--ca-paper); box-shadow: var(--ca-shadow-card); }

.ca-ethos__title { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; }
.ca-ethos__title > span { display: block; }
.ca-ethos__accent { color: var(--ca-orange-deep); }
.ca-ethos__lead {
  margin-top: 14px;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.75rem);
  font-weight: 700;
  color: var(--ca-maroon);
}
.ca-ethos__body {
  display: grid;
  gap: 0.9em;
  max-width: 52ch;
  margin-top: 14px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--ca-ink);
}
.ca-ethos__closing { margin-top: clamp(20px, 2.4vw, 28px); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1; }
.ca-ethos__closing span { color: var(--ca-orange-deep); }


/* ============================================================
   79. RESET HUB: "FOUR CIRCLES."
   Heading and intro (side by side from 960px), then the circle pages
   as short service cards (section 22), one row of four from 1180px, in
   their calendar tones: Burnout pink,
   Overthinker's orange, People Pleaser's purple, Perfectionist's
   maroon. Photos a little taller than the Home
   cards', so the circle photos keep their subjects.
   Content: `circles` in the-reset-circle/_index.md.
   ============================================================ */
.ca-rcircles__head { text-align: center; }
.ca-rcircles__title { font-size: var(--ca-h2); line-height: 0.92; }
.ca-rcircles__title > span { display: block; }
.ca-rcircles__accent { color: var(--ca-orange); }
.ca-rcircles__intro {
  display: grid;
  gap: 0.6em;
  max-width: 52ch;
  margin: 16px auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
/* Wider screens: headline on the left, intro on the right, so the cards start higher. */
@media (min-width: 960px) {
  .ca-rcircles__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: clamp(32px, 4vw, 64px);
    text-align: left;
  }
  .ca-rcircles__intro { max-width: none; margin: 0; }
}
/* Four circles: one column on phones, a 2 x 2 grid from 720px, one row of four
   from 1180px. The cards are short (no paragraph), so four across fits. */
.ca-rcircles .ca-cards {
  display: grid;
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
  gap: clamp(20px, 2vw, 28px);
}
.ca-rcircles .ca-cards > li { max-width: none; }
@media (min-width: 720px) {
  .ca-rcircles .ca-cards { grid-template-columns: repeat(2, minmax(0, 520px)); }
}
@media (min-width: 1180px) {
  .ca-rcircles .ca-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .ca-rcircles .ca-card__body { --_pad: 22px; }
  .ca-rcircles .ca-card__title { font-size: clamp(1.625rem, 1.1rem + 0.9vw, 2.125rem); }
  .ca-rcircles .ca-card__kicker { font-size: 0.9375rem; }
  .ca-rcircles .ca-card .ca-check { font-size: 0.9375rem; }
}
.ca-rcircles .ca-card__kicker { margin-top: 8px; }
/* Mouse only: hovering anywhere on a card lifts it and zooms its photo. */
@media (hover: hover) {
  .ca-rcircles .ca-card { transition: transform .25s ease, box-shadow .25s ease; }
  .ca-rcircles .ca-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -22px rgba(75, 10, 18, 0.32), 0 0 0 1px var(--ca-line); }
  .ca-rcircles .ca-card:hover .ca-card__media-link img { transform: scale(1.03); }
}
/* What every circle shares, said once under the row. */
.ca-rcircles__shared {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  width: fit-content;
  max-width: 100%;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding: 14px 24px;
  background: var(--ca-paper);
  border: 1px solid var(--ca-line);
  border-radius: 16px;
}
.ca-rcircles__shared-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ca-maroon); }
.ca-rcircles__shared .ca-check { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 0.9375rem; color: var(--ca-ink); }
@media (max-width: 559px) {
  .ca-rcircles__shared { flex-direction: column; align-items: flex-start; }
  .ca-rcircles__shared .ca-check { flex-direction: column; }
}
.ca-rcircles .ca-card__media img,
.ca-rcircles .ca-card__media .ca-ph { aspect-ratio: 16 / 10; }
/* The photo is a link to the circle page (the button below is the keyboard link). */
.ca-card__media-link { position: relative; display: block; overflow: hidden; cursor: pointer; }
.ca-card__media-link img { transition: transform .4s ease; }
.ca-card__media-link:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .ca-card__media-link img,
  .ca-rcircles .ca-card { transition: none; }
  .ca-card__media-link:hover img,
  .ca-rcircles .ca-card:hover,
  .ca-rcircles .ca-card:hover .ca-card__media-link img { transform: none; }
}


/* ============================================================
   80. RESET HUB: "HOW IT WORKS."
   Centred heading, then three numbered steps in the Coaching
   feature style (section 50), larger, three across from 760px,
   on the cream-to-blush ground.
   Content: `steps` in the-reset-circle/_index.md.
   ============================================================ */
.ca-rsteps {
  background: linear-gradient(to bottom, var(--ca-cream), color-mix(in srgb, var(--ca-blush) 45%, var(--ca-cream)));
}
.ca-rsteps__head { max-width: 760px; margin-inline: auto; text-align: center; }
.ca-rsteps__eyebrow::before,
.ca-rsteps__eyebrow::after { background: var(--ca-orange-bright); }
.ca-rsteps__title { margin-top: 10px; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; }
.ca-rsteps__title > span { display: block; }
.ca-rsteps__accent { color: var(--ca-orange); }
.ca-rsteps__text {
  margin-top: 14px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-rsteps__list { grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 760px) {
  .ca-rsteps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ca-rsteps .ca-icon svg { width: 100%; height: 100%; }
.ca-rsteps .ca-feature__title { font-size: 0.9375rem; }
.ca-rsteps .ca-feature__text { max-width: 30ch; margin-inline: auto; font-size: 1rem; line-height: 1.5; }
.ca-rsteps__cta { margin-top: clamp(28px, 3.4vw, 44px); text-align: center; }
.ca-rsteps__cta .ca-btn:hover .ca-btn__arrow { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .ca-rsteps__cta .ca-btn:hover .ca-btn__arrow { transform: none; } }


/* ============================================================
   81. RESET HUB: "YOU DON'T NEED MORE WILLPOWER."
   The Coaching "It's not just talk" section (section 50) with the
   studio room photo, or its stand-in, filling the left; and a
   "Connection that continues" callout on a pink wash with a
   purple edge.
   Content: `happens` in the-reset-circle/_index.md.
   ============================================================ */
.ca-different__photo .ca-ph { --ratio: 4 / 3; }
@media (min-width: 1100px) {
  .ca-different__photo .ca-ph { height: 100%; min-height: 560px; aspect-ratio: auto; }
}
/* Framed photo (`photoFrame: true` in the hub's `happens`): a portrait frame centred
   in the column, not the full column height, so a wide photo keeps more of its width. */
@media (min-width: 1100px) {
  .ca-rhappens--framed .ca-different__photo { align-self: center; }
  .ca-rhappens--framed .ca-different__photo img,
  .ca-rhappens--framed .ca-different__photo .ca-ph { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}
.ca-rconnect {
  margin-top: clamp(24px, 3vw, 36px);
  padding: 18px 22px;
  background: color-mix(in srgb, var(--ca-tone-soft, var(--ca-pink-soft)) 35%, var(--ca-paper));
  border-left: 4px solid var(--ca-purple);
}
.ca-rconnect__title { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem); line-height: 1; }
.ca-rconnect p {
  margin-top: 8px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  color: var(--ca-ink);
}


/* ============================================================
   82. RESET HUB: "LED BY DR. TANYA LEA."
   Framed photo beside the copy on the warm note cream: two-tone
   heading, credentials in the author box's dotted style (section
   55), a line of text and the scope note.
   Content: `guide` in the-reset-circle/_index.md.
   ============================================================ */
.ca-rguide { overflow-x: clip; background: var(--ca-note); }
.ca-rguide__inner { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .ca-rguide__inner { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
}
.ca-rguide__photo {
  --ratio: 4 / 5;
  --block-color: var(--ca-orange-bright);
  --block-top: -6%;
  --block-left: -7%;
  --block-w: 40%;
  --block-h: 30%;
  --block2-color: var(--ca-purple);
  --block2-top: 40%;
  --block2-right: -8%;
  --block2-w: 8%;
  --block2-h: 40%;
  justify-self: center;
  width: min(80%, 420px);
}
.ca-rguide__title { font-size: clamp(2.5rem, 1.2rem + 3.4vw, 4.75rem); line-height: 0.92; }
.ca-rguide__title > span { display: block; }
.ca-rguide__accent { color: var(--ca-orange); }
.ca-rguide__creds { margin-top: 16px; font-size: 0.8125rem; }
.ca-rguide__text {
  max-width: 46ch;
  margin-top: 16px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-rguide__scope {
  max-width: 64ch;
  margin-top: 20px;
  padding-top: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ca-ink-2);
  border-top: 1px solid var(--ca-line);
}


/* ============================================================
   83. RESET HUB: CLOSING BAND
   The Contact page's band (section 57) with a two-tone title and
   a "still not sure" line carrying the email and phone. Soft pink
   on deep maroon 9.5:1; cream links 16:1.
   Content: `close` in the-reset-circle/_index.md.
   ============================================================ */
.ca-rclose .ca-contact__cta-title > span { display: block; }
.ca-rclose__accent { color: var(--ca-pink-soft); }
.ca-rclose .ca-contact__cta-text { max-width: 58ch; }
.ca-rclose__ask {
  max-width: 58ch;
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(251, 248, 242, 0.85);
}
.ca-rclose__ask a { color: var(--ca-cream); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ca-rclose__ask a:hover { color: var(--ca-lime); }


/* ============================================================
   84. CIRCLE PAGE: HERO AND SCHEDULE CARD
   The split hero (section 66): eyebrow, the circle's name, its
   question in maroon over the refrain in orange, the intro, then
   a card with one row per room (name and mark, dates, time,
   status). Status pills: maroon on lime tint when open, ink-2 on
   the hairline colour otherwise (6.5:1). Rows stack on phones.
   ============================================================ */
/* The copy column is a size container, so the headline can be sized to its width:
   15.5cqi keeps the longest circle name ("PERFECTIONIST'S", about 6em wide in
   Anton) inside the column at every width, instead of running into the photo. */
.ca-shero--circle .ca-shero__copy { container-type: inline-size; }
.ca-shero--circle .ca-shero__title { font-size: min(15.5cqi, 6.5rem); }
.ca-shero--circle .ca-shero__sub span:first-child { color: var(--ca-maroon); }
/* Less empty cream above the eyebrow, so the schedule card and button come up
   the page (the section's normal top padding is about 100px). */
.ca-shero--circle { padding-top: clamp(20px, 3vw, 40px); }
@media (min-width: 1000px) {
  /* Photo and text share a top edge: the photo starts level with the eyebrow. */
  .ca-shero--circle .ca-shero__inner { align-items: start; }
  .ca-shero--circle .ca-shero__photo { --block-top: -4%; }
}
/* Crop toward the lower part of the frame (the Overthinker's photo is mostly
   car roof at the top); the page's heroImageRatio sets how much is cut. */
.ca-shero--circle .ca-shero__photo img { object-position: 50% 80%; }
/* One line, with the rule attached to the text rather than floating off to the
   side. The size follows the column so the whole line fits. On phones it may
   wrap and the rule is dropped. */
.ca-chero__eyebrow {
  margin-bottom: 12px;
  font-size: clamp(0.6875rem, 2.9cqi, 1.0625rem);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.ca-chero__eyebrow > span { margin-inline-end: 0; }
.ca-chero__eyebrow::after { flex: none; width: clamp(20px, 5cqi, 40px); background: var(--ca-orange-bright); }
@media (max-width: 639px) {
  .ca-chero__eyebrow { font-size: 0.8125rem; white-space: normal; }
  .ca-chero__eyebrow::after { display: none; }
}
/* The circle's artwork and short title ("The Overthinker") laid over the bottom-left of the
   hero photo, in the same white rounded card as the artwork above "seats per room", so the
   page's circle is clear at a glance. */
.ca-shero__photo .ca-shero__badge {            /* beats the frame's "image fills the frame" rule */
  position: absolute;
  z-index: 2;
  left: clamp(10px, 4%, 28px);
  bottom: clamp(10px, 4%, 28px);
  width: clamp(120px, 32%, 220px);
  padding-bottom: clamp(6px, 0.8vw, 10px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 34px -10px rgba(40, 12, 20, 0.45), 0 0 0 1px rgba(75, 10, 18, 0.06);
  text-align: center;
}
.ca-shero__photo .ca-shero__badge img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 625;
  object-fit: contain;
  background: none;
}
.ca-shero__badge-title {
  display: block;
  margin-top: -6px;
  padding: 0 8px;
  font-size: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  line-height: 1;
  color: var(--ca-maroon);
}
.ca-chero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ca-chero__actions .ca-arrowlink { margin-left: 0; }

.ca-status {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ca-maroon);
  background: color-mix(in srgb, var(--ca-lime) 60%, var(--ca-paper));
  border-radius: 999px;
}
.ca-status--off { color: var(--ca-ink-2); background: var(--ca-line); }

.ca-sched {
  margin-top: clamp(20px, 2.4vw, 28px);
  overflow: hidden;
  background: var(--ca-paper);
  border-radius: 14px;
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-sched__rows { list-style: none; }
.ca-sched__rows li + li { border-top: 1px solid var(--ca-line); }
.ca-sched__row {
  display: grid;
  grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto;
  grid-template-areas:
    "room dates status"
    "room time  status";
  align-items: center;
  gap: 2px 14px;
  padding: 12px 16px;
  color: var(--ca-ink);
  text-decoration: none;
  transition: background-color .2s ease;
}
.ca-sched__row:hover { background: var(--ca-cream); }
.ca-sched__room { grid-area: room; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ca-maroon); }
.ca-sched__icon { display: inline-flex; flex: none; height: 20px; color: var(--ca-orange); }
.ca-sched__icon svg { width: auto; height: 100%; }
.ca-sched__dates { grid-area: dates; font-size: 0.9375rem; font-weight: 600; }
.ca-sched__time { grid-area: time; font-size: 0.875rem; color: var(--ca-ink-2); }
.ca-sched__row .ca-status { grid-area: status; }
.ca-sched__caption {
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--ca-ink-2);
  background: var(--ca-cream);
  border-top: 1px solid var(--ca-line);
}
@media (max-width: 479px) {
  .ca-sched__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "room  status"
      "dates dates"
      "time  time";
  }
}
@media (prefers-reduced-motion: reduce) {
  .ca-sched__row { transition: none; }
}


/* ============================================================
   85. CIRCLE PAGE: "THE THOUGHTS YOU DON'T SAY OUT LOUD."
   Soft pink. Four speech bubbles (paper cards with a tail, label
   above the thought), then the resolving paragraph, the refrain
   in script and the main button. Text on the pink is maroon or
   ink; labels are the deeper orange on paper (4.7:1 and up).
   ============================================================ */
.ca-thoughts { background: var(--ca-tone-soft, var(--ca-pink-soft)); }
.ca-thoughts__title { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; text-align: center; }
.ca-thoughts__title > span { display: block; }
.ca-thoughts__accent { color: var(--ca-orange-deep); }
.ca-thoughts__list {
  display: grid;
  gap: clamp(28px, 3vw, 36px) clamp(20px, 2.4vw, 28px);
  margin-top: clamp(28px, 3.4vw, 44px);
  list-style: none;
}
@media (min-width: 700px)  { .ca-thoughts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ca-thoughts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ca-thought {
  position: relative;
  padding: 20px 22px 22px;
  background: var(--ca-paper);
  border-radius: 16px;
  box-shadow: 0 14px 30px -18px rgba(75, 10, 18, 0.35);
}
.ca-thought::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 28px;
  border: 12px solid transparent;
  border-top-color: var(--ca-paper);
  border-bottom: 0;
}
.ca-thought:nth-child(even)::after { left: auto; right: 28px; }
.ca-thought__tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-orange);
}
.ca-thought__text {
  margin-top: 8px;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  line-height: 1.08;
  text-transform: none;
}
.ca-thoughts__resolve { max-width: 62ch; margin: clamp(36px, 4.4vw, 56px) auto 0; text-align: center; }
.ca-thoughts__lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem); line-height: 1.5; color: var(--ca-ink); }
.ca-thoughts__line { margin-top: 10px; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); color: var(--ca-maroon); }
.ca-thoughts__resolve .ca-btn { margin-top: 18px; }


/* ============================================================
   86. CIRCLE PAGE: "LET'S BE CLEAR ABOUT WHAT THIS IS."
   Two cards on the cream-to-blush ground: who it's for (checklist,
   section 21, in the circle's tone, with a tone bar on top) and
   what it isn't (outlined crosses on the warm note cream).
   ============================================================ */
.ca-clear {
  background: linear-gradient(to bottom, var(--ca-cream), color-mix(in srgb, var(--ca-tone-wash, var(--ca-blush)) 45%, var(--ca-cream)));
}
.ca-clear__title { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; text-align: center; }
.ca-clear__title > span { display: block; }
.ca-clear__accent { color: var(--ca-orange); }
.ca-clear__grid { display: grid; gap: clamp(20px, 2.4vw, 28px); margin-top: clamp(28px, 3.4vw, 44px); }
@media (min-width: 860px) {
  .ca-clear__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ca-clear__panel {
  padding: clamp(22px, 3vw, 36px);
  background: var(--ca-paper);
  border-top: 6px solid var(--ca-tone-bright, var(--ca-pink-bright));
  border-radius: var(--ca-radius-card);
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-clear__panel--no { background: var(--ca-note); border-top-color: var(--ca-ink-2); }
.ca-clear__head { margin-bottom: 16px; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); }
.ca-clear .ca-check,
.ca-nolist { gap: 12px; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); color: var(--ca-ink); }
.ca-nolist { display: grid; list-style: none; }
.ca-nolist li { position: relative; padding-left: 1.9em; line-height: 1.4; }
.ca-nolist li::before {
  content: "";
  position: absolute;
  top: 0.05em;
  left: 0;
  width: 1.3em;
  height: 1.3em;
  border: 2px solid var(--ca-ink-2);
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4B50' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 55% no-repeat;
}


/* ============================================================
   87. CIRCLE PAGE: "WHERE AND WHEN WE'RE MEETING."
   The Contact page's details card and framed map (section 57)
   under a two-tone heading, then the main button.
   ============================================================ */
.ca-rwhere { overflow-x: clip; }
.ca-rwhere__title { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; }
.ca-rwhere__title > span { display: block; }
.ca-rwhere__accent { color: var(--ca-orange); }
.ca-rwhere__inner { margin-top: clamp(28px, 3.4vw, 44px); }
.ca-rwhere__cta { margin-top: clamp(28px, 3.4vw, 40px); text-align: center; }


/* ============================================================
   88. CIRCLE PAGE: RESERVE
   Heading and lead, one chip per room (an open room's chip is a
   button that reveals its form, ringed in the circle's tone while
   open), the calendar note, the revealed form, and the waitlist
   (or "ask us") gate on a pink wash. Forms sit in white boxes;
   GoHighLevel sets their height once loaded.
   ============================================================ */
.ca-reserve__head { max-width: 760px; margin-inline: auto; text-align: center; }
/* A smaller headline than the other sections' (it was 40-80px), with the circle's
   thumbnail above it. */
.ca-reserve__thumb {
  display: block;
  width: clamp(180px, 22vw, 260px);
  height: auto;
  margin: 0 auto clamp(14px, 2vw, 22px);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-reserve__title { font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem); line-height: 0.95; }
.ca-reserve__title > span { display: block; }
.ca-reserve__accent { color: var(--ca-orange); }
.ca-reserve__lead {
  margin-top: 14px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-reserve__open {
  margin-top: 16px;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--ca-maroon);
  background: color-mix(in srgb, var(--ca-lime) 35%, var(--ca-paper));
  border-radius: 10px;
}

.ca-rooms { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); list-style: none; }
@media (min-width: 760px) {
  .ca-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ca-rooms > li { display: flex; }
.ca-roomchip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 20px 16px;
  text-align: center;
  color: var(--ca-ink);
  background: var(--ca-paper);
  border: 2px solid var(--ca-line);
  border-radius: 14px;
}
button.ca-roomchip,
a.ca-roomchip {
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
button.ca-roomchip:hover,
a.ca-roomchip:hover {
  border-color: var(--ca-tone, var(--ca-pink));
  box-shadow: var(--ca-shadow-card);
  transform: translateY(-2px);
}
button.ca-roomchip[aria-expanded="true"] {
  border-color: var(--ca-tone, var(--ca-pink));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca-tone, var(--ca-pink)) 25%, transparent);
}
.ca-roomchip--off { background: var(--ca-cream); }
.ca-roomchip__symbol { display: inline-flex; height: 30px; color: var(--ca-tone, var(--ca-pink)); }
.ca-roomchip__symbol svg { width: auto; height: 100%; }
.ca-roomchip__label { font-size: 1.5rem; line-height: 1; }
.ca-roomchip__note { font-size: 0.875rem; color: var(--ca-ink-2); }
.ca-roomchip__when { display: grid; gap: 2px; margin-top: 6px; font-size: 0.875rem; }
.ca-roomchip__cue {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-tone-ink, var(--ca-tone, var(--ca-pink)));
}
@media (prefers-reduced-motion: reduce) {
  button.ca-roomchip, a.ca-roomchip { transition: none; }
  button.ca-roomchip:hover, a.ca-roomchip:hover { transform: none; }
}

.ca-reserve__cal { margin-top: 14px; font-size: 0.875rem; text-align: center; color: var(--ca-ink-2); }
.ca-reserve__cal a,
.ca-reserve__other a { color: var(--ca-maroon); text-underline-offset: 3px; }
.ca-reserve__cal a:hover,
.ca-reserve__other a:hover { color: var(--ca-tone-ink, var(--ca-pink)); }

/* Circle pages: the hero repeats the "This is for you if" panel's coloured top edge. */
[data-circle-tone] .ca-sched { border-top: 6px solid var(--ca-tone-bright); }
[data-circle-tone] .ca-shero__photo .ca-shero__badge { border-bottom: 4px solid var(--ca-tone-bright); }
[data-circle-tone] .ca-sched__row:hover { background: color-mix(in srgb, var(--ca-tone-soft) 40%, var(--ca-paper)); }

.ca-reveal { margin-top: clamp(20px, 2.4vw, 28px); }
.ca-reveal[hidden] { display: none; }
.ca-reveal__hint { margin-bottom: 10px; font-weight: 600; text-align: center; color: var(--ca-maroon); }
.ca-reserve__box {
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-reserve__box iframe { display: block; width: 100%; min-height: 560px; border: 0; }
.ca-reserve__note { margin-top: 10px; font-size: 0.875rem; text-align: center; color: var(--ca-ink-2); }

.ca-gate {
  max-width: 640px;
  margin: clamp(28px, 3.4vw, 40px) auto 0;
  padding: clamp(20px, 2.4vw, 28px);
  text-align: center;
  background: color-mix(in srgb, var(--ca-tone-soft, var(--ca-pink-soft)) 35%, var(--ca-paper));
  border-radius: 14px;
}
.ca-gate__prompt { font-size: 1.0625rem; line-height: 1.5; color: var(--ca-ink); }
.ca-gate .ca-btn { margin-top: 14px; }
.ca-reserve__other { margin-top: 22px; font-size: 0.9375rem; text-align: center; color: var(--ca-ink); }


/* ============================================================
   89. HEADER: SUBMENU SUBTITLE
   An optional second line under a submenu link (params.subtitle on
   its [[menu.main]] entry in hugo.toml): smaller, lighter, sentence
   case. Ink-2 on paper 6.5:1; on the cream hover ground 6.1:1.
   ============================================================ */
.ca-nav__subtitle {
  display: block;
  margin-top: 2px;
  font-size: 0.8125em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ca-ink-2);
}

/* The longer "Ways to Work with Dr. Lea" label stays on one line, and the
   header tightens a little between the menu's breakpoint and 1320px so
   the logo, six links and the button all fit. */
@media (min-width: 1180px) {
  .ca-nav__link,
  .ca-header__cta { white-space: nowrap; }
}
@media (min-width: 1180px) and (max-width: 1319px) {
  .ca-nav__list { gap: 14px; }
  .ca-nav__link { font-size: 13px; letter-spacing: 0.03em; }
  .ca-header__cta { padding-inline: 1.1em; font-size: 13px; }
}


/* ============================================================
   90. COACHING: "NOT SURE WHICH EXPERIENCE?" AND PHOTO CAPTION
   The centred prompt under the pricing cards: a title, a line
   and the lime button, on a pink wash with a purple edge. Then
   the caption under the "You know something needs to change"
   photo, hung below the frame so the bars and brush don't move.
   Content: `investments.notSure` and `change.photo.caption` in
   content/private-coaching/_index.md.
   ============================================================ */
.ca-notsure {
  max-width: 760px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: clamp(24px, 3vw, 40px);
  text-align: center;
  background: color-mix(in srgb, var(--ca-pink-soft) 35%, var(--ca-paper));
  border-top: 4px solid var(--ca-purple);
}
.ca-notsure__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 0.98; }
.ca-notsure__text {
  max-width: 54ch;
  margin: 14px auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-notsure__btn { margin-top: clamp(18px, 2.4vw, 28px); }

.ca-change__caption {
  position: absolute;
  top: 100%;
  /* Clear of the orange brush stroke that crosses the photo's lower-left corner. */
  left: 36%;
  right: 0;
  margin-top: 14px;
  text-align: right;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ca-ink-2);
}


/* ============================================================
   91. SPEAKING: FORMATS, AND THE ABOUT "WHAT IF" LEAD
   Three format cards (name over length) on paper, each with a
   top bar in the next AWARE colour: orange, purple, pink. Names
   are maroon, lengths ink: both well above 4.5:1 on paper.
   Then the About page's lead question under "What if the answer
   wasn't trying harder?".
   Content: `formats` in content/speaking.md; `harder.lead` in
   content/about.md.
   ============================================================ */
.ca-formats__eyebrow::before,
.ca-formats__eyebrow::after { background: var(--ca-orange-bright); }
.ca-formats__title { margin-top: 10px; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; text-align: center; }
.ca-formats__title > span { display: block; }
.ca-formats__accent { color: var(--ca-orange); }
.ca-formats__list {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(28px, 3.4vw, 44px);
  list-style: none;
}
@media (min-width: 760px) {
  .ca-formats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ca-format {
  padding: clamp(22px, 2.6vw, 32px);
  text-align: center;
  background: var(--ca-paper);
  border-top: 6px solid var(--ca-orange-bright);
  border-radius: var(--ca-radius-card);
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-format:nth-child(2) { border-top-color: var(--ca-purple); }
.ca-format:nth-child(3) { border-top-color: var(--ca-pink-bright); }
.ca-format__name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-maroon);
}
.ca-format__length { margin-top: 8px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1; color: var(--ca-ink); }

.ca-harder__lead {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ca-maroon);
}



/* ============================================================
   92. 404 PAGE
   Centred on cream: a huge "404" in the bright pink (decorative,
   hidden from screen readers), a two-tone headline with the orange
   brush stroke under the accent line (orange text on cream 4.7:1),
   two flat buttons, then the main pages as pills (the blog's
   category chips, section 56) on paper.
   ============================================================ */
.ca-nf {
  overflow-x: clip;
  padding-block: clamp(16px, 3vw, 40px) clamp(40px, 5vw, 72px);
  text-align: center;
  background: var(--ca-cream);
}
.ca-nf__code {
  font-size: clamp(6.5rem, 3rem + 20vw, 13.5rem);
  line-height: 0.95;
  color: var(--ca-pink-bright);
}
.ca-nf__title {
  margin-top: 0;
  font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.75rem);
  line-height: 0.92;
}
.ca-nf__title > span { display: block; }
.ca-nf__accent {
  position: relative;
  display: inline-block !important;
  padding-bottom: 0.18em;
  color: var(--ca-orange);
}
.ca-nf__brush {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  width: auto;
  height: 0.17em;
  color: var(--ca-orange-bright);
}
.ca-nf__text {
  max-width: 44ch;
  margin: clamp(16px, 2vw, 24px) auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-nf__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
}
@media (max-width: 559px) {
  .ca-nf__actions .ca-btn { flex-basis: 100%; }
}

.ca-nflinks { background: var(--ca-paper); text-align: center; }
.ca-nflinks__title { font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4.25rem); line-height: 0.92; }
.ca-nflinks__title > span { display: block; }
.ca-nflinks__accent { color: var(--ca-orange); }
.ca-nflinks__list { max-width: 760px; margin-inline: auto; }
.ca-nflinks__list ul { justify-content: center; gap: 10px; }


/* ============================================================
   93. ENERGY ASSESSMENT CITY PAGES (/bioenergetics/<city>/)
   The split hero (section 66) with a portrait photo, the city story
   as a readable column (first paragraph set larger), a "How it fits
   into private coaching" panel with a card listing the tiers that
   include the assessment, the neighbourhoods as pills, and the
   maroon closing band (section 83). Orange text on cream 4.7:1;
   maroon on paper well above 4.5:1.
   Content: the page's front matter and body; tiers from
   data/coaching.yaml.
   ============================================================ */
.ca-shero--city .ca-shero__title { font-size: clamp(2.75rem, 1.2rem + 5vw, 6.25rem); }
.ca-shero--city .ca-shero__text { max-width: 46ch; }
.ca-shero--city .ca-shero__photo { --ratio: 4 / 5; --block2-bottom: 12%; }
.ca-shero--city .ca-shero__media { width: min(86%, 440px); justify-self: center; }
@media (min-width: 1000px) {
  .ca-shero--city .ca-shero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .ca-shero--city .ca-shero__media { justify-self: end; width: 100%; max-width: 460px; }
}

.ca-geo { background: var(--ca-paper); }
.ca-geo__prose {
  display: grid;
  gap: 1.1em;
  max-width: 64ch;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ca-ink);
}
.ca-geo__prose > p:first-child {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ca-maroon);
}
.ca-geo__prose a { color: var(--ca-maroon); text-underline-offset: 3px; }
.ca-geo__prose a:hover { color: var(--ca-pink); }

.ca-geofits {
  background: linear-gradient(to bottom, var(--ca-cream), color-mix(in srgb, var(--ca-blush) 45%, var(--ca-cream)));
}
.ca-geofits__inner { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .ca-geofits__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.ca-geofits__eyebrow::after { background: var(--ca-orange-bright); }
.ca-geofits__title { margin-top: 10px; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; }
.ca-geofits__title > span { display: block; }
.ca-geofits__accent { color: var(--ca-orange); }
.ca-geofits__text {
  max-width: 48ch;
  margin-top: 16px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ca-ink);
}
.ca-geofits__btn { margin-top: clamp(20px, 2.4vw, 30px); }
.ca-geofits__card {
  padding: clamp(24px, 3vw, 40px);
  background: var(--ca-paper);
  border-top: 6px solid var(--ca-orange-bright);
  border-radius: var(--ca-radius-card);
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-geofits__cardtitle { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.05; }
.ca-geofits__card .ca-check { gap: 12px; margin-top: 16px; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); color: var(--ca-ink); }
.ca-geofits__note {
  margin-top: 20px;
  padding-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ca-ink-2);
  border-top: 1px solid var(--ca-line);
}

.ca-geoareas { text-align: center; background: var(--ca-paper); }
.ca-geoareas__title { font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4.25rem); line-height: 0.92; }
.ca-geoareas__title > span { display: block; }
.ca-geoareas__accent { color: var(--ca-orange); }
.ca-geoareas__lead { margin-top: 14px; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--ca-ink); }
.ca-geoareas__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  list-style: none;
}
.ca-geoareas__list li {
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-maroon);
  background: var(--ca-cream);
  border: 1.5px solid var(--ca-line);
  border-radius: 999px;
}


/* ============================================================
   94. BIOENERGETICS OVERVIEW (/bioenergetics/)
   An explainer in the same family as the city pages (section 93):
   the split hero with a small scope note, "how it works" as three
   numbered steps (the Reset hub's steps, section 80), six "who it
   helps" cards, the shared "how it fits into private coaching"
   panel, the areas as links, and the FAQ.
   Content: content/bioenergetics/_index.md.
   ============================================================ */
.ca-shero--bio .ca-shero__title { font-size: clamp(2.5rem, 1rem + 4.2vw, 5.25rem); }
.ca-shero--bio .ca-shero__text { max-width: 46ch; }
.ca-bio__scope {
  max-width: 56ch;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ca-ink-2);
  border-top: 1px solid var(--ca-line);
}

.ca-biowhat .ca-rsteps__text { max-width: 60ch; margin-inline: auto; }
.ca-biowhat .ca-feature__title { font-size: 1.0625rem; }

.ca-bioneeds { background: var(--ca-paper); }
.ca-bioneeds__head { max-width: 760px; margin-inline: auto; text-align: center; }
.ca-bioneeds__eyebrow::before,
.ca-bioneeds__eyebrow::after { background: var(--ca-orange-bright); }
.ca-bioneeds__title { margin-top: 10px; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); line-height: 0.92; }
.ca-bioneeds__title > span { display: block; }
.ca-bioneeds__accent { color: var(--ca-orange); }
.ca-bioneeds__text {
  margin-top: 14px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-bioneeds__list {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(28px, 3.4vw, 44px);
  list-style: none;
}
@media (min-width: 700px)  { .ca-bioneeds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ca-bioneeds__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ca-bioneed {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--ca-cream);
  border-top: 5px solid var(--ca-orange-bright);
  border-radius: var(--ca-radius-card);
  box-shadow: 0 0 0 1px var(--ca-line);
}
.ca-bioneed:nth-child(3n+2) { border-top-color: var(--ca-purple); }
.ca-bioneed:nth-child(3n) { border-top-color: var(--ca-pink-bright); }
.ca-bioneed__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--ca-maroon); }
.ca-bioneed__text { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--ca-ink); }

.ca-geofits__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(20px, 2.4vw, 30px); }
.ca-geofits__actions .ca-geofits__btn { margin-top: 0; }

.ca-biooffered__list { margin-top: clamp(18px, 2.4vw, 28px); }
.ca-biooffered__list ul { justify-content: center; }
.ca-biooffered__more { margin-top: clamp(18px, 2.4vw, 28px); font-size: 1rem; color: var(--ca-ink); }
.ca-biooffered__more a { color: var(--ca-maroon); text-underline-offset: 3px; }
.ca-biooffered__more a:hover { color: var(--ca-pink); }



/* ============================================================
   95. HOLISTIC WELLNESS IN TAMPA (/holistic-wellness-tampa/)
   Built from the city pages' parts (section 93) and the overview's
   cards (section 94): a link at the foot of each offering card.
   Content: content/holistic-wellness-tampa.md.
   ============================================================ */
.ca-tpaoffers__list { align-items: stretch; }
.ca-tpaoffers .ca-bioneed { display: flex; flex-direction: column; }
.ca-tpaoffers__link { align-self: flex-start; margin-top: auto; }
.ca-tpaoffers .ca-bioneed__text { margin-bottom: 16px; }
@media (min-width: 1100px) {
  .ca-tpaoffers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ============================================================
   96. HOME: THE MESSAGE THAT RESONATES
   "Knowing better and responding differently aren't the same
   thing." as a band of its own after "You know what you should
   do": white, with charcoal type (--ca-ink, 15:1 on white). Like a
   highlighter pen: once the top of the band reaches the middle of
   the window, a purple highlighter sweeps across "Knowing better"
   (0.9s), turning the letters white as it passes, then after a pause
   across "responding differently" (1.1s), then after another pause a
   purple line is struck through "same thing." (0.7s). White on the
   purple 8.2:1. The finished state (highlighted, struck) is what shows
   without JS and for reduced motion; v2.js adds .is-armed (hide the
   marks) and then .is-in (play). Content: `resonance` in
   content/_index.md.
   ============================================================ */
.ca-resonate { text-align: center; background: #ffffff; }
.ca-resonate__text {
  margin-inline: auto;
  font-size: clamp(2rem, 0.9rem + 3.9vw, 5.25rem);
  line-height: 1.12;
  color: var(--ca-ink);
}
/* Each half on its own line; either wraps (balanced) on narrow screens. */
.ca-resonate__lead,
.ca-resonate__accent { display: block; text-wrap: balance; }

/* The highlighter: a purple bar behind the lower three quarters of the words,
   repeated per line if the phrase wraps. The letters are painted from the
   same edge as the bar (the first background layer, clipped to the text:
   white left of --mp, charcoal right of it), so each letter turns white at
   the moment the bar reaches it, like a blend effect. White on the purple
   8.2:1. --mp is a registered property so it can animate (0% to 100%);
   where @property isn't supported the marks simply appear, finished. */
@property --mp {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
.ca-mark {
  --mp: 100%;
  padding: 0 0.14em;
  margin: 0 -0.14em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background:
    linear-gradient(90deg, #ffffff var(--mp), var(--ca-ink) var(--mp)) 0 0 / 100% 100% no-repeat,
    linear-gradient(var(--ca-purple), var(--ca-purple)) 0 78% / var(--mp) 82% no-repeat;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  border-radius: 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* The strike: a purple line drawn through the middle of the words. */
.ca-strike {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.ca-strike::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 50%;
  height: 0.11em;
  margin-top: -0.055em;
  background: var(--ca-purple);
  border-radius: 0.06em;
  rotate: -1.5deg;
  transform-origin: left center;
}

/* Armed (motion allowed, script running): hidden until the band is in play. */
.ca-resonate.is-armed .ca-mark { --mp: 0%; }
.ca-resonate.is-armed .ca-strike::after { transform: scaleX(0); }
.ca-resonate.is-armed.is-in .ca-mark { --mp: 100%; }
.ca-resonate.is-armed.is-in .ca-strike::after { transform: scaleX(1); }
/* The timings apply only once in play, so arming (hiding) is instant. */
.ca-resonate.is-armed.is-in .ca-mark--a { transition: --mp 0.9s cubic-bezier(.4, 0, .2, 1); }
.ca-resonate.is-armed.is-in .ca-mark--b { transition: --mp 1.1s cubic-bezier(.4, 0, .2, 1) 1.4s; }   /* 0.9s + 0.5s pause */
.ca-resonate.is-armed.is-in .ca-strike::after { transition: transform 0.7s cubic-bezier(.65, 0, .35, 1) 3.1s; } /* 1.4s + 1.1s + 0.6s pause */


/* ============================================================
   97. RESET CIRCLE THANK-YOU PAGE
   Centred on soft pink: a lime circle with a check, the eyebrow,
   a big two-tone headline (maroon, then the deeper orange: the
   page's script rewrites the headline as "line<br><em>line</em>",
   so em is the second line), the message, a note about the
   confirmation email and the lime button. Maroon on the pink
   10:1; the orange is display size only.
   Content: layouts/partials/v2/reset/thanks.html; wording by
   layouts/partials/rc-thanks-tracking.html.
   ============================================================ */
.ca-ty {
  display: grid;
  min-height: 70vh;
  align-items: center;
  text-align: center;
  background: var(--ca-pink-soft);
}
.ca-ty__inner { max-width: 760px; }
.ca-ty__mark {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: clamp(16px, 2vw, 24px);
  color: var(--ca-maroon);
  background: var(--ca-lime);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(251, 248, 242, 0.55);
}
.ca-ty__eyebrow::before,
.ca-ty__eyebrow::after { background: var(--ca-orange-deep); }
.ca-ty__eyebrow { color: var(--ca-maroon); }
.ca-ty__title {
  margin-top: 12px;
  font-size: clamp(2.5rem, 1.2rem + 4.8vw, 5.75rem);
  line-height: 0.95;
  color: var(--ca-maroon);
}
.ca-ty__title em { font-style: normal; color: var(--ca-orange-deep); }
.ca-ty__text {
  max-width: 46ch;
  margin: clamp(16px, 2vw, 24px) auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--ca-ink);
}
.ca-ty__detail { margin-top: 12px; }
.ca-ty__next {
  max-width: 52ch;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding-top: clamp(18px, 2.2vw, 26px);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ca-ink-2);
  border-top: 1px solid rgba(75, 10, 18, 0.2);
}
.ca-ty__next a { color: var(--ca-maroon); text-underline-offset: 3px; }
.ca-ty__next a:hover { color: var(--ca-pink); }
.ca-ty__btn { margin-top: clamp(24px, 3vw, 36px); min-height: 56px; }


/* ============================================================
   98. PRIVATE COACHING THANK-YOU PAGE
   The Reset Circle thank-you page's look (section 97) plus a card
   of what the booked session includes: paper, an orange top bar,
   the ticked list from the Individual Reset Session's pricing card.
   Content: layouts/partials/v2/coaching/thanks.html.
   ============================================================ */
.ca-ty__card {
  max-width: 460px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding: clamp(20px, 2.6vw, 30px);
  text-align: left;
  background: var(--ca-paper);
  border-top: 6px solid var(--ca-orange-bright);
  border-radius: var(--ca-radius-card);
  box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line);
}
.ca-ty__cardtitle { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1; color: var(--ca-maroon); }
.ca-ty__card .ca-check { gap: 10px; margin-top: 14px; font-size: 1.0625rem; color: var(--ca-ink); }

/* ============================================================
   99. ABOUT: "SHE WENT LOOKING FOR ANSWERS." CREDENTIALS STRIP
   The photo keeps its own proportions (the container is the size of
   the image) and sits vertically centred beside the card. Her credentials (eight, each with a detail line) sit in
   a strip of their own under the section: cream, a display heading,
   and the list in columns (one on phones, two from 600px, four from
   1100px), then the scope note.
   Content: `deeper` in content/about.md; credentials and the note
   from data/credentials.yaml.
   ============================================================ */
.ca-deeper .ca-meet__inner { align-items: center; }
/* The orange circle centres on the photo (it was set low to be cut off by the
   section's bottom edge, which no longer applies), peeking out above and below. */
.ca-deeper .ca-meet__photo::before {
  top: 50%;
  left: 50%;
  width: 118%;
  translate: -50% -50%;
}
.ca-deeper-creds { background: var(--ca-cream); }
.ca-deeper-creds__title { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); line-height: 0.95; color: var(--ca-maroon); }
.ca-deeper-creds__list {
  display: grid;
  gap: clamp(16px, 2vw, 28px) clamp(20px, 3vw, 40px);
  margin-top: clamp(20px, 2.6vw, 32px);
  list-style: none;
}
@media (min-width: 600px)  { .ca-deeper-creds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ca-deeper-creds__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ca-deeper-creds__list li {
  padding-left: 16px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ca-ink);
  border-left: 3px solid var(--ca-orange-bright);
}
.ca-deeper-creds__list strong { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--ca-maroon); }
.ca-deeper-creds__list span { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--ca-ink-2); }
.ca-deeper-creds__scope { max-width: 72ch; margin-top: clamp(24px, 3vw, 36px); }

/* ---- Reveal with colour (data-ca-reveal="color") ----
   A solid block of colour sweeps across the element left to right and on
   out the far side; the element (its wash and its text) appears while the
   block covers it. Hidden state has no animation, so nothing plays on
   page load; v2.js adds .is-pending only below the fold and .is-in when
   it scrolls into view. */
.ca-reveal-color { position: relative; overflow: clip; }
.ca-reveal-color::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ca-purple);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.ca-reveal-color.is-pending:not(.is-in) { background-color: transparent; }
.ca-reveal-color.is-pending:not(.is-in) > * { opacity: 0; }
.ca-reveal-color.is-pending.is-in { animation: ca-rc-wash 1.2s steps(1, end) both; }
.ca-reveal-color.is-pending.is-in > * { animation: ca-rc-show 1.2s steps(1, end) both; }
.ca-reveal-color.is-pending.is-in::after { animation: ca-rc-sweep 1.2s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes ca-rc-sweep {
  0%      { transform: scaleX(0); transform-origin: left; }
  50%     { transform: scaleX(1); transform-origin: left; }
  50.01%  { transform: scaleX(1); transform-origin: right; }
  100%    { transform: scaleX(0); transform-origin: right; }
}
@keyframes ca-rc-show { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 1; } }
@keyframes ca-rc-wash { from { background-color: transparent; } 50% { background-color: color-mix(in srgb, var(--ca-pink-soft) 45%, var(--ca-paper)); } to { background-color: color-mix(in srgb, var(--ca-pink-soft) 45%, var(--ca-paper)); } }

/* ============================================================
   100. TAG ENTRANCES (data-ca-reveal="tags")
   Each tag arrives its own way, one after another: the first slides in
   from the left, the second drops from above, the third pops up from
   small, the fourth slides in from the right. The hidden state has no
   transition, so nothing plays on page load; v2.js adds .is-pending
   only below the fold and .is-in when the list scrolls into view.
   ============================================================ */
.ca-reveal-tags.is-pending > li { transition: none; }
.ca-reveal-tags.is-pending:not(.is-in) > li { opacity: 0; }
.ca-reveal-tags.is-pending:not(.is-in) > :nth-child(1) { translate: -48px 0; }
.ca-reveal-tags.is-pending:not(.is-in) > :nth-child(2) { translate: 0 -44px; }
.ca-reveal-tags.is-pending:not(.is-in) > :nth-child(3) { scale: 0.3; }
.ca-reveal-tags.is-pending:not(.is-in) > :nth-child(4) { translate: 56px 0; }
.ca-reveal-tags.is-pending.is-in > li {
  transition: opacity 0.5s ease, translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ca-reveal-tags.is-pending.is-in > :nth-child(2) { transition-delay: 180ms; transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.ca-reveal-tags.is-pending.is-in > :nth-child(3) { transition-delay: 360ms; }
.ca-reveal-tags.is-pending.is-in > :nth-child(4) { transition-delay: 540ms; }

/* ============================================================
   101. STATEMENT ENTRANCE (About, "What she brought together")
   Uses the tags reveal (data-ca-reveal="tags") but is more specific than
   section 100, so only this list changes: each word rises in, then its
   underline draws left to right, and the note fades in last.
   ============================================================ */
.ca-brought.ca-reveal-tags.is-pending:not(.is-in) > li {
  opacity: 0;
  translate: 0 0.35em;
  scale: 1;
  background-size: 0% 0.14em;
}
.ca-brought.ca-reveal-tags.is-pending.is-in > li {
  transition-property: opacity, translate, background-size;
  transition-duration: 0.5s, 0.7s, 0.6s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0s, 0s, 0.4s;
}
.ca-brought.ca-reveal-tags.is-pending.is-in > li:nth-child(2) { transition-delay: 0.15s, 0.15s, 0.55s; }
.ca-brought.ca-reveal-tags.is-pending.is-in > li:nth-child(3) { transition-delay: 0.3s, 0.3s, 0.7s; }
.ca-brought.ca-reveal-tags.is-pending.is-in > li:nth-child(4) { transition-delay: 0.45s, 0.45s, 0.85s; }

.ca-brought.is-pending:not(.is-in) + .ca-brought-note { opacity: 0; }
.ca-brought.is-pending.is-in + .ca-brought-note { transition: opacity 0.6s ease 1.2s; }


/* ============================================================
   102. HEADER: MEGA MENU
   Links on the left; on desktop, a preview on the right (image,
   description) that follows the link you point at or tab to.
   Markup: layouts/partials/v2/nav-mega.html; items and their
   image / meta / description in hugo.toml; behaviour in v2.js.
   ============================================================ */
.ca-mega__links, .ca-mega__sublist { list-style: none; margin: 0; padding: 0; }
.ca-mega__num { margin-right: 8px; font-size: 0.8em; font-weight: 700; letter-spacing: 0.08em; color: var(--ca-pink); }

/* Phones and tablets: a plain list in the drop-down panel, circles indented under their heading. */
@media (max-width: 1179px) {
  .ca-mega__preview { display: none; }
  .ca-mega__sublist { margin: 0 0 6px 2px; padding-left: 14px; border-left: 2px solid var(--ca-line); }
}

/* Desktop */
@media (min-width: 1180px) {
  .ca-header__inner { position: relative; }              /* the panel lines up with the header, not with its link */
  .ca-nav__item--mega { position: static; }

  .ca-nav__sub--mega {
    top: 100%; width: min(820px, 100%); padding: 20px;
    animation: ca-mega-in .18s ease both;
  }
  .ca-nav__sub--mega::before { top: -32px; height: 32px; } /* taller hover bridge: covers the gap from the link down to the panel */

  .ca-mega { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }

  /* Left: the links */
  .ca-mega__links { padding-right: 20px; border-right: 1px solid var(--ca-line); }
  .ca-mega__links .ca-nav__sublink.is-previewed {
    background: var(--ca-cream); box-shadow: inset 3px 0 0 var(--ca-pink-bright);
  }
  .ca-mega__sublist { margin: 2px 0 4px 14px; border-left: 1px solid var(--ca-line); }
  .ca-mega__sublist .ca-nav__sublink { margin-left: 8px; padding-block: 7px; font-size: 13px; }

  /* Right: the preview. Every pane shares one grid cell, so the panel keeps its size as they swap. */
  .ca-mega__preview { display: grid; }
  .ca-mega__pane {
    grid-area: 1 / 1; display: flex; flex-direction: column;
    padding: 6px; border-radius: 12px; color: var(--ca-ink); text-decoration: none;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .ca-mega__pane.is-active { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .2s ease; }

  .ca-mega__img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: cover; object-position: center 30%;
    border-radius: 10px; background: var(--ca-cream);
  }
  .ca-mega__img--blank { display: grid; place-items: center; background: var(--ca-maroon); } /* stand-in until a page has a photo */
  .ca-mega__img--blank::before {
    content: ""; width: 96px; height: 96px;
    border: 2px solid var(--ca-pink-bright); border-radius: 50%;
  }

  .ca-mega__meta { margin-top: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ca-pink); }
  .ca-mega__name { margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--ca-maroon); }
  .ca-mega__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ca-ink-2); }
  .ca-mega__more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ca-maroon);
  }
  .ca-mega__more svg { width: 14px; height: 14px; transition: transform .2s ease; }
  .ca-mega__pane:hover .ca-mega__more { color: var(--ca-pink); }
  .ca-mega__pane:hover .ca-mega__more svg { transform: translateX(3px); }
}
@media (min-width: 1180px) and (hover: hover) {
  /* A short pause, so sweeping the mouse past the link doesn't flash the panel. */
  .ca-nav__item--mega:hover > .ca-nav__sub--mega { animation-delay: .12s; }
}
@keyframes ca-mega-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ca-nav__sub--mega { animation: none; }
  .ca-mega__pane, .ca-mega__pane.is-active, .ca-mega__more svg { transition: none; }
}


/* ============================================================
   103. STUDIO: "MORE THAN AN EVENT" AND "TYPES OF EXPERIENCES"
   Two sections under the Studio hero, from the mockup. First, a
   big headline on the left (last line in orange) with two
   paragraphs on the right, on cream. Then "Types of Experiences
   at the Studio" on a slightly deeper cream: four photo cards,
   each with a round icon cut into the photo's bottom edge (the
   circle is the section's own color), a title and a line.
   Content: `experiences` in content/studio.md.
   ============================================================ */
.ca-xp { background: var(--ca-cream); }
.ca-xp__inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) {
  .ca-xp__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
}
.ca-xp__eyebrow::after { background: var(--ca-orange-bright); }
.ca-xp__title { margin-top: 12px; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 6rem); line-height: 0.92; }
.ca-xp__title > span { display: block; }
.ca-xp__accent { color: var(--ca-orange-bright); }
.ca-xp__lead { display: grid; gap: 1.1em; max-width: 52ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--ca-ink); }

.ca-xptypes { background: var(--ca-note); --_bg: var(--ca-note); padding-top: clamp(40px, 5vw, 72px); }
.ca-xptypes__head { display: grid; gap: 16px; align-items: end; }
@media (min-width: 900px) {
  .ca-xptypes__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
}
.ca-xptypes__eyebrow::after { background: var(--ca-orange-bright); }
.ca-xptypes__title { margin-top: 8px; font-size: clamp(3rem, 1.4rem + 5.4vw, 6.5rem); line-height: 0.88; }
.ca-xptypes__script { margin-top: 4px; padding-left: 0.9em; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); color: var(--ca-maroon); }
.ca-xptypes__text { max-width: 44ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.55; color: var(--ca-ink); }

.ca-xpcards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 44px) clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 4vw, 56px);
  list-style: none;
}
@media (min-width: 600px) { .ca-xpcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ca-xpcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ca-xpcard { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ca-xpcard--orange { --_icon: var(--ca-orange-bright); }
.ca-xpcard--pink   { --_icon: var(--ca-pink); }
.ca-xpcard--purple { --_icon: var(--ca-purple); }
.ca-xpcard__photo { width: 100%; margin: 0; }
.ca-xpcard__photo img,
.ca-xpcard__photo .ca-ph { display: block; width: 100%; aspect-ratio: 1 / 0.95; object-fit: cover; background: var(--ca-line); }
/* The round icon is cut into the photo's bottom edge: the circle takes the section's color. */
.ca-xpcard__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(88px, 34%, 124px);
  aspect-ratio: 1;
  margin-top: calc(clamp(88px, 34%, 124px) / -2);
  position: relative;
  z-index: 2; /* stays in front of the photo when the photo zooms on hover */
  color: var(--_icon);
  background: var(--_bg, var(--ca-note));
  border-radius: 50%;
}
.ca-xpcard__badge .ca-icon { width: 56%; height: 56%; stroke-width: 1.5; }
.ca-xpcard__title { margin-top: 10px; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1; }
.ca-xpcard { position: relative; }
.ca-xpcard__link { color: inherit; text-decoration: none; }
/* The title is the link; its box is stretched over the whole card so the photo, icon and text all click through. */
.ca-xpcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ca-xpcard--linked:hover .ca-xpcard__link { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ca-xpcard__photo img { transition: transform .4s ease; }
.ca-xpcard__photo { overflow: hidden; }
.ca-xpcard--linked:hover .ca-xpcard__photo img { transform: scale(1.03); }
.ca-xpcard__link:focus-visible::after { outline: 2px solid var(--ca-maroon); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .ca-xpcard__photo img { transition: none; } .ca-xpcard--linked:hover .ca-xpcard__photo img { transform: none; } }
.ca-xpcard__text { max-width: 22ch; margin-top: 10px; font-size: 1rem; line-height: 1.45; color: var(--ca-ink); }


/* ============================================================
   104. STUDIO: "A SPACE TO CONNECT, GROW & BE."
   A wide band from the mockup: the photo on the left with a small
   maroon tab over its top-left corner, a deep-maroon panel on the
   right with a pink headline and a cream paragraph. The photo
   stacks above the panel on phones.
   Pink #f58cc3 on #420411: 7.4:1. Cream text on the panel 15:1.
   Content: `space` in content/studio.md.
   ============================================================ */
.ca-space { background: #420411; }
.ca-space__inner { display: grid; }
@media (min-width: 900px) {
  .ca-space__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.ca-space__photo { position: relative; margin: 0; overflow: hidden; }
.ca-space__photo img,
.ca-space__photo .ca-ph { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) {
  .ca-space__photo img,
  .ca-space__photo .ca-ph { aspect-ratio: auto; min-height: clamp(340px, 30vw, 460px); }
}
/* The small maroon tab hanging over the photo's top-left corner. */
.ca-space__photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 22%;
  height: clamp(18px, 2.4vw, 34px);
  background: #420411;
}
.ca-space__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 64px);
}
.ca-space__title { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.75rem); line-height: 0.95; color: #f58cc3; }
.ca-space__text { max-width: 36ch; margin-top: clamp(14px, 1.8vw, 24px); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem); line-height: 1.65; color: var(--ca-cream); }


/* ============================================================
   105. STUDIO: "FIRST TIME HERE? YOU BELONG."
   From the mockup: the photo on the left with an orange block and a
   purple block standing off its right edge (they run to the section's
   bottom), the label, headline, paragraph and a lime button on the
   right, on cream. The last word of the headline is orange. Stacks
   on phones (blocks shrink to the photo's right edge).
   Content: `belong` in content/studio.md.
   ============================================================ */
.ca-belong { overflow-x: clip; background: #fcf6f1; }
.ca-belong__inner { display: grid; align-items: stretch; }
@media (min-width: 900px) {
  .ca-belong__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}
.ca-belong__photo { position: relative; margin: 0; }
.ca-belong__photo img,
.ca-belong__photo .ca-ph { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) {
  .ca-belong__photo img,
  .ca-belong__photo .ca-ph { aspect-ratio: auto; min-height: clamp(360px, 32vw, 520px); }
}
/* The two blocks, flush with the section's bottom edge. */
.ca-belong__photo::before,
.ca-belong__photo::after {
  content: "";
  position: absolute;
  right: -5%;
  width: 14%;
}
.ca-belong__photo::before { top: 28%; height: 53%; background: #f66036; }
.ca-belong__photo::after  { bottom: 0; height: 19%; background: #8f388e; }
@media (max-width: 899px) {
  .ca-belong__photo::before,
  .ca-belong__photo::after { right: 0; width: 8%; }
}
.ca-belong__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 72px) clamp(32px, 5vw, 72px) clamp(36px, 6vw, 110px);
}
.ca-belong__eyebrow { font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.9375rem); }
.ca-belong__eyebrow::after { background: #f66036; }
.ca-belong__title { margin-top: 12px; font-size: clamp(3.25rem, 1.4rem + 6vw, 7.5rem); line-height: 0.9; }
.ca-belong__accent { color: #f66036; }
.ca-belong__text { max-width: 44ch; margin-top: clamp(14px, 1.8vw, 24px); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--ca-ink); }
.ca-belong__btn { margin-top: clamp(20px, 2.6vw, 32px); }


/* ============================================================
   106. CIRCLE PAGE, "x" LAYOUT (layouts/partials/v2/reset/circle-x.html)
   Chosen with `circleLayout: "x"` in a circle's front matter. Every
   class is cx-, so none of it touches the other circle layout. Page
   colour comes from the [data-circle-tone] blocks in section 4
   (--ca-tone-ink is the accent, -bright / -soft / -wash the rest);
   each room card takes its own from a .ca-tone-* class.
   ============================================================ */
.cx-page .ca-btn--dark { --_bg: var(--ca-maroon); }
.cx-page .ca-btn--lime { --_bg: var(--ca-lime); --_fg: var(--ca-maroon); }
.cx-page .ca-btn--ghost { --_bg: transparent; --_fg: var(--ca-cream); border-color: rgba(251, 248, 242, 0.7); }
.cx-page .ca-btn--ghost:hover { background: rgba(251, 248, 242, 0.1); border-color: var(--ca-cream); }
.cx-page .ca-btn--arrow::after {
  content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: var(--cx-arrow) center / contain no-repeat; mask: var(--cx-arrow) center / contain no-repeat;
  transition: transform .2s ease;
}
.cx-page { --cx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.cx-page .ca-btn--arrow:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .cx-page .ca-btn--arrow::after { transition: none; }
  .cx-page .ca-btn--arrow:hover::after { transform: none; }
}
.cx-room { --ca-tone-ink: var(--ca-tone); }

/* Text links and link-style buttons */
.cx-textlink, .cx-linkbtn {
  font-weight: 700; color: var(--ca-maroon);
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--ca-tone-bright); text-underline-offset: 4px;
}
.cx-linkbtn { padding: 0; background: none; border: 0; cursor: pointer; }
.cx-textlink:hover, .cx-linkbtn:hover { color: var(--ca-tone-ink); }

/* Small label above a heading */
.cx-kicker { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ca-ink-2); }
.cx-kicker--accent { color: var(--ca-orange-deep); }

/* Image slot: shows a labeled placeholder until an <img> is placed inside */
.cx-media { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 3); background: var(--ca-line); }
.cx-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.cx-media:not(:has(> img)) {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(75, 10, 18, 0.06) 14px 15px),
    color-mix(in srgb, var(--ca-tone-wash) 65%, var(--ca-paper));
}
.cx-media:not(:has(> img))::after {
  content: attr(data-ph); position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  color: var(--ca-ink-2);
}

/* Frame: two colored blocks behind a photo */
.cx-frame { position: relative; isolation: isolate; }
.cx-frame::before, .cx-frame::after { content: ""; position: absolute; z-index: -1; }
.cx-frame::before {
  top: var(--block-top, auto); right: var(--block-right, auto); bottom: var(--block-bottom, auto); left: var(--block-left, auto);
  width: var(--block-w, 40%); height: var(--block-h, 30%); background: var(--block-color, transparent);
}
.cx-frame::after {
  top: var(--block2-top, auto); right: var(--block2-right, auto); bottom: var(--block2-bottom, auto); left: var(--block2-left, auto);
  width: var(--block2-w, 8%); height: var(--block2-h, 40%); background: var(--block2-color, transparent);
}

/* Check list */
.cx-check { display: grid; align-content: start; gap: 8px; list-style: none; }
.cx-check li { position: relative; padding-left: 1.9em; line-height: 1.4; }
.cx-check li::before {
  content: ""; position: absolute; top: 0.05em; left: 0; width: 1.3em; height: 1.3em;
  background: var(--ca-tone-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 68% no-repeat;
  border-radius: 50%;
}

/* Swoosh: decorative pink-to-orange arc. Tune with --sw-size, --sw-weight, --sw-rot */
.cx-swoosh {
  --_w: var(--sw-weight, 26px);
  position: absolute; pointer-events: none;
  width: var(--sw-size, 420px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from var(--sw-rot, 0deg), transparent 0 12%, var(--ca-pink-bright) 30%, var(--ca-orange-bright) 62%, transparent 80% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w)), #000 calc(100% - var(--_w) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w)), #000 calc(100% - var(--_w) + 1px));
  opacity: var(--sw-opacity, 0.9);
}

/* Centered section heading */
.cx-sechead { max-width: 720px; margin-inline: auto; text-align: center; }
.cx-sechead__title { font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); }
.cx-sechead__text { margin-top: 10px; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.5; color: var(--ca-ink); }

/* =========================================================
   CIRCLE HERO
   Per-page settings, set on the <section> (x.hero.vars):
   --chero-copy-w, --chero-title-size, --chero-sub-size, --chero-media-w, --chero-min-h
   Tagline settings, set on .cx-hero__tag (x.hero.tagVars):
   --tag-top, --tag-right, --tag-size, --tag-rotate; --indent on each line
   ========================================================= */
.cx-hero { position: relative; overflow: clip; background: var(--ca-paper); }
.cx-hero__inner { position: relative; z-index: 1; padding-block: clamp(28px, 4vw, 56px) clamp(36px, 4vw, 56px); }
.cx-hero__copy { container-type: inline-size; }

/* Copy */
.cx-hero__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ca-maroon);
}
.cx-hero__eyebrow > span:first-child { color: var(--ca-orange); }
.cx-hero__eyebrow > span + span { padding-left: 12px; border-left: 1.5px solid currentColor; }
.cx-hero__title { margin-top: 12px; font-size: var(--chero-title-size, clamp(2.75rem, 18.5cqi, 6rem)); line-height: 0.9; }
.cx-hero__sub { margin-top: 0.4em; font-size: var(--chero-sub-size, clamp(1.5rem, 10cqi, 3rem)); line-height: 0.98; }
.cx-hero__sub > span { display: block; }
.cx-hero__sub > span + span { color: var(--ca-orange); }
.cx-hero__sub > span + span::after {
  content: ""; display: inline-block; width: 2.6em; height: 0.3em; margin-left: 0.3em; vertical-align: 0.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none'%3E%3Cpath d='M2 8.5C32 7.5 72 6 118 2.5' stroke='%23FF6B1A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cx-hero__sub--plain > span + span::after { content: none; }
.cx-hero__text { max-width: 44ch; margin-top: clamp(16px, 1.8vw, 26px); font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); line-height: 1.55; color: var(--ca-ink); }
.cx-hero__btn { margin-top: clamp(20px, 1.8vw, 26px); min-height: 54px; padding-inline: 2.2em; font-size: 0.9375rem; letter-spacing: 0.06em; }
.cx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(20px, 1.8vw, 26px); }
.cx-hero__actions .cx-hero__btn { margin-top: 0; }
.cx-hero__meta { display: flex; align-items: center; gap: 12px; margin-top: clamp(20px, 2vw, 28px); }
.cx-hero__meta svg { flex: none; width: 40px; height: 30px; color: var(--ca-maroon); }
.cx-hero__meta p { display: grid; font-size: 0.75rem; line-height: 1.45; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ca-ink-2); }
.cx-hero__meta strong { font-size: 0.8125rem; color: var(--ca-maroon); }

/* Photo */
.cx-hero__media { position: relative; container-type: inline-size; }
.cx-hero__media .cx-media { --ratio: 3 / 2; }

/* Painted strokes, top-right edge of the photo (optional) */
.cx-hero__brush {
  position: absolute; z-index: 1; top: 0; right: 0; width: 20cqi; height: auto;
  mix-blend-mode: multiply; pointer-events: none;
}

/* Painted strokes along the page's left edge (optional, desktop only) */
.cx-hero__edge { display: none; }

/* Tagline on the photo */
.cx-hero__tag {
  position: absolute; z-index: 2; top: var(--tag-top, 7%); right: var(--tag-right, 4%);
  font-size: var(--tag-size, clamp(1.25rem, 3.9cqi, 3rem)); line-height: 0.92;
  color: var(--ca-maroon); text-shadow: 0 0 0.25em rgba(255, 253, 249, 0.55);
  transform: rotate(var(--tag-rotate, -12deg));
}
.cx-hero__tag > span { display: block; margin-left: var(--indent, 0); }
@media (max-width: 599px) { .cx-hero__tag { display: none; } }

/* Desktop: photo bleeds to the right edge and fades into the page on its left */
@media (min-width: 1000px) {
  .cx-hero { display: flex; align-items: center; min-height: var(--chero-min-h, clamp(560px, 50vw, 760px)); }
  .cx-hero__copy { max-width: min(var(--chero-copy-w, 450px), 40%); }
  .cx-hero__media { position: absolute; inset: 0 0 0 auto; width: var(--chero-media-w, 66%); }
  .cx-hero__media .cx-media {
    height: 100%; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%);
    mask-image: linear-gradient(to right, transparent, #000 14%);
  }
  .cx-hero__edge {
    display: block; position: absolute; z-index: 0; top: 0; left: 0; height: 100%;
    width: clamp(32px, calc((100vw - var(--ca-max-w)) / 2 + var(--ca-pad-x) - 8px), 140px);
    mix-blend-mode: multiply; pointer-events: none;
  }
}

/* =========================================================
   THOUGHT BUBBLES
   ========================================================= */
.cx-bubbles { background: var(--ca-tone-soft); }
.cx-bubbles__title { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem); line-height: 0.92; text-align: center; }
.cx-bubbles__title > span { display: block; }
.cx-bubbles__accent { color: var(--ca-orange-deep); }
.cx-bubbles__list { display: grid; gap: 40px 24px; margin-top: clamp(28px, 3.4vw, 44px); list-style: none; }
@media (min-width: 640px) { .cx-bubbles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cx-bubbles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cx-bubble { display: flex; flex-direction: column; align-items: center; }
.cx-bubble__icon { position: relative; z-index: 1; width: 44px; height: 44px; margin-bottom: -10px; color: var(--ca-maroon); }
.cx-bubble__text {
  position: relative; flex: 1; display: grid; place-items: center; width: 100%;
  padding: 28px 22px 24px;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); line-height: 1.1; text-align: center; text-transform: none;
  background: var(--ca-paper); border-radius: 16px; box-shadow: 0 14px 30px -18px rgba(75, 10, 18, 0.35);
}
.cx-bubble__text::after { content: ""; position: absolute; top: 100%; left: 30px; border: 12px solid transparent; border-top-color: var(--ca-paper); border-bottom: 0; }
.cx-bubble:nth-child(even) .cx-bubble__text::after { left: auto; right: 30px; }
.cx-bubbles__lead { max-width: 64ch; margin: clamp(36px, 4vw, 52px) auto 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.55; text-align: center; color: var(--ca-ink); }

/* =========================================================
   PHOTO + COPY SPLIT
   ========================================================= */
.cx-split { position: relative; overflow: clip; background: var(--ca-cream); }
.cx-split__inner { display: grid; }
.cx-split__media { --ratio: 4 / 3; }
.cx-split__copy { padding: var(--ca-section-py) var(--ca-pad-x); }
.cx-split__title { margin-top: 10px; font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.75rem); line-height: 0.92; }
.cx-split__script { margin-top: 0.1em; font-size: clamp(2.25rem, 1.5rem + 2.4vw, 4rem); color: var(--ca-orange); }
.cx-split__body { max-width: 58ch; margin-top: clamp(12px, 1.6vw, 20px); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.55; color: var(--ca-ink); }
@media (min-width: 1100px) {
  .cx-split__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .cx-split__media { min-height: 560px; aspect-ratio: auto; }
  .cx-split__copy {
    align-self: center;
    padding: var(--ca-section-py) max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2)) var(--ca-section-py) clamp(32px, 4vw, 72px);
  }
  .cx-split--reverse .cx-split__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .cx-split--reverse .cx-split__media { order: 2; }
  .cx-split--reverse .cx-split__copy { padding-inline: max(var(--ca-pad-x), calc((100vw - var(--ca-max-w)) / 2)) clamp(32px, 4vw, 72px); }
}

/* Icon row (4 items) */
.cx-iconrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: clamp(24px, 3vw, 36px); list-style: none; text-align: center; }
@media (min-width: 760px) {
  .cx-iconrow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .cx-iconrow > li { padding-inline: clamp(8px, 1vw, 16px); }
  .cx-iconrow > li + li { border-left: 1px solid var(--ca-line); }
}
.cx-iconrow__icon { width: 40px; height: 40px; margin-inline: auto; color: var(--ca-tone-ink); }
.cx-iconrow__title { margin-top: 12px; font-size: 0.8125rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ca-tone-ink); }
.cx-iconrow__text { margin-top: 6px; font-size: 0.875rem; line-height: 1.45; color: var(--ca-ink-2); }

/* =========================================================
   ICON CARDS ("A space for you")
   ========================================================= */
.cx-space { position: relative; overflow: clip; background: linear-gradient(to bottom, var(--ca-tone-wash), color-mix(in srgb, var(--ca-tone-wash) 55%, var(--ca-cream))); }
.cx-space > .ca-container { position: relative; z-index: 1; }
.cx-space__doodle { position: absolute; z-index: 0; pointer-events: none; color: var(--ca-tone-bright); opacity: 0.45; }
.cx-space__doodle--hearts { top: 3%; right: 2%; width: clamp(160px, 22vw, 320px); }
.cx-space__doodle--swirl { bottom: 4%; left: -30px; width: clamp(110px, 12vw, 180px); }
@media (max-width: 899px) { .cx-space__doodle { opacity: 0.22; } }
.cx-space__title { margin-top: 8px; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.cx-space__script { margin-top: 0.1em; font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem); color: var(--ca-orange); }
.cx-cards { display: grid; gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 3vw, 36px); list-style: none; }
@media (min-width: 900px) { .cx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx-card {
  display: flex; align-items: flex-start; gap: 16px; padding: clamp(20px, 2.4vw, 28px);
  background: var(--ca-paper); border-radius: 16px; box-shadow: var(--ca-shadow-card), 0 0 0 1px rgba(75, 10, 18, 0.05);
}
.cx-card__icon { flex: none; width: 40px; height: 40px; color: var(--cx-icon, var(--ca-tone-ink)); }
.cx-card__title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.05; text-transform: none; }
.cx-card__text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--ca-ink-2); }
.cx-brushline {
  position: relative; isolation: isolate; max-width: 760px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 16px 32px;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); font-weight: 500; line-height: 1.5; text-align: center; color: var(--ca-ink);
}
.cx-brushline::before {
  content: ""; position: absolute; inset: 0 -2%; z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ca-tone-soft) 80%, transparent) 6% 94%, transparent);
  border-radius: 46% 54% 42% 58% / 60% 44% 56% 40%; transform: rotate(-1deg);
}
@media (min-width: 640px) { .cx-brushline > span { display: block; } }

/* =========================================================
   ROOM CARDS
   ========================================================= */
.cx-roomsec { background: var(--ca-paper); }
.cx-rooms { display: grid; gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 3vw, 36px); list-style: none; }
@media (min-width: 820px) { .cx-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx-room {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ca-paper); border: 2px solid var(--ca-tone-bright); border-radius: 16px; box-shadow: var(--ca-shadow-card);
}
.cx-room__head { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px 14px; }
.cx-room__head .rc-symbol { width: auto; height: 30px; color: var(--ca-tone-ink); }
.cx-room__title { font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); line-height: 1; }
/* 2:1, the shape of the room photos (their title text is on the left, so no cropping). */
.cx-room__media { --ratio: 2 / 1; }
.cx-room__facts { flex: 1; padding: 18px 20px 4px; font-size: 0.9375rem; color: var(--ca-ink); }
.cx-room__btn { margin: 16px 20px 20px; }
.cx-rooms__more { display: grid; gap: 6px; justify-items: center; margin-top: clamp(20px, 2.4vw, 28px); font-size: 0.9375rem; text-align: center; color: var(--ca-ink-2); }

/* Question form reveal */
.cx-reveal { max-width: 760px; margin: clamp(20px, 2.4vw, 28px) auto 0; }
.cx-reveal[hidden] { display: none; }
.cx-reveal__hint { margin-bottom: 10px; font-weight: 600; text-align: center; color: var(--ca-maroon); }
.cx-reserve__box { overflow: hidden; background: #fff; border-radius: 14px; box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line); }
.cx-reserve__box iframe { display: block; width: 100%; min-height: 560px; border: 0; }
.cx-reserve__note { margin-top: 10px; font-size: 0.875rem; text-align: center; color: var(--ca-ink-2); }

/* =========================================================
   WHERE AND WHEN
   ========================================================= */
.cx-where { background: var(--ca-cream); }
.cx-where__inner { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 1000px) { .cx-where__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); } }
.cx-where__title { font-size: clamp(2.25rem, 1.3rem + 2.8vw, 4rem); line-height: 0.92; }
.cx-where__title > span { display: block; }
.cx-where__accent { color: var(--ca-orange); }
.cx-where__text { max-width: 40ch; margin-top: 14px; font-size: 0.9375rem; line-height: 1.55; color: var(--ca-ink-2); }
.cx-facts { display: grid; gap: 22px; list-style: none; }
.cx-fact { display: flex; align-items: flex-start; gap: 14px; }
.cx-fact__icon { flex: none; width: 28px; height: 28px; color: var(--ca-tone-ink); }
.cx-fact__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ca-maroon); }
.cx-fact p:not(.cx-fact__label), .cx-fact address { margin-top: 2px; font-size: 0.9375rem; font-style: normal; line-height: 1.5; color: var(--ca-ink); }
.cx-fact .cx-textlink { display: inline-block; margin-top: 6px; font-size: 0.875rem; }
.cx-where__map { overflow: hidden; border-radius: var(--ca-radius-card); box-shadow: var(--ca-shadow-card), 0 0 0 1px var(--ca-line); }
.cx-where__map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; background: var(--ca-line); }

/* =========================================================
   GUIDE
   ========================================================= */
.cx-guide { overflow-x: clip; background: var(--ca-note); }
.cx-guide__inner { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
@media (min-width: 860px) { .cx-guide__inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }
.cx-guide__frame {
  justify-self: center; width: min(72%, 340px);
  --block-color: var(--ca-orange-bright); --block-top: -6%; --block-left: -10%; --block-w: 40%; --block-h: 34%;
  --block2-color: var(--ca-purple); --block2-top: 38%; --block2-right: -9%; --block2-w: 9%; --block2-h: 40%;
}
.cx-guide__title { font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4.5rem); line-height: 0.92; }
.cx-guide__title > span { display: block; }
.cx-guide__accent { color: var(--ca-orange); }
.cx-creds {
  display: flex; flex-wrap: wrap; margin-top: 16px; list-style: none;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ca-maroon);
}
.cx-creds li + li::before { content: "·"; margin-inline: 0.55em; color: var(--ca-orange-bright); }
.cx-guide__text { max-width: 48ch; margin-top: 16px; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--ca-ink); }
.cx-guide__scope { max-width: 64ch; margin-top: 20px; padding-top: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--ca-ink-2); border-top: 1px solid var(--ca-line); }

/* =========================================================
   FAQ
   ========================================================= */
.cx-faq { background: linear-gradient(to bottom, color-mix(in srgb, var(--ca-tone-wash) 80%, var(--ca-paper)), var(--ca-tone-wash)); }
.cx-faq__inner { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) {
  .cx-faq__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
  .cx-faq__title { position: sticky; top: calc(var(--ca-masthead-h, 96px) + 24px); }
}
.cx-faq__title { font-size: clamp(2.25rem, 1.3rem + 3vw, 4.25rem); line-height: 0.92; }
.cx-faq__title > span { display: block; }
.cx-faq__accent { color: var(--ca-tone-ink); }
.cx-faq__list { display: grid; gap: 10px; }
.cx-faq__item { background: var(--ca-paper); border-radius: 12px; box-shadow: 0 0 0 1px rgba(75, 10, 18, 0.06); }
.cx-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); font-weight: 700; line-height: 1.35; color: var(--ca-maroon);
  list-style: none; border-radius: 12px; cursor: pointer;
}
.cx-faq__item summary::-webkit-details-marker { display: none; }
.cx-faq__item summary::after {
  content: ""; flex: none; width: 24px; height: 24px;
  background: var(--ca-tone-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 50% no-repeat;
  border-radius: 50%; transition: transform .2s ease;
}
.cx-faq__item[open] summary::after { transform: rotate(45deg); }
.cx-faq__answer { padding: 0 18px 16px; font-size: 0.9375rem; line-height: 1.6; color: var(--ca-ink); }
@media (prefers-reduced-motion: reduce) { .cx-faq__item summary::after { transition: none; } }

/* =========================================================
   CLOSING BAND
   ========================================================= */
.cx-closer { position: relative; overflow: clip; padding-block: clamp(44px, 5vw, 72px); color: var(--ca-cream); background: var(--ca-maroon-deep); }
.cx-closer__inner { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: center; text-align: center; }
@media (min-width: 900px) {
  .cx-closer__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 48px; text-align: left; }
}
.cx-closer__title { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem); color: var(--ca-cream); }
.cx-closer__text { max-width: 44ch; margin-top: 8px; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); color: rgba(251, 248, 242, 0.85); }
.cx-closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cx-closer__swoosh { --sw-size: clamp(200px, 22vw, 340px); --sw-weight: clamp(12px, 1.4vw, 22px); top: 50%; translate: 0 -50%; --sw-opacity: 0.75; }
.cx-closer__swoosh--l { left: calc(var(--sw-size) * -0.55); --sw-rot: 20deg; }
.cx-closer__swoosh--r { right: calc(var(--sw-size) * -0.6); --sw-rot: 200deg; }
@media (max-width: 899px) { .cx-closer__swoosh { --sw-opacity: 0.35; } }

/* ---- Additions for the Overthinker page (and any circle that uses them) ---- */

/* Secondary text action with a painted underline */
.cx-arrowlink {
  display: inline-flex; align-items: center; gap: 0.6em; padding-bottom: 6px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--ca-maroon);
  background: linear-gradient(90deg, var(--ca-tone-bright), var(--ca-orange-bright)) left bottom / 100% 3px no-repeat;
  transition: color .2s ease;
}
.cx-arrowlink:hover { color: var(--ca-tone-ink); }

/* Outline button (maroon) */
.cx-page .ca-btn--outline { --_bg: transparent; --_fg: var(--ca-maroon); min-height: 44px; font-size: 0.875rem; color: var(--ca-maroon); background: transparent; border-color: var(--ca-maroon); }
.cx-page .ca-btn--outline:hover { color: #fff; background: var(--ca-maroon); border-color: var(--ca-maroon); }

/* Swash: painted underline under a word or line. Tune with --swash-w and --swash-m */
.cx-swash::after {
  content: ""; display: block; width: var(--swash-w, 3.4em); height: 0.42em; margin: var(--swash-m, -0.12em auto 0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23FF6B1A'/%3E%3Cstop offset='1' stop-color='%23FF2D8E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 19C44 12 96 6 158 2C110 9 60 15 8 23Z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: reduce) { .cx-arrowlink { transition: none; } }

/* Thought bubbles: plain variant + closing script line */
.cx-bubbles--plain .cx-bubble__text { place-items: center start; padding: 22px 24px; text-align: left; border-radius: 6px; }
.cx-bubbles--plain .cx-bubble:nth-child(even) .cx-bubble__text::after { left: 30px; right: auto; }
.cx-bubbles--plain .cx-bubble:last-child .cx-bubble__text::after { left: auto; right: 30px; }
.cx-bubbles__lead strong { color: var(--ca-maroon); }
.cx-bubbles__script { --swash-w: 4em; margin-top: 18px; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); text-align: center; color: var(--ca-maroon); }

/* Split: italic second line, badge icons */
.cx-split__italic { margin-top: 0.2em; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.375rem); font-style: italic; font-weight: 500; line-height: 1.1; color: var(--ca-orange); }
.cx-iconrow--badge > li + li { border-left: 0; }
.cx-iconrow--badge .cx-iconrow__icon { width: 52px; height: 52px; padding: 13px; color: #fff; background: var(--ca-maroon); border-radius: 50%; stroke-width: 1.8; }
.cx-iconrow--badge .cx-iconrow__title { color: var(--ca-maroon); }

/* Note: script heading + prose */
.cx-note {
  padding-block: clamp(44px, 6vw, 80px);
  background: linear-gradient(100deg, color-mix(in srgb, var(--ca-tone-soft) 55%, var(--ca-paper)), var(--ca-tone-wash));
}
.cx-note__inner { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) { .cx-note__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.cx-note__title {
  max-width: 12em; margin-inline: auto;
  font-size: clamp(2.5rem, 1.7rem + 2.4vw, 4.25rem); line-height: 1; text-align: center; text-wrap: balance;
  color: var(--ca-maroon); transform: rotate(-4deg);
}
.cx-note__body { display: grid; gap: 12px; max-width: 64ch; font-size: 0.9375rem; line-height: 1.55; color: var(--ca-ink); }
@media (min-width: 900px) { .cx-note__body { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid rgba(75, 10, 18, 0.3); } }
.cx-note__strong { font-weight: 700; color: var(--ca-maroon); }

/* Room picker: intro + photo cards */
.cx-roompick { background: var(--ca-paper); }
.cx-roompick__inner { display: grid; gap: clamp(28px, 3vw, 40px); align-items: center; }
@media (min-width: 1100px) { .cx-roompick__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.05fr); } }
.cx-roompick__title { margin-top: 10px; font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.75rem); line-height: 0.95; }
.cx-roompick__title > span { display: block; }
.cx-roompick__accent { color: var(--ca-orange); }
.cx-roompick__text { max-width: 46ch; margin-top: 14px; font-size: 0.9375rem; line-height: 1.55; color: var(--ca-ink); }
.cx-roomcards { display: grid; gap: clamp(14px, 1.6vw, 20px); list-style: none; }
@media (min-width: 720px) { .cx-roomcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx-roomcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 10px; box-shadow: var(--ca-shadow-card), 0 0 0 1px rgba(75, 10, 18, 0.06);
}
.cx-roomcard__photo { position: relative; overflow: hidden; }
.cx-roomcard__photo .cx-media { --ratio: 2 / 1; }
.cx-roomcard__photo::after {
  content: ""; position: absolute; right: -16%; bottom: -18%; width: 62%; height: 46%; pointer-events: none;
  background: linear-gradient(100deg, var(--ca-tone-bright) 20%, var(--ca-orange-bright) 85%);
  -webkit-mask: radial-gradient(50% 50% at 50% 100%, transparent 70%, #000 72% 86%, transparent 88%);
  mask: radial-gradient(50% 50% at 50% 100%, transparent 70%, #000 72% 86%, transparent 88%);
  transform: rotate(-16deg);
}
.cx-roomcard__body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }
.cx-roomcard__name { font-size: 1.125rem; font-weight: 700; line-height: 1.2; color: var(--ca-maroon); }
.cx-roomcard__tagline { margin-top: 2px; font-size: 0.875rem; line-height: 1.35; color: var(--ca-ink-2); }
.cx-roomcard__facts { display: grid; gap: 4px; margin-top: 12px; list-style: none; font-size: 0.875rem; color: var(--ca-ink); }
.cx-roomcard__facts li { display: flex; align-items: center; gap: 8px; }
.cx-roomcard__facts svg { flex: none; width: 16px; height: 16px; color: var(--ca-tone-ink); }
.cx-roomcard__price { margin: 8px 0 14px; font-size: 0.875rem; color: var(--ca-ink); }
.cx-roomcard__price strong { font-size: 1rem; color: var(--ca-maroon); }
.cx-roomcard__btn { margin-top: auto; min-height: 44px; padding-inline: 1em; font-size: 0.8125rem; }

/* Visit: where + questions */
.cx-visit { padding-block: clamp(40px, 5vw, 64px); background: var(--ca-cream); }
.cx-visit__grid { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 960px) { .cx-visit__grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
.cx-visit__card {
  padding: clamp(20px, 2.4vw, 28px);
  background: #fff; border-radius: 10px; box-shadow: var(--ca-shadow-card), 0 0 0 1px rgba(75, 10, 18, 0.05);
}
.cx-visit__where { display: grid; gap: 20px; align-items: center; }
@media (min-width: 700px) { .cx-visit__where { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr); } }
.cx-visit__title { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); line-height: 0.95; }
.cx-visit__title > span { display: block; }
.cx-visit__accent { color: var(--ca-orange); }
.cx-visit__addr { display: flex; align-items: flex-start; gap: 10px; }
.cx-visit__addr svg { flex: none; width: 22px; height: 22px; color: var(--ca-maroon); }
.cx-visit__addr address { font-size: 0.875rem; font-style: normal; line-height: 1.55; color: var(--ca-ink); }
.cx-visit__map { overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--ca-line); }
.cx-visit__map iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--ca-line); }
.cx-visit__ask p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--ca-ink); }
.cx-visit__ask .ca-btn { margin-top: 16px; }

/* The hub's circle cards when only one or two are on the page (the live site
   hides some circles): two cards centred, at the width they have on tablets. */
@media (min-width: 1180px) {
  .ca-rcircles .ca-cards.ca-rcircles__list--few { grid-template-columns: repeat(2, minmax(0, 520px)); justify-content: center; }
}