:root{
  --nav-bg: #0b4a6b;
  --nav-bg-2: #083a54;
  --text: #0b1a2b;
  --muted: #516070;
  --card: #ffffff;
  --card-alt: #e9f2ff;
  --border: #e6e9ef;
  --shadow: 0 10px 30px rgba(10, 23, 41, 0.10);
  --accent: #ffeb3b; /* bright yellow */
  --accent-2: #ffd600;
  --accent-dark: #14324a;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: #f6f8fb;
  line-height: 1.55;
}

a{ color: #0b4a6b; text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

/* Header / Nav */
.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}
.brand a{
  color: #fff;
  font-weight: 800;
  font-size: clamp(20px, 2.0vw, 34px);
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
}
/*
 * Navigation links styling.  Increase the gap between items and center
 * the navigation for better visual balance.  The larger gap makes
 * each tab distinct and mirrors the wide spacing shown in the provided
 * design reference.  On smaller screens, a reduced gap is applied via
 * the responsive media query below.
 */
.nav-links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  /* Center the navigation items across the header instead of pushing
     them to the far right.  This gives a balanced appearance with
     the brand on the left and the nav centered. */
  justify-content: center;
}
.nav-links a{
  color: #fff;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  background: var(--accent);
  color: var(--accent-dark);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.25), 0 10px 24px rgba(0,0,0,0.20);
  transform: translateY(-1px);
  outline: none;
}
.nav-links a.active{
  background: #f9d800;
  color: var(--accent-dark);
  border-color: #ffe66a;
}

/* Hero */
.hero{
  position: relative;
  background: #0b4a6b;
  min-height: 420px;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  /* Use the computer‑repair van as the hero background */
  background-image: url("assets/images/hero-van-home-v03.jpg");
  background-size: cover;
  background-position: center right;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02); /* slight zoom to avoid edges */
}
.hero::after{
  /* gradient overlay so the title is always readable */
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(9,26,44,0.78) 0%, rgba(9,26,44,0.45) 45%, rgba(9,26,44,0.10) 70%, rgba(9,26,44,0.0) 100%),
    linear-gradient(180deg, rgba(9,26,44,0.15) 0%, rgba(9,26,44,0.25) 55%, rgba(9,26,44,0.35) 100%);
}
.hero-inner{
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  align-items: flex-end; /* drop text lower */
  padding: 64px 0 44px;
}
.hero-card{
  width: min(720px, 100%);
  background: rgba(10, 23, 41, 0.55);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  padding: 18px 18px 16px;
  backdrop-filter: blur(3px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.22);
}
.hero h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.0vw, 44px);
  line-height: 1.12;
  color: #ffffff;
  text-shadow: 0 3px 18px rgba(0,0,0,0.65);
}
.hero p{
  margin: 0 0 14px;
  color: rgba(255,255,255,0.92);
  font-size: 16.5px;
}
.hero-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/*
 * Page banner used on secondary pages.
 * This small hero bar reuses the service van image from the homepage.
 * It displays the van on the right side with a dark overlay to
 * maintain legibility of any page heading beneath.  The same
 * Computer Repair van photo is reused across all pages for brand
 * consistency.
 */
.page-banner{
  position: relative;
  background: #0b4a6b;
  min-height: 280px;
  overflow: hidden;
}
.page-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("assets/images/hero-van-home-v03.jpg");
  background-size: cover;
  background-position: center right;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
.page-banner::after{
  content:"";
  position:absolute;
  inset:0;
  /* Dark gradient overlay to ensure page headings remain readable */
  background:
    linear-gradient(90deg, rgba(9,26,44,0.80) 0%, rgba(9,26,44,0.40) 55%, rgba(9,26,44,0.0) 100%),
    linear-gradient(180deg, rgba(9,26,44,0.15) 0%, rgba(9,26,44,0.30) 100%);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn-primary{
  background: var(--accent);
  color: var(--accent-dark);
  border-color: var(--accent-2);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.22);
  text-decoration: none;
}
.btn-ghost{
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.18);
  text-decoration: none;
}

/* Sections */
.section{
  padding: 38px 0;
}
.section h2{
  margin: 0 0 14px;
  font-size: 26px;
}
.section .subhead{
  margin: 0 0 20px;
  color: var(--muted);
}

/* Services grid */
.cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 10px 24px rgba(10, 23, 41, 0.08);
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.cards .card:nth-child(even){
  background: var(--card-alt); /* alternating light blue */
}
.card h3{
  margin: 0 0 10px;
  color: #0b3f62;
  font-size: 20px;
  letter-spacing: 0.1px;
}
.card p{
  margin: 0 0 14px;
  color: #2f3b48;
}
.card .spacer{ flex: 1; }
.card a.cta{
  font-weight: 800;
  color: #0b4a6b;
  text-decoration: none;
}
.card a.cta:hover{ text-decoration: underline; }

/* Footer */
.site-footer{
  background: #071f2e;
  color: rgba(255,255,255,0.86);
  padding: 26px 0;
  margin-top: 20px;
}
.site-footer .footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}
.site-footer h4{
  margin: 0 0 10px;
  color: #fff;
}
.site-footer a{
  color: rgba(255,255,255,0.90);
}
.site-footer a:hover{ color: #fff; }
.fineprint{
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.70);
}

/* Responsive */
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand{ min-width: 220px; }
  .site-footer .footer-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .navbar{ padding: 14px 0; }
  /* Reduce the gap slightly on very narrow screens but keep spacing
     comfortable for touch interfaces. */
  .nav-links{ gap: 16px; }
  .nav-links a{ padding: 9px 10px; }
  .cards{ grid-template-columns: 1fr; }
  .hero-inner{ padding: 52px 0 34px; }
  .hero-card{ padding: 16px 14px; }
}



/* ==== Uniform header (matches homepage) ==== */
header {
  background-color: #0a3d62;
  color: #ffffff;
  padding: 15px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
header nav { flex: 1 1 100%; }
header h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
}
header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: center;
}
header nav li { margin: 0; }
header nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  border: 2px solid transparent;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out;
}
header nav a:hover {
  color: #fbd46d;
  border-color: #fbd46d;
}
header .phone {
  flex: 1 1 100%;
  text-align: center;
  font-weight: 800;
  font-size: 1.35rem;
  margin-top: 10px;
}
header .phone a {
  color: #fbd46d;
  text-decoration: none;
  font-weight: 900;
}

/* Floating call button */
.call-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-block;
  background: #fbd46d;
  color: #0a3d62;
  font-weight: 900;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}
.call-fab:hover{ filter: brightness(0.98); }

/* CTA pill buttons */
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0 18px; }
.pill-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius: 999px;
  background:#0a3d62;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  border:2px solid rgba(255,255,255,.0);
}
.pill-btn.alt{ background:#ffffff; color:#0a3d62; border:2px solid #0a3d62; }
.pill-btn:hover{ filter: brightness(1.05); }

/* Simple image strip */
.img-strip{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
.img-strip img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:14px;
}
@media (max-width: 900px){
  .img-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .img-strip img{ height:150px; }
}

/* Reviews */
.reviews-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin: 18px 0 30px;
}
.review-card{
  background: rgba(10,61,98,.06);
  border: 1px solid rgba(10,61,98,.15);
  border-radius: 18px;
  padding: 14px 14px 12px;
}
.review-stars{
  font-weight: 900;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.review-quote{ margin:0 0 10px; line-height:1.45; }
.review-meta{ font-size:.95rem; opacity:.9; }
@media (max-width: 1000px){
  .reviews-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px){
  .reviews-grid{ grid-template-columns: 1fr; }
}

/* Top CTA bar */
.top-cta-bar a{ color:#0a3d62; text-decoration: underline; font-weight: 900; }

/* Footer backlinks */
.footer-links{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  font-weight:800;
}
.footer-links a{
  color:#ffffff;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 1px;
}
.footer-links a:hover{ color:#fbd46d; border-bottom-color:#fbd46d; }
.footer-links .sep{ opacity:.6; }

header nav a.active { background-color: #fbd46d; color: #0a3d62; border-color: #fbd46d; }

/* Simple bullet list */
.bullet-list{
  margin: 10px 0 0 18px;
  padding: 0;
}
.bullet-list li{ margin: 8px 0; }

/* Sticky header */
body{
  padding-top: 170px; /* space for fixed CTA + header */
}
header{
  position: fixed;
  top: 44px; /* below top CTA bar */
  left: 0;
  right: 0;
  z-index: 9999;
}
@media (max-width: 650px){
  body{ padding-top: 200px; }
}

/* County cards layout */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
.cards .card{
  height: 100%;
  display:flex;
  flex-direction:column;
}
.cards .card h3{ margin-top:0; }
@media (max-width: 1000px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px){
  .cards{ grid-template-columns: 1fr; }
}

/* Services: Specialist Commitment (styled) */
.commitment-box{
  background: #f9e9ea;
  border: 1px solid #f1c8cc;
  border-radius: 22px;
  padding: 26px;
  margin: 20px 0;
}
.commitment-box h3{
  margin-top: 0;
}
.commitment-box .bullet-list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.commitment-box .bullet-list li{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 10px 0;
  font-size: 22px;
  font-weight: 800;
  color: #0a0a0a;
}
.commitment-box .xicon{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: #ff5a76;
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(255, 90, 118, .25);
  margin-top: 2px;
}
.commitment-box .xtext strong{ font-weight: 900; }
@media (max-width: 650px){
  .commitment-box .bullet-list li{ font-size: 18px; }
}

/* Experience page: taller hero image so the people read clearly */
.exp-hero-img{
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 18px;
  display:block;
  margin: 14px 0 10px;
}

@media (max-width: 700px){
  .exp-hero-img{
    height: 220px;
    object-position: center 24%;
  }
}

/* Service Areas page: cleaner 2x2 card layout */
.page-service-areas .cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.page-service-areas .cards .card{
  min-height: 220px;
}
.page-service-areas .cards .card.flagler{
  background: #ffffff; /* white */
}
@media (max-width: 900px){
  .page-service-areas .cards{ grid-template-columns: 1fr; }
}

/* Click-to-call phone links */
.tel-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 800;
}
.tel-link:focus, .tel-link:hover{
  text-decoration-thickness: 3px;
}


/* Sticky top call bar + header */
.top-cta-bar{position:sticky;top:0;z-index:2000;background:#f6d479;color:#0b4a67;font-weight:800;text-align:center;padding:12px 10px;}
.top-cta-bar a{color:#0b4a67;text-decoration:underline;}
.site-header{position:sticky;top:var(--topbar-height,48px);z-index:1500;background:#0b4a67;color:#fff;padding:18px 18px 12px;}

body>header{position:sticky;top:var(--topbar-height,48px);z-index:1500;background:#0b4a67;color:#fff;padding:18px 18px 12px;}
body>header h1{margin:0;font-size:42px;font-weight:900;letter-spacing:.2px;}
body>header nav ul{display:flex;gap:28px;list-style:none;margin:14px 0 0;padding:0;justify-content:center;flex-wrap:wrap;}
body>header nav a{color:#fff;text-decoration:none;font-weight:800;font-size:20px;}
body>header nav a.active, body>header nav a:hover{background:#f6d479;color:#0b4a67;border-radius:10px;padding:10px 16px;}

/* --- Sticky header normalization --- */
.top-cta-bar{
  position: sticky;
  top: 0;
  z-index: 1000;
}
.site-header{
  position: sticky;
  top: var(--topbar-h);
  z-index: 999;
}

/* Ensure sticky elements don't create phantom whitespace */
body{
  scroll-padding-top: calc(var(--topbar-h) + 96px);
}

/* Remove large forced banner spacing (if any exists) */
.page-hero, .page-banner, .hero-spacer{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Keep top bar height consistent so header offset stays correct */
.top-cta-bar{
  min-height: var(--topbar-h);
  display:flex;
  align-items:center;
}

.phone-pill:hover, .phone-pill:focus{
  filter: brightness(0.98);
  text-decoration: none;
}



/* =========================================================
   FINAL OVERRIDE: lock top bar + header together (fixed)
   ========================================================= */
:root{
  --topbar-h: 52px;
  --header-h: 132px; /* nav + call line */
}

/* Lock top CTA bar */
.top-cta-bar{
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 10000 !important;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
}

/* Lock header directly under top bar */
header, .site-header{
  position: fixed !important;
  top: var(--topbar-h) !important;
  left: 0;
  right: 0;
  z-index: 9999 !important;
}

/* Give the page room so content starts below fixed stack */
body{
  padding-top: calc(var(--topbar-h) + var(--header-h)) !important;
}

/* Mobile: slightly taller header */
@media (max-width: 650px){
  :root{ --header-h: 160px; }
}

/* Prevent accidental margins creating a "gap" above the bar */
html, body{ margin:0; }

/* JS-managed fixed header stack: prevent pre-padding gap */
body{ padding-top: 0 !important; }

/* Spacer used to offset fixed topbar+header */
#header-spacer{ width:100%; height:0; }

body{ padding-top: 0 !important; }

/* Yellow filled phone pill (tap-to-call) - high contrast */
.phone-pill{
  background: #f6d06a;
  color: #0a3d62 !important;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
  border: 2px solid rgba(10,61,98,.18);
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.phone-pill:hover, .phone-pill:focus{
  filter: brightness(0.98);
}
.hero .phone-pill{
  background: #f6d06a;
  color: #0a3d62 !important;
}

/* FAQ items */
.faq-item{
  background: rgba(10,61,98,.04);
  border: 1px solid rgba(10,61,98,.12);
  border-radius: 16px;
  padding: 14px 14px 10px;
  margin: 12px 0;
}
.faq-item h4{ margin: 0 0 6px; }
.faq-item p{ margin: 0; }
.home-seo-line{ max-width: 900px; margin: 10px auto 0; opacity:.92; }


.breadcrumbs{font-size:.95rem;margin:0 0 14px;color:#47607c;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumbs a{color:#0d4f73;text-decoration:none;font-weight:600}
.breadcrumbs a:hover{text-decoration:underline}
.crumb-sep{opacity:.65}

/* Keep visible breadcrumbs aligned with page content instead of flush-left */
main > section.section > .breadcrumbs,
main > section.page-intro > .breadcrumbs{
  max-width: 1160px;
  margin: 0 auto 14px;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-intro .breadcrumbs,
.container .breadcrumbs{
  padding-left: 0;
  padding-right: 0;
}

.landmark-copy{margin:12px 0 0;color:#27445f}
#home-faq .faq-item,.faq .faq-item{background:#fff;border:1px solid #d9e4ee;border-radius:16px;padding:16px 18px;margin:14px 0}
#home-faq .faq-item h3,.faq .faq-item h3{margin:0 0 8px;font-size:1.1rem}


/* Services page: tighten intro/support text width for more even reading */
.page-intro{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px 24px;
}
.page-intro h3, .page-intro h4{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.page-intro p, .page-intro .pill-row, .page-intro .commitment-box{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.page-intro p{
  line-height: 1.65;
}
.page-intro h3{
  margin-top: 0;
  margin-bottom: 10px;
}
.page-intro h4{
  margin-top: 14px;
  margin-bottom: 8px;
}


/* =========================================================
   Mobile-only optimization pass
   ========================================================= */
@media (max-width: 820px){
  :root{
    --topbar-h: auto;
    --header-h: auto;
  }

  html, body{
    overflow-x: hidden;
  }

  .top-cta-bar{
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .top-cta-bar .phone-pill{
    padding: 4px 10px !important;
    font-size: 15px !important;
    border-width: 1px !important;
    box-shadow: none !important;
  }

  body > header,
  header,
  .site-header{
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    padding: 12px 14px 14px !important;
  }

  body > header h1{
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: 1.04 !important;
    text-wrap: balance;
    margin: 0 0 10px !important;
    max-width: 10ch;
  }

  body > header nav ul{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px !important;
    margin: 8px 0 0 !important;
  }

  body > header nav a{
    display: block;
    text-align: center;
    font-size: 18px !important;
    line-height: 1.2;
    padding: 11px 10px !important;
    border-radius: 12px;
  }

  body > header .phone,
  header .phone{
    display: none !important;
  }

  #header-spacer{
    height: 0 !important;
  }
}


/* Hard-disable visible breadcrumb trails site-wide; keep JSON-LD schema only */
.breadcrumbs,
[aria-label="Breadcrumb"],
nav.breadcrumb,
nav.breadcrumbs,
ol.breadcrumb,
ul.breadcrumb,
ol.breadcrumbs,
ul.breadcrumbs,
.breadcrumb-trail,
.breadcrumb-nav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   v20 Header + Mobile Scroll Normalization
   - Single source of truth: CSS-only sticky stack
   - Removes reliance on JS spacer/fixed positioning
   ========================================================= */

/* Always: no artificial padding from older experiments */
body{
  padding-top: 0 !important;
}

/* Top CTA bar stays at the very top */
.top-cta-bar{
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 10000 !important;
}

/* Header sticks below the top bar using a measured CSS var (set in script.js) */
header{
  position: sticky !important;
  top: var(--topbar-height, 48px) !important;
  left: auto !important;
  right: auto !important;
  z-index: 9999 !important;
}

/* Reduce scroll-to-anchor collisions */
html{
  scroll-padding-top: calc(var(--topbar-height, 48px) + 92px);
}

/* If any old spacer exists, neutralize it */
#header-spacer{
  height: 0 !important;
}

/* Mobile: prevent horizontal drift, keep tap targets readable */
@media (max-width: 820px){
  html, body{ overflow-x: hidden; }
  header nav ul{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px !important;
  }
  header nav a{
    display:block;
    text-align:center;
    padding: 11px 10px !important;
    border-radius: 12px;
  }
  header .phone{ display:none !important; }
}

/* =========================================================
   v24 Mobile brand heading rebalance
   - Mobile only: normalize the site name so it looks cleaner,
     more balanced, and closer to the desktop brand tone.
   ========================================================= */
@media (max-width: 820px){
  body > header h1,
  header h1{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: clamp(16px, 4.9vw, 21px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    font-weight: 800 !important;
    max-width: 10.6ch !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border-left: none !important;
    text-shadow: none !important;
    text-wrap: balance !important;
    color: #ffffff !important;
  }
}


/* v29: services content alignment tightening */
.page-intro{
  width: min(980px, calc(100% - 48px));
  margin: 0 auto 24px !important;
  padding: 0 !important;
  box-sizing: border-box;
}
.page-intro h3,
.page-intro h4,
.page-intro p,
.page-intro .pill-row,
.page-intro .commitment-box,
.page-intro .faq-item{
  width: min(860px, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.commitment-box{
  max-width: 860px;
}
@media (max-width: 820px){
  .page-intro{
    width: min(100% - 28px, 980px);
  }
}