/* ============================================================
   LVN DRYWALL INC — "The Finish Index"
   Palette: plaster off-white, deep navy, brand green.
   Type: Fraunces + Inter.
   ============================================================ */

:root{
  --plaster: #ECEBE4;
  --paper:   #F6F4EE;
  --ink:     #0C1B2E;   /* deep navy — dark sections */
  --ink-2:   #12253C;
  --steel:   #7C828A;   /* muted grey text */
  --green:   #279B54;   /* brand green accent */
  --green-lt:#4FB877;   /* on-dark green */
  --green-dk:#0C6138;   /* legible green on light */

  --line:    rgba(12,27,46,.14);
  --line-lt: rgba(236,235,228,.16);

  --ff-disp: "Fraunces", Georgia, serif;
  --ff-body: "Inter", system-ui, -apple-system, sans-serif;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1500px;
  --ease: cubic-bezier(.5,.05,.1,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--ff-body);
  background:var(--plaster);
  color:var(--ink);
  line-height:1.6;
  font-size:clamp(15px,1.05vw,17px);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }

::selection{ background:var(--green); color:#fff; }

/* ---------- Shared type ---------- */
.label{
  font-family:var(--ff-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--green-dk);
  display:flex;
  align-items:center;
  gap:.55em;
}
.label b{
  font-weight:700;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}
.label--light{ color:rgba(236,235,228,.72); }
.label--light b{ color:var(--green-lt); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.01em;
  padding:1.05em 1.7em;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--bd);
  border-radius:2px;
  cursor:pointer;
  transition:transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
  overflow:hidden;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(12,27,46,.55); background:var(--green-dk); border-color:var(--green-dk); color:#fff; }
.btn:active{ transform:translateY(-1px); }
.btn--sm{ padding:.7em 1.15em; font-size:.82rem; }
.btn--lg{ padding:1.2em 2.2em; font-size:1rem; }
.btn--block{ width:100%; }
.btn--light{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn--ghost-light{ --bg:transparent; --fg:var(--paper); --bd:rgba(236,235,228,.42); }
.btn--ghost-light:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:2000;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
  transition:opacity .7s ease, visibility .7s ease;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader__mark{ display:flex; gap:6px; align-items:flex-end; height:46px; }
.loader__line{
  width:7px; height:8px; background:var(--green-lt);
  border-radius:1px;
  animation:plank 1.15s var(--ease) infinite;
  animation-delay:calc(var(--i) * .11s);
}
@keyframes plank{
  0%,100%{ height:8px; opacity:.35; }
  45%{ height:44px; opacity:1; }
}
.loader__word{
  font-family:var(--ff-disp);
  font-weight:500;
  color:var(--paper);
  letter-spacing:.02em;
  font-size:1.1rem;
  opacity:.85;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:1.15rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.nav.scrolled{
  background:rgba(236,235,228,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}

/* Brand with drywall-seam motif */
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand__grain{
  display:flex; flex-direction:column; gap:2.5px;
  width:24px;
}
.brand__grain i{
  display:block; height:2.5px; border-radius:2px;
  background:var(--green);
}
.brand__grain i:nth-child(1){ width:100%; }
.brand__grain i:nth-child(2){ width:70%; background:var(--ink); }
.brand__grain i:nth-child(3){ width:88%; }
.brand__grain i:nth-child(4){ width:55%; background:var(--ink); }
.brand__text{
  font-family:var(--ff-disp); font-weight:600; font-size:1.18rem;
  letter-spacing:-.01em; color:var(--ink);
}
.brand__text em{ font-style:italic; font-weight:400; color:var(--green-dk); }
.nav.on-dark .brand__text{ color:var(--paper); }
.nav.on-dark .brand__text em{ color:var(--green-lt); }
.nav.on-dark .brand__grain i:nth-child(2),
.nav.on-dark .brand__grain i:nth-child(4){ background:var(--paper); }

.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  font-size:.86rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink); position:relative; padding:.2em 0;
  transition:color .3s;
}
.nav.on-dark .nav__links a{ color:rgba(236,235,228,.82); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--green); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--green-dk); }
.nav.on-dark .nav__links a:hover{ color:var(--green-lt); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:1.15rem; }
.nav__phone{
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  font-size:.86rem; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--ink); transition:color .3s;
}
.nav.on-dark .nav__phone{ color:var(--paper); }
.nav__phone-dot{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(39,155,84,.5);
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(39,155,84,.5); }
  70%,100%{ box-shadow:0 0 0 7px rgba(39,155,84,0); }
}
.nav__phone:hover{ color:var(--green-dk); }

.nav__burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav__burger span{
  width:24px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .3s;
}
.nav.on-dark .nav__burger span{ background:var(--paper); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:999;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  gap:.4rem; padding:2rem var(--pad);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  visibility:hidden;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; }
.mobile-menu a{
  font-family:var(--ff-disp); font-size:2rem; font-weight:500;
  color:var(--paper); padding:.35rem 0; border-bottom:1px solid var(--line-lt);
}
.mobile-menu a:last-of-type{ border:none; }
.mobile-menu__phone{ color:var(--green-lt) !important; }
.mobile-menu .btn{ margin-top:1.5rem; font-family:var(--ff-body); font-size:1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(2.5rem,7vh,5rem);
  overflow:hidden;
  color:var(--paper);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
#hero-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,27,46,.58) 0%, rgba(12,27,46,.2) 32%, rgba(12,27,46,.42) 62%, rgba(12,27,46,.94) 100%),
    linear-gradient(95deg, rgba(12,27,46,.6) 0%, rgba(12,27,46,0) 55%);
}
.hero__frame{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto; }

.hero__eyebrow{
  display:flex; align-items:center; gap:1rem;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(236,235,228,.82);
  margin-bottom:1.6rem;
}
.hero__eyebrow-rule{ width:56px; height:1px; background:rgba(236,235,228,.45); }

.hero__title{
   
  font-family:var(--ff-disp);
  font-weight:400;
  font-size:clamp(2.9rem, 6.5vw, 8rem);
  line-height:.98;
  letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.hero__title em{ font-style:italic; font-weight:400; color:var(--green-lt); }

.hero__lede{
  max-width:44ch; margin:1.7rem 0 2.2rem;
  font-size:clamp(1rem,1.35vw,1.2rem);
  color:rgba(236,235,228,.92);
  line-height:1.55;
}
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }

/* Ticker */
.hero__ticker{
  position:relative; z-index:2;
  max-width:var(--maxw); width:100%; margin:2.6rem auto 0;
  border-top:1px solid rgba(236,235,228,.22);
  border-bottom:1px solid rgba(236,235,228,.22);
  overflow:hidden;
  padding:.85rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.hero__ticker-track{
  display:flex; align-items:center; gap:1.4rem; width:max-content;
  animation:ticker 36s linear infinite;
  font-family:var(--ff-disp); font-style:italic; font-size:1.05rem;
  color:rgba(236,235,228,.85);
  white-space:nowrap;
}
.hero__ticker-track i{ color:var(--green-lt); font-style:normal; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(2.5rem,7vh,5rem); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(236,235,228,.8);
}
.hero__scroll-line{ width:1px; height:44px; background:rgba(236,235,228,.5); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; top:-44px; left:0; width:100%; height:44px;
  background:var(--green-lt); animation:scrolldrop 2s var(--ease) infinite;
}
@keyframes scrolldrop{ to{ top:44px; } }

/* ============================================================
   INTRO / ABOUT
   ============================================================ */
.intro{ padding:clamp(4.5rem,11vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.intro__grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,6vw,7rem);
  align-items:start;
  padding-bottom:clamp(3rem,7vh,6rem);
}
.intro__left{ position:sticky; top:120px; }
.intro__head{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2rem,4vw,3.4rem); line-height:1.03; letter-spacing:-.02em;
  margin-top:1.4rem;
}
.intro__right{ font-size:1.05rem; color:#3a4149; }
.intro__lead{
  font-family:var(--ff-disp); font-size:clamp(1.3rem,2vw,1.75rem);
  line-height:1.35; color:var(--ink); font-weight:400; margin-bottom:1.4rem;
  letter-spacing:-.01em;
}
.intro__right p + p{ margin-top:1rem; }

.intro__stats{
  display:flex; gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:2.6rem; padding-top:2.2rem; border-top:1px solid var(--line);
}
.stat{ display:flex; flex-direction:column; gap:.4rem; }
.stat__num{
  font-family:var(--ff-disp); font-weight:500; font-size:clamp(2.4rem,4vw,3.2rem);
  line-height:1; color:var(--green-dk); letter-spacing:-.02em;
}
.stat__lbl{ font-size:.78rem; color:var(--steel); letter-spacing:.02em; line-height:1.35; text-transform:uppercase; font-weight:600; }

.intro__band{
  display:grid; grid-template-columns:1fr 1.15fr; gap:0;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
}
.intro__figure{ overflow:hidden; background:var(--ink-2); }
.intro__figure img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; min-height:420px; transition:transform 1.2s var(--ease); }
.intro__band:hover .intro__figure img{ transform:scale(1.04); }
.intro__quote{
  background:var(--ink); color:var(--paper);
  padding:clamp(2rem,4vw,3.5rem);
  display:flex; flex-direction:column; justify-content:center; gap:1.1rem;
}
.intro__owner-badge{
  align-self:flex-start;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--green-lt);
  padding:.42em .9em; border-radius:2px;
}
.intro__quote p{
  font-family:var(--ff-disp); font-size:clamp(1.4rem,2.2vw,2rem);
  line-height:1.25; font-weight:400; font-style:italic;
}
.intro__quote-by{ font-size:.82rem; letter-spacing:.04em; color:var(--green-lt); font-weight:600; }

/* ============================================================
   FINISH INDEX (SERVICES)
   ============================================================ */
.index{
  background:var(--ink); color:var(--paper);
  padding:clamp(4.5rem,11vh,9rem) var(--pad);
  position:relative;
}
.index__head{ max-width:var(--maxw); margin:0 auto; }
.index__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.6rem,6.5vw,6rem); line-height:.98; letter-spacing:-.025em;
  margin:1.4rem 0 1.2rem;
}
.index__sub{ max-width:46ch; color:rgba(236,235,228,.7); font-size:1.05rem; }

.index__body{
  max-width:var(--maxw); margin:clamp(2.5rem,5vh,4rem) auto 0;
  display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(2rem,5vw,5rem);
  align-items:start;
}

/* Sticky sample viewer */
.index__viewer{ position:sticky; top:110px; }
.index__viewer-inner{
  position:relative; aspect-ratio:4/5; border-radius:3px; overflow:hidden;
  border:1px solid var(--line-lt);
  background:var(--ink-2);
}
.sample{ position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease); }
.sample img{ width:100%; height:100%; object-fit:cover; }
.sample.is-active{ opacity:1; }
.sample::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(12,27,46,.62));
}
.index__viewer-tag{
  position:absolute; left:1.3rem; bottom:1.3rem; z-index:3;
  font-family:var(--ff-disp); font-style:italic; font-size:1.15rem;
  color:var(--paper); letter-spacing:.01em;
  background:rgba(12,27,46,.5); backdrop-filter:blur(4px);
  padding:.4em .9em; border-radius:2px; border:1px solid var(--line-lt);
}

/* Interactive list */
.index__list{ display:flex; flex-direction:column; }
.row{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.7rem 0; border-top:1px solid var(--line-lt);
  cursor:pointer; position:relative;
  transition:padding-left .45s var(--ease);
}
.row:last-child{ border-bottom:1px solid var(--line-lt); }
.row__no{
  font-family:var(--ff-disp); font-size:1rem; font-weight:500;
  color:var(--steel); font-variant-numeric:tabular-nums; padding-top:.4rem;
  transition:color .4s;
}
.row__name{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:1.02; letter-spacing:-.02em;
  color:rgba(236,235,228,.6); transition:color .4s var(--ease); margin-bottom:0;
}
.row__desc{
  max-width:52ch; color:rgba(236,235,228,.6); font-size:.96rem; margin-top:.7rem;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .4s var(--ease), margin-top .4s;
}
.row__spec{
  display:inline-block; margin-top:.9rem;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-lt);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .4s var(--ease), margin-top .4s;
}
.row__thumb{ display:none; }

.row.is-active{ padding-left:1.1rem; }
.row.is-active::before{
  content:""; position:absolute; left:0; top:1.9rem; bottom:1.9rem; width:3px;
  background:var(--green); border-radius:3px;
}
.row.is-active .row__no{ color:var(--green-lt); }
.row.is-active .row__name{ color:var(--paper); }
.row.is-active .row__desc{ max-height:130px; opacity:1; margin-top:.85rem; }
.row.is-active .row__spec{ max-height:30px; opacity:1; margin-top:.9rem; }
@media(hover:hover){
  .row:hover .row__name{ color:rgba(236,235,228,.9); }
}

/* ============================================================
   VIDEO REEL BAND
   ============================================================ */
.reel{
  position:relative; min-height:78vh;
  display:flex; align-items:flex-end;
  padding:clamp(3rem,8vh,6rem) var(--pad);
  overflow:hidden; color:var(--paper);
}
.reel__media{ position:absolute; inset:0; z-index:0; }
#reel-video{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.reel__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,27,46,.42),rgba(12,27,46,.32) 40%,rgba(12,27,46,.92));
}
.reel__content{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto; }
.reel__head{
  font-family:var(--ff-disp); font-weight:500; font-style:italic;
  font-size:clamp(2rem,4.6vw,4.2rem); line-height:1.05; letter-spacing:-.02em;
  max-width:22ch; margin:1.3rem 0 1.1rem;
}
.reel__text{ max-width:50ch; font-size:1.08rem; color:rgba(236,235,228,.88); }

/* ============================================================
   FREE ESTIMATE
   ============================================================ */
.estimate{ padding:clamp(4.5rem,11vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.estimate__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.estimate__head{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.2rem,4.4vw,3.8rem); line-height:1.02; letter-spacing:-.02em;
  margin:1.3rem 0 1.4rem;
}
.estimate__lead{
  font-family:var(--ff-disp); font-size:clamp(1.15rem,1.7vw,1.45rem);
  line-height:1.4; color:var(--ink); font-weight:400; margin-bottom:1.1rem;
}
.estimate__copy > p:not(.estimate__lead):not(.label){ color:#3a4149; }
.estimate__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

.estimate__steps{ display:flex; flex-direction:column; gap:0; }
.estep{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start;
  padding:1.6rem 0; border-top:1px solid var(--line);
}
.estep:last-child{ border-bottom:1px solid var(--line); }
.estep__no{
  font-family:var(--ff-disp); font-style:italic; font-size:1.6rem;
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid var(--green); color:var(--green-dk);
  display:grid; place-items:center; flex-shrink:0;
}
.estep h4{ font-family:var(--ff-disp); font-weight:600; font-size:1.25rem; margin-bottom:.25rem; }
.estep p{ color:var(--steel); font-size:.95rem; }

/* ============================================================
   WHY CHOOSE
   ============================================================ */
.why{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.why__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(2rem,6vw,6rem); align-items:center;
  padding:clamp(4rem,9vh,7rem) var(--pad);
}
.why__figure{ position:relative; border-radius:3px; overflow:hidden; }
.why__figure img{ width:100%; height:100%; object-fit:cover; min-height:420px; transition:transform 1.2s var(--ease); }
.why__figure:hover img{ transform:scale(1.05); }
.why__figure figcaption{
  position:absolute; left:1.2rem; bottom:1.2rem;
  background:rgba(12,27,46,.66); backdrop-filter:blur(4px); color:var(--paper);
  padding:.5em 1em; border-radius:2px; font-size:.78rem; letter-spacing:.03em;
}
.why__head{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2rem,4vw,3.2rem); line-height:1.03; letter-spacing:-.02em;
  margin:1.3rem 0 2rem;
}
.why__list{ display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem; }
.why__list li{
  display:flex; align-items:baseline; gap:.9rem;
  padding:1rem 0; border-top:1px solid var(--line);
  font-size:1rem; font-weight:500;
}
.why__list li span{
  font-family:var(--ff-disp); font-size:.85rem; color:var(--green-dk);
  font-variant-numeric:tabular-nums; font-weight:600;
}

/* ============================================================
   THE WORK / GALLERY
   ============================================================ */
.work{ padding:clamp(4.5rem,11vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.work__head{ max-width:60ch; margin-bottom:clamp(2.5rem,5vh,3.5rem); }
.work__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.4rem,5vw,4.4rem); line-height:.99; letter-spacing:-.025em;
  margin:1.3rem 0 1.1rem;
}
.work__sub{ color:var(--steel); font-size:1.05rem; max-width:48ch; }

.work__gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
  gap:1rem;
}
.tile{ position:relative; overflow:hidden; border-radius:3px; grid-row:span 1; background:var(--ink-2); }
.tile--tall{ grid-row:span 2; }
.tile--wide{ grid-column:span 2; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.tile:hover img{ transform:scale(1.06); }
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem 1.1rem .95rem;
  background:linear-gradient(180deg,transparent,rgba(12,27,46,.86));
  color:var(--paper); font-size:.78rem; letter-spacing:.04em; font-weight:500;
  transform:translateY(8px); opacity:0; transition:transform .45s var(--ease), opacity .45s;
}
.tile:hover figcaption{ transform:translateY(0); opacity:1; }

/* ============================================================
   SERVICE AREAS
   ============================================================ */
.areas{
  background:var(--ink); color:var(--paper);
  padding:clamp(4.5rem,11vh,9rem) var(--pad);
}
.areas__head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vh,3.5rem); }
.areas__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.4rem,5vw,4.2rem); line-height:1; letter-spacing:-.02em;
  margin:1.3rem 0 1.1rem;
}
.areas__sub{ color:rgba(236,235,228,.7); max-width:46ch; font-size:1.05rem; }
.areas__list{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-lt); border:1px solid var(--line-lt); border-radius:3px; overflow:hidden;
}
.area{
  background:var(--ink); padding:1.8rem 1.6rem;
  display:flex; flex-direction:column; gap:.55rem;
  transition:background .4s var(--ease);
  min-height:190px;
}
.area:hover{ background:var(--ink-2); }
.area__pin{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--steel); align-self:flex-start;
}
.area--home .area__pin{ color:var(--green-lt); }
.area h3{ font-family:var(--ff-disp); font-weight:500; font-size:1.5rem; letter-spacing:-.01em; }
.area--home h3{ color:var(--green-lt); }
.area p{ color:rgba(236,235,228,.6); font-size:.9rem; line-height:1.5; }
.area--cta{ justify-content:center; align-items:flex-start; gap:.8rem; background:var(--green); }
.area--cta:hover{ background:var(--green-dk); }
.area--cta p{ color:#fff; font-family:var(--ff-disp); font-size:1.35rem; font-weight:500; }
.area--cta a{ font-weight:700; letter-spacing:.02em; color:#fff; font-size:.95rem; }
.area--cta a:hover{ text-decoration:underline; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:clamp(4.5rem,11vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.faq__head{ margin-bottom:clamp(2rem,4vh,3rem); }
.faq__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1.02; letter-spacing:-.02em;
  margin-top:1.2rem;
}
.faq__list{ max-width:920px; }
.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa__q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.6rem 0;
  font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--ink); letter-spacing:-.01em;
  transition:color .3s;
}
.qa__q:hover{ color:var(--green-dk); }
.qa__ico{ position:relative; width:18px; height:18px; flex-shrink:0; }
.qa__ico::before,.qa__ico::after{
  content:""; position:absolute; background:var(--green); border-radius:2px;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.qa__ico::before{ width:18px; height:2px; }
.qa__ico::after{ width:2px; height:18px; transition:transform .4s var(--ease); }
.qa__q[aria-expanded="true"] .qa__ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.qa__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.qa__a p{ padding:0 3rem 1.7rem 0; color:#3a4149; max-width:70ch; font-size:1.02rem; }

/* ============================================================
   CONTACT / FINAL CTA
   ============================================================ */
.contact{
  background:
    linear-gradient(180deg, rgba(12,27,46,.86), rgba(12,27,46,.93)),
    url("../assets/8.jpg") center/cover no-repeat fixed;
  color:var(--paper);
  padding:clamp(4.5rem,11vh,9rem) var(--pad);
}
.contact__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.contact__head{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.6rem,5.5vw,5rem); line-height:.98; letter-spacing:-.025em;
  margin:1.3rem 0 1.4rem;
}
.contact__text{ max-width:46ch; color:rgba(236,235,228,.84); font-size:1.08rem; margin-bottom:2.2rem; }

.contact__card{
  background:var(--paper); color:var(--ink);
  border-radius:4px; padding:clamp(1.6rem,3vw,2.6rem);
}
.cline{
  display:grid; grid-template-columns:88px 1fr; gap:1rem; align-items:baseline;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
}
.cline:first-child{ padding-top:0; }
.cline__k{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); font-weight:700; }
.cline__v{ font-size:1.05rem; font-weight:500; line-height:1.4; }
a.cline__v{ transition:color .3s; }
a.cline__v:hover{ color:var(--green-dk); }
.contact__socials{ display:flex; gap:1.4rem; padding-top:1.4rem; flex-wrap:wrap; }
.contact__socials a{ font-weight:600; font-size:.9rem; color:var(--green-dk); transition:color .3s; }
.contact__socials a:hover{ color:var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--paper); padding:clamp(3rem,7vh,5rem) var(--pad) 2rem; }
.foot__top{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding-bottom:2.5rem; border-bottom:1px solid var(--line-lt);
}
.foot__logo{
  height:74px; width:auto; border-radius:6px; display:block;
  border:1px solid var(--line-lt);
}
.foot__tag{ font-family:var(--ff-disp); font-style:italic; font-size:1.15rem; color:rgba(236,235,228,.72); }

.foot__cols{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  padding:3rem 0;
}
.foot__col{ display:flex; flex-direction:column; gap:.7rem; }
.foot__col h5{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green-lt); margin-bottom:.5rem; font-weight:700;
}
.foot__col a, .foot__col span{ color:rgba(236,235,228,.7); font-size:.92rem; transition:color .3s; }
.foot__col a:hover{ color:var(--paper); }
.foot__base{
  max-width:var(--maxw); margin:0 auto; padding-top:2rem; border-top:1px solid var(--line-lt);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; color:rgba(236,235,228,.5); letter-spacing:.02em;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__actions .btn--sm{ display:none; }
  .intro__grid{ grid-template-columns:1fr; }
  .intro__left{ position:static; }
  .index__body{ grid-template-columns:1fr; }
  .index__viewer{ display:none; }
  .row__thumb{
    display:block; grid-column:1/-1; margin-top:1rem;
    border-radius:3px; overflow:hidden; max-height:0; opacity:0;
    transition:max-height .5s var(--ease), opacity .4s, margin-top .4s;
  }
  .row.is-active .row__thumb{ max-height:340px; opacity:1; }
  .row__thumb img{ width:100%; height:260px; object-fit:cover; }
  .estimate__grid{ grid-template-columns:1fr; }
  .why__grid{ grid-template-columns:1fr; }
  .why__figure img{ min-height:340px; }
  .contact__inner{ grid-template-columns:1fr; }
  .areas__list{ grid-template-columns:repeat(2,1fr); }
  .work__gallery{ grid-template-columns:repeat(2,1fr); }
  .tile--wide{ grid-column:span 2; }
}

@media(max-width:640px){
  .nav__phone{ display:none; }
  .hero{ padding-bottom:5.5rem; }
  .hero__eyebrow{ flex-wrap:wrap; gap:.6rem; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1; }
  .hero__scroll{ display:none; }
  .intro__band{ grid-template-columns:1fr; }
  .intro__stats{ flex-wrap:wrap; gap:1.6rem; }
  .reel{ min-height:70vh; }
  .why__list{ grid-template-columns:1fr; }
  .areas__list{ grid-template-columns:1fr; }
  .work__gallery{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .tile--wide{ grid-column:span 1; }
  .tile--tall{ grid-row:span 1; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .foot__base{ flex-direction:column; gap:.4rem; }
  .cline{ grid-template-columns:1fr; gap:.3rem; }
  .contact{ background-attachment:scroll; }
}

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.ghero{
  position:relative; background:var(--ink); color:var(--paper);
  padding:calc(clamp(4.5rem,11vh,9rem) + 60px) var(--pad) clamp(3rem,7vh,5rem);
  overflow:hidden;
}
.ghero::after{
  content:""; position:absolute; right:-8%; top:-40%;
  width:60%; height:180%; border-radius:50%;
  background:radial-gradient(circle, rgba(39,155,84,.16), transparent 62%);
  pointer-events:none;
}
.ghero__inner{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
.ghero__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.8rem,7vw,6rem); line-height:.98; letter-spacing:-.025em;
  margin:1.3rem 0 1.2rem;
}
.ghero__title em{ font-style:italic; font-weight:400; color:var(--green-lt); }
.ghero__sub{ max-width:52ch; color:rgba(236,235,228,.72); font-size:1.08rem; }
.ghero__meta{
  display:flex; gap:clamp(1.5rem,4vw,3.5rem); margin-top:2.4rem;
  padding-top:2rem; border-top:1px solid var(--line-lt); flex-wrap:wrap;
}
.ghero__meta .stat__num{ color:var(--green-lt); }
.ghero__meta .stat__lbl{ color:rgba(236,235,228,.6); }

/* Breadcrumb */
.crumb{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(236,235,228,.55); font-weight:600; }
.crumb a{ color:var(--green-lt); }
.crumb a:hover{ text-decoration:underline; }

/* ---------- Before / After ---------- */
.ba{ padding:clamp(4rem,9vh,7rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.ba__head{ max-width:60ch; margin-bottom:clamp(2rem,4vh,3rem); }
.ba__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.2rem,4.6vw,3.8rem); line-height:1; letter-spacing:-.02em;
  margin:1.2rem 0 1rem;
}
.ba__sub{ color:var(--steel); font-size:1.05rem; max-width:52ch; }
.ba__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,3vw,2.2rem);
}
.ba-card{ display:flex; flex-direction:column; gap:1rem; }
.ba-card__meta{ display:flex; align-items:baseline; gap:.8rem; }
.ba-card__no{
  font-family:var(--ff-disp); color:var(--green-dk); font-weight:600;
  font-variant-numeric:tabular-nums; font-size:.9rem;
}
.ba-card__label{ font-family:var(--ff-disp); font-size:1.3rem; font-weight:500; letter-spacing:-.01em; }

.ba-slider{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border-radius:4px; border:1px solid var(--line);
  cursor:ew-resize; user-select:none; background:var(--ink-2);
  touch-action:pan-y;
  --pos:50%;
}
.ba-slider img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
}
.ba-slider__before{ z-index:2; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-slider__tag{
  position:absolute; z-index:4; top:1rem;
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.42em .8em; border-radius:2px; color:#fff;
}
.ba-slider__tag--before{ left:1rem; background:rgba(12,27,46,.82); }
.ba-slider__tag--after{ right:1rem; background:var(--green); }
.ba-slider__handle{
  position:absolute; z-index:5; top:0; bottom:0; left:var(--pos);
  width:2px; background:var(--paper); transform:translateX(-1px);
  pointer-events:none;
}
.ba-slider__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--paper); color:var(--ink);
  display:grid; place-items:center;
  box-shadow:0 6px 20px -6px rgba(12,27,46,.6);
}
.ba-slider__grip::before,.ba-slider__grip::after{
  content:""; width:0; height:0; border-block:5px solid transparent; position:absolute;
}
.ba-slider__grip::before{ border-right:7px solid var(--ink); left:11px; }
.ba-slider__grip::after{ border-left:7px solid var(--ink); right:11px; }
.ba-slider:focus-visible{ outline:2px solid var(--green-lt); outline-offset:3px; }

/* ---------- Filterable gallery ---------- */
.gallery{ padding:clamp(3rem,6vh,5rem) var(--pad) clamp(4.5rem,10vh,8rem); max-width:var(--maxw); margin:0 auto; }
.gallery__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
.gallery__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2rem,4vw,3.2rem); line-height:1; letter-spacing:-.02em; margin-top:1rem;
}
.gfilter{ display:flex; gap:.6rem; flex-wrap:wrap; }
.gfilter__btn{
  font-family:var(--ff-body); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  padding:.6em 1.15em; border-radius:100px; cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--line);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.gfilter__btn:hover{ border-color:var(--green); color:var(--green-dk); }
.gfilter__btn.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.gfilter__btn span{ opacity:.55; font-variant-numeric:tabular-nums; margin-left:.35em; }

.gmasonry{ columns:4 240px; column-gap:1rem; }
.g-item{
  display:block; width:100%; margin:0 0 1rem; padding:0; border:none; cursor:pointer;
  position:relative; overflow:hidden; border-radius:3px; background:var(--ink-2);
  break-inside:avoid; -webkit-column-break-inside:avoid;
  line-height:0;
}
.g-item img{ width:100%; height:auto; display:block; transition:transform 1s var(--ease); }
.g-item:hover img{ transform:scale(1.05); }
.g-item__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:.5rem;
  padding:1.5rem .9rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(12,27,46,.86));
  color:var(--paper); font-size:.74rem; letter-spacing:.03em; font-weight:500; line-height:1.3;
  transform:translateY(6px); opacity:0; transition:transform .4s var(--ease), opacity .4s;
}
.g-item:hover .g-item__cap, .g-item:focus-visible .g-item__cap{ transform:translateY(0); opacity:1; }
.g-item__cap b{ color:var(--green-lt); font-weight:700; }
.g-item__zoom{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(12,27,46,.55); backdrop-filter:blur(3px);
  display:grid; place-items:center; opacity:0; transform:scale(.8);
  transition:opacity .35s, transform .35s var(--ease);
}
.g-item:hover .g-item__zoom{ opacity:1; transform:scale(1); }
.g-item__zoom::before{ content:""; width:11px; height:11px; border:2px solid var(--paper); border-radius:50%; }
.g-item__zoom::after{ content:""; position:absolute; width:2px; height:7px; background:var(--paper); right:8px; bottom:7px; transform:rotate(-45deg); border-radius:2px; }
.g-item.is-hidden{ display:none; }
.g-item:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* ---------- Lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:3000; display:none;
  background:rgba(8,16,28,.94); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
}
.lb.open{ display:flex; }
.lb__stage{ position:relative; max-width:min(94vw,1150px); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.lb__img{
  max-width:100%; max-height:80vh; width:auto; height:auto; display:block;
  border-radius:3px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  background:var(--ink-2);
}
.lb__cap{ color:rgba(236,235,228,.82); font-size:.9rem; letter-spacing:.02em; text-align:center; display:flex; align-items:center; gap:.6rem; }
.lb__cap b{ color:var(--green-lt); font-weight:700; }
.lb__count{ font-variant-numeric:tabular-nums; color:rgba(236,235,228,.5); }
.lb__close{
  position:absolute; top:-3.2rem; right:0; z-index:5;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(236,235,228,.1); border:1px solid rgba(236,235,228,.25);
  transition:background .3s, transform .3s;
}
.lb__close:hover{ background:var(--green); transform:rotate(90deg); }
.lb__close::before,.lb__close::after{
  content:""; position:absolute; top:50%; left:50%; width:16px; height:2px;
  background:var(--paper); border-radius:2px;
}
.lb__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.lb__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.lb__nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(236,235,228,.1); border:1px solid rgba(236,235,228,.25);
  transition:background .3s, border-color .3s;
}
.lb__nav:hover{ background:var(--green); border-color:var(--green); }
.lb__nav::before{ content:""; position:absolute; top:50%; left:50%; width:12px; height:12px; border-top:2px solid var(--paper); border-left:2px solid var(--paper); }
.lb__prev{ left:clamp(.6rem,3vw,2rem); }
.lb__prev::before{ transform:translate(-40%,-50%) rotate(-45deg); }
.lb__next{ right:clamp(.6rem,3vw,2rem); }
.lb__next::before{ transform:translate(-60%,-50%) rotate(135deg); }

/* ---------- Gallery CTA band ---------- */
.cta{ background:var(--green-dk); color:#fff; }
.cta__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,8vh,6rem) var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta__head{ font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.02; letter-spacing:-.02em; max-width:20ch; }
.cta__head em{ font-style:italic; color:#CDE7D7; }
.cta .btn--light{ --bg:#fff; --fg:var(--green-dk); --bd:#fff; }
.cta .btn--light:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

@media(max-width:1080px){
  .gmasonry{ columns:3 200px; }
}
@media(max-width:820px){
  .ba__grid{ grid-template-columns:1fr; }
  .gmasonry{ columns:2 160px; }
  .gallery__head{ align-items:flex-start; }
}
@media(max-width:520px){
  .lb__close{ top:-3rem; right:0; }
  .lb__nav{ width:44px; height:44px; }
}