/* Elder Home Finders — "Front Porch" design system
   Owned by us. No Flatsome, no WordPress theme, no inline content colours.
   Every colour is a token; content HTML carries structure only. */

:root{
  --ink:#3A2A24; --ink-2:#6B564C; --ink-3:#8C7A70;
  --clay:#B65B3C; --clay-d:#94472C;
  --sage:#7A8B6F; --sage-d:#5E6F54;
  --cream:#FBF6EE; --cream-2:#F3EADC; --paper:#FFFFFF;
  --line:rgba(58,42,36,.15); --line-2:rgba(58,42,36,.28);
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:'Karla',system-ui,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Literata',Georgia,serif;font-weight:600;margin:0;
  letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
img{max-width:100%}
a{color:var(--clay-d);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase}
.eyebrow{color:var(--clay);font-weight:500}
.eyebrow a{color:var(--clay)}
.muted{color:var(--ink-2)}

/* ---- logo mark: roofline over a base ---- */
.mark{position:relative;flex:none;display:inline-block}
.mark i{position:absolute;left:0;top:0;width:0;height:0;border-style:solid;
  border-color:transparent;border-bottom-color:var(--clay)}
.mark u{position:absolute;background:var(--ink);border-radius:0 0 3px 3px}
.m-lg{width:44px;height:41px}
.m-lg i{border-left-width:22px;border-right-width:22px;border-bottom-width:20px}
.m-lg u{left:6px;top:20px;width:32px;height:21px}
.m-sm{width:32px;height:30px}
.m-sm i{border-left-width:16px;border-right-width:16px;border-bottom-width:15px}
.m-sm u{left:5px;top:15px;width:22px;height:15px}
.mark-img{display:block;flex:none}
.lock{display:flex;align-items:center;gap:12px;text-decoration:none}
.lock:hover{text-decoration:none}
.lock-n{font-family:'Literata',Georgia,serif;font-weight:600;font-size:20px;
  line-height:1.1;color:var(--ink)}

/* ---- buttons ---- */
.btn,.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:100px;padding:15px 28px;font-weight:700;font-size:17px;min-height:52px;
  border:2px solid transparent}
.btn{background:var(--clay);color:#fff;border-color:var(--clay)}
.btn:hover{background:var(--clay-d);border-color:var(--clay-d);color:#fff;text-decoration:none}
.btn-o{color:var(--ink);border-color:var(--line-2)}
.btn-o:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.btn-sm{padding:11px 20px;font-size:15px;min-height:44px}
.cta-row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ---- utility bar (every page) ---- */
.util{background:var(--ink);color:var(--cream);font-size:13px}
.util-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.util-slogan{font-family:'Literata',Georgia,serif;font-style:italic;font-size:14.5px;
  color:var(--cream)}
.util-c{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.08em}
.util a{color:var(--cream)}
.util a:hover{color:#fff}
.util-sep{margin:0 8px;opacity:.5}
@media (max-width:760px){
  .util-in{justify-content:center;text-align:center}
  .util-slogan{font-size:13.5px}
}

/* ---- header ---- */
.hdr{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding-top:16px;padding-bottom:16px}
.nav{display:flex;align-items:center;gap:24px;font-weight:500;font-size:16px}
.nav a{color:var(--ink)}
.hdr-cta{display:inline-flex;align-items:center;justify-content:center;
  background:var(--clay);color:#fff;border:2px solid var(--clay);border-radius:100px;
  padding:12px 24px;font-weight:700;font-size:16px;white-space:nowrap;min-height:46px}
.hdr-cta:hover{background:var(--clay-d);border-color:var(--clay-d);color:#fff;text-decoration:none}
@media (max-width:760px){.hdr-cta{padding:10px 16px;font-size:14.5px}}
.tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;text-decoration:none}
.tel:hover{text-decoration:none}
.tel .mono{color:var(--ink-2)}
.tel b{font-family:'Literata',serif;font-size:22px;color:var(--clay-d);font-weight:700}

/* ---- breadcrumbs ---- */
.crumbs{background:var(--cream-2);border-bottom:1px solid var(--line);
  padding:11px 0;font-size:14.5px}
.crumbs .sep{margin:0 9px;color:var(--ink-3)}
.crumbs span[aria-current]{color:var(--ink-2)}

/* ---- hub hero ---- */
.hub-hero{background:var(--cream);border-bottom:1px solid var(--line)}
.hub-hero-g{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;
  align-items:center;padding:60px 0 64px}
.hub-hero h1{font-size:39px;line-height:1.07;margin-top:14px}
.hub-hero .lede{font-size:19px;line-height:1.6;color:var(--ink-2);margin-top:18px;max-width:46ch}
.hero-img{border-radius:6px;overflow:hidden;aspect-ratio:16/10}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- layout: sidebar + main ---- */
.layout{display:grid;grid-template-columns:296px 1fr;gap:48px;
  padding-top:52px;padding-bottom:64px;align-items:start}
.layout.narrow{grid-template-columns:1fr;max-width:840px}
.main{min-width:0}
.main h1{font-size:33px;line-height:1.1;margin:10px 0 0}

/* ---- spoke sidebar (on hub AND every spoke) ---- */
.side{position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;overflow:hidden}
.side-h{padding:15px 20px;border-bottom:1px solid var(--line);background:var(--cream-2);
  font-family:'Literata',serif;font-weight:600;font-size:17px}
.side-h a{color:var(--ink)}
.side-l{list-style:none;margin:0;padding:8px 0;max-height:52vh;overflow-y:auto}
.side-l li a{display:block;padding:8px 20px;font-size:15px;color:var(--ink-2);line-height:1.4}
.side-l li a:hover{background:var(--cream-2);color:var(--ink);text-decoration:none}
.side-l li.on a{color:var(--clay-d);font-weight:700;
  box-shadow:inset 3px 0 0 var(--clay);background:var(--cream-2)}
.side-cta{padding:18px 20px;border-top:1px solid var(--line);background:var(--cream)}
.side-cta p{font-size:15px;color:var(--ink-2);margin-bottom:11px}

/* ---- answer-first lead + byline ---- */
.answer{font-size:18.5px;line-height:1.58;color:var(--ink);margin-top:18px;
  padding-left:18px;border-left:3px solid var(--sage)}
.byline{display:flex;align-items:center;gap:13px;margin-top:24px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.by-av{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 22%}
.byline b{display:block;font-size:15.5px}
.byline span{font-size:14px;color:var(--ink-2)}

/* ---- TOC ---- */
.toc{margin:28px 0;padding:20px 24px;background:var(--paper);
  border:1px solid var(--line);border-radius:6px}
.toc-h{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sage-d);margin-bottom:11px}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.toc a{font-size:15.5px}
.toc a.on{font-weight:700;color:var(--ink)}

/* ---- prose: content carries STRUCTURE, this file carries colour ---- */
.prose{margin-top:26px}
.prose h2{font-size:23px;line-height:1.2;margin:40px 0 12px;scroll-margin-top:96px}
.prose h3{font-size:18.5px;line-height:1.28;margin:30px 0 10px;scroll-margin-top:96px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 19px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose img{border-radius:5px;margin:8px 0 20px;height:auto}
.prose blockquote{margin:22px 0;padding:16px 22px;background:var(--cream-2);
  border-left:3px solid var(--clay);border-radius:0 5px 5px 0;
  font-family:'Literata',serif;font-size:18px}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:16px;
  background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.prose th,.prose td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
.prose thead th{background:var(--cream-2);font-family:'Karla',sans-serif;font-weight:700;
  font-size:14.5px}
.prose tr:last-child td{border-bottom:0}

/* ---- spoke grid on the hub ---- */
.spokes{margin-top:52px}
.spokes h2{font-size:22px;margin-bottom:20px;scroll-margin-top:96px}
.sp-g{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.sp-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:22px 24px;display:flex;flex-direction:column;gap:9px}
.sp-card:hover{border-color:var(--clay);text-decoration:none}
.sp-card h3{font-size:16.5px;line-height:1.32;color:var(--ink)}
.sp-card .more{font-size:14.5px;font-weight:600;color:var(--clay-d);margin-top:auto}

/* ---- fan-out ---- */
.fanout{margin-top:52px;padding:32px 34px;background:var(--sage);
  border-radius:6px;color:#fff}
.fanout h2{color:#fff;font-size:21px;margin-bottom:20px;scroll-margin-top:96px}
.fo-g{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.fo{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  border-radius:5px;padding:16px 17px}
.fo-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:7px}
.fo p{font-size:15.5px;line-height:1.48;color:#fff}
.fo-note{margin-top:18px;font-size:15.5px;color:rgba(255,255,255,.9)}
.fo-note a{color:#fff;text-decoration:underline}

/* ---- related ---- */
.related{margin-top:52px}
.related h2{font-size:21px;margin-bottom:18px;scroll-margin-top:96px}
.rel-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel-c{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.rel-c:hover{border-color:var(--clay);text-decoration:none}
.rel-c h3{font-size:16.5px;line-height:1.35;color:var(--ink)}
.up{display:inline-block;margin-top:18px;font-weight:600}

/* ---- NAP ---- */
.nap-s{padding:0 0 64px}
.nap{display:grid;grid-template-columns:1.15fr .85fr;background:var(--paper);
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.nap-b{padding:34px 34px}
.nap-b h3{font-size:20px;margin:10px 0 14px}
.nap address{font-style:normal;line-height:1.7}
.nap .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-d);margin:18px 0 5px}
.nap .big{font-weight:700;font-size:19px}
.nap-map{position:relative;min-height:260px;
  background:repeating-linear-gradient(135deg,#DDE4D6 0 12px,#E7EDE1 12px 24px)}
.ph-l{position:absolute;left:13px;bottom:12px;font-family:'JetBrains Mono',monospace;
  font-size:10px;color:#fff;background:rgba(58,42,36,.72);padding:5px 9px;border-radius:3px}

/* ---- contact card ---- */
.bobbie-card{display:grid;grid-template-columns:240px 1fr;gap:26px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:26px;margin:26px 0}
.bobbie-card img{border-radius:5px;display:block;width:100%;height:auto}
.bobbie-card p{margin-bottom:13px;color:var(--ink-2)}
.bobbie-card .sig{color:var(--ink);margin-bottom:0}

/* ---- CTA band ---- */
.cta{background:var(--ink);color:var(--cream);padding:60px 0 66px;text-align:center}
.cta h2{color:#fff;font-size:28px;line-height:1.14;margin-top:11px}
.cta .cta-row{justify-content:center}
.cta .btn-o{color:var(--cream);border-color:rgba(251,246,238,.42)}
.cta .btn-o:hover{border-color:var(--cream);color:#fff}
.cta-note{margin-top:20px;font-size:15px;color:rgba(251,246,238,.68)}

/* ---- footer ---- */
.ft{background:#2C1F1A;color:rgba(251,246,238,.76);padding:56px 0 28px;font-size:15.5px}
.ft a{color:rgba(251,246,238,.76)}
.ft a:hover{color:#fff}
.ft address{font-style:normal;line-height:1.62}
.ft-tel{color:#fff;font-weight:700;font-size:19px}
.ft-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px}
.ft h4{color:#fff;font-size:15px;font-family:'Karla',sans-serif;font-weight:700;
  margin-bottom:13px}
.ft ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ft-b{border-top:1px solid rgba(251,246,238,.16);margin-top:42px;padding-top:21px;
  font-size:14px;color:rgba(251,246,238,.56)}

/* ---- responsive ---- */
@media (max-width:1040px){
  .layout{grid-template-columns:1fr;gap:32px}
  .side{position:static;max-height:none}
  .side-l{max-height:none}
  .hub-hero-g{grid-template-columns:1fr;gap:32px;padding:44px 0 48px}
  .fo-g,.rel-g{grid-template-columns:repeat(2,1fr)}
  .nap,.bobbie-card{grid-template-columns:1fr}
  .ft-g{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{padding:0 22px}
  .nav{display:none}
  .hdr-in{gap:14px}
  .hub-hero h1{font-size:30px}
  .main h1{font-size:26px}
  .sp-g,.fo-g,.rel-g,.ft-g{grid-template-columns:1fr}
  .prose table{display:block;overflow-x:auto}
  .toc{position:static}
}
@media print{.side,.cta,.hdr,.fanout{display:none}}


/* ---- TOC: floating rail on desktop, collapsible menu on mobile ---- */
.layout.has-toc{grid-template-columns:264px minmax(0,1fr) 236px;gap:40px}
.toc{margin:0;padding:0;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;position:sticky;top:96px;align-self:start;overflow:hidden}
.toc>summary{list-style:none;cursor:pointer;padding:14px 18px;
  background:var(--cream-2);border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sage-d);display:flex;
  align-items:center;justify-content:space-between}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::after{content:"−";font-size:15px;line-height:1;color:var(--ink-3)}
.toc:not([open])>summary::after{content:"+"}
.toc:not([open])>summary{border-bottom:0}
.toc ul{list-style:none;margin:0;padding:12px 0;display:block;
  max-height:60vh;overflow-y:auto}
.toc li{margin:0}
.toc li a{display:block;padding:6px 18px;font-size:14.5px;line-height:1.42;
  color:var(--ink-2);border-left:2px solid transparent}
.toc li a:hover{color:var(--ink);background:var(--cream-2);text-decoration:none}
.toc li.sub a{padding-left:30px;font-size:13.5px}
.toc li a.on{color:var(--clay-d);font-weight:700;border-left-color:var(--clay);
  background:var(--cream-2)}

@media (max-width:1180px){
  /* below the 3-column breakpoint the rail becomes a collapsed menu at the top */
  .layout.has-toc{grid-template-columns:264px minmax(0,1fr)}
  .toc{grid-column:1/-1;grid-row:1;position:static;max-height:none}
  .toc ul{max-height:none}
}
@media (max-width:1040px){
  .layout.has-toc{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* MOBILE: collapsed by default so it is a menu, not a wall of links */
  .toc{margin-bottom:4px}
  .toc[open] ul{max-height:44vh;overflow-y:auto}
}


/* ---- enquiry form ---- */
.enq{background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:32px 34px;margin:30px 0}
.enq h2{font-size:24px;margin-bottom:8px}
.enq-sub{color:var(--ink-2);margin-bottom:22px}
.enq-g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.enq-f label{display:block;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.enq-f .req{color:var(--clay)}
.enq-f input,.enq-f select,.enq-f textarea{display:block;width:100%;margin-top:6px;
  padding:12px 13px;font:inherit;font-size:16px;font-weight:400;color:var(--ink);
  background:var(--cream);border:1px solid var(--line-2);border-radius:5px}
.enq-f input:focus,.enq-f select:focus,.enq-f textarea:focus{outline:2px solid var(--clay);
  outline-offset:1px;background:#fff}
.enq-msg{margin-top:16px;display:block}
.enq-act{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.enq-f button{cursor:pointer;font-family:inherit}
.enq-note{font-size:14px;color:var(--ink-2)}
.enq-status{margin-top:14px;font-size:15.5px}
.enq-status.ok{color:var(--sage-d);font-weight:600}
.enq-status.err{color:var(--clay-d);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:760px){.enq{padding:24px 20px}.enq-g{grid-template-columns:1fr}}

/* ==========================================================================
   MOBILE READINESS — added 2026-08-05
   Measured before writing: the homepage overflowed horizontally on EVERY iPhone
   width (scrollWidth 690px regardless of viewport, +260px at 430 to +370px at 320),
   there was no mobile menu and no footer bar anywhere on the site, and 21-31 tap
   targets fell under Apple's 44px minimum.

   ⚠️ Why these rules live HERE and not in the homepage's inline <style>:
   staging/public/index.html carries its own inline CSS and does not link site.css
   at all — finalize_site.py APPENDS the site.css <link> to <head>, so site.css is
   last in the cascade and overrides the inline rules at equal specificity. Editing
   the built site/public/index.html instead would be reverted by the next build.
   ========================================================================== */

/* Belt-and-braces: nothing may cause sideways scroll. This does not fix a broken
   layout, it only stops a regression from silently shipping as a scrollbar. */
html{overflow-x:hidden}

@media (max-width:760px){

  /* --- the 690px culprit: 5 fixed columns that never wrapped ---------------- */
  .crit-g{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}

  /* --- hero stacked, headline scaled to the viewport ----------------------- */
  .hero-g{grid-template-columns:1fr;gap:28px;padding:36px 0 40px}
  .hero-g h1,.hero h1{font-size:clamp(30px,8.2vw,46px);line-height:1.12;
    overflow-wrap:break-word;hyphens:auto}
  .hero-img{aspect-ratio:16/11}

  /* --- any remaining multi-column grid collapses --------------------------- */
  /* EVERY multi-column grid on the site, enumerated from the built HTML rather than
     guessed — a first pass invented six class names that matched nothing, so the real
     culprit (.bio-g at a fixed 352px+227px) sailed through and the page still overflowed. */
  .bio-g,.bobbie-card,.care,.enq-g,.fo-g,.ft-g,.hero-g,.hub-hero-g,.layout,.nap,
  .note-g,.rel-g,.res,.sp-g,.steps,.tg,.has-toc{grid-template-columns:1fr !important}

  /* --- long unbroken strings (emails, URLs) must not push the page wide ----- */
  .util-in,.util-in a{overflow-wrap:anywhere}

  /* --- tap targets: Apple HIG minimum is 44x44pt --------------------------- */
  /* Tap targets: Apple HIG minimum is 44x44pt. Scoped to CHROME links (top bar,
     footer, breadcrumbs, buttons) — inline links inside prose are deliberately left
     alone, since forcing 44px there would wreck body copy line spacing.
     `.foot` was a guess and matched nothing; the footer is `.ft`. */
  a.btn,button,.btn,.hdr-cta,.crumbs a{min-height:44px}
  .util-in a,.ft a,.nav a{display:inline-flex;align-items:center;min-height:44px}
}

/* The header CTA had only 22px of slack at 412px and clipped as soon as text
   scaled up (reproduced at 1.3x Android font size). nowrap was the reason it
   could neither shrink nor wrap. */
@media (max-width:520px){
  .hdr-cta{white-space:normal;min-width:0;flex-shrink:1;
    padding:10px 14px;font-size:14px;line-height:1.2;text-align:center}
  .hdr-in{gap:12px}
}

/* --- mobile menu (injected by mobile_nav.py) ------------------------------- */
.mnav-btn{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 10px;background:none;border:0;cursor:pointer;
  flex-shrink:0;border-radius:6px}
.mnav-btn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.mnav-bar{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px}
.mnav{display:none}

/* --- sticky footer CTA bar (injected by mobile_nav.py) --------------------- */
.fbar{display:none}

@media (max-width:760px){
  .mnav-btn{display:inline-flex}

  .mnav{display:block;background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px 22px 18px}
  .mnav[hidden]{display:none}
  .mnav nav{display:flex;flex-direction:column}
  .mnav nav a{display:flex;align-items:center;min-height:48px;
    font-size:17px;font-weight:500;color:var(--ink);
    border-bottom:1px solid var(--line)}
  .mnav-tel{display:flex;align-items:center;min-height:48px;font-weight:700;
    font-family:'Literata',serif;font-size:20px;color:var(--clay-d)}
  .mnav-cta{display:flex;align-items:center;justify-content:center;min-height:50px;
    margin-top:10px;background:var(--clay);color:#fff;border-radius:100px;
    font-weight:700;font-size:16px;text-align:center}
  .mnav-cta:hover,.mnav-cta:focus{background:var(--clay-d);color:#fff;text-decoration:none}

  /* The header CTA is redundant once the footer bar is always on screen, and it was
     the element clipping at narrow widths / raised text scale. */
  .hdr-cta{display:none}

  .fbar{display:flex;gap:10px;position:fixed;left:0;bottom:0;z-index:60;
    width:100vw;max-width:100vw;box-sizing:border-box;
    background:var(--paper);border-top:1px solid var(--line);
    padding:10px 16px;
    /* clears the iPhone home indicator; 0px on devices without one */
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 14px rgba(0,0,0,.10)}
  .fbar a{display:flex;align-items:center;justify-content:center;
    min-height:48px;border-radius:100px;font-weight:700;font-size:16px}
  .fbar a:hover,.fbar a:focus{text-decoration:none}
  .fbar-tel{flex:0 0 32%;border:2px solid var(--clay);color:var(--clay-d);background:transparent}
  .fbar-cta{flex:1 1 auto;background:var(--clay);color:#fff;border:2px solid var(--clay)}
  .fbar-cta:hover,.fbar-cta:focus{background:var(--clay-d);color:#fff}

  /* The bar is fixed over the page, so the document needs room or it hides the
     last element on every page — typically the footer's contact details. */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}

  /* Opening the menu must not let the page behind it scroll. */
  html.mnav-open,html.mnav-open body{overflow:hidden}
}

@media print{.fbar,.mnav,.mnav-btn{display:none !important}}