/* ===================================
   MOVING GUYS — SHARED STYLES
   movingguys.net redesign
   =================================== */

/* Inter is loaded via <link rel=preconnect>+<link rel=stylesheet> in each page head. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:        #0d2240;
  --navy-mid:    #1a3a5c;
  --orange:      #e8832a;
  --orange-dk:   #cf6f1e;
  --white:       #ffffff;
  --gray-light:  #edf0f7;
  --gray-mid:    #dde2ea;
  --text-dark:   #1a1a2e;
  --text-mid:    #4a5568;
  --shadow-sm:   0 2px 10px rgba(0,0,0,.07);
  --shadow-md:   0 6px 24px rgba(0,0,0,.10);
  --shadow-lg:   0 12px 48px rgba(0,0,0,.14);
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 24px;
  --ease: all .28s ease;
  --max: 1200px;
}

html { scroll-behavior: smooth; }
body { font-family:'Inter',system-ui,sans-serif; color:var(--text-dark); line-height:1.65; background:var(--white); overflow-x:hidden; }
img  { max-width:100%; height:auto; display:block; }
a    { text-decoration:none; color:inherit; transition:var(--ease); }

/* ─── NAVIGATION ─── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: var(--navy);
  transition: box-shadow 0.35s ease;
}
.nav.scrolled { box-shadow: 0 2px 28px rgba(0,0,0,.35); }

/* Info row — collapses on scroll */
.nav-info {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 14px 40px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  max-height: 120px; opacity: 1; overflow: hidden;
  transition:
    max-height 0.45s cubic-bezier(.4,0,.2,1),
    opacity    0.30s cubic-bezier(.4,0,.2,1),
    padding    0.45s cubic-bezier(.4,0,.2,1),
    border-color 0.30s ease;
}
.nav.scrolled .nav-info {
  max-height: 0; opacity: 0;
  padding-top: 0; padding-bottom: 0;
  border-color: transparent;
}
.nav-info-left {
  font-size: 15px; font-weight: 900; color: #fff;
  letter-spacing: .12em; text-transform: uppercase;
}
.nav-info-center a { display: block; }
.nav-info-center img { height: 56px; width: auto; display: block; margin: 0 auto; }
.nav-info-right { display: flex; align-items: center; justify-content: flex-end; }
.nav-mascot { display: block; opacity: .9; }

/* Nav row — always visible */
.nav-inner {
  max-width:var(--max); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; height:52px;
}

/* Mini logo — hidden until scrolled */
.nav-logo {
  overflow: hidden; max-width: 0; opacity: 0; pointer-events: none; flex-shrink: 0;
  transition:
    max-width 0.45s cubic-bezier(.4,0,.2,1),
    opacity   0.30s cubic-bezier(.4,0,.2,1),
    margin    0.45s cubic-bezier(.4,0,.2,1);
  margin-right: 0;
}
.nav.scrolled .nav-logo {
  max-width: 180px; opacity: 1; pointer-events: auto; margin-right: 16px;
}
.nav-logo img { height: 32px; width: auto; display: block; }

.nav-menu { display:flex; align-items:center; gap:4px; list-style:none; }
.nav-menu > li:has(.nav-contact-cta) { margin-left:8px; }
.nav-menu > li:has(.nav-cta) { margin-left:4px; }
.nav-menu > li:has(.nav-review) { margin-left:4px; }
.nav-menu > li { position:relative; }
.nav-menu > li > a {
  color:rgba(255,255,255,.82); font-weight:500; font-size:13.5px;
  padding:8px 10px; border-radius:var(--r-sm); display:block; letter-spacing:.2px; white-space:nowrap;
}
.nav-menu > li > a:hover { color:#fff; background:rgba(255,255,255,.1); }

/* Dropdown */
.dropdown > a::after { content:' ▾'; font-size:10px; opacity:.65; }
.dropdown-menu {
  position:absolute; top:calc(100% + 6px); left:0;
  background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  min-width:230px; padding:8px 0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:var(--ease); z-index:200;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu li a {
  color:var(--text-dark); padding:11px 20px; font-size:14px; display:flex; align-items:center; gap:10px;
  border-radius:0;
}
.dropdown-menu li a:hover { background:var(--gray-light); color:var(--navy); }

/* Nav CTA */
.nav-cta {
  background:#fff !important; color:var(--navy) !important;
  border-radius:50px !important; padding:10px 22px !important;
  font-weight:700 !important; font-size:14px !important; letter-spacing:.4px;
  box-shadow:0 2px 12px rgba(0,0,0,.2) !important; transition:all .18s !important; white-space:nowrap;
}
.nav-cta:hover {
  background:#f0f4ff !important; color:var(--navy) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.25) !important; transform:translateY(-1px);
}

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:4px; background:none; border:none;
}
.nav-hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:var(--ease); }

/* Mobile quick-action buttons (Quotes + Call) */
.mob-quick-actions { display:none; align-items:center; gap:8px; margin-left:auto; margin-right:12px; }
.mob-quick-btn {
  font-size:13px; font-weight:700; padding:7px 14px; border-radius:50px;
  white-space:nowrap; letter-spacing:.2px;
  background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.25);
  transition:background .18s, border-color .18s;
}
.mob-quick-btn:hover { background:rgba(255,255,255,.22); }
.mob-quick-call { background:var(--orange); border-color:var(--orange); color:#fff; }
.mob-quick-call:hover { background:var(--orange-dk); border-color:var(--orange-dk); }

/* Mobile nav */
/* ── Mobile slide-out drawer ── */
.nav-mobile {
  position:fixed; top:0; right:0;
  width:300px; max-width:88vw; height:100dvh;
  background:var(--navy); z-index:1100;
  overflow-y:auto; overflow-x:hidden;
  transform:translateX(110%);
  transition:transform 0.38s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-8px 0 48px rgba(0,0,0,.4);
}
.nav-mobile.open { transform:translateX(0); }
.mob-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.1);
}
.mob-drawer-header img { height:32px; width:auto; display:block; }
.mob-close-btn {
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,.7);
  padding:6px; display:flex; align-items:center; border-radius:6px; transition:color .15s;
}
.mob-close-btn:hover { color:#fff; }
.mob-links { padding:8px 0 32px; }
.nav-mobile a { color:rgba(255,255,255,.8); display:block; padding:13px 24px; font-size:15px; font-weight:500; border-bottom:1px solid rgba(255,255,255,.07); }
.nav-mobile a:hover { color:var(--orange); }
#nav-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.52);
  z-index:1099; opacity:0; pointer-events:none;
  transition:opacity 0.38s ease;
}
#nav-overlay.visible { opacity:1; pointer-events:all; }
#site-wrap {
  transition:transform 0.38s cubic-bezier(0.4,0,0.2,1);
}
body.nav-open #site-wrap { transform:translateX(-260px); }
html.nav-open { overflow:hidden; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-mobile .mob-cta {
  display:block; background:var(--orange); color:#fff !important; text-align:center;
  padding:14px !important; border-radius:50px; margin:16px 24px 0; font-weight:700; border-bottom:none !important;
}

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:50px; font-weight:700; font-size:15px;
  cursor:pointer; border:none; transition:var(--ease); text-align:center; letter-spacing:.2px;
}
.btn-primary  { background:var(--orange); color:#fff; }
.btn-primary:hover  { background:var(--orange-dk); transform:translateY(-2px); box-shadow:0 6px 22px rgba(232,131,42,.38); color:#fff; }
.btn-secondary { background:transparent; color:#fff; border:2px solid #fff; }
.btn-secondary:hover { background:#fff; color:var(--navy); transform:translateY(-2px); }
.btn-outline   { background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn-outline:hover   { background:var(--navy); color:#fff; transform:translateY(-2px); }
.btn-lg { padding:18px 44px; font-size:17px; }

/* ─── PAGE HERO (service pages) ─── */
.page-hero {
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding:140px 24px 88px; text-align:center; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.page-hero .breadcrumb {
  position:absolute; top:88px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; align-items:center; font-size:13px; color:rgba(255,255,255,.5); white-space:nowrap;
}
.page-hero .breadcrumb a { color:rgba(255,255,255,.5); }
.page-hero .breadcrumb a:hover { color:var(--orange); }
.page-hero h1 { font-size:clamp(28px,4.5vw,52px); color:#fff; font-weight:800; margin-bottom:18px; position:relative; line-height:1.15; }
.page-hero p  { font-size:clamp(16px,2vw,20px); color:rgba(255,255,255,.78); max-width:600px; margin:0 auto 32px; position:relative; }
.page-hero .btn { position:relative; z-index:1; }

/* ─── SECTIONS ─── */
.section    { padding:88px 24px; border-top:1px solid rgba(13,34,64,.07); }
.section-sm { padding:56px 24px; border-top:1px solid rgba(13,34,64,.07); }
.container  { max-width:var(--max); margin:0 auto; }

/* First section after dark elements gets no border */
.trust-bar + .section,
.trust-bar + .section-sm,
.page-hero + .trust-bar,
.cta-banner + .section,
.cta-banner + .section-sm { border-top:none; }

/* Subtle top-fade on alternating bg sections */
.bg-light {
  background: var(--gray-light);
  box-shadow: inset 0 1px 0 rgba(13,34,64,.05), inset 0 -1px 0 rgba(13,34,64,.05);
}

.section-header::before { display:none; }

.section-title  { font-size:clamp(26px,4vw,44px); font-weight:800; color:var(--navy); line-height:1.18; margin-bottom:16px; }
.section-sub    { font-size:18px; color:var(--text-mid); max-width:600px; line-height:1.7; }
.section-header { margin-bottom:56px; }
.section-header.center { text-align:center; }
.section-header.center .section-sub { margin:0 auto; }

/* ─── SERVICE CARDS ─── */
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card {
  background:var(--white); border-radius:4px; padding:32px 26px;
  border:1px solid #d9e0ea; box-shadow:none;
  display:flex; flex-direction:column; gap:12px;
  position:relative; overflow:hidden;
  transition:border-color .28s ease, box-shadow .28s ease;
}
/* Cursor spotlight (effects library #06). Coordinates come from site.js;
   with no pointer it simply never fades in, so touch devices lose nothing. */
.service-card::before {
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(232,131,42,.15),transparent 62%);
  transition:opacity .35s ease;
}
.service-card:hover { border-color:var(--navy); box-shadow:0 12px 34px rgba(13,34,64,.12); }
.service-card:hover::before { opacity:1; }
.service-card > * { position:relative; z-index:1; }
.service-card .s-icon {
  width:auto; height:auto; background:none; border-radius:0;
  display:flex; align-items:center; justify-content:flex-start;
  color:var(--orange); margin-bottom:10px;
}
.service-card .s-icon svg { width:38px; height:38px; stroke-width:1.5; }
.service-card h3 { font-size:19px; font-weight:700; color:var(--navy);
  border-bottom:1px solid #e6ebf2; padding-bottom:11px; margin-bottom:2px; }
.service-card p  { color:var(--text-mid); font-size:15px; line-height:1.65; flex:1; }
.service-card .card-link { color:var(--orange); font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; margin-top:8px; }
.service-card .card-link:hover { gap:10px; }
.service-grid-row-center {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
}
.service-grid-row-center > .service-card {
  flex: 0 0 calc((100% - 56px) / 3);
}

/* ─── TRUST BAR ─── */
.trust-bar { background:var(--orange); padding:18px 24px; box-shadow:0 2px 0 rgba(207,111,30,.35); }
.trust-bar-inner { max-width:var(--max); margin:0 auto; display:flex; justify-content:center; gap:48px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; font-size:14px; }

/* ─── HOW IT WORKS ─── */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; position:relative; }
.steps-grid::before {
  content:''; position:absolute; top:36px;
  left:calc(16.66% + 20px); right:calc(16.66% + 20px);
  height:2px; background:linear-gradient(90deg,var(--orange),var(--orange-dk));
}
.step { text-align:center; }
.step-num {
  display: block; margin: 0 auto 24px;
  position: relative; z-index: 1;
}
.step h3 { font-size:20px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.step p  { color:var(--text-mid); font-size:15px; line-height:1.65; }

/* ─── TESTIMONIALS ─── */
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.t-card {
  background:var(--white); border-radius:var(--r-md); padding:22px 24px;
  box-shadow:var(--shadow-sm); border:1px solid var(--gray-mid); position:relative;
}
.t-stars  { color:#f5c518; font-size:16px; margin-bottom:6px; }
.t-card p { color:var(--text-mid); font-size:14px; line-height:1.65; margin-bottom:12px; font-style:italic; }
.t-author { font-weight:700; color:var(--navy); font-size:14px; }

/* ─── CTA BANNER ─── */
.cta-banner { background:linear-gradient(135deg,var(--navy),var(--navy-mid)); padding:88px 24px; text-align:center; border-top:none; box-shadow:0 -1px 0 rgba(13,34,64,.12); }
.cta-banner h2 { font-size:clamp(24px,4vw,44px); font-weight:800; color:#fff; margin-bottom:16px; }
.cta-banner p  { font-size:18px; color:rgba(255,255,255,.72); margin-bottom:36px; max-width:500px; margin-left:auto; margin-right:auto; }
.btn-group { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ─── AREAS ─── */
.areas-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.area-chip {
  background:var(--gray-light); border:2px solid var(--gray-mid); border-radius:50px;
  padding:12px 20px; text-align:center; font-weight:600; font-size:14px; color:var(--navy); transition:var(--ease);
}
.area-chip:hover { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ─── CONTACT FORM ─── */
.contact-form { background:var(--white); border-radius:var(--r-md); padding:48px; box-shadow:var(--shadow-md); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.f-group { display:flex; flex-direction:column; gap:7px; }
.f-group.full { grid-column:1/-1; }
.f-group label { font-weight:600; font-size:14px; color:var(--navy); }
.f-group input,
.f-group textarea,
.f-group select {
  padding:13px 16px; border:2px solid var(--gray-mid); border-radius:var(--r-sm);
  font-size:15px; font-family:inherit; color:var(--text-dark);
  transition:var(--ease); background:var(--white); width:100%;
}
.f-group input:focus,
.f-group textarea:focus,
.f-group select:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,131,42,.12); }
.f-group textarea { resize:vertical; min-height:130px; }
.direct-contact-list { display:flex; flex-direction:column; gap:24px; }
.direct-contact-tile {
  display:flex; align-items:center; gap:16px; padding:24px;
  background:var(--gray-light); border-radius:var(--r-md); color:var(--navy);
  transition:var(--ease);
}
.direct-contact-tile-top { align-items:flex-start; }
.direct-contact-tile:hover,
.direct-contact-tile:focus-visible {
  background:var(--navy); color:#fff;
}
.direct-contact-tile:focus-visible {
  outline:3px solid rgba(232,131,42,.35); outline-offset:3px;
}
.direct-contact-icon {
  width:52px; height:52px; background:var(--orange); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff;
}
.direct-contact-label {
  font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-mid); margin-bottom:4px;
}
.direct-contact-main {
  font-size:17px; font-weight:700; color:var(--navy); overflow-wrap:anywhere;
}
.direct-contact-phone { font-size:22px; font-weight:800; }
.direct-contact-sub { font-size:15px; color:var(--text-mid); margin-top:4px; }
.direct-contact-link {
  font-size:13px; color:var(--orange); font-weight:600;
  display:inline-flex; align-items:center; gap:4px; margin-top:8px;
}
.direct-contact-tile:hover .direct-contact-label,
.direct-contact-tile:focus-visible .direct-contact-label,
.direct-contact-tile:hover .direct-contact-main,
.direct-contact-tile:focus-visible .direct-contact-main,
.direct-contact-tile:hover .direct-contact-sub,
.direct-contact-tile:focus-visible .direct-contact-sub,
.direct-contact-tile:hover .direct-contact-link,
.direct-contact-tile:focus-visible .direct-contact-link {
  color:#fff;
}

/* ─── INFO SPLIT ─── */
.info-split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.info-split.rev { direction:rtl; }
.info-split.rev > * { direction:ltr; }
.info-split img { width:100%; height:420px; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--shadow-lg); }
.info-content .check-list { list-style:none; display:flex; flex-direction:column; gap:12px; margin:22px 0 28px; }
.info-content .check-list li { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--text-mid); }
.info-content .check-list li::before {
  content:'✓'; width:22px; height:22px; background:var(--orange); color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex-shrink:0; margin-top:2px;
}

/* ─── PHOTO GALLERY ─── */
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.photo-grid img { width:100%; height:230px; object-fit:cover; border-radius:var(--r-sm); transition:var(--ease); }
.photo-grid img:hover { transform:scale(1.03); box-shadow:var(--shadow-md); }

/* ─── FOOTER ─── */
.footer { background:var(--navy); color:rgba(255,255,255,.7); padding:44px 24px 20px; }
.footer-grid { max-width:var(--max); margin:0 auto 28px; display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:32px; }
.footer-brand img { height:44px; margin-bottom:18px; }
.footer-brand p { font-size:14px; line-height:1.75; }
.footer h4 { color:#fff; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px; }
.footer ul { list-style:none; display:flex; flex-direction:column; gap:6px; }
.footer ul li a { color:rgba(255,255,255,.6); font-size:14px; }
.footer ul li a:hover { color:var(--orange); }
.footer-contact p { font-size:14px; margin-bottom:6px; display:flex; align-items:flex-start; gap:9px; }
.footer-contact a { color:rgba(255,255,255,.6); }
.footer-contact a:hover { color:var(--orange); }
.footer-bottom {
  max-width:var(--max); margin:0 auto; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:rgba(255,255,255,.35); flex-wrap:wrap; gap:10px;
}

/* ─── STICK FIGURE WALKER ─── */
#walker-wrapper {
  position:fixed;
  top:var(--walker-y, 68vh);
  left:calc(100vw - 118px);
  z-index:998;
  width:88px;
  height:110px;
  pointer-events:none;
}
#walker-svg {
  width:88px;
  height:110px;
  overflow:visible;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));
}
.walker-arm-hold { transform-box:view-box; animation:carry-bob .72s ease-in-out infinite; }
.wlg-l,
.wlg-r { vector-effect:non-scaling-stroke; }
@keyframes carry-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }

/* ── Mobile floating action bar ── */
#mob-float-bar {
  display:none;
  position:fixed;
  bottom:22px;
  right:14px;
  z-index:997;
  flex-direction:column;
  gap:7px;
  align-items:flex-end;
}
.mob-fab {
  display:flex;
  align-items:center;
  gap:5px;
  padding:7px 12px 7px 10px;
  border-radius:50px;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 3px 14px rgba(0,0,0,.32);
  transition:transform .15s ease;
}
.mob-fab:active { transform:scale(.95); }
.mob-fab-call { background:var(--orange); color:#fff; }
.mob-fab-quote { background:var(--navy); color:#fff; border:1.5px solid rgba(255,255,255,.18); }
.mob-fab-review { background:var(--navy); color:rgba(255,255,255,.9); border:1.5px solid rgba(255,255,255,.18); }
.mfr-stars { color:#fbbc04; font-size:10px; letter-spacing:.5px; line-height:1; }
.mfr-g { font-weight:900; color:#4285f4; font-size:11px; }
.mfr-rating { font-size:11px; color:rgba(255,255,255,.9); font-weight:700; display:flex; align-items:center; gap:3px; line-height:1; }

/* ─── ICONS ─── */
.s-icon { color: #fff; font-size: 0; }
.s-icon svg { width: 28px; height: 28px; stroke-width: 1.75; }
.nav-icon { width: 15px; height: 15px; vertical-align: middle; display: inline-block; flex-shrink: 0; stroke-width: 1.75; }
.btn-icon { width: 18px; height: 18px; vertical-align: middle; display: inline-block; flex-shrink: 0; stroke-width: 1.75; }
.footer-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; stroke-width: 1.75; }
.trust-icon { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }
.contact-circle-icon { width: 26px; height: 26px; stroke-width: 1.75; }

/* ─── GOOGLE REVIEWS BADGE ─── */
.nav-review {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 12px; border-radius: 50px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  box-shadow: none;
  text-decoration: none; gap: 1px; transition: var(--ease);
  white-space: nowrap;
}
.nav-review:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-1px);
}
.nav-review-stars { color: #fbbc04; font-size: 11px; letter-spacing: 1px; display: block; text-align: center; line-height: 1; }
.nav-review-rating { font-size: 11px; color: rgba(255,255,255,.9); font-weight: 700; display: flex; align-items: center; gap: 4px; line-height: 1; }
.nav-review-g { font-weight: 900; color: #4285f4; }
.mob-review {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px; font-size: 14px; font-weight: 600;
  color: var(--navy); background: #fff; border-radius: 10px;
  margin: 8px 0; border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 0 0 1.5px rgba(251,188,4,.4);
}
.mob-review span:first-child { color: #fbbc04; font-size: 16px; letter-spacing: 1px; }
.mob-review span:last-child { font-size: 13px; color: var(--navy); }
.footer-contact .nav-review { margin-left: 0; margin-top: 16px; display: inline-flex; }

/* ─── UTILS ─── */
.bg-light { background:var(--gray-light); }
.bg-navy  { background:var(--navy); }
.tc { text-align:center; }
.page-body { padding-top:72px; }
.mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px} .mt32{margin-top:32px} .mt48{margin-top:48px}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .service-grid-row-center > .service-card { flex: 0 0 calc(50% - 14px); }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:36px; }
  .areas-grid   { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px){
  .nav-menu { display:none; }
  .nav-hamburger { display:flex; position:absolute; right:16px; top:50%; transform:translateY(-50%); }
  .nav-info { display:none; }
  .nav-inner { position:relative; justify-content:center; }
  .nav-logo { max-width:160px !important; opacity:1 !important; pointer-events:auto !important; margin-right:0 !important; }
  
  #home-hero { background-position:20% 40% !important; }
  .service-grid { grid-template-columns:1fr; }
  .service-grid-row-center { flex-direction: column; } .service-grid-row-center > .service-card { flex: 0 0 100%; }
  .steps-grid { grid-template-columns:1fr; gap:32px; }
  .steps-grid::before { display:none; }
  .testimonials-grid { grid-template-columns:1fr; }
  .info-split { grid-template-columns:1fr; gap:32px; }
  .info-split.rev { direction:ltr; }
  .form-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .areas-grid  { grid-template-columns:repeat(2,1fr); }
  .contact-form { padding:28px 20px; }
  .photo-grid { grid-template-columns:repeat(2,1fr); }
  #walker-wrapper { width:62px; height:78px; }
  #walker-svg { width:62px; height:78px; }
  .page-body { padding-top:52px; }
  #mob-float-bar { display:flex; }
  .contact-info-block { display:none; }
  #home-hero { padding-top:72px !important; padding-bottom:56px !important; }
  .page-hero { padding-top:88px; padding-bottom:52px; }
  .footer-contact { display:flex; flex-wrap:wrap; }
  .footer-contact h4 { flex:0 0 100%; }
  .footer-contact > p { flex:0 0 100%; margin-bottom:0; }
  .footer-contact .btn-primary { margin-top:16px; }
  .footer-contact .nav-review { margin-top:16px !important; margin-left:12px !important; align-self:center; }
}
@media(max-width:480px){
  .section { padding:60px 16px; }
  .areas-grid { grid-template-columns:repeat(2,1fr); }
  .trust-bar-inner { gap:20px; }
  .btn-group { flex-direction:column; align-items:center; }
}

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--gray-mid); }
.faq-item { border-bottom:1px solid var(--gray-mid); }
.faq-item summary {
  cursor:pointer; padding:20px 8px; font-size:16px; font-weight:600;
  color:var(--navy); list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+'; font-size:22px; font-weight:400; color:var(--orange);
  flex-shrink:0; line-height:1; transition:transform .2s;
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p {
  padding:0 8px 20px; color:var(--text-mid); font-size:15px; line-height:1.75; margin:0;
}

/* ── Nav Contact CTA ── */
@keyframes cta-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(232,131,42,.55), 0 4px 18px rgba(232,131,42,.35); }
  50%      { box-shadow:0 0 0 6px rgba(232,131,42,0),  0 4px 18px rgba(232,131,42,.35); }
}
.nav-contact-cta {
  display:inline-flex; align-items:center;
  background:linear-gradient(135deg,#e8832a 0%,#f5a623 100%);
  border:none; color:#fff !important; border-radius:50px;
  padding:10px 24px; font-weight:800; font-size:13.5px;
  letter-spacing:.4px; white-space:nowrap;
  box-shadow:0 0 0 0 rgba(232,131,42,.55), 0 4px 18px rgba(232,131,42,.35);
  animation:cta-pulse 2.4s ease-in-out infinite;
  transition:transform .18s, filter .18s;
}
.nav-contact-cta:hover {
  color:#fff !important; filter:brightness(1.1);
  transform:translateY(-2px); animation:none;
  box-shadow:0 6px 24px rgba(232,131,42,.55);
}

/* ── Footer Quote Button — matches nav CTA style ── */
.footer-contact .btn-primary {
  background: linear-gradient(135deg, #e8832a 0%, #f5a623 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 11px 26px !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 18px rgba(232,131,42,.4) !important;
  animation: cta-pulse 2.4s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  transition: filter .18s, transform .18s !important;
}
.footer-contact .btn-primary:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(232,131,42,.55) !important;
  animation: none !important;
}

/* ── Body Quote CTA button (matches nav Get a Quote style, larger) ── */
.btn-quote-cta {
  display:inline-flex; align-items:center;
  background:linear-gradient(135deg,#e8832a 0%,#f5a623 100%);
  color:#fff !important; border:none; border-radius:50px;
  padding:16px 40px; font-weight:800; font-size:16px;
  letter-spacing:.4px; white-space:nowrap; text-decoration:none;
  box-shadow:0 0 0 0 rgba(232,131,42,.55), 0 6px 24px rgba(232,131,42,.35);
  animation:cta-pulse 2.4s ease-in-out infinite;
  transition:transform .18s, filter .18s;
}
.btn-quote-cta:hover {
  filter:brightness(1.1); transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(232,131,42,.55); animation:none;
  color:#fff !important;
}

/* ═══════════════════════════════════════════════════════════
   GOOGLE REVIEW TILES + HORIZONTAL SNAP SHOWCASE
   Effects library #75 (Google-style review cards)
   and #14 (horizontal snap showcase), combined.
   ═══════════════════════════════════════════════════════════ */

.grev-shell { position:relative; display:flex; align-items:center; gap:10px; }

.grev-row {
  display:flex; gap:20px; flex:1;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 4px 22px;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}
.grev-row::-webkit-scrollbar { display:none; }

.grev {
  flex:0 0 clamp(268px, 30%, 360px);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #e4e9f0;
  border-radius:var(--r-md); padding:22px 22px 24px;
  box-shadow:0 1px 3px rgba(13,34,64,.05);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.grev:hover {
  transform:translateY(-3px);
  border-color:#d3dbe6;
  box-shadow:0 10px 26px rgba(13,34,64,.10);
}

.grev-head { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.grev-av {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:17px; line-height:1;
}
.grev-name { font-weight:700; color:var(--navy); font-size:15px; line-height:1.3; }
.grev-src  { display:block; color:#7b8798; font-size:12px; margin-top:1px; }
.grev-g { margin-left:auto; flex-shrink:0; display:block; }

.grev-stars { color:#FBBC04; letter-spacing:2.5px; font-size:15px; margin-bottom:10px; }

.grev p {
  margin:0; color:var(--text-mid); font-size:15px; line-height:1.65;
}

.grev-arrow {
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  border:1px solid #dbe2ea; background:#fff; color:var(--navy);
  font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.grev-arrow:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.grev-arrow:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

.grev-dots { display:flex; justify-content:center; gap:8px; margin-top:4px; }
.grev-dot {
  width:8px; height:8px; padding:0; border-radius:50%;
  border:none; background:#cfd8e3; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.grev-dot[aria-current="true"] { background:var(--orange); transform:scale(1.35); }
.grev-dot:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

@media (max-width:860px) {
  .grev-arrow { display:none; }
  .grev-shell { gap:0; }
  .grev-row {
    gap:12px;
    padding:6px 0 20px;
    /* The edge fade reads as a clipped card on a narrow screen, so drop it here. */
    -webkit-mask:none; mask:none;
    scroll-snap-stop:always;      /* one card per swipe, never skip past two */
  }
  /* One whole card, plus a deliberate 22px sliver of the next so it reads as swipeable. */
  .grev { flex:0 0 calc(100% - 34px); }
}

@media (prefers-reduced-motion:reduce) {
  .grev-row { scroll-behavior:auto; }
  .grev { transition:none; }
  .grev:hover { transform:none; }
}

/* ─── MOBILE DRAWER: collapsible Services group ───
   Mirrors the desktop dropdown so the drawer is 7 rows instead of 16.
   Built on <details>, so it works with no JavaScript at all. */
.mob-group { border-bottom:1px solid rgba(255,255,255,.07); }
/* Safari renders a <summary> unreliably when its display is changed to flex:
   the label can disappear entirely while the row keeps its height. Keep the
   summary as a plain block and place the chevron absolutely instead. */
.mob-group > summary {
  display:block; position:relative; cursor:pointer;
  list-style:none;
  color:rgba(255,255,255,.8);
  padding:13px 44px 13px 24px; font-size:15px; font-weight:500; line-height:1.4;
  transition:color .15s ease;
}
.mob-group > summary::-webkit-details-marker { display:none; }
.mob-group > summary::marker { content:""; }
.mob-group > summary::after {
  content:""; position:absolute; right:25px; top:50%;
  width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .22s ease;
}
.mob-group[open] > summary::after { transform:translateY(-30%) rotate(-135deg); }
.mob-group > summary:hover,
.mob-group[open] > summary { color:var(--orange); }
.mob-sub { background:rgba(0,0,0,.18); }
.nav-mobile .mob-sub a {
  padding-left:40px; font-size:14.5px; color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav-mobile .mob-sub a:last-child { border-bottom:none; }

/* ═══════════════════════════════════════════════════════════
   MOBILE DENSITY PASS
   Phones only. Desktop layout is untouched by everything below.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* ── Services: 8 stacked cards was 3.7 screens of scrolling.
        Two per row, icon + name, whole tile tappable. ── */
  .service-grid { grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .service-grid-row-center { flex-direction:row !important; flex-wrap:wrap; gap:12px; margin-top:12px; }
  .service-grid-row-center > .service-card { flex:0 0 calc(50% - 6px) !important; }

  .service-card { padding:18px 14px; gap:8px; }
  .service-card .s-icon { margin-bottom:4px; }
  .service-card .s-icon svg { width:30px; height:30px; }
  .service-card h3 { font-size:15.5px; line-height:1.3; border-bottom:none; padding-bottom:0; margin-bottom:0; }
  .service-card p { display:none; }              /* the detail lives on the service page */
  .service-card .card-link { font-size:13px; margin-top:2px; }
  .service-card .card-link svg { width:14px; height:14px; }
  /* make the entire tile the tap target without touching the markup */
  .service-card .card-link::after { content:""; position:absolute; inset:0; z-index:2; }

  /* ── Photo gallery: swipe instead of a 718px stack ── */
  .photo-grid {
    display:flex !important; grid-template-columns:none !important;
    gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-snap-stop:always;
    padding-bottom:14px; margin-bottom:-8px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .photo-grid::-webkit-scrollbar { display:none; }
  .photo-grid img {
    flex:0 0 calc(100% - 34px);   /* one photo + a sliver of the next */
    height:250px; scroll-snap-align:start;
  }
  .photo-grid img:hover { transform:none; box-shadow:none; }

  /* ── Footer: was 1184px, over 1.5 screens of stacked links. ── */
  .footer { padding:26px 20px 14px; }
  .footer-grid { grid-template-columns:1fr; gap:18px; margin-bottom:16px; }
  .footer-brand img { height:34px; margin-bottom:10px; }
  .footer-brand p { font-size:13px; line-height:1.55; }
  .footer h4 { margin-bottom:8px; font-size:11.5px; }
  /* Services and Areas Served run two-up instead of one long column */
  .footer-grid > div:nth-child(2) ul,
  .footer-grid > div:nth-child(3) ul {
    display:grid; grid-template-columns:1fr 1fr; gap:5px 14px;
  }
  .footer ul { gap:5px; }
  .footer ul li a { font-size:13px; line-height:1.35; }
  .footer-contact p { margin-bottom:3px; font-size:13px; }
  .footer-contact .nav-review { margin-top:10px; }
  .footer-bottom { padding-top:10px; font-size:11.5px; gap:4px; }
}

/* ─── VALUE CARDS ───
   Same .service-card look, but these are three claims about the business,
   not links into service pages. Their whole point is the sentence inside,
   so they must never get the compact treatment the service tiles get.
   Three across, then straight to one on phones, so a row of three never
   leaves a single orphaned tile stranded on its own line. */
@media (max-width:1024px) {
  .value-grid { grid-template-columns:repeat(3,1fr) !important; gap:18px; }
}
@media (max-width:768px) {
  .value-grid { grid-template-columns:1fr !important; gap:14px; }
  .value-grid .service-card { padding:22px 20px; gap:10px; }
  .value-grid .service-card p { display:block; font-size:14.5px; line-height:1.6; }
  .value-grid .service-card h3 {
    font-size:17px; border-bottom:1px solid #e6ebf2; padding-bottom:11px; margin-bottom:2px;
  }
  .value-grid .service-card .s-icon svg { width:34px; height:34px; }
}
