/* ==========================================================================
   On Point Gutters — design system
   Direction A "Dusk Work", sharpened. Reference lock: _research/REFERENCE-LOCK.md
     Structure  : bakerroofing.com   (condensed caps over dark full-bleed, ONE red CTA)
     Mechanics  : nedstevens.com     (service-area checker, trust band under hero)
     Capture    : mrroof.com         (ask above the fold, phone in nav always)
     Spec tag   : topnotchseamlessgutters.com
   Rules: dark = hero + proof only. Warm white = everything you read.
          Red = actions ONLY, never a surface, never a heading.
          No gradients. No grain. No glow. No fade-up-on-scroll. Flat and hard.
   ========================================================================== */

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

  /* --- derived. Neutrals are biased toward the blue, never pure grey. --- */
  --ink-panel:#0C0E14;
  --ink-raise:#141825;
  --line-dark:#262B3A;
  --line-light:#DCD6C8;
  --warm-sink:#EBE5D8;
  --mute-dark:#8D93A6;
  --mute-light:#5E6170;
  --body-light:#2A2C35;

  --blue-lift:#5A77DD;   /* blue on dark grounds only */
  --blue-deep:#26398A;   /* hover */
  --red-deep:#AE1F16;    /* hover */

  --font:'Archivo','Helvetica Neue',Arial,sans-serif;
  --label:'Archivo','Helvetica Neue',Arial,sans-serif;  /* labels: same family, set in caps */

  --wrap:1180px;
  --gutter:20px;
  --r-btn:3px;           /* a gutter is hard-edged. so is the logo. */

  --step:clamp(56px,7vw,104px);
}

*,*::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.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
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(--blue-lift)}

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

/* --------------------------------------------------------------- type --- */
/* Archivo carries a width axis. Condensed is for display only; body stays
   at normal width or it becomes unreadable at 17px. */
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--ink)}

.display,
.on-dark h1{
  text-shadow:
    0 1px 1px rgba(0,0,0,.42),
    0 3px 10px rgba(0,0,0,.42),
    0 12px 44px rgba(0,0,0,.52);
}
.display{
  font-weight:800;
  font-stretch:78%;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  font-size:clamp(42px,8.2vw,104px);
}
.h2{
  font-weight:800;
  font-stretch:84%;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:.006em;
  font-size:clamp(30px,4.6vw,56px);
}
.h3{
  font-weight:700;
  font-stretch:92%;
  line-height:1.12;
  letter-spacing:-.01em;
  font-size:clamp(21px,2.3vw,27px);
}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--warm)}

.eyebrow{
  font-family:var(--label);
  font-size:13px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 18px;
}
.on-dark .eyebrow{color:var(--blue-lift)}

.lede{font-size:clamp(17px,1.65vw,20px);line-height:1.55;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 --- */
/* Signature divider: a straight blue run with one red hanger tick.
   It is the logo's geometry, and it is the only ornament on the site. */
.gline{position:relative;height:3px;background:var(--blue);border:0;margin:0}
.gline::after{
  content:"";position:absolute;inset-block-start:0;
  inset-inline-start:clamp(28px,11%,150px);
  inline-size:34px;block-size:3px;background:var(--red);
}

/* ------------------------------------------------------------ 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;gap:9px;
  font-family:var(--font);font-size:16px;font-weight:700;font-stretch:92%;
  letter-spacing:.025em;text-transform:uppercase;
  padding:15px 26px;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;
}
/* Red is for the call. Nothing else on this site is red. */
.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,.4);color:var(--warm)}
.btn--ghost:hover{border-color:var(--warm);background:rgba(245,241,233,.08);color:var(--warm)}

.btn--solid{background:var(--ink);border-color:var(--ink);color:var(--warm)}
.btn--solid:hover{background:var(--blue-deep);border-color:var(--blue-deep);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);border-bottom:1px solid var(--line-dark);font-family:var(--label);font-size:12.5px;font-weight:600;letter-spacing:.09em}
.util__in{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-block:9px;flex-wrap:wrap}
.util__area{color:var(--mute-dark);text-transform:uppercase}
.util__area b{color:var(--warm);font-weight:700}
.util__tel{color:var(--warm);text-decoration:none;font-weight:700;white-space:nowrap}
.util__tel:hover{color:var(--blue-lift)}

/* ----------------------------------------------------------------- nav --- */
.nav{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.nav__in{display:flex;align-items:center;gap:22px;padding-block:13px}
.nav__logo{flex:0 0 auto}
.nav__logo img{width:clamp(148px,19vw,196px);height:auto;display:block}
.nav__links{display:flex;gap:26px;margin-inline-start:auto;align-items:center}
.nav__links a{
  color:#D5D1C8;text-decoration:none;font-size:16.5px;font-weight:600;
  font-stretch:94%;letter-spacing:.02em;white-space:nowrap;
}
.nav__links a:hover{color:var(--warm)}
.nav__cta{margin-inline-start:4px;padding:13px 22px;font-size:15.5px}
.nav__burger{display:none;margin-inline-start:auto;background:transparent;border:1px solid var(--line-dark);color:var(--warm);padding:10px 13px;border-radius:var(--r-btn);font-family:var(--label);font-size:12px;letter-spacing:.1em;cursor:pointer}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;inset-inline:0;top:100%;background:var(--ink);
    border-bottom:1px solid var(--line-dark);padding:8px var(--gutter) 20px;
  }
  .nav__links.is-open a{padding-block:13px;width:100%;border-bottom:1px solid var(--line-dark);font-size:16px}
  .nav__links.is-open .nav__cta{margin-top:14px;border-bottom:0;width:auto}
  .nav__burger{display:block}
  .nav{position:relative}
}

/* ---------------------------------------------------------------- hero --- */
/* Full-bleed photograph, no scrim gimmick, no gradient. The photo is dark
   because it was shot dark. Only 19 of 60 photos are true landscape, so the
   hero pool is deliberately small. */
.hero{position:relative;background:var(--ink);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__veil{position:absolute;inset:0;z-index:-1;background:rgba(5,5,5,.62)}
.hero__in{padding-block:clamp(56px,9vw,116px) clamp(48px,7vw,86px);position:relative}
.hero__copy{max-width:none}
.display{max-width:16ch}  /* ch resolves against the display size, not the parent */
.hero .lede{max-width:46ch;color:#DAD6CD}
.hero__foot{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;font-family:var(--label);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#A9AEBE}
.hero__foot b{color:var(--warm);font-weight:700}

/* --------------------------------------------------- service-area check --- */
/* Replaces the address we do not have. Ned Stevens uses a ZIP; a town name
   is better here because it matches the 230 town pages and reads local. */
.areacheck{margin-top:34px;max-width:520px}
.areacheck__label{font-family:var(--label);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--warm);font-weight:700;display:block;margin-bottom:10px}
.areacheck__row{display:flex;gap:8px;flex-wrap:wrap}
.areacheck__field{position:relative;flex:1 1 240px;min-width:0}
.areacheck__in{
  width:100%;padding:15px 16px;font:inherit;font-size:16px;
  background:rgba(245,241,233,.07);color:var(--warm);
  border:2px solid rgba(245,241,233,.3);border-radius:var(--r-btn);
}
.areacheck__in::placeholder{color:#9398AC}
.areacheck__in:focus{border-color:var(--blue-lift);background:rgba(245,241,233,.12);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:258px;overflow-y:auto;padding:5px;margin:0;list-style:none;
}
.areacheck__list[hidden]{display:none}
.areacheck__list li{margin:0}
.areacheck__list button{
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:10px 12px;color:var(--warm);font:inherit;font-size:15px;display:flex;
  justify-content:space-between;gap:12px;align-items:baseline;
}
.areacheck__list button:hover,.areacheck__list button:focus-visible{background:var(--blue-deep)}
.areacheck__list .cty{font-family:var(--label);font-size:10.5px;color:var(--mute-dark);letter-spacing:.06em;white-space:nowrap}
.areacheck__list button:hover .cty{color:#C9CEE0}
.areacheck__msg{margin-top:11px;font-size:14.5px;color:#C4C0B7;min-height:1.4em}
.areacheck__msg a{color:var(--blue-lift);font-weight:700}
.areacheck__msg.is-miss{color:#E7B9B4}

/* ---------------------------------------------------------- trust band --- */
.trust{background:var(--warm);border-bottom:1px solid var(--line-light)}
.trust__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));gap:0;padding-block:0}
.trust__item{padding:26px 22px;border-inline-end:1px solid var(--line-light)}
.trust__item:last-child{border-inline-end:0}
.trust__k{font-family:var(--label);font-size:11.5px;letter-spacing:.13em;font-weight:700;text-transform:uppercase;color:var(--red);font-weight:700;display:block;margin-bottom:7px}
.trust__v{font-size:18px;font-weight:700;font-stretch:92%;color:var(--ink);line-height:1.22}
.trust__n{font-size:13.5px;color:var(--mute-light);margin-top:5px;line-height:1.42}
@media (max-width:620px){
  .trust__item{border-inline-end:0;border-bottom:1px solid var(--line-light);padding:20px 0}
  .trust__in{padding-inline:0}
}

/* ------------------------------------------------------------ sections --- */
.shead{margin-bottom:40px;max-width:72ch}
.shead .lede{color:var(--mute-light)}
.on-dark .shead .lede{color:#B6BAC7}

/* ------------------------------------------------------------ services --- */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--line-light);border:1px solid var(--line-light)}
.svc{background:var(--warm);display:flex;flex-direction:column;text-decoration:none;color:inherit}
.svc:hover{background:#fff}
.svc:hover .svc__name{color:var(--blue)}
.svc__media{position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;background:var(--ink)}
.svc__media img{width:100%;height:100%;object-fit:cover}
.svc__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.svc__n{font-family:var(--label);font-size:11.5px;letter-spacing:.13em;font-weight:700;color:var(--mute-light);display:block;margin-bottom:9px}
.svc__name{font-size:22px;font-weight:800;font-stretch:86%;text-transform:uppercase;line-height:1.05;color:var(--ink);letter-spacing:.005em}
.svc__d{font-size:15px;color:var(--mute-light);margin:11px 0 0;line-height:1.5}
.svc__go{margin-top:auto;padding-top:17px;font-family:var(--label);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700}

/* --------------------------------------------------------- the spec tag --- */
/* Overlaid technical caption. Lifted from Top Notch, justified here because
   we actually have the macro shots. Mono, dark, bottom-right of a photo. */
.spec{
  position:absolute;inset-block-end:10px;inset-inline-end:10px;
  background:rgba(5,5,5,.86);color:#D7DCEC;
  font-family:var(--label);font-size:11.5px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;
  padding:6px 10px;border-inline-start:2px solid var(--blue-lift);
}

/* ----------------------------------------------------------- split rows --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,64px);align-items:center}
.split--narrow{grid-template-columns:1.08fr .92fr}
@media (max-width:860px){.split,.split--narrow{grid-template-columns:1fr}}
.frame{position:relative;border:1px solid var(--line-dark)}
.band--dark .frame,.band--panel .frame{border-color:var(--line-dark)}
.frame img{width:100%}

/* ---------------------------------------------------------------- steps --- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-top:40px}
.step{background:var(--ink-panel);padding:24px 22px 28px}
.step__n{font-family:var(--label);font-size:12px;letter-spacing:.13em;font-weight:700;color:var(--blue-lift);font-weight:700;display:block;margin-bottom:11px}
.step__t{font-size:17.5px;font-weight:700;font-stretch:92%;color:var(--warm);line-height:1.2}
.step__d{font-size:14.5px;color:#A9AEBE;margin:9px 0 0;line-height:1.5}

/* -------------------------------------------------------------- gallery --- */
/* 40 of 60 photos are portrait. A uniform landscape grid would crop two
   thirds of the library badly, so this is a masonry column flow. */
.gal{columns:4 250px;column-gap:12px}
.gal figure{margin:0 0 12px;break-inside:avoid;position:relative;border:1px solid var(--line-dark)}
.gal img{width:100%}
.gal figcaption{
  font-family:var(--label);font-size:11.5px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;
  color:var(--mute-dark);padding:9px 11px;border-top:1px solid var(--line-dark);background:var(--ink-panel);
}

/* --------------------------------------------------------- county grid --- */
.counties{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;background:var(--line-light);border:1px solid var(--line-light)}
.county{background:var(--warm);padding:23px 22px 26px}
.county__k{font-family:var(--label);font-size:11.5px;letter-spacing:.13em;font-weight:700;text-transform:uppercase;color:var(--red);font-weight:700;display:block;margin-bottom:8px}
.county__t{font-size:19px;font-weight:800;font-stretch:88%;text-transform:uppercase;color:var(--ink);line-height:1.1}
.county__d{font-size:14.5px;color:var(--mute-light);margin:10px 0 0;line-height:1.5}
.county__l{margin:13px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.75}
.county__l a{color:var(--blue);text-decoration:none}
.county__l a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ faq --- */
.faq{border-top:1px solid var(--line-light);max-width:860px}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-size:18.5px;font-weight:700;font-stretch:94%;color:var(--ink);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;inset-inline-end:8px;top:19px;
  font-family:var(--label);font-size:21px;color:var(--blue);font-weight:700;
}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--blue)}
.faq__a{padding:0 0 24px;max-width:70ch;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(28px,4.5vw,70px);align-items:start}
@media (max-width:860px){.quote{grid-template-columns:1fr}}
.field{margin-bottom:15px}
.field label{display:block;font-family:var(--label);font-size:12px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:#AEB3C4;margin-bottom:7px;font-weight:700}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;font:inherit;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:108px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-lift);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:15px}
@media (max-width:520px){.fieldrow{grid-template-columns:1fr}}
.formnote{font-size:13.5px;color:var(--mute-dark);margin:14px 0 0;line-height:1.5}

/* --------------------------------------------------------------- footer --- */
.foot{background:var(--ink);color:#A9AEBE;padding-block:52px 34px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__logo{width:208px;margin-bottom:18px}
.foot h4{font-family:var(--label);font-size:11.5px;letter-spacing:.13em;font-weight:700;text-transform:uppercase;color:var(--warm);margin-bottom:13px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:2}
.foot a{color:#A9AEBE;text-decoration:none}
.foot a:hover{color:var(--warm)}
.foot__tel{font-size:26px;font-weight:800;font-stretch:88%;color:var(--warm);text-decoration:none;display:inline-block;letter-spacing:.01em}
.foot__tel:hover{color:var(--blue-lift)}
.foot__base{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--label);font-size:11px;letter-spacing:.07em;color:var(--mute-dark)}

/* ------------------------------------------------------- mobile callbar --- */
/* Every one of the four reference contractors keeps the phone reachable at
   all times. On a phone that means a fixed bar. */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    position:fixed;inset-inline:0;bottom:0;z-index:90;
    background:var(--ink);border-top:1px solid var(--line-dark);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .callbar a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:16px 10px;text-decoration:none;
    font-size:14.5px;font-weight:700;font-stretch:92%;letter-spacing:.03em;text-transform:uppercase;
  }
  .callbar__tel{background:var(--red);color:#fff}
  .callbar__quote{background:transparent;color:var(--warm)}
  body{padding-bottom:62px}
}

/* ------------------------------------------------------------- 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}
}

/* ===== generated pages: service + town ================================== */

/* -------------------------------------------------------- breadcrumbs --- */
.crumbs{background:var(--ink);border-bottom:1px solid var(--line-dark);padding-block:12px;
  font-family:var(--label);font-size:12.5px;font-weight:600;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:#4A5064;margin-inline:9px}

/* -------------------------------------------------------- split hero --- */
/* Service and town pages lead with a split rather than full-bleed, because
   40 of 60 photos are portrait and a framed panel takes either shape. */
.shero{background:var(--ink);padding-block:clamp(40px,5.5vw,76px)}
.shero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4.4vw,62px);align-items:center}
@media (max-width:880px){.shero__in{grid-template-columns:1fr}}
.shero h1{font-size:clamp(36px,5.6vw,68px);font-weight:800;font-stretch:80%;
  text-transform:uppercase;line-height:.96;letter-spacing:.005em;max-width:15ch}
.shero .lede{max-width:52ch}
.shero__fig{margin:0;position:relative;border:1px solid var(--line-dark)}
.shero__fig img{width:100%}

/* ------------------------------------------------------------ checklist --- */
.checks{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:13px}
.checks li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:9px;width:16px;height:3px;background:var(--blue)}
.on-dark .checks li{color:#CFCBC2}
.checks li b{color:var(--ink)}
.on-dark .checks li b{color:var(--warm)}

/* ------------------------------------------------------- related links --- */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;padding:0;list-style:none}
.pills a{display:inline-block;border:1px solid var(--line-light);padding:9px 15px;
  text-decoration:none;color:var(--ink);font-size:15px;font-weight:600;border-radius:var(--r-btn);background:var(--warm)}
.pills a:hover{border-color:var(--blue);color:var(--blue)}
.on-dark .pills a{border-color:var(--line-dark);color:#C9CEE0;background:transparent}
.on-dark .pills a:hover{border-color:var(--blue-lift);color:var(--warm)}

/* ------------------------------------------------------- town A to Z --- */
.azgrid{columns:4 215px;column-gap:28px;margin-top:8px}
.azgrid section{break-inside:avoid;margin-bottom:26px}
.azgrid h3{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:9px}
.azgrid ul{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.95}
.azgrid a{color:var(--body-light);text-decoration:none}
.azgrid a:hover{color:var(--blue);text-decoration:underline}