/* Ensure hero and sections have backgrounds so content is always visible */
.home-hero {
    background: url('../images/logos/logo-home.png?v=5eca0d6ac5') center/100% no-repeat, var(--color-primary);
    position: relative;
    color: #fff;
}
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(17,27,51,0.55);
    z-index: 0;
}
.home-hero > * {
    position: relative;
    z-index: 1;
}
.section {
    background: var(--color-bg-light, #f4f7f5);
}
.section-dark {
    background: var(--color-bg-dark, #111b33);
    color: #fff;
}
/* ===== Theme: Light & Dark Mode ===== */
body.light-mode {
    background: var(--color-bg);
    color: var(--color-text);
}
body.dark-mode {
    background: #111b33;
    color: #e0e6f0;
}

body.dark-mode .site-header,
body.dark-mode .container,
body.dark-mode .section,
body.dark-mode .section-light {
    background: #111b33 !important;
    color: #e0e6f0 !important;
}
body.dark-mode .section-dark {
    background: #0b1222 !important;
    color: #e0e6f0 !important;
}
body.dark-mode .definition-card,
body.dark-mode .feature-card,
body.dark-mode .market-card,
body.dark-mode .about-cycle-image-wrapper {
    background: rgba(20,30,55,0.92) !important;
    color: #e0e6f0 !important;
    border-color: var(--color-accent);
}
body.dark-mode .orbit-link {
    background: #111b33 !important;
    color: #e0e6f0 !important;
    border-color: var(--color-accent);
}
body.dark-mode .orbit-link:hover {
    background: var(--color-accent) !important;
    color: #fff !important;
}
body.dark-mode .about-cycle-caption {
    color: #e0e6f0 !important;
}

/* --- Dark Mode: Global text & link overrides --- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e0e6f0;
}
body.dark-mode a {
    color: #4db8ff;
}
body.dark-mode a:hover {
    color: var(--color-accent);
}
body.dark-mode .section-title p,
body.dark-mode .section-title--narrow p {
    color: #a0aabe;
}
body.dark-mode .section-dark h1,
body.dark-mode .section-dark h2,
body.dark-mode .section-dark h3,
body.dark-mode .section-dark h4 {
    color: #fff;
}
body.dark-mode .section-dark a {
    color: #4db8ff;
}

/* --- Dark Mode: News cards & tabs --- */
body.dark-mode .news-card {
    background: #1a2540;
    color: #e0e6f0;
}
body.dark-mode .news-card h3 {
    color: #e0e6f0;
}
body.dark-mode .news-card p {
    color: #a0aabe;
}
body.dark-mode .news-tab {
    color: #a0aabe;
}
body.dark-mode .news-tab.active,
body.dark-mode .news-tab:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* --- Dark Mode: Testimonial cards --- */
body.dark-mode .testimonial-card {
    background: #1a2540;
    color: #e0e6f0;
}
body.dark-mode .testimonial-card blockquote p {
    color: #d0d6e0;
}
body.dark-mode .testimonial-author strong {
    color: #e0e6f0;
}
body.dark-mode .testimonial-author span {
    color: #a0aabe;
}

/* --- Dark Mode: Team cards --- */
body.dark-mode .team-card {
    background: #1a2540;
    color: #e0e6f0;
}
body.dark-mode .team-card .team-name {
    color: #e0e6f0;
}
body.dark-mode .team-card .team-bio {
    color: #a0aabe;
}
body.dark-mode .team-card .team-quote {
    color: var(--color-accent);
}

/* --- Dark Mode: Contact items --- */
body.dark-mode .contact-item h4 {
    color: #e0e6f0;
}
body.dark-mode .contact-item p,
body.dark-mode .contact-item a {
    color: #a0aabe;
}
body.dark-mode .contact-item a:hover {
    color: var(--color-accent);
}

/* --- Dark Mode: Carrier extras --- */
body.dark-mode .carrier-highlight-card {
    background: #1a2540;
}
body.dark-mode .carrier-highlight-card p {
    color: #a0aabe;
}
body.dark-mode .benefit-tag {
    background: #1a2540;
    color: #e0e6f0;
}

/* --- Dark Mode: Definition card text --- */
body.dark-mode .definition-card .word {
    color: #e0e6f0;
}
body.dark-mode .definition-card .similar span {
    color: var(--color-accent);
}

/* --- Dark Mode: Feature card text --- */
body.dark-mode .feature-card h3 {
    color: #e0e6f0;
}
body.dark-mode .feature-card p {
    color: #a0aabe;
}

/* --- Dark Mode: About page text --- */
body.dark-mode .about-story-text p,
body.dark-mode .about-bio-text p,
body.dark-mode .about-bio-full p,
body.dark-mode .about-preview-text p {
    color: #a0aabe;
}
body.dark-mode .about-story-text h4 {
    color: #e0e6f0;
}

/* --- Dark Mode: Email CTA --- */
body.dark-mode .email-cta {
    background: #1a2540;
    color: #e0e6f0;
}

/* --- Dark Mode: Social feed on home --- */
body.dark-mode .social-feed-col h3 {
    color: #e0e6f0;
}

/* --- Dark Mode: Borders --- */
body.dark-mode .benefits-list li,
body.dark-mode .roles-column ul li,
body.dark-mode .definition-entry {
    border-color: rgba(255,255,255,0.1);
}

/* --- Dark Mode: Portal subtitle --- */
.portal-subtitle {
    color: var(--color-text-light);
}
body.dark-mode .portal-subtitle {
    color: #a0aabe;
}

/* ===== About Cycle: Fixed Height for No Layout Shift ===== */
.about-cycle-image-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    min-height: 340px;
    max-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #eee;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    border: 2px solid var(--color-accent);
    transition: background 0.3s;
}
.about-cycle-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    transition: filter 0.3s;
    display: block;
    margin: 0 auto;
}
body.dark-mode .about-cycle-image-wrapper {
    background: #1a2540;
}
/* ===== CSS Variables / Branding ===== */
:root {
    --color-primary: #111b33;       /* dark navy blue (logo) */
    --color-accent: #2e9e6b;         /* green (logo) */
    --color-accent-hover: #258c5c;
    --color-dark: #111b33;
    --color-text: #333;
    --color-text-light: #666;
    --color-bg: #ffffff;
    --color-bg-light: #f4f7f5;
    --color-bg-dark: #111b33;
    /* Per-product accents for the platform cards/pages. The customer portal
       keeps the house green; the two TMS products get their own hue so each
       lands on a recognisably branded page. */
    --color-platform-carrier-portal: #17a2a2;
    --color-platform-carrier: #2f7fd0;
    --color-platform-broker: #7d5bd6;
    --color-status-live: var(--color-accent);
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Montserrat', var(--font-primary);
    --max-width: 1200px;
    --transition: 0.3s ease;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }
ul { list-style: none; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.3rem; }

/* ===== Header ===== */
.site-header {
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.logo img {
    max-height: 70px;
    width: auto;
    transition: max-height 0.4s ease;
}

.header-phones {
    display: flex;
    gap: 15px;
    align-items: center;
}

.phone-btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 8px 18px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--color-accent);
    transition: background var(--transition);
}

.phone-btn:hover {
    background: var(--color-accent);
    color: #fff;
}

.phone-btn small {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.9;
}

/* ===== Navigation ===== */
.nav-bar {
    background: #fff;
}

body.dark-mode .nav-bar {
    background: #111b33;
}

/* The header row is wider than the page column so logo, ten nav pills and the
   theme toggle share one line on a laptop without the type shrinking. */
.nav-bar .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1400px;
}

.nav-bar-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75em;
}

.nav-bar-inner .logo {
    flex-shrink: 0;
}

/* DOM order is logo, controls, nav (the controls hold the hamburger, which has to
   sit beside the logo on mobile); on desktop the nav is ordered into the middle. */
.nav-bar-inner .nav-right-controls {
    order: 2;
    flex-shrink: 0;
}

.nav-bar-inner .logo img {
    max-height: 50px;
    width: auto;
}

.nav-right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
    padding: 6px;
    line-height: 1;
}

.main-nav {
    display: flex;
    gap: 0;
}

.main-nav > li {
    position: relative;
}

.main-nav > li > a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background var(--transition);
}

.main-nav > li > a:hover,
.main-nav > li > a.active {
    background: rgba(255,255,255,0.15);
    color: var(--color-accent);
}

/* Dropdown */
.main-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-primary);
    min-width: 180px;
    display: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 0 0 5px 5px;
    border: 1px solid var(--color-accent);
    z-index: 100;
}

.main-nav li:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    font-size: 0.9rem;
}

.dropdown-menu a:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-accent);
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
}

body.dark-mode .nav-toggle {
    color: #e0e6f0;
}

/* ===== Hero Banner ===== */
.hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    min-height: 400px;
    display: flex;
    align-items: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(17,27,51,0.85), rgba(17,27,51,0.95));
}

.hero .container {
    position: relative;
    z-index: 1;
    padding: 80px 20px;
}

.hero h1 {
    color: #fff;
    margin-bottom: 0.5em;
}

.hero p {
    font-size: 1.2rem;
    max-width: 600px;
    opacity: 0.95;
}

/* ===== Page Header (smaller hero) ===== */
.page-header {
    background: var(--color-bg-dark);
    color: #fff;
    padding: 60px 0;
    text-align: center;
    border-bottom: 3px solid var(--color-accent);
}

.page-header h1 {
    color: #fff;
    margin-bottom: 0.3em;
}

.page-header p {
    font-size: 1.15rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.portal-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 36px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(46,158,107,0.3);
    animation: portal-pulse 2s ease-in-out infinite;
}

@keyframes portal-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(46,158,107,0.4); }
    50% { box-shadow: 0 4px 40px rgba(46,158,107,0.9), 0 0 25px rgba(46,158,107,0.6); }
}

.portal-btn:hover {
    background: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    animation: none;
    box-shadow: 0 6px 25px rgba(46,158,107,0.5);
}

/* ===== Section Styles ===== */
.section {
    padding: 80px 0;
}

.section-light {
    background: var(--color-bg-light);
}

.section-dark {
    background: var(--color-bg-dark);
    color: #fff;
}

.section-dark h2,
.section-dark h3 {
    color: var(--color-accent);
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    margin-bottom: 15px;
}

.section-title--narrow {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.section-title--narrow p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.8;
}

.contact-grid h2 {
    margin-bottom: 30px;
}

.section-title p {
    color: var(--color-text-light);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* ===== Home Hero ===== */
/* The header is sticky and ~72px tall on desktop; the hero fills the rest of the
   first screen rather than pushing the About section below the fold. */
.home-hero {
    text-align: center;
    padding: 60px 20px;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../images/logos/logo-home.png?v=5eca0d6ac5') center/100% no-repeat, var(--color-primary);
    position: relative;
}

.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(17,27,51,0.55);
}

/* ===== Home hero: theme-aware backdrop =====
   The logo art behind the orbit nav is identical in both themes; only what sits
   behind it changes - white in light mode, brand navy in dark mode. The veil
   keeps the artwork muted enough for the nav and cards to read on top. */
body.light-mode .home-hero {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
}

/* Veil matches --color-bg-light exactly, so the flat area either side of the
   logo stays #f4f7f5 and runs seamlessly into the sections below. */
body.light-mode .home-hero::before {
    background: rgba(244,247,245,0.55);
}

body.dark-mode .home-hero {
    background-color: var(--color-primary);
    color: #fff;
}

body.dark-mode .home-hero::before {
    background: rgba(17,27,51,0.55);
}

/* Hero definition cards are frosted glass; over white their type has to flip to navy.
   The fill is deliberately thin so the logo artwork stays visible behind the cards -
   the light text-shadow is what keeps the navy type readable where it crosses the mark. */
body.light-mode .home-hero .definition-card {
    /* Cool mid-grey rather than white, held at the same 0.34 alpha - the frost stays
       exactly as transparent, only the tint darkens, so the logo behind reads as before.
       This is about as dark as the fill can go while navy type still clears AA - it
       measures ~4.9:1 where the card crosses the dark letterforms of the logo. Darker
       than this means flipping the type to white and treating it as a dark panel. */
    background: rgba(120,130,146,0.34);
    box-shadow: 0 8px 30px rgba(17,27,51,0.10);
    color: var(--color-primary);
    --def-outline: rgba(255,255,255,0.95);
    --def-glow: rgba(222,227,233,0.85);
}

/* The blanket `body.dark-mode .definition-card` rule near the top of this file sets a
   near-solid navy fill with !important, which hid the logo behind the hero cards. Scope
   a higher-specificity override back to frosted glass here rather than weakening that
   rule, which the About/Team pages still rely on. */
body.dark-mode .home-hero .definition-card {
    background: rgba(255,255,255,0.16) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    --def-outline: rgba(6,11,22,0.95);
    --def-glow: rgba(6,11,22,0.8);
}

/* Dark mode sits over the darkest, busiest part of the logo, so take the body copy and
   the "similar" list up to full strength rather than the muted alphas used elsewhere. */
body.dark-mode .home-hero .definition-card .definition-entry p {
    color: #fff;
}

body.dark-mode .home-hero .definition-card .similar {
    color: rgba(255,255,255,0.88);
}

body.dark-mode .home-hero .definition-card .phonetic {
    color: rgba(255,255,255,0.85);
}

body.light-mode .home-hero .definition-card:hover {
    box-shadow: 0 10px 30px rgba(46,158,107,0.25);
}

body.light-mode .home-hero .definition-card .word,
body.light-mode .home-hero .definition-card .similar span {
    color: var(--color-primary);
}

body.light-mode .home-hero .definition-card .definition-entry p {
    color: rgba(17,27,51,0.88);
}

body.light-mode .home-hero .definition-card .similar,
body.light-mode .home-hero .definition-card .phonetic {
    color: rgba(17,27,51,0.65);
}

body.light-mode .home-hero .definition-card .shuffle-hint {
    color: rgba(17,27,51,0.5);
}

body.light-mode .home-hero .definition-card .definition-entry {
    border-bottom-color: rgba(17,27,51,0.15);
}

.home-hero-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    z-index: 1;
}

/* ===== Navbar links =====
   `.orbit-nav` / `.orbit-link` are historical names - the links used to orbit
   the home hero. They are now simply the navbar row and its pills. */
.orbit-nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.orbit-link {
    display: inline-block;
    padding: 18px 40px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    border-radius: 30px;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid var(--color-accent);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.orbit-link:hover {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 6px 25px rgba(46,158,107,0.4);
    transform: scale(1.08);
}

/* Site nav: one row between the logo and the theme toggle, never two. Ten pills
   need ~950px at full size; below that the type scales with the viewport (padding
   is in em and follows it) until the hamburger takes over at 768px. */
.site-nav.orbit-nav.flung {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(3px, 0.45vw, 6px);
    margin: 0;
    padding: 10px 0;
}

.site-nav .orbit-link {
    padding: 0.5em 0.85em;
    font-size: clamp(0.6rem, 1.05vw, 0.9rem);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.site-nav .orbit-link.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* LinkedIn feed */
.linkedin-feed {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.linkedin-feed iframe {
    max-width: 100%;
    border-radius: 8px;
    border: 2px solid var(--color-accent);
    margin-bottom: 20px;
}

/* Social feeds side-by-side */
.social-feeds {
    display: grid;
    /* The home page shows only the most recent entry, so this is usually a
       single column. auto-fit keeps one embed centred instead of stranded in
       the left half of a hardcoded 2-up grid, and still lays out side by side
       if more are ever rendered. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    justify-content: center;
    gap: 40px;
    align-items: start;
}

.social-feed-col {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-feed-col h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: var(--color-primary);
}

.social-feed-col iframe {
    max-width: 100%;
    height: 600px;
    border-radius: 8px;
    border: 2px solid var(--color-accent);
    margin-bottom: 20px;
}

.social-feed-col .instagram-media {
    min-height: 600px;
    max-height: 600px;
    overflow: hidden;
    border: 2px solid var(--color-accent) !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
}

.ig-icon {
    width: 120px;
    height: 120px;
    transition: transform 0.3s ease;
}

.ig-icon:hover {
    transform: scale(1.1);
}

.ig-btn {
    display: inline-block;
    padding: 18px 40px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(220,39,67,0.3);
    margin-top: 15px;
}

.ig-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220,39,67,0.4);
}

.linkedin-btn {
    display: inline-block;
    padding: 18px 40px;
    background: #0a66c2;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    border-radius: 8px;
    border: 2px solid var(--color-accent);
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(10,102,194,0.3);
}

.linkedin-btn:hover {
    background: #004182;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10,102,194,0.4);
}

/* ===== Definitions (Home) ===== */
.home-hero .definitions {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

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

/* The cards are deliberately near-transparent so the logo reads through, which means
   the type sits on busy artwork rather than a flat fill. `--def-outline` draws a 1px
   ring in the eight compass directions (the text-shadow outline trick) and `--def-glow`
   adds a soft halo behind it; the theme blocks above only swap those two colours. Both
   are inherited by every child, so the ring is declared exactly once. */
.home-hero .definition-card {
    --def-outline: rgba(11,18,34,0.92);
    --def-glow: rgba(11,18,34,0.65);
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(4px) saturate(115%);
    -webkit-backdrop-filter: blur(4px) saturate(115%);
    border-left: 4px solid var(--color-accent);
    color: #fff;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    text-shadow:
         1px  0   0 var(--def-outline),
        -1px  0   0 var(--def-outline),
         0    1px 0 var(--def-outline),
         0   -1px 0 var(--def-outline),
         1px  1px 0 var(--def-outline),
        -1px  1px 0 var(--def-outline),
         1px -1px 0 var(--def-outline),
        -1px -1px 0 var(--def-outline),
         0 0 12px var(--def-glow);
}

.home-hero .definition-card:hover {
    box-shadow: 0 10px 30px rgba(46,158,107,0.2);
}

.home-hero .definition-card .shuffle-hint {
    font-weight: 600;
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-hero .definition-card .definition-entry {
    border-bottom-color: rgba(255,255,255,0.2);
}

.home-hero .definition-card .definition-entry.def-hidden {
    display: none;
}

.home-hero .definition-card .definition-entry.def-active {
    display: block;
    animation: defSlideIn 0.4s ease;
}

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

/* Hero-card type carries more weight than the same element on a solid-fill card
   elsewhere on the site: an outline thickens a glyph, and light weights go muddy
   under one. */
.home-hero .definition-card .word {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.home-hero .definition-card .pos {
    font-weight: 700;
    color: var(--color-accent);
}

.home-hero .definition-card .definition-entry p {
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.home-hero .definition-card .similar {
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}

.home-hero .definition-card .similar span {
    font-weight: 700;
    color: #fff;
}

.home-hero .definition-card .phonetic {
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}

/* ===== Nav trucks (home) =====
   Decorative delivery for the home navbar: every link starts hidden (the class is
   added by JS, so no-JS and reduced-motion visitors get an ordinary navbar) and a
   truck whose trailer carries that link's word drives in from a screen edge and
   parks on the slot. The nav-truck block in main.js builds the SVG and owns the
   geometry these rules assume. */
.nav-truck-layer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    overflow: hidden;
}

.nav-truck {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    will-change: transform;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

.nav-truck.parked {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.32s ease-out;
}

/* Trucks can be caught. Only once they are rolling (before that the element sits
   unpositioned at the top-left corner) and never once they are parking. */
.nav-truck.rolling {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Over the header the pills win: trucks there cannot be grabbed or clicked. */
.nav-truck.rolling.over-nav {
    pointer-events: none;
}

.nav-truck.held {
    cursor: grabbing;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,0.45));
}

/* Lifted off the road: wheels stop. */
.nav-truck.held .nav-truck-wheel {
    animation-play-state: paused;
}

.nav-truck-art {
    display: block;
    overflow: visible;
}

/* The trailer wears the nav pill's own fill, border and radius on purpose: the
   truck fades out as the link fades in on the same spot, and matching the two is
   what makes the swap read as the trailer becoming the button. */
.nav-truck-trailer {
    fill: var(--color-primary);
    stroke: var(--color-accent);
    stroke-width: 3;
}

.nav-truck-cab,
.nav-truck-hood {
    fill: var(--color-accent);
}

.nav-truck-stack,
.nav-truck-frame {
    fill: #6d7789;
}

.nav-truck-glass { fill: #cfe6ff; }
.nav-truck-lamp  { fill: #ffe9a8; }
.nav-truck-tyre  { fill: #1a1f2b; }
.nav-truck-hub   { fill: #b9c0cc; }

.nav-truck-spoke {
    stroke: #6d7789;
    stroke-width: 2.5;
}

/* Each wheel group gets its own transform-origin inline (its hub centre), so a
   plain rotate spins it in place. */
.nav-truck-wheel {
    animation: navTruckWheel 0.5s linear infinite;
}

@keyframes navTruckWheel {
    to { transform: rotate(360deg); }
}

/* Trucks arriving from the right edge back in, so their wheels turn backwards. */
.nav-truck.reversing .nav-truck-wheel {
    animation-direction: reverse;
}

.nav-truck-word {
    fill: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Links wait for their delivery. `trucks-inbound` only exists while the
   animation is running; the JS removes it once the last truck has parked. */
.site-nav.trucks-inbound .orbit-link {
    opacity: 0;
}

.site-nav.trucks-inbound .orbit-link.parked {
    opacity: 1;
    animation: navTruckDrop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes navTruckDrop {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Ambient deliveries after the first wave: the pill takes the hit as the truck
   fades onto it. Class is added and removed by JS around one run. */
.site-nav .orbit-link.bumped {
    animation: navTruckBump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes navTruckBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.1) translateY(-2px); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-truck-layer { display: none; }
    .site-nav.trucks-inbound .orbit-link { opacity: 1; }
}

.definition-card {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
}

.definition-card .word {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.definition-card .phonetic {
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: 5px;
}

.definition-card .pos {
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 15px;
}

.definition-entry {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.definition-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.definition-entry p {
    margin-bottom: 5px;
}

.definition-entry .similar {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.definition-entry .similar span {
    color: var(--color-primary);
    font-weight: 500;
}

/* ===== CTA Banner ===== */
.cta-banner {
    background: var(--color-bg-dark);
    color: #fff;
    text-align: center;
    padding: 60px 0;
}

.cta-banner h2 {
    color: #fff;
    margin-bottom: 10px;
}

.cta-banner p {
    opacity: 0.9;
}

/* ===== About Preview (Home) ===== */
.about-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    cursor: pointer;
}

.about-preview img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-preview-text h2 {
    margin-bottom: 20px;
}

.about-preview-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-light);
}

/* ===== Feature Cards ===== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    border: 1px solid var(--color-accent);
    transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.feature-card .icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.7;
}

/* ===== Stats ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.stat-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-accent);
    border-radius: 10px;
    padding: 40px 20px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-accent);
    display: block;
}

.stat-label {
    font-size: 1rem;
    opacity: 0.9;
    margin-top: 10px;
}

/* ===== Highlight list ===== */
.highlight-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.highlight-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    font-size: 0.95rem;
}

.highlight-list li::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ===== Markets (Customers) ===== */
.markets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.market-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    border: 1px solid var(--color-accent);
}

.market-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid var(--color-accent);
}

.market-card .market-text {
    padding: 20px;
    text-align: center;
}

/* ===== Carrier Benefits ===== */
.benefits-list {
    max-width: 800px;
    margin: 0 auto;
}

.benefits-list li {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    font-size: 1.05rem;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.benefits-list li::before {
    content: '→';
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.2rem;
}

.benefits-list li:last-child {
    border-bottom: none;
}

/* ===== Carrier highlights ===== */
.carrier-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.carrier-highlight-card {
    background: #fff;
    text-align: center;
    padding: 25px 15px;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    border: 1px solid var(--color-accent);
}

.carrier-highlight-card .icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.carrier-highlight-card p {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.95rem;
}

/* ===== Story Blocks (Carriers) ===== */
.story-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.story-block--reverse {
    direction: rtl;
}

.story-block--reverse > * {
    direction: ltr;
}

.story-block__image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    object-fit: cover;
    min-height: 300px;
    background: #dde3e0;
    border: 2px solid var(--color-accent);
}

.story-block__text h2 {
    margin-bottom: 20px;
    color: var(--color-primary);
}

.story-block__text p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text);
    margin-bottom: 16px;
}

.story-block__text p:last-child {
    margin-bottom: 0;
}

body.dark-mode .story-block__text h2 {
    color: #e0e6f0;
}

body.dark-mode .story-block__text p {
    color: #c8cede;
}

/* Photo Banner */
.carrier-photo-banner {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

.carrier-photo-banner img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    background: #c8cede;
    border-top: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
}

/* Perk Cards Grid */
.carrier-perks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.carrier-perk-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    border: 1px solid var(--color-accent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carrier-perk-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

.carrier-perk-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    background: #dde3e0;
    border-bottom: 2px solid var(--color-accent);
}

.carrier-perk-card__body {
    padding: 25px 30px 30px;
}

.carrier-perk-card__body .icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.carrier-perk-card__body h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.carrier-perk-card__body p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

body.dark-mode .carrier-perk-card {
    background: #1a2540;
}

body.dark-mode .carrier-perk-card__body h3 {
    color: #e0e6f0;
}

body.dark-mode .carrier-perk-card__body p {
    color: #a0aabe;
}

/* Customer Value Cards */
.customer-value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.customer-value-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    border: 1px solid var(--color-accent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.customer-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

.customer-value-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    background: #dde3e0;
    border-bottom: 2px solid var(--color-accent);
}

.customer-value-card__body {
    padding: 25px 30px 30px;
}

.customer-value-card__body .icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.customer-value-card__body h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.customer-value-card__body p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

body.dark-mode .customer-value-card {
    background: #1a2540;
}

body.dark-mode .customer-value-card__body h3 {
    color: #e0e6f0;
}

body.dark-mode .customer-value-card__body p {
    color: #a0aabe;
}

@media (max-width: 768px) {
    .customer-value-grid {
        grid-template-columns: 1fr;
    }
}

/* Quote Block */
.carrier-quote-block {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.carrier-quote-block blockquote p {
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.8;
    color: rgba(255,255,255,0.95);
    margin-bottom: 20px;
}

.carrier-quote-block cite {
    font-size: 1rem;
    color: var(--color-accent);
    font-style: normal;
    font-weight: 600;
}

/* Photo Grid */
.carrier-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.carrier-photo-grid__item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    display: block;
    background: #dde3e0;
    border: 2px solid var(--color-accent);
}

.carrier-photo-grid__item img:hover {
    transform: scale(1.03);
}

/* CTA Block */
.carrier-cta-block {
    text-align: center;
    padding: 20px 0;
}

.carrier-cta-block h2 {
    color: #fff;
    margin-bottom: 15px;
}

.carrier-cta-block p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto 25px;
}

.carrier-cta-block .cta-btn {
    display: inline-block;
    padding: 16px 40px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(46,158,107,0.3);
}

.carrier-cta-block .cta-btn:hover {
    background: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-2px);
}

.carrier-cta-phone {
    margin-top: 15px !important;
    font-size: 1rem !important;
}

.carrier-cta-phone a {
    color: var(--color-accent);
    font-weight: 600;
}

/* ===== Team Grid ===== */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.team-grid--centered {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 30px auto 0;
}

.team-grid--centered.team-grid--pair {
    grid-template-columns: repeat(2, 1fr);
    max-width: 790px;
}

.team-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    border: 1px solid var(--color-accent);
    transition: transform var(--transition);
}

.team-card:hover {
    transform: translateY(-5px);
}

.team-card .team-photo {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top;
    background: var(--color-bg-light);
    border-bottom: 2px solid var(--color-accent);
}

.team-card .team-info {
    padding: 20px;
}

.team-card .team-name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.team-card .team-role {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.team-card .team-bio {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.7;
}

.team-card .team-quote {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* Leadership row */
.team-leadership {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.team-leadership .team-card .team-photo {
    height: 320px;
}

/* ===== Careers ===== */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.benefit-tag {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    font-weight: 600;
    color: var(--color-primary);
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: transform var(--transition);
}

.benefit-tag:hover {
    transform: translateY(-3px);
}

.benefit-tag .icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.roles-section {
    display: grid;
    /* Four public tiers now (Entry / Internships / In Office / In Field), so
       let the columns fit the viewport instead of forcing two. The 768px block
       further down collapses this to a single column on mobile. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 40px;
    align-items: start;
}

.roles-column h3 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-accent);
    line-height: 1.3;
    /* Two of the four tier labels ("Experienced - In Office" / "- In Field")
       wrap to a second line at this column width. Reserving two lines of height
       keeps every column's underline and first role row on the same line rather
       than letting the short headings ride up. box-sizing is border-box, so the
       padding and border have to be added back in. The 768px block below drops
       this once the columns stack. */
    min-height: calc(2.6em + 12px);
}

.roles-column ul li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.roles-column ul li::before {
    content: '●';
    color: var(--color-accent);
}

/* ===== Contact ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.contact-item .contact-icon {
    width: 45px;
    height: 45px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 2px solid var(--color-accent);
}

.contact-item h4 {
    font-size: 1rem;
    margin-bottom: 3px;
}

.contact-item p, .contact-item a {
    font-size: 0.95rem;
    color: var(--color-text-light);
}

.contact-map {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    min-height: 400px;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
}

/* ===== Tech Integrations (Marquee) ===== */
.tech-logos-wrapper {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.tech-logos {
    display: flex;
    gap: 80px;
    align-items: center;
    animation: marquee 25s linear infinite;
    width: max-content;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.tech-logos img {
    max-height: 100px;
    width: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Two cuts of every logo ship in the markup (templates/_tech_marquee.html) and
   exactly one is shown. The transparent PNGs carry dark lettering, so the
   on-light cut disappears against a dark panel and the on-dark cut - the same
   art with that lettering knocked out to white - disappears against a pale one.
   Default is the light panel; the two rules below claim the dark cases. */
.tech-logos .tech-logo-dark { display: none; }

/* .section-dark is dark in either theme. */
.section-dark .tech-logos .tech-logo-light { display: none; }
.section-dark .tech-logos .tech-logo-dark { display: inline-block; }

/* Dark theme repaints the ordinary .section panels dark as well, so the
   marquees on Carriers and Customers have to follow it. */
body.dark-mode .tech-logos .tech-logo-light { display: none; }
body.dark-mode .tech-logos .tech-logo-dark { display: inline-block; }

.tech-logos img:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 12px rgba(46,158,107,0.6));
}

.tech-logos-wrapper:hover .tech-logos {
    animation-play-state: paused;
}

@keyframes marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ===== News Tabs ===== */
.news-tabs {
    display: flex;
    gap: 0;
    border-bottom: 3px solid var(--color-bg-light);
    margin-bottom: 40px;
}

.news-tab {
    flex: 1;
    padding: 16px 24px;
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .news-tabs {
        flex-wrap: wrap;
    }
    .news-tab:first-child {
        flex: 0 0 100%;
        padding: 12px 16px;
    }
    .news-tab {
        padding: 12px 8px;
        font-size: 0.95rem;
    }
    .quick-hitch-logo {
        height: 70px;
    }
}

.news-tab::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.news-tab:hover {
    color: var(--color-primary);
}

.news-tab.active {
    color: var(--color-primary);
}

.news-tab.active::after {
    transform: scaleX(1);
}

.quick-hitch-logo {
    height: 80px;
    width: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.news-panel {
    display: none;
    animation: fadeInTab 0.4s ease;
}

.news-panel.active {
    display: block;
}

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

.news-card {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    margin-bottom: 20px;
    border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
}

.news-card h3 {
    margin-bottom: 12px;
}

.news-card p {
    color: var(--color-text-light);
    line-height: 1.7;
}

/* Videos grid */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.video-card {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.video-card iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* News Embeds */
.news-embed {
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.news-embed iframe {
    border-radius: 10px;
    border: 2px solid var(--color-accent);
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

/* ===== Testimonials ===== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: #fff;
    padding: 35px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    border: 1px solid var(--color-accent);
    border-top: 4px solid var(--color-accent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

.testimonial-stars {
    color: #f5a623;
    font-size: 1.3rem;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.testimonial-card blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

.testimonial-card blockquote p {
    font-style: italic;
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 20px;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-author strong {
    color: var(--color-primary);
    font-size: 1rem;
}

.testimonial-author span {
    color: var(--color-text-light);
    font-size: 0.85rem;
}

/* ===== Email CTA ===== */
.email-cta {
    text-align: center;
    padding: 40px;
    background: var(--color-bg-light);
    border-radius: 10px;
    margin-top: 40px;
    border: 1px solid var(--color-accent);
}

.email-cta p {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.email-cta a {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-accent);
}

.email-cta a:hover {
    color: var(--color-accent-hover);
}

/* ===== About Story Intro ===== */
.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-story-text h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about-story-text h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.about-story-text p {
    font-size: 1.05rem;
    color: var(--color-text-light);
    line-height: 1.8;
}

.about-story-img img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ===== About Bios (alternating layout) ===== */
.about-bio {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.about-bio--right {
    grid-template-columns: 1fr 350px;
}

.about-bio-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-bio-text p {
    font-size: 1.05rem;
    color: var(--color-text-light);
    line-height: 1.8;
}

.about-bio-full {
    max-width: 900px;
    margin: 0 auto;
}

.about-bio-full p {
    font-size: 1.05rem;
    color: var(--color-text-light);
    line-height: 1.8;
}

/* ===== Diversity Statements ===== */
.diversity-statements {
    text-align: center;
    padding: 40px 0;
}

.diversity-statements h2 {
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* ===== Footer ===== */
.site-footer {
    background: var(--color-bg-dark);
    color: #ccc;
    padding: 60px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: var(--color-accent);
    font-size: 1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col p, .footer-col a {
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.8;
}

.footer-col a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: #888;
}

.footer-bottom a {
    color: var(--color-accent);
}

/* ===== Scroll to Top ===== */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: background var(--transition);
    z-index: 999;
}

.scroll-top:hover {
    background: var(--color-accent);
}

.scroll-top.visible {
    display: flex;
}

/* ===== Technology Page ===== */

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.lightbox.active {
    display: flex;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    z-index: 10001;
}

/* Real-time indicators grid */
.tech-live-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.tech-live-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--color-primary);
    border: 1px solid var(--color-accent);
}

body.dark-mode .tech-live-item {
    background: #1a2540;
    color: #e0e6f0;
}

.tech-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    animation: tech-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes tech-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Callout block */
.tech-callout {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-light);
}

.tech-callout p + p {
    margin-top: 12px;
}

body.dark-mode .tech-callout {
    color: #a0aabe;
}

/* Action chips */
.tech-actions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}

.tech-action-chip {
    padding: 10px 22px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tech-action-chip:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
}

/* Automation list */
.tech-auto-list {
    max-width: 800px;
    margin: 0 auto 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tech-auto-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 24px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    border: 1px solid var(--color-accent);
}

body.dark-mode .tech-auto-item {
    background: #1a2540;
}

.tech-auto-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.tech-auto-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}

body.dark-mode .tech-auto-item p {
    color: #a0aabe;
}

/* Outcome cards */
.tech-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.tech-outcome-card {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid var(--color-accent);
    transition: transform 0.3s ease;
}

.tech-outcome-card:hover {
    transform: translateY(-4px);
}

body.dark-mode .tech-outcome-card {
    background: #1a2540;
}

.tech-outcome-card .icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.tech-outcome-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-primary);
    margin: 0;
}

body.dark-mode .tech-outcome-card h3 {
    color: #e0e6f0;
}

@media (max-width: 768px) {
    .tech-live-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tech-outcomes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }

    .header-top {
        flex-direction: column;
        gap: 10px;
    }

    .header-phones {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-toggle {
        display: block;
    }

    .nav-bar-inner {
        flex-wrap: wrap;
    }

    .nav-bar-inner .logo {
        margin-right: auto;
    }

    .site-nav.orbit-nav.flung {
        display: none;
        order: 3;
        flex: 1 1 100%;
        flex-direction: column;
        width: 100%;
        gap: 6px;
        padding: 10px 0;
        border-radius: 0;
    }

    .site-nav.orbit-nav.flung.open {
        display: flex;
    }

    .site-nav .orbit-link {
        padding: 12px 20px;
        font-size: 0.95rem;
        border-radius: 8px;
        width: 100%;
        text-align: center;
    }

    .home-hero {
        min-height: auto;
        padding: 20px 15px 40px;
        flex-direction: column;
    }

    .definitions,
    .about-preview,
    .features-grid,
    .stats-grid,
    .highlight-list,
    .markets-grid,
    .contact-grid,
    .footer-grid,
    .team-grid,
    .team-leadership,
    .benefits-grid,
    .roles-section,
    .about-profiles,
    .about-story,
    .about-bio,
    .about-bio--right,
    .carrier-highlights,
    .social-feeds,
    .testimonials-grid,
    .story-block,
    .story-block--reverse,
    .carrier-perks-grid,
    .carrier-photo-grid {
        grid-template-columns: 1fr;
    }

    .team-grid--centered.team-grid--pair {
        grid-template-columns: 1fr;
    }

    .roles-column h3 {
        min-height: 0;
    }

    .story-block--reverse {
        direction: ltr;
    }

    .section { padding: 50px 0; }
}

@media (max-width: 992px) and (min-width: 769px) {
    .features-grid,
    .team-grid,
    .benefits-grid,
    .markets-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .carrier-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Generic Primary Button ===== */
.btn-primary {
    display: inline-block;
    padding: 14px 36px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 15px rgba(46,158,107,0.25);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46,158,107,0.4);
    outline: none;
}
.btn-primary:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}
.btn-lg {
    padding: 18px 48px;
    font-size: 1.15rem;
}

/* ===== Apply CTA (careers page) ===== */
.apply-cta {
    text-align: center;
    padding: 50px 40px;
    background: var(--color-bg-light);
    border-radius: 10px;
    margin-top: 40px;
    border: 1px solid var(--color-accent);
}
.apply-cta h2 {
    margin-bottom: 10px;
    color: var(--color-primary);
}
.apply-cta p {
    font-size: 1.1rem;
    margin-bottom: 24px;
    color: var(--color-text-light);
}

/* ===== Application Form ===== */
.application-form {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--color-bg);
    padding: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.form-group {
    margin-bottom: 22px;
}
.form-group.hidden {
    display: none;
}
.form-group label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.form-group .required {
    color: var(--color-accent);
    margin-left: 2px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.application-form input[type="text"],
.application-form input[type="email"],
.application-form input[type="tel"],
.application-form select,
.application-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}
.application-form textarea {
    resize: vertical;
    min-height: 110px;
    font-family: var(--font-primary);
}
.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(46,158,107,0.15);
}
.form-actions {
    margin-top: 30px;
    text-align: center;
}
.form-note {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* ===== Dark Mode: Apply CTA + Form ===== */
body.dark-mode .apply-cta {
    background: #1a2540;
}
body.dark-mode .apply-cta h2 {
    color: #e0e6f0;
}
body.dark-mode .apply-cta p,
body.dark-mode .form-note {
    color: #a0aabe;
}
body.dark-mode .application-form {
    background: #1a2540;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
body.dark-mode .application-form label {
    color: #e0e6f0;
}
body.dark-mode .application-form input[type="text"],
body.dark-mode .application-form input[type="email"],
body.dark-mode .application-form input[type="tel"],
body.dark-mode .application-form select,
body.dark-mode .application-form textarea {
    background: #111b33;
    color: #e0e6f0;
    border-color: rgba(255,255,255,0.18);
}
body.dark-mode .application-form input::placeholder,
body.dark-mode .application-form textarea::placeholder {
    color: #7a85a0;
}

/* ===== Mobile: Application Form ===== */
@media (max-width: 600px) {
    .application-form {
        padding: 24px;
    }
    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .btn-lg {
        padding: 14px 32px;
        font-size: 1.05rem;
    }
    .apply-cta {
        padding: 36px 24px;
    }
}

/* ===== Form: 3-column row variant ===== */
.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* ===== Section labels & optional tag ===== */
.form-section-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.optional {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 4px;
}

/* ===== Work History: repeating inline rows ===== */
.job-entries-header,
.job-entry {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.7fr 1.5fr 1.5fr 36px;
    gap: 8px;
    align-items: center;
}
.job-entries-header {
    margin-bottom: 6px;
    padding: 0 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.job-entries-header-spacer {
    /* empty header slot above the remove button column */
}
.job-entries {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.job-entry {
    background: var(--color-bg-light);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 10px;
}
.application-form .job-entry input[type="text"] {
    padding: 9px 10px;
    font-size: 0.95rem;
    background: var(--color-bg);
}
.remove-job-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-light);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    padding: 0;
    justify-self: center;
}
.remove-job-btn:hover:not(:disabled) {
    background: rgba(192, 57, 43, 0.12);
    color: #c0392b;
}
.remove-job-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.add-job-btn {
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1.5px solid var(--color-accent);
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.add-job-btn:hover,
.add-job-btn:focus {
    background: var(--color-accent);
    color: #fff;
    outline: none;
}

/* ===== Radio group (Yes/No) ===== */
.radio-group {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 4px 0;
}
.radio-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-text);
}
.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* ===== Dark Mode: new bits ===== */
body.dark-mode .form-section-label {
    color: #e0e6f0;
}
body.dark-mode .optional {
    color: #a0aabe;
}
body.dark-mode .job-entries-header {
    color: #a0aabe;
}
body.dark-mode .job-entry {
    background: #111b33;
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .application-form .job-entry input[type="text"] {
    background: #0c1429;
}
body.dark-mode .remove-job-btn {
    color: #a0aabe;
}
body.dark-mode .remove-job-btn:hover:not(:disabled) {
    background: rgba(229, 80, 70, 0.2);
    color: #ff6b6b;
}
body.dark-mode .radio-option {
    color: #e0e6f0;
}

/* ===== Mobile: new bits ===== */
@media (max-width: 700px) {
    .job-entries-header {
        display: none;
    }
    .job-entry {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
    }
    .remove-job-btn {
        justify-self: end;
    }
}

/* ===================================================================== */
/* ===== Careers: DB-driven roles, form feedback, admin ================ */
/* ===================================================================== */

/* ===== Utility ===== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Careers page: role rows ===== */
.role-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.role-title {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.role-title a {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom: 1px solid transparent;
}
.role-title a:hover,
.role-title a:focus {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    outline: none;
}
.role-title small {
    color: var(--color-accent);
    font-weight: 600;
}
.role-closed {
    color: var(--color-text-light);
}
.role-blurb {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.45;
}
.roles-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-light);
    font-size: 1.05rem;
}
.roles-empty a {
    color: var(--color-accent);
    font-weight: 600;
}

body.dark-mode .role-title a { color: #e0e6f0; }
body.dark-mode .role-title a:hover,
body.dark-mode .role-title a:focus { color: var(--color-accent); }
body.dark-mode .role-closed,
body.dark-mode .role-blurb,
body.dark-mode .roles-empty { color: #a0aabe; }
body.dark-mode .roles-column ul li { border-bottom-color: rgba(255,255,255,0.1); }

/* ===== Form feedback: alerts, field errors, helper text ===== */
.form-alert {
    max-width: 1000px;
    margin: 0 auto 24px;
    padding: 16px 20px;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 0.98rem;
    line-height: 1.55;
}
.form-alert-error {
    background: #fdf1f0;
    border-left-color: #d9483f;
    color: #8f2d26;
}
.form-alert-success {
    background: #eef8f3;
    border-left-color: var(--color-accent);
    color: #1d6b48;
}
.field-error {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #d9483f;
}
.field-help {
    display: block;
    margin-top: -4px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--color-text-light);
}
.application-form .has-error,
.admin-panel .has-error {
    border-color: #d9483f;
}
.application-form .has-error:focus {
    border-color: #d9483f;
    box-shadow: 0 0 0 3px rgba(217,72,63,0.15);
}

body.dark-mode .form-alert-error {
    background: rgba(217,72,63,0.15);
    color: #ffb3ad;
}
body.dark-mode .form-alert-success {
    background: rgba(46,158,107,0.15);
    color: #8fe0bb;
}
body.dark-mode .field-error { color: #ff8b82; }
body.dark-mode .field-help { color: #a0aabe; }

/* Spam trap. Must stay visually and programmatically out of the way without
   using display:none, which some bots detect and skip. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== Apply form: per-role question sets ===== */
.job-questions {
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    padding: 22px 24px 4px;
    margin-bottom: 24px;
    background: var(--color-bg-light);
    min-width: 0;
}
.job-questions[hidden] {
    display: none;
}
.job-questions legend {
    padding: 0 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-accent);
}

body.dark-mode .job-questions {
    background: #1a2540;
    border-color: rgba(46,158,107,0.6);
}

/* ===== Apply confirmation ===== */
.apply-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 2rem;
    line-height: 64px;
    text-align: center;
}
.apply-cta .form-note a {
    color: var(--color-accent);
    font-weight: 600;
}
.apply-cta .btn-primary {
    margin-top: 22px;
}

/* ===== Status dots (dot AND label — never colour alone) ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-text-light);
    flex-shrink: 0;
}
.status-dot-new,
.status-dot-open { background: var(--color-accent); }
.status-dot-reviewing { background: #d99a2b; }
.status-dot-interviewed { background: #2b7fd9; }
.status-dot-offer { background: #7d4fd9; }
.status-dot-hired { background: #1d6b48; }
.status-dot-rejected,
.status-dot-closed { background: #8a94a6; }

/* ===================================================================== */
/* ===== Careers admin ================================================= */
/* ===================================================================== */

.admin-section {
    padding-top: 40px;
}
.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.admin-title {
    font-size: 2rem;
    color: var(--color-primary);
}
.admin-lede {
    color: var(--color-text-light);
    margin-top: 4px;
}
.admin-lede a { color: var(--color-accent); font-weight: 600; }
.admin-logout-form { flex-shrink: 0; }

.admin-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 22px 0 28px;
    border-bottom: 2px solid rgba(0,0,0,0.08);
    padding-bottom: 0;
}
.admin-nav-link {
    padding: 10px 18px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-light);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.admin-nav-link:hover,
.admin-nav-link:focus {
    color: var(--color-accent);
    outline: none;
}
.admin-nav-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}

.admin-flashes { margin-bottom: 24px; }
.admin-flashes .form-alert { margin-left: 0; max-width: none; }

/* ----- Panels ----- */
.admin-panel {
    background: var(--color-bg);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 26px 28px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.admin-panel h2 {
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-accent);
}
.admin-panel p { color: var(--color-text-light); }
.admin-panel-danger {
    border-color: rgba(217,72,63,0.4);
}
.admin-panel-danger h2 {
    color: #d9483f;
    border-bottom-color: rgba(217,72,63,0.4);
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Admin forms reuse .form-group but not .application-form, so the field
   styling has to be restated for these containers. */
.admin-panel input[type="text"],
.admin-panel input[type="number"],
.admin-panel input[type="search"],
.admin-panel input[type="email"],
.admin-panel input[type="password"],
.admin-panel select,
.admin-panel textarea,
.admin-login-card input,
.admin-filters input,
.admin-filters select {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--font-primary);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.admin-panel textarea {
    resize: vertical;
    min-height: 90px;
}
.admin-panel input:focus,
.admin-panel select:focus,
.admin-panel textarea:focus,
.admin-login-card input:focus,
.admin-filters input:focus,
.admin-filters select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(46,158,107,0.15);
}

.admin-login-card {
    max-width: 420px;
    background: var(--color-bg);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* ----- Buttons ----- */
.admin-btn {
    display: inline-block;
    padding: 9px 18px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    background: var(--color-accent);
    border: 1.5px solid var(--color-accent);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.admin-btn:hover,
.admin-btn:focus {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    outline: none;
}
.admin-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}
.admin-btn-quiet {
    background: transparent;
    color: var(--color-primary);
    border-color: rgba(0,0,0,0.2);
}
.admin-btn-quiet:hover,
.admin-btn-quiet:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.admin-btn-danger {
    background: transparent;
    color: #d9483f;
    border-color: rgba(217,72,63,0.5);
}
.admin-btn-danger:hover,
.admin-btn-danger:focus {
    background: #d9483f;
    border-color: #d9483f;
    color: #fff;
}
.admin-back {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.95rem;
}

/* ----- Stat row (status filter chips) ----- */
.admin-stat-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.admin-stat {
    flex: 1 1 110px;
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    text-align: center;
    transition: border-color var(--transition), transform var(--transition);
}
.admin-stat:hover,
.admin-stat:focus {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    outline: none;
}
.admin-stat.active {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}
.admin-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--color-primary);
    line-height: 1.1;
}
.admin-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* ----- Filters ----- */
.admin-filters {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 18px 20px;
    background: var(--color-bg);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
}
.admin-filter-field {
    flex: 1 1 200px;
    min-width: 0;
}
.admin-filter-field label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.admin-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ----- Tables ----- */
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: var(--color-bg);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.admin-table th,
.admin-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.admin-table th {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--color-bg-light); }
.admin-cell-date,
.admin-cell-num { white-space: nowrap; color: var(--color-text-light); }
.admin-cell-contact { font-size: 0.88rem; }
.admin-cell-contact a { color: var(--color-accent); }
.admin-cell-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.admin-link-strong {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom: 1px solid transparent;
}
.admin-link-strong:hover,
.admin-link-strong:focus {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    outline: none;
}
.admin-note,
.admin-slug {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-light);
}
.admin-note { color: var(--color-accent); font-weight: 600; }

/* ----- Definition lists / long text ----- */
.admin-dl {
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    gap: 10px 18px;
}
.admin-dl dt {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-light);
}
.admin-dl dd { color: var(--color-text); }
.admin-dl dd a { color: var(--color-accent); }
.admin-longtext {
    white-space: pre-wrap;
    color: var(--color-text);
    line-height: 1.65;
}
.admin-empty {
    padding: 26px;
    text-align: center;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    border-radius: 8px;
}
.admin-empty a { color: var(--color-accent); font-weight: 600; }

/* ----- Question editor rows ----- */
.admin-question-row {
    padding: 18px 20px;
    margin-bottom: 16px;
    background: var(--color-bg-light);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
}
.admin-question-row:last-of-type { margin-bottom: 0; }
.admin-question-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===== Dark mode: careers admin ===== */
body.dark-mode .admin-title,
body.dark-mode .admin-panel h2,
body.dark-mode .admin-stat-value,
body.dark-mode .admin-filter-field label,
body.dark-mode .admin-link-strong,
body.dark-mode .admin-nav-link.active { color: #e0e6f0; }
body.dark-mode .admin-lede,
body.dark-mode .admin-panel p,
body.dark-mode .admin-nav-link,
body.dark-mode .admin-stat-label,
body.dark-mode .admin-cell-date,
body.dark-mode .admin-cell-num,
body.dark-mode .admin-dl dt,
body.dark-mode .admin-note + .admin-slug,
body.dark-mode .admin-slug,
body.dark-mode .admin-empty { color: #a0aabe; }
body.dark-mode .admin-dl dd,
body.dark-mode .admin-longtext { color: #e0e6f0; }

body.dark-mode .admin-panel,
body.dark-mode .admin-login-card,
body.dark-mode .admin-filters,
body.dark-mode .admin-stat,
body.dark-mode .admin-table-wrap {
    background: #1a2540;
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .admin-question-row,
body.dark-mode .admin-empty {
    background: #111b33;
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .admin-panel input[type="text"],
body.dark-mode .admin-panel input[type="number"],
body.dark-mode .admin-panel input[type="search"],
body.dark-mode .admin-panel input[type="email"],
body.dark-mode .admin-panel input[type="password"],
body.dark-mode .admin-panel select,
body.dark-mode .admin-panel textarea,
body.dark-mode .admin-login-card input,
body.dark-mode .admin-filters input,
body.dark-mode .admin-filters select {
    background: #0c1429;
    color: #e0e6f0;
    border-color: rgba(255,255,255,0.15);
}
body.dark-mode .admin-panel input::placeholder,
body.dark-mode .admin-panel textarea::placeholder { color: #6b7688; }
body.dark-mode .admin-table th {
    background: #111b33;
    color: #a0aabe;
    border-bottom-color: rgba(255,255,255,0.12);
}
body.dark-mode .admin-table td { border-bottom-color: rgba(255,255,255,0.09); }
body.dark-mode .admin-table tbody tr:hover { background: rgba(255,255,255,0.04); }
body.dark-mode .admin-nav { border-bottom-color: rgba(255,255,255,0.12); }
body.dark-mode .admin-btn-quiet {
    color: #e0e6f0;
    border-color: rgba(255,255,255,0.25);
}
body.dark-mode .admin-btn-quiet:hover,
body.dark-mode .admin-btn-quiet:focus {
    background: #e0e6f0;
    border-color: #e0e6f0;
    color: #111b33;
}

/* ===== Mobile: careers + admin ===== */
@media (max-width: 768px) {
    .admin-detail-grid { grid-template-columns: 1fr; }
    .admin-dl { grid-template-columns: 1fr; gap: 4px 0; }
    .admin-dl dd { margin-bottom: 12px; }
    .admin-header { flex-direction: column; }
    .admin-panel { padding: 20px 18px; }
    .admin-title { font-size: 1.6rem; }
    .admin-filters { flex-direction: column; align-items: stretch; }
    .admin-filter-actions { justify-content: flex-start; }
    .job-questions { padding: 18px 16px 2px; }
}

/* ===== Careers admin: standalone header (separate service, own shell) ===== */
.admin-site-header {
    border-bottom: 3px solid var(--color-accent);
}
.admin-env-badge {
    padding: 5px 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--color-primary);
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    white-space: nowrap;
}
body.dark-mode .admin-env-badge {
    background: var(--color-accent);
    color: #0c1429;
    border-color: #e0e6f0;
}
@media (max-width: 768px) {
    .admin-env-badge {
        font-size: 0.62rem;
        padding: 4px 9px;
    }
}

/* ===== Platform Cards (Technology) & Platform Pages ===== */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.platform-card {
    --platform-accent: var(--color-accent);
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--color-bg);
    border: 1px solid rgba(17, 27, 51, 0.08);
    border-top: 4px solid var(--platform-accent);
    border-radius: 12px;
    color: var(--color-text);
    box-shadow: 0 4px 18px rgba(17, 27, 51, 0.06);
    transition: transform var(--transition), box-shadow var(--transition);
}

.platform-card:hover {
    color: var(--color-text);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(17, 27, 51, 0.14);
}

.platform-card--customer       { --platform-accent: var(--color-accent); }
.platform-card--carrier-portal { --platform-accent: var(--color-platform-carrier-portal); }
.platform-card--carrier        { --platform-accent: var(--color-platform-carrier); }
.platform-card--broker         { --platform-accent: var(--color-platform-broker); }

.platform-card__eyebrow {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--platform-accent);
}

.platform-card__name {
    font-size: 1.35rem;
    margin: 10px 0 12px;
    color: var(--color-primary);
}

.platform-card__desc {
    flex: 1 1 auto;
    font-size: 0.98rem;
    color: var(--color-text-light);
    margin-bottom: 22px;
}

/* Status is a dot AND a text label, never colour on its own. */
.platform-card__status,
.platform-page__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(17, 27, 51, 0.06);
    color: var(--color-text-light);
    font-size: 0.85rem;
    font-weight: 600;
}

.platform-card__dot,
.platform-page__dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--platform-accent);
}

/* A shipped product reads differently from one still being built. The dot
   changes colour, but "Available now" vs "Under development" is the part that
   actually carries the meaning. */
.platform-card__status--live,
.platform-page__status--live {
    background: rgba(46, 158, 107, 0.12);
    color: var(--color-accent-hover);
}
.platform-card__status--live .platform-card__dot,
.platform-page__status--live .platform-page__dot { background: var(--color-status-live); }

body.dark-mode .platform-card {
    background: #1a2540;
    border-color: rgba(255, 255, 255, 0.10);
    color: #e0e6f0;
}
body.dark-mode .platform-card:hover { color: #e0e6f0; }
body.dark-mode .platform-card__name { color: #ffffff; }
body.dark-mode .platform-card__desc { color: #a0aabe; }
body.dark-mode .platform-card__status,
body.dark-mode .platform-page__status {
    background: rgba(255, 255, 255, 0.08);
    color: #a0aabe;
}
/* Needs the same specificity as the rule above, or the live badge loses its
   tint in dark mode and only the dot distinguishes it. */
body.dark-mode .platform-card__status--live,
body.dark-mode .platform-page__status--live {
    background: rgba(46, 158, 107, 0.18);
    color: #7fd3a8;
}

/* --- The individual product pages --- */
/* These pages are deliberately sparse, so hold a minimum height and keep the
   footer from riding up the screen on a tall viewport. */
.platform-page { min-height: 60vh; }

.page-platform { --platform-accent: var(--color-accent); }
.page-platform--customer       { --platform-accent: var(--color-accent); }
.page-platform--carrier-portal { --platform-accent: var(--color-platform-carrier-portal); }
.page-platform--carrier        { --platform-accent: var(--color-platform-carrier); }
.page-platform--broker         { --platform-accent: var(--color-platform-broker); }

.platform-page__inner {
    max-width: 720px;
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
}

.platform-page__logo {
    max-width: 280px;
    margin-bottom: 34px;
}

.platform-page__eyebrow {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--platform-accent);
    margin-bottom: 10px;
}

.platform-page__title {
    margin-bottom: 18px;
    /* The accent underline is decorative; "Under development" below is the
       actual status and is always spelled out in words. */
    border-bottom: 4px solid var(--platform-accent);
    display: inline-block;
    padding-bottom: 10px;
}

.platform-page__status { margin: 0 auto 26px; align-self: center; }

.platform-page__lead {
    font-size: 1.15rem;
    margin-bottom: 20px;
}

.platform-page__note { margin-bottom: 36px; }

.platform-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.platform-page__cta,
.platform-page__back {
    display: inline-block;
    padding: 14px 34px;
    background: var(--platform-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    border-radius: 8px;
    transition: transform var(--transition), filter var(--transition);
}
.platform-page__cta:hover,
.platform-page__back:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.platform-page__link {
    font-weight: 600;
    color: var(--platform-accent);
}
.platform-page__link:hover { filter: brightness(1.15); }

body.dark-mode .platform-page__title { color: #ffffff; }

/* --- Feature list on a platform page --- */
.platform-page__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 0 0 36px;
    text-align: left;
}

.platform-feature {
    padding: 20px 22px;
    background: var(--color-bg);
    border: 1px solid rgba(17, 27, 51, 0.08);
    border-left: 3px solid var(--platform-accent);
    border-radius: 10px;
}

/* The last item sits alone on the bottom row of a 2-up grid, so let it span. */
.platform-feature:last-child:nth-child(odd) { grid-column: 1 / -1; }

.platform-feature__name {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.platform-feature__desc {
    font-size: 0.94rem;
    color: var(--color-text-light);
    margin: 0;
}

body.dark-mode .platform-feature {
    background: #1a2540;
    border-color: rgba(255, 255, 255, 0.10);
    border-left-color: var(--platform-accent);
}
body.dark-mode .platform-feature__name { color: #ffffff; }
body.dark-mode .platform-feature__desc { color: #a0aabe; }

@media (max-width: 1000px) {
    .platform-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .platform-grid { grid-template-columns: 1fr; gap: 20px; }
    .platform-page__inner { padding-top: 30px; padding-bottom: 40px; }
    .platform-page__logo { max-width: 200px; margin-bottom: 26px; }
    .platform-page__lead { font-size: 1.05rem; }
    .platform-page__features { grid-template-columns: 1fr; gap: 14px; }
    .platform-page__actions { flex-direction: column; }
    .platform-page__back { width: 100%; text-align: center; }
}

/* ===== Apply form: document uploads ===== */
.upload-group {
    border: 1px dashed rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 20px 24px 4px;
    margin-bottom: 24px;
    min-width: 0;
}
.upload-group legend {
    padding: 0 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
}
.application-form input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
}
.application-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    background: var(--color-accent);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.application-form input[type="file"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(46,158,107,0.15);
}
.upload-reattach-note {
    margin-bottom: 14px;
    color: #d9483f;
    font-weight: 600;
}
body.dark-mode .upload-group {
    border-color: rgba(255,255,255,0.22);
}
body.dark-mode .upload-group legend {
    color: #e0e6f0;
}
body.dark-mode .application-form input[type="file"] {
    background: #0c1429;
    color: #e0e6f0;
    border-color: rgba(255,255,255,0.15);
}
body.dark-mode .upload-reattach-note {
    color: #ff8b82;
}

/* ===== Admin portal landing ===== */
.admin-portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}
.admin-portal-card {
    margin-bottom: 0;
}
.admin-portal-state {
    margin: 14px 0 18px;
}
.admin-portal-card code,
.admin-panel code {
    padding: 2px 6px;
    font-size: 0.85em;
    background: var(--color-bg-light);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
}
body.dark-mode .admin-portal-card code,
body.dark-mode .admin-panel code {
    background: #0c1429;
    border-color: rgba(255,255,255,0.12);
    color: #e0e6f0;
}

/* ===== Admin: visitor metrics ===== */
.admin-metric-grid {
    margin-bottom: 24px;
}
.admin-metric-card {
    margin-bottom: 0;
}
.admin-metric-figure {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary);
}
.admin-metric-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: 16px;
}
.admin-metric-dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 0.88rem;
}
.admin-metric-dl dt { color: var(--color-text-light); }
.admin-metric-dl dd {
    font-weight: 700;
    color: var(--color-text);
    text-align: right;
}
/* Addresses line up column-wise when they are all the same width. */
.admin-metric-ip {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.86rem;
    color: var(--color-text);
}
body.dark-mode .admin-metric-figure { color: var(--color-accent); }
body.dark-mode .admin-metric-dl { border-top-color: rgba(255,255,255,0.12); }
body.dark-mode .admin-metric-dl dd,
body.dark-mode .admin-metric-ip { color: #e0e6f0; }

/* ----- Reporting-period tabs ----- */
.admin-period {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.admin-period-link {
    padding: 7px 16px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
}
.admin-period-link:hover,
.admin-period-link:focus {
    color: var(--color-accent);
    border-color: var(--color-accent);
    outline: none;
}
.admin-period-link.active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}
body.dark-mode .admin-period-link {
    background: #0c1429;
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .admin-period-link.active {
    color: var(--color-primary);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* ===== Admin: news list ===== */
.admin-feed-count {
    float: right;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--color-text-light);
    text-transform: none;
    letter-spacing: 0;
}
.admin-cell-url {
    max-width: 320px;
}
.admin-cell-url span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    color: var(--color-text-light);
}
.admin-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}
body.dark-mode .admin-feed-count,
body.dark-mode .admin-cell-url span {
    color: #a0aabe;
}

@media (max-width: 768px) {
    .admin-feed-count { float: none; display: block; margin-top: 4px; }
    .admin-cell-url { max-width: 200px; }
    .upload-group { padding: 16px 14px 2px; }
}

/* ===== Admin: news priority / sticky marker ===== */
.admin-sticky-note {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 7px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--color-accent);
    border-radius: 999px;
}
body.dark-mode .admin-sticky-note {
    background: var(--color-accent);
    color: #0c1429;
}

/* ===== Landing game ("Keep It On The Road") =====
   The canvas is drawn by static/js/game.js; everything here positions the HUD
   and the start / game-over overlays on top of it. */
.game-header p {
    color: rgba(255,255,255,0.85);
    max-width: 860px;
    margin: 0 auto;
}

.game-header kbd,
.game-overlay kbd {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.14);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1.5;
}

.game-section {
    padding: 40px 0 60px;
}

.game-stage {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--color-accent);
    box-shadow: 0 14px 40px rgba(17,27,51,0.28);
    background: var(--color-primary);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: default;
}

.game-stage canvas {
    display: block;
    width: 100%;
    height: auto;
}

.game-hud {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

.game-stat {
    min-width: 96px;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(17,27,51,0.72);
    border: 1px solid rgba(46,158,107,0.6);
    color: #fff;
    font-family: var(--font-heading);
    text-align: center;
}

.game-stat-label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}

.game-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
}

.game-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: rgba(17,27,51,0.62);
    color: #fff;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Our display:flex would otherwise beat the browser's [hidden] rule. */
.game-overlay[hidden] {
    display: none;
}

.game-overlay h2 {
    color: #fff;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    margin-bottom: 0.4em;
}

.game-overlay p {
    max-width: 460px;
    margin-bottom: 1.1em;
    line-height: 1.5;
}

.game-overlay .btn-primary {
    font-family: var(--font-heading);
    font-weight: 700;
}

.game-hint {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 0.9em;
}

/* Tracking request banner: pulses amber until answered, flashes green when it is. */
.game-tracking {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 260px;
    max-width: 90%;
    padding: 10px 18px 8px;
    border: 2px solid #ffd23f;
    border-radius: 12px;
    background: rgba(17,27,51,0.9);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    animation: gameTrackPulse 0.7s ease-in-out infinite alternate;
    z-index: 2;
}

.game-tracking[hidden] {
    display: none;
}

.game-tracking.is-on {
    border-color: var(--color-accent);
    animation: none;
}

.game-tracking-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.game-tracking-text kbd {
    display: inline-block;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.14);
    font-family: var(--font-heading);
    font-weight: 700;
}

.game-tracking-bar {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
}

.game-tracking-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: #ffd23f;
}

.game-tracking.is-on .game-tracking-fill {
    background: var(--color-accent);
}

@keyframes gameTrackPulse {
    from { box-shadow: 0 0 0 0 rgba(255,210,63,0.0); }
    to   { box-shadow: 0 0 0 8px rgba(255,210,63,0.35); }
}

.game-over-reason {
    opacity: 0.85;
}

.game-over-distance strong {
    color: var(--color-accent);
    font-size: 1.2em;
}

.game-over-best {
    color: var(--color-accent);
    font-weight: 700;
}

.game-footnote {
    text-align: center;
    margin-top: 22px;
    color: var(--color-text-light);
}

body.dark-mode .game-footnote {
    color: #a9b4c6;
}

@media (max-width: 600px) {
    .game-hud { gap: 6px; top: 8px; left: 8px; right: 8px; }
    .game-stat { min-width: 0; padding: 4px 8px; }
    .game-stat-value { font-size: 0.9rem; }
    .game-overlay p { font-size: 0.9rem; }
    .game-tracking { top: 52px; min-width: 0; font-size: 0.85rem; padding: 8px 12px 6px; }
}

/* ----- Landing game: region toast, leaderboard, save form ----- */
/* "Now entering ..." card: pinned to the bottom edge of the stage, rounded on
   top only, no bottom border - the stage's edge is the card's edge. */
/* ===== Game: the opening tutorial cards ===== */
/* Parked just above centre: clear of the HUD and the tracking banner up top,
   the region banner along the bottom, and the truck itself. Non-interactive -
   every control it names is somewhere else on the stage. */
.game-tutorial {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 78%;
    padding: 14px 22px 12px;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 14px;
    background: rgba(17,27,51,0.82);
    color: #fff;
    text-align: center;
    pointer-events: none;
    z-index: 2;
    animation: gameTutorialIn 0.25s ease both;
}

.game-tutorial[hidden] {
    display: none;
}

.game-tutorial-icons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

/* One blink per 1.4s - a slow pulse that draws the eye without strobing.
   Well under the 3 Hz flash threshold, and stilled entirely below for anyone
   who has asked for reduced motion. */
.game-tutorial-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 2px solid var(--color-accent);
    border-radius: 9px;
    background: rgba(255,255,255,0.12);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1;
    animation: gameTutorialBlink 1.4s ease-in-out infinite;
}

.game-tutorial-icon.is-tap,
.game-tutorial-icon.is-brake {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.game-tutorial-icon.is-brake {
    border-color: rgba(255,255,255,0.7);
    background: rgba(184,35,26,0.85);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
}

.game-tutorial-icon.is-pin {
    border-color: #ffd23f;
}

/* The arrow cluster in its real inverted-T: up on its own row, left/down/right
   beneath. Unlit keys stay on the card on purpose - the shape is what makes it
   read as the arrow keys on the keyboard rather than a pair of loose glyphs. */
.game-tutorial-keys {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.game-tutorial-keyrow {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.game-tutorial-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.4);
    border-bottom-width: 3px;                /* the lip that makes it a keycap */
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

.game-tutorial-key.is-lit {
    border-color: var(--color-accent);
    background: rgba(46,158,107,0.35);
    color: #fff;
    animation: gameTutorialKey 1.4s ease-in-out infinite;
}

/* Pressing down as it blinks: the lip shortens and the cap sinks onto it, so
   the key reads as being struck rather than just brightening. */
@keyframes gameTutorialKey {
    0%, 100% { transform: translateY(0); border-bottom-width: 3px; opacity: 1; }
    50%      { transform: translateY(2px); border-bottom-width: 1px; opacity: 0.72; }
}

.game-tutorial-text {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

@keyframes gameTutorialIn {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes gameTutorialBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
    .game-tutorial { animation: none; }
    .game-tutorial-icon { animation: none; }
    .game-tutorial-key.is-lit { animation: none; }
}

.game-region {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 18px 12px;
    border-radius: 14px 14px 0 0;
    background: rgba(17,27,51,0.88);
    border: 1px solid rgba(255,255,255,0.3);
    border-bottom: none;
    color: #fff;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    animation: gameRegionIn 2.6s ease both;
}

.game-region[hidden] {
    display: none;
}

.game-region small {
    display: block;
    text-align: center;
    font-family: var(--font-body, inherit);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
}

@keyframes gameRegionIn {
    0%   { opacity: 0; transform: translateY(100%); }
    12%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(100%); }
}

/* The departure banner shown as a run leaves the Fresno yard: same toast, with
   the logo, a green edge and a longer dwell (game.js hides it on the same 4s). */
.game-region.is-departure {
    background: rgba(17,27,51,0.94);
    border-color: rgba(46,158,107,0.85);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.28);
    white-space: normal;
    animation-duration: 4s;
}

.game-region.is-departure img {
    display: inline-block;
    vertical-align: middle;
    height: 1.7em;
    width: auto;
    margin-right: 10px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #fff;
}

body.dark-mode .game-region.is-departure {
    background: rgba(8,14,28,0.94);
    border-color: rgba(46,158,107,0.7);
}

.game-overlay-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.game-outline-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 6px;
    border: 2px solid var(--color-accent);
    background: transparent;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.game-outline-btn:hover {
    background: var(--color-accent);
}

.game-outline-btn[hidden] {
    display: none;
}

.game-board-section {
    padding: 50px 0 70px;
}

.game-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.game-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    border-top: 4px solid var(--color-accent);
    box-shadow: 0 6px 24px rgba(17,27,51,0.08);
}

body.dark-mode .game-card {
    background: #16213d;
    color: #e0e6f0;
}

.game-card h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5em;
}

.game-save-status {
    color: var(--color-text-light);
    margin-bottom: 1em;
}

body.dark-mode .game-save-status {
    color: #a9b4c6;
}

.game-form-row,
.game-form-grid {
    margin-bottom: 14px;
}

.game-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.game-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.game-form label span {
    font-weight: 400;
    color: var(--color-text-light);
}

body.dark-mode .game-form label span {
    color: #a9b4c6;
}

.game-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cfd6e0;
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: var(--color-text);
}

.game-form input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(46,158,107,0.2);
}

.game-form input[aria-invalid="true"] {
    border-color: #c0392b;
}

body.dark-mode .game-form input {
    background: #0f172c;
    border-color: #2b3a5c;
    color: #e0e6f0;
}

.game-form-note {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

body.dark-mode .game-form-note {
    color: #a9b4c6;
}

.game-form .btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.game-form-msg {
    margin-top: 12px;
    font-weight: 600;
    min-height: 1.4em;
}

.game-form-msg.is-error {
    color: #c0392b;
}

.game-form-msg.is-ok {
    color: var(--color-accent);
}

/* Off-screen, not display:none, so bots that skip hidden fields still fill it. */
.game-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.game-table-wrap {
    overflow-x: auto;
}

.game-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.game-table th,
.game-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(17,27,51,0.08);
    white-space: nowrap;
}

body.dark-mode .game-table th,
body.dark-mode .game-table td {
    border-bottom-color: rgba(255,255,255,0.1);
}

.game-table th {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

body.dark-mode .game-table th {
    color: #a9b4c6;
}

.game-table td.game-rank {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-accent);
}

.game-table td.game-miles {
    font-weight: 700;
}

.game-table-empty {
    text-align: center !important;
    color: var(--color-text-light);
    white-space: normal !important;
}

@media (max-width: 768px) {
    .game-board {
        grid-template-columns: 1fr;
    }
}

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

/* ----- Landing game: compact header, brake button ----- */
.page-header.game-header {
    padding: 22px 0 20px;
}

.game-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.25em;
}

.game-header p {
    font-size: 0.95rem;
}

/* Only touch-only devices (phones, tablets: no hover) get the on-screen brake;
   anything with a mouse - touchscreen laptops included - has the down arrow. */
.game-brake {
    display: none;
    position: absolute;
    left: 61%;               /* just right of the trailer (centred, ~16.5% wide) */
    bottom: 8px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    background: rgba(184,35,26,0.85);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2;
}

.game-brake:active {
    background: rgba(255,90,74,0.95);
}

@media (hover: none) and (pointer: coarse) {
    .game-brake {
        display: block;
    }
}

/* ----- Landing game: two boards, form rationale ----- */
.game-save-why {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-left: 3px solid var(--color-accent);
    background: rgba(46,158,107,0.08);
    border-radius: 0 8px 8px 0;
}

.game-board-month {
    font-size: 0.7em;
    font-weight: 600;
    color: var(--color-text-light);
    margin-left: 6px;
}

body.dark-mode .game-board-month {
    color: #a9b4c6;
}

.game-board-blurb {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

body.dark-mode .game-board-blurb {
    color: #a9b4c6;
}

.game-board-alltime {
    margin-top: 26px;
}

/* Tracking request missed: the truck is pulled over. */
.game-tracking.is-missed {
    border-color: #ff5a4a;
    animation: none;
}

.game-tracking.is-missed .game-tracking-fill {
    background: #ff5a4a;
}

/* ===== Cookie / privacy notice ===== */
.cookie-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--color-accent);
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 10px 30px rgba(17,27,51,0.25);
    font-size: 0.9rem;
    line-height: 1.45;
}

.cookie-notice[hidden] {
    display: none;
}

body.dark-mode .cookie-notice {
    background: #16213d;
    color: #e0e6f0;
}

.cookie-notice p {
    margin: 0;
    flex: 1;
}

.cookie-notice-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    cursor: pointer;
}

.cookie-notice-btn:hover {
    background: var(--color-accent-hover);
}

@media (max-width: 600px) {
    .cookie-notice {
        flex-direction: column;
        align-items: stretch;
        left: 10px;
        right: 10px;
        bottom: 10px;
        font-size: 0.85rem;
    }
}

/* ----- Landing game: phone layout fixes ----- */
/* Grid tracks default to min-content width, so a six-column nowrap table made
   both cards wider than the page. minmax(0, 1fr) lets them shrink; the table
   then scrolls inside its own wrapper as intended. */
.game-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.game-card {
    min-width: 0;
}

/* The brake button only exists mid-run: never over the start / game-over screens. */
.game-stage:not(.is-running) .game-brake {
    display: none !important;
}

.game-overlay-mobile {
    display: none;
}

@media (max-width: 768px) {
    .game-board {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact stage (under 600px wide - a phone in either orientation). Set by
   game.js from the stage's own width, because a landscape phone has a wide
   viewport but a small stage, so a viewport media query would miss it. */
.game-stage.is-compact .game-overlay-desktop { display: none; }
.game-stage.is-compact .game-overlay-mobile { display: block; }
.game-stage.is-compact .game-overlay { padding: 12px; }
.game-stage.is-compact .game-overlay h2 { font-size: 1.2rem; margin-bottom: 0.25em; }
.game-stage.is-compact .game-overlay p { font-size: 0.8rem; margin-bottom: 0.7em; }
.game-stage.is-compact .game-overlay .btn-primary,
.game-stage.is-compact .game-outline-btn { padding: 9px 16px; font-size: 0.85rem; }
.game-stage.is-compact .game-overlay-actions { gap: 8px; }
.game-stage.is-compact .game-hud { top: 6px; left: 6px; right: 6px; gap: 4px; }
.game-stage.is-compact .game-stat { min-width: 0; padding: 3px 7px; border-radius: 7px; }
.game-stage.is-compact .game-stat-label { font-size: 0.55rem; }
.game-stage.is-compact .game-stat-value { font-size: 0.85rem; }

/* Tracking banner: one thin full-width strip tucked under the HUD. */
.game-stage.is-compact .game-tracking {
    top: 44px;
    left: 3%;
    right: 3%;
    transform: none;
    width: auto;
    max-width: none;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 8px;
    padding: 5px 10px 4px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.2;
}
.game-stage.is-compact .game-tracking-icon { font-size: 0.9rem; }
.game-stage.is-compact .game-tracking-text { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-stage.is-compact .game-tracking-text kbd { padding: 0 5px; }
.game-stage.is-compact .game-tracking-bar { flex: 1 1 100%; height: 3px; }
.game-stage.is-compact .game-region { font-size: 0.8rem; padding: 6px 10px 8px; border-radius: 10px 10px 0 0; }
.game-stage.is-compact .game-tutorial { max-width: 86%; padding: 10px 14px 9px; gap: 7px; border-radius: 11px; }
.game-stage.is-compact .game-tutorial-text { font-size: 0.8rem; }
.game-stage.is-compact .game-tutorial-icon { min-width: 32px; height: 32px; font-size: 1rem; padding: 0 8px; }
.game-stage.is-compact .game-tutorial-icon.is-brake { width: 38px; height: 38px; padding: 0; }
.game-stage.is-compact .game-tutorial-key { width: 27px; height: 25px; font-size: 0.85rem; }
.game-stage.is-compact .game-brake { width: 46px; height: 46px; font-size: 0.55rem; bottom: 6px; }

@media (max-width: 600px) {
    .game-card { padding: 20px 16px; }
    .game-table { font-size: 0.85rem; }
    .game-table th, .game-table td { padding: 7px 6px; }
}

/* ----- Leaderboard: tabs and two-line rows ----- */
/* Each entry is two table rows: rank / handle / miles, then a muted detail line
   spanning the width (top speed, tracked, where it ended). Three columns fit any
   phone without horizontal scrolling. */
.game-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 12px;
}

.game-tab {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(17,27,51,0.15);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.game-tab:hover {
    border-color: var(--color-accent);
}

.game-tab.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

body.dark-mode .game-tab {
    border-color: rgba(255,255,255,0.18);
    color: #e0e6f0;
}

body.dark-mode .game-tab.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.game-panel[hidden] {
    display: none;
}

.game-board-card .game-table {
    table-layout: auto;
}

.game-board-card .game-table th.game-col-num,
.game-board-card .game-table td.game-miles {
    text-align: right;
}

.game-board-card .game-table td.game-handle {
    white-space: normal;
    word-break: break-word;
    width: 100%;
}

.game-board-card .game-table td {
    border-bottom: none;
}

.game-board-card .game-table tr.game-row-main td {
    padding-bottom: 2px;
}

.game-board-card .game-table tr.game-row-sub td {
    padding-top: 0;
    padding-bottom: 9px;
    font-size: 0.78rem;
    color: var(--color-text-light);
    white-space: normal;
    border-bottom: 1px solid rgba(17,27,51,0.08);
}

body.dark-mode .game-board-card .game-table tr.game-row-sub td {
    color: #a9b4c6;
    border-bottom-color: rgba(255,255,255,0.1);
}

/* ----- Share your haul (LinkedIn) and the public share page ----- */
.haul-share {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(17,27,51,0.1);
}

.haul-share[hidden] {
    display: none;
}

body.dark-mode .haul-share {
    border-top-color: rgba(255,255,255,0.12);
}

.haul-share h3 {
    font-size: 1.05rem;
    margin-bottom: 0.35em;
}

.haul-share-copy {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 14px;
}

body.dark-mode .haul-share-copy {
    color: #a9b4c6;
}

.haul-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* LinkedIn's own blue: this button should look like what it does. */
.haul-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border: none;
    border-radius: 6px;
    background: #0a66c2;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.haul-share-btn:hover {
    background: #004182;
    transform: translateY(-1px);
}

.haul-share-in {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #fff;
    color: #0a66c2;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1;
}

.haul-outline {
    color: var(--color-primary);
}

body.dark-mode .haul-outline {
    color: #e0e6f0;
}

.haul-share-hint {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--color-text-light);
}

body.dark-mode .haul-share-hint {
    color: #a9b4c6;
}

.haul-share-hint.is-ok {
    color: var(--color-accent);
}

.haul-share-hint.is-error {
    color: #c0392b;
}

.haul-share-preview {
    margin-top: 10px;
    font-size: 0.85rem;
}

.haul-share-preview summary {
    cursor: pointer;
    color: var(--color-text-light);
}

body.dark-mode .haul-share-preview summary {
    color: #a9b4c6;
}

.haul-share-text {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(17,27,51,0.05);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

body.dark-mode .haul-share-text {
    background: rgba(255,255,255,0.06);
}

/* ----- The shared run's own page ----- */
.haul-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 14px;
    border-top: 4px solid var(--color-accent);
    background: #fff;
    box-shadow: 0 6px 24px rgba(17,27,51,0.08);
    text-align: center;
}

body.dark-mode .haul-card {
    background: #16213d;
    color: #e0e6f0;
}

.haul-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin-bottom: 22px;
}

.haul-stat {
    min-width: 92px;
}

.haul-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    color: var(--color-accent);
    line-height: 1.1;
}

.haul-stat-value.haul-stat-place {
    font-size: 1.1rem;
    color: var(--color-primary);
}

body.dark-mode .haul-stat-value.haul-stat-place {
    color: #e0e6f0;
}

.haul-stat-label {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

body.dark-mode .haul-stat-label {
    color: #a9b4c6;
}

.haul-cta-copy {
    max-width: 520px;
    margin: 0 auto 22px;
    color: var(--color-text-light);
}

body.dark-mode .haul-cta-copy {
    color: #a9b4c6;
}

.haul-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

@media (max-width: 600px) {
    .haul-card { padding: 24px 18px; }
    .haul-stats { gap: 18px; }
    .haul-stat-value { font-size: 1.6rem; }
}

/* The share panel says which run it is about to post (the player's best). */
.haul-share-what {
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 6px;
}

/* ===== Job descriptions (careers page, application form, admin) ===== */
.role-description--apply {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(17,27,51,0.1);
}

body.dark-mode .role-description--apply {
    border-bottom-color: rgba(255,255,255,0.12);
}

/* The rendered posting. Kept to a readable measure and indented off the
   accent rule so it reads as a document rather than more page furniture. */
.job-description {
    max-width: 760px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--color-accent);
    font-size: 0.95rem;
    line-height: 1.65;
}

.job-description h3 {
    font-size: 1.1rem;
    margin: 1.4em 0 0.4em;
    color: var(--color-primary);
}

body.dark-mode .job-description h3 {
    color: #e0e6f0;
}

.job-description h3:first-child {
    margin-top: 0.2em;
}

.job-description h4 {
    font-size: 0.98rem;
    margin: 1.1em 0 0.3em;
    color: var(--color-accent);
}

.job-description p {
    margin: 0 0 0.9em;
}

.job-description ul,
.job-description ol {
    margin: 0 0 1em 1.2em;
    padding: 0;
}

.job-description li {
    margin-bottom: 0.4em;
    list-style: disc outside;
}

.job-description ol li {
    list-style: decimal outside;
}

.job-description strong {
    color: var(--color-primary);
}

body.dark-mode .job-description strong {
    color: #fff;
}

.job-description a {
    color: var(--color-accent);
    text-decoration: underline;
}

.job-description-apply {
    margin-top: 1.4em;
}

/* Admin textarea for the posting: monospace, because it is lightly formatted. */
#description {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

.form-hint {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.form-hint code {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(17,27,51,0.07);
    font-size: 0.95em;
}

body.dark-mode .form-hint {
    color: #a9b4c6;
}

body.dark-mode .form-hint code {
    background: rgba(255,255,255,0.1);
}


/* ----- A single role's posting page ----- */
/* The posting page is a reader: it fills the container rather than sitting in a
   form-width column. The container itself (max 1200px) is the only cap, so the
   measure never runs away on an ultra-wide monitor. */
.job-posting {
    max-width: 1160px;
    margin: 0 auto;
}

.job-posting .job-description {
    max-width: none;
    padding: 4px 0 4px 26px;
    font-size: 1.02rem;
    line-height: 1.7;
}

.job-posting .job-description h3 {
    font-size: 1.25rem;
}

.job-posting .job-description h4 {
    font-size: 1.05rem;
}

.job-posting-back {
    margin-bottom: 18px;
    font-size: 0.9rem;
}

.job-posting-blurb {
    font-size: 1.05rem;
    color: var(--color-text-light);
    margin-bottom: 18px;
}

body.dark-mode .job-posting-blurb {
    color: #a9b4c6;
}

.job-posting-actions {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid rgba(17,27,51,0.1);
}

body.dark-mode .job-posting-actions {
    border-top-color: rgba(255,255,255,0.12);
}

.job-posting-closed {
    color: var(--color-text-light);
}

body.dark-mode .job-posting-closed {
    color: #a9b4c6;
}

/* These come last on purpose: the rules above have the same specificity, and a
   media query adds none — so they only win if they are later in the file. */
@media (max-width: 900px) {
    .job-posting .job-description {
        padding-left: 18px;
        font-size: 0.97rem;
        line-height: 1.65;
    }
    .job-posting .job-description h3 { font-size: 1.15rem; }
}

@media (max-width: 600px) {
    .job-description,
    .job-posting .job-description {
        padding-left: 12px;
        font-size: 0.92rem;
    }
    .job-posting .job-description h3 { font-size: 1.08rem; }
    .job-posting-blurb { font-size: 0.98rem; }
    .job-posting-back { margin-bottom: 12px; }
}

/* ===== Posting header pills =====
   Warm, rounded, house colours: a soft green wash with navy type, so the facts
   read as friendly tags rather than another table. */
.job-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.job-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(46,158,107,0.12);
    border: 1px solid rgba(46,158,107,0.28);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    list-style: none;
}

.job-pill span {
    font-size: 0.95em;
    line-height: 1;
}

/* The opening count is the one people look for: give it the accent fill. */
.job-pill--openings {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

body.dark-mode .job-pill {
    background: rgba(46,158,107,0.18);
    border-color: rgba(46,158,107,0.42);
    color: #e0e6f0;
}

body.dark-mode .job-pill--openings {
    background: var(--color-accent);
    color: #fff;
}

/* ===== Roles list: hover card =====
   Pointer devices only. Touch has no hover, and tapping the role opens the
   posting, which shows the same pills at the top. */
.role-item {
    position: relative;
}

.role-card {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% - 4px);
    z-index: 30;
    min-width: 250px;
    max-width: 320px;
    padding: 14px 16px 6px;
    border-radius: 12px;
    border: 1px solid var(--color-accent);
    background: #fff;
    box-shadow: 0 12px 30px rgba(17,27,51,0.18);
    pointer-events: none;
}

body.dark-mode .role-card {
    background: #16213d;
}

.role-card-title {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
}

body.dark-mode .role-card-title {
    color: #e0e6f0;
}

.role-card .job-pills {
    margin-bottom: 8px;
    gap: 6px;
}

.role-card .job-pill {
    padding: 5px 11px;
    font-size: 0.78rem;
}

@media (hover: hover) and (pointer: fine) {
    .role-item.has-meta:hover > .role-card,
    .role-item.has-meta:focus-within > .role-card {
        display: block;
        animation: roleCardIn 0.14s ease-out;
    }
}

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

/* Admin: the grouped posting-header fields. */
.admin-subform {
    margin: 0 0 22px;
    padding: 16px 18px 6px;
    border: 1px solid rgba(17,27,51,0.12);
    border-radius: 10px;
}

.admin-subform > legend {
    padding: 0 8px;
    font-weight: 700;
    font-size: 0.9rem;
}

body.dark-mode .admin-subform {
    border-color: rgba(255,255,255,0.14);
}

@media (max-width: 600px) {
    .job-pills { gap: 6px; }
    .job-pill { padding: 6px 12px; font-size: 0.8rem; }
}

/* Error pages (404 / 413): the actions row under the message. */
.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ===== Game: full screen =====
   The button sits opposite the HUD's last tile, small enough to ignore while
   driving. `:fullscreen` and Safari's `:-webkit-full-screen` have to be written
   as separate rules: a selector list is dropped whole if a browser does not
   understand one member of it. */
.game-fullscreen {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(46,158,107,0.6);
    background: rgba(17,27,51,0.72);
    color: #fff;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity var(--transition), background var(--transition);
}

.game-fullscreen:hover {
    opacity: 1;
    background: rgba(17,27,51,0.92);
}

.game-fullscreen[hidden] {
    display: none;
}

/* Four corner brackets, drawn with borders so there is no icon font or SVG. */
.game-fullscreen-icon,
.game-fullscreen-icon::before {
    display: block;
    width: 14px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px;
    border-left-color: transparent;
    border-right-color: transparent;
}

.game-fullscreen-icon::before {
    content: '';
    width: 10px;
    height: 16px;
    margin: -4px 0 0 0;
    border-color: transparent currentColor;
    transform: translateX(0);
}

/* Full screen: the stage becomes the viewport. The HUD, banners and overlays
   are positioned against the stage, so they follow without further work. */
.game-stage.is-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100vh;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.game-stage:fullscreen {
    width: 100vw;
    max-width: none;
    height: 100vh;
    border: none;
    border-radius: 0;
}

.game-stage:-webkit-full-screen {
    width: 100vw;
    max-width: none;
    height: 100vh;
    border: none;
    border-radius: 0;
}

/* The HUD is worth a little more room once the frame is the whole screen. */
.game-stage.is-fullscreen .game-hud {
    top: 18px;
    left: 18px;
    right: 18px;
}

.game-stage.is-fullscreen .game-fullscreen {
    top: 18px;
    right: 18px;
}

@media (max-width: 600px) {
    .game-fullscreen { width: 30px; height: 30px; top: 8px; right: 8px; }
}

/* ===== Maintenance page (templates/maintenance.html) ===== */
.maintenance-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 32px 32px;
    border-radius: 14px;
    border-top: 4px solid var(--color-accent);
    background: #fff;
    box-shadow: 0 6px 24px rgba(17,27,51,0.08);
    text-align: center;
}

body.dark-mode .maintenance-card {
    background: #16213d;
    color: #e0e6f0;
}

.maintenance-icon {
    margin-bottom: 18px;
}

.maintenance-cone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(46,158,107,0.12);
    border: 1px solid rgba(46,158,107,0.3);
    font-size: 2.4rem;
    line-height: 1;
}

body.dark-mode .maintenance-cone {
    background: rgba(46,158,107,0.18);
    border-color: rgba(46,158,107,0.45);
}

.maintenance-card h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5em;
}

.maintenance-message {
    max-width: 460px;
    margin: 0 auto 26px;
    color: var(--color-text-light);
    line-height: 1.6;
}

body.dark-mode .maintenance-message {
    color: #a9b4c6;
}

.maintenance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.maintenance-note {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(17,27,51,0.1);
    font-size: 0.88rem;
    color: var(--color-text-light);
}

body.dark-mode .maintenance-note {
    border-top-color: rgba(255,255,255,0.12);
    color: #a9b4c6;
}

.maintenance-note a {
    color: var(--color-accent);
}

@media (max-width: 600px) {
    .maintenance-card { padding: 30px 18px 24px; }
    .maintenance-cone { width: 68px; height: 68px; font-size: 2rem; }
}