/* Bona Fide Massage Therapy — site stylesheet
   1. Fonts   2. Tokens + base   3. Home components   4. Home responsive
   5. Inner-page components + responsive   6. Refinements
*/

/* ---------------------------------------------------------------
   Bovino Extra Bold (Eko Bimantara) is a licensed commercial face.
   Buy the webfont at myfonts.com/products/extra-bold-bovino-34744
   then drop the four files into  assets/fonts/  :

       assets/fonts/Bovino-ExtraBold.woff2
       assets/fonts/Bovino-ExtraBold.woff
       assets/fonts/Bovino-ExtraBoldItalic.woff2
       assets/fonts/Bovino-ExtraBoldItalic.woff

   Nothing else needs changing. If the files are absent, or if Bovino
   is already installed on the visitor's machine, the stack resolves
   on its own. Playfair Display 800 stands in until then.
   --------------------------------------------------------------- */
@font-face{
  font-family:"Bovino";
  src:local("Bovino Extra Bold"),local("Bovino-ExtraBold"),local("BovinoExtraBold"),
      url("../fonts/Bovino-ExtraBold.woff2") format("woff2"),
      url("../fonts/Bovino-ExtraBold.woff") format("woff");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Bovino";
  src:local("Bovino Extra Bold Italic"),local("Bovino-ExtraBoldItalic"),
      url("../fonts/Bovino-ExtraBoldItalic.woff2") format("woff2"),
      url("../fonts/Bovino-ExtraBoldItalic.woff") format("woff");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

:root{
  --jade-900:#0b241e; --jade-800:#123a2f; --jade-700:#1b4d40; --jade-600:#2a6353;
  --cream:#f6f2ea; --cream-2:#efe9dd; --paper:#fdfbf7; --white:#fff;
  --ink:#191a16; --ink-2:#3f423c; --ink-3:#6b6f67;
  --cinnabar:#c1402f; --cinnabar-deep:#a13425;
  --brass:#2a6353; --brass-soft:#a7c8b6;
  --line:rgba(25,26,22,.11); --line-lt:rgba(246,242,234,.16);
  --didone:"Bovino","Playfair Display","Bodoni Moda",Didot,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --r:8px; --nav-h:66px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink-2);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--didone);font-optical-sizing:auto;color:var(--ink);font-weight:800;line-height:1.2;letter-spacing:-.012em}
p{font-size:1rem}
.wrap{width:min(1180px,90vw);margin:0 auto}
:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
.didone{font-family:var(--didone);font-weight:400;letter-spacing:-.005em}
.didone em{font-style:italic}

/* ghosted calligraphy motif */

.eyebrow{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);font-weight:600;display:inline-flex;align-items:center}
.eyebrow.lt{color:var(--brass-soft)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;letter-spacing:.05em;padding:.82rem 1.6rem;border-radius:var(--r);transition:background .3s,color .3s,border-color .3s,transform .3s;position:relative;overflow:hidden;white-space:nowrap}
.btn-seal{background:var(--cinnabar);color:#fff;box-shadow:0 6px 18px -8px rgba(193,64,47,.6)}
.btn-seal:hover{background:var(--cinnabar-deep);transform:translateY(-2px)}
.btn-line{border:1px solid rgba(255,255,255,.32);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-line.dk{border-color:var(--line);color:var(--ink)}
.btn-line.dk:hover{border-color:var(--jade-700);background:rgba(27,77,64,.05)}
.btn-sm{padding:.6rem 1.15rem;font-size:.76rem}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:150;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 4vw;transition:background .4s,box-shadow .4s,height .4s}
.nav.scrolled{background:rgba(254,250,244,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);height:60px}
.brand{display:inline-block;line-height:0;flex:0 0 auto}
.brand img{height:44px;width:auto;display:block}
/* the dark wordmark vanishes against a jade page header, so pages with one
   carry .dark-head and swap to the light logo until the nav goes solid */
.brand .lgt{display:none}
body.dark-head .nav:not(.scrolled) .brand .drk{display:none}
body.dark-head .nav:not(.scrolled) .brand .lgt{display:block}
/* the menu bars and the phone number need the same treatment */
body.dark-head .nav:not(.scrolled) .nav-tg span{background:#fff}
body.dark-head .nav:not(.scrolled) .nav-r a.nl,
body.dark-head .nav:not(.scrolled) .nav-tel{color:rgba(246,242,234,.82)}
body.dark-head .nav:not(.scrolled) .nav-r a.nl:hover,
body.dark-head .nav:not(.scrolled) .nav-r a.nl.on{color:#fff}
body.dark-head .nav:not(.scrolled) .nav-r a.nl::after{background:var(--brass-soft)}
.nav-r{display:flex;align-items:center;gap:1.85rem}
.nav-r a.nl{font-size:.92rem;font-weight:400;color:var(--ink-2);position:relative;transition:color .3s;white-space:nowrap}
.nav-r a.nl::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--cinnabar);transition:width .3s}
.nav-r a.nl:hover{color:var(--cinnabar)}
.nav-r a.nl:hover::after{width:100%}
.nav-tel{font-size:.92rem;color:var(--ink-2);white-space:nowrap}
.nav-tg{display:none;flex-direction:column;gap:5px;padding:8px;z-index:160}
.nav-tg span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:opacity .25s}
body.menu-open .nav-tg{opacity:0;pointer-events:none}
.nav-close{display:none;position:absolute;top:1.4rem;right:1.4rem;width:48px;height:48px;
  align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  transition:background .3s,transform .3s}
.nav-close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.nav-close::before,.nav-close::after{content:"";position:absolute;width:20px;height:2px;
  background:#fff;border-radius:2px}
.nav-close::before{transform:rotate(45deg)} .nav-close::after{transform:rotate(-45deg)}

/* ================= HERO ================= */
.hero{position:relative;background:#FBF3EE;overflow:hidden;
  min-height:clamp(600px,94svh,880px);display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 1.2rem) 0 1.4rem}
/* the cream fade is done here in CSS, so the hero photograph can be swapped freely */
.hero-art{position:absolute;top:0;right:0;bottom:0;width:71%;z-index:0;pointer-events:none}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:left center}
.hero-art::before{content:"";position:absolute;top:0;bottom:0;left:0;width:62%;
  background:linear-gradient(90deg,#FBF3EE 0%,#FBF3EE 26%,rgba(251,243,238,.92) 52%,rgba(251,243,238,.55) 78%,transparent 100%);z-index:2}
.hero-body{position:relative;z-index:3;width:100%;flex:1;display:flex;align-items:center}
.hero-copy{max-width:37rem}
.hero-eyebrow{display:inline-flex;align-items:center;font-size:.8rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brass)}
.hero h1{font-family:var(--didone);font-optical-sizing:auto;font-weight:800;
  font-size:clamp(2.2rem,4.35vw,3.7rem);line-height:1.06;letter-spacing:-.024em;
  color:#1d2b22;margin:1.05rem 0 1.25rem}
.hero h1 em{font-style:italic;font-weight:800;color:#2f7a61;display:block;letter-spacing:-.014em}
.lmask{display:block;overflow:hidden}
.lmask>span{display:block;transform:translateY(112%);opacity:0;transition:transform 1s cubic-bezier(.16,.84,.28,1),opacity 1s}
body.ready .lmask>span{transform:none;opacity:1}
body.ready .lmask:nth-of-type(1)>span{transition-delay:.14s}
body.ready .lmask:nth-of-type(2)>span{transition-delay:.26s}
.fu{opacity:0;transform:translateY(16px);transition:opacity .85s,transform .85s cubic-bezier(.16,.84,.28,1)}
body.ready .fu{opacity:1;transform:none}
body.ready .d1{transition-delay:.06s} body.ready .d2{transition-delay:.42s}
body.ready .d3{transition-delay:.54s} body.ready .d4{transition-delay:.66s}
.hero-sub{font-size:1.02rem;font-weight:400;color:#4a4f47;max-width:31rem;line-height:1.72}
.hero-rule{width:44px;height:1px;background:var(--brass);opacity:.7;margin:1.6rem 0 1.15rem}
.hero-mark{display:flex;align-items:center;gap:1.15rem;max-width:30rem}
.hero-mark .lines{min-width:0}
.hero-mark .l1{display:block;font-family:var(--didone);font-weight:800;font-size:1.12rem;color:#1d2b22;line-height:1.3;letter-spacing:-.01em}
.hero-mark .l2{display:block;font-size:.88rem;color:#5c6159;line-height:1.5;margin-top:.15rem}
.hero-mark .l2 b{font-weight:600;color:#2f7a61}
.hero-cta{display:flex;gap:.85rem;margin-top:2rem;flex-wrap:wrap}
.hero-cta .btn{padding:.95rem 1.85rem;font-size:.94rem;font-weight:500;border-radius:6px}
.hero-cta .btn-line{border:1px solid rgba(29,43,34,.28);color:#1d2b22;background:rgba(255,255,255,.55)}
.hero-cta .btn-line:hover{border-color:#1d2b22;background:#fff}
/* info bar */
.hero-bar{position:relative;z-index:4;background:var(--jade-800);border-radius:12px;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:1.15rem .5rem;margin-top:1.6rem}
.hb{display:flex;align-items:center;gap:.85rem;padding:.1rem 1.4rem;border-left:1px solid rgba(246,242,234,.16);min-width:0}
.hb:first-child{border-left:none}
.hb .ic{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;color:var(--brass-soft)}
.hb .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hb .tx{font-size:.9rem;color:rgba(246,242,234,.82);line-height:1.4;min-width:0}
.hb .tx strong{display:block;font-weight:600;color:#fff}
.hb .tx a{color:#fff;font-weight:600}
.hb .stars{color:#e8dfd0;letter-spacing:.1em;font-size:.86rem;display:block}

/* ================= strip ================= */
.strip{background:var(--jade-800);color:rgba(246,242,234,.8);padding:.85rem 0;overflow:hidden}
.strip-track{display:flex;width:max-content;align-items:center;animation:sx 46s linear infinite}
.strip-track .it{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;font-size:.84rem;font-weight:400;letter-spacing:.01em;padding:0 1.6rem}
.strip-track .it::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--brass-soft);margin-left:1.6rem;opacity:.65}
@keyframes sx{to{transform:translateX(-50%)}}

/* ================= sections ================= */
.sec{padding:4.1rem 0;position:relative;overflow:hidden}
.sec.paper{background:var(--paper)}
.sec.cream{background:var(--cream)}
.sec.jade{background:linear-gradient(168deg,var(--jade-900),var(--jade-800));color:rgba(246,242,234,.8)}
.sec.jade h1,.sec.jade h2,.sec.jade h3,.sec.jade h4{color:#fff}
.head{max-width:44rem;margin-bottom:2.1rem;position:relative;z-index:2}
.head.mid{margin-left:auto;margin-right:auto;text-align:center}
.head.mid .eyebrow{justify-content:center}
.head h2{font-weight:800;letter-spacing:-.014em;font-size:clamp(1.85rem,3.25vw,2.65rem);margin:.8rem 0 .85rem;text-wrap:balance}
.head p{font-size:1rem;font-weight:300;color:var(--ink-3);max-width:38rem}
.sec.jade .head p{color:rgba(246,242,234,.62)}
.head.mid p{margin-left:auto;margin-right:auto}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.lmask>span,.fu{opacity:1!important;transform:none!important;transition:none!important}
  .strip-track,.hero-media img{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* ================= statement ================= */
.stmt{display:grid;grid-template-columns:1.18fr .82fr;gap:3.2rem;align-items:center;position:relative;z-index:2}
.stmt-img{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r);background:var(--cream-2)}
.stmt-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.stmt-img:hover img{transform:scale(1.05)}
.stmt .big{font-family:var(--didone);font-weight:400;font-size:clamp(1.4rem,2.5vw,2.05rem);line-height:1.35;color:var(--jade-800);margin-top:1rem}
.stmt .big em{font-style:italic;color:var(--cinnabar)}
.stmt .bd{margin-top:1.15rem;font-weight:300;color:var(--ink-3);font-size:.98rem}
.stmt .sig{margin-top:1.4rem;font-family:var(--didone);font-style:italic;font-size:1rem;color:var(--brass);letter-spacing:.03em}

/* ================= BODY MAP ================= */
.bm-top{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:1.8rem;position:relative;z-index:3}
.bm-toggle{display:inline-flex;position:relative;border:1px solid rgba(246,242,234,.22);border-radius:var(--r);overflow:hidden;background:rgba(246,242,234,.04)}
.bm-toggle button{padding:.62rem 1.6rem;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:rgba(246,242,234,.6);position:relative;z-index:2;transition:color .4s}
.bm-toggle button.on{color:#fff}
.bm-toggle .glide{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--cinnabar);transition:transform .5s cubic-bezier(.4,1.25,.4,1);z-index:1}
.bm-toggle.back .glide{transform:translateX(100%)}
.bm-view{font-size:.8rem;color:var(--brass-soft);margin-top:.55rem;display:block}

/* The stage is the figure beside a rail that is never empty. The rail
   carries all twelve zones as a picker; selecting one crossfades its card
   into the same grid cell, so the column keeps its height and nothing
   below the section moves. Two columns, so no dead gutters either side. */
.bm-stage{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:2.8rem;align-items:center;position:relative;z-index:2}
.bm-stage.big{grid-template-columns:minmax(280px,400px) 1fr;gap:3.2rem}
.bm-fig{min-width:0}
.bm-rail{position:relative;min-width:0;display:flex;flex-direction:column;gap:1.2rem}
/* The picker below never moves: this slot is tall enough for a zone card,
   so swapping the intro for a card does not push the list down. */
.bm-head{position:relative;display:grid;min-height:14.5rem}
.bm-layer{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s,transform .45s,visibility 0s .45s;pointer-events:none}
.bm-layer.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .45s,transform .45s,visibility 0s 0s}
.bm-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.bm-chip{display:flex;align-items:center;gap:.65rem;text-align:left;width:100%;
  padding:.6rem .8rem;border:1px solid rgba(246,242,234,.14);border-radius:10px;
  background:rgba(246,242,234,.03);color:rgba(246,242,234,.82);
  transition:border-color .3s,background .3s,transform .3s,color .3s}
.bm-chip:hover{border-color:rgba(193,64,47,.5);background:rgba(246,242,234,.07);transform:translateY(-1px)}
.bm-chip .zt{min-width:0}
.bm-chip b{display:block;font-family:var(--sans);font-size:.82rem;font-weight:600;line-height:1.3}
.bm-chip i{display:block;font-style:normal;font-size:.68rem;font-weight:400;line-height:1.35;
  color:rgba(246,242,234,.45);margin-top:.12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-chip[aria-pressed="true"]{border-color:var(--cinnabar);background:rgba(193,64,47,.15);color:#fff}
.bm-chip[aria-pressed="true"] .k{color:var(--cinnabar)}
.bm-back{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:.9rem;transition:color .3s}
.bm-back:hover{color:#fff}

/* figure: fixed aspect box so percentage pin coordinates stay locked to anatomy */
.bm-figure{position:relative;width:100%;aspect-ratio:880/1320;margin:0 auto;isolation:isolate}
.bm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(1.015);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.34))}
.bm-img.on{opacity:1;transform:none}

/* pin */
.pin{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;padding:0;border:0;background:none;
  cursor:pointer;z-index:4;opacity:0;transition:opacity .45s ease}
.bm-figure.ready .pin{opacity:1}
.pin[hidden]{display:none}
.pin-core{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:radial-gradient(circle,#eafff7 0%,#8fd9c0 70%,#6cc4a8 100%);
  box-shadow:0 0 4px rgba(150,225,200,.45);animation:pinPulse 3.4s ease-in-out infinite;transition:.3s}
.pin-ring{position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(170,225,205,.32);
  opacity:0;animation:pinRipple 3.6s ease-out infinite}
@keyframes pinPulse{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.1);opacity:.92}}
@keyframes pinRipple{0%{transform:scale(.6);opacity:.34}70%{opacity:.05}100%{transform:scale(1.85);opacity:0}}
.pin-lbl{position:absolute;left:24px;top:50%;transform:translateY(-50%) translateX(-5px);white-space:nowrap;
  font-size:.72rem;font-weight:500;color:#cfe9dd;opacity:0;transition:.3s;pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pin.flip .pin-lbl{left:auto;right:24px;transform:translateY(-50%) translateX(5px)}
.pin:hover .pin-lbl,.pin.on .pin-lbl{opacity:1;transform:translateY(-50%)}
.pin:hover .pin-core{transform:scale(1.35);background:radial-gradient(circle,#fff 0%,#a9e8d2 75%);
  box-shadow:0 0 7px rgba(190,240,220,.6)}
.pin.on .pin-core{width:10px;height:10px;margin:-5px 0 0 -5px;
  background:radial-gradient(circle,#fff 0%,#fff 40%,#9fe3c9 100%);
  box-shadow:0 0 8px rgba(255,255,255,.6);animation:none}
.pin.on .pin-ring{border-color:rgba(255,255,255,.5);animation-duration:2.4s}

.bm-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;pointer-events:none;transition:opacity .6s;z-index:5}
.bm-load.gone{opacity:0}
.bm-load .ring{width:32px;height:32px;border:1px solid rgba(167,200,182,.28);border-top-color:var(--brass-soft);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bm-load .t{font-size:.78rem;color:rgba(246,242,234,.5)}
.bm-hint{margin-top:.5rem;text-align:center;font-size:.78rem;color:rgba(246,242,234,.42);transition:opacity .5s}
.bm-hint.gone{opacity:0}

.bm-panel{opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;pointer-events:none}
.bm-panel.show{opacity:1;transform:none;pointer-events:auto}
.bm-card{border-left:2px solid rgba(193,64,47,.55);padding:.1rem 0 .1rem 1.3rem;max-width:34rem}
.bm-card h4{font-size:1.4rem;margin:.3rem 0 .45rem}
.bm-card .tx{font-size:.78rem;font-weight:600;color:var(--brass-soft);line-height:1.6;margin-bottom:.6rem}
.bm-card p{font-size:.9rem;font-weight:300;color:rgba(246,242,234,.68);line-height:1.7;margin-bottom:.9rem}
.bm-card a{font-size:.8rem;font-weight:600;color:var(--cinnabar);display:inline-flex;gap:.35rem;transition:gap .3s}
.bm-card a:hover{gap:.6rem}
.bm-idle{font-weight:300;font-size:1.02rem;color:rgba(246,242,234,.5);line-height:1.6;margin-bottom:.9rem}
.bm-idle-sub{font-size:.85rem;font-weight:300;line-height:1.75;color:rgba(246,242,234,.34);max-width:32rem}

/* ============ shared horizontal rail (services + reviews) ============ */
.rail{position:relative}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1rem}
.rail-prog{flex:1;height:2px;background:rgba(25,26,22,.1);border-radius:2px;overflow:hidden;max-width:240px}
.rail-prog i{display:block;height:100%;width:30%;background:var(--cinnabar);border-radius:2px;
  transform-origin:left;transition:transform .18s linear,width .18s linear}
.sec.jade .rail-prog{background:rgba(246,242,234,.16)}
.rail-btns{display:flex;gap:.5rem;flex:0 0 auto}
.rail-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;color:var(--ink);background:var(--white);
  transition:background .3s,border-color .3s,color .3s,opacity .3s}
.rail-btn:hover:not(:disabled){background:var(--jade-800);border-color:var(--jade-800);color:#fff}
.rail-btn:disabled{opacity:.3;cursor:default}
.rail-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rail-track{display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:.25rem .15rem 1rem;margin:0 -.15rem;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.rail-track::-webkit-scrollbar{display:none}
.rail-hint{font-size:.78rem;color:var(--ink-3);display:none}

/* service card */
.svc-card{flex:0 0 clamp(255px,25vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.35rem 1.25rem;
  transition:border-color .35s,transform .35s,box-shadow .35s}
.svc-card:hover{border-color:rgba(47,122,97,.45);transform:translateY(-4px);
  box-shadow:0 14px 30px -22px rgba(11,36,30,.5)}
.svc-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.svc-card .ix{font-family:var(--didone);font-weight:800;font-size:.85rem;color:var(--ink-3);opacity:.5}
.svc-card h3{font-size:1.18rem;line-height:1.25;margin-bottom:.55rem;min-height:2.9rem}
.svc-card .meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem}
.svc-card .tag{font-size:.76rem;font-weight:600;color:var(--jade-600)}
.svc-pr{display:flex;gap:3px;align-items:center;flex:0 0 auto}
.svc-pr i{width:5px;height:5px;border-radius:50%;background:rgba(25,26,22,.16)}
.svc-pr i.on{background:var(--cinnabar)}
.svc-card p{font-size:.88rem;font-weight:300;color:var(--ink-3);line-height:1.65;flex:1;margin-bottom:1rem}
.svc-card .go{font-size:.8rem;font-weight:600;color:var(--cinnabar);display:inline-flex;align-items:center;
  gap:.35rem;transition:gap .3s}
.svc-card:hover .go{gap:.6rem}

.price{display:grid;grid-template-columns:repeat(4,1fr);margin-top:1.6rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;z-index:2}
.price .c{padding:1.15rem .7rem;text-align:center;border-right:1px solid var(--line)}
.price .c:last-child{border-right:none}
.price .a{font-family:var(--didone);font-weight:800;font-size:1.7rem;color:var(--jade-800);line-height:1}
.price .d{font-size:.8rem;color:var(--ink-3);margin-top:.3rem}
.price-note{text-align:center;margin-top:.9rem;font-size:.92rem;font-weight:300;color:var(--ink-3)}
.svc-foot{display:flex;justify-content:center;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}

/* ================= VIDEO ================= */
.vid{display:grid;grid-template-columns:.44fr .56fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);position:relative;z-index:2}
.vid-l{padding:2.2rem 2.1rem;display:flex;flex-direction:column;justify-content:center}
.vid-l h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:.7rem 0 .3rem}
.vid-l .sub{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-bottom:.85rem}
.vid-l p{font-size:.96rem;font-weight:300;color:var(--ink-3);margin-bottom:1.3rem}
.vid-m{display:flex;gap:1.8rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);flex-wrap:wrap}
.vid-m .n{font-family:var(--didone);font-size:1.65rem;color:var(--cinnabar);line-height:1;display:block}
.vid-m .l{font-size:.76rem;color:var(--ink-3);margin-top:.2rem;display:block}
.vid-r{position:relative;background:#0b241e;min-height:100%;display:flex;align-items:center}
/* a strict 16:9 box: YouTube letterboxes with black bars the moment the
   container is any other shape, and the text column used to dictate it */
.vid-box{position:relative;width:100%;aspect-ratio:16/9}
.vid-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-face{position:absolute;inset:0;cursor:pointer;overflow:hidden;background:var(--jade-900)}
/* the YouTube poster for this video carries its own beige matting top and
   bottom; a slight scale crops it so the still reads edge to edge like the
   playing video does */
.vid-face img{width:100%;height:100%;object-fit:cover;opacity:.8;transform:scale(1.17);transition:transform .8s,opacity .4s}
.vid-face:hover img{transform:scale(1.21);opacity:.9}
.vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:rgba(193,64,47,.94);display:flex;align-items:center;justify-content:center;transition:transform .35s,background .35s;box-shadow:0 8px 30px -8px rgba(0,0,0,.6)}
.vid-face:hover .vid-play{transform:translate(-50%,-50%) scale(1.08);background:var(--cinnabar-deep)}
.vid-play svg{width:20px;height:22px;margin-left:4px;fill:#fff}
.vid-alt{position:absolute;bottom:.75rem;right:.9rem;font-size:.74rem;color:rgba(255,255,255,.7);z-index:4;background:rgba(0,0,0,.42);padding:.28rem .6rem;border-radius:5px}
.vid-alt:hover{color:#fff}

/* ================= method ================= */
.pill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem 2rem;position:relative;z-index:2}
.pill .g{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--didone);font-weight:700;font-size:1.02rem;letter-spacing:.02em;color:var(--cinnabar);margin-bottom:.85rem;background:rgba(193,64,47,.04);transition:transform .4s,background .4s,border-color .4s}
.pill:hover .g{transform:translateY(-4px);background:rgba(193,64,47,.09);border-color:rgba(193,64,47,.3)}
.pill h4{font-size:1.16rem;margin-bottom:.4rem}
.pill p{font-size:.92rem;font-weight:300;color:var(--ink-3);line-height:1.65}

/* ================= story (no photo) ================= */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start;position:relative;z-index:2}
.tl{position:relative}
.tl::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:rgba(246,242,234,.16)}
.tl-i{position:relative;padding:0 0 1.7rem 2.4rem}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:"";position:absolute;left:-5px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--cinnabar);box-shadow:0 0 0 4px rgba(193,64,47,.16)}
.tl-y{font-family:var(--didone);font-size:1.45rem;color:var(--brass-soft);line-height:1}
.tl-i h4{font-size:1.24rem;margin:.3rem 0 .4rem}
.tl-i p{font-size:.94rem;font-weight:300;color:rgba(246,242,234,.66);max-width:34rem}
.story-quote{font-family:var(--didone);font-style:italic;font-size:1.3rem;line-height:1.5;color:rgba(246,242,234,.85);border-left:2px solid var(--brass);padding-left:1.3rem;margin-top:1.6rem}
.story-quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.8rem;color:var(--brass-soft);margin-top:.7rem;letter-spacing:.04em}


/* ================= reviews ================= */
.rev{flex:0 0 clamp(272px,27vw,330px);scroll-snap-align:start;padding:1.7rem 1.6rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);display:flex;flex-direction:column;
  transition:transform .35s,box-shadow .35s}
.rev:hover{transform:translateY(-4px);box-shadow:0 14px 30px -22px rgba(11,36,30,.45)}
.rev .st{color:var(--cinnabar);letter-spacing:.16em;font-size:.85rem;margin-bottom:.8rem}
.rev blockquote{font-size:.95rem;font-weight:300;color:var(--ink-2);line-height:1.7;flex:1}
.rev .au{margin-top:1.1rem;display:flex;align-items:center;gap:.65rem}
.rev .av{width:34px;height:34px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;
  justify-content:center;color:var(--jade-700);font-size:.85rem;font-weight:600;flex:0 0 auto}
.rev .nm{font-size:.88rem;font-weight:600;color:var(--ink)}
.rev .sr{font-size:.74rem;color:var(--ink-3)}

/* ================= amenities: compact chips ================= */
.amen{display:flex;flex-wrap:wrap;gap:.5rem;position:relative;z-index:2}
.amen-i{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .95rem;border:1px solid var(--line);
  border-radius:100px;background:var(--white);transition:border-color .3s,transform .3s;white-space:nowrap}
.amen-i:hover{border-color:rgba(47,122,97,.5);transform:translateY(-2px)}
.amen-i::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--cinnabar);opacity:.65}
.amen-i .en{font-size:.86rem;color:var(--ink-2)}

/* ================= cta ================= */
.cta{position:relative;overflow:hidden;border-radius:var(--r);background:linear-gradient(155deg,var(--jade-800),var(--jade-900));color:#fff;padding:3rem 2.2rem;text-align:center}
.cta h2{font-family:var(--didone);font-optical-sizing:auto;font-weight:800;letter-spacing:-.018em;font-size:clamp(1.8rem,3.5vw,2.7rem);position:relative;z-index:2;margin-top:.7rem;color:#fff}
.cta p{position:relative;z-index:2;max-width:34rem;margin:.9rem auto 0;font-weight:300;color:rgba(255,255,255,.75)}
.cta .row{position:relative;z-index:2;display:flex;gap:.7rem;justify-content:center;margin-top:1.7rem;flex-wrap:wrap}
.cta .mt{position:relative;z-index:2;margin-top:1.5rem;font-size:.82rem;color:rgba(255,255,255,.5)}

/* ================= footer: compact bar ================= */
.ft{background:var(--jade-900);color:rgba(246,242,234,.7);padding:2rem 0 1.1rem}
.ft-top{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  padding-bottom:1.25rem;border-bottom:1px solid rgba(246,242,234,.12)}
.ft-id{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}
.ft-logo{height:32px;width:auto}
.ft-links{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;flex:1}
.ft-links a{font-size:.88rem;font-weight:300;color:rgba(246,242,234,.68);transition:color .3s;white-space:nowrap}
.ft-links a:hover{color:#fff}
.ft-act{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.ft-act .tel{font-family:var(--didone);font-weight:800;font-size:1.25rem;color:#fff;white-space:nowrap}
.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1rem}
.ft-meta{font-size:.8rem;color:rgba(246,242,234,.5)}
.ft-meta span{color:rgba(246,242,234,.3);margin:0 .5rem}
.ft-soc{display:flex;gap:1rem}
.ft-soc a{font-size:.8rem;color:rgba(246,242,234,.5);transition:color .3s}
.ft-soc a:hover{color:var(--brass-soft)}

/* ================= gift ================= */
.gift{position:fixed;right:1.3rem;bottom:1.3rem;z-index:200;width:min(330px,calc(100vw - 2.6rem));background:linear-gradient(158deg,var(--jade-800),var(--jade-900));border:1px solid rgba(167,200,182,.32);border-radius:var(--r);box-shadow:0 22px 55px -20px rgba(0,0,0,.6);color:#fff;padding:1.5rem;transform:translateY(140%);opacity:0;transition:transform .8s cubic-bezier(.2,.9,.25,1),opacity .6s;pointer-events:none}
.gift.show{transform:none;opacity:1;pointer-events:auto}
.gift .x{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:rgba(246,242,234,.6);font-size:1rem;transition:background .3s,color .3s}
.gift .x:hover{background:rgba(246,242,234,.1);color:#fff}
.gift .cn{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:.4rem}
.gift .pct{font-family:var(--didone);font-size:2.4rem;line-height:1;color:#fff}
.gift .pct span{color:var(--cinnabar)}
.gift p{font-size:.86rem;font-weight:300;color:rgba(246,242,234,.65);margin:.5rem 0 1rem}
.gift .btn{width:100%;justify-content:center}


/* ================= responsive ================= */
@media (max-width:900px){
  .nav-tg{display:flex}
  .nav-r{position:fixed;inset:0;width:100vw;height:100dvh;background:linear-gradient(165deg,var(--jade-800),var(--jade-900));
    flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;padding:4.5rem 2rem;
    opacity:0;visibility:hidden;transform:scale(1.03);
    transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .4s;z-index:155}
  .nav-r.open{opacity:1;visibility:visible;transform:none}
  .nav-close{display:flex}
  .nav-r a.nl{color:#fff!important;font-family:var(--didone);font-weight:800;font-size:1.7rem;
    opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s}
  .nav-r.open a.nl{opacity:1;transform:none}
  .nav-r.open a.nl:nth-of-type(1){transition-delay:.10s}
  .nav-r.open a.nl:nth-of-type(2){transition-delay:.16s}
  .nav-r.open a.nl:nth-of-type(3){transition-delay:.22s}
  .nav-r.open a.nl:nth-of-type(4){transition-delay:.28s}
  .nav-r a.nl::after{display:none}
  .nav-r .nav-tel{color:rgba(255,255,255,.7)!important;font-size:1rem;margin-top:.4rem}
  .nav-r .btn-seal{padding:.85rem 1.8rem;font-size:.9rem}
}
@media (max-width:1040px){
  .hero{min-height:clamp(540px,86svh,760px);padding:calc(var(--nav-h) + 1rem) 0 1.2rem}
  .hero-art{width:65%}
  .hero-art::before{width:70%}
  .hero-copy{max-width:60%}
  .hero-bar{grid-template-columns:repeat(2,1fr);row-gap:1rem;padding:1rem .4rem}
  .hb:nth-child(3){border-left:none}
  /* Stacked: figure, then the picker, then the card. Nothing sits above
     the card, so opening one only extends the end of the section instead of
     shoving the list down the page. */
  .bm-stage,.bm-stage.big{grid-template-columns:1fr;gap:1.6rem}
  .bm-fig .bm-figure{max-width:min(56vw,300px);margin-inline:auto}
  .bm-rail{max-width:34rem;margin-inline:auto;width:100%;gap:0}
  .bm-chips{order:1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .bm-head{order:2;min-height:0}
  .bm-head:has(.bm-panel.show){margin-top:1.4rem}
  .bm-idle{display:none}
  .bm-idle-sub{display:none}
  .stmt,.story,.vid{grid-template-columns:1fr;gap:2rem}
  .price{grid-template-columns:repeat(2,1fr)}
  .price .c:nth-child(2){border-right:none}
  .price .c:nth-child(1),.price .c:nth-child(2){border-bottom:1px solid var(--line)}
  .vid-box{min-height:0;aspect-ratio:16/9}
  .vid-r{min-height:0}
  .pill-grid{grid-template-columns:repeat(2,1fr)}
}
/* A wider media column and tighter copy, so the copy column and the 16:9
   frame come out the same height and no jade shows above or below it. */
@media (min-width:1300px){
  .vid{grid-template-columns:.36fr .64fr}
  .vid-l{padding:1.2rem 1.8rem}
  .vid-l p{margin-bottom:1rem}
  .vid-m{margin-top:1rem;padding-top:.9rem}
}
/* Below this the copy column is taller than a 16:9 video beside it, which
   would leave a jade band above and below. Stacking hands the video the full
   card width instead, so it is both larger and exact. */
@media (max-width:1299px){
  .vid{grid-template-columns:1fr}
  .vid-r{min-height:0}
}
/* On a short laptop screen the figure alone is taller than the viewport can
   spare, so the artwork gives up some width and the card slot some height —
   enough for the whole section to land on one screen. */
@media (min-width:1041px) and (max-height:820px){
  .bm-stage{grid-template-columns:minmax(200px,272px) 1fr}
  .bm-stage.big{grid-template-columns:minmax(230px,320px) 1fr}
  .bm-head{min-height:13rem}
  #bodymap.sec{padding-top:3.4rem;padding-bottom:3.4rem}
}
/* From here down the two hero buttons share one row and each label stays on
   a single line: the type scales with the viewport rather than wrapping or
   stacking one button under the other. */
@media (max-width:900px){
  .hero-cta{gap:.6rem;margin-top:1.4rem;flex-wrap:nowrap}
  .hero-cta .btn{padding:.8rem clamp(.35rem,1.9vw,1rem);
    font-size:clamp(.62rem,2.85vw,.9rem);letter-spacing:.01em;white-space:nowrap;
    flex:1 1 0;min-width:0;justify-content:center;text-align:center}
}
@media (max-width:680px){
  .brand img{height:36px}
  /* same hero composition, scaled: art still on the right, copy still left */
  .hero{min-height:clamp(500px,84svh,680px);padding:calc(var(--nav-h) + .9rem) 0 1rem}
  /* on a phone the copy sits over the artwork, so the photograph drops back
     to a soft wash and the cream scrim runs the full width behind the text */
  .hero-art{width:100%}
  .hero-art img{opacity:.26}
  .hero-art::before{width:100%;background:linear-gradient(90deg,#FBF3EE 0%,rgba(251,243,238,.92) 46%,rgba(251,243,238,.72) 100%)}
  .hero-copy{max-width:84%}
  .hero h1{font-size:clamp(1.95rem,8.4vw,2.7rem)}
  .hero-eyebrow{font-size:.68rem}
  .hero-sub{font-size:.9rem;max-width:20rem}
  .hero-bar{grid-template-columns:1fr 1fr;padding:.85rem .2rem;row-gap:.75rem;border-radius:10px}
  .hb{padding:.1rem .7rem;gap:.5rem}
  .hb .ic svg{width:14px;height:14px}
  .hb .ic .k{font-size:.85rem}
  .hb .tx{font-size:.74rem}
  .sec{padding:3.2rem 0}
  .rail-hint{display:none}
  .rail-btn{width:36px;height:36px}
  .svc-card{flex:0 0 min(78vw,280px)}
  .rev{flex:0 0 min(80vw,300px)}
  .amen-i{padding:.45rem .8rem}
  .amen-i .en{font-size:.8rem}
  .price{grid-template-columns:repeat(2,1fr)}
  .hero-mark{gap:.85rem}
  .hero-mark .l1{font-size:1rem}
  .hero-mark .l2{font-size:.8rem}
  .ft-top{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .ft-links{justify-content:flex-start;gap:1rem;order:3}
  .ft-act{order:2}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:.7rem}
  .bm-fig .bm-figure{max-width:min(58vw,250px)}
  .bm-chips{gap:.45rem}
  .bm-chip{padding:.55rem .65rem;gap:.5rem}
  .bm-chip b{font-size:.78rem}
  /* two lines of techniques rather than an ellipsis on a narrow chip */
  .bm-chip i{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* A 250px figure is too small to aim a fingertip at, so the phone drops the
     artwork and its view switch and lets the zone list be the whole control. */
  .bm-fig,.bm-toggle,.bm-view{display:none}
  .bm-rail{max-width:none}
  /* the giant CJK watermark is decorative and was bleeding off the side */
  .ghost{display:none}
  .pin{width:30px;height:30px;margin:-15px 0 0 -15px}
  .pin-lbl{font-size:.66rem;left:22px}
  .pin.flip .pin-lbl{right:22px}
  .bm-top{flex-direction:column;align-items:flex-start;gap:1rem}
  .pill-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}
  .pill .g{width:42px;height:42px;font-size:.9rem;margin-bottom:.6rem}
  .pill h4{font-size:1.05rem}
  .pill p{font-size:.85rem}
  .cta{padding:2.4rem 1.2rem}
  .vid-l{padding:1.8rem 1.25rem}
  .gift{right:.7rem;left:.7rem;bottom:.7rem;width:auto}
}
@media (max-width:440px){
  .hero-copy{max-width:96%}
  /* four tiles as 2x2, not a single tall column */
  .hero-bar{grid-template-columns:repeat(2,1fr);row-gap:.7rem}
  .hb{padding:.1rem .55rem;gap:.45rem}
  .hb:nth-child(3){border-left:none}
  .hb .tx{font-size:.7rem}
}

/* =====================================================================
   INNER PAGES
   Components shared by treatments / services / method / story / visit /
   book / gift-cards / corporate. Same palette and type scale as the home
   page, so nothing here needs its own variables.
   ===================================================================== */

/* ---------- nav: current page ---------- */
.nav-r a.nl.on{color:var(--cinnabar)}
.nav-r a.nl.on::after{width:100%}

/* ---------- page header ---------- */
.phead{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 3.4rem) 0 3rem;
  background:linear-gradient(168deg,var(--jade-900),var(--jade-800));color:rgba(246,242,234,.78)}
.phead.lite{background:var(--cream);color:var(--ink-3)}
.phead-in{position:relative;z-index:2;max-width:46rem}
.phead h1{font-family:var(--didone);font-optical-sizing:auto;font-weight:800;color:#fff;
  font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.08;letter-spacing:-.022em;
  margin:.85rem 0 1rem;text-wrap:balance}
.phead.lite h1{color:var(--ink)}
.phead h1 em{font-style:italic;color:var(--brass-soft)}
.phead.lite h1 em{color:var(--jade-600)}
.phead p{font-size:1.03rem;font-weight:300;line-height:1.72;max-width:38rem}
.phead .btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}

/* breadcrumb */
.crumb{display:flex;align-items:center;gap:.5rem;font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(246,242,234,.5);flex-wrap:wrap}
.phead.lite .crumb{color:var(--ink-3)}
.crumb a{transition:color .3s}
.crumb a:hover{color:var(--brass-soft)}
.phead.lite .crumb a:hover{color:var(--cinnabar)}
.crumb i{font-style:normal;opacity:.45}

/* ---------- prose ---------- */
.prose{max-width:40rem}
.prose p{font-size:1rem;font-weight:300;color:var(--ink-3);line-height:1.78;margin-bottom:1.1rem}
.prose p:last-child{margin-bottom:0}
.prose p strong{font-weight:600;color:var(--ink-2)}
.prose h3{font-size:1.28rem;margin:2rem 0 .7rem}
.prose h3:first-child{margin-top:0}
.sec.jade .prose p{color:rgba(246,242,234,.7)}
.sec.jade .prose p strong{color:#fff}

/* pull quote */
.pull{font-family:var(--didone);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.7rem);
  line-height:1.5;color:var(--jade-800);border-left:2px solid var(--cinnabar);
  padding-left:1.4rem;margin:1.8rem 0}
.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:.8rem;
  color:var(--ink-3);margin-top:.8rem;letter-spacing:.05em}
.sec.jade .pull{color:rgba(246,242,234,.88);border-color:var(--brass)}
.sec.jade .pull cite{color:var(--brass-soft)}

/* ---------- splits and grids ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center;position:relative;z-index:2}
/* A grid item defaults to min-width:auto, so a wide child — the pricing
   tables carry a min-width — sets the whole track's minimum and drags every
   sibling heading and paragraph out past the viewport, where the section's
   overflow:hidden clips them mid-word. The table has its own scroll wrap;
   the track does not need to grow for it. */
.split>*,.g2>*{min-width:0}
.split.narrow{grid-template-columns:.9fr 1.1fr}
.split.wide{grid-template-columns:1.1fr .9fr}
.split.top{align-items:start}
.split-img{position:relative;overflow:hidden;border-radius:var(--r);background:var(--cream-2);aspect-ratio:4/3}
.split-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.split-img:hover img{transform:scale(1.04)}
.split-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.2rem .9rem;
  background:linear-gradient(transparent,rgba(11,36,30,.78));color:#fff;font-size:.82rem;font-weight:300}

.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 2rem;position:relative;z-index:2}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative;z-index:2}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;position:relative;z-index:2}

/* ---------- card ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem;transition:border-color .35s,transform .35s,box-shadow .35s;
  display:flex;flex-direction:column}
.card:hover{border-color:rgba(47,122,97,.42);transform:translateY(-4px);
  box-shadow:0 14px 30px -22px rgba(11,36,30,.5)}
.card h3{font-size:1.16rem;line-height:1.28;margin-bottom:.5rem}
.card h4{font-size:1.05rem;margin-bottom:.4rem}
.card p{font-size:.9rem;font-weight:300;color:var(--ink-3);line-height:1.68;flex:1}
.card .tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--jade-600);margin-bottom:.6rem}
.card .go{font-size:.8rem;font-weight:600;color:var(--cinnabar);display:inline-flex;
  align-items:center;gap:.35rem;transition:gap .3s;margin-top:1rem}
.card:hover .go{gap:.6rem}
.sec.jade .card{background:rgba(246,242,234,.05);border-color:rgba(246,242,234,.16)}
.sec.jade .card p{color:rgba(246,242,234,.66)}
.sec.jade .card:hover{border-color:rgba(167,200,182,.42)}

/* ---------- service detail rows ---------- */
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:start;
  padding:1.75rem 0;border-top:1px solid var(--line);position:relative;z-index:2}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-row:hover .seal{background:rgba(193,64,47,.11);transform:translateY(-3px)}
.svc-row h3{font-size:1.22rem;margin-bottom:.4rem}
.svc-row .tx{font-size:.77rem;font-weight:600;letter-spacing:.04em;color:var(--jade-600);
  margin-bottom:.55rem;display:block}
.svc-row p{font-size:.94rem;font-weight:300;color:var(--ink-3);line-height:1.72;max-width:44rem}
.svc-row .act{align-self:center}

/* ---------- pricing table ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;z-index:2}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:420px}
.tbl th,.tbl td{text-align:left;padding:.95rem 1rem;border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brass);border-bottom-color:rgba(25,26,22,.18)}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.tbl .amt{font-family:var(--didone);font-weight:800;font-size:1.22rem;color:var(--jade-800)}
.tbl tbody tr{transition:background .3s}
.tbl tbody tr:hover{background:rgba(42,99,83,.035)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:1.7rem;position:relative;z-index:2}
.steps.two{grid-template-columns:repeat(2,1fr);gap:1.9rem 2.6rem}
.step{position:relative;padding-left:4.2rem;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-.15rem;
  font-family:var(--didone);font-weight:800;font-size:1.7rem;color:var(--cinnabar);
  opacity:.85;line-height:1}
.step h4{font-size:1.14rem;margin-bottom:.4rem}
.step p{font-size:.94rem;font-weight:300;color:var(--ink-3);line-height:1.7}
.sec.jade .step p{color:rgba(246,242,234,.66)}
.sec.jade .step::before{color:var(--brass-soft)}

/* ---------- FAQ ---------- */
.faq{max-width:46rem;position:relative;z-index:2}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-family:var(--didone);font-weight:800;font-size:1.05rem;color:var(--ink);
  letter-spacing:-.008em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cinnabar)}
.faq summary::after{content:"";position:absolute;right:.35rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .35s;opacity:.55}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{font-size:.94rem;font-weight:300;color:var(--ink-3);line-height:1.75;
  padding:0 2.4rem 1.25rem 0;margin:0}

/* ---------- forms ---------- */
.form{position:relative;z-index:2;max-width:34rem}
.fld{margin-bottom:1.05rem}
.fld label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brass);margin-bottom:.45rem}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--sans);font-size:.95rem;
  color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:.78rem .9rem;transition:border-color .3s,box-shadow .3s}
.fld textarea{min-height:130px;resize:vertical;line-height:1.65}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--jade-600);
  box-shadow:0 0 0 3px rgba(42,99,83,.1)}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4rem;
  background-repeat:no-repeat;background-position:right .8rem center;background-size:15px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f67' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.form .btn{margin-top:.4rem}
.form-note{font-size:.82rem;font-weight:300;color:var(--ink-3);margin-top:1rem;line-height:1.6}
.form-msg{display:none;margin-top:1rem;padding:.85rem 1rem;border-radius:6px;font-size:.9rem;
  background:rgba(42,99,83,.08);border:1px solid rgba(42,99,83,.25);color:var(--jade-800)}
.form-msg.on{display:block}

/* ---------- contact tiles ---------- */
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative;z-index:2}
.info-i{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:1.4rem 1.35rem;transition:border-color .3s,transform .3s}
.info-i:hover{border-color:rgba(47,122,97,.4);transform:translateY(-3px)}
.info-i .ic{display:block;margin-bottom:.6rem;color:var(--cinnabar)}
.info-i .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.info-i h4{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--sans);color:var(--brass);margin-bottom:.5rem}
.info-i p,.info-i a{font-size:.96rem;color:var(--ink-2);line-height:1.6;display:block}
.info-i a:hover{color:var(--cinnabar)}
.info-i strong{display:block;font-family:var(--didone);font-weight:800;font-size:1.14rem;color:var(--ink)}

/* ---------- map ---------- */
.map{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--cream-2);aspect-ratio:16/7;z-index:2}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85)}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;position:relative;z-index:2}
.mem{text-align:center}
.mem .av{width:112px;height:112px;margin:0 auto .95rem;border-radius:50%;overflow:hidden;
  background:linear-gradient(158deg,var(--jade-700),var(--jade-900));display:flex;
  align-items:center;justify-content:center;color:#fff;font-family:var(--didone);
  font-weight:800;font-size:2.1rem;box-shadow:0 12px 26px -16px rgba(11,36,30,.6)}
.mem .av img{width:100%;height:100%;object-fit:cover}
.mem h4{font-size:1.16rem;margin-bottom:.2rem}
.mem .role{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.6rem;display:block}
.mem p{font-size:.9rem;font-weight:300;color:var(--ink-3);line-height:1.68}
.sec.jade .mem p{color:rgba(246,242,234,.66)}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;z-index:2}
.tier{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:1.5rem 1.3rem;text-align:center;transition:border-color .35s,transform .35s}
.tier:hover{border-color:rgba(193,64,47,.4);transform:translateY(-4px)}
.tier.feat{border-color:rgba(193,64,47,.45);background:linear-gradient(180deg,rgba(193,64,47,.045),var(--white))}
.tier .lab{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);display:block;margin-bottom:.6rem}
.tier .amt{font-family:var(--didone);font-weight:800;font-size:1.85rem;color:var(--jade-800);
  line-height:1;display:block}
.tier .sub{font-size:.85rem;color:var(--ink-3);margin-top:.5rem;line-height:1.55;display:block}
.tier .sub b{color:var(--cinnabar);font-weight:600}

/* ---------- callout ---------- */
.callout{position:relative;z-index:2;border-left:2px solid var(--cinnabar);
  background:rgba(193,64,47,.04);border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.4rem}
.callout p{font-size:.92rem;font-weight:300;color:var(--ink-2);line-height:1.7;margin:0}
.callout p+p{margin-top:.6rem}
.sec.jade .callout{background:rgba(246,242,234,.05);border-color:var(--brass)}
.sec.jade .callout p{color:rgba(246,242,234,.75)}

/* ---------- checklist ---------- */
.checks{list-style:none;position:relative;z-index:2;display:grid;gap:.75rem}
.checks li{position:relative;padding-left:1.8rem;font-size:.95rem;font-weight:300;
  color:var(--ink-3);line-height:1.68}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:5px;
  border-left:1.6px solid var(--cinnabar);border-bottom:1.6px solid var(--cinnabar);
  transform:rotate(-45deg)}
.checks li b{font-weight:600;color:var(--ink-2)}
.sec.jade .checks li{color:rgba(246,242,234,.7)}
.sec.jade .checks li b{color:#fff}
.sec.jade .checks li::before{border-color:var(--brass-soft)}

/* ---------- treatment zone index ---------- */
.zone-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;position:relative;z-index:2}
.zone{display:flex;align-items:flex-start;gap:1rem;padding:1.05rem 1.2rem;border-radius:var(--r);
  border:1px solid rgba(246,242,234,.14);background:rgba(246,242,234,.04);text-align:left;width:100%;
  transition:border-color .35s,background .35s,transform .35s}
.zone:hover{border-color:rgba(167,200,182,.42);background:rgba(246,242,234,.07);transform:translateY(-3px)}
.zone .zt{display:block;min-width:0}
.zone b{display:block;font-family:var(--didone);font-weight:800;font-size:1.02rem;
  line-height:1.25;letter-spacing:-.01em;margin-bottom:.25rem;color:#fff}
.zone i{display:block;font-style:normal;font-size:.84rem;font-weight:300;
  color:rgba(246,242,234,.6);line-height:1.6}
.zone .tx{font-size:.74rem;font-weight:600;color:var(--brass-soft);margin-top:.45rem;display:block}

/* ---------- compact CTA band ---------- */
.band{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;padding:2.1rem 2.2rem;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(155deg,var(--jade-800),var(--jade-900));color:#fff}
.band h3{font-size:clamp(1.3rem,2.4vw,1.8rem);color:#fff;margin-bottom:.4rem}
.band p{font-size:.94rem;font-weight:300;color:rgba(255,255,255,.72);max-width:34rem}
.band .row{display:flex;gap:.7rem;flex-wrap:wrap}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--cinnabar);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 6px 0;font-size:.85rem;font-weight:600}
.skip:focus{left:0}

/* =====================================================================
   INNER PAGE RESPONSIVE
   ===================================================================== */
@media (max-width:1040px){
  .phead{padding:calc(var(--nav-h) + 2.6rem) 0 2.4rem}
  .split,.split.narrow,.split.wide{grid-template-columns:1fr;gap:2rem}
  .split.flip .split-img{order:-1}
  .g3,.g4,.info,.team,.tiers{grid-template-columns:repeat(2,1fr)}
  .svc-row{grid-template-columns:auto 1fr;gap:1.2rem}
  .svc-row .act{grid-column:2;align-self:start;justify-self:start;margin-top:.3rem}
}
@media (max-width:680px){
  .phead{padding:calc(var(--nav-h) + 2rem) 0 2rem}
  .phead p{font-size:.95rem}
  .g2,.g3,.g4,.info,.team,.tiers,.zone-list,.fld-2{grid-template-columns:1fr}
  .svc-row{grid-template-columns:1fr;gap:.85rem;padding:1.5rem 0}
  .svc-row .act{grid-column:1;justify-self:start}
  .svc-row .seal{width:44px;height:44px;font-size:1.1rem}
  .steps.two{grid-template-columns:1fr}
  .step{padding-left:3.4rem}
  .step::before{font-size:1.45rem}
  .band{padding:1.7rem 1.3rem;gap:1.3rem}
  .map{aspect-ratio:4/3}
  .card{padding:1.35rem 1.25rem}
  .faq summary{font-size:1rem;padding-right:2rem}
}

/* =====================================================================
   RESPONSIVE REFINEMENTS
   Added on top of the original breakpoints: a large-screen cap, a
   tablet band the original skipped, landscape-phone handling for the
   full-height hero, and safety rules for long unbroken strings.
   ===================================================================== */

/* long words / URLs must never push a card wider than the viewport */
h1,h2,h3,h4,p,li,blockquote,a,td,th{overflow-wrap:break-word}

/* very large screens: stop the measure from becoming unreadable */
@media (min-width:1600px){
  .wrap{width:min(1280px,90vw)}
  .hero{min-height:clamp(680px,88svh,920px)}
  .hero-copy{max-width:40rem}
}

/* tablet band the original stylesheet stepped over */
@media (max-width:1240px) and (min-width:1041px){
  .hero-copy{max-width:33rem}
  .pill-grid{gap:1.3rem 1.6rem}
  .stmt{gap:2.6rem}
}

/* landscape phones: a 94svh hero swallows the whole screen */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:calc(var(--nav-h) + 1.6rem) 0 1.6rem}
  .hero-art{width:58%}
  .hero h1{font-size:clamp(1.6rem,4.4vw,2.2rem)}
  .hero-sub{font-size:.88rem}
  .nav-r{padding:3.5rem 2rem;gap:1rem;overflow-y:auto}
  .nav-r a.nl{font-size:1.25rem}
}

/* coarse pointers: hover-only affordances need to be visible by default */
@media (hover:none){
  .pin-lbl{opacity:.85}
  .rail-hint{display:block}
}

/* print */
@media print{
  .nav,.gift,.strip,.rail-btns,.vid-r,.bm-load,.skip{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding:1.2rem 0;background:#fff!important;color:#000!important}
  .sec.jade,.sec.jade h1,.sec.jade h2,.sec.jade h3,.sec.jade h4,.sec.jade p{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* =====================================================================
   SERVICE GRID — flip cards
   The photo turns over to reveal the treatment in a sentence, so a card
   never changes height and the grid never reflows around an open one.
   Copy for the back face is the short `s` field in data.js; the long
   version stays on the services page.
   ===================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
  align-items:start;position:relative;z-index:2}

.sv{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .35s,box-shadow .35s}
.sv:hover{border-color:rgba(47,122,97,.42);box-shadow:0 14px 30px -22px rgba(11,36,30,.5)}
.sv.open{border-color:rgba(193,64,47,.42);box-shadow:0 18px 38px -24px rgba(11,36,30,.55)}

/* ---- the flipping panel ---- */
.sv-flip{position:relative;aspect-ratio:5/4;perspective:1100px}
.sv-face{position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .62s cubic-bezier(.3,.8,.3,1)}

.sv-front{overflow:hidden;background:linear-gradient(168deg,var(--jade-800),var(--jade-900))}
.sv-front img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.sv:hover .sv-front img{transform:scale(1.05)}
.sv.open .sv-front{transform:rotateY(180deg)}

.sv-back{transform:rotateY(-180deg);overflow:hidden;
  background:linear-gradient(158deg,var(--jade-800),var(--jade-900));
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.1rem 1.15rem 1.05rem;
  /* out of the tab order until the card is turned; hidden at the halfway
     point on the way back so it never shows through the photo */
  visibility:hidden;transition:transform .62s cubic-bezier(.3,.8,.3,1),visibility 0s .31s}
.sv.open .sv-back{transform:rotateY(0);visibility:visible;
  transition:transform .62s cubic-bezier(.3,.8,.3,1),visibility 0s 0s}

.sv-back p{position:relative;font-size:.85rem;font-weight:300;line-height:1.62;
  color:rgba(246,242,234,.82);margin:0 0 auto;
  /* a longer translation should scroll rather than spill */
  overflow:auto;padding-bottom:.6rem}
.sv-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding-top:.7rem;border-top:1px solid rgba(246,242,234,.16);flex:0 0 auto}
.sv-back .svc-pr i{background:rgba(246,242,234,.24)}
.sv-back .svc-pr i.on{background:var(--brass-soft)}
.sv-back .go{font-size:.82rem;font-weight:600;color:#fff;
  display:inline-flex;align-items:center;gap:.35rem;transition:gap .3s,color .3s}
.sv-back .go:hover{gap:.6rem;color:var(--brass-soft)}

.sv-ix{position:absolute;top:.7rem;right:.8rem;font-family:var(--didone);
  font-weight:800;font-size:.82rem;letter-spacing:.02em;color:#fff;
  background:rgba(11,36,30,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.22rem .5rem;border-radius:5px;line-height:1.2}

/* ---- header row is the toggle ---- */
.sv-head{margin:0}
.sv-btn{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;text-align:left;padding:1.15rem 1.15rem 1.2rem;cursor:pointer;
  font-family:inherit;color:inherit;background:none;border:0}
.sv-btn .nm{display:block;font-family:var(--didone);font-optical-sizing:auto;
  font-weight:800;font-size:1.1rem;line-height:1.25;letter-spacing:-.012em;
  color:var(--ink);transition:color .3s;
  /* reserve two lines so a one-line name does not leave its card short
     and stagger the row */
  min-height:2.5em}
.sv-btn:hover .nm{color:var(--cinnabar)}
.sv-btn>span:first-child{min-width:0}

.sv-tog{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);transition:background .35s,border-color .35s,color .35s,transform .5s}
.sv-tog svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sv-btn:hover .sv-tog{border-color:var(--jade-600)}
.sv.open .sv-tog{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff;
  transform:rotate(180deg);box-shadow:0 6px 16px -8px rgba(193,64,47,.6)}

@media (prefers-reduced-motion:reduce){
  .sv-face,.sv-tog,.sv-front img{transition:none}
}

/* ---- service rows on the services page get their photo too ---- */
.svc-row .shot{width:132px;aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;
  background:var(--cream-2);flex:0 0 auto}
.svc-row .shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.svc-row:hover .shot img{transform:scale(1.05)}
.svc-row .tx .svc-pr{display:inline-flex;vertical-align:middle}

@media (max-width:1240px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-row .shot{width:112px}
}
/* The figures in these tables are short, so on a phone they are sized to
   fit the screen outright rather than hiding a column behind a sideways
   scroll. The wrap still scrolls if a longer label ever needs it. */
@media (max-width:680px){
  .tbl{min-width:0;font-size:.86rem}
  .tbl th,.tbl td{padding:.7rem .4rem}
  .tbl thead th{font-size:.6rem;letter-spacing:.05em}
  .tbl .amt{font-size:1rem}
  .tbl td:first-child,.tbl th:first-child{padding-left:0}
  .tbl td:last-child,.tbl th:last-child{padding-right:0}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .sv-flip{aspect-ratio:16/9}
  .sv-back{padding:1rem 1.1rem .95rem}
  /* one card per row, so nothing needs equalising */
  .sv-btn .nm{min-height:0}
  .svc-row .shot{width:100%;aspect-ratio:16/9}
}