/* ===== Beacon Hill Roofing — design system ===== */
:root{
  --ink:        #1a1f26;
  --ink-soft:   #3c444e;
  --bg:         #f7f5f1;   /* warm off-white */
  --bg-2:       #efebe4;
  --card:       #ffffff;
  --brand-900:  #171c22;   /* near-black slate */
  --brand-800:  #252d36;
  --brand-700:  #3a444f;
  --accent:     #b07a3c;   /* copper / bronze */
  --accent-bright:#c8924b;
  --sand:       #e4dbcb;
  --muted:      #8a8578;
  --line:       rgba(26,31,38,.12);

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 16px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:500; line-height:1.04; letter-spacing:-.01em; }

.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--light{ color:var(--accent-bright); }

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-800); color:#fff;
  font-family:var(--ff-body); font-weight:600; font-size:.95rem;
  padding:14px 26px; border:none; border-radius:100px; cursor:pointer;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn:hover{ background:var(--brand-700); transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(23,28,34,.55); }
.btn--sm{ padding:10px 20px; font-size:.88rem; }
.btn--full{ width:100%; padding:17px; font-size:1rem; }

/* ===== NAV ===== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav.scrolled{
  background:rgba(247,245,241,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand__mark{ width:26px; height:26px; fill:var(--accent); transition:fill .35s ease; flex:none; }
.brand__word{
  font-family:var(--ff-display); font-weight:600; font-size:1.3rem; letter-spacing:-.01em;
  color:#fff; transition:color .35s ease; white-space:nowrap;
}
.brand__accent{ color:var(--accent-bright); }
.nav.scrolled .brand__word{ color:var(--ink); }
.nav__links{ display:flex; gap:30px; margin-left:auto; }
.nav__links a{
  font-size:.92rem; font-weight:500; color:rgba(255,255,255,.92);
  transition:color .35s ease, opacity .2s ease;
}
.nav__links a:hover{ opacity:.7; }
.nav.scrolled .nav__links a{ color:var(--ink-soft); }
.nav__cta{ margin-left:6px; }
.nav:not(.scrolled) .nav__cta{ background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4); }

/* ===== HERO SCRUB ===== */
.scrolly{ position:relative; height:640vh; background:var(--brand-900); }
.pin{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden; display:flex;
}
.hero-media{ position:absolute; inset:0; }
.hero-video{
  width:100%; height:100%; object-fit:cover; object-position:center 44%;
  background:var(--brand-900);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(15,18,23,.80) 0%, rgba(15,18,23,.14) 38%, rgba(15,18,23,0) 62%),
    linear-gradient(to bottom, rgba(15,18,23,.50) 0%, rgba(15,18,23,0) 30%);
}
.hero-overlay{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:120px; padding-bottom:42px; color:#fff;
}
.hero-kicker{
  font-size:.8rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-bright); margin-bottom:14px;
}
.hero-title{
  font-size:clamp(2.6rem, 7vw, 5.6rem); font-weight:500; color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.hero-captions{ position:relative; height:6.5em; margin-top:auto; }
.cap{
  position:absolute; left:0; bottom:0; max-width:640px;
  opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.cap.is-active{ opacity:1; transform:translateY(0); }
.cap__num{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-bright); margin-bottom:10px;
}
.cap__line{ font-family:var(--ff-display); font-size:clamp(1.4rem, 3.4vw, 2.4rem); line-height:1.15; color:#fff; }
.hero-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:26px; }
.progress{ flex:1; height:2px; background:rgba(255,255,255,.22); border-radius:2px; overflow:hidden; }
.progress span{ display:block; height:100%; width:0%; background:var(--accent-bright); transition:width .1s linear; }
.scroll-hint{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.85); transition:opacity .4s ease;
}
.scroll-hint svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(-2px);} 50%{ transform:translateY(3px);} }
.scroll-hint.is-hidden{ opacity:0; }

/* ===== STATEMENT ===== */
.statement{
  max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vw,160px) var(--pad);
  text-align:center;
}
.statement .eyebrow{ margin-bottom:22px; }
.statement__h{ font-size:clamp(2.1rem, 5.2vw, 4rem); }
.statement__p{
  max-width:640px; margin:28px auto 0; font-size:clamp(1.02rem,1.4vw,1.18rem);
  color:var(--muted);
}

/* ===== STATS ===== */
.stats{ background:var(--brand-900); color:#fff; }
.stats__grid{
  max-width:var(--maxw); margin:0 auto; padding:clamp(48px,7vw,76px) var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
}
.stat{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.stat__n{ font-family:var(--ff-display); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:#fff; }
.stat__suffix{ font-family:var(--ff-display); font-size:1.3rem; color:var(--accent-bright); margin-top:-.4em; }
.stat__l{ margin-top:12px; font-size:.86rem; color:rgba(255,255,255,.7); letter-spacing:.02em; max-width:16ch; }

/* ===== SECTION HEADS ===== */
.section-head{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); text-align:center; }
.section-title{ font-size:clamp(1.9rem,4.4vw,3.2rem); margin-top:16px; }
.section-sub{ max-width:600px; margin:18px auto 0; color:var(--muted); font-size:1.05rem; }

/* ===== PROCESS ===== */
.process{ padding:clamp(70px,10vw,130px) 0; }
.steps{
  list-style:none; max-width:var(--maxw); margin:clamp(40px,6vw,68px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
}
.step{ padding:30px 22px; border-top:2px solid var(--ink); position:relative; }
.step:not(:last-child){ border-right:1px solid var(--line); }
.step__n{ font-family:var(--ff-display); font-size:1rem; color:var(--accent); font-weight:600; }
.step h3{ font-size:1.16rem; margin:14px 0 10px; }
.step p{ font-size:.92rem; color:var(--muted); }

/* ===== GALLERY ===== */
.gallery{ padding:clamp(40px,6vw,80px) 0 clamp(70px,10vw,120px); }
.gallery__grid{
  max-width:var(--maxw); margin:clamp(36px,5vw,56px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:240px; gap:16px;
}
.g{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--bg-2); }
.g img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.g:hover img{ transform:scale(1.06); }
.g figcaption{
  position:absolute; left:18px; bottom:15px; z-index:2; color:#fff;
}
.g figcaption b{ display:block; font-weight:600; font-size:.95rem; letter-spacing:.01em; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.g figcaption span{ display:block; font-size:.78rem; color:rgba(255,255,255,.82); margin-top:2px; text-shadow:0 1px 10px rgba(0,0,0,.55); }
.g::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 48%); opacity:.95; }
.g--tall{ grid-row:span 2; }
.g--wide{ grid-column:span 2; }

/* ===== BAND ===== */
.band{
  position:relative; background:var(--band-img) center/cover no-repeat fixed;
  color:#fff; isolation:isolate;
}
.band::before{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(15,18,23,.86), rgba(15,18,23,.40)); z-index:-1; }
.band__inner{ max-width:760px; margin:0 auto; padding:clamp(90px,15vw,180px) var(--pad); }
.band__h{ font-size:clamp(2.2rem,5.5vw,4.2rem); margin:18px 0; color:#fff; }
.band__p{ max-width:520px; font-size:1.1rem; color:rgba(255,255,255,.85); }

/* ===== SERVICES ===== */
.services{ padding:clamp(70px,10vw,130px) 0; background:var(--bg-2); }
.services__grid{
  max-width:var(--maxw); margin:clamp(40px,6vw,64px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.svc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:32px 28px; transition:transform .3s ease, box-shadow .3s ease;
}
.svc:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(26,31,38,.4); }
.svc h3{ font-size:1.26rem; margin-bottom:10px; }
.svc p{ font-size:.95rem; color:var(--muted); }

/* ===== REVIEWS ===== */
.reviews{ padding:clamp(70px,10vw,130px) 0; }
.reviews__grid{
  max-width:var(--maxw); margin:clamp(40px,6vw,64px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.quote{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:34px 30px; display:flex; flex-direction:column; gap:22px; }
.quote p{ font-family:var(--ff-display); font-size:1.16rem; line-height:1.4; }
.quote footer{ display:flex; flex-direction:column; gap:6px; }
.stars{ color:var(--accent); letter-spacing:2px; font-size:.95rem; }
.quote cite{ font-style:normal; font-size:.88rem; color:var(--muted); font-weight:500; }

/* ===== QUOTE CTA ===== */
.quote-cta{ background:var(--brand-900); color:#fff; }
.quote-cta__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vw,130px) var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center;
}
.quote-cta__h{ font-size:clamp(2.2rem,5vw,3.8rem); color:#fff; margin:16px 0; }
.quote-cta__p{ color:rgba(255,255,255,.78); max-width:440px; }
.quote-cta__list{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.quote-cta__list li{ position:relative; padding-left:28px; color:rgba(255,255,255,.9); font-size:.96rem; }
.quote-cta__list li::before{ content:"✓"; position:absolute; left:0; color:var(--accent-bright); font-weight:700; }

.qform{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:clamp(24px,3vw,36px); }
.qform__row{ margin-bottom:16px; }
.qform__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.qform label{ display:flex; flex-direction:column; gap:7px; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.7); text-transform:uppercase; }
.qform input,.qform select,.qform textarea{
  font-family:var(--ff-body); font-size:.98rem; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:11px;
  padding:13px 14px; width:100%; transition:border .2s ease, background .2s ease;
}
.qform input::placeholder,.qform textarea::placeholder{ color:rgba(255,255,255,.4); }
.qform input:focus,.qform select:focus,.qform textarea:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.1); }
.qform select option{ color:#111; }
.qform textarea{ resize:vertical; }
.qform .btn--full{ margin-top:6px; background:var(--accent); color:#fff; }
.qform .btn--full:hover{ background:var(--accent-bright); }
.qform__note{ margin-top:14px; font-size:.9rem; color:var(--accent-bright); text-align:center; }
.qform__note.is-error{ color:#ff9a8b; }

/* ===== FOOTER ===== */
.footer{ background:var(--brand-900); color:rgba(255,255,255,.74); }
.footer__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vw,84px) var(--pad) 40px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
}
.brand--light .brand__word{ color:#fff; }
.footer__brand p{ margin-top:16px; max-width:36ch; font-size:.95rem; }
.footer__col h4{ font-family:var(--ff-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px; font-weight:600; }
.footer__col a,.footer__col span{ display:block; font-size:.95rem; margin-bottom:10px; transition:color .2s ease; }
.footer__col a:hover{ color:var(--accent-bright); }
.footer__bar{
  max-width:var(--maxw); margin:0 auto; padding:22px var(--pad);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:rgba(255,255,255,.5);
}

/* ===== reveal animation ===== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ===== RESPONSIVE ===== */
@media (max-width:960px){
  .nav__links{ display:none; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step{ border-right:none !important; }
  .services__grid,.reviews__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery__grid{ grid-auto-rows:200px; }
  .quote-cta__inner{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  /* Rule: mobile = uncropped landscape video PINNED at top under the header,
     captions below; scroll scrubs the video (it never autoplays). svh keeps the
     pinned frame stable while the mobile browser chrome shows/hides. */
  :root{ --nav-h: 60px; }
  .scrolly{ height:560vh; }
  .pin{
    flex-direction:column; background:var(--brand-900);
    height:100vh; height:100svh; min-height:100svh;
  }
  .hero-media{ position:relative; inset:auto; width:100%; flex:none; }
  .hero-video{
    height:auto; aspect-ratio:16/9; object-fit:contain;
    margin-top:var(--nav-h);            /* sits just under the header */
    background:var(--brand-900);
  }
  .hero-scrim{ display:none; }
  .hero-overlay{
    position:relative; z-index:2; flex:1; justify-content:flex-start;
    padding-top:24px; padding-bottom:24px;
  }
  .hero-title{ font-size:clamp(2.2rem,9vw,3.2rem); }
  .hero-captions{ height:auto; min-height:5.5em; margin-top:22px; }
  .cap{ position:absolute; }
  .hero-foot{ margin-top:24px; }
  /* keep the header transparent over the dark hero panel; never an opaque bar
     while the pinned video is on screen (matches the desktop nav rule) */
  .nav__inner{ padding:14px var(--pad); }
}

@media (max-width:560px){
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .steps,.services__grid,.reviews__grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:160px; }
  .g--wide{ grid-column:span 2; }
  .g--tall{ grid-row:span 1; }
  .qform__row--2{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; gap:30px; }
  .band{ background-attachment:scroll; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-hint svg{ animation:none; }
}