/* ══════════════════════════════════════════════════════════
   Panda Roof
   Photography-led. Real job photos carry every section.

   TYPE (two faces, no exceptions):
     Bowlby One      display only. Chunky outlined caps, chosen to echo
                     the logo wordmark. Single weight, no stretch axis,
                     so it needs looser leading and neutral tracking.
     Be Vietnam Pro  everything else, including small headings.
   NO MONOSPACE ANYWHERE ON THIS SITE.

   WIDTH: viewport-relative, never a fixed max-width. A hard cap islands
   the page in dead margins on an ultrawide monitor.
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:      #0F0E0C;
  --ink-2:    #17150F;
  --paper:    #F4F1EA;
  --paper-2:  #E9E4D8;
  --accent:   #FF4A17;
  --muted:    #6B665D;
  --line:     rgba(15,14,12,.14);

  --display: "Bowlby One", "Arial Black", sans-serif;
  --body:    "Be Vietnam Pro", "Segoe UI", sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:64px; --s7:96px; --s8:128px;

  --gut: clamp(20px, 4vw, 96px);
  --wide: min(2600px, 90vw);
  --sec: clamp(88px, 8.5vw, 240px);   /* vertical rhythm; sections must breathe on a tall window */
  --prose: 68ch;
  --r: 14px;
  --lift: 0 26px 60px -34px rgba(15,14,12,.55);
}

*,*::before,*::after{ box-sizing:border-box; }
/* Scale the whole rem system from the root. Without this every rem-based
   size stays locked at 16px and the page reads laptop-sized on a 3200px
   monitor no matter how wide the containers are. */
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  font-size:clamp(16px, 0.85vw, 23px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* never `hidden`: that breaks position:sticky */
}

img{ display:block; max-width:100%; height:auto; }
section[id]{ scroll-margin-top:92px; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }

h1,h2{
  margin:0; font-family:var(--display); font-weight:400;
  line-height:1.02; letter-spacing:-.005em; text-transform:uppercase;
}
h3{
  margin:0; font-family:var(--body); font-weight:800;
  line-height:1.14; letter-spacing:-.01em; text-transform:uppercase;
}

.skip{ position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:var(--s2); z-index:99; }
.skip:focus{ left:0; }
:where(a,button,input,textarea):focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* ─────────────────────  STARS / GOOGLE  ────────────────── */
.stars{ display:inline-flex; align-items:center; gap:3px; }
.stars svg{ width:16px; height:16px; flex:0 0 auto; }
.stars.big svg{ width:26px; height:26px; }
.gmark{ width:22px; height:22px; flex:0 0 auto; }

/* ───────────────────────  BUTTONS  ─────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:2px solid transparent;
  padding:15px 26px; font-size:clamp(.76rem,.82vw,.88rem); border-radius:8px; min-height:50px;
  transition:background-color .14s ease-out, color .14s ease-out, border-color .14s ease-out, transform .14s ease-out;
}
.btn-lg{ padding:20px 34px; font-size:clamp(.86rem,.96vw,1.02rem); }
.btn-fill{ background:var(--accent); color:#160700; }
.btn-fill:hover{ background:#e63c0d; }
.btn-glass{ border-color:rgba(255,255,255,.8); color:#fff; background:rgba(255,255,255,.1); backdrop-filter:blur(6px); }
.btn-glass:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:#fff; color:var(--ink); }
.btn:active{ transform:translateY(1px); }

/* ──────────────────────  MASTHEAD  ─────────────────────── */
.masthead{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:clamp(20px,3vw,56px);
  padding:12px var(--gut);
  background:rgba(244,241,234,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand img{ height:clamp(40px,3vw,72px); width:auto; }
.mast-nav{ display:flex; gap:clamp(18px,2vw,36px); margin-left:auto; }
.mast-nav a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:6px 0; border-bottom:2px solid transparent; transition:border-color .14s ease-out;
}
.mast-nav a:hover{ border-bottom-color:var(--accent); }
.mast-act{ display:flex; align-items:center; gap:clamp(14px,1.6vw,26px); }
.mast-tel{
  font-family:var(--display); font-size:clamp(.94rem,1.05vw,1.16rem);
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.mast-tel:hover{ color:var(--accent); }

/* ════════════════════════  HERO  ════════════════════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:min(92vh, 1120px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(36px,4.4vw,68px) var(--gut) 0;
  overflow:hidden;            /* contains the parallaxed media layer */
}
.hero-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 50%;
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:scale(1.04); } to{ transform:scale(1.13); } }

/* The reading scrim rides ON the media layer, not on .hero. Anchored to
   .hero it stays put while the photo parallaxes underneath, so the dark
   gradient visibly slides across the image as you scroll. Same layer as
   the photo means they read as one thing. */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg,
    rgba(9,8,7,.88) 0%, rgba(9,8,7,.62) 34%, rgba(9,8,7,.18) 68%, rgba(9,8,7,.02) 100%);
}

/* Separate job, so it stays anchored to .hero: dissolve the bottom edge
   into the reviews band. It resolves to exactly --ink, which is that
   section's background, so it reads as an edge treatment rather than an
   overlay travelling across the picture. Without it the parallax clips the
   media scrim and you get a hard bright-photo-to-black seam. */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:46%; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg,
    var(--ink) 0%, rgba(15,14,12,.72) 26%, rgba(15,14,12,.28) 58%, rgba(15,14,12,0) 100%);
}

/* px not ch: `ch` resolves against the body size and would crush the headline */
.hero-inner{ max-width:min(1560px, 64%); padding-bottom:clamp(32px,3.6vw,72px); }
.hero h1{
  color:#fff;
  font-size:clamp(1.9rem, 4.3vw, 7.4rem);
  text-shadow:0 4px 40px rgba(0,0,0,.4);
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero-sub{
  margin-top:var(--s3); max-width:58ch;
  color:rgba(255,255,255,.92);
  font-size:clamp(1.02rem,1.12vw,1.26rem); line-height:1.55;
}
.hero-act{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }


/* ── hero service area line ── */
.hero-area{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px clamp(12px,1.1vw,22px);
  margin-top:var(--s4); max-width:100%;
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:clamp(.86rem,.9vw,1rem); font-weight:600;
  letter-spacing:.01em;
}
.hero-area span{ position:relative; transition:color .15s ease-out; }
.hero-area span + span::before{
  content:""; position:absolute; left:clamp(-11px,-.55vw,-6px); top:50%;
  width:3px; height:3px; border-radius:50%; background:var(--accent);
  transform:translateY(-50%);
}
.hero-area:hover span{ color:#fff; }

/* ══════════════  GOOGLE REVIEWS + CAROUSEL  ═════════════ */
.reviews{ background:var(--ink); color:#fff; padding:var(--sec) 0; }
.rv-head{
  width:var(--wide); margin:0 auto clamp(36px,3.4vw,60px);
  display:flex; align-items:center; gap:clamp(24px,3vw,64px); flex-wrap:wrap;
}
.rv-logo{ height:clamp(38px,3.2vw,60px); width:auto; }
/* Google's own star graphic, cropped straight out of their review badge,
   rather than redrawn SVG stars. */
.rv-stars{ height:clamp(20px,1.7vw,32px); width:auto; }
.rv-figure{ display:flex; align-items:center; gap:var(--s3); }
.rv-num{
  font-family:var(--display); font-size:clamp(2.8rem,5.4vw,9rem);
  line-height:.9; color:var(--accent);
}
.rv-meta{ display:flex; flex-direction:column; gap:6px; font-size:1.05rem; color:rgba(255,255,255,.84); }
.rv-meta b{ font-family:var(--display); font-weight:400; color:#fff; }
.rv-lede{ max-width:34ch; color:rgba(255,255,255,.78); font-size:1.06rem; margin-left:auto; }

/* Two lanes drifting opposite ways. Full-bleed so the motion reads. */
.lanes{ display:flex; flex-direction:column; gap:clamp(14px,1.4vw,22px); }
.lane{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.lane-run{
  display:flex; gap:clamp(14px,1.4vw,22px); width:max-content;
  animation:lane-l 70s linear infinite;
}
.lane-back .lane-run{ animation-name:lane-r; animation-duration:84s; }
.lane:hover .lane-run,
.lane:focus-within .lane-run{ animation-play-state:paused; }
@keyframes lane-l{ from{ transform:translateX(0); }        to{ transform:translateX(-50%); } }
@keyframes lane-r{ from{ transform:translateX(-50%); }     to{ transform:translateX(0); } }

.rv{
  margin:0; flex:0 0 auto; width:clamp(272px, 23vw, 400px);
  background:#fff; color:var(--ink);
  border-radius:var(--r); padding:clamp(20px,1.5vw,28px);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .2s ease-out, box-shadow .2s ease-out;
}
.rv:hover{ transform:translateY(-6px); box-shadow:0 36px 66px -30px rgba(0,0,0,.9); }
.rv-top{ display:flex; align-items:center; gap:11px; }
.rv p{ font-size:1rem; line-height:1.55; flex:1; }
.rv cite{ font-style:normal; font-weight:700; font-size:1rem; }

.rv-all{
  display:block; width:max-content; margin:clamp(32px,3vw,56px) auto 0;
  color:#fff; font-family:var(--display); font-size:clamp(.8rem,.9vw,.94rem);
  text-transform:uppercase; letter-spacing:.02em; text-decoration:none;
  border-bottom:2px solid var(--accent); padding-bottom:8px;
}
.rv-all:hover{ color:var(--accent); }

/* ════════════════  METAL VS ASPHALT  ════════════════════ */
.compare{ width:var(--wide); margin:0 auto; padding:var(--sec) 0 0; }
.cmp-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,88px); align-items:end;
}
.cmp-head h2{ font-size:clamp(1.9rem,4vw,6.4rem); }
.cmp-head p{ max-width:var(--prose); color:var(--muted); font-size:clamp(1rem,1.1vw,1.2rem); }

.cmp-pair{
  margin-top:clamp(36px,3.4vw,64px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,2vw,40px);
  align-items:stretch;
}
.cmp{
  background:#fff; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--lift); display:flex; flex-direction:column;
}
.cmp-shot img{ width:100%; height:clamp(220px,22vw,460px); object-fit:cover; }
.cmp-body{ padding:clamp(24px,2vw,44px); display:flex; flex-direction:column; flex:1; }
.cmp h3{ font-size:clamp(1.05rem,1.35vw,1.6rem); }
.cmp-num{ display:flex; align-items:baseline; gap:12px; margin-top:var(--s2); }
.cmp-num b{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.2rem,3.8vw,6rem); line-height:.95;
  font-variant-numeric:tabular-nums;
}
.cmp-num span{ font-size:1.05rem; color:var(--muted); }
.cmp-lead{ outline:3px solid var(--accent); }
.cmp-lead .cmp-num b{ color:var(--accent); }

.cmp-facts{ margin:var(--s4) 0 0; display:flex; flex-direction:column; gap:var(--s3); }
.cmp-facts div{ display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1fr); gap:var(--s2); align-items:baseline; }
.cmp-facts dt{ color:var(--muted); font-size:.98rem; }
.cmp-facts dd{ margin:0; font-size:1.02rem; font-weight:500; }
.cmp-note{
  margin-top:clamp(28px,2.6vw,48px); max-width:var(--prose);
  color:var(--muted); font-size:clamp(1rem,1.08vw,1.16rem);
}
.cmp-note b{ color:var(--ink); font-weight:700; }

/* ═══════════════════  PHOTO MOSAIC  ════════════════════ */
.work{ width:var(--wide); margin:0 auto; padding:clamp(72px,7vw,160px) 0 0; }
.work h2{ font-size:clamp(1.9rem,4vw,6.4rem); }
.mosaic{
  margin-top:clamp(32px,3vw,60px);
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(180px,14vw,340px);
  gap:clamp(12px,1vw,22px);
}
.tile{
  position:relative; overflow:hidden; border-radius:var(--r);
  text-decoration:none; color:#fff; display:block; box-shadow:var(--lift);
}
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(9,8,7,.88) 0%, rgba(9,8,7,.24) 48%, rgba(9,8,7,.04) 100%);
}
.tile:hover img{ transform:scale(1.07); }
.tile-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(16px,1.3vw,28px);
  display:flex; flex-direction:column; gap:6px;
}
.tile-cap b{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; line-height:1.06;
  font-size:clamp(.95rem,1.28vw,1.5rem);
}
.tile-cap small{ font-size:.95rem; color:rgba(255,255,255,.86); line-height:1.4; }
.tile-xl{ grid-column:span 2; grid-row:span 2; }
.tile-tall{ grid-row:span 2; }
.tile-wide{ grid-column:span 2; }

/* ═════════════════════  HOW IT GOES  ═══════════════════ */
.steps{
  margin-top:var(--sec);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:stretch; background:var(--ink); color:#fff;
}
.steps-media{ position:relative; min-height:clamp(420px,42vw,880px); }
.steps-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.steps-body{ padding:clamp(48px,5vw,130px) clamp(28px,3.6vw,110px); }
.steps-body h2{ font-size:clamp(1.6rem,2.7vw,4.4rem); max-width:22ch; }
.steplist{ margin-top:clamp(28px,2.6vw,52px); display:flex; flex-direction:column; gap:clamp(20px,2vw,36px); }
.steplist li{ display:grid; grid-template-columns:minmax(120px,.24fr) minmax(0,1fr); gap:clamp(16px,2vw,40px); align-items:baseline; }
.st-when{
  font-family:var(--display); font-weight:400;
  font-size:clamp(.9rem,1.05vw,1.2rem); color:var(--accent);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.steplist h3{ font-size:clamp(1rem,1.16vw,1.3rem); margin-bottom:8px; }
.steplist p{ color:rgba(255,255,255,.76); font-size:1.02rem; max-width:var(--prose); }
.steplist li > div{ min-width:0; }

/* ═══════════════════════  STORM  ═══════════════════════ */
.storm{ background:var(--accent); color:#160700; padding:clamp(64px,6vw,150px) var(--gut); }
.storm-copy{ width:var(--wide); margin:0 auto; }
.storm h2{ font-size:clamp(1.8rem,4.2vw,7rem); max-width:19ch; }
.storm p{ margin-top:var(--s3); max-width:58ch; font-size:clamp(1rem,1.14vw,1.28rem); line-height:1.5; }
.storm .btn{ margin-top:var(--s4); }

/* ════════════════════════  CREW  ═══════════════════════ */
.crew{ position:relative; isolation:isolate; min-height:clamp(520px,50vw,940px); display:flex; align-items:center; }
.crew-media{ position:absolute; inset:0; z-index:-2; }
.crew-media img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.crew::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(9,8,7,.06) 0%, rgba(9,8,7,.5) 40%, rgba(9,8,7,.93) 72%);
}
.crew-panel{
  margin-left:auto; margin-right:var(--gut);
  max-width:min(52ch, calc(100% - var(--gut) * 2));
  padding:clamp(56px,5.5vw,140px) 0; color:#fff;
}
.crew-panel h2{ font-size:clamp(1.6rem,2.7vw,4.4rem); }
.crew-panel p{ margin-top:var(--s3); color:rgba(255,255,255,.84); font-size:clamp(1rem,1.08vw,1.16rem); }
.crew-marks{ display:flex; align-items:center; gap:var(--s4); margin-top:var(--s5); flex-wrap:wrap; }
.crew-marks img{ height:46px; width:auto; background:#fff; padding:6px 10px; border-radius:6px; }
.crew-g{ display:flex; align-items:center; gap:9px; font-size:1rem; color:rgba(255,255,255,.92); }
.crew-g b{ font-family:var(--display); font-weight:400; font-size:1.1rem; }

/* ═════════════════════  SERVICE AREA  ══════════════════ */
.area{ width:var(--wide); margin:var(--sec) auto 0; }
.area h2{ font-size:clamp(1.9rem,4vw,6.4rem); }
.area-lede{ margin-top:var(--s3); max-width:52ch; color:var(--muted); font-size:clamp(1rem,1.1vw,1.2rem); }
.counties{
  margin-top:clamp(32px,3.4vw,60px);
  display:flex; flex-wrap:wrap; gap:clamp(6px,.6vw,14px) clamp(20px,2.4vw,52px);
  font-family:var(--display); text-transform:uppercase; line-height:1.1;
  font-size:clamp(1.5rem,4.2vw,7rem);
}
.counties span:nth-child(2n){ color:var(--accent); }
.towns{ margin-top:var(--s4); color:var(--muted); font-size:1.04rem; max-width:var(--prose); }

/* ════════════════════════  CLOSE  ══════════════════════ */
.close{
  position:relative; isolation:isolate;
  margin-top:var(--sec);
  padding:var(--sec) var(--gut);
  background:var(--ink);
}
.close-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.close-media img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; opacity:.34; }
.close::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(15,14,12,.94) 0%, rgba(15,14,12,.72) 60%, rgba(15,14,12,.52) 100%);
}
.close-inner{
  width:var(--wide); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.7fr);
  gap:clamp(32px,4vw,96px); align-items:start;
}
.close-copy{ color:#fff; }
.close h2{ font-size:clamp(1.8rem,3.4vw,5.4rem); max-width:15ch; }
.close-sub{ margin-top:var(--s3); max-width:48ch; color:rgba(255,255,255,.82); font-size:clamp(1rem,1.1vw,1.2rem); }
.tel-huge{
  display:block; max-width:100%; margin-top:var(--s5); white-space:nowrap;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,3vw,4.8rem); line-height:1.05;
  color:#fff; text-decoration:none; font-variant-numeric:tabular-nums;
}
.tel-huge:hover{ color:var(--accent); }
.close-hours{ margin-top:var(--s3); color:rgba(255,255,255,.64); font-size:1rem; max-width:44ch; }

.quote-form{
  background:#fff; border-radius:var(--r);
  padding:clamp(24px,2vw,44px);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
}
.qf-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.qf-field{ display:block; margin-bottom:var(--s2); }
.qf-field span{ display:block; margin-bottom:8px; font-size:.94rem; font-weight:600; color:var(--muted); }
.qf-field input,.qf-field textarea{
  width:100%; padding:15px 16px;
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  transition:border-color .14s ease-out, background-color .14s ease-out;
}
.qf-field input:focus,.qf-field textarea:focus{ background:#fff; border-color:var(--ink); }
.qf-field textarea{ resize:vertical; }
.qf-field input::placeholder,.qf-field textarea::placeholder{ color:#9a948a; }
.quote-form .btn{ width:100%; margin-top:var(--s1); }
.qf-note{ margin-top:var(--s2); font-size:.92rem; color:var(--muted); }

/* Replaces the form once it is submitted. Sits in the same box so the section
   does not jump when the form is swapped out. */
.qf-done{
  padding:clamp(22px,2vw,34px);
  border:1px solid rgba(255,74,23,.42);
  border-radius:4px;
  background:rgba(255,74,23,.07);
}
.qf-done strong{ display:block; font-family:var(--display); font-size:1.3rem; line-height:1.2; }
.qf-done p{ margin-top:var(--s2); font-size:.98rem; line-height:1.6; color:var(--muted); }

/* ═══════════════════════  FOOTER  ══════════════════════ */
.foot{
  background:var(--ink-2); color:var(--paper);
  padding:clamp(56px,5vw,130px) var(--gut) clamp(28px,2.6vw,56px);
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(24px,3vw,64px);
  align-items:start;
}
.foot-brand img{ height:78px; width:auto; filter:invert(1); }
.foot-brand p{ margin-top:var(--s2); color:var(--accent); font-weight:600; font-size:1rem; }
.foot-col p{ color:rgba(244,241,234,.64); font-size:.98rem; line-height:1.6; margin-bottom:var(--s2); }
.foot-col a{
  display:block; color:var(--paper); text-decoration:none;
  font-family:var(--display); font-weight:400; font-size:1.06rem; margin-bottom:12px;
}
.foot-col a:hover{ color:var(--accent); }
.foot-social a{ font-size:.98rem; }
.foot-marks{
  grid-column:1/-1; display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid rgba(244,241,234,.16);
}
.foot-marks img{ height:44px; width:auto; background:#fff; padding:6px 10px; border-radius:6px; }
.foot-g{ display:flex; align-items:center; gap:9px; color:rgba(244,241,234,.88); font-size:1rem; }
.foot-g b{ font-family:var(--display); font-weight:400; font-size:1.06rem; }
.foot-fine{ grid-column:1/-1; margin-top:var(--s3); color:rgba(244,241,234,.58); font-size:.9rem; }

/* ───────────────────  MOBILE CALL BAR  ─────────────────── */
.callbar{ display:none; }

/* ════════════════════════  MOTION  ══════════════════════ */
/* Budgeted deliberately: two choreographed moments (hero parallax, the
   county names) plus three reveal primitives. NOT a uniform fade-up on
   every element, which is its own tell.

   IMPORTANT: never put clip-path on an element that IntersectionObserver
   is watching. Chrome computes an intersectionRatio of 0 for a clipped
   element, so it never reports as visible, never gets .in, and never
   unclips: a deadlock that silently falls through to the failsafe timer.
   The clip always goes on an inner node instead.

   Not gated behind prefers-reduced-motion: a page stuck at opacity 0
   reads as broken, and this machine has PRM on system wide. Intensity is
   low and every animated property is transform / opacity / clip-path, so
   it all stays on the compositor. */

:root{ --ease:cubic-bezier(.16,1,.3,1); }

/* Headings wipe up. JS wraps the text in .wl so the heading itself stays
   unclipped and observable. */
.a-wipe > .wl{
  display:block;
  clip-path:inset(0 0 104% 0); transform:translateY(12px);
  transition:clip-path .95s var(--ease), transform .95s var(--ease);
}
.a-wipe.in > .wl{ clip-path:inset(0 0 -30% 0); transform:none; }

/* Media wipes open and the photo settles out of a slow push in.
   The clip is on the img; the observed container stays clean. */
.a-img > img{
  clip-path:inset(0 0 100% 0); transform:scale(1.12);
  transition:clip-path 1.05s var(--ease), transform 1.5s var(--ease);
}
.a-img.in > img{ clip-path:inset(0 0 0 0); transform:none; }

/* Tiles rise only. Their images keep the hover scale to themselves. */
.a-tile{ opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.a-tile.in{ opacity:1; transform:none; }

.a-rise{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.a-rise.in{ opacity:1; transform:none; }

/* The one kinetic type moment on the page. The span is observed, the
   inner <i> is what moves, so the same clip rule applies. */
.counties span{ display:inline-block; overflow:hidden; padding-bottom:.06em; }
.counties span > i{
  font-style:normal; display:inline-block;
  transform:translateY(105%); transition:transform .85s var(--ease);
}
.counties span.in > i{ transform:none; }

/* Hero parallax targets. JS writes transforms; keep them composited. */
.hero-media, .hero-inner{ will-change:transform; }

/* Masthead condenses once you leave the hero. */
.masthead{ transition:padding .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); }
.masthead.is-stuck{ padding-block:7px; box-shadow:0 10px 30px -22px rgba(15,14,12,.7); }
.masthead.is-stuck .brand img{ height:clamp(32px,2.2vw,52px); }
.brand img{ transition:height .25s var(--ease); }

/* ═══════════════════════  RESPONSIVE  ══════════════════ */
@media (max-width:1180px){
  .mast-nav{ display:none; }
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .tile-xl{ grid-column:span 2; grid-row:span 2; }
  .tile-wide{ grid-column:span 2; }
  .foot{ grid-template-columns:1fr 1fr; }
}

@media (max-width:940px){
  :root{ --wide:min(2600px, 100% - (var(--gut) * 2)); }
  .hero{ min-height:auto; padding-top:clamp(40px,13vw,80px); }
  .cmp-head,.cmp-pair,.close-inner,.steps{ grid-template-columns:1fr; }
  .steps-media{ min-height:280px; }
  .crew-panel{ max-width:none; margin-left:var(--gut); }
  .crew::before{ background:linear-gradient(0deg, rgba(9,8,7,.94) 12%, rgba(9,8,7,.64) 62%, rgba(9,8,7,.35) 100%); }
  .mast-tel{ display:none; }
  .quote-form{ margin-top:var(--s4); }
  .rv-lede{ margin-left:0; }
}

@media (max-width:720px){
  body{ font-size:16.5px; }
  .masthead{ gap:var(--s2); padding:10px var(--gut); }
  .brand img{ height:34px; }
  .mast-act .btn{ padding:12px 14px; font-size:.72rem; min-height:44px; }

  .hero{ min-height:auto; }
  /* The desktop line breaks produce five ragged lines at this width.
     Let the headline wrap on its own instead. */
  .hero h1 br{ display:none; }
  .hero h1{ font-size:clamp(1.8rem,7.8vw,2.6rem); line-height:1.06; }
  .hero-sub{ font-size:.98rem; line-height:1.5; margin-top:var(--s2); }
  .hero-act{ gap:10px; margin-top:var(--s3); }
  .hero-act .btn{ width:100%; white-space:nowrap; font-size:.8rem; padding-inline:16px; }
  .hero-inner{ padding-bottom:var(--s4); }

  /* A 20px fade over white cards reads as a smudge at this width. */
  .lane{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
  }

  .trustbar{ gap:var(--s3); padding-block:var(--s3); }
  .tb-google{ border-right:0; padding-right:0; width:100%; padding-bottom:var(--s3); border-bottom:1px solid var(--line); }
  .tb-rest{ flex:1 1 100%; align-items:flex-start; }
  .tb-line{ font-size:.95rem; }

  .rv-head{ gap:var(--s3); }
  .rv-figure{ gap:var(--s2); }
  .rv{ width:78vw; }

  .cmp-facts div{ grid-template-columns:1fr; gap:2px; }
  .cmp-shot img{ height:200px; }

  .mosaic{ grid-template-columns:1fr; grid-auto-rows:clamp(190px,44vw,250px); }
  .tile-xl,.tile-tall,.tile-wide{ grid-column:span 1; grid-row:span 1; }

  .steps-body{ padding:var(--s5) var(--gut); }
  .steplist li{ grid-template-columns:1fr; gap:4px; }
  .st-when{ font-size:.94rem; }

  .counties{ font-size:clamp(1.5rem,9.4vw,2.6rem); }
  .qf-row{ grid-template-columns:1fr; }
  .close-inner{ gap:var(--s5); }
  .foot{ grid-template-columns:1fr; padding-bottom:96px; }

  /* 44px hit areas without changing how the links look */
  .foot-col a,.foot-social a{ padding-block:10px; margin-bottom:0; }
  .brand{ display:inline-flex; align-items:center; min-height:44px; }
  .tel-huge{ padding-block:10px; }
  .rv-all{ padding-block:12px; }

  .callbar{
    display:grid; grid-template-columns:1.35fr 1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    box-shadow:0 -8px 26px -14px rgba(0,0,0,.6);
  }
  .callbar a{
    display:flex; align-items:center; justify-content:center; min-height:62px;
    text-decoration:none; font-family:var(--display); font-weight:400;
    text-transform:uppercase; font-size:.82rem;
  }
  .callbar a:first-child{ background:var(--accent); color:#160700; }
  .callbar a:last-child{ background:#fff; color:var(--ink); }
}

/* ══════════  CREDENTIALS (merged in from the old white bar)  ══════════ */
.creds{
  width:var(--wide); margin:0 auto clamp(40px,4vw,80px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2vw,44px);
  padding-top:clamp(28px,2.6vw,52px);
  border-top:1px solid rgba(255,255,255,.16);
}
.cred p{ color:rgba(255,255,255,.72); font-size:clamp(.95rem,1vw,1.08rem); line-height:1.5; }
.cred b{ color:#fff; font-weight:700; }
.cred-bbb{ display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; }
.cred-bbb img{ height:clamp(42px,2.8vw,64px); width:auto; background:#fff; padding:6px 10px; border-radius:6px; }

/* ═════════════════════  THE WARRANTY  ═══════════════════ */
.promise{ background:var(--paper-2); padding:var(--sec) var(--gut); }
.promise-inner{ width:var(--wide); margin:0 auto; }
.promise-kicker{
  font-family:var(--display); color:var(--accent);
  font-size:clamp(.85rem,.95vw,1.05rem); text-transform:uppercase; letter-spacing:.02em;
}
.promise h2{ margin-top:var(--s3); font-size:clamp(1.7rem,3.6vw,5.4rem); max-width:20ch; }
.promise-grid{
  margin-top:clamp(40px,4vw,90px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,72px);
}
.promise-grid h3{ font-size:clamp(1rem,1.16vw,1.35rem); color:var(--ink); }
.promise-grid p{ margin-top:var(--s2); color:var(--muted); font-size:clamp(.98rem,1.05vw,1.14rem); }

/* ═══════════════  INSURANCE AND STORM CLAIMS  ═══════════ */
.claims{
  margin-top:var(--sec);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:stretch; background:var(--ink); color:#fff;
}
.claims-media{ position:relative; min-height:clamp(380px,40vw,860px); }
.claims-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.claims-body{ padding:clamp(48px,5vw,130px) clamp(28px,3.6vw,110px); }
.claims-body h2{ font-size:clamp(1.6rem,2.9vw,4.4rem); max-width:18ch; }
.claims-lede{ margin-top:var(--s3); color:rgba(255,255,255,.8); font-size:clamp(1rem,1.1vw,1.22rem); max-width:var(--prose); }
.claims-facts{ margin:clamp(32px,3vw,64px) 0 clamp(32px,3vw,60px); display:flex; flex-direction:column; gap:clamp(18px,1.8vw,32px); }
.claims-facts div{ display:grid; grid-template-columns:minmax(140px,.3fr) minmax(0,1fr); gap:var(--s3); align-items:baseline; }
.claims-facts dt{ color:var(--accent); font-weight:700; font-size:clamp(.95rem,1vw,1.1rem); }
.claims-facts dd{ margin:0; color:rgba(255,255,255,.86); font-size:clamp(.98rem,1.05vw,1.16rem); }

/* ═════════════════════════  FAQ  ════════════════════════ */
/* Two columns on wide screens: a full-bleed accordion row would put the
   toggle 2000px away from the question it belongs to. */
.faq{
  width:var(--wide); margin:var(--sec) auto 0;
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,4vw,120px); align-items:start;
}
.faq-head{ position:sticky; top:clamp(96px,8vw,150px); }
.faq-head h2{ font-size:clamp(1.8rem,3.4vw,4.8rem); max-width:14ch; }
.faq-head p{ margin-top:var(--s3); color:var(--muted); font-size:clamp(1rem,1.1vw,1.2rem); max-width:34ch; }
.faq-list{ min-width:0; }
.faq details{
  background:#fff; border-radius:var(--r);
  margin-bottom:clamp(10px,1vw,16px);
  box-shadow:0 18px 44px -34px rgba(15,14,12,.5);
  transition:box-shadow .18s ease-out;
}
.faq details[open]{ box-shadow:0 26px 56px -34px rgba(15,14,12,.6); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:clamp(20px,1.8vw,34px) clamp(20px,2vw,40px);
  font-weight:700; font-size:clamp(1rem,1.14vw,1.3rem);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  min-height:64px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:0 0 auto;
  font-family:var(--display); color:var(--accent);
  font-size:1.4em; line-height:1; transition:transform .2s ease-out;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--accent); }
.faq details p{
  padding:0 clamp(20px,2vw,40px) clamp(22px,2vw,36px);
  color:var(--muted); font-size:clamp(.98rem,1.06vw,1.16rem); max-width:var(--prose);
}

@media (max-width:1180px){
  .creds{ grid-template-columns:repeat(2,1fr); }
  .promise-grid{ grid-template-columns:1fr; }
}
@media (max-width:940px){
  .claims{ grid-template-columns:1fr; }
  .claims-media{ min-height:300px; }
  .claims-body{ padding:var(--s6) var(--gut); }
  .faq{ grid-template-columns:1fr; gap:var(--s5); }
  .faq-head{ position:static; }
}
@media (max-width:720px){
  .creds{ grid-template-columns:1fr; gap:var(--s4); }
  .claims-facts div{ grid-template-columns:1fr; gap:4px; }
  .hero-proof{ font-size:.92rem; }
}