/* ═══════════════════════════════════════
   MAIN.CSS - Integrity Roofing and Construction
   Global styles: reset, variables, buttons, top bar, nav, footer
═══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --navy: #10094C;           /* Top bar, large section backgrounds, nav links, button hover text */
  --navy-black: #07042A;     /* Near-black blue: the navy, darkened almost to black */
  --red: #ED1B24;            /* Section headings, button text, button borders */
  --white: #FFFFFF;          /* Main backgrounds, text on navy, button fill */
  --black: #000000;          /* Body text */
  --near-black: #141414;     /* Main H1 */
  --light-gray: #F0F0F0;     /* Small panel backgrounds */
  --page-gray: #EEEEEE;      /* Body background behind the content */
  --warm-dark-gray: #463939; /* Minor text (default button label) */
  --royal-blue: #002970;     /* Button icons */
  --text: #1C1C1C;           /* Body text and lists */

  --font-head: 'Montserrat', Arial, sans-serif; /* Headings, buttons */
  --font-body: 'Lora', Georgia, serif;          /* Body text and lists */
  --font-logo: 'Big Shoulders Display', 'Montserrat', Arial, sans-serif; /* Logo-style display type */

  --container: 1200px;
  --gutter: 2rem;
  --section-pad: 5rem 0;
  --topbar-height: 40px;
  --nav-height: 84px;
  --border: 2px solid var(--navy);
}

html { scroll-behavior: smooth; }
/* Links that jump to a spot on the page stop just below the sticky top bar
   and nav, so the heading they point at is not hidden underneath. */
[id] { scroll-margin-top: calc(var(--topbar-height) + var(--nav-height) + 1.5rem); }

body {
  margin: 0;
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

ul { margin: 0; padding: 0; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

h1 {
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  color: var(--red);
  text-wrap: balance;
}
/* Two-tone headings: wrap the second line in .h2-dark to make it black.
   .h2-line keeps a phrase on one line on desktop. */
/* The big logo-style hero title is an h2 (the small label above it is the
   page's h1, see h1.eyebrow), but it keeps the h1 base styles it was designed
   with. :where() keeps this as weak as the plain h2 rule, so each page's
   .hero-title styles still win. */
h2:where(.hero-title) {
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
}
h2 .h2-dark { color: var(--black); }
@media (min-width: 861px) {
  h2 .h2-line { white-space: nowrap; }
}

h3 {
  font-size: 1.2rem;
  color: var(--navy);
}

strong, b { font-weight: 700; }

.eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 1.23rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
/* In page heroes the small label is the page's h1, written for search
   engines, while the big logo-style title under it is an h2. The label keeps
   the look of a normal eyebrow instead of the h1 styles above. */
h1.eyebrow {
  line-height: inherit;
  text-wrap: wrap;
}

.lead {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding: var(--section-pad); }

.section-head {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.section-head p { margin-top: 1rem; font-size: 1.2rem; }
/* The small label sits between two red rules, like "and Construction" in the
   hero, and the heading uses the logo-style block capitals. Blog posts keep
   the plain style (see blog.css). */
.section-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Never wider than a normal heading, even in the full-width sections. */
  max-width: 760px;
  margin-inline: auto;
  color: var(--red);
  font-size: 1rem;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: "";
  flex: 1;
  min-width: 2rem;
  height: 3px;
  background: var(--red);
}
.section-head h2 {
  font-family: var(--font-logo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
}
.section-head h2 .h2-dark { color: var(--navy); }
/* At this size a long heading may need two lines, so it is allowed to wrap. */
.section-head h2 .h2-line { white-space: normal; }

.section-cta {
  margin-top: 2.5rem;
  text-align: center;
}

/* ── BUTTONS ──
   Every button is a solid fill with a 2px border and a solid near-black blue
   shadow down and to the right. Hover swaps to another solid root color, no
   opacity and no fades.
   Button text is never smaller than 1.1875rem (19px) bold. White on the brand
   red is too low in contrast for small text, but passes as large text from
   about 18.7px bold up. */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  background: var(--red);
  color: var(--white);
  border: 2px solid var(--red);
  border-radius: 4px;
  padding: 0.85rem 1.6rem;
  box-shadow: 4px 4px 0 var(--navy-black);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover,
.btn:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* White fill, red text and border. Hover text goes navy per the brand sheet. */
.btn-outline {
  background: var(--white);
  color: var(--red);
  border-color: var(--red);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--white);
  color: var(--navy);
  border-color: var(--navy);
}

/* For use on navy backgrounds. */
.btn-light {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn-light:hover,
.btn-light:focus-visible {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

/* Larger button for a section's main call to action. */
.btn-lg {
  font-size: 1.25rem;
  padding: 1.1rem 2.4rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ── TOP BAR ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 220;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  height: var(--topbar-height);
  white-space: nowrap;
  overflow: hidden;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}
.topbar a {
  color: var(--white);
  text-decoration: none;
}
.topbar a:hover { text-decoration: underline; }
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.topbar svg {
  width: 15px;
  height: 15px;
  stroke: var(--white);
  fill: none;
  stroke-width: 2;
  vertical-align: -2px;
  margin-right: 0.35rem;
}

/* ── NAV ── */
.nav {
  position: sticky;
  top: var(--topbar-height);
  z-index: 200;
  height: var(--nav-height);
  background: var(--white);
  border-bottom: 3px solid var(--navy);
}
.nav-inner {
  position: relative;
  z-index: 205;
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  background: var(--white);
}

.nav-logo {
  position: relative;
  z-index: 201;
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img { height: 56px; width: auto; display: block; }

/* ── Links (desktop) ── */
.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
}
.nav-links-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1vw, 0.75rem);
}
.nav-link {
  position: relative;
  display: inline-block;
  color: var(--navy);
  text-decoration: none;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.5rem 0.65rem;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.65rem; right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--red);
  transition: right 0.25s ease;
}
.nav-link:hover,
.nav-link.active { color: var(--red); }
.nav-link:hover::after,
.nav-link.active::after { right: 0.65rem; }

/* Dropdown */
.nav-item {
  position: relative;
}
/* Desktop: stretch the item to the full nav height so the dropdown opens
   below the nav bar and clears the Contact Us button. */
@media (min-width: 1081px) {
  .nav-links,
  .nav-links-center { align-self: stretch; }
  .nav-item {
    align-self: stretch;
    display: flex;
    align-items: center;
  }
}
.nav-item > .nav-link {
  padding-right: 1.5rem;
}
.nav-item > .nav-link::before {
  content: "";
  position: absolute;
  right: 0.55rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
}
.nav-dropdown {
  list-style: none;
  position: absolute;
  top: 100%;
  left: -10px;
  width: 620px;
  background: var(--white);
  border: var(--border);
  border-top: 3px solid var(--red);
  border-radius: 0 0 6px 6px;
  padding: 0.85rem;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  z-index: 210;
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-item.open > .nav-dropdown { display: grid; }
.nav-dropdown a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 0.85rem 0.95rem;
  border: 2px solid var(--page-gray);
  border-left: 4px solid var(--red);
  border-radius: 4px;
  color: var(--navy);
  text-decoration: none;
}
.nav-dropdown-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}
.nav-dropdown-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--warm-dark-gray);
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible,
.nav-dropdown a.active {
  background: var(--navy);
  border-color: var(--navy);
  border-left-color: var(--red);
  color: var(--white);
}
.nav-dropdown a:hover .nav-dropdown-desc,
.nav-dropdown a:focus-visible .nav-dropdown-desc,
.nav-dropdown a.active .nav-dropdown-desc { color: var(--white); }

.nav-cta {
  flex-shrink: 0;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--red);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--navy-black); /* the same shadow as the other buttons */
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  margin-left: 1rem;
  white-space: nowrap;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ── Hamburger ── */
.nav-toggle {
  position: relative;
  z-index: 210;
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 6px;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Mobile nav ── */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    inset: calc(var(--topbar-height) + var(--nav-height)) 0 auto 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 3px solid var(--navy);
    padding: 0.5rem var(--gutter) 1.4rem;
    transform: translateY(-12px);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, visibility 0.25s;
    max-height: calc(100vh - var(--topbar-height) - var(--nav-height));
    overflow-y: auto;
    z-index: 199;
  }
  .nav-links.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links-center { display: contents; }

  .nav-link {
    display: block;
    padding: 0.95rem 0.2rem;
    border-bottom: 1px solid var(--page-gray);
    font-size: 1.05rem;
    white-space: normal;
  }
  /* On touch screens a tapped link keeps its hover and focus state, which left
     "Services" red after its submenu was closed. In the mobile menu a link is
     red only for the current page or while its submenu is open. */
  .nav-link:hover,
  .nav-link:focus { color: var(--navy); }
  .nav-link.active,
  .nav-item.open > .nav-link { color: var(--red); }
  .nav-link::after { display: none; }

  .nav-item > .nav-link { padding-right: 2rem; }
  .nav-item > .nav-link::before { right: 0.5rem; }
  .nav-item.open > .nav-link::before { transform: translateY(-30%) rotate(-135deg); }
  .nav-item:hover > .nav-dropdown,
  .nav-item:focus-within > .nav-dropdown { display: none; }
  .nav-item.open > .nav-dropdown { display: grid; }
  .nav-dropdown {
    position: static;
    transform: none;
    width: auto;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    background: var(--white);
    margin: 0 0 0.5rem;
    padding: 0.5rem 0;
    gap: 0.5rem;
  }

  .nav-cta {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 1rem;
    padding: 0.9rem 1.5rem;
  }
}

/* ── FOOTER ── */
footer {
  background: var(--navy);
  color: var(--white);
  padding: 4rem 0 2rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 1.1fr 1.25fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 2px solid var(--white);
  margin-bottom: 1.5rem;
}
.footer-logo {
  display: inline-block;
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.footer-logo img { height: 52px; width: auto; }
.footer-tagline {
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: 1.25rem;
}
.footer-finance {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s;
}
.footer-finance:hover,
.footer-finance:focus-visible { border-color: var(--red); color: var(--red); }
.footer-finance img { height: 20px; width: auto; }

.footer-heading {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 2px solid var(--red);
  display: inline-block;
  padding-bottom: 0.35rem;
  margin: 0 0 1.1rem;
}
.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: 0.55rem; }
.footer-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-nav a:hover { text-decoration: underline; }

.footer-contact-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.footer-contact-item a { color: var(--white); text-decoration: none; }
.footer-contact-item a:hover { text-decoration: underline; }
.footer-contact-item svg {
  width: 18px; height: 18px;
  stroke: var(--red);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-hours {
  list-style: none;
  font-size: 0.95rem;
}
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--white);
}
.footer-hours li:last-child { border-bottom: 0; }
/* The contact details are marked up as the business's address for search
   engines; browsers would otherwise show them in italics. */
.footer-address { font-style: normal; }
.footer-hours span:first-child { font-family: var(--font-head); font-weight: 600; white-space: nowrap; }
.footer-hours span:last-child { text-align: right; white-space: nowrap; }

.footer-heading-follow { margin-top: 1.75rem; }
.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: 4px;
  color: var(--navy);
}
.footer-social a:hover,
.footer-social a:focus-visible { border-color: var(--red); color: var(--red); }
.footer-social svg { width: 24px; height: 24px; fill: currentColor; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  font-size: 0.8rem;
  text-align: center;
}
.footer-bottom a {
  color: var(--white);
  text-decoration: underline;
}
.footer-bottom a:hover { color: var(--red); }

/* ── BEFORE / AFTER SLIDER ── */
/* Before/after slider (see js/compare.js). The "after" photo fills the frame
   and the "before" photo sits on top of it, clipped from the left edge to the
   divider. Brand colours only: navy, red and white. */
.compare {
  position: relative;
  aspect-ratio: 5 / 3;
  width: 100%;
  overflow: hidden;
  border: var(--border);
  border-radius: 6px;
  background: var(--navy);
  cursor: ew-resize;
  touch-action: pan-y; /* the page still scrolls up and down over the slider */
  user-select: none;
  -webkit-user-select: none;
}
.compare img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.compare-after,
.compare-top {
  position: absolute;
  inset: 0;
}
/* Half and half until the script takes over (and if it never loads). */
.compare-top {
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.compare-label {
  position: absolute;
  top: 0.9rem;
  z-index: 2;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--white);
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s;
}
.compare-label-before { left: 0.9rem; }
.compare-label-after { right: 0.9rem; background: var(--red); }
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 4px;
  margin-left: -2px;
  background: var(--white);
  pointer-events: none;
  will-change: left;
}
.compare-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  cursor: ew-resize;
  pointer-events: auto;
}
.compare-handle:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.compare-wrap .compare-hint {
  margin: 0.75rem 0 0;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--navy);
}

/* Bigger slider on phones: it runs edge to edge so the photos are easier to see. */
@media (max-width: 860px) {
  .compare {
    width: auto;
    margin-inline: calc(var(--gutter) * -1);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

/* ── LIGHTBOX ──
   Pop-up that shows a large image over the page (see js/site.js). The image
   can be zoomed and dragged around inside the frame. On phones it opens wide
   enough to read. */
.lightbox {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: var(--border);
  border-radius: 6px;
  background: var(--white);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.8); }
.lightbox-scroll {
  max-height: 92vh;
  overflow: auto;
  /* The script handles dragging and pinching itself. */
  touch-action: none;
  cursor: grab;
  overscroll-behavior: contain;
}
.lightbox-scroll.is-dragging { cursor: grabbing; }
.lightbox-scroll img {
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
/* Zoom buttons in the top left corner, matching the close button. */
.lightbox-zoom {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  display: flex;
  gap: 0.4rem;
}
.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}
.lightbox-btn,
.lightbox-close {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 4px;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.lightbox-btn:hover,
.lightbox-btn:focus-visible,
.lightbox-close:hover,
.lightbox-close:focus-visible { background: var(--navy); }
.lightbox-btn:disabled { background: var(--warm-dark-gray); cursor: default; }

/* ── ACCESSIBILITY ── */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--red);
  color: var(--white);
  padding: 0.75rem 1rem;
  z-index: 999;
  font-family: var(--font-head);
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

/* Text for screen readers and search engines only, e.g. the rest of a
   "Learn More" link: "Learn More<span class="visually-hidden"> about siding</span>". */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  :root { --section-pad: 4.5rem 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* ══════════════════════
   MOBILE (≤ 768px)
══════════════════════ */
@media (max-width: 768px) {
  :root { --section-pad: 3.5rem 0; --gutter: 1.25rem; --nav-height: 72px; }

  /* Section labels stay on one line between shorter red rules. */
  .section-head .eyebrow { gap: 0.6rem; font-size: 0.95rem; letter-spacing: 0.12em; white-space: nowrap; }
  .section-head .eyebrow::before,
  .section-head .eyebrow::after { min-width: 1.25rem; }

  /* Paragraphs read left-aligned on phones, even in centred sections. */
  p { text-align: left; }

  .nav-logo-img { height: 46px; }

  .topbar { font-size: 0.9rem; }
  .topbar-right { display: none; }
  .topbar-left { width: 100%; justify-content: center; }

  /* Larger text on phones for readability. */
  body { font-size: 1.0625rem; }
  .btn { font-size: 1.1875rem; padding: 0.95rem 1.5rem; }
  .btn-lg { font-size: 1.3rem; }
  .nav-link { font-size: 1.15rem; }
  .nav-dropdown-title { font-size: 1.15rem; }
  .nav-dropdown-desc { font-size: 1rem; }
  .nav-cta { font-size: 1.1rem; }
  .footer-tagline,
  .footer-nav a,
  .footer-contact-item,
  .footer-hours { font-size: 1.05rem; }
  .footer-heading { font-size: 0.95rem; }
  .footer-finance { font-size: 0.95rem; }
  .footer-bottom { font-size: 0.9rem; }

  footer { padding: 3rem 0 1.5rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.3rem; }
  .footer-bottom .sep { display: none; }
}

@media (max-width: 480px) {
  .nav-logo-img { height: 40px; }
  .btn { width: 100%; }
}