/* =========================================================================
   Shree Saurashtra Nagrik Sharafi Mandali Ltd. - design system v2
   Single stylesheet for the whole public site. No Bootstrap, no jQuery, no
   icon font, no slider library.

   Visual language: a warm paper/ink palette (not the cool blue-gray of a
   typical corporate template) with a red + gold duotone accent, a serif
   display face paired with a grotesque body face, a floating glass nav
   instead of a full-width bar, and a hero built from a real photo + scrim
   + glass panel rather than a plain carousel strip.

   Theming: every colour is a custom property, defined once. Light only.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
    --brand: #b3202c;
    --brand-strong: #8d1922;
    --brand-soft: #fdeced;
    --brand-ink: #ffffff;

    /* Gold is a decorative/accent colour only (gradients, icon tints, blobs,
       dividers) - never used as body text, so its own contrast is never a
       compliance concern. */
    --gold: #c98a2e;
    --gold-strong: #9c6a1f;
    --gold-soft: #fbf0da;

    --bg: #fbf7f1;
    --bg-subtle: #f4ede3;
    --surface: #fffdfa;
    --surface-2: #f4ede3;
    --border: #e6dbca;
    --border-strong: #d3c3a9;

    --text: #201a13;
    --text-muted: #5c5140;
    --text-faint: #6f6250;

    --shadow-sm: 0 1px 2px rgba(40, 26, 8, .07), 0 1px 3px rgba(40, 26, 8, .05);
    --shadow-md: 0 8px 22px rgba(40, 26, 8, .10), 0 2px 6px rgba(40, 26, 8, .06);
    --shadow-lg: 0 22px 54px rgba(40, 26, 8, .16);
    --shadow-glow: 0 16px 36px -6px color-mix(in srgb, var(--brand) 35%, transparent);

    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 30px;
    --radius-full: 999px;

    --maxw: 1180px;
    --gutter: 22px;
    --header-h: 96px;

    --ease: cubic-bezier(.22, .8, .3, 1);
    --dur: .38s;

    --font-display: 'Fraunces', 'Georgia', serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Branch / manager card accents. These are used as small text (role
       overlines, badges) as well as fills, so every one must clear 4.5:1 on
       --surface. c3 was #2f8a3f, which only reached 4.28 - darkened to 4.94.
       Verified for all six in both themes. */
    --c1: #0f766e; --c2: #1d63c4; --c3: #2a7f37;
    --c4: #b3202c; --c5: #7a5136; --c6: #445468;

    /* Fixed (non-themed) dark red/gold trio for the footer CTA banner. In dark
       mode --brand/--brand-strong become bright coral so they read against a
       dark page - exactly wrong for hosting white text as a *background*. This
       banner always uses the same dark, saturated stops regardless of theme,
       the same way .hero-panel is always a dark glass panel regardless of theme. */
    --cta-1: #b3202c;
    --cta-2: #8d1922;
    --cta-3: #9c6a1f;

    color-scheme: light;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

:lang(gu), .gu { font-family: 'Anek Gujarati', var(--font-body); }

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

a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-strong); }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.18;
    color: var(--text);
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); font-weight: 600; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.22rem, 2.1vw, 1.5rem); font-family: var(--font-body); font-weight: 700; }
h4 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 700; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

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

::selection { background: var(--brand); color: var(--brand-ink); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    background: var(--brand); color: var(--brand-ink);
    padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--brand-ink); }

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

.section { padding: clamp(52px, 7.5vw, 100px) 0; }
.section--tight { padding: clamp(22px, 3vw, 40px) 0 clamp(34px, 4.5vw, 58px); }
.section--subtle { background: var(--bg-subtle); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 4vw, 54px); }
.section--tight .section-head { margin-bottom: clamp(14px, 2vw, 22px); }
.section--tight .section-head h2 { margin-bottom: .2em; }
.section--tight .section-head .eyebrow { margin-bottom: 10px; }
.section-head p { color: var(--text-muted); margin: 0; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .73rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--brand); background: var(--brand-soft);
    padding: 7px 15px; border-radius: var(--radius-full); margin-bottom: 16px;
    white-space: nowrap; max-width: max-content; flex-wrap: nowrap;
}
.eyebrow svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
.eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--gold));
}

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* asymmetric homepage feature grid - see index.blade.php */
.grid--bento {
    display: grid; gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "a a b" "a a c" "d e f";
}
.grid--bento > * { grid-area: auto; }
.grid--bento > *:nth-child(1) { grid-area: a; }
.grid--bento > *:nth-child(2) { grid-area: b; }
.grid--bento > *:nth-child(3) { grid-area: c; }
.grid--bento > *:nth-child(4) { grid-area: d; }
.grid--bento > *:nth-child(5) { grid-area: e; }
.grid--bento > *:nth-child(6) { grid-area: f; }
.grid--bento > *:nth-child(1).tile {
    text-align: left; align-items: flex-start; justify-content: flex-end;
    padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column;
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--brand) 11%, var(--surface)), color-mix(in srgb, var(--gold) 15%, var(--surface)));
}
.grid--bento > *:nth-child(1).tile .tile-icon { margin: 0 0 18px; width: 62px; height: 62px; }
.grid--bento > *:nth-child(1).tile h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-family: var(--font-display); font-weight: 600; }
.grid--bento > *:nth-child(1).tile p { font-size: .95rem; }

@media (max-width: 860px) {
    .grid--bento { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b c" "d e" "f f"; }
}
@media (max-width: 560px) {
    .grid--bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; }
    .grid--bento > *:nth-child(1).tile { text-align: center; align-items: center; }
}

/* ------------------------------------------------------------ header --- */
/* The header is fixed and transparent; the nav bar inside it ("bar") is the
   visually floating glass pill, inset from the edges. Being fixed (out of
   flow) means every page needs top padding to clear it - added on <main>
   below - except the home page, whose hero is meant to run full-bleed
   behind the floating pill. */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    padding: 14px 0 0;
    pointer-events: none;
    transition: padding var(--dur) var(--ease);
}
.site-header * { pointer-events: auto; }
.site-header.is-stuck { padding-top: 8px; }

main { padding-top: var(--header-h); }
main.no-hero-pad { padding-top: 0; }

.site-header .bar {
    min-height: 64px;
    display: flex; align-items: center; gap: 18px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(1.7) blur(16px);
    -webkit-backdrop-filter: saturate(1.7) blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck .bar { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand img { width: 40px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text b { font-family: var(--font-display); font-size: .98rem; color: var(--text); font-weight: 600; }
.brand-text span { font-size: .68rem; color: var(--text-muted); letter-spacing: .04em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a, .nav-dropdown > a {
    position: relative;
    padding: 10px 14px; border-radius: var(--radius-full);
    font-size: .86rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover, .nav-dropdown > a:hover { color: var(--text); background: var(--surface-2); }
.nav a.is-active, .nav-dropdown > a.is-active { color: var(--brand-ink); background: linear-gradient(135deg, var(--brand), var(--brand-strong)); }

/* ------------------------------------------------------ nav dropdown --- */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown > a svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.nav-dropdown:hover > a svg, .nav-dropdown:focus-within > a svg { transform: rotate(180deg); }

/* Sits flush against the trigger (top:100%, no gap) so the hover area is
   contiguous - the visual gap comes from padding-top on this element, not a
   margin, so moving the cursor down through it never drops out of :hover. */
.nav-dropdown__panel {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    padding-top: 10px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.nav-dropdown:hover .nav-dropdown__panel, .nav-dropdown:focus-within .nav-dropdown__panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear 0s;
}
.nav-dropdown__inner {
    min-width: 210px; max-height: 360px; overflow-y: auto;
    display: grid; gap: 2px;
    padding: 10px; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface); box-shadow: var(--shadow-lg);
}
.nav-dropdown__inner a {
    display: block; padding: 9px 14px; border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-dropdown__inner a:hover { background: var(--surface-2); color: var(--text); }
.nav-dropdown__inner-disabled {
    display: block; padding: 9px 14px; border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 600; color: var(--text-faint);
    white-space: nowrap; cursor: default;
}

/* Holds the mobile menu button only. Hidden (not just emptied) on desktop:
   an empty flex child still claims the bar's 18px column gap, which showed up
   as dead space on the right and made the pill look off-centre. */
/* margin-left:auto because .nav - which normally pushes everything right - is
   hidden below the breakpoint, leaving the button stranded mid-bar. */
.header-actions { display: none; margin-left: auto; align-items: center; gap: 6px; flex: 0 0 auto; }

.icon-btn {
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--surface); color: var(--text);
    cursor: pointer; padding: 0;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 19px; height: 19px; }

.nav-toggle { display: none; }

/* --------------------------------------------------- mobile full-screen -- */
.mobile-nav {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg);
    display: none; flex-direction: column;
    opacity: 0; transition: opacity .3s var(--ease);
}
.mobile-nav.is-open { display: flex; opacity: 1; }
.mobile-nav-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px var(--gutter);
}
.mobile-nav-close {
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--surface); color: var(--text); cursor: pointer;
}
.mobile-nav-links {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-start;
    overflow-y: auto;
    padding: clamp(16px, 5vh, 40px) clamp(24px, 8vw, 60px) 16px; gap: 2px;
}
.mobile-nav-links a {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 6vw, 1.75rem); font-weight: 600;
    color: var(--text-faint); padding: 10px 0;
    opacity: 0; transform: translateY(14px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .2s var(--ease);
}
.mobile-nav.is-open .mobile-nav-links a {
    opacity: 1; transform: none;
    transition-delay: calc(var(--i, 0) * 55ms);
}
.mobile-nav-links a.is-active { color: var(--brand); }
.mobile-nav-links a:hover { color: var(--text); }
.mobile-nav-foot { padding: 20px var(--gutter) 28px; color: var(--text-faint); font-size: .85rem; }

/* --------------------------------------------------------------- hero -- */
.hero {
    position: relative; overflow: hidden;
    min-height: clamp(580px, 86vh, 800px);
    background: var(--bg-subtle);
    display: flex; flex-direction: column; justify-content: center;
}
.hero-slider { position: absolute; inset: 0; }

.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 1s var(--ease);
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-slide.is-active img { animation: heroZoom 10s var(--ease) forwards; }

@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }

/* scrim for legibility + a slow-drifting colour mesh for texture */
.hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(10, 8, 6, .45) 0%, rgba(10, 8, 6, .78) 100%),
        linear-gradient(180deg, rgba(10, 8, 6, .35) 0%, rgba(10, 8, 6, .65) 100%);
}
.hero-mesh {
    position: absolute; inset: -15%; z-index: 1; pointer-events: none; opacity: .55;
    mix-blend-mode: screen;
    background:
        radial-gradient(32% 42% at 18% 25%, color-mix(in srgb, var(--brand) 65%, transparent), transparent 70%),
        radial-gradient(28% 38% at 82% 65%, color-mix(in srgb, var(--gold) 60%, transparent), transparent 70%);
    filter: blur(50px);
    animation: meshDrift 16s ease-in-out infinite alternate;
}
@keyframes meshDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-2.5%, 2%) scale(1.06); } }

.hero-content {
    position: relative; z-index: 3; width: 100%;
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: clamp(70px, 10vw, 110px);
    display: flex; align-items: center; justify-content: center;
}
.hero-content .wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}
.hero-panel {
    max-width: 780px;
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    color: #fff;
    box-shadow: none;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.hero-panel .eyebrow {
    background: rgba(255, 255, 255, .16);
    color: #ffd9a8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    margin-inline: auto !important;
    align-self: center !important;
}
.hero-panel .eyebrow::before { background: linear-gradient(135deg, #ff8a6e, #ffd9a8); }
.hero-panel h1 {
    color: #fff;
    margin-bottom: .35em;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .6);
    text-align: center !important;
    font-size: clamp(2.3rem, 4.8vw, 3.8rem);
}
.hero-panel p {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    max-width: 52ch;
    margin-inline: auto !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    text-align: center !important;
}
.hero-panel .btn-row {
    justify-content: center !important;
    margin-top: 8px;
    align-self: center !important;
    margin-inline: auto !important;
}

.hero-dots {
    position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
    display: flex; justify-content: center; gap: 7px;
}
.hero-dots button {
    width: 26px; height: 4px; padding: 0; border-radius: var(--radius-full); cursor: pointer;
    border: none; background: rgba(255, 255, 255, .35);
    transition: background-color .3s var(--ease);
}
.hero-dots button[aria-current="true"] { background: linear-gradient(90deg, var(--brand), var(--gold)); }

.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius-full); cursor: pointer;
    background: rgba(12, 9, 7, .38); color: #fff;
    backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .25s var(--ease), background-color .2s var(--ease);
}
.hero:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: rgba(12, 9, 7, .62); }
.hero-arrow--prev { left: 18px; }
.hero-arrow--next { right: 18px; }
.hero-arrow svg { width: 20px; height: 20px; }

/* stats strip overlapping the bottom edge of the hero */
.stats-strip { position: relative; z-index: 5; margin-top: -54px; }
.stats-strip .card {
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 8px;
}
.stat { padding: 20px 14px; text-align: center; position: relative; }
.stat + .stat::before {
    content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--border);
}
.stat-number {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    background: linear-gradient(135deg, var(--brand), var(--gold-strong));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 4px; font-weight: 600; }

@media (max-width: 720px) {
    .stats-strip .card { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2)::before { display: none; }
    .stat:nth-child(odd)::before { display: none; }
}

/* -------------------------------------------------------------- cards -- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card--hover:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--shadow-glow); border-color: var(--border-strong); }
.card-body { padding: 22px; }

/* cursor-follow glow. Degrades gracefully: with no JS/pointer support the
   gradient just centres itself and still glows on :hover. Not on .rate-card -
   loan cards keep only the top bar / lift / icon hover, no cursor glow. */
.card--hover::after, .doc-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--brand) 13%, transparent), transparent 72%);
    transition: opacity .4s var(--ease);
}
.card--hover:hover::after, .doc-card:hover::after { opacity: 1; }
.card--hover > *, .rate-card > *, .doc-card > * { position: relative; z-index: 1; }

/* icon/feature tile */
.tile { display: block; text-align: center; padding: 32px 22px; color: inherit; }
.tile .tile-icon {
    width: 58px; height: 58px; margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 46% 54% 54% 46% / 50% 46% 54% 50%;
    background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 88%, transparent), color-mix(in srgb, var(--gold) 65%, var(--brand)));
    color: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease);
}
.tile .tile-icon svg { width: 25px; height: 25px; }
/* Icons here are full-colour illustrations with their own circular background
   baked in (not plain silhouettes), so - unlike .rate-card__icon - they are
   shown as-is: no recolour filter, and no badge background behind them. */
.tile .tile-icon:has(img) { background: none; box-shadow: none; }
.tile .tile-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.tile h3 { font-size: 1.04rem; margin-bottom: 6px; }
.tile p { color: var(--text-muted); font-size: .89rem; margin: 0; }

/* Same hover treatment as the homepage's "Sections and Information" cards
   and the Loan rate cards: a top gradient bar, a lift, the icon tilts - and
   no cursor-follow glow (.tile opts out of the shared .card--hover::after). */
.tile::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--gold));
    opacity: 0; transition: opacity .35s var(--ease); z-index: 1;
}
.tile.card--hover::after { content: none; }
.tile:hover.card--hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-md);
}
.tile:hover::before { opacity: 1; }
.tile:hover .tile-icon { transform: scale(1.08) rotate(-3deg); }

/* person card (directors, managers) */
.person { text-align: center; }
.person-photo { aspect-ratio: 3 / 3.4; background: var(--surface-2); overflow: hidden; padding: 10px 10px 0 10px; border-radius: var(--radius) var(--radius) 0 0; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: transform .5s var(--ease); }
.card--hover:hover .person-photo img { transform: scale(1.06); }
.person h3 { font-size: 1rem; margin-bottom: 2px; }
.person .role {
    display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--brand);
}

/* coloured accent card (branches, managers) */
.accent-card { border-top: 4px solid var(--accent, var(--brand)); }
.accent-card .accent-head {
    display: flex; align-items: center; gap: 11px;
    padding: 18px 22px; border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent, var(--brand)) 9%, var(--surface));
}
.accent-card .accent-head .dot {
    width: 36px; height: 36px; flex: 0 0 auto;
    border-radius: 46% 54% 54% 46% / 50% 46% 54% 50%;
    display: grid; place-items: center;
    background: var(--accent, var(--brand)); color: #fff;
}
.accent-card .accent-head .dot svg { width: 17px; height: 17px; }
.accent-card .accent-head h3 { margin: 0; font-size: 1.03rem; }

.info-line { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; font-size: .91rem; }
.info-line:last-child { margin-bottom: 0; }
.info-line svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 4px; color: var(--accent, var(--brand)); }
.info-line span, .info-line a { color: var(--text-muted); }
.info-line a:hover { color: var(--brand); }
.info-divider { height: 1px; background: var(--border); margin: 16px 0; border: 0; }

/* rate card (loans, deposits) - the rate is the hero, not a pill bolted to
   the end of a row: the figure people actually compare gets display size. */
.rate-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

.rate-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 16px;
    padding: clamp(20px, 2.4vw, 26px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Same hover treatment as the homepage's "Sections and Information" cards:
   a gradient bar fades in along the top edge, the card lifts and the icon
   gives a small scale + tilt. */
.rate-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--gold));
    opacity: 0; transition: opacity .35s var(--ease);
}
/* !important: the resting state set once .reveal-group's scroll-reveal
   finishes (.js-anim .reveal-group.is-visible > *) carries higher
   specificity (3 classes) than this 2-class hover rule and would otherwise
   silently cancel the lift on any card that both reveals-in and has hover. */
.rate-card:hover { transform: translateY(-5px) !important; box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.rate-card:hover::before { opacity: 1; }
.rate-card:hover .rate-card__icon { transform: scale(1.08) rotate(-3deg); }

/* oversized, very faint copy of the scheme icon in the corner */
.rate-card__mark {
    position: absolute; right: -18px; top: -18px;
    width: 104px; height: 104px; opacity: .06; pointer-events: none; z-index: 0;
}
.rate-card__mark img { width: 100%; height: 100%; object-fit: contain; }

.rate-card__head { display: flex; align-items: center; gap: 12px; }
/* keep a long scheme name clear of the absolutely-positioned badge */
.rate-card--badged .rate-card__head { padding-right: 94px; }
.rate-card__icon {
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 46% 54% 54% 46% / 50% 46% 54% 50%;
    display: grid; place-items: center;
    transition: transform .3s var(--ease);
    background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 88%, transparent), color-mix(in srgb, var(--gold) 65%, var(--brand)));
    color: #fff;
}
.rate-card__icon svg { width: 19px; height: 19px; }
/* These icons are full-colour illustrations, not plain silhouettes - and
   several are not circular compositions (e.g. a full-width roofline), so
   unlike .tile-icon they are not clipped to a circle. Shown as-is: no
   recolour filter, no badge background behind them. */
.rate-card__icon:has(img) { background: none; }
.rate-card__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.rate-card__name { font-weight: 700; font-size: .96rem; line-height: 1.35; }

.rate-card__foot {
    margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
    padding-top: 15px; border-top: 1px solid var(--border);
}
.rate-card__value {
    font-family: var(--font-display); font-weight: 600; line-height: 1;
    font-size: clamp(2rem, 4.2vw, 2.8rem);
    background: linear-gradient(135deg, var(--brand), var(--gold-strong));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* long values such as "Double" must not blow out the card */
.rate-card__value--long { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.rate-card__label {
    font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 700;
}

.rate-card__badge {
    position: absolute; top: 14px; right: 14px; z-index: 1;
    font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    color: var(--brand);
}

/* ------------------------------------------------- maturity explorer -- */
/* The recurring-deposit data is really one matrix: the same ladder of monthly
   amounts against every term. Rather than repeat that ladder inside five
   separate cards, pick an amount once and compare all terms side by side.
   Without JS the chips hide and every card lists all its amounts, so nothing
   is unreachable. */
.maturity-picker {
    display: none;
    align-items: center; flex-wrap: wrap; gap: 12px;
    margin-bottom: 26px;
}
.js-on .maturity-picker { display: flex; }
.maturity-picker__label {
    font-size: .74rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--text-faint);
}
.maturity-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.maturity-chip {
    cursor: pointer; font-family: inherit;
    padding: 8px 16px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-muted); font-size: .86rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.maturity-chip:hover { border-color: var(--border-strong); color: var(--text); }
.maturity-chip[aria-checked="true"] {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    border-color: transparent; color: var(--brand-ink);
}

.maturity-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.maturity-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 14px;
    padding: clamp(18px, 2.2vw, 24px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.maturity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.maturity-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.maturity-card__term { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; }
.maturity-card__rate {
    font-weight: 700; font-size: .78rem; padding: 4px 11px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: var(--brand-ink);
    white-space: nowrap;
}

.maturity-values { margin-top: auto; }
.js-on .maturity-value:not(.is-active) { display: none; }
/* without JS the values stack as a readable ladder */
.maturity-value + .maturity-value { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.js-on .maturity-value + .maturity-value { margin-top: 0; padding-top: 0; border-top: 0; }

.maturity-value__num {
    display: block;
    font-family: var(--font-display); font-weight: 600; line-height: 1;
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--brand), var(--gold-strong));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.maturity-value__label {
    display: block; margin-top: 5px;
    font-size: .76rem; color: var(--text-faint); font-weight: 600;
}

/* ------------------------------------------------------ document card -- */
/* A compact icon-led row rather than a card with a blank preview area - there
   is no real page thumbnail to show (no PDF-rendering tool on the server),
   and an empty placeholder box reads worse than no box at all. The format
   and file size are read off disk, so they are always accurate. */
.doc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.doc-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    color: var(--text);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.doc-card:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-glow);
    border-color: var(--brand); color: var(--text);
}

.doc-card__icon {
    position: relative; z-index: 1; flex: 0 0 auto;
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: var(--brand-ink);
}
.doc-card__icon svg { width: 21px; height: 21px; }

.doc-card__body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.doc-card__title {
    display: block; font-weight: 700; font-size: .96rem; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-card__meta { display: block; font-size: .78rem; color: var(--text-faint); font-weight: 600; margin-top: 3px; }

.doc-card__go {
    position: relative; z-index: 1; flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text-muted);
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.doc-card__go svg { width: 16px; height: 16px; }
.doc-card:hover .doc-card__go {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    border-color: transparent; color: var(--brand-ink);
}

/* ------------------------------------------------------------ buttons -- */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 24px; border-radius: var(--radius-full);
    font-weight: 600; font-size: .92rem; cursor: pointer;
    border: 1px solid transparent; font-family: var(--font-body);
    transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: var(--brand-ink); box-shadow: var(--shadow-sm);
}
.btn-primary:hover { box-shadow: var(--shadow-glow); color: var(--brand-ink); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn-ghost--dark { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-ghost--dark:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .55); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------- page head -- */
.page-head {
    position: relative; overflow: hidden;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    padding: clamp(46px, 6.5vw, 78px) 0;
    text-align: center;
}
.page-head::before {
    content: ''; position: absolute; inset: -25% -10%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(36% 55% at 12% 22%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
        radial-gradient(30% 48% at 88% 18%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%);
    filter: blur(46px);
    animation: meshDrift 18s ease-in-out infinite alternate;
}
.page-head > .wrap { position: relative; z-index: 1; }
.page-head h1 { margin-bottom: 10px; }
.page-head p { color: var(--text-muted); max-width: 660px; margin: 0 auto; }
.crumb { font-size: .8rem; color: var(--text-faint); margin-bottom: 14px; }
.crumb a { color: var(--text-muted); }

/* ------------------------------------------------------ signboard hero -- */
.signboard-hero {
    position: relative; overflow: hidden; text-align: center;
    /* Bottom padding matches .section--tight's so the gap before the first
       section below is the same as the gap between any two sections. */
    padding: clamp(22px, 3vw, 34px) 0 clamp(34px, 4.5vw, 58px);
    background:
        radial-gradient(50% 80% at 15% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%),
        radial-gradient(55% 70% at 100% 100%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--brand) 7%, var(--surface)), color-mix(in srgb, var(--gold) 12%, var(--surface)));
    border-bottom: 1px solid var(--border);
}
.signboard-hero > .wrap { position: relative; z-index: 1; }
.crumb--on-brand { color: var(--text-faint); }
.signboard-hero__ribbon {
    display: inline-block; margin-bottom: 14px; padding: 8px 22px;
    font-family: var(--font-display, inherit); font-size: .92rem; font-weight: 700;
    color: #fff; letter-spacing: .01em;
    background: linear-gradient(90deg, var(--brand), var(--gold-strong));
    border-radius: 999px; box-shadow: var(--shadow-sm);
}
.signboard-hero__title {
    margin: 0 0 12px; font-size: clamp(2rem, 4.2vw, 3.1rem);
    background: linear-gradient(90deg, var(--brand), var(--gold-strong));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.signboard-hero__year {
    display: inline-block; padding: 5px 16px; margin-bottom: 20px;
    font-size: .8rem; font-weight: 700; color: var(--gold-strong);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
    border-radius: 999px; background: var(--surface);
}
.signboard-hero__contacts {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 10px 22px; margin-top: 4px;
}
.signboard-hero__contacts span, .signboard-hero__contacts a {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .86rem; color: var(--text-muted);
}
.signboard-hero__contacts a { font-weight: 700; color: var(--text); }
.signboard-hero__contacts a:hover { color: var(--brand); }
.signboard-hero__contacts svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold-strong); }
.signboard-hero__addr { max-width: 480px; text-align: left; }
@media (max-width: 480px) {
    .signboard-hero { padding: 20px 0 32px; }
    .signboard-hero__ribbon { font-size: .78rem; padding: 7px 16px; }
    .signboard-hero__addr { max-width: 100%; text-align: center; }
    .signboard-hero__contacts { gap: 8px 16px; }
}

.signboard-about-split {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center;
}
.signboard-about-split--full { grid-template-columns: 1fr; }
@media (max-width: 760px) {
    .signboard-about-split { grid-template-columns: 1fr; }
    .signboard-about__photo { order: -1; }
}
.signboard-about__photo {
    margin: 0; align-self: start;
}
.signboard-about__photo__frame {
    padding: 16px;
    border-radius: calc(var(--radius) + 6px);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
    box-shadow: var(--shadow-md);
}
.signboard-about__photo img {
    display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: var(--radius);
}
.signboard-about__photo figcaption {
    margin-top: 18px; font-size: .76rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gold-strong); text-align: center;
}

/* ------------------------------------------------------------- tables -- */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}
table.data {
    width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px;
}
table.data th, table.data td {
    padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data thead th {
    background: var(--surface-2); color: var(--text);
    font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    position: sticky; top: 0; z-index: 1;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data td:first-child, table.data th:first-child { white-space: normal; min-width: 150px; }

/* Sits above its table (not below) so a mobile visitor knows to swipe
   sideways before scrolling past dozens of otherwise numberless rows. */
.scroll-hint {
    display: none;
    font-size: .8rem; font-weight: 600; color: var(--brand);
    margin: 0 0 10px; text-align: center;
}
@media (max-width: 720px) {
    .scroll-hint { display: block; }
}

/* ------------------------------------------------------- accordion ----- */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.accordion-item + .accordion-item { border-top: 1px solid var(--border); }
.accordion-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px; background: none; border: none; cursor: pointer;
    font: inherit; font-weight: 600; font-size: .93rem; color: var(--text); text-align: left;
    transition: background-color .2s var(--ease);
}
.accordion-trigger:hover { background: var(--surface-2); }
.accordion-trigger svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-muted); transition: transform .3s var(--ease); }
.accordion-trigger[aria-expanded="true"] { color: var(--brand); }
.accordion-trigger[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--brand); }
.accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.accordion-panel.is-open { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-panel ul { margin: 0; padding: 0 18px 16px 18px; list-style: none; }
.accordion-panel li {
    display: flex; gap: 9px; align-items: center;
    padding: 6px 0; font-size: .88rem; color: var(--text-muted);
}
.accordion-panel li svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--brand); }

/* ------------------------------------------- Branch Associate Widget -- */
.branch-associate-card {
    background: #34407b;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.branch-associate-card .assoc-header {
    background: #2b366f;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
}

.branch-associate-card .assoc-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-body);
}

.assoc-accordion {
    border: none;
    border-radius: 0;
    background: transparent;
}

.assoc-accordion .accordion-item + .accordion-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.assoc-accordion .accordion-trigger {
    background: #34407b;
    color: #ffffff;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 0.96rem;
    transition: background-color .2s var(--ease);
}

.assoc-accordion .accordion-trigger:hover {
    background: #2b366f;
    color: #ffffff;
}

.assoc-accordion .accordion-trigger[aria-expanded="true"] {
    background: #2f3a74;
    color: #ffffff;
}

.assoc-accordion .accordion-trigger svg {
    color: rgba(255, 255, 255, 0.85);
}

.assoc-accordion .accordion-trigger[aria-expanded="true"] svg {
    color: #ffffff;
}

.assoc-accordion .accordion-panel {
    background: #34407b;
}

.assoc-accordion .accordion-panel ul {
    padding: 6px 20px 16px 20px;
}

.assoc-accordion .accordion-panel li {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.assoc-accordion .accordion-panel li:last-child {
    border-bottom: none;
}

.assoc-accordion .accordion-panel li svg {
    color: rgba(255, 255, 255, 0.8);
    width: 15px;
    height: 15px;
}

.btn-branch-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px !important;
    height: 44px !important;
    max-height: 44px !important;
    background: #d9383a;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    transition: background-color .2s var(--ease);
    text-decoration: none;
    margin-top: auto;
    flex-shrink: 0 !important;
}

.btn-branch-details svg {
    width: 16px !important;
    height: 16px !important;
}

.btn-branch-details:hover {
    background: #c32d2f;
    color: #ffffff !important;
}

/* --------------------------------------------------------- statement --- */
.statement {
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(22px, 4vw, 46px);
    align-items: center;
}
.statement-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.statement-photo img { width: 100%; }
.statement-body p { color: var(--text-muted); }

/* ------------------------------------------------------------ gallery -- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.gallery a {
    display: block; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: var(--shadow-sm);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery a:hover img { transform: scale(1.07); }

.video-card video { width: 100%; aspect-ratio: 16 / 10; background: #000; object-fit: cover; }

/* ------------------------------------------------ branch roster (tabs) -- */
/* A directory, not a wall of boxes: pick a branch, read that roster.
   Progressive enhancement - the tab bar only appears once JS is confirmed
   (.js-on), and until then every panel is visible and nothing is unreachable. */
.roster-tabs { display: none; }
.js-on .roster-tabs {
    /* wraps rather than scrolls: with nine branches a horizontal scroller
       clipped the last pill at the container edge and hid it entirely */
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 22px;
}
.roster-tab {
    flex: 0 0 auto; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-muted); font-size: .86rem; font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.roster-tab:hover { border-color: var(--border-strong); color: var(--text); }
.roster-tab[aria-selected="true"] {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    border-color: transparent; color: var(--brand-ink);
}
.roster-tab .count {
    font-size: .73rem; font-weight: 700; padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--surface-2); color: var(--text-faint);
}
.roster-tab[aria-selected="true"] .count {
    background: color-mix(in srgb, var(--brand-ink) 22%, transparent);
    color: var(--brand-ink);
}

.js-on .roster-panel:not(.is-active) { display: none; }
.roster-panel + .roster-panel { margin-top: 22px; }

.roster-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 6px; padding: 0 0 14px;
    border-bottom: 1px solid var(--border);
}
.roster-head h3 { margin: 0; font-size: 1.02rem; }
.roster-head .roster-count { color: var(--text-faint); font-size: .82rem; font-weight: 600; }

.signboard-about p { color: var(--text-muted); line-height: 1.7; }
.signboard-about p + p { margin-top: 14px; }

.fin-boxes-group-heading {
    margin: 0 0 16px; font-size: 1.15rem; font-weight: 800; color: var(--brand);
    text-align: center;
}
.fin-boxes-group-heading:not(:first-child) { margin-top: 40px; }
.fin-boxes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.fin-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 22px 24px; border-top: 3px solid var(--gold);
}
.fin-box__heading {
    margin: 0 0 14px; font-size: 1rem; font-weight: 800; color: var(--gold-strong);
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.fin-box__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.fin-box__list li {
    display: flex; justify-content: space-between; gap: 12px;
    padding-bottom: 7px; font-size: .9rem; color: var(--text-muted);
    border-bottom: 1px dotted var(--border);
}
.fin-box__list li span:last-child { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.fin-box__total {
    font-weight: 800 !important; border-bottom: none !important; margin-top: 2px;
    padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border));
}
.fin-box__total span { color: var(--brand) !important; }

.roster-list {
    /* 300px min keeps most names on a single line, so avatars across a row
       stay optically aligned instead of drifting with each wrapped name */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2px 16px; padding-top: 8px;
}
.roster-person {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 12px; border-radius: var(--radius-sm);
    transition: background-color .2s var(--ease);
}
.roster-person:hover { background: var(--surface-2); }
.roster-avatar {
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 46% 54% 54% 46% / 50% 46% 54% 50%;
    display: grid; place-items: center;
    font-size: .8rem; font-weight: 700; letter-spacing: .03em;
    /* same pairing as .btn-primary, which is contrast-verified in both themes */
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: var(--brand-ink);
}
.roster-person__text { min-width: 0; }
.roster-person__name { font-weight: 600; font-size: .92rem; line-height: 1.35; }
.roster-person__role { color: var(--text-faint); font-size: .78rem; }

/* the branch MD leads the roster - gold ring rather than a gold fill, so the
   initials keep the contrast-safe brand background behind them */
.roster-person--lead .roster-avatar {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent);
}
.roster-person--lead .roster-person__role { color: var(--gold-strong); font-weight: 700; }

@media print {
    .roster-tabs { display: none !important; }
    .js-on .roster-panel:not(.is-active) { display: block !important; }
}

/* ------------------------------------------------------- branch index -- */
/* A full-width numbered directory index rather than a grid of cards: the
   branch name leads, the address reads as one line, and the phone numbers
   become tappable chips on the right. */
.branch-index { display: grid; gap: 14px; }

.branch-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(14px, 2.6vw, 30px);
    align-items: center;
    padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
    padding-left: clamp(26px, 3vw, 38px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* accent spine, grows to full height on hover */
.branch-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--accent, var(--brand));
    transform: scaleY(.34); transform-origin: center;
    transition: transform .35s var(--ease);
}
.branch-row:hover::before { transform: scaleY(1); }
.branch-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.branch-row__num {
    font-family: var(--font-display); font-weight: 600; line-height: 1;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    color: var(--accent, var(--brand));
    font-variant-numeric: tabular-nums;
}

.branch-row__body { min-width: 0; }
.branch-row__name {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 0 0 5px;
    font-family: var(--font-body); font-weight: 700;
    font-size: clamp(1.08rem, 1.8vw, 1.3rem);
}
.branch-row__name a { color: var(--text); }
.branch-row__name a:hover { color: var(--accent, var(--brand)); }
.branch-row__addr { margin: 0; color: var(--text-muted); font-size: .9rem; }
.branch-row__more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: .82rem; font-weight: 700;
    color: var(--accent, var(--brand));
}
.branch-row__more svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.branch-row:hover .branch-row__more svg { transform: translateX(4px); }

.branch-badge {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent, var(--brand)) 15%, var(--surface));
    color: var(--accent, var(--brand));
}

.branch-row__contacts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.branch-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text); font-size: .84rem; font-weight: 600; white-space: nowrap;
    transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.branch-chip svg { width: 15px; height: 15px; color: var(--accent, var(--brand)); }
.branch-chip:hover {
    border-color: var(--accent, var(--brand));
    background: color-mix(in srgb, var(--accent, var(--brand)) 9%, var(--surface));
    color: var(--text);
}

@media (max-width: 860px) {
    .branch-row { grid-template-columns: auto minmax(0, 1fr); }
    .branch-row__contacts { grid-column: 2 / -1; justify-content: flex-start; margin-top: 13px; }
}
@media (max-width: 460px) {
    .branch-row { padding-left: 22px; }
    .branch-row__num { font-size: 1.25rem; }
    .branch-chip { font-size: .8rem; padding: 8px 13px; }
}

/* ---------------------------------------------------- leadership card -- */
/* Inverts the old box, which led with the job title in a coloured header:
   here the role is a small overline and the person's NAME is the headline. */
.lead-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }

.lead-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 12px;
    padding: clamp(22px, 2.6vw, 30px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.lead-card::before {
    content: ''; position: absolute; right: -42px; top: -42px;
    width: 132px; height: 132px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--brand)) 22%, transparent), transparent 70%);
}
.lead-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.lead-card > * { position: relative; z-index: 1; }

.lead-card__role {
    font-size: .69rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent, var(--brand));
}
.lead-card__name {
    margin: 0; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.28rem, 2.1vw, 1.58rem); line-height: 1.16;
}
.lead-card__call {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text); font-size: .84rem; font-weight: 600; white-space: nowrap;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.lead-card__call svg { width: 15px; height: 15px; color: var(--accent, var(--brand)); }
.lead-card__call:hover {
    border-color: var(--accent, var(--brand));
    background: color-mix(in srgb, var(--accent, var(--brand)) 9%, var(--surface));
    color: var(--text);
}

/* --------------------------------------------------- branch ledger ----- */
/* Branch managers carry no phone number, so a card each would be eleven
   near-empty boxes. An index reads faster: branch on the left, who to ask on
   the right, joined by a dotted leader. */
.ledger {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.ledger__row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--border);
    transition: background-color .2s var(--ease);
}
.ledger__row:hover { background: var(--surface-2); }
.ledger__mark {
    width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
    background: var(--accent, var(--brand)); transform: translateY(-1px);
}
.ledger__branch { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.ledger__dots {
    flex: 1 1 auto; min-width: 18px;
    border-bottom: 1px dotted var(--border-strong); transform: translateY(-5px);
}
.ledger__person { color: var(--text-muted); font-size: .9rem; text-align: right; }

@media (max-width: 520px) {
    .ledger__row { padding: 14px 16px; gap: 8px; }
    .ledger__branch { font-size: .9rem; }
    .ledger__person { font-size: .85rem; }
}

/* ------------------------------------------------------------- marquee -- */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; gap: 14px; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--surface); font-weight: 600; font-size: .86rem; color: var(--text-muted);
    white-space: nowrap;
}
.marquee__track span::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--gold));
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* -------------------------------------------------------------- prose -- */
.prose { max-width: 820px; margin-inline: auto; }
.prose p, .prose li { color: var(--text-muted); }
.prose h2 { font-size: 1.3rem; margin: 34px 0 12px; color: var(--text); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; margin: 0 0 1.05em; }
.prose li { margin-bottom: 7px; }
.prose .updated { color: var(--text-faint); font-size: .88rem; margin-bottom: 26px; }
.prose .contact-block {
    border-left: 3px solid var(--brand);
    background: var(--surface-2);
    padding: 18px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-top: 10px;
}
.prose .contact-block strong { color: var(--text); }

/* ------------------------------------------------------------- footer -- */
.footer-cta {
    /* --cta-1/2/3 (not --brand/--brand-strong/--gold-strong) so this banner's
       white text stays >6.5:1 in both themes - see the --cta-* comment above.
       The 135% stop keeps the lightest colour off the visible band entirely. */
    background: linear-gradient(120deg, var(--cta-1), var(--cta-2) 60%, var(--cta-3) 135%);
    color: #fff; padding: clamp(36px, 5vw, 54px) 0; position: relative; overflow: hidden;
}
.footer-cta::before {
    content: ''; position: absolute; inset: -30% -5%; opacity: .5; pointer-events: none;
    background: radial-gradient(40% 60% at 85% 20%, rgba(255, 255, 255, .28), transparent 70%);
}
.footer-cta .wrap {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.footer-cta h2 { color: #fff; margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.footer-cta p { color: rgba(255, 255, 255, .94); margin: 6px 0 0; }
.footer-cta .btn-ghost--dark { flex: 0 0 auto; }

.site-footer {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    padding: clamp(44px, 6vw, 70px) 0 0;
    margin-top: auto;
}
.footer-grid {
    display: grid; gap: 34px;
    grid-template-columns: minmax(0, 1.35fr) repeat(auto-fit, minmax(160px, 1fr));
}
.footer-about p { color: var(--text-muted); font-size: .9rem; max-width: 330px; }

.footer-contact { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-contact a {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--text-muted); font-size: .87rem; font-weight: 600;
    transition: color .2s var(--ease);
}
.footer-contact a:hover { color: var(--brand); }
.footer-contact svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); }

.footer-social { display: flex; gap: 8px; margin-top: 16px; }
.footer-social a {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-full);
    color: var(--text-muted); background: var(--surface);
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.footer-social a:hover {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    border-color: transparent; color: var(--brand-ink); transform: translateY(-2px);
}
.footer-social svg { width: 17px; height: 17px; }

.footer-col h4 { font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; color: var(--text); margin-bottom: 15px; font-family: var(--font-body); font-weight: 700; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--text-muted); font-size: .89rem; }
.footer-col a:hover { color: var(--brand); }
.footer-col__disabled { color: var(--text-faint); font-size: .89rem; }
.footer-bottom {
    margin-top: clamp(32px, 4vw, 48px); padding: 20px 0;
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
    font-size: .84rem; color: var(--text-faint);
}

/* ---------------------------------------------------------- animation -- */
/* Reveal-on-scroll is opt-in via the .js-anim class, which the inline head
   script adds. Without JavaScript the hidden state is never applied, so the
   content simply shows - it can never be trapped at opacity 0. */
.js-anim .reveal {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
    transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
    will-change: opacity, transform, filter;
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

.js-anim .reveal-group > * {
    opacity: 0; transform: translateY(20px); filter: blur(6px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.js-anim .reveal-group.is-visible > * { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .js-anim .reveal, .js-anim .reveal-group > * { opacity: 1 !important; transform: none !important; filter: none !important; }
    .hero-slide.is-active img { animation: none; }
    .marquee__track { animation: none; }
}

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1040px) {
    .nav { display: none; }
    .header-actions { display: flex; }
    .nav-toggle { display: grid; }
    .statement { grid-template-columns: 1fr; }
    .statement-photo { max-width: 320px; margin-inline: auto; }
}

@media (max-width: 620px) {
    :root { --gutter: 16px; --header-h: 84px; }
    body { font-size: 15px; }
    .brand img { width: 34px; }
    .brand-text b { font-size: .82rem; }
    .brand-text span { font-size: .62rem; }
    .card-body { padding: 18px; }
    .hero { min-height: clamp(540px, 90vh, 720px); }
    .hero-arrow { display: none; }
    .hero-panel { max-width: 100%; }
    .footer-cta .wrap { flex-direction: column; align-items: flex-start; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .footer-bottom { justify-content: center; text-align: center; }
    .rate-card { padding: 18px; }
    .rate-card__name { font-size: .92rem; }
}

@media (max-width: 380px) {
    .footer-grid { grid-template-columns: 1fr; }
    .brand-text { display: none; }
}

/* --------------------------------------------------- PDF preview modal -- */
.pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.pdf-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pdf-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 10, 6, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
}

.pdf-modal-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    height: 90vh;
    max-height: 880px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(16px);
    transition: transform var(--dur) var(--ease);
}

.pdf-modal.is-open .pdf-modal-content {
    transform: scale(1) translateY(0);
}

.pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex-shrink: 0;
}

.pdf-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.pdf-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    flex-shrink: 0;
}

.pdf-modal-icon svg {
    width: 22px;
    height: 22px;
}

.pdf-modal-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.pdf-modal-subtitle {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.pdf-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.pdf-modal-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pdf-modal-download svg {
    width: 18px;
    height: 18px;
}

.pdf-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .2s var(--ease);
}

.pdf-modal-close:hover {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand);
    transform: scale(1.06);
}

.pdf-modal-close svg {
    width: 20px;
    height: 20px;
}

.pdf-modal-body {
    flex: 1;
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

.pdf-modal-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--surface);
}

.pdf-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.pdf-modal-hint {
    margin: 0;
}

@media (max-width: 640px) {
    .pdf-modal {
        padding: 10px;
    }
    .pdf-modal-content {
        height: 96vh;
        max-height: none;
        border-radius: var(--radius);
    }
    .pdf-modal-header {
        padding: 12px 14px;
    }
    .pdf-modal-subtitle {
        display: none;
    }
    .pdf-modal-download span {
        display: none;
    }
    .pdf-modal-download {
        padding: 10px;
        border-radius: var(--radius-full);
    }
    .pdf-modal-footer {
        padding: 8px 14px;
        font-size: 0.76rem;
    }
}

/* -------------------------------------------------------- contact page -- */
.contact-grid {
    display: grid; gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
}

.contact-info {
    position: sticky; top: calc(var(--header-h) + 20px);
    background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), color-mix(in srgb, var(--gold) 10%, var(--surface)));
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: clamp(26px, 3vw, 34px); box-shadow: var(--shadow-sm);
}
.contact-info h2 { margin-bottom: 8px; }
.contact-info > p { color: var(--text-muted); font-size: .92rem; margin-bottom: 22px; }

.contact-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-info__list li { display: flex; align-items: center; gap: 12px; }
.contact-info__list a { color: var(--text); font-weight: 600; font-size: .93rem; word-break: break-word; }
.contact-info__list a:hover { color: var(--brand); }
.contact-info__icon {
    flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--radius-full); background: var(--surface);
    border: 1px solid var(--border); color: var(--brand);
}
.contact-info__icon svg { width: 17px; height: 17px; }

.contact-info__branches { margin-top: 26px; width: 100%; justify-content: center; }

.contact-form-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: clamp(26px, 3vw, 36px); box-shadow: var(--shadow-sm);
}

.contact-form__trap {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.field-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 0; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.field-optional { font-weight: 500; color: var(--text-faint); }
.field input, .field textarea {
    width: 100%; padding: 12px 15px; font: inherit; font-size: .94rem; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input:focus, .field textarea:focus {
    outline: none; border-color: var(--brand); background: var(--surface);
}
.field textarea { resize: vertical; min-height: 130px; font-family: var(--font-body); }
.field-error { display: block; margin-top: 6px; font-size: .78rem; color: var(--c4); font-weight: 600; }

.contact-form .btn-primary { margin-top: 4px; }

.alert {
    padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 22px;
    font-size: .89rem; font-weight: 600;
}
.alert-ok { background: color-mix(in srgb, #17795e 12%, var(--surface)); color: #0f5f49; border: 1px solid color-mix(in srgb, #17795e 30%, var(--border)); }

@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-info { position: static; }
    .field-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ------------------------------------------------------------- copy toast -- */
/* Confirms a copied email address / phone number. Sits above the back-to-top
   button so the two can never overlap on a short viewport. */
.copy-toast {
    position: fixed; left: 50%; bottom: 26px; z-index: 300;
    transform: translate(-50%, 14px);
    max-width: min(90vw, 420px);
    padding: 12px 22px; border-radius: var(--radius-full);
    background: var(--text); color: var(--bg);
    font-size: .87rem; font-weight: 600; text-align: center;
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------------------------------------- back to top -- */
.back-to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 120;
    width: 48px; height: 48px; display: grid; place-items: center;
    border: none; border-radius: var(--radius-full); cursor: pointer;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: var(--brand-ink); box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), box-shadow .2s var(--ease);
}
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { box-shadow: var(--shadow-lg); }
.back-to-top svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
    .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ----------------------------------------------------------- printing -- */
@media print {
    .site-header, .site-footer, .hero, .footer-cta, .btn, .icon-btn, .pdf-modal, .back-to-top { display: none !important; }
    body { background: #fff; color: #000; }
}