/*
Theme Name: Fix N Repair
Theme URI: https://fixnrepair.org/
Author: Fix N Repair
Author URI: https://fixnrepair.org/
Description: Custom WordPress theme for Fix 'N Repair — Massachusetts device repair business with 4 store locations plus mobile service. Includes a customizable top ticker banner, sticky white-pill header with mega-menus, "We Come To You" featured nav item, mobile drawer, and elaborate footer (map locator, CTA band, trust strip, 4-column footer, 43-city areas band). All key text, URLs, phone numbers, social links, ticker content, and footer copy editable via Appearance → Customize. The homepage hero section is intentionally NOT included — build it with Elementor / block editor on the page set as your front page.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: fnr-theme
Tags: custom-logo, custom-menu, featured-images, translation-ready, responsive-layout
*/

/* ════════════════════════════════════════════════════════════════════
   1. RESET + TOKENS
   ════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#2d3180; --navy-d:#1e2260; --navy-deep:#0e0f38;
  --red:#e8312a; --red-h:#f04038;
  --white:#ffffff; --surface:#f4f5fb; --surface-h:#eaecf8;
  --border:rgba(45,49,128,.10);
  --muted:#5e668a;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;
  --heading-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--font);margin:0;background:#fff;color:#11131a;overflow-x:hidden;max-width:100%;}
img{max-width:100%;height:auto;}
a{color:inherit;}

/* Safety net for every fnr_icon() SVG (see functions.php) — these are
   generated with a viewBox but no width/height, sized entirely by CSS
   from whichever context uses them. This default (1em, so it scales
   with the surrounding text) makes sure that if a future icon usage
   forgets to add its own explicit sizing rule, it still renders at a
   sane size instead of the browser's oversized default for an
   unconstrained SVG. More specific rules elsewhere (.dico svg,
   .hdr-mbar-col svg, etc.) still win over this due to higher CSS
   specificity, so this only fills in where nothing else applies. */
.fnr-icon{width:1em;height:1em;flex-shrink:0;vertical-align:-0.125em;}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;}
.screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:#161850;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000;}

/* ════════════════════════════════════════════════════════════════════
   2. TICKER BAR (top promotional band)
   ════════════════════════════════════════════════════════════════════ */
.tk-bar{
  background:linear-gradient(95deg,var(--navy-deep) 0%,#252a8c 50%,var(--navy-d) 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  height:42px;display:flex;align-items:center;overflow:hidden;
  position:fixed;top:0;left:0;right:0;z-index:201;
  transition:transform .35s var(--ease);
}
.tk-bar.hide{transform:translateY(-100%);}
.tk-track{display:flex;align-items:center;white-space:nowrap;animation:ticker 80s linear infinite;will-change:transform;}
.tk-track:hover{animation-play-state:paused;}
@keyframes ticker{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.tk-item{display:inline-flex;align-items:center;gap:9px;padding:0 32px;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);flex-shrink:0;letter-spacing:.01em;}
.tk-item strong{color:#fff;font-weight:700;}
.tk-icon{font-size:15px;line-height:1;flex-shrink:0;}
.tk-sep{display:inline-flex;align-items:center;justify-content:center;width:20px;flex-shrink:0;}
.tk-sep::after{content:'';display:block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25);}
.tk-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);cursor:pointer;color:rgba(255,255,255,.5);font-size:12px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:2;}
.tk-close:hover{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.4);}

/* When ticker is disabled via customizer, push header to top */
body.no-ticker .site-header{top:0;margin-top:0;}

/* ════════════════════════════════════════════════════════════════════
   3. SITE HEADER  (Logo + nav ALWAYS in a white pill so logo stays
                    visible on every page background. Pill becomes
                    more prominent — heavier shadow, full opacity —
                    once the user scrolls past 60px.)
   ════════════════════════════════════════════════════════════════════ */
.site-header{position:fixed;top:42px;left:0;right:0;z-index:200;background:transparent;border-bottom:1px solid transparent;transition:top .35s var(--ease),padding .35s var(--ease),margin-top .35s,background .35s;padding:0;margin-top:8px;}
.site-header.top-gone{top:0;margin-top:0;}
.site-header.solid{background:rgba(14,15,56,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.hdr-inner{max-width:1460px;margin:0 auto;padding:0 28px;height:76px;display:flex;align-items:center;transition:padding .35s,height .35s;}
.site-header.solid .hdr-inner{padding:0;height:66px;}

/* ── THE WHITE PILL (logo + nav) — visible at ALL scroll positions ── */
.hdr-col{
  display:flex;align-items:center;width:100%;height:100%;position:relative;
  background:rgba(255,255,255,.96);
  border-radius:14px;
  border:1.5px solid rgba(45,49,128,.08);
  box-shadow:0 4px 16px rgba(45,49,128,.06), 0 12px 32px rgba(14,15,56,.08);
  padding:0 22px;
  transition:background .35s,border-color .35s,box-shadow .35s,padding .35s;
}
.site-header.solid .hdr-col{
  background:#fff;
  border-color:rgba(45,49,128,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 16px rgba(45,49,128,.10),0 16px 48px rgba(45,49,128,.10);
  padding:0 24px;
}

/* ── LOGO (always natural colors, never inverted) ── */
.hdr-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none;margin-right:18px;padding-right:18px;position:relative;}
.hdr-logo::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  height:26px;width:1.5px;
  background:linear-gradient(to bottom,transparent,var(--red) 40%,var(--red) 60%,transparent);
  border-radius:2px;opacity:.7;
}
.hdr-logo img,.hdr-logo .custom-logo,.hdr-logo .custom-logo-link img{
  height:42px;width:auto;max-height:42px;
  filter:none;  /* never invert — logo always shows naturally on the white pill */
  opacity:1;
  transition:transform .25s;
}
.hdr-logo:hover img,.hdr-logo:hover .custom-logo{transform:scale(1.03);}
.hdr-logo .custom-logo-link{display:flex;align-items:center;}

/* ── NAV ── */
.hdr-nav{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.nav-item{position:relative;}
.nav-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 15px;
  font-size:14px;font-weight:600;
  color:var(--navy-d);  /* ← dark navy at ALL scroll positions */
  text-decoration:none;border-radius:8px;
  transition:background .18s,color .18s;
  white-space:nowrap;cursor:pointer;
  background:none;border:none;font-family:var(--font);letter-spacing:-.01em;
}
.nav-link:hover,.nav-item:hover>.nav-link{background:var(--surface-h);color:var(--navy);}
.nav-link svg.chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.45;transition:transform .22s var(--ease),opacity .18s;}
.nav-item:hover>.nav-link svg.chev{transform:rotate(180deg);opacity:1;}

/* "We Come To You" — featured red-tinted nav item */
.nav-link-wctyou{background:rgba(232,49,42,.10);color:var(--red);font-weight:700;}
.nav-link-wctyou:hover{background:rgba(232,49,42,.18);color:var(--red-h);}

/* ── DROPDOWNS ── */
.nav-drop{position:absolute;top:calc(100% + 12px);left:0;background:#fff;border:1px solid rgba(45,49,128,.09);border-radius:16px;box-shadow:0 4px 6px rgba(45,49,128,.04),0 12px 32px rgba(45,49,128,.10),0 32px 64px rgba(45,49,128,.08);padding:8px;min-width:210px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top center;transition:opacity .22s var(--ease),visibility .22s,transform .22s var(--ease);z-index:50;}
.nav-item:hover>.nav-drop,.nav-item:focus-within>.nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);}
.nav-drop-wide{min-width:480px;display:grid;grid-template-columns:1fr 1fr;gap:0 4px;}
.nav-drop-services{min-width:680px;grid-template-columns:1fr 1fr 1fr;}
.nav-drop-mega{min-width:580px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 4px;left:-40px;}
.drop-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--navy-d);text-decoration:none;transition:background .14s,color .14s;}
.drop-link:hover{background:var(--surface-h);color:var(--red);}
.drop-link:hover .dico{background:rgba(232,49,42,.09);}
.dico{width:32px;height:32px;border-radius:9px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .14s;}
.dico svg{width:16px;height:16px;stroke:var(--red);flex-shrink:0;}
.drop-sec{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);padding:10px 10px 4px;opacity:.7;}
.drop-divider{height:1px;background:var(--border);margin:5px 4px;}
.drop-store{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--navy-d);transition:background .14s;}
.drop-store:hover{background:var(--surface-h);}
.store-dot{width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:5px;flex-shrink:0;box-shadow:0 0 0 3px rgba(232,49,42,.15);}
.store-name{font-size:13.5px;font-weight:700;color:var(--navy-d);}
.store-addr{font-size:11.5px;color:var(--muted);margin-top:2px;}
.area-link{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--navy-d);text-decoration:none;transition:background .14s,color .14s;white-space:nowrap;}
.area-link:hover{background:var(--surface-h);color:var(--red);}
.area-dot{width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0;opacity:.6;}
.mega-footer{grid-column:1/-1;border-top:1px solid var(--border);margin-top:6px;padding-top:8px;}
.mega-footer a{font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;padding:5px 10px;border-radius:7px;display:inline-flex;align-items:center;gap:5px;transition:background .14s,color .14s;}
.mega-footer a:hover{background:rgba(232,49,42,.07);color:var(--red);}

/* ── HEADER CTAS (phone + Book button + hamburger) ── */
.hdr-ctas{display:flex;align-items:center;gap:12px;margin-left:18px;flex-shrink:0;position:relative;z-index:10;}
.hdr-tel{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--navy-d);text-decoration:none;padding:8px 13px;border-radius:8px;transition:color .18s,background .18s;}
.hdr-tel:hover{color:var(--navy);background:var(--surface-h);}
.hdr-tel svg{stroke:var(--red);fill:none;flex-shrink:0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hdr-book{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;background:linear-gradient(135deg,var(--red) 0%,#c9271f 100%);color:#fff;font-family:var(--font);font-size:13.5px;font-weight:800;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:filter .2s,transform .18s,box-shadow .2s;box-shadow:0 3px 12px rgba(232,49,42,.35),0 1px 3px rgba(232,49,42,.2);letter-spacing:-.01em;white-space:nowrap;position:relative;overflow:hidden;}
.hdr-book::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,transparent 55%);}
.hdr-book:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,49,42,.45);}
/* ── MOBILE UTILITY BAR (Call + Directions) ── Matches latest
   reference: icons sit in circular outline badges, text emphasis is
   swapped from the previous version (small/light label on top — "Call
   Now" / "Get Directions" — with the actual info bold and larger below
   it — the phone number / "Find your nearest store"), a thin gap
   separates the two colored halves instead of them touching, and the
   bar has rounded bottom corners (flush square top, attaching directly
   to the header above it) rather than being fully edge-to-edge sharp.
   Hidden on desktop by default — desktop already has .hdr-tel and the
   full "Our Stores" mega-menu. Positioned relative so the directions
   dropdown below can span the bar's full width. */
.hdr-mobile-bar{
  display:none;position:relative;
  gap:3px;
}

.hdr-mbar-col{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:64px;
  padding:12px 16px;border:none;
  text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:filter .15s;
}
.hdr-mbar-col:hover{filter:brightness(1.08);}

.hdr-mbar-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
}
.hdr-mbar-icon svg{width:16px;height:16px;stroke:#fff;}

.hdr-mbar-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3;}
.hdr-mbar-title{font-family:var(--font);font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);}
.hdr-mbar-sub{font-family:var(--font);font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em;}

.hdr-mbar-call{background:var(--red);border-radius:0 0 0 16px;}
.hdr-mbar-directions{background:var(--navy-deep);border-radius:0 0 16px 0;}

/* Sliding-down panel — same open/close visual language as .nav-drop,
   matching the "Find a Location" pattern already used in the homepage
   hero section. Now spans the full bar width instead of one column. */
.hdr-directions-menu{
  position:absolute;top:100%;left:0;right:0;
  background:#fff;
  border-top:1px solid rgba(45,49,128,.09);
  box-shadow:0 12px 32px rgba(45,49,128,.14),0 32px 64px rgba(45,49,128,.10);
  padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);transform-origin:top center;
  transition:opacity .22s var(--ease),visibility .22s,transform .22s var(--ease);
  z-index:206;
}
.hdr-directions-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.hdr-directions-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);padding:8px 10px 6px;opacity:.75;}
.hdr-directions-item{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:10px;text-decoration:none;color:var(--navy-d);transition:background .14s;}
.hdr-directions-item:hover{background:var(--surface-h);}
.hdr-directions-item svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;stroke:var(--red);}
.hdr-directions-name{display:block;font-size:13.5px;font-weight:700;color:var(--navy-d);}
.hdr-directions-addr{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;}

.hdr-ham-wrap{display:none;flex-direction:column;align-items:center;gap:2px;margin-left:4px;}
.hdr-ham{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;
  cursor:pointer;border:1.5px solid var(--border);background:#fff;border-radius:50%;
  position:relative;z-index:10;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  box-shadow:0 2px 6px rgba(45,49,128,.08);
}
.hdr-ham:hover{border-color:var(--navy);}
.hdr-ham span{display:block;width:16px;height:2px;background:var(--navy);border-radius:2px;transition:all .26s var(--ease);transform-origin:center;}
.hdr-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hdr-ham.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hdr-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.hdr-ham-label{font-family:var(--font);font-size:10.5px;font-weight:700;color:var(--navy-d);}

/* ════════════════════════════════════════════════════════════════════
   4. MOBILE DRAWER
   ════════════════════════════════════════════════════════════════════ */
.mob-overlay{position:fixed;inset:0;z-index:204;background:rgba(14,15,56,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
.mob-overlay.open{opacity:1;visibility:visible;}
.mob-drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,90vw);background:#fff;z-index:205;transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto;box-shadow:-8px 0 40px rgba(14,15,56,.18);}
.mob-drawer.open{transform:translateX(0);}
.mob-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:210;min-height:68px;}
.mob-head img{height:36px;}
.mob-x{width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--navy);transition:background .15s,color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.mob-x:hover{background:rgba(232,49,42,.08);color:var(--red);border-color:rgba(232,49,42,.2);}
.mob-body{padding:14px 12px 48px;}
.mob-ctas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.mob-ctas .hdr-book{border-radius:10px;justify-content:center;padding:14px;font-size:14px;}
.mob-tel{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;border-radius:10px;border:1.5px solid var(--border);font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;transition:background .14s,border-color .14s;}
.mob-tel:hover{background:var(--surface-h);border-color:rgba(45,49,128,.2);}
.mob-tel svg{stroke:var(--red);flex-shrink:0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mob-sec{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);padding:20px 10px 6px;opacity:.8;}
.mob-sep{height:1px;background:var(--border);margin:8px 2px;}
.mob-link{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:10px;font-size:15px;font-weight:600;color:var(--navy-d);text-decoration:none;transition:background .14s;min-height:50px;}
.mob-link:hover{background:var(--surface-h);}
.mob-link-wctyou{background:rgba(232,49,42,.08);color:var(--red);}
.mob-link .ico{width:36px;height:36px;border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mob-link .ico svg{width:18px;height:18px;stroke:var(--red);flex-shrink:0;}

/* ════════════════════════════════════════════════════════════════════
   5. SITE CONTENT WRAPPER
   ════════════════════════════════════════════════════════════════════ */
.site-content{min-height:50vh;}
/* Non-hero pages get top padding to clear the fixed header.
   Front-page (.has-hero) skips it so an Elementor-built hero
   can extend behind the fixed header. */
body:not(.has-hero) .site-content{padding-top:128px;}
body.no-ticker:not(.has-hero) .site-content{padding-top:90px;}

/* Front page (.has-hero) previously had ZERO top padding at all — the
   comment above described this as intentional so an Elementor-built
   hero could visually extend behind the transparent fixed header, but
   in practice that meant nothing guaranteed clearance: if the hero's
   own first element (badge, H1, etc.) didn't have enough internal
   top padding of its own, the fixed ticker+header stack (~126px tall
   with the ticker visible, ~76px without) would sit directly on top
   of it with no buffer. Added a small guaranteed clearance here so
   the header never crowds the first element, regardless of which
   hero section ends up on the front page. If your actual hero section
   already has significant top padding baked in (several of the
   sections built this way in this project use 64–88px), you may want
   to trim that section's own top padding down to something small
   (16–24px) now that this exists, so the two paddings don't stack
   into an oversized gap. */
body.has-hero .site-content{padding-top:132px;}
body.has-hero.no-ticker .site-content{padding-top:90px;}

/* ════════════════════════════════════════════════════════════════════
   8. MAP / STORE LOCATOR
   ════════════════════════════════════════════════════════════════════ */
.map-section{position:relative;background:var(--navy-deep);}
.map-header{text-align:center;padding:64px 40px 36px;background:var(--navy-deep);position:relative;}
.map-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(45,49,128,.4) 0%, transparent 70%);pointer-events:none;}
.map-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:14px;position:relative;}
.map-eyebrow::before,.map-eyebrow::after{content:'';display:block;width:24px;height:1.5px;background:currentColor;opacity:.5;}
.map-h2{font-family:var(--heading-font);font-size:clamp(30px,4.5vw,52px);font-weight:800;letter-spacing:-0.05em;line-height:1.03;color:var(--white);margin-bottom:12px;position:relative;}
.map-h2 em{font-style:normal;color:var(--red);}
.map-sub{font-size:16px;font-weight:500;color:rgba(255,255,255,.58);max-width:500px;margin:0 auto;line-height:1.75;position:relative;}
.map-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:24px 40px 0;position:relative;}
.map-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:100px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.78);text-decoration:none;transition:background .18s,color .18s,border-color .18s;}
.map-chip:hover{background:rgba(255,255,255,.14);color:#fff;}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0;box-shadow:0 0 0 2px rgba(232,49,42,.25);}
.map-frame-wrap{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);margin-top:28px;}
.map-frame-wrap iframe{display:block;width:100%;height:700px;border:0;}

/* ════════════════════════════════════════════════════════════════════
   9. CTA BAND
   ════════════════════════════════════════════════════════════════════ */
.footer-cta-band{background:var(--navy-d);border-top:1px solid rgba(255,255,255,.06);padding:48px;text-align:center;position:relative;overflow:hidden;}
.cta-band-h{font-family:var(--heading-font);font-size:clamp(26px,3.5vw,44px);font-weight:800;letter-spacing:-0.05em;line-height:1.04;color:#fff;margin-bottom:10px;position:relative;}
.cta-band-p{font-size:16px;color:rgba(255,255,255,.58);margin-bottom:32px;position:relative;}
.cta-band-btns{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;position:relative;}
.cta-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:linear-gradient(135deg,var(--red) 0%,#c9271f 100%);color:#fff;font-family:var(--font);font-size:15px;font-weight:800;border-radius:100px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(232,49,42,.45);transition:filter .2s,transform .18s;letter-spacing:-.01em;}
.cta-primary:hover{filter:brightness(1.1);transform:translateY(-2px);}
.cta-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);font-family:var(--font);font-size:14px;font-weight:600;border-radius:100px;text-decoration:none;transition:background .18s,color .18s;backdrop-filter:blur(4px);}
.cta-secondary:hover{background:rgba(255,255,255,.15);color:#fff;}

/* ════════════════════════════════════════════════════════════════════
   10. TRUST STRIP
   ════════════════════════════════════════════════════════════════════ */
.footer-trust{background:rgba(18,19,52,.95);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);}
.footer-trust-inner{max-width:1280px;margin:0 auto;padding:24px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.ft-trust-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:rgba(255,255,255,.62);}
.ft-trust-item strong{color:rgba(255,255,255,.85);}
.ft-trust-item svg{stroke:var(--red);fill:none;flex-shrink:0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px;}
.ft-trust-sep{width:1px;height:20px;background:rgba(255,255,255,.08);}

/* ════════════════════════════════════════════════════════════════════
   11. MAIN FOOTER
   ════════════════════════════════════════════════════════════════════ */
.site-footer{background:var(--navy-deep);color:var(--white);border-top:1px solid rgba(255,255,255,.06);}
.footer-top{max-width:1280px;margin:0 auto;padding:64px 48px 56px;display:grid;grid-template-columns:260px 1fr 1fr 1fr;gap:40px;align-items:start;}
.ft-brand{align-self:start;}
.ft-logo{display:flex;align-items:center;text-decoration:none;margin-bottom:22px;}
.ft-logo img{height:36px;width:auto;filter:brightness(0) invert(1);opacity:.92;}
.ft-desc{font-size:14.5px;font-weight:500;line-height:1.8;color:rgba(255,255,255,.55);max-width:290px;margin-bottom:26px;}
.ft-contacts{display:flex;flex-direction:column;gap:10px;}
.ft-contact{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:rgba(255,255,255,.75);text-decoration:none;transition:color .18s;}
.ft-contact:hover{color:#fff;}
.ft-contact svg{stroke:var(--red);fill:none;flex-shrink:0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ft-social{display:flex;align-items:center;gap:8px;margin-top:24px;}
.ft-social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .18s,border-color .18s;font-size:16px;}
.ft-social a:hover{background:rgba(232,49,42,.2);border-color:rgba(232,49,42,.4);}
.ft-col{align-self:start;}
.ft-col h4{font-family:var(--heading-font);font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:18px;text-align:left;}
.ft-col ul{list-style:none;}
.ft-col ul li{margin-bottom:10px;}
.ft-col ul li a{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.62);text-decoration:none;transition:color .15s;display:block;white-space:nowrap;}
.ft-col ul li a:hover{color:#fff;}
.ft-store{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);}
.ft-store:first-child{padding-top:0;}
.ft-store:last-child{border-bottom:none;}
.ft-store-name{font-size:14px;font-weight:700;color:rgba(255,255,255,.88);margin-bottom:4px;display:flex;align-items:center;gap:7px;}
.ft-store-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0;}
.ft-store-addr{font-size:13px;color:rgba(255,255,255,.48);line-height:1.55;}
.ft-store-tel{font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;display:block;margin-top:3px;}
.ft-store-tel:hover{color:var(--red);}
.ft-hours{display:inline-flex;align-items:center;gap:7px;background:rgba(45,49,128,.4);border:1px solid rgba(45,49,128,.6);border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;color:rgba(255,255,255,.68);margin-top:18px;}
.ft-hours-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 0 2px rgba(34,197,94,.25);animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.4;}}
.footer-bottom{max-width:1280px;margin:0 auto;padding:24px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.ft-copy{font-size:13.5px;color:rgba(255,255,255,.4);font-weight:500;}
.ft-copy strong{color:rgba(255,255,255,.55);}
.ft-links{display:flex;align-items:center;gap:20px;}
.ft-links a{font-size:13px;color:rgba(255,255,255,.4);font-weight:500;text-decoration:none;transition:color .15s;}
.ft-links a:hover{color:rgba(255,255,255,.7);}

/* ════════════════════════════════════════════════════════════════════
   12. AREAS WE SERVE BAND
   ════════════════════════════════════════════════════════════════════ */
.areas-band{background:#0e0f38;border-top:1px solid rgba(255,255,255,.06);}
.areas-inner{max-width:1280px;margin:0 auto;padding:36px 52px 44px;}
.areas-label{font-family:var(--heading-font);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:18px;display:block;}
.areas-flat{display:flex;flex-wrap:wrap;align-items:center;gap:0;line-height:2;}
.areas-flat a{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.6);text-decoration:none;transition:color .18s;white-space:nowrap;}
.areas-flat a:hover{color:#fff;}
.areas-flat a.areas-view-all{color:var(--red);font-weight:700;}
.areas-flat a.areas-view-all:hover{opacity:.8;}
.areas-dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.2);margin:0 10px;vertical-align:middle;flex-shrink:0;}

/* ════════════════════════════════════════════════════════════════════
   13. RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:1200px){.footer-top{grid-template-columns:1fr 1fr 1fr;gap:32px;}}
@media(max-width:1240px){
  .hdr-inner{padding:0 18px;}
  .hdr-col{padding-left:16px;padding-right:16px;}
  .hdr-logo{margin-right:12px;padding-right:12px;}
  .hdr-nav{gap:2px;}
  .nav-link{padding-left:10px;padding-right:10px;font-size:13px;}
  .hdr-ctas{gap:8px;margin-left:10px;}
  .hdr-tel{padding-left:9px;padding-right:9px;font-size:12.5px;}
  .hdr-book{padding-left:16px;padding-right:16px;font-size:12.5px;}
}
@media(max-width:1080px){
  .hdr-tel{display:none;}
  .nav-item:nth-child(n+4){display:none;}
}
@media(max-width:1024px){.footer-top{grid-template-columns:1fr 1fr;gap:28px;}}
@media(max-width:900px){
  .tk-bar{height:38px;}
  .tk-item{font-size:12px;padding:0 22px;}
  .hdr-nav,.hdr-tel{display:none;}
  .hdr-ham-wrap{display:flex;}
  .hdr-mobile-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .hdr-inner{padding:0 14px;height:64px;}
  .site-header.solid{padding:6px 10px;}
  .site-header.solid .hdr-inner{height:56px;}
  .hdr-col{padding:0 14px;}
  .hdr-logo{margin-right:auto;padding-right:0;}
  .hdr-logo::after{display:none;}
  .hdr-logo img,.hdr-logo .custom-logo,.hdr-logo .custom-logo-link img{height:36px;max-height:36px;}
  .hdr-book{padding:8px 16px;font-size:12.5px;}
  /* Mobile header is now taller than the desktop calculation (128px/
     132px) accounts for — it grew by the new .hdr-mobile-bar row
     (~56px: 18px vertical padding + a 38px-tall button row). These
     mobile-specific overrides add that back in. The .has-hero variant
     didn't exist here before at all; added it now that the mobile bar
     makes the general 900px override insufficient for the front page
     too. */
  .site-content{padding-top:172px;}
  body.no-ticker .site-content{padding-top:128px;}
  .footer-trust-inner{padding:18px 24px;gap:12px;}
  .ft-trust-sep{display:none;}
  .areas-inner{padding:28px 20px 36px;}
  .areas-flat a{font-size:13px;}
}
@media(max-width:768px){
  .footer-top{grid-template-columns:1fr;gap:32px;padding:40px 24px 36px;}
  .footer-bottom{padding:20px 24px;flex-direction:column;text-align:center;}
  .footer-cta-band{padding:36px 24px;}
  .map-header{padding:40px 24px 24px;}
  .map-chips{padding:20px 24px 0;}
  .map-frame-wrap iframe{height:500px;}
}

/* ════════════════════════════════════════════════════════════════════
   14. WORDPRESS DEFAULTS
   ════════════════════════════════════════════════════════════════════ */
.alignleft{float:left;margin:0 1.5em 1.5em 0;}
.alignright{float:right;margin:0 0 1.5em 1.5em;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto;}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:13px;color:var(--muted);margin-top:8px;text-align:center;}

/* ════════════════════════════════════════════════════════════════════
   15. DEFENSIVE FOOTER (resist page-builder hiding)
   ════════════════════════════════════════════════════════════════════ */
.map-section,.footer-cta-band,.footer-trust,.site-footer,.areas-band{display:block!important;visibility:visible!important;opacity:1!important;}
.site-footer .footer-top{display:grid!important;}
.site-footer{position:relative!important;z-index:1!important;}

/* ════════════════════════════════════════════════════════════════════
   16. DEFENSIVE LOGO STYLING
   These rules use !important and high selector specificity to override
   any plugin/page-builder CSS that may try to resize or restyle the
   logo on the production site (NitroPack CSS optimization, Elementor
   global styles, etc.). Without these, conflicting rules can make the
   logo render at native image dimensions instead of the 42px height.
   ════════════════════════════════════════════════════════════════════ */
.site-header .hdr-logo{
  display:flex!important;
  align-items:center!important;
  height:42px!important;
  flex-shrink:0!important;
}
.site-header .hdr-logo img,
.site-header .hdr-logo a img,
.site-header .hdr-logo .custom-logo,
.site-header .hdr-logo .custom-logo-link img,
.site-header .hdr-logo .custom-logo-link{
  height:42px!important;
  max-height:42px!important;
  width:auto!important;
  max-width:220px!important;
  filter:none!important;
  opacity:1!important;
  object-fit:contain!important;
}
@media(max-width:900px){
  .site-header .hdr-logo,
  .site-header .hdr-logo > a{
    height:36px!important;
  }
  .site-header .hdr-logo img,
  .site-header .hdr-logo a img,
  .site-header .hdr-logo .custom-logo,
  .site-header .hdr-logo .custom-logo-link img{
    height:36px!important;
    max-height:36px!important;
  }
}


/* Header/services redesign */
.hdr-call-label{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.hdr-call-number{font-size:13.5px;font-weight:800;color:var(--navy-d)}.hdr-mobile-directions{display:none}.hdr-ham-label{display:none!important}
.nav-services-premium{left:-28px;min-width:860px;max-width:920px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px;border-radius:20px}.nav-services-premium .service-cat{min-width:0;padding:2px 2px 8px}.nav-services-premium .service-cat-other{grid-column:1/-1;border-top:1px solid var(--border);padding-top:8px}.nav-services-premium .other-services-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.nav-services-premium .drop-link{min-height:44px;line-height:1.25}.nav-services-premium .drop-link-static{cursor:default}.nav-services-premium .drop-link-static:hover{background:transparent;color:var(--navy-d)}.nav-services-premium .drop-link-static:hover .dico{background:var(--surface)}.services-menu-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,rgba(45,49,128,.055),rgba(232,49,42,.055));border:1px solid rgba(45,49,128,.07);border-radius:12px;padding:10px 14px;margin-top:2px;font-size:12.5px;font-weight:650;color:var(--muted)}.services-menu-footer a{color:var(--red);font-weight:800;text-decoration:none;white-space:nowrap}
.mob-service-groups{display:flex;flex-direction:column;gap:8px;padding:2px 2px 4px}.mob-service-group{border:1px solid rgba(45,49,128,.09);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 5px 18px rgba(14,15,56,.035)}.mob-service-group summary{list-style:none;display:grid;grid-template-columns:38px 1fr 28px;align-items:center;gap:10px;min-height:58px;padding:9px 10px;cursor:pointer;font-size:14.5px;font-weight:800;color:var(--navy-d);-webkit-tap-highlight-color:transparent}.mob-service-group summary::-webkit-details-marker{display:none}.mob-cat-icon{width:38px;height:38px;border-radius:11px;background:rgba(232,49,42,.08);display:flex;align-items:center;justify-content:center;color:var(--red)}.mob-cat-icon svg{width:18px;height:18px;stroke:currentColor}.mob-cat-chev{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--navy);font-size:18px;font-weight:500;transition:transform .2s,background .2s}.mob-service-group[open] .mob-cat-chev{transform:rotate(45deg);background:rgba(232,49,42,.09);color:var(--red)}.mob-service-items{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px 10px 58px}.mob-service-items a,.mob-service-items span{display:flex;align-items:center;min-height:38px;padding:8px 9px;border-radius:9px;background:var(--surface);font-size:12.5px;font-weight:650;line-height:1.25;color:var(--navy-d);text-decoration:none}.mob-service-items a:hover{background:rgba(232,49,42,.07);color:var(--red)}.mob-service-items span{opacity:.72}
@media(max-width:1240px) and (min-width:901px){.hdr-call-label{display:none}.nav-services-premium{left:-20px;min-width:790px}.nav-services-premium .other-services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.hdr-inner{height:70px!important;padding:0 10px!important}.hdr-col{padding:0 10px!important;border-radius:16px!important}.hdr-ctas{gap:8px;margin-left:auto}.hdr-book,.hdr-tel{display:none!important}.hdr-mobile-directions{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 12px;border:1px solid rgba(45,49,128,.10);border-radius:12px;background:var(--surface);color:var(--navy-d);font-family:var(--font);font-size:12px;font-weight:800;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);white-space:nowrap}.hdr-mobile-directions svg{width:15px;height:15px;stroke:var(--red)}.hdr-ham-wrap{display:flex!important;margin-left:0;gap:0}.hdr-ham{width:44px;height:44px;border:0;background:linear-gradient(145deg,var(--navy),var(--navy-deep));border-radius:13px;box-shadow:0 7px 18px rgba(14,15,56,.22),inset 0 1px 0 rgba(255,255,255,.16)}.hdr-ham span{width:18px;height:2px;background:#fff}.hdr-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hdr-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hdr-mobile-bar{display:none!important}.hdr-directions-menu{display:block;top:calc(100% + 4px);left:10px;right:10px;border:1px solid rgba(45,49,128,.09);border-radius:16px;padding:8px;overflow:hidden}.site-content{padding-top:128px!important}body.no-ticker .site-content{padding-top:86px!important}body.has-hero .site-content{padding-top:128px!important}body.has-hero.no-ticker .site-content{padding-top:86px!important}.mob-drawer{width:min(390px,94vw);background:linear-gradient(180deg,#fff 0%,#fbfbfe 100%)}.mob-head{padding:14px 16px;min-height:66px}.mob-x{border-radius:12px;background:var(--navy-deep);border:0;color:#fff;font-size:20px;box-shadow:0 5px 14px rgba(14,15,56,.16)}.mob-body{padding:12px 12px 40px}}
@media(max-width:420px){.hdr-mobile-directions{padding:0 9px;font-size:11.5px}.mob-service-items{grid-template-columns:1fr;padding-left:58px}}