/* ==============================================================
   SOMA VITA — the wellness house at The KOHO Air Hotel
   --------------------------------------------------------------
   Loaded only on the wellness-*.html pages, after assets/site.css.
   Everything is scoped to body.sv, so no other page on the KOHO
   site is affected by anything in this file.

   The idea: identical chrome, different room. The header, the
   navigation and the footer stay exactly as they are everywhere
   else on the site. The content area between them shifts to Soma
   Vita's own palette — cool porcelain, indigo and the blue-violet
   gradient from the Soma Vita mark.
   ============================================================== */

/* ---------- palette shift, content area only ---------- */
body.sv{
  --ink:#1B1D33;              /* indigo-black replaces KOHO teal-black */
  --bone:#F7F7FC;             /* cool porcelain replaces warm bone */
  --sand:#ECEBF8;             /* section tint */
  --sea:#4A5BD4;              /* links, ticks, focus */
  --brass:#9B6FD8;            /* accents, eyebrows on dark */
  --clay:#7E7FAE;             /* eyebrows, rules — cool, not teak */
  --line:rgba(27,29,51,.13);
  --soft:rgba(27,29,51,.70);

  --sv-grad:linear-gradient(100deg,#4F63E8 0%,#8A6FD4 50%,#D77FB8 100%);
  --sv-glow:0 14px 36px -12px rgba(90,105,230,.6);
  --sv-field:#fff;
}

/* ---------- but the chrome stays KOHO ----------
   Pinned back to the hotel's own tokens so the header, the mobile
   menu and the footer are pixel-identical to every other page. */
body.sv header,
body.sv #mobnav,
body.sv footer,
body.sv .mbar{
  --ink:#152A2E;
  --bone:#FAF7F1;
  --sand:#EBE3D6;
  --sea:#1B5F6B;
  --brass:#2FA9A6;
  --clay:#A9855C;
  --line:rgba(21,42,46,.12);
  --soft:rgba(21,42,46,.70);
}

/* ---------- the sub-brand bar ----------
   Sits directly under the header on Soma Vita pages. This is the
   handover: you are still in the hotel, but you have walked into
   the spa. */
.sv-bar{
  background:#191B33;
  color:#F2F2FA;
  position:sticky;
  top:67px;            /* sits directly under the compact header */
  z-index:60;
  padding:16px 0;
}
.sv-bar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sv-grad);
}
.sv-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sv-bar .sv-id{display:flex;align-items:center;gap:14px}
.sv-bar img{height:34px;width:34px;object-fit:contain;flex:none}
.sv-bar .nm{font-family:'Cormorant Garamond',serif;font-size:1.16rem;letter-spacing:.30em;
  text-transform:uppercase;line-height:1}
.sv-bar .nm small{display:block;font-family:'Jost',sans-serif;font-size:.47rem;letter-spacing:.34em;
  opacity:.62;margin-top:5px}
.sv-bar .tag{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;opacity:.72}
.sv-bar nav ul{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.sv-bar nav a{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;opacity:.72;transition:opacity .3s}
.sv-bar nav a:hover{opacity:1}
.sv-bar nav a.on{opacity:1;border-bottom:1px solid;border-image:var(--sv-grad) 1;padding-bottom:3px}

/* ---------- hero scrim, violet rather than teal ---------- */
body.sv .hero::after{
  background:
    linear-gradient(180deg,rgba(14,15,34,.72) 0%,rgba(14,15,34,.14) 24%,rgba(20,16,40,.34) 50%,rgba(14,15,34,.82) 100%),
    radial-gradient(64% 52% at 50% 50%,rgba(14,15,34,.62) 0%,rgba(14,15,34,0) 100%);
}
body.sv .hero .sub{opacity:.94}
body.sv .hero .mark{width:70px;margin:0 auto 20px;opacity:.95}

/* ---------- dark sections take the deep indigo ---------- */
body.sv .dark{background:linear-gradient(165deg,#191B33 0%,#241E3C 100%)}
body.sv .tint{background:linear-gradient(160deg,#ECEBF8 0%,#F2ECF6 100%)}
body.sv .ph{background-color:#E4E3F4}
body.sv .ph.todo{background:
  repeating-linear-gradient(135deg,rgba(90,105,230,.10) 0 12px,rgba(90,105,230,.02) 12px 24px),
  linear-gradient(150deg,#EAE9F6 0%,#DCD8EE 55%,#C8C4E6 100%)}
body.sv .ph.todo::after{color:rgba(27,29,51,.55)}
body.sv .ph.todo::before{border-color:rgba(27,29,51,.18)}

/* ---------- cinemagraph tile (.sv-cine) ----------
   The poster is the tile's data-src background, so the cell is filled the
   moment it is reached. The muted loop sits on top at opacity 0 and fades
   in only once the tile is on screen; it is paused and released when it
   scrolls away. Under reduced-motion or Save-Data the loop never loads and
   the poster stays as the final image. Behaviour: assets/soma-vita.js. */
body.sv .sv-cine video{opacity:0;transition:opacity .9s var(--ease)}
body.sv .sv-cine.is-playing video{opacity:1}
@media (prefers-reduced-motion:reduce){
  body.sv .sv-cine video{display:none}
}

/* ---------- the one gradient button ----------
   Reserved for the primary action on a page. Everything else uses
   KOHO's own outline and solid buttons, unchanged. */
.btn-grad{border:0;color:#fff;background:var(--sv-grad);box-shadow:var(--sv-glow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.btn-grad::after{display:none}
.btn-grad:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(90,105,230,.72)}
.dark .btn-grad:hover{color:#fff}

/* ---------- five pillars ---------- */
.sv-pillars{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);
  border-left:1px solid var(--line);margin-top:48px}
.sv-pillar{padding:30px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);position:relative;overflow:hidden}
.sv-pillar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sv-grad);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.sv-pillar:hover::before{transform:scaleY(1)}
.sv-pillar:hover{background:rgba(90,105,230,.05)}
.sv-pillar .n{font-size:.6rem;letter-spacing:.22em;color:var(--brass);display:block;margin-bottom:20px}
.sv-pillar h3{font-size:1.22rem;margin-bottom:8px}
.sv-pillar p{font-size:.8rem;color:var(--soft);margin:0;line-height:1.7}

/* ---------- the longevity lab grid ---------- */
.sv-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(242,242,250,.17);border:1px solid rgba(242,242,250,.17);margin-top:50px}
.sv-mod{background:#191B33;padding:32px 28px;position:relative;overflow:hidden;
  transition:background .55s var(--ease)}
.sv-mod::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sv-grad);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.sv-mod:hover::before{transform:scaleY(1)}
.sv-mod:hover{background:#1E2040}
.sv-mod svg{width:30px;height:30px;stroke:var(--brass);fill:none;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.sv-mod h3{font-size:1.22rem;margin-bottom:7px}
.sv-mod p{font-size:.83rem;color:rgba(242,242,250,.72);margin-bottom:13px;line-height:1.7}
.sv-mod .t{font-size:.59rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}

/* ---------- the circuit ---------- */
.sv-protocol{list-style:none;counter-reset:p;border-top:1px solid var(--line);margin-top:32px}
.sv-protocol li{counter-increment:p;display:grid;grid-template-columns:62px 1fr auto;gap:22px;
  align-items:baseline;padding:21px 0;border-bottom:1px solid var(--line)}
.sv-protocol li::before{content:counter(p,decimal-leading-zero);font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;background:var(--sv-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-protocol strong{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.3rem;
  display:block;margin-bottom:2px}
.sv-protocol p{font-size:.84rem;color:var(--soft);margin:0;max-width:52ch;line-height:1.7}
.sv-protocol .t{font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);white-space:nowrap}
.dark .sv-protocol,.dark .sv-protocol li{border-color:rgba(242,242,250,.18)}
.dark .sv-protocol p{color:rgba(242,242,250,.7)}
.dark .sv-protocol .t{color:var(--brass)}

/* ---------- a visible "needs your input" note ---------- */
.sv-todo{border:1px dashed rgba(90,105,230,.5);background:rgba(90,105,230,.06);
  padding:16px 20px;font-size:.78rem;color:var(--soft);margin-bottom:26px;line-height:1.7}
.sv-todo b{color:var(--sea);font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  font-size:.61rem;display:block;margin-bottom:4px}

/* ---------- enquiry form ---------- */
.sv-form{display:grid;gap:19px;margin-top:30px}
.sv-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:19px}
.sv-form .f{display:grid;gap:7px}
.sv-form label{font-size:.59rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
.sv-form input,.sv-form select,.sv-form textarea{
  font-family:'Jost',sans-serif;font-weight:300;font-size:.94rem;color:var(--ink);
  background:var(--sv-field);border:1px solid var(--line);padding:13px 15px;width:100%;outline:none;
  border-radius:0;transition:border-color .4s,box-shadow .4s}
.sv-form textarea{min-height:124px;resize:vertical}
.sv-form input:focus,.sv-form select:focus,.sv-form textarea:focus{
  border-color:var(--sea);box-shadow:0 0 0 3px rgba(90,105,230,.2)}
.sv-status{display:none;border:1px solid var(--sea);background:rgba(90,105,230,.08);
  padding:14px 18px;font-size:.85rem}
.sv-status.on{display:block}

/* ---------- WhatsApp float ---------- */
.sv-wa{position:fixed;right:20px;bottom:20px;z-index:95;width:52px;height:52px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.24);
  transition:transform .4s var(--ease)}
.sv-wa:hover{transform:scale(1.08)}
.sv-wa svg{width:26px;height:26px;fill:#fff}

/* ---------- responsive ---------- */
@media(max-width:1180px){ .sv-pillars{grid-template-columns:repeat(3,1fr)} }
@media(max-width:980px){
  .sv-mods{grid-template-columns:1fr 1fr}
  .sv-pillars{grid-template-columns:1fr 1fr}
  .sv-bar nav{display:none}
}
@media(max-width:680px){
  .sv-mods,.sv-pillars,.sv-form .frow{grid-template-columns:1fr}
  .sv-protocol li{grid-template-columns:44px 1fr;gap:14px}
  .sv-protocol .t{grid-column:2}
  .sv-bar{padding:14px 0}
  .sv-bar .tag{display:none}
  .sv-wa{bottom:82px}
}

/* ---------- a bug worth knowing about ----------
   In assets/site.css the rule `.dark .cta p` never matches, because
   .cta and .dark sit on the SAME element — so the paragraph inside
   every CTA band inherits the dark ink and vanishes against the dark
   background. Fixed here for the Soma Vita pages.

   The same one-line fix in assets/site.css would repair it across the
   whole hotel site (wellness, rooms, dining, experiences all use this
   band):

       .dark .cta p,.cta.dark p{color:rgba(250,247,241,.7)}
                                                                     */
body.sv .cta.dark p{color:rgba(242,242,250,.74)}

/* ---------- 360 virtual tour embed (wellness.html) ----------
   Self-hosted Panoee export at /tour/soma-vita/. Contained to the
   content column, same rounded treatment as the photo grid below it.
   Height follows a locked aspect-ratio so the box is reserved before
   the iframe loads — no layout shift. */
.sv-tour{position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;
  overflow:hidden;border-radius:3px;background:#0d1414;
  box-shadow:0 30px 60px -40px rgba(21,42,46,.5)}
.sv-tour iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sv-tour-cap{max-width:60ch;margin:16px auto 0;text-align:center;font-size:.86rem;color:var(--soft)}
@media(max-width:680px){ .sv-tour{aspect-ratio:4/3;max-height:none} }