/* ============================================================================
   Careers — design system
   Hand-written, no frameworks. Brand #C1121F, self-hosted Open Sans.
   ========================================================================== */

/* ── Fonts (self-hosted) ─────────────────────────────────────────────────── */
@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/OpenSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/OpenSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/OpenSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/OpenSans-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    --brand: #C1121F;
    --brand-dark: #9d0e19;
    --brand-darker: #7c0b14;
    --brand-tint: #fdf2f3;
    --brand-tint-2: #fbe7e9;

    --ink: #14110f;
    --ink-2: #45403c;
    --ink-3: #6b655f;
    --line: #e7e3df;
    --line-2: #f0ece8;
    --bg: #ffffff;
    --bg-alt: #faf8f6;
    --bg-dark: #1a1512;

    --ok: #14794a;
    --ok-bg: #e7f5ee;
    --warn: #8a5a00;
    --warn-bg: #fcf3e2;
    --err: #b00020;
    --err-bg: #fdecee;

    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(20, 17, 15, .06), 0 1px 3px rgba(20, 17, 15, .04);
    --shadow: 0 6px 20px rgba(20, 17, 15, .08);
    --shadow-lg: 0 18px 50px rgba(20, 17, 15, .14);

    --container: 1140px;
    --gap: clamp(1rem, 3vw, 2rem);
    --section-y: clamp(3rem, 7vw, 6rem);
    --header-h: 68px;

    --font: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --t-fast: .15s ease;
    --t: .25s cubic-bezier(.4, 0, .2, 1);
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.main { flex: 1 0 auto; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.narrow { max-width: 760px; margin-inline: auto; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.lead { font-size: 1.15rem; color: var(--ink-2); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--brand); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    --btn-bg: var(--brand);
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font: inherit; font-weight: 600; cursor: pointer;
    padding: .7rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
    transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
    text-decoration: none; white-space: nowrap; line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-dark); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--bg-alt); }
.btn--text { background: transparent; color: var(--ink-2); padding-inline: .6rem; }
.btn--text:hover { color: var(--brand); }
.btn--lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .85; cursor: not-allowed; transform: none; }
.btn-spinner {
    display: inline-block; width: 1.2em; height: 1.2em; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: spin .7s linear infinite;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: transparent;            /* let the hero gradient show through at the top */
    border-bottom: 1px solid transparent;
    /* NB: backdrop-filter is deliberately NOT transitioned — animating it to
       none keeps the header a containing block mid-transition, which clamps the
       fixed mobile drawer to the header height until it finishes. */
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
/* Fade in a frosted bar once the user scrolls, or when the mobile menu is open. */
.site-header.is-scrolled,
.site-header:has(.nav.is-open) {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(12px);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}
/* When the menu is open: solid white bar (matches the full-screen panel), and
   no backdrop-filter — that would make the header a containing block for the
   fixed drawer and clamp it to the header height. */
.site-header:has(.nav.is-open) { background: #fff; backdrop-filter: none; }
.site-header__inner { display: flex; align-items: center; justify-content: flex-start; gap: clamp(1.25rem, 3vw, 2.25rem); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand__mark {
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--brand-darker));
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}
.brand__name { font-size: 1.15rem; letter-spacing: -.02em; }
.brand__logo { height: 34px; width: auto; display: block; }
.brand__logo--light { display: none; }   /* shown only over the red hero (see below) */
.site-footer__brand .brand__logo { height: 30px; }

/* Home page: while the header is transparent over the red hero, use the white
   logo + white nav links. Once scrolled (frosted white bar) or with the mobile
   menu open, the default dark treatment applies again. */
.page-hero .site-header:not(.is-scrolled):not(:has(.nav.is-open)) .brand__logo--dark { display: none; }
.page-hero .site-header:not(.is-scrolled):not(:has(.nav.is-open)) .brand__logo--light { display: block; }
.page-hero .site-header:not(.is-scrolled):not(:has(.nav.is-open)) .nav__link { color: #fff; }
.page-hero .site-header:not(.is-scrolled):not(:has(.nav.is-open)) .lang-switcher__btn { color: #fff; }
.page-hero .site-header:not(.is-scrolled):not(:has(.nav.is-open)) .nav-toggle__bar,
.page-hero .site-header:not(.is-scrolled):not(:has(.nav.is-open)) .nav-toggle__bar::before,
.page-hero .site-header:not(.is-scrolled):not(:has(.nav.is-open)) .nav-toggle__bar::after { background: #fff; }

.nav { display: flex; align-items: center; gap: .4rem; flex: 1 1 auto; }
.site-header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nav__link { color: var(--ink); font-weight: 600; padding: .55rem .85rem; border-radius: 999px; }
.nav__link:hover,
.nav__link.is-active {
    color: var(--ink); background: transparent;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.nav__link--cta { background: var(--brand); color: #fff; margin-left: auto; } /* far right on desktop */
.nav__link--cta:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }

/* ── Language switcher (dropdown) ────────────────────────────────────────── */
.lang-switcher { position: relative; }
.lang-switcher__btn {
    display: inline-flex; align-items: center; gap: .45rem;
    font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
    background: transparent; border: 0;
    padding: .45rem .4rem; border-radius: 999px;
}
.lang-switcher__btn:hover .lang-switcher__current {
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.lang-switcher__globe { width: 1.15em; height: 1.15em; display: block; }
.lang-switcher__menu {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
    min-width: 200px; margin: 0; padding: .35rem; list-style: none;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.lang-switcher__item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .8rem; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600;
}
.lang-switcher__item:hover { background: var(--bg-alt); text-decoration: none; }
.lang-switcher__item.is-active { color: var(--brand); }
.lang-switcher__check { color: var(--brand); }

.nav-toggle {
    display: none; background: none; border: 0; cursor: pointer; padding: .5rem;
    width: 44px; height: 44px; position: relative;
}
/* Three equal-width bars. */
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
    content: ""; position: absolute; width: 24px; height: 2px; background: var(--ink);
    transition: transform var(--t), opacity var(--t-fast); border-radius: 2px;
}
.nav-toggle__bar { top: 21px; left: 10px; }
.nav-toggle__bar::before { top: -7px; left: 0; }
.nav-toggle__bar::after { top: 7px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    position: relative; overflow: hidden;
    background: var(--brand);          /* solid brand-red block from the very top */
    color: #fff;
    /* Slide up under the transparent header so the red fills to the top of the
       viewport; add that height back as top padding for content. */
    margin-top: calc(var(--header-h) * -1);
    padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
    padding-bottom: clamp(3.5rem, 9vw, 7rem);
}
/* Legible buttons on the red hero. */
.hero .btn--primary { background: #fff; color: var(--brand); box-shadow: var(--shadow); }
.hero .btn--primary:hover { background: #f3eded; }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .14); }
.hero__eyebrow {
    display: inline-block; text-transform: uppercase; letter-spacing: .14em;
    font-size: .8rem; font-weight: 700; color: var(--brand);
    background: #fff; border: 1px solid var(--brand-tint-2);
    padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.hero__title {
    font-size: clamp(42px, 6vw, 92px);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    color: #fff;
}
.hero__lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: rgba(255, 255, 255, .92); margin-top: 1.3rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: 3rem; }
.stat__num { display: block; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--brand); letter-spacing: -.02em; }
.stat__label { color: var(--ink-3); font-size: .95rem; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section__title { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.section__lead { color: var(--ink-2); margin-top: .5rem; font-size: 1.1rem; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.section__foot { display: flex; justify-content: center; margin-top: var(--section-y); }

/* ── Values ──────────────────────────────────────────────────────────────── */
/* No bottom padding: the gap to the next section is just that section's top
   padding (one --section-y), matching the red-hero → values gap. */
.values { padding-bottom: 0; }
.values__head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.values__title { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.values__lead { color: var(--ink-2); font-size: 1.1rem; margin-top: .6rem; max-width: 60ch; }
.values__controls { display: flex; gap: .5rem; flex-shrink: 0; }
.values-arrow {
    width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    cursor: pointer; display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
    transition: border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.values-arrow:hover { border-color: var(--ink); background: var(--bg-alt); }
.values-arrow:disabled { opacity: .3; cursor: default; }

/* Horizontal scroller — fixed-width cards; scroll/drag left-right when they
   overflow the container. */
.values-grid {
    display: flex; gap: 1rem; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; cursor: grab;
}
.values-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; scroll-behavior: auto; }
.value-card {
    flex: 0 0 clamp(280px, 80vw, 360px);
    scroll-snap-align: start;
    display: flex; flex-direction: column; min-height: 200px;
    padding: 1.5rem; border-radius: var(--radius-lg);
    background: var(--bg-alt); color: var(--ink);
}
.values-grid.is-dragging .value-card { pointer-events: none; } /* don't select text mid-drag */
.value-card__title { font-size: 1.3rem; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; text-transform: uppercase; }
.value-card__text { color: var(--ink-2); margin-top: 1rem; }
@media (max-width: 760px) {
    .values__head { display: block; }
    .values__controls { display: none; } /* touch users swipe directly */
}

/* ── Our process ─────────────────────────────────────────────────────────── */
.section__head--stack { display: block; }
.process__intro { max-width: 70ch; margin-top: .6rem; }
.process-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.process-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--bg-alt); border: 0; border-radius: var(--radius);
    padding: 1.5rem;
}
.process-card__num {
    display: grid; place-items: center; flex-shrink: 0;
    width: 3.4rem; height: 3.4rem; border-radius: 999px; margin-bottom: 1rem;
    background: var(--brand); color: #fff; font-weight: 700; font-size: 1.6rem;
}
.process-card__title { font-size: 1.2rem; margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem; }
.process-card__icon { font-size: 1.4rem; line-height: 1; }
.process-card__text { color: var(--ink-2); }
@media (max-width: 560px) {
    .process-grid { grid-template-columns: 1fr; }
}

.coming-soon { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 700; color: var(--ink-3); padding-block: clamp(1.5rem, 5vw, 3.5rem); }

/* ── Life at Monie ───────────────────────────────────────────────────────── */
.life-intro { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.life-intro__text { display: flex; flex-direction: column; gap: 1.1rem; }
.life-intro__text p { color: var(--ink-2); font-size: 1.1rem; }
.life-intro__text p.life-intro__lead { color: var(--ink); font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 600; }
.life-intro__img { width: clamp(190px, 26vw, 300px); height: auto; justify-self: end; }
.life-intro__img--lg { width: clamp(230px, 32vw, 380px); }
@media (max-width: 760px) {
    .life-intro { grid-template-columns: 1fr; }
    .life-intro__img { justify-self: center; width: clamp(170px, 50vw, 230px); margin-top: .5rem; }
    .life-intro__img--lg { width: clamp(230px, 70vw, 320px); }
}

/* Red "Why join us?" band. */
.section--brand { background: var(--brand); color: #fff; }

.accent-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2.8rem; margin-top: 2.2rem; }
.accent-block { border-left: 3px solid var(--brand); padding-left: 1.3rem; }
.accent-block__title { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.accent-block p { color: var(--ink-2); margin-bottom: .5rem; }
.accent-block p:last-child { margin-bottom: 0; }
/* White-on-red treatment inside the brand band. */
.section--brand .accent-block { border-left-color: rgba(255, 255, 255, .55); }
.section--brand .accent-block__title { color: #fff; }
.section--brand .accent-block p { color: rgba(255, 255, 255, .92); }
@media (max-width: 700px) {
    .accent-blocks { grid-template-columns: 1fr; }
}

.life-prose { margin-top: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.life-prose p { color: var(--ink-2); font-size: 1.08rem; }

/* Values: intro on the left, list top-to-bottom on the right. */
.life-values__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.life-values__intro .section__lead { max-width: 38ch; }
.life-values__list { display: flex; flex-direction: column; gap: 1.6rem; }
.value-item__title { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.value-item__text { color: var(--ink-2); margin-top: .35rem; }
@media (max-width: 760px) {
    .life-values__grid { grid-template-columns: 1fr; }
}

.checklist { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem 2rem; }
.checklist li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); font-size: 1.05rem; }
.checklist li::before { content: "✓"; color: var(--brand); font-weight: 800; flex-shrink: 0; }

.benefit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; margin-top: 2.2rem; }
.benefit-card { background: var(--bg-alt); border: 0; border-radius: var(--radius); padding: 1.6rem; }
.benefit-card__icon { font-size: 1.9rem; display: block; margin-bottom: .8rem; }
.benefit-card__title { font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; }
.benefit-card p { color: var(--ink-2); }

.cta-band p.cta-band__highlight { font-weight: 700; font-size: 1.2rem; opacity: 1; margin-top: .2rem; }

/* Join us — red band, left aligned. */
.join-us__text { margin-top: 1.3rem; display: flex; flex-direction: column; gap: .8rem; }
.join-us__text p { font-size: 1.1rem; color: rgba(255, 255, 255, .95); }
.join-us__highlight { font-weight: 700; font-size: 1.25rem; color: #fff; }

/* ── Features ────────────────────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); margin-top: 2.5rem; }
.feature { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; transition: transform var(--t), box-shadow var(--t); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature__icon { font-size: 2rem; display: block; margin-bottom: .8rem; }
.feature h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.feature p { color: var(--ink-2); }

/* ── Job grid / cards ────────────────────────────────────────────────────── */
.job-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.job-card {
    display: flex; flex-direction: column; gap: .7rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.5rem; color: var(--ink); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.job-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-tint-2); text-decoration: none; }
.job-card__top { display: flex; flex-wrap: wrap; gap: .4rem; }
.job-card__title { font-size: 1.25rem; letter-spacing: -.02em; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--ink-3); font-size: .92rem; margin-top: auto; }
.job-card__cta { color: var(--brand); font-weight: 600; margin-top: .4rem; }
.job-card:hover .job-card__cta { text-decoration: underline; }

.tag {
    display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600;
    color: var(--ink-2); background: var(--bg-alt); border: 1px solid var(--line);
    padding: .25rem .65rem; border-radius: 999px;
}
.tag--dept { color: var(--brand-dark); background: var(--brand-tint); border-color: var(--brand-tint-2); }
.job-card .tag { border: 0; }

/* Localized-date placeholder: a shimmer shows until JS swaps in the local time
   (avoids briefly flashing the raw UTC value). */
.time-shimmer {
    display: inline-block; width: 6.5em; height: 1em; vertical-align: -0.15em;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--line-2) 25%, var(--line) 37%, var(--line-2) 63%);
    background-size: 400% 100%;
    animation: time-shimmer 1.4s ease infinite;
}
@keyframes time-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .time-shimmer { animation: none; } }

/* ── Page head ───────────────────────────────────────────────────────────── */
/* Full-bleed light header that runs to the top of the screen behind the
   transparent navbar, on every page-head page. (The homepage uses the red
   .hero instead.) */
.page-head {
    background: var(--bg-alt); border-bottom: 0;
    margin-top: calc(var(--header-h) * -1);
    padding-top: calc(var(--header-h) + clamp(1.8rem, 5vw, 3.2rem));
    padding-bottom: clamp(3rem, 7vw, 5rem);
}
.page-head--slim {
    padding-top: calc(var(--header-h) + clamp(1rem, 3vw, 1.8rem));
    padding-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
.page-head__title { font-size: clamp(1.8rem, 5vw, 3rem); }
.page-head__lead { color: var(--ink-2); margin-top: .6rem; font-size: 1.1rem; }
.back-link { display: inline-block; color: var(--ink-3); font-weight: 600; margin-bottom: 1rem; }
.back-link:hover { color: var(--brand); }

/* ── Jobs layout (filters + results) ─────────────────────────────────────── */
.jobs-layout { display: grid; grid-template-columns: 280px 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.filters {
    position: sticky; top: 88px; display: flex; flex-direction: column; gap: 1.1rem;
    background: transparent; border: 0; padding: 0;
}
.filters__group { display: flex; flex-direction: column; gap: .4rem; }
.filters label { font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.filters input, .filters select {
    font: inherit; padding: .65rem .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--ink); width: 100%; line-height: 1.4;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Normalise selects to match the text field exactly, with a custom chevron. */
.filters select {
    appearance: none; -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b655f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 12px 8px;
}
.filters input:focus, .filters select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint-2); }
.filters__actions { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 2.5rem; }
.pagination__status { color: var(--ink-3); font-size: .95rem; }

/* ── Notices / empty ─────────────────────────────────────────────────────── */
.notice { border-radius: var(--radius); padding: 1.1rem 1.3rem; border: 1px solid var(--line); margin-bottom: 1.5rem; }
.notice--error { background: var(--err-bg); border-color: #f3c2c8; color: #6f0016; }
.notice--warn { background: var(--warn-bg); border-color: #f0dcb0; color: var(--warn); }
.notice h2 { font-size: 1.1rem; margin-bottom: .3rem; }
.notice__list { margin: .5rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.notice__list li { line-height: 1.5; }
/* Full-bleed yellow band directly under the page header. */
.notice-band { background: var(--warn-bg); color: var(--warn); padding-block: 2.5rem; }
.notice-band .notice__list { margin: 0; padding-left: 0; list-style: none; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.schedule-state[data-state="empty"] .notice { border: 0; }
.notice--plain { border: 0; }
.schedule-state[data-state="loading"] { text-align: center; }
.schedule-state[data-state="done"] { text-align: center; }
.schedule-state[data-state="done"] .btn { margin-top: 1.5rem; }
.empty h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.empty p { margin-bottom: 2rem; }

/* ── Job detail ──────────────────────────────────────────────────────────── */
.job-detail__head {
    background: var(--bg-alt); border-bottom: 0;
    margin-top: calc(var(--header-h) * -1);
    padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 2.6rem));
    padding-bottom: clamp(3rem, 7vw, 5rem);
}
.job-detail__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.job-detail .tag { border: 0; }
.job-detail__title { font-size: clamp(2rem, 5vw, 3.2rem); }
.job-detail__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--ink-2); margin: 1rem 0 1.6rem; }
.job-detail__cta { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; }
.job-detail__secure { color: var(--ink-3); font-size: .9rem; }
.job-detail__body { padding-block: var(--section-y); }
.prose h2 { font-size: 1.5rem; margin: 1.8rem 0 .6rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); margin-bottom: 1rem; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-wrap { max-width: 720px; }
.form { display: flex; flex-direction: column; gap: 1.3rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 600; color: var(--ink); }
.req { color: var(--brand); }
.field__opt { font-weight: 400; color: var(--ink-3); font-size: .9rem; }
.field input, .field textarea {
    font: inherit; padding: .8rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--ink); width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint-2); }
.field--error input, .field--error textarea, [aria-invalid="true"] { border-color: var(--err); }
.field__error { color: var(--err); font-size: .9rem; font-weight: 600; }
.field__hint { color: var(--ink-3); font-size: .85rem; }

.file-input { position: relative; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 1.4rem; text-align: center; transition: border-color var(--t-fast), background var(--t-fast); cursor: pointer; }
.file-input.is-drag { border-color: var(--brand); background: var(--brand-tint); }
.file-input input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.file-input__label { color: var(--ink-2); font-weight: 600; pointer-events: none; }
.file-input.has-file { border-style: solid; border-color: var(--brand); background: var(--brand-tint); }

.form__fineprint { font-size: .85rem; color: var(--ink-3); }
.link-inline {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--brand); text-decoration: none; text-underline-offset: 2px;
}
.link-inline:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__actions.center { justify-content: center; }

/* ── Success / steps ─────────────────────────────────────────────────────── */
.success-mark {
    width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.2rem;
    display: grid; place-items: center; font-size: 2.2rem; color: #fff; font-weight: 700;
    background: linear-gradient(135deg, var(--ok), #0e5e39); box-shadow: var(--shadow);
}
.steps { text-align: left; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.8rem; margin: 2rem 0; }
.steps h2 { font-size: 1.2rem; margin-bottom: .8rem; }
.steps__list { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .7rem; color: var(--ink-2); }

/* ── Scheduling ──────────────────────────────────────────────────────────── */
.schedule-state { padding-block: 1rem; }
.schedule__duration { color: var(--ink-2); margin-bottom: 1rem; }
.slots { display: flex; flex-direction: column; gap: 1.5rem; }
.slot-day { }
.slot-day__title { font-size: 1.05rem; margin-bottom: .7rem; color: var(--ink); }
.slot-day__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.slot {
    font: inherit; font-weight: 600; cursor: pointer; text-align: center;
    padding: .7rem .5rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.slot:hover { border-color: var(--brand); background: var(--brand-tint); }
.slot.is-selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.schedule__confirm {
    position: sticky; bottom: 1rem; margin-top: 1.8rem; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1rem 1.3rem; box-shadow: var(--shadow-lg);
}
.spinner {
    width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 1rem;
    border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CTA band / footer ───────────────────────────────────────────────────── */
.cta-band { background: linear-gradient(135deg, var(--brand), var(--brand-darker)); color: #fff; padding-block: clamp(3rem, 7vw, 5rem); }
.cta-band__inner { text-align: center; }
.cta-band h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.cta-band p { opacity: .92; margin: .6rem 0 1.6rem; font-size: 1.1rem; }
.cta-band .btn--primary { background: #fff; color: var(--brand); }
.cta-band .btn--primary:hover { background: #f3eded; }

.site-footer { background: var(--bg-dark); color: #d9d2cd; padding-block: 1.6rem; margin-top: auto; }
.site-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: #a59d97; font-size: .9rem; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.site-footer__copy { color: #a59d97; font-size: .9rem; }
.footer-link {
    font: inherit; font-size: .9rem; font-weight: 600; color: #d9d2cd;
    background: transparent; border: 0; padding: 0; cursor: pointer;
}
.footer-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
body.modal-open { overflow: hidden; }
.modal[hidden] { display: none; }
.modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 17, 15, .55); }
.modal__dialog {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    width: 100%; max-width: 760px;
    max-height: 86vh; max-height: 86dvh;   /* dvh accounts for mobile browser chrome */
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
/* Full-screen sheet on phones so it can never overflow the viewport. */
@media (max-width: 560px) {
    .modal { padding: 0; align-items: stretch; }
    .modal__dialog { max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
}
.modal__close {
    position: absolute; top: .7rem; right: .7rem; z-index: 1;
    width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--bg-alt); color: var(--ink); font-size: 1.5rem; line-height: 1;
    display: grid; place-items: center; transition: background var(--t-fast);
}
.modal__close:hover { background: var(--line); }
.modal__body { overflow-y: auto; padding: clamp(1.6rem, 4vw, 2.6rem); }
.modal__title { font-size: clamp(1.4rem, 3vw, 1.9rem); padding-right: 2.5rem; }
.modal__meta { color: var(--ink-3); font-size: .92rem; margin-top: .3rem; margin-bottom: 1.2rem; }
.prose h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.prose ul { padding-left: 1.2rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.prose li { color: var(--ink-2); }
.prose li > ul { margin-top: .4rem; margin-bottom: 0; }   /* nested list */
.prose li > ul > li { color: var(--ink-3); }

.error-page__code { font-size: clamp(3rem, 12vw, 6rem); font-weight: 700; color: var(--brand-tint-2); line-height: 1; }
.error-page .form__actions { margin-top: 2rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .jobs-layout { grid-template-columns: 1fr; }
    .filters { position: static; }
}
@media (max-width: 760px) {
    .nav-toggle { display: block; }
    /* Full-screen panel that slides in from the right, solid white background. */
    .nav {
        position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0;
        flex: 0 0 auto; flex-direction: column; align-items: stretch;
        background: #fff; padding: 1.2rem 1.5rem; gap: .2rem;
        transform: translateX(100%); transition: transform var(--t);
        max-height: none; overflow-y: auto;
    }
    .nav.is-open { transform: translateX(0); }
    .nav__link { padding: .9rem .6rem; }
    .process-grid { grid-template-columns: 1fr; }
    .hero__stats { gap: 1.5rem; }
    .stat { flex: 1 1 40%; }
    body { font-size: 16px; }
}
@media (max-width: 480px) {
    .form__actions { flex-direction: column; align-items: stretch; }
    .form__actions .btn { width: 100%; }
    .slot-day__grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}