/* ==========================================================================
   Horizon Tile Professional — Design System
   ========================================================================== */

:root{
  /* Color */
  --bg:#FAFAF8;
  --card:#FFFFFF;
  --ink:#111111;
  --ink-2:#666666;
  --walnut:#7B5A3A;
  --walnut-lt:#9A7550;
  --cta:#222222;
  --cta-hover:#000000;
  --success:#2E7D32;
  --line:#E7E7E7;
  --charcoal:#1A1A1A;

  /* Type */
  --serif:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Fluid scale */
  --fs-display:clamp(2.75rem,7.2vw,5.75rem);
  --fs-h2:clamp(2rem,4.2vw,3.5rem);
  --fs-h3:clamp(1.3rem,2vw,1.75rem);
  --fs-lead:clamp(1.03rem,1.35vw,1.2rem);
  --fs-body:1rem;
  --fs-micro:.72rem;

  /* Space — luxury sites breathe */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem; --s-6:4rem; --s-7:6rem; --s-8:8rem;
  --section:clamp(4.5rem,9vw,9rem);
  --gut:clamp(1.25rem,4vw,2.5rem);
  --maxw:1340px;
  --narrow:760px;

  /* Form */
  --r:12px; --r-sm:10px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(17,17,17,.04),0 2px 8px rgba(17,17,17,.04);
  --sh-2:0 2px 4px rgba(17,17,17,.03),0 12px 32px rgba(17,17,17,.07);
  --sh-3:0 4px 8px rgba(17,17,17,.04),0 24px 64px rgba(17,17,17,.10);

  --ease:cubic-bezier(.22,1,.36,1);
  --t:.5s var(--ease);
  --header-h:92px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 var(--fs-body)/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,svg,iframe{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--walnut);outline-offset:3px;border-radius:2px}
::selection{background:var(--walnut);color:#fff}

.skip{
  position:absolute;left:var(--s-2);top:-100px;z-index:200;
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;border-radius:var(--r-sm);
  font-size:.85rem;font-weight:600;transition:top .2s
}
.skip:focus{top:var(--s-2)}
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--section)}
.narrow{max-width:var(--narrow)}

/* ---------- Type utilities ---------- */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--walnut);margin:0 0 var(--s-3)
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--walnut);flex:none;opacity:.6
}
.eyebrow--center{justify-content:center}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.75;max-width:62ch}
.em{font-style:italic;color:var(--walnut)}
.section-head{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.section-head--center{text-align:center;margin-inline:auto;max-width:720px}
.section-head--center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  --bg-btn:var(--cta);--fg-btn:#fff;--bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.0625rem 2rem;border:1px solid var(--bd);border-radius:var(--r-sm);
  background:var(--bg-btn);color:var(--fg-btn);
  font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:.04em;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--cta-hover)}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.btn--ghost{--bg-btn:transparent;--fg-btn:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--fg-btn:#fff;border-color:var(--ink)}

.btn--onDark{--bg-btn:#fff;--fg-btn:var(--ink)}
.btn--onDark:hover{background:var(--walnut);--fg-btn:#fff}

.btn--outlineDark{--bg-btn:transparent;--fg-btn:#fff;--bd:rgba(255,255,255,.35)}
.btn--outlineDark:hover{--fg-btn:var(--ink);border-color:#fff}

.btn--lg{padding:1.1875rem 2.5rem}
.btn--block{width:100%}

.tel{white-space:nowrap}

/* Text link with rule */
.tlink{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;
  letter-spacing:.04em;padding-bottom:2px;background-image:linear-gradient(var(--walnut),var(--walnut));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease),color .3s
}
.tlink:hover{color:var(--walnut);background-size:100% 1px}
.tlink:hover .arw{transform:translateX(4px)}
.tlink .arw{transition:transform .35s var(--ease)}

/* ---------- SEO content pages ---------- */
.seo-header{background:var(--charcoal);color:#fff}
.seo-header__in{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.seo-header .brand{margin:0}.seo-header .brand img{height:52px}
.seo-header nav{display:flex;align-items:center;gap:1.25rem;font-size:.8125rem;font-weight:600;letter-spacing:.04em}
.seo-header nav>a:not(.btn){color:rgba(255,255,255,.84)}
.seo-header .btn{padding:.7rem 1rem;font-size:.75rem}
.seo-hero{background:var(--charcoal);color:#fff;padding:clamp(5rem,11vw,9rem) 0 clamp(4rem,8vw,6rem)}
.seo-hero__in{max-width:900px}.seo-hero .eyebrow{color:#d6b997}.seo-hero h1{font-size:var(--fs-display);max-width:13ch}
.seo-hero p:not(.eyebrow){max-width:62ch;margin:1.5rem 0 2rem;color:rgba(255,255,255,.78);font-size:var(--fs-lead)}
.seo-page__grid{display:grid;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.seo-copy{max-width:710px}.seo-copy h2,.seo-links h2{font-size:var(--fs-h2);margin-bottom:1.4rem}
.seo-copy p{color:var(--ink-2);margin-bottom:1.3rem}.seo-copy .tlink{color:var(--ink)}
.seo-checklist{display:grid;gap:.6rem;margin:1.75rem 0 2rem}.seo-checklist li{padding-left:1.5rem;position:relative}.seo-checklist li::before{content:"";width:.5rem;height:.5rem;border:1px solid var(--walnut);position:absolute;left:0;top:.6rem;transform:rotate(45deg)}
.seo-page__media{margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--line);box-shadow:var(--sh-2)}
.seo-page__media img{width:100%;aspect-ratio:3/4;object-fit:cover}
.seo-links{background:#f1f0ec}.seo-links__grid{display:grid;gap:2rem}.seo-links li{border-top:1px solid var(--line)}.seo-links li:last-child{border-bottom:1px solid var(--line)}
.seo-links li a{display:block;padding:.7rem 0;color:var(--ink-2);transition:color .2s}.seo-links li a:hover{color:var(--walnut)}
.seo-hub{display:flex;flex-wrap:wrap;gap:.65rem 1.25rem;align-items:baseline;margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.875rem}
.seo-hub span{font-weight:600;color:var(--ink-2)}.seo-hub a{color:var(--walnut);text-decoration:underline;text-underline-offset:3px}
@media (min-width:760px){.seo-page__grid{grid-template-columns:minmax(0,1.1fr) minmax(280px,.75fr)}.seo-links__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.seo-header__in{min-height:72px}.seo-header .brand img{height:42px}.seo-header nav>a:not(.btn){display:none}}

/* ---------- Brand mark motif (from logo geometry) ---------- */
.peak{width:22px;height:22px;flex:none;color:var(--walnut)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s,box-shadow .4s,backdrop-filter .4s
}
/* Scrim so white nav text stays legible over bright areas of the hero photo
   (the window is blown out). Fades away once the solid header takes over. */
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,17,.62),rgba(17,17,17,.28) 60%,rgba(17,17,17,0));
  transition:opacity .4s var(--ease)
}
.header.is-stuck::before{opacity:0}
.header__in{
  display:flex;align-items:center;gap:var(--s-4);
  height:var(--header-h);
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)
}
.header.is-stuck{
  background:rgba(250,250,248,.88);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);box-shadow:0 1px 24px rgba(17,17,17,.05)
}
.brand{display:flex;align-items:center;gap:.75rem;margin-right:auto}
/* One white wordmark asset; inverted to black wherever the backdrop behind the
   header is light. Cheaper than shipping two near-identical images. */
.brand img{width:auto;height:64px;transition:filter .4s var(--ease)}
@media (max-width:520px){.brand img{height:46px}}
.header.is-stuck .brand img,
body.nav-open .brand img{filter:invert(1)}

.nav{display:none}
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:2.25rem}
  .nav a{
    font-size:.8125rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.86);
    position:relative;padding-block:.4rem;transition:color .3s
  }
  .nav a::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;
    transition:width .4s var(--ease)
  }
  .nav a:hover::after,.nav a[aria-current=true]::after{width:100%}
  .header.is-stuck .nav a{color:var(--ink-2)}
  .header.is-stuck .nav a:hover{color:var(--ink)}
}
.header__cta{display:none}
@media (min-width:1024px){
  .header__cta{display:flex;align-items:center;gap:1.25rem}
  .header__tel{
    font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:#fff;
    display:inline-flex;align-items:center;gap:.5rem;transition:color .3s
  }
  .header.is-stuck .header__tel{color:var(--ink)}
  .header__cta .btn{padding:.8125rem 1.5rem;font-size:.8125rem}
  .header:not(.is-stuck) .header__cta .btn{
    background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff;
    backdrop-filter:blur(8px)
  }
  .header:not(.is-stuck) .header__cta .btn:hover{color:var(--ink)}
}

/* Burger */
.burger{
  display:grid;place-content:center;gap:6px;width:44px;height:44px;margin-right:-10px;margin-left:auto;
  border-radius:var(--r-sm)
}
@media (min-width:1024px){.burger{display:none}}
.burger span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .4s var(--ease),opacity .3s,background .4s}
.header.is-stuck .burger span{background:var(--ink)}
body.nav-open .burger span{background:var(--ink)}
body.nav-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0;transform:scaleX(.4)}
body.nav-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--bg);
  padding:calc(var(--header-h) + 2rem) var(--gut) 2rem;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s
}
body.nav-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.drawer nav a{
  padding:1.15rem 0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:1.6rem;
  display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(10px)
}
body.nav-open .drawer nav a{animation:drawerIn .55s var(--ease) forwards}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer__foot{margin-top:auto;padding-top:2rem;display:grid;gap:.75rem}
.drawer__tel{
  text-align:center;font-size:.8125rem;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase
}

/* ==========================================================================
   HERO — editorial split (respects tall, real jobsite photography)
   ========================================================================== */
.hero{position:relative;background:var(--charcoal);color:#fff;overflow:hidden}
.hero__grid{
  display:grid;gap:0;align-items:stretch;
  min-height:100svh;
  width:100%;max-width:var(--maxw);margin-inline:auto
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr}
}
.hero__copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:2.5rem var(--gut) 3.25rem;
  order:2
}
@media (max-width:899px){
  /* Keep the project photo present without pushing the message below it. */
  .hero__grid{min-height:auto}
  .hero__copy{
    order:1;padding-top:calc(var(--header-h) + 2rem);
    background:
      linear-gradient(90deg,rgba(26,26,26,.94),rgba(26,26,26,.72)),
      url("../img/hero.webp") center 42% / cover
  }
  .hero__media{display:none}
}
@media (min-width:900px){
  .hero__copy{order:1;padding-block:calc(var(--header-h) + 1rem) 3rem;padding-right:clamp(2rem,4vw,4.5rem)}
}
.hero__eyebrow{color:var(--walnut-lt)}
.hero__eyebrow::before{background:var(--walnut-lt)}
.hero h1{
  font-size:var(--fs-display);line-height:1.02;letter-spacing:-.025em;margin-bottom:var(--s-3)
}
.hero h1 .l2{display:block;font-style:italic;color:var(--walnut-lt)}
.hero__sub{
  font-size:var(--fs-lead);color:rgba(255,255,255,.72);line-height:1.75;
  max-width:46ch;margin-bottom:var(--s-4)
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.875rem;margin-bottom:var(--s-4)}
.hero__badges{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .875rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(255,255,255,.04)
}
.chip svg{width:13px;height:13px;color:var(--walnut-lt);flex:none}

/* Hero media */
.hero__media{position:relative;order:2;min-height:42svh;overflow:hidden}
@media (min-width:900px){.hero__media{order:2;min-height:100svh}}
.hero__media img{
  /* source is 0.74 aspect vs a ~0.84 box, so very little is cropped here */
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:scale(1.06);animation:kb 24s var(--ease) forwards
}
@media (max-width:899px){
  /* short, wide box on mobile — bias toward the tub and window */
  .hero__media img{object-position:50% 42%}
}
@keyframes kb{to{transform:scale(1)}}
.hero__media::after{ /* subtle blend into copy column */
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(26,26,26,.92) 0%,rgba(26,26,26,.28) 26%,rgba(26,26,26,0) 55%)
}
@media (max-width:899px){
  .hero__media::after{background:linear-gradient(180deg,rgba(26,26,26,.55),rgba(26,26,26,.15) 40%,var(--charcoal) 100%)}
}
/* Floating credential card */
.hero__card{
  position:absolute;z-index:3;left:var(--gut);bottom:var(--s-4);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);color:var(--ink);
  border-radius:var(--r-lg);padding:1.125rem 1.375rem;box-shadow:var(--sh-3);
  display:none;max-width:230px
}
@media (min-width:900px){.hero__card{display:block;left:auto;right:var(--gut);bottom:var(--s-5)}}
.hero__card b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--walnut)}
.hero__card span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

.scrollhint{
  position:absolute;left:50%;bottom:1.25rem;z-index:3;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);
  display:none;align-items:center;gap:.5rem
}
@media (min-width:900px){.scrollhint{display:flex}}
.scrollhint i{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.5),transparent);animation:hint 2.4s infinite}
@keyframes hint{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- Trust strip ---------- */
.trust{background:var(--card);border-block:1px solid var(--line)}
.trust__in{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line)
}
@media (min-width:768px){.trust__in{grid-template-columns:repeat(4,1fr)}}
.trust__item{
  background:var(--card);padding:1.75rem 1.25rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.4rem
}
.trust__item strong{
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase
}
.trust__item small{font-size:.75rem;color:var(--ink-2)}
/* The Yelp item is a link, so it has to re-create the flex column itself. */
.trust__link{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:inherit;text-decoration:none
}
.trust__link:hover strong{color:var(--walnut)}
.trust__link:hover small{text-decoration:underline;text-underline-offset:3px}
.stars{display:flex;gap:2px;color:var(--walnut)}
.stars svg{width:14px;height:14px}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc-grid{display:grid;border-top:1px solid var(--line)}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
.svc{
  padding:1.5rem 0;border-bottom:1px solid var(--line);
}
@media (min-width:640px){.svc:nth-child(odd){padding-right:2rem}.svc:nth-child(even){padding-left:2rem;border-left:1px solid var(--line)}}
.svc:nth-child(n+5){display:none}
.svc__mark,.svc__n{display:none}
.svc h3{font-size:1.35rem;margin-bottom:.35rem}
.svc p{color:var(--ink-2);font-size:.9375rem;line-height:1.7}
.svc__list{
  margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.4rem
}
.svc__list li{
  font-size:.76rem;color:var(--ink-2);padding-right:.5rem;border-right:1px solid var(--line)
}

/* ==========================================================================
   WHY — split
   ========================================================================== */
.why{background:var(--card);border-block:1px solid var(--line)}
.why__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media (min-width:900px){.why__grid{grid-template-columns:.9fr 1.1fr}}
.why__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.why__media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.why__media:hover img{transform:scale(1.05)}
.why__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);margin-top:2.25rem
}
.why__stat{background:var(--card);padding:1.25rem .5rem 0}
.why__stat b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums
}
/* direct child only — the counter lives in a <span> inside the <b> */
.why__stat > span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.why__points{display:grid;gap:1.5rem 2rem;margin-top:2rem}
@media (min-width:600px){.why__points{grid-template-columns:1fr 1fr}}
.why__point{display:flex;gap:.875rem}
.why__point svg{width:18px;height:18px;color:var(--walnut);flex:none;margin-top:.3rem}
.why__point h4{font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:0;margin-bottom:.15rem}
.why__point p{font-size:.875rem;color:var(--ink-2);line-height:1.65}

/* ==========================================================================
   PROJECTS — masonry
   ========================================================================== */
.filters{display:none}
body.show-all-projects .filters{display:flex}
.filter{
  padding:.55rem 1.125rem;border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  transition:all .3s var(--ease)
}
.filter:hover{border-color:var(--ink);color:var(--ink)}
.filter[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

.masonry{columns:1;column-gap:1.25rem}
@media (min-width:600px){.masonry{columns:2}}
@media (min-width:1024px){.masonry{columns:3;column-gap:1.5rem}}
.tile{
  break-inside:avoid;margin-bottom:1.25rem;
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  /* padding:0 — this is a <button>, and the UA's default 1px 6px would show
     the tile background as bars down either side of the photo */
  background:#EDEAE5;cursor:pointer;width:100%;text-align:left;display:block;padding:0;
  transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .5s var(--ease)
}
@media (min-width:1024px){.tile{margin-bottom:1.5rem}}
.tile img{width:100%;display:block;transition:transform 1.1s var(--ease)}
.tile:hover{box-shadow:var(--sh-3)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.055)}
.tile__ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.5rem;color:#fff;
  background:linear-gradient(0deg,rgba(17,17,17,.86) 0%,rgba(17,17,17,.35) 45%,rgba(17,17,17,0) 80%);
  opacity:0;transition:opacity .45s var(--ease)
}
.tile:hover .tile__ov,.tile:focus-visible .tile__ov{opacity:1}
.tile__ov span{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--walnut-lt);
  margin-bottom:.35rem
}
.tile__ov h3{font-size:1.25rem;margin-bottom:.65rem}
.tile__ov em{
  font-style:normal;font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:.4rem
}
.tile__ov > *{transform:translateY(10px);transition:transform .5s var(--ease)}
.tile:hover .tile__ov > *,.tile:focus-visible .tile__ov > *{transform:none}
.tile.is-hidden{display:none}
#gallery .tile:not(.tile--featured){display:none}
body.show-all-projects #gallery .tile:not(.tile--featured){display:block}
.gallery-more{margin-top:1rem;text-align:center}
body.show-all-projects .gallery-more{display:none}
.gallery-back{display:none;margin-top:1rem}
body.show-all-projects .gallery-back{display:block}

/* ==========================================================================
   SHOWCASE
   ========================================================================== */
.showcase{background:var(--charcoal);color:#fff;overflow:hidden}
.showcase .eyebrow{color:var(--walnut-lt)}
.showcase .eyebrow::before{background:var(--walnut-lt)}
.showcase__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (min-width:960px){
  .showcase__grid{grid-template-columns:1.15fr 1fr;align-items:start}
  .showcase__media{position:sticky;top:calc(var(--header-h) + 2rem)}
}
.showcase__media{border-radius:var(--r-lg);overflow:hidden;position:relative}
.showcase__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:960px){.showcase__media img{aspect-ratio:auto;max-height:78vh}}
.showcase h2{font-size:var(--fs-h2);margin-bottom:var(--s-3)}
.showcase p{color:rgba(255,255,255,.7);line-height:1.8}
.spec{border-top:1px solid rgba(255,255,255,.14);padding-top:1.25rem;margin-top:1.75rem}
.spec dt{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--walnut-lt);margin-bottom:.5rem
}
.spec dd{margin:0 0 1.25rem;font-size:.9375rem;color:rgba(255,255,255,.82);line-height:1.7}
.spec dd:last-child{margin-bottom:0}
.mats{display:flex;flex-wrap:wrap;gap:.4rem}
.mats li{
  font-size:.72rem;letter-spacing:.05em;padding:.3rem .7rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8)
}

/* Before / after slider */
.ba{margin-top:2rem}
.ba__frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;background:#000;touch-action:pan-y;user-select:none;cursor:ew-resize
}
.ba__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__tag{
  position:absolute;bottom:.75rem;z-index:3;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  background:rgba(17,17,17,.72);color:#fff;padding:.35rem .7rem;border-radius:6px;
  backdrop-filter:blur(6px);pointer-events:none
}
.ba__tag--l{left:.75rem}
.ba__tag--r{right:.75rem}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);z-index:4;width:2px;
  background:#fff;transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.18)
}
.ba__handle::after{
  content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.35)
}
.ba__handle::before{ /* double chevron, drawn as SVG so it stays crisp */
  content:"";position:absolute;top:50%;left:50%;z-index:1;
  width:20px;height:12px;transform:translate(-50%,-50%);
  background:no-repeat center/20px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 2.5 4 6l3.5 3.5M12.5 2.5 16 6l-3.5 3.5'/%3E%3C/svg%3E");
}
.ba__range{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize
}
.ba__range:focus-visible + .ba__handle::after{outline:3px solid var(--walnut);outline-offset:2px}
.ba__note{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:.75rem;text-align:center}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process{background:var(--card);border-block:1px solid var(--line)}
.steps{
  display:grid;gap:0;counter-reset:s;
  border-top:1px solid var(--line)
}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(5,1fr);border-top:0}
}
.step{
  position:relative;padding:2rem 0;border-bottom:1px solid var(--line)
}
@media (min-width:900px){
  .step{padding:2.75rem 1.5rem 0 0;border-bottom:0;border-top:1px solid var(--line)}
  .step::before{ /* progress node */
    content:"";position:absolute;left:0;top:-4.5px;width:8px;height:8px;border-radius:50%;
    background:var(--bg);border:1px solid var(--line);transition:background .4s,border-color .4s,transform .4s
  }
  .step:hover::before{background:var(--walnut);border-color:var(--walnut);transform:scale(1.4)}
}
.step__n{
  display:block;font-family:var(--serif);font-size:.9rem;letter-spacing:.1em;
  color:var(--walnut);margin-bottom:.875rem
}
.step h3{font-size:1.1875rem;margin-bottom:.5rem}
.step p{font-size:.875rem;color:var(--ink-2);line-height:1.7}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{background:var(--bg)}
.rv{position:relative;max-width:900px;margin-inline:auto;text-align:center}
.rv__quote{
  font-family:var(--serif);font-size:clamp(4rem,9vw,7rem);line-height:.7;color:var(--line);
  display:block;margin-bottom:.5rem;user-select:none
}
.rv__stage{position:relative;min-height:1px}
.rv__item{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .7s var(--ease),visibility .6s
}
.rv__item.is-on{position:relative;opacity:1;visibility:visible;transform:none}
.rv__item blockquote{margin:0}
.rv__item p{
  font-family:var(--serif);font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.45;
  color:var(--ink);margin-bottom:1.75rem;letter-spacing:-.01em
}
.rv__meta{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.rv__meta .stars{margin-bottom:.5rem}
.rv__meta cite{
  font-style:normal;font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:.02em
}
.rv__meta small{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.rv__meta em{font-style:normal;font-size:.8125rem;color:var(--walnut)}
.rv__nav{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:2.5rem}
.rv__arrow{
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--card);
  display:grid;place-content:center;transition:all .35s var(--ease)
}
.rv__arrow:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.06)}
.rv__arrow svg{width:15px;height:15px}
.rv__dots{display:flex;gap:.5rem}
.rv__dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:all .35s var(--ease)}
.rv__dot[aria-current=true]{background:var(--walnut);width:22px;border-radius:999px}
.rv__src{
  display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:2.25rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)
}

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */
.areas{background:var(--charcoal);color:#fff}
.areas .eyebrow{color:var(--walnut-lt)}
.areas .eyebrow::before{background:var(--walnut-lt)}
.areas__grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:960px){.areas__grid{grid-template-columns:1fr;align-items:center}}
.areas h2{font-size:var(--fs-h2);margin-bottom:var(--s-3)}
.areas__lead{color:rgba(255,255,255,.7);line-height:1.8;max-width:52ch}
.areas__list{max-width:62ch;margin-top:1rem;color:rgba(255,255,255,.7)}

/* Inline SVG map — no tiles, no API key, instant */
.map{display:none}
.map svg{width:100%;height:auto;display:block}
.map .m-land{fill:#1C1C1C}
.map .m-water{fill:#0C0F12}
.map .m-coast{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.5}
/* Ridge lines read as terrain without competing with the city markers */
.map .m-hill{fill:rgba(255,255,255,.035);stroke:none}
.map .m-leader{stroke:rgba(255,255,255,.22);stroke-width:.4}
.map .m-road{stroke:rgba(255,255,255,.14);stroke-width:.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.map .m-shield text{
  fill:rgba(255,255,255,.38);font-size:3.4px;font-family:var(--sans);font-weight:600;
  letter-spacing:.3px;text-anchor:middle
}
.map .m-geo{
  fill:rgba(255,255,255,.20);font-size:3.3px;font-family:var(--sans);font-weight:500;
  letter-spacing:.9px
}
.map .m-dot{fill:var(--walnut-lt);transition:r .35s var(--ease),fill .35s;cursor:pointer}
.map .m-ring{fill:none;stroke:var(--walnut-lt);stroke-width:1;opacity:0;transition:opacity .35s,r .45s var(--ease)}
.map g.is-on .m-dot,.map g:hover .m-dot{fill:#fff;r:4.6}
.map g.is-on .m-ring,.map g:hover .m-ring{opacity:.55;r:11}
.map .m-label{
  fill:rgba(255,255,255,.55);font-size:4.3px;font-family:var(--sans);font-weight:500;
  letter-spacing:.4px;transition:fill .3s;pointer-events:none
}
.map g.is-on .m-label,.map g:hover .m-label{fill:#fff}
.map__cap{
  position:absolute;left:0;right:0;bottom:0;padding:.75rem 1rem;
  background:linear-gradient(0deg,rgba(10,10,10,.9),transparent);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{background:var(--card);border-block:1px solid var(--line)}
.faq__grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.faq__grid{grid-template-columns:.8fr 1.2fr;align-items:start}}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  display:flex;align-items:flex-start;gap:1.25rem;justify-content:space-between;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(1.125rem,1.8vw,1.375rem);line-height:1.35;
  transition:color .3s
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--walnut)}
.acc__ic{position:relative;width:18px;height:18px;flex:none;margin-top:.35rem}
.acc__ic::before,.acc__ic::after{
  content:"";position:absolute;background:var(--walnut);transition:transform .4s var(--ease),opacity .3s
}
.acc__ic::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.acc__ic::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%)}
.acc details[open] .acc__ic::after{transform:translateX(-50%) rotate(90deg);opacity:0}
/* transition declared here, not inline — applying it in the same style flush as
   the height change makes Chrome skip the animation (and never fire
   transitionend, which would leave the panel locked at a stale pixel height) */
.acc__body{overflow:hidden;transition:height .45s var(--ease)}
.acc__body p{padding:0 3rem 0 0;color:var(--ink-2);line-height:1.8;font-size:.9375rem}
.acc__body p + p{margin-top:.9rem}
.acc__body p:last-child{padding-bottom:1.75rem}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{background:var(--bg)}
.contact__grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:960px){.contact__grid{grid-template-columns:1.15fr .85fr;align-items:start}}
.form-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.4vw,2.75rem);box-shadow:var(--sh-1)
}
/* Direct-contact card (static site — no form backend) */
.contact-card__h{font-family:var(--serif);font-size:clamp(1.5rem,3vw,1.95rem);line-height:1.2}
.contact-card__p{margin-top:.85rem;color:var(--ink-2);line-height:1.75}
.contact-card__acts{margin-top:1.75rem;display:grid;gap:.75rem}
.contact-card__acts .btn{gap:.55rem}
.contact-card__list{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line);display:grid;gap:.7rem}
.contact-card__list li{
  position:relative;padding-left:1.6rem;font-size:.9375rem;color:var(--ink-2);line-height:1.6
}
.contact-card__list li::before{
  content:"";position:absolute;left:.35rem;top:.55rem;width:6px;height:6px;
  border-radius:50%;background:var(--cta)
}

.fields{display:grid;gap:1.125rem}
@media (min-width:600px){.fields{grid-template-columns:1fr 1fr}}
.f-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)
}
.field label .req{color:var(--walnut)}
.field input,.field select,.field textarea{
  width:100%;padding:.875rem 1rem;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:.9375rem;
  transition:border-color .3s,background .3s,box-shadow .3s
}
.field textarea{resize:vertical;min-height:120px;line-height:1.65}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:11px;
  padding-right:2.5rem
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--walnut);background:var(--card);
  box-shadow:0 0 0 3px rgba(123,90,58,.1)
}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{
  border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.08)
}
.err{font-size:.75rem;color:#B3261E;min-height:0}
/* Upload */
.drop{
  grid-column:1/-1;position:relative;border:1px dashed var(--line);border-radius:var(--r-sm);
  padding:1.5rem;text-align:center;background:var(--bg);transition:border-color .3s,background .3s
}
.drop:hover,.drop.is-over{border-color:var(--walnut);background:#FDFBF9}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop svg{width:22px;height:22px;color:var(--walnut);margin:0 auto .5rem}
.drop b{display:block;font-size:.875rem;font-weight:600;margin-bottom:.2rem}
.drop small{font-size:.78rem;color:var(--ink-2)}
.drop__files{margin-top:.75rem;font-size:.8125rem;color:var(--success);font-weight:500}
.form-foot{margin-top:1.75rem;display:flex;flex-direction:column;gap:1rem}
.form-note{font-size:.78rem;color:var(--ink-2);line-height:1.6}
.form-status{
  display:none;align-items:flex-start;gap:.65rem;padding:1rem 1.125rem;border-radius:var(--r-sm);
  font-size:.875rem;line-height:1.6
}
.form-status.is-on{display:flex}
.form-status--ok{background:rgba(46,125,50,.07);color:var(--success);border:1px solid rgba(46,125,50,.2)}
.form-status--err{background:rgba(179,38,30,.06);color:#B3261E;border:1px solid rgba(179,38,30,.18)}
.form-status svg{width:17px;height:17px;flex:none;margin-top:.15rem}

/* Contact aside */
.info{display:grid;gap:1.75rem}
.info__row{display:flex;gap:1rem;padding-bottom:1.75rem;border-bottom:1px solid var(--line)}
.info__row:last-of-type{border-bottom:0;padding-bottom:0}
.info__row svg{width:19px;height:19px;color:var(--walnut);flex:none;margin-top:.3rem}
.info__row h3{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem}
.info__row a,.info__row p{font-family:var(--serif);font-size:1.375rem;line-height:1.3;color:var(--ink)}
.info__row a{transition:color .3s}
.info__row a:hover{color:var(--walnut)}
.info__row .small{font-family:var(--sans);font-size:.875rem;color:var(--ink-2);line-height:1.8}
.hours{display:grid;gap:.3rem;font-family:var(--sans);font-size:.875rem;color:var(--ink-2)}
.hours div{display:flex;justify-content:space-between;gap:1rem;max-width:280px}
.hours b{font-weight:500;color:var(--ink)}
/* Instagram / reviews placeholders */
.social{background:var(--card);border-top:1px solid var(--line)}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media (min-width:640px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.ig-grid{grid-template-columns:repeat(6,1fr)}}
.ig{
  position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:#EDEAE5;display:block
}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ig::after{
  content:"";position:absolute;inset:0;background:rgba(17,17,17,.35);opacity:0;transition:opacity .4s
}
.ig:hover img{transform:scale(1.08)}
.ig:hover::after{opacity:1}
.ig__ic{
  position:absolute;z-index:2;inset:0;display:grid;place-content:center;color:#fff;
  opacity:0;transition:opacity .4s
}
.ig__ic svg{width:22px;height:22px}
.ig:hover .ig__ic{opacity:1}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--charcoal);color:rgba(255,255,255,.6);padding-block:var(--s-7) var(--s-4)}
.footer__grid{display:grid;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media (min-width:768px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer__brand img{height:24px;width:auto;margin-bottom:1.25rem}
.footer__brand p{font-size:.875rem;line-height:1.8;max-width:34ch}
.footer h4{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:1.125rem
}
.footer__links{display:grid;gap:.6rem}
.footer__links a{font-size:.875rem;transition:color .3s,padding-left .3s}
.footer__links a:hover{color:#fff;padding-left:4px}
.footer__areas{font-size:.8125rem;line-height:1.9}
.footer__bottom{
  padding-top:1.75rem;display:flex;flex-direction:column;gap:1rem;
  align-items:center;text-align:center;font-size:.78rem
}
@media (min-width:768px){.footer__bottom{flex-direction:row;justify-content:space-between;text-align:left}}
.socials{display:flex;gap:.5rem}
.socials a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:50%;
  display:grid;place-content:center;transition:all .35s var(--ease)
}
.socials a:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}
.socials svg{width:16px;height:16px}
.footer__legal{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center}

/* ==========================================================================
   STICKY MOBILE BAR
   ========================================================================== */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:auto 1fr;gap:.625rem;
  padding:.625rem .75rem calc(.625rem + env(safe-area-inset-bottom));
  background:rgba(250,250,248,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .5s var(--ease)
}
.sticky-bar.is-on{transform:none}
@media (min-width:1024px){.sticky-bar{display:none}}
.sticky-bar .btn{padding:.9375rem 1rem;font-size:.8125rem}
.sticky-bar .btn--call{
  width:52px;padding:0;background:var(--card);border:1px solid var(--line);color:var(--ink)
}
.sticky-bar .btn--call svg{width:19px;height:19px}
body{padding-bottom:0}
@media (max-width:1023px){body.has-bar{padding-bottom:76px}}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:rgba(12,12,12,.94);backdrop-filter:blur(8px);
  padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s
}
.lb.is-on{opacity:1;visibility:visible}
/* .lb sets display:grid, which would otherwise beat the UA [hidden] rule */
.lb[hidden]{display:none}
.lb__fig{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;
  max-height:100%;padding-bottom:2.5rem /* clear the n/total counter */
}
.lb__fig img{
  max-height:78vh;max-width:100%;width:auto;border-radius:var(--r);object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  animation:lbIn .5s var(--ease)
}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}}
.lb__cap{text-align:center;color:#fff}
.lb__cap span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--walnut-lt);margin-bottom:.3rem}
.lb__cap h3{font-size:1.25rem}
.lb__cap small{font-size:.8125rem;color:rgba(255,255,255,.55)}
.lb__btn{
  position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  display:grid;place-content:center;transition:all .3s var(--ease)
}
.lb__btn:hover{background:#fff;color:var(--ink)}
/* display:grid above would otherwise beat the UA [hidden] rule — the arrows are
   hidden on single-photo projects */
.lb__btn[hidden]{display:none}
.lb__btn svg{width:16px;height:16px}
.lb__x{top:1.25rem;right:1.25rem}
.lb__prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb__next{right:1rem;top:50%;transform:translateY(-50%)}
.lb__n{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.14em;color:rgba(255,255,255,.5)
}
/* Thumbnail rail — only rendered for projects with more than one photo */
.lb__thumbs{
  position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.5rem;max-width:min(92vw,640px);
  overflow-x:auto;scrollbar-width:none;padding:.15rem
}
.lb__thumbs::-webkit-scrollbar{display:none}
.lb__thumbs[hidden]{display:none}
.lb__thumbs button{
  flex:0 0 auto;width:64px;height:48px;border-radius:var(--r-sm);overflow:hidden;padding:0;
  border:1px solid rgba(255,255,255,.2);opacity:.5;
  transition:opacity .3s var(--ease),border-color .3s var(--ease)
}
.lb__thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.lb__thumbs button:hover{opacity:.85}
.lb__thumbs button[aria-selected="true"]{opacity:1;border-color:#fff}
/* Make room for the rail when it is present */
.lb:has(#lb-thumbs:not([hidden])) .lb__n{bottom:5.1rem}
.lb:has(#lb-thumbs:not([hidden])) .lb__fig{padding-bottom:6.5rem}
.lb:has(#lb-thumbs:not([hidden])) .lb__fig img{max-height:64vh}

@media (max-width:600px){
  .lb__prev{left:.5rem}.lb__next{right:.5rem}
  .lb__btn{width:42px;height:42px}
  .lb__thumbs button{width:52px;height:40px}
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.rv-up{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rv-up.is-in{opacity:1;transform:none}
.rv-fade{opacity:0;transition:opacity .9s var(--ease)}
.rv-fade.is-in{opacity:1}
[data-stagger]>*{opacity:0;transform:translateY(24px)}
[data-stagger].is-in>*{
  animation:stag .8s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 90ms)
}
@keyframes stag{to{opacity:1;transform:none}}

/* Parallax layer */
[data-parallax]{will-change:transform}

/* ==========================================================================
   MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  .rv-up,.rv-fade,[data-stagger]>*{opacity:1!important;transform:none!important}
  .hero__media img{transform:none}
}
@media print{
  .header,.sticky-bar,.lb,.drawer,.scrollhint{display:none!important}
  body{background:#fff}
  .hero{min-height:auto;color:#000;background:#fff}
}