: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}

}