/* ===================================================================
   Abdullah Brothers & Co. — Site Stylesheet
   Brand: Navy #23238C / Indigo #2E3192 / Lavender #8B89C7 / Ice #EEF0FA
=================================================================== */

:root{
  --navy: #1c1c66;
  --indigo: #2e3192;
  --indigo-2: #3d3fb0;
  --lavender: #8b89c7;
  --lavender-light: #b7b5e0;
  --ice: #f3f4fb;
  --ice-2: #e8e9f7;
  --white: #ffffff;
  --ink: #23233a;
  --muted: #000000;
  --gold: #d9a441;
  --shadow: 0 20px 50px -20px rgba(46,49,146,0.35);
  --shadow-sm: 0 8px 24px -12px rgba(46,49,146,0.25);
  --radius: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

/* ---------- Welcome overlay — glassmorphism popup, shows on every load/refresh, blurs the site behind it ---------- */
body.welcome-open{overflow:hidden;}
.welcome-overlay{
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:linear-gradient(135deg, rgba(28,28,102,.55) 0%, rgba(46,49,146,.4) 60%, rgba(18,18,63,.5) 100%);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  opacity:1; transition:opacity .4s ease, visibility 0s;
}
.welcome-overlay.welcome-hidden{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility 0s .35s;
}
.welcome-card{
  position:relative; text-align:center; max-width:420px; width:100%; padding:44px 36px 38px;
  border-radius:28px; color:#fff; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 30px 80px -20px rgba(10,10,40,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  animation:welcome-card-in .5s cubic-bezier(.22,1,.36,1);
}
.welcome-card::before{
  content:''; position:absolute; top:-60%; left:50%; transform:translateX(-50%);
  width:120%; height:200%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(140,170,255,.35), transparent 65%);
  filter:blur(10px); opacity:.9;
}
@keyframes welcome-card-in{from{opacity:0; transform:translateY(18px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);}}
.welcome-logo{
  width:64px; height:64px; object-fit:contain; margin:0 auto 18px; display:block; border-radius:14px;
  animation:splash-pulse 2.2s ease-in-out infinite;
}
@keyframes splash-pulse{0%,100%{transform:scale(1); opacity:.92;} 50%{transform:scale(1.06); opacity:1;}}
.welcome-title{
  font-family:'Playfair Display',serif; font-weight:800; color:#fff; font-size:clamp(22px,4.4vw,30px);
  line-height:1.28; margin-bottom:12px; letter-spacing:-.01em;
}
.welcome-tagline{
  font-family:'Poppins','Segoe UI',Arial,sans-serif; font-weight:400; font-size:15px;
  color:rgba(255,255,255,.86); line-height:1.75; letter-spacing:.012em; max-width:320px; margin:0 auto;
}
.welcome-hint{
  margin-top:26px; font-family:'Poppins','Segoe UI',Arial,sans-serif; font-weight:500;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
@media (max-width:480px){
  .welcome-card{padding:36px 24px 30px; border-radius:22px;}
}

/* ---------- Custom cursor — desktop only (JS gates creation to real-mouse devices) ---------- */
.has-custom-cursor, .has-custom-cursor *{cursor:none !important;}
.custom-cursor-dot, .custom-cursor-ring{
  position:fixed; top:0; left:0; z-index:100000; pointer-events:none; border-radius:50%;
  transform:translate(-100px,-100px);
}
.custom-cursor-dot{
  width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--gold); transition:opacity .2s ease;
}
.custom-cursor-ring{
  width:36px; height:36px; margin:-18px 0 0 -18px; border:1.5px solid rgba(46,49,146,.55);
  transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), opacity .2s ease;
}
.custom-cursor-ring.cursor-hover{
  width:42px; height:42px; margin:-21px 0 0 -21px; border-color:var(--gold); background:rgba(217,164,65,.08);
}
.custom-cursor-ring.cursor-active{width:28px; height:28px; margin:-14px 0 0 -14px;}
body{
  font-family:'Poppins', 'Segoe UI', Arial, sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Playfair Display', Georgia, serif;
  color:var(--navy);
  line-height:1.15;
  letter-spacing:-0.01em;
}
/* sitewide paragraph typography — matches the "Reliable Pharmaceutical Distribution..." hero tagline style */
p{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  line-height:1.7;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:1220px; margin:0 auto; padding:0 24px;}
.section{padding:100px 0;}
.section-tight{padding:60px 0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--indigo-2); margin-bottom:14px;
  padding:6px 16px; border:1px solid var(--lavender-light); border-radius:99px;
  background:var(--ice);
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--gold); box-shadow:0 0 0 3px rgba(217,164,65,.25);
}
.section-head{max-width:680px; margin-bottom:56px; position:relative;}
.section-head::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:-60px; left:50%; transform:translateX(-50%);
  width:340px; height:220px;
  background:radial-gradient(circle, rgba(46,49,146,.16), rgba(46,49,146,.05) 55%, transparent 75%);
  filter:blur(6px);
}
.section-head h2{font-size:clamp(28px,4vw,44px); margin-bottom:14px;}
.section-head p{color:var(--muted); font-size:17px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.bar{width:64px; height:4px; background:linear-gradient(90deg,var(--gold),#f0d698); border-radius:4px; margin:16px 0;}
.center .bar{margin-left:auto; margin-right:auto;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-scale.in{opacity:1; transform:scale(1);}
.stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ---------- Buttons — simple, no movement, no growth. Just a click. ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 24px;
  border-radius:99px; font-weight:600; font-size:14px; border:2px solid transparent;
  transition:box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
  white-space:nowrap; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn:active{opacity:.85;}
.btn-primary{
  background:var(--indigo); color:#fff; box-shadow:var(--shadow-sm);
}
.btn-primary:hover{background:var(--indigo-2); box-shadow:var(--shadow);}
.btn-ghost{border-color:rgba(255,255,255,.55); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-outline{border-color:var(--indigo); color:var(--indigo);}
.btn-outline:hover{background:var(--indigo); color:#fff;}
.btn-wa{background:#25D366; color:#fff; box-shadow:0 8px 24px -10px rgba(37,211,102,.6);}
.btn-wa:hover{background:#1eb85a;}
.btn-gold{
  background:var(--gold); color:var(--navy);
  box-shadow:0 14px 30px -12px rgba(217,164,65,.5);
}
.btn-gold:hover{background:#c9922e; box-shadow:0 20px 40px -14px rgba(217,164,65,.6);}

/* ---------- Header (always white/glass — sits on top of dark hero) ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0; transition:padding .4s var(--ease), box-shadow .4s, background .4s;
  background:rgba(255,255,255,.68); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.4);
  box-shadow:0 6px 24px -18px rgba(30,30,80,.14);
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:linear-gradient(rgba(46,49,146,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(46,49,146,.05) 1px, transparent 1px);
  background-size:32px 32px; animation:grid-drift 20s linear infinite;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.site-header .container{position:relative; z-index:1;}
.site-header .container{display:flex; align-items:center; justify-content:space-between;}
.site-header.scrolled{
  padding:10px 0; background:rgba(255,255,255,.92); border-bottom-color:rgba(30,30,80,.06);
  box-shadow:0 10px 34px -14px rgba(30,30,80,.28);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:42px; width:auto; transition:height .3s;}
.site-header.scrolled .brand img{height:36px;}
.brand-name{font-family:'Playfair Display',serif; font-weight:700; font-size:19px; color:var(--navy); white-space:nowrap;}
@media (max-width:400px){ .brand-name{font-size:15px;} }

.nav-links{display:flex; align-items:center; gap:26px; position:relative;}
@media (min-width:1300px){ .nav-links{gap:34px;} }
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--ink); position:relative; padding:4px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a:hover{color:var(--indigo);}
.nav-links a.active{font-weight:700; color:var(--navy);}
.header-actions{display:flex; align-items:center; gap:14px;}
.nav-cta{display:none;}
.header-actions .btn{padding:11px 22px; font-size:13.5px;}
.header-actions .btn-outline{background:#fff; border-color:#e5e7eb; color:var(--ink);}
.header-actions .btn-outline:hover{background:#fff; border-color:var(--indigo); color:var(--indigo);}
.header-actions .btn-ghost{border-color:var(--indigo); color:var(--indigo);}
.header-actions .btn-ghost:hover{background:var(--indigo); color:#fff;}

.burger{display:none; flex-direction:column; gap:5px; width:30px; cursor:pointer; z-index:1100; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.burger span{height:2.5px; background:var(--navy); border-radius:2px; transition:.35s;}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; color:#fff;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.06);}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(20,20,80,.92) 0%, rgba(46,49,146,.85) 45%, rgba(139,137,199,.55) 100%);
}
.hero-particles{position:absolute; inset:0; z-index:1; pointer-events:none;}
.hero .container{position:relative; z-index:2; padding-top:110px;}
.hero-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border:1px solid rgba(255,255,255,.35); border-radius:99px; font-size:13px; letter-spacing:.06em; margin-bottom:26px; backdrop-filter:blur(6px); background:rgba(255,255,255,.08);}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:#5be08a; box-shadow:0 0 0 4px rgba(91,224,138,.25); animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.4;}}
.hero h1{font-size:clamp(40px,6.4vw,84px); color:#fff; margin-bottom:6px;}
.hero h1 .accent{color:var(--lavender-light); display:block;}
.hero-sub{font-size:clamp(17px,2vw,22px); color:rgba(255,255,255,.92); max-width:560px; margin:22px 0 8px;}
.hero-tag{font-size:16px; font-style:italic; color:var(--lavender-light); margin-bottom:34px; font-family:'Playfair Display',serif;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:64px;}

.hero-stats{display:flex; gap:0; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.2); padding-top:30px;}
.hero-stat{flex:1; min-width:140px; padding-right:30px;}
.hero-stat .num{font-family:'Playfair Display',serif; font-size:38px; color:#fff; display:flex; align-items:baseline; gap:2px;}
.hero-stat .lbl{font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.7); margin-top:4px;}

/* animated truck strip along bottom of hero */
.route-strip{position:absolute; left:0; right:0; bottom:0; height:64px; z-index:2; overflow:hidden;}
.route-line{position:absolute; bottom:26px; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 18px, transparent 18px 34px);}
.route-truck{position:absolute; bottom:6px; left:-120px; animation:drive 9s linear infinite;}
.route-truck svg{width:64px; height:auto;}
@keyframes drive{0%{left:-120px;} 100%{left:110%;}}

.scroll-cue{position:absolute; bottom:84px; right:44px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.75); font-size:11px; letter-spacing:.14em; text-transform:uppercase;}
.scroll-cue .line{width:1px; height:38px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:''; position:absolute; top:-40px; left:0; width:100%; height:40%; background:#fff; animation:scrolldown 1.8s infinite;}
@keyframes scrolldown{0%{top:-40%;} 100%{top:100%;}}

/* ---------- Page Hero (inner pages) ---------- */
.page-hero{
  position:relative; padding:180px 0 110px; color:#fff; overflow:hidden;
  background:linear-gradient(120deg,var(--navy),var(--indigo) 60%, var(--indigo-2));
}
.page-hero::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(circle at 85% 20%, rgba(255,255,255,.14), transparent 45%), radial-gradient(circle at 10% 90%, rgba(255,255,255,.1), transparent 40%);
}
.page-hero .container{position:relative; z-index:2;}
.page-hero .crumb{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--lavender-light); margin-bottom:16px;}
.page-hero h1{color:#fff; font-size:clamp(34px,5.4vw,58px); text-shadow:0 0 46px rgba(139,137,199,.55), 0 0 90px rgba(46,49,146,.35);}
.page-hero p{max-width:600px; color:rgba(255,255,255,.85); margin-top:16px; font-size:17px;}
.page-hero-shape{position:absolute; right:-80px; bottom:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);}
.page-hero-center{text-align:center; padding-top:150px;}
.page-hero-center .container{max-width:760px;}
.page-hero-center .crumb{display:flex;}
.page-hero-center p{margin-left:auto; margin-right:auto;}
.page-hero .grid-anim{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:46px 46px; animation:grid-drift 20s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 75%);
}
.page-hero .grid-anim .grid-glow{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--lavender-light); box-shadow:0 0 14px 5px rgba(183,181,224,.5); animation:grid-pulse 4.2s ease-in-out infinite;}
.page-hero .grid-anim .g1{top:20%; left:15%;}
.page-hero .grid-anim .g2{top:35%; left:82%; animation-delay:1.2s;}
.page-hero .grid-anim .g3{top:65%; left:45%; animation-delay:2.4s;}

/* ---------- Cards ---------- */
.grid{display:grid; gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}

/* ---------- "Excellence in Every Area" premium metric cards ---------- */
.metric-grid{margin-bottom:20px;}
.metric-card{
  position:relative; text-align:center; background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(243,244,251,.55));
  border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-radius:18px; padding:28px 16px; box-shadow:0 20px 44px -28px rgba(46,49,146,.35);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.metric-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.metric-ic{
  width:44px; height:44px; margin:0 auto 14px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-2)); color:#fff;
}
.metric-num{font-family:'Playfair Display',serif; font-size:30px; color:var(--navy); font-weight:700;}
.metric-lbl{font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.4; min-height:32px;}
.metric-bar{width:100%; height:6px; border-radius:99px; background:rgba(46,49,146,.12); margin-top:16px; overflow:hidden;}
.metric-bar-fill{width:0%; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--indigo),var(--lavender)); transition:width 1.4s var(--ease);}
.metric-card-featured{background:linear-gradient(150deg,rgba(46,49,146,.85),rgba(28,28,102,.9)); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);}
.metric-card-featured .metric-num, .metric-card-featured .metric-lbl{color:#fff;}
.metric-card-featured .metric-ic{background:rgba(255,255,255,.18);}
.metric-card-featured .metric-bar{background:rgba(255,255,255,.18);}
.metric-card-featured .metric-bar-fill{background:linear-gradient(90deg,var(--gold),#f0d698);}
@media (max-width:1024px){ .grid-5{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .metric-grid.grid-5{grid-template-columns:1fr;} }

.card{
  background:#fff; border-radius:var(--radius); padding:34px 30px; box-shadow:var(--shadow-sm);
  border:1px solid #edeef8; transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{
  transform:translateY(-8px);
  background:linear-gradient(135deg,var(--indigo),var(--indigo-2)); border-color:var(--indigo);
  box-shadow:0 30px 60px -22px rgba(46,49,146,.5);
}
.card .icon-box{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-2)); color:#fff; margin-bottom:20px;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.card:hover .icon-box{transform:rotate(-8deg) scale(1.08); background:rgba(255,255,255,.18);}
.card h3{font-size:20px; margin-bottom:10px; transition:color .4s var(--ease);}
.card p{color:var(--muted); font-size:15px; transition:color .4s var(--ease);}
.card:hover h3, .card:hover p{color:#fff;}
/* gold cards also convert to the same blue hover treatment for consistency */
.card.gold:hover{
  background:linear-gradient(135deg,var(--indigo),var(--indigo-2)); border-color:var(--indigo);
}
.card.gold:hover .icon-box{background:rgba(255,255,255,.18); color:#fff;}
.card.dark, .card.glass{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(61,63,176,.78),rgba(28,28,102,.88));
  color:#fff; border:1px solid rgba(139,137,199,.35);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 30px 60px -26px rgba(15,15,60,.55), 0 0 40px -18px rgba(91,94,220,.5), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card.dark::before, .card.glass::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.6; pointer-events:none;
  background:radial-gradient(280px 160px at 15% 0%, rgba(139,137,199,.35), transparent 65%);
}
.card.dark > *, .card.glass > *{position:relative; z-index:1;}
.card.dark:hover, .card.glass:hover{
  transform:translateY(-8px); border-color:rgba(183,181,224,.6);
  box-shadow:0 40px 80px -26px rgba(15,15,60,.6), 0 0 56px -14px rgba(91,94,220,.65), inset 0 1px 0 rgba(255,255,255,.18);
}
.card.dark h3, .card.dark p, .card.glass h3, .card.glass p{color:#fff;}
.card.dark p, .card.glass p{color:rgba(255,255,255,.82);}
.card.dark .icon-box, .card.glass .icon-box{background:rgba(255,255,255,.16);}
.card.gold{
  background:linear-gradient(135deg,var(--gold),#c9922e);
  border:1px solid rgba(217,164,65,.5); color:#fff;
  box-shadow:0 20px 44px -22px rgba(217,164,65,.55);
}
.card.gold h3, .card.gold p{color:#fff;}
.card.gold p{color:rgba(255,255,255,.9);}
.card.gold .icon-box{background:rgba(255,255,255,.22); color:#fff;}

/* ---------- About "Who We Are" info cards — glassmorphism, unique accent per card ---------- */
.info-card{
  position:relative; z-index:1; background:rgba(255,255,255,.55); border-radius:20px; padding:32px 26px 28px;
  border:1px solid rgba(255,255,255,.7); box-shadow:0 20px 50px -28px rgba(46,49,146,.35); overflow:hidden;
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease);
}
.info-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--accent-1,var(--indigo)),var(--accent-2,var(--lavender))); transition:transform .5s var(--ease);
}
.info-card::after{
  content:''; position:absolute; top:-40%; right:-30%; width:70%; height:70%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, var(--accent-1,var(--indigo)), transparent 70%); opacity:.14; filter:blur(10px);
}
.info-card:hover{box-shadow:0 30px 70px -26px rgba(46,49,146,.45);}
.info-card:hover::before{transform:scaleX(1);}
.info-card-num{
  position:absolute; top:22px; right:24px; font-family:'Playfair Display',serif; font-size:26px;
  color:var(--accent-1,var(--lavender-light)); opacity:.7;
}
.info-card .icon-box{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent-1,var(--indigo)),var(--accent-2,var(--indigo-2))); color:#fff; margin-bottom:20px;
  transition:transform .4s var(--ease);
}
.info-card:hover .icon-box{transform:rotate(-8deg) scale(1.08);}
.info-card h3{font-size:18.5px; margin-bottom:8px;}
.info-card p{color:var(--muted); font-size:14.5px; line-height:1.65;}
.info-card-indigo{--accent-1:#2e3192; --accent-2:#3d3fb0;}
.info-card-lavender{--accent-1:#8b89c7; --accent-2:#b7b5e0;}
.info-card-gold{--accent-1:#d9a441; --accent-2:#e6c07a;}
.info-card-navy{--accent-1:#1c1c66; --accent-2:#2e3192;}

/* ---------- Award / certificate placeholder cards ---------- */
.award-card{
  background:var(--ice); border:1px dashed var(--lavender-light); border-radius:18px;
  padding:26px 18px; text-align:center; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.award-card:hover{transform:translateY(-6px); border-color:var(--indigo); box-shadow:var(--shadow-sm);}
.award-badge{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--lavender-light),var(--indigo)); color:#fff;
}
.award-card h4{font-size:15px; color:var(--navy); margin-bottom:4px;}
.award-card p{font-size:12px; color:var(--muted);}

/* ---------- Market Coverage infographic flow ---------- */
.coverage-flow{display:flex; align-items:stretch; gap:18px; justify-content:center;}
.coverage-step{
  flex:1; max-width:320px; background:#fff; border-radius:20px; padding:32px 26px; position:relative;
  border:1px solid #edeef8; box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.coverage-step:hover{
  transform:translateY(-8px); border-color:var(--indigo);
  background:linear-gradient(135deg,var(--indigo),var(--indigo-2));
  box-shadow:0 30px 60px -22px rgba(46,49,146,.5);
}
.coverage-step:hover .icon-box{background:rgba(255,255,255,.18); color:#fff;}
.coverage-step:hover h3, .coverage-step:hover p{color:#fff;}
.coverage-step:hover p{color:rgba(255,255,255,.85);}
.coverage-step-num{
  position:absolute; top:-16px; left:26px; width:34px; height:34px; border-radius:50%; z-index:2;
  background:linear-gradient(135deg,var(--gold),#e6c07a); color:var(--navy); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -6px rgba(217,164,65,.5);
  transition:box-shadow .4s var(--ease);
}
.coverage-step:hover .coverage-step-num{box-shadow:0 8px 22px -4px rgba(217,164,65,.8), 0 0 0 4px rgba(255,255,255,.25);}
.coverage-step .icon-box{margin-top:8px; transition:background .4s var(--ease), color .4s var(--ease);}
.coverage-step h3{font-size:18px; margin-bottom:8px; transition:color .4s var(--ease);}
.coverage-step p{color:var(--muted); font-size:14.5px; line-height:1.65; transition:color .4s var(--ease);}
.coverage-arrow{display:flex; align-items:center; color:var(--lavender-light); flex:none; align-self:center;}
@media (max-width:900px){
  .coverage-flow{flex-direction:column; align-items:center;}
  .coverage-arrow{transform:rotate(90deg); margin:-4px 0;}
  .coverage-step{max-width:420px; width:100%;}
}

.stat-strip{
  position:relative; display:flex; flex-wrap:wrap; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(120deg,rgba(46,49,146,.88),rgba(28,28,102,.92));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  color:#fff; padding:40px; box-shadow:0 30px 70px -28px rgba(46,49,146,.55), inset 0 1px 0 rgba(255,255,255,.15);
}
.stat-strip::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px 220px at 15% 0%, rgba(183,181,224,.35), transparent 65%), radial-gradient(420px 220px at 90% 100%, rgba(139,137,199,.25), transparent 65%);
}
.stat-strip .stat{position:relative; z-index:1; flex:1; min-width:150px; text-align:center; padding:10px;}
.stat-strip .stat .num{font-family:'Playfair Display',serif; font-size:42px; text-shadow:0 0 24px rgba(183,181,224,.55);}
.stat-strip .stat .lbl{font-size:13px; text-transform:uppercase; letter-spacing:.08em; opacity:.8; margin-top:6px;}

/* ---------- Distribution network animated line (Home) ---------- */
.network{position:relative; padding:20px 0;}
.network-svg{width:100%; height:auto; display:block;}
.network-node{opacity:0; transform:scale(.4); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.network-node.in{opacity:1; transform:scale(1);}
.network-path{stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 1.8s var(--ease);}
.network-path.in{stroke-dashoffset:0;}
.network-truck{offset-rotate:0deg;}

/* ---------- Image panels ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.split img{border-radius:var(--radius); box-shadow:var(--shadow);}
.split .ph{position:relative;}
.split .ph::before{
  content:''; position:absolute; inset:-16px; border:2px solid var(--lavender-light); border-radius:calc(var(--radius) + 10px); z-index:-1;
}
.quote-box{background:var(--navy); color:#fff; border-radius:var(--radius-sm); padding:26px 28px; margin-top:24px;}
.quote-box b{color:var(--gold);}

/* ---------- Values / Core tabs ---------- */
.core-badge{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--indigo); color:#fff; font-weight:700; font-size:13px; margin-right:10px;}

/* ---------- Timeline / branches ---------- */
.branch-card{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:280px; padding:28px;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
  background:linear-gradient(150deg,var(--indigo) 0%, var(--navy) 100%);
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.branch-card.hq{background:linear-gradient(150deg,var(--navy) 0%, #10102f 100%);}
.branch-card:hover{transform:translateY(-8px) scale(1.015); box-shadow:var(--shadow);}
.branch-card .skyline{position:absolute; left:0; right:0; bottom:0; width:100%; opacity:.9; mix-blend-mode:screen; transition:transform .6s var(--ease);}
.branch-card:hover .skyline{transform:translateY(-6px) scale(1.03);}
.branch-card .tag{font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.14); display:inline-block; padding:5px 12px; border-radius:99px; margin-bottom:10px; width:fit-content; position:relative; z-index:2;}
.branch-card h3{color:#fff; font-size:24px; position:relative; z-index:2;}
.branch-card .region{color:var(--lavender-light); font-size:13px; margin-top:4px; position:relative; z-index:2;}
.branch-card .soon{position:absolute; top:20px; right:20px; background:var(--gold); color:var(--navy); font-size:11px; font-weight:700; padding:5px 12px; border-radius:99px; z-index:3;}

/* ---------- Split Hero (left content / right image, sticky under overlap) ---------- */
.split-hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(150deg,var(--navy) 0%, var(--indigo) 70%, var(--indigo-2) 100%);
  color:#fff; overflow:hidden; padding-top:90px;
}
.split-hero::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(circle at 15% 20%, rgba(255,255,255,.1), transparent 40%), radial-gradient(circle at 90% 80%, rgba(255,255,255,.08), transparent 40%);
}
.split-hero .container{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;}
.split-hero-media{position:relative; border-radius:26px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); aspect-ratio:4/5;}
.split-hero-media img{width:100%; height:100%; object-fit:cover;}
.split-hero-media::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,20,80,.5), transparent 45%);}
.split-hero-media .media-badge{position:absolute; left:20px; bottom:20px; z-index:2; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:14px 18px; display:flex; gap:12px; align-items:center;}
.split-hero-media .media-badge b{display:block; font-family:'Playfair Display',serif; font-size:20px; color:#fff;}
.split-hero-media .media-badge span{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.75);}

/* ---------- Home Hero (centered heading + animated canvas background) — legacy variant, unused by current markup but kept for compatibility ---------- */
.home-hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:#fff; padding-top:90px;
  background:radial-gradient(ellipse at 50% -10%, #35377f 0%, var(--indigo) 38%, var(--navy) 78%, #0e0e34 100%);
}
.home-hero .hero-center{position:relative; z-index:2; text-align:center; margin:0 auto;}
.home-hero .hero-badge{justify-content:center;}

/* =========================================================================
   Home Hero — LIGHT, premium, two-column (Apple/Stripe/DHL-inspired)
   Scoped entirely to .home-hero-light so the rest of the site is untouched.
   ========================================================================= */
.home-hero-light{
  --hp-primary:var(--navy); --hp-secondary:var(--indigo); --hp-accent:var(--lavender-light);
  --hp-bg:#F8FAFC; --hp-text:#111827; --hp-muted:#000000; --hp-border:#E5E7EB;
  min-height:auto; color:var(--hp-text); padding-top:130px; padding-bottom:140px;
  flex-direction:column; align-items:center; justify-content:flex-start;
  background:
    radial-gradient(1100px 520px at 82% 8%, rgba(183,181,224,.16) 0%, transparent 60%),
    radial-gradient(900px 500px at 8% 95%, rgba(46,49,146,.08) 0%, transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--hp-bg) 45%, #ffffff 100%);
}
.home-hero-light .blob{opacity:.5;}
.home-hero-light .blob-a{background:radial-gradient(circle,var(--hp-accent),transparent 70%); top:-80px; right:-60px;}
.home-hero-light .blob-b{background:radial-gradient(circle,var(--hp-secondary),transparent 72%); opacity:.14;}

/* faint dot/line grid + tiny glowing particles, very subtle on light bg */
.home-hero-light .grid-anim{
  position:absolute; inset:0; width:100%; z-index:0; pointer-events:none; overflow:hidden;
  background-image:
    linear-gradient(rgba(46,49,146,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,49,146,.06) 1px, transparent 1px);
  background-size:46px 46px;
  animation:grid-drift 20s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 20%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 20%, #000 0%, transparent 75%);
}
.home-hero-light .grid-anim .grid-glow{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--hp-accent); box-shadow:0 0 14px 5px rgba(183,181,224,.5); animation:grid-pulse 4.2s ease-in-out infinite;}
.home-hero-light .grid-anim .g1{top:16%; left:60%;}
.home-hero-light .grid-anim .g2{top:38%; left:78%; animation-delay:1.2s;}
.home-hero-light .grid-anim .g3{top:64%; left:52%; animation-delay:2.4s;}
@keyframes grid-drift{0%{background-position:0 0;} 100%{background-position:46px 46px;}}
@keyframes grid-pulse{0%,100%{opacity:.2; transform:scale(.8);} 50%{opacity:.9; transform:scale(1.25);}}

/* faint distribution-network map graphic, sits behind the hero text */
.hero-map{
  position:absolute; top:8%; left:30%; width:56%; height:auto; max-width:760px; z-index:1; opacity:.5; pointer-events:none;
}
.hero-map .hero-map-dots circle{opacity:.35;}
.hero-map .network-path{stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 2.2s var(--ease);}
.hero-map .network-path.in{stroke-dashoffset:0;}
.hero-map .network-node circle{opacity:0; transform-origin:center; transform-box:fill-box; transform:scale(.4); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.hero-map .network-node.in circle, .hero-map.in .network-node circle{opacity:1; transform:scale(1);}

.home-hero-light .hero-split-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:45% 55%; align-items:center; gap:36px;
  max-width:1320px; width:100%; margin:0 auto; padding-left:64px; padding-right:40px; text-align:left;
}
.home-hero-light .hero-left{position:relative; overflow:visible; padding:0; text-align:left;}
.home-hero-light .hero-left .hero-badge{
  margin-left:0; margin-right:auto; background:#fff; border:1px solid var(--hp-border);
  color:var(--hp-text); box-shadow:0 6px 18px -10px rgba(17,24,39,.15); backdrop-filter:none;
}
.home-hero-light .hero-left .hero-badge .dot{background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2);}
.home-hero-light .hero-left h1, .home-hero-light .hero-left p, .home-hero-light .hero-left .hero-cta{text-align:left; justify-content:flex-start; max-width:100%;}
.home-hero-light .hero-left h1{color:var(--navy); letter-spacing:-.01em; font-size:clamp(38px,4.6vw,60px);}
.home-hero-light .hero-left h1 span{color:var(--gold);}
.home-hero-light .hero-sub{color:var(--hp-muted); line-height:1.6;}
.home-hero-light .hero-tag{color:var(--hp-primary); opacity:.85; font-family:'Playfair Display',serif;}
.home-hero-light .hero-cta{flex-wrap:wrap; gap:14px;}
.home-hero-light .hero-cta .btn{white-space:nowrap;}
.home-hero-light .btn-primary{
  background:var(--hp-secondary); border-radius:16px;
  box-shadow:0 14px 30px -12px rgba(46,49,146,.55);
  transition:box-shadow .2s ease, background-color .2s ease;
}
.home-hero-light .btn-primary:hover{background:var(--hp-primary); box-shadow:0 20px 36px -14px rgba(46,49,146,.6);}
.home-hero-light .btn-outline-light{
  display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:16px; font-weight:600; font-size:14.5px;
  background:#fff; color:var(--hp-primary); border:1.5px solid var(--hp-border);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.home-hero-light .btn-outline-light:hover{border-color:var(--hp-secondary); box-shadow:0 14px 28px -16px rgba(46,49,146,.35);}

/* live motion graphics — left side of hero (soft glow particles, no circles) */
.hero-motion{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.hero-dot{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 16px 6px rgba(217,164,65,.3); animation:grid-pulse 3.6s ease-in-out infinite;}
.hero-dot.d1{top:20%; left:20%;}
.hero-dot.d2{top:70%; left:10%; animation-delay:1s;}
.hero-dot.d3{top:45%; left:24%; animation-delay:2s;}

/* trust feature chips — equal width/height, single row */
.trust-features{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; max-width:560px;}
.tf-item{
  flex:1 1 0; min-width:120px; height:64px;
  display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; background:#fff; border:1px solid var(--hp-border); border-radius:12px;
  padding:11px 12px; font-size:13px; font-weight:500; color:var(--hp-text); box-shadow:0 8px 20px -14px rgba(17,24,39,.2);
  transition:transform .2s ease, box-shadow .2s ease;
}
.tf-item:hover{transform:translateY(-2px); box-shadow:0 12px 24px -14px rgba(46,49,146,.3);}
.tf-ic{line-height:1; display:inline-flex; color:var(--hp-secondary);}

/* illustration column — blended into the background, no visible cut-out edge */
.home-hero-light .hero-media{position:relative; z-index:2; display:flex; align-items:center; justify-content:center;}
.home-hero-light .hero-media::after{
  content:''; position:absolute; top:-4%; bottom:-4%; left:-6%; right:-6%; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,
    #EEF3FC 0%, rgba(238,243,252,.5) 12%, transparent 24%,
    transparent 76%, rgba(238,243,252,.5) 88%, #EEF3FC 100%);
}
.home-hero-light .hero-media::before{
  content:''; position:absolute; inset:-10%; z-index:-1; border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(183,181,224,.4), transparent 62%),
    radial-gradient(circle at 60% 60%, rgba(46,49,146,.14), transparent 70%);
  filter:blur(38px);
}
.home-hero-light .hero-media img{
  width:100%; max-width:820px; height:auto; object-fit:contain;
  filter:drop-shadow(0 40px 50px rgba(28,28,102,.14));
}

/* full-width infinite feature marquee — replaces the old trust-feature chip row */
.feature-marquee-wrap{
  position:relative; z-index:5; width:100%; overflow:hidden; margin-top:36px;
  background:linear-gradient(120deg,var(--indigo),var(--indigo-2));
  padding:16px 0; box-shadow:0 10px 30px -18px rgba(46,49,146,.5);
}
.feature-marquee-track{display:flex; gap:14px; width:max-content; animation:scroll-x-rtl 22s linear infinite; white-space:nowrap;}
.fm-item{color:#fff; font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px;}
.fm-dot{color:rgba(255,255,255,.4); font-size:14px;}
@media (max-width:767px){
  .feature-marquee-wrap{margin-top:24px;}
  .fm-item{font-size:13px;}
}

/* floating premium statistics card — overlaps the bottom edge of the hero */
.hero-stats-float{
  position:relative; z-index:6; max-width:1220px; width:calc(100% - 48px); margin:56px auto 0;
  background:#fff; border-radius:24px; box-shadow:0 30px 60px -24px rgba(17,24,39,.18); border:1px solid var(--hp-border);
  padding:30px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.hsf-item{display:flex; align-items:center; gap:16px;}
.hsf-ic{
  width:48px; height:48px; flex:none; border-radius:50%; background:var(--ice); color:var(--indigo);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.hsf-ic-blue{background:#e3edfc;}
.hsf-ic-gold{background:#fbf1de;}
.hsf-ic-pink{background:#fbe6ea;}
.hsf-ic-amber{background:#fbecd9;}
.hsf-num{font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:var(--hp-text); line-height:1.1;}
.hsf-lbl{font-size:13px; font-weight:600; color:var(--hp-text); margin-top:2px;}
.hsf-sub{font-size:11.5px; color:var(--hp-muted); margin-top:2px;}

/* "Proudly Delivering..." strap line below the stats card */
.hero-proud{
  position:relative; z-index:6; text-align:center; margin:34px auto 0; padding:0 24px; font-family:'Playfair Display',serif;
  font-size:clamp(16px,2vw,21px); color:var(--hp-text,#111827);
}
.hero-proud b{color:var(--indigo); font-weight:700;}
.hero-proud-sub{
  position:relative; z-index:6; display:flex; align-items:center; justify-content:center; gap:16px;
  margin:10px auto 0; font-size:13.5px; color:var(--hp-muted,#6B7280); letter-spacing:.02em;
}
.hero-proud-line{width:44px; height:1px; background:var(--gold);}

/* Tablet (768–1024px): keep the desktop two-column hero, just tighten spacing slightly */
@media (max-width: 1024px) and (min-width: 768px){
  .home-hero-light{padding-top:130px; padding-bottom:80px;}
  .home-hero-light .hero-split-grid{gap:24px; padding-left:32px; padding-right:24px;}
  .home-hero-light .hero-media img{max-width:520px;}
}
/* Mobile only (<768px): hero image as full-bleed background, text sits on a glass
   card so it stays clearly readable no matter what part of the photo is behind it */
@media (max-width: 767px){
  .home-hero-light{padding-top:64px; padding-bottom:96px;}
  .home-hero-light .hero-split-grid{
    display:block; position:relative; grid-template-columns:1fr; max-width:100%; padding:0; min-height:64vh; overflow:hidden;
  }
  .home-hero-light .hero-media{
    position:absolute; inset:0; z-index:1; margin:0; padding:0; height:100%; display:block;
  }
  .home-hero-light .hero-media::before{display:none;}
  .home-hero-light .hero-media img{
    width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 30%;
    filter:brightness(.78); animation:none;
  }
  /* dark blue gradient overlay, ~35-45% opacity, so the photo stays visible but recedes behind the text */
  .home-hero-light .hero-media::after{
    content:''; position:absolute; inset:0; z-index:2;
    background:linear-gradient(180deg, rgba(18,18,63,.38) 0%, rgba(28,28,102,.34) 45%, rgba(18,18,63,.5) 100%);
  }
  .home-hero-light .hero-left{
    position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:center;
    min-height:64vh; padding:56px 22px 32px; text-align:center;
  }
  .home-hero-light .hero-left .hero-badge{
    position:absolute; top:14px; left:50%; transform:translateX(-50%); margin:0; white-space:nowrap;
    background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); color:#fff;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .home-hero-light .hero-left .hero-badge .dot{background:#5be08a;}
  /* glass card behind heading + paragraph + CTAs — guarantees contrast regardless of the photo underneath */
  .hero-text-card{
    width:100%; max-width:640px; padding:28px 24px; border-radius:24px;
    background:rgba(12,12,40,.42);
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.5);
  }
  .home-hero-light .hero-left h1{
    color:var(--gold); text-align:center;
    text-shadow:0 2px 20px rgba(0,0,0,.5), 0 0 30px rgba(217,164,65,.4);
  }
  .home-hero-light .hero-left h1 span{color:var(--gold);}
  .home-hero-light .hero-sub{
    color:#fff !important; font-weight:500; text-align:center; max-width:100% !important; margin-left:auto; margin-right:auto;
    line-height:1.7; text-shadow:0 1px 4px rgba(0,0,0,.4);
  }
  .home-hero-light .hero-left .hero-cta{justify-content:center; flex-wrap:wrap; gap:12px;}
  .home-hero-light .hero-left .btn-outline-light{background:rgba(255,255,255,.92);}
  .hero-stats-float{grid-template-columns:1fr 1fr; margin-top:0;}
}
@media (max-width: 640px){
  .hero-stats-float{grid-template-columns:1fr; padding:24px;}
  .home-hero-light .hero-cta{justify-content:center;}
  .hero-h1-break{display:none;}
  .home-hero-light .hero-left h1{font-size:clamp(26px,7vw,34px); white-space:nowrap;}
}

/* quote-styled paragraph — used for hero tagline + any quoted copy sitewide */
.hero-sub-quote, .pull-quote{
  position:relative; font-family:'Playfair Display',serif; font-style:italic;
  max-width:560px; margin-left:auto; margin-right:auto; line-height:1.7;
}
.hero-sub-quote::before, .pull-quote::before{content:'\201C';}
.hero-sub-quote::after, .pull-quote::after{content:'\201D';}

/* ---------- Circular orbit animation (hero background) ---------- */
.orbit-anim{position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; pointer-events:none; overflow:hidden;}
.orbit-anim .ring{position:absolute; border:1px solid rgba(255,255,255,.14); border-radius:50%;}
.orbit-anim .ring-1{width:320px; height:320px;}
.orbit-anim .ring-2{width:520px; height:520px; border-color:rgba(255,255,255,.1);}
.orbit-anim .ring-3{width:740px; height:740px; border-color:rgba(255,255,255,.07);}
.orbit-anim .ring-4{width:960px; height:960px; border-color:rgba(255,255,255,.05);}

.orbit-anim .pulse-core{position:absolute; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle,#fff,var(--lavender-light)); box-shadow:0 0 30px 10px rgba(183,181,224,.55);}
.orbit-anim .ping{position:absolute; width:120px; height:120px; border-radius:50%; border:2px solid rgba(183,181,224,.55); animation:ping 4.5s cubic-bezier(.2,.7,.4,1) infinite;}
.orbit-anim .ping-2{animation-delay:1.5s;}
.orbit-anim .ping-3{animation-delay:3s;}
@keyframes ping{0%{transform:scale(.25); opacity:.9;} 100%{transform:scale(4.6); opacity:0;}}

.orbit-anim .orbit{position:absolute; border:1px dashed rgba(255,255,255,.16); border-radius:50%; animation:spin linear infinite;}
.orbit-anim .orbit-1{width:380px; height:380px; animation-duration:16s;}
.orbit-anim .orbit-2{width:580px; height:580px; animation-duration:26s; animation-direction:reverse; border-style:solid; border-color:rgba(255,255,255,.09);}
.orbit-anim .orbit-3{width:820px; height:820px; animation-duration:40s;}
.orbit-anim .orbit-dot{position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%;}
.orbit-anim .orbit-1 .orbit-dot{background:var(--gold); box-shadow:0 0 18px 5px rgba(217,164,65,.65);}
.orbit-anim .orbit-2 .orbit-dot{background:#fff; box-shadow:0 0 16px 5px rgba(255,255,255,.55);}
.orbit-anim .orbit-3 .orbit-dot{background:var(--lavender-light); box-shadow:0 0 16px 5px rgba(183,181,224,.65);}
@keyframes spin{to{transform:rotate(360deg);}}

@media (max-width: 760px){
  .orbit-anim .ring-3, .orbit-anim .ring-4, .orbit-anim .orbit-3{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .orbit-anim .orbit, .orbit-anim .ping{animation:none;}
}

/* the "overlap" — About Us card slides up over the hero as you scroll */
.overlap-card{
  position:relative; z-index:5; background:#fff; margin-top:-70px; border-radius:44px 44px 0 0;
  box-shadow:0 -40px 70px -30px rgba(15,15,60,.35); padding-top:96px; padding-bottom:70px; overflow:hidden;
}
.overlap-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:220px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, #EEF3FC 0%, rgba(238,243,252,.4) 55%, transparent 100%);
}
.about-grid-anim{
  position:absolute; top:0; left:0; right:0; height:640px; z-index:0; pointer-events:none; overflow:hidden;
  background-image:linear-gradient(rgba(46,49,146,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(46,49,146,.05) 1px, transparent 1px);
  background-size:44px 44px; animation:grid-drift 22s linear infinite;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
}

/* ---------- Awards / animated score pillars ---------- */
.pillars{display:flex; align-items:flex-end; gap:30px; justify-content:center; flex-wrap:wrap; padding:30px 0 6px;}
.pillar{display:flex; flex-direction:column; align-items:center; width:112px;}
.pillar-top{
  width:38px; height:38px; border-radius:9px; background:linear-gradient(150deg,var(--lavender-light),var(--indigo));
  display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:-10px; z-index:2;
  box-shadow:0 8px 18px -6px rgba(46,49,146,.5); transform:rotate(45deg);
}
.pillar-top svg{transform:rotate(-45deg);}
.pillar:nth-child(2) .pillar-top{background:linear-gradient(160deg,#c9d4f2,var(--indigo-2) 75%);}
.pillar:nth-child(3) .pillar-top{background:linear-gradient(160deg,var(--lavender-light),var(--navy) 75%);}
.pillar:nth-child(4) .pillar-top{background:linear-gradient(160deg,#e4c98a,var(--gold) 75%);}
.pillar-score{font-family:'Playfair Display',serif; font-size:20px; color:#fff; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.25);}
.pillar-label{font-size:12.5px; color:var(--muted); text-align:center; line-height:1.35; margin-top:16px;}

/* ---------- Testimonials — continuous right-to-left marquee, no stopping/looping glitches ---------- */
.testimonials-section{background:linear-gradient(180deg,#fff 0%, var(--ice) 100%);}
.testi-marquee-wrap{
  position:relative; overflow:hidden; margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.testi-marquee{display:flex; gap:24px; width:max-content; animation:scroll-x-rtl 48s linear infinite;}
.testi-marquee-wrap:hover .testi-marquee{animation-play-state:paused;}
.testi-card{
  flex:0 0 340px; width:340px; background:#fff; border:1px solid #edeef8; border-radius:24px; padding:34px 30px;
  box-shadow:0 30px 70px -32px rgba(46,49,146,.3); text-align:center;
}
.testi-stars{color:var(--gold); font-size:18px; letter-spacing:3px; margin-bottom:16px;}
.testi-quote{font-family:'Playfair Display',serif; font-size:16.5px; font-style:italic; color:var(--ink); line-height:1.6; margin-bottom:26px;}
.testi-person{display:flex; align-items:center; justify-content:center; gap:14px;}
.testi-avatar{
  width:48px; height:48px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-2)); color:#fff; font-weight:700; font-size:15px;
}
.testi-person b{display:block; font-size:14.5px; color:var(--navy);}
.testi-person span{font-size:12.5px; color:var(--muted);}
@media (max-width:640px){
  .testi-card{flex:0 0 280px; width:280px; padding:28px 24px;}
  .testi-marquee{animation-duration:38s;}
}

/* ---------- Quality Assurance section (no cards — gradient + grid bg) ---------- */
.qa-section{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(139,137,199,.25), transparent 60%),
    linear-gradient(150deg,var(--navy) 0%, var(--indigo) 100%);
}
.qa-section .grid-anim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:40px 40px; animation:grid-drift 20s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 75%);
}
.qa-section .grid-glow{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px 5px rgba(217,164,65,.4); animation:grid-pulse 4.2s ease-in-out infinite;}
.qa-section .g1{top:20%; left:70%;}
.qa-section .g2{top:55%; left:85%; animation-delay:1.2s;}
.qa-section .g3{top:75%; left:60%; animation-delay:2.4s;}
.qa-list{margin-top:22px; display:flex; flex-direction:column; gap:18px;}
.qa-item{display:flex; gap:14px; align-items:flex-start;}
.qa-ic{width:38px; height:38px; flex:none; border-radius:10px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--gold);}
.qa-item b{display:block; font-size:16px; margin-bottom:4px;}
.qa-item p{color:rgba(255,255,255,.75); font-size:14.5px; margin:0;}
.qa-stats{display:flex; gap:40px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15);}
.qa-stats b{display:block; font-family:'Playfair Display',serif; font-size:28px; color:var(--gold);}
.qa-stats span{font-size:12.5px; color:rgba(255,255,255,.7);}
.qa-list-light .qa-ic-light{background:var(--ice); color:var(--indigo);}
.qa-list-light b{color:var(--navy);}
.qa-list-light p{color:#000;}

/* ---------- Power BI panel (CORE 03 — no card grid) ---------- */
.powerbi-panel{
  position:relative; padding:36px 32px; border-radius:24px; color:#fff; text-align:center;
  background:linear-gradient(150deg,var(--indigo),var(--navy));
  box-shadow:0 30px 60px -24px rgba(46,49,146,.45);
}
.powerbi-badge{display:inline-block; padding:6px 16px; border-radius:99px; background:rgba(217,164,65,.2); color:var(--gold); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px;}
.powerbi-stats{display:flex; justify-content:center; gap:40px; margin-bottom:16px;}
.powerbi-stats b{display:block; font-family:'Playfair Display',serif; font-size:32px;}
.powerbi-stats span{font-size:12px; color:rgba(255,255,255,.7);}
.powerbi-panel p{color:rgba(255,255,255,.8); font-size:14px; margin:0;}

/* ---------- Priority row (replaces 3-box grid) ---------- */
.priority-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.priority-row span{
  flex:1; min-width:140px; display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:#fff; border-radius:12px; padding:14px 18px; box-shadow:var(--shadow-sm); font-size:13.5px; color:#000;
}
.priority-row b{color:var(--indigo);}

/* ---------- Tag row (replaces small card grid) ---------- */
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.tag-row span{
  padding:9px 16px; border-radius:99px; background:var(--ice); border:1px solid var(--hp-border,#E5E7EB);
  font-size:13px; font-weight:600; color:var(--navy); transition:transform .3s var(--ease), background .3s, color .3s;
}
.tag-row span:hover{background:var(--indigo); color:#fff; transform:translateY(-3px);}

/* ---------- Performance highlight paragraph (replaces cluttered stat-strip) ---------- */
.perf-highlight{
  max-width:820px; margin:32px auto 0; text-align:center; padding:32px 40px; border-radius:20px;
  background:linear-gradient(135deg,rgba(217,164,65,.08),rgba(46,49,146,.05));
  border:1px solid rgba(217,164,65,.25);
}
.perf-highlight p{font-size:17px; line-height:1.8; color:var(--ink); margin:0;}
.perf-highlight b{color:var(--gold); font-weight:700;}

/* ---------- AB Diapers showcase — new product-line section ---------- */
.ab-diapers-section{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg,var(--indigo),var(--navy));
}
.ab-diapers-section .section-head h2{color:#fff;}
.ab-diapers-section .section-head::before{background:radial-gradient(circle, rgba(217,164,65,.2), rgba(217,164,65,.06) 55%, transparent 75%);}
.ab-diapers-section .grid-anim{
  position:absolute !important; inset:0; z-index:0 !important; pointer-events:none; overflow:hidden;
  background-size:38px 38px; animation:grid-drift 20s linear infinite;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, transparent 75%);
}
.ab-diapers-section .grid-anim .grid-glow{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px 5px rgba(217,164,65,.4); animation:grid-pulse 4.2s ease-in-out infinite;}
.ab-diapers-section .grid-anim .g1{top:18%; left:12%;}
.ab-diapers-section .grid-anim .g2{top:42%; left:82%; animation-delay:1.2s;}
.ab-diapers-section .grid-anim .g3{top:70%; left:45%; animation-delay:2.4s;}
.diaper-showcase{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; margin-top:20px;
  border-radius:24px; overflow:hidden; background:var(--ice);
  box-shadow:0 30px 70px -28px rgba(10,10,40,.45);
}
.diaper-showcase-media{position:relative; min-height:300px;}
.diaper-showcase-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom;}
.diaper-showcase-content{padding:40px 40px; display:flex; flex-direction:column; justify-content:center;}
.diaper-showcase-content h3{font-size:24px; margin-bottom:12px; color:var(--navy);}
.diaper-showcase-content p{color:var(--muted); line-height:1.7; margin-bottom:18px;}
.diaper-features{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:9px;}
.diaper-features li{position:relative; padding-left:26px; color:var(--ink); font-size:14px;}
.diaper-features li::before{
  content:''; position:absolute; left:0; top:6px; width:7px; height:7px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 3px rgba(217,164,65,.2);
}
.diaper-showcase-content .btn{padding:11px 22px; font-size:13.5px; align-self:flex-start;}
@media (max-width:900px){
  .diaper-showcase{grid-template-columns:1fr;}
  .diaper-showcase-media{min-height:220px;}
  .diaper-showcase-content{padding:28px 24px;}
}

/* ---------- Gallery section — soft separation from neighbouring sections ---------- */
.gallery-section{
  background:linear-gradient(180deg, #fff 0%, rgba(46,49,146,.03) 50%, #fff 100%);
}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:16px;
}
.gallery-item{
  border-radius:16px; overflow:hidden; position:relative; box-shadow:var(--shadow-sm);
  border:3px solid #fff; outline:1px solid rgba(46,49,146,.12); transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.gallery-item:hover{box-shadow:0 24px 50px -24px rgba(46,49,146,.4); transform:translateY(-4px);}
.gallery-item.g-tall{grid-row:span 2;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item::after{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(28,28,102,.65) 100%);
  opacity:0; transition:opacity .4s var(--ease); z-index:1;
}
.gallery-item:hover::after{opacity:1;}
.gallery-overlay{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:10px;
  opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery-item:hover .gallery-overlay{opacity:1; transform:translateY(0);}
.gallery-btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:99px; border:none;
  background:rgba(255,255,255,.92); color:var(--navy); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.gallery-btn:hover{background:var(--gold); transform:translateY(-2px);}

/* ---------- Home section — 4 equally-sized images + centered "View Full Gallery" button ---------- */
.gallery-grid-4{grid-template-columns:repeat(2,1fr); grid-auto-rows:320px;}
.gallery-cta-row{text-align:center; margin-top:36px;}
@media (max-width:767px){
  .gallery-grid-4{grid-template-columns:1fr; grid-auto-rows:260px;}
}

/* ---------- Gallery lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,30,.88); opacity:0; visibility:hidden; padding:40px;
  transition:opacity .35s var(--ease), visibility 0s .35s;
}
.lightbox.open{opacity:1; visibility:visible; transition:opacity .35s var(--ease);}
.lightbox img{max-width:min(90vw,900px); max-height:85vh; border-radius:16px; box-shadow:0 40px 90px -20px rgba(0,0,0,.6); transform:scale(.94); transition:transform .35s var(--ease);}
.lightbox.open img{transform:scale(1);}
.lightbox-close{
  position:absolute; top:24px; right:28px; width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:background .3s;
}
.lightbox-close:hover{background:var(--gold); color:var(--navy);}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:130px;}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- Uniform grid — dedicated gallery page (every tile the same size) ---------- */
.gallery-grid-full{grid-auto-rows:260px;}
@media (max-width:900px){
  .gallery-grid-full{grid-auto-rows:220px;}
}
@media (max-width:560px){
  .gallery-grid-full{grid-auto-rows:200px;}
}

/* ---------- Branches section — its own soft themed backdrop ---------- */
.branches-section{
  position:relative; overflow:hidden;
  background:
    radial-gradient(800px 420px at 90% 0%, rgba(46,49,146,.07), transparent 60%),
    radial-gradient(800px 420px at 5% 100%, rgba(217,164,65,.08), transparent 60%),
    var(--ice);
}

/* ---------- Partners section — its own soft themed backdrop ---------- */
.partners-section{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(139,137,199,.14), transparent 60%),
    radial-gradient(900px 460px at 88% 100%, rgba(46,49,146,.08), transparent 60%),
    var(--ice);
}

/* ---------- Partners highlight (featured/spotlight treatment — moved right after About Us) ---------- */
.partners-highlight{padding-top:90px; padding-bottom:90px;}
.partners-spotlight{
  background:linear-gradient(160deg,#fff,rgba(243,244,251,.65));
  border:1px solid rgba(217,164,65,.4);
  border-radius:32px;
  padding:64px 40px;
  box-shadow:0 44px 100px -46px rgba(46,49,146,.4);
}
.partners-spotlight-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  background:linear-gradient(135deg,var(--gold),#f0d698);
  color:var(--navy); font-weight:700; font-size:13px; letter-spacing:.02em;
  padding:9px 20px; border-radius:99px;
  box-shadow:0 14px 30px -12px rgba(217,164,65,.65);
}
@media (max-width:640px){ .partners-spotlight{padding:44px 22px; border-radius:24px;} .partners-highlight{padding-top:60px; padding-bottom:60px;} }

/* ---------- Featured variant of solo-stat, used in the highlighted partners section ---------- */
.solo-stat-featured{
  background:linear-gradient(150deg,rgba(46,49,146,.9),rgba(28,28,102,.94));
  border:1px solid rgba(217,164,65,.35);
}
.solo-stat-featured .num{color:#fff;}
.solo-stat-featured .lbl{color:rgba(255,255,255,.75);}
.solo-stat-featured:hover{background:linear-gradient(135deg,var(--gold),#c98f2e); border-color:var(--gold);}
.solo-stat-featured:hover .num, .solo-stat-featured:hover .lbl{color:var(--navy);}

/* ---------- Horizontal infinite logo marquee (right→left, pause on hover) ---------- */
.hmarquee-wrap{
  position:relative; overflow:hidden; margin-top:48px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hmarquee{display:flex; width:max-content;}
.hmarquee-track{display:flex; gap:18px; width:max-content; animation:scroll-x-rtl 38s linear infinite;}
.hmarquee-wrap:hover .hmarquee-track{animation-play-state:paused;}
.hmarquee-track .logo-chip{
  background:#fff; border:1px solid #eceefa; border-radius:14px; padding:16px 22px; text-align:center;
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
  width:150px; height:90px; flex:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  cursor:pointer; text-decoration:none;
}
.hmarquee-track .logo-chip img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(.25); opacity:.85; transition:filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);}
.hmarquee-track .logo-chip:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(46,49,146,.4);}
.hmarquee-track .logo-chip:hover img{filter:grayscale(0); opacity:1; transform:scale(1.06);}
@keyframes scroll-x-rtl{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

/* ---------- Larger logo chips — dedicated Partners page only, so logos are clearly legible ---------- */
.partners-full-marquee .hmarquee-track{gap:26px;}
.partners-full-marquee .logo-chip{width:220px; height:130px; padding:22px 30px;}
@media (max-width:640px){
  .partners-full-marquee .logo-chip{width:170px; height:105px; padding:16px 22px;}
}

/* ---------- Standalone partner stat cards (separate, not one strip) ---------- */
.solo-stat{
  text-align:center; padding:26px 16px; border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(243,244,251,.5));
  border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 20px 44px -28px rgba(46,49,146,.35); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.solo-stat:hover{
  transform:translateY(-6px); background:linear-gradient(135deg,var(--indigo),var(--indigo-2));
  border-color:var(--indigo); box-shadow:0 26px 54px -20px rgba(46,49,146,.55);
}
.solo-stat .num{font-family:'Playfair Display',serif; font-size:34px; color:var(--navy); font-weight:700; transition:color .4s var(--ease);}
.solo-stat .lbl{font-size:13px; color:var(--muted); margin-top:6px; transition:color .4s var(--ease);}
.solo-stat:hover .num, .solo-stat:hover .lbl{color:#fff;}
@media (max-width:767px){
  .grid-3:has(.solo-stat), .grid-4:has(.solo-stat){grid-template-columns:1fr;}
}

/* ---------- "Become a Partner" glassmorphism CTA card ---------- */
.partner-cta-card{
  position:relative; max-width:720px; margin:56px auto 0; text-align:center; padding:44px 40px;
  border-radius:28px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 30px 70px -30px rgba(46,49,146,.28);
}
.partner-cta-card h3{font-size:26px; margin-bottom:10px;}
.partner-cta-card p{color:var(--muted); font-size:15.5px; margin-bottom:24px; max-width:480px; margin-left:auto; margin-right:auto;}

/* ---------- Numbered minimal cards (branches) — equal size, glow border, hover reveal ---------- */
.numbered-card{
  background:#f1f1ee; border:1px solid #e3e3dd; border-radius:16px; padding:34px 32px 32px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  position:relative; display:flex; flex-direction:column; min-height:452px;
}
.numbered-card::after{
  content:''; position:absolute; inset:-1px; border-radius:17px; padding:1px; pointer-events:none;
  background:linear-gradient(120deg,var(--lavender-light),var(--indigo),var(--lavender-light));
  background-size:220% 220%; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .5s var(--ease);
}
.numbered-card:hover{transform:translateY(-6px) rotate(-.4deg); box-shadow:0 30px 60px -28px rgba(28,28,102,.35); border-color:var(--lavender-light);}
.numbered-card:hover::after{opacity:1; animation:glow-sweep 2.6s linear infinite;}
@keyframes glow-sweep{0%{background-position:0% 50%;} 100%{background-position:200% 50%;}}
.numbered-card .n-eyebrow{
  display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--indigo-2); font-weight:600; margin-bottom:22px;
}
.numbered-card .n-eyebrow .n-tag{background:var(--navy); color:#fff; border-radius:6px; padding:3px 9px; font-size:11px;}
.numbered-card h3{font-size:26px; margin-bottom:10px; color:var(--navy);}
.numbered-card p{color:#141420; font-size:15px; font-weight:400; letter-spacing:.005em; line-height:1.7; margin-bottom:0;}
.numbered-card .n-more{
  color:var(--indigo-2); font-size:12.5px; font-weight:600; max-height:0; opacity:0;
  overflow:hidden; transition:max-height .45s var(--ease), opacity .4s var(--ease), margin .45s var(--ease);
}
.numbered-card:hover .n-more{max-height:40px; opacity:1; margin:10px 0 0;}
.numbered-card .n-panel{
  margin-top:auto; padding-top:22px;
  border:1px solid #e3e3dd; border-radius:12px; overflow:hidden; height:200px; position:relative;
  background:#eceef5; display:flex; align-items:flex-end;
}
.numbered-card .n-panel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:transform .6s var(--ease), opacity .5s var(--ease);}
.numbered-card .n-panel img.n-img-loaded{opacity:1;}
.numbered-card:hover .n-panel img{transform:translateY(-6px) scale(1.04);}
.numbered-card .n-panel .n-soon{position:absolute; top:14px; right:14px; background:var(--gold); color:var(--navy); font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:99px; z-index:2;}

/* ---------- Scroll-linked word reveal ---------- */
.word-reveal{display:flex; flex-wrap:wrap;}
.word-reveal .w{
  color:rgba(28,28,102,.18); transition:color .25s linear; margin-right:.3em;
}
.word-reveal .w.lit{color:var(--navy);}
.word-reveal.on-dark .w{color:rgba(255,255,255,.22);}
.word-reveal.on-dark .w.lit{color:#fff;}

/* ---------- Partners grid ---------- */
.partner-chip{
  background:#fff; border:1px solid #eceefa; border-radius:14px; padding:22px 14px; text-align:center;
  font-weight:700; font-size:15px; color:var(--indigo); box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s, color .4s;
}
.partner-chip:hover{transform:translateY(-6px); background:linear-gradient(135deg,var(--indigo),var(--indigo-2)); color:#fff; box-shadow:var(--shadow);}

/* ---------- Marquee (logos strip) ---------- */
.marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex; gap:44px; width:max-content; animation:scroll-x 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{font-size:16px; font-weight:600; color:var(--muted); white-space:nowrap; padding:10px 22px; border:1px solid #eceefa; border-radius:99px; background:#fff;}
@keyframes scroll-x{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

/* ---------- Counters ---------- */
.counter{font-family:'Playfair Display',serif;}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; border-radius:28px; overflow:hidden; padding:70px 50px; color:#fff; text-align:center;
  background:linear-gradient(120deg,var(--indigo),var(--navy)); box-shadow:var(--shadow);
}
.cta-band::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.14), transparent 45%), radial-gradient(circle at 85% 85%, rgba(255,255,255,.1), transparent 40%);}
.cta-band > *{position:relative; z-index:2;}
.cta-band .grid-anim, .branches-section .grid-anim{
  position:absolute !important; inset:0; z-index:0 !important; pointer-events:none; overflow:hidden;
  background-size:38px 38px; animation:grid-drift 20s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, transparent 75%);
}
.cta-band .grid-anim{background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);}
.cta-band .grid-anim .grid-glow{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px 5px rgba(217,164,65,.4); animation:grid-pulse 4.2s ease-in-out infinite;}
.branches-section .grid-anim, .grid-anim-light{background-image:linear-gradient(rgba(46,49,146,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(46,49,146,.05) 1px, transparent 1px); z-index:0 !important;}
.branches-section .grid-anim .grid-glow, .grid-anim-light .grid-glow{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--indigo); box-shadow:0 0 14px 5px rgba(46,49,146,.25); animation:grid-pulse 4.2s ease-in-out infinite;}
.cta-band .grid-anim .g1, .branches-section .grid-anim .g1{top:18%; left:12%;}
.cta-band .grid-anim .g2, .branches-section .grid-anim .g2{top:42%; left:82%; animation-delay:1.2s;}
.cta-band .grid-anim .g3, .branches-section .grid-anim .g3{top:70%; left:45%; animation-delay:2.4s;}
/* generic reusable light-mode grid animation for any section (indigo dots, subtle) */
.grid-anim-light{
  position:absolute !important; inset:0; z-index:0 !important; pointer-events:none; overflow:hidden;
  background-size:38px 38px; animation:grid-drift 20s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 75%);
}
.grid-anim-light .g1{top:16%; left:10%;}
.grid-anim-light .g2{top:38%; left:88%; animation-delay:1.2s;}
.grid-anim-light .g3{top:68%; left:50%; animation-delay:2.4s;}
.grid-anim-light .grid-glow.gold{background:var(--gold); box-shadow:0 0 14px 5px rgba(217,164,65,.35);}
.cta-band h2{color:#fff; margin-bottom:14px;}
.cta-band p{color:rgba(255,255,255,.85); margin-bottom:30px;}
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--indigo) 0%, var(--navy) 62%, #12123f 100%);
  color:rgba(255,255,255,.8); padding:70px 0 26px;
}
.site-footer::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(217,164,65,.09), transparent 60%),
    radial-gradient(700px 380px at 88% 100%, rgba(139,137,199,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, auto, 38px 38px, 38px 38px;
}
.site-footer .container{position:relative; z-index:1;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.footer-brand img{height:40px;}
.footer-brand b{color:#fff; font-family:'Playfair Display',serif; font-size:19px;}
.site-footer h4{color:#fff; font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; font-family:'Poppins',sans-serif;}
.site-footer ul li{margin-bottom:11px; font-size:14.5px;}
.site-footer ul li a:hover{color:#fff;}
.footer-social{display:flex; gap:10px; margin-top:18px;}
.footer-social a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(217,164,65,.4); color:var(--gold); display:flex; align-items:center; justify-content:center; transition:.3s;}
.footer-social a:hover{background:var(--gold); border-color:var(--gold); color:var(--navy); transform:translateY(-3px);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; flex-wrap:wrap; gap:10px;}
.footer-bottom a{opacity:.85;}

/* ---------- WhatsApp float button ---------- */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:900; width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  animation:floaty 3s ease-in-out infinite; transition:transform .3s var(--ease);
}
.wa-float::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(37,211,102,.5);
  animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{0%{transform:scale(.85); opacity:.9;} 100%{transform:scale(1.3); opacity:0;}}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
.wa-float:hover{transform:scale(1.08);}
@media (max-width:767px){
  .wa-float{width:52px; height:52px; bottom:18px; right:18px;}
}

/* ---------- Contact page split layout ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:flex-start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }

/* ---------- Forms — glassmorphism card, floating labels ---------- */
.form-card{
  position:relative; background:rgba(255,255,255,.86); border-radius:28px; padding:40px;
  box-shadow:0 24px 60px -30px rgba(23,23,50,.28); border:1px solid #eceefa;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); overflow:hidden;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
.field{position:relative; display:flex; flex-direction:column;}
.field.full{grid-column:1 / -1;}
.field label{
  position:absolute; left:15px; top:14px; font-size:12px; color:var(--indigo-2); pointer-events:none;
  transition:color .25s var(--ease); transform-origin:left top;
  transform:translateY(-25px) scale(.82); background:#fff; font-weight:600; padding:0 4px;
}
.field input, .field textarea, .field select{
  border:1.5px solid #e2e3f2; border-radius:10px; padding:13px 15px; font-family:inherit; font-size:14.5px;
  background:rgba(255,255,255,.7); transition:border-color .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder{color:#9a9ab0; opacity:1; font-style:normal;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--indigo-2); box-shadow:0 0 0 4px rgba(46,49,146,.12);}
.field select{color:var(--ink);}
.field textarea{resize:vertical; min-height:120px;}
.field-error input, .field-error textarea, .field-error select{border-color:#e0507a; animation:field-shake .4s;}
@keyframes field-shake{0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);}}

.form-success-overlay{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px; background:rgba(255,255,255,.96); opacity:0; pointer-events:none; transform:scale(.95);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
#contact-form.form-success .form-success-overlay{opacity:1; pointer-events:auto; transform:scale(1);}
.form-success-check{
  width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#25D366,#1eb85a);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  animation:success-pop .5s var(--ease);
}
@keyframes success-pop{0%{transform:scale(0);} 70%{transform:scale(1.15);} 100%{transform:scale(1);}}
.form-success-overlay h4{font-size:22px; color:var(--navy); margin-bottom:8px;}
.form-success-overlay p{color:var(--muted); font-size:14.5px; max-width:320px;}

/* ---------- Contact info cards (clickable — Head Office/Email/WhatsApp are links) ---------- */
.contact-info-card{
  display:block; background:#fff; border:1px solid #edeef8; border-radius:16px; padding:20px; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); text-decoration:none; cursor:pointer;
}
.contact-info-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--indigo);}
.contact-info-card .ic{width:42px; height:42px; border-radius:12px; background:var(--ice); display:flex; align-items:center; justify-content:center; color:var(--indigo); margin-bottom:12px; transition:background .3s, color .3s;}
.contact-info-card:hover .ic{background:var(--indigo); color:#fff;}
.contact-info-card h4{font-size:14.5px; margin-bottom:4px; color:var(--navy);}
.contact-info-card p{font-size:13.5px; color:#000; margin:0;}
.contact-social{display:flex; align-items:center; gap:14px; margin-top:26px; font-size:13.5px; color:var(--muted); font-weight:600;}
.contact-social a{
  width:36px; height:36px; border-radius:50%; background:var(--ice); color:var(--indigo); display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s, color .3s;
}
.contact-social a:hover{background:var(--indigo); color:#fff; transform:translateY(-3px);}

.map-wrap{
  position:relative; border-radius:28px; overflow:hidden; padding:6px;
  background:linear-gradient(135deg,var(--gold),var(--indigo),var(--lavender-light));
  box-shadow:0 30px 70px -30px rgba(46,49,146,.4);
}
.map-wrap::before{
  content:'Karachi HQ'; position:absolute; top:18px; left:18px; z-index:2; padding:8px 16px; border-radius:99px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px); font-size:12.5px; font-weight:700; color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.map-wrap iframe{position:relative; z-index:1; width:100%; height:100%; min-height:340px; border:0; border-radius:24px; filter:grayscale(.15) contrast(1.05);}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.mt-40{margin-top:40px;}
.flex{display:flex;}
.gap-12{gap:12px;}
.badge-soft{display:inline-block; padding:5px 14px; background:var(--ice); color:var(--indigo-2); border-radius:99px; font-size:12.5px; font-weight:600; margin-bottom:10px;}

/* ---------- Responsive ---------- */
/* Tablet (768–1024px): keep desktop-style grids, just tighten gap slightly */
@media (max-width: 1024px) and (min-width: 768px){
  .grid-6{grid-template-columns:repeat(3,1fr);}
  .split{gap:34px;}
}
/* Mobile only (<768px): stack multi-column layouts */
@media (max-width: 767px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr; gap:34px;}
}
/* Nav / burger menu — active on both tablet and mobile */
body.menu-open{overflow:hidden;}
.nav-overlay{
  position:fixed; inset:0; z-index:999; background:rgba(10,10,30,.55);
  opacity:0; visibility:hidden; transition:opacity .38s var(--ease), visibility 0s .38s;
}
.nav-overlay.open{opacity:1; visibility:visible; transition:opacity .38s var(--ease);}
@media (max-width: 1024px){
  .header-actions{display:none;}
  .burger{
    display:flex; position:relative; z-index:1101;
    width:44px; height:44px; align-items:center; justify-content:center; gap:5px; margin:-7px -7px -7px 0;
  }
  .burger span{width:22px;}
  .nav-cta{display:inline-flex; margin-top:8px; width:100%; justify-content:center; min-height:44px;}
  .nav-links{
    position:fixed; top:0; right:0; z-index:1099; height:100vh; width:78%; max-width:340px; background:var(--navy);
    flex-direction:column; align-items:flex-start; padding:100px 30px 24px; gap:6px;
    border-radius:24px 0 0 24px; overflow-y:auto;
    transform:translateX(100%); opacity:0; visibility:hidden;
    transition:transform .38s var(--ease), opacity .3s var(--ease), visibility 0s .38s;
    box-shadow:-20px 0 60px rgba(0,0,0,.35);
  }
  .nav-links.open{transform:translateX(0); opacity:1; visibility:visible; transition:transform .38s var(--ease), opacity .3s var(--ease);}
  .nav-links a{
    display:flex; align-items:center; width:100%; min-height:44px; color:#fff; font-size:16.5px;
    padding:10px 4px 10px 14px; border-radius:10px; position:relative;
    opacity:0; transform:translateX(16px); transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  .nav-links.open a{opacity:1; transform:translateX(0);}
  .nav-links a::after{display:none;}
  .nav-links a::before{
    content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px;
    background:var(--gold); transform:scaleY(0); transition:transform .3s var(--ease);
  }
  .nav-links a:active{background:rgba(255,255,255,.08);}
  .nav-links a.active::before{transform:scaleY(1);}
  .nav-links a.active{color:var(--gold); font-weight:600; background:rgba(255,255,255,.06);}
  .nav-cta{opacity:0; transform:translateX(16px); transition:opacity .35s var(--ease), transform .35s var(--ease);}
  .nav-links.open .nav-cta{opacity:1; transform:translateX(0); transition-delay:280ms;}
}
@media (max-width: 767px){
  .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .hero-stats{gap:20px;}
  .site-header{padding:14px 0;}
  .site-header.scrolled{padding:9px 0;}
  .brand img{height:36px;}
  .brand-name{font-size:15px;}
  .footer-social a{width:44px; height:44px;}
  .gallery-btn{min-height:40px;}
}
@media (min-width: 1025px){
  .burger{display:none !important;}
}
@media (max-width: 560px){
  .section{padding:70px 0;}
  .grid-2, .grid-3, .grid-4, .grid-6{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .cta-band{padding:46px 24px;}
  .stat-strip{padding:28px 18px;}
}

/* ===================================================================
   PREMIUM 3D LAYER — depth, glass, tilt, grain, glow
=================================================================== */

/* film-grain overlay across the whole site for a tactile, premium feel */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* floating gradient-mesh blobs used as decorative depth behind hero/section content */
.blob{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; opacity:.55; animation:blob-float 14s ease-in-out infinite;}
.blob-a{width:420px; height:420px; background:radial-gradient(circle,var(--lavender-light),transparent 70%); top:-120px; right:-100px;}
.blob-b{width:340px; height:340px; background:radial-gradient(circle,var(--gold),transparent 70%); bottom:-100px; left:-80px; opacity:.28; animation-delay:-6s;}
.blob-c{width:280px; height:280px; background:radial-gradient(circle,#7de0c8,transparent 70%); top:40%; left:50%; opacity:.18; animation-delay:-3s;}
@keyframes blob-float{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-24px,30px) scale(1.08);}}

/* deeper, richer multi-layer shadows for a lifted / premium feel */
.card, .numbered-card, .form-card, .split-hero-media, .branch-card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 2px 6px rgba(20,20,70,.06),
    0 26px 54px -22px rgba(20,20,70,.28);
}
.card.dark{box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 26px 60px -20px rgba(10,10,40,.55);}

/* glassmorphism variant */
.glass{
  background:rgba(255,255,255,.08); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
}

/* 3D tilt interaction — perspective wrapper + JS-driven rotateX/rotateY (see main.js .tilt-target) */
.tilt-zone{perspective:1200px;}
.tilt-target{
  transform-style:preserve-3d; will-change:transform; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.tilt-target > *{transform:translateZ(18px);}


/* header glass upgrade */
.site-header{box-shadow:0 1px 0 rgba(255,255,255,.06);}
.site-header.scrolled{
  background:rgba(255,255,255,.72); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 10px 40px -18px rgba(20,20,70,.35), inset 0 -1px 0 rgba(20,20,70,.06);
}

/* ---------- True 3D award pillars (front + side + top face) ---------- */
.pillars{perspective:1000px;}
.pillar-stage{position:relative; width:56px; height:170px;}
.pillar-3d{
  position:absolute; left:0; bottom:0; width:56px; height:10px;
  transform-style:preserve-3d; transform:rotateY(-20deg);
  transition:height 1.6s var(--ease), transform .5s var(--ease);
}
.pillar:hover .pillar-3d{transform:rotateY(-32deg) rotateX(3deg);}
.pillar-3d.grow{height:var(--h,170px);}
.pillar-3d .face{position:absolute; border-radius:2px;}
.pillar-3d .face-front{
  inset:0; border-radius:6px 6px 3px 3px; display:flex; align-items:flex-start; justify-content:center; padding-top:12px;
  background:linear-gradient(180deg,var(--lavender-light),var(--indigo) 85%);
  box-shadow:inset 0 2px 8px rgba(255,255,255,.4), inset 0 -12px 18px rgba(0,0,0,.15);
}
.pillar-3d .face-side{
  top:0; right:-15px; width:16px; height:100%; transform:rotateY(90deg) translateZ(8px); transform-origin:left center;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.38)); border-radius:0 6px 3px 0;
}
.pillar-3d .face-top{
  top:0; left:0; width:56px; height:16px; transform:rotateX(90deg) translateZ(8px); transform-origin:top center;
  background:linear-gradient(160deg,#ffffff,var(--lavender-light)); border-radius:8px 8px 0 0; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.pillar:nth-child(2) .face-front{background:linear-gradient(180deg,#dfe6fb,var(--indigo-2) 85%);}
.pillar:nth-child(2) .face-top{background:linear-gradient(160deg,#ffffff,#dfe6fb);}
.pillar:nth-child(3) .face-front{background:linear-gradient(180deg,var(--lavender-light),var(--navy) 85%);}
.pillar:nth-child(3) .face-top{background:linear-gradient(160deg,#ffffff,var(--lavender-light));}
.pillar:nth-child(4) .face-front{background:linear-gradient(180deg,#f1dfae,var(--gold) 85%);}
.pillar:nth-child(4) .face-top{background:linear-gradient(160deg,#ffffff,#f1dfae);}

/* extra depth on branch skyline panels + numbered card image panels */
.numbered-card .n-panel, .branch-card{ transform-style:preserve-3d; }

/* premium serif hero numerals / big display headings */
.display-number{font-family:'Playfair Display',serif; font-weight:800; letter-spacing:-0.02em;}

@media (max-width: 760px){
  .blob{display:none;}
  .tilt-target{transform:none !important;}
}