/* ==========================================================================
   ASU final visual layer - intentionally last
   ========================================================================== */

:root {
    --asu-void: #050816;
    --asu-ink: #081126;
    --asu-panel: rgba(10, 21, 45, 0.84);
    --asu-line: rgba(161, 206, 255, 0.2);
    --asu-line-strong: rgba(161, 206, 255, 0.5);
    --asu-blue: #85c8ff;
    --asu-blue-bright: #42a5f5;
    --asu-gold: #f4b64c;
    --asu-text: #f4f8ff;
    --asu-muted: #afc2dc;
    --asu-dim: #7487a1;
    --font-sans: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-display: "Montserrat", "Space Grotesk", system-ui, sans-serif;
    --font-mono: "Space Grotesk", ui-monospace, monospace;
}

html {
    background: var(--asu-void);
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

body {
    min-width: 320px;
    background:
        radial-gradient(circle at 7% 18%, rgba(48, 124, 206, 0.18), transparent 22rem),
        radial-gradient(circle at 92% 70%, rgba(27, 84, 169, 0.16), transparent 28rem),
        linear-gradient(180deg, #071025 0%, var(--asu-void) 27%, #071126 72%, var(--asu-void) 100%) !important;
    color: var(--asu-text) !important;
    font-family: var(--font-sans) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.45;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 16% 17%, rgba(255,255,255,0.85) 0 0.7px, transparent 1px),
        radial-gradient(circle at 73% 9%, rgba(154,210,255,0.82) 0 0.6px, transparent 1px),
        radial-gradient(circle at 89% 39%, rgba(255,255,255,0.6) 0 0.65px, transparent 1px);
    background-size: 223px 251px, 337px 293px, 281px 383px;
}

::selection {
    background: rgba(133, 200, 255, 0.32);
    color: #fff;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--asu-gold);
    outline-offset: 3px;
}

.site-header {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 1000 !important;
    height: 4.875rem !important;
    border-bottom: 1px solid rgba(173, 211, 255, 0.14) !important;
    background: linear-gradient(180deg, rgba(5, 10, 25, 0.35), rgba(5, 10, 25, 0.15)) !important;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.site-header__inner {
    width: min(100% - 3rem, 80rem);
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand,
.header-tools,
.site-nav {
    display: flex;
    align-items: center;
}

.brand {
    gap: 0.7rem;
    min-width: 0;
}

.brand__mark {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border: 1px solid var(--asu-line-strong);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, #91d1ff 0 8%, #286ca9 9% 18%, #0a1d3e 19% 65%, #071227 66%);
    box-shadow: inset 0 0 14px rgba(133, 200, 255, 0.35), 0 0 18px rgba(61, 152, 237, 0.15);
}

.brand__mark::before {
    content: "";
    position: absolute;
    top: 0.66rem;
    left: -0.28rem;
    width: 2.85rem;
    height: 0.8rem;
    transform: rotate(-27deg);
    border: 1px solid rgba(194, 227, 255, 0.76);
    border-radius: 50%;
}

.brand__mark span,
.brand__mark i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: #fff9e6;
    box-shadow: 0 0 8px #fff9e6;
}

.brand__mark span {
    width: 0.14rem;
    height: 0.14rem;
    top: 0.37rem;
    right: 0.48rem;
}

.brand__mark i {
    width: 0.1rem;
    height: 0.1rem;
    bottom: 0.46rem;
    left: 0.42rem;
}

.brand__lockup {
    display: grid;
    gap: 0.08rem;
    line-height: 1;
}

.brand__name,
.footer-brand__name {
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.brand__sub {
    color: var(--asu-blue);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-nav {
    justify-content: center;
    gap: clamp(0.9rem, 2.2vw, 2rem);
    margin-left: auto;
}

.site-nav a {
    position: relative;
    padding: 0.55rem 0;
    color: var(--asu-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.site-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.18rem;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    background: var(--asu-gold);
    transition: transform 180ms ease;
}

.site-nav a:hover {
    color: #fff;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
    transform: scaleX(1);
}

.header-tools {
    gap: 0.65rem;
    margin-left: clamp(0rem, 1vw, 0.75rem);
}

.language-toggle {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--asu-line);
    border-radius: 50%;
    background: transparent;
    color: var(--asu-blue);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.language-toggle:hover {
    border-color: var(--asu-line-strong);
    background: rgba(133, 200, 255, 0.11);
    color: #fff;
}

.header-cta,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.2;
    text-transform: uppercase;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.header-cta {
    padding: 0.72rem 0.92rem;
    border: 1px solid rgba(133, 200, 255, 0.62);
    background: rgba(57, 151, 238, 0.12);
    color: #f5faff;
}

.header-cta:hover,
.button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 30px rgba(43, 139, 229, 0.25);
}

#top.hero-section {
    position: relative !important;
    isolation: isolate;
    display: grid !important;
    align-items: center !important;
    min-height: max(46rem, 100svh) !important;
    overflow: hidden !important;
    padding: calc(4.875rem + clamp(4rem, 9vw, 7.5rem)) max(1.5rem, calc((100vw - 80rem) / 2)) clamp(4.5rem, 8vw, 7rem) !important;
    background: transparent !important;
}

#top .hero-media,
#top .hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#top .hero-media {
    z-index: -3;
    background: url("realistic_space_campus.jpg") center / cover no-repeat;
    opacity: 0.8;
    filter: saturate(0.82) contrast(1.04);
    transform: scale(1.03);
}

#top .hero-scrim {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(4, 8, 20, 0.98) 0%, rgba(4, 8, 20, 0.82) 40%, rgba(4, 8, 20, 0.35) 78%, rgba(4, 8, 20, 0.62) 100%),
        linear-gradient(0deg, rgba(4, 8, 20, 0.94), transparent 36%, rgba(4, 8, 20, 0.3));
}

#top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.34;
    pointer-events: none;
    background-image: linear-gradient(rgba(150, 207, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 207, 255, 0.055) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(90deg, #000 0 64%, transparent 98%);
}

#top .hero-grid {
    width: min(100%, 80rem);
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 7rem);
}

#top .hero-copy {
    max-width: 47rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    margin: 0 0 1.15rem;
    color: var(--asu-blue);
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.eyebrow > span:first-child {
    width: 1.85rem;
    height: 1px;
    flex: 0 0 auto;
    background: var(--asu-gold);
    box-shadow: 0 0 8px rgba(244, 182, 76, 0.62);
}

#top .hero-copy h1 {
    max-width: 46rem;
    margin: 0;
    color: var(--asu-text);
    font-family: var(--font-display);
    font-size: clamp(3.1rem, 6.3vw, 6.25rem) !important;
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.99;
    text-transform: none;
    text-wrap: balance;
}

#top .hero-copy h1::after {
    content: "";
    display: block;
    width: 4.25rem;
    height: 0.22rem;
    margin-top: 1.85rem;
    background: linear-gradient(90deg, var(--asu-gold), transparent);
}

.hero-lead {
    max-width: 43rem;
    margin: 1.9rem 0 0;
    color: #d8e4f3;
    font-size: clamp(1rem, 1.35vw, 1.17rem);
    line-height: 1.78;
}

.hero-audience {
    max-width: 43rem;
    margin: 0.85rem 0 0;
    color: var(--asu-blue);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.25rem;
}

.button {
    min-height: 3.1rem;
    padding: 0.94rem 1.25rem;
}

.button--primary {
    border: 1px solid var(--asu-blue);
    background: linear-gradient(135deg, #56b6ff, #2d84d0);
    color: #031326;
    box-shadow: 0 10px 26px rgba(29, 126, 215, 0.24);
}

.button--ghost {
    border: 1px solid var(--asu-line-strong);
    background: rgba(8, 20, 44, 0.48);
    color: #eff7ff;
}

.button--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--asu-blue);
    background: rgba(41, 112, 179, 0.24);
}

.hero-metrics {
    width: min(100%, 42rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin: clamp(2.6rem, 6vw, 4.4rem) 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(190, 222, 255, 0.23);
}

.hero-metrics div {
    min-width: 0;
    padding-right: 0.65rem;
}

.hero-metrics div + div {
    padding-left: 1rem;
    border-left: 1px solid rgba(190, 222, 255, 0.18);
}

.hero-metrics dt {
    color: var(--asu-gold);
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.6vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
}

.hero-metrics dd {
    margin: 0.35rem 0 0;
    color: var(--asu-muted);
    font-size: 0.72rem;
    line-height: 1.42;
}

/* First-visit orientation */
.orientation-section {
    position: relative;
    z-index: 20;
    padding: clamp(3.75rem, 7vw, 6.25rem) max(1.5rem, calc((100vw - 80rem) / 2));
    border-top: 1px solid rgba(133, 200, 255, 0.15);
    border-bottom: 1px solid rgba(133, 200, 255, 0.13);
    background:
        radial-gradient(circle at 84% 50%, rgba(46, 132, 211, 0.15), transparent 28rem),
        linear-gradient(180deg, #07162e, #081426);
}

.orientation-shell {
    width: min(100%, 80rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(16rem, 0.82fr) minmax(0, 1.5fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.orientation-heading h2 {
    max-width: 34rem;
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.7vw, 3.55rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.04;
    text-wrap: balance;
}

.orientation-heading > p:last-child {
    max-width: 33rem;
    margin: 1.1rem 0 0;
    color: var(--asu-muted);
    font-size: 1rem;
    line-height: 1.68;
}

.orientation-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
}

.orientation-card {
    min-width: 0;
    padding: 1.35rem 1.25rem 1.45rem;
    border: 1px solid rgba(144, 204, 255, 0.2);
    border-radius: 0.85rem;
    background: linear-gradient(155deg, rgba(35, 69, 109, 0.4), rgba(9, 22, 46, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

.orientation-card dt {
    color: var(--asu-gold);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.45;
    text-transform: uppercase;
}

.orientation-card dd {
    margin: 0.8rem 0 0;
    color: #dceaf9;
    font-size: 0.91rem;
    line-height: 1.62;
}

/* Bridge into the institutional brief and operating-platform preview. */
.institutional-tools-section {
    position: relative;
    z-index: 20;
    padding: clamp(3.75rem, 7vw, 6.5rem) max(1.5rem, calc((100vw - 80rem) / 2));
    border-bottom: 1px solid rgba(133, 200, 255, 0.13);
    background:
        radial-gradient(circle at 10% 80%, rgba(54, 142, 226, 0.13), transparent 26rem),
        linear-gradient(135deg, rgba(7, 20, 45, 0.96), rgba(5, 13, 31, 0.92));
}

.institutional-tools__shell {
    width: min(100%, 80rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(16rem, 0.88fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.institutional-tools__heading h2 {
    max-width: 34rem;
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.45vw, 3.35rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.04;
    text-wrap: balance;
}

.institutional-tools__heading > p:last-child {
    max-width: 34rem;
    margin: 1.15rem 0 0;
    color: var(--asu-muted);
    font-size: 1rem;
    line-height: 1.68;
}

.institutional-tools__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.institutional-tool {
    min-width: 0;
    min-height: 17.75rem;
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(144, 204, 255, 0.2);
    border-radius: 0.9rem;
    background:
        linear-gradient(145deg, rgba(49, 103, 163, 0.28), rgba(8, 22, 49, 0.78) 57%, rgba(5, 15, 35, 0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.institutional-tool:hover {
    border-color: var(--asu-line-strong);
    box-shadow: 0 16px 37px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-3px);
}

.institutional-tool__icon {
    width: 2.65rem;
    height: 2.65rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(133, 200, 255, 0.35);
    border-radius: 0.65rem;
    background: rgba(77, 163, 233, 0.12);
    color: var(--asu-blue);
    font-size: 1.32rem;
}

.institutional-tool__meta {
    margin-top: 1.2rem;
    color: var(--asu-gold);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.3;
    text-transform: uppercase;
}

.institutional-tool strong {
    margin-top: 0.65rem;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.institutional-tool > span:not(.institutional-tool__icon, .institutional-tool__meta) {
    margin-top: 0.65rem;
    color: var(--asu-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.institutional-tool em {
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--asu-blue);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Mission card and narrative */

.mission-card {
    position: relative;
    overflow: hidden;
    max-width: 29rem;
    justify-self: end;
    padding: 1.35rem;
    border: 1px solid var(--asu-line-strong);
    border-radius: 1rem;
    background: linear-gradient(148deg, rgba(23, 50, 94, 0.88), rgba(7, 15, 35, 0.9));
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.14);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
}

.mission-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.64;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(167, 220, 255, 0.11), transparent 36%);
}

.mission-card__topline,
.mission-card__status,
.mission-card__steps li {
    display: flex;
    align-items: center;
}

.mission-card__topline {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    gap: 1rem;
    color: #dceeff;
    font-family: var(--font-mono);
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mission-card__status {
    gap: 0.36rem;
    color: var(--asu-gold);
    white-space: nowrap;
}

.mission-card__status i {
    width: 0.43rem;
    height: 0.43rem;
    display: block;
    border-radius: 50%;
    background: #7ee3ad;
    box-shadow: 0 0 0 4px rgba(126, 227, 173, 0.12), 0 0 13px rgba(126, 227, 173, 0.8);
}

.orbit-diagram {
    position: relative;
    height: 13.6rem;
    margin: 0.25rem 0 0.5rem;
}

.orbit-diagram::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 12rem;
    transform: translate(-50%, -50%) rotate(30deg);
    background: linear-gradient(transparent, rgba(133, 200, 255, 0.6), transparent);
}

.orbit-diagram__core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(204, 235, 255, 0.9);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #c3ecff, #3f93d9 38%, #102f5a 70%);
    color: #00152b;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 0 0 0.75rem rgba(96, 174, 237, 0.09), 0 0 25px rgba(102, 192, 255, 0.44);
}

.orbit-diagram__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    border: 1px solid rgba(164, 212, 255, 0.38);
    border-radius: 50%;
}

.orbit-diagram__ring--one {
    width: 13rem;
    height: 5rem;
    transform: translate(-50%, -50%) rotate(-26deg);
}

.orbit-diagram__ring--two {
    width: 10.5rem;
    height: 7.8rem;
    transform: translate(-50%, -50%) rotate(36deg);
    border-color: rgba(244, 182, 76, 0.36);
}

.orbit-diagram__satellite {
    position: absolute;
    top: 2.3rem;
    right: 4.2rem;
    z-index: 2;
    width: 0.5rem;
    height: 0.5rem;
    display: block;
    transform: rotate(35deg);
    background: var(--asu-gold);
    box-shadow: 0 0 0 0.23rem rgba(244, 182, 76, 0.16), 0 0 12px var(--asu-gold);
}

.mission-card h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.1vw, 1.76rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.1;
    text-transform: none;
}

.mission-card > p {
    position: relative;
    z-index: 1;
    margin: 0.85rem 0 0;
    color: var(--asu-muted);
    font-size: 0.86rem;
    line-height: 1.62;
}

.mission-card__steps {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.05rem;
    margin: 1.2rem 0 0;
    padding: 0.88rem 0 0;
    border-top: 1px solid rgba(182, 220, 255, 0.16);
    list-style: none;
}

.mission-card__steps li {
    gap: 0.85rem;
    padding: 0.56rem 0;
    color: #e4f1ff;
    font-size: 0.73rem;
    line-height: 1.35;
}

.mission-card__steps strong {
    color: var(--asu-gold);
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.08em;
}

#mission-story {
    padding: clamp(5rem, 10vw, 8.5rem) max(1.5rem, calc((100vw - 80rem) / 2)) !important;
    background:
        radial-gradient(circle at 85% 18%, rgba(41, 128, 209, 0.18), transparent 25rem),
        linear-gradient(180deg, rgba(6, 15, 34, 0.94), rgba(4, 9, 22, 0.98)) !important;
}

.story-shell {
    display: grid !important;
    gap: clamp(3.5rem, 7vw, 6.75rem) !important;
}

.story-intro {
    max-width: 52rem;
}

.story-intro h2,
.section-heading h2,
.admission-panel h2 {
    margin: 0;
    color: var(--asu-text);
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.6vw, 4.35rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.99;
    text-transform: none;
    text-wrap: balance;
}

.story-intro > p:last-child,
.section-heading > div > p:last-child {
    max-width: 42rem;
    margin: 1.2rem 0 0;
    color: var(--asu-muted);
    font-size: clamp(1rem, 1.35vw, 1.14rem);
    line-height: 1.75;
}

.story-steps {
    display: grid;
    gap: clamp(4rem, 8vw, 8.5rem);
}

.story-step {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.91fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem) !important;
}

.story-step:nth-child(even) > :first-child {
    order: 2;
}

.story-step > div:first-child.glass-card {
    min-height: 25rem;
    border: 1px solid var(--asu-line) !important;
    border-radius: 1rem !important;
    background: #081226 !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35) !important;
}

.story-step > div:first-child img {
    width: 100%;
    height: 25rem !important;
    filter: saturate(0.76) contrast(1.06);
}

.story-step > div:last-child {
    gap: 1.25rem !important;
}

.story-phase {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--asu-gold);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.story-phase::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    display: block;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.story-phase--blue {
    color: var(--asu-blue);
}

.story-step h3 {
    color: var(--asu-text) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(1.72rem, 3.2vw, 2.85rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.13 !important;
    text-transform: none !important;
}

.story-step p {
    color: var(--asu-muted) !important;
    line-height: 1.7 !important;
}

.story-step > div:last-child > p {
    padding: 0.08rem 0 0.08rem 1.15rem !important;
    border-left-color: var(--asu-gold) !important;
}

.story-step .material-symbols-outlined {
    color: var(--asu-gold) !important;
}

.story-step .mt-6.glass-card {
    border: 1px solid rgba(244, 182, 76, 0.26) !important;
    border-radius: 0.7rem !important;
    background: rgba(19, 40, 74, 0.5) !important;
    box-shadow: none !important;
}
/* Programs and learning lab */

.programs-section,
.workbench-section,
.admissions-section {
    position: relative;
    padding: clamp(5rem, 10vw, 8.5rem) max(1.5rem, calc((100vw - 80rem) / 2));
}

.programs-section {
    background: linear-gradient(180deg, rgba(4, 9, 22, 0.48), rgba(8, 21, 46, 0.64)) !important;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-heading--stacked {
    display: block;
}

.section-heading--stacked .eyebrow {
    margin-bottom: 1rem;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(133, 200, 255, 0.5);
    color: var(--asu-blue);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

.section-link:hover {
    border-bottom-color: var(--asu-gold);
    color: #fff;
}

#programs .grid {
    gap: 1rem !important;
}

#programs .program-card {
    min-height: 25.5rem;
    padding: 1.7rem !important;
    border: 1px solid var(--asu-line) !important;
    border-radius: 0.85rem !important;
    background: linear-gradient(155deg, rgba(24, 48, 87, 0.78), rgba(7, 16, 35, 0.85)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 18px 38px rgba(0, 0, 0, 0.18) !important;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}

#programs .program-card:hover {
    transform: translateY(-0.45rem) !important;
    border-color: rgba(133, 200, 255, 0.55) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 24px 52px rgba(0, 0, 0, 0.32) !important;
}

#programs .program-card--featured {
    border-color: rgba(244, 182, 76, 0.46) !important;
    background: linear-gradient(155deg, rgba(46, 68, 104, 0.89), rgba(11, 22, 44, 0.9)) !important;
}

#programs .program-card .w-12 {
    width: 2.75rem !important;
    height: 2.75rem !important;
    margin-bottom: 1.65rem !important;
    border-color: rgba(133, 200, 255, 0.28) !important;
    background: rgba(52, 142, 225, 0.14) !important;
    color: var(--asu-blue) !important;
}

#programs .program-card > .relative > span {
    color: var(--asu-blue) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.63rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

#programs .program-card h3 {
    min-height: 3.2rem;
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

#programs .program-card p {
    color: var(--asu-muted) !important;
    font-size: 0.91rem !important;
    line-height: 1.64 !important;
}

#programs .program-card__link {
    color: #eaf5ff !important;
    font-family: var(--font-mono) !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase;
}

#programs .program-card__link:hover {
    color: var(--asu-gold) !important;
}

.youth-pathway {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    margin-top: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(144, 204, 255, 0.17);
    border-radius: 0.85rem;
    background: rgba(7, 20, 43, 0.58);
}

.youth-pathway > .material-symbols-outlined {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border: 1px solid rgba(244, 182, 76, 0.34);
    border-radius: 0.62rem;
    color: var(--asu-gold);
}

.youth-pathway .eyebrow {
    margin-bottom: 0.6rem;
    font-size: 0.6rem;
}

.youth-pathway h3 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -0.025em;
}

.youth-pathway p:last-child {
    max-width: 55rem;
    margin: 0.5rem 0 0;
    color: var(--asu-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

#calc-score-value,
#calc-funding-value {
    display: block;
    margin-top: 0.3rem;
    line-height: 1.5;
}

#calc-score-value {
    color: #8ed0ff;
    font-size: 0.92rem;
}

#calc-funding-value {
    color: var(--asu-gold);
    font-size: 0.85rem;
}

.workbench-section {
    background:
        radial-gradient(circle at 15% 70%, rgba(33, 99, 174, 0.15), transparent 25rem),
        linear-gradient(180deg, rgba(8, 21, 46, 0.64), rgba(5, 10, 24, 0.98)) !important;
}

#workbench .section-heading {
    max-width: 50rem;
}

#workbench .section-heading h2 {
    font-size: clamp(2.25rem, 4.35vw, 4rem);
}

#workbench .section-heading > p:last-child {
    max-width: 45rem;
    margin: 1.1rem 0 0;
    color: var(--asu-muted);
    font-size: 1rem;
    line-height: 1.72;
}

#workbench > .max-w-container-max > .glass-card {
    overflow: hidden;
    border: 1px solid var(--asu-line-strong) !important;
    border-radius: 1rem !important;
    background: rgba(7, 17, 38, 0.82) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34) !important;
}

#workbench aside {
    border-color: rgba(175, 215, 255, 0.13) !important;
    background: linear-gradient(180deg, rgba(21, 43, 79, 0.86), rgba(8, 18, 39, 0.94)) !important;
}

#workbench aside h3,
#workbench .workbench-header h3 {
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
}

#workbench .workbench-tab {
    border: 1px solid transparent;
    border-right-width: 1px !important;
    border-radius: 0.5rem !important;
}

#workbench .workbench-tab:hover {
    border-color: rgba(133, 200, 255, 0.25);
    background: rgba(133, 200, 255, 0.08) !important;
}

#workbench .workbench-tab.active-tab {
    border-color: rgba(133, 200, 255, 0.44) !important;
    background: rgba(64, 148, 229, 0.2) !important;
}

#workbench #workbench-content {
    background:
        radial-gradient(circle at 80% 5%, rgba(74, 151, 232, 0.12), transparent 17rem),
        linear-gradient(135deg, rgba(6, 16, 35, 0.55), rgba(10, 25, 53, 0.58));
}

#workbench .btn {
    border-radius: 0.42rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

#workbench .btn-primary {
    border-color: var(--asu-blue);
    background: var(--asu-blue-bright);
}

#workbench .btn-secondary {
    border-color: var(--asu-line-strong);
    background: rgba(133, 200, 255, 0.1);
    color: #f2f8ff;
}
/* Admissions, footer, and responsive rules */

.admissions-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%, rgba(244, 182, 76, 0.16), transparent 19rem),
        radial-gradient(circle at 86% 80%, rgba(48, 139, 227, 0.17), transparent 25rem),
        linear-gradient(135deg, #071127, #0b2145 50%, #061126) !important;
}

.admission-panel {
    width: min(100%, 71rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(19rem, 0.88fr);
    gap: clamp(2rem, 6vw, 6.5rem);
    padding: clamp(1.6rem, 5vw, 4.3rem);
    border: 1px solid rgba(179, 220, 255, 0.25);
    border-radius: 1.1rem;
    background: rgba(7, 18, 40, 0.68);
    box-shadow: 0 28px 74px rgba(0, 0, 0, 0.31), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.admission-panel__story {
    max-width: 39rem;
}

.admission-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(244, 182, 76, 0.58);
    border-radius: 0.65rem;
    background: rgba(244, 182, 76, 0.1);
    color: var(--asu-gold);
}

.admission-icon .material-symbols-outlined {
    font-size: 1.5rem;
}

.admission-panel h2 {
    max-width: 32rem;
    font-size: clamp(2.3rem, 4vw, 4rem);
}

.admission-panel__story > p:not(.eyebrow):not(.admission-note) {
    max-width: 36rem;
    margin: 1.1rem 0 0;
    color: var(--asu-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.admission-benefits {
    display: grid;
    gap: 0.7rem;
    margin: 1.7rem 0 0;
    padding: 1.2rem 0 0;
    border-top: 1px solid rgba(179, 220, 255, 0.16);
    list-style: none;
}

.admission-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.58rem;
    color: #e2effe;
    font-size: 0.84rem;
    line-height: 1.48;
}

.admission-benefits .material-symbols-outlined {
    margin-top: 0.02rem;
    color: var(--asu-gold);
    font-size: 1rem;
}

.admission-note {
    margin: 1.35rem 0 0;
    color: var(--asu-dim);
    font-size: 0.76rem;
    line-height: 1.55;
}

.admission-form {
    align-self: center;
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 3.5vw, 2.1rem);
    border: 1px solid rgba(182, 220, 255, 0.18);
    border-radius: 0.82rem;
    background: rgba(3, 10, 25, 0.44);
}

.admission-form__status,
.admission-form__next {
    margin: 0;
    color: var(--asu-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.admission-form__status {
    padding: 0.8rem 0.9rem;
    border-left: 2px solid var(--asu-gold);
    border-radius: 0.35rem;
    background: rgba(246, 190, 93, 0.08);
    color: #f7e3b5;
}

.admission-form__fields {
    min-width: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    border: 0;
}

.form-field {
    display: grid;
    gap: 0.48rem;
}

.form-field label {
    color: #dbeeff;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-field input {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(159, 210, 255, 0.26);
    border-radius: 0.42rem;
    background: rgba(11, 29, 58, 0.78);
    color: #fff;
    font: inherit;
}

.form-field input::placeholder {
    color: #71859f;
}

.form-field input:focus {
    border-color: var(--asu-blue);
    background: rgba(13, 37, 72, 0.95);
    box-shadow: 0 0 0 3px rgba(133, 200, 255, 0.13);
    outline: none;
}

.form-field input:disabled {
    border-color: rgba(159, 210, 255, 0.12);
    background: rgba(7, 18, 37, 0.66);
    color: #71859f;
    cursor: not-allowed;
}

.admission-form__submit {
    width: 100%;
    margin-top: 0.38rem;
}

.admission-form__feedback {
    margin: 0.18rem 0 0;
    color: #99e5b2;
    font-family: var(--font-mono);
    font-size: 0.73rem;
    line-height: 1.5;
}

.site-footer {
    border-top: 1px solid rgba(175, 215, 255, 0.12);
    background: rgba(3, 8, 19, 0.92) !important;
}

.site-footer__inner {
    width: min(100% - 3rem, 80rem);
    min-height: 8rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 0;
}

.footer-brand {
    display: grid;
    gap: 0.42rem;
}

.footer-brand__name {
    font-size: 0.76rem;
}

.footer-brand p {
    margin: 0;
    color: var(--asu-dim);
    font-size: 0.76rem;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.25rem;
}

.footer-nav a {
    color: var(--asu-muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.footer-nav a:hover {
    color: var(--asu-gold);
}

@media (max-width: 64rem) {
    .site-nav {
        display: none !important;
    }

    .site-header__inner,
    .site-footer__inner {
        width: min(100% - 2.5rem, 80rem);
    }

    #top .hero-grid,
    .admission-panel,
    .orientation-shell,
    .institutional-tools__shell {
        grid-template-columns: 1fr;
    }

    #top .hero-grid {
        gap: 3rem;
    }

    .mission-card {
        width: min(100%, 31rem);
        justify-self: start;
    }

    .story-step {
        gap: 2.6rem !important;
    }
}

.admission-form__submit:disabled {
    border-color: rgba(166, 196, 224, 0.2);
    background: rgba(66, 92, 122, 0.48);
    box-shadow: none;
    color: #b4c5d8;
    cursor: not-allowed;
}

@media (min-width: 64.0625rem) and (max-height: 48rem) {
    #top.hero-section {
        min-height: 40rem !important;
        align-items: start !important;
        padding-top: calc(4.875rem + 1.65rem) !important;
        padding-bottom: 2rem !important;
    }

    #top .hero-grid {
        align-items: start;
        gap: clamp(2rem, 4vw, 4rem);
    }

    #top .hero-copy h1 {
        font-size: clamp(3.15rem, 4.8vw, 4.3rem) !important;
    }

    #top .hero-copy h1::after {
        width: 3.4rem;
        margin-top: 0.95rem;
    }

    .hero-lead {
        margin-top: 1rem;
        line-height: 1.56;
    }

    .hero-audience {
        margin-top: 0.55rem;
    }

    .hero-actions {
        margin-top: 1rem;
    }

    .hero-actions .button {
        min-height: 2.65rem;
        padding: 0.72rem 1rem;
    }

    .hero-metrics {
        margin-top: 1.3rem;
    }

    .mission-card {
        padding: 1.1rem 1.2rem;
    }

    .orbit-diagram {
        height: 8.75rem;
    }
}

@media (max-width: 48rem) {
    .site-header {
        height: 4.4rem !important;
    }

    .site-header__inner,
    .site-footer__inner {
        width: min(100% - 2rem, 80rem);
    }

    .brand__sub {
        display: none;
    }

    .brand__mark {
        width: 2rem;
        height: 2rem;
    }

    .brand__name {
        font-size: 0.75rem;
    }

    .header-tools {
        gap: 0.45rem;
    }

    .language-toggle {
        width: 2.1rem;
        height: 2.1rem;
    }

    .header-cta {
        padding: 0.64rem 0.67rem;
        font-size: 0.61rem;
    }

    #top.hero-section {
        min-height: 100svh !important;
        padding-top: calc(4.4rem + 3.5rem) !important;
        padding-bottom: 3.75rem !important;
    }

    #top .hero-media {
        background-position: 63% center;
        opacity: 0.62;
    }

    #top .hero-scrim {
        background:
            linear-gradient(90deg, rgba(4, 8, 20, 0.95), rgba(4, 8, 20, 0.74)),
            linear-gradient(0deg, rgba(4, 8, 20, 0.95), transparent 56%, rgba(4, 8, 20, 0.54));
    }

    #top .hero-copy h1 {
        font-size: clamp(2.75rem, 13.5vw, 4rem) !important;
    }

    .hero-lead {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .hero-audience {
        font-size: 0.67rem;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .button {
        width: 100%;
    }

    .hero-metrics {
        gap: 0.3rem;
        margin-top: 2.5rem;
    }

    .hero-metrics div + div {
        padding-left: 0.6rem;
    }

    .hero-metrics dt {
        font-size: 1.55rem;
    }

    .hero-metrics dd {
        font-size: 0.64rem;
    }

    .mission-card {
        padding: 1.15rem;
    }

    .orientation-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .orientation-list {
        grid-template-columns: 1fr;
    }

    .orientation-card {
        padding: 1.15rem;
    }

    .institutional-tools__cards {
        grid-template-columns: 1fr;
    }

    .institutional-tool {
        min-height: 0;
    }

    .youth-pathway {
        padding: 1.15rem;
    }

    .orbit-diagram {
        height: 11.75rem;
    }

    .story-intro h2,
    .section-heading h2,
    .admission-panel h2 {
        font-size: clamp(2.1rem, 10.7vw, 3.35rem);
    }

    .section-heading {
        display: grid;
        align-items: start;
        gap: 1rem;
    }

    .section-link {
        justify-self: start;
    }

    .story-step {
        grid-template-columns: 1fr;
    }

    .story-step:nth-child(even) > :first-child {
        order: 0;
    }

    .story-step > div:first-child.glass-card,
    .story-step > div:first-child img {
        min-height: 0;
        height: 17rem !important;
    }

    #programs .grid {
        grid-template-columns: 1fr !important;
    }

    #programs .program-card {
        min-height: 0;
    }

    #workbench > .max-w-container-max > .glass-card {
        border-radius: 0.78rem !important;
    }

    #workbench aside {
        display: block !important;
        min-width: 0 !important;
        padding: 0.8rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap;
    }

    #workbench aside > div:first-child,
    #workbench aside > div:last-child {
        display: none !important;
    }

    #workbench aside nav {
        width: max-content;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    #workbench .workbench-tab {
        min-width: max-content;
        padding: 0.66rem 0.72rem !important;
    }

    #workbench .workbench-tab span[data-i18n] {
        display: inline !important;
        font-size: 0.66rem;
    }

    #workbench #workbench-content {
        min-height: 37rem;
        padding: 1.25rem !important;
    }

    .admission-panel {
        gap: 2rem;
        padding: 1.25rem;
        border-radius: 0.82rem;
    }

    .admission-form {
        padding: 1rem;
    }

    .site-footer__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-nav {
        justify-content: flex-start;
        gap: 0.8rem 1.05rem;
    }
}

@media (max-width: 23rem) {
    .header-cta {
        display: none;
    }

    .hero-metrics {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .hero-metrics div + div {
        padding-left: 0;
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-delay: 0ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #top .hero-media {
        transform: none;
    }
}

/* ==========================================================================
   Language Switcher & Multi-lingual (AR/ZGH) Typography Layer
   ========================================================================== */

.lang-switcher {
    display: inline-flex;
    align-items: center;
    background: rgba(8, 17, 38, 0.75);
    border: 1px solid var(--asu-line);
    border-radius: 9999px;
    padding: 2px;
    gap: 1px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lang-btn {
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: var(--asu-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.22rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.lang-btn:hover {
    color: #fff;
    background: rgba(133, 200, 255, 0.14);
}

.lang-btn.active {
    background: var(--asu-blue-bright);
    color: #050816;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(66, 165, 245, 0.35);
}

/* Arabic RTL Typography & Layout */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Noto Sans Arabic', var(--font-sans) !important;
}

html[dir="rtl"] .site-nav {
    flex-direction: row-reverse;
}

html[dir="rtl"] .border-l-2 {
    border-left-width: 0 !important;
    border-right-width: 2px !important;
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
}

html[dir="rtl"] .text-left {
    text-align: right !important;
}

/* Tamazight Typography */
html[lang="zgh"] {
    font-family: 'Noto Sans Tifinagh', var(--font-sans) !important;
}

html[lang="zgh"] .brand__name,
html[lang="zgh"] h1,
html[lang="zgh"] h2,
html[lang="zgh"] h3 {
    font-family: 'Noto Sans Tifinagh', var(--font-display) !important;
    letter-spacing: 0.04em !important;
}