/* Mia Rose Med Spa "boutique clinical atelier" (Cass 2026-07-17 image-ready). Warm PORCELAIN ground + one
   muted ROSE accent + deep warm ink. Cormorant (airy display) + Figtree (body). Calm, considered, editorial.
   box==image placeholder boxes (real gen images drop in tomorrow). THE CONSIDERED LINE: a rose thread draws down
   the page margin on scroll + rose node on each eyebrow. clamp()/calc() spaced. */
:root{
  --porcelain:#F6F1EC; --clay:#E4D8CE; --ink:#2A2320; --ink2:#5B5049; --stone:#9A9084;
  --rose:#B98A8E; --rose2:#C89DA0; --rose-wash:#EFE2E1; --paper:#FDFBF9;
  --line:rgba(42,35,32,.12); --line-rose:rgba(185,138,142,.34);
  --wrap:74rem; --gut:clamp(1.15rem, 4vw, 2.6rem); --rad:5px;
  --f-disp:"Cormorant",Georgia,"Times New Roman",serif; --f-body:"Figtree",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--porcelain);color:var(--ink);line-height:1.66;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:44rem}
.center{text-align:center}
.center-x{margin-inline:auto}
.accent{color:var(--rose)}

/* box==image figure (real images drop into these exact boxes tomorrow) */
.fig{overflow:hidden;border-radius:var(--rad);background:var(--clay)}
.fig img{width:100%;height:100%;object-fit:cover;display:block}
/* labeled placeholder (on-brand, clearly a placeholder-for-tomorrow, NOT a broken box) */
.fig--ph{position:relative;background:linear-gradient(135deg, var(--clay), var(--porcelain));border:1px dashed var(--line-rose);display:grid;place-items:center;text-align:center}
.ph{display:flex;flex-direction:column;gap:.3rem;padding:1rem;max-width:92%}
.ph__slot{font-family:var(--f-body);font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--rose)}
.ph__desc{font-family:var(--f-disp);font-style:italic;font-size:clamp(1rem, .92rem + .35vw, 1.28rem);color:var(--ink2);line-height:1.28}
.ph__ar{font-family:var(--f-body);font-size:.66rem;font-weight:600;letter-spacing:.1em;color:var(--stone)}

/* eyebrow + rose node (the considered line touches each section) */
.eyebrow{position:relative;font-family:var(--f-body);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--rose);opacity:.65}
.center .eyebrow{justify-content:center}
.h2{font-family:var(--f-disp);font-weight:500;font-size:clamp(2.1rem, 1.3rem + 3vw, 3.6rem);line-height:1.06;margin-top:.6rem;color:var(--ink);letter-spacing:-.01em}
.lede{font-size:clamp(1.02rem, .98rem + .3vw, 1.18rem);color:var(--ink2);max-width:40rem;margin-top:1rem}
.body{font-size:1.06rem;margin-top:1rem;color:var(--ink2)}

/* fine rose seam under headings (opacity-armed + keyframe scaleX -- HS deadlock lesson) */
.seam{height:1px;width:100%;max-width:15rem;transform-origin:left center;
  background:linear-gradient(90deg, var(--rose) 0%, var(--rose2) 60%, transparent)}
.seam--center{margin-inline:auto;transform-origin:center}
.js-ready .seam{opacity:0}
.js-ready .seam.is-in{opacity:1;animation:seamdraw 1s cubic-bezier(.42,0,.18,1) both}
@keyframes seamdraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.js-ready .seam{opacity:1!important;animation:none!important}}

/* THE CONSIDERED LINE: a continuous rose thread down the page margin, drawn on scroll (scaleY fill). base (no-JS)
   = full static line; JS sets --sp (0..1 scroll progress); reduced-motion -> full static. Only shown where the
   centered wrap leaves guaranteed margin (>= 1240px), so it never overlaps content. */
.spine{display:none}
@media (min-width:1240px){
  .spine{display:block;position:fixed;top:0;bottom:0;left:calc((100vw - var(--wrap)) / 2 - 1.65rem);width:9px;z-index:5;pointer-events:none}
  .spine__track{position:absolute;top:0;bottom:0;left:4px;width:1px;background:rgba(185,138,142,.2)}
  .spine__fill{position:absolute;top:0;left:4px;width:1px;height:100%;transform-origin:top center;transform:scaleY(var(--sp, 1));background:linear-gradient(180deg, var(--rose), var(--rose2))}
  .spine__node{position:absolute;left:1px;width:7px;height:7px;border-radius:50%;background:var(--porcelain);border:1.5px solid var(--rose)}
}
@media (prefers-reduced-motion:reduce){.spine__fill{transform:scaleY(1)!important}}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--f-body);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:.95rem 1.9rem;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn--rose{background:var(--rose);color:#fff}
.btn--rose:hover{background:var(--rose2)}
.btn--ghost{border-color:var(--rose);color:var(--rose)}
.btn--ghost:hover{background:var(--rose);color:#fff}
.btn--lg{padding:1.1rem 2.2rem;font-size:.84rem}
.btn--light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink)}

.nav{position:sticky;top:0;z-index:50;background:rgba(246,241,236,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .24s}
.nav[data-nav-state="solid"]{background:var(--porcelain)}
.nav__inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:.85rem var(--gut);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__brand{min-width:0}
/* type-set wordmark (Cormorant "Mia Rose" + tracked "MED SPA") -- no image, no dark-footer blend pitfall */
.nav__word{display:inline-flex;align-items:baseline;gap:.5rem;min-width:0}
.nav__word-a{font-family:var(--f-disp);font-weight:600;font-size:1.6rem;letter-spacing:.01em;color:var(--ink);white-space:nowrap}
.nav__word-b{font-family:var(--f-body);font-weight:600;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rose)}
.nav__links{display:none;list-style:none;gap:1.7rem}
.nav__links a{font-family:var(--f-body);font-size:.8rem;font-weight:600;color:var(--ink2);transition:color .2s}
.nav__links a:hover,.nav__links a.is-active{color:var(--rose)}
.nav__cta{padding:.6rem 1.25rem;font-size:.7rem}

/* HERO: calm warm porcelain full-bleed; the placeholder box is a porcelain/clay tint tonight (real image drops
   behind the text tomorrow via the wired <picture>). Text is DARK on the light hero (no scrim needed). */
.hero{position:relative;overflow:hidden;min-height:clamp(29rem, 76vh, 42rem);display:flex;align-items:center;background:linear-gradient(140deg, var(--clay), var(--porcelain) 58%, #F1E7E4)}
.hero__ph-tag{position:absolute;right:.9rem;bottom:.9rem;z-index:1;font-family:var(--f-body);font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);background:rgba(255,255,255,.6);padding:.25rem .55rem;border-radius:2px}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut)}
.hero__panel{max-width:39rem}
.hero__title{font-family:var(--f-disp);font-weight:500;font-size:clamp(2.7rem, 1.5rem + 5.4vw, 5.4rem);line-height:1.02;letter-spacing:-.015em;margin-top:.7rem;color:var(--ink)}
.hero__title .accent{color:var(--rose);font-style:italic}
.hero__seam{margin-top:1.3rem}
.hero__sub{font-family:var(--f-body);font-size:clamp(1.04rem, .96rem + .5vw, 1.28rem);color:var(--ink2);margin-top:1.4rem;max-width:35rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__where{font-family:var(--f-body);margin-top:1.5rem;font-size:.82rem;letter-spacing:.04em;color:var(--stone)}

.section{padding-block:clamp(3.4rem, 8vw, 5.8rem)}
.band-clay{background:var(--clay)}
.band-rose{background:var(--rose-wash)}
.band-ink{background:var(--ink);color:var(--porcelain)}
.band-ink .h2{color:#fff}.band-ink .eyebrow{color:var(--rose2)}.band-ink .eyebrow::before{background:var(--rose2)}
.band-ink .lede,.band-ink .body{color:#E6DAD6}
.band-ink .fig--ph{background:linear-gradient(135deg, #3B322C, #2A2320);border-color:rgba(200,157,160,.35)}
.band-ink .ph__desc{color:#E6DAD6}.band-ink .ph__slot{color:var(--rose2)}

/* full-bleed image band (treatment-room / lounge) -- placeholder box is TALLER on mobile, full-wide desktop (<picture>-ready) */
.band-figure{position:relative;overflow:hidden}
.band-figure .fig{border-radius:0}
.band-figure--wide .fig{aspect-ratio:4 / 5}

.split{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem, 4vw, 3rem);align-items:center}

/* gallery mosaic: box==image; talls (4:5) span 2 rows, squares 1/1. dense -> no holes. */
.mosaic{margin-top:clamp(1.6rem, 4vw, 2.5rem);display:grid;grid-template-columns:repeat(2, 1fr);gap:.7rem;grid-auto-flow:dense}
.mosaic .fig{aspect-ratio:1 / 1;border-radius:var(--rad)}
.mosaic .fig--tall{aspect-ratio:auto;grid-row:span 2}

.accent-row{margin-top:2.25rem;display:grid;grid-template-columns:repeat(3, 1fr);gap:.9rem;align-items:start}

/* services register (consultation-routed; NO prices) */
.svc-list{margin-top:clamp(1.6rem, 4vw, 2.5rem);border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:baseline;padding-block:1.15rem;border-bottom:1px solid var(--line)}
.svc-row__name{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.3rem, 1.1rem + .6vw, 1.7rem);color:var(--ink)}
.svc-row__sub{grid-column:1 / -1;font-size:.98rem;color:var(--ink2);margin-top:.25rem}
.svc-row__cta{font-family:var(--f-body);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);white-space:nowrap}

/* consultation form (demo; NO phone/email published -- honest concept form) */
.cform{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.6rem}
.cform label{display:block;font-family:var(--f-body);font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:.4rem}
.cform input,.cform textarea{width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--porcelain);border:1px solid var(--line);border-radius:var(--rad);padding:.85rem .95rem}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--rose)}
.cform textarea{min-height:7rem;resize:vertical}
.cform__note{font-size:.82rem;color:var(--stone);margin-top:.2rem}

/* footer: deep warm ink (the one dark band). Wordmark TYPE-SET here too (light on dark -> no blend). */
.footer{background:var(--ink);color:var(--porcelain);padding-top:clamp(3rem, 6vw, 4rem)}
.footer__inner{display:flex;flex-direction:column;gap:2rem}
.footer__brand .nav__word-a{color:#fff}.footer__brand .nav__word-b{color:var(--rose2)}
.footer__tag{font-family:var(--f-disp);font-style:italic;font-size:1.2rem;margin-top:.7rem;color:#E6DAD6}
.footer__nav{margin-top:1.1rem}
.footer__nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.footer__nav a{font-family:var(--f-body);font-size:.8rem;font-weight:600;color:#D6C9C4}
.footer__nav a:hover{color:var(--rose2)}
.footer__loc p{color:#E0D3CE;font-size:.95rem;line-height:1.75}
.footer__loc-title{font-family:var(--f-body);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;margin-bottom:.4rem;color:var(--rose2)}
.footer__legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(230,218,214,.16);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding-bottom:6rem}
.footer__legal p{color:#B3A49E;font-size:.8rem}
.footer__legal-cta{color:var(--rose2);font-family:var(--f-body);font-weight:600;letter-spacing:.06em;font-size:.82rem}

.mobar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--porcelain);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(42,35,32,.08)}
.mobar a{flex:1;text-align:center;padding:1rem;font-family:var(--f-body);font-weight:600;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.mobar__alt{color:var(--ink);border-right:1px solid var(--line)}
.mobar__cta{background:var(--rose);color:#fff}

[data-reveal]{opacity:1}
@media (prefers-reduced-motion:no-preference){
  [data-reveal].reveal-init{opacity:0;transform:translateY(14px)}
  [data-reveal].reveal-in{opacity:1;transform:none;transition:opacity .5s ease,transform .55s ease}
}

@media (min-width:850px){
  .nav__links{display:flex}
  .mobar{display:none}
  .footer__legal{padding-bottom:1.5rem}
  .footer__inner{flex-direction:row;justify-content:space-between}
  .split{grid-template-columns:1fr 1fr}
  .split--wide{grid-template-columns:1.1fr 1fr}
  .mosaic{grid-template-columns:repeat(4, 1fr)}
  .band-figure--wide .fig{aspect-ratio:16 / 9}
}