/* ==========================================================================
   Duque Workforce Connect — Design System v2
   Retheme pulled directly from the wordmark: a near-black backdrop, a
   metallic gold that carries the brand (buttons, headings, dividers), and
   the maple-leaf red used sparingly as a signal accent — never as a big
   flat block of color. Warm ink instead of pure white keeps the dark
   surfaces feeling premium rather than "default dark mode".
   ========================================================================== */

:root {
    /* Actual rendered height of the fixed nav at each breakpoint (measured,
       not guessed) — #home uses this to clear the nav instead of sitting
       underneath it. Kept as one variable so the nav and hero never drift
       out of sync again if the logo/padding ever changes. */
    --nav-h: 62px;

    /* --- Backdrop, pulled from the logo's charcoal-black canvas --- */
    --bg-void: #0a0a0b;
    --dark: #0c0c0e;
    --dark-soft: #1a1a1d;
    --light: #131316;
    --surface: #16161a;
    --surface-alt: #1e1e23;
    --hairline: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.09);
    --input-border: rgba(255, 255, 255, 0.22);

    /* --- Type --- */
    --ink: #f3f1ea;
    --text-muted: #2c2c2c;
    --white: #ffffff;

    /* --- Gold, the dominant brand metal from "WORKFORCE CONNECT" --- */
    --gold: #c9a227;
    --gold-light: #f0d78c;
    --gold-dark: #8f701c;

    /* --- Maple red, the leaf accent — used as a spark, not a field --- */
    --primary: #c8102e;
    --primary-dark: #86081f;
    --primary-light: #ff4d5e;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 28px 60px -12px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 12px 26px rgba(200, 16, 46, 0.28);
    --shadow-gold: 0 12px 26px rgba(201, 162, 39, 0.22);

    --font-display: "Poppins", "Segoe UI", sans-serif;
    --font-body: "Inter", "Roboto", sans-serif;
}

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

html {
    font-size: 90%;
}

/* Scale down the rem-based type/spacing scale a touch on smaller phones so
   nothing feels cramped or oversized — most of this design system is
   rem-based, so this one lever tunes the whole site at once. */
@media (max-width: 480px) {
    html { font-size: 93.75%; } /* ~15px base */
}

@media (max-width: 360px) {
    html { font-size: 87.5%; } /* ~14px base */
}

body {
    font-family: var(--font-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
   -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */

    /* --- Retheme: everything below is a white palette, EXCEPT nav,
       footer, the hero, and the two dark accent bands (stats band +
       benefit CTA), which restore the original dark values further
       down this file. Because these are CSS custom properties, every
       component (cards, forms, modals, job listings, etc.) picks up
       the new light values automatically — nothing else needs editing. --- */
    --bg-void: #ffffff;
    --light: #f7f5f1;
    --surface: #ffffff;
    --surface-alt: #f2efe8;
    --hairline: rgba(20, 16, 10, 0.08);
    --border: rgba(20, 16, 10, 0.1);
    --input-border: rgba(20, 16, 10, 0.2);
    --ink: #1a1a1d;
    --text-muted: #6b6b74;

    color: var(--ink);
    background: var(--bg-void);
}

img, svg {
   max-width: 100%;
   height: auto;
   -webkit-user-drag: none;  /* Safari and Chrome */
   -khtml-user-drag: none;   /* Konqueror HTML */
   -moz-user-drag: none;     /* Firefox */
   -o-user-drag: none;       /* Opera */
   -user-drag: none;          /* Standard */
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

section[id] {
    scroll-margin-top: 64px;
}

/* ==========================================================================
   Shared utilities
   ========================================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
    border-radius: 2px;
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px auto;
}

.section-head.left {
    text-align: left;
    margin: 0 0 40px 0;
}

.section-head h2 {
    margin-bottom: 14px;
}

.section-head p {
    color: var(--text-muted);
    font-size: 1.08rem;
}

/* Content is visible by default (progressive enhancement). The fade-in-on-
   scroll effect below only ever applies once JS successfully runs and adds
   the "js" class to <html> (see the inline script in <head>). This means a
   blocked/broken/slow-loading script can never leave section content
   permanently invisible. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

::selection {
    background: rgba(201, 162, 39, 0.35);
    color: var(--white);
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--gold-dark), var(--gold));
    border-radius: 10px;
}

/* --- Signature: a faint gold ring, echoing the circular crest in the
   logo, used as ambient atmosphere behind key section headers. --- */
.gold-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.16);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Ambient section glow — reusable animated backdrop
   Two soft, blurred color fields (brand gold + maple red) that drift
   slowly in a loop. Dropped in as the first child of a section so every
   major section of the site — hero, about, steps, contact, footer —
   shares one consistent, "alive" atmosphere instead of flat panels.
   Sized in vmin so it scales cleanly at any viewport width.
   ========================================================================== */
.ambient-glow {
    --glow-opacity: 0.14;
    --glow-size: 46vmin;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.ambient-glow::before,
.ambient-glow::after {
    content: "";
    position: absolute;
    width: var(--glow-size);
    height: var(--glow-size);
    border-radius: 50%;
    filter: blur(70px);
    opacity: var(--glow-opacity);
    will-change: transform;
}

.ambient-glow::before {
    background: var(--gold);
    top: -14%;
    left: -8%;
    animation: glowDriftA 24s ease-in-out infinite;
}

.ambient-glow::after {
    background: var(--primary);
    bottom: -16%;
    right: -8%;
    animation: glowDriftB 28s ease-in-out infinite;
}

/* Bolder variant for dark panels (hero, footer) where the glow can run
   more vivid without hurting text contrast. */
.ambient-glow--bold {
    --glow-opacity: 0.32;
    --glow-size: 52vmin;
}

@keyframes glowDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(6vmin, 5vmin) scale(1.15); }
}

@keyframes glowDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-5vmin, -6vmin) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-glow::before,
    .ambient-glow::after { animation: none; }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

nav {
    position: fixed;
    top: 0;
    width: 100%;
    /* Same charcoal-black as the logo's own canvas, so the wordmark sits
       on the nav as if it were cut straight from the artwork. */
    /* background: rgb(10, 10, 11); */
    background: #111113;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    padding: 8px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease, border-color 0.35s ease;

    /* Nav stays on the original dark palette regardless of the body retheme above */
    --ink: #f3f1ea;
    --text-muted: #9b9ba3;
    --border: rgba(255, 255, 255, 0.09);
    --input-border: rgba(255, 255, 255, 0.22);
    --hairline: rgba(255, 255, 255, 0.09);
    --light: #131316;
    --surface: #16161a;
    --surface-alt: #1e1e23;
    --bg-void: #0a0a0b;
}

nav.scrolled {
    background: #0a0a0b;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    border-bottom-color: var(--hairline);
    padding: 6px 5%;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Minimalist nav-integrated email button --- */
.nav-mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    color: var(--ink);
    flex-shrink: 0;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.nav-mail:hover {
    border-color: var(--gold);
    color: var(--gold-light);
    background: rgba(201, 162, 39, 0.08);
    transform: translateY(-2px);
}

.nav-mail i { font-size: 0.85rem; }

nav a {
    margin-left: 22px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.88rem;
    transition: color 0.3s;
    position: relative;
    padding: 4px 0;
}

nav a:not(.btn):not(.nav-mail)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--primary));
    border-radius: 2px;
    transition: width 0.3s ease;
}

nav a:not(.btn):not(.nav-mail):hover::after,
nav a:not(.btn):not(.nav-mail).active::after {
    width: 100%;
}

nav a:hover, .btn a:hover {
    color: var(--gold-light);
}

/* --- Logo + wordmark lockup --- */
.logo-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    margin-left: 0 !important;
    min-width: 0;
    flex: 1 1 auto;
}

.nav-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    transition: height 0.35s ease, transform 0.3s ease;
    filter: drop-shadow(0 4px 14px rgba(201, 162, 39, 0.25));
}

nav.scrolled .nav-logo {
    height: 32px;
}

.logo-link:hover .nav-logo {
    transform: scale(1.04);
}

.brand-lockup {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
}

.brand-name {
    /* Uses the sitewide display font (Poppins) — the same face as every
       heading on the site — so the wordmark reads as part of one
       consistent type system instead of a mismatched one-off. */
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    background: linear-gradient(120deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 0.35s ease;
}

/* Tagline dropped from the nav itself for a leaner, single-line lockup —
   "Connecting People. Creating Opportunities." still lives in the hero
   copy, so the message isn't lost, just not duplicated in the header. */
.brand-tagline {
    display: none;
}

nav.scrolled .brand-name { font-size: 0.95rem; }

@media (max-width: 480px) {
    .brand-name { font-size: 0.92rem; }
    .nav-logo { height: 32px; }
    nav.scrolled .nav-logo { height: 28px; }
}

@media (max-width: 380px) {
    .brand-name { font-size: 0.85rem; }
    .nav-logo { height: 28px; }
    nav.scrolled .nav-logo { height: 26px; }
}

/* --nav-h tracks the nav's real rendered height at each width — matched
   to the same breakpoints the nav/logo itself already uses above, so the
   two never fall out of sync. */
@media (max-width: 768px) {
    :root { --nav-h: 58px; }
}
@media (max-width: 480px) {
    :root { --nav-h: 52px; }
}
@media (max-width: 380px) {
    :root { --nav-h: 48px; }
}

/* --- Mobile nav toggle --- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 24px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.nav-toggle span {
    display: block;
    height: 2.5px;
    width: 100%;
    background: var(--gold-light);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
    color: #14100a;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-gold);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(201, 162, 39, 0.35);
    filter: brightness(1.05);
}

.btn:active {
    transform: translateY(-1px);
}

.head-btn2 {
    padding: 8px 20px;
    font-size: 0.8rem;
}

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--border);
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--surface-alt);
    color: var(--white);
    border-color: var(--gold);
}

.btn-ghost-gold {
    background: transparent;
    border: 1.5px solid var(--gold);
    color: var(--gold);
    box-shadow: none;
}

.btn-ghost-gold:hover {
    background: var(--gold);
    color: var(--white);
    box-shadow: 0 10px 20px rgba(201, 162, 39, 0.25);
}

/* --- CTA Button Group with Indicators ---
   Minimalist pass: the old version hardcoded a 30px left margin on the
   label, which threw off the centering above the button. Indicators are
   now genuinely centered with no magic-number offsets, and sized down
   so the pair sits comfortably in a compact nav. */
.cta-indicator-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 18px;
}

.cta-wrapper, .cta-wrapper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-indicator {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

/* Subtle design polish: illuminate the indicator when hovering its matching button */
.cta-wrapper:hover .cta-indicator,
.cta-wrapper-step:hover {
    color: var(--gold);
}

/* Responsive alignment for mobile layouts */
@media (max-width: 480px) {
    .cta-indicator-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px; /* Snug width ceiling on mobile devices */
        margin: 12px auto 0;
    }

    .cta-indicator {
        text-align: center;
    }

    .cta-wrapper {
        width: 100%;
    }

    .cta-wrapper .btn {
        width: 100%; /* Full width buttons for better thumb targets */
    }
}

/* ==========================================================================
   Sections (generic)
   ========================================================================== */

section {
    padding: 130px 10%;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h2 {
    font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.6rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

#about, #steps, #careers {
    padding: 3% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: #e3dede76;
}

/* ==========================================================================
   Hero
   ========================================================================== */

#home {
    position: relative;
    /* min-height (not height) + top padding for the fixed nav — the hero
       used to sit at y:0 same as the nav itself, so its topmost content
       (the eyebrow pill) was rendering partly or fully underneath the
       nav bar, worst on mobile where it was hidden completely. min-height
       lets the section grow if the padding pushes content past 100vh,
       instead of the old fixed height clipping/squishing it. */
    min-height: 100vh;
    padding-top: var(--nav-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    overflow: hidden;
    background-color: #e3dede76;

    /* Hero keeps the original dark/photo treatment regardless of the body retheme above */
    --ink: #0a0a0b;
    --text-muted: #9b9ba3;
}

/* Ambient gold rings, echoing the crest that frames the maple leaf in
   the logo — quiet motion behind the copy, never competing with it. */
#home::before,
#home::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.14);
    z-index: 1;
    pointer-events: none;
}

#home::before {
    width: 720px;
    height: 720px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ringPulse 10s ease-in-out infinite;
}

#home::after {
    width: 520px;
    height: 520px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(200, 16, 46, 0.12);
    animation: ringPulse 10s ease-in-out infinite 1.2s;
}

@keyframes ringPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    #home::before, #home::after { animation: none; }
}

/* --- Hero split layout (Toptal-style: copy on the left, live
   "Top Hires" showcase on the right) --- */
.hero-grid {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 40px;
}

.hero-content {
    max-width: 640px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* background: rgba(255, 255, 255, 0.08); */
    background: #0a0a0bda;
    /* border: 1px solid rgba(255, 255, 255, 0.18); */
    border: 1px solid var(--gold);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-light);
    backdrop-filter: blur(6px);
    margin-bottom: 28px;
}

.hero-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-light);
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

#home h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.44rem + 2.4vw, 3.6rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
    min-height: 100px;
    letter-spacing: -0.02em;
}

.typewriter {
    background: linear-gradient(100deg, var(--ink) 30%, var(--gold-light) 50%, var(--dark-soft) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 5s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 0% 0; }
    100% { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .typewriter { animation: none; }
}

.hero-subtext {
    font-size: 1.15rem;
    margin-bottom: 1.75rem;
    line-height: 1.75;
    /* color: #d4d4d8; */
    color: var(--dark-soft);
    font-weight: 400;
    max-width: 560px;
}

/* --- Hero highlights: "For Employers" / "For Workers" mini-cards,
   replacing the old inline <br><strong> run-on paragraph --- */
.hero-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    margin-bottom: 2.25rem;
}

.hero-highlight {
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    background: rgba(0, 0, 0, 0.02);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.hero-highlight:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.hero-highlight-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--primary);
    margin-bottom: 8px;
}

.hero-highlight-tag i {
    color: var(--gold);
    font-size: 0.8rem;
}

.hero-highlight p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.hero-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* --- Trust strip: stacked avatars + placement count, under the CTAs --- */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
}

.hero-trust-avatars {
    display: flex;
}

.hero-trust-avatars img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-void, #0a0a0b);
    margin-left: -10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-trust-avatars img:first-child { margin-left: 0; }

.hero-trust span {
    font-size: 0.85rem;
    color: var(--ink);
    font-weight: 500;
}

/* --- Stats strip under hero copy --- */
.hero-stats {
    display: flex;
    gap: 48px;
    margin-top: 64px;
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    flex-wrap: wrap;
    justify-content: center;
}

.hero-stat {
    text-align: center;
    min-width: 100px;
}

.hero-stat .num {
    display: block;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(135deg, var(--white), var(--gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-stat .label {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Hero now uses the shared .ambient-glow component (class
   "ambient-glow ambient-glow--bold" in the markup) instead of a
   dedicated static gradient, so its animated backdrop matches every
   other section on the page. */

/* --- "Top Hires" scrolling showcase --- */
.hero-showcase {
    position: relative;
    height: 620px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.showcase-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light);
    /* background: rgba(201, 162, 39, 0.1); */
    background: #0a0a0bda;
    border: 1px solid var(--gold);
    padding: 6px 14px;
    border-radius: 50px;
    align-self: center;
}

.showcase-label i { font-size: 0.7rem; }

.showcase-columns {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 18px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.showcase-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 230px;
    will-change: transform;
}

.col-up { animation: scrollUp 32s linear infinite; }
.col-down { animation: scrollDown 36s linear infinite; }
.col-up-slow { animation: scrollUp 42s linear infinite; }

/* Third column tucked in on smaller desktop widths, shown from ~1200px up */
.showcase-col.col-up-slow { display: none; }

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

.hero-showcase:hover .showcase-col {
    animation-play-state: paused;
}

.hire-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.hire-card:hover {
    transform: translateX(-4px);
    border-color: rgba(201, 162, 39, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.hire-card img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--gold);
}

.hire-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hire-name {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.random_flag {
    margin-left: 6px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.hire-role {
    font-size: 0.74rem;
    /* color: var(--text-muted); */
    color: #0a0a0bd0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hire-badge {
    margin-left: auto;
    color: var(--gold);
    font-size: 0.95rem;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .showcase-col { animation: none; }
}

@media (min-width: 1200px) {
    .showcase-col.col-up-slow { display: flex; }
}

.penType {
    display: inline-block;
    color: var(--gold-light);
    margin-left: 4px;
    animation: blink 0.8s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- Scroll cue --- */
.scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* color: rgba(255, 255, 255, 0.7); */
    color: var(--dark-soft);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: floatCue 2.4s ease-in-out infinite;
}

.scroll-cue i {
    font-size: 0.9rem;
}

@keyframes floatCue {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* Hero responsive sizing is consolidated in the Responsive section near the
   bottom of this file, using clamp() so it scales smoothly at any width
   rather than jumping at a couple of hard breakpoints. */

/* ==========================================================================
   About
   ========================================================================== */

.about-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px auto;
}

.about-intro p {
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.about-intro p:last-child {
    margin-bottom: 0;
}

.about-details {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: center;
    margin-bottom: 70px;
}

.about-copy { flex: 1; min-width: 300px; }

.about-copy h3 {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-copy h3 i {
    font-size: 1.1rem;
    color: var(--gold);
}

.about-copy p { margin-bottom: 26px; color: var(--text-muted); }

.about-media { flex: 1; min-width: 300px; position: relative; }

.about-media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
    max-height: 420px;
    display: block;
}

.about-media::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    width: 90px;
    height: 90px;
    border-top: 3px solid var(--gold);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-lg) 0 0 0;
    z-index: -1;
}

.about-media::after {
    content: "";
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 90px;
    height: 90px;
    border-bottom: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
    border-radius: 0 0 var(--radius-lg) 0;
    z-index: -1;
}

/* --- Stats band --- */
.stats-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
    border-radius: var(--radius-lg);
    padding: 44px 32px;
    margin-bottom: 70px;
    box-shadow: var(--shadow-lg);
    --text-muted: #9b9ba3; /* stays legible against this dark accent card */
}

.stat-item {
    text-align: center;
    color: var(--white);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.stat-item:last-child { border-right: none; }

.stat-item .num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-light), var(--primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.stat-item .label {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .stats-band { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }

    
.cta-indicator {
        margin-left: 0; /* Reset left margin for mobile */
        text-align: center; /* Center-align indicator text above button */
    }
}


/* --- Value cards (icon based, replaces stock photos) --- */
.value-card {
    background: var(--surface);
    padding: 2.2rem 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.value-card:hover::before { transform: scaleX(1); }

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(201, 162, 39, 0.3);
    border-color: transparent;
}

.value-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.08), rgba(201, 162, 39, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary);
    font-size: 1.4rem;
}

.value-card h3 {
    color: var(--ink);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.value-card p { color: var(--text-muted); font-size: 0.96rem; }

/* ==========================================================================
   Benefits
   ========================================================================== */

#benefits { background: var(--light); position: relative; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    width: 100%;
}

.hover-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
}

.hover-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.hover-card .card-media {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.hover-card .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hover-card:hover .card-media img {
    transform: scale(1.08);
}

.hover-card .card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.55));
}

.card-badge {
    position: absolute;
    bottom: 12px;
    left: 14px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.05rem;
    box-shadow: 0 6px 14px rgba(200, 16, 46, 0.35);
    border: 2px solid var(--white);
}

.hover-card .card-body { padding: 1.6rem 1.7rem 1.9rem; }

.hover-card h3 {
    color: var(--ink);
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.hover-card p { color: var(--text-muted); font-size: 0.96rem; }

.hover-card ul { list-style: none; padding-left: 0; }

/* ==========================================================================
   Step timelines (Application Journey / Finding Talent)
   Image-free, numbered-marker timelines. The "left"/"right" variants push
   the whole column toward that side of the section and mirror which side
   the connecting line + markers sit on, for an editorial, asymmetric feel.
   ========================================================================== */

.timeline {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
}

.timeline--left { margin-right: auto; }
.timeline--right { margin-left: auto; }

/* Two-column wrapper: applicant steps on the left, employer steps on the
   right, each under its own short title, side by side under one shared
   "How It Works" heading. */
.steps-columns {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
}

.steps-column {
    flex: 1 1 0;
    min-width: 0;
}

.steps-column + .steps-column {
    margin-left: 48px;
    padding-left: 48px;
    border-left: 1px solid var(--border);
}

.steps-column-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 12px;
    gap: 10px;
    margin-bottom: 30px;
}

.steps-column-title {
    flex: 1 1 auto;
    min-width: 0;
}

.steps-column-head i {
    color: var(--gold);
    font-size: 1.05rem;
}

.steps-column-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Inside a column, the timeline should just fill it rather than trying
   to auto-margin itself toward a side of the whole section. */
.steps-column .timeline {
    max-width: none;
    margin: 0;
}

@media (max-width: 900px) {
    .steps-columns { flex-direction: column; gap: 60px; }
    .steps-column + .steps-column {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding-bottom: 42px;
}

.timeline--right .timeline-item { flex-direction: row-reverse; }

.timeline-item:last-child { padding-bottom: 0; }

.timeline-marker {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow-primary), 0 0 0 4px rgba(200, 16, 46, 0.08);
    border: 3px solid var(--white);
}

.timeline-marker::after {
    content: "";
    position: absolute;
    top: 62px;
    bottom: -42px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(var(--border), var(--gold-light));
}

.timeline-item:last-child .timeline-marker::after { display: none; }

.timeline-content {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.7rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(201, 162, 39, 0.4);
}

.timeline-content h3 {
    color: var(--ink);
    margin-bottom: 8px;
    font-size: 1.15rem;
}

.timeline-content p {
    color: var(--text-muted);
    font-size: 0.96rem;
}

/* Directional scroll-reveal: left timeline slides in from the left,
   right timeline slides in from the right, each item staggered slightly
   after the one before it via the inline --i custom property. */
.js .timeline--left .timeline-item[data-reveal] {
    transform: translateX(-36px);
    transition-delay: calc(var(--i, 0) * 0.12s);
}

.js .timeline--right .timeline-item[data-reveal] {
    transform: translateX(36px);
    transition-delay: calc(var(--i, 0) * 0.12s);
}

.js .timeline-item[data-reveal].is-visible {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .timeline-item[data-reveal] { transition-delay: 0s; }
}

@media (max-width: 680px) {
    .timeline--left, .timeline--right {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }
    .timeline--right .timeline-item { flex-direction: row; }
    .timeline-item { gap: 18px; padding-bottom: 34px; }
    .timeline-marker { width: 46px; height: 46px; font-size: 1rem; }
    .timeline-marker::after { top: 52px; bottom: -34px; }
    .timeline-content { padding: 1.2rem 1.3rem; }
}

/* --- Bonus CTA block --- */
.benefit-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-top: 64px;
    background: linear-gradient(120deg, var(--dark) 0%, var(--dark-soft) 100%);
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    color: var(--white);
    --text-muted: #9b9ba3; /* stays legible against this dark accent card */
}

.benefit-cta::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.25), transparent 70%);
}

.benefit-cta-copy { flex: 1; min-width: 300px; position: relative; z-index: 1; }

.benefit-cta-copy h3 { color: var(--white); margin-bottom: 15px; font-size: 1.75rem; }
.benefit-cta-copy p { margin-bottom: 24px; color: var(--text-muted); }

.benefit-cta-media { flex: 1; min-width: 300px; position: relative; z-index: 1; }

.benefit-cta-media img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    max-height: 250px;
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Careers Board
   ========================================================================== */

.careers-board { background: var(--surface); }

.careers-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}

.careers-search {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--light);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
}

.careers-search i { color: var(--text-muted); }

.careers-search input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 0.95rem;
    outline: none;
    margin: 0;
    padding: 0;
}

.careers-count {
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.careers-count strong { color: var(--ink); }

.board-container {
    display: flex;
    justify-content: center;
}

/* Fixed-width, centered job listings — sidebar filters removed */
.job-list {
    width: 100%;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.job-card-list {
    background: var(--surface);
    padding: 22px 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 18px;
}

.job-card-list:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    transform: translateY(-3px);
}

.job-avatar {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--gold));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
}

.job-card-body { flex: 1; min-width: 0; }

.job-card-list h3 {
    color: var(--ink);
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.company-name {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.job-actions {
    position: absolute;
    top: 20px;
    right: 22px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.job-card-list:hover .job-actions { opacity: 1; transform: translateY(0); }

.tag {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tag.salary { background: var(--light); color: var(--ink); }
.tag.type { background: rgba(56, 189, 248, 0.14); color: #7dd3fc; }
.tag.urgent { background: rgba(255, 77, 94, 0.14); color: var(--primary-light); }

.job-snippets {
    list-style: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.94rem;
}

.job-snippets li {
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
}

.job-snippets li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.65rem;
    color: var(--gold);
    position: absolute;
    left: 0;
    top: 4px;
}

.job-card-list.is-hidden { display: none; }

.no-jobs-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    background: var(--light);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
    display: none;
}

.no-jobs-message.visible { display: block; }

/* --- Sliding modal --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active { opacity: 1; visibility: visible; }

.side-modal {
    position: fixed;
    top: 0;
    right: -100%;
    width: 460px;
    max-width: 100%;
    height: 100vh;
    background: var(--surface);
    z-index: 2000;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
    transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.side-modal.active { right: 0; }

.modal-header {
    padding: 26px 26px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--light);
}

.modal-header h3 { font-size: 1.4rem; }

.close-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.close-btn:hover { color: var(--primary); border-color: var(--primary); }

.modal-body { padding: 26px; overflow-y: auto; flex: 1; }

.modal-body h4 {
    margin: 26px 0 12px 0;
    color: var(--ink);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-body h4:first-child { margin-top: 0; }

.modal-body h4 i { color: var(--gold); font-size: 0.95rem; }

.modal-footer { padding: 20px 26px; border-top: 1px solid var(--border); background: var(--light); }

/* --- Fullscreen modal on mobile --- */
@media (max-width: 768px) {
    .side-modal {
        top: 100%;
        right: 0;
        width: 100%;
        height: 100dvh;
        transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .side-modal.active { top: 0; right: 0; }

    .modal-header {
        padding: 18px 16px;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .modal-header h3 { font-size: 1.2rem; }

    .close-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .modal-body { padding: 20px 16px 100px; }

    .modal-footer {
        position: sticky;
        bottom: 0;
        padding: 16px;
    }
}

/* --- Pro tip --- */
.pro-tip {
    text-align: center;
    margin-top: 3rem;
    height: fit-content;
}

.pro-tip .btn { box-shadow: 0 6px 16px rgba(201, 162, 39, 0.25); }

@media (max-width: 768px) {
    .job-actions {
        position: static;
        opacity: 1;
        transform: none;
        margin-top: 10px;
    }
    .job-card-list { flex-direction: column; }
}

@media (max-width: 480px) {
    .careers-toolbar { flex-direction: column; align-items: stretch; }
    .careers-count { text-align: center; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

#contact { background: var(--light); position: relative; }

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    background: var(--surface);
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

.contact-map {
    flex: 1;
    min-width: 300px;
    min-height: 380px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* .contact-map iframe {
    filter: invert(92%) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.7);
} */

.contact-info { flex: 1; min-width: 300px; display: flex; flex-direction: column; justify-content: center; }

.contact-info > h3 {
    font-size: 1.8rem;
    color: var(--ink);
    margin-bottom: 1.6rem;
    font-weight: 700;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    color: var(--text-muted);
}

.info-row:last-child { margin-bottom: 0; }

.icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.09), rgba(201, 162, 39, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon { width: 19px; height: 19px; color: var(--primary); }

.info-row .label { color: var(--text-muted); font-size: 0.88rem; display: block; }
.info-row .value { color: var(--ink); font-size: 1.02rem; font-weight: 600; }

/* ==========================================================================
   Apply Now
   ========================================================================== */

#apply-now, #employer-form {
    padding: 100px 20px;
    background: linear-gradient(160deg, #ffffff 0%, var(--light) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.apply-container {
    max-width: 620px;
    margin: 0 auto;
    background: var(--surface);
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    position: relative;
}

.apply-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--primary), var(--gold));
}

.floating-label-group { position: relative; margin-bottom: 25px; }

.floating-input {
    width: 100%;
    padding: 16px 15px;
    font-size: 1rem;
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: transparent;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    font-family: inherit;
    color: var(--ink);
}

.floating-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.08);
}

.floating-label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: 0.2s ease all;
    background: var(--surface);
    padding: 0 5px;
}

.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
    top: 0;
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
}

.file-upload-group {
    background: var(--light);
    padding: 24px 20px;
    border-radius: var(--radius-md);
    border: 2px dashed var(--input-border);
    margin-bottom: 20px;
    text-align: left;
    transition: border-color 0.25s, background 0.25s;
}

.file-upload-group.drag-over {
    border-color: var(--primary);
    background: rgba(200, 16, 46, 0.08);
}

.file-upload-group label { display: block; margin-bottom: 12px; font-weight: 700; color: var(--ink); font-size: 0.92rem; }

.file-upload-group .upload-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 10px;
}

.file-upload-group .upload-hint i { color: var(--gold); }

input[type="file"] {
    width: 100%;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
}

#resume-preview {
    max-width: 150px;
    display: block;
    margin: 12px 0 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* ==========================================================================
   Apply Now — Typeform-style wizard
   ========================================================================== */

.typeform-container {
    max-width: 680px;
}

.tf-progress {
    height: 6px;
    width: 100%;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.tf-progress-bar {
    height: 100%;
    width: 10%;
    background: linear-gradient(90deg, var(--primary), var(--gold));
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tf-step-indicator {
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 30px;
}

.tf-step {
    display: none;
}

.tf-step.active {
    display: block;
    animation: tfFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.tf-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201, 162, 39, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.tf-step-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gold);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.tf-question {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 22px;
}

.tf-hint {
    display: block;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: -14px 0 18px;
}

.tf-input,
.tf-select {
    width: 100%;
    padding: 14px 4px;
    font-size: 1.1rem;
    font-family: inherit;
    color: var(--ink);
    border: none;
    border-bottom: 2.5px solid var(--input-border);
    background: transparent;
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0;
}

.tf-input:focus,
.tf-select:focus {
    border-bottom-color: var(--primary);
}

.tf-input.invalid,
.tf-select.invalid,
.tf-textarea.invalid {
    border-color: var(--primary);
}

.tf-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9ba3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 34px;
}

.tf-textarea {
    width: 100%;
    min-height: 260px;
    padding: 20px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
    line-height: 1.7;
    resize: vertical;
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.tf-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.08);
}

.tf-word-count {
    display: flex;
    justify-content: flex-end;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.tf-word-count.limit-reached {
    color: var(--primary);
    font-weight: 700;
}

.tf-error {
    display: none;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
}

.tf-error.visible {
    display: block;
}

/* Step 7: conditional "Yes" follow-up fields (country, visa type, date, result) */
.tf-subfields {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1.5px solid var(--hairline);
}

.tf-subfields-hidden {
    display: none;
}

.tf-subfields .tf-question {
    font-size: 1.15rem;
    margin-bottom: 14px;
}

.tf-subfields .tf-select,
.tf-subfields .tf-input {
    margin-bottom: 8px;
}

.tf-subfields .tf-error {
    margin-bottom: 22px;
}

.tf-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
}

.tf-file-drop {
    border: 2px dashed var(--input-border);
    border-radius: var(--radius-md);
    padding: 34px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--light);
    transition: border-color 0.25s, background 0.25s;
}

.tf-file-drop:hover,
.tf-file-drop.drag-over {
    border-color: var(--primary);
    background: rgba(200, 16, 46, 0.08);
}

.tf-file-drop i {
    font-size: 1.8rem;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
}

.tf-file-drop p {
    margin: 4px 0;
    color: var(--ink);
    font-size: 0.92rem;
}

.tf-file-drop .upload-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 10px;
}

.tf-file-drop .upload-hint i {
    font-size: 0.9rem;
    margin: 0;
    color: var(--gold);
}

.tf-file-list {
    margin-top: 16px;
    text-align: left;
}

.tf-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.88rem;
    color: var(--ink);
}

.tf-file-item em {
    color: var(--text-muted);
    font-style: normal;
}

.tf-file-item .remove-file {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 4px;
}

.tf-file-item .remove-file:hover {
    color: var(--primary);
}

@media (max-width: 480px) {
    .tf-question { font-size: 1rem; }
    .tf-nav { flex-direction: column-reverse; align-items: stretch; }
    .tf-nav .btn, .tf-nav .btn-outline { width: 100%; text-align: center; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    background: var(--dark);
    color: #cbd5e1;
    padding: 70px 10% 30px;
    position: relative;
    overflow: hidden;

    /* Footer stays on the original dark palette regardless of the body retheme above */
    --ink: #f3f1ea;
    --text-muted: #9b9ba3;
    --border: rgba(255, 255, 255, 0.09);
    --input-border: rgba(255, 255, 255, 0.22);
    --hairline: rgba(255, 255, 255, 0.09);
    --light: #131316;
    --surface: #16161a;
    --surface-alt: #1e1e23;
    --bg-void: #0a0a0b;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-brand .footer-logo { height: 50px; margin-bottom: 18px; }

.footer-brand p { font-size: 0.92rem; color: var(--text-muted); max-width: 320px; margin-bottom: 20px; }

.footer-social { display: flex; gap: 12px; }

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, transform 0.25s;
}

.footer-social a:hover {
    background: linear-gradient(135deg, var(--primary), var(--gold));
    color: var(--white);
    transform: translateY(-3px);
}

.footer-col h4 {
    color: var(--white);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
    font-family: var(--font-display);
}

.footer-col a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.92rem;
    margin-bottom: 12px;
    transition: color 0.25s, padding-left 0.25s;
}

.footer-col a:hover { color: var(--gold-light); padding-left: 4px; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.82rem;
    color: #64748b;
}

.footer-bottom a { color: var(--text-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-light); }

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

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

/* --- Back to top --- */
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    border: none;
    box-shadow: var(--shadow-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { filter: brightness(1.1); }

/* ==========================================================================
   Responsive — full device breakpoint system

   ≤340px   Small/older phones (iPhone SE 1st gen, small Android)
   ≤380px   Compact phones (iPhone 12/13 mini)
   ≤480px   Standard phones (iPhone 14/15, most Android)
   ≤600px   Large phones / phablets (landscape phones, Plus/Max models)
   ≤768px   Small tablets portrait (iPad mini)
   ≤900px   Tablets portrait (general)
   ≤1024px  Tablets portrait, incl. iPad Air/Pro 11", and the point where
            the nav switches from full links to the hamburger menu
   ≤1200px  Small laptops / tablets in landscape (iPad landscape ~1180-1194px)
   ≤1366px  Common laptop screens (13"-14")
   ≥1600px  Large desktop monitors
   ≥1920px  Full HD+ / ultra-wide displays

   The nav specifically uses 1024px (not 768px) as its hamburger
   threshold: portrait tablets have enough width to look like "desktop"
   but not enough to fit every nav link + both CTA button groups + the
   mail icon on one line, so they get the same clean slide-out menu as
   phones. Landscape tablets and anything wider gets the full nav.
   ========================================================================== */

@media (min-width: 1600px) {
    /* Large desktop / ultra-wide monitors: hero-grid, card-grid, and
       other explicitly max-width'd blocks already cap themselves, but
       plain content sections only had percentage padding, which lets
       paragraph text stretch to an uncomfortable line length on very
       wide screens. Capping the readable column keeps it comfortable
       without touching anything that already has its own max-width. */
    .section-head,
    .about-copy,
    .contact-container p,
    .hero-subtext {
        max-width: 780px;
    }
}

@media (max-width: 1200px) {
    /* Small laptops and landscape tablets: a touch less breathing room
       than full desktop, but still comfortably fits the full nav. */
    nav { padding: 8px 4.5%; }
}

@media (max-width: 1024px) {
    section { padding: 100px 6%; }
    nav { padding: 8px 4%; }
    .stats-band { grid-template-columns: repeat(2, 1fr); }

    /* Hero collapses to a single, centered column; the Top Hires
       showcase steps aside so the copy and CTAs stay the focus. */
    .hero-grid { grid-template-columns: 1fr; padding: 0 20px; }
    .hero-showcase { display: none; }
    .hero-content { max-width: 640px; align-items: center; text-align: center; margin: 0 auto; }
    .hero-cta-row { justify-content: center; }
    .hero-trust { justify-content: center; margin-top: 32px; }
    .hero-subtext { margin-left: auto; margin-right: auto; }
    .hero-highlights { margin-left: auto; margin-right: auto; }
    .hero-highlight { text-align: left; }

    /* --- Nav switches to the hamburger menu here, not at 768px, so
       every portrait tablet (iPad mini through iPad Pro 11") gets the
       clean slide-out instead of a cramped, potentially-wrapping full
       nav bar. Landscape tablets (≥1025px wide) still get the full nav. --- */
    .nav-toggle { display: flex; }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 78%;
        max-width: 320px;
        height: 100vh;
        background: var(--surface);
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 32px 40px;
        box-shadow: -10px 0 30px rgba(0,0,0,0.12);
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        gap: 8px;
        overflow-y: auto;
    }

    .nav-links.active { right: 0; }

    nav a { margin-left: 0; font-size: 1.05rem; width: 100%; padding: 10px 0; }
    nav a.head-btn2 { margin-top: 16px; text-align: center; }

    .cta-indicator-group { margin-left: 0; }

    /* Inside the slide-out menu the icon-only circle reads as an
       orphaned dot, so it expands into a full labeled row matching the
       other links instead. */
    .nav-mail {
        width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 0;
        margin-left: 0;
        margin-top: 8px;
        border: none;
    }
    .nav-mail::before {
        content: "Email Us";
        font-weight: 600;
        font-size: 1.05rem;
        order: 2;
    }
    .nav-mail:hover { background: none; transform: none; }
}

@media (max-width: 768px) {
    section { padding: 90px 6%; }
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .about-details { gap: 32px; }
    .benefit-cta { padding: 2rem; }
    .benefit-cta-copy h3 { font-size: 1.5rem; }

    .hero-stats { gap: 28px; margin-top: 44px; padding-top: 26px; }
    .hero-stat .num { font-size: 1.7rem; }

    .contact-container { padding: 2rem; }
    footer { padding: 56px 6% 24px; }
}

@media (max-width: 600px) {
    /* Large-phone / phablet tuning: tighter than tablet, not yet as
       cramped as a standard 480px phone. */
    section { padding: 80px 5.5%; }
}

/* Short-viewport landscape phones/tablets: min-height:100vh on the hero
   can push the CTA and trust strip off-screen when height is limited
   (e.g. a phone rotated sideways). Relaxing to min-height:auto with a
   fixed top/bottom pad keeps everything reachable without scrolling
   past a giant empty hero. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    #home { min-height: auto; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px; }
    .hero-showcase { display: none; }
}

@media (max-width: 480px) {
    nav a { font-size: 0.95rem; }
    section { padding: 70px 5%; }
    .btn { width: 100%; text-align: center; }
    .hero-cta-row .btn-outline { width: 100%; text-align: center; }
    .hero-cta-row { flex-direction: column; width: 100%; }
    .value-card, .hover-card .card-body { padding: 1.5rem; }
    .apply-container { padding: 2rem 1.5rem; }
    .contact-container { padding: 1.8rem; }
    .back-to-top { bottom: 18px; right: 18px; width: 44px; height: 44px; }

    .hero-eyebrow { font-size: 0.7rem; padding: 6px 14px; margin-bottom: 20px; }
    .hero-subtext { font-size: 0.95rem; line-height: 1.7; }
    .hero-highlights { grid-template-columns: 1fr; gap: 10px; }
    .hero-stats { gap: 20px; }
    .hero-stat { min-width: 80px; }
    .hero-stat .num { font-size: 1.4rem; }
    .hero-stat .label { font-size: 0.68rem; }

    .job-card-list { padding: 18px; }
    .job-avatar { width: 44px; height: 44px; font-size: 1rem; }
    .job-card-list h3 { font-size: 1.1rem; }

    .about-media img { max-height: 260px; }
    .benefit-cta-media img { max-height: 190px; }
    .benefit-cta { padding: 1.5rem; }

    .footer-grid { gap: 32px; }
    footer { padding: 48px 6% 20px; }
}

@media (max-width: 360px) {
    .hero-cta-row .btn { padding: 12px 20px; font-size: 0.85rem; }
    .job-avatar { display: none; }
    .careers-search { min-width: 0; }
    .stat-item .num { font-size: 1.9rem; }
}

/* Safety net for very narrow phones (≤340px): several two-up flex
   layouts elsewhere rely on "min-width: 300px" to decide when to wrap
   to a single column, which is wider than the viewport itself on the
   smallest devices. Drop that floor here so nothing ever forces
   horizontal scrolling. */
@media (max-width: 340px) {
    .about-copy,
    .about-media,
    .benefit-cta-copy,
    .benefit-cta-media,
    .contact-map,
    .contact-info {
        min-width: 0;
        width: 100%;
    }
}