/*
  Modern CSS for Ventura County Roof Cleaners
  -------------------------------------------
  - Branded visual system
  - Engaging hero with layered background + curve divider
  - Masonry gallery (handles portrait/landscape without stretching)
  - Better spacing, anchor offsets, and mobile nav polish
*/

/* ------------------- */
/* Variables & Resets  */
/* ------------------- */
:root {
    /* Colors (from logo) */
    --brand-primary: #1C3765;      /* Deep Blue */
    --brand-primary-900: #0E2545;  /* Darker */
    --brand-primary-light: #3AB4D8;/* Light Blue */
    --brand-accent: #F9A01B;       /* Sunny Orange */
    --brand-ink: #1C3765;          /* Heading text color */
    --brand-text: #475569;         /* Body text color */
    --brand-muted: #6B7A90;        /* Muted text color */
    --brand-bg: #FFFFFF;
    --brand-bg-alt: #F0F5FA;       /* Light blue-gray background */
    --brand-line: #E7EDF3;
    --brand-card: #FFFFFF;
    --brand-error: #B00020;
  
    /* Typography */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Anton', sans-serif; /* Bold heading font to match logo */
  
    /* Sizing & Spacing */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-full: 999px;
    --max-width: 1160px;
    --header-height: 72px;
  
    /* Shadows */
    --shadow-sm: 0 4px 14px rgba(28, 55, 101, .06);
    --shadow-md: 0 8px 24px rgba(28, 55, 101, .09);
    --shadow-lg: 0 12px 40px rgba(28, 55, 101, .12);
  
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-smooth: 0.3s ease-in-out;
  }
  
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--brand-text);
    background-color: var(--brand-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img, video { max-width: 100%; height: auto; display: block; }
  a { color: var(--brand-primary); text-decoration: none; }
  a:focus-visible, button:focus-visible { outline: 3px solid rgba(58,180,216,.4); outline-offset: 2px; }
  
  h1, h2, h3, .brand, .tile-title, .step .num {
    font-family: var(--font-heading);
    color: var(--brand-ink);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.1;
  }
  h1 { font-size: clamp(2.4rem, 5.2vw, 3.6rem); }
  h2 { font-size: clamp(1.9rem, 4.4vw, 2.6rem); }
  h3 { font-size: clamp(1.15rem, 3.4vw, 1.4rem); }
  p { margin: 0; }
  ul { list-style: none; margin: 0; padding: 0; }
  .container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-inline: 20px;      /* ← horizontal only */
  }  
  /* Anchor offset to avoid "under header" overlap when clicking nav links */
  section, header, footer { scroll-margin-top: calc(var(--header-height) + 20px); }
  
  /* ------------------- */
  /* Utility             */
  /* ------------------- */
  .lead { font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--brand-muted); }
  .hide-mobile { display: none; }
  @media (min-width: 768px) { .hide-mobile { display: inline-flex; } }
  
  .icon { width: 22px; height: 22px; }
  .icon path { fill: var(--brand-primary); }
  
  /* Aspect utilities (help prevent stretch) */
  .ratio { position: relative; overflow: hidden; border-radius: var(--radius-md); }
  .ratio > img, .ratio > video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .ratio-16x9 { padding-top: 56.25%; }
  .ratio-4x3  { padding-top: 75%; }
  .ratio-1x1  { padding-top: 100%; }
  
  /* ------------------- */
  /* Buttons & Cards     */
  /* ------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 24px; border-radius: var(--radius-full); font-weight: 700;
    border: 2px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-smooth), background-color var(--transition-smooth);
    text-transform: uppercase; font-size: 14px;
  }
  .btn-primary {
    background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-sm);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background-color: var(--brand-primary-900); }
  .btn-primary .icon path { fill: #fff; }
  
  .btn-outline {
    background-color: transparent; border-color: var(--brand-primary); color: var(--brand-primary);
  }
  .btn-outline:hover { background-color: var(--brand-primary); color: #fff; transform: translateY(-2px); }
  
  .chip {
    background: var(--brand-bg-alt); color: var(--brand-ink); border: 1px solid var(--brand-line);
    padding: 8px 14px; border-radius: var(--radius-full); font-weight: 600; font-size: 13px;
  }
  
  .card {
    background-color: var(--brand-card); border: 1px solid var(--brand-line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); overflow: hidden;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .card > :not(img, video) { padding: 24px; }
  .card h3 { margin-top: 10px; margin-bottom: 8px; }
  .card p { color: var(--brand-text); }
  .card figcaption { margin-top: 8px; color: var(--brand-muted); font-size: 14px; padding: 0 24px 24px; }
  
/* ------------------- */
/* Header & Nav        */
/* ------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000; /* header sits below nav sheet */
  background-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--brand-line);
  isolation: isolate; /* new stacking context */
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-height);
}

.brand {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img { border-radius: var(--radius-sm); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-links a {
  font-weight: 700;
  color: var(--brand-primary);
  opacity: .85;
  transition: opacity var(--transition-fast);
  text-transform: uppercase;
  font-size: 14px;
}
.nav-links a:hover { opacity: 1; }
.nav-links .btn-outline { padding: 10px 20px; font-weight: 700; }

/* --- Hamburger / Close --- */
.nav-toggle {
  display: none;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-full);
  padding: 10px;
  line-height: 0;
  cursor: pointer;
  position: relative;
  z-index: 1010; /* above header edge */
}
.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 1px;
  transition: transform 0.25s ease;
}
.hamburger { position: relative; }
.hamburger::before,
.hamburger::after {
  content:"";
  position:absolute; left:0;
}
.hamburger::before { top:-6px; }
.hamburger::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .hamburger { background:transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before { transform:rotate(45deg); top:0; }
.nav-toggle[aria-expanded="true"] .hamburger::after  { transform:rotate(-45deg); top:0; }

/* Make the toggle float ABOVE the sheet/scrim when open */
@media (max-width: 768px) {
  .nav-toggle[aria-expanded="true"] {
    position: fixed;                 /* escape header stacking context */
    top: calc(env(safe-area-inset-top, 0) + 10px);
    right: 12px;
    z-index: 2005;                   /* higher than sheet + scrim */
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
  }
}

/* ------------------- */
/* Desktop reset       */
/* ------------------- */
@media (min-width: 769px) {
  .primary-nav {
    position: static;
    transform:none!important;
    background:transparent;
    box-shadow:none;
    z-index:auto;
  }
  .nav-links {
    flex-direction:row;
    align-items:center;
    gap:1.5rem;
    height:auto;
    padding:0;
    overflow:visible;
  }
  .nav-toggle { display:none; }
}

/* ------------------- */
/* Mobile Nav Sheet    */
/* ------------------- */
@media (max-width: 768px) {
  html, body { overflow-x:hidden; }

  .nav-toggle { display:block; }

  .primary-nav {
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(420px,86vw);
    background:#fff;
    box-shadow:-24px 0 60px rgba(0,0,0,0.18);
    z-index:1005; /* sits above header */
    transform:translateX(100%);
    transition:transform .3s ease;
    will-change:transform;
  }
  .primary-nav[data-visible="true"] { transform:translateX(0); }

  /* Overlay scrim — under sheet, above header/content */
  body.nav-open::before {
    content:"";
    position:fixed; inset:0;
    background:rgba(0,0,0,.28);
    z-index:1002;
  }

  .nav-links {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:1.25rem;
    height:100%;
    padding:calc(var(--header-height) + 1.25rem) 20px 28px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links a,
  .dropdown-toggle { font-weight:800; font-size:15px; }
  .nav-links .btn-outline { padding:14px 20px; text-align:center; }

  .nav-links > li.has-dropdown .dropdown {
    position:static;
    width:100%;
    margin-top:.25rem;
    padding:.5rem;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    display:none;
  }
  .nav-links > li.has-dropdown.open > .dropdown { display:block; }
}

/* Lock body scroll */
body.nav-open { overflow:hidden; }

/* (Old commented mobile block removed) */

/* ---------- Nav: Locations dropdown ---------- */
.has-dropdown { position: relative; }

.dropdown-toggle{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 10px 6px; background: transparent; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; text-transform: uppercase; font-size: 14px;
  color: var(--brand-primary); opacity: .85; transition: opacity var(--transition-fast);
}
.dropdown-toggle:hover{ opacity: 1; }
.dropdown-toggle .chev{ font-size: .9em; transform: translateY(-1px); }

/* Panel */
.nav-links > li.has-dropdown .dropdown{
  position: absolute; top: 100%; left: 0;
  min-width: 240px; margin-top: .5rem; padding: .5rem;
  background: var(--brand-card); border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  list-style: none; display: none; z-index: 20;
}

/* Items */
.nav-links > li.has-dropdown .dropdown a,
.nav-links > li.has-dropdown .dropdown span[role="menuitem"]{
  display: block; padding: .6rem .75rem; border-radius: var(--radius-sm);
  font-weight: 600; color: var(--brand-primary);
}
.nav-links > li.has-dropdown .dropdown a:hover,
.nav-links > li.has-dropdown .dropdown a:focus{
  background: var(--brand-bg-alt); text-decoration: none;
}

/* Divider + footer link */
.dropdown-divider{ height: 1px; background: var(--brand-line); margin: .35rem .25rem; }
.nav-links > li.has-dropdown .dropdown a[href="/locations/"]{
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}

/* Desktop show on hover/focus */
@media (hover:hover){
  .nav-links > li.has-dropdown:hover > .dropdown,
  .nav-links > li.has-dropdown:focus-within > .dropdown{ display: block; }
}

/* Mobile: show when JS sets .open on the <li> */
.nav-links > li.has-dropdown.open > .dropdown{ display: block; }

/* Make sure dropdown panels render on top of the mobile sheet */
@media (max-width: 768px){
  .nav-links > li.has-dropdown .dropdown{
    position: static; margin-top: 0; width: 100%;
    box-shadow: var(--shadow-sm);
  }
}


/* Prevent sideways drag on mobile */
html, body { overflow-x: hidden; }

/* Header base stays the same… */




/* Keep your existing desktop dropdown styles… */

  
  /* ------------------- */
  /* Sections & Spacing  */
  /* ------------------- */
  section { padding: clamp(4rem, 8vw, 6rem) 0; }
  .section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
  .section-head p { margin-top: 1rem; color: var(--brand-text); font-size: 1.1rem; }
  
  /* ------------------- */
  /* Hero (engaging)     */
  /* ------------------- */
  .hero {
    position: relative;
    /* Layered background: deep gradient + subtle grid pattern + orange glow */
    background:
      radial-gradient(900px 360px at 90% -10%, rgba(249, 160, 27, 0.18), transparent 60%),
      radial-gradient(600px 280px at 10% 0%, rgba(58, 180, 216, .18), transparent 60%),
      linear-gradient(180deg, #E8F3FF 0%, #F6FAFF 45%, #FFFFFF 100%);
    border-bottom: 1px solid var(--brand-line);
    padding: clamp(3rem, 8vw, 6.5rem) 0;
    overflow: hidden;
  }
  .hero::before {
    /* Subtle dotted pattern overlay */
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(28,55,101,.08) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
  }
  .hero::after {
    /* Curved divider at bottom */
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 80px;
    background:
      radial-gradient(100% 60px at 50% 0, #FFFFFF 60px, transparent 61px) bottom/100% 80px no-repeat;
  }
  .hero-wrap { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; position: relative; z-index: 1; }
  @media (min-width: 980px) { .hero-wrap { grid-template-columns: 1.05fr .95fr; } }
  
  .hero-content p.lead { margin: 1.5rem 0 2rem; }
  .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
  .hero-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.25rem; }
  
  .hero-card {
    background: var(--brand-card); border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
    padding: 1.25rem; box-shadow: var(--shadow-lg);
  }
  
  .hero-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 12px;
  }
  .stat {
    background: linear-gradient(180deg, #ffffff, var(--brand-bg-alt));
    border: 1px solid var(--brand-line); border-radius: var(--radius-md);
    text-align: center; padding: 14px;
  }
  .stat b { display: block; font-size: 1.4rem; color: var(--brand-primary); }
  
  
  /* ------------------- */
  /* Services & Videos   */
  /* ------------------- */
  .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  @media (min-width: 600px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
  


  .video-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
  @media (min-width: 768px) { .video-grid { grid-template-columns: 1fr 1fr; } }
  .video-grid .card { overflow: hidden; }
  .video-grid video { display: block; width: 100%; height: auto; }

  /* ===========================
   Services — fully scoped
   =========================== */
#services {
    --svc-radius: var(--radius-lg, 18px);
    --svc-pad: 1.15rem;
    --svc-gap: 1.25rem;
    --svc-border: var(--brand-line, #E7EDF3);
    --svc-card: var(--brand-card, #fff);
    --svc-ink: var(--brand-ink, #1C3765);
    --svc-text: var(--brand-text, #475569);
    --svc-accent: var(--brand-primary-light, #3AB4D8);
  }
  
  #services .section-head { margin-bottom: 2.25rem; }
  
  /* New grid (doesn't rely on your global .grid-3) */
  #services .svc-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--svc-gap);
  }
  
  /* Card (no .card class => no global side effects) */
  #services .svc-card{
    display: flex;
    flex-direction: column;
    background: linear-gradient(#fff,#fff) padding-box,
                linear-gradient(135deg, rgba(58,180,216,.25), rgba(28,55,101,.12)) border-box;
    border: 1px solid transparent;       /* gradient border */
    border-radius: var(--svc-radius);
    box-shadow: var(--shadow-sm, 0 6px 20px rgba(15,23,42,.06));
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  #services .svc-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, 0 12px 32px rgba(15,23,42,.12));
  }
  
  /* Media: fixed window, no scrunching */
  #services .svc-media{
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0; /* reset figure default */
  }
  #services .svc-media img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;             /* fill without distortion */
    object-position: center;
    transform: scale(1);
    transition: transform .6s ease;
  }
  #services .svc-card:hover .svc-media img{ transform: scale(1.04); }
  
  /* Small label chip on image */
  #services .svc-tag{
    position: absolute; left: 12px; bottom: 12px;
    font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--svc-border);
    border-radius: 999px;
    padding: 6px 10px;
    backdrop-filter: blur(3px);
  }
  
  /* Body */
  #services .svc-body{
    padding: var(--svc-pad);
    display: grid;
    gap: .45rem;
  }
  #services .svc-body h3{
    margin: 0;
    font-size: clamp(1.06rem, 1.6vw, 1.28rem);
    color: var(--svc-ink);
    letter-spacing: .015em;
  }
  #services .svc-body p{
    margin: 0;
    color: var(--svc-text);
    line-height: 1.6;
  }
  
  /* Optional: subtle divider under the section head (services only) */
  #services .section-head::after{
    content: "";
    display: block;
    width: 84px; height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--svc-accent), color-mix(in oklab, var(--brand-primary,#1C3765) 70%, #fff 30%));
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    #services .svc-card{ transition: none; }
    #services .svc-media img{ transition: none; }
  }
  
  
  /* ------------------- */
  /* Process             */
  /* ------------------- */
  .steps { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
  @media (min-width: 520px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 980px) { .steps { grid-template-columns: repeat(4, 1fr); } }
  
  .step {
    background: var(--brand-card); border: 1px solid var(--brand-line); border-radius: var(--radius-md);
    padding: 1.5rem; position: relative; box-shadow: var(--shadow-sm); text-align: center;
  }
  .step .num {
    display: block; font-size: 3rem; line-height: 1; margin-bottom: 1rem;
    color: var(--brand-primary-light);
  }
  .step p { color: var(--brand-text); }
  
  /* ------------------- */
  /* Service Areas       */
  /* ------------------- */
  #areas { background-color: var(--brand-bg-alt); border-top: 1px solid var(--brand-line); border-bottom: 1px solid var(--brand-line); }
  .area-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .area-chips span {
    background: var(--brand-card); border: 1px solid var(--brand-line); padding: 10px 18px;
    border-radius: var(--radius-full); font-weight: 600; font-size: 1rem;
  }
  
/* ============== Quilt Gallery ============== */
.quilt{
  --gap: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 160px;                 /* base row height */
  grid-auto-flow: dense;                 /* pack neatly */
  gap: var(--gap);
}

.tile{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md, 14px);
  border: 1px solid var(--brand-line, #E7EDF3);
  background: var(--brand-card, #fff);
  box-shadow: var(--shadow-sm, 0 6px 20px rgba(15,23,42,.06));
  cursor: pointer;
  transform: translateZ(0);              /* smoother */
}

/* size modifiers */
.tile.w-2 { grid-column: span 2; }
.tile.h-2 { grid-row: span 2; }

/* media */
.tile img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}

/* subtle zoom on hover */
.tile:hover img{ transform: scale(1.04); }

/* caption overlay */
.tile figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-size: 14px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  transform: translateY(0); transition: opacity .25s ease;
}

/* video badge */
.tile-badge{
  position: absolute; top: 10px; left: 10px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(0,0,0,.55); color:#fff; font-weight: 600;
  font-size: 12px; line-height: 1;
}

/* responsive tune */
@media (min-width: 800px){
  .quilt{ grid-auto-rows: 190px; }
}
@media (min-width: 1200px){
  .quilt{ grid-auto-rows: 210px; gap: 16px; }
}

/* ============== Lightbox ============== */
#lightbox{
  width: min(1200px, 96vw);
  height: min(86vh, 900px);
  padding: 0; border: none; border-radius: 16px;
  background: color-mix(in oklab, var(--brand-bg, #fff) 82%, #000 18%);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

#lightbox::backdrop{
  background: rgba(0,0,0,.65);
}

.lb-stage{
  position: relative; width: 100%; height: 100%;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 16px;
}

.lb-stage img, .lb-stage video{
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; display: block;
  border-radius: 10px;
}

/* controls */
#lightbox .lb-close,
#lightbox .lb-prev,
#lightbox .lb-next{
  position: absolute; z-index: 3;
  top: 10px; width: 42px; height: 42px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.55); color:#fff; font-size: 24px;
  display: grid; place-items: center;
}
#lightbox .lb-close{ right: 10px; }
#lightbox .lb-prev{ left: 10px; top: 50%; transform: translateY(-50%); }
#lightbox .lb-next{ right: 10px; top: 50%; transform: translateY(-50%); }

/* focus rings for a11y */
#lightbox button:focus-visible{
  outline: 2px solid var(--brand-primary, #1C3765);
  outline-offset: 2px;
}

  
  /* ------------------- */
  /* Testimonials & CTA  */
  /* ------------------- */
  .quote-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  @media (min-width: 768px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
  .quote {
    background: var(--brand-card); border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
    padding: 2rem; box-shadow: var(--shadow-sm); text-align: center;
  }
  .quote p { font-size: 1.1rem; margin: 1rem 0; font-weight: 600; color: var(--brand-text); }
  .quote footer { color: var(--brand-muted); font-weight: 600; }
  .stars { letter-spacing: 1px; color: var(--brand-accent); font-size: 1.25rem; }
  
  .cta-banner {
    background: var(--brand-primary);
    color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3rem);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.5rem; box-shadow: var(--shadow-lg); margin-top: 4rem; text-align: center;
  }
  @media (min-width: 768px) { .cta-banner { text-align: left; } }
  .cta-banner h3 { color: #fff; font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px; }
  .cta-banner p { opacity: .9; }
  .cta-banner .btn-primary { background-color: #fff; color: var(--brand-primary); }
  .cta-banner .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
  .cta-banner .btn-outline:hover { background-color: rgba(255,255,255,.1); }
  .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 1rem auto 0; }
  @media (min-width: 768px) { .cta-buttons { margin: 0; } }
  
  /* ------------------- */
  /* FAQ                 */
  /* ------------------- */
  .faq-grid { max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .faq-grid details {
    background: var(--brand-card); border: 1px solid var(--brand-line); border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); cursor: pointer;
  }
  .faq-grid summary { font-weight: 700; list-style: none; font-size: 1.1rem; color: var(--brand-primary); }
  .faq-grid summary::-webkit-details-marker { display: none; }
  .faq-grid summary::after { content: '+'; float: right; font-size: 1.5rem; transition: transform var(--transition-fast); }
  .faq-grid details[open] summary::after { transform: rotate(45deg); }
  .faq-grid p { margin-top: 1rem; color: var(--brand-text); }
  
  /* ------------------- */
  /* Contact             */
  /* ------------------- */
  .contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  @media (min-width: 980px) { .contact-grid { grid-template-columns: 1.1fr .9fr; } }
  form {
    background: var(--brand-card); border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 5vw, 2.5rem); box-shadow: var(--shadow-sm);
  }
  form h2 { text-align: center; }
  form p { margin: 0.5rem 0 2rem; color: var(--brand-muted); text-align: center; }
  .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
  .field label { font-weight: 600; font-size: 14px; }
  .field input, .field textarea, .field select {
    width: 100%; padding: 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--brand-line); background: var(--brand-bg-alt); font: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(28, 55, 101, .1);
  }
  .field .req { color: var(--brand-error); }
  .form-footer { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-top: 1.5rem; }
  .form-footer .btn { width: 100%; }
  #form-status { font-weight: 600; }
  #form-status.success { color: var(--brand-primary); }
  #form-status.error { color: var(--brand-error); }
  
  .contact-card {
    background: var(--brand-bg-alt); border: 1px solid var(--brand-line);
    border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-sm);
  }
  .contact-list { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
  .contact-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
  .contact-badges { margin-top: 1.5rem; display: flex; gap: 10px; flex-wrap: wrap; }
  
  /* ------------------- */
  /* Footer              */
  /* ------------------- */
  .site-footer {
    padding: 3rem 0; border-top: 1px solid var(--brand-line);
    color: var(--brand-muted); background-color: #0E2A4D;
  }
  .footer-grid { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
  @media (min-width: 768px) { .footer-grid { flex-direction: row; justify-content: space-between; } }
  .footer-grid small { color: rgba(255,255,255,.7); }
  .to-top-link { font-weight: 600; color: rgba(255,255,255,.7); }
  .to-top-link:hover { color: #fff; text-decoration: none; }
  
  /* ------------------- */
  /* Entrance Animations */
  /* ------------------- */
  [data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  [data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  

  /* ---------- Locations dropdown (header) ---------- */
.nav-locations { display: inline-flex; align-items: center; }
.location-select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; font-weight: 700; text-transform: uppercase; font-size: 14px;
  padding: 10px 36px 10px 14px;
  border-radius: var(--radius-full);
  border: 2px solid var(--brand-primary);
  background:
    linear-gradient(180deg,#fff,#f9fbff) padding-box,
    none border-box;
  color: var(--brand-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  position: relative;
}
/* caret */
.location-select{
  background-image:
    radial-gradient(circle at center, var(--brand-primary) 3px, transparent 4px),
    linear-gradient(var(--brand-primary), var(--brand-primary));
  background-position: right 16px center, right 12px center;
  background-size: 6px 6px, 1px 18px;
  background-repeat: no-repeat;
}
.location-select:hover{ box-shadow: var(--shadow-md); }
.location-select:focus-visible{ outline: 3px solid rgba(58,180,216,.4); outline-offset: 2px; }

/* Mobile: make it full-width inside the slide-in menu */
@media (max-width: 768px){
  .nav-locations{ width: 100%; }
  .location-select{ width: min(420px, 90vw); }
}

/* Hide-only utility for label */
.sr-only{
  position:absolute!important; height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
[data-animate]{opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease}
[data-animate].in{opacity:1; transform:none}



/* Adjust 768px to match your site's breakpoint */
@media (max-width: 767.98px) {
  /* shows ONLY on mobile */
  .hide-fix { 
    display: revert !important; /* fall back to element's natural display */
  }
  /* hides on mobile */
  .hide-fix-desktop { 
    display: none !important; 
  }
}

@media (min-width: 768px) {
  /* hides on desktop/tablet */
  .hide-fix { 
    display: none !important; 
  }
  /* shows ONLY on desktop/tablet */
  .hide-fix-desktop { 
    display: revert !important; 
  }
}