/* Self-hosted (OFL-licensed) variable fonts — no separate connection to
   Google Fonts, which was the main render-blocking cost on mobile. */
@font-face{ font-family:'Archivo'; src:url('fonts/archivo-latin.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Lexend'; src:url('fonts/lexend-latin.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Metric-matched fallbacks: text is drawn at the webfont's width and line
   height before it arrives, so the swap doesn't re-wrap lines (Lexend is
   ~11% wider than Arial, which re-wrapped the hero text on phones). Values
   measured from the font files, weighted by English letter frequency.
   Roboto covers Android, which has no Arial. */
@font-face{ font-family:'Archivo Fallback Arial'; src:local('Arial Bold'), local('Arial-BoldMT'); font-weight:100 900; size-adjust:98.07%; ascent-override:89.53%; descent-override:21.41%; line-gap-override:0%; }
@font-face{ font-family:'Archivo Fallback Roboto'; src:local('Roboto Bold'), local('Roboto-Bold'); font-weight:100 900; size-adjust:104.23%; ascent-override:84.24%; descent-override:20.15%; line-gap-override:0%; }
@font-face{ font-family:'Lexend Fallback Arial'; src:local('Arial'), local('ArialMT'); size-adjust:110.82%; ascent-override:90.24%; descent-override:22.56%; line-gap-override:0%; }
@font-face{ font-family:'Lexend Fallback Roboto'; src:local('Roboto'), local('Roboto-Regular'); size-adjust:110.23%; ascent-override:90.72%; descent-override:22.68%; line-gap-override:0%; }
:root{
  /* A warm, light, friendly theme — not the dark/moody look a lot of
     emergency-service sites reach for by default. The brief was explicit:
     someone landing on this page might be a stressed driver stuck on the
     hard shoulder, and the site shouldn't add to that feeling. */
  --bg: oklch(97.5% 0.012 75);
  --bg-elev: oklch(100% 0 0);
  --bg-elev-2: oklch(94.5% 0.014 75);
  --border: oklch(86% 0.016 70);
  --border-soft: oklch(91% 0.013 70);
  --text: oklch(27% 0.02 55);
  --text-muted: oklch(45% 0.022 55);
  --text-faint: oklch(52% 0.018 60);
  --accent: #F4AD10;
  --accent-hover: #CF930E;
  --accent-soft: rgba(244, 173, 16, 0.13);
  --navy: #012846;
  --alert: oklch(58% 0.18 35);
  --alert-hover: oklch(52% 0.18 35);
  --alert-soft: oklch(58% 0.18 35 / 0.12);
  --success: oklch(56% 0.13 155);
  --font-head: 'Archivo', 'Archivo Fallback Arial', 'Archivo Fallback Roboto', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Lexend', 'Lexend Fallback Arial', 'Lexend Fallback Roboto', ui-sans-serif, system-ui, sans-serif;
  --on-accent: oklch(100% 0 0);
  --chip-bg: color-mix(in oklch, var(--bg-elev) 88%, transparent);
  --chip-border: color-mix(in oklch, var(--text) 10%, transparent);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--font-body); background:var(--bg); color:var(--text); }
a{ color:var(--navy); text-decoration:none; }
a:hover{ text-decoration:underline; }
p a{ text-decoration:underline; text-underline-offset:2px; }
.btn:hover, .chip:hover, .fab:hover, .btn-call-header:hover, .nav-link:hover, .guide-card:hover{ text-decoration:none; }
svg{ display:block; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Header */
.header{ position:sticky; top:0; z-index:50; background:var(--chip-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft); }
.header-inner{ max-width:1200px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; }
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ color:var(--accent); flex-shrink:0; width:28px; height:28px; object-fit:contain; }
.logo-full{ max-width:220px; max-height:44px; width:auto; height:auto; object-fit:contain; flex-shrink:1; display:block; }
.logo-fallback{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-text{ font-family:var(--font-head); font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--text); line-height:1.1; white-space:nowrap; }
.nav{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; }
.nav-link{ font-size:14.5px; font-weight:500; color:var(--text-muted); padding:6px 2px; border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:5px; }
.nav-link:hover{ color:var(--text); }
.nav-link.active{ color:var(--text); border-bottom-color:var(--accent); }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-item .nav-caret{ width:13px; height:13px; transition:transform .15s ease; }
.nav-item:hover .nav-caret, .nav-item.is-open .nav-caret{ transform:rotate(180deg); }
.nav-item::after{ content:''; position:absolute; left:0; right:0; top:100%; height:14px; }
.nav-dropdown{ display:none; position:absolute; top:100%; left:0; margin-top:14px; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:8px; min-width:260px; flex-direction:column; gap:1px; box-shadow:0 20px 44px -20px oklch(40% 0.02 60 / 0.16); z-index:60; }
.nav-item:hover .nav-dropdown, .nav-item.is-open .nav-dropdown{ display:flex; }
.nav-dropdown a{ font-size:14px; color:var(--text-muted); padding:10px 12px; border-radius:8px; }
.nav-dropdown a:hover{ background:var(--bg-elev-2); color:var(--text); }
.nav-dropdown-foot{ border-top:1px solid var(--border-soft); margin-top:6px; padding-top:6px; }
.mobile-sub-toggle-row{ display:flex; align-items:center; justify-content:space-between; }
.mobile-sub-toggle{ background:none; border:none; color:var(--text-faint); cursor:pointer; padding:8px; display:flex; align-items:center; }
.mobile-sub-toggle svg{ width:16px; height:16px; transition:transform .15s ease; }
.mobile-sub-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mobile-sub-list{ display:none; flex-direction:column; padding-left:14px; }
.mobile-sub-list.is-open{ display:flex; }
.mobile-sub-list a{ font-size:14px; padding:10px 4px; border-bottom:1px solid var(--border-soft); color:var(--text-muted); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.btn-call-header{ display:inline-flex; align-items:center; gap:8px; background:var(--alert); color:#fff; font-weight:600; font-size:14px; padding:10px 16px; border-radius:8px; white-space:nowrap; animation:call-pulse 2.6s ease-in-out infinite; }
.btn-call-header svg{ width:16px; height:16px; }
.btn-call-header:hover{ background:var(--alert-hover); color:#fff; animation-play-state:paused; }
@keyframes call-pulse{
  0%, 100% { box-shadow:0 0 0 0 oklch(58% 0.18 35 / 0.45); }
  50% { box-shadow:0 0 0 8px oklch(58% 0.18 35 / 0); }
}
@media (prefers-reduced-motion: reduce){ .btn-call-header{ animation:none; } }
.btn-call-header.whatsapp{ background:#25D366; animation:whatsapp-pulse 2.6s ease-in-out infinite; }
.btn-call-header.whatsapp:hover{ background:#20b85a; animation-play-state:paused; }
.mobile-panel .btn-call-header.whatsapp{ margin-top:8px; }
.btn-call-header.icon-only{ padding:10px; width:40px; }
.btn-call-header.icon-only svg{ margin:0 auto; }
@keyframes whatsapp-pulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(37,211,102,0.45); }
  50% { box-shadow:0 0 0 8px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){ .btn-call-header.whatsapp{ animation:none; } }
.menu-toggle{ display:none; background:none; border:1px solid var(--border); color:var(--text); width:40px; height:40px; border-radius:8px; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.menu-toggle svg{ width:20px; height:20px; }
.mobile-panel{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg-elev); border-bottom:1px solid var(--border); padding:14px 24px 22px; flex-direction:column; gap:2px; box-shadow:0 20px 40px -20px oklch(40% 0.02 60 / 0.14); max-height:calc(100vh - 64px); overflow-y:auto; }
.mobile-panel.is-open{ display:flex; }
.mobile-panel .nav-link{ padding:12px 4px; border-bottom:1px solid var(--border-soft); }
.mobile-panel .btn-call-header{ justify-content:center; margin-top:12px; }
@media (max-width: 1040px){ .nav{ display:none; } .menu-toggle{ display:flex; } .header-actions .btn-call-header{ display:none; } }
@media (max-width: 480px){ .logo-full{ max-width:165px; max-height:36px; } }

/* Hazard chevron rule — a thin repeating diagonal strip used as a section
   divider, evoking recovery-vehicle chevron markings without needing a
   photo. Deliberately subtle (low opacity). */
.hazard-rule{ height:6px; background:repeating-linear-gradient(-45deg, var(--accent) 0 10px, transparent 10px 20px); opacity:.5; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15px; padding:14px 22px; border-radius:9px; border:1px solid transparent; cursor:pointer; }
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--alert); color:#fff; }
.btn-primary:hover{ background:var(--alert-hover); color:#fff; }
.btn-secondary{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-secondary:hover{ border-color:var(--accent); }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:88px 24px 56px; border-bottom:1px solid var(--border-soft); }
.hero.hero-home{ background:radial-gradient(1100px 520px at 12% -10%, oklch(78% 0.15 75 / 0.16), transparent 60%), radial-gradient(900px 480px at 105% 0%, oklch(58% 0.18 35 / 0.12), transparent 55%), var(--bg); }
.hero.hero-alt{ background:radial-gradient(1100px 520px at 12% -10%, oklch(58% 0.18 35 / 0.17), transparent 60%), radial-gradient(900px 480px at 105% 0%, oklch(78% 0.15 75 / 0.10), transparent 55%), var(--bg); }
.hero-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.82fr); gap:56px; align-items:center; position:relative; z-index:1; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--alert-soft); color:var(--alert); border:1px solid oklch(58% 0.18 35 / 0.32); font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; margin-bottom:20px; }
.eyebrow svg{ width:14px; height:14px; }
/* Warmer, reassuring variant — used where the tone should read as friendly
   rather than urgent (e.g. the homepage hero, vs. the red "alert" tone
   reserved for genuinely urgent contexts like the M25 safety guide). */
.eyebrow-friendly{ background:var(--accent-soft); color:var(--accent-hover); border-color:oklch(64% 0.15 60 / 0.3); }
.hero h1{ font-family:var(--font-head); font-size:clamp(32px,4.1vw,52px); line-height:1.07; letter-spacing:-0.02em; margin:0 0 18px; color:var(--text); }
.hero h1 .accent-text{ color:var(--navy); }
.hero.hero-alt h1 .accent-text{ color:var(--alert); }
.hero p.lead{ font-size:16.5px; line-height:1.6; color:var(--text-muted); max-width:520px; margin:0 0 30px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:8px; }
.hero.hero-home .hero-ctas{ margin-bottom:36px; }
.hero-stats{ display:flex; gap:26px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-head); font-size:21px; color:var(--text); }
.hero-stat span{ font-size:12.5px; color:var(--text-faint); }
.hint{ font-size:12.5px; color:var(--text-faint); margin:0; }

.hero-panel{ background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:26px; box-shadow:0 30px 60px -24px oklch(40% 0.02 60 / 0.16); }
.hero-panel-photo{ display:block; width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:18px; }
.hero-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.hero-panel-head .label{ font-size:12.5px; color:var(--text-faint); font-weight:500; }
.status{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.status-dot{ width:8px; height:8px; border-radius:999px; background:var(--success); box-shadow:0 0 0 4px oklch(56% 0.13 155 / 0.18); }
.hero-panel-row{ display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--border-soft); }
.hero-panel-row:first-of-type{ border-top:none; padding-top:0; }
.hero-panel-icon{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-panel-icon svg{ width:19px; height:19px; }
.hero-panel-text b{ display:block; font-size:14px; color:var(--text); font-weight:600; }
.hero-panel-text span{ font-size:12.5px; color:var(--text-faint); }

/* Illustration panel — replaces stock photography everywhere. A bordered
   card holding an inline SVG scene, so the brand never needs to fake
   real vehicles/team photos it doesn't have yet. */
.illus-panel{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -24px oklch(40% 0.02 60 / 0.16); border:1px solid var(--border); aspect-ratio:4/3.3; background:var(--bg-elev-2); }
.illus-panel svg{ width:100%; height:100%; }
.illus-panel img{ width:100%; height:100%; object-fit:cover; display:block; }
.illus-panel.wide{ aspect-ratio:16/7; }
.illus-panel.small{ aspect-ratio:16/10; }
.illus-badge{ position:absolute; z-index:2; left:20px; bottom:20px; right:20px; display:flex; align-items:center; gap:12px; background:var(--chip-bg); backdrop-filter:blur(10px); border:1px solid var(--chip-border); border-radius:12px; padding:14px 16px; box-shadow:0 14px 30px -14px oklch(40% 0.02 60 / 0.12); }
.illus-badge .illus-badge-icon{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.illus-badge .illus-badge-icon svg{ width:19px; height:19px; }
.illus-badge b{ display:block; font-size:14.5px; color:var(--text); font-weight:600; }
.illus-badge span{ font-size:12.5px; color:var(--text-faint); }

/* Checker widget (M25 page) */
.checker{ background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:26px; box-shadow:0 30px 60px -24px oklch(40% 0.02 60 / 0.16); }
.checker-label{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; display:block; }
.checker-sub{ font-size:12.5px; color:var(--text-faint); margin:0 0 18px; }
.checker-result{ display:flex; align-items:flex-start; gap:12px; background:oklch(56% 0.13 155 / 0.1); border:1px solid oklch(56% 0.13 155 / 0.3); border-radius:12px; padding:16px; margin-top:16px; }
.checker-result svg{ width:20px; height:20px; color:var(--success); flex-shrink:0; margin-top:1px; }
.checker-result b{ display:block; font-size:14px; color:var(--text); margin-bottom:3px; }
.checker-result span{ font-size:13px; color:var(--text-muted); line-height:1.5; }

/* Page hero (services, coverage, faq, contact, guides) */
.page-hero{ padding:64px 24px 48px; background:radial-gradient(900px 420px at 15% -10%, oklch(78% 0.15 75 / 0.14), transparent 60%), var(--bg); border-bottom:1px solid var(--border-soft); text-align:center; }
.page-hero h1{ font-family:var(--font-head); font-size:clamp(30px,4vw,46px); margin:10px 0 14px; letter-spacing:-0.02em; }
.page-hero p{ color:var(--text-muted); font-size:16px; max-width:640px; margin:0 auto; line-height:1.6; }
.eyebrow-sm{ color:var(--navy); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; display:block; }

/* Generic sections */
.section{ padding:76px 24px; max-width:1200px; margin:0 auto; }
.section-head{ max-width:620px; margin:0 auto 44px; text-align:center; }
.section-head h2{ font-family:var(--font-head); font-size:clamp(25px,2.9vw,34px); letter-spacing:-0.01em; margin:0 0 12px; color:var(--text); }
.section-head p{ color:var(--text-muted); font-size:15px; line-height:1.6; margin:0; }

.grid-services{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid-services.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.service-card{ position:relative; background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:13px; }
.service-card:hover{ border-color:var(--accent); }
.service-icon{ width:42px; height:42px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.service-icon svg{ width:21px; height:21px; }
.service-card h3{ font-family:var(--font-head); font-size:16.5px; margin:0; color:var(--text); font-weight:600; }
.service-card h3 a{ color:inherit; text-decoration:none; }
.service-card p{ font-size:13.8px; line-height:1.55; color:var(--text-muted); margin:0; flex-grow:1; }
.service-link{ position:relative; z-index:1; font-size:13.5px; font-weight:600; color:var(--navy); display:inline-flex; align-items:center; gap:5px; }
.service-link svg{ width:14px; height:14px; }
/* The whole card is clickable, not just the "Learn more" text — the link's
   hit area is stretched to cover the card via this pseudo-element, so the
   real click targets (heading link, "Learn more" link) stay valid,
   distinct HTML links rather than one link wrapping the whole card. */
.service-card h3 a::after{ content:''; position:absolute; inset:0; }

/* Area / coverage */
.area-section{ background:var(--bg-elev); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.area-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:1200px; margin:0 auto; padding:76px 24px; }
.area-wrap.centered{ display:block; text-align:center; padding:56px 24px; }
.area-wrap h2{ font-family:var(--font-head); font-size:clamp(24px,2.8vw,32px); margin:0 0 14px; letter-spacing:-0.01em; }
.area-wrap p{ color:var(--text-muted); font-size:15px; line-height:1.6; margin:0 0 22px; }
.area-wrap.centered p{ margin:0; }
.area-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.area-wrap.centered .area-chips{ justify-content:center; margin-top:20px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--bg-elev-2); border:1px solid var(--border-soft); color:var(--text-muted); font-size:13.5px; padding:8px 14px; border-radius:999px; }
.chip svg{ color:var(--accent); width:13px; height:13px; }


/* Checklist */
.check-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 32px; }
.check-grid.compact{ max-width:760px; margin:0 auto; gap:16px 32px; }
.check-item{ display:flex; align-items:flex-start; gap:12px; }
.check-item .ic{ color:var(--success); flex-shrink:0; margin-top:2px; width:20px; height:20px; }
.check-item div b{ display:block; color:var(--text); font-size:15px; margin-bottom:2px; font-weight:600; }
.check-item div span{ font-size:13.5px; color:var(--text-muted); line-height:1.5; }
.check-item span.plain{ font-size:14.5px; color:var(--text); }

/* Process steps */
.process-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.process-step{ text-align:center; padding:8px; }
.process-num{ width:44px; height:44px; border-radius:999px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:17px; margin:0 auto 16px; }
.process-step h3{ font-family:var(--font-head); font-size:16.5px; margin:0 0 8px; }
.process-step p{ font-size:13.8px; color:var(--text-muted); line-height:1.6; margin:0; max-width:280px; margin-inline:auto; }

/* Situations grid */
.situations-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.situation-item{ display:flex; align-items:center; gap:14px; background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:12px; padding:18px 20px; }
.situation-item .ic{ width:36px; height:36px; border-radius:9px; background:var(--alert-soft); color:var(--alert); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.situation-item .ic svg{ width:18px; height:18px; }
.situation-item span{ font-size:14.5px; color:var(--text); font-weight:500; }

/* Accordion (service pages) */
.acc-list{ display:flex; flex-direction:column; gap:14px; max-width:900px; margin:0 auto; }
.acc-item{ background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; }
.acc-head{ width:100%; display:flex; align-items:center; gap:16px; padding:22px 24px; background:none; border:none; cursor:pointer; text-align:left; color:var(--text); }
.acc-icon{ width:42px; height:42px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.acc-icon svg{ width:21px; height:21px; }
.acc-head-text{ flex-grow:1; }
.acc-head-text h3{ font-family:var(--font-head); font-size:16.5px; margin:0 0 4px; font-weight:600; }
.acc-head-text span{ font-size:13.5px; color:var(--text-muted); }
.acc-chev{ width:20px; height:20px; color:var(--text-faint); flex-shrink:0; }
.acc-body{ padding:0 24px 26px 82px; }
.acc-body p{ font-size:14px; line-height:1.65; color:var(--text-muted); margin:0 0 14px; }
.acc-body ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.acc-body li{ display:flex; align-items:flex-start; gap:9px; font-size:13.8px; color:var(--text-muted); }
.acc-body li svg{ width:15px; height:15px; color:var(--success); flex-shrink:0; margin-top:3px; }
@media (max-width:600px){ .acc-body{ padding-left:24px; } }

/* CTA banner */
.cta-banner{ background:linear-gradient(135deg, oklch(58% 0.18 35 / 0.16), oklch(78% 0.15 75 / 0.09)); border:1px solid var(--border-soft); border-radius:20px; padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-banner h2{ font-family:var(--font-head); font-size:25px; margin:0 0 6px; letter-spacing:-0.01em; }
.cta-banner p{ color:var(--text-muted); margin:0; font-size:14.5px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Contact page — no form, this is an emergency service: phone and
   WhatsApp are the entire point, everything else is reference info. */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; max-width:1180px; margin:0 auto; padding:24px 24px 80px; }

.info-card{ background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:16px; padding:28px; margin-bottom:20px; }
.info-card h3{ font-family:var(--font-head); font-size:15px; margin:0 0 16px; letter-spacing:-0.01em; }
.info-row{ display:flex; align-items:flex-start; gap:13px; padding:14px 0; border-top:1px solid var(--border-soft); }
.info-row:first-of-type{ border-top:none; padding-top:0; }
.info-row .ic{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-row .ic svg{ width:19px; height:19px; }
.info-row b{ display:block; font-size:14px; color:var(--text); margin-bottom:2px; }
.info-row span, .info-row a{ font-size:13.5px; color:var(--text-muted); }

/* Capability grid — replaces a photo gallery with icon + label cards
   (fleet capability, not stock photography we don't have rights to). */
.capability-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.capability-card{ border-radius:14px; background:var(--bg-elev); border:1px solid var(--border-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:20px; min-height:140px; }
.capability-card .ic{ width:48px; height:48px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.capability-card .ic svg{ width:24px; height:24px; }
.capability-card b{ font-family:var(--font-head); font-size:14px; color:var(--text); font-weight:600; }
.capability-card span{ font-size:12.5px; color:var(--text-faint); }
@media (max-width:760px){ .capability-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Accreditation / trust badge row (area pages) */
.accred-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.accred-badge{ display:flex; align-items:center; gap:12px; background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:12px; padding:14px 20px; }
.accred-badge .ic{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.accred-badge .ic svg{ width:19px; height:19px; }
.accred-badge span{ font-size:14px; font-weight:600; color:var(--text); }

/* Testimonials — placeholder cards only until real reviews are supplied */
.testimonials{ padding:64px 24px; border-top:1px solid var(--border-soft); background:var(--bg-elev); }
.testimonials-inner{ max-width:1200px; margin:0 auto; }
.testimonials-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.testimonials-head h2{ font-family:var(--font-head); font-size:22px; margin:0 0 8px; letter-spacing:-0.01em; }
.rating-line{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.google-g{ width:20px; height:20px; flex-shrink:0; }
.rating-stars{ display:flex; gap:2px; color:#f5a623; }
.rating-stars svg{ width:16px; height:16px; }
.rating-line span{ font-size:13.5px; color:var(--text-muted); }
.testimonials-head .carousel-row{ width:auto; }

.carousel-row{ display:flex; align-items:center; gap:14px; width:100%; }
.carousel-btn{ width:40px; height:40px; border-radius:999px; background:var(--bg-elev); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.carousel-btn svg{ width:18px; height:18px; }
.carousel-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.carousel-btn:disabled{ opacity:.3; cursor:default; }
.carousel-viewport{ overflow:hidden; flex-grow:1; }
.carousel-track{ display:flex; gap:20px; transition:transform .4s cubic-bezier(.4,0,.2,1); }

.review-slide{ flex:0 0 calc((100% - 2 * 18px) / 3); }
.review-slide:only-child{ flex:0 0 100%; }
.testimonial-card{ height:100%; background:var(--bg-elev-2); border:1px solid var(--border-soft); border-radius:14px; padding:22px; box-sizing:border-box; }
.testimonial-card .rating-stars{ margin-bottom:12px; }
.testimonial-card p{ font-size:14px; line-height:1.6; color:var(--text); margin:0 0 14px; font-style:italic; }
.testimonial-card cite{ font-style:normal; font-size:13px; color:var(--text-faint); }
.testimonial-card.placeholder{ border-style:dashed; }
.testimonial-card.placeholder p{ color:var(--text-faint); font-style:normal; }
@media (max-width:900px){ .review-slide{ flex:0 0 calc((100% - 1 * 16px) / 2); } }
@media (max-width:600px){ .review-slide{ flex:0 0 100%; } }

/* FAQ accordion */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:820px; margin:0 auto; }
.faq-list + .faq-list{ margin-top:16px; }
.faq-category-label{ font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--text); max-width:820px; margin:0 auto 12px; }
.faq-item{ background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:12px; overflow:hidden; }
.faq-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:none; border:none; cursor:pointer; text-align:left; color:var(--text); }
.faq-head h3{ font-family:var(--font-head); font-size:15px; margin:0; font-weight:600; }
.faq-chev{ width:18px; height:18px; color:var(--text-faint); flex-shrink:0; }
.faq-body{ padding:0 20px 18px; }
.faq-body p{ font-size:14px; line-height:1.6; color:var(--text-muted); margin:0; }

/* Safety callout — M25 guide, urgent/important information */

.safety-callout{ background:var(--alert-soft); border:1px solid oklch(58% 0.18 35 / 0.32); border-radius:16px; padding:26px 28px; display:flex; gap:16px; align-items:flex-start; }
.safety-callout .ic{ width:40px; height:40px; border-radius:10px; background:oklch(58% 0.18 35 / 0.18); color:var(--alert); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.safety-callout .ic svg{ width:21px; height:21px; }
.safety-callout h3{ font-family:var(--font-head); font-size:16px; margin:0 0 6px; color:var(--text); }
.safety-callout p{ font-size:14px; line-height:1.6; color:var(--text-muted); margin:0; }

/* Guide article body */
.article{ max-width:760px; margin:0 auto; padding:56px 24px 80px; }
.article h2{ font-family:var(--font-head); font-size:22px; margin:40px 0 14px; letter-spacing:-0.01em; }
.article h2:first-child{ margin-top:0; }
.article p{ font-size:15.5px; line-height:1.7; color:var(--text-muted); margin:0 0 18px; }
.article ul, .article ol{ margin:0 0 18px; padding-left:22px; color:var(--text-muted); font-size:15px; line-height:1.7; }
.article li{ margin-bottom:8px; }
.article .safety-callout{ margin:28px 0; }

/* Guides grid */
.guide-card{ position:relative; background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:10px; }
.guide-card:hover{ border-color:var(--accent); }
.guide-card span.tag{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); }
.guide-card h3{ font-family:var(--font-head); font-size:17px; margin:0; color:var(--text); }
.guide-card h3 a{ color:inherit; text-decoration:none; }
.guide-card h3 a::after{ content:''; position:absolute; inset:0; }
.guide-card p{ font-size:13.8px; line-height:1.55; color:var(--text-muted); margin:0; flex-grow:1; }

/* Breadcrumb */
/* Sitemap page — town x service directory table */
.sitemap-table{ width:100%; border-collapse:collapse; background:var(--bg-elev); border-radius:14px; overflow:hidden; border:1px solid var(--border-soft); }
.sitemap-table th, .sitemap-table td{ padding:12px 16px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.sitemap-table th{ background:var(--bg-elev-2); color:var(--text-faint); font-family:var(--font-head); font-size:12px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.sitemap-table tr:last-child td{ border-bottom:none; }
.sitemap-table-town{ font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
.sitemap-table-town svg{ width:14px; height:14px; color:var(--accent); flex-shrink:0; }
.sitemap-table td a{ display:inline-flex; align-items:center; gap:5px; color:var(--navy); font-weight:600; }
.sitemap-table td a:hover{ color:var(--accent-hover); }
.sitemap-table td a svg{ width:13px; height:13px; color:var(--success); }

.info-table-wrap{ overflow-x:auto; max-width:1000px; margin:0 auto; }
.info-table{ width:100%; border-collapse:collapse; background:var(--bg-elev); border-radius:14px; overflow:hidden; border:1px solid var(--border-soft); }
.info-table th, .info-table td{ padding:14px 18px; text-align:left; font-size:14px; line-height:1.5; color:var(--text-muted); border-bottom:1px solid var(--border-soft); vertical-align:top; }
.info-table th{ background:var(--bg-elev-2); color:var(--text-faint); font-family:var(--font-head); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; white-space:nowrap; }
.info-table tr:last-child td{ border-bottom:none; }
.info-table td:first-child{ font-weight:600; color:var(--text); white-space:nowrap; }
.info-table td:nth-child(2){ font-weight:600; color:var(--navy); white-space:nowrap; }

.breadcrumb{ max-width:1200px; margin:0 auto; padding:16px 24px 0; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-faint); flex-wrap:wrap; }
.breadcrumb a{ color:var(--text-faint); }
.breadcrumb a:hover{ color:var(--navy); text-decoration:underline; }
.breadcrumb svg{ width:13px; height:13px; }

/* Real map embed (contact + area pages) */
.map-embed{ border-radius:16px; overflow:hidden; border:1px solid var(--border); aspect-ratio:16/10; }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(0.1) contrast(1.02); }

.coverage-leaflet-map{ border-radius:16px; overflow:hidden; border:1px solid var(--border); aspect-ratio:16/10; background:var(--bg-elev-2); }
.base-marker svg{ width:22px; height:22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }
.leaflet-popup-content b{ font-family:var(--font-head); }
.leaflet-popup-content a{ color:var(--navy); text-decoration:none; }

/* Footer */
.footer{ border-top:1px solid var(--border-soft); padding:60px 24px 30px; background:var(--bg-elev); }
.footer-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-col h3{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:0 0 16px; font-weight:600; }
.footer-col p{ font-size:13.8px; color:var(--text-muted); line-height:1.6; margin:0 0 16px; }
.footer-col a{ display:block; font-size:14px; color:var(--text-muted); margin-bottom:10px; }
.footer-col a:hover{ color:var(--navy); }
.footer-contact-row{ display:flex; align-items:flex-start; gap:9px; margin-bottom:12px; font-size:13.8px; color:var(--text-muted); }
.footer-contact-row svg{ width:15px; height:15px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.footer-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.footer-socials{ display:flex; gap:10px; margin-top:16px; }
.footer-socials a{ width:34px; height:34px; border-radius:999px; background:var(--bg-elev-2); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; color:var(--text-muted); margin-bottom:0; }
.footer-socials a:hover{ color:var(--accent); border-color:var(--accent); }
.footer-socials svg{ width:16px; height:16px; }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-faint); border:1px solid var(--border-soft); padding:6px 10px; border-radius:8px; }
.badge svg{ width:12px; height:12px; color:var(--accent); }
.footer-bottom{ max-width:1200px; margin:44px auto 0; padding-top:22px; border-top:1px solid var(--border-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--text-faint); }
.footer-bottom a{ text-decoration:underline; text-underline-offset:2px; }

/* Floating mobile action buttons */
.mobile-fabs{ display:none; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:70; flex-direction:row; align-items:center; gap:12px; }
.fab{ width:50px; height:50px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 12px 28px -8px oklch(40% 0.02 60 / 0.28); }
.fab svg{ width:23px; height:23px; }
.fab-call{ background:var(--alert); }
/* WhatsApp is the primary mobile CTA — bigger, outermost, and pulses to
   draw the eye, since it's the channel most people actually prefer to use
   from a phone. */
.fab-whatsapp{ background:#25D366; width:58px; height:58px; animation:whatsapp-pulse 2.6s ease-in-out infinite; }
.fab-whatsapp svg{ width:27px; height:27px; }
@media (prefers-reduced-motion: reduce){ .fab-whatsapp{ animation:none; } }
@media (max-width:760px){ .mobile-fabs{ display:flex; } }

/* Deeper than WhatsApp's #25D366 so white text passes WCAG AA (5.3:1 vs 2:1);
   icon-only WhatsApp buttons keep the brighter brand green. */
.btn-whatsapp{ background:#0F7B45; color:#fff; }
.btn-whatsapp:hover{ background:#0B6E3A; color:#fff; }
@media (min-width:761px){ .btn-whatsapp, .whatsapp-row{ display:none; } }
/* Same WhatsApp-green styling as .btn-whatsapp, but visible at every
   width — for the handful of spots (contact page) where WhatsApp needs
   to be a primary, always-visible action rather than a mobile-only one. */
.btn-whatsapp-always{ background:#0F7B45; color:#fff; }
.btn-whatsapp-always:hover{ background:#0B6E3A; color:#fff; }

/* WhatsApp desktop modal — a QR code instead of trying to cold-launch the
   desktop/web app, which isn't reliable if WhatsApp isn't already linked
   on this machine. */
.whatsapp-modal-overlay{ position:fixed; inset:0; z-index:200; background:oklch(20% 0.02 55 / 0.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.whatsapp-modal-overlay.hidden{ display:none; }
.whatsapp-modal{ position:relative; background:var(--bg-elev); border-radius:20px; padding:32px; max-width:340px; width:100%; text-align:center; box-shadow:0 40px 80px -24px oklch(20% 0.02 55 / 0.4); }
.whatsapp-modal-close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:999px; border:1px solid var(--border); background:var(--bg-elev-2); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.whatsapp-modal-close svg{ width:15px; height:15px; }
.whatsapp-modal-close:hover{ color:var(--text); border-color:var(--text-faint); }
.whatsapp-modal-icon{ width:48px; height:48px; border-radius:999px; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.whatsapp-modal-icon svg{ width:24px; height:24px; }
.whatsapp-modal h3{ font-family:var(--font-head); font-size:19px; margin:0 0 8px; }
.whatsapp-modal p{ font-size:13.5px; color:var(--text-muted); margin:0 0 18px; line-height:1.5; }
.whatsapp-modal-qr{ display:flex; align-items:center; justify-content:center; margin:0 auto 14px; padding:12px; background:#fff; border-radius:12px; border:1px solid var(--border-soft); width:184px; }
.whatsapp-modal-number{ font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--text); margin-bottom:20px !important; }

/* Featured image band — a real photo once you add one, a helpful
   placeholder (naming the exact file to add) until then. */
.featured-image{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:var(--bg-elev-2); border:1px solid var(--border-soft); max-width:1152px; margin:0 auto; }
.featured-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-image img[src*="coverage-map.jpg"]{ object-position:top; }
.featured-image-placeholder{ display:none; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; }
.featured-image-placeholder svg{ width:34px; height:34px; color:var(--text-faint); }
.featured-image-placeholder b{ font-family:var(--font-head); font-size:14px; color:var(--text-muted); }
.featured-image-placeholder span{ font-size:12.5px; max-width:340px; line-height:1.5; color:var(--text-faint); }
.featured-image-placeholder code{ background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:5px; padding:1px 6px; font-size:12px; color:var(--text-muted); }
.featured-image-caption{ position:absolute; z-index:2; left:16px; bottom:16px; background:var(--chip-bg); backdrop-filter:blur(10px); border:1px solid var(--chip-border); border-radius:10px; padding:8px 14px; font-size:13px; color:var(--text-muted); max-width:calc(100% - 32px); }

/* Full-bleed background-image band — a real photo once you add one; a
   plain warm dark band (not a broken image) when you haven't. */
.bg-band{ position:relative; overflow:hidden; padding:120px 24px; text-align:center; }
.bg-band-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center top; transition:opacity .3s ease; }
.bg-band-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, var(--navy) 0%, color-mix(in oklch, var(--navy) 80%, black) 100%); opacity:.86; }
.bg-band-content{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.bg-band-content h2{ font-family:var(--font-head); font-size:clamp(24px,2.8vw,32px); color:#fff; margin:10px 0 14px; letter-spacing:-0.01em; }
.bg-band-content p{ color:oklch(92% 0.01 60); font-size:15.5px; line-height:1.6; margin:0 0 22px; }

/* Pricing card (service & combo pages) */
.pricing-card{ background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:16px; padding:28px; display:flex; align-items:center; gap:20px; max-width:640px; margin:0 auto; }
.pricing-card .ic{ width:48px; height:48px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pricing-card .ic svg{ width:24px; height:24px; }
.pricing-card b{ display:block; font-family:var(--font-head); font-size:20px; color:var(--text); margin-bottom:3px; }
.pricing-card span{ font-size:13.5px; color:var(--text-muted); line-height:1.5; }

/* Job / case-study cards (real work, from the Jobs sheet) */
.job-card{ background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.job-card-photo{ aspect-ratio:4/3; background:var(--bg-elev-2); overflow:hidden; }
.job-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.job-card-photo-empty{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.job-card-photo-empty svg{ width:32px; height:32px; }
.job-card-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
.job-card-body h3{ font-family:var(--font-head); font-size:15.5px; margin:0; color:var(--text); }
.job-card-body p{ font-size:13.5px; line-height:1.55; color:var(--text-muted); margin:0; flex-grow:1; }
.job-card-date{ font-size:12px; color:var(--text-faint); }

/* Symptom list (breakdown-type pages) */
.symptom-list{ display:flex; flex-direction:column; gap:10px; max-width:640px; margin:0 auto; }
.symptom-item{ display:flex; align-items:center; gap:12px; background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:12px; padding:14px 18px; }
.symptom-item .ic{ width:32px; height:32px; border-radius:8px; background:var(--alert-soft); color:var(--alert); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.symptom-item .ic svg{ width:16px; height:16px; }
.symptom-item span{ font-size:14.5px; color:var(--text); }

/* Breakdown-type overview grid (common-breakdowns.html) */
.breakdown-card{ position:relative; background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:14px; padding:22px; display:flex; align-items:center; gap:16px; }
.breakdown-card:hover{ border-color:var(--accent); }
.breakdown-card .ic{ width:44px; height:44px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.breakdown-card .ic svg{ width:22px; height:22px; }
.breakdown-card b{ display:block; font-family:var(--font-head); font-size:15px; color:var(--text); margin-bottom:2px; }
.breakdown-card b a{ color:inherit; text-decoration:none; }
/* Only the heading is the real link — its ::after is stretched to cover
   the whole card, so the click area still feels like a normal card even
   though the description text underneath is plain, non-link text. */
.breakdown-card b a::after{ content:''; position:absolute; inset:0; }
.breakdown-card span{ font-size:13px; color:var(--text-faint); }

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-panel, .checker, .illus-panel{ max-width:460px; }
  .area-wrap{ grid-template-columns:1fr; }
  .check-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .situations-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .form-grid-2{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .grid-services.cols-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .grid-services{ grid-template-columns:1fr; }
  .grid-services.cols-3{ grid-template-columns:1fr; }
  .cta-banner{ flex-direction:column; align-items:flex-start; }
  .capability-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pricing-card{ flex-direction:column; text-align:center; }
  .breakdown-card{ flex-direction:column; text-align:center; }
  .footer-inner{ grid-template-columns:1fr; }
}

/* Service-page intro wording (Services.body in the spreadsheet) */
.prose-block p{ font-size:15.5px; line-height:1.7; color:var(--text-muted); }