/* ==========================================================================
   Tri-Star Seamless Gutters — service page layer

   Loads AFTER styles.css, so everything here out-ranks it at equal
   specificity. That matters for one thing in particular: styles.css ends with
   a `.section--dark` override block, and source order is what decides those.
   Any rule here that sets a colour inside a dark band therefore has to be
   re-stated in the DARK OVERRIDES block at the bottom of this file, not left
   to inherit. Keep that block last.

   Colours and faces come from tokens.css only.
   ========================================================================== */

/* ==========================================================================
   ANCHOR OFFSET
   The header is sticky, so a fragment jump parks the target underneath it.
   Header measures 69px on mobile and 80px from 1080px up; these clear it with
   a little breathing room. Every in-page anchor on this page needs it, which
   is why it is on [id] rather than on the individual sections.
   ========================================================================== */
main [id] { scroll-margin-top: 84px; }
@media (min-width: 1080px) { main [id] { scroll-margin-top: 96px; } }

/* ==========================================================================
   PAGE HERO
   Shorter than the homepage hero and deliberately static: no rotation, no
   form card. A service page's job is to start explaining immediately, so the
   hero is a band rather than a screen.
   ========================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--on-dark);
}
.page-hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Heavier on the left where the copy sits, easing right so the roofline in
   the photo is still legible. Same idea as the homepage hero, flatter because
   this band is half the height and the text block is wider. */
.page-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,.86) 0%, rgba(11,31,58,.78) 60%, rgba(11,31,58,.9) 100%);
}
@media (min-width: 900px) {
  .page-hero__scrim {
    background: linear-gradient(96deg,
      rgba(11,31,58,.93) 0%, rgba(11,31,58,.86) 48%,
      rgba(11,31,58,.62) 78%, rgba(11,31,58,.42) 100%);
  }
}
.page-hero__inner {
  position: relative; z-index: 2;
  padding-block: 32px 38px;
}
@media (min-width: 900px) { .page-hero__inner { padding-block: 54px 60px; } }

.page-hero h1 {
  color: #fff; font-size: 2.1rem; margin: 14px 0 0; max-width: 20ch;
}
@media (min-width: 560px) { .page-hero h1 { font-size: 2.7rem; } }
/* Widened 22ch -> 30ch on 4 Nov 2026 with the wider wrap, which takes these
   H1s from three lines to two. The cap still exists rather than running to the
   container because the scrim is directional: it fades from .93 at the left
   edge to .42 at the right, so text past roughly three quarters of the band
   loses its contrast against the photo. 30ch ends around the halfway mark. */
@media (min-width: 900px) { .page-hero h1 { font-size: 3.4rem; max-width: 30ch; } }

.page-hero__lede {
  color: var(--on-dark-muted); margin: 16px 0 0; max-width: 54ch;
  font-size: 1.0625rem;
}
.page-hero .hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .82rem; letter-spacing: .04em;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--on-dark-muted); }
.breadcrumb li + li::before {
  content: "/"; color: var(--on-dark-eyebrow); opacity: .7;
}
.breadcrumb a { color: var(--on-dark-eyebrow); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }

/* ==========================================================================
   LEAD SPLIT — running copy beside a bordered aside
   ========================================================================== */
.lead-split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .lead-split { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 54px; }
}
.lead-split__copy p { color: var(--slate); margin: 0 0 14px; }
.lead-split__copy p:last-child { margin-bottom: 0; }
.lead-split__copy strong { color: var(--ink); }

/* The one place red is allowed to carry a block rather than an action: a left
   rule, matching the hero slogan's accent rule. */
.note-line {
  border-left: 3px solid var(--red);
  padding-left: 16px;
  margin-top: 20px !important;
}

.signs-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}
.signs-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  line-height: 1.25; color: var(--ink); margin: 0 0 14px;
}
.signs-card ul { list-style: none; margin: 0; padding: 0; }
.signs-card li {
  position: relative; padding-left: 22px; margin-bottom: 11px;
  color: var(--slate); font-size: .95rem; line-height: 1.5;
}
.signs-card li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
}
.signs-card > p {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--slate); font-size: .9rem;
}

/* ==========================================================================
   SPLIT — image one side, copy the other. --reverse flips it on desktop.
   Alternating these down the page is what keeps the rhythm from reading as a
   stack of identical blocks.
   ========================================================================== */
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; }
  .split--reverse .split__media { order: 2; }
}
.split__media { border-radius: var(--radius-card); overflow: hidden; background: var(--off-white); }
.split__media img { width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; display: block; }
.split__copy h2 { font-size: 1.95rem; margin-top: 10px; }
@media (min-width: 720px) { .split__copy h2 { font-size: 2.45rem; } }
.split__copy p { color: var(--slate); margin: 14px 0 0; }
.split__copy strong { color: var(--ink); }

/* ==========================================================================
   FACTORS — tall detail photo beside a numbered list
   Different shape to the homepage's uniform card grid on purpose.
   ========================================================================== */
.factors { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .factors { grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: 54px; }
}
.factors__media { border-radius: var(--radius-card); overflow: hidden; background: var(--off-white); }
.factors__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* Diagram variant of the factors media slot, used on the cleaning page.
   `/gutter-cleaning/` has no usable cleaning photography in the library at all
   (see asset-manifest.md), and the manifest itself says the page should lean on
   a diagram rather than dress an installation photo up as something it is not.
   Swap for a photo if James ever supplies real cleaning imagery, and delete the
   caveat in that section's fineprint at the same time. */
.factors__media--diagram { padding: 24px; display: flex; }
.factors__media--diagram svg {
  display: block; width: 100%; height: auto; max-width: 300px;
  margin: 0 auto; color: var(--navy);
}
.dg-mark circle { fill: var(--red); }
.dg-mark text {
  fill: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 19px; text-anchor: middle;
}

.factors__list { list-style: none; margin: 0; padding: 0; counter-reset: factor; }
.factors__list li {
  counter-increment: factor;
  position: relative; padding-left: 52px;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.factors__list li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.factors__list li::before {
  content: counter(factor, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--red); letter-spacing: .02em;
}
.factors__list h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  line-height: 1.25; color: var(--ink); margin: 0 0 6px;
}
.factors__list p { color: var(--slate); margin: 0; }

.fineprint {
  margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--slate); font-size: .9rem; max-width: 70ch;
}

/* ==========================================================================
   ISSUES — symptom-led cards, used on the repair page

   The intake tells that page to "organize sections around the visible issue",
   and the photo library has no failure imagery at all, so the symptom itself
   has to carry the section instead of a photo of it. Each card leads with a
   small "You can see" label so the heading reads as something the visitor is
   looking at rather than a service name.
   ========================================================================== */
.issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .issues { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.issues > li {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}
.issues__see {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 6px;
}
.issues h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  line-height: 1.25; color: var(--ink); margin: 0 0 10px;
}
.issues > li > p:last-child { color: var(--slate); margin: 0; font-size: .95rem; }

/* ==========================================================================
   PROFILES — drawn gutter cross-sections, not photographs

   Used on the copper page for half-round and Euro box. The photo library has
   no half-round or box job in it, and the intake is explicit that an image
   must never imply a job we did not do. A labelled cross-section is the
   honest way to show a profile we cannot photograph. Replace with real photos
   if James ever supplies them, and delete the caveat in the fineprint if so.

   Strokes use currentColor so the figures inherit whatever the section sets.
   ========================================================================== */
.profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 720px) { .profiles { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.profiles > li {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  text-align: center;
}
.profiles__fig {
  display: block; width: 100%; max-width: 130px; height: auto;
  margin: 0 auto 14px; color: var(--navy);
}
.profiles h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  line-height: 1.25; color: var(--ink); margin: 0 0 8px;
}
.profiles p { color: var(--slate); margin: 0; font-size: .92rem; }

/* A lede paragraph inside .section-head, used where a section needs a caveat
   before its content rather than after it. */
.section-head__lede { color: var(--slate); margin-top: 14px; max-width: 68ch; }
.section-head__lede strong { color: var(--ink); }

/* ==========================================================================
   ESTIMATE BAND — the page's own form, over a photo
   The service dropdown ships preselected to this page's service, which is the
   prefill rule in CLIENT.md. The form has no action: the Basin ID is still
   unissued and the shared JS guard blocks submit and points at the phone.
   ========================================================================== */
.estimate-band {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--on-dark);
  padding-block: var(--sec-y);
}
.estimate-band__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.estimate-band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(11,31,58,.95) 0%, rgba(11,31,58,.9) 50%,
    rgba(11,31,58,.86) 100%);
}
.estimate-band__inner {
  position: relative; z-index: 2;
  display: grid; gap: 28px; align-items: center;
}
@media (min-width: 900px) {
  .estimate-band__inner { grid-template-columns: minmax(0,1fr) 460px; gap: 54px; }
}
.estimate-band__copy h2 { color: #fff; font-size: 2rem; }
@media (min-width: 720px) { .estimate-band__copy h2 { font-size: 2.6rem; } }
.estimate-band__copy p { color: var(--on-dark-muted); margin: 12px 0 0; max-width: 46ch; }
.estimate-band__tel { font-size: 1.05rem; }
.estimate-band__tel a { color: #fff; font-weight: 700; }

.estimate-card--flush { margin-top: 0; transform: none; }

/* ==========================================================================
   DARK OVERRIDES — keep last.
   styles.css ends with its own `.section--dark` block. These rules carry the
   same specificity as the component rules above, so they only win by sitting
   after them. Anything new that puts a component inside a dark band belongs
   here too.
   ========================================================================== */
.section--dark .split__copy p   { color: var(--on-dark-muted); }
.section--dark .split__copy h2  { color: #fff; }
.section--dark .split__copy strong { color: #fff; }
.section--dark .split__media    { background: rgba(255,255,255,.06); }

/* Added 4 Nov when the fascia page put `.lead-split` on a navy band for the
   first time. Without these the body copy rendered --slate on --navy at
   2.61:1, which fails AA badly and is near-invisible. Exactly the failure this
   block exists to prevent. The `.signs-card` beside it needs nothing: it
   paints its own off-white background, so its text stays on a light surface. */
.section--dark .lead-split__copy p      { color: var(--on-dark-muted); }
.section--dark .lead-split__copy strong { color: #fff; }
.section--dark .lead-split__copy a      { color: #fff; }

/* Added 6 Nov when the city pages put the homepage's `.area-grid` on a navy
   band for the first time. Two separate failures, in opposite directions:

   1. `.area-list li` sets `color: var(--ink)`, so the city names rendered
      near-black on navy and were effectively invisible.
   2. `.area-note` paints its own white card, so everything inside it has to go
      back to dark ink. Its `p` already pins `--slate` and survived, but the
      `h3` and the links inherited the band's white and vanished against the
      card. The `.signs-card` next door does not have this problem because it
      states a colour on every child.

   Keep both halves. Fixing only the list leaves an invisible heading. */
.section--dark .area-list li    { color: var(--on-dark); }
.section--dark .area-note h3    { color: var(--ink); }
.section--dark .area-note a     { color: var(--blue); }

/* ==========================================================================
   LEGAL / UTILITY PAGES  (added 6 Nov 2026)
   privacy, terms, thank-you and 404. Long-form prose at a readable measure
   rather than the full content width, which runs to ~130 characters at
   1440px and is tiring to read. Nothing here is used by a content page.
   ========================================================================== */
.legal { max-width: 68ch; }
.legal h2 { margin: 42px 0 12px; }
.legal h3 { margin: 28px 0 8px; font-size: 1.1rem; }
.legal p, .legal li { color: var(--slate); }
.legal ul { margin: 12px 0 12px 20px; }
.legal li { margin: 6px 0; }
.legal__updated { font-size: .92rem; color: var(--slate); margin-top: 4px; }

/* Centred one-message pages: thank-you and 404. */
.notice { max-width: 56ch; margin: 0 auto; text-align: center; }
.notice .hero-actions { justify-content: center; }
.notice__links { margin-top: 36px; }
.notice__links h3 { margin: 30px 0 10px; }
.notice__links ul {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
}

/* Below 620px the wrapped, centred link rows in .notice__links break into
   ragged 1-2-2-1 lines that read as broken rather than deliberate. Stack them
   instead. */
@media (max-width: 620px) {
  .notice__links ul { flex-direction: column; gap: 12px; }
}