/* House of Radiance — Concept 2 "The Ritual"
   Same brand truth as concept 1 (palette lifted from the studio's own live CSS),
   inverted into a dark, atmospheric, experience led direction.
   gold #CA9A65 · ink #1E1A16 · cream #FEF9F4 · border #E1D5CA
   --gold-txt / --gold-btn are derived off the same hue for contrast on light panels. */

:root{
  --ink:#1E1A16; --ink2:#2D2824; --ink3:#3F3935; --ink-deep:#151210;
  --cream:#FEF9F4; --paper:#FAF4EE; --sand:#F2EAE1;
  --line:#E1D5CA; --line-d:#3A342E;
  --gold:#CA9A65; --gold-lt:#F3D1AE; --gold-txt:#915F21;
  --mut:#514C48; --ondark:#A39D98; --ondark2:#C8C2BB;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1160px; --hd:72px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-deep); color:#EFE8E0;
  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.16; margin:0; color:#fff; letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}

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

/* header */
.hd{position:sticky; top:0; z-index:50; background:rgba(21,18,16,.86); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line-d)}
.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:29px; height:29px; color:var(--gold); flex:none}
.brand b{display:block; font-family:var(--serif); font-size:17.5px; font-weight:600; color:#fff}
.brand i{display:block; font-style:normal; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:2px}
.nav{display:flex; gap:26px}
.nav a{text-decoration:none; font-size:14px; color:var(--ondark); padding:9px 0; min-height:40px; display:flex; align-items:center; position:relative}
.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:#fff}
.nav a:hover::after{right:0}
.burger{display:none; width:46px; height:46px; border:1px solid var(--line-d); background:transparent; border-radius:4px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:19px; height:1.5px; background:#EFE8E0; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:1.5px; background:#EFE8E0}
.burger span::before{top:-6px} .burger span::after{top:6px}
.mnav{display:none; background:var(--ink); border-bottom:1px solid var(--line-d)}
.mnav.open{display:block}
.mnav a{display:block; padding:15px 24px; text-decoration:none; font-size:16px; color:#EFE8E0; border-bottom:1px solid var(--line-d)}
.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(--gold); background:var(--gold); color:#211A12;
  cursor:pointer; font-family:var(--sans); transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{background:var(--gold-lt); border-color:var(--gold-lt)}
.btn.ghost{background:transparent; color:#EFE8E0; border-color:#4A433C}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold); background:transparent}
.btn.light{background:var(--cream); border-color:var(--cream); color:var(--ink)}
.btn.light:hover{background:#fff; border-color:#fff}

/* hero */
.hero{position:relative; min-height:calc(100svh - var(--hd)); display:flex; align-items:center; overflow:hidden; padding:80px 0 96px}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:52% 35%; opacity:.42}
.hero-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 30%,rgba(21,18,16,.35) 0%,rgba(21,18,16,.86) 58%,var(--ink-deep) 100%)}
.hero-in{position:relative; z-index:2; text-align:center; max-width:840px; margin:0 auto}
.eyebrow{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:22px}
.hero h1{font-size:clamp(42px,7.4vw,86px); margin-bottom:24px}
.hero h1 em{font-style:italic; color:var(--gold); display:block}
.hero .lede{font-size:17.5px; color:var(--ondark2); max-width:56ch; margin:0 auto 36px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}

/* halo rings behind hero */
.halo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; pointer-events:none}
.halo i{position:absolute; left:50%; top:50%; border:1px solid rgba(202,154,101,.16); border-radius:50%; transform:translate(-50%,-50%)}

/* sections */
section{padding:96px 0; position:relative}
.sec-head{text-align:center; max-width:640px; margin:0 auto 56px}
.sec-head h2{font-size:clamp(29px,4.2vw,46px); margin-bottom:16px}
.sec-head p{font-size:15px; color:var(--ondark)}

/* ---------- ritual builder ---------- */
#builder{background:var(--ink)}
.rb{border:1px solid var(--line-d); background:linear-gradient(180deg,#221E1A 0%,#1B1815 100%); padding:44px 40px 46px}
.rb-step{margin-bottom:34px}
.rb-step > p{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; font-weight:700}
.opts{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.opt{position:relative}
.opt input{position:absolute; opacity:0; width:1px; height:1px}
.opt label{
  display:flex; flex-direction:column; gap:5px; justify-content:center;
  min-height:82px; padding:16px 16px; border:1px solid var(--line-d);
  background:rgba(255,255,255,.02); cursor:pointer; transition:border-color .3s,background .3s;
}
.opt label b{font-family:var(--serif); font-size:18px; color:#fff; font-weight:600}
.opt label span{font-size:12.5px; color:var(--ondark); line-height:1.5}
.opt label:hover{border-color:#5A5148}
.opt input:checked + label{border-color:var(--gold); background:rgba(202,154,101,.12)}
.opt input:focus-visible + label{outline:2px solid var(--gold); outline-offset:2px}

.rb-out{border-top:1px solid var(--line-d); padding-top:32px; margin-top:6px}
.rb-out .lbl{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px}
.rb-out h3{font-size:clamp(24px,3.2vw,34px); margin-bottom:12px}
.rb-out .why{font-size:15px; color:var(--ondark2); margin-bottom:24px; line-height:1.8}
.rb-list{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:1px; background:var(--line-d); border:1px solid var(--line-d)}
.rb-list li{background:#1E1A17; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:var(--ondark2)}
.rb-list .n{
  flex:none; width:26px; height:26px; border:1px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:12.5px; border-radius:50%;
}
.rb-list b{color:#fff; font-weight:700}
.rb-foot{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.rb-note{font-size:12.5px; color:#8B8580; line-height:1.6}

/* ---------- breath pacer ---------- */
#breathe{background:var(--ink-deep); text-align:center}
.bp-stage{position:relative; width:min(320px,74vw); aspect-ratio:1; margin:0 auto 28px; display:flex; align-items:center; justify-content:center}
.bp-ring{position:absolute; inset:0; border:1px solid rgba(202,154,101,.25); border-radius:50%}
.bp-orb{
  width:44%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#F3D1AE 0%,#CA9A65 46%,#8E6435 100%);
  box-shadow:0 0 60px rgba(202,154,101,.34);
  transition:transform 4s cubic-bezier(.37,0,.63,1);
}
.bp-orb.expand{transform:scale(1.75)}
.bp-orb.hold{transform:scale(1.75)}
.bp-orb.contract{transform:scale(1)}
.bp-word{font-family:var(--serif); font-size:24px; color:#fff; min-height:34px; margin-bottom:8px}
.bp-count{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.bp-ctrl{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}

/* ---------- offerings strip ---------- */
#offerings{background:var(--ink)}
.ogrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-d); border:1px solid var(--line-d)}
.ocard{background:#1D1916; padding:34px 28px 36px; transition:background .4s}
.ocard:hover{background:#242019}
.ocard .ic{width:42px; height:42px; border:1px solid var(--line-d); display:flex; align-items:center; justify-content:center; color:var(--gold); margin-bottom:20px; transition:border-color .35s}
.ocard:hover .ic{border-color:var(--gold)}
.ocard .ic svg{width:20px; height:20px}
.ocard h3{font-size:21px; margin-bottom:10px}
.ocard p{font-size:14px; color:var(--ondark); line-height:1.75}

/* ---------- feature ---------- */
.feat{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.feat-media{position:relative}
.feat-media img{aspect-ratio:1; object-fit:cover; width:100%}
.feat-media .frame{position:absolute; inset:15px; border:1px solid rgba(202,154,101,.4); pointer-events:none}
.feat h2{font-size:clamp(27px,3.8vw,42px); margin-bottom:18px}
.feat p{font-size:15px; color:var(--ondark2); line-height:1.8; margin-bottom:16px}
.tags{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 30px}
.tag{font-size:12px; letter-spacing:.09em; text-transform:uppercase; border:1px solid var(--line-d); padding:8px 14px; color:var(--ondark)}

/* light band */
.light-band{background:var(--cream); color:var(--ink)}
.light-band h2,.light-band h3{color:var(--ink)}
.light-band p{color:var(--mut)}
.light-band .sec-head p{color:var(--mut)}
.light-band .eyebrow{color:var(--gold-txt)}
.light-band .tag{border-color:var(--line); color:var(--mut)}
.light-band .feat-media .frame{border-color:rgba(202,154,101,.5)}

/* quotes */
.qgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.qcard{border:1px solid var(--line); background:var(--paper); padding:32px 28px 28px}
.qcard blockquote{margin:0; font-family:var(--serif); font-style:italic; font-size:16.5px; line-height:1.7; color:var(--ink)}
.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;
}
.qnote{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}

/* contact */
#contact{background:var(--ink)}
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
.form{display:grid; gap:16px}
.field label{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:14px 15px; border:1px solid var(--line-d);
  background:#191512; font-family:var(--sans); font-size:15.5px; color:#F0E9E1; 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:#8B8580; 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; line-height:1.7; color:#EFE8E0}
.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(--ondark2); line-height:1.6}
.clist svg{width:18px; height:18px; color:var(--gold); flex:none; margin-top:3px}

/* footer */
.ft{background:#100D0B; padding:70px 0 30px; border-top:1px solid var(--line-d)}
.ft-top{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; margin-bottom:44px}
.ft h4{font-size:20px; margin-bottom:14px}
.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:#8F8983; line-height:1.75; border-top:1px solid var(--line-d); padding-top:24px}
.ft-bot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; border-top:1px solid var(--line-d); margin-top:24px; padding-top:22px; font-size:12.5px; color:#8F8983}
.by{text-decoration:none; color:#8F8983; 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}
  .bp-orb{transition:none}
}

/* responsive */
@media (max-width:1000px){
  .ogrid{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:1fr; gap:38px}
  .cgrid{grid-template-columns:1fr; gap:38px}
  .qgrid{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr; gap:32px}
  .opts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:640px){
  section{padding:64px 0}
  .wrap{padding:0 20px}
  .hero{padding:56px 0 64px; min-height:0}
  .hero h1{font-size:clamp(35px,10vw,48px)}
  .hero .lede{font-size:16px}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%}
  .sec-head{margin-bottom:38px}
  .rb{padding:28px 20px 30px}
  .opts{grid-template-columns:1fr; gap:10px}
  .opt label{min-height:64px; flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap}
  .opt label b{font-size:16px}
  .rb-foot{flex-direction:column; align-items:stretch}
  .rb-foot .btn{width:100%}
  .ogrid{grid-template-columns:1fr}
  .ocard{padding:28px 22px 30px}
  .feat-media img{aspect-ratio:4/3}
  .bp-ctrl{flex-direction:column}
  .bp-ctrl .btn{width:100%}
  .ft-top{grid-template-columns:1fr; gap:28px}
  .ft-bot{flex-direction:column; align-items:flex-start; gap:10px}
  .feat .btn,.form .btn{width:100%}
}