@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap");

:root {
    --color-1:      var(--color-1-theme, #0073a2);
    --color-2:      var(--color-2-theme, #ba8032);
    --color-over-1: var(--color-over-1-theme, #ffffff);
    --color-over-2: var(--color-over-2-theme, #ffffff);
    --color-1-isDark: var(--color-1-theme-isDark, 1);
    --color-2-isDark: var(--color-2-theme-isDark, 1);

    --size-sm: 48rem;
    --size-md: 64rem;
    --size-lg: 80rem;
    --size-xl: 120rem;

    --fsi-content-max: 85.375rem;
    --fsi-gutter:      clamp(1rem, 4vw, 4.5rem);
    --fsi-section-pad: clamp(2.5rem, 6vw, 4.5rem);
}

html { height: 100%; overflow-x: clip; }

body {
    margin: 0;
    min-height: 100%;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    font-family: 'Raleway', system-ui, -apple-system, Segoe UI, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1a1a1a;
    background-color: #ffffff;
}

.fsi-header,
.fsi-footer { flex: none; }

#content_main {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Inside-page padding — homepage resets this below. */
#content_main {
    --content-pad-x: clamp(0.5rem, 5%, 3rem);
    --content-pad-y: 1.5rem;
    padding: var(--content-pad-y) var(--content-pad-x);
    max-width: var(--size-xl);
    margin-left: auto;
    margin-right: auto;
}

body:has(.fsi-home) #content_main {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
}

/* Hidden text utility — pairs with the system .hidden-text. */
.fsi-sr-only,
.hidden-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

a.fsi-skip-link {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-100%);
    background: var(--color-1);
    color: var(--color-over-1);
    padding: 0.75rem 1rem;
    z-index: 1000;
    text-decoration: none;
}
a.fsi-skip-link:focus { transform: translateY(0); }

/* ================================================================
   Header
   ================================================================ */
.fsi-header {
    position: relative;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Mobile-first: two rows — the controls (search · donate · hamburger)
   sit above a large centered logo. Figma mobile master 2490:1632 —
   VERTICAL gap:16 pad:20/16, with the logo on its own 343×92 row below
   the icon row. Desktop master 2490:4859 is a single HORIZONTAL row
   (logo left, controls right) pad:12/24 — restored at 48rem. */
.fsi-header-bar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1rem;
    max-width: var(--size-xl);
    margin: 0 auto;
}

.fsi-header-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fsi-header-logo img,
.fsi-header-logo svg {
    display: block;
    height: 5.75rem;
    width: auto;
    max-width: 100%;
    /* When the Google Translate widget renders and crowds the header,
       the flex row can compress the logo's width; object-fit:contain
       keeps the image's aspect ratio instead of squashing it. */
    object-fit: contain;
}

/* Mobile: three-slot row matching the Figma SPACE_BETWEEN of
   search · donate · hamburger. The hamburger is position:absolute
   top-right (see .fsi-menu-toggle, per navigation.md's mobile-toggle
   structural rule), so it's out of flow here. A 1fr/auto/1fr grid pins
   the search glyph left and centers donate against the full row width;
   the right 1fr track is the empty space the absolute hamburger sits
   over. The only in-flow controls at mobile are the search toggle and
   donate (translate is display:none below 48rem; the search form is
   position:absolute when open). */
.fsi-header-controls {
    order: -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
.fsi-header-controls .fsi-search-toggle { justify-self: start; }

@media (min-width: 48rem) {
    .fsi-header-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        padding: 0.75rem 1.5rem;
    }
    .fsi-header-logo { justify-content: flex-start; }
    .fsi-header-logo img,
    .fsi-header-logo svg { height: 6.25rem; }
    .fsi-header-controls {
        order: 0;
        display: flex;
        grid-template-columns: none;
    }
}

#google_translate_element {
    display: none;
    background-color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
@media (min-width: 48rem) {
    #google_translate_element { display: block; }
}

.fsi-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    cursor: pointer;
}
.fsi-search-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'search';
    font-size: 1.5rem;
}

.fsi-search-form {
    display: none;
    position: absolute;
    top: 100%;
    right: var(--fsi-gutter);
    background: white;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    padding: 0.75rem;
    z-index: 50;
}
.fsi-header:has(.fsi-search-toggle[aria-expanded="true"]) .fsi-search-form { display: flex; gap: 0.5rem; }
.fsi-search-form input[type="search"] {
    border: 1px solid rgba(0,0,0,0.2);
    padding: 0.5rem 0.75rem;
    font: inherit;
    border-radius: 4px;
    min-width: 16rem;
}
.fsi-search-form button[type="submit"] {
    background: var(--color-1);
    color: var(--color-over-1);
    border: 0;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 4px;
}
.fsi-search-form button[type="submit"]::after {
    font-family: 'Material Symbols Outlined';
    content: 'search';
    font-size: 1.25rem;
}

.fsi-donate {
    /* Figma donate master 2490:2185 — 102×51 button area with pad
       12/20/12/20, background gold (#BA8032), black text, an arrow
       chevron on the right (51 wide). Total visual button: 157×51.
       Text is Raleway Medium 18px black per the master, NOT the
       CMS-computed --color-over-2 (which may resolve to white). */
    display: inline-flex;
    align-items: center;
    gap: 0;
    background-color: var(--color-2);
    color: #000000;
    padding: 0.75rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    border-radius: 0;
}
.fsi-donate::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'chevron_right';
    font-size: 1rem;
    margin-left: 0.75rem;
}
.fsi-donate:hover,
.fsi-donate:focus-visible {
    background-color: color-mix(in srgb, var(--color-2), black 10%);
}

/* Hamburger toggle (mobile) */
.fsi-menu-toggle {
    position: absolute;
    top: 1.25rem;
    right: var(--fsi-gutter);
    width: 3rem; height: 3rem;
    border: 0;
    background: transparent;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    cursor: pointer;
    z-index: 60;
}
.fsi-menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'menu';
    font-size: 2rem;
}
.fsi-menu-toggle[aria-expanded="true"]::after { content: 'close'; }

@media (min-width: 48rem) {
    /* Tablet (768–1024): single-row header, but the hamburger stays —
       the absolute top-right placement is only for the <768 two-row
       header; here it sits in-flow at the end of the controls row. */
    .fsi-menu-toggle { position: static; }
}
@media (min-width: 64rem) {
    /* Desktop (1024+): the horizontal nav takes over; hamburger hidden. */
    .fsi-menu-toggle { display: none; }
}

/* ================================================================
   Navigation — desktop
   Matches the components canvas hover variant (Figma node 2490:2089):
   level-1 strip = primary-blue with white labels + chevron;
   level-2 panel = white background with primary-blue links;
   level-2 active = primary-blue background with white text + ▲ chevron;
   level-3 = flyout opens to the right (mirrored for drop-left items).
   Chevrons rotate 180° via aria-expanded="true" on the toggle button.
   ================================================================ */
.fsi-nav-desktop {
    display: none;
    background-color: var(--color-1);
}
.fsi-nav-desktop .fsi-nav-menu {
    list-style: none;
    margin: 0 auto;
    padding: 0 var(--fsi-gutter);
    max-width: var(--size-xl);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.fsi-nav-desktop .fsi-nav-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}
.fsi-nav-desktop .fsi-nav-item-inner {
    /* Figma master 2490:2083 — Raleway Medium 18px white, line-height 27. */
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.5rem;
    color: var(--color-over-1);
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    grid-column: 1; grid-row: 1;
}
.fsi-nav-desktop .fsi-nav-item > a.fsi-nav-item-inner {
    text-decoration: none;
    position: relative;
}
.fsi-nav-desktop .fsi-nav-item > a.fsi-nav-item-inner::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.fsi-nav-desktop .fsi-nav-item:hover > a.fsi-nav-item-inner::after,
.fsi-nav-desktop .fsi-nav-item:focus-within > a.fsi-nav-item-inner::after {
    transform: scaleX(1);
}
.fsi-nav-desktop div.fsi-nav-item-inner { pointer-events: none; }

.fsi-nav-desktop .fsi-nav-item.dropdown > a.fsi-nav-item-inner,
.fsi-nav-desktop .fsi-nav-item.dropdown > div.fsi-nav-item-inner {
    margin-right: 1.75rem;
    position: relative;
    z-index: 1;
}

.fsi-nav-desktop .fsi-dropdown-toggle {
    background: transparent;
    border: 0;
    color: var(--color-over-1);
    cursor: pointer;
    padding: 0 0.4rem;
    grid-column: 1; grid-row: 1;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}
.fsi-nav-desktop .fsi-dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'expand_more';
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}
/* Chevron rotates 180° when the dropdown is open. accessible-menu
   flips aria-expanded on the toggle. */
.fsi-nav-desktop .fsi-dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
/* Level-1 strip uses a filled triangle per the mockup; level-2 keeps the
   chevron above. */
.fsi-nav-desktop .fsi-nav-item.dropdown > .fsi-dropdown-toggle::after {
    content: 'arrow_drop_down';
}

.fsi-nav-desktop .fsi-nav-item:hover,
.fsi-nav-desktop .fsi-nav-item:focus-within {
    background-color: color-mix(in srgb, var(--color-1), white 10%);
}

/* Level-2 dropdown panel: white background with primary-blue text. */
.fsi-nav-desktop .fsi-sub-menu-holder {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 40;
}
.fsi-nav-desktop .fsi-sub-menu-holder:has(.fsi-sub-menu.show) { display: block; }
.fsi-nav-desktop .drop-left .fsi-sub-menu-holder { left: auto; right: 0; }

.fsi-nav-desktop .fsi-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}
.fsi-nav-desktop .fsi-sub-menu-item {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
}
.fsi-nav-desktop .fsi-sub-menu-item.dropdown {
    grid-template-columns: 1fr auto;
}
.fsi-nav-desktop .fsi-sub-menu-item > a,
.fsi-nav-desktop .fsi-sub-menu-item > div {
    padding: 0.65rem 1rem;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    grid-column: 1; grid-row: 1;
}
.fsi-nav-desktop .fsi-sub-menu-item.dropdown > .fsi-dropdown-toggle {
    grid-column: 2; grid-row: 1;
    width: auto;
    justify-content: center;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
/* Hover/active item: invert to primary-blue fill with white text. */
.fsi-nav-desktop .fsi-sub-menu-item:hover,
.fsi-nav-desktop .fsi-sub-menu-item:focus-within {
    background-color: var(--color-1);
}
.fsi-nav-desktop .fsi-sub-menu-item:hover > a,
.fsi-nav-desktop .fsi-sub-menu-item:hover > div,
.fsi-nav-desktop .fsi-sub-menu-item:focus-within > a,
.fsi-nav-desktop .fsi-sub-menu-item:focus-within > div {
    color: var(--color-over-1);
    filter: none;
}
.fsi-nav-desktop .fsi-sub-menu-item:hover > .fsi-dropdown-toggle,
.fsi-nav-desktop .fsi-sub-menu-item:focus-within > .fsi-dropdown-toggle {
    color: var(--color-over-1);
    filter: none;
}

/* Level-3 flyout — opens to the right of the active level-2 item,
   reusing the same white-panel + blue-text rules. */
.fsi-nav-desktop .fsi-sub-menu .fsi-sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 14rem;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.fsi-nav-desktop .fsi-sub-menu .fsi-sub-menu.show { display: block; }
.fsi-nav-desktop .drop-left .fsi-sub-menu .fsi-sub-menu { left: auto; right: 100%; }

/* Horizontal desktop nav only at 1024+; the tablet range (768–1024) uses
   the hamburger menu per the site's tablet convention. */
@media (min-width: 64rem) {
    .fsi-nav-desktop { display: block; }
}

/* Mobile nav */
.fsi-nav-mobile { background-color: var(--color-1); }
.fsi-nav-mobile .fsi-nav-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-1);
    z-index: 30;
}
.fsi-nav-mobile .fsi-nav-menu.show { display: block; }
.fsi-nav-mobile .fsi-nav-item {
    display: grid;
    grid-template-columns: 1fr auto;
}
.fsi-nav-mobile .fsi-nav-item-inner {
    color: var(--color-over-1);
    padding: 0.85rem 1rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
}
.fsi-nav-mobile a.fsi-nav-item-inner { text-decoration: none; }
.fsi-nav-mobile div.fsi-nav-item-inner { pointer-events: none; }
.fsi-nav-mobile .fsi-dropdown-toggle {
    grid-column: 2; grid-row: 1;
    background: transparent;
    border: 0;
    color: var(--color-over-1);
    cursor: pointer;
    width: 3rem;
}
.fsi-nav-mobile .fsi-dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'expand_more';
    font-size: 1.5rem;
}
.fsi-nav-mobile .fsi-sub-menu-holder { display: none; grid-column: 1 / -1; }
.fsi-nav-mobile .fsi-sub-menu-holder:has(.fsi-sub-menu.show) { display: block; }
.fsi-nav-mobile .fsi-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: color-mix(in srgb, var(--color-1), black 8%);
}
.fsi-nav-mobile .fsi-sub-menu-item {
    display: grid;
    grid-template-columns: 1fr;
}
.fsi-nav-mobile .fsi-sub-menu-item.dropdown { grid-template-columns: 1fr auto; }
.fsi-nav-mobile .fsi-sub-menu-item > a {
    color: var(--color-over-1);
    text-decoration: none;
    padding: 0.65rem 1rem 0.65rem 2rem;
    display: block;
}
.fsi-nav-mobile .fsi-sub-menu .fsi-sub-menu {
    display: none;
    grid-column: 1 / -1;
    background-color: color-mix(in srgb, var(--color-1), black 14%);
}
.fsi-nav-mobile .fsi-sub-menu .fsi-sub-menu.show { display: block; }
.fsi-nav-mobile .fsi-sub-menu .fsi-sub-menu .fsi-sub-menu-item > a { padding-left: 3rem; }

/* Mobile/tablet nav (hamburger) stays active until desktop at 1024. */
@media (min-width: 64rem) {
    .fsi-nav-mobile { display: none; }
}

/* ================================================================
   Hero (Photo Shuffle) — full-bleed banner
   ================================================================ */
.fsi-hero {
    position: relative;
    width: 100%;
    background-color: #000;
}
.fsi-hero .swiper-container { position: relative; }
/* <figure> defaults to margin 1em on browsers — that creates a visible
   black band around the hero image. Reset both figure and figcaption
   wrappers so the image fills the slide edge-to-edge. */
.fsi-hero figure {
    margin: 0;
    padding: 0;
    display: block;
}
.fsi-hero .swiper-slide img {
    /* Figma master heights: mobile (375) = 240px, all desktop sizes
       (1024/1366/1920) = 718px. Tablet band scales between. */
    display: block;
    width: 100%;
    height: 15rem;
    object-fit: cover;
}
@media (min-width: 48rem) {
    .fsi-hero .swiper-slide img { height: 28rem; }
}
@media (min-width: 64rem) {
    .fsi-hero .swiper-slide img { height: 44.875rem; }
}
.fsi-hero figcaption {
    background-color: rgba(0,0,0,0.85);
    color: #fff;
    padding: 0.75rem 1rem;
}
@media (min-width: 48rem) {
    .fsi-hero figcaption {
        position: absolute;
        left: 0; right: 0;
        background-color: rgba(0,0,0,0.55);
        padding: 1rem 2rem;
    }
    .fsi-hero figcaption.caption-position-top    { top: 0; }
    .fsi-hero figcaption.caption-position-bottom { bottom: 0; }
}
/* Hero prev/next: full-circle button with white chevron on dark
   semi-transparent bg. Always-in-DOM elements get hidden by the
   navigation-type-* CSS rule below. */
.fsi-hero .swiper-button-prev,
.fsi-hero .swiper-button-next {
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    background-color: rgba(0,0,0,0.45);
    border: 0;
    border-radius: 50%;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.2s ease;
}
.fsi-hero .swiper-button-prev { left: 1rem; }
.fsi-hero .swiper-button-next { right: 1rem; }
.fsi-hero .swiper-button-prev:hover,
.fsi-hero .swiper-button-next:hover { background-color: rgba(0,0,0,0.65); }
.fsi-hero .swiper-button-prev::after,
.fsi-hero .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 1.5rem;
}
.fsi-hero .swiper-button-prev::after { content: 'chevron_left'; }
.fsi-hero .swiper-button-next::after { content: 'chevron_right'; }

/* Pagination bullets — for nav type 2 (bullets) and 3 (numbered) */
.fsi-hero .swiper-pagination {
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-size: 0.75rem;
    --swiper-pagination-bullet-horizontal-gap: 0.25rem;
    position: absolute;
}
.fsi-hero .navigation-position-top    .swiper-pagination { --swiper-pagination-top: 1rem; --swiper-pagination-bottom: auto; }
.fsi-hero .navigation-position-bottom .swiper-pagination { --swiper-pagination-bottom: 1rem; --swiper-pagination-top: auto; }
.fsi-hero .numbered-pagination .swiper-pagination-bullet {
    width: 1.5rem; height: 1.5rem;
    background-color: rgba(0,0,0,0.45);
    color: #fff;
    opacity: 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.fsi-hero .numbered-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-2);
}

/* Autoplay pause/play toggle — per hero.md, hidden on mobile, shown 768+ */
.swiper-autoplay-toggle-button {
    display: none;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(0,0,0,0.45);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    transition: background-color 0.2s ease;
}
.swiper-autoplay-toggle-button:hover,
.swiper-autoplay-toggle-button:focus-visible {
    background-color: rgba(0,0,0,0.65);
}
.swiper-autoplay-toggle-button::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'pause';
    font-size: 1.5rem;
    text-transform: none;
}
.swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }
@media (min-width: 48rem) {
    .swiper-autoplay-toggle-button { display: inline-flex; align-items: center; justify-content: center; }
}

.fsi-hero:not(:has(.navigation-type-1)) .swiper-button-prev,
.fsi-hero:not(:has(.navigation-type-1)) .swiper-button-next { display: none; }

/* ================================================================
   Qlinks panel — Our Philosophy + 6 icon tiles on gold
   ================================================================ */
.fsi-qlinks {
    background-color: var(--color-1);
    color: var(--color-over-1);
    /* z-index lifts the qlinks section into its own stacking context
       above the hero so the overshooting gold panel paints over the
       hero photo. */
    position: relative;
    z-index: 1;
}
.fsi-qlinks-inner {
    max-width: var(--size-xl);
    margin: 0 auto;
    padding: var(--fsi-section-pad) var(--fsi-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.fsi-qlinks-heading {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    /* Raleway SemiBold — Figma mobile node 2490:1660 is 32px, desktop
       master is 40px; intrinsic line-height ~1.17. The clamp floor holds
       32px at mobile so the heading doesn't shrink below the design. */
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.17;
    margin: 0 0 1rem 0;
    color: inherit;
}
.fsi-qlinks-body {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.5;
    margin: 0;
}
.fsi-qlinks-panel {
    background-color: var(--color-2);
    /* Black text on gold per Figma master 2490:1211 children; design
       intent overrides the CMS-computed --color-over-2 here. */
    color: #000000;
    padding: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    /* Elevation so the proud panel reads as floating over the hero photo. */
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
.fsi-qlinks-panel a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: inherit;
    text-decoration: none;
    padding: 1rem 0.5rem;
    min-height: 9.625rem;
    gap: 0.75rem;
}
.fsi-qlinks-panel a {
    transition: transform 0.2s ease;
}
.fsi-qlinks-panel a:hover,
.fsi-qlinks-panel a:focus {
    transform: scale(1.05);
}
.fsi-qlinks-panel a:hover .fsi-qlink-label::after,
.fsi-qlinks-panel a:focus .fsi-qlink-label::after {
    transform: scaleX(1);
}
.fsi-qlinks-panel .fsi-qlink-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fsi-qlinks-panel .fsi-qlink-icon svg,
.fsi-qlinks-panel .fsi-qlink-icon img {
    width: 100%; height: 100%;
    fill: currentColor;
}
.fsi-qlinks-panel .fsi-qlink-label {
    /* Figma node 2490:1217 — Raleway Regular 20px black, centered. */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.17;
    color: #000000;
    position: relative;
}
.fsi-qlinks-panel .fsi-qlink-label::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.fsi-qlinks-panel .fsi-qlink-icon {
    color: #000000;
}

@media (min-width: 64rem) {
    /* Desktop only: 2-column grid keeps philosophy text in column 1 and
       the gold panel in column 2 — they can't overlap because each
       occupies its own cell. The tablet range stays stacked (the gold
       carousel + philosophy text) so the text isn't crushed into a
       narrow column. The panel still needs to overshoot 108px above
       the section (Figma master 2490:1211 places it at y=-108 from
       qlinks section top).
       Trick: remove the inner top padding so the margin-top:-6.75rem
       on the panel translates directly into a 108px overshoot above
       the section's top edge. The text stays vertically centered in
       the grid cell (which sizes to the panel's height), giving
       philosophy its breathing room without explicit padding. */
    .fsi-qlinks-inner {
        padding-top: 0;
        padding-bottom: 0;
        /* Cap the text column at its Figma width and center the column pair
           so the spotlight + gold-panel band holds the mockup's ~1318px
           constraint instead of spreading to fill wide viewports. */
        grid-template-columns: minmax(0, 44.875rem) minmax(0, 32.5rem);
        justify-content: center;
        gap: 5rem;
        align-items: center;
    }
    .fsi-qlinks-text {
        padding-block: 4.5rem;
        max-width: 44.875rem; /* 718px Figma Frame 141 */
    }
    .fsi-qlinks-panel {
        margin-top: -6.75rem;
        /* Bottom margin holds the blue band below the panel (Figma seats the
           panel ~80px above the section's bottom edge). */
        margin-bottom: 5rem;
        padding: 2rem;
        min-height: 32.875rem; /* Figma 526 */
        position: relative;     /* needed for z-index */
        z-index: 2;
        /* Keep the tile rows their natural height and center the block so
           the bottom row keeps breathing room below it, rather than the
           rows stretching to fill the (taller-than-Figma) panel. */
        align-content: center;
    }
}

/* Mobile qlinks become a single-slide Swiper carousel above the
   philosophy text. Figma master 2490:1647 — pad:40/16/40/16. */
.fsi-qlinks-carousel { background-color: var(--color-2); padding: 2.5rem 1rem; }
.fsi-qlinks-carousel .swiper-container { position: relative; max-width: var(--size-xl); margin: 0 auto; padding: 0 var(--fsi-gutter); }
.fsi-qlinks-carousel .swiper-slide { display: flex; justify-content: center; }
.fsi-qlinks-carousel .swiper-slide a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Black text on the gold tile — Figma design intent. */
    color: #000000;
    text-decoration: none;
    padding: 1rem;
    width: 14.25rem;
    min-height: 9.625rem;
    gap: 0.5rem;
}
.fsi-qlinks-carousel .fsi-qlink-icon { width: 2.75rem; height: 2.75rem; }
.fsi-qlinks-carousel .fsi-qlink-label { font-weight: 600; }

/* Carousel arrows — Figma master 2490:1654/1656: a bare black chevron
   (vector 10×16) at each edge of the gold band; the Figma arrow box is
   filled with the band's own gold, so it reads as no button surface.
   Without this override they fall back to Swiper's default blue chevron
   plus native <button> chrome. Per libraries/swiper.md: restyle via the
   ::after glyph + navigation custom properties, neutralising the button
   defaults (border/padding/background). Scoped under .fsi-qlinks-carousel
   so it beats Swiper's later-loaded bundle CSS on specificity. */
.fsi-qlinks-carousel .swiper-button-prev,
.fsi-qlinks-carousel .swiper-button-next {
    --swiper-navigation-color: #000000;
    --swiper-navigation-size: 1.5rem;
    /* Sides-offset 0 so the arrow box sits at the band's content edge
       (the carousel already insets 16px). 51px box width = Figma frame
       2490:1654 — the flex-centred chevron then lands ~25px in, matching
       the Figma vector position. */
    --swiper-navigation-sides-offset: 0;
    width: 3.1875rem;
    height: 2.375rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.fsi-qlinks-carousel .swiper-button-prev::after,
.fsi-qlinks-carousel .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: var(--swiper-navigation-size);
    text-transform: none;
}
.fsi-qlinks-carousel .swiper-button-prev::after { content: 'chevron_left'; }
.fsi-qlinks-carousel .swiper-button-next::after { content: 'chevron_right'; }

@media (min-width: 64rem) {
    .fsi-qlinks-carousel { display: none; }
}
.fsi-qlinks-panel { display: none; }
@media (min-width: 64rem) {
    .fsi-qlinks-panel { display: grid; }
}

/* ================================================================
   At a Glance (AAG)
   ================================================================ */
.fsi-aag {
    position: relative;
    /* Exact AAG fill from Figma master 2490:5251 — dark navy-teal. */
    background-color: #1F3E43;
    color: #fff;
    overflow: hidden;
}
.fsi-aag::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(31,62,67,0.7), rgba(31,62,67,0.7)), var(--fsi-aag-bg, linear-gradient(#1F3E43, #1F3E43));
    background-size: cover, cover;
    background-position: center, center;
    z-index: 0;
}
.fsi-aag-inner {
    position: relative;
    z-index: 1;
    max-width: var(--size-xl);
    margin: 0 auto;
    /* Mobile section pad: 40/16 per Figma master 2490:1662. */
    padding: 2.5rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Row gap 50px and column gap 50px between adjacent tiles at mobile. */
    row-gap: 3.125rem;
    column-gap: 0;
}
.fsi-aag .fsi-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    /* Mobile tile gap: 8px per Figma master 2490:1664. */
    gap: 0.5rem;
    /* Mobile tile min-height: 146px per Figma. */
    min-height: 9.125rem;
}
/* Mobile icon size: 44px per Figma 2490:1665. */
.fsi-aag-icon { width: 2.75rem; height: 2.75rem; display: inline-flex; }
.fsi-aag-icon svg, .fsi-aag-icon img { width: 100%; height: 100%; fill: currentColor; }
.fsi-aag-value {
    /* Mobile (2490:1666) — Raleway Bold 32px, line-height 37.57 (~117%). */
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.17;
}
.fsi-aag-label {
    /* Mobile (2490:1667) — Raleway Regular 16px, line-height 24px. */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    opacity: 1;
}

@media (min-width: 64rem) {
    .fsi-aag-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Desktop section pad 0/24 per Figma master 2490:1438. */
        padding: 0 1.5rem;
    }
    /* Desktop tile fills half the 768px Figma section minus the 50px
       row gap, so ~22.4rem (359px). Tile content centers via the
       flex column with visible breathing room above and below. */
    .fsi-aag .fsi-fact {
        min-height: 22.4rem;
        gap: 1rem; /* 16px desktop, per 2490:1440. */
    }
    /* Desktop icon: 88px (2490:1441). */
    .fsi-aag-icon { width: 5.5rem; height: 5.5rem; }
    /* Desktop value: Raleway SemiBold 48px (2490:1442). */
    .fsi-aag-value { font-size: 3rem; font-weight: 600; }
    /* Desktop label: Raleway Regular 24px (2490:1443). */
    .fsi-aag-label { font-size: 1.5rem; }
}

/* ================================================================
   News + Events row
   ================================================================ */
.fsi-news-events {
    background-color: #fff;
}
.fsi-news-events-inner {
    max-width: var(--size-xl);
    margin: 0 auto;
    padding: var(--fsi-section-pad) var(--fsi-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}
.fsi-news-events-inner > section { min-width: 0; }
.fsi-news-events-heading {
    text-align: center;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
}
@media (min-width: 64rem) {
    .fsi-news-events-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* News carousel — gold body overlaps the image by ~2rem at the bottom
   and is inset ~1rem from the column edges. Matches Figma master
   2490:4940 (gold band at x=15 in a 643px column, overlapping the
   image vertically by ~32px). */
.fsi-news .swiper-container { position: relative; }
.fsi-news-card {
    display: block;
    color: inherit;
    text-decoration: none;
    position: relative;
}
.fsi-news-image-wrap {
    /* Figma master 2490:4939 image is 643 x 552 (~1.165:1). */
    position: relative;
    aspect-ratio: 643 / 552;
    overflow: hidden;
    background-color: #eee;
}
.fsi-news-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.fsi-news-body {
    background-color: var(--color-2);
    /* Design specifies black text on the gold news band (Figma node
       2490:4942/4943 fills are pure #000000). CMS-computed --color-over-2
       may resolve to white for AA contrast on gold, which contradicts
       the design intent. Use a literal pair here. */
    color: #000000;
    padding: 2rem;
    margin: -2rem 1rem 0 1rem;
    position: relative;
    z-index: 1;
}
.fsi-news-title {
    /* Figma node 2490:4942 — Raleway Bold 32px black at desktop; smaller on
       mobile per the mobile mock so the article title doesn't dominate. */
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.17;
    margin: 0 0 1.25rem 0;
}
@media (min-width: 64rem) {
    .fsi-news-title { font-size: 2rem; }
}
.fsi-news-summary {
    /* Figma node 2490:4943 — Raleway Regular 20px, line-height 30px (150%). */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.fsi-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}
.fsi-carousel-controls a.fsi-more-btn,
.fsi-carousel-controls .fsi-more-btn {
    background: var(--color-1);
    color: var(--color-over-1);
    text-decoration: none;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.fsi-carousel-controls .swiper-button-prev,
.fsi-carousel-controls .swiper-button-next {
    /* Figma master 2490:4945/4948 — 51×51 primary-blue square with a
       white chevron, sitting in the static [‹][More News][›] row. The
       glyph + native <button> chrome need overriding (default would be
       Swiper's swiper-icons chevron + outset border). Per swiper.md. */
    position: static;
    margin: 0;
    width: 3.1875rem;
    height: 3.1875rem;
    color: var(--color-over-1);
    --swiper-navigation-color: var(--color-over-1);
    --swiper-navigation-size: 1.5rem;
    border: 0;
    border-radius: 0;
    transition: background-position 0.3s ease, color 0.2s ease;
}
/* Sweep-to-left on prev: gold fills from right edge toward left */
.fsi-carousel-controls .swiper-button-prev {
    background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 50%);
    background-size: 200% 100%;
    background-position: left center;
}
.fsi-carousel-controls .swiper-button-prev:hover,
.fsi-carousel-controls .swiper-button-prev:focus-visible {
    background-position: right center;
    color: #000;
    --swiper-navigation-color: #000;
}
/* Sweep-to-right on next: gold fills from left edge toward right */
.fsi-carousel-controls .swiper-button-next {
    background: linear-gradient(to right, var(--color-2) 50%, var(--color-1) 50%);
    background-size: 200% 100%;
    background-position: right center;
}
.fsi-carousel-controls .swiper-button-next:hover,
.fsi-carousel-controls .swiper-button-next:focus-visible {
    background-position: left center;
    color: #000;
    --swiper-navigation-color: #000;
}
.fsi-carousel-controls .swiper-button-prev::after,
.fsi-carousel-controls .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: var(--swiper-navigation-size);
    text-transform: none;
}
.fsi-carousel-controls .swiper-button-prev::after { content: 'chevron_left'; }
.fsi-carousel-controls .swiper-button-next::after { content: 'chevron_right'; }

/* Events tabs */
.fsi-events { color: inherit; }
.fsi-events-panel {
    background-color: var(--color-1);
    color: var(--color-over-1);
    padding: 1.25rem;
    border-radius: 0;
}
.fsi-events-tabs {
    display: flex;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}
.fsi-events-tabs li { flex: 1; }
.fsi-events-tabs button {
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0.85rem 0.5rem;
    cursor: pointer;
    font: inherit;
    text-align: center;
    border-bottom: 3px solid transparent;
}
.fsi-events-tabs button[aria-selected="true"] {
    border-bottom-color: var(--color-2);
    font-weight: 700;
}
.fsi-events-tab-month { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.fsi-events-tab-day { display: block; font-size: 1.75rem; font-weight: 700; }
.fsi-events-list { list-style: none; margin: 0; padding: 0; }
.fsi-events-list li { padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.fsi-events-list li:last-child { border-bottom: 0; }
.fsi-events-list a { color: inherit; text-decoration: none; }
.fsi-event-title { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.25rem 0; }
.fsi-event-meta { font-size: 0.9rem; opacity: 0.9; margin: 0; }
.fsi-events-panel[hidden] { display: none; }
.fsi-events-panel { display: none; }
.fsi-events-panel.is-active { display: block; }

/* ================================================================
   Mission (Spotlight on photo)
   ================================================================ */
.fsi-mission {
    position: relative;
    /* Per Figma master 2490:5299 fill is pure #000000. The ::before
       overlay paints the photo + dark gradient on top; this base color
       sits behind it (visible only if the photo fails to load) and
       gives automated contrast tools a real solid bg to read. */
    background-color: #000000;
    color: #fff;
    overflow: hidden;
    text-align: center;
}
.fsi-mission::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), var(--fsi-mission-bg, linear-gradient(#1a1a1a, #1a1a1a));
    background-size: cover, cover;
    background-position: center, center;
    z-index: 0;
}
.fsi-mission-inner {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--fsi-section-pad) var(--fsi-gutter);
}
/* Figma master 2490:5299 is 768px tall. Keep the section content-driven
   (so longer/shorter copy still flows naturally) but enforce 48rem
   (768px) as a desktop minimum so the section matches the design's
   visual weight when content is short. */
@media (min-width: 64rem) {
    .fsi-mission {
        min-height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fsi-mission-inner { padding: 4rem var(--fsi-gutter); }
}
.fsi-mission-logo {
    /* Figma logo size: 372px desktop (2490:2068) / 335px mobile
       (2490:1746). 23.25rem = 372px; the mission-inner constrains it to
       the content width on mobile. */
    margin: 0 auto;
    max-width: 23.25rem;
}
.fsi-mission-logo img,
.fsi-mission-logo svg { width: 100%; height: auto; }
/* Gold divider between logo and title — Figma Line 2 (2490:2070):
   100px wide, 6px stroke, #BA8032 (secondary). Figma gap logo→line is
   48px mobile / 120px desktop; line→title 20px. */
.fsi-mission-divider {
    display: block;
    width: 100px;
    height: 6px;
    background-color: var(--color-2);
    border-radius: 3px;
    /* Logo→line gap. The Figma 120px desktop gap is tuned to the mock's
       short placeholder body; with the real (longer) mission copy the
       section grows and that gap reads as too airy, so keep the tighter
       48px throughout to sit the logo close to the spotlight. */
    margin: 3rem auto 1.25rem auto;
}
.fsi-mission-title {
    /* Figma master 2490:2071 — Raleway SemiBold 56px, line-height
       65.74 (~117%). At mobile we step down. */
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    margin: 0 0 1.25rem 0;
    line-height: 1.17;
}
.fsi-mission-body {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.5;
    margin: 0;
}

/* ================================================================
   College logos strip
   ================================================================ */
.fsi-logos {
    /* Figma mobile master 2490:1751 — pad 50/72 (vertical/horizontal);
       72px sides leave the 231px logo column. Desktop master 2490:4988 —
       pad 72 all around (restored at 48rem). */
    background-color: #fff;
    padding: 3.125rem 4.5rem;
}
.fsi-logos .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Figma logos 2490:4991-4995 all render at 50px tall. */
.fsi-logos .swiper-slide img {
    height: 3.125rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media (min-width: 48rem) {
    .fsi-logos { padding: 4.5rem; }
}

/* ================================================================
   Photo qlinks — 3 conversion CTA tiles
   ================================================================ */
/* Photo qlinks — Figma master 2490:4996 has pad:0/24/80/24, gap:50
   between tiles. No top padding (sits flush with logos section above);
   80px bottom padding. */
.fsi-photoqlinks { background-color: #fff; padding: 0 0 5rem 0; }
.fsi-photoqlinks .swiper-container {
    position: relative;
    max-width: var(--size-xl);
    margin: 0 auto;
    /* Mobile: wide side gutter so the single photo tile narrows to ~the
       Figma 217px (master 2490:1760) and the prev/next arrows sit in the
       gutter BESIDE the photo, not overlapping it. 5rem ≈ 16px edge +
       51px arrow + ~13px gap per side (Figma 2490:1762). Desktop restores
       the narrow gutter for the 3-up grid. */
    padding: 0 5rem;
}
.fsi-photoqlinks .swiper-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.fsi-photoqlinks .swiper-slide {
    height: auto;
    display: flex;
    flex: 0 0 100%;
}
.fsi-photoqlinks-tile,
body .fsi-photoqlinks-tile,
body a.fsi-photoqlinks-tile {
    /* Tile dimensions flex with the column — no fixed aspect ratio.
       Min-height keeps the tile usable at narrow viewports; img inside
       uses object-fit:cover to fill whatever shape the tile takes. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 15rem;
    background-color: #1a1a1a;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
}
@media (min-width: 48rem) {
    .fsi-photoqlinks-tile,
    body .fsi-photoqlinks-tile,
    body a.fsi-photoqlinks-tile { min-height: 21.5rem; }
}
.fsi-photoqlinks-tile img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
    transition: filter 0.25s ease;
}
.fsi-photoqlinks-tile:hover img,
.fsi-photoqlinks-tile:focus img { filter: brightness(0.45); }
.fsi-photoqlinks-tile span {
    position: relative;
    z-index: 2;
    font-size: clamp(1.375rem, 3vw, 2.75rem);
    font-weight: 700;
    text-transform: capitalize;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* Mobile carousel arrows — Figma master 2490:1763/1765: 51×51 primary-
   blue box with a white chevron (vector 10×16) flanking the single photo
   tile. Mobile only (desktop is a static 3-up grid, arrows hidden below).
   Without this they fall back to Swiper's default blue chevron + native
   <button> chrome. Per libraries/swiper.md. */
.fsi-photoqlinks .swiper-button-prev,
.fsi-photoqlinks .swiper-button-next {
    --swiper-navigation-color: var(--color-over-1);
    --swiper-navigation-size: 1.5rem;
    --swiper-navigation-sides-offset: 1rem;
    width: 3.1875rem;
    height: 3.1875rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--color-1);
}
.fsi-photoqlinks .swiper-button-prev::after,
.fsi-photoqlinks .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: var(--swiper-navigation-size);
    text-transform: none;
}
.fsi-photoqlinks .swiper-button-prev::after { content: 'chevron_left'; }
.fsi-photoqlinks .swiper-button-next::after { content: 'chevron_right'; }
@media (min-width: 48rem) {
    /* Desktop is a static 3-up grid — restore the narrow section gutter
       (the wide mobile gutter for side arrows is no longer needed). */
    .fsi-photoqlinks .swiper-container { padding: 0 1.5rem; }
    .fsi-photoqlinks .swiper-wrapper {
        /* Figma 2490:4996 — 3 tiles in a row with 50px gap. */
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3.125rem;
        transform: none !important;
    }
    .fsi-photoqlinks .swiper-slide { flex: initial; width: auto !important; }
    .fsi-photoqlinks .swiper-button-prev,
    .fsi-photoqlinks .swiper-button-next { display: none; }
}

/* ================================================================
   Footer body — 4 columns at desktop, stacked mobile
   ================================================================ */
.fsi-footer {
    background-color: var(--color-1);
    color: var(--color-over-1);
}
.fsi-footer-body {
    /* Figma master 2490:5002 — VERTICAL counter:CENTER gap:32 pad:64/24/64/24
       at the section level, with a HORIZONTAL Content row inside using
       SPACE_BETWEEN. Single column at mobile (Figma mobile master uses
       its own treatment); at desktop the four columns space-between. */
    max-width: var(--size-xl);
    margin: 0 auto;
    padding: 4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media (min-width: 64rem) {
    .fsi-footer-body {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;
    }
    /* Identity column at Figma's fixed 372px; Apply column constrained
       at 336 so the privacy body wraps inside it. Navigate/Resources
       size to their content (the heading + link labels). SPACE_BETWEEN
       distributes the leftover horizontal space evenly between columns. */
    .fsi-footer-body > .fsi-footer-identity {
        flex: 0 0 372px;
    }
    .fsi-footer-body > nav.fsi-footer-col {
        flex: 0 0 auto;
    }
    .fsi-footer-body > div.fsi-footer-col {
        flex: 0 0 336px;
    }
}
/* Identity column items centered horizontally per Figma master
   2490:5004 (counter:CENTER). */
.fsi-footer-identity {
    display: flex;
    flex-direction: column;
    /* Left-aligned (logo, address, Niche badge) on all viewports per the
       desktop and mobile footer mocks. */
    align-items: flex-start;
    text-align: left;
    gap: 2rem;
}
.fsi-footer-identity .fsi-footer-logo img,
.fsi-footer-identity .fsi-footer-logo svg { max-width: 18rem; height: auto; display: block; }
.fsi-footer-identity > * { margin: 0; }
.fsi-footer-address {
    /* Figma 2490:5008/5009 — Raleway Regular 18px white, UNDERLINE,
       line-height 27 (150%). */
    font-style: normal;
    margin: 1.25rem 0 0 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}
.fsi-footer-address a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fsi-footer-badge { display: inline-flex; margin-top: 1.5rem; }
.fsi-footer-badge img { max-width: 8.25rem; height: auto; }
.fsi-footer-badge--el { background: #fff; padding: 0.4rem 0.6rem; border-radius: 3px; }
.fsi-footer-badge--el img { max-width: 13rem; }

.fsi-footer-col-heading {
    /* Figma 2490:5013/5024 — Raleway SemiBold 18px white uppercase
       (textCase:UPPER), line-height 27. No underline on headings —
       the underline in the design is only on individual links. */
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 1rem 0;
}

.fsi-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fsi-footer-links a {
    /* Raleway Regular 18px white UPPERCASE — lighter than the SemiBold
       column heading, giving the link list its own weight. Underline
       grows from center on hover per customer feedback. */
    color: inherit;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0;
    position: relative;
}
.fsi-footer-links a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.fsi-footer-links a:hover::after,
.fsi-footer-links a:focus-visible::after {
    transform: scaleX(1);
}

.fsi-footer-button {
    /* Figma masters 2490:5041/5046 — links container 47 tall with
       pad:10/20/10/20, text Raleway Regular 18 uppercase blue. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background-color: #ffffff;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0;
    border-radius: 0;
    margin-top: 0.75rem;
}
/* Text is theme-colored — wrap in a leaf span (added in JSP) so the
   brightness filter only affects the text glyphs, not the white bg.
   filter on the <a> itself would darken the literal white bg too. */
.fsi-footer-button > span {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
.fsi-footer-button:hover {
    background-color: #f0f0f0;
}

.fsi-footer-privacy-body {
    margin: 1rem 0;
    line-height: 1.5;
}

/* Footer bar — bg var(--color-2) is paired with var(--color-over-2)
   per CMS theme contrast guarantee. */
/* Footer bar — Figma master 2490:5048: HORIZONTAL counter:CENTER gap:32
   pad:56/24/26/24, fill #BA8032 (gold). The 56px top padding clears the
   lower half of the social icons, which straddle the bar's top edge; the
   Edlio attribution (two thin lines flanking the mark) sits below. The
   bar is the positioned ancestor for the overlapping social row. */
.fsi-footer-bar {
    background-color: var(--color-2);
    color: var(--color-over-2);
    padding: 3.5rem 1.5rem 1.625rem 1.5rem;
    position: relative;
}
.fsi-footer-bar-inner {
    max-width: var(--size-xl);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.fsi-footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    /* Social icons straddle the blue/gold boundary — vertically centred
       on the gold bar's top edge (Figma master 2490:1817 / 2490:5053:
       ~half in the blue footer body above, half in the gold bar).
       Absolute against .fsi-footer-bar so top:0 is that boundary; taking
       them out of flow also lets the bar collapse to its ~109px height. */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
.fsi-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5625rem;
    height: 3.5625rem;
    background-color: #fff;
    color: var(--color-1);
    border-radius: 50%;
    text-decoration: none;
}
/* Filter on the icon leaf only — keeps the literal-white circle bg
   from getting darkened when the theme primary is light. */
.fsi-footer-social svg,
.fsi-footer-social img {
    width: 2rem; height: 2rem;
    fill: currentColor;
    filter: brightness(var(--color-1-isDark));
}
/* Edlio attribution group sits inline; the two flanking lines from
   Figma master 2490:5049/5052 are rendered as ::before/::after pseudos
   that grow to fill the horizontal space on either side, matching the
   Figma's `LINE Line 1 / Line 2` decoration. */
.fsi-footer-edlio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    color: inherit;
    align-self: stretch;
    position: relative;
}
.fsi-footer-edlio::before,
.fsi-footer-edlio::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: currentColor;
    opacity: 0.6;
    max-width: 31rem; /* ~493px Figma line length cap */
}
body .fsi-footer-edlio a,
.fsi-footer-edlio a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.fsi-footer-edlio svg { fill: currentColor; }

/* Edlio attribution branding dimensions — per LAYOUT_STRUCTURE.md
   "Branding dimensions" rules. edlio-horiz.svg (Powered by Edlio):
   140px × 20px. edlio-logo.svg (Login): 1.5rem tall, width auto. */
.fsi-footer-edlio a:first-child svg {
    width: 140px;
    height: 20px;
}
.fsi-footer-edlio a:nth-child(2) svg {
    height: 1.5rem;
    width: auto;
}

/* ================================================================
   System-CSS specificity overrides
   The CMS web_apps.css applies `a, a:link, a:visited, a:hover, a:active
   { color: #333333 }` at specificity (0,1,1). To make our themed-surface
   anchor colors win, we bump every relevant selector to (0,1,2) or
   higher by either adding `a` to the body-prefix or by container-
   scoping with two classes. Per knowledge/CSS_AUTHORING.md - System-CSS
   specificity.
   ================================================================ */

/* Skip-to-content link on primary-color background */
body a.fsi-skip-link,
body a.fsi-skip-link:link,
body a.fsi-skip-link:visited {
    color: var(--color-over-1);
}

/* Qlinks panel + mobile carousel: links on the gold panel.
   Figma node 2490:1217/1220/1224 fills are #000000 — design specifies
   black text on gold regardless of CMS-computed --color-over-2. */
body .fsi-qlinks-panel a,
body .fsi-qlinks-panel a:link,
body .fsi-qlinks-panel a:visited,
body .fsi-qlinks-carousel .swiper-slide a,
body .fsi-qlinks-carousel .swiper-slide a:link,
body .fsi-qlinks-carousel .swiper-slide a:visited {
    color: #000000;
}

/* Events list links sit on the primary-color panel */
body .fsi-events-list a,
body .fsi-events-list a:link,
body .fsi-events-list a:visited {
    color: var(--color-over-1);
}
/* Title + meta inside those links inherit from the <a> rule above. */

/* News card link inherits color from its parent surfaces. */
body .fsi-news-card,
body .fsi-news-card:link,
body .fsi-news-card:visited {
    color: inherit;
}
body a.fsi-more-btn,
body a.fsi-more-btn:link,
body a.fsi-more-btn:visited {
    color: var(--color-over-1);
}

/* Events CTA buttons (primary-color bg) */
body a.fsi-more-events-btn,
body a.fsi-more-events-btn:link,
body a.fsi-more-events-btn:visited,
body a.fsi-community-cal-btn,
body a.fsi-community-cal-btn:link,
body a.fsi-community-cal-btn:visited {
    color: var(--color-over-1);
}

/* Donate header CTA (secondary-color bg). Figma master uses literal
   black text — overrides the CMS-computed --color-over-2. */
body a.fsi-donate,
body a.fsi-donate:link,
body a.fsi-donate:visited {
    color: #000000;
}

/* Footer body links (identity address + Navigate/Resources columns) */
body .fsi-footer-identity a,
body .fsi-footer-identity a:link,
body .fsi-footer-identity a:visited,
body .fsi-footer-address a,
body .fsi-footer-address a:link,
body .fsi-footer-address a:visited,
body .fsi-footer-links a,
body .fsi-footer-links a:link,
body .fsi-footer-links a:visited {
    color: var(--color-over-1);
}

/* Footer button: theme-color text on literal-white bg; the brightness
   filter (on the inner <span>) handles dark/light safety. */
body a.fsi-footer-button,
body a.fsi-footer-button:link,
body a.fsi-footer-button:visited {
    color: var(--color-1);
}

/* Footer bar (secondary-color bg): Edlio attribution + Login marks. */
body .fsi-footer-bar a,
body .fsi-footer-bar a:link,
body .fsi-footer-bar a:visited {
    color: var(--color-over-2);
}

/* Mission section read-more uses the .fsi-footer-button style; covered
   above. Mission body content is rendered HTML; if it contains anchors,
   keep them visible by inheriting the white text on dark photo. */
body .fsi-mission a,
body .fsi-mission a:link,
body .fsi-mission a:visited {
    color: #ffffff;
}

/* Nav dropdown items on white sub-menu panels — use theme blue with the
   brightness filter (already applied on the leaf <a>). The system
   anchor rule fights this, so re-assert with higher specificity. */
body .fsi-nav-desktop .fsi-sub-menu-item > a,
body .fsi-nav-desktop .fsi-sub-menu-item > a:link,
body .fsi-nav-desktop .fsi-sub-menu-item > a:visited {
    color: var(--color-1);
}
/* When the sub-menu item is hovered/focused (primary-color bg), flip to
   over-1. */
body .fsi-nav-desktop .fsi-sub-menu-item:hover > a,
body .fsi-nav-desktop .fsi-sub-menu-item:focus-within > a,
body .fsi-nav-desktop .fsi-sub-menu-item:hover > a:link,
body .fsi-nav-desktop .fsi-sub-menu-item:focus-within > a:link {
    color: var(--color-over-1);
}

/* ================================================================
   pageTitle — for inside pages
   ================================================================ */
body .pageTitle {
    /* Figma inside-page title (node I2490:1879;234:123) — Raleway
       SemiBold 36px, black, line-height ~1.17, left-aligned. The design
       uses a literal black here, not the theme primary. */
    color: #000000;
    font-weight: 600;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.17;
    margin-block: 1.5rem;
}

/* ================================================================
   Mobile nav — chevron rotation parity with desktop
   ================================================================ */
.fsi-nav-mobile .fsi-dropdown-toggle::after { transition: transform 0.2s ease; }
.fsi-nav-mobile .fsi-dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* ================================================================
   Search form — opens on aria-expanded="true" via :has()
   ================================================================ */
.fsi-search-form { display: none; }
.fsi-header:has(.fsi-search-toggle[aria-expanded="true"]) .fsi-search-form {
    display: flex;
    gap: 0.5rem;
}

/* ================================================================
   qlinks panel — hover state: scale + underline-from-center on label.
   No background change per customer feedback.
   ================================================================ */
.fsi-qlinks-panel a,
.fsi-qlinks-carousel .swiper-slide a {
    transition: transform 0.2s ease;
}
.fsi-qlinks-panel a:hover,
.fsi-qlinks-panel a:focus-visible,
.fsi-qlinks-carousel .swiper-slide a:hover,
.fsi-qlinks-carousel .swiper-slide a:focus-visible {
    transform: scale(1.05);
}
.fsi-qlinks-panel a:hover .fsi-qlink-label::after,
.fsi-qlinks-panel a:focus-visible .fsi-qlink-label::after,
.fsi-qlinks-carousel .swiper-slide a:hover .fsi-qlink-label::after,
.fsi-qlinks-carousel .swiper-slide a:focus-visible .fsi-qlink-label::after {
    transform: scaleX(1);
}
/* CMS-icon SVG/IMG swap-window sizing — keep tile icons consistent */
.fsi-qlinks-panel .fsi-qlink-icon svg,
.fsi-qlinks-panel .fsi-qlink-icon img,
.fsi-qlinks-carousel .fsi-qlink-icon svg,
.fsi-qlinks-carousel .fsi-qlink-icon img {
    width: 2.75rem; height: 2.75rem;
    fill: currentColor;
}

/* ================================================================
   Photo qlinks — tile hover state, slide grid override
   ================================================================ */
.fsi-photoqlinks-tile span {
    text-decoration: none;
}
.fsi-photoqlinks-tile:hover span,
.fsi-photoqlinks-tile:focus-visible span {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.fsi-photoqlinks-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: transparent;
    transition: background-color 0.2s ease;
}
.fsi-photoqlinks-tile:hover::after,
.fsi-photoqlinks-tile:focus-visible::after {
    background-color: color-mix(in srgb, var(--color-1) 55%, transparent);
}

/* ================================================================
   Donate button — hover (slight darken + same chevron)
   ================================================================ */
.fsi-donate:hover,
.fsi-donate:focus-visible {
    background-color: color-mix(in srgb, var(--color-2), black 10%);
    filter: none;
}

/* ================================================================
   News + Events: "More" buttons and Community Calendar button
   per components canvas 2490:2195/2198 (more_events) and
   2490:2202/2205 (more_news).
   ================================================================ */
.fsi-news .fsi-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Figma Frame 145 gap:8 between arrows and More News */
    margin-top: 1.5rem;
}
.fsi-news .fsi-more-btn,
body .fsi-news .fsi-more-btn {
    /* Figma master 2490:4947 — solid primary-blue button matching the
       events buttons' style. Raleway Regular 18 white, padding 12/20. */
    background-color: var(--color-1);
    color: var(--color-over-1);
    border: 0;
    padding: 0.75rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    border-radius: 0;
    transition: color 0.2s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Radial-out gold fill on hover — the ::before circle expands from center.
   overflow:hidden + isolation on the button clip it. color change is
   separate so text stays readable during the transition. */
.fsi-news .fsi-more-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-2);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.45s ease, border-radius 0.35s ease;
    z-index: -1;
}
body .fsi-news a.fsi-more-btn:hover,
body .fsi-news a.fsi-more-btn:focus-visible {
    color: #000000;
}
body .fsi-news a.fsi-more-btn:hover::before,
body .fsi-news a.fsi-more-btn:focus-visible::before {
    transform: scale(3);
    border-radius: 0;
}

/* Events CTA buttons: stacked, centered below the events panel.
   "More Events" is a small solid-primary pill; "Community Calendar"
   is a larger solid-primary pill below it. */
.fsi-events-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.fsi-more-events-btn,
.fsi-community-cal-btn,
body .fsi-more-events-btn,
body .fsi-community-cal-btn {
    /* Figma 2490:4980 — Raleway Regular 18 white. Buttons use the
       primary blue background; no border radius per design. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    border-radius: 0;
    transition: color 0.2s ease;
    background-color: var(--color-1);
    color: var(--color-over-1);
    border: 0;
    padding: 0.75rem 1.25rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.fsi-more-events-btn::before,
.fsi-community-cal-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-2);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.45s ease, border-radius 0.35s ease;
    z-index: -1;
}
body a.fsi-more-events-btn:hover,
body a.fsi-more-events-btn:focus-visible,
body a.fsi-community-cal-btn:hover,
body a.fsi-community-cal-btn:focus-visible {
    color: #000000;
}
body a.fsi-more-events-btn:hover::before,
body a.fsi-more-events-btn:focus-visible::before,
body a.fsi-community-cal-btn:hover::before,
body a.fsi-community-cal-btn:focus-visible::before {
    transform: scale(3);
    border-radius: 0;
}

/* ================================================================
   Events — MonUI tabs
   Design: date tabs sit on the WHITE page background (blue text); only
   the events list below sits inside a blue panel with centered white
   content. A thin gray rule separates the tab row from the panel.
   ================================================================ */
.fsi-events-tabs-wrap {
    background-color: transparent;
    color: inherit;
}
.fsi-events-tabs-wrap .monui-tabs-list {
    /* Single light-gray divider line between the day tabs and the
       events content panel below — not per-tab borders. The bottom
       margin gives the line breathing room above the blue panel so
       it actually reads as a separator. */
    display: flex;
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
    border-bottom: 2px solid #d9d4d5;
    background-color: #ffffff;
}
.fsi-events-tabs-wrap .monui-tabs-list li { flex: 1; }
.fsi-events-tabs-wrap .monui-button {
    width: 100%;
    background: transparent;
    border: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    padding: 1.25rem 0.5rem;
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: opacity 0.2s ease;
}
.fsi-events-tabs-wrap .monui-button:hover,
.fsi-events-tabs-wrap .monui-button:focus-visible {
    opacity: 0.75;
}
/* Active tab: underline on BOTH month AND day per Figma master
   2490:4954/4955 — both texts are styled with textDecoration:UNDERLINE
   in the master's "active" state representation. */
.fsi-events-tabs-wrap .monui-button.monui-active,
.fsi-events-tabs-wrap .monui-button[aria-selected="true"] {
    background-color: var(--color-2);
    color: var(--color-over-2);
}
.fsi-events-tabs-wrap .monui-button.monui-active:hover,
.fsi-events-tabs-wrap .monui-button[aria-selected="true"]:hover {
    opacity: 1;
}
.fsi-events-tabs-wrap .monui-button.monui-active .fsi-events-tab-month,
.fsi-events-tabs-wrap .monui-button.monui-active .fsi-events-tab-day,
.fsi-events-tabs-wrap .monui-button[aria-selected="true"] .fsi-events-tab-month,
.fsi-events-tabs-wrap .monui-button[aria-selected="true"] .fsi-events-tab-day {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
.fsi-events-tab-month {
    /* Figma 2490:4954 — Raleway Regular 20px primary blue, line-height 30. */
    display: block;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
}
.fsi-events-tab-day {
    /* Figma 2490:4955 — Raleway Bold 40px primary blue, line-height ~47. */
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.17;
    margin-top: 0.25rem;
}

/* Panels: blue card containing the day's event list, centered text.
   Figma master 2490:4962 — VERTICAL primary:CENTER counter:CENTER
   gap:24 pad:60/0/60/0. The horizontal padding is 0 — text inside
   is centered by the inner layout. */
.fsi-events-tabs-wrap .monui-tabs-panels {
    background-color: var(--color-1);
    color: var(--color-over-1);
    padding: 3.75rem 1.5rem;
}
.fsi-events-tabs-wrap .monui-panel { display: none; }
.fsi-events-tabs-wrap .monui-panel.monui-active,
.fsi-events-tabs-wrap .monui-panel[aria-hidden="false"] {
    display: block;
}
.fsi-events-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Figma gap:24 between events. */
}
/* Short centered white rule closing the list below the last event
   (Figma 2490:1736), above the CTA buttons. No separators between events. */
.fsi-events-list::after {
    content: '';
    align-self: center;
    width: 55%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.85);
}
.fsi-events-list li {
    padding: 0;
    /* No separator between events — the mockup spaces them by gap only.
       Overrides the pre-MonUI rule above that still sets a faint border. */
    border-bottom: 0;
}
.fsi-events-list a {
    color: inherit;
    text-decoration: none;
    display: block;
}
.fsi-event-title {
    /* Figma 2490:4964 — Raleway Bold 32px white, line-height ~37.57. */
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.17;
    margin: 0 0 0.5rem 0;
    text-align: center;
    position: relative;
}
.fsi-event-title::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}
.fsi-events-list a:hover .fsi-event-title::after,
.fsi-events-list a:focus-visible .fsi-event-title::after { transform: scaleX(1); }
.fsi-event-meta {
    /* Figma 2490:4966/4967 — Raleway Regular 20px white, line-height 30. */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* Suppress legacy custom-tabs panel rule. */
.fsi-events-panel { display: block; }

/* ================================================================
   AAG dividers — broken-line pattern per Figma master 2490:1448/1460.
   The Figma divider frame holds TWO short LINE elements with a 48px
   gap centered vertically (not one continuous line). At mobile the
   AAG has NO dividers (per master 2490:1662 — tiles sit with a 50px
   row gap and no line elements).
   ================================================================ */
.fsi-aag .fsi-fact {
    border: 0;
    position: relative;
}
@media (min-width: 64rem) {
    /* Desktop (3 cols × 2 rows). Per Figma masters 2490:1449/1450,
       the divider lines are 2px solid white, spanning from the
       SECTION edge (not the tile edge) inward, with a 48px centered
       gap straddling the row split.
       Tiles 1, 2 get a top-anchored segment that extends UP past the
       tile into the section's top padding (reaching the section top
       container edge). Tiles 4, 5 get a bottom-anchored segment that
       extends DOWN into the section's bottom padding (reaching the
       section bottom edge). Tiles 3 and 6 get nothing.
       Using top/bottom together with calc(-1 * var(--fsi-section-pad))
       keeps the line proportional to the section's vertical padding —
       the line edges track the section container regardless of how
       the fluid section-pad clamp resolves at a given viewport. */
    .fsi-aag .fsi-fact::after {
        content: "";
        position: absolute;
        right: 0;
        width: 2px;
        background-color: #ffffff;
    }
    /* Section has no vertical padding at desktop, so tile top = section
       top for top-row tiles, and tile bottom = section bottom for
       bottom-row tiles. Row gap is 50px between rows; the divider gap
       is 48px centered on the row split, so lines extend 1px past tile
       boundary into the gap on the inner side. */
    .fsi-aag .fsi-fact:nth-child(-n+3)::after {
        top: 0;
        bottom: -1px;
    }
    .fsi-aag .fsi-fact:nth-child(n+4)::after {
        top: -1px;
        bottom: 0;
    }
    /* Right-edge column (3rd, 6th): no divider. */
    .fsi-aag .fsi-fact:nth-child(3n)::after { content: none; }
}

/* ================================================================
   Hero — swiper-container needs position:relative (Swiper bundle CSS
   doesn't set it, our prev/next buttons are position:absolute and
   need a containing block); also ensure swiper-wrapper has width.
   ================================================================ */
.fsi-hero .swiper-container { position: relative; }
.fsi-hero .swiper { width: 100%; }
.fsi-hero .swiper-wrapper { display: flex; }
.fsi-hero .swiper-slide { flex-shrink: 0; }

/* ================================================================
   AOS — initial state safety; if AOS CSS hasn't loaded yet,
   sections should still be visible (no flash of hidden content).
   AOS sets visibility/opacity via its CSS — when AOS itself is
   blocked by reduced motion, our reduced-motion JS strips data-aos
   before AOS would have hidden anything.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}