/* =============================================================================
   SLATE — torontoroofing.shop
   -----------------------------------------------------------------------------
   Loaded after main.css and only on a site whose site.php names it, so every
   selector here is an override and nothing in this file can reach the US sites.

   The direction: a roof is structure, and structure is heavy, angular and
   square. Archivo at 800 for display, Source Sans 3 for text. Nothing is
   rounded, the accent is a hard cut rather than a glow, and the section rhythm
   is tight because a roofing page is a list of faults, not an essay.

   Signature device: a diagonal shear across the bottom of the hero, echoing a
   roof plane. Done with clip-path on a pseudo-element rather than on .hero
   itself, because clipping the hero would clip the stat card out of it.
   ========================================================================== */

:root {
  --font:         'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Archivo', 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --radius:    0px;
  --radius-lg: 0px;
}

h1, h2, h3, .hero h1 { letter-spacing: -0.025em; font-weight: 800; }
h1 { text-wrap: balance; }

/* --- Hero: content left, hard-edged, sheared at the base ----------------- */
.hero__grid { grid-template-columns: 1.45fr 0.55fr; align-items: end; padding-block: var(--s-9); }
.hero h1 { max-width: 19ch; text-transform: none; }

/* A flat slab of shadow rather than the gradient wash, so the type sits on a
   plane instead of a haze. Kept as a second layer over main.css's gradient. */
.hero::after {
  background:
    linear-gradient(90deg, rgba(20,26,32,.95) 0%, rgba(20,26,32,.86) 46%, rgba(20,26,32,.30) 78%, rgba(20,26,32,.18) 100%);
}
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; z-index: 2;
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 22%, 100% 100%);
}
.hero__eyebrow { letter-spacing: 0.22em; color: var(--accent); }
.hero__eyebrow::before { width: 44px; height: 3px; background: var(--accent); }
.hero__points li::before { width: 10px; height: 10px; top: .42em; background: var(--accent); }

/* Stat card as a bolted plate: square, no shadow, a thick accent top rule. */
.herostats { border-top: 5px solid var(--accent); padding: var(--s-6) var(--s-5); }
.herostats__n { font-family: var(--font-display); letter-spacing: -0.035em; }

/* --- Sections: tighter, with a rule that spans rather than a dash -------- */
.section { padding-block: var(--s-8); }
.sec-eyebrow { letter-spacing: 0.2em; color: var(--accent-text); }
.sec-eyebrow::before { width: 44px; height: 3px; background: var(--accent); }
.sec-head { border-bottom: 2px solid var(--line); padding-bottom: var(--s-4); margin-bottom: var(--s-6); }

/* --- Cards: square plates with a structural left rule ------------------- */
.card {
  border-radius: 0; border-left: 4px solid var(--primary);
  box-shadow: none; border-top: 1px solid var(--line);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: border-left-color .14s ease, transform .14s ease;
}
.card--link:hover { border-left-color: var(--accent); transform: translateY(-2px); }
.card--tile { border-left-width: 4px; }

/* --- Buttons: square, heavy, no lift ------------------------------------ */
.btn { border-radius: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; }
.btn--primary { box-shadow: none; }
.btn--primary:hover { box-shadow: none; background: var(--accent-dark); }

.chips .chip--now { border-radius: 0; }
.chips [class*="chip--"] { border-radius: 0; }

/* --- Prose: shorter measure, firmer headings ---------------------------- */
.prose { max-width: 66ch; }
.prose h2 { margin-top: var(--s-8); padding-left: var(--s-4); border-left: 4px solid var(--accent); }
.prose h3 { margin-top: var(--s-6); }

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