/* Diamond Homes — Build Process ("The Build") — real-photo WALKTHROUGH.
   No animation: an elegant, scrollable stage-by-stage story with real jobsite
   photos. Reuses tokens/nav/.btn from style.css and intro/nav-toggle/footer/
   lightbox from home.css. */

/* ---------- hero ---------- */
.bp-hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream);overflow:hidden}
.bp-hero::before{content:'';position:absolute;inset:0;background:url('../images/exterior-1.jpg') center/cover no-repeat;z-index:-2}
.bp-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:
  radial-gradient(105% 78% at 50% 46%,rgba(20,18,15,.62) 0%,rgba(20,18,15,.28) 42%,transparent 72%),
  linear-gradient(180deg,rgba(26,24,20,.72) 0%,rgba(42,38,33,.58) 45%,rgba(18,16,13,.9) 100%)}
.bp-hero-inner{max-width:880px;padding:0 2rem;text-shadow:0 2px 20px rgba(10,9,7,.85),0 1px 3px rgba(10,9,7,.75)}
.bp-hero .hero-script{font-family:var(--script);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--gold-bright);margin-bottom:.5rem}
.bp-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,6.4vw,5rem);line-height:1.08;margin-bottom:1.1rem;color:#fff}
.bp-hero p{font-weight:400;font-size:clamp(1rem,2vw,1.22rem);color:var(--cream);max-width:600px;margin:0 auto 2.2rem}
.bp-hero .hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- walkthrough ---------- */
.wt{background:var(--cream);padding-bottom:5rem}
.wt-stages{position:relative;max-width:1160px;margin:0 auto;padding:0 2rem}
/* the timeline spine (desktop) */
.wt-stages::before{content:'';position:absolute;left:50%;top:2rem;bottom:2rem;width:2px;transform:translateX(-1px);
  background:repeating-linear-gradient(180deg,var(--gold) 0 10px,transparent 10px 20px);opacity:.4}

.wt-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;padding:3.4rem 0}
.wt-stage .wt-copy{padding:0 1.5rem}
.wt-stage:nth-child(even) .wt-media{order:2}
/* number badge on the spine */
.wt-badge{position:absolute;left:50%;top:3.4rem;transform:translate(-50%,0);width:52px;height:52px;border-radius:50%;
  background:var(--burgundy);color:var(--gold-bright);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.35rem;font-weight:500;z-index:3;box-shadow:0 8px 22px rgba(66,61,54,.28)}

.wt-copy .wt-step{font-family:var(--sans);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.5rem}
.wt-copy h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.8vw,2.2rem);color:var(--burgundy);line-height:1.12;margin-bottom:.9rem}
.wt-copy .wt-desc{font-weight:300;color:#57504a;line-height:1.65}
.wt-tags{list-style:none;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.wt-tags li{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#6b5b52;border:1px solid rgba(91,84,75,.28);padding:.35rem .8rem}

/* media / galleries */
.wt-gallery{display:grid;gap:12px}
.wt-gallery.single{grid-template-columns:1fr}
.wt-gallery.grid{grid-template-columns:1fr 1fr}
.wt-photo{position:relative;overflow:hidden;aspect-ratio:4/3;background:#2C2823;border:1px solid rgba(91,84,75,.18);box-shadow:0 18px 44px rgba(66,61,54,.16);cursor:pointer}
.wt-gallery.single .wt-photo{aspect-ratio:3/2}
.wt-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .6s ease}
.wt-photo:hover img{transform:scale(1.05)}
.wt-photo::after{content:'\2197';position:absolute;top:.6rem;right:.7rem;z-index:3;color:#fff;opacity:0;transition:opacity .25s;font-size:1.1rem;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.wt-photo:hover::after{opacity:1}
.wt-photo.empty{cursor:default}
.wt-photo.empty img{display:none}
.wt-photo.empty::after{display:none}
.wt-photo-ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;padding:1rem;
  background:linear-gradient(155deg,#3B362F 0%,#2C2823 100%)}
.wt-photo-ph .m{font-size:1.7rem;color:var(--gold);line-height:1}
.wt-photo-ph .t{font-family:var(--serif);font-size:1.05rem;color:var(--sand)}
.wt-photo-ph .n{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(214,216,220,.55)}
.wt-photo-ph .f{font-size:.64rem;color:var(--gold-bright);letter-spacing:.05em;font-family:var(--sans)}
.wt-cap{margin-top:.7rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8078;text-align:center}

/* scroll reveal (opt-in, added by JS so content is never hidden without JS) */
.wt-reveal .wt-stage{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.wt-reveal .wt-stage.in{opacity:1;transform:none}

/* ---------- design studio (elevation colors + AI render requests) ---------- */
.elevations{background:var(--sand);padding-bottom:5.5rem;transition:background .8s}
.elevations.night{background:#2C2823}
.elevations.night h2{color:var(--cream)}
.elevations.night .section-sub{color:var(--sand-deep)}
.elev-picked{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin:.9rem 0 1rem;min-height:1.1em}
.elev-card .rr-open{width:100%;text-align:center;font-size:.74rem;padding:.75rem 1rem}
.design-note{text-align:center;font-size:.8rem;font-weight:300;color:#8a8078;max-width:520px;margin:2.4rem auto 0;padding:0 2rem}
.elevations.night .design-note{color:var(--silver)}

.rr-modal{position:fixed;inset:0;background:rgba(22,20,17,.72);display:none;align-items:center;justify-content:center;z-index:210;padding:1.2rem}
.rr-modal.open{display:flex}
.rr-card{position:relative;width:min(430px,94vw);background:var(--cream);padding:2.1rem 2.2rem 1.8rem;border-top:3px solid var(--gold);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.rr-close{position:absolute;top:.6rem;right:.9rem;background:none;border:none;font-size:1.6rem;color:#8a8078;cursor:pointer}
.rr-close:hover{color:var(--burgundy)}
.rr-kicker{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.4rem}
.rr-card h3{font-family:var(--serif);font-weight:500;color:var(--burgundy);font-size:1.55rem;margin-bottom:.3rem}
.rr-summary{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#6b6259;margin-bottom:1.1rem}
.rr-card input,.rr-card textarea{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:#fff;border:1px solid rgba(91,84,75,.3);padding:.75rem .9rem;margin-bottom:.7rem;resize:vertical}
.rr-card input:focus,.rr-card textarea:focus{outline:none;border-color:var(--gold)}
.rr-send{width:100%;border:none;cursor:pointer}
.rr-note{text-align:center;font-size:.85rem;color:var(--gold-deep);min-height:1.2em;margin-top:.6rem}

/* ---------- closing CTA ---------- */
.bp-outro{background:linear-gradient(180deg,#332E28,var(--burgundy-deep));color:var(--cream);text-align:center;padding:6rem 2rem}
.bp-outro h2{color:var(--cream)}
.bp-outro p{font-weight:300;color:var(--sand-deep);max-width:560px;margin:1.2rem auto 2.2rem}
.bp-outro .hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .wt-stages::before,.wt-badge{display:none}
  .wt-stage{grid-template-columns:1fr;gap:1.6rem;padding:2.4rem 0;border-top:1px solid rgba(91,84,75,.14)}
  .wt-stage:first-child{border-top:none}
  .wt-stage:nth-child(even) .wt-media{order:0}
  .wt-stage .wt-copy{padding:0}
  .bp-hero{min-height:74vh}
  .bp-hero h1{font-size:clamp(1.9rem,8vw,3rem)}
  .bp-hero p{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .wt-reveal .wt-stage{opacity:1;transform:none;transition:none}
  .wt-photo img{transition:none}
}