/* ═══════════════════════════════════════════════════════════════
   CHESNA — login.css
   Single-page site: Home / Jobs / About / Login views + modals

   CONTENTS
     1. Tokens & base
     2. Shared components (buttons, eyebrows)
     3. Site header
     4. Site footer
     5. Home view
     6. About view
     7. Jobs view (hero, filter, cards)
     8. Job details modal
     9. Image lightbox
    10. Login view (boarding pass)
    11. Login notices
    12. Forgot-password modal (glass)
    13. Reduced motion
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   1. TOKENS & BASE
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* colour */
    --ink: #0a1730;
    --ink-soft: #101f42;
    --header-bg: #10154a;
    --route-blue: #1554b3;
    --amber: #ffb703;
    --amber-dim: #caa262;
    --cream: #f6f1e6;
    --cream-dim: #ece4d2;
    --crimson: #c1442e;
    --slate: #6b7690;
    --text-dark: #1a2033;
    --accent-orange: #c8461f;   /* header / buttons / About */
    --orange: #f26a1b;          /* Jobs + Login + modal accents */
    --page-warm: #f4f2ee;
    --line: rgba(26, 32, 51, 0.09);

    /* type */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'DM Mono', monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
}

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

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

button {
    font-family: inherit;
}

/* the `hidden` attribute must beat any `display:` set on a class */
[hidden] {
    display: none !important;
}

/* SPA views — JS toggles .is-active */
.view-section {
    display: none;
}

.view-section.is-active {
    display: block;
}


/* ═══════════════════════════════════════
   2. SHARED COMPONENTS
═══════════════════════════════════════ */
.btn-outline {
    padding: 8px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.btn-outline.active {
    border-color: var(--amber);
    background: rgba(255, 183, 3, 0.12);
    color: var(--amber);
}

.btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 19px;
    border-radius: 6px;
    background: var(--accent-orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-solid:hover {
    background: #d9591f;
    transform: translateY(-1px);
}

.section-eyebrow,
.about-eyebrow,
.home-hero-eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    display: block;
}

.section-eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--amber-dim);
    margin-bottom: 12px;
}


/* ═══════════════════════════════════════
   3. SITE HEADER
═══════════════════════════════════════ */
.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid rgba(255, 183, 3, 0.14);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    height: 70px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.site-logo .logo {
    width: 42px;
    height: 42px;
    max-width: none;
    object-fit: contain;
    flex-shrink: 0;
}

.site-logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1.35;
    white-space: nowrap;
}

.site-logo-text small {
    margin-left: 1px;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 10.5px;
    color: #d9591f;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* nav */
.site-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.site-nav a {
    position: relative;
    padding: 9px 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13.5px;
    font-weight: 600;
    transition: color 0.15s ease;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -6px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--accent-orange);
    transform: scaleX(0);
    transition: transform 0.18s ease;
}

.site-nav a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.site-nav a:hover::after {
    transform: scaleX(0.6);
}

.site-nav a.active {
    color: #fff;
    font-weight: 700;
}

.site-nav a.active::after {
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 1px;
    transform: scaleX(1);
}

.nav-auth {
    display: none;
}

.site-nav .nav-auth .btn-outline,
.site-nav .nav-auth .btn-solid {
    padding: 9px 18px;
    font-size: 13px;
}

.site-nav .nav-auth .btn-outline { color: #fff; }
.site-nav .nav-auth .btn-solid   { color: #fff; }
.site-nav .nav-auth .btn-outline.active { color: var(--amber); }

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* mobile hamburger */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    padding: 4px;
}

@media (max-width: 860px) {
    .site-nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--ink-soft);
        border-bottom: 1px solid rgba(255, 183, 3, 0.14);
        padding: 10px 24px 16px;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav > a {
        width: 100%;
        padding: 10px 0;
    }

    /* Log In / Sign Up appear inside the dropdown */
    .nav-auth {
        display: flex;
        gap: 10px;
        width: 100%;
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .nav-auth .btn-outline,
    .nav-auth .btn-solid {
        flex: 1;
        justify-content: center;
        text-align: center;
        padding: 11px 16px;
    }

    /* the nav-link underline effect shouldn't apply to the buttons */
    .nav-auth a::after {
        display: none;
    }

    /* hide the header copies of the buttons so only the hamburger remains */
    .site-header-actions .btn-outline,
    .site-header-actions .btn-solid {
        display: none;
    }

    .nav-toggle {
        display: block;
    }
}

@media (max-width: 560px) {
    .site-logo-text {
        font-size: 15px;
    }
}


/* ═══════════════════════════════════════
   4. SITE FOOTER
═══════════════════════════════════════ */
.site-footer {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.55);
    padding: 36px 24px;
    text-align: center;
    font-size: 13px;
}

.site-footer strong {
    color: var(--amber);
    font-family: var(--font-mono);
    letter-spacing: 1px;
}


/* ═══════════════════════════════════════
   5. HOME VIEW
═══════════════════════════════════════ */

/* ── hero: headline left, photo collage right ── */
.home-hero--split {
    position: relative;
    overflow: hidden;
    padding: 64px 24px 90px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 15%, rgba(21, 84, 179, 0.4), transparent 42%),
        var(--ink);
}

/* cream wave hugging the bottom of the hero */
.home-hero--split::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 140px;
    background: var(--cream);
    border-radius: 100% 100% 0 0 / 60px 60px 0 0;
    pointer-events: none;
}

.home-hero-inner--split {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(300px, 460px) 1fr;
    gap: 48px;
    align-items: center;
}

.home-hero-eyebrow {
    font-size: 11.5px;
    letter-spacing: 2.5px;
    color: var(--amber);
    margin-bottom: 16px;
}

.home-hero-text h1 {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.home-hero-text p {
    max-width: 440px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 15.5px;
    line-height: 1.65;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* collage */
.home-hero-collage {
    position: relative;
    min-height: 380px;
}

.collage-card {
    position: absolute;
    overflow: hidden;
    border-radius: 22px;
    border: 6px solid var(--cream);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    background: linear-gradient(135deg, rgba(21, 84, 179, 0.35), rgba(255, 183, 3, 0.25));
}

.collage-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage-card--main    { width: 300px; height: 300px; top: 0;    left: 90px; z-index: 2; }
.collage-card--office  { width: 340px; height: 210px; bottom: 0; left: 0;    z-index: 3; }
.collage-card--factory { width: 250px; height: 250px; top: 60px; right: 0;   z-index: 1; }

/* missing-photo fallback (added by the <img onerror> handler) */
.collage-card.img-fallback img,
.trust-card.img-fallback img {
    display: none;
}

.collage-card.img-fallback::before {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 26px;
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 960px) {
    .home-hero-inner--split {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .home-hero-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero-actions {
        justify-content: center;
    }

    .home-hero-collage {
        max-width: 420px;
        min-height: 340px;
        margin: 40px auto 0;
    }

    .collage-card--main    { left: 60px; }
    .collage-card--factory { right: 10px; }
}

@media (max-width: 480px) {
    .home-hero-text h1 {
        font-size: 28px;
    }

    .home-hero-collage {
        transform: scale(0.85);
        transform-origin: top center;
    }
}

/* ── trust: three photo cards ── */
.home-trust {
    background: var(--cream);
    padding: 90px 24px 70px;
}

.home-trust-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.trust-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 60px;
}

.trust-card {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(21, 84, 179, 0.55), rgba(10, 23, 48, 0.75));
    box-shadow: 0 12px 30px rgba(20, 20, 10, 0.12);
}

.trust-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trust-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 22px 22px 20px;
    color: #fff;
    background: linear-gradient(180deg, rgba(10, 23, 48, 0) 35%, rgba(10, 23, 48, 0.85) 100%);
}

.trust-card-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}

.trust-card-overlay p {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.trust-card-overlay strong {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--amber);
}

@media (max-width: 960px) {
    .trust-cards {
        grid-template-columns: 1fr;
    }
}

/* ── final CTA / site-map banner ── */
.home-final-cta {
    background: var(--ink);
    padding: 50px 24px;
}

.home-final-cta-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
}

.final-cta-label {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--amber);
}

.home-final-cta h4 {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.home-final-cta p,
.home-final-cta p a {
    font-size: 12.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
}

.home-final-cta p a:hover {
    color: var(--amber);
    text-decoration: underline;
}

@media (max-width: 860px) {
    .home-final-cta-inner {
        grid-template-columns: 1fr 1fr;
    }

    .final-cta-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .home-final-cta-inner {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════
   6. ABOUT VIEW
═══════════════════════════════════════ */
.about-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 24px 100px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 10% 15%, rgba(21, 84, 179, 0.4), transparent 42%),
        var(--ink);
    animation: aboutHeroIn 0.5s ease;
}

@keyframes aboutHeroIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.about-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 90px;
    background: var(--cream);
    border-radius: 100% 100% 0 0 / 40px 40px 0 0;
    pointer-events: none;
}

.about-hero > * {
    position: relative;
    z-index: 1;
}

.about-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 11.5px;
    letter-spacing: 2.5px;
    color: var(--amber);
}

.about-hero h1 {
    max-width: 760px;
    margin: 0 auto 8px;
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

/* narrative + values/location */
.about-mission {
    background: var(--cream);
    padding: 6px 24px 80px;
}

.about-mission-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 10px;
}

.about-narrative-title {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-dark);
}

.about-narrative {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
}

.about-narrative p {
    line-height: 1.7;
    text-align: justify;
}

.about-motto {
    margin-top: 12px;
    padding: 24px 28px;
    text-align: justify;
    border-left: 3px solid var(--accent-orange);
    border-radius: 0 10px 10px 0;
    background: rgba(200, 70, 31, 0.06);
    box-shadow: 0 8px 24px rgba(200, 70, 31, 0.08);
}

.about-motto p {
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-dark);
}

.about-right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mission-values {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.value-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.value-item i {
    flex-shrink: 0;
    width: 22px;
    margin-top: 4px;
    font-size: 18px;
    color: var(--route-blue);
}

.value-item h3 {
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-dark);
}

.value-item p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--slate);
}

/* location map — pushed to the bottom of the right column */
.about-location {
    margin-top: auto;
    padding-top: 28px;
}

.about-location-title {
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
}

.about-location-img-btn {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-location-img-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(20, 20, 10, 0.18);
}

.about-location-img-btn:focus-visible {
    outline: 2px solid var(--route-blue);
    outline-offset: 3px;
}

.about-location-img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 340px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(20, 20, 10, 0.12);
}

/* how it works */
.about-process {
    background: #fff;
    padding: 80px 24px;
}

.about-process-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.about-process-inner h2 {
    margin-bottom: 48px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-dark);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    text-align: left;
}

.process-step {
    padding: 26px 22px;
    border-radius: 14px;
    background: var(--cream);
}

.process-num {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--amber-dim);
}

.process-step h3 {
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

.process-step p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--slate);
}

/* bottom CTA banner */
.home-cta {
    background: var(--ink-soft);
    padding: 56px 24px;
}

.home-cta-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.home-cta-inner h2 {
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.home-cta-inner p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.home-cta .btn-solid {
    padding: 13px 24px;
    font-size: 14px;
}

@media (max-width: 760px) {
    .about-mission-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-hero h1 {
        font-size: 27px;
    }
}

@media (max-width: 640px) {
    .home-cta-inner {
        justify-content: center;
        text-align: center;
    }
}


/* ═══════════════════════════════════════
   7. JOBS VIEW
═══════════════════════════════════════ */

/* ── hero ── */
.jv-hero {
    overflow: hidden;
    padding: 70px 24px 80px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(242, 106, 27, 0.18), transparent 40%),
        radial-gradient(circle at 10% 10%, rgba(21, 84, 179, 0.35), transparent 45%),
        var(--ink);
}

.jv-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

/* ── map: fills the right column, capped so it never takes over the hero ── */
.jv-map {
    position: relative;
    min-width: 0;          /* lets the grid column shrink */
    overflow: hidden;      /* nothing can spill past the column */
}

/* faint grid behind the map */
.jv-map::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 100%);
            mask-image: radial-gradient(ellipse at center, #000 40%, transparent 100%);
    pointer-events: none;
}

.jv-map svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: 440px;     /* the size cap: raise for bigger, lower for smaller */
}

.jv-map text {
    fill: #fff;
    font-size: 8px;        /* SVG units, scales with the map */
    font-weight: 600;
    paint-order: stroke;
    stroke: rgba(10, 23, 48, 0.8);
    stroke-width: 2.5px;
}

.jv-hero h1 {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.12;
}

.jv-hero-text > p {
    max-width: 480px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.jv-stats {
    display: flex;
    gap: 36px;
    margin: 48px 0 28px;
}

.jv-stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jv-stats strong {
    font-family: var(--font-display);
    font-size: 28px;
}

.jv-stats span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.jv-checks {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.jv-checks li::before {
    content: "✓";
    margin-right: 8px;
    color: var(--orange);
}

@media (max-width: 960px) {
    .jv-hero-inner {
        grid-template-columns: 1fr;
    }

    .jv-hero h1 {
        font-size: 38px;
    }

    .jv-map {
        display: none;
    }
}

/* ── listings body ── */
.jv-body {
    background: var(--page-warm);
    padding: 44px 24px 90px;
}

.jv-body-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.jv-head {
    margin-bottom: 24px;
}

.jv-head h2 {
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--text-dark);
}

.jobs-filter-count {
    font-size: 14px;
    color: var(--slate);
}

.jv-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    align-items: start;
}

.jv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

@media (max-width: 960px) {
    .jv-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .jv-grid {
        grid-template-columns: 1fr;
    }

    .jv-stats {
        gap: 24px;
    }
}

/* ── filter sidebar ── */
.jv-filter {
    position: sticky;
    top: 90px;
    padding: 0 22px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

@media (max-width: 960px) {
    .jv-filter {
        position: static;
    }
}

.jv-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.jv-filter-head h3 {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-dark);
}

.jv-clear {
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background: rgba(242, 106, 27, 0.12);
    color: var(--orange);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
}

.jv-clear:hover {
    background: var(--orange);
    color: #fff;
}

.jv-filter-section {
    margin-bottom: 22px;
}

.jv-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-dark);
}

.jv-filter-label i {
    font-size: 12px;
    color: #d9a02b;
}

.jv-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.jv-options::-webkit-scrollbar { width: 5px; }
.jv-options::-webkit-scrollbar-track { background: transparent; }
.jv-options::-webkit-scrollbar-thumb { background: rgba(26, 32, 51, 0.16); border-radius: 10px; }

.jv-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 15px;
}

.jobs-filter-empty {
    font-size: 12.5px;
    font-style: italic;
    color: var(--slate);
}

/* checkbox rows (rendered by login.js) */
.jobs-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.15s ease;
}

.jobs-filter-checkbox:hover {
    background: rgba(21, 84, 179, 0.05);
}

.jobs-filter-checkbox:has(input:checked) {
    background: rgba(242, 106, 27, 0.08);
}

.jobs-filter-checkbox:has(input:checked) span:first-of-type {
    color: var(--orange);
    font-weight: 600;
}

.jobs-filter-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border: 1.5px solid rgba(26, 32, 51, 0.24);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.jobs-filter-checkbox input[type="checkbox"]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.1s ease;
}

.jobs-filter-checkbox input[type="checkbox"]:checked {
    background: var(--orange);
    border-color: var(--orange);
}

.jobs-filter-checkbox input[type="checkbox"]:checked::after {
    opacity: 1;
}

.jobs-filter-checkbox .count {
    margin-left: auto;
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 20px;
    background: rgba(26, 32, 51, 0.05);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--slate);
}

.jobs-filter-checkbox:has(input:checked) .count {
    background: rgba(242, 106, 27, 0.14);
    color: var(--orange);
}

/* ── loading skeleton + empty / error state ── */
.job-skeleton {
    height: 210px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--cream-dim) 25%, #fbf8f0 37%, var(--cream-dim) 63%);
    background-size: 400% 100%;
    animation: skeletonShine 1.4s ease infinite;
}

@keyframes skeletonShine {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.jobs-empty {
    grid-column: 1 / -1;
    padding: 50px 20px;
    text-align: center;
    color: #a89f8d;
}

.jobs-empty i {
    display: block;
    margin-bottom: 12px;
    font-size: 30px;
    color: #cbc0a8;
}

.jobs-empty p {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #7a7261;
}

.jobs-empty span {
    font-size: 13px;
}

/* ── job card (rendered by login.js) ── */
.job-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    /* fade-up reveal; login.js adds .in-view as the card enters the viewport */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.job-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

.job-card:hover {
    border-color: rgba(242, 106, 27, 0.45);
    box-shadow: 0 14px 30px rgba(20, 20, 10, 0.1);
}

.job-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.job-card-top-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.job-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--amber);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}

.job-card-client {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
}

.job-card-location {
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--slate);
}

.jv-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-dark);
}

.job-card-positions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jv-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
}

.jv-tag--closing { background: rgba(242, 106, 27, 0.14); color: #d4561a; }
.jv-tag--open    { background: rgba(34, 150, 88, 0.14);  color: #1c8a4f; }
.jv-tag--pos     { background: rgba(21, 84, 179, 0.1);   color: var(--route-blue); }

.jv-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--slate);
}

.jv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--slate);
}

.job-card-divider {
    margin-top: auto;
    border-top: 2px dashed rgba(26, 32, 51, 0.12);
}

.job-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.job-card-salary {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.job-card-salary-label {
    font-size: 12.5px;
    color: var(--slate);
}

.job-card-salary-range {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
}

.job-card-apply {
    padding: 12px 22px;
    border: none;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.job-card-apply:hover {
    background: #ff7a2b;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(242, 106, 27, 0.3);
}


/* ═══════════════════════════════════════
   8. JOB DETAILS MODAL
═══════════════════════════════════════ */
body.job-modal-open {
    overflow: hidden;
}

.job-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 23, 48, 0.6);
    backdrop-filter: blur(2px);
}

.job-modal-overlay.is-open {
    display: flex;
}

.job-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.job-modal-header {
    flex-shrink: 0;
    padding: 24px 28px 22px;
    background: var(--ink-soft);
}

.job-modal-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.job-modal-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--amber);
}

.job-modal-close {
    padding: 2px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}

.job-modal-close:hover {
    color: #fff;
}

.job-modal-company {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.job-modal-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 183, 3, 0.5);
    border-radius: 8px;
    color: var(--amber);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
}

.job-modal-client {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.job-modal-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.job-modal-location i {
    font-size: 11px;
    color: var(--crimson);
}

.job-modal-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.job-modal-position-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 20px;
    background: rgba(255, 183, 3, 0.14);
    color: var(--amber);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.job-modal-position-badge--empty {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}

.job-modal-body {
    flex: 1;
    padding: 22px 28px 6px;
    overflow-y: auto;
}

.job-modal-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 20px;
}

.job-modal-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.job-modal-stat-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--slate);
}

.job-modal-stat-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.job-modal-stat-value--salary {
    color: #1c8a4f;
}

.job-modal-divider {
    margin: 20px 0;
    border-top: 1.5px dashed rgba(26, 32, 51, 0.15);
}

.job-modal-section {
    margin-bottom: 22px;
}

.job-modal-section h3 {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-dark);
}

.job-modal-section ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 20px;
    list-style: disc;
}

.job-modal-section li {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--slate);
}

.job-modal-footer {
    flex-shrink: 0;
    padding: 18px 28px 24px;
    border-top: 1px solid rgba(26, 32, 51, 0.08);
}

.job-modal-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 8px;
    background: var(--amber);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.job-modal-apply:hover {
    background: #ffc22e;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255, 183, 3, 0.3);
}

@media (max-width: 560px) {
    .job-modal-header { padding: 22px 22px 20px; }
    .job-modal-body   { padding: 20px 22px 6px; }
    .job-modal-footer { padding: 16px 22px 20px; }
}


/* ═══════════════════════════════════════
   9. IMAGE LIGHTBOX (About → location map)
═══════════════════════════════════════ */
body.image-lightbox-open {
    overflow: hidden;
}

.image-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: rgba(10, 23, 48, 0.85);
    backdrop-filter: blur(3px);
}

.image-lightbox-overlay.is-open {
    display: flex;
}

.image-lightbox-img {
    max-width: min(90vw, 900px);
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: modalIn 0.25s ease;
}

.image-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 480px) {
    .image-lightbox-close {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }
}


/* ═══════════════════════════════════════
   10. LOGIN VIEW — boarding pass
═══════════════════════════════════════ */
.lg-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 70px);
    padding: 48px 20px 80px;
    background:
        radial-gradient(circle at 50% 0%, rgba(60, 100, 190, 0.25), transparent 55%),
        #172c5f;
}

/* decorative clouds / planes / trails (inline SVG) */
.lg-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.lg-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.lg-title {
    margin-bottom: 10px;
    text-align: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1px;
}

.lg-sub {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
}

/* ── ticket: form (left) + stub (right) ── */
.lg-ticket-wrap {
    margin-top: 28px;
    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.45));
}

.lg-ticket {
    --stub-w: 300px;
    display: grid;
    grid-template-columns: 1fr var(--stub-w);
    /* punch the two notches where the stub tears off */
    -webkit-mask:
        radial-gradient(circle 12px at calc(100% - var(--stub-w)) 0, #0000 97%, #000),
        radial-gradient(circle 12px at calc(100% - var(--stub-w)) 100%, #0000 97%, #000);
    -webkit-mask-composite: source-in;
            mask:
        radial-gradient(circle 12px at calc(100% - var(--stub-w)) 0, #0000 97%, #000),
        radial-gradient(circle 12px at calc(100% - var(--stub-w)) 100%, #0000 97%, #000);
            mask-composite: intersect;
}

/* left: form */
.lg-main {
    padding: 26px 40px 28px;
    border-radius: 22px 0 0 22px;
    background: #faf7f0;
}

.lg-pass-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.lg-pass-label,
.lg-pass-access {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lg-pass-label  { color: var(--orange); }
.lg-pass-access { color: var(--slate); }

.lg-heading {
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-dark);
}

.lg-subheading {
    margin-bottom: 16px;
    font-size: 14.5px;
    color: var(--slate);
}

.lg-field {
    margin-bottom: 16px;
}

.lg-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-dark);
}

.lg-field input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(26, 32, 51, 0.16);
    border-radius: 12px;
    background: #fff;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lg-field input:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(242, 106, 27, 0.14);
}

/* show / hide password */
.password-wrapper {
    position: relative;
}

.lg-field .password-wrapper input {
    padding-right: 52px;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--slate);
    font-size: 17px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 0.2s ease;
}

.toggle-password:hover {
    color: var(--route-blue);
}

.toggle-password:focus-visible {
    outline: 2px solid var(--route-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.toggle-password i {
    pointer-events: none;
}

.lg-row {
    margin: 2px 0 16px;
    text-align: right;
}

.lg-forgot {
    display: inline-block;
    color: var(--orange);
    font-size: 14px;
    font-weight: 600;
}

.lg-forgot:hover {
    text-decoration: underline;
}

.lg-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.lg-btn:hover {
    background: #ff7a2b;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(242, 106, 27, 0.3);
}

.lg-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* right: stub */
.lg-stub {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 26px 28px;
    border-left: 2px dashed rgba(26, 32, 51, 0.2);
    border-radius: 0 22px 22px 0;
    background: #f3eee2;
}

.st-lbl {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5d6b8a;
}

/* postmark waves, running off the right edge */
.st-waves {
    position: absolute;
    top: 24px;
    right: 0;
    width: 86px;
    height: auto;
    fill: none;
    stroke: #2c4f9e;
    stroke-width: 1.3;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* the stamp */
.st-stamp {
    position: absolute;
    top: 14px;
    right: 22px;
    width: 116px;
    height: 116px;
    opacity: 0.92;
    transform: rotate(-8deg);
    mix-blend-mode: multiply;
}

.st-ring-thick { fill: none; stroke: #2c4f9e; stroke-width: 2.6; }
.st-ring-thin  { fill: none; stroke: #2c4f9e; stroke-width: 1; }

.st-text-top,
.st-text-bot {
    fill: #2c4f9e;
    font-family: var(--font-display);
    font-weight: 700;
}

.st-text-top { font-size: 14px;  letter-spacing: 2.5px; }
.st-text-bot { font-size: 7.5px; letter-spacing: 1.2px; }

/* passenger */
.st-passenger {
    position: relative;
    z-index: 1;
    width: 52%;
}

.st-name {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.3px;
    color: #14285a;
}

.st-rule {
    margin-top: 8px;
    border-top: 1.5px solid rgba(20, 40, 90, 0.25);
}

/* FROM  ✈  TO — side columns hug MNL / KSA so the plane centres in the gap */
.st-route {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-top: 100px;
}

.st-leg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-code {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: #14285a;
}

.st-city {
    font-size: 12.5px;
    color: #5d6b8a;
}

.st-flight {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 4px;
    color: #e8601c;
    font-size: 14px;
}

.st-flight::before,
.st-flight::after {
    content: '';
    width: 9px;
    border-top: 2px dashed #e8601c;
}

/* flight / gate / seat */
.st-details {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr;
    margin-top: 30px;
}

.st-details strong {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 16px;
    color: #14285a;
}

.st-details-seat {
    padding-left: 14px;
    border-left: 1.5px solid rgba(20, 40, 90, 0.22);
}

.st-barcode {
    height: 58px;
    margin-top: auto;
    background: repeating-linear-gradient(90deg,
        #14285a 0 2px,  transparent 2px 4px,
        #14285a 4px 7px, transparent 7px 9px,
        #14285a 9px 10px, transparent 10px 13px,
        #14285a 13px 16px, transparent 16px 17px,
        #14285a 17px 18px, transparent 18px 20px);
}

/* mobile: stub drops below the form */
@media (max-width: 860px) {
    .lg-title {
        font-size: 34px;
    }

    .lg-ticket {
        grid-template-columns: 1fr;
        -webkit-mask: none;
                mask: none;
    }

    .lg-main {
        padding: 24px 22px;
        border-radius: 22px 22px 0 0;
    }

    .lg-stub {
        padding: 24px 22px;
        border-left: none;
        border-top: 2px dashed rgba(26, 32, 51, 0.2);
        border-radius: 0 0 22px 22px;
    }

    .st-route   { margin-top: 110px; }
    .st-barcode { margin-top: 40px; }
}


/* ═══════════════════════════════════════
   11. LOGIN NOTICES (inline error + lockout timer)
═══════════════════════════════════════ */
.login-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    animation: noticeIn 0.25s ease;
}

@keyframes noticeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-notice--error {
    background: rgba(193, 68, 46, 0.09);
    border-color: rgba(193, 68, 46, 0.25);
    color: #8f2e1c;
}

.login-notice--warning {
    background: rgba(255, 183, 3, 0.14);
    border-color: rgba(255, 183, 3, 0.4);
    color: #8a5f00;
}

.login-notice-icon {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 14px;
}

.login-notice-text strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.1px;
}

.login-notice-close {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px;
    border: none;
    background: none;
    color: inherit;
    font-size: 13px;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.login-notice-close:hover {
    opacity: 1;
}

.login-notice-text {
    flex: 1;
    min-width: 0;
}

/* countdown lives inside the notice */

.login-notice-timer-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums; /* digits don't jiggle as they change */
}

.lg-field input:disabled,
.lg-btn:disabled {
    cursor: not-allowed;
}

.lg-field input:disabled {
    opacity: 0.6;
}


/* ═══════════════════════════════════════
   12. FORGOT-PASSWORD MODAL — glass, two panels
       [ form card | "Need Help?" ]
═══════════════════════════════════════ */

/* blurred page behind the modal */
.fp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 14, 40, 0.42);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
            backdrop-filter: blur(16px) saturate(125%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fp-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* outer glass card */
.fp-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    width: 100%;
    max-width: 980px;
    max-height: 92vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 32px;
    background: linear-gradient(160deg, rgba(110, 130, 185, 0.22), rgba(50, 58, 105, 0.22));
    -webkit-backdrop-filter: blur(26px) saturate(140%);
            backdrop-filter: blur(26px) saturate(140%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #fff;
    text-align: left;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s ease;
}

.fp-overlay.is-open .fp-card {
    transform: translateY(0) scale(1);
}

.fp-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fp-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── left: inner glass card holding the steps ── */
.fp-form-side {
    margin: 22px;
    padding: 38px 36px 34px;
    border: 1px solid rgba(140, 178, 255, 0.45);
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(135, 165, 225, 0.3) 0%, rgba(70, 80, 135, 0.24) 55%, rgba(50, 55, 100, 0.28) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 40px rgba(120, 160, 255, 0.06);
}

/* progress:  ① Email —— ② Verify —— ③ Reset */
.fp-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.fp-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

.fp-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    font-size: 15px;
    transition: background 0.2s ease, color 0.2s ease;
}

.fp-step.is-active,
.fp-step.is-done {
    color: #fff;
}

.fp-step.is-active .fp-step-num,
.fp-step.is-done .fp-step-num {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
    box-shadow: 0 0 18px rgba(242, 106, 27, 0.6);
}

.fp-step-line {
    width: 34px;
    height: 2px;
    background: rgba(255, 255, 255, 0.28);
}

.fp-step.is-active + .fp-step-line,
.fp-step.is-done + .fp-step-line {
    background: var(--orange);
}

/* panels — one visible at a time */
.fp-panel {
    display: none;
}

.fp-panel.is-active {
    display: block;
    animation: fpFadeIn 0.2s ease;
}

@keyframes fpFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pass-eyebrow {
    display: block;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--orange);
}

.fp-panel h2 {
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;
}

.fp-sub {
    margin-bottom: 28px;
    font-size: 16.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

.fp-sub strong {
    font-weight: 600;
    color: #fff;
}

/* alerts */
.fp-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.4;
}

.fp-alert--error {
    background: rgba(229, 72, 77, 0.18);
    border-color: rgba(229, 72, 77, 0.3);
    color: #ffb0b3;
}

.fp-alert--success {
    background: rgba(31, 169, 113, 0.18);
    border-color: rgba(31, 169, 113, 0.3);
    color: #7fe3b8;
}

/* inputs — glass pills */
.fp-panel .form-group {
    margin-bottom: 16px;
}

.fp-panel .form-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

.fp-panel input[type="email"],
.fp-panel input[type="password"],
.fp-panel input[type="text"] {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    caret-color: var(--orange);
    font-family: var(--font-body);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.fp-panel input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.fp-panel input:focus {
    border-color: rgba(120, 170, 255, 0.95);
    background: rgba(255, 255, 255, 0.13);
    box-shadow:
        0 0 0 3px rgba(100, 150, 255, 0.22),
        0 0 22px rgba(100, 150, 255, 0.4);
}

.fp-panel .password-wrapper input {
    padding-right: 52px;
}

.fp-panel .toggle-password {
    color: rgba(255, 255, 255, 0.6);
}

.fp-panel .toggle-password:hover {
    color: #fff;
}

/* primary button — orange pill with glow */
.fp-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 60px;
    margin-top: 6px;
    border: none;
    border-radius: 999px;
    background: #f97316;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(249, 115, 22, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fp-submit-btn:hover {
    background: #ff8226;
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(249, 115, 22, 0.55);
}

.fp-submit-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.fp-spinner {
    font-size: 15px;
}

/* step 1 — secondary links */
.fp-alt-links {
    margin-top: 20px;
    text-align: center;
}

.fp-alt-back {
    display: block;
    margin: 0 auto 12px;
    font-size: 16.5px;
    font-weight: 500;
}

.fp-alt-links p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
}

.fp-alt-links a {
    color: #fff;
    font-weight: 500;
}

.fp-alt-links a:hover {
    text-decoration: underline;
}

/* step 2 — OTP */
.fp-expiry {
    margin-bottom: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.fp-expiry.is-urgent {
    color: #ff6b6b;
}

.fp-otp-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.fp-panel .fp-otp-digit {
    width: 52px;
    height: 62px;
    padding: 0;
    border-radius: 16px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}

.fp-panel .fp-otp-digit.fp-otp-error {
    border-color: #ff6b6b;
}

.fp-resend {
    margin: 18px 0 6px;
    text-align: center;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.6);
}

.fp-resend-cooldown {
    font-variant-numeric: tabular-nums;
}

.fp-link-btn {
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.fp-link-btn:hover {
    text-decoration: underline;
}

.fp-link-btn[disabled] {
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    text-decoration: none;
}

.fp-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
}

/* step 3 — password rules */
.fp-rules {
    list-style: none;
    margin: 6px 0 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

.fp-rules li {
    margin: 2px 0;
}

.fp-rules li.fp-rule-met {
    color: #4fd39a;
}

/* step 4 — success */
#fpPanel4 {
    text-align: center;
}

.fp-success-icon {
    margin-bottom: 10px;
    font-size: 46px;
    color: #4fd39a;
}

/* ── right: help panel ── */
.fp-help {
    display: flex;
    flex-direction: column;
    padding: 46px 42px 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.fp-help h3 {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;
}

.fp-help-support {
    margin-bottom: 26px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
}

.fp-help-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 48px;
}

.fp-help-links a {
    width: fit-content;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.15s ease;
}

.fp-help-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.fp-applicant {
    padding: 22px 26px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 30px rgba(0, 0, 0, 0.18);
}

.fp-applicant-label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.fp-applicant-name,
.fp-applicant-email {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fp-applicant-name {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #fff;
}

.fp-applicant-email {
    margin-top: 4px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.75);
}

/* tablet / mobile: help panel drops under the form */
@media (max-width: 820px) {
    .fp-card {
        grid-template-columns: 1fr;
        max-width: 470px;
    }

    .fp-form-side {
        margin: 14px;
        padding: 30px 22px 26px;
    }

    .fp-help {
        padding: 28px 24px 30px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .fp-help h3          { font-size: 28px; }
    .fp-help-links       { margin-bottom: 26px; }
    .fp-applicant-name   { font-size: 24px; }
    .fp-applicant-email  { font-size: 17px; }
}

@media (max-width: 480px) {
    .fp-panel h2 { font-size: 26px; }

    .fp-progress { gap: 6px; }
    .fp-step     { gap: 6px; font-size: 13px; }
    .fp-step-num { width: 30px; height: 30px; font-size: 13px; }
    .fp-step-line { width: 16px; }

    .fp-otp-group { gap: 6px; }
    .fp-panel .fp-otp-digit { width: 42px; height: 54px; font-size: 20px; }
}


/* ═══════════════════════════════════════
   13. REDUCED MOTION
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .about-hero,
    .login-notice,
    .job-modal,
    .image-lightbox-img,
    .fp-panel.is-active,
    .job-skeleton {
        animation: none;
    }

    .job-card {
        transition: none;
    }
}

/* login view: hide the header Log In button but keep its space,
   so Home → Contact Us don't shift */
body.is-login-view .site-header-actions .btn-outline[data-view="login"] {
    visibility: hidden;
    pointer-events: none;
}

/* inside the mobile hamburger menu there's no layout to protect,
   so remove it fully */
@media (max-width: 860px) {
    body.is-login-view .nav-auth .btn-outline[data-view="login"] {
        display: none;
    }
}