/* HERO */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;background:var(--night);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;transition:opacity .7s ease}
.hero-media img,.hero-media video,.hero-media .hs-fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
@media (min-width:821px){.hero-media img,.hero-media video,.hero-media .hs-fb{object-position:50% 34%}}
.hs-vid,.hs-fb{opacity:0;transition:opacity .6s ease}
.hs-vid.hs-on,.hs-fb.hs-on{opacity:1}
.hero-fill{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .5s ease}
.hero.intro .hero-media{opacity:0}
.hero.done .hero-media{opacity:1}
.hero.static .hero-fill,.hero.fill-gone .hero-fill{opacity:0;visibility:hidden}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,.5) 0,rgba(4,10,18,0) 20%,rgba(4,10,18,0) 40%,rgba(4,10,18,.35) 62%,rgba(4,10,18,.86) 100%);pointer-events:none;opacity:0;transition:opacity .8s ease}
.hero.done .hero-shade,.hero.static .hero-shade{opacity:1}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(28px,6vh,64px);max-width:var(--max);margin:0 auto}
.hero-copy > *{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.hero.done .hero-copy > *,.hero.static .hero-copy > *{opacity:1;transform:none}
.hero.done .hero-copy > :nth-child(2){transition-delay:.12s}
.hero.done .hero-copy > :nth-child(3){transition-delay:.24s}
.hero.done .hero-copy > :nth-child(4){transition-delay:.36s}
.hero h1{font-size:clamp(44px,8.4vw,112px);letter-spacing:-.02em;margin:10px 0 14px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero h1 em{font-style:italic;font-weight:400;color:var(--aqua-2)}
.hero .eyebrow{color:#d6f4f5}
.hero p.sub{max-width:34em;color:#dfe8ee;font-size:clamp(16px,1.5vw,19px);margin:0 0 22px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
@media (min-width:821px){.hero-copy{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:48px}.hero-copy .eyebrow,.hero-copy h1{grid-column:1/-1}.hero .ctas{justify-content:flex-end}}

/* statement */
.statement{background:var(--lime)}
.statement .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center}
.statement blockquote{margin:0;font:700 clamp(34px,4.8vw,62px)/1.06 var(--serif);letter-spacing:-.015em}
.statement blockquote span{display:block;color:var(--tile);font-style:italic;font-weight:400}
.statement .cite{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.statement .media{aspect-ratio:4/5;border-radius:4px}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stack .media:nth-child(2){margin-top:56px}
@media (max-width:820px){.statement .grid{grid-template-columns:1fr}.stack .media:nth-child(2){margin-top:32px}}

/* services */
.services .list{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.08)}
.svc{background:var(--night);padding:0 0 28px;display:flex;flex-direction:column}
.svc .media{aspect-ratio:3/4}
.svc h3{margin:24px 24px 8px}
.svc p{margin:0 24px;color:#b9c6d0}
.svc .tag{margin:14px 24px 0;font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--aqua)}
@media (max-width:820px){.services .list{grid-template-columns:1fr;gap:0}.svc .media{aspect-ratio:4/3}}

/* project log teaser */
.log{display:grid;gap:clamp(40px,6vw,88px)}
.log-item{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:end}
.log-item .media{grid-column:1/8;aspect-ratio:4/5;border-radius:4px}
.log-item .txt{grid-column:8/13;padding-bottom:12px}
.log-item:nth-child(even) .media{grid-column:6/13;grid-row:1}
.log-item:nth-child(even) .txt{grid-column:1/6;grid-row:1}
.log-item .code{font:700 13px/1 var(--sans);letter-spacing:.22em;color:var(--tile);text-transform:uppercase}
.log-item h3{font-size:clamp(30px,3.6vw,48px);margin:10px 0 14px}
.spec{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid rgba(11,22,34,.15)}
.spec li{padding:10px 0;border-bottom:1px solid rgba(11,22,34,.15);display:flex;gap:12px;font-size:15px}
.spec li::before{content:"";flex:0 0 14px;height:2px;margin-top:11px;background:var(--aqua)}
.dark .spec,.dark .spec li{border-color:rgba(255,255,255,.14)}
.textlink{font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 var(--aqua);padding:4px 0}
@media (max-width:820px){.log-item{grid-template-columns:1fr}.log-item .media,.log-item .txt,.log-item:nth-child(even) .media,.log-item:nth-child(even) .txt{grid-column:1;grid-row:auto}}

/* finish band */
.finish{position:relative;padding:0;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--deep)}
.finish .media{position:absolute;inset:0}
.finish .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,20,.1),rgba(5,12,20,.2) 45%,rgba(5,12,20,.85))}
.finish .wrap{position:relative;padding-top:120px;padding-bottom:clamp(40px,8vw,96px);width:100%}
.finish h2{max-width:13em}
.finish p{max-width:34em;color:#dbe6ec;margin-top:16px}

/* faith band */
.faith{padding:clamp(56px,8vw,96px) 0;text-align:center;background:var(--lime)}
.faith p.big{font:400 clamp(26px,3.6vw,44px)/1.2 var(--serif);font-style:italic;margin:0 auto 14px;max-width:20em}
.faith p.small{color:var(--muted);max-width:38em;margin:0 auto}
.star{display:inline-block;color:var(--red);font-size:18px;margin-bottom:12px}

/* CTA */
.cta{background:var(--deep);color:#fff;text-align:center}
.cta h2{max-width:14em;margin:0 auto 16px}
.cta p{color:#c4d3dd;max-width:34em;margin:0 auto 28px}

/* sub page hero */
.phero{position:relative;min-height:72vh;display:flex;align-items:flex-end;background:var(--night);color:#fff;overflow:hidden;padding:0}
.phero .media{position:absolute;inset:0}
.phero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,.55),rgba(4,10,18,.15) 35%,rgba(4,10,18,.88))}
.phero .wrap{position:relative;width:100%;padding-top:120px;padding-bottom:clamp(36px,6vw,72px)}
.phero h1{font-size:clamp(42px,7vw,96px);margin:12px 0 12px}
.phero p{max-width:36em;color:#d8e3ea;font-size:clamp(16px,1.5vw,19px);margin:0}

/* pools page */
.project{padding:clamp(64px,9vw,120px) 0;border-bottom:1px solid rgba(11,22,34,.1)}
.project .head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;margin-bottom:28px}
.project .no{font:700 clamp(48px,7vw,96px)/.9 var(--serif);color:transparent;-webkit-text-stroke:1.2px var(--tile)}
.project h2{font-size:clamp(34px,5vw,64px)}
.project .where{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.pgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px}
.pgrid .media{aspect-ratio:9/14;border-radius:4px}
.pgrid .media.wide{grid-row:span 2;aspect-ratio:auto;min-height:100%}
.pinfo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);margin-top:32px}
.pinfo .quote{font:400 clamp(20px,2.2vw,26px)/1.35 var(--serif);font-style:italic;margin:0}
.pinfo .src{font-size:13px;color:var(--muted);margin-top:10px}
.project.dark{border:0}
.project.dark .no{-webkit-text-stroke-color:var(--aqua)}
.project.dark .where,.project.dark .pinfo .src{color:#8fa3b3}
@media (max-width:820px){
  .pgrid{grid-template-columns:1fr 1fr}
  .pgrid .media.wide{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}
  .pinfo{grid-template-columns:1fr}
}
.pgrid.two{grid-template-columns:1fr 1fr}
.pgrid.two .media{aspect-ratio:4/5}

/* build page */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.step{display:grid;grid-template-columns:120px 1fr 1fr;gap:clamp(20px,4vw,56px);padding:40px 0;border-top:2px solid var(--aqua);align-items:start}
.step .n{font:700 clamp(40px,5vw,64px)/1 var(--serif);color:var(--tile)}
.step h3{font-size:clamp(26px,3vw,38px);margin:0 0 12px}
.step .media{aspect-ratio:4/3;border-radius:4px}
.step .q{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;margin:14px 0 4px}
.step .src{font-size:13px;color:var(--muted)}
@media (max-width:820px){.step{grid-template-columns:1fr;gap:14px}.step .n{font-size:40px}}
.care{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.care ul{list-style:none;padding:0;margin:24px 0}
.care li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);display:flex;gap:14px;align-items:baseline}
.care li b{font-family:var(--serif);font-size:20px;font-weight:700}
.care li span{color:#b9c6d0;font-size:15px}
.care .media{aspect-ratio:4/5;border-radius:4px}
@media (max-width:820px){.care{grid-template-columns:1fr}}

/* plan tool */
.planner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:start}
.q-block{border:0;margin:0 0 34px;padding:0}
.q-block legend,.q-block .lbl{font:700 clamp(22px,2.4vw,28px)/1.2 var(--serif);margin-bottom:6px;padding:0}
.q-block .hint{color:var(--muted);font-size:14px;margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,22,34,.18);font-weight:500;font-size:15px;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s;user-select:none}
.chip input:checked + span{background:var(--night);color:#fff;box-shadow:inset 0 0 0 1.5px var(--night)}
.chip input:checked + span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aqua);margin-right:10px}
.chip input:focus-visible + span{outline:3px solid var(--aqua);outline-offset:2px}
.finishes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fcard{position:relative;cursor:pointer}
.fcard input{position:absolute;opacity:0}
.fcard .sw{display:block;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--deep);box-shadow:0 0 0 2px transparent;transition:box-shadow .2s}
.fcard .sw img{width:100%;height:100%;object-fit:cover}
.fcard .sw.plain{background:linear-gradient(135deg,#e7e1d6,#cfd8dc)}
.fcard b{display:block;margin-top:8px;font-size:15px}
.fcard small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.fcard input:checked ~ .sw{box-shadow:0 0 0 3px var(--night),0 0 0 6px var(--aqua)}
.fcard input:focus-visible ~ .sw{outline:3px solid var(--aqua);outline-offset:4px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-weight:600;font-size:15px}
.field input,.field select,.field textarea{font:400 16px/1.4 var(--sans);padding:12px 14px;border-radius:8px;border:1.5px solid rgba(11,22,34,.2);background:#fff;color:var(--ink);min-height:48px;width:100%}
.field textarea{min-height:96px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}.finishes{grid-template-columns:repeat(3,1fr);gap:8px}.fcard small{display:none}}
.brief{position:sticky;top:92px;background:var(--night);color:#e9eef2;border-radius:10px;padding:26px;overflow:hidden}
.brief::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--tile),var(--aqua))}
.brief h2{font-size:26px;margin:0 0 4px}
.brief .to{color:#8fa3b3;font-size:14px;margin:0 0 16px}
.brief pre{white-space:pre-wrap;word-wrap:break-word;font:400 15px/1.55 var(--sans);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:16px;margin:0 0 18px;min-height:150px}
.brief .btn{width:100%}
.brief .alt{display:block;text-align:center;margin-top:12px;font-size:14px;color:#b9c6d0}
.brief .how{font-size:13px;color:#8fa3b3;margin:14px 0 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#fff;color:var(--ink);padding:14px 20px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:80;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){.planner{grid-template-columns:1fr}.brief{position:relative;top:0}}
.hide{display:none!important}

/* refinements */
.statement .grid{grid-template-columns:1fr 1fr}
@media (min-width:821px){
  .finish{min-height:auto;align-items:stretch;background:var(--night)}
  .finish .media{left:auto;width:min(46%,620px);right:max(0px,calc((100vw - var(--max))/2))}
  .finish .media::after{background:linear-gradient(90deg,var(--night),rgba(7,17,29,0) 30%)}
  .finish .wrap{padding-top:clamp(96px,10vw,150px);padding-bottom:clamp(96px,10vw,150px);min-height:min(92vh,860px);display:flex;flex-direction:column;justify-content:center}
  .finish h2,.finish p{max-width:min(48%,560px)}
}
@media (max-width:820px){
  .svc .media{aspect-ratio:16/9}
  .log-item .media{aspect-ratio:4/3}
  .finish{min-height:78vh}
  .statement .grid{grid-template-columns:1fr}
  section{padding:64px 0}
}
@media (max-width:820px){
  .statement .media{aspect-ratio:1/1}
  .stack .media:nth-child(2){margin-top:0}
  .faith{padding:48px 0}
  .log{gap:48px}
  .svc{padding-bottom:22px}
  .svc h3{margin-top:16px}
  .wl-head{margin-bottom:24px}
}
.pgrid .media.tall{grid-row:span 2;aspect-ratio:auto;min-height:100%}
@media (max-width:820px){.pgrid .media.tall{grid-row:auto;aspect-ratio:9/14}}
.pgrid .media.span2{grid-column:span 2;aspect-ratio:16/10}
.pgrid.trio{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){
  .pgrid.trio{grid-template-columns:1fr 1fr}
  .pgrid.trio .media:first-child{grid-column:1/-1;aspect-ratio:4/5}
}
@media (max-width:560px){.care li{flex-direction:column;gap:2px}}
.sendbar{display:none}
@media (max-width:900px){
  .sendbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(7,17,29,.96);transition:transform .3s ease}
  .sendbar .btn{width:100%}
  .sendbar.away{transform:translateY(110%)}
  .toast{bottom:84px}
  body:has(.sendbar) .footer{padding-bottom:110px}
}