/* ============================================================
     ROOFING SKIN over the shared demo system (base.css).
     Only the palette, the Fraunces / Source Sans 3 pairing, the
     heading weights and the squared radius change here; every
     component, grid and breakpoint lives in base.css.
     AA-checked: white on --brand 12.4:1, white on --accent 5.0:1,
     --accent on --paper 5.0:1, --muted on --paper-2 5.8:1.
     ============================================================ */
  :root{
    --brand:#1d3a2f; --brand-deep:#12261e; --brand-soft:#e4ece6;
    --accent:#a85a1e; --accent-deep:#8a4a18; --accent-soft:#f7ede1;
    --paper:#ffffff; --paper-2:#f2f5f1; --ink:#1e2622; --muted:#55605a; --line:#e0e5df;
    --font-display:"Fraunces",Georgia,"Times New Roman",serif;
    --font-text:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --wt-head:600; --wt-h1:700; --radius:3px; --radius-sm:2px;
    /* Extra skin token (beyond base's required set): bright copper for the
       logo stroke on the dark square, readable on the forest ground. */
    --accent-bright:#e89a55;
  }

  /* ---- Skin identity overrides (skin only; base.css is untouched) ----
     Roofing reads "squared and confident", so its buttons keep the squared
     radius rather than base's pill, and the hero band uses the lighter
     forest so it sits a shade above the deep footer. The proof-line star
     follows the shared gold used in the rating chips. ---- */
  .btn{border-radius:var(--radius)}
  .hero-call{border-radius:var(--radius)}
  .magnet input[type=email]{border-radius:var(--radius)}
  .hero.on-dark{background:var(--brand)}
  .star{color:var(--star)}

  /* ---- Brandmark: two-line wordmark with the descriptor line. ---- */
  .wordmark{display:inline-flex;flex-direction:column;line-height:1.05}
  .wordmark small{font-family:var(--font-text);font-weight:600;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px}

  /* ---- Hero lead-form card (bespoke): base.css has no form-on-a-dark-hero
     panel, so roofing's one conversion is defined here. A light, squared,
     softly shadowed card that sits in the right column of the split hero. ---- */
  .lead-card{background:var(--paper);color:var(--ink);border-top:3px solid var(--accent);border-radius:var(--radius);
    padding:var(--space-6);box-shadow:var(--shadow-1);scroll-margin-top:100px}
  .lead-card h2{font-size:var(--step-2);margin-bottom:var(--space-2)}
  .lead-card .sub{color:var(--muted);font-size:var(--step--1);line-height:1.55;margin-bottom:var(--space-5);max-width:none}
  .lead-card form{margin-top:var(--space-5)}
  .lead-card .btn{width:100%;white-space:normal}
  /* Quiet second path out of the card, to the online booking widget (#book). */
  .card-alt{margin-top:var(--space-4);font-size:var(--step--1);font-weight:600;max-width:none}
  .field{margin-bottom:var(--space-4)}
  .field label{display:block;font-weight:600;font-size:var(--step--1);color:var(--brand);margin-bottom:6px}
  .field input,.field textarea{width:100%;border:1px solid #c6cfc6;border-radius:var(--radius);padding:12px 14px;
    font-family:var(--font-text);font-size:16px;color:var(--ink);background:var(--paper)}
  .field input:hover,.field textarea:hover{border-color:var(--accent)}
  .field textarea{min-height:92px;resize:vertical}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .form-note{font-size:var(--step--1);color:var(--muted);margin-top:var(--space-4);line-height:1.5;max-width:none}

  /* ---- Photo strip (bespoke): base.css has no three-up job-photo band;
     roofing's real-work proof lives here since the hero carries the form. ---- */
  .strip{background:var(--paper-2);border-bottom:1px solid var(--line);padding:var(--space-7) 0}
  .strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
  .strip figure{margin:0}
  .frame{border:1px solid var(--line);background:var(--paper);padding:var(--space-2);border-radius:var(--radius)}
  .frame img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
  .strip figcaption{font-size:var(--step--1);color:var(--muted);margin-top:var(--space-2);line-height:1.5}

  /* ---- About prose spacing (base spaces prose only in article/blog). ---- */
  .about-copy p + p{margin-top:var(--space-4)}

  /* ---- Responsive for the skin-only pieces. ---- */
  @media(max-width:900px){ .field-row{grid-template-columns:1fr} }
  @media(max-width:640px){ .strip-grid{grid-template-columns:1fr} .lead-card{padding:var(--space-5)} }

  /* ============================================================
     SUBPAGE ADDITION (not present in the homepage inline skin).
     base.css scopes .cta-row only under .hero and .final. The
     converted subpage compact heroes (.hero-sub / .page-hero) need
     the same horizontal actions row, so it is defined here. Flagged
     in the conversion report.
     ============================================================ */
  .hero-sub .cta-row,.page-hero .cta-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-top:var(--space-5)}