/*
 * ═══════════════════════════════════════════════════════════════
 *  J BUILD CO. — INDEX PAGE STYLES
 *  Page-specific CSS for index.html
 *  Depends on: jbc-design.css (load first)
 * ═══════════════════════════════════════════════════════════════
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --forest: #4E472B;
  --moss:   #635A35;
  --forest3:#3A3420;
  --gold:   #BA8A39;
  --gold2:  #D4A855;
  --gold3:  #9D7221;
  --ink:    #1E1C10;
  --paper:  #F5F0E6;
  --warm:   #EDE6D4;
  --stone:  #C8BFB0;
  --dust:   #7A7268;
  --rule:   rgba(78,71,43,.15);
  --white:  #FFFFFF;
  --cream:  #F5F0E6;
  --dark:   #1C1A0F;
}
html,body{height:100%;overflow:hidden}
body{font-family:'Instrument Sans',sans-serif;background:var(--ink);color:#FFFFFF}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.04;pointer-events:none;z-index:100}
.slides{position:fixed;inset:0}
.slides::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:1}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease}
.slide.on{opacity:1;animation:kb 22s ease-in-out forwards}
.slide:nth-child(1){background-image:url('../images/home-slider/home-slider-01.jpg');background-position:center center}
.slide:nth-child(2){background-image:url('../images/home-slider/home-slider-02.jpg');background-position:center center}
.slide:nth-child(3){background-image:url('../images/home-slider/home-slider-03.jpg');background-position:center top}
.slide:nth-child(4){background-image:url('../images/home-slider/home-slider-04.jpg');background-position:center center}
.slide:nth-child(5){background-image:url('../images/home-slider/home-slider-05.jpg');background-position:center center}
.slide:nth-child(6){background-image:url('../images/home-slider/home-slider-06.jpg');background-position:center center}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.overlay{position:fixed;inset:0;background:linear-gradient(to bottom,rgba(17,16,16,.32) 0%,rgba(17,16,16,.08) 40%,rgba(17,16,16,.48) 100%);z-index:10}
.center{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;text-decoration:none;animation:fadeIn 1.2s .3s ease both}
.logo-box{position:relative;width:108px;height:108px;background:rgba(255,255,255,.09);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;transition:background .45s,border-color .45s,transform .45s}
.logo-box::after{content:'';position:absolute;bottom:0;right:0;width:28px;height:28px;background:var(--gold);transition:width .4s,height .4s}
.logo-wrap:hover .logo-box{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.48);transform:scale(1.05)}
.logo-wrap:hover .logo-box::after{width:38px;height:38px}
.logo-j{font-family:'Cormorant Garamond',serif;font-size:58px;font-weight:400;color:var(--white);position:relative;z-index:1;line-height:1}
.brand-name{font-family:'Instrument Sans',sans-serif;font-size:14px;letter-spacing:.38em;text-transform:uppercase;font-weight:500;color:var(--white)}
.brand-sub{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:#FFFFFF;margin-top:5px}
.brand-tagline{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,2.6vw,34px);font-style:italic;font-weight:300;color:#FFFFFF;margin-top:10px}
.enter-hint{font-family:'Open Sans',sans-serif;font-size:14px;letter-spacing:.42em;text-transform:uppercase;color:#FFFFFF;margin-top:24px;display:flex;align-items:center;gap:14px;animation:pulse 2.5s ease-in-out infinite}
.enter-hint::before,.enter-hint::after{content:'';width:22px;height:1px;background:rgba(255,255,255,.4)}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.dots{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:10px;align-items:center}
.dot{width:26px;height:1.5px;background:rgba(255,255,255,.2);border:none;cursor:pointer;transition:all .4s;display:block}
.dot.on{background:var(--gold);width:40px} .dot{background:rgba(255,255,255,.2)}
.corner-tl{position:fixed;top:36px;left:48px;z-index:20;animation:fadeIn 1s .9s both}
.corner-tr{position:fixed;top:36px;right:48px;z-index:20;animation:fadeIn 1s .9s both;text-align:right}
.corner-bl{position:fixed;bottom:48px;left:48px;z-index:20;animation:fadeIn 1s 1.2s both}
.corner-br{position:fixed;bottom:48px;right:48px;z-index:20;animation:fadeIn 1s 1.2s both;text-align:right}
.clabel{font-family:'Open Sans',sans-serif;font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:#FFFFFF;line-height:2}
.clabel span{color:#FFFFFF}
.clabel span.gold-word,.gold-word{color:var(--gold)}
.vline{position:fixed;top:0;bottom:0;width:1px;background:rgba(255,255,255,.05);z-index:5}
.vl{left:80px}.vr{right:80px}
.counter{position:fixed;right:48px;top:50%;transform:translateY(-50%);z-index:20;text-align:right;animation:fadeIn 1s 1.4s both}
.counter-n{font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:300;color:#FFFFFF;line-height:1}
#curtain{position:fixed;inset:0;background:var(--forest);z-index:9000;transform:scaleY(0);transform-origin:bottom;transition:transform .85s cubic-bezier(.77,0,.18,1)}
#curtain.closing{transform:scaleY(1)}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){.corner-tl,.corner-tr,.corner-bl,.counter,.vline{display:none}.corner-br{bottom:90px;right:20px}}


/* === Page-specific overrides === */
.nl,.nlinks,.nav-links,nav ul,.nav-cta,.ncta{display:none !important}



.logo-img{height:44px !important;width:auto !important;object-fit:contain !important;display:block !important}
.logo{display:flex !important;align-items:center !important;height:100% !important}



.burger,.hbtn{display:flex !important;flex-direction:column;gap:5px;cursor:pointer;border:none;background:none;padding:6px;z-index:900}
.burger span,.hbtn span{width:24px;height:1.5px;background:#ffffff;display:block;transition:background .3s}
nav.solid .burger span,nav.solid .hbtn span{background:#BA8A39}



.draw,.drawer{
  position:fixed !important;
  top:0 !important;right:0 !important;bottom:0 !important;left:auto !important;
  width:300px !important;max-width:85vw !important;
  z-index:1500 !important;background:#F5F0E6 !important;
  transform:translateX(100%) !important;
  transition:transform .45s cubic-bezier(.77,0,.175,1) !important;
  display:flex !important;flex-direction:column !important;
  justify-content:center !important;padding:80px 44px !important;
  box-shadow:-8px 0 40px rgba(0,0,0,.18) !important;
  pointer-events:none !important;
  inset:auto !important;
}
.draw.open,.drawer.open{transform:translateX(0) !important;pointer-events:all !important}
.draw ul,.drawer ul{display:flex !important;flex-direction:column !important;list-style:none !important}
.draw li,.drawer li{border-bottom:1px solid rgba(78,71,43,.12) !important;display:block !important}
.draw a,.drawer a{
  display:block !important;padding:18px 0 !important;
  font-family:'Cormorant Garamond',serif !important;
  font-size:26px !important;font-weight:400 !important;
  color:#1E1C10 !important;text-decoration:none !important;
  transition:color .2s,padding-left .25s !important;
}
.draw a:hover,.drawer a:hover{color:#BA8A39 !important;padding-left:8px !important}
.dc,.d-close{
  position:absolute !important;top:20px !important;right:20px !important;
  background:none !important;border:1px solid rgba(78,71,43,.2) !important;
  width:36px !important;height:36px !important;cursor:pointer !important;
  font-size:14px !important;color:#7A7268 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  transition:all .25s !important;
}
.dc:hover,.d-close:hover{background:#1E1C10 !important;color:#fff !important}
.dsoc,.d-soc{display:flex !important;gap:14px !important;margin-top:28px !important;flex-wrap:wrap !important}
.dsoc a,.d-soc a{
  font-family:'DM Mono',monospace !important;font-size:9px !important;
  letter-spacing:.22em !important;text-transform:uppercase !important;
  color:#7A7268 !important;text-decoration:none !important;
}
.dsoc a:hover,.d-soc a:hover{color:#BA8A39 !important}
/* ── Per-slide background position overrides ── */
.slide:nth-child(1) { background-position: center 30%; } /* living room */
.slide:nth-child(2) { background-position: center center; } /* bathroom */
.slide:nth-child(3) { background-position: center 20%; } /* exterior wide */
.slide:nth-child(4) { background-position: center 40%; } /* kitchen */
.slide:nth-child(5) { background-position: center 30%; } /* exterior front */

.pop-bg{position:fixed;inset:0;background:rgba(17,16,16,.7);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;backdrop-filter:blur(8px)}
.pop-bg.open{opacity:1;pointer-events:all}
.pop-box{background:var(--paper);width:92%;max-width:520px;position:relative;max-height:92vh;overflow-y:auto}
.ph{background:var(--forest);padding:36px 44px 28px;position:relative}
.ph h3{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:400;color:#fff;margin-bottom:6px}
.ph p{letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.pc{position:absolute;top:20px;right:22px;background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.5);cursor:pointer;font-size:14px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.pc:hover{background:rgba(255,255,255,.1);color:#fff}
.pb{padding:36px 44px 40px}
.pf{margin-bottom:20px}
.pf label{display:block;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--dust);margin-bottom:8px}
.pf input,.pf textarea{width:100%;padding:11px 14px;border:1px solid var(--stone);background:transparent;font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:300;color:var(--ink);outline:none;transition:border-color .25s}
.pf input:focus,.pf textarea:focus{border-color:var(--forest)}
.pf textarea{height:72px;resize:none}
.pchks{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pchks label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dust);font-weight:300;cursor:pointer}
.pchks input{width:13px;height:13px;accent-color:var(--forest)}
.pdisc{letter-spacing:.1em;color:var(--stone);line-height:1.7;margin-top:14px}
.btn-f{background:var(--forest);color:#fff;font-family:'Instrument Sans',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:14px 32px;border:none;cursor:pointer;text-decoration:none;display:inline-block;transition:background .25s}
.btn-f:hover{background:var(--moss)}