/* ==========================================================================
   EC Roofing — Design System
   Rebuild of the legacy The7/WPBakery site. Keeps the existing brand language
   (Oswald condensed caps, blue/green, sharp corners, green rule accents) with
   a modern, accessible, builder-free implementation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ec-blue:        #005cb9;
  --ec-blue-dark:   #004a94;
  --ec-blue-darker: #003a74;
  --ec-green:       #7fbe40; /* brand green — replaces legacy #80bc00 */
  --ec-green-dark:  #6da634;
  --ec-ink:         #232323;
  --ec-gray:        #58595b;
  --ec-gray-light:  #f4f5f6;
  --ec-gray-mid:    #d8dade;
  --ec-white:       #ffffff;

  /* Type */
  --ec-font-head: "Oswald", "Arial Narrow", Impact, sans-serif;
  --ec-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale */
  --ec-fs-h1:    clamp(2.35rem, 1.4rem + 3.9vw, 4.6rem);
  --ec-fs-h2:    clamp(1.9rem, 1.25rem + 2.7vw, 3.35rem);
  --ec-fs-h3:    clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  --ec-fs-h4:    clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --ec-fs-body:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --ec-fs-small: 0.875rem;

  /* Layout */
  --ec-wrap:      1240px;
  --ec-wrap-narrow: 900px;
  --ec-gutter:    clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --ec-section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Effects — the brand uses sharp corners; radius is reserved for media/cards */
  --ec-radius:    2px;
  /* Buttons carry a slightly softer corner than panels and media, which
     stay near-square in keeping with the brand. */
  --ec-btn-radius: 6px;
  --ec-shadow:    0 2px 8px rgba(35, 35, 35, .08);
  --ec-shadow-lg: 0 14px 40px rgba(0, 51, 102, .16);
  --ec-transition: 180ms ease;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Offset in-page anchors so the sticky nav never covers a target heading.
   overflow-x: clip contains third-party embeds (the Trustindex reviews
   carousel in particular) that lay out wider than the viewport. `clip` rather
   than `hidden` because it does not create a scroll container, so it cannot
   break position: sticky or the smooth-scroll behavior above. */
html { scroll-behavior: smooth; scroll-padding-top: 10rem; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body.ec-site {
  margin: 0;
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  line-height: 1.65;
  color: var(--ec-ink);
  background: var(--ec-white);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ec-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ec-blue-dark); }

/* Visible focus for keyboard users — the legacy theme suppressed outlines. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ec-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Headings
   -------------------------------------------------------------------------- */
.ec-site h1, .ec-site h2, .ec-site h3, .ec-site h4, .ec-site h5, .ec-site h6 {
  font-family: var(--ec-font-head);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.004em;
  margin: 0 0 .6em;
  color: var(--ec-ink);
}
.ec-site h1 { font-size: var(--ec-fs-h1); }
.ec-site h2 { font-size: var(--ec-fs-h2); }
.ec-site h3 { font-size: var(--ec-fs-h3); }
.ec-site h4 { font-size: var(--ec-fs-h4); }

.ec-site p { margin: 0 0 1.15em; }
.ec-site p:last-child { margin-bottom: 0; }

/* The brand's signature short green rule beneath a heading. */
.ec-rule::after {
  content: "";
  display: block;
  width: 68px;
  height: 5px;
  margin-top: .55em;
  background: var(--ec-green);
}
.ec-rule--center::after { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.ec-wrap {
  width: 100%;
  max-width: var(--ec-wrap);
  margin-inline: auto;
  padding-inline: var(--ec-gutter);
}
.ec-wrap--narrow { max-width: var(--ec-wrap-narrow); }

.ec-section { padding-block: var(--ec-section-y); position: relative; }
.ec-section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.ec-section--blue  { background: var(--ec-blue); color: var(--ec-white); }
.ec-section--green { background: var(--ec-green); color: var(--ec-white); }
.ec-section--gray  { background: var(--ec-gray-light); }

.ec-section--blue :is(h1,h2,h3,h4),
.ec-section--green :is(h1,h2,h3,h4) { color: var(--ec-white); }
.ec-section--blue a:not(.ec-btn),
.ec-section--green a:not(.ec-btn) { color: var(--ec-white); }

/* Subtle diagonal texture the legacy blue panels used. */
.ec-section--blue.is-textured {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.035) 0 2px,
    transparent 2px 9px
  );
}

.ec-split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
/* Opt back in to vertical centering where both columns are short. */
.ec-split--middle { align-items: center; }
@media (min-width: 900px) {
  .ec-split { grid-template-columns: 1fr 1fr; }
  .ec-split--wide-left  { grid-template-columns: 1.15fr .85fr; }
  .ec-split--wide-right { grid-template-columns: .85fr 1.15fr; }
}

.ec-eyebrow {
  font-family: var(--ec-font-head);
  font-size: var(--ec-fs-small);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ec-green);
  margin: 0 0 .75rem;
}
.ec-section--green .ec-eyebrow { color: var(--ec-blue); }

.ec-lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }

/* Financing lender panel — keeps the otherwise-sparse right column from
   reading as empty space. */
.ec-financing__lender {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--ec-radius);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: rgba(255, 255, 255, .06);
}
.ec-financing__note {
  margin: 1.1rem 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
.ec-financing__note span { font-size: .8125rem; opacity: .75; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.ec-btn {
  --btn-bg: var(--ec-green);
  --btn-bg-hover: var(--ec-green-dark);
  --btn-fg: var(--ec-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.75rem;
  font-family: var(--ec-font-head);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--ec-btn-radius);
  cursor: pointer;
  transition: background var(--ec-transition), border-color var(--ec-transition),
              color var(--ec-transition), transform var(--ec-transition);
}
.ec-btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-fg);
}
.ec-btn--blue  { --btn-bg: var(--ec-blue); --btn-bg-hover: var(--ec-blue-dark); }
.ec-btn--white {
  --btn-bg: var(--ec-white); --btn-bg-hover: var(--ec-white); --btn-fg: var(--ec-green);
}
.ec-btn--white:hover { --btn-fg: var(--ec-green-dark); }
.ec-btn--outline {
  --btn-bg: transparent; --btn-bg-hover: var(--ec-white); --btn-fg: var(--ec-white);
  border-color: var(--ec-white);
}
.ec-btn--outline:hover { --btn-fg: var(--ec-blue); }
.ec-btn--lg { padding: 1.15rem 2.25rem; font-size: 1.0625rem; }
/* Compact variant for the masthead bar, where space is tight. */
.ec-btn--sm {
  padding: .7rem 1.1rem;
  font-size: clamp(.8125rem, .7rem + .2vw, .9375rem);
  letter-spacing: .03em;
}
.ec-btn--block { width: 100%; }

.ec-btn-row { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   6. Promo bar
   -------------------------------------------------------------------------- */
.ec-promo {
  background: var(--ec-green);
  color: var(--ec-white);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-small);
}
.ec-promo__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.25rem;
  padding-block: .6rem;
  text-align: center;
}
.ec-promo__text { margin: 0; font-weight: 600; }
.ec-promo__text strong { font-weight: 800; }
.ec-promo__cta {
  padding: .5rem 1.1rem;
  font-family: var(--ec-font-head);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ec-white);
  background: var(--ec-blue);
  border-radius: var(--ec-btn-radius);
  transition: background var(--ec-transition);
  white-space: nowrap;
}
.ec-promo__cta:hover { background: var(--ec-blue-dark); color: var(--ec-white); }

/* --------------------------------------------------------------------------
   7. Masthead bar — logo, navigation and CTAs in one row
   -------------------------------------------------------------------------- */
.ec-bar {
  background: var(--ec-white);
  border-bottom: 3px solid var(--ec-blue);
  position: relative;
  z-index: 40;
}
.ec-bar__inner {
  /* Wider than the content wrap: the bar carries logo + 7 nav items + 2 CTAs. */
  width: 100%;
  max-width: 1460px;
  margin-inline: auto;
  padding-inline: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  /* Vertical padding so the logo lockup isn't flush against the bar edges —
     the mark plus the MHIC line is ~85px tall on its own. */
  padding-block: .9rem;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, .25rem + 1.2vw, 1.75rem);
  min-height: 96px;
}

.ec-bar__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  text-decoration: none;
  flex-shrink: 0;
}
.ec-bar__logo { width: clamp(136px, 11.5vw, 182px); }
.ec-bar__mhic {
  font-family: var(--ec-font-head);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ec-blue);
  white-space: nowrap;
}

.ec-bar__actions {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.ec-bar__actions .ec-btn { border-radius: 0; white-space: nowrap; }
.ec-bar__actions .ec-btn:first-child {
  border-radius: var(--ec-btn-radius) 0 0 var(--ec-btn-radius);
}
.ec-bar__actions .ec-btn:last-child {
  border-radius: 0 var(--ec-btn-radius) var(--ec-btn-radius) 0;
}

.ec-bar__toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  padding: .7rem .95rem;
  font-family: var(--ec-font-head);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ec-white);
  background: var(--ec-blue);
  border: 0;
  border-radius: var(--ec-btn-radius);
  cursor: pointer;
}
.ec-bar__toggle svg { width: 20px; height: 20px; fill: currentColor; }

/* --------------------------------------------------------------------------
   8. Primary navigation (inside the bar)
   -------------------------------------------------------------------------- */
.ec-nav { flex: 1 1 auto; min-width: 0; }
.ec-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.1rem, -.35rem + 1vw, .85rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ec-nav__list > li { position: relative; }
.ec-nav__list a {
  display: block;
  padding: .6rem .35rem;
  font-family: var(--ec-font-head);
  font-size: clamp(.8125rem, .62rem + .32vw, .9688rem);
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ec-ink);
  border-bottom: 3px solid transparent;
  transition: color var(--ec-transition), border-color var(--ec-transition);
}
.ec-nav__list > li > a:hover,
.ec-nav__list > li.is-open > a,
.ec-nav__list > li.is-current > a {
  color: var(--ec-blue);
  border-bottom-color: var(--ec-green);
}

/* Dropdowns */
.ec-nav__sub {
  list-style: none;
  margin: 0;
  padding: .35rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 264px;
  background: var(--ec-white);
  box-shadow: var(--ec-shadow-lg);
  border-top: 4px solid var(--ec-green);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--ec-transition), transform var(--ec-transition), visibility var(--ec-transition);
  z-index: 50;
}
/* Top level opens downward. */
.ec-nav__list > li:hover > .ec-nav__sub,
.ec-nav__list > li:focus-within > .ec-nav__sub,
.ec-nav__list > li.is-open > .ec-nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Nested levels open sideways. Without this the rule above only matched direct
   children of .ec-nav__list, so third-level menus (Residential > Roofing >
   Roof Repair…) never appeared on hover. */
.ec-nav__sub > li:hover > .ec-nav__sub,
.ec-nav__sub > li:focus-within > .ec-nav__sub,
.ec-nav__sub > li.is-open > .ec-nav__sub {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.ec-nav__sub a {
  padding: .6rem 1.15rem;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  white-space: normal;
  color: var(--ec-ink);
  border-bottom: 0;
}
.ec-nav__sub a:hover { background: var(--ec-gray-light); color: var(--ec-blue); }
.ec-nav__sub .ec-nav__sub { top: 0; left: 100%; transform: translateX(-6px); }
/* A group that opens sideways gets a caret that points that way. */
.ec-nav__sub .ec-nav__group > a { justify-content: space-between; display: flex; align-items: center; }
.ec-nav__sub .ec-nav__group > a .ec-nav__caret { transform: rotate(-90deg); }
/* Keep the last dropdowns from running off the right edge. */
.ec-nav__list > li:nth-last-child(-n+2) > .ec-nav__sub { left: auto; right: 0; }
.ec-nav__list > li:nth-last-child(-n+2) .ec-nav__sub .ec-nav__sub { left: auto; right: 100%; }

.ec-nav__group > a { cursor: default; }

.ec-nav__caret { display: inline-flex; margin-left: .3rem; vertical-align: middle; }
.ec-nav__caret svg { width: 9px; height: 9px; fill: currentColor; }

/* --- Mobile: logo + toggle, nav becomes a drawer under the bar ----------- */
@media (max-width: 1099px) {
  .ec-bar__actions { display: none; }
  .ec-bar__toggle { display: inline-flex; }

  .ec-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ec-blue);
    box-shadow: var(--ec-shadow-lg);
    max-height: calc(100vh - 116px);
    overflow-y: auto;
  }
  .ec-nav.is-open { display: block; }
  .ec-nav__list { flex-direction: column; flex-wrap: wrap; align-items: stretch; gap: 0; }
  .ec-nav__list a {
    color: var(--ec-white);
    padding: .9rem var(--ec-gutter);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    white-space: normal;
  }
  .ec-nav__list > li > a:hover,
  .ec-nav__list > li.is-open > a,
  .ec-nav__list > li.is-current > a {
    color: var(--ec-white);
    background: var(--ec-blue-dark);
    border-bottom-color: rgba(255, 255, 255, .14);
  }
  .ec-nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    display: none;
    background: var(--ec-blue-dark);
    padding: 0;
    min-width: 0;
  }
  .ec-nav__list > li.is-open > .ec-nav__sub,
  .ec-nav__sub > li.is-open > .ec-nav__sub { display: block; }
  /* Nested menus stack inline on mobile rather than flying out. */
  .ec-nav__sub .ec-nav__sub { left: auto; transform: none; }
  .ec-nav__sub .ec-nav__sub a { padding-left: calc(var(--ec-gutter) + 2rem); }
  .ec-nav__sub .ec-nav__group > a .ec-nav__caret { transform: none; }
  .ec-nav__sub a { color: var(--ec-white); padding-left: calc(var(--ec-gutter) + 1rem); }
  .ec-nav__sub a:hover { background: var(--ec-blue-darker); color: var(--ec-white); }
  .ec-nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem var(--ec-gutter);
  }
}
@media (min-width: 1100px) {
  .ec-nav__mobile-actions { display: none; }
}

/* --------------------------------------------------------------------------
   9. Hero + overlapping service cards
   -------------------------------------------------------------------------- */
.ec-hero { position: relative; }

/* The bottom padding reserves the strip of image that the card row below
   overlaps into, so the hero copy is never covered by the cards. */
.ec-hero__media {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 42vw, 660px);
  padding-block: clamp(2.75rem, 2rem + 4vw, 4.5rem) clamp(6.5rem, 5rem + 7vw, 11rem);
  overflow: hidden;
}
.ec-hero__media > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The hero is a wider aspect than the photo, so `cover` crops vertically.
     Centring it cut the roofline off the top and kept a lot of empty lawn.
     Anchoring near the top shifts the image down in frame and puts the roof
     — the thing we actually sell — in view. On phones the container is
     taller than the photo's aspect, so the crop is horizontal and this
     vertical value simply has no effect. */
  object-position: 50% 15%;
}
.ec-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, rgba(0,42,86,.82) 0%, rgba(0,58,116,.62) 42%, rgba(0,58,116,.18) 78%);
}
/* Full-width wrapper keeps .ec-wrap's centering; the inner block is what
   gets the measure constraint. */
.ec-hero__inner { position: relative; z-index: 2; }
/* Do NOT put a `ch` measure on this wrapper: `ch` resolves against the
   element's own font, which here is body-size Open Sans (~430px). That is far
   too narrow for the 74px display headline, which then wrapped mid-phrase and
   — with the <br> — broke into four lines. Constrain the headline and the
   lede separately instead, each against its own type size. */
.ec-hero__copy {
  color: var(--ec-white);
  text-shadow: 0 2px 18px rgba(0, 20, 40, .45);
}
.ec-hero__copy h1 {
  color: var(--ec-white);
  margin-bottom: .45em;
  /* Room for "Roofing Done Right" on one line; the <br> makes the second. */
  max-width: 17ch;
}
.ec-hero__copy .ec-lede { max-width: 34rem; }
.ec-hero__copy .ec-eyebrow { color: var(--ec-green); }

@media (max-width: 759px) {
  .ec-hero__media { padding-bottom: clamp(3rem, 2rem + 4vw, 4rem); }
  .ec-hero__media::after {
    background: linear-gradient(180deg, rgba(0,42,86,.72) 0%, rgba(0,58,116,.66) 100%);
  }
}

/* Card row pulled up over the hero image, as on the legacy site. */
.ec-cards {
  position: relative;
  z-index: 3;
  margin-top: clamp(-2rem, -6vw, -5.5rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .ec-cards { grid-template-columns: repeat(3, 1fr); } }

.ec-card {
  background: var(--ec-white);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  box-shadow: var(--ec-shadow-lg);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-bottom: 4px solid transparent;
  transition: border-color var(--ec-transition), box-shadow var(--ec-transition);
}
.ec-card:hover {
  border-bottom-color: var(--ec-green);
  box-shadow: 0 20px 52px rgba(0, 51, 102, .26);
  color: inherit;
}
.ec-card__icon { width: 60px; height: 60px; margin: 0 0 1.15rem auto; color: var(--ec-blue); }
.ec-card__icon svg { width: 100%; height: 100%; fill: currentColor; }
.ec-card h3 { margin-bottom: .45em; font-size: var(--ec-fs-h3); }
.ec-card h3::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin-top: .5em;
  background: var(--ec-green);
}
.ec-card p { color: var(--ec-gray); font-size: .9688rem; margin: 0; }
.ec-card__more {
  margin-top: 1.15rem;
  font-family: var(--ec-font-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ec-blue);
}
.ec-card:hover .ec-card__more { color: var(--ec-green-dark); }

/* --------------------------------------------------------------------------
   10. Promo band (image + blue wash)
   -------------------------------------------------------------------------- */
/* Paint order: .ec-band__bg (image) → ::after (blue tint) → .ec-wrap (content).
   The band must NOT set its own opaque background, or it would cover the
   image; --ec-blue-dark here only shows through if the image fails to load. */
.ec-band {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  text-align: center;
  color: var(--ec-white);
  background: var(--ec-blue-dark);
  overflow: hidden;
}
.ec-band__bg { position: absolute; inset: 0; }
.ec-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.ec-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 74, 148, .78);
}
.ec-band > .ec-wrap { position: relative; z-index: 2; }
.ec-band :is(h1, h2, h3, h4) { color: var(--ec-white); }
.ec-band__kicker {
  font-family: var(--ec-font-head);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  color: var(--ec-green);
  margin: 0 0 .15em;
  line-height: 1.1;
  text-transform: none;
}
.ec-band h2 { margin-bottom: .8em; }

/* --------------------------------------------------------------------------
   11. Reviews + trust badges
   -------------------------------------------------------------------------- */
.ec-reviews { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ec-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ec-reviews { grid-template-columns: repeat(3, 1fr); } }

.ec-review {
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-radius: var(--ec-radius);
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  box-shadow: var(--ec-shadow);
  display: flex;
  flex-direction: column;
}
.ec-review__avatar {
  width: 58px; height: 58px;
  margin: -3rem auto .85rem;
  border-radius: 50%;
  border: 3px solid var(--ec-white);
  background: var(--ec-blue);
  color: var(--ec-white);
  display: grid; place-items: center;
  font-family: var(--ec-font-head);
  font-size: 1.5rem; font-weight: 600;
  box-shadow: var(--ec-shadow);
  overflow: hidden;
}
.ec-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ec-review__name { font-family: var(--ec-font-head); font-weight: 600; font-size: 1.0625rem; text-transform: none; margin: 0; }
.ec-review__meta { font-size: .8125rem; color: var(--ec-gray); margin: 0 0 .5rem; }
.ec-review__stars { color: #f5a623; letter-spacing: .1em; margin-bottom: .75rem; font-size: 1.0625rem; }
.ec-review__body { font-size: .9375rem; color: var(--ec-gray); margin: 0; }
/* Trustindex renders a carousel whose track is far wider than its container
   and does not clip it itself, which pushed the whole document wider than the
   viewport on phones. Clip it here where the track is supposed to be clipped. */
.ec-reviews-row {
  margin-top: 3.5rem;
  overflow: hidden;
}

/* Grid rather than wrapping flex so the seven badges distribute evenly and
   never leave a single orphan centered on a second row. */
.ec-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.ec-badges img {
  max-height: clamp(38px, 3.4vw, 50px);
  max-width: 100%;
  width: auto;
  filter: grayscale(100%);
  opacity: .68;
  transition: filter var(--ec-transition), opacity var(--ec-transition);
}
.ec-badges img:hover { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   12. Staggered photo collage
   -------------------------------------------------------------------------- */
.ec-collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ec-collage img { border-radius: var(--ec-radius); box-shadow: var(--ec-shadow-lg); width: 100%; }
.ec-collage > :first-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .ec-collage { grid-template-columns: repeat(2, 1fr); }
  .ec-collage > :first-child { grid-column: auto; transform: translateY(-1.5rem); }
  .ec-collage > :nth-child(2) { transform: translateY(1.5rem); }
}

/* Photo grid section (the green organic panel on the legacy home page) */
.ec-photogrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) {
  .ec-photogrid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
  .ec-photogrid > :nth-child(1) { grid-column: span 1; grid-row: span 1; }
  .ec-photogrid > :nth-child(2) { grid-column: span 1; grid-row: span 1; }
  .ec-photogrid > :nth-child(3) { grid-column: span 2; grid-row: span 2; }
  .ec-photogrid > :nth-child(4) { grid-column: span 2; grid-row: span 1; }
  .ec-photogrid > :nth-child(5) { grid-column: span 1; grid-row: span 1; }
  .ec-photogrid > :nth-child(6) { grid-column: span 1; grid-row: span 1; }
}
.ec-photogrid img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--ec-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

/* --------------------------------------------------------------------------
   13. Service areas
   -------------------------------------------------------------------------- */
.ec-areas__cols {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 2rem;
}
.ec-areas__cols h3 {
  font-size: 1.0625rem;
  color: var(--ec-blue);
  margin-bottom: .6em;
}
.ec-areas__cols ul { list-style: none; margin: 0; padding: 0; }
.ec-areas__cols li { margin-bottom: .35rem; }
.ec-areas__cols a {
  font-size: .9375rem;
  color: var(--ec-green-dark);
  text-decoration: none;
}
.ec-areas__cols a:hover { color: var(--ec-blue); text-decoration: underline; }
.ec-areas__map { display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   14. Post cards
   -------------------------------------------------------------------------- */
.ec-posts { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ec-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ec-posts { grid-template-columns: repeat(3, 1fr); } }

.ec-post {
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-radius: var(--ec-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ec-transition), border-color var(--ec-transition);
}
.ec-post:hover { box-shadow: var(--ec-shadow-lg); border-color: var(--ec-green); }
.ec-post__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ec-gray-light); }
.ec-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ec-post__body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.ec-post__body h3 { font-size: 1.125rem; line-height: 1.25; margin-bottom: .4em; }
.ec-post__body h3 a { color: var(--ec-ink); text-decoration: none; }
.ec-post__body h3 a:hover { color: var(--ec-blue); }
.ec-post__date { font-size: .8125rem; color: var(--ec-gray); margin: 0 0 .6rem; }
.ec-post__excerpt { font-size: .9375rem; color: var(--ec-gray); margin: 0 0 1rem; }
.ec-post__more {
  margin-top: auto;
  font-family: var(--ec-font-head);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ec-blue);
  text-decoration: none;
}
.ec-post__more:hover { color: var(--ec-green-dark); }

/* --------------------------------------------------------------------------
   15. Contact section + Gravity Forms overrides
   -------------------------------------------------------------------------- */
.ec-contact__form {
  background: rgba(255,255,255,.06);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--ec-radius);
}
.ec-contact .gform_wrapper.gravity-theme .gfield_label { color: var(--ec-white); font-weight: 600; font-size: .875rem; }
.ec-contact .gform_wrapper.gravity-theme input:not([type="submit"]),
.ec-contact .gform_wrapper.gravity-theme select,
.ec-contact .gform_wrapper.gravity-theme textarea {
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.94);
  border-radius: var(--ec-radius);
  padding: .7rem .85rem;
  font-family: var(--ec-font-body);
  font-size: 1rem;
  color: var(--ec-ink);
}
.ec-contact .gform_wrapper.gravity-theme input:focus,
.ec-contact .gform_wrapper.gravity-theme select:focus,
.ec-contact .gform_wrapper.gravity-theme textarea:focus {
  outline: 3px solid var(--ec-green);
  outline-offset: 1px;
  background: var(--ec-white);
}
.ec-contact .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.ec-contact .gform_wrapper.gravity-theme .gform_footer button {
  background: var(--ec-green);
  color: var(--ec-white);
  border: 2px solid var(--ec-green);
  border-radius: var(--ec-btn-radius);
  padding: .95rem 2.25rem;
  font-family: var(--ec-font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ec-transition);
  width: 100%;
}
.ec-contact .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover { background: var(--ec-green-dark); border-color: var(--ec-green-dark); }
.ec-contact .gform_wrapper.gravity-theme .gfield_required { color: var(--ec-green); }
.ec-contact .gform_wrapper.gravity-theme .gfield_consent_description,
.ec-contact .gform_wrapper.gravity-theme .gfield_description { color: rgba(255,255,255,.82); font-size: .75rem; }
.ec-contact .gform_wrapper .gform_validation_errors { border-radius: var(--ec-radius); }

/* NAP list */
.ec-nap { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.ec-nap li { display: flex; gap: .85rem; align-items: flex-start; }
.ec-nap__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--ec-green); margin-top: .2rem; }
.ec-nap__icon svg { width: 100%; height: 100%; fill: currentColor; }
.ec-nap__label {
  display: block;
  font-family: var(--ec-font-head);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}
.ec-nap__value { font-weight: 600; }
.ec-nap a { text-decoration: none; }
.ec-nap a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.ec-footer { background: var(--ec-blue-darker); color: rgba(255,255,255,.86); padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 0; }
.ec-footer h2, .ec-footer h3 { color: var(--ec-white); font-size: 1.125rem; margin-bottom: 1rem; }
.ec-footer h3::after { content: ""; display: block; width: 46px; height: 4px; margin-top: .55em; background: var(--ec-green); }
.ec-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .ec-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ec-footer__grid { grid-template-columns: 1.3fr 1fr 1.2fr; } }
.ec-footer__logo { width: 190px; height: auto; margin-bottom: 1.25rem; }

/* Social icons. These live only in the footer now (they were removed from the
   header), so they are styled for a dark ground. Without an explicit size the
   inline SVGs fall back to their intrinsic dimensions and render enormous. */
.ec-social {
  display: flex;
  align-items: center;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ec-social li { margin: 0; }
.ec-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--ec-white);
  transition: background var(--ec-transition), color var(--ec-transition);
}
.ec-social a:hover { background: var(--ec-green); color: var(--ec-white); }
.ec-social svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.ec-footer ul { list-style: none; margin: 0; padding: 0; }
.ec-footer li { margin-bottom: .5rem; }
.ec-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.ec-footer a:hover { color: var(--ec-green); text-decoration: underline; }
.ec-footer .ec-nap { margin-top: 0; }
.ec-footer__mhic {
  font-family: var(--ec-font-head);
  font-size: .875rem;
  letter-spacing: .08em;
  color: var(--ec-green);
  margin-top: 1.25rem;
}
.ec-footer__bar {
  margin-top: clamp(2.25rem, 2rem + 1.5vw, 3.25rem);
  border-top: 1px solid rgba(255,255,255,.16);
  padding-block: 1.35rem;
  font-size: .8125rem;
}
.ec-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}
.ec-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; }

/* --------------------------------------------------------------------------
   17. Sticky estimate tab
   -------------------------------------------------------------------------- */
.ec-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 60;
  transform: translateY(-50%) ;
  transform-origin: center;
  writing-mode: vertical-rl;
  padding: 1.1rem .7rem;
  font-family: var(--ec-font-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ec-white);
  background: var(--ec-green);
  border-radius: var(--ec-btn-radius) 0 0 var(--ec-btn-radius);
  box-shadow: -2px 0 10px rgba(0,0,0,.18);
  transition: background var(--ec-transition);
}
.ec-tab:hover { background: var(--ec-green-dark); color: var(--ec-white); }
@media (max-width: 767px) { .ec-tab { display: none; } }

/* Mobile sticky call/estimate bar */
.ec-mobilebar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: none;
  background: var(--ec-blue-darker);
  box-shadow: 0 -2px 12px rgba(0,0,0,.22);
}
.ec-mobilebar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .9rem .5rem;
  font-family: var(--ec-font-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ec-white);
}
.ec-mobilebar a + a { border-left: 1px solid rgba(255,255,255,.2); }
.ec-mobilebar a:first-child { background: var(--ec-blue); }
.ec-mobilebar a:last-child  { background: var(--ec-green); }
.ec-mobilebar svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 767px) {
  .ec-mobilebar { display: flex; }
  body.ec-site { padding-bottom: 3.25rem; }
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.ec-screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ec-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--ec-green);
  color: var(--ec-white);
  font-family: var(--ec-font-head);
  text-transform: uppercase;
  text-decoration: none;
}
.ec-skip:focus { left: .5rem; top: .5rem; color: var(--ec-white); }

.ec-center { text-align: center; }
.ec-mt-0 { margin-top: 0; }

/* Several legacy assets are pre-composed collages on a transparent canvas
   (about-right.png, sch-right-1.webp, test-left/right.png). A box-shadow or
   radius on those paints around the whole bounding box instead of the photos,
   so they get no framing of their own. */
.ec-img-plain {
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-inline: auto;
}

/* Framed photo — for real rectangular images. */
.ec-img-framed {
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow-lg);
  margin-inline: auto;
}

/* ==========================================================================
   19. Interior pages
   ========================================================================== */

/* --- Page hero ---------------------------------------------------------- */
.ec-phero {
  position: relative;
  background: var(--ec-blue-dark);
  color: var(--ec-white);
  overflow: hidden;
}
.ec-phero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Keep the left dark enough for text contrast, then fall away quickly so the
   photograph actually reads on the right. */
.ec-phero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(0, 34, 70, .90) 0%,
      rgba(0, 44, 90, .74) 26%,
      rgba(0, 52, 104, .40) 58%,
      rgba(0, 58, 116, .12) 100%),
    linear-gradient(180deg, rgba(0, 30, 62, .30) 0%, transparent 34%);
}
@media (max-width: 899px) {
  /* Single column on phones — the text sits over the whole image. */
  .ec-phero::after {
    background: linear-gradient(180deg, rgba(0, 34, 70, .84) 0%, rgba(0, 44, 90, .78) 100%);
  }
}
.ec-phero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  max-width: min(var(--ec-wrap), 100%);
}
.ec-phero h1 { color: var(--ec-white); margin-bottom: .4em; max-width: 24ch; }
.ec-phero__lede { max-width: 60ch; }
.ec-phero .ec-eyebrow { color: var(--ec-green); }

/* --- Breadcrumbs -------------------------------------------------------- */
.ec-breadcrumb {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, .22);
  font-size: .8125rem;
  padding-block: .7rem;
}
.ec-breadcrumb a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.ec-breadcrumb a:hover { color: var(--ec-green); text-decoration: underline; }
.ec-breadcrumb .breadcrumb_last { color: var(--ec-white); font-weight: 600; }

/* --- Long-form prose ---------------------------------------------------- */
.ec-prose { max-width: 72ch; }
.ec-prose > * + * { margin-top: 1.15em; }
.ec-prose h2 { margin-top: 2.25em; font-size: var(--ec-fs-h3); }
.ec-prose h3 { margin-top: 1.85em; font-size: var(--ec-fs-h4); }
.ec-prose h2:first-child, .ec-prose h3:first-child { margin-top: 0; }
.ec-prose ul, .ec-prose ol { padding-left: 1.35rem; }
.ec-prose li + li { margin-top: .4em; }
.ec-prose li::marker { color: var(--ec-green); font-weight: 700; }
.ec-prose strong { font-weight: 700; }
.ec-prose a { font-weight: 600; }

/* Wider two-column prose for content-heavy pages */
.ec-prose--wide { max-width: none; }

/* --- Checklist ---------------------------------------------------------- */
.ec-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; }
/* The tick is an absolutely positioned pseudo-element rather than a flex
   sibling. With `display: flex` on the li, an inline <strong> lead-in became
   its own flex item and collapsed into a narrow column beside its own
   sentence; normal inline flow keeps the two together. */
.ec-checks li {
  position: relative;
  padding-left: 1.85rem;
}
.ec-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 20px;
  height: 20px;
  background: var(--ec-green);
  clip-path: polygon(41% 74%, 82% 22%, 94% 33%, 43% 94%, 6% 58%, 17% 46%);
}
.ec-checks li strong { font-weight: 700; }
@media (min-width: 700px) {
  .ec-checks--2col { grid-template-columns: repeat(2, 1fr); gap: .7rem 2rem; }
}

/* --- Service card grid (child services) --------------------------------- */
.ec-svc-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 660px)  { .ec-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ec-svc-grid { grid-template-columns: repeat(3, 1fr); } }

.ec-svc {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-bottom: 4px solid var(--ec-green);
  border-radius: var(--ec-radius);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ec-transition), border-color var(--ec-transition), background var(--ec-transition);
}
.ec-svc:hover {
  box-shadow: var(--ec-shadow-lg);
  border-color: var(--ec-gray-mid);
  background: #fcfdfd;
  color: inherit;
}
.ec-svc h3 { font-size: 1.1875rem; margin-bottom: .35em; }
.ec-svc p { font-size: .9375rem; color: var(--ec-gray); margin: 0; }
.ec-svc__more {
  margin-top: 1rem;
  font-family: var(--ec-font-head);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ec-blue);
}
.ec-svc:hover .ec-svc__more { color: var(--ec-green-dark); }

/* --- Feature/benefit trio ----------------------------------------------- */
.ec-features {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 760px) { .ec-features { grid-template-columns: repeat(3, 1fr); } }
.ec-feature h3 { font-size: 1.125rem; margin-bottom: .4em; }
.ec-feature h3::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: .5em;
  background: var(--ec-green);
}
.ec-feature p { font-size: .9375rem; color: var(--ec-gray); margin: 0; }
.ec-section--blue .ec-feature p { color: rgba(255, 255, 255, .88); }

/* --- FAQ / accordion ---------------------------------------------------- */
.ec-faq { margin-top: 2rem; max-width: 80ch; }
.ec-faq details {
  border: 1px solid var(--ec-gray-mid);
  border-radius: var(--ec-radius);
  background: var(--ec-white);
  margin-bottom: .75rem;
}
.ec-faq summary {
  cursor: pointer;
  padding: 1.05rem 1.25rem;
  font-family: var(--ec-font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ec-blue);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.ec-faq summary::-webkit-details-marker { display: none; }
.ec-faq summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ec-green);
  flex: 0 0 auto;
}
.ec-faq details[open] summary::after { content: "\2013"; }
.ec-faq details[open] summary { border-bottom: 1px solid var(--ec-gray-mid); }
.ec-faq .ec-faq__body { padding: 1.05rem 1.25rem; font-size: .9688rem; color: var(--ec-gray); }
.ec-faq .ec-faq__body > * + * { margin-top: .9em; }

/* --- Team --------------------------------------------------------------- */
.ec-team {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 2rem;
}
.ec-member {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-radius: var(--ec-radius);
}
.ec-member__avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: var(--ec-blue);
  color: var(--ec-white);
  display: grid;
  place-items: center;
  font-family: var(--ec-font-head);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.ec-member__name { font-family: var(--ec-font-head); font-weight: 600; font-size: 1.0625rem; text-transform: uppercase; margin: 0; }
.ec-member__role { font-size: .875rem; color: var(--ec-gray); margin: .2rem 0 0; }

/* --- Timeline (scholarship winners / history) --------------------------- */
.ec-timeline { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--ec-gray-mid); }
.ec-timeline li { position: relative; padding-bottom: 1.75rem; }
.ec-timeline li:last-child { padding-bottom: 0; }
.ec-timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - 8px);
  top: .4em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ec-green);
  box-shadow: 0 0 0 3px var(--ec-white);
}
.ec-timeline__year {
  font-family: var(--ec-font-head);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ec-blue);
  text-transform: uppercase;
  margin: 0 0 .25rem;
}
.ec-timeline p { font-size: .9375rem; color: var(--ec-gray); margin: 0; }

/* --- Area lists --------------------------------------------------------- */
.ec-arealist {
  columns: 2;
  column-gap: 2rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
@media (min-width: 700px)  { .ec-arealist { columns: 3; } }
@media (min-width: 1000px) { .ec-arealist { columns: 4; } }
.ec-arealist li { break-inside: avoid; margin-bottom: .45rem; font-size: .9375rem; }
.ec-arealist a { color: var(--ec-green-dark); text-decoration: none; }
.ec-arealist a:hover { color: var(--ec-blue); text-decoration: underline; }
.ec-arealist span { color: var(--ec-gray); }

/* --- Financing option cards --------------------------------------------- */
.ec-loans { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 800px) { .ec-loans { grid-template-columns: repeat(2, 1fr); } }
.ec-loan {
  border: 1px solid var(--ec-gray-mid);
  border-top: 5px solid var(--ec-green);
  border-radius: var(--ec-radius);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--ec-white);
  display: flex;
  flex-direction: column;
}
.ec-loan__label {
  font-family: var(--ec-font-head);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ec-green-dark);
  margin: 0 0 .5rem;
}
.ec-loan h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-bottom: .3em; }
.ec-loan__terms { list-style: none; margin: 1.25rem 0; padding: 0; }
.ec-loan__terms li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--ec-gray-mid); font-size: .9375rem; }
.ec-loan__terms dt, .ec-loan__terms .k { color: var(--ec-gray); }
.ec-loan__terms .v { font-weight: 700; text-align: right; }
.ec-loan .ec-btn { margin-top: auto; }
.ec-legal {
  margin-top: 2.5rem;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--ec-gray);
  max-width: none;
}
.ec-legal p + p { margin-top: .8em; }

/* --- Map embed ---------------------------------------------------------- */
.ec-map {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ec-radius);
  overflow: hidden;
  box-shadow: var(--ec-shadow-lg);
}
.ec-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Blog archive ------------------------------------------------------- */
.ec-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: 3rem;
}
.ec-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: .6rem .75rem;
  font-family: var(--ec-font-head);
  font-weight: 600;
  text-decoration: none;
  color: var(--ec-blue);
  border: 1px solid var(--ec-gray-mid);
  border-radius: var(--ec-btn-radius);
}
.ec-pagination .page-numbers:hover { background: var(--ec-gray-light); }
.ec-pagination .page-numbers.current {
  background: var(--ec-blue);
  border-color: var(--ec-blue);
  color: var(--ec-white);
}

/* --- Single post -------------------------------------------------------- */
.ec-single { padding-block: var(--ec-section-y); }
.ec-single__meta { font-size: .875rem; color: var(--ec-gray); margin-bottom: 2rem; }
.ec-single__thumb { margin-bottom: 2.25rem; border-radius: var(--ec-radius); overflow: hidden; }
.ec-entry { max-width: 72ch; }
.ec-entry > * + * { margin-top: 1.15em; }
.ec-entry :is(h2, h3, h4) { margin-top: 2em; }
.ec-entry img { border-radius: var(--ec-radius); margin-block: 1.75em; }
.ec-entry ul, .ec-entry ol { padding-left: 1.35rem; }
.ec-entry li::marker { color: var(--ec-green); }
.ec-entry blockquote {
  margin: 2em 0;
  padding: .35em 0 .35em 1.35rem;
  border-left: 4px solid var(--ec-green);
  font-size: 1.0625rem;
  color: var(--ec-gray);
}

/* --- Testimonial quotes ------------------------------------------------- */
.ec-quotes { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 760px)  { .ec-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ec-quotes { grid-template-columns: repeat(3, 1fr); } }
.ec-quote {
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-radius: var(--ec-radius);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.ec-quote__mark {
  font-family: var(--ec-font-head);
  font-size: 3rem;
  line-height: .7;
  color: var(--ec-green);
  margin-bottom: .35rem;
}
.ec-quote p { font-size: .9688rem; color: var(--ec-gray); margin: 0 0 1rem; }
.ec-quote cite {
  margin-top: auto;
  font-family: var(--ec-font-head);
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .9375rem;
  color: var(--ec-ink);
}

/* --- Misc --------------------------------------------------------------- */
.ec-btn-row--center { justify-content: center; }
/* `.ec-site p { margin: 0 0 1.15em }` has specificity 0,1,1 and was beating a
   bare `.ec-band__sub` (0,1,0), so `margin-inline: auto` never applied and the
   paragraph sat flush left inside a centred band. Scoping it to .ec-band wins. */
.ec-band .ec-band__sub {
  max-width: 62ch;
  margin-inline: auto;
}
.ec-bleed .ec-bleed__inner p { margin-inline: auto; }
.ec-stats {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 2.5rem;
}
.ec-stat__num {
  font-family: var(--ec-font-head);
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ec-green);
}
.ec-stat__label {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .35rem;
}

/* ==========================================================================
   20. Section shapes
   Curved transitions between colored bands, reinstating the legacy brand's
   organic dividers. Rendered by ec_shape() as the first child of the
   *incoming* section, then shifted up out of it.
   ========================================================================== */
.ec-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  transform: translateY(-99%);
  pointer-events: none;
  z-index: 3;
}
.ec-shape svg {
  display: block;
  width: 100%;
  height: clamp(34px, 4.4vw, 84px);
}
/* Sections carrying a shape must let it escape and sit above the neighbor. */
.ec-section.has-shape { overflow: visible; z-index: 1; }

/* ==========================================================================
   21. Upgraded section furniture
   ========================================================================== */

/* --- Section intro: heading + lede as a deliberate lockup ---------------- */
.ec-lead {
  max-width: 62ch;
}
.ec-lead h2 { margin-bottom: .5em; }
.ec-lead > p {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ec-gray);
  margin-top: 1.35rem;
}
.ec-section--blue .ec-lead > p,
.ec-section--green .ec-lead > p { color: rgba(255, 255, 255, .9); }
.ec-lead--center { margin-inline: auto; text-align: center; }
.ec-lead--center .ec-rule::after { margin-inline: auto; }

/* --- Layered offset image pair ------------------------------------------- */
.ec-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  aspect-ratio: 5 / 4;
}
.ec-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ec-radius);
}
.ec-stack__a {
  grid-column: 1 / 6;
  grid-row: 1 / 6;
  box-shadow: var(--ec-shadow-lg);
}
.ec-stack__b {
  grid-column: 4 / 7;
  grid-row: 4 / 7;
  box-shadow: 0 16px 44px rgba(0, 51, 102, .28);
  border: 5px solid var(--ec-white);
}
.ec-section--blue .ec-stack__b { border-color: var(--ec-blue); }
.ec-section--green .ec-stack__b { border-color: var(--ec-green); }
/* Green accent square peeking out behind the pair. */
.ec-stack::before {
  content: "";
  position: absolute;
  left: -.75rem;
  bottom: -.75rem;
  width: 34%;
  aspect-ratio: 1;
  background: var(--ec-green);
  border-radius: var(--ec-radius);
  z-index: -1;
}

/* --- Framed single image with green corner rule -------------------------- */
.ec-framed { position: relative; }
.ec-framed img {
  position: relative;
  z-index: 1;
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow-lg);
  width: 100%;
}
.ec-framed::after {
  content: "";
  position: absolute;
  right: -.8rem;
  top: -.8rem;
  width: 42%;
  aspect-ratio: 1;
  border-top: 6px solid var(--ec-green);
  border-right: 6px solid var(--ec-green);
  border-radius: 0 var(--ec-radius) 0 0;
  z-index: 0;
}

/* --- Numbered steps ------------------------------------------------------ */
.ec-steps {
  counter-reset: ecstep;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 800px) { .ec-steps { grid-template-columns: repeat(3, 1fr); } }
.ec-step {
  counter-increment: ecstep;
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-top: 4px solid var(--ec-blue);
  border-radius: var(--ec-radius);
}
.ec-step::before {
  content: counter(ecstep, decimal-leading-zero);
  display: block;
  font-family: var(--ec-font-head);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ec-green);
  margin-bottom: .5rem;
}
.ec-step h3 { font-size: 1.125rem; margin-bottom: .35em; }
.ec-step p { font-size: .9375rem; color: var(--ec-gray); margin: 0; }

/* --- Split list rows (material / option comparison) --------------------- */
.ec-rows { margin-top: 2.5rem; border-top: 1px solid var(--ec-gray-mid); }
.ec-row {
  display: grid;
  gap: .5rem 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--ec-gray-mid);
  align-items: start;
}
@media (min-width: 820px) { .ec-row { grid-template-columns: 4rem 1fr 1.4fr; } }
.ec-row__num {
  font-family: var(--ec-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ec-green);
}
.ec-row h3 { font-size: 1.1875rem; margin: 0; }
.ec-row p { font-size: .9688rem; color: var(--ec-gray); margin: 0; }
.ec-section--blue .ec-row { border-color: rgba(255, 255, 255, .22); }
.ec-section--blue .ec-rows { border-color: rgba(255, 255, 255, .22); }
.ec-section--blue .ec-row p { color: rgba(255, 255, 255, .86); }

/* --- Hero refinements --------------------------------------------------- */
.ec-phero__inner { padding-block: clamp(3.5rem, 2.25rem + 5.5vw, 7rem); }
.ec-phero h1 {
  max-width: 22ch;
  letter-spacing: -.008em;
  /* Even out line lengths, and never break inside a hyphenated word like
     "Tune-Up", which produced "TUNE-" / "UP". */
  text-wrap: balance;
  hyphens: none;
}
.ec-phero h1 br { display: block; }
.ec-phero__lede { color: rgba(255, 255, 255, .93); }
/* Thin green rule under the hero eyebrow, echoing the heading rule. */
.ec-phero .ec-eyebrow { position: relative; padding-bottom: .85rem; }
.ec-phero .ec-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 4px;
  background: var(--ec-green);
}

/* --- Pull quote band ---------------------------------------------------- */
.ec-pull {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.ec-pull p {
  font-family: var(--ec-font-head);
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 500;
  line-height: 1.22;
  text-transform: none;
  margin: 0 0 1rem;
}
.ec-pull cite {
  font-family: var(--ec-font-head);
  font-style: normal;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
}

/* ==========================================================================
   22. Alternating image / text rows
   The main structural fix: instead of every section being a full-width
   heading + prose block, content rows alternate image side to side.
   ========================================================================== */
.ec-alt {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .ec-alt { grid-template-columns: 1.02fr .98fr; }
  /* Flip puts the media first visually while keeping heading-first in the DOM. */
  .ec-alt--flip .ec-alt__media { grid-column: 1; grid-row: 1; }
  .ec-alt--flip .ec-alt__body  { grid-column: 2; grid-row: 1; }
}
.ec-alt + .ec-alt { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }

.ec-alt__media { position: relative; }
.ec-alt__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow-lg);
}
/* Green block peeking out — side alternates with the row. */
.ec-alt__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 38%;
  aspect-ratio: 1;
  background: var(--ec-green);
  border-radius: var(--ec-radius);
  right: -.85rem;
  bottom: -.85rem;
}
.ec-alt--flip .ec-alt__media::before { right: auto; left: -.85rem; }
.ec-section--blue .ec-alt__media::before { background: var(--ec-blue-darker); }

.ec-alt__body h2,
.ec-alt__body h3 { margin-bottom: .5em; }
.ec-alt__body > p { color: var(--ec-gray); }
.ec-section--blue .ec-alt__body > p { color: rgba(255, 255, 255, .9); }
.ec-alt__body .ec-checks { margin-top: 1.35rem; }

/* ==========================================================================
   23. Full-bleed image band
   ========================================================================== */
.ec-bleed {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 32vw, 480px);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  overflow: hidden;
  background: var(--ec-blue-darker);
}
.ec-bleed > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ec-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 30, 62, .58) 0%, rgba(0, 40, 82, .74) 100%);
}
.ec-bleed__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--ec-white);
  max-width: 62ch;
  padding-inline: var(--ec-gutter);
}
.ec-bleed__inner :is(h2, h3) { color: var(--ec-white); }
.ec-bleed__inner p { color: rgba(255, 255, 255, .94); }
/* Stat row sitting on the image. The measure that suits the heading is too
   narrow for three stats, so widen the inner and set the columns explicitly
   rather than letting auto-fit drop one onto a second row. */
.ec-bleed__inner:has(.ec-stats) { max-width: 78ch; }
.ec-bleed .ec-stats {
  margin-top: 2.25rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 599px) {
  .ec-bleed .ec-stats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .ec-bleed .ec-stat__label { font-size: .6875rem; letter-spacing: .04em; }
}
.ec-bleed .ec-stat__num { color: var(--ec-green); }
.ec-bleed .ec-stat__label { color: rgba(255, 255, 255, .88); }

/* ==========================================================================
   24. Project gallery
   ========================================================================== */
.ec-gallery {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2.5rem;
}
.ec-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ec-radius);
  aspect-ratio: 4 / 3;
}
/* Six images tile a 4x3 grid with no gaps:
   row 1-2  [ 1 (2x2) ][ 2 ][ 3 ]
                       [   4 (2x1)  ]
   row 3    [   5 (2x1)  ][  6 (2x1)  ]                                     */
@media (min-width: 760px) {
  .ec-gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(115px, 12.5vw, 180px);
  }
  .ec-gallery img { aspect-ratio: auto; }
  .ec-gallery > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .ec-gallery > :nth-child(4) { grid-column: span 2; }
  .ec-gallery > :nth-child(5) { grid-column: span 2; }
  .ec-gallery > :nth-child(6) { grid-column: span 2; }
}

/* ==========================================================================
   25. Media cards (service cards with photography)
   ========================================================================== */
.ec-svc--media { padding: 0; overflow: hidden; }
.ec-svc__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ec-gray-light);
}
.ec-svc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ec-svc__inner {
  padding: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ec-svc--media h3 { font-size: 1.125rem; }
.ec-svc--media .ec-svc__more { margin-top: auto; padding-top: 1rem; }

/* ==========================================================================
   26. Sticky estimate aside
   Fills the right column beside long-form content instead of leaving it empty.
   ========================================================================== */
.ec-withaside { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 1000px) {
  .ec-withaside { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
  .ec-aside { position: sticky; top: 2rem; }
}
.ec-aside {
  background: var(--ec-blue);
  color: var(--ec-white);
  border-radius: var(--ec-radius);
  border-top: 5px solid var(--ec-green);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  box-shadow: var(--ec-shadow-lg);
}
.ec-aside :is(h2, h3) { color: var(--ec-white); font-size: 1.25rem; margin-bottom: .5em; }
.ec-aside p { font-size: .9375rem; color: rgba(255, 255, 255, .9); }
.ec-aside .ec-btn { width: 100%; margin-top: 1rem; }
.ec-aside__phone {
  display: block;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--ec-font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ec-white);
  text-decoration: none;
  text-align: center;
}
.ec-aside__phone:hover { color: var(--ec-green); }
.ec-aside__note {
  display: block;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: .35rem;
}

/* ==========================================================================
   27. Rhythm corrections
   Text-only sections were too airy; tighten them and let image sections
   keep the generous spacing.
   ========================================================================== */
.ec-section--copy { padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem); }
.ec-lead + .ec-checks,
.ec-lead + .ec-svc-grid,
.ec-lead + .ec-gallery { margin-top: 2rem; }

/* ==========================================================================
   28. Manufacturer brand strip
   ========================================================================== */
/* Scoped to .ec-brands for the same reason as .ec-band__sub: `.ec-site p`
   is 0,1,1 and outranks a bare `.ec-brands__note` (0,1,0), so the
   `margin-inline: auto` never applied and the note sat flush left. */
.ec-brands .ec-brands__note {
  max-width: 56ch;
  margin-inline: auto;
  margin-top: 1.25rem;
  color: var(--ec-gray);
  font-size: .9688rem;
}
.ec-brands__row {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: 2.25rem;
}
.ec-brands__row img { max-height: clamp(42px, 4vw, 62px); }

/* A single logo in an auto-fit 1fr grid stretches to the full row; give it its
   own column so it stays centred, and a little more height since it is the
   only mark on the strip. */
.ec-brands__row--solo { grid-template-columns: auto; justify-content: center; }
.ec-brands__row--solo img { max-height: clamp(58px, 6vw, 88px); }

/* Text fallback used until real manufacturer logo files exist. Set as a
   wordmark so the strip still reads as a credential rather than a stray line
   of copy. */
.ec-brands__names {
  margin: 2rem 0 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2.5rem;
  justify-content: center;
}
.ec-brands .ec-brands__names { margin-inline: auto; }
.ec-brands__name {
  font-family: var(--ec-font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ec-blue-darker);
  border-bottom: 3px solid var(--ec-green);
  padding-bottom: .25rem;
}