/* ============================================================================
   IIRM Global Shared Services — Production Stylesheet
   Hand-written CSS replicating the React + Tailwind original.
   Brand colors: #F47C1B primary, #0B0B0F dark, #4B5563 body, #E5E7EB borders
   ============================================================================ */

/* -----------------------------------------------------------------------------
   1. Reset and base
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; border: 0 solid #E5E7EB; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    line-height: 1.5;
    tab-size: 4;
}

body {
    font-family: 'Public Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: #fff;
    color: #4B5563;
    line-height: 1.5;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Public Sans', sans-serif;
    color: #0B0B0F;
    font-weight: 600;
    line-height: 1.2;
}

a { color: inherit; text-decoration: none; background-color: transparent; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; font-size: 100%; line-height: inherit; cursor: pointer; background: transparent; border: 0; padding: 0; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; }
input:focus, textarea:focus, select:focus, button:focus { outline: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #F47C1B; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #E06B12; }

/* -----------------------------------------------------------------------------
   2. Layout primitives
   ----------------------------------------------------------------------------- */
.container-xl {
    max-width: 80rem;        /* 1280px = max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .container-xl { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .container-xl { padding-left: 2rem; padding-right: 2rem; }
}

.page-section { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .page-section { padding-top: 7rem; padding-bottom: 7rem; } }

.bg-section-alt { background-color: #F5F5F7; }
.bg-dark { background-color: #0B0B0F; }

main { display: block; }
section { display: block; }

/* -----------------------------------------------------------------------------
   3. Typography helpers (replicates React @apply classes)
   ----------------------------------------------------------------------------- */
.section-label {
    color: #F47C1B;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1rem;
}

.section-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: #0B0B0F;
    font-weight: 700;
    letter-spacing: -0.025em;
}
@media (min-width: 640px) {
    .section-heading { font-size: 2.25rem; line-height: 2.5rem; }
}

.section-subtext {
    color: #4B5563;
    font-size: 1rem;
    line-height: 1.625;
}

/* -----------------------------------------------------------------------------
   4. Buttons
   ----------------------------------------------------------------------------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #F47C1B;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.25rem;
}
.btn-primary:hover {
    background: #E06B12;
    transform: translateY(-1px);
}
.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(244, 124, 27, 0.4);
}
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid #E5E7EB;
    color: #0B0B0F;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.25rem;
}
.btn-secondary:hover {
    border-color: #9CA3AF;
}

.btn-block { width: 100%; }

/* -----------------------------------------------------------------------------
   5. Inputs / forms
   ----------------------------------------------------------------------------- */
.input-enterprise {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    color: #0B0B0F;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.input-enterprise:focus {
    border-color: #F47C1B;
    box-shadow: 0 0 0 3px rgba(244, 124, 27, 0.3);
}
.input-enterprise::placeholder { color: #9CA3AF; }

textarea.input-enterprise { resize: none; line-height: 1.5; }

select.input-enterprise {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
    padding-right: 2.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0B0B0F;
    margin-bottom: 0.375rem;
}

.form-group { display: block; }
.form-group + .form-group { margin-top: 1.25rem; }

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr 1fr; }
}

.form-error {
    padding: 0.875rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 0.25rem;
    color: #B91C1C;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #F5F5F7;
    border-radius: 0.25rem;
}
.checkbox-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #F47C1B;
    cursor: pointer;
}
.checkbox-row label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0B0B0F;
    cursor: pointer;
}

/* File input styling */
.file-input::-webkit-file-upload-button {
    margin-right: 0.75rem;
    padding: 0.25rem 0.75rem;
    border: 0;
    border-radius: 0.25rem;
    background: rgba(244, 124, 27, 0.1);
    color: #F47C1B;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: inherit;
}
.file-input::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.25rem 0.75rem;
    border: 0;
    border-radius: 0.25rem;
    background: rgba(244, 124, 27, 0.1);
    color: #F47C1B;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: inherit;
}

.password-wrapper { position: relative; }
.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    background: transparent;
    border: 0;
    padding: 0.25rem;
    line-height: 0;
}
.password-toggle:hover { color: #4B5563; }

/* -----------------------------------------------------------------------------
   6. Cards
   ----------------------------------------------------------------------------- */
.card-enterprise {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-enterprise:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
    transform: translateY(-4px);
}

/* -----------------------------------------------------------------------------
   7. Navbar (public site)
   ----------------------------------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.navbar.is-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    border-bottom-color: #E5E7EB;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}
@media (min-width: 768px) {
    .navbar-inner { height: 70px; }
}

.navbar-logo img {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}

.navbar-nav {
    display: none;
    align-items: center;
    gap: 0.125rem;
}
@media (min-width: 1024px) {
    .navbar-nav { display: flex; }
}

.nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    border-radius: 0.25rem;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    background: transparent;
    border: 0;
}
.nav-link:hover { color: #F47C1B; }
.nav-link.is-active { color: #F47C1B; }

.nav-link .chevron {
    width: 13px; height: 13px;
    transition: transform 0.15s ease;
}
.nav-dropdown.is-open .chevron { transform: rotate(180deg); }

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    width: 13rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
    border-radius: 0.25rem;
    z-index: 50;
}
.nav-dropdown-menu.w-56 { width: 14rem; }
.nav-dropdown.is-open .nav-dropdown-menu { display: block; }

.nav-dropdown-item {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #4B5563;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-dropdown-item:hover { background: #f9fafb; color: #F47C1B; }

.navbar-right {
    display: none;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 1024px) {
    .navbar-right { display: flex; }
}

.navbar-cta {
    background: #F47C1B;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.navbar-cta:hover {
    background: #E06B12;
    transform: translateY(-1px);
}

.user-greeting {
    color: #6b7280;
    font-size: 0.875rem;
}
.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
    font-size: 0.875rem;
    transition: color 0.15s ease;
    background: transparent;
    border: 0;
}
.logout-btn:hover { color: #1f2937; }

.login-link {
    color: #4B5563;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}
.login-link:hover { color: #111827; }

.dashboard-link {
    color: #F47C1B;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.mobile-toggle {
    display: inline-flex;
    color: #374151;
    padding: 0.375rem;
}
@media (min-width: 1024px) {
    .mobile-toggle { display: none; }
}

.mobile-menu {
    display: none;
    background: #fff;
    border-top: 1px solid #f3f4f6;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.05);
    animation: slideDown 0.2s ease-out forwards;
}
.mobile-menu.is-open { display: block; }
@media (min-width: 1024px) {
    .mobile-menu { display: none !important; }
}

.mobile-menu-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
}
.mobile-menu-link {
    display: block;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    transition: color 0.15s ease;
}
.mobile-menu-link:hover { color: #F47C1B; }
.mobile-menu-section-label {
    padding: 0.25rem 0.75rem 0.125rem;
    font-size: 0.75rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.mobile-menu-sublink {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: #4B5563;
}
.mobile-menu-sublink:hover { color: #F47C1B; }

.mobile-menu-cta {
    display: block;
    background: #F47C1B;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    padding: 0.625rem 1rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
}

/* -----------------------------------------------------------------------------
   8. Footer
   ----------------------------------------------------------------------------- */
.site-footer {
    background: #0B0B0F;
    color: rgba(255, 255, 255, 0.6);
}
.site-footer-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 4rem 1rem;
}
@media (min-width: 640px) {
    .site-footer-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .site-footer-inner { padding-left: 2rem; padding-right: 2rem; }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.footer-brand-mark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    user-select: none;
}
.footer-brand-mark .iirm-text {
    color: #F47C1B;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    line-height: 1;
}
.footer-brand-mark .shared-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.footer-brand-mark .shared-text span {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.footer-text {
    font-size: 0.875rem;
    line-height: 1.625;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1.25rem;
}

.footer-socials { display: flex; gap: 0.625rem; }
.footer-social {
    width: 2rem; height: 2rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    color: rgba(255, 255, 255, 0.6);
}
.footer-social:hover { background: #F47C1B; color: #fff; }
.footer-social svg { width: 13px; height: 13px; }

.footer-heading {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
}
.footer-list { display: flex; flex-direction: column; gap: 0.625rem; }
.footer-link {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s ease;
}
.footer-link:hover { color: #F47C1B; }

.footer-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}
.footer-info-row svg {
    width: 14px; height: 14px;
    color: #F47C1B;
    flex-shrink: 0;
    margin-top: 0.25rem;
}
.footer-info-row + .footer-info-row { margin-top: 0.875rem; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* -----------------------------------------------------------------------------
   9. Page banner (used by About, Contact, Careers, JobDetail, Services)
   ----------------------------------------------------------------------------- */
.page-banner {
    position: relative;
    padding-top: 8rem;
    padding-bottom: 5rem;
    overflow: hidden;
    background-color: #0B0B0F;
    background-size: cover;
    background-position: center;
}
.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(11,11,15,0.9) 0%, rgba(11,11,15,0.75) 50%, rgba(11,11,15,0.5) 100%);
    z-index: 10;
}
.page-banner-accent {
    position: absolute;
    bottom: 0; left: 0;
    width: 6rem; height: 4px;
    background: #F47C1B;
    z-index: 20;
}
.page-banner-inner {
    position: relative;
    z-index: 20;
}
.page-banner-title {
    font-size: 2.25rem;
    line-height: 1.1;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.025em;
    max-width: 48rem;
}
@media (min-width: 640px) { .page-banner-title { font-size: 3rem; } }
@media (min-width: 1024px) { .page-banner-title { font-size: 3.75rem; } }

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.breadcrumbs a:hover { color: #F47C1B; transition: color 0.15s ease; }
.breadcrumbs .crumb-current { color: rgba(255, 255, 255, 0.8); }
.breadcrumbs svg { width: 12px; height: 12px; }
.breadcrumb-sep { display: inline-flex; align-items: center; gap: 0.5rem; }

/* -----------------------------------------------------------------------------
   10. Hero slider (Home page)
   ----------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #0B0B0F;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    transform: scale(1.02);
    background-size: cover;
    background-position: center;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(11,11,15,0.82) 0%, rgba(11,11,15,0.5) 55%, rgba(11,11,15,0.1) 100%);
}
.hero-content {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.hero-text-wrap { max-width: 48rem; }
.hero-eyebrow {
    color: #F47C1B;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.25rem;
}
.hero-headline {
    font-family: 'Outfit', sans-serif;
    font-size: 2.25rem;
    line-height: 1.1;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .hero-headline { font-size: 3rem; } }
@media (min-width: 1024px) { .hero-headline { font-size: 3.75rem; } }

.hero-sub {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1.625;
    margin-bottom: 2rem;
    max-width: 38rem;
}
@media (min-width: 640px) { .hero-sub { font-size: 1.125rem; } }

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.hero-indicators {
    position: absolute;
    bottom: 2rem;
    left: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 20;
}
@media (min-width: 640px) { .hero-indicators { left: 1.5rem; } }
@media (min-width: 1024px) { .hero-indicators { left: 2rem; } }

.hero-indicator {
    width: 2rem; height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border: 0;
    transition: background-color 0.3s ease, width 0.3s ease;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
}
.hero-indicator.is-active {
    background: #F47C1B;
    width: 3rem;
}

.hero-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    background: transparent;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hero-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* -----------------------------------------------------------------------------
   11. Generic grids
   ----------------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.grid-services { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .grid-services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-services { grid-template-columns: 1fr 1fr 1fr; } }

/* -----------------------------------------------------------------------------
   12. Service / feature cards
   ----------------------------------------------------------------------------- */
.service-card {
    display: block;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    height: 100%;
}
.service-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
    transform: translateY(-4px);
    border-color: rgba(244, 124, 27, 0.4);
}
.service-card-icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: 0.25rem;
    background: rgba(244, 124, 27, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: #F47C1B;
}
.service-card-icon svg { width: 20px; height: 20px; }
.service-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.5rem;
}
.service-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #4B5563;
    margin-bottom: 1rem;
}
.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #F47C1B;
    font-weight: 600;
    font-size: 0.8125rem;
    transition: gap 0.15s ease;
}
.service-card:hover .service-card-link { gap: 0.5rem; }

.benefit-card {
    padding: 1.75rem;
    text-align: center;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.benefit-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}
.benefit-card-emoji { font-size: 1.875rem; margin-bottom: 1rem; }
.benefit-card h4 { font-weight: 700; color: #0B0B0F; margin-bottom: 0.5rem; }
.benefit-card p { font-size: 0.875rem; color: #4B5563; }

/* Offering card (services pages) */
.offering-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-left: 2px solid #F47C1B;
    border-radius: 0.25rem;
    padding: 1.5rem;
}
.offering-card h4 {
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.offering-card p {
    font-size: 0.75rem;
    line-height: 1.625;
    color: #4B5563;
}

/* Industry chip */
.industry-chip {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #0B0B0F;
    font-weight: 500;
    transition: all 0.15s ease;
}
.industry-chip:hover {
    background: #F47C1B;
    color: #fff;
    border-color: #F47C1B;
}

/* -----------------------------------------------------------------------------
   13. Stats strip
   ----------------------------------------------------------------------------- */
.stats-strip {
    background: linear-gradient(135deg, #0B0B0F 0%, #1c1c28 50%, #0B0B0F 100%);
    padding: 3.5rem 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: center;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #F47C1B;
    line-height: 1;
}
@media (min-width: 640px) { .stat-value { font-size: 1.875rem; } }
.stat-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* -----------------------------------------------------------------------------
   14. Why us / strengths grid
   ----------------------------------------------------------------------------- */
.feature-block {
    padding: 1.5rem;
    border-left: 2px solid rgba(244, 124, 27, 0.3);
    transition: border-color 0.2s ease;
}
.feature-block:hover { border-left-color: #F47C1B; }
.feature-block h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.5rem;
}
.feature-block p {
    font-size: 0.8125rem;
    line-height: 1.625;
    color: #4B5563;
}

/* -----------------------------------------------------------------------------
   15. Job listings
   ----------------------------------------------------------------------------- */
.filter-bar {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1.25rem;
    margin-bottom: 2rem;
}
.filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .filter-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .filter-grid { grid-template-columns: repeat(4, 1fr); } }

.search-wrap { position: relative; }
.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    pointer-events: none;
}
.search-icon svg { width: 16px; height: 16px; display: block; }
.search-input { padding-left: 2.25rem; }

.job-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (min-width: 640px) {
    .job-card { flex-direction: row; align-items: center; justify-content: space-between; }
}
.job-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-color: rgba(244, 124, 27, 0.4);
}
.job-card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.job-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-weight: 600;
}
.job-tag-dept { background: rgba(244, 124, 27, 0.1); color: #F47C1B; }
.job-tag-fulltime { background: #ECFDF5; color: #047857; }
.job-tag-other { background: #EFF6FF; color: #1D4ED8; }

.job-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.5rem;
}
.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: #4B5563;
}
.job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.job-meta svg { width: 13px; height: 13px; color: #F47C1B; }

.job-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #F47C1B;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.empty-state {
    text-align: center;
    padding: 5rem 1rem;
}
.empty-state svg.empty-icon {
    width: 48px; height: 48px;
    color: #d1d5db;
    margin: 0 auto 1rem;
}
.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.5rem;
}
.empty-state p {
    color: #4B5563;
    margin-bottom: 1.5rem;
}

/* -----------------------------------------------------------------------------
   16. Job detail page
   ----------------------------------------------------------------------------- */
.job-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .job-detail-grid { grid-template-columns: 2fr 1fr; }
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4B5563;
    font-size: 0.875rem;
    margin-bottom: 2rem;
    transition: color 0.15s ease;
}
.back-link:hover { color: #F47C1B; }

.job-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 1rem;
}
.job-prose {
    color: #4B5563;
    line-height: 1.625;
    white-space: pre-wrap;
    margin-bottom: 2rem;
    font-size: 0.875rem;
}

.job-overview-card {
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.job-overview-card h4 {
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}
.job-overview-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.job-overview-row:last-child { margin-bottom: 0; }
.job-overview-row svg {
    width: 16px; height: 16px;
    color: #F47C1B;
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.job-overview-label {
    font-size: 0.75rem;
    color: #4B5563;
    margin-bottom: 0.125rem;
}
.job-overview-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0B0B0F;
}

.application-form {
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 2rem;
    margin-top: 1.5rem;
}
.application-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.application-form-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B0B0F;
}

.success-state {
    text-align: center;
    padding: 4rem 2rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
}
.success-state svg {
    width: 56px; height: 56px;
    color: #10b981;
    margin: 0 auto 1rem;
}
.success-state h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.5rem;
}
.success-state p {
    color: #4B5563;
    margin-bottom: 1.5rem;
}

/* -----------------------------------------------------------------------------
   17. Login page
   ----------------------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    background: #0B0B0F;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}
.login-bg {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: repeating-linear-gradient(45deg, #F47C1B 0, #F47C1B 1px, transparent 0, transparent 50%);
    background-size: 30px 30px;
}
.login-card {
    position: relative;
    width: 100%;
    max-width: 28rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
}
.login-header {
    background: #0B0B0F;
    padding: 2rem;
    text-align: center;
}
.login-header img {
    height: 3.5rem;
    margin: 0 auto 1rem;
    object-fit: contain;
}
.login-header-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #F47C1B;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
}
.login-body { padding: 2rem; }
.login-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.25rem;
}
.login-body p {
    color: #4B5563;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}
.login-back {
    text-align: center;
    font-size: 0.875rem;
    color: #4B5563;
    margin-top: 1.5rem;
}
.login-back a { color: #F47C1B; }
.login-back a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   18. Contact page
   ----------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}
@media (min-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr 1fr; }
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
}
.contact-info-card + .contact-info-card { margin-top: 1.5rem; }
.contact-info-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.25rem;
    background: rgba(244, 124, 27, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-info-icon svg { width: 18px; height: 18px; color: #F47C1B; }
.contact-info-card h4 {
    font-weight: 600;
    color: #0B0B0F;
    margin-bottom: 0.25rem;
}
.contact-info-card p {
    font-size: 0.875rem;
    color: #4B5563;
}

.map-section {
    background: #F5F5F7;
}
.map-iframe-wrap {
    width: 100%;
    height: 450px;
}
.map-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* -----------------------------------------------------------------------------
   19. About page
   ----------------------------------------------------------------------------- */
.about-vision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}
@media (min-width: 768px) { .about-vision-grid { grid-template-columns: 1fr 1fr; } }

.vision-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 2rem;
}
.vision-card-icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: 0.25rem;
    background: rgba(244, 124, 27, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: #F47C1B;
}
.vision-card-icon svg { width: 20px; height: 20px; }
.vision-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.75rem;
}
.vision-card p {
    color: #4B5563;
    line-height: 1.625;
    font-size: 0.875rem;
}

.strength-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1.5rem;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.strength-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}
.strength-card-icon {
    width: 3rem; height: 3rem;
    border-radius: 0.25rem;
    background: rgba(244, 124, 27, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #F47C1B;
}
.strength-card-icon svg { width: 22px; height: 22px; }
.strength-card h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.5rem;
}
.strength-card p {
    font-size: 0.8125rem;
    color: #4B5563;
    line-height: 1.5;
}

.leadership-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.leadership-card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.leadership-img-wrap {
    aspect-ratio: 1 / 1;
    background: #F5F5F7;
    overflow: hidden;
}
.leadership-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.leadership-info {
    padding: 1.5rem;
    text-align: center;
}
.leadership-info h4 {
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.25rem;
}
.leadership-info p {
    font-size: 0.875rem;
    color: #F47C1B;
    font-weight: 500;
}

/* -----------------------------------------------------------------------------
   20. Final CTA section
   ----------------------------------------------------------------------------- */
.final-cta {
    background: #0B0B0F;
    padding: 5rem 0;
    text-align: center;
}
.final-cta h2 {
    color: #fff;
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
@media (min-width: 640px) { .final-cta h2 { font-size: 2.25rem; } }
.final-cta p {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2rem;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.final-cta-icon { color: #F47C1B; margin: 0 auto 1.25rem; }
.final-cta-icon svg { width: 36px; height: 36px; }

/* -----------------------------------------------------------------------------
   21. Admin layout
   ----------------------------------------------------------------------------- */
.admin-shell {
    min-height: 100vh;
    background: #F5F5F7;
    display: flex;
}
.admin-sidebar {
    width: 16rem;
    background: #0B0B0F;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
}
.admin-sidebar.is-open { transform: translateX(0); }
@media (min-width: 1024px) {
    .admin-sidebar { position: sticky; top: 0; transform: translateX(0); }
}

.admin-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-sidebar-header img {
    height: 2.5rem;
    object-fit: contain;
}
.admin-sidebar-nav {
    flex: 1;
    padding: 1rem;
}
.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.admin-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.admin-sidebar-link.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.admin-sidebar-link svg { width: 16px; height: 16px; }

.admin-sidebar-bottom {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-user-card {
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}
.admin-user-card .label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}
.admin-user-card .name {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-card .role {
    color: #F47C1B;
    font-size: 0.75rem;
    text-transform: capitalize;
}

.admin-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-logout:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.admin-logout svg { width: 14px; height: 14px; }

.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
@media (min-width: 1024px) {
    .admin-main { margin-left: 0; }
}

.admin-topbar {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 768px) { .admin-topbar { padding: 1rem 2rem; } }

.admin-topbar h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B0B0F;
}
.admin-topbar .date {
    font-size: 0.875rem;
    color: #4B5563;
    display: none;
}
@media (min-width: 768px) { .admin-topbar .date { display: inline; } }

.admin-mobile-toggle {
    color: #0B0B0F;
    padding: 0.375rem;
    display: inline-flex;
}
@media (min-width: 1024px) { .admin-mobile-toggle { display: none; } }

.admin-content {
    flex: 1;
    padding: 1.5rem;
    overflow: auto;
}
@media (min-width: 768px) { .admin-content { padding: 2rem; } }

.admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 30;
    display: none;
}
.admin-overlay.is-open { display: block; }
@media (min-width: 1024px) { .admin-overlay.is-open { display: none; } }

/* -----------------------------------------------------------------------------
   22. Stat cards (dashboard)
   ----------------------------------------------------------------------------- */
.stat-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1.5rem;
}
.stat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.stat-card-label {
    font-size: 0.875rem;
    color: #4B5563;
    font-weight: 500;
}
.stat-card-icon {
    width: 2.25rem; height: 2.25rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.stat-card-icon svg { width: 16px; height: 16px; }
.stat-card-icon-blue   { background: #EFF6FF; color: #2563EB; }
.stat-card-icon-green  { background: #ECFDF5; color: #059669; }
.stat-card-icon-orange { background: #FFF7ED; color: #F47C1B; }
.stat-card-icon-purple { background: #F5F3FF; color: #7C3AED; }
.stat-card-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #0B0B0F;
    line-height: 1.1;
}

/* Admin tile (quick actions) */
.admin-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
    color: #fff;
}
.admin-tile-orange { background: #F47C1B; }
.admin-tile-orange:hover { background: #E06B12; }
.admin-tile-dark { background: #0B0B0F; }
.admin-tile-dark:hover { background: #111827; }
.admin-tile svg { width: 28px; height: 28px; flex-shrink: 0; }
.admin-tile .tile-title { font-weight: 700; font-size: 1.125rem; }
.admin-tile .tile-sub { color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; }

.admin-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1.5rem;
}
.admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.admin-card h3 {
    font-weight: 700;
    color: #0B0B0F;
    font-size: 1rem;
}

/* Progress bars */
.progress-row { margin-bottom: 0.875rem; }
.progress-row:last-child { margin-bottom: 0; }
.progress-row-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}
.progress-row-label { color: #4B5563; }
.progress-row-value { font-weight: 600; color: #0B0B0F; }
.progress-track {
    height: 0.5rem;
    background: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease;
}
.progress-fill-blue   { background: #3B82F6; }
.progress-fill-yellow { background: #FACC15; }
.progress-fill-green  { background: #22C55E; }

/* Recent applications list */
.recent-list { display: flex; flex-direction: column; gap: 0.75rem; }
.recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #E5E7EB;
}
.recent-row:last-child { border-bottom: 0; }
.recent-row .name { font-size: 0.875rem; font-weight: 600; color: #0B0B0F; }
.recent-row .sub { font-size: 0.75rem; color: #4B5563; }

/* Status pills */
.status-pill {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-weight: 600;
}
.status-pill-new        { background: #DBEAFE; color: #1D4ED8; }
.status-pill-shortlisted{ background: #FEF3C7; color: #A16207; }
.status-pill-rejected   { background: #FEE2E2; color: #B91C1C; }
.status-pill-hired      { background: #DCFCE7; color: #15803D; }
.status-pill-published  { background: #DCFCE7; color: #15803D; }
.status-pill-draft      { background: #F3F4F6; color: #4B5563; }

/* -----------------------------------------------------------------------------
   23. Admin tables
   ----------------------------------------------------------------------------- */
.admin-table-wrap {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    overflow: hidden;
}
.admin-table-header {
    background: #F5F5F7;
    border-bottom: 1px solid #E5E7EB;
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-table-header span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0B0B0F;
}

.admin-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}
.admin-table thead {
    background: #F5F5F7;
    border-bottom: 1px solid #E5E7EB;
}
.admin-table th {
    text-align: left;
    padding: 0.875rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4B5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.admin-table th.text-right { text-align: right; }
.admin-table tbody tr { border-bottom: 1px solid #E5E7EB; transition: background-color 0.15s ease; }
.admin-table tbody tr:last-child { border-bottom: 0; }
.admin-table tbody tr:hover { background: #FAFAFA; }
.admin-table td { padding: 1rem 1.25rem; vertical-align: middle; color: #4B5563; }
.admin-table td.text-right { text-align: right; }
.admin-table td.cell-strong { color: #0B0B0F; font-weight: 600; }
.admin-table .cell-sub { font-size: 0.75rem; color: #4B5563; margin-top: 0.125rem; }

.hide-md { display: none; }
@media (min-width: 768px) { .hide-md { display: table-cell; } }
.hide-lg { display: none; }
@media (min-width: 1024px) { .hide-lg { display: table-cell; } }

.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.row-action-btn {
    padding: 0.375rem;
    border-radius: 0.25rem;
    background: transparent;
    border: 0;
    transition: background-color 0.15s ease;
    line-height: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
}
.row-action-btn:hover { background: #f3f4f6; }
.row-action-btn.edit:hover { background: #EFF6FF; }
.row-action-btn.delete:hover { background: #FEE2E2; }
.row-action-btn svg { width: 15px; height: 15px; }
.row-action-btn.edit svg { color: #3B82F6; }
.row-action-btn.delete svg { color: #EF4444; }
.row-action-btn.publish svg { color: #16A34A; }
.row-action-btn.unpublish svg { color: #6b7280; }
.row-action-btn.view svg { color: #F47C1B; }

/* -----------------------------------------------------------------------------
   24. Modal (used by application detail in admin)
   ----------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop.is-open { display: flex; }

.modal {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 36rem;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-large { max-width: 42rem; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #E5E7EB;
}
.modal-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0B0B0F;
}
.modal-close {
    color: #9CA3AF;
    padding: 0.25rem;
    display: inline-flex;
    line-height: 0;
}
.modal-close:hover { color: #4B5563; }
.modal-body { padding: 1.5rem; }
.modal-section { margin-bottom: 1.25rem; }
.modal-section:last-child { margin-bottom: 0; }
.modal-info-row {
    background: #F5F5F7;
    border-radius: 0.25rem;
    padding: 1rem;
}
.modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.modal-info-label {
    font-size: 0.75rem;
    color: #4B5563;
    margin-bottom: 0.125rem;
}
.modal-info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0B0B0F;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4B5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.cover-letter-box {
    font-size: 0.875rem;
    color: #4B5563;
    line-height: 1.625;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1rem;
    white-space: pre-wrap;
}
.resume-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
}
.resume-row-info { display: flex; align-items: center; gap: 0.75rem; }
.resume-row-info svg { color: #F47C1B; flex-shrink: 0; }
.resume-row-info .filename { font-size: 0.875rem; font-weight: 600; color: #0B0B0F; }
.resume-row-info .label { font-size: 0.75rem; color: #4B5563; }
.resume-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #F47C1B;
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    border: 0;
    padding: 0;
}
.resume-download-btn:hover { color: #E06B12; }

.status-button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.status-button {
    padding: 0.625rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    color: #4B5563;
    transition: all 0.15s ease;
    cursor: pointer;
}
.status-button:hover { border-color: #9CA3AF; }
.status-button:disabled { cursor: not-allowed; }
.status-button.is-active.status-new        { background: #DBEAFE; color: #1D4ED8; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1D4ED8; border-color: transparent; }
.status-button.is-active.status-shortlisted{ background: #FEF3C7; color: #A16207; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #A16207; border-color: transparent; }
.status-button.is-active.status-rejected   { background: #FEE2E2; color: #B91C1C; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #B91C1C; border-color: transparent; }
.status-button.is-active.status-hired      { background: #DCFCE7; color: #15803D; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #15803D; border-color: transparent; }

/* -----------------------------------------------------------------------------
   25. Spinner
   ----------------------------------------------------------------------------- */
.spinner {
    width: 2.5rem; height: 2.5rem;
    border: 4px solid rgba(244, 124, 27, 0.3);
    border-top-color: #F47C1B;
    border-radius: 9999px;
    animation: spin 0.8s linear infinite;
}
.spinner-sm { width: 1rem; height: 1rem; border-width: 2px; }
.spinner-lg { width: 3rem; height: 3rem; }
.spinner-center {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
   26. Scroll-fade animations
   ----------------------------------------------------------------------------- */
[data-fade-in] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-fade-in].is-visible {
    opacity: 1;
    transform: none;
}

/* Mobile menu drop animation */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------------
   27. Utilities
   ----------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hidden { display: none; }
.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;
}

.min-h-screen { min-height: 100vh; }
.full-width { width: 100%; }

.section-intro {
    max-width: 36rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.section-intro p.section-label { margin-bottom: 0.75rem; }
.section-intro h2 { margin-bottom: 1rem; }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

.flex-wrap { flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; }

/* -----------------------------------------------------------------------------
   Grids used by Careers, Contact, About, services
   ----------------------------------------------------------------------------- */
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
@media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits-grid { grid-template-columns: repeat(4, 1fr); } }

.job-listings {
    display: grid;
    gap: 1rem;
}

/* -----------------------------------------------------------------------------
   Contact page grid + form rows
   ----------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: repeat(2, 1fr); } }

.form-group { margin-bottom: 1.25rem; }
.form-group:last-child { margin-bottom: 0; }
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0B0B0F;
    margin-bottom: 0.375rem;
}
.form-error {
    padding: 0.875rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.25rem;
    color: #b91c1c;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
}
.contact-info-card:last-child { margin-bottom: 0; }
.contact-info-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.25rem;
    background: rgba(244, 124, 27, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-info-icon svg { width: 18px; height: 18px; color: #F47C1B; }
.contact-info-card h4 { font-weight: 600; color: #0B0B0F; margin-bottom: 0.25rem; }
.contact-info-card p { font-size: 0.875rem; color: #4B5563; line-height: 1.5; }

.map-section { background: #F5F5F7; padding: 0; }
.map-iframe-wrap { width: 100%; height: 450px; }
.map-iframe-wrap iframe { border: 0; display: block; width: 100%; height: 100%; }

/* Button loading state */
.btn-primary.is-loading,
.btn-secondary.is-loading { opacity: 0.6; pointer-events: none; }

/* -----------------------------------------------------------------------------
   Job detail page
   ----------------------------------------------------------------------------- */
.job-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .job-detail-grid {
        grid-template-columns: 2fr 1fr;
        gap: 2.5rem;
    }
}
.job-detail-main { min-width: 0; }

.job-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4B5563;
    font-size: 0.875rem;
    margin-bottom: 2rem;
    transition: color 0.15s ease;
}
.job-detail-back:hover { color: #F47C1B; }
.job-detail-back svg { width: 14px; height: 14px; }

.prose-block { max-width: none; }
.prose-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 1rem;
}
.prose-body {
    color: #4B5563;
    line-height: 1.7;
    font-size: 0.875rem;
    margin-bottom: 2rem;
    white-space: pre-wrap;
}

/* Apply form */
.application-form {
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 2rem;
    margin-top: 1.5rem;
    background: #fff;
}
.application-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.application-form-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B0B0F;
}
.application-form-close {
    background: transparent;
    border: 0;
    color: #9CA3AF;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.15s ease;
}
.application-form-close:hover { color: #4B5563; }

.input-file {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}
.input-file::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    border: 0;
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(244, 124, 27, 0.1);
    color: #F47C1B;
    cursor: pointer;
}

/* Success state */
.application-success {
    text-align: center;
    padding: 4rem 2rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
}
.application-success h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.5rem;
}
.application-success p {
    color: #4B5563;
    margin-bottom: 1.5rem;
}

/* Sidebar overview card */
.job-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.job-overview-card {
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1.5rem;
    background: #FAFAFA;
}
.job-overview-card h4 {
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}
.job-overview-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.job-overview-item:last-child { margin-bottom: 0; }
.job-overview-item svg {
    color: #F47C1B;
    margin-top: 0.125rem;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.job-overview-label {
    font-size: 0.75rem;
    color: #4B5563;
    margin-bottom: 0.125rem;
}
.job-overview-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0B0B0F;
}

.apply-side-btn {
    width: 100%;
    justify-content: center;
}

/* Not-found block (used by careers-detail when job_id is invalid) */
.not-found-block {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}
.not-found-block h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0B0B0F;
}
.not-found-block p { color: #4B5563; max-width: 28rem; }

/* -----------------------------------------------------------------------------
   Login page (standalone — no navbar/footer)
   ----------------------------------------------------------------------------- */
.page-login { background: #0B0B0F; min-height: 100vh; }
.login-page {
    position: relative;
    min-height: 100vh;
    background: #0B0B0F;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
}
.login-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: repeating-linear-gradient(45deg, #F47C1B 0, #F47C1B 1px, transparent 0, transparent 50%);
    background-size: 30px 30px;
    pointer-events: none;
}
.login-card-wrap {
    position: relative;
    width: 100%;
    max-width: 28rem;
}
.login-card {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.login-card-head {
    background: #0B0B0F;
    padding: 2rem;
    text-align: center;
}
.login-logo-link { display: inline-block; }
.login-logo {
    height: 3.5rem;
    object-fit: contain;
    margin: 0 auto 1rem;
    display: block;
}
.login-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #F47C1B;
}
.login-secure-badge svg { width: 16px; height: 16px; }
.login-secure-badge span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.login-card-body { padding: 2rem; }
.login-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0B0B0F;
    margin-bottom: 0.25rem;
}
.login-subtitle {
    color: #4B5563;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.password-wrap { position: relative; }
.password-input { padding-right: 2.75rem; }
.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #9CA3AF;
    padding: 0.25rem;
    transition: color 0.15s ease;
}
.password-toggle:hover { color: #4B5563; }

.login-submit {
    width: 100%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    justify-content: center;
}

.login-back-link {
    text-align: center;
    font-size: 0.875rem;
    color: #4B5563;
    margin-top: 1.5rem;
}
.login-back-link a { color: #F47C1B; }
.login-back-link a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Admin: sidebar badge + toast container + small helpers
   ----------------------------------------------------------------------------- */
.sidebar-badge {
    display: inline-block;
    margin-left: auto;
    background: #F47C1B;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    line-height: 1;
}

.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.toast {
    background: #0B0B0F;
    color: #fff;
    padding: 0.875rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    pointer-events: auto;
    animation: toast-in 0.2s ease-out;
    max-width: 24rem;
}
.toast-success { background: #047857; }
.toast-error   { background: #B91C1C; }
.toast-info    { background: #0B0B0F; }
.toast.is-leaving { animation: toast-out 0.2s ease-in forwards; }
@keyframes toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(20px); opacity: 0; }
}

/* Admin body & layout when sidebar is rendered as `position: fixed` on desktop */
body.admin-body { margin: 0; font-family: 'Public Sans', sans-serif; color: #0B0B0F; }
@media (min-width: 1024px) {
    .admin-shell { padding-left: 16rem; }
    .admin-sidebar { left: 0; }
    .admin-main { width: 100%; }
}

/* Admin dashboard helpers used by the new layouts */
.admin-section { margin-bottom: 2rem; }
.admin-section:last-child { margin-bottom: 0; }
.admin-grid-cols-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) { .admin-grid-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .admin-grid-cols-4 { grid-template-columns: repeat(4, 1fr); } }

.admin-grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) { .admin-grid-cols-2 { grid-template-columns: repeat(2, 1fr); } }

.admin-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.admin-section-head h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #0B0B0F;
}
.admin-section-head .muted {
    font-size: 0.875rem;
    color: #4B5563;
}
.admin-link-orange {
    font-size: 0.875rem;
    color: #F47C1B;
}
.admin-link-orange:hover { text-decoration: underline; }

/* Empty state inside admin tables/cards */
.admin-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: #4B5563;
}
.admin-empty p { margin-bottom: 1rem; }

/* Form layout helpers used by admin job edit & filters */
.admin-form { display: flex; flex-direction: column; gap: 1.25rem; }
.admin-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) { .admin-form-row { grid-template-columns: 1fr 1fr; } }

.admin-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #F5F5F7;
    border-radius: 0.25rem;
}
.admin-form-checkbox input { width: 1rem; height: 1rem; accent-color: #F47C1B; }
.admin-form-checkbox label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0B0B0F;
    cursor: pointer;
}

.admin-form-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.5rem;
    flex-wrap: wrap;
}

/* Filter row used by /admin/applications */
.admin-filter-row {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1rem;
}
.admin-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .admin-filter-grid { grid-template-columns: 1fr 1fr; } }

/* Messages list (admin) */
.message-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.25rem;
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s ease;
}
.message-card.is-unread { border-left: 3px solid #F47C1B; }
.message-card:hover { border-color: #d1d5db; }
.message-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.message-head .who {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.message-head .who .name {
    font-weight: 700;
    color: #0B0B0F;
    font-size: 0.9375rem;
}
.message-head .who .meta {
    font-size: 0.8125rem;
    color: #4B5563;
}
.message-head .when {
    font-size: 0.75rem;
    color: #4B5563;
    text-align: right;
}
.message-body {
    font-size: 0.875rem;
    color: #4B5563;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* The "back" link used by admin job-edit and application-detail */
.admin-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4B5563;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    transition: color 0.15s ease;
}
.admin-back-link:hover { color: #F47C1B; }
.admin-back-link svg { width: 14px; height: 14px; }

/* Margin helpers used by inline page sections */
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.text-center { text-align: center; }

/* ---------------------------------------------------------------------------
   Accessibility enhancements
   --------------------------------------------------------------------------- */

/* Skip-to-content link — visible only when focused, drops in from above */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    background: #0B0B0F;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 0.15s ease;
}
.skip-to-content:focus {
    top: 0;
    outline: 3px solid #F47C1B;
    outline-offset: 2px;
}

/* Focus visible — keyboard nav highlight on interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #F47C1B;
    outline-offset: 2px;
    border-radius: 2px;
}
/* Don't double-outline form inputs that already have :focus styling */
.input-enterprise:focus-visible {
    outline-offset: 0;
}

/* Respect prefers-reduced-motion — disable transitions/animations for users
   who request reduced motion in their OS. WCAG 2.3.3 best practice. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Visually-hidden utility (screen-reader-only labels) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High-contrast focus on logout/destructive admin buttons */
.btn-danger:focus-visible,
.logout-btn:focus-visible {
    outline-color: #DC2626;
}