/* ============================================================
   RESPONSIVE.CSS — breakpoints: desktop / laptop / tablet / mobile
   ============================================================ */

/* Laptop */
@media (max-width:1180px){
  .counter-grid{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

/* Tablet */
@media (max-width:960px){
  .welcome{grid-template-columns:1fr;}
  .welcome-art{order:-1;}
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .calc-panel{grid-template-columns:1fr;}
  .hero-slider{height:560px;}

  .nav-toggle{display:flex;}
  .nav-cards{
    position:fixed;top:0;right:-100%;height:100vh;width:78%;max-width:320px;
    background:var(--blue-dark);flex-direction:column;justify-content:flex-start;
    padding:100px 24px 24px;gap:14px;transition:right var(--speed-m) var(--ease);z-index:190;
  }
  .nav-cards.open{right:0;box-shadow:-20px 0 40px rgba(0,0,0,.3);}
  .nav-card{width:100%;}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity var(--speed-s);z-index:180;}
  .nav-overlay.open{opacity:1;pointer-events:all;}
}

/* Mobile */
@media (max-width:640px){
  .section{padding:60px 0;}
  .topbar .container{flex-direction:column;align-items:flex-start;}
  .topbar-links{gap:12px;}
  .brand img{height:48px;}
  .hero-slider{height:480px;}
  .slide-content h1{font-size:1.8rem;}
  .counter-grid{grid-template-columns:1fr 1fr;}
  .service-grid{grid-template-columns:1fr;}
  .grid-3,.grid-4{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .arrow{width:40px;height:40px;font-size:1.1rem;}
  .calc-inputs,.calc-results{padding:26px;}
  .page-hero{padding:130px 0 50px;}
  .branch-toolbar{flex-direction:column;}
}

/* ============================================================
   ADDITIONS — responsive rules for Management Team grid
   (appended only; no existing rules modified)
   ============================================================ */
@media (max-width:1180px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .team-grid{grid-template-columns:1fr;}
}

/* ============================================================
   ADDITIONS — responsive rules for Governance Gallery
   (appended only; no existing rules modified)
   ============================================================ */
@media (max-width:1180px){
  .gov-gallery{grid-template-columns:repeat(2,1fr);gap:24px;}
}
@media (max-width:640px){
  .gov-gallery{grid-template-columns:1fr;gap:20px;}
}

/* ============================================================
   RESPONSIVE ADDITIONS — July 2026 full-site responsiveness pass
   Everything below is APPENDED ONLY. Nothing above this line was
   changed. Every rule here is inside a media query, so desktop
   (min-width:1181px) is pixel-perfect and untouched. Grouped by
   purpose, each block commented so changes are easy to audit.
   ============================================================ */

/* ---------- 0. GLOBAL ZERO-HORIZONTAL-SCROLL SAFETY NET ----------
   Belt-and-braces only: body already has overflow-x:hidden and
   img already has max-width:100% in style.css. This just makes
   sure the safeguard also applies at every breakpoint explicitly
   and catches any element (svg/video/iframe) that might not be
   covered by the base img rule. */
@media (max-width:1180px){
  html,body{max-width:100%;overflow-x:hidden;}
  svg,video,iframe,table{max-width:100%;}
}

/* ---------- 1. SMALL LAPTOP / TABLET-LANDSCAPE NAVIGATION FIT ----------
   Between 641px and 1180px the hamburger has not appeared yet
   (it only appears at <=960px), so the full horizontal nav-cards
   row is still shown. On small laptops / iPad-landscape widths the
   7 nav items + logo can get tight. This only tightens spacing in
   that specific range — true desktop (>1180px) is completely
   unaffected, and it deliberately excludes <=640px so it never
   overrides the existing mobile logo-size rule already in this
   file's Mobile section above. */
@media (max-width:1180px) and (min-width:641px){
  .nav-row{gap:14px;}
  .nav-cards{gap:8px;}
  .nav-card{padding:9px 14px;min-width:auto;font-size:.8rem;}
  .brand img{height:54px;}
}

/* ---------- 2. HOME PAGE HERO SLIDER — TEXT SCALING ----------
   Superseded by the corrected, overlay-preserving Hero block in the
   "Mobile/Tablet corrections" section further down this file (search
   for "HERO SLIDER — MOBILE & TABLET"). Keeping this comment marker
   only, so nothing here fights with those later, more accurate rules. */

/* ---------- 3. WELCOME SECTION — TEXT + IMAGE SCALING ----------
   .welcome already stacks to 1 column at 960px (Tablet block
   above). This scales the fixed 58px heading and the fixed
   560px-tall image so nothing overflows or looks oversized once
   it's full width on a phone. */
@media (max-width:960px){
  .welcome-text h2{font-size:40px;}
  .welcome-image{height:380px;}
}
@media (max-width:640px){
  .welcome-text h2{font-size:30px;}
  .welcome-text p{font-size:16px;}
  .welcome-image{height:240px;}
}

/* ---------- 4. ACHIEVEMENTS / COUNTERS — TEXT SCALING ----------
   counter-grid columns are already handled above. This only scales
   the fixed 56-60px numerals/headings that would otherwise sit
   oversized inside the narrower cards on tablets/phones. */
@media (max-width:960px){
  .achievements .section-head h2{font-size:42px;}
  .achv-cta h3{font-size:36px;}
  .achv-cta p{font-size:18px;}
  .counter-num{font-size:42px;}
}
@media (max-width:640px){
  .achievements .section-head h2{font-size:32px;}
  .achv-cta h3{font-size:28px;}
  .achv-cta p{font-size:16px;}
  .counter-num{font-size:32px;}
  .counter-label{font-size:.82rem;}
  .counter-card{padding:22px 14px;}
}

/* ---------- 5. INNER-PAGE HERO BANNER IMAGE (FD/RD/Savings/Gold) ----------
   Already reduced to 300px at <=960px in style.css. This adds the
   missing phone-size step so the image doesn't dominate the screen
   on small devices. */
@media (max-width:640px){
  .hero-banner-box{height:220px;}
}

/* ---------- 6. FD / RD / SAVINGS CALCULATOR — MOBILE POLISH ----------
   calc-panel already stacks to 1 column at <=960px (Tablet block
   above). This makes the result "Invest Now" style buttons full
   width on phones, per the "buttons full width when needed" spec,
   without changing their appearance anywhere above 640px. */
@media (max-width:640px){
  .calc-results .btn{width:100%;text-align:center;}
  .calc-inputs{padding:30px 24px;}
  .calc-results{padding:30px 24px;}
}

/* ---------- 7. TEAM / GOVERNANCE / SERVICE CARD IMAGES — MOBILE ----------
   Fixed-height media inside cards, scaled down on phones only so
   photos aren't taller than necessary; aspect handling (object-fit)
   is untouched. */
@media (max-width:640px){
  .team-photo{height:260px;}
  .gov-card img{height:190px;}
  .service-media{height:200px;}
}

/* ---------- 8. INVESTOR RELATIONS / VIGIL MECHANISM — TABLE SCROLL ----------
   .diff-table already scrolls horizontally via .diff-table-wrap.
   .policy-table (Vigil Mechanism page) has no such wrapper in the
   HTML, so on narrow screens it's given its own horizontal scroll
   container purely in CSS — the table itself is never redesigned,
   it just scrolls sideways inside its section instead of pushing
   the whole page wider. */
@media (max-width:768px){
  .policy-section:has(.policy-table){overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .policy-table{min-width:480px;}
}

/* ---------- 9. FLOATING CALCULATOR BUTTON — MOBILE SIZE ----------
   .calculator-float (the visible floating calculator shortcut used
   site-wide) had no phone-specific sizing. Shrunk slightly on small
   screens, in the same left-fixed spot, so it never covers form
   fields or footer content near the bottom of the viewport. */
@media (max-width:640px){
  .calculator-float{width:52px;height:52px;left:14px;bottom:20px;}
  .calculator-float i{font-size:22px;}
}

/* ---------- 10. EXTRA-SMALL PHONES (<=400px) ----------
   Covers the narrowest common devices (e.g. small Android phones,
   older/compact iPhones) with a touch more breathing room. */
@media (max-width:400px){
  .container{padding:0 16px;}
  .info-card h3{font-size:20px;}
  .info-card p{font-size:15.5px;}
  .btn{padding:14px 26px;font-size:16px;}
  .policy-wrap{padding:26px 18px;}
  .form-panel{padding:20px;}
}

/* ============================================================
   RESPONSIVE ADDITIONS — PHASE 2 (mobile/tablet polish pass)
   Everything below is APPENDED ONLY and lives inside media
   queries, so desktop (min-width:1181px) is byte-for-byte
   unaffected. No colors, fonts, content, section order or
   desktop layout are changed anywhere in this file — only
   how existing elements reflow at narrower widths.
   ============================================================ */

/* ---------- 11. TOP CONTACT BAR — NO HORIZONTAL SCROLL ----------
   style.css sets .topbar-links to nowrap + overflow-x:auto so it
   scrolls sideways if ever needed. On tablet and phone that hides
   contact numbers behind a scroll gesture, which the brief
   disallows. Below 960px every phone/email link instead wraps onto
   as many rows as needed, fully visible, no side-scroll, equal
   spacing. Desktop rule is untouched. */
@media (max-width:960px){
  .topbar-links{
    flex-wrap:wrap;
    overflow-x:visible;
    white-space:normal;
    justify-content:center;
    row-gap:8px;
  }
  .topbar .container{padding:8px 0;}
}
@media (max-width:640px){
  .topbar .container{padding:10px 16px;align-items:center;}
  .topbar-links{justify-content:center;gap:8px 14px;}
  .topbar-links a{font-size:.72rem;}
  .topbar-links svg{width:12px;height:12px;}
}
@media (max-width:400px){
  .topbar-links{gap:7px 10px;}
  .topbar-links a{font-size:.68rem;gap:5px;}
}

/* ---------- 12. MOBILE NAVIGATION — COMPACT LIST DRAWER (CORRECTED) ----------
   Fixes the "broken" mobile menu. Same drawer (.nav-cards slides in
   from the right, same dark-blue background, same brand colors) but
   each item is now a compact 52-56px-tall row instead of an oversized
   desktop "card": no lift-on-hover, no stray underline left stuck
   after a tap on touch devices, no huge vertical gaps. The About Us /
   Schemes / Investor Relations submenus keep using the existing
   .nav-dropdown accordion rule from style.css (opens directly under
   the trigger, animates via max-height) — untouched, still correct. */
@media (max-width:960px){
  .nav-toggle{padding:10px;}
  .nav-cards{gap:6px;padding:96px 20px 24px;}

  .nav-item-dropdown{width:100%;}
  .nav-card{
    width:100%;
    min-height:52px;
    max-height:56px;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    padding:0 20px;
    font-size:.95rem;
    letter-spacing:0;
    border-bottom:none;
    border-left:4px solid var(--red);
    border-radius:var(--radius-s);
  }
  /* Remove the desktop hover-lift + underline sweep — on touch
     devices the :hover/:active state can stay "stuck" after a tap,
     which reads as a broken floating underline. */
  .nav-card::after{content:none;}
  .nav-card:hover,
  .nav-card.active{
    transform:none;
    box-shadow:none;
    background:var(--blue-dark);
    border-left-color:var(--gold);
  }
}
@media (max-width:480px){
  .nav-cards{width:100%;max-width:100%;padding-top:88px;}
}

/* ---------- 13. HERO SLIDER — MOBILE & TABLET (desktop composition preserved, corrected) ----------
   Previous pass incorrectly switched the hero to a stacked layout
   (image on top, text below). That is removed. The hero keeps the
   EXACT same desktop structure at every width: .hero-banner stays an
   absolutely-positioned, full-bleed background image; .slide-content
   stays overlaid on top of it, upper-left, in the same eyebrow →
   heading → paragraph → CTA order. Only three things change here:
   1) overall hero height, scaled to 70-80vh as requested,
   2) the image's object-position, nudged right-of-centre so the
      building/people on the right of the banner stay in frame
      instead of being cropped evenly from both sides,
   3) text/arrow sizing, using the exact clamp() values supplied. */
@media (max-width:1024px){
  .hero-slider{height:78vh;min-height:460px;max-height:640px;}
  .hero-banner{object-position:68% center;}
  .slide-content{max-width:78%;margin-left:7%;}
  .arrow{width:44px;height:44px;font-size:18px;}
}
@media (max-width:767px){
  .hero-slider{height:74vh;min-height:420px;max-height:580px;}
  .slide-content{max-width:86%;margin-left:6%;margin-right:6%;}
  .slide-content .eyebrow{font-size:clamp(.8rem,3.2vw,1rem);gap:8px;margin-bottom:10px;}
  .slide-content .eyebrow::before{width:20px;}
  .slide-content h1{font-size:clamp(2rem,7vw,3rem);letter-spacing:-.3px;margin-bottom:12px;}
  .slide-content p{font-size:1rem;margin-bottom:18px;}
  .slide-content .btn,
  .slide-content .btn-primary{font-size:1rem;padding:13px 28px;}
}
@media (max-width:480px){
  .hero-slider{height:70vh;min-height:380px;}
  .slide-content{max-width:90%;}
  .arrow{width:36px;height:36px;font-size:15px;}
  .slider-arrows{padding:0 10px;}
  .slider-dots{bottom:14px;}
}

/* ---------- 14. FOOTER — MOBILE CENTERED LAYOUT ----------
   Tablet already gets a 2-column footer-grid from the Laptop
   breakpoint above; Mobile already collapses it to 1 column. This
   only adds the "centered" treatment requested for phones, without
   touching the tablet 2-column rule or any desktop styling. */
@media (max-width:640px){
  .footer-grid{text-align:center;}
  .footer-brand{display:flex;flex-direction:column;align-items:center;}
  .footer-col{display:flex;flex-direction:column;align-items:center;}
  .footer-contact li{justify-content:center;}
  .social-row{justify-content:center;}
  .newsletter{max-width:320px;width:100%;margin-left:auto;margin-right:auto;}
  .footer-bottom{justify-content:center;text-align:center;}
}

/* ---------- 15. FULL-BLEED PANEL IMAGES — CAP HEIGHT ON PHONES ----------
   Careers "team photo" and Contact "map" panels are set to
   height:100% of their grid cell on desktop, which is correct
   there. Once .grid-2 stacks to one column on phones these panels
   have no fixed cell height to inherit from, so this simply caps
   them at a comfortable viewing height — the image itself still
   scales proportionally via object-fit:cover, nothing is stretched
   or cropped differently than on desktop, just shorter. */
@media (max-width:640px){
  .career-image{height:260px;}
  .contact-map-image{height:240px;}
}

/* ---------- 16. BRANCH TOOLBAR / CARDS / MAP — TAP-FRIENDLY ON PHONES ----------
   .br-toolbar already stacks at <=640px (branches.css). This only
   grows the search/select controls slightly for easier tapping and
   trims the map frame's minimum height so it doesn't dominate the
   screen on small phones. */
@media (max-width:640px){
  .br-search-field input,.br-filter-field select{padding:14px 16px 14px 42px;font-size:1rem;}
  .bcp-btn{padding:12px 8px;}
  .br-map-frame{min-height:260px;padding:14px;}
  .br-map-frame img{max-height:320px;}
}

/* ---------- 17. GLOBAL SAFETY NET — NO ELEMENT WIDER THAN VIEWPORT ----------
   Belt-and-braces for any element that could force a horizontal
   scrollbar on narrow phones (long unbroken strings, fixed-width
   inline SVGs, etc). Purely defensive; doesn't alter appearance of
   anything that already fits. */
@media (max-width:640px){
  .hero-inner,.slide-content,.footer-grid,.br-toolbar,.contact-details-grid{max-width:100%;}
}

/* ============================================================
   RESPONSIVE ADDITIONS — PHASE 3 (menu / hero fix follow-up)
   Everything below is APPENDED ONLY, inside media queries, so
   desktop (min-width:1025px, i.e. tablet-and-up per the approved
   breakpoints) is untouched.
   ============================================================ */

/* ---------- 18. FLOATING ACTION BUTTONS — RE-ENABLE ON MOBILE/TABLET ----------
   NOTE: style.css currently sets ".floating-btns{display:none
   !important;}" with no media query, so today the call / WhatsApp /
   back-to-top buttons are hidden on every screen size, including
   desktop. Per this brief, mobile (320-767px) and tablet
   (768-1024px) need them visible, bottom-right, without changing
   anything above 1024px — so they're switched back on ONLY inside
   this range. Desktop's current (hidden) appearance is completely
   unaffected. .calculator-float already sits bottom-left (see
   rule 9 above) and is unaffected by this. */
@media (max-width:1024px){
  .floating-btns{display:flex !important;}
}
@media (max-width:400px){
  .floating-btns{right:14px;bottom:18px;gap:10px;}
  .fab{width:48px;height:48px;}
  .fab i,.fab svg{font-size:20px;width:20px;height:20px;}
}

/* ---------- 19. TYPOGRAPHY — EXACT CLAMP() SCALE (mobile + tablet) ----------
   Section headings and buttons site-wide, scaled with the specific
   clamp() values requested. Hero heading/paragraph/button sizing is
   already covered inside the Hero block (rule 13) with the same
   values. Scoped to <=1024px so tablet/mobile match; desktop keeps
   its existing clamp(1.8rem,3vw,2.6rem) untouched. */
@media (max-width:1024px){
  .section-head h2{font-size:clamp(1.7rem,5vw,2.3rem);}
}
@media (max-width:767px){
  .section-head p{font-size:1rem;}
}
@media (max-width:767px) and (min-width:401px){
  /* Buttons: same desktop style, proportionally smaller — never
     stretched full-width unless a section already requires it
     (calculator result buttons, full-width form submits, etc,
     handled separately and unaffected by this rule). */
  .btn{padding:14px 30px;font-size:17px;}
}

/* ---------- 20. TOP CONTACT BAR — ICON ALIGNMENT POLISH ----------
   Keeps rule 11's 2-row wrap behaviour; just guarantees every
   phone/email link's icon and text line up on the same baseline
   once wrapped, with equal spacing between rows. */
@media (max-width:960px){
  .topbar-links a{align-items:center;line-height:1.2;}
}

/* ============================================================
   RESPONSIVE ADDITIONS — PHASE 4 (deep mobile polish)
   Everything below is APPENDED ONLY and lives inside media
   queries — desktop (≥1181px) is byte-for-byte untouched.
   No colours, fonts, section order or desktop layout are
   changed anywhere in this file or in style.css.
   Each block is labelled A–M matching the implementation plan.
   ============================================================ */

/* ---------- A. NAV DROPDOWN — REMOVE max-height CLAMP ON PARENT CARD ----------
   Phase 2 / rule 12 sets every .nav-card inside the mobile drawer to
   max-height:56px. When a .nav-item-dropdown is opened its child
   .nav-dropdown expands via max-height animation (style.css), but the
   parent .nav-card cap of 56px clips the revealed list. Removing the
   cap only on .nav-item-dropdown's direct child card lets the drawer
   accordion work correctly without changing any other card sizing. */
@media (max-width:960px){
  .nav-item-dropdown > .nav-card{
    max-height:none;
  }
  /* Also allow the whole dropdown wrapper to grow freely */
  .nav-item-dropdown{
    max-height:none !important;
  }
}

/* ---------- B. NAV MOBILE DRAWER — SMOOTH DROPDOWN ACCORDION ----------
   The mobile drawer uses flex-direction:column + gap so adding sub-items
   can push the drawer past the viewport height. Switching the drawer itself
   to overflow-y:auto (only on mobile) lets it scroll internally when many
   items are expanded, preventing content going off-screen. */
@media (max-width:960px){
  .nav-cards{
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  /* Dropdown sub-links: tighter padding so the list doesn't feel oversized */
  .nav-dropdown a{
    padding:10px 16px;
    font-size:.88rem;
  }
}

/* ---------- C. TOPBAR EMAIL — PREVENT LONG-STRING OVERFLOW ----------
   The email address "customercare@portcitynidhi.in" is one unbroken token.
   overflow-wrap:anywhere allows the browser to break it at any character if
   the container is too narrow, stopping it from forcing horizontal scroll. */
@media (max-width:640px){
  .topbar-links a{
    overflow-wrap:anywhere;
    word-break:break-all;
  }
}
@media (max-width:400px){
  .topbar-links a{
    overflow-wrap:anywhere;
    word-break:break-all;
    font-size:.66rem;
  }
}

/* ---------- D. HERO SLIDER — ULTRA-SMALL PHONES (≤380px) ----------
   Rule 13 (Phase 3) already handles ≤480px and ≤767px. This step
   targets the narrowest common devices (320–380px) where the hero
   heading can still overflow. Uses tighter clamp() values and shrinks
   the hero height slightly so the CTA button stays in frame. */
@media (max-width:380px){
  .hero-slider{height:65vh;min-height:320px;}
  .slide-content{max-width:92%;margin-left:4%;margin-right:4%;}
  .slide-content .eyebrow{font-size:.7rem;margin-bottom:8px;gap:6px;}
  .slide-content .eyebrow::before{width:16px;}
  .slide-content h1{
    font-size:clamp(1.35rem,5.5vw,1.9rem);
    letter-spacing:0;
    margin-bottom:10px;
    line-height:1.2;
  }
  .slide-content p{font-size:.85rem;margin-bottom:14px;line-height:1.6;}
  .slide-content .btn,
  .slide-content .btn-primary{font-size:.88rem;padding:10px 20px;}
  .arrow{width:32px;height:32px;font-size:14px;}
  .slider-arrows{padding:0 6px;}
  .slider-dots{bottom:10px;gap:7px;}
  .dot{width:9px;height:9px;}
}

/* ---------- E. ACHIEVEMENTS / COUNTERS — 320px ----------
   At 320px the counter grid (2×2 at ≤640px) can still be tight.
   This shrinks numerals and card padding a touch more. */
@media (max-width:380px){
  .counter-num{font-size:28px;}
  .counter-card{padding:18px 12px;}
  .counter-label{font-size:.78rem;}
  .achievements .section-head h2{font-size:28px;}
  .achv-cta h3{font-size:24px;}
  .achv-cta p{font-size:.9rem;}
  /* Make CTA buttons stack full-width on the narrowest phones */
  .achv-cta .btn-group{flex-direction:column;align-items:center;}
  .achv-cta .btn-group .btn{width:100%;text-align:center;justify-content:center;}
}

/* ---------- F. SERVICE / INFO CARDS — 320px ----------
   Cards are already 1-column at ≤640px. This reduces internal
   padding so text/buttons don't sit too close to card edges on
   the narrowest phones. */
@media (max-width:380px){
  .service-body{padding:18px;}
  .service-body h3{font-size:17px;}
  .service-body p{font-size:15px;margin-bottom:18px;}
  .info-card-content{padding:18px;}
  .info-card h3{font-size:20px;}
  .info-card p{font-size:15px;}
}

/* ---------- G. SECTION HEADINGS — 320px ----------
   Global section-head h2 clamp already applies ≤1024px. This
   adds a floor for 320px so headings don't exceed their container. */
@media (max-width:380px){
  .section-head h2{font-size:clamp(1.35rem,5vw,1.8rem);}
  .section-head p{font-size:.9rem;}
  .section{padding:48px 0;}
  .container{padding:0 14px;}
}

/* ---------- H. FOOTER — 320px POLISH ----------
   Footer is already 1-column and centred at ≤640px. This trims
   padding and font sizes just enough to be comfortable at 320px. */
@media (max-width:380px){
  .footer-grid{gap:28px;}
  .footer-brand p{font-size:.82rem;}
  .footer-col h4{font-size:.95rem;}
  .footer-col a{font-size:.82rem;}
  .footer-contact li{font-size:.82rem;}
  .newsletter{max-width:100%;}
  .newsletter input{padding:10px 12px;font-size:.85rem;}
  .footer-bottom{flex-direction:column;gap:5px;text-align:center;font-size:.75rem;}
}

/* ---------- I. FLOATING ACTION BUTTONS — 320–380px ----------
   Rule 18 (Phase 3) enables .floating-btns at ≤1024px, and rule 18
   shrinks them at ≤400px. At 320px they can still overlap page
   content. Moving them slightly and shrinking further. */
@media (max-width:380px){
  .floating-btns{right:8px;bottom:14px;gap:8px;}
  .fab{width:42px;height:42px;font-size:18px;}
  .fab i,.fab svg,.fab img{font-size:18px;width:18px;height:18px;}
}

/* ---------- J. FLOATING CALCULATOR — 320–380px ----------
   .calculator-float at ≤640px is already scaled down (style.css
   media block at line ~2069). At 320px we shrink it a little more
   and raise it above the safe-area edge. */
@media (max-width:380px){
  .calculator-float{
    width:50px;
    height:50px;
    left:8px;
    bottom:20px;
  }
  .calculator-float i{font-size:22px;}
}

/* ---------- K. INNER-PAGE HERO — 320–380px ----------
   .hero-inner already drops to 104px 0 40px at ≤640px (style.css).
   At 320px the top padding can still feel excessive relative to the
   page-hero min-height. This trims it, keeping the header clear. */
@media (max-width:380px){
  .hero-inner{padding:96px 0 32px;}
  .page-hero h1{font-size:clamp(1.4rem,5.5vw,1.9rem);}
  .page-hero p{font-size:.9rem;margin-top:10px;}
  .about-hero-inner{padding:48px 0 32px;}
  .breadcrumb{font-size:.75rem;}
}

/* ---------- L. FORM SUBMIT BUTTONS — FULL WIDTH ON PHONES ----------
   Contact and Careers forms use .btn-primary inside a .form-panel.
   On narrow screens the button should be full-width so it's easy to tap. */
@media (max-width:640px){
  .form-panel .btn[type=submit],
  .form-panel button[type=submit],
  .form-panel .btn-primary{
    width:100%;
    text-align:center;
    justify-content:center;
  }
}

/* ---------- M. PDF PREVIEW CARDS — NARROW PHONES ----------
   PDF cards on Investor Relations / Vigil Mechanism pages already stack
   to column at ≤640px (style.css). At ≤400px the inner padding and
   icon size are trimmed so nothing overflows. */
@media (max-width:400px){
  .pdf-preview-card{
    padding:18px 14px;
    gap:12px;
  }
  .pdf-preview-card .pdf-icon{
    width:48px;
    height:48px;
    font-size:1.4rem;
    border-radius:12px;
  }
  .pdf-download-box{padding:28px 16px;}
  .pdf-download-box h3{font-size:1.1rem;}
}

/* ---------- N. BRANCH PAGE — 320px OVERFLOW GUARD ----------
   .br-search-field has min-width:240px which is safe at 640px but
   too wide at 320px. Setting min-width:0 lets it flex naturally
   inside the stacked .br-toolbar column. */
@media (max-width:400px){
  .br-search-field{min-width:0;}
  .br-filter-field select{min-width:0;width:100%;}
  .br-toolbar{padding:12px;}
  .br-summary{grid-template-columns:1fr;}
  .br-stat-num{font-size:1.4rem;}
}

/* ---------- O. VIGIL MECHANISM / POLICY PAGE — 320px ----------
   .policy-wrap already reduces to padding:34px 24px at ≤640px and
   26px 16px at some breakpoints (existing rule 8). At 320px we apply
   a tighter padding and reduce table font size to prevent horizontal
   scroll. */
@media (max-width:400px){
  .policy-wrap{padding:22px 12px;}
  .policy-section h3{font-size:1rem;}
  .policy-table th,.policy-table td{
    padding:8px 10px;
    font-size:.78rem;
  }
  .policy-approval{gap:4px 16px;font-size:.8rem;}
}

/* ---------- P. TEAM GRID — TINY PHONES ----------
   .team-grid collapses to 1-column at ≤640px (existing rule). The
   team cards have fixed-height photos (340px desktop → 260px phone).
   At 380px this is still proportionally large; reducing photo height
   slightly and body text so the card is more scannable. */
@media (max-width:400px){
  .team-photo{height:220px;}
  .team-body h3{font-size:20px;}
  .team-body p{font-size:14px;}
  .team-body .role{font-size:13px;}
}

/* ---------- Q. PROFILE / NIDHI / HIGHLIGHT GRIDS — TINY PHONES ----------
   .highlight-grid, .trust-grid, .nidhi-grid already collapse to 1 col
   at ≤640px. At 380px card padding is trimmed slightly. */
@media (max-width:400px){
  .highlight-card,.trust-card,.nidhi-card{padding:22px 18px;}
  .highlight-card .num{font-size:1.6rem;}
  .learn-more-box{padding:28px 16px;}
  .learn-more-box h3{font-size:1.1rem;}
}

/* ---------- R. CALCULATOR PANEL — 320px FINAL POLISH ----------
   calc-panel already stacks at ≤960px (Tablet block). At 380px
   the input/result panel padding can be further trimmed. */
@media (max-width:400px){
  .calc-inputs,.calc-results{padding:18px 14px;}
  .calc-result-row{padding:12px 14px;}
  .calc-result-row span:last-child{font-size:1.1rem;}
  .calc-field label{font-size:.82rem;}
  .calc-field input[type=number],.calc-field select{font-size:.95rem;padding:10px 12px;}
}

/* ---------- S. GLOBAL BELT-AND-BRACES — 320px ----------
   Last-resort safety net: make sure no fixed-width element forces
   a horizontal scrollbar on any page at 320px. A broad *{max-width:100%}
   breaks SVG intrinsic sizing and positioned pseudo-elements, so instead
   we clamp specific problematic container types and rely on the already-
   existing html,body{overflow-x:hidden} from Phase 0 (rule line ~90). */
@media (max-width:380px){
  /* Primary guard — already set at <=1180px in Phase 0, repeated here
     to make sure it applies at the narrowest tier too. */
  html,body{overflow-x:hidden;max-width:100%;}
  /* Images, iframes, SVG: already have max-width:100% from style.css reset
     for img; repeating here for SVG + iframe to be safe. */
  svg:not(.hero-wave):not(.scroll-progress),
  iframe,
  video{max-width:100%;height:auto;}
  /* Tables: horizontal scroll wrapper preferred, but cap width as fallback */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Inline-block or long-word elements that can force page width */
  p,li,span,dd,dt,blockquote{overflow-wrap:break-word;word-break:break-word;}
}

/* ---------- T. WELCOME SECTION — 320px ----------
   .welcome already stacks at ≤960px and heading is already 30px at
   ≤640px. At 380px tighten the grid gap and button. */
@media (max-width:380px){
  .welcome{gap:28px;}
  .welcome-text h2{font-size:26px;}
  .welcome-text p{font-size:14.5px;}
  .welcome-image{height:200px;}
  .welcome-text .btn{width:100%;text-align:center;justify-content:center;}
}

/* ---------- U. CONTACT MAP & CAREER IMAGE — FULL WIDTH ON PHONE ----------
   When .grid-2 stacks at ≤640px, these image containers sit in their own
   full-width column but their CSS height:100% resolves to zero (no parent
   height set in the stacked single-col layout). Phase 2 fixes cap them at
   260px/240px. This bonus rule also ensures the inner img fills the box. */
@media (max-width:640px){
  .contact-map-image,
  .career-image{
    width:100%;
    display:block;
  }
  .contact-map-image img,
  .career-image img{
    width:100%;
    max-width:100%;
    border-radius:16px;
  }
}

/* ---------- V. CONTACT DETAIL CARDS — LONG VALUES ----------
   Email addresses and URLs inside .cd-value can be long unbroken strings.
   overflow-wrap:anywhere breaks them at any character to prevent overflow. */
@media (max-width:640px){
  .cd-value{
    overflow-wrap:anywhere;
    word-break:break-all;
  }
}

/* ---------- W. SCHEMES GRID — IMAGE HEIGHT ON PHONES ----------
   .scheme-image has height:200px which works well on a 2 or 4-col desktop.
   On a 1-col phone layout this is proportionally fine, but at 320px we
   give it a slightly smaller height so the card's text and CTA stay more
   balanced. */
@media (max-width:380px){
  .scheme-image{height:160px;}
}

/* ---------- X. ABOUT HERO — CONSISTENT INNER PADDING AT 320px ----------
   .about-hero-inner is separate from .hero-inner. Phase 4 Fix K covers
   .hero-inner, this mirrors it for the about-hero-inner. */
@media (max-width:380px){
  .about-hero-inner{padding:44px 0 28px;}
  .page-hero.about-hero{min-height:260px;}
}

/* ---------- Y. MOBILE NAV TOGGLE Z-INDEX SAFETY ----------
   Ensures the hamburger button always appears above the nav overlay when
   it is visible — the header is at z-index:200 but an explicit z-index
   here prevents any stacking context from hiding it. */
@media (max-width:960px){
  .nav-toggle{
    position:relative;
    z-index:201;
    flex-shrink:0;
  }
}
/* Hide floating buttons on mobile */
@media screen and (max-width: 768px) {
    .fab-top,
    .fab-call,
    .fab-whatsapp {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}
.social-icon{
    background:#2d2f8d !important;
    color:#ffffff !important;
}

.social-icon i{
    color:#ffffff !important;
    font-size:24px;
    line-height:1;
}

/* ============================================================
   ADDITIONS — Contact page: image panel + details row
   Scoped to .contact-image-panel / .contact-details-row only,
   so no other page's .grid-2, .contact-map-image, or
   .contact-details-grid usage is affected. Appended only.
   ============================================================ */

/* Tablet: .grid-2 already stacks to 1 column at 960px (existing
   rule above), so the image sits below the form here. It has no
   fixed-height sibling to stretch against once stacked, so give
   it an explicit height for this range. */
@media (max-width:960px){
  .contact-image-panel .contact-map-image{height:320px;min-height:0;}
  .contact-details-row{margin-top:40px;}
}

/* Mobile: shorter image, details cards stack to one comfortable
   column, social icons stay centered (existing .social-row rule
   already centers them at this width). */
@media (max-width:640px){
  .contact-image-panel .contact-map-image{height:220px;}
  .contact-details-row .contact-detail-card{flex:1 1 100%;}
}
@media (max-width:992px){

    .contact-image{
        order:-1;
        min-height:auto;
        padding:10px 20px 30px;
    }

    .contact-image img{
        max-width:500px;
    }

}