/* ═══════════════════════════════════════════════════════════════════════════
   AGENT-ROOFING ("Kestrel") — LAYOUT.

   NAMES NO COLOUR AND NO FAMILY. There is no hex value, no rgb(), no hsl()
   and no literal font family anywhere below — every colour and every face is
   read from a token that theme.css (or a swapped palette / typeset) sets. That
   is what lets the same structure ship in five palettes without a fork.

   Three ideas carry the design:

   1. EVERY PHOTOGRAPH IS IN A RATIO BOX. Clients supply their own photos and
      they are mismatched, so the layout never depends on one being good, tall,
      wide or well composed. `.frame` fixes the ratio and object-fit does the
      rest. There is no full-bleed 100vh image with text over the middle, no
      masonry and no parallax — all three need a shoot we cannot assume, and
      the last is named in WCAG 2.3.3's own intent.

   2. TWO PATHS FROM THE FIRST SCREEN. Roofing is a considered purchase with an
      emergency edge, so the phone and the booked inspection sit side by side
      at the top, and a fixed two-item bar keeps both within a thumb's reach on
      every screen too narrow for the masthead to pin.

   3. THE VERTICAL RHYTHM IS DELIBERATELY UNEVEN. Uniform section heights were
      the loudest "this is a template" tell in the layout research, so there
      are four section-padding values and they alternate, and the bands
      alternate ground / tint / accent / ink rather than repeating one card.

   Nothing here animates on scroll and nothing is hidden pending a script: the
   two roofing sites in the market audit that did that rendered as blank white
   pages in a real browser.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Four section rhythms. Nothing uses the same one twice running. */
  --pad-s:clamp(36px,5vw,56px);
  --pad-m:clamp(52px,7vw,84px);
  --pad-l:clamp(68px,9vw,116px);
  --pad-x:clamp(84px,11vw,148px);
  --gut:clamp(28px,4vw,64px);
  --hair:1px;

  /* Two inverted-band colours, DERIVED from the palette rather than picked, so
     they follow whatever theme.css or a swapped palette sets. Under the
     shipped palette they compute to 9.09:1 and 8.06:1 on --ink. */
  --muted-inv:color-mix(in srgb, var(--bg) 72%, var(--ink));
  --accent-tint:color-mix(in srgb, var(--accent) 58%, var(--bg));
}

body{font-family:var(--font-body)}
h1,h2,h3,h4{font-family:var(--font-head)}

/* ── ratio boxes ─────────────────────────────────────────────────────────── */
.frame{position:relative;overflow:hidden;border:var(--hair) solid var(--line)}
.frame--43{aspect-ratio:4/3}
.frame--11{aspect-ratio:1/1}
.frame > img{width:100%;height:100%;object-fit:cover}

/* ── shared furniture from pages.css, tuned ──────────────────────────────── */
.eyebrow{letter-spacing:.1em}
.sec-label{color:var(--muted)}
.btn{letter-spacing:.005em}
.phead h1{font-size:clamp(2.5rem,1.75rem + 3.6vw,4.1rem);letter-spacing:-.03em}
.phead .lede{color:var(--body)}
.phead .eyebrow a{color:var(--accent-dark);
  /* a breadcrumb is navigation, so it gets a thumb target */
  display:inline-flex;align-items:center;min-height:44px}

/* ── utility strip above the masthead ────────────────────────────────────── */
.util{background:var(--surface);color:var(--body);border-bottom:var(--hair) solid var(--line);
  font-size:var(--step--1);line-height:1.4}
.util .wrap{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:0 var(--s5);min-height:44px}
.util p{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin:0;max-width:none}
.util p span{display:inline-flex;align-items:center;gap:var(--s2);padding-block:var(--s2)}
.util b{color:var(--ink);font-weight:600}

/* ── masthead ────────────────────────────────────────────────────────────── */
.top{background:var(--bg);border-bottom:var(--hair) solid var(--line)}
.top .in{max-width:var(--container);margin-inline:auto;padding-inline:var(--s5);
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:var(--s2) var(--s5);padding-block:var(--s3)}
.top .brand{grid-row:1;justify-self:start;color:var(--ink);
  font-family:var(--font-head);font-weight:800;font-size:1.25rem;
  letter-spacing:-.02em;text-decoration:none}
.top .call{grid-row:1;grid-column:2;justify-self:end;white-space:nowrap;
  text-decoration:none;border-bottom:var(--hair) solid var(--line);
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);font-weight:600;font-size:1rem}
.top .call:hover{color:var(--accent-dark)}
.top nav{grid-row:2;grid-column:1/-1;display:flex;flex-wrap:wrap;
  gap:0 var(--s5);margin-inline:calc(var(--s3) * -1)}
.top nav a{text-decoration:none;padding-inline:var(--s3);
  color:var(--body);font-size:.9375rem;font-weight:500}
.top nav a:hover{color:var(--accent-dark)}
.top nav a[aria-current]{color:var(--ink);font-weight:700}
@media (min-width:960px){
  .top .in{grid-template-columns:auto 1fr auto;padding-block:var(--s2);
    gap:0 var(--s6)}
  .top nav{grid-row:1;grid-column:2;justify-content:flex-end;gap:0 var(--s4)}
  .top .call{grid-column:3}
  /* NN/g: a sticky header is only worth it while it stays well under ~10% of
     the viewport. At 960px+ this one is ~62px, so it pins; below that it does
     not, because the fixed action bar already holds both conversion paths. */
  .top,body.inner .top{position:sticky;top:0;z-index:20}
}

/* ── hero ──────────────────────────────────────────────────────────────────
   Copy and photograph as two columns of equal weight, NOT text over a picture.
   A client's own photo can be dark, busy or badly exposed, and text laid over
   it is a contrast failure waiting to happen — it is the one real fault the
   audit found on the best-written site in its whole sample. Here the worst a
   bad photo can do is look like a bad photo. */
.hero{background:var(--bg);padding-block:var(--pad-m) var(--pad-l)}
/* the credential line: trade + geography, above the h1. One line of text
   delivering what the rest of the market spends three badge images on. The
   licence is NOT repeated here — the utility strip already carries it, still
   above the fold, and the same words twice in one screen read as a mistake. */
.hero .cred{display:flex;flex-wrap:wrap;gap:0 var(--s3);max-width:none;
  margin-bottom:var(--s5);color:var(--accent-dark);
  font-size:var(--step--1);letter-spacing:.09em}
/* the separators are punctuation, but they are still text, so they clear AA
   like everything else rather than being greyed to a decorative whisper */
.hero .cred i{color:var(--muted);font-style:normal}
.hero h1{max-width:19ch;margin-bottom:var(--s6);
  font-size:var(--step-6);letter-spacing:-.035em;line-height:1.02}
.hero-in{display:grid;gap:var(--gut)}
.hero-sub{max-width:44ch;margin-bottom:var(--s6);color:var(--body);
  font-size:clamp(1.125rem,1.03rem + 0.42vw,1.375rem);line-height:1.5}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5);max-width:none}
.hero-call{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s3);
  margin:0;max-width:none;color:var(--muted);font-size:var(--step--1)}
.hero-call a{text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;color:var(--ink);font-family:var(--font-head);
  font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.hero-call a:hover{color:var(--accent-dark)}
.hero-hrs{color:var(--muted)}
.hero-fig{margin:0}
/* Three crops, one photograph. On a phone 4:3 reads as a picture; on a tablet
   the same 4:3 across the full width would be a 560px-tall wall, so it becomes
   a 16:9 band; beside the copy it goes back to 4:3. object-fit does the work,
   so a client's own photo needs no variants and no art direction. */
@media (min-width:700px) and (max-width:1079px){
  .hero-fig .frame{aspect-ratio:16/9}
}
@media (min-width:1080px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    gap:var(--s6) clamp(40px,4.5vw,80px);align-items:center}
  /* the credential line gets the full width so it stays on one rule of type */
  .hero .cred{grid-column:1/-1;margin-bottom:0}
  .hero h1{max-width:none}
  .hero-copy{display:flex;flex-direction:column;justify-content:center}
  /* the photograph runs past the bottom of the copy, so the first screen is
     visibly unfinished — the "illusion of completeness" is what suppresses
     scrolling, so it is broken on purpose */
  .hero-fig{margin-bottom:calc(var(--pad-l) * -.5)}
}

/* ── the comparative stat pair ───────────────────────────────────────────── */
.strip{background:var(--surface);border-block:var(--hair) solid var(--line)}
.strip-in{display:grid;gap:var(--s6) var(--gut);padding-block:var(--pad-s)}
@media (min-width:760px){.strip-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat p{margin:0;max-width:38ch}
.stat-f{margin-bottom:var(--s2);font-family:var(--font-num);font-weight:800;
  color:var(--ink);font-size:clamp(2.4rem,1.85rem + 2.7vw,3.6rem);
  line-height:1;letter-spacing:-.04em}
.stat-l{margin-bottom:var(--s2);color:var(--ink);font-weight:600;
  font-size:1.0625rem;line-height:1.35}
.stat-n{color:var(--muted);font-size:var(--step--1);line-height:1.5}

/* ── intro ───────────────────────────────────────────────────────────────── */
.intro{background:var(--bg);padding-block:var(--pad-l)}
.intro-in{display:grid;gap:var(--s6) var(--gut);align-items:start}
.intro h2{max-width:15ch;margin:0;
  font-size:clamp(1.85rem,1.35rem + 2.4vw,3rem);letter-spacing:-.032em}
.intro-body p{color:var(--body);font-size:1.0625rem}
.intro-body p:last-child{margin-bottom:0}
@media (min-width:860px){
  .intro-in{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
}

/* ── the price signal ────────────────────────────────────────────────────────
   0 of 7 roofing homepages in the market audit published any price, and 66% of
   homeowners say they are likelier to call a roofer that does. So this band is
   the loudest colour on the site: it is the one thing here that the twenty-two
   audited competitors do not do at all. */
.price{background:var(--accent);color:var(--on-accent);
  border-block:var(--hair) solid var(--line)}
.price-in{display:grid;gap:var(--s6) var(--gut);padding-block:var(--pad-m);
  align-items:center}
/* no opacity anywhere on text: a faded label is a contrast failure a colour
   audit will not catch, because the computed value still looks correct */
.price .sec-label{color:var(--on-accent)}
.price h2{max-width:20ch;color:var(--on-accent);
  font-size:clamp(1.6rem,1.25rem + 1.65vw,2.5rem);letter-spacing:-.028em}
.price-note{max-width:56ch;margin:0;color:var(--on-accent);
  font-size:1.0625rem;line-height:1.6}
.tag{display:flex;flex-direction:column;gap:var(--s2);margin:0;max-width:none;
  border-left:3px solid var(--accent);padding-left:var(--s5)}
.price .tag{border-left-color:var(--on-accent)}
.tag-l{color:var(--on-accent);font-size:var(--step--1);letter-spacing:.11em;
  text-transform:uppercase;font-weight:600}
.tag-f{font-family:var(--font-num);font-weight:800;color:var(--on-accent);
  font-size:clamp(2.6rem,2rem + 3vw,4rem);line-height:1;letter-spacing:-.04em}
@media (min-width:820px){
  .price-in{grid-template-columns:minmax(0,1fr) auto}
  .tag{border-left-width:4px;padding-left:var(--s6)}
}

/* ── services ──────────────────────────────────────────────────────────────
   Four cards, but not four identical cards: the two that carry a full page of
   their own sit on the tint and list what is in them, the two that do not stay
   plain and short. The row heights come out uneven because the content is
   uneven, which is the point. */
.svcs{background:var(--bg);padding-block:var(--pad-l)}
.svc-grid{display:grid;gap:var(--hair);background:var(--line);
  border:var(--hair) solid var(--line)}
@media (min-width:760px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svc{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  padding:var(--s6) var(--s5);text-decoration:none;background:var(--bg)}
.svc--major{background:var(--surface)}
.svc:hover{background:var(--card)}
@media (min-width:760px){.svc{padding:var(--s7) var(--s6)}}
.svc-n{color:var(--muted);font-size:var(--step--1);letter-spacing:.12em;font-weight:600}
.svc h3{margin:0;color:var(--ink);
  font-size:clamp(1.35rem,1.15rem + .95vw,1.95rem);letter-spacing:-.028em}
.svc p{margin:0;max-width:46ch;color:var(--body);font-size:1rem}
.svc-pts{margin:var(--s3) 0 0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:var(--s2)}
.svc-pts li{padding-left:var(--s5);position:relative;
  color:var(--ink);font-size:.9375rem;font-weight:500}
.svc-pts li::before{content:'';position:absolute;left:0;top:.62em;
  width:10px;border-top:2px solid var(--accent)}
.svc .go{margin-top:auto;padding-top:var(--s5);display:inline-flex;
  align-items:center;min-height:44px;color:var(--accent-dark);
  font-weight:700;font-size:.9375rem}
.svc:hover .go{text-decoration:underline}

/* ── the numbered process band — the centrepiece ────────────────────────────
   The single most repeated component across the fifteen well-built trades
   sites, and the only band here that inverts: for high-anxiety work the
   process IS the reassurance, so it gets the weight of the page. */
.proc{background:var(--ink);color:var(--muted-inv);padding-block:var(--pad-x)}
.proc .sec-label{color:var(--muted-inv)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s7) var(--gut)}
@media (min-width:680px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{padding-top:var(--s5);border-top:2px solid var(--accent-tint)}
.step-n{display:block;margin-bottom:var(--s4);font-family:var(--font-num);
  font-weight:800;color:var(--accent-tint);
  font-size:clamp(1.75rem,1.4rem + 1.5vw,2.5rem);line-height:1;letter-spacing:-.03em}
.step h2{margin:0 0 var(--s3);max-width:14ch}
.proc .step h2{color:var(--bg);
  font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem);letter-spacing:-.025em}
.step p{margin:0;max-width:34ch;color:var(--muted-inv);font-size:1rem;line-height:1.55}

/* ── work ────────────────────────────────────────────────────────────────── */
.work{background:var(--bg);padding-block:var(--pad-l)}
.jobs{display:grid;gap:var(--s7) var(--gut)}
@media (min-width:700px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.jobs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.job{margin:0}
.job figcaption{padding-top:var(--s4)}
.job h2,.job h3{margin:0 0 var(--s2);color:var(--ink);
  font-size:clamp(1.2rem,1.05rem + .65vw,1.55rem);letter-spacing:-.025em}
.job p{margin:0;max-width:40ch;color:var(--body);font-size:.9375rem}
.job-m{margin-bottom:var(--s3)!important;color:var(--accent-dark);
  font-size:var(--step--1);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.more{margin:var(--s7) 0 0;max-width:none}
.more a{text-decoration:none;color:var(--accent-dark);font-weight:700;font-size:1rem}
.more a:hover{text-decoration:underline}

/* ── pull quote ──────────────────────────────────────────────────────────── */
.pull{background:var(--surface);padding-block:var(--pad-m)}
.pull-in{display:grid;gap:var(--s5) var(--gut);align-items:start}
.pull blockquote{margin:0;max-width:32ch;
  border-top:3px solid var(--accent);padding-top:var(--s5)}
.pull blockquote p{margin:0 0 var(--s5);max-width:none;color:var(--ink);
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.35rem,1.1rem + 1.15vw,2.05rem);line-height:1.25;letter-spacing:-.028em}
.pull cite{display:block;color:var(--muted);font-style:normal;
  font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
@media (min-width:860px){
  .pull-in{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
  .pull .sec-label{margin-bottom:0}
}

/* ── areas ───────────────────────────────────────────────────────────────── */
.area-sec{background:var(--bg);padding-block:var(--pad-m)}
.area-sec--page{padding-block:var(--pad-l)}
.area-in{display:grid;gap:var(--s7) var(--gut);align-items:start}
@media (min-width:900px){.area-in{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
.area-head h2{margin:0 0 var(--s4);
  font-size:clamp(1.6rem,1.3rem + 1.45vw,2.4rem);letter-spacing:-.03em}
.areas{display:grid;gap:var(--s6) var(--gut)}
@media (min-width:560px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.area h3{margin:0 0 var(--s3);padding-bottom:var(--s3);
  border-bottom:var(--hair) solid var(--line);color:var(--ink);
  font-family:var(--font-body);font-size:.875rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.area ul{margin:0;padding:0;list-style:none}
.area li{padding-block:var(--s1);color:var(--body);font-size:1.0625rem}
.area-sec--page .area li{font-size:1.25rem}

/* ── faq ───────────────────────────────────────────────────────────────────
   Every answer is open. An accordion is right for a long support index and
   wrong here: Baymard's repeated finding is that collapsed content is
   under-read, and these four answers are the objections that stop a call. */
.faq-sec{background:var(--surface);padding-block:var(--pad-l)}
.faq-in{display:grid;gap:var(--s6) var(--gut);align-items:start}
@media (min-width:900px){.faq-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}}
.faq-in--wide{display:block}
.faq-head h2{margin:0 0 var(--s4);max-width:14ch;
  font-size:clamp(1.6rem,1.3rem + 1.45vw,2.4rem);letter-spacing:-.03em}
.qa{margin:0;border-top:var(--hair) solid var(--line)}
.qa-i{padding-block:var(--s5);border-bottom:var(--hair) solid var(--line)}
.qa dt{margin-bottom:var(--s3);color:var(--ink);font-family:var(--font-head);
  font-weight:700;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  letter-spacing:-.02em;line-height:1.3}
.qa dd{margin:0;max-width:62ch;color:var(--body);font-size:1rem}
@media (min-width:900px){
  .faq-in--wide .qa{columns:2;column-gap:var(--gut);border-top:0}
  .faq-in--wide .qa-i{break-inside:avoid;border-top:var(--hair) solid var(--line);
    border-bottom:0;margin-bottom:var(--s5)}
}

/* ── legal notes ───────────────────────────────────────────────────────────
   Body size, in flow, inside the page they qualify. Florida 4-7.12(d) forbids
   a required disclaimer in fine print or a footnote and New York 7.4 wants a
   certification disclaimer LARGER than the claim, so nothing here shrinks. */
.notes{background:var(--bg);padding-block:var(--pad-m)}
.note{max-width:64ch;border-top:2px solid var(--accent);padding-top:var(--s5)}
.note + .note{margin-top:var(--s6)}
.note h2{margin:0 0 var(--s3);color:var(--ink);font-size:1.25rem;letter-spacing:-.02em}
.note p{margin:0;color:var(--body);font-size:var(--step-0)}

/* ── closing call to action ──────────────────────────────────────────────── */
.close{background:var(--surface);padding-block:var(--pad-x)}
.close-in{display:grid;gap:var(--s7) var(--gut);align-items:start}
@media (min-width:900px){.close-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.close h2{margin:0 0 var(--s4);max-width:16ch;
  font-size:clamp(1.85rem,1.4rem + 2.2vw,2.9rem);letter-spacing:-.032em}
.close-lede{max-width:44ch;margin-bottom:var(--s6);color:var(--body);font-size:1.125rem}
.close-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  margin:0;max-width:none}
.close-cta .tel-lg{text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;color:var(--ink);font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);letter-spacing:-.028em}
.close-cta .tel-lg:hover{color:var(--accent-dark)}
.next-num{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.next-num li{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--s3);
  padding-block:var(--s4);border-top:var(--hair) solid var(--line);
  color:var(--body);font-size:1rem}
.next-num li:last-child{border-bottom:var(--hair) solid var(--line)}
.next-num li span{color:var(--accent-dark);font-family:var(--font-num);
  font-weight:800;font-size:1rem;letter-spacing:.02em}

/* ── services hub and detail ─────────────────────────────────────────────── */
.hub,.detail,.ppl,.ct{background:var(--bg)}
.hub{padding-block:var(--pad-m) var(--pad-l)}
.detail{padding-block:var(--pad-m) var(--pad-l)}
.detail-in{display:grid;gap:var(--s7) var(--gut);align-items:start}
@media (min-width:900px){.detail-in{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr)}}
.detail-body p{max-width:64ch;color:var(--body);font-size:1.0625rem}
.pts{margin:var(--s7) 0 0;border-top:var(--hair) solid var(--line)}
.pt{padding-block:var(--s5);border-bottom:var(--hair) solid var(--line)}
.pt dt{margin-bottom:var(--s2);color:var(--ink);font-family:var(--font-head);
  font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.pt dd{margin:0;max-width:60ch;color:var(--body);font-size:1rem}
.detail-side{display:flex;flex-direction:column;gap:var(--s6)}
.side-card{border:var(--hair) solid var(--line);padding:var(--s6) var(--s5);
  background:var(--surface)}
.side-card .tag{border-left:0;padding-left:0;margin-bottom:var(--s5)}
.side-card .tag-l{color:var(--muted)}
.side-card .tag-f{color:var(--ink);font-size:clamp(2.2rem,1.8rem + 1.9vw,3rem)}
.side-cta{margin:0 0 var(--s3)}
.side-cta .btn{width:100%}
.side-tel{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);
  color:var(--muted);font-size:.9375rem}
/* a phone number is a thumb target even when it sits inside a sentence */
.side-tel a{text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;color:var(--ink);font-weight:700}
.side-tel a:hover{color:var(--accent-dark)}
.side-list h2{margin:0 0 var(--s3);padding-bottom:var(--s3);
  border-bottom:var(--hair) solid var(--line);color:var(--ink);
  font-family:var(--font-body);font-size:.8125rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.side-list ul{margin:0;padding:0;list-style:none}
.side-list a{text-decoration:none;color:var(--body);font-size:1rem}
.side-list a:hover{color:var(--accent-dark);text-decoration:underline}

/* ── people (rendered only when the content carries it) ──────────────────── */
.ppl{padding-block:var(--pad-m) var(--pad-l)}
.ppl-grid{display:grid;gap:var(--s7) var(--gut)}
@media (min-width:760px){.ppl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.ppl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person{border-top:2px solid var(--accent);padding-top:var(--s5)}
.person h2{margin:0 0 var(--s2);font-size:1.5rem;letter-spacing:-.025em}
.person .role{margin:0 0 var(--s4);color:var(--accent-dark);
  font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.person ul{margin:0;padding-left:1.1em}
.person li{color:var(--body);font-size:1rem}

/* ── contact ─────────────────────────────────────────────────────────────── */
.ct{padding-block:var(--pad-m) var(--pad-l)}
.ct .submit{margin:var(--s6) 0 var(--s5);max-width:none}
.ct .submit .btn{width:100%}
@media (min-width:520px){.ct .submit .btn{width:auto;min-width:14rem}}
/* Baymard: mark BOTH required and optional fields, never only one of them */
.opt{color:var(--muted);font-weight:400}
.aside h2{font-size:1.5rem;letter-spacing:-.025em}
.fineprint{color:var(--muted)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-foot{background:var(--ink);color:var(--muted-inv);
  border-top:var(--hair) solid var(--ink);padding-block:var(--pad-m)}
.foot-top{display:grid;gap:var(--s7) var(--gut)}
@media (min-width:820px){.foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}}
.fmark{margin:0 0 var(--s2);color:var(--bg);font-family:var(--font-head);
  font-weight:800;font-size:1.5rem;letter-spacing:-.028em}
.ftag{margin:0 0 var(--s4);max-width:34ch;color:var(--muted-inv);font-size:.9375rem}
.fcall{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  color:var(--bg);font-family:var(--font-head);font-weight:800;
  font-size:1.5rem;letter-spacing:-.025em}
.fcall:hover{color:var(--accent-tint)}
.fnav{display:grid;gap:var(--s6) var(--gut)}
@media (min-width:560px){.fnav{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fcol h2{margin:0 0 var(--s3);color:var(--bg);font-family:var(--font-body);
  font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.fcol ul{margin:0;padding:0;list-style:none}
.fcol a{text-decoration:none;color:var(--muted-inv);font-size:1rem}
.fcol a:hover{color:var(--bg);text-decoration:underline}
/* minmax(0,1fr), not 1fr: a licence number is one unbreakable token and a
   plain 1fr track keeps its min-content floor, which overflowed the page by
   1px at exactly 820px — the width where this grid first becomes narrow. */
.hrs{margin:var(--s4) 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s1) var(--s3)}
.hrs dt,.hrs dd{margin:0;overflow-wrap:anywhere;font-size:.875rem}
.hrs dt{color:var(--muted-inv)}
.hrs dd{color:var(--bg)}
.foot-end{margin-top:var(--pad-s);padding-top:var(--s5);
  border-top:var(--hair) solid var(--muted)}
.fnap{margin:0 0 var(--s2);max-width:none;color:var(--bg);
  font-size:.9375rem;font-weight:600}
.fnote{margin:0;max-width:72ch;color:var(--muted-inv);font-size:.9375rem;line-height:1.6}
.fnote a{color:var(--accent-tint)}
.site-foot :focus-visible{outline-color:var(--accent-tint)}

/* ── the fixed action bar ──────────────────────────────────────────────────
   Two paths, always in the thumb zone, and the only fixed layer on the site.
   It was the best-measuring conversion mechanic in the whole market audit, and
   unlike the chat bubbles and side tabs it occludes nothing. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;
  grid-template-columns:auto 1fr;align-items:stretch;background:var(--ink);
  border-top:var(--hair) solid var(--ink)}
.bar a{display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:2px;min-height:56px;padding:var(--s2) var(--s4);
  text-decoration:none;text-align:center}
.bar-a{border-right:var(--hair) solid var(--muted);color:var(--bg)}
.bar-a span{color:var(--muted-inv);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600}
.bar-a strong{color:var(--bg);font-family:var(--font-head);font-weight:800;
  font-size:1.0625rem;letter-spacing:-.02em}
.bar-b{background:var(--accent);color:var(--on-accent);font-weight:700;font-size:1rem}
.bar :focus-visible{outline-color:var(--accent-tint)}
/* It hides exactly where the masthead starts pinning (960px), so there is
   never a width at which neither the header nor the bar is on screen. */
@media (min-width:960px){.bar{display:none}}
@media (max-width:959px){body{padding-bottom:60px}}