/* =============================================================================
   PANEL — londonontariogaragedoor.shop
   -----------------------------------------------------------------------------
   The one site in another city, and the one whose subject is literally a stack
   of horizontal panels. So the page is built in bands: everything is wide, low
   and segmented, and the type is condensed because a garage door is wider than
   it is tall and the display face should agree with it.

   Barlow Condensed over Barlow. Signature device: a segmented rule — four short
   dashes rather than one line — under every eyebrow, reading as door sections.
   ========================================================================== */

:root {
  --font:         'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --radius:    1px;
  --radius-lg: 1px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: 0.002em; text-transform: uppercase; }
h1 { text-wrap: balance; font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.02; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.hero__lede, .prose, .sec-note, .card p { text-transform: none; }

/* The segmented rule, shared by both eyebrows. Four dashes, not a line. */
.hero__eyebrow::before, .sec-eyebrow::before {
  width: 46px; height: 3px; background: none; flex: none;
  background-image: linear-gradient(90deg, currentColor 0 8px, transparent 8px 12px);
  background-size: 12px 3px; background-repeat: repeat-x;
}

/* --- Hero: one wide band, content full width, stats below -------------- */
/* 0.4fr was too narrow for the call card — the phone number broke across two
   lines, which is the one element on the page that must never wrap. */
.hero__grid { grid-template-columns: 1.3fr 0.7fr; align-items: end; padding-block: var(--s-9); }
.call-card, .herostats { min-width: 0; }
.header-call__n, .btn { white-space: nowrap; }
.hero h1 { max-width: 24ch; }
.hero::after {
  background: linear-gradient(180deg, rgba(18,22,44,.52) 0%, rgba(18,22,44,.86) 58%, rgba(18,22,44,.96) 100%);
}
.hero__eyebrow { color: var(--accent); letter-spacing: 0.2em; }
.hero__points li::before { width: 14px; height: 3px; top: .58em; background: var(--accent); }

/* Stat plate: wide, low, hard segment lines. */
.herostats { padding: var(--s-4) var(--s-5); border-top: 3px solid var(--accent); }
.herostats__n { font-family: var(--font-display); font-size: var(--fs-4); letter-spacing: 0; }
.herostats__l { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs--1); }

/* --- Sections: banded with a hard top edge --------------------------- */
.section { padding-block: var(--s-8); }
.section--alt { background: var(--gray-100); border-block: 3px solid var(--line); }
.sec-eyebrow { color: var(--accent-text); letter-spacing: 0.18em; }
.sec-head { margin-bottom: var(--s-6); }

/* --- Cards: wide, low, segmented top rule ---------------------------- */
.card {
  border-radius: 1px; border: 1px solid var(--line); box-shadow: none;
  border-top: 3px solid var(--primary);
  transition: border-top-color .12s ease, background .12s ease;
}
.card--link:hover { border-top-color: var(--accent); background: var(--gray-50); }
.card h3 { font-family: var(--font-display); letter-spacing: 0.01em; }
.grid { gap: var(--s-4); }

/* --- Buttons: wide, condensed, squared ------------------------------- */
.btn {
  border-radius: 1px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; padding-inline: var(--s-6);
}
.chips [class*="chip--"] {
  border-radius: 1px; text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--font-display);
}

/* --- Prose ----------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-8); }
.prose h2::after {
  content: ""; display: block; height: 3px; width: 72px; margin-top: var(--s-3);
  background-image: linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 12px);
  background-size: 12px 3px; background-repeat: repeat-x;
}

@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; align-items: start; } }