@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

html, body { height:100%; margin:0; }
#page, .page { min-height:100svh; display:flex; flex-direction:column; }
main { flex:1 0 auto; }


body{
      font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;

  font-style: normal;
}

/* Before/After slider core */
  .ba {
    --pos: 50%;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    aspect-ratio: 16 / 10; /* adjust if needed */
    isolation: isolate;
    user-select: none;
    touch-action: none;
  }
  .ba > a,
  .ba > img { position: absolute; inset: 0; display: block; }
  .ba > a > img,
  .ba > img {
    width: 100%; height: 100%;
    object-fit: cover;
    cursor: zoom-in; /* images are clickable */
  }

  /* Layering */
  .ba > .after-link { z-index: 1; }
  .ba > .before-link { z-index: 2; }
  .ba > img.ba-after { z-index: 1; }
  .ba > img.ba-before { z-index: 2; }

  /* Clip the BEFORE half */
  .ba > .before-link > .ba-before,
  .ba > img.ba-before {
    clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
  }

  /* Divider (drag handle area) */
  .ba .ba-divider {
    position: absolute; top: 0; bottom: 0; left: var(--pos);
    width: 2px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 18px rgba(255,255,255,.4);
    transform: translateX(-1px);
    pointer-events: auto;        /* draggable */
    cursor: ew-resize;
    z-index: 3;
  }

  /* Chips */
  .ba .ba-chip {
    position: absolute; top: .75rem; z-index: 4;
    padding: .25rem .6rem; font-size: .75rem;
    border-radius: .5rem; font-weight: 600;
    background: rgba(0,0,0,.55); color: white;
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
  }
  .ba .ba-chip.left { left: .75rem; }
  .ba .ba-chip.right { right: .75rem; }

  /* Thumbnails */
  .ba-thumbs button {
    position: relative; overflow: hidden;
    border-radius: .6rem; border: 1px solid rgba(255,255,255,.2);
  }
  .ba-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ba-thumbs button[aria-current="true"] { outline: 2px solid white; }

 .ba-viewer{
    position:fixed; inset:0; z-index:50;
    display:grid; place-items:center;
    background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
    padding:2rem; opacity:0; visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;
    cursor:zoom-out;
  }
  .ba-viewer.show{ opacity:1; visibility:visible; }
  .ba-viewer-img{
    max-width:92vw; max-height:85vh; border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  .ba-viewer-close{
    position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:9999px;
    border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.5); color:#fff;
    font-size:26px; line-height:36px; text-align:center; cursor:pointer;
  }

  /* Core Before/After styles */
    .ba {
      --pos: 50%;
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      aspect-ratio: 16 / 10;
      isolation: isolate;
      user-select: none;
      touch-action: none;
    }
    .ba > a,
    .ba > img { position: absolute; inset: 0; display: block; }
    .ba > a > img,
    .ba > img {
      width: 100%; height: 100%;
      object-fit: cover;
      cursor: zoom-in; /* images are clickable */
    }

    /* Layering */
    .ba > .after-link { z-index: 1; }
    .ba > .before-link { z-index: 2; }
    .ba > img.ba-after { z-index: 1; }
    .ba > img.ba-before { z-index: 2; }

    /* Clip the BEFORE half */
    .ba > .before-link > .ba-before,
    .ba > img.ba-before {
      clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
    }

    /* Divider (drag line) */
    .ba .ba-divider{
      position:absolute; top:0; bottom:0; left:var(--pos);
      width:2px;
      background:rgba(255,255,255,.85);
      box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 0 18px rgba(255,255,255,.45);
      transform:translateX(-1px);
      pointer-events:auto;
      cursor:ew-resize;
      z-index:3;
    }

    /* NEW: Center handle */
    .ba .ba-handle{
      position:absolute; top:50%; left:var(--pos);
      transform:translate(-50%,-50%);
      width:42px; height:42px; border-radius:9999px;
      background:rgba(0,0,0,.55);
      border:2px solid rgba(255,255,255,.9);
      display:grid; place-items:center;
      z-index:4;
      cursor:ew-resize;
      backdrop-filter:blur(4px);
      box-shadow:0 2px 10px rgba(0,0,0,.35);
    }
    .ba .ba-handle svg{ width:20px; height:20px; color:#fff; opacity:.95; }

    /* Chips */
    .ba .ba-chip{
      position:absolute; top:.75rem; z-index:4;
      padding:.25rem .6rem; font-size:.75rem;
      border-radius:.5rem; font-weight:600;
      background:rgba(0,0,0,.55); color:#fff;
      border:1px solid rgba(255,255,255,.2);
      backdrop-filter:blur(4px);
    }
    .ba .ba-chip.left{ left:.75rem; }
    .ba .ba-chip.right{ right:.75rem; }

    /* Thumbs */
    .ba-thumbs button{
      position:relative; overflow:hidden;
      border-radius:.6rem; border:1px solid rgba(255,255,255,.2);
    }
    .ba-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
    .ba-thumbs button[aria-current="true"]{ outline:2px solid white; }

    /* Inline viewer (transparent tint overlay) */
    .ba-viewer{
      position:fixed; inset:0; z-index:50;
      display:grid; place-items:center;
      background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
      padding:2rem; opacity:0; visibility:hidden;
      transition:opacity .18s ease, visibility .18s ease;
      cursor:zoom-out;
    }
    .ba-viewer.show{ opacity:1; visibility:visible; }
    .ba-viewer-img{
      max-width:92vw; max-height:85vh; border-radius:12px;
      box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
    }
    .ba-viewer-close{
      position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:9999px;
      border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.5); color:#fff;
      font-size:26px; line-height:36px; text-align:center; cursor:pointer;
    }

    /* Mobile tuning */
    @media (max-width: 640px) {
      .ba { aspect-ratio: 4 / 3; border-radius: 0.75rem; }
      .ba .ba-divider { width: 4px; }
      .ba .ba-handle { width: 46px; height: 46px; }
      .ba .ba-chip { top: .5rem; font-size: .7rem; padding: .15rem .45rem; }
      .ba-thumbs button { height: 3.5rem; }
    }

@media (min-width: 768px) {
  .ba--fill {
    aspect-ratio: auto;   /* cancel fixed ratio */
    height: 100%;         /* fill the card's available height */
  }
}

[data-parallax]{
  position: relative;
  overflow: hidden;   /* clip any overflow so no edges show */
  isolation: isolate; /* isolates stacking to avoid blending artifacts */
}

.parallax-bg {
  position: absolute;
  left: 0; right: 0;
  top: -40vh;         /* more bleed above */
  bottom: -40vh;      /* more bleed below */
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--y, 0), 0) scale(1.05); /* slightly larger scale */
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }
.title-pop{
  text-shadow: 0 2px 12px rgba(0,0,0,.35), 0 0 20px rgba(255,255,255,.15);
  letter-spacing: .02em;
}

@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset: 0; } }

.speed-meter { animation: spinSlow 10s linear infinite; transform-origin: 50% 50%; }
.speed-dash { stroke-dasharray: 210 40; stroke-dashoffset: 250; animation: dash 2s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .speed-meter, .speed-dash { animation: none !important; }
}




   .hr-pro {
    position: relative;
    height: 2px;
    background: rgba(255,255,255,.28); /* base line */
    border-radius: 9999px;
    overflow: hidden;
  }
  @media (min-width:640px){ .hr-pro { height: 3px; } }

  .hr-pro::after{
    content:"";
    position:absolute; inset:0;
    width:40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
    transform: translateX(-100%);
    animation: hr-sweep 2.2s ease-in-out infinite;
  }
  @keyframes hr-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
  }
  @media (prefers-reduced-motion: reduce){
    .hr-pro::after { animation: none; transform: none; background: none; }
  }
  
/* ---------- Stronger, clearer slider affordances ---------- */

/* Faster, brighter shimmer */
@keyframes dividerShimmer { from { background-position: 0 0; } to { background-position: 300% 0; } }
/* Pulse + ripple for handle */
@keyframes handlePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70%  { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ba .ba-divider,
  .ba .ba-handle,
  .ba .ba-handle::after { animation: none !important; }
}

/* Divider: wider, glowing, animated sheen */
.ba .ba-divider{
  width: 3px; /* was 2px */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.18)
  );
  background-size: 300% 100%;
  animation: dividerShimmer 1.3s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.55));
  pointer-events: auto;
}

/* Soft bloom around the divider */
.ba .ba-divider::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 24px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0) 70%);
  filter: blur(8px);
  pointer-events: none;
}

/* Handle: stronger pulse + subtle expanding ring */
.ba .ba-handle{
  animation: handlePulse 1.5s ease-out infinite;
  transition: transform .2s ease;
}
.ba .ba-handle::after{
  content:"";
  position:absolute; inset:-4px; border-radius:9999px;
  border:2px solid rgba(255,255,255,.85);
  animation: handlePulseWave 1.8s ease-out infinite;
  pointer-events:none;
}

/* Hover emphasis (desktop) */
.ba:hover .ba-handle{
  transform: translate(-50%,-50%) scale(1.08);
}

 /* Headline upgrades */
  .headline-pop {
    position: relative;
    text-shadow: 0 10px 24px rgba(0,0,0,.22);
  }
  .headline-gradient {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.92) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* soft sheen sweeping across the text */
  .headline-pop .shine {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 20%, transparent 40%);
    transform: translateX(-120%);
    animation: shineSweep 2.5s ease-in-out 1.2s infinite;
    pointer-events: none;
  }
  @keyframes shineSweep {
    0% { transform: translateX(-120%); }
    55% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
  }
  /* flowing underline bar */
  .headline-pop .headline-underline {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: -.6rem; height: 6px; width: 62%;
    border-radius: 9999px;
    background: linear-gradient(90deg,#fde047,#f59e0b,#22d3ee);
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
    background-size: 200% 100%;
    animation: underlineFlow 2.8s ease-in-out infinite;
  }
  @keyframes underlineFlow {
    0% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
  }
  @media (max-width: 639px){
    .headline-pop .headline-underline { bottom: -.4rem; height: 5px; width: 72%; }
  }

  /* CTA button */
  .btn-cta{
    position:relative; border-radius:.625rem;
    background: rgba(0,0,0,.85); color:#fff;
    padding:.75rem 1.25rem; font-weight:700;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn-cta:hover{ transform: translateY(-1px); background: rgba(0,0,0,.93); box-shadow:0 16px 36px rgba(0,0,0,.38); }
  .btn-cta::after{
    content:""; position:absolute; inset:-2px; border-radius:inherit;
    background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent 60%);
    opacity:0; filter: blur(10px); transition: opacity .25s ease;
  }
  .btn-cta:hover::after{ opacity:.55; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .headline-pop .shine, .headline-pop .headline-underline { animation: none !important; }
    .btn-cta::after { display:none; }
  }

  .fx-card{
    position:relative;
    overflow:hidden;
  }
  .fx-card::before{
    content:"";
    position:absolute; inset:-2px;
    background:
      radial-gradient(1200px 220px at 10% -10%,
        rgba(255,255,255,.12), transparent 60%) no-repeat,
      radial-gradient(800px 200px at 90% -20%,
        rgba(255,255,255,.08), transparent 60%) no-repeat;
    pointer-events:none;
  }
  .fx-accent{
    position:relative;
    height:6px;
    background: linear-gradient(90deg,#fde047,#f59e0b,#22d3ee,#fde047);
    background-size: 220% 100%;
    animation: flowAccent 3s ease-in-out infinite;
  }
  @keyframes flowAccent{
    0% { background-position: 0% 0; }
    50%{ background-position: 100% 0; }
    100%{ background-position: 0% 0; }
  }

  /* Inputs: animated gradient underline on focus */
  .field-underline{
    background:
      linear-gradient(90deg,#111 0,#111 100%) bottom / 100% 2px no-repeat,
      linear-gradient(90deg, rgba(17,17,17,0) 0, rgba(17,17,17,0) 100%) bottom / 0% 2px no-repeat;
    transition: background-size .3s ease;
  }
  .field-underline:focus{
    background:
      linear-gradient(90deg, transparent, transparent) bottom / 100% 2px no-repeat,
      linear-gradient(90deg,#fde047,#f59e0b,#22d3ee) bottom / 100% 2px no-repeat;
  }
  .field-underline::placeholder{ opacity:0; }

  /* CTA glow */
  .btn-elevate{
    position:relative;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn-elevate:hover{
    transform: translateY(-1px);
    background: rgba(0,0,0,.92);
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
  }
  .btn-elevate::after{
    content:""; position:absolute; inset:-2px; border-radius:.75rem;
    background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent 60%);
    filter: blur(10px); opacity:0; transition: opacity .25s ease;
    pointer-events:none;
  }
  .btn-elevate:hover::after{ opacity:.5; }

  /* Map: pulsing pin overlay (stays centered) */
  .map-wrap{ position:relative; }
  .pin{
    position:absolute; left:50%; top:50%; transform: translate(-50%,-100%);
    width:18px; height:18px; border-radius:50%;
    background:#ef4444; border:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.35);
  }
  .pin::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    box-shadow: 0 0 0 0 rgba(239,68,68,.4);
    animation: pulse 2.2s ease-out infinite;
  }
  @keyframes pulse{
    0% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
    70%{ box-shadow: 0 0 0 16px rgba(239,68,68,0); }
    100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  }

  /* Chips: gentle hover lift */
  .chip{
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .chip:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    background: rgba(255,255,255,.82);
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    .fx-accent, .btn-elevate::after, .pin::after { animation: none !important; }
  }

@keyframes popInY {
  0%   { transform: translateY(18px) scale(.96); opacity: 0; }
  55%  { transform: translateY(-6px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0)    scale(1); }
}
.fx-pop {
  animation: popInY .6s cubic-bezier(.2,.8,.2,1) both;
  will-change: transform, opacity;
}
/* easy stagger helpers */
.fx-pop-1 { animation-delay: .06s; }
.fx-pop-2 { animation-delay: .12s; }
.fx-pop-3 { animation-delay: .18s; }
.fx-pop-4 { animation-delay: .24s; }
.fx-pop-5 { animation-delay: .30s; }
.fx-pop-6 { animation-delay: .36s; }
.fx-pop-7 { animation-delay: .42s; }
.fx-pop-8 { animation-delay: .48s; }

@media (prefers-reduced-motion: reduce){
  .fx-pop { animation: none !important; }
}

/* (optional) make area chips feel nicer on hover using your existing .chip rule */
.chip { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.chip:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.12); background: rgba(255,255,255,.82); }

/* Ensure the real border never shows under the gradient underline */
.field-underline{
  border-bottom: 2px solid transparent !important;  /* hide the real border */
}
.field-underline:focus{
  border-bottom-color: transparent !important;      /* keep hidden on focus */
}

/* Map container: ensure it has height and clips the pin */
.map-wrap{ position: relative; height: 100%; width: 100%; overflow: hidden; }
.map-wrap .pin{ z-index: 2; } /* keep pin above the iframe */

/* ===== More aggressive, still smooth ===== */
:root{
  --ease-pop: cubic-bezier(.2,1.35,.2,1); /* punchier overshoot */
  --bob-amp: 24px;                        /* taller bounce (mobile) */
}

/* bigger overshoot + clearer settle */
@keyframes popIn {
  0%   { transform: translateY(38px) scale(.96);  opacity: 0; }
  45%  { transform: translateY(-28px) scale(1.045); opacity: 1; }
  75%  { transform: translateY(10px)  scale(.997); }
  100% { transform: translateY(0)     scale(1); }
}

/* continuous bob with taller arc and steady rhythm */
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(calc(var(--bob-amp) * -1)); }
}

/* subtle shadow accent at the top of the arc */
@keyframes shadowPulse {
  0%,100% { filter: drop-shadow(0 10px 26px rgba(0,0,0,.22)); }
  50%     { filter: drop-shadow(0 18px 36px rgba(0,0,0,.30)); }
}

/* motion respect */
@media (prefers-reduced-motion: reduce){
  .peek-bounce { animation: none !important; filter:none !important; }
}

/* base (visible even on refresh mid-page) */
.peek-bounce{
  will-change: transform, filter;
  transform: translateY(0);
}

/* loop state (JS adds .loop at the top / removes when scrolled past) */
.peek-bounce.loop{
  animation:
    popIn .9s var(--ease-pop) forwards,
    bob   1.85s ease-in-out .9s infinite,
    shadowPulse 1.85s ease-in-out .9s infinite;
}

/* paused when user scrolls down (JS toggles .is-paused) */
.peek-bounce.is-paused{
  animation: none !important;
  transform: translateY(0) !important;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.22));
}

/* even bolder on larger screens */
@media (min-width: 768px){
  :root{ --bob-amp: 30px; } /* md+ */
}



  /* Review card */
  #google-reviews .gr-card{
    border-radius: 1rem;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 1.1rem;
    color: #111827; /* zinc-900 */
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  #google-reviews .gr-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 46px rgba(0,0,0,.18);
    border-color: rgba(0,0,0,.06);
  }

  /* Reviewer line + badge */
  #google-reviews .gr-author{ color:#111827; }
  #google-reviews .gr-badge{
    font-size: 12px; line-height: 1; color:#0b1220;
    background: rgba(72,175,163,.12); /* subtle teal */
    border: 1px solid rgba(72,175,163,.25);
    padding: .38rem .55rem; border-radius: .5rem;
  }

  /* Review text clamp + expandable */
  #google-reviews .gr-text{
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #google-reviews .gr-text.open{ display:block; }

  #google-reviews .gr-more{
    color:#0b1220; border:1px dashed rgba(11,18,32,.25);
    padding:.35rem .6rem; border-radius:.5rem; background:#fff;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
  }
  #google-reviews .gr-more:hover{
    background:#f8fafc; transform: translateY(-1px);
    border-color: rgba(11,18,32,.45);
  }

  /* Skeleton loaders with shimmer */
  #google-reviews .gr-skel{
    height: 180px; border-radius: 1rem;
    background:
      linear-gradient(100deg, rgba(255,255,255,.25) 20%, rgba(255,255,255,.65) 40%, rgba(255,255,255,.25) 60%)
      ,rgba(255,255,255,.2);
    background-size: 200% 100%;
    animation: gr-shimmer 1.2s linear infinite;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.08);
  }
  @keyframes gr-shimmer { to { background-position: -200% 0; } }

  /* Tiny stagger for cards (AOS handles most animation) */
  #google-reviews [data-aos="fade-up"]{ will-change: transform, opacity; }

  /* Better contrast on teal background */
  #google-reviews h2 { text-shadow: 0 2px 14px rgba(0,0,0,.12); }

  .ig-card{
    position:relative; overflow:hidden; border-radius:1rem; background:#fff;
    border:1px solid rgba(2,6,23,.06); /* slate-950/6 */
    box-shadow: 0 10px 24px rgba(2,6,23,.08);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .ig-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 48px rgba(2,6,23,.14); }
  .ig-media{ aspect-ratio:1/1; width:100%; height:auto; object-fit:cover; display:block; }
  .ig-badge{
    position:absolute; top:.5rem; left:.5rem; z-index:2;
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.25rem .5rem; font-size:.7rem; font-weight:600;
    border-radius:999px; color:#0b1220; background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06);
  }
  .ig-overlay{
    position:absolute; inset:0; display:flex; align-items:flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.0) 55%);
    opacity:0; transition: opacity .25s ease;
  }
  .ig-card:hover .ig-overlay{ opacity:1; }
  .ig-meta{
    width:100%; padding:.75rem .85rem; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  }
  .ig-caption{
    font-size:.85rem; line-height:1.25rem; opacity:.95;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .ig-open{
    display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem;
    background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
    padding:.35rem .55rem; border-radius:.5rem; backdrop-filter: blur(8px);
  }

  /* Skeletons */
  .ig-skel{
    aspect-ratio:1/1; border-radius:1rem; position:relative; overflow:hidden;
    background:
      linear-gradient(100deg, rgba(255,255,255,.2) 20%, rgba(255,255,255,.65) 40%, rgba(255,255,255,.2) 60%),
      rgba(2,6,23,.06);
    background-size:200% 100%; animation: ig-shimmer 1.2s linear infinite;
    border:1px solid rgba(2,6,23,.06);
  }
  @keyframes ig-shimmer { to { background-position: -200% 0; } }

  /* Header fine-tune on tinted bg */
  .ig-wrap{ position:relative; }
  .ig-head h2{ text-shadow: 0 2px 14px rgba(0,0,0,.06); }

  /* Animated HR */
  .hr-pro{
    height:3px; border-radius:999px; overflow:hidden;
    background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.9), rgba(255,255,255,.25));
    background-size:200% 100%;
    animation: hrSlide 2.2s linear infinite;
    box-shadow: 0 1px 8px rgba(0,0,0,.08) inset, 0 1px 0 rgba(255,255,255,.25);
  }
  @keyframes hrSlide { to { background-position: 200% 0; } }

  /* Cards */
  .why-card{
    position:relative; border-radius:1rem;
    background: rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding:1.25rem; color:white;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .why-card::before{
    content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
    background: conic-gradient(from var(--ang,0deg),
               rgba(255,255,255,.12), rgba(255,255,255,.35), rgba(255,255,255,.12));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spinAura 12s linear infinite; pointer-events:none;
  }
  .why-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 46px rgba(0,0,0,.28); }
  @keyframes spinAura { to { --ang:360deg; } }

  .icon-tile{
    display:grid; place-items:center;
    width:3rem; height:3rem; border-radius:.75rem;
    background: rgba(255,255,255,.15);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
  }

  /* Clock ring (same as before) */
  @keyframes spinSlow { to { transform: rotate(360deg); } }
  @keyframes dash { to { stroke-dashoffset: 0; } }
  .speed-meter{ animation: spinSlow 10s linear infinite; transform-origin:50% 50%; }
  .speed-dash{ stroke-dasharray:210 40; stroke-dashoffset:250; animation: dash 2s linear infinite; }

  @media (prefers-reduced-motion: reduce){
    .shine-text, .hr-pro, .why-card::before, .speed-meter, .speed-dash { animation: none !important; }
  }

  /* Keep section from causing a horizontal scrollbar */
.ig-wrap { overflow-x: hidden; }

/* Card + image baseline (you already have ig-card from your loader) */
.ig-card {
  position: relative;
  border-radius: 0.75rem;
  overflow: visible;             /* allow the slight tilt to show cleanly */
  transform: translateZ(0);
  will-change: transform;
}
.ig-card .ig-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* initial professional tilt */
  transform: rotate(var(--tilt, -2deg));
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  border-radius: 0.75rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}

/* Vary the starting tilt per tile so it looks curated */
#ig-grid > .ig-card:nth-child(4n+1) { --tilt: -2.5deg; }
#ig-grid > .ig-card:nth-child(4n+2) { --tilt:  2deg;  }
#ig-grid > .ig-card:nth-child(4n+3) { --tilt: -1.5deg; }
#ig-grid > .ig-card:nth-child(4n+4) { --tilt:  1.5deg; }

/* On hover (md+), gently straighten and lift */
@media (min-width: 768px) {
  .ig-card:hover .ig-photo {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
    filter: saturate(1.05);
  }
}

/* On small screens, keep tilt subtle (so it stays classy) */
@media (max-width: 767.98px) {
  #ig-grid > .ig-card:nth-child(4n+1) { --tilt: -1.5deg; }
  #ig-grid > .ig-card:nth-child(4n+2) { --tilt:  1.25deg; }
  #ig-grid > .ig-card:nth-child(4n+3) { --tilt: -1deg; }
  #ig-grid > .ig-card:nth-child(4n+4) { --tilt:  1deg; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ig-card .ig-photo { transition: none; }
}

/* Hide horizontal scrollbar for chips on mobile */
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* Animated HR */
  .hr-pro{
    height: 3px;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.95), rgba(255,255,255,.25));
    background-size: 200% 100%;
    animation: hrShimmer 2.2s linear infinite;
  }
  @keyframes hrShimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }

  /* Chips */
  .chip{
    display:inline-flex; align-items:center; gap:.5rem;
    border:1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.18);
    color:#0a0a0a; /* darker text for legibility */
    padding:.4rem .75rem; border-radius:9999px;
    font-size:.8rem; font-weight:600; white-space:nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  }
  .chip:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    background: rgba(255,255,255,.82);
    color:#111;
  }

  /* Map pin pulse */
  .pin{
    width:18px; height:18px; border-radius:50%;
    background:#ef4444; border:2px solid #fff;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
    position:relative; transform: translateY(-8%);
  }
  .pin::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    box-shadow: 0 0 0 0 rgba(239,68,68,.45);
    animation: pinPulse 2.2s ease-out infinite;
  }
  @keyframes pinPulse{
    0% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
    70%{ box-shadow: 0 0 0 16px rgba(239,68,68,0); }
    100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  }

  /* Instagram button subtle glow on hover */
  .btn-ig{
    box-shadow: 0 8px 22px rgba(0,0,0,.15);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn-ig:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .hr-pro, .pin::after { animation: none !important; }
  }


    /* Smaller map pin pulse (unchanged) */
  .pin{ width:16px;height:16px;border-radius:50%;background:#ef4444;border:2px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.35);position:relative;transform:translateY(-8%);}
  .pin::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(239,68,68,.45);animation:pinPulse 2.2s ease-out infinite;}
  @keyframes pinPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}70%{box-shadow:0 0 0 14px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

  /* Ticker */
  .marquee{ overflow:hidden; position:relative; 
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .marquee__inner{
    display:flex; width:max-content;
    animation: marqueeRight 38s linear infinite;
  }
  /* Right-moving seamless loop (duplicate content inside) */
  @keyframes marqueeRight{ 
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
  }
  .ticker-list{ display:flex; align-items:center; gap:1.25rem; padding-right:1.25rem; }
  .ticker-item{
    display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
    font-weight:700; letter-spacing:.2px; color:#fff;
    padding:.35rem .65rem; border-radius:9999px; background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    position:relative;
  }
  /* vertical divider line after each item for that “vertical line” look */
  .ticker-item::after{
    content:""; position:absolute; right:-0.7rem; top:50%; transform:translateY(-50%);
    width:1px; height:16px; background:rgba(255,255,255,.6);
  }

  /* Pause on hover, respect reduced motion */
  .service-ticker:hover .marquee__inner{ animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce){
    .marquee__inner{ animation: none !important; }
  }

  /* Instagram button subtle glow */
  .btn-ig{ box-shadow:0 8px 22px rgba(0,0,0,.15); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
  .btn-ig:hover{ transform: translateY(-1px); box-shadow:0 14px 34px rgba(0,0,0,.22); }

  /* --- Service ticker (right-moving, seamless) --- */
.marquee{
  overflow: hidden;
  /* prevent accidental pauses */
}
.marquee__inner{
  display: flex;
  width: max-content;
  gap: 2rem;                 /* space between the two lists */
  animation: scrollRight 28s linear infinite;
}
.ticker-list{
  display: flex;
  gap: 1rem;                 /* space between cities */
  margin: 0; padding: 0;
  list-style: none;
}
.ticker-item{
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .25rem .75rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 0;          /* <- NO rounded corners */
  background: rgba(255,255,255,.08);
  /* keep hover subtle (does not pause) */
  transition: background-color .2s ease, color .2s ease;
}
.ticker-item:hover{
  background: rgba(255,255,255,.14);
}

/* Right-moving: start half-way left, slide to 0, loop */
@keyframes scrollRight{
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* Never pause on hover (even if some old CSS tries to) */
.marquee:hover .marquee__inner{
  animation-play-state: running !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee__inner{ animation: none; transform: none; }
}

/* subtle accent line */
.wm-accent{
  height:1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 40%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.35) 60%,
    rgba(255,255,255,0) 100%);
  opacity:.18;  /* keep it watermark-level */
}

/* watermark text */
.wm-note{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem;           /* small */
  letter-spacing:.02em;
  color:rgba(255,255,255,.65);/* low contrast */
}
.wm-prefix{ opacity:.75; }

.wm-name{
  position:relative;
  color:inherit; text-decoration:none;
  transition: opacity .25s ease;
}
.wm-name::after{
  content:""; position:absolute; left:0; right:0; bottom:-0.15rem; height:1px;
  background: currentColor; opacity:.25;
  transform: scaleX(0); transform-origin:right;
  transition: transform .3s ease, opacity .3s ease;
}
/* only animate on hover (keeps it unobtrusive) */
.wm-name:hover::after{ transform: scaleX(1); transform-origin:left; opacity:.6; }
.wm-name:hover{
  background: linear-gradient(90deg,#ffffff,#eaf7f3,#ffffff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%;
  animation: wmShine 2.5s linear infinite;
}

/* optional tiny shine keyframes */
@keyframes wmShine{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .wm-name{ animation:none !important; }
}

/* Keep the IG section from creating its own scrollbar */
.ig-wrap { overflow: hidden; position: relative; }

/* Ensure cards never overflow the grid area */
.ig-grid > * { overflow: hidden; border-radius: 0.75rem; }

/* Images don’t add extra baseline space and always cover square cells */
.ig-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* If you still have old decorative halos, hard-disable them */
.ig-card::before, .ig-card::after { display: none !important; }

/* AOS scale/translate can push outside; clip just in this section */
.ig-wrap [data-aos] { will-change: transform, opacity; }

/* Base: hidden just below, ready to pop in */
.pop-card{
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}

/* Pop in once and KEEP the final state (forwards) */
@keyframes popInStay {
  0%   { transform: translateY(28px) scale(.97); opacity: 0; }
  55%  { transform: translateY(-6px) scale(1.02); opacity: 1; } /* subtle overshoot */
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
.pop-card.is-visible{
  animation: popInStay .65s cubic-bezier(.22,.9,.2,1) forwards;
}

/* Motion-safe fallback */
@media (prefers-reduced-motion: reduce){
  .pop-card{ opacity:1; transform:none; }
  .pop-card.is-visible{ animation:none !important; }
}

/* --- Success modal animations & visuals --- */
@keyframes successPop {
  0%   { transform: translateY(18px) scale(.96); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0)    scale(1); }
}
.animate-success-pop { animation: successPop .5s cubic-bezier(.2,.8,.2,1); will-change: transform, opacity; }

/* Badge + ring */
.success-badge{ width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; }
.success-svg{ width:64px; height:64px; }
.ring-track{ fill:none; stroke:rgba(16,24,40,.14); stroke-width:10; }
.ring-spin{
  fill:none; stroke:#22c55e; stroke-width:10; stroke-linecap:round;
  stroke-dasharray:276;             /* ≈ circumference for r=44 */
  stroke-dashoffset:276;
  animation: ringDraw .8s ease-out forwards, ringRotate 1.2s .8s linear infinite;
  transform-origin:50% 50%;
}
@keyframes ringDraw   { to { stroke-dashoffset: 0; } }
@keyframes ringRotate { to { transform: rotate(360deg); } }

/* Checkmark draws after the ring appears */
.check{
  fill:none; stroke:#16a34a; stroke-width:10; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:72; stroke-dashoffset:72; animation: checkDraw .6s .4s ease-out forwards;
}
@keyframes checkDraw { to { stroke-dashoffset:0; } }

/* Body scroll lock while modal is open */
.body--modal-open { overflow:hidden; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .animate-success-pop, .ring-spin, .check { animation: none !important; }
}

@keyframes alertPop { 0%{transform:translateY(16px) scale(.96);opacity:0}
  55%{transform:translateY(-4px) scale(1.02);opacity:1} 100%{transform:translateY(0) scale(1)}}
.animate-alert-pop{ animation:alertPop .5s cubic-bezier(.2,.8,.2,1) both }

/* Badge */
.alert-badge{width:64px;height:64px;display:grid;place-items:center;isolation:isolate}
.alert-svg{width:64px;height:64px;display:block}
.ring-track{fill:none;stroke:rgba(251,191,36,.25);stroke-width:6}
.ring-spin{fill:none;stroke:#f59e0b;stroke-width:6;stroke-linecap:round;
  stroke-dasharray: 140 24; stroke-dashoffset: 0; animation: alertRing 1.6s linear infinite}
@keyframes alertRing { to { stroke-dashoffset: -164 } }

.excl-line{stroke:#111827;stroke-width:7;stroke-linecap:round;fill:none}
.excl-dot{fill:#111827}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .animate-alert-pop, .ring-spin { animation: none !important }
}

 /* Arrow buttons (premium glass look) */
  .gr-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:20;
    width:44px; height:44px; border-radius:9999px; display:grid; place-items:center;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
    color:#fff; box-shadow:0 10px 28px rgba(0,0,0,.18);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .gr-nav:hover{
    background: rgba(255,255,255,.26); transform:translateY(-50%) scale(1.04);
    box-shadow:0 16px 40px rgba(0,0,0,.26);
  }
  .gr-prev{ left:-.25rem; }
  .gr-next{ right:-.25rem; }
  @media (min-width:640px){ .gr-prev{ left:-1.25rem } .gr-next{ right:-1.25rem } }

  /* Pagination dots (clean & readable on teal) */
  .swiper-pagination-bullet{ background:rgba(255,255,255,.45); opacity:1 }
  .swiper-pagination-bullet-active{ background:#fff }

  /* Make cards fill slides nicely */
  .swiper-slide > .gr-card{ height:100% }

  /* Arrows (glass, subtle) */
  .gr-arrow{
    width: 44px; height: 44px; border-radius: 9999px;
    display: grid; place-items: center;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    color:#fff; box-shadow: 0 10px 28px rgba(0,0,0,.18);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .gr-arrow:hover{
    background: rgba(255,255,255,.26);
    transform: scale(1.04);
    box-shadow: 0 16px 40px rgba(0,0,0,.26);
  }
  /* Pagination bullets */
  .splide__pagination{ bottom: -1.75rem }
  .splide__pagination__page{ background: rgba(255,255,255,.45); opacity: 1 }
  .splide__pagination__page.is-active{ background: #fff; transform: scale(1.12) }

  /* Make slides equal height */
  .splide__slide > .gr-card{ height: 100% }

  .ig-card{
  position: relative;
  display:block;
  border-radius: 1rem;
  overflow:hidden;
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ig-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }

.ig-media{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4/5; }
@media (min-width: 640px){ .ig-media{ aspect-ratio: 1/1; } }

/* Top-left type badge */
.ig-badge{
  position:absolute; top:.6rem; left:.6rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .55rem;
  font-size:.75rem; font-weight:600;
  color:#111; background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.06); border-radius:9999px;
  backdrop-filter: blur(6px);
  z-index:2;
}

/* Overlay */
.ig-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6));
  opacity:0; transition: opacity .25s ease; z-index:1;
}
.ig-card:hover .ig-overlay{ opacity:1; }

.ig-meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:.9rem .95rem;
  color:#fff;
}
.ig-caption{
  max-height: 3.05em; overflow: hidden;
  line-height:1.5; font-size:.9rem; opacity:.95;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ig-open{
  margin-top:.4rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; opacity:.9;
}

/* Splide tuning */
.ig-splide .splide__slide{ height: 100%; }
.ig-splide .splide__pagination{ bottom: -1.6rem; }
.ig-splide .splide__pagination__page{ background: rgba(0,0,0,.25); }
.ig-splide .splide__pagination__page.is-active{ background:#111; transform: scale(1.1); }

/* Premium arrows */
.ig-splide .splide__arrow{
  background: rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.06);
  color:#111; width:40px; height:40px; border-radius:9999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  backdrop-filter: blur(6px);
}
.ig-splide .splide__arrow:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.ig-splide .splide__arrow svg{ width:18px; height:18px; }

/* Loading skeletons (if you want them before the slider mounts) */
.ig-skel{
  height: 260px; border-radius: 1rem; overflow:hidden; position: relative;
  background: linear-gradient(90deg,#f2f4f7 25%,#e9edf3 37%,#f2f4f7 63%);
  background-size: 400% 100%; animation: igShimmer 1.3s ease-in-out infinite;
  border:1px solid rgba(0,0,0,.06);
}
@keyframes igShimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* Card base */
.ig-card{
  position:relative; display:block; overflow:hidden; border-radius:1rem;
  background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.12);
  transform-style: preserve-3d; transform: perspective(900px) rotateX(0) rotateY(0) translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease;
}
@media (hover:hover){
  .ig-card:hover{
    transform: perspective(900px) rotateX(2deg) rotateY(-2.5deg) translateZ(6px);
    box-shadow:0 18px 45px rgba(0,0,0,.16);
    filter: saturate(1.05);
  }
}

/* Media */
.ig-card .ig-media{
  width:100%; aspect-ratio: 4/5; object-fit:cover; display:block;
}

/* Overlay */
.ig-card .ig-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  opacity:.0; transition: opacity .35s ease;
}
@media (hover:hover){ .ig-card:hover .ig-overlay{ opacity:1; } }

.ig-card .ig-meta{
  width:100%; color:#fff; padding:14px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ig-card .ig-caption{
  font-size:.9rem; line-height:1.3; max-height:3.25em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ig-card .ig-open{
  display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25); padding:.35rem .6rem; border-radius:.6rem; font-size:.8rem;
  backdrop-filter: blur(4px);
}

/* Badge chip */
.ig-card .ig-badge{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  display:inline-flex; align-items:center; gap:.35rem;
  background: rgba(255,255,255,.9); color:#0a0a0a; border:1px solid rgba(0,0,0,.08);
  font-size:.72rem; padding:.25rem .45rem; border-radius:.5rem; box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Splide polish */
.ig-splide .splide__list{ align-items:stretch; } /* equal height slides */
.ig-splide .splide__slide{ display:flex; }
.ig-splide .splide__slide .ig-card{ width:100%; }

/* Arrows */
.ig-arrows .splide__arrow{
  width:44px; height:44px; border-radius:9999px; background:rgba(255,255,255,.8);
  border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition: transform .2s ease, background .2s ease;
}
.ig-arrows .splide__arrow:hover{ background:#fff; transform: translateY(-1px); }
.ig-arrows .splide__arrow:disabled{ opacity:.4; }
.ig-splide .splide__arrow--prev{ left:-14px; }
.ig-splide .splide__arrow--next{ right:-14px; }
@media (max-width: 640px){
  .ig-splide .splide__arrow--prev{ left:4px; }
  .ig-splide .splide__arrow--next{ right:4px; }
}

/* Pagination dots */
.ig-splide .splide__pagination{ bottom:-1.8rem; }
.ig-splide .splide__pagination__page{
  background: rgba(0,0,0,.18); transform: scale(.9); transition: transform .2s ease, background .2s ease;
}
.ig-splide .splide__pagination__page.is-active{
  background: #0f172a; transform: scale(1.1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ig-card, .ig-card .ig-overlay, .ig-arrows .splide__arrow, .ig-splide .splide__pagination__page{ transition:none !important; }
}

/* step dots */
.step-dot{ width:8px; height:8px; border-radius:9999px; background:rgba(0,0,0,.15); transition:.25s }
.step-dot.is-active{ background:#0a0a0a; transform:scale(1.15) }

/* slide/fade animations */
.q-step.animate-in{ animation:qSlideIn .32s ease both }
@keyframes qSlideIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }

/* float label reuse */
.float-label{
  position:absolute; top:.75rem; left:0; -webkit-transform-origin:0 0; transform-origin:0 0;
  transition:.2s; color:#71717a; transform:translateY(-1.5rem) scale(.75);
}

/* tiles */
.prop-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  border-radius:.9rem; padding:14px 10px; border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.9); box-shadow:0 10px 26px rgba(0,0,0,.10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.prop-tile:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.15) }
.prop-tile.is-selected{ border-color:#0f172a; box-shadow:0 18px 38px rgba(0,0,0,.18) }
.prop-icon{
  display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
  background:linear-gradient(180deg,#e8f6f3,#d6eee9);
  color:#0f172a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.prop-label{ font-size:.8rem; font-weight:600; color:#0f172a }

/* buttons */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  border-radius:.7rem; background:#0f0f0f; color:#fff; padding:.7rem 1.1rem; font-weight:600;
  box-shadow:0 14px 34px rgba(0,0,0,.18); transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover{ background:#000; transform:translateY(-1px); box-shadow:0 18px 38px rgba(0,0,0,.22) }

.btn-subtle{
  color:#0f172a; background:#fff; border:1px solid rgba(0,0,0,.08);
  padding:.6rem .95rem; border-radius:.7rem; font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-subtle:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.12) }

/* thumbnails */
#q-previews img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:.5rem; border:1px solid rgba(0,0,0,.06) }

.step-dot{ width:8px;height:8px;border-radius:9999px;background:rgba(0,0,0,.2);transition:all .25s ease; }
.step-dot.is-active{ width:22px;background:#0f172a; }
.q-step.animate-in{ animation: qSlideIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes qSlideIn{ from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }

.prop-tile{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:.9rem;border-radius:.9rem;border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.85);box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.prop-tile:hover{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.12); }
.prop-tile.active{ border-color:#0f172a; background:#fff; box-shadow:0 16px 42px rgba(0,0,0,.14); }
.prop-icon{ display:inline-grid;place-items:center;width:38px;height:38px;border-radius:.65rem;
  background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.06); }
.prop-label{ font-size:.85rem;font-weight:600;color:#0a0a0a; }

.btn-primary{ @apply rounded-lg bg-black/85 text-white text-sm font-medium shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black; }
.btn-subtle{ @apply text-sm text-zinc-700 hover:underline; }

/* highlight selected tile */
.prop-tile.is-active{
  outline: 2px solid rgba(0,0,0,.28);
  background: #fff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}

.prop-tile{
  display:flex; align-items:center; gap:.55rem;
  width:100%; border-radius:.9rem;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.12);
  padding:.9rem .95rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  backdrop-filter: blur(6px);
}
.prop-tile:hover{ border-color: rgba(0,0,0,.55); box-shadow: 0 10px 28px rgba(0,0,0,.10); transform: translateY(-1px); }
.prop-tile.is-active{
  border-color:#0f172a; box-shadow: 0 12px 32px rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
}
.prop-icon{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:.65rem;
  background: #0f172a; color:#fff; }
.prop-label{ font-weight:600; color:#0f172a; font-size:.9rem; line-height:1.3; }

/* --- modern input shell --- */
.input-shell { --ring: 0 0 0 0 rgba(72,175,163,.10); }
.input-icon{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  transition: color .25s ease;
}
.input-core{
  width:100%;
  border-radius: 1rem;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(24,24,27,.12);
  padding: .75rem .875rem .75rem 2.5rem;
  color:#0a0a0a;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
/* custom hover animation (lift + glow) */
.input-shell:hover .input-core{
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(0,0,0,.12),
    0 0 0 4px rgba(72,175,163,.12);
  border-color: rgba(16,24,40,.25);
}
.input-core:focus{
  outline: none;
  border-color: rgba(7,94,84,.5);
  box-shadow:
    0 14px 34px rgba(0,0,0,.14),
    0 0 0 6px rgba(72,175,163,.14);
}

/* floating label (works for input & select) */
.input-label{
  position:absolute; left:2.5rem; top:.8rem;
  font-size:.875rem; color:rgb(113,113,122);
  pointer-events:none; transition: all .2s ease;
}
.input-shell:has(.input-core:focus) .input-label,
.input-shell.has-value .input-label{
  top:-.5rem; font-size:.75rem; color:#0f172a;
  background: rgba(255,255,255,.8);
  padding: 0 .25rem; border-radius:.35rem;
  backdrop-filter: blur(4px);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .input-core, .input-label { transition: none !important; }
}

/* ========= Color loop border (for inputs & tiles) ========= */
.fx-loop-border { position: relative; }
.fx-loop-border::before{
  content:""; position:absolute; inset:-1px; border-radius: 1rem;
  background: conic-gradient(
    from 0deg,
    #48afa3, #6ddccf, #5ad1c4, #48afa3
  );
  filter: saturate(1.1);
  z-index: 0; opacity: 0; transform: rotate(0deg);
  transition: opacity .25s ease, transform .25s ease;
  /* show only the border ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px; /* ring thickness */
}
.fx-loop-border:hover::before,
.fx-loop-border.is-selected::before,
.fx-loop-border.is-focus::before{
  opacity: .9; animation: loop-rotate 2.8s linear infinite;
}
@keyframes loop-rotate { to { transform: rotate(360deg); } }

/* ========= Input shell (no Tailwind placeholder/peer) ========= */
.input-shell{
  display:block; border-radius:1rem; isolation:isolate;
}
.input-icon{
  position:absolute; left:.75rem; top:50%; transform: translateY(-50%);
  color:#0ea5a4; /* teal-600 */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
  transition: transform .2s ease, color .2s ease, filter .2s ease;
  z-index:2;
}
.input-shell:hover .input-icon{ transform: translateY(-50%) translateX(2px) scale(1.06); color:#0b857f; filter: drop-shadow(0 4px 10px rgba(72,175,163,.35)); }

.input-core{
  position:relative; z-index:1; width:100%;
  border-radius: 1rem;
  background: rgba(255,255,255,.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(24,24,27,.12);
  padding: .85rem 1rem .85rem 2.75rem;
  color:#0a0a0a; font-size: .95rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.input-shell:hover .input-core{ transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,0,0,.12); border-color: transparent; }
.input-core:focus{ outline: none; border-color: transparent; }
.input-shell.is-focus .input-core{
  box-shadow: 0 16px 40px rgba(0,0,0,.14), 0 0 0 6px rgba(72,175,163,.14);
}

/* Floating label (JS toggles .has-value) */
.input-label{
  position:absolute; left:2.75rem; top:50%;
  transform: translateY(-50%); line-height:1;
  font-size:.92rem; color:rgb(113,113,122);
  background: transparent; padding: 0 .25rem; border-radius:.35rem;
  transition: all .18s ease;
  z-index:1;
}
.input-shell.is-focus .input-label,
.input-shell.has-value .input-label{
  top:-.5rem; transform: none; font-size:.75rem; color:#0f172a;
  background: rgba(255,255,255,.86); backdrop-filter: blur(4px);
}

/* ========= Service tiles ========= */
.svc-tile{
  position:relative; border-radius:1rem; isolation:isolate;
  display:flex; align-items:center; gap:.6rem; width:100%;
  background: rgba(255,255,255,.82); backdrop-filter: blur(8px);
  border:1px solid rgba(24,24,27,.12);
  padding:.85rem 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-tile:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.14); border-color: transparent; }
.svc-tile.is-selected{ transform: translateY(-1px) scale(1.01); }

.svc-icon svg{
  color:#0ea5a4; transition: transform .18s ease, color .2s ease, filter .2s ease;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
.svc-tile:hover .svc-icon svg,
.svc-tile.is-selected .svc-icon svg{
  color:#0b857f; transform: translateX(1px) scale(1.06);
  filter: drop-shadow(0 4px 10px rgba(72,175,163,.35));
}
.svc-label{ font-size:.9rem; color:#0f172a; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fx-loop-border::before,
  .input-core, .input-icon, .input-label,
  .svc-tile, .svc-icon svg { transition:none !important; animation:none !important; }
}

/* Remove any floating/placeholder motion */
.input-label { top: .35rem !important; font-size: .72rem !important; }
.input-core::placeholder { color: transparent; } /* keep placeholders hidden so no "lift" */
.group:focus-within .input-label { transform: none !important; }

/* Rainbow loop only on hover (not on focus) */
.fx-loop-border::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: conic-gradient(#ff7a7a,#ffb86c,#ffe66d,#7dff9b,#6ad3ff,#b98aff,#ff7a7a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .18s ease; z-index:0;
}
.fx-loop-border:hover::before{ opacity:1; animation:borderSpin 2.6s linear infinite; }
@keyframes borderSpin{ to{ transform:rotate(360deg); } }

/* Keep base shells pretty, no focus shimmer */
.input-shell{
  position:relative; border:1px solid #e5e7eb; border-radius:1rem;
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  padding:.9rem 1rem .7rem 2.6rem; box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition: box-shadow .25s ease, transform .15s ease, border-color .2s ease;
}
.input-shell:hover{ transform:translateY(-1px); box-shadow:0 16px 40px rgba(0,0,0,.14); border-color:transparent; }

/* Icons pop a bit on hover (not focus) */
.group:hover .input-icon{
  color:#066e68; transform:translateY(-50%) scale(1.07);
  filter:drop-shadow(0 6px 14px rgba(72,175,163,.35));
}

/* Base shells — NO inner border on hover (it goes transparent), clean card look */
.input-shell{
  position:relative;
  border:1px solid #e5e7eb; /* visible at rest */
  border-radius:1rem;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  padding:.9rem 1rem .85rem 2.75rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition: box-shadow .25s ease, transform .15s ease, border-color .2s ease;
}
.input-shell:hover{
  transform: translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  border-color: transparent; /* remove inner border when snake shows */
}

/* Inputs */
.input-core{
  width:100%;
  background:transparent;
  border:0; outline:0;
  font-size:clamp(.95rem, .9rem + .2vw, 1rem);
  color:#0a0a0a;
}
.input-core::placeholder{ color:#8b8f98; } /* no floating label behavior */

/* Static labels (no lift) */
.input-label{
  position:absolute; left:2.75rem; top:.6rem;
  font-size:.72rem; color:#6b7280; pointer-events:none;
}

/* Icons — more visible, pop on hover (no focus req) */
.input-icon{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  color:#64748b; transition: transform .2s ease, color .2s ease, filter .2s ease;
}
.group:hover .input-icon{
  color:#0f766e;
  transform:translateY(-50%) scale(1.08);
  filter: drop-shadow(0 6px 14px rgba(72,175,163,.4));
}

/* === SNAKE BORDER (SVG) === */
.snake-border{
  position:absolute; inset:-3px; /* outside, so it doesn’t look like an inner border */
  width:calc(100% + 6px); height:calc(100% + 6px);
  border-radius:inherit;
  pointer-events:none;
  opacity:0; transition: opacity .18s ease;
}
.snake-path{
  stroke-dasharray: var(--seg,120) var(--gap,1000); /* visible length, then gap */
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

/* Show + animate only on hover or when active/selected */
.fx-snake:hover .snake-border,
.svc-tile[aria-checked="true"] .snake-border{ opacity:1; }
.fx-snake:hover .snake-path,
.svc-tile[aria-checked="true"] .snake-path{
  animation: snakeRun 2.2s linear infinite;
}
@keyframes snakeRun{
  to { stroke-dashoffset: -1600; }
}



/* Service tiles */
.svc-tile{
  position:relative;
  display:flex; align-items:center; gap:.6rem;
  border:1px solid #e5e7eb; border-radius:1rem;
  background:rgba(255,255,255,.9);
  padding:.85rem 1rem;
  transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease;
}
.svc-tile:hover{
  transform: translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  border-color: transparent; /* remove inner border when snake shows */
}
.svc-icon{ color:#0f172a; display:grid; place-items:center; }
.svc-label{ font-size:.92rem; color:#111; }

/* Selected state keeps the snake + slight elevation */
.svc-tile[aria-checked="true"]{
  transform: translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  border-color: transparent;
}


/* Base shells: same bg as card, glassy, no inner border */
.input-shell{
  position:relative; z-index:0; overflow:visible;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: none !important;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* The actual inputs: transparent so they inherit the shell’s bg */
.input-core{
  width:100%;
  background: transparent !important;
  border: none !important;
  outline: none;
  padding: 12px 14px 12px 42px;  /* room for icon */
  font-size: 0.95rem; color:#0b0b0b;
}

/* Labels: simple, static (no float animation) */
.input-label{
  position:absolute; left:42px; top:8px;
  font-size:.75rem; color:#6b7280; pointer-events:none;
}

/* Icons more visible, subtle pop on focus/hover */
.input-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#6b7280; transition: transform .25s ease, color .25s ease, filter .25s ease;
}
.input-shell:hover .input-icon,
.input-shell:focus-within .input-icon{
  color:#0f172a; transform: translateY(-50%) scale(1.08);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.15));
}

/* Keep the rainbow snake OUTSIDE only; no inner border */
.snake-border{
  position:absolute; inset:-4px;
  width:calc(100% + 8px); height:calc(100% + 8px);
  pointer-events:none; z-index:2;
}
.snake-path{
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset .9s cubic-bezier(.22,.8,.2,1);
}
.input-shell:hover .snake-path,
.input-shell:focus-within .snake-path{ stroke-dashoffset: 0; }
/* show/animate snake on hover or selected */
.fx-snake:hover .snake-border,
.svc-tile[aria-checked="true"] .snake-border{ opacity:1; }
.fx-snake:hover .snake-path,
.svc-tile[aria-checked="true"] .snake-path{ animation: snakeRun 2.1s linear infinite; }

@keyframes snakeRun{ to { stroke-dashoffset: -1600; } }

/* ---------- SERVICE TILES (no inner border + aurora bg) ---------- */
.svc-tile{
  position:relative;
  display:flex; align-items:center; gap:.6rem;
  border:0;                                 /* ⬅ remove inner border */
  border-radius:1rem;
  background:rgba(255,255,255,.95);
  padding:.9rem 1rem;
  overflow:hidden;                          /* contain the aurora glow */
  transition: transform .15s ease, box-shadow .25s ease;
  z-index:0;
}

/* animated aurora background (rotating conic gradient) */
.svc-tile::before{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(
    from 0turn,
    #6ad3ff, #b98aff, #ff7a7a, #ffb86c, #ffe66d, #7dff9b, #6ad3ff
  );
  filter: blur(26px) saturate(1.15);
  opacity:0;                                /* hidden at rest */
  transform: rotate(0turn) scale(1.05);
  transition: opacity .25s ease, transform .25s ease;
  z-index:0;
}

/* Hover/active: show aurora + spin */
.svc-tile:hover::before,
.svc-tile[aria-checked="true"]::before{
  opacity:.8;
  animation: auroraSpin 6s linear infinite;
}
@keyframes auroraSpin{ to { transform: rotate(1turn) scale(1.05); } }

/* Content sits above aurora */
.svc-icon, .svc-label{ position:relative; z-index:1; }
.svc-icon{ color:#0f172a; display:grid; place-items:center; transition: transform .2s ease, filter .2s ease; }
.svc-label{ font-size:.92rem; color:#111; }

.svc-tile:hover{ transform: translateY(-1px); box-shadow:0 16px 40px rgba(0,0,0,.16); }
.svc-tile:hover .svc-icon{
  transform: scale(1.08);
  filter: drop-shadow(0 6px 14px rgba(72,175,163,.35));
}

/* Selected state keeps elevation + aurora + snake */
.svc-tile[aria-checked="true"]{
  transform: translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.16);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .snake-path{ animation:none !important; }
  .svc-tile::before{ animation:none !important; }
}

/* Your quote card already has id="quoteCard" */
#quoteCard { --card-bg: rgba(255,255,255,.75); /* match .bg-white/75 */ }

/* Tile base: same glass bg, no inner border */
.svc-tile{
  position:relative; overflow:hidden; z-index:0;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: none !important;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: 14px 14px;
  display:flex; align-items:center; gap:10px;
  text-align:left;
}
/* Keep label/icon above effects */
.svc-icon, .svc-label{ position:relative; z-index:1; }
.svc-label{ font-size:.9rem; color:#0b0b0b; }

/* ---- Dirt layer (speckles) ---- */
.svc-tile::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.45; transition: opacity .8s ease;
  background:
    /* small specks */
    repeating-radial-gradient(circle at 22% 28%, rgba(110,85,65,.22) 0 1.5px, transparent 1.5px 9px),
    repeating-radial-gradient(circle at 78% 20%, rgba(90,90,90,.2)   0 1px,   transparent 1px 8px),
    repeating-radial-gradient(circle at 35% 76%, rgba(120,100,80,.22)0 1.6px, transparent 1.6px 10px),
    /* soft smudges */
    radial-gradient(120px 80px at 70% 60%, rgba(80,60,40,.09), transparent 60%),
    radial-gradient(100px 70px at 30% 40%, rgba(60,60,60,.08), transparent 60%);
  filter: saturate(1);
}

/* ---- Cleaning sweep (foam/water) ---- */
.svc-tile::before{
  content:""; position:absolute; inset:-15% -30%; z-index:0; pointer-events:none;
  opacity:0; transform: translateX(-120%) rotate(0.5deg);
  filter: blur(10px);
  background:
    radial-gradient(120px 80px at 30% 50%, rgba(255,255,255,.95), rgba(255,255,255,.6) 55%, transparent 65%),
    radial-gradient(80px 60px  at 55% 50%, rgba(255,255,255,.85), rgba(255,255,255,.45) 60%, transparent 70%),
    radial-gradient(60px 40px  at 75% 50%, rgba(255,255,255,.75), rgba(255,255,255,.35) 60%, transparent 70%);
}

/* Trigger sweep + remove dirt on hover/selected */
.svc-tile:hover::before,
.svc-tile[aria-checked="true"]::before{
  animation: cleanSweep .95s cubic-bezier(.22,.8,.2,1) forwards;
  opacity:1;
}
.svc-tile:hover::after{ animation: dirtFade .95s ease forwards; }
.svc-tile[aria-checked="true"]::after{ opacity:0; }

/* Optional: small sparkle while cleaning */
.svc-tile:hover .svc-icon,
.svc-tile[aria-checked="true"] .svc-icon{
  transform: scale(1.08);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.15));
  transition: transform .25s ease, filter .25s ease;
}

/* Keep the snake ring outside for tiles too */
.svc-tile .snake-border{ inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); z-index:3; }
.svc-tile .snake-path{ stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset .9s cubic-bezier(.22,.8,.2,1); }
.svc-tile:hover .snake-path,
.svc-tile[aria-checked="true"] .snake-path{ stroke-dashoffset: 0; }

/* Animations */
@keyframes cleanSweep{
  0%   { transform: translateX(-120%) rotate(0.5deg); }
  60%  { transform: translateX(10%)   rotate(0.5deg); }
  100% { transform: translateX(120%)  rotate(0.5deg); }
}
@keyframes dirtFade{
  0%   { opacity:.45; }
  60%  { opacity:.18; }
  100% { opacity:0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .svc-tile::before, .svc-tile::after, .snake-path{ animation:none !important; transition:none !important; }
}

.input-shell, .svc-tile, .input-core { border: 0 !important; box-shadow: 0 10px 28px rgba(0,0,0,.08); }



/* ========== INPUTS: white background inside, no inner border ========== */
.input-shell{
  background: transparent !important;   /* let the white input show */
  border: 0 !important;
  padding: 6px;                         /* small cushion under the snake border */
  border-radius: 14px;
}

.input-core{
  position: relative; z-index: 1;
  width: 100%;
  background: #ffffff !important;       /* ← pure white field */
  color:#0b0b0b;
  border: 0 !important;                 /* no inner border */
  border-radius: 12px;
  padding: 12px 14px 12px 46px;         /* room for the icon */
  box-shadow: 0 8px 22px rgba(0,0,0,.06); /* soft elevation, not “inner border” */
  outline: none;
}

/* Label stays subtle and static (since you’re using placeholders) */
.input-label{
  position:absolute; left:46px; top:6px;
  font-size:.72rem; color:#6b7280; pointer-events:none;
}

/* Icons stay above the white field and pop a bit on hover/focus */
.input-icon{ 
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#6b7280; z-index:2; 
  transition: transform .2s ease, color .2s ease, filter .2s ease;
}
.input-shell:hover .input-icon,
.input-shell:focus-within .input-icon{
  color:#0f172a; transform:translateY(-50%) scale(1.08);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.15));
}

/* Keep your rainbow “snake” OUTSIDE only */
.snake-border{
  position:absolute; inset:-4px;
  width:calc(100% + 8px); height:calc(100% + 8px);
  pointer-events:none; z-index:3;
}
.snake-path{
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset .9s cubic-bezier(.22,.8,.2,1);
}
.input-shell:hover .snake-path,
.input-shell:focus-within .snake-path{ stroke-dashoffset: 0; }

/* ========== SERVICE TILES: make them larger/punchier ========== */
#q-service-tiles{ gap: 14px; }                /* a bit more breathing room */

.svc-tile{
  padding: 18px 16px;                         /* bigger hit area */
  min-height: 92px;                           /* taller tiles */
  border-radius: 16px;
}

/* Larger icon + stronger label */
.svc-icon svg{ width: 30px; height: 30px; }
.svc-label{ font-size: 1rem; font-weight: 600; color:#0b0b0b; }

/* On md+ screens, make them even beefier */
@media (min-width: 768px){
  .svc-tile{ min-height: 110px; padding: 20px 18px; }
  .svc-icon svg{ width: 32px; height: 32px; }
  .svc-label{ font-size: 1.05rem; }
}

/* Keep the snake ring outside for tiles too */
.svc-tile .snake-border{ inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); z-index:4; }
.svc-tile .snake-path{ stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset .9s cubic-bezier(.22,.8,.2,1);}
.svc-tile:hover .snake-path,
.svc-tile[aria-checked="true"] .snake-path{ stroke-dashoffset: 0; }

/* If any legacy borders sneak in from earlier CSS, hard-kill them: */
.input-shell, .svc-tile, .input-core { border: 0 !important; }

.input-shell:hover .input-icon{
  color:#0f766e;
  transform:translateY(-50%) scale(1.08);
  filter: drop-shadow(0 6px 14px rgba(72,175,163,.4));
}

/* hide radios but keep them focusable/accessible */
  .prop-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* make overlay effects not block clicks */
  .svc-tile { position: relative; cursor: pointer; }
  .snake-border, .wash { pointer-events: none; }

  /* active state driven by :checked */
  .prop-radio:checked + .svc-tile { transform: translateY(-1px); }
  .prop-radio:checked + .svc-tile .wash { opacity: 1; animation-play-state: running; }
  .prop-radio:checked + .svc-tile .snake-path { animation: snake-dash 1.6s linear infinite; }

  /* optional focus ring when tabbing */
  .prop-radio:focus-visible + .svc-tile { box-shadow: 0 0 0 4px rgba(0,0,0,.08); }

  /* Hide radios but keep them tabbable */
  .prop-radio {
    position:absolute; inset:auto; width:1px; height:1px; margin:-1px; padding:0;
    border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
  }

  /* Overlay visuals should not block click */
  .svc-tile { position:relative; cursor:pointer; }
  .svc-tile .wash, .svc-tile .snake-border { pointer-events:none; }

  /* Persistent selected look (works via :checked and JS class fallback) */
  .prop-radio:checked + .svc-tile,
  .svc-tile.is-selected {
    transform: translateY(-1px);
  }
  .prop-radio:checked + .svc-tile .wash,
  .svc-tile.is-selected .wash {
    opacity: 1;
    animation-play-state: running;
  }
  .prop-radio:checked + .svc-tile .snake-path,
  .svc-tile.is-selected .snake-path {
    animation: snake-dash 1.6s linear infinite;
  }

  /* Keyboard focus ring on the visual label */
  .prop-radio:focus-visible + .svc-tile {
    box-shadow: 0 0 0 4px rgba(0,0,0,.08);
  }

  /* make overlay visuals ignore pointer events */
  .svc-tile .snake-border, .svc-tile .wash { pointer-events:none; }

  /* selected state sticks (same as your service tiles) */
  .svc-tile.is-selected {
    transform: translateY(-1px);
  }
  .svc-tile.is-selected .snake-path { animation: snake-dash 1.6s linear infinite; }
  .svc-tile.is-selected .wash      { opacity:1; animation-play-state:running; }

/* Staggered entrance per slide */
[data-carousel] [data-slide] .slide-stagger > *{
  opacity:0; transform:translateY(6px)
}
[data-carousel] [data-slide][data-active] .slide-stagger > *{
  animation:slideFadeUp .55s cubic-bezier(.22,1,.36,1) forwards
}
[data-carousel] [data-slide][data-active] .slide-stagger > *:nth-child(1){animation-delay:.02s}
[data-carousel] [data-slide][data-active] .slide-stagger > *:nth-child(2){animation-delay:.06s}
[data-carousel] [data-slide][data-active] .slide-stagger > *:nth-child(3){animation-delay:.10s}
[data-carousel] [data-slide][data-active] .slide-stagger > *:nth-child(4){animation-delay:.14s}
[data-carousel] [data-slide][data-active] .slide-stagger > *:nth-child(5){animation-delay:.18s}

@keyframes slideFadeUp{
  from{opacity:0; transform:translateY(6px)}
  to  {opacity:1; transform:none}
}

/* Dots: pill grows when active */
[data-carousel] [data-dot]{
  width:8px; height:8px; border-radius:9999px;
  background:rgba(255,255,255,.35);
  transition:all .35s cubic-bezier(.22,1,.36,1)
}
[data-carousel] [data-dot][data-active]{
  width:22px; background:rgba(255,255,255,.95)
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-carousel] [data-track]{ transition:none !important }
  [data-carousel] [data-slide] .slide-stagger > *{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
}

/* --- Slide card look (works even if your JS injects simple <li><a><img>) --- */
.ig-splide .splide__slide a{
  display:block; position:relative; overflow:hidden; border-radius:1rem;
  background: rgba(255,255,255,.6); backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
  border: 1px solid rgba(2,6,23,.06);
  transform: translateZ(0);
}
.ig-splide .splide__slide a img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.ig-splide .splide__slide a::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.45) 100%);
  opacity:.0; transition:opacity .4s ease;
}
.ig-splide .splide__slide a:hover img{ transform: scale(1.05); }
.ig-splide .splide__slide a:hover::after{ opacity:1; }

/* hover CTA */
.ig-splide .ig-cta{
  position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:.5rem;
  color:#fff; font-size:.85rem; padding:.35rem .6rem; border-radius:.65rem;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  transform: translateY(8px); opacity:0; transition: all .35s cubic-bezier(.22,1,.36,1);
}
.ig-splide .splide__slide a:hover .ig-cta{ transform:none; opacity:1; }

/* --- Arrows: modern, minimal, edge-aligned --- */
.ig-arrows .splide__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  padding:.4rem .5rem; background:transparent; border:none; color:#0a0a0a;
  transition: transform .25s ease, opacity .25s ease, color .25s ease;
  z-index:3; cursor:pointer;
}
.ig-arrows .splide__arrow--prev{ left:.25rem; }
.ig-arrows .splide__arrow--next{ right:.25rem; }
.ig-arrows .splide__arrow:hover{ color:#111; transform:translateY(-50%) scale(1.06); }
.ig-arrows .splide__arrow:disabled{ opacity:.35; cursor:not-allowed; }

/* --- Dots: pill grows when active --- */
.ig-dots{ display:flex; gap:.35rem; justify-content:center; padding:14px 0 18px; }
.ig-dots .splide__pagination__page{
  width:8px; height:8px; border-radius:999px; background:rgba(0,0,0,.25);
  transform-origin:left center; transition: all .35s cubic-bezier(.22,1,.36,1);
  border:none;
}
.ig-dots .splide__pagination__page.is-active{
  width:22px; background:rgba(0,0,0,.75);
}

/* --- Progress bar --- */
.ig-progress{ background:linear-gradient(90deg,rgba(0,0,0,.05),transparent); }
.ig-progress-bar{
  background: linear-gradient(90deg,#fb7185,#f59e0b,#22d3ee);
  box-shadow: 0 0 16px rgba(251,113,133,.35);
  transition: transform .2s linear;
}

/* --- Staggered entrance per active slide --- */
.ig-splide .splide__slide .ig-stagger > *{ opacity:0; transform: translateY(6px); }
.ig-splide .splide__slide.is-active .ig-stagger > *{
  animation: igFadeUp .55s cubic-bezier(.22,1,.36,1) forwards;
}
.ig-splide .splide__slide.is-active .ig-stagger > *:nth-child(1){ animation-delay:.02s }
.ig-splide .splide__slide.is-active .ig-stagger > *:nth-child(2){ animation-delay:.06s }
.ig-splide .splide__slide.is-active .ig-stagger > *:nth-child(3){ animation-delay:.10s }
.ig-splide .splide__slide.is-active .ig-stagger > *:nth-child(4){ animation-delay:.14s }
@keyframes igFadeUp{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }

/* Card look */
.ig-splide .splide__slide a{
  display:block; position:relative; overflow:hidden; border-radius:1rem;
  background: rgba(255,255,255,.6); backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
  border: 1px solid rgba(2,6,23,.06);
}
.ig-splide .splide__slide a img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.ig-splide .splide__slide a::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.45) 100%);
  opacity:0; transition:opacity .4s ease;
}
.ig-splide .splide__slide a:hover img{ transform: scale(1.05); }
.ig-splide .splide__slide a:hover::after{ opacity:1; }

/* Caption CTA (optional) */
.ig-cta{
  position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:.5rem;
  color:#fff; font-size:.85rem; padding:.35rem .6rem; border-radius:.65rem;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  transform: translateY(8px); opacity:0; transition: all .35s cubic-bezier(.22,1,.36,1);
}
.ig-splide .splide__slide a:hover .ig-cta{ transform:none; opacity:1; }

/* Arrows */
.ig-arrows .splide__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:#0a0a0a; padding:.4rem .5rem;
  transition: transform .25s ease, opacity .25s ease, color .25s ease;
  z-index:3; cursor:pointer;
}
.ig-arrows .splide__arrow--prev{ left:.25rem; }
.ig-arrows .splide__arrow--next{ right:.25rem; }
.ig-arrows .splide__arrow:hover{ color:#111; transform:translateY(-50%) scale(1.06); }
.ig-arrows .splide__arrow:disabled{ opacity:.35; cursor:not-allowed; }

/* Dots */
.ig-dots{ display:flex; gap:.35rem; justify-content:center; padding:14px 0 18px; }
.ig-dots .splide__pagination__page{
  width:8px; height:8px; border-radius:999px; background:rgba(0,0,0,.25);
  transform-origin:left center; transition: all .35s cubic-bezier(.22,1,.36,1);
  border:none;
}
.ig-dots .splide__pagination__page.is-active{ width:22px; background:rgba(0,0,0,.75); }

/* Staggered entrance */
.ig-splide .splide__slide .ig-stagger > *{ opacity:0; transform: translateY(6px); }
.ig-splide .splide__slide.is-active .ig-stagger > *{
  animation: igFadeUp .55s cubic-bezier(.22,1,.36,1) forwards;
}
.ig-splide .splide__slide.is-active .ig-stagger > *:nth-child(1){ animation-delay:.02s }
.ig-splide .splide__slide.is-active .ig-stagger > *:nth-child(2){ animation-delay:.06s }
.ig-splide .splide__slide.is-active .ig-stagger > *:nth-child(3){ animation-delay:.10s }
.ig-splide .splide__slide.is-active .ig-stagger > *:nth-child(4){ animation-delay:.14s }
@keyframes igFadeUp{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }

 /* Keep arrows from being mirrored by default Splide styles */
  .ig-arrows .splide__arrow--prev { transform: translateY(-50%) !important; }
  .ig-arrows .splide__arrow--next { transform: translateY(-50%) !important; }
  .ig-arrows .splide__arrow--prev svg { transform: none !important; }

   /* Track height breathing room for arrows/dots */
  .gr-splide .splide__track { padding: 10px 0 46px; }

  /* ONE visible card: the card itself is injected by JS (keeps your hooks) */
  .gr-splide .splide__slide { padding: .25rem; } /* tiny gutter so card breathes */
  .gr-card {
    position: relative;
    border-radius: 20px;
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.14);
    padding: 22px 22px 18px 22px;
    min-height: 210px;
    transform: translateY(6px) scale(.985);
    opacity: 0;
  }

  /* Entrance anim only when slide becomes active */
  .gr-splide .splide__slide.is-active .gr-card{
    animation: grIn .55s cubic-bezier(.22,1,.36,1) .05s forwards;
  }
  @keyframes grIn{
    from{ opacity:0; transform:translateY(6px) scale(.985) }
    to  { opacity:1; transform:none }
  }
  /* Subtle hover polish for desktop */
  @media (hover:hover){
    .gr-card:hover{ transform: translateY(-2px); box-shadow: 0 20px 48px rgba(0,0,0,.2); transition:.3s cubic-bezier(.22,1,.36,1) }
  }

  /* Avatar ring in Google Blue (fallback bg) */
  .gr-avatar{
    width:42px;height:42px;border-radius:9999px;overflow:hidden;
    display:grid;place-items:center;
    background:#4285F4; color:white; font-weight:700; font-size:12px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(66,133,244,.3);
  }
  .gr-avatar img{ width:100%;height:100%;object-fit:cover;display:block }

  /* Stars in Google Yellow */
  .gr-stars svg{ color:#FBBC05 }
  .gr-stars svg.gr-empty{ color:#E5E7EB }

  /* Arrows: keep icons un-rotated (Splide rotates prev by default) */
  .gr-arrows .splide__arrow{ background:transparent;border:0;color:#fff;opacity:.95 }
  .gr-arrows .splide__arrow:hover{ color:#fff }
  .gr-arrows .splide__arrow--prev{ left: -6px; }
  .gr-arrows .splide__arrow--next{ right: -6px; }
  .gr-arrows .splide__arrow svg{ transform:none !important; }

  /* Dots: minimal pills */
  .gr-dots .splide__pagination__page{
    background: rgba(255,255,255,.4);
    width:8px;height:8px;border-radius:999px;margin:0 4px;
    transition: all .35s cubic-bezier(.22,1,.36,1);
  }
  .gr-dots .splide__pagination__page.is-active{ background:#fff;width:22px }

   .shimmer-link{
    position:relative; display:inline-block;
    background-image:linear-gradient(90deg,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,1) 25%,
      rgba(255,255,255,.45) 50%,
      rgba(255,255,255,1) 75%,
      rgba(255,255,255,.45) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
            color:transparent;
    text-decoration:none;
    animation:shimmer-move 15.2s linear infinite;
    transition:filter .25s ease;
  }
  .shimmer-link::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-0.15rem; height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.85), rgba(255,255,255,.3));
    transform-origin:left; transform:scaleX(.55);
    opacity:.8; transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s;
  }
  .shimmer-link:hover{ filter:drop-shadow(0 1px 6px rgba(255,255,255,.25)); }
  .shimmer-link:hover::after{ transform:scaleX(1); opacity:1; }

  @keyframes shimmer-move{
    0%{ background-position:-200% 0; }
    100%{ background-position:200% 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .shimmer-link{ animation:none; -webkit-text-fill-color:#fff; color:#fff; }
  }


  
    /* allow vertical page scroll but capture horizontal drags */
  [data-carousel] [data-viewport] { touch-action: pan-y; cursor: grab; }
  [data-carousel].is-dragging { user-select: none; }
  [data-carousel].is-dragging [data-viewport] { cursor: grabbing; }

@keyframes spin { to { transform: rotate(360deg); } }
.title-pop{ text-shadow:0 2px 12px rgba(0,0,0,.35),0 0 20px rgba(255,255,255,.15) }

@keyframes spin { to { transform: rotate(360deg); } }

/* subtle glow on the headline */
.title-pop{ text-shadow:0 2px 12px rgba(0,0,0,.35),0 0 20px rgba(255,255,255,.15) }

/* Sweep-in transition for new image layer */
.offer-sweep-enter{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:translateX(6%) scale(1.02);
  filter: blur(4px);
  opacity:0;
}
.offer-sweep-enter.offer-sweep-active{
  transform:translateX(0) scale(1);
  filter: blur(0);
  opacity:1;
  transition: transform 480ms cubic-bezier(.22,1,.36,1),
              opacity 480ms cubic-bezier(.22,1,.36,1),
              filter 480ms cubic-bezier(.22,1,.36,1);
}

/* Optional very subtle Ken-Burns on the steady bg between transitions */
#offer-bg.offer-ken {
  transition: transform 4000ms ease;
  transform: scale(1.025);
}

/* Dots active state */
#offer-dots button{
  height:6px; width:24px; border-radius:9999px;
  background:rgba(255,255,255,.35); transition:background .2s ease, width .25s ease;
}
#offer-dots button[aria-current="true"]{
  background:rgba(255,255,255,.95); width:32px;
}

/* Drag cursor hint on desktop */
@media (hover:hover){
  #offer-hero{ cursor: grab; }
  #offer-hero.dragging{ cursor: grabbing; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* subtle glow on the title */
.lux-title { text-shadow: 0 2px 12px rgba(0,0,0,.35), 0 0 20px rgba(255,255,255,.1); }

/* glassy subtitle badge */
.badge-glass{
  background: linear-gradient(to bottom right, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  letter-spacing: .02em;
}

/* dots look sharper and ‘active’ pops more */
#offer-dots button{
  height: 6px; width: 22px; border-radius: 9999px;
  background: rgba(255,255,255,.35);
  transition: background .2s ease, width .25s ease, box-shadow .25s ease;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
#offer-dots button[aria-current="true"]{
  background: rgba(255,255,255,.95);
  width: 30px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.35);
}


/* SECTION: full-width bg + tint */
.why-choose{
  position:relative;
  min-height:70vh;
  background:center/cover no-repeat url('imgs/why.jpg');
  isolation:isolate;
  overflow:hidden;
}
.why-choose::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  z-index:0;
}

/* CENTER the whole text stack perfectly */
.whyus-center{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  width:min(1100px,92vw);
  min-height:inherit;          /* take section height */
  margin-inline:auto;
  padding:clamp(16px,3vw,28px);
}

/* Professional H1 */
.why-heading{
  margin:0;
  color:#fff;
  font-weight:800;
  line-height:1.08;
  letter-spacing:.2px;
  font-size:clamp(1.8rem,4vw,3rem);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.why-accent{
  display:block; height:3px; width:clamp(64px,10vw,120px);
  margin:.45rem auto .6rem;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 20px rgba(255,255,255,.3);
}

/* Carousel */
.whyus{ width:100%; }
.whyus-viewport{ overflow:hidden; width:100%; cursor:grab; }
.whyus-viewport:active{ cursor:grabbing; }
.whyus-track{
  display:flex; will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  touch-action:pan-y;
}
.whyus-slide{
  flex:0 0 100%;
  padding:.15rem 0 .3rem;
  color:#fff;
  opacity:.62;
  transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease, filter .45s ease;
}
.whyus-slide.is-active{
  opacity:1; transform:translateY(0);
}

/* Titles/lines — tight gaps & responsive */
.whyus-title{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:800;
  font-size:clamp(1.1rem,3.2vw,1.6rem);
  margin:.1rem 0 .1rem;
  text-shadow:0 3px 14px rgba(0,0,0,.35);
}
.whyus-ico{ width:1.2rem; height:1.2rem; fill:currentColor; opacity:.95; }
.whyus-line{
  margin:.1rem 0 0;
  font-size:clamp(.95rem,2.6vw,1.1rem);
  letter-spacing:.18px;
  opacity:.95;
}
.pipe{ margin:0 .45rem; opacity:.65; }

/* Dots with clear active glow */
.whyus-dots{
  display:flex; gap:.5rem; justify-content:center; align-items:center;
  margin-top:.55rem;
}
.whyus-dots button{
  width:22px; height:6px; border-radius:9999px; border:0;
  background:rgba(255,255,255,.35);
  transition:background .25s ease, width .25s ease, transform .25s ease, box-shadow .25s ease;
  cursor:pointer; outline:none;
}
.whyus-dots button[aria-current="true"]{
  background:#fff; width:36px; transform:translateY(-1px);
  box-shadow:0 0 20px rgba(255,255,255,.75), 0 8px 20px rgba(0,0,0,.25);
}

/* LIGHT rig: absolutely positioned so it never shifts layout */
.light{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.wire{
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; width:3px; height:clamp(100px,16vh,160px);
  background:linear-gradient(#000,#222);
  filter:drop-shadow(0 0 1px rgba(255,255,255,.15));
}
.bulb{
  position:absolute; left:50%; transform:translateX(-50%);
  top:clamp(90px,15.5vh,150px);
  width:110px; height:110px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 45%, #5a5a5a, #3a3a3a 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.bulb::before{
  content:""; position:absolute; top:-58px; left:calc(50% - 22px);
  width:44px; height:90px; border-top:30px solid #000; border-radius:10px;
  background:linear-gradient(90deg,#6f7882,#aeb5bd 50%,#6f7882);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}


/* ON state (body.on toggled by bulb visibility) */
body.on .bulb{
  background:#fff;
  box-shadow:0 0 50px #fff,0 0 100px #fff,0 0 150px #fff,0 0 220px rgba(255,208,120,.9),0 0 300px rgba(255,180,80,.6);
}
body.on .bulb::before{ background:linear-gradient(90deg,#aab2bb,#e4e9ef 50%,#aab2bb); }
body.on .bulb::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,200,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 70%);
  filter:blur(30px); opacity:.9; pointer-events:none;
}

/* Ambient halo */
.ambient{
  position:absolute; left:50%; top:calc(clamp(90px,15.5vh,150px) + 55px);
  transform:translate(-50%,-50%); width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,216,107,.35), rgba(255,159,28,.10) 45%, transparent 70%);
  filter:blur(28px); opacity:0; pointer-events:none; z-index:0;
}
body.on .ambient{ opacity:1; transition:opacity .3s ease; }
body:not(.on) .ambient{ opacity:0; transition:opacity .25s ease; }

/* Switch (clickable; optional manual override) */
.switch{
  position:absolute; right:clamp(20px,4vw,50px); top:25%; transform:translateY(-50%);
  width:86px; height:140px; background:linear-gradient(#eee,#ccc,#eee);
  border:3px solid #000; border-radius:12px; display:grid; place-items:center;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.6), 0 12px 28px rgba(0,0,0,.35);
  pointer-events:auto;
}
.switch .btn{
  position:relative; width:28px; height:64px; border-radius:8px; border:2px solid #000;
  background:linear-gradient(#777,#fff,#777);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.9), 0 6px 16px rgba(0,0,0,.25);
  transition:transform .2s ease;
  cursor:pointer;
}
.switch .btn::before{
  content:""; position:absolute; left:0; width:100%; height:85%; border-radius:6px;
  background:linear-gradient(#fff,#fff); top:0; transition:top .2s ease;
}
.on .switch .btn::before{ top:15%; }
.switch .btn:active{ transform:scale(.98); }

/* Light → text “premium” boost */
body.on .why-heading{ text-shadow:0 4px 16px rgba(0,0,0,.35), 0 0 24px rgba(255,255,210,.22); }
body.on .why-accent{ box-shadow:0 0 24px rgba(255,255,200,.5); }
body.on .whyus-slide.is-active .whyus-title{ transform:translateY(-2px) scale(1.01); filter:drop-shadow(0 0 18px rgba(255,255,210,.22)); }
body.on .whyus-slide.is-active .whyus-line{ transform:translateY(-1px); }

/* Mobile tweaks */
@media (max-width:640px){
  .why-choose{ min-height:85vh; }
  .wire{ height:100px; }
  .bulb{ top:100px; width:96px; height:96px; }
  .switch{ width:78px; height:128px; }
  .switch .btn{ width:26px; height:58px; }
}



      /* Frosted bloom glow when on (your span lenses) */
    .bulb span:nth-child(1),
    .bulb span:nth-child(2) {
      position: absolute;
      top: -18px;
      display: block;
      width: 36px; height: 36px;
      background: transparent;
      filter: blur(.2px);
    }
    .bulb span:nth-child(1){
      left: -6px; transform: rotate(342deg);
      border-bottom-right-radius: 40px;
      box-shadow: 22px 22px 0 12px rgba(255,255,255,.45);
    }
    .bulb span:nth-child(2){
      right: -6px; transform: rotate(17deg);
      border-bottom-left-radius: 40px;
      box-shadow: -22px 22px 0 12px rgba(255,255,255,.45);
    }