:root {
  --color-primary: #0c1a3c;
  --color-primary-light: #1a2c56;
  --color-primary-dark: #08122b;
  --color-accent: #ffb400;
  --color-accent-dark: #d99600;
  --color-accent2: #ffb400;
  --color-ink: #101728;
  --color-accent-ink: #101728;
  --color-accent2-ink: #101728;
  --hero-scrim-boost: 0.34;
}
/* The engine injects :root{--color-primary / --color-primary-light / --color-primary-dark}
   at the marker above. Everything below references brand color ONLY via those vars.
   No raw brand hex lives in this stylesheet body. */

:root {
  /* Neutral ramp (9 swatches max). --c-ink follows the injected --color-ink
     (near-black neutral) so headings/dark text track the configured ink. */
  --c-ink: var(--color-ink);
  --c-ink-soft: #3d3833;
  --c-slate: #6b635b;
  --c-mute: #938a80;
  --c-line: #e4ddd4;
  --c-cloud: #f4efe8;
  --c-paper: #faf7f2;
  --c-white: #ffffff;
  --c-shadow: rgba(26, 23, 20, 0.12);

  /* Brand- and accent-derived surfaces (built from injected vars, no new hex).
     Accent (e.g. gold) = CTAs, highlights, stars, link-hover. Primary (e.g. navy)
     = dark bands and surfaces. Accent buttons need dark ink text, not white. */
  --c-cta: var(--color-accent);
  --c-cta-hover: var(--color-accent-dark);
  --c-cta-text: var(--color-ink);
  --c-band: var(--color-primary);
  --c-accent-text: var(--color-accent-dark);
  --c-focus: color-mix(in srgb, var(--color-primary) 35%, transparent);

  /* Spacing system: one 8px base unit */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;

  /* Type scale, ratio 1.25 (major third), base 18px */
  --t-base: 1.125rem;   /* 18px */
  --t-sm: 0.9rem;       /* 14.4px */
  --t-md: 1.125rem;
  --t-lg: 1.406rem;     /* 22.5px */
  --t-xl: 1.758rem;     /* 28.1px */
  --t-2xl: 2.197rem;    /* 35.2px */
  --t-3xl: 2.747rem;    /* 43.9px */
  --t-4xl: 3.433rem;    /* 54.9px */

  --lh-body: 1.65;
  --lh-tight: 1.12;

  --container: 1280px;
  --measure: 65ch;

  --radius: 14px;
  --radius-sm: 8px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tr-fast: 180ms var(--ease);
  --tr-mid: 240ms var(--ease);
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-ink);
  line-height: var(--lh-tight);
  font-weight: 600;
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.5rem, 5vw + 1.2rem, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3vw + 0.8rem, 3.05rem); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s-2); }
ul { margin: 0; padding: 0; list-style: none; }

/* Visible keyboard focus on every interactive element. Components that set
   outline:none for a focused look must provide their own :focus-visible ring. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- Primitives */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--s-3);
}
/* Section rhythm: tightened from the old clamp(64px,9vw,128px) -- with sparse
   card content (3-5 items) the old max let sections read as empty gaps rather
   than confident whitespace. A visible top rule on every section (except the
   first, hero-adjacent one) gives adjacent same-background sections a rhythm
   break per design-principles Rule 2, instead of relying on padding alone. */
.section { padding-block: clamp(var(--s-6), 7vw, var(--s-10)); position: relative; }
.section + .section::before,
.section + .section--cloud::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  opacity: 0.55;
}
.section--cloud { background: var(--c-cloud); }
.section--ink { background: var(--c-ink); color: var(--c-cloud); }
.section__head { max-width: 60ch; margin-bottom: var(--s-6); }
.section__head--center { max-width: 640px; margin-inline: auto; text-align: center; }
.section__intro { color: var(--c-slate); max-width: var(--measure); }
.section--ink .section__intro { color: var(--c-line); }
.section--ink h2 { color: var(--c-white); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-bottom: var(--s-2);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.section--ink .kicker { color: var(--color-accent); }

.lead { font-size: var(--t-lg); color: var(--c-slate); max-width: var(--measure); }

a.inline-link {
  color: var(--c-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* ------------------------------------------------------------------ Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 52px;
  padding: 14px var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-md);
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
.btn--primary {
  background: var(--c-cta);
  color: var(--c-cta-text);
  box-shadow: 0 6px 18px var(--c-shadow);
}
.btn--primary:hover { background: var(--c-cta-hover); transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 68px;
}
.nav__brand {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav__links { display: none; gap: var(--s-4); align-items: center; }
.nav__links a {
  text-decoration: none;
  color: var(--c-ink-soft);
  font-weight: 500;
  font-size: var(--t-md);
  transition: color var(--tr-fast);
}
.nav__links a:hover { color: var(--c-accent-text); }
.nav__cta { display: none; }
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
}
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-ink);
  transition: transform var(--tr-fast), opacity var(--tr-fast);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile {
  display: none;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  text-decoration: none;
  color: var(--c-ink-soft);
  font-weight: 500;
  padding: 12px var(--s-1);
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--c-line);
}
.nav__mobile .btn { margin-top: var(--s-2); }

/* ----------------------------------------------------------------- Hero */
.hero {
  position: relative;
  color: var(--c-white);
  background: var(--c-ink);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Base wash (always on) + an extra flat dark layer driven by
     --hero-scrim-boost ("0"-"1", default "0" = no-op) for bright hero photos
     that would otherwise wash out the white headline/bullets. Same knob +
     pattern as modern-roofing's hero__scrim (component-catalog.md). */
  background:
    linear-gradient(
      0deg,
      rgba(20, 16, 13, var(--hero-scrim-boost, 0)) 0%,
      rgba(20, 16, 13, var(--hero-scrim-boost, 0)) 100%
    ),
    linear-gradient(
      105deg,
      rgba(20, 16, 13, 0.92) 0%,
      rgba(20, 16, 13, 0.78) 42%,
      rgba(20, 16, 13, 0.45) 100%
    );
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-6);
  padding-block: clamp(var(--s-8), 10vw, var(--s-16));
  grid-template-columns: 1fr;
  align-items: center;
}
/* Widened from 38ch: the larger H1 scale (Rule 1 elevation) wrapped a
   locality headline like "Solidny dach dla Twojego domu w Przemyślu" to 4
   lines at 38ch, pushing the hero CTA row past the realistic 1440x816 fold
   (design-principles Rule 8). 44ch keeps the same 2-3 line editorial wrap
   the desktop column was designed for. */
.hero__copy { max-width: 44ch; }
.hero h1 { color: var(--c-white); margin-bottom: var(--s-3); }
.hero h1 .hl { color: var(--color-accent); }
.hero__subline {
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--c-line);
  max-width: 46ch;
  margin-bottom: var(--s-3);
}
.hero__bullets { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.hero__bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-weight: 500;
  color: var(--c-white);
}
.hero__bullets svg { flex: none; margin-top: 3px; color: var(--color-accent); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: 600;
  color: var(--c-white);
  text-decoration: none;
}
.hero__phone span { text-decoration: underline; text-underline-offset: 3px; }

/* Offset form panel = the axis-break (Northface angled panel pattern). The
   old accent square sat fully behind the card at z-index:-1 with only a
   ~10px sliver showing -- it read as a rendering glitch, not a deliberate
   move. Now: a full-width accent-colored top border makes the card read as
   "the quote card" at a glance, and a visible offset block sits behind the
   bottom-left corner so the asymmetry is actually legible. */
.hero__form {
  position: relative;
  background: var(--c-white);
  color: var(--c-ink-soft);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
  box-shadow: 0 24px 60px rgba(20, 16, 13, 0.45);
  border-top: 5px solid var(--color-accent);
}
.hero__form::before {
  content: "";
  position: absolute;
  inset: auto auto -14px -14px;
  width: 88px;
  height: 88px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  z-index: -1;
  opacity: 0.9;
}
.hero__form h2 { font-size: var(--t-xl); margin-bottom: var(--s-1); }
.hero__form .form__sub { color: var(--c-slate); font-size: var(--t-md); margin-bottom: var(--s-3); }

/* ----------------------------------------------------------------- Forms */
.field { margin-bottom: var(--s-2); }
.field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink-soft);
  margin-bottom: 6px;
}
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--s-2);
  font: inherit;
  font-size: var(--t-md);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--c-focus);
}
.form__consent { font-size: 0.78rem; color: var(--c-mute); margin: var(--s-2) 0 0; line-height: 1.5; }

/* Inline success message after a form submits (FormSubmit AJAX handler) */
.form-success {
  padding: 24px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-primary);
  color: var(--c-ink);
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: center;
}
.form-success strong { color: var(--color-primary); font-size: 1.2rem; }

/* ----------------------------------------------------------- Trust bar */
.trustbar { background: var(--c-ink); color: var(--c-white); }
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-3);
  padding-block: var(--s-8);
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  color: var(--c-white);
  line-height: 1;
  display: block;
}
.stat__num .stat-suffix { color: var(--color-accent); }
.stat__label { color: var(--c-line); font-size: var(--t-sm); margin-top: var(--s-1); }

/* ------------------------------------------------------- Trust cards */
/* Deliberately NOT the checkmark-circle-in-a-white-box recipe used by
   service-card below -- back-to-back identical card styling was the #1
   "templated" tell on the rendered page (design review, 2026-07-08). Trust
   cards instead read as an editorial numbered list: oversized serif numeral
   in the accent color, a thin top rule instead of a full border/box, so the
   section feels like a distinct typographic moment rather than "cards again". */
.trustcards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) var(--s-5);
}
.trustcard {
  position: relative;
  padding-top: var(--s-4);
  border-top: 3px solid var(--color-accent);
}
.trustcard__mark {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--s-3);
}
.trustcard h3 { margin-bottom: var(--s-1); }
.trustcard p { color: var(--c-slate); margin: 0; max-width: 48ch; }

/* ----------------------------------------------------------- Services */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.service-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--tr-mid), box-shadow var(--tr-mid);
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px var(--c-shadow); }
.service-card__media { aspect-ratio: 3 / 2; background: var(--c-cloud); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--s-3); }
.service-card h3 { margin-bottom: var(--s-1); }
.service-card p { color: var(--c-slate); margin: 0; max-width: 48ch; }
/* Featured first tile: gives the grid a hierarchy instead of a uniform
   wall of identical cards (premium-tells Rule 6 -- asymmetry over centered/
   uniform stacks). Also resolves the awkward dangling lone card that a
   5-item 3-2 grid otherwise leaves in the last row. */
.service-card--feature { grid-column: span 1; }

/* ----------------------------------------------------------- Process */
.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  counter-reset: step;
}
.process-step { position: relative; padding-left: var(--s-8); }
.process-step__num {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s-6);
  height: var(--s-6);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-white);
  background: var(--c-band);
  border-radius: 50%;
}
.process-step h3 { margin-bottom: var(--s-1); }
.process-step p { color: var(--c-slate); margin: 0; max-width: 50ch; }

/* ----------------------------------------------------- Before / after */
.ba { display: grid; gap: var(--s-6); }
.ba__item { max-width: 980px; margin-inline: auto; width: 100%; }
.ba__slider {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  box-shadow: 0 18px 40px var(--c-shadow);
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { z-index: 1; }
.ba__before-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 50%;
  overflow: hidden;
}
.ba__before-wrap .ba__img { width: auto; min-width: 100%; }
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 3px;
  background: var(--c-white);
  transform: translateX(-50%);
}
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(20, 16, 13, 0.4);
}
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.ba__tag {
  position: absolute;
  bottom: var(--s-2);
  z-index: 3;
  padding: 6px 12px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-white);
  background: rgba(20, 16, 13, 0.7);
  border-radius: var(--radius-sm);
}
.ba__tag--before { left: var(--s-2); }
.ba__tag--after { right: var(--s-2); }
.ba__caption { margin-top: var(--s-2); color: var(--c-slate); }
.ba__caption strong { color: var(--c-ink); font-family: var(--font-display); display: block; }

/* ----------------------------------------------------------- Gallery */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
.gallery__item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-mid);
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-3) var(--s-2) var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-white);
  background: linear-gradient(to top, rgba(20, 16, 13, 0.78), transparent);
}

/* ----------------------------------------------------- Testimonials */
.tst__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.tst-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-4);
}
.tst-card__stars { color: var(--color-accent-dark); letter-spacing: 2px; margin-bottom: var(--s-2); }
.tst-card blockquote { margin: 0 0 var(--s-3); font-size: var(--t-md); color: var(--c-ink-soft); max-width: 52ch; }
.tst-card__who { font-weight: 600; color: var(--c-ink); }
.tst-card__where { color: var(--c-mute); font-size: var(--t-sm); }

/* ----------------------------------------------------------- FAQ */
.faq__list { max-width: 820px; }
.faq-item {
  border-bottom: 1px solid var(--c-line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--c-ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon {
  flex: none;
  width: 28px;
  height: 28px;
  position: relative;
  transition: transform var(--tr-fast);
}
.faq-item summary .faq-icon::before,
.faq-item summary .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--c-cta);
  border-radius: 2px;
}
.faq-item summary .faq-icon::before { top: 50%; left: 4px; right: 4px; height: 2px; transform: translateY(-50%); }
.faq-item summary .faq-icon::after { left: 50%; top: 4px; bottom: 4px; width: 2px; transform: translateX(-50%); }
.faq-item[open] summary .faq-icon::after { opacity: 0; }
.faq-item__answer { padding: 0 0 var(--s-3); color: var(--c-slate); max-width: var(--measure); }

/* ----------------------------------------------------------- CTA band */
/* Was a flat centered navy rectangle -- the single most generic-template
   surface on the page (premium-tells Rule 6: "templates center everything").
   Now: a soft radial glow anchored top-right + a large ghost roofline glyph
   bleeding off the left edge break both the flat-color fill and the centered
   axis, while staying a pure CSS/SVG treatment (no extra photo -> no repeat
   risk, per the hard-won photo-repetition lesson). Text moves to a left-
   aligned asymmetric layout instead of the centered stack. */
.ctaband {
  background: var(--c-band);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}
.ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 420px at 88% -10%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    radial-gradient(480px 480px at -8% 118%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.ctaband::after {
  content: "";
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 560px);
  aspect-ratio: 1.6 / 1;
  background:
    linear-gradient(180deg, transparent 0 46%, rgba(255,255,255,0.05) 46% 48%, transparent 48%),
    conic-gradient(from 225deg at 50% 100%, rgba(255,255,255,0.07) 0deg 90deg, transparent 90deg);
  clip-path: polygon(50% 0%, 100% 55%, 100% 100%, 0% 100%, 0% 55%);
  pointer-events: none;
  opacity: 0.8;
}
.ctaband__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-8);
  max-width: 60ch;
  text-align: left;
  justify-items: start;
}
.ctaband h2 { color: var(--c-white); max-width: 16ch; }
.ctaband p { color: rgba(255, 255, 255, 0.88); max-width: 50ch; margin: 0; }
.ctaband .btn--primary { background: var(--c-cta); color: var(--c-cta-text); }
.ctaband .btn--primary:hover { background: var(--c-cta-hover); }

@media (max-width: 639px) {
  .ctaband__inner { text-align: left; justify-items: start; }
}

/* ----------------------------------------------------------- Contact */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.contact__detail { margin-bottom: var(--s-3); }
.contact__detail dt { font-size: var(--t-sm); font-weight: 600; color: var(--c-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.contact__detail dd { margin: 4px 0 0; font-size: var(--t-md); color: var(--c-ink); }
.contact__detail dd a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.contact__areas { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.contact__areas li {
  padding: 6px 12px;
  background: var(--c-cloud);
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-soft);
}
.contact__form {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
}
.contact__form h3 { font-size: var(--t-xl); }

/* ----------------------------------------------------------- Footer */
.footer { background: var(--c-ink); color: var(--c-line); padding-block: var(--s-8) var(--s-5); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--c-white);
  margin-bottom: var(--s-1);
}
.footer__brand + p { max-width: 42ch; }
.footer p, .footer li { color: var(--c-mute); font-size: var(--t-sm); margin: 0 0 6px; }
.footer a { color: var(--c-line); text-decoration: none; }
.footer a:hover { color: var(--c-white); }
.footer h4 { font-family: var(--font-body); color: var(--c-white); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-2); }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-mute);
}

/* ------------------------------------------------- Sticky mobile call */
/* --callbar-h = the callbar's own rendered height (button min-height 52px +
   top/bottom --s-1 padding + the 1px top border), used below to reserve
   matching bottom clearance so the fixed bar never covers page content on
   short viewports (e.g. the hero's last trust bullet at 375x812). Keep this
   in sync with the box model below if the bar's padding/button height ever
   changes. Safe-area is handled separately (added on top, not baked into the
   var) since it varies per device and would over-reserve on non-notched ones. */
:root {
  --callbar-h: calc(52px + (2 * var(--s-1)) + 1px);
}
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom));
  background: rgba(250, 247, 242, 0.96);
  border-top: 1px solid var(--c-line);
  backdrop-filter: blur(8px);
}
.callbar .btn { width: 100%; min-height: 52px; }
/* Reserve bottom clearance INSIDE the hero (not on body -- a fixed-position
   bar overlaps by viewport position, so padding added after the footer does
   nothing for it) so the fixed callbar, visible below 960px, never covers
   the hero's own content on initial load at a short viewport -- e.g. the
   third trust bullet at 375x812. signature-roofing's single-column hero has
   no vh cap (unlike modern-roofing's .hero__media min-height:62vh, which
   keeps its hero short enough that this never triggers there), so its
   content can stack all the way down to where the callbar sits. Undone
   again in the >=960px breakpoint where .callbar is hidden. */
.hero {
  padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom));
}

/* ----------------------------------------------------- Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 380ms var(--ease), transform 380ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ----------------------------------------------------- Breakpoints */
@media (min-width: 640px) {
  .trustbar__grid { grid-template-columns: repeat(4, 1fr); }
  .trustcards__grid { grid-template-columns: repeat(3, 1fr); }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .tst__grid { grid-template-columns: repeat(2, 1fr); }
  /* Tablet step: brand block full-width, the three link/contact columns
     share a row -- avoids the single narrow stacked column (the reported
     "footer looks weird" bug) before the full 4-up desktop layout lands. */
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
  .callbar { display: none; }
  .hero { padding-bottom: 0; }

  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s-8);
    /* Tighter than the mobile clamp (which maxes at --s-16/128px): a realistic
       desktop window (1440x816, no browser chrome) needs the hero's own CTA
       row to clear the fold (design-principles Rule 8). Caps at --s-6/48px
       instead of --s-16/128px, saving ~80px above the copy column. */
    padding-block: clamp(var(--s-5), 4vw, var(--s-6));
  }
  .hero__form { margin-top: var(--s-3); }
  /* Small trims at desktop only: close the last px so .hero__actions clears
     the realistic 1440x816 fold (design-principles Rule 8) without touching
     the mobile stack, which already clears its own (shorter) fold with the
     shared subline/bullets tightening above. */
  .hero h1 { margin-bottom: var(--s-2); }
  .hero__subline { margin-bottom: var(--s-2); }
  .hero__bullets { margin-bottom: var(--s-3); gap: 6px; }

  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .service-card--feature { grid-column: span 2; }
  .service-card--feature .service-card__media { aspect-ratio: 20 / 9; }
  .process__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-8); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .tst__grid { grid-template-columns: repeat(3, 1fr); }
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }

  /* Desktop footer: brand column gets extra width for its longer note text,
     the three link/contact columns stay even -- matches modern-roofing's
     established footer__grid pattern (1.4fr 1fr 1fr 1fr) so the two engine
     templates share one house footer convention. Was 1fr with no desktop
     rule at all, so all 4 blocks stacked in one narrow left column on a wide
     screen (reported as "the footer looks weird"). */
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--s-6);
  }
  .footer__grid > :first-child { grid-column: auto; }
}

@media (min-width: 1200px) {
  .gallery__item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* ----------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  .service-card:hover, .hero__phone, .gallery__item:hover img { transform: none; }
}