/* =========================================================
   SSHG Group - Home page premium update (home.css)
   Loaded only by index.php, after style.css
   ========================================================= */

/* ---------- shared bits ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px!important;font:700 .78rem "Source Sans 3",system-ui,sans-serif!important;letter-spacing:.2em;text-transform:uppercase;color:var(--o)!important}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor}
.sh.c{text-align:center;margin-left:auto;margin-right:auto}
.sh.c .eyebrow{justify-content:center}.sh.c .eyebrow::after{content:"";width:34px;height:2px;background:currentColor}
.sh.c p:not(.eyebrow){max-width:620px;margin-left:auto;margin-right:auto}

/* ---------- 1. HERO SLIDER: mobile = full image on top, text below ---------- */
@media(max-width:768px){
  .slider{display:grid;height:auto;min-height:0;max-height:none;background:#062A1B}
  .slide{grid-area:1/1;position:relative;inset:auto;display:flex;flex-direction:column}
  .slide::after{display:none}
  .sbg,.slide.on .sbg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transform:none;animation:none;border-bottom:3px solid var(--o)}
  .sc{height:auto;justify-content:flex-start;padding:22px 0 92px}
  .think{margin:0 0 10px;font-size:.7rem;letter-spacing:.2em}
  .stitle{font-size:1.85rem;margin:0 0 10px;max-width:none}
  .ssub{font-size:1rem;margin:0 0 6px}
  .sloc{margin:0 0 16px;font-size:.95rem}
  .sctl{bottom:20px}
  .arw{width:44px;height:44px}
}
@media(max-width:380px){.stitle{font-size:1.6rem}.ssub{font-size:.95rem}}

/* ---------- 2. COUNTING SECTION ---------- */
.stats.prem{background:
  radial-gradient(800px 320px at 12% 0,#1d8a5455,transparent 62%),
  radial-gradient(700px 320px at 92% 100%,#f28a1c38,transparent 62%),
  linear-gradient(135deg,#062A1B 0,#0A3D26 55%,#0F5A38 100%);padding:76px 0;overflow:hidden;isolation:isolate}
.stats.prem::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%)}
.stats.prem .sgrid{gap:24px;padding:0}
.stats.prem .sgrid>div{display:flex}
.sbox{flex:1;position:relative;text-align:center;padding:38px 18px 30px;border-radius:22px;
  background:linear-gradient(160deg,#ffffff24,#ffffff0a);border:1px solid #ffffff2b;box-shadow:0 20px 50px #00000030,inset 0 1px 0 #ffffff30;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;overflow:hidden}
.sbox::before{content:"";position:absolute;left:50%;top:0;width:46%;height:3px;transform:translateX(-50%);border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--o),var(--gold));transition:width .5s var(--ease)}
.sbox:hover{transform:translateY(-8px);border-color:#f6b73c88;box-shadow:0 30px 60px #00000045,0 0 0 1px #f6b73c33,inset 0 1px 0 #ffffff40}
.sbox:hover::before{width:84%}
.sic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;border-radius:50%;color:#062A1B;background:linear-gradient(135deg,var(--o),var(--gold));box-shadow:0 12px 28px #f28a1c55,0 0 0 8px #ffffff12}
.sic svg{width:28px;height:28px}
.stats.prem b{display:block;margin:0 0 8px;font-size:clamp(2.6rem,4.4vw,3.7rem);line-height:1.05;font-weight:800;
  background:linear-gradient(180deg,#fff 20%,#F6D58F);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.stats.prem span{display:block;max-width:none;font:700 .8rem/1.4 "Source Sans 3",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#CFE5D8}

/* ---------- 3. ABOUT ---------- */
.about{padding:110px 0}
.abgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.abmedia{position:relative;padding:0 0 28px 28px}
.abmedia::before{content:"";position:absolute;left:0;bottom:0;width:72%;height:72%;border-radius:26px;background:linear-gradient(135deg,var(--o),var(--gold));opacity:.9;z-index:0}
.abframe{position:relative;z-index:1;border-radius:26px;overflow:hidden;box-shadow:0 34px 70px #0a3d2640;aspect-ratio:4/3.3;background:var(--g)}
.abframe img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.abmedia:hover .abframe img{transform:scale(1.05)}
.abbadge{position:absolute;z-index:2;right:-14px;bottom:0;background:var(--g);color:#fff;padding:18px 26px;border-radius:18px;box-shadow:0 20px 44px #0a3d2655;border:2px solid #ffffff22}
.abbadge strong{display:block;font:800 1.5rem "Bricolage Grotesque",system-ui,sans-serif;color:var(--gold);line-height:1.1}
.abbadge span{font-size:.9rem;color:#CFE5D8}
.abtxt h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:0 0 18px;color:var(--g);font-weight:800}
@media(prefers-color-scheme:dark){.abtxt h2{color:#8FD6A8}}
.abtxt p{color:var(--mut);font-size:1.08rem;margin:0 0 16px}
.abtxt p.eyebrow{margin:0 0 14px}
.abpoints{list-style:none;margin:22px 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.abpoints li{position:relative;padding-left:32px;font-weight:600;color:var(--ink)}
.abpoints li::before{content:"";position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:50%;background:var(--o) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---------- 4. OUR BRANDS ---------- */
.brands{position:relative}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.bgrid>article{display:flex}
.bcard{--bc:var(--o);position:relative;display:flex;flex-direction:column;width:100%;background:var(--w);border:1px solid var(--line);border-radius:24px;overflow:hidden;text-decoration:none;color:var(--ink);
  box-shadow:0 12px 34px #0a3d2612;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.bcard::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--bc);transform:scaleX(.3);transform-origin:left;transition:transform .6s var(--ease)}
.bcard:hover{transform:translateY(-10px);box-shadow:0 34px 64px #0a3d2630;border-color:var(--bc)}
.bcard:hover::after{transform:scaleX(1)}
.bmedia{position:relative;display:block;height:180px;overflow:hidden;background:#fff}
.bmedia::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(transparent,color-mix(in srgb,var(--bc) 14%,transparent));pointer-events:none}
.bmedia img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.22);transition:transform .8s var(--ease)}
.bcard:hover .bmedia img{transform:scale(1.34)}
.bbody{display:flex;flex-direction:column;flex:1;padding:26px 26px 28px;border-top:1px solid var(--line)}
.btag{min-height:2.7em;line-height:1.35;font:700 .72rem/1.35 "Source Sans 3",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--bc);margin-bottom:10px}
.bbody h3{margin:0 0 10px;font-size:1.55rem;color:var(--g)}
@media(prefers-color-scheme:dark){.bbody h3{color:#8FD6A8}}
.bdesc{color:var(--mut);font-size:1rem;line-height:1.6;margin-bottom:22px}
.bgo{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.bgo::after{content:"\2192";display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bc);color:#fff;transition:transform .4s var(--ease)}
.bcard:hover .bgo::after{transform:translateX(6px)}

/* ---------- 5. WHY CUSTOMERS STAY (dark premium) ---------- */
.why{background:radial-gradient(700px 360px at 85% 0,#f28a1c2e,transparent 60%),radial-gradient(700px 360px at 0 100%,#7db54433,transparent 60%),linear-gradient(135deg,#062A1B,#0A3D26 60%,#0F5A38);color:#fff;position:relative;overflow:hidden}
.why .sh h2{color:#fff}.why .sh p{color:#CFE5D8}
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.wgrid>article{display:flex}
.wcard{position:relative;flex:1;padding:42px 28px 34px;border-radius:24px;background:linear-gradient(165deg,#ffffff1f,#ffffff08);border:1px solid #ffffff26;overflow:hidden;
  box-shadow:0 22px 50px #00000030,inset 0 1px 0 #ffffff2a;transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.wcard::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--o),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.wcard:hover{transform:translateY(-10px);border-color:#f6b73c77;box-shadow:0 34px 64px #00000050}
.wcard:hover::after{transform:scaleX(1)}
.wnum{position:absolute;right:20px;top:8px;font:800 4.6rem/1 "Bricolage Grotesque",system-ui,sans-serif;color:#ffffff12;letter-spacing:-.04em;user-select:none}
.wic{display:grid;place-items:center;width:62px;height:62px;margin-bottom:26px;border-radius:18px;color:#062A1B;background:linear-gradient(135deg,var(--o),var(--gold));box-shadow:0 12px 28px #f28a1c4d;transition:transform .5s var(--ease)}
.wic svg{width:28px;height:28px}
.wcard:hover .wic{transform:rotate(-8deg) scale(1.08)}
.wcard h3{margin:0 0 10px;font-size:1.4rem;color:#fff;position:relative}
.wcard p{margin:0;color:#CFE5D8;position:relative}

/* ---------- 6. BRANDS WE TRUST (marquee) ---------- */
.trust{overflow:hidden;padding-bottom:90px}
.mq{display:grid;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mqrow{overflow:hidden}
.mqtrack{display:flex;gap:18px;width:max-content;animation:mqL 42s linear infinite}
.mqrow.rev .mqtrack{animation-name:mqR;animation-duration:48s}
.mq:hover .mqtrack{animation-play-state:paused}
@keyframes mqL{to{transform:translateX(calc(-100%/3 - 6px))}}
@keyframes mqR{from{transform:translateX(calc(-100%/3 - 6px))}to{transform:none}}
.bt{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:200px;height:132px;padding:20px;background:var(--w);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 26px #0a3d2610;position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.bt::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--o),var(--gold));transform:scaleX(0);transition:transform .5s var(--ease)}
.bt svg{height:46px;width:116px;filter:grayscale(1);opacity:.62;transition:filter .4s,opacity .4s,transform .5s var(--ease)}
.bt small{font:700 .7rem "Source Sans 3",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.bt:hover{transform:translateY(-5px);border-color:var(--o);box-shadow:0 18px 36px #0a3d2622}
.bt:hover svg{filter:none;opacity:1;transform:scale(1.08)}.bt:hover::after{transform:scaleX(1)}
@media(prefers-color-scheme:dark){.bt svg{filter:grayscale(1) brightness(1.5);opacity:.8}}
@media(prefers-reduced-motion:reduce){.mq{-webkit-mask-image:none;mask-image:none}.mqrow{overflow-x:auto}.mqtrack{width:auto;flex-wrap:wrap;justify-content:center}.bt[aria-hidden="true"]{display:none}}

/* ---------- 7. GOOGLE REVIEWS ---------- */
.greviews{overflow:hidden}
.rhead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.rhead .sh{margin:0}
.rsum{display:flex;align-items:center;gap:20px;padding:22px 26px;background:var(--w);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 50px #0a3d2618;flex-shrink:0}
.rsum .btn.sm{margin:0;padding:11px 22px;font-size:.92rem;white-space:nowrap}
.gico svg{width:46px;height:46px}
.rscore{font:800 2.6rem/1 "Bricolage Grotesque",system-ui,sans-serif;color:var(--g);margin-right:12px;vertical-align:middle}
@media(prefers-color-scheme:dark){.rscore{color:#8FD6A8}}
.rsum .stars{vertical-align:middle}
.rsum small{display:block;color:var(--mut);font-size:.88rem;margin-top:4px}
.stars{display:inline-flex;gap:2px}.stars svg{width:18px;height:18px;fill:#FBBC04}
.rwrap{position:relative}
.rtrack{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 4px 28px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rtrack::-webkit-scrollbar{display:none}
.rcard{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--w);border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 36px #0a3d2612;position:relative;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.rcard:hover{transform:translateY(-6px);box-shadow:0 28px 54px #0a3d2628;border-color:#FBBC0488}
.rcard::before{content:"\201C";position:absolute;right:22px;top:6px;font:800 5.4rem/1 Georgia,serif;color:var(--o);opacity:.14}
.rtop{display:flex;align-items:center;gap:14px}
.rav{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#fff;font:800 1.2rem "Bricolage Grotesque",system-ui,sans-serif;flex-shrink:0;box-shadow:0 8px 18px #0003}
.rtop figcaption{font:700 1.08rem "Bricolage Grotesque",system-ui,sans-serif;color:var(--ink)}
.rtop small{display:block;color:var(--mut);font-size:.84rem}
.rg{margin-left:auto;position:relative;z-index:1}.rg svg{width:24px;height:24px}
.rcard blockquote{margin:0;color:var(--mut);font-size:1.04rem;line-height:1.65}
.rctl{display:flex;justify-content:center;gap:12px}
.rarw{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--line);background:var(--w);color:var(--g);font-size:1.25rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px #0a3d2616;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
@media(prefers-color-scheme:dark){.rarw{color:#8FD6A8}}
.rarw:hover{background:var(--o);border-color:var(--o);color:#fff;transform:scale(1.07)}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .bgrid,.wgrid{grid-template-columns:repeat(2,1fr)}
  .rcard{flex-basis:calc((100% - 22px)/2)}
}
@media(max-width:1020px){
  .stats.prem{padding:60px 0}
  .abgrid{grid-template-columns:1fr;gap:48px}
  .abmedia{max-width:640px;margin:0 auto;width:100%}
  .about{padding:80px 0}
  .rhead{flex-direction:column;align-items:flex-start}
}
@media(max-width:620px){
  .stats.prem{padding:48px 0}
  .stats.prem .sgrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .sbox{padding:26px 10px 22px;border-radius:18px}
  .sic{width:50px;height:50px;margin-bottom:14px;box-shadow:0 8px 20px #f28a1c55,0 0 0 6px #ffffff12}.sic svg{width:23px;height:23px}
  .stats.prem b{font-size:2.3rem}
  .stats.prem span{font-size:.7rem;letter-spacing:.12em}
  .about{padding:60px 0}
  .abmedia{padding:0 0 20px 16px}.abbadge{right:-6px;padding:14px 18px}.abbadge strong{font-size:1.2rem}
  .abpoints{grid-template-columns:1fr}
  .bgrid,.wgrid{grid-template-columns:1fr;gap:20px}
  .bmedia{height:170px}.btag{min-height:0}
  .wcard{padding:34px 24px 28px}
  .bt{width:150px;height:112px;padding:16px;gap:10px}.bt svg{height:36px;width:88px}
  .mq{gap:12px}
  .rsum{flex-wrap:wrap;width:100%;padding:18px 20px}.rsum .btn.sm{width:100%;text-align:center}
  .rcard{flex-basis:86%;padding:24px}
  .rctl{margin-top:-6px}
}

/* ---------- GROWTH LOCATIONS MAP (full width) ---------- */
.gmap{position:relative;padding:96px 0 0;background:var(--bg);overflow:hidden}
.gmap .sh{margin-bottom:40px}
.gmap-stage{--sshg-brand:#062A1B;--sshg-gold:#D8B66F;--sshg-land:#D4E3D9;--sshg-neighbor:#0F5A38;--sshg-border:#8f8350;width:100%;color:#fff;background:#062A1B}
.gmap-scroll{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.gmap .map-area{position:relative;width:100%;aspect-ratio:920/620;max-height:88vh;background:radial-gradient(ellipse at 16% 12%,#0F5A38 0%,transparent 42%),radial-gradient(ellipse at 90% 88%,#0A3D26 0%,transparent 48%),linear-gradient(135deg,#041a11,#062A1B 54%,#041a11);overflow:hidden}
.gmap .map-area::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-radial-gradient(ellipse at 77% 38%,transparent 0 30px,#d8b66f0d 31px 32px,transparent 33px 58px)}
.gmap .map-area svg{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
.gmap .land{fill:var(--sshg-neighbor);stroke:var(--sshg-border);stroke-width:1.05;vector-effect:non-scaling-stroke}
.gmap .land.india{fill:var(--sshg-land);stroke:var(--sshg-gold);stroke-width:1.65}
.gmap .graticule{fill:none;stroke:#d8b66f24;stroke-width:.8;vector-effect:non-scaling-stroke}
.gmap .leader{stroke:var(--sshg-gold);stroke-width:1.25;stroke-dasharray:3 4;opacity:.7;vector-effect:non-scaling-stroke}
.gmap .marker-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.gmap .sshg-marker{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;color:var(--sshg-gold)}
.gmap .pin{position:relative;display:block;width:18px;height:18px;border:2px solid #f5f0df;border-radius:50% 50% 50% 0;background:var(--sshg-gold);box-shadow:0 0 0 1px var(--sshg-gold),0 0 16px #d8b66f70;transform:rotate(-45deg);transition:transform .14s ease,background-color .14s ease}
.gmap .pin::after{content:"";position:absolute;width:5px;height:5px;left:4.5px;top:4.5px;border-radius:50%;background:var(--sshg-brand)}
.gmap .sshg-marker:hover .pin{transform:rotate(-45deg) scale(1.15)}
.gmap .sshg-marker[aria-pressed="true"] .pin{background:#f5f0df;transform:rotate(-45deg) scale(1.18)}
.gmap .location-detail{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px 14px;padding:20px 24px;min-height:64px;border-top:1px solid #d8b66f55;background:#041a11;text-align:center}
.gmap .detail-label{font:700 .8rem "Source Sans 3",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--sshg-gold)}
.gmap .detail-place{font-size:1.15rem;color:#fff}
.gmap .detail-note{color:#B9D2C3;font-size:.98rem}
@media(max-width:760px){
  .gmap{padding-top:64px}
  .gmap .sh{margin-bottom:28px}
  .gmap .map-area{width:720px;max-height:none}
}
@media(prefers-reduced-motion:reduce){.gmap .pin{transition:none}}