/* ==========================================================================
   LTMB public site — design system v3 ("Blueprint and keys", 2026-10-20)

   Replaces the v2 Beulah-derived look. Studied against ten reference sites
   (Stripe, Wise, Monzo, Mercury, Revolut, Nubank, Starling, Apple, Goldman
   Sachs, Moniepoint) — see /website/design-direction.md in the project
   files. The logo's royal blue owns the header, hero and one band per page,
   drawn over a faint architect's grid; everything else is quiet white with
   a blue-tinted neutral. Plus Jakarta Sans throughout (self-hosted, CSP
   font-src 'self'); palette is royal, white and near-black, cyan accents only.

   Old token names (--navy-*, --cyan-*, --slate-*, --acc2-ink, --elev ...)
   are kept so the form, wizard and whistleblowing styles further down keep
   working unchanged.
   ========================================================================== */

:root {
    --cyan-50:  #eafdff; --cyan-100: #cdfaff; --cyan-200: #9ff3ff;
    --cyan-300: #64e9ff; --cyan-400: #2fe1ff; --cyan-500: #06dffe;
    --cyan-600: #00b8d6; --cyan-700: #0092ac; --cyan-800: #037084;
    --cyan-900: #08505f; --cyan-950: #04333f;
    --cyan: #06dffe;

    --navy-50:  #e8e7fb; --navy-100: #c7c4f4; --navy-200: #9a94ea;
    --navy-300: #6a60de; --navy-400: #3c31cd; --navy-500: #170fb8;
    --navy-600: #0100a4; --navy-700: #010086; --navy-800: #01006a;
    --navy-900: #01004c; --navy-950: #010033;
    --navy: #0100a4;

    --slate-50:  #f4f5fb; --slate-100: #e9eaf4; --slate-200: #dfe1ee;
    --slate-300: #b2b6d2; --slate-400: #8a8fb3; --slate-500: #6a6e90;
    --slate-600: #4b4f73; --slate-700: #3a3e60; --slate-800: #272a45;
    --slate-900: #13142e; --slate-950: #0c0d1f;

    /* Brand surfaces */
    --royal: #0100a4;          /* logo blue — the owned colour */
    --royal-deep: #01006a;
    --ink: #0b0c1a;           /* near-black: dark buttons, top-bar panel, hovers */
    --on-royal: #ffffff;
    --on-royal-2: rgba(255,255,255,.78);
    --grid-line: rgba(6,223,254,.10);

    /* Semantics (light) */
    --bg: #ffffff; --bg-2: var(--slate-50); --elev: #ffffff;
    --text: var(--slate-900); --muted: var(--slate-600); --subtle: var(--slate-500);
    --brd: var(--slate-200);
    --acc: var(--royal); --acc-ink: var(--royal);
    --acc2: var(--royal); --acc2-ink: var(--royal);
    --chip: #ffffff;
    --glass: rgba(255,255,255,.72); --glass-brd: rgba(255,255,255,.7);
    --glass-sh: 0 8px 34px rgba(13,14,46,.14);

    --ease: cubic-bezier(.22,1,.36,1);
    --d1: 250ms; --d2: 500ms; --d3: 700ms; --d4: 1000ms;
    --r-sm: 10px; --r-md: 18px; --r-lg: 24px; --r-xl: 28px; --r-pill: 999px;
    --sh1: 0 1px 2px rgba(13,14,46,.05), 0 2px 8px rgba(13,14,46,.04);
    --sh2: 0 8px 24px rgba(13,14,46,.08), 0 20px 48px rgba(13,14,46,.06);
    --sh3: 0 24px 60px rgba(1,0,60,.22);

    --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --container: 1220px;
}

/* ===== Dark mode — [data-theme] is always set by the pre-paint script in
   the layout; the media query only covers a visitor with JS disabled. ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --royal: #0a098a; --royal-deep: #05044a;
        --bg: #0c0d1f; --bg-2: #121430; --elev: #171a38;
        --text: #eceefb; --muted: #b9bcd8; --subtle: #9599bb;
        --brd: rgba(255,255,255,.12);
        --acc: var(--cyan-300); --acc-ink: var(--cyan-300); --acc2-ink: var(--cyan-300);
        --chip: #f1f2f8;
        --glass: rgba(23,26,56,.66); --glass-brd: rgba(255,255,255,.14);
        --glass-sh: 0 8px 34px rgba(0,0,0,.5);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --royal: #0a098a; --royal-deep: #05044a;
    --bg: #0c0d1f; --bg-2: #121430; --elev: #171a38;
    --text: #eceefb; --muted: #b9bcd8; --subtle: #9599bb;
    --brd: rgba(255,255,255,.12);
    --acc: var(--cyan-300); --acc-ink: var(--cyan-300); --acc2-ink: var(--cyan-300);
    --chip: #f1f2f8;
    --glass: rgba(23,26,56,.66); --glass-brd: rgba(255,255,255,.14);
    --glass-sh: 0 8px 34px rgba(0,0,0,.5);
    color-scheme: dark;
}

/* Self-hosted variable font (latin + latin-ext; ₦ U+20A6 is in latin-ext).
   Plus Jakarta Sans for everything: one calm family, as on mature bank
   sites, with hierarchy carried by size and weight rather than a second
   display face. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
 src:url('../fonts/jakarta-latin.woff2') format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
 src:url('../fonts/jakarta-latinext.woff2') format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--text);background:var(--bg);
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.025em;color:var(--text);text-wrap:balance}
h1{font-size:clamp(2.3rem,1.5rem + 3.2vw,3.9rem)} h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.45rem)} h3{font-size:1.2rem;letter-spacing:-.01em;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap,.container{max-width:var(--container);margin:0 auto;padding-inline:clamp(16px,4vw,36px)}
p{margin:0 0 1em;color:var(--muted)}
.lede{color:var(--muted);font-size:clamp(1.04rem,1rem + .3vw,1.18rem);line-height:1.55;max-width:62ch}
.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}
.num{font-variant-numeric:tabular-nums}

/* ===== Accessibility primitives (Phase 9A) ===== */
.skip-link{position:absolute;top:0;left:0;z-index:9999;padding:12px 20px;background:var(--royal);color:#fff;
 font-weight:700;font-size:.9rem;border-radius:0 0 10px 0;transform:translateY(-120%);transition:transform .15s ease}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[role="tab"]:focus-visible{
 outline:3px solid var(--cyan-600);outline-offset:2px;border-radius:4px}
:root[data-theme="dark"] :is(a,button,summary,[tabindex]):focus-visible,
.on-royal :is(a,button,summary,input,select,[tabindex]):focus-visible{outline-color:var(--cyan-400)}
#main:focus{outline:none}
main p a:not(.btn):not(.card__link),.wb-escalation a,.wb-escalation li a{text-decoration:underline;text-underline-offset:2px}
main p a:not(.btn):not(.card__link){transition:color .3s ease-out}
main p a:not(.btn):not(.card__link):hover{text-decoration-thickness:2px;color:var(--acc-ink)}

.glass{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
 border:1px solid var(--glass-brd);border-radius:var(--r-lg);box-shadow:var(--glass-sh)}
@supports not (backdrop-filter:blur(1px)){.glass{background:var(--elev)}}

/* Scroll reveal — a gentle rise only. Content is never hidden at rest, so
   nothing depends on the observer firing (thumbnails, print, slow JS). */
.rv{transform:translateY(18px);transition:transform .8s var(--ease)}
.rv.in{transform:none}
.stg>*{transform:translateY(16px);transition:transform .7s var(--ease)}
.stg.in>*{transform:none}
.stg.in>*:nth-child(2){transition-delay:70ms}.stg.in>*:nth-child(3){transition-delay:140ms}
.stg.in>*:nth-child(4){transition-delay:210ms}.stg.in>*:nth-child(5){transition-delay:280ms}
.stg.in>*:nth-child(6){transition-delay:350ms}.stg.in>*:nth-child(7){transition-delay:420ms}
.stg.in>*:nth-child(8){transition-delay:490ms}
@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .rv,.stg>*{transform:none!important}
 html{scroll-behavior:auto}
}

/* ===== Royal surfaces ===== Anything with .on-royal (header, hero, page
   hero, navy sections, CTA banner, footer) gets white text and the faint
   blueprint grid. */
.on-royal{background:var(--royal);color:var(--on-royal);position:relative;isolation:isolate}
.on-royal h1,.on-royal h2,.on-royal h3,.on-royal h4{color:#fff}
.on-royal p,.on-royal .lede{color:var(--on-royal-2)}
.blueprint::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
 background-size:40px 40px;
 -webkit-mask-image:radial-gradient(ellipse 80% 90% at 72% 30%,#000 25%,transparent 85%);
 mask-image:radial-gradient(ellipse 80% 90% at 72% 30%,#000 25%,transparent 85%)}

.eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
 color:var(--acc2-ink);margin-bottom:14px}
.on-royal .eyebrow,.section--navy .eyebrow{color:var(--cyan-400)}

.section{padding:clamp(64px,8vw,104px) 0}
.section--tight{padding:clamp(44px,5vw,64px) 0}
.section--muted{background:var(--bg-2)}
.section--navy{background:var(--royal);color:var(--on-royal);position:relative;isolation:isolate}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy p{color:var(--on-royal-2)}
.section-head{max-width:720px;margin:0 auto 44px;text-align:center}
.section-head h2{margin-bottom:12px}

/* ===== BUTTONS =====
   Shape and hover from unioffa.edu.ng's .theme-btn: a "leaf" radius (three
   round corners, bottom-left square) and a circle that grows from the
   centre on hover to fill the button with a second colour. Type follows
   premiumtrustbank.com's calmer voice: sentence case, no tracking.
   Palette: royal, white and near-black; cyan is an accent only, so it
   never fills a button. Secondary actions use .link-more ("Learn more ->")
   rather than a second filled button. */
.btn{position:relative;z-index:1;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
 gap:8px;font:inherit;font-size:15px;font-weight:600;line-height:1.6;letter-spacing:0;text-transform:none;text-align:center;
 padding:14px 24px;border-radius:50px 50px 50px 0;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
 box-shadow:0 0 40px 5px rgba(0,0,0,.05);transition:all .5s ease-in-out}
.btn::before{content:"";position:absolute;top:50%;left:50%;z-index:-1;width:150%;min-width:300px;aspect-ratio:1;
 border-radius:50%;background:var(--btn-fill,var(--ink));transform:translate(-50%,-50%) scale(0);
 transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.btn:hover::before,.btn:focus-visible::before{transform:translate(-50%,-50%) scale(1)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
 transition:transform .5s ease-in-out}
.btn:hover svg:last-child:not(:first-child){transform:translateX(3px)}
.btn:focus-visible{outline:3px solid var(--cyan-600);outline-offset:3px}

/* Primary: royal, near-black circle on hover. */
.btn-p{background:var(--royal);color:#fff;--btn-fill:var(--ink)}
.btn-p:hover,.btn-p:focus-visible{color:#fff}
/* On royal surfaces: white button, near-black fill. */
.on-royal .btn-p,.section--navy .btn-p,.cta-banner .btn-p,.mob .btn-p{background:#fff;color:var(--royal);--btn-fill:var(--ink)}
.on-royal .btn-p:hover,.section--navy .btn-p:hover,.cta-banner .btn-p:hover,.mob .btn-p:hover{color:#fff}
/* Secondary dark */
.btn-s{background:var(--ink);color:#fff;--btn-fill:var(--royal)}
.btn-s:hover{color:#fff}
/* Outline / white: royal circle on hover. */
.btn-o{background:var(--elev);border-color:var(--brd);color:var(--text);--btn-fill:var(--royal)}
.btn-o:hover,.btn-o:focus-visible{color:#fff;border-color:var(--royal)}
.btn-w{background:#fff;color:var(--royal);border-color:#fff;--btn-fill:var(--royal)}
.btn-w:hover{color:#fff}
.btn-glass{background:transparent;border-color:rgba(255,255,255,.45);color:#fff;box-shadow:none;--btn-fill:#fff}
.btn-glass:hover,.btn-glass:focus-visible{color:var(--royal);border-color:#fff}
/* Dark theme: royal is too dim on the dark page, so primary goes white. */
:root[data-theme="dark"] .btn-p{background:#fff;color:var(--navy-900);--btn-fill:var(--royal)}
:root[data-theme="dark"] .btn-p:hover{color:#fff}
:root[data-theme="dark"] .btn-o:hover{border-color:#fff}
.btn--sm{padding:11px 18px;font-size:14px}

/* "Learn more ->" text link: the quiet secondary action. The arrow slides
   on hover and an underline draws in from the left. */
.link-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--royal);
 background:linear-gradient(currentColor,currentColor) left bottom/0 1.5px no-repeat;padding-bottom:3px;
 transition:background-size .4s ease,color .3s}
.link-more svg{width:16px;height:16px;flex:none;transition:transform .4s ease}
.link-more:hover{background-size:calc(100% - 24px) 1.5px}
.link-more:hover svg{transform:translateX(4px)}
.on-royal .link-more,.section--navy .link-more,.cta-banner .link-more{color:#fff}
:root[data-theme="dark"] .link-more{color:var(--cyan-300)}

/* ===== TOP BAR (premiumtrustbank.com style) =====
   A thin near-black bar: audience links on the left, help on the right.
   Hidden below 992px; the mobile menu carries the same links. */
.utility{background:var(--ink);color:#fff;font-size:.84rem}
.utility__inner{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;min-height:40px;
 max-width:1440px;padding-inline:clamp(16px,2.5vw,36px);margin:0 auto}
.utility ul{list-style:none;display:flex;align-items:center;gap:26px}
.utility a{position:relative;display:inline-block;padding:10px 0;color:rgba(255,255,255,.82);font-weight:500;transition:color .3s ease}
.utility a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:var(--cyan-400);
 transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.utility a:hover{color:#fff}
.utility a:hover::after,.utility a:focus-visible::after{transform:scaleX(1)}
.utility__ussd{color:rgba(255,255,255,.6)}
.utility__ussd b{color:var(--cyan-300);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
@media (max-width:1100px){.utility__hide-md{display:none!important}}
@media (max-width:991px){.utility{display:none}}

/* ===== MAIN NAVIGATION (unioffa .navbar) =====
   White bar, dark 600-weight links that turn royal on hover/active; the
   bar pins to the top on scroll and slides down with a soft shadow. */
.site-header{position:sticky;top:0;z-index:60;background:var(--elev);color:var(--text);transition:box-shadow .5s ease-in-out}
.site-header.stuck{box-shadow:0 0 15px rgba(0,0,0,.17);animation:slide-down .7s ease}
@keyframes slide-down{0%{transform:translateY(-100%)}100%{transform:translateY(0)}}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:90px;
 max-width:1440px;padding-inline:clamp(16px,2.5vw,36px)}
.site-header__brand{display:flex;align-items:center;flex-shrink:0}
/* The logo PNG is the wordmark on its own royal tile; on the white bar it
   reads as a badge, so give it soft corners. */
.site-header__brand img{height:60px;width:auto;border-radius:8px}

.site-nav-wrap{display:flex;flex:1;justify-content:flex-end}
.site-nav{display:flex;list-style:none;flex-wrap:nowrap}
.nav-item{position:relative;list-style:none;flex-shrink:0}
.nav-link{position:relative;display:flex;align-items:center;gap:5px;margin-right:22px;padding:30px 0;font-family:inherit;
 font-size:16px;font-weight:500;line-height:1.8;color:var(--text);text-transform:capitalize;white-space:nowrap;
 transition:color .15s ease-in-out}
.nav-item:last-child .nav-link{margin-right:0}
button.nav-link{border:0;background:none;cursor:pointer}
.nav-link:hover,.nav-item:hover>.nav-link,.nav-link[aria-expanded="true"],.nav-link[aria-current="page"],.nav-link.is-current{color:var(--royal)}
:root[data-theme="dark"] :is(.nav-link:hover,.nav-item:hover>.nav-link,.nav-link[aria-expanded="true"],.nav-link[aria-current="page"],.nav-link.is-current){color:var(--cyan-400)}
.nav-link .chev{width:12px;height:12px;transition:transform .3s}
.nav-item.is-open .nav-link .chev{transform:rotate(180deg)}

/* Dropdown: deep-royal panel (darker than the royal hero so it stands off it), cyan top rule, folds down from a -75deg tilt.
   Items slide right on hover and a cyan "//" fades in before them. */
.dropdown{position:absolute;top:80%;left:-15px;width:320px;background:var(--royal-deep);border-top:4px solid var(--cyan-500);
 box-shadow:0 18px 40px rgba(1,0,40,.35);opacity:0;visibility:hidden;transform:rotateX(-75deg);transform-origin:0 0;
 transition:.3s;z-index:5}
.nav-item.is-open .dropdown{opacity:1;visibility:visible;top:100%;transform:rotateX(0deg)}
@media (hover:hover){.nav-item:hover .dropdown{opacity:1;visibility:visible;top:100%;transform:rotateX(0deg)}}
.dropdown a{position:relative;z-index:0;display:flex;flex-direction:column;gap:1px;padding:8px 25px;overflow:hidden;
 color:#fff;font-size:16px;font-weight:500;text-transform:capitalize;border-bottom:1px solid rgba(255,255,255,.08);
 transition:.3s ease-in-out}
.dropdown a:last-child{border-bottom:0}
.dropdown a::before{content:"//";position:absolute;left:15px;top:8px;color:var(--cyan-400);opacity:0;visibility:hidden;
 transition:all .5s ease-in-out;z-index:-1}
.dropdown a:hover,.dropdown a:focus-visible{color:var(--cyan-400);padding-left:32px;background:transparent}
.dropdown a:hover::before,.dropdown a:focus-visible::before{opacity:1;visibility:visible}
.dropdown a b{font-size:16px;font-weight:500}
.dropdown a span{font-size:.8rem;color:rgba(255,255,255,.65);text-transform:none}

.site-header__actions{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:36px}
.nav-toggle{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:4px}
.nav-toggle:hover{color:var(--royal)}
.nav-toggle svg{width:26px;height:26px;display:block}

.theme-toggle{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--text);cursor:pointer;
 display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .5s ease-in-out}
.theme-toggle:hover{color:var(--royal)}
:root[data-theme="dark"] .theme-toggle:hover,:root[data-theme="dark"] .nav-toggle:hover{color:var(--cyan-400)}
.theme-toggle svg{width:20px;height:20px}

@media (max-width:1440px){.nav-link{margin-right:18px;font-size:16px}.site-header__actions{margin-left:24px}}
@media (max-width:1280px){.nav-link{margin-right:15px;font-size:15px}.site-header__actions{margin-left:18px}.site-header__brand img{height:54px}}
@media (max-width:1199px) and (min-width:992px){.site-header__actions .btn{display:none}.site-header__actions{margin-left:12px}}
@media (max-width:1100px) and (min-width:992px){.nav-link{margin-right:12px;font-size:14.5px}.site-header__brand img{height:48px}.theme-toggle{width:34px}}

/* ===== MOBILE NAV DRAWER ===== */
.mob-backdrop{position:fixed;inset:0;background:rgba(8,10,25,.55);z-index:70;opacity:0;visibility:hidden;
 backdrop-filter:blur(2px);transition:opacity .3s var(--ease),visibility .3s}
.mob-backdrop.is-open{opacity:1;visibility:visible}
.mob{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--royal-deep);z-index:80;
 padding:20px 24px 28px;overflow-y:auto;transform:translateX(100%);transition:transform .32s var(--ease)}
.mob.is-open{transform:translateX(0)}
.mob-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.mob-head img{height:46px}
.mob-head button{background:none;border:none;color:#fff;cursor:pointer}
.mob details{border-bottom:1px solid rgba(255,255,255,.12)}
.mob details summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:15px 4px;
 color:#fff;font-weight:600;font-size:1.02rem;cursor:pointer}
.mob details summary::-webkit-details-marker{display:none}
.mob details summary svg{width:14px;height:14px;transition:transform .25s}
.mob details[open] summary svg{transform:rotate(180deg)}
.mob details .mob-sub{display:flex;flex-direction:column;gap:2px;padding:0 4px 14px}
.mob details .mob-sub a{color:var(--slate-300);font-size:.95rem;padding:8px 0}
.mob>a.mob-link{display:block;padding:15px 4px;color:#fff;font-weight:600;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.12)}
.mob .mob-ctas{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.mob .btn-o{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{padding:clamp(48px,6vw,84px) 0 clamp(52px,6vw,88px)}
.page-hero .container{display:grid;gap:4px}
.page-hero h2{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem);max-width:22ch;margin-bottom:10px}
.page-hero .lede{max-width:60ch;margin:0}
.page-hero--narrow .container{max-width:900px}
/* Photo banner: stock photo under the same royal overlay as the homepage
   slider, dense behind the text and lighter to the right. */
.page-hero--photo{overflow:hidden;padding-block:clamp(72px,9vw,128px)}
.page-hero__bg{display:block;position:absolute;inset:0;z-index:-1}
.page-hero__bg img{width:100%;height:100%;object-fit:cover}
.page-hero__bg::after{content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(1,0,80,.92) 0%,rgba(1,0,164,.80) 50%,rgba(1,0,164,.50) 100%)}
@media (max-width:720px){.page-hero__bg::after{background:rgba(1,0,100,.82)}}

/* ===== Trust strip ===== */
.trust-strip{padding:34px 0;border-bottom:1px solid var(--brd)}
.trust-strip__label{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:var(--subtle);margin-bottom:20px}
.trust-strip__logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
/* Partner logos are full-colour on transparent — a white chip keeps them
   legible on both themes. */
.trust-logo{display:flex;align-items:center;justify-content:center;height:58px;padding:0 18px;
 background:var(--chip);border:1px solid var(--brd);border-radius:12px;transition:transform .3s var(--ease),border-color .3s}
.trust-logo:hover{transform:translateY(-2px);border-color:var(--slate-300)}
.trust-logo img{height:30px;width:auto;max-width:130px;object-fit:contain;display:block}
@media (max-width:640px){.trust-logo{height:52px;padding:0 14px}.trust-logo img{height:24px;max-width:110px}}

.stat{text-align:center}
.stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.9rem;color:var(--cyan-400)}
.stat span{font-size:.8rem;color:var(--slate-300)}

/* ===== Cards / grids ===== */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{position:relative;overflow:hidden;background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-md);
 padding:28px 26px;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{border-color:color-mix(in srgb,var(--acc2-ink) 45%,var(--brd));transform:translateY(-2px);box-shadow:var(--sh2)}
.card h3{margin-bottom:8px}
.card__icon{position:relative;width:48px;height:48px;border-radius:14px;background:var(--royal);color:var(--cyan-400);
 display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);font-size:1.15rem;
 margin-bottom:18px;transition:transform .4s var(--ease)}
.card:hover .card__icon{transform:translateY(-2px)}
.card__rate{position:relative;display:block;margin-top:8px;font-family:var(--font-display);font-weight:600;
 color:var(--acc2-ink);font-size:1.6rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card__rate small{font-family:var(--font-body);font-weight:500;font-size:.78rem;color:var(--subtle);letter-spacing:0}

.card__link{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.94rem;
 font-weight:600;color:var(--acc2-ink);transition:gap .35s var(--ease)}
.card__link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.card__link svg{transition:transform .4s ease}
.card__link:hover svg{transform:translateX(4px)}
.card:hover .card__link{gap:10px}
.card__link svg{width:14px;height:14px}

.stat-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat-card{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-md);padding:26px 22px}
.stat-card b{display:block;font-family:var(--font-display);font-weight:600;font-size:2rem;color:var(--acc2-ink);
 margin-bottom:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat-card span{font-size:.9rem;color:var(--muted)}
.section--navy .stat-card{background:rgba(1,0,60,.35);border-color:rgba(255,255,255,.14)}
.section--navy .stat-card b{color:var(--cyan-300)}
.section--navy .stat-card span{color:var(--on-royal-2)}
@media (max-width:640px){.stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

.img-hover{border-radius:var(--r-md);overflow:hidden}
.img-hover img{transition:transform .8s var(--ease)}
.img-hover:hover img{transform:scale(1.04)}

.tabs{display:flex;gap:8px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.tabs button{background:var(--bg-2);border:1px solid var(--brd);border-radius:999px;padding:10px 20px;font-weight:600;font-size:.9rem;
 color:var(--muted);cursor:pointer;font-family:inherit;transition:all .2s}
.tabs button.is-active{background:var(--royal);border-color:var(--royal);color:#fff}
.tab-panel{display:none} .tab-panel.is-active{display:block}

.testimonial{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:26px}
.testimonial__quote{font-size:1rem;color:#fff;margin-bottom:16px}
.testimonial__author{font-weight:700;font-size:.9rem;color:#fff}
.testimonial__role{font-size:.8rem;color:var(--slate-400)}

/* ---- Profile cards (Board / Management) ---- */
.profile-card{text-align:left}
.profile-photo{width:100%;aspect-ratio:4/4.4;border-radius:var(--r-sm);overflow:hidden;margin:0 0 18px;background:var(--bg-2)}
.profile-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.profile-card__title{font-size:.86rem;color:var(--acc2-ink);font-weight:600;margin-bottom:12px}
.profile-card p{text-align:left;font-size:.9rem}
.profile-more{margin-top:2px}
.profile-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;
 font-size:.86rem;font-weight:600;color:var(--acc2-ink)}
.profile-more summary::-webkit-details-marker{display:none}
.profile-more summary svg{width:14px;height:14px;flex-shrink:0;transition:transform .3s var(--ease)}
.profile-more[open] summary svg{transform:rotate(45deg)}
.profile-more__less{display:none}
.profile-more[open] .profile-more__more{display:none}
.profile-more[open] .profile-more__less{display:inline}
.profile-more__body{text-align:left;font-size:.9rem;margin-top:8px}

/* ---- FAQ accordion ---- */
.faq-item{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;transition:border-color .3s}
.faq-item[open]{border-color:color-mix(in srgb,var(--acc2-ink) 40%,var(--brd))}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
 gap:16px;padding:20px 24px;font-weight:600;font-family:var(--font-display);font-size:1.05rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:18px;height:18px;flex-shrink:0;color:var(--acc2-ink);transition:transform .3s var(--ease)}
.faq-item[open] summary svg{transform:rotate(45deg)}
.faq-item__body{padding:0 24px 22px;color:var(--muted);font-size:.95rem;line-height:1.7}
.faq-item__body ul{margin:10px 0 0;padding-left:18px}
.faq-item__body li{margin-bottom:4px}

.phone-shots{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.phone-shots img{width:130px;border-radius:16px;border:1px solid var(--brd);box-shadow:var(--sh2)}

/* ---- Location cards ---- */
.location-card{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-md);padding:24px;
 transition:border-color .3s var(--ease),transform .3s var(--ease)}
.location-card:hover{border-color:color-mix(in srgb,var(--acc2-ink) 45%,var(--brd));transform:translateY(-2px)}
.location-card__label{font-size:.76rem;font-weight:700;color:var(--acc2-ink);text-transform:uppercase;
 letter-spacing:.08em;margin-bottom:6px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.split img{border-radius:var(--r-lg)}
.split .img-hover{aspect-ratio:16/11}
.split .img-hover picture{display:block;height:100%}
.split .img-hover img{width:100%;height:100%;object-fit:cover}

/* ---- CTA banner ---- */
.cta-banner{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;min-height:300px;display:flex;align-items:center;background:var(--royal)}
.cta-banner__bg{position:absolute;inset:0}
.cta-banner__bg img{width:100%;height:100%;object-fit:cover}
.cta-banner__scrim{position:absolute;inset:0;background:linear-gradient(100deg,var(--royal) 0%,color-mix(in srgb,var(--royal) 82%,transparent) 50%,color-mix(in srgb,var(--royal) 30%,transparent) 100%)}
.cta-banner__content{position:relative;z-index:2;padding:clamp(28px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;width:100%}
.cta-banner h2{color:#fff;margin-bottom:8px}
.cta-banner p{color:var(--on-royal-2);margin:0}

/* ---- Footer ---- */
/* ===== FOOTER (premiumtrustbank.com style) =====
   Near-black; brand + contacts on the left, four link columns, then the
   app badge and socials, then the regulator line. */
.site-footer{background:var(--ink);color:rgba(255,255,255,.66);padding:clamp(56px,7vw,88px) 0 28px}
.site-footer h4{color:#fff;font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;margin-bottom:18px}
.site-footer p,.site-footer address{color:rgba(255,255,255,.66);font-size:.92rem;font-style:normal;line-height:1.6}
.site-footer a{color:rgba(255,255,255,.66);font-size:.92rem;transition:color .3s ease,padding .4s ease}
.site-footer a:hover{color:#fff}
.site-footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:clamp(32px,5vw,72px)}
.site-footer__brand{display:grid;gap:16px;align-content:start}
.site-footer__brand img{height:60px;width:auto;border-radius:8px}
.site-footer__contact{list-style:none;display:grid;gap:10px}
.site-footer__contact a,.site-footer__contact span{display:inline-flex;align-items:center;gap:10px}
.site-footer__contact svg{color:var(--cyan-300);flex:none}
.site-footer__contact b{color:#fff;font-weight:600}
.site-footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.site-footer__links{list-style:none;display:flex;flex-direction:column;gap:11px}
.site-footer__links a{display:inline-block}
.site-footer__links a:hover{padding-left:6px}
.site-footer__mid{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
 margin-top:clamp(40px,5vw,56px);padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.app-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 14px;border-radius:12px;
 border:1px solid rgba(255,255,255,.25);background:#000;color:#fff!important;transition:border-color .3s,transform .3s}
.app-badge:hover{border-color:#fff;transform:translateY(-2px)}
.app-badge svg{width:26px;height:26px}
.app-badge span{display:grid;line-height:1.15}
.app-badge small{font-size:.7rem;color:rgba(255,255,255,.75)}
.app-badge b{font-size:1.05rem;font-weight:600}
.site-footer__social{list-style:none;display:flex;gap:10px}
.site-footer__social a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
 background:rgba(255,255,255,.08);color:#fff;transition:background .3s,transform .3s}
.site-footer__social a:hover{background:var(--royal);transform:translateY(-2px)}
.site-footer__social svg{width:18px;height:18px}
.site-footer__bottom{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
 display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem;color:rgba(255,255,255,.5)}
@media (max-width:1100px){.site-footer__top{grid-template-columns:1fr}}
@media (max-width:760px){.site-footer__cols{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.site-footer__cols{grid-template-columns:1fr}}

/* ===== Floating widgets — FAB + popup + a continuous "ping" ring,
   ported precisely from Beulah's .wa-fab/.em-fab::after pattern ===== */
.fw{position:fixed;right:22px;bottom:22px;z-index:90;opacity:0;transform:translateY(14px) scale(.4);
 animation:fwIn .6s var(--ease) forwards}
.fw+.fw{bottom:88px}
.fw:nth-of-type(1){animation-delay:.4s}
.fw:nth-of-type(2){animation-delay:.65s}
@keyframes fwIn{to{opacity:1;transform:none}}
@media(max-width:768px){.fw{right:16px}.fw+.fw{bottom:88px}}

.fw-popup{position:absolute;bottom:72px;right:0;width:320px;border-radius:16px;overflow:hidden;background:var(--elev);
 box-shadow:0 12px 50px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.06);transform:scale(.85) translateY(20px);opacity:0;
 pointer-events:none;visibility:hidden;transform-origin:bottom right;
 transition:transform .5s var(--ease),opacity .5s var(--ease),visibility 0s .5s}
.fw.is-open .fw-popup{transform:scale(1) translateY(0);opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
@media(max-width:400px){.fw-popup{width:calc(100vw - 32px);right:-6px}}

.fw-head{display:flex;align-items:center;gap:12px;padding:16px 18px;color:#fff}
.fw--wa .fw-head{background:#25D366} .fw--em .fw-head{background:var(--navy-600)}
.fw-head b{flex:1;font-size:1.02rem;font-weight:700}
.fw-head button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.15);color:#fff;cursor:pointer;
 display:grid;place-items:center;flex-shrink:0;transition:background .3s var(--ease),transform .3s var(--ease)}
.fw-head button:hover{background:rgba(0,0,0,.28);transform:rotate(90deg)}
.fw-head button svg{width:15px;height:15px}
.fw-body{padding:18px;min-height:90px;background:var(--bg-2)}
.fw-bubble{background:var(--elev);border-radius:0 12px 12px 12px;padding:13px 15px;max-width:90%;box-shadow:0 1px 3px rgba(0,0,0,.1);
 font-size:.9rem;color:var(--text);position:relative}
.fw-bubble::before{content:'';position:absolute;top:0;left:-8px;border:8px solid transparent;border-top-color:var(--elev);border-right-color:var(--elev)}
.fw-foot{padding:14px;background:var(--bg-2);border-top:1px solid var(--brd);display:flex;justify-content:flex-end}
.fw-open-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:24px;font-weight:700;
 font-size:.88rem;color:#fff;transition:transform .3s var(--ease)}
.fw--wa .fw-open-btn{background:#25D366} .fw--em .fw-open-btn{background:var(--navy-600)}
.fw-open-btn:hover{transform:translateY(-1px)}

.fw-fab{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;color:#fff;position:relative;
 display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fw-fab:hover{transform:scale(1.08) translateY(-3px)}
.fw--wa .fw-fab{background:#25D366;box-shadow:0 6px 24px rgba(37,211,102,.45)}
.fw--wa .fw-fab:hover{box-shadow:0 12px 36px rgba(37,211,102,.55)}
.fw--em .fw-fab{background:var(--navy-600);box-shadow:0 6px 24px color-mix(in srgb,var(--navy) 45%,transparent)}
.fw--em .fw-fab:hover{box-shadow:0 12px 36px color-mix(in srgb,var(--navy) 55%,transparent)}
.fw-fab svg{width:26px;height:26px}
/* Continuous "ping" ring — this is the requested always-on attention animation */
.fw-fab::after{content:'';position:absolute;inset:-5px;border-radius:50%;opacity:.4;
 animation:fwPing 2.4s var(--ease) infinite}
.fw--wa .fw-fab::after{border:2px solid #25D366}
.fw--em .fw-fab::after{border:2px solid var(--navy-600);animation-delay:1.2s}
@keyframes fwPing{0%{transform:scale(.9);opacity:.5}70%,100%{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.fw-fab::after{animation:none;display:none}.fw{animation:none;opacity:1;transform:none}}

/* ===== Back to top — glass, with a ring that fills as you scroll ===== */
.btt{position:fixed;right:90px;bottom:28px;z-index:90;width:46px;height:46px;border-radius:50%;border:1px solid var(--brd);
 cursor:pointer;display:grid;place-items:center;background:var(--glass);-webkit-backdrop-filter:blur(20px);
 backdrop-filter:blur(20px);box-shadow:var(--sh2);color:var(--acc2-ink);opacity:0;transform:translateY(20px);
 pointer-events:none;transition:opacity .5s var(--ease),transform .3s var(--ease),background .5s var(--ease)}
.btt.is-visible{opacity:1;transform:none;pointer-events:auto}
.btt:hover{background:var(--navy-600);color:#fff;border-color:var(--navy-600)}
.btt-ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);transform:rotate(-90deg);pointer-events:none}
.btt-ring-track{fill:none;stroke:var(--brd);stroke-width:2.5}
.btt-ring-fill{fill:none;stroke:var(--cyan-600);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:131.9;
 stroke-dashoffset:131.9;transition:stroke-dashoffset .15s linear}
.btt:hover .btt-ring-fill{stroke:#fff}
.btt-icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;position:relative}
@media(max-width:768px){.btt{bottom:92px;right:84px}}

/* ===== Preloader =====
   Logo-blue stage (#0100a4 matches the logo tile, so the logo sits on it
   seamlessly) with a vignette, two counter-rotating orbit arcs echoing the
   orbital mark, a light sweep across the logo, and a progress line. On
   exit the content drifts up and fades, then the whole panel lifts away. */
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;color:#fff;
 background:radial-gradient(ellipse 60% 55% at 50% 46%,#0100a4 0%,#0100a4 38%,#01006a 72%,#010033 100%);
 transition:transform .9s cubic-bezier(.76,0,.24,1) .25s,visibility 0s 1.15s}
#preloader::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
 background-image:linear-gradient(rgba(6,223,254,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(6,223,254,.07) 1px,transparent 1px);
 background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 50% 46%,transparent 22%,#000 75%);mask-image:radial-gradient(circle at 50% 46%,transparent 22%,#000 75%)}
#preloader.pl-hide{transform:translateY(-100%);visibility:hidden;pointer-events:none}
.pl-inner{position:relative;display:grid;justify-items:center;gap:26px;transition:opacity .45s ease,transform .6s cubic-bezier(.76,0,.24,1)}
#preloader.pl-hide .pl-inner{opacity:0;transform:translateY(-30px) scale(.96)}
.pl-stage{position:relative;width:240px;height:240px;display:grid;place-items:center;animation:plIn .9s cubic-bezier(.22,1,.36,1) both}
.pl-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl-track{stroke:rgba(255,255,255,.08);stroke-width:1}
.pl-spin{transform-origin:120px 120px;transform-box:view-box}
.pl-spin--a{animation:plSpin 1.6s cubic-bezier(.55,.15,.45,.85) infinite}
.pl-spin--b{animation:plSpin 2.4s linear infinite reverse}
.pl-logo{position:relative;width:168px;overflow:hidden;border-radius:6px}
.pl-logo img{display:block;width:100%;height:auto}
.pl-logo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
 background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);
 transform:skewX(-18deg);animation:plShine 2.2s ease-in-out .6s infinite}
.pl-progress{display:flex;align-items:center;gap:14px;animation:plIn .9s cubic-bezier(.22,1,.36,1) .15s both}
.pl-bar{position:relative;width:180px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.pl-bar i{position:absolute;inset:0;background:linear-gradient(90deg,#06dffe,#64e9ff);transform:scaleX(0);transform-origin:left;
 box-shadow:0 0 12px rgba(6,223,254,.8)}
.pl-pct{min-width:4ch;font:600 .82rem/1 var(--font-body);letter-spacing:.06em;color:#64e9ff;font-variant-numeric:tabular-nums}
.pl-tag{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);
 animation:plIn .9s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes plSpin{to{transform:rotate(360deg)}}
@keyframes plShine{0%{left:-60%}55%,100%{left:130%}}
@keyframes plIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .pl-spin,.pl-logo::after,.pl-stage,.pl-progress,.pl-tag{animation:none}
 #preloader{transition:opacity .3s,visibility 0s .3s}
 #preloader.pl-hide{transform:none;opacity:0}
}
@media(max-width:480px){.pl-stage{width:200px;height:200px}.pl-logo{width:140px}.pl-bar{width:150px}}

/* ===== Scroll progress bar ===== */
.scroll-prog{position:fixed;top:0;left:0;height:3px;z-index:999;
 background:linear-gradient(90deg,var(--cyan-500),var(--navy-600));transform-origin:left;transform:scaleX(0);will-change:transform}

/* ---- Form controls ---- Light context by default (v3: forms now sit on
   white sections); the dark variant applies only inside royal surfaces. */
.form-row{margin-bottom:16px}
.form-row label{display:block;font-size:.86rem;color:var(--text);margin-bottom:6px;font-weight:600}
.form-row select,.form-row input:not([type=checkbox]):not([type=radio]):not([type=file]),.form-row textarea{width:100%;padding:12px 13px;border-radius:10px;border:1.5px solid var(--brd);
 background:var(--bg);color:var(--text);font-size:.95rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.form-row textarea{resize:vertical;min-height:120px}
.form-row select:focus,.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--acc2-ink);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--acc2-ink) 22%,transparent)}
.on-royal .form-row label,.section--navy .form-row label{color:var(--on-royal-2)}
.on-royal .form-row select,.on-royal .form-row input,.section--navy .form-row select,.section--navy .form-row input{
 border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.form-row select option{color:#111}
.calc-panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:28px}
.calc-panel h3{color:#fff;margin-bottom:16px}
.calc-panel .btn{width:100%;margin-top:6px}
.calc-result{margin-top:16px;padding:14px;border-radius:10px;background:rgba(6,223,254,.14);
 border:1px solid rgba(6,223,254,.32);font-size:.88rem;color:#fff}
.calc-result strong{color:var(--cyan-400);font-size:1.3rem}

/* ---- Contact form (light-context variant of .form-row) ---- */
.contact-form .form-row label{color:var(--text)}
.contact-form .form-row input,.contact-form .form-row textarea{
 width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--brd);
 background:var(--bg-2);color:var(--text);font-size:.92rem;font-family:inherit;
 transition:border-color .2s,box-shadow .2s}
.contact-form .form-row textarea{resize:vertical;min-height:140px}
.contact-form .form-row input:focus,.contact-form .form-row textarea:focus{
 outline:none;border-color:var(--cyan-500);box-shadow:0 0 0 3px rgba(6,223,254,.28)}
.contact-form .form-row--cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-error{color:#c0392b;font-size:.8rem;margin-top:5px}
.form-alert{padding:14px 18px;border-radius:10px;font-size:.9rem;margin-bottom:24px}
.form-alert--success{background:rgba(16,163,74,.12);border:1px solid rgba(16,163,74,.32);color:#0d7a3d}
.form-alert--error{background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.3);color:#a02020}

.contact-info__item{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.contact-info__item svg{width:20px;height:20px;flex-shrink:0;color:var(--acc2-ink);margin-top:2px}
.contact-social{display:flex;gap:12px;margin-top:24px}
.contact-social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 background:var(--bg-2);border:1px solid var(--brd);color:var(--text);transition:all .25s var(--ease)}
.contact-social a:hover{background:var(--navy-600);color:#fff;border-color:var(--navy-600)}
.contact-social svg{width:18px;height:18px}
@media (max-width:640px){.contact-form .form-row--cols{grid-template-columns:1fr}}

/* ---- Account Opening wizard ---- */
.aof-progress{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:32px}
.aof-step-ind{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 10px;position:relative}
.aof-step-ind .aof-circle{width:32px;height:32px;border-radius:50%;background:var(--bg-2);border:2px solid var(--brd);
 display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;color:var(--subtle);transition:all .3s var(--ease)}
.aof-step-ind .aof-step-label{font-size:.7rem;color:var(--subtle);text-align:center;max-width:80px}
.aof-step-ind.is-active .aof-circle{background:var(--navy-600);border-color:var(--navy-600);color:#fff}
.aof-step-ind.is-active .aof-step-label{color:var(--text);font-weight:700}
.aof-step-ind.is-done .aof-circle{background:var(--cyan-500);border-color:var(--cyan-500);color:#012}

.aof-wrap{max-width:880px;margin:0 auto;background:var(--elev);border-radius:var(--r-lg);box-shadow:var(--sh2);padding:36px}
@media (max-width:640px){.aof-wrap{padding:24px 18px}}
.aof-section-title{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:800;color:var(--text);margin-bottom:20px}
.aof-section-title svg{width:20px;height:20px;color:var(--acc2-ink)}

.aof-field{margin-bottom:16px}
.aof-field label{display:block;font-size:.82rem;color:var(--text);margin-bottom:6px;font-weight:600}
.aof-field .req{color:#c0392b}
.aof-field select,.aof-field input:not([type=file]),.aof-field textarea{
 width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--brd);
 background:var(--bg-2);color:var(--text);font-size:.92rem;font-family:inherit;
 transition:border-color .2s,box-shadow .2s}
.aof-field textarea{resize:vertical;min-height:100px}
.aof-field select:focus,.aof-field input:focus,.aof-field textarea:focus{
 outline:none;border-color:var(--cyan-500);box-shadow:0 0 0 3px rgba(6,223,254,.28)}
.aof-field .aof-error{display:none;color:#c0392b;font-size:.78rem;margin-top:5px}
.aof-field.is-invalid select,.aof-field.is-invalid input,.aof-field.is-invalid textarea{border-color:#c0392b}
.aof-field.is-invalid .aof-error{display:block}
.aof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px}
@media (max-width:640px){.aof-grid{grid-template-columns:1fr}}

.aof-upload-zone{border:2px dashed var(--brd);border-radius:10px;padding:20px 16px;text-align:center;
 background:var(--bg-2);cursor:pointer;transition:all .3s var(--ease);display:block}
.aof-upload-zone:hover,.aof-upload-zone.is-dragover{border-color:var(--cyan-500);background:rgba(6,223,254,.05)}
.aof-upload-zone.has-file{border-color:var(--navy-600);border-style:solid;background:rgba(1,0,164,.03)}
.aof-upload-zone svg{width:26px;height:26px;color:var(--subtle);margin-bottom:6px}
.aof-upload-zone:hover svg{color:var(--cyan-600)}
.aof-upload-hint{font-size:.78rem;color:var(--subtle)}
.aof-upload-filename{font-size:.78rem;color:var(--navy-600);font-weight:700;margin-top:4px}

.aof-nav{display:flex;justify-content:space-between;margin-top:32px;padding-top:20px;border-top:1px solid var(--brd)}
.aof-server-error{margin-bottom:20px;padding:14px 16px;border-radius:10px;background:rgba(192,57,43,.08);
 border:1px solid rgba(192,57,43,.28);color:#a02020;font-size:.85rem;display:none}

.aof-success{text-align:center;padding:48px 16px;display:none}
.aof-success-icon{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--navy-600),var(--cyan-500));
 display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px}
.aof-success-icon svg{width:34px;height:34px;color:#fff}
.aof-success p{color:var(--subtle);max-width:440px;margin:12px auto}
.aof-ref-box{display:inline-block;padding:12px 20px;border-radius:10px;background:rgba(16,163,74,.1);
 border:1px solid rgba(16,163,74,.3);margin-top:12px}
.aof-ref-box span{font-size:.78rem;color:#0d7a3d}
.aof-ref-box strong{display:block;font-size:1.1rem;color:var(--navy-600);letter-spacing:1px;margin-top:2px}

/* ===== Whistleblowing (Phase 8) ===== */
.wb-assurances{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin:36px 0 8px}
.wb-assurance{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-md);padding:20px}
.wb-assurance svg{width:22px;height:22px;color:var(--cyan-600);margin-bottom:10px}
.wb-assurance h3{font-size:.98rem;margin:0 0 6px}
.wb-assurance p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.6}

.wb-escalation{background:var(--bg-2);border:1px solid var(--brd);border-radius:var(--r-md);padding:22px 24px;margin-top:28px}
.wb-escalation h3{font-size:1rem;margin:0 0 8px}
.wb-escalation p,.wb-escalation li{font-size:.86rem;color:var(--muted);line-height:1.7}
.wb-escalation ul{margin:8px 0 0;padding-left:20px}

.wb-form{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-lg);box-shadow:var(--sh2);padding:36px;margin-top:40px}
.wb-form h3.wb-legend,.wb-form .wb-legend{font-size:1.05rem;margin:28px 0 14px;font-weight:700;padding:0}
.wb-form h3.wb-legend:first-of-type{margin-top:0}
.wb-fieldset{border:0;padding:0;margin:0}
.wb-hint{font-size:.82rem;color:var(--subtle);margin:-4px 0 12px;line-height:1.6}

.wb-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
@media(max-width:560px){.wb-modes{grid-template-columns:1fr}}
.wb-mode{position:relative;border:1.5px solid var(--brd);border-radius:var(--r-sm);padding:16px 16px 16px 44px;cursor:pointer;transition:border-color .2s,background .2s}
.wb-mode:hover{border-color:var(--cyan-400)}
.wb-mode input{position:absolute;left:16px;top:18px;accent-color:var(--navy-600)}
.wb-mode:has(input:checked){border-color:var(--navy-600);background:rgba(1,0,164,.03)}
.wb-mode b{display:block;font-size:.9rem;margin-bottom:3px}
.wb-mode span{font-size:.8rem;color:var(--subtle);line-height:1.5}

.wb-identity{margin-top:14px;padding:18px;border:1px dashed var(--brd);border-radius:var(--r-sm);background:var(--bg-2)}
.wb-identity[hidden]{display:none}

.wb-check{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:.86rem;color:var(--muted);line-height:1.6}
.wb-check input{margin-top:3px;accent-color:var(--navy-600);flex-shrink:0}

.wb-file-list{list-style:none;padding:0;margin:8px 0 0;font-size:.82rem;color:var(--navy-600)}
.wb-file-list li{padding:2px 0}

/* Portal / status */
.wb-status-card{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-lg);box-shadow:var(--sh2);padding:32px;margin-top:32px}
.wb-status-row{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0 4px;font-size:.88rem}
.wb-status-row dt{color:var(--subtle)}
.wb-status-row dd{margin:0;font-weight:600}
.wb-pill{display:inline-block;padding:5px 13px;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;
 background:rgba(6,223,254,.14);color:var(--cyan-800);border:1px solid rgba(6,223,254,.35)}
:root:not([data-theme="light"]) .wb-pill{color:var(--cyan-200)}

.wb-thread{margin-top:24px;border-top:1px solid var(--brd);padding-top:20px}
.wb-msg{padding:12px 14px;border-radius:var(--r-sm);margin-bottom:10px;font-size:.88rem;line-height:1.6;max-width:85%}
.wb-msg time{display:block;font-size:.72rem;color:var(--subtle);margin-bottom:4px}
.wb-msg--reporter{background:var(--bg-2);border:1px solid var(--brd);margin-left:auto}
.wb-msg--committee{background:rgba(1,0,164,.05);border:1px solid rgba(1,0,164,.16)}
:root:not([data-theme="light"]) .wb-msg--committee{background:rgba(100,233,255,.08);border-color:rgba(100,233,255,.2)}
.wb-thread-empty{font-size:.85rem;color:var(--subtle);padding:8px 0}


/* ==========================================================================
   v3 HOMEPAGE
   ========================================================================== */

/* ---- Hero: headline + live repayment calculator ---- */
.home-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center;
 padding-block:clamp(44px,6vw,84px) clamp(56px,7vw,96px)}
.home-hero__copy{display:grid;gap:20px;min-width:0}
.home-hero__copy .eyebrow{margin:0}
.home-hero h2{font-size:clamp(2.4rem,1.5rem + 3.4vw,4rem);font-weight:600;color:#fff;letter-spacing:-.025em;margin:0}
.home-hero h2 em{font-style:normal;color:var(--cyan-400)}

/* ---- Welcome-banner slider (modelled on unioffa.edu.ng) ----
   Full-bleed photos cross-fade under a royal overlay (dense on the copy
   side, lighter on the right) with a slow zoom; copy slides stack in one
   grid cell so the banner never changes height between slides. */
.home-hero{overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;background:var(--royal)}
.hero-bg::after{content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(1,0,80,.93) 0%,rgba(1,0,164,.80) 48%,rgba(1,0,164,.52) 100%),
            linear-gradient(0deg,rgba(1,0,60,.45) 0%,transparent 40%)}
.hero-bg__slide{display:block;position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero-bg__slide.is-active{opacity:1}
.hero-bg__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 8s linear}
.hero-bg__slide.is-active img{transform:scale(1)}
.hero-slides{display:grid}
.hero-slide{grid-area:1/1;display:grid;gap:20px;align-content:start;opacity:0;visibility:hidden;transform:translateY(26px);
 transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.hero-slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease .2s,transform .7s ease .2s,visibility 0s}
.hero-slide .eyebrow{margin:0}
.hero-controls{display:flex;align-items:center;gap:14px;margin-top:6px}
.hero-arrow{width:48px;height:48px;flex:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);
 color:#fff;display:grid;place-items:center;cursor:pointer;transition:all .5s ease-in-out}
.hero-arrow:hover,.hero-arrow:focus-visible{background:#fff;border-color:#fff;color:var(--royal)}
.hero-arrow svg{width:20px;height:20px}
.hero-dots{display:flex;gap:8px}
.hero-dot{position:relative;width:36px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.hero-dot::before,.hero-dot span{content:"";position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;border-radius:99px}
.hero-dot::before{background:rgba(255,255,255,.3);transition:background .3s}
.hero-dot:hover::before{background:rgba(255,255,255,.55)}
.hero-dot span{background:var(--cyan-400);transform:scaleX(0);transform-origin:left}
.hero-dot.is-active span{animation:hero-progress var(--hero-interval,5000ms) linear forwards}
.home-hero.is-paused .hero-dot.is-active span{animation-play-state:paused}
@keyframes hero-progress{to{transform:scaleX(1)}}
.hero-pause{width:36px;height:36px;flex:none;border-radius:50%;border:0;background:transparent;color:rgba(255,255,255,.75);
 display:grid;place-items:center;cursor:pointer;transition:color .3s}
.hero-pause:hover{color:#fff}
.hero-pause svg{width:16px;height:16px}
.hero-pause .i-play,.home-hero.is-stopped .hero-pause .i-pause{display:none}
.home-hero.is-stopped .hero-pause .i-play{display:block}
@media (prefers-reduced-motion:reduce){
 .hero-bg__slide img{transform:none!important;transition:none}
 .hero-slide{transform:none}
 .hero-dot.is-active span{animation:none;transform:scaleX(1)}
}
.home-hero .lede{margin:0}
.home-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.home-hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;color:var(--on-royal-2);font-size:.93rem;margin-top:4px}
.home-hero__facts li{display:flex;align-items:center;gap:8px}
.home-hero__facts svg{color:var(--cyan-400);flex:none;width:18px;height:18px}

.calc{background:var(--elev);color:var(--text);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);
 box-shadow:0 30px 80px rgba(1,0,60,.38);display:grid;gap:18px;min-width:0}
.calc h3{font-size:1.2rem;font-weight:700;color:var(--text)}
.calc__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc__head span{font-size:.8rem;color:var(--subtle)}
.calc__products{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.calc__products legend{grid-column:1/-1;font-size:.86rem;font-weight:600;color:var(--muted);margin-bottom:8px;padding:0}
.calc__products input{position:absolute;opacity:0;pointer-events:none}
.calc__products label{display:grid;gap:2px;padding:11px 12px;border-radius:var(--r-sm);border:1.5px solid var(--brd);
 cursor:pointer;transition:border-color .2s,background .2s;min-width:0}
.calc__products label b{font-family:var(--font-display);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.calc__products label small{font-size:.76rem;color:var(--subtle);line-height:1.3}
.calc__products input:checked+label{border-color:var(--acc2-ink);background:color-mix(in srgb,var(--acc2-ink) 8%,transparent)}
.calc__products input:focus-visible+label{outline:3px solid var(--cyan-600);outline-offset:2px}
.calc__field{display:grid;gap:8px}
.calc__field-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.calc__field label{font-size:.86rem;font-weight:600;color:var(--muted)}
.calc__field output{font-weight:700;font-variant-numeric:tabular-nums}
.calc__money{display:flex;align-items:center;border:1.5px solid var(--brd);border-radius:var(--r-sm);padding-inline:14px;background:var(--bg)}
.calc__money:focus-within{border-color:var(--acc2-ink)}
.calc__money span{color:var(--subtle);font-weight:600}
.calc__money input{border:0;background:none;color:var(--text);font:700 1.2rem var(--font-body);padding:12px 8px;width:100%;min-width:0;
 font-variant-numeric:tabular-nums;outline:none}
.calc input[type=range]{width:100%;accent-color:var(--acc2-ink)}
.calc__result{border-top:1px dashed var(--brd);padding-top:18px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin:0}
.calc__result div{display:grid;gap:2px;min-width:0}
.calc__result dt{font-size:.74rem;color:var(--subtle);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.calc__result dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calc__result .calc__big{font-family:var(--font-display);font-size:1.85rem;font-weight:600;color:var(--acc2-ink);letter-spacing:-.02em;line-height:1.1}
.calc__foot{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.calc__foot p{font-size:.78rem;color:var(--subtle);max-width:30ch;margin:0}
.calc__foot .btn{padding:12px 18px;font-size:.92rem}
@media (max-width:460px){
 .calc__products{grid-template-columns:1fr}
 .calc__products label{grid-template-columns:auto 1fr;align-items:center;gap:12px}
 .calc__result{grid-template-columns:1fr 1fr}
 .calc__result div:first-child{grid-column:1/-1}
}

/* Photo that straddles the royal edge */
.home-photo{margin-top:calc(-1 * var(--hero-overlap,clamp(112px,12vw,162px)));position:relative;z-index:2}
.home-photo figure{margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:21/8;max-width:100%;box-shadow:0 24px 60px rgba(1,0,60,.2);position:relative;background:var(--bg-2)}
.home-photo picture,.home-photo img{display:block;width:100%;height:100%}
.home-photo img{object-fit:cover}
.home-photo figcaption{position:absolute;left:20px;bottom:20px;right:20px;display:flex;flex-wrap:wrap;gap:8px}
.home-photo .tag{background:rgba(255,255,255,.93);color:var(--slate-900);font-size:.82rem;font-weight:600;padding:7px 13px;border-radius:999px}
@media (max-width:640px){.home-photo figure{aspect-ratio:4/3}}

/* Trust row under the photo */
.home-trust{padding:40px 0 8px}
.home-trust .container{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px;align-items:center}
.home-trust p{font-size:.93rem;margin:0}
.home-trust p strong{color:var(--text);display:block;font-size:1rem}
.home-trust .trust-strip__logos{justify-content:flex-start}
@media (max-width:860px){.home-trust .container{grid-template-columns:1fr}}

/* Left-aligned section heads for the homepage */
.head-l{display:grid;gap:12px;margin-bottom:40px;max-width:780px}
.head-l h2,.head-l p,.head-l .eyebrow{margin:0}
.head-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;margin-bottom:40px}
.head-row .head-l{margin:0}
@media (max-width:720px){.head-row{grid-template-columns:1fr}}

/* Three paths */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.path{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-md);padding:28px;display:grid;gap:14px;align-content:start;
 transition:border-color .25s,transform .25s var(--ease)}
.path:hover{border-color:var(--acc2-ink);transform:translateY(-2px)}
.path .card__icon{margin:0}
.path h3,.path p{margin:0}
.path ul{list-style:none;margin:4px 0 0;border-top:1px solid var(--brd)}
.path li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--brd);font-size:.95rem}
.path li span:last-child{color:var(--subtle);font-variant-numeric:tabular-nums;text-align:right}
.path .card__link{margin-top:2px}

/* Rate table */
.rates-wrap{overflow-x:auto;border:1px solid var(--brd);border-radius:var(--r-md);background:var(--elev)}
.rates{width:100%;border-collapse:collapse;min-width:720px}
.rates th,.rates td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--brd);vertical-align:top}
.rates thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--subtle);font-weight:700;background:var(--bg-2)}
.rates tbody tr:last-child td{border-bottom:0}
.rates tbody tr:hover{background:color-mix(in srgb,var(--acc2-ink) 4%,transparent)}
.rates td:first-child{font-weight:600}
.rates__rate{font-family:var(--font-display);font-size:1.45rem;font-weight:600;color:var(--acc2-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rates__rate small{font:500 .8rem var(--font-body);color:var(--subtle)}
.rates__muted{color:var(--subtle);font-size:.93rem}
.rates__who{color:var(--muted);font-size:.95rem;max-width:46ch}
.rates td:last-child{text-align:right;white-space:nowrap}
.rates-note{margin-top:14px;font-size:.86rem;color:var(--subtle)}

/* Homes rail */
.homes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.home-card{scroll-snap-align:start;display:grid;gap:14px;min-width:0;align-content:start}
.home-card figure{margin:0;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;max-width:100%;background:var(--bg-2)}
.home-card picture,.home-card img{display:block;width:100%;height:100%}
.home-card img{object-fit:cover;transition:transform .8s var(--ease)}
.home-card:hover img{transform:scale(1.04)}
.home-card__kind{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2-ink)}
.home-card h3{margin:4px 0 2px}
.home-card p{color:var(--subtle);font-size:.93rem;margin:0}

/* Mortgage journey */
.journey-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.journey-photo{margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;max-width:100%;background:var(--bg-2)}
.journey-photo picture,.journey-photo img{display:block;width:100%;height:100%}
.journey-photo img{object-fit:cover}
.journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;counter-reset:step;border-top:2px solid var(--text)}
.journey li{padding:22px 22px 22px 0;display:grid;gap:8px;align-content:start;counter-increment:step}
.journey li::before{content:"Step " counter(step);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2-ink)}
.journey h3,.journey p{margin:0}
.journey p{font-size:.95rem}
.nhf-note{margin-top:28px;padding:20px 22px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--brd);display:grid;gap:6px}
.section--muted .nhf-note{background:var(--elev)}
.nhf-note strong{font-family:var(--font-display);font-size:1.05rem}
.nhf-note p{margin:0;font-size:.95rem}

/* Everyday banking band */
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.feature-list{list-style:none;margin:28px 0 0}
.feature-list li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
.feature-list svg{color:var(--cyan-400);margin-top:3px;width:22px;height:22px}
.feature-list b{display:block;color:#fff;font-weight:600}
.feature-list span{color:var(--on-royal-2);font-size:.95rem}
.dialpad{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);display:grid;gap:16px}
.dialpad>p{margin:0;font-size:.95rem}
.codes{display:grid;gap:10px}
.code{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:rgba(1,0,60,.38);border-radius:14px;padding:14px 16px}
.code div{min-width:0}
.code small{display:block;color:var(--on-royal-2);font-size:.82rem}
.code code{font:600 1.05rem/1.4 var(--font-mono);color:var(--cyan-200);overflow-wrap:anywhere}
.code-copy{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:7px 13px;font:600 .82rem var(--font-body);cursor:pointer}
.code-copy:hover{background:rgba(255,255,255,.1)}
.scam-note{font-size:.86rem;color:var(--on-royal-2);border-left:2px solid var(--cyan-400);padding-left:12px;margin:0}

/* Investors */
.inv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px)}
.inv-intro{display:grid;gap:14px;align-content:start}
.inv-intro h2,.inv-intro p,.inv-intro .eyebrow{margin:0}
.inv-links{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--brd)}
.inv-links a{display:grid;gap:6px;padding:22px 22px 22px 0;border-bottom:1px solid var(--brd);align-content:start}
.inv-links a:hover h3{color:var(--acc2-ink)}
.inv-links h3,.inv-links p{margin:0}
.inv-links p{font-size:.95rem}
.inv-links__meta{font-size:.76rem;color:var(--subtle);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* Branches */
.branch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.branch{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-md);padding:22px;display:grid;gap:6px;align-content:start}
.branch__flag{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc2-ink)}
.branch__town{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--text)}
.branch p{margin:0;font-size:.93rem}
.branch__hours{color:var(--subtle);font-size:.86rem;font-variant-numeric:tabular-nums}

/* News + press on the homepage reuse .card; the cover sits flush */
.news-card__cover{margin:-28px -26px 18px;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.news-card__cover img{width:100%;height:100%;object-fit:cover}
.news-card__date{font-size:.8rem;color:var(--subtle);margin-bottom:6px}

/* Closing card */
.closing-card{border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.closing-card__copy{padding:clamp(28px,5vw,56px);display:grid;gap:16px;align-content:center}
.closing-card__copy h2,.closing-card__copy p{margin:0}
.closing-card__copy p{max-width:46ch}
.closing-card figure{margin:0;min-height:260px}
.closing-card picture,.closing-card img{display:block;width:100%;height:100%}
.closing-card img{object-fit:cover}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Like unioffa, laptops keep the full horizontal menu: it tightens in steps
   (smaller links, then the header CTAs drop out below 1200px) and only
   collapses to the drawer on tablets/phones. */
@media (max-width:991px){
 .site-nav{display:none}
 .nav-toggle{display:block}
}
@media (max-width:980px){
 .split,.home-hero__grid,.journey-wrap,.band-grid,.inv,.closing-card{grid-template-columns:1fr}
 .grid--3,.grid--4,.paths,.branch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .paths{grid-template-columns:1fr}
 .journey{grid-template-columns:repeat(2,minmax(0,1fr))}
 .journey-photo{aspect-ratio:16/9}
}
@media (max-width:640px){
 .grid--2,.grid--3,.grid--4,.branch-grid,.journey,.inv-links{grid-template-columns:1fr}
 .cta-banner__content{padding:32px 24px}
}
@media (max-width:991px){.site-header__inner{min-height:80px}.site-header__brand img{height:52px}}
@media (max-width:600px){
 .site-header__actions .btn{display:none}
 .site-header__inner{min-height:68px}
 .site-header__brand img{height:46px}
}
/* Rate table becomes one card per product on phones. */
@media (max-width:640px){
 .rates-wrap{border:0;background:none;overflow:visible}
 .rates{min-width:0}
 .rates thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .rates,.rates tbody,.rates tr,.rates td{display:block;width:100%}
 .rates tr{background:var(--elev);border:1px solid var(--brd);border-radius:var(--r-md);padding:18px;margin-bottom:12px;
  display:grid;grid-template-columns:1fr auto;gap:4px 12px}
 .rates td{padding:0;border:0;text-align:left!important;max-width:none}
 .rates td:first-child{grid-column:1/-1;font-family:var(--font-display);font-size:1.1rem}
 .rates td:nth-child(3){grid-column:2;grid-row:2;align-self:center;color:var(--subtle);font-size:.9rem}
 .rates td:nth-child(4){grid-column:1/-1;margin-top:6px}
 .rates td:last-child{grid-column:1/-1;margin-top:6px}
}

/* Welcome banner is 70vh on laptops and desktops. The photo strip below
   overlaps its bottom edge by --hero-overlap, so the bottom padding
   reserves that space. Headline and calculator are tightened at this size
   so they fit; on screens too short even for that (under ~860px tall) the
   banner grows just enough to avoid clipping the calculator. */
@media (min-width:992px){
 :root{--hero-overlap:0px}
 .home-hero{min-height:70vh;min-height:70svh;display:flex;flex-direction:column;justify-content:center}
 .home-hero__grid{width:100%;align-items:center;padding-block:clamp(20px,3vh,48px) calc(var(--hero-overlap) + clamp(16px,2vh,32px))}
 .home-hero h2{font-size:clamp(2.2rem,1.2rem + 2.4vw,3.4rem)}
 .hero-slide,.home-hero__copy{gap:14px}
 .home-hero .lede{font-size:1.02rem}
 .calc{padding:20px 22px;gap:12px}
 .calc__products label{padding:8px 10px}
 .calc__products label b{font-size:1.1rem}
 .calc__products legend{margin-bottom:6px}
 .calc__field{gap:5px}
 .calc__money input{padding:8px;font-size:1.05rem}
 .calc__result{padding-top:12px}
 .calc__result .calc__big{font-size:1.5rem}
 .calc__foot .btn{padding:10px 16px}
}

/* ==========================================================================
   M2 HOMEPAGE (2026-10-20): bento "what we offer", big-number facts, MD/CEO
   card, photo property cards, updates, and a closing band with branches.
   Calm, mature styling after premiumtrustbank.com: big rounded photo cards,
   generous space, few borders.
   ========================================================================== */
.home-trust{padding:44px 0 4px}
.trust-logo{filter:grayscale(1);opacity:.7;transition:filter .4s,opacity .4s,transform .4s}
.trust-logo:hover{filter:none;opacity:1}

/* --- Bento grid --- */
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,minmax(280px,auto));gap:18px}
.bento-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);color:#fff;display:flex;align-items:flex-end;
 min-height:280px;background:var(--royal-deep)}
.bento-card--lg{grid-row:span 2}
.bento-card picture{position:absolute;inset:0;z-index:-2}
.bento-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.bento-card:hover img{transform:scale(1.06)}
.bento-card::after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(180deg,rgba(11,12,26,.05) 0%,rgba(11,12,26,.35) 40%,rgba(11,12,26,.82) 72%,rgba(11,12,26,.94) 100%)}
.bento-card__body{display:grid;gap:8px;padding:clamp(22px,2.4vw,32px);max-width:46ch}
.bento-card__tag{font-size:.8rem;font-weight:600;color:var(--cyan-300)}
.bento-card h3{color:#fff;font-size:clamp(1.25rem,1rem + .7vw,1.6rem);font-weight:600;margin:0}
.bento-card--lg h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem)}
.bento-card p{color:rgba(255,255,255,.82);margin:0;font-size:.95rem}
.bento-card p b{color:#fff;font-weight:600}
.bento-card .link-more{color:#fff;margin-top:6px;justify-self:start}
.bento-card:hover .link-more{background-size:calc(100% - 24px) 1.5px}
.bento-card:hover .link-more svg{transform:translateX(4px)}
.bento-card--cta{background:var(--royal);align-items:stretch}
.bento-card--cta::after{background:radial-gradient(circle at 100% 0%,rgba(6,223,254,.28),transparent 55%)}
.bento-card--cta .bento-card__body{align-content:end}
.bento-card--cta:hover{background:var(--royal-deep)}
.bento-card:focus-visible{outline:3px solid var(--cyan-600);outline-offset:3px}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr;grid-template-rows:none}.bento-card--lg{grid-row:auto;grid-column:1/-1;min-height:360px}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bento-card{min-height:300px}}

/* --- Quick links: round icon buttons (premiumtrustbank.com style) --- */
.quick-links{padding:clamp(28px,4vw,48px) 0 0}
.ql{list-style:none;display:flex;justify-content:space-around;gap:24px;overflow-x:auto;scrollbar-width:none;padding:12px 4px 4px}
.ql::-webkit-scrollbar{display:none}
.ql li{flex:none}
.ql a{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:100px;text-align:center;color:var(--text)}
.ql__circle{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:#fff;
 box-shadow:0 0 10px rgba(0,0,0,.15);transition:background .4s ease,transform .4s ease,box-shadow .4s ease}
.ql__circle svg{width:50px;height:50px}
.ql__circle svg *{transition:stroke .3s ease}
.ql__label{font-size:.92rem;font-weight:500}
.ql a:hover .ql__circle,.ql a:focus-visible .ql__circle{background:var(--royal);transform:translateY(-4px);box-shadow:0 14px 30px rgba(1,0,164,.28)}
.ql a:hover .ql__circle svg *,.ql a:focus-visible .ql__circle svg *{stroke:#fff}
.ql a:focus-visible{outline:none}
.ql a:focus-visible .ql__label{text-decoration:underline}
:root[data-theme="dark"] .ql__circle{background:var(--elev);box-shadow:0 0 0 1px var(--brd)}
@media (max-width:760px){.ql{justify-content:flex-start}.ql__circle{width:80px;height:80px}.ql__circle svg{width:36px;height:36px}.ql__label{font-size:.82rem}}

/* --- Snapshot cards: "LivingTrust in numbers" (premiumtrustbank.com style)
   Uniform 350px cards, 16px radius; a big 80px figure with its unit set
   beside it on the baseline; text sits from 30% down, 48px in. --- */
.snap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.snap-card{position:relative;isolation:isolate;overflow:hidden;height:350px;border-radius:16px;color:#fff;display:block}
.snap-card__body{position:absolute;left:0;right:0;top:30%;padding:0 48px;display:grid;gap:6px;justify-items:start}
.snap-card__fig{display:flex;align-items:baseline;gap:10px;margin:0;color:#fff;line-height:1}
.snap-card__fig b{font-size:80px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.snap-card__fig span{font-size:20px;font-weight:500}
.snap-card__sub{margin:6px 0 0;color:rgba(255,255,255,.85);font-size:1.12rem;line-height:1.4;max-width:28ch}
.snap-card__more{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:600;font-size:.95rem;color:#fff;
 background:linear-gradient(currentColor,currentColor) left bottom/0 1.5px no-repeat;padding-bottom:3px;transition:background-size .4s ease}
.snap-card__more svg{width:16px;height:16px;transition:transform .4s ease}
.snap-card:hover .snap-card__more{background-size:calc(100% - 24px) 1.5px}
.snap-card:hover .snap-card__more svg{transform:translateX(4px)}
/* Brand: royal gradient (theirs is red to dark red). */
.snap-card--brand{background:linear-gradient(180deg,#0100a4,#01004c)}
.snap-card--brand::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s ease;
 background:linear-gradient(180deg,#170fb8,#01006a)}
.snap-card--brand:hover::before{opacity:1}
/* Photo: image with a dark bottom fade. */
.snap-card--photo{background:var(--ink)}
.snap-card--photo picture{position:absolute;inset:0;z-index:-2}
.snap-card--photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.snap-card--photo:hover img{transform:scale(1.06)}
.snap-card--photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,12,26,.45),rgba(11,12,26,.88))}
/* Dark: near-black with a large faint mark. */
.snap-card--dark{background:#0c111b}
.snap-card__mark{position:absolute;right:-30px;bottom:-30px;z-index:-1;color:rgba(100,233,255,.08);transition:transform .8s cubic-bezier(.22,1,.36,1),color .5s}
.snap-card__mark svg{width:220px;height:220px}
.snap-card--dark:hover .snap-card__mark{transform:rotate(-8deg) scale(1.05);color:rgba(100,233,255,.14)}
/* Call to action: centred, like their dark "open an account" card. */
.snap-card--cta{background:#0c111b;display:grid;place-items:center;text-align:center}
.snap-card__center{display:grid;gap:10px;justify-items:center;padding:0 32px}
.snap-card__center h3{color:#fff;font-size:1.5rem;font-weight:600;margin:0}
.snap-card__center p{color:rgba(255,255,255,.8);margin:0 0 8px;font-size:1.05rem}
.snap-card:focus-visible{outline:3px solid var(--cyan-600);outline-offset:3px}
@media (max-width:980px){.snap{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.snap{grid-template-columns:1fr}.snap-card{height:300px}.snap-card__body{padding:0 28px;top:24%}.snap-card__fig b{font-size:64px}}

/* --- Rates: lighter table --- */
.rates-wrap{border:0;border-radius:var(--r-lg);box-shadow:0 1px 0 var(--brd)}
.rates thead th{background:transparent;font-weight:600;letter-spacing:.04em}
.rates th,.rates td{padding:20px 22px}
.rates td .link-more{font-size:.92rem}

/* --- MD/CEO --- */
.md-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border-radius:var(--r-xl);overflow:hidden;background:var(--bg-2)}
.md-card__photo{margin:0;min-height:380px;background:var(--royal-deep)}
.md-card__photo picture,.md-card__photo img{display:block;width:100%;height:100%}
.md-card__photo img{object-fit:cover;object-position:center 20%}
.md-card__body{display:grid;gap:18px;align-content:center;justify-items:start;padding:clamp(28px,5vw,64px)}
.md-card__body .eyebrow,.md-card__body h2,.md-card__body p{margin:0}
.md-card__quote{margin:0;font-size:clamp(1.3rem,1rem + 1vw,1.85rem);line-height:1.35;font-weight:500;color:var(--text);letter-spacing:-.015em}
.md-card__quote p{margin:0;color:inherit}
.md-card__name{display:grid;gap:2px;padding-top:14px;border-top:1px solid var(--brd);justify-self:stretch}
.md-card__name b{font-weight:600;color:var(--text)}
.md-card__name span{font-size:.92rem;color:var(--muted)}
:root[data-theme="dark"] .md-card{background:var(--elev)}
@media (max-width:860px){.md-card{grid-template-columns:1fr}.md-card__photo{min-height:0;aspect-ratio:4/3}}

/* --- Journey: big step numbers --- */
.journey{border-top:1px solid var(--brd)}
.journey li::before{content:"0" counter(step);font-size:2.4rem;font-weight:600;letter-spacing:-.03em;text-transform:none;color:var(--royal);line-height:1}
:root[data-theme="dark"] .journey li::before{color:var(--cyan-300)}

/* --- Homes: name over a tall photo --- */
.home-card{position:relative;isolation:isolate;border-radius:var(--r-xl);overflow:hidden;color:#fff;display:block;min-height:380px}
.home-card figure{position:absolute;inset:0;z-index:-2;aspect-ratio:auto;border-radius:0}
.home-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 40%,rgba(11,12,26,.85))}
.home-card__body{position:absolute;left:0;right:0;bottom:0;padding:24px;display:grid;gap:4px}
.home-card__kind{color:var(--cyan-300);letter-spacing:0;text-transform:none;font-weight:600;font-size:.8rem}
.home-card h3{color:#fff;margin:0}
.home-card p{color:rgba(255,255,255,.78)}
.home-card:hover img{transform:scale(1.06)}

/* --- Updates and insights --- */
.updates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(24px,4vw,48px);align-items:start}
.updates:not(:has(.updates__press)){grid-template-columns:1fr}
.updates__posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.post-card{display:grid;gap:10px;align-content:start;color:var(--text)}
.post-card__cover{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,var(--royal),var(--royal-deep))}
.post-card__cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.post-card:hover .post-card__cover img{transform:scale(1.05)}
.post-card h3{font-size:1.1rem;margin:0;line-height:1.35}
.post-card .news-card__date{margin:4px 0 0}
.post-card .link-more{justify-self:start}
.post-card:hover .link-more{background-size:calc(100% - 24px) 1.5px}
.post-card:hover .link-more svg{transform:translateX(4px)}
.updates__press h3{font-size:1rem;margin-bottom:14px}
.updates__press ul{list-style:none;display:grid}
.updates__press li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--brd)}
.updates__press li a,.updates__press li>span:last-child{color:var(--text);font-weight:500;font-size:.95rem;line-height:1.45}
.updates__press li a:hover{color:var(--acc-ink)}
@media (max-width:900px){.updates{grid-template-columns:1fr}}

/* --- Closing band with branches --- */
.close-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center;
 padding:clamp(32px,5vw,64px);border-radius:var(--r-xl);overflow:hidden}
.close-band__copy{display:grid;gap:16px}
.close-band__copy .eyebrow,.close-band__copy h2,.close-band__copy p{margin:0}
.close-band__copy p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.close-band__copy .home-hero__ctas{align-items:center;gap:24px}
.close-band__branches{display:grid;gap:18px;justify-items:start}
.close-band__branches ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-self:stretch}
.close-band__branches li{display:grid;gap:3px;align-content:start;padding:16px 18px;border-radius:var(--r-md);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.close-band__branches .branch__flag{font-size:.75rem;color:var(--cyan-300);font-weight:600;letter-spacing:0;text-transform:none}
.close-band__branches b{color:#fff;font-size:1.1rem;font-weight:600}
.close-band__branches li>span:last-child{font-size:.85rem;color:rgba(255,255,255,.72);line-height:1.45}
@media (max-width:900px){.close-band{grid-template-columns:1fr}}
@media (max-width:480px){.close-band__branches ul{grid-template-columns:1fr}}
/* No news posts yet: press mentions become a row of cards instead of a sidebar. */
.updates--press-only{grid-template-columns:1fr}
.updates--press-only .updates__press>h3{display:none}
.updates--press-only .updates__press ul{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.updates--press-only .updates__press li{border:0;padding:24px;border-radius:var(--r-lg);background:var(--elev);align-content:start;gap:10px}

/* ==========================================================================
   M3 NAVIGATION POLISH (2026-10-20)
   ========================================================================== */
/* Thin underline that slides in under menu links on hover / current page. */
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:24px;height:2px;border-radius:2px;background:currentColor;
 transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
button.nav-link::after{right:17px}
.nav-link:hover::after,.nav-item:hover>.nav-link::after,.nav-link[aria-current="page"]::after,.nav-link.is-current::after{transform:scaleX(1)}
/* e-Banking pill, beside "Open an account". */
.nav-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--brd);
 font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;transition:border-color .3s,color .3s,background .3s}
.nav-pill svg{width:16px;height:16px}
.nav-pill:hover{border-color:var(--royal);color:var(--royal);background:color-mix(in srgb,var(--royal) 5%,transparent)}
:root[data-theme="dark"] .nav-pill:hover{border-color:var(--cyan-300);color:var(--cyan-300)}
@media (max-width:1440px){.site-header__actions .nav-pill{padding:9px 14px;font-size:14px}}
/* The full menu needs the room below 1400px; e-Banking stays in the menu drawer and footer. */
@media (max-width:1399px){.site-header__actions .nav-pill{display:none}}

/* Mobile menu extras: audience links and the app. */
.mob .mob-aud{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mob .mob-aud a{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.88rem}
.mob .mob-app{display:block;margin-top:18px;color:var(--cyan-300);font-weight:600;font-size:.92rem}
:root[data-theme="dark"] .site-footer{background:#05060f;border-top:1px solid var(--brd)}
/* Product cards are link targets (top bar "Business"/"NHF"); clear the sticky header. */
.card[id]{scroll-margin-top:110px}
/* Mobile menu sits above the floating WhatsApp/email/back-to-top buttons. */
.mob-backdrop{z-index:99}.mob{z-index:100}

/* ==========================================================================
   M4 INNER PAGES (2026-10-20): the homepage's calm, rounded look applied to
   the shared inner-page components. Soft grey cards without borders, round
   icon badges (like the homepage quick links), aligned card footers,
   document rows for Investors, cleaner FAQs, branch cards and forms.
   ========================================================================== */

/* Plain banners (pages without a photo): a quiet royal gradient instead of
   the blueprint grid. */
.page-hero:not(.page-hero--photo){background:linear-gradient(120deg,var(--royal) 0%,var(--royal-deep) 100%)}
.page-hero.blueprint::before{display:none}
.page-hero{padding-block:clamp(64px,8vw,112px)}

/* --- Cards --- */
.grid{gap:20px}
.card{display:flex;flex-direction:column;align-items:flex-start;background:var(--bg-2);border:0;border-radius:24px;padding:clamp(24px,2.6vw,34px);
 transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s}
.card:hover{border-color:transparent;transform:translateY(-4px);box-shadow:0 18px 44px rgba(13,14,46,.10);background:var(--elev)}
.card h3{font-size:1.2rem;font-weight:600;margin:0 0 8px}
.card p{font-size:.95rem}
.card__icon{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--royal);box-shadow:0 0 10px rgba(0,0,0,.12);
 display:grid;place-items:center;margin-bottom:22px;transition:background .4s,color .4s,transform .4s}
.card__icon svg{width:24px;height:24px}
.card:hover .card__icon{background:var(--royal);color:#fff;transform:translateY(-2px)}
.card__rate{font-size:2rem;font-weight:600;letter-spacing:-.03em;margin:6px 0 4px}
.card .card__link,.card > a.card__link:last-child{margin-top:auto;padding-top:18px}
:root[data-theme="dark"] .card{background:var(--elev)}
:root[data-theme="dark"] .card:hover{background:#1d2045}
:root[data-theme="dark"] .card__icon{background:var(--bg-2);color:var(--cyan-300);box-shadow:0 0 0 1px var(--brd)}

/* --- Board & management profiles --- */
.profile-card{padding:14px 14px 24px}
.profile-photo{border-radius:18px;aspect-ratio:4/4.3;margin-bottom:20px}
.profile-photo img{transition:transform .8s var(--ease)}
.profile-card:hover .profile-photo img{transform:scale(1.04)}
.profile-card h3,.profile-card p,.profile-card .profile-more{padding-inline:10px}
.profile-card__title{color:var(--muted);font-weight:500;font-size:.88rem}

/* --- FAQs: divider list with round plus buttons --- */
.faq-item{background:transparent;border:0;border-bottom:1px solid var(--brd);border-radius:0;margin:0}
.faq-item:first-of-type{border-top:1px solid var(--brd)}
.faq-item summary{padding:24px 4px;font-size:1.08rem;font-weight:600;gap:20px}
.faq-item summary svg{width:36px;height:36px;padding:9px;border-radius:50%;background:var(--bg-2);color:var(--royal);transition:transform .3s var(--ease),background .3s,color .3s}
.faq-item summary:hover svg{background:var(--royal);color:#fff}
.faq-item[open] summary svg{background:var(--royal);color:#fff}
.faq-item__body{padding:0 4px 26px;max-width:72ch}
:root[data-theme="dark"] .faq-item summary svg{background:var(--elev);color:var(--cyan-300)}

/* --- Branch cards --- */
.location-card{background:var(--bg-2);border:0;border-radius:24px;padding:28px}
.location-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(13,14,46,.10);background:var(--elev)}
.location-card__label{text-transform:none;letter-spacing:0;font-weight:600;font-size:.82rem}
:root[data-theme="dark"] .location-card{background:var(--elev)}

/* --- Forms --- */
.form-row label{font-weight:600;font-size:.9rem}
.form-row select,.form-row input:not([type=checkbox]):not([type=radio]):not([type=file]),.form-row textarea,
.contact-form .form-row input,.contact-form .form-row textarea{border-radius:12px;padding:14px 16px;background:var(--bg-2);border:1.5px solid transparent;
 transition:border-color .2s,background .2s,box-shadow .2s}
.form-row select:focus,.form-row input:focus,.form-row textarea:focus,
.contact-form .form-row input:focus,.contact-form .form-row textarea:focus{background:var(--elev);border-color:var(--royal);
 box-shadow:0 0 0 4px color-mix(in srgb,var(--royal) 14%,transparent)}
:root[data-theme="dark"] .form-row select,:root[data-theme="dark"] .form-row input:not([type=checkbox]):not([type=radio]):not([type=file]),
:root[data-theme="dark"] .form-row textarea{background:var(--elev);border-color:var(--brd)}
.contact-form{background:var(--bg-2);border:0;border-radius:24px;padding:clamp(24px,3vw,40px)}
.contact-form .form-row input,.contact-form .form-row textarea{background:var(--elev)}
.contact-info__item svg{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--bg-2);color:var(--royal)}

/* --- Investors: document rows --- */
.doc-group{margin-bottom:clamp(40px,5vw,64px)}
.doc-group > h3{font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem);font-weight:600;margin:0 0 20px}
.doc-year{font-size:.85rem;font-weight:600;color:var(--subtle);margin:22px 0 10px}
.doc-list{list-style:none;display:grid;gap:10px}
.doc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px 20px;border-radius:16px;
 background:var(--bg-2);color:var(--text);transition:background .3s,transform .3s,box-shadow .3s}
.doc-row:hover{background:var(--elev);transform:translateY(-2px);box-shadow:0 12px 30px rgba(13,14,46,.08)}
.doc-row__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--royal);
 font-size:.7rem;font-weight:700;letter-spacing:.04em;box-shadow:0 0 8px rgba(0,0,0,.08)}
.doc-row__title{display:grid;gap:2px;font-weight:600;font-size:.98rem;line-height:1.35}
.doc-row__title small{font-weight:400;color:var(--muted);font-size:.86rem}
.doc-row__dl{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:var(--royal);white-space:nowrap}
.doc-row__dl svg{width:16px;height:16px;transition:transform .3s}
.doc-row:hover .doc-row__dl svg{transform:translateY(2px)}
:root[data-theme="dark"] .doc-row{background:var(--elev)}
:root[data-theme="dark"] .doc-row__icon{background:var(--bg-2);color:var(--cyan-300)}
:root[data-theme="dark"] .doc-row__dl{color:var(--cyan-300)}
@media (max-width:560px){.doc-row{grid-template-columns:auto minmax(0,1fr)}.doc-row__dl{grid-column:2}}
/* Contact form sits on a grey panel, so its fields need an edge. */
.contact-form .form-row input:not([type=checkbox]):not([type=radio]):not([type=file]),.contact-form .form-row textarea{background:var(--elev);border-color:var(--brd)}

/* ==========================================================================
   M5 COMPLIANCE (2026-10-20): NDPR cookie consent + promo card
   ========================================================================== */
.consent{position:fixed;left:20px;bottom:20px;z-index:95;width:min(560px,calc(100vw - 40px));
 background:var(--elev);color:var(--text);border-radius:20px;box-shadow:0 24px 60px rgba(11,12,26,.28);border:1px solid var(--brd);
 padding:22px 24px;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease}
.consent.is-in{opacity:1;transform:none}
.consent__main{display:grid;gap:16px}
.consent__title{font-size:1.05rem;font-weight:600;margin:0 0 6px}
.consent__text p{margin:0;font-size:.9rem;line-height:1.55;color:var(--muted)}
.consent__text a{color:var(--acc-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.consent__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.consent__actions .btn{padding:10px 18px;font-size:14px}
.consent__more{border:0;background:none;color:var(--text);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
 text-decoration:underline;text-underline-offset:3px;padding:6px 4px}
.consent__prefs{display:grid;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--brd)}
.consent__opt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer}
.consent__opt input{width:20px;height:20px;margin-top:2px;accent-color:var(--royal)}
.consent__opt span{display:grid;gap:2px}
.consent__opt b{font-size:.92rem;font-weight:600}
.consent__opt small{font-size:.84rem;color:var(--muted);line-height:1.45}
.consent__prefs .btn{justify-self:start;padding:10px 18px;font-size:14px}
@media (max-width:560px){.consent{left:10px;right:10px;bottom:10px;width:auto;padding:18px}}

.promo{position:fixed;left:20px;bottom:20px;z-index:85;width:min(340px,calc(100vw - 40px));display:grid;gap:6px;
 padding:20px 22px;border-radius:20px;background:var(--royal);color:#fff;box-shadow:0 24px 60px rgba(1,0,60,.35);
 opacity:0;transform:translateY(20px);transition:opacity .35s ease,transform .35s ease}
.promo.is-in{opacity:1;transform:none}
.promo__title{font-size:1.05rem;font-weight:600;padding-right:28px}
.promo p{margin:0;color:rgba(255,255,255,.82);font-size:.9rem}
.promo .link-more{color:#fff;justify-self:start;margin-top:6px}
.promo__close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
 background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.promo__close:hover{background:rgba(255,255,255,.24)}
.promo__close svg{width:14px;height:14px}
@media (max-width:560px){.promo{left:10px;bottom:10px;width:calc(100vw - 100px)}}

.site-footer__cookie{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.site-footer__cookie:hover{color:#fff}
/* Cookie table (Privacy Policy): scrolls sideways inside its box on phones. */
.table-scroll{overflow-x:auto;margin:16px 0 20px;border-radius:16px;background:var(--bg-2)}
.cookie-table{width:100%;min-width:560px;border-collapse:collapse;font-size:.9rem}
.cookie-table th,.cookie-table td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--brd)}
.cookie-table thead th{font-size:.78rem;font-weight:600;color:var(--subtle);letter-spacing:.04em}
.cookie-table tbody tr:last-child td{border-bottom:0}
.cookie-table code{font-size:.85em;background:var(--elev);padding:1px 6px;border-radius:6px}
:root[data-theme="dark"] .table-scroll{background:var(--elev)}
/* Cloudflare's anti-spam widget is a fixed 300px; tighten the form panel on small phones so it fits. */
@media (max-width:400px){.contact-form{padding:12px}}
/* `hidden` must win over the display values set above. */
.consent[hidden],.consent__prefs[hidden],.promo[hidden]{display:none}