/* ============================================================
   HomePilot.expert — Core Stylesheet
   Brand: The Compass House — "Your Home's Co-Pilot."
   Type: Manrope (display) + Inter (body)
   ============================================================ */

:root{
  /* --- Brand colors (Brand Identity Guide v1.0) --- */
  --navy:        #1B3A6B; /* Pilot Navy — primary */
  --orange:      #E8722A; /* Guidance Orange — accent/CTA only */
  --cloud:       #F0F3F7; /* Cloud White — section/card bg */
  --black:       #0D1B2A; /* Cockpit Black — dark surfaces */
  --sky:         #4A7CB5; /* Sky Blue — hover/links */
  --frost:       #F9EFE6; /* Warm Frost — highlighted cards */
  --navytint:    #E8EEF7; /* Navy Tint — dividers/alt rows */
  --white:       #FFFFFF;
  --ink-dim:     #9BABC0; /* secondary text on dark */
  --line:        rgba(27,58,107,0.12);

  /* --- Type scale (Manrope: 400/600/700, Inter: 400/500) --- */
  --font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* --- Layout --- */
  --max: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 2px 4px rgba(13,27,42,0.04), 0 12px 28px rgba(13,27,42,0.07);
  --shadow-pop: 0 18px 40px rgba(13,27,42,0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--navy);
  margin:0 0 0.5em;
  line-height:1.15;
  letter-spacing:-0.01em;
}
h1{font-size:48px; font-weight:700;}
h2{font-size:36px; font-weight:600;}
h3{font-size:28px; font-weight:600;}
h4{font-size:22px; font-weight:600;}
p{margin:0 0 1em;}
a{color:var(--sky); text-decoration:none;}
a:hover{color:var(--orange);}
img{max-width:100%; display:block;}
ul{margin:0; padding:0;}
li{list-style:none;}

:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
  border-radius:4px;
}

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

.eyebrow{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:14px;
  height:1px;
  background:var(--orange);
}

.section{padding:96px 0;}
.section--tight{padding:64px 0;}
.section--cloud{background:var(--cloud);}
.section--navy{background:var(--navy); color:var(--white);}
.section--black{background:var(--black); color:var(--white);}
.section--navy h2, .section--navy h3, .section--black h2, .section--black h3{color:var(--white);}

.section-head{
  max-width:640px;
  margin:0 0 48px;
}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p{font-size:18px; color:#3D5A85;}
.section--navy .section-head p, .section--black .section-head p{color:var(--ink-dim);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  padding:14px 26px;
  border-radius:10px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orange); color:var(--white);}
.btn-primary:hover{background:#D4631E; color:var(--white);}
.btn-secondary{background:var(--navy); color:var(--white);}
.btn-secondary:hover{background:var(--sky);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-ghost-light{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.35);}
.btn-ghost-light:hover{border-color:var(--orange); color:var(--orange);}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:14px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(240,243,247,0.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand:hover{color:var(--navy);}
.brand-mark{width:38px; height:38px; flex:none;}
.brand-word{
  font-family:var(--font-display);
  font-size:21px;
  line-height:1;
  color:var(--navy);
  display:flex;
  flex-direction:column;
}
.brand-word .line1{font-weight:400;}
.brand-word .line1 b{font-weight:700;}
.brand-word .domain{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.1em;
  color:var(--orange);
  margin-top:1px;
}

.main-nav{display:flex; align-items:center; gap:36px;}
.main-nav ul{display:flex; gap:30px;}
.main-nav a{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  color:var(--navy);
}
.main-nav a:hover{color:var(--orange);}
.header-cta{display:flex; align-items:center; gap:14px;}
.header-cta .btn{padding:12px 22px;}
.link-muted{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--navy);}

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:40px; height:40px;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:'';
  display:block;
  width:22px; height:2px;
  background:var(--navy);
  position:relative;
  transition:.2s;
}
.nav-toggle span::before{position:absolute; top:-7px;}
.nav-toggle span::after{position:absolute; top:7px;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--cloud) 0%, var(--white) 100%);
  padding:72px 0 60px;
  overflow:hidden;
  position:relative;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.hero h1{font-size:54px; margin-bottom:18px;}
.hero h1 .accent{color:var(--orange);}
.hero-sub{font-size:19px; color:#3D5A85; max-width:480px; margin-bottom:32px;}

.quote-form{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:22px;
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  gap:12px;
  align-items:end;
}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{
  font-size:11px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:#5A7299;
}
.field select, .field input{
  font-family:var(--font-body);
  font-size:15px;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--cloud);
  color:var(--navy);
}
.field select:focus, .field input:focus{outline:none; border-color:var(--sky); background:var(--white);}

.trust-strip{
  display:flex;
  gap:28px;
  margin-top:26px;
  flex-wrap:wrap;
}
.trust-item{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--navy);
}
.trust-item svg{flex:none; color:var(--orange);}

/* compass / wayfinding visual in hero */
.hero-visual{position:relative; height:440px;}
.route-svg{width:100%; height:100%;}
.compass-card{
  position:absolute;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  color:var(--navy);
}
.compass-card .dot{width:10px; height:10px; border-radius:50%; background:var(--orange); flex:none;}
.compass-card.c1{top:6%; left:2%;}
.compass-card.c2{top:46%; right:0%;}
.compass-card.c3{bottom:4%; left:14%;}

/* ---------- Stat / value strip ---------- */
.value-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.value-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px 26px;
}
.value-card .icon{
  width:48px; height:48px;
  border-radius:12px;
  background:var(--frost);
  display:flex; align-items:center; justify-content:center;
  color:var(--orange);
  margin-bottom:18px;
}
.value-card h4{margin-bottom:8px;}
.value-card p{color:#3D5A85; font-size:15px; margin:0;}

/* ---------- How it works (flight path) ---------- */
.flightpath{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}
.flightpath::before{
  content:'';
  position:absolute;
  top:34px;
  left:8%;
  right:8%;
  height:0;
  border-top:2px dashed rgba(27,58,107,0.25);
  z-index:0;
}
.step{position:relative; z-index:1; text-align:left;}
.step-num{
  width:68px; height:68px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:22px;
  color:var(--navy);
  margin-bottom:20px;
  position:relative;
}
.step-num::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:50%;
}
.step:nth-child(2) .step-num, .step:nth-child(3) .step-num{}
.step p{color:#3D5A85; font-size:15px;}

/* ---------- Services grid ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
  border-color:transparent;
}
.service-card .icon{
  width:46px; height:46px;
  border-radius:10px;
  background:var(--navytint);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
}
.service-card h4{margin-bottom:0; font-size:19px;}
.service-card p{font-size:14px; color:#5A7299; margin:0; flex:1;}
.service-card .more{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--orange); display:inline-flex; align-items:center; gap:6px;
}
.service-card.featured{background:var(--frost); border-color:transparent;}

.services-foot{
  text-align:center;
  margin-top:40px;
}

/* ---------- Cities ---------- */
.cities-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.city-card{
  border-radius:var(--radius-md);
  padding:26px 22px;
  background:var(--navy);
  color:var(--white);
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.city-card.is-live{background:var(--navy);}
.city-card.is-soon{background:var(--navytint); color:var(--navy);}
.city-card .badge{
  align-self:flex-start;
  font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  padding:5px 10px; border-radius:20px;
  background:var(--orange); color:var(--white);
}
.city-card.is-soon .badge{background:rgba(27,58,107,0.12); color:var(--navy);}
.city-card h4{color:inherit; margin:0;}
.city-card span.state{font-size:13px; opacity:0.75; font-family:var(--font-body);}

/* ---------- Testimonials ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.testimonial{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:28px 26px;
  border:1px solid var(--line);
}
.testimonial p{font-size:15px; color:var(--navy); margin-bottom:18px;}
.testimonial .who{display:flex; align-items:center; gap:12px;}
.avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--navytint); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:14px;
}
.who-meta{font-size:13px; color:#5A7299;}
.who-meta strong{display:block; color:var(--navy); font-size:14px; font-family:var(--font-display);}
.stars{color:var(--orange); font-size:13px; margin-bottom:10px; letter-spacing:2px;}

/* ---------- Contractor CTA banner ---------- */
.banner{
  border-radius:var(--radius-lg);
  background:var(--black);
  color:var(--white);
  padding:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.banner h3{color:var(--white); font-size:30px; margin-bottom:10px;}
.banner p{color:var(--ink-dim); margin:0; max-width:440px;}
.banner-actions{display:flex; gap:14px; flex:none;}

/* ---------- Final CTA ---------- */
.final-cta{text-align:center;}
.final-cta h2{margin-bottom:14px;}
.final-cta p{font-size:18px; color:#3D5A85; max-width:520px; margin:0 auto 30px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--black); color:var(--ink-dim); padding-top:72px;}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .brand-word{color:var(--white);}
.footer-brand p{color:var(--ink-dim); font-size:14px; max-width:260px; margin:16px 0 20px;}
.footer-tagline{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--white);
}
.footer-col h5{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--white); margin-bottom:16px;
}
.footer-col li{margin-bottom:11px;}
.footer-col a{color:var(--ink-dim); font-size:14px;}
.footer-col a:hover{color:var(--orange);}
.social-row{display:flex; gap:10px; margin-top:6px;}
.social-row a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
}
.social-row a:hover{border-color:var(--orange); color:var(--orange);}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0 32px;
  font-size:13px;
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom a{color:var(--ink-dim);}
.footer-bottom a:hover{color:var(--orange);}
.legal-links{display:flex; gap:20px;}

/* ---------- Page hero (services page) ---------- */
.page-hero{
  background:var(--navy);
  color:var(--white);
  padding:64px 0 56px;
}
.page-hero h1{color:var(--white); font-size:46px;}
.page-hero p{color:var(--ink-dim); font-size:17px; max-width:560px;}
.page-hero .eyebrow{color:var(--orange);}
.page-hero .eyebrow::before{background:var(--orange);}

.filter-bar{
  margin-top:30px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-md);
  padding:18px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.filter-bar input, .filter-bar select{
  font-family:var(--font-body);
  background:var(--white);
  border:none;
  border-radius:8px;
  padding:12px 14px;
  font-size:14px;
  color:var(--navy);
  flex:1;
  min-width:160px;
}
.filter-bar .btn{flex:none;}

.breadcrumb{font-size:13px; color:var(--ink-dim); margin-bottom:18px;}
.breadcrumb a{color:var(--ink-dim);}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb .sep{margin:0 8px; opacity:0.5;}

.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.tag-pill{
  font-family:var(--font-display); font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:30px;
  border:1.5px solid var(--line);
  color:var(--navy);
  background:var(--white);
  cursor:pointer;
}
.tag-pill.active{background:var(--navy); color:var(--white); border-color:var(--navy);}
.tag-pill:hover{border-color:var(--sky);}

/* full service card on services.html (bigger, with meta row) */
.service-card-lg{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px;
  display:flex;
  gap:20px;
  transition:box-shadow .18s ease, transform .18s ease;
}
.service-card-lg:hover{box-shadow:var(--shadow-card); transform:translateY(-3px);}
.service-card-lg .icon{
  width:56px; height:56px; flex:none;
  border-radius:12px;
  background:var(--navytint);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
}
.service-card-lg .body{flex:1;}
.service-card-lg h4{margin-bottom:6px;}
.service-card-lg p{color:#5A7299; font-size:14px; margin-bottom:14px;}
.service-card-lg .meta{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px;}
.service-card-lg .meta span{font-size:12px; color:#5A7299; display:flex; align-items:center; gap:6px;}
.service-card-lg .meta svg{color:var(--orange); flex:none;}
.service-card-lg .links{display:flex; gap:16px; align-items:center;}
.service-card-lg .links a{font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--orange);}
.service-card-lg .links .sep{color:var(--line);}

.services-grid-lg{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

.popular-searches{
  background:var(--cloud);
  border-radius:var(--radius-lg);
  padding:40px;
}
.search-cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}
.search-cols h5{
  font-family:var(--font-display); font-size:14px; font-weight:700;
  color:var(--navy); margin-bottom:14px;
}
.search-cols li{margin-bottom:10px;}
.search-cols a{font-size:14px; color:#3D5A85;}
.search-cols a:hover{color:var(--orange);}

/* ---------- Utility ---------- */
.flex-center{display:flex; align-items:center;}
.mt-0{margin-top:0;}
.text-center{text-align:center;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px){
  .services-grid{grid-template-columns:repeat(3,1fr);}
  .cities-grid{grid-template-columns:repeat(2,1fr);}
  .value-grid{grid-template-columns:repeat(3,1fr);}
  .search-cols{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset:78px 0 0 0;
    background:var(--cloud);
    flex-direction:column;
    align-items:flex-start;
    padding:28px 24px;
    transform:translateX(100%);
    transition:transform .25s ease;
    overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column; gap:6px; width:100%;}
  .main-nav ul a{display:block; padding:14px 4px; border-bottom:1px solid var(--line); font-size:17px;}
  .header-cta{flex-direction:column; align-items:flex-start; gap:14px; margin-top:20px;}
  .nav-toggle{display:flex;}
  .hero .container{grid-template-columns:1fr;}
  .hero-visual{height:280px; order:-1;}
  .quote-form{grid-template-columns:1fr;}
  .value-grid, .services-grid, .services-grid-lg, .testimonial-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
  .banner{flex-direction:column; align-items:flex-start; padding:36px;}
  .flightpath{grid-template-columns:1fr; gap:36px;}
  .flightpath::before{display:none;}
}

@media (max-width: 600px){
  h1{font-size:36px;}
  .hero h1{font-size:36px;}
  h2{font-size:28px;}
  .section{padding:64px 0;}
  .value-grid, .services-grid, .services-grid-lg, .testimonial-grid, .cities-grid, .search-cols{grid-template-columns:1fr;}
  .filter-bar{flex-direction:column; align-items:stretch;}
  .filter-bar .btn{width:100%;}
  .footer-top{grid-template-columns:1fr; gap:36px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .page-hero h1{font-size:34px;}
}

/* ============================================================
   EXTENDED COMPONENTS — inner pages (services/cities/states/
   contractors/blog/legal/conversion)
   ============================================================ */

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:720px;}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; background:none; border:none; width:100%; text-align:left;
  font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--navy);
  padding:0;
}
.faq-q .icon-toggle{flex:none; transition:transform .2s ease; color:var(--orange);}
.faq-item.open .icon-toggle{transform:rotate(45deg);}
.faq-a{display:none; padding-top:12px; max-width:640px;}
.faq-a p{color:#3D5A85; font-size:15px; margin:0;}
.faq-item.open .faq-a{display:block;}

/* ---------- Money-page stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  background:var(--cloud); border-radius:var(--radius-lg); padding:32px;
}
.stat-strip .stat{text-align:center;}
.stat-strip .num{font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--navy); display:block;}
.stat-strip .label{font-size:13px; color:#5A7299;}

/* ---------- Local considerations list ---------- */
.consider-list{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.consider-item{display:flex; gap:12px; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px;}
.consider-item svg{flex:none; color:var(--orange); margin-top:2px;}
.consider-item h5{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:4px;}
.consider-item p{font-size:13px; color:#5A7299; margin:0;}

/* ---------- Pricing (contractors) ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.pricing-card{
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:32px 28px; display:flex; flex-direction:column; position:relative;
}
.pricing-card.featured{border-color:var(--orange); box-shadow:var(--shadow-card);}
.plan-badge{
  position:absolute; top:-13px; left:28px; background:var(--orange); color:var(--white);
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; padding:6px 14px; border-radius:20px;
}
.pricing-card .plan-name{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy);}
.pricing-card .price{font-family:var(--font-display); font-size:38px; font-weight:700; color:var(--navy); margin:10px 0 4px;}
.pricing-card .price span{font-size:14px; font-weight:500; color:#5A7299;}
.pricing-card .plan-desc{font-size:14px; color:#5A7299; margin-bottom:18px;}
.pricing-card ul{display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex:1;}
.pricing-card li{font-size:14px; color:#3D5A85; display:flex; gap:9px; align-items:flex-start;}
.pricing-card li svg{flex:none; color:var(--orange); margin-top:3px;}

/* ---------- Generic form card (contact / sign-up / login) ---------- */
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:44px; max-width:560px; margin:0 auto; box-shadow:var(--shadow-card);
}
.form-card h3{margin-bottom:6px;}
.form-card .lede{color:#5A7299; font-size:15px; margin-bottom:28px;}
.form-grid{display:grid; gap:18px;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .field label{font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:#5A7299; margin-bottom:6px; display:block;}
.form-grid .field input, .form-grid .field select, .form-grid .field textarea{
  width:100%; font-family:var(--font-body); font-size:15px; padding:13px 14px;
  border:1.5px solid var(--line); border-radius:8px; background:var(--cloud); color:var(--navy);
}
.form-grid .field textarea{min-height:120px; resize:vertical; font-family:var(--font-body);}
.form-grid .field input:focus, .form-grid .field select:focus, .form-grid .field textarea:focus{outline:none; border-color:var(--sky); background:var(--white);}
.form-foot{font-size:13px; color:#5A7299; text-align:center; margin-top:18px;}
.form-foot a{color:var(--sky);}

/* ---------- Two-column content split (about) ---------- */
.split{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.stat-row{display:flex; gap:36px; margin-top:28px; flex-wrap:wrap;}
.stat-row .num{font-family:var(--font-display); font-weight:700; font-size:32px; color:var(--navy); display:block;}
.stat-row .label{font-size:13px; color:#5A7299;}
.portrait-block{
  background:var(--navy); border-radius:var(--radius-lg); height:380px;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.portrait-block svg{width:120px; height:120px;}

.timeline{display:flex; flex-direction:column; gap:0; max-width:640px;}
.timeline-item{display:flex; gap:20px; padding-bottom:34px; position:relative;}
.timeline-item::before{
  content:''; position:absolute; left:9px; top:24px; bottom:0; width:0; border-left:2px dashed rgba(27,58,107,0.25);
}
.timeline-item:last-child::before{display:none;}
.timeline-dot{width:20px; height:20px; border-radius:50%; background:var(--orange); flex:none; margin-top:2px;}
.timeline-item h5{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); margin-bottom:4px;}
.timeline-item p{font-size:14px; color:#5A7299; margin:0;}

/* ---------- Blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.blog-card .thumb{
  height:150px; background:linear-gradient(135deg, var(--navy), var(--sky));
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.85);
}
.blog-card .body{padding:22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.blog-card .cat{font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange);}
.blog-card h4{font-size:18px; margin:0;}
.blog-card p{font-size:14px; color:#5A7299; margin:0; flex:1;}
.blog-card .meta{font-size:12px; color:#8095B5; margin-top:6px;}

.post-hero{padding:56px 0 40px;}
.post-body{max-width:680px; margin:0 auto;}
.post-body p{color:#2E4A75; font-size:16.5px; line-height:1.75;}
.post-body h2{margin-top:1.5em; font-size:26px;}
.post-body ul{margin:0 0 1.3em 1.2em; list-style:disc;}
.post-body li{margin-bottom:8px; color:#2E4A75; font-size:16px;}
.post-meta{display:flex; gap:16px; align-items:center; color:var(--ink-dim); font-size:13px; margin-bottom:6px;}
.post-tags{display:flex; gap:8px; margin:28px 0;}
.post-tags .tag-pill{cursor:default; font-size:12px; padding:7px 14px;}

/* ---------- Legal pages ---------- */
.legal-body{max-width:760px; margin:0 auto;}
.legal-body h2{font-size:22px; margin-top:1.6em;}
.legal-body p, .legal-body li{color:#3D5A85; font-size:15px; line-height:1.75;}
.legal-body ul{margin:0 0 1.2em 1.2em; list-style:disc;}
.legal-updated{color:#8095B5; font-size:13px; margin-bottom:40px; display:block;}

/* ---------- Confirmation (thank-you) ---------- */
.confirm-box{text-align:center; max-width:560px; margin:0 auto;}
.confirm-icon{
  width:84px; height:84px; border-radius:50%; background:var(--frost); color:var(--orange);
  display:flex; align-items:center; justify-content:center; margin:0 auto 28px;
}
.next-steps{display:flex; flex-direction:column; gap:14px; text-align:left; margin:36px 0; background:var(--cloud); border-radius:var(--radius-md); padding:24px;}
.next-steps .step-row{display:flex; gap:14px; align-items:flex-start;}
.next-steps .step-row .n{
  width:26px; height:26px; border-radius:50%; background:var(--navy); color:var(--white);
  font-family:var(--font-display); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.next-steps p{margin:0; font-size:14px; color:var(--navy);}

/* ---------- Geo / states & cities hubs ---------- */
.state-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.state-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px; display:flex; align-items:center; justify-content:space-between;
}
.state-card.is-future{background:var(--navytint); border-color:transparent;}
.state-card h4{margin:0; font-size:18px;}
.state-card .count{font-size:13px; color:#5A7299;}
.state-card .arrow{color:var(--orange);}

.city-list-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-bottom:12px;
}
.city-list-row h5{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); margin:0;}
.city-list-row span{font-size:13px; color:#5A7299;}

.service-pill-grid{display:flex; flex-wrap:wrap; gap:10px;}
.service-pill-grid a{
  font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--navy);
  background:var(--navytint); border-radius:30px; padding:9px 16px;
}
.service-pill-grid a:hover{background:var(--orange); color:var(--white);}

/* breadcrumb on light backgrounds (non-navy hero) */
.breadcrumb.on-light{color:#5A7299; margin-bottom:14px;}
.breadcrumb.on-light a{color:#5A7299;}
.breadcrumb.on-light a:hover{color:var(--orange);}
.breadcrumb.on-light .sep{opacity:0.5;}

/* small page-hero variant (legal / thank-you) */
.page-hero.tight{padding:48px 0 40px;}
.page-hero.tight h1{font-size:34px;}

@media (max-width: 1080px){
  .pricing-grid, .blog-grid, .state-list{grid-template-columns:repeat(2,1fr);}
  .consider-list{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:repeat(2,1fr); gap:20px;}
}
@media (max-width: 900px){
  .split{grid-template-columns:1fr;}
  .portrait-block{height:240px; order:-1;}
}
@media (max-width: 600px){
  .pricing-grid, .blog-grid, .state-list, .stat-strip{grid-template-columns:1fr;}
  .form-card{padding:28px;}
  .form-row-2{grid-template-columns:1fr;}
  .city-list-row{flex-direction:column; align-items:flex-start; gap:6px;}
}

/* ---------- Accessibility: skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--orange); color:var(--white);
  padding:10px 18px; border-radius:0 0 8px 0;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  z-index:200;
}
.skip-link:focus{left:0;}