/* ==========================================================================
   On Point Gutters design system (rev.02)

   Direction: the RoofGuard contractor layout language, rebuilt from scratch
   on the On Point brand. Nothing is lifted from that template's stylesheet.
   The one thing taken from it is the typeface name, Barlow Condensed, which
   is a free Google font and free to use.

   Carried over from rev.01 and still in force:
     Red is for actions and accents ONLY. It is never a reading surface.
     No decorative gradients. No grain. No glow. No fade-up-on-scroll.
     No licensing claim anywhere. Fully Insured and Free Estimates only.
   ========================================================================== */

:root{
  /* brand, as supplied */
  --ink:#050505;
  --blue:#344FB2;
  --red:#D6281D;
  --warm:#F5F1E9;

  /* derived. neutrals biased toward the blue, never pure grey */
  --ink-panel:#0B0D12;
  --ink-raise:#13161F;
  --line-dark:#262B3A;
  --line-light:#DCD6C8;
  --warm-sink:#EFEAE0;
  --mute-dark:#949AAC;
  --mute-light:#5A5D6B;
  --body-light:#24262E;

  --blue-lift:#5A77DD;
  --blue-deep:#26398A;
  --red-deep:#AE1F16;
  --red-lift:#E8483D;

  /* Barlow Condensed drives every heading, label and nav item. Barlow at
     normal width carries body copy, because condensed type at 17px over a
     paragraph is punishing. Same superfamily, so the pairing stays tight. */
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --font:'Barlow','Helvetica Neue',Arial,sans-serif;

  --wrap:1240px;
  --gutter:20px;
  --r-btn:3px;
  --step:clamp(60px,7.4vw,112px);
  --nav-h:148px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--warm);
  color:var(--body-light);
  font-family:var(--font);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
p{margin:0}  /* a <p> default margin is 1em of its own size; set spacing explicitly */
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blue-deep)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.on-dark :focus-visible{outline-color:var(--red-lift)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4{margin:0;font-family:var(--display);text-wrap:balance;color:var(--ink)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--warm)}

.display{
  font-weight:700;text-transform:uppercase;line-height:.96;
  letter-spacing:.004em;font-size:clamp(44px,7.4vw,96px);max-width:17ch;
}
.h2{font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:.006em;font-size:clamp(32px,4.6vw,58px)}
.h3{font-weight:600;line-height:1.14;font-size:clamp(22px,2.3vw,28px)}

/* The headline carries one phrase in red. Not decoration: the logo itself
   sets ON POINT GUTTERS in blue and SEAMLESS GUTTERS in red, so a two-tone
   headline is the identity's own logic at a larger size. */
.display em,.h2 em{font-style:normal;color:var(--red-lift)}
.band:not(.on-dark) .h2 em,.band--sink .h2 em{color:var(--red)}

/* Layered shadow so white type holds over photography and video. Three
   stops: contact edge, mid bloom, broad ambient. Echoes the keylines
   already drawn into the logo. */
.on-dark h1,.on-dark .h2,.hero h1{
  text-shadow:0 1px 1px rgba(0,0,0,.45),0 3px 12px rgba(0,0,0,.44),0 14px 48px rgba(0,0,0,.5);
}

/* Red rule to the left of a heading. The template's move, and it doubles as
   our gutter-line motif stood on its end. */
.barred{position:relative;padding-left:26px}
.barred::before{content:"";position:absolute;left:0;top:.08em;bottom:.08em;width:5px;background:var(--red)}
@media (max-width:620px){.barred{padding-left:18px}.barred::before{width:4px}}

.eyebrow{
  font-family:var(--display);font-size:clamp(15px,1.5vw,19px);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin:0 0 16px;
}
.on-dark .eyebrow{color:var(--red-lift)}

.lede{font-family:var(--font);font-size:clamp(17px,1.5vw,19px);line-height:1.68;max-width:60ch;margin:18px 0 0}
.on-dark .lede{color:#CFCBC2}
.prose{max-width:66ch}
.prose p{margin:0 0 1.05em}

/* ------------------------------------------------------- the gutter line */
.gline{position:relative;height:4px;background:var(--blue);border:0;margin:0}
.gline::after{content:"";position:absolute;top:0;left:clamp(28px,11%,150px);width:38px;height:4px;background:var(--red)}

/* -------------------------------------------------------- the drop shape */
/* Pointed-bottom tab behind icons and numbers. The template uses a pennant;
   ours reads as the water drop already drawn into the logo. */
.drop{
  width:74px;height:74px;display:grid;place-items:center;background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);color:#fff;flex:0 0 auto;
}
.drop svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drop--sm{width:54px;height:54px}
.drop--sm svg{width:23px;height:23px}

/* --------------------------------------------------------------- surfaces */
.band{padding-block:var(--step)}
.band--dark{background:var(--ink);color:#C4C0B7}
.band--panel{background:var(--ink-panel);color:#C4C0B7}
.band--sink{background:var(--warm-sink)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-size:17px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  padding:16px 30px;border:2px solid transparent;border-radius:var(--r-btn);
  text-decoration:none;cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
.btn--call{background:var(--red);border-color:var(--red);color:#fff}
.btn--call:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.btn--ghost{background:transparent;border-color:rgba(245,241,233,.45);color:var(--warm)}
.btn--ghost:hover{border-color:var(--warm);background:rgba(245,241,233,.1);color:var(--warm)}
.btn--solid{background:var(--ink);border-color:var(--ink);color:var(--warm)}
.btn--solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------------------------------------------------------------- utility */
.util{background:var(--ink);position:relative;z-index:210}
.util__in{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-block:11px;flex-wrap:wrap;
  font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.06em}
.util__area{color:#B4B9C8;text-transform:uppercase}
.util__area b{color:var(--warm);font-weight:600}
.util__tel{color:var(--warm);text-decoration:none;font-weight:600;white-space:nowrap;text-transform:uppercase;letter-spacing:.07em}
.util__tel:hover{color:var(--red-lift)}

/* -------------------------------------------------------------------- nav */
/* Transparent, sitting over the hero. That is what lets the logo and the
   menu items grow without eating vertical space. */
.nav{position:absolute;inset-inline:0;top:0;z-index:200;background:transparent;border:0}
.nav__in{display:flex;align-items:center;gap:26px;min-height:var(--nav-h)}
.nav__logo{flex:0 0 auto}
.nav__logo img{width:clamp(184px,20vw,248px);height:auto}
.nav__links{display:flex;gap:30px;margin-inline-start:auto;align-items:center}
.nav__links a{
  color:var(--warm);text-decoration:none;font-family:var(--display);
  font-size:21px;font-weight:600;letter-spacing:.015em;white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.nav__links a:hover{color:var(--red-lift)}
.nav__cta{margin-inline-start:6px;padding:14px 26px;font-size:16px;text-shadow:none}
.nav__burger{display:none;margin-inline-start:auto;background:rgba(5,5,5,.5);border:1px solid rgba(245,241,233,.35);
  color:var(--warm);padding:11px 16px;border-radius:var(--r-btn);font-family:var(--display);
  font-size:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* Pages with no photo hero need the bar to carry its own ground. */
.nav--solid{position:relative;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.nav--solid .nav__links a{text-shadow:none}

@media (max-width:1223px){
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;inset-inline:0;top:100%;background:var(--ink);
    border-top:1px solid var(--line-dark);border-bottom:4px solid var(--red);padding:6px var(--gutter) 22px;
  }
  .nav__links.is-open a{padding-block:15px;border-bottom:1px solid var(--line-dark);font-size:22px;text-shadow:none}
  .nav__links.is-open .nav__cta{margin-top:16px;border-bottom:0}
  .nav__burger{display:block}
}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--ink);min-height:clamp(560px,86vh,880px);display:flex;align-items:center}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.hero__veil{position:absolute;inset:0;z-index:1;background:rgba(5,5,5,.56)}
.hero__in{padding-block:calc(var(--nav-h) + 28px) clamp(52px,7vw,92px);width:100%;position:relative;z-index:2}
.hero .lede{max-width:48ch;color:#DEDAD1}
.hero__foot{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:30px;
  font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#B4B9C8}
.hero__foot b{color:var(--warm);font-weight:600}

/* ------------------------------------------------------ service-area check */
.areacheck{margin-top:36px;max-width:560px}
.areacheck__label{font-family:var(--display);font-size:17px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--warm);font-weight:600;display:block;margin-bottom:11px}
.areacheck__row{display:flex;gap:8px;flex-wrap:wrap}
.areacheck__field{position:relative;flex:1 1 250px;min-width:0}
.areacheck__in{width:100%;padding:16px 17px;font-family:var(--font);font-size:16px;
  background:rgba(5,5,5,.62);color:var(--warm);border:2px solid rgba(245,241,233,.34);border-radius:var(--r-btn)}
.areacheck__in::placeholder{color:#9398AC}
.areacheck__in:focus{border-color:var(--red);background:rgba(5,5,5,.78);outline:none}
.areacheck__list{position:absolute;inset-inline:0;top:calc(100% + 5px);z-index:40;background:var(--ink-raise);
  border:1px solid var(--line-dark);max-height:264px;overflow-y:auto;padding:5px;margin:0;list-style:none}
.areacheck__list[hidden]{display:none}
.areacheck__list button{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;padding:11px 13px;
  color:var(--warm);font-family:var(--font);font-size:15.5px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.areacheck__list button:hover,.areacheck__list button:focus-visible{background:var(--red)}
.areacheck__list .cty{font-family:var(--display);font-size:13px;color:var(--mute-dark);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.areacheck__list button:hover .cty{color:#F4D9D6}
.areacheck__msg{margin-top:12px;font-size:15px;color:#D5D1C8;min-height:1.4em}
.areacheck__msg a{color:var(--red-lift);font-weight:600}
.areacheck__msg.is-miss{color:#E7B9B4}

/* ------------------------------------------------------------ stat ribbon */
/* Red boxes over a darkened photograph. Every figure is verifiable from the
   service-area data. No invented counts, no fictional years. */
.stats{position:relative;background:var(--ink);isolation:isolate;padding-block:clamp(40px,4.6vw,66px)}
.stats__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.stats__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.stats__veil{position:absolute;inset:0;z-index:-1;background:rgba(5,5,5,.66)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:860px){.stats__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.stats__grid{grid-template-columns:1fr}}

/* Landscape, not square. The content stack is tight on purpose: icon, then
   the figure, then the label, with nothing floating in between. */
.stat{
  background:var(--red);color:#fff;text-align:center;
  padding:24px 18px 22px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;min-height:0;
  border-bottom:4px solid rgba(5,5,5,.28);
}
.stat svg{width:40px;height:40px;margin:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.stat__n{font-family:var(--display);font-size:clamp(50px,5.6vw,68px);font-weight:700;line-height:.9;letter-spacing:.005em;margin:0}
.stat__l{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0;color:#FCE7E5}

/* ---------------------------------------------------------------- section */
.shead{margin-bottom:44px;max-width:74ch}
.shead--c{margin-inline:auto;text-align:center}
.shead .lede{color:var(--mute-light)}
.on-dark .shead .lede{color:#B6BAC7}
.shead--c .lede{margin-inline:auto}

/* --------------------------------------------------------------- services */
/* Black cards on the light band, red rule across the top, drop tab breaking
   the photo edge. A card always inverts against its ground. */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1100px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svcs{grid-template-columns:1fr}}
.svc{background:var(--ink);display:flex;flex-direction:column;text-decoration:none;color:#B6BAC7;
  border-top:4px solid var(--red);position:relative;transition:transform .16s ease}
.svc:hover{transform:translateY(-4px)}
.svc:hover .svc__name{color:var(--red-lift)}
.svc__media{position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;background:var(--ink-raise)}
.svc__media img{width:100%;height:100%;object-fit:cover;opacity:.88}
.svc .drop{position:absolute;top:0;left:22px;z-index:2}
.svc__body{padding:26px 24px 30px;display:flex;flex-direction:column;flex:1}
.svc__n{font-family:var(--display);font-size:15px;letter-spacing:.14em;color:var(--mute-dark);display:block;margin-bottom:8px}
.svc__name{font-family:var(--display);font-size:27px;font-weight:700;text-transform:uppercase;line-height:1.04;color:var(--warm);letter-spacing:.006em}
.svc__d{font-size:15.5px;color:#A9AEBE;margin:12px 0 0;line-height:1.6}
.svc__go{margin-top:auto;padding-top:20px;font-family:var(--display);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-lift);font-weight:600}

/* --------------------------------------------------------------- spec tag */
.spec{position:absolute;bottom:10px;right:10px;background:rgba(5,5,5,.88);color:#E2E6F2;
  font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-left:3px solid var(--red)}

/* ------------------------------------------------------------- split rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,68px);align-items:center}
.split--narrow{grid-template-columns:1.08fr .92fr}
@media (max-width:880px){.split,.split--narrow{grid-template-columns:1fr}}
.frame{position:relative;border:4px solid var(--line-dark);margin:0}
.band:not(.on-dark) .frame{border-color:var(--line-light)}
.frame img{width:100%}

/* -------------------------------------------------------------- checklist */
.checks{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:22px}
.checks li{display:flex;gap:18px;align-items:flex-start;font-size:16.5px;line-height:1.6}
.checks li .drop{margin-top:2px}
.on-dark .checks li{color:#BFC3D0}
.checks b{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:.005em;display:block;margin-bottom:3px;color:var(--ink)}
.on-dark .checks b{color:var(--warm)}

/* ------------------------------------------------------------------ steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--ink);border-top:4px solid var(--red);padding:26px 24px 30px;position:relative;overflow:hidden}
.step__n{position:absolute;top:14px;right:14px;font-family:var(--display);font-size:66px;font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(245,241,233,.22);letter-spacing:.01em}
.step .drop{margin-bottom:18px}
.step__t{font-family:var(--display);font-size:23px;font-weight:600;color:var(--warm);line-height:1.1;position:relative;margin:0}
.step__d{font-size:15.5px;color:#A4A9B9;margin:10px 0 0;line-height:1.6}

/* ---------------------------------------------------------------- gallery */
.gal{columns:4 258px;column-gap:16px}
.gal figure{margin:0 0 16px;break-inside:avoid;position:relative;border:3px solid var(--line-dark)}
.gal img{width:100%}
.gal figcaption{font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute-dark);padding:11px 13px;border-top:1px solid var(--line-dark);background:var(--ink-panel)}

/* ----------------------------------------------------------- county cards */
.counties{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.counties{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.counties{grid-template-columns:1fr}}
.county{background:var(--warm);border-top:4px solid var(--blue);padding:26px 24px 30px;
  border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.county__k{font-family:var(--display);font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);font-weight:600;display:block;margin-bottom:7px}
.county__t{font-family:var(--display);font-size:26px;font-weight:700;text-transform:uppercase;color:var(--ink);line-height:1.04;margin:0}
.county__d{font-size:15.5px;color:var(--mute-light);margin:11px 0 0;line-height:1.6}
.county__l{margin:15px 0 0;padding:0;list-style:none;font-size:15.5px;line-height:1.9}
.county__l a{color:var(--blue);text-decoration:none}
.county__l a:hover{text-decoration:underline}

/* -------------------------------------------------------------------- faq */
.faq{border-top:2px solid var(--line-light);max-width:900px}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{cursor:pointer;list-style:none;padding:24px 50px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(21px,2.1vw,25px);font-weight:600;color:var(--ink);line-height:1.22}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:20px;font-family:var(--display);font-size:30px;color:var(--red);font-weight:600;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--red)}
.faq__a{padding:0 0 26px;max-width:72ch;color:var(--mute-light);font-size:16.5px}
.faq__a p{margin:0 0 .9em}
.faq__a p:last-child{margin:0}

/* ------------------------------------------------------------------- form */
.quote{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,72px);align-items:start}
@media (max-width:880px){.quote{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--display);font-size:15px;letter-spacing:.11em;text-transform:uppercase;color:#B4B9C8;margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:15px 16px;font-family:var(--font);font-size:16px;
  background:rgba(245,241,233,.07);color:var(--warm);border:2px solid rgba(245,241,233,.26);border-radius:var(--r-btn)}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline:none;background:rgba(245,241,233,.12)}
.field select option{background:var(--ink-raise);color:var(--warm)}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.fieldrow{grid-template-columns:1fr}}
.formnote{font-size:14px;color:var(--mute-dark);margin:14px 0 0;line-height:1.5}

/* ------------------------------------------------------------ breadcrumbs */
.crumbs{background:var(--ink-panel);border-bottom:1px solid var(--line-dark);padding-block:14px;
  font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.crumbs a{color:var(--mute-dark);text-decoration:none}
.crumbs a:hover{color:var(--warm)}
.crumbs span[aria-current]{color:var(--warm)}
.crumbs__sep{color:var(--red);margin-inline:10px}

/* ------------------------------------------------------------- split hero */
.shero{position:relative;background:var(--ink);isolation:isolate;padding-block:clamp(44px,5.6vw,80px)}
.shero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4.6vw,64px);align-items:center}
@media (max-width:920px){.shero__in{grid-template-columns:1fr}}
.shero h1{font-size:clamp(38px,5.6vw,72px);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:.004em;max-width:16ch}
.shero .lede{max-width:52ch}
.shero__fig{margin:0;position:relative;border:4px solid var(--line-dark)}
.shero__fig img{width:100%}

/* ----------------------------------------------------------- pills / a-z */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.pills a{display:inline-block;border:2px solid var(--line-light);padding:11px 18px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r-btn);background:var(--warm)}
.pills a:hover{border-color:var(--red);color:var(--red)}
.on-dark .pills a{border-color:var(--line-dark);color:#C9CEE0;background:transparent}
.on-dark .pills a:hover{border-color:var(--red);color:var(--red-lift)}

/* One cell per county, not one continuous text flow. As a 4-up column flow
   the six counties ran as a single stream, so Ulster started halfway down
   column 3 under Sullivan while columns 1-2 sat half empty, and the block
   stood 2657px tall. A grid gives every county its own cell with its heading
   on the row's top line; the towns then flow into two sub-columns inside that
   cell, which halves each county's depth. Same 230 links, ~1570px. */
.azgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:34px 30px;margin-top:8px}
.azgrid section{min-width:0}
.azgrid h3{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:9px}
.azgrid ul{list-style:none;margin:0;padding:0;font-size:16px;line-height:1.95;
  columns:2 150px;column-gap:22px}
.azgrid li{break-inside:avoid}
.azgrid a{color:var(--body-light);text-decoration:none}
.azgrid a:hover{color:var(--red);text-decoration:underline}

/* ----------------------------------------------------------------- footer */
.foot{background:var(--ink);color:#A4A9B9;padding-block:58px 36px;border-top:4px solid var(--red)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
@media (max-width:880px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__logo{width:232px;margin-bottom:20px}
.foot h4{font-family:var(--display);font-size:16px;letter-spacing:.13em;text-transform:uppercase;color:var(--warm);margin-bottom:14px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;font-size:16px;line-height:2}
.foot a{color:#A4A9B9;text-decoration:none}
.foot a:hover{color:var(--red-lift)}
.foot__tel{font-family:var(--display);font-size:34px;font-weight:700;color:var(--warm);text-decoration:none;display:inline-block;letter-spacing:.01em}
.foot__tel:hover{color:var(--red-lift)}
.foot__base{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--display);font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute-dark)}

/* -------------------------------------------------------- mobile callbar */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;inset-inline:0;bottom:0;z-index:90;
    background:var(--ink);border-top:3px solid var(--red);padding-bottom:env(safe-area-inset-bottom,0px)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:17px 10px;text-decoration:none;
    font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
  .callbar__tel{background:var(--red);color:#fff}
  .callbar__quote{background:transparent;color:var(--warm)}
  body{padding-bottom:66px}
}

/* ----------------------------------------------------------- a11y/motion */
.skip{position:absolute;left:-9999px;top:0;background:var(--warm);color:var(--ink);padding:12px 18px;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero__media video{display:none}
  .svc:hover{transform:none}
}

/* A clip inside a frame, not a background. It plays where its subject is the
   point, rather than looping under headline text. */
.frame video{width:100%;height:auto;display:block}

/* ======================= rev.03 ========================================= */

/* ------------------------------------------------ utility bar, split ---- */
/* Black on the left, a hard diagonal, then red carrying the trust line.
   The reference puts social icons in the red zone; this client has none we
   can verify, so it carries what we can actually stand behind instead. */
.util{background:var(--ink);overflow:hidden}
.util__in{position:relative;padding-block:0;min-height:46px;gap:0}
.util__left{display:flex;align-items:center;gap:26px;padding-block:12px;z-index:2}
.util__right{position:relative;display:flex;align-items:center;gap:20px;padding-block:12px;padding-left:46px;z-index:2;color:#fff}
.util__right::before{
  content:"";position:absolute;top:-10px;bottom:-10px;left:0;right:-100vw;
  background:var(--red);transform:skewX(-22deg);transform-origin:top left;z-index:-1;
}
.util__right b{font-weight:600;color:#fff}
@media (max-width:860px){
  .util__right{padding-left:0}
  .util__right::before{display:none}
  .util__in{flex-direction:column;align-items:flex-start;gap:0}
  .util__right{border-top:1px solid var(--line-dark);width:100%;padding-block:9px}
}

/* ------------------------------------------------------- nav, scrolled -- */
.nav__cta{border-radius:10px}
.nav{transition:background-color .2s ease,box-shadow .2s ease}
.nav.is-stuck{
  position:fixed;top:0;background:var(--ink);border-bottom:3px solid var(--red);
  box-shadow:0 10px 30px rgba(0,0,0,.42);animation:navdrop .22s ease both;
}
.nav.is-stuck .nav__in{min-height:92px}
.nav.is-stuck .nav__logo img{width:clamp(164px,16vw,196px)}
.nav.is-stuck .nav__links a{text-shadow:none}
@keyframes navdrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.nav.is-stuck{animation:none}}

/* --------------------------------------------- services, photo overlay -- */
/* The whole card is the photograph. Copy sits on it under a dark wash, the
   drop tab breaks the top edge, and the action is a filled red button. */
.svcs{gap:24px}
.svc{
  background:var(--ink);border-top:0;overflow:hidden;position:relative;
  min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px 26px 30px;text-decoration:none;isolation:isolate;
}
.svc__media{position:absolute;inset:0;z-index:-2;aspect-ratio:auto;overflow:hidden}
.svc__media img{width:100%;height:100%;object-fit:cover;opacity:1}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,5,5,.68)}
.svc:hover::after{background:rgba(5,5,5,.58)}
.svc .drop{position:absolute;top:0;left:26px;z-index:3}
.svc__body{padding:0;display:block;flex:0 0 auto}
.svc__n{display:none}
.svc__name{font-size:30px;margin-bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.svc__d{color:#D3D6E0;margin:0 0 20px;font-size:15.5px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.svc__go{
  margin:0;padding:12px 22px;display:inline-flex;align-self:flex-start;
  background:var(--red);color:#fff;border-radius:10px;font-size:15px;letter-spacing:.08em;
  transition:background-color .14s ease;
}
.svc:hover .svc__go{background:var(--red-deep)}
.svc:hover .svc__name{color:var(--warm)}
.svc .spec{bottom:auto;top:16px;right:14px}
@media (max-width:620px){.svc{min-height:360px}}

/* -------------------------------------------------- why-us, diagonal --- */
/* Dark panel and photograph meeting on a hard diagonal. On narrow screens
   the diagonal is dropped and the two simply stack. */
.why{position:relative;background:var(--ink);color:#BFC3D0;overflow:hidden;isolation:isolate}
.why__media{position:absolute;inset:0;z-index:-2}
.why__media img{width:100%;height:100%;object-fit:cover}
.why__cut{
  position:absolute;inset:0;z-index:-1;background:rgba(5,5,5,.93);
  clip-path:polygon(0 0,56% 0,44% 100%,0 100%);
}
.why__in{padding-block:var(--step);max-width:min(620px,52%)}
.why__list{margin:34px 0 0;padding:0;list-style:none;display:grid;gap:26px}
.why__list li{display:flex;gap:20px;align-items:flex-start}
.why__t{font-family:var(--display);font-size:24px;font-weight:600;color:var(--warm);line-height:1.1;margin:0 0 6px}
.why__d{margin:0;font-size:15.5px;line-height:1.6;color:#AEB3C4;max-width:46ch}
@media (max-width:980px){
  .why__cut{clip-path:none;background:rgba(5,5,5,.86)}
  .why__in{max-width:none}
}

/* ------------------------------------------------------ gallery, even --- */
/* A straight grid. Masonry left ragged bottoms, and 40 of 60 photos being
   portrait made the rag worse, not better. Uniform tiles line up. */
.gal{columns:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1040px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.gal{grid-template-columns:1fr}}
.gal figure{margin:0;border:0;position:relative;overflow:hidden;background:var(--ink-raise)}
.gal figure::after{content:"";position:absolute;inset:0;border:3px solid var(--line-dark);pointer-events:none}
.gal picture{display:block;aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.gal figcaption{
  position:absolute;inset-inline:0;bottom:0;background:linear-gradient(to top,rgba(5,5,5,.92),rgba(5,5,5,0));
  border:0;padding:30px 14px 12px;color:#E2E6F2;
}
/* Every tile the same. Even beats clever here. */

/* ======================= rev.04: hero composition ====================== */
/* Measured at 913px, 1.11 viewports, with content filling only the left 57%.
   Three changes: the stack splits into two columns so the right half carries
   the town checker instead of empty photograph; the trust line comes out,
   being already stated in the utility bar; and the top padding stops
   clearing the nav twice. */

.hero{min-height:clamp(520px,74vh,760px)}
.hero__in{
  padding-block:calc(var(--nav-h) + 10px) clamp(44px,5.4vw,72px);
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(30px,4.6vw,66px);align-items:center;
}
@media (max-width:1040px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero{min-height:0}
}
.hero__copy .lede{max-width:44ch}

/* The checker earns the right-hand column. It is the thing standing in for
   the address a service-area business cannot publish, so it should look
   like a tool rather than a field tacked under the buttons. */
.herocard{
  background:rgba(5,5,5,.86);border:1px solid var(--line-dark);
  border-top:4px solid var(--red);padding:30px 28px 28px;
  backdrop-filter:blur(2px);
}
.herocard__k{
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red-lift);margin:0 0 10px;
}
.herocard__t{
  font-family:var(--display);font-size:clamp(26px,2.5vw,33px);font-weight:700;
  text-transform:uppercase;line-height:1.02;color:var(--warm);margin:0 0 12px;
}
.herocard__d{font-size:15.5px;line-height:1.6;color:#AEB3C4;margin:0 0 20px}
.herocard .areacheck{margin:0;max-width:none}
.herocard .areacheck__label{display:none}
.herocard .areacheck__row{flex-direction:column;gap:10px}
.herocard .areacheck__field{flex:1 1 auto;width:100%}
.herocard .areacheck__row .btn{width:100%}
.herocard__n{font-size:14px;color:var(--mute-dark);margin:16px 0 0;line-height:1.5}
.herocard__n a{color:var(--red-lift);font-weight:600;text-decoration:none}
.herocard__n a:hover{text-decoration:underline}

/* ======================= rev.05: eyebrow keyline ====================== */
/* The logo sets GUTTERS in blue with a broad white keyline. The eyebrows now
   do the same, which pulls the identity into the type instead of leaving it
   stranded in the logo.
   paint-order puts the stroke behind the fill, so the letterform stays whole
   rather than the stroke eating into it from both sides. Without it the text
   would simply render thinner, which is a safe fallback. */
.eyebrow{
  color:var(--blue);
  -webkit-text-stroke:3px var(--warm);
  paint-order:stroke fill;
}
/* On a light ground a white keyline has nothing to separate from, so it only
   makes the letterform fuzzy. Blue alone there, which also takes red back to
   being actions only. */
.band:not(.on-dark) .eyebrow,
.band--sink .eyebrow,
.shead:not(.on-dark) .eyebrow{
  -webkit-text-stroke:0;
  color:var(--blue);
}
.on-dark .eyebrow{color:var(--blue);-webkit-text-stroke:3px var(--warm)}

/* the card label is an eyebrow by another name */
.herocard__k{color:var(--blue);-webkit-text-stroke:2.5px var(--warm);paint-order:stroke fill}

/* ---------------------------------------------- utility bar, red rule --- */
/* The reference runs a red edge the full width of the bar: a thin rule under
   the black on the left, continuing into the solid red block on the right,
   where it merges invisibly. One border does both.
   It sits outside the padding box, so overflow:hidden still clips the skewed
   red shape without clipping this. */
.util{border-bottom:3px solid var(--red)}


/* ------------------------------------------- stat ribbon, drawn ground --- */
/* The band is roughly 4.3:1 and every photo in the library is 4:3, so any
   photograph here loses two thirds of its height and reads as a random slice
   through a building. A drawn pattern cannot crop: unbroken runs carrying
   evenly spaced hangers, which is the product and the "0 seams" figure in
   the same mark. */
.stats{background:var(--ink)}
.stats__media{
  background:url("/assets/img/pattern-run.svg") repeat 0 0;
  background-size:240px 120px;
}
.stats__media img{display:none}
.stats__veil{background:none}
/* a seam of brand color along the top edge, so the band is announced */
.stats::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--blue);z-index:2}
.stats::after{content:"";position:absolute;top:0;left:clamp(28px,11%,150px);width:38px;height:3px;background:var(--red);z-index:3}

/* ======================= rev.06: motion + interior template =========== */
/* Motion rule for this site: it answers an action. Nothing fades in on
   scroll, because an entrance on every section is the generated-page tell
   and it hides content from anyone who lands mid-page. Everything below
   responds to hover, focus or a toggle. */

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

/* ---- button sheen ----------------------------------------------------- */
/* A light sweeps across the face on hover. It reads as metal catching the
   light, which is the material being sold. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-140%;
  inline-size:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  transform:skewX(-20deg);
  transition:inset-inline-start .55s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{inset-inline-start:140%}
.btn{transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)}
.btn:active{transform:translateY(1px)}

/* ---- nav: a rule wipes in under the link ------------------------------ */
.nav__links a:not(.btn){position:relative;padding-block:4px}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;block-size:2px;inline-size:0;
  background:var(--red);transition:inline-size .22s var(--ease);
}
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn):focus-visible::after{inline-size:100%}

/* ---- service card: the drop tab reacts with the card ------------------ */
.svc .drop,.svc__media img{transition:transform .3s var(--ease)}
.svc:hover .drop{transform:translateY(-3px)}
.svc:hover .svc__media img{transform:scale(1.035)}
.svc::after{transition:background-color .25s var(--ease)}
.svc__go{transition:background-color .16s var(--ease),transform .2s var(--ease)}
.svc:hover .svc__go{transform:translateX(3px)}

/* ---- gallery: the caption rises on hover ------------------------------ */
.gal figure img{transition:transform .4s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{transition:padding-bottom .22s var(--ease)}
.gal figure:hover figcaption{padding-bottom:16px}

/* ---- stat tiles: lift on hover ---------------------------------------- */
.stat{transition:transform .2s var(--ease)}
.stats__grid:hover .stat{opacity:.86;transition:opacity .2s var(--ease)}
.stats__grid .stat:hover{transform:translateY(-4px);opacity:1}

/* ---- county cards ------------------------------------------------------ */
.county{transition:border-top-color .2s var(--ease),transform .2s var(--ease)}
.county:hover{border-top-color:var(--red);transform:translateY(-3px)}

/* ---- FAQ: carded, with a square toggle -------------------------------- */
.faq{border-top:0;display:grid;gap:12px;max-width:940px}
.faq details{
  border:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  background:var(--warm);transition:border-color .2s var(--ease);
}
.faq details[open]{border-color:var(--red)}
.faq summary{
  display:flex;align-items:center;gap:18px;
  padding:0 22px 0 0;position:relative;
  font-size:clamp(19px,1.9vw,23px);line-height:1.25;
}
.faq summary::after{content:none}
.faq summary::before{
  content:"+";flex:0 0 auto;inline-size:56px;block-size:56px;
  display:grid;place-items:center;background:var(--red);color:#fff;
  font-family:var(--display);font-size:28px;font-weight:600;line-height:1;
  transition:transform .25s var(--ease),background-color .2s var(--ease);
}
.faq details[open] summary::before{content:"\2013";transform:rotate(180deg)}
.faq summary:hover::before{background:var(--red-deep)}
.faq__a{padding:4px 24px 24px 74px}
@media (max-width:560px){
  .faq summary{gap:14px}
  .faq summary::before{inline-size:46px;block-size:46px;font-size:24px}
  .faq__a{padding-left:24px}
}

/* ---- form fields answer focus ----------------------------------------- */
.field input,.field select,.field textarea,.areacheck__in{
  transition:border-color .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus,.areacheck__in:focus{
  box-shadow:0 0 0 3px rgba(214,40,29,.22);
}

/* ---- the drop tab, wherever it appears -------------------------------- */
.checks li .drop,.why__list .drop,.step .drop{transition:transform .25s var(--ease)}
.checks li:hover .drop,.why__list li:hover .drop{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .btn::after{display:none}
  .svc:hover .drop,.svc:hover .svc__media img,.gal figure:hover img,
  .stats__grid .stat:hover,.county:hover,.svc:hover .svc__go{transform:none}
  .faq details[open] summary::before{transform:none}
}

/* ======================= interior page template ======================== */
/* Sidebar plus main. The sidebar does the internal linking, which is what
   makes 230 town pages reachable, and carries a CTA that never scrolls away
   from the reader for long. */
.layout{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,3.6vw,52px);align-items:start}
@media (max-width:980px){.layout{grid-template-columns:1fr}}

.side{display:grid;gap:20px;position:sticky;top:116px}
@media (max-width:980px){.side{position:static}}

.sidecard{border:1px solid var(--line-light);background:var(--warm);border-top:4px solid var(--blue)}
.sidecard__h{
  font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);padding:18px 20px 14px;margin:0;
}
.sidecard ul{list-style:none;margin:0;padding:0 0 10px}
.sidecard li{border-top:1px solid var(--line-light)}
.sidecard a{
  display:flex;align-items:center;gap:13px;padding:14px 20px;text-decoration:none;
  color:var(--body-light);font-size:16px;font-weight:500;
  transition:background-color .16s var(--ease),color .16s var(--ease),padding-left .18s var(--ease);
}
.sidecard a:hover{background:var(--warm-sink);color:var(--red);padding-left:26px}
.sidecard a[aria-current]{color:var(--red);font-weight:600;background:var(--warm-sink)}
.sidecard a svg{inline-size:19px;block-size:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--red)}

/* the sidebar's ask */
.sideask{background:var(--ink);border-top:4px solid var(--red);padding:26px 22px 28px;color:#AEB3C4}
.sideask h3{font-family:var(--display);font-size:25px;font-weight:700;text-transform:uppercase;color:var(--warm);line-height:1.04;margin:0 0 10px}
.sideask p{font-size:15px;line-height:1.6;margin:0 0 18px}
.sideask .btn{width:100%}
.sideask__tel{
  display:block;margin-top:14px;text-align:center;font-family:var(--display);
  font-size:26px;font-weight:700;color:var(--warm);text-decoration:none;letter-spacing:.01em;
}
.sideask__tel:hover{color:var(--red-lift)}
.sideask__n{font-size:13.5px;color:var(--mute-dark);margin:12px 0 0;text-align:center}

/* blocks inside the main column of an interior page */
.blk{margin-bottom:clamp(38px,4.4vw,58px)}
.blk:last-child{margin-bottom:0}
.blk h2{margin-bottom:16px}
.blk .lede{margin-top:0}
.blk__fig{margin:0 0 26px;position:relative;border:4px solid var(--line-light)}
.blk__fig img{width:100%}
.blk__duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
@media (max-width:620px){.blk__duo{grid-template-columns:1fr}}
.blk__duo figure{margin:0;position:relative;border:3px solid var(--line-light);overflow:hidden}
.blk__duo img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s var(--ease)}
.blk__duo figure:hover img{transform:scale(1.04)}

/* checks: the drop tab beside a title and its line */
.checks li>div{display:block}
/* Scoped to the text wrapper on purpose. A bare `.checks li span` also matches
   the .drop icon tab, and at 0,1,2 it outranks .drop (0,1,0) — which replaced
   the drop's display:grid with block (pinning the svg to the top-left corner
   instead of centring it) and its white with the muted body colour, leaving a
   near-invisible grey glyph on the blue tab. */
.checks li>div span{display:block;color:inherit}
.band:not(.on-dark) .checks li>div span{color:var(--mute-light)}

/* A portrait source at full main-column width renders over 1100px tall and
   swallows the page. Constrain the lead image to a consistent band; width is
   stated explicitly because an aspect-ratio box with auto width resolves the
   clamp back into the width and renders narrow. */
.blk__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 42%}

/* The drop narrows to a point below 74% of its height, so its optical centre
   sits above the box centre. Padding the bottom lifts the icon into it. */
.drop{padding-bottom:14px}
.drop--sm{padding-bottom:11px}
.drop svg{width:32px;height:32px}
.drop--sm svg{width:24px;height:24px}

/* rev.02 set .faq details[open] summary::after, which is more specific than
   rev.06's reset on .faq summary::after, so the old marker kept rendering at
   the right edge of an open item. Kill it at matching specificity. */
.faq details[open] summary::after{content:none}

/* ======================= rev.07: symptom band ========================= */
/* Replaces the stat ribbon in the slot directly below the hero. People
   arrive with a symptom, not a service name, so this names the four
   symptoms and routes each to the service that fixes it. It also carries
   the language people actually search, which the figures did not. */
.symp{position:relative;background:var(--ink);padding-block:clamp(44px,5vw,74px)}
.symp__bg{
  position:absolute;inset:0;
  background:url("/assets/img/pattern-run.svg") repeat 0 0;background-size:240px 120px;
}
.symp::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--blue);z-index:2}
.symp::after{content:"";position:absolute;top:0;left:clamp(28px,11%,150px);width:38px;height:3px;background:var(--red);z-index:3}
.symp .wrap{position:relative;z-index:1}

.symp__head{text-align:center;margin-bottom:34px}
.symp__head h2{font-size:clamp(26px,3.2vw,40px)}

.symps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1040px){.symps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.symps{grid-template-columns:1fr}}

.symp__card{
  background:var(--ink-panel);border:1px solid var(--line-dark);border-top:4px solid var(--red);
  padding:26px 22px 24px;display:flex;flex-direction:column;gap:0;
  text-decoration:none;color:#A9AEBE;position:relative;
  transition:transform .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.symp__card:hover{transform:translateY(-4px);background:var(--ink-raise)}
.symp__card .drop{margin-bottom:18px}
.symp__card .drop,.symp__card .symp__go{transition:transform .25s var(--ease)}
.symp__card:hover .drop{transform:translateY(-3px)}
.symp__q{
  font-family:var(--display);font-size:22px;font-weight:700;text-transform:uppercase;
  line-height:1.06;color:var(--warm);margin:0 0 10px;letter-spacing:.005em;
}
.symp__card:hover .symp__q{color:var(--red-lift)}
.symp__d{font-size:15px;line-height:1.6;margin:0 0 18px}
.symp__go{
  margin-top:auto;font-family:var(--display);font-size:15px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red-lift);
}
.symp__card:hover .symp__go{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .symp__card:hover,.symp__card:hover .drop,.symp__card:hover .symp__go{transform:none}
}

/* Two of the four symptom titles run to two lines, which pushed their bodies
   out of line with the others. Reserve the second line on all of them. */
.symp__q{min-height:2.12em}
@media (max-width:560px){.symp__q{min-height:0}}

/* ---------------------------------------- town page service notes ------- */
.tnotes{display:grid;gap:26px;margin-top:4px}
.tnote{display:flex;gap:18px;align-items:flex-start}
.tnote__t{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink);line-height:1.1;margin:0 0 8px}
.tnote p{font-size:16px;line-height:1.65;color:var(--mute-light);margin:0 0 .7em}
.tnote p:last-of-type{margin-bottom:10px}
.tnote__go{
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);text-decoration:none;display:inline-block;
  transition:transform .2s var(--ease);
}
.tnote__go:hover{color:var(--red-deep);transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.tnote__go:hover{transform:none}}

/* ======================= rev.08: brief alignment ======================== */
/* The H1 becomes the keyword line, which is longer than a three-word
   headline, so the copy column widens and the display size steps down. The
   old headline survives below it as the tagline, which is what the brief
   asked for and keeps the one line anybody will remember. */
.hero__in{grid-template-columns:1.24fr .76fr}
@media (max-width:1040px){.hero__in{grid-template-columns:1fr}}
.hero .display{font-size:clamp(29px,4.1vw,56px);max-width:none;line-height:1.02;text-wrap:balance}
.tagline{
  font-family:var(--display);font-size:clamp(19px,2vw,25px);font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;color:var(--warm);
  margin:14px 0 0;padding-left:26px;position:relative;
}
.tagline::before{
  content:"";position:absolute;left:0;top:.52em;width:16px;height:2px;background:var(--red);
}
@media (max-width:620px){.tagline{padding-left:18px}}

/* a CTA band between sections, so the ask is never far from the reader */
.ctaband{background:var(--ink-panel);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding-block:clamp(34px,4vw,52px)}
.ctaband__in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ctaband p{margin:0;font-family:var(--display);font-size:clamp(21px,2.4vw,30px);font-weight:600;color:var(--warm);line-height:1.15;max-width:34ch}
.ctaband p em{font-style:normal;color:var(--red-lift)}
.ctaband .btnrow{margin:0;flex:0 0 auto}
/* five symptom cards: 5 across, then 3+2, then 2, then 1 */
.symps--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1240px){.symps--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.symps--5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.symps--5{grid-template-columns:1fr}}

/* ======================= rev.09: the quiz ============================== */
/* The slot below the hero used to signpost symptoms. It now captures the
   lead instead, asking the easy question first and the contact details last,
   which is the order people will actually answer in. */
.quiz{position:relative;background:var(--ink);padding-block:clamp(44px,5vw,76px)}
.quiz__bg{position:absolute;inset:0;background:url("/assets/img/pattern-run.svg") repeat;background-size:240px 120px}
.quiz::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--blue);z-index:2}
.quiz::after{content:"";position:absolute;top:0;left:clamp(28px,11%,150px);width:38px;height:3px;background:var(--red);z-index:3}
.quiz .wrap{position:relative;z-index:1}

.quiz__card{
  max-width:860px;margin-inline:auto;background:var(--ink-panel);
  border:1px solid var(--line-dark);border-top:4px solid var(--red);
  padding:clamp(26px,3.4vw,44px);
}

/* progress */
.quiz__bar{display:flex;gap:6px;margin-bottom:24px}
.quiz__bar span{flex:1;height:4px;background:var(--line-dark);transition:background-color .3s var(--ease)}
.quiz__bar span.is-done{background:var(--red)}
.quiz__bar[hidden]{display:none}

.quiz__step{display:none}
.quiz__step.is-active{display:block}

.quiz__k{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dark);margin:0 0 10px}
.quiz__q{font-family:var(--display);font-size:clamp(25px,3.1vw,38px);font-weight:700;text-transform:uppercase;line-height:1.04;color:var(--warm);margin:0 0 10px}
.quiz__q em{font-style:normal;color:var(--red-lift)}
.quiz__sub{font-size:16px;line-height:1.6;color:#AEB3C4;margin:0 0 22px;max-width:60ch}

/* option buttons */
.quiz__opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 6px}
@media (max-width:640px){.quiz__opts{grid-template-columns:1fr}}
.quiz__opt{
  display:flex;align-items:flex-start;gap:14px;text-align:left;width:100%;
  background:rgba(245,241,233,.04);border:2px solid var(--line-dark);
  border-radius:var(--r-btn);padding:16px 18px;cursor:pointer;color:var(--warm);
  font-family:var(--font);font-size:16px;line-height:1.45;
  transition:border-color .16s var(--ease),background-color .16s var(--ease),transform .16s var(--ease);
}
.quiz__opt:hover{border-color:var(--red);background:rgba(214,40,29,.1);transform:translateY(-2px)}
.quiz__opt.is-picked{border-color:var(--red);background:rgba(214,40,29,.16)}
.quiz__opt b{display:block;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.01em;margin-bottom:2px}
.quiz__opt small{display:block;color:#9BA1B2;font-size:14px;line-height:1.45}
.quiz__opt i{
  flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);padding-bottom:6px;
}
.quiz__opt i svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* fields */
.quiz__fields{display:grid;gap:14px;margin-bottom:6px}
.quiz__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.quiz__row{grid-template-columns:1fr}}
.quiz label{display:block;font-family:var(--display);font-size:14px;letter-spacing:.11em;text-transform:uppercase;color:#AEB3C4;margin-bottom:6px;font-weight:600}
.quiz input,.quiz select{
  width:100%;padding:15px 16px;font-family:var(--font);font-size:16px;
  background:rgba(5,5,5,.5);color:var(--warm);border:2px solid rgba(245,241,233,.28);border-radius:var(--r-btn);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.quiz input:focus,.quiz select:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(214,40,29,.22)}
.quiz input[aria-invalid="true"]{border-color:var(--red-lift);background:rgba(214,40,29,.1)}
.quiz select option{background:var(--ink-raise)}
.quiz__err{font-size:14px;color:#F0A9A2;margin:6px 0 0;min-height:1.2em}

.quiz__nav{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.quiz__back{
  background:none;border:0;color:var(--mute-dark);cursor:pointer;padding:8px 0;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.quiz__back:hover{color:var(--warm)}
.quiz__note{font-size:13.5px;color:var(--mute-dark);margin:14px 0 0;line-height:1.5}

/* the town field reuses the service-area index */
.quiz .areacheck__list{top:calc(100% + 4px)}
.quiz__field{position:relative}

/* sending and done */
.quiz__done{text-align:center;padding-block:10px}
.quiz__done .drop{margin:0 auto 18px}
.quiz__done h3{font-family:var(--display);font-size:clamp(27px,3.2vw,38px);font-weight:700;text-transform:uppercase;color:var(--warm);margin:0 0 10px}
.quiz__done p{color:#AEB3C4;font-size:16.5px;line-height:1.6;margin:0 auto 20px;max-width:48ch}
.quiz__spin{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:qspin .7s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}
.btn[disabled]{opacity:.72;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .quiz__opt:hover{transform:none}
  .quiz__spin{animation-duration:2s}
}

/* ======================= rev.10: the quiz becomes a side tab ============ */
/* It was taking a full section for an ask that is better always available
   than once. Now a tab pinned to the edge opens it as a drawer, so it is
   reachable from any scroll position and costs no page height. */

.quiztab{
  position:fixed;z-index:150;right:0;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;
  background:var(--red);color:#fff;border:0;cursor:pointer;
  font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:22px 13px;
  border-radius:4px 0 0 4px;
  box-shadow:-3px 0 16px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:12px;
  transition:background-color .16s var(--ease),padding .18s var(--ease);
}
.quiztab:hover,.quiztab:focus-visible{background:var(--red-deep);padding-right:19px}
.quiztab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
@media (max-width:860px){.quiztab{display:none}}

.quizveil{
  position:fixed;inset:0;z-index:299;background:rgba(5,5,5,.72);
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s;
}
.quizveil.is-open{opacity:1;visibility:visible}

.quizdrawer{
  position:fixed;z-index:300;top:0;right:0;height:100%;
  width:min(560px,100%);background:var(--ink-panel);
  border-left:4px solid var(--red);
  transform:translateX(102%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;
  box-shadow:-18px 0 50px rgba(0,0,0,.5);
}
.quizdrawer.is-open{transform:translateX(0)}
.quizdrawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;border-bottom:1px solid var(--line-dark);flex:0 0 auto;
}
.quizdrawer__head p{
  margin:0;font-family:var(--display);font-size:15px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--red-lift);
}
.quizclose{
  background:transparent;border:1px solid var(--line-dark);color:var(--warm);
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:var(--r-btn);
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.quizclose:hover{border-color:var(--red);background:rgba(214,40,29,.14)}
.quizclose svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.quizdrawer__body{flex:1 1 auto;overflow-y:auto;padding:24px 22px 32px;-webkit-overflow-scrolling:touch}

/* the card loses its frame inside the drawer, which already is one */
.quizdrawer .quiz__card{max-width:none;margin:0;background:none;border:0;padding:0}
.quizdrawer .quiz__opts{grid-template-columns:1fr}
.quizdrawer .quiz__q{font-size:clamp(24px,5vw,30px)}
.quizdrawer .quiz__row{grid-template-columns:1fr}

@media (prefers-reduced-motion:reduce){
  .quizdrawer,.quizveil{transition:none}
}

/* ---------------------------------------------------- contact page ----- */
.contact__tel{margin:22px 0 0}
.contact__tel a{
  font-family:var(--display);font-size:clamp(38px,5.4vw,62px);font-weight:700;
  color:var(--warm);text-decoration:none;letter-spacing:.01em;line-height:1;
  display:inline-block;transition:color .16s var(--ease);
}
.contact__tel a:hover{color:var(--red-lift)}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.cards3{grid-template-columns:1fr}}
.infocard{
  background:var(--warm);border:1px solid var(--line-light);border-top:4px solid var(--red);
  padding:26px 24px 28px;
}
.infocard__t{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-light);margin:18px 0 10px}
.infocard__big{
  font-family:var(--display);font-size:34px;font-weight:700;color:var(--ink);
  text-decoration:none;letter-spacing:.01em;line-height:1.05;display:inline-block;
}
a.infocard__big:hover{color:var(--red)}
.infocard__d{font-size:15.5px;line-height:1.6;color:var(--mute-light);margin:12px 0 0}
.infocard__d a{color:var(--blue)}
.infocard__list{list-style:none;margin:4px 0 0;padding:0;font-size:17px;line-height:2}
.infocard__list a{color:var(--ink);text-decoration:none;font-weight:500}
.infocard__list a:hover{color:var(--red)}

/* ======================= rev.11: picture fill ========================== */
/* <picture> is an inline element with no height of its own, so an img inside
   it set to height:100% has nothing to resolve against and falls back to its
   natural height. The image then sits centred in its container with the
   container's background showing above and below. Every wrapper that expects
   the image to fill needs the picture to be a filling block too.
   This was already fixed for the gallery and nowhere else. */
.svc__media picture,
.hero__media picture,
.why__media picture,
.stats__media picture{display:block;width:100%;height:100%}

/* framed photos size by width, so these only need to stop being inline */
.shero__fig picture,
.blk__fig picture,
.frame picture{display:block}

/* ======================= rev.12: blue carries the structure ============= */
/* The trailer is the reference and it is blue. Red appears on it exactly
   once, on the SEAMLESS GUTTERS line. The site had that inverted, with red
   doing the card rules, the icon tabs, the dividers and the borders.
   Structure moves to blue. Red keeps what it is actually for: the things you
   click, and the one accent phrase the logo itself sets in red. */

/* the icon tab, which appears more than any other element */
.drop{background:var(--blue)}

/* card and panel rules */
.svc{border-top-color:var(--blue)}
.step{border-top-color:var(--blue)}
.infocard{border-top-color:var(--blue)}
.sideask{border-top-color:var(--blue)}
.herocard{border-top-color:var(--blue)}
.quizdrawer{border-left-color:var(--blue)}
.foot{border-top-color:var(--blue)}
.callbar{border-top-color:var(--blue)}
.faq details[open]{border-color:var(--blue)}

/* dividers and markers */
.barred::before{background:var(--blue)}
.crumbs__sep{color:var(--blue-lift)}
.spec{border-left-color:var(--blue-lift)}

/* hover states that were signalling with red where blue reads better */
.county:hover{border-top-color:var(--blue-lift)}
.sidecard a:hover{color:var(--blue)}
.azgrid a:hover{color:var(--blue)}
.infocard__list a:hover{color:var(--blue)}
.pills a:hover{border-color:var(--blue);color:var(--blue)}
.on-dark .pills a:hover{border-color:var(--blue-lift);color:var(--blue-lift)}
.faq summary:hover{color:var(--blue)}

/* RED STAYS, and only here:
   every .btn--call, the quiz tab, the mobile call button, the FAQ toggle
   square, the nav hover rule, the link arrows, the form focus ring, the one
   red tick on the gutter line, and the accent phrase in a headline. */

/* ======================= rev.13: new mark, and more blue =============== */
/* The 2026 mark is squarer than the old one, 1.64:1 against 2.2:1, so the
   bar is sized from it again rather than letting it overflow. */
:root{--nav-h:160px}
.nav__logo img{width:clamp(172px,18vw,230px)}
.nav.is-stuck .nav__logo img{width:clamp(150px,15vw,196px)}
.nav.is-stuck .nav__in{min-height:104px}
.foot__logo{width:240px}

/* More blue through the hero. The logo sets GUTTERS in blue and only the
   SEAMLESS GUTTERS descriptor in red, so the headline's own accent follows
   the name, not the descriptor. */
.hero .display em{color:var(--blue-lift)}
.tagline::before{background:var(--blue)}

/* the utility bar's diagonal is the trailer's blue swoosh, not a red one */
.util__right::before{background:var(--blue)}
.util__right b{color:#fff}

/* the town check is a secondary action beside the call, so it reads blue */
.herocard .areacheck__row .btn--call{background:var(--blue);border-color:var(--blue)}
.herocard .areacheck__row .btn--call:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.areacheck__in:focus{border-color:var(--blue-lift);box-shadow:0 0 0 3px rgba(52,79,178,.3)}
.areacheck__list button:hover,.areacheck__list button:focus-visible{background:var(--blue)}

/* RED NOW APPEARS ONLY ON: the call buttons, the quiz tab, the mobile call
   bar, inline tel links, the FAQ toggle, link arrows, and the single tick on
   the gutter line. */

/* The nav takes a lockup cut from the mark: roof, ON POINT and GUTTERS only.
   The descriptor, the phone and the wave come off, because at nav size none
   of them is legible and the site states all three elsewhere. 3.17:1, so the
   bar returns to a normal height. The footer keeps the whole mark. */
:root{--nav-h:118px}
.nav__logo img{width:clamp(176px,19vw,234px);height:auto}
.nav.is-stuck .nav__logo img{width:clamp(154px,16vw,196px)}
.nav.is-stuck .nav__in{min-height:88px}
.foot__logo{width:260px}

/* ON POINT is drawn as a navy outline with no fill, so on a dark ground it
   disappears and only GUTTERS survives on its white keyline. The artwork was
   made for white signage, so the nav gives it white signage: a plate behind
   the mark. It reads as a sign panel, which suits the trade, and it means the
   real artwork can be used rather than a redrawn substitute. */
.nav__logo{
  background:var(--warm);
  padding:11px 18px;
  border-radius:var(--r-btn);
  border-bottom:3px solid var(--blue);
  display:block;line-height:0;
  transition:border-color .16s var(--ease);
}
.nav__logo:hover{border-bottom-color:var(--red)}
.nav.is-stuck .nav__logo{padding:8px 14px}
@media (max-width:1223px){.nav__logo{padding:9px 14px}}

/* the footer ground is dark too, so the full mark gets the same treatment */
.foot__logo{background:var(--warm);padding:14px 18px;border-radius:var(--r-btn);border-bottom:3px solid var(--blue);box-sizing:content-box}

/* The whole mark, not a crop of it. It is 1.64:1 so the bar is sized from it
   again. The plate stays because ON POINT is a navy outline with no fill and
   simply vanishes on a dark ground without one. */
:root{--nav-h:172px}
.nav__logo img{width:clamp(196px,21vw,248px);height:auto}
.nav__logo{padding:10px 16px}
.nav.is-stuck .nav__logo img{width:clamp(164px,17vw,200px)}
.nav.is-stuck .nav__logo{padding:7px 12px}
.nav.is-stuck .nav__in{min-height:140px}
.hero__in{padding-block:calc(var(--nav-h) + 22px) clamp(44px,5.4vw,72px)}

/* No plate. Just the mark on the bar. */
.nav__logo{background:none;padding:0;border:0;border-radius:0}
.nav.is-stuck .nav__logo{padding:0}
.foot__logo{background:none;padding:0;border:0;border-radius:0}

/* The full mark carries a descriptor and a phone number, so it needs more
   width than a wordmark would before those stop being mush. */
:root{--nav-h:196px}
.nav__logo img{width:clamp(210px,24vw,288px)}
.nav.is-stuck .nav__logo img{width:clamp(176px,19vw,224px)}
.nav.is-stuck .nav__in{min-height:152px}
.hero__in{padding-block:calc(var(--nav-h) + 20px) clamp(44px,5.4vw,72px)}

/* ======================= rev.14: true colour logo ====================== */
/* The logo goes in exactly as drawn. No recolouring: lifting the navy
   changed the brand blue, which was the wrong trade.
   The legibility problem was never the flat bar, where it reads fine. It was
   the bar being transparent over a mid-blue metal roof, which is the low
   contrast case for navy. So the top of the hero gets a scrim. That helps
   the nav links and the eyebrow too, and it is not a box around the mark. */
.hero__veil{
  background:
    linear-gradient(to bottom,
      rgba(5,5,5,.90) 0,
      rgba(5,5,5,.78) calc(var(--nav-h) * .55),
      rgba(5,5,5,.60) calc(var(--nav-h) * .9),
      rgba(5,5,5,.50) calc(var(--nav-h) + 30px),
      rgba(5,5,5,.56) 100%);
}

/* ======================= rev.15: outlined mark ========================= */
/* The mark now carries white outlines on both words and has dropped the
   phone number, so it holds its own contrast and no longer needs the
   photograph crushed behind it. Scrim comes back down to what the headline
   needs rather than what the logo needed. */
.hero__veil{
  background:linear-gradient(to bottom,
    rgba(5,5,5,.66) 0,
    rgba(5,5,5,.56) calc(var(--nav-h) * .8),
    rgba(5,5,5,.54) 100%);
}
/* Without ten digits to resolve, the mark reads at a smaller size, so the
   bar tightens back up. */
:root{--nav-h:176px}
.nav__logo img{width:clamp(196px,22vw,264px)}
.nav.is-stuck .nav__logo img{width:clamp(168px,18vw,212px)}
.nav.is-stuck .nav__in{min-height:140px}
.hero__in{padding-block:calc(var(--nav-h) + 18px) clamp(44px,5.4vw,72px)}

/* The card's label was sitting two sizes below the eyebrows elsewhere on the
   page, which made it read as fine print rather than a section label. */
.herocard__k{font-size:17px;letter-spacing:.13em;-webkit-text-stroke:3px var(--warm);margin-bottom:12px}

/* ============ rev.13: mobile legibility (11 Nov, launch day) ============ */

/* 1. THE TOP BAR. .util__left is a flex row, and its three runs were bare
   text nodes, so each became its own anonymous flex item. On a phone that
   is three narrow columns each wrapping inside itself: the bar ate 165px
   above the fold and read as a jumble. The runs are real spans now, and
   below 620px the bar collapses to one line. The bold middle run is the
   only part dropped, because the hero repeats it verbatim on the next
   screenful. */
@media (max-width:620px){
  .util__in{font-size:13px}
  .util__left{display:block;padding-block:9px}
  .util__left b{display:none}
  .util__left span ~ span::before{content:"\00b7";margin:0 .45em;opacity:.55}
  .util__right{gap:14px}
}

/* 2. THE EYEBROW ON DARK. It was --blue #344FB2 on near-black: 2.8:1, well
   under the 4.5:1 floor, and these are small letter-spaced caps where it
   hurts most. --blue-eyebrow is the same hue opened up to 6.1:1. The cream
   keyline stays because it is the logo's own treatment, but 3px around
   13px caps was closing up the counters, so it eases off on small screens. */
:root{--blue-eyebrow:#6E8BEA}
.on-dark .eyebrow{color:var(--blue-eyebrow)}
.herocard__k{color:var(--blue-eyebrow)}
@media (max-width:620px){
  .on-dark .eyebrow,.herocard__k{-webkit-text-stroke-width:2px}
}

/* ============ rev.14: the mobile call bar (11 Nov) ===================== */
@media (max-width:760px){

  /* CLIPPED CONTENT. body cleared a flat 66px, but the bar adds
     env(safe-area-inset-bottom) to its own height. On a desktop browser that
     is 0 and the numbers match; on any iPhone with a home indicator it is
     ~34px, so the bar stands ~101px tall against 66px of clearance and eats
     the last 35px of the page. That is what was slicing the hero's button in
     half. The clearance now tracks the same inset the bar does. */
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}

  /* THE BLUE LINE. The bar carried a 3px saturated blue rule. Blue is this
     site's structural colour, which is why it was there, but structure
     encloses or divides something related. This line floated across
     photography attached to nothing and read as a stray stripe laid over the
     page. A surface that sits above the content should look lifted, not
     stapled on, so the rule goes down to a hairline and a shadow does the
     separating. */
  .callbar{
    border-top:1px solid rgba(245,241,233,.16);
    box-shadow:0 -14px 28px rgba(0,0,0,.45);
  }

  /* THE DOUBLE RED. The hero's "Call 845-978-3203" landed about ten pixels
     above the bar's "Call now": same action, same red, twice, reading as one
     red smear broken by that blue line. The bar owns calling on mobile, it is
     bigger and it is always at the thumb, so the hero drops its duplicate and
     keeps one button. The estimate goes solid because it is now the hero's
     only action and a ghost outline is too quiet to carry that alone. */
  .hero .btnrow .btn--call{display:none}
  .hero .btnrow .btn--ghost{
    background:var(--warm);border-color:var(--warm);color:var(--ink);
  }
  .hero .btnrow .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}

  /* The second half was transparent on ink, so it read as empty space beside
     a button rather than as the other half of a pair. A hairline gives it an
     edge of its own. */
  .callbar__quote{border-left:1px solid rgba(245,241,233,.16)}

  /* THE BLUE LINE, actually found. It is not the bar: it is .herocard's 4px
     blue top border, the next section, cresting about 8px above the bar. You
     see the rule and four pixels of card and nothing else, so it reads as a
     stripe laid across the page rather than the edge of a card. The cause is
     that the hero reserves no room for the bar overlaying it, which is the
     same reason its own button was being clipped. Reserving that space ends
     the hero at the fold instead of just short of it, so the next section
     starts below the screen where it belongs. The 4px blue edge itself is
     correct and shared with .step, .county and .sidecard: it stays. */
  .hero{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}

  /* 34px between the pitch's CTA and the town-checker card ran the two
     together as one block, and it is also why the card crested the bar by
     exactly eight pixels. Opening the gap separates the two ideas and moves
     the card's edge clear of the fold on a common phone. */
  .hero__in{gap:56px}
}

/* ============ rev.15: one top bar, one CTA (11 Nov) ==================== */
@media (max-width:620px){

  /* ONE LINE, CENTRED. The two runs measure 181px and 350px against about
     350px of usable width, so they cannot share a line and consolidating
     means dropping one. The geography goes: the hero eyebrow immediately
     below reads "On Point Gutters · Hudson Valley, NY" and the headline
     under it reads "across the tri-state area", so the bar was saying it a
     third time before the reader had scrolled at all. The trust pair and
     the phone number are not repeated anywhere above the fold, so they
     stay. A notch smaller so a centred line still has air around it. */
  .util__left{display:none}
  .util__in{justify-content:center;font-size:12px}
  .util__right{
    width:100%;justify-content:center;gap:16px;
    border-top:0;          /* was dividing it from the line now removed */
    padding-block:11px;
  }
}

@media (max-width:760px){
  /* THE HERO LOSES ITS BUTTON ROW. Both of its actions already sit in the
     fixed bar at the bottom of the screen, permanently, at thumb height:
     Call now and Free estimate. Repeating them 80px higher was asking the
     same question twice. The bar is the hero's CTA on mobile. */
  .hero .btnrow{display:none}
}

/* ============ rev.16: full-screen mobile menu (11 Nov) ================= */
/* It was an absolutely positioned panel hanging off the bottom of the nav,
   so it opened as a slab floating in the middle of the page with the hero
   still showing underneath it. Nothing said "you are in a menu now". It
   takes the whole screen instead, and the header stays lit above it so the
   logo and Close never disappear.
   Driven entirely off :has() rather than a new class, because site.js only
   ever toggles .is-open on the list itself and it is not worth touching a
   working toggle to restyle it. */
@media (max-width:760px){

  /* .nav sets z-index:200 and so owns a stacking context; the panel cannot
     escape it, and .util is 210 and would cover the top of the screen. */
  .nav:has(.nav__links.is-open){z-index:400}

  /* Nothing behind the menu should move or compete with it. */
  body:has(.nav__links.is-open){overflow:hidden}
  body:has(.nav__links.is-open) .callbar{display:none}

  .nav__links.is-open{
    position:fixed;inset:0;z-index:1;
    block-size:100dvh;
    display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;
    background:var(--ink);
    border:0;
    padding:240px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  /* Both sit above the panel so the header reads as still present. */
  .nav__logo,.nav__burger{position:relative;z-index:2}

  /* A whole screen can carry more than a 22px list could. */
  .nav__links.is-open a{
    padding-block:18px;font-size:26px;
    border-bottom:1px solid var(--line-dark);
  }
  .nav__links.is-open a:first-child{border-top:1px solid var(--line-dark)}
  .nav__links.is-open .nav__cta{
    margin-top:28px;border-bottom:0;border-radius:var(--r-btn);
    padding-block:20px;font-size:22px;
  }
}

/* ============ rev.17: FAQ open/close is animated ====================== */
/* The answers are native <details>, so they appeared and vanished in a
   single frame and the rest of the page jumped with them. The marker had a
   .25s rotate, which only made the snap more obvious: one part of the
   control eased while the panel it controlled did not.
   ::details-content is the only way to reach the closed state from CSS -
   the content is content-visibility:hidden, so nothing else can be
   transitioned out of. interpolate-size on :root is what lets block-size
   animate to auto; without it, auto is not an interpolable value and the
   whole thing silently stays a snap. Guarded by @supports, so a browser
   that lacks either simply keeps today's behaviour.
   Not scoped to mobile: the snap is identical on desktop, and an accordion
   that eases on a phone and jumps on a laptop is worse than either. */
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}

  .faq details::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .32s var(--ease),content-visibility .32s allow-discrete;
    transition-behavior:allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}

  @media (prefers-reduced-motion:reduce){
    .faq details::details-content{transition:none}
  }
}

/* ============ rev.18: motion ========================================== */
/* The stylesheet already had a lot of hover motion and a global
   prefers-reduced-motion reset, so everything below inherits that guard for
   free. Two real gaps: there was exactly ONE :active rule in the file, so a
   tap on a phone gave no feedback at all, and nothing ever animated in
   response to the page loading or the menu opening.
   Deliberately NOT added: fade-and-slide-up on every section as you scroll.
   That is the default move and it reads as generated. Motion here either
   answers something the visitor did, or it is the single load sequence in
   the hero. */

/* --------------------------------------------------- press feedback ---- */
/* Touch has no hover, so this is the only feedback a phone ever gets.
   Scale alone looks like a bug on a full-width button; a little travel with
   it reads as the surface taking the press. */
.btn,.callbar a,.nav__links a,.svc__go,.tnote__go,.areacheck__list button,
.faq summary,.county__l a{
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px) scale(.988)}
.callbar a:active{transform:scale(.97);filter:brightness(1.08)}
.faq summary:active::before{transform:scale(.92)}
.svc__go:active,.tnote__go:active{transform:translateX(2px)}
.nav__links.is-open a:active{background:rgba(245,241,233,.07)}

/* Everything below starts an element at opacity 0, so it is wrapped in
   no-preference rather than guarded by an override afterwards. If the query
   is unsupported, or the visitor asks for reduced motion, the rules never
   apply at all and the content is simply visible. An override would mean the
   hero is blank by default and only revealed if a second rule wins, which is
   the wrong way round on a page whose job is getting the phone to ring. */
@media (prefers-reduced-motion:no-preference){

  /* ------------------------------------------------- the menu opens ---- */
  /* It used to appear in a single frame, fully formed. Now the panel arrives
     and the rows follow it in, which is what tells you the screen changed
     rather than the page having jumped somewhere. */
  @media (max-width:760px){
    .nav__links.is-open{animation:menuin .28s var(--ease) both}
    .nav__links.is-open a{animation:menurow .34s var(--ease) both}
    .nav__links.is-open a:nth-child(1){animation-delay:.04s}
    .nav__links.is-open a:nth-child(2){animation-delay:.08s}
    .nav__links.is-open a:nth-child(3){animation-delay:.12s}
    .nav__links.is-open a:nth-child(4){animation-delay:.16s}
    .nav__links.is-open a:nth-child(5){animation-delay:.20s}
    .nav__links.is-open a:nth-child(6){animation-delay:.24s}
    .nav__links.is-open a:nth-child(7){animation-delay:.28s}
  }

  /* ----------------------------------------- one load sequence, hero --- */
  /* The single orchestrated moment on the page. It runs once, on the hero
     only, in reading order, and nothing else on the site animates on
     arrival. Short travel and a quick settle: this is a contractor's site
     and a slow cinematic entrance would read as a stock template rather
     than as care. */
  .hero .eyebrow{animation:rise .5s var(--ease) both;animation-delay:.05s}
  .hero .display{animation:rise .5s var(--ease) both;animation-delay:.13s}
  .hero .tagline{animation:rise .5s var(--ease) both;animation-delay:.21s}
  .hero .lede{animation:rise .5s var(--ease) both;animation-delay:.29s}
  .hero .btnrow{animation:rise .5s var(--ease) both;animation-delay:.37s}
  .hero .herocard{animation:rise .55s var(--ease) both;animation-delay:.42s}

  /* ---------------------------------------- the town checker answers --- */
  /* Results used to pop in under the field with nothing marking them new. */
  .areacheck__list{animation:listin .18s var(--ease) both}
}

@keyframes menuin{from{opacity:0}to{opacity:1}}
@keyframes menurow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes listin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .btn:active,.callbar a:active,.svc__go:active,.tnote__go:active{transform:none}
}