/* LakeMaryElectric.com — zero external requests. Every byte here is served
   from our own origin so Largest Contentful Paint never waits on a third
   party. No webfonts, no icon library, no framework: Core Web Vitals are a
   ranking input and this site's whole competitive edge is being faster and
   more local than the Orlando-wide companies we're outranking. */

:root{
  --ink:#01162E;
  --navy:#022247;          /* sampled from logo — footer, buttons, headings */
  --navy-2:#093162;        /* Stitch royal-navy band under the hero */
  --steel:#40536E;
  --mute:#68798F;
  --blue:#0070C9;          /* sampled from logo bolt — 5.05:1 with white text */
  --blue-dk:#0F5FA8;       /* hover / links on light grounds (6.52:1) */
  --blue-lt:#5AA9E6;       /* accent TEXT on navy grounds (6.24:1 on --navy) */
  --red:#C4302A;           /* "CALL US NOW" label, from the Stitch design */
  --scrim:rgba(12,24,48,.72); /* hero photo overlay — keeps white text AA */
  --paper:#FFFFFF;
  --mist:#F4F6F9;
  --line:#E1E6ED;
  --good:#0F8A5F;
  --alert:#C6362B;
  --radius:10px;
  --shadow:0 1px 2px rgba(11,18,32,.06),0 8px 24px rgba(11,18,32,.08);
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-2)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- Top utility bar: license number lives here on every page.
   Florida Statute 489.119 requires the EC number on all advertising,
   and a visible license is also the single strongest trust signal a
   brand-new contractor can show a homeowner. ---------- */
.topbar{background:var(--ink);color:#C8D2E0;font-size:13.5px;padding:7px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar strong{color:#fff;font-weight:600}
.topbar a{color:var(--blue-lt);text-decoration:none;font-weight:600}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:28px;min-height:84px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.brand .bolt{width:30px;height:30px;flex:0 0 30px;background:var(--navy);border-radius:7px;display:grid;place-items:center}
/* Swapped for a real <img> automatically when assets/img/logo.png exists. */
.brand img{height:34px;width:auto;display:block}
.foot-logo{height:64px;width:auto;display:block;margin-bottom:16px}
.brand .bolt svg{width:17px;height:17px;display:block}
.brand span.sub{display:block;font-size:11px;font-weight:600;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;line-height:1}
.nav{display:flex;align-items:center;gap:26px;margin:0 auto}
.nav a{color:var(--steel);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap}
.nav a:hover{color:var(--navy-2)}

/* Right-hand call block: label above the number, then the solid CTA. */
.head-cta{margin-left:auto;display:flex;align-items:center;gap:18px}
.head-call{text-align:right;line-height:1.15;white-space:nowrap}
.head-call span{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.head-call a{display:block;font-size:19px;font-weight:800;color:var(--navy);text-decoration:none;letter-spacing:-.02em}
.head-call a:hover{color:var(--blue-dk)}
@media(max-width:1080px){.nav{display:none}}
@media(max-width:760px){.head-cta .btn{display:none}.head-call{display:none}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--blue);color:#fff;font-weight:700;font-size:16px;
  padding:13px 22px;border-radius:var(--radius);text-decoration:none;border:0;
  cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:transform .12s ease,background .12s ease;
}
/* Inline SVGs carry no intrinsic size, so every context that holds one has to
   constrain it or it expands to fill the box. */
.btn svg{width:17px;height:17px;flex:0 0 17px}
.btn:hover{background:var(--blue-dk);transform:translateY(-1px)}
/* Dark sections: a white button outreads any blue on navy. */
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#E8F1FB}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2)}
.btn-ghost{background:transparent;color:var(--navy-2);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--mist);border-color:var(--navy-2)}
.btn-lg{font-size:18px;padding:16px 30px}
.btn-block{display:flex;width:100%}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;padding:104px 0 112px;overflow:hidden;
  background:var(--navy) center/cover no-repeat;
  background-image:linear-gradient(var(--scrim),var(--scrim)), var(--hero-photo, none);
}
/* Fallback texture when no photograph has been dropped in yet, so the hero
   reads as a deliberate surface rather than a flat empty block. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% 8%,rgba(31,128,229,.30),transparent 62%),
    radial-gradient(700px 380px at 12% 96%,rgba(31,128,229,.16),transparent 60%);
}
.hero .wrap{position:relative;z-index:1;max-width:840px;text-align:center}
@media(max-width:920px){.hero{padding:64px 0 72px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(31,128,229,.14);border:1px solid rgba(31,128,229,.35);color:var(--blue-lt);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 13px;border-radius:100px;margin-bottom:20px;line-height:1.35}
.eyebrow svg{width:15px;height:15px;flex:0 0 15px}
.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-.03em;margin:0 0 20px;font-weight:800;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--blue-lt)}
.hero .lede{font-size:clamp(17px,2vw,19.5px);color:#D3DEEC;margin:0 auto 32px;max-width:56ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.hero-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px}
.hero-points li{display:flex;gap:9px;align-items:center;color:#D6E0EC;font-size:15.5px}
.hero-points svg{flex:0 0 18px;width:18px;height:18px;color:var(--blue-lt)}

/* ---------- Lead capture card ---------- */
.lead-card{background:#fff;color:var(--ink);border-radius:14px;padding:26px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.lead-card h2{margin:0 0 6px;font-size:21px;letter-spacing:-.02em}
.lead-card p.sm{margin:0 0 18px;font-size:14.5px;color:var(--mute)}
.field{margin-bottom:13px}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:5px;color:var(--steel)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:8px;
  font:inherit;font-size:16px;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,128,229,.18)}
.form-note{font-size:12.5px;color:var(--mute);margin:12px 0 0;line-height:1.5}

/* ---------- Trust strip ---------- */
.trust{background:var(--mist);border-bottom:1px solid var(--line);padding:20px 0}
.trust .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.trust div{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--steel)}
.trust svg{width:19px;height:19px;color:var(--good);flex:0 0 19px}

/* ---------- Sections ---------- */
section{padding:66px 0}
section.tight{padding:48px 0}
section.mist{background:var(--mist)}
.sec-head{max-width:66ch;margin:0 0 38px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
h2{font-size:clamp(25px,3.2vw,35px);line-height:1.18;letter-spacing:-.025em;margin:0 0 14px;font-weight:800}
h3{font-size:20px;letter-spacing:-.015em;margin:0 0 9px;font-weight:700}
.sec-head p{font-size:17.5px;color:var(--steel);margin:0}
.kicker{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-dk);margin:0 0 10px}

/* ---------- Cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .ico{width:42px;height:42px;border-radius:9px;background:rgba(31,128,229,.12);display:grid;place-items:center;margin-bottom:15px;color:var(--blue-dk)}
.card .ico svg{width:22px;height:22px}
.card p{margin:0 0 16px;color:var(--steel);font-size:15.5px}
.card .more{margin-top:auto;font-weight:700;text-decoration:none;color:var(--navy-2);font-size:15px}
.card .more:hover{color:var(--blue-dk)}
.card h3 a{text-decoration:none;color:inherit}
.card h3 a:hover{color:var(--blue-dk)}

/* ---------- Stat callout ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:700px){.stats{grid-template-columns:1fr}}
.stat{background:var(--navy);color:#fff;border-radius:var(--radius);padding:24px}
.stat b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--blue-lt);line-height:1.1}
.stat span{font-size:14.5px;color:#BFCCDD;display:block;margin-top:6px}

/* ---------- Magnet blocks ---------- */
.magnet{border:2px solid var(--blue);border-radius:14px;background:linear-gradient(180deg,#F5FAFF,#fff);padding:30px;display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:center}
@media(max-width:860px){.magnet{grid-template-columns:1fr;padding:24px}}
.magnet h2{margin-bottom:12px}
.magnet ul{margin:0 0 20px;padding-left:20px;color:var(--steel);font-size:16px}
.magnet ul li{margin-bottom:7px}

/* ---------- Estimator ---------- */
.estimator{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.est-body{padding:28px}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px;margin-bottom:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label{display:block;border:1.5px solid var(--line);border-radius:9px;padding:14px 15px;cursor:pointer;font-weight:600;font-size:15.5px;transition:.12s}
.opt label small{display:block;font-weight:500;color:var(--mute);font-size:13px;margin-top:3px}
.opt input:checked+label{border-color:var(--blue);background:#F5FAFF;box-shadow:0 0 0 3px rgba(31,128,229,.16)}
.opt input:focus-visible+label{outline:2px solid var(--blue-dk);outline-offset:2px}
.est-result{background:var(--navy);color:#fff;padding:26px 28px}
.est-range{font-size:36px;font-weight:800;letter-spacing:-.03em;color:var(--blue-lt);line-height:1.1}
.est-result p{margin:8px 0 0;color:#BFCCDD;font-size:14.5px}
.est-lines{list-style:none;padding:0;margin:16px 0 0;font-size:14.5px;color:#D6E0EC}
.est-lines li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.est-lines li span:last-child{font-weight:700;color:#fff}

/* ---------- FAQ (native details = no JS, and Google parses it fine) ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:19px 40px 19px 0;font-weight:700;font-size:17px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:24px;font-weight:400;color:var(--blue-dk);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 19px;color:var(--steel);font-size:16px;max-width:75ch}

/* ---------- Prose (service + guide pages) ---------- */
.prose{max-width:72ch}
.prose p{font-size:17px;color:#22303f;margin:0 0 18px}
.prose h2{margin-top:42px}
.prose h3{margin-top:30px;font-size:20.5px}
.prose ul,.prose ol{color:#22303f;font-size:17px;padding-left:24px;margin:0 0 20px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink)}
.callout{background:var(--mist);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:18px 22px;margin:26px 0}
.callout p{margin:0;font-size:16px}
.callout p+p{margin-top:11px}
.page-head{background:var(--mist);border-bottom:1px solid var(--line);padding:46px 0 42px}
.page-head h1{font-size:clamp(28px,4vw,42px);line-height:1.14;letter-spacing:-.03em;margin:0 0 14px;font-weight:800;max-width:20ch}
.page-head p{font-size:18.5px;color:var(--steel);margin:0;max-width:62ch}
.crumbs{font-size:13.5px;color:var(--mute);margin-bottom:14px}
.crumbs a{color:var(--mute);text-decoration:none}
.crumbs a:hover{color:var(--navy-2);text-decoration:underline}
.layout{display:grid;grid-template-columns:1fr 340px;gap:52px;align-items:start}
@media(max-width:960px){.layout{grid-template-columns:1fr;gap:36px}}
.aside{position:sticky;top:96px;display:grid;gap:18px}
@media(max-width:960px){.aside{position:static}}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;margin:24px 0}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:480px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
th{background:var(--mist);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--steel)}
td strong{color:var(--ink)}

/* ---------- Areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.areas li{background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 15px;font-size:14.5px;font-weight:600;color:var(--steel)}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink);color:#98A6B8;padding:52px 0 30px;font-size:15px;margin-top:0}
.site-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px}
@media(max-width:860px){.site-foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-foot .cols{grid-template-columns:1fr}}
.site-foot h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.07em;margin:0 0 14px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:#98A6B8;text-decoration:none}
.site-foot a:hover{color:var(--blue-lt)}
.foot-legal{border-top:1px solid #1E2A3B;padding-top:22px;font-size:13.5px;line-height:1.7}
.foot-legal strong{color:#fff}

/* ---------- Sticky mobile call bar. Home-service traffic is majority
   mobile and majority "call now" intent; this is the single highest-ROI
   conversion element on the site. ---------- */
.callbar{display:none}
@media(max-width:760px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;
    left:0;right:0;bottom:0;z-index:80;background:var(--line);
    box-shadow:0 -3px 14px rgba(11,18,32,.16);
  }
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;text-decoration:none;font-weight:700;font-size:16px;background:var(--blue);color:#fff}
  .callbar a.alt{background:#fff;color:var(--navy-2)}
  .callbar svg{width:18px;height:18px}
  body{padding-bottom:56px}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Success glyph on the thank-you page. */
.okmark svg{width:32px;height:32px}

/* ---------- Mobile header corrections ----------
   Below the .callbar breakpoint the sticky bottom bar already carries a
   Call Now action, so the header CTA is redundant — and at 375px it was
   overflowing the viewport. Drop it and let the brand have the full width.
   The topbar's second line is dropped too: it cost ~45px above the fold to
   repeat a phone number that now appears in the call bar. The licence number
   stays, since Florida requires it on the page. */
@media(max-width:760px){
  .site-head .nav .btn{display:none}
  .brand{font-size:17px;min-width:0}
  .brand .sub{font-size:10px}
  .topbar{font-size:12.5px}
  .topbar .wrap > div:last-child{display:none}
}
@media(max-width:400px){
  .brand{font-size:15.5px;gap:8px}
  .brand .bolt{width:26px;height:26px;flex:0 0 26px}
}

/* ==========================================================================
   STITCH DESIGN LAYER
   Components taken from the Lake Mary Electric Stitch mockup: the white
   call card in the hero, the navy icon strip beneath it, alternating
   photo/copy feature rows, the "Why choose us" grid and testimonials.
   ========================================================================== */

/* ---------- Hero call card ----------
   The mockup's single strongest conversion element: a white card that makes
   the phone number the most prominent object on the page. Kept as a real
   <a> so it dials on mobile. */
.callcard{
  display:inline-block;background:#fff;border-radius:12px;
  padding:16px 40px;text-decoration:none;text-align:center;
  box-shadow:0 18px 44px rgba(6,14,30,.34);
  transition:transform .14s ease,box-shadow .14s ease;
}
.callcard:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(6,14,30,.4)}
.callcard span{
  display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:3px;
}
.callcard strong{
  display:block;font-size:clamp(26px,3.4vw,33px);font-weight:800;
  letter-spacing:-.025em;color:var(--navy);line-height:1.1;
}

/* ---------- Navy icon strip ----------
   Four circular icons directly under the hero. This is the mockup's primary
   wayfinding row, so each one is a link to the matching service page. */
.iconstrip{background:var(--navy-2)}
.iconstrip ul{
  list-style:none;margin:0;padding:30px 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
@media(max-width:720px){.iconstrip ul{grid-template-columns:repeat(2,1fr);padding:24px 0}}
.iconstrip a{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  text-decoration:none;color:#fff;font-size:14.5px;font-weight:700;
  letter-spacing:.02em;text-align:center;
}
.iconstrip .circ{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;transition:background .14s ease,transform .14s ease;
}
.iconstrip .circ svg{width:23px;height:23px;color:#fff}
.iconstrip a:hover .circ{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}

/* ---------- Photo slots ----------
   Real job photography is the missing ingredient until it arrives. These
   render as a labelled, deliberate placeholder rather than a broken image,
   and swap to the real photo the moment one is dropped in. */
.photo{
  position:relative;border-radius:12px;overflow:hidden;background:var(--panel-2,#E7EDF4);
  aspect-ratio:4/3;display:block;
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.ph{
  background:
    linear-gradient(135deg,rgba(31,128,229,.10),rgba(21,41,77,.14)),
    repeating-linear-gradient(45deg,#E7EDF4 0 12px,#DDE6F0 12px 24px);
  display:grid;place-items:center;border:1px solid var(--line);
}
.photo.ph span{
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);text-align:center;padding:0 18px;line-height:1.6;
}
.photo-stack{display:grid;gap:16px}
.photo-stack.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.photo-stack.two{grid-template-columns:1fr}}

/* ---------- Feature row: photo one side, copy the other ---------- */
.featrow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.featrow.flip > div:first-child{order:2}
@media(max-width:860px){
  .featrow{grid-template-columns:1fr;gap:30px}
  .featrow.flip > div:first-child{order:0}
}
.featrow h2{margin-bottom:16px}
.featrow p{color:var(--steel);font-size:17px;margin:0 0 18px;max-width:60ch}
.ticks{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:16.5px;color:var(--steel)}
.ticks svg{width:21px;height:21px;flex:0 0 21px;color:var(--blue-dk);margin-top:2px}
.ticks b{color:var(--ink);font-weight:600}

/* ---------- Why choose us ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.why{grid-template-columns:1fr}}
.why-item{text-align:center}
.why-item .circ{
  width:62px;height:62px;border-radius:50%;background:rgba(31,128,229,.11);
  display:grid;place-items:center;margin:0 auto 15px;color:var(--blue-dk);
}
.why-item .circ svg{width:27px;height:27px}
.why-item h3{font-size:17.5px;margin-bottom:7px}
.why-item p{font-size:15px;color:var(--steel);margin:0}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.quote p{font-size:16.5px;color:var(--steel);margin:0 0 18px;line-height:1.6}
.quote .who{margin-top:auto;display:flex;align-items:center;gap:12px}
.quote .who .av{
  width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 40px;
}
.quote .who b{display:block;font-size:15px;color:var(--ink)}
.quote .who small{display:block;font-size:13px;color:var(--mute)}
.stars{display:flex;gap:3px;margin-bottom:13px}
.stars svg{width:16px;height:16px;color:#E8A317}

/* Empty-state note for the testimonial block before any reviews exist. */
.quotes-empty{
  border:1px dashed var(--line);border-radius:12px;padding:30px;text-align:center;
  background:var(--panel,#F2F5F9);
}
.quotes-empty p{margin:0;color:var(--steel);font-size:16px;max-width:62ch;margin-inline:auto}

/* Tick lists appear on both light and navy grounds; scope the glyph colour to
   the surface rather than hard-coding one that fails on the other. */
.ticks svg{width:21px;height:21px;flex:0 0 21px;color:var(--blue-dk);margin-top:2px}
[style*="--navy-2"] .ticks svg,
section[style*="var(--navy"] .ticks svg{color:var(--blue-lt)}

/* Hero proof points: a centred flex row reads well on desktop, but once each
   item wraps to its own line the check glyph strands at the far left while the
   text stays centred. Below the wrap point, switch to a left-aligned column. */
@media(max-width:820px){
  .hero-points{flex-direction:column;align-items:flex-start;gap:12px;max-width:44ch;margin-inline:auto;text-align:left}
  .hero-points li{align-items:flex-start}
  .hero-points svg{margin-top:3px}
}