@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');:root{--ink:#061421;--aqua:#80ebd0;--cream:#f3f0e8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink);width:100%;overflow-x:hidden}
body{margin:0;min-width:100%;min-height:100vh;background:var(--ink);color:#eaf2ed;font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
header{height:78px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;position:absolute;inset:0 0 auto;z-index:5;border-bottom:1px solid #ffffff1d}
.logo{color:#fff;text-decoration:none;font-weight:800;letter-spacing:-.8px;font-size:17px;display:flex;align-items:center;gap:8px}
.logo b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--aqua);color:var(--ink);font:700 17px Playfair Display,serif}
.logo i{font:600 17px Playfair Display,serif}
nav{display:flex;gap:28px}
nav a{color:#d4e2df;text-decoration:none;font-size:12px;font-weight:700}
.open{color:var(--ink);background:var(--aqua);padding:11px 15px;border-radius:999px;text-decoration:none;font-size:11px;font-weight:800}
.hero{height:min(820px,100vh);min-height:670px;position:relative;display:flex;align-items:end;padding:0 7vw 95px;overflow:hidden}
.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,#061421 0%,#061421d9 31%,#06142138 72%,#06142159),url('hero-community.png') center/cover;filter:saturate(.82) contrast(1.05);animation:zoom 18s ease-in-out infinite alternate}
.hero-wash{position:absolute;inset:0;background:radial-gradient(circle at 72% 25%,#55e2c640,transparent 24%),linear-gradient(0deg,#061421d9,transparent 45%)}
.hero-content{position:relative;max-width:750px}
.kicker{font:500 10px 'DM Mono',monospace;letter-spacing:1.6px;text-transform:uppercase;color:var(--aqua);margin:0 0 20px}
.kicker span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 14px var(--aqua);margin-right:8px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(52px,7vw,102px);letter-spacing:-5px;line-height:.95;margin-bottom:25px}
h1 em,h2 em{font-family:Playfair Display,serif;font-weight:600;color:var(--aqua)}
.hero-content>p:not(.kicker){max-width:570px;color:#d4e0de;font-size:16px;line-height:1.8}
.hero-link{display:inline-block;margin-top:20px;color:var(--ink);background:var(--aqua);padding:14px 17px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:800}
.moments{padding:125px 7vw;background:var(--cream);color:#0c2a30}
.moments-head{max-width:750px}
.moments h2,.architecture h2,.future h2,.final h2{font-size:clamp(40px,5.2vw,76px);letter-spacing:-3.5px;line-height:1.04;margin-bottom:22px}
.moments h2 em,.architecture h2 em,.future h2 em,.final h2 em{color:#107e71}
.moments-head>p:not(.kicker){color:#54716e;line-height:1.8;font-size:15px}
.moment-room{display:grid;grid-template-columns:290px 1fr;margin-top:45px;background:#092631;border-radius:24px;overflow:hidden;box-shadow:0 22px 70px #041a2029}
.moment-list{padding:16px;background:#103942}
.moment{width:100%;padding:20px 14px;text-align:left;background:transparent;border:0;border-bottom:1px solid #7de4ce24;color:#d1e7e3;font-family:inherit;cursor:pointer;transition:.25s}
.moment span{display:block;font:10px DM Mono,monospace;color:var(--aqua);margin-bottom:9px}
.moment b{display:block;font-size:14px;letter-spacing:-.3px}
.moment small{display:block;font-size:10px;color:#91b5b0;margin-top:7px}
.moment.active,.moment:hover{background:#80ebd01c;border-radius:11px}
.story{padding:42px;position:relative;background:radial-gradient(circle at 78% 14%,#3ba9923d,transparent 27%),#092631}
.story-top{display:flex;justify-content:space-between;gap:15px}
.story-top p{font:10px DM Mono,monospace;letter-spacing:1px;color:var(--aqua)}
.live{font-size:10px;color:#b9d0cc}
.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px var(--aqua);margin-right:6px}
.story h3{font:600 clamp(29px,3.7vw,52px)/1.05 Playfair Display,serif;letter-spacing:-2px;margin:34px 0 15px}
.story-copy{color:#bad0cc;max-width:630px;font-size:14px;line-height:1.8}
.perspective-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}
.perspective-grid article{padding:16px;border:1px solid #a6f7df2b;border-radius:12px;background:#153d46aa}
.perspective-grid .icon{font-size:18px;color:var(--aqua)}
.perspective-grid small{display:block;margin:11px 0 6px;font:10px DM Mono,monospace;letter-spacing:.7px;color:var(--aqua)}
.perspective-grid strong{font-size:12px;line-height:1.55;color:#e6f3f0}
.story-footer{margin-top:25px;padding-top:16px;border-top:1px solid #bff7e336;display:flex;justify-content:space-between;gap:12px;color:#b8d4cf;font-size:10px}
.story-footer b{color:var(--aqua)}
.architecture{padding:130px 7vw;min-height:650px;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}
.architecture>div>p:not(.kicker){max-width:520px;color:#aec4c2;line-height:1.8}
.architecture-art{height:410px;position:relative;border-radius:50%;background:radial-gradient(circle,#257e7961,transparent 55%)}
.core{position:absolute;inset:0;margin:auto;width:120px;height:120px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#a4f4d9;color:#093038;font:bold 45px Playfair Display,serif;box-shadow:0 0 0 12px #a4f4d914,0 0 70px #80ebd040}
.core span{font:10px DM Mono,monospace;letter-spacing:1px}
.line{position:absolute;width:54%;height:1px;background:linear-gradient(90deg,transparent,var(--aqua),transparent);transform-origin:left;left:50%;top:50%;animation:glow 3s infinite}
.one{transform:rotate(-136deg)}
.two{transform:rotate(-26deg);animation-delay:1s}
.three{transform:rotate(76deg);animation-delay:2s}
.architecture-art label{position:absolute;padding:9px 12px;border:1px solid #80ebd05a;border-radius:99px;color:#bdebdc;font-size:10px;background:#092c36a6}
.a{left:2%;top:16%}
.b{right:0;top:38%}
.c{left:18%;bottom:10%}
.future{padding:125px 7vw 105px;background:var(--cream);color:#0b292f}
.future>h2{margin-bottom:45px}
.future-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#b6cbc5;border:1px solid #b6cbc5}
.future-grid article{background:#f7f5ef;padding:30px;min-height:250px}
.future-grid small{font:10px DM Mono,monospace;color:#148372}
.future-grid h3{font-size:22px;letter-spacing:-1px;margin:30px 0 13px}
.future-grid p{font-size:13px;line-height:1.75;color:#53706c}
.note{margin:22px 0 0;padding:15px 17px;border-left:3px solid #148372;background:#d8e7df;color:#486661;font-size:11px;line-height:1.7}
.final{padding:145px 7vw;background:radial-gradient(circle at 70% 50%,#14645f,transparent 30%),#061421;text-align:center}
.final h2{margin-bottom:0}
footer{padding:26px 5vw;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff22;color:#8fa6a4;font-size:10px;background:#061421}
@keyframes zoom{to{transform:scale(1.05)}
}
@keyframes glow{50%{filter:drop-shadow(0 0 8px var(--aqua));opacity:.35}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}
}
@media(max-width:760px){header{padding:0 20px}
nav{display:none}
.open{font-size:10px}
.hero{min-height:700px;height:92vh;padding:0 25px 70px}
.hero-photo{background-position:63% center}
.hero-content>p:not(.kicker){font-size:14px}
.moments,.architecture,.future,.final{padding:82px 22px}
.moment-room,.architecture{grid-template-columns:1fr}
.moment-list{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.moment{padding:13px 10px}
.moment b{font-size:11px}
.story{padding:28px 20px}
.story-top{display:block}
.story h3{margin-top:24px}
.perspective-grid{grid-template-columns:1fr}
.story-footer{display:block}
.story-footer b{display:block;margin-top:10px}
.architecture{min-height:0;gap:15px}
.architecture-art{height:310px}
.future-grid{grid-template-columns:1fr}
.future-grid article{min-height:auto}
.final{padding-top:100px;padding-bottom:100px}
footer{padding:23px 20px;display:block}
footer span{display:block;margin-top:11px}
}

.story{isolation:isolate;overflow:hidden}
.story:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#092631 12%,#092631cc 45%,#09263155 100%),url('moment-connection.png') center/cover;opacity:.72;z-index:0;transition:opacity .5s,transform .7s}
.story>*{position:relative;z-index:1}
.story[data-moment='belonging']:before{background-image:linear-gradient(90deg,#092631 12%,#092631cc 45%,#09263155 100%),url('moment-belonging.png')}
.story[data-moment='support']:before{background-image:linear-gradient(90deg,#092631 12%,#092631cc 45%,#09263155 100%),url('moment-support.png')}
.story[data-moment='change']:before{background-image:linear-gradient(90deg,#092631 12%,#092631cc 45%,#09263155 100%),url('hero-community.png')}
.story.flash:before{animation:sceneShift .65s ease}
@keyframes sceneShift{0%{opacity:.08;transform:scale(1.08)}
100%{opacity:.62;transform:scale(1)}
}
.moment.active{box-shadow:inset 3px 0 0 var(--aqua)}
.perspective-grid article{transition:transform .25s,background .25s}
.perspective-grid article:hover{transform:translateY(-4px);background:#20535d}
@media(max-width:760px){.story:before{background-position:70% center;opacity:.42}
}

.moment-room .story{padding-right:44%;min-height:580px}
.story-scene{position:absolute!important;z-index:0!important;top:0;right:0;bottom:0;width:42%;overflow:hidden;border-left:1px solid rgba(128,235,208,.35);background:#17110e}
.story-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#241c18 0%,rgba(36,28,24,.13) 68%,rgba(36,28,24,.04) 100%)}
.story-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:1;filter:saturate(1.05) contrast(1.04)}
.moment-room .story:before{display:none}
.moment-room .story:after{content:'A real moment, seen clearly';position:absolute;z-index:2;right:18px;bottom:18px;color:#fff;font:500 9px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;padding:9px 10px;background:rgba(3,19,27,.55);border:1px solid rgba(255,255,255,.27);border-radius:99px}
@media(max-width:760px){.moment-room .story{padding:270px 20px 26px;min-height:0}
.story-scene{left:0;right:0;top:0;bottom:auto;width:100%;height:235px;border-left:0;border-bottom:1px solid rgba(128,235,208,.35)}
.moment-room .story:after{top:195px;bottom:auto;right:13px}
}

.launch-line{margin:24px 0 0;color:#b4ccc8;font-size:12px}
.final .launch-line{color:#b4ccc8}
.final .kicker{margin-bottom:16px}
footer a{color:#a8c5bf;text-decoration:none}
footer a:hover{color:#80ebd0}

.phone-link{display:inline-block;margin:24px 10px 0 0;padding:13px 18px;border:1px solid var(--aqua);border-radius:999px;color:var(--aqua);font-size:12px;font-weight:800;text-decoration:none;transition:background .2s,color .2s}
.phone-link:hover,.phone-link:focus-visible{background:var(--aqua);color:var(--ink)}
.footer-phone{font-weight:800}

.hero-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.watch-film{border:1px solid rgba(234,242,237,.5);color:#fff;background:rgba(6,20,33,.24);padding:13px 16px;border-radius:999px;font:800 12px Manrope,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.watch-film span{color:#80ebd0;margin-right:7px}
.film-modal{display:none;position:fixed;inset:0;z-index:30;padding:24px;align-items:center;justify-content:center}
.film-modal.open{display:flex}
.film-backdrop{position:absolute;inset:0;background:rgba(2,12,19,.82);backdrop-filter:blur(10px)}
.film-panel{position:relative;width:min(920px,100%);padding:24px;border:1px solid rgba(128,235,208,.36);border-radius:22px;background:#08222d;box-shadow:0 24px 90px rgba(0,0,0,.55)}
.film-panel .kicker{margin-bottom:13px}
.film-panel video{display:block;width:100%;max-height:72vh;border-radius:12px;background:#000}
.film-close{position:absolute;right:13px;top:11px;width:33px;height:33px;border:0;border-radius:50%;color:#06202b;background:#80ebd0;font-size:23px;cursor:pointer}
@media(max-width:760px){.film-modal{padding:12px}
.film-panel{padding:17px}
.film-panel video{max-height:76vh}
.watch-film{font-size:11px}
}

.moment-room .story[data-moment='support']:before{background-position:center 42%}
@media(max-width:760px){.moment-room .story[data-moment='support']:before{background-position:center 42%}
}


/* Warm nocturne palette — a more grounded, premium visual direction. */
:root{--ink:#191512;--aqua:#d49a5d;--cream:#f2eae0}
body{color:#f7f1ea}
header{border-color:rgba(255,244,234,.16)}
nav a{color:#e4d7ca}
.open,.hero-link{background:var(--aqua);color:#211813}
.hero-photo{background-image:linear-gradient(90deg,#191512 0%,#191512d9 31%,#19151238 72%,#19151259),url('hero-community.png')}
.hero-wash{background:radial-gradient(circle at 72% 25%,rgba(212,154,93,.24),transparent 24%),linear-gradient(0deg,#191512d9,transparent 45%)}
.hero-content>p:not(.kicker){color:#e2d7cd}
.moments{color:#2d211b}
.moments h2 em,.architecture h2 em,.future h2 em,.final h2 em{color:#9a5a2f}
.moments-head>p:not(.kicker){color:#6d5749}
.moment-room{background:#241c18;box-shadow:0 22px 70px rgba(51,31,17,.22)}
.moment-list{background:#33261f}
.moment{color:#f1e1d4;border-color:rgba(228,183,140,.17)}
.moment small{color:#c6aa95}
.moment.active,.moment:hover{background:rgba(212,154,93,.13)}
.story{background:radial-gradient(circle at 78% 14%,rgba(187,111,62,.25),transparent 27%),#241c18}
.story-top p,.perspective-grid small,.story-footer b,.moment span,.kicker{color:var(--aqua)}
.live,.story-copy,.story-footer{color:#dcc7b8}
.perspective-grid article{border-color:rgba(234,198,164,.2);background:rgba(66,46,35,.82)}
.perspective-grid article:hover{background:#51382a}
.perspective-grid strong{color:#fbf2e9}
.architecture>div>p:not(.kicker){color:#cfbfb1}
.core{background:#edc48e;color:#39251a;box-shadow:0 0 0 12px rgba(237,196,142,.12),0 0 70px rgba(212,154,93,.25)}
.line{background:linear-gradient(90deg,transparent,var(--aqua),transparent)}
.architecture-art{background:radial-gradient(circle,rgba(183,112,67,.34),transparent 55%)}
.architecture-art label{border-color:rgba(226,177,125,.4);color:#f0d8c1;background:rgba(48,29,20,.65)}
.future{color:#33241d}
.future-grid{background:#d7c3b1;border-color:#d7c3b1}
.future-grid article{background:#fbf7f1}
.future-grid small{color:#9a5a2f}
.future-grid p{color:#6c5649}
.note{border-color:#a9673b;background:#efe0d0;color:#65493b}
.final{background:radial-gradient(circle at 70% 50%,#6e432b,transparent 30%),#191512}
footer{background:#191512;color:#bfae9f}
footer a{color:#d5bb9f}
footer a:hover{color:var(--aqua)}
.watch-film{border-color:rgba(248,232,216,.48);background:rgba(35,24,18,.36)}
.watch-film span{color:var(--aqua)}
.film-panel{border-color:rgba(212,154,93,.45);background:#241a16}
.film-close{background:var(--aqua);color:#2b1c14}
.life-header-logo{display:flex;align-items:center;width:170px;height:62px;text-decoration:none}.life-header-logo img{display:block;width:170px;height:auto;max-width:100%;filter:drop-shadow(0 5px 12px rgba(0,0,0,.24))}@media(max-width:760px){.life-header-logo{width:132px;height:50px}.life-header-logo img{width:132px}}
