:root{--deep:#0e2a3a;--ocean:#163f52;--teal:#256a75;--aqua:#7fc8c9;--foam:#dff1f0;--sand:#ede4d3;--cream:#f2ebdf;--gold:#c9a45c;--ink:#122430;--dim:#4c6270;--line:rgba(14,42,58,.12);}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--cream);background-image:radial-gradient(1200px 600px at 12% -10%,rgba(127,200,201,.16),transparent 60%),radial-gradient(900px 500px at 100% 20%,rgba(201,164,92,.10),transparent 60%);background-attachment:fixed;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-.01em;line-height:1.1}
h1{font-size:clamp(42px,6vw,76px)} h2{font-size:clamp(32px,4.2vw,52px)} h3{font-size:clamp(22px,2.4vw,28px)}
a{color:inherit;text-decoration:none}
.wrap{width:min(1160px,92vw);margin:0 auto}
header{position:sticky;top:0;z-index:60;background:rgba(250,246,238,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;height:74px;gap:16px}
.logo{font-family:'Cormorant Garamond',serif;font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:var(--deep);white-space:nowrap}
.logo em{font-style:italic;color:var(--teal);text-transform:none;letter-spacing:0;margin-left:6px}
/* The site standard (Andre 9/7, amended 9/17): a hamburger opening a slide-in panel of pill links, plus pill
   navigation across the top of every page. The hamburger and the panel sit on the LEFT on desktop and on the
   RIGHT on a phone; the flip lives in the 980px block further down, next to the panel it moves. */
/* Icon geometry, rebuilt 2026-09-17 (Andre: "the bottom line of the hamburger icon is cropped off so it looks
   unsymmetrical and weird ... when you click on it, it shows the full line"). The old glyph was a flex column
   with justify-content:center, so the three arms were placed by dividing the leftover height in half. That
   division is only a whole number while every input stays even, and any of them can change: the button shrinks
   to 40px under 400px wide, the header row is 66px on a phone and 74px above it, a 1px border sat inside the
   border-box. One odd number anywhere and a 2px hairline lands on a half pixel, which a phone renders as a
   faint or eaten line while an emulator at deviceScaleFactor 1 shows it perfectly. Placing the arms by hand
   removes the division entirely: top is 10px, 18px and 26px from the button's own top edge, full stop, at any
   box size, any header height, any screen. Nothing is inherited, nothing is halved, nothing can land on .5.
   The glyph also sits 3px higher than before with 16px of clear button under the bottom arm instead of 13px,
   which is the "slide it up a little" he asked for. */
.tog{position:relative;display:block;width:44px;height:44px;box-sizing:border-box;overflow:visible;line-height:0;background:none;border:0;border-radius:12px;cursor:pointer;padding:0;order:-1;flex:none;-webkit-appearance:none;appearance:none}
.tog:hover{background:rgba(14,42,58,.06)}
/* 3px lines, not 2 (Andre 2026-09-21, his PC: "the top and middle line are really thin and the bottom line is
   really thick"). Reproduced exactly at 90 percent browser zoom: a 2px line scaled to 1.8px lands on a different
   fraction of a device pixel for each of the three (their pitch of 8px scales to 7.2, so the phase drifts 0.2px
   per line) and Chrome snaps one to a single faint row and the next to two solid rows. Whole-pixel placement
   only helps at integer zoom. A 3px line scaled to 2.7 can never collapse below two solid rows, so the three stay
   visibly equal at every zoom Chrome offers. Pitch is 9px (3 line + 6 gap), so the open-state travel is 9px. */
.tog span{position:absolute;left:11px;right:11px;height:3px;border-radius:1.5px;background:var(--deep);transition:transform .35s ease,opacity .3s ease;transform-origin:center}
.tog span:nth-child(1){top:9px} .tog span:nth-child(2){top:18px;background:var(--teal)} .tog span:nth-child(3){top:27px}
/* The X must travel the REAL distance between the lines, not an eyeballed one (Andre 2026-09-17: the icon
   "looks unsymmetrical and weird"). The lines are 2px tall and their tops are 8px apart, so their centres are
   8px apart and each arm has to move exactly 8px to meet in the middle. It was 7px, which left the two strokes
   2px apart and crossing above centre, giving a lopsided X. If the arm tops above ever change, this must change
   with them: the travel is the spacing between two arm tops. */
.tog[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)} .tog[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)} .tog[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.pills{display:flex;gap:6px;margin:0 auto;align-items:center;justify-content:center;flex-wrap:wrap}
.pills a{padding:8px 15px;border-radius:999px;border:1px solid var(--line);font-size:13px;letter-spacing:.04em;color:var(--deep);background:rgba(255,255,255,.55);transition:.25s;white-space:nowrap}
.pills a:hover{border-color:var(--teal);color:var(--teal)} .pills a.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.hdr-book{margin-left:auto;white-space:nowrap;flex:none}
@media(max-width:980px){.pills{display:none}}
/* Phone header fit (2026-09-10): the wordmark at 26px plus the hamburger and the Book pill ran 18px past a 390px screen and
   47px past 360px, which stretched the whole document sideways. Scale the wordmark and the pill down instead of letting it spill. */
@media(max-width:560px){header .wrap{height:66px;gap:10px;padding-left:12px;padding-right:12px} .logo{font-size:19px;letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .logo em{margin-left:4px} .hdr-book{padding:9px 14px;font-size:12.5px}}
@media(max-width:400px){.logo{font-size:16.5px} .hdr-book{padding:8px 12px;font-size:12px} .tog{width:40px} .tog span{left:9px;right:9px}}
#menu-scrim{position:fixed;inset:0;background:rgba(14,42,58,.45);z-index:64;opacity:0;pointer-events:none;transition:opacity .35s} #menu-scrim.open{opacity:1;pointer-events:auto}
#menu-panel{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);background:var(--cream);border-right:1px solid var(--line);z-index:65;padding:92px 26px 30px;transform:translateX(-103%);transition:transform .42s cubic-bezier(.33,.02,.2,1);overflow-y:auto}
#menu-panel.open{transform:translateX(0)}
#menu-panel .sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin:22px 0 10px;padding-left:16px} #menu-panel .sub:first-child{margin-top:0}
#menu-panel a{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;margin:0 0 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.6);font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.1;color:var(--deep);opacity:0;transform:translateX(-8px);transition:opacity .3s ease .08s,transform .3s ease .08s,background .2s,border-color .2s,color .2s}
#menu-panel.open a{opacity:1;transform:none} #menu-panel a:hover{border-color:var(--teal);color:var(--teal)} #menu-panel a.here{background:var(--deep);color:#fff;border-color:var(--deep)}
#menu-panel a.small{font-family:'Inter',sans-serif;font-size:14px;letter-spacing:.02em;padding:11px 18px;margin-bottom:6px}
#menu-panel a.small.go{background:var(--deep);color:#fff;border-color:var(--deep)} #menu-panel a.small.go:hover{background:var(--teal);border-color:var(--teal)}
/* Mobile nav side (Andre 2026-09-17, amending the 9/7 standard): "for all the mobile sites we should have the
   hamburger and pop out section on the right side of the screen since most people hold the phone with their
   right hand so it will be easier that way." Desktop keeps the left, where the pointer is not a thumb and
   reading order still wins.
   BREAKPOINT: 980px, because that is exactly the width at which .pills goes display:none and the hamburger
   stops being a shortcut and becomes the only way to navigate. Tying the side to that same number means the
   button moves on the very screens where it is the navigation, and never on a screen that still shows the pill
   row. It is not a guessed phone width, and it cannot drift apart from the nav it belongs to.
   This is CSS ordering only. The button stays FIRST in the header markup so keyboard focus and screen readers
   still meet the menu before the wordmark; only `order` moves it, and `.hdr-book`'s margin-left:auto carries
   both of them to the right edge, leaving the hamburger the last and most thumb-reachable control in the row.
   The panel flips with it: off-screen to the right, its hairline border on the left edge where it now meets the
   page, and its links settling in from the right instead of the left. Everything inside the panel stays as the
   9/7 standard requires, left-aligned text, 26px of padding on both sides, one pill style, and the "you're
   here" marker is a background on the pill rather than an edge rule, so it needs no flipping.
   These rules sit AFTER the #menu-panel block on purpose: same specificity, so source order is what decides. */
@media(max-width:980px){
  .tog{order:1}
  #menu-panel{left:auto;right:0;border-right:0;border-left:1px solid var(--line);transform:translateX(103%)}
  #menu-panel.open{transform:translateX(0)}
  #menu-panel a{transform:translateX(8px)} #menu-panel.open a{transform:none}
}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:500;font-size:14px;letter-spacing:.04em;transition:.25s;border:1px solid transparent}
.btn.solid{background:var(--deep);color:#fff} .btn.solid:hover{background:var(--teal)}
.btn.ghost{border-color:var(--deep);color:var(--deep)} .btn.ghost:hover{background:var(--deep);color:#fff}
.btn.sm{padding:9px 16px;font-size:12px} .bookbar{display:none} @media(max-width:820px){.bookbar{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;padding:10px;background:rgba(242,235,223,.94);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 30px rgba(14,42,58,.18)} .bookbar .btn{flex:1;justify-content:center;text-align:center} body{padding-bottom:84px}}
/* services search (builder-owned from 9/7): the box, the predictive list, the category chips, the landing highlight */
.svc-search{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.svc-box{position:relative;flex:1;min-width:260px}
.svc-box input{width:100%;padding:14px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:15px;color:var(--ink);box-shadow:0 8px 24px rgba(14,42,58,.06)}
.svc-box input:focus{outline:2px solid var(--aqua);outline-offset:2px}
.svc-count{font-size:13px;color:var(--dim);letter-spacing:.04em}
.svc-sug{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(14,42,58,.16);list-style:none;margin:0;padding:8px;z-index:30;max-height:340px;overflow:auto}
.svc-sug[hidden]{display:none}
.svc-sug li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;border-radius:12px;cursor:pointer;align-items:baseline} .svc-sug li:hover,.svc-sug li.sel{background:var(--foam)}
.svc-sug .n{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--deep)} .svc-sug .n mark{background:rgba(127,200,201,.35);color:inherit;border-radius:3px;padding:0 1px}
.svc-sug .c{font-size:12px;color:var(--dim);letter-spacing:.04em} .svc-sug .p{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--teal)}
.svc-cats{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.6);font:inherit;font-size:13px;color:var(--deep);cursor:pointer;letter-spacing:.03em;transition:.2s} .chip:hover{border-color:var(--teal);color:var(--teal)} .chip.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.svc-empty{padding:40px 0;color:var(--dim);font-size:17px}
.mrow.hit{background:rgba(127,200,201,.22);border-radius:12px;box-shadow:0 0 0 8px rgba(127,200,201,.22);animation:hitfade 3s ease forwards} @keyframes hitfade{to{background:transparent;box-shadow:none}}
.hide{display:none!important}
section{padding:96px 0} @media(max-width:820px){section{padding:64px 0}}
.kick{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--dim);max-width:62ch}
.hero{position:relative;min-height:88vh;display:grid;align-items:end;color:#fff;overflow:hidden;padding:0}
.hero .bg{position:absolute;inset:0;background:var(--deep) center/cover no-repeat;transform:scale(1.04);animation:drift 26s ease-in-out infinite alternate}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,42,58,.15),rgba(14,42,58,.7) 70%,rgba(14,42,58,.92))}
.hero .wrap{position:relative;padding:120px 0 84px}
.hero h1{max-width:12ch;text-shadow:0 2px 24px rgba(0,0,0,.25)} .hero .lede{color:rgba(255,255,255,.86)}
.hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero .btn.ghost{border-color:rgba(255,255,255,.7);color:#fff} .hero .btn.ghost:hover{background:#fff;color:var(--deep)}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
.caustic{position:absolute;inset:0;pointer-events:none;opacity:.35;background:radial-gradient(60% 40% at 20% 30%,rgba(127,200,201,.5),transparent 60%),radial-gradient(50% 35% at 80% 60%,rgba(127,200,201,.35),transparent 60%);mix-blend-mode:screen;animation:caustic 14s ease-in-out infinite alternate}
@keyframes caustic{from{transform:translate3d(0,0,0)}to{transform:translate3d(3%,-2%,0)}}
.wave{display:block;width:100%;height:60px;color:var(--cream)} .hero .caustic{animation:drift 26s ease-in-out infinite alternate} @keyframes drift{from{transform:translate3d(-2%,0,0) scale(1.02)}to{transform:translate3d(2%,-1.5%,0) scale(1.06)}} @media(prefers-reduced-motion:reduce){.hero .caustic{animation:none}}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media(max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
/* A .pillars row with only two cards in it was still being laid out on the four-column grid, so the two cards sat in the
   first two columns at a quarter of the wrap each and half the page stayed empty beside them: two thin ropes of text down
   the left of a very tall section (Andre, 2026-09-17, on "Who holds the evening"). .duo gives a two-card row the full
   measure, with the type stepped up to match the wider card, and drops to one column on a phone. */
.pillars.duo{grid-template-columns:repeat(2,1fr);gap:28px;align-items:start}
/* A practitioner portrait at the top of each duo card (Nicola's arrived 2026-09-19; Melissa's is her team-card photo).
   Square, cut the way the team cards cut theirs, so the two cards open the same way even when the bios differ in length;
   align-items:start above stops the shorter card stretching to the taller one and leaving a hollow at its foot. */
.pillars.duo .ppic{width:132px;height:132px;border-radius:18px;overflow:hidden;margin-bottom:18px;box-shadow:0 12px 30px rgba(14,42,58,.14)}
.pillars.duo .ppic img{width:100%;height:100%;object-fit:cover;display:block}
.pillars.duo .pillar{padding:34px 38px}
.pillars.duo .pillar h3{font-size:clamp(23px,2.2vw,27px);margin-bottom:12px}
.pillars.duo .pillar p{font-size:16.5px;line-height:1.78}
@media(max-width:820px){.pillars.duo{grid-template-columns:1fr;gap:18px} .pillars.duo .pillar{padding:26px 24px} .pillars.duo .pillar p{font-size:15.5px}}
.pillar{padding:26px 24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.teamband{background:linear-gradient(180deg,var(--foam),#f6fbfa 50%,var(--cream));border-top:1px solid rgba(47,127,140,.16);border-bottom:1px solid rgba(47,127,140,.16)}
.teamband .kick{color:var(--teal)}
.team{display:grid;gap:30px;margin-top:40px}
.tcard{display:grid;grid-template-columns:310px 1fr;background:#fff;border:1px solid rgba(47,127,140,.18);border-radius:26px;overflow:hidden;box-shadow:0 26px 64px rgba(14,42,58,.10)}
@media(max-width:760px){.tcard{grid-template-columns:1fr}}
.tph{background:linear-gradient(160deg,#eaf7f6,var(--foam) 52%,#cbe7e6);display:flex;align-items:flex-start;justify-content:center;padding:26px}
.tph img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 14px 34px rgba(14,42,58,.16)}
.tmt{width:100%;aspect-ratio:3/4;border-radius:18px;background:linear-gradient(155deg,var(--aqua),var(--teal) 58%,var(--ocean));display:grid;place-content:center;text-align:center;padding:20px;box-shadow:0 14px 34px rgba(14,42,58,.16)}
.tmt .init{font-family:'Cormorant Garamond',serif;font-size:74px;line-height:1;color:#fff}
.tmt .soon{display:block;margin-top:14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.tbody{padding:30px 34px 34px}
@media(max-width:760px){.tbody{padding:24px 24px 28px}}
.tname{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3.4vw,38px);font-weight:500;color:var(--deep);line-height:1.05}
.trole{display:inline-block;margin-top:10px;padding:6px 15px;border-radius:999px;background:var(--foam);color:var(--teal);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
.tbio p{margin-top:16px;color:var(--dim);font-size:15.5px;line-height:1.78}
.pillar h3{margin-bottom:8px} .pillar p{color:var(--dim);font-size:15px}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} @media(max-width:900px){.grid2{grid-template-columns:1fr;gap:28px}}
.ph{border-radius:22px;overflow:hidden;background:var(--foam);box-shadow:0 30px 70px rgba(14,42,58,.18);line-height:0}
.ph img{width:100%;height:auto;display:block}
.phold{max-width:620px;border-radius:22px;background:linear-gradient(150deg,var(--foam),var(--sand));border:1px dashed rgba(47,127,140,.4);display:grid;place-items:center;text-align:center;padding:46px 30px;min-height:230px}
.phold b{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:27px;color:var(--teal);display:block}
.phold span{display:block;margin-top:8px;font-size:13.5px;color:var(--dim)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.gal .shot{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,var(--foam),#fff);box-shadow:0 16px 42px rgba(14,42,58,.12);transition:transform .5s ease,box-shadow .5s ease}
.gal .shot:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(14,42,58,.18)}
.gal .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} @media(max-width:900px){.cats{grid-template-columns:1fr}}
.cat{position:relative;border-radius:22px;overflow:hidden;color:var(--ink);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(14,42,58,.10);transition:transform .5s ease,box-shadow .5s ease}
.cat .imgbox{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,var(--foam),#fff);overflow:hidden}
.cat .imgbox.noimg{background:linear-gradient(155deg,var(--aqua),var(--teal) 60%,var(--ocean))} .cat:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,42,58,.18)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:transform 1.2s ease} .cat:hover img{transform:scale(1.04)}
.cat .t{position:relative;z-index:1;padding:22px 24px 26px} .cat h3{margin-bottom:6px;color:var(--deep)} .cat p{font-size:14.5px;color:var(--dim)}
.band{background:var(--deep);color:#fff}
.band .p, .mrow[data-cat="Wellness"] .p{color:#5fb3c0} .band .kick{color:var(--aqua)} .band .lede{color:rgba(255,255,255,.8)}
.band2{background:var(--sand)}
.menu{display:grid;grid-template-columns:1fr;gap:0}
.mrow{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.mrow .n{font-family:'Cormorant Garamond',serif;font-size:22px} .mrow .d{font-size:14px;color:var(--dim);grid-column:1/-1;margin-top:-6px;max-width:70ch}
.mrow .m{font-size:13px;color:var(--dim);letter-spacing:.04em} .mrow .p{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--teal)}
@media(max-width:620px){.mrow{grid-template-columns:1fr auto} .mrow .m{display:none}}
.cathead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin:70px 0 22px} .cathead:first-child{margin-top:0} @media(max-width:900px){.cathead{grid-template-columns:1fr;gap:10px}}
.cathead .ph{background:none;box-shadow:none;overflow:visible;justify-self:end;max-width:100%}
.cathead .ph img{max-height:330px;width:auto;max-width:100%;margin-left:auto;border-radius:22px;box-shadow:0 22px 55px rgba(14,42,58,.18)}
@media(max-width:900px){.cathead .ph img{margin:0 auto}}
.quote{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3vw,36px);line-height:1.3;max-width:26ch}
.soundbath{margin-top:34px;max-width:64ch}.soundbath h3{font-size:clamp(24px,2.6vw,30px)}.soundbath p{margin:10px 0 0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.84)}.soundbath p b{color:#fff;font-weight:600}.soundbath .sched{margin:14px 0 0 18px;padding:0}.soundbath .sched li{margin:5px 0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.84)}
.pmu-guide{margin-top:72px}.pmu-guide h3{margin:48px 0 0;font-size:clamp(24px,2.6vw,30px)}.pmu-guide p,.pmu-guide ul{margin:26px 0 0;max-width:68ch;font-size:15.5px;line-height:1.7;color:var(--dim)}.pmu-guide ul{padding:0 0 0 18px}.pmu-guide li{margin:10px 0}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:28px}
.review{display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:22px 24px;color:inherit;text-decoration:none;transition:background .25s ease,transform .25s ease}
.review:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.review p{font-family:'Inter',system-ui,sans-serif;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.88);margin:0 0 14px}
.review b{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:20px;letter-spacing:0;text-transform:none;color:var(--aqua)}
.review .stars{display:block;font-size:13px;letter-spacing:.18em;color:var(--gold);margin-bottom:10px}
.soundbath{margin-top:34px;max-width:64ch}.soundbath h3{font-size:clamp(24px,2.6vw,30px)}.soundbath p{margin:10px 0 0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.84)}.soundbath p b{color:#fff;font-weight:600}.soundbath .sched{margin:14px 0 0 18px;padding:0}.soundbath .sched li{margin:5px 0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.84)}
.pmu-guide{margin-top:72px}.pmu-guide h3{margin:48px 0 0;font-size:clamp(24px,2.6vw,30px)}.pmu-guide p,.pmu-guide ul{margin:26px 0 0;max-width:68ch;font-size:15.5px;line-height:1.7;color:var(--dim)}.pmu-guide ul{padding:0 0 0 18px}.pmu-guide li{margin:10px 0}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.reviews{grid-template-columns:1fr}}
.rev{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px} .rev .stars{color:var(--gold);letter-spacing:2px;margin-bottom:10px} .rev p{font-size:15px} .rev .who{margin-top:12px;font-size:13px;color:var(--dim)}
.ig{overflow:hidden;position:relative} .ig .track{display:flex;gap:14px;width:max-content;animation:spin 46s linear infinite} .ig:hover .track{animation-play-state:paused}
.ig .tile{position:relative;width:260px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:linear-gradient(150deg,var(--foam),#fff)}
.ig .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
@keyframes spin{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px} @media(max-width:900px){.facts{grid-template-columns:1fr}}
.fact{border-top:1px solid rgba(255,255,255,.2);padding-top:16px} .fact b{display:block;font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:500;color:var(--aqua)} .fact span{font-size:14px;color:rgba(255,255,255,.75)}
.book-frame{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;min-height:760px} .book-frame iframe{width:100%;height:900px;border:0;display:block}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px} @media(max-width:900px){.info{grid-template-columns:1fr}}
.info div{padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:#fff;display:flex;flex-direction:column;justify-content:center} .info b{display:block;font-family:'Cormorant Garamond',serif;font-size:24px;margin-bottom:6px;font-weight:500;color:var(--deep)} .info p{font-size:15px;color:var(--dim);line-height:1.6;overflow-wrap:anywhere}
@media(max-width:820px){.info div{padding:20px 18px} .info b{font-size:22px} .info p{font-size:14.5px}}
footer{background:var(--deep);color:rgba(255,255,255,.8);padding:60px 0 40px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} @media(max-width:900px){footer .wrap{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;margin-bottom:10px} footer a:hover{color:var(--aqua)} footer .tag{letter-spacing:.2em;text-transform:uppercase;font-size:11px;color:var(--aqua);margin-top:14px}
.feather{width:70px;height:140px;display:block} .feather .barbs{opacity:.9} .fmark{display:flex;justify-content:center;margin:0 0 20px} .fmark .feather{animation:sway 6s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease} .rv.in{opacity:1;transform:none}
.zoom{cursor:zoom-in}
.zoom:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.lb{position:fixed;inset:0;z-index:200;background:rgba(9,26,36,.93);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:34px 22px 64px}
.lb.on{display:flex}
.lb img{max-width:min(1120px,94vw);max-height:84vh;width:auto;height:auto;border-radius:18px;box-shadow:0 40px 110px rgba(0,0,0,.55)}
.lb .x{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:999px;border:1px solid rgba(223,241,240,.4);background:rgba(223,241,240,.14);color:#fff;font:400 26px/1 'Inter',sans-serif;cursor:pointer}
.lb .x:hover{background:rgba(223,241,240,.26)}
.lb .cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:rgba(223,241,240,.78);font-size:13.5px;padding:0 26px}
/* Reduced motion: nothing slides or animates, but every state still changes. The menu opens and closes, the
   hamburger still becomes an X, the panel links still appear; they just arrive instantly. */
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none} .hero .bg,.caustic,.ig .track,.fmark .feather{animation:none}
  .tog span,#menu-panel,#menu-panel a,#menu-scrim{transition:none}}
.gift{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} @media(max-width:900px){.gift{grid-template-columns:1fr}}
.note{font-size:13px;color:var(--dim);margin-top:14px}