/* ============================================================
   TREATMENT PAGE. Same DNA as the home page: film hero, arc,
   risers, drifting fields, crossover plates. Shares everything
   in main.css and adds only what an inner page needs.
   ============================================================ */

/* ---------- hero: full bleed film, copy low left -------------- */
.sco-thero{position:relative;min-height:72svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--p-900)}
.sco-thero__film{position:absolute;inset:0;z-index:0}
.sco-thero__film img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  display:block;animation:sco-drift 30s ease-in-out infinite alternate}
.sco-thero__film::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(12,14,16,.88) 0%,rgba(12,14,16,.58) 40%,rgba(12,14,16,.14) 72%),
    linear-gradient(180deg,rgba(12,14,16,.5) 0%,rgba(12,14,16,.06) 36%,rgba(12,14,16,.66) 100%)}
.sco-thero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  /* The riser that follows is pulled up by clamp(56px,7vw,110px). The hero must
     clear that amount PLUS breathing room, or the deck collides with it. */
  padding:calc(88px + 44px) clamp(22px,4.2vw,72px)
          calc(clamp(56px,7vw,110px) + clamp(30px,3.2vw,50px))}
.sco-crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.62);
  margin-bottom:24px}
.sco-crumb a{color:rgba(255,255,255,.62);transition:color .3s}
.sco-crumb a:hover{color:var(--n-0)}
.sco-crumb i{width:3px;height:3px;border-radius:50%;background:var(--s-400);display:block}
.sco-thero h1{font-weight:300;letter-spacing:-.008em;line-height:1.1;color:var(--n-0);
  font-size:clamp(2.2rem,4.2vw,3.7rem);max-width:16ch;margin-bottom:18px}
.sco-thero h1 em{font-style:normal;color:var(--s-300)}
.sco-thero__deck{font-size:16.5px;line-height:1.64;color:rgba(255,255,255,.84);
  max-width:50ch;margin-bottom:38px}

/* the fact strip: same four slots on every treatment page, white on the film */
.sco-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px;
  border-top:1px solid rgba(197,178,100,.55)}
.sco-facts > div{padding:16px 18px 0 0}
.sco-facts dt{font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--s-300);margin-bottom:7px}
.sco-facts dd{margin:0;font-size:15.5px;color:var(--n-0);font-variant-numeric:tabular-nums}

/* ---------- in page rail, sits under the stuck header --------- */
.sco-rail{position:sticky;top:70px;z-index:20;background:rgba(246,242,232,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid #e4dfd2}
.sco-rail__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;overflow-x:auto;scrollbar-width:none}
.sco-rail__inner::-webkit-scrollbar{display:none}
.sco-rail a{flex:none;padding:16px 22px 15px 0;margin-right:22px;
  font-size:13px;letter-spacing:.4px;color:var(--n-700);position:relative;
  transition:color .35s var(--ease-out);white-space:nowrap}
.sco-rail a::after{content:"";position:absolute;left:0;right:22px;bottom:-1px;height:2px;
  background:var(--s-500);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out)}
.sco-rail a.is-on{color:var(--p-900)}
.sco-rail a.is-on::after{transform:scaleX(1)}

/* ---------- overview: a riser that takes over the hero -------- */
.sco-over{background:#f6f2e8;padding-bottom:clamp(84px,9vw,140px)}
.sco-over__grid{max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:46fr 54fr;gap:clamp(36px,5vw,84px);align-items:center}
.sco-over__media{position:relative;aspect-ratio:4/4.4;border-radius:12px;overflow:clip;
  clip-path:inset(100% 0 0 0);will-change:clip-path}
.sco-over__media img{width:100%;height:112%;object-fit:cover;display:block;will-change:transform}
.sco-over__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,17,19,0) 60%,rgba(15,17,19,.3) 100%)}
.sco-over__frame{position:absolute;left:-18px;top:-18px;width:56%;height:52%;
  border:1px solid var(--s-400);border-radius:12px;pointer-events:none}
.sco-over__wrap{position:relative}
.sco-over__pull{margin-bottom:28px}
.sco-over__grid > *{min-width:0}
.sco-over__pull{font-weight:200;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.3;
  letter-spacing:-.008em;color:var(--p-900)}
.sco-over__pull em{font-style:normal;color:var(--s-600)}
.sco-over__body h2{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:400;
  color:var(--s-600);margin-bottom:18px}
.sco-over__body p{font-size:16px;line-height:1.7;color:var(--n-800);margin-bottom:18px;max-width:60ch}
.sco-brands{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.sco-brands span{font-size:12px;letter-spacing:2px;text-transform:uppercase;
  padding:9px 14px;border:1px solid #d9d3c4;border-radius:999px;color:var(--p-800)}

/* ---------- who it is for: the drifting fields at full strength */
.sco-for{position:relative;overflow:clip;background:#f6f2e8;padding-bottom:clamp(90px,10vw,150px)}
.sco-for__field{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;
  will-change:transform}
.sco-for__field--a{width:52vw;height:52vw;left:-14vw;top:-14vw;
  background:radial-gradient(circle,rgba(197,178,100,.46),rgba(197,178,100,0) 68%)}
.sco-for__field--b{width:48vw;height:48vw;right:-14vw;bottom:-10vw;
  background:radial-gradient(circle,rgba(75,84,97,.30),rgba(75,84,97,0) 68%)}
.sco-for__grid{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:4fr 7fr;gap:clamp(36px,6vw,96px);align-items:start}
.sco-for__grid > *{min-width:0}
.sco-for__lead{position:sticky;top:140px}
.sco-for__lead h2{margin-bottom:16px}
.sco-for__plate{position:relative;margin-top:34px;aspect-ratio:3/3.6;border-radius:12px;
  overflow:clip;max-width:340px}
.sco-for__plate img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.35);transition:filter .8s var(--ease-out)}
.sco-for__lead:hover .sco-for__plate img{filter:grayscale(0)}
.sco-for__plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,17,19,0) 55%,rgba(15,17,19,.42) 100%)}
.sco-for__plate span{position:absolute;left:16px;bottom:14px;color:var(--n-0);
  font-size:11px;letter-spacing:2.6px;text-transform:uppercase}
.sco-for__lead p{font-size:15.5px;line-height:1.65;color:var(--n-800);max-width:36ch}
.sco-concerns{list-style:none;margin:0;padding:0;counter-reset:c}
.sco-concerns li{counter-increment:c;display:grid;grid-template-columns:52px 1fr;
  gap:6px 18px;padding:24px 0;border-top:1px solid rgba(30,34,39,.1);align-items:baseline}
.sco-concerns li:last-child{border-bottom:1px solid rgba(30,34,39,.1)}
.sco-concerns li::before{content:counter(c,decimal-leading-zero);
  font-size:11.5px;letter-spacing:2.6px;color:var(--s-600)}
.sco-concerns h3,.sco-concerns p{grid-column:2}
.sco-concerns h3{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:300;
  color:var(--p-900);letter-spacing:-.004em}
.sco-concerns p{font-size:14.5px;line-height:1.6;color:var(--n-800);max-width:52ch}

/* ---------- how it works rides in as the arc ------------------ */
/* .sco-arc, .sco-arc-wrap, .sco-arc__tabs, the deck: all from main.css */

/* ---------- what to expect: a riser over the arc -------------- */
.sco-time{background:var(--n-0);padding-bottom:clamp(90px,10vw,150px)}
.sco-time__head{max-width:var(--maxw);margin:0 auto clamp(36px,4vw,56px)}
.sco-time__plate{max-width:var(--maxw);margin:0 auto clamp(40px,4.6vw,64px);position:relative;
  height:clamp(240px,30vw,420px);border-radius:12px;overflow:clip}
.sco-time__plate img{width:100%;height:120%;object-fit:cover;display:block;will-change:transform}
.sco-time__plate::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(15,17,19,.82) 0%,rgba(15,17,19,.42) 42%,rgba(15,17,19,.06) 70%),
    linear-gradient(180deg,rgba(15,17,19,0) 40%,rgba(15,17,19,.5) 100%)}
.sco-time__plate figcaption{position:absolute;left:clamp(22px,3vw,40px);bottom:clamp(20px,3vw,36px);
  color:var(--n-0);max-width:34ch}
.sco-time__plate figcaption b{display:block;font-weight:300;font-size:clamp(1.2rem,1.8vw,1.6rem);
  margin-bottom:8px;letter-spacing:-.004em;color:var(--n-0)}
.sco-time__plate figcaption span{font-size:13.5px;color:rgba(255,255,255,.92);line-height:1.55}
.sco-time__track{max-width:var(--maxw);margin:0 auto;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px)}
.sco-time__track::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;
  background:linear-gradient(to right,var(--s-400),rgba(197,178,100,.2))}
.sco-time__stop{position:relative;padding-top:34px}
.sco-time__stop::before{content:"";position:absolute;left:0;top:4px;width:11px;height:11px;
  border-radius:50%;background:#f6f2e8;border:1px solid var(--s-500)}
.sco-time__stop .when{font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--s-600);margin-bottom:12px;display:block}
.sco-time__stop h3{font-size:17px;font-weight:500;color:var(--p-900);margin-bottom:8px}
.sco-time__stop p{font-size:14.5px;line-height:1.6;color:var(--n-800)}

/* ---------- results: the crossover plates --------------------- */
.sco-res{background:#f6f2e8;overflow:clip;padding-top:clamp(84px,9vw,140px);padding-bottom:clamp(84px,9vw,140px)}
.sco-res__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:46fr 54fr;
  gap:clamp(36px,5vw,84px);align-items:center}
.sco-res__grid > *{min-width:0}
.sco-res__copy h2{margin-bottom:16px}
.sco-res__copy p{font-size:15.5px;line-height:1.68;color:var(--n-800);max-width:44ch;margin-bottom:28px}
.sco-res__plates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px);align-items:start}
.sco-res__plate{border-radius:12px;overflow:clip;position:relative;will-change:transform}
.sco-res__plate img{width:100%;height:100%;object-fit:cover;display:block}
.sco-res__plate--a{aspect-ratio:3/4.3}
.sco-res__plate--b{aspect-ratio:3/5;transform:translateY(-46px)}
.sco-res__plate span{position:absolute;left:16px;bottom:14px;color:var(--n-0);
  font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  padding:6px 10px;background:rgba(15,17,19,.55);border-radius:999px}

/* ---------- when we say no: the honest card ------------------- */
.sco-no{background:var(--n-0);padding-bottom:clamp(90px,10vw,150px)}
.sco-no__card{max-width:var(--maxw);margin:0 auto;background:var(--p-900);color:var(--n-0);
  border-radius:14px;padding:0;
  display:grid;grid-template-columns:42fr 58fr;gap:0;align-items:stretch;
  position:relative;overflow:clip}
.sco-no__media{position:relative;min-height:420px}
.sco-no__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sco-no__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(15,17,19,.1) 30%,rgba(15,17,19,.7) 78%,#0f1113 100%)}
.sco-no__body{padding:clamp(40px,5vw,72px) clamp(30px,4.6vw,72px)}
.sco-no__card > *{min-width:0;position:relative;z-index:1}
.sco-no__body p{margin-bottom:26px}
.sco-no__card::before{content:"";position:absolute;right:-12%;top:-30%;width:52%;
  aspect-ratio:1;border-radius:50%;filter:blur(60px);
  background:radial-gradient(circle,rgba(197,178,100,.26),rgba(197,178,100,0) 66%)}
.sco-no__card h2{color:var(--n-0);margin-bottom:14px}
.sco-no__card .sco-eyebrow{color:var(--s-400)}
.sco-no__card p{font-size:15.5px;line-height:1.68;color:var(--p-200);max-width:46ch}
.sco-no__list{list-style:none;margin:0;padding:0}
.sco-no__list li{padding:16px 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:15px;line-height:1.5;color:var(--n-0);display:flex;gap:16px}
.sco-no__list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.sco-no__list li::before{content:"";flex:none;width:18px;height:1px;background:var(--s-400);margin-top:.7em}

/* ---------- questions ----------------------------------------- */
.sco-faq{background:#f6f2e8;padding-bottom:clamp(90px,10vw,150px)}
.sco-faq__grid{max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:4fr 7fr;gap:clamp(36px,6vw,96px);align-items:start}
.sco-faq__grid > *{min-width:0}
.sco-faq__lead{position:sticky;top:140px}
.sco-faq__plate{margin-top:34px;aspect-ratio:4/3;border-radius:12px;overflow:clip;max-width:340px}
.sco-faq__plate img{width:100%;height:100%;object-fit:cover;display:block}
.sco-faq details{border-top:1px solid #d9d3c4}
.sco-faq details:last-child{border-bottom:1px solid #d9d3c4}
.sco-faq summary{list-style:none;cursor:pointer;padding:20px 0;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:17px;color:var(--p-900)}
.sco-faq summary::-webkit-details-marker{display:none}
.sco-faq summary::after{content:"";width:12px;height:12px;flex:none;
  border-right:1px solid var(--s-600);border-bottom:1px solid var(--s-600);
  transform:rotate(45deg) translateY(-3px);transition:transform .4s var(--ease-out)}
.sco-faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.sco-faq details p{font-size:15px;line-height:1.66;color:var(--n-800);padding:0 0 22px;max-width:60ch}

/* ---------- also in this room --------------------------------- */
.sco-room{background:var(--n-0);padding-bottom:clamp(90px,10vw,150px)}
.sco-room__head{max-width:var(--maxw);margin:0 auto 30px;display:flex;
  justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sco-room__list{max-width:var(--maxw);margin:0 auto;list-style:none;padding:0}
.sco-room__thumb{width:64px;height:64px;border-radius:8px;overflow:clip;flex:none}
.sco-room__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out)}
.sco-room__list a:hover .sco-room__thumb img{transform:scale(1.08)}
.sco-room__list a{display:grid;grid-template-columns:52px 64px 1fr auto;gap:18px;align-items:center;
  padding:18px 0;border-top:1px solid #e4dfd2;color:var(--p-900);transition:color .35s var(--ease-out)}
.sco-room__list li:last-child a{border-bottom:1px solid #e4dfd2}
.sco-room__list .n{font-size:11.5px;letter-spacing:2.6px;color:var(--s-600)}
.sco-room__list .lbl{font-size:17px;display:inline-block;transition:transform .45s var(--ease-out)}
.sco-room__list .sub{display:block;font-size:13px;color:var(--n-700);margin-top:3px}
.sco-room__list svg{width:16px;height:16px;opacity:0;transform:translateX(-6px);
  transition:opacity .4s,transform .45s var(--ease-out)}
.sco-room__list a:hover{color:var(--s-700)}
.sco-room__list a:hover .lbl{transform:translateX(5px)}
.sco-room__list a:hover svg{opacity:1;transform:none}

/* ---------- responsive ---------------------------------------- */
@media (max-width:1100px){
  .sco-rail{top:64px}
  .sco-thero__inner{padding-top:calc(64px + 48px)}
}
@media (max-width:900px){
  .sco-thero{min-height:66svh}
  .sco-facts{grid-template-columns:1fr 1fr}
  .sco-over__grid,.sco-for__grid,.sco-faq__grid,.sco-no__card,.sco-res__grid{grid-template-columns:1fr}
  .sco-over__media{aspect-ratio:4/3}
  .sco-over__frame{display:none}
  .sco-no__media{min-height:260px}
  .sco-no__media::after{background:linear-gradient(180deg,rgba(15,17,19,.1) 30%,#0f1113 100%)}
  .sco-for__plate,.sco-faq__plate{max-width:none;aspect-ratio:16/10}
  .sco-for__lead,.sco-faq__lead{position:static}
  .sco-time__track{grid-template-columns:1fr;gap:0}
  .sco-time__track::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(to bottom,var(--s-400),rgba(197,178,100,.2))}
  .sco-time__stop{padding:0 0 30px 34px}
  .sco-time__stop::before{left:0;top:4px}
  .sco-room__list a{grid-template-columns:36px 56px 1fr auto;gap:12px}
  .sco-room__thumb{width:56px;height:56px}
  .sco-for__field{filter:blur(48px)}
}
@media (max-width:620px){
  .sco-res__plates{grid-template-columns:1fr;gap:14px}
  .sco-res__plate--a,.sco-res__plate--b{aspect-ratio:4/3;transform:none}
  .sco-thero h1{font-size:2.1rem}
}

/* section-level pages: a shorter hero, since there is no fact strip to carry */
.sco-thero--short{min-height:58svh}
.sco-thero--short .sco-thero__inner{
  padding-bottom:calc(clamp(56px,7vw,110px) + clamp(26px,2.8vw,42px))}
.sco-thero--short h1{max-width:18ch}
@media (max-width:900px){ .sco-thero--short{min-height:52svh} }

/* hub: a line of context under each room heading */
.sco-tx__blurb{font-size:14.5px;line-height:1.62;color:var(--n-800);
  margin:-2px 0 18px;max-width:40ch}
.sco-tx__col h2{font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--s-600);font-weight:400;padding-bottom:14px;
  border-bottom:1px solid var(--s-400);margin-bottom:14px}


/* Below 760px the riser lifts only 40px (see main.css), so the hero must not
   reserve the desktop clearance or it wastes half a screen. */
@media (max-width:760px){
  .sco-thero__inner{padding-bottom:calc(40px + 34px)}
  .sco-thero--short .sco-thero__inner{padding-bottom:calc(40px + 28px)}
}

/* The short hero carries no fact strip, so the deck's bottom margin is dead
   space sitting on top of the riser clearance. Reclaim it. */
.sco-thero--short .sco-thero__deck{margin-bottom:0}