/* ==========================================================================
   Dante Mobile Locksmith  |  Design System v1.1
   Palette: Deep Navy #0E3A5B, Professional Blue #1677D8, Brand Red #E31C23,
   White #FFFFFF, Dark Gray #3A3A3A. White-first system.
   Type: Barlow Condensed (display), Barlow (body).
   Signature element: the Dispatch Route, a route line that connects the six
   verified location nodes. It encodes the real business model, which is a
   hub network that dispatches the closest available locksmith.
   ========================================================================== */

:root{
  --navy:#0E3A5B;
  --navy-deep:#092A44;
  --blue:#1677D8;
  --blue-soft:#E8F1FB;
  --blue-line:#C9DEF4;
  --accent-red:#E31C23;
  --accent-red-dark:#A71419;
  --white:#FFFFFF;
  --gray-ink:#131414;
  --gray-mid:#131414;
  --gray-soft:#F5F7FA;
  --gray-line:#E3E9EF;
  --green:#1E7F4F;
  --red:#B3261E;
  --radius:14px;
  --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(14,58,91,.06),0 8px 24px rgba(14,58,91,.08);
  --shadow-cta:0 6px 18px rgba(227,28,35,.35);
  --shadow-card-lift:0 4px 6px rgba(14,58,91,.08),0 16px 32px rgba(14,58,91,.12);
  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-body:"Barlow",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.33,.66,.66,1);
  --dur-fast:200ms;
  --dur-med:350ms;
  --dur-slow:600ms;
  --max-w:1160px;
  --sticky-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--gray-ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--sticky-h);
}
@media (min-width:900px){body{padding-bottom:0}}

img,svg{max-width:100%;display:block}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent-red);outline-offset:2px;border-radius:4px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:10px 16px;z-index:200;border-radius:0 0 8px 0;font-weight:600;
}
.skip-link:focus{left:0}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:.2px;
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem,6vw,3.6rem)}
h2{font-size:clamp(1.7rem,4vw,2.5rem)}
h3{font-size:clamp(1.25rem,2.6vw,1.55rem)}
h4{font-size:1.15rem}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--gray-mid)}
.eyebrow{
  font-family:var(--font-display);
  font-size:.95rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:.4rem;
}
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px}
.section{padding:56px 0}
@media (min-width:900px){.section{padding:80px 0}}
.section.alt{background:var(--gray-soft)}
.section.navy{background:var(--navy);color:#EAF2F9}
.section.navy h2,.section.navy h3{color:#fff}
.section.navy .lead{color:#BBD3E6}
.section-head{max-width:720px;margin-bottom:36px}
.center{text-align:center}
.center.section-head{margin-left:auto;margin-right:auto}

/* Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-body);font-weight:700;font-size:1.02rem;
  padding:.9rem 1.5rem;border-radius:999px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;line-height:1.1;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
  min-height:48px;
}
.btn:active{transform:translateY(1px)}
.btn-call{background:var(--accent-red);color:#fff;box-shadow:var(--shadow-cta)}
.btn-call:hover{background:var(--accent-red-dark)}
.btn-call.pulse{animation:pulse-glow var(--dur-slow) ease-in-out 3s infinite}
@media (prefers-reduced-motion:no-preference){
  @keyframes pulse-glow{
    0%,100%{box-shadow:var(--shadow-cta)}
    50%{box-shadow:var(--shadow-cta),0 0 0 8px rgba(227,28,35,.15)}
  }
}
.btn-text{background:var(--navy);color:#fff}
.btn-text:hover{background:var(--navy-deep)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--blue-line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{border-color:#fff}
.btn svg{flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:1.2rem 0 .4rem}
.cta-note{font-size:.92rem;color:var(--gray-mid);margin-top:.5rem}
.section.navy .cta-note{color:#A9C4DA}

/* Trust bar -------------------------------------------------------------
   Sits above the header. Carries the live Google rating plus two verifiable
   claims. Scrolls horizontally on small screens rather than shrinking the
   text, so nothing becomes unreadable. */
.trust-bar{
  background:var(--navy);color:#EAF2F9;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.trust-bar-inner{
  max-width:var(--max-w);margin:0 auto;padding:8px 20px;
  display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;
  font-size:.86rem;line-height:1.3;
}
.trust-badge{
  display:inline-flex;align-items:center;gap:8px;
  color:#EAF2F9;text-decoration:none;flex:none;
}
.trust-badge-label{color:#BBD3E6}
.trust-badge-label b{color:#fff;font-weight:700}
.trust-badge-icon{display:inline-flex;color:var(--accent-red);flex:none}
a.trust-badge-rating{
  gap:10px;padding:3px 10px 3px 4px;border-radius:999px;
  transition:background-color var(--dur-fast) var(--ease);
}
@media (hover:hover){
  a.trust-badge-rating:hover{background:rgba(255,255,255,.1)}
}
a.trust-badge-rating:focus-visible{outline:3px solid var(--accent-red);outline-offset:2px}
.trust-badge-figure{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:#fff;
  background:var(--accent-red);border-radius:999px;
  min-width:38px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 8px;flex:none;
}
.trust-badge-body{display:flex;flex-direction:column;gap:1px}
.stars{display:inline-flex;gap:1px;line-height:0}
.stars .star{color:rgba(255,255,255,.28);display:inline-flex}
.stars .star.full{color:#FFC107}
@media (max-width:900px){
  .trust-bar-inner{
    flex-wrap:nowrap;overflow-x:auto;gap:20px;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Keeps the row from being cut mid badge, so it reads as scrollable. */
    scroll-snap-type:x proximity;
  }
  .trust-bar-inner::-webkit-scrollbar{display:none}
  .trust-badge{scroll-snap-align:start}
  /* The quote before work badge stays on small screens. It used to be hidden
     here, which meant a trust claim the desktop page makes was missing from the
     mobile page. Google indexes the mobile rendering, so hiding it removed the
     claim from the indexed copy as well as from the phone in someone's hand.
     The row already scrolls sideways, so it costs no layout to keep. */
}
@media (max-width:520px){
  .trust-bar-inner{font-size:.8rem}
}

/* Rating panel (location pages) ----------------------------------------- */
.rating-panel{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--gray-line);border-left:5px solid #FFC107;
  border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 20px;
  box-shadow:var(--shadow-card);
}
.rating-panel-score{
  font-family:var(--font-display);font-weight:700;
  font-size:2.1rem;color:var(--navy);line-height:1;flex:none;
}
.rating-panel-body{flex:1;min-width:190px}
.rating-panel-body .stars{margin-bottom:3px}
.rating-panel-count{display:block;color:var(--gray-ink);font-size:.95rem;font-weight:600}
.rating-panel-meta{display:block;color:var(--gray-mid);font-size:.82rem;margin-top:2px}
.rating-panel-link{
  font-weight:700;font-size:.9rem;text-decoration:none;color:var(--blue);
  display:inline-flex;align-items:center;gap:.35rem;flex:none;
}
.rating-panel-link:hover{color:var(--navy);text-decoration:underline}
@media (max-width:520px){
  .rating-panel{gap:12px}
  .rating-panel-score{font-size:1.8rem}
}

/* Network rating summary (multi location surfaces) ---------------------- */
.rating-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.rating-grid{grid-template-columns:repeat(3,1fr)}}
.rating-tile{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius-sm);
  padding:14px 16px;display:flex;align-items:center;gap:12px;
  text-decoration:none;transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
@media (hover:hover){
  a.rating-tile:hover{border-color:var(--blue);transform:translateY(-2px)}
}
a.rating-tile:focus-visible{outline:3px solid var(--accent-red);outline-offset:2px}
.rating-tile-score{
  font-family:var(--font-display);font-weight:700;font-size:1.3rem;
  color:var(--navy);flex:none;
}
.rating-tile-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.rating-tile-name{color:var(--navy);font-weight:700;font-size:.97rem}
.rating-tile-count{color:var(--gray-mid);font-size:.85rem}

/* Header --------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--gray-line);
  transition:box-shadow var(--dur-med) var(--ease);
}
.site-header.scrolled{
  box-shadow:0 2px 8px rgba(14,58,91,.12);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:68px;max-width:var(--max-w);margin:0 auto;padding:0 20px;
}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  transition:opacity var(--dur-fast) var(--ease);
}
.brand:hover,
.brand:focus{opacity:0.9}
.brand-logo{
  height:58px;width:auto;aspect-ratio:311/91;
  display:block;flex:none;
}
@media (max-width:640px){
  .brand-logo{height:58px}
}
.main-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.main-nav a{
  display:block;padding:.6rem .8rem;border-radius:8px;color:var(--navy);
  text-decoration:none;font-weight:600;font-size:.98rem;
}
.main-nav a:hover{background:var(--blue-soft)}
.main-nav a[aria-current="page"]{color:var(--blue);background:var(--blue-soft)}
.main-nav a.in-section{color:var(--blue)}

/* Dropdown menus ------------------------------------------------------- */
.main-nav .has-dropdown{position:relative;display:flex;align-items:center}
.dropdown-toggle{
  display:inline-grid;place-items:center;background:none;border:none;
  cursor:pointer;color:var(--navy);padding:.5rem .25rem;margin-left:-.4rem;
  border-radius:6px;
}
.dropdown-toggle svg{transition:transform var(--dur-fast) var(--ease)}
.dropdown-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.main-nav .dropdown{
  position:absolute;top:100%;left:0;z-index:110;
  display:none;flex-direction:column;gap:2px;min-width:230px;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius-sm);
  box-shadow:0 12px 28px rgba(14,58,91,.16);padding:8px;margin:0;
}
.main-nav .dropdown li{width:100%}
.main-nav .dropdown a{
  padding:.55rem .7rem;font-size:.93rem;font-weight:600;white-space:nowrap;
}
/* Group heading inside a dropdown. Not a link and not focusable, so keyboard
   users tab straight between the real destinations. It stays readable to
   screen readers as list text, which is what gives the group its meaning. */
.main-nav .dropdown-heading{
  padding:.5rem .7rem .25rem;
  font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-mid);cursor:default;
}
.main-nav .dropdown-heading + li a{padding-top:.4rem}
/* Separator above every group except the first. */
.main-nav .dropdown-heading:not(:first-child){
  margin-top:6px;padding-top:10px;border-top:1px solid var(--gray-line);
}
@media (min-width:900px){
  .main-nav .has-dropdown:hover .dropdown,
  .main-nav .has-dropdown:focus-within .dropdown{display:flex}
}
.main-nav .has-dropdown.open .dropdown{display:flex}
.header-cta{display:flex;align-items:center;gap:10px}
.header-phone{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--accent-red);color:#fff;font-weight:800;border-radius:999px;
  padding:.62rem 1.1rem;font-size:1rem;white-space:nowrap;
}
.header-phone:hover{background:var(--accent-red-dark)}
.nav-toggle{
  display:none;background:#fff;border:2px solid var(--blue-line);border-radius:10px;
  width:46px;height:46px;place-items:center;cursor:pointer;color:var(--navy);
}
@media (max-width:899px){
  .nav-toggle{display:grid}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--gray-line);display:none;
    box-shadow:0 16px 30px rgba(14,58,91,.12);
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;padding:10px 14px 16px}
  .main-nav a{padding:.85rem .8rem;font-size:1.05rem}
  .header-cta .btn-text-desktop{display:none}

  /* Mobile dropdowns expand inline instead of floating over the page. */
  .main-nav .has-dropdown{flex-wrap:wrap;justify-content:space-between}
  .main-nav .has-dropdown > a{flex:1}
  .dropdown-toggle{padding:.85rem .6rem;margin-left:0}
  .main-nav .dropdown{
    position:static;width:100%;min-width:0;box-shadow:none;border:none;
    border-left:2px solid var(--blue-line);border-radius:0;
    padding:0 0 0 12px;margin:0 0 6px 8px;
  }
  .main-nav .dropdown a{font-size:.98rem;padding:.7rem .6rem}
}

/* Hero ------------------------------------------------------------------ */
.hero{
  background:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--gray-line);
}
.hero .container{
  position:relative;z-index:2;padding-top:48px;padding-bottom:48px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
@media (min-width:900px){.hero .container{padding-top:72px;padding-bottom:72px;gap:64px}}
@media (max-width:900px){.hero .container{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:40px}}
.hero-content{display:flex;flex-direction:column;gap:24px}
.hero h1{color:var(--navy);max-width:100%;margin:0}
.kinetic-word{display:inline-block}
.hero .lead{color:var(--gray-mid);max-width:100%;margin:0;font-size:clamp(1rem,2vw,1.15rem);line-height:1.6}
.hero-visual{
  position:relative;width:100%;aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--blue-soft) 0%,#f0f5fa 100%);
  border-radius:16px;overflow:hidden;
}
.hero-visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:900px){
  .hero-visual{aspect-ratio:16/10}
}
@media (max-width:640px){
  .hero-visual{aspect-ratio:4/3}
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.5rem;background:rgba(227,28,35,.08);
  border:1px solid rgba(227,28,35,.3);color:var(--accent-red);border-radius:999px;
  padding:.45rem 1rem;font-size:clamp(.8rem,.9vw,.95rem);font-weight:600;margin-bottom:1.5rem;
  animation:fadeInUp 0.6s ease-out;
}
.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-red);flex:none}
.hero-points{
  display:flex;flex-direction:column;gap:12px;margin:2rem 0 0;padding:0;list-style:none;
}
.hero-points li{
  display:flex;align-items:flex-start;gap:12px;font-size:clamp(.95rem,1.1vw,1.05rem);
  color:var(--gray-ink);line-height:1.5;animation:fadeInUp 0.6s ease-out;
}
.hero-points li span{flex:1}
.hero-points svg{color:var(--accent-red);flex:none;margin-top:3px;min-width:20px}
@media (prefers-reduced-motion:reduce){
  .hero-kicker,.hero-points li{animation:none}
}

/* Dispatch route, the signature element -------------------------------- */
.route{margin-top:44px}
.route-track{position:relative;padding:18px 0 0}
.route-line{
  position:absolute;top:38px;left:4%;right:4%;height:3px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--blue) 0 14px,transparent 14px 24px);
  background-size:200px 3px;opacity:.65;
  animation:dispatch-flow 8s linear infinite;
}
@media (prefers-reduced-motion:no-preference){
  @keyframes dispatch-flow{
    0%{background-position:0 0}
    100%{background-position:200px 0}
  }
  @keyframes fadeInUp{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
  }
}
@media (max-width:640px){
  .route-line{animation:none;background-position:0 0}
}
.route-stops{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;position:relative}
.route-stops li{display:flex;flex-direction:column;align-items:center;gap:8px;width:16%;text-align:center}
.route-node{
  width:16px;height:16px;border-radius:50%;background:var(--accent-red);
  border:3px solid #fff;box-shadow:0 0 0 3px rgba(227,28,35,.35);flex:none;margin-top:12px;
}
.route-stops span{
  font-family:var(--font-display);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.86rem;color:#121213;
}
.route-caption{font-size:.9rem;color:#0c0c0c;margin-top:14px}
@media (max-width:640px){
  .route-stops{flex-wrap:wrap;gap:14px 0}
  .route-stops li{width:33%}
  .route-line{display:none}
}
.route.on-light .route-stops span{color:var(--navy)}
.route.on-light .route-caption{color:var(--gray-mid)}
.route.on-light .route-node{border-color:var(--gray-soft)}

/* Trust strip ----------------------------------------------------------- */
.trust-strip{background:var(--blue-soft);border-bottom:1px solid var(--blue-line)}
.trust-strip .container{
  display:grid;grid-template-columns:1fr;gap:14px;padding-top:18px;padding-bottom:18px;
}
@media (min-width:760px){.trust-strip .container{grid-template-columns:repeat(4,1fr)}}
.trust-item{
  display:flex;gap:12px;align-items:flex-start;
  transition:transform var(--dur-med) var(--ease);
}
@media (hover:hover){
  .trust-item:hover{transform:translateY(-2px)}
}
.trust-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  background:rgba(22,119,216,.1);border-radius:10px;
  color:var(--blue);transition:all var(--dur-med) var(--ease);
}
@media (hover:hover){
  .trust-item:hover .trust-icon{
    background:rgba(22,119,216,.2);color:var(--navy);
  }
}
.trust-item b{display:block;color:var(--navy);font-size:.98rem;line-height:1.25;margin-bottom:.3rem}
.trust-item small{color:var(--gray-mid);font-size:.85rem;line-height:1.35;display:block}

/* Cards & grids ---------------------------------------------------------- */
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}
.grid.cols-4{grid-template-columns:1fr 1fr}
@media (min-width:700px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
}
.card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:8px;
  transition:box-shadow var(--dur-med) var(--ease),transform var(--dur-med) var(--ease);
}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-lift)}
}
.card h3 a{color:var(--navy);text-decoration:none}
.card h3 a:hover{color:var(--blue)}
.card p{color:var(--gray-mid);font-size:.97rem;margin:0}
.card .icon{
  width:46px;height:46px;border-radius:12px;background:var(--blue-soft);
  color:var(--blue);display:grid;place-items:center;margin-bottom:6px;
  transition:transform var(--dur-med) var(--ease),color var(--dur-med) var(--ease);
}
@media (hover:hover){
  .card:hover .icon{transform:scale(1.08)}
}
.card .card-link{
  margin-top:auto;padding-top:10px;font-weight:700;text-decoration:none;color:var(--blue);
  display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;
}
.card .card-link:hover{color:var(--navy)}
.card.emergency{border-color:#F9C79B;background:linear-gradient(180deg,#FFF7EF,#fff)}
.card.emergency .icon{background:#FDE7D2;color:var(--accent-red-dark)}

/* Location cards --------------------------------------------------------- */
.loc-card{position:relative}
.loc-card .pill{
  position:absolute;top:18px;right:18px;background:#E7F4EC;color:var(--green);
  font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:.25rem .7rem;
}
.loc-card ul{margin:.3rem 0 .6rem;padding-left:1.15rem;color:var(--gray-mid);font-size:.94rem}
.loc-card ul li{margin-bottom:.15rem}
.loc-meta{font-size:.92rem;color:var(--gray-mid)}
.loc-meta b{color:var(--navy)}

/* Steps ------------------------------------------------------------------ */
.steps{counter-reset:step;display:grid;gap:20px}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow-card);
}
.step::before{
  counter-increment:step;content:counter(step);
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--accent-red);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:1.25rem;margin-bottom:12px;
}
.step h3{margin-bottom:.35rem}
.step p{color:var(--gray-mid);font-size:.97rem;margin:0}

/* Comparison ------------------------------------------------------------- */
.compare{display:grid;gap:20px}
@media (min-width:760px){.compare{grid-template-columns:1fr 1fr}}
.compare .card ul{margin:.4rem 0 0;padding-left:1.15rem;color:var(--gray-mid)}
.compare .card ul li{margin-bottom:.35rem}
.badge{
  display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;border-radius:999px;padding:.28rem .75rem;margin-bottom:.6rem;
}
.badge.blue{background:var(--blue-soft);color:var(--blue)}
.badge.green{background:#E7F4EC;color:var(--green)}
.badge.orange{background:#FDE7D2;color:var(--accent-red-dark)}

/* Town grid ---------------------------------------------------------------*/
.town-groups{display:grid;gap:20px}
@media (min-width:760px){.town-groups{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.town-groups{grid-template-columns:repeat(3,1fr)}}
.town-group h3{font-size:1.15rem;display:flex;align-items:center;gap:.5rem}
.town-group h3 .route-node{margin:0;width:12px;height:12px}
.town-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:.4rem 0 0;padding:0}
.town-list li a,.town-list li span{
  display:inline-block;background:#fff;border:1px solid var(--gray-line);
  border-radius:999px;padding:.32rem .85rem;font-size:.9rem;color:var(--navy);
  text-decoration:none;
}
.town-list li a:hover{border-color:var(--blue);color:var(--blue)}

/* FAQ ---------------------------------------------------------------------*/
.faq{max-width:820px;margin:0 auto}
.faq details{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius-sm);
  margin-bottom:12px;box-shadow:var(--shadow-card);
  overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;
  align-items:center;padding:16px 20px;font-weight:700;color:var(--navy);font-size:1.02rem;
  transition:background-color var(--dur-med) var(--ease);
}
@media (hover:hover){
  .faq summary:hover{background-color:var(--blue-soft)}
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--font-display);font-size:1.5rem;color:var(--blue);
  line-height:1;flex:none;transition:transform var(--dur-med) var(--ease);
}
.faq details[open] summary::after{content:"\2212";transform:rotate(0deg)}
.faq .faq-a{
  padding:0 20px 18px;color:var(--gray-mid);
  display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-med) var(--ease);
}
.faq details[open] .faq-a{grid-template-rows:1fr}
.faq details:not([open]) .faq-a{grid-template-rows:0fr;overflow:hidden}
.faq .faq-a p{margin:0 0 .6em}
.faq .faq-a p:last-child{margin-bottom:0}

/* Facts block (AI readable) ----------------------------------------------*/
.facts{
  background:#fff;border:1px solid var(--gray-line);border-left:5px solid var(--blue);
  border-radius:var(--radius-sm);padding:24px 26px;box-shadow:var(--shadow-card);
}
.facts dl{margin:0;display:grid;gap:10px 24px;grid-template-columns:1fr}
@media (min-width:760px){.facts dl{grid-template-columns:180px 1fr}}
.facts dt{font-weight:800;color:var(--navy);font-size:.95rem}
.facts dd{margin:0;color:var(--gray-ink);font-size:.97rem}

/* Review / proof -----------------------------------------------------------*/
.proof-card{border-top:4px solid var(--accent-red)}
.proof-card .job{font-weight:800;color:var(--navy);display:block;margin-bottom:.2rem}
.proof-card small{color:var(--gray-mid)}

/* Direct answer block -------------------------------------------------------*/
.answer{
  background:var(--blue-soft);border:1px solid var(--blue-line);
  border-radius:var(--radius);padding:22px 24px;margin:0 0 26px;
}
.answer p{margin:0;font-size:1.06rem;color:var(--navy)}

/* Entity relationship map ---------------------------------------------------*/
.entity-map{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:0;max-width:960px;margin:0 auto;
}
.entity-node{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;text-decoration:none;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius-sm);
  padding:16px 18px;min-width:150px;box-shadow:var(--shadow-card);
  transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease);
}
a.entity-node:hover,
a.entity-node:focus{
  transform:translateY(-3px);box-shadow:var(--shadow-card-lift);border-color:var(--blue);
}
a.entity-node:focus{outline:3px solid var(--accent-red);outline-offset:2px}
.entity-node-static{cursor:default}
.entity-node-label{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);
}
.entity-node-name{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--navy);
  line-height:1.25;
}
.entity-connector{
  display:block;width:36px;height:2px;background:var(--blue-line);flex:none;
  margin:0 4px;
}
@media (max-width:820px){
  .entity-map{flex-direction:column;gap:0}
  .entity-node{width:100%;max-width:280px}
  .entity-connector{width:2px;height:24px;margin:0}
}

/* Page hero (interior) ------------------------------------------------------*/
.page-hero{
  background:#fff;border-bottom:1px solid var(--gray-line);
}
.page-hero .container{
  padding-top:clamp(40px,6vw,56px);padding-bottom:clamp(40px,6vw,56px);
  max-width:var(--max-w);margin:0 auto;
}
.page-hero h1{
  color:var(--navy);margin:0.5em 0 0.3em;
  font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.2;
}
.page-hero .lead{
  color:var(--gray-mid);max-width:720px;margin:0;
  font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.6;
}
.breadcrumbs{
  font-size:clamp(.75rem,.9vw,.85rem);margin-bottom:16px;color:var(--gray-mid);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.breadcrumbs a{
  color:var(--blue);text-decoration:none;font-weight:500;
  transition:color var(--dur-fast) var(--ease);
}
.breadcrumbs a:hover,
.breadcrumbs a:focus{color:var(--navy);text-decoration:underline}
.breadcrumbs a:focus{outline:3px solid var(--accent-red);outline-offset:2px;border-radius:2px}
.breadcrumbs span{color:var(--gray-mid);opacity:.6}

/* Accessibility Utilities -------------------------------------------------------*/
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;
}

/* Contact form ---------------------------------------------------------------*/
.form-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-card);
}
fieldset{border:none;padding:0;margin:0}
legend{display:block;margin-bottom:0;font-weight:700;color:var(--navy)}
.form-grid{
  display:grid;gap:20px;margin-bottom:24px;
}
@media (min-width:700px){
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .full{grid-column:1/-1}
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-weight:700;color:var(--navy);font-size:clamp(.9rem,1vw,.95rem);
  line-height:1.4;
}
.field .req{color:var(--accent-red);font-weight:700}
.field input,
.field select,
.field textarea{
  width:100%;border:2px solid var(--gray-line);border-radius:10px;
  padding:.8rem .9rem;font:inherit;color:var(--gray-ink);
  background:#fff;min-height:48px;transition:border-color var(--dur-fast) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{
  color:var(--gray-mid);opacity:0.7;
}
.field select{appearance:none;cursor:pointer;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231677D8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:auto;}
.field textarea{min-height:110px;resize:vertical;font-family:inherit}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(22,119,216,.1);
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled{
  background-color:var(--gray-soft);cursor:not-allowed;opacity:0.6;
}
.field .hint{
  font-size:clamp(.8rem,.9vw,.83rem);color:var(--gray-mid);margin-top:.2rem;
  line-height:1.4;
}
.field .error-msg{
  display:none;color:var(--red);font-size:clamp(.8rem,.85vw,.85rem);font-weight:600;
  margin-top:.2rem;line-height:1.3;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea{
  border-color:var(--red);background-color:rgba(179,38,30,.02);
}
.field.invalid .error-msg{display:block}
.form-status{
  display:none;margin-top:16px;border-radius:10px;padding:14px 16px;
  font-weight:600;font-size:clamp(.9rem,1vw,.95rem);line-height:1.4;
  animation:slideInUp 0.3s ease-out;
}
.form-status.ok{
  display:block;background:#E7F4EC;color:var(--green);border:1px solid rgba(30,127,79,.2);
}
.form-status.err{
  display:block;background:#FBEAE9;color:var(--red);border:1px solid rgba(179,38,30,.2);
}
@keyframes slideInUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.form-status a{color:inherit}

/* Emergency banner -------------------------------------------------------------*/
.emg-banner{
  background:linear-gradient(120deg,var(--accent-red),var(--accent-red-dark));color:#fff;
  border-radius:var(--radius);padding:28px;display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;
}
.emg-banner h2{color:#fff;margin:0;font-size:clamp(1.4rem,3.4vw,2rem)}
.emg-banner p{margin:.3rem 0 0;color:#FFF0E1}
.emg-banner .btn-text{background:var(--navy)}

/* Sticky mobile CTA -------------------------------------------------------------*/
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;
  grid-template-columns:1fr 1fr;height:var(--sticky-h);
  box-shadow:0 -6px 18px rgba(9,42,68,.22);
  animation:sticky-enter var(--dur-med) var(--ease-out);
}
@media (prefers-reduced-motion:no-preference){
  @keyframes sticky-enter{
    from{transform:translateY(100%);opacity:0}
    to{transform:translateY(0);opacity:1}
  }
}
.sticky-cta a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:800;font-size:1.05rem;text-decoration:none;color:#fff;
  transition:background-color var(--dur-fast) var(--ease);
}
@media (hover:hover){
  .sticky-cta a:hover{opacity:.9}
}
.sticky-cta .s-call{background:var(--accent-red)}
.sticky-cta .s-text{background:var(--navy)}
@media (min-width:900px){.sticky-cta{display:none}}

/* Footer -------------------------------------------------------------------------*/
.site-footer{background:var(--navy-deep);color:#A9C4DA;font-size:.95rem}
.site-footer .container{padding-top:52px;padding-bottom:26px}
.footer-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer h4{color:#fff;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:#ffffff;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-note{
  border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;
  font-size:.86rem;color:#7FA3BE;
}
.footer-phone{color:var(--accent-red)!important;font-weight:800;font-size:1.1rem}

/* Scroll reveal animation -------------------------------------------------------*/
.reveal{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .reveal{
    animation:reveal-in var(--dur-med) var(--ease-out) forwards;
    animation-delay:50ms;
  }
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1}
}
.reveal.in{opacity:1;animation:none}
@keyframes reveal-in{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* Content image (in-page photos and illustrations) --------------------------------*/
.content-image{
  aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  margin-bottom:24px;box-shadow:var(--shadow-card);background:var(--gray-soft);
}
.content-image img{width:100%;height:100%;object-fit:cover;display:block}
.content-image.icon{
  aspect-ratio:1/1;background:#fff;border:1px solid var(--gray-line);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.content-image.icon img{width:100%;height:100%;object-fit:contain}
.content-image-caption{
  font-size:.85rem;color:var(--gray-mid);margin:-16px 0 24px;font-style:italic;
}


/* Company logo row ------------------------------------------------------
   Greyscale at rest so the logos read as a quiet proof band rather than
   competing with the brand palette. Colour returns on hover and on focus
   for anyone who wants a closer look. */
.logo-row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,5vw,52px);flex-wrap:wrap;
  padding:26px 24px;background:#fff;
  border:1px solid var(--gray-line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.logo-row img{
  height:38px;width:auto;flex:none;
  filter:grayscale(1);opacity:.65;
  transition:filter var(--dur-med) var(--ease),opacity var(--dur-med) var(--ease);
}
@media (hover:hover){
  .logo-row:hover img{filter:grayscale(0);opacity:1}
}
@media (max-width:640px){
  .logo-row{gap:22px;padding:20px 16px}
  .logo-row img{height:30px}
}
@media (prefers-reduced-motion:reduce){
  .logo-row img{transition:none}
}

/* Utility --------------------------------------------------------------------------*/
.mb-4{margin-bottom:2.4rem}
.mt-0{margin-top:0}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.two-col{display:grid;gap:32px}
@media (min-width:900px){.two-col{grid-template-columns:1.2fr .8fr;align-items:start}}
.side-card{position:sticky;top:88px}
.checklist{list-style:none;margin:.6rem 0 1rem;padding:0}
.checklist li{display:flex;gap:.6rem;margin-bottom:.55rem;align-items:flex-start}
.checklist svg{color:var(--green);flex:none;margin-top:3px}
.inline-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:.6rem}