:root {
    --ink: #10211e;
    --forest: #0b3c35;
    --forest-2: #115047;
    --gold: #f4b942;
    --cream: #f7f3e8;
    --white: #fff;
    --muted: #66736f;
    --line: rgba(16, 33, 30, .14);
    --serif: "Playfair Display", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 8px;
    background: #fff;
    color: #000;
    padding: 10px;
    z-index: 100
}

.skip-link:focus {
    left: 8px
}

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

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 10;
    color: #fff
}

.nav-shell {
    max-width: 1240px;
    margin: auto;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand-mark {
    width: auto;
    height: 64px;
    flex: none;
    object-fit: contain
}

.brand-copy {
    display: grid;
    line-height: 1.15
}

.brand-copy strong {
    font-family: var(--serif);
    font-size: 1.2rem
}

.brand-copy small {
    font-size: .68rem;
    opacity: .7;
    letter-spacing: .05em
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 30px
}

.site-header nav a {
    font-size: .9rem;
    font-weight: 500
}

.nav-cta {
    border: 1px solid rgba(255, 255, 255, .4);
    padding: 11px 17px;
    border-radius: 999px;
    transition: .25s
}

.nav-cta:hover {
    background: #fff;
    color: var(--forest)
}

.menu-button {
    display: none;
    background: none;
    border: 0;
    padding: 8px
}

.menu-button span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    margin: 5px
}

.hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--forest);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 135px 28px 75px
}

.hero:before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 185, 66, .13), transparent 68%);
    left: -240px;
    top: 110px
}

.hero-grid {
    width: 100%;
    max-width: 1240px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr .85fr;
    align-items: center;
    gap: 80px;
    position: relative
}

.eyebrow,
.section-kicker {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase
}

.eyebrow {
    color: #d9e2df
}

.eyebrow span {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--gold);
    vertical-align: middle;
    margin-right: 10px
}

.hero h1,
.section h2,
.join h2 {
    font: 700 clamp(3.6rem, 6.4vw, 6rem)/.98 var(--serif);
    letter-spacing: -.045em;
    margin: 24px 0
}

.hero h1 em,
.section h2 em,
.join h2 em {
    font-weight: 600;
    color: var(--gold)
}

.hero-lead {
    font-size: 1.18rem;
    max-width: 570px;
    color: #cfdbd8;
    line-height: 1.75
}

.hero-actions,
.join-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
    flex-wrap: wrap
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 52px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem
}

.button-primary {
    background: var(--gold);
    color: var(--forest)
}

.button-primary:hover,
.button-gold:hover {
    background: #ffd06e
}

.button-link {
    padding-left: 0
}

.play {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .7rem
}

.trust-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 42px
}

.trust-row p {
    font-size: .78rem;
    line-height: 1.35;
    color: #aabbb7
}

.trust-row strong {
    color: #fff
}

.avatars {
    display: flex
}

.avatars span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e1c994;
    color: #29473f;
    font-size: .58rem;
    font-weight: 700;
    border: 2px solid var(--forest);
    margin-left: -8px
}

.avatars span:first-child {
    margin-left: 0;
    background: #d8a65a
}

.avatars span:last-child {
    background: #e6e0ce
}

.hero-visual {
    position: relative;
    /* Shrinks on short screens so the full-height hero still fits */
    min-height: clamp(400px, calc(100vh - 240px), 510px);
    min-height: clamp(400px, calc(100svh - 240px), 510px)
}

.photo-frame {
    position: absolute;
    inset: 0 25px 35px 0;
    border-radius: 220px 220px 20px 20px;
    overflow: hidden
}

.photo-frame:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 55%, rgba(4, 31, 27, .9))
}

.photo-label {
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 34px;
    display: grid
}

.photo-label span {
    font-size: .65rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: .13em
}

.photo-label strong {
    font: 600 1.35rem var(--serif)
}

.quote-card {
    position: absolute;
    right: -30px;
    bottom: 0;
    background: var(--cream);
    color: var(--ink);
    width: 220px;
    padding: 20px 22px;
    border-radius: 16px;
    z-index: 3;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25)
}

.quote-card p {
    font: 600 1rem/1.35 var(--serif);
    margin: 0
}

.quote-mark {
    color: var(--gold);
    font: 700 2rem/1 var(--serif)
}

.orbit {
    position: absolute;
    width: 220px;
    right: -75px;
    top: -60px;
    fill: none;
    stroke: rgba(244, 185, 66, .28);
    stroke-width: 1
}

.orbit circle:last-child {
    fill: var(--gold);
    stroke: none
}

.scroll-cue {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .67rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #95aaa5;
    display: flex;
    gap: 10px;
    align-items: center
}

.scroll-cue span {
    width: 1px;
    height: 26px;
    background: var(--gold)
}

.section {
    padding: 110px max(28px, calc((100vw - 1184px)/2))
}

.section-kicker {
    color: #8a6a24
}

.intro-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 110px;
    align-items: end
}

.intro h2,
.stories h2,
.impact h2 {
    font-size: clamp(2.7rem, 5vw, 4.7rem);
    margin: 18px 0
}

.intro-grid>div p {
    color: var(--muted);
    font-size: 1.05rem
}

.text-link {
    font-size: .86rem;
    font-weight: 700;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 6px;
    display: inline-flex;
    gap: 32px
}

.values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 82px;
    border-top: 1px solid var(--line)
}

.values article {
    position: relative;
    padding: 42px 45px 0 0;
    border-right: 1px solid var(--line);
    min-height: 255px
}

.values article+article {
    padding-left: 45px
}

.values article:last-child {
    border-right: 0
}

.value-number {
    position: absolute;
    right: 24px;
    top: 20px;
    color: #9ba4a1;
    font-size: .73rem
}

.value-icon {
    font-size: 2rem;
    color: #c79226
}

.values h3 {
    font: 600 1.65rem var(--serif);
    margin: 20px 0 8px
}

.values p {
    font-size: .91rem;
    color: var(--muted);
    max-width: 280px
}

.initiatives {
    background: var(--forest);
    color: #fff
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px
}

.section-heading h2 {
    font-size: clamp(2.6rem, 4vw, 4rem);
    margin: 15px 0 0
}

.section-heading>p {
    max-width: 410px;
    color: #bbcbc7
}

.section-kicker.light {
    color: var(--gold)
}

.initiative-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.initiative {
    background: #154941;
    min-height: 420px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    transition: transform .25s, background .25s
}

.initiative:hover {
    transform: translateY(-5px);
    background: #1a584e
}

.initiative.featured {
    background: var(--gold);
    color: var(--forest)
}

.initiative-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .68rem;
    letter-spacing: .12em;
    font-weight: 700
}

.round-arrow {
    width: 39px;
    height: 39px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.initiative h3 {
    font: 600 2.35rem/1.05 var(--serif);
    margin: 0 0 16px
}

.initiative p {
    font-size: .88rem;
    max-width: 280px;
    opacity: .76
}

.initiative a {
    font-size: .8rem;
    font-weight: 700
}

.impact {
    background: #fff;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
    align-items: center
}

.impact-copy>p:not(.section-kicker) {
    color: var(--muted);
    max-width: 430px
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}

.stats div {
    padding: 35px 30px;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.stats div:nth-child(3),
.stats div:nth-child(4) {
    border-bottom: 0
}

.stats strong {
    display: block;
    font: 700 clamp(2.5rem, 4vw, 4.1rem) var(--serif);
    color: var(--forest)
}

.stats span {
    font-size: .82rem;
    color: var(--muted)
}

.stories {
    background: #edf0ec
}

.section-heading.dark {
    align-items: center
}

.story-card {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    min-height: 440px;
    background: #fff
}

.story-image {
    min-height: 400px
}

.story-content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.tag {
    font-size: .66rem;
    letter-spacing: .14em;
    font-weight: 700;
    color: #8a6a24
}

.story-content h3 {
    font: 600 2.3rem/1.18 var(--serif);
    margin: 18px 0
}

.story-content p {
    color: var(--muted)
}

.story-content a {
    font-weight: 700;
    font-size: .82rem;
    margin-top: 15px
}

.join {
    background: #0a332e;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden
}

.join:before,
.join:after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(244, 185, 66, .18);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%)
}

.join:before {
    left: -150px
}

.join:after {
    right: -150px
}

.join-inner {
    position: relative;
    z-index: 1
}

.join h2 {
    font-size: clamp(3rem, 5vw, 5rem)
}

.join-inner>p:not(.section-kicker) {
    color: #b9c9c5;
    max-width: 570px;
    margin: 0 auto
}

.join-actions {
    justify-content: center
}

.button-gold {
    background: var(--gold);
    color: var(--forest)
}

.button-ghost {
    border: 1px solid rgba(255, 255, 255, .35)
}

footer {
    background: #071e1b;
    color: #fff;
    padding: 65px max(28px, calc((100vw - 1184px)/2)) 25px
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    align-items: start
}

.footer-top>p {
    font-size: .9rem;
    color: #9bafaa;
    max-width: 280px
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: .85rem
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 55px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    color: #6f8580;
    font-size: .68rem
}

.reveal {
    animation: rise .75s ease both
}

.hero-visual {
    animation-delay: .12s
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:900px) {
    .site-header nav {
        position: absolute;
        top: 78px;
        left: 20px;
        right: 20px;
        background: #fff;
        color: var(--ink);
        padding: 20px;
        border-radius: 12px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        box-shadow: 0 15px 45px rgba(0, 0, 0, .25)
    }

    .site-header nav.open {
        display: flex
    }

    .site-header nav a {
        padding: 8px
    }

    .nav-cta {
        background: var(--gold);
        border: 0;
        text-align: center
    }

    .brand-mark {
        height: 56px
    }

    .menu-button {
        display: block
    }

    .hero {
        padding-top: 120px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 55px
    }

    .hero-visual {
        min-height: 500px;
        max-width: 580px;
        width: 100%;
        margin: auto
    }

    .quote-card {
        right: 0
    }

    .intro-grid,
    .impact {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .values {
        grid-template-columns: 1fr
    }

    .values article,
    .values article+article {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 35px 20px;
        min-height: auto
    }

    .initiative-grid {
        grid-template-columns: 1fr
    }

    .initiative {
        min-height: 340px
    }

    .story-card {
        grid-template-columns: 1fr
    }

    .story-image {
        height: 360px
    }

    .footer-top {
        grid-template-columns: 1fr 1fr
    }

    .footer-top>p {
        display: none
    }
}

@media(max-width:560px) {
    .nav-shell {
        padding: 18px 20px
    }

    .brand-mark {
        height: 46px
    }

    .brand-copy small {
        display: none
    }

    .hero {
        min-height: auto;
        padding: 115px 20px 70px
    }

    .hero h1 {
        font-size: 3.2rem
    }

    .hero-lead {
        font-size: 1rem
    }

    .hero-visual {
        min-height: 420px
    }

    .photo-frame {
        right: 0
    }

    .quote-card {
        width: 190px;
        padding: 16px
    }

    .scroll-cue {
        display: none
    }

    .section {
        padding: 80px 20px
    }

    .intro h2,
    .stories h2,
    .impact h2 {
        font-size: 2.55rem
    }

    .section-heading {
        display: block
    }

    .section-heading>p {
        margin-top: 20px
    }

    .stats div {
        padding: 25px 15px
    }

    .stats strong {
        font-size: 2.35rem
    }

    .story-image {
        height: 280px;
        min-height: 0
    }

    .story-content {
        padding: 34px 25px
    }

    .story-content h3 {
        font-size: 2rem
    }

    .footer-top {
        grid-template-columns: 1fr
    }

    .footer-bottom {
        display: grid;
        gap: 8px
    }

    .join:before,
    .join:after {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .reveal {
        animation: none
    }

    .initiative {
        transition: none
    }
}

/* Navy + gold brand theme (Bound by Cause) */
:root {
    --ink: #14233b;
    --blue: #15335e;
    --blue-2: #24508a;
    --forest: #0d6253;
    --forest-2: #117561;
    --gold: #e2b252;
    --gold-deep: #8f6418;
    --cream: #faf6ee;
    --muted: #5f6673;
    --line: rgba(20, 35, 59, .14)
}

.hero {
    --hero-photo: url("https://akalacademybarusahib.com/wp-content/uploads/2017/07/web_panorama_01-aug_17.jpg");
    isolation: isolate;
    background: #0c2140
}

.hero:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(ellipse 55% 60% at 90% 4%, rgba(240, 186, 92, .34), transparent 70%), linear-gradient(90deg, rgba(9, 24, 48, .93) 0%, rgba(12, 33, 64, .8) 45%, rgba(16, 42, 78, .5) 75%, rgba(21, 51, 94, .36) 100%), linear-gradient(180deg, rgba(9, 24, 48, .72) 0%, rgba(9, 24, 48, 0) 26%, rgba(9, 24, 48, 0) 70%, rgba(9, 24, 48, .84) 100%), var(--hero-photo) center 58%/cover no-repeat;
    transform: scale(1.04);
    animation: hero-drift 30s ease-in-out infinite alternate;
    will-change: transform
}

.hero:before {
    z-index: -1;
    background: radial-gradient(circle, rgba(226, 178, 82, .16), transparent 68%)
}

.hero h1,
.hero-lead {
    text-shadow: 0 2px 18px rgba(3, 20, 36, .45)
}

@keyframes hero-drift {
    to {
        transform: scale(1.12) translate3d(-1.5%, 0, 0)
    }
}

@media(max-width:900px) {
    .hero:after {
        background: radial-gradient(ellipse 80% 40% at 80% 0%, rgba(240, 186, 92, .3), transparent 70%), linear-gradient(180deg, rgba(9, 24, 48, .86) 0%, rgba(12, 33, 64, .74) 50%, rgba(9, 24, 48, .9) 100%), var(--hero-photo) center/cover no-repeat
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero:after {
        animation: none
    }
}

.nav-cta:hover {
    color: var(--blue)
}

.button-primary,
.button-gold {
    color: #13294b
}

.button-primary:hover,
.button-gold:hover {
    background: #f0c873
}

.avatars span {
    background: #b9e3ef;
    color: #164358;
    border-color: var(--blue)
}

.avatars span:first-child {
    background: #70d7bd
}

.avatars span:last-child {
    background: #d7edf3
}

.photo-frame:after {
    background: linear-gradient(transparent 50%, rgba(12, 30, 58, .92))
}

.orbit {
    stroke: rgba(226, 178, 82, .35)
}

.section-kicker {
    color: var(--gold-deep)
}

.value-icon {
    color: var(--blue-2)
}

.initiatives {
    background: linear-gradient(145deg, #084a40 0%, var(--forest) 60%, #0a5265 130%)
}

.initiative {
    background: #147260
}

.initiative:hover {
    background: #16816d
}

.initiative.featured {
    background: var(--blue);
    color: #fff
}

.stats strong {
    color: var(--blue)
}

.stories {
    background: #f4eee2
}

.tag {
    color: var(--gold-deep)
}

.join {
    background: radial-gradient(ellipse 70% 60% at 50% 120%, rgba(226, 178, 82, .22), transparent 70%), linear-gradient(115deg, #0c2140 0%, #15335e 55%, #1d3f6b 100%)
}

.join:before,
.join:after {
    border-color: rgba(226, 178, 82, .24)
}

footer {
    background: #0b1d38
}

/* Astro + React additions */
.journey-react {
    background: #edf4f5
}

.react-journey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.react-options {
    display: grid;
    gap: 10px
}

.react-options button {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 20px;
    text-align: left;
    color: var(--ink);
    cursor: pointer
}

.react-options button.active {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(11, 70, 115, .1)
}

.react-options span,
.react-options small {
    display: block
}

.react-options span {
    font: 600 1.15rem var(--serif)
}

.react-options small {
    color: var(--muted);
    margin-top: 5px
}

.react-selection {
    background: linear-gradient(135deg, var(--blue), var(--forest));
    color: #fff;
    border-radius: 12px;
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.react-selection>span {
    font-size: .7rem;
    letter-spacing: .14em;
    color: var(--gold);
    font-weight: 700
}

.react-selection h3 {
    font: 600 2rem var(--serif);
    margin: 18px 0 10px
}

.react-selection p {
    color: #d1e3e5
}

.react-selection .button {
    align-self: flex-start;
    margin-top: 16px
}

.registration-page {
    background: var(--cream)
}

.register-hero {
    background: radial-gradient(ellipse 50% 70% at 95% 0%, rgba(240, 186, 92, .22), transparent 70%), linear-gradient(125deg, #0c2140 0%, var(--blue) 60%, #2a4a72 135%);
    color: #fff;
    padding: 125px max(28px, calc((100vw - 1100px)/2)) 68px
}

.register-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: end
}

.register-hero h1 {
    font: 700 clamp(3.2rem, 6vw, 5.7rem)/1 var(--serif);
    letter-spacing: -.04em;
    margin: 0
}

.register-hero h1 em {
    color: var(--gold)
}

.register-hero p {
    font-size: 1.08rem;
    color: #cce0e5
}

.register-shell {
    max-width: 1100px;
    margin: auto;
    padding: 80px 28px;
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 60px;
    align-items: start
}

.register-intro h2 {
    font: 600 2.7rem/1.1 var(--serif);
    margin: 14px 0
}

.register-intro>p {
    color: var(--muted)
}

.api-contract {
    background: #e4f3f0;
    border-left: 4px solid var(--forest);
    padding: 18px;
    margin-top: 28px
}

.api-contract strong,
.api-contract code,
.api-contract span {
    display: block
}

.api-contract code {
    font-size: .76rem;
    margin: 7px 0;
    overflow-wrap: anywhere
}

.api-contract span {
    font-size: .78rem;
    color: var(--muted)
}

.v1-registration-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.v1-field {
    display: grid;
    gap: 7px
}

.v1-field.full,
.v1-form-footer.full,
.v1-consent.full {
    grid-column: 1/-1
}

.v1-field label {
    font-size: .85rem;
    font-weight: 700
}

.v1-field input,
.v1-field select,
.v1-field textarea {
    width: 100%;
    border: 1px solid #becfd4;
    border-radius: 8px;
    padding: 12px;
    font: inherit
}

.v1-field input:focus,
.v1-field select:focus,
.v1-field textarea:focus {
    outline: 3px solid rgba(11, 70, 115, .15);
    border-color: var(--blue)
}

.v1-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: .85rem
}

.v1-form-footer {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap
}

.v1-status {
    font-size: .82rem
}

.v1-status.success {
    color: var(--forest)
}

.v1-status.error {
    color: #a32d2d
}

@media(max-width:900px) {

    .react-journey-grid,
    .register-hero-grid,
    .register-shell {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .register-hero {
        padding: 110px 20px 60px
    }

    .register-shell {
        padding: 60px 20px
    }

    .v1-registration-form {
        grid-template-columns: 1fr;
        padding: 22px
    }

    .v1-field {
        grid-column: 1/-1
    }

    .react-selection {
        padding: 28px 22px
    }
}

/* Home carousel */
.carousel-viewport {
    display: flex;
    flex-direction: column
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .65s cubic-bezier(.22, .61, .36, 1)
}

.carousel-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    margin: 0
}

.carousel-slide:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(5, 44, 65, .92))
}

.carousel-slide figcaption {
    position: absolute;
    z-index: 2;
    bottom: 76px;
    left: 34px;
    display: grid
}

.carousel-slide figcaption span {
    font-size: .75rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: .13em
}

.carousel-slide figcaption strong {
    font: 600 1.35rem var(--serif)
}

.carousel-controls {
    position: absolute;
    z-index: 4;
    left: 28px;
    right: 28px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.carousel-arrow {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(5, 39, 55, .45);
    color: #fff;
    font: inherit;
    cursor: pointer
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
    background: var(--gold);
    color: #13294b
}

.carousel-dots {
    display: flex;
    gap: 8px
}

.carousel-dots button {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .25s
}

.carousel-dots button.is-active {
    width: 26px;
    background: var(--gold)
}

/* Reusable inner-page system */
.inner-page {
    background: #f7fafb
}

.inner-header {
    position: relative;
    background: var(--blue)
}

.inner-header .nav-shell {
    color: #fff
}

.inner-main {
    min-height: 70vh
}

.page-hero {
    background: linear-gradient(125deg, #082f52, var(--blue) 62%, #0c625d);
    color: #fff;
    padding: 110px max(28px, calc((100vw - 1184px)/2)) 78px
}

.breadcrumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: .8rem;
    color: #bcd3dd;
    margin-bottom: 28px
}

.breadcrumbs a:hover {
    color: #fff
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: end
}

.page-hero h1 {
    font: 700 clamp(3.2rem, 6vw, 5.8rem)/1 var(--serif);
    letter-spacing: -.04em;
    margin: 0
}

.page-hero h1 em {
    color: var(--gold);
    font-style: italic
}

.page-hero p {
    font-size: 1.08rem;
    color: #cce0e5;
    max-width: 520px
}

.content-shell {
    padding: 90px max(28px, calc((100vw - 1060px)/2))
}

.article-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 75px
}

.side-nav {
    position: sticky;
    top: 28px;
    align-self: start;
    display: grid;
    gap: 4px;
    border-left: 1px solid var(--line);
    padding-left: 18px
}

.side-nav a {
    padding: 8px 12px;
    font-size: .9rem;
    color: var(--muted);
    border-radius: 6px
}

.side-nav a:hover,
.side-nav a.active {
    background: #e5f4f1;
    color: var(--forest);
    font-weight: 700
}

.prose h2 {
    font: 600 clamp(2rem, 4vw, 3.2rem)/1.15 var(--serif);
    margin: 0 0 22px
}

.prose h3 {
    font: 600 1.55rem var(--serif);
    margin: 40px 0 12px
}

.prose p {
    color: var(--muted);
    font-size: 1.02rem;
    max-width: 760px
}

.quote-panel {
    background: #e6f4f2;
    border-left: 4px solid var(--forest);
    padding: 28px 32px;
    margin: 38px 0;
    font: 600 1.4rem/1.5 var(--serif)
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px
}

.detail-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px
}

.detail-card .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e4f1f7;
    color: var(--blue);
    font-size: 1.2rem
}

.detail-card h3 {
    margin: 24px 0 10px;
    font: 600 1.45rem var(--serif)
}

.detail-card p {
    font-size: .9rem
}

.detail-card a {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700;
    font-size: .84rem;
    color: var(--blue)
}

.page-cta {
    margin-top: 70px;
    padding: 48px;
    background: linear-gradient(120deg, var(--blue), var(--forest));
    color: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px
}

.page-cta h2 {
    margin: 0;
    font: 600 2.2rem var(--serif)
}

.page-cta p {
    color: #d2e4e7;
    margin: 7px 0 0
}

.inner-footer {
    margin-top: 0
}

@media(max-width:900px) {

    .page-hero-grid,
    .article-layout {
        grid-template-columns: 1fr
    }

    .side-nav {
        position: static;
        display: flex;
        overflow: auto;
        border-left: 0;
        border-bottom: 1px solid var(--line);
        padding: 0 0 12px
    }

    .detail-grid {
        grid-template-columns: 1fr
    }

    .page-cta {
        align-items: flex-start;
        flex-direction: column
    }
}

@media(max-width:560px) {
    .page-hero {
        padding: 95px 20px 65px
    }

    .content-shell {
        padding: 65px 20px
    }

    .page-cta {
        padding: 32px 24px
    }

    .carousel-slide figcaption {
        left: 22px;
        bottom: 72px
    }

    .carousel-controls {
        left: 20px;
        right: 20px
    }
}

/* Expanded information architecture */
.inner-header .nav-shell {
    max-width: 1380px
}

.inner-header nav {
    gap: 18px
}

.nav-group {
    position: relative;
    padding: 10px 0
}

.nav-group>a {
    white-space: nowrap
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: -18px;
    width: 230px;
    padding: 10px;
    background: #fff;
    color: var(--ink);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(3, 31, 45, .22);
    display: none
}

.nav-dropdown a {
    display: block;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: .82rem
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
    background: #e7f4f3;
    color: var(--forest)
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
    display: block
}

.side-nav-label {
    margin: 18px 0 4px;
    padding: 8px 12px 4px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue)
}

.content-section+.content-section {
    margin-top: 72px;
    padding-top: 64px;
    border-top: 1px solid var(--line)
}

.detail-grid-wide {
    grid-template-columns: repeat(2, 1fr)
}

@media(max-width:1100px) {
    .inner-header nav {
        gap: 10px
    }

    .inner-header nav a {
        font-size: .78rem
    }
}

@media(max-width:900px) {
    .nav-group {
        padding: 0
    }

    .nav-dropdown {
        position: static;
        display: grid;
        width: auto;
        padding: 0 0 6px 15px;
        box-shadow: none;
        background: transparent
    }

    .nav-dropdown a {
        padding: 6px 8px;
        color: var(--muted)
    }

    .detail-grid-wide {
        grid-template-columns: 1fr
    }

    .side-nav-label {
        white-space: nowrap;
        margin: 0;
        padding: 8px
    }
}

/* Varied child-page layouts */
.page-hero {
    isolation: isolate
}

.page-hero:after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -5vw;
    bottom: -18vw;
    width: 52vw;
    height: 52vw;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%
}

.page-hero-community {
    background: linear-gradient(125deg, #073d5f, #0b5b73 58%, #16806c)
}

.page-hero-education {
    background: linear-gradient(125deg, #09395f, #155a86 62%, #14766b)
}

.page-hero-initiatives {
    background: linear-gradient(125deg, #074b43, #0d6a59 58%, #075678)
}

.page-hero-news-events {
    background: linear-gradient(125deg, #102f52, #174d74 58%, #176b67)
}

.page-hero-get-involved {
    background: linear-gradient(125deg, #0a3e66, #075a70 55%, #0b7561)
}

.hero-intro {
    display: flex;
    align-items: center;
    gap: 26px
}

.hero-intro>p {
    margin: 0
}

.hero-emblem {
    width: 108px;
    height: 108px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-content: center;
    text-align: center;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .035)
}

.hero-emblem b {
    font: 700 2.45rem/1 var(--serif);
    color: var(--gold)
}

.hero-emblem i {
    font-style: normal;
    font-size: .42rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-top: 8px;
    color: #d4e7e8
}

.prose {
    max-width: 100%;
    min-width: 0
}

.section-copy {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 20px
}

.section-index {
    font: 600 .72rem var(--sans);
    letter-spacing: .12em;
    color: var(--forest);
    padding-top: 11px
}

.section-copy h2 {
    max-width: 720px
}

.section-copy p {
    max-width: 790px
}

.content-section.section-tint {
    background: #eaf4f3;
    margin-left: -48px;
    margin-right: -48px;
    padding: 52px 48px;
    border: 0
}

.content-section+.content-section {
    margin-top: 70px
}

.content-section.section-tint+.content-section {
    border: 0;
    padding-top: 0
}

/* Section landing pages: large pathways with changing backgrounds, not cards */
.path-list {
    margin-top: 50px;
    border-top: 1px solid var(--line)
}

.path-item {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 26px;
    align-items: center;
    padding: 30px 12px;
    border-bottom: 1px solid var(--line);
    transition: padding .2s, background .2s
}

.path-item:hover {
    padding-left: 24px;
    padding-right: 24px;
    background: #fff
}

.path-item.path-1:hover {
    background: #e8f5f2
}

.path-item.path-2:hover {
    background: #e8f1f7
}

.path-number {
    font: 600 .72rem var(--sans);
    letter-spacing: .1em;
    color: var(--blue)
}

.path-item h3 {
    margin: 0;
    font: 600 1.75rem var(--serif)
}

.path-item p {
    margin: 6px 0 0;
    font-size: .92rem
}

.path-item>a {
    font-weight: 700;
    font-size: .78rem;
    color: var(--blue);
    white-space: nowrap
}

.path-item>a span {
    font-size: 1.05rem;
    margin-left: 10px
}

/* Editorial listings: clean rows */
.editorial-list {
    margin-top: 48px
}

.editorial-row {
    display: grid;
    grid-template-columns: 48px 1fr 42px;
    gap: 20px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid var(--line)
}

.editorial-row:first-child {
    border-top: 1px solid var(--line)
}

.editorial-row>span {
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--forest)
}

.editorial-row h3 {
    margin: 0 0 5px;
    font: 600 1.45rem var(--serif)
}

.editorial-row p {
    margin: 0;
    font-size: .9rem
}

.editorial-row>a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--blue)
}

.editorial-row>a:hover {
    background: var(--blue);
    color: #fff
}

.editorial-row>i {
    color: var(--gold)
}

/* Detail pages: numbered narrative points without containers */
.content-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    margin-top: 52px
}

.content-points article {
    border-top: 3px solid var(--blue);
    padding-top: 20px
}

.content-points article:nth-child(2n) {
    border-color: var(--forest)
}

.content-points article>span {
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--muted)
}

.content-points h3 {
    margin: 20px 0 8px;
    font: 600 1.45rem var(--serif)
}

.content-points p {
    font-size: .9rem
}

.content-points a {
    display: inline-block;
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--blue)
}

@media(max-width:900px) {
    .hero-intro {
        align-items: flex-start
    }

    .hero-emblem {
        width: 88px;
        height: 88px
    }

    .section-copy {
        grid-template-columns: 38px 1fr
    }

    .content-section.section-tint {
        margin-left: -24px;
        margin-right: -24px;
        padding: 42px 24px
    }

    .content-points {
        grid-template-columns: 1fr
    }

    .path-item {
        grid-template-columns: 45px 1fr
    }

    .path-item>a {
        grid-column: 2
    }

    .editorial-row {
        grid-template-columns: 38px 1fr auto
    }
}

@media(max-width:560px) {
    .hero-intro {
        display: block
    }

    .hero-emblem {
        display: none
    }

    .section-copy {
        display: block
    }

    .section-index {
        display: block;
        margin-bottom: 12px
    }

    .path-item {
        grid-template-columns: 34px 1fr;
        padding: 24px 0
    }

    .path-item:hover {
        padding-left: 8px;
        padding-right: 8px
    }

    .editorial-row {
        grid-template-columns: 30px 1fr
    }

    .editorial-row>a,
    .editorial-row>i {
        grid-column: 2
    }

    .content-section.section-tint {
        margin-left: -20px;
        margin-right: -20px;
        padding: 38px 20px
    }
}

.page-hero {
    position: relative;
    overflow: hidden
}

.hide {
    display: none
}

/* Bound by Cause event (home page) */
.hero h1.event-title {
    font: 700 clamp(3.4rem, 6.2vw, 5.8rem)/1.02 "Cinzel", var(--serif);
    letter-spacing: .01em
}

.event-title em {
    font-style: normal;
    font-weight: 700;
    background: linear-gradient(180deg, #f8dc9c 0%, #e2b252 48%, #b9832c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 14px rgba(3, 20, 36, .45))
}

.event-motto {
    margin: -4px 0 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold)
}

.projects {
    background: var(--cream)
}

.projects .section-heading>p {
    color: var(--muted)
}

.project-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.project {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 22px 22px;
    transition: transform .25s, box-shadow .25s
}

.project:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(20, 35, 59, .1)
}

.project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px
}

.project-number {
    font: 600 2.2rem/1 var(--serif);
    color: #c9a35a
}

.project-icon,
.involve-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none
}

.project-icon {
    background: var(--tone, #4f6fa8);
    color: #fff
}

.project-icon svg,
.involve-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.tone-blue {
    --tone: #4f6fa8
}

.tone-olive {
    --tone: #758a4c
}

.tone-amber {
    --tone: #b67d2a
}

.tone-rose {
    --tone: #b95856
}

.tone-steel {
    --tone: #5585ad
}

.project h3 {
    font: 600 1.22rem/1.2 var(--serif);
    margin: 0 0 10px
}

.project p {
    flex: 1;
    margin: 0 0 18px;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--muted)
}

.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px
}

.project a {
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--blue)
}

.project-take:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit
}

.project:hover a,
.project a:focus-visible {
    color: var(--gold-deep)
}

.project-more {
    position: relative;
    z-index: 1
}

.gurbani {
    background: linear-gradient(180deg, #f6ecd6, var(--cream));
    border-top: 1px solid rgba(143, 100, 24, .15);
    text-align: center;
    padding: 90px max(28px, calc((100vw - 900px)/2))
}

.gurbani:before {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--gold);
    margin: 0 auto 34px
}

.gurbani p {
    margin: 0
}

.gurbani-text {
    font: 600 clamp(1.7rem, 3.4vw, 2.7rem)/1.65 "Noto Serif Gurmukhi", serif;
    color: var(--blue)
}

.gurbani .gurbani-roman {
    margin-top: 16px;
    font-style: italic;
    color: var(--muted)
}

.gurbani .gurbani-meaning {
    margin: 22px 0 10px;
    font: italic 600 clamp(1.3rem, 2.2vw, 1.7rem)/1.4 var(--serif);
    color: var(--ink)
}

.gurbani-source {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.involve {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center;
    background: linear-gradient(140deg, #0c2140 0%, var(--blue) 70%, #1f416d 120%);
    color: #fff
}

.involve h2 {
    font-size: clamp(2.6rem, 4.4vw, 4.2rem);
    margin: 16px 0 18px
}

.involve-head>p:not(.section-kicker) {
    max-width: 440px;
    color: #c9d3e2
}

.sewa-kinds {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.sewa-kinds li {
    border: 1px solid rgba(226, 178, 82, .55);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold)
}

.involve-ways {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.involve-ways li {
    display: grid;
    gap: 4px;
    align-content: start;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 26px
}

.involve-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    background: var(--gold);
    color: #13294b
}

.involve-ways strong {
    font: 600 1.3rem var(--serif)
}

.involve-ways li>span:last-child {
    font-size: .88rem;
    color: #b9c5d6
}

.join h2 {
    font-size: clamp(2.4rem, 4.4vw, 4.2rem)
}

.intro h2 em,
.projects h2 em,
.impact h2 em,
.stories h2 em {
    color: #a87420
}

.join-inner>p:not(.section-kicker),
.footer-top>p {
    color: #b4bfd0
}

.footer-bottom {
    color: #7d8aa0
}

.scroll-cue {
    color: #a3afc2
}

.roles {
    list-style: none;
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 46px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.roles li {
    display: grid;
    gap: 4px;
    padding: 24px 12px;
    border-left: 1px solid rgba(255, 255, 255, .14)
}

.roles li:first-child {
    border-left: 0
}

.roles strong {
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold)
}

.roles span {
    font-size: .9rem;
    color: #c9d3e2
}

.join .join-actions {
    position: relative;
    z-index: 1
}

@media(max-width:1100px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .involve {
        grid-template-columns: 1fr;
        gap: 44px
    }
}

@media(max-width:700px) {
    .project-grid,
    .involve-ways {
        grid-template-columns: 1fr
    }

    .roles {
        grid-template-columns: 1fr 1fr
    }

    .roles li {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .14)
    }

    .roles li:nth-child(-n+2) {
        border-top: 0
    }

    .roles li:last-child {
        grid-column: 1/-1
    }
}

@media(max-width:560px) {
    .hero h1.event-title {
        font-size: 2.9rem
    }

    .event-motto {
        font-size: .7rem;
        letter-spacing: .16em
    }

    .gurbani {
        padding: 70px 20px
    }
}

@media(prefers-reduced-motion:reduce) {
    .project {
        transition: none
    }
}


/* Video tray (bottom-right) and centred player */
.video-tray {
    /* Card size scales with the screen: limited by width (12vw) and height (18vh), between 92px and 220px */
    --card: clamp(92px, min(12vw, 18vh), 220px);
    position: fixed;
    right: clamp(14px, 1.7vw, 32px);
    bottom: clamp(14px, 1.7vw, 32px);
    z-index: 40;
    opacity: 0;
    transform: translateY(24px) scale(.94);
    transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1)
}

.video-tray.is-visible {
    opacity: 1;
    transform: none
}

.video-tray-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    gap: 12px
}

.video-card {
    position: relative;
    display: block;
    padding: 0;
    border: 2px solid var(--gold);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(140deg, #0c2140, var(--blue));
    box-shadow: 0 18px 40px rgba(6, 16, 32, .35);
    cursor: pointer;
    transition: transform .25s
}

.video-card-portrait {
    width: var(--card);
    aspect-ratio: 9/16
}

.video-card-landscape {
    width: calc(var(--card) * 1.5);
    aspect-ratio: 16/9
}

.video-card:hover,
.video-card:focus-visible {
    transform: translateY(-3px)
}

.video-card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px
}

.video-card-play {
    position: absolute;
    left: 50%;
    bottom: 6%;
    width: calc(var(--card) * .32);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--gold);
    animation: video-pulse 2.2s ease-out infinite
}

.video-card-landscape .video-card-play {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%)
}

.video-card-play:after {
    content: "";
    position: absolute;
    inset: 30% 26% 30% 38%;
    background: #13294b;
    clip-path: polygon(0 0, 100% 50%, 0 100%)
}

@keyframes video-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(226, 178, 82, .6)
    }

    70%,
    100% {
        box-shadow: 0 0 0 14px rgba(226, 178, 82, 0)
    }
}

.video-tray-close,
.video-modal-close {
    position: absolute;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25)
}

.video-tray-close {
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    font-size: 1.1rem
}

.video-modal {
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    max-width: none;
    max-height: none
}

.video-modal::backdrop {
    background: rgba(6, 16, 32, .82);
    backdrop-filter: blur(4px);
    transition: opacity .35s
}

.video-modal.is-closing::backdrop {
    opacity: 0
}

.video-modal-frame {
    border-radius: 18px;
    overflow: hidden;
    background: #000 center/cover no-repeat;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    transform-origin: top left
}

.video-modal-frame[data-aspect="portrait"] {
    height: min(86vh, 860px, calc(90vw * 16 / 9));
    aspect-ratio: 9/16
}

.video-modal-frame[data-aspect="landscape"] {
    width: min(90vw, 1280px, calc(80vh * 16 / 9));
    aspect-ratio: 16/9
}

.video-modal-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0
}

.video-modal-close {
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    transition: opacity .2s
}

.video-modal.is-closing .video-modal-close {
    opacity: 0
}

@media(max-width:560px) {
    .video-modal-close {
        top: 10px;
        right: 10px
    }
}

@media(max-width:560px) and (min-height:640px) {
    .video-modal-close {
        top: -54px;
        right: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .video-tray,
    .video-modal::backdrop {
        transition: none
    }

    .video-card-play {
        animation: none
    }
}