/* ===================================================================
   MAISON DERMA — shared styles
   Change a colour here and every page updates.
   =================================================================== */
:root{
  --ink:#241F1B;
  --ink-soft:#5C534B;
  --bronze:#978072;
  --bronze-deep:#7A6355;
  --shell:#F4F2F0;
  --linen:#EBE6E1;
  --line:#D8D0C9;
  --paper:#FFFFFF;
  --display:"Instrument Serif",Georgia,serif;
  --body:"Karla",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--shell);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1080px,90vw);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;margin:0;
  letter-spacing:-.005em}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--bronze);outline-offset:3px}

.label{
  font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze-deep);margin:0 0 22px;
}
.btn{display:inline-block;font-family:var(--body);font-size:12.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--shell);padding:15px 30px;
  text-decoration:none;border:none;cursor:pointer}
.btn:hover{background:var(--bronze-deep)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--shell)}

/* ---------- header ---------- */
.bar{position:sticky;top:0;z-index:60;background:rgba(246,244,241,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 0}
.mark{display:block;text-decoration:none;flex:0 0 auto;line-height:0}
.mark img{height:56px;width:auto}
@media(max-width:820px){.mark img{height:46px}}
.nav{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;
  justify-content:flex-end}
.nav a{font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);padding:4px 0}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);box-shadow:inset 0 -1px 0 var(--bronze)}
.nav a.cta{border:1px solid var(--ink);color:var(--ink);padding:10px 18px;
  font-weight:600;letter-spacing:.14em}
.nav a.cta:hover{background:var(--ink);color:var(--shell)}
@media(max-width:820px){
  .bar{position:static}
  .bar .wrap{flex-wrap:wrap;padding:12px 0 10px}
  .nav{width:100%;justify-content:flex-start;gap:4px 15px;padding-top:8px}
  .nav a{font-size:12px;letter-spacing:.08em}
}

/* ---------- page head ---------- */
.head{padding:74px 0 54px;border-bottom:1px solid var(--line)}
.head.photo{
  background:
    linear-gradient(100deg,rgba(244,242,240,.97) 0%,rgba(244,242,240,.93) 42%,rgba(244,242,240,.55) 100%),
    url("img/hero.jpg") center/cover no-repeat,var(--shell);
  padding:92px 0 72px}
@media(max-width:700px){
  .head.photo{
    padding:44px 0 56px;
    background:
      linear-gradient(180deg,rgba(244,242,240,.90) 0%,rgba(244,242,240,.80) 45%,rgba(244,242,240,.55) 100%),
      url("img/hero.jpg") center/cover no-repeat,var(--shell)}
  .head.photo .stand{
    background:rgba(244,242,240,.72);
    padding:12px 14px;margin-left:-14px;margin-right:-14px}
}
.head h1{font-size:clamp(40px,7.4vw,74px);max-width:15ch}
.head h1 em{font-style:italic;color:var(--bronze-deep)}
.head .stand{margin:28px 0 0;font-size:19.5px;color:var(--ink-soft);max-width:52ch}

/* ---------- generic section ---------- */
.sec{padding:70px 0}
.sec h2{font-size:clamp(28px,5.2vw,44px);max-width:18ch}
.sec .intro{color:var(--ink-soft);font-size:18px;margin:16px 0 0;max-width:54ch}
.sec.linen{background:var(--linen)}
.sec.dark{background:var(--ink);color:var(--shell)}
.sec.dark h2{color:var(--shell)}
.sec.dark .label{color:var(--bronze)}
.sec.dark .intro{color:#B3A99E}

/* ---------- hero meta ---------- */
.meta{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 44px}
.meta dt{font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-deep);margin-bottom:5px}
.meta dd{margin:0;font-size:17px}
.notice{margin:30px 0 0;padding:14px 18px;background:var(--linen);
  font-size:15.5px;border-left:2px solid var(--bronze)}

/* ---------- concern router ---------- */
.picker{display:grid;gap:1px;background:#3B342E;border:1px solid #3B342E;
  margin-top:40px}
.picker button{background:var(--ink);border:none;cursor:pointer;text-align:left;
  padding:20px 22px;color:var(--shell);font-family:var(--body);
  display:block;width:100%}
.picker button:hover{background:#332C26}
.picker button.on{background:var(--bronze);color:#fff}
.picker .t{font-family:var(--display);font-size:22px;line-height:1.15;
  display:block;margin-bottom:5px}
.picker .s{font-size:14.5px;color:#A79C91;display:block;line-height:1.5}
.picker button.on .s{color:#F2E5D8}
.answer{margin-top:1px;background:#2E2822;padding:30px 26px;
  border:1px solid #3B342E;border-top:none}
.answer .heading{font-family:var(--display);font-size:26px;margin:0 0 12px;
  color:var(--bronze)}
.answer p{margin:0 0 24px;color:#CFC5BA;font-size:17px;max-width:60ch}
.answer .recs{display:grid;gap:10px}
.answer .rec{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  justify-content:space-between;padding-bottom:10px;border-bottom:1px dotted #4A4137}
.answer .rec:last-child{border-bottom:none}
.answer .rec b{font-family:var(--display);font-size:20px;font-weight:400;
  color:var(--shell)}
.answer .rec span{font-size:15px;color:#A79C91}
.answer .rec i{font-style:normal;font-size:17px;color:var(--bronze)}
.answer .after{margin:26px 0 0;font-size:15px;color:#8E857B}

/* ---------- treatment list ---------- */
.list{margin-top:44px;border-top:1px solid var(--line)}
.item{border-bottom:1px solid var(--line);padding:26px 0;
  display:grid;gap:6px 30px;grid-template-columns:1fr auto;align-items:baseline}
.item h3{font-size:27px;grid-column:1}
.item .fee{font-family:var(--display);font-size:27px;color:var(--bronze-deep);
  grid-column:2;text-align:right;white-space:nowrap}
.item .dur{font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-deep);grid-column:2;
  text-align:right;white-space:nowrap}
.item p{margin:0;color:var(--ink-soft);font-size:16.5px;max-width:56ch;grid-column:1}
.item .gate{grid-column:1/-1;margin-top:10px;font-size:14px;
  color:var(--bronze-deep);font-weight:600;letter-spacing:.03em}
.item .care{grid-column:1/-1;margin-top:16px;display:grid;gap:14px}
.item .care div{background:var(--paper);border:1px solid var(--line);padding:14px 16px}
.item .care dt{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-deep);margin-bottom:6px}
.item .care dd{margin:0;font-size:15.5px;color:var(--ink-soft)}
.pricenote{margin:26px 0 0;font-size:15px;color:var(--ink-soft);max-width:60ch}

/* ---------- image band ---------- */
.band{position:relative;min-height:340px;display:grid;align-items:center;
  background-size:cover;background-position:center;background-repeat:no-repeat}
.band::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(36,31,27,.86) 0%,rgba(36,31,27,.62) 55%,rgba(36,31,27,.22) 100%)}
.band .wrap{position:relative;z-index:2;padding:64px 0}
.band h2{color:#fff;font-size:clamp(27px,4.8vw,42px);max-width:17ch}
.band .label{color:#D9C7B6}
.band p{color:#E4DCD4;font-size:18px;margin:16px 0 0;max-width:48ch}
@media(max-width:700px){
  .band::before{background:linear-gradient(180deg,rgba(36,31,27,.82),rgba(36,31,27,.88))}
}

/* ---------- split image ---------- */
.split{display:grid;gap:0;grid-template-columns:1fr;align-items:stretch}
.split .pic{min-height:280px;background-size:cover;background-position:center}
.split .txt{padding:44px 32px;background:var(--paper)}
.split .txt h2{font-size:clamp(25px,4.4vw,34px);max-width:16ch}
.split .txt p{color:var(--ink-soft);font-size:17px;margin:16px 0 0}
@media(min-width:820px){
  .split{grid-template-columns:1fr 1fr}
  .split .txt{padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
}

/* ---------- treatment accordion ---------- */
.tx{border-bottom:1px solid var(--line);background:transparent}
.tx:first-of-type{border-top:1px solid var(--line)}
.tx summary{list-style:none;cursor:pointer;padding:24px 0;display:block}
.tx summary::-webkit-details-marker{display:none}
.tx summary:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.tx-head{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;
  justify-content:space-between}
.tx-name{font-family:var(--display);font-size:27px;line-height:1.1;
  position:relative;padding-right:34px}
.tx-name::after{content:"+";position:absolute;right:0;top:50%;
  transform:translateY(-50%);font-family:var(--body);font-size:22px;
  font-weight:300;color:var(--bronze)}
.tx[open] .tx-name::after{content:"\2212"}
.tx-fee{font-family:var(--display);font-size:27px;color:var(--bronze-deep);
  white-space:nowrap}
.tx-sub{display:block;margin-top:6px;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep)}
.tx-body{padding:4px 0 30px;display:grid;gap:16px;max-width:70ch}
.tx-block{background:var(--paper);border:1px solid var(--line);padding:16px 18px}
.tx-block dt{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-deep);margin-bottom:7px}
.tx-block dd{margin:0;font-size:16.5px;color:var(--ink-soft);line-height:1.6}
.tx-body .btn{justify-self:start}
@media(min-width:760px){
  .tx-body{grid-template-columns:repeat(2,1fr)}
  .tx-body .btn{grid-column:1/-1}
}

/* ---------- prose ---------- */
.prose{max-width:62ch}
.prose p{font-size:17.5px;margin:0 0 20px}
.prose p.lead{font-size:21px;line-height:1.5}
.prose p.soft{color:var(--ink-soft)}
.prose h3{font-size:26px;margin:38px 0 12px}
.prose ul{margin:0 0 20px;padding-left:0;list-style:none}
.prose li{padding-left:22px;position:relative;margin-bottom:9px;
  color:var(--ink-soft)}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;
  background:var(--bronze)}

.cred{padding:20px 22px;background:var(--paper);border:1px solid var(--line);
  margin-bottom:14px}
.cred dt{font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-deep);margin-bottom:6px}
.cred dd{margin:0;font-family:var(--display);font-size:23px}

/* ---------- two column ---------- */
.duo{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:800px){.duo{grid-template-columns:1.15fr .85fr;gap:56px}}

/* ---------- booking widget ---------- */
.widget-shell{background:var(--paper);border:1px solid var(--line);overflow:hidden}
.widget-shell iframe{display:block;width:100%!important;max-width:100%;
  min-height:700px;border:none}

/* ---------- contact details ---------- */
.details dt{font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-deep);margin-bottom:6px}
.details dd{margin:0 0 24px;font-size:18px}
.details dd a{text-decoration:none;border-bottom:1px solid var(--bronze)}
.details dd small{display:block;font-size:15px;color:var(--ink-soft);
  margin-top:4px}

/* ---------- policies ---------- */
.policy{border-top:1px solid var(--line);padding:28px 0}
.policy:last-child{border-bottom:1px solid var(--line)}
.policy h3{font-size:25px;margin-bottom:10px}
.policy p{margin:0 0 14px;color:var(--ink-soft);font-size:16.5px;max-width:62ch}
.policy p:last-child{margin-bottom:0}
.policy .key{display:inline-block;background:var(--linen);padding:4px 11px;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--bronze-deep);
  margin-bottom:12px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0;font-size:14px;
  color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 30px;justify-content:space-between;
  align-items:flex-start}
.foot-logo{height:62px;width:auto;margin-bottom:10px}
.foot-line{display:block;font-size:14px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

@media(min-width:700px){
  .picker{grid-template-columns:repeat(2,1fr)}
  .item .care{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .picker{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}