/* ==========================================================================
   Navayuga Credit Souharda Co-operative Society — main stylesheet
   Sections: 0 reset · 1 base · 2 layout · 3 header · 4 buttons · 5 hero
   6 sections/cards · 7 tables · 8 people · 9 forms · 10 footer · 11 motion
   ========================================================================== */

/* 0. RESET ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-compact) + 1rem); }
body { min-height: 100dvh; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
::selection { background: var(--gold-300); color: var(--navy-900); }

/* 1. BASE ----------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
}
h1, h2, h3, .display {
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--navy-900);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-snug); color: var(--navy-900); }
p { color: var(--text-2); }
strong, b { font-weight: 700; color: var(--text); }
em.accent { font-style: italic; font-weight: 400; color: var(--gold-600); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: 0.7rem 1rem; background: var(--navy-900); color: #fff; border-radius: var(--r-sm); transition: top var(--t-fast); }
.skip-link:focus { top: 1rem; }

/* 2. LAYOUT --------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--sand { background: var(--sand); }
.section--white { background: var(--surface); }
.section--dark { background: var(--grad-navy); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--on-dark-2); }
.section--dark strong { color: #fff; }
.section-head { max-width: 680px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
.section-head--split > div { max-width: 640px; }
.section-head p { margin-top: var(--s-4); font-size: var(--fs-md); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--gold-600); margin-bottom: var(--s-4);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.section-head--center .eyebrow::after { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.section--dark .eyebrow { color: var(--gold-400); }
.grid { display: grid; gap: var(--s-5); }
.grid > *, .media-text > *, .contact-grid > *, .pillars > *, .facts > *, .founders > *, .board > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }

/* 3. HEADER --------------------------------------------------------------- */
.topbar {
  background: var(--navy-950); color: var(--on-dark-2); font-size: var(--fs-xs); height: var(--topbar-h);
  display: flex; align-items: center;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.topbar__list { display: flex; gap: var(--s-5); flex-wrap: nowrap; overflow: hidden; }
.topbar__list li { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.topbar__list svg { width: 14px; height: 14px; color: var(--gold-400); flex: none; }
.topbar a:hover { color: #fff; }
.topbar__hours { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.topbar__hours .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 3px rgba(30, 158, 143, 0.25); }
.topbar__hours .dot.closed { background: var(--coral-500); box-shadow: 0 0 0 3px rgba(232, 104, 63, 0.25); }
.topbar__lang { display: none; }
@media (max-width: 760px) { .topbar__list { display: none; } }
@media (max-width: 600px) {
  .topbar { height: auto; min-height: var(--topbar-h); padding-block: 4px; }
  .topbar__lang { display: block; }
}
@media (max-width: 480px) { .topbar__hours .hrs { display: none; } }
.topbar__hours .st { font-weight: 700; color: var(--on-dark); }

/* Two states. At the top of a page the header is a full masthead (--header-h);
   once the reader scrolls it becomes a compact bar (--bar-h). The header BOX
   keeps its masthead height in both states and only the painted bar inside it
   shrinks, so nothing below ever moves: no layout shift, no scroll jitter. The
   unpainted remainder of the box lets clicks through. */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); pointer-events: none; }
/* Blur lives on a pseudo-element so the header itself is not a containing block for the fixed mobile nav */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--bar-h, var(--header-h)); z-index: -1;
  background: rgba(251, 249, 244, 0.9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: height var(--t) var(--ease), border-color var(--t), box-shadow var(--t);
}
.site-header.is-scrolled::before { border-bottom-color: var(--line); box-shadow: 0 6px 24px -12px rgba(16, 22, 46, 0.18); }
.site-header__inner {
  height: var(--bar-h, var(--header-h)); pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-5); transition: height var(--t) var(--ease);
}
.site-header.is-scrolled { --bar-h: var(--bar-compact); --brand-mark: var(--mark-compact); }
/* Brand lockup. The society's full name is ONE title: one face, one size, one
   colour, beside the emblem. brandLine1/brandLine2 stay separate spans in the
   markup (the config splits them) but flow inline here, so the name wraps as a
   single balanced phrase: two lines in the header, more where space is tight.
   All sizing lives in this block and the two media queries under it. */
.brand { display: inline-flex; align-items: center; gap: 0.95rem; min-width: 0; }
.brand__mark { width: var(--brand-mark, 108px); height: var(--brand-mark, 108px); flex: none; object-fit: contain; transition: width var(--t) var(--ease), height var(--t) var(--ease); }
/* Stacked lockup: NAVAYUGA in capitals, the rest of the name beneath it, one
   face and one colour. .brand__text is a size container filling whatever the
   emblem and the controls leave, and each line takes its size from that width:
   the second line at 100cqw / 20.6 sits on one line (it measures 19.9em, +3%),
   the first at 100cqw / 11.2 makes NAVAYUGA about 1.85x larger. The --cap
   values bound the top; the clamp floors stop phones going below ~11px, at
   which point the second line wraps to two instead. */
.brand__text {
  flex: 1 1 0; min-width: 0; container: brand / inline-size;
  font-family: var(--font-display); font-weight: 600; color: var(--navy-900);
  font-size: 10px;                     /* strut only; the two lines carry the size */
}
.brand__name, .brand__sub { display: block; transition: font-size var(--t) var(--ease); }
.brand__name {
  font-size: clamp(1rem, 100cqw / 11.2, var(--cap1, 2.25rem));
  line-height: 1.05; letter-spacing: 0.09em; text-transform: uppercase;
}
.brand__sub {
  text-wrap: balance; margin-top: 0.22em; font-size: clamp(0.68rem, 100cqw / 20.6, var(--cap2, 1.25rem));
  line-height: 1.22; letter-spacing: 0; font-weight: 500;
}
.brand__text .nb { white-space: nowrap; }
/* Kannada has no capitals; the first line is simply the larger of the two. */
html[lang="kn"] .brand__name { letter-spacing: 0; line-height: 1.25; font-size: clamp(1rem, 100cqw / 10, calc(var(--cap1, 2.25rem) * 0.9)); }
html[lang="kn"] .brand__sub { line-height: 1.35; font-size: clamp(0.72rem, 100cqw / 18.2, calc(var(--cap2, 1.25rem) * 0.9)); }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 0.25rem; }
.nav__link {
  position: relative; display: inline-block; padding: 0.55rem 0.8rem; font-weight: 600; font-size: 0.93rem; color: var(--text-2);
  border-radius: var(--r-sm); transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--navy-900); background: var(--navy-50); }
.nav__link[aria-current="page"] { color: var(--navy-900); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.25rem; height: 2px; border-radius: 2px; background: var(--gold-500); }
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform var(--t), opacity var(--t); transform-origin: center; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-scrim { position: fixed; inset: 0; background: rgba(10, 18, 54, 0.5); opacity: 0; pointer-events: none; transition: opacity var(--t); z-index: 90; }
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }

@media (max-width: 1440px) {
  .nav__link { padding-inline: 0.5rem; font-size: 0.88rem; }
}
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); z-index: 95; margin: 0;
    background: var(--navy-950); padding: calc(var(--header-h) + 1rem) var(--s-6) var(--s-6);
    transform: translateX(100%); visibility: hidden; transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow); overflow-y: auto;
  }
  body.nav-open .nav { transform: none; visibility: visible; transition: transform var(--t-slow) var(--ease), visibility 0s; }
  .nav__list { flex-direction: column; gap: 0.2rem; }
  .nav__link { display: block; padding: 0.9rem 0.6rem; font-size: 1.15rem; color: var(--on-dark-2); border-radius: var(--r-sm); }
  .nav__link:hover, .nav__link[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .nav__link[aria-current="page"]::after { left: 0.6rem; right: auto; width: 28px; bottom: 0.55rem; }
  .nav__cta { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); }
  .nav__cta .btn { width: 100%; }
  .nav__contact { margin-top: var(--s-5); color: var(--on-dark-3); font-size: var(--fs-sm); }
  .nav__contact a { display: block; color: var(--on-dark-2); padding: 0.3rem 0; }
  body.nav-open .nav-toggle { position: relative; z-index: 96; }
  body.nav-open .nav-toggle span { background: #fff; }
}
@media (min-width: 1101px) { .nav__cta, .nav__contact { display: none; } }

/* 4. BUTTONS -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.5rem; border-radius: var(--r-pill); font-weight: 700; font-size: 0.95rem; line-height: 1;
  border: 1.5px solid transparent; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--navy-800); color: #fff; box-shadow: 0 8px 20px -10px rgba(20, 37, 102, 0.6); }
.btn--primary:hover { background: var(--navy-900); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(20, 37, 102, 0.7); }
.btn--gold { background: var(--grad-gold); color: var(--navy-950); box-shadow: var(--sh-gold); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(211, 162, 51, 0.65); }
.btn--outline { border-color: var(--line-strong); color: var(--navy-900); background: transparent; }
.btn--outline:hover { border-color: var(--navy-800); background: var(--navy-50); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: rgba(255, 255, 255, 0.06); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }
.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.85rem; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--navy-800); }
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--gold-600); }
.section--dark .link-arrow, .hero .link-arrow, .page-hero .link-arrow { color: var(--gold-400); }
.section--dark .link-arrow:hover, .hero .link-arrow:hover { color: var(--gold-300); }

/* 5. HERO ----------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: var(--on-dark);
  background: var(--grad-navy);
  padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem) clamp(5rem, 3rem + 7vw, 9rem);
  isolation: isolate;
}
.hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__glow::before, .hero__glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; }
.hero__glow::before { width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; right: -18vw; top: -22vw; background: radial-gradient(circle, rgba(211, 162, 51, 0.5) 0%, rgba(211, 162, 51, 0) 65%); animation: hero-drift-a 26s ease-in-out infinite; }
.hero__glow::after { width: 50vw; height: 50vw; max-width: 620px; max-height: 620px; left: -14vw; bottom: -24vw; background: radial-gradient(circle, rgba(30, 158, 143, 0.4) 0%, rgba(30, 158, 143, 0) 65%); animation: hero-drift-b 32s ease-in-out infinite; }
@keyframes hero-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9%, 12%) scale(1.12); } }
@keyframes hero-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12%, -10%) scale(1.1); } }
/* Faint diagonal light sweep that crosses the banner every ~18s */
.hero__sweep { position: absolute; inset: -30% -50%; z-index: -1; pointer-events: none; will-change: transform;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.035) 48%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.035) 52%, transparent 58%);
  transform: translateX(-55%); animation: hero-sweep 18s ease-in-out infinite; }
@keyframes hero-sweep { 0%, 12% { transform: translateX(-55%); } 62%, 100% { transform: translateX(55%); } }
/* Mangaluru motif: coconut palms, shoreline and sun as faint line art, tiled and vignetted */
.hero__motif { position: absolute; inset: 0; z-index: -1; opacity: 0.085; pointer-events: none;
  background-image: url("../img/hero-motif.svg"); background-size: 360px 360px; background-position: 24px 18px;
  mask-image: radial-gradient(ellipse at 45% 45%, #000 15%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 45% 45%, #000 15%, transparent 72%); }
@media (prefers-reduced-motion: reduce) { .hero__glow::before, .hero__glow::after, .hero__sweep { animation: none; } }
.hero__emblem { position: absolute; right: -6%; top: 50%; width: min(52vw, 640px); transform: translateY(-50%); opacity: 0.07; z-index: -1; pointer-events: none; filter: grayscale(1) brightness(2); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); min-width: 0; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero h1 { color: #fff; font-size: var(--fs-3xl); max-width: 14ch; }
.hero h1 .gold { font-style: italic; font-weight: 400; background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { margin-top: var(--s-5); font-size: var(--fs-md); color: var(--on-dark-2); max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.9rem 0.45rem 0.55rem; margin-bottom: var(--s-5);
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-2);
}
.hero__badge .pip { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: var(--navy-950); }
.hero__badge .pip svg { width: 13px; height: 13px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); }
.hero__proof div { display: flex; flex-direction: column; gap: 0.1rem; }
.hero__proof b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: #fff; line-height: 1.1; }
.hero__proof span { font-size: var(--fs-xs); color: var(--on-dark-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }

/* Rate card stack */
.rate-stack { position: relative; display: grid; gap: var(--s-4); }
.rate-card {
  position: relative; padding: 1.4rem 1.5rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-4);
  transition: transform var(--t) var(--ease), background var(--t);
}
.rate-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.09); }
.rate-card--hero {
  background: linear-gradient(135deg, rgba(211, 162, 51, 0.22), rgba(211, 162, 51, 0.05)); border-color: rgba(229, 185, 74, 0.45);
  box-shadow: 0 30px 60px -30px rgba(211, 162, 51, 0.5);
}
.rate-card__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-400); }
.rate-card__title { margin-top: 0.2rem; font-weight: 700; color: #fff; font-size: 1.05rem; }
.rate-card__meta { margin-top: 0.2rem; font-size: var(--fs-sm); color: var(--on-dark-3); }
.rate-card__rate { font-family: var(--font-display); font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); font-weight: 500; line-height: 1; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.rate-card__rate small { display: block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 0.35rem; }
.rate-card--hero .rate-card__rate { background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rate-stack__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); color: var(--on-dark-3); padding-inline: 0.4rem; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: none; }
  .hero__emblem { right: -30%; top: 20%; width: 90vw; transform: none; opacity: 0.05; }
}

/* Trust strip */
.trust-strip { background: var(--navy-950); border-top: 1px solid var(--line-dark); color: var(--on-dark-2); }
.trust-strip__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.trust-strip__item { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem var(--s-4); border-right: 1px solid var(--line-dark); font-size: var(--fs-sm); }
.trust-strip__item:last-child { border-right: 0; }
.trust-strip__item svg { width: 22px; height: 22px; color: var(--gold-400); flex: none; }
.trust-strip__item b { display: block; color: #fff; font-weight: 700; }
.trust-strip__item span { color: var(--on-dark-3); font-size: var(--fs-xs); overflow-wrap: anywhere; }
@media (max-width: 700px) { .trust-strip__item { border-right: 0; border-bottom: 1px solid var(--line-dark); } .trust-strip__item:last-child { border-bottom: 0; } }

/* Page hero (inner pages) */
.page-hero { position: relative; overflow: hidden; background: var(--grad-navy); color: var(--on-dark); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); isolation: isolate; }
.page-hero h1 { color: #fff; font-size: var(--fs-2xl); max-width: 16ch; }
.page-hero h1 .gold { font-style: italic; font-weight: 400; background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero p { margin-top: var(--s-4); max-width: 60ch; font-size: var(--fs-md); color: var(--on-dark-2); }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: var(--s-5); }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--on-dark-3); }
.crumbs li:last-child { color: var(--gold-400); }
.page-hero__aside { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.chip { max-width: 100%; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark-2); }
.chip b { color: #fff; }
.chip svg { width: 15px; height: 15px; color: var(--gold-400); }

/* 6. SECTIONS & CARDS ----------------------------------------------------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  box-shadow: var(--sh-xs); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: var(--s-4);
  background: var(--navy-50); color: var(--navy-700); transition: background var(--t), color var(--t);
}
.card__icon svg { width: 26px; height: 26px; }
.card:hover .card__icon { background: var(--navy-800); color: var(--gold-300); }
.card h3, .card h4 { margin-bottom: 0.5rem; }
.card p { font-size: var(--fs-sm); }
.card__tag { display: inline-block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 0.4rem; }
.card--link { display: flex; flex-direction: column; }
.card--link .link-arrow { margin-top: auto; padding-top: var(--s-4); font-size: var(--fs-sm); }

/* Pillars (bento) */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.pillar {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.6rem; min-height: 260px;
  padding: 1.75rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.pillar__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--navy-800); color: var(--gold-300); margin-bottom: 0.6rem; }
.pillar__icon svg { width: 26px; height: 26px; }
.pillar h3 { font-size: 1.45rem; }
.pillar p { font-size: var(--fs-sm); flex: 1; }
.pillar .link-arrow { font-size: var(--fs-sm); }
.pillar::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(211, 162, 51, 0.16), transparent 70%); transition: transform var(--t-slow) var(--ease); }
.pillar:hover::after { transform: scale(1.6); }
.pillar--featured { background: var(--grad-navy); border-color: transparent; color: var(--on-dark); }
.pillar--featured h3 { color: #fff; }
.pillar--featured p { color: var(--on-dark-2); }
.pillar--featured .pillar__icon { background: var(--grad-gold); color: var(--navy-950); }
.pillar--featured .link-arrow { color: var(--gold-400); }
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } .pillar { min-height: 0; } }

/* Facts / counters */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-4); }
.fact { padding: 1.5rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.fact__value { font-family: var(--font-display); font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem); font-weight: 500; line-height: 1; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.fact__value .suffix { color: var(--gold-600); }
.fact__label { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; }

/* Media + text */
.media-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(2rem, 1.5rem + 3vw, 5rem); align-items: center; }
.media-text__body h2 { margin-bottom: var(--s-4); }
.media-text__body p + p { margin-top: var(--s-4); }
.quote-panel {
  position: relative; padding: clamp(2rem, 1.5rem + 2vw, 3rem); border-radius: var(--r-xl); background: var(--grad-navy); color: var(--on-dark); overflow: hidden;
}
.quote-panel::before { content: "“"; position: absolute; top: -0.2em; left: 0.15em; font-family: var(--font-display); font-size: 12rem; line-height: 1; color: rgba(211, 162, 51, 0.18); }
.quote-panel .display { position: relative; color: #fff; font-size: var(--fs-xl); font-style: italic; font-weight: 400; }
.quote-panel .display .gold { color: var(--gold-400); }
.quote-panel p { position: relative; margin-top: var(--s-5); color: var(--on-dark-2); }
.quote-panel__foot { position: relative; margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); }
.quote-panel__foot img { width: 64px; height: 64px; object-fit: contain; }
.quote-panel__foot b { display: block; color: #fff; }
.quote-panel__foot span { font-size: var(--fs-sm); color: var(--on-dark-3); }
.feature-list li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.55rem 0; color: var(--text-2); }
.feature-list .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-100); color: var(--teal-600); display: grid; place-items: center; margin-top: 0.1rem; }
.feature-list .tick svg { width: 14px; height: 14px; }

/* Values */
.value { display: flex; gap: 1rem; padding: 1.5rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-dark); }
.value__icon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(211, 162, 51, 0.15); color: var(--gold-300); display: grid; place-items: center; }
.value__icon svg { width: 22px; height: 22px; }
.value h4 { color: #fff; margin-bottom: 0.25rem; }
.value p { font-size: var(--fs-sm); }

/* Timeline */
.timeline { position: relative; display: grid; gap: var(--s-4); }
.timeline::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--gold-400), var(--line)); }
.timeline li { position: relative; padding-left: 2.6rem; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 0.35rem; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--gold-500); box-shadow: 0 0 0 4px var(--bg); }
.timeline__year { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); }
.timeline h4 { margin: 0.15rem 0 0.25rem; }
.timeline p { font-size: var(--fs-sm); }

/* Scheme cards (RD) */
.scheme {
  position: relative; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.6rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.scheme:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.scheme__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: 0.6rem; }
.scheme__abbr { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--navy-800); padding: 0.3rem 0.7rem; border-radius: var(--r-sm); background: var(--navy-50); }
.scheme__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-700); }
.scheme__icon svg { width: 22px; height: 22px; }
.scheme h3 { font-size: 1.3rem; }
.scheme p { font-size: var(--fs-sm); }
.scheme__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-strong); }
.scheme__facts div { display: flex; flex-direction: column; }
.scheme__facts span { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.scheme__facts b { font-size: 1.02rem; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.scheme__maturity { margin-top: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--r-md); background: var(--navy-900); color: #fff; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.scheme__maturity span { font-size: var(--fs-xs); color: var(--on-dark-3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.scheme__maturity b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.scheme__maturity small { flex-basis: 100%; font-size: var(--fs-2xs); color: var(--on-dark-3); }
.scheme--women { border-color: rgba(232, 104, 63, 0.35); }
.scheme--women .scheme__icon { background: var(--coral-100); color: var(--coral-600); }
.scheme--women .scheme__abbr { background: var(--coral-100); color: var(--coral-600); }

/* FD product cards */
.fd-card { position: relative; padding: 1.6rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.35rem; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); overflow: hidden; }
.fd-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.fd-card__rate { font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; line-height: 1; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.fd-card__rate small { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-left: 0.3rem; }
.fd-card__tenure { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); }
.fd-card h3 { font-size: 1.25rem; margin-top: 0.4rem; }
.fd-card__tagline { font-style: italic; color: var(--navy-700); font-family: var(--font-display); font-size: 1.02rem; }
.fd-card p { font-size: var(--fs-sm); }
.fd-card__badge { position: absolute; top: 1rem; right: 1rem; padding: 0.3rem 0.65rem; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gold-100); color: var(--gold-700); }
.fd-card--featured { background: var(--grad-navy); border-color: transparent; color: var(--on-dark); }
.fd-card--featured .fd-card__rate { background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fd-card--featured .fd-card__rate small { color: var(--on-dark-3); -webkit-text-fill-color: var(--on-dark-3); }
.fd-card--featured h3 { color: #fff; }
.fd-card--featured .fd-card__tagline { color: var(--gold-300); }
.fd-card--featured p { color: var(--on-dark-2); }
.fd-card--featured .fd-card__badge { background: var(--grad-gold); color: var(--navy-950); }

/* Special schemes (MIS / NCC) */
.special { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.special__icon { width: 64px; height: 64px; border-radius: 18px; background: var(--grad-gold); color: var(--navy-950); display: grid; place-items: center; }
.special__icon svg { width: 30px; height: 30px; }

/* Illustrated product art (assets/img/products) — replaces the line icon when an item has `img` */
.card__icon--img, .pillar__icon--img, .scheme__icon--img, .special__icon--img { padding: 5px; }
.card__icon--img { width: 66px; height: 66px; }
.card:hover .card__icon--img { background: var(--gold-100); }
.pillar__icon--img { width: 66px; height: 66px; background: var(--navy-50); }
.pillar--featured .pillar__icon--img { background: rgba(255, 255, 255, 0.92); }
.scheme__icon--img { width: 54px; height: 54px; }
.special__icon--img { width: 76px; height: 76px; background: var(--gold-100); }
.card__icon--img img, .pillar__icon--img img, .scheme__icon--img img, .special__icon--img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fd-card__pic { position: absolute; right: 1rem; bottom: 1rem; width: 60px; height: 60px; opacity: 0.9; pointer-events: none; }
.fd-card:has(.fd-card__pic) p { padding-right: 4.25rem; }
.fd-card__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fd-card--featured .fd-card__pic { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)); }
.special__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.special__meta span { font-size: var(--fs-xs); font-weight: 700; padding: 0.3rem 0.65rem; border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy-800); }
.special__tag { font-family: var(--font-display); font-style: italic; color: var(--navy-700); }
.special__example { margin-top: 0.9rem; padding: 0.8rem 1rem; border-radius: var(--r-md); background: var(--gold-100); color: var(--gold-700); font-weight: 700; font-size: var(--fs-sm); display: flex; gap: 0.5rem; align-items: center; }
.special__example svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { .special { grid-template-columns: 1fr; } }

/* Note / callout */
.callout { display: flex; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: var(--r-md); background: var(--navy-50); border: 1px solid var(--navy-100); color: var(--text-2); font-size: var(--fs-sm); }
.callout svg { width: 22px; height: 22px; flex: none; color: var(--navy-700); margin-top: 0.1rem; }
.callout b { color: var(--navy-900); }
.callout--gold { background: var(--gold-100); border-color: #f1dfa6; }
.callout--gold svg { color: var(--gold-700); }
.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-list li { padding: 0.45rem 0.85rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900); display: inline-flex; align-items: center; gap: 0.45rem; }
.pill-list svg { width: 14px; height: 14px; color: var(--teal-600); }

/* Tabs */
.tabs { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border-radius: var(--r-pill); background: var(--sand-dark); margin-bottom: var(--s-6); max-width: 100%; overflow-x: auto; }
.tab { padding: 0.6rem 1.1rem; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--navy-900); box-shadow: var(--sh-sm); }
[role="tabpanel"][hidden] { display: none; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-4); counter-reset: step; }
.step { position: relative; padding: 1.5rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-dark); counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-size: 2.2rem; color: var(--gold-400); line-height: 1; display: block; margin-bottom: 0.8rem; }
.step h4 { color: #fff; margin-bottom: 0.3rem; }
.step p { font-size: var(--fs-sm); }

/* FAQ */
.faq { display: grid; gap: 0.75rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; font-weight: 700; color: var(--navy-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy-50); color: var(--navy-800); display: grid; place-items: center; transition: transform var(--t) var(--ease), background var(--t); }
.faq summary .chev svg { width: 14px; height: 14px; }
.faq details[open] summary .chev { transform: rotate(180deg); background: var(--gold-100); color: var(--gold-700); }
.faq details p { padding: 0 1.4rem 1.2rem; font-size: var(--fs-sm); }

/* CTA banner */
.cta-banner { position: relative; overflow: hidden; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-radius: var(--r-xl); background: var(--grad-navy); color: var(--on-dark); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6); isolation: isolate; }
.cta-banner::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(211, 162, 51, 0.35), transparent 65%); z-index: -1; }
.cta-banner h2 { color: #fff; max-width: 18ch; }
.cta-banner p { margin-top: var(--s-3); max-width: 50ch; color: var(--on-dark-2); }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 760px) { .cta-banner { grid-template-columns: 1fr; } }

/* Careers */
.job { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); align-items: start; }
.job__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.job__meta div { padding-left: 0.9rem; border-left: 2px solid var(--gold-400); }
.job__meta span { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.job__meta b { color: var(--navy-900); }
.job__status { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 0.6rem; }
.job__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 4px var(--teal-100); }
@media (max-width: 700px) { .job { grid-template-columns: 1fr; } }

/* President's message */
.president { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1.5rem + 3vw, 5rem); align-items: center; }
.president__media { position: relative; max-width: 460px; }
.person--portrait { aspect-ratio: 3 / 4; }
.person--portrait img { object-position: 50% 42%; }
.president__media .person { box-shadow: var(--sh-lg); }
.president__body h2 { margin-bottom: var(--s-4); }
.president__body p + p { margin-top: var(--s-4); }
.president__greeting { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--navy-800); }
.president__closing { margin-top: var(--s-5) !important; padding-left: 1.1rem; border-left: 3px solid var(--gold-400); font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--navy-900); }
.president__sign { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.president__sign b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--navy-900); }
.president__sign span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); margin-top: 0.2rem; }
.section--dark .president__greeting, .section--dark .president__closing { color: var(--gold-300); }
.section--dark .president__sign { border-top-color: var(--line-dark); }
.section--dark .president__sign b { color: #fff; }
.section--dark .president__sign span { color: var(--gold-400); }
@media (max-width: 900px) { .president { grid-template-columns: 1fr; } .president__media { max-width: 400px; } }

/* President in hero */
.hp { position: relative; padding-top: 4.5rem; animation: rise 0.9s var(--ease) 0.3s both; }
.hp__glow { position: absolute; right: 2%; top: 0; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(211, 162, 51, 0.38) 0%, rgba(211, 162, 51, 0.08) 45%, transparent 70%); filter: blur(10px); pointer-events: none; }
.hp__panel {
  position: relative; min-height: 420px; padding: 2rem 46% 2rem 2rem; border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; gap: 1rem; overflow: hidden;
}
.hp__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-gold); }
.hp__ribbon { align-self: flex-start; padding: 0.4rem 0.8rem; border-radius: var(--r-pill); background: var(--grad-gold); color: var(--navy-950); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; position: relative; }
.hp__quote { position: relative; font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.45; color: #fff; margin-top: 0.4rem; }
.hp__sign { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-dark); position: relative; }
.hp__sign b { display: block; color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; }
.hp__sign span { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-400); }
.hp .link-arrow { font-size: var(--fs-sm); position: relative; }
.hp__portrait { position: absolute; right: 0.25rem; bottom: 0; width: 52%; max-width: 380px; pointer-events: none; filter: drop-shadow(0 24px 30px rgba(5, 10, 40, 0.55)); }
.hp__portrait img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .hp { max-width: 640px; }
  .hp__panel { min-height: 360px; }
}
@media (max-width: 560px) {
  .hp { padding-top: 0; display: flex; flex-direction: column; align-items: center; }
  .hp__glow { top: -6%; right: 20%; width: 60%; }
  .hp__portrait { position: relative; right: auto; bottom: auto; width: 62%; max-width: 250px; order: -1; margin-bottom: -2.5rem; z-index: 1; }
  .hp__panel { min-height: 0; padding: 3rem 1.5rem 1.6rem; width: 100%; }
  }

/* Rate row under hero */
.rate-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-4); }
.rate-row .rate-card { background: var(--surface); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--sh-sm); }
.rate-row .rate-card:hover { background: var(--surface); box-shadow: var(--sh-md); }
.rate-row .rate-card__label { color: var(--gold-600); }
.rate-row .rate-card__title { color: var(--navy-900); }
.rate-row .rate-card__meta { color: var(--text-3); }
.rate-row .rate-card__rate { color: var(--navy-900); }
.rate-row .rate-card__rate small { color: var(--text-3); }
.rate-row .rate-card--hero { background: var(--grad-navy); border-color: transparent; }
.rate-row .rate-card--hero .rate-card__label { color: var(--gold-400); }
.rate-row .rate-card--hero .rate-card__title { color: #fff; }
.rate-row .rate-card--hero .rate-card__meta, .rate-row .rate-card--hero .rate-card__rate small { color: var(--on-dark-3); }
.rate-row__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-3); }

/* Language toggle */
.lang-toggle { display: inline-flex; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); }
.lang-toggle__btn { padding: 0.35rem 0.7rem; border-radius: var(--r-pill); font-size: 0.8rem; font-weight: 800; color: var(--text-2); line-height: 1.2; transition: background var(--t-fast), color var(--t-fast); }
.lang-toggle__btn[aria-current="true"] { background: var(--navy-800); color: #fff; }
a.lang-toggle__btn:hover { color: var(--navy-900); background: var(--navy-50); }
html[lang="kn"] .lang-toggle__btn[lang="en"] { font-family: var(--font-body); }

/* Kannada typography */
html[lang="kn"] {
  /* Latin first, Kannada second. Neither Fraunces nor Manrope carries Kannada
     glyphs, so Kannada text falls straight through to Noto while digits, %,
     rupee amounts and English terms keep the brand's Latin faces instead of
     Noto's much weaker Latin. Rates are the most-read text on the site. */
  --font-display: "Fraunces", "Noto Serif Kannada", Georgia, serif;
  --font-body: "Manrope", "Noto Sans Kannada", "Segoe UI", system-ui, sans-serif;
  --fs-3xl: clamp(2.3rem, 1.6rem + 3.6vw, 4.4rem);
  --fs-2xl: clamp(1.9rem, 1.45rem + 2.2vw, 3.1rem);
  --fs-xl: clamp(1.55rem, 1.3rem + 1.2vw, 2.2rem);
  --lh-tight: 1.28;
  --lh-snug: 1.4;
  --lh-body: 1.8;
  --track-caps: 0.04em;
}
html[lang="kn"] h1, html[lang="kn"] h2, html[lang="kn"] h3, html[lang="kn"] .display { letter-spacing: 0; font-weight: 600; font-variation-settings: normal; }
html[lang="kn"] .hero h1 .gold, html[lang="kn"] .page-hero h1 .gold, html[lang="kn"] .quote-panel .display { font-style: normal; font-weight: 500; }
html[lang="kn"] .eyebrow, html[lang="kn"] .hero__badge, html[lang="kn"] .rate-card__label, html[lang="kn"] .crumbs, html[lang="kn"] .card__tag, html[lang="kn"] .fd-card__tenure, html[lang="kn"] .fd-card__badge, html[lang="kn"] .scheme__facts span, html[lang="kn"] .scheme__maturity span, html[lang="kn"] .person__body span, html[lang="kn"] .member span, html[lang="kn"] .rate-table thead th, html[lang="kn"] .rate-table .tag, html[lang="kn"] .hero__proof span, html[lang="kn"] .trust-strip__item span, html[lang="kn"] .footer-col h4, html[lang="kn"] .info-list span, html[lang="kn"] .job__meta span, html[lang="kn"] .job__status, html[lang="kn"] .timeline__year, html[lang="kn"] .calc__result .label, html[lang="kn"] .hours-note, html[lang="kn"] .president__sign span, html[lang="kn"] .fd-card__rate small, html[lang="kn"] .rate-card__rate small, html[lang="kn"] .hp__ribbon, html[lang="kn"] .flagship__label { letter-spacing: 0.02em; text-transform: none; }
html[lang="kn"] .fd-card__tagline, html[lang="kn"] .special__tag, html[lang="kn"] .president__greeting, html[lang="kn"] .president__closing, html[lang="kn"] .flagship__tagline, html[lang="kn"] .hp__quote { font-style: normal; }
html[lang="kn"] .hero h1 { max-width: 16ch; }

/* Intro splash */
html.intro-active { overflow: hidden; }
html.intro-seen .intro { display: none; }
.intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--grad-navy); color: #fff; transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s; }
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
.intro__ring { position: absolute; top: -18px; left: 50%; width: 156px; height: 156px; margin-left: -78px; border-radius: 50%; border: 2px solid rgba(211, 162, 51, 0.25); border-top-color: var(--gold-400); animation: spin 1.4s linear infinite; }
.intro__logo { width: 132px; height: 132px; object-fit: contain; animation: introPop 0.9s var(--ease) both; }
.intro__name { animation: rise 0.9s var(--ease) 0.25s both; }
.intro__name { display: block; font-family: var(--font-display); color: #fff; }
.intro__brand { display: block; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.05; }
.intro__tag { display: block; margin-top: 0.35rem; font-size: clamp(0.85rem, 0.7rem + 0.6vw, 1.1rem); font-weight: 500; line-height: 1.25; }
html[lang="kn"] .intro__brand { letter-spacing: 0; line-height: 1.25; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes introPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }

/* Flagship spotlight */
.flagship { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 1.5rem + 3vw, 5rem); align-items: center; }
.flagship__body h2 { margin-bottom: 0.6rem; }
.flagship__tagline { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--gold-300); margin-bottom: 0.8rem; }
.flagship__body .feature-list { margin: 1.2rem 0 0.4rem; }
.flagship__body .feature-list li { color: var(--on-dark-2); }
.flagship__body .feature-list .tick { background: rgba(211, 162, 51, 0.18); color: var(--gold-300); }
.flagship__panel { position: relative; overflow: hidden; padding: 2.2rem 2rem; border-radius: var(--r-xl); background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(229, 185, 74, 0.35); box-shadow: 0 30px 60px -30px rgba(211, 162, 51, 0.45); text-align: center; }
.flagship__label { display: inline-block; padding: 0.35rem 0.8rem; border-radius: var(--r-pill); background: var(--grad-gold); color: var(--navy-950); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.flagship__rate { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(4.5rem, 3.5rem + 4vw, 7rem); font-weight: 500; line-height: 1; background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flagship__rate small { display: block; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); -webkit-text-fill-color: var(--on-dark-3); margin-top: 0.5rem; }
html[lang="kn"] .flagship__rate small { letter-spacing: 0; text-transform: none; }
.flagship__example { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 0.2rem; }
.flagship__example span { font-size: var(--fs-xs); color: var(--on-dark-3); font-weight: 700; }
.flagship__example b { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; color: #fff; }
.flagship__seal { position: absolute; right: -40px; bottom: -40px; width: 170px; opacity: 0.08; filter: grayscale(1) brightness(2); pointer-events: none; }
@media (max-width: 860px) { .flagship { grid-template-columns: 1fr; } }

/* Header density: emblem + two-line title + 8 links + language toggle.
   Measured: the English title needs 12.54em to sit on two lines (10.85em on
   three); Kannada needs 10.88em. The 8 links take ~550px and the actions ~110px
   of a 1360px bar. An "Open an Account" button costs another ~170px, which caps
   the title near 20px, so the bar carries no button; it lives in the hero, the
   off-canvas menu and every closing banner instead.
   The actions cluster must never be squeezed out, so the brand is what yields. */
.nav__link { white-space: nowrap; }
.site-header .brand { flex: 0 1 auto; min-width: 0; }
.site-header .header-actions { flex: 0 0 auto; margin-left: auto; }
html[lang="kn"] .nav__link { font-size: 0.84rem; padding-inline: 0.45rem; }

/* The brand grows into --brand-max; the nav's auto margin keeps the links on
   the right. Compact (scrolled) state caps both lines, which is what shrinks
   them, since the container width does not change. */
.site-header .brand { flex: 1 1 0; max-width: var(--brand-max, 540px); }
.site-header.is-scrolled { --cap1: 1.3rem; --cap2: 0.78rem; }

/* Masthead tiers (top of page). */
@media (max-width: 1499px) {
  :root { --header-h: 120px; --brand-mark: 96px; --brand-max: 490px; }
  html[lang="kn"] .nav__link { font-size: 0.8rem; padding-inline: 0.4rem; }
}
@media (max-width: 1240px) {
  :root { --brand-mark: 84px; --brand-max: 440px; }
  .site-header__inner { gap: var(--s-4); }
  .header-actions { gap: var(--s-2); }
}
/* The last 80px before the menu collapses: tighter link padding keeps the
   second line whole. */
@media (max-width: 1180px) {
  :root { --brand-mark: 78px; --brand-max: 405px; }
  .nav__link { padding-inline: 0.4rem; }
}
/* Off-canvas range: the links are gone, so the title gets the room back. */
@media (max-width: 1100px) {
  :root { --header-h: 116px; --brand-mark: 92px; --brand-max: none; --bar-compact: 72px; --mark-compact: 54px; }
  .site-header.is-scrolled { --cap1: 1.2rem; --cap2: 0.74rem; }
}
/* Phones: the language switch moves up into the utility strip (and into the
   menu), so the masthead is just emblem, title and menu button. */
@media (max-width: 600px) {
  :root { --header-h: 100px; --brand-mark: 72px; --bar-compact: 64px; --mark-compact: 44px; }
  .site-header__inner { gap: var(--s-2); }
  .site-header .brand { gap: 0.65rem; }
  .site-header .header-actions .lang-toggle { display: none; }
  .site-header.is-scrolled { --cap1: 1.05rem; --cap2: 0.7rem; }
}
@media (max-width: 340px) { :root { --brand-mark: 62px; } .site-header .brand { gap: 0.5rem; } }

/* Language switch on dark surfaces: the phone utility strip and the menu. */
.lang-toggle--dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); }
.lang-toggle--dark .lang-toggle__btn { color: var(--on-dark-2); }
.lang-toggle--dark .lang-toggle__btn[aria-current="true"] { background: var(--gold-400); color: var(--navy-950); }
.lang-toggle--dark a.lang-toggle__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.topbar .lang-toggle__btn { min-height: 34px; padding: 0.25rem 0.75rem; font-size: 0.76rem; }
.nav__lang { display: none; }
@media (max-width: 600px) { .nav__lang { display: block; margin-top: var(--s-5); } }
/* Gradient-clipped numerals: Kannada font glyphs rise above the em box, so give the line box room */
html[lang="kn"] .flagship__rate, html[lang="kn"] .rate-card--hero .rate-card__rate, html[lang="kn"] .fd-card--featured .fd-card__rate, html[lang="kn"] .hero h1 .gold, html[lang="kn"] .page-hero h1 .gold { line-height: 1.25; padding-top: 0.06em; }
html[lang="kn"] .flagship__rate { font-family: "Fraunces", "Noto Serif Kannada", serif; }

/* Gallery grid — masonry columns so tall and wide photographs keep their shape */
.shots { column-count: 3; column-gap: var(--s-4); }
@media (max-width: 1080px) { .shots { column-count: 2; } }
@media (max-width: 560px) { .shots { column-count: 1; } }
.shot {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in;
  margin: 0 0 var(--s-4); break-inside: avoid; -webkit-column-break-inside: avoid;
  border-radius: var(--r-md); background: var(--sand-dark); border: 1px solid var(--line);
  box-shadow: var(--sh-xs); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.shot img { width: 100%; height: auto; display: block; transition: transform var(--t-slow) var(--ease); }
.shot:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.shot:hover img, .shot:focus-visible img { transform: scale(1.04); }
.shot:focus-visible { box-shadow: var(--focus); }
.shot__veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem;
  padding: 0.9rem; text-align: left; color: #fff; opacity: 0;
  background: linear-gradient(to top, rgba(10, 18, 54, 0.92) 0%, rgba(10, 18, 54, 0.45) 45%, rgba(10, 18, 54, 0) 75%);
  transition: opacity var(--t) var(--ease);
}
.shot:hover .shot__veil, .shot:focus-visible .shot__veil { opacity: 1; }
.shot__zoom { position: absolute; top: 0.8rem; right: 0.8rem; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-gold); color: var(--navy-950); display: grid; place-items: center; }
.shot__zoom svg { width: 17px; height: 17px; }
.shot__cap { font-size: var(--fs-xs); line-height: 1.45; font-weight: 600; }

/* Teaser strip on the home page — one tidy row, uniform crop */
.shots--teaser { column-count: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-4); }
.shots--teaser .shot { margin: 0; aspect-ratio: 4 / 3; }
.shots--teaser .shot picture { display: block; width: 100%; height: 100%; }
.shots--teaser .shot img { width: 100%; height: 100%; object-fit: cover; }

.tab__n { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: var(--r-pill); background: rgba(16, 22, 46, 0.09); font-size: var(--fs-2xs); font-weight: 800; }
.tab[aria-selected="true"] .tab__n { background: var(--gold-100); color: var(--gold-700); }

/* Lightbox */
body.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7, 12, 36, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.lb.is-open { opacity: 1; }
.lb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: min(1200px, 100%); max-height: 100%; }
.lb__stage picture { display: block; max-height: calc(100dvh - 12rem); }
.lb__stage img { max-width: min(1200px, 92vw); max-height: calc(100dvh - 12rem); width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--sh-lg); background: var(--navy-900); transform: scale(0.97); transition: transform var(--t) var(--ease); }
.lb.is-open .lb__stage img { transform: none; }
.lb__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4rem 1rem; max-width: 60ch; text-align: center; color: var(--on-dark); font-size: var(--fs-sm); }
.lb__count { color: var(--gold-400); font-weight: 800; font-size: var(--fs-xs); letter-spacing: 0.06em; }
.lb__close, .lb__nav {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease);
}
.lb__close:hover, .lb__nav:hover { background: rgba(255, 255, 255, 0.2); }
.lb__close:focus-visible, .lb__nav:focus-visible { box-shadow: var(--focus); }
.lb__close svg, .lb__nav svg { width: 22px; height: 22px; }
.lb__close { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__nav:hover { transform: translateY(-50%) scale(1.06); }
.lb__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
@media (max-width: 640px) {
  .lb__nav { top: auto; bottom: 1rem; transform: none; width: 44px; height: 44px; }
  .lb__nav:hover { transform: none; }
  .lb__nav--prev { left: calc(50% - 60px); }
  .lb__nav--next { right: calc(50% - 60px); }
  .lb__stage img, .lb__stage picture { max-height: calc(100dvh - 15rem); }
  .lb__cap { padding-bottom: 3.5rem; }
}

/* 7. TABLES --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.rate-table th, .rate-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); }
.rate-table thead th { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); background: var(--sand); }
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table tbody tr { transition: background var(--t-fast); }
.rate-table tbody tr:hover { background: var(--navy-50); }
.rate-table td.rate { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; color: var(--navy-900); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rate-table td.rate small { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; margin-left: 0.2rem; }
.rate-table th.rate { text-align: right; }
.rate-table tr.is-highlight td { background: linear-gradient(90deg, var(--gold-100), transparent 70%); }
.rate-table tr.is-highlight td.rate { color: var(--gold-700); }
.rate-table .tag { display: inline-block; margin-left: 0.6rem; padding: 0.2rem 0.55rem; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--navy-50); color: var(--navy-800); vertical-align: middle; }
.rate-table .tag--gold { background: var(--gold-100); color: var(--gold-700); }
.rate-bar { height: 6px; border-radius: 3px; background: var(--sand-dark); overflow: hidden; min-width: 120px; }
.rate-bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad-gold); width: var(--w, 0%); transition: width 1s var(--ease); }
@media (max-width: 640px) { .rate-table .bar-col { display: none; } .rate-table th, .rate-table td { padding: 0.85rem 1rem; } }

/* Calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-md); }
.calc__form { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: var(--s-5); }
.calc__result { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--grad-navy); color: var(--on-dark); display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); }
.calc__result .label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-400); }
.calc__big { font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); font-weight: 500; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.calc__rows { display: grid; gap: 0.6rem; padding-top: var(--s-4); border-top: 1px solid var(--line-dark); }
.calc__rows div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); color: var(--on-dark-2); }
.calc__rows b { color: #fff; font-variant-numeric: tabular-nums; }
.calc__note { font-size: var(--fs-2xs); color: var(--on-dark-3); }
.range-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.4rem; }
.range-row label { font-weight: 700; color: var(--navy-900); font-size: var(--fs-sm); }
.range-row output { font-family: var(--font-display); font-size: 1.35rem; color: var(--navy-900); font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-500) var(--p, 0%), var(--sand-dark) var(--p, 0%)); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--navy-800); box-shadow: var(--sh-sm); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--navy-800); box-shadow: var(--sh-sm); cursor: pointer; }
input[type="range"]:focus-visible { box-shadow: var(--focus); }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.4rem; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; text-align: center; padding: 0.65rem 0.5rem; border-radius: var(--r-sm); border: 1.5px solid var(--line); font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.seg input:checked + span { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.seg input:focus-visible + span { box-shadow: var(--focus); }
@media (max-width: 800px) { .calc { grid-template-columns: 1fr; } }

/* 8. PEOPLE --------------------------------------------------------------- */
.founders { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.person { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-900); aspect-ratio: 4 / 5; isolation: isolate; }
.person img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease), filter var(--t-slow); }
.person:hover img { transform: scale(1.05); }
.person__body { position: absolute; inset: auto 0 0 0; padding: 4.5rem 1.25rem 1.25rem; background: linear-gradient(to top, rgba(10, 18, 54, 0.97) 0%, rgba(10, 18, 54, 0.88) 40%, rgba(10, 18, 54, 0.45) 75%, transparent 100%); color: #fff; }
.person__body b { display: block; color: #fff; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.2; text-shadow: 0 1px 8px rgba(10, 18, 54, 0.8); }
.person__body span { display: block; margin-top: 0.25rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-300); }
.person__frame { position: absolute; inset: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: calc(var(--r-lg) - 0.6rem); pointer-events: none; z-index: 1; }
@media (max-width: 960px) { .founders { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .founders { grid-template-columns: 1fr; } }

/* Board of directors — an honour board, not a card grid. With no photographs
   the typography has to do the work, so officers are set large and centred and
   the eleven directors run beneath in one ruled register. The panel and its
   inner hairline read as an engraved plaque, which suits a governance section.
   -------------------------------------------------------------------------- */
/* Roster sits beside a governance panel so the names are supporting detail
   rather than the whole section. Panel first on mobile: what the board does
   reads better before eleven names than after them. */
.board-layout { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: start; }
@media (max-width: 960px) { .board-layout { grid-template-columns: minmax(0, 1fr); }
  .roster__list { columns: 3; } }

.gov { min-width: 0; }
.gov__title { font-size: var(--fs-lg); color: #fff; margin-bottom: var(--s-4); }
.gov__lead { font-size: var(--fs-md); color: var(--on-dark); }
.gov p + p { margin-top: var(--s-4); }
.gov__facts { display: grid; gap: var(--s-4); margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); }
.gov__facts > div { display: flex; align-items: baseline; gap: 0.85rem; }
.gov__facts dt {
  flex: none; min-width: 4.6ch; font-family: var(--font-display); font-weight: 500; line-height: 1;
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem);
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.gov__facts dd { font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark-2); line-height: 1.35; }
/* Kannada numerals ride higher in the em box, so the gradient clip needs room. */
html[lang="kn"] .gov__facts dt { font-family: "Fraunces", "Noto Serif Kannada", serif; line-height: 1.2; }

.roster {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2rem, 1.5rem + 3vw, 3.75rem) clamp(1.25rem, 0.75rem + 2.5vw, 3.5rem);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(229, 185, 74, 0.26);
}
.roster::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-gold); }
.roster__frame { position: absolute; inset: 0.6rem; border: 1px solid rgba(229, 185, 74, 0.14); border-radius: calc(var(--r-xl) - 0.5rem); pointer-events: none; z-index: -1; }

/* Officers */
.roster__officers { display: grid; gap: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem); text-align: center; justify-items: center; }
.officer { max-width: 30rem; min-width: 0; }
.officer__role { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-400); }
/* Scoped to .roster so it beats `.section--dark p`, which would otherwise
   mute the officers to body-grey. */
.roster .officer__name { margin-top: 0.45rem; font-family: var(--font-display); font-weight: 500; line-height: var(--lh-snug); color: #fff; font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem); text-wrap: balance; overflow-wrap: anywhere; }
.roster__split { width: min(12rem, 60%); height: 1px; background: linear-gradient(90deg, transparent, rgba(229, 185, 74, 0.5), transparent); }

/* "Directors" rule */
.roster__rule { display: flex; align-items: center; gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 clamp(1.25rem, 1rem + 1vw, 2rem); }
.roster__rule::before, .roster__rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(229, 185, 74, 0.4), transparent); }
.roster__rule span { flex: none; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-2); }

/* The register. Columns keep eleven names from becoming a long scroll. */
.roster__list { columns: 2; column-gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.roster__item {
  position: relative; break-inside: avoid; -webkit-column-break-inside: avoid;
  padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff; font-weight: 600; font-size: var(--fs-base); line-height: 1.45; overflow-wrap: anywhere;
}
/* No marker or medallion beside a director's name: the hairline rules carry the
   register on their own, which reads as a formal roll rather than a bullet list. */
html[lang="kn"] .officer__role, html[lang="kn"] .roster__rule span { letter-spacing: 0.02em; text-transform: none; font-size: var(--fs-xs); }
html[lang="kn"] .roster__item { font-size: var(--fs-base); }

@media (min-width: 1500px) { .roster__list { columns: 3; } }
@media (max-width: 760px) {
  .roster__list { columns: 2; }
}
@media (max-width: 520px) {
  .roster__list { columns: 1; }
  .roster__split { display: none; }
  .roster__officers { gap: 1.5rem; }
  .officer { flex-basis: 100%; }
  .roster__item { padding-block: 0.7rem; }
}

/* 9. FORMS & CONTACT ------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.info-card { padding: clamp(1.5rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-xl); background: var(--grad-navy); color: var(--on-dark); }
.info-card h3 { color: #fff; margin-bottom: var(--s-4); }
.info-list { display: grid; gap: 1.1rem; }
.info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-list .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(211, 162, 51, 0.15); color: var(--gold-300); display: grid; place-items: center; }
.info-list .ic svg { width: 19px; height: 19px; }
.info-list span { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 0.15rem; }
.info-list a, .info-list p { color: var(--on-dark); font-size: var(--fs-sm); }
.info-list a:hover { color: var(--gold-300); }
.hours-table { width: 100%; }
.hours-table td { padding: 0.6rem 0; border-bottom: 1px solid var(--line-dark); font-size: var(--fs-sm); color: var(--on-dark-2); }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table td:last-child { text-align: right; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.hours-table .closed { color: var(--coral-500); }
.hours-note { margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--r-sm); background: rgba(211, 162, 51, 0.12); color: var(--gold-300); font-size: var(--fs-xs); font-weight: 700; display: flex; gap: 0.5rem; align-items: center; }
.hours-note svg { width: 16px; height: 16px; flex: none; }
.form-card { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--ivory); color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-700); background: #fff; box-shadow: 0 0 0 3px rgba(36, 67, 158, 0.15); }
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: 0.3rem; }
.form-note { font-size: var(--fs-xs); color: var(--text-3); }
.form-success { display: none; padding: 1.25rem 1.4rem; border-radius: var(--r-md); background: var(--teal-100); color: var(--teal-600); font-weight: 700; }
.form-success.is-visible { display: flex; gap: 0.75rem; align-items: center; }
/* No min-height: with aspect-ratio it wins over the ratio and drives the width
   past the container on narrow screens. The ratio alone keeps the box in bounds. */
.map { width: 100%; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-sm); aspect-ratio: 16 / 7; background: var(--sand); }
@media (max-width: 860px) { .map { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) { .map { aspect-ratio: 3 / 4; } }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.85); }
.map--placeholder { display: grid; place-items: center; text-align: center; padding: var(--s-6); }

/* WhatsApp FAB */
.wa-fab {
  position: fixed; z-index: 80; width: 58px; height: 58px; border-radius: 50%;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: #25d366; color: #fff; box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.6);
  transition: transform var(--t) var(--ease);
  /* Flex rather than grid so the centring survives any later display override. */
  display: flex; align-items: center; justify-content: center;
}
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab:hover { transform: translateY(-3px) scale(1.04); }
.wa-fab__tip { position: absolute; right: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; padding: 0.5rem 0.8rem; border-radius: var(--r-sm); background: var(--navy-950); color: #fff; font-size: var(--fs-xs); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t) var(--ease); }
.wa-fab:hover .wa-fab__tip, .wa-fab:focus-visible .wa-fab__tip { opacity: 1; transform: translateY(-50%); }

/* 10. FOOTER -------------------------------------------------------------- */
.site-footer { background: var(--navy-950); color: var(--on-dark-2); padding-top: var(--s-8); border-top: 4px solid; border-image: var(--grad-gold) 1; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s-6); padding-bottom: var(--s-7); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { --brand-mark: 72px; --cap1: 1.6rem; --cap2: 0.95rem; display: flex; width: 100%; max-width: 420px; align-items: center; }
.site-footer .brand__text { color: #fff; }
.footer-about { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--on-dark-3); max-width: 38ch; }
.footer-col h4 { color: #fff; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-col ul { display: grid; gap: 0.55rem; }
.footer-col a { font-size: var(--fs-sm); color: var(--on-dark-2); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--gold-300); }
.footer-contact li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-sm); }
.footer-contact svg { width: 16px; height: 16px; flex: none; color: var(--gold-400); margin-top: 0.25rem; }
.footer-hours { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--on-dark-3); line-height: 1.7; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--line-dark); font-size: var(--fs-xs); color: var(--on-dark-3); }
.footer-bottom .reg { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.footer-credit { display: flex; justify-content: center; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0 var(--s-7); font-size: var(--fs-xs); color: var(--on-dark-3); letter-spacing: 0.02em; }
.credit__name { position: relative; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-400); transition: color var(--t); }
.credit__name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--gold-400), transparent); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.credit__name:hover { color: #fff; }
.credit__name:hover::after { transform: scaleX(1); }
.credit__name:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; box-shadow: none; }

/* 11. MOTION -------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > :nth-child(1) { transition-delay: 0.02s; }
[data-reveal-stagger].is-in > :nth-child(2) { transition-delay: 0.09s; }
[data-reveal-stagger].is-in > :nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].is-in > :nth-child(4) { transition-delay: 0.23s; }
[data-reveal-stagger].is-in > :nth-child(5) { transition-delay: 0.3s; }
[data-reveal-stagger].is-in > :nth-child(6) { transition-delay: 0.37s; }
[data-reveal-stagger].is-in > :nth-child(n + 7) { transition-delay: 0.44s; }
.hero .hero__copy > * { animation: rise 0.9s var(--ease) both; }
.hero .hero__copy > :nth-child(1) { animation-delay: 0.05s; }
.hero .hero__copy > :nth-child(2) { animation-delay: 0.15s; }
.hero .hero__copy > :nth-child(3) { animation-delay: 0.25s; }
.hero .hero__copy > :nth-child(4) { animation-delay: 0.35s; }
.hero .hero__copy > :nth-child(5) { animation-delay: 0.45s; }
.rate-stack > * { animation: rise 0.9s var(--ease) both; }
.rate-stack > :nth-child(1) { animation-delay: 0.35s; }
.rate-stack > :nth-child(2) { animation-delay: 0.48s; }
.rate-stack > :nth-child(3) { animation-delay: 0.61s; }
.rate-stack > :nth-child(4) { animation-delay: 0.74s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.marquee__item .rate { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-600); }
.marquee__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); margin-left: 1.5rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}
@media print {
  .topbar, .site-header, .wa-fab, .site-footer, .cta-banner, .nav-scrim { display: none !important; }
  body { background: #fff; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
}


/* 12. TOUCH ERGONOMICS ------------------------------------------------------
   Below the off-canvas breakpoint every interactive element is finger-driven.
   Inline text links inherit their height from the line box, which lands them
   around 17-23px — roughly half a fingertip. These rules give them a real hit
   area without changing where the text sits, so the visual rhythm is intact.
   -------------------------------------------------------------------------- */
.lang-toggle__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; }

@media (max-width: 1100px) {
  /* Footer and contact lists: pad the block axis so the row grows, not the type. */
  .footer-col a,
  .footer-contact a,
  .info-list a,
  .footer-credit a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col ul { gap: 0; }
  .footer-contact li { align-items: center; }
  .footer-contact svg { margin-top: 0; }

  /* Breadcrumbs sit on a dark hero; a taller row also separates them from the H1. */
  .crumbs { gap: 0.25rem 0.5rem; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
  .crumbs li + li::before { align-self: center; }

  .link-arrow { min-height: 44px; }
  .lang-toggle__btn { min-height: 40px; }
  .topbar__list a { display: inline-flex; align-items: center; min-height: 38px; }

  /* The FAB overlaps the last row of content on short viewports. */
  .wa-fab { width: 54px; height: 54px;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .wa-fab svg { width: 28px; height: 28px; }
  .site-footer { padding-bottom: 4.5rem; }
}

/* Coarse pointers on larger screens (tablets in landscape) get the same treatment. */
@media (pointer: coarse) and (min-width: 1101px) {
  .footer-col a, .footer-contact a, .info-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
}


/* 13. RESPONSIVE HARDENING --------------------------------------------------
   Fixes for the things a width sweep from 320px up turned out to break.
   -------------------------------------------------------------------------- */

/* Footer columns were the last grid whose items still had min-width: auto, so a
   long column heading or the brand lockup could push the column past the edge. */
.footer-grid > * { min-width: 0; }
.footer-col h4 { overflow-wrap: anywhere; }
.footer-about { max-width: 38ch; overflow-wrap: anywhere; }


/* Phone, mail and WhatsApp links are the highest-intent taps on the site and
   they sit inline in prose, so they inherit an 18-23px line box. Give them a
   real target wherever they appear rather than chasing each container. */
@media (max-width: 1100px) {
  /* The FAB is excluded: it is already a 54px target and relies on its own
     grid centring, which `display: inline-flex` would override and shove the
     icon to the left edge of the circle. */
  a[href^="tel:"],
  a[href^="mailto:"],
  a[href*="wa.me"]:not(.wa-fab) { display: inline-flex; align-items: center; min-height: 44px; }
  /* Chips already carry their own padding and sit in a wrapping row. */
  a.chip[href^="tel:"],
  a.chip[href^="mailto:"] { min-height: 44px; }
}

/* Range sliders: the 6px track is the hit area on touch. Padding grows the
   element to a full finger while background-clip keeps the track 6px tall. */
@media (max-width: 1100px) {
  /* Negative margin pulls the surrounding rhythm back in: the element stays a
     44px target, but only the 6px track reads as occupied space. */
  input[type="range"] { height: 44px; padding-block: 19px; background-clip: content-box; margin-block: -13px; }
}

/* About hero with the full emblem. The emblem's ring carries the society's name
   and there is an NCSC ribbon beneath it; both are unreadable at header size, so
   the About hero gives it a column of its own. Decorative here (alt=""): the H1
   and the header already name the society. */
.page-hero__split {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
}
.page-hero__copy { min-width: 0; }
.page-hero__emblem { justify-self: center; width: min(100%, 380px); }
.page-hero__emblem img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(5, 10, 40, 0.55)); }
@media (max-width: 900px) {
  /* Emblem first on small screens: it works as a masthead above the headline. */
  .page-hero__split { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .page-hero__emblem { order: -1; justify-self: start; width: clamp(120px, 34vw, 190px); }
}


/* Founder portraits arrive with unrelated studio backgrounds (bright blue, foliage,
   navy, white). A shared navy wash and a touch less saturation make the row read
   as one set without visibly retouching anyone. */
.founders .person img { filter: saturate(0.82) contrast(1.03); }
.founders .person::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 27, 77, 0.16), rgba(15, 27, 77, 0.06));
  mix-blend-mode: multiply;
}
.founders .person__body, .founders .person__frame { z-index: 2; }

/* Five featured plans in three columns leaves one empty cell. The flagship plan
   takes it: 3 cards, then 1 + the 999-day card across two columns. */
@media (min-width: 1000px) {
  .grid--3 > .fd-card--featured { grid-column: span 2; }
}

/* Deposit calculator: tenure in days ------------------------------------------ */
.days-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.75rem; gap: 0.85rem; align-items: center; }
.days-row input[type="number"] {
  width: 100%; padding: 0.55rem 0.5rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--ivory);
  font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.days-row input[type="number"]::-webkit-outer-spin-button, .days-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.days-row input[type="number"]:focus { outline: none; border-color: var(--navy-700); background: #fff; box-shadow: 0 0 0 3px rgba(36, 67, 158, 0.15); }
.calc__form .hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: 0.35rem; }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.6rem; }
.calc__form .chips button { padding-inline: 0.25rem; text-align: center; white-space: nowrap; font-size: 0.76rem; letter-spacing: 0; }
html[lang="kn"] .calc__form .chips button { font-size: 0.7rem; }
@media (max-width: 359px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field--cat { margin-top: 0.85rem; }
.chips button {
  min-height: 36px; padding: 0.35rem 0.8rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: var(--fs-xs); color: var(--navy-900); font-variant-numeric: tabular-nums;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chips button:hover { border-color: var(--navy-800); }
.chips button[aria-pressed="true"] { background: var(--gold-100); border-color: var(--gold-400); color: var(--gold-700); }
.field__label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); margin-bottom: 0.4rem; }
.field--cat .seg { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.calc__slab { font-size: var(--fs-xs); color: var(--text-3); margin-top: -0.5rem; }
.calc__slab b { color: var(--navy-900); }