/*
Theme Name:   NDRGS Kadence Child
Theme URI:    https://nextdayroofingsolutions.com
Description:  Child theme for Next Day Roofing & Gutter Solutions. Carries the NDRGS design system tokens and page components. Values are taken from the NDRGS design system (project/tokens.json) — do not hand-edit hex values here; change them in the design system first.
Author:       Next Day Roofing & Gutter Solutions
Template:     kadence
Version:      1.15.69
License:      GNU General Public License v2 or later
Text Domain:  ndrgs-child
*/

/* ==========================================================================
   1. Tokens — from the NDRGS design system
   ========================================================================== */

:root{
  /* color */
  --ndrgs-surface:#ffffff;
  --ndrgs-surface-sunken:#f1f4f9;
  --ndrgs-surface-raised:#ffffff;
  --ndrgs-surface-navy:#072561;
  --ndrgs-surface-glow:#0a1c3d;

  --ndrgs-ink:#0e1a2e;
  --ndrgs-ink-muted:#4c5c75;
  --ndrgs-ink-subtle:#5d6c86;
  --ndrgs-ink-on-navy:#ffffff;
  --ndrgs-ink-on-accent:#ffffff;

  --ndrgs-brand:#072561;
  --ndrgs-brand-strong:#041843;
  --ndrgs-brand-tint:#e7edf8;
  --ndrgs-brand-text:#072561;

  --ndrgs-accent:#d30d14;
  --ndrgs-accent-strong:#a90a10;
  --ndrgs-accent-tint:#fdeaea;
  --ndrgs-accent-text:#b3121a;

  --ndrgs-border:#d9e0eb;
  --ndrgs-border-strong:#74869f;
  --ndrgs-focus:#3b7bea;
  --ndrgs-success:#0f7a3d;
  --ndrgs-warning:#9a4a06;
  --ndrgs-star:#f0a44a;

  /* spacing — 4px base */
  --ndrgs-space-1:4px;
  --ndrgs-space-2:8px;
  --ndrgs-space-3:12px;
  --ndrgs-space-4:16px;
  --ndrgs-space-5:24px;
  --ndrgs-space-6:32px;
  --ndrgs-space-7:48px;
  --ndrgs-space-8:64px;
  --ndrgs-space-9:96px;

  /* radius */
  --ndrgs-radius-sm:4px;
  --ndrgs-radius-md:8px;
  --ndrgs-radius-lg:14px;
  --ndrgs-radius-pill:999px;

  /* shadow */
  --ndrgs-shadow-sm:0 1px 2px rgba(7,37,97,.10);
  --ndrgs-shadow-md:0 4px 14px rgba(7,37,97,.12);
  --ndrgs-shadow-lg:0 14px 34px rgba(7,37,97,.18);

  /* type */
  --ndrgs-display:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ndrgs-sans:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ==========================================================================
   2. Base typography
   ========================================================================== */

body{
  font-family:var(--ndrgs-sans);
  font-size:16px;
  line-height:26px;
  color:var(--ndrgs-ink);
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--ndrgs-display);
  color:var(--ndrgs-ink);
  font-weight:700;
}

/* Display scale */
.ndrgs-display-xl{font-size:56px;line-height:54px;font-weight:800;letter-spacing:-.02em}
.ndrgs-display-lg{font-size:44px;line-height:46px;font-weight:800;letter-spacing:-.02em}
.ndrgs-display-md{font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.01em}
.ndrgs-heading-lg{font-size:28px;line-height:34px;font-weight:700}
.ndrgs-heading-md{font-size:22px;line-height:28px;font-weight:700}
.ndrgs-heading-sm{font-size:18px;line-height:24px;font-weight:700}

/* Text scale */
.ndrgs-body-lg{font-size:18px;line-height:29px}
.ndrgs-body-sm{font-size:14px;line-height:22px}
.ndrgs-caption{font-size:13px;line-height:18px;color:var(--ndrgs-ink-subtle)}
.ndrgs-muted{color:var(--ndrgs-ink-muted)}
.ndrgs-measure{max-width:660px}

/* Eyebrow — the token does not transform text, the markup does */
.ndrgs-eyebrow{
  font-family:var(--ndrgs-display);
  font-size:13px;
  line-height:16px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ndrgs-accent-text);
  margin-bottom:var(--ndrgs-space-3);
}
.ndrgs-on-navy .ndrgs-eyebrow{color:var(--ndrgs-ink-on-navy);opacity:.82}

/* Focus ring — 3px solid, 2px offset, every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible{
  outline:3px solid var(--ndrgs-focus);
  outline-offset:2px;
}

/* ==========================================================================
   3. Sections and grids

   Layout is done with these grid classes rather than core/columns, so the
   block markup stays free of the version-dependent layout classes WordPress
   generates. Every grid below is a plain core/group with a class on it.
   ========================================================================== */

.ndrgs-section{padding-top:var(--ndrgs-space-9);padding-bottom:var(--ndrgs-space-9)}
.ndrgs-section-tight{padding-top:var(--ndrgs-space-7);padding-bottom:var(--ndrgs-space-7)}
.ndrgs-sunken{background:var(--ndrgs-surface-sunken)}
.ndrgs-navy{background:var(--ndrgs-surface-navy);color:var(--ndrgs-ink-on-navy)}
.ndrgs-navy h1,.ndrgs-navy h2,.ndrgs-navy h3,.ndrgs-navy p{color:var(--ndrgs-ink-on-navy)}

/* two-column: copy beside a panel */
.ndrgs-two{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--ndrgs-space-7);align-items:start}

/* two-column: copy beside a photo, vertically centered */
.ndrgs-local-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndrgs-space-7);align-items:center}

/* three-up gallery */
.ndrgs-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ndrgs-space-5)}

/* four-up process */
.ndrgs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ndrgs-space-5);counter-reset:ndrgs-step}

/* CTA band inner: copy left, one button right */
.ndrgs-ctaband-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--ndrgs-space-6);flex-wrap:wrap}

/* promo inner: offer left, one button right */
.ndrgs-promo-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--ndrgs-space-6);flex-wrap:wrap}

/* estimate: copy beside the form */
.ndrgs-est-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndrgs-space-7);align-items:center}

/* three-up: metros, options, comparisons */
.ndrgs-three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ndrgs-space-5)}

/* a plain raised panel */
.ndrgs-panel{
  background:var(--ndrgs-surface-raised);
  border:1px solid var(--ndrgs-border);
  border-radius:var(--ndrgs-radius-lg);
  padding:var(--ndrgs-space-5);
  box-shadow:var(--ndrgs-shadow-md);
}
.ndrgs-panel h3{margin:0 0 var(--ndrgs-space-2)}
.ndrgs-panel p:last-child{margin-bottom:0}

/* a metro card — city list under a heading */
.ndrgs-metro{
  background:var(--ndrgs-surface-raised);
  border:1px solid var(--ndrgs-border);
  border-radius:var(--ndrgs-radius-lg);
  padding:var(--ndrgs-space-5);
  box-shadow:var(--ndrgs-shadow-md);
}
.ndrgs-metro h3{margin:0 0 var(--ndrgs-space-2);color:var(--ndrgs-brand-text)}
.ndrgs-metro p{font-size:14px;line-height:22px;color:var(--ndrgs-ink-muted);margin-bottom:0}

/* checklist — what a system includes */
.ndrgs-checklist ul{list-style:none;margin:0;padding:0}
.ndrgs-checklist li{
  padding-left:32px;
  margin-bottom:var(--ndrgs-space-3);
  background-repeat:no-repeat;
  background-position:left 4px;
  background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a3d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.ndrgs-checklist li:last-child{margin-bottom:0}

/* latest posts — the media articles row */
.ndrgs-posts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ndrgs-space-5)}
.ndrgs-posts li{
  background:var(--ndrgs-surface-raised);
  border:1px solid var(--ndrgs-border);
  border-radius:var(--ndrgs-radius-lg);
  padding:var(--ndrgs-space-5);
  box-shadow:var(--ndrgs-shadow-md);
}
.ndrgs-posts .wp-block-latest-posts__featured-image img{border-radius:var(--ndrgs-radius-md);margin-bottom:var(--ndrgs-space-3)}
.ndrgs-posts .wp-block-latest-posts__post-title{
  font-family:var(--ndrgs-display);
  font-size:18px;
  line-height:24px;
  font-weight:700;
  color:var(--ndrgs-ink);
  text-decoration:none;
  display:block;
  margin-bottom:var(--ndrgs-space-2);
}
.ndrgs-posts .wp-block-latest-posts__post-excerpt{font-size:14px;line-height:22px;color:var(--ndrgs-ink-muted)}

/* ==========================================================================
   4. Buttons — five variants, one accent per section
   ========================================================================== */

.wp-block-button__link{
  font-family:var(--ndrgs-sans);
  font-size:16px;
  line-height:16px;
  font-weight:700;
  letter-spacing:.01em;
  padding:18px 28px;
  border-radius:var(--ndrgs-radius-md);
  border:2px solid transparent;
  transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out;
}

.ndrgs-btn-accent .wp-block-button__link{background:var(--ndrgs-accent);color:var(--ndrgs-ink-on-accent)}
.ndrgs-btn-accent .wp-block-button__link:hover{background:var(--ndrgs-accent-strong);color:var(--ndrgs-ink-on-accent)}

.ndrgs-btn-primary .wp-block-button__link{background:var(--ndrgs-brand);color:var(--ndrgs-ink-on-navy)}
.ndrgs-btn-primary .wp-block-button__link:hover{background:var(--ndrgs-brand-strong);color:var(--ndrgs-ink-on-navy)}

.ndrgs-btn-secondary .wp-block-button__link{background:transparent;border-color:var(--ndrgs-brand-text);color:var(--ndrgs-brand-text)}
.ndrgs-btn-secondary .wp-block-button__link:hover{background:var(--ndrgs-brand-tint);color:var(--ndrgs-brand-text)}

.ndrgs-btn-onnavy .wp-block-button__link{background:#fff;color:var(--ndrgs-brand-text)}
.ndrgs-btn-onnavy .wp-block-button__link:hover{background:var(--ndrgs-brand-tint);color:var(--ndrgs-brand-text)}

.ndrgs-btn-ghost .wp-block-button__link{background:transparent;color:var(--ndrgs-accent-text);padding-left:0;padding-right:0}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.ndrgs-hero{padding-top:var(--ndrgs-space-9);padding-bottom:var(--ndrgs-space-9)}
.ndrgs-hero .wp-block-cover__inner-container{max-width:1200px;margin:0 auto}
.ndrgs-hero-copy{max-width:680px}
.ndrgs-hero h1{color:var(--ndrgs-ink-on-navy);margin-bottom:var(--ndrgs-space-4)}
.ndrgs-hero p{color:var(--ndrgs-ink-on-navy)}
.ndrgs-hero .ndrgs-body-lg{opacity:.9;max-width:56ch}

/* Review badge — values are injected live, never typed into the page */
.ndrgs-reviewbadge{
  display:inline-flex;
  align-items:center;
  gap:var(--ndrgs-space-2);
  border:1px solid var(--ndrgs-border-strong);
  border-radius:var(--ndrgs-radius-pill);
  padding:var(--ndrgs-space-2) var(--ndrgs-space-4);
  font-size:14px;
  line-height:22px;
}
.ndrgs-reviewbadge .ndrgs-stars{color:var(--ndrgs-star);letter-spacing:1px}

/* ==========================================================================
   6. Trust bar
   ========================================================================== */

.ndrgs-trustbar{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--ndrgs-space-5)}
.ndrgs-trustbar .ndrgs-trust{
  padding-left:36px;
  background-repeat:no-repeat;
  background-position:left 2px;
  background-size:24px 24px;
}
.ndrgs-trustbar .ndrgs-trust strong{
  font-family:var(--ndrgs-display);
  font-size:15px;
  font-weight:700;
  display:block;
  color:var(--ndrgs-ink);
}
.ndrgs-trustbar .ndrgs-trust span{font-size:13px;line-height:18px;color:var(--ndrgs-ink-subtle)}

/* icons, stroked in brand navy */
.ndrgs-icon-shield{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3C/svg%3E")}
.ndrgs-icon-check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.ndrgs-icon-star{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.4.8-4.7 4.3 1.3 6.3L12 17l-5.6 3 1.3-6.3L3 9.4l6.4-.8z'/%3E%3C/svg%3E")}
.ndrgs-icon-gutter{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v4H3z'/%3E%3Cpath d='M6 11v8M18 11v4'/%3E%3C/svg%3E")}
.ndrgs-icon-bulb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 00-3 11v3h6v-3a6 6 0 00-3-11z'/%3E%3C/svg%3E")}

/* ==========================================================================
   7. Stat panel
   ========================================================================== */

.ndrgs-statbox{
  background:var(--ndrgs-surface-navy);
  color:var(--ndrgs-ink-on-navy);
  border-radius:var(--ndrgs-radius-lg);
  padding:var(--ndrgs-space-5);
}
.ndrgs-statbox h3{
  color:var(--ndrgs-ink-on-navy);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.82;
  margin-bottom:var(--ndrgs-space-4);
}
.ndrgs-statbox p{
  color:var(--ndrgs-ink-on-navy);
  padding:var(--ndrgs-space-4) 0;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.ndrgs-statbox p:last-child{border-bottom:none;padding-bottom:0}
.ndrgs-statbox strong{
  display:block;
  font-family:var(--ndrgs-display);
  font-size:30px;
  line-height:34px;
  font-weight:800;
}
.ndrgs-statbox em{font-style:normal;font-size:14px;line-height:22px;opacity:.82}

/* ==========================================================================
   8. Service cards
   ========================================================================== */

.ndrgs-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--ndrgs-space-5)}
.ndrgs-svc{
  background:var(--ndrgs-surface-raised);
  border:1px solid var(--ndrgs-border);
  border-radius:var(--ndrgs-radius-lg);
  padding:var(--ndrgs-space-5);
  box-shadow:var(--ndrgs-shadow-md);
  transition:box-shadow .15s ease-out;
}
.ndrgs-svc:hover{box-shadow:var(--ndrgs-shadow-lg)}
.ndrgs-svc:before{
  content:"";
  display:block;
  width:24px;
  height:24px;
  margin-bottom:var(--ndrgs-space-3);
  background-repeat:no-repeat;
  background-size:24px 24px;
}
.ndrgs-svc h3{margin:0 0 var(--ndrgs-space-2)}
.ndrgs-svc p{font-size:14px;line-height:22px;color:var(--ndrgs-ink-muted);margin-bottom:var(--ndrgs-space-3)}
.ndrgs-svc .ndrgs-more{font-size:14px;font-weight:700;color:var(--ndrgs-accent-text);text-decoration:none;margin-bottom:0}
.ndrgs-svc .ndrgs-more a{color:var(--ndrgs-accent-text);text-decoration:none}
.ndrgs-svc .ndrgs-more a:after{content:" \2192"}

.ndrgs-svc--roof:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11L12 4l9 7'/%3E%3Cpath d='M5 10v9h14v-9'/%3E%3C/svg%3E")}
.ndrgs-svc--commercial:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18'/%3E%3Cpath d='M5 20V8l7-4 7 4v12'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3C/svg%3E")}
.ndrgs-svc--storm:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
.ndrgs-svc--water:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6-5.5 6-10a6 6 0 10-12 0c0 4.5 6 10 6 10z'/%3E%3C/svg%3E")}
.ndrgs-svc--gutter:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v4H3z'/%3E%3Cpath d='M6 11v8M18 11v4'/%3E%3C/svg%3E")}
.ndrgs-svc--shield:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3C/svg%3E")}
.ndrgs-svc--check:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E")}
.ndrgs-svc--lighting:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 00-3 11v3h6v-3a6 6 0 00-3-11z'/%3E%3C/svg%3E")}

/* ==========================================================================
   9. Warranty callout — brand-tint, per the README
   ========================================================================== */

.ndrgs-warranty{
  background:var(--ndrgs-brand-tint);
  border-radius:var(--ndrgs-radius-lg);
  padding:var(--ndrgs-space-5);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--ndrgs-space-5);
  margin-top:var(--ndrgs-space-7);
}
.ndrgs-warranty p{
  margin:0;
  padding-left:34px;
  background-repeat:no-repeat;
  background-position:left 3px;
  background-size:22px 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.ndrgs-warranty strong{font-family:var(--ndrgs-display);font-size:16px;font-weight:700;display:block}
.ndrgs-warranty em{font-style:normal;font-size:14px;line-height:22px;color:var(--ndrgs-ink-muted)}

/* ==========================================================================
   10. CTA band
   ========================================================================== */

.ndrgs-ctaband{
  background:var(--ndrgs-surface-navy);
  color:var(--ndrgs-ink-on-navy);
  padding-top:var(--ndrgs-space-7);
  padding-bottom:var(--ndrgs-space-7);
}
.ndrgs-ctaband h2,.ndrgs-ctaband p{color:var(--ndrgs-ink-on-navy)}

/* red tone — storm response and emergency only, at most one per page */
.ndrgs-ctaband--red{background:var(--ndrgs-accent)}
.ndrgs-ctaband--red h2,.ndrgs-ctaband--red p{color:var(--ndrgs-ink-on-accent)}

/* urgent notice — warning always ships with the word, never color alone */
.ndrgs-notice{
  background:var(--ndrgs-surface-raised);
  border:1px solid var(--ndrgs-border-strong);
  border-radius:var(--ndrgs-radius-lg);
  padding:var(--ndrgs-space-4) var(--ndrgs-space-5);
  box-shadow:var(--ndrgs-shadow-sm);
}
.ndrgs-notice p{margin:0}
.ndrgs-notice .ndrgs-urgent{
  display:inline-block;
  font-family:var(--ndrgs-display);
  font-size:13px;
  line-height:16px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ndrgs-warning);
  margin-right:var(--ndrgs-space-2);
}
.ndrgs-notice .ndrgs-urgent:before{content:"\26A0\FE0E  "}
.ndrgs-ctaband p{opacity:.88;max-width:54ch}
.ndrgs-ctaband .ndrgs-note{font-size:14px;line-height:22px;opacity:.78}

/* ==========================================================================
   11. Step list
   ========================================================================== */

.ndrgs-step{counter-increment:ndrgs-step;position:relative;padding-top:var(--ndrgs-space-7)}
.ndrgs-step:before{
  content:counter(ndrgs-step);
  position:absolute;
  top:0;
  left:0;
  width:36px;
  height:36px;
  border-radius:var(--ndrgs-radius-pill);
  background:var(--ndrgs-brand);
  color:var(--ndrgs-ink-on-navy);
  font-family:var(--ndrgs-display);
  font-weight:800;
  font-size:15px;
  display:grid;
  place-items:center;
}
.ndrgs-step h3{margin:0 0 var(--ndrgs-space-2)}
.ndrgs-step p{font-size:14px;line-height:22px;color:var(--ndrgs-ink-muted);margin:0}

/* ==========================================================================
   12. Service-area links
   ========================================================================== */

.ndrgs-areas{display:flex;flex-wrap:wrap;gap:var(--ndrgs-space-2)}
.ndrgs-areas a{
  display:inline-block;
  background:var(--ndrgs-surface-raised);
  border:1px solid var(--ndrgs-border);
  border-radius:var(--ndrgs-radius-pill);
  padding:10px 20px;
  text-decoration:none;
  color:var(--ndrgs-brand-text);
  font-weight:600;
  font-size:15px;
  transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out;
}
.ndrgs-areas a:hover{background:var(--ndrgs-brand);color:var(--ndrgs-ink-on-navy);border-color:var(--ndrgs-brand)}

/* ==========================================================================
   13. FAQ — core/details
   ========================================================================== */

.ndrgs-faq{max-width:840px;margin-left:auto;margin-right:auto}
.ndrgs-faq .wp-block-details{
  border:1px solid var(--ndrgs-border);
  border-radius:var(--ndrgs-radius-lg);
  margin-bottom:var(--ndrgs-space-3);
  background:var(--ndrgs-surface-raised);
  padding:0;
}
.ndrgs-faq .wp-block-details[open]{box-shadow:var(--ndrgs-shadow-md)}
.ndrgs-faq .wp-block-details summary{
  cursor:pointer;
  padding:var(--ndrgs-space-4) var(--ndrgs-space-5);
  font-family:var(--ndrgs-display);
  font-size:18px;
  line-height:24px;
  font-weight:700;
  color:var(--ndrgs-ink);
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:var(--ndrgs-space-4);
  align-items:center;
}
.ndrgs-faq .wp-block-details summary::-webkit-details-marker{display:none}
.ndrgs-faq .wp-block-details summary:after{
  content:"+";
  color:var(--ndrgs-accent-text);
  font-size:24px;
  font-weight:700;
  line-height:1;
}
.ndrgs-faq .wp-block-details[open] summary:after{content:"\2013"}
.ndrgs-faq .wp-block-details p{
  padding:0 var(--ndrgs-space-5) var(--ndrgs-space-5);
  margin:0;
  color:var(--ndrgs-ink-muted);
}

/* ==========================================================================
   14. Promo banner — accent-tint, figure in accent-text
   ========================================================================== */

.ndrgs-promo{
  background:var(--ndrgs-accent-tint);
  border-radius:var(--ndrgs-radius-lg);
  padding:var(--ndrgs-space-6);
}
.ndrgs-promo .ndrgs-price{
  font-family:var(--ndrgs-display);
  font-size:40px;
  line-height:40px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ndrgs-accent-text);
  margin-bottom:var(--ndrgs-space-1);
}
.ndrgs-promo .ndrgs-price span{font-size:20px;font-weight:700;margin-left:var(--ndrgs-space-2)}
.ndrgs-promo h2{margin:0 0 var(--ndrgs-space-2)}
.ndrgs-promo .ndrgs-terms{font-size:14px;line-height:22px;color:var(--ndrgs-ink-muted);margin:0;max-width:52ch}

/* ==========================================================================
   15. Estimate panel
   ========================================================================== */

.ndrgs-phone{
  font-family:var(--ndrgs-display);
  font-weight:800;
  font-size:34px;
  line-height:40px;
  color:var(--ndrgs-brand-text);
  text-decoration:none;
  display:inline-block;
}
.ndrgs-phone:hover{color:var(--ndrgs-brand-strong)}

/* ==========================================================================
   16. Photo placeholders — delete these blocks once real photos land
   ========================================================================== */

.ndrgs-ph{
  background:repeating-linear-gradient(45deg,#e4eaf3,#e4eaf3 12px,#eef2f8 12px,#eef2f8 24px);
  border:2px dashed #aab8cc;
  border-radius:var(--ndrgs-radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--ndrgs-space-4);
  min-height:220px;
}
.ndrgs-ph p{
  color:var(--ndrgs-ink-subtle);
  font-size:13px;
  line-height:18px;
  font-weight:600;
  margin:0;
}

/* ==========================================================================
   17. Responsive
   ========================================================================== */

@media (max-width:1024px){
  .ndrgs-trustbar{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .ndrgs-section{padding-top:var(--ndrgs-space-8);padding-bottom:var(--ndrgs-space-8)}
  .ndrgs-hero{padding-top:var(--ndrgs-space-8);padding-bottom:var(--ndrgs-space-8)}
  .ndrgs-display-xl{font-size:34px;line-height:40px;letter-spacing:-.01em}
  .ndrgs-display-lg{font-size:30px;line-height:36px}
  .ndrgs-heading-lg{font-size:24px;line-height:30px}
  .ndrgs-warranty{grid-template-columns:1fr}
  .ndrgs-svc{padding:var(--ndrgs-space-4)}
  .ndrgs-promo{padding:var(--ndrgs-space-5)}
}

@media (max-width:600px){
  .ndrgs-trustbar{grid-template-columns:1fr}
  .ndrgs-phone{font-size:28px}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ==========================================================================
   18. Utility pages — privacy, terms
   ========================================================================== */

.ndrgs-hero--utility{padding-top:var(--ndrgs-space-8);padding-bottom:var(--ndrgs-space-7);min-height:0}
.ndrgs-legal{max-width:760px}
.ndrgs-legal h2{font-size:22px;line-height:28px;margin:var(--ndrgs-space-7) 0 var(--ndrgs-space-3)}
.ndrgs-legal h2:first-child{margin-top:0}
.ndrgs-legal h3{font-size:18px;line-height:24px;margin:var(--ndrgs-space-6) 0 var(--ndrgs-space-2)}
.ndrgs-legal p,.ndrgs-legal li{color:var(--ndrgs-ink-muted)}

/* ==========================================================================
   19. Grid collapse — tablets and phones
   ========================================================================== */

@media (max-width:900px){
  .ndrgs-two,
  .ndrgs-local-grid,
  .ndrgs-est-grid{grid-template-columns:1fr;gap:var(--ndrgs-space-6)}
  .ndrgs-steps,
  .ndrgs-gal{grid-template-columns:repeat(2,1fr)}
  .ndrgs-three,
  .ndrgs-posts ul{grid-template-columns:1fr}
  .ndrgs-ctaband-inner,
  .ndrgs-promo-inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:600px){
  .ndrgs-steps,
  .ndrgs-gal{grid-template-columns:1fr}
  .ndrgs-statbox strong{font-size:26px;line-height:30px}
}

/* ==========================================================================
   20. Refinements from the rendered check
   ========================================================================== */

/* six service cards sit 3 + 3, never 4 + 2 */
.ndrgs-svc-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* CTA band and promo: copy takes the room, the single button sits beside it */
.ndrgs-ctaband-inner>.wp-block-group,
.ndrgs-promo-inner>.wp-block-group{flex:1 1 520px}
.ndrgs-ctaband-inner>.wp-block-buttons,
.ndrgs-promo-inner>.wp-block-buttons{flex:0 0 auto;margin:0}

/* inline text links — brand navy as text, lowest specificity so components win */
:where(.ndrgs-section,.ndrgs-hero,.ndrgs-notice) p a{
  color:var(--ndrgs-brand-text);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
:where(.ndrgs-section,.ndrgs-hero,.ndrgs-notice) p a:hover{color:var(--ndrgs-brand-strong)}
:where(.ndrgs-navy,.ndrgs-hero) p a{color:var(--ndrgs-ink-on-navy)}

/* Roofle instant quote widget — give it room and a raised surface */
.ndrgs-quote-tool{
  background:var(--ndrgs-surface-raised);
  border:1px solid var(--ndrgs-border);
  border-radius:var(--ndrgs-radius-lg);
  box-shadow:var(--ndrgs-shadow-md);
  padding:var(--ndrgs-space-5);
  min-height:320px;
  margin:var(--ndrgs-space-5) 0 var(--ndrgs-space-3);
}

/* legal text keeps its reading measure even inside WordPress's constrained layout */
.ndrgs-section > .ndrgs-legal{max-width:760px}

/* metro cards: more-links and city chips inside a card */
.ndrgs-metro .ndrgs-more{margin-top:var(--ndrgs-space-3);font-size:14px;font-weight:700}
.ndrgs-metro .ndrgs-more a{color:var(--ndrgs-accent-text);text-decoration:none}
.ndrgs-metro .ndrgs-more a:after{content:" \2192"}
.ndrgs-metro .ndrgs-areas{margin-top:var(--ndrgs-space-3)}
.ndrgs-metro .ndrgs-areas a{font-size:14px;padding:8px 16px}

/* tables in reference pages (AI data manifest) */
.ndrgs-legal .wp-block-table{margin:var(--ndrgs-space-4) 0 var(--ndrgs-space-6)}
.ndrgs-legal table{width:100%;border-collapse:collapse;font-size:15px;line-height:23px}
.ndrgs-legal th{text-align:left;font-family:var(--ndrgs-display);font-weight:700;color:var(--ndrgs-ink);background:var(--ndrgs-surface-sunken)}
.ndrgs-legal th,.ndrgs-legal td{border:1px solid var(--ndrgs-border);padding:var(--ndrgs-space-3) var(--ndrgs-space-4);vertical-align:top}
.ndrgs-legal td{color:var(--ndrgs-ink-muted)}
.ndrgs-legal td:first-child{color:var(--ndrgs-ink);font-weight:600;width:30%}

/* ==========================================================================
   21. Design pass — 23 September

   Fixes from a measured layout audit at 1280, 768 and 390px. Everything here
   is CSS only: no page markup changes, so it applies to the pages already
   published.
   ========================================================================== */

/* FAQ sat centered inside a left-aligned section, so the cards started 196px
   in from the heading above them. Align them with the heading and keep a
   reading measure on the answers — 840px of 16px text runs to ~105 characters
   a line, well past comfortable. */
.ndrgs-faq{max-width:880px;margin-left:0;margin-right:0}
.ndrgs-faq .wp-block-details p{max-width:72ch}
.ndrgs-faq .wp-block-details summary{max-width:none}

/* The estimate form is an iframe we cannot measure from outside, so it gets a
   fixed height. 620px made the form scroll inside its own card. Give it more
   height, and more of the row's width than the copy beside it. The width rule
   is scoped above the collapse breakpoint so the single-column phone layout in
   section 19 still wins. */
@media (min-width:901px){
  .ndrgs-est-grid{grid-template-columns:1fr 1.15fr;align-items:start}
}
.ndrgs-est-grid iframe,
.ndrgs-estimate iframe{width:100%;min-height:600px;border:0;border-radius:var(--ndrgs-radius-lg);background:#fff}
@media (max-width:900px){
  .ndrgs-est-grid iframe,
  .ndrgs-estimate iframe{min-height:600px}
}

/* Metro cards on tablets ran to ~97 characters a line. */
.ndrgs-metro p,
.ndrgs-ph p{max-width:68ch}

/* Captions and notes were 13px — under the 14px floor the rest of the system
   keeps for body text. */
.ndrgs-caption{font-size:14px;line-height:20px;max-width:88ch}

/* Phone: the card links were 16px tall, half the 36px a thumb needs. */
@media (max-width:600px){
  .ndrgs-svc .ndrgs-more a,
  .ndrgs-metro .ndrgs-more a{display:inline-block;padding:9px 0;min-height:36px}
}

/* Three gallery tiles in a two-column tablet grid left one orphan on its own
   row. The odd tile spans the full width instead. */
@media (max-width:900px) and (min-width:601px){
  .ndrgs-gal > *:last-child:nth-child(odd){grid-column:1 / -1}
}

/* Edge gutter, in case the parent theme's container ever stops supplying one:
   full-bleed bands keep 20px of breathing room at any width. */
.ndrgs-section,
.ndrgs-hero,
.ndrgs-ctaband,
.ndrgs-promo,
.ndrgs-trustbar-wrap,
.ndrgs-section-tight{padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right))}

/* Phones (28 Sep 2026): on staging the parent theme's full-width rules were
   stripping this gutter and letting bands run wider than the screen, so text
   touched — and was clipped at — the edges. The gutter is enforced here, the
   bands size with their padding included, and nothing can push the page
   sideways. overflow-x:clip (not hidden) keeps the pinned hero working. */
@media (max-width:767px){
  html body .ndrgs-section,
  html body .ndrgs-section-tight,
  html body .ndrgs-hero,
  html body .ndrgs-ctaband,
  html body .ndrgs-promo{
    box-sizing:border-box;
    padding-left:max(20px, env(safe-area-inset-left)) !important;
    padding-right:max(20px, env(safe-area-inset-right)) !important;
  }
  /* inside a band, nothing is wider than the band */
  .ndrgs-section > *,
  .ndrgs-section-tight > *{max-width:100%;box-sizing:border-box}
  body{overflow-x:clip}
}

/* The taller form leaves the copy column short, so the copy follows the form
   down the page instead of stranding white space beside it. */
@media (min-width:901px){
  .ndrgs-est-grid > *:first-child{position:sticky;top:96px;align-self:start}
}

/* The phone number is display type at 32px; inline after a sentence it sat on
   a mismatched baseline. Give it its own line. */
.ndrgs-phone{display:block;margin-top:var(--ndrgs-space-2)}

/* Full-width paragraphs that sit straight in a section (the urgent notice, the
   promotion terms) ran to ~150 characters a line. Cap them at a readable
   measure; paragraphs inside cards and grids are already narrow. */
.ndrgs-section > p,
.ndrgs-section > .wp-block-group > p,
.ndrgs-notice p{max-width:78ch}

/* Phone: a tel: link inside a sentence was a 17px-tall tap target. */
@media (max-width:600px){
  p a[href^="tel:"]{display:inline-block;padding:7px 0}
}

/* Cards share a row, so they share a height. The two-up grid centers its
   children (it is also the copy-beside-photo layout), which left panels sized
   to their own text; a percentage height resolves against the grid area, so
   the card fills the row whatever the alignment. Card bodies become columns so
   a link or chip row can sit on the bottom edge rather than floating up. */
.ndrgs-panel,
.ndrgs-svc,
.ndrgs-metro{height:100%;display:flex;flex-direction:column}
.ndrgs-svc .ndrgs-more,
.ndrgs-metro .ndrgs-more{margin-top:auto}
/* location chips sit directly under the card heading (29 Sep 2026) */
.ndrgs-metro .ndrgs-areas{margin-top:var(--ndrgs-space-3)}
.ndrgs-metro .ndrgs-more{margin-bottom:0}

/* The intro row: the navy stat panel now matches the height of the copy beside
   it, with its stat rows distributed instead of stacking at the top. */
@media (min-width:901px){
  .ndrgs-two{align-items:stretch}
  .ndrgs-statbox{display:flex;flex-direction:column;justify-content:space-between}
  .ndrgs-statbox p{margin-top:0}
}

/* ==========================================================================
   22. Split hero — the two lead-capture pages only

   /free-estimate/ and /instant-roof-quote/ exist to be filled in, so the form
   sits in the hero rather than a screen below it. Copy on the left carries the
   argument; the tool sits on the right in a white card, on the navy.
   ========================================================================== */

.ndrgs-hero--split .ndrgs-hero-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--ndrgs-space-7);
  align-items:start;
}
.ndrgs-hero--split .ndrgs-hero-copy{max-width:none}
.ndrgs-hero--split .ndrgs-body-lg{max-width:52ch}

/* the white card holding the form or the quote tool */
.ndrgs-hero-form{
  background:var(--ndrgs-surface-raised);
  border-radius:var(--ndrgs-radius-lg);
  box-shadow:var(--ndrgs-shadow-lg);
  padding:var(--ndrgs-space-4);
}
.ndrgs-hero-form iframe{width:100%;min-height:600px;border:0;border-radius:var(--ndrgs-radius-md);background:#fff}
.ndrgs-hero-form .ndrgs-quote-tool{
  background:transparent;border:0;box-shadow:none;padding:0;margin:0;min-height:460px;
}
.ndrgs-hero-form .ndrgs-form-note{
  font-size:14px;line-height:20px;color:var(--ndrgs-ink-subtle);
  margin:var(--ndrgs-space-3) var(--ndrgs-space-2) var(--ndrgs-space-1);
}

/* the checklist and small print sit on navy in this hero */
.ndrgs-hero .ndrgs-checklist li{color:var(--ndrgs-ink-on-navy)}
.ndrgs-hero .ndrgs-checklist li{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.ndrgs-hero .ndrgs-caption{color:var(--ndrgs-ink-on-navy);opacity:.8}
.ndrgs-hero .ndrgs-phone{color:var(--ndrgs-ink-on-navy)}
.ndrgs-hero .ndrgs-phone:hover{color:var(--ndrgs-ink-on-navy);opacity:.85}

@media (max-width:900px){
  .ndrgs-hero--split .ndrgs-hero-split{grid-template-columns:1fr;gap:var(--ndrgs-space-6)}
  .ndrgs-hero-form iframe{min-height:600px}
}

/* ---------------------------------------------------------------------------
   23. Product weights (24 Sep 2026, Website W.1)
   Exterior lighting carries 30% of product weight, so its card in the services
   grid spans two columns on a navy ground. Metal and siding get their own icons.
   --------------------------------------------------------------------------- */
.ndrgs-svc--metal:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11L12 4l9 7'/%3E%3Cpath d='M7 8v12M12 4.5V20M17 8v12'/%3E%3C/svg%3E")}
.ndrgs-svc--siding:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='1'/%3E%3Cpath d='M4 8h16M4 12h16M4 16h16'/%3E%3C/svg%3E")}
.ndrgs-svc--featured{background:var(--ndrgs-brand);border-color:var(--ndrgs-brand)}
.ndrgs-svc--featured h3,
.ndrgs-svc--featured p{color:#fff}
.ndrgs-svc--featured .ndrgs-more a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ndrgs-svc--featured.ndrgs-svc--lighting:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 00-3 11v3h6v-3a6 6 0 00-3-11z'/%3E%3C/svg%3E")}
/* Columns are set explicitly whenever a featured card is present, so the span
   can never create an implicit extra column and push the page sideways. */
@media (min-width:1000px){
  .ndrgs-svc-grid:has(> .ndrgs-svc--featured){grid-template-columns:repeat(3,minmax(0,1fr))}
  .ndrgs-svc--featured{grid-column:span 2}
  .ndrgs-svc--featured p{font-size:16px;line-height:26px}
}
@media (min-width:640px) and (max-width:999px){
  .ndrgs-svc-grid:has(> .ndrgs-svc--featured){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ndrgs-svc--featured,
  .ndrgs-svc-grid:has(> .ndrgs-svc--featured) > .ndrgs-svc:last-child:nth-child(even){grid-column:1 / -1}
}
@media (max-width:639px){
  .ndrgs-svc-grid:has(> .ndrgs-svc--featured){grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   24. Homepage split hero (27 Sep 2026, Website W.1f)

   Three panels — Exterior Lighting, Roofing (residential, metal, commercial)
   and Exterior Services (gutter guards, siding, roof life extension, storm
   damage restoration). Each panel is a Cover block, so a photo is added in the
   editor by setting the cover's background image; until then each panel draws
   a placeholder illustration. The H1, stars and the two CTAs sit in a title
   overlay across the top. assets/ndrgs-hero.js opens one panel at a time; with
   no script every panel shows all of its content.

   The placeholder art for each panel key lives in assets/ndrgs-hero-art.css,
   loaded only on pages that carry the hero (generated by tools/xhero_art.py).
   ========================================================================== */

.ndrgs-xhero{
  position:relative;
  background:var(--ndrgs-surface-glow);
  color:#fff;
  padding:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* title overlay */
.ndrgs-xhero-head{
  position:absolute;z-index:3;top:0;left:0;right:0;
  margin:0 !important;
  padding:44px 24px 80px;
  text-align:center;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,40,.94) 0%,rgba(4,16,40,.72) 55%,rgba(4,16,40,0) 100%);
}
.ndrgs-xhero-head > *{pointer-events:auto;margin-left:auto !important;margin-right:auto !important}
.ndrgs-xhero-eyebrow{
  font-family:var(--ndrgs-sans);font-weight:700;font-size:14px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.85;
  margin-top:0 !important;margin-bottom:12px !important;
}
.ndrgs-xhero-title{
  font-family:var(--ndrgs-display);font-weight:800;
  font-size:clamp(26px,3.4vw,46px);line-height:1.08;letter-spacing:-.01em;
  color:#fff;max-width:22ch;
  margin-top:0 !important;margin-bottom:12px !important;
}
.ndrgs-xhero-stars{font-size:14px;line-height:1.4;color:#fff;opacity:.92;margin-top:0 !important;margin-bottom:18px !important}
.ndrgs-xhero-stars .ndrgs-stars{color:#f5c842;font-size:20px;letter-spacing:.08em;vertical-align:-2px;margin-right:4px}
.ndrgs-xhero-ctas{justify-content:center;gap:12px;margin-top:0 !important}

/* the panels */
.ndrgs-xhero-panels{
  display:flex;
  height:clamp(640px,84vh,760px);
  margin:0 !important;
}
.ndrgs-xhero-panels > .ndrgs-xhero-panel{
  flex:1 1 0;min-width:0;min-height:0;
  margin:0 !important;padding:0;
  align-items:flex-end;justify-content:flex-start;
  overflow:hidden;
  border-left:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition:flex-grow .55s cubic-bezier(.2,.7,.2,1);
}
.ndrgs-xhero-panels > .ndrgs-xhero-panel:first-child{border-left:0}
.ndrgs-xhero.is-ready .ndrgs-xhero-panel.is-active{flex-grow:2.1;cursor:default}
.ndrgs-xhero-panel:focus-visible{outline:3px solid var(--ndrgs-focus);outline-offset:-3px}

/* placeholder art until a photo is set on the cover */
.ndrgs-xhero-panel:not(:has(.wp-block-cover__image-background)) > .wp-block-cover__background{
  background-image:var(--ndrgs-xhero-art);
  background-size:cover;background-position:center;
  opacity:1 !important;
}
/* a photo: darker while closed, lighter when open */
.ndrgs-xhero-panel:has(.wp-block-cover__image-background) > .wp-block-cover__background{
  background-color:#0a1223 !important;opacity:.72 !important;transition:opacity .45s;
}
.ndrgs-xhero-panel.is-active:has(.wp-block-cover__image-background) > .wp-block-cover__background{opacity:.38 !important}
.ndrgs-xhero.is-ready .ndrgs-xhero-panel:not(.is-active) > .wp-block-cover__background{filter:brightness(.78) saturate(.8)}
.ndrgs-xhero-panel > .wp-block-cover__background{transition:filter .45s,opacity .45s}

/* shade under the text */
.ndrgs-xhero-panel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,40,0) 42%,rgba(4,16,40,.88) 100%);
}
.ndrgs-xhero-panel > .wp-block-cover__inner-container{
  position:relative;z-index:2;
  width:100%;max-width:none !important;
  padding:28px 28px 34px;
  color:#fff;
}
.ndrgs-xhero-panel .wp-block-cover__inner-container > *{
  margin-left:0 !important;margin-right:0 !important;max-width:36rem;
}

.ndrgs-xhero-label{
  font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;opacity:.78;margin-top:0 !important;margin-bottom:8px !important;
}
.ndrgs-xhero-panel.is-active .ndrgs-xhero-label::before{
  content:"";display:block;width:36px;height:3px;background:var(--ndrgs-accent);margin-bottom:12px;
}
.ndrgs-xhero-name{
  font-family:var(--ndrgs-display);font-weight:800;
  font-size:32px;line-height:1.05;letter-spacing:-.01em;
  color:#fff;margin:0 !important;
  transition:font-size .4s;
}
.ndrgs-xhero-panel.is-active .ndrgs-xhero-name{font-size:42px;letter-spacing:-.02em}
.ndrgs-xhero-tag{font-size:15px;line-height:1.55;color:#fff;opacity:.92;margin-top:12px !important;margin-bottom:0 !important;max-width:46ch}
.ndrgs-xhero-links{margin-top:14px !important;margin-bottom:0 !important;font-size:14px;font-weight:600;line-height:1.4;color:rgba(255,255,255,.55)}
.ndrgs-xhero-links a{
  display:inline-block;padding:6px 0;
  color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);
  text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.ndrgs-xhero-links a:hover,
.ndrgs-xhero-links a:focus-visible{color:#fff;text-decoration-color:var(--ndrgs-accent)}

/* closed panels hide the tag and links (only once the script is running) */
.ndrgs-xhero.is-ready .ndrgs-xhero-tag,
.ndrgs-xhero.is-ready .ndrgs-xhero-links{
  max-height:0;opacity:0;overflow:hidden;visibility:hidden;
  margin-top:0 !important;
  transition:max-height .45s ease,opacity .3s ease,margin .3s ease,visibility 0s linear .3s;
}
.ndrgs-xhero.is-ready .ndrgs-xhero-panel.is-active .ndrgs-xhero-tag{max-height:160px;opacity:.92;visibility:visible;margin-top:12px !important;transition-delay:0s}
.ndrgs-xhero.is-ready .ndrgs-xhero-panel.is-active .ndrgs-xhero-links{max-height:140px;opacity:1;visibility:visible;margin-top:14px !important;transition-delay:0s}

@media (max-width:1023px) and (min-width:768px){
  .ndrgs-xhero-name{font-size:26px}
  .ndrgs-xhero-panel.is-active .ndrgs-xhero-name{font-size:34px}
  .ndrgs-xhero-panel > .wp-block-cover__inner-container{padding:24px 20px 28px}
}

/* the stage and the carousel controls only exist on phones (the script adds
   them); on wider screens the stage steps out of the layout entirely */
.ndrgs-xhero-stage{display:contents}
.ndrgs-xhero-nav{display:none}

/* phone. Without the script: panels stack with their full content.
   With it (.is-carousel): a scroll-linked carousel — the stage pins to the top
   of the screen, one panel shows at a time, and scrolling, the arrows, the
   dots and a swipe all move through the panels before the page carries on. */
@media (max-width:767px){
  .ndrgs-xhero-head{
    padding:14px 20px 12px;text-align:left;
    background:linear-gradient(180deg,#041028 0%,#072561 100%);
    box-shadow:0 6px 18px rgba(4,16,40,.3);
    position:relative;z-index:3;
  }
  .ndrgs-xhero-head > *{margin-left:0 !important;margin-right:0 !important}
  .ndrgs-xhero-eyebrow{font-size:11px;margin-bottom:6px !important}
  .ndrgs-xhero-title{font-size:22px;max-width:none;margin-bottom:6px !important}
  .ndrgs-xhero-stars{font-size:12px;margin-bottom:0 !important}
  .ndrgs-xhero-stars .ndrgs-stars{font-size:15px}
  .ndrgs-xhero-stars-more{display:none}
  /* the hero's two CTAs, full width; they scroll away before the carousel
     pins, and the bottom call bar takes over (section 26) */
  .ndrgs-xhero-ctas{display:flex;flex-wrap:nowrap;gap:10px;margin-top:12px !important}
  .ndrgs-xhero-ctas > .wp-block-button{flex:1 1 0;min-width:0}
  .ndrgs-xhero-ctas .wp-block-button__link{width:100%;padding:12px 10px;font-size:15px;line-height:1.2;text-align:center}
  .ndrgs-xhero-panel::after{background:linear-gradient(180deg,rgba(4,16,40,.1) 0%,rgba(4,16,40,.88) 58%,rgba(4,16,40,.94) 100%)}
  .ndrgs-xhero-panel > .wp-block-cover__inner-container{padding:20px 20px 24px}
  .ndrgs-xhero-name,
  .ndrgs-xhero-panel.is-active .ndrgs-xhero-name{font-size:30px}

  /* no script: stacked, everything visible */
  .ndrgs-xhero:not(.is-carousel) .ndrgs-xhero-panels{display:block;height:auto}
  .ndrgs-xhero:not(.is-carousel) .ndrgs-xhero-panels > .ndrgs-xhero-panel{
    display:flex;height:auto;min-height:340px;
    border-left:0;border-top:1px solid rgba(255,255,255,.14);
  }

  /* the carousel */
  .ndrgs-xhero.is-carousel{overflow:visible}
  .ndrgs-xhero.is-carousel .ndrgs-xhero-stage{
    display:flex;flex-direction:column;
    position:sticky;
    top:calc(var(--wp-admin--admin-bar--height,0px) - var(--ndrgs-xhero-cta-h,0px));
    height:calc(100svh - var(--wp-admin--admin-bar--height,0px) + var(--ndrgs-xhero-cta-h,0px));
    overflow:hidden;
    background:var(--ndrgs-surface-glow);
  }
  @supports not (height:100svh){
    .ndrgs-xhero.is-carousel .ndrgs-xhero-stage{height:calc(100vh - var(--wp-admin--admin-bar--height,0px) + var(--ndrgs-xhero-cta-h,0px))}
  }
  .ndrgs-xhero.is-carousel .ndrgs-xhero-panels{
    display:flex;flex:1 1 auto;min-height:0;height:auto;
    transform:translateX(calc(var(--ndrgs-xhero-i, 0) * -100%));
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
    touch-action:pan-y;
  }
  .ndrgs-xhero.is-carousel .ndrgs-xhero-panels > .ndrgs-xhero-panel{
    flex:0 0 100%;height:auto;min-height:0;border:0;cursor:default;
  }
  /* every slide shows its full content; only one is on screen */
  .ndrgs-xhero.is-carousel .ndrgs-xhero-tag,
  .ndrgs-xhero.is-carousel .ndrgs-xhero-links{
    max-height:none;opacity:1;visibility:visible;overflow:visible;
  }
  .ndrgs-xhero.is-carousel .ndrgs-xhero-tag{margin-top:12px !important;opacity:.92}
  .ndrgs-xhero.is-carousel .ndrgs-xhero-links{margin-top:14px !important}
  .ndrgs-xhero.is-carousel .ndrgs-xhero-panel > .wp-block-cover__background{filter:none}

  /* controls: arrows either side of the panel name and dots; they sit above
     the mobile call bar */
  .ndrgs-xhero.is-carousel .ndrgs-xhero-nav{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px calc(14px + 64px + env(safe-area-inset-bottom));
    background:#041028;border-top:1px solid rgba(255,255,255,.1);
    position:relative;z-index:3;
  }
  .ndrgs-xhero-arrow{
    flex:none;width:44px;height:44px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;
    display:grid;place-items:center;cursor:pointer;padding:0;
  }
  .ndrgs-xhero-arrow::before{
    content:"";width:10px;height:10px;border:solid currentColor;border-width:0 2.5px 2.5px 0;
  }
  .ndrgs-xhero-prev::before{transform:translateX(2px) rotate(135deg)}
  .ndrgs-xhero-next::before{transform:translateX(-2px) rotate(-45deg)}
  .ndrgs-xhero-next.is-last::before{transform:translateY(-2px) rotate(45deg)}
  .ndrgs-xhero-next{background:var(--ndrgs-accent);border-color:var(--ndrgs-accent)}
  .ndrgs-xhero-arrow:disabled{opacity:.3;cursor:default}
  .ndrgs-xhero-arrow:focus-visible{outline:3px solid var(--ndrgs-focus);outline-offset:2px}
  .ndrgs-xhero-where{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
  .ndrgs-xhero-now{
    color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;white-space:pre;
    overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .ndrgs-xhero-dots{display:flex;gap:6px}
  .ndrgs-xhero-dot{
    width:8px;height:8px;border-radius:4px;border:0;padding:0;cursor:pointer;
    background:rgba(255,255,255,.35);transition:width .3s,background .3s;
  }
  .ndrgs-xhero-dot[aria-current="true"]{width:22px;background:#fff}
  /* a bigger tap area around each small dot */
  .ndrgs-xhero-dot{position:relative}
  .ndrgs-xhero-dot::after{content:"";position:absolute;inset:-10px -4px}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .ndrgs-xhero.is-carousel .ndrgs-xhero-panels{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .ndrgs-xhero *,
  .ndrgs-xhero-panels > .ndrgs-xhero-panel{transition:none !important}
}

/* ==========================================================================
   25. Header, the location menu and the location picker (Website W.14)

   Header values carried over from the old build: an 80px bar, 15px navigation
   and a red rule under the header — in the current navy/red palette.

   Menu items take these CSS classes (Appearance > Menus > CSS Classes):
     ndrgs-drop-label  a plain heading inside a dropdown, not a link
     ndrgs-loc-choice  an office choice; its URL is #loc-mason or #loc-noblesville
     ndrgs-loc-mason / ndrgs-loc-noblesville  which office the choice is
     ndrgs-loc-last    the last choice, with a rule under it
   ========================================================================== */

#masthead{border-bottom:3px solid var(--ndrgs-accent)}
.site-main-header-inner-wrap{min-height:64px}
/* the header logo (set in Customize > Header > Logo): sized to the 80px bar */
.site-branding a.brand.has-logo-image img.custom-logo{max-height:50px;width:auto;height:auto}
.site-branding a.brand.has-logo-image .site-title-wrap{display:none}
@media (max-width:1024px){.site-branding a.brand.has-logo-image img.custom-logo{max-height:46px}}
.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-item > a{font-size:15px}

.menu-item.ndrgs-drop-label > a{
  pointer-events:none;cursor:default;
  font-size:11px !important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;padding-bottom:2px !important;
}
.menu-item.ndrgs-drop-label > a .dropdown-nav-toggle{display:none}
.menu-item.ndrgs-loc-choice > a{position:relative;padding-left:2.4em !important}
.menu-item.ndrgs-loc-choice > a::before{
  content:"";position:absolute;left:.9em;top:50%;
  width:12px;height:12px;margin-top:-6px;
  border:2px solid currentColor;border-radius:50%;opacity:.55;box-sizing:border-box;
}
html[data-ndrgs-office="mason"] .menu-item.ndrgs-loc-mason > a::before,
html[data-ndrgs-office="noblesville"] .menu-item.ndrgs-loc-noblesville > a::before{
  background:var(--ndrgs-accent);border-color:var(--ndrgs-accent);opacity:1;
  box-shadow:inset 0 0 0 2px #fff;
}
.menu-item.ndrgs-loc-last{border-bottom:1px solid rgba(127,140,160,.35);margin-bottom:4px;padding-bottom:4px}

/* [ndrgs_location_picker] — cards */
.ndrgs-locpick--cards{margin-top:var(--ndrgs-space-6)}
.ndrgs-locpick__label{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ndrgs-ink-subtle);margin:0 0 var(--ndrgs-space-3);
}
.ndrgs-locpick__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--ndrgs-space-3)}
.ndrgs-locpick__opt{
  position:relative;display:block;
  padding:14px 16px 14px 46px;
  border:1.5px solid var(--ndrgs-border);border-radius:var(--ndrgs-radius-md);
  background:var(--ndrgs-surface-raised);color:var(--ndrgs-ink);text-decoration:none;
  transition:border-color .2s,box-shadow .2s;
}
.ndrgs-locpick__opt:hover{border-color:var(--ndrgs-border-strong);color:var(--ndrgs-ink)}
.ndrgs-locpick__opt strong{display:block;font-size:16px;line-height:1.35}
.ndrgs-locpick__opt span{display:block;font-size:14px;line-height:1.4;color:var(--ndrgs-ink-muted);margin-top:2px}
.ndrgs-locpick__opt::before{
  content:"";position:absolute;left:16px;top:18px;
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--ndrgs-border-strong);box-sizing:border-box;
}
.ndrgs-locpick__opt[aria-current="true"]{border-color:var(--ndrgs-brand);box-shadow:0 0 0 1px var(--ndrgs-brand)}
.ndrgs-locpick__opt[aria-current="true"]::before{
  border-color:var(--ndrgs-accent);background:var(--ndrgs-accent);box-shadow:inset 0 0 0 3px #fff;
}

/* [ndrgs_location_picker style="inline"] — one line */
.ndrgs-locpick--inline{font-size:14px;line-height:1.5;color:var(--ndrgs-ink-muted)}
.ndrgs-locpick--inline .ndrgs-locpick__opt{
  display:inline;padding:0;border:0;background:none;margin-left:.4em;
  color:var(--ndrgs-brand-text);text-decoration:underline;text-underline-offset:3px;
}
.ndrgs-locpick--inline .ndrgs-locpick__opt::before{content:"·";position:static;display:inline-block;margin-right:.4em;width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ndrgs-ink-subtle);text-decoration:none}
.ndrgs-locpick--inline .ndrgs-locpick__opt[aria-current="true"]{display:none}
.ndrgs-navy .ndrgs-locpick--inline,
.ndrgs-navy .ndrgs-locpick--inline .ndrgs-locpick__opt{color:var(--ndrgs-ink-on-navy)}

/* the visitor's office card in the Service Areas section */
.ndrgs-office-card{position:relative;transition:border-color .2s,box-shadow .2s}
html[data-ndrgs-office="mason"] .ndrgs-office-card--mason,
html[data-ndrgs-office="noblesville"] .ndrgs-office-card--noblesville{
  border-color:var(--ndrgs-brand) !important;box-shadow:0 0 0 1px var(--ndrgs-brand),var(--ndrgs-shadow-md);
}
html[data-ndrgs-office="mason"] .ndrgs-office-card--mason::after,
html[data-ndrgs-office="noblesville"] .ndrgs-office-card--noblesville::after{
  content:"Your office";position:absolute;top:-11px;right:16px;
  padding:3px 10px;border-radius:var(--ndrgs-radius-pill);
  background:var(--ndrgs-accent);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

/* ==========================================================================
   26. Call bar — every screen size (28 Sep 2026)

   The visitor's number (swapped like every tel: link) and the estimate button,
   pinned to the bottom of the screen with its right end left clear for the
   HighLevel chat bubble. Phones: full width. Wider screens: tucked into the
   bottom-right corner.

   One set of CTAs at a time: while the page's own hero buttons are on screen
   (html.ndrgs-top-cta-visible, set by ndrgs-tracking.js) the bar slides away,
   and it comes back as soon as they scroll off.
   ========================================================================== */

.ndrgs-mobile-bar{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  position:fixed;z-index:9990;
  background:var(--ndrgs-brand);
  transition:transform .3s ease,visibility 0s linear 0s;
}
.ndrgs-mobile-bar--call-only{grid-template-columns:1fr}
.ndrgs-mobile-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:48px;padding:4px 10px;border-radius:var(--ndrgs-radius-md);
  font-weight:700;font-size:15px;line-height:1.15;text-align:center;text-decoration:none;
}
.ndrgs-mobile-bar__call{background:#fff;color:var(--ndrgs-brand-text)}
.ndrgs-mobile-bar__call:hover{color:var(--ndrgs-brand-text);background:var(--ndrgs-brand-tint)}
.ndrgs-mobile-bar__k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.ndrgs-mobile-bar__cta{background:var(--ndrgs-accent);color:var(--ndrgs-ink-on-accent)}
.ndrgs-mobile-bar__cta:hover{background:var(--ndrgs-accent-strong);color:var(--ndrgs-ink-on-accent)}

/* phones: full width along the bottom edge */
@media (max-width:768px){
  .ndrgs-mobile-bar{
    left:0;right:0;bottom:0;
    padding:8px 84px calc(8px + env(safe-area-inset-bottom)) 10px;
    box-shadow:0 -6px 20px rgba(4,16,40,.25);
  }
  html.ndrgs-top-cta-visible .ndrgs-mobile-bar{
    transform:translateY(110%);visibility:hidden;
    transition:transform .3s ease,visibility 0s linear .3s;
  }
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* tablets and desktops: the same bar, tucked into the bottom-right corner,
   with its right end left clear so the chat bubble sits in it — call, estimate
   and chat read as one group, as they do on phones */
@media (min-width:769px){
  .ndrgs-mobile-bar{
    right:0;bottom:0;left:auto;
    grid-template-columns:auto auto;
    padding:14px 96px 14px 14px;
    border-top-left-radius:var(--ndrgs-radius-lg);
    box-shadow:0 -6px 24px rgba(4,16,40,.25);
  }
  .ndrgs-mobile-bar--call-only{grid-template-columns:auto}
  .ndrgs-mobile-bar a{min-height:52px;padding:6px 20px}
  .ndrgs-mobile-bar__cta{min-width:200px}
  html.ndrgs-top-cta-visible .ndrgs-mobile-bar{
    transform:translateY(110%);visibility:hidden;
    transition:transform .3s ease,visibility 0s linear .3s;
  }
}
@media (prefers-reduced-motion:reduce){.ndrgs-mobile-bar{transition:none}}

/* ==========================================================================
   27. Office-aware content and the Game Day Colors pattern (27 Sep 2026)

   Any block can be shown for one office only with the classes
   ndrgs-office-only ndrgs-office-only--mason / --noblesville. With no office
   known yet (no script, the editor) the Mason version shows.

   .ndrgs-lightstrip is a row of lights chasing along in two colors; the
   --gameday variant takes the visitor's office's home-team colors.
   ========================================================================== */

.ndrgs-office-only--noblesville{display:none !important}
html[data-ndrgs-office="noblesville"] .ndrgs-office-only--noblesville{display:block !important}
html[data-ndrgs-office="noblesville"] .ndrgs-office-only--mason{display:none !important}
span.ndrgs-office-only--noblesville{display:none !important}
html[data-ndrgs-office="noblesville"] span.ndrgs-office-only--noblesville{display:inline !important}

.ndrgs-lightstrip{
  --c1:#ffe2a8;--c2:#ffe2a8;
  height:30px;margin:var(--ndrgs-space-6) 0;border-radius:var(--ndrgs-radius-pill);
  background-color:#050f26;
  background-image:
    radial-gradient(circle at 12px 15px,var(--c1) 0 3.5px,transparent 4.5px),
    radial-gradient(circle at 36px 15px,var(--c2) 0 3.5px,transparent 4.5px),
    radial-gradient(circle at 12px 15px,color-mix(in srgb,var(--c1) 45%,transparent) 0 9px,transparent 12px),
    radial-gradient(circle at 36px 15px,color-mix(in srgb,var(--c2) 35%,transparent) 0 9px,transparent 12px);
  background-size:48px 30px;background-repeat:repeat-x;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 30px rgba(4,16,40,.25);
  animation:ndrgs-chase 1.8s linear infinite;
}
@keyframes ndrgs-chase{to{background-position:48px 0,48px 0,48px 0,48px 0}}
.ndrgs-lightstrip--gameday{--c1:#ff6a1a;--c2:#ffffff}
html[data-ndrgs-office="noblesville"] .ndrgs-lightstrip--gameday{--c1:#2f7df6;--c2:#ffffff}
@media (prefers-reduced-motion:reduce){.ndrgs-lightstrip{animation:none}}

/* color chips: a two-color swatch and a label */
.ndrgs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--ndrgs-space-4)}
.ndrgs-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px 6px 8px;border-radius:var(--ndrgs-radius-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  font-size:14px;font-weight:600;line-height:1.3;color:inherit;
}
.ndrgs-chip::before{
  content:"";width:22px;height:22px;border-radius:50%;flex:none;
  background:linear-gradient(90deg,var(--a) 0 50%,var(--b) 50% 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
}
.ndrgs-chip--orange-white{--a:#ff6a1a;--b:#ffffff}
.ndrgs-chip--red-white{--a:#e11d2e;--b:#ffffff}
.ndrgs-chip--orange-blue{--a:#ff6a1a;--b:#1f4fd6}
.ndrgs-chip--red-black{--a:#e11d2e;--b:#111111}
.ndrgs-chip--blue-white{--a:#2f7df6;--b:#ffffff}
.ndrgs-chip--blue-gold{--a:#1f4fd6;--b:#f2b705}
.ndrgs-chip--crimson-cream{--a:#9d1535;--b:#f3ead3}
.ndrgs-chip--gold-black{--a:#cfb53b;--b:#111111}
.ndrgs-sunken .ndrgs-chip,.ndrgs-section:not(.ndrgs-navy) .ndrgs-chip{background:var(--ndrgs-surface-raised);border-color:var(--ndrgs-border);color:var(--ndrgs-ink)}
.ndrgs-navy .ndrgs-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}

/* ==========================================================================
   28. Photos (media library, September 2026 upload)
   Image blocks that replaced the photo placeholders, the warranty badge, the
   office-aware game day photo and the JellyFish mark in the trust bar.
   ========================================================================== */
.wp-block-image.ndrgs-photo{margin:var(--ndrgs-space-6) 0 0}
.wp-block-image.ndrgs-photo img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--ndrgs-radius-lg);box-shadow:0 10px 30px rgba(7,37,97,.14);
}
.ndrgs-two > .wp-block-image.ndrgs-photo{margin-top:0}
.wp-block-image.ndrgs-photo--wide img{aspect-ratio:16/9;max-height:520px}
.wp-block-image.ndrgs-photo--banner img{aspect-ratio:auto;object-fit:contain;box-shadow:none;border-radius:0}
.wp-block-image.ndrgs-badge{margin:var(--ndrgs-space-4) 0 0}
.wp-block-image.ndrgs-badge img{display:block;width:120px;height:auto}
.ndrgs-office-only .wp-block-image.ndrgs-photo img{aspect-ratio:16/9}

/* game day hero panel: the photo follows the visitor's office (W.14) */
.ndrgs-xhero .ndrgs-xhero-panel--gameday{
  --ndrgs-xhero-art:linear-gradient(rgba(10,18,35,.62),rgba(10,18,35,.62)),url("/wp-content/uploads/2026/09/Jellyfish_Exterior_Lighting_Gameday_Bengals_Cincy.jpeg");
}
html[data-ndrgs-office="noblesville"] .ndrgs-xhero .ndrgs-xhero-panel--gameday{
  --ndrgs-xhero-art:linear-gradient(rgba(10,18,35,.62),rgba(10,18,35,.62)),url("/wp-content/uploads/2026/09/Jellyfish_Exterior_Lighting_Gameday_Colts_Indy.jpeg");
}
.ndrgs-xhero .ndrgs-xhero-panel--gameday.is-active{
  --ndrgs-xhero-art:linear-gradient(rgba(10,18,35,.3),rgba(10,18,35,.3)),url("/wp-content/uploads/2026/09/Jellyfish_Exterior_Lighting_Gameday_Bengals_Cincy.jpeg");
}
html[data-ndrgs-office="noblesville"] .ndrgs-xhero .ndrgs-xhero-panel--gameday.is-active{
  --ndrgs-xhero-art:linear-gradient(rgba(10,18,35,.3),rgba(10,18,35,.3)),url("/wp-content/uploads/2026/09/Jellyfish_Exterior_Lighting_Gameday_Colts_Indy.jpeg");
}

/* JellyFish mark in place of the bulb icon on the trust bar */
.ndrgs-trustbar .ndrgs-trust.ndrgs-icon-bulb{
  background-image:url("/wp-content/uploads/2026/09/jellyfish_lighting_clear.png");
  background-size:28px 28px;background-position:left 0;
}

/* Split hero text stays solid white over photos (28 Sep 2026): no see-through
   text, a soft shadow for legibility on bright photos, and a deeper shade at
   the foot of any panel that has a photo. */
/* WordPress core forces the inner container to z-index:1 on covers that have an
   image (body:not(.editor-styles-wrapper) .wp-block-cover:not(:has(...)) ...), which
   put the ::after shade on top of the text. Pin the stack explicitly. */
.ndrgs-xhero-panel > .wp-block-cover__image-background{z-index:0 !important}
.ndrgs-xhero-panel > .wp-block-cover__background{z-index:1 !important}
.ndrgs-xhero-panel::after{z-index:2 !important}
.ndrgs-xhero-panel > .wp-block-cover__inner-container{position:relative !important;z-index:3 !important;opacity:1 !important;filter:none !important;color:#fff !important}
.ndrgs-xhero-panel .ndrgs-xhero-label,
.ndrgs-xhero-panel .ndrgs-xhero-name,
.ndrgs-xhero-panel .ndrgs-xhero-tag,
.ndrgs-xhero-panel .ndrgs-xhero-links,
.ndrgs-xhero-panel .ndrgs-xhero-links a{color:#fff !important;text-shadow:0 1px 3px rgba(4,16,40,.75),0 0 18px rgba(4,16,40,.45)}
.ndrgs-xhero-panel .ndrgs-xhero-label{opacity:1}
.ndrgs-xhero.is-ready .ndrgs-xhero-panel.is-active .ndrgs-xhero-tag,
.ndrgs-xhero.is-carousel .ndrgs-xhero-tag{opacity:1}
.ndrgs-xhero-links a{text-decoration-color:rgba(255,255,255,.7)}
.ndrgs-xhero-panel:has(.wp-block-cover__image-background)::after,
.ndrgs-xhero .ndrgs-xhero-panel--gameday::after{
  background:linear-gradient(180deg,rgba(4,16,40,0) 30%,rgba(4,16,40,.55) 60%,rgba(4,16,40,.92) 100%);
}
.ndrgs-xhero-panel.is-active:has(.wp-block-cover__image-background) > .wp-block-cover__background{opacity:.45 !important}

/* Slimmer header (28 Sep 2026): a 64px bar (56px on phones), no padding above or
   below the logo, and no white gap between the header's red rule and the hero. */
.site-main-header-wrap .site-header-row-container-inner{padding-top:0 !important;padding-bottom:0 !important}
.site-main-header-inner-wrap,.site-header-main-section-left,.site-header-main-section-right{min-height:64px !important}
.site-branding{padding-top:4px !important;padding-bottom:4px !important}
#mobile-header .site-main-header-inner-wrap,#mobile-header .site-header-main-section-left,#mobile-header .site-header-main-section-right{min-height:56px !important}
#mobile-header .site-branding a.brand.has-logo-image img.custom-logo{max-height:42px}
body.page .content-area{margin-top:0 !important}
body.page .entry-content-wrap{padding-top:0 !important}
body.page article.entry{margin-top:0 !important}
body.page .entry-content > :first-child,
body.page .entry-content > .ndrgs-xhero,
body.page .entry-content > .ndrgs-hero{margin-top:0 !important}

/* Mid-page estimate form and vertical reviews on service and product pages (28 Sep 2026) */
.ndrgs-midform > .wp-block-html,
.ndrgs-midform > iframe{max-width:760px}
.ndrgs-midform iframe{display:block;width:100%;margin-top:var(--ndrgs-space-6)}


/* ==========================================================================
   29. One content column, and equal-height card rows (28 Sep 2026)

   Every section lines its eyebrow, heading, lede, grids and FAQs up on the
   same left edge: the left edge of the content column. A child narrower than
   the column (a 660px lede, the FAQ list, the mid-page form) keeps its width
   but starts on that edge instead of floating to the middle. Section text is
   left-aligned throughout.

   Cards that sit side by side in a row are all the height of the tallest one,
   and a card's closing link or button sits on its bottom edge.
   ========================================================================== */
:root{--ndrgs-content:var(--wp--style--global--content-size, 1200px)}
.ndrgs-section > :not(.alignfull):not(.alignwide),
.ndrgs-section-tight > :not(.alignfull):not(.alignwide),
.ndrgs-ctaband > :not(.alignfull):not(.alignwide){
  margin-left:max(0px, calc((100% - var(--ndrgs-content)) / 2)) !important;
  margin-right:auto !important;
}
.ndrgs-section > :where(:not(.alignfull):not(.alignwide)),
.ndrgs-section-tight > :where(:not(.alignfull):not(.alignwide)),
.ndrgs-ctaband > :where(:not(.alignfull):not(.alignwide)){max-width:min(100%, var(--ndrgs-content))}
.ndrgs-section > .ndrgs-eyebrow,
.ndrgs-section > .wp-block-heading,
.ndrgs-section > p,
.ndrgs-section-tight > .ndrgs-eyebrow,
.ndrgs-section-tight > .wp-block-heading,
.ndrgs-section-tight > p{text-align:left}
.ndrgs-section > .ndrgs-eyebrow{width:auto}
.ndrgs-faq{margin-left:0;margin-right:auto}

/* rows of cards stretch to one height */
.ndrgs-three,.ndrgs-svc-grid,.ndrgs-steps,.ndrgs-trustbar,.ndrgs-gal,.ndrgs-posts ul,.ndrgs-warranty,
.ndrgs-locpick__opts,
.ndrgs-local-grid:has(> .ndrgs-metro),
.ndrgs-local-grid:has(> .ndrgs-panel),
.ndrgs-two:has(> .ndrgs-panel){align-items:stretch}
.ndrgs-three > *,.ndrgs-svc-grid > *,.ndrgs-steps > *,.ndrgs-gal > *,.ndrgs-warranty > *,
.ndrgs-local-grid > .ndrgs-metro,.ndrgs-local-grid > .ndrgs-panel,.ndrgs-two > .ndrgs-panel{
  height:100%;box-sizing:border-box;margin-top:0 !important;margin-bottom:0 !important;
}
.ndrgs-panel,.ndrgs-metro,.ndrgs-svc,.ndrgs-step{display:flex;flex-direction:column}
.ndrgs-panel > *,.ndrgs-metro > *,.ndrgs-svc > *,.ndrgs-step > *{flex:0 0 auto}
.ndrgs-metro > .ndrgs-more,
.ndrgs-panel > .wp-block-buttons:last-child,
.ndrgs-svc > .wp-block-buttons:last-child,
.ndrgs-svc > p:last-child:has(> a:only-child){margin-top:auto !important;padding-top:var(--ndrgs-space-4)}
.ndrgs-locpick--cards .ndrgs-locpick__opt{height:100%;box-sizing:border-box}
.ndrgs-posts ul > li{height:100%}


/* ==========================================================================
   30. Call bar above the chat widget (28 Sep 2026)

   The HighLevel chat widget sits in its own full-height layer in the corner,
   which covered the call bar's buttons (only their edges took a click). The
   buttons now sit in a bar above everything, stopping short of the chat
   bubble; a navy "tail" under the widget fills the space behind the bubble, so
   call, estimate and chat still read as one strip. ndrgs-tracking.js keeps the
   bar the last element on the page and sets --ndrgs-bar-h for the tail.
   ========================================================================== */
.ndrgs-mobile-bar{z-index:2147483647}
.ndrgs-mobile-bar-tail{
  position:fixed;right:0;bottom:0;z-index:9990;pointer-events:none;
  height:var(--ndrgs-bar-h,64px);background:var(--ndrgs-brand);
  box-shadow:0 -6px 20px rgba(4,16,40,.25);clip-path:inset(-30px 0 0 0);
  transition:transform .3s ease,visibility 0s linear 0s;
}
@media (max-width:768px){
  .ndrgs-mobile-bar{right:84px;padding-right:8px;clip-path:inset(-30px 0 0 0)}
  .ndrgs-mobile-bar-tail{width:84px}
  html.ndrgs-top-cta-visible .ndrgs-mobile-bar-tail{
    transform:translateY(110%);visibility:hidden;
    transition:transform .3s ease,visibility 0s linear .3s;
  }
}
@media (min-width:769px){
  .ndrgs-mobile-bar{right:96px;padding-right:14px;clip-path:inset(-30px 0 0 -30px)}
  .ndrgs-mobile-bar-tail{width:96px}
  html.ndrgs-top-cta-visible .ndrgs-mobile-bar-tail{
    transform:translateY(110%);visibility:hidden;
    transition:transform .3s ease,visibility 0s linear .3s;
  }
}
@media (prefers-reduced-motion:reduce){.ndrgs-mobile-bar-tail{transition:none}}

/* ==========================================================================
   31. Full-width sections butt together; back-to-back navy reads as one band
   (28 Sep 2026)

   Full-width sections sit edge to edge, with no white strip from the block
   gap between them. Where one navy section follows another (the CTA band
   straight into the review wall, on 13 pages), the second continues the first:
   no gap, a shorter top, and a faint rule across the content column.
   ========================================================================== */
.entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull + .alignfull{margin-top:0 !important;margin-bottom:0 !important}
:is(.ndrgs-navy, .ndrgs-ctaband:not(.ndrgs-ctaband--red)) + :is(.ndrgs-navy, .ndrgs-ctaband:not(.ndrgs-ctaband--red)){
  position:relative;padding-top:var(--ndrgs-space-7) !important;
}
:is(.ndrgs-navy, .ndrgs-ctaband:not(.ndrgs-ctaband--red)) + :is(.ndrgs-navy, .ndrgs-ctaband:not(.ndrgs-ctaband--red))::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 40px), var(--ndrgs-content));height:1px;background:rgba(255,255,255,.16);
}

/* The review grid widget (Reviews Vertical pattern) spans the full content
   column, so it can show its three-across grid on desktop (28 Sep 2026). */
.ndrgs-reviews-vertical > :not(.ndrgs-eyebrow):not(.wp-block-heading):not(script){
  width:100%;max-width:var(--ndrgs-content) !important;
}


/* ==========================================================================
   32. Credential badges and photo pairs (28 Sep 2026 upload)
   The trust bar shows each credential's own badge above its text; the icon
   items (gutters, JellyFish) sit in the same 44px mark row so the text lines up.
   The BBB item links to the BBB profile; the whole item is the link.
   ========================================================================== */
.ndrgs-trustbar .ndrgs-trust{
  position:relative;padding-left:0;padding-top:54px;
  background-position:left top;background-size:auto 44px;
}
.ndrgs-trustbar .ndrgs-trust.ndrgs-icon-gutter{background-size:32px 32px;background-position:left 6px}
.ndrgs-trustbar .ndrgs-trust.ndrgs-icon-bulb{background-size:40px 40px;background-position:left 2px}
.ndrgs-trustbar .ndrgs-mark-gaf{background-image:url("/wp-content/uploads/2026/09/gaf_warranty_badge.png")}
.ndrgs-trustbar .ndrgs-mark-bbb{background-image:url("/wp-content/uploads/2026/09/bbb_accredited_badge.png")}
.ndrgs-trustbar .ndrgs-mark-ha{background-image:url("/wp-content/uploads/2026/09/homeadvisor_elite_service_badge.webp")}
.ndrgs-trustbar .ndrgs-trust a{color:inherit;text-decoration:none}
.ndrgs-trustbar .ndrgs-trust a::after{content:"";position:absolute;inset:0}
.ndrgs-trustbar .ndrgs-trust a:hover strong,
.ndrgs-trustbar .ndrgs-trust a:focus-visible strong{text-decoration:underline}
.ndrgs-trustbar .ndrgs-trust a:focus-visible{outline:none}
.ndrgs-trustbar .ndrgs-trust:has(a:focus-visible){outline:2px solid var(--ndrgs-navy,#072561);outline-offset:4px;border-radius:4px}
@media (max-width:600px){
  .ndrgs-trustbar .ndrgs-trust{padding-top:0;padding-left:84px;min-height:44px;background-size:72px auto;background-position:left center}
  .ndrgs-trustbar .ndrgs-trust.ndrgs-icon-gutter{background-size:32px 32px;background-position:20px center}
  .ndrgs-trustbar .ndrgs-trust.ndrgs-icon-bulb{background-size:40px 40px;background-position:16px center}
}

/* diagrams and graphics with text in them are never cropped */
.wp-block-image.ndrgs-photo--contain img{aspect-ratio:auto;object-fit:contain;background:#fff}
.ndrgs-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndrgs-space-6);align-items:center;margin-top:var(--ndrgs-space-7)}
.ndrgs-photo-pair > .wp-block-image.ndrgs-photo{margin:0}
.ndrgs-photo-pair > .wp-block-image.ndrgs-photo img{width:auto;max-width:100%;max-height:460px;margin-inline:auto}
@media (max-width:781px){.ndrgs-photo-pair{grid-template-columns:1fr}}

/* GAF warranty badge inside the "What you get" box */
.ndrgs-statbox{position:relative}
.ndrgs-statbox .wp-block-image.ndrgs-badge{position:absolute;top:20px;right:20px;margin:0}
.ndrgs-statbox .wp-block-image.ndrgs-badge img{width:76px}

/* Exterior lighting steps: square installers photo beside the steps, 2x2 */
.ndrgs-steps-split{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.ndrgs-steps-split .ndrgs-steps{grid-template-columns:1fr 1fr}
.ndrgs-steps-split > .wp-block-image.ndrgs-photo{margin:0}
.wp-block-image.ndrgs-photo--square img{aspect-ratio:1/1}
@media (max-width:900px){.ndrgs-steps-split{grid-template-columns:1fr}.ndrgs-steps-split > .wp-block-image.ndrgs-photo{max-width:480px}}
@media (max-width:600px){.ndrgs-steps-split .ndrgs-steps{grid-template-columns:1fr}}

/* ==========================================================================
   33. Taller desktop header, full-screen split hero (28 Sep 2026)
   The desktop header grows to 80px so the logo reads; the split hero then fills
   the rest of the screen exactly, so nothing of the next block shows at the top
   of the page. Phones (the scroll carousel) are unchanged.
   ========================================================================== */
:root{--ndrgs-header-h:83px}                 /* 80px bar + 3px red rule */
@media (min-width:1025px){
  .site-main-header-inner-wrap,.site-header-main-section-left,.site-header-main-section-right{min-height:80px !important}
  .site-branding a.brand.has-logo-image img.custom-logo{max-height:68px}
}
@media (max-width:1024px){:root{--ndrgs-header-h:59px}}   /* 56px tablet header + rule */
@media (min-width:768px){
  .ndrgs-xhero-panels{
    height:calc(100vh - var(--ndrgs-header-h) - var(--wp-admin--admin-bar--height,0px));
    height:calc(100svh - var(--ndrgs-header-h) - var(--wp-admin--admin-bar--height,0px));
    min-height:560px;
  }
}

/* ==========================================================================
   34. Photo behind single-page heroes (28 Sep 2026)
   A navy shade runs from solid behind the copy to lighter on the right so the
   photo shows without costing the text any contrast. Same stacking fix as the
   split hero (WordPress core otherwise lifts the shade over the text).
   ========================================================================== */
.ndrgs-hero > .wp-block-cover__image-background{position:absolute !important;inset:0;width:100% !important;height:100% !important;max-width:none;margin:0;padding:0;border:0;object-fit:cover;object-position:center;z-index:0 !important}
.ndrgs-hero:has(> .wp-block-cover__image-background) > .wp-block-cover__background{
  z-index:1 !important;opacity:1 !important;background-color:transparent !important;
  background-image:linear-gradient(90deg,rgba(7,37,97,.96) 0%,rgba(7,37,97,.88) 45%,rgba(7,37,97,.55) 100%) !important;
}
.ndrgs-hero > .wp-block-cover__inner-container{position:relative !important;z-index:2 !important;color:#fff}
.ndrgs-hero:has(> .wp-block-cover__image-background) h1,
.ndrgs-hero:has(> .wp-block-cover__image-background) p{text-shadow:0 1px 12px rgba(4,16,40,.35)}
@media (max-width:781px){
  .ndrgs-hero:has(> .wp-block-cover__image-background) > .wp-block-cover__background{
    background-image:linear-gradient(180deg,rgba(7,37,97,.78),rgba(7,37,97,.9)) !important;
  }
}

/* ==========================================================================
   35. Location pages: house photo behind the hero from the theme (29 Sep 2026)
   Any location hero without its own photo gets generic_home.jpg under the same
   navy shade as section 34. A photo set on the page itself still wins.
   ========================================================================== */
.ndrgs-location .ndrgs-hero:not(:has(> .wp-block-cover__image-background)){
  background:linear-gradient(90deg,rgba(7,37,97,.96) 0%,rgba(7,37,97,.88) 45%,rgba(7,37,97,.55) 100%),
             url("/wp-content/uploads/2026/09/generic_home.jpg") center/cover no-repeat;
}
.ndrgs-location .ndrgs-hero:not(:has(> .wp-block-cover__image-background)) > .wp-block-cover__background{opacity:0 !important}
.ndrgs-location .ndrgs-hero h1,.ndrgs-location .ndrgs-hero p{text-shadow:0 1px 12px rgba(4,16,40,.35)}
@media (max-width:781px){
  .ndrgs-location .ndrgs-hero:not(:has(> .wp-block-cover__image-background)){
    background:linear-gradient(180deg,rgba(7,37,97,.78),rgba(7,37,97,.9)),
               url("/wp-content/uploads/2026/09/generic_home.jpg") center/cover no-repeat;
  }
}

/* Trust bar badges, larger and centered (29 Sep 2026). At 44px the GAF badge's
   fine print was shrunk past legibility; each badge now gets a 72px mark row,
   sized to its shape, and every item is centered in its column. */
@media (min-width:601px){
  .ndrgs-trustbar .ndrgs-trust{
    text-align:center;padding-left:0;padding-top:86px;
    background-position:center top;
  }
  .ndrgs-trustbar .ndrgs-mark-gaf{background-size:auto 72px}
  .ndrgs-trustbar .ndrgs-mark-ha{background-size:auto 68px;background-position:center 2px}
  .ndrgs-trustbar .ndrgs-mark-bbb{background-size:auto 56px;background-position:center 8px}
  .ndrgs-trustbar .ndrgs-trust.ndrgs-icon-gutter{background-size:40px 40px;background-position:center 16px}
  .ndrgs-trustbar .ndrgs-trust.ndrgs-icon-bulb{background-size:52px 52px;background-position:center 10px}
}
@media (max-width:600px){
  .ndrgs-trustbar .ndrgs-trust{padding-left:100px;min-height:64px}
  .ndrgs-trustbar .ndrgs-mark-gaf,.ndrgs-trustbar .ndrgs-mark-ha{background-size:auto 64px;background-position:14px center}
  .ndrgs-trustbar .ndrgs-mark-bbb{background-size:88px auto;background-position:left center}
  .ndrgs-trustbar .ndrgs-trust.ndrgs-icon-gutter{background-size:32px 32px;background-position:28px center}
  .ndrgs-trustbar .ndrgs-trust.ndrgs-icon-bulb{background-size:44px 44px;background-position:22px center}
  .ndrgs-trustbar .ndrgs-mark-gaf,.ndrgs-trustbar .ndrgs-mark-ha{background-position:12px center}
}

/* ==========================================================================
   36. Homepage title: "Next Day <word> Solutions" with a flipping word (29 Sep 2026)
   The word follows the hero panel in focus (ndrgs-hero.js); the flip is a
   short rotateX out and in. The wrapper eases its width so the words around
   it glide rather than jump.
   ========================================================================== */
.ndrgs-flip{
  display:inline-block;white-space:nowrap;vertical-align:bottom;
  perspective:600px;transition:width .28s cubic-bezier(.2,.7,.2,1);
}
.ndrgs-flip-word{display:inline-block;transform-origin:50% 60%;backface-visibility:hidden;will-change:transform;color:var(--ndrgs-accent)}
/* brand red on the hero's dark title shade is about 3.5:1, above the 3:1 needed for large text */
@media (prefers-reduced-motion:reduce){.ndrgs-flip{transition:none}}
/* the short brand title sits on one line, a touch larger, instead of wrapping at 22ch */
.ndrgs-xhero-title:has(.ndrgs-flip){max-width:none}
@media (min-width:600px){
  .ndrgs-xhero-title:has(.ndrgs-flip){white-space:nowrap;font-size:clamp(34px,4.4vw,64px)}
}

/* warranty badges are square JPEGs: soften the corners so they read as badges */
.wp-block-image.ndrgs-badge img{border-radius:14px}

/* Trust bar (29 Sep 2026): GAF Certified contractor badge, and the NDRGS quality
   guarantee badge in place of the 30-year gutter item */
.ndrgs-trustbar .ndrgs-mark-gafcert{background-image:url("/wp-content/uploads/2026/09/gaf_certified_badge.png")}
.ndrgs-trustbar .ndrgs-mark-quality{background-image:url("/wp-content/uploads/2026/09/ndrgs_quality_guarantee_badge-300x300.png")}
@media (min-width:601px){
  .ndrgs-trustbar .ndrgs-mark-gafcert,
  .ndrgs-trustbar .ndrgs-mark-quality{background-size:auto 72px;background-position:center top}
}
@media (max-width:600px){
  .ndrgs-trustbar .ndrgs-mark-gafcert,
  .ndrgs-trustbar .ndrgs-mark-quality{background-size:auto 64px;background-position:12px center}
}

/* ==========================================================================
   37. Split hero brought in line with the standard heroes (29 Sep 2026)
   The split hero was shaded in near-black (#0a1223 / #041028) and measured
   about 40% darker than a standard photo hero. It now uses the same brand navy
   shade and lighter layers: open panel, closed panels, title band and the
   shade under each panel's text.
   ========================================================================== */
.ndrgs-xhero-panel:has(.wp-block-cover__image-background) > .wp-block-cover__background{
  background-color:#072561 !important;opacity:.55 !important;
}
.ndrgs-xhero-panel.is-active:has(.wp-block-cover__image-background) > .wp-block-cover__background{opacity:.3 !important}
.ndrgs-xhero.is-ready .ndrgs-xhero-panel:not(.is-active) > .wp-block-cover__background{filter:brightness(.92) saturate(.9)}
.ndrgs-xhero-panel:has(.wp-block-cover__image-background)::after,
.ndrgs-xhero .ndrgs-xhero-panel--gameday::after{
  background:linear-gradient(180deg,rgba(7,37,97,0) 34%,rgba(7,37,97,.45) 62%,rgba(7,37,97,.86) 100%);
}
/* the title band stays a deeper navy so the red title word keeps 3:1 contrast */
.ndrgs-xhero-head{
  background:linear-gradient(180deg,rgba(4,22,59,.95) 0%,rgba(4,22,59,.9) 45%,rgba(5,26,69,.55) 75%,rgba(7,37,97,0) 100%);
}
@media (max-width:767px){
  .ndrgs-xhero-panel::after{background:linear-gradient(180deg,rgba(7,37,97,.08) 0%,rgba(7,37,97,.8) 58%,rgba(7,37,97,.9) 100%)}
}
.ndrgs-xhero-head{background:linear-gradient(180deg,rgba(4,22,59,.96) 0%,rgba(4,22,59,.93) 48%,rgba(5,26,69,.55) 76%,rgba(7,37,97,0) 100%)}
.ndrgs-flip-word{text-shadow:0 0 22px rgba(4,16,40,.75),0 0 8px rgba(4,16,40,.6),0 2px 3px rgba(4,16,40,.5)}
/* pin split-hero photos to their panel without relying on core cover CSS */
.ndrgs-xhero-panel > .wp-block-cover__image-background{position:absolute !important;inset:0;width:100% !important;height:100% !important;max-width:none;margin:0;padding:0;border:0;object-fit:cover}

/* ==========================================================================
   38. Lighting gallery pattern and image carousel (29 Sep 2026)
   A dark band so the lights read as they do at night; the wide "same house,
   different colors" banner runs edge to edge; below it a swipeable strip of
   photos (gallery block .ndrgs-carousel, arrows from ndrgs-carousel.js).
   ========================================================================== */
.ndrgs-lightshow{background:#061634;color:#fff}
.ndrgs-lightshow h2,.ndrgs-lightshow p{color:#fff}
.ndrgs-lightshow .ndrgs-eyebrow{color:#ff5a5f}
.ndrgs-lightshow .ndrgs-body-lg{opacity:.9}
.ndrgs-lightshow .ndrgs-more a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.ndrgs-lightshow .ndrgs-more a:hover{text-decoration-color:#fff}
/* the banner runs the full width of the screen and always scales to fit it:
   never cropped, never wider than the screen (it was blowing up on phones) */
.ndrgs-lightshow > .wp-block-image.ndrgs-lightshow-banner{
  width:100% !important;max-width:none !important;box-sizing:border-box;
  margin-top:var(--ndrgs-space-6) !important;margin-bottom:var(--ndrgs-space-6) !important;
}
.ndrgs-lightshow-banner img{
  display:block;width:100% !important;max-width:100% !important;height:auto !important;
  aspect-ratio:4/1;object-fit:contain;
}
@media (max-width:781px){
  .ndrgs-lightshow > .wp-block-image.ndrgs-lightshow-banner{
    width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:0 !important;
  }
}

.ndrgs-carousel-wrap{position:relative}
.wp-block-gallery.ndrgs-carousel{
  display:flex !important;flex-wrap:nowrap !important;gap:16px !important;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 !important;padding:4px 2px 8px;
}
.wp-block-gallery.ndrgs-carousel::-webkit-scrollbar{display:none}
.wp-block-gallery.ndrgs-carousel:focus-visible{outline:3px solid var(--ndrgs-focus,#ffbf47);outline-offset:4px}
.wp-block-gallery.has-nested-images.ndrgs-carousel figure.wp-block-image:not(#individual-image){
  flex:0 0 clamp(240px,31%,420px) !important;width:auto !important;margin:0 !important;
  scroll-snap-align:start;position:relative;border-radius:var(--ndrgs-radius-lg);overflow:hidden;
}
.wp-block-gallery.has-nested-images.ndrgs-carousel figure.wp-block-image img{
  width:100% !important;height:auto !important;aspect-ratio:4/3;object-fit:cover !important;display:block;
}
.wp-block-gallery.has-nested-images.ndrgs-carousel figure.wp-block-image figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 14px 10px;
  background:linear-gradient(180deg,rgba(6,22,52,0),rgba(6,22,52,.85));
  color:#fff;font-size:14px;font-weight:600;text-align:left;
}
.ndrgs-carousel-btn{
  position:absolute;top:calc(50% - 24px);z-index:2;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:#fff;color:var(--ndrgs-brand);box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.ndrgs-carousel-btn svg{width:22px;height:22px}
.ndrgs-carousel-btn:hover{background:var(--ndrgs-accent);color:#fff}
.ndrgs-carousel-btn:focus-visible{outline:3px solid var(--ndrgs-focus,#ffbf47);outline-offset:2px}
.ndrgs-carousel-prev{left:-10px}
.ndrgs-carousel-next{right:-10px}
@media (max-width:781px){
  .wp-block-gallery.has-nested-images.ndrgs-carousel figure.wp-block-image:not(#individual-image){flex-basis:78% !important}
  .ndrgs-carousel-btn{width:40px;height:40px;top:calc(50% - 20px)}
  .ndrgs-carousel-prev{left:4px}.ndrgs-carousel-next{right:4px}
}
@media (prefers-reduced-motion:reduce){.wp-block-gallery.ndrgs-carousel{scroll-behavior:auto}}

/* ==========================================================================
   39. Instant quote band, slimmed and livened up (29 Sep 2026)
   The phone layout stacked the band vertically but kept the copy's 520px
   flex-basis, which became a 520px-tall empty block. Now: a tighter band with
   a soft red-and-blue glow, a "17 seconds" chip with a clock, the button with
   a moving arrow, and the reassurance line tucked under the button.
   ========================================================================== */
.ndrgs-ctaband--quote{
  position:relative;overflow:hidden;
  padding-top:var(--ndrgs-space-7) !important;padding-bottom:var(--ndrgs-space-7) !important;
  background:
    radial-gradient(ellipse 60% 120% at 92% 10%, rgba(211,13,20,.38), rgba(211,13,20,0) 60%),
    radial-gradient(ellipse 50% 90% at 0% 100%, rgba(64,120,255,.28), rgba(64,120,255,0) 60%),
    linear-gradient(135deg,#0b2a6b 0%,#072561 45%,#061634 100%);
}
/* faint roofline chevrons in the background */
.ndrgs-ctaband--quote::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0 50 L60 10 L120 50' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-size:120px 60px;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 100%);mask-image:linear-gradient(90deg,transparent 35%,#000 100%);
}
.ndrgs-ctaband--quote > *{position:relative;z-index:1}
.ndrgs-ctaband--quote .ndrgs-ctaband-inner{align-items:center;gap:var(--ndrgs-space-6)}
.ndrgs-ctaband--quote .ndrgs-ctaband-inner > .wp-block-group:first-child{flex:1 1 480px}
.ndrgs-ctaband--quote h2{margin:10px 0 8px !important;font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.01em;max-width:24ch}
.ndrgs-ctaband--quote p{margin:0 !important;max-width:58ch}
.ndrgs-ctaband-chip{
  display:inline-flex;align-items:center;gap:8px;margin:0 !important;
  padding:6px 12px 6px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:1 !important;
}
.ndrgs-ctaband-chip::before{
  content:"";width:16px;height:16px;flex:0 0 16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a5f' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9 2h6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ndrgs-ctaband-action{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.ndrgs-ctaband-action .wp-block-buttons{margin:0}
.ndrgs-ctaband-action .ndrgs-note{font-size:13px !important;line-height:18px;opacity:.75;text-align:center}
.ndrgs-ctaband--quote .ndrgs-btn-onnavy .wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;padding:16px 26px;font-size:17px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s;
}
.ndrgs-ctaband--quote .ndrgs-btn-onnavy .wp-block-button__link::after{
  content:"";width:18px;height:18px;flex:0 0 18px;transition:transform .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d30d14' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ndrgs-ctaband--quote .ndrgs-btn-onnavy .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.34)}
.ndrgs-ctaband--quote .ndrgs-btn-onnavy .wp-block-button__link:hover::after{transform:translateX(4px)}
@media (max-width:900px){
  .ndrgs-ctaband--quote{padding-top:var(--ndrgs-space-6) !important;padding-bottom:var(--ndrgs-space-6) !important}
  .ndrgs-ctaband--quote .ndrgs-ctaband-inner{flex-direction:column;align-items:stretch;gap:18px}
  .ndrgs-ctaband--quote .ndrgs-ctaband-inner > .wp-block-group:first-child{flex:0 0 auto}
  .ndrgs-ctaband-action{align-items:stretch}
  .ndrgs-ctaband--quote .ndrgs-btn-onnavy,.ndrgs-ctaband--quote .ndrgs-btn-onnavy .wp-block-button__link{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ndrgs-ctaband--quote .ndrgs-btn-onnavy .wp-block-button__link,
  .ndrgs-ctaband--quote .ndrgs-btn-onnavy .wp-block-button__link::after{transition:none}
}
/* any other band or promo that stacks on phones: never keep a flex-basis as height */
@media (max-width:900px){
  .ndrgs-ctaband-inner>.wp-block-group,.ndrgs-promo-inner>.wp-block-group{flex-basis:auto}
}
@media (max-width:600px){
  .ndrgs-ctaband-chip{font-size:11.5px;letter-spacing:.02em;white-space:nowrap;padding:5px 10px 5px 8px}
  .ndrgs-ctaband--quote h2{font-size:24px}
}

/* ==========================================================================
   40. Phone hero keeps its title on screen (29 Sep 2026)
   The carousel pins as soon as the site header scrolls away. The eyebrow,
   title and stars stay at the top of the pinned hero; only the two CTA buttons
   fold away (the call bar at the bottom takes over, as before).
   ========================================================================== */
@media (max-width:767px){
  .ndrgs-xhero.is-carousel .ndrgs-xhero-head .ndrgs-xhero-ctas{
    max-height:160px;overflow:hidden;
    transition:max-height .35s cubic-bezier(.2,.7,.2,1),opacity .25s,margin .35s;
  }
  .ndrgs-xhero.is-carousel.is-pinned .ndrgs-xhero-head .ndrgs-xhero-ctas{
    max-height:0;opacity:0;margin-top:0 !important;margin-bottom:0 !important;pointer-events:none;
  }
  .ndrgs-xhero.is-carousel .ndrgs-xhero-head{transition:padding .35s}
  .ndrgs-xhero.is-carousel.is-pinned .ndrgs-xhero-head{padding-bottom:12px !important}
  .ndrgs-xhero.is-carousel.is-pinned .ndrgs-xhero-stars{margin-bottom:0 !important}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .ndrgs-xhero.is-carousel .ndrgs-xhero-head .ndrgs-xhero-ctas,
  .ndrgs-xhero.is-carousel .ndrgs-xhero-head{transition:none}
}

/* ==========================================================================
   41. Bigger, left-aligned desktop header (29 Sep 2026)
   The header row runs the full screen width (32px gutter) instead of the
   content width, so the logo sits at the left edge and the menu has room.
   Logo about 50% larger; menu and dropdown text larger for readability. The
   bar grows to 104px and the split hero shrinks to match (--ndrgs-header-h).
   Tablets and phones are unchanged.
   ========================================================================== */
@media (min-width:1025px){
  :root{--ndrgs-header-h:107px}             /* 104px bar + 3px red rule */
  #masthead .site-main-header-wrap .site-header-row-container-inner > .site-container{max-width:none;padding-left:32px;padding-right:32px}
  #masthead .site-main-header-inner-wrap,
  #masthead .site-header-main-section-left,
  #masthead .site-header-main-section-right{min-height:104px !important}
  #masthead .site-branding a.brand.has-logo-image img.custom-logo{display:block;max-height:94px;max-width:none !important;width:auto !important}
  #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a,
  #masthead .header-navigation .header-menu-container > ul > li.menu-item > a{font-size:17.5px;font-weight:500;padding-left:.8em;padding-right:.8em}
  #masthead .header-navigation .header-menu-container ul ul li.menu-item > a,
  #masthead .main-navigation .primary-menu-container ul ul li.menu-item > a{font-size:16px;padding-top:.7em;padding-bottom:.7em}
  #masthead .header-navigation ul ul.sub-menu,
  #masthead .main-navigation ul ul.sub-menu{min-width:260px}
  #masthead .menu-item.ndrgs-drop-label > a{font-size:12.5px !important}
  #masthead .header-navigation .dropdown-nav-toggle svg{width:.85em;height:.85em}
}
/* small laptops: keep the menu on one line beside the bigger logo */
@media (min-width:1025px) and (max-width:1320px){
  #masthead .site-branding a.brand.has-logo-image img.custom-logo{max-height:80px}
  #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a,
  #masthead .header-navigation .header-menu-container > ul > li.menu-item > a{font-size:16px;padding-left:.6em;padding-right:.6em}
}
@media (min-width:1025px) and (max-width:1160px){
  #masthead .site-main-header-wrap .site-header-row-container-inner > .site-container{padding-left:20px;padding-right:20px}
  #masthead .site-branding a.brand.has-logo-image img.custom-logo{max-height:70px}
  #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a,
  #masthead .header-navigation .header-menu-container > ul > li.menu-item > a{font-size:15.5px;padding-left:.5em;padding-right:.5em}
}

/* ==========================================================================
   42. Phone number in the hero button row (29 Sep 2026)
   The call bar hides while a hero's buttons are on screen, so the hero row
   carries the number (added at render time, inc/tracking.php). Outlined so it
   reads apart from the white quote button beside it; phone glyph in front.
   On phones the split hero's call button takes its own full-width row.
   ========================================================================== */
.ndrgs-btn-call .wp-block-button__link{
  background:transparent !important;color:#fff !important;
  border:2px solid rgba(255,255,255,.9) !important;
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;white-space:nowrap;
}
.ndrgs-btn-call .wp-block-button__link:hover,
.ndrgs-btn-call .wp-block-button__link:focus-visible{background:#fff !important;color:var(--ndrgs-brand-text) !important}
.ndrgs-btn-call .wp-block-button__link::before{
  content:"";width:1em;height:1em;flex:0 0 1em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/></svg>") center/contain no-repeat;
}
@media (max-width:767px){
  .ndrgs-xhero-ctas{flex-wrap:wrap !important}
  .ndrgs-xhero-ctas > .ndrgs-btn-call{order:3;flex:1 1 100% !important}
  .ndrgs-xhero.is-carousel .ndrgs-xhero-head .ndrgs-xhero-ctas{max-height:240px}
}

/* ==========================================================================
   43. JellyFish Ecosystem pattern (30 Sep 2026) — NDRGS Jellyfish Ecosystem
   Roofline is the featured card at about 60% of the row; landscape, patio,
   Saber and Music Box sit in a 2x2 beside it; the app and the optional-hub
   note run underneath. Stacks on tablets and phones, roofline first.
   ========================================================================== */
.ndrgs-eco{background:linear-gradient(180deg,var(--ndrgs-surface-sunken),#fff 70%)}
.ndrgs-eco-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--ndrgs-space-5);margin-top:var(--ndrgs-space-6);align-items:stretch}
.ndrgs-eco-card{background:#fff;border:1px solid var(--ndrgs-border);border-radius:var(--ndrgs-radius-lg,14px);padding:var(--ndrgs-space-5);position:relative}
.ndrgs-eco-card h3{margin:0 0 var(--ndrgs-space-2)}
.ndrgs-eco-card p{margin-bottom:0}
.ndrgs-eco-card--feature{padding:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 18px 44px rgba(7,37,97,.12);border-color:transparent}
.ndrgs-eco-photo{margin:0 !important}
.ndrgs-eco-photo img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover}
.ndrgs-eco-body{padding:var(--ndrgs-space-5) var(--ndrgs-space-6) var(--ndrgs-space-6);display:flex;flex-direction:column}
.ndrgs-eco-body > p{margin-bottom:var(--ndrgs-space-4)}
.ndrgs-eco-body .ndrgs-checklist{margin-bottom:var(--ndrgs-space-4)}
.ndrgs-eco-kicker,.ndrgs-eco-side-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ndrgs-accent-text);margin:0 0 var(--ndrgs-space-2) !important}
.ndrgs-eco-body .ndrgs-more{margin-top:auto;font-weight:700}
.ndrgs-eco-body .ndrgs-more a{color:var(--ndrgs-accent-text);text-decoration:none}
.ndrgs-eco-body .ndrgs-more a:after{content:" \2192"}
.ndrgs-eco-side{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:var(--ndrgs-space-4)}
.ndrgs-eco-side-label{grid-column:1 / -1;color:var(--ndrgs-ink-subtle) !important}
.ndrgs-eco-side .ndrgs-eco-card{padding:var(--ndrgs-space-5) var(--ndrgs-space-4) var(--ndrgs-space-4);padding-top:64px}
.ndrgs-eco-side .ndrgs-eco-card p{font-size:14px;line-height:22px;color:var(--ndrgs-ink-muted)}
.ndrgs-eco-side .ndrgs-eco-card:before{content:"";position:absolute;left:var(--ndrgs-space-4);top:var(--ndrgs-space-4);width:36px;height:36px;border-radius:10px;background:var(--ndrgs-brand-tint) center/22px no-repeat}
.ndrgs-eco-card--landscape:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V11'/%3E%3Cpath d='M8 11h8l-1-4H9z'/%3E%3Cpath d='M4 21h16'/%3E%3Cpath d='M12 3v1M5.6 5.6l.7.7M18.4 5.6l-.7.7'/%3E%3C/svg%3E") !important}
.ndrgs-eco-card--patio:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18'/%3E%3Cpath d='M7 5v4M12 5v6M17 5v4'/%3E%3Ccircle cx='7' cy='11' r='2'/%3E%3Ccircle cx='12' cy='13' r='2'/%3E%3Ccircle cx='17' cy='11' r='2'/%3E%3Cpath d='M4 21v-4h16v4'/%3E%3C/svg%3E") !important}
.ndrgs-eco-card--saber:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='10' width='18' height='4' rx='2'/%3E%3Cpath d='M6 17l-1 2M12 17v2M18 17l1 2'/%3E%3C/svg%3E") !important}
.ndrgs-eco-card--music:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E") !important}
.ndrgs-eco-app{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--ndrgs-space-5);margin-top:var(--ndrgs-space-6);padding-top:var(--ndrgs-space-6);border-top:1px solid var(--ndrgs-border);align-items:start}
.ndrgs-eco-app h3{margin-top:0}
.ndrgs-eco-list ul{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--ndrgs-space-5)}
.ndrgs-eco-hub{background:var(--ndrgs-surface-navy);color:#fff;border-radius:var(--ndrgs-radius-lg,14px);padding:var(--ndrgs-space-6);position:relative;overflow:hidden}
.ndrgs-eco-hub:after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(211,13,20,.35),transparent 70%);pointer-events:none}
.ndrgs-eco-hub p{color:rgba(255,255,255,.88);position:relative}
.ndrgs-eco-hub .ndrgs-eco-hub-title{font-size:20px;line-height:1.25;font-weight:800;color:#fff;margin:0 0 var(--ndrgs-space-3)}
.ndrgs-eco-hubs{display:flex;flex-wrap:wrap;gap:8px;margin:var(--ndrgs-space-4) 0 0 !important}
.ndrgs-eco-hubs span{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.4);color:#fff}
@media (max-width:1024px){
  .ndrgs-eco-grid,.ndrgs-eco-app{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ndrgs-eco-side{grid-template-columns:1fr;grid-template-rows:none}
  .ndrgs-eco-list ul{grid-template-columns:1fr}
  .ndrgs-eco-body{padding:var(--ndrgs-space-5)}
  .ndrgs-eco-hub{padding:var(--ndrgs-space-5)}
}

/* ==========================================================================
   44. End of Summer promotion banner (1 Oct 2026) — NDRGS Promo Banner 9005
   Three offers in a row under one heading; stacks on phones. The figures
   stay in accent text, each offer on a white card on the accent tint.
   ========================================================================== */
.ndrgs-promo--season{background:linear-gradient(135deg,var(--ndrgs-accent-tint),#fff6ec)}
.ndrgs-promo--season .ndrgs-promo-head{margin-bottom:var(--ndrgs-space-5)}
.ndrgs-promo--season .ndrgs-promo-head h2{margin:0 0 var(--ndrgs-space-2)}
.ndrgs-promo-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ndrgs-space-4)}
.ndrgs-promo-offer{background:#fff;border-radius:var(--ndrgs-radius-lg);padding:var(--ndrgs-space-5);border:1px solid rgba(211,13,20,.14);box-shadow:0 10px 26px rgba(169,10,16,.07);display:flex;flex-direction:column}
.ndrgs-promo-offer .ndrgs-price{font-size:34px;line-height:38px;margin-top:0}
.ndrgs-promo-offer .ndrgs-price span{font-size:18px}
.ndrgs-promo-offer h3{margin:var(--ndrgs-space-2) 0 var(--ndrgs-space-3);font-size:17px;line-height:1.35}
.ndrgs-promo-code{margin:auto 0 0 !important;font-size:13px;font-weight:700;color:var(--ndrgs-brand-text);letter-spacing:.01em}
.ndrgs-promo-cta{margin-top:var(--ndrgs-space-5) !important}
@media (max-width:900px){.ndrgs-promo-offers{grid-template-columns:1fr}}

/* ==========================================================================
   45. Music Box pattern (1 Oct 2026) — NDRGS Music Box
   Dark band: looping, muted video beside the copy; three connection options
   as small glass cards. Stacks on tablets and phones, video first.
   ========================================================================== */
.ndrgs-musicbox{background:radial-gradient(120% 140% at 0% 0%,#1b0f3d 0%,var(--ndrgs-surface-glow) 55%,#050d1f 100%);color:#fff}
.ndrgs-musicbox h2,.ndrgs-musicbox h3,.ndrgs-musicbox p{color:#fff}
.ndrgs-musicbox .ndrgs-eyebrow{color:#ff8a8f}
.ndrgs-musicbox-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--ndrgs-space-7);align-items:center}
.ndrgs-musicbox-video{margin:0 !important;border-radius:var(--ndrgs-radius-lg);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
.ndrgs-musicbox-video video{display:block;width:100%;height:auto;aspect-ratio:auto}
.ndrgs-musicbox-copy .ndrgs-body-lg{color:rgba(255,255,255,.86)}
.ndrgs-musicbox-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ndrgs-space-3);margin:var(--ndrgs-space-5) 0}
.ndrgs-musicbox-way{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:var(--ndrgs-space-4)}
.ndrgs-musicbox-way h3{margin:0 0 6px;font-size:16px}
.ndrgs-musicbox-way p{font-size:14px;line-height:21px;color:rgba(255,255,255,.78);margin:0}
.ndrgs-musicbox-copy > p:last-child{color:rgba(255,255,255,.78);margin-bottom:0}
@media (max-width:1024px){.ndrgs-musicbox-grid{grid-template-columns:1fr;gap:var(--ndrgs-space-6)}}
@media (max-width:600px){.ndrgs-musicbox-ways{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ndrgs-musicbox-video video{animation:none}}

/* ==========================================================================
   46. Roofing Services (lighting pages) and Lighting Callout (roofing pages)
   (1 Oct 2026). Four roofing cards in one row on desktop, two on tablets.
   ========================================================================== */
.ndrgs-svc-grid.ndrgs-svc-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.ndrgs-svc-grid.ndrgs-svc-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ndrgs-svc-grid.ndrgs-svc-grid--four{grid-template-columns:1fr}}
.ndrgs-light-callout .wp-block-buttons{margin-top:var(--ndrgs-space-4)}
/* promo cards: WordPress's flow layout gives every card after the first a top
   margin, which shortens them in the grid row; cards share the row height */
.ndrgs-promo-offers{align-items:stretch}
.ndrgs-promo-offers > .ndrgs-promo-offer{margin:0 !important;height:100%;box-sizing:border-box}
.ndrgs-promo-offer > *:first-child{margin-top:0 !important}
.ndrgs-eco-side > .ndrgs-eco-card,
.ndrgs-musicbox-ways > .ndrgs-musicbox-way,
.ndrgs-svc-grid--four > .ndrgs-svc{margin:0 !important}

/* ==========================================================================
   47. Video hero backgrounds and in-page videos (1 Oct 2026)
   A cover hero with a background video (instant roof quote: roofing_scene.mp4)
   gets the same navy shade as the photo heroes (section 34). In-page videos
   (.ndrgs-video) sit in the photo slot with rounded corners. Reduced-motion
   visitors get still frames (assets/ndrgs-carousel.js).
   ========================================================================== */
.ndrgs-hero > .wp-block-cover__video-background{position:absolute !important;inset:0;width:100% !important;height:100% !important;max-width:none;margin:0;padding:0;border:0;object-fit:cover;object-position:center;z-index:0 !important}
.ndrgs-hero:has(> .wp-block-cover__video-background) > .wp-block-cover__background{
  z-index:1 !important;opacity:1 !important;background-color:transparent !important;
  background-image:linear-gradient(90deg,rgba(7,37,97,.94) 0%,rgba(7,37,97,.82) 45%,rgba(7,37,97,.6) 100%) !important;
}
.ndrgs-hero:has(> .wp-block-cover__video-background) h1,
.ndrgs-hero:has(> .wp-block-cover__video-background) p{text-shadow:0 1px 12px rgba(4,16,40,.35)}
@media (max-width:781px){
  .ndrgs-hero:has(> .wp-block-cover__video-background) > .wp-block-cover__background{
    background-image:linear-gradient(180deg,rgba(7,37,97,.82),rgba(7,37,97,.92)) !important;
  }
}
.ndrgs-video{margin:0 !important;border-radius:var(--ndrgs-radius-lg);overflow:hidden;box-shadow:0 18px 44px rgba(7,37,97,.16)}
.ndrgs-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ndrgs-fixtures > .ndrgs-fixture{margin:0 !important;padding:0;overflow:hidden}
.ndrgs-fixture-photo{margin:0 !important}
.ndrgs-fixture-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.ndrgs-fixture > h3,.ndrgs-fixture > p{padding:0 var(--ndrgs-space-5)}
.ndrgs-fixture > h3{margin-top:var(--ndrgs-space-4) !important}
.ndrgs-fixture > p:last-child{padding-bottom:var(--ndrgs-space-5)}

/* ==========================================================================
   48. Lighting gallery carousel runs the full width like the banner above it
   (30 Sep 2026, desktop and tablet). Phones keep the content-width carousel.
   ========================================================================== */
@media (min-width:782px){
  .ndrgs-lightshow{overflow-x:clip}
  /* same box as the banner above: edge to edge across the screen */
  /* WordPress's constrained layout forces margin-left/right:auto !important on
     direct children, which left the row starting at the content column and
     running off the right. These selectors outrank it. */
  html body .ndrgs-lightshow.ndrgs-lightshow > .ndrgs-carousel-wrap,
  html body .ndrgs-lightshow.ndrgs-lightshow > .wp-block-gallery.ndrgs-carousel{
    width:100vw !important;max-width:none !important;box-sizing:border-box;
    margin-left:calc(50% - 50vw) !important;margin-right:0 !important;
  }
  .ndrgs-lightshow > .ndrgs-carousel-wrap > .wp-block-gallery.ndrgs-carousel{width:100% !important;max-width:none !important}
  .ndrgs-lightshow .wp-block-gallery.ndrgs-carousel{padding:4px 0 8px;scroll-padding-left:0}
  .ndrgs-lightshow .wp-block-gallery.has-nested-images.ndrgs-carousel figure.wp-block-image:not(#individual-image){flex-basis:clamp(260px,24%,480px) !important}
  .ndrgs-lightshow .ndrgs-carousel-prev{left:16px}
  .ndrgs-lightshow .ndrgs-carousel-next{right:16px}
}

/* ==========================================================================
   49. Lazy video placeholders (1 Oct 2026)
   A lazy video has no file until it nears the screen, so it holds its 16:9
   box with a navy fill instead of collapsing and jumping when it loads. The
   Ecosystem feature card's video takes the same frame as the photo it replaced.
   ========================================================================== */
.wp-block-video video.ndrgs-lazy-video{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover;background:#0b1e45}
.ndrgs-eco-card--feature > .wp-block-video{margin:0 !important}
.ndrgs-eco-card--feature > .wp-block-video video{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;background:#0b1e45}

/* ==========================================================================
   50. Guides hub cards (2 Oct 2026)
   The /guides/ query loop (post-template class ndrgs-guide-grid): each post
   is a white card with its category, title, excerpt and a "Read the guide"
   link pinned to the bottom so a row of cards lines up.
   ========================================================================== */
ul.ndrgs-guide-grid{list-style:none;padding:0 !important;margin:var(--ndrgs-space-6) 0 0 !important;display:grid !important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important;gap:var(--ndrgs-space-5) !important}
ul.ndrgs-guide-grid > li{margin:0 !important;display:flex;flex-direction:column;background:var(--ndrgs-surface-raised);border:1px solid var(--ndrgs-border);border-radius:var(--ndrgs-radius-lg);padding:var(--ndrgs-space-5);box-shadow:var(--ndrgs-shadow-md);transition:box-shadow .15s ease-out}
ul.ndrgs-guide-grid > li:hover{box-shadow:var(--ndrgs-shadow-lg)}
ul.ndrgs-guide-grid > li > *{margin-top:0 !important}
.ndrgs-guide-grid .ndrgs-guide-cat{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ndrgs-accent-text);margin:0 0 var(--ndrgs-space-2) !important}
.ndrgs-guide-grid .ndrgs-guide-cat a{color:inherit;text-decoration:none}
.ndrgs-guide-grid .wp-block-post-title{font-family:var(--ndrgs-display);font-size:20px;line-height:26px;font-weight:700;margin:0 0 var(--ndrgs-space-3) !important}
.ndrgs-guide-grid .wp-block-post-title a{color:var(--ndrgs-brand-text);text-decoration:none}
.ndrgs-guide-grid .wp-block-post-title a:hover{text-decoration:underline}
.ndrgs-guide-grid .wp-block-post-excerpt{display:flex;flex-direction:column;flex:1;margin:0 !important}
.ndrgs-guide-grid .wp-block-post-excerpt__excerpt{font-size:15px;line-height:24px;color:var(--ndrgs-ink-muted);margin:0 0 var(--ndrgs-space-4)}
.ndrgs-guide-grid .wp-block-post-excerpt__more-text{margin:auto 0 0 !important}
.ndrgs-guide-grid .wp-block-post-excerpt__more-link{font-size:14px;font-weight:700;color:var(--ndrgs-accent-text);text-decoration:none}
.ndrgs-guide-grid .wp-block-post-excerpt__more-link:after{content:" \2192"}
@media (max-width:640px){ul.ndrgs-guide-grid{grid-template-columns:1fr !important}}

/* ==========================================================================
   51. Promo card footers (2 Oct 2026)
   The "Mention ..." line is a card footer: a ruled strip whose top edge sits
   at the same height on every card in the row, even when one card's line
   wraps. Each card borrows the row tracks of the offers grid (subgrid), so
   price, description and footer line up across the row. Stacked cards (900px
   and under) keep the simple column layout.
   ========================================================================== */
.ndrgs-promo-offer .ndrgs-promo-code{padding-top:var(--ndrgs-space-3);border-top:1px solid var(--ndrgs-border);line-height:20px}
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .ndrgs-promo-offers{grid-template-rows:auto 1fr auto}
    .ndrgs-promo-offers > .ndrgs-promo-offer{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;height:auto}
    .ndrgs-promo-offers > .ndrgs-promo-offer > .ndrgs-promo-code{margin:0 !important;align-self:stretch}
    .ndrgs-promo-offers > .ndrgs-promo-offer > *{margin-left:0 !important;margin-right:0 !important}
  }
}

/* ==========================================================================
   52. The site's own chat box (4 Oct 2026)
   Replaces the HighLevel chat widget. A round launcher sits in the clear end
   of the call bar (on the navy tail); the panel opens above the bar with a
   welcome message, a prompt and the estimate form, each as a message from
   the company avatar. There is no message input:
   the form is how the conversation starts, and it shows its own thank-you.
   ========================================================================== */
.ndrgs-chat-launcher{
  position:fixed;z-index:2147483646;right:14px;
  bottom:calc((var(--ndrgs-bar-h,64px) - 56px - env(safe-area-inset-bottom,0px)) / 2 + env(safe-area-inset-bottom,0px));
  width:56px;height:56px;padding:0;border:2px solid #fff;border-radius:50%;
  background:var(--ndrgs-accent);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(4,16,40,.35);transition:background .15s ease,transform .15s ease;
}
.ndrgs-chat-launcher:hover{background:var(--ndrgs-accent-strong);transform:scale(1.05)}
.ndrgs-chat-launcher:focus-visible,.ndrgs-chat-close:focus-visible{outline:3px solid var(--ndrgs-focus);outline-offset:2px}
.ndrgs-chat-launcher__close{display:none}
html.ndrgs-chat-open .ndrgs-chat-launcher__open{display:none}
html.ndrgs-chat-open .ndrgs-chat-launcher__close{display:block}
.ndrgs-chat-launcher__badge{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#fff;color:var(--ndrgs-accent-text);font:700 12px/20px var(--ndrgs-sans);text-align:center;
  box-shadow:0 1px 4px rgba(4,16,40,.35);
}
html.ndrgs-chat-seen .ndrgs-chat-launcher__badge{display:none}

.ndrgs-chat-panel{
  position:fixed;z-index:2147483646;right:12px;left:12px;
  bottom:calc(var(--ndrgs-bar-h,64px) + 12px);
  max-height:calc(100vh - var(--ndrgs-bar-h,64px) - 24px);
  max-height:calc(100dvh - var(--ndrgs-bar-h,64px) - 24px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ndrgs-surface-sunken);border-radius:var(--ndrgs-radius-lg);
  box-shadow:0 18px 50px rgba(4,16,40,.38),0 0 0 1px rgba(7,37,97,.10);
  font-family:var(--ndrgs-sans);animation:ndrgs-chat-in .2s ease-out;
}
.ndrgs-chat-panel[hidden]{display:none}
@keyframes ndrgs-chat-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ndrgs-chat-head{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 18px;background:var(--ndrgs-brand);color:#fff;border-bottom:3px solid var(--ndrgs-accent)}
.ndrgs-chat-head__text{flex:1;min-width:0;display:flex;flex-direction:column}
.ndrgs-chat-head__text strong{font:700 16px/1.25 var(--ndrgs-display)}
.ndrgs-chat-head__text span{font-size:13px;line-height:1.4;opacity:.85}
.ndrgs-chat-close{flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ndrgs-chat-close:hover{background:rgba(255,255,255,.24)}
.ndrgs-chat-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 12px 14px;display:flex;flex-direction:column;gap:10px}
.ndrgs-chat-avatar{
  flex:none;position:relative;width:36px;height:36px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px #fff,0 1px 4px rgba(4,16,40,.25);
}
.ndrgs-chat-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.ndrgs-chat-avatar--initials{display:flex;align-items:center;justify-content:center;background:var(--ndrgs-accent);color:#fff;font:700 13px/1 var(--ndrgs-display);letter-spacing:.02em}
/* the green "here now" dot, on the header avatar only */
.ndrgs-chat-head .ndrgs-chat-avatar{width:42px;height:42px}
.ndrgs-chat-head .ndrgs-chat-avatar:after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#2fbf71;border:2px solid var(--ndrgs-brand)}
.ndrgs-chat-row{display:flex;align-items:flex-end;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.ndrgs-chat-row.is-in,.ndrgs-chat-row.ndrgs-chat-typing{opacity:1;transform:none}
.ndrgs-chat-row:not(.is-in):not(.ndrgs-chat-typing){display:none}
.ndrgs-chat-row[hidden]{display:none}
.ndrgs-chat-msg{
  max-width:calc(100% - 60px);margin:0 !important;padding:10px 14px;
  background:#fff;color:var(--ndrgs-ink);font-size:15px;line-height:22px;
  border:1px solid var(--ndrgs-border);border-radius:16px 16px 16px 4px;
  box-shadow:0 1px 2px rgba(7,37,97,.06);
}
.ndrgs-chat-row--form{align-items:flex-start}
.ndrgs-chat-form{flex:1;min-width:0;min-height:420px;overflow:hidden;background:#fff;border:1px solid var(--ndrgs-border);border-radius:16px 16px 16px 4px;box-shadow:0 1px 2px rgba(7,37,97,.06)}
.ndrgs-chat-form iframe{display:block;width:100%;min-height:420px;border:0}
.ndrgs-chat-typing .ndrgs-chat-msg{display:flex;gap:4px;align-items:center;padding:14px 14px}
.ndrgs-chat-typing .ndrgs-chat-msg span{width:7px;height:7px;border-radius:50%;background:var(--ndrgs-border-strong);animation:ndrgs-chat-dot 1s infinite ease-in-out}
.ndrgs-chat-typing .ndrgs-chat-msg span:nth-child(2){animation-delay:.15s}
.ndrgs-chat-typing .ndrgs-chat-msg span:nth-child(3){animation-delay:.3s}
@keyframes ndrgs-chat-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (min-width:769px){
  .ndrgs-chat-launcher{right:20px;bottom:calc((var(--ndrgs-bar-h,80px) - 56px) / 2)}
  .ndrgs-chat-panel{left:auto;right:16px;width:400px}
}
@media (prefers-reduced-motion:reduce){
  .ndrgs-chat-panel{animation:none}
  .ndrgs-chat-row,.ndrgs-chat-launcher{transition:none}
  .ndrgs-chat-typing .ndrgs-chat-msg span{animation:none}
}
@media print{.ndrgs-chat-launcher,.ndrgs-chat-panel{display:none !important}}

/* ==========================================================================
   53. Year-round line in the promo banner (6 Oct 2026)
   "Ask about our senior and veterans discounts" sits under the offer cards.
   ========================================================================== */
.ndrgs-promo-always{margin:var(--ndrgs-space-5) 0 0 !important;font-size:16px;line-height:24px;color:var(--ndrgs-ink)}
.ndrgs-promo-always strong{color:var(--ndrgs-accent-text);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-right:6px}

/* ==========================================================================
   54. Phone header, call bar and hero (9 Oct 2026)
   - Phones and tablets (up to 1024px): Kadence's header is fixed to the top
     of the screen, with Services and About beside its menu button (inc/geo.php
     prints them; ndrgs-tracking.js places them). Logged in, the header sits
     below the WordPress admin bar.
   - Phones: the call bar is always on screen at the bottom, and the hero
     button rows that repeat it (Get A Free Estimate, Call) are gone from the
     top of the page. The split hero's whole button row is removed.
   - The split hero pins just below the fixed header (ndrgs-hero.js).
   ========================================================================== */
/* Kadence's header, fixed to the top on phones and tablets; Services and
   About sit beside its menu button (ndrgs-tracking.js places them and keeps
   the header below the WordPress admin bar when you are logged in) */
.ndrgs-quicknav{display:none}
@media (max-width:1024px){
  #masthead{position:fixed;top:0;left:0;right:0;z-index:9995;background:#fff}
  body{padding-top:var(--ndrgs-header-h,59px)}
  html{scroll-padding-top:calc(var(--ndrgs-header-h,59px) + 8px)}
  .ndrgs-quicknav.is-placed{display:flex;align-items:center;gap:2px;margin-right:4px}
  .ndrgs-quicknav a{
    display:inline-flex;align-items:center;min-height:40px;padding:0 10px;border-radius:var(--ndrgs-radius-md);
    font:700 15px/1 var(--ndrgs-sans);color:var(--ndrgs-brand-text);text-decoration:none;white-space:nowrap;
  }
  .ndrgs-quicknav a:hover,.ndrgs-quicknav a[aria-current="page"]{background:var(--ndrgs-brand-tint);color:var(--ndrgs-brand-text)}
  .ndrgs-quicknav a:focus-visible{outline:3px solid var(--ndrgs-focus);outline-offset:1px}
  #mobile-header .site-header-main-section-right{display:flex;align-items:center}
}
@media (max-width:380px){
  .ndrgs-quicknav a{padding:0 7px;font-size:14px}
}

@media (max-width:768px){
  /* the call bar never steps aside on phones */
  html.ndrgs-top-cta-visible .ndrgs-mobile-bar,
  html.ndrgs-top-cta-visible .ndrgs-mobile-bar-tail{transform:none;visibility:visible;transition:none}
}
@media (max-width:767px){
  /* no button row at the top of the split hero */
  .ndrgs-xhero .ndrgs-xhero-ctas,
  .ndrgs-xhero.is-carousel .ndrgs-xhero-head .ndrgs-xhero-ctas{display:none !important}
  /* single heroes: the buttons the call bar already carries */
  /* (marked at render time by inc/tracking.php: ndrgs_hero_mark_bar_ctas) */
  .ndrgs-hero .ndrgs-bar-cta,
  .ndrgs-hero .ndrgs-bar-ctas-only{display:none !important}

  /* the split hero pins below the fixed header */
  .ndrgs-xhero.is-carousel .ndrgs-xhero-stage{
    top:calc(var(--ndrgs-header-h,59px) - var(--ndrgs-xhero-cta-h,0px));
    height:calc(100vh - var(--ndrgs-header-h,59px));
    height:calc(100svh - var(--ndrgs-header-h,59px));
  }
}

/* ==========================================================================
   55. Bigger split hero title on phones (9 Oct 2026)
   "Next Day <word> Solutions" fills the width on one line. ndrgs-hero.js sets
   --ndrgs-xhero-title-fit to the largest size (28px at most) at which the
   longest word, "Exterior", still fits the screen; the clamp is the fallback.
   ========================================================================== */
@media (max-width:767px){
  .ndrgs-xhero-title{font-size:var(--ndrgs-xhero-title-fit,clamp(22px,6.6vw,28px)) !important;line-height:1.15;margin-bottom:8px !important}
  .ndrgs-xhero-title:has(.ndrgs-flip){white-space:nowrap}
  .ndrgs-xhero-eyebrow{font-size:12px}
  .ndrgs-xhero-stars{font-size:13px}
}

/* ==========================================================================
   56. One bottom bar: call, estimate and the chat launcher (9 Oct 2026)
   The separate navy "tail" behind the chat button was sized from the bar's
   height at load and drifted out of line once the fonts settled. With the
   site's own chat button (section 52) there is no HighLevel layer to stop
   short of, so the bar itself now runs to the right edge, its right end left
   clear for the chat button, which sits above it.
   ========================================================================== */
.ndrgs-mobile-bar-tail{display:none !important}
.ndrgs-mobile-bar{z-index:2147483640}
@media (max-width:768px){
  .ndrgs-mobile-bar{right:0 !important;padding-right:84px !important;clip-path:none !important}
}
@media (min-width:769px){
  .ndrgs-mobile-bar{right:0 !important;padding-right:96px !important;clip-path:none !important}
}

/* ==========================================================================
   57. Split hero panel titles link to their page (9 Oct 2026, ndrgs-hero.js)
   ========================================================================== */
.ndrgs-xhero-name a.ndrgs-xhero-name-link,
.ndrgs-xhero-name a.ndrgs-xhero-name-link:hover,
.ndrgs-xhero-name a.ndrgs-xhero-name-link:visited{color:inherit;text-decoration:none !important}
.ndrgs-xhero-name a.ndrgs-xhero-name-link:focus-visible{outline:3px solid var(--ndrgs-focus);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   58. Slim footer line (10 Oct 2026)
   One short row: "© year Next Day Roofing & Gutter Solutions" in small type.
   ========================================================================== */
#colophon .site-bottom-footer-wrap .site-bottom-footer-inner-wrap,
#colophon .site-footer-row{padding-top:8px !important;padding-bottom:8px !important;min-height:0 !important;grid-row-gap:0 !important}
#colophon .site-footer-row-container-inner{padding-top:0 !important;padding-bottom:0 !important}
#colophon .footer-html{margin:0 !important;font-size:12px;line-height:1.4}
#colophon .footer-html p{margin:0 !important;font-size:12px;line-height:1.4}

/* ==========================================================================
   59. Instant roof quote scrolls inside its card (10 Oct 2026)
   Replaces the v1.15.66 full-width switch, which left the Roofle tool wide
   after it shrank. The tool keeps its place beside the copy and never grows
   past the screen: once its results are taller than the card, they scroll
   inside it. Reaching the end of the card carries on scrolling the page.
   ========================================================================== */
.ndrgs-hero-form .ndrgs-quote-tool{
  max-height:min(78vh,780px);max-height:min(78dvh,780px);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;scrollbar-gutter:stable;
  scrollbar-width:thin;scrollbar-color:rgba(7,37,97,.35) transparent;
}
.ndrgs-hero-form .ndrgs-quote-tool::-webkit-scrollbar{width:8px}
.ndrgs-hero-form .ndrgs-quote-tool::-webkit-scrollbar-thumb{background:rgba(7,37,97,.35);border-radius:4px}
.ndrgs-hero-form .ndrgs-quote-tool::-webkit-scrollbar-track{background:transparent}

/* ==========================================================================
   60. Service cards with photo or pattern backgrounds (10 Oct 2026)
   NDRGS Services Grid (pattern 9002). A card with the class ndrgs-svc--photo
   carries a full-bleed photo (figure.ndrgs-svc__bg) and its copy sits in a
   translucent, padded panel (ndrgs-svc__body) on the card's bottom edge. A card
   with no photo takes ndrgs-svc--pattern: a navy roofline pattern instead.
   The service icon becomes a round badge in the top corner. Cards in a row
   still share a height (section 29), so every closing link lines up.
   ========================================================================== */
.ndrgs-svc.ndrgs-svc--photo,
.ndrgs-svc.ndrgs-svc--pattern{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:360px;padding:var(--ndrgs-space-3);
  justify-content:flex-end;
  background:var(--ndrgs-brand);border-color:transparent;
}
.ndrgs-svc--photo > .ndrgs-svc__bg{position:absolute;inset:0;z-index:-1;margin:0 !important;max-width:none}
.ndrgs-svc--photo > .ndrgs-svc__bg img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .5s ease-out}
.ndrgs-svc--photo:hover > .ndrgs-svc__bg img{transform:scale(1.04)}
.ndrgs-svc--photo:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,37,97,.28) 0,rgba(7,37,97,0) 30%,rgba(7,37,97,0) 55%,rgba(7,37,97,.35) 100%)}
.ndrgs-svc.ndrgs-svc--pattern{
  background-color:var(--ndrgs-brand);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 28L28 6l28 22' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='2'/%3E%3Cpath d='M-28 28L0 6l28 22' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='2' transform='translate(0 -14)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 85% 0%,rgba(211,13,20,.30) 0,rgba(211,13,20,0) 55%),
    linear-gradient(160deg,#0b3480 0,#072561 55%,#04163b 100%);
  background-size:56px 28px,100% 100%,100% 100%;
}
/* icon badge */
.ndrgs-svc.ndrgs-svc--photo:before,
.ndrgs-svc.ndrgs-svc--pattern:before{
  position:absolute;top:var(--ndrgs-space-3);left:var(--ndrgs-space-3);z-index:1;
  width:44px;height:44px;margin:0;border-radius:50%;
  background-color:rgba(255,255,255,.94);background-position:center;background-size:22px 22px;
  box-shadow:0 2px 8px rgba(4,22,59,.25);
}
.ndrgs-svc--featured.ndrgs-svc--photo:before{background-color:rgba(7,37,97,.92)}
/* the translucent copy panel */
.ndrgs-svc__body{
  display:flex;flex-direction:column;
  margin:0 !important;padding:var(--ndrgs-space-4);
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--ndrgs-radius-md);
  box-shadow:0 6px 20px rgba(4,22,59,.22);
}
.ndrgs-svc__body > *{flex:0 0 auto}
.ndrgs-svc__body h3{margin:0 0 var(--ndrgs-space-2);color:var(--ndrgs-ink)}
.ndrgs-svc__body p{color:var(--ndrgs-ink)}
.ndrgs-svc__body p:not(.ndrgs-more){color:#33425a}
.ndrgs-svc__body .ndrgs-more{margin-top:auto !important;padding-top:var(--ndrgs-space-2);margin-bottom:0}
/* navy panel on the featured photo card and on pattern cards */
.ndrgs-svc--featured .ndrgs-svc__body,
.ndrgs-svc--pattern .ndrgs-svc__body{
  background:rgba(7,37,97,.82);border-color:rgba(255,255,255,.14);
}
.ndrgs-svc--pattern .ndrgs-svc__body{background:rgba(4,22,59,.55)}
.ndrgs-svc--featured .ndrgs-svc__body h3,
.ndrgs-svc--featured .ndrgs-svc__body p,
.ndrgs-svc--pattern .ndrgs-svc__body h3,
.ndrgs-svc--pattern .ndrgs-svc__body p{color:#fff}
.ndrgs-svc--pattern .ndrgs-svc__body .ndrgs-more a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (min-width:1000px){
  .ndrgs-svc--featured.ndrgs-svc--photo .ndrgs-svc__body{max-width:62%}
}
@media (max-width:639px){
  .ndrgs-svc.ndrgs-svc--photo,
  .ndrgs-svc.ndrgs-svc--pattern{min-height:320px}
}
@media (prefers-reduced-motion:reduce){
  .ndrgs-svc--photo > .ndrgs-svc__bg img{transition:none}
  .ndrgs-svc--photo:hover > .ndrgs-svc__bg img{transform:none}
}