/* ==========================================================================
   Mid-Florida Windows & Doors — mobile-first, responsive
   Fonts: Neuton (body) + Montserrat (headings/UI)
   Palette:
     Primary brand  — deep navy   #12304A
     Secondary      — muted teal  #2F7C7A
     Accent / CTA   — warm amber  #E9A23B
     Main background— warm off-white #F7F8F5
     Section bg     — light blue-gray #EAF1F4
     Body text      — charcoal    #263238
     Cards          — white       #FFFFFF
   ========================================================================== */

/* ---------- Web fonts — self-hosted ----------
   Previously these came from a render-blocking cross-origin request to
   fonts.googleapis.com, which then had to resolve a second origin
   (fonts.gstatic.com) before any text could paint. Both are now served from
   this origin, and the @font-face rules live in this same stylesheet so no
   extra round trip is needed.

   Montserrat ships as a single variable file (wght 100–900). The stylesheet
   uses 600/700/800 for UI text and one 900, so one 35KB file replaces four
   static weights. Only the `latin` subset is included: every non-ASCII
   character on the site (©, ·, —, curly quotes, ★) is either inside the
   latin range or was already falling back to Helvetica today, because ★
   (U+2605) is in neither subset.

   Neuton is only served as static weights, so the two weights the stylesheet
   actually uses (400 body, 700 emphasis) are declared individually. The
   italic face and the 300 weight were requested but never used by any rule.

   font-display: swap keeps text visible during the fetch; the fallback
   metrics are close enough that the swap is not jarring. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900; /* variable axis — one file covers every weight */
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2-variations"),
       url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Neuton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/neuton-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Neuton";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/neuton-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #12304A;
  --navy-dark: #0C2233;
  --teal: #2F7C7A;
  --teal-dark: #25635F;
  --amber: #E9A23B;
  --amber-dark: #C9872A;

  --bg: #F7F8F5;
  --section: #EAF1F4;
  --ink: #263238;
  --ink-soft: #45565E;
  --muted: #6B7A82;
  --card: #FFFFFF;
  --line: #D8E0E4;

  --font-body: "Neuton", "Times New Roman", Times, serif;
  --font-ui: "Montserrat", Helvetica, Arial, sans-serif;

  --container: 1170px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.42857;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--navy); text-decoration: none; }
a:hover, a:focus { color: var(--teal); text-decoration: underline; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
}

h1 { font-size: 1.5em; margin: 0.5em 0 0.25em; }
h2 { font-size: 1.4em; margin: 0.5em 0 0.25em; }
h3 { font-size: 1.2em; margin: 0.5em 0 0.25em; }

p { margin: 0 0 11px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 15px;
}

.row { margin-inline: -15px; }
.col { padding-inline: 15px; }

.center { text-align: center; }

/* ---------- Top callout (image left / text right) ---------- */
.top-callout__room {
  display: none;
}
#top-callout {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding-block: 20px;
}
.top-callout__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
}
.top-callout__img {
  flex: 0 0 200px;
  width: 200px;
  min-width: 200px;
}
.top-callout__img img {
  display: block;
  width: 200px;
  max-width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}
.top-callout__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.top-callout__text {
  overflow-wrap: break-word;
}
.top-callout__brand {
  display: none;
  text-align: center;
}
.top-callout__text h2 {
  color: var(--navy);
  font-size: 1.7em;
  margin: 0 0 8px;
}
.top-callout__text h2 a { color: var(--navy); font-size: 0.82em; }
.top-callout__text h2 a:hover { color: var(--teal); }
.top-callout__phones {
  font-family: var(--font-ui);
  font-size: 1.05em;
  color: var(--ink);
  margin-bottom: 14px;
}
.top-callout__phones a { color: var(--navy); }
.top-callout__phones a:hover { color: var(--teal); }
.top-callout__phones .sep { color: var(--muted); margin-inline: 4px; }
.top-callout__nav-toggle {
  display: none;
}
.top-callout__nav-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 6px 16px;
}
.top-callout__nav-list a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
}
.top-callout__nav-list a:hover { color: var(--teal); }
.top-callout__nav-list .current-menu-item a { color: var(--teal); }
/* BBB logo link: only ever shown inside the mobile hamburger menu. */
.top-callout__nav-list .nav-bbb { display: none; }

/* ---------- Site header — full-bleed image banner + navy action bar ----------
   Used by every page. #top-callout above is kept for the mobile nav styles. */
.site-header__banner {
  display: block;
  width: 100%;
  background: var(--navy-dark);
  line-height: 0; /* kill the inline-image descender gap */
}
.site-header__banner picture,
.site-header__banner img {
  display: block;
  width: 100%;
  height: auto;
}
.site-header__bar {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-dark);
}
.site-header__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 12px;
}
.site-header__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
/* Holds the FREE Estimate button as a discrete row so the CTA block can stack
   it beneath the phone row on mobile/tablet. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header__phone {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.05em;
  color: #fff;
}
.site-header__phone a { color: #fff; }
.site-header__phone a:hover { color: var(--amber); }

/* Two-number header. Both numbers are present at every width, so a phone visitor
   can still reach the local (407) line. Only the toll-free number carries a role
   label. Below 480px the two numbers stack on separate centred lines so neither
   wraps raggedly against the hamburger. From 480px they share one line as
   "Toll-Free (888) 230-0243 · (407) 607-6528". */
.site-header__phone-sep {
  display: none;
}
.site-header__role {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
  margin-right: 0.15em;
}
/* Keep each role label glued to its number so they never split across lines. */
.site-header__phone-toll,
.site-header__phone-local {
  white-space: nowrap;
}
/* Phones: two short centred lines, toll-free first. */
.site-header__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.3;
}
.site-header__phone-toll,
.site-header__phone-local {
  display: block;
}
@media (min-width: 480px) {
  /* The 480-767 band has the least room: the whole line shares a row with the
     absolutely-positioned hamburger, so trim the type and the separator gap to
     keep clear of it. Full size returns at 768px. */
  .site-header__phone {
    display: block;
    line-height: inherit;
    font-size: 0.95em;
  }
  .site-header__phone-toll,
  .site-header__phone-local {
    display: inline;
  }
  /* The two spans are adjacent with no source whitespace between them, so the
     separator dot is what keeps the numbers from running together here. */
  .site-header__phone-sep {
    display: inline;
    margin-inline: 0.35em;
    opacity: 0.55;
  }
}
@media (min-width: 768px) {
  .site-header__phone {
    font-size: 1.05em;
  }
  .site-header__phone-sep {
    margin-inline: 0.45em;
  }
}


/* Nav now sits on the navy bar instead of white — invert link/toggle colours */
.site-header__bar .top-callout__nav-list a { color: #fff; }
.site-header__bar .top-callout__nav-list a:hover { color: var(--amber); }
.site-header__bar .top-callout__nav-list .current-menu-item a { color: var(--amber); }
.site-header__bar .top-callout__nav-toggle { border-color: rgba(255, 255, 255, 0.45); }
.site-header__bar .top-callout__nav-toggle .icon-bar { background-color: #fff; }

/* Small phones: tighten the action bar (the .top-callout__text rules no longer apply) */
@media (max-width: 479px) {
  .site-header__cta { gap: 6px 10px; }
  /* The numbers are the primary tap target on a phone, so give them the body
     size (16.8px) instead of shrinking to 0.9em. Both lines still fit inside
     the centred row at 320px because each is nowrap and only ~206px wide. */
  .site-header__phone { font-size: 1.05em; }
  .site-header__cta .btn { font-size: 0.82em; padding: 6px 8px; }
}

/* Banner is full-bleed at every width — no max-width cap, so no navy bars on
   wide displays. The desktop art is 2688x1152 to stay sharp on large monitors;
   mobile keeps the 960x411 crops. */
.site-header {
  background: var(--navy-dark);
}

/* On desktop the full-bleed banner can run nearly the full window height on a
   large monitor (its 2688x1152 art scaled to the window width). Cap it at about
   two-thirds of the viewport and crop the overflow with object-fit. */
@media (min-width: 768px) {
  .site-header__banner img {
    max-height: 66vh;
    object-fit: cover;
    object-position: center;
  }
  /* Pull the banner under the nav so the bar overlays the image on desktop. */
  .site-header {
    position: relative;
  }
}

/* Desktop only (nav is inline at >=992px): stretch the action bar over the whole
   header image and split it top/bottom — the menu sits along the top edge, the
   phone + CTA are bottom-centred. The bar itself is transparent to clicks so the
   empty middle still links home; only its children capture pointer events.
   Faint top and bottom scrims keep the white text legible over the photo. */
@media (min-width: 992px) {
  .site-header__bar {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(
      180deg,
      rgba(12, 34, 51, 0.80) 0%,
      rgba(12, 34, 51, 0) 20%,
      rgba(12, 34, 51, 0) 60%,
      rgba(12, 34, 51, 0.82) 100%
    );
    border-bottom: 0;
    pointer-events: none; /* let clicks pass through to the banner link */
  }
  .site-header__bar-inner {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-block: 18px 34px;
    pointer-events: none;
  }
  .site-header__bar-inner > * {
    pointer-events: auto; /* re-enable the menu and CTA */
  }

  /* Menu hugs the top edge, links centred. */
  .top-callout__nav {
    order: 1;
    width: 100%;
  }
  .top-callout__nav-list {
    justify-content: center;
  }

  /* Phone + CTA drop to the bottom of the image, centred. */
  .site-header__cta {
    order: 2;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  /* Desktop only: enlarge the "FREE Estimate" banner button so it reads as the
     primary action over the photo. */
  .site-header__cta .btn {
    padding: 14px 30px;
    font-size: 1.2rem;
    border-radius: 6px;
  }

  /* Desktop only: bump the phone line, and keep it white with a soft shadow so
     it stays legible over the photo. Kept below the previous 1.8rem because
     the line now carries two numbers plus the toll-free role label. */
  .site-header__phone {
    font-size: 1.3rem;
    white-space: nowrap;
  }
  /* Desktop only: red badge behind the "TOLL-FREE" label so it reads as a tag
     rather than faint text over the photo. opacity resets to 1 here, otherwise
     the base rule's 0.8 would wash the red out. */
  .site-header__role {
    font-size: 0.62em;
    letter-spacing: 0.08em;
    color: #fff;
    background: #C0392B;
    opacity: 1;
    padding: 0.24em 0.5em;
    border-radius: 3px;
    margin-right: 0.4em;
    vertical-align: 0.08em;
    text-shadow: none;
  }
  /* Trim the gap around the separator dot — 0.6em each side was reading as a
     big hole between the two numbers at this type size. */
  .site-header__phone-sep {
    margin-inline: 0.3em;
  }
  .site-header__phone,
  .site-header__phone a {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
  /* Base is now white, so give the link a distinct hover state. */
  .site-header__phone a:hover,
  .site-header__phone a:focus {
    color: var(--amber);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857;
  border-radius: 4px;
  white-space: normal;
}
.btn-primary {
  color: var(--navy);
  background-color: var(--amber);
  border-color: var(--amber-dark);
  font-family: var(--font-ui);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  color: var(--navy);
  background-color: var(--amber-dark);
  border-color: #a56d1d;
  text-decoration: none;
}
.btn-secondary {
  color: var(--navy);
  background-color: transparent;
  border-color: var(--navy);
  font-family: var(--font-ui);
  font-weight: 600;
}
.btn-secondary:hover, .btn-secondary:focus {
  color: #fff;
  background-color: var(--navy);
  border-color: var(--navy);
  text-decoration: none;
}
.btn-block { display: block; width: 100%; }
.btn-lg, .btn.lg { padding: 10px 16px; font-size: 18px; }

/* ---------- Header / top bar ---------- */
#site-header {
  background: var(--card);
  border-top: 4px solid var(--navy);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-block: 12px;
}

.logo {
  flex: 1 1 100%;
  text-align: center;
}
.logo a { display: inline-block; }
.logo img { width: auto; height: 56px; }

.phone {
  flex: 1 1 100%;
  text-align: center;
  font-family: var(--font-ui);
  color: var(--navy);
}
.phone h2 {
  font-family: var(--font-ui);
  color: var(--navy);
  font-size: 1.32em;
  margin: 0;
}
.phone a { color: var(--navy); }
.phone a:hover { color: var(--teal); }

.phone2 {
  flex: 1 1 100%;
  text-align: center;
  font-family: var(--font-ui);
  color: var(--navy);
  font-size: 0.87em;
}
.phone2 a { color: var(--navy); }
.phone2 a:hover { color: var(--teal); }
.phone2 .sep { color: var(--muted); margin-inline: 4px; }

.estimate {
  flex: 1 1 100%;
  text-align: center;
}
.estimate a.btn {
  width: 100%;
  padding: 12px 16px;
}

/* ---------- Navbar ---------- */
.navbar-wrapper {
  border-top: 3px solid var(--navy);
  background: var(--card);
}

.navbar {
  font-family: var(--font-ui);
  position: relative;
  min-height: 50px;
}

.navbar-toggle {
  display: block;
  float: right;
  position: relative;
  margin: 8px 0;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--ink);
}
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

.navbar-collapse {
  clear: both;
  display: none;
}
.navbar-collapse.is-open { display: block; }

.navbar-nav { margin: 7.5px -15px; }
.navbar-nav > li > a {
  display: block;
  color: var(--ink);
  padding: 10px 15px;
  line-height: 22px;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
  color: var(--navy);
  text-decoration: none;
}
.navbar-nav > li.current-menu-item > a {
  color: var(--navy);
  font-weight: 700;
}

/* ---------- Hero slider ---------- */
#motion { position: relative; }
.hero-slider {
  position: relative;
  display: grid;
}

.hero-slide {
  position: relative;
  grid-area: 1 / 1;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: clamp(44px, 9vw, 110px) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

/* Desktop only: the laptop/desktop breakpoints pushed a lot of dead space above
   and below the slider copy. Trim both so the slides are tighter vertically. */
@media (min-width: 768px) {
  .hero-slide {
    padding-block: clamp(24px, 3vw, 44px);
  }
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(18, 48, 74, 0.94), rgba(18, 48, 74, 0.55));
  z-index: 0;
}
.hero-slide__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-slide--1 {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(233, 162, 59, 0.55), transparent 60%),
    linear-gradient(135deg, #12304A 0%, #1d4a6e 55%, #2F7C7A 100%);
}
.hero-slide--2 {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(47, 124, 122, 0.55), transparent 60%),
    linear-gradient(135deg, #0C2233 0%, #12304A 55%, #25635F 100%);
}
.hero-slide--3 {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(233, 162, 59, 0.5), transparent 60%),
    linear-gradient(135deg, #12304A 0%, #25635F 55%, #2F7C7A 100%);
}

.hero-slide__eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.hero-slide h1, .hero-slide h2 {
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 800;
  margin-bottom: 16px;
}
.hero-slide h1 { font-size: clamp(1.7rem, 5vw, 3rem); }
.hero-slide h2 { font-size: clamp(1.5rem, 4.5vw, 2.6rem); }
.hero-slide__lede {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: #e6eef4;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 24px;
}
.hero-slide__lede strong { color: #fff; }
.hero-slide .btn-primary { font-family: var(--font-ui); font-weight: 700; }

.hero-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.hero-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}
.hero-dot.is-active { background: var(--amber); }

/* ---------- Brands strip (manufacturer logos) ---------- */
.brands-banner {
  display: block;
  background: var(--card);
  border-block: 1px solid var(--line);
  text-decoration: none;
}
.brands-banner:hover, .brands-banner:focus { text-decoration: none; }
.brands-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block: 20px;
  text-align: center;
}
.brands-banner__logos {
  /* Mobile: 2 + 1 centred grid. The two full-width cells fill the first row
     side by side, then the third logo centres on its own beneath them. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  align-items: center;
  justify-items: center;
}
.brands-banner__logos img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}
.brands-banner__logos img:last-child { grid-column: 1 / -1; justify-self: center; }

/* ---------- BBB badge ---------- */
.reviews-bbb { text-align: center; margin-top: 24px; }
.reviews-bbb__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
}
.reviews-bbb__link:hover,
.reviews-bbb__link:focus { color: var(--navy); }
.reviews-bbb__logo { display: block; width: 80px; height: auto; }

/* ---------- Financing banner ---------- */
#financing {
  background: var(--section);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.financing__inner {
  display: flex;
  justify-content: center;
}
.financing__link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(18, 48, 74, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.financing__link:hover, .financing__link:focus {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18, 48, 74, 0.26);
}
.financing__img {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
}

/* ---------- Intro band ---------- */
#intro-content {
  background: var(--section);
}
.intro-row {
  padding-block: 28px 34px;
}
#intro-content h2 {
  color: var(--navy);
  text-align: center;
}
#intro-content p {
  font-size: 1.15em;
  margin-top: 1em;
}

/* ---------- CTA cards ---------- */
#cta-content { padding: 32px 0; background: var(--card); }
.cta-inner {
  background-color: var(--navy);
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 4px;
}
.cta-inner h3, .cta-inner p {
  color: #fff;
  font-family: var(--font-ui);
  padding: 2%;
  text-align: center;
}
.cta-inner h3 { font-weight: 800; }
.cta-inner p { font-size: 0.85em; }
.cta-inner a { color: #fff; }
.cta-inner a:hover, .cta-inner a:focus { color: var(--amber); text-decoration: none; }

.right-arrow {
  color: #fff;
  padding-right: 1.5em;
  position: relative;
  font-family: var(--font-ui);
  font-weight: 600;
}
.right-arrow::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  line-height: 0;
}

.cta-inner__img { display: block; margin-top: 8px; }
@media (min-width: 768px) {
  .cta-inner__img[data-lightbox] { cursor: zoom-in; }
}
/* Mobile-only lightbox triggers (e.g. the WINDOWS card image) enlarge on tap. */
@media (max-width: 767px) {
  .cta-inner__img[data-lightbox-mobile] { cursor: zoom-in; }
}
.img-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  overflow: hidden;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  padding: 16px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.img-box > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to the top edge so the subject's head/top is never clipped; any
     crop happens at the bottom instead of evenly on both edges. */
  object-position: center top;
}
.img-box--windows {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    radial-gradient(300px 200px at 75% 15%, rgba(233,162,59,0.6), transparent 60%),
    linear-gradient(135deg, #2F7C7A, #12304A);
}
.img-box--doors {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    radial-gradient(300px 200px at 75% 15%, rgba(47,124,122,0.6), transparent 60%),
    linear-gradient(135deg, #1d4a6e, #0C2233);
}
.img-box--impact {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    radial-gradient(300px 200px at 75% 15%, rgba(233,162,59,0.6), transparent 60%),
    linear-gradient(135deg, #25635F, #12304A);
}

/* Phones: the stacked section paddings (32px bottom on the cards + 32px top on
   "Our Products") plus the last card's 24px margin left an oversized gap below
   the IMPACT & ENERGY card. Tighten only on mobile; desktop keeps the original. */
@media (max-width: 767px) {
  #cta-content { padding-bottom: 12px; }
  #main-content { padding-top: 16px; }
}

/* ---------- Main content ---------- */
#main-content { padding: 32px 0; background: var(--card); }
.entry-content h2 {
  font-family: var(--font-ui);
  color: var(--navy);
  text-align: center;
}
.entry-content p { color: var(--ink); }

.entry-content ul { padding: 0; list-style: none; width: 100%; margin-bottom: 16px; }
.entry-content li {
  padding-left: 2em;
  position: relative;
  margin-bottom: 6px;
}
.entry-content li::before {
  content: "›";
  position: absolute;
  left: 0.4em;
  top: 0;
  color: var(--navy);
  font-weight: 800;
  font-size: 1.2em;
}

#logos {
  text-align: center;
  margin-top: 20px;
}
.brand-chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--navy);
  border: 2px solid var(--teal);
  border-radius: 4px;
  padding: 8px 14px;
  margin: 5px;
  letter-spacing: 0.04em;
}

/* ---------- Service area / process ---------- */
#service-area {
  background: var(--section);
  padding: 36px 0;
}
#service-area h2 { color: var(--navy); }
.steps { margin: 0 0 20px; }
.steps li {
  padding-left: 2em;
  position: relative;
  margin-bottom: 10px;
  color: var(--ink);
}
.steps li::before {
  content: "✓";
  position: absolute;
  left: 0.2em;
  top: 0;
  color: var(--teal);
  font-weight: 800;
}

.counties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.county {
  background: var(--card);
  border: 1px solid var(--teal);
  color: var(--navy);
  border-radius: 4px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---------- Reviews ---------- */
#reviews { padding: 36px 0; background: var(--bg); }
#reviews h2 { text-align: center; }
.review {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  background: var(--card);
}
.stars { color: var(--amber); letter-spacing: 2px; margin-bottom: 8px; font-size: 1.05rem; }
.review blockquote { font-size: 1rem; color: var(--ink); margin: 0 0 10px; }
.review cite { font-family: var(--font-ui); font-weight: 700; color: var(--navy); font-style: normal; }

/* ---------- FAQ ---------- */
#faq { padding: 36px 0; background: var(--section); }
#faq h2 { text-align: center; }
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 14px 18px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--teal);
  line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 18px 16px; color: var(--ink-soft); }

/* ---------- Free estimate form ---------- */
.footer-form {
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(233, 162, 59, 0.45), transparent 60%),
    var(--navy);
  padding: 36px 0;
}
.footer-form h2, .footer-form p { color: #fff; }
.footer-form .center { text-align: center; }

.quote-form { max-width: 780px; margin-inline: auto; }
.form-group { margin-bottom: 16px; }

/* Form field grid: single column on mobile, 2×2 (two columns, two
   fields each) on desktop browsers. */
.form-row { display: flex; flex-wrap: wrap; }
.form-row .form-group { width: 100%; }
@media (min-width: 768px) {
  .form-row .form-group { width: 50%; }
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  margin: 0 0 0.5em;
  font-size: 1em;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-ui);
  background: #fff;
  color: var(--ink);
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(233, 162, 59, 0.25);
}
.quote-form .btn-block { font-size: 1.05em; padding: 12px; }
.form-fine { color: #f3e3c4 !important; font-size: 0.8rem; text-align: center; margin-top: 10px; }

/* Submit status message (success / error) — kept separate from the small
   privacy line above so it can be large and high-contrast on the dark form. */
.form-status {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  color: #fff;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.form-status.is-visible { display: block; }
.form-status.is-success {
  background: #1e6b47;
  border-color: #3fa96e;
  color: #f2fff8;
}
.form-status.is-error {
  background: #7e2323;
  border-color: #e07a7a;
  color: #fff3f3;
}
@media (max-width: 480px) {
  .form-status { font-size: 0.95rem; padding: 11px 12px; }
}

/* ---------- Footer ---------- */
#site-footer {
  background-color: var(--navy-dark);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.85em;
  padding: 2em 0 1em;
}
.footer-col {
  margin-bottom: 1.5em;
  line-height: 1.7;
}
#site-footer a { color: var(--amber); }
#site-footer a:hover { color: var(--teal); text-decoration: none; }

.fa {
  color: var(--amber);
  float: left;
  padding: 0 0.5em 0 0;
  width: 1.6em;
  text-align: center;
  font-size: 1.6em;
}
.fa::before { font-weight: 900; }
.fa-phone::before { content: "☎"; }
.fa-map-marker::before { content: "📍"; }
.fa-info::before { content: "ⓘ"; }

/* ---------- Interior pages (licensing, etc.) ---------- */
.page-hero {
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(233, 162, 59, 0.40), transparent 60%),
    var(--navy);
  padding: 40px 0 44px;
  text-align: center;
}
.page-hero__eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.page-hero h1 {
  color: #fff;
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 5vw, 2.9rem);
}
.page-hero__lede {
  color: #dfe9ef;
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.05rem;
}

.page-section { padding: 40px 0; background: var(--card); }
.page-section--muted { background: var(--section); }
.page-section h1, .page-section h2 { text-align: center; color: var(--navy); }

.page-lede {
  text-align: center;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 auto 26px;
}
.page-lede--mobile-hide { display: none; }
@media (min-width: 768px) {
  .page-lede--mobile-hide { display: block; }
}
/* Show a fragment on tablet/desktop only; hidden on mobile. */
.desktop-only { display: none; }
@media (min-width: 768px) {
  .desktop-only { display: inline; }
}
/* ---------- Door catalog iframe embed ---------- */
.door-catalog {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 24px auto 0;
  aspect-ratio: 16 / 10;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--section);
}
.door-catalog__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.page-note {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 18px;
}

/* Credential cards */
.lic-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 4px;
  padding: 22px;
  height: 100%;
  margin-bottom: 20px;
}
.lic-card h3 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 1.05rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.lic-heading {
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0 0 8px;
}

/* Definition-style info rows */
.info-list { margin: 0; }
.info-list dt {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
.info-list dt:first-child { margin-top: 0; }
.info-list dd { color: var(--ink); margin: 2px 0 0; }
.info-list dd.info-list__strong {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.info-list--check { width: 100%; }
.info-list--check li {
  padding-left: 1.9em;
  position: relative;
  margin-bottom: 10px;
  color: var(--ink);
}
.info-list--check li::before {
  content: "✓";
  position: absolute;
  left: 0.2em;
  top: 0;
  color: var(--teal);
  font-weight: 800;
}
.info-list--check strong { color: var(--navy); }

/* Standout advisory block */
.pull-quote {
  background: var(--navy);
  border-left: 6px solid var(--amber);
  border-radius: 4px;
  padding: 20px 24px;
  margin-top: 28px;
}
.pull-quote p { color: #fff; margin: 0; font-size: 1.02rem; }

/* .row utility for spacing between stacked rows */
.row--gap { margin-top: 20px; }

/* Numbered verify steps */
.steps-block {
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 4px;
  padding: 20px 22px;
  margin-bottom: 16px;
  background: var(--card);
}
.steps-block p { margin: 0; color: var(--ink-soft); }
.page-section--muted .steps-block { background: var(--card); }

/* Closing call-to-action strip */
.cta-strip {
  background: var(--section);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 22px;
  text-align: center;
  margin-top: 24px;
}
.cta-strip p { margin: 0; color: var(--ink); }
.cta-strip a {
  color: var(--navy);
  font-family: var(--font-ui);
  font-weight: 700;
}

/* ---------- Product cards (products.html) ---------- */
.prod-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 4px;
  padding: 22px;
  height: 100%;
  margin-bottom: 20px;
}
.prod-card h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 1.05rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.prod-card p { color: var(--ink-soft); }
.prod-card--featured { border-top-color: var(--amber); }

/* Anchor target for the product overview: keep the "A Product Line Built
   for Central Florida" heading visible when jumped to from the home page. */
#product-overview { scroll-margin-top: 90px; }
@media (min-width: 768px) {
  #product-overview { scroll-margin-top: 110px; }
}

.prod-card .info-list dt:first-of-type { margin-top: 0; }

.prod-card .info-list--check { margin: 4px 0 0; }
.prod-card .info-list--check li:last-child { margin-bottom: 0; }

.prod-card__link {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--teal-dark);
  padding-right: 1.5em;
  position: relative;
}
.prod-card__link::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  line-height: 0;
}
.prod-card__link:hover,
.prod-card__link:focus { color: var(--amber-dark); text-decoration: none; }

.prod-card__tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--amber);
  border-radius: 3px;
  padding: 3px 9px;
  margin-bottom: 10px;
}
.prod-card__tag--teal { background: var(--teal); }

.prod-card .lic-heading { margin-top: 0; }

/* ---------- Product card dropdown (products.html) ----------
   Brand sub-menu revealed under a product card. Built on <details> so it
   opens without JavaScript; js/main.js adds click-to-toggle and dismissal. */
.prod-dropdown { margin-top: 2px; }
.prod-dropdown__toggle {
  display: inline-block;
  cursor: pointer;
  list-style: none;
}
.prod-dropdown__toggle::-webkit-details-marker { display: none; }
.prod-dropdown__toggle::after { content: "\25BE"; } /* ▾ closed */
.prod-dropdown[open] .prod-dropdown__toggle::after { content: "\25B4"; } /* ▴ open */

.prod-dropdown__menu {
  margin: 10px 0 0;
  padding: 6px 0;
  min-width: 170px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
}
.prod-dropdown__menu li { margin: 0; }
.prod-dropdown__menu a {
  display: block;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.prod-dropdown__menu a:hover,
.prod-dropdown__menu a:focus {
  background: var(--card);
  color: var(--teal-dark);
  text-decoration: none;
}

/* Nested sub-menu (e.g. PGT Windows -> Vinyl / Aluminum) */
.prod-dropdown--nested { margin: 0; }
.prod-dropdown__toggle--nested {
  display: block;
  padding: 8px 28px 8px 14px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.prod-dropdown__toggle--nested:hover,
.prod-dropdown__toggle--nested:focus {
  background: var(--card);
  color: var(--teal-dark);
}
.prod-dropdown__menu--nested {
  margin: 0;
  padding: 2px 0 6px;
  min-width: 0;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--teal);
  border-radius: 0;
}
.prod-dropdown__menu--nested a {
  padding: 8px 14px 8px 26px;
  font-weight: 500;
  color: var(--ink-soft);
}
.prod-dropdown__menu--nested a:hover,
.prod-dropdown__menu--nested a:focus {
  background: var(--card);
  color: var(--teal-dark);
}

/* Mobile: the desktop 8px block padding on every menu link stacks into a wide
   gap between rows once the type shrinks, so tighten the menu and the links.
   Horizontal padding is left alone to keep the tap targets wide. */
@media (max-width: 767px) {
  .prod-dropdown__menu { margin-top: 6px; padding: 2px 0; }
  .prod-dropdown__menu a { padding-block: 5px; }
  .prod-dropdown__menu--nested { padding: 1px 0 3px; }
  .prod-dropdown__toggle--nested { padding-block: 5px; }
}

/* ---------- PDF viewer (pdf-viewer.html) ---------- */
.pdf-body { background: #5c6771; }
.pdf-body main { display: block; }

.pdf-topbar { background: var(--navy); }
.pdf-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 14px;
}
.pdf-topbar__home {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.pdf-topbar__home:hover,
.pdf-topbar__home:focus { color: var(--amber); text-decoration: none; }
.pdf-topbar__back {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
  color: #d8e0e4;
}
.pdf-topbar__back:hover,
.pdf-topbar__back:focus { color: var(--amber); text-decoration: none; }

.pdf-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 18px 0 14px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(18, 48, 74, 0.12);
}
.pdf-toolbar__title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--navy);
}
.pdf-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pdf-zoom,
.pdf-nav { display: flex; align-items: center; gap: 6px; }
.pdf-zoom__val {
  min-width: 3.2em;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.pdf-pageinfo {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pdf-btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--navy);
  cursor: pointer;
}
.pdf-btn--wide { padding-inline: 14px; }
.pdf-btn:hover,
.pdf-btn:focus { border-color: var(--teal); color: var(--teal-dark); text-decoration: none; }
.pdf-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Fit mode is a persistent state, not a momentary action, so the active button
   is shaded to show which one is in effect. */
.pdf-btn[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.pdf-btn[aria-pressed="true"]:hover,
.pdf-btn[aria-pressed="true"]:focus { border-color: var(--navy); color: #fff; }

.pdf-status {
  margin: 10px 0 18px;
  padding: 12px 16px;
  background: var(--card);
  border-left: 4px solid var(--amber);
  border-radius: 4px;
  color: var(--ink-soft);
}
.pdf-status a { font-weight: 600; }

/* Pages sit in their own scroll container so the toolbar stays put. */
.pdf-stage {
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding: 16px;
  margin-bottom: 26px;
  background: #4f5a64;
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}
/* The wrapper carries the page look so lazily-rendered placeholders already
   read as pages before their canvas arrives. Its width is set in JS from the
   zoom level, so it must NOT be capped at 100% — that would clamp zoom-in back
   down to fit-width and make the +/- buttons appear dead. */
.pdf-page-wrap {
  margin: 0 auto 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.pdf-page-wrap:last-child { margin-bottom: 0; }
.pdf-page-wrap[data-state="queued"] { background: #f2f5f7; }
.pdf-page {
  display: block;
  height: auto;
}

.pdf-foot {
  padding: 18px 0 26px;
  background: var(--navy);
  color: #c9d4dc;
}
.pdf-foot p { margin: 0; text-align: center; font-size: 0.82rem; }

@media (min-width: 768px) {
  .pdf-toolbar__title { font-size: 1.3rem; }
  .pdf-stage { max-height: calc(100vh - 200px); }
}

/* Brand sub-headings within the Replacement Windows section */
.prod-subheading {
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 30px 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--amber);
  scroll-margin-top: 12px;
}
.prod-subheading:first-of-type { margin-top: 12px; }

/* ---------- Photo gallery (photos.html) ---------- */
.photo-feature {
  margin: 0 0 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.photo-feature__link {
  display: block;
  overflow: hidden;
  background: var(--section);
}
.photo-feature img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
.photo-feature__link:hover img,
.photo-feature__link:focus-visible img { transform: scale(1.03); }
.photo-feature figcaption {
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.photo-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.photo-card__link {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--section);
}
.photo-card__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}
.photo-card__link:hover img,
.photo-card__link:focus-visible img { transform: scale(1.05); }

/* Lazily-loaded gallery tiles fade in once decoded (class added by js/main.js).
   Tiles are only given this class after a real fetch, never on cached loads,
   so images that arrive instantly do not flash. */
.photo-card__link[data-lazy] img {
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.4s ease;
}
.photo-card__link[data-lazy="ready"] img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .photo-card__link[data-lazy] img,
  .photo-card__link[data-lazy="ready"] img {
    opacity: 1;
    transition: none;
  }
}
.photo-card figcaption {
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Placeholder tile for photos that have not been supplied yet */
.photo-card--empty .photo-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border-bottom: 1px dashed var(--line);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: default;
}
.photo-card--empty figcaption { color: var(--muted); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  /* Above the sticky site header so an enlarged photo is never clipped. */
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 34, 51, 0.92);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  width: auto;
  height: auto;
  max-width: min(1100px, 100%);
  max-height: 88vh;
  border-radius: 4px;
}
.lightbox__close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 1;
  padding: 6px 12px;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__close:focus { background: rgba(255, 255, 255, 0.15); }

/* Desktop: an enlarged gallery photo scales up to the viewport, but is always
   contained rather than stretched to fill it. Forcing width/height to 100% with
   object-fit: cover blew portrait shots up to full screen and cropped the top
   and bottom off; containing them keeps the whole photo visible at a sane size
   while landscape shots still use the available width. Scoped to the gallery
   lightbox so the shared lightbox on other pages keeps its inset frame. */
@media (min-width: 768px) {
  .lightbox--gallery { padding: 24px; }
  .lightbox--gallery .lightbox__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    object-fit: contain;
    border-radius: 4px;
  }
  /* The photo can now sit close to the viewport edge on wide screens and may be
     bright, so give the close button a backdrop that stays legible. */
  .lightbox--gallery .lightbox__close {
    background: rgba(12, 34, 51, 0.75);
  }
}

.footer-bottom {
  margin-top: 1.5em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
  font-size: 0.95em;
  color: #cfe0ea;
}
.footer-bottom p { margin-bottom: 6px; }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================================================
   Responsive (mobile-first, upward)
   ========================================================================== */

/* ≥ 480px */
@media (min-width: 480px) {
  .btn { white-space: nowrap; }
  .logo { flex: 0 1 auto; text-align: left; }
  .phone { flex: 0 0 auto; text-align: right; margin-left: auto; }
  .phone2 { flex: 0 0 auto; text-align: right; }
  .estimate { flex: 0 0 auto; text-align: right; }
  .estimate a.btn { width: auto; }
}

/* ≥ 768px */
@media (min-width: 768px) {
  body { font-size: 16px; }
  h1, .h1 { font-size: 2.6em; }
  h2, .h2 { font-size: 2.15em; }
  h3, .h3 { font-size: 1.7em; }

  .row { display: flex; flex-wrap: wrap; }
  .col-3 { width: 33.3333%; }
  .col-4 { width: 33.3333%; }
  .col-6 { width: 50%; }
  .col-12 { width: 100%; }
  .col-heading { width: 33.3333%; }
  .col-text { width: 66.6667%; }

  .top-callout__break { display: none; }
  .top-callout__text h2 { font-size: 2.5em; }
  .top-callout__room {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 24px;
  }

  .top-callout__row {
    flex-direction: row;
    text-align: right;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }
  .top-callout__img { flex: 0 0 200px; }
  .top-callout__brand {
    display: block;
    text-align: center;
    font-family: "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: var(--navy);
    margin: 0 auto 8px;
    padding-bottom: 18px;
    position: relative;
  }
  .top-callout__brand::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--amber), var(--teal));
  }
  .top-callout__content {
    flex: 0 1 auto;
    max-width: 520px;
    align-items: flex-end;
  }

  .brands-banner__inner {
    flex-direction: column;
    gap: 14px;
    padding-block: 22px;
  }
  .brands-banner__logos {
    /* Desktop: single horizontal row (1 × 3 grid). */
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .brands-banner__logos img:last-child { grid-column: auto; justify-self: center; }

  .financing__img { width: 360px; }

  .intro-row { display: flex; align-items: flex-start; }
  #intro-content h2 { text-align: left; }

  .entry-content ul { width: 49%; }
  /* Let the warranty list use the full column width and wrap long sentences
     rather than overflowing past the right edge of the column. */
  .entry-content ul.warranty-list {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }
  /* Balance the two halves of the long warranty sentence so the break always
     lands after "Accidental" instead of drifting with the column width. */
  .entry-content ul.warranty-list li { text-wrap: balance; }
  .two-col { float: left; }
  /* The floated product lists sit outside normal flow, so the full-width CTA
     button after them would overlap the list text. Clear it below the floats. */
  .entry-content .two-col + p { clear: left; }

  .cta-inner { margin-bottom: 0; }

  /* Desktop: center the whole copy block on the slide rather than inside the
     content column, so the single-line heading can extend wider than the
     container when it needs to. The heading stays flush left; the lede block is
     centered beneath it, with its own text still left-justified. */
  .hero-slide__inner {
    width: fit-content;
    max-width: none;
    margin-inline: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
  }
  .hero-slide__lede {
    max-width: 60ch;
    margin-inline: auto;
  }

  #site-footer .footer-col { margin-bottom: 1.25em; }
}

/* ≥ 992px — desktop nav */
@media (min-width: 992px) {
  /* Desktop: size the hero heading to match the interior page hero
     (.page-hero h1), and keep it on a single line. The min() fallback shrinks
     the heading on narrower desktops so the one-line version still fits the
     viewport without introducing a horizontal scrollbar. */
  .hero-slide h1 {
    white-space: nowrap;
    font-size: min(clamp(1.8rem, 5vw, 2.9rem), 3vw);
  }
  /* Desktop only: stretch the link menu across the full content column */
  .top-callout__nav {
    display: block;
    width: 100%;
  }
  .top-callout__nav-list {
    width: 100%;
    justify-content: space-between;
    align-content: flex-start;
    gap: 8px clamp(14px, 2.2vw, 34px);
  }
  .top-callout__nav-list a {
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .navbar-toggle { display: none; }
  .navbar-collapse { display: block !important; }
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li { float: left; }
  .navbar-nav > li > a {
    margin-top: 1em;
    border-top: 3px solid var(--navy);
    transition: all 0.5s;
    padding: 10px 15px;
  }
  .navbar-nav > li > a:hover,
  .navbar-nav > li > a:focus { border-color: var(--teal); }
  .navbar-nav > li.current-menu-item > a {
    border-top: 3px solid var(--teal);
    color: var(--navy);
  }

  /* Desktop: the BBB badge carries more weight at this width, so scale it up
     from the 80px mobile size. Stays under the 186px source width to keep it
     crisp, and the caption grows with it so the pair stays balanced. */
  .reviews-bbb { margin-top: 32px; }
  .reviews-bbb__link { gap: 18px; font-size: 1.15rem; }
  .reviews-bbb__logo { width: 150px; }
}

/* Mobile / tablet nav (hamburger) — hide inline links, show toggle */
@media (max-width: 991px) {
  .top-callout__nav { width: 100%; }
  .top-callout__nav-toggle {
    display: block;
    padding: 6px 7px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
  }
  .top-callout__nav-toggle .icon-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--ink);
  }
  .top-callout__nav-toggle .icon-bar + .icon-bar { margin-top: 3px; }
  /* Mobile/tablet: stack the CTA into two rows — the phone number centred on top
     with the hamburger pinned to its right edge, then the orange button centred
     beneath. Pinning right (rather than flex space-between) keeps the number
     geometrically centred. */
  .site-header__cta {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .site-header__phone-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .site-header__phone-row .top-callout__nav-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Two-up grid keeps the 9 links compact instead of one very tall column,
     and gives each a real tap target inside the navy bar. */
  .top-callout__nav-list {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .top-callout__nav-list.is-open { display: grid; }
  .top-callout__nav-list li { min-width: 0; }
  .top-callout__nav-list li:last-child { grid-column: 1 / -1; }
  /* BBB logo: shown inside the opened mobile menu, spanning both columns. */
  .top-callout__nav-list .nav-bbb {
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 4px;
  }
  .top-callout__nav-list .nav-bbb a {
    display: inline-block;
    padding: 8px;
    background: transparent;
  }
  .top-callout__nav-list .nav-bbb img {
    display: block;
    width: 60px;
    height: auto;
  }
  .top-callout__nav-list a {
    display: block;
    padding: 9px 10px;
    font-size: 0.95rem;
    text-align: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    white-space: normal;
    overflow-wrap: break-word;
  }
  .site-header__bar .top-callout__nav-list a:hover,
  .site-header__bar .top-callout__nav-list a:focus {
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none;
  }
}

/* Phones: the CTA rows already stack inside the ≤991px block above; here we
   only need to centre the whole bar once it wraps. */
@media (max-width: 767px) {
  .site-header__bar-inner { justify-content: center; }
}

@media (max-width: 479px) {
  .top-callout__row { gap: 10px; }
  .top-callout__text h2 { font-size: 1.35em; line-height: 1.15; }
  .top-callout__label { font-size: 0.82em; }
  .top-callout__text h2 a { color: #c00; }
  .top-callout__text h2 a { white-space: normal; overflow-wrap: break-word; }
  .top-callout__phones { font-size: 0.8em; margin-bottom: 8px; }
  .top-callout__phones .sep { margin-inline: 2px; }
  .top-callout__text .btn { font-size: 0.8em; padding: 6px 8px; }
}

/* Desktop: increase the type size of the top "Product Overview" section so the
   card headings, body copy and links are easier to read on larger screens. */
@media (min-width: 992px) {
  #product-overview .page-lede { font-size: 1.18rem; line-height: 1.6; }
  #product-overview .prod-card { padding: 28px; }
  #product-overview .prod-card h3 { font-size: 1.5rem; }
  #product-overview .prod-card p { font-size: 1.12rem; line-height: 1.6; }
  #product-overview .prod-card__link { font-size: 1rem; }
  #product-overview .prod-card__tag { font-size: 0.75rem; padding: 4px 10px; }
  #product-overview .prod-dropdown__menu a,
  #product-overview .prod-dropdown__toggle--nested { font-size: 1rem; padding-block: 10px; }
  #product-overview .page-note { font-size: 1.08rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}