/* ============================================================================
   Moana Still — a demonstration studio site by SmallPie.
   Its own design language, and deliberately not SmallPie's: white ground and
   vivid blue instead of cream and navy, one heavy geometric family instead of
   a three-part editorial stack, soft rounded cards instead of hairline rules,
   pill badges instead of letterspaced eyebrows.
   ========================================================================= */

:root {
  --white:  #FFFFFF;
  --tint:   #F1F6FF;   /* the palest blue, used as a second ground */
  --tint-2: #E2ECFF;
  --blue:   #1E5EFF;   /* the brand */
  --blue-d: #0B39B8;
  --deep:   #06214A;   /* dark sections */
  --deep-2: #0B2E63;
  --sky:    #8FB8FF;
  --ink:    #0C1B33;
  --grey:   #5A6B85;
  --line:   #DCE6F7;
  --line-d: rgba(255,255,255,.16);

  --f: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2,.7,.3,1);
  --r:  22px;
  --r-s: 14px;
  --sh:   0 6px 20px -10px rgba(12,27,51,.16);
  --sh-l: 0 24px 60px -30px rgba(12,27,51,.34);
}

* { box-sizing: border-box; }
/* [hidden] only sets display:none in the UA sheet, so ANY author display rule
   silently beats it. Several panels here are grids toggled via .hidden, which
   means they would never actually hide. This wins for all of them. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--f); font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }

/* heavy, tight, confident: the opposite of an editorial serif page */
h1, h2, h3 { font-family: var(--f); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(40px, 6.6vw, 78px); }
h2 { font-size: clamp(28px, 4.2vw, 50px); }
h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 700; letter-spacing: -.02em; }
em { font-style: normal; color: var(--blue); }
.sec--blue em { color: var(--sky); }

.wrap { width: min(1220px, calc(100% - clamp(22px, 5vw, 72px))); margin-inline: auto; }
.wrap--narrow { width: min(720px, calc(100% - clamp(22px, 5vw, 72px))); }
.wrap--mid { width: min(880px, calc(100% - clamp(22px, 5vw, 72px))); margin-inline: auto; }

/* pill badges replace the letterspaced eyebrow entirely */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  padding: 7px 15px; border-radius: 999px;
  background: var(--tint); color: var(--blue); width: fit-content;
}
.pill--blue { background: var(--blue); color: #fff; }
.pill--onblue { background: rgba(255,255,255,.14); color: var(--sky); }

.lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: var(--grey); max-width: 54ch; }
.sec { padding: clamp(60px, 8vw, 128px) 0; }
.sec--tint { background: var(--tint); }
.sec--blue { background: var(--deep); color: #fff; }
.sec--blue .lede, .sec--blue > .wrap > .sechead p { color: rgba(255,255,255,.66); }
.sechead { max-width: 58ch; margin-bottom: clamp(28px, 3.6vw, 52px); display: grid; gap: 15px; }
.sechead--mid { text-align: center; justify-items: center; margin-inline: auto; }

/* ---- buttons: solid pills, generous ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f); font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  padding: 15px 28px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn--fill { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -12px rgba(30,94,255,.7); }
.btn--fill:hover { background: var(--blue-d); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(30,94,255,.75); }
.btn--line { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn--line:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-d); color: #fff; background: transparent; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--sm { padding: 11px 20px; font-size: 14px; background: var(--blue); color: #fff; }
.btn--sm:hover { background: var(--blue-d); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

/* ---- demo badge ---- */
.demo-tag {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f); font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  background: var(--blue); color: #fff; border: 0;
  box-shadow: 0 8px 22px -10px rgba(30,94,255,.8); transition: background .25s, transform .25s var(--ease);
}
.demo-tag:hover { background: var(--blue-d); transform: translateX(-50%) translateY(-1px); }
.demo-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
/* Leaflet ships its own font stack, so the +/- buttons render in Lucida
   Console against a page that is otherwise one family. */
.leaflet-container,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out { font-family: var(--f) !important; }
.leaflet-control-zoom-in,
.leaflet-control-zoom-out { font-weight: 500; }

/* Centred at the top it lands straight on the logo and the Book button once
   the bar is narrow, so drop it to a corner instead of shrinking it. */
@media (max-width: 860px) {
  .demo-tag { top: auto; bottom: 16px; left: 16px; transform: none; }
  .demo-tag:hover { transform: translateY(-1px); }
}

/* ---- modal: small enough that it never scrolls, so the close never leaves ---- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 5vw, 40px); }
.modal__scrim { position: absolute; inset: 0; background: rgba(6,33,74,.55); backdrop-filter: blur(3px); cursor: pointer; }
.modal__box {
  position: relative; width: min(440px, 100%);
  background: var(--white); border-radius: var(--r); padding: clamp(24px, 4vw, 32px);
  display: grid; gap: 13px; box-shadow: var(--sh-l); animation: rise .35s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal__box h2 { font-size: clamp(22px, 3vw, 28px); }
.modal__box p { font-size: 14.5px; color: var(--grey); line-height: 1.6; }
.modal__box a { color: var(--blue); font-weight: 700; }
.modal__foot { font-size: 13px !important; }
.modal__box .btn { justify-self: stretch; margin-top: 4px; }
.modal__x {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--tint); border: 0; font-size: 22px; line-height: 1;
  color: var(--grey); cursor: pointer; transition: background .2s, color .2s;
}
.modal__x:hover { background: var(--blue); color: #fff; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: 20px;
  padding: 14px clamp(18px, 4vw, 48px);
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.nav__glyph { width: 26px; height: 26px; border-radius: 9px; background: var(--blue); position: relative; }
.nav__glyph::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid #fff; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--grey); transition: color .2s; }
.nav__links a:hover { color: var(--blue); }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(26px, 4.5vw, 64px); align-items: center; padding: clamp(44px, 7vw, 96px) clamp(22px, 5vw, 72px) clamp(44px, 6vw, 88px); max-width: 1380px; margin-inline: auto; }
.hero h1 { margin: 18px 0 20px; }
.hero__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero__facts { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.hero__facts > div { flex: 1 1 140px; background: var(--tint); border-radius: var(--r-s); padding: 16px 18px; }
.hero__facts b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: var(--blue); }
.hero__facts span { font-size: 12.5px; color: var(--grey); font-weight: 500; line-height: 1.4; }
.hero__art { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; align-items: end; }

/* image placeholders, labelled for the swap */
.ph { background: var(--tint); border-radius: var(--r); display: grid; place-items: center; padding: 18px; text-align: center; aspect-ratio: 1; border: 2px dashed var(--tint-2); }
.ph span { font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--blue); opacity: .62; }
.ph--tall { aspect-ratio: 3 / 4.4; }
.ph--sm { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 10; }
.sec--tint .ph { background: var(--white); border-color: var(--tint-2); }

/* ---- chips ---- */
.chip {
  font-family: var(--f); font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  padding: 11px 19px; border-radius: 999px; cursor: pointer;
  background: var(--tint); color: var(--ink); border: 2px solid transparent;
  transition: all .22s var(--ease);
}
.chip:hover { background: var(--tint-2); }
.chip.is-on { background: var(--blue); color: #fff; }
.sec--blue .chip { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.sec--blue .chip:hover { background: rgba(255,255,255,.18); color: #fff; }
.sec--blue .chip.is-on { background: var(--blue); color: #fff; }

/* ---- 01 breathe ---- */
.breath__pick { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.6vw, 44px); }
.breath__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4.5vw, 60px); align-items: center; }
.breath__ring { position: relative; width: min(400px, 82vw); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }

/* three concentric waves, staggered, so the ring pulses outward rather than
   simply growing. They inherit the phase duration so they stay in step. */
.br-wave {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(143,184,255,.22);
  transform: scale(.5); opacity: .5;
  transition: transform var(--phase, 4s) cubic-bezier(.37,0,.28,1), opacity var(--phase, 4s) ease, border-color .6s;
}
.br-wave--2 { transition-delay: .12s; border-color: rgba(143,184,255,.15); }
.br-wave--3 { transition-delay: .24s; border-color: rgba(143,184,255,.09); }
.breath__ring.is-big .br-wave { transform: scale(1); opacity: 1; border-color: rgba(143,184,255,.5); }
.breath__ring.is-big .br-wave--2 { transform: scale(.94); }
.breath__ring.is-big .br-wave--3 { transform: scale(.88); }

/* the soft core: brightens and swells on the inhale, settles on the exhale */
.br-core {
  position: absolute; inset: 12%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(120,164,255,.55), rgba(30,94,255,.28) 46%, rgba(6,33,74,0) 72%);
  transform: scale(.62); opacity: .7;
  transition: transform var(--phase, 4s) cubic-bezier(.37,0,.28,1), opacity var(--phase, 4s) ease;
}
.breath__ring.is-big .br-core { transform: scale(1); opacity: 1; }

/* a hairline arc that sweeps once per phase, so time left is visible */
.br-arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.br-arc__track { fill: none; stroke: rgba(143,184,255,.14); stroke-width: 2; }
.br-arc__fill {
  fill: none; stroke: url(#brGrad); stroke: #8FB8FF; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(143,184,255,.65));
}

/* a small light travelling the arc, so the eye has something to follow */
.br-orbit { position: absolute; inset: 0; border-radius: 50%; }
.br-orbit i {
  position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: #DCE9FF;
  box-shadow: 0 0 12px 3px rgba(143,184,255,.85);
  transform: translateY(calc(min(400px, 82vw) / -2 + 8px));
}
.breath__ring.is-idle .br-orbit, .breath__ring.is-idle .br-arc__fill { opacity: 0; }
.br-orbit, .br-arc__fill { transition: opacity .5s ease; }

.breath__read { position: relative; z-index: 2; text-align: center; display: grid; gap: 2px; }
.breath__read b {
  display: block; font-size: clamp(15px, 1.7vw, 19px); font-weight: 500;
  letter-spacing: .01em; color: rgba(255,255,255,.82);
  transition: opacity .35s ease;
}
/* light and tabular: the count must not jump width as digits change */
.breath__read span {
  font-size: clamp(64px, 9vw, 96px); font-weight: 200; line-height: 1;
  letter-spacing: -.05em; color: #fff;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  text-shadow: 0 0 34px rgba(143,184,255,.5);
}

.breath__name { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.035em; }
.breath__note { margin-top: 12px; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.65; }
.breath__meta { display: grid; gap: 8px; margin: 22px 0; }
.breath__meta > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; background: rgba(255,255,255,.07); border-radius: var(--r-s); }
.breath__meta dt { font-size: 13px; color: rgba(255,255,255,.55); margin: 0; font-weight: 500; }
.breath__meta dd { margin: 0; font-size: 14px; font-weight: 700; }

/* ---- 02 timetable ---- */
.tt__filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 24px; }
.tt { display: grid; gap: 22px; }
.tt__day { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.tt__dayname { font-size: 15px; font-weight: 800; letter-spacing: -.02em; padding-top: 16px; color: var(--ink); }
.tt__rows { display: grid; gap: 9px; }
.tt__row {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 16px; align-items: center;
  width: 100%; text-align: left; padding: 15px 20px; border-radius: var(--r-s);
  background: var(--tint); border: 2px solid transparent; cursor: pointer;
  font: inherit; color: inherit; transition: all .22s var(--ease);
}
.tt__row:hover { background: var(--tint-2); transform: translateX(3px); }
.tt__row.is-on { background: var(--blue); color: #fff; }
.tt__time { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.tt__name { font-size: 15px; font-weight: 700; }
.tt__who { font-size: 13px; color: var(--grey); font-weight: 500; }
.tt__row.is-on .tt__who { color: rgba(255,255,255,.72); }
.tt__tag { font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px; background: var(--white); color: var(--blue); }
.tt__row.is-on .tt__tag { background: rgba(255,255,255,.2); color: #fff; }
.tt__full { opacity: .5; cursor: not-allowed; }
.tt__full:hover { transform: none; background: var(--tint); }

.book { margin-top: 26px; border-radius: var(--r); padding: clamp(22px, 3vw, 32px); background: var(--white); box-shadow: var(--sh-l); border: 1px solid var(--line); }
.book__body { display: grid; gap: 13px; max-width: 520px; }
.book__spots { display: flex; align-items: center; gap: 14px; }
.book__bar { flex: 1; height: 8px; border-radius: 8px; background: var(--tint-2); overflow: hidden; }
.book__bar i { display: block; height: 100%; border-radius: 8px; background: var(--blue); transition: width .5s var(--ease); }
.book__spots b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.field { display: grid; gap: 7px; }
.field span { font-size: 13px; font-weight: 700; color: var(--ink); }
.field input, .field textarea {
  font: inherit; font-size: 15px; padding: 14px 16px; border-radius: var(--r-s);
  border: 2px solid var(--line); background: var(--white); color: var(--ink); width: 100%;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.book__done { display: grid; gap: 9px; }
.book__tick { width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 22px; }

/* ---- 03 class finder, as a drawn timeline ---- */
/* Node and card are two columns of the same grid, and the rail is positioned
   from the same origin as column one. Nothing can drift out of alignment. */
.quiz { --node: clamp(36px, 4.6vw, 46px); --tl-gap: clamp(16px, 2.2vw, 26px); display: grid; gap: 18px; }
.quiz__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 4vw, 44px); }

.tl__rail { position: absolute; left: calc(var(--node) / 2 - 1.5px); top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--tint-2); overflow: hidden; }
.tl__rail i { display: block; width: 100%; height: var(--fill, 0%); border-radius: 3px;
  background: linear-gradient(180deg, var(--blue), #4E82FF);
  transition: height 1.1s cubic-bezier(.65,0,.35,1); }

.tl__step, .quiz__result { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); gap: var(--tl-gap); align-items: start; }
.tl__step { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.tl__node {
  position: relative; z-index: 1; width: var(--node); height: var(--node);
  display: grid; place-items: center; border-radius: 50%;
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  background: var(--white); color: var(--grey); border: 3px solid var(--tint-2);
  transition: background .45s var(--ease), color .45s, border-color .45s, transform .45s var(--ease), box-shadow .45s;
}
.tl__step.is-now .tl__node { border-color: var(--blue); color: var(--blue); transform: scale(1.06); box-shadow: 0 0 0 6px rgba(30,94,255,.12); }
.tl__step.is-done .tl__node { background: var(--blue); border-color: var(--blue); color: #fff; }
.tl__card { background: var(--white); border-radius: var(--r); padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--sh); transition: opacity .4s, box-shadow .3s, background .4s; }
.tl__step.is-wait .tl__card { opacity: .5; }
.tl__step.is-done .tl__card { box-shadow: none; background: rgba(255,255,255,.62); }
.tl__q { font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: -.025em; }
.tl__hint { font-size: 13.5px; color: var(--grey); margin-top: 5px; }
.tl__opts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px; }

/* the answer is the final node on the same rail */
.quiz__result { animation: rise .5s var(--ease) both; }
.tl__node--end { background: var(--blue); border-color: var(--blue); color: #fff; font-size: 17px; animation: pop .5s var(--ease) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.tl__endcard { background: var(--deep); color: #fff; border-radius: var(--r); padding: clamp(24px, 3.4vw, 36px); display: grid; gap: 11px; }
.tl__endcard h3 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; }
.tl__endcard p { color: rgba(255,255,255,.72); }
.tl__said { font-size: 13px !important; color: rgba(255,255,255,.5) !important; }
.tl__endcard .btn { justify-self: start; margin-top: 8px; }
.quiz__reset { justify-self: center; }

/* ---- 04 teachers ---- */
.teach { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.teach__card { text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; display: grid; gap: 11px; }
.teach__card .ph { aspect-ratio: 3 / 4; transition: transform .3s var(--ease), border-color .3s; }
.teach__card:hover .ph { transform: translateY(-5px); border-color: var(--sky); }
.teach__card.is-on .ph { border-style: solid; border-color: var(--blue); }
.teach__nm { font-size: 18px; font-weight: 800; letter-spacing: -.025em; }
.teach__ro { font-size: 13px; color: var(--grey); font-weight: 500; }
.teach__panel { margin-top: 24px; border-radius: var(--r); background: var(--tint); padding: clamp(24px, 3.4vw, 36px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); animation: rise .4s var(--ease); }
.teach__panel h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-top: 6px; }
.teach__bio { color: var(--grey); margin-top: 11px; line-height: 1.7; }
.teach__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.teach__tags span { font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; background: var(--white); color: var(--blue); }
.teach__next { display: grid; gap: 8px; align-content: start; background: var(--white); border-radius: var(--r-s); padding: 18px 20px; }
.teach__next dt { font-size: 12.5px; font-weight: 700; color: var(--grey); }
.teach__next ul { margin: 0; padding: 0; }
.teach__next li { list-style: none; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; }

/* ---- 05 plans ---- */
.plans__toggle { display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.1); margin-bottom: 26px; }
.plans__toggle button { font: inherit; font-size: 14px; font-weight: 700; padding: 11px 24px; border-radius: 999px; border: 0; background: none; color: rgba(255,255,255,.62); cursor: pointer; transition: all .25s var(--ease); }
.plans__toggle button.is-on { background: var(--blue); color: #fff; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; }
.plan { background: rgba(255,255,255,.06); border: 2px solid transparent; border-radius: var(--r); padding: clamp(22px, 2.6vw, 30px); display: grid; gap: 11px; align-content: start; transition: all .25s var(--ease); }
.plan:hover { background: rgba(255,255,255,.1); }
.plan--pick { border-color: var(--blue); background: rgba(30,94,255,.16); }
.plan__nm { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
.plan__pr { font-size: 42px; font-weight: 800; letter-spacing: -.05em; color: var(--sky); line-height: 1; }
.plan__pr small { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.55); }
.plan ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.plan li { font-size: 14px; color: rgba(255,255,255,.76); padding-left: 24px; position: relative; }
.plan li::before { content: '✓'; position: absolute; left: 0; top: -1px; font-size: 13px; font-weight: 800; color: var(--sky); }
.plans__note { margin-top: 22px; font-size: 14px; color: rgba(255,255,255,.55); }

/* ---- services ---- */
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.svc__i { display: grid; gap: 9px; align-content: start; background: var(--tint); border-radius: var(--r); padding: clamp(22px, 2.6vw, 30px); transition: transform .25s var(--ease); }
.svc__i:hover { transform: translateY(-4px); }
.svc__n { font-size: 13px; font-weight: 800; color: var(--blue); }
.svc__i p { font-size: 14.5px; color: var(--grey); line-height: 1.65; }

/* ---- gallery ---- */
.gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.gal .ph--wide { grid-column: span 2; }

/* ---- visit ---- */
.visit { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.map { height: clamp(340px, 44vw, 500px); border-radius: var(--r); overflow: hidden; background: var(--tint); z-index: 1; box-shadow: var(--sh); }
.map__fallback { padding: 20px; font-size: 14px; color: var(--grey); }
.leaflet-container { font-family: var(--f); background: var(--tint); }
.pin { display: grid; place-items: center; }
.pin__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--blue); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--blue), 0 4px 12px rgba(30,94,255,.5); }
.info { display: grid; gap: 9px; margin: 0 0 24px; }
.info > div { display: grid; grid-template-columns: 108px 1fr; gap: 16px; padding: 14px 18px; background: var(--tint); border-radius: var(--r-s); }
.info dt { font-size: 13px; font-weight: 700; color: var(--grey); margin: 0; }
.info dd { margin: 0; font-size: 14.5px; font-weight: 500; }
.info a { color: var(--blue); text-decoration: none; font-weight: 700; }
.form { display: grid; gap: 13px; padding: clamp(22px, 3vw, 30px); border-radius: var(--r); background: var(--white); box-shadow: var(--sh-l); border: 1px solid var(--line); }
.form__note { font-size: 14px; color: var(--blue); font-weight: 600; }

/* ---- cta + footer ---- */
.cta { text-align: center; }
.cta .wrap { display: grid; gap: 15px; justify-items: center; }
.cta__acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.foot { padding: 30px 0 40px; border-top: 1px solid var(--line); }
.foot__in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--grey); font-weight: 500; }
.foot__demo a { color: var(--blue); font-weight: 700; }

/* ---- responsive ---- */
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .breath__stage, .visit, .teach__panel { grid-template-columns: 1fr; }
  .nav__links { display: none; }
}
@media (max-width: 620px) {
  .tt__day { grid-template-columns: 1fr; gap: 10px; }
  .tt__dayname { padding-top: 0; }
  .tt__row { grid-template-columns: 66px 1fr; }
  .tt__tag { grid-column: 2; justify-self: start; }
  .gal .ph--wide { grid-column: span 1; }
  .info > div { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .br-wave, .br-core { transition: none !important; }
}

/* ---- motion ----------------------------------------------------------- */
/* Elements are only hidden once JS has marked them, so a page with no JS or
   a blocked observer still shows everything. */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.rise.in { opacity: 1; transform: none; }

/* Soft colour behind the hero. Radial gradients that fade to nothing rather
   than blurred solid circles, so there is no edge to be cut: the hero no
   longer needs to clip them and they can bleed off the page cleanly. */
/* The glow layer is masked so the colour fades to nothing before the hero
   ends. Without it the opaque section below simply covers the orbs and you
   get a hard horizontal line across the page. */
.hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 78%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 78%, transparent 96%); }
.orb { position: absolute; border-radius: 50%; pointer-events: none; }
.orb--1 { width: min(680px, 88vw); aspect-ratio: 1; top: -32%; right: -14%;
  background: radial-gradient(circle at 50% 50%, rgba(30,94,255,.22) 0%, rgba(30,94,255,.10) 38%, rgba(30,94,255,0) 68%);
  animation: drift1 22s ease-in-out infinite; }
.orb--2 { width: min(520px, 76vw); aspect-ratio: 1; bottom: -26%; left: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(143,184,255,.32) 0%, rgba(143,184,255,.13) 40%, rgba(143,184,255,0) 70%);
  animation: drift2 27s ease-in-out infinite; }
.orb--3 { width: min(380px, 62vw); aspect-ratio: 1; top: 34%; left: 42%;
  background: radial-gradient(circle at 50% 50%, rgba(78,130,255,.16) 0%, rgba(78,130,255,0) 66%);
  animation: drift3 19s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-46px,38px) scale(1.1); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(52px,-34px) scale(1.06); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(.94); opacity: .8; } 50% { transform: translate(-30px,-26px) scale(1.08); opacity: 1; } }
.hero { position: relative; }
/* :not(.orb) matters: a bare .hero > * would beat .orb's absolute positioning
   and drop the decorative blobs into the layout as 420px blocks */
.hero > *:not(.hero__glow) { position: relative; z-index: 1; }

/* the breathing ring gets a slow halo so the section is alive before you start */
.breath__ring::after { content: ''; position: absolute; inset: -8%; border-radius: 50%; border: 1px solid rgba(143,184,255,.18); animation: halo 7s ease-in-out infinite; pointer-events: none; }
@keyframes halo { 0%,100% { transform: scale(.94); opacity: .5; } 50% { transform: scale(1.04); opacity: .9; } }

/* nav links grow an underline from the left */
.nav__links a { position: relative; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; border-radius: 2px; background: var(--blue); transition: right .3s var(--ease); }
.nav__links a:hover::after { right: 0; }

/* the booking bar shimmers once when a class is chosen */
.book__bar i { position: relative; overflow: hidden; }
.book__bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: sweep 1.6s var(--ease) .3s; }
@keyframes sweep { to { transform: translateX(100%); } }

/* cards lift a touch on hover, consistently */
.svc__i, .plan, .teach__card .ph, .tt__row, .btn { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; }
  .orb, .book__bar i::after { animation: none !important; }
  .br-wave, .br-core, .br-arc__fill, .br-orbit { transition: none !important; }
  .tl__rail i { transition: none !important; }
}