/*
Theme Name: Trinity Preserve
Theme URI: https://trinitypreserve.com/
Author: Trinity Preserve
Description: Immersive scroll-sequence marketing site for Trinity Preserve at Lake Havasu.
Version: 1.0.0
Text Domain: trinity-preserve
*/
:root{--ink:#171815;--cream:#eee9df;--gold:#d1b376}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--ink);color:#fff;font-family:Arial,sans-serif;overflow-x:hidden}button,a{color:inherit}a{text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Georgia,serif;font-weight:400}em{font-weight:400}.nav{position:fixed;z-index:30;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:18px 4vw}.brand{display:block}.brand img{display:block;width:clamp(118px,11vw,168px);height:auto;border-radius:0;box-shadow:none}.footer-brand img{width:120px}.access{border:1px solid #ffffff99;padding:11px 16px;font-size:10px;letter-spacing:.18em;text-shadow:0 1px 8px #000}.progress{position:fixed;z-index:40;left:0;top:0;width:3px;height:100vh;background:#ffffff15}.progress i{display:block;width:100%;height:0;background:var(--gold)}.film{height:720vh}.film-stage,.config-stage{position:sticky;top:0;height:100vh;overflow:hidden}.film-stage{background:#090a08}.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.wash{position:absolute;inset:0;background:linear-gradient(90deg,#0009,transparent 58%),linear-gradient(0deg,#0007,transparent 45%)}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#111;letter-spacing:.24em;font-size:10px;transition:opacity .5s}.loading.done{opacity:0;pointer-events:none}.beat{position:absolute;left:8vw;bottom:12vh;max-width:760px;opacity:0;transform:translateY(24px);transition:opacity .12s linear,transform .12s linear;pointer-events:none}.beat.right{left:auto;right:8vw;text-align:right}.beat.active{opacity:1;transform:none}.beat small,.config-heading small,.principles>small,.future>small{letter-spacing:.22em;font-size:10px}.beat h1{font-size:clamp(68px,10vw,148px);line-height:.68;margin:26px 0}.beat h1 em{font-size:.52em;margin-left:1.35em}.beat h2{font-size:clamp(52px,7vw,105px);line-height:.9;margin:20px 0}.beat p{max-width:540px;line-height:1.65}.scroll-cue{position:absolute;right:4vw;bottom:32px;font-size:9px;letter-spacing:.18em}.scroll-cue b{margin-left:12px}.configurator{height:560vh;background:var(--cream);color:var(--ink)}.config-stage{display:flex;flex-direction:column;justify-content:center}.config-heading{text-align:center;position:absolute;z-index:4;top:9vh;width:100%}.config-heading h2{font-size:clamp(42px,5vw,76px);margin:10px 0}.config-heading p{font-size:12px}.viewport{position:absolute;inset:26vh 0 11vh;touch-action:pan-y;cursor:grab}.viewport.dragging{cursor:grabbing}.home-track{height:100%;display:flex;align-items:center;gap:clamp(0px,1vw,16px);will-change:transform}.home-card{flex:0 0 min(64vw,940px);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:.18;transform:scale(.84);transition:opacity .36s ease,transform .5s cubic-bezier(.2,.75,.25,1)}.home-card.active{opacity:1;transform:scale(1)}.home-card img{display:block;width:100%;height:78%;object-fit:contain;filter:drop-shadow(0 26px 18px #30281d2b);user-select:none}.home-card h3{font-size:clamp(22px,2.2vw,34px);margin:4px 0}.config-controls{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);display:flex;gap:24px;align-items:center}.config-controls button{border:1px solid #888;background:transparent;width:44px;height:44px;border-radius:50%;cursor:pointer}.config-controls span{font-size:11px;letter-spacing:.2em}.principles{padding:14vh 7vw;background:var(--cream);color:var(--ink)}.principles h2,.future>h2{font-size:clamp(50px,6vw,92px);line-height:.94;margin:20px 0 65px}.principles>div{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #999}.principles article{padding:35px 10px}.principles h3{font-size:30px;margin-top:45px}.future{padding:15vh 7vw 9vh}.choices{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#555}.choices button{border:0;text-align:left;color:#fff;min-height:390px;padding:44px;background:linear-gradient(135deg,#3b3429,#171815);cursor:pointer}.choices button:last-child{background:linear-gradient(135deg,#202a2b,#171815)}.choices h3{font-size:54px;margin:100px 0 10px}.choices b{display:block;margin-top:32px;font-size:10px;letter-spacing:.15em}footer{display:flex;justify-content:space-between;align-items:center;padding:44px 7vw;background:#090a08;color:#aaa}.modal{position:fixed;z-index:100;inset:0;display:none;place-items:center;background:#0b0c0aee}.modal.open{display:grid}.close{position:absolute;right:5vw;top:4vh;border:0;background:none;font-size:44px}.modal form{width:min(650px,86vw)}.modal form h2{font-size:58px}.modal input{display:block;width:100%;padding:17px 2px;border:0;border-bottom:1px solid #777;background:transparent;color:#fff;font:inherit}.modal form button{margin-top:30px;padding:16px 22px;background:var(--cream);color:var(--ink);border:0;font-size:10px;letter-spacing:.15em}.modal form p{color:#777;font-size:11px;margin-top:18px}@media(max-width:760px){.film{height:620vh}.beat,.beat.right{left:7vw;right:7vw;text-align:left}.home-card{flex-basis:88vw}.config-heading{top:10vh}.viewport{inset:29vh 0 13vh}.principles>div,.choices{grid-template-columns:1fr}.choices button{min-height:320px}.choices h3{margin-top:65px}footer{gap:25px;align-items:flex-end}.access{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.home-card{transition:none}}

/* Persistent cinematic timeline + glass configurator */
body{background:#0c0d0b}.video-shell{position:fixed;z-index:0;inset:0;overflow:hidden;background:#080907}.video-shell video{width:100%;height:100%;object-fit:cover}.video-shell .wash{position:absolute;inset:0;background:linear-gradient(90deg,#0008,transparent 62%),linear-gradient(0deg,#0007,transparent 45%)}.dot-veil{position:absolute;inset:0;opacity:.11;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.2px),linear-gradient(110deg,#0002,#fff1 48%,#0002);background-size:4px 4px,100% 100%;pointer-events:none}main,.nav,footer{position:relative;z-index:2}.progress{position:fixed;z-index:40}.nav{position:fixed;background:linear-gradient(#0b0c0aaa,transparent);transition:padding .4s,background .4s}.nav nav{display:flex;gap:clamp(10px,1.8vw,28px);align-items:center}.nav nav a{text-transform:uppercase;font-size:9px;letter-spacing:.16em;text-shadow:0 1px 10px #000}.logo-mark{display:none!important}.nav.compact{padding:8px 3vw;background:#111613dc;backdrop-filter:blur(12px)}.nav.compact .logo-full{display:none}.nav.compact .logo-mark{display:block!important;width:48px;height:40px;object-fit:contain}.film{position:relative;background:transparent}.film-anchor{position:absolute;top:var(--at);height:1px;scroll-margin-top:72px}.film-stage{background:transparent}.beat{z-index:3}.configurator{position:relative;background:rgba(226,220,208,.70)}.configurator:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(239,235,226,.88),rgba(239,235,226,.55) 48%,rgba(239,235,226,.78));pointer-events:none}.config-stage{background:transparent}.home-track{left:0}.home-card{background:transparent;box-shadow:none}.home-card img{filter:drop-shadow(0 24px 18px rgba(25,22,17,.32))}.home-card h3{max-width:720px;text-align:center;background:rgba(239,235,226,.64);padding:8px 18px;border-radius:2px}.principles,.future,footer{position:relative;z-index:3}.principles{background:rgba(238,233,223,.96)}.future{background:rgba(17,17,17,.96)}
@media(max-width:1100px){.nav nav{max-width:68vw;overflow-x:auto;padding-bottom:4px}.nav nav a{white-space:nowrap}.nav.compact .logo-mark{width:42px}.home-card h3{font-size:20px}}
/* Circular, viewport-anchored home carousel */
.configurator{height:980vh}.viewport{overflow:hidden}.home-track{position:absolute;inset:0;width:100%;height:100%;transform:none!important}.home-card{position:absolute;left:50%;top:0;width:min(64vw,940px);height:100%;transition:opacity .34s ease,transform .54s cubic-bezier(.16,.78,.24,1);will-change:transform,opacity}.home-card.active{opacity:1}.config-controls{z-index:6}.config-dots{display:flex;align-items:center;gap:9px}.config-dots button{width:7px;height:7px;border:0;padding:0;background:#777;border-radius:50%;opacity:.35;transition:transform .25s,opacity .25s,background .25s}.config-dots button.active{opacity:1;background:#171815;transform:scale(1.45)}
@media(max-width:760px){.home-card{width:88vw}.config-dots{gap:7px}}
.configurator{height:100vh;min-height:760px}.config-stage{position:relative;top:auto;height:100%;min-height:760px}

/* High-resolution landmark stills crossfade over the transition film */
.still-stack,.landmark-still{position:absolute;inset:0;width:100%;height:100%}.landmark-still{object-fit:cover;opacity:0;will-change:opacity;transition:opacity .1s linear}.landmark-still.active{opacity:.94}.dot-veil{opacity:.055}.principles article p{max-width:350px;color:#555;line-height:1.55;margin-top:14px}
.still-stack{display:none}.video-shell video{opacity:1}

/* Tuned configurator height and tighter vertical framing */
.configurator{height:min(86vh,860px);min-height:620px}
.config-stage{height:100%;min-height:620px}
.config-heading{top:4.5vh}
.viewport{inset:16vh 0 10vh}
.home-card img{height:84%}
@media(max-width:760px){.configurator,.config-stage{height:82vh;min-height:600px}.config-heading{top:3.5vh}.viewport{inset:18vh 0 11vh}}

/* Frame-accurate 4K-derived scroll film */
.film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#080907}
.loading{z-index:8;background:#111;transition:opacity .65s ease}

/* Responsive hamburger navigation */
.menu-toggle{display:none;position:relative;z-index:32;width:44px;height:44px;padding:11px;border:0;background:transparent;cursor:pointer}
.menu-toggle i{display:block;height:1px;margin:5px 0;background:#fff;transition:transform .25s ease,opacity .2s ease}
@media(max-width:1100px){.nav{overflow:visible}.menu-toggle{display:block}.nav nav{position:fixed;z-index:31;inset:0;max-width:none;overflow:hidden;padding:clamp(92px,17vh,150px) 8vw 8vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;background:rgba(13,16,14,.97);backdrop-filter:blur(16px);transform:translateX(100%);transition:transform .38s cubic-bezier(.22,.75,.22,1)}.nav.menu-open nav{transform:none}.nav nav a{width:100%;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:Georgia,serif;font-size:clamp(30px,7vw,52px);letter-spacing:0;text-transform:none}.nav.menu-open .menu-toggle i:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav.menu-open .menu-toggle i:nth-child(2){opacity:0}.nav.menu-open .menu-toggle i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}body.menu-open{overflow:hidden}}
/* Centered hero identity and minimal scroll cue */
.nav>.brand{position:fixed;z-index:29;left:50%;top:50%;transform:translate(-50%,-50%);transition:left .55s cubic-bezier(.22,.75,.22,1),top .55s cubic-bezier(.22,.75,.22,1),transform .55s cubic-bezier(.22,.75,.22,1)}
.nav>.brand img{filter:brightness(0) invert(1);background:transparent!important;box-shadow:none!important;width:clamp(220px,25vw,410px);transition:width .55s ease,opacity .3s ease}
.nav.compact>.brand{left:auto;right:3vw;top:12px;transform:none}.nav.compact>.brand .logo-mark{width:48px;filter:brightness(0) invert(1)}
.scroll-cue{position:absolute;z-index:5;left:50%;right:auto;bottom:5vh;width:38px;height:38px;transform:translateX(-50%);display:grid;place-items:center}
.scroll-cue i{display:block;width:18px;height:18px;border-right:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(45deg);animation:chevronPulse 1.8s ease-in-out infinite}
@keyframes chevronPulse{0%,100%{opacity:.28;transform:translateY(-5px) rotate(45deg)}50%{opacity:1;transform:translateY(5px) rotate(45deg)}}
@media(max-width:1100px){.menu-toggle{position:fixed;left:3vw;right:auto;top:10px}.nav>.brand img{width:min(62vw,300px)}.nav.compact>.brand{right:3vw;top:10px}.nav.compact>.brand .logo-mark{width:42px}}
@media(prefers-reduced-motion:reduce){.scroll-cue i{animation:none}}
/* The centered brand mark replaces the duplicate typographic hero title. */
.beat[data-in="0"] h1{display:none}


/* Reliable landmark navigation, taller compact bar, and repeated next controls */
.nav nav{position:relative;z-index:34;pointer-events:auto}.nav nav a{position:relative;pointer-events:auto;cursor:pointer}
.nav.compact{height:72px;min-height:72px;padding:0 3vw;align-items:center;background:rgba(48,51,49,.94)}
.nav.compact>.brand{right:3vw;top:50%;transform:translateY(-50%)}.nav.compact nav{margin-right:72px}
.beat[data-in="0"] p{max-width:min(920px,84vw);font-family:Georgia,serif;font-size:clamp(38px,5.4vw,82px);line-height:.94;letter-spacing:-.025em}
.section-chevron{position:absolute;z-index:12;left:50%;bottom:22px;width:38px;height:38px;padding:0;transform:translateX(-50%);border:0;background:transparent;cursor:pointer}
.section-chevron i{display:block;width:18px;height:18px;margin:auto;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);animation:chevronPulse 1.8s ease-in-out infinite}
.configurator .section-chevron,.principles .section-chevron{color:#171815}
@media(max-width:1100px){.nav.compact{height:66px;min-height:66px}.nav.compact>.brand{right:3vw;top:50%}.nav.compact nav{margin-right:0}}

/* Navigation must sit above the sticky film interaction surface. */
.nav{z-index:50!important}



/* Landmark resting states, critical-frame loader, and refined actions */
.nav>.brand{left:74%}
.loading{display:flex;flex-direction:column;gap:24px;justify-content:center;align-items:center;background:#111613;z-index:60}
.loading>img{width:74px!important;filter:brightness(0) invert(1);animation:loaderBreath 1.8s ease-in-out infinite}
.loading>div{width:min(260px,62vw);text-align:center}.loading span{display:block;font-size:10px;letter-spacing:.2em;color:#fff}
.loading div>i{display:block;height:1px;margin-top:16px;background:#ffffff26}.loading div>i b{display:block;width:0;height:100%;background:#fff;transition:width .2s linear}
@keyframes loaderBreath{50%{opacity:.42;transform:scale(.94)}}
.beat[data-at="0"] p{max-width:min(860px,48vw);font-family:Georgia,serif;font-size:clamp(38px,5vw,78px);line-height:.94;letter-spacing:-.025em}
.construction-beat{left:6vw;right:6vw;bottom:8vh;max-width:none}.construction-beat h2{font-size:clamp(38px,4.8vw,72px);max-width:1000px;margin-bottom:34px}
.construction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid #ffffff80;padding-top:20px}.construction-grid>div{padding-right:24px}.construction-grid b{font-size:12px}.construction-grid h3{font-size:clamp(21px,2vw,32px);margin:18px 0 8px}.construction-grid p{font-size:14px;line-height:1.45;max-width:330px}
.scroll-cue.nudge i{animation:homeNudge .72s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes homeNudge{0%,100%{transform:translateY(-4px) rotate(45deg)}50%{transform:translateY(10px) rotate(45deg)}}
.choices button{position:relative;overflow:hidden;transition:transform .28s ease,filter .28s ease,box-shadow .28s ease}.choices button:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#ffffff13 48%,transparent 76%);transform:translateX(-110%);transition:transform .55s ease}.choices button:hover{transform:translateY(-4px);filter:brightness(1.1);box-shadow:0 20px 45px #0005}.choices button:hover:after{transform:translateX(110%)}.choices button:active{transform:translateY(-1px) scale(.992)}
@media(max-width:1100px){.nav>.brand{left:50%}.construction-beat{bottom:7vh}.construction-grid{gap:14px}.construction-grid p{font-size:12px}}
@media(max-width:760px){.beat[data-at="0"] p{max-width:86vw;font-size:clamp(34px,10vw,58px)}.construction-beat h2{font-size:34px}.construction-grid{grid-template-columns:1fr;gap:8px}.construction-grid>div{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start}.construction-grid h3{font-size:18px;margin:0}.construction-grid p{display:none}}

/* Explicit phone/tablet navigation state */
@media(max-width:1200px){
  .nav{height:66px;min-height:66px;padding:10px 18px;overflow:visible;background:linear-gradient(#111613d9,transparent)}
  .menu-toggle{display:block;position:fixed;z-index:102;left:18px;right:auto;top:11px;width:44px;height:44px;padding:10px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(15,18,16,.58);backdrop-filter:blur(8px)}
  .menu-toggle i{width:20px;margin:5px auto}
  .nav nav{position:fixed;z-index:101;inset:0;display:flex;max-width:none;width:100vw;height:100dvh;padding:88px 8vw 42px;overflow-y:auto;overflow-x:hidden;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;background:rgba(13,16,14,.985);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(100%);transition:transform .38s cubic-bezier(.22,.75,.22,1),opacity .22s ease,visibility 0s linear .38s}
  .nav.menu-open nav{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);transition-delay:0s}
  .nav nav a{display:block;width:100%;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:Georgia,serif;font-size:clamp(27px,6vw,48px);line-height:1.05;letter-spacing:0;text-transform:none;white-space:normal}
  .nav.menu-open .menu-toggle{background:rgba(255,255,255,.08)}
}


/* Final responsive presentation polish */
.configurator{background:rgba(226,220,208,.52)}
.configurator:before{background:linear-gradient(90deg,rgba(239,235,226,.68),rgba(239,235,226,.34) 48%,rgba(239,235,226,.60))}
@media(max-width:760px){
  .nav:not(.compact)>.brand{top:27%;left:50%;transform:translate(-50%,-50%)}
  .nav:not(.compact)>.brand img{width:min(58vw,245px)}
  .beat[data-at="0"]{left:7vw;right:7vw;bottom:12vh;text-align:center}
  .beat[data-at="0"] p{max-width:none;margin:0 auto;font-size:clamp(30px,8.5vw,42px);line-height:.98}
  .future{height:100dvh;min-height:640px;padding:82px 20px 18px;display:flex;flex-direction:column;justify-content:center}
  .future>h2{font-size:clamp(31px,8.5vw,42px);line-height:.95;margin:12px 0 20px}
  .future .choices{grid-template-columns:1fr;gap:1px}
  .future .choices button{min-height:178px;padding:20px 22px}
  .future .choices h3{font-size:34px;margin:24px 0 5px}
  .future .choices p{margin-bottom:0}
  .future .choices b{margin-top:12px}
}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.modal form>p.success{color:#426144}.modal form>p.error{color:#8d332a}.modal form button[disabled]{opacity:.55;cursor:wait}