/* Immy's Garage Door Service homepage concept. Mobile first, symmetric grids.
   Palette sampled off their own site: #880000 brand red, cream panels, tan page. */

:root {
  --ink: #241f1c;
  --dark: #2b2522;
  --darker: #1c1815;
  --red: #880000;
  --red-deep: #6d0000;
  --red-lt: #ffb3b3;
  --cream: #fdf9f0;
  --paper: #ffffff;
  --tan: #efe7d5;
  --tan-line: #ddd1b7;
  --muted: #5a5048;
  --focus: #0b57d0;

  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(40, 28, 20, 0.07), 0 10px 26px rgba(40, 28, 20, 0.09);
  --shadow-lg: 0 2px 6px rgba(40, 28, 20, 0.09), 0 20px 48px rgba(40, 28, 20, 0.14);
  --gutter: 16px;
  --section-pad: clamp(30px, 3.6vw, 54px);
  --grid-gap: 16px;

  /* Real heights get measured by script.js; these are the no-JS fallbacks. */
  --banner-h: 0px;
  --header-h: 0px;
  --callbar-h: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Keep anchor targets and keyboard focus clear of the fixed banner, header and call bar. */
  scroll-padding-top: calc(var(--banner-h) + var(--header-h) + 12px);
  scroll-padding-bottom: calc(var(--callbar-h) + 16px + env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-top: var(--banner-h);
  padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

@media (min-width: 920px) {
  body { padding-bottom: 0; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.7rem, 1rem + 3vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1rem + 1.8vw, 2.25rem); }
h3 { font-size: 1.06rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

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

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

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 12px 18px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}
.skip:focus {
  left: 8px;
  top: calc(var(--banner-h) + 8px);
}

.doors-in > *,
.quote-in > *,
.footer-in > * { min-width: 0; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header: flat brand red, live-text wordmark (a proposed refresh of their logo) ---------- */

.header {
  position: sticky;
  top: var(--banner-h);
  z-index: 40;
  background: var(--red);
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.32);
  box-shadow: 0 -4px 0 var(--red);
}

.header-in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding-block: 10px;
  flex-wrap: wrap;
}

.brand {
  margin-right: auto;
  min-width: 0;
}

/* Wordmark, shared by header and footer */
.wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: #fff;
  text-decoration: none;
}
.wordmark-name {
  display: block;
  font: 800 2.375rem/0.86 var(--font-display);
  letter-spacing: -0.015em;
}
.wordmark-sub {
  display: block;
  font: 600 0.625rem/1 var(--font-body);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.brand:focus-visible { outline-color: #fff; outline-offset: 6px; }
.wordmark-name .apos { margin-inline: -0.03em; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font: 600 0.94rem/1 var(--font-body);
  cursor: pointer;
}
.menu-btn[aria-expanded="true"] { background: rgba(0, 0, 0, 0.16); border-color: rgba(255, 255, 255, 0.6); }
.menu-bars { display: grid; gap: 4px; }
.menu-bars i { display: block; width: 18px; height: 2px; background: currentColor; }

.nav { display: none; width: 100%; order: 4; }
.nav.is-open { display: block; }
.nav ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.nav a {
  display: block;
  padding: 13px 0;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.nav a:hover,
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.header .header-call { display: none; }

/* 920px and up: the call button joins the bar; the five tabs still sit behind Menu until
   they fit on one row with room beside the wordmark (1180px, where the page width tops out). */
@media (min-width: 920px) {
  .header-in { gap: 8px; min-height: 76px; }
  .wordmark { gap: 7px; }
  .wordmark-name { font-size: 2.75rem; }
  .wordmark-sub { font-size: 0.68rem; letter-spacing: 0.11em; }
  .menu-btn { order: 3; }
  .header .header-call {
    display: inline-flex;
    order: 2;
    flex: none;
    min-height: 44px;
    margin-left: 10px;
    padding: 8px 18px;
    border-radius: 3px;
    font-size: 0.95rem;
    background: #fff;
    color: var(--red);
  }
  .header .header-call:hover { background: var(--cream); color: var(--red-deep); }
  .header .header-call .ico { width: 1.05em; height: 1.05em; }
}

@media (min-width: 1180px) {
  .header-in { flex-wrap: nowrap; }
  .menu-btn { display: none; }
  .nav { display: block; order: 2; width: auto; min-width: 0; }
  .header .header-call { order: 3; }
  .nav ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
    border-top: 0;
  }
  .nav li + li { border-top: 0; }
  .nav a {
    padding: 8px 10px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.9);
    min-height: 0;
    text-underline-offset: 9px;
  }
  .nav a:hover { color: #fff; }
  .nav a[aria-current="page"] { color: #fff; font-weight: 600; }
}


/* Footer wordmark */
.wordmark--footer { margin: 0 0 14px; }
.wordmark--footer .wordmark-name { font-size: 2rem; }
.wordmark--footer .wordmark-sub { font-size: 0.66rem; color: #c9bfb4; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1rem/1.15 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn--lg { min-height: 54px; padding: 12px 26px; font-size: 1.04rem; }
.btn--full { width: 100%; }

.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-deep); color: #fff; }

.btn--cream { background: var(--cream); color: var(--red); }
.btn--cream:hover { background: #fff; color: var(--red-deep); }

.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }

.btn--plain {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--plain:hover { background: var(--tan); color: var(--ink); }
.btn--plain .ico { width: 1.15rem; height: 1.15rem; }

/* ---------- Hero: their own photograph, full bleed, copy over it ---------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--darker);
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(104deg, rgba(20, 14, 12, 0.92) 0%, rgba(20, 14, 12, 0.76) 42%, rgba(20, 14, 12, 0.34) 78%, rgba(20, 14, 12, 0.3) 100%);
}
.hero-in {
  padding-block: clamp(46px, 7vw, 104px);
  max-width: 1180px;
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lede { color: #efe6dc; max-width: 44ch; }

.eyebrow {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.3;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-cta .btn { flex: 0 1 250px; }
@media (min-width: 720px) { .hero-cta .btn { flex: 0 0 auto; } }

.lede { font-size: clamp(1.04rem, 0.98rem + 0.4vw, 1.16rem); color: var(--muted); }

/* ---------- Facts: flush band under the hero, not a floating card ---------- */

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--dark);
  color: #efe6dc;
}
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.facts li {
  padding: 16px var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  min-width: 0;
}
@media (min-width: 760px) {
  .facts li { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); text-align: center; }
  .facts li:first-child { border-left: 0; }
}
.facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: #fff;
}
.facts span { font-size: 0.88rem; color: #bdb2a6; }

/* ---------- Sections ---------- */

.section { padding-block: var(--section-pad); }
.section--tint { background: var(--tan); }
.section--dark { background: var(--darker); }

.section-head { margin-bottom: clamp(18px, 2.4vw, 28px); max-width: 54rem; }
.section-head h2 { margin-bottom: 0.3em; display: flex; align-items: baseline; gap: 12px; overflow-wrap: anywhere; }
.section-head h2::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 3px;
  background: var(--red);
  transform: translateY(-1px);
}
.section-head p { color: var(--muted); font-size: 1.02rem; margin: 0; }
.section--dark .section-head h2 { color: #fff; }
.section--dark .section-head p { color: #bdb2a6; }
.section--dark .section-head h2::before { background: var(--red-lt); }

/* ---------- Doors and openers ---------- */

.doors-in { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .doors-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 1.05fr); } }

.types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
.types li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 13px 16px;
  background: var(--paper);
  border: 1px solid var(--tan-line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  min-width: 0;
}
.types li:hover { background: #fffdf8; border-color: #cdbd9c; border-left-color: var(--red); }
.types h3 { margin: 0; line-height: 1.25; min-width: 0; }
.types a { color: var(--ink); text-decoration: none; }
/* The whole row is the link. */
.types a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.types li:hover a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.types-to {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  background: var(--paper);
  border: 1px solid var(--tan-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.panel p { color: var(--muted); font-size: 0.97rem; }
.panel-mark { width: auto; max-height: 54px; object-fit: contain; align-self: flex-start; }
.panel-mark--wide { max-height: 26px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--red); }
.ticks li {
  padding: 10px 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink);
  min-width: 0;
}
.ticks li + li { border-top: 1px solid var(--tan-line); }
.ticks li:last-child { padding-bottom: 0; }

.opener-shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-top: auto;
}

/* ---------- Repairs ---------- */

.repairs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) { .repairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .repairs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.repairs li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 16px 18px;
  background: var(--cream);
  border-top: 3px solid var(--red);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  min-width: 0;
}
.rn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.24rem;
  color: var(--red);
  flex: none;
}
.repairs h3 { margin: 0; line-height: 1.3; overflow-wrap: anywhere; }

/* ---------- Photo tiles (Residential and Commercial pages) ---------- */

.shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tan);
  box-shadow: var(--shadow);
}
.shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); }
.tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(28, 24, 21, 0.86);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag--after { background: var(--red); }


/* ---------- Quotes ---------- */

.quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  background: #272220;
  border: 1px solid #38312d;
  border-radius: var(--radius);
  min-width: 0;
}
.quote blockquote { margin: 0; flex: 1; }
.quote p { margin: 0; }
.quote blockquote p { color: #ebe2d8; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.quote .who {
  padding-top: 10px;
  border-top: 1px solid #38312d;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--red-lt);
}

.review-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }

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

.section--quote { background: var(--dark); color: #fff; }
.quote-in { display: grid; gap: clamp(24px, 3.6vw, 44px); align-items: stretch; }
.quote-copy { display: flex; flex-direction: column; }
.quote-copy h2 { color: #fff; }
.quote-copy > p { color: #d6cabd; font-size: 1.02rem; }

@media (min-width: 920px) {
  .quote-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Phone, hours and area as labelled rows. Shared by the homepage and the Contact page. */
.details { margin: 20px 0 0; display: grid; }
.details-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  min-width: 0;
  overflow-wrap: anywhere;
}
.details-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.details dt {
  flex: 0 0 5.2rem;
  padding-top: 3px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b6aa9e;
}
.details dd { flex: 1 1 12rem; min-width: 0; margin: 0; font-weight: 600; color: #e9e0d6; }
.details small { display: block; font-weight: 400; font-size: 0.87rem; color: #b6aa9e; }
.details a { color: #fff; display: inline-flex; align-items: center; min-height: 24px; }

.details--light .details-row { border-color: var(--tan-line); }
.details--light dt { color: var(--muted); }
.details--light dd { color: var(--ink); }
.details--light small { color: var(--muted); }
.details--light a { color: var(--red); font-size: 1.15rem; font-weight: 700; }

.pay {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.pay-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b6aa9e;
}
.pay-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  padding: 9px 14px;
  background: var(--paper);
  border-radius: var(--radius-sm);
}
.pay-marks img { height: auto; object-fit: contain; }
@media (max-width: 420px) { .pay-marks { gap: 10px; padding: 9px 10px; } }
/* max-height on a replaced element leaves the flex box and the painted image at
   different widths, which pushed Amex out of the pill. Explicit widths, matched to
   each mark's own ratio so they read at the same optical weight. */
.pay-marks img[alt="Visa"] { width: 74px; }
.pay-marks img[alt="Mastercard"] { width: 44px; }
.pay-marks img[alt="Discover"] { width: 112px; }
.pay-marks img[alt="American Express"] { width: 72px; }

.quote-form {
  align-self: start;
  display: grid;
  gap: 10px;
  padding: clamp(20px, 2.8vw, 28px);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.field { display: grid; gap: 4px; min-width: 0; }
.field-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field label { font-weight: 700; font-size: 0.93rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 13px;
  border: 2px solid var(--tan-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.field textarea { min-height: 70px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--focus); }

.form-status {
  margin: 0;
  font-weight: 700;
  color: var(--red);
  display: none;
}
.form-status--on { display: block; }

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

.footer {
  background: var(--darker);
  color: #c9bfb4;
  padding-block: clamp(28px, 3.6vw, 42px) 20px;
}
.footer-in {
  display: grid;
  gap: 26px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.footer h2 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a1968b;
  margin: 0 0 12px;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr);
}
.footer a { color: #fff; text-decoration: none; }
.footer ul a { display: inline-flex; align-items: center; min-height: 24px; }
.footer a:hover { text-decoration: underline; }
.footer-brand img { width: 208px; margin-bottom: 12px; }
.footer-brand p { font-size: 0.94rem; max-width: 26rem; }
.bbb { display: inline-flex; margin-top: 14px; border-radius: 5px; }
.bbb img { width: 240px; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.84rem;
}
.footer-base p { margin: 0; }
/* Concept disclosure: remove with the CONCEPT NOTE line once the client approves launch. */
.footer-base .concept-note { color: #a1968b; font-size: 0.8125rem; }

/* ---------- Mobile call bar ---------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(253, 249, 240, 0.97);
  border-top: 1px solid var(--tan-line);
  backdrop-filter: blur(6px);
}
.callbar--static { position: static; }
/* 320px: keep "Call Immy's · 608-335-6411" on one line. */
@media (max-width: 359px) {
  .callbar .btn { padding-inline: 12px; gap: 7px; font-size: 0.95rem; white-space: nowrap; }
}

@media (min-width: 920px) {
  .callbar { display: none; }
}

/* =====================================================================
   Inner pages: Residential, Commercial, Maintenance Tips & FAQs, Contact
   ===================================================================== */

.nb { white-space: nowrap; }

/* Links inside their running text: a little vertical padding makes a 24px tap target
   without changing the line height. */
.com-lead a,
.faq-a a,
.cta-copy a { padding-block: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

sup { font-size: 0.6em; line-height: 0; position: relative; top: -0.55em; vertical-align: baseline; }

/* ---------- Page hero: the homepage hero, shorter ---------- */

.hero--page .hero-in { padding-block: clamp(40px, 5.6vw, 80px); }
.hero--page h1 { max-width: 18ch; }
.hero--page .lede { max-width: 50ch; }
.hero--contact .hero-bg { object-position: 50% 70%; }

/* On a phone the intro runs over the bright siding and door; a flatter, darker wash keeps it
   readable. Scoped to Contact so the approved homepage hero stays the same. */
@media (max-width: 719px) {
  .hero--contact::after { background: linear-gradient(180deg, rgba(20, 14, 12, 0.84) 0%, rgba(20, 14, 12, 0.74) 100%); }
}

/* Split hero (Residential, Commercial, Maintenance): the copy on the dark band and their photo
   beside it, never wider than 640px, so a small original is never stretched. Two equal
   columns from 900px; below that the photo sits under the copy. */
.hero--split::after { content: none; }
.hero--split .hero-in {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-fig { position: relative; margin: 0; min-width: 0; max-width: 640px; }
.hero-fig img { display: block; width: 100%; border-radius: var(--radius-sm); }
@media (min-width: 900px) {
  .hero--split .hero-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}

/* ---------- Residential: the ten Clopay collections ---------- */

.collections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
}
/* Phones: one swipe row (the next card peeks in), so their own work photos further down are
   not ten cards away. The page itself never scrolls sideways. */
@media (max-width: 699px) {
  .collections {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 10px;
    scroll-padding-inline: var(--gutter);
  }
  .collections > li { scroll-snap-align: start; }
  .coll-brand { align-self: start; }
}
@media (min-width: 700px) {
  .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coll-brand { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .collections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coll-brand { grid-column: span 2; }
}

.coll,
.coll-brand {
  background: var(--paper);
  border: 1px solid var(--tan-line);
  border-radius: var(--radius);
  min-width: 0;
}
.coll { display: flex; flex-direction: column; padding: 12px 12px 18px; }
/* Their 333x128 thumbnails, never wider than they were published. */
.coll-img { display: block; width: 100%; max-width: 333px; margin: 0 auto 14px; }
.coll h3 {
  margin: 0 6px 6px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}
.coll-series {
  margin: 0 6px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--red);
}
.coll-desc { margin: 0 6px; font-size: 0.94rem; line-height: 1.55; color: var(--muted); }

.coll-brand { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.coll-banner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.coll-banner img { display: block; width: 100%; aspect-ratio: 398 / 200; object-fit: cover; border-radius: var(--radius-sm); }
.coll-brand-foot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px;
  border-top: 1px solid var(--tan-line);
}
.coll-logo { display: block; width: 184px; }

/* ---------- Job photos: pairs, a sequence, a duo ---------- */

.jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
  .job--wide,
  .job--duo { grid-column: 1 / -1; }
}
.job { min-width: 0; }
.job-tiles { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .job--wide .job-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.job--duo .job-tiles { grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 620px) { .job--duo .job-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.job--duo .shot img { aspect-ratio: 16 / 9; }
/* Their label for a whole pair sits on the photos like Before / After; on a phone it may run
   across both tiles rather than wrap inside one. */
.job--tagged { position: relative; }
.job-tag { white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.section--tint .shot { background: #e4dac4; }

/* Homepage: two of their jobs and a link to the rest. */
.work-more { margin: 18px 0 0; }
.work-more a { font-weight: 700; display: inline-flex; align-items: center; min-height: 30px; }

/* ---------- Commercial: intro, the break-away section ---------- */

.com-lead {
  max-width: 62rem;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-size: clamp(1.04rem, 0.98rem + 0.4vw, 1.16rem);
  color: var(--ink);
}
.com-intro { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .com-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.offer { gap: 10px; padding: 22px 22px 24px; }
.offer h2 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); margin: 0; }
.offer-logo { display: block; width: 150px; margin-bottom: 6px; }
.jump { list-style: none; margin: 4px 0 0; padding: 0; border-top: 2px solid var(--red); }
.jump li + li { border-top: 1px solid var(--tan-line); }
.jump a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 0;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(136, 0, 0, 0.45);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.jump a:hover { color: var(--red); text-decoration-color: var(--red); }

.breakaway { gap: 10px; padding: 22px 22px 24px; }
.breakaway-head { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 4px; }
.breakaway-img { display: block; width: 150px; border-radius: var(--radius-sm); order: -1; }
.breakaway h2 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); margin: 0; }
@media (min-width: 560px) {
  .breakaway-head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; }
  .breakaway-img { order: 0; }
}
.breakaway p { color: var(--muted); font-size: 0.97rem; }

/* ---------- Commercial: door families and spec tables ---------- */

.family {
  display: grid;
  gap: 18px 44px;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 28px;
  border-top: 1px solid var(--tan-line);
}
.section-head + .family { border-top: 0; padding-top: 0; }
.family:last-child { padding-bottom: 0; }
@media (min-width: 980px) {
  .family { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.family-copy { min-width: 0; }
.family-copy > p { color: var(--muted); font-size: 0.98rem; }
.family-name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.tagline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.tagline-logo { display: block; width: 160px; }
.uses-lead { margin: 0 0 6px; font-size: 0.9rem; color: var(--muted); }
/* Their "such as" places: a plain two-column list under a red rule, like the tip lists. */
.uses {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  border-top: 2px solid var(--red);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.uses li { padding: 8px 0; min-width: 0; }
.uses li:nth-child(n + 3) { border-top: 1px solid var(--tan-line); }
.uses li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.range { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.product {
  display: inline-block;
  margin: 18px 0 0;
  padding: 7px;
  background: var(--paper);
  border: 1px solid var(--tan-line);
  border-radius: var(--radius-sm);
  max-width: 100%;
}
.product img { display: block; border-radius: 3px; max-width: min(280px, calc(100vw - 52px)); }

.family-spec { min-width: 0; }
.spec-wrap {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--tan-line);
  border-radius: var(--radius-sm);
}
.spec-wrap:focus-visible { outline-offset: 2px; }
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.spec th,
.spec td {
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ece3d1;
}
/* Cells sit at fractional widths, so the half-covered pixel between two dark header cells
   showed as a light seam (a row background is painted cell by cell too). A 1px dark shadow to
   the right of each cell fills that pixel. */
.spec thead th {
  background: var(--dark);
  box-shadow: 1px 0 0 var(--dark);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: bottom;
}
.spec thead th:last-child { white-space: nowrap; }
.spec th:first-child, .spec td:first-child { padding-left: 10px; }
.spec tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}
.spec tbody tr:nth-child(even) { background: #faf6ec; }
.spec tbody tr:last-child > * { border-bottom: 0; }
.spec--prose td { min-width: 12rem; font-variant-numeric: normal; }
@media (max-width: 599px) {
  .spec--six { font-size: 0.78rem; }
  .spec--six th, .spec--six td { padding: 7px 4px; }
  .spec--six th:first-child, .spec--six td:first-child { padding-left: 8px; }
  .spec--six thead th { font-size: 0.6rem; letter-spacing: 0.02em; }
}
/* Very narrow phones (320): the tables run edge to edge and the two widest tighten up, so
   every column, R-value included, shows without a hidden scroll. */
@media (max-width: 379px) {
  .family-spec .spec-wrap { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; }
  .spec--wide { font-size: 0.72rem; }
  .spec--wide th, .spec--wide td { padding: 7px 3px; }
  .spec--wide th:first-child, .spec--wide td:first-child { padding-left: 10px; }
  .spec--wide thead th { font-size: 0.56rem; letter-spacing: 0; }
}
@media (min-width: 600px) {
  .spec { font-size: 0.94rem; }
  .spec th, .spec td { padding: 10px 14px; }
  .spec thead th { font-size: 0.72rem; letter-spacing: 0.06em; }
}
.spec-notes { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.spec-notes p { margin: 0; }

/* ---------- Maintenance tips ---------- */

.tips { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tips { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tips-side { display: grid; gap: var(--grid-gap); min-width: 0; }
.tip {
  min-width: 0;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--tan-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tip h2 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); margin-bottom: 10px; }
.tip-fig { margin: 0 0 16px; }
.tip-head { display: grid; gap: 16px; margin-bottom: 12px; }
.tip-head .tip-fig { margin: 0; }
.tip-head h2 { margin: 0; }
.tip-fig img { display: block; border-radius: var(--radius-sm); }
.tip--row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.tip--row .tip-fig { margin: 0; }
@media (min-width: 560px) {
  .tip--row { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px; }
  .tip--row .tip-fig > img:only-child { width: 210px; }
}
/* Lubrication: the photo beside its heading, like the other two cards; the list runs full
   width below. The photo column gives way (never below the heading's width) on mid widths. */
@media (min-width: 560px) {
  .tip--main .tip-head { grid-template-columns: minmax(0, 300px) minmax(min-content, 1fr); align-items: end; gap: 20px; }
  .tip--main .tip-fig img { width: 100%; }
}
/* Below 560px every tip photo fills the card, lined up with the red rule under it. */
@media (max-width: 559px) {
  .tip-fig img { width: 100%; }
}
/* Hinges & Hardware: two photos at one height, filling the width (the fr values are the two
   images' aspect ratios, 254/500 and 382/489). */
.tip-fig--pair { display: grid; grid-template-columns: 508fr 781fr; gap: 8px; }
.tip-fig--pair img { width: 100%; height: auto; }
@media (min-width: 560px) { .tip--row .tip-fig--pair { width: 250px; } }
.tip-body { min-width: 0; }
.rules { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--red); }
.rules li { padding: 10px 0; font-size: 0.97rem; line-height: 1.55; }
.rules li + li { border-top: 1px solid var(--tan-line); }
.rules li:last-child { padding-bottom: 0; }
.tip-sub { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--muted); }

/* ---------- FAQ accordion ---------- */

.faq-in { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .faq-in { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.5fr); gap: 44px; align-items: start; }
  .faq-side { position: sticky; top: calc(var(--header-h) + 24px); }
}
.faq-side { min-width: 0; }
/* Below 960px: heading, then the questions, then the call card, so the jump from the hero
   lands on the questions and the card's call button is not stacked over the call bar. */
@media (max-width: 959px) {
  .faq-side { display: contents; }
  .faq-side > .section-head { margin-bottom: 0; }
  .faq-list { order: 1; }
  .call-card { order: 2; }
}
.call-card {
  padding: 22px 20px;
  background: var(--dark);
  color: #efe6dc;
  border-radius: var(--radius);
}
.call-card-h {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.call-card p:not(.call-card-h) { color: #d6cabd; font-size: 0.94rem; }
.call-card strong { color: #fff; }
.call-card .btn { margin-top: 18px; }

.faq-list { display: grid; gap: 10px; min-width: 0; }
.faq {
  background: var(--paper);
  border: 1px solid var(--tan-line);
  border-radius: var(--radius-sm);
}
.faq[open] { border-color: #cdbd9c; box-shadow: var(--shadow); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.02rem; line-height: 1.4; overflow-wrap: anywhere; }
/* Open and closed state: a plus that becomes a minus. */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--red), var(--red)) center / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2px 14px no-repeat;
}
.faq[open] summary::after { background: linear-gradient(var(--red), var(--red)) center / 14px 2px no-repeat; }
.faq summary:hover h3 { color: var(--red); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }
.faq-a { padding: 0 18px 18px; }
.faq-a p { margin: 0; padding-top: 12px; border-top: 1px solid var(--tan-line); color: var(--muted); font-size: 0.97rem; }
/* The answers are set a size smaller than the questions, so the link needs a pixel more of
   vertical padding to stay a 24px tap target. */
.faq-a a { font-weight: 700; padding-block: 3px; }

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

.contact-in { display: grid; gap: clamp(26px, 3.6vw, 48px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .contact-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.contact-info { min-width: 0; }
.contact-info .section-head { margin-bottom: 4px; }
.pay--light { margin-top: 0; padding-top: 22px; }
.pay--light .pay-label { color: var(--muted); }
.pay--light .pay-marks { border: 1px solid var(--tan-line); }
.review-links--light .btn--plain { border-color: var(--tan-line); }
.review-links--light .btn--plain:hover { border-color: var(--tan); }
.form-title { font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem); margin: 0 0 6px; }

/* ---------- Closing call to action (Residential, Commercial) ---------- */

.cta-in { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .cta-in { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.cta-copy h2 { color: #fff; }
.cta-copy p { color: #d6cabd; font-size: 1.02rem; max-width: 62ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-actions .btn { flex: 1 1 240px; }
@media (min-width: 960px) { .cta-actions .btn { flex: 0 0 auto; } }

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

.footer a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- No JS ---------- */

.no-js .nav { display: block; width: 100%; }
.no-js .menu-btn { display: none; }

@media (min-width: 1180px) {
  .no-js .nav { width: auto; }
}