/* ============================================================
   SOLACE CLEANERS — brand tokens
   Edit colors here and they update across the whole page.
   ============================================================ */
:root{
  --ink:#1E2326;
  --ink-soft:#4A4F52;
  --linen:#F4F0E9;
  --linen-deep:#EAE4DA;
  --stone:#B9AE9C;
  --white:#FFFFFF;
  --page:var(--linen);
  --serif:'Cormorant Garamond', Garamond, Georgia, serif;
  --sans:'Manrope','Helvetica Neue',Arial,sans-serif;
  --wrap:1180px;
  --arch:999px 999px 4px 4px;
}
/* The brand stays light in dark mode on purpose — these blocks keep the
   page from inheriting a viewer's dark theme. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:var(--linen);
    --ink:#1E2326;
    --ink-soft:#4A4F52;
  }
}
:root[data-theme="dark"]{ --page:var(--linen); --ink:#1E2326; --ink-soft:#4A4F52; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px}
h1,h2,h3{font-family:var(--serif); font-weight:500; margin:0; line-height:1.1}
h1{font-size:clamp(44px,6.2vw,76px); letter-spacing:-0.005em}
h2{font-size:clamp(34px,4.4vw,50px)}
h3{font-size:24px}
p{margin:0 0 1em}
.lede{font-size:19px; color:var(--ink-soft); max-width:60ch}
.rule{height:1px; background:var(--stone); opacity:.5; border:0; margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-size:14px; font-weight:600; letter-spacing:.06em;
  padding:16px 30px; text-decoration:none; border:1px solid var(--ink); transition:background .18s, color .18s;
}
.btn-solid{background:var(--ink); color:var(--linen)}
.btn-solid:hover{background:#000}
.btn-quiet{background:transparent; color:var(--ink)}
.btn-quiet:hover{background:var(--ink); color:var(--linen)}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* ---------- top bar + header ---------- */
.topbar{background:var(--ink); color:var(--linen); font-size:13px; letter-spacing:.04em}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px; flex-wrap:wrap}
.topbar a{text-decoration:none}
header{position:sticky; top:0; z-index:20; background:var(--linen); border-bottom:1px solid rgba(185,174,156,.45)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:86px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none}
.brand span{font-family:var(--serif); font-size:27px; letter-spacing:.26em; padding-left:.26em}
.nav-links{display:flex; align-items:center; gap:30px; font-size:15px; font-weight:500}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink-soft)}
.menu-btn{display:none; background:none; border:1px solid var(--ink); font:inherit; font-size:13px; font-weight:600; letter-spacing:.06em; padding:12px 16px; cursor:pointer; color:var(--ink)}
.mobile-nav{display:none; border-top:1px solid rgba(185,174,156,.5); background:var(--linen)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block; padding:16px 0; text-decoration:none; font-size:17px; border-bottom:1px solid rgba(185,174,156,.35)}
.mobile-nav a:last-child{border-bottom:0}
@media (max-width:900px){
  .nav-links{display:none}
  .menu-btn{display:inline-block}
  .nav{min-height:72px; gap:12px}
  .brand span{font-size:22px; letter-spacing:.2em; padding-left:.2em}
  .nav > .btn{padding:13px 16px; font-size:12px}
}
@media (min-width:901px){ .mobile-nav{display:none !important} }

/* ---------- hero ---------- */
.hero{padding:86px 0 72px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.hero p.lede{margin-top:22px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.hero-trust{display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; font-size:14px; color:var(--ink-soft)}
.hero-trust span{display:flex; align-items:center; gap:8px}
.dot{width:5px; height:5px; border-radius:50%; background:var(--stone)}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px} .hero{padding:56px 0 48px} }

/* ---------- photo slots (arch-shaped, echoing the logo) ---------- */
.photo{
  position:relative; background:var(--linen-deep); border:1px dashed var(--stone);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-soft); font-size:13px; letter-spacing:.03em; padding:24px; overflow:hidden;
}
.photo.arch{border-radius:var(--arch); aspect-ratio:3/4}
.photo.square{aspect-ratio:1/1}
.photo.wide{aspect-ratio:16/10}
.photo img{width:100%; height:100%; object-fit:cover}

/* ---------- sections ---------- */
section{padding:88px 0}
.section-head{max-width:62ch; margin-bottom:46px}
.section-head p{margin-top:16px; color:var(--ink-soft)}
.band{background:var(--white)}
.band-ink{background:var(--ink); color:var(--linen)}
.band-ink h2, .band-ink h3{color:var(--linen)}
.band-ink p{color:#CFCAC2}

/* ---------- services ---------- */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.service{display:flex; flex-direction:column}
.service .photo{margin-bottom:22px}
.service h3{margin-bottom:10px}
.service p{color:var(--ink-soft); font-size:16px}
.service ul{margin:6px 0 20px; padding-left:18px; color:var(--ink-soft); font-size:15px}
.service li{margin-bottom:6px}
.service .price{font-family:var(--serif); font-size:21px; margin-top:auto; padding-top:14px; border-top:1px solid rgba(185,174,156,.6)}
@media (max-width:860px){ .services{grid-template-columns:1fr; gap:44px} }

/* ---------- service detail ---------- */
.svc-link{margin-top:auto; padding-top:16px; border-top:1px solid rgba(185,174,156,.6); font-size:14px; font-weight:600; letter-spacing:.04em; text-decoration:none}
.svc-link:hover{color:var(--ink-soft)}
.detail{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start}
.detail.flip .detail-media{order:2}
.detail + .detail{margin-top:86px; padding-top:86px; border-top:1px solid rgba(185,174,156,.5)}
.detail h3{font-size:clamp(28px,3.4vw,38px); margin-bottom:14px}
.detail .who{font-size:16px; color:var(--ink-soft)}
.checklist{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px; margin-top:28px}
.checklist h4{font-family:var(--sans); font-size:12px; letter-spacing:.14em; font-weight:600; color:var(--ink-soft); margin:0 0 10px}
.checklist ul{margin:0; padding-left:18px; font-size:15px; color:var(--ink-soft)}
.checklist li{margin-bottom:6px}
.detail .btn{margin-top:30px}
@media (max-width:860px){
  .detail{grid-template-columns:1fr; gap:30px}
  .detail.flip .detail-media{order:0}
  .checklist{grid-template-columns:1fr; gap:22px}
  .detail + .detail{margin-top:56px; padding-top:56px}
}

/* ---------- careers ---------- */
.careers-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.perks{list-style:none; margin:24px 0 0; padding:0}
.perks li{padding:14px 0; border-bottom:1px solid rgba(185,174,156,.35); font-size:16px}
@media (max-width:860px){ .careers-grid{grid-template-columns:1fr; gap:34px} }

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
.step-num{font-family:var(--serif); font-size:44px; line-height:1; opacity:.55; margin-bottom:14px}
@media (max-width:860px){ .steps{grid-template-columns:1fr; gap:32px} }

/* ---------- reasons ---------- */
.reasons{display:grid; grid-template-columns:repeat(2,1fr); gap:40px 56px}
.reason h3{font-size:21px; margin-bottom:8px}
.reason p{font-size:16px; margin:0}
@media (max-width:760px){ .reasons{grid-template-columns:1fr; gap:30px} }

/* ---------- areas ---------- */
.areas{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px}
.area{border:1px solid rgba(185,174,156,.7); padding:34px 22px; text-align:center}
.area strong{font-family:var(--serif); font-weight:500; font-size:27px; display:block}
.area small{color:var(--ink-soft); font-size:13px}
@media (max-width:760px){ .areas{grid-template-columns:repeat(2,1fr)} }

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr; gap:36px} }

/* ---------- booking ---------- */
.booking-box{
  background:var(--white); border:1px solid rgba(185,174,156,.8); padding:34px; margin-top:34px;
}
.booking-placeholder{
  border:1px dashed var(--stone); background:var(--linen); min-height:440px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; padding:40px; color:var(--ink-soft); font-size:15px;
}
.booking-placeholder strong{font-size:17px; color:var(--ink)}
.booking-box iframe{width:100%; border:0; min-height:900px}

/* ---------- faq ---------- */
.faq{max-width:78ch}
details{border-bottom:1px solid rgba(185,174,156,.6)}
summary{
  cursor:pointer; list-style:none; padding:22px 0; font-weight:600; font-size:17px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--serif); font-size:26px; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--ink-soft); font-size:16px; margin:0 0 22px; max-width:70ch}

/* ---------- reviews ---------- */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.review{border:1px solid rgba(185,174,156,.6); padding:28px; background:var(--white)}
.review p{font-family:var(--serif); font-size:20px; line-height:1.45; color:var(--ink)}
.review small{color:var(--ink-soft)}
@media (max-width:860px){ .reviews{grid-template-columns:1fr} }

/* ---------- cta band ---------- */
.cta-band{text-align:center}
.cta-band .lede{margin:18px auto 30px}

/* ---------- footer ---------- */
footer{background:var(--ink); color:var(--linen); padding:66px 0 34px; font-size:15px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
footer h4{font-family:var(--sans); font-size:13px; letter-spacing:.14em; margin:0 0 16px; font-weight:600; color:var(--stone)}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:9px}
footer a{text-decoration:none; color:#DCD7CF}
footer a:hover{color:var(--white)}
.foot-brand span{font-family:var(--serif); font-size:26px; letter-spacing:.26em; padding-left:.26em}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid rgba(185,174,156,.3); color:#9C968D; font-size:13px}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:34px} }

@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important} }

/* ---------- multi-page additions ---------- */
.page-hero{padding:74px 0 54px; border-bottom:1px solid rgba(185,174,156,.5)}
.page-hero h1{font-size:clamp(38px,5vw,62px)}
.page-hero .lede{margin-top:20px}
.crumbs{font-size:13px; color:var(--ink-soft); margin-bottom:20px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{border-bottom:1px solid var(--ink)}
.two-col{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start}
@media (max-width:860px){ .two-col{grid-template-columns:1fr; gap:34px} }
.city-list{columns:2; column-gap:40px; font-size:16px; color:var(--ink-soft); margin-top:10px}
@media (max-width:640px){ .city-list{columns:1} }
.inline-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}


/* ---------- mobile polish ---------- */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  section{padding:56px 0}
  .page-hero{padding:48px 0 40px}
  .lede{font-size:17px}
  .section-head{margin-bottom:32px}
  .btn{display:block; text-align:center; width:100%}
  .hero-actions, .inline-cta{flex-direction:column; align-items:stretch; gap:12px}
  .nav > .btn{display:inline-block; width:auto}
  .menu-btn{width:auto}
  .topbar .wrap{flex-direction:column; align-items:flex-start; gap:2px; padding-top:8px; padding-bottom:8px; font-size:12px}
  .hero-trust{gap:10px 18px; font-size:13px}
  .foot-grid{grid-template-columns:1fr; gap:30px}
  .areas{grid-template-columns:1fr}
  .booking-box{padding:18px}
  .detail + .detail{margin-top:44px; padding-top:44px}
  summary{font-size:16px}
}