/* =========================================================
   TRIVI INFRACONS — visual FX layer (shared across all pages)
   Adds: subtle animated background graphics + illustrated
   scenes inside the previously-empty placeholder divs.
   Loaded AFTER the inline stylesheet so it augments it.
   Design intent: subtle, professional, premium.
   ========================================================= */

/* ---------- 1. GLOBAL ANIMATED BACKGROUND ---------- */
/* Base tint sits behind everything; plain (white) sections
   become transparent so the animated layer shows through,
   while .bg-mist / hero / banners stay opaque for rhythm. */
html{background:var(--mist-2)}
body{background:transparent}

section:not(.bg-mist):not(.bg-mist-2):not(.hero):not(.page-banner){
  background:transparent;
}

.trivi-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
/* three slow-drifting colour blobs */
.trivi-bg .blob{
  position:absolute;border-radius:50%;filter:blur(8px);
  opacity:.07;will-change:transform;
}
.trivi-bg .blob.b1{
  width:46vw;height:46vw;left:-12vw;top:-10vw;
  background:radial-gradient(circle at 30% 30%,var(--water),transparent 70%);
  animation:triviDrift1 46s ease-in-out infinite;
}
.trivi-bg .blob.b2{
  width:40vw;height:40vw;right:-14vw;top:22vh;
  background:radial-gradient(circle at 60% 40%,var(--teal),transparent 70%);
  animation:triviDrift2 58s ease-in-out infinite;
}
.trivi-bg .blob.b3{
  width:38vw;height:38vw;left:18vw;bottom:-16vw;
  background:radial-gradient(circle at 50% 50%,var(--leaf),transparent 70%);
  animation:triviDrift3 52s ease-in-out infinite;
}
/* faint topographic contour texture drifting very slowly */
.trivi-bg::after{
  content:"";position:absolute;inset:-60px;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%230a5c8a' stroke-width='1' opacity='0.05'%3E%3Cpath d='M40 280 C140 200 260 200 360 280 S520 360 560 300'/%3E%3Cpath d='M20 320 C140 240 280 240 380 320 S540 400 560 340'/%3E%3Cpath d='M0 360 C140 280 300 280 400 360 S560 440 560 380'/%3E%3Cpath d='M60 120 C160 60 300 60 400 120 S540 180 560 140'/%3E%3Cpath d='M40 160 C160 100 300 100 420 160 S540 220 560 180'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 560px;
  animation:triviContour 120s linear infinite;
}
@keyframes triviDrift1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(6vw,4vh) scale(1.08)}
}
@keyframes triviDrift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-5vw,5vh) scale(1.1)}
}
@keyframes triviDrift3{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4vw,-5vh) scale(1.06)}
}
@keyframes triviContour{
  0%{background-position:0 0}
  100%{background-position:560px 280px}
}

/* ---------- 2. ILLUSTRATED PROJECT TILES (.proj .ph) ---------- */
/* turns the flat gradient tile into a restored-lake scene */
.proj .ph{
  background:linear-gradient(180deg,#bfe6f2 0%,#7fc6dd 38%,#0e8a8a 100%) !important;
}
.proj .ph svg{display:none}            /* hide old centred icon */
.proj .ph::before{                      /* drifting clouds layer */
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 180'%3E%3Cg fill='%23ffffff' opacity='0.55'%3E%3Cellipse cx='90' cy='34' rx='38' ry='12'/%3E%3Cellipse cx='120' cy='40' rx='30' ry='10'/%3E%3Cellipse cx='280' cy='26' rx='46' ry='13'/%3E%3Cellipse cx='315' cy='32' rx='30' ry='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140% 100%;background-repeat:no-repeat;
  opacity:.7;animation:triviClouds 40s linear infinite;
}
.proj .ph::after{                       /* sun + hills + rippled water */
  content:"";position:absolute;inset:0;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 180' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='328' cy='44' r='20' fill='%23ffe7a0' opacity='0.9'/%3E%3Cpath d='M0 96 Q70 70 150 90 T400 80 V180 H0Z' fill='%232f9e54' opacity='0.92'/%3E%3Cpath d='M0 116 Q110 96 230 112 T400 104 V180 H0Z' fill='%231f7d63'/%3E%3Cpath d='M0 130 Q120 116 240 128 T400 122 V180 H0Z' fill='%230e6f7e'/%3E%3Cg stroke='%23ffffff' stroke-width='1.4' opacity='0.45' fill='none'%3E%3Cpath d='M30 150 H140'/%3E%3Cpath d='M210 158 H330'/%3E%3Cpath d='M90 167 H250'/%3E%3C/g%3E%3Cg fill='%231f7d63'%3E%3Cpath d='M44 96 q3 -16 6 0 z'/%3E%3Cpath d='M52 96 q3 -20 6 0 z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-position:bottom;
}
.proj .ph .st{z-index:3}               /* keep the location chip on top */

/* ---------- 3. GALLERY BEFORE / AFTER SCENES ---------- */
.gcard .ba div{
  position:relative;overflow:hidden;
  align-items:flex-end;justify-content:flex-start;
  padding:.6rem .75rem;text-shadow:0 1px 4px rgba(7,28,42,.55);
}
.gcard .ba .before{
  background:linear-gradient(180deg,#b9bcc0 0%,#8d9a93 45%,#5e6b63 100%) !important;
}
.gcard .ba .before::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='165' cy='30' r='14' fill='%23d9dadb' opacity='0.55'/%3E%3Cpath d='M0 72 Q50 60 100 70 T200 64 V130 H0Z' fill='%23737d72'/%3E%3Cpath d='M0 90 Q60 80 120 88 T200 84 V130 H0Z' fill='%234f5a52'/%3E%3Cg stroke='%23373f39' stroke-width='1' opacity='0.4'%3E%3Cpath d='M24 70 v-12'/%3E%3Cpath d='M30 70 v-9'/%3E%3Cpath d='M150 78 v-10'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-position:bottom;
}
.gcard .ba .after{
  background:linear-gradient(180deg,#bfe6f2 0%,#79c2bd 45%,#0e8a8a 100%) !important;
}
.gcard .ba .after::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='165' cy='28' r='13' fill='%23ffe7a0' opacity='0.9'/%3E%3Cpath d='M0 70 Q50 56 100 68 T200 60 V130 H0Z' fill='%232f9e54'/%3E%3Cpath d='M0 86 Q60 74 120 84 T200 78 V130 H0Z' fill='%231f7d63'/%3E%3Cg stroke='%23ffffff' stroke-width='1.2' opacity='0.45' fill='none'%3E%3Cpath d='M18 100 H80'/%3E%3Cpath d='M110 106 H172'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-position:bottom;
}
.gcard .ba div{font-size:.66rem}
.gcard .ba div{color:#fff}
/* keep the Before/After word above the scene */
.gcard .ba .before,.gcard .ba .after{z-index:0}
.gcard .ba div > *{position:relative;z-index:2}

/* ---------- 4. HOME "WHO WE ARE" MEDIA — gentle float ---------- */
.split .media{animation:triviFloat 9s ease-in-out infinite}

/* hero background video */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* "Who we are" box — captioned photo slideshow (6 event photos) */
.media-photos{position:relative;overflow:hidden;background:#0b2433}
.media-photos .mslide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;animation:mediaFade 36s infinite;
}
.media-photos .mslide:nth-child(1){animation-delay:0s}
.media-photos .mslide:nth-child(2){animation-delay:6s}
.media-photos .mslide:nth-child(3){animation-delay:12s}
.media-photos .mslide:nth-child(4){animation-delay:18s}
.media-photos .mslide:nth-child(5){animation-delay:24s}
.media-photos .mslide:nth-child(6){animation-delay:30s}
.media-photos .mslide::after{           /* readability gradient per slide */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(7,28,42,.72),rgba(7,28,42,0) 48%);
}
.media-cap{
  position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;line-height:1.35;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
@keyframes mediaFade{
  0%{opacity:0}
  1.5%{opacity:1}
  15%{opacity:1}
  16.6%{opacity:0}
  100%{opacity:0}
}

/* CTA band — existing hero photos as a slideshow behind the message */
.cta-band > .cta-photos{z-index:0;position:absolute}
.cta-photos{inset:0;overflow:hidden;border-radius:var(--radius)}
.cta-photos .cslide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;animation:heroFade 24s infinite;
}
.cta-photos .cslide:nth-child(1){animation-delay:0s}
.cta-photos .cslide:nth-child(2){animation-delay:6s}
.cta-photos .cslide:nth-child(3){animation-delay:12s}
.cta-photos .cslide:nth-child(4){animation-delay:18s}
.cta-photos::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(7,63,96,.74),rgba(14,138,138,.66));
}

/* ---------- 5. CARD POLISH (white divs everywhere) ---------- */
/* subtle watermark ripple in the corner + richer hover depth */
.card{position:relative;overflow:hidden}
.card::after{
  content:"";position:absolute;right:-26px;bottom:-26px;width:120px;height:120px;
  z-index:0;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%230a5c8a' stroke-width='3'%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3Ccircle cx='50' cy='50' r='26'/%3E%3Ccircle cx='50' cy='50' r='38'/%3E%3C/g%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.card > *{position:relative;z-index:1}
.card:hover{box-shadow:0 28px 60px -28px rgba(7,63,96,.55)}
.card .ico{transition:transform .3s ease,background .3s ease}
.card:hover .ico{transform:scale(1.08) rotate(-3deg);background:var(--water);color:#fff}
/* step icons (How-we-work) share the same chip + hover-pop */
.step .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--mist);color:var(--water);margin-bottom:.9rem;
  transition:transform .3s ease,background .3s ease,color .3s ease}
.step .ico svg{width:22px;height:22px}
.step:hover .ico{transform:scale(1.08) rotate(-3deg);background:var(--water);color:#fff}

/* ---------- 6. PAGE BANNER — animated ripple rings ---------- */
.page-banner::before{
  content:"";position:absolute;left:-60px;bottom:-90px;width:340px;height:340px;z-index:1;
  pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4' opacity='0.5'%3E%3Ccircle cx='100' cy='100' r='30'/%3E%3Ccircle cx='100' cy='100' r='55'/%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Ccircle cx='100' cy='100' r='95'/%3E%3C/g%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
  animation:triviPulse 7s ease-in-out infinite;
}

/* ---------- keyframes ---------- */
@keyframes triviClouds{
  0%{background-position:-10% 0}
  100%{background-position:110% 0}
}
@keyframes triviFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes triviPulse{
  0%,100%{transform:scale(1);opacity:.45}
  50%{transform:scale(1.06);opacity:.6}
}

/* ---------- 7. GLASSMORPHISM UTILITY ---------- */
.tv-glass{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 20px 50px -28px rgba(7,63,96,.5);
}

/* ---------- 7b. GLASSMORPHISM ON WHITE CARD BOXES ---------- */
.card,.step,.proj,.gcard,.info-row .ico,.contact-card{
  background:rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  backdrop-filter:blur(12px) saturate(135%);
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 18px 44px -26px rgba(7,63,96,.4);
}
/* keep the project & gallery image areas opaque (glass only on the body) */
.proj .ph,.gcard .ba{backdrop-filter:none;-webkit-backdrop-filter:none}
.bg-mist .card,.bg-mist .step,.bg-mist .proj,.bg-mist .gcard{
  background:rgba(255,255,255,.62) !important;
}
.card:hover,.step:hover,.proj:hover{
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 30px 60px -28px rgba(7,63,96,.5);
}

/* ---------- 7c. PARTNER LOGOS — original colour + pop ---------- */
.logo-row .lgo img{
  filter:none !important;opacity:1 !important;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1) !important;
}
.logo-row .lgo:hover{transform:none}
.logo-row .lgo:hover img{transform:scale(1.14)}
.logo-row .lgo.in img{animation:tvLogoPop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tvLogoPop{
  0%{transform:scale(.6);opacity:0}
  60%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}

/* ---------- 7d. FOOTER SOCIAL + CONTACT ICONS ---------- */
.foot-social{display:flex;gap:.6rem;margin-top:1.2rem}
.foot-social .soc{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.78);transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.foot-social .soc svg{width:18px;height:18px}
.foot-social .soc:hover{background:var(--water);border-color:var(--water);color:#fff;transform:translateY(-3px)}
.foot-col a.foot-contact{display:flex;align-items:center;gap:.6rem}
.foot-contact svg{width:17px;height:17px;flex:none;color:var(--teal);opacity:.95;transition:color .25s ease}
.foot-contact:hover svg{color:#fff}

/* ---------- 7e. LEADERSHIP PROFILE PHOTOS ---------- */
.tv-avatar{
  flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;
  object-position:center 22%;
  box-shadow:0 0 0 3px #fff,0 8px 20px -8px rgba(7,63,96,.5);
  border:1px solid var(--line);
}

/* ---------- 7f. SCROLLABLE PROJECT REGISTER (≈10 rows) ---------- */
.tv-scrollbox{max-height:32rem;overflow-y:auto;overflow-x:hidden}
.tv-scrollbox table.register thead th{position:sticky;top:0;z-index:3}
/* tidy custom scrollbar */
.tv-scrollbox{scrollbar-width:thin;scrollbar-color:var(--water) var(--mist)}
.tv-scrollbox::-webkit-scrollbar{width:9px}
.tv-scrollbox::-webkit-scrollbar-track{background:var(--mist)}
.tv-scrollbox::-webkit-scrollbar-thumb{background:var(--water);border-radius:6px;border:2px solid var(--mist)}

/* ---------- 7g. CONTACT-PAGE SOCIAL ICONS ---------- */
.contact-social{display:flex;gap:.6rem;margin-top:.1rem}
.contact-social a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--mist);color:var(--water);border:1px solid var(--line);
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.contact-social a svg{width:19px;height:19px}
.contact-social a:hover{background:var(--water);color:#fff;border-color:var(--water);transform:translateY(-3px)}

/* ---------- 7h. SERVICES — left intro + sticker + right icon cards ---------- */
.svc-group{
  display:grid;grid-template-columns:minmax(230px,.92fr) 2.1fr;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
}
.svc-group + .svc-group{margin-top:clamp(3rem,6vw,5rem)}
.svc-intro{position:sticky;top:96px}
.svc-intro h2{margin-top:.3rem}
.svc-intro p{margin-top:1rem;font-size:1.02rem}
.svc-illus{margin-top:1.6rem;max-width:300px}
.svc-illus svg{width:100%;height:auto;display:block;overflow:visible}
.svc-illus .ln{fill:none;stroke:var(--water);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.svc-illus .ln2{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.4}
.svc-illus .fl{fill:var(--leaf);opacity:.35}
.svc-illus .fw{fill:var(--water);opacity:.10}

.svc-cards{display:grid;gap:1.3rem}
.svc-cards.cols-3{grid-template-columns:repeat(3,1fr)}
.svc-cards.cols-2{grid-template-columns:repeat(2,1fr)}
.svc-card{position:relative;padding-top:1.7rem}
.svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--water),var(--teal),var(--leaf));}
.svc-num{position:absolute;top:1rem;right:1.2rem;z-index:0;
  font-family:'Fraunces',serif;font-size:2.3rem;font-weight:600;line-height:1;
  color:rgba(10,92,138,.13)}
.svc-points{list-style:none;margin-top:1.05rem;padding-top:.9rem;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.45rem .9rem}
.svc-points li{display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;font-weight:500;color:var(--ink-soft)}
.svc-points li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--teal);flex:none}
@media(max-width:900px){
  .svc-group{grid-template-columns:1fr}
  .svc-intro{position:static}
  .svc-illus{max-width:220px}
  .svc-cards.cols-3,.svc-cards.cols-2{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .svc-cards.cols-3,.svc-cards.cols-2{grid-template-columns:1fr}
}

/* ---------- 8. CUSTOM CURSOR — bold dark hollow ring ---------- */
html.tv-cursor,html.tv-cursor *{cursor:none !important}
.tv-ring{
  position:fixed;top:0;left:0;z-index:10000;pointer-events:none;
  width:26px;height:26px;border-radius:50%;
  border:3px solid var(--ink);background:transparent;
  will-change:transform;
  transition:width .18s ease,height .18s ease,border-color .18s ease,opacity .2s ease;
}
.tv-ring.lg{width:44px;height:44px}
.tv-ring.dn{width:20px;height:20px;border-width:4px}
.tv-click{
  position:fixed;z-index:9998;pointer-events:none;width:8px;height:8px;border-radius:50%;
  transform:translate(-50%,-50%);background:transparent;border:2px solid var(--teal);
  animation:tvClick .7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes tvClick{
  0%{opacity:.7;width:8px;height:8px}
  100%{opacity:0;width:64px;height:64px}
}

/* ---------- 9. RIPPLE PAGE TRANSITION ---------- */
#tv-curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
#tv-curtain .tv-circ{
  position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle at 50% 40%,var(--teal),var(--water) 45%,var(--water-deep) 100%);
}
/* outgoing: expand from click point to cover */
#tv-curtain.go .tv-circ{
  transition:transform .58s cubic-bezier(.66,0,.34,1);
  transform:translate(-50%,-50%) scale(360);
}
/* incoming: start covered (centre), then shrink away */
#tv-curtain.cover .tv-circ{left:50%;top:50%;transform:translate(-50%,-50%) scale(360)}
#tv-curtain.cover.reveal .tv-circ{
  transition:transform .8s cubic-bezier(.66,0,.34,1);
  transform:translate(-50%,-50%) scale(0);
}

/* ---------- 10. SMOOTHER SCROLL-REVEAL ---------- */
.reveal{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
/* gentle stagger for cards/tiles within a grid */
.grid .reveal:nth-child(2),.proj-grid .reveal:nth-child(2),.gallery .reveal:nth-child(2){transition-delay:.06s}
.grid .reveal:nth-child(3),.proj-grid .reveal:nth-child(3),.gallery .reveal:nth-child(3){transition-delay:.12s}
.grid .reveal:nth-child(4),.proj-grid .reveal:nth-child(4),.gallery .reveal:nth-child(4){transition-delay:.18s}

/* ---------- 11. INDIA PROJECT MAP (image + overlay pins) ---------- */
.tv-map-section .wrap{max-width:1080px}
.tv-map-panel{
  border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.4rem);
  display:grid;grid-template-columns:1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.tv-map-figure{position:relative;width:100%;max-width:440px;margin:0 auto}
.tv-map-figure img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 16px 30px rgba(7,63,96,.16));}
/* a pin positioned by % over the map image */
.tv-pin2{position:absolute;transform:translate(-50%,-50%);z-index:2;cursor:pointer}
.tv-pin2[data-map-state]:hover .core,.tv-pin2.sel .core{
  background:var(--water-deep);transform:scale(1.35);transition:transform .2s ease;
}
.tv-pin2.sel .lbl{background:var(--water);color:#fff}
.tv-pin2.sel .ping{background:var(--water-deep);opacity:.6}
.tv-pin2 .core{
  display:block;width:11px;height:11px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(7,63,96,.4);
  position:relative;z-index:2;
}
.tv-pin2.flag .core{width:14px;height:14px;background:var(--water-deep)}
.tv-pin2 .ping{
  position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--leaf);opacity:.5;z-index:1;
  animation:tvPing 2.6s ease-out infinite;
}
.tv-pin2:nth-child(2) .ping{animation-delay:.5s}
.tv-pin2:nth-child(3) .ping{animation-delay:1s}
.tv-pin2:nth-child(4) .ping{animation-delay:1.5s}
.tv-pin2:nth-child(5) .ping{animation-delay:2s}
.tv-pin2:nth-child(6) .ping{animation-delay:2.2s}
.tv-pin2 .lbl{
  position:absolute;left:50%;top:-4px;transform:translate(-50%,-100%);
  white-space:nowrap;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  color:var(--ink);background:rgba(255,255,255,.85);padding:1px 6px;border-radius:6px;
  box-shadow:0 2px 8px -3px rgba(7,63,96,.4);
}
.tv-pin2.lp-below .lbl{top:auto;bottom:-4px;transform:translate(-50%,100%)}
.tv-pin2.lp-right .lbl{left:auto;right:-6px;top:50%;transform:translate(100%,-50%)}
.tv-pin2.lp-left  .lbl{left:-6px;right:auto;top:50%;transform:translate(-100%,-50%)}
@keyframes tvPing{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.5}
  70%,100%{transform:translate(-50%,-50%) scale(4.5);opacity:0}
}
.tv-map-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.tv-map-list li{display:flex;align-items:center;gap:.7rem;font-size:.95rem;color:var(--ink)}
.tv-map-list li .pin-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 3px rgba(47,158,84,.18)}
.tv-map-list li small{color:var(--ink-soft);font-size:.82rem}
@media(max-width:820px){
  .tv-map-panel{grid-template-columns:1fr;gap:1.6rem}
}

/* ---------- 12. MOBILE UI/UX REFINEMENTS ---------- */
body{overflow-x:clip}                 /* safety against any horizontal spill */

@media(max-width:768px){
  .brand{font-size:1.06rem;line-height:1.15}
  .brand small{font-size:.56rem}
  /* services */
  .svc-num{font-size:1.9rem;top:.8rem;right:1rem}
  .svc-illus{margin-left:auto;margin-right:auto}
  /* project register: tighter + allow sideways scroll if it ever needs it */
  .tv-scrollbox{overflow-x:auto}
  table.register th,table.register td{padding:.6rem .55rem;font-size:.82rem}
  table.register .no{width:34px}
  /* map */
  .tv-map-panel{padding:1.2rem}
  /* footer icons sit comfortably */
  .foot-contact{font-size:.9rem}
}

@media(max-width:560px){
  .brand small{display:none}          /* hide tagline so the full name fits beside the menu */
  h1{font-size:clamp(2rem,8vw,2.6rem)}
  section{padding:2.6rem 0}
  .ba-caption h3{font-size:1.08rem}
  .ba-nav{width:38px;height:38px}
  .ba-nav svg{width:20px;height:20px}
  .svc-card{padding:1.5rem 1.25rem}
  .svc-points{gap:.4rem .7rem}
  .cta-band{padding:2.2rem 1.3rem}
  .tv-map-figure{max-width:300px}
  .tv-map-list li{font-size:.9rem}
  .stat .num{font-size:2.2rem}
  /* leadership / icon cards: keep image + text readable */
  .tv-avatar{width:60px;height:60px}
}

/* larger tap targets on touch devices */
@media(hover:none){
  .nav-links a{padding:.9rem 0}
  .btn{padding:.9rem 1.6rem}
  .chip{padding:.6rem 1.15rem}
  .ba-dots span{width:11px;height:11px}
}

/* ---------- reduced-motion: honour user preference ---------- */
@media(prefers-reduced-motion:reduce){
  .trivi-bg .blob,.trivi-bg::after,.proj .ph::before,
  .split .media,.page-banner::before,.tv-pin2 .ping{animation:none !important}
}