/* Top page presentation. Keep this scoped so the shared rem scale is untouched. */
body.homepage {
    font-size: 18px;
    line-height: 1.7;
    padding-bottom: 0;
}

.homepage .fade-in-up,
.homepage .fade-in-up.visible {
    opacity: 1;
    transform: none;
}

html:not(.js) .homepage .hero-slide-controls {
    display: none;
}

.homepage .hero {
    height: auto;
    min-height: 560px;
    max-height: none;
    padding: 70px 5% 30px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 32px;
    text-align: left;
    background: #242424;
}

.homepage .hero-slider {
    display: block;
    overflow: hidden;
}

.homepage .slide-item {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 600ms ease, visibility 600ms ease;
}

.homepage .slide-item.active {
    opacity: 1;
    visibility: visible;
}

.homepage .slide-picture,
.homepage .slide-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.homepage .slide-photo { object-fit: cover; object-position: center; }
.homepage .photo-mech { object-position: 36% center; }
.homepage .photo-elec { object-position: 42% center; }
.homepage .photo-arch { object-position: 52% center; }
.homepage .photo-civil { object-position: 38% center; }

.homepage .slide-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.72) 32%, rgba(0,0,0,.72));
}

.homepage .hero-content {
    order: 1;
    width: min(100%, 680px);
    max-width: 680px;
    text-align: left;
    pointer-events: auto;
}

.homepage .hero-sub {
    margin: 0 0 12px;
    font-size: 18px;
    letter-spacing: .04em;
}

.homepage .hero-title {
    margin: 0 0 12px;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.35;
    letter-spacing: .02em;
}

.homepage .hero-description {
    margin: 0 0 24px;
    color: #fff;
    font-size: 18px;
}

.homepage .hero-buttons {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.homepage .btn-hero {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

.homepage .btn-hero:hover,
.homepage .btn-hero:focus-visible {
    background: var(--primary-dark);
}

.homepage .hero-slide-controls {
    position: relative;
    order: 2;
    align-self: stretch;
    z-index: 12;
    left: auto;
    bottom: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.homepage .slide-toggle,
.homepage .slide-picker-button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 999px;
    background: rgba(20,20,20,.72);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.homepage .slide-toggle { padding: 0 16px; }
.homepage .slide-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.homepage .slide-picker-button.active { background: var(--primary); border-color: #fff; }

.homepage-audiences {
    padding: 28px 0;
    background: #fff;
}

.homepage-audiences h2 {
    margin-bottom: 14px;
    color: var(--primary);
    font-size: 22px;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.audience-grid a {
    display: grid;
    gap: 2px;
    min-height: 76px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    border-radius: 8px;
    background: #fff;
}

.audience-grid strong { font-size: 18px; }
.audience-grid span { color: var(--text-sub); font-size: 15px; }

.homepage-quick-links {
    padding: 12px 0;
    background: #f8f9fa;
    border-block: 1px solid #e5e5e5;
}

.homepage-quick-links .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.homepage-quick-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--primary-dark);
    font-weight: 700;
}

.homepage #departments,
.homepage #career { scroll-margin-top: 16px; }
.homepage #departments .section-title { font-size: 34px; }
.homepage .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.homepage .dept-card { min-height: 220px; padding: 22px; }
.homepage .dept-card h3 { font-size: 21px; }
.homepage .dept-card p { width: 100%; margin: 8px 0; font-size: 16px; line-height: 1.6; }
.homepage .dept-career,
.homepage .dept-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 0;
    border-radius: 6px;
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: .16em;
    overflow-wrap: anywhere;
    position: relative;
    z-index: 2;
}
.homepage .dept-career { margin-top: auto; }
.homepage .dept-detail { justify-content: space-between; gap: 8px; }
.homepage .dept-card .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}
.homepage .dept-card :is(.dept-career, .dept-detail):focus-visible {
    outline-offset: -3px;
}
.homepage .dept-detail .arrow svg { width: 100%; height: 100%; }
.homepage .section-action { padding: 0 20px 56px; text-align: center; }
.homepage .homepage-career { text-align: center; }
.homepage .homepage-career .section-title { font-size: 34px; }
.homepage .career-summary { max-width: 760px; margin: 0 auto 10px; font-size: 18px; }
.homepage .career-source { margin: 0 auto 22px; color: var(--text-sub); font-size: 15px; }
.homepage .career-source a { color: var(--primary); text-decoration: underline; }
.homepage .career-numbers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
    margin: 22px auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}
.homepage .career-numbers > div { padding: 16px 10px; }
.homepage .career-numbers > div + div { border-left: 1px solid var(--border); }
.homepage .career-numbers dt { color: var(--text-sub); font-size: 16px; }
.homepage .career-numbers dd { color: var(--primary); font-size: 34px; font-weight: 700; line-height: 1.25; }
.homepage .career-numbers dd span { margin-left: 2px; font-size: 18px; }
.homepage .news-item { padding: 20px; }
.homepage .news-title { font-size: 18px; line-height: 1.55; }
.homepage #news .news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}
.homepage #news .news-meta .date,
.homepage #news .news-meta .badge {
    flex: 0 0 auto;
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.homepage .important-bar { background: #f7f4f0; color: #333; }
.homepage .important-bar .label-important { background: transparent; color: var(--primary); }
.homepage .important-bar .important-text a { color: #333; }
.homepage .section-title { font-size: 34px; }
.homepage #news .news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.homepage #news .news-item { display: block; }
.homepage .life-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.homepage .life-links a { display: grid; gap: 4px; min-height: 92px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.homepage .life-links strong { color: var(--primary); font-size: 20px; }
.homepage .life-links span { color: var(--text-sub); font-size: 16px; }
.homepage .header { z-index: 1200; }
.homepage #official-note { scroll-margin-top: 76px; }
.homepage .note-grid .news-img { overflow: hidden; }
.homepage .note-grid .news-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.homepage .note-grid .note-image-unavailable { padding: 16px; color: #444; background: #f7f3ed; text-align: center; font-size: 16px; }
.homepage .dept-symbol {
    display: block;
    width: 96px;
    height: 96px;
    max-width: 100%;
    margin-inline: auto;
}
.homepage .dept-card .dept-symbol {
    transform: translateY(0) scale(1);
    transition: transform 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .homepage .dept-card:hover .dept-symbol {
        transform: translateY(-2px) scale(1.035);
    }
}
.homepage .dept-card:focus-within .dept-symbol {
    transform: translateY(-2px) scale(1.035);
}
@media (hover: none), (pointer: coarse) {
    .homepage .dept-card:hover {
        transform: none;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }
}
.homepage .menu-toggle { width: 44px; min-width: 44px; min-height: 44px; padding: 6px; border: 0; background: transparent; }
.homepage .menu-toggle:focus-visible,
.homepage a:focus-visible,
.homepage button:focus-visible { outline: 3px solid #195cb6; outline-offset: 3px; }

@media (max-width: 1023px) {
    body.homepage { zoom: 1; }
    .homepage .slide-item::after { background: linear-gradient(90deg, rgba(0,0,0,.60), rgba(0,0,0,.72)); }
    html:not(.js) .homepage .nav-menu { display: block; }
    html:not(.js) .homepage .menu-toggle { display: none; }
    html.js .homepage .nav-menu { display: none; }
    html.js .homepage .nav-menu.active { display: block; }
    .homepage .hero { height: auto; min-height: 440px; max-height: none; padding: 40px 22px 24px; }
    .homepage .hero-title { font-size: clamp(32px, 8vw, 38px); }
    .homepage .hero-description { max-width: 34rem; font-size: 18px; }
    .homepage .hero-buttons { flex-direction: row; align-items: stretch; }
    .homepage .hero-buttons .btn { min-height: 48px; padding: 10px 16px; font-size: 18px; }
    .homepage .hero-slide-controls { left: auto; bottom: auto; }
    .homepage .slide-toggle { min-height: 44px; }
    .homepage .audience-grid { grid-template-columns: 1fr; }
    .homepage .audience-grid span,
    .homepage .dept-card p,
    .homepage .dept-detail,
    .homepage .career-source,
    .homepage .career-numbers dt,
    .homepage .life-links span,
    .homepage .note-grid .note-image-unavailable,
    .homepage .btn-outline { font-size: 18px; }
    .homepage-audiences { padding: 20px 0; }
    .homepage .dept-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8em, calc(50% - 9px))), 1fr)); }
    .homepage .section { padding: 48px 0; }
    .homepage #news .news-grid { grid-template-columns: 1fr; }
    .homepage .life-links { grid-template-columns: 1fr; }
}

@media (max-width: 359px) {
    .homepage .dept-grid { grid-template-columns: 1fr; }
    .homepage .hero { min-height: 460px; padding-inline: 16px; }
    .homepage .hero-buttons { flex-direction: column; }
    .homepage .hero-slide-controls { gap: 6px; }
    .homepage .slide-picker { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .homepage *, .homepage *::before, .homepage *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .homepage .dept-card:hover,
    .homepage .dept-card:hover .dept-symbol,
    .homepage .dept-card:focus-within .dept-symbol {
        transform: none;
    }
}