/* Float Valley rebuild — tokens from Nadeem's brand kit (Sept 10, 2026). Poppins throughout. */
:root {
  --green: #36925C;        /* Valley Green: primary */
  --green-dark: #0D3C00;
  --blue: #367AA7;         /* Float Blue: secondary */
  --sky: #64AED3;
  --leaf: #89C98A;
  --mist-green: #CAE3C8;
  --mist-blue: #ADDEF5;
  --forest: #0D3C00;
  --ember: #D97706;        /* heat content only */
  --text: #2A2A2A;
  --muted: #5A5A5A;
  --bg: #FFFFFF;
  --bg-alt: #F3F2ED;
  --bg-soft: #F2F2F2;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(13,60,0,.06), 0 8px 24px rgba(13,60,0,.06);
  --font: "Poppins", "Noto Sans SC", "Noto Sans TC", system-ui, sans-serif;
}
/* Chinese pages (home/zh-hans, home/zh-hant): Poppins covers Latin and digits, then the matching CJK face. */
:root:lang(zh-Hans) { --font: "Poppins", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
:root:lang(zh-Hant) { --font: "Poppins", "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--forest); }
h1, h2, h3 { font-weight: 600; line-height: 1.15; color: var(--forest); margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.center { text-align: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 500 14px/1 var(--font); letter-spacing: .5px; text-decoration: none; padding: 14px 22px; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn-lg { font-size: 15px; padding: 17px 26px; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-ghost { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn-ghost:hover { background: var(--blue); color: #fff; }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: .75em; }
.fine { font-size: 14px; color: var(--muted); }

/* Promo */
.promo { background: var(--blue); color: #fff; font-size: 14px; }
.promo[data-show="false"] { display: none; }
.promo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; padding: 10px 16px; text-align: center; }
.promo p { margin: 0; }
.promo-reg { opacity: .7; }
.promo a { color: #fff; font-weight: 500; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand img { width: 64px; height: auto; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang select { font: 500 14px var(--font); border: 1px solid #CAE3C8; border-radius: var(--radius); padding: 8px 6px; background: #fff; color: var(--text); }

/* Hero */
/* Homepage hero: one full-width photo with the copy over a Float Blue gradient. Service pages keep .hero-grid / .hero-media. */
.hero, .photo-band { position: relative; isolation: isolate; display: grid; align-items: center; color: #fff; background: #0B2E47; overflow: hidden; }
.hero { min-height: clamp(540px, 82vh, 860px); padding: clamp(56px, 8vw, 112px) 0; }
.photo-band { min-height: clamp(480px, 64vh, 700px); padding: clamp(48px, 7vw, 96px) 0; }
.hero-page { min-height: clamp(440px, 62vh, 660px); padding: clamp(48px, 7vw, 96px) 0; }
.hero.service-hero, .hero-deep { background: #0B2E47; }
.hero .crumbs, .hero .crumbs a { color: rgba(255,255,255,.75); }
.hero .crumbs a:hover { color: #fff; }
.hero .hero-icon, .hero.service-hero.tone-forest .hero-icon, .hero.service-hero.tone-ember .hero-icon { color: var(--mist-blue); }
.hero .chips a { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.hero .chips a:hover { background: #fff; color: var(--forest); border-color: #fff; }
.hero .facts li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); backdrop-filter: blur(4px); }
.hero .facts strong { color: #fff; }
.hero .facts span, .hero .facts li { color: rgba(255,255,255,.75); }
.hero-end .wrap { display: flex; justify-content: flex-end; }
.hero-end .hero-copy { max-width: 40em; }
.hero-end .hero-bg img { object-position: 35% 50%; }
.hero-bg, .band-bg, .hero-bg img, .band-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg, .band-bg { z-index: -2; margin: 0; }
.hero-bg img, .band-bg img { object-fit: cover; object-position: 62% 50%; }
.hero-home .hero-bg img { object-position: 50% 50%; }  /* the hero loop's first frame, framed like the video */
.hero-home .hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero-home .hero-video.playing { opacity: 1; }
.hero::before, .photo-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,46,71,.84) 0%, rgba(11,46,71,.64) 36%, rgba(11,46,71,.2) 66%, rgba(11,46,71,0) 100%), linear-gradient(180deg, rgba(11,46,71,.3) 0%, rgba(11,46,71,0) 28%); }
.hero-end::before { background: linear-gradient(270deg, rgba(11,46,71,.84) 0%, rgba(11,46,71,.64) 36%, rgba(11,46,71,.2) 66%, rgba(11,46,71,0) 100%), linear-gradient(180deg, rgba(11,46,71,.3) 0%, rgba(11,46,71,0) 28%); }
.hero-copy { max-width: 46em; }
.band-copy { max-width: 40em; }
.hero .eyebrow, .photo-band .eyebrow { color: var(--mist-blue); }
.hero h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.25rem); letter-spacing: -0.02em; text-wrap: balance; }
.photo-band h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.02em; }
.hero .lede { color: rgba(255,255,255,.86); max-width: 36em; }
.hero .btn-ghost, .photo-band .btn-ghost { border-color: rgba(255,255,255,.75); color: #fff; }
.hero .btn-ghost:hover, .photo-band .btn-ghost:hover { background: #fff; color: var(--forest); border-color: #fff; }
.hero .proof { color: rgba(255,255,255,.8); }
.hero .proof strong { color: #fff; }
.photo-band .price { color: rgba(255,255,255,.75); }
.photo-band .price strong { color: var(--leaf); }
.photo-band .checks li { color: #fff; }
.photo-band .fine { color: rgba(255,255,255,.75); }
.photo-band .cta-row { margin-top: 24px; }
/* Offers carousel: full-width photo bands that snap horizontally; arrows and dots sit over the band */
.offers { position: relative; }
.offers-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.offers-track::-webkit-scrollbar { display: none; }
.offers-track:focus-visible { outline: 2px solid var(--mist-blue); outline-offset: -2px; }
.offer-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; padding-bottom: clamp(88px, 10vw, 120px); }
.photo-band .price .plus { text-decoration: none; }
.offers-nav { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; align-items: center; gap: 14px; z-index: 2; }
.offers-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); background: rgba(11,46,71,.35); color: #fff; font: 500 24px/1 var(--font); cursor: pointer; backdrop-filter: blur(4px); transition: background .2s, color .2s; }
.offers-btn:hover, .offers-btn:focus-visible { background: #fff; color: var(--forest); }
.offers-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.offers-dots button { width: 10px; height: 10px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; transition: width .2s, background .2s; }
.offers-dots button[aria-current="true"] { background: #fff; width: 26px; }
.hero-end .band-bg img { object-position: 35% 50%; }
.hero-end .band-copy { max-width: 40em; }
/* Visit band: the storefront behind the address, hours and house rules */
.visit-band { min-height: 0; padding: clamp(56px, 8vw, 96px) 0; }
.visit-band::before { background: linear-gradient(90deg, rgba(11,46,71,.84) 0%, rgba(11,46,71,.76) 60%, rgba(11,46,71,.66) 100%); }
.visit-band .band-bg img { object-position: 50% 45%; filter: blur(3px) saturate(.9); transform: scale(1.04); }
.visit-band h2, .visit-band h3, .visit-band address, .visit-band .hours dt { color: #fff; }
.visit-band .fine, .visit-band .hours dd, .visit-band .plain { color: rgba(255,255,255,.8); }
.visit-band a { color: #fff; }
.visit-band .btn-ghost { margin-top: 8px; border-color: rgba(255,255,255,.75); }
.visit-band .btn-ghost:hover { background: #fff; color: var(--forest); border-color: #fff; }
.visit-band .head-icon { color: var(--mist-blue); }
.photo-band .lede { color: rgba(255,255,255,.86); }
.events-band .band-copy { max-width: 44em; }
.photo-band .event-list li { color: #fff; border-color: rgba(255,255,255,.22); }
.photo-band .event-list .i { color: var(--mist-blue); }
.photo-band .event-list span:last-child { color: rgba(255,255,255,.8); }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lede { font-size: 1.125rem; color: var(--muted); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.proof { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 14px; color: var(--muted); }
.proof strong { display: block; color: var(--forest); font-size: 1.125rem; font-weight: 600; }
.hero-media { margin: 0; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4/3.4; object-fit: cover; width: 100%; }

/* Sections */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section.alt { background: var(--bg-alt); }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head.center { margin-inline: auto; }
.section-head p:last-child { color: var(--muted); }

/* Service cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; border-top: 4px solid var(--blue); }
.card.tone-ember { border-top-color: var(--ember); }
.card.tone-forest { border-top-color: var(--green); }
.card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card-body { padding: 20px 24px 22px; flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px; align-items: center; }
.card-body h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.2rem; }
.card-body p { grid-column: 1 / -1; font-size: 15px; color: var(--muted); margin: 14px 0 0; align-self: start; }
.card .meta { grid-column: 1 / -1; align-self: end; margin: 18px 0 0; font-size: 14px; font-weight: 500; color: var(--forest); padding-top: 12px; border-top: 1px solid #F2F2F2; }
.more-link { margin-top: 32px; text-align: center; color: var(--muted); }
.section-head.sub { margin: 48px 0 24px; max-width: none; }
.section-head.sub h2 { font-size: 1.5rem; }

/* Intro band */
.price { font-size: 1rem; color: var(--muted); }
.price strong { font-size: 3rem; font-weight: 600; color: var(--green); margin-right: 8px; line-height: 1; }
.price span { text-decoration: line-through; }
.checks { list-style: none; padding: 0; margin: 0 0 16px; }
.checks li { padding: 8px 0 8px 30px; position: relative; font-weight: 500; }
.checks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--green); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Pillars */
/* Tour video: a poster with a play button; the YouTube player loads only when pressed */
.video-frame { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #0B2E47; }
.video-frame iframe, .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { padding: 0; background: none; cursor: pointer; display: block; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,46,71,0) 55%, rgba(11,46,71,.45) 100%); }
.play-btn { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--green); box-shadow: 0 8px 24px rgba(13,60,0,.3); z-index: 1; transition: transform .2s, background .2s; }
.play-btn::before { content: ""; position: absolute; left: 30px; top: 23px; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.video-play:hover .play-btn, .video-play:focus-visible .play-btn { transform: scale(1.06); background: var(--green-dark); }
.video-note { margin: 14px 0 0; }
.values { background: linear-gradient(135deg, rgba(173,222,245,.26) 0%, rgba(202,227,200,.26) 100%); }
.values-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.values-intro { position: sticky; top: 108px; }
.values-intro h2 { margin-bottom: .4em; }
.values-intro p { color: var(--muted); max-width: 28em; margin: 0; }
.values-list { list-style: none; margin: 0; padding: 0; }
.values-list li { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid rgba(13,60,0,.14); }
.values-list li:last-child { border-bottom: 1px solid rgba(13,60,0,.14); }
.values-list h3 { margin: 0 0 .3em; font-size: 1.25rem; }
.values-list p { margin: 0; color: var(--muted); max-width: 42em; }
/* Value marks: the logo's two triangles with the diamond between them, read top to bottom as up, diamond, down */
.pillar-mark { display: block; width: 40px; height: 36px; margin: 2px 0 0; filter: drop-shadow(0 2px 3px rgba(13,60,0,.12)); }
.pillar-mark.up, .pillar-mark.green { background: linear-gradient(180deg, var(--leaf) 0%, var(--green) 100%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pillar-mark.diamond, .pillar-mark.sky { background: linear-gradient(135deg, var(--mist-blue) 0%, var(--sky) 60%, var(--blue) 100%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pillar-mark.down, .pillar-mark.blue { background: linear-gradient(180deg, var(--sky) 0%, var(--blue) 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.values-list li { align-items: center; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; margin-bottom: 24px; }
.plan { background: #fff; border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; }
.plan.featured { outline: 2px solid var(--green); transform: translateY(-8px); }
.badge { position: absolute; top: -13px; left: 28px; background: var(--green); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; margin: 0; }
.plan-price { font-size: 2.5rem; font-weight: 600; color: var(--forest); line-height: 1; margin: 8px 0 20px; }
.plan-price span { font-size: 1rem; font-weight: 400; color: var(--muted); }
.plan-for { font-size: 14px; color: var(--muted); margin: -12px 0 16px; }
.plan li.example { border-bottom: 0; color: var(--muted); font-size: 14px; padding: 10px 12px; border-radius: var(--radius); margin-top: 8px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; }
.plan li { padding: 8px 0; border-bottom: 1px solid #F2F2F2; font-size: 15px; }
.plan .btn { margin-top: auto; }

/* Events */
.event-list { list-style: none; padding: 0; margin: 24px 0 0; }
.event-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #F2F2F2; font-weight: 500; }
.event-list li span:last-child { color: var(--muted); font-weight: 400; white-space: nowrap; }
/* SMS opt-in consent row (/text/) */
.contact-form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.contact-form .consent input { width: auto; margin-top: .3em; flex-shrink: 0; }
/* /links/ (Instagram link in bio) */
.links-offer { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 24px; margin: 24px 0 40px; }
.links-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; }
.links-list .btn { width: 100%; justify-content: center; }
.links-page #event-cal { text-align: left; }
/* Events calendar rows (events-cal.js) */
#event-cal li { align-items: center; }
#event-cal li > span:first-child { display: block; font-weight: 400; }
#event-cal strong { color: var(--forest); font-weight: 600; }
#event-cal .btn { flex-shrink: 0; white-space: nowrap; }

/* Reviews: three cards to a page, on a wheel (Daniel, 2026-10-29) — no inner box, no fades; arrows and dots page it */
#reviews-fallback[hidden] { display: none; }
.reviews-wheel { margin: 8px 0 28px; }
.reviews-track { list-style: none; margin: 0 -4px; padding: 4px; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--radius-lg); }
.review-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 24px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.review-stars { color: #E3A008; font-size: 15px; letter-spacing: 2px; }
.review-text { flex: 1; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--text); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.review-by { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; }
.review-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--mist-green); color: var(--green-dark); font-weight: 600; font-size: 13px; }
.review-name { font-weight: 600; color: var(--forest); }
.review-src { color: var(--muted); }
.review-src::before { content: "\00b7"; margin-right: 10px; }
.reviews-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 24px; }
.reviews-wheel:not([data-pages]) .reviews-nav, .reviews-wheel[data-pages="1"] .reviews-nav { display: none; }
.reviews-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(13,60,0,.22); background: #fff; color: var(--forest); font: 500 24px/1 var(--font); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.reviews-btn:hover, .reviews-btn:focus-visible { background: var(--green-control); border-color: var(--green-control); color: #fff; }
.reviews-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.reviews-dots button { position: relative; margin: 0 8px; width: 10px; height: 10px; border-radius: 99px; border: 0; padding: 0; background: rgba(13,60,0,.2); cursor: pointer; transition: width .2s, background .2s; }
.reviews-dots button::after { content: ""; position: absolute; left: -8px; right: -8px; top: -17px; bottom: -17px; }
.reviews-dots button[aria-current="true"] { background: var(--green-control); width: 26px; }
@media (max-width: 1024px) {
  .review-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 700px) {
  .reviews-track { gap: 14px; }
  .review-card { flex-basis: 84%; padding: 22px 20px 20px; }
  .review-text { font-size: 1rem; }
}
.slot { border: 2px dashed #CAE3C8; border-radius: var(--radius-lg); padding: 56px 16px; margin: 24px auto 28px; max-width: 900px; color: var(--muted); font-size: 14px; }

/* Visit */
.visit-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; }
address { font-style: normal; font-size: 1.125rem; margin-bottom: 12px; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0 0 16px; }
.hours dt { font-weight: 500; }
.hours dd { margin: 0; color: var(--muted); }
.plain { padding-left: 18px; margin: 0; color: var(--muted); }
.plain li { padding: 3px 0; }

/* Footer */

.mobile-book { display: none; }

/* Responsive */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .hero-grid, .intro-grid, .events-grid, .visit-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero { min-height: clamp(560px, 90vh, 780px); align-items: end; padding-top: 44vh; }
  .photo-band { min-height: clamp(560px, 92vh, 820px); align-items: end; padding-top: 38vh; }
  .offer-slide { padding-bottom: 96px; }
  .visit-band { min-height: 0; padding-top: 48px; align-items: start; }
  .visit-band .visit-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-page { min-height: clamp(520px, 80vh, 720px); padding-top: 40vh; }
  .hero-end .wrap { justify-content: flex-start; }
  .hero-end::before { background: linear-gradient(180deg, rgba(11,46,71,.08) 0%, rgba(11,46,71,.42) 38%, rgba(11,46,71,.88) 68%, rgba(11,46,71,.96) 100%); }
  .hero-end .hero-bg img { object-position: 50% 50%; }
  .hero-bg img, .band-bg img { object-position: 50% 50%; }
  .hero-home .hero-bg img { object-position: 50% 50%; }
  .band-bg img { object-position: 50% 20%; }
  .hero::before, .photo-band::before { background: linear-gradient(180deg, rgba(11,46,71,.08) 0%, rgba(11,46,71,.42) 38%, rgba(11,46,71,.88) 68%, rgba(11,46,71,.96) 100%); }
  /* Copy on pale photos: page hero copy starts near the top on phones, and the Visit band's copy runs the full height. */
  .hero-page::before { background: linear-gradient(180deg, rgba(11,46,71,.58) 0%, rgba(11,46,71,.76) 30%, rgba(11,46,71,.92) 65%, rgba(11,46,71,.96) 100%); }
  .visit-band::before { background: linear-gradient(180deg, rgba(11,46,71,.82) 0%, rgba(11,46,71,.92) 40%, rgba(11,46,71,.96) 100%); }
  /* Home: the still and the loop fill only the band above the copy (which starts 44vh down), square on phones and
     16:9 on tablets, and the gradient reaches the navy just where the copy begins. */
  .hero-home .hero-bg, .hero-home .hero-video { bottom: auto; height: calc(44vh + 48px); }
  .hero.hero-home::before { background: linear-gradient(180deg, rgba(11,46,71,.06) 0, rgba(11,46,71,.30) calc(44vh - 150px), rgba(11,46,71,.94) calc(44vh - 4px), rgba(11,46,71,.97) 100%); }
  .hero-home .eyebrow { color: #fff; }
  .hero h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
  .values-grid, .plans, .review-grid { grid-template-columns: 1fr; }
  .values-intro { position: static; }
  .plan.featured { transform: none; }
  .visit-grid { gap: 32px; }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Inner pages ---------- */
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 48px); background: linear-gradient(180deg, #fff 0%, rgba(173,222,245,.22) 100%); }
.page-hero .lede { max-width: 40em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--forest); background: #fff; border: 1px solid #CAE3C8; border-radius: 99px; padding: 8px 16px; }
.chips a:hover { border-color: var(--green); color: var(--green); }
.narrow { max-width: 780px; }
.center-row { justify-content: center; }

.packages { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.package { background: #fff; border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; border-top: 4px solid var(--blue); }
.package.featured { border-top-color: var(--green); background: linear-gradient(135deg, rgba(173,222,245,.22) 0%, rgba(202,227,200,.3) 100%); }
.package .btn { margin-top: auto; align-self: flex-start; }
.package .fine { margin-top: 4px; }
.package-media { display: block; width: calc(100% + 56px); max-width: none; margin: -32px -28px 22px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.package .checks.iconic { margin-top: 4px; }
.plan-price .was { text-decoration: line-through; font-size: 1rem; margin-left: 8px; }
.example { font-size: 14px; color: var(--muted); background: var(--bg-alt); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 20px; }
.plan .example { background: #F3F2ED; }

.table-wrap { overflow-x: auto; margin: 32px 0 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #F2F2F2; }
thead th { font-weight: 600; color: var(--forest); background: #F2F2F2; font-size: 14px; }
tbody th { font-weight: 500; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.compare td, .compare thead th:not(:first-child) { text-align: center; }
.compare .hl { background: rgba(202,227,200,.35); font-weight: 500; }
.compare thead .hl { background: var(--green); color: #fff; }
.prices td:last-child { font-weight: 500; color: var(--forest); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; }
.dot.blue { background: var(--blue); } .dot.green { background: var(--green); } .dot.ember { background: var(--ember); }

.terms { background: #fff; border-radius: var(--radius-lg); padding: 24px 28px; margin-top: 24px; }
.terms h3 { font-size: 1.1rem; }
.terms a { display: inline-block; margin-top: 12px; font-weight: 500; }

.gift-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.gift-band > img { border-radius: var(--radius-lg); aspect-ratio: 5/4; object-fit: cover; width: 100%; }

.policies { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.policies dl { margin: 0; display: grid; grid-template-columns: 160px 1fr; gap: 0; }
.policies dt, .policies dd { padding: 16px 0; border-bottom: 1px solid #CAE3C8; margin: 0; }
.policies dt { font-weight: 600; color: var(--forest); }
.policies dd { color: var(--muted); }

.faq details { border-bottom: 1px solid #F2F2F2; padding: 4px 0; }
.faq summary { cursor: pointer; font-weight: 500; padding: 16px 32px 16px 0; list-style: none; position: relative; color: var(--forest); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; font-weight: 400; color: var(--green); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); }

.cta-band { background: linear-gradient(135deg, rgba(173,222,245,.35) 0%, rgba(202,227,200,.35) 100%); }

@media (max-width: 880px) {
  .packages, .gift-band, .policies { grid-template-columns: 1fr; }
  .policies { gap: 8px; }
  .policies dl { grid-template-columns: 1fr; }
  .policies dt { border-bottom: 0; padding-bottom: 0; }
  .policies dd { padding-top: 4px; }
  th, td { padding: 12px 12px; }
}
section[id] { scroll-margin-top: 88px; }

/* First visit */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 0; max-width: 820px; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 36px 72px; border-left: 2px solid var(--mist-green); margin-left: 22px; }
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before { content: counter(step); position: absolute; left: -23px; top: -4px; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 600; display: grid; place-items: center; }
.steps > li:nth-child(odd)::before { background: var(--blue); }
.steps h3 { margin-bottom: .35em; padding-top: 6px; }
.steps p, .steps .plain { color: var(--muted); }
.bring { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.rooms { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.rooms > img, .room-pics img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.room-pics { display: grid; gap: 14px; }
.room-list { margin: 0 0 16px; }
.room-list dt { font-weight: 600; color: var(--blue); margin-top: 16px; }
.room-list dd { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 880px) {
  .trio, .bring, .rooms { grid-template-columns: 1fr; }
  .steps > li { padding-left: 48px; }
}

/* Icons (shared sprite: ../icons/sprite.svg, stroke = currentColor) */
.i { width: 22px; height: 22px; flex-shrink: 0; vertical-align: -5px; color: var(--green); }
/* Icon badge: one treatment for every icon that sits beside a title (cards, option rows, packages) */
.card-icon, .option > .i { box-sizing: border-box; width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: rgba(54,122,167,.10); color: var(--blue); margin: 0; flex-shrink: 0; }
.card .card-icon { grid-column: 1; grid-row: 1; }
.card.tone-ember .card-icon { color: var(--ember); background: rgba(217,119,6,.10); }
.card.tone-forest .card-icon, .plan .card-icon, .package .card-icon { color: var(--green); background: rgba(54,146,92,.12); }
.package .card-icon { margin-bottom: 14px; }
.head-icon { width: 32px; height: 32px; display: block; margin-bottom: 10px; color: var(--blue); }
.cell-icon { margin-right: 10px; }
.cell-icon.blue { color: var(--blue); } .cell-icon.ember { color: var(--ember); } .cell-icon.green { color: var(--green); }
h2 .i, h3 .i, dt .i { margin-right: 10px; color: var(--blue); }
.steps h3 .i { width: 26px; height: 26px; }
.checks.iconic li.has-icon { padding-left: 34px; }
.checks.iconic li.has-icon::before { display: none; }
.checks.iconic li.has-icon .i { position: absolute; left: 0; top: 50%; margin-top: -11px; }
.event-list .i { margin-right: 10px; color: var(--blue); }

/* Table cells: wrapped lines align with the text, not under the icon */
table { line-height: 1.45; }
.cell-label { display: flex; align-items: flex-start; gap: 12px; }
.cell-label .cell-icon { margin: 0; vertical-align: 0; }
.prices td:nth-child(2) { white-space: nowrap; }
/* Same hanging indent for other icon + text labels */
dt:has(> .i), .steps h3, h2:has(> .i), .terms h3, .event-list li > span:first-child { display: flex; align-items: flex-start; gap: 10px; }
dt > .i, .steps h3 > .i, h2 > .i, .terms h3 > .i, .event-list .i { margin: 0; vertical-align: 0; margin-top: .1em; }
@media (max-width: 600px) {
  table { font-size: 14px; }
  th, td { padding: 12px 8px; }
  th:first-child, td:first-child { padding-left: 14px; }
  thead th { font-size: 13px; }
  .cell-label { gap: 8px; }
  .cell-label .cell-icon { width: 18px; height: 18px; }
}
@media (max-width: 360px) {
  table { font-size: 13px; }
  thead th { font-size: 12px; }
  th, td { padding: 10px 6px; }
  th:first-child, td:first-child { padding-left: 10px; }
  .compare th:first-child { min-width: 0; }
  .prices td:nth-child(2) { white-space: normal; }
  .cell-label .cell-icon { display: none; }
}

/* Service pages */
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--blue); }
.hero-icon { width: 44px; height: 44px; display: block; margin-bottom: 12px; color: var(--blue); }
.service-hero.tone-ember .hero-icon { color: var(--ember); }
.service-hero.tone-forest .hero-icon { color: var(--green); }
.service-hero.tone-forest { background: linear-gradient(180deg, #fff 0%, rgba(202,227,200,.35) 100%); }
.service-hero.tone-ember { background: linear-gradient(180deg, #fff 0%, #F3F2ED 100%); }
.facts { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.facts li { background: #fff; border: 1px solid #F2F2F2; border-radius: var(--radius); padding: 10px 16px; min-width: 110px; }
.facts strong { display: block; font-size: 1.25rem; font-weight: 600; color: var(--forest); line-height: 1.2; }
.facts span { font-size: 13px; color: var(--muted); }
.prose p { font-size: 1.0625rem; color: var(--muted); }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.option { background: #fff; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); display: flex; gap: 16px; align-items: flex-start; }
.option { align-items: flex-start; }
.option h3 { font-size: 1.1rem; margin-bottom: .3em; }
.option p { font-size: 15px; color: var(--muted); margin: 0; }
a.service-link { text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
a.service-link:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(13,60,0,.06), 0 14px 32px rgba(13,60,0,.1); }
a.service-link h3 { color: var(--forest); }
@media (prefers-reduced-motion: reduce) { a.service-link { transition: none; } a.service-link:hover { transform: none; } }
.card-title-link { color: var(--forest); text-decoration: none; }
.card-title-link::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card-body a:not(.card-title-link) { position: relative; z-index: 1; }
/* Cross-links in running copy (tools/apply_links.py): the text's own colour, underlined, so they read on photos and colour bands too. */
a.xlink { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
a.xlink:hover { color: inherit; text-decoration-thickness: 2px; }

/* Events */
.class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.class-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; border-top: 4px solid var(--green); }
.class-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.class-top .card-icon { color: var(--green); }
.class-when { font-size: 13px; font-weight: 500; color: var(--blue); text-align: right; margin: 0; }
.class-who { color: var(--blue); font-weight: 500; font-size: 15px; margin-top: -.3em; }
.class-card > p:not(.class-who):not(.fine) { color: var(--muted); font-size: 15px; }
.class-card h4 { font-size: 14px; font-weight: 600; color: var(--forest); margin: 4px 0 6px; }
.class-card .plain { font-size: 15px; margin-bottom: 14px; }
.class-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid #F2F2F2; }
.class-foot .meta { margin: 0; font-weight: 500; color: var(--forest); }
.groups-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; }
.group-card { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 32px; }
.group-card > p { color: var(--muted); }
.options.stacked { grid-template-columns: 1fr; margin: 16px 0 24px; }
.options.stacked .option p { margin-bottom: 4px; }
@media (max-width: 1024px) { .class-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) { .class-grid, .groups-grid { grid-template-columns: 1fr; } }

/* Info pages */
.trio-gifts { grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.trio-gifts .package p:last-of-type { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stats strong { display: block; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; color: var(--green); line-height: 1.2; }
.stats span { color: var(--muted); font-size: 14px; }
.faq-section { margin-bottom: 48px; scroll-margin-top: 96px; }
.faq-section h2 { font-size: 1.5rem; display: flex; align-items: center; gap: 12px; }
.faq-section h2 .i { width: 28px; height: 28px; margin: 0; }
.enquire-box { margin-top: 40px; background: var(--bg-alt); border-radius: var(--radius-lg); padding: 32px; text-align: center; }
.enquire-box p { color: var(--muted); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; }
.contact-form .full, .contact-form button { grid-column: 1 / -1; }
.contact-form input, .contact-form select, .contact-form textarea { font: 15px var(--font); padding: 12px 14px; border: 1px solid #CAE3C8; border-radius: var(--radius); background: #fff; color: var(--text); }
.contact-form button { justify-self: start; }
.option h3 a { color: var(--forest); }
@media (max-width: 880px) {
  .trio-gifts, .contact-form { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ================= Site chrome: main menu ================= */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.header-row { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1 var(--font); color: var(--text); text-decoration: none; background: none; border: 0; padding: 12px 12px; border-radius: var(--radius); cursor: pointer; position: relative; white-space: nowrap; }
.nav-link:hover, .has-menu.open > .nav-link { color: var(--green); background: rgba(202,227,200,.3); }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--green); }
.nav-link[aria-current="page"]::after, .nav-link.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--green); }
.nav-link:focus-visible, .menu-link:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Caret: a small inverted triangle, echoing the logo's water facet */
.caret { width: 8px; height: 6px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .2s; opacity: .7; }
.has-menu.open .caret { transform: rotate(180deg); }

.mega, .dropdown { display: none; position: absolute; top: calc(100% + 8px); background: #fff; border: 1px solid #F2F2F2; border-radius: var(--radius-lg); box-shadow: 0 20px 48px rgba(13,60,0,.14); z-index: 50; }
.mega::before, .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* hover bridge */
.has-menu.open > .mega, .has-menu.open > .dropdown { display: grid; animation: menu-pop .16s ease-out; }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .has-menu.open > .mega, .has-menu.open > .dropdown { animation: none; } }
.mega { left: -12px; width: min(880px, calc(100vw - 48px)); grid-template-columns: minmax(0, 1fr) 230px; padding: 12px; gap: 10px; }
.dropdown { left: -12px; width: 320px; padding: 8px; }
.mega-grid, .dropdown ul { list-style: none; margin: 0; padding: 0; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; align-content: start; }
.menu-link { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius); text-decoration: none; color: var(--text); transition: background-color .15s, transform .15s, box-shadow .15s; }
.menu-link:hover, .menu-link[aria-current="page"] { background: rgba(202,227,200,.3); }
.menu-link .i { width: 26px; height: 26px; margin: 0; color: var(--blue); flex-shrink: 0; }
.menu-link strong { display: block; font-weight: 500; font-size: 15px; color: var(--forest); line-height: 1.3; }
.menu-link small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
/* Services menu (Nov 5 2026, Daniel: "way too busy"): each room is a calm row, a small photo,
   the name and its length, instead of a big photo tile. Same rows on desktop, tablet and phone. */
.menu-link-photo { align-items: center; gap: 14px; padding: 10px; border-radius: 12px; }
.menu-thumb { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #0B2E47; }
.menu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.menu-link-photo:hover .menu-thumb img { transform: scale(1.06); }
.menu-thumb-icon { display: none; }
.menu-link-photo > span:last-child { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .menu-link, .menu-thumb img { transition: none; } .menu-link-photo:hover .menu-thumb img { transform: none; } }
.mega-aside { padding: 16px 18px; border-radius: 14px; background: rgba(202,227,200,.22); display: flex; flex-direction: column; gap: 8px; }
.mega-label { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin: 0; }
.plain-links { list-style: none; margin: 0; padding: 0; }
.plain-links a { display: block; padding: 5px 0; font-size: 14px; color: var(--text); text-decoration: none; }
.plain-links a:hover { color: var(--green); }
.plain-links a[aria-current="page"] { color: var(--green); }
.mega-all { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--green); text-decoration: none; }
.mega-all::after { content: " \2192"; }
.mega-all:hover { text-decoration: underline; }
.nav-mobile-extras { display: none; }
/* About dropdown: colour-chip icons (reusing the .card-icon look) and a quick Book/call row */
.dropdown .menu-link .i { box-sizing: border-box; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: rgba(54,122,167,.1); color: var(--blue); }
.dropdown-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 14px 12px 4px; border-top: 1px solid rgba(13,60,0,.1); }
.dropdown-foot .btn { width: 100%; }
.dropdown-foot-tel { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--forest); text-decoration: none; }
.dropdown-foot-tel .i { width: 18px; height: 18px; margin: 0; color: var(--blue); }
.dropdown-foot-tel:hover { color: var(--green); }

.lang select { font: 500 14px var(--font); border: 1px solid #CAE3C8; border-radius: var(--radius); padding: 9px 6px; background: #fff; color: var(--text); cursor: pointer; }
.menu-toggle { display: none; align-items: center; gap: 10px; font: 500 14px var(--font); background: #fff; border: 1.5px solid var(--forest); color: var(--forest); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; }
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -6px; } .menu-toggle-bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1025px) {
  .main-nav { align-self: stretch; display: flex; align-items: stretch; margin-left: auto; }
  /* The bar is taller than the links. Stretch each item so the hover box runs from the link
     down to the bottom of the header, where the panel starts. */
  .nav-list { align-items: stretch; height: 100%; }
  .nav-item { display: flex; align-items: center; }
  .has-menu:hover > .mega, .has-menu:hover > .dropdown,
  .has-menu.linger > .mega, .has-menu.linger > .dropdown { display: grid; }
  .has-menu:hover > .mega, .has-menu:hover > .dropdown { animation: menu-pop .16s ease-out; }
  .has-menu:hover > .nav-link, .has-menu.linger > .nav-link { color: var(--green); background: rgba(202,227,200,.3); }
  .has-menu:hover .caret, .has-menu.linger .caret { transform: rotate(180deg); }
  .header-actions { margin-left: 8px; }
}
@media (max-width: 1180px) and (min-width: 1025px) {
  .nav-link { padding: 12px 9px; font-size: 14px; }
  .lang { display: none; }
}
/* French labels run longest (Nov 1: "Nous recrutons" joined the bar), so on desktop the bar runs a bit tighter in French:
   no language select (it is in the footer), Ask button as icon only */
@media (min-width: 1025px) {
  html[lang="fr"] .nav-link { padding: 12px 7px; font-size: 14px; }
  html[lang="fr"] .lang { display: none; }
  html[lang="fr"] .ask-btn-label { display: none; }
  html[lang="fr"] .ask-btn { padding: 10px 11px; }
  html[lang="fr"] .header-row { gap: 12px; }
}
@media (max-width: 1100px) and (min-width: 1025px) {
  html[lang="fr"] .nav-link { padding: 12px 5px; font-size: 13.5px; }
}

/* Mobile / tablet panel (Daniel, Oct 29; rows instead of photo tiles Nov 5): the six rooms first, the rest of the site as plain rows;
   no grey box for the extras, no row rules — spacing does the separating */
@media (max-width: 1024px) {
  .menu-toggle { display: inline-flex; }
  .header-book { display: none; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; height: var(--panel-h, calc(100vh - 77px)); background: #fff; overflow-y: auto; padding: 4px 16px 32px; }
  .main-nav.open { display: block; }
  body.nav-open { overflow: hidden; }
  body.nav-open .mobile-book { display: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 18px; font-weight: 500; border-radius: 0; }
  .nav-link:hover, .has-menu.open > .nav-link { background: none; }
  .nav-link[aria-current="page"], .nav-link.is-active { color: var(--green); }
  .nav-link[aria-current="page"]::after, .nav-link.is-active::after { display: none; }
  .caret { width: 10px; height: 7px; }
  .mega, .dropdown { position: static; width: auto; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 18px; }
  .mega::before, .dropdown::before { display: none; }
  .has-menu.open > .mega, .has-menu.open > .dropdown { display: block; }
  /* The rooms: the same calm rows as on desktop, two across on tablets, one on phones */
  .mega-grid { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .mega-grid .menu-link-photo { padding: 8px 4px; gap: 14px; }
  .mega-grid .menu-thumb { flex-basis: 48px; width: 48px; height: 48px; border-radius: 10px; }
  .mega-grid .menu-link-photo:hover .menu-thumb img { transform: none; }
  /* The other services as plain links in one short run, no pills or boxes */
  .mega-aside { margin-top: 10px; padding: 0; border-radius: 0; background: none; gap: 2px; }
  .main-nav .mega-aside .plain-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .main-nav .mega-aside .plain-links a { padding: 8px 0; font-size: 15px; font-weight: 500; color: var(--forest); }
  .main-nav .mega-aside .plain-links a[aria-current="page"] { color: var(--green-text); }
  .main-nav .mega-all { align-self: flex-start; margin-top: 0; padding: 8px 0; font-size: 15px; }
  .dropdown-foot { display: none; }
  /* About: icon rows */
  .dropdown ul { display: grid; gap: 2px; }
  .menu-link { padding: 10px 4px; align-items: center; }
  .nav-mobile-extras { display: block; padding-top: 20px; text-align: center; }
  .nav-mobile-extras .btn { width: 100%; }
  .nav-mobile-extras p { margin-top: 14px; font-size: 15px; }
}
@media (max-width: 700px) {
  .mega-grid { grid-template-columns: 1fr; }
  .mega-grid .menu-link-photo { padding: 6px 4px; }
  .mega-grid .menu-thumb { flex-basis: 44px; width: 44px; height: 44px; }
  .mega-grid .menu-link-photo strong { font-size: 16px; }
  .mega-grid .menu-link-photo small { display: none; }  /* the name is enough in the phone list; the detail is on the page */
}
@media (max-width: 420px) { .menu-toggle-label { display: none; } .menu-toggle { padding: 11px 12px; } }

/* ================= Site chrome: "Ask us" chat (header button + panel under the menu bar) ================= */
.ask-btn { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--font); background: #fff; border: 1.5px solid rgba(13,60,0,.18); color: var(--forest); border-radius: var(--radius); padding: 9px 14px; cursor: pointer; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.ask-btn:hover, .ask-btn[aria-expanded="true"] { border-color: var(--green); background: rgba(202,227,200,.3); }
.ask-btn:focus-visible, .ask-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ask-btn svg { flex-shrink: 0; }
.ask-panel { position: fixed; z-index: 39; top: calc(var(--ask-top, 76px) + 8px); right: var(--ask-right, 16px); width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100dvh - var(--ask-top, 76px) - 24px)); display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(13,60,0,.1); border-radius: var(--radius-lg); box-shadow: 0 2px 6px rgba(13,60,0,.06), 0 18px 48px rgba(13,60,0,.14); overflow: hidden; animation: ask-in .18s ease-out; }
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 18px; border-bottom: 1px solid var(--bg-soft); }
.ask-title { margin: 0; font: 600 15px/1.3 var(--font); color: var(--forest); }
.ask-close { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ask-close:hover { background: var(--bg-soft); color: var(--forest); }
.ask-body { flex: 1; min-height: 0; }
.ask-body iframe { display: block; width: 100%; height: 100%; border: 0; }
@keyframes ask-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ask-panel { animation: none; } }
@media (max-width: 600px) {
  .ask-panel { left: 12px; right: 12px; width: auto; height: calc(100dvh - var(--ask-top, 76px) - 20px); }
  .ask-btn-label { display: none; }
  .ask-btn { padding: 10px 11px; }
}

/* ================= Site chrome: footer ================= */
/* "The last room you walk through." The footer opens on the six rooms themselves (the same card
   photos used across the site) as a filmstrip of tiles, then the reception-desk facts (address,
   hours, directions), the newsletter and two quiet link columns, and closes on a huge, faint
   Poppins wordmark cropped by the bottom of the page. White, so it stands apart from the pale
   CTA band most pages end on; no rules between the parts, just spacing and the photos' depth. */
.site-footer { position: relative; overflow: hidden; background: #fff; padding: clamp(56px, 7vw, 88px) 0 0; margin-top: 0; font-size: 15px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--green); text-decoration: underline; }
/* Filmstrip of rooms */
.footer-rooms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.footer-rooms-head h2 { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin: 0; }
.site-footer .footer-all { font-size: 14px; font-weight: 500; color: var(--green); white-space: nowrap; }
.footer-rooms { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.site-footer .room-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #0B2E47; color: #fff; text-decoration: none; isolation: isolate; transition: transform .25s ease, box-shadow .25s ease; }
.room-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.room-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,46,71,0) 30%, rgba(11,46,71,.86) 100%); }
.room-tile-text { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 1; }
.room-tile-text strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; color: #fff; text-wrap: balance; }
.room-tile-text small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.82); }
.room-tile:hover, .room-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(13,60,0,.08), 0 18px 36px rgba(13,60,0,.16); color: #fff; text-decoration: none; }
.room-tile:hover img, .room-tile:focus-visible img { transform: scale(1.06); }
.room-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.room-tile[aria-current="page"]::before { content: ""; position: absolute; inset: 0; z-index: 2; border: 2px solid var(--leaf); border-radius: 14px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .room-tile, .room-tile img { transition: none; } .room-tile:hover { transform: none; } .room-tile:hover img { transform: none; } }
/* Brand, newsletter, visit, link columns: a 2 x 2 composition */
.footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px clamp(32px, 6vw, 96px); align-items: start; padding: clamp(48px, 6vw, 72px) 0 44px; }
.footer-brand img { width: 84px; height: auto; display: block; }
.footer-tag { font-weight: 500; margin: 18px 0 4px; color: var(--forest); }
.footer-brand > p:not(.footer-tag) { color: var(--muted); max-width: 30em; }
.footer-social { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-social a { font-size: 14px; font-weight: 500; color: var(--forest); }
.signup label { display: block; font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--forest); }
.signup .fine { margin: 6px 0 14px; }
.signup div { display: flex; gap: 8px; max-width: 520px; }
.signup input { flex: 1; min-width: 0; font: 15px var(--font); padding: 13px 16px; border: 1.5px solid #CAE3C8; border-radius: var(--radius); background: #fff; }
.signup input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.footer-visit h2, .footer-cols h2 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
.footer-visit h2 .i { width: 18px; height: 18px; margin: 0; color: var(--blue); }
.footer-visit address { font-style: normal; font-size: 1.0625rem; font-weight: 500; color: var(--forest); line-height: 1.5; margin: 0 0 12px; }
.footer-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0 0 14px; font-size: 14px; }
.footer-hours dt { font-weight: 600; color: var(--forest); } .footer-hours dd { margin: 0; color: var(--muted); }
.footer-visit p { margin: 0 0 12px; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.site-footer .footer-reviews { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { padding: 5px 0; }
.site-footer .footer-cta { font-weight: 600; color: var(--forest); }
/* Legal row: the last line of the page */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-bottom: clamp(28px, 4vw, 44px); font-size: 13px; color: var(--muted); }
.footer-bottom p { margin: 0; }
.footer-bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.footer-bottom a { color: var(--muted); }
.footer-langs { margin-left: auto !important; gap: 4px !important; }
.footer-langs a { padding: 4px 8px; border-radius: 6px; }
.footer-langs a[aria-current] { background: rgba(202,227,200,.55); color: var(--forest); font-weight: 500; }

.mobile-book { display: none; }
@media (max-width: 1024px) {
  .footer-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .mobile-book { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
  body { padding-bottom: 80px; }
}
@media (max-width: 700px) {
  /* Rooms become a swipeable strip that bleeds to the screen edges */
  .footer-rooms { display: flex; width: auto; margin: 0; padding: 4px 16px 14px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .footer-rooms::-webkit-scrollbar { display: none; }
  .footer-rooms li { flex: 0 0 164px; scroll-snap-align: start; }
  .footer-main { grid-template-columns: 1fr; gap: 36px; }
  .footer-langs { margin-left: 0 !important; }
}
@media (max-width: 480px) {
  .footer-cols { gap: 28px 16px; }
  .signup div { flex-direction: column; }
}
/* Desktop panels sit flush under their own item. Services used to be position:static so the
   mega anchored to the header row, right-aligned and 900px wide, which left it beside the
   Services link instead of under it. The pointer fell through the gap and :hover ended. */
@media (min-width: 1025px) {
  .header-row { position: relative; }
  /* The panel floats a little below the bar as a soft card: no hairline border, a layered
     shadow, and a pointer under the open item so it reads as that tab's panel. */
  .mega, .dropdown { top: calc(100% + 10px); border: 0; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13,60,0,.05), 0 12px 28px rgba(13,60,0,.09), 0 28px 60px rgba(13,60,0,.10); }
  .mega { left: 0; right: auto; width: min(880px, calc(100vw - 48px)); padding: 12px; gap: 10px;
    margin-left: var(--menu-shift, 0px); } /* nav.js sets the shift when the panel would leave the window */
  .dropdown { left: auto; right: 0; }
  /* Hover bridge across the gap, from the bottom of the bar down to the panel. */
  .mega::before, .dropdown::before { top: -24px; height: 24px; }
  .has-menu::after { content: ""; display: none; position: absolute; z-index: 51; top: calc(100% + 3px);
    left: calc(50% - 7px); width: 14px; height: 14px; background: #fff; rotate: 45deg;
    border-radius: 3px 0 0 0; box-shadow: -2px -2px 4px rgba(13,60,0,.04); pointer-events: none; }
  .has-menu:hover::after, .has-menu.linger::after, .has-menu.open::after { display: block; animation: menu-pop .16s ease-out; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .has-menu:hover > .mega, .has-menu:hover > .dropdown, .has-menu::after { animation: none !important; }
}
@media (min-width: 1025px) {
  .has-menu.hover-off:not(.open) > .mega, .has-menu.hover-off:not(.open) > .dropdown,
  .has-menu.hover-off:not(.open)::after { display: none; }
}

/* ================= Deep theme (HOCATT page) =================
   Dark, earthy variant built from the brand palette: forest greens, mist and leaf
   accents, and the ember heat tone. Scoped to .theme-deep so nothing else changes. */
.theme-deep {
  /* Float Blue page built only from brand colours: Float Blue ground, white type,
     Mist Green and Mist Blue accents, Forest text on light buttons. */
  --deep-bg: #367AA7; --deep-surface: rgba(255,255,255,.08); --deep-raise: rgba(255,255,255,.12);
  --deep-line: rgba(255,255,255,.28); --deep-text: #FFFFFF; --deep-muted: rgba(255,255,255,.88);
  --deep-accent: #CAE3C8; --deep-sky: #ADDEF5; --deep-ember: #FFFFFF;
  background: var(--deep-bg); color: var(--deep-text);
}
.theme-deep h1, .theme-deep h2, .theme-deep h3 { color: var(--deep-text); }
.theme-deep a { color: var(--deep-sky); }
.theme-deep .crumbs, .theme-deep .crumbs span { color: var(--deep-muted); }
.deep-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--deep-accent); margin-bottom: 14px; }
.deep-hero { padding: clamp(48px, 7vw, 104px) 0; background: radial-gradient(120% 90% at 85% 10%, #64AED3 0%, var(--deep-bg) 60%); }
.deep-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.deep-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; margin-bottom: .35em; }
.deep-lede { font-size: 1.125rem; color: var(--deep-muted); max-width: 34em; }
.deep-media { margin: 0; }
.deep-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 20px; border: 1px solid var(--deep-line); }
.btn-deep { background: var(--deep-accent); color: #0D3C00 !important; font-weight: 500; }
.btn-deep:hover { background: #FFFFFF; }
.btn-deep-ghost { border: 1.5px solid var(--deep-line); color: var(--deep-text) !important; background: transparent; }
.btn-deep-ghost:hover { border-color: var(--deep-accent); background: rgba(137,201,138,.08); }
.deep-facts { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 28px; }
.deep-facts strong { display: block; font-size: 1.35rem; font-weight: 600; }
.deep-facts span { font-size: 13px; color: var(--deep-muted); }
.deep-section { padding: clamp(64px, 9vw, 112px) 0; border-top: 1px solid var(--deep-line); }
.deep-alt { background: var(--deep-surface); }
.deep-head { max-width: 640px; margin-bottom: 44px; }
.deep-head p:not(.deep-eyebrow) { color: var(--deep-muted); }

.pillar-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pillar-card { background: var(--deep-surface); border: 1px solid var(--deep-line); border-radius: 16px; padding: 28px 24px; }
.pillar-icon { width: 36px; height: 36px; color: var(--deep-accent); margin: 0 0 20px; display: block; }
.pillar-card:nth-child(1) .pillar-icon { color: var(--deep-ember); }
.pillar-card:nth-child(2) .pillar-icon { color: var(--deep-sky); }
.pillar-card h3 { font-size: 1.1rem; margin-bottom: .4em; }
.pillar-card p { font-size: 15px; color: var(--deep-muted); margin: 0; }

.proposal-note { border: 1px dashed var(--deep-ember); color: var(--deep-ember); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: -16px 0 28px; display: inline-block; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier { position: relative; background: var(--deep-bg); border: 1px solid var(--deep-line); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; }
.tier-featured { border-color: var(--deep-accent); box-shadow: 0 0 0 1px var(--deep-accent), 0 24px 60px rgba(13,60,0,.25); }
.tier-badge { position: absolute; top: -12px; left: 28px; margin: 0; background: var(--deep-accent); color: #0D3C00; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; }
.tier h3 { font-size: 1.25rem; margin-bottom: 4px; }
.tier-for { font-size: 14px; color: var(--deep-muted); }
.tier-price { font-size: 2.5rem; font-weight: 600; line-height: 1; margin: 12px 0 6px; }
.tier-price span { font-size: 14px; font-weight: 400; color: var(--deep-muted); }
.tier-save { font-size: 13px; color: var(--deep-accent); margin-bottom: 20px; }
.tier-list { list-style: none; padding: 0; margin: 0 0 16px; }
.tier-list li { padding: 10px 0 10px 22px; border-top: 1px solid var(--deep-line); font-size: 15px; position: relative; }
.tier-list li::before { content: ""; position: absolute; left: 0; top: 17px; width: 10px; height: 8px; background: var(--deep-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tier-terms { font-size: 13px; color: var(--deep-muted); margin-top: auto; }
.tier .btn { margin-top: 12px; }

.deep-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.prep-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 22px; }
.prep-list li { display: flex; gap: 16px; }
.prep-list .i { width: 28px; height: 28px; color: var(--deep-sky); margin: 2px 0 0; }
.prep-list h3 { font-size: 1rem; margin-bottom: 2px; }
.prep-list p { margin: 0; color: var(--deep-muted); font-size: 15px; }
.suit-card { background: var(--deep-surface); border: 1px solid var(--deep-line); border-radius: 16px; padding: 28px; }
.suit-card h3 { font-size: 1rem; display: flex; gap: 10px; align-items: flex-start; }
.suit-card h3 .i { color: var(--deep-ember); margin: 0; }
.suit-list { columns: 2; column-gap: 24px; padding-left: 18px; margin: 16px 0; font-size: 14px; color: var(--deep-muted); }
.suit-list li { break-inside: avoid; padding: 3px 0; }
.suit-card > p { font-size: 14px; color: var(--deep-muted); margin: 0; }
.deep-faq details { border-bottom: 1px solid var(--deep-line); }
.deep-faq summary { cursor: pointer; font-weight: 500; padding: 18px 32px 18px 0; list-style: none; position: relative; }
.deep-faq summary::-webkit-details-marker { display: none; }
.deep-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.4rem; color: var(--deep-accent); }
.deep-faq details[open] summary::after { content: "–"; }
.deep-faq details p { color: var(--deep-muted); }
.deep-cta { background: radial-gradient(90% 120% at 50% 100%, #64AED3 0%, var(--deep-bg) 70%); }
.theme-deep .i { color: inherit; }
.theme-deep .pillar-icon, .theme-deep .prep-list .i { color: var(--deep-sky); }
.theme-deep .pillar-card:nth-child(1) .pillar-icon { color: var(--deep-ember); }
.theme-deep .pillar-card:nth-child(3) .pillar-icon, .theme-deep .pillar-card:nth-child(4) .pillar-icon { color: var(--deep-accent); }
.theme-deep .suit-card h3 .i { color: var(--deep-ember); }
.theme-deep .deep-prose p { color: var(--deep-muted); }
.theme-deep .steps > li { border-left-color: rgba(255,255,255,.35); }
.theme-deep .steps p { color: var(--deep-muted); }
.hc-includes { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.hc-includes li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); min-width: 0; }
.hc-includes span { color: var(--deep-muted); font-size: 15px; }
.hc-layers { margin: 36px 0 8px; }
.hc-layers ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hc-layers li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); min-width: 0; }
.hc-layers strong { font-weight: 600; }
.hc-layers li span { color: var(--deep-muted); font-size: 14px; text-align: right; }
.hc-layers figcaption { margin-top: 14px; font-size: 14px; color: var(--deep-muted); }

@media (max-width: 1024px) { .pillar-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) {
  .deep-hero-grid, .deep-two, .tiers { grid-template-columns: 1fr; }
  .deep-media { order: -1; }
  .deep-media img { aspect-ratio: 4/3; }
  .tier-featured { margin: 8px 0; }
}
@media (max-width: 520px) { .pillar-cards { grid-template-columns: 1fr; } .suit-list { columns: 1; } }

/* Treatment photo gallery (acupuncture + massage) */
.section.pt-0 { padding-top: 0; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.option.has-photo { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; padding-top: 0; overflow: hidden; align-content: start; }
.option.has-photo > img { grid-column: 1 / -1; width: calc(100% + 48px); max-width: none; margin: 0 -24px 4px; aspect-ratio: 4/3; object-fit: cover; }

/* Hidden spam trap on forms; people never see it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 0; color: var(--muted, #555); }
.form-note:empty { display: none; }
/* Quiz (quiz.html) and enquiry forms (franchise.html, quiz follow-up) */
.quiz { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(20px, 4vw, 40px); }
.quiz [hidden], .contact-form [hidden] { display: none !important; }
.quiz fieldset { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.quiz legend { padding: 0; margin-bottom: 4px; }
.quiz-q { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0; }
.quiz-q:focus, #result-title:focus { outline: none; }
.quiz-progress { font-size: 14px; font-weight: 500; color: var(--muted); margin: 0 0 8px; }
.quiz-bar { height: 6px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; margin-bottom: 28px; }
.quiz-bar span { display: block; height: 100%; width: 25%; background: var(--green); transition: width .3s; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.choice { position: relative; display: flex; }
.choice input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.choice span { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--mist-green); border-radius: var(--radius); background: #fff; cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.4; transition: border-color .15s, background .15s; }
.choice span::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border: 2px solid var(--blue); border-radius: 50%; background: #fff; }
.choice input[type="checkbox"] + span::before { border-radius: 4px; }
.choice span:hover { border-color: var(--green); }
.choice input:checked + span { border-color: var(--green); background: rgba(202,227,200,.35); }
.choice input:checked + span::before { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 3px #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice input:disabled + span { opacity: .5; cursor: not-allowed; }
.quiz-error { min-height: 1.5em; margin: 12px 0 0; color: #B42318; font-size: 14px; font-weight: 500; }
.quiz-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
.quiz-nav #quiz-next { margin-left: auto; }
.quiz .btn:focus-visible, .contact-form .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.result-intro { margin: 20px 0 8px; }
.result-sub { margin: 32px 0 0; }
.result-tag { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 99px; background: rgba(202,227,200,.6); color: var(--forest); font-size: 12px; font-weight: 500; }
.result-meta { margin: 0 0 6px; font-weight: 500; color: var(--forest) !important; }
.result-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px !important; font-weight: 500; }
.quiz-result .option { box-shadow: none; border: 1px solid var(--mist-green); }
.quiz-result .cta-row { margin-top: 28px; }
.quiz-followup { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--bg-soft); }
.quiz-followup .contact-form { padding: 0; box-shadow: none; }
.quiz-restart { margin: 24px 0 0; }
.form-status { grid-column: 1 / -1; margin: 0; font-weight: 500; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--green-dark); font-size: 1.125rem; }
.form-status.is-error { color: #B42318; }
@media (max-width: 520px) { .choice-grid { grid-template-columns: 1fr; } .quiz-nav .btn { flex: 1; } }

/* Phones: service and "other experiences" cards become compact rows (thumbnail left, text right) so pages stay short */
.nowrap { white-space: nowrap; }
@media (max-width: 600px) {
  .cards { gap: 12px; }
  .cards .card { display: grid; grid-template-columns: 112px 1fr; border-top: 0; border-left: 4px solid var(--blue); }
  .cards .card > img { aspect-ratio: auto; height: 100%; min-height: 112px; }
  .cards .card.tone-ember { border-left-color: var(--ember); }
  .cards .card.tone-forest { border-left-color: var(--green); }
  .cards .card .card-body { padding: 12px 14px; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; row-gap: 4px; }
  .cards .card .card-body h3 { font-size: 1.02rem; }
  .cards .card .card-body p { font-size: 13.5px; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cards .card .card-body p strong { display: block; }
  .cards .card .meta { margin: 6px 0 0; padding-top: 6px; font-size: 13px; }
  /* Chatbase bubble sits above the fixed "Book now" button instead of on top of it */
  #chatbase-bubble-button { bottom: 84px !important; }
  #chatbase-bubble-window { bottom: 150px !important; max-height: calc(100vh - 170px) !important; }
}

/* Quiet motion. Everything here is skipped for people who turn animation off. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .card, .plan, .package, .option, .btn { transition: transform .25s ease, box-shadow .25s ease; }
  .card img { transition: transform .8s ease; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16, 42, 32, .14); }
  .card:hover img { transform: scale(1.04); }
  .plan:hover, .package:hover { transform: translateY(-3px); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .hero-bg img, .band-bg img { animation: fv-drift 28s ease-in-out infinite alternate; transform-origin: 50% 60%; }
  @keyframes fv-drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
}

/* Pricing: plan finder */
.finder { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px clamp(18px, 3vw, 32px); margin: 0 auto 32px; max-width: 760px; display: grid; gap: 14px; }
.finder-label { font-weight: 600; font-size: 1.1rem; margin: 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.finder-label output { color: var(--green); font-weight: 600; white-space: nowrap; }
.finder input[type=range] { width: 100%; accent-color: var(--green); margin: 4px 0; }
.finder-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin: 0; }
.finder-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.finder-result > div { background: var(--sand, #F6F7F4); border-radius: var(--radius, 10px); padding: 12px 14px; min-width: 0; }
.finder-result > div.best { background: rgba(54,146,92,.12); outline: 2px solid var(--green); }
.finder-result small { display: block; font-size: 12.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.finder-result strong { display: block; font-size: 1.35rem; margin: 2px 0; font-variant-numeric: tabular-nums; }
.finder-result span { font-size: 13.5px; color: var(--muted); }
.finder-note { margin: 0; font-size: 13px; color: var(--muted); }
.finder .fine a { color: inherit; }
/* Blog (tools/build_blog.py): posts at home/<slug>/, index at home/blog/ */
.post-hero h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.post-meta { font-size: 14px; color: var(--muted); margin: 0; }
.post.section { padding-top: clamp(24px, 3vw, 40px); }
.post-figure { margin: 0 0 32px; }
.post-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.post-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 1.6em 0 .5em; }
.post-body h3 { font-size: 1.2rem; margin: 1.4em 0 .4em; }
.post-body ul, .post-body ol { color: var(--muted); padding-left: 1.3em; margin: 0 0 1.2em; }
.post-body li { font-size: 1.0625rem; margin: .4em 0; }
.post-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--blue); }
.post-note { margin-top: 32px; background: var(--bg-alt); border-radius: var(--radius); padding: 18px 20px; }
.post-note p { margin: 0; font-size: 15px; color: var(--muted); }
.post-more { padding-left: 1.2em; }
.post-more li { margin: .5em 0; }
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.post-list article { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; }
.post-list h2 { font-size: 1.25rem; margin: 0 0 .35em; }
.post-list h2 a { color: var(--forest); text-decoration: none; }
.post-list h2 a:hover { text-decoration: underline; }
.post-list p { margin: 0 0 .35em; color: var(--muted); }
.post-list .fine { margin: 0; }

/* Page effects (Oct 20, 2026). Markup: tools/build_service_pages.py (HERO_FX, cycle_figure, units_figure),
   build_hocatt_page.py (hocatt_diagram), index.html (.motes), first-visit.html (.steps-track).
   motion.js adds .fx-paused off screen and .fx-wait/.lit for the light-ups. With reduced motion (or no JS)
   everything here stands still and complete: no motes or tint, steam shown full, every unit and step lit. */
.fx-paused, .fx-paused * { animation-play-state: paused !important; }
.hero-fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.motes { display: none; }
.motes i { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(173,222,245,.6); opacity: 0; }
.waves path { fill: none; stroke: var(--mist-green); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (max-width: 700px) { .waves { opacity: .6; } .waves path:nth-child(n+3) { display: none; } }
.tint { z-index: -2; display: none; mix-blend-mode: soft-light; opacity: .55; }
.blooms i { position: absolute; width: 36%; aspect-ratio: 1; border-radius: 50%; filter: blur(48px); opacity: .3; mix-blend-mode: screen; }
.blooms i:nth-child(1) { left: -4%; top: 10%; background: #8B5CF6; }
.blooms i:nth-child(2) { left: 18%; top: 40%; background: #2BB3A3; }
.blooms i:nth-child(3) { left: 34%; top: 6%; width: 26%; background: var(--sky); }
@media (max-width: 880px) { .blooms i { width: 70%; } .blooms i:nth-child(1) { top: 46%; } .blooms i:nth-child(2) { top: 64%; left: 30%; } .blooms i:nth-child(3) { top: 40%; left: 40%; width: 50%; } }

/* Fire & Ice: cycle ring beside the steps */
.cycle-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 5vw, 64px); align-items: center; }
.cycle { margin: 0; display: grid; gap: 20px; justify-items: center; }
.cycle-ring { position: relative; width: min(220px, 64vw); }
.cycle-ring svg:not(.i) { display: block; width: 100%; height: auto; }
.cycle-ring path { fill: none; stroke-width: 14; }
.cycle-dot { fill: var(--forest); stroke: #fff; stroke-width: 3; transform-origin: 100px 100px; }
.cycle-icon { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; color: var(--ember); }
.cycle-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.cycle-steps li { display: grid; padding: 6px 12px; border-left: 4px solid var(--c); border-radius: 0 var(--radius) var(--radius) 0; line-height: 1.4; }
.cycle-steps strong { color: var(--forest); font-weight: 600; }
.cycle-steps span { font-size: 14px; color: var(--muted); }
@media (max-width: 880px) { .cycle-grid { grid-template-columns: 1fr; } }

/* EE: 24 units in 4 towers, each tower its own Frequency Forest spectrum colour (Daniel, 2 Nov 2026:
   reworked after the flat single-green grid read as a chart, not the room's own glowing towers) */
.ee-grid { margin: 32px 0 0; display: grid; justify-items: center; gap: 10px; }
.ee-towers { position: relative; display: flex; gap: clamp(14px, 4vw, 28px); padding: 20px clamp(18px, 4vw, 32px); background: #0B2E47; border-radius: var(--radius-lg); overflow: hidden; }
.ee-towers span { position: relative; z-index: 1; display: flex; flex-direction: column-reverse; gap: 6px; }
.ee-towers span:nth-of-type(1) { --tc: #5EE1FF; }
.ee-towers span:nth-of-type(2) { --tc: #8E6BFF; }
.ee-towers span:nth-of-type(3) { --tc: #FF5BD6; }
.ee-towers span:nth-of-type(4) { --tc: #7FE07A; }
.ee-towers i { width: clamp(40px, 10vw, 56px); height: 20px; border-radius: 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 80%, #fff) 0%, var(--tc) 100%); box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); }
.ee-ring { display: none; }
.ee-grid figcaption { font-size: 14px; color: var(--muted); }
.ee-grid.fx-wait i { opacity: .18; box-shadow: none; transition: opacity .5s ease, box-shadow .5s ease; transition-delay: calc(var(--i) * 70ms); }
.ee-grid.fx-wait.lit i { opacity: 1; box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); }

/* HOCATT: side-view diagram */
.hc-fig { margin: 56px auto 0; max-width: 520px; }
.hc-diagram { position: relative; }
.hc-diagram svg { display: block; width: 100%; height: auto; }
.hc-cabin { fill: none; stroke: #fff; stroke-width: 3; }
.hc-body { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.hc-seat { stroke: rgba(255,255,255,.3); stroke-width: 6; stroke-linecap: round; }
.hc-head { fill: rgba(255,255,255,.14); stroke: #fff; stroke-width: 3; }
.hc-collar { stroke: var(--deep-accent); stroke-width: 6; stroke-linecap: round; }
.hc-steam { fill: var(--deep-sky); opacity: .4; transform-box: fill-box; transform-origin: 50% 100%; }
.hc-wisp { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hc-lead { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.5; stroke-dasharray: 4 4; }
.hc-label { position: absolute; left: 56%; right: 0; transform: translateY(-50%); font-size: clamp(13px, 3.4vw, 15px); line-height: 1.35; font-weight: 500; }
.hc-fig figcaption { margin-top: 16px; font-size: 14px; color: var(--deep-muted); text-align: center; }

/* First Visit: the timeline fills in step by step */
.steps-track.fx-wait > li::before { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 2px var(--mist-green); transition: background .5s, color .5s, box-shadow .5s; }
.steps-track.fx-wait > li.lit::before { background: var(--green); color: #fff; box-shadow: 0 0 0 6px rgba(54,146,92,.15); }
.steps-track.fx-wait > li.lit:nth-child(odd)::before { background: var(--blue); box-shadow: 0 0 0 6px rgba(54,122,167,.15); }
.steps-track.fx-wait > li:not(:last-child)::after { content: ""; position: absolute; left: -2px; top: 40px; bottom: 0; width: 2px; background: var(--green); transform: scaleY(0); transform-origin: top; transition: transform 1.2s ease .3s; }
.steps-track.fx-wait > li.lit::after { transform: scaleY(1); }

/* Contact map and quiz photo */
.map-embed { margin-top: 40px; }
.map-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 7; min-height: 320px; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--bg-soft); }
@media (max-width: 700px) { .map-embed iframe { aspect-ratio: 4 / 3; min-height: 0; } }
.quiz-photo { display: none; }
@media (max-width: 999px) { .quiz-layout { max-width: 780px; } }
@media (min-width: 1000px) {
  .quiz-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
  .quiz-photo { display: block; order: 2; width: 100%; margin: 0; min-width: 0; position: sticky; top: 108px; }
  .quiz-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 56px rgba(11, 46, 71, .32); outline: 1px solid rgba(173, 222, 245, .85); }
  .quiz-photo figcaption { margin: 12px 0 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
}

/* NeuroVizr photos, Our Story mosaic, contact Instagram */
.split-media { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.split-media figure { margin: 0; min-width: 0; }
.split-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.split-media figcaption, .photo-wide figcaption, .story-grid figcaption, .press-row figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.photo-wide { margin: 36px 0 0; }
.photo-wide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 42%; border-radius: var(--radius-lg); }
.story-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.story-grid li, .story-grid figure { margin: 0; min-width: 0; }
.story-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.story-grid .wide { grid-column: span 2; }
.story-grid .wide img { aspect-ratio: 16 / 9; }
.press-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 16px; align-items: start; }
.press-row figure { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.press-row figcaption { text-align: center; }
.press-row img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; background: var(--bg-soft); border-radius: var(--radius-lg); }
#ig-feed .wrap { min-width: 0; }
.ig-fallback { display: grid; gap: 12px; justify-items: start; max-width: 40em; }
.ig-fallback p { margin: 0; }
.ig-widget { max-width: 100%; overflow: hidden; }
.has-widget .ig-fallback { display: none; }
@media (max-width: 800px) {
  .split-media { grid-template-columns: 1fr; }
  .split-media figure { order: -1; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-grid .wide { grid-column: 1 / -1; }
  .press-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .story-grid { grid-template-columns: 1fr; } .story-grid .wide { grid-column: auto; } }

@media (prefers-reduced-motion: no-preference) {
  .motes { display: block; }
  .motes i { animation: fv-rise var(--t) linear var(--d) infinite; }
  @keyframes fv-rise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .55; } 80% { opacity: .3; } 100% { transform: translate(3vw, -620px); opacity: 0; } }
  .hero-home .hero-bg img { animation: none; }  /* the still is the hero loop's first frame: no drift, so the fade-in doesn't jump */
  .waves path { animation: fv-wave var(--t) linear infinite; }
  @keyframes fv-wave { to { transform: translateX(calc(var(--w) * -1)); } }
  .tint { display: block; animation: fv-chromo 40s linear infinite; }
  @keyframes fv-chromo { 0%, 100% { background: #E0453A; } 20% { background: #F08A24; } 40% { background: #3FAE6A; } 60% { background: #3C7FD6; } 80% { background: #8B5CF6; } }
  .blooms i { animation: fv-bloom 17s ease-in-out infinite alternate; }
  .blooms i:nth-child(2) { animation-duration: 23s; animation-delay: -8s; }
  .blooms i:nth-child(3) { animation-duration: 19s; animation-delay: -13s; }
  @keyframes fv-bloom { from { transform: scale(.8); opacity: .18; } to { transform: scale(1.15) translate(8%, -6%); opacity: .4; } }
  .cycle-dot { animation: fv-spin 12s linear infinite; }
  @keyframes fv-spin { to { transform: rotate(360deg); } }
  .cycle-steps li { animation: fv-phase 12s linear infinite; animation-delay: calc(var(--n) * 3s - 12s); }
  @keyframes fv-phase { 0%, 23% { background: color-mix(in srgb, var(--c) 14%, transparent); } 27%, 100% { background: transparent; } }
  .hc-steam { animation: fv-steam 9s ease-in-out infinite; }
  @keyframes fv-steam { 0% { transform: scaleY(0); opacity: .4; } 55%, 85% { transform: scaleY(1); opacity: .4; } 100% { transform: scaleY(1); opacity: 0; } }
  .hc-layers li { animation: fv-layer 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s); }
  @keyframes fv-layer { 0%, 100% { background: rgba(255,255,255,.1); } 45% { background: rgba(173,222,245,.32); } }
  .hc-wisp { animation: fv-wisp 4.5s ease-out infinite; }
  .hc-wisp:nth-of-type(2) { animation-delay: -1.5s; }
  .hc-wisp:nth-of-type(3) { animation-delay: -3s; }
  @keyframes fv-wisp { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .45; } 100% { opacity: 0; transform: translateY(-140px) scale(1.6); } }

  /* EE System towers (Daniel, 2 Nov 2026): field rings pulse out behind the figure and each tower's
     glow rises bottom-to-top, the way the real room's columns read, without touching the headline. */
  .ee-ring { display: block; position: absolute; left: 50%; top: 50%; z-index: 0; width: 78%; max-width: 360px; aspect-ratio: 1; border: 1px solid rgba(154,207,190,.55); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.3); animation: fv-ee-ring 4.8s ease-out infinite; animation-delay: calc(var(--i) * -1.6s); }
  @keyframes fv-ee-ring { 0% { opacity: .4; transform: translate(-50%, -50%) scale(.32); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
  .ee-towers i { animation: fv-ee-rise 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -140ms); }
  @keyframes fv-ee-rise { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
}

/* ---------------------------------------------------------------- Booking page (book.html, tools/build_book_page.py) */
/* Hero: the blue corridor, full width, with the three steps as glass pills */
.book-hero { min-height: clamp(520px, 72vh, 760px); }
.book-hero .hero-bg img { object-position: 50% 60%; }
.book-hero .hero-copy { max-width: 52em; }
.book-steps { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; font-weight: 500; color: #fff; }
.book-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.book-steps span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; flex-shrink: 0; }
.book-steps .i { width: 20px; height: 20px; color: var(--mist-blue); }
.book-hero .cta-row { margin-bottom: 24px; }
.book-hero .btn .i { width: 18px; height: 18px; }
.hero-proof { gap: 10px 28px; }
.hero-proof strong { font-size: 1.35rem; }

/* Step 1: photo category cards */
.book { padding-top: clamp(40px, 6vw, 72px); }
.book:focus, .book-panel:focus { outline: none; }
#book-start, .book-panel { scroll-margin-top: 96px; }
.book-q { max-width: 640px; margin-bottom: 28px; }
.book-q h2 { margin-bottom: .35em; }
.book-q p:last-child { color: var(--muted); margin: 0; }
.book-tiles { list-style: none; padding: 0; margin: 0 0 48px; display: grid; gap: 14px; grid-template-columns: 1fr; }
.book-tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: #fff; background: #0B2E47; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.book-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.book-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,46,71,.05) 0%, rgba(11,46,71,.35) 45%, rgba(11,46,71,.9) 100%); transition: background .25s; }
.book-tile:hover, .book-tile:focus-visible { color: #fff; transform: translateY(-4px); box-shadow: 0 2px 4px rgba(13,60,0,.08), 0 18px 40px rgba(11,46,71,.28); }
.book-tile:hover img, .book-tile:focus-visible img { transform: scale(1.05); }
.book-tile:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.book-tile-body { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 18px; }
.book-tile-icon { box-sizing: border-box; width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); color: #fff; grid-row: 1; }
.book-tile-text { grid-column: 2; grid-row: 1; align-self: center; }
.book-tile strong { display: block; font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.book-tile small { display: block; color: rgba(255,255,255,.8); font-size: 13px; margin-top: 3px; }
.book-tile-why { display: none; font-style: normal; color: rgba(255,255,255,.85); font-size: 14px; margin-top: 8px; line-height: 1.5; }
.book-tile-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.22); font-size: 14px; }
.book-tile-price { font-weight: 600; color: #fff; white-space: nowrap; }
.book-tile-count { color: rgba(255,255,255,.7); }
.book-tile-go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #fff; background: var(--green); border-radius: 99px; padding: 7px 14px 7px 10px; transition: background .2s; }
.book-tile-go .i { width: 16px; height: 16px; }
/* Hover green on this page is leaf on forest, never the dark green: it has to stay readable over photos */
.book-tile:hover .book-tile-go, .book-tile:focus-visible .book-tile-go { background: var(--leaf); color: var(--forest); }
.book-hero .btn-primary:hover, .book-hero .btn-primary:focus-visible, .book .btn-primary:hover, .book .btn-primary:focus-visible { background: var(--leaf); color: var(--forest); }
.book-tile.is-featured { min-height: 340px; }
.book-tile.is-featured .book-tile-why { display: block; }
.book-tile.is-featured strong { font-size: 1.5rem; }
.book-tile-badge { position: absolute; top: 16px; left: 16px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); background: var(--leaf); border-radius: 99px; padding: 6px 12px; }
.book-tile.is-featured strong { font-size: 1.5rem; }

/* Step 2: one category, its photo band and service cards */
.book-panel { margin: 0 0 56px; }
.book-panel-head { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); background: #0B2E47; color: #fff; min-height: 220px; display: flex; align-items: flex-end; margin-bottom: 20px; }
.book-panel-head img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.book-panel-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,46,71,.9) 0%, rgba(11,46,71,.7) 45%, rgba(11,46,71,.25) 100%), linear-gradient(0deg, rgba(11,46,71,.5) 0%, rgba(11,46,71,0) 50%); }
.book-panel-copy { padding: 22px 22px 20px; max-width: 42em; }
.book-panel-copy p { color: rgba(255,255,255,.85); margin: 0 0 6px; font-size: 15px; }
.book-panel-head h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 8px 0 8px; color: #fff; }
.book-panel-head h2 .i { box-sizing: border-box; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; flex-shrink: 0; }
.book-panel-step { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px !important; color: var(--mist-green) !important; margin: 4px 0 0 !important; }
.book-panel-step .i { width: 18px; height: 18px; }
.book-back { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #fff; text-decoration: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 99px; padding: 6px 12px 6px 8px; backdrop-filter: blur(4px); transition: background .2s, color .2s; }
.book-back .i { width: 16px; height: 16px; }
.book-back:hover { background: #fff; color: var(--forest); }
.is-stepped .book-back { display: inline-flex; }
.book-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.book-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); border-top: 4px solid var(--blue); padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.book-card-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0B2E47; }
.book-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.book-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(13,60,0,.06), 0 16px 32px rgba(13,60,0,.12); }
.book-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.book-card h3 { font-size: 1.1rem; margin: 0; line-height: 1.35; }
.book-price { margin: 0; font-weight: 600; font-size: 1.25rem; color: var(--green); white-space: nowrap; }
.book-meta { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); background: rgba(54,122,167,.10); border-radius: 99px; padding: 4px 10px 4px 7px; }
.chip .i { width: 16px; height: 16px; }
.chip-green { color: var(--green); background: rgba(54,146,92,.12); }
.book-desc { margin: 12px 0 18px; font-size: 15px; color: var(--muted); flex: 1; }
.book-go { width: 100%; padding: 15px 18px; font-size: 15px; }
.book-go .i { width: 18px; height: 18px; }

/* Help cards and the policy strip */
.book-help { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 20px; }
.book-help-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1.5px solid #E4ECE6; border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.book-help-card:hover, .book-help-card:focus-visible { border-color: var(--green); box-shadow: var(--shadow); color: var(--text); }
.book-help-card > .i { box-sizing: border-box; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(54,146,92,.12); color: var(--green); flex-shrink: 0; }
.book-help-card strong { display: block; font-weight: 600; }
.book-help-card small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.book-note { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 22px 20px 12px; margin-top: 8px; }
.book-note h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin: 0 0 16px; }
.book-note h2 .i { width: 26px; height: 26px; color: var(--blue); }
.book-note-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.book-note-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.book-note-list li > .i { box-sizing: border-box; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: rgba(54,122,167,.10); color: var(--blue); flex-shrink: 0; }
.book-note-list strong { display: block; color: var(--forest); font-weight: 600; }
.book-note-call { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; }
.book-note-call .i { width: 18px; height: 18px; color: var(--blue); }
@media (min-width: 640px) {
  .book-tiles { grid-template-columns: repeat(2, 1fr); }
  .book-tiles li.is-featured { grid-column: 1 / -1; }
  .book-tile.is-featured { min-height: 320px; }
  .book-cards { grid-template-columns: repeat(2, 1fr); }
  .book-go { width: auto; align-self: flex-start; }
  .book-help { grid-template-columns: repeat(3, 1fr); }
  .book-note-list { grid-template-columns: repeat(2, 1fr); }
  .book-panel-copy { padding: 28px 28px 24px; }
}
@media (min-width: 1025px) {
  .book-tiles { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .book-tile { min-height: 320px; }
  .book-tiles li.is-featured { grid-column: 1 / -1; }
  .book-tile.is-featured { min-height: 360px; }
  .book-tile.is-featured .book-tile-text { max-width: 34em; }
  .book-tile-why { display: block; }
  .book-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .book-panel-head { min-height: 260px; }
  .book-note { padding: 28px 32px 16px; }
  .book-note-list { grid-template-columns: repeat(4, 1fr); }
}
.book [hidden] { display: none !important; }
.book-signin { margin: 0 0 8px; font-size: 15px; }

/* Readability and reflow repairs, 2026-10-20. Brand artwork and palette retained. */
:root { --blue-text: #316f98; --green-control: #2f8051; --green-text: #2c774b; }
a, .eyebrow, .btn-ghost { color: var(--blue-text); }
.btn-primary, .header-book, .badge, button[type="submit"] { background-color: var(--green-control); color: #fff; }
.promo-reg { opacity: 1; }
.promo a, .promo a:hover { color: #fff; }
/* Footer headings/links are set directly in "Site chrome: footer" above (white on Float Blue);
   the blue-text/green-text fixes above were tuned for the footer's old light-grey background. */


/* ================= Phone first-screen fixes (Nadeem 69/70, 2026-10-22) ================= */
/* Promo bar: one compact line on phones */
.promo .promo-short { display: none; margin: 0; }
@media (max-width: 700px) {
  .promo { padding: 8px 16px; }
  .promo .promo-full { display: none; }
  .promo .promo-short { display: block; }
  /* Heroes: keep facts + first Book button on the first screen (~70vh cap) */
  .hero, .book-hero { min-height: 0; padding: 44px 0 40px; }
  .hero h1, .book-hero h1 { font-size: 2rem; }
  .hero .lede, .book-hero .lede { font-size: 1rem; }
  .hero .facts { gap: 8px; margin: 16px 0 0; }
  .hero .facts li { min-width: 0; flex: 1 1 0; padding: 8px 10px; }
  .hero .facts strong { font-size: 1.05rem; }
  .hero .facts span { font-size: 11.5px; }
  .hero .cta-row, .book-hero .cta-row { gap: 10px; margin: 18px 0 0; }
  .hero .cta-row .btn, .book-hero .cta-row .btn { flex: 1 1 calc(50% - 5px); padding: 14px 12px; font-size: 14px; }
  .hero .proof, .hero-proof { margin: 14px 0 0; gap: 6px 16px; font-size: 13px; }
}
/* Home hero: tagline on its own line (Nadeem 71) */
.hero-tag { margin: 0 0 14px; font-weight: 600; }
/* Home plans summary block (Nadeem 71) */
.plans-sum p { margin: 0 0 6px; }
.plans-sum .fine { margin: 10px 0 18px; }
/* Blog index thumbnails (Nadeem 74) */
.post-list article .post-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 12px; border-radius: 12px; display: block; }
/* Room walk-through videos (restored: these rules lived in scene.css, removed with the 3D viewer) */
.walks { display: grid; gap: 14px; margin-top: 28px; }
.walks[data-count="1"] { max-width: 960px; margin-left: auto; margin-right: auto; }
.walks[data-count="2"] { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.walk { margin: 0; min-width: 0; }
.walk video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg, 16px); background: #0e1b2b; box-shadow: var(--shadow, 0 8px 24px rgba(13,60,0,.06)); }
.walk figcaption { margin: 8px 2px 0; font-size: 14px; color: var(--muted, #4f6b78); }

/* ================= Formatting pass at 390 / 1440 px (Nadeem 114–132, 2026-10-24) ================= */
/* 116: no single-word last lines in headings (balance here, plus heading_wrap.py joins the last two words) */
h1, h2, h3 { text-wrap: balance; }
/* 115: two plain sections in a row: don't stack both paddings */
.section:not(.alt):not(.cta-band):not(.values) + .section:not(.alt):not(.cta-band):not(.values):not(.pt-0),
.section.alt + .section.alt:not(.pt-0), .theme-deep:has(> .deep-section:last-child:not(.deep-alt)) + .section:not(.alt) { padding-top: clamp(32px, 4vw, 48px); }
@media (min-width: 701px) { .nw { white-space: nowrap; } }
/* 117: opening hours never break inside a time */
.hours dd, .footer-hours dd { white-space: nowrap; }
@media (min-width: 701px) { .hours dt { white-space: nowrap; } }
/* 119: six cards as 3 + 3, five as 3 + 2, instead of a half-empty last row */
@media (min-width: 1024px) {
  .options:has(> :nth-child(5):last-child), .options:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 120: home "Make it a routine" list and terms sit centred under the heading */
.plans-sum { max-width: 720px; margin-inline: auto; }
/* 121: quote form labels line up with their inputs */
.enquire-box form { text-align: left; }
/* 122: blog index in a grid on desktop */
@media (min-width: 1024px) {
  .wrap.narrow:has(> .post-list) { max-width: 1200px; }
  .post-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .post-list article { display: flex; flex-direction: column; }
}
/* 124: the "For example" boxes line up across the plan cards */
.plan .example:first-of-type { margin-top: auto; }
/* 126: breathing room under the service cards */
.cards + .fine, .cards + p.note, .cards + .note { margin-top: 24px; }
/* 128: franchise form: the territory hint goes under its input, so the row stays level */
@media (min-width: 701px) {
  .contact-form label:has(> .fine + input) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .contact-form label:has(> .fine + input) > .fine { grid-row: 3; margin: 0; }
}
/* 129: events: buttons follow the left-aligned list; the photo fills the column */
.events-upcoming .cta-row { justify-content: flex-start; }
/* 131: Chinese headings break between phrases, not inside a word */
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { word-break: keep-all; overflow-wrap: anywhere; }
/* 131/132: on phones the home hero text sits on the bright window: a stronger gradient behind it (every language),
   and eyebrows balance so "2017" never ends up alone */
.hero .eyebrow { text-wrap: balance; }
@media (max-width: 700px) {
  .hero.hero-home::before { background: linear-gradient(180deg, rgba(11,46,71,.55) 0%, rgba(11,46,71,.78) 45%, rgba(11,46,71,.88) 100%); }
}
@media (max-width: 480px) {
  /* 114/132: hero buttons stack full width instead of wrapping in half-width columns */
  .hero .cta-row, .book-hero .cta-row { flex-direction: column; }
  .hero .cta-row .btn, .book-hero .cta-row .btn { flex: none; width: 100%; }
  #calendar .cta-row { flex-direction: column; }
  #calendar .cta-row .btn { width: 100%; }
}
@media (max-width: 420px) {
  /* 125: plan finder results in one column */
  .finder-result { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  /* 118: single-sessions table fits the phone: tighter cells, wrapping headers */
  .table-wrap table.prices th, .table-wrap table.prices td { padding-left: 8px; padding-right: 8px; }
  .table-wrap table.prices thead th { white-space: normal; }
}
/* 129: "Before your class" list and photo side by side; the photo fits its column */
.events-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 881px) { .events-grid { grid-template-columns: 1fr 1fr; } }
.events-grid > img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
/* 127: Our Story: the heading clears the VALLEY lettering on the storefront */
@media (min-width: 881px) {
  .hero-story::before { background: linear-gradient(270deg, rgba(11,46,71,.93) 0%, rgba(11,46,71,.9) 46%, rgba(11,46,71,.55) 60%, rgba(11,46,71,.12) 100%); }
}
/* Long French/Chinese topic options no longer widen the contact form past a phone screen */
.contact-form select { min-width: 0; width: 100%; }
@media (max-width: 600px) { .contact-form { grid-template-columns: minmax(0, 1fr); } }

/* ================= Mobile first (Ali, via Nadeem 157–161, 2026-10-24) ================= */
/* 157: on phones, Menu and Book sit in a bar at the bottom of the screen, in thumb reach. The menu panel
   opens with Services already open (nav.js) and stays clear of the bar. */
.mobile-bar { display: none; }
.mobile-menu[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.mobile-menu[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.mobile-menu[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu .when-open, .mobile-menu[aria-expanded="true"] .when-closed { display: none; }
.mobile-menu[aria-expanded="true"] .when-open { display: inline; }
@media (max-width: 880px) {
  .mobile-bar { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; }
  .mobile-bar .mobile-book { position: static; display: flex; flex: 1; min-height: 54px; font-size: 16px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
  body.nav-open .mobile-bar .mobile-book { display: flex; }
  .mobile-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; font: 500 15px var(--font); color: var(--forest); background: #fff; border: 1.5px solid var(--forest); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.16); cursor: pointer; }
  .mobile-menu:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  body { padding-bottom: 88px; }
  .main-nav { padding-bottom: 96px; }
  .nav-mobile-extras .btn { display: none; }  /* Book is in the bar */
  .nav-mobile-extras { padding-top: 12px; }
}
@media (max-width: 1024px) {
  .menu-link:not(.menu-link-photo) { padding: 12px 4px; min-height: 48px; }
  .main-nav .plain-links a { padding: 10px 0; font-size: 15px; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .main-nav.open { animation: panel-in .18s ease-out; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } }
}
/* 158: the hero's Book button is the obvious tap: full width, taller, first */
@media (max-width: 700px) {
  .hero .cta-row > .btn:first-child, .book-hero .cta-row > .btn:first-child { flex: 1 1 100%; min-height: 56px; font-size: 17px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
  .hero .cta-row > .btn + .btn, .book-hero .cta-row > .btn + .btn { min-height: 46px; }
}
/* 159: home hero on phones: the Book button, then the six services as tiles, then the rest of the intro */
.quick-services { display: none; }
@media (max-width: 700px) {
  .hero-home .hero-copy { display: flex; flex-direction: column; }
  .hero-home .hero-copy > .lede { order: 5; margin: 16px 0 0; }
  .hero-home .hero-copy > .proof { order: 6; }
  .hero-home .cta-row .btn-ghost { display: none; }  /* the tiles do its job */
  .quick-services { display: block; order: 4; margin: 12px 0 0; }
  .quick-services ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .quick-services a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 10px 6px; border-radius: var(--radius); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; font: 500 13px/1.25 var(--font); text-align: center; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .quick-services a:active { background: rgba(255,255,255,.24); }
  .quick-services .i { width: 26px; height: 26px; color: #fff; vertical-align: 0; }
}
/* 161: plans lead with what they're for; credits and visits are the detail */
.plan-name { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green-text); }
.plan-name .card-icon { margin: 0; }
.plan h3 { margin: 0; }
.plan-for { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.plan .plan-price { margin-top: 18px; }
/* 160: phone pass. Compact service cards drop the small icon (the photo already shows the room), so long
   names like "Energy Enhancement System" fit instead of running past the card's edge */
@media (max-width: 600px) {
  .cards .card { grid-template-columns: 112px minmax(0, 1fr); }
  .cards .card .card-icon { display: none; }
  .cards .card .card-body h3 { grid-column: 1 / -1; }
}
/* 160: offer carousel dots are a 44px tap target (the dot itself stays small) */
.offers-dots { gap: 0; }
.offers-dots button { position: relative; margin: 0 8px; }
.offers-dots button::after { content: ""; position: absolute; left: -8px; right: -8px; top: -17px; bottom: -17px; }
/* 160: price-box captions on the phone heroes were 11.5px */
@media (max-width: 700px) { .hero .facts span { font-size: 12.5px; } }
/* 160: events list on phones: a long price (Chinese "2 小时 · $120（原价 $150）") drops under its class name
   instead of running off the screen */
@media (max-width: 480px) {
  .event-list li { flex-wrap: wrap; row-gap: 2px; }
  .event-list li span:last-child { margin-left: auto; }
}

/* ================= Events calendar: a card per date (Daniel, 2026-10-24) ================= */
/* Each class has its own colour (blue Restorative Flow, green Transformational, leaf cacao, sky workshops;
   ember stays for heat): the date tile's tint, the card's edge, the tag and the icons. */
.ev-cal { margin-top: 8px; }
.ev-cal [hidden] { display: none !important; }  /* the filter hides cards and months; their display rules would win */
.ev-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.ev-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(13,60,0,.14); border-radius: 99px; background: #fff; color: var(--forest); font: 500 14px var(--font); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ev-chip:hover { border-color: var(--green); }
.ev-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ev-chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.ev-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--kc); }
.ev-count { font-size: 12.5px; font-weight: 600; opacity: .65; }
.ev-chip[data-kind=""] .ev-dot { display: none; }
.ev-month { display: flex; align-items: center; gap: 16px; margin: 40px 0 16px; font-size: 1.3rem; }
.ev-month::after { content: ""; flex: 1; height: 1px; background: rgba(13,60,0,.12); }
.ev-months > .ev-month:first-child { margin-top: 0; }
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ev-chip, .ev { --kc: var(--blue); --kt: rgba(54,122,167,.10); --kx: var(--blue-text); }
[data-kind="transformational"] { --kc: var(--green); --kt: rgba(54,146,92,.12); --kx: var(--green-text); }
[data-kind="cacao"] { --kc: var(--leaf); --kt: rgba(137,201,138,.2); --kx: var(--forest); }
[data-kind="special"] { --kc: var(--sky); --kt: rgba(100,174,211,.14); --kx: var(--blue-text); }
.ev { display: grid; grid-template-columns: 78px 176px minmax(0, 1fr) auto; grid-template-areas: "date photo body end"; align-items: center; gap: 22px; padding: 12px 22px 12px 12px; background: #fff; border-radius: var(--radius-lg); border-left: 4px solid var(--kc); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
@media (hover: hover) { .ev:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,42,32,.12); } }
.ev-date { grid-area: date; display: grid; align-content: center; justify-items: center; gap: 3px; align-self: stretch; min-height: 88px; margin: 0; border-radius: 12px; background: var(--kt); color: var(--forest); text-align: center; }
.ev-wd, .ev-mon { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kx); }
.ev-day { font-size: 30px; font-weight: 600; line-height: 1; }
.ev-photo { grid-area: photo; position: relative; margin: 0; }
.ev-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.ev-next { position: absolute; left: 8px; top: 8px; padding: 5px 10px; border-radius: 99px; background: #fff; color: var(--forest); font-size: 12px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.ev-body { grid-area: body; min-width: 0; }
.ev-tag { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kx); }
.ev-title { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--forest); }
.ev-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 14.5px; color: var(--muted); }
.ev-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.ev-meta .i { width: 18px; height: 18px; vertical-align: 0; color: var(--kc); }
.ev-end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ev-end .ev-price { margin: 0; font-size: 15px; font-weight: 600; color: var(--forest); white-space: nowrap; }
.ev-end .btn { white-space: nowrap; }
/* phones: the photo on the left with the date tile on it, the words beside it, then price and Book across */
@media (max-width: 760px) {
  .ev-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 22px; padding: 2px 16px; scrollbar-width: none; }
  .ev-filters::-webkit-scrollbar { display: none; }
  .ev-chip { flex: none; }
  .ev { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "photo body" "end end"; gap: 12px 14px; padding: 12px; }
  .ev-photo img { aspect-ratio: auto; height: 112px; }
  .ev-date { grid-area: photo; z-index: 1; align-self: start; justify-self: start; min-height: 0; margin: 6px; padding: 5px 7px 6px; gap: 0; background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  .ev-day { font-size: 20px; }
  .ev-wd, .ev-mon { font-size: 11px; letter-spacing: .06em; }
  .ev-next { top: auto; bottom: 6px; left: 6px; padding: 4px 8px; font-size: 11px; }
  .ev-title { font-size: 1rem; margin-bottom: 6px; }
  .ev-meta { flex-direction: column; gap: 4px; font-size: 13.5px; }
  .ev-end { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--bg-soft); }
  .ev-end .btn { flex: 1; max-width: 240px; min-height: 46px; }
  .ev-end .ev-price + .btn { margin-left: auto; }
}

/* ================= UX scan must-ship (Daniel, 2026-10-24) ================= */
/* Item 1: one line under the home hero button saying what the $99 intro is */
.hero-home .hero-note { color: rgba(255,255,255,.82); margin: 10px 0 0; font-size: 14px; }
@media (min-width: 701px) { .hero-home .cta-row { margin-bottom: 10px; } .hero-home .hero-note { margin: 0 0 28px; } }
/* Item 2: a Book link in each single-sessions price row */
a.row-book { font-weight: 500; white-space: nowrap; }
/* Item 4: book.html opens on the choice of service; the tiles reach the first screen at every width */
.book-hero { min-height: 0; }
.book-hero .cta-row { margin-bottom: 18px; }
.book-hero .hero-proof strong { display: inline; font-size: 1rem; margin-right: 4px; }
.book { padding-top: clamp(24px, 4vw, 48px); }
.book-q .eyebrow, .book-q p:last-child { display: none; }
@media (min-width: 701px) {
  .book-hero { padding: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 36px); }
  .book-hero h1 { font-size: clamp(2.25rem, 3.6vw, 3rem); }
}
@media (max-width: 700px) {
  .book-hero { padding: 28px 0 22px; }
  .book-hero .hero-bg img { object-position: 50% 78%; }  /* the short hero shows the lit end of the corridor */
  .book-hero .cta-row .btn-ghost { display: none; }  /* the intro is the first tile right below */
  .book-hero .hero-proof { margin-top: 12px; }
  .book { padding-top: 18px; }
  .book-q { margin-bottom: 14px; }
}
/* Item 5: the 'Ask us' panel says it is an AI assistant, and on phones it stops above the Menu/Book bar */
.ask-titles { min-width: 0; }
.ask-note { margin: 2px 0 0; font: 12px/1.35 var(--font); color: var(--muted); }
.ask-note a { color: var(--blue); }
@media (max-width: 880px) {
  .ask-panel { height: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Events: class and rental photos, room request form (Nov 1) */
.class-card .class-photo { width: calc(100% + 56px); max-width: none; margin: -28px -28px 20px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; display: block; }
.group-card .class-photo { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; display: block; }
.room-form { max-width: 880px; margin: 0 auto; }
/* Mobile minimal hero v2 (Daniel, 2 Nov 2026, reworked after pulling the 1 Nov version): on phones the photo
   or video is the star, with the headline, one Book button and its one line of fine print over a light bottom
   scrim. Everything else in the hero (eyebrow, crumbs, icon, tagline, intro, facts, tiles, reviews line, second
   button) is hidden there and nav.js shows a copy of it just below the hero in the SAME dark band colour as the
   hero's own gradient end, so the photo flows straight into the band with no seam, line or colour-block cut.
   Applies to sections marked .hero-min (home, services, every service and info page). Desktop is unchanged. */
.hero-more { display: none; }
@media (max-width: 768px) {
  .hero.hero-min { min-height: max(460px, calc(100svh - 150px)); padding: 0 0 100px; align-items: end; }  /* clears the fixed Menu / Book now bar */
  .hero.hero-min .hero-bg, .hero.hero-min .hero-video { inset: 0; height: 100%; }
  .hero.hero-min::before, .hero.hero-min.hero-end::before, .hero.hero-min.hero-home::before {
    background: linear-gradient(180deg, rgba(11,46,71,0) 0%, rgba(11,46,71,0) 38%, rgba(11,46,71,.52) 64%, rgba(11,46,71,.94) 92%, #0B2E47 100%); }
  .hero.hero-min .hero-fx { display: none; }
  .hero.hero-min .hero-copy { display: block; max-width: none; }
  .hero.hero-min .hero-copy > :not(h1):not(.cta-row):not(.hero-note) { display: none; }
  .hero.hero-min .cta-row > .btn ~ .btn { display: none; }
  .hero.hero-min h1 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); line-height: 1.12; margin: 0 0 16px; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
  .hero.hero-min .cta-row { margin: 0; }
  .hero.hero-min .cta-row > .btn:first-child { flex: 1 1 100%; }
  .hero.hero-min .hero-note { margin: 10px 0 0; color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
  .hero-more { display: block; background: #0B2E47; color: #fff; padding: 28px 0 36px; }
  .hero-more.hero-more-deep { background: var(--deep-bg, #367AA7); }
  .hero-more .hero-copy > :first-child { margin-top: 0; }
  .hero-more .eyebrow, .hero-more .deep-eyebrow { color: var(--mist-blue); }
  .hero-more .lede, .hero-more .deep-lede, .hero-more .hero-tag, .hero-more .hero-note { color: rgba(255,255,255,.88); font-size: 1rem; }
  .hero-more .xlink { color: #fff; }
  .hero-more .facts { gap: 8px; margin: 16px 0 0; }
  .hero-more .facts li { min-width: 0; flex: 1 1 0; padding: 8px 10px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.75); }
  .hero-more .facts strong, .hero-more .proof strong { color: #fff; }
  .hero-more .facts span { font-size: 11.5px; color: rgba(255,255,255,.75); }
  .hero-more .deep-facts { gap: 16px 24px; }
  .hero-more .proof { color: rgba(255,255,255,.8); margin: 16px 0 0; gap: 6px 16px; font-size: 13px; }
  .hero-more .cta-row { margin: 18px 0 0; }
  .hero-more .cta-row .btn { flex: 1 1 100%; }
  .hero-more .btn-ghost { border-color: rgba(255,255,255,.75); color: #fff; }
  .hero-more .quick-services { display: block; margin: 16px 0 0; }
}
/* Holiday banner on phones: one slim line, the short text plus a single Buy link */
@media (max-width: 768px) {
  .promo.hol-promo { padding-top: 6px; padding-bottom: 6px; font-size: 13px; line-height: 1.3; }
  .promo.hol-promo .promo-short { display: inline; margin: 0; }
  .promo.hol-promo .hol-links a + a { display: none; }
  .promo.hol-promo .hol-links { margin-left: 8px; }
  .promo.hol-promo .hol-chip { font-size: 10px; padding: 1px 7px; }
}