/* ==========================================================================
   Peak View Roofing — Design 7 "Mine"
   Clean, modern, information-first. Jost typography (geometric sans).
   Palette anchored on hero/preheader blue #0C436C with brand red accent.

   THE :root BLOCK BELOW IS THE SWAP POINT.
   Every brand colour in this file is a token. There were 77 literal colour
   values scattered across ~45 rules, so "retheme the site" meant a find-and-
   replace through 1,400 lines and hoping none were missed; it is now one block.
   Nothing below :root should contain a brand hex or an rgba() carrying brand
   channels — if you are about to add one, add a token instead.

   Four of these tokens are fed from the database at runtime: --blue, --ink,
   --red and --btn-primary-hover come from the colour Settings, emitted as an
   inline override after this file by sv_palette_style() in partials/site.php.
   The rest — the darker blues and the nine --on-blue-* text tints — are not
   derived, because they are not a uniform darkening of --blue. A second brand
   sets those here.

   The remaining literals in this file are rgba() white and black used for
   shadows and scrims. Those are not brand colours and stay as they are.
   ========================================================================== */

:root {
  --blue: #0c436c;          /* hero overlay / primary brand blue */
  --blue-dark: #08314f;
  --blue-deep: #06263d;
  --red: #c22032;           /* brand accent / CTA */
  --red-dark: #9c1a28;
  /* .btn-primary:hover — admin-editable (Settings → Branding →
     "Primary Button Onhover color"). Defaults to the existing --red-dark so
     brands that haven't set it keep the current hover. */
  --btn-primary-hover: var(--red-dark);
  --gray: #dcddde;
  --light: #f4f7fa;
  --light-2: #eaeef3;
  --ink: #132330;
  --body: #4a5663;
  --white: #ffffff;
  /* Preheader top bar — dedicated, admin-editable (Settings → Branding →
     "Preheader Bar Background" / "Preheader Bar Links"). Defaults preserve the
     original deep-blue bar with light-blue links/icons. */
  --preheader-bg: #06263d;
  --preheader-link: #dceaf5;
  --maxw: 1600px;
  --radius: 12px;
  --shadow: 0 16px 40px rgba(var(--blue-rgb), 0.12);
  --shadow-lg: 0 24px 60px rgba(var(--blue-rgb), 0.22);
  --font: "Jost", "Century Gothic", "Trebuchet MS", "Segoe UI", sans-serif;
  /* --- Text tints used ON the brand blue -------------------------------------
     Ordered lightest to darkest. These were nine literal hex values scattered
     across ~20 rules; they are here so a retheme has ONE place to look.

     NOTE FOR WHOEVER RETHEMES: several of these sit within 2% lightness of each
     other (-2 #dceaf5, -3 #dbe7f1, -4 #d6e3ef, -5 #cfe0ee). That reads as drift
     from the original comps rather than nine deliberate steps, and a designer
     could probably collapse them to three or four. Deliberately NOT done here —
     it would change rendering, and this commit changes none. */
  --on-blue-1: #e6eef6;
  --on-blue-2: #dceaf5;
  --on-blue-3: #dbe7f1;
  --on-blue-4: #d6e3ef;
  --on-blue-5: #cfe0ee;
  --on-blue-6: #c5d6e6;
  --on-blue-7: #b8cee0;
  --on-blue-8: #9fc0da;
  --on-blue-9: #8fb6d4;

  --rule: #d7dce1;          /* light divider, e.g. between feature blurbs */
  --success: #1c7a3f;       /* form success text — not a brand colour */

  /* RGB triplets so rgba() can use the same source of truth as the hex tokens.
     CSS cannot decompose a hex custom property into channels, so an alpha use of
     the brand blue needs the components separately. Keep these in sync with the
     hex values above — they are the same colours, not independent ones. */
  --blue-rgb: 12, 67, 108;
  --blue-dark-rgb: 8, 49, 79;
  --blue-deep-rgb: 6, 38, 61;
  --blue-black-rgb: 6, 20, 33;

}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--body);
  background: var(--white);
  line-height: 1.5;
  font-size: 1rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border-radius: 30px; }
/* logos and the BBB seal stay square */
.logo-link img, .footer-brand img, .footer-bbb img, .bt-logo img { border-radius: 0; }

h1, h2, h3 {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--blue); }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; }

/* --- Accessibility helpers -------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: var(--white);
  padding: 0.8rem 1.4rem;
  z-index: 400;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.6rem 2.2rem;
  border-radius: 30px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--btn-primary-hover); }

.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); }

.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.7); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: var(--white); }

.btn-lg { padding: 0.6rem 2.2rem; font-size: 1rem; }

.text-link {
  display: inline-block;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.text-link::after { content: " \2192"; transition: margin-left 0.2s ease; }
.text-link:hover::after { margin-left: 0.3rem; }

/* --- Preheader -------------------------------------------------------------- */

.preheader {
  /* Dedicated, admin-editable top-bar colours (Settings → Branding). Background
     and link/icon colour each have their own setting, independent of the main
     brand palette, so a brand can retheme just the top bar. */
  background: var(--preheader-bg);
  color: var(--preheader-link);
  font-size: 0.85rem;
  position: relative;
  z-index: 60;
}

.preheader-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.6rem;
  flex-wrap: wrap;
  padding-top: 3px;
}

.preheader-contact {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  flex-wrap: wrap;
}
.preheader-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--preheader-link);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.preheader-contact a:hover { color: var(--white); }
.preheader-contact .ico { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; margin-top:2px; }

.preheader-social { display: flex; gap: 0.5rem; list-style: none; }
.preheader-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  color: var(--preheader-link);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.preheader-social svg { width: 1rem; height: 1rem; fill: currentColor; }
.preheader-social a:hover { background: var(--red); color: var(--white); }

/* --- Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--white);
  box-shadow: 0 1px 6px rgba(var(--blue-deep-rgb), 0.10);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
/* Deepen the shadow once scrolled (class added via JS) */
.site-header.scrolled { box-shadow: 0 6px 24px rgba(var(--blue-deep-rgb), 0.28); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.05rem;
  position: relative;
}

.logo-link { display: inline-flex; }
.logo-link img { width: 190px; height: auto; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
}
.nav-menu a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding-block: 0.4rem;
  position: relative;
  transition: color 0.2s ease;
}
.nav-menu a:not(.nav-cta):hover { color: var(--red); }

.nav-cta {
  background: var(--red);
  color: var(--white);
  border-radius: 30px;
  padding: 0.55rem 1.25rem !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.nav-menu a.nav-cta { color: var(--white); }
.nav-cta:hover { background: var(--btn-primary-hover); }

/* About opens a dropdown. Blog follows the Blog page slug. */
.nav-item--sub { position: relative; }
.nav-sub {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 9.5rem;
  margin: 0;
  padding: 0.45rem 0 0.35rem;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(var(--blue-deep-rgb), 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 30;
}
.nav-item--sub:hover > .nav-sub,
.nav-item--sub:focus-within > .nav-sub,
.nav-item--sub.is-open > .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-sub a {
  display: block;
  padding: 0.5rem 1.15rem;
  white-space: nowrap;
}

/* Hamburger */
.nav-toggle { display: none; }
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block;
  width: 24px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
  position: relative;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle-bar::before { content: ""; position: absolute; top: -7px; }
.nav-toggle-bar::after { content: ""; position: absolute; top: 7px; }

/* --- Hero ------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 80vh, 780px);
  margin-top: -88px;          /* pull hero up under the fixed header */
  padding-top: calc(88px + clamp(3.5rem, 6vw, 6rem));   /* clear header + extra top space */
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
  display: flex;
  align-items: stretch;
  background: var(--white);
  color: var(--ink);
}

/* Right half: background image only */
.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  background: var(--hero-bg, url("assets/new_hero_bg.jpg")) center / cover no-repeat;
  z-index: 0;
}

/* Left half: white background with the hero text.
   The left padding tracks the centered 1600px container so the text
   lines up with the rest of the page content on wide screens. */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-inline: max(clamp(1.5rem, 4vw, 3.5rem), calc((100vw - var(--maxw)) / 2 + 1.5rem)) clamp(1.5rem, 4vw, 3.5rem);
  text-align: left;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

.hero h1 {
  color: var(--blue);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
  max-width: 34rem;
}

.hero-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--ink);
  max-width: 30rem;
  margin-inline: 0;
  margin-bottom: 2.25rem;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Small screens: hide the split image and show it faintly (20%) behind the text */
@media (max-width: 860px) {
  .hero {
    display: block;
    min-height: 0;
    /* 80% white wash over the photo leaves it at ~20% opacity */
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
      var(--hero-bg, url("assets/new_hero_bg.jpg")) center / cover no-repeat;
  }
  .hero-inner {
    width: 100%;
    padding-block: 0;
    padding-inline: clamp(1.5rem, 5vw, 2rem);
  }
  .hero-media {
    display: none;
  }
}

/* --- Hovering announcement bar ---------------------------------------------- */

.alert-bar-wrap {
  display: none;              /* hidden for now; markup retained */
  position: relative;
  z-index: 5;
  text-align: center;
  margin-top: -1.6rem;        /* lifts the bar partway over the hero's bottom edge */
}

.alert-bar {
  display: inline-block;
  background: var(--blue-deep);
  color: var(--white);
  font-weight: 300;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 2.1rem;
}

/* --- Section scaffolding ---------------------------------------------------- */

.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section.post { padding-block: clamp(3.5rem, 7vw, 4rem); }
.section.about,
.section.services,
.section.services-offered,
.section.industries,
.section.roof-types,
.section.features,
.section.reviews { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 0.85rem !important;
}
.eyebrow.light { color: var(--on-blue-9); }

.section-head { max-width: 52rem; margin-bottom: 3rem; }
.section-head h1,
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 0.85rem; }

/* Editor Content on the generic page template (legal pages, etc.). */
.prose {
  max-width: 46rem;
  margin-inline: auto;
  text-align: left;
  color: var(--body);
  font-size: 1.02rem;
  line-height: 1.7;
}
.prose h2 { color: var(--blue); font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 2.2rem 0 0.7rem; }
.prose h3 { color: var(--ink); font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin: 0.35rem 0; }
.prose a { color: var(--blue); font-weight: 600; }
.post-hero { max-width: 46rem; margin: 0 auto 2rem; }
.post-hero img { width: 50%; height: auto; display: block; margin: 0 auto; }

/* Blog listing: 12 posts, 3 across, then 2, then 1. */
.blog-index .section-head { text-align: center; margin-inline: auto; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--light-2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform 0.2s ease;
}
.blog-card:hover { transform: translateY(-2px); }
.blog-card-media {
  aspect-ratio: 3 / 2;
  background: var(--light);
  overflow: hidden;
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.blog-card-title {
  display: block;
  padding: 1rem 1.1rem 1.2rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--blue);
  line-height: 1.35;
}
.blog-more-wrap { text-align: center; margin-top: 2.5rem; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }
.section-intro { font-size: 1.05rem; }
.section-intro.light { color: var(--on-blue-6); }

/* --- Interior page hero (short, centered) ---------------------------------- */

.page-hero {
  position: relative;
  text-align: center;
  color: var(--white);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/modern-home.jpg") center / cover no-repeat;
}
.page-hero-inner {
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-hero .eyebrow { color: var(--on-blue-9); }
.page-hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  margin-bottom: 1rem;
}
.page-hero .lead {
  max-width: 42rem;
  margin-bottom: 1.9rem;
  color: var(--on-blue-1);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 300;
}
.page-hero .hero-actions { justify-content: center; }

/* --- Value cards (Our promise) --------------------------------------------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.value-card {
  background: var(--white);
  border: 1px solid var(--light-2);
  border-radius: 30px;
  padding: 1.9rem;
  box-shadow: var(--shadow);
}
.value-card h3 { color: var(--blue); font-size: 1.3rem; margin-bottom: 0.6rem; }
/* 8-item variant (e.g. smartCARE add-ons): 2 rows of 4 on desktop */
.value-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }

/* --- smartCARE page --------------------------------------------------------- */

/* Commercial roof photo behind the interior hero */
.page-hero--smartcare {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/aerial-sm.jpg");
}

/* Extra space below the core-benefits blurb row on the smartCARE page */
.plans .feature-blurbs { margin-bottom: 4rem; }

/* Center the plans section heading block */
.plans .section-head { text-align: center; margin-inline: auto; }

/* Light background for the add-ons section so white cards read */
.section.addons { background: var(--light); }

/* Add-on cards: centered icon at top, centered content */
.addons .value-card { text-align: center; }
.addon-icon { display: block; width: 64px; height: 64px; margin: 0 auto 1rem; }

/* Plan comparison cards */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: stretch;
  max-width: 78rem;
  margin-inline: auto;
}
.plan-note { font-size: 0.78rem; color: var(--body); margin: 0 0 1.2rem; }
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--light-2);
  border-radius: 30px;
  padding: 2.2rem;
  box-shadow: var(--shadow);
}
.plan-card--popular { border: 2px solid var(--blue); }
.plan-badge {
  position: absolute;
  top: -0.85rem;
  right: 1.9rem;
  background: var(--red);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}
.plan-name { color: var(--blue); font-size: 1.55rem; margin-bottom: 0.3rem; }
.plan-tagline { color: var(--body); font-size: 0.92rem; margin-bottom: 1.4rem; }
.plan-features {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.plan-features li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.plan-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-weight: 700;
}
.plan-card .btn { margin-top: auto; }
@media (max-width: 980px) { .plan-grid { grid-template-columns: 1fr; max-width: 36rem; } }

/* --- About page: hero, stats band, timeline -------------------------------- */

/* Crew-at-work photo behind the interior hero */
.page-hero--about {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/about-hero.jpg");
}

/* Service Areas page hero */
.page-hero--areas {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/aerial.jpg");
}

/* Careers page hero */
.page-hero--careers {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/peakview_careers.jpg");
}

/* Service category page heroes */
.page-hero--hospitality {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/Broadmoor-ReRoof-Slider.jpg");
}
.page-hero--retail {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/aerial.jpg");
}
.page-hero--office {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/office_building.jpg");
}
.page-hero--industrial {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/crew-1245.jpg");
}
.page-hero--manufacturing {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/manufacturing.jpg");
}
.page-hero--schools {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/school.jpg");
}
.page-hero--higher-ed {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/higher_education.jpg");
}
/* Roof-type page heroes: each page sets its own image via the --hero-img custom property */
.page-hero--rooftype {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    var(--hero-img, url("assets/modern-home.jpg"));
}

/* Roof-type page: small project gallery (one row of four) */
.rt-gallery { background: var(--light); }
.rt-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  list-style: none;
  margin-top: 2.5rem;
}
.rt-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow);
}
@media (max-width: 760px) { .rt-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Areas section sits directly under the intro, no top gap */
.section.areas { padding-top: 0; }

/* Per-area contact details */
.area-contact {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.area-contact li { color: var(--body); line-height: 1.45; }
.area-contact li strong { color: var(--ink); font-weight: 600; display: inline-block; min-width: 4.75rem; }
.area-contact a { color: var(--blue); }
.area-contact a:hover { color: var(--red); }

/* --- Gallery page ----------------------------------------------------------- */

.page-hero--gallery {
  background-image: linear-gradient(rgba(var(--blue-dark-rgb), 0.82), rgba(var(--blue-deep-rgb), 0.9)),
    url("assets/crew-2007.jpg");
}

.gallery-cat + .gallery-cat { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.gallery-cat-head { margin-bottom: 1.25rem; }
.gallery-cat-head h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); color: var(--ink); margin-bottom: 0.25rem; }
.gallery-cat-head p { color: var(--body); max-width: 48rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.gallery-thumb {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.gallery-thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  transition: transform 0.35s ease;
}
.gallery-thumb:hover img,
.gallery-thumb:focus-visible img { transform: scale(1.06); }
@media (max-width: 620px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Lightbox */
body.no-scroll { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; }
.lightbox.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(var(--blue-black-rgb), 0.9); }
.lightbox-dialog {
  position: relative;
  max-width: min(1000px, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-caption { color: var(--on-blue-1); margin-top: 0.85rem; font-size: 0.95rem; text-align: center; }
.lightbox-close,
.lightbox-nav {
  position: fixed;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox-close { top: 1rem; right: 1.25rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* --- Contact modal ---------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 1100; display: none; }
.modal.is-open {
  display: flex;
  padding: clamp(1rem, 4vw, 3rem);
  overflow-y: auto;
}
.modal-backdrop { position: fixed; inset: 0; background: rgba(var(--blue-black-rgb), 0.9); }
.modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--light-2);
  color: var(--blue);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.modal-close:hover { background: var(--gray); }
.modal-head { margin-bottom: 1.5rem; padding-right: 2rem; }
.modal-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--blue); margin-bottom: 0.4rem; }
.modal-sub { color: var(--body); }

.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form .field { margin-bottom: 1rem; display: flex; flex-direction: column; }
.contact-form label { font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit;
  color: var(--ink);
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gray);
  border-radius: 10px;
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.15);
}
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form .form-actions { margin-top: 0.5rem; }
.contact-form .form-actions .btn { width: 100%; }
.contact-form .form-status { margin-top: 0.9rem; font-size: 0.95rem; min-height: 1.2rem; }
.contact-form .form-status.is-success { color: var(--success); }
.contact-form .form-status.is-error { color: var(--red); }
.field--hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) {
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* --- Contact page ----------------------------------------------------------- */

.section.contact-page { background: var(--light); padding-block: clamp(3.5rem, 8vw, 7rem); }
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}
.contact-split--no-map { grid-template-columns: minmax(0, 40rem); }
.contact-split-main {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}
.contact-intro h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--blue); margin-bottom: 1rem; }
.contact-intro > p { color: var(--body); margin-bottom: 1.75rem; max-width: 34rem; }
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--light-2);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow);
}
@media (max-width: 820px) {
  .contact-split { grid-template-columns: 1fr; gap: 2.5rem; }
}

.section.contact-location { padding-block: clamp(2.75rem, 6vw, 5rem); }
.section.contact-location--alt { background: var(--white); }
.contact-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.contact-location-grid--reverse .contact-location-copy { order: 2; }
.contact-location-grid--reverse .loc-map { order: 1; }
.contact-location-grid--no-map { grid-template-columns: minmax(0, 36rem); }
.contact-location-copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--blue); margin-bottom: 0.85rem; }
.contact-location-copy address {
  font-style: normal;
  color: var(--body);
  line-height: 1.45;
  margin-bottom: 0.65rem;
}
.contact-location-phone { margin-bottom: 1.25rem; }
.contact-location-phone a { color: var(--blue); font-weight: 600; }
.contact-location-phone a:hover { color: var(--red); }
.loc-map {
  width: 100%;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--light-2);
  /* Keep Leaflet's internal z-index panes (tiles 200, markers 600, controls
     1000) inside this box so they cannot paint over the sticky header. */
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.loc-map.loc-map--overview {
  height: 100%;
  min-height: 0;
  align-self: stretch;
}
@media (max-width: 820px) {
  .loc-map.loc-map--overview { height: 320px; min-height: 320px; }
}
.loc-map-pin {
  background: transparent;
  border: 0;
}
.loc-map-pin span {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  background: var(--red);
  border: 3px solid var(--white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
@media (max-width: 820px) {
  .contact-location-grid,
  .contact-location-grid--reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* --- Careers page ----------------------------------------------------------- */

/* Current openings */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin-top: 2.5rem;
}
.job-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--light-2);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.job-card h3 { font-size: 1.15rem; color: var(--blue); margin-bottom: 0.5rem; }
.job-card p { color: var(--body); margin-bottom: 1.25rem; }
.job-card .btn { margin-top: auto; }
@media (max-width: 860px) { .jobs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .jobs-grid { grid-template-columns: 1fr; } }

/* Employment application: keep the wide, centered card look */
.careers-form-wrap {
  max-width: 60rem;
  margin-inline: auto;
  margin-top: 2.5rem;
  background: var(--white);
  border: 1px solid var(--light-2);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow);
}
.careers-form fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.careers-form fieldset:last-of-type { margin-bottom: 0.5rem; }
.careers-form legend {
  width: 100%;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--light-2);
}
.careers-form .field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.careers-form .form-note { font-size: 0.85rem; color: var(--body); margin: 0.25rem 0 0.9rem; }
.careers-form .label-hint { font-weight: 400; color: var(--body); }
.careers-form .radio-group { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.careers-form .radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-weight: 400;
}
/* Radios and file inputs opt out of the full-width text-input styling */
.careers-form input[type="radio"] {
  width: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--blue);
}
.careers-form input[type="file"] {
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--gray);
  border-radius: 10px;
  background: var(--light);
  cursor: pointer;
}
.careers-form textarea { min-height: 4.5rem; }

/* Stat band */
.stat-band { background: var(--blue); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
.stat-num { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; color: var(--white); line-height: 1; }
.stat-num span { color: var(--on-blue-9); }
.stat-label { margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--on-blue-9); }
@media (max-width: 600px) { .stat-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Vertical timeline ("How we got here") */
.timeline { position: relative; max-width: 60rem; margin-inline: auto; }
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--light-2);
  transform: translateX(-50%);
}
.timeline-item { position: relative; width: 50%; padding: 0 2.75rem 2.75rem; }
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; }
.timeline-item::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--light-2);
}
.timeline-item:nth-child(odd)::before { right: -0.5rem; }
.timeline-item:nth-child(even)::before { left: -0.5rem; }
.timeline-date { font-weight: 700; color: var(--blue); font-size: 1.15rem; }
.timeline-desc { margin-top: 0.3rem; color: var(--body); }
@media (max-width: 720px) {
  .timeline::before { left: 0.5rem; }
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 2.25rem 2rem; }
  .timeline-item:nth-child(odd)::before,
  .timeline-item:nth-child(even)::before { left: 0; right: auto; }
}

/* --- About ------------------------------------------------------------------ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.about-media img {
  width: 100%;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.about-copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1.1rem; }
.about-copy > p { margin-bottom: 1.75rem; }

.about-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--gray);
  padding-top: 1.6rem;
  margin-bottom: 1.9rem;
}
.about-stats div { display: flex; flex-direction: column-reverse; }
.about-stats dd {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}
.about-stats dd span { color: var(--red); }
.about-stats dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--body);
}

/* --- Services --------------------------------------------------------------- */

/* Homepage Services band + the sub-service band on industry/service pages
   share this dark-blue treatment. Homepage Services uses `.services-offered`;
   the vertical pages' sub-service section uses `.services` (see
   partials/vertical.php). */
.services,
.services-offered { background: var(--blue); }
.services .section-head h2,
.services .section-head .section-intro,
.services-offered .section-head h2,
.services-offered .section-head .section-intro { color: var(--white); }
.services .section-head .eyebrow,
.services-offered .section-head .eyebrow { color: var(--on-blue-9); }

/* Homepage Industries band: light treatment — light background with the default
   dark section-head text and red eyebrow. The reverse of the blue Services band
   above, so the two homepage bands read as distinct. Uses
   .service-grid/.service-card; the white cards sit on the light background as on
   the smartCARE add-ons band. */
.industries { background: var(--light); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

/* 6-card variant (e.g. multi-family services): 2 rows of 3 on desktop */
.service-grid--three { grid-template-columns: repeat(3, 1fr); }

/* Count-driven variant (homepage Services band). Flexbox rather than grid so a
   short final row (when there are 5+ services) CENTERS within the container
   instead of left-aligning. --svc-cols (set inline from PHP) is min(count, 4);
   --svc-eff is the effective per-row count at the current breakpoint (narrowed
   in the media queries below). Each card's basis makes N cards + (N-1) gaps
   exactly fill a row — so 1 fills the container, 2 are ~50%, 3 ~33%, 4 ~25% —
   and justify-content centers any partial last row. The gap comes from the
   shared .service-grid rule above (1.75rem), matching the basis math. */
.service-grid--auto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --svc-eff: var(--svc-cols, 4);
}
.service-grid--auto > .service-card {
  min-width: 0;
  flex: 0 1 calc((100% - (var(--svc-eff) - 1) * 1.75rem) / var(--svc-eff));
  max-width: calc((100% - (var(--svc-eff) - 1) * 1.75rem) / var(--svc-eff));
}

.service-card {
  background: var(--white);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover,
.js .service-card.reveal.is-visible:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* keep the hover lift snappy once the entrance reveal has finished */
.js .service-card.reveal.is-visible { transition: transform 0.25s ease, box-shadow 0.25s ease; }

.service-media { overflow: hidden; }
/* About miscellaneous cards. Flex, not grid, so a smaller card doesn't stay
   pinned to the edge of a wide column. The one gap is both the horizontal
   and vertical space, at every blurb size. Large still fills a 3-up row;
   Medium is half that card and Small about a third, centered as a group. */
.misc-cards.service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}
.misc-cards .service-card {
  flex: 0 0 calc((100% - 3.5rem) / 3);
  width: calc((100% - 3.5rem) / 3);
  max-width: calc((100% - 3.5rem) / 3);
}
.misc-cards--medium .service-card {
  flex-basis: calc((100% - 3.5rem) / 6);
  width: calc((100% - 3.5rem) / 6);
  max-width: calc((100% - 3.5rem) / 6);
}
.misc-cards--small .service-card {
  flex-basis: calc((100% - 3.5rem) / 9);
  width: calc((100% - 3.5rem) / 9);
  max-width: calc((100% - 3.5rem) / 9);
}
@media (max-width: 1000px) {
  .misc-cards .service-card {
    flex-basis: calc((100% - 1.75rem) / 2);
    width: calc((100% - 1.75rem) / 2);
    max-width: calc((100% - 1.75rem) / 2);
  }
  .misc-cards--medium .service-card {
    flex-basis: calc((100% - 1.75rem) / 4);
    width: calc((100% - 1.75rem) / 4);
    max-width: calc((100% - 1.75rem) / 4);
  }
  .misc-cards--small .service-card {
    flex-basis: calc((100% - 1.75rem) / 6);
    width: calc((100% - 1.75rem) / 6);
    max-width: calc((100% - 1.75rem) / 6);
  }
}
@media (max-width: 480px) {
  .misc-cards .service-card {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
  .misc-cards--medium .service-card {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }
  .misc-cards--small .service-card {
    flex-basis: 33%;
    width: 33%;
    max-width: 33%;
  }
}
.service-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

/* Homepage Services and Industries bands: cap the card image height so a 1- or
   2-up row (very wide cards) doesn't render enormous photos. object-fit: cover
   already crops instead of stretching. Scoped so the service/industry detail
   pages keep their natural 4:3 tiles. */
.services-offered .service-media img,
.industries .service-media img { max-height: 300px; }

.service-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.service-body h3 { font-size: 1.2rem; }
.service-body p { font-size: 0.92rem; flex: 1; }

/* --- Features (Tesla / smartCARE) ------------------------------------------- */

.features { display: grid; }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: stretch;
}
.feature + .feature { margin-top: clamp(3rem, 6vw, 5rem); }
.feature.reverse .feature-media { order: 2; }

.feature-media { height: 100%; }
.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.feature-copy h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin-bottom: 1rem; }
.feature-copy p { margin-bottom: 1rem; }

.feature-blurbs {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 1.5rem;
}
.feature-blurb {
  flex: 1 1 0;
  min-width: 120px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 0.75rem;
}
.feature-blurb:first-child { padding-left: 0; }
.feature-blurb:last-child { padding-right: 0; }
/* Thin separator centered between side-by-side blurbs */
.feature-blurb + .feature-blurb { border-left: 1px solid var(--rule); }
.feature-blurb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  color: var(--red);
  background: var(--light);
}
.feature-blurb-icon svg { width: 1.5rem; height: 1.5rem; }
.feature-blurb-icon img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.feature-blurb-icon--bare { background: none; }
.feature-blurb-icon--bare img { width: 2.75rem; height: 2.75rem; }
.feature-blurb h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
  line-height: 1rem;
}
.feature-blurb p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--body);
}

@media (max-width: 600px) {
  .feature-blurb { flex-basis: 40%; }
  /* Two-per-row: drop the separator on row-starting items */
  .feature-blurb:nth-child(odd) { border-left: none; }
}

/* --- Roofing types ---------------------------------------------------------- */

.roof-types { background: var(--light); }

.types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  list-style: none;
}

.type-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 72 / 49;
}
.type-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
/* Whole card is a link out to the roof-type page */
.type-card-link { position: absolute; inset: 0; display: block; z-index: 1; }
.type-card:hover img { transform: scale(1.07); }
/* Solar card: spans two columns, stretches to match the row height */
.type-card--solar { grid-column: span 2; aspect-ratio: auto; }
.type-card span {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1.1rem 1.1rem;
  background: linear-gradient(transparent, rgba(var(--blue-dark-rgb), 0.92));
  color: var(--white);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

/* --- Reviews ---------------------------------------------------------------- */

.reviews {
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: var(--on-blue-3);
}
.reviews h2 { color: var(--white); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.review {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  padding: 1.9rem;
  display: flex;
  flex-direction: column;
}
.review p {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.4rem;
  flex: 1;
  position: relative;
  font-weight: 300;
}
.review p::before {
  content: "\201C";
  display: block;
  font-size: 3rem;
  line-height: 0.5;
  color: var(--red);
  margin-bottom: 0.6rem;
}
.review footer { display: flex; flex-direction: column; }
.review cite { font-style: normal; font-weight: 600; color: var(--white); font-size: 1.05rem; }
.review footer span { font-size: 0.85rem; color: var(--on-blue-8); }

/* --- BlueThread ------------------------------------------------------------- */

.bluethread {
  /* No background image; top and bottom padding use the default .section value */
}

.bt-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}
.bt-copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1.1rem; }
.bt-copy > p { margin-bottom: 1.4rem; }
.bt-copy a { color: var(--red); font-weight: 600; }

.bt-points { list-style: none; margin-bottom: 1.9rem; }
.bt-points li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.7rem;
}
.bt-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.18);
}

.bt-logo {
  background: var(--blue);
  /* border-radius: var(--radius); */
  padding: 3rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bt-logo img { width: 100%; max-width: 420px; }

/* --- Final CTA band --------------------------------------------------------- */

.cta-band {
  /* Image is editable site-wide (Settings → Footer → Pre-footer background):
     header.php sets --cta-bg on <body> when configured; otherwise this fallback
     image applies. The About page keeps its own --hiring override below. */
  background:
    linear-gradient(rgba(var(--blue-dark-rgb), 0.80), rgba(var(--blue-deep-rgb), 0.95)),
    var(--cta-bg, url("assets/hero-main.jpg")) center / cover no-repeat fixed;
  color: var(--white);
  text-align: center;
}
.cta-inner { max-width: 50rem; margin-inline: auto; }
.cta-band h2 { color: var(--white); font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 0.9rem; }
.cta-band p { color: var(--on-blue-4); font-size: 1.1rem; margin-bottom: 2rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* About page: swap the CTA photo (keep the blue overlay from .cta-band) */
.cta-band--hiring {
  background-image:
    linear-gradient(rgba(var(--blue-dark-rgb), 0.80), rgba(var(--blue-deep-rgb), 0.95)),
    url("assets/about-hiring.png");
}

/* --- Footer ----------------------------------------------------------------- */

.site-footer { background: var(--blue-deep); color: var(--on-blue-7); }

.footer-grid {
  display: grid;
  /* Default = brand + two locations + quick links. footer.php overrides the
     --footer-grid-cols custom property when locations come from the repeater.
     The responsive rules below set grid-template-columns directly, so they win
     over the variable on smaller screens. */
  grid-template-columns: var(--footer-grid-cols, 1.6fr 1fr 1fr 1fr);
  gap: 2.5rem;
  padding-top: clamp(3rem, 5vw, 4rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.footer-brand img { width: 200px; margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.92rem; margin-bottom: 1.25rem; max-width: 26rem; }

.footer-social { display: flex; gap: 0.55rem; list-style: none; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-blue-5);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.footer-social a:hover { background: var(--red); color: var(--white); }

.footer-bbb { display: inline-block; margin-top: 1.25rem; }
.footer-bbb img { width: 275px; height: auto; }

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-col h3 {
  color: var(--white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}
.footer-col address { font-style: normal; line-height: 1.2; font-size: 0.92rem; }
.footer-col a { color: var(--on-blue-5); text-decoration: none; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }
.footer-loc-contact {
  margin-top: auto;
  display: inline-block;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  padding: 0.5rem 1.1rem;
}

.footer-links { list-style: none; display: grid; gap: 0.55rem; font-size: 0.92rem; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.3rem;
  font-size: 0.84rem;
}
.footer-bottom a { color: var(--on-blue-5); font-weight: 600; }

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 1000px) {
  .about-grid, .feature, .feature.reverse, .bt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .feature.reverse .feature-media { order: 0; }
  .feature-media { height: auto; }
  .feature-media img { height: auto; aspect-ratio: 16 / 10; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  /* Services band (flex): cap at 2 per row here; a partial last row still centers. */
  .service-grid--auto { --svc-eff: min(var(--svc-cols, 4), 2); }
  .types-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { background-attachment: scroll; }
}

/* Primary navigation collapses to the hamburger menu below 1064px. Kept in its
   own query (separate from the 760px layout tweaks below) so the wider nav —
   Services, Industries, smartCARE, About (Blog), Service Areas, Gallery,
   Careers, Contact — folds away before it can crowd or wrap the logo. */
@media (max-width: 1064px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem; height: 2.8rem;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 60;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blue);
    box-shadow: 0 16px 30px rgba(var(--blue-deep-rgb), 0.35);
    padding: 0.5rem 0;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { padding: 0.95rem 1.5rem; }
  /* Standard links are white so they're visible on the blue dropdown */
  .nav-menu a:not(.nav-cta) { color: var(--white); }
  .nav-menu a:not(.nav-cta):hover { color: var(--light); }
  .nav-menu a:not(.nav-cta)::after { display: none; }
  /* Left column holds the standard links; Contact button sits on the right.
     Direct children only, so the Blog item under About is not treated as Contact. */
  .nav-menu > li:not(:last-child) { width: 62%; }
  .nav-menu > li:last-child {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    margin: 0;
  }
  .nav-sub {
    position: static;
    left: auto;
    transform: none;
    min-width: 0;
    padding: 0 0 0.25rem;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-menu .nav-sub a {
    padding: 0.35rem 1.5rem 0.55rem 2.4rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
  }
  .nav-menu .nav-sub a:hover { color: var(--white); }
  .nav-menu a.nav-cta { margin: 0; padding: 0.6rem 1.4rem; text-align: center; }
}

@media (max-width: 760px) {
  .preheader-inner { justify-content: center; gap: 0.5rem 1.25rem; padding-block: 0.5rem; }
  .preheader-contact { gap: 1rem; justify-content: center; font-size: 0.8rem; }

  .about-stats { gap: 1.75rem; }
  .reviews-grid { grid-template-columns: 1fr; }
  .types-grid { grid-template-columns: repeat(2, 1fr); }
  /* Solar spans the full 2-col row here, so give it an explicit wide ratio */
  .type-card--solar { aspect-ratio: 144 / 49; }
}

@media (max-width: 480px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-grid--auto { --svc-eff: 1; }  /* Services band (flex): one per row */
  .preheader-contact li:nth-child(2) { display: none; }  /* keep top bar tidy on tiny screens */
}