/* ── Animations ── */
   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(18px)
       }

       to {
           opacity: 1;
           transform: translateY(0)
       }
   }

   @keyframes fadeIn {
       from {
           opacity: 0
       }

       to {
           opacity: 1
       }
   }

   @keyframes pulseDot {
       0%, 100% {
           box-shadow: 0 0 0 5px rgba(6, 165, 142, .2), 0 0 18px rgba(6, 165, 142, .5)
       }

       50% {
           box-shadow: 0 0 0 9px rgba(6, 165, 142, .06), 0 0 28px rgba(6, 165, 142, .2)
       }
   }

   @keyframes scrollPulse {
       0%, 100% {
           opacity: 1
       }

       50% {
           opacity: .25
       }
   }

   .anim-1 {
       opacity: 0;
       animation: fadeUp .7s .2s forwards
   }

   .anim-2 {
       opacity: 0;
       animation: fadeUp .7s .35s forwards
   }

   .anim-3 {
       opacity: 0;
       animation: fadeUp .7s .5s forwards
   }

   .anim-4 {
       opacity: 0;
       animation: fadeUp .7s .65s forwards
   }

   .anim-fi {
       opacity: 0;
       animation: fadeIn 1s 1.1s forwards
   }

   .hero-grid {
       position: absolute;
       inset: 0;
       background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
       background-size: 56px 56px;
       mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
   }

   .hero-stripe {
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 4px;
       background: #06A58E
   }


   /* ── Gallery Slides ── */
   .gallery-slide {
       position: absolute;
       inset: 0;
       opacity: 0;
       transform: scale(1.04);
       transition: opacity .55s cubic-bezier(.4, 0, .2, 1), transform .55s cubic-bezier(.4, 0, .2, 1);
   }

   .gallery-slide.active {
       opacity: 1;
       transform: scale(1);
   }

   /* Brighten image on card hover */
   .branch-card:hover .gallery-slide.active img {
       filter: brightness(1) saturate(1) !important;
   }

   /* ── Gallery Arrows — show on hover (desktop), always show on touch ── */
   @media (hover: hover) {
       .gallery-wrap:hover .gallery-arrow {
           opacity: 1 !important;
           pointer-events: all !important;
       }
   }

   @media (pointer: coarse) {
       .gallery-arrow {
           opacity: 1 !important;
           pointer-events: all !important;
       }
   }

   /* ── Thumbnail Strip ── */
   .thumb-strip::-webkit-scrollbar {
       display: none;
   }

   .thumb-strip {
       scrollbar-width: none;
   }

   .thumb-item {
       border: 2px solid transparent;
       transition: border-color .2s;
   }

   .thumb-item.active {
       border-color: #06A58E;
   }

   .thumb-item img {
       filter: brightness(.5) saturate(.5);
       transition: filter .2s, transform .3s;
   }

   .thumb-item.active img,
   .thumb-item:hover img {
       filter: brightness(1) saturate(1);
   }

   .thumb-item:hover img {
       transform: scale(1.05);
   }

   /* ── Progress Dots ── */
   .g-dot {
       transition: background .25s, transform .25s;
   }

   .g-dot.active {
       background: #06A58E !important;
       transform: scale(1.5);
   }

   /* ── Gallery min height on mobile ── */
   .gallery-wrap {
       min-height: 280px;
   }

   /* ── Lightbox ── */
   .lightbox {
       opacity: 0;
       pointer-events: none;
       transition: opacity .28s;
   }

   .lightbox.open {
       opacity: 1;
       pointer-events: all;
   }

   /* Lightbox image pop-in */
   .lb-wrap {
       transform: scale(.92);
       transition: transform .38s cubic-bezier(.34, 1.4, .64, 1);
   }

   .lightbox.open .lb-wrap {
       transform: scale(1);
   }

   /* Lightbox thumbnails */
   .lb-thumb-item {
       border: 2px solid transparent;
       transition: border-color .2s;
   }

   .lb-thumb-item.active {
       border-color: #06A58E;
   }

   .lb-thumb-item img {
       filter: brightness(.45);
       transition: filter .2s;
   }

   .lb-thumb-item.active img,
   .lb-thumb-item:hover img {
       filter: brightness(1);
   }

   /* Service tags hover */
   .service-tag {
       transition: all .22s
   }

   .branch-card:hover .service-tag {
       border-color: rgba(6, 165, 142, .3);
       color: #06A58E;
       background: #e6f7f4
   }

   .contact-card {
       transition: border-color .25s, background .25s, box-shadow .25s
   }

   .contact-card:hover {
       border-color: rgba(6, 165, 142, .35) !important;
       background: #e6f7f4 !important;
       box-shadow: 0 4px 16px rgba(6, 165, 142, .1)
   }