/* ============================================================
   JBDS — components
   ============================================================ */


/* ── SELECTION ─────────────────────────────────────────────── */

::selection {
    background-color: var(--yellow--600);
    color: var(--neutral--black);
}

::-moz-selection {
    background-color: var(--yellow--600);
    color: var(--neutral--black);
}


/* ── PILL ──────────────────────────────────────────────────── */

/* Base — shared across all variants and sizes */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-pill);
    border: var(--border-hairline) solid;
    font-family: var(--font-sans);
    font-size: var(--label-sm-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
    white-space: nowrap;
}

/* Size: compact — tighter padding for inline/filter contexts */
.pill--compact {
    padding: var(--space-xs) var(--space-md);
}

/* Icon inside a pill */
.pill__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* ── PILL VARIANTS ─────────────────────────────────────────── */

/* Highlight */
.pill--highlight {
    background-color: var(--surface--light);
    border-color: var(--border--default--info);
    color: var(--text-body-darkest);
    z-index: 99999;
    /* ensures pill sits above hero diamonds (z-index: 3) and image (z-index: 2) */
}

.pill__glow {
    box-shadow: 0 0 16px 12px rgba(255, 255, 255, 0.55);
}

.pill--highlight .pill__icon {
    color: var(--icon--info);
}

/* Category  */
.pill--category {
    background-color: var(--surface--subtle--success);
    border-color: var(--border--default--success);
}

.pill--category .pill__icon {
    color: var(--icon--success);
}

/* Tag  */
.pill--tag {
    background-color: var(--surface--subtle--caution);
    border-color: var(--border--default--caution);
}

.pill--tag .pill__icon {
    color: var(--icon--caution);
}



/* ── NAVBAR ──────────────────────────────────────────────────── */

/* Base — fixed at top, transparent by default */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000000;
    padding: var(--space-lg);
    /* 16px — mobile/tablet */
    background-color: var(--color-none-light);
    /* transparent */
    border-bottom: var(--border-hairline) solid var(--color-none-light);
    /* invisible */
    transition: padding 200ms ease, background-color 200ms ease,
        border-color 200ms ease, box-shadow 200ms ease;
}

/* onScroll state — JS adds .navbar--scrolled */
.navbar--scrolled {
    padding: var(--space-sm);
    /* 8px — mobile/tablet */
    background-color: var(--surface--light);
    border-bottom-color: var(--border--subtle--neutral);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
}

/* Disable CSS transitions while JS is animating the travel phase  */
/* Prevents the transition from fighting the scroll-driven movement */
.navbar--traveling {
    transition: none;
}

/* WP admin bar is 32px tall (46px on mobile ≤782px).
   z-index: 99998 keeps the navbar below the admin bar (99999) at all times,
   including when JS snapToTop() sets top:0px as an inline style. */
.admin-bar .navbar {
    top: 32px;
    z-index: 99998;
}

@media screen and (max-width: 782px) {
    .admin-bar .navbar {
        top: 46px;
    }
}

/* Inner row: brand left, nav+actions right */
/* No max-width — navbar always spans the full width of the viewport */
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Left-content — logo icon + sitename */
.navbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    text-decoration: none;
    color: var(--text--nav--default);
}

.navbar__brand:hover {
    text-decoration: none;
}

.navbar__brand:hover .navbar__sitename {
    color: var(--text--body--info);
}

.navbar__logo {
    height: 32px;
    width: auto;
    /* preserves the PNG's natural aspect ratio */
    flex-shrink: 0;
    display: block;
}

/* Sitename hidden on mobile — shown on desktop */
.navbar__sitename {
    display: none;
    font-family: var(--font-sans);
    font-size: var(--label-font-size);
    font-weight: 600;
    color: var(--text--nav--default);
}

/* Right-content wrapper */
.navbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    /* 32px — gap-inline: space-2xl */
}

/* navbar-links — hidden on mobile */
.navbar__links {
    text-transform: lowercase;
    display: none;
    align-items: center;
    gap: var(--space-lg);
    /* 16px — gap-inline: space-lg */
}

/* wp_nav_menu wraps links in a <ul> — strip default list styles */
.navbar__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.navbar__links li {
    margin: 0;
    padding: 0;
}

.navbar__links .navbar__link,
.navbar__links a {
    font-family: var(--font-sans);
    font-size: var(--label-font-size);
    font-weight: 400;
    color: var(--text--nav--default);
    text-decoration: none;
    position: relative;
    transition: color 150ms ease;
}

.navbar__links .navbar__link::after,
.navbar__links a::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--border--default--danger);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar__links .navbar__link:hover::after,
.navbar__links a:hover::after {
    transform: scaleX(1);
}

.navbar__links .navbar__link:hover,
.navbar__links a:hover {
    color: var(--text--nav--hover);
    text-decoration: none;
}

/* ── NAV DROPDOWN ────────────────────────────────────────── */

/* Parent item that has children needs relative positioning */
.navbar__links li.menu-item-has-children {
    position: relative;
}

/* Chevron button injected by JS */
.navbar__links .submenu-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-left: 5px;
    color: var(--text--nav--default);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    transition: color 150ms ease;
}


/* Suppress the underline ::after pseudo-element on the toggle button */
.navbar__links .submenu-toggle::after {
    display: none !important;
}

/* Dropdown panel */
.navbar__links .sub-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--surface--light);
    border: var(--border-hairline) solid var(--border--subtle--neutral);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised-4);
    min-width: 190px;
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 200;
}

/* Show only when JS adds .is-open (hover is wired in JS to avoid toggle conflict) */
.navbar__links li.menu-item-has-children.is-open>.sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Sub-menu items */
.navbar__links .sub-menu li {
    margin: 0;
    padding: 0;
}

.navbar__links .sub-menu a {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    white-space: nowrap;
    border-radius: 0;
}

/* No underline animation on sub-menu links */
.navbar__links .sub-menu a::after {
    display: none;
}

.navbar__links .sub-menu a:hover {
    background-color: var(--surface--hover--subtle);
}

/* ── MOBILE SUB-MENU ─────────────────────────────────────── */

/* Parent li: flex row so the "work" link + "+" toggle sit inline and centered */
.navbar__mobile-links li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Sub-menu drops to its own full-width row below the parent link + toggle */
.navbar__mobile-links li.menu-item-has-children>.sub-menu {
    flex: 0 0 100%;
}

.navbar__mobile-links .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 250ms ease;
}

.navbar__mobile-links li.menu-item-has-children.is-open>.sub-menu {
    max-height: 400px;
}

.navbar__mobile-links .sub-menu .navbar__mobile-link {
    padding-left: 0;
    font-size: var(--label-sm-font-size);
}

/* Mobile toggle button */
.navbar__mobile-links .submenu-toggle {
    background: none;
    border: none;
    padding: 0 var(--space-sm);
    color: var(--text--nav--default);
    display: inline-flex;
    align-items: center;
}


/* CTA button — hidden on mobile */
.navbar__cta {
    display: none;
}

/* Hamburger — visible on mobile only */
.navbar__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--space-xs);
    color: var(--text--body--dark);
}

.navbar__hamburger-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* ── HAMBURGER → X ANIMATION ───────────────────────────────── */
/* Driven purely by aria-expanded — no JS changes needed.       */
/* transform-origin: 12px 12px = center of the 24×24 viewBox.  */

.navbar__hamburger-icon line {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 200ms ease;
}

/* Each line pivots around its own center — critical for a clean X */
.navbar__hamburger-icon line:nth-child(1) {
    transform-origin: 12px 6px;
}

.navbar__hamburger-icon line:nth-child(2) {
    transform-origin: 12px 12px;
}

.navbar__hamburger-icon line:nth-child(3) {
    transform-origin: 12px 18px;
}

/* Top line slides to center (y6→y12) and rotates 45° */
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-icon line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

/* Middle line fades out */
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-icon line:nth-child(2) {
    opacity: 0;
}

/* Bottom line slides to center (y18→y12) and rotates -45° */
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-icon line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu drawer — hidden by default */
.navbar__mobile-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    padding: var(--space-xl) var(--space-lg);
    background-color: var(--surface--light);
    border: var(--border-thin) solid var(--border--subtle--neutral);
    border-radius: var(--radius-emphasis);
    box-shadow: rgba(58, 41, 41, 0.05) 0px 4px 8px;
    position: relative;
    top: 24px;
}

.navbar__mobile-menu[hidden] {
    display: none;
}

.navbar__mobile-links {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.navbar__mobile-link {
    display: flex;
    justify-content: center;
    padding: 8px;
    background-color: transparent;
    border-radius: var(--radius-standard);
    font-family: var(--font-sans);
    font-size: var(--label-font-size);
    font-weight: 400;
    color: var(--text--body--dark);
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease;
}

.navbar__mobile-link:hover {
    color: var(--text--nav--hover);
    background-color: var(--surface--subtle--danger);
    text-decoration: none;
}

.navbar__mobile-link:active {
    color: var(--text--nav--pressed);
    background-color: var(--surface--subtle--danger);
    text-decoration: none;
}

/* ── MOBILE FAB NAVBAR (≤820px) ─────────────────────────────── */
/*
 * On mobile the navbar moves to the bottom of the screen and becomes
 * a transparent container — only the FAB hamburger has visual presence.
 * The logo and hire-me CTA are hidden (already hidden by default on mobile).
 * column-reverse ensures the mobile menu draws ABOVE the FAB when open.
 * pointer-events:none on the transparent bar lets scroll events pass through.
 */
@media (max-width: 820px) {
    .navbar {
        top: auto;
        bottom: 0;
        display: flex;
        flex-direction: column-reverse;
        background-color: transparent;
        border-bottom: none;
        box-shadow: none;
        padding: var(--space-lg);
        /* extra bottom padding for iPhone home indicator */
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
        pointer-events: none;
    }

    /* Keep navbar transparent even after JS adds .navbar--scrolled */
    .navbar--scrolled {
        background-color: transparent;
        border-bottom-color: transparent;
        box-shadow: none;
        padding: var(--space-lg);
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }

    /* Hide logo and hire-me CTA — FAB layout has no room or need for them.
       !important needed: .btn { display: inline-flex } appears later in the
       stylesheet and would otherwise win the cascade over display:none. */
    .navbar__brand,
    .navbar__cta {
        display: none !important;
    }

    /* Push FAB to the right edge */
    .navbar__inner {
        justify-content: flex-end;
        pointer-events: none;
    }

    /* FAB — pink circle, shadow, subtle border */
    .navbar__hamburger {
        pointer-events: auto;
        width: 52px;
        height: 52px;
        padding: 0;
        background-color: var(--surface--info);
        border-radius: 50%;
        border: var(--border-hairline) solid var(--border--subtle);
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.14),
            0px 1px 4px rgba(0, 0, 0, 0.06);
        color: var(--text--body--dark);
        z-index: 9999;
        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
            color 300ms cubic-bezier(0.4, 0, 0.2, 1),
            border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Active state — black background, white X, glow off */
    .navbar__hamburger[aria-expanded="true"] {
        background-color: var(--surface--dark);
        color: var(--text--body--light);
        border-color: var(--border--subtle);
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.14),
            0px 1px 4px rgba(0, 0, 0, 0.06),
            0 0 16px 6px rgba(255, 255, 255, 0);
    }

    /* Mobile menu — re-enable pointer events; border-top acts as separator
       from page content above (column-reverse puts menu visually above FAB) */
    .navbar__mobile-menu {
        pointer-events: auto;
    }
}

/* Desktop (821px+) — show links, sitename, CTA; hide hamburger */
@media (min-width: 821px) {
    .navbar {
        padding: var(--space-xl);
        /* 24px — desktop default */
    }

    .navbar__sitename {
        display: block;
    }

    .navbar__links {
        display: flex;
    }

    .navbar__cta {
        display: inline-flex;
    }

    .navbar__hamburger {
        display: none;
    }

    .navbar--scrolled {
        padding: var(--space-lg);
        /* 16px — desktop onScroll */
    }
}

/* Large desktop (1280px+) — navbar starts at bottom, travels to top on scroll */
/* Initial top position is set by JS on load                                   */
@media (min-width: 1280px) {
    .navbar--scrolled {
        padding: var(--space-lg);
        /* 16px when at top */
    }
}


/* ── SVG ICON BASE ───────────────────────────────────────────── */
/*
 * Applied to every <svg> that references the sprite via <use>.
 * Sizing comes from context classes (.btn__icon, .pill__icon, etc.)
 * or explicit width/height attributes on the element.
 */

svg.icon,
svg[aria-hidden="true"] {
    display: block;
    /* prevent inline-baseline gap under the icon */
    flex-shrink: 0;
    overflow: visible;
    /* allow strokes that hug the viewBox edge to show */
}


/* ── BUTTON ──────────────────────────────────────────────────── */

/* Base — shared across all variants and states */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xl);
    /* 12px 32px */
    border-radius: var(--radius-subtle);
    border-style: solid;
    font-family: var(--font-sans);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.btn__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* Disabled — overrides all variant colors with specific disabled tokens */
.btn:disabled,
.btn[aria-disabled="true"] {
    background-color: var(--surface--disabled);
    color: var(--text--disabled);
    cursor: not-allowed;
    pointer-events: none;
}


/* ── BUTTON VARIANTS ─────────────────────────────────────────── */

/* Primary */
.btn--primary {
    color: var(--text--button--primary--default);
    background-color: var(--surface--info);
    border-color: var(--border--default--info);
    border-width: var(--border-thin);
}

.btn--primary:hover {
    color: var(--text--button--primary--hover);
    background-color: var(--surface--info-hover);
    text-decoration: none;
}

.btn--primary:active {
    color: var(--text--button--primary--pressed);
    background-color: var(--surface--info-pressed);

}

.btn--primary:focus-visible {
    color: var(--text--button--primary--hover);
    background-color: var(--surface--info-hover);
    border-color: var(--border--x-strong--info);
    border-width: var(--border-medium);
    outline: none;
    box-shadow: 0 0 24px 8px rgba(51, 196, 255, 0.45);
}

/* Primary button on DARK backgrounds - whether using light/dark mode. For example, the CTA button that appears below the form in the dark footer */
.btn--primary_OnDark {
    color: var(--neutral--black);
    background-color: var(--surface--info);
    border-color: var(--border--default--info);
    border-width: var(--border-thin);
}

.btn--primary_OnDark:hover {
    color: var(--neutral--black);
    background-color: var(--blue--500);
    text-decoration: none;
    box-shadow: 0 0 24px 8px rgba(51, 196, 255, 0.45);
}

.btn--primary_OnDark:active {
    color: var(--neutral--alpha--dark--50);
    background-color: var(--blue--400);

}

.btn--primary_OnDark:focus-visible {
    color: var(--neutral--black);
    background-color: var(--blue--500);
    border-color: var(--blue--400);
    border-width: var(--border-medium);
    outline: none;
    box-shadow: 0 0 24px 8px rgba(51, 196, 255, 0.45);
}

/* Sent confirmation state — nude button with bright blue text */
.btn--sent {
    background-color: transparent;
    border-color: transparent;
    color: var(--blue--500);
    pointer-events: none;
}

/* Ghost — secondary */
.btn--ghost {
    color: var(--text--button--ghost--default);
    background-color: none;
    border-color: var(--border--strong--neutral);
    border-width: var(--border-thin);
}

.btn--ghost:hover {
    color: var(--text--button--ghost--hover);
    border-color: var(--border--default--info);
    text-decoration: none;
}

.btn--ghost:active {
    color: var(--text--button--ghost--pressed);
    background-color: var(--blue--alpha--30);
    border-color: var(--border--default--info);
}

.btn--ghost:focus-visible {
    color: var(--text--button--ghost--hover);
    border-color: var(--border--x-strong--info);
    border-width: var(--border-medium);
    outline: none;
}

/* Ghost button on DARK backgrounds - whether using light/dark mode. For example, the CTA button that appears on card hover over the image & overlay) */
.btn--ghost_OnDark {
    color: var(--neutral--white);
    background-color: none;
    border-color: var(--neutral--white);
    border-width: var(--border-thin);
}

.btn--ghost_OnDark:hover {
    color: var(--blue--600);
    border-color: var(--blue--500);
    text-decoration: none;
}

.btn--ghost_OnDark:active {
    color: var(--blue--400);
    background-color: var(--blue--alpha--30);
    border-color: var(--blue--500);
}

.btn--ghost_OnDark:focus-visible {
    color: var(--blue--600);
    border-color: var(--border--400);
    border-width: var(--border-medium);
    outline: none;
}

/* Nude — tertiary */
.btn--nude {
    color: var(--text--button--nude--default);
    background-color: transparent;
    border-color: var(--color-none-light);
    border-width: var(--border-thin);
}

.btn--nude:hover {
    color: var(--text--button--nude--hover);
    text-decoration: none;
}

.btn--nude:active {
    color: var(--text--button--nude--pressed);
    background-color: var(--blue--alpha--30);
}

.btn--nude:focus-visible {
    color: var(--text--button--nude--hover);
    border-color: var(--border--x-strong--info);
    border-width: var(--border-medium);
    outline: none;
}

/* Nude button on DARK backgrounds - whether using light/dark mode. For example, the CTA button that appears below the form in the dark footer */
.btn--nude_OnDark {
    color: var(--neutral--white);
    background-color: none;
    border-color: var(--color-none-light);
    border-width: var(--border-thin);
}

.btn--nude_OnDark:hover {
    color: var(--blue--600);
    text-decoration: none;
}

.btn--nude_OnDark:active {
    color: var(--blue--700);
    background-color: var(--blue--alpha--30);
}

.btn--nude_OnDark:focus-visible {
    color: var(--blue-600);
    border-color: var(--blue--400);
    border-width: var(--border-medium);
    outline: none;
}

/* ── CARD ──────────────────────────────────────────────────── */
/*
 * Shared across case-study and blog-excerpt card types.
 * Modifier classes: .card--case-study  .card--blog  .card--featured
 * State classes added by hover (CSS-only, no JS needed).
 */

.card {
    background-color: var(--surface--light);
    border: var(--border-hairline) solid var(--border--subtle--neutral);
    border-radius: var(--radius-emphasis);
    /* 16px */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 250ms ease, transform 250ms ease;
}

.card:hover {
    box-shadow: var(--shadow-raised-4);
    transform: translateY(-3px);
    cursor: url('../images/cursor-default.svg') 13 2, default;
}

/* Custom hover cursor on interactive children inside a card */
.card:hover a,
.card:hover button {
    cursor: url('../images/cursor-hover.svg') 13 2, pointer;
}

/* ── CARD MEDIA ─────────────────────────────────────────────── */

.card__media {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--border--default--subtle);
    /* placeholder colour while image loads */
}

.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}

.card:hover .card__image {
    transform: scale(1.04);
}

/* ── CARD OVERLAY (case-study hover) ────────────────────────── */

.card__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 300ms ease, backdrop-filter 300ms ease,
        -webkit-backdrop-filter 300ms ease;
    z-index: 1;
}

.card:hover .card__overlay {
    background-color: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Ghost button that appears inside the overlay */
.card__cta {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 250ms ease 80ms, transform 250ms ease 80ms;
    display: inline-flex;
    align-items: center;
}

/* Card hover — CTA fades/slides in, keeps its Ghost-button appearance */
.card:hover .card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* ── CARD BADGE ("Featured") ────────────────────────────────── */

.card__badge {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    display: inline-flex;
    align-items: center;
    z-index: 2;
    /* above overlay */
}

/* ── CARD BODY ──────────────────────────────────────────────── */

.card__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* spacing handled per-element below for variable gaps */
    padding: var(--space-xl);
    flex: 1;
}

.card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    /* no top margin — first child */
}

.card__title {
    font-family: var(--font-sans);
    font-size: var(--heading-6-font-size);
    font-weight: 500;
    line-height: var(--heading-6-line-height);
    letter-spacing: var(--ls-none);
    color: var(--text--body--dark);
    margin-top: var(--space-2xl);
    /* 32px — tags → title */
}

.card__description {
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    line-height: var(--body-sm-line-height);
    color: var(--text-subtle);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--space-lg);
    /* 16px — title → description */
}

.card__link {
    font-family: var(--font-sans);
    font-size: var(--body-font-size);
    font-weight: 600;
    color: var(--text--body--dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-2xl);
    /* 32px — description → link */
}

.card__link:hover {
    color: var(--text--body--info);
    text-decoration: underline;
}

/* ── CASE STUDY CARD ────────────────────────────────────────── */

.card--case-study .card__media {
    aspect-ratio: 16 / 9;
}

/* ── CASE STUDY — FEATURED VARIANT (horizontal) ─────────────── */
/* Stacks vertically on mobile, flips horizontal on tablet+ */

@media (min-width: 821px) {
    .card--featured {
        flex-direction: row;
    }

    .card--featured .card__media {
        flex: 0 0 50%;
        aspect-ratio: unset;
        min-height: 380px;
    }

    .card--featured .card__body {
        flex: 0 0 50%;
        padding: var(--space-2xl);
        justify-content: center;
        /* gap removed — spacing is margin-based on children */
    }

    .card--featured .card__description {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
}

/* ── BLOG CARD ──────────────────────────────────────────────── */

.card--blog .card__media {
    aspect-ratio: 16 / 9;
}

/* No dark overlay for blog cards — hover is just the card lift */
.card--blog .card__overlay {
    display: none;
}

/* Category pill floated over top-left of image */
.card__category-overlay {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    z-index: 2;
}

/* "METADATA" style label above the title */
.card__meta {
    font-family: var(--font-sans);
    font-size: var(--label-sm-font-size);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing);
    text-transform: uppercase;
    color: var(--text-brand-accent2);
    /* Orange */
    line-height: var(--label-line-height);
}

.card--blog .card__title {
    margin-top: var(--space-xs);
    font-weight: var(--fw-500);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.card--blog .card__description {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xl);
    /* minimum breathing room above the cta even when content is long */
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.card--blog .cta__bottom {
    margin-top: auto;
    /* auto absorbs all remaining space in the flex column, pinning the
       link to the bottom of every card regardless of content height */
}

/* ── EYEBROW LABEL ──────────────────────────────────────────── */
/* Small uppercase accent label used above section headings */

.eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--eyebrow-font-size);
    font-weight: var(--fw-500);
    letter-spacing: var(--eyebrow-letter-spacing);
    text-transform: uppercase;
    line-height: var(--eyebrow-line-height);
}

.eyebrow__small {
    font-size: var(--eyebrow-sm-font-size);
    letter-spacing: var(--eyebrow-letter-spacing);
}


/* ── CASE STUDY HERO ────────────────────────────────────────── */

.cs-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 860px;
}

.cs-hero__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.cs-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.cs-hero__title {
    display: inline;
}

.cs-hero__desc {
    margin-top: var(--space-lg);
    max-width: 72ch;
}

.cs-hero__separator {
    color: var(--theme-callout-text, var(--text--body--info));
}

/* Theme-tinted links — "← All case studies", "View All →", and body content links */
[class*="cs-theme--"] .cs-hero__back,
[class*="cs-theme--"] .cs-more .header-row a,
[class*="cs-theme--"] .cs-body__content a {
    color: var(--theme-callout-text, var(--text--body--info));
}

[class*="cs-theme--"] .cs-hero__back:hover,
[class*="cs-theme--"] .cs-more .header-row a:hover,
[class*="cs-theme--"] .cs-body__content a:hover {
    color: var(--theme-accent, var(--canvas--info));
}

/* ── CASE STUDY: PAGE COLOUR THEMES ─────────────────────────
   Each case-study page adds one of these classes to <body>.
   --theme-accent drives the screens background, callout border +
   metric values, and the scrollspy active-item colour.
   ──────────────────────────────────────────────────────────── */

body.cs-theme--info {
    --theme-accent: var(--canvas--info);
    --theme-callout-text: var(--text--body--info);
    --theme-callout-icon: var(--icon--info);
    --theme-callout-border: var(--border--default--info);
}

body.cs-theme--caution {
    --theme-accent: var(--canvas--caution);
    --theme-callout-text: var(--text--body--caution);
    --theme-callout-icon: var(--icon--caution);
    --theme-callout-border: var(--border--default--caution);
}

body.cs-theme--success {
    --theme-accent: var(--canvas--success);
    --theme-callout-text: var(--text--body--success);
    --theme-callout-icon: var(--icon--success);
    --theme-callout-border: var(--border--default--success);
}

body.cs-theme--warning {
    --theme-accent: var(--canvas--warning);
    --theme-callout-text: var(--text--body--warning);
    --theme-callout-icon: var(--icon--warning);
    --theme-callout-border: var(--border--default--warning);
}

body.cs-theme--danger {
    --theme-accent: var(--canvas--danger);
    --theme-callout-text: var(--text--body--danger);
    --theme-callout-icon: var(--icon--danger);
    --theme-callout-border: var(--border--default--danger);
}

/* Element-level theme tokens — used by .card.cs-theme--* in the More Case Studies section */
.cs-theme--info {
    --theme-accent: var(--canvas--info);
    --theme-callout-text: var(--text--body--info);
}

.cs-theme--caution {
    --theme-accent: var(--canvas--caution);
    --theme-callout-text: var(--text--body--caution);
}

.cs-theme--success {
    --theme-accent: var(--canvas--success);
    --theme-callout-text: var(--text--body--success);
}

.cs-theme--warning {
    --theme-accent: var(--canvas--warning);
    --theme-callout-text: var(--text--body--warning);
}

.cs-theme--danger {
    --theme-accent: var(--canvas--danger);
    --theme-callout-text: var(--text--body--danger);
}

/* Card media gets the case study's theme color as its background */
.card--case-study.cs-theme--info .card__media,
.card--case-study.cs-theme--caution .card__media,
.card--case-study.cs-theme--success .card__media,
.card--case-study.cs-theme--warning .card__media,
.card--case-study.cs-theme--danger .card__media {
    background-color: var(--theme-accent);
}


/* ── CASE STUDY: BODY / STORY SECTION ───────────────────────── */
/* Layout (padding, grid, flex) → utilities.css                  */

/* ── Project meta card ──────────────────────────── */

.cs-meta__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-meta__label {
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    font-weight: var(--fw-600);
    line-height: var(--line-height-100);
    color: var(--theme-callout-text, var(--text--body--info));
    margin: 0;
}

.cs-meta__value {
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    color: var(--text--body--dark-subtle);
    margin: 0;
}

/* ── Project index nav ──────────────────────────── */

.cs-index__heading {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--label-sm-font-size);
    font-weight: var(--fw-600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text--body--dark-subtle);
}

.cs-index__list {
    list-style: none;
    margin: var(--space-md) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cs-index__link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--body-font-size);
    font-weight: var(--fw-500);
    color: var(--text--body--dark-subtle);
    text-decoration: none;
    padding: var(--space-xs) 0;
    transition: color 150ms ease-in;
}

.cs-index__link:hover {
    color: var(--text--body--danger);
    text-decoration: none;
}

.cs-index__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text--body--dark-subtle);
    transition: color 150ms ease;
}

/* Active items — accent colour from page theme */
.cs-index__item--active .cs-index__link {
    color: var(--theme-accent, var(--text--body--danger));
}

.cs-index__item--active .cs-index__icon {
    color: var(--theme-accent, var(--text--body--danger));
}

/* ── Right content column ───────────────────────── */
/* .cs-body__content layout → utilities.css          */

/* Individual story section */
.cs-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-bottom: var(--space-4xl);
    border-bottom: 1px solid var(--Neutral--100, #f0f0f0);
    margin-bottom: var(--space-4xl);
}

.cs-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cs-section__eyebrow {
    color: var(--text--body--dark-subtle);
    letter-spacing: 0.1em;
}

.cs-section__heading {
    margin: 0;
}

.cs-section p {
    font-family: var(--font-sans);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    color: var(--text--body--dark);
    max-width: 68ch;
    margin: 0;
}

/* ── Below 1200px: fixed icon-only index bar ────────────────── */
/* .cs-body__layout and .cs-body__sidebar layout → utilities.css */

@media (max-width: 1200px) {

    /*
     * Project index becomes a fixed bar — icons only, no heading or labels.
     * Starts hidden (slid off the top edge). JS adds .cs-index--visible via
     * IntersectionObserver when .cs-body enters the viewport, and removes it
     * when the section leaves — so the bar only appears while reading the story.
     * At 821–1200px the top navbar is fixed (~64px), so we offset accordingly.
     * At ≤820px the navbar is at the bottom, so top: 0 is clear.
     */
    .cs-index {
        position: fixed;
        top: 73px;
        left: 0;
        right: 0;
        z-index: 50;
        background-color: var(--surface--light-overlay);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        /* Safari support */
        border-bottom: 1px solid var(--Neutral--100, #f0f0ff);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        padding: var(--space-sm) 0;
        /* Hidden by default — slides up out of view */
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 250ms ease, opacity 250ms ease;
    }

    /* JS toggles this class via IntersectionObserver on .cs-body */
    .cs-index--visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* On true mobile the navbar is at the bottom, so the bar sits at top: 0 */
    @media (max-width: 820px) {
        .cs-index {
            top: 0;
        }
    }

    /* Hide the "PROJECT INDEX" label */
    .cs-index__heading {
        display: none;
    }

    /* Lay icons out in a horizontal centred row */
    .cs-index__list {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--space-xl);
        margin: 0;
    }

    @media (max-width: 820px) {
        .cs-index__list {
            gap: var(--space-sm);
        }
    }

    /* Zero font-size collapses the text node; the SVG keeps its px dimensions */
    .cs-index__link {
        font-size: 0;
        line-height: 0;
        gap: 0;
        padding: var(--space-xs);
    }

    /* Slightly larger touch target on mobile */
    .cs-index__icon {
        width: 22px;
        height: 22px;
    }
}

/* ── CASE STUDY: SCREENS SHOWCASE ───────────────────────────── */
/* All positioning/layout → utilities.css                        */

/* ── CALLOUT ────────────────────────────────────────────────── */
/*
   Structure:
     .callout[.callout--{color}][.callout--{variant}]
       └─ .callout__header              (optional eyebrow label)
       └─ (content — one variant below)
            ├─ .callout--metric         → .callout__metrics > .callout__metric
            ├─ .callout--large-icon     → .callout__icons > .callout__icon-item
            ├─ .callout--labeled-text   → .callout__labeled-items > .callout__labeled-item
            └─ .callout--list-item      → .callout__list > .callout__list-item

   Layout rules per variant:
     callout--metric / callout--large-icon  — items flex row, space-between
     callout--labeled-text                  — items flex column, full width
     callout--list-item                     — items flex-wrap, min-width 250px
*/

.callout {
    /* Internal theme tokens — overridden by modifier classes below */
    --callout-text: var(--text--body--orange);
    --callout-icon: var(--icon--warning);
    --callout-border: var(--border--default--warning);

    background-color: var(--surface--light);
    border: var(--border-hairline) solid var(--callout-border);
    border-radius: var(--radius-emphasis);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 8px;
    padding: var(--space-xl);
    width: 100%;
    /* always fills its container — works inside flex columns and grid cells */
    box-sizing: border-box;
}

/* ── Named colour themes ─────────────────────────────────── */

.callout--info {
    --callout-text: var(--text--body--info);
    --callout-icon: var(--icon--info);
    --callout-border: var(--border--default--info);
}

.callout--success {
    --callout-text: var(--text--body--success);
    --callout-icon: var(--icon--success);
    --callout-border: var(--border--default--success);
}

.callout--caution {
    --callout-text: var(--text--body--caution);
    --callout-icon: var(--icon--caution);
    --callout-border: var(--border--default--caution);
}

.callout--warning {
    --callout-text: var(--text--body--warning);
    --callout-icon: var(--icon--warning);
    --callout-border: var(--border--default--warning);
}

.callout--danger {
    --callout-text: var(--text--body--danger);
    --callout-icon: var(--icon--danger);
    --callout-border: var(--border--default--danger);
}

/* ── Case-study page-themed callout ─────────────────────── */
/* Picks up --theme-callout-* tokens set on body.cs-theme--* */

.callout--cs {
    --callout-text: var(--theme-callout-text, var(--text--body--info));
    --callout-icon: var(--theme-callout-icon, var(--icon--info));
    --callout-border: var(--theme-callout-border, var(--border--default--info));
}

/* Header eyebrow — reuses global .eyebrow but scoped here for specificity */
.callout__header {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--label-sm-font-size);
    font-weight: var(--fw-600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--callout-text);
    margin-bottom: var(--space-lg);
}

/* ── SLOT: list ─────────────────────────────────── */

.callout__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.callout__list-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 200px;
    flex: 1 1 200px;
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    line-height: 16px;
    color: var(--text--body--dark);
}

.callout__list-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    color: var(--callout-icon);
}

/* ── SLOT: metric ───────────────────────────────── */

.callout__metrics {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-xl) var(--space-3xl);
}

.callout__metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.callout__metric-value {
    font-family: var(--fancy-font-family);
    font-size: var(--heading-2-font-size);
    font-weight: var(--fw-700);
    line-height: 1;
    color: var(--callout-text);
}

.callout__metric-value sup {
    font-size: 0.45em;
    vertical-align: super;
    line-height: 0;
    color: var(--callout-text);
}

.callout__metric-label {
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    font-weight: var(--fw-600);
    color: var(--text--body--dark);
}

/* ── SLOT: icon ─────────────────────────────────── */

.callout__icons {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-xl) var(--space-lg);
}

.callout__icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

.callout__icon-img {
    width: 40px;
    height: 40px;
    color: var(--callout-icon);
}

.callout__icon-label {
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    font-weight: var(--fw-600);
    color: var(--text--body--dark);
    text-align: center;
}

/* ── SLOT: labeled-text ─────────────────────────── */

.callout__labeled-items {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.callout__labeled-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    width: 100%;
}

.callout__labeled-item-label {
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    font-weight: var(--fw-600);
    color: var(--callout-text);
}

.callout__labeled-item-value {
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    color: var(--text--body--dark);
}

/* ── SLOT: text ─────────────────────────────────── */

.callout__text {
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    line-height: var(--body-sm-line-height);
    color: var(--text--body--dark);
}


/* ── MORE CASE STUDIES ───────────────────────────────────────
   Layout (padding, grid) → utilities.css
   ──────────────────────────────────────────────────────────── */


/* ── BLOG LANDING PAGE ───────────────────────────────────────
   Layout (padding, grid, sidebar sticky) → utilities.css
   ──────────────────────────────────────────────────────────── */

/* Toggle button — mobile only, hidden on desktop */
.blog-page__filter-toggle {
    display: none;
}

.blog-page__toggle-chevron {
    transition: transform 250ms ease;
    flex-shrink: 0;
}

.blog-page__cat-label {
    font-family: var(--font-sans);
    font-size: var(--label-sm-font-size);
    font-weight: var(--fw-600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text--body--dark-subtle);
    display: block;
    margin-bottom: var(--space-lg);
}

.blog-page__cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blog-page__cat-btn {
    transition: color 150ms ease;
}

/* Desktop sidebar — use the .checkbox component; stretch to fill the <li> */
.blog-page__cat-list--desktop .checkbox {
    display: flex;
    width: 100%;
}

.blog-page__cat-btn:hover {
    color: var(--text--body--darkest);
    background-color: var(--green--alpha--90)
}

/* Mobile list is hidden on desktop */
.blog-page__cat-list--mobile {
    display: none;
}

/* .blog-page__grid layout (grid, gap, [hidden]) → utilities.css */

/* Mobile: sidebar becomes a fixed top bar with collapsible chips */
/* Sidebar is a direct child of section.blog-page (not inside .container)
   so position:fixed is viewport-relative with no ancestor interference */
@media (max-width: 820px) {

    .blog-page__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 999;
        padding: var(--space-md) var(--space-lg);
        background-color: var(--neutral--alpha--light--60);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-bottom-color: var(--border--subtle--neutral);
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    /* Desktop label becomes the left side of the bar */
    .blog-page__cat-label {
        flex: 1;
        margin-bottom: 0;
    }

    /* Reveal toggle button ───────────────────────────────────── */
    .blog-page__filter-toggle {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        background: none;
        border: none;
        padding: var(--space-xs);
        color: var(--text--body--dark-subtle);
    }

    /* Chips row: collapsed by default ───────────────────────── */
    .blog-page__cat-list {
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-sm);
        max-height: 0;
        overflow: hidden;
        transition: max-height 300ms ease, margin-top 300ms ease;
        margin-top: 0;
    }

    /* Expanded state ─────────────────────────────────────────── */
    .blog-page__sidebar--open .blog-page__cat-list {
        max-height: 240px;
        margin-top: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .blog-page__sidebar--open .blog-page__toggle-chevron {
        transform: rotate(180deg);
    }

    /* Swap which list is visible */
    .blog-page__cat-list--desktop {
        display: none;
    }

    .blog-page__cat-list--mobile {
        display: flex;
    }

    /* Mobile pill buttons: restore pill--category appearance */
    .blog-page__cat-list--mobile .blog-page__cat-btn {
        width: auto;
        opacity: 1;
    }

    /* Deselected pill: visually dimmed */
    .blog-page__cat-list--mobile .blog-page__cat-btn[aria-pressed="false"] {
        opacity: 0.35;
    }

}

/* .blog-page__grid responsive layout → utilities.css */


/* ── Form layout ─────────────────────────────────── */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* tighter vertical rhythm between fields */
    width: 100%;
}

/* ── Field wrapper — this IS the visual box ───────── */
/*
 * Label lives inside the field box above the input.
 * Border + background sit on the wrapper, not the input,
 * so :focus-within can drive the blue highlight ring
 * without any JS.
 */
.field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    background-color: var(--surface--light-overlay);
    border: 1px solid var(--border--strong--neutral);
    border-radius: var(--radius-standard);
    padding: var(--space-md) var(--space-md);
    box-sizing: border-box;
    transition: border-color 200ms ease;
}

.field_onDark {
    background-color: var(--surface--light-overlay_onDark);
    border: 1px solid var(--border--strong--neutral);
}

.field:focus-within,
.field.is-open {
    border-color: var(--border--default--info);
    outline: none;
}

/* ── Field group: field box + error message ──────── */

.form__field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

/* Error state — danger border + label colour */
.field.has-error {
    border-color: var(--border--default--danger);
}

.field.has-error .field__label {
    color: var(--text--body--danger);
}

/* Disabled state */
.field:has(:disabled),
.field.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Error message — sits below the field box */
.field__error {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: var(--fw-600);
    letter-spacing: 0.05em;
    color: var(--text--body--danger);
    line-height: 1.3;
    /* hidden by default — JS removes the [hidden] attr to reveal */
}

/* ── Label — small, inside the box ───────────────── */

.field__label {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    /* 10px — compact micro-label inside the field */
    font-weight: var(--fw-600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text--body--warning);
    line-height: 1;
    pointer-events: none;
    width: 100%;
    text-align: left;
}

/* ── Input / select / textarea ── */
/*
 * Visual chrome (border, bg, padding) lives on .field.
 * The input itself is purely functional.
 */
.field__input {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text--body--dark);
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    line-height: var(--line-height-100);
}

.field__input_onDark {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text--body--light);
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    line-height: var(--line-height-100);
}

.field__input::placeholder {
    color: var(--text--body--dark-subtle);
}

.field__input:focus {
    outline: none;
}

/* ── Custom select component ─────────────────────── */
/*
 * Replaces the native <select> so the dropdown panel can be
 * fully styled. A hidden <input type="hidden"> carries the value
 * on form submit. JS in script.js wires the interaction.
 */

.custom-select {
    position: relative;
    width: 100%;
}

/* Trigger — font-size must match .field__input.
   line-height is intentionally 1 because <input> elements effectively
   ignore line-height (height = font-size), whereas <button> honours it
   fully — so body-line-height (≈1.5) would inflate the trigger and make
   the field taller than every other field. */
.custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    line-height: 1;
    text-align: left;
}

.custom-select__display {
    color: var(--text--body--dark-subtle);
    /* matches placeholder colour until a value is chosen */
    transition: color 150ms ease;
    padding-top: 5px;
    padding-bottom: 5px;
}

.custom-select__display_onDark {
    color: var(--text--body--dark-subtle);
}

.custom-select__display.is-selected {
    color: var(--text--body--dark);
}

.custom-select__display_onDark.is-selected {
    color: var(--text--body--light);
    /* white once a value is chosen */
}

.custom-select__caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--icon--x-strong);
    transition: transform 200ms ease;
}

.custom-select__caret_onDark {
    color: var(--icon--x-strong_onDark);
    /* white caret on dark — only overrides colour */
}

.custom-select[aria-expanded="true"] .custom-select__caret {
    transform: rotate(180deg);
}

/* Dropdown panel */
.custom-select__dropdown {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: calc(-1 * var(--space-lg));
    /* align flush with the field's left padding edge */
    right: calc(-1 * var(--space-lg));
    /* align flush with the field's right padding edge */
    background-color: var(--surface--light);
    border: 1px solid var(--border--strong--neutral);
    border-radius: var(--radius-standard);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    list-style: none;
    padding: var(--space-xs) 0;
    z-index: 100;
    /* slide-in animation */
    transform-origin: top center;
    animation: dropdown-open 150ms ease forwards;
}

@keyframes dropdown-open {
    from {
        opacity: 0;
        transform: scaleY(0.92) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

.custom-select__dropdown[hidden] {
    display: none;
}

/* Option rows */
.custom-select__option {
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-sans);
    font-size: var(--body-sm-font-size);
    color: var(--text--body--dark);
    transition: background-color 120ms ease, color 120ms ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-select__option:hover {
    background-color: var(--neutral--50);
    color: var(--text--body--dark);
}

.custom-select__option[aria-selected="true"] {
    color: var(--text--body--warning);
    background-color: var(--neutral--50);
}

/* Checkmark on selected option — stroke matches text/body/warning (#AF641D) */
.custom-select__option[aria-selected="true"]::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF641D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* ── Textarea ─────────────────────────────────────── */

.field__textarea {
    resize: vertical;
    min-height: 96px;
}


/* ── CHECKBOX ───────────────────────────────────────────────────
   States: unchecked | unchecked-hover | checked | checked-hover
   Colours from Figma: text/body/info (border + mark),
                       blue/alpha/30  (checked box fill),
                       blue/alpha/50  (hover halo circle)
   ──────────────────────────────────────────────────────────── */

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: url('../images/cursor-hover.svg') 17 3, pointer;
    user-select: none;
}

/* Visually-hidden native input — stays in the a11y tree */
.checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Visual control box ── */
.checkbox__control {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--text--body--info);
    border-radius: 5px;
    background-color: transparent;
    transition: background-color 100ms ease-in-out;
}

/* Halo — large circle that fades in on hover */
.checkbox__control::before {
    content: '';
    position: absolute;
    inset: -10px;
    /* extends 10px beyond the box on every side */
    border-radius: 50%;
    background-color: var(--blue--alpha--50);
    opacity: 0;
    transition: opacity 100ms ease-in-out;
    pointer-events: none;
    z-index: -1;
}

/* Checkmark — CSS border trick */
.checkbox__control::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--text--body--info);
    border-bottom: 2px solid var(--text--body--info);
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity 100ms ease-in-out;
}

/* ── unchecked-hover: halo appears ── */
.checkbox:hover .checkbox__control::before,
.checkbox__input:focus-visible~.checkbox__control::before {
    opacity: 1;
}

/* ── checked: light fill + checkmark + bold label ── */
.checkbox__input:checked~.checkbox__control {
    background-color: var(--blue--alpha--30);
}

.checkbox__input:checked~.checkbox__control::after {
    opacity: 1;
}

.checkbox:has(.checkbox__input:checked) {
    font-weight: 700;
}

/* ── checked-hover: halo AND fill both active (already handled by
   the hover + checked rules above combining naturally) ── */

/* ── Disabled ── */
.checkbox.is-disabled,
.checkbox:has(.checkbox__input:disabled) {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}