/* === ACCESSIBILITY: VISIBLE FOCUS STYLES === */
a, button, input, textarea, select, summary {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--primary-2);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.18);
  z-index: 10;
}

/* For dark mode, ensure focus ring is visible */
@media (prefers-color-scheme: dark) {
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid #e6e1ff;
    box-shadow: 0 0 0 3px #3a2a6a;
  }
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 10px;
  background: var(--primary-2);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 9999;
  transition: top 0.2s ease;
}
.skip-to-main:focus {
  top: 10px;
  outline: 3px solid #fff;
  outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
  .skip-to-main {
    background: #e6e1ff;
    color: #1a1a2e;
  }
  .skip-to-main:focus {
    outline-color: #1a1a2e;
  }
}
/* kill any stray video debug badges */
.video-debug, [data-video-debug], .media-toast { display: none !important; }

/* =========================================
   BASE / RESET
   ========================================= */
* { box-sizing: border-box }
:root{
  --primary-1:#667eea; --primary-2:#764ba2; --accent:#ff6b9d; --text:#2a2a4a;
  --card-shadow:0 8px 22px rgba(60,20,80,0.08);
  --radius:18px; --sticky-offset:90px;
  --form-gap:12px; --compact-gap:6px;
  --header-h:64px;
  color-scheme: light dark;
}
html,body{ margin:0; padding:0; overflow-x:hidden }
body{ background:#f8f8f8; color:var(--text); font-family:'Josefin Sans',Arial,sans-serif }
img,video{ max-width:100%; height:auto; display:block }
section,.hero{ scroll-margin-top:var(--sticky-offset) }
.hidden{ display:none !important }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
}

/* =========================================
   HEADER / NAV
   ========================================= */
.header{
  position:sticky; top:0; z-index:1002; width:100%;
  background:linear-gradient(135deg,var(--primary-1),var(--primary-2));
  color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
}
.nav-container{
  max-width:1200px; margin:0 auto;
  padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}

.menu-toggle{
  display:none; align-items:center; justify-content:center; gap:8px;
  background:transparent; border:0; color:#fff; cursor:pointer; padding:8px 10px; flex:0 0 auto;
}
.menu-toggle .bars{ width:22px; height:2px; background:#fff; position:relative; display:block; transition:background .2s ease }
.menu-toggle .bars::before,.menu-toggle .bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; transition:transform .25s ease, top .25s ease, opacity .2s ease
}
.menu-toggle .bars::before{ top:-6px } .menu-toggle .bars::after{ top:6px }
/* Animate hamburger to X when aria-expanded true */
.menu-toggle[aria-expanded="true"] .bars{ background:transparent }
.menu-toggle[aria-expanded="true"] .bars::before{ top:0; transform:rotate(45deg) }
.menu-toggle[aria-expanded="true"] .bars::after{ top:0; transform:rotate(-45deg) }

.logo-section{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto }
.logo{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle,var(--accent),#c44569); font-size:2rem; flex:0 0 auto
}
.business-name{
  font-weight:700; font-family:'Parisienne',cursive; color:#fff7fa;
  white-space:nowrap; line-height:1.1; min-width:0; flex:1 1 auto;
  font-size:clamp(1.05rem,5.2vw,2rem); overflow:hidden; text-overflow:ellipsis;
}

nav{ position:relative; flex:0 0 auto }
.nav-menu{ list-style:none; margin:0; padding:0; display:flex; gap:25px; align-items:center }
.nav-menu > li{ position:relative; display:flex; align-items:center } /* only top-level is flex */
.nav-menu a{
  color:#fff; text-decoration:none; font-weight:500; font-size:1.06rem; padding:8px 7px
}
/* Always hide the old mobile intro blurb */
.nav-intro{ display:none !important; }


/* HIDE MOBILE INTRO ON DESKTOP */
/* .nav-intro{ display:none; } */

@media (min-width:901px){
/*  .nav-menu > .nav-intro{ display:none !important; } */
}
@media (max-width:900px){
  /* …your other mobile styles… */

  /* Mobile-only intro row */
  /* .nav-intro{
    display:block; padding:16px 18px;
    background:linear-gradient(135deg,#fff7fb,#f2f1ff);
    color:#3d3966; border-bottom:1px solid #ecebff;
  } */
}

/* Hide background video on small screens; use poster as background instead */
/* @media (max-width: 900px){
  .hero-video-background { display: none; }
  .hero { background: url("/assets/videos/hero-poster.jpg") center/cover no-repeat; }
} */

/* Respect reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-video-background { display: none !important; }
  .hero { background: url("/assets/videos/hero-poster.jpg") center/cover no-repeat; }
}


/* Dropdown trigger */
.has-dropdown{ position:relative }
.nav-toggle{
  background:transparent; border:0; color:#fff; font:inherit; cursor:pointer;
  padding:8px 7px; display:flex; align-items:center; gap:6px
}
.caret{ font-size:.85em }

/* ====== FIX #6: Categories dropdown full-row hover ====== */
.dropdown{
  display:none; position:absolute; left:0; top: calc(100% + 6px);
  min-width:220px; max-width:80vw;
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 9px 30px rgba(102,126,234,.15);
  list-style:none; padding:0; margin:0; z-index:2001;
}
.has-dropdown:hover>.dropdown,
.has-dropdown:focus-within>.dropdown,
.has-dropdown.open>.dropdown{ display:block }

/* Hover bridge to prevent flicker */
.has-dropdown::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px;
}

/* Reset any flex inherited styles and make the row clickable edge-to-edge */
.dropdown li{
  display:block; margin:0; padding:0; /* kill any inherited spacing */
}
.dropdown li > a{
  display:block; width:100%;
  padding:12px 18px;
  text-decoration:none;
  color:#333 !important;
  line-height:1.4;
}
.dropdown li > a:hover,
.dropdown li > a:focus{
  background:#f8f9ff;
  color:var(--primary-2) !important;
}

/* =========================================
   DESKTOP VS MOBILE NAV COLORS
   ========================================= */
@media (min-width:901px){
  .nav-menu > li > a { color:#fff } /* desktop keep white */
}

.quote-link{
  position:relative;
  background:linear-gradient(135deg,var(--primary-1),var(--accent));
  color:#fff; padding:12px 20px; border-radius:22px; box-shadow:0 2px 10px #667eea1e; font-weight:700;
  overflow:hidden;
}
.quote-link::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 20%, transparent 40%);
  transform: translateX(-100%); transition: transform .6s ease;
}
.quote-link:hover::after{ transform: translateX(100%) }

/* =========================================
   MOBILE NAV (drawer) + intro block
   ========================================= */
@media (max-width:900px){
  .menu-toggle{ display:inline-flex !important; order:0 }
  .logo-section{ order:1 }
  nav{ order:2 }

  /* Backdrop behind the drawer */
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity:0; transition:opacity .25s ease; z-index:999; pointer-events:none;
  }
  body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto }

  .nav-menu{
    position:fixed; left:0; right:0; top:0;
    padding-top: var(--header-h);
    background:#fff; color:#333; flex-direction:column; align-items:stretch; gap:0;
    transform:translate3d(0,-100%,0);
    transition:transform .34s cubic-bezier(.22,1,.36,1); will-change:transform;
    box-shadow:0 18px 40px rgba(0,0,0,.14); max-height:100dvh; overflow:auto; z-index:1000; border-bottom-left-radius:18px; border-bottom-right-radius:18px;
  }
  .nav-menu > li{ border-bottom:1px solid #f0f1f6 }
  .nav-menu a,.nav-toggle{ color:#333; padding:14px 18px }
  .nav-menu > li > a { color:#333 }
  .has-dropdown .dropdown{ position:static; top:auto; left:auto; box-shadow:none; border-radius:0; max-width:none }
  .quote-link{ background:none; box-shadow:none; border-radius:0; padding:14px 18px; color:#333 }
  body.nav-open .nav-menu{ transform:translate3d(0,0,0) }
  body.nav-open{ overflow:hidden }

  /* Staggered reveal for menu items */
  .nav-menu > li{ opacity:0; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease }
  body.nav-open .nav-menu > li{ opacity:1; transform:none }
  body.nav-open .nav-menu > li:nth-child(1){ transition-delay:.05s }
  body.nav-open .nav-menu > li:nth-child(2){ transition-delay:.1s }
  body.nav-open .nav-menu > li:nth-child(3){ transition-delay:.15s }
  body.nav-open .nav-menu > li:nth-child(4){ transition-delay:.2s }
  body.nav-open .nav-menu > li:nth-child(5){ transition-delay:.25s }
  body.nav-open .nav-menu > li:nth-child(6){ transition-delay:.3s }
  body.nav-open .nav-menu > li:nth-child(7){ transition-delay:.35s }
  body.nav-open .nav-menu > li:nth-child(8){ transition-delay:.4s }
}

/* =========================================
   HERO
   ========================================= */
.hero{ min-height:60vh; position:relative; display:grid; place-items:center; overflow:hidden; width:100% }
.hero-video-background{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; filter:brightness(.7);
}

.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:2 }
.hero-content{ position:relative; z-index:3; text-align:center; width:100%; padding:50px 8vw 60px; color:#fff }
.hero-content h1{ margin:0 0 18px; font-weight:700; font-size:clamp(2rem,1.2rem+3vw,3.2rem) }
.hero-content p{ font-size:clamp(1rem,.9rem+1vw,1.2rem); margin-bottom:27px }

/* =========================================
   SECTION TITLES
   ========================================= */
.section-title{ margin:30px 0 10px 3vw; text-align:left }

/* =========================================
   BALLOON GARLANDS GRID
   ========================================= */
.card-row{
  max-width:1200px; margin:20px auto 32px; display:grid; gap:28px 20px; grid-template-columns:repeat(4,1fr);
  align-items: start; /* Prevent cards from stretching to match the tallest card */
}
@media (max-width:1200px){ .card-row{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px){ .card-row{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){
  /* On small screens convert the garlands grid into a horizontally scrollable row
     so users swipe left/right instead of scrolling vertically. Each card snaps
     into view for a smoother UX on phones. */
  .card-row{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding:12px 16px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    max-width:100%;
    margin:12px 0 28px;
  }
  .card-row .garland-card{
    flex:0 0 86%; /* most phones will show one card but allow peeking */
    min-width:260px;
    scroll-snap-align: start;
  }
  .card-row::-webkit-scrollbar{ height:8px }
  .card-row::-webkit-scrollbar-thumb{ background:#e6e7ff; border-radius:8px }
}
.garland-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--card-shadow);
  display:flex; flex-direction:column; align-items:center
}
.garland-card .themed-card-img{
  border-radius:15px!important; width:100%; height:auto; aspect-ratio: 4/3; object-fit:cover; background:#eee
}
.garland-card .themed-card-title{
  font-size:1.25rem; font-weight:700; margin:15px 0 10px; color:var(--primary-2)
}
.garland-groupboxes{ width:93%; margin-bottom:20px }
.groupbox{ border:1px solid #dadbf7; border-radius:9px; margin-bottom:9px; background:#f8f9fc; overflow:hidden }
.groupbox-header{
  display:flex; align-items:center; cursor:pointer; font-size:1.06rem; font-weight:600;
  padding:11px 17px; background:#f4f7fc; border-bottom:1px solid #eee; color:#3a3a6a;
}
.groupbox-toggle{ font-size:1.4em; margin-right:13px; color:var(--primary-2) }
.groupbox-content{ padding:12px 18px 12px 43px; background:#fff; display:none !important; color:#42426a }
/* Use direct child selector to ensure only the content of THIS specific groupbox shows */
.groupbox.open > .groupbox-content{ display:block !important }

/* Animate + → – on expand: render plus/minus with bars and hide text */
.groupbox-toggle{
  position: relative;
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 13px;
  vertical-align: middle;
  color: var(--primary-2);
  font-size: 0; /* hide the literal + in markup */
}
.groupbox-toggle::before, .groupbox-toggle::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
/* horizontal bar */
.groupbox-toggle::before{ width: 14px; height: 2px; }
/* vertical bar */
.groupbox-toggle::after{ width: 2px; height: 14px; }
/* when open, hide vertical bar → looks like minus */
.groupbox.open .groupbox-toggle::after{ transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

@media (prefers-color-scheme: dark){
  .groupbox-toggle{ color: #bfc7ff; }
}

/* =========================================
   GRAB & GO DIY
   ========================================= */
.gg-wrap{ max-width:1100px; margin:10px auto 40px; padding:18px 20px }
.gg-card{
  background:#fff; border-radius:18px; box-shadow:0 14px 40px rgba(118,75,162,.12);
  border:1px solid rgba(118,75,162,.12); padding:22px 22px 18px; display:grid; gap:18px;
  grid-template-columns: 88px 1fr;
}
.gg-icon{
  width:72px; height:72px; border-radius:16px; display:grid; place-items:center; font-size:2rem;
  background:linear-gradient(135deg,#ffeaf2,#f5f1ff); color:#764ba2; box-shadow:0 6px 16px rgba(118,75,162,.15)
}
.gg-title{ font-size:1.45rem; font-weight:800; color:#523a82; margin:2px 0 }
.gg-body{ color:#48456a; line-height:1.6 }
.gg-list{ margin:8px 0 0 0; padding-left:18px }
.gg-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.gg-cta .btn{ min-width:180px }
@media (max-width:640px){
  .gg-card{ grid-template-columns:1fr }
  .gg-icon{ margin-inline:auto }
  .gg-title{ text-align:center }
  .gg-cta{ justify-content:center }
}

/* =========================================
   EVENT CATEGORIES
   ========================================= */
.category-row{
  max-width:1200px; margin:20px auto 0; display:grid; gap:28px 20px; grid-template-columns:repeat(4,1fr)
}
@media (max-width:1200px){ .category-row{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px){ .category-row{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .category-row{ grid-template-columns:1fr } }

.themed-card{
  background:#fff; 
  border-radius:var(--radius); 
  box-shadow:var(--card-shadow);
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  cursor:pointer;
  border:3px solid transparent; 
  transition:box-shadow .25s,border-color .25s;
}
.themed-card:hover{ box-shadow:0 16px 32px rgba(118,75,162,.18) }
.themed-card.expanded { 
  border:3px solid var(--accent); 
  box-shadow:0 16px 32px #ff6b9d38;
}
.themed-card-img{ 
  border-radius:15px; 
  width:100%; 
  height:auto; 
  object-fit:cover;
  object-position: center;
  aspect-ratio: 4/3;
}
.themed-card-title{ font-size:1.2rem; font-weight:700; margin:15px 0 10px; color:var(--primary-2) }
.category-desc{ font-size:1rem; color:#555; text-align:center; width:93%; margin-bottom:16px }

/* === MINI-GALLERY (inside each .themed-card) === */
.themed-card { position: relative; }
.themed-card.expanded { border-color: var(--accent); box-shadow: 0 16px 32px #ff6b9d38; }

/* Container that reveals when the card is expanded */
.mini-gallery{
  display:flex;
  gap:10px;
  width:93%;
  margin:10px auto 14px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .28s ease, opacity .28s ease;
}
.themed-card.expanded .mini-gallery{
  max-height:65px;
  opacity:1;
  padding:10px 0;
}

/* Lock body scroll on mobile when gallery is open */
@media (max-width: 900px) {
  body.gallery-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

.mini-gallery::-webkit-scrollbar{ height:8px }
.mini-gallery::-webkit-scrollbar-thumb{ background:#cfd3ff; border-radius:8px }

/* Thumbs */
.mini-thumb{
  flex:0 0 auto;
  width:60px; height:45px; /* Reduced size with proper aspect ratio */
  border:0; padding:0;
  border-radius:8px; /* Slightly reduced border radius */
  overflow:hidden; 
  cursor:pointer;
  background:#f2f3fb;
  display:grid; 
  place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  scroll-snap-align:start;
  transition: transform .18s ease;
}
.mini-thumb:hover{ transform: translateY(-1px); }
.mini-thumb img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block;
  object-position: center;
  aspect-ratio: 4/3;
}
.mini-thumb:focus-visible{ outline:3px solid rgba(102,126,234,.35); outline-offset:2px }

/* See-all tile */
.mini-thumb.see-all{
  background: linear-gradient(135deg, var(--primary-1), var(--accent));
  color:#fff; font-weight:800; font-size:.9rem;
}
.mini-thumb.see-all span{ padding:6px 8px; text-align:center; pointer-events:none; }

/* Lightbox controls: bigger + visible in dark mode */
#galleryLightbox .lb-close, #galleryLightbox .lb-prev, #galleryLightbox .lb-next{
  width:52px !important; height:52px !important;
  background:#ffffff !important; color:#1b1e34 !important;
  border:0 !important; border-radius:999px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.35) !important;
  font-size:26px !important; line-height:1 !important; z-index:2 !important;
}
@media (prefers-color-scheme:dark){
  #galleryLightbox .lb-close, #galleryLightbox .lb-prev, #galleryLightbox .lb-next{
    background:#151a2e !important; color:#e9ebff !important;
    box-shadow:0 10px 24px rgba(0,0,0,.55) !important;
  /* Footer bottom links in dark mode */
  .footer-bottom a{ color:#cfd6ff }
  .footer-bottom a:visited{ color:#b9c3ff }
  }

/* Mobile: switch to horizontal scroller with peeking neighbors */
@media (max-width: 600px){
  .gallery-wrap .gallery-grid{
    display:flex !important; overflow-x:auto; gap:12px; padding:8px 6vw 28px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch;
    scroll-padding: 0 6vw;
    position:relative;
  }
  .gallery-wrap .gallery-grid::-webkit-scrollbar{ display:none }
  .gallery-wrap .gallery-card{
    flex: 0 0 78vw; scroll-snap-align: center;
    transition: transform .2s ease;
  }
  .gallery-wrap .gallery-card:hover{ transform: scale(1.01); }
  .gallery-wrap .gallery-card img{ width:100%; height:auto; display:block; }

  /* swipe hint pill */
  .gallery-wrap .gallery-grid .swipe-hint{
    position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
    background: rgba(0,0,0,.55); color:#fff; padding:6px 10px; border-radius:999px; font-size:.8rem;
    z-index:3; opacity:0; transition: opacity .3s ease; pointer-events:none;
  }
  .gallery-wrap .gallery-grid .swipe-hint.show{ opacity:1 }
}

@media (max-width: 600px) and (prefers-color-scheme: dark){
  .gallery-wrap .gallery-grid::before,
  .gallery-wrap .gallery-grid::after{
    background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0));
  }
  .gallery-wrap .gallery-grid .swipe-hint{ background: rgba(255,255,255,.14) }
}
@media (max-width: 380px){
  .gallery-wrap .gallery-card{ flex-basis: 86vw }
  .gallery-card{ border-radius:10px }
  .gallery-caption{ font-size:.75rem; padding:4px 6px }
}
}

/* Lightbox buttons bigger + visible on dark */
.lb-close, .lb-prev, .lb-next{
  width:52px !important; height:52px !important;
  background:#ffffff !important; color:#1b1e34 !important;
  border:0 !important; border-radius:999px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.35) !important;
  font-size:24px !important; line-height:1 !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .mini-thumb{ background:#13172b; box-shadow:0 1px 4px rgba(0,0,0,.35) }
  .strip-btn{ background:#141a2d; border-color:#272b46; color:#e8e9f3; box-shadow:0 2px 8px rgba(0,0,0,.45) }
  .mini-thumb.see-all{ color:#fff }
}


 /* === CATEGORY GALLERY PAGES === */
.gallery-wrap{ max-width:1200px; margin:24px auto 64px; padding:0 20px }
.gallery-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 18px;
}
.gallery-title{ margin:0; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); color:var(--primary-2); font-weight:800 }
.gallery-breadcrumbs{
  font-size:.95rem; color:#6a6790;
}
.gallery-breadcrumbs a{ color:var(--primary-1); text-decoration:none }
.gallery-breadcrumbs a:hover{ text-decoration:underline }

.gallery-grid{
  display:grid; 
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.gallery-card{
  position:relative; cursor:pointer;
}
.gallery-card img{
  width:100%; height:auto; display:block;
  filter:saturate(1.03) contrast(1.02);
  content-visibility: auto;
  border-radius:14px;
  box-shadow:var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  background:transparent;
}
@media (max-width: 1024px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
}
@media (max-width: 480px){
  .gallery-grid{ grid-template-columns: 1fr; }
}
.gallery-card:hover img{ transform: translateY(-2px) scale(1.02); box-shadow:0 12px 28px rgba(118,75,162,.25), 0 4px 10px rgba(0,0,0,.12); }
.gallery-caption{ position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,.45); color:#fff; padding:6px 8px; border-radius:10px; font-size:.9rem; opacity:.0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease }
.gallery-card:hover .gallery-caption, .gallery-card:focus-visible .gallery-caption{ opacity:1; transform:translateY(0) }
.gallery-card:focus-visible{ outline:2px solid var(--primary-2); outline-offset:2px }

/* filter chips */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 18px }
.filter-chip{
  position:relative; appearance:none; background:#fff; color:#5a4fb0; border:2px solid transparent; 
  padding:10px 16px; border-radius:12px; cursor:pointer;
  font-weight:700; font-size:.95rem; letter-spacing:.2px; overflow:hidden;
  transition:transform .2s ease, box-shadow .25s ease;
}
.filter-chip::before{
  content:""; position:absolute; inset:0; border-radius:12px; padding:2px;
  background:linear-gradient(135deg,var(--primary-1),var(--accent));
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition: box-shadow .25s ease, transform .2s ease; z-index:1;
}
.filter-chip::after{
  content:""; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(120deg, transparent 0%, rgba(102,126,234,.2) 20%, transparent 40%);
  transform:translateX(-100%); transition:transform .6s ease; z-index:2; pointer-events:none;
}
.filter-chip:hover{ transform:translateY(-1px) }
.filter-chip:hover::before{ box-shadow: 0 10px 22px rgba(118,75,162,.25) }
.filter-chip:hover::after{ transform:translateX(100%) }
.filter-chip:focus-visible{ outline:3px solid rgba(102,126,234,.35); outline-offset:2px }
.filter-chip[aria-pressed="true"], .filter-chip.active{ 
  background:linear-gradient(135deg,var(--primary-1),var(--accent)); 
  color:#fff; box-shadow:0 8px 20px rgba(102,126,234,.25);
}
.filter-chip[aria-pressed="true"]::before, .filter-chip.active::before{ display:none; }
.filter-chip[aria-pressed="true"]::after, .filter-chip.active::after{ 
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 20%, transparent 40%);
}

/* Dark mode tweaks */
@media (prefers-color-scheme: dark){
  .filter-chip{ background:#141a2d; color:#e8e9f3; }
  .filter-chip[aria-pressed="true"], .filter-chip.active{ 
    background:linear-gradient(135deg,var(--primary-1),var(--accent)); 
    color:#fff;
  }
}



/* =========================================
   REVIEWS
   ========================================= */
.review-section{ max-width:1200px; margin:40px auto 28px }
.review-slider-container{ overflow-x:auto; padding:0 0 10px }
.review-row{ min-width:700px; display:flex; gap:22px }
@media (max-width:700px){ .review-row{ min-width:100%; gap:14px } }
.review-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--card-shadow);
  flex:0 0 340px; min-width:280px; display:flex; flex-direction:column; align-items:center;
  padding:12px 0 8px;
}
.review-card-title{ font-size:1.05rem; font-weight:700; margin:6px 0 8px; color:var(--primary-2) }
.review-stars{ color:#ffd700; font-size:1.1em; margin-bottom:8px }
.review-desc{ 
  font-size:.98rem; color:#444; margin:0 0 14px; width:93%; text-align:left;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; transition:all .3s ease;
}
.review-desc.expanded{ 
  -webkit-line-clamp:unset; display:block;
}
.review-read-more{
  font-size:.9rem; color:var(--primary-1); font-weight:600; cursor:pointer;
  text-decoration:none; margin:0 0 14px; width:93%; text-align:left; display:inline-block;
  transition:color .2s ease;
}
.review-read-more:hover{ color:var(--accent); text-decoration:underline }

/* Reviews bubbles area (above the intro text) */
.reviews-bubbles{ position:relative; overflow:hidden; margin:22px auto 6px; max-width:1200px; height:240px; border-radius:16px;
  background:linear-gradient(135deg, #f5ecff 0%, #e7f0ff 50%, #fff 100%); border:1px solid rgba(118,75,162,.15);
  box-shadow:0 18px 40px rgba(118,75,162,.12),0 3px 10px rgba(0,0,0,.05);
}
@media (max-width:700px){ .reviews-bubbles{ height:190px; margin-top:16px } }
.reviews-bubbles .bubbles{ position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
.reviews-bubbles .bubble{ position:absolute; left:0; top:0; width:var(--size, 90px); min-height:calc(var(--size,90px)*.62);
  background:rgba(255,255,255,.92); color:#5b4bb1; border-radius:18px; padding:10px 14px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(118,75,162,.15), 0 2px 6px rgba(0,0,0,.08); will-change:transform;
}
.reviews-bubbles .bubble span{ font-weight:700; font-size:.9rem; opacity:.9 }
.reviews-bubbles .bubble:after{ content:""; position:absolute; bottom:-8px; left:22px; width:14px; height:14px; background:inherit; transform:rotate(45deg);
  border-bottom-left-radius:3px; box-shadow:6px 6px 14px rgba(118,75,162,.1);
}

/* Reviews intro (text + CTA) below the bubbles */
.reviews-intro{ max-width:1200px; margin:10px auto 6px; text-align:center; }
.reviews-intro .section-title{ color:#5b4bb1; text-shadow:0 1px 0 #fff; margin:0 auto 6px; display:block; text-align:center; }
.reviews-intro .hero-sub{ color:#5a6580; margin:6px 0 12px; }

/* Inline review form panel */
.review-form-panel{ max-width:900px; width:92vw; margin:10px auto 24px; background:#fff; border-radius:14px; border:1px solid rgba(118,75,162,.15);
  box-shadow:0 14px 32px rgba(118,75,162,.14), 0 2px 8px rgba(0,0,0,.06); padding:16px 18px; display:block;
}
.review-form-panel[hidden]{ display:none }
.review-form-panel.open{ display:block }
.rating-stars{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-start; gap:6px; }
.rating-stars input{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden }
.rating-stars label{ cursor:pointer; font-size:1.6rem; color:#d5d9ea; text-shadow:0 1px 0 #fff; transition:color .2s; line-height:1 }
.rating-stars input:checked ~ label{ color:#ffd700 }
.rating-stars label:hover, .rating-stars label:hover ~ label{ color:#ffe083 }

/* Tiny toast for fake submit */
.toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px); background:#1f2937; color:#fff; padding:10px 14px; border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.18); opacity:0; transition:opacity .2s, transform .2s; z-index:9999; font-size:.95rem }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* DARK MODE for review form panel */
@media (prefers-color-scheme: dark){
  .review-form-panel{ background:#141a2d; border-color:rgba(255,255,255,.12); box-shadow:0 14px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3) }
  .review-form-panel .form-group label{ color:#cfd3ff }
  .review-form-panel .form-group input[type="text"],
  .review-form-panel .form-group textarea{
    background:#1a2035; color:#fff; border-color:#2b3350; box-shadow:0 1px 4px rgba(0,0,0,.5);
  }
  .review-form-panel .form-group input[type="text"]:focus,
  .review-form-panel .form-group textarea:focus{
    background:#1a2035; color:#fff; border-color:#7683ff; box-shadow:0 0 0 3px rgba(118,131,255,.2);
  }
  .review-form-panel .form-group input::placeholder,
  .review-form-panel .form-group textarea::placeholder{ color:#94a3b8 }
  /* Soft off-white container in dark mode so bubbles stand out */
  .reviews-bubbles{ 
    background:#f2f4f8; 
    border-color:rgba(118,75,162,.15);
    box-shadow:0 18px 40px rgba(118,75,162,.12), 0 3px 10px rgba(0,0,0,.05);
  }
  .reviews-bubbles .bubble{ 
    background:rgba(255,255,255,.95); 
    color:#5b4bb1;
    box-shadow:0 8px 20px rgba(118,75,162,.15), 0 2px 6px rgba(0,0,0,.08);
  }
}

/* =========================================
   QUOTE FORM
   ========================================= */
.quote-form-section{ background:rgba(255,255,255,.93); padding:50px 0 70px }
.form-flex-container{ display:flex; justify-content:center }
.quote-form{
  background:#fff; padding:22px 24px; border-radius:16px;
  box-shadow:0 18px 40px rgba(118,75,162,.20),0 3px 10px rgba(0,0,0,.06);
  border:1px solid rgba(118,75,162,.12);
  max-width:900px; width:92vw; min-width:280px; margin:0 auto;
}
.form-section{ margin-bottom:16px }
.form-row{ display:flex; flex-wrap:wrap; gap:var(--form-gap); margin-bottom:8px }
.form-row.compact{ gap:var(--compact-gap); margin-bottom:4px }
.form-group{ flex:1 1 80px; min-width:120px; display:flex; flex-direction:column; margin-bottom:4px }
.form-group.full-width{ flex:100%; min-width:100% }
.form-group label{ margin-bottom:6px; display:block; font-size:1rem; color:#6b60b1; font-weight:600 }
.req{ color:#e53935 }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group textarea{
  width:100%; padding:11px 15px; border:1.5px solid #e0e3ee; border-radius:8px; font-size:1.05rem; background:#fafafe;
  box-shadow:0 1px 4px #c4c7e233; color:#38387f; transition:border .16s,box-shadow .16s, background .2s;
}
.form-group input:focus,.form-group textarea:focus{
  border-color:var(--primary-2); box-shadow:0 4px 16px #a8b4e225; outline:none; background:#ffffff
}
.form-group textarea{ resize:vertical }
.field-error{ font-size:.9rem; color:#d93025; margin-top:6px }

/* Fancy radio “chips” */
.radio-group{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:6px 0 2px }
.radio-item{ position:relative; display:inline-flex; align-items:center }
.radio-item input[type=radio]{
  position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.radio-item label{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px; border:2px solid #e0e3ee;
  background:#ffffff; color:#5e5e88; font-weight:700; letter-spacing:.2px;
  box-shadow:0 1px 4px rgba(196,199,226,.2);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.radio-item label::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid #b9bfe6; box-shadow: inset 0 0 0 0 var(--primary-2);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.radio-item:hover label{
  transform:translateY(-1px); box-shadow:0 8px 18px rgba(118,75,162,.16); border-color:#d9ddf2;
}
.radio-item:active label{
  transform:translateY(0); box-shadow:0 4px 10px rgba(118,75,162,.14);
}
.radio-item input[type=radio]:checked + label{
  background:linear-gradient(135deg,var(--primary-1),var(--accent));
  color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(118,75,162,.25);
}
.radio-item input[type=radio]:checked + label::before{
  border-color:#fff; box-shadow: inset 0 0 0 7px #fff;
}
.radio-item input[type=radio]:focus-visible + label{
  outline:3px solid rgba(102,126,234,.35); outline-offset:2px;
}
.radio-item input[type=radio]:disabled + label{ opacity:.6; cursor:not-allowed; filter:grayscale(.1) }

.indoor-outdoor-row{ margin-bottom:24px }
.special-access-spacer{ margin-bottom:24px }
.access-details{ display:none; margin-top:12px }

/* Photos grid */
.photos-grid{ display:grid; gap:18px }
@media (min-width:900px){ .photos-grid{ grid-template-columns:1fr 1fr } }
.file-upload-boxes{ display:flex; flex-direction:column; gap:8px }
.file-upload{
  display:flex; align-items:center; gap:12px; background:#f7f8fb; border-radius:8px; padding:10px 12px; flex-wrap:wrap
}
.file-upload label{ cursor:pointer; display:flex; align-items:center; gap:8px; font-weight:500; color:#5e5e88 }
.camera-icon{ width:24px; height:24px; fill:var(--primary-2) }
.file-upload-thumb{
  display:none; width:44px; height:44px; object-fit:cover; border-radius:6px; box-shadow:0 1px 7px #764ba225; background:#f7f8fb
}
.max-size{ font-size:11px; color:#7676a2; margin-left:auto; white-space:nowrap; padding-right:4px }
@media (max-width:480px){ .max-size{ width:100%; text-align:right; margin-top:4px; padding-right:2px } }

.budget-caption{ margin:.35rem 0 0; color:#886faf; font-size:.95rem }
.form-section.photos-section{ margin-top:22px }

@media (max-width:740px){
  .quote-form{ padding:18px 3vw; width:99vw }
  .form-row{ flex-direction:column; gap:var(--form-gap); margin-bottom:8px }
  .form-row.compact{ gap:var(--compact-gap); margin-bottom:4px }
  .btn.block-on-mobile{ width:auto }
  @media (max-width:640px){ .btn.block-on-mobile{ width:100%; display:block } }
}

/* =========================================
   MODAL
   ========================================= */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(10,12,20,.45); backdrop-filter: blur(6px);
  z-index:2000; padding:env(safe-area-inset-top) 16px 16px;
}
.modal.open{ display:flex }
.modal-card{
  background:#fff; border-radius:16px; max-width:620px; width:100%;
  max-height:82vh; overflow:auto; box-shadow:0 18px 40px rgba(0,0,0,.28);
  border:1px solid rgba(118,75,162,.12);
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px;
  background:linear-gradient(135deg, #f5f1ff, #ffeaf2);
  border-top-left-radius:16px; border-top-right-radius:16px;
  border-bottom:1px solid rgba(118,75,162,.12);
}
.modal-title{ font-weight:800; color:#533a88; letter-spacing:.2px; display:flex; align-items:center; gap:8px }
.modal-title::before{ content:"✨"; font-size:1.1em }
.close-modal{
  background:#fff; border:1px solid rgba(118,75,162,.2);
  width:40px; height:40px; border-radius:999px; color:#6b60b1;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 2px 10px rgba(118,75,162,.18);
  transition: box-shadow .25s, transform .2s;
}
.close-modal:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(118,75,162,.28) }
.modal-body{ white-space:pre-wrap; font-size:1rem; color:var(--text); padding:16px 18px }
.modal-actions{
  display:flex; gap:12px; margin:10px 18px 16px; justify-content:flex-end; flex-wrap:wrap;
}
.modal-actions .btn{ min-width:160px; height:48px }
@media (max-width:520px){
  .modal-actions{ justify-content:center }
  .modal-actions .btn{ min-width:46%; max-width:100% }
}

/* Thumbnails in modal */
.modal-gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr));
  gap:10px; margin-top:8px;
}
.modal-gallery img{
  width:100%; height:80px; object-fit:cover; border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,.12)
}

/* =========================================
   BUTTONS
   ========================================= */
.btn{
  display:inline-block; border:0; border-radius:12px; padding:12px 18px; cursor:pointer;
  font-weight:800; letter-spacing:.2px; transition:transform .2s ease, box-shadow .25s ease
}
.btn:focus-visible{ outline:3px solid rgba(102,126,234,.35); outline-offset:2px }
.btn-primary{
  position:relative; background:linear-gradient(135deg,var(--primary-1),var(--accent)); color:#fff; box-shadow:0 8px 20px rgba(102,126,234,.25);
  overflow:hidden;
}
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 20%, transparent 40%);
  transform: translateX(-100%); transition: transform .6s ease; pointer-events:none; z-index:2;
}
.btn-primary:hover::after{ transform: translateX(100%) }
.btn-primary:hover{ box-shadow:0 12px 26px rgba(102,126,234,.32); transform: translateY(-1px) }
.btn-outline{
  position:relative; background:#fff; color:#5a4fb0; border:2px solid transparent; border-radius:12px; padding:12px 18px;
  overflow:hidden;
}
.btn-outline::before{
  content:""; position:absolute; inset:0; border-radius:12px; padding:2px;
  background:linear-gradient(135deg,var(--primary-1),var(--accent));
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition: box-shadow .25s ease, transform .2s ease; z-index:1;
}
.btn-outline::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(102,126,234,.2) 20%, transparent 40%);
  transform: translateX(-100%); transition: transform .6s ease; z-index:2; pointer-events:none;
}
.btn-outline:hover{ transform: translateY(-1px) }
.btn-outline:hover::before{ box-shadow: 0 10px 22px rgba(118,75,162,.25) }
.btn-outline:hover::after{ transform: translateX(100%) }

/* Make Preview + Submit equal width */
.form-actions{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:stretch;
}
.form-actions .btn{ width:100%; white-space:nowrap; height:48px }
@media (max-width:520px){ .form-actions{ grid-template-columns: 1fr } }

/* =========================================
   BACK-TO-TOP
   ========================================= */
.to-top{
  position:fixed;
  left:calc(env(safe-area-inset-left, 0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index:1200;
  width:48px; height:48px; border-radius:999px;
  border:1px solid rgba(118,75,162,.22);
  background:linear-gradient(135deg,var(--primary-1),var(--accent));
  color:#fff; font-size:20px; line-height:1; display:grid; place-items:center;
  box-shadow:0 10px 22px rgba(118,75,162,.25);
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.to-top::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 20%, transparent 40%);
  transform: translateX(-100%); transition: transform .6s ease; pointer-events:none;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0) }
.to-top:hover{ box-shadow:0 14px 28px rgba(118,75,162,.32); transform:translateY(-1px) }
.to-top:hover::after{ transform: translateX(100%) }
.to-top:focus-visible{ outline:3px solid rgba(102,126,234,.35); outline-offset:2px }
@media (max-width:420px){ .to-top{ width:44px; height:44px; font-size:18px } }

/* =========================================
   SCREEN READER ONLY
   ========================================= */
.sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* =========================================
   FOOTER
   ========================================= */
.footer{ background:#2c3e50; color:#fff; padding:35px 0 22px }
.footer-content{
  max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:30px;
}
.footer-section h3{ margin-bottom:10px; color:#f3deff }
.footer-section p, .footer-section a{
  color:#bdc3c7; text-decoration:none; line-height:1.7; font-size:.97rem;
}
.footer-section a:hover{ color:#fff }
.footer-bottom{ text-align:center; margin-top:20px; color:#95a5a6; font-size:.91rem }

/* Footer bottom nav links: ensure strong contrast and readability */
.footer-bottom a{
  color:#e6efff; /* high-contrast light blue on dark footer */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-bottom a:visited{ color:#d6e1ff }
.footer-bottom a:hover{ color:#ffffff }

/* Footer Read More toggle */
.footer .read-more-toggle{
  background: none; border: 0; color: #bdc3c7; font: inherit; cursor: pointer;
  text-decoration: underline; display: inline-flex; align-items: center; gap: 4px;
  padding: 0 2px; border-radius: 6px;
}
.footer .read-more-toggle:hover{ color:#fff; text-decoration: none }
.footer .read-more-toggle .chev{ display:inline-block; transition: transform .2s ease }
.footer .read-more-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg) }
.footer .footer-more[hidden]{ display:none }

/* Footer: compact layout on small screens */
@media (max-width: 600px){
  .footer{ padding: 20px 0 12px; }
  .footer-content{ gap: 12px; padding: 0 14px; }
  .footer-section h3{ font-size: 1rem; margin-bottom: 6px; }
  .footer-section p, .footer-section a{ font-size: .93rem; line-height: 1.45; }
  .footer-section p{ margin: 2px 0; }
  .footer-bottom{ margin-top: 12px; font-size: .82rem; padding: 0 14px; }

  /* Keep phone/email on one line when possible */
  /* Keep phone on one line if possible; allow email to wrap naturally */
  .footer .footer-section a[href^="tel"]{ white-space: nowrap; }
  .footer .footer-section a[href^="mailto"]{ white-space: normal; }

  /* Hanging indent for Contact lines so wraps align under the text, not emoji */
  .footer .footer-content .footer-section:nth-child(3) p{
    padding-left: 1.6em;
    text-indent: -1.6em;
  }

  /* Force phone/email line (with icon) to stay on one line and ellipsize if too long */
  /* Email should never truncate; let it wrap with hanging indent */
  .footer .footer-content .footer-section:nth-child(3) p:has(a[href^="mailto"]) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Extra-small: split Services links into two columns to reduce scroll */
@media (max-width: 420px){
  .footer-content .footer-section:nth-child(2){
    column-count: 2; column-gap: 12px;
  }
  .footer-content .footer-section:nth-child(2) p{ break-inside: avoid; }

  /* Slightly smaller type on extra-small screens */
  .footer-section h3{ font-size: .95rem; }
  .footer-section p, .footer-section a{ font-size: .9rem; }
}

/* Mobile-only: make Services and Contact collapsible dropdowns */
@media (max-width: 600px){
  /* Headers become toggles */
  .footer .footer-content .footer-section:nth-child(2) h3,
  .footer .footer-content .footer-section:nth-child(3) h3{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  }
  .footer .footer-content .footer-section:nth-child(2) h3::after,
  .footer .footer-content .footer-section:nth-child(3) h3::after{
    content:"▾"; font-size:.9rem; opacity:.8; transition: transform .2s ease;
  }

  /* Collapse content by default */
  .footer .footer-content .footer-section:nth-child(2) p,
  .footer .footer-content .footer-section:nth-child(3) p{ display:none; }

  /* Expanded state */
  .footer .footer-content .footer-section:nth-child(2).is-open p,
  .footer .footer-content .footer-section:nth-child(3).is-open p{ display:block; }
  .footer .footer-content .footer-section:nth-child(2).is-open h3::after,
  .footer .footer-content .footer-section:nth-child(3).is-open h3::after{ transform: rotate(180deg); }
}

/* Mobile: place Explore links after the image scroller on gallery pages */
@media (max-width: 600px){
  .gallery-wrap{ display:flex; flex-direction:column; }
  .gallery-wrap .gallery-filters{ order: 1; }
  .gallery-wrap .gallery-grid{ order: 2; }
  .gallery-wrap .related-services{ order: 3; margin-top: 6px; }
}

/* (Removed shimmer on links by request) */
/* =========================================
   FAQ PAGE POLISH
   ========================================= */
/* Decorative intro card */
section[aria-label="FAQ"] .faq-hero{
  max-width: 1000px;
  margin: 8px auto 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff7fb, #f2f1ff);
  border: 1px solid rgba(118,75,162,.12);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
}
section[aria-label="FAQ"] .faq-icon{
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg,#ffeaa7,#ffd86f);
  color:#533a88; font-size: 28px; box-shadow: 0 6px 16px rgba(118,75,162,.12);
}
section[aria-label="FAQ"] .faq-title{ margin: 0; color: var(--primary-2); font-weight: 800; font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem) }
section[aria-label="FAQ"] .faq-sub{ margin: 4px 0 0; color: #5a5786; font-size: .98rem }

/* Make the list breathe and stand on its own */
section[aria-label="FAQ"] .garland-groupboxes{
  max-width: 1000px; margin: 0 auto; border: 1px solid rgba(118,75,162,.10);
  border-radius: 16px; background:#fff; box-shadow: var(--card-shadow);
  padding: 8px 10px; /* inner padding around items */
}
section[aria-label="FAQ"] .groupbox{
  background:#fff;
  border:1px solid rgba(118,75,162,.18);
  border-radius:12px;
  margin:10px 6px;
  box-shadow: 0 6px 16px rgba(118,75,162,.08);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
section[aria-label="FAQ"] .groupbox:hover{ box-shadow: 0 10px 22px rgba(118,75,162,.12) }
section[aria-label="FAQ"] .groupbox.open{ border-color: var(--accent); background: linear-gradient(180deg, #ffffff, #fff8fb) }

section[aria-label="FAQ"] .groupbox-header{
  background: linear-gradient(135deg, #f6f4ff, #fff7fb);
  border-bottom: 1px solid rgba(118,75,162,.10);
  color:#3a3a6a;
}

/* Smooth expand/collapse in FAQ (override the global display rule) */
section[aria-label="FAQ"] .groupbox-content{
  display:block !important; /* cancel global display:none */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .25s ease, opacity .18s ease, padding-top .18s ease;
  padding-top: 0;
}
section[aria-label="FAQ"] .groupbox.open > .groupbox-content{
  max-height: 300px; /* ample for single-paragraph answers */
  opacity: 1;
  padding-top: 6px;
}

@media (prefers-color-scheme: dark){
  section[aria-label="FAQ"] .faq-hero{ background: linear-gradient(135deg,#1a1f3a,#0f1326); border-color: rgba(255,255,255,.08) }
  section[aria-label="FAQ"] .faq-icon{ background: linear-gradient(135deg,#6f5cff,#b388ff); color:#fff }
  section[aria-label="FAQ"] .faq-sub{ color:#cfd3f3 }
  section[aria-label="FAQ"] .garland-groupboxes{ background:#141a2d; border-color: rgba(255,255,255,.08) }
  section[aria-label="FAQ"] .groupbox{ background:#141a2d; border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(0,0,0,.35) }
  section[aria-label="FAQ"] .groupbox.open{ background: linear-gradient(180deg, #141a2d, #181f38); border-color:#bfc7ff }
  section[aria-label="FAQ"] .groupbox-header{ background: linear-gradient(135deg,#181e34,#12172b); border-bottom-color: rgba(255,255,255,.08); color:#e8e9f3 }
}

/* =========================================
   UNDER CONSTRUCTION BANNER
   ========================================= */
.uc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1500;
  background:linear-gradient(135deg,#fff7fb,#f2f1ff);
  border-top:1px solid rgba(118,75,162,.18);
  box-shadow:0 -8px 22px rgba(0,0,0,.08);
  transform:translateY(0); transition:transform .28s ease;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}
.uc-banner.is-hidden{ transform:translateY(110%) }
.uc-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:10px 16px }
.uc-emoji{ font-size:1.25rem }
.uc-text{ flex:1; color:#342c63 }
.uc-text strong{ color:#533a88 }
.uc-text a{ color:var(--primary-2); text-decoration:underline }
.uc-close{
  background:#fff; color:#6b60b1; border:1px solid rgba(118,75,162,.25);
  width:32px; height:32px; border-radius:999px; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(118,75,162,.18);
}
.uc-close:hover{ transform:translateY(-1px) }
body.has-uc .to-top{ bottom:calc(env(safe-area-inset-bottom, 0px) + 84px) }
@media (max-width:560px){ .uc-inner{ align-items:flex-start } .uc-close{ margin-top:2px } }

/* =========================================
   PRESS / FEATURED ARTICLE (simple card)
   ========================================= */
.press-feature { max-width: 1100px; margin: 24px auto 48px; padding: 0 20px }
.press-card{
  display:grid; grid-template-columns: 72px 1fr; gap:16px;
  background:#fff; border-radius:16px; box-shadow: var(--card-shadow);
  border:1px solid rgba(118,75,162,.12); padding:18px;
}
.press-logo{
  width:64px; height:64px; border-radius:12px; object-fit:cover;
  box-shadow:0 6px 16px rgba(118,75,162,.12); background:#fff;
}
.press-body{ display:flex; flex-direction:column; gap:8px }
.press-title{ margin:0; font-size:1.25rem; color:var(--primary-2); font-weight:800 }
.press-source{ margin:0; color:#7a769a; font-size:.95rem }
.press-excerpt{ margin:4px 0 8px; color:#444; line-height:1.6 }
.press-quote{
  margin:6px 0 10px; padding:10px 14px; border-left:4px solid var(--accent);
  background:linear-gradient(135deg,#f5f1ff, #ffeaf2); border-radius:10px;
}
.press-quote blockquote{ margin:0; font-weight:700; color:#533a88 }
.press-quote figcaption{ margin-top:6px; font-size:.9rem; color:#6d6a90 }
@media (max-width:600px){
  .press-card{ grid-template-columns: 1fr }
  .press-logo{ justify-self:center }
}

/* =========================================
   PRESS SPOTLIGHT (hero-style)
   ========================================= */
.press-spotlight{
  background: linear-gradient(135deg,#fff4f8,#f5f1ff);
  padding: 36px 0 54px; border-top: 1px solid rgba(118,75,162,.08);
}
.press-wrap{ max-width:1100px; margin:0 auto; padding:0 20px }
.press-card-pro{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:24px; align-items:stretch;
}
@media (max-width:900px){ .press-card-pro{ grid-template-columns:1fr } }

.press-cover{
  position:relative; border-radius:18px; overflow:hidden; min-height:320px;
  box-shadow: var(--card-shadow);
  background: radial-gradient(1200px 400px at 0% 100%, #ffeaf2 0%, #f5f1ff 60%, #ffffff 100%);
}
.press-cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05) contrast(1.03);
}
.press-cover::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.08));
}
.press-badge{
  position:absolute; left:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.85);
  padding:8px 12px; border-radius:999px; backdrop-filter: blur(6px);
  color:#3d3966; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.press-body-pro{
  background:#fff; border-radius:18px; border:1px solid rgba(118,75,162,.12);
  box-shadow: var(--card-shadow); padding:22px 22px 20px;
  display:flex; flex-direction:column; gap:10px;
}
.press-title{ margin:2px 0 2px; color: var(--primary-2); font-size:clamp(1.35rem, 1.1rem + 1vw, 1.7rem); font-weight:800; letter-spacing:.2px }
.press-meta{ margin:0 0 6px; color:#6a6790; font-size:.96rem }
.press-excerpt{ color:#48456a; line-height:1.65; margin:2px 0 6px }
.press-quote-pro{
  margin:8px 0 10px; padding:10px 12px; border-left:4px solid var(--accent);
  background: linear-gradient(90deg, #fff7fb, transparent); border-radius:10px;
  color:#3d3966; font-style:italic;
}
.press-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }

/* =========================================
   DARK MODE (auto)
   ========================================= */
@media (prefers-color-scheme: dark){
  body{ background:#0f1220; color:#e8e9f3 }

  .header{ background:linear-gradient(135deg,#4956d9,#5c3b7f) }
  .nav-menu{ background:transparent; color:#e8e9f3 }
  .nav-menu a, .nav-toggle{ color:#e8e9f3 }

  /* Dropdown in dark */
  .dropdown{ background:#161a2b; box-shadow:0 16px 34px rgba(0,0,0,.45) }
  .dropdown li > a{ color:#e8e9f3 !important }
  .dropdown li > a:hover, .dropdown li > a:focus{ background:#1d2340; color:#bfc7ff !important }

  /* Drawer only when open */
  @media (max-width:900px){
    body.nav-open .nav-menu{ background:#0f1326 }
    .nav-menu > li > a{ color:#e8e9f3 }
    .quote-link{ color:#e8e9f3 }
    .nav-intro{
      background:linear-gradient(135deg,#1a1f3a,#0f1326);
      color:#dbe2ff; border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav-intro .brandline{ color:#cdd3ff }
  }

  .hero-content h1, .hero-content p{ color:#fff !important; text-shadow:0 2px 8px rgba(0,0,0,.35) }

  .garland-card, .themed-card, .quote-form, .review-card,
  .gg-card, .press-card, .press-body-pro{
    background:#141a2d; border-color:rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.35); color:#e8e9f3;
  }
  .section-title{ color:#eef0ff }
  .category-desc, .gg-body, .review-desc, .press-excerpt{ color:#cfd3f3 }

  .groupbox{ background:#0f1528; border-color:#2a3355 }
  .groupbox-header{
    background:#121a34; border-bottom-color:#2a3355; color:#e8e9f3;
  }
  .groupbox-toggle{ color:#bfc7ff }
  .groupbox-content{ background:#12172e; color:#dee2ff }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="tel"],
  .form-group input[type="date"],
  .form-group input[type="time"],
  .form-group input[type="number"],
  .form-group textarea{
    background:#0f1528; color:#eef0ff; border-color:#2a3355; box-shadow:none;
  }
  .form-group input:focus, .form-group textarea:focus{
    border-color:#7683ff; box-shadow:0 0 0 3px rgba(118,131,255,.2)
  }
  .field-error{ color:#ff8f8f }

  .radio-item label{
    background:#11172b; border-color:#2a3355; color:#cbd2ff;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
  }
  .radio-item label::before{ border-color:#8b94d1 }

  .modal{ background:rgba(10,12,20,.55) }
  .modal-card{ background:#151a2e; border-color:rgba(255,255,255,.08); color:#e9ebff }
  .modal-header{
    background:linear-gradient(135deg,#282d4a,#3a2f54);
    border-bottom-color:rgba(255,255,255,.08);
  }
  .modal-body{ color:#e9ebff }

  .footer{ background:#0b0f1c; color:#d5d8f6 }
  .footer-section a{ color:#aeb3df }
  .footer-section a:hover{ color:#fff }

  .uc-banner{
    background:linear-gradient(135deg,#171c33,#1a1f3a);
    border-top-color:rgba(255,255,255,.08);
    box-shadow:0 -8px 22px rgba(0,0,0,.25);
  }
  .uc-text{ color:#d0d4ff }

  .press-spotlight{ background:linear-gradient(135deg,#0f1220,#12162a); border-top-color:rgba(255,255,255,.08) }
  .press-cover::after{ background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.15)) }
  .press-badge{ background: rgba(22,26,43,.85); color:#e8e9f3 }
  
  /* Fix quote box readability in dark mode */
  .press-quote-pro{
    background: linear-gradient(90deg, rgba(118,75,162,.15), rgba(102,126,234,.08));
    color:#e8e9f3;
    border-left-color:#bfc7ff;
  }
}

/* Accent border for Grab & Go */
#grab-go .gg-card{
  border: 3px solid var(--accent);
  box-shadow: 0 16px 32px #ff6b9d38, 0 14px 40px rgba(118,75,162,.12);
}
#grab-go .gg-card:hover{
  transform: translateY(-1px);
  transition: transform .2s ease, box-shadow .25s ease;
}

/* Improve text + placeholder contrast in the textarea */
#vision { color: #2b2b5a; }
#vision::placeholder { color: #8b88b8; }
@media (prefers-color-scheme: dark){
  #vision { color: #ecebff; background:#121229; border-color:#2b2b60; }
  #vision::placeholder { color:#9b97d6; }
}

/* Mobile drawer background in light */
@media (max-width: 900px){
  .nav-menu { background: #fff; }
}
/* Mobile drawer background in dark */
@media (prefers-color-scheme: dark) and (max-width: 900px){
  .nav-menu { background: #141428; }
  .nav-menu a, .nav-toggle { color: #ecebff; }
  .nav-menu li { border-bottom-color: #272753; }
}


/* === PATCHES (safe, additive) ========================================= */

/* 1) Desktop grid padding so 4-up breathes; keep your grid behavior */
.category-row { padding: 0 20px; }

/* 2) Make all primary images responsive (prevents mobile stretching/cropping) */
.themed-card-img,
.garland-card .themed-card-img{
  height:auto !important;
  aspect-ratio: 16/9;
}

/* ================================
   PATCH OVERRIDES — DO NOT REMOVE
   ================================ */

/* Ensure cards don't clip expanded strips, and add breathing room */
.themed-card { overflow: visible; }
.themed-card.expanded { padding-bottom: 8px; }

/* Keep titles readable in both schemes */
.themed-card-title { color: var(--primary-2); }
.category-desc { color: #555; }
@media (prefers-color-scheme: dark){
  .themed-card-title { color: #cfd3ff; }
  .category-desc { color: #cfd3f3; }
}

/* Make hero/category images responsive */
.themed-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;        /* maintains shape across viewports */
  object-fit: cover;
}

/* Mini-gallery strip: never cut off thumbnails */
.mini-gallery { padding-bottom: 6px; }
.mini-thumb { pointer-events: auto; } /* be explicit */
.mini-thumb img { display: block; }

/* Desktop: 4-up grid is already defined, keep it tight */
@media (min-width: 901px){
  .category-row { grid-template-columns: repeat(4, 1fr); }
}

/* Mobile: single row, swipe between categories */
@media (max-width: 900px){
  .category-row{
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 0 16px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .category-row .themed-card{
    min-width: 86vw;          /* big, tappable tiles */
    scroll-snap-align: center;
  }
}

/* Prevent body scroll when lightbox is open */
.no-scroll { overflow: hidden; }

/* --- Lightbox layout (keeps CTA clear of the close button) --- */
.lb-root{
  position: fixed; inset: 0; display: none;
  z-index: 2005;
}
.lb-root.open{ display: block; }
.lb-backdrop{
  position: absolute; inset: 0;
  background: rgba(10,12,20,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.lb-frame{
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  padding: 56px 56px 96px; /* bottom space for CTA */
}
.lb-img{
  max-width: min(92vw, 1200px);
  max-height: min(78vh, 820px);
  width: auto; height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  background: #000;
}
.lb-close,.lb-prev,.lb-next{
  position: absolute;
  width: 52px; height: 52px; border: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  background: #ffffff; color:#1b1e34; font-size: 24px; line-height: 1;
}
.lb-close{ top: 16px; right: 16px; z-index: 2; }
.lb-prev{ left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next{ right: 16px; top: 50%; transform: translateY(-50%); }

@media (prefers-color-scheme: dark){
  .lb-close,.lb-prev,.lb-next{
    background:#151a2e; color:#e9ebff;
    box-shadow:0 10px 24px rgba(0,0,0,.55);
  }
}

/* CTA bar sits below the image, not under the close button */
.lb-cta{
  position: absolute;
  left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
  background: rgba(255,255,255,.92);
  padding: 10px 14px; border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  width: min(92vw, 420px);
}
.lb-cta-title{ 
  /*color: #3d3966; */
  color: #fff; 
  font-weight: 800; 
  white-space: nowrap;
}
.lb-seeall{ text-decoration: none; }

/* Dark mode adjustments for lightbox CTA */
@media (prefers-color-scheme: dark){
  .lb-cta{ background: rgba(22,26,43,.92); }
  .lb-cta-title{ color: #e8e9f3 !important; }
}

/* A bit more space beneath mini galleries so the strip doesn't look clipped */
.themed-card.expanded .mini-gallery { margin-bottom: 6px; }

/* --- Mini-gallery arrows: show and position --- */
.strip-nav{ display:flex !important; } /* overrides the old rule that hid them */

.mini-gallery{
  position: relative; /* anchor for arrows */
  padding-bottom: 8px;
}

/* Shared arrow styles */
.strip-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  z-index:3; /* above thumbs */
  background:#fff; color:#1b1e34; font-size:20px; line-height:1;
}
.strip-btn:focus-visible{ outline:3px solid rgba(102,126,234,.35); outline-offset:2px }
.strip-btn[disabled]{ opacity:.35; cursor:default; box-shadow:none }

.strip-btn.prev{ left:6px }
.strip-btn.next{ right:6px }

/* Dark mode */
@media (prefers-color-scheme: dark){
  .strip-btn{ background:#151a2e; color:#e9ebff; box-shadow:0 10px 24px rgba(0,0,0,.55) }
}

/* Hide arrows on small screens (swipe instead) */
@media (max-width: 900px){
  .strip-btn{ display:none }
}

/* ===== PATCH: Event categories & mini-gallery ===== */

/* 4-per-row on desktop, with resilient columns */
.category-row{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Uniform main images and better responsiveness */
.themed-card-img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;         /* keeps consistent card heights */
  object-fit: cover;
}

/* Make titles/descriptions visible in both modes */
.themed-card-title{ color: var(--primary-2); }
@media (prefers-color-scheme: dark){
  .themed-card-title{ color: #e9ebff; }
  .category-desc{ color:#cfd3f3; }
}

/* Mini-gallery: spacing above scrollbar + subtle divider */
.mini-gallery{
  margin-top: 8px;
  padding: 8px 0 12px;          /* space above track so it doesn't touch thumbs */
  border-top: 1px solid rgba(118,75,162,.10);
}
@media (prefers-color-scheme: dark){
  .mini-gallery{ border-top-color: rgba(255,255,255,.08); }
}

/* Smaller thumbs on mobile; always same shape */
.mini-thumb{
  aspect-ratio: 4 / 3;
  width: 140px;                 /* desktop thumb size */
  height: auto;
}
.mini-thumb img{ object-fit: cover; }

/* Mobile thumb sizing was huge; make them clearly smaller than the hero image */
@media (max-width: 900px){
  .mini-thumb{
    width: 56vw;                /* swipe-friendly but not giant */
    max-width: 240px;
  }
}



/* Lightbox controls placement so "See all" is never blocked by X */
#galleryLightbox .lb-frame{ position: relative; }
#galleryLightbox .lb-close{ position:absolute; top:14px; right:14px; z-index: 5 !important; }
#galleryLightbox .lb-prev{ position:absolute; left:14px; top:50%; transform:translateY(-50%); z-index:4 !important; }
#galleryLightbox .lb-next{ position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:4 !important; }
#galleryLightbox .lb-cta{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:3; pointer-events:auto;
}

/* Make the category grid truly 2/3/4 responsive (in case older rules are overriding) */
@media (max-width:1200px){ .category-row{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){  .category-row{ grid-template-columns:repeat(1, minmax(0,1fr)); } } /* one per row; user swipes mini-strip */

/* === Mini-gallery: spacing + consistent thumbnail size === */
.themed-card .mini-gallery{
  padding: 8px 8px 14px;              /* space above the scrollbar */
  gap: 12px;
  overscroll-behavior-x: contain;     /* don't fling-scroll the page */
  touch-action: pan-x;                 /* only horizontal panning */
}

/* keep both hero images and thumbs responsive/cropped consistently */
.themed-card .themed-card-img,
.themed-card .mini-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* thumbs: desktop = smaller; mobile = not huge */
.themed-card .mini-thumb{
  aspect-ratio: 4 / 3;
  height: auto;                        /* governed by aspect ratio */
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 901px){
  .themed-card .mini-thumb{ width: 150px; }
}
@media (max-width: 900px){
  .themed-card .mini-thumb{ width: 44vw; max-width: 280px; } /* ~2 per view */
}

/* === Lightbox: freeze background & avoid CTA overlap === */
body.no-scroll{
  position: fixed;                     /* hard lock (iOS-friendly) */
  inset: 0;
  width: 100%;
  overflow: hidden;
}

/* make room for the fixed CTA so it doesn't sit on the image */
#galleryLightbox .lb-img{
  max-height: calc(100vh - 180px);
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  background: #fff;
}

/* CTA fixed at the bottom (never overlaps image) */
#galleryLightbox .lb-cta{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  margin: 0;
  padding: 14px 24px;
  background: rgba(16,18,30,.9);
  color: #e9ebff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  z-index: 3001;
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}
#galleryLightbox .lb-cta .lb-cta-title{ 
  font-weight: 800; 
  margin: 0;
  font-size: 0.95rem;
}

/* keep controls above everything and away from the image/CTA */
#galleryLightbox .lb-close,
#galleryLightbox .lb-prev,
#galleryLightbox .lb-next{
  position: fixed !important;
  z-index: 3002 !important;
}
#galleryLightbox .lb-close{ top: 20px; right: 20px; }
#galleryLightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
#galleryLightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* --- Mini-gallery: compact, single-row, and spaced from scrollbar --- */
.themed-card .mini-gallery{
  display: flex;                /* force single row */
  align-items: stretch;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px 16px;      /* extra bottom = room above scrollbar */
  overscroll-behavior: contain; /* don't move page when swiping */
  touch-action: pan-x;          /* only horizontal panning */
}

/* Consistent thumb sizing (no huge tiles on mobile) */
.themed-card .mini-thumb{
  flex: 0 0 auto;
  width: 128px;                 /* desktop default */
  height: 96px;                 /* 4:3 look */
  border-radius: 12px;
  overflow: hidden;
  background:#f0f2fb;
}
.themed-card .mini-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Smaller thumbs on narrow screens */
@media (max-width: 900px){
  .themed-card .mini-thumb{
    width: 44vw;                /* ~2 per view, swipe for more */
    max-width: 240px;
    height: calc(44vw * 0.75);  /* keep ~4:3 ratio */
    max-height: 180px;
  }
}

/* Give the strip a tiny footer so the scrollbar never hugs the card edge */
.themed-card.expanded .mini-gallery{ margin-bottom: 4px; }

/* Hide any leftover slider/arrow UI a library might inject into the strip */
.themed-card .mini-gallery .strip-nav,
.themed-card .mini-gallery .strip-btn,
.themed-card .mini-gallery .slick-arrow,
.themed-card .mini-gallery .swiper-button-prev,
.themed-card .mini-gallery .swiper-button-next,
.themed-card .mini-gallery .glider-prev,
.themed-card .mini-gallery .glider-next,
.themed-card .mini-gallery .carousel-control-prev,
.themed-card .mini-gallery .carousel-control-next{
  display: none !important;
}

/* Lightbox: keep image clear of CTA and lock the background hard */
body.no-scroll{
  position: fixed; inset: 0; width: 100%; overflow: hidden;
}
#galleryLightbox .lb-img{
  display:block; margin:0 auto;
  max-height: calc(100vh - 180px); /* leave room for fixed CTA */
  border-radius:14px; background:#fff;
}
/* Fixed CTA at bottom so it never overlaps the image */
#galleryLightbox .lb-cta{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  margin:0; padding:14px 18px; text-align:center;
  background: rgba(16,18,30,.9); color:#e9ebff;
  border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.35); z-index: 3001;
}
#galleryLightbox .lb-cta .lb-cta-title{ font-weight:800; margin-bottom:8px; }

/* Keep lightbox controls above content and off the image edges */
#galleryLightbox .lb-close,
#galleryLightbox .lb-prev,
#galleryLightbox .lb-next{
  position: fixed !important; z-index: 3002 !important;
}
#galleryLightbox .lb-close{ top:20px; right:20px; }
#galleryLightbox .lb-prev { left:20px; top:50%; transform:translateY(-50%); }
#galleryLightbox .lb-next { right:20px; top:50%; transform:translateY(-50%); }

/* ---------- MINI-GALLERY FIX PACK (non-destructive overrides) ---------- */

/* A. Desktop: keep 4 cards per row, always */
@media (min-width: 1100px){
  .category-row{ grid-template-columns: repeat(4, 1fr) !important; }
}

/* B. Mini-gallery spacing + one single row that doesn't move the page */
.themed-card .mini-gallery{
  display:flex !important;
  align-items:stretch;
  gap:12px;
  margin-top:10px;
  padding:10px 12px 22px !important; /* extra bottom so scrollbar never hugs the edge */
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  overscroll-behavior: contain; /* don't fling the page */
  touch-action: pan-x;          /* only horizontal panning inside the strip */
}

/* C. Thumb sizing (beat old 70vw rule) */
.themed-card .mini-thumb{
  flex:0 0 auto;
  width:128px !important;         /* desktop size */
  height:96px !important;
  border-radius:12px;
  overflow:hidden;
  background:#f0f2fb;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  scroll-snap-align:start;
}
.themed-card .mini-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* D. Mobile: smaller thumbs – NOT as big as the hero image */
@media (max-width: 900px){
  .themed-card .mini-thumb{
    width:42vw !important;        /* ~2 visible at a time */
    max-width:210px !important;
    height: calc(42vw * 0.75) !important; /* ~4:3 look */
    max-height:160px !important;
  }
}

/* E. See-all tile: match your gradient button look */
.themed-card .mini-thumb.see-all{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary-1), var(--accent)) !important;
  color:#fff !important; font-weight:800; font-size:.95rem;
  box-shadow:0 8px 20px rgba(102,126,234,.25);
  border:0;
}
.themed-card .mini-thumb.see-all span{ pointer-events:none; }

/* F. Give the strip a tiny footer so the OS scrollbar never overlaps content */
.themed-card.expanded .mini-gallery{ margin-bottom:6px !important; }

/* G. Hide any library arrows that might be injecting itself into the strip */
.themed-card .mini-gallery .strip-nav,
.themed-card .mini-gallery .strip-btn,
.themed-card .mini-gallery .slick-arrow,
.themed-card .mini-gallery .swiper-button-prev,
.themed-card .mini-gallery .swiper-button-next,
.themed-card .mini-gallery .glider-prev,
.themed-card .mini-gallery .glider-next,
.themed-card .mini-gallery .carousel-control-prev,
.themed-card .mini-gallery .carousel-control-next{
  display:none !important;
}

/* ---------- LIGHTBOX REFINEMENTS ---------- */

/* Hard lock the background (works on iOS/Android/Desktop) */
body.no-scroll{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Keep image clear of CTA */
#galleryLightbox .lb-img{
  display:block; margin:0 auto;
  max-height: calc(100vh - 180px) !important; /* leave room for CTA/controls */
  border-radius:14px; background:#fff;
}

/* Fixed CTA so it never covers the image */
#galleryLightbox .lb-cta{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  margin:0; padding:14px 18px; text-align:center;
  background: rgba(16,18,30,.9);
  color:#e9ebff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  z-index: 3001;
}
#galleryLightbox .lb-cta .lb-cta-title{ font-weight:800; margin-bottom:8px; margin-top: 15px; }

/* Keep buttons off the image and above everything */
#galleryLightbox .lb-close,
#galleryLightbox .lb-prev,
#galleryLightbox .lb-next{
  position: fixed !important;
  z-index: 3002 !important;
}
#galleryLightbox .lb-close{ top:20px; right:20px; }
#galleryLightbox .lb-prev { left:20px; top:50%; transform:translateY(-50%); }
#galleryLightbox .lb-next { right:20px; top:50%; transform:translateY(-50%); }

/* Force 4-per-row on desktop (overrides any earlier grid rules) */
@media (min-width: 901px){
  .category-row{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ===== CATEGORIES: reliable 4-up on desktop ===== */
@media (min-width: 992px){
  /* Increase selector specificity + !important so it wins */
  section[aria-label="Event Categories"] .category-row{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 28px 20px !important;
  }
}

/* ===== MINI-GALLERY strip spacing + sizing ===== */
.themed-card .mini-gallery{
  margin-top: 8px !important;
  padding: 6px 0 14px !important;     /* space above scrollbar */
  scrollbar-gutter: stable both-edges; /* keeps content off the scrollbar */
  touch-action: pan-x;                 /* swipe horizontally only */
}

/* Desktop thumb size (smaller than hero image) */
@media (min-width: 901px){
  .themed-card .mini-thumb{
    width: 120px !important;
    height: 86px !important;
    border-radius: 12px !important;
  }
  .themed-card .mini-thumb img{
    width: 100%; height: 100%; object-fit: cover;
  }
}

/* Mobile thumbs: consistent size, not full-bleed */
@media (max-width: 900px){
  .themed-card .mini-thumb{
    width: 62vw !important;            /* smaller than before */
    aspect-ratio: 4 / 3 !important;    /* uniform */
    height: auto !important;
    max-width: 420px !important;
    border-radius: 14px !important;
  }
  .themed-card .mini-thumb img{ width:100%; height:100%; object-fit:cover; }
}

/* ===== “See all” tile looks like your gradient buttons ===== */
.themed-card .mini-thumb.see-all{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary-1), var(--accent)) !important;
  color:#fff !important; font-weight:800;
  box-shadow: 0 8px 20px rgba(102,126,234,.25);
  border:0;
}
.themed-card .mini-thumb.see-all span{ pointer-events:none }

/* ===== LIGHTBOX: block page interaction + keep CTA off the image ===== */
#galleryLightbox{
  position: fixed; inset:0; z-index: 5000;
  display:none; align-items:center; justify-content:center;
}
#galleryLightbox.open{ display:flex }
#galleryLightbox .lb-backdrop{
  position:absolute; inset:0;
  background: rgba(10,12,20,.55);
  backdrop-filter: blur(4px);
}
#galleryLightbox .lb-frame{
  position:relative; z-index:1;
  max-width: min(92vw, 980px);
  max-height: 84vh;
  display:flex; align-items:center; justify-content:center;
  padding-bottom: 72px; /* room for CTA so it doesn't overlap image */
}
#galleryLightbox .lb-img{
  max-width:100%; max-height:72vh; display:block; border-radius:12px;
}
#galleryLightbox .lb-cta{
  position: fixed;
  left:50%; transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index:2;
  background: rgba(20,22,35,.9);
  color:#fff; padding:12px 16px; border-radius:14px;
  display:flex; gap:12px; align-items:center;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
}
#galleryLightbox .lb-cta .btn{ white-space:nowrap }

/* === MINI-THUMB: force images to scale down and fit the strip === */
/* Scope to the Categories section so nothing else changes */
section[aria-label="Event Categories"] {
  --thumb-h-desktop: 90px;   /* desktop thumb height */
  --thumb-h-mobile: 68px;    /* mobile thumb height  */
}

/* The strip gets breathing room above the scrollbar */
section[aria-label="Event Categories"] .themed-card .mini-gallery{
  margin-top: 8px !important;
  padding: 6px 0 12px !important;
  scrollbar-gutter: stable both-edges;
}

/* Desktop thumb sizing (always smaller than the hero image) */
@media (min-width: 901px){
  section[aria-label="Event Categories"] .themed-card .mini-thumb{
    height: var(--thumb-h-desktop) !important;
    width: calc(var(--thumb-h-desktop) * 4 / 3) !important; /* 4:3 ratio */
    flex: 0 0 auto !important;
    border-radius: 12px !important;
  }
}

/* Mobile thumb sizing (still small and consistent) */
@media (max-width: 900px){
  section[aria-label="Event Categories"] .themed-card .mini-thumb{
    height: var(--thumb-h-mobile) !important;
    width: calc(var(--thumb-h-mobile) * 4 / 3) !important;  /* 4:3 ratio */
    flex: 0 0 auto !important;
    border-radius: 12px !important;
  }
}

/* Make sure the image itself never overflows the thumb */
section[aria-label="Event Categories"] .themed-card .mini-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Expanded state: only grow the strip just enough to reveal the thumbs */
@media (min-width: 901px){
  section[aria-label="Event Categories"] .themed-card.expanded .mini-gallery{
    max-height: calc(var(--thumb-h-desktop) + 26px) !important; /* thumb + padding */
    opacity: 1 !important;
  }
}
@media (max-width: 900px){
  section[aria-label="Event Categories"] .themed-card.expanded .mini-gallery{
    max-height: calc(var(--thumb-h-mobile) + 26px) !important;
    opacity: 1 !important;
  }
}

/* “See all” thumb styled like your gradient buttons */
section[aria-label="Event Categories"] .themed-card .mini-thumb.see-all{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary-1), var(--accent)) !important;
  color:#fff !important; font-weight:800;
  border:0; box-shadow:0 8px 20px rgba(102,126,234,.25);
}
section[aria-label="Event Categories"] .themed-card .mini-thumb.see-all span{
  pointer-events:none;
}

/* Desktop: guarantee 4 categories per row without touching other grids */
@media (min-width: 992px){
  section[aria-label="Event Categories"] .category-row{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
  }
}

/* ==== SCOPED: Event Categories sizing & behavior (safe to append) ==== */
section[aria-label="Event Categories"]{
  --cat-main-ar: 4/3;         /* main image ratio */
  --thumb-h-d: 96px;          /* desktop thumb height */
  --thumb-h-m: 72px;          /* mobile thumb height */
  --thumb-radius: 12px;
  --strip-gap: 10px;
  --strip-pad: 10px;          /* space so scrollbar never kisses the image */
}

/* Keep 4-up on desktop; 3/2/1 at smaller widths */
section[aria-label="Event Categories"] .category-row{
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1200px){
  section[aria-label="Event Categories"] .category-row{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:900px){
  section[aria-label="Event Categories"] .category-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
  section[aria-label="Event Categories"] .category-row{ grid-template-columns: 1fr; }
}

/* Main category image: uniform aspect ratio + cover */
section[aria-label="Event Categories"] .themed-card-img{
  aspect-ratio: var(--cat-main-ar);
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Mini-strip: one row only, with bottom padding so the scrollbar doesn't crowd */
section[aria-label="Event Categories"] .mini-gallery{
  display: flex;
  gap: var(--strip-gap);
  width: 93%;
  margin: 10px auto 14px;
  padding: 0 0 var(--strip-pad);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .28s ease, opacity .28s ease;
}

/* When expanded: reveal exactly one row; horizontal scroll only */
section[aria-label="Event Categories"] .themed-card.expanded .mini-gallery{
  max-height: calc(var(--thumb-h-d) + var(--strip-pad)*2);
  opacity: 1;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior: contain; /* do not scroll page when swiping */
  touch-action: pan-x;          /* lock to horizontal */
  scrollbar-gutter: stable both-edges;
}

/* Thumbs: fixed height + aspect ratio so they always fit; images cover */
section[aria-label="Event Categories"] .mini-thumb{
  flex: 0 0 auto;
  height: var(--thumb-h-d);
  aspect-ratio: 4 / 3;
  width: auto;
  border: 0;
  padding: 0;
  border-radius: var(--thumb-radius);
  overflow: hidden;
  cursor: pointer;
  background: #f2f3fb;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  scroll-snap-align: start;
  transition: transform .18s ease;
}
section[aria-label="Event Categories"] .mini-thumb:hover{ transform: translateY(-1px); }
section[aria-label="Event Categories"] .mini-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
section[aria-label="Event Categories"] .mini-thumb:focus-visible{
  outline: 3px solid rgba(102,126,234,.35); outline-offset: 2px;
}

/* Mobile: smaller, still one row */
@media (max-width:900px){
  section[aria-label="Event Categories"] .themed-card.expanded .mini-gallery{
    max-height: calc(var(--thumb-h-m) + var(--strip-pad)*2);
  }
  section[aria-label="Event Categories"] .mini-thumb{ height: var(--thumb-h-m); }
}

/* See-all tile styled like your primary buttons */
section[aria-label="Event Categories"] .mini-thumb.see-all{
  background: transparent;
  box-shadow: none;
  padding: 0;
}
section[aria-label="Event Categories"] .mini-thumb.see-all span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-1), var(--accent));
  color: #fff; font-weight: 800;
  box-shadow: 0 8px 20px rgba(102,126,234,.25);
}

/* Dark mode thumb background tweak (keeps contrast but thinner shadow) */
@media (prefers-color-scheme: dark){
  section[aria-label="Event Categories"] .mini-thumb{
    background:#13172b; box-shadow:0 1px 3px rgba(0,0,0,.35);
  }
}

/* MOBILE MINI-THUMB SIZE ONLY (safe override) */
@media (max-width: 900px){
  .category-row .themed-card .mini-gallery .mini-thumb{
    width: 42vw !important;   /* smaller than before (was ~70vw) */
    height: 26vw !important;  /* keep a nice aspect ratio */
    max-width: 160px !important;
    max-height: 110px !important;
    border-radius: 12px;
    overflow: hidden;
  }
  .category-row .themed-card .mini-gallery .mini-thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
}

/* ---------- MINI-GALLERY: universal small padding beneath thumbs ---------- */
.category-row .themed-card .mini-gallery{
  padding: 6px 10px 12px; /* adds space between thumbs and scrollbar line */
}

/* ---------- MOBILE: smaller thumbs + hide scrollbars/arrows ---------- */
@media (max-width: 900px){
  /* Thumb size (smaller than before) */
  .category-row .themed-card .mini-gallery .mini-thumb{
    width: 34vw !important;
    height: 22vw !important;
    max-width: 132px !important;
    max-height: 88px !important;
    border-radius: 12px;
    overflow: hidden;
  }
  .category-row .themed-card .mini-gallery .mini-thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* Hide the horizontal scrollbar/“arrows” UI entirely on mobile */
  .category-row .themed-card .mini-gallery{
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge legacy */
  }
  .category-row .themed-card .mini-gallery::-webkit-scrollbar{ display: none; } /* WebKit */

  /* When a card is expanded on mobile, keep the page behind it fixed */
  body.gallery-freeze{
    position: fixed;
    overflow: hidden;
    inset: 0;             /* lock the viewport */
    width: 100%;
  }
}

/* Make the "See all" tile visually match your gradient buttons but keep it small */
.category-row .themed-card .mini-gallery .mini-thumb.see-all{
  background: #fff; /* the chip background */
  display: grid;
  place-items: center;
}
@media (prefers-color-scheme: dark){
  .category-row .themed-card .mini-gallery .mini-thumb.see-all{ background:#11172b; }
}

/* =========================================
   SOFT ORIENTATION LOCK: phones in landscape
   iOS Safari does not allow hard orientation locking from web pages.
   This overlay blocks interaction on small screens in landscape and
   asks users to rotate to portrait. iPads remain unaffected.
   ========================================= */
@media (orientation: landscape) and (max-height: 500px){
  body{ overflow: hidden; }
  body::before{
    content: "Please rotate your device to portrait for the best experience.";
    position: fixed; inset: 0; z-index: 99998;
    display: grid; place-items: center;
    padding: 24px; text-align: center; line-height: 1.45;
    background: linear-gradient(135deg,#fff7fb,#f2f1ff);
    color:#3d3966; font-weight:800; font-size:18px;
  }
  body::after{
    content: "↻"; position: fixed; z-index: 99999;
    left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 48px));
    font-size: 42px; color:#764ba2; opacity:.9;
  }
}
@media (prefers-color-scheme: dark) and (orientation: landscape) and (max-height: 500px){
  body::before{ background:#0f1220; color:#e8e9f3; }
  body::after{ color:#bfc7ff; }
}

/* =========================================
   CATEGORY HERO (overlay text, optional image)
   - By default: lightweight bar with dark text and no overlay
   - When you add class 'has-bg' and --hero-bg:url('...'): shows image with subtle dark overlay and white text
   ========================================= */
.category-hero{
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(180px, 32vh, 380px);
  padding: 8px 0;
  background-color: #f6f7ff; /* fallback when no image */
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #eceffd;
}
.category-hero::before{ content:""; display:none; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.28)); }
.category-hero.has-bg::before{ display:block; }
.category-hero .hero-content{ position:relative; z-index:1; text-align:center; width:min(980px, 92%); padding: 12px 10px; color: var(--text); }
.category-hero.has-bg .hero-content{ color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.category-hero .hero-content h2{ margin: 0 0 8px; font-weight:800; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.category-hero .hero-content h1{ margin: 0 0 8px; font-weight:800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.category-hero .hero-content .hero-subtitle{ margin: 0 auto 4px; line-height:1.5; opacity:.9 }
.category-hero .hero-content .hero-links{ margin: 6px 0 0; font-size: .95rem; opacity:.9 }
.category-hero .hero-content .hero-links a{ text-decoration: underline; text-decoration-color: rgba(0,0,0,.35) }
@media (prefers-color-scheme: dark){
  .category-hero{ background-color:#0f1220; border-bottom-color:#1b1f36 }
  .category-hero .hero-content{ color:#e8e9f3 }
  .category-hero .hero-content .hero-links a{ text-decoration-color: rgba(255,255,255,.4) }
}

/* =========================================
   RELATED SERVICES ROW (chips below gallery header)
   ========================================= */
.related-services{ margin: 6px 0 12px; padding: 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px }
.related-services .label{ font-weight:800; color:#3d3966; font-size:.95rem }
.related-services a{ color: var(--primary-2); text-decoration: underline; text-underline-offset: 2px }
.related-services a + a{ position: relative; padding-left: 20px }
.related-services a + a::before{
  content:""; position:absolute; left:4px; top:50%; transform:translateY(-45%);
  width:5px; height:5px; border-radius:50%; background:#b9bbd9;
}
/* Inline quote button at end */
.related-services .btn-outline{ padding: 8px 14px; border-radius: 10px; margin-left: 10px; vertical-align: baseline; }
@media (prefers-color-scheme: dark){
  .related-services .label{ color:#e8e9f3 }
  .related-services a{ color:#bfc7ff }
  .related-services a + a::before{ background:#5962a3 }
}

/* Mobile readability: link colors (light mode) */
@media (max-width: 640px) and (prefers-color-scheme: light){
  .related-services a{ color:#2f6cff }
  .related-services a:visited{ color:#ff7fb3 }
}

/* Footer link readability on mobile */
@media (max-width: 640px){
  .footer .footer-section a{ color:#b3ceff }
  .footer .footer-section a:visited{ color:#ffc1d6 }
}

/* =========================================
   HERO BANNER (non-overlay, shared)
   ========================================= */
.hero-banner { margin: 0 0 8px; }
.hero-banner .hero-media img { width: 100%; height: auto; display: block; }
.hero-banner .hero-content { max-width: 980px; margin: 0 auto; padding: 16px 16px 8px; text-align: center; }
.hero-banner .hero-content h2 { margin: 0 0 8px; font-weight: 800; font-size: clamp(1.35rem, 2.5vw, 1.8rem); color: var(--text); }
.hero-banner .hero-content .hero-subtitle { margin: 0 auto 4px; color: var(--text); opacity: 0.9; line-height: 1.45; }
.hero-banner .hero-content .hero-links { margin: 6px 0 0; font-size: 0.95rem; opacity: 0.9; }
.hero-banner .hero-content .hero-links a { text-decoration: underline; text-decoration-color: rgba(0,0,0,.35); }
@media (prefers-color-scheme: dark){
  .hero-banner .hero-content h2 { color:#e8e9f3; }
  .hero-banner .hero-content .hero-subtitle,
  .hero-banner .hero-content .hero-links { opacity: 0.92; color:#e8e9f3; }
  .hero-banner .hero-content .hero-links a { text-decoration-color: rgba(255,255,255,.4); }
}