/* House of Radiance — Concept 3 "Begin Within"
   Qualifier funnel direction, built for paid social traffic landing on a phone.
   Same brand truth: palette lifted from the studio's own live CSS.
   gold #CA9A65 · ink #1E1A16 · cream #FEF9F4 · sand #F2EAE1 · border #E1D5CA
   --gold-txt is the same hue darkened so gold reads as text on light panels. */

: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-soft:#FBF1E5;
  --mut:#514C48; --mut2:#5A5450; --ondark:#A39D98;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1080px; --hd:70px;
}

*{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:16.5px; line-height:1.72;
  -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.18; margin:0; letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
.narrow{max-width:720px; margin:0 auto}

/* 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,.93); backdrop-filter:blur(12px) saturate(140%); border-bottom:1px solid var(--line)}
.hd-in{display:flex; align-items:center; gap:16px; height:var(--hd)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; min-height:44px}
.brand svg{width:28px; height:28px; color:var(--gold); flex:none}
.brand b{display:block; font-family:var(--serif); font-size:17px; font-weight:600}
.brand i{display:block; font-style:normal; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut2); margin-top:1px}
.hd .btn{min-height:44px; padding:10px 20px; font-size:13px}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:15px 30px; border-radius:2px; text-decoration:none;
  font-size:15px; letter-spacing:.05em; 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.gold{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn.gold:hover{background:var(--gold-lt); border-color:var(--gold-lt)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-txt)}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* hero */
.hero{position:relative; overflow:hidden; background:var(--sand); padding:0}
/* 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{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:min(78svh,660px)}
.hero-txt{padding:64px 56px 68px 22px; max-width:640px; margin-left:auto}
.hero-media{position:relative; align-self:stretch; min-height:380px}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 32%}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--sand) 0%,rgba(242,234,225,.8) 24%,rgba(242,234,225,0) 60%)}
.eyebrow{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-txt); font-weight:700; margin-bottom:20px}
.hero h1{font-size:clamp(38px,5.8vw,64px); margin-bottom:20px}
.hero h1 em{font-style:italic; color:var(--gold-txt)}
.hero .lede{font-size:17px; color:var(--mut); max-width:44ch; margin-bottom:30px}
.trust{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px}
.trust span{font-size:12px; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.7); border:1px solid var(--line); padding:8px 13px; color:var(--mut2)}

/* sections */
section{padding:88px 0}
.sec-head{text-align:center; max-width:640px; margin:0 auto 48px}
.sec-head h2{font-size:clamp(28px,4vw,42px); margin-bottom:14px}
.sec-head p{font-size:15.5px; color:var(--mut2)}

/* ---------- qualifier ---------- */
#find{background:var(--cream)}
.qz{border:1px solid var(--line); background:var(--paper); padding:0; overflow:hidden}
.qz-bar{display:flex; gap:6px; padding:20px 26px 0}
.qz-bar i{flex:1; height:3px; background:var(--line); border-radius:2px; transition:background .4s}
.qz-bar i.on{background:var(--gold)}
.qz-body{padding:26px 26px 30px}
.qz-step{display:none}
.qz-step.on{display:block}
.qz-num{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-txt); font-weight:700; margin-bottom:12px}
.qz-q{font-family:var(--serif); font-size:clamp(23px,3.4vw,31px); line-height:1.24; margin-bottom:24px}
.qopts{display:grid; gap:11px}
.qopt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  min-height:66px; padding:14px 18px; border:1px solid var(--line);
  background:var(--cream); cursor:pointer; font-family:var(--sans);
  font-size:16px; color:var(--ink); transition:border-color .28s,background .28s,transform .28s;
}
.qopt:hover{border-color:var(--gold); background:var(--gold-soft)}
.qopt:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.qopt .dot{flex:none; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center}
.qopt:hover .dot{border-color:var(--gold)}
.qopt .dot::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--gold); opacity:0; transition:opacity .25s}
.qopt:hover .dot::after{opacity:1}
.qz-back{
  background:none; border:0; font-family:var(--sans); font-size:14px; color:var(--mut2);
  cursor:pointer; padding:12px 4px; margin-top:16px; min-height:44px; text-decoration:underline;
}
.qz-back:hover{color:var(--ink)}

/* result */
.qz-res{display:none; padding:30px 26px 32px}
.qz-res.on{display:block}
.res-lbl{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-txt); font-weight:700; margin-bottom:12px}
.res-title{font-size:clamp(26px,4vw,36px); margin-bottom:12px}
.res-why{font-size:16px; color:var(--mut); line-height:1.8; margin-bottom:24px}
.res-list{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.res-list li{background:var(--cream); padding:16px 18px; display:flex; gap:13px; align-items:flex-start; font-size:15px; color:var(--mut)}
.res-list svg{width:18px; height:18px; color:var(--gold-txt); flex:none; margin-top:4px}
.res-list b{color:var(--ink)}
.res-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.res-note{font-size:13px; color:var(--mut2); line-height:1.6; margin-top:14px}

/* offerings strip */
#offerings{background:var(--sand)}
.ogrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.ocard{background:var(--cream); padding:32px 26px 34px}
.ocard .ic{width:42px; height:42px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold-txt); margin-bottom:18px}
.ocard .ic svg{width:20px; height:20px}
.ocard h3{font-size:20px; margin-bottom:9px}
.ocard p{font-size:14.5px; color:var(--mut2); line-height:1.72}

/* signature feature */
.feat{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.feat-media{position:relative}
.feat-media img{aspect-ratio:4/5; object-fit:cover; width:100%}
.feat-media .frame{position:absolute; inset:14px; border:1px solid rgba(202,154,101,.45); pointer-events:none}
.feat h2{font-size:clamp(27px,3.8vw,40px); margin-bottom:16px}
.feat p{font-size:16px; color:var(--mut); line-height:1.8; margin-bottom:15px}
.ticks{list-style:none; margin:22px 0 28px; padding:0; display:grid; gap:12px}
.ticks li{display:flex; gap:12px; font-size:15.5px; color:var(--mut); line-height:1.6}
.ticks svg{width:18px; height:18px; color:var(--gold-txt); flex:none; margin-top:4px}

/* dark band */
.dark{background:var(--ink); color:#F0E9E1}
.dark h2,.dark h3{color:#fff}
.dark p{color:var(--ondark)}
.dark .sec-head p{color:var(--ondark)}
.dark .eyebrow{color:var(--gold)}
.dark .feat-media .frame{border-color:rgba(202,154,101,.5)}
.dark .ticks li{color:var(--ondark)}
.dark .ticks svg{color:var(--gold)}

/* quotes */
.qgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.qcard{border:1px solid var(--line); background:var(--cream); padding:30px 26px 26px}
.qcard blockquote{margin:0; font-family:var(--serif); font-style:italic; font-size:16.5px; line-height:1.7}
.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:16px; padding-top:14px; border-top:1px solid var(--line)}

/* final cta + form */
#start{background:var(--gold-soft)}
.form{display:grid; gap:15px; max-width:560px; margin:0 auto}
.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:56px; padding:15px 16px; border:1px solid var(--line);
  background:var(--cream); font-family:var(--sans); font-size:16px; color:var(--ink); border-radius:2px;
}
.field textarea{min-height:118px; 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:13px; color:var(--mut2); line-height:1.6; text-align:center}
.fok{display:none; max-width:560px; margin:0 auto; border:1px solid var(--gold); background:rgba(202,154,101,.14); padding:24px 24px; line-height:1.7}
.fok.show{display:block}

/* footer */
.ft{background:var(--ink); color:#EDE6DE; padding:64px 0 28px}
.ft-top{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; margin-bottom:40px}
.ft h4{font-size:20px; margin-bottom:13px; color:#fff}
.ft .fsub{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:15px}
.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:22px}
.ft-bot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; border-top:1px solid #3A342E; margin-top:22px; padding-top:20px; 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(20px); filter:blur(6px); transition:opacity .8s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1),filter .8s}
.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(22px); 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:52px 22px 44px; max-width:none; margin:0}
  .hero-media{min-height:320px; order:-1}
  .hero-media::after{background:linear-gradient(180deg,rgba(242,234,225,.1) 0%,rgba(242,234,225,.5) 76%,var(--sand) 100%)}
  .ogrid{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:1fr; gap:36px}
  .qgrid{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:640px){
  section{padding:60px 0}
  .wrap{padding:0 18px}
  .hero-txt{padding:40px 18px 38px}
  .hero h1{font-size:clamp(33px,9.4vw,44px)}
  .hero .lede{font-size:16px}
  .hero .btn{width:100%}
  .hd .btn{padding:10px 14px; font-size:12px; letter-spacing:.03em}
  .brand i{display:none}
  .sec-head{margin-bottom:34px}
  .qz-bar{padding:16px 18px 0}
  .qz-body{padding:20px 18px 24px}
  .qz-res{padding:24px 18px 26px}
  .qopt{min-height:64px; padding:13px 15px; font-size:15.5px; gap:12px}
  .res-cta{flex-direction:column; align-items:stretch}
  .res-cta .btn{width:100%}
  .ogrid{grid-template-columns:1fr}
  .feat-media img{aspect-ratio:4/3}
  .feat .btn{width:100%}
  .form .btn{width:100%}
  .ft-top{grid-template-columns:1fr; gap:26px}
  .ft-bot{flex-direction:column; align-items:flex-start; gap:10px}
}