/*
Theme Name: SMLS
Author: FIVE Creative
Author URI: https://fivecreative.com.au
Description: WordPress Theme for South-East Monash Legal Service
Requires at least: 6.8.3
Tested up to: 6.8.3
Requires PHP: 8.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smls
*/


/* ============================================================
   FONTS
   Add font files to assets/fonts/ before going live
   ============================================================ */

@font-face {
    font-family: 'Founders Grotesk';
    src: url('assets/fonts/subset-FoundersGrotesk-Regular.woff2') format('woff2'),
         url('assets/fonts/subset-FoundersGrotesk-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Founders Grotesk';
    src: url('assets/fonts/subset-FoundersGrotesk-RegularItalic.woff2') format('woff2'),
         url('assets/fonts/subset-FoundersGrotesk-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Founders Grotesk';
    src: url('assets/fonts/subset-FoundersGrotesk-Medium.woff2') format('woff2'),
         url('assets/fonts/subset-FoundersGrotesk-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Founders Grotesk';
    src: url('assets/fonts/subset-FoundersGrotesk-MediumItalic.woff2') format('woff2'),
         url('assets/fonts/subset-FoundersGrotesk-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


/* ============================================================
   DESIGN TOKENS
   Bootstrap's --bs-* vars (compiled from custom.scss) are the primary
   source of truth for brand colours and heading/body font sizes.
   These --smls-* vars cover UI elements, utilities, and shared patterns
   that style.css owns directly.

   Heading scale (from main.min.css):
     H1 75px | H2 40px | H3 30px | H4/H5 22px | H6 18px
   Body scale (from main.min.css):
     default 22px | ≥1920px 26px | ≤767px 18px
   ============================================================ */

:root {

    /* ── Colours ──────────────────────────────────────────────
       Use Bootstrap's generated --bs-* vars for brand colours.
       These supplement them for repeated SMLS-specific patterns. */
    --smls-color-border:       rgba(var(--bs-body-color-rgb), .15);  /* dividers */
    --smls-color-overlay:      rgba(0, 0, 0, .4);                    /* modal backdrops */
    --smls-last-section-bg:    var(--bs-body-bg);                     /* overridden by PHP after the sections loop */

    /* ── UI font sizes ────────────────────────────────────────
       Sized for interface elements; does NOT override Bootstrap's
       compiled heading/body scale. */
    --smls-fs-hero:       3.75rem;    /* 60px @ desktop — see .hero-fp-title for mobile/1920px overrides */
    --smls-fs-menu:       1.75rem;    /* 28px — mobile menu band links */
    --smls-fs-label:      1.375rem;   /* 22px — section labels, footer mailing label */
    --smls-fs-ui:         1.125rem;   /* 18px — nav links, buttons, dropdowns */
    --smls-fs-mobile-nav: 1.25rem;    /* 20px — mobile search input */
    --smls-fs-sub:        1rem;       /* 16px — secondary text, mobile sub-menu */
    --smls-fs-sm:         0.9375rem;  /* 15px — compact buttons, small UI */
    --smls-fs-meta:       0.875rem;   /* 14px — footer nav, copyright */
    --smls-fs-caps:       0.8125rem;  /* 13px — .text-all-caps-small */
    --smls-h3-font-size:  1.625rem;  /* 26px — H3 heading override for Bootstrap's 1.5rem (24px); 31px at 1920px */

    /* ── Font weights ─────────────────────────────────────────*/
    --smls-fw-normal: 400;
    --smls-fw-medium: 500;

    /* ── Line heights ─────────────────────────────────────────*/
    --smls-lh-ui:    1.1;   /* buttons, compact elements */
    --smls-lh-body:  1.2;   /* default body cadence */
    --smls-lh-loose: 1.5;   /* long-form excerpt / prose */

    /* ── Layout ───────────────────────────────────────────────*/
    --smls-header-gap: 2.25rem;     /* 36px — gap between nav items and header columns (Figma 1440px spec) */
    --smls-header-height: 6.5rem;   /* 104px — sticky header bar height (2×34px padding + 2×8px + ~20px text) */

    /* ── Shared wedge mask (mobile nav bands + footer-top corner) ─*/
    --smls-wedge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 37'%3E%3Cpath d='M61.7588 36.0928C61.2053 34.5132 60.1022 33.1535 58.6084 32.291L5 1.33984C3.47981 0.46217 1.75536 0 0 0H61.7588V36.0928Z'%2F%3E%3C%2Fsvg%3E");

    /* ── Grid gutter (outer page margins) ────────────────────────*/
    --smls-gutter: 3.75rem;  /* 60px */

    /* ── Spacing scale (4px base × N) ────────────────────────────
       Use these vars for margins, padding, gap. Direct rem for one-offs. */
    --smls-sp-1:  0.25rem;   /* 4px  */
    --smls-sp-2:  0.5rem;    /* 8px  */
    --smls-sp-3:  0.75rem;   /* 12px */
    --smls-sp-4:  1rem;      /* 16px */
    --smls-sp-5:  1.25rem;   /* 20px */
    --smls-sp-6:  1.5rem;    /* 24px */
    --smls-sp-10: 2.5rem;    /* 40px */
    --smls-sp-15: 3.75rem;   /* 60px */
    --smls-sp-20: 4rem;      /* 64px */
    --smls-sp-30: 7.5rem;    /* 120px */

    /* ── Border radius ───────────────────────────────────────────*/
    --smls-radius: 0.625rem;  /* 10px — cards, photo containers */
    --smls-radius-sm: 0.3125rem; /* 5px — buttons, small UI */

    /* ── Overlay clip masks ───────────────────────────────────────
       SVG shapes exported from Figma; fill=white so luminance masking works. */
    --smls-overlay-clip:        url("data:image/svg+xml,%3Csvg width='630' height='409' viewBox='0 0 630 409' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1148_55)'%3E%3Cpath d='M-107.615 271.569C-107.615 275.142 -105.709 278.443 -102.615 280.23L118.384 407.824C119.904 408.702 121.628 409.164 123.384 409.164H620C625.523 409.164 630 404.687 630 399.164V79.4805C630 75.9079 628.094 72.6066 625 70.8203L504.656 1.33974C503.136 0.462058 501.412 0 499.656 0H-97.6152C-103.138 0 -107.615 4.47715 -107.615 10V271.569Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1148_55'%3E%3Crect width='630' height='409' rx='10' transform='matrix(-1 0 0 1 630 0)' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --smls-overlay-clip-mobile: url("data:image/svg+xml,%3Csvg width='265' height='251' viewBox='0 0 265 251' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1150_76)'%3E%3Cpath d='M-0.0996094 179.437C-0.0996094 183.01 1.80637 186.311 4.90036 188.098L111.529 249.66C113.049 250.538 114.774 251 116.529 251H361.9C367.423 251 371.9 246.523 371.9 241V97.2794C371.9 93.7067 369.994 90.4054 366.9 88.6191L215.727 1.33973C214.207 0.462059 212.482 0 210.727 0H9.90038C4.37754 0 -0.0996094 4.47715 -0.0996094 10V179.437Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1150_76'%3E%3Crect width='265' height='251' rx='10' transform='matrix(-1 0 0 1 265 0)' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");

    @media (max-width: 1200px) {
        --smls-header-gap: 1.5rem;  /* 24px — mobile header has less vertical space */
    }

    @media (max-width: 767px) {
        --smls-fs-ui: 0.9375rem;   /* 15px — nav links, buttons, dropdowns */
    }

}


/* ============================================================
   GLOBAL
   ============================================================ */
html {
    margin-top: 0 !important; /* WordPress adds 32px top margin for admin bar, but we use sticky header instead */  
}

body {
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--smls-radius);
}

p a:hover {
    text-decoration: none;
    opacity: 0.5;
}

ul,
ol {
    margin: 0 0 var(--smls-sp-6);
    padding-left: 1.5rem;
}

h6, 
.h6, 
h5, 
.h5, 
h4, 
.h4, 
h3, 
.h3, 
h2, 
.h2, 
h1, 
.h1 {
    margin-bottom: 36px;
}

p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
ol:last-child,
ul:last-child {
    margin-bottom: 0;
}

b, strong {
    font-weight: var(--smls-fw-medium);
}

.bg-cobalt-blue,
.bg-cobalt-blue * {
    color: var(--bs-off-white);
}

/* Explicit selectors for elements whose own type rules may win over the * above */
.bg-cobalt-blue h1,
.bg-cobalt-blue h2,
.bg-cobalt-blue h3,
.bg-cobalt-blue h4,
.bg-cobalt-blue h5,
.bg-cobalt-blue h6,
.bg-cobalt-blue p,
.bg-cobalt-blue li,
.bg-cobalt-blue td,
.bg-cobalt-blue th,
.bg-cobalt-blue label,
.bg-cobalt-blue a:not(.btn) {
    color: var(--bs-off-white);
}

/* Outer page margins — 60px desktop, 20px mobile (see --smls-gutter in :root) */
.container-fluid {
    padding-inline: var(--smls-gutter);
}
/* Bootstrap column gap stays at 40px (20px each side) */
.row {
    --bs-gutter-x: var(--smls-gutter);
}


/* ============================================================
   HEADER — NAV BAR
   ============================================================ */

header#header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}

header#header.header--footer-visible {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    header#header { transition: none; }
}

.home header#header {
    --header-bg: var(--bs-sky-blue);
    background: var(--bs-sky-blue);
}
.home div#mobile-menu-body .menu::after {
    background: var(--bs-sky-blue);
}

.header-bar {
    background: var(--header-bg, var(--bs-body-bg));
    transition: background-color .25s ease;
}

/* Three-column grid: logo | nav (centred) | actions */
.col.header-col {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.header-logo {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
}

.header-logo a,
.header-logo img {
    display: block;
}

/* Nav */
.header-menu {
    grid-column: 2;
    display: flex;
    align-items: stretch;
}

.header-menu ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
}

.header-menu ul.menu > li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    padding: 2.125rem 0;   /* 34 + 8 + ~20 + 8 + 34 = 104px — matches Figma nav bar height */
}

.header-menu ul.menu > li > a {
    position: relative;
    display: block;
    text-decoration: none;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    color: var(--bs-body-color);
    padding: var(--smls-sp-2) 0;
    white-space: nowrap;
    transition: opacity .32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only the hovered link dims; siblings stay fully visible (accessibility) */
.header-menu ul.menu > li > a:hover,
.header-menu ul.menu > li > a:focus-visible {
    opacity: 0.6;
}

/* Right-side actions */
.header-right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
}

.header-translate {
    display: flex;
    align-items: center;
    color: var(--bs-body-color);
}

/* Weglot switcher — reskinned to match the icon-only trigger + dropdown pattern
   used elsewhere in the header. Selectors are qualified to out-specificity the
   plugin's own front-css.css without resorting to !important. */
.header-translate .country-selector.weglot-dropdown {
    background: transparent;
}

.header-translate .country-selector.weglot-dropdown .wgcurrent {
    display: flex;
    align-items: center;
    height: auto;
    line-height: normal;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: opacity .2s ease;
}

.header-translate .country-selector.weglot-dropdown .wgcurrent:hover {
    color: var(--bs-body-color);
    opacity: .7;
}

.header-translate .country-selector.weglot-dropdown .wgcurrent:after {
    display: none;
}

.header-translate__icon {
    display: block;
}

/* Current language code stays in the DOM for screen readers but is visually
   replaced by the globe icon, matching the original icon-only design. */
.header-translate .country-selector .wgcurrent .wglanguage-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header-translate .country-selector.weglot-dropdown ul {
    display: block;
    top: calc(100% + var(--smls-sp-3));
    right: 0;
    left: auto;
    box-sizing: border-box;
    width: max-content;
    min-width: 0;
    margin: 0;
    /* 12px here + 12px row padding = Figma's 24px above the first and below the last language */
    padding: var(--smls-sp-3) 0;
    /* Solid soft-black/off-white surface — same "raised control" identity as the
       filled .btn / mobile hamburger, so it reads clearly over any page background
       without relying on a border or shadow (this design system uses neither for depth). */
    background: var(--bs-soft-black);
    border: none;
    border-radius: var(--smls-radius-sm);
    /* Same reveal curve/timing as .header-dropdown-area's push-down panel */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .35s cubic-bezier(0, 0, 0.2, 1), opacity .25s ease;
}

.header-translate .country-selector.weglot-dropdown input:checked ~ ul {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
}

.header-translate .country-selector.weglot-dropdown li {
    width: 100%;
}

/* Rows: Figma 3001:1137, 18px Medium, off-white, centred, 12px × 16px */
.header-translate .country-selector.weglot-dropdown a,
.header-translate .country-selector.weglot-dropdown .smls-translate-current span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    text-align: center;
    white-space: nowrap;
    padding: var(--smls-sp-3) var(--smls-sp-4);
    color: var(--bs-off-white);
    background: transparent;
    border: none;
    transition: opacity .32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Current language is listed for context only, not as a link */
.header-translate .country-selector.weglot-dropdown .smls-translate-current span {
    cursor: default;
}

/* Only the hovered language dims, same as the header nav links */
.header-translate .country-selector.weglot-dropdown a:hover,
.header-translate .country-selector.weglot-dropdown a:focus-visible {
    color: var(--bs-off-white);
    background: transparent;
    opacity: 0.5;
}

/* Search icon link */
.header-search-link {
    display: flex;
    align-items: center;
    color: var(--bs-body-color);
    transition: opacity .2s ease;
}

.header-search-link:hover {
    color: var(--bs-body-color);
    opacity: .7;
}

/* Hamburger (mobile only — hidden on desktop via media query) */
.header-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--smls-sp-1);
    color: var(--bs-body-color);
}

/* Base button — filled style (soft-black bg, off-white text → outline on hover) */
.btn {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-bg: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--bs-body-color);
    padding: 0.96875rem var(--smls-sp-4);
    max-height: 2.625rem;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    display: inline-flex;
    align-items: center;
    border-radius: var(--smls-radius-sm);
    line-height: 100% !important;
}

.btn:has(> svg) {
    gap: 0.5rem;
}

/* Outline button — transparent bg, filled on hover */
.btn.btn-outline,
.btn.btn-donate {
    --bs-btn-color:              var(--bs-body-color);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--bs-body-color);
    --bs-btn-hover-color:        var(--bs-body-bg);
    --bs-btn-hover-bg:           var(--bs-body-color);
    --bs-btn-hover-border-color: var(--bs-body-color);
    border-radius: 5px;
    padding: 0.96875rem var(--smls-sp-4);
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ── Dark sections (cobalt-blue, soft-black) ──────────────────────────────────
   Filled: cream bg, section-bg colour as text.
   Hover (outline): transparent bg, cream text/border so it reads on dark section.
   .bg-cobalt-blue needs explicit color: overrides because its * rule forces off-white. */

.bg-cobalt-blue .btn,
.bg-soft-black .btn {
    --bs-btn-bg:                 var(--bs-off-white);
    --bs-btn-border-color:       var(--bs-off-white);
    --bs-btn-hover-color:        var(--bs-off-white);
    --bs-btn-hover-bg:           transparent;
    --bs-btn-hover-border-color: var(--bs-off-white);
}
.bg-cobalt-blue .btn {
    --bs-btn-color: var(--bs-cobalt-blue);
    color: var(--bs-btn-color); /* fight the .bg-cobalt-blue * rule */
}
.bg-soft-black .btn {
    --bs-btn-color: var(--bs-soft-black);
}
.bg-cobalt-blue .btn:hover {
    color: var(--bs-btn-hover-color); /* fight the .bg-cobalt-blue * rule on hover */
}

/* Outline buttons on dark sections: cream at rest; on hover fill text = section bg */
.bg-cobalt-blue .btn.btn-outline,
.bg-cobalt-blue .btn.btn-donate {
    --bs-btn-color:              var(--bs-off-white);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--bs-off-white);
    --bs-btn-hover-color:        var(--bs-cobalt-blue);
    --bs-btn-hover-bg:           var(--bs-off-white);
    --bs-btn-hover-border-color: var(--bs-off-white);
    color: var(--bs-btn-color);
}
.bg-cobalt-blue .btn.btn-outline:hover,
.bg-cobalt-blue .btn.btn-donate:hover {
    color: var(--bs-btn-hover-color);
}

.bg-soft-black .btn.btn-outline,
.bg-soft-black .btn.btn-donate {
    --bs-btn-color:              var(--bs-off-white);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--bs-off-white);
    --bs-btn-hover-color:        var(--bs-soft-black);
    --bs-btn-hover-bg:           var(--bs-off-white);
    --bs-btn-hover-border-color: var(--bs-off-white);
}

/* ── Light sections (sky-blue, stone, sunshine-yellow, dusty-pink) ────────────
   Filled: dark bg (inherited), section-bg colour as text.
   Outline: .bg-[color] .btn sets --bs-btn-color broadly, so we reset it for outlines
   and set hover-color so the filled hover state also shows the section bg colour.  */

.bg-sky-blue .btn {
    --bs-btn-color: var(--bs-sky-blue);
}
.bg-sky-blue .btn.btn-outline,
.bg-sky-blue .btn.btn-donate {
    --bs-btn-color:       var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-sky-blue);
}

.bg-stone .btn {
    --bs-btn-color: var(--bs-stone);
}
.bg-stone .btn.btn-outline,
.bg-stone .btn.btn-donate {
    --bs-btn-color:       var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-stone);
}

.bg-sunshine-yellow .btn {
    --bs-btn-color: var(--bs-sunshine-yellow);
}
.bg-sunshine-yellow .btn.btn-outline,
.bg-sunshine-yellow .btn.btn-donate {
    --bs-btn-color:       var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-sunshine-yellow);
}

.bg-dusty-pink .btn {
    --bs-btn-color: var(--bs-dusty-pink);
}
.bg-dusty-pink .btn.btn-outline,
.bg-dusty-pink .btn.btn-donate {
    --bs-btn-color:       var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-dusty-pink);
}

.bg-burnt-orange .btn {
    --bs-btn-color: var(--bs-burnt-orange);
}
.bg-burnt-orange .btn.btn-outline,
.bg-burnt-orange .btn.btn-donate {
    --bs-btn-color:       var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-burnt-orange);
}

.bg-forest-green .btn {
    --bs-btn-color: var(--bs-forest-green);
}
.bg-forest-green .btn.btn-outline,
.bg-forest-green .btn.btn-donate {
    --bs-btn-color:       var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-forest-green);
}

/* bg-off-white — same as base so no override needed */

/* ── Tags (.btn-tag / .bbp-topic-tags a) — same section-bg matching as .btn ──
   Dark sections: cream outline + cream text; hover fills cream with section-bg text.
   Light sections: dark outline (inherited); hover fills dark with section-bg text.   */

.bg-cobalt-blue .btn-tag,
.bg-cobalt-blue .bbp-topic-tags a,
.bg-soft-black .btn-tag,
.bg-soft-black .bbp-topic-tags a {
    border-color: var(--bs-off-white);
    color: var(--bs-off-white);
}
.bg-cobalt-blue a.btn-tag:hover,
.bg-cobalt-blue .bbp-topic-tags a:hover {
    background-color: var(--bs-off-white);
    border-color:     var(--bs-off-white);
    color: var(--bs-cobalt-blue);
}
.bg-soft-black a.btn-tag:hover,
.bg-soft-black .bbp-topic-tags a:hover {
    background-color: var(--bs-off-white);
    border-color:     var(--bs-off-white);
    color: var(--bs-soft-black);
}
.bg-sky-blue a.btn-tag:hover,
.bg-sky-blue .bbp-topic-tags a:hover {
    color: var(--bs-sky-blue);
}
.bg-stone a.btn-tag:hover,
.bg-stone .bbp-topic-tags a:hover {
    color: var(--bs-stone);
}
.bg-sunshine-yellow a.btn-tag:hover,
.bg-sunshine-yellow .bbp-topic-tags a:hover {
    color: var(--bs-sunshine-yellow);
}
.bg-dusty-pink a.btn-tag:hover,
.bg-dusty-pink .bbp-topic-tags a:hover {
    color: var(--bs-dusty-pink);
}
.bg-burnt-orange a.btn-tag:hover,
.bg-burnt-orange .bbp-topic-tags a:hover {
    color: var(--bs-burnt-orange);
}
.bg-forest-green a.btn-tag:hover,
.bg-forest-green .bbp-topic-tags a:hover {
    color: var(--bs-forest-green);
}

/* Quick exit button — filled → outline on hover (inherits base .btn hover vars) */
a.btn.btn-quick-exit {
    --bs-btn-color:              var(--bs-body-bg);
    --bs-btn-bg:                 var(--bs-body-color);
    --bs-btn-border-color:       var(--bs-body-color);
    --bs-btn-hover-color:        var(--bs-body-color);
    --bs-btn-hover-bg:           transparent;
    --bs-btn-hover-border-color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    gap: var(--smls-sp-2);
    border-radius: 5px;
    padding: 0.9375rem var(--smls-sp-4);
    max-height: 2.625rem;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    white-space: nowrap;
}


/* ============================================================
   HEADER — PUSH-DOWN DROPDOWN
   ============================================================ */

/* Overlays page content; JS adds .is-open on hover */
.header-dropdown-area {
    position: absolute;
    top: var(--smls-header-height);
    left: 0;
    right: 0;
    background: var(--header-bg, var(--bs-body-bg));
    overflow: hidden;
    max-height: 0;
    transition: background-color .25s ease, max-height .35s cubic-bezier(0, 0, 0.2, 1);
}

.header-dropdown-area.is-open {
    max-height: 400px;
}

/* Individual panels — one per coloured parent nav item */
.header-dropdown-panel {
    display: none;
    padding: 0 0 2.625rem;
}

.header-dropdown-panel.is-active {
    display: block;
}

/* Link list inside each panel */
.header-dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0; /* left margin set by JS to align under parent nav item */
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.header-dropdown-list li {
    display: flex;
}

.header-dropdown-list li a:hover,
.header-dropdown-list li a:focus-visible {
    opacity: 0.6;
}

.header-dropdown-list li a {
    transition: opacity 0.2s ease;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-normal);
    line-height: var(--smls-lh-ui);
    color: var(--bs-body-color);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
    height: 11px;
}

.header-dropdown-list li a .smls-arrow-wrap {
    max-width: 0;
    margin-right: 0;
    transition: max-width 0.25s ease, margin-right 0.25s ease;
}

.header-dropdown-list li a:hover .smls-arrow-wrap {
    max-width: 12px;
    margin-right: var(--smls-sp-2);
}

.header-dropdown-list li a .smls-arrow-wrap svg {
    transform: translateX(-103%);
    transition: transform 0.25s ease;
}

.header-dropdown-list li a:hover .smls-arrow-wrap svg {
    transform: translateX(0);
}


/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */

div#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-32px);
}

div#mobile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    overflow-x: hidden;
}

.mobile-menu-wrap {
    position: absolute;
    inset: 0;
    padding-top: 5rem;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
}

/* Hamburger ↔ close icon crossfade — both icons stack in the same grid cell */
.header-hamburger .icon-hamburger,
.header-hamburger .icon-close {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.header-hamburger .icon-close {
    opacity: 0;
}
.header-hamburger[aria-expanded="true"] .icon-hamburger {
    animation: smls-icon-fadeout 0.15s ease forwards;
}
.header-hamburger[aria-expanded="true"] .icon-close {
    animation: smls-icon-fadein 0.2s ease forwards;
    pointer-events: auto;
}
@keyframes smls-icon-fadeout {
    to { opacity: 0; }
}
@keyframes smls-icon-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Mobile menu nav body — coloured bands ──────────────── */

#mobile-menu-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

div#mobile-menu-body .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

div#mobile-menu-body .menu {
    position: relative;
    z-index: 1;
}

/* Each top-level nav item is a 76px coloured band */
div#mobile-menu-body .menu > li {
    position: relative;
    min-height: 4.75rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Diagonal wedge — shows the next band's colour in the bottom-right triangle */
div#mobile-menu-body .menu > li::after,
div#mobile-menu-body .menu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    right: -1px;
    background: inherit;
    -webkit-mask-image: var(--smls-wedge-mask);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--smls-wedge-mask);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
    width: 3.75rem;
    aspect-ratio: 31.5 / 19;
}

div#mobile-menu-body .menu::after {
    top: 80px;
    background: var(--bs-body-bg);
    z-index: 10;
    position: fixed;
}

/* Band link — 76px tall, 28px Medium, vertically centred */
div#mobile-menu-body .menu > li > a {
    display: flex;
    align-items: center;
    gap: 1.9375rem;
    padding: 0 var(--smls-sp-5);
    min-height: 4.75rem;
    font-size: var(--smls-fs-menu);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-body);
    text-decoration: none;
    color: var(--bs-soft-black);
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-right: 10.75rem;
}

/* First band (cobalt blue) gets white text */
div#mobile-menu-body .menu > li:nth-child(1) > a {
    color: var(--bs-off-white);
}

/* + icon for expandable items */
div#mobile-menu-body .menu > li.menu-item-has-children > a::after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    right: 9rem;
    flex-shrink: 0;
    background: transparent url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19M5 12H19" stroke="%23282725" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center / contain;
}

div#mobile-menu-body .menu > li:nth-child(1).menu-item-has-children > a::after {
    background-image: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19M5 12H19" stroke="%23F9F6F2" stroke-width="2" stroke-linecap="round"/></svg>');
}

/* − icon when expanded */
div#mobile-menu-body .menu > li.menu-item-has-children.active > a::after {
    background-image: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19" stroke="%23282725" stroke-width="2" stroke-linecap="round"/></svg>');
}

div#mobile-menu-body .menu > li:nth-child(1).menu-item-has-children.active > a::after {
    background-image: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19" stroke="%23F9F6F2" stroke-width="2" stroke-linecap="round"/></svg>');
}

/* Sub-menu — animated by jQuery slideDown/slideUp */
div#mobile-menu-body .menu > li > ul.sub-menu {
    display: none;
    list-style: none;
    padding: var(--smls-sp-1) var(--smls-sp-5) 1.875rem;
    margin: 0;
    position: relative;
    z-index: 1;
}

div#mobile-menu-body .menu > li > ul.sub-menu > li {
    margin-bottom: 1.125rem;
}

div#mobile-menu-body .menu > li > ul.sub-menu > li:last-child {
    margin-bottom: 0;
}

div#mobile-menu-body .menu > li > ul.sub-menu > li > a {
    font-weight: var(--smls-fw-normal);
    line-height: var(--smls-lh-ui);
    color: var(--bs-soft-black);
    text-decoration: none;
    display: block;
}

/* Stagger fade-in — container handles the slide, items just fade */
div#mobile-menu div#mobile-menu-body .menu > li,
div#mobile-menu a.mobile-nav-search-band {
    opacity: 0;
    transition: opacity 0.28s ease;
}

/* Close stagger delays (first band out first) */
div#mobile-menu div#mobile-menu-body .menu > li:nth-child(1) { transition-delay: 0s; }
div#mobile-menu div#mobile-menu-body .menu > li:nth-child(2) { transition-delay: 0.04s; }
div#mobile-menu div#mobile-menu-body .menu > li:nth-child(3) { transition-delay: 0.08s; }
div#mobile-menu div#mobile-menu-body .menu > li:nth-child(4) { transition-delay: 0.12s; }
div#mobile-menu div#mobile-menu-body .menu > li:nth-child(5) { transition-delay: 0.16s; }
div#mobile-menu a.mobile-nav-search-band                      { transition-delay: 0.20s; }

/* Open state */
div#mobile-menu.active div#mobile-menu-body .menu > li,
div#mobile-menu.active a.mobile-nav-search-band {
    opacity: 1;
}

/* Open stagger delays — first item synced with header slide (0.1s) */
div#mobile-menu.active div#mobile-menu-body .menu > li:nth-child(1) { transition-delay: 0.10s; }
div#mobile-menu.active div#mobile-menu-body .menu > li:nth-child(2) { transition-delay: 0.16s; }
div#mobile-menu.active div#mobile-menu-body .menu > li:nth-child(3) { transition-delay: 0.22s; }
div#mobile-menu.active div#mobile-menu-body .menu > li:nth-child(4) { transition-delay: 0.28s; }
div#mobile-menu.active div#mobile-menu-body .menu > li:nth-child(5) { transition-delay: 0.34s; }
div#mobile-menu.active a.mobile-nav-search-band                      { transition-delay: 0.40s; }

/* Search band — last item, off-white background */
a.mobile-nav-search-band {
    display: flex;
    align-items: center;
    padding: 0 var(--smls-sp-5);
    min-height: 4.75rem;
    background: var(--bs-off-white);
    color: var(--bs-soft-black);
    text-decoration: none;
    flex-shrink: 0;
}

a.mobile-nav-search-band svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}


/* ============================================================
   SECTIONS — FLEXIBLE LAYOUT
   ============================================================ */

.smls-section {
    padding: var(--smls-sp-30) 0;
    --smls-section-bg: var(--bs-body-bg);
}

@media (max-width: 1105px) {
    .smls-section { padding: var(--smls-sp-15) 0; } /* 60px */
}

.smls-section.smls-section--no-padding-below {
    padding-bottom: 0;
}

.smls-section.smls-section--wedge-bottom {
    position: relative;
}

/* Lift the wedge pseudo-element into the root stacking context so it
   always paints above the following section's background — even when
   two consecutive sections both have a wedge. If z-index were on the
   section itself, sibling sections at the same z-index would paint in
   DOM order, causing the first wedge to be covered. */
.smls-section--wedge-bottom::after {
    z-index: 1;
}

.smls-section--columned_content .smls-section--top-border h2,
.smls-section--columned_content .smls-section--top-border h3,
.smls-section--columned_content .smls-section--top-border h4,
.smls-section--columned_content .smls-section--top-border h5,
.smls-section--columned_content .smls-section--top-border h6 {
    font-weight: 400;
}

.smls--wedge-border-bottom-left:after,
.smls--wedge-border-bottom-left:before,
.smls--wedge-border-top-right:after,
.smls--wedge-border-top-right:before,
.smls--wedge-bottom-left::after,
.smls--wedge-top-right::after,
.smls-section--wedge-bottom::after {
    content: '';
    position: absolute;
    top: calc(100% - 2px);
    right: -2px;
    width: 30%;
    aspect-ratio: 31.5 / 19;
    background: var(--smls-section-bg);
    -webkit-mask-image: var(--smls-wedge-mask);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--smls-wedge-mask);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
}

.smls-section--wedge-bottom::after {
    width: 10rem;
}

.smls--wedge-bottom-left::after {
    width: 10rem;
    transform: scale(-1);
    right: unset;
    top: unset;
    left: -1px;
    bottom: -1px
}

.smls--wedge-top-right::after {
    top: -2px;
    right: -2px;
    background: var(--smls-section-bg);
}

.smls--wedge-border-bottom-left::after,
.smls--wedge-border-bottom-left::before {
    width: 10rem;
    transform: scale(-1);
    right: unset;
    top: unset;
    left: -5px;
    bottom: -5px;
    background: var(--smls-section-bg);
}

@media (min-width: 767px) {
    .smls--wedge-border-bottom-left::after,
    .smls--wedge-border-bottom-left::before {
        width: 6rem;
    }
}

.smls--wedge-border-bottom-left::before {
    left: -2px;
    bottom: -2px;
    background: var(--bs-body-color);
}

.smls--wedge-border-top-right:after {
    width: 10rem;
    right: -6px;
    top: -6px;
    background: var(--smls-section-bg);
}
.smls--wedge-border-top-right:before{
    width: 10rem;
    right: -3px;
    top: -3px;
    background: var(--bs-body-color);
}

.bg-cobalt-blue .smls--wedge-border-bottom-left::before,
.bg-cobalt-blue .smls--wedge-border-top-right::before {
    background: var(--bs-off-white);
}

.smls-section.bg-cobalt-blue     { --smls-section-bg: var(--bs-cobalt-blue); }
.smls-section.bg-sky-blue        { --smls-section-bg: var(--bs-sky-blue); }
.smls-section.bg-off-white       { --smls-section-bg: var(--bs-off-white); }
.smls-section.bg-soft-black      { --smls-section-bg: var(--bs-soft-black); }
.smls-section.bg-stone           { --smls-section-bg: var(--bs-stone); }
.smls-section.bg-sunshine-yellow { --smls-section-bg: var(--bs-sunshine-yellow); }
.smls-section.bg-dusty-pink      { --smls-section-bg: var(--bs-dusty-pink); }

.smls-section--columned_content .smls-section--top-border::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--bs-heading-color);
    margin-bottom: var(--smls-sp-5);
}

.smls-section--columned_content .smls-col-divider {
    margin: var(--smls-sp-15) 0;
}

.smls-section--columned_content .smls-col-divider::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--bs-heading-color);
}

.smls-section--columned_content .smls-col-divider--hidden::before {
    content: none;
}

@media (max-width: 767.98px) {
    .smls-section--columned_content .smls-col-divider {
        margin: 50px 0;
    }
}

/* Sticky footer requires page content to sit above it in z-index */
.smls-sections,
.content-wrap {
    position: relative;
    z-index: 2;
    background: var(--bs-body-bg);
    overflow: hidden;
}


/* Section — Hero (front page) */
.smls-section.smls-section--hero_banner_front_page {
    padding: 0;
    height: calc(100svh - (var(--smls-header-height) + var(--smls-gutter)));
    display: flex;
    flex-direction: column;
}

/* Propagate height through Bootstrap grid so .hero-fp-wrap can grow */
.smls-section--hero_banner_front_page > .container-fluid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.smls-section--hero_banner_front_page .row {
    --bs-gutter-x: 0;
    flex: 1;
    min-height: 0;
}


.smls-section--hero_banner_front_page .row > .col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hero-fp-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.hero-fp-photo {
    flex: 1;
    min-height: 0;
    border-radius: var(--smls-radius);
    overflow: hidden;
    margin-bottom: 69px;
}

.hero-fp-photo::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10rem;
    aspect-ratio: 31.5 / 19;
    background: var(--smls-section-bg);
    -webkit-mask-image: var(--smls-wedge-mask);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--smls-wedge-mask);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
    transform: scaleX(-1);
    z-index: 1;
}

.hero-fp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.hero-fp-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 39.375rem;               /* 630px */
    max-width: 50%;
    aspect-ratio: 630 / 409;
    /* min-height: 25.5625rem;         409px — floor if content exceeds ratio */
    background: var(--bs-cobalt-blue);
    -webkit-mask: url(#smls-hero-overlay-mask);
    mask: url(#smls-hero-overlay-mask);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3.625rem 3.625rem 2.25rem 3.25rem;
    z-index: 1;
    gap: 1.375rem;                     /* 22px — Figma gap-[22px] between title and button */
}

.hero-fp-overlay .hero-fp-title {
    color: var(--bs-off-white);
    font-size: clamp(2.25rem, 2.292vw + 1.687rem, 3.75rem) !important; /* 36px@393 → 60px@1440 */
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    margin: 0;
    max-width: 31.9375rem;          /* 511px */
}

.hero-fp-btn {
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--bs-off-white);
    --bs-btn-hover-border-color: var(--bs-off-white);
    align-self: flex-end;
    background: var(--bs-off-white);
    color: var(--bs-cobalt-blue);
    border-color: var(--bs-off-white);
}


/* Section — Hero (inner pages) */
/* ── Intro Module (hero_banner flexible layout) — Figma "Get Help" 446:3458 ─ */
.smls-section.smls-section--hero_banner,
.smls-section.smls-section--post-intro {
    padding-top: 0;
}

.smls-intro-module {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    gap: 4rem;
    width: 100%;
    /* min-height: calc(100svh - (var(--smls-header-height) + (var(--smls-gutter) * 2))); */
}

.smls-intro-module svg {
    overflow: visible;
}

.smls-intro-module__gap {
    gap: 8px;
}

.smls-intro-module__header {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding-top: 7.5rem;
}

.smls-intro-module__breadcrumb,
.smls-intro-module__breadcrumb .rank-math-breadcrumb,
.smls-intro-module__breadcrumb .rank-math-breadcrumb p {
    font-weight: var(--smls-fw-normal);
    line-height: 100%;
    color: var(--bs-body-color);
    margin: 0;
}

.smls-intro-module__breadcrumb .rank-math-breadcrumb p {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    row-gap: 0;
    flex-wrap: wrap;
}

.smls-intro-module__breadcrumb .rank-math-breadcrumb a,
.smls-intro-module__breadcrumb .rank-math-breadcrumb .separator {
    opacity: 0.5;
    color: inherit;
    text-decoration: none;
}
.smls-intro-module__breadcrumb .rank-math-breadcrumb a:hover {
    opacity: 1;
}

/* Show at most two levels: hide the 3rd crumb onwards and its separator.
   Rank Math's BreadcrumbList schema still carries the full trail. */
.smls-intro-module__breadcrumb .rank-math-breadcrumb p > :nth-child(n+4) {
    display: none;
}

.smls-intro-module__breadcrumb .rank-math-breadcrumb .separator {
    font-size: 0;
    display: inline-flex;
    align-items: center;
    align-self: center;
    width: 0.75rem; /* 11px — Figma Arrow_Right_MD */
    height: 0.75rem;
    margin-bottom: -3px; /* align with text baseline */
}

.smls-intro-module__breadcrumb .rank-math-breadcrumb .separator::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 5 16 14' fill='none'%3E%3Cpath d='M5 12H19M13 6L19 12L13 18' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 5 16 14' fill='none'%3E%3Cpath d='M5 12H19M13 6L19 12L13 18' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

@media (max-width: 767.98px) {
    .smls-intro-module__breadcrumb .rank-math-breadcrumb .last {
        max-width: 12.5rem; /* 200px */
    }
}

.smls-intro-module__heading {
    font-size: 4.6875rem; /* 75px — Figma "Heading 1" */
    font-weight: var(--smls-fw-medium);
    max-width: 63.75rem; /* 1020px */
    margin: 0;
}

.smls-intro-module__body {
    display: flex;
    flex-direction: column;
    gap: var(--smls-header-gap); /* 36px */
}

.smls-intro-module__content {
    max-width: 63.75rem; /* 1020px */
    font-weight: var(--smls-fw-normal);
    line-height: var(--smls-lh-body);
    margin: 0;
}

.smls-intro-module__content p:last-child {
    margin: 0;
}

/* Single post: "News" eyebrow in place of the breadcrumb (Figma News 1857:10140) */
.smls-intro-module__eyebrow {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}

a.smls-intro-module__eyebrow:hover {
    color: inherit;
    opacity: .7;
}

/* Single post: article body (Figma News 1857:10140) */
.smls-post-article {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48px */
    max-width: 63.75rem; /* 1020px: Figma article width */
}

.smls-post-article__date {
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-body);
    margin: 0;
}

.smls-post-article__content {
    line-height: var(--smls-lh-body);
}

.smls-post-article__content p,
.smls-post-article__content ul,
.smls-post-article__content ol {
    margin: 0 0 1rem; /* 16px: Figma paragraph spacing */
}

.smls-post-article__content > :last-child {
    margin-bottom: 0;
}

/* Editors pick Heading 2 or 3 in Classic Editor; both render as Figma Heading 3 Medium */
.smls-post-article__content h2,
.smls-post-article__content h3,
.smls-post-article__content h4 {
    font-size: var(--smls-h3-font-size) !important; /* !important to match the h2/h3 breakpoint overrides in custom.scss */
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-body);
    margin: 0 0 1.25rem; /* 20px */
}

@media (max-width: 767px) {
    .smls-post-article__content h2,
    .smls-post-article__content h3,
    .smls-post-article__content h4 {
        font-size: 1.3125rem !important; /* 21px: Figma mobile Heading 3 */
    }
}

/* Inline images fill the article column with a 48px gap either side.
   Width is forced because Classic Editor writes fixed width/height attributes. */
.smls-post-article__content img,
.smls-post-article__content .wp-caption,
.smls-post-article__content figure {
    width: 100% !important;
    height: auto;
    margin: 3rem 0;
}

.smls-post-article__content img {
    border-radius: var(--smls-radius);
}

.smls-post-article__content .wp-caption img,
.smls-post-article__content figure img {
    margin: 0;
}

.smls-post-article__content .wp-caption-text,
.smls-post-article__content figcaption {
    font-size: var(--smls-fs-ui);
    margin-top: var(--smls-sp-3);
}

.smls-post-article__content a:not(.btn) {
    text-decoration: underline;
}

.smls-post-article__content blockquote {
    margin: 2rem 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* Section — Full width image + written content */
.smls-section.smls-section--full_width_image_written_content .image-wrap img {
    width: 100%;
    display: none;
    height: auto;
}

.smls-section.smls-section--full_width_image_written_content .image-wrap img + img {
    display: block;
}

.smls-section.smls-section--full_width_image_written_content .card-body > * {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.smls-section.smls-section--full_width_image_written_content .card-body > *:last-child {
    margin-bottom: 0;
}

/* Section — Content + vector image */
.content-vector-wrapper {
    display: flex;
    align-items: center;
}

.content-vector-wrapper img {
    width: 65%;
    max-width: 500px;
    max-height: 290px;
    margin: auto;
    height: auto;
}

.smls-section--content_vector_image p + a.btn {
    margin-top: 1.375rem;
}

/* Section — Custom leaders */
.smls-section--custom_leaders .image-link {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 63.37209302%;
}

.smls-section--custom_leaders .image-link img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smls-section--custom_leaders--item .image-link {
    margin-bottom: var(--smls-sp-6);
}

.smls-section--custom_leaders--item > div {
    margin-bottom: var(--smls-sp-6);
}

.smls-section--custom_leaders--item h5 a {
    display: block;
}

/* Section — Page leaders */
.smls-section--page_leaders .card,
.smls-section--page_leaders .card-body {
    height: 100%;
}

.smls-section--page_leaders .card-body {
    display: flex;
    flex-flow: column nowrap;
}

.smls-section--page_leaders .card-body > * {
    width: 100%;
}

.smls-section--page_leaders .card-body > *:last-child {
    margin-top: auto;
}

.smls-section--page_leaders .image-link {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 51.39318885%;
}

.smls-section--page_leaders .image-link img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}

.smls-section--page_leaders .col-lg-4 .image-link {
    padding-bottom: 71%;
}

/* Section — Coloured section with image */
.smls-section--coloured_section_with_image img {
    display: block;
    margin: 0 0 0 auto;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0 0 var(--smls-radius) var(--smls-radius);
    aspect-ratio: 1.2;
}

.smls-section--coloured_section_with_image .card-body {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Outline button hover inside this section: text matches the CARD's bg colour.
   Targets .card.bg-[color] so the card's class wins over the outer section's bg class
   when they differ. Specificity: section-class + card-class + btn-class = 0,4,0. */
.smls-section--coloured_section_with_image .card.bg-cobalt-blue .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-cobalt-blue .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-cobalt-blue);
}
.smls-section--coloured_section_with_image .card.bg-soft-black .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-soft-black .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-soft-black);
}
.smls-section--coloured_section_with_image .card.bg-sky-blue .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-sky-blue .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-sky-blue);
}
.smls-section--coloured_section_with_image .card.bg-off-white .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-off-white .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-off-white);
}
.smls-section--coloured_section_with_image .card.bg-stone .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-stone .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-stone);
}
.smls-section--coloured_section_with_image .card.bg-sunshine-yellow .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-sunshine-yellow .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-sunshine-yellow);
}
.smls-section--coloured_section_with_image .card.bg-dusty-pink .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-dusty-pink .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-dusty-pink);
}
.smls-section--coloured_section_with_image .card.bg-burnt-orange .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-burnt-orange .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-burnt-orange);
}
.smls-section--coloured_section_with_image .card.bg-forest-green .btn.btn-outline,
.smls-section--coloured_section_with_image .card.bg-forest-green .btn.btn-donate {
    --bs-btn-hover-color: var(--bs-forest-green);
}
/* cobalt-blue * rule forces off-white on all descendants; fight it explicitly on hover */
.smls-section--coloured_section_with_image .card.bg-cobalt-blue .btn.btn-outline:hover,
.smls-section--coloured_section_with_image .card.bg-cobalt-blue .btn.btn-donate:hover {
    color: var(--bs-btn-hover-color);
}

/* Section — Download cards */
.smls-section--download_cards .card {
    height: 100%;
}

.smls-section--download_cards .card-body {
    flex-flow: column nowrap;
    display: flex;
}

.smls-section--download_cards .card-body > * {
    width: 100%;
}

.smls-section--download_cards .card-body > p:last-child {
    margin-top: auto;
}

/* ── Linked Cards ──────────────────────────────────────────────────────────── */
.smls-linked-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--smls-sp-15);
}

.smls-linked-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--bs-body-color);
    border-bottom: 1px solid currentColor;
    transition: opacity .2s ease;
}

.smls-linked-card--url {
    padding-bottom: 1.25rem; /* 20px — Figma gap between title row and divider */
}

.smls-linked-card--file {
    gap: 0.75rem;           /* 12px — Figma gap between title row and meta tag */
    padding-bottom: 1.5rem; /* 24px — Figma gap between meta tag and divider */
}

.smls-linked-card--none {
    padding-bottom: 1.25rem;
    gap: 0.75rem;
    border: none;
}

.smls-linked-card--none .smls-linked-card__title {
    font-weight: 400;
    margin-bottom: 0;
}

.smls-linked-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--smls-sp-4);
    width: 100%;
}

.smls-linked-card__title {
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-body);
}

/* .smls-linked-card__description {
    font-size: var(--smls-fs-ui);
    line-height: var(--smls-lh-body);
} */

.smls-linked-card__description > * {
    margin-bottom: 0;
}


@keyframes smls-arrow-exit {
    from { transform: translateX(0); }
    to   { transform: translateX(103%); }
}

@keyframes smls-arrow-enter {
    from { transform: translateX(-103%); }
    to   { transform: translateX(0); }
}

@keyframes smls-arrow-exit-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-103%); }
}

@keyframes smls-arrow-enter-left {
    from { transform: translateX(103%); }
    to   { transform: translateX(0); }
}

.smls-arrow-wrap {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    flex-shrink: 0;
}

.smls-arrow-clone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-103%);
}

.smls-linked-card:hover .smls-linked-card__arrow {
    animation: smls-arrow-exit 0.3s ease forwards;
}

.smls-linked-card:hover .smls-arrow-clone {
    animation: smls-arrow-enter 0.3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .smls-linked-card:hover .smls-linked-card__arrow,
    .smls-linked-card:hover .smls-arrow-clone {
        animation: none;
    }
}

.smls-linked-card__meta {
    gap: 0.5rem;
}

.smls-linked-card:hover .smls-linked-card__meta {
    --bs-btn-bg: var(--bs-body-color);
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-body-color);
}

@media (max-width: 1105px) {
    .smls-linked-cards {
        column-gap: var(--smls-sp-5);
    }

    .smls-section.smls-section--hero_banner_front_page {
        height: calc(100svh - var(--smls-header-height) - 40px);
        padding-bottom: calc(var(--smls-gutter) * 2);
    }
}

@media (max-width: 767.98px) {
    .smls-linked-cards {
        grid-template-columns: 1fr;
        row-gap: var(--smls-sp-10);
    }

    .smls-linked-card__meta {
        --smls-fs-ui: var(--smls-fs-sm);
    }

    .smls-linked-card--none {
        padding-bottom: 0;
    }
}

/* Section — list item spacing */
.smls-section ul li,
.smls-section ol li {
    margin: 0 0 0.625rem;
}


/* ── News Cards ───────────────────────────────────────────────────────────── */

.smls-news-card {
    background: var(--bs-off-white);
    border-radius: var(--smls-radius);
    overflow: hidden;
    color: var(--bs-soft-black);
    padding: var(--smls-sp-10) var(--smls-sp-6); /* 40px top/bottom, 24px sides */
    gap: var(--smls-sp-10);
}


.smls-news-card__meta {
    font-size: var(--smls-fs-label);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    margin-bottom: var(--smls-sp-10);
}

.smls-news-card__title {
    margin-bottom: var(--smls-sp-6);
}

.smls-news-card__excerpt {
    margin-bottom: var(--smls-sp-6);
}

.smls-news-card__readmore {
    font-size: var(--smls-fs-label);
}

.smls-news-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--smls-sp-2);
    padding-top: var(--smls-sp-6);
    border-top: 1px solid var(--smls-color-border);
}

.smls-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.71875rem 0.875rem; /* 11.5px 14px — Figma tag spec */
    border-radius: 0.3125rem; /* 5px */
    border: 1px solid transparent;
    font-size: var(--smls-fs-ui); /* 18px */
    font-weight: var(--smls-fw-medium);
    color: var(--bs-soft-black);
    cursor: pointer;
    text-decoration: none;
    max-height: 2.125rem; /* 34px */
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    line-height: 100% !important;
}

.smls-tag:hover {
    background-color: transparent !important;
    border-color: var(--bs-body-color);
    color: var(--bs-body-color) !important;
}

.smls-tag.bg-cobalt-blue {
    color: var(--bs-off-white);
}

@media (max-width: 767.98px) {
    .btn,
    .smls-tag,
    .gform_wrapper .gform_button,
    .gform_wrapper .gform_button,
    .gform_wrapper input[type="submit"].gform_button {
        font-size: var(--smls-fs-sm); /* 15px */
        max-height: 2.5rem; /* 32px */
    }
    .smls-tag {
        max-height: 2rem; 
    }
}

/* ── News Card - New (Figma node 1068:12429) ──────────────────────────────── */
.smls-news-card-new {
    position: relative;
    background: var(--bs-off-white);
    border-radius: var(--smls-radius);
    overflow: hidden;
    color: var(--bs-body-color);
}



.smls-news-card-new__inner {
    position: relative;
    z-index: 1;
    padding: 3.25rem 1.875rem 1.875rem; /* 52px top, 30px sides/bottom — Figma content origin */
    justify-content: space-between;
}

@media (max-width: 767.98px) {
    .smls-news-card-new__inner { padding: 3.1875rem 1.25rem 1.25rem; /* 51px top, 20px sides/bottom — Figma mobile */ }
}

.smls-news-card-new__upper {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48px — Figma gap between date and body */
    flex: 1;
}

.smls-news-card-new__meta {
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    margin: 0;
}

.smls-news-card-new__body {
    display: flex;
    flex-direction: column;
    gap: var(--smls-sp-6); /* 24px — locks read more directly to text */
}

.smls-news-card-new__text {
    display: flex;
    flex-direction: column;
    gap: var(--smls-sp-6); /* 24px — Figma gap between title and excerpt */
}

.smls-news-card-new__title {
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-body);
    margin: 0;
}

.smls-news-card-new__title a,
.smls-program-card__title a,
.smls-policy-card__title a {
    color: inherit;
    text-decoration: none;
}

.smls-news-card-new__excerpt {
    font-weight: var(--smls-fw-normal);
    line-height: var(--smls-lh-body);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.smls-news-card-new__readmore {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    color: var(--bs-body-color);
    text-decoration: none;
}

.smls-news-card-new__readmore .smls-arrow-wrap {
    max-width: 0;
    margin-right: 0;
    transition: max-width 0.25s ease, margin-right 0.25s ease;
}

/* Whole card is the link (stretched title link); tags opt out of the hover */
.smls-news-card-new:hover:not(:has(.smls-tag:hover)) .smls-news-card-new__readmore .smls-arrow-wrap {
    max-width: 12px;
    margin-right: var(--smls-sp-2);
}

.smls-news-card-new__readmore .smls-arrow-wrap svg {
    transform: translateX(-103%);
    transition: transform 0.25s ease;
}

.smls-news-card-new:hover:not(:has(.smls-tag:hover)) .smls-news-card-new__readmore .smls-arrow-wrap svg {
    transform: translateX(0);
}

/* Visible focus for the whole card when its stretched link is focused */
.smls-news-card-new:has(.stretched-link:focus-visible),
.smls-program-card:has(.stretched-link:focus-visible),
.smls-policy-card:has(.stretched-link:focus-visible) {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 4px;
}

.smls-news-card-new .stretched-link:focus-visible,
.smls-program-card .stretched-link:focus-visible,
.smls-policy-card .stretched-link:focus-visible {
    outline: none;
}

.smls-news-card-new__tags {
    position: relative;
    z-index: 2; /* above the stretched link overlay */
    display: flex;
    flex-wrap: wrap;
    gap: var(--smls-sp-3); /* 12px — Figma tag gap */
    padding-top: var(--smls-sp-10); /* 40px separation from body */
}

.smls-view-all {
    font-size: var(--smls-fs-label);
    text-decoration: none;
    color: inherit;
}

.smls-view-all:hover {
    text-decoration: underline;
    color: inherit;
}



/* ── Quote Module ─────────────────────────────────────────────────────────── */
.smls-section--quote {
    padding: var(--smls-sp-10) 0;
}


blockquote {
    position: relative;
    padding: 100px 40px;
    border-radius: var(--smls-radius);
    border: 4px solid var(--bs-body-color);
    color: var(--bs-body-color);
}

.bg-cobalt-blue blockquote {
    color: var(--bs-off-white);
    border-color: var(--bs-off-white);
}

.smls-quote-inner {
    display: flex;
    gap: var(--smls-sp-15);
    align-items: flex-end;
    flex-direction: column;
    font-weight: 500;
}

.smls-quote-text {
    flex: 1 0 0;
    min-width: 0;
}

.smls-quote-text > * {
    margin-bottom: 0;
}

.smls-quote-author {
    flex: 1 0 0;
    min-width: 0;
    text-align: right;
}

@media (min-width: 768px) {
    .smls-section--quote {
        padding: var(--smls-sp-15) 0;
    }

    blockquote {
        padding: 90px 60px;
    }

    .smls-quote-inner {
        flex-direction: row;
    }
}


/* ============================================================
   FOOTER
   ============================================================ */

/* footer#footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
} */

/* — Footer top: cobalt blue, subscribe + socials — */
.footer-top {
    background: var(--bs-cobalt-blue);
    color: var(--bs-off-white);
    position: relative;
}

/* top: -1px overlaps the section above to hide the subpixel seam — don't clip it with overflow: hidden.
   right stays at 0: any negative offset pushes past the viewport and causes horizontal scroll. */
.footer-top::after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    width: 10rem;
    aspect-ratio: 31.5 / 19;
    background: var(--smls-last-section-bg);
    -webkit-mask-image: var(--smls-wedge-mask);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--smls-wedge-mask);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
}

.footer-top .container-fluid {
    padding-top: var(--smls-sp-20);
    padding-bottom: var(--smls-sp-20);
}

.footer-top-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--smls-sp-15);
    align-items: end;
}

.footer-mailing-label {
    /* font-size: var(--smls-fs-label); */
    line-height: var(--smls-lh-body);
    font-weight: var(--smls-fw-normal);
    color: var(--bs-off-white);
    margin: 0 0 var(--smls-sp-4);
}

.footer-subscribe-group {
    min-width: 0;
}

.footer-subscribe-group .gform_wrapper {
    max-width: 564px;
}

.footer-email-input {
    width: 444px;
    max-width: 100%;
    height: 2.625rem;
    padding: var(--smls-sp-2) var(--smls-sp-4);
    border: 1px solid var(--bs-off-white);
    border-radius: 5px;
    background: transparent;
    color: var(--bs-off-white);
    font-size: var(--smls-fs-ui);
    font-family: inherit;
    outline: none;
}

.footer-email-input::placeholder {
    color: var(--bs-off-white);
    font-weight: var(--smls-fw-medium);
}

.footer-subscribe-btn {
    height: 2.625rem;
    padding: var(--smls-sp-2) var(--smls-sp-5);
    background: var(--bs-off-white);
    color: var(--bs-cobalt-blue);
    border: 1px solid var(--bs-off-white);
    border-radius: 5px;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.footer-subscribe-btn:hover {
    background: transparent;
    color: var(--bs-off-white);
}

/* ==========================================================================
   Gravity Forms — page content forms
   AA compliance notes:
   - Labels are visually hidden (sr-only), not display:none — screen readers
     still announce them via the label[for] association GF provides.
   - Placeholder colour #727272 ≈ 4.6:1 contrast against --bs-body-bg (#F9F6F2).
     The Figma uses opacity:0.5 (~2.8:1) which fails AA; we deviate intentionally.
   - Focus ring: 2px solid body-color (≥14:1 contrast) satisfies WCAG 2.4.7.
   - Chosen.js: adds role="listbox/option" + keyboard nav (↑↓ Enter Esc).
   ========================================================================== */

.gform_wrapper {
    margin: 0;
}

.gform_wrapper .gform_body {
    width: 100%;
}

.gform_wrapper .gform_fields {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.gform_wrapper .gfield {
    margin: 0;
    padding: 0;
}

.gform_wrapper .ginput_container {
    margin: 0;
}

/* Tom Select adds .tomselected to the original <select> on init.
   We're not loading Tom Select's default CSS, so this rule fills the gap. */
.gform_wrapper select.gfield_select.tomselected {
    display: none;
}

/* Visually hidden — still readable by screen readers */
.gform_wrapper .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* All text inputs */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea {
    width: 100%;
    height: 2.625rem;
    padding: 0.5rem var(--smls-sp-4);
    border: 1px solid var(--bs-body-color);
    border-radius: 5px;
    background: transparent;
    color: var(--bs-body-color);
    font-family: inherit;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s ease;
    margin: 0;
}

/* Nudge textarea padding-top so placeholder sits vertically centred:
   (42px height − 19.8px line-height) / 2 ≈ 11px */
.gform_wrapper textarea {
    padding-top: 0.6875rem;
}

/* Placeholder — #727272 ≈ 4.6:1 against #F9F6F2 (AA compliant) */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    opacity: 0.5;
    opacity: 1;
}

/* Visible focus ring (WCAG 2.4.7) */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
    /* outline: 2px solid var(--bs-body-color); */
    outline-offset: 0;
    box-shadow: none;
}

/* Field description */
.gform_wrapper .gfield_description {
    font-size: var(--smls-fs-sm);
    color: var(--bs-body-color);
    margin-top: 0.375rem;
}

/* Validation — field level */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
    border-color: #c0392b;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    color: #c0392b;
    font-size: var(--smls-fs-sm);
    margin-top: 0.375rem;
}

/* Validation — form level summary */
.gform_wrapper .gform_validation_errors {
    border: 1px solid #c0392b;
    border-radius: 5px;
    padding: 0.75rem var(--smls-sp-4);
    color: #c0392b;
    font-size: var(--smls-fs-ui);
    margin-bottom: 1.125rem;
}

/* Submit button — mirrors global .btn (filled variant) */
.gform_wrapper .gform-button,
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"].gform_button {
    --bs-btn-color:              var(--bs-body-bg);
    --bs-btn-bg:                 var(--bs-body-color);
    --bs-btn-border-color:       var(--bs-body-color);
    --bs-btn-hover-color:        var(--bs-body-color);
    --bs-btn-hover-bg:           transparent;
    --bs-btn-hover-border-color: var(--bs-body-color);
    padding: 0 var(--smls-sp-4);
    height: 2.625rem;
    line-height: calc(2.625rem - 2px);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: 1px solid var(--bs-btn-border-color);
    border-radius: 5px;
    font-family: inherit;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    margin: 0;
}

.gform_wrapper .gform-button:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"].gform_button:hover {
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
    border-color: var(--bs-btn-hover-border-color);
}
.gform_wrapper .gform_button:focus-visible,
.gform_wrapper .gform_button:focus-visible,
.gform_wrapper input[type="submit"].gform_button:focus-visible {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 2px;
}

/* Confirmation message */
.gform_wrapper .gform_confirmation_wrapper {
    font-size: var(--smls-fs-ui);
    color: var(--bs-body-color);
}

/* Legacy gform_footer fallback */
.gform_wrapper .gform_footer {
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   Tom Select dropdown — page content forms
   We do NOT load Tom Select's default stylesheet, so this is the only CSS.
   Tom Select's JS manages display:none/block on the dropdown — we only style.
   ========================================================================== */

/* Wrapper — replaces the native <select> in the DOM */
.gform_wrapper .ts-wrapper {
    position: relative;
    font-family: inherit;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
}

/* Trigger — always-visible control bar */
.gform_wrapper .ts-control {
    display: flex;
    align-items: center;
    height: 2.625rem;
    padding: 0 var(--smls-sp-4);
    border: 1px solid var(--bs-body-color);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: border-radius .15s ease;
    user-select: none;
}

.gform_wrapper .ts-control input {
    order: 3;
}

/* Down-arrow SVG, flips up when open */
.gform_wrapper .ts-control::after {
    content: '';
    display: block;
    opacity: 0.5;
    flex-shrink: 0;
    order: 2;
    width: 12px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cpath d='M6.3584 0.75L6.3584 11.25M1.6084 6.75L6.3584 11.25L11.1084 6.75' stroke='%23282725' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .2s ease;
    pointer-events: none;
    margin-left: 12px;
}
.gform_wrapper .input-active .ts-control .item[data-value=""] {
    opacity: 1;
}
.input-active .ts-control::after {
    opacity: 1;
}

/* Arrow points up when dropdown is open */
.gform_wrapper .ts-wrapper.dropdown-active .ts-control::after {
    transform: rotate(180deg);
}

/* Open — merge trigger bottom edge with dropdown panel */
.gform_wrapper .ts-wrapper.dropdown-active .ts-control {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Focus ring (WCAG 2.4.7) */
.gform_wrapper .ts-control:focus-within {
    /* outline: 2px solid var(--bs-body-color); */
    outline-offset: 0;
}

/* Selected item text (shown when an option is chosen) */
.gform_wrapper .ts-control .item {
    flex: 1;
    flex-grow: 0;
    order: 1;
    min-width: max-content;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-body-color);
    line-height: var(--smls-lh-ui);
}

/* GF placeholder option selected — style as placeholder (muted) */
.gform_wrapper .ts-control .item[data-value=""] {
    opacity: 0.5;
}

/* Search input — provides placeholder text and keyboard search.
   Hidden (zero-width) when an item is already selected and dropdown is
   closed; expands to flex:1 otherwise so placeholder is visible. */
.gform_wrapper .ts-control input {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    opacity: 0;
    font-family: inherit;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    color: var(--bs-body-color);
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    padding: 0;
    margin: 0;
    caret-color: var(--bs-body-color);
    transition: opacity .15s ease;
}

/* Show input when dropdown is open (for keyboard search) */
.gform_wrapper .ts-wrapper.dropdown-active .ts-control input {
    flex: 1;
    width: auto;
    opacity: 1;
}

/* Placeholder — shown when no option is selected (AA: #727272 ≈ 4.6:1) */
.gform_wrapper .ts-control input::placeholder {
    opacity: 0.5;
    opacity: 1;
}

/* Dropdown panel — Tom Select sets top/left/width inline via JS */
.gform_wrapper .ts-dropdown {
    width: 100% !important;
    border: 1px solid var(--bs-body-color);
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: var(--bs-body-bg);
    box-shadow: none;
    margin: 0;
    padding: 0;
}

/* Scroll container inside the dropdown */
.gform_wrapper .ts-dropdown-content {
    padding: 0.375rem 0;
    max-height: 240px;
    overflow-y: auto;
}

/* Hide the GF placeholder from the open dropdown list */
.gform_wrapper .ts-dropdown .option[data-value=""] {
    display: none;
}

/* Each option */
.gform_wrapper .ts-dropdown .option {
    padding: 0.625rem var(--smls-sp-4);
    font-family: inherit;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    opacity: 0.5;
    cursor: pointer;
}

/* Keyboard focus / hover */
.gform_wrapper .ts-dropdown .option.active {
    background: var(--bs-body-color);
    color: var(--bs-body-bg);
}

/* Currently selected option */
.gform_wrapper .ts-dropdown .option.selected {
    color: var(--bs-body-color);
    background: transparent;
}

/* Selected option when also focused */
.gform_wrapper .ts-dropdown .option.selected.active {
    background: var(--bs-body-color);
    color: var(--bs-body-bg);
}

/* Disabled option */
.gform_wrapper .ts-dropdown .option.disabled {
    color: #b0aeac;
    cursor: default;
    pointer-events: none;
}

/* Error state */
.gform_wrapper .gfield_error .ts-control {
    border-color: #c0392b;
}

/* Mobile */
@media (max-width: 767.98px) {
    .gform_wrapper input[type="text"],
    .gform_wrapper input[type="email"],
    .gform_wrapper input[type="tel"],
    .gform_wrapper input[type="number"],
    .gform_wrapper input[type="url"],
    .gform_wrapper input[type="password"],
    .gform_wrapper textarea,
    .gform_wrapper .gform-button,
    .gform_wrapper input[type="submit"].gform-button {
        font-size: var(--smls-fs-sm);
    }

    .gform_wrapper .ts-wrapper,
    .gform_wrapper .ts-control input,
    .gform_wrapper .ts-control .item,
    .gform_wrapper .ts-dropdown .option {
        font-size: var(--smls-fs-sm);
    }
}

/* ==========================================================================
   ActionStep intake forms
   Third-party webform markup pasted into the page content on
   /intake-forms/representation-form/, /duty-lawyer-form/ and
   /discrete-assistance-form/. Styled to match the Gravity Forms base above.

   Scope: .AdvancedForm — the class ActionStep puts on every webform embed,
   so this holds whether or not the embed is wrapped in anything.

   Deliberate differences from the GF block, and why:
   - Selects stay native. GF selects are swapped for Tom Select, but ActionStep
     puts required="required" on its own selects; hiding a required select
     behind a Tom Select control makes the browser refuse to submit
     ("An invalid form control ... is not focusable"). The native select is
     styled to match the closed .ts-control instead.
   - wpautop wraps the pasted markup in <p>, so paragraph rhythm is reset here.
   - Labels are shown (unlike the GF block above, which hides them behind a
     placeholder). These forms run 55-75 fields long; a placeholder-only
     label disappears the moment someone starts typing, which doesn't hold
     up at this length. js/scripts.js only handles the resting-value muting
     on selects, it does not touch label visibility.
   ========================================================================== */

/* Form width — every form that appears within .smls-intro-module: any
   <form> embedded in the content area (ActionStep's .AdvancedForm, a
   Gravity Forms shortcode, or otherwise) plus the site search form
   (.smls-search-form, which sits directly in .smls-intro-module rather
   than its __content). Mobile/tablet fallback below is narrower than any
   phone/tablet viewport, so it's effectively "full width" there; the
   min-width:992px overrides further down switch it to 50% of the section. */
.smls-intro-module__content form,
.smls-search-form {
    --smls-form-width: 40rem; /* 640px */
    max-width: var(--smls-form-width);
}

.AdvancedForm {
    /* Down-arrow — same SVG as .ts-control::after, at the 0.5 / 1 opacities
       Tom Select toggles between resting and .input-active. */
    --smls-asf-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cpath d='M6.3584 0.75L6.3584 11.25M1.6084 6.75L6.3584 11.25L11.1084 6.75' stroke='%23282725' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --smls-asf-caret-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cpath d='M6.3584 0.75L6.3584 11.25M1.6084 6.75L6.3584 11.25L11.1084 6.75' stroke='%23282725' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Calendar glyph for date fields — GF has no date field to mirror. */
    --smls-asf-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Crect x='0.75' y='2.25' width='12.5' height='11' rx='1.5' stroke='%23282725' stroke-opacity='0.5' stroke-width='1.5'/%3E%3Cpath d='M0.75 5.75H13.25M4.25 0.75V3.25M9.75 0.75V3.25' stroke='%23282725' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

    /* The embed sits inside .smls-intro-module__content.h3 — reset the
       inherited heading scale back to the GF form cadence. */
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-normal);
    line-height: var(--smls-lh-body);
}

/* The pasted embed puts a <br> after each of its three <script src="...">
   locale/date-library tags, ahead of the <form> itself — visible blank
   lines above the form otherwise. Scoped to script+br specifically (rather
   than all <br> in .smls-intro-module__content) since that container is
   shared with ordinary page content elsewhere, where a <br> is legitimate. */
.smls-intro-module__content script + br {
    display: none;
}

/* wpautop wraps every control (and each hidden input) in a <p> */
.AdvancedForm p {
    margin: 0;
}

/* Field row — mirrors .gform_wrapper .gfield plus the 1.125rem
   .gform_fields gap, which we can't use here (no single flex container).
   position:relative is load-bearing: DatetimeControl.js inserts its
   absolutely-positioned calendar popup as a sibling inside this field, and
   without a positioned ancestor here it anchors to the page instead. */
.AdvancedForm .FormField {
    position: relative;
    margin: 0 0 1.125rem;
    padding: 0;
}

.AdvancedForm .FormField:last-child {
    margin-bottom: 0;
}

/* Label — sits above its control. 0.375rem below matches .hint's
   margin-top, so the label-to-input gap and input-to-hint gap read as
   the same rhythm. */
.AdvancedForm .js-label {
    display: block;
    font-size: var(--smls-fs-sm);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    color: var(--bs-body-color);
    margin-bottom: 0.375rem;
}

/* Required marker — ActionStep flags required fields via class="required"
   on the label. Plain body colour, not the #c0392b used below for
   validation errors — an asterisk here means "required", not "invalid". */
.AdvancedForm .js-label.required::after {
    content: " *";
}

/* All text inputs + selects — mirrors .gform_wrapper input[type="text"] */
.AdvancedForm input[type="text"],
.AdvancedForm input[type="email"],
.AdvancedForm input[type="tel"],
.AdvancedForm input[type="number"],
.AdvancedForm input[type="url"],
.AdvancedForm input[type="password"],
.AdvancedForm textarea,
.AdvancedForm select {
    width: 100%;
    height: 2.625rem;
    padding: 0.5rem var(--smls-sp-4);
    border: 1px solid var(--bs-body-color);
    border-radius: 5px;
    background: transparent;
    color: var(--bs-body-color);
    font-family: inherit;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s ease;
    margin: 0;
}

.AdvancedForm textarea {
    padding-top: 0.6875rem;
}

/* Focus — GF sets no outline of its own, leaving the UA ring visible */
.AdvancedForm input:focus,
.AdvancedForm textarea:focus,
.AdvancedForm select:focus {
    outline-offset: 0;
    box-shadow: none;
}

/* Select — matches the closed .ts-control used on GF forms */
.AdvancedForm select {
    /* 16px gutter + 12px arrow + 12px gap, per .ts-control::after */
    padding-right: calc(var(--smls-sp-4) + 12px + 12px);
    background-image: var(--smls-asf-caret);
    background-repeat: no-repeat;
    background-position: right var(--smls-sp-4) center;
    background-size: 12px 13px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.AdvancedForm select:focus {
    background-image: var(--smls-asf-caret-focus);
}

/* Multi-select — renders as a native listbox, not a closed one-row dropdown,
   so the single-row height and dropdown arrow above don't apply. Taller than
   a standard field so more than one row is visible without scrolling. */
.AdvancedForm select[multiple] {
    height: auto;
    min-height: 7.875rem; /* 3x the standard 2.625rem field height */
    padding: 0.5rem var(--smls-sp-4);
    background-image: none;
    appearance: auto;
    -webkit-appearance: auto;
    cursor: auto;
}

.AdvancedForm select[multiple]:focus {
    background-image: none;
}

/* Resting "(Please select)" option — muted like .ts-control .item[data-value=""].
   .has-value is toggled by scripts.js; opacity would fade the border too. */
.AdvancedForm .FormField:not(.has-value) select {
    color: rgba(40, 39, 37, 0.5); /* --bs-body-color at 50% */
}

/* Field hint — mirrors .gform_wrapper .gfield_description */
.AdvancedForm .hint {
    font-size: var(--smls-fs-sm);
    color: var(--bs-body-color);
    margin-top: 0.375rem;
}

/* Submit — mirrors .gform_wrapper .gform-button (filled variant) */
.AdvancedForm .FormField.Submit {
    margin-top: var(--smls-sp-2);
}

.AdvancedForm input[type="submit"] {
    --bs-btn-color:              var(--bs-body-bg);
    --bs-btn-bg:                 var(--bs-body-color);
    --bs-btn-border-color:       var(--bs-body-color);
    --bs-btn-hover-color:        var(--bs-body-color);
    --bs-btn-hover-bg:           transparent;
    --bs-btn-hover-border-color: var(--bs-body-color);
    padding: 0 var(--smls-sp-4);
    height: 2.625rem;
    line-height: calc(2.625rem - 2px);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: 1px solid var(--bs-btn-border-color);
    border-radius: 5px;
    font-family: inherit;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    margin: 0;
}

.AdvancedForm input[type="submit"]:hover {
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
    border-color: var(--bs-btn-hover-border-color);
}

.AdvancedForm input[type="submit"]:focus-visible {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 2px;
}

/* ==========================================================================
   ActionStep date fields
   On window.load DatetimeControl.js hides the real input and inserts, as its
   siblings, a .DateControl_CalDiv popup, a visible .DateControl_DateInputBox
   proxy and a 16px .DateControl_CalIcon PNG.

   The popup's own stylesheet — cdn.actionstep.com/assets/DatetimeControl.css,
   linked directly in the pasted embed — is what normally gives it
   position:absolute and its internal spacing. DatetimeControl.js opens it by
   setting `_calendarDiv.style.display = 'inline'` directly as an inline
   style; position:absolute is what makes the browser "blockify" that inline
   display into a proper block box. If that third-party stylesheet doesn't
   load — blocked by an ad blocker, a restrictive network, or just
   unavailable — position falls back to static, the inline `display:inline`
   applies literally, and the popup renders as an inline box wrapping
   block-level content (a <table>, buttons): it pushes the rest of the field
   down the page instead of floating over it, and its border fragments
   across the resulting forced line breaks. None of the rules below depend
   on that external stylesheet loading.
   ========================================================================== */

/* The proxy picks up the shared input rule above; add the calendar affordance.
   Clicking anywhere in the input opens the picker, so the PNG icon is dropped. */
.AdvancedForm input.DateControl_DateInputBox {
    padding-right: calc(var(--smls-sp-4) + 14px + 12px);
    background-image: var(--smls-asf-calendar);
    background-repeat: no-repeat;
    background-position: right var(--smls-sp-4) center;
    background-size: 14px 14px;
    cursor: pointer;
}

.AdvancedForm .DateControl_CalIcon {
    display: none;
}

/* position:relative context for the popup, scoped to just the <p> that
   wraps the date input (not the whole .FormField) so "top:100%" below
   lands directly under the input, not under the label above or the hint
   below it. .FormField also carries position:relative as a fallback for
   browsers without :has() support — coarser, but still usable. */
.AdvancedForm p:has(> .DateControl_CalDiv) {
    position: relative;
}

/* Hidden by default — not !important. DatetimeControl.js only sets an
   inline `display` (which always wins over this) the first time the popup
   is opened or closed; before that first interaction, this rule is the
   only thing hiding it. Without it, and without the external stylesheet's
   own default `display:none` reliably applying, a bare <div> defaults to
   visible, so the popup shows on page load instead of on click.

   position:absolute doesn't depend on the external stylesheet either —
   !important is safe since DatetimeControl.js never sets an inline
   `position`. top/margin-top are also forced: DatetimeControl.js sets an
   inline `margin-top` on open that flips the popup above the field when
   clicked in the lower half of the viewport, but since this sits in a
   scrollable document (not a fixed-position overlay), there's no viewport
   edge to avoid — always opening below is simpler and predictable. */
.AdvancedForm .DateControl_CalDiv {
    display: none;
    position: absolute !important;
    top: calc(100% + 0.375rem) !important;
    left: 0;
    margin-top: 0 !important;
    z-index: 20;
    max-width: min(20rem, 100%);
    border: 1px solid var(--bs-body-color);
    border-radius: 5px;
    background: var(--bs-body-bg);
    padding: var(--smls-sp-2);
}

/* Undo the field styling for the month/year controls inside the popup.
   ActionStep's #AS_Calendar rules still win on width/padding/font-size when
   its stylesheet is present (ID beats class); this is the floor for when
   it isn't. */
.AdvancedForm .DateControl_CalDiv input,
.AdvancedForm .DateControl_CalDiv select {
    width: auto;
    height: auto;
    border: 1px solid #b0aeac;
    border-radius: 3px;
    background-image: none;
    font-weight: var(--smls-fw-normal);
    -webkit-appearance: auto;
    appearance: auto;
}

/* Calendar table + prev/today/next buttons — same "floor, not ceiling"
   approach: plain class selectors only, so ActionStep's own ID-scoped
   rules (#AS_Calendar ...) still take priority whenever they do load. */
.AdvancedForm .DateControl_CalDiv table {
    border-collapse: collapse;
    font-size: var(--smls-fs-sm);
}

.AdvancedForm .DateControl_CalDiv td {
    padding: 0.25rem 0.375rem;
    text-align: center;
}

.AdvancedForm .DateControl_CalDiv .AS_Calendar_Header {
    font-weight: var(--smls-fw-medium);
}

.AdvancedForm .DateControl_CalDiv .AS_Calendar_Day {
    cursor: pointer;
    border-radius: 3px;
}

.AdvancedForm .DateControl_CalDiv .AS_Calendar_Day:hover,
.AdvancedForm .DateControl_CalDiv .AS_Calendar_SelectedDay {
    background: var(--bs-body-color);
    color: var(--bs-body-bg);
}

.AdvancedForm .DateControl_CalDiv .AS_Calendar_OffsetDay {
    color: rgba(40, 39, 37, 0.5); /* --bs-body-color at 50% */
}

.AdvancedForm .DateControl_CalDiv .AS_Calendar_Today {
    font-weight: var(--smls-fw-medium);
    text-decoration: underline;
}

/* Prev / TODAY / next — three plain <span> siblings with no wrapping row */
.AdvancedForm .DateControl_CalDiv span {
    display: inline-block;
    padding: 0.25rem var(--smls-sp-2);
    cursor: pointer;
}

.AdvancedForm .DateControl_CalDiv .DateControl_ClearButton {
    margin-top: var(--smls-sp-2);
    padding: 0.25rem var(--smls-sp-2);
    font-size: var(--smls-fs-caps);
    text-align: center;
    cursor: pointer;
    border-top: 1px solid rgba(40, 39, 37, 0.15);
}

/* Mobile */
@media (max-width: 767.98px) {
    .AdvancedForm input[type="text"],
    .AdvancedForm input[type="email"],
    .AdvancedForm input[type="tel"],
    .AdvancedForm input[type="number"],
    .AdvancedForm input[type="url"],
    .AdvancedForm input[type="password"],
    .AdvancedForm textarea,
    .AdvancedForm select,
    .AdvancedForm input[type="submit"] {
        font-size: var(--smls-fs-sm);
    }
}

/* Gravity Forms — footer mailing list
   GF 2.5+ embeds the submit button as a gfield--type-submit inside
   gform_fields, so gform_fields is the single layout container. */
.footer-top .gform_wrapper {
    margin: 0;
}

.footer-top .gform_wrapper .gfield--type-turnstile {
    margin-bottom: -12px;
    margin-right: -12px;
    width: 0;
    flex-grow: 0;
}

.footer-top .gform_body {
    width: 100%;
}

/* All fields (text, email, submit) on one line with 12px gap */
.footer-top .gform_fields {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: var(--smls-sp-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-top .gfield {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Submit field — shrink to button content, don't grow */
.footer-top .gfield--type-submit {
    flex: 0 0 auto;
}

.footer-top .gfield_label,
.footer-top .gfield_description,
.footer-top .gfield_validation_message,
.footer-top .gform_validation_errors {
    display: none;
}

.footer-top .ginput_container {
    margin: 0;
}

.footer-top .ginput_container input[type="email"],
.footer-top .ginput_container input[type="text"] {
    width: 100%;
    height: 2.625rem;
    padding: var(--smls-sp-2) var(--smls-sp-4);
    border: 1px solid var(--bs-off-white);
    border-radius: 5px;
    background: transparent;
    color: var(--bs-off-white);
    font-size: var(--smls-fs-ui);
    font-family: inherit;
    outline: none;
    margin: 0;
    box-shadow: none;
}

.footer-top .ginput_container input[type="email"]::placeholder,
.footer-top .ginput_container input[type="text"]::placeholder {
    color: var(--bs-off-white);
    font-weight: var(--smls-fw-medium);
    opacity: 1;
}

.footer-top .ginput_container input[type="email"]:focus,
.footer-top .ginput_container input[type="text"]:focus {
    /* border-color: rgba(var(--bs-off-white-rgb), 0.7); */
    box-shadow: none;
    outline: none;
}

/* Legacy gform_footer — hidden; submit is now embedded in gform_fields */
.footer-top .gform_footer {
    display: none;
}

/* Submit button container (GF 2.5+ embedded submit field) */
.footer-top .gform_editor_submit_container {
    display: flex;
    height: 100%;
}

.footer-top .gform-button,
.footer-top input[type="submit"].gform-button {
    height: 2.625rem;
    padding: var(--smls-sp-2) var(--smls-sp-5);
    background: var(--bs-off-white);
    color: var(--bs-cobalt-blue);
    border: 1px solid var(--bs-off-white);
    border-radius: 5px;
    font-size: var(--smls-fs-ui);
    line-height: var(--smls-lh-ui);
    font-weight: var(--smls-fw-medium);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease;
}

.footer-top .gform-button:hover,
.footer-top input[type="submit"].gform-button:hover {
    background: transparent;
    color: var(--bs-off-white);
}

.footer-top .gform_confirmation_wrapper {
    color: var(--bs-off-white);
    font-size: var(--smls-fs-ui);
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: var(--smls-sp-4);
    flex-shrink: 0;
}

.footer-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 7px;
    color: var(--bs-off-white);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
    flex-shrink: 0;
}

.footer-social-btn:hover {
    background: var(--bs-off-white);
    color: var(--bs-cobalt-blue);
}

/* — Footer main: sky blue, nav columns + acknowledgements — */
.footer-main {
    background: var(--bs-sky-blue);
    color: var(--bs-soft-black);
}

.footer-main .container-fluid {
    padding-top: 4.0625rem;  /* 65px — Figma: nav at top 64.5px */
    padding-bottom: var(--smls-sp-10);
}

.footer-main-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 574px nav / 1320px content */
    column-gap: var(--smls-sp-15);  /* 116px — Figma: ack starts at 750px, nav ends at 634px */
    align-items: start;
    margin-bottom: 16.87500rem; /* 270px — Figma: ack ends at 540px, nav ends at 810px */
}

.footer-nav {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--smls-sp-10);
    min-width: 0;
    padding-right: 3.125rem;
}

.footer-nav-col {
    max-width: 181px;
}

.footer-nav-heading {
    display: block;
    position: relative;
    overflow: hidden;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    color: var(--bs-soft-black);
    text-decoration: none;
    margin-bottom: var(--smls-sp-2);
    white-space: nowrap;
    width: fit-content;
    transition: opacity .32s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: var(--smls-sp-2);
}

.footer-nav-list li:last-child {
    margin-bottom: 0;
}

.footer-nav-list a {
    display: block;
    position: relative;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-normal);
    line-height: var(--smls-lh-ui);
    color: var(--bs-soft-black);
    text-decoration: none;
    width: fit-content;
    transition: opacity .32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only the hovered link dims; siblings stay fully visible (accessibility) */
.footer-nav-heading:hover,
.footer-nav-heading:focus-visible,
.footer-nav-list a:hover,
.footer-nav-list a:focus-visible {
    opacity: 0.6;
}

.footer-acknowledgements {
    flex: 1 1 50%   ;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.footer-ack-row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.footer-ack-flag-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex-shrink: 0;
}

.footer-ack-flag {
    display: block;
    width: 2.0625rem;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
}

.footer-rainbow-flag {
    width: 2.0625rem;
    height: 1.375rem;
    border-radius: 2px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #e50000 0 16.67%, #ff8d00 16.67% 33.33%, #ffee01 33.33% 50%, #018220 50% 66.67%, #004cfd 66.67% 83.33%, #760088 83.33% 100%);
}

.footer-ack-clc-wrap {
    width: 2.0625rem;
    height: 2.0625rem;
    flex-shrink: 0;
    border-radius: 2px;
    overflow: hidden;
}

.footer-ack-clc-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-ack-text {
    font-size: var(--smls-fs-ui);
    line-height: var(--smls-lh-ui);
    margin: 0;
    margin-top: -4px;
}

/* Copyright bar */
.footer-copyright-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    row-gap: var(--smls-sp-2);
    column-gap: var(--smls-sp-15);
    font-size: var(--smls-fs-ui);
    line-height: var(--smls-lh-ui);
}

.footer-copyright-item {
    color: var(--bs-body-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25em;
    opacity: 1;
    transition: opacity .32s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-copyright-item.footer-copyright-copy {
    grid-column: span 2;
}

.footer-copyright-item a {
    color: inherit;
    text-decoration: none;
    transition: opacity .32s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-copyright-item a:hover,
.footer-copyright-item a:focus-visible {
    opacity: 0.6;
}


/* ============================================================
   COMPONENTS
   ============================================================ */

/* Image hover zoom */
.image-link {
    position: relative;
    overflow: hidden;
    display: block;
}

.image-link img {
    transform: scale(1);
    transition: transform .35s ease;
}

.image-link:hover img {
    transform: scale(1.15);
}

/* Title underline utility */
.title-underline {
    border-bottom: 1px solid var(--bs-body-color);
    padding-bottom: .5em;
    margin-bottom: 2.5625rem;
    display: block;
}

/* Card utility */
.card-body > *:last-child {
    margin-bottom: 0;
}

.card {
    --bs-card-spacer-y: 1.875rem;
    --bs-card-spacer-x: 1.875rem;
    --bs-border-radius: var(--smls-radius);
}

.card-video {
    height: 100%;
}

.card-video iframe {
    width: 100% !important;
    height: 100%;
}

/* Typography utilities */
.text-all-caps-small {
    font-size: var(--smls-fs-caps);
    line-height: var(--smls-lh-body);
    text-transform: uppercase;
    font-weight: var(--smls-fw-normal);
}

.text-all-caps-small a {
    text-decoration: none;
}

.text-all-caps-small a:hover {
    text-decoration: underline;
}

/* Layout utilities */
.col.col-narrow {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.row.row-state-anchors {
    margin-top: -1.5rem;
}

/* Button overrides */
.btn-secondary:hover {
    background: transparent;
    color: var(--bs-secondary);
}

.btn-check + .btn-tag:hover {
    border-color: var(--bs-secondary);
}

.btn-check:checked + .btn-tag {
    background: var(--bs-secondary);
    color: var(--bs-white);
    border-color: var(--bs-secondary);
}

button.btn.btn-link {
    padding: 0;
}

button.btn.btn-link:hover {
    text-decoration: none;
}

/* Team members */
.smls-team-member {
    cursor: pointer;
    padding: 0 0 1.875rem;
}

.smls-team-member:hover h5 {
    text-decoration: underline;
}

.smls-team-member-pic {
    margin: 0 0 var(--smls-sp-5);
}

.smls-team-member-pic.image-link {
    width: 100%;
    height: 0;
    padding-bottom: 90.64748201%;
    position: relative;
}

.smls-team-member-pic.image-link img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smls-team-member-info.text-all-caps-small {
    display: flex;
    height: 1.9375rem;
    align-items: center;
    padding: 0 1.875rem 0 0;
    position: relative;
    margin: 0 0 0.625rem;
}

.smls-team-member-info.text-all-caps-small:after {
    content: '';
    position: absolute;
    width: 1.0625rem;
    height: 1.0625rem;
    right: 0.1875rem;
    top: 50%;
    margin-top: -0.4375rem;
    background: transparent url('data:image/svg+xml;utf-8,<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.391 7.524V9.504H9.735V16.896H7.656V9.504H0V7.524H7.656V0H9.735V7.524H17.391Z" fill="%23282725"/></svg>') no-repeat 50% / contain;
    transform: rotate(0deg);
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smls-team-member.active .smls-team-member-info.text-all-caps-small:after {
    background: transparent url('data:image/svg+xml;utf-8,<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.391 7.52393V9.50393H0V7.52393H17.391Z" fill="%23282725"/></svg>') no-repeat 50% / contain;
    transform: rotate(360deg);
}

.smls-team-member-bio {
    padding: 0 0 1.875rem;
    background: var(--bs-body-bg);
    display: none;
}

/* Recent work swiper */
.smls-section--recent_work_slider {
    overflow: hidden;
}

.card-work-head {
    display: flex;
    justify-content: space-between;
    margin: 0 0 var(--smls-sp-6) 0;
}

.recent-work-col .card {
    height: 100%;
}

.recent-work-col .card-body {
    display: flex;
    flex-flow: column nowrap;
}

.recent-work-col .card-body > * {
    width: 100%;
}

.recent-work-col .card-body .card-read-more {
    margin: auto 0 0;
}

.recent-work-swiper-wrapper .swiper {
    overflow: visible;
}

.recent-work-swiper-wrapper .swiper-slide {
    width: 85%;
    height: auto;
}

.recent-work-swiper-wrapper.swiper-no-peek .swiper {
    overflow: hidden;
}

.recent-work-swiper-wrapper.swiper-no-peek .swiper-slide {
    width: 100%; /* 1 column on mobile */
}

.recent-work-swiper-wrapper .swiper-button-next {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bs-heading-color);
    flex-shrink: 0;
    position: static;
    margin: 0;
}

.recent-work-swiper-wrapper .swiper-button-next:hover svg:not(.smls-arrow-clone) {
    animation: smls-arrow-exit 0.3s ease forwards;
}

.recent-work-swiper-wrapper .swiper-button-next:hover .smls-arrow-clone {
    animation: smls-arrow-enter 0.3s ease forwards;
}

.recent-work-swiper-wrapper .swiper-button-prev {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bs-heading-color);
    flex-shrink: 0;
    position: static;
    margin: 0;
}

.recent-work-swiper-wrapper .swiper-button-prev .smls-arrow-clone {
    transform: translateX(103%);
}

.recent-work-swiper-wrapper .swiper-button-next .smls-arrow-wrap,
.recent-work-swiper-wrapper .swiper-button-prev .smls-arrow-wrap {
    width: 1.5rem;
    height: 1.5rem;
}

.recent-work-swiper-wrapper .swiper-button-next svg,
.recent-work-swiper-wrapper .swiper-button-prev svg {
    width: 100%;
    height: 100%;
}

.recent-work-swiper-wrapper .swiper-button-prev:hover svg:not(.smls-arrow-clone) {
    animation: smls-arrow-exit-left 0.3s ease forwards;
}

.recent-work-swiper-wrapper .swiper-button-prev:hover .smls-arrow-clone {
    animation: smls-arrow-enter-left 0.3s ease forwards;
}

.swiper-button-disabled {
    visibility: hidden !important;
}

/* Section title */
.col-content-section-title {
    margin: 0 0 var(--smls-sp-15);
}

.col-content-section-title h2 {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .col-content-section-title {
        margin-bottom: var(--smls-sp-10);
    }
}

.smls-col-image {
    border-radius: var(--smls-radius);
    overflow: hidden;
    height: 100%;
    position: relative;
}

.smls-col-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

@media (max-width: 767.98px) {
    .smls-col-image {
        aspect-ratio: 1.412;
    }

    .smls-section--columned_content .smls-row--has-image .smls-col--has-image {
        order: -1;
    }
}

@media (min-width: 768px) {
    .smls-row--has-image > div:not(.smls-col--has-image) {
        padding-top: var(--smls-sp-15);
        padding-bottom: var(--smls-sp-15);
    }
}

@media (min-width: 1440px) {
    .smls-row--has-image {
        align-items: center;
    }
    .smls-row--has-image .smls-col-image {
        min-height: 50vh;
    }
}

@media (min-width: 1919px) {
    .smls-row--has-image > div:not(.smls-col--has-image) {
        padding-top: var(--smls-sp-30);
        padding-bottom: var(--smls-sp-30);
    }
}

/* Full-width single column: no sibling defines row height, so render image at natural dimensions */
.smls-section--columned_content .col.smls-col--has-image .smls-col-image {
    height: auto;
}

.smls-section--columned_content .col.smls-col--has-image .smls-col-image img {
    position: static;
    height: 100%;
    width: 100%;
    object-fit: cover;
    max-height: 80vh;
}

@media (max-width: 767.98px) {
    .smls-section--columned_content .col.smls-col--has-image .smls-col-image {
        aspect-ratio: auto;
    }

    .smls-section--columned_content .col.smls-col--has-image .smls-col-image img {
        height: 60vh;
    }
}

/* .smls-col--has-box {
    display: flex;
    flex-direction: column;
} */

.smls-col-box {
    border-radius: var(--smls-radius);
    padding: var(--smls-sp-6);
    margin-top: var(--smls-sp-6);
}

@media (min-width: 768px) {
    .smls-col--has-box .smls-col-box {
        margin-top: var(--smls-sp-15);
    }
}

.smls-col-box__content strong {
    font-weight: var(--smls-fw-medium);
}

.smls-col-box__content > *:last-child {
    margin-bottom: 0;
}

.smls-col-box__icon-list {
    list-style: none;
    padding: 0;
    margin: var(--smls-sp-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.smls-section--columned_content .smls-col-box__icon-item {
    display: flex;
    align-items: center;
    gap: var(--smls-sp-3);
    margin: 0;
}

.smls-col-box__icon img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    display: block;
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */

.smls-search-form {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--bs-body-color);
    gap: var(--smls-sp-3);
    padding-bottom: var(--smls-sp-1);
}

.smls-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--smls-fs-mobile-nav);
    color: var(--bs-body-color);
    min-width: 0;
}

.smls-search-input::placeholder {
    color: var(--bs-body-color);
    opacity: .5;
}

.smls-search-submit {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--bs-body-color);
    padding: 0;
    flex-shrink: 0;
}

.smls-search-submit:hover .smls-search-arrow {
    animation: smls-arrow-exit 0.3s ease forwards;
}

.smls-search-submit:hover .smls-arrow-clone {
    animation: smls-arrow-enter 0.3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .smls-search-submit:hover .smls-search-arrow,
    .smls-search-submit:hover .smls-arrow-clone {
        animation: none;
    }
}

/* Results list */
.smls-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
}

.smls-search-result {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--smls-color-border);
}

.smls-search-result:first-child {
    border-top: 1px solid var(--smls-color-border);
}

.smls-search-result__type {
    display: block;
    margin-bottom: 0.375rem;
    opacity: .7;
}

.smls-search-result__title {
    font-size: 1.375rem;   /* 22px — h4/h5 scale; h3 element deliberately sized at body text */
    margin-bottom: 0.625rem;
}

.smls-search-result__title a {
    text-decoration: none;
    color: var(--bs-body-color);
}

.smls-search-result__title a:hover {
    text-decoration: underline;
}

.smls-search-result__excerpt {
    margin: 0;
    opacity: .8;
    font-size: var(--smls-fs-sub);
    line-height: var(--smls-lh-loose);
}

/* ── Search page layout ───────────────────────────────────────────────────── */

/* Desktop gap: Figma 100px spacer + 20px pb intro section + 20px pt form section = 140px */
.smls-section--search-intro .smls-intro-module {
    gap: 8.75rem;
}

@media (max-width: 1105px) {
    /* Mobile gap: matches mobile intro module gap-[75px] */
    .smls-section--search-intro .smls-intro-module {
        gap: 4.6875rem;
    }
}

.smls-search-intro__header {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.smls-search-intro__eyebrow {
    font-size: var(--smls-fs-label); /* 22px */
    font-weight: var(--smls-fw-normal);
    line-height: var(--smls-lh-body);
    margin: 0;
}

.smls-section--search-intro .smls-search-form {
    border-bottom-width: 1px; /* Figma shows 1px rule */
    padding-bottom: var(--smls-sp-4); /* 16px */
}

.smls-section--search-intro .smls-search-input {
    font-size: var(--smls-fs-label); /* 22px — Figma body text size */
    font-weight: var(--smls-fw-medium);
}

.smls-section--search-intro .smls-search-input::placeholder {
    font-weight: var(--smls-fw-medium);
    opacity: 1;
}

/* Search results — linked-card overrides for the results grid */
.smls-section--search-results .smls-linked-card {
    gap: 1.5rem;         /* 24px — Figma gap-[24px] between title row and description */
    padding-bottom: 1.5rem; /* 24px — Figma gap before bottom rule */
}

.smls-section--search-results .smls-linked-card__title {
    font-size: var(--smls-h3-font-size); /* Figma Heading 3 Medium */
}

.smls-section--search-results .smls-linked-card__description {
    font-size: var(--smls-fs-label); /* 22px — Figma Body Regular */
    line-height: var(--smls-lh-body);
}

@media (max-width: 767.98px) {
    .smls-section--search-results .smls-linked-card__title {
        font-size: 1.3125rem; /* 21px */
    }
}

/* Pagination links — shared across search, category, archive pages */
.smls-pagination a:not(.smls-pagination__btn) {
    text-decoration: none;
    font-weight: var(--smls-fw-medium);
}

.smls-pagination a:not(.smls-pagination__btn):hover {
    text-decoration: underline;
}

/* Figma-style pagination (search page) */
.smls-pagination__links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.smls-pagination__links:has(.smls-pagination__prev):has(.smls-pagination__next) {
    justify-content: space-between;
}

.smls-pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: 1;
    text-decoration: none;
    color: var(--bs-body-color);
}

.smls-pagination__btn:hover {
    color: var(--bs-body-color);
    text-decoration: none;
}

.smls-pagination__prev .smls-arrow-wrap {
    transform: scaleX(-1);
}

.smls-pagination__btn:hover .smls-linked-card__arrow {
    animation: smls-arrow-exit 0.3s ease forwards;
}

.smls-pagination__btn:hover .smls-arrow-clone {
    animation: smls-arrow-enter 0.3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .smls-pagination__btn:hover .smls-linked-card__arrow,
    .smls-pagination__btn:hover .smls-arrow-clone {
        animation: none;
    }
}

.smls-pagination__rule {
    height: 1px;
    background-color: var(--bs-body-color);
    margin-top: 1.5rem;
}

.smls-section--search-results .smls-pagination {
    margin-top: var(--smls-sp-20);
}


/* ── Posts Grid (posts_grid flexible layout) ────────────────────────────── */

.smls-tag--active {
    border-color: var(--bs-body-color);
}

.smls-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.75rem; /* 60px — Figma desktop card grid gap */
}

@media (max-width: 1199.98px) {
    .smls-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .smls-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem; /* 24px — Figma mobile card grid gap */
    }
}

.smls-posts-grid__item {
    display: flex;
    flex-direction: column;
}

.smls-posts-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: var(--smls-sp-10);
}

.smls-posts-filter__group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.smls-posts-filter__label {
    font-size: var(--smls-fs-sm);
    font-weight: var(--smls-fw-medium);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.smls-posts-filter__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.smls-section--posts_grid .smls-pagination {
    margin-top: var(--smls-sp-20);
}

/* ── Posts Grid Filters (posts_grid_filters flexible layout) ─────────── */

.smls-pgf {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.smls-pgf__rule-header {
    display: flex;
    flex-direction: column;
}

.smls-pgf__heading {
    font-size: var(--smls-h3-font-size); /* Figma Heading 3 Medium */
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-body);
    margin: 0;
}

.smls-pgf__body {
    display: flex;
    flex-direction: column;
}

.smls-pgf__rule {
    height: 2.25rem; /* 36px — matches Figma rule row height */
    border-top: 1px solid var(--bs-body-color);
}

.smls-pgf__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.smls-pgf__taxes {
    display: flex;
    align-items: center;
    column-gap: 2.25rem; /* 36px — Figma gap between taxonomy buttons */
    row-gap: 0.5rem;
    flex-wrap: wrap;
}

.smls-pgf__tax-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem; /* 12px — Figma gap between label and icon */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--smls-fs-label); /* 22px */
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-body);
    color: var(--bs-body-color);
    transition: opacity 0.2s ease;
}

/* Dim non-active buttons when one is expanded */
.smls-pgf__taxes:has(.is-active) .smls-pgf__tax-btn:not(.is-active) {
    opacity: 0.5;
}

/* Hovering a tax button dims the rest */
.smls-pgf__taxes:has(.smls-pgf__tax-btn:hover) .smls-pgf__tax-btn:not(:hover) {
    opacity: 0.5;
}

/* Hovering clear filters dims all tax buttons */
.smls-pgf:has(.smls-pgf__clear:hover) .smls-pgf__tax-btn {
    opacity: 0.5;
}

/* +/− icon built from two CSS bars */
.smls-pgf__tax-icon {
    position: relative;
    display: inline-block;
    width: 0.625rem;  /* 10px */
    height: 0.625rem;
    flex-shrink: 0;
}

.smls-pgf__tax-icon::before,
.smls-pgf__tax-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
}

/* Horizontal bar — always present (the minus) */
.smls-pgf__tax-icon::before {
    width: 100%;
    height: 1.5px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Vertical bar — adds the plus; hidden when expanded */
.smls-pgf__tax-icon::after {
    width: 1.5px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    transition: opacity 0.15s ease;
}

.smls-pgf__tax-btn.is-active .smls-pgf__tax-icon::after {
    opacity: 0;
}

.smls-pgf__clear {
    font-size: var(--smls-fs-ui); /* 18px */
    font-weight: var(--smls-fw-medium);
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
}

.smls-pgf__clear:hover {
    text-decoration: none;
    color: var(--bs-body-color);
}

.smls-pgf__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* 12px — Figma pill gap */
}

/* In filter context: all pills show solid border */
.smls-pgf__pills .smls-tag {
    border-color: var(--bs-body-color);
}

/* Non-active pill hover: outline → fill toggle */
.smls-pgf__pills .smls-tag:not(.smls-tag--active):hover {
    background-color: var(--bs-body-color) !important;
    color: var(--bs-off-white) !important;
    border-color: var(--bs-body-color);
}

/* Active/selected pill: filled */
.smls-pgf__pills .smls-tag.smls-tag--active {
    background-color: var(--bs-body-color);
    color: var(--bs-off-white);
}

/* Active pill hover: fill → outline toggle */
.smls-pgf__pills .smls-tag.smls-tag--active:hover {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-body-color);
}

/* Rule: scaleX reveal from left */
[data-animate="rule-reveal"] {
    transform: scaleX(0);
    transform-origin: left center;
}

[data-animate="rule-reveal"].smls-anim-in {
    transform: scaleX(1);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    [data-animate="rule-reveal"] { transform: none; }
}

/* AJAX grid loading state */
#smls-posts-grid-wrap {
    transition: opacity 0.2s ease;
}

#smls-posts-grid-wrap.smls-loading {
    opacity: 0.4;
    pointer-events: none;
}

/* Mobile clear link right-aligns in rule-header column */
.smls-pgf__rule-header .smls-pgf__clear {
    align-self: flex-end;
}

@media (max-width: 767.98px) {
    .smls-pgf {
        gap: 0;
    }

    .smls-pgf__body {
        gap: 1.5rem; /* 24px — Figma mobile gap between rule-header and bar */
    }

    .smls-pgf__rule-header {
        gap: 0.75rem; /* 12px — Figma mobile gap between clear link and rule */
    }

    .smls-pgf__rule {
        height: 0; /* gap handles spacing; keep only the border-top line */
    }

    .smls-pgf__heading {
        font-size: 1.3125rem; /* 21px */
    }

    .smls-pgf__clear {
        font-size: var(--smls-fs-sm); /* 15px — Figma mobile small text */
    }

    .smls-pgf__tax-btn {
        font-size: 1.125rem; /* 18px — var(--smls-fs-ui) is overridden to 15px at this breakpoint */
    }

    .smls-pgf__panel {
        margin-top: 1.5rem; /* 12px — Figma mobile gap between bar and panel */
    }
}


/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login input[type="submit"] {
    border-radius: 0px !important;
}

.login #nav {
    text-align: center;
    justify-content: center;
}

.login #backtoblog a:hover,
.login #nav a:hover,
.login h1 a:hover {
    color: var(--bs-body-color);
    text-decoration: underline;
}

.login .language-switcher {
    display: none !important;
}


/* ============================================================
   RESPONSIVE — min-width (ascending)
   ============================================================ */

@media (min-width: 768px) {

    .recent-work-col {
        width: 50%;
    }

    .recent-work-swiper-wrapper .swiper-slide {
        width: calc(50% - 40px); /* 2 slides + 30px peek; gap=24px */
    }

    .recent-work-swiper-wrapper.swiper-no-peek .swiper-slide {
        width: calc((100% - 24px) / 2); /* 2 equal columns; gap=24px */
    }

    .smls-section--coloured_section_with_image .card-body {
        padding-left: 0;
        padding-right: 40px;
    }
    .smls-section--coloured_section_with_image img {
        border-radius: var(--smls-radius) 0 0 var(--smls-radius);
        aspect-ratio: unset;
    }

}

@media (min-width: 992px) {

    /* .smls-search-noresults is included here rather than folded into
       .smls-intro-module__content: the search template (search.php) has
       no __content wrapper at all — its "no results" message sits directly
       in .smls-intro-module — but it's the same kind of body copy every
       other __content paragraph gets this treatment for. */
    .smls-intro-module__heading,
    .smls-intro-module__content,
    .smls-search-noresults {
        max-width: 75%;
    }

    /* Every form in .smls-intro-module should end up at 50% of the section
       from here up — 40rem never actually binds on mobile (phones are
       already narrower), so the fixed cap above stays as the mobile/tablet
       fallback. The two selectors need different multipliers though,
       because they sit at different depths:
       - .smls-intro-module__content form: the __content parent is itself
         capped at 75% just above, so a plain 50% here would resolve
         against that already-narrowed parent (50% of 75% = 37.5% of the
         section). Dividing by .75 compensates back up to a true 50%.
       - .smls-search-form: sits directly in .smls-intro-module (full
         section width, uncapped), so a plain 50% already lands correctly
         — no compensation needed. */
    .smls-intro-module__content form {
        --smls-form-width: calc(50% / 0.75);
    }

    .smls-search-form {
        --smls-form-width: 50%;
    }

    .smls-section.smls-section--full_width_image_written_content .image-wrap img {
        display: block;
    }

    .smls-section.smls-section--full_width_image_written_content .image-wrap img + img {
        display: none;
    }

    .content-vector-wrapper {
        position: relative;
        height: 100%;
    }

    .content-vector-wrapper img {
        position: absolute;
        left: 0;
        width: 100%;
        height: 90%;
        object-fit: contain;
    }

    .recent-work-col {
        width: calc(33.33% - 1.25rem);
    }

    .smls-section--coloured_section_with_image .col-lg-6:first-child {
        padding-right: var(--smls-sp-10);
    }

    .smls-section--section_with_image .col-lg-6:first-child {
        padding-right: var(--smls-sp-10);
    }

}

/* Header — desktop: show nav, hide hamburger */
@media (min-width: 1106px) {

    .header-hamburger {
        display: none !important;
    }

    div#mobile-menu {
        display: none !important;
    }

    .header-menu ul.sub-menu {
        display: none !important;
    }

    /* Apply gap variable — default 24px, overridden to 36px at 1200px */
    .col.header-col,
    .header-menu,
    .header-right,
    .header-menu ul.menu {
        gap: var(--smls-header-gap);
    }

}


@media (min-width: 1200px) {

    .recent-work-col {
        max-width: 420px;
    }

    .recent-work-swiper-wrapper .swiper-slide {
        width: calc(33.333% - 60px); /* 3 slides + 30px peek; gap=60px */
    }

    .recent-work-swiper-wrapper.swiper-no-peek .swiper-slide {
        width: calc((100% - 120px) / 3); /* 3 equal columns; gap=60px */
    }

}

@media (min-width: 1620px) {


}

@media (min-width: 1920px) {

    :root {
        --smls-gutter: 7.5rem;
        --smls-h3-font-size: 1.9375rem; /* 31px: Figma Heading 3 at 1920px */
    }

    /* hero-fp-title range 2 lives in the @media (min-width: 1440px) block below */

    .smls-section--coloured_section_with_image .card-body {
        padding-top: var(--smls-sp-20);
        padding-bottom: var(--smls-sp-20);
    }

}


/* ============================================================
   RESPONSIVE — max-width (descending)
   ============================================================ */

/* Hero title range 2: scales from 60px@1440 → 72px@1920 */
@media (min-width: 1440px) {
    .hero-fp-overlay .hero-fp-title {
        font-size: clamp(3.75rem, 2.5vw + 1.5rem, 4.5rem) !important;
    }
}

/* Header — mobile: hide nav, show hamburger */
@media (max-width: 1105px) {

    /* Whole header scrolls; only .header-right remains fixed */
    header#header {
        position: static;
    }

    .header-menu,
    .header-translate,
    .header-search-link,
    .btn.btn-donate {
        display: none !important;
    }

    .header-hamburger {
        display: grid !important;
        place-items: center;
    }

    /* Hamburger — dark circle (Figma: 40×40px, bg Soft Black, border-radius 50%) */
    .header-hamburger:not(.header-hamburger--close) {
        background: var(--bs-body-color);
        color: var(--bs-body-bg);
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        padding: 0;
    }

    .col.header-col {
        display: flex;
        justify-content: space-between;
        padding-top: var(--smls-sp-5);
        padding-bottom: var(--smls-sp-5);
    }

    .header-logo,
    .header-right {
        grid-column: unset;
        justify-self: unset;
    }

    .header-logo img {
        max-width: 125px;
    }

    .header-right {
        position: fixed;
        top: var(--smls-sp-5);
        right: var(--smls-gutter);
        z-index: 10001; /* above mobile menu overlay (10000) so hamburger/close is always clickable */
        gap: var(--smls-sp-3);
    }

    /* Quick exit — Figma: 15px Medium, py-15.5px px-16px, no icon */
    .header-right a.btn.btn-quick-exit {
        font-size: var(--smls-fs-sm);
        padding: 0.96875rem var(--smls-sp-4);
        max-height: 2.5rem;
    }
    .header-right a.btn.btn-quick-exit svg {
        display: none;
    }

    .header-dropdown-area {
        display: none !important;
    }

    /* Menu open — full header bar becomes fixed, header-right returns to normal flow inside it */
    body.mobile-menu-open header#header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10001;
    }

    @keyframes smls-header-reveal {
        from { transform: translateY(-32px); }
        to   { transform: translateY(0); }
    }

    @keyframes smls-button-counter {
        from { transform: translateY(32px); }
        to   { transform: translateY(0); }
    }

    body.mobile-menu-open .header-right {
        position: static;
        top: auto;
        right: auto;
    }

    .smls-intro-module {
        min-height: calc(100svh - (var(--smls-header-height) + var(--smls-gutter)));
        /* justify-content: space-between; */
    }
    .smls-intro-module .smls-intro-module__header {
        padding-top: var(--smls-sp-15);
    }

}

@media (max-width: 991.98px) {

    .smls-intro-module {
        gap: var(--smls-sp-15); /* 60px on tablet/mobile */
    }

    .smls-intro-module__header {
        gap: var(--smls-sp-6); /* 24px */
    }

    .card {
        --bs-card-spacer-y: 1.875rem;
        --bs-card-spacer-x: 1.875rem;
    }


}

@media (max-width: 767.98px) {

    .smls--wedge-bottom-left::after,
    .smls-section--wedge-bottom::after,
    .footer-top::after {
        width: 4rem;
    }

    /* Hero — reset desktop flex chain, use fixed photo height */
    /* .smls-section.smls-section--hero_banner_front_page {
        height: auto;
        display: block;
        padding-bottom: 0;
    } */

    /* .smls-section--hero_banner_front_page > .container-fluid,
    .smls-section--hero_banner_front_page .row > .col {
        display: block;
        flex: none;
    } */

    .hero-fp-wrap {
        /* flex: none;
        display: block;
        padding-top: 0; */
        padding-bottom: 2.7rem;
    }

    .hero-fp-photo {
        /* flex: none;
        height: 32.8125rem; */
        margin-bottom: 0;
    }

    .hero-fp-btn {
        align-self: flex-end;
    }

    p, ul, ol {
        margin-bottom: 1.125rem;
    }

    .title-underline {
        margin-bottom: 1.6875rem;
    }

    .card-video {
        height: 0;
        padding-bottom: 56.25%;
        position: relative;
    }

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


    .footer-nav-heading,
    .footer-nav-list a {
        font-size: var(--smls-fs-sm);
    }
    
    .footer-ack-text {
        font-size: var(--smls-fs-sm);
    }

    .hero-fp-overlay {
        bottom: 0;
        width: 16.5625rem;         /* 265px */
        max-width: 100%;
        aspect-ratio: 265 / 251;
        min-height: 15.6875rem;    /* 251px — floor if content exceeds ratio */
        padding: 1.75rem var(--smls-sp-5) 0.875rem 1.375rem;
    }

    .hero-fp-overlay .hero-fp-title {
        font-size: 2.25rem !important; /* 36px flat — Figma 393px, no scaling on mobile */
        max-width: 13.8125rem;         /* 221px */
    }

}

/* Footer — mobile (≤1105px) */
@media (max-width: 1105px) {

    :root {
        --smls-gutter: 1.25rem;
    }

    .footer-top .container-fluid {
        padding-top: 2.3125rem;
        padding-bottom: 2.3125rem;
    }

    .footer-top-inner {
        grid-template-columns: 1fr;
        row-gap: var(--smls-sp-6);
        align-items: start;
    }

    .footer-subscribe-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--smls-sp-6);
    }

    .footer-mailing-label {
        margin-bottom: 0;
    }

    .footer-subscribe-form {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--smls-sp-3);
    }

    .footer-email-input {
        width: 100%;
        height: 2.5rem;
        font-size: var(--smls-fs-sm);
    }

    .footer-subscribe-btn {
        height: 2.5rem;
        font-size: var(--smls-fs-sm);
    }

    /* Gravity Forms — mobile */
    .footer-top .gform_fields {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-top .gfield {
        flex: none;
        width: 100%;
    }

    .footer-top .gfield--type-submit {
        width: auto;
        align-self: flex-start;
    }

    .footer-top .gform_editor_submit_container {
        height: auto;
    }

    .footer-top .ginput_container input[type="email"],
    .footer-top .ginput_container input[type="text"] {
        height: 2.5rem;
        font-size: var(--smls-fs-sm);
    }

    .footer-top .gform-button,
    .footer-top input[type="submit"].gform-button {
        height: 2.5rem;
        font-size: var(--smls-fs-sm);
    }

    .footer-socials {
        gap: var(--smls-sp-3);
    }

    .footer-social-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Footer main */
    .footer-main .container-fluid {
        padding-top: 2.0625rem;
        padding-bottom: var(--smls-sp-6);
    }

    .footer-main-inner {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: var(--smls-sp-10);
        margin-bottom: var(--smls-sp-10);
    }

    /* Nav: 2-column layout */
    .footer-nav {
        display: block;
        columns: 2;
        column-gap: var(--smls-sp-5);
        width: 100%;
        max-width: none;
        padding-right: 0;
    }

    .footer-nav-col {
        break-inside: avoid;
        margin-bottom: var(--smls-sp-6);
    }

    .footer-nav-list li {
        margin-bottom: var(--smls-sp-1);
    }

    /* Acknowledgements */
    .footer-ack-row {
        gap: var(--smls-sp-10);
    }

    .footer-ack-flag {
        width: 2.5rem;
    }

    .footer-rainbow-flag {
        width: 2.5rem;
        height: 1.6875rem;
    }

    .footer-ack-clc-wrap {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Copyright: two rows on mobile */
    .footer-copyright-inner {
        justify-content: space-between;
        column-gap: 0;
    }

    .footer-copyright-item.footer-copyright-copy {
        grid-column: span 3;
    }
    .footer-copyright-website {
        grid-column: span 4;
    }

}

@media (min-width: 1106px) {
    .footer-copyright-item.footer-copyright-website {
        justify-self: end;
        text-align: right;
    }
}

/* ============================================================
   Parent Page Nav
   ============================================================ */

.smls-parent-nav {
    display: flex;
    gap: 3.75rem;
}

/* Left column — stacked blocks */
.smls-parent-nav__blocks {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    min-width: 0;
}

/* Individual nav block */
.smls-parent-nav__block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: 1rem;
    padding: 0 1.875rem;
    padding-right: 2.375rem;
    height: 6.25rem;
    background-color: var(--smls-pnav-bg);
    color: var(--smls-pnav-color);
    text-decoration: none;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: border-color .2s ease, background-color .2s ease;
}

.smls-parent-nav__block.smls--wedge-top-right::after {
    width: 2.375rem;
    top: -3.5px;
    right: -3.5px;
}

/* Stroke that traces the wedge cut, same technique as .smls--wedge-border-top-right:
   ::before sits closer to the corner than ::after; since ::after paints on top and
   only reaches as far as its own (farther-out) offset, ::before peeks out along the
   inner edge as a rim in the border colour, reading as a continuation of the border. */
.smls-parent-nav__block.smls--wedge-top-right::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 2.375rem;
    aspect-ratio: 31.5 / 19;
    background: transparent;
    -webkit-mask-image: var(--smls-wedge-mask);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--smls-wedge-mask);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
    transition: background-color .2s ease;
}

.smls-parent-nav__block:hover {
    background-color: transparent;
    border-color: var(--smls-pnav-color);
}

.smls-parent-nav__block.smls--wedge-top-right:hover::before {
    background: var(--smls-pnav-color);
}

.smls-parent-nav__title {
    font-size: var(--smls-h3-font-size); /* Figma Heading 3 Medium */
    font-weight: var(--smls-fw-medium);
    line-height: 1.2;
}

.smls-parent-nav__block:hover .smls-parent-nav__arrow {
    animation: smls-arrow-exit 0.3s ease forwards;
}

.smls-parent-nav__block:hover .smls-arrow-clone {
    animation: smls-arrow-enter 0.3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .smls-parent-nav__block:hover .smls-parent-nav__arrow,
    .smls-parent-nav__block:hover .smls-arrow-clone { animation: none; }
}

/* Right column — image panel */
.smls-parent-nav__image-panel {
    flex: 1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    min-height: 12rem;
}

/* is-active toggles opacity on this wrapper, not the <img> itself — a
   plugin on this site (Cloudinary) rewrites <img> tags site-wide to add
   its own lazy-loading attributes, and in doing so blanks out any custom
   data attribute on the first/eagerly-loaded image specifically. Keeping
   our data-pnav-index (read by scripts.js to match block ↔ image) on this
   wrapping <div> instead keeps it out of Cloudinary's reach entirely. */
.smls-parent-nav__img-wrap {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}

.smls-parent-nav__img-wrap.is-active {
    opacity: 1;
}

.smls-parent-nav__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .smls-parent-nav__img-wrap {
        transition: none;
    }
}

/* Mobile — single column, image hidden */
@media (max-width: 767.98px) {
    .smls-parent-nav {
        flex-direction: column;
    }

    .smls-parent-nav__image-panel {
        display: none;
    }

    .smls-parent-nav__blocks {
        gap: 1.5rem;
    }

    .smls-parent-nav__block {
        padding: 1.5625rem;
        height: auto;
    }

    .smls-parent-nav__title {
        font-size: 1.3125rem; /* 21px */
    }
}

/* ============================================================
   Child Page Nav
   ============================================================ */

.smls-child-nav__blocks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.875rem;
}

.smls-child-nav__block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.875rem;
    height: 6.25rem;
    background-color: var(--smls-pnav-bg);
    color: var(--smls-pnav-color);
    text-decoration: none;
    border-radius: 10px;
    position: relative;
    border: 2px solid transparent;
    transition: border-color .2s ease, background-color .2s ease;
}

.smls-child-nav__block.smls--wedge-top-right::after {
    width: 2.375rem;
    top: -2.5px;
    right: -2.5px;
}

/* Stroke that traces the wedge cut, same technique as .smls--wedge-border-top-right:
   ::before sits closer to the corner than ::after; since ::after paints on top and
   only reaches as far as its own (farther-out) offset, ::before peeks out along the
   inner edge as a rim in the border colour, reading as a continuation of the border. */
.smls-child-nav__block.smls--wedge-top-right::before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 2.375rem;
    aspect-ratio: 31.5 / 19;
    background: transparent;
    -webkit-mask-image: var(--smls-wedge-mask);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--smls-wedge-mask);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
    transition: background-color .2s ease;
}

.smls-child-nav__block:hover {
    background-color: transparent;
    border-color: var(--smls-pnav-color);
}

.smls-child-nav__block.smls--wedge-top-right:hover::before {
    background: var(--smls-pnav-color);
}

.smls-child-nav__title {
    font-size: var(--smls-h3-font-size); /* Figma Heading 3 Medium */
    font-weight: var(--smls-fw-medium);
    line-height: 1.2;
}

.smls-child-nav__block:hover .smls-child-nav__arrow {
    animation: smls-arrow-exit 0.3s ease forwards;
}

.smls-child-nav__block:hover .smls-arrow-clone {
    animation: smls-arrow-enter 0.3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .smls-child-nav__block:hover .smls-child-nav__arrow,
    .smls-child-nav__block:hover .smls-arrow-clone { animation: none; }
}

/* Mobile — single column */
@media (max-width: 767.98px) {
    .smls-child-nav__blocks {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .smls-child-nav__block {
        padding: 1.5625rem;
        height: auto;
    }

    .smls-child-nav__title {
        font-size: 1.3125rem; /* 21px */
    }
}

/* ============================================================
   Stats Section
   ============================================================ */

.smls-stats__item {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.smls-stats__value {
    font-size: 4.6875rem;
    font-weight: var(--smls-fw-medium);
    line-height: 1.1;
    color: inherit;
}

.smls-stats__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.smls-stats__description {
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
}

.smls-stats__rule {
    border: none;
    border-top: 1px solid currentColor;
    opacity: 1;
    margin: 0;
}

@media (max-width: 767.98px) {
    .smls-stats {
        row-gap: var(--smls-sp-10);
    }

    .smls-stats__item {
        gap: 1.5rem;
    }

    .smls-stats__value {
        font-size: 2.8125rem;
    }
}

/* ============================================================
   COLUMNED ACCORDIONS
   ============================================================ */

.smls-col-accordions {
    --bs-gutter-y: 36px;
}

.smls-col-accordion__header {
    display: flex;
    flex-direction: column;
    gap: var(--smls-sp-6);
    width: 100%;
    padding: 2.25rem 0 0 0;
    background: none;
    border: none;
    border-top: 1px solid var(--bs-soft-black);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
}
.smls-col-accordion__header--static {
    cursor: default;
}

@media (max-width: 767.98px) {
    .smls-col-accordion__header {
        gap: var(--smls-sp-3);
        padding-top: var(--smls-sp-5); 
    }
}

.smls-col-accordion__eyebrow {
    font-weight: 400;
    line-height: 1.2;
}

.smls-col-accordion__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--smls-sp-4);
}

.smls-col-accordion__title {
    font-weight: var(--smls-fw-medium);
    line-height: 1.2;
    margin: 0;
}

.smls-col-accordion__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    width: 1.5rem; /* 24px — matches Figma icon size */
    height: 1.5rem;
}

.smls-col-accordion__icon-plus,
.smls-col-accordion__icon-minus {
    transition: opacity 0.25s ease;
}

.smls-col-accordion__icon-minus {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.smls-col-accordion.is-open .smls-col-accordion__icon-plus {
    opacity: 0;
}

.smls-col-accordion.is-open .smls-col-accordion__icon-minus {
    opacity: 1;
}

.smls-col-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.smls-col-accordion.is-open .smls-col-accordion__panel {
    grid-template-rows: 1fr;
}

.smls-col-accordion__panel-inner {
    overflow: hidden;
}

.smls-col-accordion__panel-content {
    padding-top: var(--smls-sp-6);
    padding-bottom: 2.25rem; /* 36px */
    line-height: 1.2;
}

.smls-col-accordion__panel-content > *:last-child {
    margin-bottom: 0;
}

.smls-col-accordion__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--smls-radius);
    margin-top: var(--smls-sp-6); /* 24px — matches Figma gap */
    object-fit: cover;
}


/* ── Coloured Tiles ─────────────────────────────────────────────────── */

.smls-coloured-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--smls-sp-15); /* 60px — heading to grid */
}

.smls-coloured-tiles__grid {
    --bs-gutter-x: min(var(--smls-gutter), var(--smls-sp-15)); /* caps at 60px even when --smls-gutter grows past it */
    --bs-gutter-y: var(--bs-gutter-x);
}

.smls-coloured-tiles__heading {
    font-size: 2.5rem; /* 40px */
    font-weight: var(--smls-fw-medium);
    line-height: 1.2;
    margin: 0;
}

.smls-coloured-tile {
    display: flex;
    flex-direction: column;
    border-radius: var(--smls-radius);
    /* overflow: hidden; */
    text-decoration: none;
    height: 100%;
    position: relative;
}

.smls-coloured-tile__image-wrap {
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    border-radius: var(--smls-radius) var(--smls-radius) 0 0;
}

.smls-coloured-tile__image-wrap.smls--wedge-top-right:after {
    width: 6rem;
}

.smls-coloured-tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0; /* wrap handles the clipping */
}

a.smls-coloured-tile .smls-coloured-tile__image {
    transition: transform 0.4s ease;
}

a.smls-coloured-tile:hover .smls-coloured-tile__image {
    transform: scale(1.05);
}

.smls-coloured-tile__content {
    padding: 1.875rem; /* 30px */
    display: flex;
    flex-direction: column;
    gap: 2.25rem; /* 36px */
    flex: 1;
    border-radius: var(--smls-radius);
}

/* Square the join so image and content read as one box */
.smls-coloured-tile:not(.smls-coloured-tile--no-image) .smls-coloured-tile__content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.smls-coloured-tile__heading {
    font-size: 1.875rem; /* 30px */
    font-weight: var(--smls-fw-medium);
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.smls-coloured-tile__text p {
    line-height: 1.2;
    color: inherit;
}

.smls-coloured-tile__text > *:last-child {
    margin-bottom: 0;
}

/* No-image variant */
.smls-coloured-tile--no-image {
    min-height: 28.75rem; /* 460px */
}

.smls-coloured-tile--no-image .smls-coloured-tile__content {
    padding-top: 5rem; /* 80px */
    justify-content: space-between;
}

@media (max-width: 767.98px) {
    .smls-coloured-tile--no-image {
        min-height: 0;
    }

    .smls-coloured-tile--no-image .smls-coloured-tile__content {
        padding-top: 3.125rem; /* 50px */
        gap: var(--smls-sp-20);
    }

    .smls-coloured-tiles {
        gap: var(--smls-sp-10); /* 40px — heading to grid */
    }
}

@media (max-width: 767.98px) {
    .smls-coloured-tiles__heading {
        font-size: 1.75rem; /* 28px */
    }

    .smls-coloured-tile__content {
        padding: 1.875rem 1.25rem; /* 30px top/bottom, 20px sides */
        gap: var(--smls-sp-6); /* 24px */
    }

    .smls-coloured-tile__heading {
        font-size: 1.3125rem; /* 21px */
    }

    .smls-coloured-tile__image-wrap.smls--wedge-top-right:after {
        width: 8rem;
    }
}

/* ── Program Card ───────────────────────────────────────────────────── */

.smls-program-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--smls-radius);
    height: 100%;
    position: relative;
}

.smls-program-card__image-wrap {
    aspect-ratio: 1.3289036544850499 / 1;
    overflow: hidden;
    flex-shrink: 0;
}

.smls-program-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: transform 0.4s ease;
}

.smls-program-card:hover .smls-program-card__image {
    transform: scale(1.05);
}

.smls-program-card__content {
    padding: 2.5rem; /* 40px */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--smls-sp-6); /* 24px */
    flex: 1;
    min-height: 20rem; /* 320px */
    border-bottom-left-radius: var(--smls-radius);
    border-bottom-right-radius: var(--smls-radius);
}

.smls-program-card__title {
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-body);
    margin: 0;
    color: inherit;
}

.smls-program-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--smls-sp-6); /* 24px */
}

.smls-program-card__excerpt {
    line-height: var(--smls-lh-body);
    margin: 0;
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.smls-program-card__readmore {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    color: inherit;
    text-decoration: none;
}

.smls-program-card__readmore .smls-arrow-wrap {
    max-width: 0;
    margin-right: 0;
    transition: max-width 0.25s ease, margin-right 0.25s ease;
}

.smls-program-card:hover .smls-program-card__readmore .smls-arrow-wrap {
    max-width: 12px;
    margin-right: var(--smls-sp-2);
}

.smls-program-card__readmore .smls-arrow-wrap svg {
    transform: translateX(-103%);
    transition: transform 0.25s ease;
}

.smls-program-card:hover .smls-program-card__readmore .smls-arrow-wrap svg {
    transform: translateX(0);
}

@media (max-width: 1105px) {
    .smls-program-card__image-wrap {
        aspect-ratio: 1.7428571428571429 / 1;
    }
}

@media (max-width: 767.98px) {
    .smls-program-card__content {
        padding: 1.875rem 1.25rem; /* 30px top/bottom, 20px sides */
        gap: var(--smls-sp-6); /* 24px */
        min-height: 0;
    }
}

/* ── Policy Card ────────────────────────────────────────────────────── */

.smls-policy-card {
    display: block;
    border-radius: var(--smls-radius);
    height: 100%;
    min-height: 28.75rem; /* 460px */
    text-decoration: none;
    position: relative;
}

.smls-policy-card__content {
    padding: 3.25rem 1.875rem 1.875rem; /* 52px top, 30px sides/bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: inherit;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .smls-policy-card__content { padding: 3.1875rem 1.25rem 1.25rem; /* 51px top, 20px sides/bottom — Figma mobile */ }
}

.smls-policy-card__top {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48px */
}

.smls-policy-card__meta {
    font-size: var(--smls-fs-ui); /* 18px */
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    margin: 0;
    color: inherit;
}

.smls-policy-card__title {
    margin: 0;
    color: inherit;
}

.smls-policy-card__readmore {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    line-height: var(--smls-lh-ui);
    color: inherit;
    text-decoration: none;
}

.smls-policy-card__readmore .smls-arrow-wrap {
    max-width: 0;
    margin-right: 0;
    transition: max-width 0.25s ease, margin-right 0.25s ease;
}

/* Whole card is the link (stretched title link); tags opt out of the hover */
.smls-policy-card:hover:not(:has(.smls-tag:hover)) .smls-policy-card__readmore .smls-arrow-wrap {
    max-width: 12px;
    margin-right: var(--smls-sp-2);
}

.smls-policy-card__readmore .smls-arrow-wrap svg {
    transform: translateX(-103%);
    transition: transform 0.25s ease;
}

.smls-policy-card:hover:not(:has(.smls-tag:hover)) .smls-policy-card__readmore .smls-arrow-wrap svg {
    transform: translateX(0);
}

.smls-policy-card__tags {
    position: relative;
    z-index: 2; /* above the stretched link overlay */
    display: flex;
    flex-wrap: wrap;
    gap: var(--smls-sp-3); /* 12px */
    padding-top: var(--smls-sp-6);
}

/* Single post/policy — term pills in the intro. Coloured pills (bg-*) keep the card style;
   uncoloured pills are outline → fill on hover (matches filter pills) */
.smls-single-tags__heading {
    font-size: var(--smls-fs-ui);
    font-weight: var(--smls-fw-medium);
    margin: 0 0 var(--smls-sp-3);
}

.smls-single-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--smls-sp-3); /* 12px */
}

.smls-single-tags .smls-tag:not([class*="bg-"]) {
    border-color: var(--bs-body-color);
}

.smls-single-tags .smls-tag:not([class*="bg-"]):hover {
    background-color: var(--bs-body-color) !important;
    color: var(--bs-off-white) !important;
}

.smls-policy-card .smls-tag {
    border-color: currentColor;
    color: inherit;
    background: transparent;
    transition: background-color .25s ease, color .25s ease;
}

.smls-policy-card .smls-tag:hover {
    background-color: var(--smls-tag-fill) !important;
    border-color: var(--smls-tag-fill);
    color: var(--smls-tag-text-hover) !important;
}


/* ============================================================
   FIXED UTILITY BUTTONS — accessibility + call
   ============================================================ */

.smls-fixed-buttons {
    position: fixed;
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px — matches Figma mobile gap */
    /* Desktop default: bottom-left */
    bottom: 2.5rem; /* 40px */
    left: 2.5rem;   /* 40px */
    right: auto;
    flex-direction: row;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.smls-fixed-buttons--hidden {
    opacity: 0;
    pointer-events: none;
}

.smls-fixed-btn {
    width: 2.5rem;  /* 40px */
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-soft-black);
    color: var(--bs-off-white);
    border: 1px solid var(--bs-soft-black);
    text-decoration: none;
    flex-shrink: 0;
    overflow: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.smls-fixed-btn:hover {
    background: var(--bs-off-white);
    color: var(--bs-soft-black);
}

.smls-fixed-btn--accessibility {
    border-radius: var(--smls-radius-sm); /* 5px on desktop */
}

/* Shown until the UserWay widget script (loaded in header.php) reports
   load/error — see the "UserWay accessibility widget" block in scripts.js */
.smls-fixed-btn--accessibility.is-loading svg {
    animation: smls-a11y-pulse 1.2s ease-in-out infinite;
}

@keyframes smls-a11y-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .smls-fixed-btn--accessibility.is-loading svg {
        animation: none;
    }
}

.smls-fixed-btn--call {
    display: none; /* call button is mobile-only */
    border-radius: 6px;
}

/* Mobile: flip to bottom-right, show call button, pill accessibility */
@media (max-width: 1105px) {
    .smls-fixed-buttons {
        bottom: 1.25rem; /* 20px */
        right: 1.25rem;
        left: auto;
    }

    .smls-fixed-btn--call {
        display: flex;
    }

    .smls-fixed-btn--accessibility {
        border-radius: 2.5rem; /* ~40px — pill/circle as per Figma 46.25px */
    }
}


/* ── Single Policy ───────────────────────────────────────────────────────── */

/* Remove the full-viewport min-height — policy intro fills its content, not the screen */
.smls-intro-module--compact {
    min-height: 0;
}

/* More breathing room at the bottom of the intro before the wedge transition */
.smls-section--policy-intro {
    padding-top: 0;
}

/* Related policies section header: heading (left) + arrow link (right) */
.smls-policy-related__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--smls-sp-15); /* 60px */
}

.smls-policy-related__heading {
    margin: 0;
}

.smls-policy-related__viewall {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.smls-policy-related__viewall:hover .smls-arrow-wrap svg:not(.smls-arrow-clone) {
    animation: smls-arrow-exit 0.3s ease forwards;
}

.smls-policy-related__viewall:hover .smls-arrow-clone {
    animation: smls-arrow-enter 0.3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .smls-policy-related__viewall:hover .smls-arrow-wrap svg:not(.smls-arrow-clone),
    .smls-policy-related__viewall:hover .smls-arrow-clone {
        animation: none;
    }
}

/* ============================================================
   Raisely donate embed — container only.
   The widget itself renders inside a cross-origin <iframe>
   (see raisely's embed.js), so only the wrapping box and the
   iframe's own border/radius can be styled from here — none of
   this reaches the form controls rendered inside the iframe.
   ============================================================ */
.raisely-donate {
    width: 100%;
    max-width: 100%;
}

.raisely-donate iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: var(--bs-border-radius, 0.3125rem);
}