/* ==========================================================================
   Velliyoor Agricultural & Social Welfare Co-operative Society Ltd. No. D3307
   Main stylesheet
   Brand palette is derived from the society logo (deep co-operative blue)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Blues sampled from the logo artwork */
  --brand:            #094198;
  --brand-dark:       #102d55;
  --brand-darker:     #102d55;
  --brand-mid:        #2e66be;
  --brand-light:      #e8eefa;
  --brand-lighter:    #f4f7fd;

  /* Accent — warm gold, taken from the society's own gold-loan creatives.
     Used for buttons, links on dark ground and small highlights. */
  --accent:           #f0b429;
  --accent-dark:      #c8901a;
  --accent-soft:      #fdf4e0;

  --ink:              #10131a;
  --body:             #444d5e;
  --muted:            #6b7486;
  --line:             #dfe4ee;
  --white:            #ffffff;
  --surface:          #f7f9fc;

  --radius:           10px;
  --radius-lg:        16px;
  --shadow-sm:        0 1px 2px rgba(6, 45, 107, .06), 0 2px 8px rgba(6, 45, 107, .06);
  --shadow-md:        0 4px 12px rgba(6, 45, 107, .09), 0 12px 28px rgba(6, 45, 107, .08);
  --shadow-lg:        0 10px 24px rgba(6, 45, 107, .12), 0 24px 60px rgba(6, 45, 107, .12);

  --wrap:             1180px;
  --gutter:           22px;

  --font-en: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-ml: "Noto Sans Malayalam", "Manjari", "Meera", "AnjaliOldLipi",
             "Nirmala UI", "Kartika", sans-serif;

  --header-h: 84px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-en);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* When Malayalam is active the whole document switches to a Malayalam-capable
   stack; Latin glyphs (numbers, Reg. No., e-mail) still fall back to Manrope. */
body.lang-ml {
  font-family: var(--font-ml), var(--font-en);
  line-height: 1.85;
}
body.lang-ml h1, body.lang-ml h2, body.lang-ml h3,
body.lang-ml h4, body.lang-ml .btn, body.lang-ml .nav a {
  line-height: 1.55;
  letter-spacing: 0;
}

img { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.24rem + 1.6vw, 2.4rem); }
h3 { font-size: clamp(1.12rem, 1.02rem + .45vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p  { margin: 0 0 1.05em; }
ul { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: .38em; }

a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-dark); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.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: 12px; top: -60px; z-index: 999;
  background: var(--accent); color: var(--brand-darker);
  padding: 10px 18px; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700; transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Buttons & small components
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .78em 1.55em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--accent);
  color: var(--brand-darker);
  box-shadow: 0 6px 16px rgba(200, 144, 26, .32);
}
.btn-primary:hover { background: #ffc347; color: var(--brand-darker); }

.btn-solid {
  background: var(--brand);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(9, 65, 152, .26);
}
.btn-solid:hover { background: var(--brand-dark); color: var(--white); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: var(--white); border-color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline:hover { background: var(--brand); color: var(--white); }

.btn-sm { padding: .58em 1.15em; font-size: .86rem; }

.eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: .7rem;
}
body.lang-ml .eyebrow { letter-spacing: .06em; text-transform: none; font-size: .85rem; }

.section { padding: clamp(52px, 6vw, 88px) 0; }
.section-tight { padding: clamp(38px, 4vw, 60px) 0; }
.section-alt { background: var(--surface); }
.section-brand { background: var(--brand-darker); color: rgba(255, 255, 255, .82); }
.stats-band { position: relative; overflow: hidden; }
.stats-band::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/img/hero/office.jpeg") center/cover no-repeat;
  opacity: .16;
}
.stats-band .wrap { position: relative; z-index: 2; }
.section-brand h2, .section-brand h3 { color: #fff; }

.section-head { max-width: 780px; margin-bottom: clamp(28px, 3.5vw, 46px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; font-size: 1.02rem; }
.section-brand .section-head p { color: rgba(255, 255, 255, .72); }

.rule {
  width: 62px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--brand-mid));
  margin: 0 0 1.1rem;
}
.section-head.center .rule { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--brand-darker);
  color: rgba(255, 255, 255, .8);
  font-size: .84rem;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 42px; flex-wrap: wrap;
}
.topbar-info { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar-info a, .topbar-info span {
  display: inline-flex; align-items: center; gap: .45em;
  color: rgba(255, 255, 255, .82);
}
.topbar-info a:hover { color: var(--accent); }
.topbar svg { width: 15px; height: 15px; flex: none; fill: var(--accent); }
.topbar .topbar-hours-icon { fill: var(--accent); }
.topbar .topbar-hours-icon path { fill: none; stroke: var(--brand-darker); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.topbar-actions { display: flex; align-items: center; gap: 14px; }

.topbar-reg {
  display: inline-flex; align-items: center;
  color: var(--accent); font-weight: 800; font-size: .8rem;
  border: 1px solid rgba(240, 180, 41, .45);
  padding: .22em .9em; border-radius: 999px;
  white-space: nowrap;
}

/* Language switch */
.lang-switch {
  display: inline-flex;
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-switch button {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-family: var(--font-en);
  font-size: .8rem; font-weight: 700;
  padding: .3em 1em;
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease;
}
.lang-switch button:last-child { font-family: var(--font-ml), var(--font-en); }
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--brand-darker);
}

/* --------------------------------------------------------------------------
   5. Header & navigation
   The brand row and the menu sit on separate bars: the eight nav items are
   noticeably wider in Malayalam and would crowd the society name otherwise.
   -------------------------------------------------------------------------- */
/* Header and menu bar travel together so the society name stays on screen
   while scrolling; the header condenses once the page has moved. */
.sticky-head {
  position: sticky; top: 0; z-index: 60;
  box-shadow: 0 2px 10px rgba(4, 31, 75, .18);
}

.site-header { background: var(--white); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h); padding-block: 14px;
  transition: min-height .22s ease, padding .22s ease;
}

body.scrolled .site-header .wrap { min-height: 0; padding-block: 8px; }
body.scrolled .brand img { width: 46px; height: 46px; }
body.scrolled .brand-sub { display: none; }
body.scrolled .header-call { display: none; }
body.scrolled .brand-name { font-size: 1.5rem; }
body.scrolled.lang-ml .brand-name { font-size: 1.4rem; }

.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand img { width: 72px; height: 72px; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-size: 2.15rem; font-weight: 900; color: var(--brand);
  letter-spacing: .01em; line-height: 1;
}
.brand-line {
  font-size: .96rem; font-weight: 800; color: var(--brand-dark);
  line-height: 1.25; margin-top: .18em; letter-spacing: -.005em;
}
.brand-sub {
  font-size: .8rem; font-weight: 700; color: var(--accent-dark);
  line-height: 1.3; margin-top: .18em;
}
/* English wordmark follows the Society's printed serif lettering. */
body.lang-en .brand-name,
body.lang-en .brand-line {
  font-family: "Times New Roman", Times, "Liberation Serif", serif;
  font-weight: 700;
  text-transform: uppercase;
}
body.lang-en .brand-name { letter-spacing: .025em; }
body.lang-en .brand-line { letter-spacing: 0; }

body.lang-ml .brand-name { font-size: 1.95rem; line-height: 1.2; }
body.lang-ml .brand-line { font-size: .92rem; }
body.lang-ml .brand-sub { font-size: .8rem; }

body.scrolled .brand-line { display: none; }

.header-aside { display: flex; align-items: center; gap: 18px; flex: none; }

.header-call { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.header-call .ico {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-light); display: grid; place-items: center; flex: none;
}
.header-call .ico svg { width: 19px; height: 19px; fill: var(--brand); }
.header-call .txt { display: flex; flex-direction: column; line-height: 1.28; }
.header-call small { font-size: .74rem; color: var(--muted); font-weight: 600; }
.header-call strong { font-size: 1rem; font-weight: 800; color: var(--brand); font-family: var(--font-en); }
.header-call:hover strong { color: var(--accent-dark); }

/* Menu bar */
.navbar { background: var(--brand); }
.navbar .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; min-height: 52px;
}
.navbar-label { display: none; color: #fff; font-weight: 800; font-size: .95rem; }

.nav-toggle {
  display: none; appearance: none; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .1); border-radius: var(--radius);
  width: 44px; height: 38px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: #fff;
  border-radius: 2px; position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.nav ul {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.nav a {
  display: block;
  padding: .82em .95em;
  color: rgba(255, 255, 255, .88);
  font-size: .93rem;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: .95em; right: .95em; bottom: .5em;
  height: 2.5px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }

body.lang-ml .nav a { font-size: .9rem; padding: .82em .78em; }
body.lang-ml .nav a::after { left: .78em; right: .78em; }

/* --------------------------------------------------------------------------
   6. Hero carousel
   Light slides on purpose — the page used to read as one block of blue.
   Each slide pairs a headline with the Society's own photograph or artwork.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-slide {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(470px, 53vw, 640px);
  padding: clamp(38px, 4.6vw, 62px) 0 clamp(70px, 7vw, 96px);
}
.hero-slide[hidden] { display: none; }
.hero-slide.is-active { animation: slideIn .5s ease both; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Per-slide grounds: a photograph slide, a warm gold slide, a cool slide */
.slide-a { background: linear-gradient(120deg, #f4f8ff 0%, #eaf0fb 46%, #fdfaf2 100%); }
.slide-b { background: linear-gradient(120deg, #fff9ec 0%, #fdf0d4 52%, #f6f8ff 100%); }
.slide-c { background: linear-gradient(120deg, #f1f8f6 0%, #e6f1f5 50%, #f7f9ff 100%); }

/* Soft brand shapes + a large watermark of the emblem */
.hero-slide::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(46% 60% at 88% 12%, rgba(240, 180, 41, .20), transparent 70%),
    radial-gradient(42% 58% at 4% 88%, rgba(9, 65, 152, .14), transparent 72%);
}
.hero-slide::after {
  content: "";
  position: absolute; z-index: 0;
  left: -110px; bottom: -140px; width: 460px; height: 460px;
  background: url("../assets/img/logo-mark.png") center/contain no-repeat;
  opacity: .05;
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
}

.hero-copy h1 { margin-bottom: .42em; max-width: 18ch; }
.hero-copy p {
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  color: var(--body);
  max-width: 48ch;
  margin-bottom: 1.7em;
}

.hero-tag {
  display: inline-flex; align-items: center; gap: .55em;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(9, 65, 152, .16);
  color: var(--brand-dark);
  padding: .44em 1.1em;
  border-radius: 999px;
  font-size: .82rem; font-weight: 800;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}
.hero-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The big rate headline on the gold-loan slide */
.big-rate {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(3.4rem, 2.2rem + 5vw, 5.6rem);
  font-weight: 900; line-height: .92;
  color: var(--accent-dark);
  letter-spacing: -.03em;
}
.big-rate .rate-decimal { font-size: .8em; }
.big-rate small { font-size: .38em; font-weight: 800; }
.rate-sub {
  display: block;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  color: var(--ink); margin-top: .18em;
}

/* Slide artwork */
.hero-art { display: flex; justify-content: center; }
.hero-art figure { margin: 0; }

.art-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid #fff;
  max-width: 560px;
}
.art-photo img { width: 100%; height: auto; display: block; }
.art-photo figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 16px 13px;
  background: linear-gradient(transparent, rgba(4, 31, 75, .86));
  color: #fff; font-size: .86rem; font-weight: 700;
}

.art-poster {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid #fff;
  max-width: 360px;
}
.art-poster img { width: 100%; height: auto; display: block; }

/* Carousel controls */
/* Arrows and dots share one control bar so nothing sits over the copy */
.hero-nav {
  position: absolute; bottom: 22px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(9, 65, 152, .2);
  background: rgba(255, 255, 255, .92);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color .18s ease;
}
.hero-nav svg { width: 18px; height: 18px; fill: var(--brand); }
.hero-nav:hover { background: var(--brand); }
.hero-nav:hover svg { fill: #fff; }
.hero-nav.prev { left: calc(50% - 84px); }
.hero-nav.next { left: calc(50% + 44px); }

.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 33px; z-index: 3;
  display: flex; justify-content: center; gap: 9px;
}
.hero-dots button {
  width: 11px; height: 11px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(9, 65, 152, .35);
  background: rgba(255, 255, 255, .75);
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}
.hero-dots button[aria-selected="true"] {
  width: 30px; background: var(--accent); border-color: var(--accent-dark);
}

/* --------------------------------------------------------------------------
   6b. Highlight strip under the hero
   -------------------------------------------------------------------------- */
.ratestrip { background: var(--brand-darker); }
.ratestrip .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.rate-item {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 18px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.rate-item:last-child { border-right: 0; }
.rate-item .ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(240, 180, 41, .16);
  display: grid; place-items: center;
}
.rate-item .ico svg { width: 21px; height: 21px; fill: var(--accent); }
.rate-item .txt { display: flex; flex-direction: column; line-height: 1.25; }
.rate-item b {
  font-family: var(--font-en);
  font-size: 1.32rem; font-weight: 900; color: #fff;
}
body.lang-ml .rate-item b { font-family: var(--font-ml), var(--font-en); font-size: 1.16rem; }
.rate-item span span, .rate-item .txt > span:last-child {
  font-size: .84rem; color: rgba(255, 255, 255, .72); font-weight: 600;
}

/* Page banner for interior pages */
.page-banner {
  position: relative;
  background: linear-gradient(140deg, var(--brand-dark), var(--brand-darker));
  color: #fff;
  padding: clamp(42px, 5vw, 76px) 0 clamp(38px, 4.4vw, 62px);
  overflow: hidden;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/img/hero/office.jpeg") center/cover no-repeat; opacity: .14;
}
.page-banner .wrap { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; margin-bottom: .25em; }
.page-banner p { color: rgba(255, 255, 255, .78); max-width: 62ch; margin: 0; }

.crumbs {
  display: flex; gap: .5em; flex-wrap: wrap; align-items: center;
  font-size: .84rem; color: rgba(255, 255, 255, .62); margin-bottom: .9rem;
}
.crumbs a { color: rgba(255, 255, 255, .8); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: .5; }

/* --------------------------------------------------------------------------
   7. Quick links strip
   -------------------------------------------------------------------------- */
.quicklinks { padding: clamp(46px, 5vw, 72px) 0 0; }
.quicklinks .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.qcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow-md);
  display: block;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.qcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(9, 65, 152, .3);
}
.qcard .ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--brand-light);
  display: grid; place-items: center;
  margin-bottom: 15px;
}
.qcard .ico svg { width: 26px; height: 26px; fill: var(--brand); }
.qcard:nth-child(even) .ico { background: var(--accent-soft); }
.qcard:nth-child(even) .ico svg { fill: var(--accent-dark); }
.qcard h3 { margin-bottom: .25em; font-size: 1.06rem; }
.qcard p { margin: 0; font-size: .9rem; color: var(--muted); }
.qcard .more {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: .8rem; font-size: .85rem; font-weight: 800; color: var(--brand);
}
.qcard:hover .more { color: var(--accent-dark); }

/* --------------------------------------------------------------------------
   8. Generic grids & cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.split .media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(9, 65, 152, .25); }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-mid));
  display: grid; place-items: center; margin-bottom: 16px;
}
.card .ico svg { width: 26px; height: 26px; fill: #fff; }
.card.accent .ico { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); }

.card-list { list-style: none; padding: 0; margin: 0; }
.card-list li {
  display: flex; gap: .65em; align-items: flex-start;
  padding: .5em 0; border-bottom: 1px dashed var(--line);
  font-size: .95rem;
}
.card-list li:last-child { border-bottom: 0; }
.card-list li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: .62em;
  border-radius: 50%; background: var(--accent);
}

/* Numbered product rows (loans / deposits) */
.product {
  display: flex; gap: 20px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(9, 65, 152, .25); }
.product .num {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center;
  font-weight: 900; font-size: 1.05rem; font-family: var(--font-en);
}
.product.highlight { border-color: var(--accent); background: var(--accent-soft); }
.product.highlight .num { background: var(--accent); color: var(--brand-darker); }
.product h3 { margin-bottom: .2em; }
.product p { margin: 0; font-size: .94rem; color: var(--muted); }
.product .tag {
  display: inline-block; margin-top: .7rem;
  background: var(--brand-darker); color: var(--accent);
  font-size: .8rem; font-weight: 800;
  padding: .28em .85em; border-radius: 999px;
  font-family: var(--font-en);
}

/* --------------------------------------------------------------------------
   9. Stats
   -------------------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; text-align: center;
}
.stat {
  padding: 26px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
}
.stat .n {
  display: block; font-family: var(--font-en);
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.7rem);
  font-weight: 900; color: var(--accent); line-height: 1.1;
}
.stat .l { font-size: .9rem; color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .95rem; }
caption { text-align: left; padding: 16px 20px 0; color: var(--muted); font-size: .88rem; }
th, td { padding: 14px 20px; text-align: left; vertical-align: top; }
thead th {
  background: var(--brand-darker); color: #fff;
  font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
body.lang-ml thead th { letter-spacing: 0; text-transform: none; font-size: .9rem; }
tbody tr { border-top: 1px solid var(--line); }
tbody tr:nth-child(even) { background: var(--brand-lighter); }
tbody th { font-weight: 800; color: var(--ink); width: 34%; }
td a { font-weight: 700; }

/* --------------------------------------------------------------------------
   11. Board of directors
   -------------------------------------------------------------------------- */
.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.director {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.director:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(9, 65, 152, .25); }
.director .photo {
  background: linear-gradient(160deg, var(--brand-light), #fff);
  padding: 24px 20px 0;
}
.director .photo img {
  width: 122px; height: 122px; border-radius: 50%;
  margin-inline: auto; object-fit: cover;
  border: 4px solid #fff; box-shadow: var(--shadow-sm); background: #fff;
}
.director .info { padding: 16px 18px 22px; }
.director h3 { font-size: 1.02rem; margin-bottom: .18em; }
.director .role {
  display: inline-block; font-size: .78rem; font-weight: 800;
  color: var(--brand); background: var(--brand-light);
  padding: .22em .8em; border-radius: 999px; margin-bottom: .7rem;
}
.director.lead .role { background: var(--accent); color: var(--brand-darker); }
.director .tel {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .9rem; font-weight: 700; font-family: var(--font-en);
}
.director .tel svg { width: 14px; height: 14px; fill: var(--accent-dark); }

/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 32px;
}
.filters button {
  appearance: none; cursor: pointer;
  background: #fff; border: 1px solid var(--line);
  color: var(--body); font-family: inherit;
  font-size: .9rem; font-weight: 700;
  padding: .55em 1.25em; border-radius: 999px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.filters button:hover { border-color: var(--brand); color: var(--brand); }
.filters button[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gitem {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--brand-light);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  box-shadow: var(--shadow-sm);
}
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.gitem:hover img { transform: scale(1.06); }
.gitem figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 34px 16px 14px;
  background: linear-gradient(transparent, rgba(4, 31, 75, .88));
  color: #fff; font-size: .9rem; font-weight: 700;
}
.gitem .cat {
  position: absolute; top: 12px; left: 12px;
  background: var(--accent); color: var(--brand-darker);
  font-size: .72rem; font-weight: 800;
  padding: .25em .7em; border-radius: 999px;
}
.gitem[hidden] { display: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 16, 38, .93);
  display: none; align-items: center; justify-content: center;
  padding: 26px;
}
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: 960px; width: 100%; text-align: center; }
.lightbox img {
  max-height: 76vh; width: auto; margin-inline: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.lightbox figcaption { color: rgba(255, 255, 255, .86); margin-top: 14px; font-weight: 700; }
.lightbox .close {
  position: absolute; top: 18px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox .close:hover { background: rgba(255, 255, 255, .22); }
.lightbox .nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 1.4rem; cursor: pointer;
}
.lightbox .nav-btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox .prev { left: 20px; }
.lightbox .next { right: 20px; }

/* Video */
.video-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--brand-darker);
  aspect-ratio: 16 / 9;
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); }

.info-block {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.info-block:last-child { border-bottom: 0; }
.info-block .ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-light); display: grid; place-items: center;
}
.info-block .ico svg { width: 21px; height: 21px; fill: var(--brand); }
.info-block h4 { margin-bottom: .18em; font-size: .98rem; }
.info-block p { margin: 0; font-size: .95rem; }
.info-block a { font-weight: 700; }

.map-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--brand-light);
  min-height: 420px;
  height: 100%;
}
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
.contact-grid { align-items: stretch; }

/* Quick-action tiles on the contact page */
.actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.action-tile {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.action-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(9, 65, 152, .25); }
.action-tile .ico {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--brand-light); display: grid; place-items: center;
}
.action-tile .ico svg { width: 22px; height: 22px; fill: var(--brand); }
.action-tile b { display: block; color: var(--ink); font-size: 1rem; }
.action-tile span { font-size: .88rem; color: var(--muted); }

@media (max-width: 900px) {
  .actions-grid { grid-template-columns: 1fr; }
}

.form-note { font-size: .84rem; color: var(--muted); margin: 14px 0 0; }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-darker) 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: rgba(255, 255, 255, .8); margin: 0; max-width: 58ch; }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brand-darker);
  color: rgba(255, 255, 255, .72);
  font-size: .93rem;
  margin-top: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 34px;
  padding: clamp(44px, 5vw, 66px) 0 clamp(30px, 3.4vw, 44px);
}
.site-footer h4 {
  color: #fff; font-size: .92rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1em;
}
body.lang-ml .site-footer h4 { letter-spacing: 0; text-transform: none; font-size: 1rem; }
.site-footer a { color: rgba(255, 255, 255, .74); }
.site-footer a:hover { color: var(--accent); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .55em; }

.footer-brand { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1.1rem; }
.footer-brand img { width: 54px; height: 54px; flex: none; }
.footer-brand strong { display: block; color: #fff; font-size: 1.02rem; line-height: 1.3; }
.footer-brand span { font-size: .82rem; color: rgba(255, 255, 255, .6); }
.footer-motto {
  color: var(--accent); font-weight: 700; font-size: .95rem;
  border-left: 3px solid var(--accent); padding-left: 12px; margin: 0;
}

.footer-contact li { display: flex; gap: .7em; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; fill: var(--accent); flex: none; margin-top: .35em; }

.credit { display: inline-flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.credit a { color: var(--accent); font-weight: 700; }
.credit a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  /* right padding keeps the credit clear of the floating back-to-top button */
  padding: 18px 78px 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  font-size: .85rem; color: rgba(255, 255, 255, .56);
}

/* --------------------------------------------------------------------------
   15b. Back-to-top button
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(4, 31, 75, .32);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease,
              visibility .25s ease, background-color .2s ease;
}
.to-top svg { width: 22px; height: 22px; fill: currentColor; }
.to-top:hover { background: var(--accent); color: var(--brand-darker); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 680px) {
  .to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }

  /* the bar stacks on small screens, so give the button its own space below */
  .footer-bottom { padding: 18px 0 68px; }
}

/* --------------------------------------------------------------------------
   16. Reveal-on-scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav a { padding: .82em .72em; font-size: .9rem; }
  .nav a::after { left: .72em; right: .72em; }
  body.lang-ml .nav a { font-size: .87rem; padding: .82em .6em; }
  body.lang-ml .nav a::after { left: .6em; right: .6em; }
}

@media (max-width: 1080px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); }
  .quicklinks .grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .navbar { position: relative; }
  .navbar .wrap { justify-content: space-between; }
  body.scrolled .brand img { width: 36px; height: 36px; }
  .navbar-label { display: block; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--brand-dark);
    box-shadow: var(--shadow-md);
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
    z-index: 60;
  }
  .nav.open { max-height: 72vh; overflow-y: auto; }
  .nav ul { flex-direction: column; align-items: stretch; padding: 6px var(--gutter) 14px; gap: 0; flex-wrap: nowrap; }
  .nav a { padding: .85em .2em; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); }

  .header-call { display: none; }

  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy h1 { max-width: none; }
  .hero-copy p { max-width: none; margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-art { order: -1; margin-bottom: 26px; }
  .art-photo, .art-poster { max-width: 420px; }
  .ratestrip .wrap { grid-template-columns: repeat(2, 1fr); }
  .rate-item:nth-child(2) { border-right: 0; }
  .rate-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .brand img { width: 58px; height: 58px; }
  .brand-name { font-size: 1.8rem; }
  .brand-line { font-size: .88rem; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .topbar .wrap { justify-content: center; min-height: 0; padding-block: 8px; }
  .topbar-info { gap: 14px; justify-content: center; font-size: .78rem; }
  .topbar-actions { justify-content: center; flex-wrap: wrap; gap: 10px; }
  .topbar-reg { font-size: .76rem; padding: .2em .8em; }
  .site-header .wrap { gap: 14px; }
  .header-aside .btn { display: none; }
  .brand img { width: 50px; height: 50px; }
  .brand-name { font-size: 1.5rem; }
  .brand-line { font-size: .78rem; }
  .brand-sub { font-size: .7rem; }
  body.lang-ml .brand-name { font-size: 1.35rem; }
  .ratestrip .wrap { grid-template-columns: 1fr; }
  .rate-item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .rate-item:last-child { border-bottom: 0; }
  .art-photo, .art-poster { max-width: 100%; }
  .quicklinks .grid, .grid-2, .grid-3, .grid-4,
  .board-grid, .gallery-grid, .footer-top { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .product { flex-direction: column; gap: 14px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .lightbox .nav-btn { display: none; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .navbar, .nav-toggle, .nav, .lightbox, .to-top, .cta-band, .filters { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero, .page-banner { background: #fff; color: #000; }
  .hero h1, .page-banner h1 { color: #000; }
  .site-footer { background: #fff; color: #000; }
}
/* Consolidated homepage products and services. */
.offering-showcase { background: #faf8f2; padding-top: 76px; color: #102d55; }
.offering-wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.offering-heading { text-align: center; margin-bottom: 40px; }
.offering-eyebrow { color: #9b701f; font-size: .75rem; font-weight: 700; letter-spacing: .18em; margin: 0 0 14px; }
.offering-heading h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.2; color: #102d55; margin: 0 0 14px; }
.offering-intro { color: #616975; margin: 0; }
.offering-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offering-product { min-width: 0; }
.offering-photo { display: block; position: relative; overflow: hidden; aspect-ratio: 878.5 / 895; }
.offering-photo img { position: absolute; width: 200%; max-width: none; height: 100%; left: calc(var(--product-index) * -100%); top: 0; }
.offering-product-copy { padding: 12px 32px 40px; }
.offering-product-copy h3 { color: #102d55; font: 700 2.2rem/1.2 Georgia, 'Times New Roman', serif; margin: 0 0 6px; }
.offering-count { color: #7a715f; font-size: .85rem; margin: 0 0 18px; }
.offering-schemes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 25px; }
.offering-schemes a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding-block: 9px; font-size: .94rem; color: #203c60; border-bottom: 1px solid #e7e2d6; }
.offering-arrow { color: #b38b37; flex: 0 0 auto; }
.offering-schemes a:hover, .offering-service:hover .offering-service-name { color: #996e16; }
.offering-services { padding: 46px 0 55px; border-top: 1px solid #e6dfcf; background: #f7f4eb; }
.offering-services .offering-heading { margin-bottom: 22px; }
.offering-services .offering-heading h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.offering-service-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offering-service-grid li { border-bottom: 1px solid #e0dacd; }
.offering-service-grid li:nth-child(-n+3) { border-top: 1px solid #e0dacd; }
.offering-service { display: flex; align-items: center; min-height: 158px; padding: 16px 22px; gap: 16px; color: #18365d; }
.offering-service-name { font-weight: 600; font-size: 1.12rem; line-height: 1.4; flex: 1; }
.offering-icon { width: 100px; height: 100px; flex: 0 0 100px; position: relative; overflow: hidden; mix-blend-mode: multiply; }
.offering-icon img { position: absolute; max-width: none; width: 384px; height: 256px; left: var(--sprite-left); top: var(--sprite-top); }
.offering-all { text-align: center; margin-top: 30px; font-weight: 600; }
.offering-showcase a:focus-visible { outline: 3px solid #bd8d29; outline-offset: 4px; border-radius: 3px; }
body.lang-ml .offering-heading h2, body.lang-ml .offering-product-copy h3 { font-family: var(--font-ml); line-height: 1.5; }
body.lang-ml .offering-schemes a { font-size: .88rem; }
#our-services, #fixed, #savings, #recurring, #day, #current, #monthly, #personal, #business, #non-agri, #appliances, #gold, #locker, #bill-payments, #transfers, #kiosk, #doorstep, #community { scroll-margin-top: 140px; }
@media (max-width: 1000px) {
 .offering-product-copy { padding-inline: 20px; }
 .offering-service { gap: 8px; padding-inline: 10px; }
 .offering-icon { width: 80px; flex-basis: 80px; }
 .offering-service-name { font-size: 1rem; }
}
@media (max-width: 700px) {
 .offering-showcase { padding-top: 45px; }
 .offering-wrap { width: calc(100% - 32px); }
 .offering-heading { margin-bottom: 25px; }
 .offering-products { grid-template-columns: 1fr; gap: 20px; }
 .offering-photo { aspect-ratio: 1.25; }
 .offering-photo img { height: auto; }
 .offering-product-copy { padding: 12px 8px 20px; }
 .offering-product-copy h3 { font-size: 1.9rem; }
 .offering-schemes { column-gap: 18px; }
 .offering-schemes a { font-size: .88rem; }
 .offering-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .offering-service-grid li:nth-child(3) { border-top: 0; }
 .offering-service { flex-wrap: wrap; justify-content: center; gap: 5px; padding: 12px 8px 18px; text-align: center; }
 .offering-icon { width: 100px; flex-basis: 100px; }
 .offering-service-name { flex-basis: 100%; font-size: .98rem; }
 .offering-service > .offering-arrow { display: none; }
 .offering-services { padding-block: 35px; }
}
/* Preserve complete ribbon artwork and illustration crops on narrow screens. */
@media (min-width:701px) and (max-width:1000px) {
 .offering-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .offering-service-grid li:nth-child(3) { border-top: 0; }
 .offering-icon { width:100px; flex-basis:100px; }
}
@media (max-width:700px) {
 .offering-photo { aspect-ratio:878.5 / 895; }
}
/* Distinct product pictograms retain short, scannable scheme names. */
.offering-schemes a { justify-content: flex-start; gap: 10px; border-radius: 6px; transition: background-color .18s ease; }
.offering-schemes a > span[data-en] { flex: 1; min-width: 0; }
.scheme-icon { display: grid; place-items: center; width: 34px; height: 38px; flex: 0 0 34px; color: #16497b; }
.scheme-icon svg { width: 25px; height: 25px; }
.offering-product:nth-child(2) .scheme-icon { color: #9b701f; }
.offering-schemes a:hover { background: #efeade; }
@media (max-width:700px) {
 .offering-schemes { column-gap: 12px; }
 .offering-schemes a { gap: 6px; }
 .scheme-icon { width: 25px; flex-basis:25px; }
 .scheme-icon svg { width:22px; height:22px; }
 .offering-schemes .offering-arrow { display:none; }
}
@media (prefers-reduced-motion:reduce) { .offering-schemes a { transition:none; } }
/* About Us: community story, matching the approved ivory editorial mock. */
.about-story { color:#425570; background:#fff; }
.about-story h1,.about-story h2,.about-story h3 { color:#102d55; font-family:Georgia,'Times New Roman',serif; }
.about-story h1 { font-size:clamp(2.3rem,3.5vw,3.7rem); line-height:1.12; margin:18px 0; }
.about-story h2 { font-size:clamp(1.9rem,2.7vw,2.8rem); line-height:1.17; margin:10px 0 22px; }
.about-story p { line-height:1.7; }
.about-columns { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-intro { background:#faf8f2; padding:38px 0 45px; }
.about-crumbs { display:flex; gap:8px; font-size:.8rem; margin-bottom:38px; }
.about-eyebrow { font-size:.74rem; color:#936819; font-weight:800; letter-spacing:.15em; margin:0; }
.about-lead { font-size:1.08rem; max-width:510px; }
.about-office { width:100%; border-radius:16px; box-shadow:0 8px 22px #102d5518; }
.about-facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:38px; }
.about-facts div { padding:0 22px; border-right:1px solid #dfd3bc; }
.about-facts div:first-child { padding-left:0; }
.about-facts div:last-child { border:0; }
.about-facts strong { display:block; font:700 1.8rem Georgia,serif; color:#102d55; }
.about-facts span { font-size:.8rem; display:block; margin-top:7px; }
.about-community { padding-block:60px; grid-template-columns:1.2fr 1fr; }
.about-community img { width:100%; border-radius:12px; }
.about-community blockquote { margin:25px 0; padding-left:22px; border-left:3px solid #c89330; font:italic 1.5rem/1.5 Georgia,serif; color:#102d55; }
.about-journey { padding-block:15px 45px; }
.about-timeline { list-style:none; padding:0; margin:45px 0 20px; display:grid; grid-template-columns:repeat(3,1fr); }
.about-timeline li { position:relative; border-top:1px solid #c89330; padding:26px 28px 0; text-align:center; }
.about-timeline li:before { content:''; position:absolute; width:14px; height:14px; background:#c89330; border-radius:50%; top:-7px; left:calc(50% - 7px); }
.about-timeline strong { font:700 1.8rem Georgia,serif; color:#102d55; }
.about-timeline h3 { margin:8px 0; font-size:1.2rem; }
.about-timeline p { font-size:.94rem; }
.about-story summary { cursor:pointer; padding:18px 0; color:#163e68; font-weight:600; }
.about-founding { border-top:1px solid #e4e0d6; font-size:.9rem; }
.about-reach { background:#faf8f2; padding-block:42px; }
.about-places { border-left:1px solid #dfd3bc; padding-left:45px; }
.about-places h3 { font:700 1rem var(--font-en); }
.about-places ul { list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:15px 24px; color:#102d55; font-weight:600; }
.about-credentials { padding-block:45px 30px; }
.about-record { border:1px solid #e0e3e9; border-radius:10px; padding:22px 26px 0; }
.about-record-top { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding-bottom:22px; }
.about-record-top div { border-right:1px solid #dedee3; }
.about-record-top div:last-child { border:0; }
.about-record-top span,.about-record-top strong { display:block; }
.about-record-top span { font-size:.8rem; }
.about-record-top strong { color:#102d55; margin-top:5px; }
.about-record details { border-top:1px solid #e0e3e9; }
.about-record .table-wrap { margin-bottom:24px; }
.about-board { background:#102d55; border-radius:12px; color:white; padding:32px; margin-bottom:45px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.about-board h2 { color:white; font-size:2rem; margin:0 0 10px; }
.about-board p { margin:0; }
.about-board small { display:block; text-align:center; color:#ffd16d; margin-top:10px; }
.about-story :focus-visible { outline:3px solid #b67b18; outline-offset:4px; }
body.lang-ml .about-story h1,body.lang-ml .about-story h2,body.lang-ml .about-story h3,body.lang-ml .about-story blockquote { font-family:var(--font-ml); line-height:1.5; }
@media(max-width:900px) { .about-columns { gap:30px; } .about-timeline li { padding-inline:14px; } .about-board { flex-direction:column; align-items:flex-start; } }
@media(max-width:650px) {
 .about-columns { grid-template-columns:1fr; }
 .about-intro { padding-top:24px; }
 .about-crumbs { margin-bottom:24px; }
 .about-community { padding-block:35px; }
 .about-facts div { padding-inline:10px; }
 .about-timeline { grid-template-columns:1fr; margin-top:30px; }
 .about-timeline li { border-top:0; border-left:1px solid #c89330; text-align:left; padding:0 0 25px 25px; }
 .about-timeline li:before { left:-7px; top:8px; }
 .about-places { border-left:0; border-top:1px solid #dfd3bc; padding:22px 0 0; }
 .about-record-top { grid-template-columns:1fr; gap:17px; }
 .about-record-top div { border-right:0; }
 .about-record { padding-inline:16px; }
 .about-record table { min-width:0; }
 .about-record th,.about-record td { display:block; width:100%; overflow-wrap:anywhere; }
 .about-board { padding:24px; }
}
.about-story { overflow-wrap:anywhere; }
.about-columns > *, .about-record-top > *, .about-facts > * { min-width:0; }
@media(max-width:650px) { body.lang-ml .about-story h1 { font-size:2rem; } body.lang-ml .about-story h2 { font-size:1.7rem; } }
/* Journey refinement: prominent dates and open milestone panels. */
.about-journey { padding-top:34px; padding-bottom:50px; }
.about-timeline { margin-top:42px; gap:0; }
.about-timeline li { text-align:left; padding:32px 30px 24px; border-top:2px solid #d8c59d; background:linear-gradient(180deg,#faf8f2 0%,#fff 100%); }
.about-timeline li + li { border-left:1px solid #eee7d9; }
.about-timeline li:before { width:16px; height:16px; top:-9px; left:30px; background:#fff; border:4px solid #b98729; box-shadow:0 0 0 6px #fff; }
.about-timeline li > strong { display:block; font-size:3.5rem; line-height:1; font-weight:400; color:#b18332; margin:0 0 22px; letter-spacing:-.04em; }
.about-timeline h3 { font-size:1.4rem; margin-bottom:13px; }
.about-timeline p { margin:0; max-width:30ch; line-height:1.75; }
.about-founding { margin-top:14px; }
@media(max-width:650px) {
 .about-timeline { margin-left:8px; }
 .about-timeline li { padding:5px 18px 32px 28px; border-top:0; border-left:2px solid #d8c59d; background:none; }
 .about-timeline li + li { border-left:2px solid #d8c59d; }
 .about-timeline li:before { left:-9px; top:13px; }
 .about-timeline li > strong { font-size:2.8rem; margin-bottom:14px; }
 .about-timeline p { max-width:none; }
}
#our-journey { scroll-margin-top:135px; }
/* Approved reach and credentials refinement. */
#our-reach { scroll-margin-top:130px; }
.reach-refined { padding-block:55px; }
.reach-number { display:flex; align-items:center; gap:25px; margin:25px 0; }
.reach-number > strong { font:400 9rem/.9 Georgia,serif; color:#b18332; }
.reach-number h3 { font-size:1.7rem; margin:0 0 6px; }
.reach-number p { margin:0; font-size:1.15rem; }
.about-text-link { display:inline-block; color:#102d55; border-bottom:1px solid #b18332; padding-bottom:5px; margin-top:14px; font-weight:600; }
.reach-locations { border-left:1px solid #dfd3bc; padding-left:38px; }
.reach-office { display:flex; gap:22px; align-items:center; padding:22px; background:#f1ede3; border-radius:6px; }
.reach-office h3 { font-size:1.8rem; margin:0; }
.reach-locations svg { width:23px; height:28px; fill:#b18332; flex-shrink:0; }
.reach-locations ul { list-style:none; padding:0; margin:15px 0 0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,auto); grid-auto-flow:column; gap:0 28px; }
.reach-locations li { display:flex; align-items:center; gap:17px; padding:20px 0; border-bottom:1px solid #dfd8cb; color:#102d55; font:700 1.18rem Georgia,serif; }
.about-record-top .credential-fact { display:flex; align-items:flex-start; gap:20px; }
.about-record-top .credential-fact > div { border:0; min-width:0; }
.credential-fact > svg { width:36px; height:42px; flex:0 0 36px; color:#9b701f; }
.credential-fact:last-child > svg { fill:#9b701f; }
.credential-fact strong { font:700 1.4rem/1.4 Georgia,serif; }
.credential-fact:first-child strong { font-size:2rem; }
.credential-fact .about-text-link { margin-top:8px; font-size:.9rem; }
.about-record summary { display:flex; align-items:center; justify-content:space-between; list-style:none; }
.about-record summary::-webkit-details-marker { display:none; }
.about-record summary:after { content:''; width:9px; height:9px; border-right:2px solid #102d55; border-bottom:2px solid #102d55; transform:rotate(45deg); margin-right:5px; }
.about-record details[open] summary:after { transform:rotate(225deg); }
.about-record .table-wrap { border:0; box-shadow:none; border-radius:0; }
body.lang-ml .reach-locations li,body.lang-ml .credential-fact strong { font-family:var(--font-ml); }
@media(max-width:900px) { .about-record-top { gap:15px; } .about-record-top .credential-fact { gap:10px; } .credential-fact > svg { width:26px; flex-basis:26px; } .credential-fact strong { font-size:1.1rem; } }
@media(max-width:650px) {
 .reach-refined { padding-block:35px; }
 .reach-number > strong { font-size:7rem; }
 .reach-number h3 { font-size:1.4rem; }
 .reach-locations { padding:0; border:0; }
 .reach-locations ul { column-gap:20px; }
 .reach-locations li { gap:9px; font-size:1rem; }
 .reach-locations svg { width:18px; }
 .about-record-top .credential-fact { gap:18px; }
 .credential-fact > svg { width:32px; flex-basis:32px; }
 .about-record th { padding:14px 0 4px; }
 .about-record td { padding:4px 0 14px; }
 .about-record tr { border-bottom:1px solid #e0e3e9; }
}
/* Loans: approved illustrated product guide. */
.loans-story { color:#425570; overflow-wrap:anywhere; }
.loans-story h1,.loans-story h2,.loans-story h3 { color:#102d55; font-family:Georgia,'Times New Roman',serif; }
.loans-story h1 { font-size:clamp(2.2rem,3.5vw,3.5rem); line-height:1.12; margin:14px 0 20px; }
.loans-story h2 { font-size:clamp(1.7rem,2.4vw,2.5rem); line-height:1.2; }
.loans-intro { background:#faf8f2; padding:38px 0; }
.loans-intro-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:38px; align-items:center; }
.loans-intro-grid > * { min-width:0; }
.loans-intro p { max-width:540px; }
.loans-intro .loan-enquire { display:inline-block; margin-top:15px; }
.loan-illustration { display:block; position:relative; overflow:hidden; width:130px; aspect-ratio:1; }
.loan-illustration img { position:absolute; max-width:none; width:384%; height:256%; }
.loan-art-0 { width:100%; aspect-ratio:600/500; mix-blend-mode:multiply; }
.loan-art-0 img { width:256%; height:204.8%; left:0; top:0; }
.loan-art-1 img { left:-155%; top:-20%; }
.loan-art-2 img { left:-273%; top:-20%; }
.loan-art-3 img { left:-20%; top:-135%; }
.loan-art-4 img { left:-147.5%; top:-135%; }
.loan-art-5 img { left:-272.5%; top:-135%; }
.loan-row { display:grid; grid-template-columns:140px 1fr auto; align-items:center; gap:36px; padding:26px 10px; border-bottom:1px solid #e3e6eb; scroll-margin-top:135px; }
.loan-row:last-child { border-bottom:0; }
.loan-row h2 { margin:0 0 9px; }
.loan-row p { margin:0; }
.loan-enquire { color:#102d55; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.loan-enquire:hover { color:#936819; }
.loan-products { padding-block:12px; }
.loan-process { background:#faf8f2; padding:45px 0; }
.loan-process h2 { text-align:center; margin:0 0 40px; }
.loan-process ol { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; margin:0; }
.loan-process li { position:relative; text-align:center; padding:0 28px; }
.loan-process li:before { content:''; position:absolute; top:21px; height:1px; background:#c89330; left:0; right:0; }
.loan-process li:first-child:before { left:50%; }
.loan-process li:last-child:before { right:50%; }
.loan-step-number { display:inline-grid; place-items:center; position:relative; width:43px; height:43px; border-radius:50%; background:#f3bd46; color:#102d55; font-weight:700; }
.loan-process h3 { font-size:1.25rem; margin:18px 0 10px; }
.loan-process-notes { border-top:1px solid #ded8cd; margin-top:28px; padding-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:45px; }
.loan-process-notes p { margin:0; }
.loan-process-notes > p { border-left:1px solid #ded8cd; padding-left:35px; }
.loan-closing { background:#102d55; padding:38px 0; color:#fff; }
.loan-closing .wrap { display:flex; justify-content:space-between; align-items:center; gap:35px; }
.loan-closing h2 { color:#fff; margin:0 0 12px; }
.loan-closing p { margin:0; }
.loan-closing-actions { display:grid; gap:12px; flex-shrink:0; }
.loans-story :focus-visible { outline:3px solid #b18332; outline-offset:5px; }
body.lang-ml .loans-story h1,body.lang-ml .loans-story h2,body.lang-ml .loans-story h3 { font-family:var(--font-ml); line-height:1.5; }
@media(max-width:700px) {
 .loans-intro-grid { grid-template-columns:1fr; gap:15px; }
 .loan-art-0 { max-width:390px; margin:auto; }
 .loan-row { grid-template-columns:85px minmax(0,1fr); gap:10px 18px; padding:22px 0; }
 .loan-row .loan-illustration { width:85px; grid-row:1/3; }
 .loan-row h2 { font-size:1.4rem; }
 .loan-row .loan-enquire { grid-column:2; justify-self:start; }
 .loan-row p { font-size:.94rem; }
 .loan-process ol { grid-template-columns:1fr; gap:24px; }
 .loan-process li:before { display:none; }
 .loan-process li { padding-inline:10px; }
 .loan-process-notes { grid-template-columns:1fr; gap:22px; }
 .loan-process-notes > p { padding:0; border:0; }
 .loan-closing .wrap { flex-direction:column; align-items:flex-start; }
 body.lang-ml .loans-story h1 { font-size:2rem; }
}
/* Deposits: illustrated schemes and community benefits. */
.deposits-story { color:#425570; overflow-wrap:anywhere; }
.deposits-story h1,.deposits-story h2,.deposits-story h3 { font-family:Georgia,'Times New Roman',serif; color:#102d55; }
.deposits-story h1 { font-size:clamp(2.2rem,3.6vw,3.5rem); line-height:1.12; margin:16px 0; }
.deposits-story h2 { font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.2; margin:0 0 22px; }
.deposit-split { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:center; }
.deposit-split > * { min-width:0; }
.deposit-intro,.deposit-why { background:#faf8f2; padding:40px 0; }
.deposit-intro .about-eyebrow { display:block; margin-top:25px; }
.deposit-hero-art { width:100%; height:auto; mix-blend-mode:multiply; }
.deposit-link { display:inline-block; color:#102d55; font-weight:700; text-decoration:underline; text-decoration-color:#c89330; text-underline-offset:7px; margin-top:8px; }
.deposit-link:hover { color:#936819; }
.deposit-products { padding:38px 0 16px; }
.deposit-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.deposit-card { display:grid; grid-template-columns:155px minmax(0,1fr); align-items:center; gap:22px; padding:18px 22px 18px 10px; border:1px solid #e3e6eb; border-radius:12px; scroll-margin-top:160px; }
.deposit-card h3 { font-size:1.5rem; line-height:1.3; margin:0 0 8px; }
.deposit-card p { margin:0 0 7px; font-size:1rem; }
.deposit-art { display:block; width:155px; aspect-ratio:1; background-image:url('../assets/img/deposits-art.webp'); background-size:300% 200%; background-repeat:no-repeat; }
.deposit-art-0 { background-position:0 0; }.deposit-art-1 { background-position:50% 0; }.deposit-art-2 { background-position:100% 0; }.deposit-art-3 { background-position:0 100%; }.deposit-art-4 { background-position:50% 100%; }.deposit-art-5 { background-position:100% 100%; }
.deposit-note { text-align:center; font-size:.9rem; margin:24px 0 10px; }
.deposit-benefits { list-style:none; padding:0; margin:22px 0; display:grid; gap:20px; }
.deposit-benefits li { display:flex; gap:17px; align-items:flex-start; }
.deposit-benefits li > span { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:50%; background:#f1e7d0; color:#102d55; font-size:24px; }
.deposit-benefits h3 { font-size:1.15rem; margin:0 0 5px; }
.deposit-benefits p { font-size:.9rem; margin:0; }
.deposit-event { margin:0; }
.deposit-event img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 62%; border-radius:12px; }
.deposit-event figcaption { font-size:.85rem; margin-top:8px; }
.deposit-closing { background:#102d55; color:white; padding:32px 0; }
.deposit-closing .wrap { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.deposit-closing h2 { color:white; margin:0 0 8px; }
.deposit-closing p { margin:0; }
.deposit-actions { display:flex; align-items:center; gap:24px; flex-shrink:0; }
.deposit-visit { color:white; text-decoration:underline; text-underline-offset:5px; }
.deposits-story :focus-visible { outline:3px solid #b18332; outline-offset:5px; }
body.lang-ml .deposits-story h1,body.lang-ml .deposits-story h2,body.lang-ml .deposits-story h3 { font-family:var(--font-ml); line-height:1.5; }
@media(max-width:1000px) { .deposit-card { grid-template-columns:110px minmax(0,1fr); gap:15px; }.deposit-art { width:110px; }.deposit-actions { flex-direction:column; gap:12px; } }
@media(max-width:700px) { .deposit-split,.deposit-grid { grid-template-columns:1fr; gap:25px; }.deposit-intro,.deposit-why { padding:28px 0; }.deposit-hero-art { max-width:440px; margin:auto; }.deposit-card { grid-template-columns:95px minmax(0,1fr); padding:16px 12px; gap:14px; }.deposit-art { width:95px; }.deposit-card h3 { font-size:1.25rem; }.deposit-card p { font-size:.93rem; }.deposit-closing .wrap { flex-direction:column; align-items:flex-start; }.deposit-actions { align-items:flex-start; }.deposit-event img { aspect-ratio:1; } }
.deposit-event { overflow:hidden; }
.deposit-event img { object-position:center 35%; }
.deposit-hero-art { border-radius:12px; }
/* Services page: illustrated service guide. */
.svc-hero,.svc-community { background:#faf8f2; padding:38px 0; }
.svc-art { display:block; background:url('../assets/img/services/page-art.webp') no-repeat; background-size:249% 423%; aspect-ratio:1.14; border-radius:12px; }
.svc-art-0 { background-position:10.5% 0.5%; }.svc-art-1 { background-position:90% 0.5%; }.svc-art-2 { background-position:10.5% 33%; }.svc-art-3 { background-position:90% 33%; }.svc-art-4 { background-position:10.5% 65.5%; }.svc-art-5 { background-position:90% 65.5%; }.svc-art-6 { background-position:10.5% 98.5%; }.svc-art-7 { background-position:90% 98.5%; }
.svc-jumps { display:flex; justify-content:space-between; gap:15px; padding-block:22px; flex-wrap:wrap; border-bottom:1px solid #e3e6eb; }
.svc-jumps a { color:#102d55; font-weight:600; text-underline-offset:6px; }
.svc-jumps a:hover { text-decoration:underline; }
.services-story [id] { scroll-margin-top:145px; }
.svc-locker { display:grid; grid-template-columns:.75fr 1.25fr; align-items:center; gap:45px; padding-block:40px; }
.svc-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:24px 0; }
.svc-facts h3 { font-size:1.12rem; margin:0 0 8px; }.svc-facts p { font-size:.9rem; margin:0; }
.svc-brochure { display:flex; width:fit-content; align-items:center; gap:12px; margin-top:22px; color:#102d55; font-size:.9rem; text-decoration:underline; }
.svc-brochure img { width:42px; height:56px; object-fit:cover; border:1px solid #ddd; }
.svc-everyday { padding:38px 0; background:#fdfcf9; }
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.svc-card { display:grid; grid-template-columns:42% minmax(0,1fr); align-items:center; gap:22px; border:1px solid #e2e6eb; border-radius:12px; padding:12px 20px 12px 12px; background:white; }
.svc-card h3 { margin:0 0 8px; font-size:1.45rem; }.svc-card p { font-size:.96rem; margin:0 0 16px; }
.svc-tag { display:inline-block; background:#faeccb; border-radius:5px; padding:4px 9px; font-size:.8rem; color:#102d55; }
.svc-community-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:28px; align-items:start; }
.svc-story { background:white; border-radius:10px; padding:12px; min-width:0; }.svc-story h3 { font-size:1.1rem; margin:15px 0 8px; }.svc-story p { font-size:.9rem; }.svc-story summary { color:#102d55; font-weight:700; cursor:pointer; }.svc-story details[open] { margin-top:20px; }.svc-story details p { line-height:1.8; }
@media(max-width:800px) { .svc-locker { grid-template-columns:1fr; gap:24px; }.svc-locker>.svc-art { width:100%; max-width:420px; margin:auto; }.svc-grid { grid-template-columns:1fr; }.svc-community-grid { grid-template-columns:1fr 1fr; }.svc-community-grid>div { grid-column:1/-1; } }
@media(max-width:500px) { .svc-community-grid { grid-template-columns:1fr; }.svc-card { gap:14px; grid-template-columns:35% minmax(0,1fr); padding:12px; }.svc-card h3 { font-size:1.2rem; }.svc-facts { grid-template-columns:1fr; gap:15px; }.svc-jumps { justify-content:flex-start; gap:15px 24px; }.svc-hero .svc-art { margin-top:12px; } }
/* Separate locker access, hours and rent details. */
.svc-facts > div + div { border-left:1px solid #d8c9aa; padding-left:20px; }
@media(max-width:500px) {
 .svc-facts > div + div { border-left:0; padding-left:0; border-top:1px solid #d8c9aa; padding-top:15px; }
}
/* Board: authentic portraits with clear leadership hierarchy. */
.board-story { color:#425570; }
.board-story h1,.board-story h2,.board-story h3 { color:#102d55; font-family:Georgia,serif; }
.board-intro { background:#faf8f2; padding:35px 0; }.board-intro h1 { font-size:clamp(2rem,4vw,3.5rem); margin:12px 0; line-height:1.2; }.board-term { display:inline-block; border:1px solid #b58b42; border-radius:30px; padding:5px 16px; color:#805b19; font-weight:700; }
.board-leaders { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:25px; padding-block:35px; }.board-story .director { border-radius:8px; box-shadow:none; }.board-story .director:hover { transform:none; }.board-leaders .director { display:grid; grid-template-columns:42% minmax(0,1fr); align-items:center; text-align:left; padding:12px; }.board-story .photo { padding:0; background:none; }.board-story .photo img { width:100%; height:auto; aspect-ratio:1.1; border-radius:5px; object-fit:cover; object-position:center 25%; border:0; }.board-leaders .photo img { aspect-ratio:4/5; }.board-leaders h2 { font-size:1.6rem; margin:0 0 10px; }.board-story .role { background:none; color:#886321; padding:0; letter-spacing:.08em; }.board-story .lead .role { background:none; color:#886321; }.board-story .tel { margin-top:13px; min-height:32px; }.board-members>h2 { text-align:center; font-size:2.3rem; margin:10px 0 28px; }.board-members .board-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }.board-members .director { flex:0 0 calc((100% - 60px)/4); padding:12px 12px 0; }.board-members .info { padding:14px 0 18px; }.board-members h3 { font-size:1.15rem; }.board-directory { padding-block:35px; }.board-directory details { border:1px solid #dfd8ca; border-radius:8px; }.board-directory summary { display:flex; justify-content:space-between; gap:15px; padding:22px; background:#faf8f2; color:#102d55; font-weight:700; cursor:pointer; }.board-directory .table-wrap { border:0; box-shadow:none; }.board-story :focus-visible { outline:3px solid #b18332; outline-offset:4px; }
body.lang-ml .board-story h1,body.lang-ml .board-story h2,body.lang-ml .board-story h3 { font-family:var(--font-ml); line-height:1.5; }
@media(max-width:900px) { .board-leaders h2 { font-size:1.25rem; }.board-members .director { flex-basis:calc((100% - 40px)/3); } }
@media(max-width:650px) { .board-leaders { grid-template-columns:1fr; gap:16px; }.board-members .director { flex-basis:100%; display:grid; grid-template-columns:105px minmax(0,1fr); text-align:left; gap:18px; padding:12px; align-items:center; }.board-members .info { padding:0; }.board-members .photo img { aspect-ratio:4/5; }.board-story .tel { margin-top:6px; }.board-leaders .info { padding:12px; }.board-directory summary { padding:16px; } }
/* Board refinement: warm leadership backdrop and restrained gold accents. */
.board-intro { padding-block:28px 20px; position:relative; overflow:hidden; }
.board-intro .wrap { position:relative; }
.board-intro .wrap:after { content:''; position:absolute; width:460px; height:460px; right:-170px; top:-100px; border:1px solid #e9ddc5; border-radius:50%; box-shadow:0 0 0 20px #f3eddf,0 0 0 21px #ebe1ce,0 0 0 43px #f7f2e8; pointer-events:none; opacity:.55; }
.board-intro .wrap>* { position:relative; z-index:1; }
.board-intro h1 { padding-right:190px; font-size:clamp(2rem,3.4vw,3.1rem); }
.board-intro .board-term { position:absolute; right:0; top:90px; background:#faf8f2; border-radius:8px; font:700 1.65rem Georgia,serif; color:#102d55; padding:12px 22px; }
.board-leaders { background:#faf8f2; box-shadow:0 0 0 100vmax #faf8f2; clip-path:inset(0 -100vmax); padding-block:15px 32px; }
.board-leaders .director { border-top:4px solid #c6a048; box-shadow:0 8px 22px rgba(68,50,17,.08); }
.board-leaders .info { display:flex; flex-direction:column; align-items:flex-start; }
.board-leaders .info .role { order:-1; text-transform:uppercase; font-size:.8rem; margin-bottom:12px; }
.board-leaders .info br { display:none; }
.board-leaders .director:first-child { grid-template-columns:42% minmax(0,1fr); position:relative; z-index:1; transform:scale(1.08); }
.board-leaders .director:first-child .photo img { transform:scale(.925926); }
.board-leaders .tel { border-top:1px solid #c6a048; padding-top:15px; font-size:1rem; }
.board-leaders .tel svg { width:30px; height:30px; padding:7px; background:#102d55; fill:#fff; border-radius:50%; }
.board-members { padding-top:22px; }
.board-members>h2:after { content:''; display:block; width:65px; height:2px; background:#c6a048; margin:14px auto 0; }
.board-members .director { border-color:#e8dfcd; box-shadow:0 4px 13px rgba(68,50,17,.045); }
.board-members .info { background:#faf8f2; margin:0 -12px; padding:16px 10px; }
.board-directory summary { border-radius:8px; padding:24px; }
@media(max-width:900px) { .board-intro h1 { padding-right:0; }.board-intro .board-term { position:relative; top:auto; right:auto; font-size:1.2rem; padding:7px 16px; } }
@media(max-width:650px) { .board-members .info { margin:0; padding:10px; border-radius:5px; }.board-leaders .director:first-child { grid-template-columns:42% minmax(0,1fr); transform:none; }.board-leaders .director:first-child .photo img { transform:none; }.board-leaders .tel { font-size:.88rem; gap:6px; }.board-leaders .tel svg { width:25px; height:25px; padding:6px; }.board-leaders .info { padding:10px; }.board-intro .wrap:after { right:-300px; } }
/* Gallery: event albums with the complete original collection. */
.gallery-intro { background:#faf8f2; padding:32px 0; }.gallery-intro h1 { margin:12px 0; }.gallery-albums { padding-block:35px; }.gallery-albums>h2,.gallery-albums>p { text-align:center; }.album-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:28px; }.album-card { overflow:hidden; border:1px solid #e3e0d8; border-radius:10px; box-shadow:0 4px 15px #102d5508; }.album-card>img { width:100%; aspect-ratio:1.7; object-fit:cover; }.album-card>div { padding:18px 22px; }.album-card h3 { font-size:1.45rem; margin:0 0 8px; }.album-card p { font-size:.95rem; margin:0 0 14px; }.album-meta { display:flex; justify-content:space-between; align-items:center; gap:16px; }.album-meta button { background:none; border:0; color:#805b19; font:700 1rem var(--font-en); cursor:pointer; padding:8px 0; }.gallery-watch { background:#faf8f2; padding:35px 0; }.gallery-watch video { width:100%; max-height:380px; background:#102d55; border-radius:10px; }.gallery-browser { padding-block:30px; }.gallery-browser summary { width:fit-content; margin:0 auto 25px; padding:12px 25px; border:1px solid #b58b42; border-radius:30px; color:#805b19; cursor:pointer; font-weight:700; }.gallery-browser details { scroll-margin-top:135px; }.gallery-story .gitem { margin:0; background:white; border:1px solid #e3e0d8; }.gallery-story .gitem img { aspect-ratio:4/3; height:auto; width:100%; object-fit:cover; }.gallery-story .gitem figcaption { position:static; background:white; color:#102d55; padding:14px; font-size:.9rem; }.gallery-story .gitem .cat { display:none; }.gallery-story .gitem:after { display:none; }.gallery-story .gitem[hidden] { display:none; }.gallery-story .gallery-grid { gap:22px; }.gallery-story :focus-visible { outline:3px solid #b18332; outline-offset:4px; }body.lang-ml .album-meta button { font-family:var(--font-ml); }
@media(max-width:650px) { .album-grid { grid-template-columns:1fr; gap:20px; }.album-card>div { padding:16px; }.album-card h3 { font-size:1.25rem; }.album-meta { flex-wrap:wrap; }.gallery-story h1 { font-size:2.2rem; } }
.community-gallery { padding-block:38px; }
.community-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.community-gallery-item { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; }
.community-gallery-item>a { display:grid; place-items:center; background:var(--brand-light); }
.community-gallery-item img { display:block; width:100%; height:300px; object-fit:contain; transition:transform .2s ease; }
.community-gallery-item>a:hover img { transform:scale(1.025); }
.community-gallery-item figcaption { padding:16px 18px; }
.community-gallery-item h3 { margin:0 0 8px; font-size:1.05rem; }
.community-gallery-item p { margin:0; font-size:.9rem; line-height:1.6; }
@media(max-width:900px) { .community-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .community-gallery-grid { grid-template-columns:1fr; }.community-gallery-item img { height:320px; } }
.gallery-story .gitem { height:auto; aspect-ratio:auto; }.gallery-story .gitem figcaption { opacity:1; transform:none; display:block; }
/* Contact: direct actions and a clear office location. */
.contact-intro { background:#faf8f2; padding:35px 0; }.contact-intro h1 { margin:15px 0; }.contact-intro .about-eyebrow { margin-top:28px; }.contact-actions { padding-block:30px; }.contact-actions .action-tile { border:1px solid #e7e0d3; border-top:3px solid #b58b42; background:#fff; padding:26px; box-shadow:0 5px 18px #102d5508; }.contact-actions .action-tile b { color:#102d55; font:700 1.3rem Georgia,serif; }.contact-actions .ico { background:#f7efdd; color:#926b24; }.contact-actions .ico svg { fill:#926b24; }.contact-office { display:grid; grid-template-columns: .85fr 1.15fr; gap:45px; padding-block:15px 30px; }.contact-office>div { min-width:0; }.contact-office .info-block { border:0; padding:0 0 22px; }.contact-office .info-block>.ico,.contact-office .info-block h3 { display:none; }.contact-office .map-embed { min-height:510px; height:100%; border-radius:12px; overflow:hidden; }.contact-office iframe { width:100%; height:100%; min-height:510px; border:0; }.contact-mobiles { margin-top:25px; padding-top:20px; border-top:1px solid #dfd8ca; }.contact-mobiles h3,.contact-email h3 { font-size:1.3rem; margin:0 0 14px; }.contact-mobiles>a { display:flex; align-items:center; gap:14px; width:fit-content; color:#102d55; font-weight:700; margin:10px 0; padding:5px 0; }.contact-mobiles>a span { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:#f7efdd; color:#926b24; }.contact-email { margin-top:24px; }.contact-email>a { overflow-wrap:anywhere; color:#102d55; text-decoration:underline; }.contact-visit-note { padding:22px 28px; background:#faf6ec; border-radius:9px; border-left:3px solid #b58b42; }.contact-visit-note h3 { margin:0 0 6px; font-size:1.25rem; }.contact-visit-note p { margin:0; }.contact-statutory { text-align:center; border-top:1px solid #dfd8ca; padding:20px 0; margin:25px 0 0; font-size:.85rem; }.contact-story :focus-visible { outline:3px solid #b18332; outline-offset:4px; }body.lang-ml .contact-actions .action-tile b { font-family:var(--font-ml); }
@media(max-width:800px) { .contact-office { grid-template-columns:1fr; gap:25px; }.contact-actions .actions-grid { grid-template-columns:1fr; }.contact-office .map-embed,.contact-office iframe { min-height:350px; }.contact-actions .action-tile { padding:20px; } }
/* Shared header: one location and one registration number. */
.topbar .wrap { gap:16px; }.topbar-info { gap:24px; }.topbar-actions { margin-left:auto; }.site-header .wrap { gap:28px; padding-block:16px; }.brand { gap:15px; }.brand-line { margin-top:5px; }.brand-sub { margin-top:5px; }.header-aside { gap:22px; }
@media(max-width:650px) { .topbar .wrap { gap:8px 16px; }.topbar-info { gap:7px 16px; }.topbar-actions { margin-left:0; }.site-header .wrap { padding-block:13px; gap:12px; }.brand { gap:12px; }.brand-line { margin-top:4px; }.brand-sub { margin-top:4px; } }
/* Unified palette and approved community/footer treatment. */
:root { --brand:#094198; --brand-dark:#102d55; --brand-darker:#102d55; --accent:#f0b429; }
.navbar { background:#094198; }.topbar { background:#102d55; }
.stats-band.section-brand { background:#faf8f2; color:#102d55; padding-block:40px; }.stats-band:before { display:none; }.stats-heading { text-align:center; color:#102d55; font:700 clamp(1.8rem,3vw,2.6rem)/1.25 Georgia,serif; margin:0 0 10px; }.stats-intro { text-align:center; margin:0 0 28px; color:#425570; }.stats-band .stats { gap:0; }.stats-band .stat { background:none; border:0; border-radius:0; padding:16px; }.stats-band .stat+.stat { border-left:1px solid #d3af60; }.stats-band .n { font:700 clamp(2.5rem,4vw,3.5rem)/1.2 Georgia,serif; color:#102d55; margin-bottom:8px; }.stats-band .l { color:#425570; }
.cta-band { background:#faf8f2; box-shadow:none; color:#425570; border-radius:8px; }.cta-band h2 { color:#102d55; font-family:Georgia,serif; }.cta-band p { color:#425570; }.cta-band .btn-ghost { color:#094198; border-color:#094198; }
.site-footer { background:#102d55; color:#e1e7ef; }.site-footer a { color:#e1e7ef; }.footer-top { grid-template-columns:1.35fr .85fr 1fr 1.4fr; gap:28px; }.footer-brand { flex-direction:column; gap:12px; }.footer-brand img { background:#fff; padding:7px; width:76px; height:76px; }.footer-wordmark { display:block; color:#fff; font:700 2rem/1.2 Georgia,serif; margin-bottom:5px; }.footer-brand strong { font-size:1rem; font-weight:600; }.footer-brand span { color:#e1e7ef; display:block; margin-top:8px; }.site-footer h4 { text-transform:none; letter-spacing:0; font:700 1.15rem/1.4 Georgia,serif; }.footer-contact { overflow-wrap:anywhere; }.footer-bottom { color:#d7e0ec; border-color:#ffffff40; }.footer-motto { border-left:0; padding-left:0; font-size:.9rem; }
body.lang-ml .stats-heading,body.lang-ml .footer-wordmark,body.lang-ml .site-footer h4,body.lang-ml .cta-band h2 { font-family:var(--font-ml); }
@media(max-width:900px) { .footer-top { grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:650px) { .stats-band .stat:nth-child(3) { border-left:0; }.stats-band .stat:nth-child(n+3) { border-top:1px solid #dfd3b9; }.footer-top { grid-template-columns:1fr; gap:28px; }.footer-brand { flex-direction:row; align-items:flex-start; }.footer-wordmark { font-size:1.65rem; } }
.stats-band.section-brand .stats-heading { color:#102d55; }

/* Community statistics: botanical edge detail and distinct line illustrations. */
.stats-band.section-brand { position:relative; overflow:hidden; padding-block:34px 30px; border-block:1px solid #eee6d6; }
.stats-band .wrap { position:relative; z-index:1; }
.stats-band.section-brand:before,.stats-band.section-brand:after { content:""; display:block; position:absolute; width:190px; height:330px; top:50%; left:-55px; transform:translateY(-50%) rotate(-18deg); opacity:.15; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 330' fill='none' stroke='%23ac873a' stroke-width='1.5'%3E%3Cpath d='M92 330Q105 180 85 15M96 270Q20 250 18 190Q91 198 96 270ZM98 220Q165 191 173 138Q106 148 98 220ZM96 168Q31 147 28 98Q85 105 96 168ZM91 115Q145 90 150 43Q95 62 91 115ZM85 68Q47 44 53 8Q88 25 85 68Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.stats-band.section-brand:after { left:auto; right:-55px; transform:translateY(-50%) scaleX(-1) rotate(-18deg); }
.stats-heading:after { content:""; display:block; width:52px; height:3px; border-radius:3px; background:#c39a45; margin:14px auto; }
.stats-band .stats { max-width:1120px; margin-inline:auto; }
.stats-band .stats-intro { margin-bottom:18px; }
.stats-band .stat { padding:12px 20px; }
.stat-icon { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 12px; color:#a87b25; background:#f4ecd9; border:1px solid #e8d8b4; border-radius:50%; }
.stat-icon svg { width:40px; height:40px; }
.stats-band .n { font-size:clamp(2.3rem,3.5vw,3.1rem); }
@media(max-width:650px) { .stats-band.section-brand { padding-block:28px; }.stats-band .stat { padding:20px 10px; }.stat-icon { width:54px; height:54px; margin-bottom:10px; }.stat-icon svg { width:34px; height:34px; }.stats-band.section-brand:before,.stats-band.section-brand:after { opacity:.08; }.stats-band .l { font-size:.85rem; } }

/* Keep every slide in the same grid cell so content never shifts the page. */
.hero { display:grid; }
.hero .hero-slide { grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none; animation:none; transform:none; transition:opacity .8s ease, visibility .8s; }
.hero .hero-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; z-index:1; animation:none; }
@media(prefers-reduced-motion:reduce) { .hero .hero-slide { transition:none; } }

/* Complete original emblem, clear of the copy and cropped edges. */
.hero .hero-slide::after { left:auto; right:20px; bottom:22px; width:120px; height:120px; opacity:.035; pointer-events:none; }
@media(max-width:1200px) { .hero .hero-slide::after { display:none; } }

/* Customer content update, September 2026. */
.customer-whatsapp { display:inline-flex; align-items:center; color:#17643c; font-size:.88rem; font-weight:700; white-space:nowrap; padding:9px 12px; border:1px solid #bad5c5; border-radius:7px; background:#f3faf6; }
.header-aside { flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.site-footer .customer-whatsapp { color:#fff; background:transparent; border-color:#ffffff55; white-space:normal; }
.customer-gold-photo { border:5px solid white; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); }
.customer-gold-photo img { width:100%; height:auto; display:block; }
.customer-trust { padding-block:0 32px; }.customer-trust>p { max-width:900px; }.customer-trust>a { color:var(--brand); font-weight:700; }
.customer-certificate { display:flex; align-items:center; gap:24px; padding:24px; margin-top:24px; background:#faf8f2; border:1px solid #e4dac5; border-radius:12px; }
.customer-certificate img { width:90px; height:130px; object-fit:contain; display:block; }.customer-certificate>a { flex-shrink:0; }.customer-certificate h3 { margin:0 0 8px; color:#102d55; }.customer-certificate p { margin:0 0 12px; }.customer-certificate a { color:var(--brand); font-weight:600; }
.customer-hours { padding-block:30px; }.customer-hours h2 { color:#102d55; }.customer-hours-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid #e4dac5; border-radius:12px; background:#faf8f2; }.customer-hours-grid>div { padding:22px 28px; }.customer-hours-grid>div+div { border-left:1px solid #e4dac5; }.customer-hours-grid h3 { margin:0 0 12px; }.customer-hours-grid p { margin:6px 0; }.hours-note { margin-top:12px; font-size:.9rem; }
.customer-video { width:100%; border-radius:14px; background:#102d55; }
.customer-adviser { display:block; position:relative; overflow:hidden; aspect-ratio:1; border-radius:14px; }.customer-adviser img { position:absolute; height:100%; width:auto; max-width:none; left:0; top:0; }
.customer-deposit-photo { width:100%; height:auto; max-height:180px; object-fit:contain; border-radius:8px; }.customer-rate { display:block; color:#102d55; font-size:1.45rem; margin:10px 0; }
.customer-transfer { background:#edf3fb; border-radius:12px; color:#094198; padding:18px 10px; text-align:center; }.customer-transfer svg { display:block; width:100%; height:auto; margin-bottom:12px; }.customer-transfer b { font-size:1rem; }
.customer-contact-wa { margin-top:24px; }.customer-map-title { font-weight:700; color:#102d55; margin:0 0 12px; }.contact-office .map-embed { height:auto; }.contact-office iframe { display:block; }
@media(max-width:700px) { .customer-hours-grid { grid-template-columns:1fr; }.customer-hours-grid>div+div { border-left:0; border-top:1px solid #e4dac5; }.customer-certificate { padding:18px; gap:16px; }.customer-certificate img { width:65px; height:96px; }.customer-certificate h3 { font-size:1.1rem; }.customer-certificate p,.customer-certificate a { font-size:.88rem; }.customer-rate { font-size:1.2rem; }.header-aside { justify-content:center; }.customer-adviser { max-width:450px; margin:auto; width:100%; } }
.customer-adviser img { height:112%; }
@media(max-width:700px) { .site-header .wrap { flex-wrap:wrap; }.site-header .brand { flex:1 1 100%; min-width:0; }.site-header .header-aside { flex:1 1 100%; justify-content:flex-start; padding-left:0; }.site-header .customer-whatsapp { font-size:.8rem; padding:6px 10px; } }

/* Compact WhatsApp contact and original certificate presentation. */
.site-header .header-aside { flex-wrap:nowrap; }
.site-header .customer-whatsapp { width:42px; height:42px; padding:9px; border-radius:50%; flex-shrink:0; justify-content:center; }
.site-header .customer-whatsapp svg { width:24px; height:24px; }
.customer-certificate>a:first-child { padding:10px; border:5px solid #9c793f; background:#fffdf7; box-shadow:0 3px 12px #102d5520,inset 0 0 0 1px #d1bb8b; }
.customer-certificate img { width:130px; height:auto; filter:brightness(1.13) contrast(1.13); }
.certificate-viewer { border:0; padding:60px 20px 24px; width:min(960px,96vw); max-width:96vw; height:94vh; max-height:94vh; background:#17283c; border-radius:12px; overflow:auto; }
.certificate-viewer::backdrop { background:rgba(0,0,0,.8); }
.certificate-close { position:sticky; top:0; float:right; z-index:2; margin-top:-48px; width:44px; height:44px; background:white; color:#102d55; border:0; border-radius:50%; font-size:32px; cursor:pointer; }
.certificate-sheet { padding:12px; border:8px solid #a58045; background:#fffdf7; width:fit-content; margin:auto; }
.certificate-sheet img { display:block; width:100%; max-width:874px; height:auto; filter:brightness(1.13) contrast(1.13); }
@media(max-width:700px) { .site-header .brand { flex:1 1 0; }.site-header .header-aside { flex:0 0 auto; }.customer-certificate img { width:90px; }.certificate-viewer { padding-inline:8px; }.certificate-sheet { padding:5px; border-width:4px; } }

.contact-actions .actions-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.contact-actions .action-tile { padding:22px 18px; min-width:0; flex-direction:column; align-items:flex-start; }
.contact-actions .action-tile>span:last-child { min-width:0; width:100%; }
.contact-actions .action-tile>span:last-child>span { overflow-wrap:anywhere; }
.contact-actions .contact-whatsapp-tile .ico svg { fill:none; }
@media(max-width:1050px) { .contact-actions .actions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:550px) { .contact-actions .actions-grid { grid-template-columns:1fr; }.contact-actions .action-tile { flex-direction:row; } }

.contact-office .map-embed,.contact-office .map-embed iframe { height:420px; min-height:420px; width:100%; }
@media(max-width:800px) { .contact-office .map-embed,.contact-office .map-embed iframe { height:350px; min-height:350px; } }