/* ============================================================
   J.E REVÊTEMENT — DESIGN SYSTEM
   ============================================================
   Drop this file into your WordPress theme (or enqueue it).
   Then use the utility classes / component classes below in
   any page builder, Gutenberg HTML block, or PHP template.

   Built around 4 layers:
     1. Tokens          (CSS custom properties — :root)
     2. Base / reset    (typography, body, scroll, etc.)
     3. Utilities       (containers, buttons, eyebrows…)
     4. Components      (header, hero, cards, modal…)

   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
    /* ── Brand colors ──────────────────────────────────────── */
    --je-color-bg: #eaeaea; /* page background */
    --je-color-surface: #ffffff; /* cards, modals */
    --je-color-ink: #111111; /* primary text */
    --je-color-ink-muted: #666666; /* secondary text */
    --je-color-ink-soft: #aeaeae; /* tertiary, dividers */

    --je-color-navy: #021a70; /* deep brand navy */
    --je-color-navy-2: #0040c8; /* gradient mid */
    --je-color-navy-3: #03249a; /* gradient mid */
    --je-color-blue: #0080ff; /* primary action */
    --je-color-blue-hover: #006ee0; /* primary hover */
    --je-color-blue-link: #2b99d9; /* nav active link */
    --je-color-blue-light: #a6deff; /* accent / highlight */

    /* ── Surface tints (rgba so they layer cleanly) ────────── */
    --je-tint-navy-04: rgba(2, 26, 112, 0.04);
    --je-tint-navy-06: rgba(2, 26, 112, 0.06);
    --je-tint-navy-08: rgba(2, 26, 112, 0.08);
    --je-tint-navy-12: rgba(2, 26, 112, 0.12);
    --je-tint-navy-15: rgba(2, 26, 112, 0.15);
    --je-tint-divider: rgba(174, 174, 174, 0.4);
    --je-tint-divider-soft: rgba(174, 174, 174, 0.3);
    --je-tint-divider-strong: rgba(147, 147, 147, 0.5);

    /* ── Typography ────────────────────────────────────────── */
    --je-font-sans:
        "Axiforma", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --je-font-serif: "Cormorant Garamond", Georgia, serif;

    /* Font sizes */
    --je-fs-display: 56px; /* H1 hero */
    --je-fs-h1: 52px; /* CTA band hero */
    --je-fs-h2: 48px; /* section titles */
    --je-fs-h3: 32px; /* card titles, modal titles */
    --je-fs-h4: 28px; /* large card / city name */
    --je-fs-h5: 26px; /* mission card title */
    --je-fs-h6: 20px; /* small card title */
    --je-fs-stat: 48px; /* stat numbers */
    --je-fs-stat-sm: 32px; /* multi-line stat */
    --je-fs-quote: 40px; /* large pull quote */
    --je-fs-body-lg: 17px; /* hero subtitle */
    --je-fs-body: 16px; /* default */
    --je-fs-body-sm: 15px; /* form input, badge body */
    --je-fs-meta: 14px; /* form label */
    --je-fs-caption: 13px; /* badge body */
    --je-fs-micro: 12px; /* eyebrow, footnotes */
    --je-fs-tiny: 11px; /* code badges */

    /* Font weights */
    --je-fw-light: 300;
    --je-fw-regular: 400;
    --je-fw-medium: 500;
    --je-fw-semibold: 600;
    --je-fw-bold: 700;

    /* Line heights */
    --je-lh-tight: 1.1;
    --je-lh-snug: 1.2;
    --je-lh-base: 1.4;
    --je-lh-relaxed: 1.55;
    --je-lh-loose: 1.65;
    --je-lh-quote: 25px; /* literal — used in body copy */

    /* Letter spacing */
    --je-ls-tightest: -0.03em;
    --je-ls-tighter: -0.02em;
    --je-ls-tight: -0.015em;
    --je-ls-snug: -0.01em;
    --je-ls-normal: 0;
    --je-ls-wide: 0.03em;
    --je-ls-wider: 0.04em;
    --je-ls-widest: 0.08em;
    --je-ls-eyebrow: 0.12em;

    /* ── Spacing (4px scale) ───────────────────────────────── */
    --je-space-1: 4px;
    --je-space-2: 8px;
    --je-space-3: 12px;
    --je-space-4: 16px;
    --je-space-5: 20px;
    --je-space-6: 24px;
    --je-space-8: 32px;
    --je-space-10: 40px;
    --je-space-12: 48px;
    --je-space-15: 60px;
    --je-space-20: 80px;
    --je-space-30: 120px;
    --je-space-45: 180px;

    /* Section padding (vertical/horizontal pairs used everywhere) */
    --je-section-pad-y: var(--je-space-30); /* 120px */
    --je-section-pad-y-b: var(--je-space-20); /* 80px bottom */
    --je-section-pad-x: var(--je-space-15); /* 60px */

    /* ── Layout / containers ───────────────────────────────── */
    --je-container: 1320px;
    --je-container-narrow: 1106px;
    --je-container-prose: 640px;
    --je-header-h: 120px; /* nav height + spacing */

    /* ── Radius ────────────────────────────────────────────── */
    --je-radius-sm: 6px;
    --je-radius-md: 12px;
    --je-radius-lg: 16px; /* buttons */
    --je-radius-xl: 18px; /* badges */
    --je-radius-2xl: 24px; /* cards, modals */
    --je-radius-3xl: 32px; /* hero image, large cards */
    --je-radius-4xl: 36px; /* CTA band */
    --je-radius-pill: 999px;

    /* ── Shadows ───────────────────────────────────────────── */
    --je-shadow-sm: 0 4px 12px rgba(2, 26, 112, 0.08);
    --je-shadow-md: 0 8px 16px -4px rgba(2, 26, 112, 0.3);
    --je-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
    --je-shadow-xl: 0 16px 40px -12px rgba(2, 26, 112, 0.18);
    --je-shadow-card: 0 12px 24px -8px rgba(0, 0, 0, 0.25);
    --je-shadow-cta: 0 30px 80px -20px rgba(2, 26, 112, 0.4);
    --je-shadow-hero: 0 30px 60px -20px rgba(2, 26, 112, 0.25);

    /* ── Gradients ─────────────────────────────────────────── */
    --je-gradient-navy: linear-gradient(
        135deg,
        var(--je-color-navy) 0%,
        var(--je-color-navy-3) 60%,
        var(--je-color-blue) 140%
    );
    --je-gradient-pin: linear-gradient(
        135deg,
        var(--je-color-navy),
        var(--je-color-navy-2)
    );

    /* ── Motion ────────────────────────────────────────────── */
    --je-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --je-dur-fast: 150ms;
    --je-dur-base: 220ms;
    --je-dur-slow: 300ms;

    /* ── Z-layers ──────────────────────────────────────────── */
    --je-z-header: 100;
    --je-z-drawer: 99;
    --je-z-modal: 999;
}

/* ============================================================
   2. WEBFONTS
   ============================================================
   Drop your .woff files into your theme's /fonts/ folder and
   adjust the URLs below. Falls back cleanly to Inter/system.
   ============================================================ */
@font-face {
    font-family: "Axiforma";
    src: url("../fonts/Axiforma-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Axiforma";
    src: url("../fonts/Axiforma-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Axiforma";
    src: url("../fonts/Axiforma-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Axiforma";
    src: url("../fonts/Axiforma-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Axiforma";
    src: url("../fonts/axiforma-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   3. BASE / RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--je-font-sans);
    font-size: var(--je-fs-body);
    line-height: var(--je-lh-quote);
    color: var(--je-color-ink);
    background: var(--je-color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--je-color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--je-color-ink-soft);
    border-radius: 3px;
}

/* ============================================================
   4. TYPOGRAPHY UTILITIES
   ============================================================ */
.je-display {
    font-weight: var(--je-fw-medium);
    font-size: var(--je-fs-display);
    line-height: var(--je-lh-tight);
    letter-spacing: var(--je-ls-tight);
    color: var(--je-color-ink);
    text-wrap: balance;
}
.je-h1 {
    font-weight: var(--je-fw-medium);
    font-size: var(--je-fs-h1);
    line-height: var(--je-lh-tight);
    letter-spacing: var(--je-ls-tighter);
    text-wrap: pretty;
}
.je-h2 {
    font-weight: var(--je-fw-medium);
    font-size: var(--je-fs-h2);
    line-height: var(--je-lh-snug);
    letter-spacing: var(--je-ls-snug);
    text-wrap: pretty;
}
.je-h3 {
    font-weight: var(--je-fw-bold);
    font-size: var(--je-fs-h3);
    line-height: var(--je-lh-snug);
    color: var(--je-color-navy);
}
.je-h5 {
    font-weight: var(--je-fw-bold);
    font-size: var(--je-fs-h5);
    line-height: var(--je-lh-snug);
    color: var(--je-color-navy);
}
.je-quote {
    font-weight: var(--je-fw-light);
    font-size: var(--je-fs-quote);
    line-height: 1.35;
    color: var(--je-color-ink);
    text-wrap: pretty;
}
.je-lead {
    font-size: var(--je-fs-body-lg);
    line-height: var(--je-lh-relaxed);
    color: var(--je-color-ink-muted);
}
.je-body {
    font-size: var(--je-fs-body);
    line-height: var(--je-lh-quote);
    color: var(--je-color-ink-muted);
}
.je-meta {
    font-size: var(--je-fs-meta);
    color: var(--je-color-ink-muted);
}
.je-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--je-space-2);
    font-weight: var(--je-fw-bold);
    font-size: var(--je-fs-micro);
    letter-spacing: var(--je-ls-eyebrow);
    text-transform: uppercase;
    color: var(--je-color-navy);
    background: var(--je-tint-navy-06);
    border-radius: var(--je-radius-pill);
    padding: var(--je-space-2) 14px;
}
.je-eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--je-color-blue);
}
.je-italic-accent {
    font-style: italic;
    font-weight: var(--je-fw-regular);
    color: var(--je-color-navy);
}
.je-italic-accent--light {
    font-style: italic;
    font-weight: var(--je-fw-regular);
    color: var(--je-color-blue-light);
}

/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */
.je-container {
    max-width: var(--je-container);
    margin-inline: auto;
}
.je-container--narrow {
    max-width: var(--je-container-narrow);
    margin-inline: auto;
}
.je-container--prose {
    max-width: var(--je-container-prose);
    margin-inline: auto;
}

.je-section {
    padding: var(--je-section-pad-y) var(--je-section-pad-x)
        var(--je-section-pad-y-b);
}
.je-section--bg-light {
    background: var(--je-color-bg);
}
.je-section--bg-white {
    background: var(--je-color-surface);
}
.je-section--bg-navy {
    background: var(--je-color-navy);
    color: #fff;
}

.je-grid {
    display: grid;
    gap: var(--je-space-6);
}
.je-grid--2 {
    grid-template-columns: 1fr 1fr;
}
.je-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
.je-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
.je-grid--gap-lg {
    gap: var(--je-space-10);
}
.je-grid--gap-xl {
    gap: var(--je-space-20);
}

.je-stack {
    display: flex;
    flex-direction: column;
    gap: var(--je-space-6);
}
.je-row {
    display: flex;
    align-items: center;
    gap: var(--je-space-3);
    flex-wrap: wrap;
}
.je-row--between {
    justify-content: space-between;
}
.je-row--center {
    justify-content: center;
}

.je-text-center {
    text-align: center;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.je-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--je-space-3);
    padding: 14px 28px;
    border: none;
    border-radius: var(--je-radius-lg);
    font-family: var(--je-font-sans);
    font-size: var(--je-fs-body);
    font-weight: var(--je-fw-medium);
    line-height: var(--je-lh-quote);
    cursor: pointer;
    transition:
        background var(--je-dur-fast) var(--je-ease),
        color var(--je-dur-fast) var(--je-ease);
    text-decoration: none;
}
.je-btn--primary {
    background: var(--je-color-blue);
    color: #fff;
}
.je-btn--primary:hover {
    background: var(--je-color-blue-hover);
}

.je-btn--ghost {
    background: transparent;
    color: var(--je-color-ink);
    border: 1px solid var(--je-color-ink);
}
.je-btn--ghost:hover {
    background: var(--je-color-ink);
    color: #fff;
}

.je-btn--white {
    background: #fff;
    color: var(--je-color-navy);
    box-shadow: var(--je-shadow-card);
}
.je-btn--white:hover {
    background: var(--je-color-blue-light);
}

.je-btn--full {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   7. CARDS
   ============================================================ */
.je-card {
    background: var(--je-color-surface);
    border-radius: var(--je-radius-2xl);
    padding: var(--je-space-10);
}
.je-card--media {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.je-card__media {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
}
.je-card__body {
    padding: 50px 34px 32px;
}

.je-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--je-tint-navy-08);
    color: var(--je-color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--je-space-6);
}

/* ============================================================
   8. HEADER / NAV
   ============================================================ */
.je-header {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    z-index: var(--je-z-header);
    display: flex;
    justify-content: center;
    padding: 28px var(--je-section-pad-x) 0;
    pointer-events: none;
    transition:
        top var(--je-dur-base) var(--je-ease),
        padding var(--je-dur-base) var(--je-ease);
}
.je-header__bar {
    background: var(--je-color-bg);
    backdrop-filter: blur(4px);
    border-radius: var(--je-radius-2xl);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    gap: var(--je-space-6);
    width: 100%;
    max-width: 1319px;
    pointer-events: all;
    transition:
        border-radius var(--je-dur-base) var(--je-ease),
        max-width var(--je-dur-base) var(--je-ease),
        box-shadow var(--je-dur-base) var(--je-ease),
        background var(--je-dur-base) var(--je-ease);
}

/* Scroll-collapsed state — snaps flush to the viewport edges. */
.je-header.is-stuck {
    top: 0;
    padding: 0;
}
.je-header.is-stuck .je-header__bar {
    border-radius: 0;
    max-width: none;
    background: var(--je-color-bg);
    box-shadow: var(--je-shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
    .je-header,
    .je-header__bar {
        transition: none;
    }
}
.je-header__logo {
    width: 100px;
    height: 64px;
    flex-shrink: 0;
    object-fit: contain;
}
.je-header__nav {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
    margin-left: 56px;
    min-width: 0;
}
.je-header__nav-item {
    padding: 12px 20px;
    font-size: var(--je-fs-body);
    color: var(--je-color-ink);
    font-weight: var(--je-fw-regular);
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    transition: background var(--je-dur-fast) var(--je-ease);
    white-space: nowrap;
}
.je-header__nav-item:hover {
    background: var(--je-tint-navy-04);
}
.je-header__nav-item.is-active {
    color: var(--je-color-blue-link);
    text-decoration: underline;
    font-weight: var(--je-fw-medium);
}

/* ============================================================
   9. HERO
   ============================================================ */
.je-hero {
    background: var(--je-color-bg);
    padding: var(--je-space-45) var(--je-section-pad-x)
        var(--je-section-pad-y-b);
}
.je-hero__title {
    /* use .je-display */
    margin: 0 auto var(--je-space-6);
    max-width: 1100px;
    text-align: center;
}
.je-hero__subtitle {
    /* use .je-lead */
    max-width: var(--je-container-prose);
    margin: 0 auto var(--je-space-10);
    text-align: center;
}
.je-hero__media {
    position: relative;
    height: 580px;
    border-radius: var(--je-radius-3xl);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: var(--je-shadow-hero);
}

/* Floating glass badges (top-left / bottom-right of hero) */
.je-floating-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--je-radius-xl);
    padding: var(--je-space-4) 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--je-shadow-lg);
}
.je-floating-badge--tl {
    top: var(--je-space-8);
    left: var(--je-space-8);
}
.je-floating-badge--br {
    bottom: var(--je-space-8);
    right: var(--je-space-8);
}

/* ============================================================
   10. STATS ROW
   ============================================================ */
.je-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--je-space-10);
    flex-wrap: wrap;
}
.je-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--je-space-3);
    flex: 1;
    min-width: 160px;
    text-align: center;
}
.je-stats__value {
    font-weight: var(--je-fw-bold);
    font-size: var(--je-fs-stat);
    line-height: 1.15;
    letter-spacing: var(--je-ls-tightest);
    color: var(--je-color-ink);
    white-space: pre-line;
}
.je-stats__value--multi {
    font-size: var(--je-fs-stat-sm);
}
.je-stats__label {
    font-size: var(--je-fs-body);
    color: var(--je-color-ink);
}
.je-stats__divider {
    width: 1px;
    height: 110px;
    background: var(--je-tint-divider-strong);
    flex-shrink: 0;
}

/* ============================================================
   11. LOCATION CARD (grid of cities)
   ============================================================ */
.je-loc-card {
    position: relative;
    overflow: hidden;
    background: var(--je-color-surface);
    border: 1px solid var(--je-tint-navy-06);
    border-radius: var(--je-radius-2xl);
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: var(--je-space-6);
    min-height: 220px;
    transition:
        transform var(--je-dur-slow) var(--je-ease),
        box-shadow var(--je-dur-slow) var(--je-ease);
    cursor: pointer;
}
.je-loc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--je-shadow-xl);
}
.je-loc-card__pin {
    width: 40px;
    height: 40px;
    border-radius: var(--je-radius-md);
    background: var(--je-gradient-pin);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--je-shadow-md);
}
.je-loc-card__code {
    font-weight: var(--je-fw-bold);
    font-size: var(--je-fs-tiny);
    letter-spacing: var(--je-ls-widest);
    color: var(--je-color-navy);
    background: var(--je-tint-navy-06);
    border-radius: var(--je-radius-sm);
    padding: 4px 8px;
}
.je-loc-card__name {
    font-weight: var(--je-fw-bold);
    font-size: var(--je-fs-h4);
    line-height: var(--je-lh-tight);
    letter-spacing: var(--je-ls-snug);
    color: var(--je-color-ink);
    margin-bottom: 6px;
}
.je-loc-card__tag {
    font-size: var(--je-fs-caption);
    color: var(--je-color-ink-muted);
}
.je-loc-card__footer {
    margin-top: auto;
    padding-top: var(--je-space-4);
    border-top: 1px dashed var(--je-tint-navy-15);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.je-loc-card__status {
    display: flex;
    align-items: center;
    gap: var(--je-space-2);
    font-size: var(--je-fs-micro);
    font-weight: var(--je-fw-medium);
    color: var(--je-color-navy);
}
.je-loc-card__status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--je-color-blue);
    box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.2);
}

/* ============================================================
   12. CTA BAND
   ============================================================ */
.je-cta-band {
    position: relative;
    overflow: hidden;
    background: var(--je-gradient-navy);
    border-radius: var(--je-radius-4xl);
    padding: 72px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
    min-height: 580px;
    box-shadow: var(--je-shadow-cta);
    color: #fff;
}
.je-cta-band__title {
    font-weight: var(--je-fw-medium);
    font-size: var(--je-fs-h1);
    line-height: var(--je-lh-tight);
    letter-spacing: var(--je-ls-tighter);
    color: #fff;
    text-wrap: pretty;
}
.je-cta-band__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--je-space-2);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--je-radius-pill);
    padding: var(--je-space-2) 14px;
    align-self: flex-start;
    backdrop-filter: blur(10px);
    font-weight: var(--je-fw-medium);
    font-size: var(--je-fs-caption);
    letter-spacing: var(--je-ls-wider);
    color: rgba(255, 255, 255, 0.95);
}
.je-cta-band__chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--je-color-blue-light);
    box-shadow: 0 0 0 4px rgba(166, 222, 255, 0.2);
    animation: je-pulse 2s ease-in-out infinite;
}

/* ============================================================
   13. MODAL
   ============================================================ */
.je-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--je-z-modal);
    padding: 20px;
    animation: je-fade-in 0.18s var(--je-ease);
}
.je-modal {
    position: relative;
    background: var(--je-color-surface);
    border-radius: var(--je-radius-2xl);
    padding: var(--je-space-12);
    max-width: 580px;
    width: 100%;
    animation: je-slide-up 0.22s var(--je-ease);
}
.je-modal__title {
    font-weight: var(--je-fw-bold);
    font-size: var(--je-fs-h3);
    color: var(--je-color-navy);
    margin-bottom: var(--je-space-2);
}
.je-modal__sub {
    font-size: var(--je-fs-body);
    color: var(--je-color-ink-muted);
    margin-bottom: 28px;
}
.je-modal__close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--je-color-ink-soft);
    transition: color var(--je-dur-fast) var(--je-ease);
}
.je-modal__close:hover {
    color: var(--je-color-ink);
}

/* ============================================================
   14. FORM CONTROLS
   ============================================================ */
.je-field {
    margin-bottom: var(--je-space-4);
}
.je-field__label {
    display: block;
    font-size: var(--je-fs-meta);
    font-weight: var(--je-fw-bold);
    color: var(--je-color-ink);
    margin-bottom: 6px;
}
.je-field__input,
.je-field__select,
.je-field__textarea {
    width: 100%;
    border: 1.5px solid #e0e0e0;
    border-radius: var(--je-radius-md);
    padding: var(--je-space-3) var(--je-space-4);
    font-family: var(--je-font-sans);
    font-size: var(--je-fs-body-sm);
    color: var(--je-color-ink);
    background: var(--je-color-surface);
    appearance: none;
    outline: none;
    transition: border-color var(--je-dur-fast) var(--je-ease);
}
.je-field__input:focus,
.je-field__select:focus,
.je-field__textarea:focus {
    border-color: var(--je-color-blue);
}
.je-field__textarea {
    min-height: 100px;
    resize: vertical;
}
.je-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--je-space-3);
}

/* ============================================================
   15. ANIMATIONS
   ============================================================ */
@keyframes je-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes je-slide-up {
    from {
        transform: translateY(16px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes je-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(166, 222, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(166, 222, 255, 0);
    }
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */

/* Tablet ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --je-section-pad-x: 32px;
    }
    .je-display,
    .je-h1 {
        font-size: clamp(40px, 6vw, 56px);
        line-height: 1.15;
    }
    .je-h2 {
        font-size: clamp(32px, 4.5vw, 44px);
        line-height: 1.2;
    }

    .je-grid--2,
    .je-grid--3,
    .je-grid--4 {
        grid-template-columns: 1fr;
        gap: var(--je-space-10);
    }

    .je-cta-band {
        grid-template-columns: 1fr;
    }
    .je-stats__divider {
        display: none;
    }
}

/* Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    :root {
        --je-section-pad-x: 20px;
        --je-section-pad-y: 64px;
        --je-section-pad-y-b: 48px;
    }
    .je-display,
    .je-h1 {
        font-size: 36px;
    }
    .je-h2 {
        font-size: 28px;
    }
    .je-quote {
        font-size: 24px;
    }

    .je-modal {
        padding: 28px;
        border-radius: var(--je-radius-xl);
    }
    .je-modal__title {
        font-size: var(--je-fs-h4);
    }
    .je-field-row {
        grid-template-columns: 1fr;
    }

    .je-btn {
        width: 100%;
        justify-content: center;
    }

    .je-cta-band {
        padding: var(--je-space-10);
    }
    .je-cta-band__title {
        font-size: 32px;
    }

    .je-floating-badge--tl,
    .je-floating-badge--br {
        padding: var(--je-space-3) var(--je-space-4);
    }
}

/* ============================================================
   17. FLUENT FORMS — BRAND OVERRIDES
   ============================================================
   Scoped to .fluentform so it never bleeds into other forms.
   See: https://fluentforms.com/docs/fluent-forms-styling-custom-css/
   ============================================================ */
.fluentform {
    font-family: var(--je-font-sans);
    color: var(--je-color-ink);
}

/* Field rows (Fluent's grid container) */
.fluentform .ff-t-container,
.fluentform .ff-el-group {
    margin-bottom: var(--je-space-4);
}

/* Labels */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label > label,
.fluentform label.ff-el-form-check-label {
    display: block;
    font-family: var(--je-font-sans);
    font-size: var(--je-fs-meta);
    font-weight: var(--je-fw-bold);
    margin-bottom: 6px;
    line-height: var(--je-lh-base);
}
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform label .ff-el-is-required:after {
    color: var(--je-color-blue);
}

/* Text inputs, selects, textareas, date/file */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform input[type="password"],
.fluentform input[type="search"],
.fluentform input[type="date"],
.fluentform input[type="time"],
.fluentform input[type="datetime-local"],
.fluentform select,
.fluentform textarea,
.fluentform .ff-el-form-control {
    width: 100%;
    border: 1.5px solid #e0e0e0;
    border-radius: var(--je-radius-md);
    padding: var(--je-space-3) var(--je-space-4);
    font-family: var(--je-font-sans);
    font-size: var(--je-fs-body-sm);
    line-height: var(--je-lh-base);
    color: var(--je-color-ink);
    background: var(--je-color-surface);
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition:
        border-color var(--je-dur-fast) var(--je-ease),
        box-shadow var(--je-dur-fast) var(--je-ease);
    height: auto;
    min-height: 48px;
}
.fluentform textarea,
.fluentform textarea.ff-el-form-control {
    min-height: 120px;
    resize: vertical;
}
.fluentform input::placeholder,
.fluentform textarea::placeholder {
    color: var(--je-color-ink-soft);
    opacity: 1;
}

/* Focus state */
.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform input[type="url"]:focus,
.fluentform input[type="number"]:focus,
.fluentform input[type="password"]:focus,
.fluentform input[type="search"]:focus,
.fluentform input[type="date"]:focus,
.fluentform select:focus,
.fluentform textarea:focus,
.fluentform .ff-el-form-control:focus {
    border-color: var(--je-color-blue);
    box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.18);
}

/* Custom select arrow */
.fluentform select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23021A70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--je-space-4) center;
    padding-right: 40px;
}

/* Checkboxes and radios */
.fluentform .ff-el-form-check input[type="checkbox"],
.fluentform .ff-el-form-check input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--je-color-blue);
    margin-right: var(--je-space-2);
}

/* Submit button — mirror .je-btn--primary */
.fluentform .ff-btn,
.fluentform .ff-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--je-space-3);
    width: 100%;
    padding: 14px 28px;
    border: none;
    border-radius: var(--je-radius-lg);
    background: var(--je-color-blue);
    color: #fff;
    font-family: var(--je-font-sans);
    font-size: var(--je-fs-body);
    font-weight: var(--je-fw-medium);
    line-height: var(--je-lh-quote);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition:
        background var(--je-dur-fast) var(--je-ease),
        transform var(--je-dur-fast) var(--je-ease);
    box-shadow: none;
}
.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover {
    background: var(--je-color-blue-hover);
    color: #fff;
}
.fluentform .ff-btn:active,
.fluentform .ff-btn-submit:active {
    transform: translateY(1px);
}
.fluentform .ff-btn:disabled,
.fluentform .ff-btn-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Help text */
.fluentform .ff-el-help-message,
.fluentform .ff-el-input--content .ff_input_help {
    font-size: var(--je-fs-caption);
    color: var(--je-color-ink-muted);
    margin-top: 6px;
}

/* Validation / error states */
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error select,
.fluentform .ff-el-is-error textarea,
.fluentform .error.text-danger ~ input,
.fluentform input.error,
.fluentform select.error,
.fluentform textarea.error {
    border-color: #e53935;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12);
}
.fluentform .error.text-danger,
.fluentform .ff-el-input--content .error {
    color: #e53935;
    font-size: var(--je-fs-caption);
    margin-top: 6px;
}

/* Success / response messages */
.fluentform .ff-message-success,
.ff-message-success {
    background: var(--je-tint-navy-06);
    border: 1px solid var(--je-tint-navy-15);
    border-radius: var(--je-radius-md);
    color: var(--je-color-navy);
    padding: var(--je-space-4) var(--je-space-5);
    font-size: var(--je-fs-body-sm);
    line-height: var(--je-lh-relaxed);
}
.fluentform .ff-errors-in-stack {
    background: rgba(229, 57, 53, 0.08);
    border: 1px solid rgba(229, 57, 53, 0.3);
    border-radius: var(--je-radius-md);
    color: #b71c1c;
    padding: var(--je-space-3) var(--je-space-4);
    font-size: var(--je-fs-caption);
}

/* Inline-styled containers Fluent injects */
.fluentform .ff-el-group .ff-t-cell {
    padding: 0 6px;
}
.fluentform .ff-el-group .ff-t-cell:first-child {
    padding-left: 0;
}
.fluentform .ff-el-group .ff-t-cell:last-child {
    padding-right: 0;
}

/* Embedded inside the quote modal — tighten spacing */
.je-modal .fluentform .ff-el-group {
    margin-bottom: var(--je-space-3);
}
.je-modal .fluentform input[type="text"],
.je-modal .fluentform input[type="email"],
.je-modal .fluentform input[type="tel"],
.je-modal .fluentform select,
.je-modal .fluentform textarea {
    min-height: 44px;
}

/* Embedded inside the sticky form-card aside (navy background) */
.je-form-card .fluentform {
    margin-top: var(--je-space-4);
}
.je-form-card .fluentform .ff-el-input--label label,
.je-form-card .fluentform .ff-el-input--label > label,
.je-form-card .fluentform label.ff-el-form-check-label {
    color: #fff;
}

/* Mobile */
@media (max-width: 640px) {
    .fluentform .ff-el-group .ff-t-cell {
        padding: 0;
        width: 100%;
        display: block;
    }
    .fluentform .ff-el-group .ff-t-cell + .ff-t-cell {
        margin-top: var(--je-space-3);
    }
}