/* ==========================================================================
   SFR Group - public website stylesheet ("Premium Corporate")
   Loaded after tokens.css, fonts.css, Bootstrap and Bootstrap Icons. Staff pages use admin.css instead.
   All colours, fonts, radii, shadows and spacing come from tokens.css (--srf-*); nothing brand-related is hard-coded here.

   --------------------------------------------------------------------------
   PUBLIC DESIGN GUIDE - reusable classes (Stage-B agents: mirror these, do not invent look-alikes)
   --------------------------------------------------------------------------
   Layout     .srf-container            max 1240px, fluid gutter (Bootstrap .container is aligned to it)
              .srf-section              vertical rhythm; modifiers --tight, --paper (white), --sand (darker ivory), --navy
              .srf-sechead              section head: __title (H2), __lead, with .srf-eyebrow above; --split puts a link at the right
              .srf-grid                 auto-fit card grid; modifiers --2 --3 --4 fix the column count from tablet up
              .srf-bento                asymmetric concern grid (7/5 then 4/4/4, repeating every five; remainders are filled)
              .srf-stack / .srf-cluster flow spacing helpers;  .srf-ratio + --16x9 --4x3 --1x1 --3x4 aspect boxes
   Type       .srf-eyebrow              small gold label (uppercase + tracking in English only)
              .srf-title-xl|lg|md       serif display sizes;  .srf-lead  larger intro paragraph;  .srf-text-muted
              .srf-prose                rich text from the admin editor (headings, lists, quotes, tables, images, embeds)
   Buttons    .srf-btn  + --primary (navy) | --gold (gold outline) | --ghost | --light | --gold-solid | --outline-light
                         sizes --sm --lg, --block; every button is at least 44px tall.  .srf-link-arrow  text link with arrow
   Surfaces   .srf-card                 white card; __media (16/10), __body, __meta, __title, __text, __link (stretched link);
                                        --lift adds the hover lift;  .srf-arch  arch-shaped frame for portraits / photos
              .srf-concern              Sister Concern card (see Home/Index.cshtml ConcernCard) - lives inside .srf-bento
   Small      .srf-chip (+ --navy --gold --accent)   .srf-badge (+ --gold --success --danger)   .srf-divider
              .srf-stat (__num, __label) and .srf-statpanel (navy panel holding stats)
   Lists      .srf-timeline (+ --center on desktop)   .srf-table (wrap in .srf-table-wrap)   .srf-pager   .srf-empty
   Forms      .srf-form (+ __grid, __actions) - Bootstrap .form-control/.form-select/.form-label/.form-check are restyled globally
              .srf-file                 file field in the PAGE language (hidden native input + styled label + file-name text, section 16.8)
   Chrome     .site-header .site-nav .site-footer .site-notice .fab-stack .cookie .lang-toggle (owned by the shell - do not restyle)
              Partials: _PageHero _Breadcrumb _CtaBand _ShareButtons _BrandMotif (see each file's header comment)
   Motion     .reveal (+ --zoom --left --right --fade), .reveal-stagger (children appear one after another), [data-counter]
              (see motion.css / motion.js). Everything is neutralised by prefers-reduced-motion.
   Colour     small gold TEXT on light grounds: var(--srf-gold-800); gold-700 only for large/bold display text (3:1).
              focus ring = var(--srf-focus) (solid navy; gold on dark grounds); a text field's border = var(--srf-input-border) (3:1).
              Bengali is never uppercased or letter-spaced: wrap uppercase rules in html[lang="en"].
   Rules      never put height:100% on a base card class - equal heights come from grid stretch;
              wrap tables in .srf-table-wrap; long words are handled by overflow-wrap (no horizontal page scroll).

   Sister Concern card (Views/Home/Index.cshtml, local function ConcernCard, is the source of truth) - put the cards in <div class="srf-bento reveal-stagger">:
     <article class="srf-concern srf-concern--photo|plate|mono" style="--accent:#RRGGBB">       photo = cover image, plate = logo only, mono = neither
       <div class="srf-concern__media"><img class="srf-concern__img" ...> | <span class="srf-concern__plate"><img ...></span> | <span class="srf-concern__mono">AB</span></div>
       <div class="srf-concern__body">
         <span class="srf-chip srf-chip--accent"><i class="bi bi-buildings"></i>Property</span>
         <h3 class="srf-concern__name"><a class="srf-concern__link" href="/concerns/slug">Name</a></h3>     the link stretches over the whole card
         <p class="srf-concern__sum">Summary</p>   <span class="srf-concern__more">View profile <i class="bi bi-arrow-right"></i></span>
       </div>
     </article>
   ========================================================================== */

/* ---------- 0. Local tokens + Bootstrap bridge ------------------------------------------------ */
:root {
  --srf-gutter: clamp(1rem, 4vw, 2rem);
  --srf-sand: #F4EEE1;                              /* ivory, one step darker: alternate section ground */
  --srf-gold-line: linear-gradient(90deg, transparent, var(--srf-gold-500) 18%, var(--srf-gold-500) 82%, transparent);
  --srf-header-h-compact: 62px;
  --srf-topbar-h: var(--srf-header-h);               /* the toast host (toasts.css) sits just below the sticky header */

  --bs-body-font-family: var(--srf-font-body);
  --bs-body-color: var(--srf-ink-2);
  --bs-body-bg: var(--srf-ivory);
  --bs-primary: var(--srf-navy-900);
  --bs-primary-rgb: 11, 32, 66;
  --bs-link-color: var(--srf-navy-700);
  --bs-link-color-rgb: 27, 65, 128;
  --bs-link-hover-color: var(--srf-navy-900);
  --bs-link-hover-color-rgb: 11, 32, 66;
  --bs-border-color: var(--srf-line);
  --bs-focus-ring-color: rgba(221, 158, 56, .35);
  --bs-heading-color: var(--srf-navy-900);
}
@media (max-width: 1279.98px) {
  :root { --srf-header-h: 64px; --srf-header-h-compact: 58px; }
}

/* ---------- 1. Base ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--srf-header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--srf-ivory);
  color: var(--srf-ink-2);
  font-family: var(--srf-font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="bn"] { font-size: 106.25%; }              /* Hind Siliguri has a smaller x-height: the whole rem scale is 6% larger in Bengali */
html[lang="bn"] body { line-height: 1.8; }
[hidden] { display: none !important; }
::selection { background: var(--srf-gold-200); color: var(--srf-navy-950); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--srf-font-heading);
  color: var(--srf-navy-900);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-wrap: balance;
}
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6 {
  font-weight: 700; line-height: 1.35; letter-spacing: 0;
}
p { margin: 0 0 1rem; }
a { color: var(--srf-navy-700); text-underline-offset: .18em; }
a:hover { color: var(--srf-navy-900); }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
/* Long words and addresses wrap. The value is INHERITED (it used to be set on a/span/li/p/h1-h4 one by one, which also overrode the
   "overflow-wrap: anywhere" that cards and contact lists ask for on their container, so a long title or URL could not shrink a flex item). */
body { overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--srf-focus); outline-offset: 3px; }
.srf-skip {
  position: fixed; left: 1rem; top: -5rem; z-index: 2000;
  background: var(--srf-navy-900); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--srf-radius-md) var(--srf-radius-md);
  font-weight: 600; text-decoration: none; transition: top var(--srf-dur-2) var(--srf-ease);
}
.srf-skip:focus { top: 0; color: #fff; }
/* The link sits over the notice bar (same navy fill) as well as over the ivory header, so the global navy ring was 1.6:1 against the bar. The ring is
   drawn INSIDE the link's own navy fill (negative offset) in the on-dark gold: 9.7:1 on every ground, whatever is behind the link. */
.srf-skip:focus-visible { outline: 3px solid var(--srf-focus-on-dark); outline-offset: -6px; }
.site-main { min-height: 50vh; outline: none; overflow-x: clip; }      /* safety net: a Bootstrap .row with a wide gutter can never create a horizontal page scroll */

/* Bootstrap bridge: buttons, forms and links that other agents write with plain Bootstrap classes still look on-brand. */
.btn { min-height: var(--srf-tap); border-radius: var(--srf-radius-md); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-primary {
  --bs-btn-bg: var(--srf-navy-900); --bs-btn-border-color: var(--srf-navy-900);
  --bs-btn-hover-bg: var(--srf-navy-800); --bs-btn-hover-border-color: var(--srf-navy-800);
  --bs-btn-active-bg: var(--srf-navy-950); --bs-btn-active-border-color: var(--srf-navy-950);
  --bs-btn-disabled-bg: var(--srf-navy-900); --bs-btn-disabled-border-color: var(--srf-navy-900);
  --bs-btn-focus-shadow-rgb: 221, 158, 56;
}
.btn-outline-primary {
  --bs-btn-color: var(--srf-navy-900); --bs-btn-border-color: var(--srf-navy-900);
  --bs-btn-hover-bg: var(--srf-navy-900); --bs-btn-hover-border-color: var(--srf-navy-900);
  --bs-btn-active-bg: var(--srf-navy-950); --bs-btn-active-border-color: var(--srf-navy-950);
  --bs-btn-focus-shadow-rgb: 221, 158, 56;
}
/* Neutral outline button (lightbox Download, print preview, dialogs): Bootstrap's grey #6C757D measured 4.42:1 on ivory. */
.btn-outline-secondary {
  --bs-btn-color: var(--srf-ink-2); --bs-btn-border-color: var(--srf-input-border);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--srf-navy-900); --bs-btn-hover-border-color: var(--srf-navy-900);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--srf-navy-950); --bs-btn-active-border-color: var(--srf-navy-950);
  --bs-btn-disabled-color: var(--srf-muted-strong); --bs-btn-disabled-border-color: var(--srf-line-strong);
  --bs-btn-focus-shadow-rgb: 221, 158, 56;
}
.btn:focus-visible { outline: 3px solid var(--srf-focus); outline-offset: 2px; box-shadow: none; }
.btn-close:focus-visible { outline: 3px solid var(--srf-focus); outline-offset: 2px; box-shadow: none; }
/* Modal / lightbox close button: a 44 px tap target (Bootstrap's default is about 32 px). */
.modal .btn-close { box-sizing: border-box; width: 44px; height: 44px; padding: 0; background-size: 1em; margin: -.5rem -.5rem -.5rem auto; }
.form-control, .form-select {
  min-height: 48px; padding: .7rem .95rem; border: 1px solid var(--srf-input-border); border-radius: var(--srf-radius-md);
  background-color: #fff; color: var(--srf-ink); font-size: 1rem;
  transition: border-color var(--srf-dur-1), box-shadow var(--srf-dur-1);
}
.form-control::placeholder { color: var(--srf-muted); opacity: 1; }
/* A placeholder (or a value) wider than its field ends with an ellipsis instead of being cut in the middle of a word. */
input.form-control, .form-select { text-overflow: ellipsis; }
input::placeholder { text-overflow: ellipsis; }
.form-control:focus, .form-select:focus { border-color: var(--srf-navy-600); box-shadow: var(--srf-ring); background-color: #fff; color: var(--srf-ink); }
textarea.form-control { min-height: 140px; }
.form-label { margin-bottom: .4rem; font-weight: 600; font-size: .92rem; color: var(--srf-ink); }
.form-text { color: var(--srf-muted); font-size: .85rem; }
.form-check-input { width: 1.2rem; height: 1.2rem; border-color: var(--srf-input-border); }
.form-check-input:checked { background-color: var(--srf-navy-900); border-color: var(--srf-navy-900); }
.form-check-input:focus { border-color: var(--srf-navy-600); box-shadow: var(--srf-ring); }
/* Keyboard focus on fields: Bootstrap's `.form-control:focus { outline: 0 }` (0,2,0) beats the global `:focus-visible` (0,1,0), and the translucent
   gold halo above measures 1.3:1. Restate the solid ring AFTER those rules (same specificity, source order decides); the border colour change stays. */
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: 3px solid var(--srf-focus); outline-offset: 2px; box-shadow: none; }
.input-validation-error { border-color: var(--srf-danger) !important; }
.field-validation-error, .text-danger.field-validation-error { display: block; margin-top: .3rem; color: var(--srf-danger); font-size: .85rem; }
.validation-summary-errors { padding: .85rem 1.1rem; border: 1px solid var(--srf-danger); border-radius: var(--srf-radius-md); background: var(--srf-danger-bg); color: var(--srf-danger); }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.table { --bs-table-bg: transparent; }

/* ---------- 2. Layout primitives ------------------------------------------------------------- */
.srf-container, .container { width: 100%; max-width: var(--srf-container); margin-inline: auto; padding-inline: var(--srf-gutter); }
.srf-section { padding-block: clamp(3.25rem, 7vw, 6rem); }
.srf-section--tight { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.srf-section--paper { background: var(--srf-paper); border-block: 1px solid var(--srf-line); }
.srf-section--sand { background: var(--srf-sand); }
.srf-section--navy { background: var(--srf-navy-900); color: rgba(255, 255, 255, .86); }
.srf-section--navy :is(h1, h2, h3, h4) { color: #fff; }
.srf-section--navy .srf-eyebrow { color: var(--srf-gold-300); }

.srf-sechead { display: grid; gap: .7rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); max-width: 46rem; }
.srf-sechead--split { max-width: none; align-items: end; }
@media (min-width: 768px) { .srf-sechead--split { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; } }
.srf-sechead__title { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.15; }
html[lang="bn"] .srf-sechead__title { line-height: 1.3; }
.srf-sechead__lead { margin: 0; max-width: 40rem; color: var(--srf-muted); font-size: 1.08rem; }
.srf-sechead--split .srf-sechead__lead { margin-top: .5rem; }

.srf-eyebrow {
  display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 .35rem;
  font: 700 .78rem/1.2 var(--srf-font-ui); color: var(--srf-gold-800);
}
.srf-eyebrow::before { content: ""; flex: 0 0 26px; height: 2px; border-radius: 2px; background: var(--srf-gold-500); }
html[lang="en"] .srf-eyebrow { text-transform: uppercase; letter-spacing: .16em; }
html[lang="bn"] .srf-eyebrow { font-size: .92rem; }
.srf-title-xl { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.08; }
.srf-title-lg { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.15; }
.srf-title-md { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.25; }
.srf-lead { font-size: 1.12rem; color: var(--srf-ink-2); }
.srf-text-muted { color: var(--srf-muted); }
.srf-text-gold { color: var(--srf-gold-800); }

.srf-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 768px) {
  .srf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .srf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .srf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.srf-stack > * + * { margin-top: var(--srf-stack, 1rem); }
.srf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--srf-cluster, .75rem); }
.srf-ratio { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: var(--srf-ratio, 16 / 9); background: var(--srf-navy-50); }
.srf-ratio--16x9 { --srf-ratio: 16 / 9; } .srf-ratio--4x3 { --srf-ratio: 4 / 3; } .srf-ratio--1x1 { --srf-ratio: 1 / 1; } .srf-ratio--3x4 { --srf-ratio: 3 / 4; }
.srf-ratio > img, .srf-ratio > iframe, .srf-ratio > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.srf-center { text-align: center; }
.srf-nowrap { white-space: nowrap; }
.srf-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; }

/* Brand motif (inline SVG from _BrandMotif) */
.srf-motif { display: block; width: 100%; height: auto; overflow: visible; }
.srf-motif .m-navy { fill: var(--srf-navy-900); }
.srf-motif .m-gold { fill: var(--srf-gold-500); }
.srf-motif .m-navy-s { fill: none; stroke: var(--srf-navy-900); }
.srf-motif .m-gold-s { fill: none; stroke: var(--srf-gold-500); }
.srf-motif--watermark .m-navy { fill-opacity: .05; }
.srf-motif--watermark .m-gold { fill-opacity: .14; }
.srf-motif--watermark .m-navy-s { stroke-opacity: .06; }
.srf-motif--watermark .m-gold-s { stroke-opacity: .16; }
.srf-motif--arcs .m-navy { fill-opacity: .045; }
.srf-motif--arcs .m-gold { fill-opacity: .2; }
.srf-motif--arcs .m-bar { fill: var(--srf-gold-500); fill-opacity: .12; }       /* warm ghost bars, not grey */
.srf-motif--arcs .m-navy-s { stroke-opacity: .16; }
.srf-motif--arcs .m-gold-s { stroke-opacity: .8; }

/* ---------- 3. Buttons and links -------------------------------------------------------------- */
.srf-btn {
  --_bg: transparent; --_fg: var(--srf-navy-900); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: var(--srf-tap); padding: .7rem 1.35rem;
  border: 1.5px solid var(--_bd); border-radius: var(--srf-radius-md); background: var(--_bg); color: var(--_fg);
  font: 600 .95rem/1.2 var(--srf-font-ui); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--srf-dur-2) var(--srf-ease), color var(--srf-dur-2) var(--srf-ease),
              border-color var(--srf-dur-2) var(--srf-ease), box-shadow var(--srf-dur-2) var(--srf-ease), translate var(--srf-dur-2) var(--srf-ease);
}
.srf-btn i { font-size: 1.05em; transition: translate var(--srf-dur-2) var(--srf-ease); }
.srf-btn:hover { color: var(--_fg); }
.srf-btn:hover i.bi-arrow-right { translate: 3px 0; }
.srf-btn--primary { --_bg: var(--srf-navy-900); --_fg: #fff; --_bd: var(--srf-navy-900); }
.srf-btn--primary:hover { --_bg: var(--srf-navy-800); --_bd: var(--srf-navy-800); box-shadow: 0 10px 22px rgba(11, 32, 66, .22); translate: 0 -1px; }
.srf-btn--gold { --_bd: var(--srf-gold-500); --_fg: var(--srf-navy-900); }
.srf-btn--gold:hover { --_bg: var(--srf-gold-500); --_fg: var(--srf-navy-950); box-shadow: 0 10px 22px rgba(168, 115, 26, .22); translate: 0 -1px; }
.srf-btn--ghost { --_fg: var(--srf-navy-900); padding-inline: .7rem; }
.srf-btn--ghost:hover { --_bg: var(--srf-gold-100); }
.srf-btn--light { --_bg: #fff; --_fg: var(--srf-navy-900); --_bd: #fff; }
.srf-btn--light:hover { --_bg: var(--srf-gold-100); --_bd: var(--srf-gold-100); }
.srf-btn--gold-solid { --_bg: var(--srf-gold-500); --_fg: var(--srf-navy-950); --_bd: var(--srf-gold-500); }
.srf-btn--gold-solid:hover { --_bg: var(--srf-gold-300); --_bd: var(--srf-gold-300); translate: 0 -1px; }
.srf-btn--outline-light { --_bd: rgba(255, 255, 255, .5); --_fg: #fff; }
.srf-btn--outline-light:hover { --_bg: rgba(255, 255, 255, .12); --_bd: #fff; --_fg: #fff; }
.srf-btn--sm { min-height: var(--srf-tap); padding: .5rem 1rem; font-size: .88rem; }
.srf-btn--lg { min-height: 52px; padding: .85rem 1.7rem; font-size: 1rem; }
.srf-btn--block { display: flex; width: 100%; }
.srf-btn:disabled, .srf-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.srf-link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--srf-tap);
  font-weight: 600; color: var(--srf-navy-900); text-decoration: none;
}
.srf-link-arrow i { color: var(--srf-gold-700); transition: translate var(--srf-dur-2) var(--srf-ease); }
.srf-link-arrow:hover { color: var(--srf-navy-700); text-decoration: underline; text-decoration-color: var(--srf-gold-500); text-underline-offset: 6px; }
.srf-link-arrow:hover i { translate: 4px 0; }

/* ---------- 4. Chips, badges, dividers, stats ------------------------------------------------- */
.srf-chip {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; max-width: 100%; overflow-wrap: anywhere;
  padding: .3rem .75rem; border-radius: var(--srf-radius-pill);
  background: var(--srf-gold-100); color: var(--srf-gold-800); font: 600 .78rem/1.1 var(--srf-font-ui);
}
html[lang="bn"] .srf-chip { font-size: .85rem; }
.srf-chip--navy { background: var(--srf-navy-50); color: var(--srf-navy-800); }
.srf-chip--gold { background: var(--srf-gold-100); color: var(--srf-gold-800); }
.srf-chip--accent { background: color-mix(in srgb, var(--accent, var(--srf-navy-900)) 11%, #fff); color: var(--srf-ink); }
.srf-chip--accent i { color: color-mix(in srgb, var(--accent, var(--srf-navy-900)) 78%, #000); }
.srf-badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 6px;
  background: var(--srf-navy-50); color: var(--srf-navy-800); font: 700 .75rem/1.2 var(--srf-font-ui);
}
html[lang="bn"] .srf-badge { font-size: .82rem; }
.srf-badge--gold { background: var(--srf-gold-100); color: var(--srf-gold-800); }
.srf-badge--success { background: var(--srf-success-bg); color: var(--srf-success); }
.srf-badge--danger { background: var(--srf-danger-bg); color: var(--srf-danger); }
.srf-divider { width: 190px; max-width: 60%; margin: 1.5rem 0; }
.srf-center .srf-divider, .srf-divider--center { margin-inline: auto; }

.srf-stat { display: flex; flex-direction: column-reverse; gap: .35rem; padding: 1.25rem 0; border-top: 1px solid var(--srf-line); }
.srf-stat:first-child { border-top: 0; }
.srf-stat__num { margin: 0; font: 600 clamp(2.6rem, 6vw, 3.8rem)/1 var(--srf-font-heading); color: var(--srf-navy-900); font-variant-numeric: lining-nums tabular-nums; }
html[lang="bn"] .srf-stat__num { font-weight: 700; line-height: 1.15; }
.srf-stat__label { font: 600 .82rem/1.3 var(--srf-font-ui); color: var(--srf-gold-800); }
html[lang="en"] .srf-stat__label { text-transform: uppercase; letter-spacing: .12em; }
html[lang="bn"] .srf-stat__label { font-size: .95rem; }
.srf-statpanel {
  margin: 0; padding: .5rem clamp(1.25rem, 3.5vw, 2.25rem); border-radius: 22px;
  background: var(--srf-navy-900); border-top: 4px solid var(--srf-gold-500); box-shadow: var(--srf-shadow-3);
}
.srf-statpanel .srf-stat { border-top-color: rgba(255, 255, 255, .14); }
.srf-statpanel .srf-stat:first-child { border-top: 0; }
.srf-statpanel .srf-stat__num { color: #fff; }
.srf-statpanel .srf-stat__label { color: var(--srf-gold-300); }

/* ---------- 5. Cards ------------------------------------------------------------------------- */
.srf-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--srf-paper); border: 1px solid var(--srf-line); border-radius: var(--srf-radius-lg); box-shadow: var(--srf-shadow-1);
  transition: translate var(--srf-dur-2) var(--srf-ease), box-shadow var(--srf-dur-2) var(--srf-ease), border-color var(--srf-dur-2) var(--srf-ease);
}
.srf-card__media { position: relative; flex: 0 0 auto; aspect-ratio: 16 / 10; overflow: hidden; background: var(--srf-navy-50); }
.srf-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--srf-ease); }
.srf-card__body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.25rem 1.35rem 1.4rem; }
.srf-card__meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .82rem; color: var(--srf-muted); }
.srf-card__title { margin: 0; font-size: 1.25rem; line-height: 1.28; }
.srf-card__text { margin: 0; color: var(--srf-muted); }
.srf-card__link { color: inherit; text-decoration: none; }
.srf-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.srf-arch { overflow: hidden; border-radius: 999px 999px var(--srf-radius-md) var(--srf-radius-md); }
.srf-arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .srf-card--lift:hover { translate: 0 -5px; box-shadow: var(--srf-shadow-3); border-color: var(--srf-gold-300); }
  .srf-card--lift:hover .srf-card__media img { transform: scale(1.05); }
}

/* Sister Concern card + bento grid ------------------------------------------------------------ */
.srf-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.srf-bento > * { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) {                                  /* tablet: feature full width, then pairs */
  .srf-bento > * { grid-column: span 6; }
  .srf-bento > :nth-child(5n+1) { grid-column: span 12; }
  .srf-bento > :last-child:nth-child(5n+2), .srf-bento > :last-child:nth-child(5n+4) { grid-column: span 12; }
}
@media (min-width: 992px) {                                  /* desktop: 7 / 5, then 4 / 4 / 4 */
  .srf-bento > :nth-child(5n+1) { grid-column: span 7; }
  .srf-bento > :nth-child(5n+2) { grid-column: span 5; }
  .srf-bento > :nth-child(5n+3), .srf-bento > :nth-child(5n+4), .srf-bento > :nth-child(5n+5) { grid-column: span 4; }
  .srf-bento > :last-child:nth-child(5n+1), .srf-bento > :last-child:nth-child(5n+3) { grid-column: span 12; }
  .srf-bento > :nth-child(5n+2):last-child { grid-column: span 5; }          /* beats the tablet "orphan" rule above: 7 + 5 stays a pair */
  .srf-bento > :nth-child(5n+3):nth-last-child(2), .srf-bento > :nth-child(5n+4):last-child { grid-column: span 6; }
  .srf-bento > :nth-child(5n+2) .srf-concern__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 240px; max-height: none; }   /* fills the height set by the large card next to it */
  .srf-bento > :nth-child(5n+2) .srf-concern__body { flex: 0 0 auto; }
}

.srf-concern {
  --accent: var(--srf-navy-900);
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  background: var(--srf-paper); border: 1px solid var(--srf-line); border-radius: var(--srf-radius-lg); box-shadow: var(--srf-shadow-1);
  transition: translate var(--srf-dur-2) var(--srf-ease), box-shadow var(--srf-dur-2) var(--srf-ease), border-color var(--srf-dur-2) var(--srf-ease);
}
.srf-concern::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); z-index: 3; }
.srf-concern__media { position: relative; flex: 0 0 auto; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; background: var(--srf-navy-50); }
.srf-concern__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--srf-ease); }
.srf-concern--plate .srf-concern__media,
.srf-concern--mono .srf-concern__media {
  background: var(--srf-navy-50);
  background: radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--accent) 24%, #fff) 0%, color-mix(in srgb, var(--accent) 7%, var(--srf-ivory)) 72%);
}
.srf-concern--plate .srf-concern__media::after,
.srf-concern--mono .srf-concern__media::after {                     /* faint arc ornament behind the logo plate */
  content: ""; position: absolute; width: 90%; aspect-ratio: 1; right: -38%; top: -42%; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.srf-concern__plate {
  position: relative; z-index: 1; width: min(54%, 190px); aspect-ratio: 1; overflow: hidden;
  display: grid; place-items: center; background: #fff; border-radius: 20px;
  box-shadow: 0 14px 34px rgba(11, 32, 66, .14), 0 0 0 1px rgba(11, 32, 66, .05);
}
.srf-concern__plate img { display: block; width: 100%; height: 100%; object-fit: contain; }
.srf-concern__mono {
  position: relative; z-index: 1; display: grid; place-items: center; width: min(46%, 140px); aspect-ratio: 1; border-radius: 50%;
  background: var(--accent); color: #fff; font: 600 clamp(1.6rem, 3vw, 2.2rem)/1 var(--srf-font-heading);     /* light accents switch to dark ink in section 16 */
  box-shadow: 0 14px 34px rgba(11, 32, 66, .18);
}
.srf-concern__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.25rem 1.4rem 1.45rem; }
.srf-concern__name { margin: .15rem 0 0; font-size: 1.4rem; line-height: 1.2; }
.srf-concern__link { color: inherit; text-decoration: none; }
.srf-concern__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }       /* the whole card is the link */
.srf-concern__sum { margin: 0; color: var(--srf-muted); font-size: .96rem; }
.srf-concern__more {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .5rem;
  font-weight: 600; font-size: .92rem; color: var(--srf-navy-900);
}
.srf-concern__more i { color: var(--srf-gold-700); transition: translate var(--srf-dur-2) var(--srf-ease); }
.srf-concern:focus-within { outline: 3px solid var(--srf-focus); outline-offset: 3px; }
.srf-concern__link:focus-visible { outline: none; }
@media (hover: hover) {
  .srf-concern:hover { translate: 0 -5px; box-shadow: var(--srf-shadow-3); border-color: color-mix(in srgb, var(--accent) 45%, var(--srf-line)); }
  .srf-concern:hover .srf-concern__img { transform: scale(1.06); }
  .srf-concern:hover .srf-concern__more i { translate: 5px 0; }
}

@media (min-width: 768px) {                                  /* a logo-only card in the wide first slot gets a shorter, wider stage */
  .srf-bento > .srf-concern--plate:nth-child(5n+1) .srf-concern__media,
  .srf-bento > .srf-concern--mono:nth-child(5n+1) .srf-concern__media { aspect-ratio: 2 / 1; }
  /* ...and no logo / monogram stage is ever taller than a banner, wherever its card lands: a lone last card that spans the whole row
     (6th, 11th ... concern) used to become a 1000 x 500 px empty panel around a small monogram. (The 5n+2 card is exempt: it must
     fill the height of the large card beside it.) */
  .srf-concern--plate .srf-concern__media,
  .srf-concern--mono .srf-concern__media { max-height: 300px; }
}

/* From tablet up, the first card of each group of five, when it has a photo, becomes a large overlay card
   (on phones it stays a normal stacked card so the text never sits on top of the photo's own signage).
   The photo sits behind the text (z-index -1 inside the card's own stacking context), so the body stays
   un-positioned and the stretched link still covers the whole card. */
@media (min-width: 768px) {
  .srf-bento > .srf-concern--photo:nth-child(5n+1) { color: #fff; border-color: transparent; min-height: clamp(360px, 42vw, 540px); justify-content: flex-end; }
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-concern__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-concern__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7, 19, 39, .04) 28%, rgba(7, 19, 39, .55) 62%, rgba(7, 19, 39, .9) 100%);
  }
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-concern__body { flex: 0 0 auto; padding: clamp(1.25rem, 3vw, 2.25rem); gap: .7rem; }
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-concern__name { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-concern__sum { color: rgba(255, 255, 255, .86); max-width: 34rem; font-size: 1.02rem; }
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-concern__more { color: #fff; }
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-concern__more i { color: var(--srf-gold-300); }
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-chip--accent { background: rgba(7, 19, 39, .55); color: #fff; backdrop-filter: blur(6px); }      /* dark glass: legible on any photo (the light glass measured 3.4:1) */
  .srf-bento > .srf-concern--photo:nth-child(5n+1) .srf-chip--accent i { color: var(--srf-gold-300); }
  .srf-bento > .srf-concern--photo:nth-child(5n+1)::before { background: var(--srf-gold-500); }
}

/* ---------- 6. Rich text, timeline, tables, pager, empty state --------------------------------- */
.srf-prose { max-width: 72ch; color: var(--srf-ink-2); font-size: 1.05rem; line-height: 1.8; }
.srf-prose > :first-child { margin-top: 0; }
.srf-prose h2, .srf-prose h3, .srf-prose h4 { margin: 2.2rem 0 .8rem; }
.srf-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.srf-prose h3 { font-size: 1.35rem; }
.srf-prose h4 { font-size: 1.15rem; }
.srf-prose p { margin: 0 0 1.15rem; }
.srf-prose a { color: var(--srf-navy-700); text-decoration-color: var(--srf-gold-500); text-decoration-thickness: 2px; }
.srf-prose a:hover { color: var(--srf-navy-900); }
.srf-prose ul, .srf-prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.srf-prose li { margin-bottom: .4rem; }
.srf-prose li::marker { color: var(--srf-gold-700); }
.srf-prose blockquote { margin: 1.75rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--srf-gold-500); background: var(--srf-gold-100); border-radius: 0 var(--srf-radius-md) var(--srf-radius-md) 0; color: var(--srf-navy-900); font-family: var(--srf-font-heading); font-size: 1.15rem; }
.srf-prose blockquote p:last-child { margin-bottom: 0; }
.srf-prose img { display: block; max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: var(--srf-radius-md); }
.srf-prose iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 1.5rem 0; border: 0; border-radius: var(--srf-radius-md); }
.srf-prose table { display: block; width: 100%; overflow-x: auto; margin: 1.5rem 0; border-collapse: collapse; }
.srf-prose th, .srf-prose td { padding: .65rem .85rem; border: 1px solid var(--srf-line); text-align: left; }
.srf-prose th { background: var(--srf-navy-50); color: var(--srf-navy-900); }
.srf-prose hr { margin: 2.5rem 0; border: 0; height: 2px; background: var(--srf-gold-line); opacity: 1; }

.srf-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.srf-timeline::before { content: ""; position: absolute; left: 7px; top: .4rem; bottom: .4rem; width: 2px; background: linear-gradient(180deg, var(--srf-gold-500), var(--srf-line)); }
.srf-timeline__item { position: relative; padding: 0 0 2rem 2.5rem; }
.srf-timeline__item:last-child { padding-bottom: 0; }
.srf-timeline__item::before { content: ""; position: absolute; left: 0; top: .3rem; width: 16px; height: 16px; border-radius: 50%; background: var(--srf-paper); border: 3px solid var(--srf-gold-500); box-shadow: 0 0 0 4px var(--srf-ivory); }
.srf-timeline__year { margin: 0; font: 700 1.1rem/1.3 var(--srf-font-heading); color: var(--srf-gold-800); font-variant-numeric: lining-nums; }
.srf-timeline__title { margin: .15rem 0 .35rem; font-size: 1.2rem; line-height: 1.3; }
.srf-timeline__text { margin: 0; color: var(--srf-muted); }
@media (min-width: 992px) {
  .srf-timeline--center::before { left: 50%; transform: translateX(-1px); }
  .srf-timeline--center .srf-timeline__item { width: 50%; padding: 0 3rem 2.5rem 0; text-align: right; }
  .srf-timeline--center .srf-timeline__item::before { left: auto; right: -8px; }
  .srf-timeline--center .srf-timeline__item:nth-child(even) { margin-left: 50%; padding: 0 0 2.5rem 3rem; text-align: left; }
  .srf-timeline--center .srf-timeline__item:nth-child(even)::before { right: auto; left: -8px; }
}

.srf-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--srf-line); border-radius: var(--srf-radius-md); background: var(--srf-paper); }
.srf-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .95rem; }
.srf-table th { padding: .8rem 1rem; background: var(--srf-navy-50); color: var(--srf-navy-900); font-weight: 600; text-align: left; white-space: nowrap; }
.srf-table td { padding: .8rem 1rem; border-top: 1px solid var(--srf-line); vertical-align: top; }
.srf-table tbody tr:hover { background: var(--srf-ivory); }

.srf-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.srf-pager a, .srf-pager span {
  display: inline-grid; place-items: center; min-width: var(--srf-tap); min-height: var(--srf-tap); padding: 0 .85rem;
  border: 1px solid var(--srf-line-strong); border-radius: var(--srf-radius-md); background: var(--srf-paper);
  color: var(--srf-navy-900); font-weight: 600; text-decoration: none;
}
.srf-pager a:hover { border-color: var(--srf-gold-500); background: var(--srf-gold-100); }
.srf-pager .is-active, .srf-pager [aria-current="page"] { background: var(--srf-navy-900); border-color: var(--srf-navy-900); color: #fff; }
.srf-pager .is-disabled { opacity: .45; pointer-events: none; }

.srf-empty { padding: clamp(2rem, 6vw, 4rem) 1rem; text-align: center; color: var(--srf-muted); }
.srf-empty i { display: block; margin-bottom: .75rem; font-size: 2.4rem; color: var(--srf-gold-600); }
.srf-empty h2, .srf-empty h3 { margin-bottom: .5rem; font-size: 1.4rem; }

/* ---------- 7. Forms ---------------------------------------------------------------------------- */
.srf-form { display: grid; gap: 1.1rem; }
.srf-form__grid { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .srf-form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.srf-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.srf-form .srf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }    /* honeypot field */

/* ---------- 8. Notice bar ----------------------------------------------------------------------- */
.site-notice { position: relative; background: var(--srf-navy-900); color: rgba(255, 255, 255, .92); font-size: .9rem; border-bottom: 2px solid var(--srf-gold-500); }
.site-notice__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 44px; padding-block: .25rem; padding-inline: 3rem; }
.site-notice__icon { flex: 0 0 auto; color: var(--srf-gold-300); }
.site-notice__text { flex: 0 1 auto; min-width: 0; margin: 0; text-align: center; line-height: 1.45; }
.site-notice__text a { margin-inline-start: .6rem; color: var(--srf-gold-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.site-notice__text a:hover { color: #fff; }
.site-notice__text a i { margin-inline-start: .3rem; }
.site-notice__close {
  position: absolute; right: .2rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--srf-radius-sm); background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer;
}
.site-notice__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- 9. Header, navigation, language toggle ---------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 1030; height: var(--srf-header-h); }
.site-header__bar { position: relative; height: var(--srf-header-h); border-bottom: 1px solid transparent; }
.site-header__bar::before {                                    /* glass layer; a pseudo-element so fixed children keep the viewport as their box */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(251, 248, 242, .9); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; height: 100%; }

.site-brand { display: inline-flex; align-items: center; gap: .7rem; flex: 0 1 auto; min-width: 0; min-height: var(--srf-tap); color: var(--srf-navy-900); text-decoration: none; }
.site-brand:hover { color: var(--srf-navy-900); }
.site-brand__mark { flex: 0 0 auto; width: 46px; height: 46px; }
.site-brand__logo { display: block; width: auto; max-width: 190px; height: 44px; object-fit: contain; }
.site-brand__text { display: flex; flex-direction: column; justify-content: center; line-height: 1.05; min-width: 0; }
.site-brand__name { font-family: var(--srf-font-heading); font-weight: 700; font-size: 1.4rem; line-height: 1.1; color: var(--srf-navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-brand__b { font-weight: 500; color: var(--srf-gold-700); }
.site-brand__tag { display: block; margin-top: 3px; font: 600 .75rem/1.2 var(--srf-font-ui); color: var(--srf-gold-800); white-space: nowrap; }      /* 12 px: never below the readable minimum */
html[lang="en"] .site-brand__tag { text-transform: uppercase; letter-spacing: .12em; }
html[lang="bn"] .site-brand__tag { font-size: .76rem; }
@media (max-width: 575.98px) { .site-brand__tag { display: none; } .site-brand__mark { width: 40px; height: 40px; } .site-brand__name { font-size: 1.25rem; } }
@media (max-width: 399.98px) { .site-brand { gap: .5rem; } .site-brand__mark { width: 36px; height: 36px; } .site-brand__name { font-size: 1.12rem; } }
@media (max-width: 349.98px) { .site-brand__b { display: none; } }      /* very narrow phones (320 px): the wordmark drops its second word, in both languages, so it is never cut with "..." and the language pill and menu button always fit */
@media (max-width: 359.98px) { html[lang="bn"] .site-brand__b { display: none; } }      /* the Bengali wordmark is wider (full width 117 px, it needs a 352 px screen even unscrolled): it drops the second word below 360 px too */

.site-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .6rem; margin-left: auto; }
.site-header__cta { display: none; }

.lang-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--srf-line-strong); border-radius: var(--srf-radius-pill); background: var(--srf-paper); }
.lang-toggle__opt {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 38px; padding: 0 .8rem;
  border-radius: var(--srf-radius-pill); color: var(--srf-muted); font: 600 .84rem/1 var(--srf-font-ui); text-decoration: none;
  transition: background-color var(--srf-dur-2) var(--srf-ease), color var(--srf-dur-2) var(--srf-ease);
}
/* English pages: "বাংলা" is the only Bengali text there, so it uses the device's own Bengali font. Hind Siliguri stays last as a safety net;
   this way its 74 KB file is not downloaded on every English page for four glyphs. */
html[lang="en"] .lang-toggle__opt[lang="bn"] {
  font-family: "Nirmala UI", "Shonar Bangla", "Vrinda", "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Lohit Bengali", "Hind Siliguri", sans-serif;
}
.lang-toggle__opt::after { content: ""; position: absolute; inset: -4px -2px; }      /* 46px touch area; the pill keeps its slim look */
.lang-toggle__opt:hover { color: var(--srf-navy-900); background: var(--srf-gold-100); }
.lang-toggle__opt[aria-current="true"] { background: var(--srf-navy-900); color: #fff; }
@media (max-width: 399.98px) { .lang-toggle__opt { min-width: 40px; padding: 0 .55rem; } }

.site-burger { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--srf-line-strong); border-radius: var(--srf-radius-md); background: var(--srf-paper); cursor: pointer; }
.site-burger__lines { position: relative; display: block; width: 20px; height: 14px; }
.site-burger__lines span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--srf-navy-900); }
.site-burger__lines span:nth-child(1) { top: 0; }
.site-burger__lines span:nth-child(2) { top: 6px; }
.site-burger__lines span:nth-child(3) { top: 12px; }
html.nav-open .site-burger__lines span:nth-child(1) { top: 6px; transform: rotate(45deg); }
html.nav-open .site-burger__lines span:nth-child(2) { opacity: 0; }
html.nav-open .site-burger__lines span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (max-width: 399.98px) { .site-header__inner { gap: .5rem; } .site-header__actions { gap: .3rem; } }      /* the burger keeps its 44 px tap target: the gaps give way, not the button */

/* Mobile / tablet: the nav is an off-canvas panel (closed = visibility:hidden, so it is out of the tab order) */
@media (max-width: 1279.98px) {
  .site-nav {
    position: fixed; inset: 0 0 0 auto; z-index: 3; display: flex; flex-direction: column; width: min(88vw, 400px);
    overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom);
    background: var(--srf-paper); box-shadow: -24px 0 60px rgba(7, 19, 39, .28);
    transform: translateX(104%); visibility: hidden;
    transition: transform .38s var(--srf-ease), visibility 0s linear .38s;
  }
  html.nav-open .site-nav { transform: none; visibility: visible; transition-delay: 0s; }
  .site-backdrop {
    position: fixed; inset: 0; z-index: 2; background: rgba(7, 19, 39, .5); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--srf-ease), visibility 0s linear .3s;
  }
  html.nav-open .site-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  html.nav-open { overflow: hidden; }
  /* The cookie notice is a body-level node with z-index 1060, so it outranks the whole header stacking context: it covered the drawer's foot buttons
     and was not dimmed by the backdrop. visibility keeps its layout (--srf-cookie-h) and does not restart its entry animation; it returns when the drawer closes. */
  html.nav-open .fab-stack, html.nav-open .cookie { visibility: hidden; }

  .site-nav__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem .7rem 1.4rem; background: var(--srf-paper); border-bottom: 1px solid var(--srf-line); }
  .site-nav__headtitle { font: 700 1.15rem/1.2 var(--srf-font-heading); color: var(--srf-navy-900); }
  .site-nav__close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--srf-line-strong); border-radius: var(--srf-radius-md); background: var(--srf-paper); color: var(--srf-navy-900); cursor: pointer; }
  .site-nav__list { margin: 0; padding: .6rem .8rem 1rem; list-style: none; }
  .site-nav__row { display: flex; align-items: stretch; }
  .site-nav__link {
    flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 54px; padding: 0 .8rem;
    border: 0; border-radius: var(--srf-radius-md); background: transparent; color: var(--srf-navy-900);
    font: 600 1.06rem/1.25 var(--srf-font-ui); text-align: left; text-decoration: none; cursor: pointer;
  }
  .site-nav__link:hover { background: var(--srf-ivory); color: var(--srf-navy-900); }
  .site-nav__item.is-active > .site-nav__link,                                       /* flat item: <li><a> (no .site-nav__row wrapper) */
  .site-nav__item.is-active > .site-nav__row > .site-nav__link { background: var(--srf-gold-100); }      /* item with a sub-menu */
  .site-nav__toggle { flex: 0 0 54px; display: grid; place-items: center; border: 0; border-radius: var(--srf-radius-md); background: transparent; color: var(--srf-navy-700); cursor: pointer; }
  .site-nav__toggle i, .site-nav__link--btn i { transition: rotate var(--srf-dur-2) var(--srf-ease); }
  .site-nav__item.is-open > .site-nav__row .site-nav__toggle i, .site-nav__item.is-open > .site-nav__row .site-nav__link--btn i { rotate: 180deg; }
  .site-nav__sub { display: none; margin: .1rem 0 .6rem 1.1rem; padding: 0 0 0 .7rem; list-style: none; border-left: 2px solid var(--srf-gold-300); }
  .site-nav__item.is-open > .site-nav__sub { display: block; animation: srf-fade .25s var(--srf-ease); }
  .site-nav__sublink { display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: 0 .8rem; border-radius: var(--srf-radius-sm); color: var(--srf-ink-2); font-weight: 500; text-decoration: none; }
  .site-nav__sublink:hover, .site-nav__sublink.is-active { background: var(--srf-ivory); color: var(--srf-navy-900); }
  .site-nav__sublink i { color: var(--srf-gold-700); }
  .site-nav__foot { display: grid; gap: .5rem; margin-top: auto; padding: 1.1rem 1.4rem 1.5rem; background: var(--srf-ivory); border-top: 1px solid var(--srf-line); }
  .site-nav__contact { display: flex; align-items: center; gap: .65rem; min-height: var(--srf-tap); color: var(--srf-ink-2); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
  .site-nav__contact i { color: var(--srf-gold-700); }
}
@keyframes srf-fade { from { opacity: 0; } to { opacity: 1; } }

/* Desktop: one line - brand, menu, language pill, Contact button */
@media (min-width: 1280px) {
  .site-backdrop, .site-burger, .site-nav__head, .site-nav__foot { display: none; }
  .site-header__cta { display: inline-flex; }
  .site-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
  .site-nav__list { display: flex; align-items: center; gap: .05rem; margin: 0; padding: 0; list-style: none; }
  .site-nav__item { position: relative; }
  .site-nav__row { display: flex; align-items: center; }
  .site-header__inner { gap: clamp(.6rem, 1.2vw, 1rem); }
  .site-nav__link {                                           /* size and padding scale with the viewport so a long (Bengali) menu still fits on one line ... */
    --_vw: min(100vw, 1304px);                                /* ... but only up to the width where the container stops growing (1240 px + 2 x 32 px gutter): beyond it the links must not eat the room */
    --_pad: clamp(.5rem, calc(var(--_vw) * .0062), .85rem);
    position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: var(--srf-tap); padding: 0 var(--_pad);
    border: 0; background: transparent; color: var(--srf-ink-2); font: 600 clamp(.88rem, calc(var(--_vw) * .005 + .5rem), .95rem)/1 var(--srf-font-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .site-nav__link::after {
    content: ""; position: absolute; left: var(--_pad); right: var(--_pad); bottom: 7px; height: 2px; border-radius: 2px;
    background: var(--srf-gold-500); transform: scaleX(0); transition: transform .3s var(--srf-ease);
  }
  .site-nav__link:hover,
  .site-nav__item.is-active > .site-nav__link,
  .site-nav__item.is-active > .site-nav__row > .site-nav__link { color: var(--srf-navy-900); }
  .site-nav__link:hover::after,
  .site-nav__item.is-active > .site-nav__link::after,
  .site-nav__item.is-active > .site-nav__row > .site-nav__link::after { transform: scaleX(1); }
  .site-nav__item.has-sub > .site-nav__row > .site-nav__link { padding-right: .1rem; }
  .site-nav__link--btn i { font-size: .68rem; }
  .site-nav__toggle { display: grid; place-items: center; width: 26px; min-height: var(--srf-tap); padding: 0; border: 0; background: transparent; color: var(--srf-muted); cursor: pointer; }
  .site-nav__toggle i { font-size: .68rem; transition: rotate var(--srf-dur-2) var(--srf-ease); }
  .site-nav__item.is-open > .site-nav__row .site-nav__toggle i { rotate: 180deg; }
  .site-nav__sub {
    position: absolute; top: calc(100% + 4px); left: 50%; z-index: 5; width: max-content; min-width: 260px; max-width: 22rem; margin: 0; padding: .5rem; list-style: none;
    background: var(--srf-paper); border: 1px solid var(--srf-line); border-radius: 16px; box-shadow: var(--srf-shadow-3);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
    transition: opacity .2s var(--srf-ease), transform .2s var(--srf-ease), visibility 0s linear .2s;
  }
  .site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }       /* hover bridge */
  .site-nav__item:last-child > .site-nav__sub { left: auto; right: 0; transform: translate(0, 8px); }
  .site-nav__item.is-open > .site-nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .site-nav__item:last-child.is-open > .site-nav__sub { transform: translate(0, 0); }
  .site-nav__sublink { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .45rem .85rem; border-radius: 10px; color: var(--srf-ink-2); font-size: .93rem; font-weight: 500; text-decoration: none; }
  .site-nav__sublink:hover, .site-nav__sublink.is-active { background: var(--srf-gold-100); color: var(--srf-navy-900); }
  .site-nav__sublink i { color: var(--srf-gold-700); }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .site-nav__item.has-sub:hover > .site-nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .site-nav__item.has-sub:last-child:hover > .site-nav__sub { transform: translate(0, 0); }
  .site-nav__item.has-sub:hover > .site-nav__row .site-nav__toggle i { rotate: 180deg; }
}

/* ---------- 10. Breadcrumb, inner-page hero, CTA band ---------------------------------------------- */
.srf-crumbs-wrap { margin-bottom: .9rem; }
.srf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; margin: 0; padding: 0; list-style: none; font-size: .86rem; color: var(--srf-muted); overflow-wrap: anywhere; }
.srf-crumbs li { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; max-width: 100%; }
.srf-crumbs li > span, .srf-crumbs a > span { min-width: 0; }                           /* a long (or unbroken) title wraps inside the line instead of running past the screen */
.srf-crumbs li:not(:last-child)::after { content: "/"; color: var(--srf-gold-700); }     /* the separator trails its crumb, so a wrapped line never starts with "/" */
.srf-crumbs a { display: inline-flex; align-items: center; gap: .35rem; min-height: 28px; color: var(--srf-muted); text-decoration: none; }
.srf-crumbs a:hover { color: var(--srf-navy-900); text-decoration: underline; text-decoration-color: var(--srf-gold-500); }
.srf-crumbs [aria-current="page"] span { color: var(--srf-navy-900); font-weight: 600; }
html[lang="bn"] .srf-crumbs { font-size: .95rem; }

.srf-pagehero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 4.75rem); background: linear-gradient(180deg, var(--srf-ivory), var(--srf-sand)); border-bottom: 1px solid var(--srf-line); }
.srf-pagehero__arcs { position: absolute; z-index: -1; right: -8%; top: -42%; width: min(560px, 80vw); pointer-events: none; }
@media (max-width: 575.98px) { .srf-pagehero__arcs, .srf-error__motif { display: none; } }     /* phones: keep text areas clean */
.srf-pagehero__inner { position: relative; display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
.srf-pagehero__title { margin: .4rem 0 0; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.12; }
html[lang="bn"] .srf-pagehero__title { line-height: 1.3; }
.srf-pagehero__sub { max-width: 40rem; margin: 1rem 0 0; color: var(--srf-ink-2); font-size: 1.1rem; }
.srf-pagehero__figure { display: none; margin: 0; }
.srf-pagehero__rule { position: absolute; left: 50%; bottom: 14px; width: 190px; transform: translateX(-50%); }
@media (min-width: 992px) {
  .srf-pagehero--image .srf-pagehero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .srf-pagehero__figure {
    display: block; justify-self: end; width: min(100%, 330px); aspect-ratio: 4 / 5; overflow: hidden;
    border: 6px solid var(--srf-paper); border-radius: 999px 999px var(--srf-radius-lg) var(--srf-radius-lg); box-shadow: var(--srf-shadow-3);
  }
  .srf-pagehero__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

.srf-cta { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(2.75rem, 6vw, 4.75rem); background: var(--srf-navy-900); color: rgba(255, 255, 255, .86); border-top: 3px solid var(--srf-gold-500); }
.srf-cta__motif { position: absolute; z-index: -1; right: -6%; top: -60%; width: min(620px, 90vw); pointer-events: none; }
@media (max-width: 767.98px) { .srf-cta__motif { right: -42%; top: auto; bottom: -34%; width: 84vw; } }     /* phones: tucked into the lower corner, away from the headline */
.srf-cta .srf-motif--arcs .m-navy { fill: #fff; fill-opacity: .05; }
.srf-cta .srf-motif--arcs .m-navy-s { stroke: #fff; stroke-opacity: .14; }
.srf-cta__inner { display: grid; gap: 1.75rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .srf-cta__inner { grid-template-columns: minmax(0, 1.5fr) auto; gap: 3rem; } }
.srf-cta .srf-eyebrow { color: var(--srf-gold-300); }
.srf-cta__title { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; }
html[lang="bn"] .srf-cta__title { line-height: 1.3; }
.srf-cta__text { max-width: 38rem; margin: 0; font-size: 1.08rem; }
.srf-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 11. Home page ---------------------------------------------------------------------- */
.home-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(2rem, 5.5vw, 5rem) clamp(2.75rem, 6.5vw, 5.5rem);
  background:
    radial-gradient(60% 70% at 92% 8%, rgba(221, 158, 56, .17), transparent 62%),
    radial-gradient(40% 45% at 0% 100%, rgba(221, 158, 56, .07), transparent 65%),
    var(--srf-ivory);
}
.home-hero__bg { position: absolute; z-index: -1; right: -14%; top: -26%; width: min(820px, 96vw); pointer-events: none; }
@media (max-width: 991.98px) { .home-hero__bg { top: auto; bottom: -7%; right: -36%; width: 120vw; } }     /* phones: rings sit behind the photos, never behind the headline */
.home-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .home-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
/* Sized so "Trust · Growth · Success" stays on one line beside the photos from 992px up (it scales with the column);
   on phones it wraps after a dot. */
.home-hero__title {
  margin: .5rem 0 1.15rem; font-size: clamp(2.3rem, 3.9vw, 3.6rem); font-weight: 600; line-height: 1.1; letter-spacing: -.012em; color: var(--srf-navy-900);
}
@media (max-width: 991.98px) { .home-hero__title { font-size: clamp(2.3rem, 7.4vw, 3.4rem); } }
html[lang="bn"] .home-hero__title { font-size: clamp(2.1rem, 3.5vw, 3.2rem); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
@media (max-width: 991.98px) { html[lang="bn"] .home-hero__title { font-size: clamp(2.1rem, 6.8vw, 3rem); } }
.home-hero__word:not(:only-child) { white-space: nowrap; }
.home-hero__title .dot { display: inline-block; padding-inline: .1em .04em; color: var(--srf-gold-500); }
.home-hero__lead { max-width: 36rem; margin: 0; color: var(--srf-ink-2); font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

.home-hero__art { position: relative; isolation: isolate; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: 1 / 1.04; }
.home-hero__art::before {                                     /* soft gold glow behind the frames */
  content: ""; position: absolute; z-index: -1; right: -8%; top: 8%; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(235, 194, 123, .5), rgba(235, 194, 123, 0) 68%);
}
.home-hero__arch { position: absolute; margin: 0; overflow: hidden; background: var(--srf-navy-50); border-radius: 999px 999px 22px 22px; box-shadow: var(--srf-shadow-3); }
.home-hero__arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-hero__arch--lg { left: 0; bottom: 0; width: 64%; aspect-ratio: 4 / 5; outline: 1.5px solid var(--srf-gold-500); outline-offset: 9px; }
.home-hero__arch--lg img { object-position: 50% 42%; }
.home-hero__arch--sm { right: 0; top: 0; z-index: 1; width: 46%; aspect-ratio: 3 / 4; border: 6px solid var(--srf-ivory); }
.home-hero__arch--sm img { object-position: 38% 50%; }
.home-hero__badge {
  position: absolute; right: 1%; bottom: 6%; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: .6rem;
  width: 33%; min-width: 124px; padding: .85rem 1rem .95rem; background: var(--srf-paper); border: 1px solid var(--srf-line);
  border-radius: 18px; border-top: 3px solid var(--srf-gold-500); box-shadow: var(--srf-shadow-3);
}
.home-hero__badge-num { grid-column: 1; grid-row: 1; font: 600 clamp(2rem, 4.4vw, 2.8rem)/1 var(--srf-font-heading); color: var(--srf-navy-900); font-variant-numeric: lining-nums; }
html[lang="bn"] .home-hero__badge-num { font-weight: 700; line-height: 1.15; }
.home-hero__badge-bars { grid-column: 2; grid-row: 1; width: 30px; align-self: center; }
.home-hero__badge-label { grid-column: 1 / -1; grid-row: 2; margin-top: .25rem; color: var(--srf-muted); font: 600 .78rem/1.3 var(--srf-font-ui); }
html[lang="bn"] .home-hero__badge-label { font-size: .88rem; }
@media (max-width: 575.98px) { .home-hero__art { max-width: 400px; } .home-hero__arch--lg { outline-offset: 6px; } }

.home-sectors { background: var(--srf-paper); border-block: 1px solid var(--srf-line); }
.home-sectors__inner { display: flex; flex-direction: column; gap: .8rem; padding-block: 1.15rem; }
.home-sectors__label { flex: 0 0 auto; margin: 0; font: 700 .78rem/1.3 var(--srf-font-ui); color: var(--srf-gold-800); }
html[lang="en"] .home-sectors__label { text-transform: uppercase; letter-spacing: .16em; }
html[lang="bn"] .home-sectors__label { font-size: .95rem; }
.home-sectors__rail {
  display: flex; gap: .6rem; min-width: 0; margin: 0 calc(var(--srf-gutter) * -1); padding: .2rem var(--srf-gutter) .4rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--srf-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.home-sectors__rail::-webkit-scrollbar { display: none; }
.home-sector {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem; scroll-snap-align: start;
  padding: .4rem 1.05rem .4rem .45rem; border: 1px solid var(--srf-line); border-radius: var(--srf-radius-pill); background: var(--srf-ivory);
}
.home-sector__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--srf-navy-900); color: var(--srf-gold-300); font-size: .95rem; }
.home-sector__name { font: 600 .92rem/1.2 var(--srf-font-ui); color: var(--srf-navy-900); white-space: nowrap; }
html[lang="bn"] .home-sector__name { font-size: 1rem; }
@media (min-width: 992px) {
  .home-sectors__inner { flex-direction: row; align-items: center; gap: 2rem; padding-block: 1.4rem; }
  .home-sectors__rail { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
}

.home-about__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .home-about__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.home-about__text { max-width: 38rem; margin: 1rem 0 0; color: var(--srf-ink-2); font-size: 1.1rem; }
.home-about__text + .home-about__text { margin-top: .75rem; color: var(--srf-muted); font-size: 1.02rem; }
.home-about__rule { width: 190px; margin: 1.6rem 0 1.1rem; }
@media (min-width: 992px) { .home-about__stats { margin-top: 1.5rem; } }

/* ---------- 12. Light footer ------------------------------------------------------------------------ */
.site-footer { position: relative; overflow: hidden; isolation: isolate; margin-top: 0; background: linear-gradient(180deg, var(--srf-paper) 0%, var(--srf-ivory) 100%); border-top: 1px solid var(--srf-line); }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--srf-gold-line); }
.site-footer__watermark { position: absolute; z-index: -1; right: -6%; bottom: -22%; width: min(460px, 70vw); pointer-events: none; }
.site-footer__top { padding-block: clamp(2.75rem, 6vw, 4.25rem) clamp(1.75rem, 4vw, 2.5rem); }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 2.25rem 2rem; }
.site-footer__col { flex: 1 1 100%; min-width: 0; }
.site-footer__col--links { flex: 0 0 calc(50% - 1rem); }
.site-footer__col--concerns { flex: 1 1 100%; order: 4; }     /* phones: Explore + Information side by side, then Concerns, then Contact */
.site-footer__col--contact { order: 5; }
.site-footer__logo { display: inline-block; margin-bottom: .9rem; }
.site-footer__logo img { display: block; width: 150px; height: auto; }
.site-footer__about { max-width: 24rem; margin: 0 0 1.1rem; color: var(--srf-muted); font-size: .95rem; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__social a {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--srf-line-strong); border-radius: 50%;
  background: var(--srf-paper); color: var(--srf-navy-900); text-decoration: none;
  transition: background-color var(--srf-dur-2) var(--srf-ease), color var(--srf-dur-2) var(--srf-ease), border-color var(--srf-dur-2) var(--srf-ease), translate var(--srf-dur-2) var(--srf-ease);
}
.site-footer__social a:hover { background: var(--srf-navy-900); border-color: var(--srf-navy-900); color: #fff; translate: 0 -2px; }
.site-footer__newsletter { margin-top: 1.25rem; }
.site-footer__title { position: relative; margin: 0 0 1rem; padding-bottom: .7rem; font: 600 1.05rem/1.2 var(--srf-font-heading); color: var(--srf-navy-900); }
.site-footer__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--srf-gold-500); }
.site-footer__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: .05rem; margin: 0; padding: 0; list-style: none; }
.site-footer__links li { min-width: 0; }
.site-footer__links a { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 36px; color: var(--srf-ink-2); font-size: .95rem; text-decoration: none; overflow-wrap: anywhere; }
.site-footer__links a:hover { color: var(--srf-navy-900); text-decoration: underline; text-decoration-color: var(--srf-gold-500); text-underline-offset: 5px; }
.site-footer__contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; max-width: 100%; color: var(--srf-ink-2); font-size: .95rem; overflow-wrap: anywhere; }     /* a long address / unbroken word wraps inside its column */
.site-footer__contact li > * { min-width: 0; }
.site-footer__contact a { color: var(--srf-ink-2); text-decoration: none; overflow-wrap: anywhere; }
.site-footer__contact a:hover { color: var(--srf-navy-900); text-decoration: underline; text-decoration-color: var(--srf-gold-500); }
.site-footer__contact .fci { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--srf-gold-100); color: var(--srf-gold-800); }
.site-footer__bottom { --srf-muted: var(--srf-muted-strong); background: var(--srf-sand); border-top: 1px solid var(--srf-line); }      /* muted text on sand needs the stronger shade (4.3:1 -> 5.3:1) */
.site-footer__bottomin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.5rem; padding-block: 1rem; font-size: .86rem; color: var(--srf-muted); }
.site-footer__bottomin p { margin: 0; }
.site-footer__credit a { color: var(--srf-navy-700); font-weight: 600; text-decoration: none; }
.site-footer__credit a i { margin-right: .3rem; }
.site-footer__credit a:hover { text-decoration: underline; text-decoration-color: var(--srf-gold-500); }
.site-footer__staff { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; color: var(--srf-muted); font-size: .86rem; text-decoration: none; }
.site-footer__staff:hover { color: var(--srf-navy-900); text-decoration: underline; text-decoration-color: var(--srf-gold-500); text-underline-offset: 5px; }
/* Small text links keep their compact look but get a 44px touch area */
.site-footer__links a, .site-footer__staff, .srf-crumbs a { position: relative; }
.site-footer__links a::after, .site-footer__staff::after { content: ""; position: absolute; inset: -4px -6px; }
.srf-crumbs a::after { content: ""; position: absolute; inset: -8px -6px; }      /* 28 px link + 16 px = a 44 px hit area (it was 36 px) */
@media (min-width: 640px) {                                    /* tablet: brand row, three link columns, then Contact as a full-width strip */
  .site-footer__col--links { flex: 1 1 140px; }
  .site-footer__col--concerns { flex: 1 1 190px; }
  .site-footer__contact { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
}
@media (min-width: 1100px) {                                   /* desktop: everything on one row */
  .site-footer__col--brand { flex: 1.4 1 240px; max-width: 340px; }
  .site-footer__col--links { flex: 1 1 120px; }
  .site-footer__col--concerns { flex: 1 1 170px; order: 0; }
  .site-footer__col--contact { flex: 1.3 1 210px; order: 0; }
  .site-footer__contact { display: grid; gap: .7rem; }
}
@media (max-width: 767.98px) {
  .site-footer__bottomin { flex-direction: column; align-items: flex-start; padding-bottom: calc(1.25rem + 64px); }      /* keep the last line clear of the floating buttons */
}

/* ---------- 13. Floating actions and cookie notice ---------------------------------------------------- */
.fab-stack { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.fab {
  pointer-events: auto; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; color: #fff;
  font-size: 1.35rem; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(7, 19, 39, .28);
  transition: translate var(--srf-dur-2) var(--srf-ease), box-shadow var(--srf-dur-2) var(--srf-ease), opacity var(--srf-dur-2) var(--srf-ease), visibility 0s;
}
.fab:hover { color: #fff; translate: 0 -3px; box-shadow: 0 14px 28px rgba(7, 19, 39, .32); }
.fab--wa { background: #128C4F; }
.fab--call { background: var(--srf-navy-900); }
.fab--top { background: var(--srf-paper); color: var(--srf-navy-900); border: 1.5px solid var(--srf-gold-500); opacity: 0; visibility: hidden; translate: 0 10px; }
.fab--top:hover { color: var(--srf-navy-900); background: var(--srf-gold-100); }
.fab--top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.fab--top.is-visible:hover { translate: 0 -3px; }
@media (max-width: 575.98px) { .fab { width: 46px; height: 46px; font-size: 1.2rem; } }
.fab:focus-visible { outline: 3px solid var(--srf-focus); outline-offset: 2px; box-shadow: 0 0 0 6px #fff, 0 10px 24px rgba(7, 19, 39, .28); }      /* two-tone ring: the buttons float over light AND navy sections */

.cookie {
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 1060;
  display: grid; gap: .9rem; width: min(430px, calc(100vw - 24px)); padding: 1.1rem 1.2rem;
  background: var(--srf-paper); border: 1px solid var(--srf-line); border-top: 3px solid var(--srf-gold-500); border-radius: var(--srf-radius-lg); box-shadow: var(--srf-shadow-3);
  animation: srf-cookie-in .5s var(--srf-ease) backwards;
}
.cookie__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font: 700 1rem/1.3 var(--srf-font-heading); color: var(--srf-navy-900); }
.cookie__title i { color: var(--srf-gold-700); }
.cookie__body { margin: 0; color: var(--srf-muted); font-size: .9rem; line-height: 1.55; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Phones: a compact bar (it was a 235 px card = 41 % of a 320 x 568 screen and hid the hero buttons). Title and text are tighter, the two
   buttons share one row, a long text scrolls inside the bar instead of growing it, and the floating buttons ride above it while it is open
   (site.js sets --srf-cookie-h and html[data-cookie-open]). */
@media (max-width: 575.98px) {
  .cookie { right: max(12px, env(safe-area-inset-right)); width: auto; gap: .5rem; max-height: 32vh; padding: .7rem .85rem .75rem; overflow-y: auto; overscroll-behavior: contain; }
  .cookie__title { margin: 0 0 .15rem; font-size: .95rem; }
  .cookie__body { font-size: .8rem; line-height: 1.45; }
  .cookie__actions { flex-wrap: nowrap; gap: .4rem; }
  .cookie__actions .srf-btn { flex: 1 1 0; min-width: 0; padding-inline: .5rem; font-size: .84rem; }
  html[data-cookie-open] .fab-stack { bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--srf-cookie-h, 0px) + 10px); }
}
@media (max-width: 575.98px) and (max-height: 599.98px) { html[data-cookie-open] .fab-stack { visibility: hidden; } }     /* very short screens: the choice comes first */
/* The notice is fixed, so it would sit on top of the last footer rows (copyright, credit, Staff login) when the page is scrolled to its end - on phones
   AND beside the stacked rows of a tablet / desktop (the 430 px card). While it is open those rows get its height + its offset as bottom padding
   (site.js publishes --srf-cookie-h); the extra space disappears with the notice.
   Known trade-off: on a 320 x 568 phone the bar (176-182 px) still covers the two hero buttons until one tap on Accept / Essential only (or about
   135 px of scrolling); there is no CSS fix short of a bar under 40 px, which could not hold the notice text and two 44 px buttons. */
html[data-cookie-open] .site-footer__bottomin { padding-bottom: calc(var(--srf-cookie-h, 0px) + max(12px, env(safe-area-inset-bottom)) + 1rem); }
/* Keyboard focus scrolling treats everything inside the viewport as visible and ignores fixed overlays, so Tab left the form fields (and any control)
   under the notice (WCAG 2.2 SC 2.4.11 Focus Not Obscured). While it is open the scrollport keeps the notice's height + offset at the bottom: focus,
   scrollIntoView and in-page anchors then stop above it. Not inside the phone query - the 430 px card covers controls on tablets and desktops too. */
html[data-cookie-open] { scroll-padding-bottom: calc(var(--srf-cookie-h, 0px) + max(12px, env(safe-area-inset-bottom)) + 1rem); }
@keyframes srf-cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 14. Share buttons ------------------------------------------------------------------------- */
.srf-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.srf-share__label { margin-right: .35rem; color: var(--srf-muted); font: 600 .9rem/1 var(--srf-font-ui); }
.srf-share__btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--srf-line-strong); border-radius: 50%;
  background: var(--srf-paper); color: var(--srf-navy-900); font-size: 1.05rem; text-decoration: none; cursor: pointer;
  transition: background-color var(--srf-dur-2) var(--srf-ease), color var(--srf-dur-2) var(--srf-ease), border-color var(--srf-dur-2) var(--srf-ease), translate var(--srf-dur-2) var(--srf-ease);
}
.srf-share__btn:hover { background: var(--srf-navy-900); border-color: var(--srf-navy-900); color: #fff; translate: 0 -2px; }

/* ---------- 15. Error and 404 pages ----------------------------------------------------------------------- */
.srf-error { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(3rem, 9vw, 7rem); background: radial-gradient(60% 60% at 90% 0%, rgba(221, 158, 56, .15), transparent 62%), var(--srf-ivory); }
.srf-error__motif { position: absolute; z-index: -1; right: -12%; top: -24%; width: min(680px, 96vw); pointer-events: none; }
.srf-error__inner { position: relative; }
.srf-error__code { margin: 0 0 .25rem; font: 600 clamp(5rem, 18vw, 10rem)/.95 var(--srf-font-heading); letter-spacing: -.02em; color: var(--srf-navy-900); font-variant-numeric: lining-nums; }
html[lang="bn"] .srf-error__code { letter-spacing: 0; }      /* Bengali digits are never letter-spaced (-3.4 px squeezed them together) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .srf-error__code { background: linear-gradient(135deg, var(--srf-navy-900) 38%, var(--srf-gold-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.srf-error__title { margin: 0 0 .8rem; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.2; }
.srf-error__text { max-width: 36rem; margin: 0 0 1.6rem; color: var(--srf-ink-2); font-size: 1.1rem; }
.srf-error__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.srf-error__ref { margin: 1.25rem 0 0; color: var(--srf-muted); font-size: .88rem; }
.srf-error__ref code { padding: .15rem .45rem; border-radius: 6px; background: var(--srf-navy-50); color: var(--srf-navy-800); font-size: .85em; overflow-wrap: anywhere; }
.srf-error__panel { max-width: 36rem; margin-top: 2.25rem; padding: 1.25rem 1.35rem; background: var(--srf-paper); border: 1px solid var(--srf-line); border-radius: var(--srf-radius-lg); box-shadow: var(--srf-shadow-2); }
.srf-error__panel-title { margin: 0 0 .6rem; color: var(--srf-muted); font: 700 .8rem/1.3 var(--srf-font-ui); }
html[lang="en"] .srf-error__panel-title { text-transform: uppercase; letter-spacing: .14em; }
html[lang="bn"] .srf-error__panel-title { font-size: .95rem; }
.srf-error__links { display: grid; margin: 0; padding: 0; list-style: none; }
.srf-error__links a {
  display: flex; align-items: center; gap: .8rem; min-height: 50px; padding: 0 .4rem; border-top: 1px solid var(--srf-line);
  color: var(--srf-navy-900); font-weight: 600; text-decoration: none;
}
.srf-error__links li:first-child a { border-top: 0; }
.srf-error__links a span { flex: 1; }
.srf-error__links a i:first-child { color: var(--srf-gold-700); }
.srf-error__links a i:last-child { color: var(--srf-muted); transition: translate var(--srf-dur-2) var(--srf-ease); }
.srf-error__links a:hover { background: var(--srf-ivory); }
.srf-error__links a:hover i:last-child { translate: 4px 0; }

/* ---------- 16. Accessibility, contrast and robustness patches ------------------------------------------------------
   The module sheets (content.css, group.css, engage.css, home.css) are linked AFTER this file, so a rule here that must beat one of
   theirs is prefixed with "html" (one extra element in the specificity) instead of repeating the whole selector. ------------ */

/* 16.1 Focus ring: navy on light grounds (tokens.css), gold on navy grounds; the module rings were a translucent gold (1.6:1 on ivory) */
.srf-section--navy, .srf-cta, .srf-statpanel, .site-notice, .home-slides, .grp-chero { --srf-focus: var(--srf-focus-on-dark); }
html .cnt-news:focus-within, html .cnt-album:focus-within, html .cnt-photo__link:focus-visible,
html .cnt-mosaic__tile:focus-visible, html .cnt-faq__q:focus-visible { outline-color: var(--srf-focus); }

/* 16.2 Muted text on the darker "sand" ground (and the hero that ends in it) uses the stronger shade: 4.3:1 -> 5.3:1 */
.srf-section--sand, .srf-pagehero { --srf-muted: var(--srf-muted-strong); }

/* 16.3 Long words, URLs and e-mail addresses wrap inside cards and contact lists instead of being clipped by overflow:hidden.
   (A flex item is only allowed to shrink below its content when min-width is 0.) */
.srf-card__body, .srf-concern__body { min-width: 0; }
.srf-card__title, .srf-card__text, .srf-card__meta, .srf-concern__name, .srf-concern__sum { overflow-wrap: anywhere; }
.grp-contact__list a { min-width: 0; }

/* 16.4 Text over photos: dark glass chips (white on the light glass measured 3.4:1) and a stronger scrim under the lead news card on phones */
html .cnt-album .srf-chip, html .cnt-news--lead .srf-chip--navy, html .grp-chero .srf-chip--accent { background: rgba(7, 19, 39, .55); color: #fff; }
@media (max-width: 767.98px) {
  html .cnt-news--lead .cnt-news__media::after { background: linear-gradient(180deg, rgba(7, 19, 39, .28) 0%, rgba(7, 19, 39, .72) 34%, rgba(7, 19, 39, .94) 100%); }
}

/* 16.5 Monogram circles: white ink on dark accents, dark ink on light ones (white on the Town Hall gold measured 2.6:1).
   Relative colour syntax; browsers without it keep the white ink. */
@supports (color: oklch(from red l c h)) {
  .srf-concern__mono, html .eg-ccard__mono { color: oklch(from var(--accent) clamp(0.16, calc((0.58 - l) * 1000), 1) 0.02 255); }
}

/* 16.6 12 px is the smallest text (engage.css used 11.84 px for the job-fact and contact-tile labels) */
html .eg-facts dt, html .eg-tile__label { font-size: .78rem; }

/* 16.7 Home gallery mosaic: square and portrait pictures (the brand logos) are shown whole on a white tile instead of being cropped
   to a wide band; site.js adds .is-contain once it knows the picture's proportions. */
.cnt-mosaic__tile.is-contain { background: var(--srf-paper); border: 1px solid var(--srf-line); }
.cnt-mosaic__tile.is-contain img { object-fit: contain; padding: clamp(.5rem, 2vw, 1rem); }

/* 16.8 File field in the page language (the browser's own "Choose file / No file chosen" text follows the browser UI language).
   The real <input type=file> stays in the DOM, focusable and posted, but invisible; a styled <label> opens it and a text shows the name.
   Markup: <div class="srf-file" data-file-field><input class="srf-file__input" type="file" id="x" ...>
           <label class="srf-btn srf-btn--gold srf-btn--sm srf-file__btn" for="x">Choose file</label>
           <span class="srf-file__name" data-file-name data-empty="No file chosen">No file chosen</span></div> */
.srf-file {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; min-height: 52px; padding: .4rem .6rem;
  background: #fff; border: 1px solid var(--srf-input-border); border-radius: var(--srf-radius-md);
  transition: border-color var(--srf-dur-1), box-shadow var(--srf-dur-1);
}
.srf-file:focus-within { border-color: var(--srf-navy-600); box-shadow: var(--srf-ring); }
.srf-file__input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.srf-file__btn { margin: 0; cursor: pointer; }
.srf-file__input:focus-visible + .srf-file__btn { outline: 3px solid var(--srf-focus); outline-offset: 2px; }
.srf-file__name { flex: 1 1 9rem; min-width: 0; color: var(--srf-muted); font-size: .92rem; overflow-wrap: anywhere; }
.srf-file__name.has-file { color: var(--srf-ink); font-weight: 600; }
.srf-file.has-error { border-color: var(--srf-danger); }
.srf-file:has(.input-validation-error) { border-color: var(--srf-danger); }

/* 16.9 Without JavaScript the burger would open nothing: hide it (the footer keeps every link) */
@media (max-width: 1279.98px) { html:not(.js) .site-burger { display: none; } }

/* 16.10 Reduced motion. tokens.css shrinks every transition to 1 ms, but a 1 ms "visibility" transition still starts from "hidden", so for the
   first frames after the menu opened the Close button could not take focus (Chrome ignores focus() on a hidden element). The menu panel and
   its backdrop therefore switch instantly - there is nothing to animate for these users anyway. */
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav *, .site-backdrop { transition: none !important; }
}

/* 16.11 Forced colours (Windows high contrast): a state that is only a background colour disappears, so it also gets a shape */
@media (forced-colors: active) {
  .lang-toggle__opt[aria-current="true"] { outline: 2px solid CanvasText; outline-offset: -3px; text-decoration: underline; text-underline-offset: 4px; }
  .site-nav__item.is-active > .site-nav__link,
  .site-nav__item.is-active > .site-nav__row > .site-nav__link,
  .site-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .srf-pager .is-active, .srf-pager [aria-current="page"], .cnt-chip.is-active { outline: 2px solid CanvasText; outline-offset: -3px; }
  .home-slides__dot[aria-current="true"] span { outline: 2px solid CanvasText; }
  .site-header__cta[aria-current], .site-nav__foot .srf-btn[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }      /* 16.12: the Contact button on /contact */
}

/* 16.12 Header. (a) "More": with more than 7 top-level items _Header.cshtml keeps the first 6 and puts the rest into one last dropdown; an
   overflow item that has sub-items of its own is flattened there (its title, then the sub-items indented). (b) The Contact button is not a
   menu row, so on /contact (aria-current) it carries its own "you are here" cue: a darker fill plus a gold bar (not colour alone). */
.site-nav__sub .site-nav__subhead { padding: .55rem .85rem .15rem; color: var(--srf-muted); font: 700 .78rem/1.3 var(--srf-font-ui); }
html[lang="en"] .site-nav__sub .site-nav__subhead { text-transform: uppercase; letter-spacing: .12em; }
html[lang="bn"] .site-nav__sub .site-nav__subhead { font-size: .9rem; }
.site-nav__sub .site-nav__sublink--nested { padding-left: 1.7rem; }
.site-header__cta[aria-current], .site-nav__foot .srf-btn[aria-current] { --_bg: var(--srf-navy-950); --_bd: var(--srf-navy-950); box-shadow: inset 0 -3px 0 var(--srf-gold-500); }
.site-header__cta[aria-current]:hover, .site-nav__foot .srf-btn[aria-current]:hover { box-shadow: inset 0 -3px 0 var(--srf-gold-500), 0 10px 22px rgba(11, 32, 66, .22); }

/* ---------- 17. Print ------------------------------------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .site-notice, .fab-stack, .cookie, .site-backdrop, .srf-cta, .srf-skip, .srf-share { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]:not(.srf-btn)::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
  .srf-section { padding-block: 1rem; }
}