/*
Theme Name: Inclusive ARK
Theme URI: https://inclusiveark.org
Author: Inclusive ARK
Author URI: https://inclusiveark.org
Description: WordPress theme for Inclusive ARK — a foundation working with communities and partners to advance equality, expand opportunity, and address the inequalities that hold people back. Ported from the original Next.js 16 site. Features a navy + gold design system, sticky navigation with mega-dropdowns, full-bleed hero bands, and templates for six What We Do solution areas, Evidence & Insights, Stories & Learning, Partnerships, Approach, and Contact.
Version: 1.2.3
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inclusiveark
Tags: foundation, non-profit, ngo, education, research, two-columns, three-columns, full-width-template, custom-colors, custom-menu, custom-logo, featured-images, sticky-post, translation-ready
*/

/* ==========================================================================
   1. Design Tokens (CSS Custom Properties)
   ========================================================================== */
:root {
    /* Brand palette */
    --color-navy: #0B1F3B;
    --color-navy-hover: #0A1A30;
    --color-gold: #E5A823;
    --color-gold-hover: #D49A1F;

    /* Neutrals */
    --color-text: #0B1F3B;
    --color-text-muted: #696969;
    --color-text-dark: #3F3F50;
    --color-cream: #F5F2F0;
    --color-cream-light: #F8F6F4;
    --color-cream-hover: #E8E4E1;
    --color-white: #FFFFFF;

    /* Semantic aliases (shadcn-style) */
    --background: #FFFFFF;
    --foreground: #0B1F3B;
    --card: #FFFFFF;
    --card-foreground: #0B1F3B;
    --popover: #FFFFFF;
    --popover-foreground: #0B1F3B;
    --primary: #0B1F3B;
    --primary-foreground: #FFFFFF;
    --secondary: #F5F2F0;
    --secondary-foreground: #0B1F3B;
    --muted: #F5F2F0;
    --muted-foreground: #696969;
    --accent: #E5A823;
    --accent-foreground: #0B1F3B;
    --border: rgba(11, 31, 59, 0.10);
    --input: rgba(11, 31, 59, 0.15);
    --ring: #0B1F3B;

    /* Radii */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;

    /* Container */
    --container-max: 1320px;
    --container-px: 24px;
    --container-px-lg: 40px;

    /* Typography */
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(11, 31, 59, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(11, 31, 59, 0.08), 0 2px 4px -2px rgba(11, 31, 59, 0.06);
    --shadow-lg: 0 10px 25px -5px rgba(11, 31, 59, 0.10), 0 8px 10px -6px rgba(11, 31, 59, 0.08);
    --shadow-xl: 0 25px 50px -12px rgba(11, 31, 59, 0.25);

    /* Transitions */
    --transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
img { vertical-align: middle; }

a { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-gold); }

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-navy);
}

ul, ol { list-style: none; }

::selection { background: var(--color-gold); color: var(--color-navy); }

/* ==========================================================================
   3. Layout Utilities
   ========================================================================== */
.container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}
@media (min-width: 1024px) {
    .container { padding-left: var(--container-px-lg); padding-right: var(--container-px-lg); }
}

.section { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 1024px) {
    .section { padding-top: 80px; padding-bottom: 80px; }
}
.section-sm { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 1024px) {
    .section-sm { padding-top: 64px; padding-bottom: 64px; }
}
.section-lg { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 1024px) {
    .section-lg { padding-top: 96px; padding-bottom: 96px; }
}

.bg-cream { background-color: var(--color-cream); }
.bg-cream-light { background-color: var(--color-cream-light); }
.bg-navy { background-color: var(--color-navy); }
.bg-white { background-color: var(--color-white); }
.bg-gold { background-color: var(--color-gold); }

.text-white { color: var(--color-white); }
.text-navy { color: var(--color-navy); }
.text-gold { color: var(--color-gold); }
.text-muted { color: var(--color-text-muted); }
.text-cream { color: var(--color-cream); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: 9999px; }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.object-cover { object-fit: cover; }
.object-center { object-position: center; }

/* ==========================================================================
   4. Typography Helpers
   ========================================================================== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-gold);
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.eyebrow.eyebrow-center::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.eyebrow.eyebrow-light { color: var(--color-gold); }

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(11, 31, 59, 0.6);
}
.section-label::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: rgba(11, 31, 59, 0.4);
}
.section-label-dark { color: rgba(255, 255, 255, 0.7); }
.section-label-dark::before { background: rgba(255, 255, 255, 0.4); }

.text-balance { text-wrap: balance; }

.h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.1; }
.h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.15; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.25; }
.h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--color-text-muted); }
.lede-light { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 28px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.btn-primary {
    background: var(--color-navy);
    color: var(--color-white);
}
.btn-primary:hover {
    background: var(--color-navy-hover);
    color: var(--color-white);
    transform: translateY(-1px);
}
.btn-gold {
    background: var(--color-gold);
    color: var(--color-navy);
}
.btn-gold:hover {
    background: var(--color-gold-hover);
    color: var(--color-navy);
    transform: translateY(-1px);
}
.btn-outline {
    background: transparent;
    color: var(--color-navy);
    border: 1.5px solid var(--color-navy);
}
.btn-outline:hover {
    background: var(--color-navy);
    color: var(--color-white);
}
.btn-outline-light {
    background: transparent;
    color: var(--color-white);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn-outline-light:hover {
    background: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);
}
.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.btn-lg { padding: 18px 36px; font-size: 1rem; }

/* ==========================================================================
   6. Cards
   ========================================================================== */
.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: var(--transition);
    border: 1px solid var(--border);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.card-cream {
    background: var(--color-cream-light);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--border);
}
.card-navy {
    background: var(--color-navy);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 32px;
}

/* Icon tile (navy circle, gold-tinted) */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: var(--color-navy);
    color: var(--color-gold);
    flex-shrink: 0;
}
.icon-tile-lg { width: 72px; height: 72px; }
.icon-tile-xl { width: 96px; height: 96px; }
.icon-tile-gold {
    background: rgba(229, 168, 35, 0.12);
    color: var(--color-gold);
}
.icon-tile-light {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* Gold divider under card titles */
.gold-divider {
    width: 32px;
    height: 2px;
    background: var(--color-gold);
    margin: 12px 0 16px;
}

/* ==========================================================================
   7. Page Hero (banner image with overlay)
   ========================================================================== */
.page-hero {
    position: relative;
    padding: 140px 0 60px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-hover) 100%);
}
.page-hero.has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 31, 59, 0.85) 0%, rgba(11, 31, 59, 0.65) 100%);
    z-index: 1;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 {
    color: var(--color-white);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 800;
    margin: 16px 0;
    max-width: 900px;
}
.page-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    max-width: 720px;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb-sep { opacity: 0.5; }

/* ==========================================================================
   8. Solution Detail Hero (navy band, no image)
   ========================================================================== */
.solution-hero {
    position: relative;
    background: var(--color-navy);
    padding: 140px 0 80px;
    overflow: hidden;
}
.solution-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.solution-hero .orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}
.solution-hero .orb-1 { width: 280px; height: 280px; background: rgba(229, 168, 35, 0.15); top: -40px; right: 10%; }
.solution-hero .orb-2 { width: 220px; height: 220px; background: rgba(229, 168, 35, 0.10); bottom: -40px; left: 20%; }
.solution-hero > .container { position: relative; z-index: 2; }

/* ==========================================================================
   9. CTA Bands
   ========================================================================== */
.cta-band {
    position: relative;
    background: var(--color-navy);
    color: var(--color-white);
    padding: 64px 0;
    overflow: hidden;
}
.cta-band.has-bg {
    background-size: cover;
    background-position: center;
}
.cta-band.has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 31, 59, 0.92) 0%, rgba(11, 31, 59, 0.78) 100%);
}
.cta-band .orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}
.cta-band .orb-gold { width: 240px; height: 240px; background: rgba(229, 168, 35, 0.18); top: -40px; right: 10%; }
.cta-band .orb-gold-2 { width: 200px; height: 200px; background: rgba(229, 168, 35, 0.10); bottom: -40px; left: 10%; }
.cta-band .dot-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.cta-band > .container { position: relative; z-index: 2; }
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: rgba(255, 255, 255, 0.85); }

.cta-band-card {
    background: var(--color-navy);
    color: var(--color-white);
    border-radius: var(--radius-3xl);
    padding: 56px;
    position: relative;
    overflow: hidden;
}
.cta-band-card .orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}

/* ==========================================================================
   10. Grid System
   ========================================================================== */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-6 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-12 { display: grid; grid-template-columns: 1fr; gap: 32px; }

@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .grid-12 { grid-template-columns: repeat(12, 1fr); }
    .col-span-2 { grid-column: span 2 / span 2; }
    .col-span-3 { grid-column: span 3 / span 3; }
    .col-span-4 { grid-column: span 4 / span 4; }
    .col-span-5 { grid-column: span 5 / span 5; }
    .col-span-6 { grid-column: span 6 / span 6; }
    .col-span-7 { grid-column: span 7 / span 7; }
    .col-span-8 { grid-column: span 8 / span 8; }
    .col-span-9 { grid-column: span 9 / span 9; }
    .col-start-1 { grid-column-start: 1; }
    .col-start-6 { grid-column-start: 6; }
}

/* ==========================================================================
   11. Navigation (Top Bar + Main Nav)
   ========================================================================== */
.site-header { position: relative; z-index: 100; }

/* Top contact bar */
.top-bar {
    background: var(--color-navy);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    padding: 10px 0;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.top-bar-item { display: inline-flex; align-items: center; gap: 6px; }
.top-bar-item svg { width: 14px; height: 14px; color: var(--color-gold); }
.top-bar-sep { display: inline-block; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; margin: 0 8px; }
.top-bar-left, .top-bar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* Main nav */
.main-nav-wrap {
    background: var(--color-white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 90;
    transition: box-shadow 300ms;
}
.main-nav-wrap.scrolled { box-shadow: var(--shadow-md); }
.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;
    gap: 20px;
}
.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1.1;
}
.brand img { width: 140px; height: 56px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 16px; color: var(--color-navy); letter-spacing: -0.01em; }
.brand-tagline { font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-gold); font-weight: 600; margin-top: 1px; }

/* Primary menu */
.menu-primary-container { flex: 1; min-width: 0; }
.primary-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    list-style: none;
    flex-wrap: nowrap;
}
.primary-menu > li { position: relative; }
.primary-menu > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark);
    position: relative;
    white-space: nowrap;
}
.primary-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms;
}
.primary-menu > li:hover > a::after,
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current-menu-parent > a::after { transform: scaleX(1); }
.primary-menu > li > a:hover { color: var(--color-navy); }
.primary-menu .dropdown-toggle svg {
    width: 12px;
    height: 12px;
    transition: transform 300ms;
}
.primary-menu li:hover > .dropdown-toggle svg { transform: rotate(180deg); }

/* Mega dropdown */
.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 340px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 200ms;
    z-index: 110;
}
.primary-menu > li:hover > .mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.mega-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    transition: background 200ms;
}
.mega-dropdown-item:hover { background: var(--color-cream); }
.mega-dropdown-item .icon-tile { width: 36px; height: 36px; }
.mega-dropdown-item .icon-tile svg { width: 18px; height: 18px; }
.mega-dropdown-item-text { flex: 1; }
.mega-dropdown-item-title { font-weight: 600; font-size: 14px; color: var(--color-navy); display: block; }
.mega-dropdown-item-desc { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.5; }
.mega-dropdown-footer {
    margin-top: 8px;
    padding: 12px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.mega-dropdown-footer a {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-navy);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Nav actions */
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: var(--color-cream);
    color: var(--color-navy);
    transition: var(--transition);
}
.icon-btn:hover { background: var(--color-navy); color: var(--color-white); }
.icon-btn svg { width: 20px; height: 20px; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: none; }

@media (max-width: 1024px) {
    .top-bar { display: none; }
    .primary-menu, .nav-actions .btn.btn-sm { display: none; }
    .nav-actions .icon-btn:not(.mobile-menu-toggle) { display: none; }
    .mobile-menu-toggle { display: inline-flex; }
    /* Responsive nav height — smaller on tablet and phone */
    .main-nav { height: 72px !important; gap: 12px !important; }
    .brand img { height: 44px !important; width: auto !important; }
    .brand-text { display: none !important; }
}

@media (max-width: 640px) {
    .main-nav { height: 64px !important; gap: 8px !important; }
    .brand img { height: 40px !important; }
    .container { padding-left: 16px !important; padding-right: 16px !important; }
    .nav-actions { gap: 8px !important; }
    .icon-btn { width: 40px !important; height: 40px !important; }
    .mobile-menu-toggle { width: 40px !important; height: 40px !important; }
}

/* Mobile menu overlay — mirrors Next.js Navigation.tsx mobile menu (lines 323–381) */
.mobile-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    z-index: 95;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 300ms ease-out;
    padding: 0;
}
.mobile-menu.open { transform: translateX(0); }

@media (max-width: 640px) {
    .mobile-menu { top: 64px; }
}

.mobile-menu-list {
    padding: 32px 24px 8px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Each top-level item row — matches Next.js div.border-b.border-[rgba(11,31,59,0.08)] */
.mobile-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(11, 31, 59, 0.08);
}
.mobile-menu-item a {
    flex: 1;
    display: block;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 600;
    color: #3f3f50;
    transition: color 200ms;
}
.mobile-menu-item a:hover,
.mobile-menu-item a:focus { color: var(--color-navy); }
.mobile-menu-item a[aria-current="page"] { color: var(--color-navy); }

/* Submenu toggle button — matches Next.js button.p-2.text-[#0B1F3B] */
.mobile-menu-item .submenu-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-navy);
    padding: 0;
    border-radius: 4px;
    transition: background 200ms;
}
.mobile-menu-item .submenu-toggle:hover { background: rgba(11, 31, 59, 0.06); }
.mobile-menu-item .submenu-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 300ms ease-out;
}
/* Chevron rotates 180° when expanded — matches Next.js ChevronDown className="transition-transform ${expanded ? 'rotate-180' : ''}" */
.mobile-menu-item .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Submenu — matches Next.js div.pb-3.pl-3.space-y-1 */
.mobile-menu-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms ease-out;
    padding: 0 0 0 12px;
    border-bottom: 1px solid rgba(11, 31, 59, 0.08);
}
.mobile-menu-sub.open { max-height: 800px; padding-bottom: 12px; }
.mobile-menu-sub a {
    display: block;
    padding: 8px 0;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    transition: color 200ms;
}
.mobile-menu-sub a:hover,
.mobile-menu-sub a:focus { color: var(--color-navy); }

/* Bottom CTA — matches Next.js "Work With Us" pill button (full-width navy) */
.mobile-menu-cta {
    padding: 32px 24px 40px 24px;
}
.mobile-menu-cta .btn {
    width: 100%;
    text-align: center;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
}

/* Side panel */
.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 440px;
    background: var(--color-navy);
    color: var(--color-white);
    z-index: 200;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 24px;
}
.side-panel.open { transform: translateX(0); }
.side-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 59, 0.65);
    backdrop-filter: blur(4px);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms;
}
.side-panel-backdrop.open { opacity: 1; visibility: visible; }
.side-panel-header {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}
.side-panel-header img { width: 100px; height: 40px; object-fit: contain; }
.side-panel-close {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.side-panel-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-gold);
    font-weight: 600;
    margin-bottom: 12px;
}
.side-panel h4 { color: var(--color-white); font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.side-panel p { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 1.6; }
.side-panel-contact-list { margin: 24px 0; display: flex; flex-direction: column; gap: 16px; }
.side-panel-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.side-panel-contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.side-panel-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.side-panel-quick-links a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    padding: 6px 0;
}
.side-panel-quick-links a:hover { color: var(--color-gold); }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer { background: var(--color-navy); color: rgba(255, 255, 255, 0.85); }

.footer-cta {
    padding: 64px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}
.footer-cta .orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}
.footer-cta .orb-gold { width: 240px; height: 240px; background: rgba(229, 168, 35, 0.15); top: -40px; right: 10%; }
.footer-cta h2 { color: var(--color-white); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; max-width: 700px; margin: 12px 0; }
.footer-cta p { color: rgba(255, 255, 255, 0.85); max-width: 720px; margin-bottom: 24px; }

.footer-main {
    padding: 64px 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .footer-grid { grid-template-columns: 4fr 3fr 2fr 3fr; gap: 32px; }
}
.footer-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--color-white);
    padding: 8px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.footer-brand-logo img { width: 130px; height: 50px; object-fit: contain; }
.footer-brand-name { font-weight: 800; font-size: 16px; color: var(--color-navy); }
.footer-brand-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-gold); }
.footer-brand p { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.footer-brand-tagline {
    color: var(--color-gold);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-newsletter h5 { color: var(--color-white); font-size: 14px; margin: 16px 0 8px; }
.footer-newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.footer-newsletter-form input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    padding: 10px 14px;
    border-radius: 9999px;
    font-size: 14px;
}
.footer-newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.6); }
.footer-newsletter-form button {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: var(--color-white);
    color: var(--color-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.footer-col-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-gold);
    font-weight: 600;
    margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-links a::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--color-gold);
    border-radius: 9999px;
}
.footer-links a:hover { color: var(--color-gold); }
.footer-contact-list { display: flex; flex-direction: column; gap: 16px; }
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}
.footer-contact-item svg {
    width: 18px;
    height: 18px;
    color: var(--color-gold);
    flex-shrink: 0;
    margin-top: 2px;
}
.footer-contact-item a:hover { color: var(--color-gold); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}
.footer-social { display: flex; gap: 8px; }
.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.footer-social a:hover {
    background: var(--color-white);
    color: var(--color-navy);
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
.footer-legal a:hover { color: var(--color-gold); }

/* v1.1.8 — Eliminate any blank white space that may appear after the footer.
   Common culprits: margin collapse on the last footer child, the back-to-top
   button, or wp_footer() injected elements. These rules ensure the footer is
   always the last visible element and the page ends flush. */
html, body { margin: 0 !important; padding: 0 !important; }
body { overflow-x: hidden; }
.site-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden; /* prevents child margin-collapse from leaking below the footer */
}
/* Kill any stray bottom margins on footer children that could push body height. */
.site-footer > *:last-child,
.site-footer .footer-bottom,
.site-footer .footer-bottom .container,
.site-footer .footer-bottom > *:last-child { margin-bottom: 0 !important; }
/* The back-to-top button is position:fixed so it never takes flow space. */
.back-to-top { position: fixed !important; }

.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: var(--color-white);
    color: var(--color-navy);
    box-shadow: var(--shadow-lg);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 80;
    transition: var(--transition);
}
.back-to-top.visible { display: inline-flex; }
.back-to-top:hover { background: var(--color-gold); color: var(--color-navy); }
@media (max-width: 1023px) { .back-to-top { display: none !important; } }

/* ==========================================================================
   13. Forms (Contact + Newsletter)
   ========================================================================== */
.form-card {
    background: var(--color-cream-light);
    border-radius: var(--radius-2xl);
    padding: 32px;
}
.form-group { margin-bottom: 16px; }
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 6px;
}
.form-input, .form-textarea, .form-select {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--input);
    color: var(--color-navy);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: inherit;
    transition: var(--transition);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 59, 0.1);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-success {
    display: none;
    background: rgba(229, 168, 35, 0.1);
    border: 1px solid var(--color-gold);
    color: var(--color-navy);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 16px;
    align-items: center;
    gap: 8px;
}
.form-success.show { display: flex; }

/* ==========================================================================
   13b. Contact Form 7 styling
   ========================================================================== */
/* CF7 wraps fields in <p> and uses spans for validation. Match the theme form. */
.wpcf7 { margin-top: 8px; }
.wpcf7 p { margin-bottom: 16px; }
.wpcf7 label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 6px;
}
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--input);
    color: var(--color-navy);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: inherit;
    transition: var(--transition);
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 59, 0.1);
}
.wpcf7 textarea { resize: vertical; min-height: 120px; }
.wpcf7 input.wpcf7-submit {
    width: 100%;
    background: var(--color-navy);
    color: var(--color-white);
    border: none;
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}
.wpcf7 input.wpcf7-submit:hover {
    background: var(--color-navy-hover);
}
/* Validation/error styles */
.wpcf7 .wpcf7-not-valid-tip {
    color: #d63638;
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}
.wpcf7 .wpcf7-response-output {
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 14px;
    margin: 16px 0 0;
}
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
    background: rgba(229, 168, 35, 0.1);
    border-color: var(--color-gold);
    color: var(--color-navy);
}
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ng {
    background: rgba(214, 54, 56, 0.08);
    border-color: #d63638;
    color: #d63638;
}
/* The theme form class applied via CF7 field classes (class:form-input etc.) */
.wpcf7 .form-input,
.wpcf7 .form-textarea {
    width: 100%;
}
.form-success svg { color: var(--color-gold); }

/* ==========================================================================
   14. Process / Timeline / Steps
   ========================================================================== */
.process-step {
    position: relative;
    padding: 24px;
}
.process-step-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-gold);
    line-height: 1;
    margin-bottom: 12px;
}
.process-step-title { font-size: 18px; font-weight: 700; color: var(--color-white); margin-bottom: 8px; }
.process-step-desc { color: rgba(255, 255, 255, 0.85); font-size: 14px; line-height: 1.6; }

.timeline {
    position: relative;
    padding-left: 32px;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(11, 31, 59, 0.15);
}
.timeline-item { position: relative; padding-bottom: 32px; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--color-gold);
    border: 3px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-gold);
}

/* ==========================================================================
   15. FAQ Accordion
   ========================================================================== */
.faq-item {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.faq-question {
    width: 100%;
    text-align: left;
    padding: 16px 0;
    font-weight: 600;
    color: var(--color-navy);
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-icon { flex-shrink: 0; transition: transform 300ms; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.faq-item.open .faq-answer { max-height: 500px; padding-bottom: 16px; }

/* ==========================================================================
   16. Solution Side Nav
   ========================================================================== */
.solution-sidenav {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.solution-sidenav-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}
.solution-sidenav-header {
    background: var(--color-navy);
    color: var(--color-white);
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14px;
}
.solution-sidenav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: var(--color-navy);
    font-size: 14px;
    font-weight: 500;
    border-top: 1px solid var(--border);
    transition: var(--transition);
}
.solution-sidenav-link:hover { background: var(--color-cream); }
.solution-sidenav-link.current { color: var(--color-gold); }
.solution-sidenav-link svg { width: 14px; height: 14px; }

/* ==========================================================================
   17. Fade-in animation (replaces framer-motion FadeIn)
   ========================================================================== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .fade-in { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   18. WordPress Core Alignment Classes
   ========================================================================== */
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1em; }
.alignwide { max-width: 100%; }
.alignfull { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--color-text-muted); text-align: center; margin-top: 8px; }
.gallery-caption { font-size: 13px; color: var(--color-text-muted); }
.sticky { background: var(--color-cream-light); padding: 16px; border-radius: var(--radius-md); }

/* Entry content typography */
.entry-content p { margin-bottom: 1.5em; line-height: 1.7; color: var(--color-text-muted); }
.entry-content h2 { margin-top: 2em; margin-bottom: 0.5em; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-navy); }
.entry-content h3 { margin-top: 1.5em; margin-bottom: 0.5em; font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--color-navy); }
.entry-content ul, .entry-content ol { margin-left: 1.5em; margin-bottom: 1.5em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.5em; color: var(--color-text-muted); }
.entry-content blockquote {
    border-left: 4px solid var(--color-gold);
    padding-left: 24px;
    margin: 2em 0;
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-navy);
}
.entry-content a { color: var(--color-gold-hover); text-decoration: underline; }
.entry-content img { border-radius: var(--radius-md); margin: 1.5em 0; }

/* ==========================================================================
   19. Utility spacing helpers
   ========================================================================== */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-12 { padding: 3rem; }

/* ==========================================================================
   20. Misc — dot pattern, orbs
   ========================================================================== */
.dot-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}
.dot-pattern-dark {
    background-image: radial-gradient(rgba(11, 31, 59, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}
.orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}
.orb-gold { background: rgba(229, 168, 35, 0.18); }
.orb-navy { background: rgba(11, 31, 59, 0.10); }

/* Filter pills (Stories page) */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
}
.filter-pill {
    padding: 10px 20px;
    border-radius: 9999px;
    background: var(--color-cream);
    color: var(--color-navy);
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid var(--border);
}
.filter-pill:hover { background: var(--color-navy); color: var(--color-white); }
.filter-pill.active { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }

/* Empty state */
.empty-state {
    border: 2px dashed var(--border);
    border-radius: var(--radius-2xl);
    padding: 64px 32px;
    text-align: center;
    background: var(--color-cream-light);
}
.empty-state svg { color: var(--color-gold); margin: 0 auto 16px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { color: var(--color-text-muted); max-width: 480px; margin: 0 auto; }

/* Numbered chip */
.number-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gold);
    color: var(--color-navy);
    font-weight: 800;
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 13px;
}

/* Tag chip */
.tag-chip {
    display: inline-flex;
    align-items: center;
    background: var(--color-cream);
    color: var(--color-navy);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 9999px;
}

/* Wave divider SVG helper */
.wave-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-navy);
    color: var(--color-white);
    padding: 12px 24px;
    z-index: 999;
    border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; color: var(--color-white); }

/* ==========================================================================
   99. Plugin Conflict Defense (v1.0.1)
   
   The live site at inclusiveark.org has the Pixfort Core plugin
   (wp-content/uploads/wp-scss-cache/pixfort-core-style.css) loaded AFTER
   this stylesheet. Pixfort hijacks several of our utility classes with
   lower-specificity but later-source rules, e.g.:
   
     .btn-primary              -> var(--pix-btn-background) = #7D8DFF (periwinkle)
     .h2:not(.elementor-...)   -> color: rgb(63, 63, 70)     (zinc-700)
     h2, .h2                   -> font-size: 3rem             (unresponsive)
     .text-muted               -> color: rgb(82, 82, 91)      (zinc-600)
   
   These `!important` rules restore the Inclusive ARK brand palette and
   layout system. They are scoped with `body` to raise specificity above
   the plugin selectors without affecting admin/iframes.
   ========================================================================== */

/* --- Buttons: restore navy/gold/pill shape --- */
body .btn {
    border-radius: 9999px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}
body .btn-primary,
body .btn.btn-primary {
    background: var(--color-navy) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-navy) !important;
}
body .btn-primary:hover,
body .btn.btn-primary:hover {
    background: var(--color-navy-hover) !important;
    color: var(--color-white) !important;
    transform: translateY(-1px) !important;
}
body .btn-gold,
body .btn.btn-gold {
    background: var(--color-gold) !important;
    color: var(--color-navy) !important;
    border: 1px solid var(--color-gold) !important;
}
body .btn-gold:hover,
body .btn.btn-gold:hover {
    background: var(--color-gold-hover) !important;
    color: var(--color-navy) !important;
    transform: translateY(-1px) !important;
}
body .btn-outline,
body .btn.btn-outline {
    background: transparent !important;
    color: var(--color-navy) !important;
    border: 1px solid var(--color-navy) !important;
}
body .btn-outline:hover,
body .btn.btn-outline:hover {
    background: var(--color-navy) !important;
    color: var(--color-white) !important;
}
body .btn-outline-light,
body .btn.btn-outline-light {
    background: transparent !important;
    color: var(--color-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
body .btn-outline-light:hover,
body .btn.btn-outline-light:hover {
    background: var(--color-white) !important;
    color: var(--color-navy) !important;
    border-color: var(--color-white) !important;
}
body .btn-sm { padding: 10px 20px !important; font-size: 0.875rem !important; }
body .btn-lg { padding: 18px 36px !important; font-size: 1rem !important; }

/* --- Headings: restore navy color + responsive clamp sizing --- */
body h1, body h2, body h3, body h4, body h5, body h6 {
    color: var(--color-navy) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}
body .h1 { font-size: clamp(2.25rem, 5vw, 3.75rem) !important; font-weight: 800 !important; color: var(--color-navy) !important; }
body .h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; font-weight: 700 !important; color: var(--color-navy) !important; line-height: 1.15 !important; }
body .h3 { font-size: clamp(1.25rem, 2vw, 1.5rem) !important; font-weight: 700 !important; color: var(--color-navy) !important; }
body .h4 { font-size: 1.125rem !important; font-weight: 700 !important; color: var(--color-navy) !important; }

/* Hero H1 stays white on dark overlay */
body .hero h1, body .page-hero h1, body .solution-hero h1,
body .cta-band h1, body .cta-band h2, body .footer-cta h1, body .footer-cta h2 {
    color: var(--color-white) !important;
}

/* v1.1.8 — Hero H1 white-text defense for page-editor content.
   Page content edited via the WordPress editor uses inline `color:#fff`
   on hero H1s, but the global `body h1 { color: navy !important }` rule
   (added for plugin defense) overrides inline styles. These attribute
   selectors catch any H1 whose inline style explicitly sets a white/light
   color, ensuring the text stays visible on dark hero backgrounds. */
body h1[style*="color:#fff"],
body h1[style*="color:#FFF"],
body h1[style*="color:#ffffff"],
body h1[style*="color:#FFFFFF"],
body h1[style*="color:white"],
body h1[style*="color:White"],
body h1[style*="color: #fff"],
body h1[style*="color: #FFF"],
body h1[style*="color: #ffffff"],
body h1[style*="color: #FFFFFF"],
body h1[style*="color: white"],
body h2[style*="color:#fff"],
body h2[style*="color:#ffffff"],
body h2[style*="color:white"],
body h2[style*="color: #fff"],
body h2[style*="color: #ffffff"],
body h2[style*="color: white"] {
    color: var(--color-white) !important;
}

/* --- Body / muted text: restore proper colors --- */
body { color: var(--color-text) !important; background: var(--background) !important; }
body .text-muted { color: var(--color-text-muted) !important; }
body .text-navy  { color: var(--color-navy) !important; }
body .text-white { color: var(--color-white) !important; }
body .text-gold  { color: var(--color-gold) !important; }
body .lede { color: var(--color-text-muted) !important; font-size: clamp(1.0625rem, 1.5vw, 1.25rem) !important; line-height: 1.6 !important; }
body .lede-light { color: rgba(255, 255, 255, 0.85) !important; }

/* --- Eyebrow labels: restore gold + dash prefix --- */
body .eyebrow {
    color: var(--color-gold) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
body .eyebrow::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 1px !important;
    background: currentColor !important;
    opacity: 0.6 !important;
}
body .eyebrow.eyebrow-light { color: var(--color-gold) !important; }

/* --- Cards: restore rounded-2xl + shadow --- */
body .card {
    background: var(--color-white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-2xl) !important;
    padding: 32px !important;
    box-shadow: var(--shadow-sm) !important;
}
body .card-cream { background: var(--color-cream) !important; }
body .card-navy  { background: var(--color-navy) !important; color: var(--color-white) !important; }

/* --- Icon tiles: restore navy/gold circles --- */
body .icon-tile {
    background: var(--color-navy) !important;
    color: var(--color-white) !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body .icon-tile-gold { background: var(--color-gold) !important; color: var(--color-navy) !important; }
body .icon-tile-light { background: rgba(255, 255, 255, 0.1) !important; color: var(--color-white) !important; }

/* --- Tag chips: restore pill shape --- */
body .tag-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: rgba(11, 31, 59, 0.08) !important;
    color: var(--color-navy) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* --- Gold divider: restore gold color + width --- */
body .gold-divider {
    width: 48px !important;
    height: 2px !important;
    background: var(--color-gold) !important;
    margin: 16px 0 !important;
    border-radius: 9999px !important;
}

/* --- Section padding: restore foundation rhythm --- */
body .section { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 1024px) {
    body .section { padding-top: 80px !important; padding-bottom: 80px !important; }
}
body .section-sm { padding-top: 48px !important; padding-bottom: 48px !important; }
body .section-lg { padding-top: 64px !important; padding-bottom: 64px !important; }
@media (min-width: 1024px) {
    body .section-lg { padding-top: 96px !important; padding-bottom: 96px !important; }
}

/* --- Background bands: restore cream/navy tints --- */
body .bg-cream { background: var(--color-cream) !important; }
body .bg-navy  { background: var(--color-navy) !important; color: var(--color-white) !important; }
body .bg-white { background: var(--color-white) !important; }

/* --- Containers: restore max-width + responsive padding --- */
body .container {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-px) !important;
    padding-right: var(--container-px) !important;
}

/* --- Grid system: restore 12-col + responsive breakpoints --- */
body .grid-2, body .grid-3, body .grid-4, body .grid-6, body .grid-12 {
    display: grid !important;
    gap: 24px !important;
}
body .grid-2 { grid-template-columns: 1fr !important; }
body .grid-3 { grid-template-columns: 1fr !important; }
body .grid-4 { grid-template-columns: 1fr !important; }
body .grid-6 { grid-template-columns: 1fr !important; }
body .grid-12 { grid-template-columns: 1fr !important; gap: 32px !important; }
@media (min-width: 768px) {
    body .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
    body .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    body .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
    body .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
    body .grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
    body .grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
    body .grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
    body .grid-12 { grid-template-columns: repeat(12, 1fr) !important; }
    body .col-span-2  { grid-column: span 2 / span 2 !important; }
    body .col-span-3  { grid-column: span 3 / span 3 !important; }
    body .col-span-4  { grid-column: span 4 / span 4 !important; }
    body .col-span-5  { grid-column: span 5 / span 5 !important; }
    body .col-span-6  { grid-column: span 6 / span 6 !important; }
    body .col-span-7  { grid-column: span 7 / span 7 !important; }
    body .col-span-8  { grid-column: span 8 / span 8 !important; }
    body .col-span-9  { grid-column: span 9 / span 9 !important; }
}

/* --- Spacing utilities: restore mt-/mb-/py-/px- rhythm --- */
body .mt-2  { margin-top: 8px !important; }
body .mt-4  { margin-top: 16px !important; }
body .mt-6  { margin-top: 24px !important; }
body .mt-8  { margin-top: 32px !important; }
body .mt-10 { margin-top: 40px !important; }
body .mt-12 { margin-top: 48px !important; }
body .mb-2  { margin-bottom: 8px !important; }
body .mb-4  { margin-bottom: 16px !important; }
body .mb-6  { margin-bottom: 24px !important; }
body .mb-8  { margin-bottom: 32px !important; }
body .mb-12 { margin-bottom: 48px !important; }

/* --- Top contact bar: restore navy bg + light text --- */
body .top-bar {
    background: var(--color-navy) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
}
body .top-bar a, body .top-bar .top-bar-item { color: rgba(255, 255, 255, 0.85) !important; }
body .top-bar-item svg { color: var(--color-gold) !important; }

/* --- Main nav: restore white bg + sticky + border --- */
body .main-nav-wrap {
    background: var(--color-white) !important;
    border-bottom: 1px solid var(--border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
}

/* --- Footer: restore navy bg + light text --- */
body .site-footer, body .footer-cta {
    background: var(--color-navy) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}
body .site-footer h4, body .footer-cta h4,
body .site-footer .footer-col-title {
    color: var(--color-white) !important;
}
body .site-footer a { color: rgba(255, 255, 255, 0.7) !important; }
body .site-footer a:hover { color: var(--color-gold) !important; }

/* --- CTA band: restore navy bg + gold accents --- */
body .cta-band {
    background: var(--color-navy) !important;
    color: var(--color-white) !important;
}
body .cta-band h2 { color: var(--color-white) !important; }
body .cta-band .eyebrow { color: var(--color-gold) !important; }

/* ==========================================================================
   100. Mobile Menu Plugin Defense (v1.0.2)
   
   Pixfort Core's responsive utilities and rselements both ship mobile-menu
   styles that can interfere with our toggle visibility and overlay layout.
   These rules guarantee the mobile menu is VISIBLE and STRUCTURED exactly
   like the Next.js Navigation.tsx implementation regardless of plugin state.
   ========================================================================== */

/* Mobile menu visibility — show toggle on mobile, hide on desktop */
body .mobile-menu-toggle { display: none !important; }
@media (max-width: 1024px) {
    body .top-bar { display: none !important; }
    body .primary-menu,
    body .nav-actions .btn.btn-sm { display: none !important; }
    body .nav-actions .icon-btn:not(.mobile-menu-toggle) { display: none !important; }
    body .mobile-menu-toggle {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--color-cream, #F5F2F0) !important;
        color: var(--color-navy) !important;
        border-radius: 9999px !important;
        border: none !important;
        cursor: pointer !important;
    }
    body .mobile-menu-toggle:hover {
        background: var(--color-navy) !important;
        color: var(--color-white) !important;
    }
    body .mobile-menu-toggle svg {
        width: 22px !important;
        height: 22px !important;
    }
    /* v1.1.1 — when the menu is open, give the toggle a navy fill so it reads
       as an active "close" control. The JS sets .is-open on the button. */
    body .mobile-menu-toggle.is-open {
        background: var(--color-navy) !important;
        color: var(--color-white) !important;
    }
    body .mobile-menu-toggle.is-open svg {
        transform: rotate(90deg);
        transition: transform 200ms ease-out;
    }
}

/* Mobile menu overlay — restore white bg + slide-in from left */
body .mobile-menu {
    background: var(--color-white) !important;
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 95 !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 300ms ease-out !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* v1.1.0 — `display:block !important` is the critical override.
       Pixfort Core's responsive utilities set `.mobile-menu { display:none }`
       on mobile breakpoints, which masked the menu even when our .open
       class added `transform: translateX(0)`. This single rule restores
       the menu visibility on mobile. */
    display: block !important;
}
body .mobile-menu.open {
    transform: translateX(0) !important;
    display: block !important;
}
/* Responsive: smaller nav height on tablet and phone — overlay must follow */
@media (max-width: 1024px) {
    body .main-nav { height: 72px !important; gap: 12px !important; }
    body .mobile-menu { top: 72px !important; }
}
@media (max-width: 640px) {
    body .main-nav { height: 64px !important; gap: 8px !important; }
    body .mobile-menu { top: 64px !important; }
    body .mobile-menu-list { padding: 24px 20px 8px 20px !important; }
    body .mobile-menu-item a { padding: 12px 0 !important; font-size: 15px !important; }
    body .mobile-menu-cta { padding: 24px 20px 32px 20px !important; }
    body .mobile-menu-cta .btn { padding: 14px 20px !important; font-size: 14px !important; }
}

body .mobile-menu-list {
    padding: 32px 24px 8px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
}
body .mobile-menu-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(11, 31, 59, 0.08) !important;
    background: transparent !important;
}
body .mobile-menu-item a {
    flex: 1 !important;
    display: block !important;
    padding: 14px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #3f3f50 !important;
    text-decoration: none !important;
    transition: color 200ms !important;
}
body .mobile-menu-item a:hover,
body .mobile-menu-item a:focus,
body .mobile-menu-item a[aria-current="page"] { color: var(--color-navy) !important; }
body .mobile-menu-item .submenu-toggle {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--color-navy) !important;
    padding: 0 !important;
    border-radius: 4px !important;
}
body .mobile-menu-item .submenu-toggle:hover { background: rgba(11, 31, 59, 0.06) !important; }
body .mobile-menu-item .submenu-toggle svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform 300ms ease-out !important;
}
body .mobile-menu-item .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg) !important; }
body .mobile-menu-sub {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 350ms ease-out !important;
    padding: 0 0 0 12px !important;
    border-bottom: 1px solid rgba(11, 31, 59, 0.08) !important;
}
body .mobile-menu-sub.open {
    max-height: 800px !important;
    padding-bottom: 12px !important;
}
body .mobile-menu-sub a {
    display: block !important;
    padding: 8px 0 !important;
    color: var(--color-text-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 200ms !important;
}
body .mobile-menu-sub a:hover,
body .mobile-menu-sub a:focus { color: var(--color-navy) !important; }
body .mobile-menu-cta {
    padding: 32px 24px 40px 24px !important;
}
body .mobile-menu-cta .btn {
    width: 100% !important;
    text-align: center !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Nav actions row — restore icon-btn visibility + spacing */
body .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

/* v1.1.6 — Compact primary menu so all 6 top-level items fit on one line
   alongside the (now stacked) brand block and the nav-actions row. */
body .main-nav {
    height: 96px !important;
    gap: 20px !important;
}
/* v1.1.8 — Responsive nav height: shrink on tablet/phone so the bar
   doesn't waste vertical space and the mobile menu overlay sits flush. */
@media (max-width: 1024px) {
    body .main-nav { height: 72px !important; gap: 12px !important; }
}
@media (max-width: 640px) {
    body .main-nav { height: 64px !important; gap: 8px !important; }
}
body .menu-primary-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
body .primary-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
}
body .primary-menu > li > a {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    gap: 5px !important;
}
body .primary-menu > li > a svg,
body .primary-menu .dropdown-toggle svg {
    width: 11px !important;
    height: 11px !important;
}
body .nav-actions .icon-btn {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    background: var(--color-cream, #F5F2F0) !important;
    color: var(--color-navy) !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}
body .nav-actions .icon-btn:hover {
    background: var(--color-navy) !important;
    color: var(--color-white) !important;
}
body .nav-actions .icon-btn svg {
    width: 20px !important;
    height: 20px !important;
}

/* Brand area — v1.1.6: stacked logo + wordmark layout (logo on top, name + tagline beneath) */
body .brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    flex-shrink: 0 !important;
}
body .brand img {
    height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
}
body .brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    line-height: 1.1 !important;
}
body .brand-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-navy) !important;
    letter-spacing: -0.01em !important;
}
body .brand-tagline {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    font-weight: 600 !important;
    color: var(--color-gold) !important;
    margin-top: 1px !important;
}
/* v1.1.6 — responsive: hide the brand wordmark on screens narrower than the
   desktop breakpoint. The logo image alone is sufficient on tablet/mobile. */
@media (max-width: 1024px) {
    body .brand-text { display: none !important; }
}
@media (max-width: 640px) {
    body .brand img { height: 44px !important; }
}

/* ==========================================================================
   v1.1.9 — DEFENSIVE MOBILE MENU VISIBILITY (LAST RULE WINS)
   ==========================================================================
   Root cause of "desktop menu showing on mobile" bug:
   The unconditional rule `body .primary-menu { display: flex !important }`
   above (line ~2074) sits OUTSIDE any media query. It has the SAME specificity
   (0,2,0) as the mobile media query's `body .primary-menu { display: none
   !important }` rule (line ~1890). When specificity is tied AND both use
   `!important`, the LATER rule in source order wins. The unconditional rule
   appears later in the file, so `display: flex !important` was overriding
   `display: none !important` on mobile — making the desktop menu visible on
   mobile/tablet devices.

   Fix: This block sits at the very END of style.css so it is the LAST matching
   rule. Being last with the same specificity + `!important`, it wins over all
   earlier unconditional body-override rules. This guarantees the desktop menu,
   the desktop-only nav-action buttons, and the desktop-only icon buttons are
   hidden on mobile/tablet (≤1024px) regardless of what body-override rules
   appear earlier in the file.
   ========================================================================== */
@media (max-width: 1024px) {
    body .top-bar { display: none !important; }
    body .primary-menu { display: none !important; }
    body .nav-actions .btn.btn-sm { display: none !important; }
    body .nav-actions .icon-btn:not(.mobile-menu-toggle) { display: none !important; }
    body .mobile-menu-toggle { display: inline-flex !important; }
    body .menu-primary-container { flex: 0 0 0 !important; min-width: 0 !important; }
}
@media (max-width: 640px) {
    body .primary-menu { display: none !important; }
    body .nav-actions .btn.btn-sm { display: none !important; }
    body .nav-actions .icon-btn:not(.mobile-menu-toggle) { display: none !important; }
}