:root{
  --gold:#C59D5E; --gold-deep:#8A6A36; --rose:#E68CAC; --blush:#EAC0C0; --pink-light:#F1E4E4;
  --seafoam:#A0CFCF; --cream:#F4F0E6; --ink:#333333; --night:#2B3338; --night-deep:#1F272B;
  --bg:#1F272B;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Montserrat", system-ui, sans-serif;
  --head:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--head)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#1F272B;color:var(--ink);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.6rem,2.4vw,2rem)}
p{margin:0 0 1.1em}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto;position:relative;z-index:2}
.dark{color:var(--cream)}
.nw{white-space:nowrap}
/* Night to dawn: each section fades in from the colour of the one above it. */
.tone{background:linear-gradient(180deg,var(--from,var(--sb)) 0,var(--sb) var(--blend,60%))}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.6rem;border-radius:999px;font:600 .9rem/1.2 var(--sans);letter-spacing:.04em;text-decoration:none;cursor:pointer;border:1.5px solid var(--gold);background:var(--gold);color:#22201c;transition:background .3s,color .3s,transform .3s,box-shadow .3s}
.btn:hover{background:#d4b07a;box-shadow:0 8px 30px -10px rgba(197,157,94,.8)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:rgba(197,157,94,.14);border-color:var(--gold)}
.textbtn{background:none;border:0;padding:.6rem 0;min-height:44px;font:500 .95rem var(--sans);color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;text-decoration-thickness:1.5px;cursor:pointer}
.actions{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center}

/* header */
.site-head{position:fixed;inset:0 0 auto;z-index:50;height:var(--head);color:var(--cream);transition:color .5s,background-color .5s,box-shadow .5s}
.site-head.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-head.on-light{color:var(--ink)}
.head-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(1280px,100% - 2rem);margin-inline:auto}
.brand{display:flex;align-items:center;text-decoration:none;min-height:44px}
.brand-disc{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,var(--cream) 62%,rgba(244,240,230,0) 70%);display:grid;place-items:center}
.brand-disc img{width:50px;height:auto}
.nav{display:flex;align-items:center;gap:2rem}
.nav ul{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.nav a:not(.btn){text-decoration:none;font-weight:500;font-size:.92rem;padding:.6rem 0;display:inline-block;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:.35rem;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{min-height:44px;padding:.6rem 1.2rem;font-size:.82rem}
.menu-toggle{display:none;width:48px;height:48px;border:0;background:none;color:inherit;cursor:pointer;border-radius:50%}
.menu-toggle span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px auto;transition:transform .3s,opacity .3s}
.menu-open .menu-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){opacity:0}
.menu-open .menu-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:900px){
  .menu-toggle{display:block}
  .nav{position:fixed;inset:var(--head) 0 auto 0;flex-direction:column;align-items:stretch;gap:1rem;padding:1.2rem 1.5rem 2rem;background:var(--bg);color:inherit;box-shadow:0 20px 40px -20px rgba(0,0,0,.4);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility 0s .3s}
  .site-head.menu-open{background:var(--bg)}
  .menu-open .nav{opacity:1;transform:none;visibility:visible;transition:opacity .3s,transform .3s}
  .nav ul{flex-direction:column;gap:0}
  .nav a:not(.btn){font-family:var(--serif);font-size:1.5rem;padding:.55rem 0;display:block}
  .nav .btn{min-height:50px;font-size:.9rem}
}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:var(--cream);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.motion .hero-media img{animation:drift 46s ease-in-out infinite alternate;transform-origin:62% 50%}
@keyframes drift{from{transform:scale(1.13) translate(-1.6%,-1%)}to{transform:scale(1.03) translate(1.2%,.8%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(31,39,43,.88) 0%,rgba(31,39,43,.55) 38%,rgba(31,39,43,0) 64%),linear-gradient(180deg,rgba(31,39,43,.5) 0%,rgba(31,39,43,0) 22%,rgba(31,39,43,0) 72%,var(--night-deep) 100%)}
#ripples{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-copy{max-width:640px;padding:calc(var(--head) + 2rem) 0 4rem}
.welcome{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--blush);margin:0 0 1rem}
.hero h1{font-size:clamp(2.9rem,6.4vw,5.6rem);line-height:1.04;margin:0 0 2.2rem;max-width:11ch}
.hero h1 .w{display:inline-block;white-space:nowrap}
.motion .hero h1 .l{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(8px);animation:letter 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.5s + var(--i) * 55ms)}
@keyframes letter{to{opacity:1;transform:none;filter:blur(0)}}
.motion .hero .fade-late{opacity:0;animation:fadeup 1.2s ease forwards;animation-delay:var(--d,2.4s)}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;width:1px;height:56px;background:linear-gradient(var(--cream),transparent);opacity:.5}
.motion .scroll-cue{animation:cue 2.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media (max-width:699px){
  .hero{align-items:flex-end}
  .hero-media img{object-position:62% 38%}
  .motion .hero-media img{transform-origin:62% 38%}
  .hero::after{background:linear-gradient(180deg,rgba(31,39,43,.55) 0%,rgba(31,39,43,0) 20%,rgba(31,39,43,0) 34%,rgba(31,39,43,.82) 62%,var(--night-deep) 100%)}
  .hero-copy{padding-bottom:4.5rem}
  .hero h1{margin-bottom:1.8rem}
  .scroll-cue{display:none}
}

/* particles */
#motes{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* sections */
section{position:relative}
.pad{padding:clamp(5rem,11vw,9rem) 0}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.portrait{position:relative;aspect-ratio:1;max-width:440px;width:100%;justify-self:center}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:1}
.portrait svg{position:absolute;inset:-14%;width:128%;height:128%;overflow:visible}
.portrait svg ellipse{fill:none;stroke:var(--gold);stroke-width:1}
.motion .portrait svg ellipse{transform-origin:50% 50%;animation:breathe 9s ease-in-out infinite}
.motion .portrait svg ellipse:nth-child(2){animation-delay:-3s}
.motion .portrait svg ellipse:nth-child(3){animation-delay:-6s}
@keyframes breathe{0%,100%{transform:scale(.97);opacity:.25}50%{transform:scale(1.03);opacity:.7}}
.about h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.about .lede{font-family:var(--serif);font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.5;color:#fff}
.about p{max-width:62ch}
.about .dark p:not(.lede){color:rgba(244,240,230,.86)}

/* care */
.care-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.care h2{max-width:12ch}
.care p{color:rgba(244,240,230,.88);max-width:60ch}
.care .first{font-size:1.15rem;color:var(--cream)}

/* services */
.services-intro{padding:clamp(9rem,18vw,15rem) 0 clamp(2rem,4vw,3rem)}
.services-intro h2{margin:0}
.svc{padding:clamp(3rem,7vw,6rem) 0}
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.svc:nth-of-type(even) .svc-media{order:2}
.svc-media{position:relative}
.svc-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
.svc-media.tall img{aspect-ratio:2/3;max-height:640px;width:auto;margin-inline:auto}
.motion .rise img{clip-path:inset(42% 0 0 0);transition:clip-path 1.6s cubic-bezier(.2,.7,.2,1)}
.motion .rise.in img,.reveal-all .rise img{clip-path:inset(0 0 0 0)}
.svc-media::after{content:"";position:absolute;left:6%;right:6%;bottom:-18px;height:18px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(51,51,51,.16),transparent 70%)}
.svc h3{font-size:clamp(1.9rem,3vw,2.6rem)}
.svc .sub{font-family:var(--serif);font-style:italic;font-size:1.2rem;margin-top:-.3em}
.svc ul.ticks{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.35rem}
.svc ul.ticks li{padding-left:1.5rem;position:relative}
.svc ul.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:.6rem;height:.6rem;border-radius:50% 0;background:var(--gold);transform:rotate(45deg)}
.svc .note{font-size:.95rem;font-style:italic}
.svc blockquote{margin:0 0 1.6rem;font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.4;border-left:2px solid var(--gold);padding-left:1rem}
.svc p{max-width:58ch}

/* RAC */
.rac{padding:clamp(5rem,10vw,8rem) 0 clamp(3rem,6vw,5rem)}
.rac-head{max-width:760px;margin-bottom:clamp(1rem,3vw,2rem)}
.rac-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
.rac-visual{position:sticky;top:calc(50vh - 230px);height:460px;align-self:start}
.rac-visual svg{width:100%;height:100%;overflow:visible}
.steps{list-style:none;margin:0;padding:0}
.step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;padding:2rem 0;transition:opacity .6s}
.motion .step{opacity:.42}
.motion .step.active{opacity:1}
.step .letter{font-family:var(--serif);font-style:italic;font-size:clamp(4.5rem,9vw,7.5rem);line-height:.9;color:var(--rose);display:block;margin-bottom:.2rem}
.step h3{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:.4em}
.step p{font-size:1.15rem;max-width:34ch;margin:0}
.step.final h3{color:var(--gold-deep)}
.step.final p{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.45;max-width:30ch}
.essentials{margin-top:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem 2.5rem;align-items:center;padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid rgba(197,157,94,.55);border-bottom:1px solid rgba(197,157,94,.55)}
.essentials h3{margin:0;font-size:clamp(1.6rem,2.6vw,2.1rem)}
.essentials p{margin:0;max-width:44ch}
@media (max-width:820px){
  .rac-grid{grid-template-columns:1fr;gap:0}
  .rac-visual{top:var(--head);height:min(42vh,300px);z-index:3;background:var(--sb);margin:0 -1.25rem;padding:.5rem 1.25rem 0}
    .step{min-height:56vh}
  .essentials{grid-template-columns:1fr}
}

/* how */
.how-in{max-width:820px;margin-inline:auto;text-align:center}
.how-label{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--gold-deep);margin-bottom:.6rem}
.how h2{font-size:clamp(2.2rem,5vw,3.9rem)}
.how p{max-width:52ch;margin:0 auto 2rem;font-size:1.12rem}

/* embrace */
.embrace{padding:clamp(4rem,9vw,7rem) 0 clamp(5rem,10vw,8rem);text-align:center;overflow:hidden;--e:1}
.sun{position:absolute;left:50%;top:58%;width:min(1100px,160vw);aspect-ratio:1;transform:translate(-50%,-50%) translateY(calc((1 - var(--e)) * 18%)) scale(calc(.6 + var(--e) * .4));border-radius:50%;background:radial-gradient(circle,rgba(197,157,94,.42) 0%,rgba(234,192,192,.32) 32%,rgba(244,240,230,0) 66%);pointer-events:none;z-index:0}
.embrace .logo{width:min(250px,56vw);height:auto;margin:0 auto 1.4rem;transform:translateY(calc((1 - var(--e)) * 70px));opacity:calc(.25 + var(--e) * .75)}
.motion .embrace .logo-float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.embrace h2{font-size:clamp(2.4rem,6vw,4.8rem);font-style:italic;max-width:14ch;margin-inline:auto}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.contact dl{margin:0 0 2rem;display:grid;gap:1.2rem}
.contact dt{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--gold-deep)}
.contact dd{margin:0}
.contact dd a{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:500;text-decoration:none;border-bottom:1.5px solid var(--gold);display:inline-flex;align-items:center;min-height:48px;overflow-wrap:anywhere}
.contact .cta-card{background:rgba(255,255,255,.6);border:1px solid rgba(197,157,94,.45);border-radius:6px;padding:clamp(1.6rem,4vw,2.6rem)}

footer{padding:2.5rem 0 4.5rem;font-size:.88rem;border-top:1px solid rgba(197,157,94,.4)}
.foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.foot nav{display:flex;gap:1.5rem}
.foot a{text-decoration:none;display:inline-block;padding:.7rem 0}
.foot a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.foot .contacts{display:flex;flex-wrap:wrap;gap:0 1.5rem}



/* dialogs */
dialog{border:0;padding:0;color:var(--ink);background:var(--cream);border-radius:8px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(31,39,43,.72);backdrop-filter:blur(3px)}
.motion dialog[open]{animation:dlg .45s cubic-bezier(.2,.7,.2,1)}
@keyframes dlg{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.dlg-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .6rem .6rem 1.4rem;border-bottom:1px solid rgba(197,157,94,.4)}
.dlg-bar h2{font-size:1.25rem;margin:0}
.close{min-height:44px;min-width:44px;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font:600 .85rem var(--sans);cursor:pointer;color:var(--ink)}
.close:hover{background:var(--ink);color:var(--cream)}
#booking{width:min(900px,94vw);height:85vh;max-width:none;max-height:none}
#booking[open]{display:flex;flex-direction:column}
#booking iframe{flex:1;width:100%;border:0;background:#fff}
.info{width:min(560px,92vw)}
.info .body{padding:1.4rem 1.6rem 1.8rem}
.info ul{margin:.6rem 0 0;padding-left:1.2rem;display:grid;gap:.35rem}
@media (max-width:699px){
  #booking{width:100vw;height:100vh;height:100dvh;margin:0;border-radius:0;inset:0}
}

@media (max-width:820px){
  .about-grid,.care-grid,.svc-grid,.contact-grid{grid-template-columns:1fr}
  .svc:nth-of-type(even) .svc-media{order:0}
  .portrait{max-width:250px;margin-top:1.5rem}
  .svc-media.tall img{max-height:520px}
}

/* ---------- inner pages: a short night banner that dawns into cream ---------- */
.page-hero{position:relative;overflow:hidden;color:var(--cream);isolation:isolate;padding:calc(var(--head) + clamp(3rem,8vw,6rem)) 0 clamp(3rem,7vw,5rem)}
.page-hero .hero-media img{object-position:62% 55%}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(31,39,43,.9) 0%,rgba(31,39,43,.6) 45%,rgba(31,39,43,.25) 100%),linear-gradient(180deg,rgba(31,39,43,.4) 0%,rgba(31,39,43,0) 40%,rgba(31,39,43,.6) 100%)}
.page-hero .eyebrow{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--blush);margin:0 0 .6rem}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.05;margin:0;max-width:16ch}
.page-hero .sub{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);margin:.8rem 0 0;color:rgba(244,240,230,.85)}
.motion .page-hero .rise-in{opacity:0;animation:fadeup 1.1s ease forwards;animation-delay:var(--d,.2s)}
.page-body{padding:clamp(3.5rem,8vw,6rem) 0 clamp(4rem,9vw,7rem)}
.back{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;text-decoration:none;font-weight:500;font-size:.92rem;color:var(--cream);margin-bottom:1.4rem}
.back:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}

/* coming soon and not-found pages */
.soon{max-width:640px}
.soon p{font-size:1.15rem}
.soon .actions{margin-top:2rem}
.soon .small{font-size:.98rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(197,157,94,.5)}
.soon .small a{text-decoration-color:var(--gold);text-underline-offset:4px}

/* legal pages: the policy text, unchanged, set for reading */
.legal{max-width:760px}
.legal .top__dates{font-size:.95rem;color:#5d5d5d;margin:0 0 2rem}
.legal h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:2.6rem 0 .8rem;scroll-margin-top:calc(var(--head) + 1rem)}
.legal h3{font-size:1.3rem;margin:1.8rem 0 .6rem}
.legal p,.legal li{max-width:68ch}
.legal ul,.legal ol{padding-left:1.3rem;margin:0 0 1.2rem}
.legal li{margin-bottom:.35rem}
.legal a{text-decoration-color:var(--gold);text-underline-offset:4px}
.legal .toc{background:rgba(255,255,255,.6);border:1px solid rgba(197,157,94,.45);border-radius:6px;padding:1.4rem 1.6rem;margin:0 0 2.4rem}
.legal .toc ol{margin:0;columns:2;column-gap:2.5rem}
.legal .toc li{break-inside:avoid}
.legal .toc li{margin-bottom:.45rem;line-height:1.45}
.legal .toc a{text-decoration:none}
.legal .toc a:hover{text-decoration:underline}
.legal .rows{border-top:1px solid rgba(197,157,94,.45);margin:0 0 1.6rem}
.legal .rows__row{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:.4rem 1.6rem;padding:.9rem 0;border-bottom:1px solid rgba(197,157,94,.45)}
.legal .rows__row p{margin:0}
.legal .rows__key{font-weight:600}
.legal .note{background:var(--pink-light);border-left:3px solid var(--gold);padding:1.1rem 1.3rem;margin:0 0 1.6rem;border-radius:0 6px 6px 0}
.legal .note--urgent{border-left-color:var(--rose)}
.legal .note__label{font-weight:600;margin-bottom:.4rem}
.legal .note p:last-child{margin-bottom:0}
@media (max-width:699px){
  .legal .toc ol{columns:1}
  .legal .rows__row{grid-template-columns:1fr}
}