:root {
    --ink: #3f474d;
    --muted: #6e777d;
    --soft: #f7f9fa;
    --line: #e4e8ea;
    --link: #2d65a1;
    --link-hover: #1e4777;
    --accent: #d7653f;
    --accent-soft: #fff2ed;
    --content-width: 1135px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.58;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(45, 101, 161, .28); outline-offset: 3px; }
button { font: inherit; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.topbar-inner {
    width: min(calc(100% - 64px), var(--content-width));
    min-height: 58px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}
.brand span { color: var(--link); font-weight: 400; }
.nav-links { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.nav-links a {
    position: relative;
    display: block;
    padding: 18px 0 16px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}
.nav-links a::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--link);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after { transform: scaleX(1); }

.menu-toggle {
    display: none;
    width: 40px;
    height: 36px;
    padding: 7px;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
}
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 4px auto; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.magic-hero {
    position: relative;
    width: 100%;
    height: min(620px, calc(100vh - 150px));
    min-height: 500px;
    overflow: hidden;
    background: #dbe7ee;
}

.hero-photo, .hero-wash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-photo { object-fit: cover; object-position: 50% 34%; }
.hero-wash { background: rgba(255, 255, 255, .62); }

.hero-inner {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 64px), var(--content-width));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.hero-copy { max-width: 590px; padding-bottom: 22px; }
.eyebrow {
    margin: 0 0 12px;
    color: var(--link-hover);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.hero-copy h1 {
    margin: 0;
    color: #27333b;
    font-size: 72px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}
.hero-lead {
    max-width: 570px;
    margin: 22px 0 0;
    color: #35434c;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.55;
}

.card-stage {
    position: absolute;
    right: 64px;
    bottom: 64px;
    z-index: 3;
    width: 360px;
    height: 270px;
}
.playing-card {
    position: absolute;
    top: 38px;
    left: 112px;
    width: 126px;
    height: 178px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    transform: translate(var(--x), var(--y)) rotate(var(--r));
    transform-origin: 50% 90%;
    transition: transform .48s cubic-bezier(.2, .8, .2, 1), z-index 0s;
}
.playing-card:hover { z-index: 12; transform: translate(var(--x), calc(var(--y) - 10px)) rotate(var(--r)); }
.card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    box-shadow: 0 14px 28px rgba(35, 46, 54, .22);
    transform-style: preserve-3d;
    transition: transform .45s ease;
}
.playing-card.is-face-up .card-inner { transform: rotateY(180deg); }
.card-front, .card-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    backface-visibility: hidden;
}
.card-front {
    color: #202b32;
    background: #fff;
    border: 1px solid #dce2e6;
    font-family: Georgia, serif;
    font-size: 38px;
    font-weight: 700;
    transform: rotateY(180deg);
}
.card-front.red { color: #bf473c; }
.card-back {
    color: #fff;
    background: #294f7d;
    border: 7px solid #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
    font-size: 18px;
    font-weight: 800;
}
.card-back::before {
    display: flex;
    width: 62px;
    height: 86px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, .75);
    content: "NW";
}
.card-one { --x: -118px; --y: 16px; --r: -15deg; z-index: 1; }
.card-two { --x: -62px; --y: -4px; --r: -8deg; z-index: 2; }
.card-three { --x: 0px; --y: -14px; --r: 0deg; z-index: 3; }
.card-four { --x: 62px; --y: -4px; --r: 8deg; z-index: 4; }
.card-five { --x: 118px; --y: 16px; --r: 15deg; z-index: 5; }

.shuffle-button {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--link);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 7px 18px rgba(45, 101, 161, .28);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.shuffle-button:hover { background: var(--link-hover); transform: rotate(10deg); }
.shuffle-button svg { width: 20px; height: 20px; }

.content-band { padding: 68px 32px; }
.content-inner { width: min(100%, var(--content-width)); margin: 0 auto; }
.story {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}
.section-kicker { margin: 0 0 9px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.story h2 { margin: 0; color: #303a40; font-size: 36px; line-height: 1.18; letter-spacing: 0; }
.story-copy { max-width: 690px; }
.story-copy p { margin: 0 0 16px; color: var(--muted); font-size: 19px; line-height: 1.72; }
.story-copy p:last-child { margin-bottom: 0; }

.performances-band { padding-top: 10px; }
.section-heading { margin-bottom: 32px; }
.section-heading h2 { margin: 0; color: #303a40; font-size: 36px; line-height: 1.18; letter-spacing: 0; }
.performance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 26px;
}
.performance-card { min-width: 0; }
.performance-card video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #11171b;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(35, 46, 54, .14);
}
.performance-card h3 {
    margin: 13px 2px 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0;
}

.principles-band { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.principle { min-width: 0; padding: 6px 34px 8px; }
.principle:first-child { padding-left: 0; }
.principle:last-child { padding-right: 0; }
.principle + .principle { border-left: 1px solid var(--line); }
.principle-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--link);
    background: #fff;
    border: 1px solid #d7e1e8;
    border-radius: 6px;
}
.principle-icon svg { width: 21px; height: 21px; }
.principle h3 { margin: 0 0 8px; color: var(--ink); font-size: 20px; letter-spacing: 0; }
.principle p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }

.page-footer { padding: 28px 32px 38px; }
.footer-inner {
    width: min(100%, var(--content-width));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--muted);
    font-size: 14px;
}
.home-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.home-link svg { width: 17px; height: 17px; }

@media (max-width: 1040px) {
    .nav-links { gap: 17px; }
    .card-stage { right: 36px; transform: scale(.86); transform-origin: right bottom; }
    .hero-copy { max-width: 520px; }
    .performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    .topbar-inner { width: min(calc(100% - 36px), var(--content-width)); }
    .menu-toggle { display: block; }
    .nav-links {
        position: absolute;
        top: 58px;
        right: 0;
        left: 0;
        display: none;
        padding: 10px 20px 16px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 10px 20px rgba(45, 61, 71, .08);
    }
    .nav-links.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
    .nav-links a { padding: 10px 0; }
    .nav-links a::after { display: none; }
    .magic-hero { height: min(560px, calc(100vh - 130px)); min-height: 460px; }
    .hero-inner { width: min(calc(100% - 40px), var(--content-width)); align-items: flex-start; padding-top: 62px; }
    .hero-copy { max-width: 100%; padding: 0; }
    .hero-copy h1 { font-size: 48px; }
    .hero-lead { max-width: 520px; font-size: 18px; }
    .hero-photo { object-position: 50% 30%; }
    .hero-wash { background: rgba(255, 255, 255, .7); }
    .card-stage { right: 15px; bottom: 22px; transform: scale(.66); }
    .content-band { padding: 50px 20px; }
    .story { grid-template-columns: 1fr; gap: 24px; }
    .story h2 { font-size: 31px; }
    .story-copy p { font-size: 17px; }
    .performances-band { padding-top: 4px; }
    .section-heading { margin-bottom: 25px; }
    .section-heading h2 { font-size: 31px; }
    .performance-grid { grid-template-columns: 1fr; gap: 30px; }
    .performance-card h3 { font-size: 17px; }
    .principles { grid-template-columns: 1fr; }
    .principle, .principle:first-child, .principle:last-child { padding: 24px 0; }
    .principle + .principle { border-top: 1px solid var(--line); border-left: 0; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}