/* ===========================================================
   Ad-group landing pages (7 Oct 2026): /chimney-repairs, /flat-roof-repairs,
   /roof-leak-repairs, /gutters-fascias-soffits, /storm-damage-roof-repairs.
   Loaded by those five pages only, after styles.css, so no existing page
   changes. Every rule is scoped to classes that exist nowhere else.

   The funnel: one question per screen, 2x2 square photo tiles for the job,
   then how soon, the area, and name and number. The tiles are real radio
   inputs inside their labels, so the whole thing is one ordinary form that
   posts natively. With JavaScript off (no html.fx) every question shows at
   once as plain radio groups and the form still submits.

   It sits as a stone card on the ink band: the one place on the site built
   that way, so it never reads as one more content section.
   =========================================================== */

.fband{background:var(--ink);position:relative;isolation:isolate}
.fband-in{display:grid;gap:22px;padding-block:12px clamp(2rem,4vw,3.2rem)}

.fcard{--f-ink:#0B1930;--f-body:#2F3D52;--f-slate:#4E5F78;--f-line:#CFC6B5;--f-tile:#FBF9F5;
  background:var(--stone);color:var(--f-ink);border-radius:var(--r);border-top:4px solid var(--gold);
  padding:14px 16px 18px;box-shadow:0 24px 50px rgba(0,0,0,.35);scroll-margin-top:78px;min-width:0}
.fcard h1{color:var(--f-ink);font-size:clamp(1.65rem,1.2rem + 2.2vw,2.6rem);line-height:1.06;margin-bottom:.22em}
.fsub{color:var(--f-body);font-size:.9375rem;line-height:1.45;margin-bottom:12px;max-width:46ch}

/* progress: "Step 2 of 4" and a bar, shown only once the script runs */
.fprog{display:none;align-items:center;gap:12px;margin-bottom:8px;font-size:.875rem;font-weight:600;color:var(--f-slate)}
.fx .fprog{display:flex}
.fprog-bar{flex:1;height:5px;background:var(--f-line);border-radius:3px;overflow:hidden}
.fprog-bar i{display:block;height:100%;width:100%;background:var(--navy);border-radius:3px;
  transform-origin:0 50%;transform:scaleX(var(--p,.25));transition:transform .3s var(--ease)}
.fprog b{color:var(--f-ink)}

.fun fieldset{border:0;min-width:0;margin:0;padding:0}
.fstep+.fstep{margin-top:22px;padding-top:18px;border-top:1px solid var(--f-line)}
.fx .fstep{display:none}
.fx .fstep.is-on{display:block;margin-top:0;padding-top:0;border-top:0}
.fun legend{padding:0;margin:0 0 10px;width:100%}
.flegend{display:block;font-family:'Zilla Slab','Zilla Fallback',Georgia,serif;font-weight:700;
  font-size:1.3rem;line-height:1.15;letter-spacing:-.015em;color:var(--f-ink);outline:0}

/* the job already chosen, on a page that knows it */
.fchosen{display:none;align-items:center;gap:10px;margin:-2px 0 12px;font-size:.9375rem;color:var(--f-body)}
.fx .fchosen.is-on{display:flex}
.fchosen b{color:var(--f-ink)}
.fback,.fchange{font:inherit;font-weight:600;color:var(--f-ink);text-decoration:underline;text-underline-offset:3px;
  min-height:44px;padding:0 4px;display:inline-flex;align-items:center;background:none;border:0;cursor:pointer}
.fback{display:none}
.fx .fback{display:inline-flex}
.fback:hover,.fchange:hover{color:var(--brass)}

/* ---------- tiles ---------- */
.ftiles{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.ftile{position:relative;display:flex;flex-direction:column;cursor:pointer;min-height:48px;
  background:var(--f-tile);border:1px solid var(--f-line);border-radius:var(--r);overflow:hidden;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.ftile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ftile-img{display:block;aspect-ratio:1/1;background:var(--navy-2);overflow:hidden}
.ftile-img img{width:100%;height:100%;object-fit:cover;display:block}
/* the flat roof tile until Charles's photograph arrives: his navy, the words, nothing invented */
.ftile-img--plain{display:grid;place-items:center;background:var(--navy);color:var(--stone);
  padding:12px;text-align:center;font-weight:600;font-size:.9375rem;line-height:1.35;color:var(--stone-2)}
.ftile-lab{flex:1;display:flex;align-items:center;min-height:44px;padding:7px 10px;font-weight:600;font-size:.9375rem;
  line-height:1.22;color:var(--f-ink)}
.ftile:hover{border-color:var(--f-slate)}
.ftile:has(input:checked),.ftile.is-checked{border-color:var(--f-ink);box-shadow:0 0 0 2px var(--f-ink)}
.ftile:has(input:checked) .ftile-lab,.ftile.is-checked .ftile-lab{background:var(--f-ink);color:var(--stone)}
.ftile:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.ftile input:focus-visible+.ftile-img,.ftile input:focus-visible+.ftile-lab{outline:3px solid var(--gold);outline-offset:-3px}
@supports selector(:has(*)){.ftile input:focus-visible+.ftile-img,.ftile input:focus-visible+.ftile-lab{outline:0}}

/* text tiles: how soon, and the area */
.ftiles--text{grid-template-columns:1fr}
.ftiles--text .ftile-lab{min-height:52px;padding:10px 14px;font-size:1rem}
.ftiles--area{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ftiles--area .ftile-lab{min-height:48px;padding:8px 6px;justify-content:center;text-align:center;font-size:.875rem}

/* "Something else": a link-sized choice under the photo tiles */
.fmore{display:inline-flex;align-items:center;gap:8px;margin-top:8px;min-height:44px;cursor:pointer;
  font-weight:600;font-size:.9375rem;color:var(--f-ink)}
.fmore input{width:18px;height:18px;accent-color:var(--navy);margin:0}
.fx .fmore input{position:absolute;opacity:0;width:1px;height:1px}
.fx .fmore span{text-decoration:underline;text-underline-offset:3px}
.fmore:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.fmore:has(input:checked) span{text-decoration-thickness:2px}

.fx .fextra{display:none}
.fx .fextra.is-on{display:block}
.fextra{margin-top:12px}

/* fields on the stone card */
.fcard .field{margin-bottom:12px}
.fcard .field label{color:var(--f-ink);margin-bottom:6px}
.fcard .field label small{color:var(--f-slate);font-weight:500}
.fcard .field input{background:#fff;border:1px solid #A99F8C;color:var(--f-ink);min-height:50px;padding:12px 14px}
.fcard .field input::placeholder{color:#6B778A}
.fcard .field input:focus{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.fcard .field input[type=file]{padding:10px 12px;min-height:0;font-size:.9375rem;cursor:pointer;color:var(--f-body)}
.fcard .field input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--stone);background:var(--navy);
  border:0;border-radius:2px;padding:8px 12px;margin-right:12px;cursor:pointer}
.fcard .field.bad input{border-color:#9A2F1F;box-shadow:0 0 0 2px #9A2F1F}
.ferr{display:none;color:#8A2A1B;font-size:.875rem;font-weight:600;margin-top:8px}
.ferr.is-on{display:block}

.fnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.fnext{display:none}
.fx .fnext.is-on,.fx .fun[data-kbd] .fnext{display:inline-flex}
.fnext{min-height:48px;padding:10px 22px;background:var(--navy);color:var(--stone);font-weight:700;border-radius:2px;
  align-items:center;justify-content:center;border:0;cursor:pointer;margin-left:auto}
.fnext:hover{background:var(--ink)}
.fsend{width:100%;margin-top:4px}
.fnote{font-size:.875rem;color:var(--f-body);margin-top:12px;line-height:1.5}
.fnote a{color:var(--f-ink);text-decoration:underline;text-underline-offset:3px}
.fcard .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.fcard :focus-visible{outline-color:var(--navy)}
.fcard .btn-gold:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ---------- beside the card: the job photograph, or a plain panel ---------- */
.flead{margin:0;min-width:0}
.flead img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--navy-2)}
.flead .bapair{gap:10px}
.flead figcaption{margin-top:12px;font-size:.9375rem;color:var(--stone-2);line-height:1.55;max-width:60ch}
.flead--crop img{aspect-ratio:4/3;object-fit:cover}
.fside{color:var(--stone-2);min-width:0}
.fside p{max-width:52ch}
.fside p+p{margin-top:.8em}
.fside b{color:var(--stone)}
.fcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

@media (min-width:64em){
  .fband-in{grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:clamp(36px,4vw,64px);align-items:start;padding-block:32px 56px}
  .fcard{padding:22px 26px 26px}
  .flead,.fside{padding-top:8px}
  .ftiles--area{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* square tiles held to 216px so the whole first question fits a 900px tall screen */
  .ftiles:not(.ftiles--text):not(.ftiles--area){grid-template-columns:repeat(2,minmax(0,216px))}
  .ftiles--also{max-width:442px}
}

/* ---------- WhatsApp, to the standard set on CWM (30 Sep 2026) ----------
   Meta's own glyph from the brand pack, its black on its green with a 1px ink
   edge (white on that green is 1.98:1 and fails; this is 8.80:1). Never a verb:
   "Send a photo on WhatsApp", or "WhatsApp" on its own as a name. */
:root{--wa:#25d366;--wa-lift:#1fc15c;--wa-press:#1aa850;--wa-ink:#111b21}
.wa-b{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:12px 20px;
  border-radius:2px;border:1px solid var(--wa-ink);background:var(--wa);font-weight:700;font-size:1rem;
  transition:background .2s var(--ease);vertical-align:bottom}
a.wa-b[data-conv],a.wa-b[data-conv]:hover,a.wa-b[data-conv]:focus-visible{color:var(--wa-ink);text-decoration:none}
.wa-b:hover{background:var(--wa-lift)}
.wa-b:active{background:var(--wa-press)}
.wa-b:focus-visible{outline:3px solid var(--wa-ink);outline-offset:2px;box-shadow:0 0 0 6px #fff}
.wa-g{width:1.3rem;height:1.3rem;flex:0 0 auto;fill:var(--wa-ink)}
.bar a.wa-b{flex:1;min-height:54px;border-radius:2px;font-size:1rem;padding:0 8px}
@media (prefers-reduced-motion:reduce){.fprog-bar i,.ftile,.wa-b{transition:none}}

/* before / after tags on the lead pair: plain words, no letter-spaced capitals */
.flead .bapair>div{position:relative}
.ftag{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:2px;font-size:.8125rem;font-weight:700;
  background:rgba(7,20,38,.86);color:var(--stone);border:1px solid var(--hair)}
/* the call and WhatsApp pair beside the card: the phone bar already carries both below 901px */
.fcta{display:none}
@media (min-width:901px){.fcta{display:flex}}
/* a second job photograph inside a section */
.ljob{margin:0;max-width:560px}
.ljob img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:var(--r);background:var(--navy-2)}
.ljob figcaption{margin-top:12px;font-size:.9375rem;color:var(--stone-2);line-height:1.55;max-width:52ch}
/* links inside running text (the site's own a{} rule strips them bare) */
.lprose a,.faq details p a,.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.lprose a:hover,.faq details p a:hover,.prose a:hover{color:var(--gold-lt)}
.ftiles--also{margin-top:10px}
/* the reviews panel's small grey lines measured 4.44:1 on its cream (#5A6B85 on #EDE8DE), under
   the 4.5 AA floor. One shade darker here (5.32:1); /roof-repairs keeps the original until asked. */
.grw__panel{--gr-slate:#4E5F78}
.flead picture,.ljob picture{display:block}
html:not(.js) #reviews[data-sig] .grw__nav{display:none}

/* /roof-repairs in the same layout (7 Oct): the card keeps its own label under the H1, and the
   hero's words, call button and photo sit beside the card (under it on a phone) */
.fcard h2.flegend{margin:12px 0 4px}
.fanchor{display:block;height:0;scroll-margin-top:400px}
.fside .lead{color:var(--stone-2);margin-bottom:1.2em;max-width:46ch}
.fside .fine{color:var(--stone-2);font-weight:600;font-size:.95rem;margin-top:12px;line-height:1.5}
.fside .fine a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.fside .flead{margin-top:24px}