/*
 * TNSC Bank — "Premium Home" design system.
 * Ported from the Claude Design source `TNSC Premium Home.dc.html`.
 * Inline styles from the prototype are collapsed into tokens + component classes here.
 */

:root {
  --navy-900: #06263F;
  --navy-800: #072A47;
  --navy-700: #0A3D66;
  --navy-600: #0C4573;
  --blue: #0072C6;
  --blue-dark: #0A4E82;
  --blue-bright: #0097F0;
  --blue-tint: #EAF4FC;
  --green: #2E8B57;
  --green-dark: #236E45;
  --green-mint: #7FD6A8;
  --green-tint: #E8F2EA;
  --green-wash: #F2F7F4;
  --gold: #8A6D1D;
  --gold-tint: #F4F0E6;
  --rust: #C0533A;
  --rust-tint: #FDF0EC;
  --orange: #F26522;

  --ink: #0A3D66;
  --ink-muted: #5B6B7A;
  --ink-soft: #7A8794;
  --ink-faint: #9AA7B4;

  --surface: #fff;
  --surface-alt: #F2F6FA;
  --surface-soft: #F9FBFD;
  --line: #E3E9F0;
  --line-soft: #EDF1F5;

  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --body: 'Instrument Sans', 'Noto Sans Tamil', system-ui, sans-serif;
  --tamil: 'Noto Sans Tamil', sans-serif;

  --gutter: 72px;
  --shell: 1240px;
  --shell-wide: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--blue); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; }

@keyframes npMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes npFadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes npDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.npscroll::-webkit-scrollbar { display: none; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

/* ── Layout helpers ─────────────────────────────────────── */
.shell { max-width: var(--shell); margin: 0 auto; }
.shell-wide { max-width: var(--shell-wide); margin: 0 auto; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft);
}
.eyebrow--green { color: var(--green); letter-spacing: .16em; }
.eyebrow--blue { color: var(--blue); letter-spacing: .14em; }
.eyebrow--gold { color: var(--gold); letter-spacing: .14em; }
.eyebrow--rust { color: var(--rust); }
.eyebrow--mint { color: var(--green-mint); letter-spacing: .16em; }

.icon { flex: none; }

/* Stacked text pairs are marked up with spans (so they can sit inside links);
   these need block flow or they lay out side-by-side. */
.brand__ta, .brand__en, .brand__meta,
.contact > span, .contact__label, .contact__value,
.mega__item > span:last-child, .mega__title, .mega__desc,
.promo__app > span:last-child, .qr__name, .qr__note,
.notice__title,
.footer__brand > span { display: block; }
.contact > span:first-child,
.mega__item > span:first-child,
.promo__app > span:first-child { display: flex; }

/* ── Top utility strip ──────────────────────────────────── */
.topstrip {
  background: var(--navy-800); color: rgba(255, 255, 255, .78);
  font-size: 12px; padding: 0 56px; height: 36px;
  display: flex; align-items: center; justify-content: space-between;
}
.topstrip__left { display: flex; align-items: center; gap: 20px; }
.topstrip__right { display: flex; align-items: center; gap: 22px; }
.topstrip__sep { opacity: .4; }
.topstrip a {
  color: rgba(255, 255, 255, .85); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.topstrip a:hover { color: #fff; }
.topstrip a.is-tamil { font-family: var(--tamil); font-weight: 600; }

/* ── Masthead ───────────────────────────────────────────── */
.masthead {
  background: #fff; padding: 0 56px; height: 92px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 14px; flex: none; }
/* 20 Aug Iteration doc: "Logo need to enlarge little big." */
.brand__mark { width: 68px; height: 68px; border-radius: 12px; object-fit: contain; flex: none; }
.brand__text { line-height: 1.25; min-width: 0; }  /* allow the long bank name to wrap on narrow screens */
.brand__ta { font-family: var(--tamil); font-size: 13px; font-weight: 600; color: var(--ink); }
.brand__en { font-family: var(--display); font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.brand__meta { font-size: 10px; color: var(--ink-soft); letter-spacing: .09em; text-transform: uppercase; margin-top: 1px; }

.masthead__actions { display: flex; align-items: center; gap: 26px; flex: none; }
.contacts {
  display: flex; align-items: center; gap: 22px;
  padding-right: 26px; border-right: 1px solid var(--line);
}
.contact { display: flex; align-items: center; gap: 9px; transition: opacity .15s ease; }
.contact:hover { opacity: .68; }
.contact:hover .contact__icon { transform: scale(1.08); }
.contact__icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.contact__icon--blue { background: var(--blue-tint); }
.contact__icon--green { background: var(--green-tint); }
.contact__icon--rust { background: var(--rust-tint); }
.contact__label {
  font-size: 10.5px; color: var(--ink-soft); letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600;
}
.contact__value { font-size: 13px; font-weight: 700; color: var(--ink); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 11px; font-weight: 600; font-size: 14px;
  padding: 12px 26px; transition: background .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(0, 114, 198, .25); }
.btn--primary:hover { background: var(--blue-dark); color: #fff; }
.btn--green { background: var(--green); color: #fff; border-radius: 10px; padding: 10px 20px; font-size: 13px; }
.btn--green:hover { background: var(--green-dark); color: #fff; }
.btn--light { background: #fff; color: var(--ink); border-radius: 12px; padding: 14px 30px; font-size: 15px; }
.btn--light:hover { background: var(--blue-tint); color: var(--ink); }
.btn--ghost {
  color: #fff; border-radius: 12px; padding: 14px 30px; font-size: 15px;
  font-weight: 500; border: 1.5px solid rgba(255, 255, 255, .4);
}
.btn--ghost:hover { border-color: #fff; color: #fff; }
/* Secondary button for light-background sections (forms, pagers) — .btn--ghost
 * is white-on-transparent, meant for dark CTA sections, so it disappears here. */
.btn--outline {
  color: var(--ink); background: #fff; border-radius: 12px; padding: 13px 28px;
  font-size: 15px; font-weight: 600; border: 1.5px solid var(--line);
}
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }
.btn--outline:disabled { opacity: .4; cursor: not-allowed; }
.btn--glass {
  background: rgba(255, 255, 255, .12); color: #fff; border-radius: 12px;
  padding: 14px 32px; font-size: 15px; font-weight: 500;
  border: 1.5px solid rgba(255, 255, 255, .32);
}
.btn--glass:hover { border-color: #fff; color: #fff; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--blue);
}

/* ── Nav bar ────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 1200; background: #fff;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(10, 61, 102, .05);
}
.navbar__inner {
  padding: 0 56px; height: 64px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.navbar__brand {
  position: absolute; left: 56px; top: 50%;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  transform: translateY(-50%) translateX(-24px);
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.is-scrolled .navbar__brand {
  transform: translateY(-50%) translateX(0); opacity: 1; pointer-events: auto;
}
.navbar__logo { width: 44px; height: 44px; border-radius: 9px; object-fit: contain; flex: none; }
/* Full bilingual name, two lines — shrunk well below the masthead's .brand__ta/
   .brand__en sizes to fit the 56px-tall sticky bar. Falls back to the short
   .navbar__brand-short label below 1280px, where it starts to crowd the
   centered nav items (see the 1280px breakpoint below); .navbar__brand-short
   itself is hidden by default and only shown there. */
/* 24 Aug feedback: "Increase the Font Size of the Bank Name." The two lines
   were set at 8px/9.5px to clear the 56px bar; the bar now grows a little
   instead so the name can be read at a normal size. */
.navbar__brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.navbar__brand-ta { font-family: var(--tamil); font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.navbar__brand-en { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.navbar__brand-short { display: none; font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.navbar__items { display: flex; align-items: center; gap: 4px; }
.navbar__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-size: 14.5px; font-weight: 500;
  color: var(--ink); border-radius: 9px;
  /* About Us and Support render as <button> (no landing page behind them),
     so strip the UA button styling and match the anchors exactly. */
  background: none; border: 0; cursor: pointer; font-family: var(--body);
  line-height: inherit; appearance: none; -webkit-appearance: none;
}
.navbar__link:hover,
.navbar__link.is-open,
.navbar__link[aria-current="page"] { background: var(--surface-alt); color: var(--blue); }

.navbar__search {
  position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 10px; background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0;
}
.navbar__search:hover { background: #E4EDF5; }
.navbar__search .icon-close { display: none; }
.is-searching .navbar__search .icon-close { display: block; }
.is-searching .navbar__search .icon-search { display: none; }

/* Search overlay — reworked 24 Aug to the hdfc.bank.in pattern the client
   referenced: the bar is a distinct floating card rather than a strip
   welded to the nav, it sits over a dimmed backdrop, and clicking that
   backdrop closes it (previously only the ✕ or Esc would). */
.searchbar {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-radius: 0 0 20px 20px;
  border-top: 1px solid var(--line-soft); overflow: hidden;
  max-height: 0; opacity: 0; box-shadow: none;
  transition: max-height .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
/* max-height (not height) so the trending-chips row below the input can wrap
   onto extra lines on narrow viewports without being clipped. */
.is-searching .searchbar { max-height: 420px; opacity: 1; box-shadow: 0 30px 60px rgba(10, 61, 102, .22); }
.searchbar__inner {
  max-width: 900px; margin: 0 auto; padding: 26px 56px 4px;
  display: flex; align-items: center; gap: 14px;
}
/* Dimmed backdrop behind the panel. Sits under the navbar (z-index 1200)
   but over the page, and is the click-outside target. */
.search-veil {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(6, 38, 64, .45); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.is-searching .search-veil { opacity: 1; visibility: visible; }
.searchbar input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: var(--body); font-size: 17px; color: var(--ink); padding: 0;
}
.searchbar kbd {
  font-size: 11px; color: var(--ink-faint); font-family: var(--body);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; flex: none;
}

/* ── Mega menus ─────────────────────────────────────────── */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff;
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 40px 70px rgba(10, 61, 102, .16);
  animation: npFadeDown .22s ease both;
  display: none;
}
.mega.is-open { display: block; }
.mega__close { display: none; }
.mega__grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 340px;
  gap: 36px; padding: 36px 56px 40px;
}
.mega__heading { margin-bottom: 14px; }
.mega__stack { display: flex; flex-direction: column; gap: 2px; }
.mega__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; font-weight: 500; }
.mega__links a:hover { color: var(--blue); }
.mega__item {
  display: flex; gap: 12px; padding: 10px 12px;
  border-radius: 10px; margin: 0 -12px;
}
.mega__item:hover { background: var(--surface-alt); }
.mega__badge {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.mega__badge--green { background: var(--green-tint); color: var(--green); }
.mega__badge--blue { background: var(--blue-tint); color: var(--blue); }
.mega__badge--gold { background: var(--gold-tint); color: var(--gold); }
.mega__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.mega__desc { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }

.promo { display: flex; flex-direction: column; gap: 14px; }
.promo__card {
  background: var(--green-wash); border: 1px solid #DDEBE2;
  border-radius: 16px; padding: 22px;
}
.promo__title {
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em; margin: 8px 0 6px;
}
.promo__body { font-size: 12.5px; color: var(--ink-muted); line-height: 1.55; margin-bottom: 16px; }
.promo__app {
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 22px;
  display: flex; align-items: center; gap: 16px;
}
.promo__image {
  background: var(--surface-alt); border-radius: 16px;
  overflow: hidden; position: relative; min-height: 170px;
}
/* 09 Sep feedback: "Kindly add some transition to the above image while
   hovering" — the mega-menu promo image now lifts and zooms slightly. */
.promo__image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.promo__image:hover img { transform: scale(1.07); }
.promo__image::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 38, 64, .35));
  opacity: 0; transition: opacity .35s ease;
}
.promo__image:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .promo__image img { transition: none; }
  .promo__image:hover img { transform: none; }
}
.promo__dark { background: var(--ink); border-radius: 16px; padding: 22px; color: #fff; }
.promo__dark .eyebrow { color: rgba(255, 255, 255, .6); }
.promo__dark p {
  font-family: var(--display); font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.3; margin-top: 8px;
}
.promo__help { font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.6; margin-top: 8px; }

/* QR block — drawn with gradients, as in the prototype */
.qr { border-radius: 10px; background: #fff; border: 1px solid var(--line); flex: none; position: relative; overflow: hidden; }
.qr--sm { width: 64px; height: 64px; }
.qr--lg { width: 72px; height: 72px; }
.qr::before {
  content: ""; position: absolute; inset: 8px; opacity: .75;
  background:
    repeating-linear-gradient(0deg, var(--ink) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px);
}
.qr i {
  position: absolute; width: 12px; height: 12px;
  border: 3px solid var(--ink); background: #fff;
}
.qr i:nth-child(1) { top: 6px; left: 6px; }
.qr i:nth-child(2) { top: 6px; right: 6px; }
.qr i:nth-child(3) { bottom: 6px; left: 6px; }
/* Mega-menu app panel with real artwork: the copy sits above, and the store
   tiles share the panel's full width below it (10 Sep feedback: "use this
   section fully for both the QRs"). A third store would simply divide the
   same row. The one-QR decorative fallback keeps the original side-by-side
   layout, which is what .promo__app on its own still describes. */
.promo__app--codes { flex-direction: column; align-items: stretch; gap: 14px; }
/* Beats `.promo__app > span:first-child { display: flex }` further up, which
   was written when the QR was the first child rather than the copy. */
.promo__app--codes > span:first-child { display: block; }
.promo__app.promo__app--codes .promo__app-codes { display: flex; gap: 12px; width: 100%; }
.promo__app-code {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.promo__app-code .qr--image {
  width: 100%; height: auto; max-width: 132px; aspect-ratio: 1 / 1;
}
.promo__app-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}

.qr__name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.qr__note { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }

/* ── Floating chat + side rails ─────────────────────────── */
.chat-fab {
  /* Raised so it sits above the footer credit line rather than over it. */
  position: fixed; right: 26px; bottom: 62px; z-index: 180;
  display: flex; align-items: center; gap: 9px;
  background: var(--green); color: #fff; padding: 8px 20px 8px 12px;
  border-radius: 100px; box-shadow: 0 12px 34px rgba(46, 139, 87, .4);
  /* 10 Sep feedback: "increase the size of the bird and reduce the wording".
     Vertical padding comes down as the mascot grows so the pill keeps
     roughly the height it had. */
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.chat-fab:hover { background: var(--green-dark); color: #fff; }

.rails {
  /* left+right (not width:100vw) so this resolves against the visual
     viewport on fixed-position elements — 100vw includes the scrollbar
     track on browsers without overlay scrollbars, which pushed
     .rails__fd's right:0 edge under the scrollbar. */
  position: fixed; top: 50%; height: 0; z-index: 150; left: 0; right: 0;
  pointer-events: none; transform: translateY(-40%);
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.is-railed .rails { transform: translateY(-50%); opacity: 1; visibility: visible; }
.rails__social {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  pointer-events: auto; background: var(--navy-800);
  border-radius: 0 12px 12px 0; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 10px 30px rgba(7, 42, 71, .28);
}
.rails__label {
  writing-mode: vertical-rl; font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); text-align: center; padding: 6px 2px;
}
.rails__social a {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255, 255, 255, .1); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.rails__social a:hover { background: var(--blue); color: #fff; }
.rails__fd {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  pointer-events: auto; background: var(--green); color: #fff;
  border-radius: 12px 0 0 12px; padding: 16px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 10px 30px rgba(46, 139, 87, .32);
}
.rails__fd:hover { background: var(--green-dark); color: #fff; }
.rails__fd span {
  writing-mode: vertical-rl; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; height: 620px; overflow: hidden; background: var(--navy-900); }
.hero__bg { position: absolute; inset: 0; background: linear-gradient(120deg, #06263F, #0A3D66 60%, #0C4573); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 09 Sep feedback: "Remove the blue shade from the Home Page video." The
   navy wash is gone; what remains is a neutral, left-weighted scrim, which
   the white headline still needs to stay legible over live footage. */
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, .12) 100%);
}
.hero__inner {
  position: relative; z-index: 5; max-width: var(--shell-wide); margin: 0 auto;
  padding: 0 var(--gutter); height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px); border-radius: 100px; padding: 7px 18px;
  margin-bottom: 30px; width: fit-content;
}
.hero__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-mint); animation: npDot 2s ease-in-out infinite; }
.hero__pill span { font-size: 11.5px; color: #fff; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 {
  font-size: 64px; color: #fff; line-height: 1.08;
  letter-spacing: -.03em; margin: 0 0 18px; max-width: 640px;
}
.hero p {
  font-size: 18px; color: rgba(255, 255, 255, .82); line-height: 1.65;
  max-width: 460px; margin: 0 0 36px;
}
.hero__cta { display: flex; align-items: center; gap: 14px; }
/* Rotating word/phrase in the hero headline (20 Aug feedback). */
.hero__rotator { display: inline-block; transition: opacity .3s ease, transform .3s ease; }
.hero__rotator.is-swapping { opacity: 0; transform: translateY(6px); }

/* ── Ticker ─────────────────────────────────────────────── */
.ticker {
  background: var(--surface-alt); border-bottom: 1px solid var(--line);
  height: 46px; display: flex; align-items: center; overflow: hidden; position: relative;
}
.ticker__tag {
  flex: none; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 0 22px;
  height: 100%; display: flex; align-items: center; z-index: 2;
}
.ticker__viewport { flex: 1; overflow: hidden; }
.ticker__track {
  display: flex; gap: 56px; white-space: nowrap;
  /* Feedback: marquee speed "could be increased a little more" (was 36s). */
  animation: npMarquee 22s linear infinite; width: max-content; padding-left: 40px;
}
.ticker__track span { font-size: 13px; color: #3D4F60; }
.ticker__track a { color: #3D4F60; }
.ticker__track a:hover { color: var(--blue); text-decoration: underline; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track strong { font-weight: 600; }

/* ── Stats ──────────────────────────────────────────────── */
.stats { background: #fff; padding: 76px var(--gutter); border-bottom: 1px solid var(--line-soft); }
.stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.stat { text-align: center; padding: 8px 0; border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: var(--display); font-size: 54px; font-weight: 600;
  color: var(--ink); letter-spacing: -.03em; line-height: 1;
}
.stat__value sup { font-size: 26px; font-weight: 600; vertical-align: baseline; }
.stat__value sup.is-blue { color: var(--blue-bright); }
.stat__value sup.is-green { color: var(--green); }
.stat__value sup.is-unit { font-size: 22px; color: var(--green); }
.stat__label {
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  margin-top: 12px; text-transform: uppercase; letter-spacing: .12em;
}

/* ── Section scaffolding ────────────────────────────────── */
.section { padding: 90px var(--gutter); }
.section--tight { padding: 76px var(--gutter) 40px; }
.section--wide { padding: 100px var(--gutter); border-bottom: 1px solid var(--line-soft); }
.section--alt { background: var(--surface-alt); }
.section--soft { background: var(--surface-soft); border-top: 1px solid var(--line-soft); }
.section--mint { background: var(--green-wash); }
.section__head { text-align: center; margin-bottom: 64px; }
.section__head h2 { font-size: 46px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.12; margin: 16px 0; }
.section__head p { font-size: 16px; color: var(--ink-muted); line-height: 1.6; margin: 0 auto; max-width: 60ch; }
.section__bar {
  max-width: var(--shell-wide); margin: 0 auto 40px; padding: 0 var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.section__bar h2 { font-size: 38px; color: var(--ink); margin: 12px 0 0; }

/* ── Carousels ──────────────────────────────────────────── */
.carousel-nav { display: flex; gap: 10px; }
.carousel-nav button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.carousel-nav .prev { border: 1.5px solid #C6D6E4; background: #fff; }
.carousel-nav .prev:hover { border-color: var(--blue); }
.carousel-nav .next { border: 0; background: var(--blue); box-shadow: 0 6px 16px rgba(0, 114, 198, .3); }
.carousel-nav .next:hover { background: var(--blue-dark); }
.carousel {
  display: flex; gap: 20px; overflow-x: auto;
  /* Vertical room for the card hover: overflow-x:auto also makes overflow-y
     'auto', so a 6px lift and its shadow would otherwise be clipped and
     could trip a vertical scrollbar. */
  padding: 16px var(--gutter) 48px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carousel > * { flex: none; scroll-snap-align: start; }

/* Product cards */
.pcard { border-radius: 22px; padding: 40px; width: 340px; position: relative; overflow: hidden; }
.pcard--hero {
  width: 560px; padding: 44px;
  background: linear-gradient(138deg, #072A47, #0790F6);
}
.pcard--green { background: linear-gradient(150deg, #2E8B57, #236E45); }
.pcard--navy { background: var(--ink); }
.pcard--plain { background: #fff; border: 1px solid var(--line); }
.pcard__orb { position: absolute; top: -40px; right: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.pcard--hero .pcard__orb { top: -50px; right: -50px; width: 240px; height: 240px; background: rgba(255, 255, 255, .09); }
.pcard--navy .pcard__orb { background: rgba(255, 255, 255, .06); }
.pcard__body { position: relative; }
.pcard__kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; }
.pcard--hero .pcard__kicker,
.pcard--green .pcard__kicker { color: rgba(255, 255, 255, .72); }
.pcard--navy .pcard__kicker { color: rgba(255, 255, 255, .6); }
.pcard h3 {
  font-family: var(--display); font-size: 28px; font-weight: 600; color: #fff;
  letter-spacing: -.02em; line-height: 1.22; margin: 0 0 12px; max-width: 400px;
}
.pcard p { font-size: 14px; color: rgba(255, 255, 255, .75); max-width: 380px; line-height: 1.6; margin: 0 0 26px; }
.pcard__rate {
  font-family: var(--display); font-size: 56px; font-weight: 600;
  color: #fff; letter-spacing: -.04em; line-height: .95;
}
.pcard__rate sup { font-size: 24px; color: #FBE14B; font-weight: 600; vertical-align: baseline; }
.pcard__sub { font-size: 12.5px; color: rgba(255, 255, 255, .68); margin: 8px 0 26px; }
.pcard__lead {
  font-family: var(--display); font-size: 24px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25; margin-bottom: 10px;
}
.pcard--plain .pcard__lead { color: var(--ink); }
.pcard--navy .pcard__lead { color: #fff; }
.pcard__copy { font-size: 13.5px; line-height: 1.6; margin-bottom: 24px; }
.pcard--plain .pcard__copy { color: var(--ink-muted); }
.pcard--navy .pcard__copy { color: rgba(255, 255, 255, .65); }
.pcard__cta {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  color: var(--blue); padding: 11px 22px; border-radius: 10px;
  font-weight: 600; font-size: 13.5px;
}
.pcard__cta:hover { background: var(--blue-tint); color: var(--blue-dark); }
.pcard__link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #fff; }
.pcard--green .pcard__link:hover { color: #FBE14B; }
.pcard--navy .pcard__link { color: var(--green-mint); }
.pcard--plain .pcard__link { color: var(--blue); }

/* ── Payment rails ──────────────────────────────────────────
 * Two opposed marquee rows (24 Aug feedback). The section is full-bleed,
 * so the rows are masked at both edges to fade in/out rather than being
 * cut off hard. Hovering pauses, and prefers-reduced-motion stops the
 * animation outright and lets the row scroll manually instead. */
.railway { display: flex; flex-direction: column; gap: 22px; }
.railway__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.railway__track {
  display: flex; width: max-content;
  animation: npRailway 46s linear infinite;
}
.railway__row--rtl .railway__track { animation-direction: reverse; }
.railway__row:hover .railway__track,
.railway__row:focus-within .railway__track { animation-play-state: paused; }
/* margin-right, not the track's `gap`: every tile then occupies exactly
   (width + margin), so the two identical passes total 2n × that and the
   -50% keyframe lands precisely on the start of pass two. With `gap` the
   track is 2n tiles but only 2n-1 gaps, and the loop visibly jumps by half
   a gap each cycle. */
.railway__track .rail-tile { flex: none; width: 232px; margin-right: 22px; }
@keyframes npRailway {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .railway__track { animation: none; }
  .railway__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.rails-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.rail-tile {
  background: #fff; border: 1px solid #E9EEF3; border-radius: 18px; min-height: 148px;
  padding: 22px 18px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  box-shadow: 0 6px 22px rgba(10, 61, 102, .06);
  transition: box-shadow .2s ease;
}
.rail-tile:hover { box-shadow: 0 14px 34px rgba(10, 61, 102, .12); }
.rail-tile__logo {
  height: 42px; width: auto; max-width: 82%;
  object-fit: contain; object-position: center;
}
.rail-tile__label {
  font-size: 10px; font-weight: 600; color: var(--ink-faint);
  letter-spacing: .09em; text-transform: uppercase;
  text-align: center; line-height: 1.35;
}
/* Text wordmark for services without a logo asset yet — sized and weighted
 * to read at the same visual weight as the real logos above. */
.rail-tile__wordmark {
  height: 42px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 19px; font-weight: 800;
  color: var(--ink); letter-spacing: -.01em;
}

/* ── Video + notices ────────────────────────────────────── */
.media-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
.video-frame { width: 100%; height: 380px; border-radius: 20px; border: 0; background: var(--navy-900); display: block; }
.video-poster {
  display: block; position: relative; height: 380px; border-radius: 20px;
  overflow: hidden; cursor: pointer; border: 0; width: 100%;
  background: var(--navy-900);
}
.video-poster__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.video-poster__veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)); }
.video-poster__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 82px; height: 82px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.video-poster__note {
  position: absolute; left: 24px; bottom: 20px;
  font-family: ui-monospace, monospace; font-size: 11px; color: rgba(255, 255, 255, .55);
}
.video-caption {
  font-size: 13px; color: var(--ink-soft); margin-top: 14px;
  display: flex; align-items: center; gap: 8px;
}
.notices { display: flex; flex-direction: column; gap: 12px; }
.notices h2 { font-size: 32px; color: var(--ink); line-height: 1.15; margin: 14px 0 12px; }
.notice {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 20px; transition: border-color .2s ease;
}
.notice:hover { border-color: var(--blue); }
.notice__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.notice__date { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); }
.notice__new {
  background: var(--green); color: #fff; font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; padding: 2px 8px; border-radius: 100px;
}
.notice__type { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; }
.notice__type--circular { color: var(--blue); background: var(--blue-tint); }
.notice__type--notice { color: var(--green); background: var(--green-tint); }
.notice__type--tender { color: var(--gold); background: var(--gold-tint); }
.notice__title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45; }

/* ── Awards ─────────────────────────────────────────────── */
.award { width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.award__media { height: 180px; overflow: hidden; }
.award__media img { width: 100%; height: 100%; object-fit: cover; }
.award__media--blue {
  background: repeating-linear-gradient(135deg, #E6EFF7 0 24px, #EFF5FA 24px 48px);
  display: flex; align-items: center; justify-content: center;
}
.award__media--green {
  background: repeating-linear-gradient(135deg, #E8F2EA 0 24px, #F0F7F1 24px 48px);
  display: flex; align-items: center; justify-content: center;
}
.award__media span { font-family: ui-monospace, monospace; font-size: 10.5px; color: #7A9BB8; }
.award__media--green span { color: #6F9B82; }
.award__body { padding: 22px 24px 26px; }
.award__year { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; color: var(--blue); }
.award__year--green { color: var(--green); }
.award__text { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }

/* ── Safety ─────────────────────────────────────────────── */
.safety h2 { font-size: 38px; color: var(--ink); text-align: center; margin: 0 0 48px; }
.safety__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.safety-card { background: #fff; border-radius: 18px; padding: 30px 28px; box-shadow: 0 4px 20px rgba(10, 61, 102, .05); }
.safety-card__icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--green-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.safety-card__title { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.safety-card__body { font-size: 13px; color: var(--ink-muted); line-height: 1.6; }
.safety-card--alert { background: var(--ink); box-shadow: 0 14px 34px rgba(10, 61, 102, .28); }
.safety-card--alert .safety-card__icon { background: rgba(255, 255, 255, .12); }
.safety-card--alert .safety-card__title { color: #fff; }
.safety-card--alert .safety-card__body { color: rgba(255, 255, 255, .72); }
.safety-card--alert strong { color: #fff; }

/* ── CTA band ───────────────────────────────────────────── */
.cta { background: linear-gradient(140deg, #2E8B57, #1F6B44); }
.cta__inner { padding: 88px var(--gutter); text-align: center; position: relative; overflow: hidden; }
.cta__orb {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 640px; height: 640px; border-radius: 50%; background: rgba(255, 255, 255, .05);
}
.cta__body { position: relative; }
.cta h2 { font-size: 42px; color: #fff; margin: 0 0 14px; }
.cta p { font-size: 16px; color: rgba(255, 255, 255, .8); margin: 0 auto 36px; max-width: 480px; line-height: 1.65; }
.cta__actions { display: flex; align-items: center; justify-content: center; gap: 14px; }

/* ── Interior pages ─────────────────────────────────────── */
.breadcrumb { background: var(--surface-alt); border-bottom: 1px solid var(--line); padding: 16px var(--gutter); }
.breadcrumb__inner {
  max-width: var(--shell); margin: 0 auto; font-size: 13px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.breadcrumb a { color: var(--blue); font-weight: 600; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }

.page-hero { background: linear-gradient(120deg, #06263F, #0A3D66); padding: 72px var(--gutter); color: #fff; }
.page-hero h1 { font-size: 48px; line-height: 1.1; letter-spacing: -.03em; margin: 14px 0 16px; max-width: 20ch; }
.page-hero p { font-size: 16px; color: rgba(255, 255, 255, .78); line-height: 1.7; max-width: 60ch; margin: 0; }

.link-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* ── Single-card variant (About > Overview > Management) ────────────────
   10 Sep feedback: "increase the font size and centre the section neatly".
   The card was the only child of a three-column grid, so it sat in the left
   third at small type. */
.link-cards--solo { grid-template-columns: minmax(0, 780px); justify-content: center; text-align: center; }
.link-cards--solo .link-card { padding: 40px 44px; }
.link-cards--solo .highlight__icon { margin-left: auto !important; margin-right: auto !important; }
.link-cards--solo .link-card h3 { font-size: 26px; margin: 0 0 14px; }
.link-cards--solo .prose { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.link-cards--solo .prose p { margin: 0 0 14px; }
.link-cards--solo .prose p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .link-cards--solo .link-card { padding: 30px 24px; }
  .link-cards--solo .link-card h3 { font-size: 22px; }
  .link-cards--solo .prose { font-size: 16px; }
}
.link-card {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 18px; padding: 32px 30px;
}
.link-card__links {
  display: flex; flex-direction: column; gap: 12px;
  font-size: 14.5px; font-weight: 600; margin-top: 16px;
}
.link-card__links a:hover { color: var(--blue); }

.fact-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 64px; }
.fact-card {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 30px;
}
.fact-card__value { font-family: var(--display); font-size: 40px; font-weight: 600; color: var(--ink); letter-spacing: -.03em; }
.fact-card__body { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; margin-top: 8px; }

.explore { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 80px; }
.explore:last-child { margin-bottom: 40px; }
.explore__media {
  border-radius: 20px; overflow: hidden; height: 340px;
  box-shadow: 0 24px 60px rgba(10, 61, 102, .12);
}
.explore__media img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder treatment for imagery not shipped with the theme */
.explore__media--ph {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #E6EFF7 0 24px, #EFF5FA 24px 48px);
}
.explore__media--ph.is-green { background: repeating-linear-gradient(135deg, #E8F2EA 0 24px, #F0F7F1 24px 48px); }
.explore__media--ph span { font-family: ui-monospace, monospace; font-size: 11px; color: #7A9BB8; }
.explore h3 { font-size: 28px; color: var(--ink); letter-spacing: -.02em; margin: 12px 0 10px; }
.explore p { font-size: 14.5px; color: var(--ink-muted); line-height: 1.65; margin: 0 0 22px; max-width: 44ch; }
.explore__list { display: flex; flex-direction: column; }
.explore__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; border-top: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.explore__list a:last-child { border-bottom: 1px solid var(--line); }
.explore__list a:hover { color: var(--blue); }
.explore__list a svg { transition: transform .26s cubic-bezier(.22, .61, .36, 1); }
.explore__list a:hover svg { transform: translateX(4px); }

.page-intro { text-align: center; margin-bottom: 70px; }
.page-intro h2 { font-size: 44px; color: var(--ink); line-height: 1.12; margin: 14px 0 0; }

/* Editor content (fallback single/page/archive) */
.prose { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.75; color: var(--ink-muted); }
.prose h1, .prose h2, .prose h3 { color: var(--ink); margin: 1.6em 0 .5em; }
.prose h1 { font-size: 40px; }
.prose h2 { font-size: 28px; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose a { color: var(--blue); }
.archive-item { border-bottom: 1px solid var(--line); padding: 26px 0; }
.archive-item h2 { font-size: 24px; margin: 0 0 6px; }
.archive-item time { font-size: 12.5px; color: var(--ink-soft); }

/* ── Footer ─────────────────────────────────────────────── */
.footer { background: var(--navy-800); color: #fff; padding: 64px var(--gutter) 0; }
.footer__info {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr auto 1fr;
  gap: 40px 48px; padding-bottom: 40px; align-items: start;
}
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer__brand img { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: #fff; }
.footer__ta { font-family: var(--tamil); font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.footer__en { font-family: var(--display); font-size: 14px; font-weight: 600; }
.footer__about { font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .6); margin: 0 0 16px; max-width: 36ch; }
.footer__app-cta { margin: 0 0 20px; }
.footer__app-cta .link-arrow { color: var(--green-mint); }
.footer__app-cta .link-arrow:hover { color: #A8E6C6; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 9px; background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.footer__social a:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.footer__heading {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 16px;
  list-style: none;
}
.footer__heading::-webkit-details-marker { display: none; }
.footer__details { margin: 0; }
.footer__details > .footer__heading { display: block; cursor: default; }
@media (min-width: 641px) {
  .footer__details .footer__links { display: flex !important; }
}
.footer__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px 40px; padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer__links { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; }
.footer__links a { color: rgba(255, 255, 255, .78); text-underline-offset: 3px; }
.footer__links a:hover, .footer__links a:focus-visible { color: #fff; text-decoration: underline; }
.footer__address { font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .78); margin: 0 0 16px; }
.footer__address a { color: inherit; text-underline-offset: 3px; }
.footer__address a:hover, .footer__address a:focus-visible { color: #fff; text-decoration: underline; }
.footer__contact { font-size: 13.5px; display: flex; flex-direction: column; gap: 8px; }
.footer__contact a {
  color: rgba(255, 255, 255, .78); display: flex; flex-wrap: wrap; gap: 6px 10px;
  text-underline-offset: 3px;
}
.footer__contact a:hover, .footer__contact a:focus-visible { color: #fff; text-decoration: underline; }
.footer__contact strong { color: #fff; font-weight: 600; }
.footer__contact a[href^="mailto"] { color: var(--green-mint); }
.footer__contact a[href^="mailto"]:hover { color: #A8E6C6; }
.footer__regulators {
  max-width: var(--shell); margin: 0 auto;
  padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer__regulators-list {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.footer__regulators-list a {
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .78);
  text-underline-offset: 3px;
}
.footer__regulators-list a:hover, .footer__regulators-list a:focus-visible { color: #fff; text-decoration: underline; }
.footer__base {
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 28px; flex-wrap: wrap; padding: 20px 0 24px;
  max-width: var(--shell); margin: 0 auto;
}
.footer__legal { display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.footer__legal span, .footer__credit { font-size: 12.5px; color: rgba(255, 255, 255, .5); line-height: 1.55; }
.footer__base strong { color: rgba(255, 255, 255, .75); font-weight: 600; }
.footer__policies { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer__policies a { color: rgba(255, 255, 255, .72); font-size: 12.5px; font-weight: 600; text-underline-offset: 3px; }
.footer__policies a:hover, .footer__policies a:focus-visible { color: #fff; text-decoration: underline; }
.footer__credit { margin-left: auto; }
.footer__credit a { color: inherit; text-underline-offset: 3px; }
.footer__credit a:hover strong, .footer__credit a:focus-visible strong { color: #fff; text-decoration: underline; }

/* WordPress admin bar keeps the sticky nav clear of the toolbar */
.admin-bar .navbar { top: 32px; }

/* =========================================================================
 * Client feedback — 01 Aug 2026 / 04 Aug 2026
 * ====================================================================== */

/* ── Type scale ──────────────────────────────────────────────────────────
 * Feedback: "increase the Font Size and the Font Weight of the entire
 * website." Raised roughly one step across body copy and UI labels; display
 * headings keep their optical sizes but gain weight.
 * -------------------------------------------------------------------- */
.topstrip { font-size: 13px; }
.topstrip a { font-weight: 600; }
.brand__ta { font-size: 14px; font-weight: 700; }
.brand__en { font-size: 17.5px; }
.contact__label { font-size: 11px; font-weight: 700; }
.contact__value { font-size: 14.5px; }
.btn { font-size: 15px; font-weight: 650; }
.btn--green { font-size: 14px; }
.btn--light, .btn--ghost, .btn--glass { font-size: 16px; }
.navbar__link { font-size: 15.5px; font-weight: 600; }
.eyebrow { font-size: 12px; font-weight: 750; }
.mega__title { font-size: 15px; font-weight: 650; }
.mega__desc { font-size: 13px; }
.mega__links { font-size: 15px; font-weight: 600; }
.hero p { font-size: 19px; font-weight: 450; }
.hero h1 { font-weight: 650; }
.stat__value { font-weight: 650; }
.stat__label { font-size: 12.5px; font-weight: 700; }
.ticker__track span { font-size: 14px; font-weight: 500; }
.section__head h2, .section__bar h2, .safety h2, .cta h2 { font-weight: 700; }
.section__head p { font-size: 17px; }
.pcard p, .pcard__copy { font-size: 14.5px; }
.pcard__kicker { font-size: 12px; }
.pcard h3, .pcard__lead { font-weight: 650; }
.rail-tile__label { font-size: 10.5px; font-weight: 700; }
.notice__title { font-size: 15px; font-weight: 650; }
.notice__date, .notice__type { font-size: 12px; }
.award__text { font-size: 15px; font-weight: 650; }
.safety-card__title { font-size: 16.5px; }
.safety-card__body { font-size: 13.5px; }
.explore p { font-size: 15.5px; }
.explore__list a { font-size: 15.5px; font-weight: 650; }
.link-card__links { font-size: 15.5px; font-weight: 650; }
.fact-card__body { font-size: 14.5px; }
.footer__links, .footer__address, .footer__contact { font-size: 14.5px; }
.footer__about { font-size: 14.5px; }
.footer__heading { font-size: 12px; font-weight: 700; }
.footer__legal span, .footer__credit, .footer__policies a { font-size: 13px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Branch / ATM locator (20 Aug Google Sheet change request) ───────── */
.locator__search { margin-bottom: 18px; }
.locator__search input {
  width: 100%; max-width: 520px; height: 48px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 12px; font: inherit;
  background: #fff;
}
.locator__stage {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px; align-items: stretch;
}
.locator[data-view="list"] .locator__map { display: none; }
.locator[data-view="list"] .locator__stage { grid-template-columns: 1fr; }
.locator[data-view="map"] .tabpanel { display: none; }
.locator[data-view="map"] .locator__stage { grid-template-columns: 1fr; }
.locator__hours { font-size: 12.5px !important; }
.locator__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.locator__item.is-active { border-color: var(--blue); box-shadow: 0 10px 24px rgba(10, 61, 102, .1); }
.locator__bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.locator__view-toggle { display: flex; gap: 8px; }
.locator__view-toggle button {
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 650; cursor: pointer;
}
.locator__view-toggle button.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.locator__map,
.locator__map.leaflet-container {
  width: 100%; min-height: 560px; height: 100%; border-radius: 16px;
  background: var(--surface-alt); overflow: hidden;
  /* Leaflet panes/controls use z-index 400–1000. Trap them below the
     sticky navbar (200) and mega menu. */
  position: relative; z-index: 0; isolation: isolate;
}
.locator__list { display: grid; grid-template-columns: 1fr; gap: 12px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.locator__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; }
.locator__item h3 { font-size: 15.5px; margin: 0 0 8px; }
.locator__item p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 8px; }
.locator__item a { font-size: 13.5px; font-weight: 650; color: var(--blue); }
@media (max-width: 900px) {
  .locator__stage { grid-template-columns: 1fr; }
  .locator__map { min-height: 320px; height: 320px; }
  .locator__list { max-height: none; }
}

/* ── Unclaimed Deposits (DEAF) search (20 Aug Google Sheet change request) */
.deaf-search__actions { display: flex; gap: 12px; }
.deaf-results { margin-top: 32px; }
.deaf-results__pager { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.deaf-results__pager span { font-size: 13.5px; font-weight: 650; color: var(--ink-soft); }

/* ── Feedback form (20 Aug Google Sheet change request) ────────────────
 * Restyled 24 Aug against the sbi.bank.in reference the client gave:
 * "Make the Emoji size bigger. And make the page little more visually
 * appealing." The rating row now sits in its own tinted band, the faces
 * are roughly 2× their old size, and the selected one lifts. */
.feedback-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feedback-smileys {
  background: var(--blue-tint); border-radius: 18px;
  padding: 26px 24px 22px; margin-bottom: 28px;
}
.feedback-smileys__label {
  font-size: 17px; font-weight: 700; color: var(--navy-800);
  margin-bottom: 22px; text-align: center;
}
.feedback-smileys__row { display: flex; gap: 12px; justify-content: center; }
.feedback-smiley { flex: 0 1 130px; text-align: center; cursor: pointer; }
.feedback-smiley input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.feedback-smiley__face {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%;
  background: #fff; border: 3px solid transparent; font-size: 52px; line-height: 1;
  box-shadow: 0 6px 18px rgba(10, 61, 102, .10);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.feedback-smiley:hover .feedback-smiley__face { transform: translateY(-4px) scale(1.04); }
.feedback-smiley input:checked + .feedback-smiley__face {
  border-color: var(--blue); transform: translateY(-4px) scale(1.06);
  box-shadow: 0 14px 30px rgba(0, 114, 198, .28);
}
.feedback-smiley input:focus-visible + .feedback-smiley__face { outline: 3px solid var(--blue); outline-offset: 3px; }
.feedback-smiley__label { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink-soft); }
.feedback-smiley input:checked ~ .feedback-smiley__label { color: var(--blue); }
@media (max-width: 640px) {
  .feedback-smileys__row { flex-wrap: wrap; gap: 18px 8px; }
  .feedback-smiley { flex: 0 1 44%; }
  .feedback-smiley__face { width: 74px; height: 74px; font-size: 42px; }
}
.feedback-form__counter { float: right; font-weight: 600; color: var(--ink-faint); }
.feedback-form__error { color: #C0392B; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.feedback-form__thanks { text-align: center; padding: 40px 0; }
/* 10 Sep feedback: bigger, and breaking after "your". 42ch is measured, not
   guessed: it is the widest measure at which "feedback." no longer fits on
   the first line. Set as a measure rather than a hard <br> so the sentence
   still reflows sensibly on a phone. */
.feedback-form__thanks p {
  font-size: 21px; line-height: 1.5; color: var(--ink-soft);
  max-width: 42ch; margin: 0 auto 28px;
}
@media (max-width: 640px) {
  .feedback-form__thanks p { font-size: 17px; max-width: none; }
}

/* ── Downloads: category boxes (20 Aug Google Sheet change request) ──── */
.prose .dl-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  /* align-items: start — without it, opening one category stretches its
     row-neighbour to the same height and leaves a tall empty card beside it. */
  align-items: start;
  max-width: none; margin: 0 0 1.5em; list-style: none; padding: 0;
}
.prose .dl-category {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  overflow: hidden;
}
.prose .dl-category:hover { border-color: #C6D6E4; box-shadow: 0 10px 26px rgba(10, 61, 102, .08); }
.prose .dl-category > summary {
  display: flex; align-items: center; gap: 16px; padding: 24px 22px;
  cursor: pointer; list-style: none; font-weight: 700; color: var(--ink);
}
.prose .dl-category > summary::-webkit-details-marker { display: none; }
.prose .dl-category__icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.prose .dl-category__label { flex: 1; font-size: 17px; }
.prose .dl-category__count {
  font-size: 11.5px; font-weight: 700; color: var(--ink-faint);
  background: var(--surface-alt); border-radius: 999px; padding: 4px 11px;
}
.prose .dl-category[open] > summary { border-bottom: 1px solid var(--line); }

/* ── App download QR block ──────────────────────────────────────────────
   10 Sep feedback supplied the store QR codes. Shown, not linked: a QR is
   meant to be scanned off the desktop screen by the phone installing the
   app. The grid holds one or two codes, so the iOS tile can appear later
   without a layout change. */
.appqr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
  justify-content: space-between;
}
.appqr__copy { flex: 1 1 320px; max-width: 560px; }
.appqr__copy p { font-size: 16px; color: var(--ink-soft); margin: 10px 0 0; }
.appqr__codes { display: flex; flex-wrap: wrap; gap: 18px; }
.appqr__code {
  margin: 0; padding: 16px; width: 196px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
}
.appqr__code img {
  width: 160px; height: 160px; display: block; margin: 0 auto 12px;
  border-radius: 8px;
}
.appqr__code figcaption strong { display: block; font-size: 14.5px; font-weight: 700; }
.appqr__code figcaption span {
  display: block; margin-top: 4px; font-size: 12.5px;
  color: var(--ink-soft); line-height: 1.45;
}
/* The mega-menu panel swaps the decorative CSS square for real artwork. */
.qr--image { object-fit: contain; padding: 3px; background: #fff; }
@media (max-width: 700px) {
  .appqr { gap: 26px; }
  .appqr__codes { width: 100%; }
  .appqr__code { flex: 1 1 160px; width: auto; }
}

/* ── Announcements & Updates listing (archive-tnsc_notice.php) ──────────
   10 Sep feedback: one page listing every announcement, each row a simple
   link to the file or page it refers to. */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list__item + .notice-list__item { margin-top: 10px; }
.notice-list__link {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.notice-list__link:hover, .notice-list__link:focus-visible {
  border-color: #C6D6E4; box-shadow: 0 10px 26px rgba(10, 61, 102, .08);
  transform: translateY(-2px); color: var(--ink);
}
.notice-list__icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--blue-tint); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.notice-list__text { flex: 1; min-width: 0; }
.notice-list__title { display: block; font-size: 16px; font-weight: 650; line-height: 1.4; }
.notice-list__excerpt {
  display: block; margin-top: 4px; font-size: 14px; color: var(--ink-soft);
}
.notice-list__meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex: none; font-size: 12.5px; color: var(--ink-faint);
}
@media (max-width: 640px) {
  .notice-list__link { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .notice-list__meta { flex-direction: row; align-items: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .notice-list__link { transition: none; }
  .notice-list__link:hover, .notice-list__link:focus-visible { transform: none; }
}

/* CUG badge in the branch locator (10 Sep: CUG numbers supplied for all 51
   branches). Labelled inline so it is not mistaken for a second landline. */
.locator__cug-tag {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  border-radius: 4px; background: var(--blue-tint); color: var(--blue);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: 1px;
}

/* ── FAQ accordion (RTGS / NEFT) ────────────────────────────────────────
   10 Sep feedback: "the questions should be an expand and collapse option".
   Native <details>, so the answer is still reachable without JavaScript and
   prints expanded. The chevron is drawn in CSS because post_content is run
   through wp_kses, which strips <svg>. */
.prose .faq-item {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  margin: 0 0 10px; overflow: hidden;
}
.prose .faq-item:hover { border-color: #C6D6E4; }
.prose .faq-item > summary {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  cursor: pointer; list-style: none; font-weight: 650; font-size: 16px;
  color: var(--ink);
}
.prose .faq-item > summary::-webkit-details-marker { display: none; }
.prose .faq-item > summary::after {
  content: ''; flex: none; margin-left: auto;
  width: 9px; height: 9px; border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.prose .faq-item[open] > summary { border-bottom: 1px solid var(--line); }
.prose .faq-item[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.prose .faq-item__body { padding: 16px 22px 20px; background: var(--surface-alt); }
.prose .faq-item__body p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .prose .faq-item > summary::after { transition: none; }
}

/* Expanded panel: two-column document cards, per the RBL reference. */
.prose .dl-panel { background: var(--surface-alt); padding: 18px; }
.prose .dl-items {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.prose .dl-items li { margin: 0; }
.prose .dl-item--overflow { display: none; }
.prose .dl-items.is-expanded .dl-item--overflow { display: block; }
.prose .dl-item > a {
  display: flex; align-items: center; gap: 12px; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.prose .dl-item > a:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 8px 20px rgba(10, 61, 102, .08); }
.prose .dl-item__icon { flex: none; display: flex; }
.dl-more {
  display: block; margin: 16px auto 4px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--blue); color: var(--blue);
  border-radius: 999px; padding: 9px 26px;
  font-family: var(--body); font-size: 13.5px; font-weight: 650;
  transition: background .15s ease, color .15s ease;
}
.dl-more:hover { background: var(--blue); color: #fff; }
@media (max-width: 900px) {
  .prose .dl-items { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prose .dl-grid { grid-template-columns: 1fr; }
}

/* ── Preloader: bank logo while the page loads ───────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--navy-800);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader img {
  width: 96px; height: 96px; border-radius: 20px; object-fit: contain;
  animation: npPulse 1.6s ease-in-out infinite;
}
.preloader__bar { width: 180px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.preloader__bar i { display: block; width: 40%; height: 100%; background: var(--green-mint); animation: npSlide 1.2s ease-in-out infinite; }
@keyframes npPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .75; } }
@keyframes npSlide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

/* ── Promotional popup ──────────────────────────────────────────────────
 * Sized by the image, not by the container — per feedback the box must
 * grow and shrink with whatever artwork is uploaded.
 * -------------------------------------------------------------------- */
.promo-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(6, 38, 64, .72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.promo-modal.is-open { opacity: 1; visibility: visible; }

/* ── Financial Position balance sheet ───────────────────────────────── */
.fintable { background: #fff; }
.fintable__caption {
  caption-side: top; background: var(--navy-700); color: #fff;
  padding: 16px 20px; font-weight: 700; text-align: left;
  border-radius: 14px 14px 0 0;
}
.fintable__caption-inner {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.fintable__caption small { display: block; font-weight: 500; font-size: 12.5px; opacity: .85; }
.fintable__units { font-weight: 500; font-size: 12.5px; opacity: .85; white-space: nowrap; }
.fintable__total td { font-weight: 750; color: var(--ink); background: var(--surface-alt); }
@media (max-width: 640px) {
  .fintable__caption-inner { flex-direction: column; gap: 4px; }
}

/* ── Justified body copy + highlighted callout (Careers, 24 Aug) ─────── */
.prose p.is-justified { text-align: justify; text-justify: inter-word; hyphens: auto; }
.prose p.notice-callout {
  position: relative; margin-top: 28px;
  background: var(--green-tint); border-left: 4px solid var(--green);
  border-radius: 0 14px 14px 0; padding: 20px 24px;
  font-weight: 650; color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.prose p.notice-callout:hover {
  transform: translateY(-2px); box-shadow: 0 14px 30px rgba(46, 139, 87, .16);
}
/* Justification opens ugly rivers in narrow columns — fall back to ragged
   right on phones, where the measure is only ~40 characters. */
@media (max-width: 640px) {
  .prose p.is-justified { text-align: left; }
}

/* ── "You are leaving this website" interstitial ─────────────────────── */
.exit-modal {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(6, 38, 64, .72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.exit-modal.is-open { opacity: 1; visibility: visible; }
.exit-modal__box {
  background: #fff; border-radius: 20px; padding: 34px 34px 28px;
  max-width: 520px; width: 100%; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.exit-modal__icon {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--blue-tint); display: flex; align-items: center; justify-content: center;
}
.exit-modal__title { font-size: 22px; line-height: 1.3; margin: 0 0 12px; color: var(--ink); }
.exit-modal__body { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.6; }
.exit-modal__url {
  font-size: 13.5px; font-weight: 650; color: var(--blue);
  background: var(--surface-alt); border-radius: 10px; padding: 10px 14px;
  margin: 0 0 22px; word-break: break-all;
}
.exit-modal__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.exit-modal__actions .btn { padding: 12px 26px; font-size: 14.5px; }
.promo-modal__box { position: relative; display: inline-block; max-width: 100%; }
.promo-modal__box img {
  display: block; width: auto; height: auto;
  max-width: min(92vw, 900px); max-height: 84vh;
  border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.promo-modal__close {
  position: absolute; top: -14px; right: -14px;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.promo-modal__close:hover { background: var(--blue); color: #fff; }

/* ── Top strip: skip link + accessibility menu ───────────────────────── */
.topstrip__link { background: none; border: 0; cursor: pointer; font: inherit; }
.a11y { position: relative; z-index: 1400; }
.a11y__toggle {
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: #4B1979; color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.a11y__toggle:hover { background: #6A28A8; }
.a11y__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1400;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 44px rgba(10, 61, 102, .22);
  padding: 16px; width: 232px; display: none; text-align: left;
}
.a11y__panel.is-open { display: block; animation: npFadeDown .2s ease both; }
.a11y__group + .a11y__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.a11y__label {
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.a11y__row { display: flex; gap: 6px; }
.a11y__btn {
  flex: 1; border: 1px solid var(--line); background: var(--surface-alt);
  border-radius: 8px; padding: 7px 4px; cursor: pointer;
  font-family: var(--body); font-weight: 700; color: var(--ink); font-size: 13px;
}
.a11y__btn:hover, .a11y__btn.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 20 Aug Iteration doc: hide English/Tamil until Tamil content is ready;
 * drop this class to unhide. */
.topstrip__lang--hidden { display: none; }
/* "Add some hover effect for the Numbers added in the top strip." */
.topstrip__right a[href^="tel:"] { transition: color .15s ease; }
.topstrip__right a[href^="tel:"]:hover { color: var(--green-mint); text-decoration: underline; }

/* ── NetBanking Retail/Corporate choice ──────────────────────────────── */
.netbanking-menu { position: relative; z-index: 1300; }
.netbanking-menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1300;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 44px rgba(10, 61, 102, .22);
  padding: 8px; width: 260px; display: none; text-align: left;
}
.netbanking-menu__panel.is-open { display: block; animation: npFadeDown .2s ease both; }
.netbanking-menu__panel a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 8px; color: var(--ink);
}
.netbanking-menu__panel a:hover { background: var(--surface-alt); }
.netbanking-menu__panel strong { display: block; font-size: 14px; }
.netbanking-menu__panel small { display: block; font-size: 12px; color: var(--ink-soft); }

/* Text-size steps set by the accessibility widget.
   Most type in this sheet is an explicit px size, so bumping body font-size
   alone does not move headings or nav. `zoom` scales the whole page. */
html[data-text-size="large"] { zoom: 1.15; }
html[data-text-size="larger"] { zoom: 1.3; }
html[data-text-size="large"] body { font-size: 17.6px; }
html[data-text-size="larger"] body { font-size: 19.2px; }

/* ── Search box in the nav bar ──────────────────────────────────────── */
.searchbar__field {
  flex: 1; display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 15px 22px; background: var(--surface-alt);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.searchbar__field:focus-within {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 114, 198, .12);
}
.searchbar__field input { font-size: 17px; font-weight: 500; }
/* The wrapper already announces focus with a blue border and a 4px ring, so
   the site-wide input:focus-visible outline drew a second ring inside it.
   Dropping it here removes the duplicate, not the focus indicator: the field
   is still clearly focused, which is what the global rule exists to guarantee. */
.searchbar__field input:focus,
.searchbar__field input:focus-visible { outline: none; }
.searchbar__field input::placeholder { color: var(--ink-faint); opacity: 1; transition: opacity .3s ease; }
.searchbar__field.is-swapping input::placeholder { opacity: 0; }
.searchbar__submit {
  border: 0; background: var(--blue); color: #fff; cursor: pointer;
  border-radius: 12px; padding: 15px 30px; font-family: var(--body);
  font-size: 15px; font-weight: 650; flex: none;
  transition: background .15s ease;
}
.searchbar__submit:hover { background: var(--blue-dark); }

/* Trending-search chips, shown while the search bar is expanded. */
.searchbar__trending {
  max-width: 900px; margin: 0 auto; padding: 18px 56px 26px;
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.searchbar__trending-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); flex: none; padding-top: 8px;
}
.searchbar__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.searchbar__chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 7px 16px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.searchbar__chip:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── Full-bleed hero video + marquee ─────────────────────────────────── */
.hero--video { height: auto; }
.hero__stage { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 420px; overflow: hidden; }
.hero__stage iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none;
}
/* Cover-crop the 16:9 embed so it fills the wider stage with no letterbox. */
.hero__stage--cover iframe {
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.77vh;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
/* Banner-image alternative to the video: object-fit does the same cover-crop
   job natively here, so it doesn't need the iframe's vw/vh sizing hack. */
.hero__stage .hero__banner {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  object-fit: cover; object-position: center;
}
.ticker { height: 52px; }
.ticker__tag { font-size: 12px; padding: 0 26px; }

/* ── Count-up stats ─────────────────────────────────────────────────── */
.stat__value .count { font-variant-numeric: tabular-nums; }

/* ── Back to top ────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: 26px; bottom: 132px; z-index: 179;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(10, 61, 102, .35);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease;
}
.is-railed .to-top { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue); }

/* Feedback: the FD-rates rail was clipped — give it a wider tab and keep it
   clear of the viewport edge. */
.rails__fd { padding: 20px 20px; border-radius: 14px 0 0 14px; }
.rails__fd span { font-size: 12.5px; }

/* ── Footer DICGC badge ─────────────────────────────────────────────── */
.footer__dicgc {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: #fff; border-radius: 16px; padding: 16px 18px 14px;
  justify-self: center; min-width: 168px;
}
.footer__dicgc-qr { display: block; line-height: 0; }
.footer__dicgc-qr img { width: 132px; height: 132px; display: block; }
.footer__dicgc-copy { text-align: center; }
.footer__dicgc-copy strong {
  display: block; font-size: 14px; font-weight: 700; color: #0B5C3B; letter-spacing: .04em;
}
.footer__dicgc-copy span { display: block; font-size: 11.5px; font-weight: 600; color: #4A5B55; line-height: 1.4; margin-top: 2px; }

/* ── Pill tab bar (deposits / loan variants) ─────────────────────────── */
.pilltabs {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  background: var(--navy-700); border-radius: 999px; padding: 8px;
  margin: 0 auto 44px; width: fit-content; max-width: 100%;
}
.pilltabs button {
  border: 0; cursor: pointer; background: transparent; color: rgba(255, 255, 255, .82);
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 12px 26px; border-radius: 999px; white-space: nowrap;
}
.pilltabs button:hover { color: #fff; }

/* Management's seven tabs ("Managing Directors of the Bank" and friends) are
   far longer than the deposit/loan tab sets, and wrapped onto a second row.
   Tighten them onto one line, and below ~1200px let the row scroll sideways
   rather than wrap — a single line was the explicit ask. */
.pilltabs--compact { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.pilltabs--compact::-webkit-scrollbar { display: none; }
.pilltabs--compact button { font-size: 13.5px; padding: 11px 16px; }
@media (min-width: 1200px) {
  .pilltabs--compact { justify-content: center; overflow-x: visible; }
}
.pilltabs button[aria-selected="true"] { background: #fff; color: var(--ink); }

.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: npFadeDown .25s ease both; }
.tabpanel__head { text-align: center; max-width: 60ch; margin: 0 auto 48px; }
.tabpanel__head h3 { font-size: 34px; color: var(--ink); margin: 0 0 12px; }
.tabpanel__head p { font-size: 16.5px; color: var(--ink-muted); line-height: 1.65; margin: 0; }

/* 09 Sep feedback: "make all the five highlights display in a single line"
   (loan pages) and the same for FD / RD / CC. repeat(4,1fr) pushed a fifth
   item onto its own row; auto-flow:column fits whatever the count is. */
.highlights { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 20px; }
.highlight { text-align: center; }
.highlight__icon {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--blue-tint); display: flex; align-items: center; justify-content: center;
}
.highlight--green .highlight__icon { background: var(--green-tint); }
.highlight--gold .highlight__icon { background: var(--gold-tint); }
.highlight p { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.55; margin: 0; }

/* ── Vertical tab explainer ("Know more about …") ────────────────────── */
.knowmore { background: var(--surface-alt); padding: 90px var(--gutter); }
.knowmore h2 { font-size: 40px; text-align: center; color: var(--ink); margin: 0 0 44px; }
.knowmore__grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }
.knowmore__tabs { display: flex; flex-direction: column; gap: 12px; }
.knowmore__tab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; cursor: pointer; text-align: left;
  font-family: var(--body); font-size: 15.5px; font-weight: 600; color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.knowmore__tab:hover { border-color: var(--blue); }
.knowmore__tab[aria-selected="true"] { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.knowmore__panel {
  background: linear-gradient(135deg, #0A3D66, #06263F);
  border-radius: 16px; padding: 38px 42px; color: #fff; min-height: 100%;
}
.knowmore__panel h3 { font-size: 24px; color: #fff; margin: 0 0 8px; }
.knowmore__panel hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .18); margin: 0 0 22px; }
.knowmore__list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.knowmore__list li {
  display: flex; gap: 12px; font-size: 15.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
.knowmore__list svg { flex: none; margin-top: 3px; }
/* Global `a` is navy (`--ink`), which disappears on this panel. */
.knowmore__panel a {
  color: #FFD54A;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 650;
}
.knowmore__panel a:hover,
.knowmore__panel a:focus-visible { color: #fff; }
.page-hero a,
.page-hero--banner a {
  color: #FFD54A;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-hero a:hover,
.page-hero--banner a:hover { color: #fff; }

/* ── Scroll-reveal (20 Aug feedback) ──────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* NOTE: this block must stay below [data-reveal].is-visible above — that rule
   also sets `transform` at the same specificity, so whichever comes last
   wins, and the card lift is silently dropped if these move back up. */
/* ── Product card hover ────────────────────────────────────────────────
   The cards had no hover state, so nothing in the row read as reachable.
   Lift, deepen the shadow in the card's own hue, grow the orb and nudge
   the arrow. :focus-within mirrors it so keyboard users get the same cue,
   and the carousel already pauses its auto-advance on hover/focus, so the
   card being invited to is not about to slide away. */
.pcard {
  transition:
    transform .32s cubic-bezier(.22, .61, .36, 1),
    box-shadow .32s ease,
    border-color .32s ease;
}
.pcard__orb {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), background .32s ease;
}
.pcard__cta svg,
.pcard__link svg { transition: transform .28s cubic-bezier(.22, .61, .36, 1); }

.pcard:hover,
.pcard:focus-within { transform: translateY(-6px); }

.pcard:hover .pcard__orb,
.pcard:focus-within .pcard__orb { transform: scale(1.28); }

.pcard:hover .pcard__cta svg,
.pcard:focus-within .pcard__cta svg,
.pcard:hover .pcard__link svg,
.pcard:focus-within .pcard__link svg { transform: translateX(4px); }

/* Shadow takes the card's own colour so the lift reads as depth, not grime. */
.pcard--hero:hover,
.pcard--hero:focus-within { box-shadow: 0 22px 48px rgba(7, 144, 246, .34); }
.pcard--green:hover,
.pcard--green:focus-within { box-shadow: 0 22px 48px rgba(46, 139, 87, .34); }
.pcard--navy:hover,
.pcard--navy:focus-within { box-shadow: 0 22px 48px rgba(10, 32, 50, .38); }
.pcard--plain:hover,
.pcard--plain:focus-within {
  border-color: var(--blue);
  box-shadow: 0 20px 42px rgba(10, 61, 102, .14);
}

.pcard--hero:hover .pcard__orb,
.pcard--hero:focus-within .pcard__orb { background: rgba(255, 255, 255, .14); }
.pcard--green:hover .pcard__orb,
.pcard--green:focus-within .pcard__orb { background: rgba(255, 255, 255, .13); }
.pcard--navy:hover .pcard__orb,
.pcard--navy:focus-within .pcard__orb { background: rgba(255, 255, 255, .1); }

/* The white card has no orb, so give it a tint shift to match the others. */
.pcard--plain .pcard__kicker { transition: letter-spacing .32s ease; }
.pcard--plain:hover .pcard__kicker,
.pcard--plain:focus-within .pcard__kicker { letter-spacing: .145em; }

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__orb, .pcard__cta svg, .pcard__link svg,
  .pcard--plain .pcard__kicker { transition: none; }
  .pcard:hover, .pcard:focus-within { transform: none; }
  .pcard:hover .pcard__orb, .pcard:focus-within .pcard__orb { transform: none; }
  .pcard:hover .pcard__cta svg, .pcard:hover .pcard__link svg { transform: none; }
  .pcard--plain:hover .pcard__kicker { letter-spacing: .12em; }
}

/* ── Deposit / EMI calculator ─────────────────────────────────────────
 * 20 Aug Iteration doc: "put that part in a Box with a solid Background
 * with gradient" + "Add a transition to this part" (reference:
 * icici.bank.in's FD calculator). */
.calc__box {
  background: linear-gradient(135deg, var(--blue-tint), #fff 65%);
  border-radius: 24px; padding: 32px;
  box-shadow: 0 10px 30px rgba(10, 61, 102, .07);
  transition: box-shadow .25s ease, transform .25s ease;
}
.calc__box:hover { box-shadow: 0 20px 44px rgba(10, 61, 102, .13); transform: translateY(-2px); }
.calc { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }
.calc__form {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.calc__field { display: flex; flex-direction: column; gap: 8px; }
.calc__field label { font-size: 13px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.calc__field input, .calc__field select {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-family: var(--body); font-size: 16px; color: var(--ink); background: #fff;
}
.calc__field input:focus, .calc__field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.calc__result {
  background: linear-gradient(150deg, #2E8B57, #1F6B44); color: #fff;
  border-radius: 18px; padding: 32px;
}
.calc__result dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.calc__result dd { font-family: var(--display); font-size: 34px; font-weight: 650; margin: 6px 0 22px; letter-spacing: -.02em; }
.calc__result dd:last-child { margin-bottom: 0; }
.calc__note { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; }

/* ── Rate table ─────────────────────────────────────────────────────── */
.ratetable { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
.ratetable th, .ratetable td { padding: 15px 20px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line); }
.ratetable th { background: var(--navy-700); color: #fff; font-weight: 650; }
.ratetable tbody tr:nth-child(even) { background: var(--surface-soft); }
.ratetable td strong { color: var(--green); }

/* ── Feature list used on account pages ─────────────────────────────── */
.ticklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.ticklist li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.ticklist svg { flex: none; margin-top: 3px; }
.quote {
  font-family: var(--display); font-size: 22px; font-weight: 650; color: var(--green);
  margin: 0 0 12px; letter-spacing: -.01em;
}

/* ── Home posts slider (text-only or text + image) ───────────────────── */
.postslider { position: relative; overflow: hidden; }
.postslider__track { display: flex; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.postslider__slide { flex: 0 0 100%; }
.postslider__dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.postslider__dots button {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #C6D6E4;
}
.postslider__dots button[aria-current="true"] { background: var(--blue); width: 26px; border-radius: 999px; }

/* Hamburger — hidden on desktop, revealed at the 900px breakpoint below. */
.navbar__toggle {
  display: none; align-items: center; gap: 10px;
  border: 0; background: var(--surface-alt); cursor: pointer;
  border-radius: 10px; padding: 9px 14px; margin-right: auto;
  font-family: var(--body); font-size: 14.5px; font-weight: 650; color: var(--ink);
}
.navbar__toggle:hover { background: #E4EDF5; }

/* =========================================================================
 * Responsive
 * ====================================================================== */

@media (max-width: 1280px) {
  :root { --gutter: 48px; }
  .hero h1 { font-size: 54px; }
  .masthead { padding: 0 32px; }
  .topstrip, .navbar__inner { padding-left: 32px; padding-right: 32px; }
  .navbar__brand { left: 32px; }
  .navbar__search { right: 32px; }
  /* The full bilingual name starts to crowd the centered nav items below
     this width — drop to the short "TNSC Bank" label instead of hiding it. */
  .navbar__brand-text { display: none; }
  .navbar__brand-short { display: block; }
  .mega__grid { grid-template-columns: 1fr 1fr 1fr 280px; padding: 32px 32px 36px; gap: 24px; }
  .contacts { gap: 16px; padding-right: 18px; }
  .pcard--hero { width: 480px; }
}

@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  /* The three masthead phone blocks don't fit — keep the toll-free number only. */
  .contact:not(:first-child) { display: none; }
  .section__head h2 { font-size: 38px; }
  .section__bar h2, .safety h2, .knowmore h2 { font-size: 32px; }
  .media-grid { grid-template-columns: 1fr; gap: 44px; }
  .calc { grid-template-columns: 1fr; }
  .highlights { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .footer__info { grid-template-columns: 1fr; gap: 32px; }
  .rails__social, .rails__fd { display: none; }
  /* Even the short label starts to crowd the nav items below this width
     (confirmed at 901px) — drop back to logo-only. */
  .navbar__brand-short { display: none; }
}

@media (max-width: 900px) {
  .topstrip { height: auto; padding: 8px 20px; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; }
  .topstrip__left { display: none; }
  .topstrip__right { width: 100%; justify-content: flex-start; gap: 14px; flex-wrap: wrap; }
  .masthead { height: auto; padding: 14px 20px; gap: 12px; align-items: center; }
  /* The brand block is flex:none on desktop; let it shrink and wrap here. */
  .brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .brand__mark { width: 44px; height: 44px; }
  .brand__ta { font-size: 11.5px; line-height: 1.35; }
  .brand__en { font-size: 13.5px; line-height: 1.3; }
  .masthead__actions { gap: 12px; }

  /* Tab bars scroll rather than clip when the labels don't fit. */
  .pilltabs {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    width: 100%; border-radius: 16px; scrollbar-width: none;
  }
  .pilltabs::-webkit-scrollbar { display: none; }
  .pilltabs button { flex: none; }
  .contacts { display: none; }
  .navbar__inner { padding: 0 20px; }

  /* Nav collapses to a disclosure list; mega menus become plain link groups. */
  .navbar__toggle { display: flex; }
  .navbar__items {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    box-shadow: 0 24px 44px rgba(10, 61, 102, .16);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .is-nav-open .navbar__items { max-height: 80vh; overflow-y: auto; }
  .navbar__link { border-radius: 0; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); justify-content: space-between; }
  .navbar__brand { display: none; }
  .navbar__search { position: static; transform: none; margin-left: auto; }
  /* The panel is a static, in-flow sibling inside the sticky .navbar, so an
     unconstrained panel inflates the sticky box itself (see commit that
     added .mega__close) -- capping it here, the same way .navbar__items
     already caps itself, keeps it independently scrollable and gives
     .mega__close a real scroll container to stick within. */
  .mega { position: static; box-shadow: none; border-top: 0; max-height: 80vh; overflow-y: auto; }
  .mega__grid { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .mega__close {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 16px 20px;
    border: 0; border-bottom: 1px solid var(--line-soft);
    background: var(--surface); cursor: pointer;
    font-family: var(--body); font-size: 14px; font-weight: 650; color: var(--ink);
    position: sticky; top: 0; z-index: 1;
  }
  .promo, .promo__image, .promo__dark { display: none; }

  .hero__stage { aspect-ratio: 16 / 10; min-height: 300px; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 17px; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .stat { border-right: 0; }
  .stat:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .stat__value { font-size: 42px; }
  .rails-grid { grid-template-columns: 1fr 1fr; }
  .link-cards, .fact-cards { grid-template-columns: 1fr; }
  .explore { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .explore__media { height: 240px; order: -1; }
  .safety__grid { grid-template-columns: 1fr 1fr; }
  .knowmore__grid { grid-template-columns: 1fr; }
  .calc__form { grid-template-columns: 1fr; }
  .ticklist { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 34px; }
  .section, .section--wide, .knowmore { padding: 56px var(--gutter); }
  .pcard--hero { width: 300px; padding: 32px; }
  .pcard { width: 280px; padding: 30px; }
  .pcard h3 { font-size: 22px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 15.5px; }
  .topstrip__right { font-size: 11.5px; gap: 10px; }
  .topstrip__locator span, .topstrip__right > a[href^="tel"] { white-space: nowrap; }
  .masthead__actions .btn--primary { padding: 10px 18px; font-size: 14px; }
  .brand__meta { display: none; }
  .hero h1 { font-size: 32px; }
  .hero__pill span { font-size: 10.5px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: 0 !important; border-bottom: 1px solid var(--line-soft); padding-bottom: 24px; }
  .stat:last-child { border-bottom: 0; }
  .rails-grid, .safety__grid, .highlights { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 0; padding: 8px 0 16px; }
  .footer__col { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .footer__details > .footer__heading {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; margin: 0;
  }
  .footer__details > .footer__heading::after {
    content: ""; width: 8px; height: 8px; border-right: 1.5px solid rgba(255, 255, 255, .55);
    border-bottom: 1.5px solid rgba(255, 255, 255, .55); transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .footer__details[open] > .footer__heading::after { transform: rotate(-135deg); }
  .footer__details .footer__links { padding: 0 0 16px; }
  .footer__base { flex-direction: column; align-items: flex-start; }
  .footer__credit { margin-left: 0; }
  .section__head h2 { font-size: 30px; }
  .section__bar { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tabpanel__head h3 { font-size: 26px; }
  .pilltabs { border-radius: 18px; }
  .pilltabs button { padding: 10px 16px; font-size: 14px; }
  /* Collapse the "Chat with us" pill to an icon-only FAB below 640px: at
     this width the fixed-position widget's footprint (previously ~140px
     wide) can land squarely on top of in-flow tappable content that
     happens to render near the bottom of the first viewport (e.g. the
     trailing .pilltabs button on /deposits/ and /jewel-loan/) -- there's
     no `bottom` offset that clears it, since that content can sit within
     ~30px of the true viewport edge, so full vertical separation isn't
     achievable without colliding with content further up the page (or
     with .to-top once it appears on scroll). Instead this narrows the fab
     enough for full *horizontal* separation from the widest measured
     trailing tab (Deposits' "Tax Benefit Deposit", right edge ~356px):
     right:6px + width:24px puts the fab's left edge at 360px, a ~4px
     clearance. 24px is the WCAG 2.5.8 AA minimum target size -- the
     smallest this can go while the fab stays a legitimate tap target;
     the icon is downsized to match so it doesn't crowd the circle. The
     label stays in the DOM (visually hidden, not display:none) so the
     link keeps an accessible name for screen readers. */
  .chat-fab {
    right: 6px; bottom: 16px; width: 44px; height: 44px;
    padding: 0; gap: 0; justify-content: center;
  }
  .chat-fab .icon { width: 20px; height: 20px; }
  .chat-fab__mascot { height: 36px; margin: 0; }
  .chat-fab__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
  }
  .to-top { right: 16px; bottom: 76px; }
  .video-poster, .video-frame { height: 240px; }
  .searchbar__submit { display: none; }
  .knowmore__panel { padding: 26px 22px; }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus for keyboard users across every interactive element. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link becomes visible when focused. */
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 10000;
  width: auto; height: auto; clip: auto; clip-path: none;
  background: #fff; color: var(--ink); padding: 12px 20px;
  border-radius: 10px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(10, 61, 102, .3);
}

/* ── Product card tagline (444-day FD scheme) ───────────────────────── */
.pcard__tagline {
  font-size: 13.5px !important; font-style: italic;
  color: rgba(255, 255, 255, .8); margin: 0 0 14px !important; max-width: 260px;
}

/* ── 444-day FD card: term + the two rates side by side ─────────────────
   10 Sep feedback supplied artwork showing both the senior-citizen and the
   normal-citizen rate. The pair wraps to one column under 380px so the
   figures never shrink below the card's other type. */
.pcard__term {
  font-family: var(--display); font-size: 30px; font-weight: 600; color: #fff;
  letter-spacing: -.02em; line-height: 1; margin-bottom: 6px;
}
.pcard__rates { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 22px; }
.pcard__rate-col { min-width: 116px; }
.pcard__rates .pcard__rate { font-size: 40px; }
.pcard__star { font-size: 18px; color: #FBE14B; vertical-align: super; margin-left: 1px; }
.pcard__rate-for {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .72); margin-top: 4px;
}
@media (max-width: 380px) {
  .pcard__rates { gap: 12px; }
  .pcard__rate-col { min-width: 100%; }
}

/* ── Secondary video strip ──────────────────────────────────────────── */
.video-strip {
  display: flex; align-items: center; gap: 14px; width: 100%; cursor: pointer;
  margin-top: 18px; padding: 14px 18px; text-align: left;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px;
  font-family: var(--body); transition: border-color .2s ease;
}
.video-strip:hover { border-color: var(--blue); }
.video-strip__play {
  width: 40px; height: 40px; border-radius: 50%; background: var(--green); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.video-strip__title { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.video-strip__note { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

/* ── Auto-sliding announcement cards ────────────────────────────────── */
.postcard {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; min-height: 280px;
}
.postcard--media { display: grid; grid-template-columns: 44% 1fr; }
.postcard--text { display: flex; align-items: center; }
.postcard__media { position: relative; min-height: 280px; }
.postcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.postcard__body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.postcard--text .postcard__body { max-width: 70ch; }
.postcard__date {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px;
}
.postcard h3 { font-size: 26px; color: var(--ink); margin: 0 0 12px; line-height: 1.25; }
.postcard p { font-size: 15.5px; color: var(--ink-muted); line-height: 1.7; margin: 0 0 18px; }

@media (max-width: 900px) {
  .postcard--media { grid-template-columns: 1fr; }
  .postcard__media { min-height: 200px; height: 200px; }
  .postcard__body { padding: 28px 24px; }
  .postcard h3 { font-size: 21px; }
}

/* Small phones: the bilingual bank name was wrapping to four lines beside
   the Net Banking button. Tighten both so the name settles onto two. */
@media (max-width: 560px) {
  .brand__mark { width: 38px; height: 38px; }
  .brand__ta { font-size: 10px; }
  .brand__en { font-size: 12px; }
  .brand__meta { display: none; }
  .netbanking-menu .btn { padding: 10px 15px; font-size: 13px; }
  .netbanking-menu__panel { width: min(260px, calc(100vw - 32px)); }
}

/* ── 09 Sep feedback follow-ups ─────────────────────────────────────── */

/* Five stats (120 / 51 / 24 / 4,580 / ₹12,000) need a little less air than
   four did before the row starts to feel crowded at laptop widths. */
@media (max-width: 1180px) {
  .stat__value { font-size: 44px; }
}

/* The single-line highlights row has to give up and wrap on small screens —
   five columns of body copy is unreadable below tablet. */
@media (max-width: 900px) {
  .highlights { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .highlights { grid-template-columns: 1fr; }
}

/* Masthead now carries three numbers; tighten so it still clears the nav. */
@media (max-width: 1280px) {
  .contacts { gap: 16px; padding-right: 18px; }
}

/* ── Announcements & Updates: vertical auto-scroll ──────────────────────
   09 Sep feedback: five notices in the list, three visible, scrolling on
   their own. Each card is a fixed height so "three visible" is exact
   regardless of headline length, and the track is duplicated so -50%
   lands cleanly on the second pass. */
.notices__viewport { overflow: hidden; }
.notices__viewport.is-scrolling {
  height: 282px;                                   /* 3 x 82px + 2 x 12px gap */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}
.notices__track { display: flex; flex-direction: column; gap: 12px; }
.notices__viewport.is-scrolling .notices__track {
  animation: npNotices 20s linear infinite;
}
.notices__viewport.is-scrolling .notice {
  height: 82px; flex: none; display: flex; flex-direction: column; justify-content: center;
}
.notices__viewport.is-scrolling .notice__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notices__viewport:hover .notices__track,
.notices__viewport:focus-within .notices__track { animation-play-state: paused; }
@keyframes npNotices {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-50% - 6px), 0); }  /* half the track + half a gap */
}
@media (prefers-reduced-motion: reduce) {
  .notices__viewport.is-scrolling { height: auto; -webkit-mask-image: none; mask-image: none; }
  .notices__viewport.is-scrolling .notices__track { animation: none; }
}

/* ── Digital Services tiles (Services page) ────────────────────────────
   09 Sep feedback: "Each Tile With the Digital Service Name, Related Vector
   Image and a Hover Effect (Zoom In)." The zoom is on the artwork inside a
   fixed-size tile, so neighbouring tiles never shift on hover. */
.dsgroup { margin-bottom: 52px; }
.dsgroup:last-child { margin-bottom: 0; }
.dsgroup__head { margin-bottom: 20px; }

.dstiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.dstile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; min-height: 148px; padding: 24px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  color: var(--ink); text-decoration: none; overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.dstile:hover, .dstile:focus-visible {
  border-color: var(--blue); transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(10, 61, 102, .12);
}
.dstile__art {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: var(--blue-tint); color: var(--blue);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.dstile--green .dstile__art { background: var(--green-tint); color: var(--green); }
.dstile--gold  .dstile__art { background: var(--gold-tint);  color: var(--gold); }
.dstile:hover .dstile__art,
.dstile:focus-visible .dstile__art { transform: scale(1.16); }
.dstile__logo { max-width: 40px; max-height: 30px; width: auto; height: auto; object-fit: contain; }
.dstile__label { font-size: 14px; font-weight: 600; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .dstile, .dstile__art { transition: none; }
  .dstile:hover { transform: none; }
  .dstile:hover .dstile__art { transform: none; }
}
@media (max-width: 1024px) { .dstiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .dstiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .dstiles { grid-template-columns: 1fr; } }

/* ── "Chat with us" assistant ──────────────────────────────────────────
   09 Sep feedback: the chat button opens a box of preloaded options. Sits
   just above the FAB and shares its right edge. */
.chat {
  position: fixed; right: 26px; bottom: 128px; z-index: 181;
  width: min(376px, calc(100vw - 32px));
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
.chat.is-open { opacity: 1; transform: translateY(0) scale(1); }
.chat__panel {
  display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 150px));
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 61, 102, .26);
}
.chat__head {
  display: flex; align-items: center; gap: 11px; flex: none;
  padding: 14px 16px; background: var(--navy-700); color: #fff;
}
.chat__avatar {
  /* 42px so the larger Chitu artwork sits inside the badge rather than
     overflowing it (10 Sep feedback). */
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .16); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.chat__name { display: block; font-size: 14.5px; font-weight: 700; }
.chat__status { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .72); }
.chat__close {
  margin-left: auto; border: 0; background: transparent; color: #fff;
  cursor: pointer; padding: 4px; border-radius: 8px; display: flex;
}
.chat__close:hover { background: rgba(255, 255, 255, .16); }

.chat__body { padding: 16px; overflow-y: auto; flex: 1; }
.chat__body:focus { outline: none; }
.chat__bubble {
  background: var(--surface-alt); border-radius: 4px 14px 14px 14px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
.chat__bubble--answer { margin-top: 8px; }
.chat__bubble p { margin: 0 0 9px; }
.chat__bubble p:last-child { margin-bottom: 0; }
.chat__bubble ol { margin: 0 0 4px; padding-left: 18px; }
.chat__bubble li { margin-bottom: 5px; }
.chat__bubble a { color: var(--blue); text-decoration: underline; }
.chat__path {
  font-weight: 600; color: var(--navy-700); background: #fff;
  border: 1px dashed var(--line); border-radius: 10px; padding: 9px 11px;
}
.chat__question {
  margin-left: auto; width: fit-content; max-width: 85%;
  background: var(--blue); color: #fff; font-size: 13px; font-weight: 600;
  border-radius: 14px 4px 14px 14px; padding: 9px 13px;
}
.chat__bubble a.chat__cta,
.chat__cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 11px;
  /* the bubble underlines inline links; the CTA is a button, so opt out */
  background: var(--green); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 100px;
}
.chat__cta:hover { background: var(--green-dark); color: #fff; }

.chat__options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chat__option {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  color: var(--navy-700); font-family: var(--body); font-size: 12.5px; font-weight: 600;
  padding: 8px 13px; transition: border-color .16s ease, background .16s ease;
}
.chat__option:hover { border-color: var(--blue); background: var(--blue-tint); }

.chat__ask { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); flex: none; }
.chat__ask input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 100px;
  padding: 10px 15px; font-family: var(--body); font-size: 13.5px; color: var(--ink);
}
.chat__ask input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 114, 198, .14); }
.chat__ask button {
  flex: none; width: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
}
.chat__ask button:hover { background: var(--navy-700); }
.chat__reset {
  display: flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  width: 100%; border: 0; border-top: 1px solid var(--line); cursor: pointer;
  background: #fff; color: var(--blue); font-family: var(--body);
  font-size: 12.5px; font-weight: 600; padding: 11px;
}
.chat__reset:hover { background: var(--surface-alt); }

.chat-fab { border: 0; cursor: pointer; font-family: var(--body); }

@media (prefers-reduced-motion: reduce) { .chat { transition: none; } }
@media (max-width: 560px) {
  .chat { right: 16px; left: 16px; width: auto; bottom: 120px; }
}

/* ── Awards & Accolades (About page) ───────────────────────────────────
   09 Sep feedback: grouped per awarding body, newest first, five rows
   shown and the rest revealed by "Read more". Moved out of the narrow
   two-card grid, which was wrapping every cell. */
.awardset { margin-bottom: 44px; }
.awardset:last-child { margin-bottom: 0; }
.awardset__title { font-size: 19px; color: var(--navy-700); margin: 0 0 14px; }
.awardtable__overflow { display: none; }
.awardtable.is-expanded .awardtable__overflow { display: table-row; }
.awardset__more { margin-top: 16px; }

/* `.chat__reset` / `.chat__options` set display:flex, which outranks the UA's
   [hidden]{display:none} — without this the "Back to all topics" button and
   the option list stay visible while hidden. */
.chat [hidden] { display: none !important; }

/* ── Interior page banners ─────────────────────────────────────────────
   Artwork supplied Sep 2026 ("Inner Banner"). Each banner has a flat
   colour field on the left and imagery on the right, so the image is
   anchored right and the copy sits over the flat side. The scrim is
   left-weighted: the set mixes navy and bright blue, and the white
   heading has to hold contrast over both. */
.page-hero--banner {
  position: relative;
  background-color: #06263F;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  /* Height follows the artwork's own ratio (set inline per page), clamped so
     a thin strip still has room for the heading and a tall one never takes
     over the screen. The set ranges 3.40 -> 1.69, so one fixed height would
     crop the tall banners straight through the subjects. */
  --banner-ratio: 3.4;
  height: clamp(320px, calc(100vw / var(--banner-ratio)), 470px);
  display: flex;
  align-items: center;
}
.page-hero--banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 38, 64, .92) 0%, rgba(6, 38, 64, .84) 26%, rgba(6, 38, 64, .5) 44%, rgba(6, 38, 64, 0) 62%);
}
/* The hero is a flex container, so .shell shrinks to its content and its
   `margin:0 auto` then centres it — width:100% keeps it spanning, leaving
   the copy left-aligned against the gutter as on every other page. */
.page-hero--banner .shell { position: relative; z-index: 2; width: 100%; }
/* Hold the copy on the artwork's flat colour field — the narrowest of the
   set runs to about 42% — so headlines never sit across a subject's face. */
.page-hero--banner h1,
.page-hero--banner p { max-width: 520px; text-shadow: 0 1px 14px rgba(3, 22, 38, .45); }
.page-hero--banner h1 { font-size: 40px; }

/* Below ~900px the artwork used to be hidden outright here, since
   cover-cropping it into a phone-width box lost the subject. 15 Sep: it is
   shown as a strip instead — see the phone layout pass at the end of this
   file, which is where the background rules for that live. */
@media (max-width: 900px) {
  .page-hero--banner::before { display: none; }
  .page-hero--banner h1,
  .page-hero--banner p { max-width: none; text-shadow: none; }
}

/* Chitu, the chat mascot. Sized by height and nudged up a touch — the
   artwork's feet sit on its own baseline, so centring on the box makes it
   read low inside the round badge. */
.chat-fab__mascot {
  width: auto; height: 46px; display: block; margin: -3px 0;
  transform-origin: 50% 90%;
  /* 10 Sep feedback: "add a blink or animation". Chitu bobs and tips for a
     moment, then holds still for most of the cycle — a constant loop next to
     the footer reads as a broken GIF rather than an invitation. */
  animation: chitu-bob 5.5s ease-in-out infinite;
}
.chat-fab:hover .chat-fab__mascot,
.chat-fab:focus-visible .chat-fab__mascot { animation-duration: 1.6s; }

@keyframes chitu-bob {
   0%,  70%       { transform: translateY(0) rotate(0); }
  76%              { transform: translateY(-5px) rotate(-7deg); }
  82%              { transform: translateY(0) rotate(0); }
  88%              { transform: translateY(-3px) rotate(5deg); }
  94%, 100%        { transform: translateY(0) rotate(0); }
}

/* Halo that pulses with the bob, so the button still reads as "live" on
   screens where the mascot itself is small. */
.chat-fab::before {
  content: ''; position: absolute; inset: -4px; border-radius: inherit;
  border: 2px solid var(--green); opacity: 0; pointer-events: none;
  animation: chitu-halo 5.5s ease-out infinite;
}
@keyframes chitu-halo {
   0%,  70%  { transform: scale(.96); opacity: 0; }
  78%        { transform: scale(1.06); opacity: .55; }
  92%, 100%  { transform: scale(1.16); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-fab__mascot { animation: none; }
  .chat-fab::before { animation: none; opacity: 0; }
}
.chat__mascot { width: auto; height: 34px; display: block; margin-top: -2px; }
.chat__avatar { background: rgba(255, 255, 255, .22); overflow: hidden; }

/* ── Card hover, applied across the site ───────────────────────────────
   The product carousel got a hover state first; these are the remaining
   card families, given the same language so the whole site behaves
   consistently: a small lift, a shadow in the site's navy, and a border
   that picks up the brand blue. Kept lighter than the product cards,
   which are larger and carry their own colour.

   :focus-within is included everywhere a card contains a link, so the
   same cue appears for keyboard users. */
.link-card,
.fact-card,
.award,
.postcard,
.safety-card,
.notice,
.explore__media,
.awardset,
.prose .dl-category {
  transition:
    transform .28s cubic-bezier(.22, .61, .36, 1),
    box-shadow .28s ease,
    border-color .28s ease;
}

.link-card:hover, .link-card:focus-within,
.fact-card:hover, .fact-card:focus-within,
.award:hover, .award:focus-within,
.postcard:hover, .postcard:focus-within,
.safety-card:hover, .safety-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 16px 34px rgba(10, 61, 102, .12);
}

/* Already had a border-colour hover; add the lift so it matches the rest. */
.notice:hover, .notice:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(10, 61, 102, .1);
}

/* safety-card has no border of its own, so deepen its existing shadow. */
.safety-card:hover, .safety-card:focus-within {
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(10, 61, 102, .14);
}

/* Media cards zoom the image inside a fixed frame rather than lifting, so
   neighbouring content never shifts. */
.award__media, .explore__media, .postcard__media { overflow: hidden; }
.award__media img,
.explore__media img,
.postcard__media img {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.award:hover .award__media img,
.award:focus-within .award__media img,
.explore__media:hover img,
.postcard:hover .postcard__media img,
.postcard:focus-within .postcard__media img { transform: scale(1.06); }

.explore__media:hover { box-shadow: 0 28px 66px rgba(10, 61, 102, .2); }

/* Download tiles: the summary row is the affordance. */
.prose .dl-category { border-radius: 16px; }
.prose .dl-category:hover,
.prose .dl-category:focus-within {
  box-shadow: 0 14px 30px rgba(10, 61, 102, .1);
}

/* Arrow links inside any card nudge on hover, matching the product cards. */
.link-card__links a svg,
.postcard a svg,
.link-arrow svg { transition: transform .26s cubic-bezier(.22, .61, .36, 1); }
.link-card:hover .link-card__links a:hover svg,
.postcard:hover a:hover svg,
.link-arrow:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .link-card, .fact-card, .award, .postcard, .safety-card, .notice,
  .explore__media, .awardset, .prose .dl-category,
  .award__media img, .explore__media img, .postcard__media img,
  .link-card__links a svg, .postcard a svg, .link-arrow svg, .explore__list a svg { transition: none; }
  .link-card:hover, .fact-card:hover, .award:hover, .postcard:hover,
  .safety-card:hover, .notice:hover { transform: none; }
  .award:hover .award__media img,
  .explore__media:hover img,
  .postcard:hover .postcard__media img { transform: none; }
  .link-arrow:hover svg { transform: none; }
}

/* Inside the auto-scrolling announcements viewport the notices sit in a
   fixed-height, overflow-hidden track, so a lift would be clipped at the
   edges. Keep the border cue there and drop the movement. */
.notices__viewport.is-scrolling .notice:hover,
.notices__viewport.is-scrolling .notice:focus-within {
  transform: none;
  box-shadow: none;
}

/* ── Gallery ───────────────────────────────────────────────────────────
   The posters vary a lot in shape (square cyber-awareness tiles, tall
   2:3 product posters, a couple of small legacy banners), so each tile
   is a fixed 3:4 frame with the artwork cropped to fill. The lightbox
   then shows the whole image uncropped. */
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.gallery__item {
  position: relative; display: block; padding: 0; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--surface-alt);
  aspect-ratio: 3 / 4;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.gallery__item:hover, .gallery__item:focus-visible {
  transform: translateY(-4px); border-color: var(--blue);
  box-shadow: 0 16px 34px rgba(10, 61, 102, .14);
}
.gallery__item:hover img, .gallery__item:focus-visible img { transform: scale(1.05); }
.gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  font-size: 12px; font-weight: 600; line-height: 1.4; color: #fff; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(6, 38, 64, .88));
  opacity: 0; transition: opacity .28s ease;
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; }

@media (max-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px)  { .gallery { grid-template-columns: 1fr; } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400; display: flex;
  align-items: center; justify-content: center; padding: 40px 72px;
  background: rgba(4, 20, 34, .93);
  opacity: 0; transition: opacity .22s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox__figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; text-align: center; }
.lightbox__figure img {
  max-width: 100%; max-height: calc(100vh - 140px);
  width: auto; height: auto; border-radius: 10px; display: block; margin: 0 auto;
}
.lightbox__figure figcaption {
  margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .82);
}
.lightbox__close, .lightbox__nav {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .12); border-radius: 50%;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
  .lightbox { padding: 64px 12px 84px; }
  .lightbox__nav--prev { left: 50%; top: auto; bottom: 18px; transform: translateX(-56px); }
  .lightbox__nav--next { right: 50%; top: auto; bottom: 18px; transform: translateX(56px); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__item, .gallery__item img, .gallery__caption, .lightbox { transition: none; }
  .gallery__item:hover { transform: none; }
  .gallery__item:hover img { transform: none; }
}

/* The award card is a link now; keep it reading as a card, not body copy. */
a.award { display: block; color: inherit; text-decoration: none; }
a.award:hover .award__text { color: var(--blue); }

/* ── Single award page ─────────────────────────────────────────────── */
.award-single { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.award-single__media { border-radius: 18px; overflow: hidden; box-shadow: 0 20px 46px rgba(10, 61, 102, .14); }
.award-single__media img { width: 100%; height: auto; display: block; }
.award-single__lead {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  color: var(--ink); line-height: 1.45; margin: 0 0 18px;
}
@media (max-width: 900px) { .award-single { grid-template-columns: 1fr; gap: 28px; } }

/* `.lightbox` sets display:flex, which outranks the UA's [hidden]{display:none}.
   Without this the overlay is always laid out — invisible at opacity 0, but
   fixed over the whole page, swallowing every click on the gallery beneath. */
.lightbox[hidden] { display: none !important; }



/* ── 15 Sep: phone layout pass ───────────────────────────────────────────
   "The header is too big on mobile, reduce the Tamil font size, the hero
   section needs a mobile view, inner-page banners are not displayed. Do not
   change the desktop version." Everything here sits inside a media query;
   nothing above 900px is touched. */

/* Inner-page banners. The earlier rule below 900px hid the artwork outright
   (`background-image: none`) on the grounds that cover-cropping a 3.4:1
   banner into a phone-width box loses the subject. It does — so instead of
   hiding it, the artwork becomes a strip across the top at its own ratio,
   anchored right where every banner's subject sits, and the heading moves
   below it onto the flat navy. --banner-ratio is set inline per page. */
@media (max-width: 900px) {
  .page-hero--banner {
    /* The image itself arrives as an inline style from page-hero.php. */
    background-color: #06263F;
    background-repeat: no-repeat;
    background-position: right top;
    /* Never narrower than the viewport, never shorter than 200px. */
    background-size: max(100vw, calc(200px * var(--banner-ratio))) auto;
    padding: max(calc(100vw / var(--banner-ratio)), 200px) var(--gutter) 40px;
    height: auto;
    display: block;
  }
  .page-hero--banner .shell { padding-top: 26px; }
  .page-hero--banner h1 { font-size: 30px; margin-top: 10px; }
  .page-hero--banner p { font-size: 15px; }
  /* Plain heroes (no artwork) lose some of their 72px of air on phones. */
  .page-hero:not(.page-hero--banner) { padding: 48px var(--gutter); }
}

@media (max-width: 640px) {
  /* Header: 204px before the first line of content at 400px wide, most of
     it the bilingual name wrapping to five lines beside a full-size button.
     The button goes compact so the name gets the width back. */
  .topstrip { padding: 6px 16px; }
  .masthead { padding: 10px 16px; gap: 8px; }
  .brand { gap: 8px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__ta { font-size: 9.5px; line-height: 1.3; }
  .brand__en { font-size: 11.5px; line-height: 1.25; }
  .netbanking-menu .btn { padding: 8px 12px; font-size: 12px; gap: 6px; }
  .netbanking-menu .btn svg { width: 12px; height: 12px; }
  .navbar__inner { padding: 0 16px; }
  .navbar__toggle { padding: 10px 14px; font-size: 15px; }

  /* Hero: the copy was taller than the 300px stage it sits in, so the
     second button was clipped and the ticker overlapped it. Let the stage
     grow to fit the copy; the video / banner still covers whatever height
     that turns out to be. */
  .hero__stage { aspect-ratio: auto; min-height: 0; }
  .hero__inner { height: auto; padding: 40px var(--gutter) 36px; }
  .hero__pill { margin-bottom: 18px; padding: 6px 14px; }
  .hero__pill span { font-size: 10px; letter-spacing: .06em; }
  .hero h1 { font-size: 30px; margin-bottom: 14px; }
  .hero p { font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
  .hero__cta { gap: 10px; }
}