/* ==========================================================================
   Hae Studio, Direction A "Warm Minimal" — site-wide design system
   --------------------------------------------------------------------------
   One stylesheet for every page. Link it, do not inline page CSS:

     <link rel="stylesheet" href="/css/site.css">

   Rules of the system (see /_ds/ for live examples of every component):
   - No class in markup without a rule here. Checked by scripts/ds-check.mjs.
   - New component: add it here AND to /_ds/index.html in the same change.
   - Rules under "Homepage register" are scoped to body.home and belong only
     to the Direction A homepage. Inner pages use the canonical components.
   - Photos are assigned per page with an inline style attribute or a small
     page-level style block; never by inventing new class names.
   ========================================================================== */

/* ---------- 1. Design tokens ------------------------------------------- */
:root{
  /* canonical tokens (inner pages) */
  --bg:#FAF1E4;        /* cream, page background */
  --bg-2:#F4E8D4;      /* deeper cream, band sections */
  --card:#FFFDF8;      /* card surface */
  --ink:#211A14;       /* primary text */
  --muted:#6B5D4E;     /* secondary text */
  --clay:#B64C3B;      /* terracotta, brand accent */
  --clay-deep:#9A3E30; /* terracotta, hover */
  --line:#E7D8C0;      /* hairline borders */
  --wa:#25D366;        /* WhatsApp green */
  --wa-deep:#1DA851;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --zh:'Noto Sans SC',sans-serif;
  /* homepage register tokens (kept exactly as signed off) */
  --tc:#B64C3B;
  --tcd:#8E3A2C;
  --tcl:#C9634F;
  --cr:#FAF1E4;
  --cr2:#F3E7D6;
  --mu:#6E5F55;
  --max:1160px;
}
/* The homepage signed off a different ink value; scope it so neither drifts. */
body.home{--ink:#2A211D}

/* ---------- 2. Base (every page) --------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font:400 15px/1.8 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--clay);text-decoration:none}
a:hover{color:var(--clay-deep)}
::selection{background:var(--clay);color:var(--card)}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
@media(min-width:821px){
  body{font-size:16px}
  .wrap{padding:0 32px}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--card);padding:10px 16px;font:600 12px/1 var(--sans);z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- 3. Page chrome: header, nav, footer, floating buttons ------ */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:80}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-badge{height:40px;width:40px;border-radius:8px;object-fit:cover}
.brand-name{font:600 14px/1 var(--sans);letter-spacing:.04em}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.site-nav a:hover{color:var(--clay)}
.site-nav a.nav-lang{color:var(--clay);border-left:1px solid var(--line);padding-left:26px}
.nav-toggle{display:none}
@media(max-width:820px){
  .nav-toggle{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:42px;height:42px;background:var(--card);border:1px solid var(--line);border-radius:8px;cursor:pointer;
  }
  .nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .25s ease}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .site-nav{
    position:absolute;top:72px;left:0;right:0;z-index:90;
    background:var(--bg);flex-direction:column;align-items:stretch;gap:0;
    padding:0 22px;max-height:0;overflow:hidden;transition:max-height .32s ease;
    border-bottom:1px solid transparent;
  }
  body.nav-open .site-nav{max-height:440px;border-bottom-color:var(--line);padding-bottom:8px}
  .site-nav a{padding:16px 2px;border-top:1px solid var(--line);font-size:12px}
  .site-nav a.nav-lang{border-left:0;padding-left:2px}
  body.nav-open{overflow:hidden}
}

.site-footer{background:var(--ink);color:#EFE4D2}
.footer-top{padding:56px 0 40px;border-bottom:1px solid rgba(250,241,228,.14)}
.footer-brandline{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.footer-brandline img{height:44px;width:44px;border-radius:8px}
.footer-brandline span{font:600 13px/1.3 var(--sans);letter-spacing:.04em}
.footer-line{font:500 30px/1.25 var(--serif);max-width:20ch}
.footer-line em{font-style:italic;color:#D98A7B}
.footer-sub{margin-top:12px;font-size:13px;color:rgba(250,241,228,.6);max-width:46ch}
.footer-cols{display:grid;gap:30px;padding:40px 0}
.footer-col h4{font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(250,241,228,.5);margin-bottom:16px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:9px}
.footer-col a,.footer-col li span{font:500 13px/1.6 var(--sans);color:#EFE4D2}
.footer-col a:hover{color:#D98A7B}
.footer-classes{columns:2;column-gap:24px}
.footer-bottom{
  border-top:1px solid rgba(250,241,228,.14);padding:20px 0 90px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:12px;color:rgba(250,241,228,.55);
}
.footer-bottom a{color:rgba(250,241,228,.85)}
.footer-bottom a:hover{color:#D98A7B}
@media(min-width:821px){
  .footer-top{padding:72px 0 48px}
  .footer-cols{grid-template-columns:1.2fr 1fr 1.4fr 1fr;gap:48px;padding:48px 0}
  .footer-bottom{padding-bottom:26px}
}

.fabs{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:10px}
.fab{
  width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(33,26,20,.14);
}
.fab svg{width:22px;height:22px}
/* both naming conventions are in the markup (.fab.wa from the homepage register,
   .fab-wa from the inner-page system). Define both so a FAB is never invisible. */
.fab.wa,.fab-wa{background:var(--wa);color:#fff}
.fab.wa:hover,.fab-wa:hover{background:var(--wa-deep);color:#fff}
.fab.call,.fab-call{background:var(--clay);color:var(--card)}
.fab-call{background:var(--clay);color:var(--card)}
.fab-call:hover{background:var(--clay-deep);color:var(--card)}
.fab-wa{background:var(--wa);color:#fff}
.fab-wa:hover{background:var(--wa-deep);color:#fff}
@media(min-width:821px){.fabs{right:24px;bottom:24px}}

/* ---------- 4. Typography helpers -------------------------------------- */
h1,h2,h3{font-family:var(--serif);font-weight:500}
h1 em,h2 em{font-style:italic;color:var(--clay)}

/* kicker: small labelled eyebrow with a clay tick. Use once per section. */
.kicker{
  display:flex;align-items:center;gap:10px;
  font:600 11px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);white-space:nowrap;
}
.kicker::before{content:"";flex:0 0 auto;width:26px;height:1px;background:var(--clay)}
@media(max-width:480px){
  .kicker{font-size:9px;letter-spacing:.09em}
  .kicker::before{width:16px}
}

/* bilingual heading treatment: English line, then Chinese line.
   <h1><span class="h1-line">Sound Bath</span><span class="h1-line zh" lang="zh-Hans">颂钵音疗</span></h1> */
.h1-line{display:block}
.h1-line.zh{font-family:var(--zh);font-style:normal;font-size:.42em;color:var(--clay);letter-spacing:.02em;margin-top:6px}
/* inline Chinese inside other headings: <h2>Timetable <span class="zh">课程表</span></h2> */
.zh{font-family:var(--zh);font-size:.55em;color:var(--clay);letter-spacing:.02em}

.lede{max-width:52ch;color:var(--muted);margin-top:16px}

/* prose: running body copy */
.prose p{color:var(--muted);max-width:62ch}
.prose p+p{margin-top:16px}

/* ---------- 5. Buttons and CTA rows ------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-deep);color:#fff}
/* primary site action (booking, timetable). Green is reserved for WhatsApp, so
   anything that is not a wa.me link uses the terracotta brand colour instead. */
.btn-solid{background:var(--clay);color:#fff}
.btn-solid:hover{background:var(--clay-deep);color:#fff}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{border-color:var(--clay);color:var(--clay)}
@media(max-width:820px){.btn{width:100%}}

/* cta-row: canonical button pair, primary + secondary. */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* legacy aliases still in use on existing pages */
.hero-cta{display:flex;flex-direction:column;gap:12px;max-width:330px;margin-top:28px}
.cta-cta{display:flex;flex-direction:column;gap:12px;max-width:330px;margin:28px auto 0}
@media(min-width:821px){
  .hero-cta{flex-direction:row;max-width:none}
  .cta-cta{flex-direction:row;max-width:none;justify-content:center}
}

/* cta-band: closing call to action band */
.cta-band{background:var(--bg-2);text-align:center}
.cta-band h2{font-size:32px;line-height:1.2;margin:16px auto 14px;max-width:18ch}
.cta-band p{color:var(--muted);max-width:52ch;margin:0 auto}
.cta-band .kicker{justify-content:center}
@media(min-width:821px){.cta-band h2{font-size:44px}}

/* ---------- 6. Sections ------------------------------------------------ */
.section{padding:56px 0}
.section.band{background:var(--bg-2)}

/* section-head: canonical section heading. kicker + h2, optional .section-note
   split to the right on desktop. */
.section-head{border-top:1px solid var(--line);padding-top:26px;margin-bottom:32px}
.section-head h2{font-size:30px;line-height:1.2;margin:16px 0 0}
.section-note{font:500 12px/1.7 var(--sans);color:var(--muted);margin-top:12px;max-width:60ch}
@media(min-width:821px){
  .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
  .section-head h2{font-size:42px}
  .section-note{text-align:right;flex:0 0 auto;padding-bottom:6px}
}
/* sec-head: plain section heading without the rule line or split note.
   Add .center to centre it. */
.sec-head{max-width:60ch;margin-bottom:26px}
.sec-head h2{font-size:30px;line-height:1.2;margin:8px 0 10px}
.sec-head p{color:var(--muted)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .kicker{justify-content:center}
@media(min-width:821px){.sec-head h2{font-size:42px}}

/* ---------- 7. Heroes -------------------------------------------------- */
/* canonical inner-page hero.
   Required structure (wrappers are not optional):
   <section class="hero"><div class="wrap">
     <nav class="crumbs">...</nav>          (optional, before the grid)
     <div class="hero-inner">
       <div class="hero-copy">kicker, h1, lede, cta-row</div>
       <figure class="hero-figure"><img ...></figure>
     </div>
   </div></section>
   .hero-figure takes the img directly; there is no arch wrapper on Hae.
   Add class "mat" to the figure for the framed variant. */
.hero{padding:34px 0 8px}
.hero .crumbs{margin-bottom:26px}
.hero-inner{display:grid;gap:30px;align-items:center}
.hero-copy h1{font-size:clamp(34px,4.6vw,58px);line-height:1.1;margin:14px 0 16px}
.hero-figure{margin:0;border-radius:20px;overflow:hidden}
.hero-figure img{width:100%;height:100%;max-height:460px;object-fit:cover;display:block}
@media(min-width:900px){
  .hero{padding:48px 0 14px}
  .hero-inner{grid-template-columns:1.05fr .95fr;gap:54px}
}

/* page-hero: legacy hero with integrated breadcrumb, kept for
   /a/reformer-pilates/ and /a/timetable/. New pages use .hero above. */
.page-hero{padding:40px 0 60px}
.page-hero .crumbs{margin-bottom:26px}
.page-hero h1{font-size:34px;line-height:1.12;margin:20px 0 6px}
.page-hero .h1-line{display:block;font:italic 400 .72em/1.3 var(--serif);color:var(--clay);margin-top:10px}
.hero-media{margin-top:40px}
@media(min-width:821px){
  .page-hero{padding:56px 0 88px}
  .page-hero h1{font-size:58px}
  .page-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
  .hero-media{margin-top:0}
}

/* mat: framed photo treatment (cream mat border around the image) */
.mat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px}
.mat img{border-radius:4px;width:100%}
@media(min-width:821px){.mat{padding:20px}}

/* ---------- 8. Components ---------------------------------------------- */
/* breadcrumb */
.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font:600 10px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--clay)}
.crumbs .sep{color:var(--clay)}
.crumbs .here{color:var(--ink)}

/* card grid: 1 col mobile, 2 from 680px, 3 from 1040px.
   .cards > .card is canonical; .format-grid > .format is the same component
   under its earlier name, kept so existing pages do not drift. */
.cards,.format-grid{display:grid;gap:18px}
@media(min-width:680px){.cards,.format-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cards,.format-grid{grid-template-columns:repeat(3,1fr)}
  /* a fixed 3-column grid strands the remainder when the count is not a multiple
     of 3: two cards leave an empty column, four leave one card alone on row two.
     Balance those two cases into a 2-column grid. */
  .cards:has(> .card:nth-child(2):last-child),
  .cards:has(> .card:nth-child(4):last-child),
  .format-grid:has(> .format:nth-child(2):last-child),
  .format-grid:has(> .format:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
.card,.format{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
.card h3,.format h3{margin:0 0 8px;font-size:20px}
.card h3 a,.format h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--clay);padding-bottom:2px}
.card h3 a:hover,.format h3 a:hover{opacity:.75}
.card p,.format p{margin:0;font-size:15px;color:var(--muted)}
.card .f-tag,.format .f-tag{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--clay);display:block;margin-bottom:12px}
.card address{font-style:normal;color:var(--muted);font-size:15px;line-height:1.8}

/* numbered steps: ordered process list.
   .steps > .step is canonical; .beats > .beat is the same component. */
.steps,.beats{display:grid;gap:18px}
@media(min-width:860px){.steps,.beats{grid-template-columns:repeat(3,1fr)}}
.step,.beat{border-top:2px solid var(--clay);padding-top:18px}
.step-num,.beat-num{display:block;font-family:var(--serif);font-size:12px;font-weight:700;line-height:1;letter-spacing:.16em;color:var(--clay);margin-bottom:8px}
.step h3,.beat h3{margin:0 0 6px;font-size:19px}
.step p,.beat p{margin:0;font-size:15px;color:var(--muted);max-width:44ch}
.step p a,.beat p a{font-weight:500}

/* bullet list: feature or symptom ticks */
.ticks{list-style:none;display:grid;gap:13px;margin-top:24px}
.ticks li{display:flex;gap:12px;font-size:15.5px}
.ticks svg{flex:0 0 17px;margin-top:5px}

/* two-column feature: image one side, copy the other.
   .split is canonical; .feel-grid and .book-grid are the same component. */
.split,.feel-grid,.book-grid{display:grid;gap:36px}
@media(min-width:821px){.split,.feel-grid,.book-grid{grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}}

/* suit-list: lettered rows of who something suits */
.suit-list{border-top:1px solid var(--line)}
.suit-row{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.suit-mark{font:500 18px/1.6 var(--serif);color:var(--clay)}
.suit-row h3{font-size:20px}
.suit-row p{grid-column:2;color:var(--muted);font-size:13.5px;margin-top:4px;max-width:56ch}
@media(min-width:821px){
  .suit-row{grid-template-columns:44px 1fr 1.2fr;gap:24px}
  .suit-row p{grid-column:3;margin-top:0}
}

/* person grid: portrait or no-photo initials fallback.
   With photo:    <div class="pic"><img ...></div>
   Without photo: <div class="pic"><div class="initials">DT</div></div> */
.people{display:grid;gap:26px;margin-top:34px}
@media(min-width:700px){.people{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.people{grid-template-columns:repeat(3,1fr)}}
.person{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.person .pic{aspect-ratio:3/4;background:var(--bg-2);overflow:hidden}
.person .pic img{width:100%;height:100%;object-fit:cover;display:block}
.person .initials{width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);font-size:44px;font-weight:600;letter-spacing:.04em;color:var(--clay);opacity:.55}
.person .pbody{padding:20px 22px 24px}
.person h3{margin:0 0 3px;font-size:20px}
.person .zh{font-size:14px;color:var(--muted);margin-bottom:8px}
.person .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--clay);margin-bottom:10px}
.person .pbody p{font-size:14.5px;color:var(--muted);margin:0}

/* review block: aggregate score + quoted review cards */
.rhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:30px}
.score{display:flex;align-items:center;gap:16px}
.score .big{font-size:52px;font-weight:700;line-height:1;color:var(--ink)}
.stars{color:#F5A623;letter-spacing:2px;font-size:15px}
.score small{display:block;color:var(--muted);font-size:13.5px;margin-top:5px}
.rgrid{display:grid;gap:16px}
@media(min-width:760px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.rgrid{grid-template-columns:repeat(3,1fr)}}
.rv{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.rv p{font-size:14.8px;color:var(--muted);margin:10px 0 14px;line-height:1.6}
.rv b{font-size:14px;color:var(--ink)}
.gsrc{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}

/* chip row: tappable tags */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:10px 20px;font-size:14.5px;color:var(--ink)}
.chip:hover{border-color:var(--clay);color:var(--clay)}

/* enquiry form */
.form{display:grid;gap:13px;max-width:480px;margin-top:22px}
.form label{display:block;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--clay);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);font:inherit;font-size:15px;color:var(--ink)}
.form textarea{min-height:96px;resize:vertical}
.form .btn{justify-self:start}

/* FAQ accordion */
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 0;cursor:pointer;list-style:none;
  font:500 19px/1.45 var(--serif);color:var(--ink);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-icon{flex:0 0 auto;width:18px;height:18px;position:relative}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;background:var(--clay);
  transform:translate(-50%,-50%);
}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s ease}
.faq-list details[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{padding:0 34px 22px 0;color:var(--muted);font-size:14px;max-width:64ch}
.faq-a a{font-weight:500}
@media(min-width:821px){.faq-list summary{font-size:21px}}

/* week board + class ledger (timetable patterns) */
.board-honest{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:18px 20px;margin-bottom:28px;
  font-size:14px;color:var(--ink);max-width:70ch;
}
.board-honest strong{font-weight:600}
.week-board{border-top:1px solid var(--line)}
.day-row{display:grid;gap:8px;padding:20px 0;border-bottom:1px solid var(--line)}
.day-name{font:500 24px/1.2 var(--serif)}
.day-name .day-zh{font:500 12px/1.6 var(--zh);color:var(--clay);letter-spacing:.1em;margin-left:10px}
.day-entries{display:grid;gap:7px}
.day-entry{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13.5px}
.entry-name{color:var(--ink);font-weight:500}
.entry-name .entry-zh{font:400 12px/1.6 var(--zh);color:var(--muted);margin-left:8px;letter-spacing:.04em}
.entry-note{flex:0 0 auto;font:600 10px/1.7 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
@media(min-width:821px){
  .day-row{grid-template-columns:220px 1fr;gap:40px;padding:24px 0}
  .day-name{font-size:28px}
  .day-entries{padding-top:4px}
}
.ledger{border-top:1px solid var(--line);columns:1}
.ledger-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);break-inside:avoid;
}
.ledger-name{font:500 19px/1.3 var(--serif)}
.ledger-zh{font:400 12px/1.6 var(--zh);color:var(--clay);letter-spacing:.06em;margin-left:8px}
.ledger-note{flex:0 0 auto;font:600 10px/1.7 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(min-width:821px){.ledger{columns:2;column-gap:56px}}

/* ==========================================================================
   Homepage register — Direction A homepage exactly as signed off.
   Every rule is scoped under body.home so it cannot leak into inner pages,
   and canonical rules above cannot leak back (the scoped rules win on
   specificity; three short guard rules at the end cover the properties the
   homepage originally inherited from the browser default).
   ========================================================================== */
body.home{background:var(--cr);color:var(--ink);font:16px/1.7 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.home h1,.home h2,.home h3{font-family:"Poppins","Inter",sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.028em}
.home a{color:inherit;text-decoration:underline}
.home .wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.home .kick{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tc);font-weight:600}

.home header{position:sticky;top:0;z-index:60;background:rgba(250,241,228,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.home .nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.home .logo{font-family:"Poppins",sans-serif;font-size:29px;font-weight:600;letter-spacing:-.05em;color:var(--tc);text-decoration:none;line-height:1}
.home .logo small{display:block;font-size:9.5px;letter-spacing:.24em;font-weight:400;color:var(--mu);margin-top:2px}
.home .logo img{height:44px;width:auto;display:block}
.home .menu{display:none;gap:30px;font-size:14.5px}
.home .menu a{text-decoration:none;color:var(--mu)}
.home .menu a:hover{color:var(--tc)}
.home .btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;background:var(--tc);color:#fff;padding:13px 26px;border-radius:100px;text-decoration:none;font-size:14.5px;font-weight:500;border:0;cursor:pointer;font-family:inherit;line-height:inherit;letter-spacing:normal;text-transform:none}
.home .btn:hover{background:var(--tcd)}
.home .btn.o{background:transparent;color:var(--tc);border:1px solid rgba(182,76,59,.35)}
.home .btn.o:hover{border-color:var(--tc)}
.home .hamb{display:block;background:none;border:0;padding:8px}
.home .hamb span{display:block;width:22px;height:2px;background:var(--tc);margin:5px 0}
@media(min-width:980px){.home .menu{display:flex}.home .hamb{display:none}}
@media(max-width:820px){.home .btn{width:auto}}

.home .hero{padding:70px 0 0;text-align:center}
.home .hero h1{font-size:clamp(42px,9vw,86px);margin:20px auto 22px;max-width:14ch}
.home .hero .lead{font-size:18.5px;color:var(--mu);max-width:50ch;margin:0 auto}
.home .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;justify-content:center}
.home .hp{margin-top:52px;aspect-ratio:16/8;border-radius:250px 250px 22px 22px;background:
 radial-gradient(90% 120% at 50% 100%,rgba(182,76,59,.22),transparent 60%),
 linear-gradient(160deg,#EFE0CC,#E8D6C0);position:relative;overflow:hidden}
.home .hp::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.4) 0 2px,transparent 2px 30px)}
@media(min-width:900px){.home .hero{padding:96px 0 0}.home .hp{aspect-ratio:16/6.6}}

.home .mantra{padding:74px 0;text-align:center}
.home .mantra .words{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;font-family:"Poppins",sans-serif;font-size:clamp(26px,5.6vw,52px);font-weight:500;letter-spacing:-.03em;color:var(--tc)}
.home .mantra .words span:nth-child(2){color:var(--ink)}
.home .mantra p{color:var(--mu);max-width:54ch;margin:24px auto 0}

.home section{padding:74px 0}
.home .head{max-width:58ch;margin-bottom:38px}
.home .head h2{font-size:clamp(30px,5.4vw,50px);margin:12px 0 14px}
.home .head p{color:var(--mu)}

.home .cl{display:grid;gap:20px}
@media(min-width:680px){.home .cl{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.home .cl{grid-template-columns:repeat(3,1fr)}}
.home .c{background:#fff;border-radius:20px;overflow:hidden;transition:.2s}
.home .c:hover{transform:translateY(-4px);box-shadow:0 22px 46px -30px rgba(182,76,59,.6)}
.home .c .im{height:158px;background:linear-gradient(150deg,#F0E1CE,#E3CDB6);position:relative}
.home .c .im::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,rgba(255,255,255,.42) 0 2px,transparent 2px 26px)}
.home .c .bd{padding:24px 24px 28px}
.home .c h3{font-size:21px;margin-bottom:4px}
.home .c .zh{font-size:13.5px;color:var(--tc);margin-bottom:9px;font-family:"Noto Sans SC",sans-serif}
.home .c p{font-size:14.5px;color:var(--mu)}

.home .two{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.home .two{grid-template-columns:1fr 1fr;gap:60px}}
.home .imblock{aspect-ratio:1/1.1;border-radius:22px;background:linear-gradient(155deg,#EBDAC4,#DFC7AE);position:relative;overflow:hidden}
.home .imblock::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 25%,rgba(255,255,255,.55),transparent 60%)}
.home .ticks{list-style:none;display:grid;gap:13px;margin-top:24px}
.home .ticks li{display:flex;gap:12px;font-size:15.5px}
.home .ticks svg{flex:0 0 17px;margin-top:5px}

.home .band{background:var(--tc);color:#F6E6DC;border-radius:28px;padding:52px 28px;text-align:center}
.home .band h2{color:#fff;font-size:clamp(28px,5vw,44px);margin-bottom:14px}
.home .band p{max-width:52ch;margin:0 auto;color:#EEC9BE}
.home .band .ctas{margin-top:28px}
.home .band .btn{background:#fff;color:var(--tc)}
.home .band .btn.o{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
@media(min-width:800px){.home .band{padding:70px 54px}}

.home .areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.home .area{background:#fff;border-radius:100px;padding:10px 20px;font-size:14.5px;color:var(--ink)}

.home details{border-bottom:1px solid #E4D6C2;padding:20px 0}
.home summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;font-size:17px;font-weight:500;font-family:"Poppins",sans-serif;color:var(--ink)}
.home summary::-webkit-details-marker{display:none}
.home summary::after{content:"+";color:var(--tc);font-size:22px;line-height:1}
.home details[open] summary::after{content:"-"}
.home details p{margin-top:12px;color:var(--mu);font-size:15.5px;max-width:70ch}

.home .visit{display:grid;gap:30px}
@media(min-width:880px){.home .visit{grid-template-columns:1fr 1fr;gap:52px}}
.home address{font-style:normal;color:var(--mu);font-size:16px;line-height:1.8}
.home form{display:grid;gap:13px;max-width:480px;margin-top:22px}
.home label{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tc)}
.home input,.home select,.home textarea{width:100%;padding:13px 16px;border:1px solid #E0CFB8;border-radius:12px;background:#fff;font:inherit;font-size:15px}
.home textarea{min-height:96px;resize:vertical}

.home footer{background:var(--tc);color:#F3D9CF;padding:52px 0 108px;margin-top:70px}
.home .fg{display:grid;gap:30px}
@media(min-width:820px){.home .fg{grid-template-columns:1.5fr 1fr 1fr}.home footer{padding-bottom:52px}}
.home footer h4{color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:13px;font-family:"Inter",sans-serif;font-weight:600}
.home footer a{display:block;color:#F3D9CF;text-decoration:none;padding:3px 0;font-size:14.5px}
.home footer a:hover{color:#fff}
.home .legal{border-top:1px solid rgba(255,255,255,.18);margin-top:32px;padding-top:20px;font-size:12.5px;color:#E4B9AC}

.home .fabs{position:fixed;right:16px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:11px}
.home .fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.22);text-decoration:none;border:0}
.home .fab svg{width:auto;height:auto}
.home .fab.wa{background:#25D366}
.home .fab.call{background:var(--tc)}

/* homepage photo slots: which photo fills which shape on this page */
.home .hp{background-image:url("/img/teaching-assist.jpg");background-size:cover;background-position:center 40%}
.home .hp::after{opacity:0 !important}
.home .imblock{background-image:url("/img/group-class.jpg");background-size:cover;background-position:center}
.home .imblock::after{opacity:0 !important}
.home .cl .c:nth-child(1) .im{background-image:url("/img/reformer-class.jpg");background-size:cover;background-position:center}
.home .cl .c:nth-child(1) .im::after{opacity:0 !important}
.home .cl .c:nth-child(2) .im{background-image:url("/img/yoga-standing.jpg");background-size:cover;background-position:center}
.home .cl .c:nth-child(2) .im::after{opacity:0 !important}
.home .cl .c:nth-child(3) .im{background-image:url("/img/prenatal-yoga.jpg");background-size:cover;background-position:center}
.home .cl .c:nth-child(3) .im::after{opacity:0 !important}
.home .cl .c:nth-child(4) .im{background-image:url("/img/sound-bath.jpg");background-size:cover;background-position:center}
.home .cl .c:nth-child(4) .im::after{opacity:0 !important}
.home .cl .c:nth-child(5) .im{background-image:url("/img/class-twist.jpg");background-size:cover;background-position:center}
.home .cl .c:nth-child(5) .im::after{opacity:0 !important}
.home .cl .c:nth-child(6) .im{background-image:url("/img/reformer.jpg");background-size:cover;background-position:center}
.home .cl .c:nth-child(6) .im::after{opacity:0 !important}

.home .revs{padding:70px 0}
.home .revs .rhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:30px}
.home .score{display:flex;align-items:center;gap:16px}
.home .score .big{font-size:52px;font-weight:700;line-height:1;color:#2A211D}
.home .stars{color:#F5A623;letter-spacing:2px;font-size:15px}
.home .score small{display:block;color:#6E5F55;font-size:13.5px;margin-top:5px}
.home .rgrid{display:grid;gap:16px}
@media(min-width:760px){.home .rgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.home .rgrid{grid-template-columns:repeat(3,1fr)}}
.home .rv{background:#fff;border:1px solid #E4D6C2;border-radius:14px;padding:22px}
.home .rv p{font-size:14.8px;color:#6E5F55;margin:10px 0 14px;line-height:1.6}
.home .rv b{font-size:14px;color:#2A211D}
.home .gsrc{display:flex;align-items:center;gap:7px;font-size:12px;color:#6E5F55}
.home .format h3 a,.home article h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--clay,#B64C3B);padding-bottom:2px}
.home .format h3 a:hover,.home article h3 a:hover{opacity:.75}

/* "Rated 4.8 on Google" heading in the reviews header row */
.home .h2{font-size:clamp(28px,4.6vw,40px)}

/* address map: keyless Google embed */
.map-embed{position:relative;width:100%;aspect-ratio:16/10;margin-top:18px;border-radius:10px;overflow:hidden;background:var(--bg-2)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* social: real marks, not text links */
.social{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:0}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.social svg{width:18px;height:18px;flex:0 0 auto}
.social a:hover{color:var(--clay)}
.fab svg{width:22px;height:22px}

/* inline social mark used in footer link lists */
.sm-ico{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:7px}

/* the map iframe is lazy-loaded; label the space so it never looks broken */
.map-embed::before{content:"Loading map";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);z-index:0}
.map-embed iframe{z-index:1}

/* Google review proof in the hero. Real Google mark, single star, exact count. */
.gbadge{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:9px 14px;background:var(--card);border:1px solid var(--line);border-radius:999px;text-decoration:none;color:inherit}
.gbadge,.gbadge *{text-decoration:none}
.gbadge b{font-size:15px;font-weight:700}
.gbadge span{font-size:13px;color:var(--muted)}
.gbadge .gb-star{flex:0 0 auto}
a.gbadge:hover{border-color:var(--clay)}

/* Google badge spacing: hairline divider so the rating and the review count
   cannot read as a single number. */
.gbadge{gap:12px;padding:13px 20px;margin-top:36px;margin-bottom:10px}
.gbadge .gb-div{width:1px;height:15px;background:var(--line);flex:0 0 auto}
.gbadge b{font-size:15px;font-weight:700;letter-spacing:.01em}
.gbadge span{font-size:13px;line-height:1.4}
/* beat .home a{text-decoration:underline} */
.home a.gbadge,.home a.gbadge *,a.gbadge,a.gbadge *,.gbadge,.gbadge *{text-decoration:none}

/* A customer's sentence earns more in the hero than a bare rating does, so the
   quote leads and the Google badge sits under it as corroboration. */
.hero-quote{margin:22px auto 14px;max-width:44rem;text-align:center}
.hero-quote .hq-mark{display:inline-flex;align-items:center;gap:8px}
.hero-quote .hq-mark svg{width:16px;height:16px}
.hero-quote .hq-stars{color:#E8A33D;letter-spacing:2px;font-size:15px}
.hero-quote .hq-mark{text-decoration:none;color:inherit}
.hero-quote .hq-score{font-size:16px;font-weight:700;line-height:1}
.hero-quote blockquote{margin:6px 0 8px;font-size:17px;line-height:1.55;font-style:italic}
.hero-quote figcaption{font-size:13.5px;opacity:.8}
@media(max-width:640px){.hero-quote blockquote{font-size:16px}}

/* Google mark in the reviews header, same treatment as the hero rating line. */
.score-mark{display:inline-flex;align-items:center;margin-right:10px}
.score-mark svg{width:22px;height:22px}

/* Log in is a utility link, not a section of the site, so it sits apart from
   the nav items. Same divider treatment the language switch uses. */
.site-nav a.nav-login{color:var(--clay);border-left:1px solid var(--line);padding-left:26px}
@media(max-width:900px){
  .site-nav a.nav-login{border-left:0;padding-left:2px}
}

/* Group or private, the thing someone actually needs to know before booking.
   Sits under the Chinese name so the heading stays a clean link target. Muted
   rather than terracotta, so it reads as a label and does not compete with the
   class name above it. .zh already carries the gap above. */
.home .cl .fmt{
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mu);font-weight:600;margin:0 0 10px;
}

/* Chinese class name beside the English one. Rezerv shows both, and students
   use them interchangeably, so the card carries both at a quieter weight. */
.card h3 .zh-in{font-family:var(--zh);font-size:.72em;font-weight:400;color:var(--muted);white-space:nowrap}