/* ==========================================================================
   The Ashton Effect — her own half of the look.

   Loaded by the front layout AFTER core's paper.css, so a rule here wins
   where the two name the same thing.

   WHAT IS IN HERE. Her stylesheet and core's share an ancestor: 263 of her
   535 rules are already byte-identical to core's and are not repeated. These
   are the 203 that are hers alone — the hero and its shimmer, the sparkle
   layer, the video grid, the portrait, the home bands.

   WHAT IS DELIBERATELY NOT. 69 rules exist in both with different values.
   Most are core parameterising what she hard-coded — font-size:1.1rem
   against calc(1.1rem * var(--heading-scale)), or 1rem against
   calc(1rem * var(--density)) with density 1 — which is the same number on
   the page. Those stay on core's version so she keeps core's improvements
   instead of being frozen. The few that genuinely differ go under "Pinned
   after looking" at the foot of this file, each with the measurement that
   put it there. Nothing is pinned because a diff listed it.

   Her colours and heading face are not here either: they are Look settings,
   defaulted in app/site/settings.php, so they stay editable from the admin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens that are hers and have no equivalent in core.
   -------------------------------------------------------------------------- */
@import url('/assets/fonts/poppins.css');

:root {
  /* Her brand greens and the sky behind the hero. */
  --mint: #42d6a3;
  --mint-deep: #2bbd8a;
  --mint-ink: #0a3a2a;
  --navy: #131f60;
  --sky-from: #7ed3fc;
  --sky-to: #0cabf3;
  --sparkle-mark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.6L19.5 10.5l-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9z"/><path d="M18.5 16.5l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/></svg>');

  /* Her body face. Core has a Look setting for the heading font but not for
     the body one, so this is the single font pin. The files are already in
     the tree — core bundles Poppins as well. */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Her corners. Core's Look offers 0, 8, 12, 16 and 22px; hers are 6 and 10,
     which the screen cannot express, so they are set here. Change these two
     lines if she ever picks a size from the Look screen instead. */
  --radius-sm: 6px;
  --radius:    10px;

  /* Her focus ring is the accent green; core's is the ink colour. A focus
     ring only shows under keyboard use, so a render comparison would never
     catch this one — it is here because it is a choice she made, not because
     a picture disagreed. */
  --focus: #12805d;
}

.site-head .btn-quiet,
.on-dark .btn-quiet {
  background: rgba(255, 255, 255, .12); color: #fff;
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.site-head .btn-quiet:hover,
.on-dark .btn-quiet:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: #fff; }

.video-grid { display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-4), 3vw, var(--space-6)); }

.video-tile {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); overflow: hidden;
  
  background:
    var(--tile-still, none) center/cover no-repeat,
    linear-gradient(140deg, var(--accent) 0%, var(--accent-ink) 100%);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.video-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(12, 18, 24, .10) 0%, rgba(12, 18, 24, .55) 100%);
}

.video-tile:hover, .video-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.video-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.video-play {
  position: absolute; z-index: 1; inset: 0; margin: auto;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: transform .18s var(--ease), background .18s var(--ease);
}

.video-tile:hover .video-play { transform: scale(1.07); background: #fff; }

.video-name {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  padding: var(--space-4); text-align: left;
  color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

#effect-container { position: relative; display: inline-block; }

#effect-img       { display: block; position: relative; z-index: 2; max-width: 100%; height: auto; }

.effect-shimmer { animation: shimmer 2s ease-in-out infinite; }

@keyframes shimmer {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.5) saturate(1.3); }
}

.sparkle {
  position: absolute; width: 4px; height: 4px;
  background: var(--mint); border-radius: 50%;
  pointer-events: none; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 0 8px var(--mint), 0 0 12px var(--mint);
}

.sparkle-animate { animation: sparkle-float 1.5s ease-out; }

@keyframes sparkle-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(0); }
  20%  { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--tx) * 1.5), calc(var(--ty) * 1.5)) scale(.5); }
}

.star { position: absolute; width: 8px; height: 8px; pointer-events: none; opacity: 0; will-change: transform, opacity; }

.star::before, .star::after {
  content: ''; position: absolute;
  background: var(--mint); box-shadow: 0 0 6px var(--mint);
}

.star::before { width: 8px; height: 2px; top: 3px; left: 0; }

.star::after  { width: 2px; height: 8px; top: 0;   left: 3px; }

.star-animate { animation: star-twinkle 1.2s ease-in-out; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0) rotate(0deg); }
  50%      { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1) rotate(180deg); }
}

.glow {
  position: absolute; top: 50%; left: 50%; width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(66, 214, 163, .3) 0%, transparent 70%);
  border-radius: 50%; transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none;
}

.glow-animate { animation: glow-pulse 1.5s ease-out; }

@keyframes glow-pulse {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.5); }
  50%  { opacity: .8; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.5); }
}

.light-ray {
  position: absolute; top: 50%; left: 50%; width: 2px; height: 60px;
  background: linear-gradient(to bottom,
              rgba(66, 214, 163, 0) 0%, rgba(66, 214, 163, .8) 50%, rgba(66, 214, 163, 0) 100%);
  transform-origin: center top; opacity: 0; pointer-events: none;
  box-shadow: 0 0 8px rgba(66, 214, 163, .6);
}

.light-ray-animate { animation: light-ray-burst 1s ease-out; }

@keyframes light-ray-burst {
  0%   { opacity: 0; height: 20px; }
  50%  { opacity: 1; height: 80px; }
  100% { opacity: 0; height: 100px; }
}

.effect-hero { text-align: center; padding: var(--space-6) 0 var(--space-4); }

.effect-hero #effect-img { max-height: 450px; margin: 0 auto; }

.card-facts dt, .card-facts .k { color: var(--ink-muted); min-width: 6.5em; font-size: .9rem; }

.booking-type-when { color: var(--accent-ink); font-weight: 600; font-size: .9rem; }

.booking-cal-day .dow  { font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }

.booking-cal-day .dnum { font-size: 1.3rem; font-weight: 600; }

.booking-cal-day .free { font-size: .72rem; color: var(--accent); font-weight: 600; }

.booking-cal-day.is-selected .dow,
.booking-cal-day.is-selected .free { color: var(--mint-ink); }

.booking-cal-day.is-empty .free { color: var(--ink-faint); }

.btn-mint, .button.btn-mint, a.btn-mint {
  background: var(--mint); color: var(--mint-ink); border: 1px solid var(--mint-deep);
  font-weight: 700; text-decoration: none;
}

.btn-mint:hover, a.btn-mint:hover { background: var(--mint-deep); color: var(--mint-ink); text-decoration: none; }

.prose a:not(.btn):not(.button):not(.card-square):not(.booking-type-card) {
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.prose a:hover { text-decoration-color: var(--accent); }

.guide-offer {
  background: var(--accent-soft); border: 1px solid var(--mint);
  border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0;
}

.guide-offer h2 { margin: 0 0 var(--space-3); font-size: 1rem; display: flex; align-items: center; gap: .5em; }

.guide-offer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }

.guide-offer li { display: grid; gap: .15em; }

.guide-offer span { color: var(--ink-muted); font-size: .92rem; }

.booking-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .35em var(--space-4); margin: 0; }

.booking-summary dt { color: var(--ink-muted); font-size: .9rem; }

.booking-summary dd { margin: 0; font-weight: 600; }

.site-head .effect-hero {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, var(--head-bg-2) 0%, var(--head-bg) 70%);
  padding: var(--space-6) var(--space-4) var(--space-5);
  margin: 0; max-width: none;
}

.site-head .effect-hero > * { max-width: var(--container); margin-inline: auto; }

.site-head .menubar {
  background: color-mix(in srgb, var(--head-bg) 92%, transparent);
  border-bottom: 1px solid var(--head-line);
  color: var(--head-ink);
}

.site-head .bar-word,
.site-head .bar-crest { color: var(--head-ink); }

.site-head .menu > li > a,
.site-head .menu .submenu a { color: var(--head-ink-dim); }

.site-head .menu > li > a:hover,
.site-head .menu > li:focus-within > a {
  background: rgba(255, 255, 255, .07);
  color: var(--head-ink);
}

.site-head .menu > li > a[aria-current="page"] { color: var(--mint); font-weight: 600; }

.site-head .submenu {
  background: var(--head-bg-2);
  border-color: var(--head-line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.site-head .submenu a:hover { background: rgba(255, 255, 255, .07); color: var(--head-ink); }

.site-head .theme-toggle,
.site-head .nav-toggle {
  color: var(--head-ink-dim);
  border-color: var(--head-line);
  background: transparent;
}

.site-head .theme-toggle:hover,
.site-head .nav-toggle:hover { color: var(--head-ink); background: rgba(255, 255, 255, .07); }

.site-head a:focus-visible,
.site-head button:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

.effect-hero { padding: var(--space-6) 0 var(--space-4); }

.effect-hero #effect-img { max-height: 400px; }

.band {
  --band-bg: transparent;
  background: var(--band-bg);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

.band[style*="--band-bg"] { padding-block: clamp(var(--space-7), 5vw, var(--space-9)); }

.band + .band:not([style*="--band-bg"]) { padding-top: 0; }

.band:first-child { padding-top: var(--space-5); }

.band:last-child  { padding-bottom: var(--space-6); }

.band-row {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: clamp(var(--space-4), 3vw, var(--space-7));
  align-items: start;
  max-width: var(--container);
  margin-inline: auto;
}

.band-row + .band-row { margin-top: clamp(var(--space-5), 3vw, var(--space-7)); }

.band-col {
  grid-column: span var(--span, 24);
  min-width: 0;   
}

.band-col[style*="--span:24"] > * { max-width: var(--measure); }

.band-col[style*="--span:24"] > h1,
.band-col[style*="--span:24"] > h2 { max-width: 24ch; }

.band-col img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }

.band-col > :first-child { margin-top: 0; }

.band-col > :last-child  { margin-bottom: 0; }

.band-col h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.2; margin: 0 0 var(--space-4); }

.band-col h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); margin: var(--space-5) 0 var(--space-3); }

.band-col h4 { font-size: 1.02rem; color: var(--ink-soft); margin: var(--space-4) 0 var(--space-2); }

.band-col p, .band-col li { line-height: 1.65; }

.band-col p { margin: 0 0 var(--space-4); }

.band-col ul, .band-col ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }

.band-col li { margin-bottom: var(--space-2); }

.band-col a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.band-col a:not(.btn):hover { text-decoration-color: var(--accent); }

.band-col .btn { display: inline-flex; }

.prose:has(.band) { max-width: none; }

.prose > .band:first-child { padding-top: 0; }

.btn, .button, a.btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.band-col .btn {
  display: inline-flex;
  text-align: left;
  align-items: center;
}

.home-invite .band:first-child .band-col > img:first-child,
.home-invite .band:first-child .band-col > .lead-portrait,
.band-col > .lead-portrait,
.band-col > .lead-portrait:first-child,
.prose .lead-portrait {
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
  margin-top: clamp(var(--space-6), 5vw, var(--space-8));
  margin-bottom: var(--space-6);
  margin-inline: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.lead-portrait,
.home-invite .band:first-child .band-col > .lead-portrait,
.band-col > .lead-portrait,
.band-col > .lead-portrait:first-child,
.prose .lead-portrait { box-shadow: none; border-radius: 0; }

.lead-portrait img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.site-head:not(.is-home) .effect-hero {
  padding-top: var(--space-5);
  padding-bottom: var(--space-3);
}

.site-head:not(.is-home) #effect-img {
  max-height: 190px;
}

main > .section:first-child,
main > .container:first-child { padding-top: clamp(var(--space-5), 3vw, var(--space-7)); }

.page-head { margin-bottom: var(--space-6); }

.band-col > p > img,
.band-col > img { max-width: min(100%, 420px); }

.home-block { margin: var(--space-8) 0; }

.home-block:last-of-type { margin-bottom: var(--space-7); }

.block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4) var(--space-5); flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--paper-line);
}

.block-head h2 { margin: 0; }

.block-head > a {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .92rem; font-weight: 600; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}

.block-head > a:hover { text-decoration: underline; }

.post-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
}

.post-grid > .post-card { margin: 0; }

.post-grid > .post-card:only-child { max-width: 34rem; }

.lede { font-size: 1.06rem; line-height: 1.65; color: var(--ink-soft, var(--ink-muted)); }

.lede > p:first-child { margin-top: 0; }

.lede > p:last-child { margin-bottom: 0; }

.home-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}

.home-next {
  display: flex; align-items: center; gap: .45em; flex-wrap: wrap;
  margin: 0; font-size: .94rem; color: var(--ink-muted);
}

.home-next a { font-weight: 600; color: var(--accent); }

.cta-panel > p { margin: 0 auto var(--space-5); max-width: 46ch; color: var(--ink-muted); }

.cta-panel > p:last-child {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center; margin-bottom: 0; max-width: none;
}

.kv dt { color: var(--ink-muted); font-size: .9rem; }

.kv dd { margin: 0; font-weight: 600; }

.booking-cal-day .mon { display: block; font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }

.booking-cal-day .how { display: block; margin-top: .25em; font-size: .72rem; color: var(--accent); font-weight: 600; }

.booking-cal-day.is-selected .dom,
.booking-cal-day.is-selected .mon,
.booking-cal-day.is-selected .how { color: var(--mint-ink); }

.booking-cal-day.is-empty .how { color: var(--ink-faint); }

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-4), 3vw, var(--space-5));
  margin-bottom: var(--space-4);
}

.panel > h2, .panel > h3 {
  font-size: 1.02rem; margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--paper-edge);
}

.band-row:has(> .band-col[style*="--span:24"]:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.band-row:has(> .band-col[style*="--span:24"]:only-child) > .band-col { grid-column: 1 / -1; }

.site-head .effect-hero { position: relative; isolation: isolate; }

.site-head .effect-hero > * { position: relative; z-index: 1; }

.site-head .effect-hero::before,
.site-head .effect-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  clip-path: inset(0);       
}

.site-head .effect-hero::before {
  background:
    conic-gradient(from 200deg at 50% 4%,
      transparent   0deg, rgba(66, 214, 163, .20)  11deg, transparent  24deg,
      transparent  36deg, rgba(66, 214, 163, .13)  48deg, transparent  62deg,
      transparent  92deg, rgba(66, 214, 163, .18) 104deg, transparent 118deg,
      transparent 130deg, rgba(66, 214, 163, .12) 142deg, transparent 156deg,
      transparent 360deg);
  filter: blur(14px);
  transform-origin: 50% 4%;
  will-change: transform;
  animation: head-sweep 34s ease-in-out infinite alternate;
}

.site-head .effect-hero::after {
  background:
    radial-gradient(ellipse 34% 40% at 50% 6%, rgba(126, 233, 196, .24), transparent 72%),
    radial-gradient(ellipse 90% 85% at 50% 45%, transparent 40%, rgba(0, 0, 0, .58) 100%);
}

@keyframes head-sweep {
  from { transform: rotate(-4.5deg); }
  to   { transform: rotate(4.5deg); }
}

.course-dates-here { margin: var(--space-8) 0 var(--space-7); }

.date-course { display: block; font-size: .9rem; color: var(--ink-muted); margin-top: .15em; }

body[data-page="packages"] .band-row > .band-col {
  background: var(--paper-raised);
  
  border: 2px solid var(--mint-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

body[data-page="packages"] .band-row:has(> .band-col:only-child) > .band-col {
  background: none; border: 0; padding: 0; box-shadow: none;
}

body[data-page="packages"] .band-col > :first-child { margin-top: 0; }

body[data-page="packages"] .band-col > :last-child { margin-bottom: 0; }

.page-head .lede-wide { max-width: none; }

.page-head .lede-wide img { float: right; width: 38%; margin: 0 0 var(--space-5) var(--space-7); }

.page-head .lede-wide::after { content: ""; display: block; clear: both; }

.page-head .lede-wide img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }

.team-training {
  display: grid; gap: var(--space-6);
  margin: var(--space-7) 0;
  padding: var(--space-6);
  background: var(--accent-soft);
  border: 2px solid var(--mint-deep);
  border-radius: var(--radius-lg);
}

.team-training h2 { margin-top: .2em; }

.team-training-words > :last-child { margin-bottom: 0; }

.team-training-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.team-training-areas li {
  display: flex; align-items: center; gap: .6em;
  padding: .7em 1em; background: var(--paper-raised);
  border-radius: var(--radius); font-weight: 600;
}

.team-training-areas svg { flex: none; color: var(--accent); }


@media (max-width: 1080px) {
  .nav-toggle {
      display: grid; place-items: center; margin-left: auto;
      width: 40px; height: 40px; background: transparent;
      border: 1px solid var(--paper-line); border-radius: var(--radius);
      color: var(--ink-soft); cursor: pointer;
    }
  .nav {
      position: fixed; inset: var(--header-h) 0 auto 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--paper-raised); border-bottom: 1px solid var(--paper-edge);
      box-shadow: var(--shadow-lg); padding: var(--space-3);
      max-height: calc(100vh - var(--header-h)); overflow-y: auto;
      margin-left: 0;
    }
  .nav:not(.is-open) { display: none; }
  .nav a { padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
  .site-header .container { flex-wrap: wrap; }
  .theme-toggle { order: 2; }
}

@media print {
  .site-header, .site-footer, .theme-toggle, .nav-toggle, .pagination, .no-print { display: none !important; }
}

@media (max-width: 1024px) {
  .menubar .container { justify-content: space-between; }
  .menu {
      position: absolute; inset: 56px 0 auto 0; margin: 0;
      flex-direction: column; align-items: stretch; justify-content: flex-start;
      background: var(--paper-raised); border-bottom: 1px solid var(--paper-edge);
      box-shadow: var(--shadow-lg); padding: var(--space-3);
      max-height: calc(100vh - 56px); overflow-y: auto;
    }
  .menu:not(.is-open) { display: none; }
  .submenu {
      position: static; opacity: 1; visibility: visible; transform: none;
      box-shadow: none; border: 0; border-left: 2px solid var(--paper-edge);
      border-radius: 0; margin-left: var(--space-4); padding: 0 0 0 var(--space-2);
    }
  .menu .caret { margin-left: auto; }
  .site-head .menu {
      background: var(--head-bg-2);
      border-color: var(--head-line);
    }
  .effect-hero #effect-img { max-height: 220px; }
  .site-head:not(.is-home) #effect-img { max-height: 130px; }
}

@media (min-width: 760px) {
  .video-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .video-tile, .video-tile:hover, .video-play, .video-tile:hover .video-play { transform: none; }
  .effect-shimmer, .sparkle, .star, .glow, .light-ray { animation: none !important; opacity: 0; }
  .effect-shimmer { opacity: 1; }
  .site-head .effect-hero::before { animation: none; transform: rotate(0deg); }
}

@media (max-width: 480px) {
  .booking-summary dl { grid-template-columns: 1fr; gap: 0 0; }
  .booking-summary dd { margin-bottom: var(--space-3); }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dd { margin-bottom: var(--space-3); }
}

@media (max-width: 620px) {
  .card-nav { flex-direction: column; align-items: stretch; }
  .card-nav .btn { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .band-col { grid-column: span 24; }
  .band-col[style*="--span:6"], .band-col[style*="--span:8"] { grid-column: span 12; }
  .band-col[style*="--span:24"] > * { max-width: none; }
}

@media (max-width: 560px) {
  .band-row { grid-template-columns: 1fr; }
  .band-col,
    .band-col[style*="--span:6"], .band-col[style*="--span:8"] { grid-column: 1 / -1; }
  .home-invite .band:first-child .band-col > img:first-child,
    .home-invite .band:first-child .band-col > .lead-portrait,
    .band-col > .lead-portrait,
    .band-col > .lead-portrait:first-child,
    .prose .lead-portrait { max-width: 240px; }
  .band-row:has(> .band-col[style*="--span:24"]:only-child) .band-col > .lead-portrait,
    .home-invite .band:first-child .band-col > .lead-portrait,
    .band-col > .lead-portrait,
    .prose .lead-portrait { max-width: 240px; }
}

@media (min-width: 900px) {
  .home-invite .band:first-child .band-row {
      
      max-width: calc(290px + var(--space-7) + var(--measure));
      margin-inline: auto;
    }
  .home-invite .band:first-child .band-col:has(> .lead-portrait),
    .home-invite .band:first-child .band-col:has(> img:first-child) {
      display: grid;
      grid-template-columns: 290px minmax(0, 1fr);
      column-gap: var(--space-7);
      align-items: start;
    }
  .home-invite .band:first-child .band-col > .lead-portrait,
    .home-invite .band:first-child .band-col > img:first-child {
      grid-column: 1; grid-row: 1 / span 50; align-self: start;
      width: 100%; max-width: 290px;
      
      margin: .3rem 0 var(--space-5);
    }
  .home-invite .band:first-child .band-col > *:not(.lead-portrait):not(img:first-child) {
      grid-column: 2;
      max-width: var(--measure);
    }
  .home-invite .band:first-child .band-col > .lead-portrait + * { margin-top: 0; }
  .home-invite .band:first-child .band-row {
      max-width: calc(290px + var(--space-7) + var(--measure));
    }
  body[data-page="packages"] .prose {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-5);
      align-items: start;
    }
  body[data-page="packages"] .prose > .band,
    body[data-page="packages"] .band-row { display: contents; }
  body[data-page="packages"] .band-col { grid-column: auto; max-width: none; }
  body[data-page="packages"] .band-row:has(> .band-col:only-child) > .band-col {
      grid-column: 1 / -1 !important;
    }
  .page-head .lede-wide:has(> img) {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
      column-gap: var(--space-7);
      align-content: start;
    }
  .page-head .lede-wide:has(> img) > :not(img) { grid-column: 1; }
  .page-head .lede-wide:has(> img) > img.lede-pic,
    .page-head .lede-wide:has(> img) > img {
      grid-column: 2; grid-row: 1 / span 30; align-self: start;
      width: 100%; margin: 0;
    }
  .page-head .lede-wide p img { float: right; width: 38% !important; margin: 0 0 var(--space-5) var(--space-7); }
  .page-head .lede-wide::after { content: ""; display: block; clear: both; }
  .team-training { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
}

@media (max-width: 1439px) and (min-width: 1025px) {
  .menu > li > a { padding-inline: .5rem; }
  .menu { gap: 0; }
}

@media (max-width: 1300px) and (min-width: 1025px) {
  .menu > li > a { padding-inline: .35rem; font-size: .99rem; }
}

@media (max-width: 1160px) and (min-width: 1025px) {
  .menu > li > a { padding-inline: .2rem; font-size: .95rem; }
  .menu .caret { margin-left: -.15rem; }
}

/* --------------------------------------------------------------------------
   Pinned after looking.

   Every rule below was added because a render of this site against the v1.3.4
   baseline showed a difference, and the difference is named beside it.
   -------------------------------------------------------------------------- */

/* The dark band behind the brand mark. (Render, 16 Oct: the hero came out
   pale cream against her near-black on every page, differing from y=0.)

   Core has a .site-head rule of its own, so this one was held back as a
   difference rather than carried as hers. But hers is not a restyle of
   core's — it DECLARES five tokens that exist nowhere in core, and the
   sixteen rules beneath it that paint the bar, the menu, the submenu and
   the toggle all read them. Carried across without this they had nothing
   to read and the band fell back to paper.

   Her own note on why these are fixed values and not theme variables is
   worth keeping: "a dark band that turns pale in the light theme is
   exactly the thing being fixed". */
.site-head {
  --head-bg:      #0d1512;
  --head-bg-2:    #14211c;
  --head-line:    #223029;
  --head-ink:     #eaf5f0;
  --head-ink-dim: #9db3aa;
  background: var(--head-bg);
  color: var(--head-ink);
}

/* Heading leading. (Measured, 16 Oct: every h1 came out 53.07px tall against
   her 60.51px — 1.07 against 1.22 — which pushed the text under it up by 8px
   on every page with a heading, and shortened a long post by up to 92px.)

   ONLY the line-height is taken. Her rule also sets font-weight, letter-
   spacing and margin, but core expresses those as var(--heading-weight) and
   var(--heading-tracking), which are Settings -> Look values. Pinning her
   whole rule would hard-code them and quietly kill two controls on that
   screen, so the other declarations stay on core's. */
h1, h2, h3, h4, h5, h6 { line-height: 1.22; }

/* The nav row. (Render, 16 Oct: the menu items sat 16px further right and a
   shade smaller — "Home" began at x=403 against her x=419, and every item
   after it drifted.)

   Hers runs a larger label in a tighter row: 1.02rem at a 2px gap, against
   core's .93rem at 10px. The two happen to occupy almost the same width,
   which is why the header measured the same height and only a pixel
   comparison showed it at all.

   Again only the declarations that differ. Her rule also sets the colour,
   weight, radius and transition, and those already match core. */
.menu { gap: 2px; }
.menu > li > a,
.menu .submenu a { padding: .55rem .75rem; font-size: 1.02rem; }

/* The two paper tones Look cannot express. (Render, 16 Oct: her footer band
   came out white against her faint mint wash — (253,252,251) against
   (239,237,235) measured in the left gutter.)

   Settings -> Look offers paper, raised, edge, ink and accent. It has no
   field for the sunk tone a footer or an inset panel sits on, nor for the
   hairline, and core derives both from the others — which lands neutral
   where hers is cool. They are set here because the screen cannot. */
:root {
  --paper-sunk: #f4faf8;
  --paper-line: #d8e3df;

  /* The deep green her small print is set in. (Measured, 16 Oct: the course
     meta lines read (18,128,93) against her (11,79,57) — a 35-level shift on
     every price and date on the home page.)

     Core derives --accent-ink from the accent and lands on the accent itself;
     hers is a darker green chosen to sit on pale panels. Look has no field
     for it either.

     Its siblings --accent-hover and --accent-soft are deliberately LEFT
     deriving: hers differ from core's derivation by under ten levels, nothing
     in the comparison ever showed them, and leaving them alone means the
     accent on the Look screen still moves the hover and tint with it. */
  --accent-ink: #0b4f39;

  /* Emphasis weight. (Render, 16 Oct: bold runs inside her paragraphs sat a
     touch heavier than hers — "Real-world experience:" on the home page.)

     Core sets --w-em to 530 and hers is a flat 600. The same token also
     drives button labels, where hers is likewise 600, so one line puts both
     back rather than two rules fighting over it. It is not a Look field, so
     nothing on that screen is lost by setting it. */
  --w-em: 600;
}

/* The shadow under the bar when it sticks. (Render, 16 Oct: a 4px band
   directly under the header read 14 levels darker than hers on every page.)

   Core grew .site-head.is-stuck .menubar { box-shadow } after her site was
   built. Hers has the transition that would carry it and never a rule that
   sets it, so on her site the bar has always stuck without a shadow. Turned
   off here to match. Delete these three lines if she would rather have it —
   it is core's newer behaviour and there is nothing wrong with it. */
.site-head.is-stuck .menubar { box-shadow: none; }

/* h1 tracking. (Measured, 16 Oct: -1.2896px against her -1.3888px at 49.6px,
   which widened a 23-character headline by about 2.3px — visible as the
   headline reaching further right on every post and page.)

   Her h1 is -.028em and core is calc(var(--heading-tracking) - .008em). Her
   Look default for tracking is already -.018em, so core lands on -.026em.
   Her h2 at -.022em already matches core's calc(... - .004em) exactly and is
   left alone.

   Written as a calc against the same variable rather than as a flat -.028em,
   so the Tracking control on the Look screen still moves this heading with
   the others instead of being dead for h1 alone. */
h1 { letter-spacing: calc(var(--heading-tracking) - .01em); }

/* Her buttons. (Render, 16 Oct: "Read Faye's full story" came out a dark
   accent-green pill with white text, against her bright mint rounded
   rectangle with dark green text.)

   Two separate things, both hers. The SHAPE: core moved to a full pill
   (--radius-pill) and hers follow the site's own corner radius. The COLOUR:
   core paints a primary button in the accent, and hers is deliberately the
   bright mint with dark ink on it — the same green as her flyers, and the
   reason --mint exists at all.

   The accent stays on core's value so Settings -> Look still drives links,
   focus and the rest; only the button is taken back. */
.btn { border-radius: var(--radius); letter-spacing: normal; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--mint);
  color: var(--mint-ink);
  border-color: var(--mint-deep);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--mint-deep);
  color: var(--mint-ink);
  border-color: var(--mint-deep);
  box-shadow: var(--shadow);
}

.btn-quiet { border-color: var(--paper-line); }
.btn-quiet:hover { border-color: var(--accent); }

/* The closing panel. (Render, 16 Oct: "Ready to strengthen your organisation?"
   came out as a white two-column band with the heading left and the sentence
   beside it, against her centred tinted card — a 136px block of difference,
   the largest single one on the home page.)

   Core and this site mean different things by .cta-panel. Core's is a flex
   row that puts the words on the left and the buttons on the right, with no
   background of its own. Hers is a card: tinted with the sunk paper tone,
   bordered, everything centred. Neither is wrong; they are two designs under
   one class name, and this site has always had hers.

   display is set back to block ON PURPOSE. Core's rule declares
   display:flex, and a pin that simply leaves display out would inherit it and
   lay her centred card out as a row anyway. */
.cta-panel {
  display: block;
  margin: var(--space-8) 0 var(--space-7);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  background: var(--paper-sunk);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cta-panel h2 { margin: 0 0 var(--space-3); }

/* ==========================================================================
   HER DARK THEME. (Live, 16 Oct, after the deploy: the pagination and links
   came out BLUE — core's stock dark accent — against her green.)

   Found by Dominic looking at the live site, not by me. The entire render
   comparison, all 32 pages at two widths, ran in light mode. Dark was never
   shot once, so nothing in it could have been caught.

   Her stylesheet carries a full dark palette in two blocks, and core carries
   its own under the same two selectors, so both landed in the "differs"
   bucket and were held back with the rest. Everything here is hers, lifted
   whole, minus --paper, --paper-raised, --paper-edge, --ink and --accent:
   those five are the ones Settings -> Look can hold as :dark values and are
   defaulted in app/site/settings.php, exactly as on the light side.

   The two blocks are deliberately identical in content. The attribute one
   is for a visitor who has chosen a theme on this site; the media one is for
   a visitor who has chosen nothing and whose device is dark. The :not() on
   the second is what lets someone on a dark device still pick light here.
   ========================================================================== */
:root[data-theme="dark"] {
  --paper-sunk: #101315;
  --paper-line: #333b3f;
  --ink-soft: #c4cecb;
  --ink-muted: #9aa5a2;
  --ink-faint: #93a09b;
  --accent-hover: #7ee9c4;
  --accent-soft: #0f2a22;
  --accent-ink: #a8f0d6;
  --green: #4fdcaa;
  --green-soft: #0f2a22;
  --mint: #42d6a3;
  --mint-deep: #2bbd8a;
  --mint-ink: #06251b;
  --navy: #8ea0ff;
  --sky-from: #7ed3fc;
  --sky-to: #0cabf3;
  --amber: #d9a24e;
  --amber-soft: #2c2318;
  --red: #e08a80;
  --red-soft: #2e1c1a;
  --focus: #4fdcaa;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper-sunk: #101315;
    --paper-line: #333b3f;
    --ink-soft: #c4cecb;
    --ink-muted: #9aa5a2;
    --ink-faint: #93a09b;
    --accent-hover: #7ee9c4;
    --accent-soft: #0f2a22;
    --accent-ink: #a8f0d6;
    --green: #4fdcaa;
    --green-soft: #0f2a22;
    --mint: #42d6a3;
    --mint-deep: #2bbd8a;
    --mint-ink: #06251b;
    --navy: #8ea0ff;
    --sky-from: #7ed3fc;
    --sky-to: #0cabf3;
    --amber: #d9a24e;
    --amber-soft: #2c2318;
    --red: #e08a80;
    --red-soft: #2e1c1a;
    --focus: #4fdcaa;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, .45);
  }
}

/* THE ADVERT BOX. (v2.2.0)
   Core draws a bare link inside the advert as a pill button. This site
   underlines every link inside .prose, and that rule is the more specific of
   the two, so the button came out underlined. Said again here, higher, so the
   button reads as a button. */
.prose.home-promo a:not(.btn):not(.button):not(.card-square):not(.booking-type-card) {
  text-decoration: none;
}