:root{--black:#0b0c0d;--surface:#121416;--white:#e5e7e4;--soft:#b9bebc;--quiet:#858c8b;--dim:#606766;--line:rgba(229,231,228,.13);--accent:#a87560;--accent-bright:#c5967f;--accent-soft:rgba(168,117,96,.16);--ease:cubic-bezier(.2,.72,.15,1)}
*{box-sizing:border-box}

html{background:var(--black);scroll-behavior:smooth}

body{margin:0;background:var(--black);color:var(--white);font-family:Satoshi,Arial,sans-serif;overflow:hidden}

.page{height:100svh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 76% 40%,rgba(168,117,96,.13),transparent 34%),radial-gradient(ellipse at 22% 24%,rgba(84,116,124,.09),transparent 30%),linear-gradient(135deg,#151a1d 0%,#0c0f10 52%,#121416 100%)}
.page::before{content:"";position:absolute;z-index:0;inset:-12%;background:radial-gradient(ellipse at 76% 42%,rgba(168,117,96,.09),transparent 35%),radial-gradient(ellipse at 28% 78%,rgba(84,116,124,.06),transparent 30%);filter:blur(28px);pointer-events:none}

.page::after{content:"";position:absolute;z-index:0;left:32%;top:-20%;width:48vw;height:140vh;background:linear-gradient(118deg,transparent 36%,rgba(229,231,228,.045) 50%,transparent 64%);transform:rotate(-12deg);filter:blur(16px);pointer-events:none}
.brand{position:absolute;z-index:6;left:5vw;top:29px;font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}

.brand b{color:var(--accent);font-weight:500}

.layout{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(520px,1.1fr) minmax(420px,.9fr);gap:4vw;padding:clamp(42px,5vh,76px) 9vw clamp(42px,5vh,76px) 5vw}
.statement{display:flex;flex-direction:column;justify-content:center;padding:0}

.statement .hero-title{position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:0;padding-bottom:.18em;max-width:100%;min-height:0;font-family:Satoshi,Arial,sans-serif;font-size:clamp(48px,4.2vw,60px);font-weight:700;line-height:.96;letter-spacing:-.045em;text-wrap:balance}

.statement .hero-title span{display:block}

.statement .hero-title em,.statement .hero-subtitle em{font-style:normal;color:var(--accent)}

.statement h2{margin:28px 0 0;max-width:620px;font-family:Satoshi,Arial,sans-serif;font-size:clamp(28px,2.65vw,40px);font-weight:500;line-height:1.02;letter-spacing:-.02em;color:var(--white)}

.statement p{margin:12px 0 0;max-width:560px;color:var(--soft);font-size:clamp(18px,1.7vw,22px);line-height:1.42}

.statement p:first-of-type{margin-top:36px}

.statement p.referral{margin-top:22px}

.reveal{opacity:0;transform:translateY(12px);animation:soft-lift 1000ms var(--ease) both}
.reveal--hero{animation-delay:120ms;animation-duration:1100ms}
.reveal--subtitle{animation-delay:260ms;animation-duration:900ms}
.reveal--body{animation-delay:420ms;animation-duration:850ms}
.reveal--referral{animation-delay:560ms;animation-duration:850ms}

.statement .hero-title{animation-duration:1100ms}

.statement .hero-subtitle{animation-duration:900ms}

.statement p{animation-duration:850ms}

@keyframes soft-lift{from{opacity:0;transform:translateY(12px);filter:blur(1px)}

to{opacity:1;transform:none;filter:none}

}
.areas-wrap{position:relative;min-width:0;height:100%;display:flex;align-items:center;padding:80px 0 60px}

.area>div{opacity:0;transform:translateY(10px);animation:area-in 1000ms var(--ease) both}

.area:nth-child(1)>div{animation-delay:720ms}

.area:nth-child(2)>div{animation-delay:840ms}

.area:nth-child(3)>div{animation-delay:960ms}

.area:nth-child(4)>div{animation-delay:1080ms}

@keyframes area-in{from{opacity:0;transform:translateY(10px)}

to{opacity:1;transform:none}

}

.areas{width:100%;height:min(76svh,740px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-behavior:smooth;padding:22svh 72px 22svh 0;mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%)}

.areas::-webkit-scrollbar{display:none}

.area{min-height:28svh;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;position:relative;opacity:.56;transform:translateX(0) scale(.93);transition:opacity 650ms ease,transform 800ms var(--ease)}

.area::after{content:"";position:absolute;left:0;right:4%;bottom:0;height:1px;background:var(--line);transform-origin:left;transition:background 500ms ease,transform 700ms var(--ease)}

.area.is-active{opacity:1;transform:translateX(0) scale(1)}

.area.is-active::after{background:var(--accent);transform:scaleX(.24)}

.area-index{display:none}

.area h3{margin:0;font-family:Satoshi,Arial,sans-serif;font-size:clamp(30px,2.6vw,38px);font-weight:500;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}

.area h3 em{font-style:normal;color:var(--white)}

.area p{max-width:500px;margin:20px 0 0;color:var(--soft);font-size:clamp(15px,1.25vw,18px);line-height:1.45}

.rail{position:absolute;z-index:5;right:3.2vw;top:50%;transform:translateY(-50%);display:grid;gap:12px}

.rail button{width:17px;height:17px;border:0;background:transparent;padding:0;cursor:pointer;position:relative}

.rail button::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--dim);transition:inset 450ms var(--ease),background 450ms ease,box-shadow 450ms ease}

.rail button.active::before{inset:1px;background:var(--accent-bright);box-shadow:0 0 0 6px var(--accent-soft);animation:dot-pulse 1800ms ease-in-out infinite}

@keyframes dot-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 5px var(--accent-soft)}

50%{transform:scale(1.16);box-shadow:0 0 0 11px rgba(168,117,96,.08)}

}

.rail button:focus-visible{outline:1px solid var(--accent);outline-offset:5px}

.quiet-mark{position:absolute;z-index:5;right:5vw;bottom:28px;border:0;padding:0;background:transparent;color:var(--dim);font:inherit;font-size:9px;letter-spacing:.16em;opacity:.5;cursor:pointer;transition:color 250ms ease,opacity 250ms ease}

.quiet-mark:hover,.quiet-mark:focus-visible{color:var(--white);opacity:1;outline:none}

.verse-overlay{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:32px;background:rgba(0,0,0,.9);color:var(--white);cursor:pointer}

.verse-overlay[hidden]{display:none}

.verse-card{width:min(760px,100%);padding:0;background:transparent;color:var(--white);text-align:center}

.verse-reference{margin:0 0 24px;color:var(--accent);font-size:11px;letter-spacing:.16em;text-transform:uppercase}

.verse-text{margin:0 auto;max-width:680px;font-family:Satoshi,Arial,sans-serif;font-size:clamp(34px,5vw,68px);font-weight:500;line-height:.96;letter-spacing:-.03em}

.bottom{position:absolute;z-index:5;left:5vw;right:5vw;bottom:28px;display:flex;justify-content:space-between;color:var(--dim);font-size:10px;letter-spacing:.08em;text-transform:uppercase}

.bottom span:last-child{color:var(--quiet)}

.bottom strong{color:var(--accent);font-weight:500}
@media(max-width:1100px) and (min-width:851px){.layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;padding:0 6vw 0 4vw}

.statement .hero-title{font-size:clamp(48px,5.8vw,80px)}

.area h3{font-size:clamp(30px,2.8vw,36px)}

.area p{font-size:clamp(15px,1.45vw,17px)}

}
@media(max-width:1300px) and (min-width:851px){.layout{padding:clamp(42px,5vh,68px) 6vw}

.statement .hero-title{font-size:clamp(40px,3.8vw,48px)}

.statement h2{font-size:clamp(28px,3vw,38px);margin-top:22px}

.statement p{font-size:clamp(16px,1.45vw,19px)}

.statement p:first-of-type{margin-top:28px}

.statement p.referral{margin-top:18px}

}

@media(max-width:850px){body{overflow:hidden}

.page{height:100svh;min-height:100svh;overflow-y:auto;overflow-x:clip}

.layout{display:block;height:auto;padding:0 26px}

.statement{min-height:0;padding:110px 0 50px}

.statement .hero-title{margin:0;display:flex;align-items:flex-start;min-height:0;max-width:100%;font-size:clamp(34px,8vw,46px);letter-spacing:-.045em}

.statement .hero-title span{display:inline}

.statement p:first-of-type{margin-top:32px}

.statement p.referral{margin-top:20px}

.areas-wrap{height:auto;min-height:0;padding:24px 0 120px}

.areas{height:auto;overflow:visible;padding:0 28px 20svh 0;mask-image:none}

.area{min-height:34svh;grid-template-columns:minmax(0,1fr);gap:10px;padding:34px 0;scroll-margin-top:10svh}

.area h3{font-size:clamp(26px,7vw,30px);line-height:1;letter-spacing:-.025em}

.area p{margin-top:12px;font-size:clamp(16px,4.1vw,19px);line-height:1.4}

.rail{right:11px;position:fixed;top:50%;opacity:0;pointer-events:none;transition:opacity 350ms ease}

.rail.is-visible{opacity:1;pointer-events:auto}

.quiet-mark{position:fixed;right:26px;bottom:21px}

.bottom{position:fixed;left:26px;right:26px;bottom:21px}

.brand{left:26px;top:25px}

}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0ms!important}

}

/* SixStone copy fit: preserve the original split-screen composition. */
.statement .hero-title{display:block;font-size:clamp(44px,4.15vw,58px);line-height:.99}
.statement .hero-title span{display:block}
.statement .hero-title em{font-style:normal;color:var(--accent)}
.statement p{max-width:620px;font-size:clamp(16px,1.25vw,18px);line-height:1.48}
.statement p:first-of-type{margin-top:28px}
.statement p.reveal--context{margin-top:15px;animation-delay:520ms}
.statement p.referral{max-width:570px;margin-top:19px;color:var(--quiet);font-size:clamp(12px,.95vw,14px);line-height:1.45}
.reveal--referral{animation-delay:650ms}
.area{min-height:32svh}
.area h3{font-size:clamp(28px,2.45vw,36px);line-height:1.06}
.area p{max-width:560px;margin-top:14px;font-size:clamp(15px,1.12vw,17px);line-height:1.48}

@media(max-width:1100px) and (min-width:851px){
.statement .hero-title{font-size:clamp(38px,4.25vw,46px)}
.statement p{font-size:clamp(14px,1.48vw,16px);line-height:1.42}
.statement p:first-of-type{margin-top:22px}
.statement p.reveal--context{margin-top:12px}
.statement p.referral{font-size:13px;margin-top:15px}
.area{min-height:34svh}
.area h3{font-size:clamp(26px,3vw,32px)}
.area p{font-size:14px;line-height:1.42;margin-top:11px}
}

@media(max-width:850px){
.statement .hero-title{font-size:clamp(36px,8vw,46px);line-height:1.02}
.statement p{font-size:16px;line-height:1.48}
.statement p:first-of-type{margin-top:27px}
.statement p.reveal--context{margin-top:15px}
.statement p.referral{font-size:13px;margin-top:19px}
.area{min-height:34svh}
.area h3{font-size:clamp(26px,7vw,30px)}
.area p{font-size:16px;line-height:1.45;margin-top:12px}
}

/* Compact, one-question-at-a-time introduction form. */
.honeypot{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.honeypot input{width:1px!important;height:1px!important;padding:0!important;border:0!important}
.intro-form{width:min(100%,620px);margin-top:17px;padding-top:12px;border-top:1px solid var(--line)}
.statement .intro-heading{margin:0 0 16px;max-width:none;color:var(--white);font-family:Satoshi,Arial,sans-serif;font-size:17px;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.intro-step{display:grid;gap:6px}
.intro-step[hidden]{display:none}
.intro-step.is-active{animation:intro-step-in 180ms ease-out both}
@keyframes intro-step-in{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.intro-step label{color:var(--soft);font-size:13px;font-weight:400;line-height:1.3}
.intro-step input,.intro-step textarea{display:block;width:100%;min-height:44px;margin:0;padding:9px 12px;border:1px solid rgba(229,231,228,.32);border-radius:2px;outline:0;background:rgba(229,231,228,.025);color:var(--white);font:400 16px/1.4 Satoshi,Arial,sans-serif;transition:border-color 180ms ease,background 180ms ease}
.intro-step textarea{min-height:78px;resize:vertical}
.intro-step input:focus,.intro-step textarea:focus{border-color:var(--accent-bright);background:rgba(229,231,228,.04)}
.intro-form-actions{display:flex;align-items:center;justify-content:space-between;min-height:28px;margin-top:7px}
.intro-form-actions button{border:0;padding:4px 0;background:transparent;font:500 13px/1.4 Satoshi,Arial,sans-serif;cursor:pointer}
.intro-back{color:var(--quiet)}
.intro-next{margin-left:auto;color:var(--white)}
.intro-next span[aria-hidden="true"]{margin-left:4px;color:var(--accent-bright)}
.intro-back:hover,.intro-next:hover{color:var(--accent-bright)}
.intro-form-actions button:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.intro-form-actions button[hidden],.intro-status[hidden]{display:none}
.statement p.intro-status{margin:6px 0 0;color:var(--quiet);font-size:12px;line-height:1.4}

@media(max-width:850px){
.intro-form{margin-top:17px}
.intro-form-actions button{font-size:13px}
}