/* ============== BuildXpress Depot ============== */
:root{
  --ink:#15161a;
  --ink-soft:#23242b;
  --cream:#f6f3ee;
  --cream-2:#efe9e0;
  --brass:#c8a063;
  --brass-deep:#a9824a;
  --muted:#8c8a83;
  --line:rgba(20,20,20,.12);
  --maxw:1200px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.2px}
em{font-style:italic;color:var(--brass-deep)}

/* fixed brick canvas + film grain */
#brickCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}

/* sections sit above the canvas; opaque ones cover it */
.hero,.marquee,.about,.services,.band,.work,.why,.financing,.estimate,.footer,.nav{position:relative;z-index:2}
.about,.services,.work,.why{background:var(--cream)}
.marquee{background:var(--ink)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(18px,4vw,54px);transition:.4s ease;z-index:50}
.nav__logo{height:70px;width:auto;transition:.3s;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.nav.scrolled .nav__logo{height:48px;filter:none}
.nav__logo--dark{display:none}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.nav__links a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#f6f3ee;opacity:.85;transition:.2s}
.nav__links a:hover{opacity:1;color:var(--brass)}
.nav__cta{border:1px solid rgba(246,243,238,.4);padding:10px 18px;border-radius:2px}
.nav__cta:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)!important;opacity:1!important}
.nav.scrolled{background:rgba(246,243,238,.96);backdrop-filter:blur(10px);padding:14px clamp(18px,4vw,54px);box-shadow:0 1px 0 var(--line)}
.nav.scrolled .nav__logo--light{display:none}
.nav.scrolled .nav__logo--dark{display:block}
.nav.scrolled .nav__links a{color:var(--ink)}
.nav.scrolled .nav__cta{border-color:var(--ink);background:var(--ink);color:var(--cream)!important}
.nav.scrolled .nav__cta:hover{background:var(--brass);border-color:var(--brass)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__burger span{width:26px;height:2px;background:#f6f3ee;transition:.3s}
.nav.scrolled .nav__burger span{background:var(--ink)}

.mobile-menu{position:fixed;inset:0;z-index:49;background:var(--ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;transform:translateY(-100%);transition:.5s cubic-bezier(.7,0,.2,1)}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{color:var(--cream);font-family:var(--serif);font-size:30px}
.mobile-menu__cta{color:var(--brass)!important}
.mobile-menu__phone{font-family:var(--sans)!important;font-size:16px!important;letter-spacing:.1em;opacity:.7}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:120px clamp(18px,6vw,90px) 90px;color:var(--cream);overflow:hidden}
.hero__photo{position:absolute;inset:0;background-image:url('assets/portfolio/tbd-083.jpg');
  background-size:cover;background-position:center;opacity:.22;filter:saturate(.9) contrast(1.05);
  transform:scale(1.08);will-change:transform}
.hero__veil{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 100%, rgba(200,160,99,.20), transparent 55%),
  linear-gradient(180deg, rgba(13,14,17,.78) 0%, rgba(13,14,17,.55) 45%, rgba(13,14,17,.86) 100%)}
.hero__inner{position:relative;max-width:var(--maxw);width:100%;margin:0 auto}
.hero__eyebrow{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);margin-bottom:26px}
.hero__title{font-size:clamp(48px,9vw,128px);line-height:.96;letter-spacing:-1px}
.hero__title span{display:block;overflow:hidden}
.hero__title-em{font-style:italic;font-weight:400;color:var(--brass)}
.hero__sub{max-width:560px;margin:30px 0 40px;font-size:clamp(15px,1.4vw,19px);line-height:1.7;
  color:rgba(246,243,238,.82);font-weight:300}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap}
.hero__scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(246,243,238,.6)}
.hero__scroll-line{width:1px;height:54px;background:linear-gradient(var(--brass),transparent);animation:drop 2.4s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:17px 34px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:.25s}
.btn--solid{background:var(--brass);color:var(--ink)}
.btn--solid:hover{background:var(--cream);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(246,243,238,.45);color:var(--cream)}
.btn--ghost:hover{background:rgba(246,243,238,.1);border-color:var(--cream)}
.btn--block{width:100%}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden;padding:22px 0;border-top:1px solid rgba(246,243,238,.08);
  border-bottom:1px solid rgba(246,243,238,.08)}
.marquee__track{display:flex;align-items:center;gap:34px;white-space:nowrap;width:max-content;
  animation:scroll 38s linear infinite}
.marquee__track span{font-family:var(--serif);font-size:24px;color:rgba(246,243,238,.85)}
.marquee__track i{color:var(--brass);font-style:normal;font-size:12px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- shared section bits ---------- */
.kicker{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:18px;font-weight:600}
.kicker--light{color:var(--brass)}
.section-head{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vw,140px) clamp(18px,6vw,90px) 50px;text-align:center}
.section-head h2{font-size:clamp(32px,5vw,62px)}
.section-head__sub{margin-top:18px;color:var(--muted);font-weight:300}
[data-reveal]{opacity:0;transform:translateY(34px);transition:1s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vw,140px) clamp(18px,6vw,90px)}
.about__media{position:relative}
.about__media img{width:100%;height:560px;object-fit:cover;border-radius:3px}
.about__badge{position:absolute;bottom:-26px;left:-26px;background:var(--ink);color:var(--cream);
  padding:24px 28px;max-width:240px;border-radius:3px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.about__badge strong{font-family:var(--serif);font-size:34px;color:var(--brass);display:block;margin-bottom:6px}
.about__badge span{font-size:13px;line-height:1.5;color:rgba(246,243,238,.7)}
.about__body h2{font-size:clamp(30px,4.4vw,54px);margin-bottom:26px}
.about__body p{color:#4a4a46;line-height:1.85;margin-bottom:20px;font-weight:300;font-size:16px}
.about__body strong{font-weight:600;color:var(--ink)}
.about__stats{display:flex;gap:36px;margin-top:36px;flex-wrap:wrap}
.about__stats div{display:flex;flex-direction:column}
.about__stats strong{font-family:var(--serif);font-size:40px;color:var(--brass-deep)}
.about__stats span{font-size:13px;color:var(--muted);letter-spacing:.05em}

/* ---------- SERVICES ---------- */
.services__grid{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,6vw,90px) clamp(70px,11vw,140px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{position:relative;height:380px;border-radius:3px;overflow:hidden;cursor:default;isolation:isolate}
.svc__img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,14,17,.05),rgba(13,14,17,.82))}
.svc:hover .svc__img{transform:scale(1.09)}
.svc__txt{position:absolute;left:0;bottom:0;padding:30px;color:var(--cream);z-index:2}
.svc__txt h3{font-size:27px;margin-bottom:8px}
.svc__txt p{font-size:14px;line-height:1.6;color:rgba(246,243,238,.78);font-weight:300;
  max-height:0;opacity:0;overflow:hidden;transition:.6s}
.svc:hover .svc__txt p{max-height:120px;opacity:1}
.svc__img--brand{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(90% 90% at 50% 20%,#262730,#15161a)}
.svc__img--brand img{width:62%;max-width:280px;opacity:.5;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.svc--brand:hover .svc__img--brand img{opacity:.7;transition:.6s}

/* ---------- BUILD BAND (transparent: brick canvas shows here) ---------- */
.band{padding:clamp(90px,16vw,200px) clamp(18px,6vw,90px);color:var(--cream);text-align:center}
.band__inner{max-width:980px;margin:0 auto}
.band__title{font-size:clamp(30px,5vw,60px);margin:6px auto 60px;max-width:760px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:left}
.steps li{background:rgba(20,21,26,.55);backdrop-filter:blur(4px);border:1px solid rgba(200,160,99,.22);
  padding:26px 22px;border-radius:3px}
.steps span{font-family:var(--serif);font-size:30px;color:var(--brass)}
.steps h3{font-size:19px;margin:14px 0 10px}
.steps p{font-size:13.5px;line-height:1.65;color:rgba(246,243,238,.72);font-weight:300}

/* ---------- WORK / GALLERY ---------- */
.work__cats{max-width:1320px;margin:0 auto;padding:0 clamp(18px,4vw,54px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.catcard{position:relative;height:300px;border:0;padding:0;border-radius:3px;overflow:hidden;
  cursor:pointer;text-align:left;background:var(--ink);isolation:isolate;display:block;width:100%}
.catcard__img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);display:block}
.catcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,14,17,.04) 30%,rgba(13,14,17,.88));z-index:1}
.catcard:hover .catcard__img{transform:scale(1.08)}
.catcard__body{position:absolute;left:0;right:0;bottom:0;padding:24px 26px;z-index:2;display:block}
.catcard__body strong{display:block;font-family:var(--serif);font-weight:500;font-size:27px;
  color:var(--cream);margin-bottom:6px}
.catcard__body em{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.work__filters{max-width:1320px;margin:44px auto 0;padding:0 clamp(18px,4vw,54px);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;
  padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;
  color:var(--ink);cursor:pointer;transition:.25s}
.chip span{color:var(--muted);font-weight:400;margin-left:4px}
.chip:hover{border-color:var(--brass-deep);color:var(--brass-deep)}
.chip--on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip--on span{color:var(--brass)}
.gallery__tag{position:absolute;left:10px;bottom:10px;background:rgba(13,14,17,.72);
  color:var(--cream);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:2px;pointer-events:none}
.gallery{max-width:1320px;margin:40px auto 0;padding:0 clamp(18px,4vw,54px) clamp(70px,11vw,140px);
  columns:4;column-gap:14px}
.gallery figure{break-inside:avoid;margin:0 0 14px;overflow:hidden;border-radius:3px;cursor:pointer;position:relative}
.gallery img{width:100%;transition:transform .9s cubic-bezier(.16,1,.3,1);opacity:0}
.gallery img.loaded{opacity:1}
.gallery figure:hover img{transform:scale(1.06)}

/* ---------- WHY ---------- */
.why__grid{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,6vw,90px) clamp(70px,11vw,140px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.why__card{background:var(--cream);padding:44px 36px;transition:.4s}
.why__card:hover{background:#fff;transform:translateY(-4px)}
.why__card h3{font-size:24px;margin-bottom:14px;color:var(--ink)}
.why__card p{color:#5a5a55;line-height:1.7;font-weight:300;font-size:15px}

/* ---------- FINANCING ---------- */
.financing{position:relative;z-index:2;padding:clamp(90px,14vw,180px) clamp(18px,6vw,90px);
  color:var(--cream);text-align:center}
.financing__inner{max-width:900px;margin:0 auto}
.financing h2{font-size:clamp(34px,5.4vw,64px);margin:6px 0 24px}
.financing h2 em{color:var(--brass)}
.financing__lead{font-size:clamp(16px,1.6vw,19px);line-height:1.75;font-weight:300;
  color:rgba(246,243,238,.85);max-width:640px;margin:0 auto 46px}
.financing__lead strong{color:var(--brass);font-weight:600}
.financing__points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:44px;text-align:left}
.financing__points div{background:rgba(20,21,26,.55);backdrop-filter:blur(4px);
  border:1px solid rgba(200,160,99,.22);padding:26px 24px;border-radius:3px}
.financing__points strong{display:block;font-family:var(--serif);font-weight:500;font-size:21px;
  color:var(--brass);margin-bottom:10px}
.financing__points span{font-size:14px;line-height:1.7;color:rgba(246,243,238,.78);font-weight:300}
.financing__fine{margin-top:22px;font-size:12px;color:rgba(246,243,238,.45);letter-spacing:.04em}

/* ---------- ESTIMATE ---------- */
.estimate{padding:clamp(80px,13vw,170px) clamp(18px,6vw,90px);color:var(--cream)}
.estimate__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px)}
.estimate__left h2{font-size:clamp(34px,5vw,60px);margin-bottom:22px}
.estimate__left p{color:rgba(246,243,238,.75);line-height:1.8;font-weight:300;max-width:420px}
.estimate__contact{list-style:none;margin-top:40px;display:flex;flex-direction:column;gap:18px}
.estimate__contact li{display:flex;gap:18px;align-items:baseline;border-bottom:1px solid rgba(246,243,238,.12);padding-bottom:16px}
.estimate__contact span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);width:64px;flex:none}
.estimate__contact a,.estimate__contact strong{font-size:17px;font-weight:400;color:var(--cream)}
.estimate__contact a:hover{color:var(--brass)}
.estimate__form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,243,238,.65)}
.field input,.field select,.field textarea{background:rgba(246,243,238,.05);border:1px solid rgba(246,243,238,.18);
  color:var(--cream);padding:15px 16px;border-radius:2px;font-family:var(--sans);font-size:15px;transition:.25s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);background:rgba(246,243,238,.08)}
.field select option{background:var(--ink)}
.estimate__form .btn{grid-column:1/-1}
.estimate__note{grid-column:1/-1;font-size:13px;color:var(--brass);min-height:18px;text-align:center}

/* ---------- FOOTER ---------- */
.footer{padding:clamp(60px,9vw,110px) clamp(18px,6vw,90px) 50px;text-align:center;color:var(--cream)}
.footer__logo{height:54px;width:auto;margin:0 auto 22px;opacity:.95}
.footer__tag{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--brass);margin-bottom:34px}
.footer__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;font-size:14px;
  color:rgba(246,243,238,.72);margin-bottom:30px}
.footer__row a:hover{color:var(--brass)}
.footer__legal{font-size:12.5px;color:rgba(246,243,238,.4);letter-spacing:.04em}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,11,14,.96);
  display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:90vw;max-height:86vh;object-fit:contain;border-radius:2px;
  box-shadow:0 40px 90px rgba(0,0,0,.6)}
.lightbox__close{position:absolute;top:22px;right:30px;font-size:42px;line-height:1;color:#fff;
  background:none;border:0;cursor:pointer;opacity:.7;transition:.2s}
.lightbox__close:hover{opacity:1}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);font-size:48px;color:#fff;
  background:none;border:0;cursor:pointer;opacity:.55;padding:20px;transition:.2s}
.lightbox__nav:hover{opacity:1}
.lightbox__prev{left:14px}.lightbox__next{right:14px}
.lightbox__count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:13px;letter-spacing:.2em;color:rgba(255,255,255,.6)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .about{grid-template-columns:1fr}
  .about__media img{height:420px}
  .about__badge{left:0}
  .services__grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .financing__points{grid-template-columns:1fr}
  .work__cats{grid-template-columns:1fr 1fr}
  .why__grid{grid-template-columns:1fr 1fr}
  .gallery{columns:2}
  .estimate__inner{grid-template-columns:1fr}
}
@media(max-width:600px){
  .nav__logo{height:54px}
  .nav.scrolled .nav__logo{height:42px}
  .services__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .work__cats{grid-template-columns:1fr}
  .catcard{height:240px}
  .why__grid{grid-template-columns:1fr}
  .gallery{columns:1}
  .estimate__form{grid-template-columns:1fr}
  .about__stats{gap:24px}
  .hero{padding-top:140px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}