/* =========================================================================
   Locations pages - /locations/ (index.html), /locations/<state>.html,
   /locations/<state>/<city>.html, /locations/canada/<province>.html
   /locations/locations.css

   Everything is under the egl- prefix. Colours come from page-head.css
   (--egct-*), which every page already loads, so the locations pages stay
   in step if the palette changes there.
   ========================================================================= */

.egl, .egl *{ box-sizing: border-box; }

/* -- spacing system -------------------------------------------------------
   One gap between every block on the page, one gap under every section
   heading, two widths: --egl-text for reading (copy, notes, FAQ) and the full
   container for tiles, cards and lists. Nothing carries its own side padding:
   the site container already gives the page its 16px edge on phones, and a
   second 16px inside it was pushing text in to 32px. */
.egl{
    --egl-gap: 56px;        /* between blocks */
    --egl-near: 28px;       /* between blocks that belong together */
    --egl-head: 20px;       /* under a section heading */
    --egl-text: 760px;      /* reading width */
    padding: 40px 0 var(--egl-gap);
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--egct-body, #777);
}
.egl > *{ margin-top: 0; margin-bottom: 0; }
.egl > * + *{ margin-top: var(--egl-gap); }
.egl > .egct-head{ margin: 12px 0 0; padding: 0; }                  /* right under the breadcrumb */
.egl > .egct-head + *,
.egl > .egl-stats + .egl-copy,
.egl .egl-section > .egl-stats + .egl-copy{ margin-top: var(--egl-near); }
.egl .egl-copy + .egl-note{ margin-top: 12px; }                      /* a source note hugs its text */
.egl-section > *{ margin-top: 0; margin-bottom: 0; }
.egl-section > h2{ margin-bottom: var(--egl-head); }

/* -- breadcrumb -------------------------------------------------------- */
.egl-crumbs{
    text-align: center; font-size: 14px; color: var(--egct-soft, #7A7E91);
}
.egl-crumbs ol{ list-style: none; margin: 0; padding: 0; display: inline; }
.egl-crumbs li{ display: inline; }
.egl-crumbs li + li::before{ content: "\203A"; margin: 0 8px; color: var(--egct-line, #D7E5F2); }
.egl-crumbs a{ color: var(--egct-steel, #548CBF); text-decoration: none; }
.egl-crumbs a:hover{ color: var(--egct-orange, #FF5A00); }

/* -- section headings --------------------------------------------------- */
.egl h2{
    margin: 0 0 var(--egl-head);
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
    color: var(--egct-navy, #123F72); text-align: center;
}

/* -- tile map (desktop and tablet) --------------------------------------
   One square per state, placed on a 12 x 8 grid by --c (column) and --r
   (row). Every state is the same size, so small eastern states are as easy
   to click as Texas. Hidden on phones, where the tiles would be too small
   to tap; the A-Z list below does that job there. */
.egl-map{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, auto);
    gap: 6px;
    max-width: var(--egl-text); margin: 0 auto 14px;
}
.egl-map a{
    grid-column: calc(var(--c) + 1); grid-row: calc(var(--r) + 1);
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: var(--egct-panel, #EEF5FC);
    border: 1px solid var(--egct-line, #D7E5F2);
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px; font-weight: 800; letter-spacing: .02em;
    color: var(--egct-navy, #123F72); text-decoration: none;
    transition: background .15s, color .15s, transform .15s;
}
.egl-map a.is-live{
    background: var(--egct-navy, #123F72); border-color: var(--egct-navy, #123F72); color: #fff;
}
.egl-map a:hover, .egl-map a:focus-visible{
    background: var(--egct-orange, #FF5A00); border-color: var(--egct-orange, #FF5A00);
    color: #fff; transform: translateY(-2px); outline: none;
}
.egl-legend{
    display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
    margin: 0 0 var(--egl-near); font-size: 14px; color: var(--egct-soft, #7A7E91);
}
.egl-legend span::before{
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px;
    vertical-align: -1px; border-radius: 3px;
    background: var(--egct-panel, #EEF5FC); border: 1px solid var(--egct-line, #D7E5F2);
}
.egl-legend .is-live::before{ background: var(--egct-navy, #123F72); border-color: var(--egct-navy, #123F72); }

/* -- A-Z state list ------------------------------------------------------ */
.egl-states{
    list-style: none; margin: 0; padding: 0;
    columns: 4; column-gap: 28px;
}
.egl-states li{ break-inside: avoid; margin: 0; padding: 0; }
.egl-states a{
    display: block; padding: 9px 4px;
    border-bottom: 1px solid var(--egct-line, #D7E5F2);
    font-size: 16px; color: var(--egct-muted, #51657E); text-decoration: none;
}
.egl-states a.is-live{ color: var(--egct-navy, #123F72); font-weight: 700; }
.egl-states a.is-live::after{
    content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px;
    border-radius: 50%; background: var(--egct-orange, #FF5A00); vertical-align: 2px;
}
.egl-states a:hover{ color: var(--egct-orange, #FF5A00); }

/* -- city cards ---------------------------------------------------------- */
.egl-cities{
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.egl-cities li{ margin: 0; padding: 0; }
.egl-cities a{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 18px; border-radius: 10px;
    background: #fff; border: 1px solid var(--egct-line, #D7E5F2);
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px; font-weight: 700; color: var(--egct-navy, #123F72); text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.egl-cities a::after{ content: "\2192"; color: var(--egct-orange, #FF5A00); font-weight: 400; }
.egl-cities a:hover{ border-color: var(--egct-steel, #548CBF); box-shadow: 0 4px 14px rgba(18,63,114,.10); }

/* Cities without a page yet: plain text, deliberately not styled like links. */
.egl-served{
    max-width: var(--egl-text); margin-left: auto !important; margin-right: auto !important;
    text-align: center; font-size: 16px; line-height: 1.8;
}
.egl-served b{ font-weight: 500; color: var(--egct-muted, #51657E); }

/* -- state numbers (from client data) ---------------------------------- */
.egl-stats{
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.egl-stats li{
    margin: 0; padding: 18px 12px; border-radius: 12px; text-align: center;
    background: var(--egct-panel, #EEF5FC);
}
.egl-stats b{
    display: block; margin-bottom: 4px;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em;
    color: var(--egct-navy, #123F72);
}
.egl-stats.three{ grid-template-columns: repeat(3, 1fr); }
.egl-stats li:first-child b{ color: var(--egct-orange, #FF5A00); }
.egl-stats span{ font-size: 14px; color: var(--egct-muted, #51657E); }


/* -- services: GBP optimization, AEO, GEO ------------------------------ */
.egl-svc{
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.egl-svc li{
    margin: 0; padding: 22px 20px; border-radius: 12px;
    background: #fff; border: 1px solid var(--egct-line, #D7E5F2);
    border-top: 4px solid var(--egct-orange, #FF5A00);
}
.egl-svc h3{
    margin: 0 0 8px;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--egct-navy, #123F72);
}
.egl-svc p{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--egct-body, #777); }

/* -- industries table ------------------------------------------------------ */
.egl-groups{
    list-style: none; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px;
}
.egl-groups li{
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    margin: 0; padding: 12px 2px; border-bottom: 1px solid var(--egct-line, #D7E5F2);
}
.egl-groups span{ font-size: 16px; font-weight: 700; color: var(--egct-navy, #123F72); }
.egl-groups small{
    display: block; margin-top: 2px;
    font-size: 13.5px; font-weight: 400; color: var(--egct-soft, #7A7E91);
}
.egl-groups b{
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px; font-weight: 800; color: var(--egct-orange, #FF5A00); white-space: nowrap;
}


.egl-note{
    max-width: var(--egl-text); margin-left: auto !important; margin-right: auto !important;
    font-size: 13px; color: var(--egct-soft, #7A7E91); text-align: center;
}

/* -- body copy (content files) ------------------------------------------ */
.egl-copy{
    max-width: var(--egl-text); margin-left: auto !important; margin-right: auto !important;
    font-size: 17px; line-height: 1.65; color: var(--egct-body, #777);
}
.egl-copy h2{ text-align: left; font-size: 24px; margin-top: 34px; }
.egl-copy p{ margin: 0 0 16px; }
.egl-copy > :last-child{ margin-bottom: 0; }
.egl-copy ul{ margin: 0 0 18px 22px; padding: 0; }
.egl-copy li{ margin: 0 0 8px; }
.egl-copy strong{ color: var(--egct-navy, #123F72); }
.egl-copy a{ color: var(--egct-blue, #0167CD); text-decoration: none; }
.egl-copy a:hover{ color: var(--egct-orange, #FF5A00); }

/* -- call to action ------------------------------------------------------ */
.egl-cta{
    padding: 40px 28px;
    border-radius: 14px; background: var(--egct-panel, #EEF5FC); text-align: center;
}
.egl-cta p{ max-width: 56ch; margin: 0 auto 22px; font-size: 17px; line-height: 1.55; color: var(--egct-muted, #51657E); }
.egl-btns{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.egl-btn{
    display: inline-block; padding: 14px 26px; border-radius: 8px;
    background: var(--egct-orange, #FF5A00); border: 2px solid var(--egct-orange, #FF5A00);
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px; font-weight: 800; color: #fff; text-decoration: none;
}
.egl-btn:hover{ background: #E04F00; border-color: #E04F00; color: #fff; }
.egl-btn.alt{ background: transparent; border-color: var(--egct-navy, #123F72); color: var(--egct-navy, #123F72); }
.egl-btn.alt:hover{ background: var(--egct-navy, #123F72); color: #fff; }

/* -- phones --------------------------------------------------------------- */
@media only screen and (max-width: 767px){
    .egl{ --egl-gap: 40px; --egl-near: 20px; --egl-head: 16px; padding: 24px 0 var(--egl-gap); }
    .egl h2{ font-size: 22px; }
    .egl-map, .egl-legend{ display: none; }
    .egl-stats, .egl-stats.three{ grid-template-columns: 1fr 1fr; gap: 10px; }
    .egl-stats b{ font-size: 24px; }
    .egl-groups{ grid-template-columns: 1fr; }
    .egl-svc{ grid-template-columns: 1fr; gap: 12px; }
    .egl-states{ columns: 2; column-gap: 16px; }
    .egl-cities{ grid-template-columns: 1fr 1fr; gap: 10px; }
    .egl-cities a{ padding: 14px; font-size: 15px; }
    .egl-copy{ font-size: 16px; }
    .egl-cta{ padding: 28px 18px; border-radius: 12px; }
    .egl-btn{ width: 100%; }
}
@media only screen and (max-width: 379px){
    .egl-cities{ grid-template-columns: 1fr; }
}

/* -- city ZIP codes -------------------------------------------------------- */
.egl-zips{
    list-style: none; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.egl-zips li{
    margin: 0; padding: 6px 12px; border-radius: 999px;
    background: var(--egct-panel, #EEF5FC); font-size: 14px; font-weight: 500;
    color: var(--egct-navy, #123F72); font-variant-numeric: tabular-nums;
}

/* -- local FAQ (also marked up as FAQPage for answer engines) -------------- */
.egl-faq{ max-width: var(--egl-text); margin-left: auto !important; margin-right: auto !important; }
.egl-faq details{ border-bottom: 1px solid var(--egct-line, #D7E5F2); }
.egl-faq summary{
    cursor: pointer; list-style: none; padding: 16px 28px 16px 2px; position: relative;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px; font-weight: 700; color: var(--egct-navy, #123F72);
}
.egl-faq summary::-webkit-details-marker{ display: none; }
.egl-faq summary::after{
    content: "+"; position: absolute; right: 4px; top: 12px;
    font-size: 22px; font-weight: 400; color: var(--egct-orange, #FF5A00);
}
.egl-faq details[open] summary::after{ content: "\2212"; }
.egl-faq p{ margin: 0 0 16px; padding: 0 2px; font-size: 16px; line-height: 1.6; color: var(--egct-body, #777); }

/* -- funnel: early call-to-action strip, learn-more links, cross-sell ------ */
.egl-strip{
    display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
    padding: 18px 22px; border-radius: 12px;
    background: #fff; border: 1px solid var(--egct-line, #D7E5F2);
    border-left: 5px solid var(--egct-orange, #FF5A00);
}
.egl-strip p{ margin: 0; font-size: 16px; line-height: 1.5; color: var(--egct-muted, #51657E); }
.egl-strip b{ color: var(--egct-navy, #123F72); }
.egl-strip .egl-btn{ padding: 11px 18px; font-size: 15px; }
.egl-more{
    display: inline-block; margin-top: 12px;
    font-size: 14px; font-weight: 700; color: var(--egct-blue, #0167CD); text-decoration: none;
}
.egl-more::after{ content: " \2192"; }
.egl-more:hover{ color: var(--egct-orange, #FF5A00); }
.egl-svc li{ display: flex; flex-direction: column; }
.egl-svc li p{ flex: 1; }
.egl-also, .egl-cta-call{
    margin: 18px 0 0 !important; text-align: center; font-size: 15px; color: var(--egct-muted, #51657E);
}
.egl-also a, .egl-cta-call a{ color: var(--egct-blue, #0167CD); font-weight: 600; text-decoration: none; }
.egl-also a:hover, .egl-cta-call a:hover{ color: var(--egct-orange, #FF5A00); }
.egl-copy a, .egl-faq a{ color: var(--egct-blue, #0167CD); text-decoration: none; border-bottom: 1px solid rgba(1,103,205,.25); }
.egl-copy a:hover, .egl-faq a:hover{ color: var(--egct-orange, #FF5A00); }
@media only screen and (max-width: 767px){
    .egl-strip{ padding: 16px; }
    .egl-strip .egl-btns{ width: 100%; }
}

/* -- client reviews (quoted as written, linked to egumballreviews.com) ------ */
.egl-reviews{
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}
.egl-reviews li{
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    margin: 0; padding: 22px 22px 18px; border-radius: 12px;
    background: var(--egct-panel, #EEF5FC);
}
.egl-reviews li::before{ content: "\2605\2605\2605\2605\2605"; color: #F5B301; letter-spacing: 2px; font-size: 15px; }
.egl-reviews blockquote{
    margin: 0; flex: 1; font-size: 16px; line-height: 1.6; color: var(--egct-muted, #51657E);
}
.egl-rev-who{ font-size: 14px; font-weight: 700; color: var(--egct-navy, #123F72); text-decoration: none; }
.egl-rev-who:hover{ color: var(--egct-orange, #FF5A00); }
.egl-rev-sum{ margin: 18px 0 0 !important; text-align: center; font-size: 15px; color: var(--egct-muted, #51657E); }
.egl-rev-sum a{ color: var(--egct-blue, #0167CD); font-weight: 700; text-decoration: none; }

/* -- results: calls, directions, website visits (GBP performance) ---------- */
.egl-perf-tiles{
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.egl-perf-tiles li{
    margin: 0; padding: 24px 16px 20px; border-radius: 14px; text-align: center;
    background: var(--egct-navy, #123F72); color: #fff;
}
.egl-perf-tiles svg{ width: 30px; height: 30px; fill: var(--egct-orange, #FF5A00); }
.egl-perf-tiles b{
    display: block; margin: 8px 0 4px;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 34px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: #fff;
}
.egl-perf-tiles span{ font-size: 15px; color: #C9DAEE; }
.egl-perf-growth{
    margin: 18px 0 0 !important; text-align: center; font-size: 17px; color: var(--egct-muted, #51657E);
}
.egl-perf-growth b{
    display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px;
    background: #E7F6EC; color: #1B7A3A; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.egl-perf .egl-note{ margin-top: 12px !important; }
.egl-sample{
    margin: 0 0 14px !important; padding: 8px 12px; border-radius: 8px; text-align: center;
    background: #FFF4E5; color: #9A4D00; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
@media only screen and (max-width: 767px){
    .egl-perf-tiles{ grid-template-columns: 1fr; gap: 10px; }
    .egl-perf-tiles li{ display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: 12px; text-align: left; padding: 16px 18px; }
    .egl-perf-tiles svg{ grid-row: span 2; }
    .egl-perf-tiles b{ margin: 0; font-size: 28px; }
}
.egl-perf-fig{ margin: 0; }
.egl-perf-sum{ max-width: var(--egl-text); margin: 16px auto 0 !important; text-align: center; font-size: 16px; line-height: 1.6; color: var(--egct-muted, #51657E); }
.egl-perf-sum strong{ color: var(--egct-navy, #123F72); }

/* -- location banner: replaces the pricing photo on every locations page ---------
   Left: homepage type - Montserrat 900 headline in blue with the place in orange, big
   orange figures over small blue capitals, orange pill, "get found on" badges.
   Right: a three-step illustration that reads left to right (top to bottom on phones):
   they search -> the map finds them -> Maps and AI recommend you. Nothing overlaps the map. */
.egl-hero{
    background: radial-gradient(circle at 1px 1px, rgba(1,103,205,.08) 1px, transparent 0) 0 0 / 22px 22px,
                linear-gradient(180deg, #EAF3FD 0%, #FFFFFF 100%);
    border-bottom: 1px solid #DCE9F6; overflow: hidden;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.egl-hero *{ box-sizing: border-box; }
.egl-hero p, .egl-hero ul, .egl-hero ol, .egl-hero li{ margin: 0; padding: 0; list-style: none; }
.egl-hero-inner{
    position: relative; max-width: 1180px; margin: 0 auto; padding: 36px 24px;
    display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); align-items: center; gap: 32px;
}
.egl-hero-title{
    margin: 0 0 20px !important; font-size: 44px; font-weight: 900; line-height: 1.02;
    letter-spacing: -.025em; color: #0167CD;
}
.egl-hero-copy{ container-type: inline-size; }
/* the place always on its own line; a long name ("Palm Beach Gardens") shrinks to fit that line
   (--n = its length in characters; Montserrat 900 averages about .7em a character) */
.egl-hero-title em{
    display: block; font-style: normal; color: #FF5A00; white-space: nowrap;
    font-size: min(1em, calc(100cqi / (var(--n, 10) * .7)));
}
.egl-hero-stats{ margin: 0 0 24px !important; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 16px; }
.egl-hero-stats li + li{ padding-left: 16px !important; border-left: 2px solid rgba(1,103,205,.18); }
.egl-hero-stats b{
    display: block; font-size: 25px; font-weight: 900; line-height: .95; letter-spacing: -.02em; color: #FF5A00;
}
.egl-hero-stats span{
    display: block; margin-top: 4px; font-size: 11.5px; font-weight: 800; line-height: 1.15;
    color: #0167CD; text-transform: uppercase; letter-spacing: .02em; max-width: 130px;
}
.egl-hero-cta{
    display: inline-block; padding: 14px 28px; border-radius: 999px;
    background: #FF5A00; color: #fff !important; text-decoration: none !important;
    font-size: 16px; font-weight: 800; letter-spacing: .06em;
    box-shadow: 0 6px 16px rgba(255,90,0,.25); transition: transform .15s, background .15s;
}
.egl-hero-cta:hover{ background: #E04F00; transform: translateY(-1px); }
.egl-found{ margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.egl-found > span{ font-size: 11.5px; font-weight: 800; color: #51657E; text-transform: uppercase; letter-spacing: .06em; }
.egl-badges, .egl-side{ display: flex; flex-wrap: wrap; gap: 8px; }
.egl-badges li, .egl-side li{
    width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(18,63,114,.14);
}
.egl-badges svg{ width: 19px; height: 19px; }
.egl-side svg{ width: 17px; height: 17px; }
.egl-side{ display: none; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.egl-side li{ width: 34px; height: 34px; }

/* the three steps: one grid, so the captions share a top line and each step's content
   is centred in the same band - search | map | results. The map is the widest column. */
.egl-flow{
    display: grid; grid-template-columns: minmax(0, 1.12fr) 22px minmax(0, 1.4fr) 22px minmax(0, 1fr);
    column-gap: 6px; align-items: stretch;
}
.egl-step{ min-width: 0; display: flex; flex-direction: column; align-items: center; }
.egl-step > :last-child{ margin-top: auto !important; margin-bottom: auto !important; }
.egl-cap{
    height: 20px; margin: 0 0 14px !important; font-size: 11px; font-weight: 800; color: #123F72; text-transform: uppercase;
    letter-spacing: .05em; display: flex; align-items: center; gap: 6px; line-height: 1; white-space: nowrap;
}
.egl-cap i{
    font-style: normal; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #FF5A00; color: #fff;
    display: grid; place-items: center; font-size: 10.5px;
}
.egl-arrow{ width: 22px; height: 12px; align-self: center; margin-top: 34px; }
.egl-sbox, .egl-card{ font-family: Roboto, Arial, sans-serif; background: #fff; box-shadow: 0 12px 28px rgba(18,63,114,.16); }
.egl-search{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.egl-bigg{ width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(18,63,114,.14); }
.egl-bigg svg{ width: 34px; height: 34px; }
.egl-sbox{
    width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 24px;
    font-size: 13px; line-height: 1.35; color: #222;
}
.egl-sbox svg{ flex: none; width: 20px; height: 20px; }
.egl-sbox .egl-mag{ width: 16px; height: 16px; }
.egl-sbox > span{ flex: 1; min-width: 0; }
.egl-caret{ display: inline-block; width: 1.5px; height: 15px; margin-left: 2px; vertical-align: -2px; background: #222; }
.egl-maprow{ width: 100%; display: flex; align-items: center; gap: 10px; }
.egl-mapbox{ flex: 1; min-width: 0; height: 260px; display: flex; align-items: center; justify-content: center; }
.egl-hero-map{ width: 100%; height: 100%; overflow: visible; }
.egl-state{ stroke: #0167CD; stroke-width: 2.5; stroke-linejoin: round; }
.egl-dot{ fill: #FF5A00; stroke: #fff; stroke-width: 1.5; opacity: .75; }
.egl-dot-ring{ fill: rgba(255,90,0,.18); }
.egl-pin{ fill: #FF5A00; stroke: #fff; stroke-width: 1.6; }
.egl-stack{ width: 100%; display: flex; flex-direction: column; gap: 10px; }
.egl-card{ width: 100%; border-radius: 14px; overflow: hidden; }
.egl-bar, .egl-aihead{ display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: #555; }
.egl-bar{ padding: 8px 10px !important; border-bottom: 1px solid #eef2f6; }
.egl-bar svg, .egl-aihead svg{ flex: none; width: 13px; height: 13px; }
.egl-res li{ display: flex; gap: 8px; align-items: center; padding: 6px 10px !important; border-bottom: 1px solid #f3f5f8; opacity: .6; }
.egl-res li:last-child{ border-bottom: 0; }
.egl-res li.egl-top{ background: #FFF6EF; opacity: 1; }
.egl-res i{
    font-style: normal; flex: none; width: 17px; height: 17px; border-radius: 50%; background: #EAF2FC; color: #0167CD;
    font: 800 9.5px Montserrat, Arial, sans-serif; display: grid; place-items: center;
}
.egl-res .egl-top i{ background: #FF5A00; color: #fff; }
.egl-res li > span{ flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.egl-res b{ font-size: 11.5px; font-weight: 500; line-height: 1.25; color: #222; white-space: nowrap; }
.egl-res .egl-top b{ font-weight: 700; }
.egl-res small{ font-size: 10px; color: #F5B301; white-space: nowrap; }
.egl-ai{ padding: 9px 11px 11px; }
.egl-aihead{ margin-bottom: 5px !important; font-weight: 700; color: #10A37F; }
.egl-ai-text{ margin: 0 0 8px !important; font-size: 11.5px; line-height: 1.45; color: #333; }
.egl-call{ display: block; text-align: center; padding: 6px 0; border-radius: 999px; background: #EAF7F2; color: #0B7A5D; font-size: 11.5px; font-weight: 700; }
.egl-illus{ margin: 14px 0 0 !important; font: 500 10px Roboto, Arial, sans-serif; color: #8A97A8; text-align: right; letter-spacing: .04em; }
/* play the story once: step 1, arrow, step 2, arrow, step 3 */
@media (prefers-reduced-motion: no-preference){
    .egl-flow > *{ opacity: 0; animation: egl-in .55s ease-out forwards; }
    .egl-flow > :nth-child(1){ animation-delay: .2s; }
    .egl-flow > :nth-child(2){ animation-delay: .7s; }
    .egl-flow > :nth-child(3){ animation-delay: 1s; }
    .egl-flow > :nth-child(4){ animation-delay: 1.5s; }
    .egl-flow > :nth-child(5){ animation-delay: 1.8s; }
    .egl-caret{ animation: egl-blink 1s steps(1) infinite; }
    @keyframes egl-in{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
    @keyframes egl-blink{ 50%{ opacity: 0; } }
}
/* tablets: headline and stats on top, the steps full width underneath */
@media only screen and (min-width: 768px) and (max-width: 1099px){
    .egl-hero-inner{ grid-template-columns: 1fr; gap: 30px; padding: 36px 32px; }
    .egl-hero-copy{ display: grid; grid-template-columns: auto 1fr; gap: 4px 32px; align-items: center; }
    .egl-hero-title{ grid-column: 1 / -1; }
    .egl-hero-stats{ margin: 0 !important; }
    .egl-hero-cta{ justify-self: end; }
    .egl-found{ grid-column: 1 / -1; margin-top: 14px; }
    .egl-hero-visual{ width: 100%; max-width: 820px; justify-self: center; }
}
/* phones: everything centred, one column, steps stack top to bottom with room to breathe;
   the badges move to either side of the map */
@media only screen and (max-width: 767px){
    .egl-hero-inner{ grid-template-columns: 1fr; gap: 34px; padding: 32px 24px 36px; }
    .egl-hero-copy{ text-align: center; display: flex; flex-direction: column; align-items: center; }
    .egl-hero-title{ font-size: 36px; margin-bottom: 22px !important; }
    .egl-hero-stats{
        width: 100%; max-width: 380px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0; margin-bottom: 26px !important;
    }
    .egl-hero-stats li{ padding: 0 6px !important; }
    .egl-hero-stats li + li{ padding-left: 6px !important; }
    .egl-hero-stats b{ font-size: clamp(17px, 5.4vw, 24px); }
    .egl-hero-stats span{ font-size: 10px; max-width: none; margin-top: 6px; }
    .egl-hero-cta{ font-size: 15px; padding: 14px 30px; }
    .egl-found{ display: none; }
    .egl-side{ display: flex; }
    .egl-hero-visual{ width: 100%; max-width: 360px; justify-self: center; }
    .egl-flow{ display: flex; flex-direction: column; align-items: center; gap: 0; }
    .egl-step{ width: 100%; }
    .egl-cap{ margin-bottom: 12px !important; }
    .egl-arrow{ transform: rotate(90deg); margin: 14px 0; }
    .egl-bigg{ display: none; }
    .egl-sbox{ padding: 14px 18px; }
    .egl-mapbox{ height: 200px; }
    .egl-res li{ padding: 7px 12px !important; }
    .egl-res b{ font-size: 12.5px; }
    .egl-ai{ padding: 12px 14px 14px; }
    .egl-ai-text{ font-size: 13px; }
    .egl-call{ padding: 8px 0; font-size: 12.5px; }
    .egl-illus{ text-align: center; }
}
/* Under 480px the site header is fixed (72px) and the banner starts underneath it - the pricing
   photo hid that. Start the banner's content below it. (480-767px: layout.css already pushes the
   banner down 75px, so nothing is needed there.) */
@media only screen and (max-width: 479px){ .egl-hero-inner{ padding-top: 96px; } }