/*
Theme Name:  Davis Southern Septic
Theme URI:   https://davissouthernseptic.com
Description: Full custom theme for Davis Southern Septic — Metro Atlanta's trusted septic service company.
Author:      Davis Southern Septic
Version:     2.0
Template:    twentytwentyfour
Text Domain: dss
*/

/* ============================================================
   RESET & CSS VARIABLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:       #6CAFF4;
  --brand-dark:  #3a87d4;
  --brand-light: #e8f3fd;
  --dark:        #0f1b2d;
  --mid:         #2a3f58;
  --text:        #3d4f62;
  --light:       #f4f8fc;
  --white:       #ffffff;
  --serif:       'Playfair Display', Georgia, serif;
  --sans:        'DM Sans', sans-serif;
  --radius:      8px;
  --radius-lg:   18px;
  --shadow:      0 4px 24px rgba(15,27,45,.10);
  --shadow-lg:   0 12px 48px rgba(15,27,45,.18);
  --trans:       .25s ease;
  --max-w:       1180px;
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--text); background: var(--white); line-height: 1.65; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }

/* ============================================================
   GLOBAL UTILITIES
   ============================================================ */
.dss-wrap    { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.dss-section { padding: 96px 0; }
.dss-section--light { background: var(--light); }
.dss-section--dark  { background: var(--dark); }

.tag {
  display: inline-block; background: var(--brand-light); color: var(--brand-dark);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 50px; margin-bottom: 14px;
}
.tag--dark { background: rgba(108,175,244,.15); color: var(--brand); }

h1,h2,h3,h4 { font-family: var(--serif); line-height: 1.2; color: var(--dark); }
.section-title     { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.section-title span { color: var(--brand); }
.section-title--white { color: var(--white); }
.section-sub { font-size: 1.05rem; color: var(--text); max-width: 580px; margin-top: 12px; line-height: 1.7; }
.section-sub--white { color: rgba(255,255,255,.7); }
.text-center { text-align: center; }
.text-center .section-sub { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; border-radius: 50px; font-family: var(--sans);
  font-weight: 600; font-size: .95rem; cursor: pointer; border: 2px solid transparent;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary { background: var(--brand); color: var(--white); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline-white { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--brand-dark); }
.btn-outline-brand { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: var(--white); }
.btn-dark { background: var(--dark); color: var(--white); }
.btn-dark:hover { background: var(--mid); }
.btn-sm { padding: 10px 22px; font-size: .87rem; }
.btn-full { width: 100%; }

/* Checklist */
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; }
.check-list li::before {
  content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  margin-top: 2px; background: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}

/* Cards */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Breadcrumb */
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.breadcrumb a { color: var(--brand); }
.breadcrumb span { margin: 0 6px; opacity: .4; }

/* Page Hero (inner pages) */
.page-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  padding: 80px 0 72px; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; opacity: .04;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 32px 32px;
}
.page-hero-content { position: relative; z-index: 2; max-width: 680px; }
.page-hero h1 { font-size: clamp(2rem,4.5vw,3rem); color: var(--white); margin-bottom: 16px; }
.page-hero p { color: rgba(255,255,255,.75); font-size: 1.08rem; margin-bottom: 28px; line-height: 1.7; }
.page-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Floating phone badge */
.phone-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brand); color: var(--white);
  border-radius: 50px; padding: 12px 24px; font-weight: 700;
  font-size: 1rem; transition: background var(--trans), transform var(--trans);
}
.phone-badge:hover { background: var(--brand-dark); transform: scale(1.03); }

/* Info box */
.info-box {
  background: var(--brand-light); border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px; margin: 28px 0;
}
.info-box p { font-size: .95rem; color: var(--mid); }
.info-box strong { color: var(--brand-dark); }

/* Two-col layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.two-col--reverse .two-col-img { order: 2; }
.two-col--reverse .two-col-text { order: 1; }

/* Image frame placeholder */
.img-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--brand-light), #d0e9fc);
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-frame-placeholder { text-align: center; padding: 40px; }
.img-frame-placeholder p { color: var(--brand-dark); font-size: .85rem; margin-top: 12px; font-weight: 500; }

/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #e4edf6; border-radius: var(--radius-lg); overflow: hidden; }
.stat-strip-item { background: var(--white); padding: 28px; text-align: center; }
.stat-strip-item .num { font-family: var(--serif); font-size: 2.2rem; color: var(--brand); display: block; }
.stat-strip-item .lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text); margin-top: 4px; display: block; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--dark), #1a3351);
  padding: 72px 0; text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; opacity: .06;
  background-image: repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(108,175,244,.5) 40px,rgba(108,175,244,.5) 41px),
    repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(108,175,244,.5) 40px,rgba(108,175,244,.5) 41px);
}
.cta-band-inner { position: relative; z-index: 2; }
.cta-band h2 { color: var(--white); font-size: clamp(1.6rem,3.5vw,2.4rem); margin-bottom: 12px; }
.cta-band p  { color: rgba(255,255,255,.7); max-width: 520px; margin: 0 auto 32px; }
.cta-band-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   TOP BAR
   ============================================================ */
#dss-topbar {
  background: var(--dark); color: rgba(255,255,255,.7);
  font-size: .83rem; padding: 9px 0;
}
#dss-topbar .inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#dss-topbar a { color: var(--brand); font-weight: 600; transition: color var(--trans); }
#dss-topbar a:hover { color: var(--white); }
.tb-left, .tb-right { display: flex; align-items: center; gap: 20px; }
.tb-item { display: flex; align-items: center; gap: 6px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
#dss-nav-wrap {
  position: sticky; top: 0; z-index: 999;
  background: var(--white); box-shadow: 0 2px 12px rgba(15,27,45,.07);
  transition: box-shadow var(--trans);
}
#dss-nav-wrap.scrolled { box-shadow: 0 4px 24px rgba(15,27,45,.14); }

.dss-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 20px; }

/* Logo */
.dss-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dss-logo-icon { width: 44px; height: 44px; background: var(--brand); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.dss-logo-top { font-family: var(--serif); font-size: 1.1rem; color: var(--dark); font-weight: 700; line-height: 1.1; }
.dss-logo-bot { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); font-weight: 600; }
/* Logo image (replaces text logo) */
.dss-logo-img { height: 56px; width: auto; max-width: 200px; object-fit: contain; display: block; }
@media (max-width: 768px) { .dss-logo-img { height: 44px; } }

/* Desktop links */
.dss-nav-links { display: flex; align-items: center; gap: 2px; }
.dss-nav-links > li { position: relative; }
.dss-nav-links > li > a {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 13px; border-radius: var(--radius); font-size: .9rem; font-weight: 500;
  color: var(--mid); transition: background var(--trans), color var(--trans); white-space: nowrap;
}
.dss-nav-links > li > a:hover,
.dss-nav-links > li.active > a { background: var(--brand-light); color: var(--brand-dark); }
.dss-nav-links > li.active > a { font-weight: 600; }
.caret { font-size: .6em; opacity: .5; }

/* Dropdown */
.has-drop { position: relative; }
.drop-menu {
  position: absolute; top: calc(100% + 2px); left: 0;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 220px; padding: 8px; list-style: none;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--trans), transform var(--trans); z-index: 200;
  /* invisible bridge so mouse can travel from nav link to menu */
  margin-top: 0;
}
.has-drop::after {
  content: ''; position: absolute; top: 100%; left: 0;
  width: 100%; height: 8px; background: transparent;
}
.has-drop:hover .drop-menu,
.has-drop.drop-open .drop-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.drop-menu li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 6px; font-size: .88rem; font-weight: 500; color: var(--text);
  transition: background var(--trans), color var(--trans);
}
.drop-menu li a:hover { background: var(--brand-light); color: var(--brand-dark); }
.drop-icon { width: 28px; height: 28px; background: var(--brand-light); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Nav CTA */
.dss-nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-phone-link { font-weight: 700; color: var(--dark); font-size: .93rem; transition: color var(--trans); white-space: nowrap; }
.nav-phone-link:hover { color: var(--brand); }

/* Hamburger */
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform .3s, opacity .3s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.dss-mob-nav { display: none; background: var(--white); border-top: 1px solid #e8eef4; padding: 12px 24px 20px; flex-direction: column; gap: 2px; }
.dss-mob-nav.open { display: flex; }
.dss-mob-nav a { display: block; padding: 11px 14px; border-radius: var(--radius); font-size: .92rem; font-weight: 500; color: var(--mid); transition: background var(--trans), color var(--trans); }
.dss-mob-nav a:hover { background: var(--brand-light); color: var(--brand-dark); }
.mob-section { font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); padding: 14px 14px 4px; display: block; }
.mob-cta { margin-top: 14px; background: var(--brand) !important; color: var(--white) !important; border-radius: 50px !important; text-align: center; font-weight: 700 !important; padding: 14px !important; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
#dss-trust { background: var(--brand); padding: 18px 0; }
.trust-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; color: var(--white); font-size: .88rem; font-weight: 600; padding: 8px 28px; }
.trust-item:not(:last-child) { border-right: 1px solid rgba(255,255,255,.3); }

/* ============================================================
   HERO (homepage)
   ============================================================ */
#dss-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  min-height: 88vh; display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.hero-dots { position: absolute; inset: 0; opacity: .04; background-image: radial-gradient(circle,#fff 1px,transparent 1px); background-size: 32px 32px; pointer-events: none; }
.hero-glow { position: absolute; right: -80px; top: -80px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle,rgba(108,175,244,.18) 0%,transparent 70%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 80px 0 60px; width: 100%; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(108,175,244,.15); border: 1px solid rgba(108,175,244,.3); color: var(--brand); border-radius: 50px; padding: 8px 16px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; }
.hero-badge::before { content:''; width:6px; height:6px; background:var(--brand); border-radius:50%; display:block; animation: blink 1.8s infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.hero-h1 { font-family: var(--serif); font-size: clamp(2.2rem,5vw,3.6rem); color: var(--white); line-height: 1.1; margin-bottom: 18px; }
.hero-h1 span { color: var(--brand); display: block; }
.hero-p { color: rgba(255,255,255,.75); font-size: 1.08rem; max-width: 460px; margin-bottom: 32px; line-height: 1.7; }
.hero-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.hero-stars { color:#f5c842; font-size:1rem; letter-spacing:2px; }
.hero-trust-txt { color:rgba(255,255,255,.6); font-size:.87rem; }
.hero-trust-txt strong { color:var(--white); }

/* Quote card */
.quote-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(12px); border-radius:20px; padding:36px; position:relative; z-index:2; }
.quote-card-title { font-family:var(--serif); font-size:1.3rem; color:var(--white); margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1); }
.qf label { display:block; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.65); margin-bottom:6px; }
.qf input, .qf select, .qf textarea {
  width:100%; padding:12px 14px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.07);
  color:var(--white); font-family:var(--sans); font-size:.9rem;
  transition:border-color var(--trans), background var(--trans); margin-bottom:14px;
}
.qf input::placeholder, .qf textarea::placeholder { color:rgba(255,255,255,.3); }
.qf input:focus, .qf select:focus, .qf textarea:focus { outline:none; border-color:var(--brand); background:rgba(255,255,255,.11); }
.qf select option { background:var(--dark); color:var(--white); }
.qf .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ============================================================
   SERVICES GRID (homepage)
   ============================================================ */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform var(--trans), box-shadow var(--trans); display:flex; flex-direction:column; }
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.svc-card-top { background:linear-gradient(135deg,var(--brand-light),#cce5fa); padding:28px 24px 22px; display:flex; align-items:center; gap:14px; }
.svc-icon { width:48px; height:48px; background:var(--brand); border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.svc-card-name { font-family:var(--serif); font-size:1.1rem; color:var(--dark); }
.svc-card-body { padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.svc-card-desc { font-size:.91rem; color:var(--text); line-height:1.65; margin-bottom:16px; flex:1; }
.svc-mini-list { list-style:none; margin-bottom:20px; display:flex; flex-direction:column; gap:7px; }
.svc-mini-list li { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text); }
.svc-mini-list li::before { content:''; flex-shrink:0; width:15px; height:15px; background:var(--brand-light); border-radius:50%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236CAFF4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.svc-link { color:var(--brand-dark); font-weight:600; font-size:.88rem; display:flex; align-items:center; gap:4px; transition:gap var(--trans); }
.svc-card:hover .svc-link { gap:8px; }
.svc-card--wide { grid-column:span 2; }
.svc-card--wide .svc-card-body { flex-direction:row; gap:32px; flex-wrap:wrap; }
.svc-card--wide .svc-card-desc-col { flex:1; min-width:200px; }
.svc-card--wide .svc-mini-list { flex:1; min-width:200px; margin-bottom:0; }

/* ============================================================
   WHY US
   ============================================================ */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.why-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0 32px; }
.stat-box { background:var(--light); border-radius:14px; padding:22px; text-align:center; border:1px solid #e4edf6; transition:border-color var(--trans), box-shadow var(--trans); }
.stat-box:hover { border-color:var(--brand); box-shadow:0 4px 16px rgba(108,175,244,.15); }
.stat-box .n { font-family:var(--serif); font-size:2rem; color:var(--brand); display:block; line-height:1; }
.stat-box .l { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text); margin-top:4px; display:block; }
.why-panel { border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(135deg,var(--dark),var(--mid)); aspect-ratio:4/5; position:relative; }
.why-quads { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.why-quad { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; border:1px solid rgba(255,255,255,.07); transition:background var(--trans); }
.why-quad:hover { background:rgba(108,175,244,.1); }
.why-q-icon { width:46px; height:46px; background:rgba(108,175,244,.2); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.why-q-label { color:rgba(255,255,255,.8); font-size:.8rem; font-weight:600; text-align:center; }

/* ============================================================
   TESTIMONIALS (scrolling)
   ============================================================ */
.review-wrap { overflow:hidden; margin-top:48px; }
.review-track { display:flex; gap:22px; animation:scroll-reviews 32s linear infinite; width:max-content; }
.review-track:hover { animation-play-state:paused; }
@keyframes scroll-reviews { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.review-card { background:var(--white); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow); width:295px; flex-shrink:0; }
.r-stars { color:#f5c842; font-size:.9rem; letter-spacing:2px; margin-bottom:12px; }
.r-text  { font-size:.89rem; color:var(--text); line-height:1.65; margin-bottom:16px; font-style:italic; }
.r-author { display:flex; align-items:center; gap:10px; }
.r-avatar { width:36px; height:36px; border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:700; font-size:.87rem; flex-shrink:0; }
.r-name   { font-weight:600; font-size:.88rem; color:var(--dark); }
.r-source { font-size:.76rem; color:var(--text); }

/* ============================================================
   SERVICE AREAS SECTION
   ============================================================ */
.areas-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.county-tags { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 32px; }
.county-tag { background:var(--brand-light); color:var(--brand-dark); border-radius:50px; padding:8px 18px; font-size:.86rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:background var(--trans), color var(--trans), transform var(--trans); }
.county-tag:hover { background:var(--brand); color:var(--white); transform:scale(1.03); }
.county-tag::before { content:'📍'; font-size:.73rem; }
.county-tag--more { background:var(--brand); color:var(--white); font-weight:700; }
.county-tag--more::before { content:''; }
.county-tag--more:hover { background:var(--brand-dark); }
.map-box { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3; position:relative; background:#e8eef4; }
.map-box iframe { width:100%; height:100%; border:0; display:block; }
.map-badge { position:absolute; top:14px; left:14px; background:var(--dark); color:var(--white); border-radius:10px; padding:9px 14px; font-size:.78rem; font-weight:600; box-shadow:var(--shadow); }

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-details { display:flex; flex-direction:column; gap:22px; margin-top:32px; }
.c-item { display:flex; align-items:flex-start; gap:14px; }
.c-icon { width:42px; height:42px; background:rgba(108,175,244,.15); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.c-label { color:rgba(255,255,255,.5); font-size:.82rem; margin-bottom:2px; }
.c-value { color:var(--white); font-weight:600; font-size:.97rem; }
.c-value a { color:var(--brand); transition:color var(--trans); }
.c-value a:hover { color:var(--white); }
.contact-form-box { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:38px; }
.contact-form-box h3 { font-family:var(--serif); font-size:1.35rem; color:var(--white); margin-bottom:26px; }
.cf label { display:block; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:6px; }
.cf input, .cf select, .cf textarea { width:100%; padding:12px 14px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:var(--white); font-family:var(--sans); font-size:.9rem; transition:border-color var(--trans); margin-bottom:14px; }
.cf input::placeholder, .cf textarea::placeholder { color:rgba(255,255,255,.3); }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline:none; border-color:var(--brand); }
.cf select option { background:var(--dark); }
.cf .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ============================================================
   FOOTER
   ============================================================ */
#dss-footer { background:#060d18; color:rgba(255,255,255,.6); padding:64px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1.8fr 1fr; gap:36px; padding-bottom:48px; }
.footer-desc { font-size:.87rem; line-height:1.7; margin:14px 0 22px; max-width:260px; }
.footer-phone a { color:var(--brand); font-weight:700; font-size:1.05rem; display:block; margin-bottom:4px; }
.footer-phone a:hover { color:var(--white); }
.footer-phone span { font-size:.78rem; color:rgba(255,255,255,.35); }
.footer-col-title { font-family:var(--serif); color:var(--white); font-size:.97rem; margin-bottom:18px; }
.footer-links { display:flex; flex-direction:column; gap:9px; }
.footer-links a { font-size:.86rem; transition:color var(--trans); }
.footer-links a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding:20px 0; display:flex; align-items:center; justify-content:space-between; font-size:.8rem; flex-wrap:wrap; gap:10px; }
.footer-bottom a { color:var(--brand); }

/* ============================================================
   INNER PAGE — SERVICE PAGE LAYOUT
   ============================================================ */
.service-page-body { display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; }
.service-page-content h2 { font-size:1.6rem; margin:36px 0 14px; }
.service-page-content h3 { font-size:1.2rem; margin:28px 0 10px; color:var(--mid); }
.service-page-content p  { margin-bottom:16px; font-size:.97rem; line-height:1.75; }
.service-page-content ul { margin:12px 0 20px 0; }

/* Sidebar */
.service-sidebar { position:sticky; top:88px; display:flex; flex-direction:column; gap:20px; }
.sidebar-box { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:28px; }
.sidebar-box h4 { font-family:var(--serif); font-size:1.05rem; color:var(--dark); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #e8eef4; }
.sidebar-cta { background:linear-gradient(135deg,var(--dark),var(--mid)); color:var(--white); border-radius:var(--radius-lg); padding:30px; text-align:center; }
.sidebar-cta h4 { color:var(--white); font-size:1.1rem; margin-bottom:10px; padding-bottom:0; border:none; }
.sidebar-cta p  { font-size:.88rem; color:rgba(255,255,255,.65); margin-bottom:20px; }
.sidebar-service-link { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f0f4f8; font-size:.9rem; color:var(--text); font-weight:500; transition:color var(--trans); }
.sidebar-service-link:last-child { border-bottom:none; }
.sidebar-service-link:hover { color:var(--brand-dark); }
.sidebar-service-link svg { color:var(--brand); flex-shrink:0; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-values { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.value-card { background:var(--white); border-radius:var(--radius-lg); padding:32px 26px; box-shadow:var(--shadow); text-align:center; }
.value-icon { width:56px; height:56px; background:var(--brand-light); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.value-card h3 { font-size:1.05rem; color:var(--dark); margin-bottom:10px; }
.value-card p  { font-size:.88rem; color:var(--text); line-height:1.65; }

.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.team-photo { aspect-ratio:3/4; background:linear-gradient(135deg,var(--brand-light),#cce5fa); display:flex; align-items:center; justify-content:center; }
.team-info { padding:20px 22px; }
.team-info h3 { font-size:1.05rem; margin-bottom:4px; }
.team-info .role { font-size:.82rem; color:var(--brand-dark); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

/* ============================================================
   REVIEWS PAGE
   ============================================================ */
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-full-card { background:var(--white); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); }
.review-summary-box { background:linear-gradient(135deg,var(--dark),var(--mid)); border-radius:var(--radius-lg); padding:40px; text-align:center; color:var(--white); margin-bottom:48px; }
.review-big-stars { font-size:2.5rem; color:#f5c842; letter-spacing:4px; display:block; margin-bottom:10px; }
.review-big-num { font-family:var(--serif); font-size:3.5rem; color:var(--white); line-height:1; display:block; }
.review-big-label { color:rgba(255,255,255,.6); font-size:.9rem; margin-top:6px; display:block; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-info-cards { display:flex; flex-direction:column; gap:18px; }
.contact-info-card { background:var(--white); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow); display:flex; align-items:flex-start; gap:16px; }
.contact-info-card .icon { width:46px; height:46px; background:var(--brand-light); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-card h4 { font-size:.95rem; margin-bottom:4px; }
.contact-info-card p, .contact-info-card a { font-size:.9rem; color:var(--text); }
.contact-info-card a { color:var(--brand-dark); font-weight:600; }
.contact-page-form { background:var(--white); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-lg); }
.contact-page-form h2 { font-size:1.5rem; margin-bottom:24px; }
.cpf label { display:block; font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:6px; }
.cpf input, .cpf select, .cpf textarea { width:100%; padding:12px 14px; border-radius:var(--radius); border:1.5px solid #dde5ef; background:var(--white); color:var(--dark); font-family:var(--sans); font-size:.92rem; transition:border-color var(--trans); margin-bottom:16px; }
.cpf input:focus, .cpf select:focus, .cpf textarea:focus { outline:none; border-color:var(--brand); }
.cpf .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ============================================================
   SERVICE AREAS PAGE
   ============================================================ */
.county-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; }
.county-card { background:var(--white); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); border-top:4px solid var(--brand); transition:transform var(--trans), box-shadow var(--trans); }
.county-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.county-card h3 { font-size:1.05rem; margin-bottom:10px; }
.county-card p  { font-size:.87rem; color:var(--text); line-height:1.6; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.1s; }
.delay-2 { transition-delay:.2s; }
.delay-3 { transition-delay:.3s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .hero-grid          { grid-template-columns:1fr; }
  .two-col, .why-grid, .areas-grid, .contact-grid, .service-page-body,
  .contact-page-grid  { grid-template-columns:1fr; }
  .service-sidebar    { position:static; }
  .footer-grid        { grid-template-columns:1fr 1fr; }
  .stat-strip         { grid-template-columns:1fr 1fr; }
  .two-col--reverse .two-col-img,
  .two-col--reverse .two-col-text { order:unset; }
}
@media (max-width:768px) {
  .dss-nav-links, .dss-nav-cta .btn { display:none; }
  .burger { display:flex; }
  .tb-right { display:none; }
  .svc-grid           { grid-template-columns:1fr; }
  .svc-card--wide     { grid-column:span 1; }
  .svc-card--wide .svc-card-body { flex-direction:column; }
  .about-values, .team-grid, .reviews-grid, .county-cards { grid-template-columns:1fr; }
  .trust-item:not(:last-child) { border-right:none; border-bottom:1px solid rgba(255,255,255,.2); }
  .trust-row          { flex-direction:column; align-items:stretch; }
  .footer-grid        { grid-template-columns:1fr; gap:32px; }
  .qf .row2, .cf .row2, .cpf .row2 { grid-template-columns:1fr; }
  .why-stats          { grid-template-columns:1fr 1fr; }
  .stat-strip         { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .hero-btns, .cta-band-btns, .page-hero-actions { flex-direction:column; align-items:stretch; }
  .why-stats, .stat-strip { grid-template-columns:1fr; }
  .reviews-grid       { grid-template-columns:1fr; }
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
.dss-toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--dark); color: var(--white);
  border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  max-width: 420px; width: calc(100vw - 56px);
  transform: translateY(20px) scale(.97); opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  pointer-events: none;
}
.dss-toast--visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.dss-toast--success { border-left: 4px solid #4ade80; }
.dss-toast--error   { border-left: 4px solid #f87171; }
.dss-toast-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.dss-toast--success .dss-toast-icon { background: #22c55e; }
.dss-toast--error   .dss-toast-icon { background: #ef4444; }
.dss-toast-body { flex: 1; }
.dss-toast-title { font-family: var(--serif); font-size: 1rem; color: var(--white); margin-bottom: 4px; }
.dss-toast-msg   { font-size: .85rem; color: rgba(255,255,255,.7); line-height: 1.5; }
.dss-toast-close {
  background: none; border: none; color: rgba(255,255,255,.4); font-size: 1.3rem;
  cursor: pointer; padding: 0 0 0 8px; line-height: 1; flex-shrink: 0;
  transition: color var(--trans);
}
.dss-toast-close:hover { color: var(--white); }
@media (max-width: 480px) {
  .dss-toast { bottom: 16px; right: 16px; left: 16px; width: auto; max-width: none; }
}

/* ============================================================
   TWO-STEP FORM
   ============================================================ */
.dss-two-step { position: relative; }

/* Progress dots */
.dss-step-progress {
  display: flex; align-items: center; gap: 0; margin-bottom: 22px;
}
.dss-dot {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.4);
  transition: color .3s;
}
.dss-dot.active { color: var(--white); }
.dss-dot-circle {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex-shrink: 0;
  transition: background .3s, border-color .3s;
}
.dss-dot.active .dss-dot-circle { background: var(--brand); border-color: var(--brand); color: white; }
.dss-dot.done  .dss-dot-circle { background: #22c55e; border-color: #22c55e; }
.dss-dot-line {
  flex: 1; height: 2px; background: rgba(255,255,255,.15);
  margin: 0 8px; border-radius: 2px;
}

/* Step panels */
.dss-step-1,
.dss-step-2 { width: 100%; }
.dss-step-2 { display: none; }

.dss-step-label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--brand); margin-bottom: 6px; display: block;
}
.dss-step-heading {
  font-family: var(--serif); font-size: 1.2rem; color: var(--white);
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Animations */
@keyframes stepSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}
.dss-step-enter { animation: stepSlideIn .35s ease forwards; }
.dss-step-exit  { animation: stepSlideOut .28s ease forwards; }

/* Skip / secondary button */
.dss-skip-btn {
  background: none; border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6); border-radius: 50px;
  padding: 10px 20px; font-size: .85rem; font-weight: 500;
  cursor: pointer; width: 100%; margin-top: 8px;
  transition: border-color var(--trans), color var(--trans);
}
.dss-skip-btn:hover { border-color: rgba(255,255,255,.5); color: var(--white); }

/* Step 2 optional badge */
.dss-optional-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(108,175,244,.15); border: 1px solid rgba(108,175,244,.25);
  color: var(--brand); border-radius: 50px;
  padding: 5px 12px; font-size: .73rem; font-weight: 600;
  letter-spacing: .06em; margin-bottom: 14px;
}

/* Done state */
.dss-form-done {
  text-align: center; padding: 32px 16px;
  animation: stepSlideIn .4s ease forwards;
}
.dss-done-icon {
  width: 60px; height: 60px; background: rgba(108,175,244,.15);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.dss-form-done h4 { font-family: var(--serif); font-size: 1.3rem; color: var(--white); margin-bottom: 10px; }
.dss-form-done p  { color: rgba(255,255,255,.65); font-size: .92rem; line-height: 1.6; }
.dss-form-done a  { color: var(--brand); font-weight: 600; }

/* Light version (contact page) */
.dss-two-step--light .dss-dot { color: rgba(0,0,0,.3); }
.dss-two-step--light .dss-dot.active { color: var(--dark); }
.dss-two-step--light .dss-dot-circle { border-color: #dde5ef; }
.dss-two-step--light .dss-dot.active .dss-dot-circle { background: var(--brand); border-color: var(--brand); color: white; }
.dss-two-step--light .dss-dot-line { background: #e4edf6; }
.dss-two-step--light .dss-step-heading { color: var(--dark); border-bottom-color: #e8eef4; }
.dss-two-step--light .dss-step-label { color: var(--brand-dark); }
.dss-two-step--light .dss-skip-btn { border-color: #dde5ef; color: var(--text); }
.dss-two-step--light .dss-skip-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.dss-two-step--light .dss-optional-badge { background: var(--brand-light); border-color: rgba(108,175,244,.3); }
.dss-two-step--light .dss-form-done h4 { color: var(--dark); }
.dss-two-step--light .dss-form-done p  { color: var(--text); }

/* Light form inputs */
.dss-two-step--light .cpf label { color: var(--text); }
.dss-two-step--light .cpf input,
.dss-two-step--light .cpf select,
.dss-two-step--light .cpf textarea {
  background: var(--white); color: var(--dark);
  border: 1.5px solid #dde5ef;
}
.dss-two-step--light .cpf input:focus,
.dss-two-step--light .cpf select:focus,
.dss-two-step--light .cpf textarea:focus { border-color: var(--brand); }

/* TOAST */
.dss-toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--dark); color: var(--white);
  border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  max-width: 420px; width: calc(100vw - 56px);
  transform: translateY(20px) scale(.97); opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  pointer-events: none;
}
.dss-toast--visible   { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.dss-toast--success   { border-left: 4px solid #4ade80; }
.dss-toast--error     { border-left: 4px solid #f87171; }
.dss-toast-icon       { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.dss-toast--success .dss-toast-icon { background:#22c55e; }
.dss-toast--error   .dss-toast-icon { background:#ef4444; }
.dss-toast-body       { flex:1; }
.dss-toast-title      { font-family:var(--serif); font-size:1rem; color:var(--white); margin-bottom:4px; }
.dss-toast-msg        { font-size:.85rem; color:rgba(255,255,255,.7); line-height:1.5; }
.dss-toast-close      { background:none; border:none; color:rgba(255,255,255,.4); font-size:1.3rem; cursor:pointer; padding:0 0 0 8px; line-height:1; flex-shrink:0; transition:color var(--trans); }
.dss-toast-close:hover { color:var(--white); }
@media (max-width:480px) {
  .dss-toast { bottom:16px; right:16px; left:16px; width:auto; max-width:none; }
}

/* ============================================================
   MEGA MENU — Cities We Serve
   ============================================================ */
.has-mega { position: static !important; }
.mega-menu {
  position: fixed !important;
  top: auto !important; left: 0 !important;
  width: 100vw !important; min-width: unset !important;
  padding: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 20px 60px rgba(15,27,45,.18) !important;
  max-height: 70vh; overflow-y: auto;
}
.mega-inner {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  padding: 24px 32px 20px;
  background: var(--white);
}
.mega-col { padding: 0 10px; border-right: 1px solid #f0f4f8; }
.mega-col:last-child { border-right: none; }
.mega-county-title {
  font-family: var(--serif); font-size: .78rem; font-weight: 700;
  color: var(--brand-dark); text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--brand-light);
  white-space: nowrap;
}
.mega-city-link {
  display: block; padding: 4px 6px; border-radius: 5px;
  font-size: .82rem; color: var(--text); font-weight: 500;
  transition: background var(--trans), color var(--trans);
  white-space: nowrap;
}
.mega-city-link:hover { background: var(--brand-light); color: var(--brand-dark); }
.mega-footer {
  background: var(--light); padding: 12px 32px;
  border-top: 1px solid #e8eef4; text-align: right;
}
.mega-footer a { font-size: .85rem; font-weight: 600; color: var(--brand-dark); }
.mega-footer a:hover { color: var(--dark); }

/* Mobile county label */
.mob-county {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand); padding: 10px 14px 3px;
}
.mob-city-link {
  display: block; padding: 7px 24px; font-size: .88rem; color: var(--text);
  transition: background var(--trans), color var(--trans);
}
.mob-city-link:hover { background: var(--brand-light); color: var(--brand-dark); }

/* ============================================================
   CITY PAGE
   ============================================================ */
.city-page-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  padding: 72px 0 60px; position: relative; overflow: hidden;
}
.city-page-hero::before {
  content:''; position:absolute; inset:0; opacity:.04;
  background-image: radial-gradient(circle,#fff 1px,transparent 1px);
  background-size: 32px 32px;
}
.city-hero-content { position: relative; z-index: 2; }
.city-hero-content h1 { font-size: clamp(1.8rem,4vw,2.8rem); color: var(--white); margin-bottom: 14px; }
.city-hero-content p  { color: rgba(255,255,255,.75); font-size: 1.05rem; max-width: 620px; margin-bottom: 28px; }
.city-services-grid   { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin: 32px 0; }
.city-service-box {
  background: var(--white); border-radius: 14px; padding: 24px; box-shadow: var(--shadow);
  border-top: 3px solid var(--brand);
  transition: transform var(--trans), box-shadow var(--trans);
}
.city-service-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.city-service-box h3 { font-size: 1.05rem; margin-bottom: 8px; }
.city-service-box p  { font-size: .88rem; color: var(--text); line-height: 1.6; margin-bottom: 14px; }
.city-nearby { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.city-nearby a {
  background: var(--brand-light); color: var(--brand-dark); border-radius: 50px;
  padding: 6px 14px; font-size: .82rem; font-weight: 600;
  transition: background var(--trans), color var(--trans);
}
.city-nearby a:hover { background: var(--brand); color: var(--white); }

/* ============================================================
   BLOG PAGE
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 48px; }
.blog-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); transition: transform var(--trans), box-shadow var(--trans);
  display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-card-top {
  background: linear-gradient(135deg, var(--dark), var(--mid));
  padding: 28px 24px 22px; position: relative; overflow: hidden;
}
.blog-card-top::before {
  content:''; position:absolute; inset:0; opacity:.05;
  background-image: radial-gradient(circle,#fff 1px,transparent 1px);
  background-size:20px 20px;
}
.blog-cat {
  display: inline-block; background: var(--brand); color: var(--white);
  border-radius: 50px; padding: 4px 12px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
  position: relative; z-index: 2;
}
.blog-card-title {
  font-family: var(--serif); font-size: 1.1rem; color: var(--white);
  line-height: 1.3; position: relative; z-index: 2;
}
.blog-card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.blog-date { font-size: .78rem; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.blog-excerpt { font-size: .88rem; color: var(--text); line-height: 1.65; flex: 1; margin-bottom: 18px; }
.blog-read-more { color: var(--brand-dark); font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 4px; transition: gap var(--trans); }
.blog-card:hover .blog-read-more { gap: 8px; }

/* Blog post page */
.blog-post-wrap { max-width: 780px; margin: 0 auto; }
.blog-post-header { margin-bottom: 36px; }
.blog-post-header .blog-cat { margin-bottom: 12px; }
.blog-post-header h1 { font-size: clamp(1.6rem,3.5vw,2.4rem); margin-bottom: 14px; }
.blog-post-meta { display: flex; align-items: center; gap: 20px; color: var(--text); font-size: .85rem; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid #e8eef4; margin-bottom: 32px; }
.blog-post-content h2 { font-size: 1.4rem; margin: 32px 0 14px; color: var(--dark); }
.blog-post-content h3 { font-size: 1.1rem; margin: 24px 0 10px; color: var(--mid); }
.blog-post-content p  { font-size: .97rem; line-height: 1.8; margin-bottom: 18px; color: var(--text); }
.blog-post-content ul { margin: 0 0 20px 0; }
.blog-back { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-dark); font-weight: 600; font-size: .9rem; margin-bottom: 32px; transition: gap var(--trans); }
.blog-back:hover { gap: 12px; }

/* ============================================================
   SERVICE AREAS PAGE — cities grid
   ============================================================ */
.cities-section { margin-bottom: 48px; }
.cities-section h3 { font-size: 1.2rem; color: var(--dark); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-light); }
.cities-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.cities-tag-cloud a {
  background: var(--brand-light); color: var(--brand-dark); border-radius: 50px;
  padding: 7px 16px; font-size: .85rem; font-weight: 600;
  transition: background var(--trans), color var(--trans), transform var(--trans);
}
.cities-tag-cloud a:hover { background: var(--brand); color: var(--white); transform: scale(1.03); }

/* Responsive */
@media (max-width: 1200px) {
  .mega-inner { grid-template-columns: repeat(5,1fr); }
}
@media (max-width: 900px) {
  .mega-inner { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .city-services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SCROLLABLE MEGA MENU (Cities We Serve)
   ============================================================ */
.has-mega { position: static !important; }

.mega-menu {
  position: fixed !important;
  top: auto !important; left: 0 !important;
  width: 100vw !important; min-width: unset !important;
  padding: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 20px 60px rgba(15,27,45,.18) !important;
  background: var(--white);
  overflow: visible;
}

/* Scroll track + inner */
.mega-scroll-track {
  overflow: hidden;
  position: relative;
  padding: 0 56px; /* room for arrow buttons */
}
.mega-inner {
  display: flex;
  gap: 0;
  padding: 24px 0 16px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.mega-col {
  flex: 0 0 160px;
  padding: 0 14px;
  border-right: 1px solid #f0f4f8;
}
.mega-col:last-child { border-right: none; }

.mega-county-title {
  font-family: var(--serif); font-size: .75rem; font-weight: 700;
  color: var(--brand-dark); text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--brand-light);
  white-space: nowrap;
}
.mega-city-link {
  display: block; padding: 4px 4px; border-radius: 5px;
  font-size: .82rem; color: var(--text); font-weight: 500;
  transition: background var(--trans), color var(--trans);
  white-space: nowrap;
}
.mega-city-link:hover { background: var(--brand-light); color: var(--brand-dark); }

/* Arrow scroll buttons */
.mega-scroll-btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--brand);
  color: var(--brand-dark); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; box-shadow: 0 2px 10px rgba(15,27,45,.12);
  transition: background var(--trans), color var(--trans), opacity var(--trans);
}
.mega-scroll-btn:hover { background: var(--brand); color: var(--white); }
.mega-scroll-btn.hidden { opacity: 0; pointer-events: none; }
.mega-scroll-left  { left: 10px; }
.mega-scroll-right { right: 10px; }

/* Visible scrollbar strip */
.mega-scrollbar-wrap {
  padding: 6px 56px 14px;
  background: var(--light);
  border-top: 1px solid #e8eef4;
}
.mega-scrollbar-label {
  font-size: .72rem; color: var(--text); text-align: center;
  margin-bottom: 6px; letter-spacing: .05em;
}
.mega-scrollbar-track {
  height: 8px; background: #dde5ef; border-radius: 50px;
  position: relative; cursor: pointer;
  transition: height var(--trans);
}
.mega-scrollbar-track:hover { height: 10px; }
.mega-scrollbar-thumb {
  position: absolute; top: 0; left: 0;
  height: 100%; background: var(--brand); border-radius: 50px;
  cursor: grab; transition: background var(--trans), width .1s;
  min-width: 40px;
}
.mega-scrollbar-thumb:hover { background: var(--brand-dark); }
.mega-scrollbar-thumb:active { cursor: grabbing; background: var(--brand-dark); }

.mega-footer {
  background: var(--white); padding: 12px 56px;
  border-top: 1px solid #e8eef4; text-align: right;
  border-radius: 0 0 16px 16px;
}
.mega-footer a { font-size: .85rem; font-weight: 600; color: var(--brand-dark); }
.mega-footer a:hover { color: var(--dark); }

/* Mobile county label */
.mob-county {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand); padding: 10px 14px 3px;
}
.mob-city-link {
  display: block; padding: 7px 24px; font-size: .88rem; color: var(--text);
  transition: background var(--trans), color var(--trans);
}
.mob-city-link:hover { background: var(--brand-light); color: var(--brand-dark); }

/* ============================================================
   BLOG PAGE — Iron Hive inspired layout
   ============================================================ */
.blog-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  padding: 72px 0 60px; position: relative; overflow: hidden;
  text-align: center;
}
.blog-hero::before {
  content:''; position:absolute; inset:0; opacity:.04;
  background-image: radial-gradient(circle,#fff 1px,transparent 1px);
  background-size: 28px 28px;
}
.blog-hero-content { position: relative; z-index: 2; }
.blog-hero-content h1 { font-size: clamp(2rem,4.5vw,3rem); color: var(--white); margin-bottom: 14px; }
.blog-hero-content p  { color: rgba(255,255,255,.7); font-size: 1.05rem; max-width: 580px; margin: 0 auto 32px; }

/* Category filter tabs */
.blog-filters {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 48px;
}
.blog-filter-btn {
  padding: 9px 20px; border-radius: 50px; font-size: .88rem; font-weight: 600;
  cursor: pointer; border: 2px solid transparent;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
  background: var(--light); color: var(--text); border-color: #dde5ef;
}
.blog-filter-btn:hover,
.blog-filter-btn.active { background: var(--brand); color: var(--white); border-color: var(--brand); }

/* Featured post (large, top of grid) */
.blog-featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--white); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-lg); margin-bottom: 40px;
  transition: transform var(--trans), box-shadow var(--trans);
}
.blog-featured:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(15,27,45,.18); }
.blog-featured-img {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 60%, #1e4a6e 100%);
  min-height: 320px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.blog-featured-img::before {
  content:''; position:absolute; inset:0; opacity:.06;
  background-image: radial-gradient(circle,#fff 1px,transparent 1px);
  background-size: 24px 24px;
}
.blog-featured-img-inner {
  text-align: center; position: relative; z-index: 2; padding: 40px;
}
.blog-featured-img svg { opacity: .25; margin: 0 auto; }
.blog-featured-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body .blog-cat { margin-bottom: 14px; }
.blog-featured-body h2 { font-family: var(--serif); font-size: clamp(1.4rem,2.5vw,1.9rem); color: var(--dark); margin-bottom: 14px; line-height: 1.25; }
.blog-featured-body .blog-date { margin-bottom: 14px; }
.blog-featured-body p { font-size: .97rem; color: var(--text); line-height: 1.7; margin-bottom: 24px; }
.blog-featured-body .blog-read-more { font-size: .95rem; }

/* Standard blog grid */
.blog-grid-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card {
  background: var(--white); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans);
  cursor: pointer;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-card-img {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  height: 180px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.blog-card-img::before {
  content:''; position:absolute; inset:0; opacity:.06;
  background-image: radial-gradient(circle,#fff 1px,transparent 1px);
  background-size: 18px 18px;
}
.blog-card-img-accent {
  width: 52px; height: 52px; background: rgba(108,175,244,.2);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
.blog-card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.blog-cat {
  display: inline-block; background: var(--brand); color: var(--white);
  border-radius: 50px; padding: 4px 13px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px;
}
.blog-cat--pump    { background: #2563eb; }
.blog-cat--grease  { background: #16a34a; }
.blog-cat--install { background: #7c3aed; }
.blog-cat--repair  { background: #dc2626; }

.blog-card-title {
  font-family: var(--serif); font-size: 1.1rem; color: var(--dark);
  line-height: 1.3; margin-bottom: 10px;
}
.blog-date {
  font-size: .78rem; color: var(--text); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.blog-excerpt { font-size: .88rem; color: var(--text); line-height: 1.65; flex: 1; margin-bottom: 18px; }
.blog-read-more {
  color: var(--brand-dark); font-weight: 600; font-size: .9rem;
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap var(--trans), color var(--trans);
}
.blog-card:hover .blog-read-more,
.blog-featured:hover .blog-read-more { gap: 9px; color: var(--brand); }

/* Hidden cards for filter */
.blog-card.hidden,
.blog-featured.hidden { display: none !important; }

/* ============================================================
   BLOG POST PAGE
   ============================================================ */
.blog-post-layout {
  display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start;
}
.blog-post-content h2 { font-size: 1.4rem; margin: 32px 0 12px; color: var(--dark); }
.blog-post-content h3 { font-size: 1.15rem; margin: 24px 0 10px; color: var(--mid); }
.blog-post-content p  { font-size: .97rem; line-height: 1.8; margin-bottom: 18px; color: var(--text); }
.blog-post-content ul { margin: 0 0 20px 0; }
.blog-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-dark); font-weight: 600; font-size: .9rem;
  margin-bottom: 32px; transition: gap var(--trans);
}
.blog-back:hover { gap: 12px; }
.blog-post-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; }
.blog-sidebar-box { background: var(--white); border-radius: 16px; box-shadow: var(--shadow); padding: 24px; }
.blog-sidebar-box h4 { font-family: var(--serif); font-size: 1rem; color: var(--dark); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #e8eef4; }
.blog-sidebar-link {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #f0f4f8;
  font-size: .84rem; color: var(--text); font-weight: 500; line-height: 1.4;
  transition: color var(--trans);
}
.blog-sidebar-link:last-child { border-bottom: none; }
.blog-sidebar-link:hover { color: var(--brand-dark); }
.blog-sidebar-link.current { color: var(--brand-dark); font-weight: 700; }

/* ============================================================
   RESPONSIVE — blog & mega
   ============================================================ */
@media (max-width: 1024px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-img { min-height: 200px; }
  .blog-grid-wrap { grid-template-columns: 1fr 1fr; }
  .blog-post-layout { grid-template-columns: 1fr; }
  .blog-post-sidebar { position: static; }
}
@media (max-width: 768px) {
  .blog-grid-wrap { grid-template-columns: 1fr; }
  .mega-scroll-track { padding: 0 44px; }
}

/* ============================================================
   COUNTY LANDING PAGE — city card grid
   ============================================================ */
.county-city-card { display: block; }
.county-city-card-inner {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border-radius: 12px; padding: 14px 16px;
  border: 1.5px solid #e4edf6; box-shadow: 0 2px 8px rgba(15,27,45,.06);
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans), background var(--trans);
}
.county-city-card:hover .county-city-card-inner {
  border-color: var(--brand); box-shadow: 0 4px 16px rgba(108,175,244,.2);
  transform: translateY(-2px); background: var(--brand-light);
}
.county-city-icon {
  width: 32px; height: 32px; background: var(--brand-light); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--brand); transition: background var(--trans), color var(--trans);
}
.county-city-card:hover .county-city-icon { background: var(--brand); color: var(--white); }
.county-city-name {
  flex: 1; font-size: .9rem; font-weight: 600; color: var(--dark);
  transition: color var(--trans);
}
.county-city-card:hover .county-city-name { color: var(--brand-dark); }
.county-city-arrow {
  font-size: .85rem; color: var(--brand); opacity: 0;
  transition: opacity var(--trans), transform var(--trans);
  transform: translateX(-4px);
}
.county-city-card:hover .county-city-arrow { opacity: 1; transform: translateX(0); }

/* County service rows */
.county-svc-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border-radius: 10px; padding: 14px 16px;
  border: 1px solid #e4edf6; text-decoration: none;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.county-svc-row:hover {
  border-color: var(--brand); box-shadow: 0 4px 14px rgba(108,175,244,.15);
  transform: translateY(-2px);
}
.county-svc-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.county-svc-name { font-size: .9rem; font-weight: 600; color: var(--dark); line-height: 1.2; }
.county-svc-desc { font-size: .78rem; color: var(--text); margin-top: 2px; }

@media (max-width: 768px) {
  .county-city-card-inner { padding: 12px 14px; }
  .county-svc-row { padding: 12px 14px; }
  /* City grid: 2 columns on tablet, 1 on phone */
}
@media (max-width: 900px) {
  /* City card grid becomes 2 cols */
}

/* ============================================================
   MOBILE NAV — County accordion for Cities We Serve
   ============================================================ */
.mob-all-cities-link {
  display: block; padding: 11px 14px; border-radius: var(--radius);
  font-weight: 700; color: var(--brand) !important;
  font-size: .92rem; background: rgba(108,175,244,.1);
  margin-bottom: 4px;
}
.mob-county-group { border-bottom: 1px solid rgba(255,255,255,.05); }
.mob-county-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: none; border: none; cursor: pointer;
  color: var(--mid); font-family: var(--sans); font-size: .9rem; font-weight: 600;
  text-align: left; transition: background var(--trans), color var(--trans);
  border-radius: var(--radius);
}
.mob-county-toggle:hover { background: var(--brand-light); color: var(--brand-dark); }
.mob-county-toggle[aria-expanded="true"] { color: var(--brand-dark); }
.mob-county-caret { flex-shrink: 0; transition: transform .25s ease; }
.mob-county-toggle[aria-expanded="true"] .mob-county-caret { transform: rotate(180deg); }
.mob-county-cities {
  padding: 4px 0 8px 14px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.mob-county-page-link {
  display: block; padding: 8px 14px; font-size: .85rem; font-weight: 700;
  color: var(--brand-dark); border-radius: 6px;
  transition: background var(--trans);
}
.mob-county-page-link:hover { background: var(--brand-light); }
.mob-city-item {
  display: inline-block; margin: 3px 4px 3px 0;
  background: var(--light); color: var(--text); border-radius: 50px;
  padding: 4px 12px; font-size: .82rem; font-weight: 500;
  transition: background var(--trans), color var(--trans);
}
.mob-city-item:hover { background: var(--brand); color: var(--white); }

/* ============================================================
   MOBILE MENU — scroll lock + independent menu scroll
   ============================================================ */

/* When menu is open, the nav wraps gets full-height scrollable area */
.dss-mob-nav {
  /* existing styles kept — add height + overflow */
  max-height: calc(100vh - 130px); /* full viewport minus topbar+nav height */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  overscroll-behavior: contain;      /* prevent scroll bleeding to page */
}

/* Smooth open transition */
.dss-mob-nav {
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.dss-mob-nav.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar styling inside mobile menu */
.dss-mob-nav::-webkit-scrollbar { width: 4px; }
.dss-mob-nav::-webkit-scrollbar-track { background: transparent; }
.dss-mob-nav::-webkit-scrollbar-thumb { background: var(--brand-light); border-radius: 4px; }

/* ============================================================
   CITY PAGE — MOBILE-FIRST COMPLETE REWRITE
   ============================================================ */

/* ── Hero ── */
.city-page-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  padding: 60px 0 52px; position: relative; overflow: hidden;
}
.city-page-hero::before {
  content:''; position:absolute; inset:0; opacity:.04;
  background-image:radial-gradient(circle,#fff 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.city-hero-inner { position: relative; z-index: 2; max-width: 680px; }
.city-page-hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem); color: var(--white);
  margin: 14px 0 12px; line-height: 1.15;
}
.city-page-hero p { color: rgba(255,255,255,.75); font-size: 1rem; margin-bottom: 24px; line-height: 1.65; }
.city-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.city-hero-btns .btn { min-width: 140px; }
.city-trust-row {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px;
}
.city-trust-item {
  color: rgba(255,255,255,.65); font-size: .82rem; font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}

/* ── Page layout: sidebar right on desktop, stacked on mobile ── */
.city-page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

/* ── Team note card ── */
.city-note-card {
  background: linear-gradient(135deg, var(--dark), var(--mid));
  border-radius: 18px; padding: 28px; margin-bottom: 32px;
  position: relative; overflow: hidden;
}
.city-note-card::before {
  content:''; position:absolute; inset:0; opacity:.04;
  background-image:radial-gradient(circle,#fff 1px,transparent 1px);
  background-size:22px 22px; pointer-events:none;
}
.city-note-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; position: relative; z-index: 2;
}
.city-note-icon {
  width: 32px; height: 32px; background: var(--brand); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.city-note-label {
  color: var(--brand); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.city-note-title {
  font-family: var(--serif); color: var(--white); font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  margin-bottom: 12px; line-height: 1.3; position: relative; z-index: 2;
}
.city-note-body {
  color: rgba(255,255,255,.78); font-size: .93rem; line-height: 1.8;
  position: relative; z-index: 2; margin: 0;
}
.city-note-landmark {
  display: flex; align-items: center; gap: 7px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45); font-size: .8rem;
  position: relative; z-index: 2;
}

/* Generic intro (cities without custom content) */
.city-generic-intro {
  background: var(--light); border-radius: 14px; padding: 24px; margin-bottom: 32px;
}
.city-generic-intro h2 { font-size: 1.2rem; margin-bottom: 8px; }
.city-generic-intro p  { font-size: .93rem; line-height: 1.75; color: var(--text); }

/* Section label spacing */
.city-section-label { margin-bottom: 20px; }

/* ── Service cards grid ── */
.city-svc-grid {
  display: grid;
  grid-template-columns: 1fr;   /* 1 column on mobile */
  gap: 14px;
  margin-bottom: 28px;
}
.city-svc-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--white); border-radius: 14px; padding: 20px;
  box-shadow: var(--shadow); text-decoration: none;
  border: 1.5px solid transparent;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.city-svc-card:hover {
  border-color: var(--brand); box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.city-svc-card-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.city-svc-card-icon--blue   { background: #2563eb; }
.city-svc-card-icon--green  { background: #16a34a; }
.city-svc-card-icon--purple { background: #7c3aed; }
.city-svc-card-icon--orange { background: #ea580c; }
.city-svc-card-body { flex: 1; min-width: 0; }
.city-svc-card-title {
  font-family: var(--serif); font-size: 1rem; color: var(--dark);
  margin-bottom: 6px; line-height: 1.2;
}
.city-svc-card-desc {
  font-size: .86rem; color: var(--text); line-height: 1.6;
  margin-bottom: 10px;
}
.city-svc-card-link {
  font-size: .84rem; font-weight: 600; color: var(--brand-dark);
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap var(--trans), color var(--trans);
}
.city-svc-card:hover .city-svc-card-link { gap: 8px; color: var(--brand); }

/* ── Emergency box ── */
.city-emergency-box {
  display: flex; align-items: center; gap: 16px;
  background: #1a1a2e; border-radius: 14px; padding: 20px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.city-emergency-icon {
  width: 44px; height: 44px; background: #e05c5c; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.city-emergency-text { flex: 1; min-width: 160px; }
.city-emergency-text strong { color: var(--white); font-size: .95rem; display: block; margin-bottom: 3px; }
.city-emergency-text p { color: rgba(255,255,255,.6); font-size: .84rem; margin: 0; }
.city-emergency-btn { flex-shrink: 0; }

/* ── Why us section ── */
.city-why-section {
  background: var(--light); border-radius: 14px; padding: 24px; margin-bottom: 28px;
}
.city-why-title { font-size: 1.05rem; margin-bottom: 16px; color: var(--dark); }
.city-check-list li { font-size: .9rem; }

/* ── Nearby cities ── */
.city-nearby-section {
  background: var(--white); border-radius: 14px; padding: 22px;
  box-shadow: var(--shadow);
}
.city-nearby-title { font-size: .95rem; color: var(--mid); margin-bottom: 14px; font-weight: 600; }
.city-nearby-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.city-nearby-tag {
  background: var(--brand-light); color: var(--brand-dark); border-radius: 50px;
  padding: 7px 16px; font-size: .84rem; font-weight: 600;
  transition: background var(--trans), color var(--trans);
  display: inline-flex; align-items: center;
}
.city-nearby-tag:hover { background: var(--brand); color: var(--white); }
.city-nearby-tag--more {
  background: var(--brand); color: var(--white); font-weight: 700;
}
.city-nearby-tag--more:hover { background: var(--brand-dark); }

/* ── Sidebar ── */
.city-page-sidebar {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 18px;
}
.city-sidebar-cta {
  background: linear-gradient(135deg, var(--dark), var(--mid));
  border-radius: 16px; padding: 26px; text-align: center;
}
.city-sidebar-cta-icon {
  width: 48px; height: 48px; background: var(--brand); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.city-sidebar-cta h4 { font-family: var(--serif); color: var(--white); font-size: 1.05rem; margin-bottom: 6px; }
.city-sidebar-cta p  { color: rgba(255,255,255,.6); font-size: .85rem; margin-bottom: 18px; }
.sidebar-service-link--active { color: var(--brand-dark) !important; font-weight: 700; }

/* ── RESPONSIVE BREAKPOINTS ── */

/* Tablet: 2-column service cards */
@media (min-width: 600px) {
  .city-svc-grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop: sidebar layout */
@media (min-width: 1024px) {
  .city-page-layout { grid-template-columns: 1fr 300px; }
}

/* Mobile: collapse sidebar below content */
@media (max-width: 1023px) {
  .city-page-layout { grid-template-columns: 1fr; }
  .city-page-sidebar { position: static; }
  /* On mobile, hide verbose sidebar boxes to keep it clean */
  .city-page-sidebar .sidebar-box { display: none; }
  /* But always show the CTA box */
  .city-sidebar-cta { display: block; }
}

/* Small mobile: single column service cards */
@media (max-width: 599px) {
  .city-svc-grid { grid-template-columns: 1fr; }
  .city-hero-btns { flex-direction: column; }
  .city-hero-btns .btn { width: 100%; justify-content: center; }
  .city-trust-row { gap: 10px; }
  .city-emergency-box { flex-direction: column; text-align: center; }
  .city-emergency-icon { margin: 0 auto; }
  .city-emergency-btn { width: 100%; justify-content: center; }
  .city-note-card { padding: 22px 18px; }
}