/* ==========================================================================
   NEW HORIZON ROOFING & EXTERIORS
   styles.css — one stylesheet for all six pages. No build step.

   01  Tokens            08  Page hero        15  Reviews
   02  Reset & base      09  Marquee          16  FAQ
   03  Layout            10  Cards / services 17  CTA band
   04  Buttons & bits    11  Feature bands    18  Contact & form
   05  Header & nav      12  Stats            19  Footer & call bar
   06  Scroll progress   13  Gallery          20  Animation
   07  Home hero         14  Video / finishes 21  Responsive
   ========================================================================== */


/* 01 ── TOKENS ──────────────────────────────────────────────────────────────
   Change these six and the whole site follows.
   -------------------------------------------------------------------------- */
:root{
  --brand:       #FF5A4E;   /* coral — buttons, accents, energy   */
  --brand-deep:  #E8412F;   /* pressed / hover coral              */
  --aqua:        #17C8B4;   /* bright aqua — highlights, ticks    */
  --ink:         #05262C;   /* deep ocean — dark sections         */
  --paper:       #F4F8F8;   /* cool off-white — light background  */
  --wrap:        1280px;    /* max content width                  */

  /* Derived */
  --ink-2:  #073540;
  --ink-3:  #0D4A57;
  --ink-4:  #14606F;
  --paper-2:#E7F0F0;
  --paper-3:#D6E5E5;

  --text:        #07222A;
  --text-soft:   #4A6B72;
  --text-faint:  #7A949A;
  --on-dark:     rgba(255,255,255,.80);
  --on-dark-dim: rgba(255,255,255,.56);

  --line:      #D9E6E6;
  --line-dark: rgba(255,255,255,.13);

  --f-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --gap:   26px;
  --sec-y: clamp(68px, 8.5vw, 128px);
  --r:     14px;
  --r-lg:  24px;
  --r-xl:  32px;

  --sh-sm: 0 2px 10px rgba(5,38,44,.07);
  --sh:    0 20px 46px -24px rgba(5,38,44,.42);
  --sh-lg: 0 44px 90px -42px rgba(5,38,44,.62);
  --sh-coral: 0 16px 36px -16px rgba(255,90,78,.62);

  --ease:  cubic-bezier(.22,.72,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --head-h: 76px;
}


/* 02 ── RESET & BASE ────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%;
  overflow-x:hidden; overflow-x:clip;
}
body{
  margin:0; font-family:var(--f-body); font-size:17px; line-height:1.65;
  color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--f-display); line-height:1.06; letter-spacing:-.025em;
  margin:0 0 .5em; font-weight:800;
}
h1{ font-size:clamp(2.5rem, 5.8vw, 4.4rem); }
h2{ font-size:clamp(1.95rem, 3.5vw, 3rem); }
h3{ font-size:1.16rem; font-weight:700; letter-spacing:-.015em; }
h4{ font-size:.95rem; font-weight:700; }
p{ margin:0 0 1em; }

.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--brand); color:#fff; padding:12px 20px; font-weight:700; }
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--brand); color:#fff; }

.ic{ width:1.05em; height:1.05em; fill:currentColor; flex:none; }


/* 03 ── LAYOUT ──────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:24px; }
.wrap--narrow{ max-width:900px; }
.section{ padding-block:var(--sec-y); }
.section--tint{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:#fff; }
.section--dark p{ color:var(--on-dark); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }

.grid{ display:grid; gap:var(--gap); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--auto{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }


/* 04 ── EYEBROW · HEADINGS · BUTTONS · BITS ─────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 16px;
  font-family:var(--f-display); font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand);
}
.eyebrow::before{ content:''; width:26px; height:3px; border-radius:2px; background:var(--brand); flex:none; }
.section--dark .eyebrow, .hero .eyebrow{ color:var(--aqua); }
.section--dark .eyebrow::before, .hero .eyebrow::before{ background:var(--aqua); }

.sechead{ max-width:720px; margin:0 auto clamp(42px,5vw,66px); text-align:center; }
.sechead--left{ margin-inline:0; text-align:left; }
.sechead h2{ text-wrap:balance; }
.sechead__sub{ margin:0; color:var(--text-soft); font-size:1.05rem; }
.section--dark .sechead__sub{ color:var(--on-dark); }

.btn{
  --bg:transparent; --fg:var(--text); --bd:currentColor;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:100px; border:2px solid var(--bd);
  background:var(--bg); color:var(--fg);
  font-family:var(--f-display); font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .28s var(--ease), background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn--solid{ --bg:var(--brand); --fg:#fff; --bd:var(--brand); box-shadow:var(--sh-coral); }
.btn--solid:hover{ --bg:var(--brand-deep); --bd:var(--brand-deep); }
.btn--aqua{ --bg:var(--aqua); --fg:#03282A; --bd:var(--aqua); box-shadow:0 16px 36px -16px rgba(23,200,180,.6); }
.btn--aqua:hover{ --bg:#12B3A1; --bd:#12B3A1; }
.btn--ghost{ --fg:#fff; --bd:rgba(255,255,255,.34); background:rgba(255,255,255,.07); backdrop-filter:blur(6px); }
.btn--ghost:hover{ --bd:#fff; background:rgba(255,255,255,.16); }
.btn--dark{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }
.btn--dark:hover{ --bg:var(--ink-3); --bd:var(--ink-3); }
.btn--line{ --fg:var(--text); --bd:var(--line); background:#fff; }
.btn--line:hover{ --bd:var(--brand); --fg:var(--brand); }
.btn--text{ border-color:transparent; padding-inline:4px; color:var(--brand); }
.btn--text:hover{ color:var(--brand-deep); gap:14px; }
.btn--lg{ padding:17px 32px; font-size:1rem; }
.btn--sm{ padding:10px 20px; font-size:.86rem; border-width:2px; }
.btn--block{ width:100%; }

.stars{ color:#FFB020; letter-spacing:3px; font-size:.95rem; line-height:1; }

.pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px;
  font-family:var(--f-display); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,90,78,.12); color:var(--brand-deep);
}
.pill--aqua{ background:rgba(23,200,180,.16); color:#0A8377; }
.pill--dark{ background:rgba(255,255,255,.1); color:#fff; }

.ticks li{ position:relative; padding-left:36px; margin-bottom:14px; color:var(--text-soft); }
.ticks li strong{ color:var(--text); font-weight:700; }
.ticks li::before{
  content:''; position:absolute; left:0; top:.34em; width:21px; height:21px; border-radius:7px;
  background:var(--aqua); opacity:.18;
}
.ticks li::after{
  content:''; position:absolute; left:6px; top:.68em; width:9px; height:5px;
  border-left:2.4px solid var(--aqua); border-bottom:2.4px solid var(--aqua);
  transform:rotate(-45deg);
}
.section--dark .ticks li, .feature--dark .ticks li{ color:var(--on-dark); }
.section--dark .ticks li strong, .feature--dark .ticks li strong{ color:#fff; }
.ticks--sm li{ margin-bottom:9px; font-size:.95rem; }

.media{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--ink-2); }
.media img{ width:100%; height:100%; object-fit:cover; }
.media--4x3{ aspect-ratio:4/3; }
.media--1x1{ aspect-ratio:1/1; }
.media--4x5{ aspect-ratio:4/5; }
.media--16x9{ aspect-ratio:16/9; }
.media--3x2{ aspect-ratio:3/2; }
.zoom img{ transition:transform .9s var(--ease-out); }
.zoom:hover img{ transform:scale(1.07); }


/* 05 ── HEADER & NAV ────────────────────────────────────────────────────── */
.topbar{ background:var(--ink); color:var(--on-dark-dim); font-size:.82rem; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:18px; }
.topbar__right{ display:flex; align-items:center; gap:16px; }
.topbar a{ display:inline-flex; align-items:center; gap:7px; color:var(--on-dark); transition:color .2s; }
.topbar a:hover{ color:var(--aqua); }
.topbar__sep{ width:1px; height:14px; background:var(--line-dark); }

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(244,248,248,.85); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.header.is-stuck{ background:rgba(244,248,248,.96); border-color:var(--line); box-shadow:0 12px 34px -24px rgba(5,38,44,.6); }
.header__in{ display:flex; align-items:center; justify-content:space-between; height:var(--head-h); gap:20px; }

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__mark{
  width:44px; height:44px; flex:none; display:grid; place-items:center; padding:8px; border-radius:13px;
  color:#fff; background:linear-gradient(140deg,var(--brand),#FF8A5B);
  box-shadow:0 10px 22px -12px rgba(255,90,78,.9);
}
.brand__mark svg{ width:100%; height:100%; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text strong{ font-family:var(--f-display); font-weight:800; font-size:1.1rem; letter-spacing:-.03em; }
.brand__text em{ font-style:normal; font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
.brand--light .brand__text strong{ color:#fff; }
.brand--light .brand__text em{ color:var(--on-dark-dim); }

.nav{ display:flex; align-items:center; gap:2px; }
.nav__link{
  position:relative; padding:10px 14px; border-radius:9px;
  font-family:var(--f-display); font-size:.93rem; font-weight:600; color:var(--text-soft);
  transition:color .22s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2.5px; border-radius:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__link:hover{ color:var(--text); }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--text); }
.nav__cta{ margin-left:12px; }

.burger{
  display:none; width:46px; height:46px; padding:13px; border-radius:12px;
  border:2px solid var(--line); background:#fff;
  flex-direction:column; justify-content:space-between; position:relative; z-index:130;
}
.burger span{ display:block; height:2.5px; width:100%; background:var(--text); border-radius:2px; transition:transform .34s var(--ease), opacity .2s; }
.burger.is-open{ background:transparent; border-color:rgba(255,255,255,.3); }
.burger.is-open span{ background:#fff; }
.burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }


/* 06 ── SCROLL PROGRESS ─────────────────────────────────────────────────── */
.progress{
  position:fixed; left:0; top:0; height:3px; width:100%; z-index:140;
  background:transparent; pointer-events:none;
}
.progress__bar{
  height:100%; width:0%; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--brand),var(--aqua));
  transition:width .1s linear;
}


/* 07 ── HOME HERO ───────────────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate; color:#fff; background:var(--ink);
  min-height:min(94vh,900px); display:flex; align-items:center;
  padding-block:clamp(76px,10vw,140px) clamp(96px,11vw,150px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:-8% 0 -8% 0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(4,26,31,.94) 0%, rgba(4,26,31,.80) 42%, rgba(4,26,31,.34) 100%),
    linear-gradient(to top, rgba(4,26,31,.96) 0%, transparent 46%);
}
.hero__in{ position:relative; max-width:960px; }
.hero__title{ margin-bottom:22px; text-wrap:balance; }
.hero__title .accent{
  background:linear-gradient(100deg,var(--brand) 0%, #FF9A6C 55%, var(--aqua) 115%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__sub{ max-width:640px; font-size:clamp(1rem,1.4vw,1.14rem); color:var(--on-dark); margin-bottom:32px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px; }
.hero__proof{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero__proof p{ margin:0; color:var(--on-dark); font-size:.94rem; }
.hero__proof strong{ color:#fff; }
.hero__badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }

.hero__cue{
  position:absolute; left:50%; bottom:26px; translate:-50% 0;
  width:26px; height:44px; border:2px solid rgba(255,255,255,.28); border-radius:14px; z-index:2;
}
.hero__cue span{
  position:absolute; left:50%; top:9px; width:3px; height:9px; border-radius:2px; background:var(--aqua);
  translate:-50% 0; animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{opacity:0; translate:-50% 0;} 40%{opacity:1;} 78%{opacity:0; translate:-50% 15px;} }


/* 08 ── PAGE HERO (inner pages) ─────────────────────────────────────────── */
.phero{
  position:relative; isolation:isolate; color:#fff; background:var(--ink);
  padding-block:clamp(64px,8vw,110px) clamp(64px,8vw,110px); overflow:hidden;
}
.phero__media{ position:absolute; inset:0; z-index:-2; }
.phero__media img{ width:100%; height:100%; object-fit:cover; }
.phero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(4,26,31,.93) 0%, rgba(4,26,31,.74) 55%, rgba(4,26,31,.5) 100%);
}
.phero__in{ max-width:760px; }
.phero h1{ font-size:clamp(2.1rem,4.4vw,3.5rem); margin-bottom:16px; }
.phero p{ color:var(--on-dark); font-size:1.05rem; margin:0; max-width:58ch; }
.crumbs{ display:flex; gap:9px; align-items:center; margin-bottom:18px; font-size:.84rem; color:var(--on-dark-dim); }
.crumbs a:hover{ color:var(--aqua); }
.crumbs span{ opacity:.5; }


/* 09 ── MARQUEE ─────────────────────────────────────────────────────────── */
.marquee{
  background:var(--brand); color:#fff; overflow:hidden; padding-block:15px;
}
.marquee--aqua{ background:var(--aqua); color:#04282B; }
.marquee--dark{ background:var(--ink-2); color:#fff; border-block:1px solid var(--line-dark); }
.marquee__track{
  display:flex; align-items:center; gap:24px; width:max-content;
  animation:slide 44s linear infinite;
  font-family:var(--f-display); font-size:.8rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
}
.marquee__track i{ font-style:normal; opacity:.6; font-size:.6rem; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }


/* 10 ── CARDS / SERVICES ────────────────────────────────────────────────── */
.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 28px 30px; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card::before{
  content:''; position:absolute; inset:auto 0 0 0; height:4px;
  background:linear-gradient(90deg,var(--brand),var(--aqua));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--sh); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.card__icon{
  width:54px; height:54px; padding:13px; margin-bottom:20px; border-radius:16px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,var(--ink-3),var(--ink));
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.card:hover .card__icon{ background:linear-gradient(140deg,var(--brand),#FF8A5B); transform:rotate(-6deg) scale(1.06); }
.card__icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card p{ color:var(--text-soft); font-size:.97rem; margin:0; }
.card .pill{ margin-top:16px; }
.card__link{ display:flex; width:max-content; align-items:center; gap:8px; margin-top:16px; font-family:var(--f-display); font-weight:700; font-size:.9rem; color:var(--brand); transition:gap .25s var(--ease); }
.card:hover .card__link{ gap:13px; }

/* photo card */
.pcard{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink);
  display:block; aspect-ratio:4/3;
}
.pcard img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out), filter .5s; }
.pcard:hover img{ transform:scale(1.08); }
.pcard__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(4,26,31,.92) 6%, rgba(4,26,31,.22) 52%, transparent 78%); }
.pcard__body{ position:absolute; inset:auto 0 0 0; padding:24px; color:#fff; }
.pcard__body h3{ margin:0 0 4px; }
.pcard__body span{ font-size:.86rem; color:var(--on-dark); }


/* 11 ── FEATURE BANDS ───────────────────────────────────────────────────── */
.feature{ position:relative; overflow:hidden; padding-block:var(--sec-y); }
.feature--dark{ background:var(--ink); color:#fff; }
.feature--dark p{ color:var(--on-dark); }
.feature--tint{ background:var(--paper-2); }
.feature::before{
  content:''; position:absolute; width:60vmax; height:60vmax; right:-18vmax; top:-24vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(23,200,180,.14), transparent 62%); pointer-events:none;
}
.feature--flip::before{ right:auto; left:-18vmax; background:radial-gradient(circle, rgba(255,90,78,.14), transparent 62%); }
.feature__in{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5.5vw,80px); align-items:center; }
.feature--flip .feature__media{ order:2; }
.feature h2{ margin-bottom:18px; text-wrap:balance; }
.feature__media{ position:relative; }
.feature__media .media{ box-shadow:var(--sh-lg); }
.feature__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:10px; }

.badge-float{
  position:absolute; right:-16px; bottom:28px; z-index:2;
  display:flex; align-items:center; gap:13px; padding:17px 22px; border-radius:20px;
  background:var(--brand); color:#fff; box-shadow:0 26px 52px -22px rgba(0,0,0,.62);
  animation:bob 5s ease-in-out infinite;
}
.badge-float--aqua{ background:var(--aqua); color:#03282A; }
.badge-float strong{ font-family:var(--f-display); font-size:1.8rem; font-weight:800; line-height:1; }
.badge-float span{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.32; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

.stack{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stack .media:first-child{ grid-column:1 / -1; }


/* 12 ── STATS ───────────────────────────────────────────────────────────── */
.stats{ background:var(--ink-2); color:#fff; padding-block:clamp(44px,5vw,68px); }
.stat{ text-align:center; }
.stat strong{
  display:block; font-family:var(--f-display); font-weight:800; line-height:1;
  font-size:clamp(2.3rem,4.4vw,3.4rem); letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--aqua),#7FE8DC);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat span{ display:block; margin-top:10px; font-size:.8rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-dim); }


/* 13 ── GALLERY ─────────────────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:-10px 0 40px; }
.filter{
  padding:10px 22px; border-radius:100px; border:2px solid var(--line); background:#fff;
  font-family:var(--f-display); font-size:.87rem; font-weight:600; color:var(--text-soft);
  transition:all .28s var(--ease);
}
.filter:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.filter.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.gallery--3{ grid-template-columns:repeat(3,1fr); }
.shot{
  margin:0; cursor:zoom-in; position:relative; border-radius:var(--r); overflow:hidden;
  background:var(--ink-2); aspect-ratio:4/3;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.shot.is-wide{ grid-column:span 2; aspect-ratio:8/3; }
.shot.is-tall{ grid-row:span 2; aspect-ratio:3/4; }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out); }
.shot:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.shot:hover img{ transform:scale(1.08); }
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:20px 18px 16px; color:#fff;
  background:linear-gradient(to top, rgba(4,26,31,.9), transparent);
  opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.shot:hover figcaption{ opacity:1; transform:none; }
.shot figcaption strong{ display:block; font-family:var(--f-display); font-size:.95rem; }
.shot figcaption span{ font-size:.8rem; color:var(--on-dark); }
.shot.is-hidden{ display:none; }

/* masonry variant — used on the Our Work page so every photo keeps its own
   shape instead of being cropped to a uniform box */
.gallery--masonry{
  display:block; column-count:4; column-gap:18px;
}
.gallery--masonry .shot{
  break-inside:avoid; margin:0 0 18px; aspect-ratio:auto; display:block; width:100%;
}
.gallery--masonry .shot img{ height:auto; }

.lightbox{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  gap:16px; padding:5vh 4vw; background:rgba(3,18,22,.96); backdrop-filter:blur(10px);
}
.lightbox.is-open{ display:flex; animation:fadein .28s var(--ease); }
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }
.lightbox__fig{ margin:0; text-align:center; max-width:min(1150px,88vw); }
.lightbox__fig img{ max-height:76vh; width:auto; margin-inline:auto; border-radius:14px; box-shadow:var(--sh-lg); }
.lightbox__fig figcaption{ margin-top:16px; color:var(--on-dark); font-size:.95rem; }
.lightbox__count{ display:block; margin-top:6px; font-size:.8rem; color:var(--on-dark-dim); letter-spacing:.1em; }
.lightbox__close{ position:absolute; top:20px; right:24px; width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,.24); background:rgba(255,255,255,.06); color:#fff; font-size:1.6rem; line-height:1; }
.lightbox__nav{ width:54px; height:54px; flex:none; border-radius:50%; border:2px solid rgba(255,255,255,.24); background:rgba(255,255,255,.06); color:#fff; font-size:1.8rem; line-height:1; }
.lightbox__nav:hover, .lightbox__close:hover{ background:var(--brand); border-color:var(--brand); }


/* 14 ── VIDEO & FINISHES ────────────────────────────────────────────────── */
.player{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9;
  background:var(--ink-2); box-shadow:var(--sh-lg); border:1px solid var(--line-dark);
}
.player video{ width:100%; height:100%; object-fit:cover; background:#000; }
.player__btn{
  position:absolute; inset:0; margin:auto; width:86px; height:86px; border-radius:50%; border:none;
  background:var(--brand); color:#fff; padding:26px; z-index:3; box-shadow:var(--sh-coral);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.player__btn::after{
  content:''; position:absolute; inset:-10px; border-radius:50%; border:2px solid var(--brand);
  animation:ping 2.4s var(--ease) infinite; pointer-events:none;
}
@keyframes ping{ 0%{transform:scale(.9); opacity:.8;} 100%{transform:scale(1.45); opacity:0;} }
.player__btn:hover{ transform:scale(1.09); background:var(--brand-deep); }
.player__btn svg{ fill:currentColor; }
.player.is-playing .player__btn{ display:none; }
.player__note{ margin:14px 2px 0; font-size:.82rem; color:var(--on-dark-dim); }

.finishes{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.finish{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--ink-2); }
.finish img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.finish:hover img{ transform:scale(1.07); }
.finish figcaption{
  position:absolute; inset:auto 0 0 0; padding:18px; color:#fff;
  background:linear-gradient(to top, rgba(4,26,31,.9), transparent);
  display:flex; align-items:center; gap:10px;
}
.swatch{ width:20px; height:20px; border-radius:6px; border:2px solid rgba(255,255,255,.6); flex:none; }
.finish figcaption strong{ font-family:var(--f-display); font-size:.92rem; }


/* 15 ── STEPS & REVIEWS ─────────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.step{ position:relative; padding-top:34px; border-top:3px solid var(--line); }
.step::before{ content:''; position:absolute; top:-3px; left:0; width:52px; height:3px; background:var(--brand); }
.section--dark .step{ border-color:var(--line-dark); }
.step__n{ display:block; font-family:var(--f-display); font-size:.8rem; font-weight:800; letter-spacing:.2em; color:var(--brand); margin-bottom:12px; }
.section--dark .step__n{ color:var(--aqua); }
.step p{ color:var(--text-soft); font-size:.95rem; margin:0; }
.section--dark .step p{ color:var(--on-dark); }

.quote{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 30px; display:flex; flex-direction:column; gap:16px; position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.quote::after{
  content:'”'; position:absolute; right:22px; top:6px; font-family:var(--f-display);
  font-size:5rem; line-height:1; color:var(--brand); opacity:.14;
}
.quote:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.quote p{ margin:0; font-size:1rem; }
.quote cite{ font-style:normal; display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.quote__av{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:.95rem; color:#fff;
  background:linear-gradient(140deg,var(--ink-3),var(--ink));
}
.quote cite div{ display:flex; flex-direction:column; }
.quote cite strong{ font-family:var(--f-display); font-size:.94rem; }
.quote cite span{ font-size:.8rem; color:var(--text-soft); }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  padding:10px 19px; border-radius:100px; background:#fff; border:1px solid var(--line);
  font-size:.9rem; font-weight:500; transition:all .28s var(--ease);
}
.chips li:hover{ border-color:var(--aqua); color:#0A8377; transform:translateY(-3px); box-shadow:var(--sh-sm); }
.section--dark .chips li{ background:rgba(255,255,255,.06); border-color:var(--line-dark); color:#fff; }


/* 16 ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer; padding:24px 52px 24px 0; position:relative;
  font-family:var(--f-display); font-size:1.06rem; font-weight:700; letter-spacing:-.015em;
  transition:color .22s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--brand); }
.qa summary::before,
.qa summary::after{
  content:''; position:absolute; right:10px; top:50%; background:var(--brand); border-radius:2px;
  transition:transform .32s var(--ease), opacity .2s;
}
.qa summary::before{ width:15px; height:2.6px; margin-top:-1.3px; }
.qa summary::after{ width:2.6px; height:15px; margin-top:-7.5px; margin-right:6.2px; }
.qa[open] summary::after{ transform:rotate(90deg); opacity:0; }
.qa__body{ padding:0 44px 26px 0; }
.qa__body p{ margin:0; color:var(--text-soft); }
.qa__body p + p{ margin-top:.8em; }


/* 17 ── CTA BAND ────────────────────────────────────────────────────────── */
.cta{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(115deg,var(--ink) 0%, var(--ink-3) 58%, #1E6B60 100%);
  padding-block:clamp(52px,7vw,90px);
}
.cta::before{
  content:''; position:absolute; width:50vmax; height:50vmax; right:-14vmax; bottom:-26vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,78,.3), transparent 60%);
}
.cta__in{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.cta h2{ margin-bottom:8px; max-width:19ch; }
.cta p{ margin:0; color:var(--on-dark); }
.cta__actions{ display:flex; gap:14px; flex-wrap:wrap; }


/* 18 ── CONTACT & FORM ──────────────────────────────────────────────────── */
.contact__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(34px,5vw,72px); align-items:start; }
.contact__list{ margin-top:30px; display:grid; gap:18px; }
.contact__list li{ display:flex; gap:16px; align-items:flex-start; }
.ci{
  width:46px; height:46px; padding:12px; flex:none; border-radius:14px; color:#fff;
  background:linear-gradient(140deg,var(--ink-3),var(--ink));
}
.ci svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact__list strong{ display:block; font-family:var(--f-display); font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:3px; }
.contact__list a:hover{ color:var(--brand); }

.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(24px,3.2vw,40px); box-shadow:var(--sh-sm); display:grid; gap:16px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label{
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--f-display); font-size:.76rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint);
}
.form label span{ color:var(--brand); }
.form input, .form select, .form textarea{
  font-family:var(--f-body); font-size:1rem; font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--text); padding:15px 16px; border:2px solid var(--line); border-radius:13px;
  background:var(--paper); width:100%;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.form textarea{ resize:vertical; min-height:112px; }
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--aqua); background:#fff; box-shadow:0 0 0 4px rgba(23,200,180,.18);
}
.form input.is-invalid{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,90,78,.15); }
.form__fine{ margin:0; font-size:.8rem; color:var(--text-faint); text-align:center; }
.form__status{ margin:0; font-size:.93rem; font-weight:600; text-align:center; min-height:1.2em; }
.form__status.is-ok{ color:#0A8377; }
.form__status.is-err{ color:var(--brand-deep); }


/* 19 ── FOOTER & MOBILE CALL BAR ────────────────────────────────────────── */
.footer{ background:var(--ink); color:var(--on-dark-dim); padding-top:clamp(54px,6vw,84px); font-size:.93rem; }
.footer__in{ display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr; gap:38px; padding-bottom:46px; }
.footer__brand p{ margin:18px 0 20px; max-width:38ch; line-height:1.72; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  width:42px; height:42px; padding:11px; border-radius:12px; color:var(--on-dark);
  border:1px solid var(--line-dark); transition:all .28s var(--ease);
}
.footer__social a svg{ width:100%; height:100%; fill:currentColor; }
.footer__social a:hover{ color:#fff; background:var(--brand); border-color:var(--brand); transform:translateY(-3px); }
.footer__col{ display:flex; flex-direction:column; gap:11px; }
.footer__col h4{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 6px; }
.footer__col a{ transition:color .2s; }
.footer__col a:hover{ color:var(--aqua); }
.footer__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:20px 24px; border-top:1px solid var(--line-dark); font-size:.83rem;
}
.footer__bar p{ margin:0; }

.totop{
  position:fixed; right:20px; bottom:20px; z-index:90; width:48px; height:48px; padding:14px;
  border-radius:50%; background:var(--brand); color:#fff; box-shadow:var(--sh-coral);
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.totop svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.totop.is-visible{ opacity:1; pointer-events:auto; transform:none; }

/* sticky call bar — phones only */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.5);
}
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:9px; padding:15px 10px;
  font-family:var(--f-display); font-weight:700; font-size:.94rem; color:#fff; background:var(--ink);
}
.callbar a.is-primary{ background:var(--brand); }


/* 20 ── ANIMATION ───────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-l{ opacity:0; transform:translateX(-36px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal-r{ opacity:0; transform:translateX(36px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal-l.is-in, .reveal-r.is-in{ opacity:1; transform:none; }
.reveal-s{ opacity:0; transform:scale(.94); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-s.is-in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.08s; }
[data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; }
[data-delay="4"]{ transition-delay:.32s; }
[data-delay="5"]{ transition-delay:.40s; }
[data-delay="6"]{ transition-delay:.48s; }

body{ animation:pagein .5s var(--ease-out) both; }
@keyframes pagein{ from{opacity:0;} to{opacity:1;} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal,.reveal-l,.reveal-r,.reveal-s{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}


/* 21 ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:1120px){
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .gallery--masonry{ column-count:3; }
  .finishes{ grid-template-columns:repeat(2,1fr); }
  .footer__in{ grid-template-columns:1fr 1fr; gap:34px; }
  .nav__link{ padding-inline:10px; font-size:.89rem; }
}

@media (max-width:940px){
  body{ font-size:16px; }
  :root{ --head-h:70px; }
  .topbar__in span.topbar__note, .topbar__hours{ display:none; }
  .topbar__in{ justify-content:center; }

  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(360px,88vw);
    flex-direction:column; align-items:stretch; justify-content:center; gap:4px;
    background:var(--ink); padding:84px 26px; z-index:120;
    transform:translateX(101%); transition:transform .42s var(--ease);
    box-shadow:-34px 0 70px -34px rgba(0,0,0,.7);
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; }
  body.nav-open .header{ backdrop-filter:none; background:transparent; border-color:transparent; box-shadow:none; }
  body.nav-open{ overflow:hidden; }
  .nav__link{ color:var(--on-dark); font-size:1.1rem; font-weight:700; padding:15px 12px; border-radius:11px; }
  .nav__link:hover, .nav__link.is-active{ color:#fff; background:rgba(255,255,255,.07); }
  .nav__link::after{ display:none; }
  .nav__cta{ margin:20px 0 0; justify-content:center; padding:16px 26px; font-size:1rem; color:#fff; }

  .grid--3, .grid--4, .steps{ grid-template-columns:repeat(2,1fr); }
  .feature__in, .contact__in{ grid-template-columns:1fr; }
  .feature--flip .feature__media{ order:0; }
  .feature__media .media--4x5{ aspect-ratio:4/3; }
  .badge-float{ right:14px; bottom:14px; padding:14px 18px; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery--masonry{ column-count:2; }
  .shot.is-wide{ grid-column:span 2; aspect-ratio:16/9; }
  .shot.is-tall{ grid-row:span 1; aspect-ratio:4/3; }
  .cta__in{ flex-direction:column; align-items:flex-start; }
  .hero{ min-height:auto; }
  .hero__cue{ display:none; }
  .totop{ bottom:76px; }
  .callbar{ display:grid; }
  .footer{ padding-bottom:56px; }
}

@media (max-width:620px){
  .wrap{ padding-inline:18px; }
  h1{ font-size:clamp(2.1rem,9vw,2.8rem); }
  h2{ font-size:clamp(1.7rem,7vw,2.1rem); }

  /* every content grid drops to one column… */
  .grid--2, .grid--3, .grid--4, .steps, .form__row{ grid-template-columns:1fr; }
  /* …except the stats strip, which reads better as a 2×2 block */
  .stats .grid--4{ grid-template-columns:repeat(2,1fr); gap:30px 18px; }

  .gallery, .gallery--3, .finishes{ grid-template-columns:1fr; }
  .gallery--masonry{ column-count:1; }
  .shot.is-wide{ grid-column:span 1; aspect-ratio:4/3; }
  .stack{ grid-template-columns:1fr; }
  .hero__actions .btn, .cta__actions .btn{ width:100%; }
  .footer__in{ grid-template-columns:1fr; }
  .footer__bar{ flex-direction:column; }
  .lightbox{ padding:4vh 3vw; gap:6px; }
  .lightbox__nav{ width:42px; height:42px; }
  .stat strong{ font-size:2.1rem; }
  .shot figcaption{ opacity:1; transform:none; }

  /* long button labels wrap instead of spilling out of the pill */
  .btn{ white-space:normal; text-align:center; line-height:1.3; }
  .btn--lg{ padding:16px 24px; }

  /* cards get a little more breathing room once they're full width */
  .card{ padding:28px 22px 26px; }
  .quote{ padding:28px 22px; }
  .form{ padding:24px 20px; }

  /* comfortable thumb targets */
  .topbar a{ padding-block:11px; }
  .chips li{ padding:11px 18px; }
  .filter{ padding:11px 20px; }

  .badge-float{ padding:12px 16px; }
  .badge-float strong{ font-size:1.5rem; }
  .crumbs{ font-size:.8rem; }
}

/* phones don't need the parallax — it costs frames and gains nothing */
@media (max-width:940px){
  .hero__media, .phero__media{ transform:none !important; inset:0; }
}