/* v2 — Soft spa premium | dials 7/6/3 | NOT roofing full-bleed overlay */
:root{
  --font:"DM Sans",system-ui,sans-serif;
  --display:"Fraunces",Georgia,serif;
  --radius:20px;
  --max:1100px;
}
body{font-family:var(--font)}
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--color-bg) 88%,transparent);
  backdrop-filter:blur(14px);
}
.site-header.is-scrolled{border-bottom:1px solid var(--color-line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:600;letter-spacing:-.03em}
.brand img{width:34px;height:34px}
.brand b{color:var(--color-primary);font-weight:700}
.nav-links{display:none;gap:1.35rem;font-weight:600;font-size:.9rem;color:var(--color-muted)}
.nav-links a:hover,.nav-links a.is-active{color:var(--color-ink)}
.nav-toggle{width:42px;height:42px;border:1px solid var(--color-line);border-radius:12px;display:grid;place-items:center;background:var(--color-surface)}
.nav-toggle span{display:block;width:16px;height:2px;background:var(--color-ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--color-ink)}
.nav-toggle span::before{top:-5px}.nav-toggle span::after{top:5px}
.nav-drawer{display:none;border-top:1px solid var(--color-line);padding:.5rem 0 1rem}
.nav-drawer.is-open{display:grid}
.nav-drawer a{padding:.85rem 0;font-weight:700;border-bottom:1px solid var(--color-line)}
@media(min-width:900px){.nav-links{display:flex}.nav-toggle{display:none}.nav-drawer{display:none!important}}
.btn{border-radius:999px;font-weight:700;letter-spacing:.02em}

/* Centered soft hero + mosaic */
.hero{
  padding:3.25rem 0 2rem;
  text-align:center;
  background:linear-gradient(180deg,var(--color-hero-wash) 0%,var(--color-bg) 70%);
}
.hero-inner{max-width:38rem;margin-inline:auto;display:grid;gap:1rem;justify-items:center}
.hero h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.035em;
  margin:0;max-width:12ch;
}
.hero .lead{color:var(--color-muted);max-width:34ch;margin:0;font-size:1.05rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:.35rem}

.mosaic{
  margin-top:2.5rem;
  display:grid;gap:.75rem;
  grid-template-columns:1.2fr .8fr;grid-template-rows:auto auto;
  max-width:min(100% - 2rem,900px);margin-inline:auto;
}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.mosaic .m1{grid-row:1 / span 2;min-height:320px}
.mosaic .m2{min-height:150px}
.mosaic .m3{min-height:150px}
@media(max-width:640px){
  .mosaic{grid-template-columns:1fr;grid-template-rows:auto}
  .mosaic .m1{grid-row:auto;min-height:220px}
}

.section{padding:3.5rem 0}
.section h2{font-family:var(--display);font-weight:600;font-size:clamp(1.55rem,3vw,2.1rem);letter-spacing:-.03em;margin:0 0 .45rem;text-align:center}
.section .sub{color:var(--color-muted);max-width:40ch;margin:0 auto 1.75rem;text-align:center}

/* Horizontal room strip */
.room-strip{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.5rem;-webkit-overflow-scrolling:touch;
}
.room-strip article{
  flex:0 0 min(78%,280px);scroll-snap-align:start;
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:18px;overflow:hidden;
}
.room-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.room-strip .body{padding:1rem 1.1rem}
.room-strip h3{font-family:var(--display);font-size:1.15rem;margin:0 0 .3rem;font-weight:600}
.room-strip p{color:var(--color-muted);font-size:.9rem;margin:0}

/* Large quiet quote */
.quiet-quote{
  max-width:36rem;margin:0 auto;text-align:center;position:relative;padding:1rem 0;
}
.quiet-quote::before{
  content:"“";font-family:var(--display);font-size:5rem;line-height:0;
  color:color-mix(in srgb,var(--color-primary) 35%,transparent);
  display:block;margin-bottom:1rem;
}
.quiet-quote p{font-family:var(--display);font-size:clamp(1.35rem,2.8vw,1.75rem);line-height:1.35;letter-spacing:-.02em;margin:0 0 1rem}
.quiet-quote cite{font-style:normal;color:var(--color-muted);font-size:.9rem;font-weight:600}

.cta-soft{
  display:grid;gap:1rem;justify-items:center;text-align:center;
  padding:clamp(2rem,4vw,3rem);border-radius:999px;
  background:color-mix(in srgb,var(--color-primary) 8%,var(--color-surface));
  border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-line));
}
.cta-soft h2{font-family:var(--display);font-size:clamp(1.4rem,2.8vw,1.85rem);margin:0;font-weight:600}
.cta-soft p{color:var(--color-muted);margin:0;max-width:36ch}

/* Inner */
.page-hero{padding:2.75rem 0 1.5rem;text-align:center;background:linear-gradient(180deg,var(--color-hero-wash),var(--color-bg))}
.page-hero h1{font-family:var(--display);font-size:clamp(1.85rem,4vw,2.6rem);font-weight:600;letter-spacing:-.03em;margin:0}
.crumbs{justify-content:center;display:flex;flex-wrap:wrap;gap:.4rem;color:var(--color-muted);font-size:.85rem;margin-bottom:.85rem}

.appoint{
  max-width:520px;margin:0 auto;
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:24px;
  padding:clamp(1.35rem,3vw,2rem);display:grid;gap:.9rem;
  box-shadow:0 24px 48px color-mix(in srgb,var(--color-ink) 5%,transparent);
}
.appoint h2{font-family:var(--display);font-size:1.35rem;margin:0;text-align:center;font-weight:600}
.appoint label{display:grid;gap:.3rem;font-weight:600;font-size:.88rem}
.appoint input,.appoint textarea,.appoint select{padding:.75rem 1rem;border-radius:12px;border:1px solid var(--color-line);background:var(--color-bg)}
.appoint .form-row{display:grid;gap:.85rem}
@media(min-width:480px){.appoint .form-row{grid-template-columns:1fr 1fr}}
.time-chips{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.time-chips span{
  font-size:.78rem;font-weight:700;padding:.45rem .75rem;border-radius:999px;
  border:1px solid var(--color-line);background:var(--color-bg);color:var(--color-muted);
}
.form-note{font-size:.85rem;color:var(--color-muted);text-align:center}

.soft-grid{display:grid;gap:1.25rem;max-width:900px;margin:0 auto}
@media(min-width:760px){.soft-grid{grid-template-columns:1fr 1fr}}
.soft-grid article{padding:1.35rem;border-radius:18px;background:var(--color-surface);border:1px solid var(--color-line)}
.soft-grid h3{font-family:var(--display);margin:0 0 .4rem;font-weight:600}
.soft-grid p{color:var(--color-muted);margin:0;font-size:.95rem}
.photo-wide{width:100%;max-width:900px;margin:0 auto;border-radius:20px;aspect-ratio:16/9;object-fit:cover;display:block}

.site-footer{border-top:1px solid var(--color-line);padding:2.5rem 0 2rem;margin-top:1rem;color:var(--color-muted);font-size:.9rem}
.footer-grid{display:grid;gap:1.5rem}
@media(min-width:700px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-bottom{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-line);display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;justify-content:space-between;font-size:.85rem}
.credit a{color:var(--color-primary-dark);font-weight:700}