/* ── Preloader ── */
html.is-loading {
    overflow: hidden;
}
#site-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 36px;
    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}
#site-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: preloader-breathe 1.8s ease-in-out infinite;
}
.preloader__bar {
    width: 220px;
    height: 3px;
    background: #ebebeb;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.preloader__fill {
    position: absolute;
    top: 0;
    left: -55%;
    width: 55%;
    height: 100%;
    background: #2c2e81;
    border-radius: 2px;
    animation: preloader-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes preloader-breathe {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.07);
    }
}
@keyframes preloader-slide {
    0% {
        left: -55%;
    }
    100% {
        left: 100%;
    }
}

:root {
    --color-brand-primary: #2c2e81;
    --color-brand-mid: #393ca7;
    --color-brand-dark: #1b2735;
    --color-brand-overlay: #181612;
    --color-surface-light: #f5f5f5;
    --color-surface-blue: #e8f9ff;
    --color-surface-cream: #fcfbfc;
    --color-text-primary: #141313;
    --color-text-secondary: #525252;
    --color-text-muted: #777776;
    --color-accent-orange: #fe9239;
    --color-border: #d9d9d9;

    --font-heading: "Plus Jakarta Sans", sans-serif;
    --font-body: "Plus Jakarta Sans", sans-serif;

    --max-width: 1280px;
    --section-px: clamp(1.5rem, 5vw, 3rem);
    --section-py: clamp(2.5rem, 6vw, 4rem);
    /* The approved build's container measure, adopted 2026-08-05 after the regression pass
       it was waiting on. Before this the gutter was a flat 2vw above 1024px and 5% below,
       and .ndic-container had no max-width at all — so the page kept widening with the
       viewport instead of settling. At 1920px that ran the content 515px wider than the
       approved layout with a 258px smaller gutter; at 2560px, 1130px wider. The 5% inside
       the clamp resolves against the container's own box, which max-width caps, so the
       gutter tops out at 56px rather than growing with the screen. */
    --container-px: clamp(24px, 5%, 56px);
    --container-max: 1440px;

    /* Header height, taken from the approved build. Consumers: the sticky column in the
       "How we insure your deposits" section, the About mandate and history columns, and
       scroll-padding-top below. */
    --header-h: 58px;
    --anchor-gap: 16px;
}

/* Phone gutter, from the approved build. The clamp above bottoms out at 24px, but
   below 640px the approved layout uses a flat 16px — at 393px that is 32px more
   measure, which is what makes the mobile hero headline and subtext break where
   the reference breaks them. Restored 2026-08-11; without it every .ndic-container
   on a phone (hero, quick links, and the sections under them) ran 32px narrow. */
@media (max-width: 640px) {
    :root {
        --container-px: 16px;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-h: 114px;
    }
}

/* ── Base ── */
html {
    scroll-behavior: smooth;
    /* Every in-page anchor — /about#history, /your-protection#deposit-guarantee and the
       rest of the mega menu — landed underneath the sticky header without this. */
    scroll-padding-top: calc(var(--header-h) + var(--anchor-gap));
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
html::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    width: 100vw;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbars on any scrolling descendant */
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

input::placeholder,
textarea::placeholder {
    color: #dcdcdc;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 {
    font-weight: 800;
}
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

/* ── Accent bar gradient animation ── */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.nav-accent-bar {
    background: linear-gradient(
        45deg,
        #1b2735,
        #2c2e81,
        #393ca7,
        #ffffff22,
        #393ca7,
        #2c2e81,
        #1b2735
    );
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
}

/* ── Container ──
   Matches the approved build's rule exactly. The breakpoint that used to switch the gutter
   between 5% and 2vw is gone: clamp() already does that job continuously, and the old split
   left the 1024-1440 band at roughly half the approved gutter. */
.ndic-container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}
.nav-logo-panel {
    padding-left: 2%;
}

/* ── Carousel ── */
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#hero-title,
#hero-subtext {
    transition: opacity 0.3s ease;
}

/* ── Accordion ── */

.accordion-item {
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
    border-radius: 6px;
    position: relative;
    z-index: 0;
}
:not(#board-members-accordion) > .accordion-item:hover {
    transform: scale(1.005);
    z-index: 1;
}

.accordion-trigger {
    display: grid;
    grid-template-columns: 28% 62% 10%;
    align-items: start;
    border-left: 3px solid transparent;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
    border-radius: 0 4px 4px 0;
}
:not(#board-members-accordion) > .accordion-item > .accordion-trigger:hover {
    border-left-color: #2c2e81;
}
.accordion-trigger .label-col {
    display: flex;
    align-items: center;
}
.accordion-trigger .text-col {
    padding: 0 1rem;
}
.accordion-trigger .icon-col {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
    transition: transform 0.25s ease;
}
.accordion-expanded-inner {
    margin-left: 28%;
    width: 62%;
    padding: 0 1rem 1.25rem;
}

/* ── Board members name list ── */
.board-name-item {
    display: block;
}
.board-name-number {
    font-variant-numeric: tabular-nums;
    color: #777776;
    font-size: 0.8em;
    margin-right: 0.2em;
}

/* ── Collapse/expand ── */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
    opacity: 0;
}
.accordion-content.open {
    max-height: 800px;
    opacity: 1;
}

/* ── Tablet: loosen the columns ── */
@media (max-width: 1024px) {
    .accordion-trigger {
        grid-template-columns: 26% 64% 10%;
    }
    .accordion-expanded-inner {
        margin-left: 26%;
        width: 64%;
    }
}

/* ── Mobile: stack vertically ── */
@media (max-width: 640px) {
    .accordion-trigger {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: flex-start;
    }
    .accordion-trigger .label-col {
        width: 100%;
    }
    .accordion-trigger .text-col {
        flex: 1;
        padding: 0;
        font-size: 0.875rem;
    }
    .accordion-trigger .icon-col {
        flex-shrink: 0;
        padding-top: 0;
    }
    .accordion-expanded-inner {
        margin-left: 0;
        width: 100%;
        padding: 0 0 1.25rem;
    }
}

/* ── Mandate section — image + inline read-more list ── */
.mandate-card-about {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 100%;
}
.mandate-image-col {
    flex: 0 0 52%;
    min-height: 460px;
    overflow: hidden;
}
.mandate-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.mandate-items-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 48px;
    gap: 0;
}
.mandate-item {
    padding: 18px 0;
}
.mandate-item:first-child {
    padding-top: 0;
}
.mandate-item:last-child {
    padding-bottom: 0;
}
/* ── Org structure chart box ── */
.org-box {
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    padding: 3px 6px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.82rem;
    text-align: center;
    background: #f2f2f22b;
    width: 100%;
    max-width: 280px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease,
        box-shadow 0.25s ease;
}
.org-box.active {
    background: rgba(255, 255, 255, 0.92);
    border-color: #ffffff;
    border-width: 2px;
    color: #2c2e81;
    font-weight: 600;
}
.org-box.active-l1 {
    background: rgba(255, 255, 255, 0.95);
    border-color: #ffffff;
    border-width: 2px;
    color: #2c2e81;
    font-weight: 600;
}
.org-box.active-l2 {
    background: rgba(254, 146, 57, 0.85);
    border-color: rgba(254, 146, 57, 0.9);
    border-width: 2px;
    color: #141313;
    font-weight: 600;
}
.org-box.active-l3 {
    background: rgba(57, 60, 167, 0.45);
    border-color: rgba(100, 120, 220, 0.6);
    border-width: 1.5px;
    color: #ffffff;
    font-weight: 500;
}
.org-box.state-white {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #141313;
}
.org-box.state-orange {
    background: #817f2c;
    border-color: #a09e3a;
    color: #f5f5f5;
}
.org-box.state-green {
    background: #2c2e81;
    border-color: #393ca7;
    color: #e8f9ff;
}
.org-box.state-red {
    background: rgba(254, 146, 57, 0.18);
    border-color: #fe9239;
    color: #f5f5f5;
}

.fn-number {
    font-family: var(--font-nunito-sans, sans-serif);
    font-size: 1.5rem;
    font-weight: 300;
    color: #cccccc;
    line-height: 1;
    flex-shrink: 0;
    width: 44px;
    padding-top: 2px;
}

.mandate-divider {
    border: none;
    border-top: 1px solid #d9d9d9;
    margin: 0;
}
.mandate-read-toggle {
    color: #2c2e81;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.mandate-read-toggle:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .mandate-card-about {
        flex-direction: column;
    }
    .mandate-image-col {
        flex: none;
        height: 260px;
        min-height: unset;
    }
    .mandate-image-col img {
        height: 260px;
    }
    .mandate-items-col {
        padding: 20px;
        padding-top: 28px;
    }
}

/* ── Nav item hover — full-column bg that bleeds into dropdown ── */
.nav-item {
    padding: 0 14px;
    min-width: 0;
    justify-content: flex-start;
}
@media (min-width: 1200px) {
    nav[role="navigation"] > ul {
        justify-content: center !important;
        margin-left: 0 !important;
    }
}
.nav-item:hover {
    background: linear-gradient(to bottom, transparent 20%, #eaeaf2 20%);
    box-shadow: 0 2px 0 0 #eaeaf2;
}

/* Non-dropdown nav item: stop hover bg just above the blue header border */
.nav-item.nav-item-plain:hover {
    background: linear-gradient(
        to bottom,
        transparent 20%,
        #eaeaf2 20%,
        #eaeaf2 calc(100% - 4px),
        transparent calc(100% - 4px)
    );
    box-shadow: none;
}

/* ── Nav link sliding underline ── */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #2c2e81;
    transition: width 0.25s ease;
}
.nav-link:hover::after {
    width: 0;
}
.nav-link.active-link::after {
    width: 100%;
}

/* ── Footer address width ── */
@media (min-width: 1024px) {
    .footer-address {
        max-width: 100%;
    }
}

/* ── Mobile nav drawer ── */
.nav-drawer {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.nav-drawer.open {
    transform: translateX(0);
}

/* ── Carousel dots ──
   Ported verbatim from the approved build's css/styles.css (2026-08-03). This build had only
   the `.active` colour override and no base rule, so the hero carousel's script was sizing the
   dots with inline Tailwind utilities (`w-4 h-4 rounded-sm border-2`) to compensate — square
   4×4 dots instead of the approved 8px pill that stretches to 26px when active. The utilities
   are gone from the script now, so these rules are load-bearing.
   Only the hero produces `.carousel-dot`; the news carousel's dot container is `hidden`. */
.carousel-dot {
    /* The 8px pill is the painted dot; the 8px padding around it is an invisible
       tap target, so the button measures 24×24 without the dot growing. Restored
       from the approved build 2026-08-11 — this build had dropped the padding and
       the background-clip, leaving an 8px touch target on mobile. `content-box`
       plus `background-clip: content-box` is what keeps the paint off the padding. */
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 8px;
    background-color: rgba(10, 12, 40, 0.22);
    background-clip: content-box;
    cursor: pointer;
    transition:
        width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease;
}

.carousel-dot:hover {
    background-color: rgba(10, 12, 40, 0.4);
}

.carousel-dot.active {
    width: 26px;
    background-color: var(--color-brand-primary);
}

@media (prefers-reduced-motion: reduce) {
    .carousel-dot {
        transition: background-color 0.3s ease;
    }
}

/* ── Homepage quick links ──
   Ported verbatim from the approved build's css/styles.css (2026-08-03). This build had none of
   these 18 rules and produced the strip from Tailwind utilities instead: a flex row with manual
   `w-px` dividers, against the approved 2x4 grid whose `gap-px` lets the card background show
   through as the dividing lines. Same gap as the hero dots — the approved class layer was never
   ported into this file. See docs/context/core-homepage-parity-technical.md. */
.quick-links-card {
  background: #e9eaef;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(10, 12, 40, 0.08),
    0 2px 4px -1px rgba(10, 12, 40, 0.1),
    0 8px 16px -4px rgba(10, 12, 40, 0.16),
    0 20px 32px -8px rgba(6, 8, 28, 0.3),
    0 36px 64px -16px rgba(6, 8, 28, 0.42);
}

.quick-link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 12px;
  background: #fff;
  color: #3f4457;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

@media (min-width: 768px) {
  .quick-link {
    gap: 12px;
    padding: 26px 16px;
  }
}

.quick-link:hover,
.quick-link:focus-visible {
  outline: none;
  background: #f4f5f9;
  color: var(--color-brand-primary);
}

.quick-link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-brand-primary);
}

.quick-link:active {
  background: #ececf4;
}

.quick-link-icon {
  width: 30px;
  height: 30px;
  color: var(--color-brand-primary);
  opacity: 0.72;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

@media (min-width: 768px) {
  .quick-link-icon {
    width: 34px;
    height: 34px;
  }
}

.quick-link:hover .quick-link-icon,
.quick-link:focus-visible .quick-link-icon {
  opacity: 1;
  transform: translateY(-2px);
}

.quick-link-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
}

@media (min-width: 768px) {
  .quick-link-label {
    font-size: 14px;
  }
}

@media (min-width: 1024px) {
  .quick-link-label {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-link,
  .quick-link-icon {
    transition: none;
  }
  .quick-link:hover .quick-link-icon,
  .quick-link:focus-visible .quick-link-icon {
    transform: none;
  }
}

/* ── Image overlay gradient ── */
.media-card-overlay {
    background: linear-gradient(
        to top,
        rgba(24, 22, 18, 0.78) 0%,
        transparent 60%
    );
}

.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;
}

/* ── Media card hover reveal ── */
.media-card-overlay {
    background: linear-gradient(
        to top,
        rgba(24, 22, 18, 0.85) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.media-card-caption {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.media-card:hover .media-card-overlay,
.media-card:focus-within .media-card-overlay {
    opacity: 1;
}

.media-card:hover .media-card-caption,
.media-card:focus-within .media-card-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth image zoom on hover */
.media-card img {
    transition: transform 0.4s ease;
}
.media-card:hover img {
    transform: scale(1.04);
}

/* ── Video-card play badge ── */
.media-card--video {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}
.media-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
    pointer-events: none;
    z-index: 2;
}
.media-play-badge svg {
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.media-card--video:hover .media-play-badge,
.media-card--video:focus-visible .media-play-badge {
    transform: translate(-50%, -50%) scale(1.08);
}
@media (max-width: 480px) {
    .media-play-badge svg {
        width: 46px;
        height: 46px;
    }
}

/* ── Video modal ── */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.video-modal.is-open {
    opacity: 1;
}
.video-modal[hidden] {
    display: none;
}
.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 30, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.video-modal__panel {
    position: relative;
    width: min(880px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--color-brand-primary);
    color: #fff;
    border-radius: 12px;
    padding: 32px clamp(20px, 4vw, 48px) 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.25s ease;
}
.video-modal.is-open .video-modal__panel {
    transform: translateY(0) scale(1);
}
.video-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
    opacity: 0.9;
}
.video-modal__close svg {
    width: 100%;
    height: 100%;
    display: block;
}
.video-modal__close:hover {
    opacity: 1;
    transform: scale(1.05);
}
.video-modal__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    text-align: center;
    margin: 8px 32px 20px;
    line-height: 1.3;
}
.video-modal__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.video-modal__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}
.video-modal__cta {
    display: block;
    width: fit-content;
    margin: 0 auto;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: #ffffff;
    background: transparent;
    border: 1.5px solid #ffffff;
    padding: 10px 64px;
    min-width: 200px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.video-modal__cta:hover {
    background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 640px) {
    .video-modal {
        padding: 8px;
        align-items: flex-start;
    }
    .video-modal__panel {
        width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: 16px;
        padding: 48px 16px 20px;
    }
    .video-modal__close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }
    .video-modal__title {
        font-size: 1.05rem;
        margin: 0 36px 14px;
        line-height: 1.35;
    }
    .video-modal__media {
        aspect-ratio: 16 / 9;
        max-height: 60vh;
        border-radius: 8px;
        margin-bottom: 16px;
    }
    .video-modal__cta {
        width: 100%;
        min-width: 0;
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* ── Image Carousel Modal (reuses .video-modal base) ── */
.image-modal .video-modal__panel {
    overflow: hidden;
}
.image-modal__media {
    position: relative;
    aspect-ratio: auto;
    background: transparent;
    padding: 0;
    margin-bottom: 14px;
    overflow: visible;
    display: flex;
    align-items: stretch;
}
.image-modal__viewport {
    flex: 1;
    overflow: hidden;
    width: 100%;
    border-radius: 8px;
}
.image-modal__track {
    --per-view: 3;
    --gap: 12px;
    display: flex;
    gap: var(--gap);
    transition: transform 0.35s ease;
    height: clamp(220px, 42vh, 360px);
}
.image-modal__slide {
    position: relative;
    margin: 0;
    flex: 0 0
        calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    border-radius: 8px;
    overflow: hidden;
    background: #0b0f1f;
}
.image-modal__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-modal__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0) 45%
    );
    pointer-events: none;
}
.image-modal__slide-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 1;
    color: #fff;
    margin: 0;
}
.image-modal__slide-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    margin: 0;
    line-height: 1.2;
}
.image-modal__slide-date {
    font-family: var(--font-body);
    font-size: 11px;
    color: #d9d9d9;
    margin: 2px 0 0;
}
.image-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
    z-index: 2;
}
.image-modal__nav:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-50%) scale(1.05);
}
.image-modal__nav--prev {
    left: -6px;
}
.image-modal__nav--next {
    right: -6px;
}
.image-modal__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 0 14px;
    min-height: 18px;
}
.image-modal__dot {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}
.image-modal__dot:hover {
    opacity: 0.85;
    transform: scale(1.08);
}
.image-modal__dot svg {
    display: block;
}
@media (max-width: 819px) {
    .image-modal__track {
        height: clamp(220px, 38vh, 320px);
    }
    .image-modal__nav {
        width: 36px;
        height: 36px;
    }
    .image-modal__nav--prev {
        left: -4px;
    }
    .image-modal__nav--next {
        right: -4px;
    }
}
@media (max-width: 519px) {
    .image-modal__track {
        height: clamp(200px, 40vh, 300px);
    }
    .image-modal__nav {
        width: 32px;
        height: 32px;
    }
}

/* ── Social Media Feeds (auto-sliding marquee) ── */
.social-feed-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 40px,
        #000 calc(100% - 40px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 40px,
        #000 calc(100% - 40px),
        transparent 100%
    );
}
.social-feed-marquee__track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: socialFeedSlide 40s linear infinite;
}
.social-feed-marquee:hover .social-feed-marquee__track {
    animation-play-state: paused;
}
@keyframes socialFeedSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 8px));
    }
}
@media (prefers-reduced-motion: reduce) {
    .social-feed-marquee__track {
        animation: none;
    }
}

.social-feed-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(210px, 26vw, 290px);
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    background: #e5e5ea;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.social-feed-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.social-feed-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.social-feed-card:hover img {
    transform: scale(1.05);
}
.social-feed-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 6px;
}
.social-feed-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 640px) {
    .social-feed-card {
        width: clamp(130px, 44vw, 180px);
    }
    .social-feed-marquee__track {
        animation-duration: 28s;
    }
}

/* ── Full-viewport-width divider (overrides any parent max-width) ── */
.vw-divider {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 1px;
    background-color: #d9d9d9;
}

/* ── About page ── */
.about-pill {
    display: inline-block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fe9239;
    background: rgba(254, 146, 57, 0.1);
    border: 1px solid rgba(254, 146, 57, 0.3);
    border-radius: 9999px;
    padding: 4px 14px;
}
.about-pill.blue {
    color: #2c2e81;
    background: rgba(44, 46, 129, 0.08);
    border-color: rgba(44, 46, 129, 0.3);
}

#history-sticky {
    overflow: hidden;
}

.history-fixed-img {
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 42%;
    pointer-events: none;
    z-index: 1;
    line-height: 0;
    display: none;
}
.history-fixed-img img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px 16px 0 0;
}
@media (min-width: 1024px) {
    .history-fixed-img {
        display: block;
        right: var(--container-px);
    }
}

.history-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.history-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.h-dot {
    height: 4px;
    width: 8px;
    border-radius: 2px;
    background: rgba(44, 46, 129, 0.2);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.h-dot.on {
    background: #fe9239;
    width: 24px;
}

.slide-year {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 18vw, 11rem);
    line-height: 1;
    color: #2c2e81;
    opacity: 0.08;
    position: absolute;
    top: -10px;
    left: -8px;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
@media (min-width: 768px) {
    .slide-year {
        font-size: clamp(6rem, 18vw, 11rem);
    }
}
.vision {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(8rem, 22vw, 14rem);
    letter-spacing: -0.085em;
    line-height: 1;
    color: #2c2e81;
    opacity: 0.04;
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.slide-img {
    height: 400px;
    z-index: 1;
}

.history-slide .slide-body ul {
    list-style: disc;
    padding-left: 1.25rem;
}
.history-slide .slide-body li {
    margin-bottom: 0.25rem;
}

.slide-backdrop {
    position: absolute;
    top: -16px;
    left: -16px;
    right: 16px;
    bottom: 16px;
    z-index: 0;
    border-radius: 0.75rem;
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 55%);
}

.hero-section {
    height: 280px;
    border-bottom: 6px solid #2c2e81;
    border-radius: 0 0 32px 32px;
}

/* ── Functions section image col ── */
.fn-image-col {
    flex: 0 0 40%;
    height: 450px;
    transform: translateY(50px);
}
@media (max-width: 768px) {
    .fn-image-col {
        flex: none;
        height: 260px;
        transform: none;
    }
    #functions .mandate-items-col {
        padding: 20px 16px;
    }
    .fn-items-pad {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* ── Directorate page ── */
.dir-content-panel {
    padding: 28px 32px;
}
@media (max-width: 768px) {
    .dir-content-panel {
        padding: 16px 16px;
    }
}
@media (max-width: 480px) {
    .dir-content-panel {
        padding: 12px 12px;
    }
}
.dir-sidebar {
    border: 1px solid #d9d9d9;
    background: #f5f5f5;
    overflow: hidden;
}
.dir-sidebar-divider {
    height: 1px;
    background: #2c2e81;
    opacity: 0.35;
    margin: 0 20px;
}
.dir-tab {
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px 12px;
    font-family: var(--font-heading);
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    font-weight: 400;
    letter-spacing: -0.05em;
    color: #525252;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.dir-tab--active {
    background: #2c2e81;
    color: #ffffff;
    margin-top: 12px;
    margin-bottom: 12px;
}
.dir-tab:not(.dir-tab--active):hover {
    background: #eaeaf2;
    color: #141313;
}

/* ── Insured-banks: smaller type + wider tracking on tabs ── */
.ib-tab {
    font-size: clamp(0.8rem, 1.6vw, 1rem);
    letter-spacing: 0.04em;
    padding: 16px 12px;
}

/* ── Insured-banks: mobile collapsible sidebar ── */
.ib-sidebar-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #2c2e81;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(0.875rem, 3.6vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    border: 1px solid #2c2e81;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.ib-sidebar-toggle[aria-expanded="true"] .ib-sidebar-caret {
    transform: rotate(180deg);
}
.ib-sidebar-caret {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .ib-aside {
        position: sticky;
        top: 78px;
        align-self: flex-start;
        max-height: calc(100vh - 98px);
        overflow-y: auto;
        scrollbar-width: none;
    }
    .ib-aside::-webkit-scrollbar {
        display: none;
    }
}
@media (min-width: 1024px) {
    .ib-aside {
        top: 130px;
        max-height: calc(100vh - 150px);
    }
}
@media (max-width: 767px) {
    .ib-aside {
        position: relative;
        z-index: 20;
    }
    .ib-sidebar-toggle {
        display: flex;
    }
    .ib-sidebar {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        display: none;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
        max-height: 70vh;
        overflow-y: auto;
    }
    .ib-sidebar.ib-sidebar--open {
        display: block;
    }
    .ib-tab {
        text-align: left;
        padding: 14px 18px;
    }
}

.dir-search-wrap {
    padding: 14px 0;
}
.dir-search-box {
    display: flex;
    align-items: center;
    width: 70%;
    border: 0.3px solid #5d727c;
    border-radius: 12px;
    padding: 16px 16px;
    background: #fff;
    gap: 10px;
}
.dir-search-box:focus-within {
    border-color: #2c2e81;
    border-width: 1px;
}

/* ── Insured banks: combined search + filter bar ── */
.ib-search-filter-bar {
    display: flex;
    align-items: stretch;
    border: 0.3px solid #5d727c;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    margin: 16px 0 24px;
}
.ib-search-filter-bar:focus-within {
    border-color: #2c2e81;
    border-width: 1px;
}
.ib-search-filter-bar .dir-search-box {
    flex: 1;
    width: auto;
    border: none;
    border-radius: 0;
    padding: 14px 16px;
}
.ib-search-filter-bar .dir-search-box:focus-within {
    border: none;
    box-shadow: none;
}
.ib-filter-divider {
    width: 1px;
    background: #e5e5e5;
    flex-shrink: 0;
    margin: 10px 0;
}
.ib-filter-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ib-filter-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 14px 40px 14px 18px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #525252;
    cursor: pointer;
    white-space: nowrap;
    min-width: 190px;
    outline: none;
}
.ib-filter-select:focus {
    color: #2c2e81;
}
.ib-filter-caret {
    position: absolute;
    right: 14px;
    pointer-events: none;
    color: #5d727c;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .ib-search-filter-bar {
        flex-direction: column;
        border-radius: 12px;
    }
    .ib-filter-divider {
        width: auto;
        height: 1px;
        margin: 0 12px;
    }
    .ib-filter-select {
        min-width: 0;
        width: 100%;
        padding: 12px 40px 12px 16px;
    }
}
.dir-search-input {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: #141313;
    background: transparent;
    border: none;
    outline: none;
    min-width: 0;
}
.dir-search-input::placeholder {
    color: #dcdcdc;
    font-size: 0.8rem;
}
.dir-search-icon {
    flex-shrink: 0;
    display: block;
    pointer-events: none;
}
@media (max-width: 640px) {
    .dir-search-box {
        width: 100%;
        padding: 7px 12px;
    }
}
@media (max-width: 480px) {
    .dir-search-box {
        padding: 5px 10px;
    }
}

.dir-entry {
    padding: 18px 10px;
    transition: background 0.2s ease;
}
.dir-content-panel--cms {
    padding: 24px 28px;
}
.dir-col-headers,
.dir-entry--cms {
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) minmax(130px, 0.75fr) minmax(220px, 1.4fr);
    gap: 18px;
    align-items: start;
}
.dir-col-headers {
    border-bottom: 1px solid #cfd3da;
    color: #5d727c;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 8px 10px 10px;
    text-transform: uppercase;
}
.dir-entry--cms {
    padding: 14px 10px;
}
.dir-entry--cms .dir-name {
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 0;
}
.dir-entry--cms .dir-meta {
    font-size: 0.9rem;
    line-height: 1.45;
}
.dir-entry--cms .dir-meta span,
.dir-entry--cms .dir-meta a {
    display: block;
}
@media (max-width: 900px) {
    .dir-col-headers {
        display: none;
    }
    .dir-entry--cms {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 10px;
    }
}
.dir-entry--border {
    border-bottom: 1px solid #d9d9d9;
}
/* 2-per-row grid layout for dept tab (directorate-2) */
.dir-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 640px) {
    .dir-grid-2 {
        grid-template-columns: 1fr;
    }
}
.dir-entry--card {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    padding: 16px;
}
.dir-entry:hover {
    background: #eaeaf2;
}
.dir-name {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: #141313;
    margin-bottom: 3px;
}
.dir-meta {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 2vw, 1.25rem);
    color: #525252;
    line-height: 1.65;
}
.dir-link {
    color: #2c2e81;
    text-decoration: none;
}
.dir-link:hover {
    text-decoration: underline;
}

.dir-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: #525252;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}
.dir-page-btn:hover:not([disabled]) {
    background: #eaeaf2;
    border-color: #2c2e81;
    color: #2c2e81;
}
.dir-page-btn--active {
    background: #2c2e81;
    border-color: #2c2e81;
    color: #fff;
}
.dir-page-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}
.dir-page-arrow {
    color: #525252;
}

/* ── Org chart responsive scaling ── */
@media (max-width: 768px) {
    #org-chart-grid > div {
        align-items: stretch;
    }
    #org-chart-grid .org-box {
        height: 100%;
    }
    .org-box {
        font-size: 0.72rem;
        padding: 3px 5px;
        min-height: 38px;
    }
}
@media (max-width: 480px) {
    .org-box {
        font-size: 0.6rem;
        padding: 2px 4px;
        min-height: 30px;
    }
}
@media (max-width: 360px) {
    .org-box {
        font-size: 0.55rem;
        padding: 2px 3px;
        min-height: 26px;
    }
}

/* ── Mobile: hero height ── */
@media (max-width: 640px) {
    .hero-section {
        height: 160px;
    }
}

/* ── Mobile: vision / mission images ── */
@media (max-width: 1279px) {
    .vm-img-wrap {
        max-height: 220px;
        overflow: hidden;
    }
    .vm-img-wrap img {
        max-height: 220px;
        width: auto;
        max-width: 70%;
        margin: 0 auto;
        display: block;
        object-fit: contain;
    }
}
@media (max-width: 640px) {
    .vm-img-wrap {
        max-height: 160px;
    }
    .vm-img-wrap img {
        max-height: 160px;
        max-width: 60%;
    }
}

/* ── Mobile: core values image ── */
@media (max-width: 768px) {
    .core-val-img-wrap img {
        min-height: 260px !important;
        max-height: 300px !important;
    }
}
@media (max-width: 480px) {
    .core-val-img-wrap img {
        min-height: 180px !important;
        max-height: 220px !important;
    }
}

/* ── Mobile: mandate & functions — text col full width ── */
@media (max-width: 768px) {
    .mandate-items-col {
        padding: 24px 0;
        width: 100%;
    }
    .mandate-items-col p,
    .mandate-items-col .mandate-body {
        width: 100% !important;
    }
    .mandate-divider {
        width: 100% !important;
    }
}

/* ── Floating Action Button ── */
.fab-root {
    position: fixed;
    left: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    font-family: var(--font-body);
}

.fab-trigger {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: var(--color-brand-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 10px 24px rgba(28, 30, 90, 0.28),
        0 2px 6px rgba(28, 30, 90, 0.18);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
    position: relative;
}
.fab-trigger:hover {
    background: var(--color-brand-mid);
    transform: translateY(-2px);
}
.fab-trigger:active {
    transform: translateY(0);
}
.fab-trigger:focus-visible {
    outline: 3px solid rgba(44, 46, 129, 0.35);
    outline-offset: 3px;
}

.fab-icon-open,
.fab-icon-close {
    position: absolute;
    transition:
        opacity 0.18s ease,
        transform 0.22s ease;
}
.fab-icon-close {
    opacity: 0;
    transform: rotate(-45deg) scale(0.7);
}
.fab-root.is-open .fab-icon-open {
    opacity: 0;
    transform: rotate(45deg) scale(0.7);
}
.fab-root.is-open .fab-icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.fab-menu {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
    pointer-events: none;
}

.fab-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--font-body);
    opacity: 0;
    transform: translateX(-8px) translateY(4px);
    transition:
        transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.18s ease;
    transition-delay: 0ms;
}

.fab-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: var(--color-brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 18px rgba(28, 30, 90, 0.22),
        0 2px 5px rgba(28, 30, 90, 0.14);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
    flex-shrink: 0;
}
.fab-item:hover .fab-item-icon {
    background: var(--color-brand-mid);
    transform: translateY(-1px);
}
.fab-item:focus-visible {
    outline: none;
}
.fab-item:focus-visible .fab-item-icon {
    outline: 3px solid rgba(44, 46, 129, 0.35);
    outline-offset: 3px;
}

.fab-item-label {
    background: #fff;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(28, 30, 90, 0.12),
        0 1px 3px rgba(28, 30, 90, 0.08);
    white-space: nowrap;
    transition: color 0.2s ease;
}
.fab-item:hover .fab-item-label {
    color: var(--color-brand-primary);
}

.fab-root.is-open .fab-menu {
    pointer-events: auto;
}
.fab-root.is-open .fab-item {
    opacity: 1;
    transform: translateX(0) translateY(0);
    transition-delay: var(--fab-delay, 0ms);
}

@media (max-width: 480px) {
    .fab-trigger {
        width: 52px;
        height: 52px;
    }
    .fab-item-icon {
        width: 40px;
        height: 40px;
    }
    .fab-item-label {
        font-size: 12px;
        padding: 7px 10px;
    }
}

/* ── Insured Banks page ── */
.ib-panel {
    background: rgba(242, 242, 242, 0.5);
    padding: 28px 32px;
}
@media (max-width: 768px) {
    .ib-panel {
        padding: 16px;
    }
}
.ib-intro {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    line-height: 1.4;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}
.ib-subtabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px;
    margin: 4px auto 18px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
}
.ib-subtabs[hidden] {
    display: none;
}
.ib-subtab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 18px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.ib-subtab:hover:not(.ib-subtab--active) {
    color: var(--color-brand-primary);
}
.ib-subtab--active {
    background: var(--color-brand-primary);
    color: #fff;
}
@media (max-width: 640px) {
    .ib-subtabs {
        width: 100%;
    }
    .ib-subtab {
        flex: 1;
        padding: 8px 10px;
        font-size: 11px;
        text-align: center;
    }
}

.ib-col-headers {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1.5fr 1fr 160px;
    column-gap: 20px;
    padding: 18px 16px 14px calc(10% - 32px);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
}
.ib-col-headers {
    background-image: linear-gradient(
        to right,
        transparent 0 32px,
        #181612 32px 90%,
        transparent 90% 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom;
}
.ib-col-headers span:first-of-type {
    grid-column-start: 2;
}
.ib-card {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1.5fr 1fr 160px;
    column-gap: 20px;
    padding: 18px 16px 18px 0;
    align-items: center;
}
/* 80%-wide centered divider between bank cards */
.ib-card {
    background-image: linear-gradient(
        to right,
        transparent 0 32px,
        #181612 32px 90%,
        transparent 90% 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom;
}
/* Vertical divider centered between address and contact columns, inset top/bottom */
.ib-card > .ib-contact {
    position: relative;
    padding-left: 18px;
}
.ib-card > .ib-contact::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #181612;
}
.ib-logo {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.ib-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
.ib-bank-name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text-primary);
    margin: 0 0 6px;
}
.ib-bank-addr {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}
.ib-contact {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ib-contact a {
    color: var(--color-text-secondary);
    text-decoration: none;
}
.ib-contact a:hover {
    color: var(--color-brand-primary);
}
.ib-type {
    display: flex;
    align-items: center;
}
.ib-type-badge {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-primary);
}
@media (max-width: 768px) {
    .ib-col-headers {
        display: none;
    }
    .ib-panel {
        background: transparent;
        padding: 4px 0;
    }
    #ib-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .ib-card {
        grid-template-columns: 56px 1fr;
        grid-template-areas:
            "logo header"
            "contact contact"
            "type type";
        column-gap: 14px;
        row-gap: 12px;
        align-items: start;
        padding: 14px;
        border: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .ib-card::after,
    .ib-card > .ib-contact::before {
        display: none;
    }
    .ib-logo {
        grid-area: logo;
        width: 56px;
        height: 56px;
        align-self: start;
    }
    .ib-card > .ib-name-wrap {
        grid-area: header;
        min-width: 0;
        align-self: center;
    }
    .ib-bank-name {
        font-size: 14px;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    .ib-bank-addr {
        font-size: 12px;
        line-height: 1.45;
    }
    .ib-card > .ib-contact {
        grid-area: contact;
        padding-top: 12px;
        border-top: 1px solid #ececec;
        font-size: 12.5px;
        line-height: 1.55;
        gap: 4px;
    }
    .ib-card > .ib-type {
        grid-area: type;
        padding-top: 0;
    }
    .ib-contact > a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ib-phones {
        display: block;
        word-break: break-word;
    }
    .ib-phones a {
        display: inline;
        white-space: normal;
    }
    .ib-pagination {
        justify-content: center;
        padding: 16px 0 4px;
    }
}

.ib-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 20px 16px 8px;
}
.ib-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    background: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}
.ib-page-btn:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}
.ib-page-btn.is-active {
    background: var(--color-brand-primary);
    color: #fff;
    border-color: var(--color-brand-primary);
}
.ib-page-btn.ib-page-ellipsis {
    border-color: transparent;
    background: transparent;
    cursor: default;
    color: var(--color-text-muted);
    min-width: 20px;
    padding: 0 2px;
    pointer-events: none;
}
.ib-page-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.ib-logo-fallback {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-brand-primary);
    font-size: 14px;
    letter-spacing: 0.5px;
}
.ib-empty {
    padding: 32px 16px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-muted);
}

/* ── Your Claims page ── */
.yc-intro-section {
    background: var(--color-surface-light);
    padding: clamp(8px, 3vw, 19px) 4% 0;
    position: relative;
}
.yc-intro {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(21px, 2.4vw, 36px);
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-primary);
    padding: clamp(14px, 2.4vw, 28px) clamp(18px, 4vw, 48px);
    background: transparent;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: translateY(18%);
}
.yc-main-section {
    padding: clamp(24px, 5vw, 52px) 10% clamp(40px, 7vw, 80px);
}
.yc-tabs {
    position: sticky;
    top: 56px;
    z-index: 30;
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 10px 0;
    margin: 0 0 clamp(22px, 4vw, 44px);
    background: #fff;
}
@media (min-width: 1024px) {
    .yc-tabs {
        top: 112px;
    }
}
.yc-tabs::before,
.yc-tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(93, 114, 124, 0) 0%,
        rgba(93, 114, 124, 1) 12%,
        rgba(93, 114, 124, 1) 88%,
        rgba(93, 114, 124, 0) 100%
    );
    pointer-events: none;
}
.yc-tabs::before {
    top: 0;
}
.yc-tabs::after {
    bottom: 0;
}
.yc-tabs-divider {
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    margin: 10px 0;
    background: #2c2e81;
}
.yc-tab {
    position: relative;
    appearance: none;
    border: 0;
    border-radius: 0;
    padding: 14px 28px;
    flex: 1 1 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(18px, 2vw, 24px);
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: center;
    z-index: 0;
}
.yc-tab:hover:not(.yc-tab--active) {
    color: var(--color-brand-primary);
}
.yc-tab--active {
    color: var(--color-brand-primary);
}
.yc-tab--active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 16px;
    right: 16px;
    border-radius: 0;
    z-index: -1;
}
.yc-tab--active[data-yc-tab="how-to-file"]::before {
    background: linear-gradient(
        to left,
        #eaeaf2 0%,
        #eaeaf2 45%,
        rgba(234, 234, 242, 0) 100%
    );
}
.yc-tab--active[data-yc-tab="submit-a-claim"]::before {
    background: linear-gradient(
        to right,
        #eaeaf2 0%,
        #eaeaf2 45%,
        rgba(234, 234, 242, 0) 100%
    );
}
.yc-tab--active[data-yc-tab="quick-faqs"]::before {
    background: linear-gradient(
        to left,
        #eaeaf2 0%,
        #eaeaf2 45%,
        rgba(234, 234, 242, 0) 100%
    );
}
.yc-tab--active[data-yc-tab="virtual-assistant"]::before {
    background: linear-gradient(
        to right,
        #eaeaf2 0%,
        #eaeaf2 45%,
        rgba(234, 234, 242, 0) 100%
    );
}
.yc-panel {
    min-height: auto;
}
.yc-panel[hidden] {
    display: none;
}
.yc-step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: clamp(80px, 12vw, 180px);
    padding: clamp(16px, 2.6vw, 28px) 0;
}
.yc-step-body {
    position: relative;
    padding-bottom: clamp(20px, 3vw, 32px);
    border-bottom: 1px solid #2c2e81;
}
.yc-step-body::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(80px, 12vw, 180px));
    top: clamp(14px, 1.8vw, 20px);
    width: calc(clamp(80px, 12vw, 180px) - clamp(24px, 3vw, 40px));
    height: 1px;
    background: #2c2e81;
}
.yc-step:last-of-type .yc-step-body {
    border-bottom: 0;
    padding-bottom: 0;
}
.yc-step-badge {
    justify-self: start;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 8px;
    background: var(--color-brand-primary);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.yc-step-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(18px, 2.4vw, 24px);
    color: var(--color-text-primary);
    margin: 0 0 clamp(20px, 3vw, 32px);
    line-height: 1.3;
}
.yc-step-intro {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0 0 14px;
}
.yc-subheading {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--color-text-primary);
    margin: 22px 0 10px;
}
.yc-step-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}
.yc-step-list li {
    position: relative;
    padding-left: 22px;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.yc-step-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-primary);
}
.yc-step-list li strong {
    color: var(--color-text-primary);
    font-weight: 700;
}
.yc-step-list li a {
    color: var(--color-brand-primary);
    text-decoration: underline;
}
.yc-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-primary);
}
.yc-note-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-accent-orange);
}
.yc-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 28px;
    background: var(--color-brand-primary);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.yc-cta:hover {
    background: var(--color-brand-mid);
}
.yc-cta--outline {
    background: transparent;
    color: var(--color-brand-primary);
    border: 1.5px solid var(--color-brand-primary);
}
.yc-cta--outline:hover {
    background: var(--color-brand-primary);
    color: #fff;
}
.yc-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}
.yc-cta-emoji {
    display: inline-block;
    margin-right: 8px;
}
.yc-note--pin {
    background: #eef0fb;
    border-color: #c9cdf0;
    color: var(--color-text-primary);
}
.yc-note--pin .yc-note-icon {
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
    color: inherit;
}
.yc-step-address {
    margin: 6px 0 0;
    padding: 14px 16px;
    background: var(--color-surface-light);
    border-left: 3px solid var(--color-brand-primary);
    border-radius: 4px;
    font-family: var(--font-body);
    font-style: normal;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.65;
    color: var(--color-text-secondary);
}
/* ── Your Claims — Submit a Claim form ── */
.sc-form-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-bottom: 18px;
    border-bottom: 1px solid #171717;
}
.sc-form-tab {
    appearance: none;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 0;
    border: 1px solid var(--color-border);
    border-bottom: 0;
    background: #fff;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
    text-align: center;
}
.sc-form-tab:hover:not(.sc-form-tab--active) {
    color: var(--color-brand-primary);
}
.sc-form-tab--active {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: #fff;
}

.sc-form-select-wrap {
    display: none;
}
.sc-form-select {
    width: 100%;
    height: 44px;
}

.sc-wrap {
    background: #f2f2f7;
    border-radius: 0;
    padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px);
}
.sc-wrap .sc-form-tabs {
    margin-bottom: clamp(20px, 1.8vw, 24px);
}
.sc-form-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.sc-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 10px;
}
.sc-form-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(22px, 1.8vw, 26px);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    flex: 1;
}

.sc-form-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #000;
    margin-left: 16px;
}
.sc-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--color-brand-primary);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(12px, 1vw, 14px);
    text-decoration: none;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.sc-download-btn:hover {
    background: var(--color-brand-mid);
}

.sc-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sc-form[hidden] {
    display: none;
}
.sc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sc-row > .sc-field:only-child {
    grid-column: 1 / -1;
}
.sc-row--split {
    grid-template-columns: 120px 1fr;
    align-items: end;
}
.sc-row--half {
    grid-template-columns: 1fr 1fr;
}
.sc-row--half > .sc-field:only-child {
    grid-column: 1 / 2;
}
.sc-row--upload {
    grid-template-columns: 220px 1fr;
    align-items: stretch;
    gap: 12px;
}
.sc-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 14px;
    min-width: 0;
}
.sc-field--full {
    grid-column: 1 / -1;
}
.sc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.sc-field--grow {
    width: 100%;
}
.sc-field label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.sc-input {
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-primary);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.sc-input::placeholder {
    color: #dcdcdc;
}
.sc-input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px rgba(44, 46, 129, 0.12);
}
select.sc-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232C2E81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
.sc-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
}
.sc-phone-code {
    color: #18a85b;
    font-weight: 600;
}

.sc-phone-prefix {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    user-select: none;
    white-space: nowrap;
    align-self: stretch;
    height: 100%;
}

.sc-phone-num {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.sc-phone-num:focus {
    border: 0;
    box-shadow: none;
}

.sc-phone:focus-within {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px rgba(44, 46, 129, 0.12);
}

.sc-field--stretch-control .sc-phone {
    height: 100%;
}

.sc-upload {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    cursor: pointer;
}
.sc-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.sc-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border: 1.5px dashed #b9b9c3;
    border-radius: 12px;
    background: #fff;
    color: var(--color-text-muted);
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}
.sc-upload:hover .sc-upload-box {
    border-color: var(--color-brand-primary);
    background: #fafafb;
}
.sc-upload-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    padding: 0 10px;
    color: var(--color-brand-primary);
}

.sc-section {
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px dashed #b9b9c3;
}
.sc-section-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(15px, 1.4vw, 18px);
    color: var(--color-text-primary);
}
.sc-section-sub {
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.sc-optional {
    margin-left: 6px;
    font-weight: 500;
    font-size: 11px;
    color: var(--color-text-muted);
    font-style: italic;
}

.sc-file-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px;
    background: #fff;
    border: 1px solid #c8cbe8;
    border-radius: 10px;
    min-height: 56px;
}
.sc-file-chip .sc-choose-btn {
    background: var(--color-brand-primary);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 18px;
    height: 42px;
    border-radius: 6px;
}
.sc-file-chip .sc-choose-btn:hover {
    background: var(--color-brand-mid);
}
.sc-file-chip .sc-attach-name {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0 4px;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-size: 14px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-attach-clear {
    flex-shrink: 0;
    appearance: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.sc-attach-clear:hover {
    background: #fde8e8;
    color: #c0392b;
}
.sc-attach-clear[hidden] {
    display: none;
}

.sc-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: -4px;
}
.sc-table-head,
.sc-table-row {
    display: grid;
    gap: 8px;
    align-items: center;
}
.sc-table-head {
    padding: 0 4px 4px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.sc-table-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sc-table-row {
    padding: 4px 0;
}
.sc-table-cell .sc-input {
    width: 100%;
}
.sc-table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-row-remove {
    appearance: none;
    cursor: pointer;
    width: 36px;
    height: 40px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.sc-row-remove:hover {
    background: #fde8e8;
    color: #c0392b;
}
.sc-table-foot {
    margin-top: 4px;
}
.sc-add-row {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px dashed var(--color-brand-primary);
    background: transparent;
    color: var(--color-brand-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.sc-add-row:hover {
    background: var(--color-brand-primary);
    color: #fff;
}

@media (max-width: 640px) {
    .sc-table-head {
        display: none;
    }
    .sc-table-row {
        grid-template-columns: 1fr !important;
        padding: 10px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid var(--color-border);
    }
    .sc-table-actions {
        justify-content: flex-end;
    }
}

.sc-attach-section {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
}
.sc-attach-section--inline {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}
.sc-attach-section--inline .sc-attach-label {
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.sc-attach-label {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    background: none;
    text-transform: uppercase;
    position: relative;
}

.sc-attach-label::before {
    content: "ATTACH FILE";
    padding: 4px 12px;
    background-color: #add4de;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    color: #171717;
    display: inline-block;
}

.sc-attach-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #171717;
    margin-left: 12px;
}
.sc-attach-hint {
    margin: -4px 0 12px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.sc-attach-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sc-attach-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sc-attach-file-no {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.sc-attach-inputs {
    display: grid;
    grid-template-columns: 1fr 56px;
    gap: 12px;
    align-items: stretch;
}
.sc-attach-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px;
    background: #fff;
    border: 1px solid #c8cbe8;
    border-radius: 10px;
    min-height: 56px;
}
.sc-choose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: #eef0fb;
    color: var(--color-brand-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.sc-choose-btn:hover {
    background: #dfe2f4;
}
.sc-attach-card .sc-choose-btn {
    background: var(--color-brand-primary);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 18px;
    height: 42px;
    border-radius: 6px;
}
.sc-attach-card .sc-choose-btn:hover {
    background: var(--color-brand-mid);
}
.sc-file-input {
    display: none;
}
.sc-attach-name {
    min-width: 0;
    padding: 0 14px;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-attach-card .sc-attach-name {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0 4px;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-size: 14px;
    color: var(--color-text-primary);
}
.sc-attach-add {
    appearance: none;
    cursor: pointer;
    width: 56px;
    min-height: 56px;
    border-radius: 10px;
    border: 0;
    background: var(--color-brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.sc-attach-add:hover:not([disabled]) {
    background: var(--color-brand-mid);
}
.sc-attach-add[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.sc-submit-btn {
    appearance: none;
    cursor: pointer;
    margin-top: 15px;
    width: 85%;
    padding: 14px 20px;
    border-radius: 10px;
    border: 0;
    background: var(--color-brand-primary);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(14px, 1.2vw, 16px);
    transition: background 0.2s ease;
    align-self: center;
}
.sc-submit-btn:hover {
    background: var(--color-brand-mid);
}

@media (max-width: 768px) {
    .sc-form-tabs {
        display: none;
    }
    .sc-form-select-wrap {
        display: block;
        margin-bottom: clamp(14px, 1.8vw, 22px);
    }
    .sc-row,
    .sc-row--split,
    .sc-row--half,
    .sc-row--upload {
        grid-template-columns: 1fr;
    }
    .sc-row--upload {
        gap: 12px;
    }
    .sc-upload,
    .sc-upload-box {
        min-height: 160px;
    }
    .sc-upload-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .sc-attach-card {
        padding: 8px;
        gap: 10px;
    }
    .sc-attach-card .sc-choose-btn {
        height: 38px;
        padding: 0 12px;
        font-size: 11px;
    }
    .sc-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .yc-intro-section {
        padding: 18px 2.5% 18px;
    }
    .yc-main-section {
        padding-left: 2.5%;
        padding-right: 2.5%;
        padding-top: 20px;
        padding-bottom: 44px;
    }
    .yc-main-section .ndic-container {
        padding-left: 0;
        padding-right: 0;
    }
    .yc-intro {
        font-size: 17px;
        line-height: 1.7;
        padding: 10px 8px;
        max-width: 100%;
        transform: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .yc-step {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .yc-step-body::before {
        display: none;
    }
    .yc-tabs {
        width: 100%;
        gap: 8px;
        margin-bottom: 20px;
        padding: 8px 0;
    }
    .yc-tab {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 14px;
    }
    .yc-tab--active {
        background: #eaeaf2;
    }
}

.cms-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 132px;
}

/* ── FAQ page ── */
.faq-inner {
    background: #f2f2f7;
    border-radius: 0;
    padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 32px);
}
.faq-search {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: #ffffff;
    padding: 8px;
    border-radius: 10px;
    margin: 0 auto clamp(18px, 2.4vw, 28px);
    width: 86%;
    max-width: 880px;
    box-shadow: 0 1px 2px rgba(28, 30, 90, 0.04);
}

.faq-search-input {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--color-text-primary);
}
.faq-search-input::placeholder {
    color: #dcdcdc;
}
.faq-search-btn {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 10px 22px;
    border-radius: 8px;
    background: var(--color-brand-primary);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    transition: background 0.2s ease;
    white-space: nowrap;
}
.faq-search-btn:hover {
    background: var(--color-brand-mid);
}

.faq-filters-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto clamp(20px, 2.6vw, 28px);
    width: 86%;
    max-width: 880px;
}
.faq-filters-hash {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: #5d727c;
    user-select: none;
}
.faq-filters {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
}
.faq-filters::-webkit-scrollbar {
    height: 4px;
}
.faq-filters::-webkit-scrollbar-thumb {
    background: rgba(44, 46, 129, 0.25);
    border-radius: 4px;
}
.faq-pill {
    appearance: none;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-brand-primary);
    background: #fff;
    color: var(--color-brand-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.faq-pill:hover {
    background: #eef0fb;
}
.faq-pill--active {
    background: var(--color-brand-primary);
    color: #fff;
}

.faq-list {
    list-style: none;
    margin: 0 0 clamp(20px, 3vw, 32px);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: #fff;
    border-radius: 12px;
    border-bottom: 2px solid var(--color-brand-primary);
    box-shadow: 0 1px 2px rgba(28, 30, 90, 0.04);
    overflow: hidden;
}
.faq-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
}
.faq-marker {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #00ccff;
}
.faq-q {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
}
.faq-caret {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.faq-item--open .faq-caret {
    transform: rotate(180deg);
}
.faq-item--open .faq-q {
    border-bottom: 1.5px solid #000000;
    padding-bottom: 16px;
}
.faq-answer {
    padding: 0 18px 18px calc(18px + 14px + 14px);
}
.faq-answer p,
.faq-answer li {
    font-family: var(--font-body);
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.faq-answer p {
    margin: 0 0 10px;
}
.faq-answer p:last-child {
    margin-bottom: 0;
}
.faq-answer h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--color-text-primary);
    margin: 14px 0 8px;
}
.faq-answer ul,
.faq-answer ol {
    margin: 4px 0 12px;
    padding-left: 20px;
}
.faq-answer ul ul,
.faq-answer ul ol,
.faq-answer ol ul,
.faq-answer ol ol {
    margin: 6px 0;
}
.faq-answer li {
    margin-bottom: 6px;
}
.faq-answer li:last-child {
    margin-bottom: 0;
}
.faq-answer li::marker {
    color: var(--color-brand-primary);
}
.faq-answer strong {
    color: var(--color-text-primary);
    font-weight: 700;
}
.faq-answer a {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.faq-answer a:hover {
    color: var(--color-brand-mid);
}
.faq-answer blockquote {
    margin: 10px 0;
    padding: 10px 14px;
    background: #eef0fb;
    border-left: 3px solid var(--color-brand-primary);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.7;
    color: var(--color-text-primary);
}
.faq-answer blockquote p {
    margin: 0;
    color: inherit;
}
.faq-table-wrap {
    overflow-x: auto;
    margin: 8px 0 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.faq-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: clamp(12px, 1vw, 14px);
    min-width: 520px;
}
.faq-table thead {
    background: var(--color-brand-primary);
    color: #fff;
}
.faq-table th,
.faq-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.faq-table th {
    color: #fff;
    font-weight: 700;
    font-size: clamp(12px, 1vw, 13px);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.faq-table tbody tr:nth-child(even) {
    background: #fafafb;
}
.faq-table tbody tr:last-child td {
    border-bottom: 0;
}
.faq-table td strong {
    color: var(--color-text-primary);
}
.faq-figure {
    margin: 10px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.faq-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.faq-figure figcaption {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.faq-figure--missing img {
    display: none;
}
.faq-figure--missing figcaption {
    padding: 10px 12px;
    background: #fff7ed;
    border: 1px solid #fcd9b0;
    border-radius: 6px;
    color: var(--color-text-secondary);
}

.faq-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: clamp(16px, 2vw, 24px);
}
.faq-page {
    appearance: none;
    cursor: pointer;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}
.faq-page:hover:not([disabled]):not(.faq-page--active) {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}
.faq-page--active {
    background: var(--color-brand-primary);
    color: #fff;
    border-color: var(--color-brand-primary);
}
.faq-page--arrow {
    color: var(--color-text-secondary);
}
.faq-page[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.faq-page--ellipsis {
    border-color: transparent;
    background: transparent;
    cursor: default;
    color: var(--color-text-muted);
    min-width: 20px;
    padding: 0 2px;
    pointer-events: none;
}

.faq-answer-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(28, 30, 90, 0.06);
    padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.8vw, 34px);
    display: flex;
    flex-direction: column;
    height: clamp(320px, 55vh, 480px);
    overflow: hidden;
}
/* .faq-answer-card::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(
    to bottom,
    rgba(44, 46, 129, 0) 0%,
    var(--color-brand-primary) 35%,
    var(--color-brand-primary) 65%,
    rgba(44, 46, 129, 0) 100%
  );
  opacity: 0.35;
  pointer-events: none;
} */
.faq-answer-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.faq-answer-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.faq-answer-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(18px, 2vw, 22px);
    color: var(--color-text-primary);
    margin: 0 0 12px;
}
.faq-answer-sub {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--color-text-primary);
    margin: 16px 0 8px;
}
.faq-answer-sub--accent {
    color: var(--color-brand-primary);
}
.faq-answer-body {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.75;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .faq-inner {
        padding: 16px 10px;
    }
    .faq-search {
        flex-direction: column;
        gap: 6px;
        padding: 6px;
        width: 100%;
    }
    .faq-filters-row {
        width: 100%;
        gap: 8px;
    }
    .faq-filters-hash {
        font-size: 22px;
    }
    .faq-pill {
        font-size: 11px;
        padding: 5px 10px;
    }
    .faq-search-btn {
        width: 100%;
    }
    .faq-row {
        gap: 10px;
        padding: 14px 14px;
    }
    .faq-answer {
        padding-left: 38px;
    }
    .faq-pagination {
        justify-content: center;
    }
}

/* ── Publications page ── */
.pub-panel {
    background: #f7f7f7;
    padding: clamp(20px, 3vw, 32px);
}
.pub-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0 0 20px;
}
.pub-heading-accent {
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* The CC-BY-NC notice on the NDIC Quarterly panel. These five rules are in the approved
   publications.css, whose other 40-odd rules are already inlined above — this block was the
   only part of it that never came across, which is why the licence was "missing entirely"
   rather than merely unstyled. publications-revamp.css restyles .pub-license and
   .pub-license-text under .px-page but defines neither .pub-license-badge nor the [hidden]
   rule, so without these the badge sizes itself and the block shows on every category. */
.pub-license {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: 10px;
    background: #fafafa;
}
.pub-license[hidden] {
    display: none;
}
.pub-license-badge {
    flex-shrink: 0;
    line-height: 0;
}
.pub-license-badge img {
    display: block;
    width: 88px;
    height: 31px;
}
.pub-license-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.pub-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 70%;
    margin-bottom: 12px;
}
.pub-search-box {
    width: 100%;
    padding: 6px 6px 6px 14px;
    border-radius: 10px;
    gap: 10px;
}
.pub-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 999px;
    border: 0;
    background: #eaeaf2;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    margin-left: auto;
    transition: background 0.18s ease;
}
.pub-sort-btn:hover {
    background: #dcdcef;
}
.pub-sort-icon {
    color: var(--color-text-primary);
    transition: transform 0.2s ease;
}
.pub-sort-btn[aria-expanded="true"] .pub-sort-icon {
    transform: rotate(45deg);
}

.pub-date-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px 14px 22px;
    background: #eaeaf2;
    border-radius: 0 0 20px 0;
    margin: 0 0 0 auto;
    width: fit-content;
}
.pub-date-row[hidden] {
    display: none;
}
.pub-date-input {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    padding: 0;
    min-width: 110px;
    letter-spacing: 0.02em;
}
.pub-date-input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}
.pub-date-input::-webkit-inner-spin-button,
.pub-date-input::-webkit-clear-button {
    display: none;
}
.pub-date-input::-webkit-datetime-edit-text,
.pub-date-input::-webkit-datetime-edit-month-field,
.pub-date-input::-webkit-datetime-edit-day-field,
.pub-date-input::-webkit-datetime-edit-year-field {
    color: var(--color-text-secondary);
}
.pub-date-input:not([value=""]):valid::-webkit-datetime-edit-text,
.pub-date-input:not([value=""]):valid::-webkit-datetime-edit-month-field,
.pub-date-input:not([value=""]):valid::-webkit-datetime-edit-day-field,
.pub-date-input:not([value=""]):valid::-webkit-datetime-edit-year-field {
    color: var(--color-text-primary);
}
.pub-date-sep {
    color: #22d3ee;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}
.pub-date-clear {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 4px;
}
.pub-date-clear:hover {
    color: var(--color-brand-primary);
}

.pub-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pub-card {
    padding: 22px 4px 22px;
    border-bottom: 1px solid #e6e6e6;
}
.pub-card:last-child {
    border-bottom: 0;
}
.pub-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}
.pub-card-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 8px;
    max-width: 720px;
}
.pub-card-year {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #5d727c;
    margin: 0 0 16px;
}
.pub-card-year strong {
    color: var(--color-brand-primary);
    font-weight: 700;
}
.pub-card-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    appearance: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 11px 32px;
    min-width: 200px;
    border-radius: 8px;
    border: 1.5px solid var(--color-brand-primary);
    text-decoration: none;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}
.pub-btn--preview {
    background: transparent;
    color: var(--color-brand-primary);
}
.pub-btn--preview:hover {
    background: #eef0fb;
}
.pub-btn--download {
    background: var(--color-brand-primary);
    color: #fff;
}
.pub-btn--download:hover {
    background: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
    color: #fff;
}

.pub-pagination {
    justify-content: flex-end;
    margin-top: 24px;
}

/* ── Publications reader view ── */
.pub-reader-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.pub-reader-titles {
    min-width: 0;
}
.pub-reader-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: var(--color-text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
}
.pub-reader-year {
    font-family: var(--font-body);
    font-size: 0.875rem;

    color: var(--color-text-secondary);
    margin: 0;
}
.pub-reader-year-val {
    color: var(--color-brand-primary);
    font-weight: 700;
}
.pub-goback-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--color-brand-primary);
    background: transparent;
    color: var(--color-brand-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}
.pub-goback-btn:hover {
    background: var(--color-brand-primary);
    color: #fff;
}
.pub-reader-frame-wrap {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    overflow: hidden;
    height: clamp(480px, 72vh, 820px);
}
.pub-reader-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.pub-reader-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .pub-panel {
        background: transparent;
        padding: 12px 0;
    }
    .pub-toolbar {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .pub-search-box {
        width: 100%;
    }
    .pub-date-row {
        align-self: stretch;
        justify-content: flex-start;
        border-radius: 12px;
        background: #eaeaf2;
    }
    .pub-date-wrap {
        flex: 1 1 auto;
    }
    .pub-date-input {
        min-width: 0;
        width: 100%;
    }
    .pub-card-actions {
        gap: 8px;
    }
    .pub-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 12px;
    }
    .pub-pagination {
        justify-content: center;
    }
    .pub-reader-header {
        flex-direction: column;
    }
    .pub-goback-btn {
        align-self: flex-start;
    }
    .pub-reader-frame-wrap {
        height: 70vh;
    }
}

/* ── Our Mandate page ── */
.mandate-intro-accent {
    color: var(--color-brand-primary);
    font-weight: 700;
}

/* ==========================================================================
   PRE-REVAMP OUR MANDATE — scoped under .mandate-legacy, and that scope is the point.

   The approved build's styles.css contains ZERO `.mandate-tab*`, `.mandate-subtab*`,
   `.mandate-slider*`, `.mandate-wrap`, `.mandate-panel`, `.mandate-card`, `.mandate-h2/h3`,
   `.mandate-list`, `.mandate-cta-wrap` or `.mandate-download-btn` rules; our-mandate-revamp.css is
   the whole mandate stylesheet there, not a layer over this one.

   Left unscoped, these rules reach the ported page. The revamp sheet loads after this file and
   overrides most of them at equal specificity, but two survive because it never restates them, and
   both are visible damage:

     .mandate-card       `max-height: clamp(420px, 65vh, 720px)` + `overflow-y: auto`. The approved
                         card is a plain bordered panel that grows with its content; keeping these
                         turns it into a scrollbox with a hidden scrollbar, so long subtabs like
                         `deposit-insurance-scheme` are silently truncated.
     .mandate-cta-wrap   `::before` and `::after` draw two horizontal rules either side of the
                         download button. The approved treatment is a single top border on the
                         wrapper itself, and the revamp sheet has no pseudo-element rules to cancel
                         these with.

   They are not deleted because `views/public-pages/our-mandate-content.blade.php` — reached through
   the `original_mandate` component and the unrouted `views/our-mandate.blade.php` — still renders
   the pre-revamp markup and would go unstyled. That file puts `mandate-legacy` on its wrapper, so
   scoping to it leaves that surface exactly as it was.

   `.mandate-card[hidden]` is deliberately left UNSCOPED, and it is the one rule here the ported page
   still needs. Only one card is visible at a time and the rest carry `hidden`, but the revamp
   sheet's `.mandate-card { display: flex }` beats the user-agent `[hidden]` rule at equal
   specificity — without this, every subtab of a section renders stacked on top of each other. The
   approved build gets away with omitting it because its Tailwind preflight declares `[hidden]`
   `!important`; ours does not, so the rule lives here.

   `.mandate-intro-accent` above is also unscoped: it is an inline text accent used by `intro_text`,
   not part of the tab treatment, and it collides with nothing.

   MandateRevampPortTest asserts both ends: no unscoped `.mandate-` tab-family selector survives
   here, and the ported page never carries `mandate-legacy`.
   ========================================================================== */

/* Primary tabs — 4-way switcher mirroring yc-tabs but smaller */
.mandate-legacy .mandate-tabs {
    position: sticky;
    top: 56px;
    z-index: 30;
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 10px 0;
    margin: 0 0 clamp(20px, 3vw, 36px);
    background: #fff;
}
@media (min-width: 1024px) {
    .mandate-legacy .mandate-tabs {
        top: 112px;
    }
}
.mandate-legacy .mandate-tabs::before,
.mandate-legacy .mandate-tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(93, 114, 124, 0) 0%,
        rgba(93, 114, 124, 1) 12%,
        rgba(93, 114, 124, 1) 88%,
        rgba(93, 114, 124, 0) 100%
    );
    pointer-events: none;
}
.mandate-legacy .mandate-tabs::before {
    top: 0;
}
.mandate-legacy .mandate-tabs::after {
    bottom: 0;
}
.mandate-legacy .mandate-tabs-divider {
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    margin: 8px 0;
    background: #2c2e81;
    opacity: 0.35;
}
.mandate-legacy .mandate-tab {
    position: relative;
    appearance: none;
    border: 0;
    border-radius: 0;
    padding: 12px 14px;
    flex: 1 1 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(13px, 1.2vw, 16px);
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: center;
    z-index: 0;
    min-width: 0;
    white-space: nowrap;
}
.mandate-legacy .mandate-tab:hover:not(.mandate-tab--active) {
    color: var(--color-brand-primary);
}
.mandate-legacy .mandate-tab--active {
    color: var(--color-brand-primary);
}
.mandate-legacy .mandate-tab--active::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 6px;
    right: 6px;
    background: #eaeaf2;
    border-radius: 4px;
    z-index: -1;
}

/* Panels */
.mandate-legacy .mandate-panel[hidden] {
    display: none;
}

/* Purple-tinted wrap that hosts subtabs + content card (mirrors .sc-wrap / .faq-inner) */
.mandate-legacy .mandate-wrap {
    background: #f2f2f7;
    padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px)
        clamp(20px, 3vw, 36px);
}

/* Secondary tabs — horizontally scrollable row (mirrors sc-form-tabs pattern) */
.mandate-legacy .mandate-subtabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin-bottom: clamp(18px, 2vw, 24px);
    border-bottom: 1px solid #171717;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mandate-legacy .mandate-subtabs::-webkit-scrollbar {
    display: none;
}
.mandate-legacy .mandate-subtab {
    appearance: none;
    cursor: pointer;
    flex: 1 0 auto;
    min-width: max-content;
    padding: 12px 18px;
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: 0;
    background: #fff;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(12px, 1vw, 14px);
    white-space: nowrap;
    text-align: center;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}
.mandate-legacy .mandate-subtab:hover:not(.mandate-subtab--active) {
    color: var(--color-brand-primary);
}
.mandate-legacy .mandate-subtab--active {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: #fff;
}

/* Slider — one dot per subtab; active dot is a wide pill (mirrors image modal) */
.mandate-legacy .mandate-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px auto clamp(16px, 2.4vw, 28px);
    min-height: 20px;
    flex-wrap: wrap;
}
.mandate-legacy .mandate-slider[hidden] {
    display: none;
}
.mandate-legacy .mandate-slider-dot {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    line-height: 0;
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}
.mandate-legacy .mandate-slider-dot:hover:not(.is-active) {
    transform: scale(1.2);
}
.mandate-legacy .mandate-slider-dot:active {
    transform: scale(0.95);
}
.mandate-legacy .mandate-slider-dot.is-active {
    cursor: default;
}

/* Content card */
.mandate-legacy .mandate-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: clamp(24px, 3.2vw, 44px) clamp(22px, 3vw, 44px)
        clamp(28px, 3.2vw, 44px);
    border-radius: 6px;
    max-height: clamp(420px, 65vh, 720px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mandate-legacy .mandate-card::-webkit-scrollbar {
    display: none;
}
.mandate-card[hidden] {
    display: none;
}
.mandate-legacy .mandate-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--color-text-primary);
    margin: 0 0 18px;
    line-height: 1.3;
}
.mandate-legacy .mandate-h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(16px, 1.5vw, 19px);
    color: var(--color-text-primary);
    margin: 16px 0 6px;
    line-height: 1.35;
}
.mandate-legacy .mandate-card p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin: 0 0 14px;
}
.mandate-legacy .mandate-list {
    margin: 6px 0 18px;
    padding-left: 1.4em;
    list-style: disc outside;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.8;
}
.mandate-legacy .mandate-list li {
    padding: 3px 0;
    list-style: inherit;
}
.mandate-legacy .mandate-list li::marker {
    color: var(--color-brand-primary);
}
.mandate-legacy .mandate-card > :first-child {
    margin-top: 0;
}
.mandate-legacy .mandate-cta-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0 0;
    padding-top: 0;
    border-top: 0;
}
.mandate-legacy .mandate-cta-wrap::before,
.mandate-legacy .mandate-cta-wrap::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #181612;
}
@media (min-width: 768px) {
    .mandate-legacy .mandate-cta-wrap::before {
        background: linear-gradient(
            to right,
            transparent 0,
            transparent 10%,
            #181612 10%,
            #181612 100%
        );
    }
    .mandate-legacy .mandate-cta-wrap::after {
        background: linear-gradient(
            to right,
            #181612 0,
            #181612 90%,
            transparent 90%,
            transparent 100%
        );
    }
}
.mandate-legacy .mandate-download-btn {
    display: inline-block;
    padding: 13px 36px;
    background: var(--color-brand-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    transition: background 0.18s ease;
}
.mandate-legacy .mandate-download-btn:hover {
    background: var(--color-brand-dark);
    color: #fff;
}

@media (max-width: 640px) {
    .mandate-legacy .mandate-tab {
        padding: 10px 6px;
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .mandate-legacy .mandate-subtab {
        padding: 10px 14px;
        font-size: 12px;
    }
    .mandate-legacy .mandate-card {
        padding: 18px 16px;
    }
}

/* ── Make a Complaint page ── */
.mc-faq-link {
    color: var(--color-brand-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mc-faq-link:hover {
    color: var(--color-brand-mid);
}

.mc-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mc-required {
    color: #c1272d;
    font-weight: 700;
    margin-left: 2px;
}
.mc-helper {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* Suggestion / Complaint radio toggle */
.mc-toggle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    padding: 4px 0 6px;
}
.mc-toggle-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-primary);
}
.mc-toggle-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-primary);
}
.mc-toggle-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-brand-primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.18s ease;
    flex-shrink: 0;
}
.mc-toggle-option input[type="radio"]:checked::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-brand-primary);
}
.mc-toggle-option:hover input[type="radio"]:not(:checked) {
    border-color: var(--color-brand-mid);
}

/* Textarea variant of sc-input */
.mc-textarea {
    font-family: var(--font-body);
    resize: vertical;
    min-height: 160px;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .mc-toggle-row {
        gap: 12px 18px;
    }
    .mc-toggle-label {
        flex-basis: 100%;
    }
}

/* ══════════════════════════════════════════════════
   Accessibility Widget
══════════════════════════════════════════════════ */

.a11y-widget {
    --a11y-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.a11y-trigger {
    position: fixed;
    right: clamp(10px, 1.4vw, 16px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 9001;
    width: 48px;
    height: 56px;
    border-radius: 16px;
    background: var(--color-brand-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 12px rgba(28, 30, 90, 0.18),
        0 14px 30px rgba(28, 30, 90, 0.2);
    transition:
        background 0.28s var(--a11y-ease),
        transform 0.32s var(--a11y-ease),
        box-shadow 0.32s var(--a11y-ease),
        opacity 0.24s var(--a11y-ease);
}
.a11y-trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.a11y-trigger:hover {
    background: var(--color-brand-mid);
    transform: translateY(-50%) translateX(-3px);
}
/* The trigger fades out while the panel is open. It used to stay put, but the panel now sits at
   the same `right` offset rather than being pushed inboard of a flush-mounted tab, so leaving it
   visible would park it on top of the panel's own edge. */
.a11y-widget.is-open .a11y-trigger {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.85);
}
.a11y-trigger:focus-visible {
    outline: 3px solid rgba(44, 46, 129, 0.4);
    outline-offset: 3px;
}

.a11y-panel {
    position: fixed;
    right: clamp(10px, 1.4vw, 16px);
    top: 50%;
    z-index: 9000;
    width: 300px;
    max-width: calc(100vw - 20px);
    max-height: min(560px, 84vh);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 22px;
    box-shadow:
        0 2px 8px rgba(15, 16, 40, 0.06),
        0 24px 54px rgba(15, 16, 40, 0.18);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(18px) scale(0.97);
    transform-origin: right center;
    transition:
        opacity 0.26s var(--a11y-ease),
        transform 0.32s var(--a11y-ease),
        visibility 0s linear 0.32s;
}
.a11y-widget.is-open .a11y-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(-50%) translateX(0) scale(1);
    transition:
        opacity 0.26s var(--a11y-ease),
        transform 0.32s var(--a11y-ease),
        visibility 0s;
}

.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}
.a11y-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}
.a11y-panel-eyebrow svg {
    color: var(--color-brand-primary);
}
.a11y-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: 999px;
    transition:
        color 0.18s var(--a11y-ease),
        background 0.18s var(--a11y-ease);
}
.a11y-close:hover {
    color: var(--color-text-primary);
    background: rgba(0, 0, 0, 0.09);
}
.a11y-close:focus-visible {
    outline: 2px solid rgba(44, 46, 129, 0.4);
    outline-offset: 2px;
}

.a11y-panel-body {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
    padding: 6px;
}
.a11y-panel-body::-webkit-scrollbar {
    display: none;
}

.a11y-option {
    padding: 10px 10px;
    border-radius: 12px;
}
.a11y-text-size {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.a11y-option-label {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.a11y-size-controls {
    display: inline-flex;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.a11y-size-div {
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 5px 0;
}
.a11y-size-btn {
    min-width: 38px;
    border: none;
    background: transparent;
    color: var(--color-brand-primary);
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 7px 8px;
    transition:
        background 0.18s var(--a11y-ease),
        color 0.18s var(--a11y-ease);
}
.a11y-size-btn:hover {
    background: #fff;
    color: var(--color-brand-primary);
    box-shadow: 0 1px 3px rgba(15, 16, 40, 0.12);
}
.a11y-size-btn:focus-visible {
    outline: 2px solid rgba(44, 46, 129, 0.4);
    outline-offset: 1px;
}
.a11y-size-sm {
    font-size: 12px;
}
.a11y-size-lg {
    font-size: 16px;
}

.a11y-lang {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.a11y-lang-field {
    position: relative;
    display: block;
}
.a11y-lang-select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 10px 32px 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    color: var(--color-text-primary);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    cursor: pointer;
    transition:
        border-color 0.2s var(--a11y-ease),
        box-shadow 0.2s var(--a11y-ease);
}
.a11y-lang-select:hover {
    border-color: rgba(44, 46, 129, 0.4);
}
.a11y-lang-select:focus-visible {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px rgba(44, 46, 129, 0.18);
}
.a11y-lang-select optgroup {
    font-family: var(--font-body);
    font-weight: 700;
}
.a11y-lang-select option {
    font-weight: 500;
}
.a11y-lang-caret {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
}
.a11y-lang-note {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--color-text-secondary);
}

/* Google Translate ships its own visible UI — a top banner, a branded dropdown, hover tooltips —
   and none of it is wanted: the language choice already lives in the panel above. The host div is
   only a mount point for the API, so it is hidden along with everything the API injects.

   `body { top: 0 }` is part of the same removal, not a stray reset. The banner is positioned by
   pushing the whole document down with an inline `top` on <body>; with the banner hidden that
   offset would leave a blank strip under the viewport top on every translated page. */
.a11y-goog-host,
.goog-te-banner-frame,
.goog-te-gadget,
#goog-gt-tt,
.goog-tooltip,
.skiptranslate iframe {
    display: none !important;
}
body {
    top: 0 !important;
}
/* Translated runs get a yellow highlight by default, which fights every background on the site. */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

.a11y-toggle-row {
    display: flex;
    align-items: center;
    transition: background 0.18s var(--a11y-ease);
}
.a11y-toggle-row:hover {
    background: rgba(44, 46, 129, 0.05);
}
.a11y-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    width: 100%;
    user-select: none;
}
.a11y-label-text {
    order: 1;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.a11y-checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.a11y-switch {
    order: 2;
    position: relative;
    width: 42px;
    height: 24px;
    background: #d3d3dc;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 0.24s var(--a11y-ease);
}
.a11y-switch::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.24s var(--a11y-ease);
}
.a11y-checkbox:checked + .a11y-switch {
    background: var(--color-brand-primary);
}
.a11y-checkbox:checked + .a11y-switch::after {
    transform: translateX(18px);
}
.a11y-checkbox:focus-visible + .a11y-switch {
    outline: 2px solid rgba(44, 46, 129, 0.45);
    outline-offset: 2px;
}

/* The reset button's box, colours and hover are NOT here — they are further down the file, in the
   block that also exists in the approved sheet and, being later, is the one that actually paints.
   Only this focus ring is declared at this point, because nothing later redeclares it. Porting the
   duplicate the approved sheet carries here would have added twenty lines that never take effect. */
.a11y-reset-btn:focus-visible {
    outline: 2px solid rgba(44, 46, 129, 0.4);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .a11y-panel,
    .a11y-trigger {
        transition-duration: 0.01ms;
    }
}

/* ── Accessibility mode overrides ──
   All modes exclude the accessibility widget and FAB from their effects.
   accessibility-widget and floating-action are custom elements, so
   :not(accessibility-widget *) and :not(floating-action *) shield them.

   THE CHAT WIDGET IS SHIELDED THE SAME WAY, and it is the one that needs saying out loud.
   layouts/app.blade.php loads https://ndic-widget.peekahq.co/widget.js, which mounts into the LIGHT
   DOM under a `.ndic-w-root` container and gives its interior classes the `ndic-w-` prefix. There
   is no shadow root, so every selector below reaches inside it: without the shields, High Contrast
   paints the chat transcript white-on-black, Light Background paints every bubble white, Negative
   Contrast leaves it inverted while the rest of the page is restored, and Readable Font rewrites
   its type. Two shapes are used, matching the two shapes already here:

     :not(.ndic-w-root):not(.ndic-w-root *)   on the descendant-of-container selectors
     :not([class*="ndic-w-"])                 on the ones that already filter by class substring

   Negative Contrast is the exception and works the other way round: `html` carries the invert, so
   the widget is double-inverted back to normal alongside `.a11y-trigger` and `.a11y-panel`.

   A new display mode added here must carry the shield too — the chat window is a third-party
   surface we do not control the markup of, and a mode that reaches into it is a visible defect on
   every page of the site. */

/* Filter-based modes use a backdrop-filter overlay at z-index 8999.
   The accessibility widget (z-index 9000+) sits above it and stays unaffected. */
/* Grayscale — use backdrop-filter on a fixed overlay so the accessibility
   widget (z-index 9000+) sits above it and stays full colour */
html.a11y-grayscale body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 8999;
    backdrop-filter: grayscale(100%);
    -webkit-backdrop-filter: grayscale(100%);
    background: transparent;
    pointer-events: none;
}

/* High contrast */
html.a11y-high-contrast body {
    background: #000 !important;
}
html.a11y-high-contrast
    *:not(accessibility-widget):not(accessibility-widget *):not(
        floating-action
    ):not(floating-action *):not(.ndic-w-root):not(.ndic-w-root *) {
    color: #fff !important;
}
html.a11y-high-contrast
    a:not(accessibility-widget a):not(floating-action a):not(.ndic-w-root a) {
    color: #ffff00 !important;
}
html.a11y-high-contrast section,
html.a11y-high-contrast header,
html.a11y-high-contrast footer,
html.a11y-high-contrast nav,
html.a11y-high-contrast
    div:not([class*="fab"]):not([class*="a11y"]):not([class*="ndic-w-"]) {
    background: #000 !important;
    border-color: #fff !important;
}

/* Negative contrast — filter on html inverts everything.
   Non-logo images and the accessibility widget are double-inverted
   (same filter applied twice = identity) to restore their original appearance.
   Logos keep a single inversion so they stay visible on the inverted background. */
html.a11y-negative-contrast {
    filter: invert(100%) hue-rotate(180deg);
}

/* Double-invert all images EXCEPT logos — restores original photo colours */
html.a11y-negative-contrast img:not([src*="/logo/"]) {
    filter: invert(100%) hue-rotate(180deg);
}

/* Double-invert the accessibility widget elements so they stay usable.
   The chat widget joins them: `html` carries the inversion, so a second one on `.ndic-w-root`
   cancels it and the chat window keeps its own colours. */
html.a11y-negative-contrast .a11y-trigger,
html.a11y-negative-contrast .a11y-panel,
html.a11y-negative-contrast .ndic-w-root {
    filter: invert(100%) hue-rotate(180deg);
}

/* Light background with dark text */
html.a11y-light-bg
    *:not(accessibility-widget):not(accessibility-widget *):not(
        floating-action
    ):not(floating-action *):not(.ndic-w-root):not(.ndic-w-root *) {
    color: #111111 !important;
}
html.a11y-light-bg body,
html.a11y-light-bg section,
html.a11y-light-bg main,
html.a11y-light-bg article,
html.a11y-light-bg aside,
html.a11y-light-bg header,
html.a11y-light-bg footer,
html.a11y-light-bg nav,
html.a11y-light-bg form,
html.a11y-light-bg fieldset,
html.a11y-light-bg table,
html.a11y-light-bg ul,
html.a11y-light-bg ol,
html.a11y-light-bg li,
html.a11y-light-bg
    div:not([class*="fab"]):not([class*="a11y"]):not([class*="modal"]):not(
        [class*="image-modal"]
    ):not([class*="ndic-w-"]),
html.a11y-light-bg
    button:not([class*="a11y"]):not([class*="fab"]):not([class*="ndic-w-"]),
html.a11y-light-bg
    a:not([class*="fab"]):not([class*="a11y"]):not([class*="ndic-w-"]),
html.a11y-light-bg input:not([class*="ndic-w-"]),
html.a11y-light-bg select:not([class*="ndic-w-"]),
html.a11y-light-bg textarea:not([class*="ndic-w-"]),
html.a11y-light-bg
    span:not([class*="fab"]):not([class*="a11y"]):not([class*="ndic-w-"]) {
    background-color: #ffffff !important;
}
/* Keep media and overlay-style elements transparent */
html.a11y-light-bg img,
html.a11y-light-bg svg,
html.a11y-light-bg video,
html.a11y-light-bg canvas,
html.a11y-light-bg .fab-root,
html.a11y-light-bg .fab-menu,
html.a11y-light-bg .fab-item {
    background-color: transparent !important;
}
/* Restore FAB colored elements */
html.a11y-light-bg .fab-trigger,
html.a11y-light-bg .fab-item-icon {
    background-color: var(--color-brand-primary) !important;
    color: #ffffff !important;
}
html.a11y-light-bg .fab-item-label {
    color: #111111 !important;
    background-color: transparent !important;
}

/* Underline links — skip widget, FAB and chat links */
html.a11y-underline-links
    a:not(accessibility-widget a):not(floating-action a):not(.ndic-w-root a) {
    text-decoration: underline !important;
}

/* Readable font — skip widget, FAB and chat */
html.a11y-readable-font
    *:not(accessibility-widget):not(accessibility-widget *):not(
        floating-action
    ):not(floating-action *):not(.ndic-w-root):not(.ndic-w-root *) {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.025em;
}

/* Mobile only shortens the panel and squares off its corners. The old rules here moved both the
   trigger and the panel to the bottom-right, which was needed while the trigger was a tab flush to
   the edge and the panel had to clear it; now that both sit at the same inset and the trigger fades
   out on open, that repositioning only fought the base `transform` and left the panel offset from
   the control that opened it. */
@media (max-width: 640px) {
    .a11y-panel {
        border-radius: 16px;
        max-height: min(440px, 68vh);
    }

    .a11y-panel-header {
        border-radius: 16px 16px 0 0;
    }
}

.a11y-reset-row {
    padding: 12px 16px 14px;
    display: flex;
    justify-content: center;
}

.a11y-reset-btn {
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    letter-spacing: 0.03em;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}

.a11y-reset-btn:hover {
    border-color: #c0392b;
    color: #c0392b;
    background: #fff5f5;
}

html {
    scroll-behavior: auto !important;
}
@keyframes preloader-slide {
    0% {
        left: -55%;
    }
    100% {
        left: 100%;
    }
}

.ab {
    --navy: #2c2e81;
    --navy-mid: #3b3f9e;
    --navy-pale: #eef0fb;
    --ink: #141313;
    --muted: #5e5e57;
    --line: rgba(20, 19, 19, 0.08);
}
.ab-wrap {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 24px;
}
.ab-sec {
    padding: 72px 0;
}
@media (max-width: 768px) {
    .ab-sec {
        padding: 52px 0;
    }
    .ab-wrap {
        max-width: 95%;
        padding: 0 12px;
    }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 16px;
}
.eyebrow span {
    width: 26px;
    height: 2px;
    background: var(--navy);
    display: inline-block;
}
.section-h2 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.ab-sec-head.center {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 8px;
}
.ab-sec-head.center .eyebrow {
    justify-content: center;
}
.ab-sec-sub {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 14px;
}

.reveal {
    opacity: 0;
    transform: translateY(64px) scale(0.94);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.reveal.in {
    opacity: 1;
    transform: none;
}
.reveal.d1 {
    transition-delay: 0.1s;
}
.reveal.d2 {
    transition-delay: 0.2s;
}
.reveal.d3 {
    transition-delay: 0.3s;
}
.reveal.d4 {
    transition-delay: 0.4s;
}
.reveal.d5 {
    transition-delay: 0.5s;
}

.ab-hero {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}
.ab-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ab-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        rgba(20, 22, 60, 0.94) 0%,
        rgba(27, 39, 53, 0.6) 55%,
        rgba(27, 39, 53, 0.18) 100%
    );
}
.ab-hero-inner {
    position: relative;
}
.ab-hero .eyebrow {
    color: #fff;
}
.ab-hero .eyebrow span {
    background: #fff;
}
.ab-hero h1 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 5rem);
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ab-hero p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.7;
    max-width: 520px;
    margin-top: 18px;
}

.ab-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.ab-overview h2 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.22;
    color: var(--ink);
}
.ab-overview h2 strong {
    font-weight: 800;
    color: var(--navy);
}
.ab-overview .body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--muted);
}
@media (max-width: 900px) {
    .ab-overview {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.ab-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 40px 0;
    max-width: 980px;
    margin: 0 auto;
}
.ab-stat .num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ab-stat .lab {
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
}
@media (max-width: 700px) {
    .ab-stats {
        grid-template-columns: 1fr 1fr;
        gap: 28px 18px;
    }
}

.ab-vm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 40px;
}
@media (max-width: 860px) {
    .ab-vm {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   PRE-REVAMP VISION & MISSION CARDS — scoped under .ab-page, same reasoning as .ab-mandate above.

   `css/public/about.css` owns `.vm-card` now, and the approved styles.css has ZERO rules for it
   (`grep -c "\.vm-card" ndic-reference/css/styles.css` → 0; its only `vm-*` selectors are the
   `.vm-img-wrap` pair, which no markup on either side uses). Loading later did not win: the four
   declarations below set properties the approved sheet never declares, so there was nothing for it
   to override.

   Measured at 1680px against the reference, unscoped this cost:
     · `.vm-card.light`'s `border: 1px solid var(--line)` — a hairline on the light card that the
       approved design does not have (reference `border-top-width: 0px`), which also pushed the
       card's `<h3>` 2px off its `margin: auto 0 0` baseline (116.875px against 118.875px).
     · `.vm-card::before` — a 2px × 577px navy accent bar across the top of BOTH cards at
       `left: 38px`. about.css declares `.vm-card.dark::after` (the radial glow), never a
       `::before`, so neither card contested it; the reference computes `content: none` on both.
     · `box-shadow` on `.vm-card.light` and `.vm-card.dark` — about.css puts a shadow on
       `:hover` only, so both cards sat under a permanent drop shadow at rest.

   Not deleted, because the pre-revamp markup that needs them is still live: the `original_about`
   escape hatch renders `views/public-pages/about-content.blade.php`, which uses `.vm-card`
   `.light`/`.dark`, `.vm-ico` and `.vm-eyebrow`, and the seeded `original_about` / About-v1
   `html_block` rows carry the same classes. Both now sit inside `ab-page`. The shared
   `feature_cards` component uses this family too and carries its own `ab-page` for that reason —
   see the comment there. The approved `about_vision_mission` component deliberately does not,
   exactly as the approved helpdesk markup omits `hd-page`.

   `.ab-vm` above is deliberately NOT scoped: about.css redeclares every property it sets, so it is
   already fully overridden, and `feature_cards` uses it as a plain two-column grid.
   ========================================================================== */
.ab-page .vm-card {
    position: relative;
    border-radius: 20px;
    padding: 40px 38px;
    overflow: hidden;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s;
}
.ab-page .vm-card.light {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.06);
}
.ab-page .vm-card.dark {
    background: linear-gradient(150deg, #2c2e81 0%, #1b1d57 100%);
    box-shadow: 0 18px 48px rgba(20, 22, 60, 0.28);
}
.ab-page .vm-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.16);
}
.ab-page .vm-card.dark:hover {
    box-shadow: 0 26px 64px rgba(20, 22, 60, 0.4);
}
.ab-page .vm-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 38px;
    right: 38px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--navy), transparent);
}
.ab-page .vm-card.dark::before {
    background: linear-gradient(90deg, transparent, #8f93e0, transparent);
}
.ab-page .vm-ico {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.ab-page .vm-card.light .vm-ico {
    background: var(--navy-pale);
}
.ab-page .vm-card.light .vm-ico svg {
    color: var(--navy);
}
.ab-page .vm-card.dark .vm-ico {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.ab-page .vm-card.dark .vm-ico svg {
    color: #fff;
}
.ab-page .vm-ico svg {
    width: 26px;
    height: 26px;
}
.ab-page .vm-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.ab-page .vm-card.light .vm-eyebrow {
    color: var(--navy);
}
.ab-page .vm-card.dark .vm-eyebrow {
    color: #b9bcf0;
}
.ab-page .vm-card h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}
.ab-page .vm-card.light h3 {
    color: var(--ink);
}
.ab-page .vm-card.dark h3 {
    color: #fff;
}
.ab-page .vm-card p {
    font-size: 15px;
    line-height: 1.7;
}
.ab-page .vm-card.light p {
    color: var(--muted);
}
.ab-page .vm-card.dark p {
    color: rgba(255, 255, 255, 0.7);
}

.ab-values {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 44px;
}
@media (max-width: 1100px) {
    .ab-values {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 680px) {
    .ab-values {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 420px) {
    .ab-values {
        grid-template-columns: 1fr;
    }
}
.val-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px 24px 30px;
    overflow: hidden;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s,
        border-color 0.3s;
}
.val-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(20, 22, 60, 0.12);
    border-color: rgba(44, 46, 129, 0.4);
}
.val-num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: rgba(44, 46, 129, 0.85);
    letter-spacing: 0.06em;
}
.val-ico {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--navy-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0 18px;
    transition: background 0.25s;
}
.val-card:hover .val-ico {
    background: var(--navy);
}
.val-ico svg {
    width: 22px;
    height: 22px;
    color: var(--navy);
    transition: color 0.25s;
}
.val-card:hover .val-ico svg {
    color: #fff;
}
.val-card h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 8px;
}
.val-card p {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.ab-band {
    background: #faf9ff;
}
/* ==========================================================================
   PRE-REVAMP ABOUT MANDATE & FUNCTIONS — scoped under .ab-page, same reasoning as .hd-page above.

   `css/public/about.css` owns `.ab-mandate`, `.mn-*` and `.fn-*` now; the approved styles.css has
   ZERO rules for any of them (`grep -c "\.mn-item\|\.ab-fns\|\.ab-mandate" ndic-reference/css/styles.css`
   → 0). Loading later is not enough to win: these rules set properties the approved sheet never
   declares, so there was nothing for it to override and they leaked straight through onto the
   ported page. Measured at 1680px, the damage was `.ab-mandate` forced into a two-column card grid
   (halving every `.mn-item` to 615px against the reference's 1248px), `.ab-fns` capped at 920px
   against 1328px, `.mn-num` crushed from a 66px ghost numeral into a 38px pale rounded chip,
   `.fn-n` pinned to 48px, and a spurious `border-top` on every `.fn-row`.

   Not deleted, because the pre-revamp markup that needs them is still live: the `original_about`
   escape hatch renders `views/public-pages/about-content.blade.php`, which uses `.ab-mandate`,
   `.mn-card`, `.mn-top`, `.mn-num`, `.ab-fns`, `.fn-row` and `.fn-n`, and six stored
   `page_components` rows still hold `original_about` (superseded About versions 3–6 and two draft
   versions of the `triage` page), any of which a restore or a preview will render. That blade
   carries `ab-page`; the approved components deliberately do not, exactly as the approved helpdesk
   markup omits `hd-page`.
   ========================================================================== */
.ab-page .ab-mandate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}
@media (max-width: 800px) {
    .ab-page .ab-mandate {
        grid-template-columns: 1fr;
    }
}
.ab-page .mn-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px 28px 30px;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s;
}
.ab-page .mn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(20, 22, 60, 0.1);
}
.ab-page .mn-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.ab-page .mn-num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: var(--navy);
    background: var(--navy-pale);
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ab-page .mn-card h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
}
.ab-page .mn-card p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}

.ab-page .ab-fns {
    margin-top: 36px;
    max-width: 920px;
}
.ab-page .fn-row {
    display: flex;
    gap: 22px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}
.ab-page .fn-row:last-child {
    border-bottom: 1px solid var(--line);
}
.ab-page .fn-n {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: var(--navy);
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
}
.ab-page .fn-row p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #44443f;
}

.ab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    transition:
        transform 0.2s,
        background 0.2s,
        color 0.2s;
}
.ab-btn.solid {
    background: #fff;
    color: var(--navy);
}
.ab-btn.solid:hover {
    transform: translateY(-2px);
}
.ab-btn.ghost {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.ab-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ab #history-sticky-wrapper {
    background: #0d0f2e;
}
.ab #history-sticky {
    background: #0d0f2e;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.hx-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
}
.hx-media {
    background-size: cover;
    background-position: center;
    position: relative;
}
.hx-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(13, 15, 46, 0) 52%,
        rgba(13, 15, 46, 0.94) 100%
    );
}
.hx-panel {
    background: #14163c;
    display: flex;
    align-items: center;
    padding: 0 clamp(32px, 5vw, 84px);
    position: relative;
    z-index: 1;
}
.hx-panel-inner {
    max-width: 650px;
}
.hx-num {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #8f93e0;
    margin-bottom: 18px;
}
.hx-year {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 1;
    color: #fff;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}
.hx-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.3;
    color: #b9bcf0;
    margin-bottom: 18px;
}
.hx-body {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.66);

    overflow: hidden;
}
.hx-body p {
    margin: 0 0 10px;
}
.hx-body ul {
    margin: 8px 0 0;
    padding-left: 18px;
    list-style: disc;
}
.hx-body li {
    margin-bottom: 5px;
}
.hx-body strong {
    color: #fff;
}
.hx-dots {
    display: flex;
    gap: 6px;
    margin-top: 22px;
}
.hx-dot {
    width: 8px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition:
        width 0.3s,
        background 0.3s;
}
.hx-dot.on {
    width: 24px;
    background: #fff;
}
.hx-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-template-columns: none;
    background-image:
        linear-gradient(
            180deg,
            rgba(13, 15, 46, 0.8) 0%,
            rgba(13, 15, 46, 0.9) 100%
        ),
        radial-gradient(
            120% 120% at 50% 0%,
            rgba(27, 29, 87, 0.55) 0%,
            rgba(13, 15, 46, 0.85) 70%
        ),
        url("../../assets/images/hero-building.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hx-intro-inner {
    max-width: 760px;
    padding: 0 28px;
}
.hx-intro .eyebrow {
    justify-content: center;
    margin-bottom: 18px;
}
.hx-intro-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 5vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 20px;
}
.hx-intro-title em {
    font-style: normal;
    background: linear-gradient(120deg, #c7c9ff, #8f93e0 60%, #6b6fd8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hx-intro-desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.66);
    max-width: 560px;
    margin: 0 auto 26px;
}
.hx-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8f93e0;
}
.hx-scroll-hint svg {
    animation: hx-bob 1.6s ease-in-out infinite;
}
@keyframes hx-bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}
.ab #history-sticky.is-flow {
    position: relative !important;
    height: auto !important;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    padding: 44px 18px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ab #history-sticky.is-flow::-webkit-scrollbar {
    display: none;
}
.is-flow .hx-slide {
    position: relative;
    inset: auto;
    flex: 0 0 92%;
    height: 95vh;
    scroll-snap-align: center;
    display: block;
    transform: none !important;
    opacity: 1 !important;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}
@media (min-width: 560px) {
    .is-flow .hx-slide {
        flex-basis: 72%;
    }
}
.is-flow .hx-slide:not(.hx-intro) {
    display: flex;
    flex-direction: column;
}
.is-flow .hx-media {
    height: 150px;
    flex-shrink: 0;
}
.is-flow .hx-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 20px 22px;
}
.is-flow .hx-media::after {
    background: linear-gradient(
        180deg,
        rgba(13, 15, 46, 0) 45%,
        rgba(13, 15, 46, 0.55) 100%
    );
}
.is-flow .hx-panel {
    padding: 26px 24px 30px;
}
.is-flow .hx-panel-inner {
    max-width: none;
}
.is-flow .hx-num {
    margin-bottom: 10px;
}
.is-flow .hx-year {
    font-size: 28px;
    margin-bottom: 5px;
}
.is-flow .hx-title {
    font-size: 14px;
    margin-bottom: 10px;
}
.is-flow .hx-body {
    max-height: none;
    font-size: 12px;
    line-height: 1.5;
}
.is-flow .hx-body p {
    margin-bottom: 7px;
}
.is-flow .hx-body li {
    margin-bottom: 3px;
}
.is-flow .hx-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 26px;
}
.is-flow .hx-intro .hx-intro-title {
    font-size: clamp(26px, 7vw, 36px);
}
.is-flow .hx-scroll-hint {
    display: none;
}
.is-flow .hx-dots {
    display: none;
}
.hx-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 18px 44px;
    background: #0d0f2e;
}
.hx-nav-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    transition:
        background 0.15s,
        opacity 0.15s;
}
.hx-nav-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}
.hx-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.hx-nav-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}
.hx-nav-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition:
        width 0.25s,
        background 0.25s;
}
.hx-nav-dot.on {
    width: 22px;
    background: #fff;
}

.ab .board-member-card .rounded-lg {
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(20, 22, 60, 0.08);
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s;
}
.ab .board-member-card:hover .rounded-lg {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(20, 22, 60, 0.18);
}
.ab .board-member-card p.font-semibold {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ab #org-chart-grid .org-box {
    border-radius: 11px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    min-height: 46px;
}
.ab .org-box.active-l2 {
    background: rgba(255, 255, 255, 0.95);
    border-color: #fff;
    color: var(--navy);
}
.ab .org-box.state-orange {
    background: rgba(255, 255, 255, 0.92);
    border-color: #fff;
    color: var(--navy);
}
.ab .org-box.state-red {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.ab .board-name-number {
    color: var(--navy);
    font-weight: 700;
}
.ab .accordion-trigger .label-col span.bg-brand-primary {
    border-radius: 999px;
}

.ct-section {
    padding: clamp(40px, 6vw, 72px) 0;
}

.ct-quick {
    background: #f5f5f7;
}
.ct-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
@media (max-width: 900px) {
    .ct-quick-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.ct-qcard {
    background: #ffffff;
    border-radius: 16px;
    padding: 26px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    border: 1px solid #ececf2;
}
.ct-qcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(44, 46, 129, 0.1);
}
.ct-qcard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(173, 212, 222, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ct-qcard-icon svg {
    width: 22px;
    height: 22px;
    stroke: #2c2e81;
}
.ct-qcard-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777776;
    margin: 0 0 4px;
}
.ct-qcard-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: #141313;
    margin: 0 0 4px;
    line-height: 1.3;
}
.ct-qcard-value a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.ct-qcard-value a:hover {
    color: #2c2e81;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ct-qcard-sep {
    color: #b8b8c2;
    font-weight: 400;
    margin: 0 6px;
}
.ct-qcard-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: #525252;
    margin: 0;
    line-height: 1.5;
}

.ct-form-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
    align-items: start;
}
@media (max-width: 1024px) {
    .ct-form-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.ct-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ct-map {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #ececf2;
    background: #eef0f7;
}
.ct-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.ct-aside-card {
    background: #ffffff;
    border: 1px solid #ececf2;
    border-radius: 16px;
    padding: 22px 24px;
}
.ct-aside-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #141313;
    margin: 0 0 10px;
}
.ct-aside-card p {
    font-family: var(--font-body);
    font-size: 14px;
    color: #525252;
    line-height: 1.65;
    margin: 0;
}
.ct-aside-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #2c2e81;
    font-weight: 600;
}
.ct-aside-meta svg {
    width: 16px;
    height: 16px;
    stroke: #2c2e81;
}

.ct-captcha {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #f6f6fa;
    border: 1px dashed #d1d2dc;
    border-radius: 8px;
}
.ct-captcha-check {
    width: 22px;
    height: 22px;
    border: 1.5px solid #2c2e81;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
}
.ct-captcha-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: #525252;
}

.ct-offices {
    background: #ffffff;
}
.ct-offices-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.ct-offices-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #777776;
    text-transform: uppercase;
    margin: 0;
}
.ct-offices-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    color: #141313;
    margin: 6px 0 0;
    line-height: 1.2;
}
.ct-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2c2e81;
    text-decoration: none;
    padding: 12px 22px;
    border: 1.5px solid #2c2e81;
    border-radius: 8px;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}
.ct-view-all:hover {
    background: #2c2e81;
    color: #ffffff;
}
.ct-view-all svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    transition: transform 0.25s ease;
}
.ct-view-all:hover svg {
    transform: translateX(3px);
}

.ct-office-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
@media (max-width: 1024px) {
    .ct-office-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .ct-office-grid {
        grid-template-columns: 1fr;
    }
}

.ct-office {
    position: relative;
    background: #ffffff;
    border: 1px solid #ececf2;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.ct-office:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(44, 46, 129, 0.12);
    border-color: rgba(44, 46, 129, 0.2);
}
.ct-office-pin {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(173, 212, 222, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-office-pin svg {
    width: 20px;
    height: 20px;
    stroke: #2c2e81;
}
.ct-office-city {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: #141313;
    margin: 0;
}
.ct-office-tag {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #097bbf;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.ct-office-addr {
    font-family: var(--font-body);
    font-size: 14px;
    color: #525252;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.ct-office-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    color: #2c2e81;
    text-decoration: none;
    margin-top: 4px;
}
.ct-office-link:hover {
    text-decoration: underline;
}
.ct-office-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    transition: transform 0.2s ease;
}
.ct-office-link:hover svg {
    transform: translateX(2px);
}

.ct-help {
    background: #1b2735;
    color: #ffffff;
}
.ct-help-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 28px;
    align-items: center;
}
@media (max-width: 900px) {
    .ct-help-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}
.ct-help-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    margin: 0 0 6px;
}
.ct-help-sub {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    line-height: 1.65;
}
.ct-help-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.ct-help-line .ct-qcard-icon {
    background: rgba(255, 255, 255, 0.08);
}
.ct-help-line .ct-qcard-icon svg {
    stroke: #ffffff;
}
.ct-help-line p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
}
.ct-help-line strong {
    color: #ffffff;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

/* ==========================================================================
   PRE-REVAMP HELPDESK — scoped under .hd-page, and that scope is the point.

   The approved build's styles.css contains ZERO `.hd-*` rules; helpdesk-revamp.css is the whole
   helpdesk stylesheet there, not a layer over this one. Left unscoped, these 36 rules reach the
   ported page too — helpdesk-revamp.css overrides some of them but not `.hd-grid`'s grey rounded
   panel, `.hd-card`'s centred text and 210px floor, or the `.hd-card::before/::after` divider
   lines, all of which the approved design does not have.

   They are not deleted because three surfaces in this build still render the pre-revamp markup and
   would go unstyled: the non-CMS fallback `views/helpdesk.blade.php`, the `original_public_page`
   escape hatch `views/public-pages/helpdesk-content.blade.php`, and the `html_block` content in
   `CmsContentSeeder::helpdeskHtml()`. All three put `hd-page` on their `<main>`, so scoping to it
   leaves them exactly as they were.

   The approved markup therefore does NOT carry `hd-page`, even though the reference's <main> does.
   The class is inert in the approved sheet (0 rules), so omitting it renders what the reference
   renders. HelpdeskRevampPortTest asserts both halves: no unscoped `.hd-` selector survives here,
   and no `hd-page` reaches the ported page.
   ========================================================================== */

@property --hd-ink {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

.hd-page {
    background: #f3f3f8;
}
.hd-page .hd-hero {
    padding: 72px 0 28px;
    text-align: center;
}
.hd-page .hd-hero h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    color: #141313;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.35;
    max-width: 820px;
    margin: 0 auto;
}
.hd-page .hd-hero h1 .hd-hero-sub {
    display: block;
    margin-top: 6px;
    color: #2a2a2a;
    font-weight: 400;
}

.hd-page .hd-section {
    padding: 8px 24px 96px;
}
@media (min-width: 1024px) {
    .hd-page .hd-section {
        padding: 8px 10% 96px;
    }
}
@media (min-width: 1440px) {
    .hd-page .hd-section {
        padding: 8px 13% 110px;
    }
}

.hd-page .hd-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    background: #f7f7fb;
    border-radius: 24px;
    padding: 36px;
}
.hd-page .hd-card::before,
.hd-page .hd-card::after {
    content: "";
    position: absolute;
    background: #097bbf;
    pointer-events: none;
    display: none;
}
.hd-page .hd-card::before {
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 120px;
}
.hd-page .hd-card::after {
    top: -14px;
    height: 1px;
}

@media (max-width: 600px) {
    .hd-page .hd-card:not(:first-child)::after {
        display: block;
        left: 10%;
        right: 10%;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .hd-page .hd-card:nth-child(2n)::before {
        display: block;
    }
    .hd-page .hd-card:nth-child(n + 3)::after {
        display: block;
    }
    .hd-page .hd-card:nth-child(2n + 1):nth-child(n + 3)::after {
        left: 10%;
        right: -14px;
    }
    .hd-page .hd-card:nth-child(2n):nth-child(n + 3)::after {
        left: -14px;
        right: 10%;
    }
}

@media (min-width: 1025px) {
    .hd-page .hd-card:not(:nth-child(3n + 1))::before {
        display: block;
    }
    .hd-page .hd-card:nth-child(n + 4)::after {
        display: block;
    }
    .hd-page .hd-card:nth-child(3n + 1):nth-child(n + 4)::after {
        left: 10%;
        right: -14px;
    }
    .hd-page .hd-card:nth-child(3n + 2):nth-child(n + 4)::after {
        left: -14px;
        right: -14px;
    }
    .hd-page .hd-card:nth-child(3n):nth-child(n + 4)::after {
        left: -14px;
        right: 10%;
    }
}
@media (max-width: 1024px) {
    .hd-page .hd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 24px;
        gap: 20px;
    }
}
@media (max-width: 600px) {
    .hd-page .hd-grid {
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 16px;
    }
    .hd-page .hd-hero {
        padding: 48px 0 18px;
    }
    .hd-page .hd-section {
        padding: 4px 18px 64px;
    }
}

.hd-page .hd-card {
    --hd-ink: 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: radial-gradient(
        circle at 50% 32%,
        #2c2e81 calc(var(--hd-ink) - 0.5%),
        transparent var(--hd-ink)
    );
    border-radius: 22px;
    padding: 28px 26px 30px;
    text-decoration: none;
    color: inherit;
    transition:
        --hd-ink 0.65s cubic-bezier(0.65, 0, 0.35, 1),
        box-shadow 0.4s ease;
    min-height: 210px;
}

.hd-page .hd-card-icon {
    width: 66px;
    height: 66px;
    border-radius: 13px;
    background: rgba(173, 212, 222, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transform-origin: center;
    transition:
        background 0.35s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hd-page .hd-card-icon svg {
    width: 30px;
    height: 30px;
    stroke: #2c2e81;
    transition: stroke 0.3s ease;
}

.hd-page .hd-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #141313;
    margin: 0;
    transition: color 0.3s ease;
}

.hd-page .hd-card-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.65;
    color: #525252;
    margin: 14px auto 0;
    max-width: 92%;
    transition: color 0.3s ease;
}

.hd-page .hd-card:hover,
.hd-page .hd-card:focus-visible {
    --hd-ink: 100%;
    box-shadow: 0 14px 32px rgba(44, 46, 129, 0.22);
}
.hd-page .hd-card:hover .hd-card-icon,
.hd-page .hd-card:focus-visible .hd-card-icon {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.12) rotate(-8deg);
}
.hd-page .hd-card:hover .hd-card-icon svg,
.hd-page .hd-card:focus-visible .hd-card-icon svg {
    stroke: #ffffff;
}
.hd-page .hd-card:hover .hd-card-title,
.hd-page .hd-card:focus-visible .hd-card-title {
    color: #ffffff;
    transition-delay: 0.15s;
}
.hd-page .hd-card:hover .hd-card-desc,
.hd-page .hd-card:focus-visible .hd-card-desc {
    color: rgba(255, 255, 255, 0.85);
    transition-delay: 0.2s;
}

.hd-page .hd-card:focus-visible {
    outline: 2px solid #2c2e81;
    outline-offset: 3px;
}

.md-page {
    background: #ffffff;
}

.md-hero {
    position: relative;
    background: #fff;
    isolation: isolate;
}
.md-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    bottom: -80px;
    background-image: url("../../assets/images/mediaherobg.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 55%,
        rgba(0, 0, 0, 0.4) 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 55%,
        rgba(0, 0, 0, 0.4) 80%,
        transparent 100%
    );
}
.md-hero-inner {
    text-align: center;
    padding: clamp(48px, 12vw, 96px) 24px clamp(48px, 10vw, 96px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.md-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #141313;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    margin: 0;
    line-height: 1;
}
.md-hero-sub {
    font-family: var(--font-body);
    color: #2a2a2a;
    font-size: clamp(1.4rem, 1.3vw, 1.5rem);
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
}

.md-section-hero {
    padding: 0;
    padding-bottom: clamp(48px, 7vw, 96px);
}
.md-section {
    padding: clamp(48px, 7vw, 96px) 0;
}
.md-section-head {
    padding: 0 clamp(20px, 4vw, 56px);
    margin-bottom: 20px;
}
.md-eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: #141313;
    margin: 0;
    letter-spacing: 0.02em;
}
.md-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2c2e81;
    text-decoration: none;
    transition: color 0.25s ease;
}
.md-view-all:hover {
    color: #1b2735;
}
.md-view-all svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    transition: transform 0.25s ease;
}
.md-view-all:hover svg {
    transform: translateX(3px);
}

.md-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding: 0 clamp(20px, 4vw, 56px);
}
@media (max-width: 1024px) {
    .md-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}
@media (max-width: 640px) {
    .md-news-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.md-news-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}
.md-news-card:hover {
    transform: translateY(-3px);
}
.md-news-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 4px;
    overflow: hidden;
    background: #eef0f7;
}
.md-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.md-news-card:hover .md-news-thumb img {
    transform: scale(1.05);
}
.md-news-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.md-news-date {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #777776;
    margin: 0;
    letter-spacing: 0.04em;
}
.md-news-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #141313;
    margin: 0;
    transition: color 0.25s ease;
}
.md-news-card:hover .md-news-title {
    color: #2c2e81;
}

.md-press-articles {
    background: #ffffff;
}
.md-article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 0 clamp(20px, 4vw, 56px);
}
@media (max-width: 1024px) {
    .md-article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .md-article-grid {
        grid-template-columns: 1fr;
    }
}

.md-article-card {
    display: flex;
    flex-direction: column;
    gap: 56px;
    background: #ffffff;
    border: 1px solid #ececf2;
    border-radius: 6px;
    padding: 22px 22px 26px;
    text-decoration: none;
    color: inherit;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}
.md-article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(44, 46, 129, 0.1);
    border-color: rgba(44, 46, 129, 0.2);
}

.md-article-top {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: start;
}

.md-article-thumb {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef0f7;
    flex-shrink: 0;
}
.md-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.md-article-card:hover .md-article-thumb img {
    transform: scale(1.05);
}

.md-article-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.md-article-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #141313;
    margin: 0;
    transition: color 0.25s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.md-article-card:hover .md-article-title {
    color: #2c2e81;
}
.md-article-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    color: #777776;
    margin: 0;
    letter-spacing: 0.02em;
}
.md-article-date svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    flex-shrink: 0;
}
.md-article-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    color: #2c2e81;
    background: rgba(44, 46, 129, 0.1);
    line-height: 1;
}

.md-article-desc {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.65;
    color: #525252;
    margin: 0;
    flex: none;
    border-left: 2px solid #2c2e81;
    padding: 6px 0 6px 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.md-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 clamp(20px, 4vw, 56px);
    margin-bottom: 32px;
}
.md-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 280px;
    background: #f5f5f7;
    border: 1px solid #ececf2;
    border-radius: 8px;
    padding: 10px 16px;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}
.md-search:focus-within {
    border-color: #2c2e81;
    background: #ffffff;
}
.md-search svg {
    width: 18px;
    height: 18px;
    stroke: #777776;
    flex-shrink: 0;
}
.md-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--font-body);
    font-size: 14px;
    color: #141313;
    min-width: 0;
}
.md-search input::placeholder {
    color: #9a9aa3;
}

.md-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: #141313;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 11px 18px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}
.md-sort:hover {
    border-color: #2c2e81;
    color: #2c2e81;
}
.md-sort svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.md-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 56px;
    padding: 0 clamp(20px, 4vw, 56px);
    flex-wrap: wrap;
}
.md-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: #525252;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.md-page-btn:hover {
    border-color: #2c2e81;
    color: #2c2e81;
}
.md-page-btn.is-active {
    background: #2c2e81;
    border-color: #2c2e81;
    color: #ffffff;
}
.md-page-btn--nav {
    gap: 6px;
}
.md-page-btn--nav svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
.md-page-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}
.md-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 38px;
    color: #777776;
    font-family: var(--font-body);
    font-weight: 600;
}

.md-hero--listing .md-hero-inner {
    padding: clamp(36px, 8vw, 72px) 24px clamp(36px, 7vw, 64px);
}

.md-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 20px;
    font-family: var(--font-body);
    color: #777776;
    font-size: 14px;
    margin: 0;
}

.gl-section {
    position: relative;
    background-color: #2c2e81;
    background-image: url("../assets/images/mediabg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 112px);
    overflow: hidden;
}
.gl-section.gl-section--complete .gl-grid {
    padding-bottom: clamp(40px, 6vw, 80px);
}
.gl-grid {
    columns: 4;
    column-gap: 12px;
    padding: 0 clamp(20px, 4vw, 56px) clamp(32px, 5vw, 56px);
}
@media (max-width: 1024px) {
    .gl-grid {
        columns: 3;
        column-gap: 10px;
    }
}
@media (max-width: 640px) {
    .gl-grid {
        columns: 2;
        column-gap: 8px;
    }
}

.gl-card {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 12px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}
@media (max-width: 1024px) {
    .gl-card {
        margin-bottom: 10px;
    }
}
@media (max-width: 640px) {
    .gl-card {
        margin-bottom: 8px;
    }
}
.gl-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.gl-card:hover img,
.gl-card:focus-visible img {
    transform: scale(1.05);
}
.gl-card:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}
.gl-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.15) 45%,
        transparent 70%
    );
    pointer-events: none;
}
.gl-card-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    pointer-events: none;
}
.gl-card-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 2px;
}
.gl-card-date {
    font-family: var(--font-body);
    font-size: 11px;
    color: #d9d9d9;
    margin: 0;
}

.gl-bottom {
    position: relative;
    margin-top: -200px;
    padding-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.gl-fade {
    width: 100%;
    height: 200px;
    background: linear-gradient(
        to bottom,
        rgba(44, 46, 129, 0) 0%,
        rgba(44, 46, 129, 0.7) 55%,
        #2c2e81 95%
    );
}
.gl-load-more {
    pointer-events: auto;
    margin-top: -8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #2c2e81;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 13px 30px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}
.gl-load-more:hover {
    background: #f5f5f7;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
.gl-load-more:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}
.gl-load-more svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
.gl-bottom[hidden] {
    display: none;
}

.md-videos {
    position: relative;
}

.md-vc-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.md-vc-track-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.md-vc-track {
    display: flex;
    align-items: center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.md-vc-slide {
    flex: 0 0 50%;
    padding: 0 8px;
    box-sizing: border-box;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        filter 0.45s ease;
    transform: scale(0.8);
    transform-origin: center center;
    opacity: 0.55;
    filter: brightness(0.55);
    cursor: pointer;
}

.md-vc-slide.is-prev {
    transform-origin: right center;
}

.md-vc-slide.is-next {
    transform-origin: left center;
}

.md-vc-slide.is-active {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
    z-index: 2;
}

.md-vc-slide-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #0d1430;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.md-vc-slide-inner img,
.md-vc-slide-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.md-vc-video[hidden] {
    display: none;
}

.md-vc-thumb[hidden] {
    display: none;
}

.md-vc-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(20, 19, 19, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background 0.25s ease;
    pointer-events: none;
}

.md-vc-slide.is-active .md-vc-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.md-vc-play:hover {
    background: #2c2e81;
    transform: translate(-50%, -50%) scale(1.08);
}

.md-vc-play svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    margin-left: 3px;
}

.md-vc-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 22px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0) 100%
    );
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.md-vc-slide.is-active:hover .md-vc-caption {
    opacity: 1;
}

.md-vc-caption-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.md-vc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease;
    z-index: 5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.md-vc-arrow:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #2c2e81;
}

.md-vc-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.md-vc-arrow-prev {
    left: 12px;
}

.md-vc-arrow-next {
    right: 12px;
}

.md-vc-progress {
    margin-top: 32px;
    width: 100%;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
}

.md-vc-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ffffff;
    width: 20%;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: left center;
}

@media (max-width: 1024px) and (min-width: 501px) {
    .md-vc-slide {
        flex: 0 0 70%;
        padding: 0 6px;
    }
}

@media (max-width: 500px) {
    .md-vc-slide {
        flex: 0 0 100%;
        padding: 0;
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }

    .md-vc-slide.is-prev,
    .md-vc-slide.is-next {
        transform: scale(1);
    }

    .md-vc-arrow {
        width: 38px;
        height: 38px;
    }

    .md-vc-arrow-prev {
        left: 6px;
    }

    .md-vc-arrow-next {
        right: 6px;
    }

    .md-vc-play {
        width: 48px;
        height: 48px;
    }
}

.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    background: #141313;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.video-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 10;
}

.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.video-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.video-modal-title {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    color: white;
}

.video-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    flex: 1;
}

.video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.md-videos-listing {
    background: #ffffff;
}

.md-toolbar--single {
    justify-content: stretch;
}

.md-search--full {
    flex: 1;
    width: 100%;
    max-width: 100%;
}

.md-vid-section {
    margin-top: clamp(36px, 5vw, 64px);
}

.md-vid-section:first-of-type {
    margin-top: 0;
}

.md-vid-section[hidden] {
    display: none;
}

.md-vid-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 clamp(20px, 4vw, 56px);
    margin-bottom: 24px;
}

.md-vid-section-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    color: #141313;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.md-vid-section-rule {
    flex: 1;
    height: 1px;
    background: #d9d9d9;
}

.md-vid-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding: 0 clamp(20px, 4vw, 56px);
}

@media (max-width: 1024px) {
    .md-vid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (max-width: 640px) {
    .md-vid-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .md-vid-section-head {
        flex-wrap: wrap;
    }

    .md-vid-section-title {
        white-space: normal;
    }

    .md-vid-section-rule {
        display: none;
    }
}

.md-vid-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s ease;
}

.md-vid-card[hidden] {
    display: none;
}

.md-vid-card:hover {
    transform: translateY(-3px);
}

.md-vid-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #0d1430;
}

.md-vid-frame iframe,
.md-vid-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    display: block;
}

.md-vid-frame video {
    object-fit: cover;
}

.md-vid-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.md-vid-date {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #777776;
    margin: 0;
    letter-spacing: 0.04em;
}

.md-vid-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #141313;
    margin: 0;
    transition: color 0.25s ease;
}

.md-vid-card:hover .md-vid-title {
    color: #2c2e81;
}

.md-vid-desc {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: #525252;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.md-vid-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 6px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 4;
    line-height: 1;
}

.md-vid-duration:empty {
    display: none;
}

.md-vid-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    z-index: 3;
    transition: background 0.25s ease;
}

.md-vid-play-overlay:hover {
    background: rgba(0, 0, 0, 0.35);
}

.md-vid-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(20, 19, 19, 0.65);
    border: 2px solid rgba(255, 255, 255, 0.95);
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.md-vid-play-overlay:hover .md-vid-play-icon {
    transform: scale(1.08);
    background: #2c2e81;
}

.md-vid-play-icon svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
    margin-left: 3px;
}

.md-vid-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
}

.md-vid-featured-section {
    padding: clamp(40px, 6vw, 80px) 0;
}

.md-vid-featured {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    padding: 0 clamp(20px, 4vw, 56px);
    align-items: center;
}

.md-vid-featured-thumb {
    position: relative;
}

.md-vid-featured-thumb .md-vid-frame {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    box-shadow: 0 24px 48px rgba(28, 30, 90, 0.14);
}

.md-vid-featured-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.md-vid-featured-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2c2e81;
    background: rgba(44, 46, 129, 0.1);
    padding: 6px 14px;
    border-radius: 999px;
    margin: 0;
}

.md-vid-featured-eyebrow svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.md-vid-featured-date {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #777776;
    margin: 0;
    letter-spacing: 0.04em;
}

.md-vid-featured-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    line-height: 1.2;
    color: #141313;
    margin: 0;
}

.md-vid-featured-desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: #525252;
    margin: 0;
}

.md-vid-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    background: #2c2e81;
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    cursor: pointer;
    transition:
        background 0.25s ease,
        transform 0.2s ease;
}

.md-vid-featured-cta:hover {
    background: #1b2735;
    transform: translateY(-2px);
}

.md-vid-featured-cta svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

@media (max-width: 900px) {
    .md-vid-featured {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.md-vid-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.md-vid-chip {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: #525252;
    background: #ffffff;
    border: 1.5px solid #ececf2;
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    white-space: nowrap;
}

.md-vid-chip:hover {
    border-color: #2c2e81;
    color: #2c2e81;
}

.md-vid-chip.is-active {
    background: #2c2e81;
    border-color: #2c2e81;
    color: #ffffff;
}

@media (max-width: 640px) {
    .md-vid-filters {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .md-vid-chip {
        flex-shrink: 0;
        font-size: 12px;
        padding: 6px 12px;
    }
}

.md-hero--article .md-hero-inner {
    padding: clamp(48px, 10vw, 80px) 24px clamp(32px, 5vw, 56px);
    gap: 14px;
}

.art-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: #2c2e81;
    border-radius: 999px;
    padding: 5px 16px;
    line-height: 1;
}

.art-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.2;
    color: #141313;
    max-width: 900px;
    margin: 0;
    letter-spacing: -0.01em;
}

.art-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: #525252;
    flex-wrap: wrap;
    justify-content: center;
}
.art-meta-author {
    font-weight: 600;
    color: #2c2e81;
}
.art-meta-sep {
    color: #bbb;
}

.art-featured-wrap {
    width: 90vw;
    margin: clamp(32px, 5vw, 56px) auto clamp(40px, 6vw, 72px);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 7;
}
.art-featured-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
@media (max-width: 640px) {
    .art-featured-wrap {
        border-radius: 8px;
        aspect-ratio: 4 / 3;
    }
}

.art-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 56px;
    align-items: start;
    padding: 0 clamp(20px, 4vw, 56px) clamp(64px, 10vw, 120px);
}
@media (max-width: 1100px) {
    .art-layout {
        grid-template-columns: 1fr 260px;
        gap: 40px;
    }
}
@media (max-width: 800px) {
    .art-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

.art-body {
    min-width: 0;
}
.art-body p {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    color: #2a2a2a;
    margin: 0 0 1.6em;
}
.art-body h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    color: #141313;
    margin: 2.2em 0 0.7em;
    line-height: 1.25;
}
.art-body h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    color: #141313;
    margin: 1.8em 0 0.6em;
    line-height: 1.3;
}
.art-body blockquote {
    border-left: 3px solid #2c2e81;
    padding: 12px 0 12px 22px;
    margin: 2em 0;
    color: #444;
    font-style: italic;
    font-size: 1.05em;
    font-family: var(--font-body);
}
.art-body figure {
    margin: 2.5em 0;
}
.art-body figure img {
    width: 100%;
    border-radius: 8px;
    display: block;
}
.art-body figcaption {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: #777776;
    margin-top: 10px;
    text-align: center;
    font-style: italic;
}
.art-body figure.art-img--half {
    float: right;
    width: 46%;
    margin: 0 0 1.5em 2em;
}
@media (max-width: 640px) {
    .art-body figure.art-img--half {
        float: none;
        width: 100%;
        margin: 2em 0;
    }
}
.art-body hr {
    border: none;
    border-top: 1px solid #ececf2;
    margin: 3em 0;
}

.art-sidebar {
    position: sticky;
    top: 96px;
}
.art-sidebar-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2c2e81;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #2c2e81;
}
.art-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.art-sidebar-item {
    border-bottom: 1px solid #f0f0f5;
}
.art-sidebar-item a {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 14px 0;
    align-items: flex-start;
    transition: color 0.2s ease;
}
.art-sidebar-item a:hover {
    color: #2c2e81;
}
.art-sidebar-thumb {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 6px;
    overflow: hidden;
    background: #eef0f7;
}
.art-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}
.art-sidebar-item a:hover .art-sidebar-thumb img {
    transform: scale(1.06);
}
.art-sidebar-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.art-sidebar-item-date {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #9a9aa3;
    text-transform: uppercase;
}
.art-sidebar-item-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #141313;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.art-sidebar-item a:hover .art-sidebar-item-title {
    color: #2c2e81;
}

.ghost-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: clamp(180px, 30vw, 340px);
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(44, 46, 129, 0.07);
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.suggestion-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    text-decoration: none;
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease,
        border-color 0.15s ease;
}
.suggestion-card:hover {
    box-shadow: 0 6px 20px rgba(44, 46, 129, 0.1);
    transform: translateY(-2px);
    border-color: rgba(44, 46, 129, 0.2);
}
.suggestion-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(44, 46, 129, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================================================
 * media.css, the parts of it we never had
 *
 * The approved media pages load `css/public/media.css` as their base sheet. We do not ship that
 * file, because ~90% of it was long ago inlined into this one — every `.md-hero`, `.md-news-*`,
 * `.md-article-*`, `.md-vc-*`, `.md-vid-*`, `.gl-*` and `.art-*` rule above is already a copy of it.
 * Dropping the reference file in beside this one would define one class family twice on one page,
 * which is the collision partials/directorate-styles.blade.php exists to explain.
 *
 * So the port is the difference, not the file. What follows is every media.css rule that had no
 * counterpart here, copied declaration-for-declaration, in media.css's own order.
 * MediaRevampPortTest asserts the families arrive together.
 * ========================================================================== */

/* The category badge on a news card. Absent here because our news cards never carried a category
 * — see the `cat` key that had been stripped from public/js/data/content.json. */
.md-news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.md-news-cat {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2c2e81;
    background: rgba(44, 46, 129, 0.08);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}
.md-news-cat--speech {
    color: #8a5a00;
    background: rgba(190, 130, 0, 0.12);
}
.md-news-cat--announcement {
    color: #0f6b4f;
    background: rgba(15, 107, 79, 0.1);
}
.md-news-cat--feature {
    color: #6b2d8a;
    background: rgba(107, 45, 138, 0.1);
}

/* A disabled Prev/Next. Our pager has always set aria-disabled on the first and last page and
 * nothing has ever dimmed it, so a dead control looked live. */
.md-page-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

/* The news category filter bar (All / Press Releases / Announcements / Speeches / Features) and
 * the pill that slides between the chips. `.md-vid-chip` above is the same rule; the approved
 * sheet writes the two selectors together and `.md-cat-chip` is the half we were missing. */
.md-cat-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
}
.md-cat-chip {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: #525252;
    background: #fff;
    border: 1.5px solid #ececf2;
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition:
        background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
}
.md-cat-chip:hover {
    border-color: #2c2e81;
    color: #2c2e81;
}
.md-cat-chip.is-active {
    background: #2c2e81;
    border-color: #2c2e81;
    color: #fff;
}
.md-cat-glider {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 999px;
    background: #2c2e81;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform: translateZ(0);
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}
.md-cat-glider.is-ready {
    opacity: 1;
}
.md-cat-filters .md-cat-chip {
    position: relative;
    z-index: 1;
}
/* Once the glider is drawing the active pill, the chip must stop drawing its own or the two
 * stack and the slide reads as a smear. */
.md-cat-filters.has-glider .md-cat-chip.is-active {
    background: transparent;
    border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
    .md-cat-glider {
        transition: opacity 0.2s ease;
    }
}
@media (max-width: 640px) {
    .md-cat-filters {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .md-cat-chip {
        flex-shrink: 0;
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Hovering the card, not just the play button, should light the play button. */
.md-vid-card:hover .md-vid-play-overlay,
.md-vid-featured-thumb:hover .md-vid-play-overlay {
    background: rgba(0, 0, 0, 0.35);
}
.md-vid-card:hover .md-vid-play-icon,
.md-vid-featured-thumb:hover .md-vid-play-icon {
    transform: scale(1.08);
    background: #2c2e81;
}

/* The gallery lightbox. The one family in media.css with no counterpart here at all:
 * media_gallery.blade.php was carrying its own inline <style> block under local BEM names
 * (`gl-lightbox__dialog`), so renaming to the approved `gl-lightbox-dialog` without this first
 * would have unstyled a working dialog. */
.gl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 32px);
}
.gl-lightbox--open {
    display: flex;
}
.gl-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 14, 40, 0.82);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
}
.gl-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    max-height: 94vh;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    animation: gl-lightbox-in 0.25s ease;
}
@keyframes gl-lightbox-in {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.gl-lightbox-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d0e28;
    max-height: 80vh;
}
.gl-lightbox-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}
.gl-lightbox-info {
    padding: 18px clamp(18px, 3vw, 28px) 22px;
}
.gl-lightbox-date {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-primary);
    margin: 0 0 6px;
}
.gl-lightbox-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
    line-height: 1.25;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}
.gl-lightbox-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}
.gl-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1b2735;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}
.gl-lightbox-close:hover {
    background: #fff;
    transform: scale(1.05);
}
.gl-lightbox-close svg {
    width: 18px;
    height: 18px;
}
.gl-lightbox-close:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}
@media (max-width: 640px) {
    .gl-lightbox-figure,
    .gl-lightbox-img {
        max-height: 60vh;
    }
}

/* Ours, not the approved build's, and the only rules in this block that are not from media.css.
 * The approved lightbox opens one photograph and needs no navigation; ours opens an album and
 * steps through it, so it needs two more buttons. They are styled as siblings of
 * `.gl-lightbox-close` rather than left to an inline <style> block, which is where they used to
 * live and is why the audit thought the whole dialog was unstyled. */
/* Our gallery cards are <button>s, because they open a dialog and a <div role="button"> does not
 * get keyboard activation for free. This is the UA button styling being taken back off. */
.gl-card--event {
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0;
    text-align: left;
}
/* So the two nav buttons below sit against the photograph rather than the whole dialog. */
.gl-lightbox-figure {
    position: relative;
}
.gl-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1b2735;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}
.gl-lightbox-nav:hover {
    background: #fff;
}
.gl-lightbox-nav:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}
.gl-lightbox-nav--prev {
    left: 12px;
}
.gl-lightbox-nav--next {
    right: 12px;
}

/* ============================================================================
   Document attachments (§4) — the one download-link treatment, shared by every
   content block that opts into an `attachments` field. Deliberately not scoped
   to a page: the whole point of the capability is that Mandate, Claims,
   Whistle Blowing and any future section render the same thing.

   `.att-btn` is the standalone treatment. A caller that already has an approved
   button family passes its own class instead (policy_prose passes `.px-btn`),
   in which case only the `.att-label` / `.att-meta` spans below apply.
   ========================================================================== */
.att-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: clamp(24px, 3vw, 36px);
}
.att-intro {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted, #52525b);
}
.att-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border: 0;
    border-radius: 8px;
    background: var(--color-brand-primary);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.18s ease;
}
.att-btn:hover {
    background: var(--color-brand-dark);
    color: #fff;
}
.att-btn svg {
    flex-shrink: 0;
}
/* The format-and-size hint is secondary to the label, so it steps back rather than
   competing with it. Inherits colour so it works on both the filled `.att-btn` and
   whatever a caller-supplied button class paints. */
.att-meta {
    font-weight: 500;
    opacity: 0.75;
}

/* ==========================================================================
   HEADER CALL-TO-ACTION AND SEARCH — ported from the approved build.

   The `nav-cta` and `nav-search` families were never brought over, and the header used inline
   Tailwind utilities instead. The shapes differed: the approved "Need Help?" is a pill
   (border-radius 999px, 8px/18px) where ours was a 6px rounded rectangle, and the approved search
   sits inside a pill border that gains a focus ring — ours had no wrapper styling at all.

   The two were also in the wrong order. The approved header reads Need Help? then search; this
   build had search then Need Help?.

   `.nav-cta--ghost` styles the same button inside the mobile drawer, where the approved build uses
   `nav-cta nav-cta--ghost mt-6` rather than a second hand-rolled outline button. The `.nav-cta`
   override below it (display:flex, width:100%) is the drawer's full-width treatment.
   ========================================================================== */

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    color: #fff;
    background: var(--color-brand-primary);
    border: 1px solid var(--color-brand-primary);
    border-radius: 999px;
    padding: 8px 18px;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-cta:active {
    transform: translateY(0);
}
.nav-cta--ghost:hover {
    color: #fff;
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}
/* National coat of arms in the nav. Ported from ndic-reference css/styles.css:610-630
   (commit cf38b9f), placed here beside .nav-search exactly as it sits there. */
.nav-coat {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-coat img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .nav-coat {
    padding-left: 14px;
    margin-left: 2px;
    border-left: 1px solid rgba(44, 46, 129, 0.16);
  }

  .nav-coat img {
    width: 40px;
    height: 40px;
  }
}

.nav-search {
    border: 1px solid rgba(44, 46, 129, 0.28);
    border-radius: 999px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.nav-search-results {
    position: fixed;
  z-index: 70;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border, #d9d9d9);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  padding: 6px;
}
.nav-search-results[hidden] {
    display: none;
}
.nav-search-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
}
.nav-search-item-title {
    font-family: var(--font-body, inherit);
    font-weight: 600;
    font-size: 14px;
    color: #141313;
}
.nav-search-item:hover,
.nav-search-item.is-active {
    background: #eaeaf2;
}
.nav-search-item-desc {
    font-family: var(--font-body, inherit);
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
    /* Two lines. Some descriptions are a full sentence — About NDIC's runs to five unclamped,
       which pushes every other result off the panel. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav-search-empty {
    padding: 12px;
    font-family: var(--font-body, inherit);
    font-size: 13px;
    color: #6b7280;
}