/* Scoped cinematic hero. Existing MSB tokens and Inter are retained. */
.hero-cinematic {
    --hero-gold: #d5b47b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: max(690px, 100svh);
    padding: 116px 6% 92px;
    isolation: isolate;
    background: var(--bg-dark);
    scroll-margin-top: 86px;
}

.hero-scenery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.hero-aura {
    position: absolute;
    width: min(1000px, 100vw);
    aspect-ratio: 1;
    top: -18%;
    right: -12%;
    background: radial-gradient(ellipse at center, rgba(242,108,39,.13), rgba(212,175,55,.035) 42%, transparent 68%);
}
.hero-architecture {
    position: absolute;
    inset: 85px 6% 0;
    border-inline: 1px solid rgba(255,255,255,.035);
    background: linear-gradient(90deg, transparent calc(57% - 1px), rgba(255,255,255,.035) 57%, transparent calc(57% + 1px));
    mask-image: linear-gradient(transparent, black 25%, black 65%, transparent);
}
.hero-horizon {
    position: absolute;
    left: 40%; right: -15%; top: 52%; height: 1px;
    opacity: .45;
    background: linear-gradient(90deg, transparent, var(--hero-gold), var(--accent-color), transparent);
    box-shadow: 0 0 22px 2px rgba(242,108,39,.13);
    transform: rotate(-24deg);
    transform-origin: center;
}
.hero-layout {
    width: 100%; max-width: 1480px; margin: auto;
    display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 76px); align-items: center;
}
.hero-cinematic .hero-content { width: 100%; max-width: none; min-width: 0; }
.hero-cinematic .hero-eyebrow {
    display: flex; align-items: center; gap: 12px; max-width: none;
    color: var(--hero-gold); font-size: 11px; font-weight: 600; letter-spacing: .19em;
    margin: 0 0 26px; line-height: 1.6;
}
.hero-eyebrow > span:first-child { width: 26px; height: 1px; background: var(--accent-color); }
.hero-eyebrow-divider { color: rgba(255,255,255,.3); }
.hero-cinematic .hero-title {
    font-size: clamp(34px, 4.05vw, 68px); font-weight: 600;
    letter-spacing: -.048em; line-height: 1.23; margin: 0 0 25px;
}
.hero-line { display: block; overflow: hidden; padding: .12em 0 .18em; margin: -.12em 0 -.18em; }
.hero-line-text { display: block; }
.hero-cinematic .hero-description {
    max-width: 440px; margin: 0 0 32px; font-size: 16px;
    line-height: 1.85; color: #b3bbc7;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 26px; }
.hero-cinematic .hero-apply {
    display: inline-flex; gap: 24px; align-items: center; justify-content: center;
    min-height: 52px; padding: 13px 23px; font-size: 14px; border-radius: 8px;
    box-shadow: 0 5px 24px rgba(242,108,39,.19);
}
.hero-apply svg { transition: transform .25s ease; }
.hero-apply:hover svg { transform: translateX(3px); }
.hero-secondary {
    display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
    font-size: 13px; text-decoration: none; color: #d1d5dc;
    transition: color .2s ease;
}
.hero-secondary span { color: var(--hero-gold); font-size: 19px; }
.hero-secondary:hover { color: #fff; }
.hero-values {
    display: flex; flex-wrap: wrap; gap: 12px 18px;
    margin-top: 42px; font-size: 11px; color: #a5adba; letter-spacing: .045em;
}
.hero-values span + span { border-left: 1px solid rgba(213,180,123,.28); padding-left: 18px; }
.hero-visual { min-width: 0; margin: 0; perspective: 1200px; }
.hero-visual-drift { max-width: min(550px, calc(100svh - 280px)); margin-inline: auto; }
.hero-visual-topline, .hero-caption {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 9px; letter-spacing: .14em; color: #929caa; line-height: 1.7;
}
.hero-visual-topline { padding: 0 2px 14px; }
.hero-visual-topline span:last-child { color: var(--hero-gold); }
.hero-visual-frame { position: relative; padding: 10px; border: 1px solid rgba(213,180,123,.17); border-radius: 18px; }
.hero-image-mask { overflow: hidden; border-radius: 10px; background: #16202d; }
.hero-poster { display: block; width: 100%; height: auto; }
.hero-corner { position: absolute; width: 35px; height: 35px; pointer-events: none; border-color: var(--hero-gold); border-style: solid; opacity: .7; }
.hero-corner-tl { left: -1px; top: -1px; border-width: 1px 0 0 1px; border-radius: 18px 0 0; }
.hero-corner-br { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; border-radius: 0 0 18px; }
.hero-caption { padding: 17px 2px 0; }
.hero-caption span:last-child { letter-spacing: .015em; color: var(--hero-gold); font-size: 10px; font-style: italic; }
.hero-footer {
    position: absolute; bottom: 28px; left: 6%; right: 6%;
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
    padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09);
    color: #919baa; font-size: 9px; letter-spacing: .15em;
}
.hero-scroll {
    display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
    color: #d1d5dc; text-decoration: none; letter-spacing: .03em; font-size: 11px;
}
.hero-scroll-arrow { color: var(--hero-gold); font-size: 21px; transition: transform .2s ease; }
.hero-scroll:hover .hero-scroll-arrow { transform: translateY(3px); }
.hero-cinematic :is(a, button):focus-visible { outline: 2px solid var(--hero-gold); outline-offset: 6px; }

/* Content remains visible without JavaScript or when motion is unavailable. */
@media (min-width: 1600px) {
    .hero-cinematic { padding-inline: max(6%, calc((100vw - 1480px) / 2)); }
}
@media (max-width: 1050px) and (min-width: 901px) {
    .hero-cinematic { padding-inline: 5%; }
    .hero-layout { gap: 26px; }
    .hero-cinematic .hero-title { font-size: 38px; }
    .hero-actions { gap: 9px 18px; }
    .hero-cinematic .hero-apply { padding-inline: 18px; gap: 16px; }
    .hero-secondary { font-size: 12px; }
}
@media (max-width: 900px) {
    .hero-cinematic { min-height: 100svh; padding: 128px 7% 36px; text-align: left; }
    .hero-layout { grid-template-columns: 1fr; gap: 48px; max-width: 620px; }
    .hero-cinematic .hero-title { font-size: clamp(31px, 6.5vw, 54px); }
    .hero-cinematic .hero-description { max-width: 500px; }
    .hero-values { margin-top: 28px; }
    .hero-visual { width: 100%; }
    .hero-visual-drift { max-width: 490px; }
    .hero-footer { position: relative; inset: auto; margin-top: 44px; gap: 12px; }
    .hero-location { display: none; }
    .hero-architecture { background: none; inset-inline: 7%; }
    .hero-aura { top: 25%; right: -30%; width: 130vw; }
}
@media (max-width: 480px) {
    /* The existing 350px job-column minimum overflowed narrow phone screens. */
    .job-card-container { grid-template-columns: minmax(0, 1fr); }
    .hero-cinematic { padding-top: 112px; padding-inline: 6%; }
    .hero-cinematic .hero-title { font-size: clamp(28px, 7.35vw, 35px); }
    .hero-cinematic .hero-eyebrow { font-size: 9px; letter-spacing: .13em; gap: 10px; margin-bottom: 20px; }
    .hero-cinematic .hero-description { font-size: 14px; line-height: 1.8; margin-bottom: 26px; }
    .hero-actions { gap: 8px 20px; }
    .hero-cinematic .hero-apply { width: 100%; }
    .hero-secondary { min-height: 44px; }
    .hero-caption { flex-wrap: wrap; gap: 4px 12px; font-size: 8px; }
    .hero-footer { flex-wrap: wrap; padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-cinematic *, .hero-cinematic *::before, .hero-cinematic *::after { animation: none !important; transition: none !important; }
    .hero-cinematic :is(.hero-line-text, .hero-poster, .hero-copy-drift, .hero-visual-drift, .hero-image-mask) { transform: none !important; clip-path: none !important; opacity: 1 !important; }
    .marquee-content { animation: none; }
}