/* Riverside County Bail Bonds - design system
   Palette: ink navy authority, citrus amber action, warm white, sand.
   Display: Bricolage Grotesque. Body: Inter. No em dashes in content. */

:root{
  --ink:#0d2233;          /* deep midnight navy, calm authority */
  --ink-2:#143049;        /* lighter navy for panels */
  --ink-3:#1d3f5c;
  --amber:#e8841a;        /* Riverside citrus, primary action */
  --amber-d:#cf6f0c;
  --amber-soft:#fbeBd6;
  --paper:#fbf7f1;        /* warm white */
  --paper-2:#f3ece1;      /* sand */
  --line:#e4d9c8;
  --text:#16242f;
  --muted:#566472;
  --muted-l:#a9b4bd;
  --green:#2e7d5b;
  --white:#ffffff;
  --radius:14px;
  --radius-s:10px;
  --shadow:0 10px 30px rgba(13,34,51,.10);
  --shadow-s:0 4px 14px rgba(13,34,51,.08);
  --maxw:1120px;
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--text);
  background:var(--paper);line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--amber-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.12;
  letter-spacing:-.015em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.15rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem);margin-top:0}
h3{font-size:1.22rem}
p{margin:0 0 1.05em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:820px}

/* ---------- top utility / call bar ---------- */
.topbar{background:var(--ink);color:#dfe8ef;font-size:.86rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;
  gap:12px;min-height:40px;flex-wrap:wrap}
.topbar a{color:#dfe8ef}
.topbar .tb-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar strong{color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(251,247,241,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.site-head .container{display:flex;align-items:center;justify-content:space-between;
  min-height:68px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
  font-weight:700;color:var(--ink);font-size:1.16rem;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .mark{width:38px;height:38px;flex:0 0 38px}
.brand small{display:block;font-family:var(--font-body);font-weight:500;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d)}
nav.main{display:flex;gap:24px;align-items:center}
nav.main a{color:var(--ink);font-weight:500;font-size:.95rem}
nav.main a:hover{color:var(--amber-d);text-decoration:none}
.nav-call{display:inline-flex;align-items:center;gap:8px;background:var(--amber);
  color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:.95rem;
  box-shadow:var(--shadow-s)}
.nav-call:hover{background:var(--amber-d);text-decoration:none;color:#fff}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:6px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* ---------- hero ---------- */
.hero{background:
   radial-gradient(1100px 540px at 78% -10%,rgba(232,132,26,.18),transparent 60%),
   linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);
  color:#eaf1f6;padding:74px 0 84px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px;opacity:.4;pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:44px;align-items:center}
.hero h1{color:#fff}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#ffd9ad;padding:7px 15px;border-radius:999px;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:22px}
.hero .dot{width:8px;height:8px;border-radius:50%;background:#4ad07d;
  box-shadow:0 0 0 0 rgba(74,208,125,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,208,125,.6)}
  70%{box-shadow:0 0 0 10px rgba(74,208,125,0)}100%{box-shadow:0 0 0 0 rgba(74,208,125,0)}}
.hero .lead{font-size:1.18rem;color:#cdd9e2;max-width:560px;margin-bottom:30px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media (prefers-reduced-motion:reduce){.hero .dot{animation:none}}

/* call card in hero */
.call-card{background:var(--paper);color:var(--text);border-radius:18px;
  padding:28px;box-shadow:0 22px 50px rgba(0,0,0,.30);border:1px solid var(--line)}
.call-card .kicker{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-d);font-weight:700;margin-bottom:8px}
.call-card .num{font-family:var(--font-display);font-size:2.05rem;font-weight:700;
  color:var(--ink);letter-spacing:-.02em;display:block;margin-bottom:4px}
.call-card .num:hover{color:var(--amber-d);text-decoration:none}
.call-card ul{list-style:none;padding:0;margin:16px 0 20px}
.call-card li{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px;
  font-size:.96rem;color:var(--muted)}
.call-card li svg{flex:0 0 18px;margin-top:3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;
  padding:14px 26px;border-radius:999px;font-size:1rem;cursor:pointer;border:0;
  transition:transform .12s ease,background .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-amber{background:var(--amber);color:#fff;box-shadow:var(--shadow-s)}
.btn-amber:hover{background:var(--amber-d);color:#fff}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.10);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2);color:#fff}
.btn-lg{padding:16px 32px;font-size:1.06rem}

/* ---------- sections ---------- */
section{padding:64px 0}
.section-tight{padding:46px 0}
.bg-paper2{background:var(--paper-2)}
.bg-ink{background:var(--ink);color:#dde7ee}
.bg-ink h2,.bg-ink h3{color:#fff}
.eyebrow-s{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-d);font-weight:700;margin-bottom:12px;display:block}
.bg-ink .eyebrow-s{color:#ffc888}
.section-head{max-width:720px;margin-bottom:38px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.lead-muted{color:var(--muted);font-size:1.1rem}
.bg-ink .lead-muted{color:#aebecb}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust .item{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow-s)}
.trust .item .big{font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  color:var(--ink);margin-bottom:2px}
.trust .item .lbl{color:var(--muted);font-size:.92rem}
.trust .item .ic{width:30px;height:30px;margin-bottom:12px;color:var(--amber-d)}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-s);transition:transform .14s ease,box-shadow .14s ease;
  display:flex;flex-direction:column;height:100%}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
a.card:hover{text-decoration:none}
.card h3{margin-bottom:6px}
.card .meta{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber-d);font-weight:700;margin-bottom:10px}
.card p{color:var(--muted);font-size:.96rem;margin-bottom:14px}
.card .more{margin-top:auto;color:var(--amber-d);font-weight:600;font-size:.92rem}

/* process steps */
.steps{counter-reset:step;display:grid;gap:18px}
.step{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-s)}
.step .n{counter-increment:step;width:54px;height:54px;border-radius:14px;
  background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:1.4rem;display:flex;align-items:center;justify-content:center}
.step .n:before{content:counter(step,decimal-leading-zero)}
.step h3{margin-bottom:4px}
.step p{margin:0;color:var(--muted);font-size:.97rem}

/* ---------- content prose ---------- */
.prose{max-width:780px}
.prose h2{margin-top:1.8em}
.prose h3{margin-top:1.5em}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.2em}
.prose ul li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--text)}
.prose ul li:before{content:"";position:absolute;left:4px;top:9px;width:9px;height:9px;
  background:var(--amber);border-radius:3px;transform:rotate(45deg)}
.prose .callout{background:var(--amber-soft);border-left:4px solid var(--amber);
  padding:18px 22px;border-radius:0 var(--radius-s) var(--radius-s) 0;margin:1.4em 0}
.prose .callout p{margin:0}

/* two-column content with sidebar */
.with-aside{display:grid;grid-template-columns:1fr 320px;gap:46px;align-items:start}
.aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:18px}
.aside .panel{background:var(--ink);color:#dbe6ee;border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)}
.aside .panel h3{color:#fff;margin-bottom:6px}
.aside .panel p{color:#a9bccb;font-size:.93rem}
.aside .panel .num{display:block;font-family:var(--font-display);font-size:1.6rem;
  color:#fff;font-weight:700;margin:4px 0 14px}
.aside .panel .num:hover{color:#ffc888;text-decoration:none}
.aside .links{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-s)}
.aside .links h4{font-family:var(--font-display);margin:0 0 12px;color:var(--ink)}
.aside .links a{display:block;padding:7px 0;color:var(--text);font-size:.95rem;
  border-bottom:1px solid var(--line)}
.aside .links a:last-child{border-bottom:0}
.aside .links a:hover{color:var(--amber-d);text-decoration:none}

/* breadcrumb */
.crumbs{font-size:.85rem;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--amber-d)}
.crumbs span{color:var(--muted-l)}

/* faq accordion */
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-s);
  margin-bottom:12px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:18px 22px;font-family:var(--font-display);
  font-weight:600;color:var(--ink);font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";font-size:1.5rem;color:var(--amber-d);font-weight:400}
.faq-item[open] summary:after{content:"\2212"}
.faq-item .body{padding:0 22px 20px;color:var(--muted)}
.faq-item .body p{margin:0}

/* big CTA band */
.cta-band{background:
   radial-gradient(800px 400px at 20% 0,rgba(232,132,26,.22),transparent 55%),
   var(--ink);color:#fff;border-radius:22px;padding:48px;text-align:center;
   box-shadow:var(--shadow)}
.cta-band h2{color:#fff}
.cta-band p{color:#cdd9e2;max-width:620px;margin:0 auto 26px}
.cta-band .num-xl{font-family:var(--font-display);font-size:clamp(2rem,6vw,3rem);
  font-weight:700;color:#fff;display:inline-block;margin-bottom:6px}
.cta-band .num-xl:hover{color:#ffc888;text-decoration:none}

/* chips / pills list */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.9rem;
  color:var(--text);font-weight:500;box-shadow:var(--shadow-s)}
.pill:hover{border-color:var(--amber);color:var(--amber-d);text-decoration:none}

/* directory columns */
.dir-cols{columns:3;column-gap:34px}
.dir-cols a{display:block;padding:6px 0;color:var(--text);font-size:.95rem;
  break-inside:avoid}
.dir-cols a:hover{color:var(--amber-d);text-decoration:none}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#aebecb;padding:56px 0 28px;margin-top:10px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
.site-foot h4{font-family:var(--font-display);color:#fff;font-size:1rem;margin:0 0 14px}
.site-foot a{color:#aebecb;display:block;padding:5px 0;font-size:.92rem}
.site-foot a:hover{color:#ffc888;text-decoration:none}
.site-foot .fbrand{display:flex;align-items:center;gap:10px;color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-bottom:12px}
.site-foot .fbrand .mark{width:36px;height:36px}
.site-foot .fnum{font-family:var(--font-display);font-size:1.5rem;color:#fff;
  font-weight:700;display:inline-block;margin:6px 0}
.site-foot .fnum:hover{color:#ffc888;text-decoration:none}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem}
.foot-bottom p{margin:0;color:#8ea0af;max-width:760px}
.disclaimer{font-size:.8rem;color:#7d8f9e;margin-top:14px;max-width:900px;line-height:1.6}

/* mobile sticky call */
.mobile-call{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--amber);box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.mobile-call a{display:flex;align-items:center;justify-content:center;gap:10px;
  color:#fff;font-weight:700;padding:15px;font-size:1.06rem}
.mobile-call a:hover{text-decoration:none;color:#fff}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .with-aside{grid-template-columns:1fr}
  .aside{position:static;flex-direction:row;flex-wrap:wrap}
  .aside .panel,.aside .links{flex:1 1 280px}
  .trust{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .dir-cols{columns:2}
}
@media (max-width:680px){
  body{font-size:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr 1fr}
  .dir-cols{columns:1}
  .cta-band{padding:34px 22px}
  .mobile-call{display:block}
  body{padding-bottom:56px}
  .topbar .tb-left{display:none}
  section{padding:48px 0}
  .step{grid-template-columns:44px 1fr;gap:14px}
  .step .n{width:44px;height:44px;font-size:1.15rem}
}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}

/* ====================================================================
   THEME SWITCHER + DARK MODE
   Variables flip on [data-theme="dark"]; only colors change, so there
   is no layout movement when toggling. --ink stays navy (it backs the
   dark sections); text-colored uses of it are overridden below.
   ==================================================================== */
:root{color-scheme:light}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0b141d;          /* page background */
  --paper-2:#0f1c27;        /* alt section background */
  --white:#15232f;          /* card / surface */
  --line:#27343f;           /* hairlines */
  --text:#e8eef3;
  --muted:#9fb1be;
  --muted-l:#7e909d;
  --amber-soft:#2a2114;     /* callout background */
  --shadow:0 14px 36px rgba(0,0,0,.55);
  --shadow-s:0 4px 16px rgba(0,0,0,.40);
}
[data-theme="dark"] h1,[data-theme="dark"] h2,
[data-theme="dark"] h3,[data-theme="dark"] h4{color:var(--text)}
[data-theme="dark"] .brand,
[data-theme="dark"] nav.main a,
[data-theme="dark"] .call-card .num,
[data-theme="dark"] .trust .item .big,
[data-theme="dark"] .faq-item summary,
[data-theme="dark"] .aside .links h4{color:var(--text)}
[data-theme="dark"] .menu-btn span{background:var(--text)}
[data-theme="dark"] .site-head{background:rgba(11,20,29,.92)}
[data-theme="dark"] .call-card{background:#13212e;border-color:#26333f}
[data-theme="dark"] .bg-ink{background:#0e2030}
[data-theme="dark"] .topbar{background:#0a1119}
[data-theme="dark"] .pill{background:var(--white)}
[data-theme="dark"] .lang-switch{border-color:var(--line);color:var(--text)}

/* skip link (accessibility) */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--amber);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;z-index:300;font-weight:700}
.skip-link:focus{left:0;text-decoration:none}

/* header tools cluster */
.hdr-tools{display:flex;align-items:center;gap:10px}
.theme-toggle{width:40px;height:40px;flex:0 0 40px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:transparent;border:1.5px solid var(--line);color:var(--ink);
  padding:0;transition:border-color .2s ease,color .2s ease,background .2s ease}
.theme-toggle:hover{border-color:var(--amber);color:var(--amber-d)}
.theme-toggle svg{width:19px;height:19px;display:block}
[data-theme="dark"] .theme-toggle{color:var(--text)}
.theme-toggle .sun{display:none}
.theme-toggle .moon{display:flex}
[data-theme="dark"] .theme-toggle .sun{display:flex}
[data-theme="dark"] .theme-toggle .moon{display:none}

/* language switch */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:40px;padding:0 12px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--ink);font-weight:700;font-size:.86rem;
  letter-spacing:.04em;transition:border-color .2s ease,color .2s ease}
.lang-switch:hover{border-color:var(--amber);color:var(--amber-d);text-decoration:none}

/* hamburger button (hidden on desktop) */
.menu-btn{display:none;width:42px;height:42px;flex:0 0 42px;background:none;border:0;
  cursor:pointer;padding:9px;border-radius:10px}
.menu-btn span{display:block;width:24px;height:2px;border-radius:2px;background:var(--ink);
  margin:5px auto;transition:transform .3s ease,opacity .2s ease}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer chrome (only shown inside mobile drawer) */
.nav-head{display:none}
.nav-backdrop{position:fixed;inset:0;background:rgba(7,13,19,.55);z-index:110;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.nav-backdrop.open{opacity:1;visibility:visible}

/* helper classes that replaced inline styles */
.cta-eye{color:#ffc888}
.cta-btn{margin-top:14px}
.foot-tag{max-width:300px;color:#aebecb}
.fb-inline{display:inline !important;margin-right:16px}

/* tighten desktop nav spacing so it fits down to the drawer breakpoint */
nav.main{gap:20px}
nav.main a{font-size:.93rem}

/* ====================================================================
   MOBILE: hamburger + slide-in drawer (<= 1024px)
   ==================================================================== */
@media (max-width:1024px){
  .topbar{display:none}
  .site-head{min-height:60px}
  .site-head .container{min-height:60px}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}

  nav.main{
    position:fixed;top:60px;right:0;bottom:0;width:min(84vw,340px);
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    background:var(--paper);border-left:1px solid var(--line);
    box-shadow:-16px 0 44px rgba(0,0,0,.28);
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    padding:14px 20px 28px;overflow-y:auto;z-index:120;
    -webkit-overflow-scrolling:touch}
  nav.main.open{transform:translateX(0)}
  nav.main a{padding:14px 4px;font-size:1.06rem;border-bottom:1px solid var(--line)}
  nav.main a:last-of-type{border-bottom:0}
  .nav-head{display:block;padding:4px 4px 10px;margin-bottom:4px;
    border-bottom:2px solid var(--line)}
  .nav-title{font-family:var(--font-display);font-weight:700;font-size:.78rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .nav-call{margin-top:14px;justify-content:center;border-bottom:0 !important;
    color:#fff !important;font-size:1.02rem !important}
  .nav-call:hover{color:#fff !important}
  body.menu-open{overflow:hidden}
}

/* very small phones: keep everything comfortable */
@media (max-width:380px){
  .brand{font-size:.86rem}
  .brand span{font-size:.86rem;line-height:1.04}
  .brand .mark{width:32px;height:32px;flex-basis:32px}
  .hdr-tools{gap:7px}
  .lang-switch{min-width:38px;padding:0 9px;height:38px}
  .theme-toggle{width:38px;height:38px;flex-basis:38px}
  .menu-btn{width:40px;height:40px;flex-basis:40px}
  .container{padding:0 16px}
}

/* ====================================================================
   FIXES: icon sizing, mobile brand, drawer stacking
   ==================================================================== */
/* constrain inline SVG icons inside buttons / call links so they never
   blow out the layout (this also keeps the mobile drawer compact) */
.btn svg{width:19px;height:19px;flex:0 0 19px}
.btn-lg svg{width:21px;height:21px;flex:0 0 21px}
.nav-call svg{width:18px;height:18px;flex:0 0 18px}
.mobile-call a svg{width:20px;height:20px;flex:0 0 20px}
.call-card .btn svg{width:20px;height:20px;flex:0 0 20px}

@media (max-width:1024px){
  /* keep the header a predictable height so the drawer aligns under it */
  .site-head{z-index:130}
  .site-head .container{min-height:62px}
  .brand{font-size:1rem;line-height:1.08}
  .brand .mark{width:34px;height:34px;flex:0 0 34px}
  .brand span{display:flex;flex-direction:column}
  nav.main{top:62px}
  /* backdrop sits BELOW the header so the hamburger stays tappable to close */
  .nav-backdrop{top:62px}
}
@media (max-width:480px){
  .brand small{display:none}
  .brand{font-size:.96rem}
}

/* The header's backdrop-filter was establishing a containing block that
   trapped the fixed drawer inside the 62px header. Disable it where the
   drawer is used, and give the drawer its own surface for clear contrast. */
@media (max-width:1024px){
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none}
  nav.main{background:var(--white);height:calc(100% - 62px)}
}