/**
 * Homepage: hero, candidates accordion, about and call-to-action sections. Loaded after public.css on / only.
 * Breakpoints: sm 640px, md 768px, lg 1024px.
 */

:root { --brand-blue: #0050b0; }

/* Layout helpers */
.landing-container { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .landing-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .landing-container { padding-inline: 2rem; } }

/* Buttons at their default (non-navbar) size */
.landing-btn-lg { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
@media (min-width: 640px) { .landing-btn-lg { padding: 0.75rem 1.5rem; } }
.landing-btn-lg .landing-btn-icon { width: 1.75rem; height: 1.75rem; font-size: 0.8rem; }

/* Dark sections */
.landing-hero { background: var(--brand-black); color: #fff; padding-bottom: 4rem; position: relative; overflow: hidden; }
@media (min-width: 640px) { .landing-hero { padding-bottom: 5rem; } }
@media (min-width: 1024px) { .landing-hero { padding-bottom: 6rem; } }
.landing-section-dark { background: var(--brand-black); color: #fff; }
.landing-section-light { background: #fff; color: #111827; }
.landing-hero .text-brand-green,
.landing-section-dark .text-brand-green { color: var(--brand-green-muted); }
.landing-hero .landing-btn-secondary,
.landing-section-dark .landing-btn-secondary { border-color: rgba(255, 255, 255, 0.25); background: transparent; color: #fff; }
.landing-hero .landing-btn-secondary:hover,
.landing-section-dark .landing-btn-secondary:hover { border-color: var(--brand-green); background: rgba(22, 101, 52, 0.1); }

/* Hero copy */
.landing-hero-grid { padding-block: 2.5rem; }
@media (min-width: 640px) { .landing-hero-grid { padding-block: 4rem; } }
@media (min-width: 1024px) {
    .landing-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 3rem; padding-block: 5rem; }
}
.landing-hero-copy { max-width: 36rem; margin-inline: auto; text-align: center; }
@media (min-width: 1024px) { .landing-hero-copy { margin-inline: 0; text-align: left; } }
.landing-hero-title { font-size: 1.875rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; margin: 0; }
@media (min-width: 640px) { .landing-hero-title { font-size: 2.25rem; } }
@media (min-width: 768px) { .landing-hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .landing-hero-title { font-size: 3.25rem; } }
.landing-hero-year { margin: 0.75rem 0 0; font-size: 0.875rem; font-weight: 600; }
@media (min-width: 640px) { .landing-hero-year { margin-top: 1rem; } }
.landing-hero-phase { margin: 1rem 0 0; font-size: 1rem; font-weight: 600; color: #fff; }
@media (min-width: 640px) { .landing-hero-phase { font-size: 1.125rem; } }
.landing-hero-message { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.625; color: #9ca3af; }
@media (min-width: 640px) { .landing-hero-message { font-size: 1rem; } }
@media (min-width: 768px) { .landing-hero-message { font-size: 1.125rem; } }
.landing-hero-deadline { margin: 0.75rem 0 0; font-size: 0.875rem; color: #9ca3af; }
.landing-hero-deadline strong { color: #fff; }
.landing-hero-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
@media (min-width: 640px) { .landing-hero-actions { margin-top: 2rem; gap: 1rem; } }
@media (min-width: 1024px) { .landing-hero-actions { justify-content: flex-start; } }
.landing-hero-points { margin: 1.5rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; font-size: 0.75rem; color: #6b7280; }
.landing-hero-points li { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .landing-hero-points { margin-top: 2rem; gap: 0.5rem 1.5rem; font-size: 0.875rem; } }
@media (min-width: 1024px) { .landing-hero-points { justify-content: flex-start; } }

/* Hero scene: centre card, four portraits and connectors */
.landing-hero-visual { position: relative; margin-top: 2rem; display: flex; width: 100%; align-items: center; justify-content: center; }
@media (min-width: 640px) { .landing-hero-visual { margin-top: 2.5rem; } }
@media (min-width: 1024px) { .landing-hero-visual { margin-top: 0; min-height: 580px; } }
.landing-hero-scene { position: relative; margin-inline: auto; width: 100%; height: 360px; max-width: 320px; }
@media (min-width: 640px) { .landing-hero-scene { height: 440px; max-width: 400px; } }
@media (min-width: 768px) { .landing-hero-scene { height: 500px; max-width: 480px; } }
@media (min-width: 1024px) { .landing-hero-scene { height: 560px; max-width: 580px; } }
.landing-hero-glow { position: absolute; inset: 0.75rem; border-radius: 2rem; background: rgba(22, 101, 52, 0.25); filter: blur(64px); }
@media (min-width: 640px) { .landing-hero-glow { inset: 1.5rem; border-radius: 3rem; } }
.landing-hero-connectors { pointer-events: none; position: absolute; inset: 0; z-index: 5; display: none; width: 100%; height: 100%; }
@media (min-width: 640px) { .landing-hero-connectors { display: block; } }
.landing-hero-connector-line { fill: none; stroke: rgba(22, 101, 52, 0.7); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; }
.landing-hero-sparkle {
    position: absolute; z-index: 15; display: none; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center;
    border-radius: 9999px; background: var(--brand-green); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); left: 14%; top: 22%; color: #fff;
}
.landing-hero-sparkle svg { width: 1rem; height: 1rem; }
@media (min-width: 640px) { .landing-hero-sparkle { display: flex; width: 2rem; height: 2rem; } }

.landing-peripheral-card {
    position: absolute; z-index: 10; overflow: hidden; border-radius: 0.75rem; border: 2px solid #fff; background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); width: 64px; height: 74px;
}
@media (min-width: 640px) { .landing-peripheral-card { border-radius: 1.25rem; border-width: 3px; width: 84px; height: 96px; } }
@media (min-width: 1024px) { .landing-peripheral-card { width: 102px; height: 118px; } }
.landing-peripheral-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.landing-peripheral-tl { left: 0; top: 2rem; }
.landing-peripheral-tr { right: 0.5rem; top: 1.5rem; z-index: 12; }
.landing-peripheral-bl { bottom: 4rem; left: 0.5rem; }
.landing-peripheral-br { bottom: 3rem; right: 0.75rem; }
@media (min-width: 640px) {
    .landing-peripheral-tl { top: 2.5rem; }
    .landing-peripheral-tr { right: 1rem; top: 2.5rem; }
    .landing-peripheral-bl { bottom: 5rem; left: 1rem; }
    .landing-peripheral-br { bottom: 4rem; right: 1.5rem; }
}
@media (min-width: 1024px) {
    .landing-peripheral-tl { top: 3.5rem; }
    .landing-peripheral-tr { right: 2rem; top: 3rem; }
    .landing-peripheral-bl { bottom: 6rem; left: 1.5rem; }
    .landing-peripheral-br { bottom: 5rem; right: 2.5rem; }
}

.landing-center-position { position: absolute; z-index: 20; left: calc(50% - 6px); top: calc(50% - 24px); transform: translate(-50%, -50%); }
@media (min-width: 640px) { .landing-center-position { left: calc(50% - 8px); top: calc(50% - 30px); } }
@media (min-width: 1024px) { .landing-center-position { left: calc(50% - 12px); top: calc(50% - 38px); } }
.landing-center-hub {
    width: 220px; overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 25px 50px -12px rgba(22, 101, 52, 0.1); backdrop-filter: blur(4px);
}
@media (min-width: 640px) { .landing-center-hub { width: 240px; border-radius: 1.75rem; } }
@media (min-width: 1024px) { .landing-center-hub { width: 280px; } }
.landing-center-hub-inner { display: flex; flex-direction: column; align-items: center; padding: 1rem 1.25rem; text-align: center; }
@media (min-width: 640px) { .landing-center-hub-inner { padding: 1.25rem 1.75rem; } }
@media (min-width: 1024px) { .landing-center-hub-inner { padding: 1.5rem 2rem; } }
.landing-hub-kicker { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-green); }
.landing-hub-title { margin: 0.25rem 0 0; max-width: 240px; font-size: 0.875rem; font-weight: 700; line-height: 1.375; color: #111827; }
.landing-hub-text { margin: 0.375rem 0 0; max-width: 240px; font-size: 11px; line-height: 1.625; color: #6b7280; }
.landing-hub-button { margin-top: 0.75rem; padding: 0.5rem 1rem; font-size: 0.75rem; }
@media (min-width: 640px) {
    .landing-hub-kicker { font-size: 0.75rem; }
    .landing-hub-title { max-width: 260px; font-size: 1rem; }
    .landing-hub-text { margin-top: 0.5rem; font-size: 0.75rem; }
    .landing-hub-button { margin-top: 1rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; }
}

@keyframes landing-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes landing-float-alt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.landing-float { animation: landing-float 5s ease-in-out infinite; }
.landing-float-delayed { animation: landing-float 5s ease-in-out 1.2s infinite; }
.landing-float-slow { animation: landing-float-alt 6s ease-in-out 0.6s infinite; }
.landing-float-slower { animation: landing-float-alt 7s ease-in-out 2s infinite; }

/* Candidates */
.landing-candidates-section { position: relative; z-index: 10; margin-top: -3rem; background: #fff; color: #111827; padding-bottom: 4rem; }
@media (min-width: 640px) { .landing-candidates-section { margin-top: -4rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) { .landing-candidates-section { margin-top: -5rem; padding-bottom: 6rem; } }
.landing-curve-overlap { pointer-events: none; position: absolute; inset-inline: 0; top: 0; line-height: 0; transform: translateY(calc(-100% + 1px)); }
.landing-curve-overlap svg { display: block; width: 100%; height: 3.5rem; }
@media (min-width: 640px) { .landing-curve-overlap svg { height: 4.5rem; } }
@media (min-width: 1024px) { .landing-curve-overlap svg { height: 5.5rem; } }
.landing-candidates-heading { position: relative; padding-top: 2.5rem; }
@media (min-width: 640px) { .landing-candidates-heading { padding-top: 3rem; } }
@media (min-width: 1024px) { .landing-candidates-heading { padding-top: 3.5rem; } }
.landing-section-title { margin: 0; text-align: center; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.025em; color: #111827; }
@media (min-width: 640px) { .landing-section-title { font-size: 2.25rem; } }
@media (min-width: 768px) { .landing-section-title { font-size: 3rem; } }

.landing-candidates-accordion-wrap { position: relative; margin: 2rem 0.75rem 0; }
@media (min-width: 640px) { .landing-candidates-accordion-wrap { margin: 2.5rem 1rem 0; } }
@media (min-width: 1024px) { .landing-candidates-accordion-wrap { margin-inline: 1.5rem; } }
.landing-candidates-accordion {
    --accordion-height: 420px;
    display: flex; width: 100%; align-items: flex-end; overflow-x: auto; overflow-y: hidden; height: var(--accordion-height); scrollbar-width: none;
}
.landing-candidates-accordion::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .landing-candidates-accordion { --accordion-height: 480px; } }
@media (min-width: 1024px) { .landing-candidates-accordion { --accordion-height: min(72vh, 720px); overflow-x: hidden; } }
.landing-accordion-card { position: relative; min-width: 140px; flex: 1 1 0%; transition: flex 0.5s ease-out; }
@media (min-width: 640px) { .landing-accordion-card { min-width: 0; } }
.landing-accordion-card-short { height: calc(var(--accordion-height) * 0.68); }
.landing-accordion-card-medium { height: calc(var(--accordion-height) * 0.84); }
.landing-accordion-card-tall { height: var(--accordion-height); }
.landing-candidates-accordion:hover .landing-accordion-card { flex: 0.85; }
.landing-candidates-accordion .landing-accordion-card:hover { flex: 1.55; z-index: 10; }
.landing-accordion-card-hit { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; text-align: left; text-decoration: none; }
.landing-accordion-card-hit:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.landing-accordion-card + .landing-accordion-card .landing-accordion-card-hit { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12); }
.landing-accordion-card-photo { position: absolute; inset: 0; }
.landing-accordion-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.7s; }
.landing-accordion-card:hover .landing-accordion-card-photo img { transform: scale(1.05); }
.landing-accordion-card-initials { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: #111827; font-size: 3rem; font-weight: 700; color: #fff; }
.landing-accordion-card-gradient {
    pointer-events: none; position: absolute; inset-inline: 0; bottom: 0; height: 50%;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.45) 45%, transparent 100%);
}
.landing-accordion-card-caption { position: absolute; inset-inline: 0; bottom: 0; z-index: 10; padding: 1rem; }
@media (min-width: 640px) { .landing-accordion-card-caption { padding: 1.25rem; } }
@media (min-width: 1024px) { .landing-accordion-card-caption { padding: 1.5rem; } }
.landing-accordion-card-name { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; color: #fff; }
@media (min-width: 640px) { .landing-accordion-card-name { font-size: 1.25rem; } }
@media (min-width: 1024px) { .landing-accordion-card-name { font-size: 1.5rem; } }
.landing-accordion-card-position { margin: 0.25rem 0 0; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
@media (min-width: 640px) { .landing-accordion-card-position { font-size: 0.75rem; } }
.landing-accordion-card-hover-label {
    position: absolute; left: 50%; top: 1rem; z-index: 10; transform: translateX(-50%); border-radius: 9999px; background: rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.75rem; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; opacity: 0;
    backdrop-filter: blur(4px); transition: opacity 0.3s;
}
.landing-accordion-card:hover .landing-accordion-card-hover-label { opacity: 1; }
.landing-swipe-hint { margin: 1rem 0 0; text-align: center; font-size: 0.75rem; color: #6b7280; }
@media (min-width: 640px) { .landing-swipe-hint { display: none; } }

.landing-slate-footer { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; text-align: center; }
@media (min-width: 640px) { .landing-slate-footer { margin-top: 3rem; } }
.landing-slate-legend { display: none; align-items: center; gap: 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6b7280; }
.landing-slate-legend span { display: flex; align-items: center; gap: 0.5rem; }
.landing-slate-legend i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; }
@media (min-width: 640px) { .landing-slate-legend { display: inline-flex; } }

.landing-empty-state { margin-top: 3.5rem; border-radius: 1rem; border: 1px dashed #d1d5db; background: #fff; padding: 4rem 1.5rem; text-align: center; }
.landing-empty-icon {
    margin-inline: auto; display: flex; width: 4rem; height: 4rem; align-items: center; justify-content: center; border-radius: 1rem;
    background: rgba(22, 101, 52, 0.1); color: var(--brand-green); box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.2); font-size: 1.75rem;
}

/* About */
.landing-about { padding-block: 3rem; }
@media (min-width: 640px) { .landing-about { padding-block: 4rem; } }
@media (min-width: 1024px) {
    .landing-about { padding-block: 5rem; }
    .landing-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 4rem; }
}
.landing-about-copy { text-align: center; }
@media (min-width: 1024px) { .landing-about-copy { text-align: left; } }
.landing-about-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: #111827; }
@media (min-width: 640px) { .landing-about-title { font-size: 1.875rem; } }
@media (min-width: 768px) { .landing-about-title { font-size: 2.25rem; } }
.landing-about-text { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.625; color: #4b5563; }
@media (min-width: 640px) { .landing-about-text { margin-top: 1.5rem; font-size: 1rem; } }
.landing-features { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; text-align: left; }
.landing-feature-icon {
    display: flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.75rem;
    background: var(--brand-green-light); color: var(--brand-green);
}
.landing-stats { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .landing-stats { margin-top: 3rem; gap: 1rem; } }
@media (min-width: 1024px) { .landing-stats { margin-top: 0; } }
.landing-stat { padding: 1rem; text-align: center; }
@media (min-width: 640px) { .landing-stat { padding: 1.5rem; } }
.landing-stat-value { margin: 0; font-size: 1.5rem; font-weight: 800; }
@media (min-width: 640px) { .landing-stat-value { font-size: 1.875rem; } }
.landing-stat-label { margin: 0.25rem 0 0; font-size: 0.75rem; color: #4b5563; }
@media (min-width: 640px) { .landing-stat-label { font-size: 0.875rem; } }

/* Closing call to action */
.landing-cta { padding-block: 3rem; }
@media (min-width: 640px) { .landing-cta { padding-block: 4rem; } }
.landing-cta-inner { max-width: 56rem; text-align: center; }
.landing-cta-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff; }
@media (min-width: 640px) { .landing-cta-title { font-size: 1.5rem; } }
@media (min-width: 768px) { .landing-cta-title { font-size: 1.875rem; } }
.landing-cta-text { margin: 0.75rem 0 0; font-size: 0.875rem; color: #9ca3af; }
@media (min-width: 640px) { .landing-cta-text { margin-top: 1rem; font-size: 1rem; } }
.landing-cta-actions { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0.75rem; }
@media (min-width: 640px) { .landing-cta-actions { margin-top: 2rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; } }

@media (prefers-reduced-motion: reduce) {
    .landing-float, .landing-float-delayed, .landing-float-slow, .landing-float-slower { animation: none; }
    .landing-candidates-accordion:hover .landing-accordion-card,
    .landing-candidates-accordion .landing-accordion-card:hover { flex: 1; }
}