:root{
  /* One brand identity: purple, black and white. One typeface throughout. */
  --head:"Montserrat",system-ui,"Segoe UI",sans-serif;
  --body:"Montserrat",system-ui,"Segoe UI",sans-serif;
  --brand:#633B81; --brand-dark:#3D2350; --brand-on:#FFFFFF; --brand-wash:#EFE6F5; --brand-wash-2:#F7F1FA;
  --bg:#FAFAFA; --surface:#FFFFFF; --ink:#161016; --muted:#5A5560; --line:#E4E2E6; --focus:#633B81; --err:#A3362E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#B48FD1; --brand-dark:#B48FD1; --brand-wash:#241A30; --brand-wash-2:#1D1526; --bg:#0F0D11; --surface:#1A1620; --ink:#F5F3F7; --muted:#B7B0BE; --line:#332C3B; --focus:#C9A8E6; --err:#FF9E94;
  }
  :root:not([data-theme="light"]) .logo-on-light{display:none}
  :root:not([data-theme="light"]) .logo-on-dark{display:block}
}
:root[data-theme="dark"]{
  --brand:#B48FD1; --brand-dark:#B48FD1; --brand-wash:#241A30; --brand-wash-2:#1D1526; --bg:#0F0D11; --surface:#1A1620; --ink:#F5F3F7; --muted:#B7B0BE; --line:#332C3B; --focus:#C9A8E6; --err:#FF9E94;
}
:root[data-theme="dark"] .logo-on-light{display:none}
:root[data-theme="dark"] .logo-on-dark{display:block}
/* Every service shares one brand treatment — purple, black, white — so
   nothing here varies by service any more. Kept as a hook (not deleted)
   because dozens of rules below key off var(--svc)/var(--svc-t)/var(--svc-on). */
[data-svc]{--svc:var(--brand);--svc-t:var(--brand-wash);--svc-on:var(--brand-on)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.18;letter-spacing:-.01em;margin:0}
h1:focus{outline:none}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
[id]{scroll-margin-top:90px}

/* header */
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;text-decoration:none;padding:6px 0}
.logo{height:60px;width:auto;display:block}
.logo-on-dark{display:none}
.foot .logo{height:72px}
.about-logo .logo{height:auto;width:100%;max-width:360px}
nav.main{display:flex;gap:2px;align-items:center}
nav.main a{font-family:var(--head);font-size:.92rem;font-weight:500;text-decoration:none;padding:8px 9px;border-radius:8px;white-space:nowrap}
nav.main a:hover{background:var(--line)}
nav.main a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand);border-radius:8px 8px 0 0}
nav.main a.btn{margin-left:8px;color:var(--brand-on);padding:10px 18px}
nav.main a.btn:hover{background:var(--brand);opacity:.9}
.menu-btn{display:none;font-family:var(--head);font-weight:600;font-size:.95rem;background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:8px 14px;cursor:pointer}
@media (max-width:1360px){
  .menu-btn{display:inline-flex}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);flex-direction:column;align-items:stretch;padding:12px 24px 22px;border-bottom:1px solid var(--line);gap:4px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 10px}
  nav.main a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--ink);border-radius:4px}
  nav.main a.btn{margin:8px 0 0;text-align:center;justify-content:center}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--head);font-weight:600;font-size:1rem;line-height:1.1;padding:14px 22px;border-radius:10px;border:2px solid var(--brand);background:var(--brand);color:var(--brand-on);text-decoration:none;cursor:pointer}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.svc{background:var(--svc);border-color:var(--svc);color:var(--svc-on)}
.btn.block{display:flex;width:100%}
.btn.small{padding:10px 16px;font-size:.92rem}

/* petal motif: one recurring line-art device, recolored per section */
.petal-motif{position:absolute;pointer-events:none;fill:none;stroke:var(--svc,var(--brand));stroke-width:1;opacity:.16;z-index:0}

/* hero + doors */
.hero{padding:64px 0 28px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(2.2rem,5.6vw,3.8rem);line-height:1.06;letter-spacing:-.02em;max-width:19ch;margin-bottom:22px;position:relative}
.lede{font-size:1.2rem;max-width:56ch;color:var(--muted);position:relative}
.motto{position:relative;font-family:var(--head);font-weight:600;font-size:1.05rem;letter-spacing:.02em;color:var(--brand);margin:22px 0 0;display:flex;gap:10px;align-items:center}
.motto span{color:var(--line);font-weight:400}
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:26px 22px 24px;border:2px solid var(--svc);border-radius:999px 999px 14px 14px;background:var(--svc-t);color:var(--ink);text-decoration:none;transition:background .25s,color .25s,transform .25s}
.door:hover,.door:focus-visible{background:var(--svc);color:var(--svc-on);transform:translateY(-6px)}
.door .knob{position:absolute;right:24px;top:62%;width:12px;height:12px;border-radius:50%;background:var(--svc);transition:background .25s,transform .25s}
.door:hover .knob,.door:focus-visible .knob{background:var(--svc-on);transform:translateX(-6px)}
.door-name{font-family:var(--head);font-weight:700;font-size:1.4rem;line-height:1.1;letter-spacing:-.01em;margin-bottom:8px}
.door-line{font-size:.95rem;line-height:1.45}
.door-via{font-family:var(--head);font-size:.82rem;font-weight:600;margin-bottom:6px;opacity:.85}
@media (max-width:860px){
  .doors{grid-template-columns:repeat(2,1fr)}
  .door{min-height:280px}
}
@media (max-width:440px){
  .door{padding:22px 16px 18px;min-height:250px}
  .door-name{font-size:1.15rem}
  .door-line{font-size:.88rem}
}

/* sections */
.sec{padding:72px 0}
.sec.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:12px}
.sec .sub{max-width:56ch;color:var(--muted)}
.picks{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.picks a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.picks a:hover .p-text{text-decoration:underline;text-underline-offset:4px}
.picks a:hover{background:var(--svc-t)}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:.92rem;font-weight:500;white-space:nowrap}
.dot{width:12px;height:12px;border-radius:50%;background:var(--svc,var(--brand));flex:none}
@media (max-width:640px){.picks a{grid-template-columns:1fr;gap:6px}}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.how h3{font-size:1.2rem;margin:14px 0 6px}
.how p{color:var(--muted);margin:0}
.num{width:34px;height:34px;border-radius:50%;background:var(--svc,var(--brand));color:var(--svc-on,var(--brand-on));display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:.95rem;flex:none}
@media (max-width:760px){.how{grid-template-columns:1fr;gap:20px}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:760px){.two{grid-template-columns:1fr;gap:24px}}

/* pillars (Rebuild / Restore / Rise) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.pillar{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--brand);border-radius:14px;padding:30px 26px}
.pillar .word{display:block;font-family:var(--head);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;margin-bottom:10px}
.pillar p{margin:0 0 .8em;color:var(--muted)}
.pillar .tie{margin:0;font-size:.95rem;color:var(--brand);font-weight:500}
@media (max-width:820px){.pillars{grid-template-columns:1fr;gap:16px}}

/* pull quote + chips */
.pull-quote{border-left:5px solid var(--brand);padding:4px 0 4px 24px;margin:1.6rem 0;font-family:var(--head);font-size:1.35rem;line-height:1.4;font-weight:500;max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{font-family:var(--head);font-size:.85rem;font-weight:500;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px;color:var(--muted)}

/* portrait frame — photo fills it edge to edge; falls back to centered
   placeholder text if no <img> is present */
.portrait{position:relative;aspect-ratio:4/5;max-width:320px;border-radius:999px 999px 22px 22px;border:2px solid var(--brand);background:var(--surface);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.portrait span{font-family:var(--head);font-size:.9rem;color:var(--muted);max-width:20ch;line-height:1.4;padding:28px}

/* brand hero band: About / Contact */
.brand-hero{position:relative;overflow:hidden;background:var(--brand-wash);border-bottom:1px solid var(--line);padding:60px 0 52px}
.brand-hero h1{position:relative;font-size:clamp(2rem,4.6vw,3rem);letter-spacing:-.015em;margin-bottom:12px}
.brand-hero .lede{position:relative}
.about-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;align-items:start;position:relative}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;gap:28px}.about-grid .portrait{margin:0 auto}}

/* service pages */
.svc-hero{background:var(--svc-t);padding:56px 0 48px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.svc-hero h1{font-size:clamp(2rem,4.8vw,3.2rem);letter-spacing:-.015em;line-height:1.08;margin-bottom:14px}
.svc-hero .via{display:inline-block;font-family:var(--head);font-weight:600;font-size:.92rem;border:2px solid var(--svc);border-radius:999px;padding:4px 14px;margin-bottom:16px}
.tagline{font-size:1.3rem;max-width:42ch;margin:0}
.facts{display:flex;flex-wrap:wrap;gap:10px 40px;margin:30px 0 0}
.facts div{min-width:0}
.facts dt{font-size:.85rem;color:var(--muted);font-family:var(--head)}
.facts dd{margin:0;font-family:var(--head);font-weight:600}
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:64px;padding-top:56px;padding-bottom:24px;align-items:start}
@media (max-width:920px){.svc-grid{grid-template-columns:1fr;gap:32px}}
.prose{max-width:62ch}
.prose h2{font-size:1.65rem;margin:2.4rem 0 .7rem}
.prose h2:first-child{margin-top:0}
.ticks{list-style:none;padding:0;margin:0 0 1em}
.ticks li{position:relative;padding:7px 0 7px 30px}
.ticks li::before{content:"";position:absolute;left:0;top:1.02em;width:12px;height:12px;border-radius:50%;background:var(--svc)}
.note{border-left:5px solid var(--svc);background:var(--surface);padding:16px 20px;border-radius:0 12px 12px 0;margin:1.6rem 0;font-size:1rem}
.note strong{font-family:var(--head)}
.aside{position:sticky;top:92px;background:var(--surface);border:1px solid var(--line);border-top:7px solid var(--svc);border-radius:14px;padding:24px}
@media (max-width:920px){.aside{position:static}}
.aside h2{font-size:1.3rem;margin-bottom:14px}
.aside dl{margin:0 0 18px}
.aside dt{font-family:var(--head);font-size:.85rem;color:var(--muted)}
.aside dd{margin:0 0 10px}
.aside h3{font-size:1rem;margin:20px 0 4px}
.doc{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0;text-decoration:none;background:var(--bg)}
.doc:hover{border-color:var(--svc)}
.doc strong{font-family:var(--head);font-size:.98rem;display:block;line-height:1.3}
.doc small{display:block;color:var(--muted);font-size:.85rem;line-height:1.4;margin-top:2px}
.faq{max-width:62ch;padding:16px 0 72px}
.faq h2{font-size:1.65rem;margin-bottom:14px}
details{border-top:1px solid var(--line);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{font-family:var(--head);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:1.05rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:500;font-size:1.5rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:12px 0 0;color:var(--muted);font-size:1.02rem}
.cta-band{background:var(--svc-t);border-top:1px solid var(--line);padding:56px 0}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cta-band h2{font-size:1.7rem;max-width:22ch}

/* about + contact */
.page-head{padding-top:56px;padding-bottom:32px}
.page-head h1{font-size:clamp(2rem,4.6vw,3rem);letter-spacing:-.015em;margin-bottom:12px}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{padding:16px 0;border-top:1px solid var(--line)}
.contact-list li:last-child{border-bottom:1px solid var(--line)}
.contact-list b{display:block;font-family:var(--head);font-size:.88rem;color:var(--muted);font-weight:500}

/* booking */
.book{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding:16px 0 80px;align-items:start}
@media (max-width:920px){.book{grid-template-columns:1fr;gap:24px}}
.step{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:22px 24px;margin-bottom:16px}
.step[data-state="locked"]{background:transparent;border-style:dashed}
.step[data-state="locked"] h2{color:var(--muted)}
.step[data-state="locked"] .num{background:var(--line);color:var(--muted)}
.step h2{display:flex;align-items:center;gap:12px;font-size:1.3rem}
.step .body{margin-top:16px}
.step h3{font-size:1rem;margin:18px 0 8px}
.step h3:first-child{margin-top:0}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.choices.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.choices.two-up{grid-template-columns:1fr}}
.choice{text-align:left;font:inherit;color:inherit;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;display:block;width:100%;line-height:1.4}
.choice:hover{border-color:var(--muted)}
.choice[aria-pressed="true"]{border-color:var(--svc,var(--brand));box-shadow:inset 0 0 0 1px var(--svc,var(--brand));background:var(--svc-t,var(--bg))}
.choice strong{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:1.02rem}
.choice span.d{display:block;font-size:.9rem;color:var(--muted);margin-top:2px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label,.legend{font-family:var(--head);font-weight:600;font-size:.94rem}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.hint{font-size:.88rem;color:var(--muted);line-height:1.45}
.err{color:var(--err);font-size:.92rem;font-family:var(--head);font-weight:500;margin:0 0 10px}
/* honeypot: kept in the DOM for bots, hidden from real visitors and screen readers */
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.checks{display:flex;flex-wrap:wrap;gap:8px 10px}
.checks label{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:999px;padding:8px 14px;font-family:var(--head);font-size:.92rem;font-weight:500;cursor:pointer;background:var(--bg)}
.checks input{accent-color:var(--svc,var(--brand));width:18px;height:18px;margin:0}
.checks label:has(input:checked){border-color:var(--svc,var(--brand));background:var(--svc-t,var(--bg))}
.confirm{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:1rem}
.confirm input{accent-color:var(--svc,var(--brand));width:20px;height:20px;margin-top:3px;flex:none}
.sum{position:sticky;top:92px;background:var(--surface);border:1px solid var(--line);border-top:7px solid var(--svc,var(--brand));border-radius:14px;padding:22px}
@media (max-width:920px){.sum{position:static}}
.sum h2{font-size:1.15rem;margin-bottom:12px}
.sum dl{margin:0}
.sum dt{font-family:var(--head);font-size:.82rem;color:var(--muted)}
.sum dd{margin:0 0 12px;font-size:1rem}
.sum dd.empty{color:var(--muted);font-style:italic}
.sum p{font-size:.88rem;color:var(--muted);margin:14px 0 0;line-height:1.5}
.direct{border:2px solid var(--svc);background:var(--svc-t);border-radius:12px;padding:18px;margin-bottom:22px}
.direct p{margin:0 0 12px;font-size:1rem}
.or{font-family:var(--head);font-size:.9rem;color:var(--muted);margin:0 0 14px}
.sent{border:2px solid var(--svc);border-radius:12px;padding:18px;background:var(--svc-t);margin-top:8px}
.sent h3{font-size:1.15rem;margin:0 0 6px}
.sent textarea{width:100%;min-height:190px;font:inherit;font-size:.92rem;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:12px;margin:10px 0}
.row{display:flex;flex-wrap:wrap;gap:10px}

/* footer: kept deliberately simple. No repeated site navigation, no
   safety notice or credentials here, those live where they're relevant
   (booking page, service pages, About). Just brand, contact and the
   legal fine print, all centred so it reads as a calm closing note
   rather than another block of links. */
footer{background:var(--surface);border-top:1px solid var(--line);padding:48px 0 40px;font-size:.98rem}
.foot-center{display:flex;flex-direction:column;align-items:center;text-align:center}
footer .fine{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;color:var(--muted);font-size:.88rem;line-height:1.6;text-align:center;max-width:56ch;margin-left:auto;margin-right:auto}
footer .fine p{margin:0 0 .5em}
footer .fine .copyright{margin-top:.6em;font-size:.85rem}
