/* House of Radiance — Concept 1 "Sanctuary"
   Palette pulled from the client's own live page CSS (houseofwellness-w2tfdnno.manus.space):
   gold  oklch(.72 .09 68) = #CA9A65   ink oklch(.22 .01 60) = #1E1A16
   cream oklch(.985 .008 68) = #FEF9F4 border oklch(.88 .02 68) = #E1D5CA
   Their gold fails contrast as text (2.41:1 on cream), so --gold-txt / --gold-btn are
   derived off the SAME hue at lower lightness. The bright accent stays bright. */

:root{
  --ink:#1E1A16; --ink2:#2D2824; --ink3:#3F3935;
  --cream:#FEF9F4; --paper:#FAF4EE; --sand:#F2EAE1; --sand2:#ECE3DA;
  --line:#E1D5CA;
  --gold:#CA9A65; --gold-lt:#F3D1AE; --gold-txt:#915F21; --gold-btn:#9E6B2F;
  --mut:#514C48; --mut2:#5A5450; --ondark:#A39D98;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1180px; --hd:74px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* ---------- concept notice ---------- */
.cnote{
  position:relative; z-index:60; background:var(--ink); color:#EDE6DE;
  font-size:13.5px; line-height:1.6; padding:12px 52px 12px 20px; text-align:center;
}
.cnote strong{color:var(--gold)}
.cnote button{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; background:transparent; color:#EDE6DE;
  font-size:22px; line-height:1; cursor:pointer; border-radius:50%;
}
.cnote button:hover{background:rgba(255,255,255,.12)}
.cnote[hidden]{display:none}

/* ---------- header ---------- */
.hd{
  position:sticky; top:0; z-index:50; background:rgba(254,249,244,.9);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line);
}
.hd-in{display:flex; align-items:center; gap:20px; height:var(--hd)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.brand svg{width:30px; height:30px; color:var(--gold); flex:none}
.brand b{display:block; font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:.005em}
.brand i{display:block; font-style:normal; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut2); margin-top:1px}
.nav{display:flex; gap:26px}
.nav a{
  text-decoration:none; font-size:14px; color:var(--mut); letter-spacing:.02em;
  position:relative; padding:9px 0; min-height:40px; display:flex; align-items:center;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .35s cubic-bezier(.23,1,.32,1);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.burger{display:none; width:46px; height:46px; border:1px solid var(--line); background:transparent; border-radius:4px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:19px; height:1.5px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* mobile drawer */
.mnav{display:none; border-bottom:1px solid var(--line); background:var(--cream)}
.mnav.open{display:block}
.mnav a{display:block; padding:15px 24px; text-decoration:none; font-size:16px; border-bottom:1px solid var(--sand2); color:var(--ink)}
.mnav .btn{margin:16px 24px 22px; display:flex}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 28px; border-radius:2px; text-decoration:none;
  font-size:14.5px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--ink); background:var(--ink); color:var(--cream);
  cursor:pointer; font-family:var(--sans); transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{background:var(--ink3); border-color:var(--ink3)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold); background:transparent; color:var(--gold-txt)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn.gold:hover{background:var(--gold-lt); border-color:var(--gold-lt); color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--cream)}
/* full bleed: the media must reach the viewport edge at any width, so the grid
   is not capped. The text block is capped instead and sits against the centre. */
.hero-in{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; min-height:calc(100svh - var(--hd))}
.hero-txt{padding:70px 56px 80px 24px; max-width:660px; margin-left:auto; width:100%}
.hero-media{position:relative; align-self:stretch; min-height:420px}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 30%}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--cream) 0%,rgba(254,249,244,.86) 26%,rgba(254,249,244,0) 62%);
}
.eyebrow{font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:var(--gold-txt); font-weight:700; margin-bottom:22px}
.eyebrow.on-dark{color:var(--gold)}
.hero h1{font-size:clamp(40px,6.2vw,72px); margin-bottom:24px}
.hero h1 em{font-style:italic; color:var(--gold-txt); display:block}
.hero .lede{font-size:17px; color:var(--mut); max-width:460px; margin-bottom:34px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px}
.scroll-hint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--mut2); display:flex; flex-direction:column; align-items:center; gap:9px; z-index:3}
.scroll-hint::after{content:""; width:1px; height:44px; background:linear-gradient(var(--gold),transparent)}

/* ---------- sections ---------- */
section{padding:96px 0}
.sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:56px}
.sec-head h2{font-size:clamp(29px,4vw,45px); max-width:15ch}
.sec-head .lede{font-size:14.5px; color:var(--mut2); max-width:34ch; line-height:1.75}

/* offerings */
#offerings{background:var(--paper)}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.card{background:var(--paper); padding:38px 32px 40px; transition:background .4s}
.card:hover{background:var(--cream)}
.card .ic{width:44px; height:44px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:var(--gold-txt); transition:border-color .35s}
.card:hover .ic{border-color:var(--gold)}
.card .ic svg{width:21px; height:21px}
.card h3{font-size:22px; margin-bottom:11px}
.card p{font-size:14.5px; color:var(--mut2); line-height:1.75}

/* signature split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split-media{position:relative}
.split-media img{aspect-ratio:4/5; object-fit:cover; width:100%}
.split-media .frame{position:absolute; inset:16px; border:1px solid rgba(202,154,101,.45); pointer-events:none}
.badge{
  position:absolute; right:-18px; bottom:-18px; width:138px; height:138px;
  background:var(--gold); color:var(--ink); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:14px;
  box-shadow:0 14px 34px rgba(30,26,22,.18);
}
.badge b{font-family:var(--serif); font-size:26px; line-height:1}
.badge span{font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; margin-top:7px; line-height:1.45}
.split h2{font-size:clamp(27px,3.6vw,40px); margin-bottom:18px}
.split p{font-size:15px; color:var(--mut); margin-bottom:16px; line-height:1.8}
.tags{display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 30px}
.tag{font-size:12px; letter-spacing:.09em; text-transform:uppercase; border:1px solid var(--line); padding:8px 14px; color:var(--mut2)}

/* dark band */
.dark{background:var(--ink); color:#F0E9E1}
.dark h2{color:#fff}
.dark p{color:var(--ondark)}
.dark .split-media .frame{border-color:rgba(202,154,101,.5)}
.dark .tag{border-color:#453E38; color:var(--ondark)}

/* about + stats */
#about{background:var(--sand)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-top:28px; margin-top:30px; border-top:1px solid var(--line)}
.stat b{display:block; font-family:var(--serif); font-size:36px; color:var(--gold-txt); line-height:1}
.stat span{display:block; font-size:12.5px; color:var(--mut2); margin-top:7px; line-height:1.5}
.pull{
  border-left:2px solid var(--gold); padding:6px 0 6px 22px; margin:28px 0 0;
  font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.6; color:var(--ink);
}
.pull cite{display:block; font-family:var(--sans); font-style:normal; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut2); margin-top:14px}

/* testimonials */
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.tcard{background:var(--cream); border:1px solid var(--line); padding:34px 30px 30px; position:relative}
.tcard .q{position:absolute; top:16px; left:26px; font-family:var(--serif); font-size:58px; line-height:1; color:rgba(202,154,101,.32)}
.tcard blockquote{margin:0; font-size:15px; line-height:1.8; color:var(--mut); font-style:italic; position:relative; padding-top:26px}
.samp{
  display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-txt); border:1px dashed rgba(145,95,33,.5);
  padding:6px 11px; margin-bottom:4px;
}
.tnote{font-size:12.5px; color:var(--mut2); margin-top:18px; padding-top:16px; border-top:1px solid var(--line); line-height:1.6}

/* cta band */
.ctaband{background:var(--gold); text-align:center}
.ctaband h2{font-size:clamp(28px,4vw,44px); color:var(--ink); margin-bottom:18px}
.ctaband p{color:#3A2E1F; max-width:46ch; margin:0 auto 32px; font-size:15.5px}
.ctaband .btn{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.ctaband .btn.ghost{background:transparent; color:var(--ink); border-color:rgba(30,26,22,.4)}
.ctaband .btn.ghost:hover{border-color:var(--ink); color:var(--ink)}

/* contact */
#contact{background:var(--paper)}
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.form{display:grid; gap:16px}
.field label{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut2); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:14px 15px; border:1px solid var(--line);
  background:var(--cream); font-family:var(--sans); font-size:15.5px; color:var(--ink); border-radius:2px;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
.formnote{font-size:12.5px; color:var(--mut2); line-height:1.6}
.fok{
  display:none; border:1px solid var(--gold); background:rgba(202,154,101,.12);
  padding:20px 22px; font-size:14.5px; color:var(--ink); line-height:1.7;
}
.fok.show{display:block}
.clist{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px}
.clist li{display:flex; gap:13px; font-size:14.5px; color:var(--mut); line-height:1.6}
.clist svg{width:18px; height:18px; color:var(--gold-txt); flex:none; margin-top:3px}

/* footer */
.ft{background:var(--ink); color:#EDE6DE; padding:70px 0 30px}
.ft-top{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; margin-bottom:44px}
.ft h4{font-family:var(--serif); font-size:20px; margin-bottom:14px; color:#fff}
.ft .fsub{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:16px}
.ft p{font-size:14px; color:var(--ondark); line-height:1.75; max-width:34ch}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ft ul a{font-size:14px; color:var(--ondark); text-decoration:none; display:inline-block; padding:9px 0; min-height:40px}
.ft ul a:hover{color:var(--gold)}
.disc{font-size:11.5px; color:#8B8580; line-height:1.75; border-top:1px solid #3A342E; padding-top:24px; max-width:none}
.ft-bot{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  border-top:1px solid #3A342E; margin-top:24px; padding-top:22px; font-size:12.5px; color:#8B8580;
}
.by{text-decoration:none; color:#8B8580; padding:11px 0; display:inline-block; min-height:40px}
.by b{color:var(--gold); font-weight:700}
.by:hover b{color:var(--gold-lt)}

/* motion */
.sprog{position:fixed; top:0; left:0; height:2px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:0 50%; z-index:70}
.js .reveal{opacity:0; transform:translateY(22px); filter:blur(6px); transition:opacity .85s cubic-bezier(.23,1,.32,1),transform .85s cubic-bezier(.23,1,.32,1),filter .85s}
.js .reveal.in{opacity:1; transform:none; filter:none}
.reveal-d1{transition-delay:.09s} .reveal-d2{transition-delay:.18s} .reveal-d3{transition-delay:.27s}
.js [data-cascade] .word{display:inline-block; opacity:0; transform:translateY(24px); filter:blur(7px)}
.js [data-cascade].in .word{opacity:1; transform:none; filter:none; transition:opacity .8s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1),filter .8s}

@media (prefers-reduced-motion: reduce){
  .js .reveal,.js [data-cascade] .word{opacity:1!important; transform:none!important; filter:none!important}
  .sprog{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr; min-height:0}
  .hero-txt{padding:56px 24px 46px; max-width:none; margin:0}
  .hero-media{min-height:340px; order:-1}
  .hero-media::after{background:linear-gradient(180deg,rgba(254,249,244,.15) 0%,rgba(254,249,244,.55) 78%,var(--cream) 100%)}
  .scroll-hint{display:none}
  .grid3{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr; gap:40px}
  .cgrid{grid-template-columns:1fr; gap:40px}
  .ft-top{grid-template-columns:1fr 1fr; gap:34px}
  .tgrid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:640px){
  section{padding:64px 0}
  .wrap{padding:0 20px}
  .hero-txt{padding:44px 20px 40px}
  .hero h1{font-size:clamp(34px,9vw,44px)}
  .hero .lede{font-size:16px}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%}
  .sec-head{margin-bottom:38px; gap:14px}
  .sec-head .lede{max-width:none}
  .grid3{grid-template-columns:1fr}
  .card{padding:30px 24px 32px}
  .split-media img{aspect-ratio:4/3}
  .badge{width:112px; height:112px; right:-8px; bottom:-14px}
  .badge b{font-size:21px}
  .stats{grid-template-columns:1fr; gap:18px}
  .stat b{font-size:30px}
  .pull{font-size:17px; padding-left:18px}
  .ft-top{grid-template-columns:1fr; gap:30px}
  .ft-bot{flex-direction:column; align-items:flex-start; gap:10px}
  .ctaband .btn{width:100%}
  .split .btn,.form .btn{width:100%}
  .tags{gap:7px}
}