* { box-sizing:border-box; margin:0; padding:0; }
:root { --pink:#ff2ee6; --cyan:#00ffee; --gold:#ffd60a; --blue:#2e6bff; }
body { font-family:'Inter',sans-serif; color:#eee9fb; background:#0f0a1a; min-height:100vh; }

/* ---------- Top navigation ---------- */
.site-nav { position:sticky; top:0; z-index:80; background:rgba(15,10,26,0.85); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.08); }
.nav-row { display:flex; align-items:center; gap:28px; padding:16px 48px; max-width:1500px; margin:0 auto; }
.nav-brand { display:flex; align-items:center; gap:12px; font-family:'Sora',sans-serif; font-weight:800; font-size:16px; color:#fff; text-decoration:none; flex-shrink:0; }
.nav-brand img { width:44px; height:44px; border-radius:11px; }
.nav-links { display:flex; align-items:center; gap:4px; flex:1; }
.nav-links > a { color:#b8b3d1; text-decoration:none; font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:10px; }
.nav-links > a:hover, .nav-links > a.active { background:rgba(255,255,255,0.06); color:#fff; }
.nav-dropdown-trigger {
    display:flex; align-items:center; gap:6px; cursor:pointer; background:none; border:none;
    color:#b8b3d1; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
    padding:9px 14px; border-radius:10px;
}
.nav-dropdown-trigger i { font-size:9px; transition:transform 0.15s ease; }
.nav-dropdown-trigger:hover, .nav-dropdown-trigger.active { background:rgba(255,255,255,0.06); color:#fff; }
.nav-dropdown:hover .nav-dropdown-trigger i { transform:rotate(180deg); }
.nav-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-discord-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#b8b3d1; background:rgba(255,255,255,0.05); text-decoration:none; font-size:15px; }
.nav-discord-icon:hover { color:#fff; background:rgba(255,255,255,0.1); }
.nav-cart-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#b8b3d1; background:rgba(255,255,255,0.05); text-decoration:none; font-size:15px; }
.nav-cart-icon:hover { color:#fff; background:rgba(255,255,255,0.1); }
.nav-search-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#b8b3d1; background:rgba(255,255,255,0.05); text-decoration:none; font-size:15px; }
.nav-search-icon:hover { color:#fff; background:rgba(255,255,255,0.1); }
.nav-cta { background:var(--blue); padding:9px 20px; border-radius:10px; font-weight:700; font-size:12.5px; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.nav-account-trigger { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:6px 12px 6px 6px; cursor:pointer; color:#fff; font-family:'Inter',sans-serif; }
.nav-account-trigger img { width:24px; height:24px; border-radius:50%; }
.nav-account-trigger span { font-size:12.5px; font-weight:600; }
.nav-account-trigger i { font-size:9px; color:#8a84a8; }
.nav-burger { display:none; background:none; border:none; color:#fff; font-size:19px; cursor:pointer; padding:6px; }

/* Mobile accordion panel - hidden by default, shown via .show toggled by JS. Made into a real
   fixed overlay with its own bounded, independently-scrolling area (instead of just flowing
   into the normal page and growing the whole document) so a scroll gesture that reaches the
   end of the menu's content doesn't "leak" through to scroll the page underneath it. */
.nav-mobile-panel {
    display:none; flex-direction:column; padding:6px 20px 20px; border-top:1px solid rgba(255,255,255,0.08);
    position:fixed; top:66px; left:0; right:0; height:calc(100dvh - 66px); z-index:85;
    background:#0f0a1a; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.nav-mobile-panel.show { display:flex; }
.nav-mobile-panel > a { color:#eee9fb; text-decoration:none; font-weight:700; font-size:14px; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,0.06); }
.nav-mobile-group { border-bottom:1px solid rgba(255,255,255,0.06); padding:10px 0; }
.nav-mobile-heading { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#8a84a8; padding:6px 4px; }
.nav-mobile-group a { display:block; color:#c9c4de; text-decoration:none; font-size:14px; font-weight:600; padding:13px 6px; }
.nav-mobile-group a:hover { color:#fff; }

@media (max-width: 980px) {
    .nav-row { padding:14px 20px; gap:16px; }
    .nav-links, .nav-actions .nav-account, .nav-actions .nav-cta { display:none; }
    .nav-burger { display:block; margin-left:auto; }
    .nav-discord-icon { display:none; }
    .nav-brand img { width:38px; height:38px; }
    .nav-brand { font-size:14.5px; gap:10px; }
}

.hero-split { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; padding:70px 48px; max-width:1300px; margin:0 auto; align-items:center; }
@media (max-width: 900px) {
    /* Column collapse itself is handled by the existing .hero-split, .two-col media query
       further down this file - this just adds the padding/spacing/sizing that block didn't
       cover, so the collapsed single column isn't still using desktop-sized padding and text. */
    .hero-split { padding: 40px 20px; gap: 32px; text-align: center; }
    .hero-split h1 { font-size: 32px; }
    .hero-buttons { justify-content: center; }
}
.hero-split h1 { font-family:'Sora',sans-serif; font-size:52px; font-weight:900; line-height:1.05; letter-spacing:-1.5px; margin-bottom:18px; }
.hero-split h1 span { background:var(--pink); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-split p { color:#a39dc2; font-size:15px; line-height:1.6; margin-bottom:28px; max-width:480px; }
.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary { background:var(--blue); color:#fff; padding:14px 26px; border-radius:12px; font-weight:800; font-size:13.5px; text-decoration:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn-secondary { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:#fff; padding:14px 24px; border-radius:12px; font-weight:700; font-size:13.5px; text-decoration:none; }

.server-panel { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:28px; }
.server-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.live-tag { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#32ff7e; }
.dot { width:7px; height:7px; border-radius:50%; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.player-bar-track { background:rgba(255,255,255,0.08); height:8px; border-radius:99px; overflow:hidden; margin:14px 0; }
.player-bar-fill { height:100%; background:var(--blue); transition:width 0.5s ease; }
.server-panel .count { font-family:'Sora',sans-serif; font-size:28px; font-weight:900; }
.server-meta { display:flex; justify-content:space-between; font-size:11.5px; color:#8a84a8; margin-top:6px; }
.connect-btn { display:block; text-align:center; background:var(--blue); color:#fff; padding:14px; border-radius:12px; font-weight:800; margin-top:20px; text-decoration:none; }

.section { padding:70px 48px; max-width:1300px; margin:0 auto; }
.section-title { font-family:'Sora',sans-serif; font-size:30px; font-weight:800; margin-bottom:32px; }
.bento-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bento-item { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:22px; }
.bento-item i { font-size:20px; color:var(--pink); margin-bottom:12px; display:block; }
.bento-item h4 { font-size:14px; margin-bottom:6px; }
.bento-item p { font-size:12px; color:#9a94b8; line-height:1.5; }

.dept-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dept-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:28px; text-align:center; text-decoration:none; color:#fff; transition:transform 0.2s, border-color 0.2s; display:block; }
.dept-card:hover { transform:translateY(-4px); border-color:rgba(255,46,230,0.4); }
.dept-icon { font-size:30px; margin-bottom:12px; }
.dept-card h3 { font-family:'Sora',sans-serif; font-size:18px; margin-bottom:6px; }
.dept-card p { font-size:12.5px; color:#9a94b8; }

.two-col { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; }
.news-item { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:18px 20px; margin-bottom:12px; }
.news-item .tag { font-size:10px; color:var(--cyan); font-weight:700; text-transform:uppercase; }
.news-item h5 { font-size:14.5px; margin:6px 0; }
.news-item p { font-size:12.5px; color:#9a94b8; }
.staff-list-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.staff-list-item .av { width:36px; height:36px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid rgba(255,255,255,0.15); background:var(--pink); }
.staff-list-item .info .name { font-size:13.5px; font-weight:700; }
.staff-list-item .info .rank { font-size:11px; color:var(--cyan); }

.apply-cta { text-align:center; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:28px; padding:60px 40px; margin:0 48px 80px; max-width:1300px; margin-left:auto; margin-right:auto; }
.apply-cta h2 { font-family:'Sora',sans-serif; font-size:32px; font-weight:900; margin-bottom:14px; }
.apply-cta p { color:#b8b3d1; margin-bottom:26px; }

/* ---------- Footer ---------- */
.site-footer { padding:56px 48px 24px; border-top:1px solid rgba(255,255,255,0.08); max-width:1300px; margin:0 auto; }
.footer-top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; }
.footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-width:260px; }
.footer-brand img { width:38px; height:38px; border-radius:10px; }
.footer-brand span { font-family:'Sora',sans-serif; font-weight:800; font-size:15px; color:#fff; }
.footer-brand p { font-size:12.5px; color:#8a84a8; line-height:1.5; }
.footer-cols { display:flex; gap:48px; flex-wrap:wrap; }
.footer-col h5 { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#8a84a8; margin-bottom:14px; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col a { color:#a39dc2; text-decoration:none; font-size:13px; font-weight:600; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid rgba(255,255,255,0.06); color:#5c5670; font-size:11.5px; }
.footer-bottom p { flex:1; min-width:240px; text-align:center; }
.footer-discord { color:#a39dc2; text-decoration:none; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.footer-partners { display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; padding:24px 0; border-top:1px solid rgba(255,255,255,0.06); margin-top:8px; }
.footer-partners-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#5c5670; }
.footer-partners a { display:flex; align-items:center; opacity:0.6; transition:opacity 0.2s; }
.footer-partners a:hover { opacity:1; }
.footer-partners img { height:26px; max-width:110px; object-fit:contain; }
@media (max-width: 600px) { .footer-partners { gap:16px; } .footer-partners img { height:22px; } }
.footer-discord:hover { color:#fff; }
.footer-staff-link { color:#5c5670; text-decoration:none; font-size:11.5px; }
.footer-staff-link:hover { color:#a39dc2; }
@media (max-width: 700px) {
    .footer-top { flex-direction:column; }
    .footer-cols { gap:32px 40px; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .footer-bottom p { order:2; }
}

/* ---------- Application form ---------- */
.apply-wrap { min-height:calc(100vh - 70px); display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.apply-box { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:44px; max-width:560px; width:100%; }
.apply-box h1 { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; margin-bottom:10px; }
.apply-sub { color:#a39dc2; font-size:14px; margin-bottom:24px; line-height:1.6; }
.apply-error { background:rgba(255,69,58,0.12); border:1px solid rgba(255,69,58,0.3); color:#ff8a80; padding:12px 16px; border-radius:10px; font-size:13px; margin-bottom:20px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:11.5px; color:#a39dc2; margin-bottom:7px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
input, select, textarea {
    width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:10px;
    padding:11px 14px; color:#fff; font-family:'Inter',sans-serif; font-size:13.5px;
}
select option { background:#161022; color:#fff; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--cyan); }
textarea { resize:vertical; }
.char-count { font-size:10.5px; color:#8a84a8; text-align:right; margin-top:4px; }

/* ---------- Department picker cards (apply form) ---------- */
.dept-pick-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:10px; }
@media (max-width: 420px) {
    /* The existing 900px breakpoint already takes this down to 2 columns - on the smallest
       phones even 2 columns is tight for a card with a logo and name, so this goes the rest
       of the way to a single column. */
    .dept-pick-grid { grid-template-columns: 1fr; }
}
.dept-pick-card {
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:14px;
    padding:18px 14px; text-align:center; cursor:pointer; transition:all 0.2s ease;
}
.dept-pick-card:hover { border-color:rgba(255,46,230,0.4); transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,46,230,0.1); }
.dept-pick-card.selected { border-color:var(--cyan); background:rgba(0,255,238,0.08); box-shadow:0 0 0 1px var(--cyan); }
.dept-pick-card.closed { opacity:0.45; cursor:not-allowed; }
.dept-pick-card.closed:hover { transform:none; border-color:rgba(255,255,255,0.12); }
.dept-pick-logo { width:44px; height:44px; border-radius:12px; object-fit:contain; margin:0 auto 10px; display:block; background:#161022; padding:4px; box-sizing:border-box; }
.dept-pick-logo-fallback { display:flex; align-items:center; justify-content:center; font-size:20px; }
.dept-pick-name { font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; margin-bottom:6px; }
.dept-pick-status { font-size:10px; font-weight:700; }
.dept-pick-status.open { color:#32ff7e; }
.dept-pick-status.closed { color:#ff453a; }

/* ---------- Department detail page hero gallery ---------- */
.dept-hero-gallery { position:relative; width:100%; height:340px; overflow:hidden; }
.dept-hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; }
.dept-hero-slide.active { opacity:1; }
.dept-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,10,26,0.3), rgba(15,10,26,1)); }

@media (max-width: 900px) {
    .hero-split, .two-col { grid-template-columns:1fr; }
    .bento-grid, .dept-grid { grid-template-columns:repeat(2,1fr); }
    .form-row-2 { grid-template-columns:1fr; }
    .dept-pick-grid { grid-template-columns:repeat(2,1fr); }
}

/* ---------- Nav dropdown categories ---------- */
.nav-dropdown { position:relative; display:inline-flex; align-items:center; }
.nav-dropdown-menu {
    display:none; position:absolute; top:100%; left:0; margin-top:0; padding-top:14px;
    z-index:60; width:250px;
}
.nav-dropdown-menu.nav-dropdown-menu-right { left:auto; right:0; }
.nav-dropdown-menu::before {
    content:''; display:block;
    background:#161022; border:1px solid rgba(255,255,255,0.1); border-radius:14px;
    padding:8px; min-width:250px; box-shadow:0 24px 60px rgba(0,0,0,0.55);
    position:absolute; top:14px; left:0; right:0; bottom:0;
    z-index:-1;
}
.nav-dropdown:hover .nav-dropdown-menu { display:block; }
.nav-dropdown-menu a {
    display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; font-size:12.5px;
    color:#a39dc2 !important; text-decoration:none; font-weight:600; white-space:nowrap;
    position:relative; margin:0 8px;
}
.nav-dropdown-menu a i {
    width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    border-radius:8px; background:rgba(255,255,255,0.06); font-size:11px; opacity:1;
    transition:transform 0.15s ease;
}
.nav-dropdown-menu a:first-child { margin-top:8px; }
.nav-dropdown-menu a:last-child { margin-bottom:8px; }
.nav-dropdown-menu a:hover { background:rgba(255,255,255,0.06); color:#fff !important; }
.nav-dropdown-menu a:hover i { background:var(--pink); color:#0f0a1a; transform:scale(1.08); }

/* ---------- Custom date/time picker - auto-enhances every input[type=date] and
   input[type=datetime-local] site-wide (see enhanceDateInputs() in _footer.ejs) ---------- */
.dt-picker-wrapper { position: relative; }
.dt-picker-display {
    width: 100%; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 12px 16px; color: #eee9fb; font-size: 14px; font-family: 'Inter', sans-serif;
}
.dt-picker-display::placeholder { color: #7a7396; }
.dt-picker-display:focus { outline: none; border-color: var(--pink); }
.dt-picker-popup {
    position: fixed; z-index: 2000; width: 300px; background: #170f28; border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px; padding: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.55); display: none;
}
.dt-picker-popup.open { display: block; }
.dt-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dt-picker-head button { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #b8b3d1; width: 28px; height: 28px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.dt-picker-head button:hover { border-color: var(--pink); color: #fff; }
.dt-picker-month-label { font-size: 13px; font-weight: 700; }
.dt-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dt-picker-dow { font-size: 9px; color: #7a7396; text-align: center; padding: 4px 0; text-transform: uppercase; }
.dt-picker-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12px;
    color: #b8b3d1; border-radius: 8px; cursor: pointer; background: none; border: none; font-family: inherit;
}
.dt-picker-day:hover { background: rgba(255,255,255,0.07); color: #fff; }
.dt-picker-day.empty { cursor: default; }
.dt-picker-day.empty:hover { background: none; }
.dt-picker-day.today { border: 1px solid var(--cyan); }
.dt-picker-day.selected { background: var(--pink); color: #0f0a1a; font-weight: 700; }
.dt-picker-time-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); }
.dt-picker-time-row label { font-size: 11px; color: #7a7396; }
.dt-picker-time-row select { flex: 1; padding: 7px 8px; font-size: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #eee9fb; }
.dt-picker-footer { display: flex; gap: 8px; margin-top: 14px; }
.dt-picker-footer button {
    flex: 1; padding: 9px; font-size: 11.5px; font-weight: 700; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05); color: #b8b3d1; cursor: pointer; font-family: inherit;
}
.dt-picker-footer button.dt-picker-today-btn:hover { border-color: var(--cyan); color: #fff; }
.dt-picker-footer button.dt-picker-clear-btn:hover { border-color: #ff5d5d; color: #ff8f8f; }

/* ================================================================
   RECRUITMENT-FOCUSED DESIGN LAYER
   This site's job is different from the staff portal's: someone lands
   here with zero investment in the community and the entire point is
   making them want to join. Everything below leans into energy and
   presence (glow, motion, big numbers) rather than density - the
   opposite instinct from a professional internal tool. Deliberately
   shares no classes with the staff portal's design system.
   ================================================================ */

/* Scroll-reveal - elements fade/slide up into view as the page scrolls, powered by a small
   IntersectionObserver in _footer.ejs. Gives the page a sense of motion and life without
   being gimmicky; each section arrives instead of just sitting there on load. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Big stat counters - social proof front and center: player count, department count, years
   running, whatever needs to land as a confident, oversized number rather than a small label. */
.stat-row { display: flex; gap: 48px; flex-wrap: wrap; }
.stat-block .num {
    font-family: 'Sora', sans-serif; font-size: 42px; font-weight: 900; line-height: 1;
    color: #fff;
}
.stat-block .lbl { font-size: 12px; color: #9a94b8; font-weight: 600; margin-top: 6px; }
@media (max-width: 700px) { .stat-row { gap: 28px; } .stat-block .num { font-size: 32px; } }

/* Generic glass card - consolidates what .bento-item/.dept-card/.news-item each reimplement
   slightly differently, for any new content that needs a simple elevated panel. Existing
   specific card classes are untouched so nothing already built needs to change. */
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 24px; }
.card-glow-hover { transition: transform 0.25s ease, border-color 0.25s ease; }
.card-glow-hover:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.25); }

/* Quote / testimonial block - for community voice, staff quotes, "why people love it here" */
.quote-block { border-left: 3px solid var(--cyan); padding: 4px 0 4px 22px; }
.quote-block p { font-size: 16px; font-style: italic; color: #e5e0f5; line-height: 1.6; }
.quote-block .attribution { margin-top: 10px; font-size: 12.5px; color: #8a84a8; font-weight: 600; }

/* Badge system - status/tag chips reused across recruitment, news, store, etc. */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.badge-live { background: rgba(50,255,126,0.15); color: #32ff7e; }
.badge-hot { background: rgba(255,214,10,0.15); color: #ffd60a; }
.badge-new { background: rgba(0,255,238,0.15); color: #00ffee; }
.badge-closed { background: rgba(255,69,58,0.15); color: #ff8a80; }

/* Section eyebrow - small uppercase label above a section title, used to build a consistent
   rhythm (label -> big headline -> content) across every content section on the page. */
.eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cyan); margin-bottom: 10px; }

/* ============================================================================
   V2 BRAND SYSTEM - new black/white/blue identity, starting with the homepage.
   Fully scoped under .hdrp-v2 so it never touches or conflicts with the rest of
   the site, which still uses the existing purple/pink/cyan look above. As more
   pages get redesigned to match, their markup adopts this same .hdrp-v2 root
   and these same classes - nothing here needs to change to support that.
   ============================================================================ */
.hdrp-v2 {
    --v2-blue: #1F5EFF;
    --v2-blue-soft: #5B8FFF;
    --v2-blue-dim: #0F2A6B;
    --v2-black: #000000;
    --v2-panel: #0A0A0B;
    --v2-panel-2: #111113;
    --v2-border: #1E1E20;
    --v2-border-soft: #2A2A2E;
    --v2-text: #F5F5F3;
    --v2-text-dim: #B0B0B4;
    --v2-text-faint: #8E8E93;
    --v2-text-ghost: #6A6A6E;
    background: var(--v2-black);
    color: var(--v2-text);
    font-family: 'IBM Plex Sans', sans-serif;
    overflow-x: hidden;
}
.hdrp-v2 a { color: inherit; text-decoration: none; }
.hdrp-v2 .v2-disp { font-family: 'Anton', sans-serif; text-transform: uppercase; }
.hdrp-v2 .v2-script { font-family: 'Pacifico', cursive; text-transform: none; letter-spacing: 0.3px; }
.hdrp-v2 .v2-disp2 { font-family: 'Space Grotesk', sans-serif; }
.hdrp-v2 .v2-mono { font-family: 'JetBrains Mono', monospace; }

/* The shared notched-corner shape used on every button, tag, and input in this system -
   deliberately not a rounded rectangle, so it reads as its own distinct visual language rather
   than a generic template component. One clip-path, reused everywhere at different sizes. */
.hdrp-v2 .v2-notch { clip-path: polygon(var(--nsz,10px) 0, 100% 0, 100% calc(100% - var(--nsz,10px)), calc(100% - var(--nsz,10px)) 100%, 0 100%, 0 var(--nsz,10px)); }

.hdrp-v2 .v2-btn { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:0.3px; padding:15px 28px; border:none; cursor:pointer; font-family:'IBM Plex Sans',sans-serif; }
.hdrp-v2 .v2-btn-primary { background: var(--v2-text); color: var(--v2-black); }
.hdrp-v2 .v2-btn-accent { background: var(--v2-blue); color: #fff; }
.hdrp-v2 .v2-btn-outline { background:transparent; color: var(--v2-text); border:1.5px solid var(--v2-border-soft); }

.hdrp-v2 .v2-badge-hex {
    background: var(--v2-panel-2); border: 2px solid var(--v2-blue);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.hdrp-v2 .v2-card { background: var(--v2-panel); border: 1px solid var(--v2-border); }
.hdrp-v2 .v2-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 6px 12px; --nsz: 6px; }
.hdrp-v2 .v2-tag-recruiting { background: var(--v2-blue-dim); color: var(--v2-blue-soft); }
.hdrp-v2 .v2-tag-closed { background: #1A1A1C; color: var(--v2-text-ghost); }

.hdrp-v2 .v2-input {
    font-size: 13px; padding: 14px 18px; background: #111; border: 1.5px solid var(--v2-border-soft);
    color: var(--v2-text); font-family: 'IBM Plex Sans', sans-serif; --nsz: 10px;
}
.hdrp-v2 .v2-input::placeholder { color: var(--v2-text-ghost); }

.hdrp-v2 .v2-container { max-width: 1440px; margin: 0 auto; padding-left: 56px; padding-right: 56px; }

/* Responsive: the design adapts by section, not by shrinking everything proportionally - grids
   collapse column count, the hero drops its diagonal clip (which crops badly on a narrow
   screen), and horizontal rows that can't fit become horizontally scrollable instead of wrapping
   into a cramped multi-line mess. */
@media (max-width: 1100px) {
    .hdrp-v2 .v2-container { padding-left: 32px; padding-right: 32px; }
    .hdrp-v2 .v2-hero-headline { font-size: 84px !important; }
    .hdrp-v2 .v2-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .hdrp-v2 .v2-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 720px) {
    .hdrp-v2 .v2-container { padding-left: 20px; padding-right: 20px; }
    .hdrp-v2 .v2-nav-links { display: none !important; }
    .hdrp-v2 .v2-hero-headline { font-size: 52px !important; }
    .hdrp-v2 .v2-hero-diagonal { clip-path: none !important; }
    .hdrp-v2 .v2-grid-4, .hdrp-v2 .v2-grid-3 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .hdrp-v2 .v2-cta-row { flex-direction: column !important; }
    .hdrp-v2 .v2-cta-row a, .hdrp-v2 .v2-cta-row .v2-btn { width: 100%; justify-content: center; }
    .hdrp-v2 .v2-scroll-x { overflow-x: auto; flex-wrap: nowrap !important; }
    .hdrp-v2 .v2-scroll-x > * { flex-shrink: 0; }
    .hdrp-v2 .v2-section-title { font-size: 42px !important; }
    .hdrp-v2 .v2-footer-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (min-width: 1920px) {
    .hdrp-v2 .v2-container { max-width: 1680px; }
    .hdrp-v2 .v2-hero-headline { font-size: 150px !important; }
}

/* Interactive tiles for Departments and How-to-Join - no border, no background box by default
   (that flat bordered-rectangle look was the specific thing asked to be removed) - instead a
   real hover interaction: the numeral/badge shifts color and lifts, an underline draws in from
   the left, and only then does a faint background tint appear, so the page reads as a set of
   things you can reach out and interact with rather than a static grid of boxes. */
.hdrp-v2 .v2-step-tile {
    display: block; padding: 28px 4px 0; position: relative; transition: transform 0.25s ease;
    border-top: 1px solid var(--v2-border); transition: transform 0.25s ease, border-color 0.25s ease;
}
.hdrp-v2 .v2-step-tile:hover { transform: translateY(-6px); border-top-color: var(--v2-blue); }
.hdrp-v2 .v2-step-num {
    font-family: 'Anton', sans-serif; font-size: 88px; line-height: 0.8; margin-bottom: 18px;
    color: transparent; -webkit-text-stroke: 1.5px var(--v2-border-soft); transition: -webkit-text-stroke-color 0.25s ease, color 0.25s ease;
}
.hdrp-v2 .v2-step-tile:hover .v2-step-num { -webkit-text-stroke-color: var(--v2-blue); }
.hdrp-v2 .v2-step-underline { height: 2px; width: 32px; background: var(--v2-border-soft); margin-bottom: 16px; transition: width 0.3s ease, background 0.3s ease; }
.hdrp-v2 .v2-step-tile:hover .v2-step-underline { width: 64px; background: var(--v2-blue); }

.hdrp-v2 .v2-dept-tile {
    display: block; padding: 32px 24px; border-radius: 16px; transition: background 0.25s ease, transform 0.25s ease;
}
.hdrp-v2 .v2-dept-tile:hover { background: rgba(255,255,255,0.035); transform: translateY(-4px); }
.hdrp-v2 .v2-dept-badge { transition: transform 0.25s ease, border-color 0.25s ease; }
.hdrp-v2 .v2-dept-tile:hover .v2-dept-badge { transform: scale(1.06); }
.hdrp-v2 .v2-dept-underline { height: 2px; width: 24px; background: var(--v2-blue); margin-top: 14px; transition: width 0.3s ease; }
.hdrp-v2 .v2-dept-tile:hover .v2-dept-underline { width: 56px; }

/* Scroll-reveal: sections fade/slide in as they enter view. Deliberately only animates
   transform + opacity - the two properties the browser can animate on the compositor thread
   alone, without ever triggering layout or paint - so this never causes scroll jank regardless
   of how many sections are on a page. Progressive enhancement: the base state is fully visible;
   JS only adds .v2-reveal-ready (the hidden starting state) once it's confirmed it can also
   remove it again via IntersectionObserver, so a JS failure or slow connection never leaves
   content permanently invisible. Skipped entirely for prefers-reduced-motion. */
.hdrp-v2 .v2-reveal-ready { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.hdrp-v2 .v2-reveal-ready.v2-reveal-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .hdrp-v2 .v2-reveal-ready { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.hdrp-v2 .v2-hero-stat { text-align: right; }
@media (max-width: 720px) {
    .hdrp-v2 .v2-hero-bottom-row { flex-direction: column; align-items: flex-start !important; }
    .hdrp-v2 .v2-hero-stat { text-align: left; margin-top: 8px; }
    .hdrp-v2 .v2-dept-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* CSS-only mobile nav menu (a hidden checkbox + label, no JavaScript needed) - the nav links
   themselves are display:none below 720px per the earlier rule, so this is what replaces them:
   a hamburger toggle that reveals a simple dropdown of the same links, rather than leaving
   mobile visitors with literally no way to navigate the site from the header at all. */
.hdrp-v2 .v2-nav-toggle-label { display: none; cursor: pointer; width: 38px; height: 38px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 1.5px solid var(--v2-border-soft); flex-shrink: 0; }
.hdrp-v2 .v2-nav-toggle-label span { width: 16px; height: 1.5px; background: var(--v2-text); display: block; }
.hdrp-v2 .v2-nav-toggle-checkbox { display: none; }
.hdrp-v2 .v2-mobile-menu { display: none; }
@media (max-width: 720px) {
    .hdrp-v2 .v2-nav-toggle-label { display: flex; }
    .hdrp-v2 .v2-nav-toggle-checkbox:checked ~ .v2-mobile-menu {
        display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--v2-black); border-bottom: 1px solid var(--v2-border); padding: 8px 20px 20px; z-index: 10;
    }
    .hdrp-v2 .v2-mobile-menu a { padding: 14px 0; font-size: 13.5px; font-weight: 600; color: var(--v2-text); border-bottom: 1px solid var(--v2-border); text-transform: uppercase; letter-spacing: 0.5px; }
    .hdrp-v2 .v2-mobile-menu a:last-child { border-bottom: none; }
}