@font-face {
    font-family: VWText;
    src: url('../../assets/fonts/VWTextWeb-Regular.woff2') format('woff2'), url('../../assets/fonts/VWTextWeb-Regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: VWHead;
    src: url('../../assets/fonts/VWHead-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: VWHead;
    src: url('../../assets/fonts/vwhead-bold_2.woff2') format('woff2'), url('../../assets/fonts/vwhead-bold_2.ttf') format('truetype');
    font-style: normal;
    font-weight: 700 900;
    font-display: swap
}

:root {
    --bg: #f5f5f2;
    --paper: #ffffff;
    --ink: #0b0c0e;
    --muted: #686b70;
    --line: rgba(12, 13, 15, .12);
    --dark: #070708;
    --dark-2: #101114;
    --red: #e3202b;
    --red-2: #b70e17;
    --blue: #1676d2;
    --silver: #b8bcc3;
    --radius: 20px;
    --shadow: 0 24px 70px rgba(0, 0, 0, .18);
    --shell: min(1240px, calc(100vw - 48px));
    --display: VWHead, Arial, sans-serif;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    background: var(--dark)
}

body {
    margin: 0;
    font-family: VWText, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.section-kicker,
.micro-label,
.eyebrow,
.race-tab,
.availability {
    font-family: var(--display)
}

img {
    display: block;
    width: 100%;
    height: auto
}

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

button,
input,
select {
    font: inherit
}

button {
    color: inherit
}

.header {
    z-index: 99;
}

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

.skip-link {
    position: fixed;
    left: 16px;
    top: -80px;
    z-index: 9999;
    background: #fff;
    color: #000;
    padding: 10px 14px;
    border-radius: 8px
}

.skip-link:focus {
    top: 16px
}

.shell {
    width: var(--shell);
    margin: 0 auto
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    transition: .3s ease;
    color: #fff
}

.site-header.is-scrolled {
    background: rgba(5, 5, 6, .92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.nav-wrap {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: max-content
}

.brand-mark {
    width: 42px;
    height: 42px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -1px
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    gap: 4px
}

.brand-copy strong {
    font-size: 14px;
    letter-spacing: .03em
}

.brand-copy small {
    font-size: 10px;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .68)
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em
}

.primary-nav a {
    opacity: .82;
    transition: .2s ease
}

.primary-nav a:hover {
    opacity: 1
}

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

.nav-toggle {
    display: none;
    border: 0;
    background: none;
    padding: 8px;
    width: 44px;
    height: 44px
}

.nav-toggle span:not(.sr-only) {
    display: block;
    width: 24px;
    height: 1.5px;
    background: #fff;
    margin: 6px auto;
    transition: .2s ease
}

.hero {
    min-height: 100svh;
    position: relative;
    color: #fff;
    display: flex;
    align-items: flex-end;
    background: #030303;
    overflow: hidden
}

.hero-media {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .52) 38%, rgba(0, 0, 0, .1) 72%), linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 44%), url('../images/hero.jpg');
    background-size: cover;
    background-position: center 46%;
    transform: scale(1.03);
    animation: heroDrift 14s ease-in-out infinite alternate
}

.hero-scanline {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, .10) 48%, transparent 60%);
    transform: translateX(-120%);
    animation: scan 6s ease-in-out infinite;
    pointer-events: none
}

.speed-lines {
    position: absolute;
    right: 0;
    bottom: 18%;
    width: 44vw;
    height: 220px;
    opacity: .5;
    pointer-events: none
}

.speed-lines i {
    position: absolute;
    right: -10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75));
    transform: skewX(-28deg)
}

.speed-lines i:nth-child(1) {
    top: 15%;
    width: 80%;
    animation: speed 4s 1s infinite
}

.speed-lines i:nth-child(2) {
    top: 40%;
    width: 62%;
    animation: speed 3.2s .2s infinite
}

.speed-lines i:nth-child(3) {
    top: 64%;
    width: 88%;
    animation: speed 4.8s 1.8s infinite
}

.speed-lines i:nth-child(4) {
    top: 82%;
    width: 48%;
    animation: speed 3.8s .8s infinite
}

.hero-inner {
    position: relative;
    z-index: 2;
    padding: 150px 0 46px
}

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

.eyebrow {
    color: rgba(255, 255, 255, .7);
    margin-bottom: 12px
}

.hero-title {
    margin: 0;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    font-size: clamp(72px, 12vw, 130px);
    line-height: .78;
    letter-spacing: -.075em;
    font-weight: 900;
    text-transform: uppercase
}

.hero-title .red {
    color: var(--red)
}

.hero-kicker {
    font-size: clamp(18px, 2.2vw, 30px);
    font-weight: 700;
    margin: 26px 0 8px;
    letter-spacing: .02em
}

.hero-copy {
    max-width: 600px;
    color: rgba(255, 255, 255, .78);
    font-size: 18px;
    margin: 0 0 26px
}

.hero-meta {
    display: flex;
    gap: 48px;
    margin: 0 0 30px
}

.hero-meta>div {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.meta-label {
    font-size: 11px;
    color: rgba(255, 255, 255, .55);
    text-transform: uppercase;
    letter-spacing: .13em
}

.hero-meta strong {
    font-size: 14px
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.btn {
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    text-transform: uppercase;
    letter-spacing: .075em;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-red {
    background: var(--red);
    color: #fff;
    box-shadow: 0 10px 28px rgba(227, 32, 43, .28)
}

.btn-red:hover {
    background: #f12531
}

.btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .04)
}

.btn-dark {
    background: #0c0d0f;
    color: #fff
}

.btn-full {
    width: 100%
}

.hero-bottom {
    margin-top: 44px;
    display: flex;
    align-items: end;
    justify-content: space-between
}

.countdown-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .55)
}

.countdown-grid {
    display: flex;
    margin-top: 6px
}

.countdown-grid>div {
    padding: 0 20px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    flex-direction: column
}

.countdown-grid>div:first-child {
    padding-left: 0;
    border-left: 0
}

.countdown-grid strong {
    font-size: 28px;
    line-height: 1.1
}

.countdown-grid span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: rgba(255, 255, 255, .55)
}

.scroll-cue {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .66);
    display: flex;
    align-items: center;
    gap: 10px
}

.scroll-cue span {
    width: 32px;
    height: 1px;
    background: currentColor;
    display: inline-block
}

.section {
    padding: 120px 0
}

.section-dark {
    background: #111216;
    color: #f7f7f7
}

.section-black {
    background: #050506;
    color: #fff
}

.section-heading {
    max-width: 780px;
    margin-bottom: 52px
}

.section-heading h2,
.section-copy h2,
.heritage-copy h2,
.register-intro h2,
.closing-copy h2 {
    font-size: clamp(40px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -.05em;
    margin: 10px 0 20px
}

.section-heading p,
.section-copy p,
.heritage-copy p,
.register-intro>p {
    font-size: 17px;
    color: #64676d;
    max-width: 690px
}

.section-heading-light p {
    color: rgba(255, 255, 255, .62)
}

.section-kicker {
    color: var(--red);
    margin: 0
}

.split-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 86px;
    align-items: center
}

.section-copy p {
    color: rgba(255, 255, 255, .65);
    max-width: 610px
}

.text-link {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    padding-bottom: 5px
}

.editorial-image {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000
}

.editorial-image img {
    height: 560px;
    object-fit: cover;
    transition: transform .8s ease
}

.editorial-image:hover img {
    transform: scale(1.03)
}

.editorial-image figcaption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    background: rgba(0, 0, 0, .58);
    backdrop-filter: blur(12px);
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 11px;
    color: #fff
}

.stats-row {
    margin-top: 84px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.stats-row>div {
    padding: 30px 24px 0 0;
    border-right: 1px solid rgba(255, 255, 255, .1);
    min-height: 112px
}

.stats-row>div:last-child {
    border-right: 0
}

.stats-row strong {
    display: block;
    font-size: 32px;
    line-height: 1
}

.stats-row span {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, .56);
    font-size: 12px
}

.days-section {
    background: #f1f1ef
}

.day-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line);
    margin-bottom: 48px
}

.day-tab {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 22px 18px 22px 0;
    border-bottom: 3px solid transparent;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: end;
    color: #777;
    cursor: pointer
}

.day-tab span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em
}

.day-tab strong {
    font-size: 20px;
    color: inherit
}

.day-tab small {
    font-size: 11px
}

.day-tab.is-active {
    color: #111;
    border-bottom-color: var(--red)
}

.day-panel {
    display: grid;
    grid-template-columns: .96fr 1.04fr;
    gap: 60px;
    align-items: stretch
}

.day-visual {
    min-height: 620px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #ddd
}

.day-visual img {
    height: 100%;
    object-fit: cover
}

.day-content {
    padding: 16px 0
}

.day-topline {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #686a70
}

.availability {
    padding: 8px 11px;
    border-radius: 999px;
    background: #0b0c0e;
    color: #fff;
    font-size: 10px;
    white-space: nowrap
}

.availability.is-low {
    background: var(--red)
}

.availability.is-full {
    background: #7c7f85
}

.day-content h3 {
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -.05em;
    margin: 28px 0 14px
}

.day-content .lead {
    font-size: 18px;
    color: #4e5156;
    margin: 0 0 32px;
    max-width: 640px
}

.day-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    margin-bottom: 32px
}

.day-detail-grid>div {
    padding: 19px 0;
    border-top: 1px solid var(--line)
}

.detail-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #878a90;
    font-weight: 800
}

.day-detail-grid p {
    margin: 6px 0 0;
    color: #34363a;
    font-size: 14px
}

.schedule-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px
}

.schedule-tab {
    border: 1px solid rgba(255, 255, 255, .16);
    background: transparent;
    color: rgba(255, 255, 255, .6);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer
}

.schedule-tab.is-active {
    background: #fff;
    color: #000;
    border-color: #fff
}

.timeline {
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.timeline-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.timeline-item time {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--red)
}

.timeline-item div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px
}

.timeline-item strong {
    font-size: 19px
}

.timeline-item span {
    color: rgba(255, 255, 255, .52);
    font-size: 13px;
    text-align: right;
    max-width: 460px
}

.session-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.session-grid article {
    background: #101114;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 34px;
    border-radius: var(--radius);
    min-height: 250px;
    position: relative;
    overflow: hidden
}

.session-no {
    position: absolute;
    right: 22px;
    top: 18px;
    font-size: 72px;
    font-weight: 900;
    color: rgba(255, 255, 255, .04);
    letter-spacing: -.06em
}

.session-grid h3 {
    font-size: 28px;
    margin: 28px 0 5px
}

.session-grid p {
    font-size: 34px;
    margin: 0;
    color: var(--red);
    font-weight: 800
}

.session-grid small {
    display: block;
    color: rgba(255, 255, 255, .55);
    max-width: 450px;
    margin-top: 18px;
    font-size: 13px
}

.activity-section {
    background: #fff
}

.experience-heading {
    padding-top: 44px;
    margin-bottom: 30px
}

.activity-section .experience-heading {
    padding-top: 30px;
    margin-bottom: 28px
}

.activity-section .experience-heading h2 {
    color: var(--ink);
    margin-top: 8px
}

.activity-section .experience-heading .section-kicker {
    color: var(--red)
}

.activity-rail-wrap {
    position: relative
}

.activity-rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
    scrollbar-width: none;
    scroll-behavior: smooth
}

.activity-rail::-webkit-scrollbar {
    display: none
}

.activity-card {
    /* min-width: min(74vw, 520px); */
    height: 620px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    scroll-snap-align: start;
    background: #111;
    color: #fff
}

.activity-card:after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(0deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .02) 62%) */
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgb(0 0 0) 15%, rgba(0, 0, 0, 0) 50%);
    z-index: 1;
}

.activity-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease
}

.activity-card:hover img {
    transform: scale(1.035)
}

.activity-card .cardcaption {
    position: absolute;
    z-index: 2;
    left: 30px;
    right: 30px;
    bottom: 28px
}

.activity-card span {
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--red);
    font-weight: 800
}

.activity-card h3 {
    font-size: 34px;
    line-height: 1;
    margin: 8px 0 10px;
    letter-spacing: -.04em
}

.activity-card p {
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    max-width: 420px
}

.rail-arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    cursor: pointer
}

.rail-prev {
    left: -24px
}

.rail-next {
    right: -24px
}

.heritage-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 70px;
    align-items: center
}

.heritage-copy p {
    color: rgba(255, 255, 255, .6)
}

.heritage-points {
    margin-top: 34px;
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.heritage-point {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: transparent;
    color: #fff;
    text-align: left;
    padding: 18px 4px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 20px
}

.heritage-point span {
    font-weight: 800;
    font-size: 13px
}

.heritage-point small {
    font-size: 14px;
    color: rgba(255, 255, 255, .42)
}

.heritage-point.is-active span {
    color: var(--red)
}

.heritage-visual {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000
}

.heritage-visual img {
    height: 620px;
    object-fit: cover;
    transition: .4s ease
}

.meter {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .64);
    backdrop-filter: blur(14px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    color: #fff
}

.meter span {
    font-size: 9px;
    letter-spacing: .14em
}

.meter i {
    height: 4px;
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    overflow: hidden
}

.meter i b {
    height: 100%;
    display: block;
    width: 85%;
    background: var(--red);
    transition: .5s ease
}

.meter strong {
    font-size: 12px
}

.venue-section {
    background: #eeeeeb
}

.venue-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 18px
}

.venue-hero {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #d8d8d8;
    min-height: 560px
}

.venue-hero img {
    height: 100%;
    object-fit: cover
}

.venue-copy {
    background: #fff;
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column
}

.venue-fact {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line)
}

.venue-fact span {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .13em
}

.venue-fact strong {
    font-size: 14px;
    font-weight: 700
}

.venue-copy .btn {
    margin-top: auto;
    align-self: flex-start
}

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

.venue-gallery figure {
    margin: 0;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden
}

.venue-gallery img {
    height: 250px;
    object-fit: cover
}

.venue-gallery figcaption {
    padding: 13px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 800
}

.register-section {
    background: #fff
}

.register-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 70px;
    align-items: start
}

.register-intro {
    position: sticky;
    top: 40px
}

.register-intro>p {
    color: #66696f
}

.demo-note {
    margin-top: 28px;
    padding: 18px;
    border-left: 3px solid var(--red);
    background: #f5f5f4;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.demo-note strong {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.demo-note span {
    font-size: 14px;
    color: #686b70
}

.registration-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px;
    background: #fcfcfb;
    box-shadow: 0 12px 50px rgba(0, 0, 0, .05)
}

.registration-steps {
    display: flex;
    gap: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #999
}

.registration-steps .is-active {
    color: #111;
    font-weight: 800
}

.event-day-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0
}

.event-day-option {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.event-day-option span {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.event-day-option small {
    font-size: 9px;
    letter-spacing: .12em;
    color: #8b8d92
}

.event-day-option strong {
    font-size: 13px
}

.event-day-option em {
    font-style: normal;
    font-size: 9px;
    color: #73767b;
    text-align: right
}

.event-day-option.is-active {
    border-color: #151619;
    box-shadow: inset 0 0 0 1px #151619
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px
}

.field {
    display: flex;
    flex-direction: column
}

.field label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 800;
    color: #66696f;
    margin-bottom: 7px
}

.field input,
.field select {
    width: 100%;
    height: 48px;
    border: 1px solid #d8d9dc;
    border-radius: 10px;
    background: #fff;
    padding: 0 13px;
    outline: none;
    color: #151619
}

.field input:focus,
.field select:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05)
}

.field.has-error input,
.field.has-error select {
    border-color: var(--red)
}

.field-error {
    min-height: 15px;
    color: var(--red);
    font-size: 10px;
    margin-top: 3px
}

.consents {
    display: grid;
    gap: 10px;
    margin: 22px 0
}

.consents label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 11px;
    color: #56595e
}

.consents input {
    margin-top: 3px;
    accent-color: var(--red)
}

.link-button {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit
}

.fee-summary {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    margin-top: 8px
}

.fee-summary span {
    font-size: 11px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .09em
}

.fee-summary strong {
    font-size: 18px
}

.form-footnote {
    margin: 9px 0 0;
    text-align: center;
    color: #93959a;
    font-size: 10px
}

.faq-section {
    padding-bottom: 100px
}

.faq-grid {
    display: grid;
    grid-template-columns: .62fr 1.38fr;
    gap: 70px
}

.faq-list {
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.faq-item>button {
    width: 100%;
    border: 0;
    background: none;
    color: #fff;
    text-align: left;
    padding: 22px 0;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer
}

.faq-item>button span {
    color: var(--red);
    font-size: 22px;
    transition: .2s ease
}

.faq-item.is-open>button span {
    transform: rotate(45deg)
}

.faq-answer {
    display: none;
    padding: 0 46px 22px 0
}

.faq-answer p {
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 13px
}

.closing-hero {
    height: 72vh;
    min-height: 560px;
    position: relative;
    color: #fff;
    overflow: hidden
}

.closing-hero>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.closing-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .12) 72%), linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 50%)
}

.closing-copy {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.closing-copy p {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 14px;
    color: rgba(255, 255, 255, .65)
}

.closing-copy h2 {
    max-width: 740px
}

.site-footer {
    background: #050506;
    color: #fff;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.footer-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center
}

.footer-grid p {
    margin: 0;
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    text-align: center
}

.footer-brand .brand-copy small {
    color: rgba(255, 255, 255, .52)
}

.footer-grid .link-button {
    font-size: 11px;
    color: rgba(255, 255, 255, .65)
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px
}

.modal.is-open {
    display: flex
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(10px)
}

.modal-card {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    max-height: min(86vh, 860px);
    overflow: auto;
    background: #fff;
    border-radius: 24px;
    padding: 34px;
    box-shadow: var(--shadow)
}

.modal-close {
    position: absolute;
    right: 18px;
    top: 15px;
    border: 0;
    background: #f1f1ef;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 22px;
    cursor: pointer
}

.modal-card h2 {
    font-size: 42px;
    line-height: 1;
    margin: 8px 0 24px;
    letter-spacing: -.04em
}

.terms-copy {
    color: #55585d;
    font-size: 13px
}

.terms-copy h3 {
    color: #111;
    margin: 22px 0 4px;
    font-size: 14px
}

.terms-copy p {
    margin: 0 0 8px
}

.confirmation-card {
    background: #0a0b0d;
    color: #fff
}

.confirmation-card .modal-close {
    background: #1a1b1e;
    color: #fff
}

.confirmation-mark {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid var(--red);
    font-size: 28px;
    font-weight: 900;
    color: var(--red);
    margin-bottom: 26px
}

.confirmation-card>p:not(.section-kicker) {
    color: rgba(255, 255, 255, .58);
    font-size: 13px;
    max-width: 560px
}

.confirmation-details {
    margin: 26px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.confirmation-details div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.confirmation-details dt {
    font-size: 10px;
    color: rgba(255, 255, 255, .42);
    text-transform: uppercase;
    letter-spacing: .11em
}

.confirmation-details dd {
    margin: 0;
    font-size: 13px;
    font-weight: 700
}

.confirmation-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px
}

.confirmation-actions .btn-dark {
    background: #fff;
    color: #000
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    z-index: 3000;
    background: #111;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 11px;
    opacity: 0;
    pointer-events: none;
    transition: .25s ease
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0)
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1)
}

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

body.modal-open {
    overflow: hidden
}

@keyframes heroDrift {
    from {
        transform: scale(1.03) translate3d(0, 0, 0)
    }
    to {
        transform: scale(1.07) translate3d(-1.1%, .5%, 0)
    }
}

@keyframes scan {
    0%,
    18% {
        transform: translateX(-120%)
    }
    48%,
    100% {
        transform: translateX(140%)
    }
}

@keyframes speed {
    0% {
        opacity: 0;
        transform: translateX(60px) skewX(-28deg)
    }
    25% {
        opacity: .8
    }
    100% {
        opacity: 0;
        transform: translateX(-180px) skewX(-28deg)
    }
}

@media (max-width:1050px) {
     :root {
        --shell: min(100% - 34px, 1240px)
    }
    .primary-nav {
        gap: 18px
    }
    .split-grid,
    .day-panel,
    .heritage-grid,
    .venue-grid,
    .register-grid,
    .faq-grid {
        grid-template-columns: 1fr
    }
    .intro-grid {
        gap: 42px
    }
    .editorial-image img {
        height: 520px
    }
    .day-panel {
        gap: 28px
    }
    .day-visual {
        min-height: 520px
    }
    .register-intro {
        position: static
    }
    .venue-hero {
        min-height: 480px
    }
    .faq-grid {
        gap: 20px
    }
}

@media (max-width:800px) {
     :root {
        --shell: calc(100vw - 28px);
        --radius: 16px
    }
    .nav-wrap {
        height: 70px
    }
    .primary-nav {
        position: fixed;
        left: 14px;
        right: 14px;
        top: 76px;
        background: rgba(8, 8, 9, .97);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 18px;
        padding: 18px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        box-shadow: var(--shadow)
    }
    .primary-nav.is-open {
        display: flex
    }
    .primary-nav a {
        padding: 13px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }
    .primary-nav a:last-child {
        border-bottom: 0;
        text-align: center;
        margin-top: 8px
    }
    .nav-toggle {
        display: block
    }
    .hero-inner {
        padding: 130px 0 30px
    }
    .hero-media {
        background-position: 61% center;
        background-image: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .23)), linear-gradient(0deg, rgba(0, 0, 0, .82), transparent 58%), url('../images/hero.jpg')
    }
    .hero-title {
        font-size: clamp(76px, 19vw, 132px)
    }
    .hero-copy {
        font-size: 15px;
        max-width: 88%
    }
    .hero-meta {
        gap: 24px;
        flex-wrap: wrap
    }
    .hero-bottom {
        align-items: flex-start;
        gap: 24px;
        flex-direction: column
    }
    .countdown-grid>div {
        padding: 0 12px
    }
    .countdown-grid strong {
        font-size: 22px
    }
    .scroll-cue {
        display: none
    }
    .section {
        padding: 84px 0
    }
    .section-heading h2,
    .section-copy h2,
    .heritage-copy h2,
    .register-intro h2,
    .closing-copy h2 {
        font-size: clamp(38px, 11vw, 58px)
    }
    .stats-row {
        grid-template-columns: 1fr 1fr;
        margin-top: 50px
    }
    .stats-row>div {
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        padding-bottom: 24px
    }
    .stats-row>div:nth-child(2) {
        border-right: 0
    }
    .editorial-image img {
        height: 420px
    }
    .day-switcher {
        grid-template-columns: 1fr
    }
    .day-tab {
        grid-template-columns: 70px 1fr auto;
        padding-right: 0
    }
    .day-visual {
        min-height: 420px
    }
    .day-detail-grid {
        grid-template-columns: 1fr
    }
    .timeline-item {
        grid-template-columns: 76px 1fr
    }
    .timeline-item time {
        font-size: 22px
    }
    .timeline-item div {
        display: block
    }
    .timeline-item span {
        display: block;
        text-align: left;
        margin-top: 5px
    }
    .session-grid {
        grid-template-columns: 1fr
    }
    .activity-card {
        /* min-width: 86vw; */
        height: 530px
    }
    .rail-arrow {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        top: 50%;
        background: rgba(255, 255, 255, .94);
        color: #070809;
        font-size: 22px
    }
    .rail-prev {
        left: 10px
    }
    .rail-next {
        right: 10px
    }
    .heritage-point {
        grid-template-columns: 120px 1fr
    }
    .heritage-visual img {
        height: 500px
    }
    .venue-gallery {
        grid-template-columns: 1fr
    }
    .venue-gallery img {
        height: 300px
    }
    .venue-copy {
        padding: 24px
    }
    .form-grid {
        grid-template-columns: 1fr
    }
    .event-day-picker {
        grid-template-columns: 1fr
    }
    .registration-card {
        padding: 20px
    }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center
    }
    .modal-card {
        padding: 26px 20px
    }
    .confirmation-details div {
        grid-template-columns: 110px 1fr
    }
    .closing-hero {
        height: 46vh;
        min-height: auto;
    }
}

@media (max-width:520px) {
    .brand-copy {
        display: none
    }
    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%
    }
    .btn {
        width: 100%
    }
    .hero-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%
    }
    .countdown-grid {
        width: 100%
    }
    .countdown-grid>div {
        flex: 1
    }
    .stats-row {
        grid-template-columns: 1fr
    }
    .stats-row>div {
        border-right: 0
    }
    .day-topline {
        align-items: flex-start;
        flex-direction: column
    }
    .heritage-point {
        grid-template-columns: 1fr;
        gap: 3px
    }
    .venue-fact {
        grid-template-columns: 72px 1fr
    }
    .registration-steps {
        gap: 10px;
        justify-content: space-between
    }
    .confirmation-actions {
        flex-direction: column
    }
}

@media (prefers-reduced-motion:reduce) {
    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important
    }
    .reveal {
        opacity: 1;
        transform: none
    }
}

.consent-field {
    margin-bottom: 14px;
}


/* ================================
   Consent validation
   ================================ */

.consent-field {
    margin-bottom: 14px;
}

.consent-field label {
    color: #222;
}


/* Actual checkbox */

.consent-field input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    border: 1px solid #777;
    border-radius: 2px;
    background: #fff;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}


/* Checked */

.consent-field input[type="checkbox"]:checked {
    background: #ed1b2f;
    border-color: #ed1b2f;
}


/* Check mark */

.consent-field input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* ONLY checkbox border becomes red when validation fails */

.consent-field.has-error input[type="checkbox"] {
    border-color: #ed1b2f;
}


/* Do NOT make the label red */

.consent-field.has-error label {
    color: #222;
}


/* Error message */

.consent-error {
    display: block;
    margin-left: 28px;
    margin-top: 5px;
    font-size: 13px;
    line-height: 18px;
    color: #ed1b2f;
}


/* =========================================================
   VW GT DAY
   TWO-DAY FORMAT + CUSTOMER JOURNEY CSS
   ========================================================= */


/* =========================================================
   ROOT / GLOBAL
   ========================================================= */

:root {
    --paper: #f2f0eb;
    --paper-2: #e8e6e0;
    --white: #fff;
    --ink: #070809;
    --muted: #686b70;
    --dark: #050607;
    --dark-2: #0b0d10;
    --dark-3: #12151a;
    --red: #e30613;
    --red-bright: #ff2430;
    --blue: #001e50;
    --blue-bright: #1976d2;
    --silver: #a7abb2;
    --line: rgba(7, 8, 9, .14);
    --line-light: rgba(255, 255, 255, .13);
    --shadow: 0 30px 90px rgba(0, 0, 0, .25);
    --radius: 24px;
    --radius-sm: 15px;
    --shell: min(1320px, calc(100vw - 64px));
    --display: VWHead, Arial, sans-serif;
    --body: VWHead, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--dark);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.55 var(--body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    width: 100%;
    height: 100% !important;
}

button,
input,
select {
    font: inherit;
}

button {
    color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--red-bright);
    outline-offset: 4px;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.section {
    padding: 128px 0;
    position: relative;
}

.section-heading {
    max-width: 850px;
    margin-bottom: 58px;
}

.section-heading h2 {
    font: 850 clamp(43px, 5.4vw, 78px)/.95 var(--display);
    letter-spacing: -.055em;
    margin: 12px 0 20px;
    text-transform: none;
}

.section-heading>p:last-child {
    max-width: 720px;
    color: var(--muted);
    font-size: 18px;
}

.section-kicker,
.micro-label {
    text-transform: uppercase;
    letter-spacing: .17em;
    font-size: 10px;
    font-weight: 850;
}

.section-kicker {
    color: var(--red);
    margin: 0;
}

.micro-label {
    color: #7a7d83;
    margin: 0;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    border: 0;
    min-height: 54px;
    padding: 0 23px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    overflow: hidden;
}

.btn span {
    position: relative;
    z-index: 1;
}

.btn i {
    font-style: normal;
    font-size: 18px;
    line-height: 1;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-red {
    background: var(--red);
    color: #fff;
    box-shadow: 0 14px 36px rgba(227, 6, 19, .27);
}

.btn-red:hover {
    background: var(--red-bright);
}


/* =========================================================
   TWO-DAY FORMAT
   ========================================================= */

.weekend-section {
    background: var(--paper-2);
}


/* -------------------------
   Day selector
   ------------------------- */

.day-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 44px;
}

.day-select {
    border: 0;
    background: transparent;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 15px;
    align-items: center;
    text-align: left;
    padding: 24px 28px 24px 0;
    color: #777;
    cursor: pointer;
    position: relative;
}

.day-select+.day-select {
    border-left: 1px solid var(--line);
    padding-left: 28px;
}

.day-select:after {
    content: "";
    position: absolute;
    height: 3px;
    left: 0;
    right: 100%;
    bottom: -1px;
    background: var(--red);
    transition: right .35s ease;
}

.day-select.is-active {
    color: var(--ink);
}

.day-select.is-active:after {
    right: 0;
}

.day-no {
    font: 850 43px/1 var(--display);
    color: #c8c6c1;
}

.day-select small {
    display: block;
    font-size: 14px;
    letter-spacing: .16em;
    margin-bottom: 5px;
}

.day-select strong {
    font: 800 23px/1 var(--display);
}

.day-select em {
    font-style: normal;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
}


/* -------------------------
   Day panels
   ------------------------- */

.day-panel {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 54px;
    align-items: stretch;
}

.day-panel[hidden] {
    display: none !important;
}


/* -------------------------
   Day media
   ------------------------- */

.day-media {
    min-height: 720px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    background: #111;
}

.day-media>img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
}

.day-media:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 0deg, rgba(0, 0, 0, .75), transparent 44%);
}

.day-media-label {
    position: absolute;
    z-index: 2;
    left: 26px;
    bottom: 27px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.day-media-label span {
    font-size: 14px;
    letter-spacing: .17em;
    color: rgba(255, 255, 255, .55);
}

.day-media-label strong {
    font: 850 25px/1 var(--display);
    margin-top: 5px;
}


/* -------------------------
   Capacity circle
   ------------------------- */

.capacity-orbit {
    position: absolute;
    z-index: 3;
    right: 23px;
    top: 23px;
    width: 120px;
    height: 120px;
    color: #fff;
}

.capacity-orbit svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.capacity-orbit circle {
    fill: rgba(0, 0, 0, .25);
    stroke: rgba(255, 255, 255, .18);
    stroke-width: 4;
}

.capacity-orbit .capacity-ring {
    fill: none;
    stroke: var(--red-bright);
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s ease;
}

.capacity-orbit>span {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.capacity-orbit strong {
    font: 850 28px/1 var(--display);
}

.capacity-orbit small {
    font-size: 10px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .63);
}


/* -------------------------
   Day details
   ------------------------- */

.day-details {
    padding: 10px 0;
}

.day-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.day-details h3 {
    font: 850 clamp(48px, 3vw, 76px) / .95 var(--display);
    letter-spacing: -.05em;
    margin: 10px 0 16px;
}

.availability {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #0c0d0f;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    white-space: nowrap;
}

.availability.is-low {
    background: var(--red);
}

.availability.is-full {
    background: #666;
}

.day-lead {
    font-size: 18px;
    color: #5d6065;
    margin: 0 0 30px;
    max-width: 620px;
}


/* -------------------------
   Day facts
   ------------------------- */

.day-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.day-facts article {
    padding: 20px 18px 20px 0;
    border-top: 1px solid var(--line);
}

.day-facts article:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-right: 24px;
}

.day-facts article:nth-child(even) {
    padding-left: 24px;
}

.day-facts span,
.access-unlocks>span {
    display: block;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8c8f94;
}

.day-facts strong span,
.day-facts strong {
    display: inline-block;
    font: 800 21px/1.1 var(--display);
    margin: 6px 0;
}

.day-facts p {
    font-size: 11px;
    color: var(--muted);
    margin: 0;
}


/* -------------------------
   Access unlocks
   ------------------------- */

.access-unlocks {
    margin: 26px 0 28px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(7, 8, 9, .08);
}

.access-unlocks ul {
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.access-unlocks li {
    font-size: 11px;
    color: #4e5155;
    padding-left: 17px;
    position: relative;
}

.access-unlocks li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .65em;
    width: 7px;
    height: 1px;
    background: var(--red);
}


/* -------------------------
   Session availability
   ------------------------- */

.session-availability {
    display: grid;
    gap: 13px;
    margin: 22px 0;
}

.session-availability>div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
}

.session-availability span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.session-availability strong {
    font-size: 9px;
    color: #777;
}

.session-availability i {
    grid-column: 1/-1;
    height: 3px;
    background: rgba(7, 8, 9, .1);
    border-radius: 99px;
    overflow: hidden;
}

.session-availability b {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--red);
    transition: width .4s ease;
}


/* =========================================================
   CUSTOMER JOURNEY
   ========================================================= */

.journey-section {
    background: #f5f3ee;
    overflow: hidden;
}


/* -------------------------
   Journey explorer
   ------------------------- */

.journey-explorer {
    border-radius: var(--radius);
    background: #0a0b0c;
    color: #fff;
    padding: 34px;
    overflow: hidden;
}


/* -------------------------
   Journey toolbar
   ------------------------- */

.journey-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
}

.journey-toolbar h3 {
    font: 850 36px/1 var(--display);
    margin: 8px 0;
}


/* -------------------------
   Journey day toggle
   ------------------------- */

.journey-day-toggle {
    display: flex;
    gap: 6px;
}

.journey-day {
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    padding: 9px 14px;
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

.journey-day.is-active {
    background: var(--red);
    border-color: var(--red);
}


/* -------------------------
   Journey track
   ------------------------- */

.journey-track-wrap {
    overflow: auto;
    margin: 30px -34px 0;
    padding: 0 34px 14px;
    scrollbar-width: none;
}

.journey-track-wrap::-webkit-scrollbar {
    display: none;
}

.journey-track {
    min-width: 960px;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    position: relative;
}

.journey-track:before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 19px;
    height: 1px;
    background: rgba(255, 255, 255, .2);
}


/* -------------------------
   Journey steps
   ------------------------- */

.journey-step {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: #777;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    text-align: center;
}

.journey-step i {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .24);
    background: #0a0b0c;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 14px;
}

.journey-step span {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: normal;
    max-width: max-content;
    text-align: center;
}

.journey-step.is-active {
    color: #fff;
}

.journey-step.is-active i {
    background: var(--red);
    border-color: var(--red);
    box-shadow: 0 0 24px rgba(227, 6, 19, .42);
}


/* -------------------------
   Journey readout
   ------------------------- */

.journey-readout {
    margin-top: 22px;
    border-top: 1px solid var(--line-light);
    padding-top: 30px;
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.journey-number {
    font: 900 84px/.8 var(--display);
    color: #26292e;
}

.journey-readout h4 {
    font: 850 31px/1 var(--display);
    margin: 9px 0 10px;
}

.journey-readout>div:nth-child(2)>p:last-child {
    font-size: 14px;
    color: rgba(255, 255, 255, .58);
    margin: 0;
}

.journey-readout ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-light);
}

.journey-readout li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line-light);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .66);
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
}

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


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1180px) {
     :root {
        --shell: min(100% - 44px, 1320px);
    }
    .day-panel {
        gap: 36px;
    }
}

@media (max-width:980px) {
     :root {
        --shell: min(100% - 34px, 1320px);
    }
    .day-panel {
        grid-template-columns: 1fr;
    }
    .day-media {
        min-height: 620px;
    }
    .journey-readout {
        grid-template-columns: 90px 1fr;
    }
    .journey-readout ul {
        grid-column: 2;
    }
}

@media (max-width:760px) {
     :root {
        --shell: calc(100vw - 28px);
        --radius: 18px;
    }
    body {
        font-size: 15px;
    }
    .section {
        padding: 2.5rem 0 !important;
    }
    .section-heading {
        margin-bottom: 38px;
    }
    .section-heading h2 {
        font-size: clamp(39px, 11vw, 58px);
    }
    /* -------------------------
     Two day selector
     ------------------------- */
    .day-selector {
        grid-template-columns: 1fr;
    }
    .day-select+.day-select {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
    }
    .day-select {
        grid-template-columns: 54px 1fr;
        padding-right: 0;
    }
    .day-select em {
        display: none;
    }
    /* -------------------------
     Day media
     ------------------------- */
    .day-media {
        min-height: 500px;
    }
    .capacity-orbit {
        width: 98px;
        height: 98px;
    }
    /* -------------------------
     Day heading
     ------------------------- */
    .day-heading-row {
        flex-direction: column;
        gap: 0;
        margin-bottom: 20px;
    }
    .day-heading-row .availability {
        margin-top: 9px;
    }
    .day-details h3 {
        font-size: 47px;
    }
    /* -------------------------
     Day facts
     ------------------------- */
    .day-facts {
        grid-template-columns: 1fr;
    }
    .day-facts article,
    .day-facts article:nth-child(odd),
    .day-facts article:nth-child(even) {
        border-right: 0;
        padding: 17px 0;
    }
    /* -------------------------
     Journey
     ------------------------- */
    .journey-toolbar {
        display: block;
    }
    .journey-day-toggle {
        margin-top: 18px;
    }
    .journey-track-wrap {
        margin: 25px -22px 0;
        padding-inline: 22px;
        overflow: auto;
    }
    .journey-explorer {
        padding: 22px;
    }
    .journey-readout {
        grid-template-columns: 1fr;
        gap: 17px;
    }
    .journey-number {
        font-size: 62px;
    }
    .journey-readout ul {
        grid-column: auto;
    }
}

@media (max-width:480px) {
    .day-media {
        min-height: 440px;
    }
    .capacity-orbit {
        right: 14px;
        top: 14px;
    }
    .journey-toolbar h3 {
        font-size: 30px;
    }
    .journey-track {
        min-width: 900px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {
    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================
   GT DAY - DRIVE MODE FIX
   ========================================================== */

.mode-section {
    position: relative;
    overflow: hidden;
}

.mode-console {
    position: relative;
    width: 100%;
    border: 1px solid var(--line-light);
    border-radius: var(--radius);
    overflow: hidden;
    background: #0a0b0d;
    margin-top: 40px;
}

.mode-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    border-bottom: 1px solid var(--line-light);
}

.mode-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 88px;
    border: 0;
    border-right: 1px solid var(--line-light);
    background: transparent;
    color: #8d9197;
    display: grid !important;
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    text-align: left;
    padding: 18px 22px;
    cursor: pointer;
    position: relative;
}

.mode-btn:last-child {
    border-right: 0;
}

.mode-btn span {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 15px;
    line-height: 1;
    color: var(--red);
}

.mode-btn strong {
    grid-column: 2;
    grid-row: 1;
    display: block;
    font: 800 24px/1 var(--display);
    color: inherit;
}

.mode-btn small {
    grid-column: 2;
    grid-row: 2;
    display: block;
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.2;
    color: inherit;
    opacity: .58;
}

.mode-btn:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    height: 3px;
    background: var(--red);
    transition: right .3s ease;
}

.mode-btn.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .025);
}

.mode-btn.is-active:after {
    right: 0;
}

.mode-display {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr) !important;
    min-height: 560px;
    width: 100%;
}

.mode-image {
    position: relative;
    min-height: 560px;
    overflow: hidden;
}

.mode-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .25s ease, transform .6s ease;
}

.mode-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, transparent 55%, rgba(10, 11, 13, .8)), linear-gradient( 0deg, rgba(0, 0, 0, .38), transparent 50%);
    pointer-events: none;
}

.mode-speed {
    position: absolute;
    z-index: 2;
    left: 24px;
    bottom: 24px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .32);
    display: grid;
    place-content: center;
    text-align: center;
    background: rgba(0, 0, 0, .32);
    backdrop-filter: blur(12px);
}

.mode-speed b {
    font: 850 36px/1 var(--display);
    color: #fff;
}

.mode-speed small {
    font-size: 7px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .55);
}

.mode-copy {
    padding: 55px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #0a0b0d;
    color: #fff;
}

.mode-copy h3 {
    font: 850 42px/1.02 var(--display);
    margin: 10px 0 18px;
    color: #fff;
}

.mode-copy>p:not(.micro-label) {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .58);
    margin: 0 0 25px;
    max-width: 470px;
}

.mode-copy ul {
    margin: 0;
    padding-left: 18px;
    color: rgba(255, 255, 255, .72);
    font-size: 17px;
    line-height: 1.8;
}

.mode-copy li {
    margin-bottom: 4px;
}


/* TABLET */

@media (max-width: 980px) {
    .mode-console {
        margin-top: 30px;
    }
    .mode-nav {
        grid-template-columns: 1fr !important;
    }
    .mode-btn {
        min-height: 72px;
        border-right: 0;
        border-bottom: 1px solid var(--line-light);
        padding: 16px 20px;
    }
    .mode-btn:last-child {
        border-bottom: 0;
    }
    .mode-display {
        grid-template-columns: 1fr !important;
    }
    .mode-image {
        min-height: 520px;
    }
    .mode-copy {
        padding: 38px 28px;
    }
    .mode-copy h3 {
        font-size: 38px;
    }
}


/* MOBILE */

@media (max-width: 600px) {
    .mode-console {
        border-radius: 18px;
    }
    .mode-btn {
        grid-template-columns: 38px 1fr;
        min-height: 68px;
        padding: 14px 16px;
    }
    .mode-btn strong {
        font-size: 19px;
    }
    .mode-btn small {
        font-size: 14px;
    }
    .mode-image {
        min-height: 390px;
    }
    .mode-speed {
        width: 78px;
        height: 78px;
        left: 16px;
        bottom: 16px;
    }
    .mode-speed b {
        font-size: 29px;
    }
    .mode-copy {
        padding: 30px 20px;
    }
    .mode-copy h3 {
        font-size: 32px;
    }
}


/* ==========================================================
    RACE / PERFORMANCE FORMAT SECTION
    ========================================================== */

.race-section {
    overflow: hidden
}

.race-section .section-heading-light .section-kicker {
    color: var(--red);
}

.race-section .section-heading-light h2 {
    color: var(--red);
}

.race-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 6, 7, .95), rgba(5, 6, 7, .8)), url('../images/performance-drive.jpg') center/cover no-repeat;
    opacity: .42
}

.race-console {
    position: relative;
    z-index: 1;
    border: 1px solid var(--line-light);
    border-radius: var(--radius);
    background: rgba(5, 6, 7, .75);
    backdrop-filter: blur(15px);
    overflow: hidden
}

.race-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 28px;
    border-bottom: 1px solid var(--line-light)
}

.race-header>div:first-child {
    display: flex;
    align-items: baseline;
    gap: 12px
}

.race-header span {
    font-size: 14px;
    letter-spacing: .15em;
    color: rgba(255, 255, 255, .5)
}

.race-header strong {
    font: 850 28px/1 var(--display)
}

.race-tabs {
    display: flex;
    gap: 5px
}

.race-tab {
    border: 1px solid var(--line-light);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    padding: 9px 14px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .11em;
    cursor: pointer
}

.race-tab.is-active {
    background: var(--red);
    border-color: var(--red)
}

.race-panel {
    padding: 44px
}

.race-panel[hidden] {
    display: none !important
}

.bracket-grid {
    display: grid;
    grid-template-columns: 1fr 100px 1.3fr 100px 1fr;
    align-items: center
}

.bracket-grid article,
.final-card,
.category-grid article {
    border: 1px solid var(--line-light);
    border-radius: 16px;
    padding: 24px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.bracket-grid span,
.category-grid span {
    font-size: 14px;
    letter-spacing: .14em;
    color: var(--red-bright)
}

.bracket-grid h3,
.category-grid h3 {
    font: 850 30px/1 var(--display);
    margin: 8px 0
}

.bracket-grid p {
    font-size: 10px;
    color: rgba(255, 255, 255, .52);
    margin: 0
}

.bracket-line {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .15), var(--red));
    position: relative
}

.bracket-line:after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    background: var(--red);
    border-radius: 50%
}

.bracket-line.reverse {
    background: linear-gradient(90deg, var(--red), rgba(255, 255, 255, .15))
}

.bracket-line.reverse:after {
    right: auto;
    left: 0
}

.final-card {
    background: var(--red);
    border-color: var(--red);
    text-align: center
}

.final-card span {
    color: rgba(255, 255, 255, .62)
}

.final-card h3 {
    font: 900 52px/1 var(--display);
    margin: 9px 0
}

.final-card p {
    color: rgba(255, 255, 255, .72)
}

.final-card strong {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 13px
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.category-grid article {
    min-height: 180px
}

.category-grid h3 {
    font-size: 27px
}

.race-safety {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line-light)
}

.race-safety article {
    padding: 26px;
    border-right: 1px solid var(--line-light)
}

.race-safety article:last-child {
    border: 0
}

.race-safety span {
    font-size: 14px;
    color: var(--red-bright)
}

.race-safety h4 {
    font: 800 20px/1 var(--display);
    margin: 10px 0
}

.race-safety p {
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
    margin: 0
}


/* Responsive */

@media (max-width:980px) {
    .bracket-grid {
        grid-template-columns: 1fr
    }
    .bracket-line {
        height: 70px;
        width: 1px;
        margin: auto;
        background: linear-gradient(0deg, rgba(255, 255, 255, .15), var(--red))
    }
    .bracket-line.reverse {
        background: linear-gradient(0deg, var(--red), rgba(255, 255, 255, .15))
    }
    .bracket-line:after,
    .bracket-line.reverse:after {
        right: auto;
        left: -3px;
        top: auto;
        bottom: 0
    }
    .category-grid,
    .race-safety {
        grid-template-columns: 1fr 1fr
    }
    .race-safety article:nth-child(2) {
        border-right: 0
    }
    .race-safety article:nth-child(-n+2) {
        border-bottom: 1px solid var(--line-light)
    }
}

@media (max-width:760px) {
    .race-panel {
        padding: 24px
    }
    .race-header {
        display: block
    }
    .race-tabs {
        margin-top: 16px
    }
    .category-grid,
    .race-safety {
        grid-template-columns: 1fr
    }
    .race-safety article {
        border-right: 0 !important;
        border-bottom: 1px solid var(--line-light)
    }
    .race-safety article:last-child {
        border-bottom: 0
    }
}


/* ==========================================================
    RACE / PERFORMANCE FORMAT SECTION
    ========================================================== */

.btn-dark {
    background: #0a0b0c;
    color: #fff
}

.btn-full {
    width: 100%
}


/* =========================================================
   VENUE / CIRCUIT SECTION
   ========================================================= */

.circuit-section {
    background: var(--paper)
}

.venue-explorer {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    border-radius: var(--radius);
    overflow: hidden;
    background: #0a0b0c;
    color: #fff;
    min-height: 670px
}

.venue-map {
    position: relative;
    overflow: hidden;
    background: #111
}

.venue-map>img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    filter: saturate(.8) contrast(1.08)
}

.venue-map:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, rgba(10, 11, 12, .35));
    pointer-events: none
}

.map-scan {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: -10%;
    height: 20%;
    background: linear-gradient(0deg, transparent, rgba(227, 6, 19, .18), transparent);
    animation: mapScan 5s linear infinite;
    pointer-events: none
}

.zone-hotspot {
    position: absolute;
    z-index: 4;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(5, 6, 7, .72);
    color: #fff;
    backdrop-filter: blur(8px);
    font: 850 14px/1 var(--display);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease
}

.zone-hotspot:hover,
.zone-hotspot.is-active {
    background: var(--red);
    border-color: var(--red);
    transform: scale(1.12);
    box-shadow: 0 0 0 9px rgba(227, 6, 19, .15)
}

.zone-a {
    left: 27%;
    top: 72%
}

.zone-b {
    left: 46%;
    top: 66%
}

.zone-c {
    left: 54%;
    top: 31%
}

.zone-d {
    left: 62%;
    top: 51%
}

.zone-e {
    left: 53%;
    top: 79%
}

.zone-readout {
    padding: 60px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.zone-code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line-light);
    padding-bottom: 15px
}

.zone-code span {
    font-size: 14px;
    letter-spacing: .16em;
    color: var(--red-bright)
}

.zone-code strong {
    font-size: 14px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .5)
}

.zone-readout h3 {
    font: 850 48px/1 var(--display);
    margin: 31px 0 16px
}

.zone-readout>p {
    font-size: 14px;
    color: rgba(255, 255, 255, .58)
}

.zone-readout ul {
    list-style: none;
    margin: 26px 0;
    padding: 0;
    border-top: 1px solid var(--line-light)
}

.zone-readout li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-light);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .7)
}

.zone-controls {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.zone-controls button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer
}

.venue-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 32px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.venue-facts article {
    padding: 30px 25px;
    text-align: center;
    border-right: 1px solid var(--line)
}

.venue-facts article+article {
    padding-left: 25px
}

.venue-facts article:last-child {
    border: 0
}

.venue-facts span {
    font: 900 48px/1 var(--display)
}

.venue-facts h3 {
    font: 800 17px/1 var(--display);
    margin: 8px 0
}

.venue-facts p {
    font-size: 10px;
    color: var(--muted);
    margin: 0
}

.facility-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 55px;
    align-items: stretch;
    margin-top: 90px
}

.facility-grid figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    min-height: 600px
}

.facility-grid figure img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover
}

.facility-grid figure:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent 50%)
}

.facility-grid figcaption {
    position: absolute;
    z-index: 2;
    left: 25px;
    bottom: 24px;
    color: #fff
}

.facility-grid figcaption span {
    display: block;
    font-size: 14px;
    letter-spacing: .16em
}

.facility-grid figcaption strong {
    font: 850 28px/1 var(--display)
}

.facility-copy {
    padding: 30px 0
}

.facility-copy h3 {
    font: 850 46px/1 var(--display);
    margin: 11px 0 25px
}

.facility-list {
    border-top: 1px solid var(--line);
    margin-bottom: 30px
}

.facility-list p {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: #55595f
}

.facility-list span {
    font-size: 14px;
    color: var(--red);
    letter-spacing: .13em
}


/* =========================================================
   PADDOCK SECTION
   ========================================================= */

.paddock-section {
    overflow: hidden
}

.paddock-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 12px
}

.gallery-card {
    position: relative;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
    padding: 0;
    cursor: zoom-in
}

.gallery-card img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease, filter .3s ease
}

.gallery-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent 52%)
}

.gallery-card:hover img {
    transform: scale(1.05);
    filter: saturate(1.1)
}

.gallery-card span {
    position: absolute;
    z-index: 2;
    left: 15px;
    bottom: 13px;
    color: #fff;
    font-size: 14px;
    letter-spacing: .13em;
    text-transform: uppercase
}

.gallery-wide {
    grid-column: span 2
}

.gallery-tall {
    grid-row: span 2
}

.paddock-gallery .gallery-card:nth-child(6) {
    grid-row: span 2
}

.display-zones {
    margin-top: 100px;
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 75px;
    align-items: start
}

.display-intro {
    position: sticky;
    top: 120px
}

.display-intro h3 {
    font: 850 48px/1 var(--display);
    margin: 12px 0
}

.display-intro p:last-child {
    font-size: 13px;
    color: rgba(255, 255, 255, .55)
}

.display-accordion {
    border-top: 1px solid var(--line-light)
}

.display-item {
    border-bottom: 1px solid var(--line-light)
}

.display-item>button {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    display: grid;
    grid-template-columns: 45px 1fr auto;
    gap: 10px;
    align-items: center;
    text-align: left;
    padding: 23px 0;
    cursor: pointer
}

.display-item>button span {
    font-size: 14px;
    color: var(--red-bright)
}

.display-item>button strong {
    font: 800 24px/1 var(--display)
}

.display-item>button i {
    font-style: normal;
    font-size: 23px;
    color: var(--red);
    transition: transform .25s ease
}

.display-item.is-open>button i {
    transform: rotate(45deg)
}

.display-item>div {
    display: none;
    padding: 0 45px 24px
}

.display-item.is-open>div {
    display: block
}

.display-item p {
    font-size: 14px;
    color: rgba(255, 255, 255, .53);
    margin: 0;
    max-width: 620px
}

.awards-board {
    margin-top: 90px;
    border-top: 1px solid var(--line-light);
    padding-top: 48px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 50px;
    align-items: center
}

.awards-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 420px
}

.awards-hero img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover
}

.awards-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent 55%)
}

.awards-hero>div {
    position: absolute;
    z-index: 2;
    left: 25px;
    bottom: 24px
}

.awards-hero h3 {
    font: 850 32px/1 var(--display);
    margin: 8px 0
}

.award-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line-light)
}

.award-list span {
    padding: 19px 16px 19px 0;
    border-bottom: 1px solid var(--line-light);
    font: 800 20px/1 var(--display)
}

.award-list span:nth-child(even) {
    padding-left: 22px;
    border-left: 1px solid var(--line-light)
}


/* =========================================================
    REGISTRATION FORM
    ========================================================= */

.register-section {
    /* overflow: hidden; */
    background: var(--dark);
    color: #fff;
}

.register-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 30%, rgba(227, 6, 19, .18), transparent 28%), linear-gradient(120deg, transparent 55%, rgba(255, 255, 255, .03));
    pointer-events: none
}

.register-bg:after {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -20%;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    border: 120px solid rgba(255, 255, 255, .025)
}

.register-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(560px, 1.28fr);
    gap: clamp(48px, 7vw, 86px);
    align-items: start
}

.register-intro {
    position: sticky;
    top: 40px;
    padding-top: 28px
}

.register-intro>p:not(.section-kicker) {
    color: rgba(255, 255, 255, .56);
    font-size: 18px
}

.register-live {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 36px;
    border-top: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light)
}

.register-live>div {
    padding: 21px 20px 22px 0
}

.register-live>div+div {
    border-left: 1px solid var(--line-light);
    padding-left: 20px;
    padding-right: 0px;
}

.register-live span {
    display: block;
    font-size: 14px;
    color: var(--red-bright);
    letter-spacing: .15em
}

.register-live strong {
    display: block;
    font: 800 20px/1 var(--display);
    margin: 8px 0
}

.register-live small {
    font-size: 14px;
    color: rgba(255, 255, 255, .42)
}

.demo-note {
    margin-top: 26px;
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035)
}

.demo-note>span {
    font-size: 14px;
    letter-spacing: .15em;
    color: var(--red-bright)
}

.demo-note p {
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
    margin: 8px 0 14px
}

.demo-note button {
    border: 0;
    background: transparent;
    padding: 0;
    color: rgba(255, 255, 255, .72);
    text-decoration: underline;
    font-size: 9px;
    cursor: pointer
}

.registration-card {
    background: #f8f7f3;
    color: #0a0b0c;
    border-radius: 16px;
    padding: clamp(24px, 3vw, 34px);
    box-shadow: var(--shadow)
}

.registration-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-bottom: 19px;
    border-bottom: 1px solid var(--line)
}

.registration-head h3 {
    font: 850 clamp(30px, 3vw, 38px)/.95 var(--display);
    margin: 8px 0 0
}

.registration-head>span {
    font-size: 9px;
    letter-spacing: .15em;
    color: #777
}

.registration-steps {
    display: flex;
    gap: 20px;
    margin: 17px 0
}

.registration-steps span {
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b1b3b7;
    position: relative;
    padding-left: 16px
}

.registration-steps span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d2d3d5
}

.registration-steps span.is-active {
    color: #0b0c0d
}

.registration-steps span.is-active:before {
    background: var(--red)
}

.event-day-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.event-day-option {
    border: 1px solid #d7d7d4;
    border-radius: 13px;
    background: #fff;
    text-align: left;
    padding: 12px 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer
}

.event-day-option.is-active {
    border-color: #111;
    box-shadow: inset 0 0 0 1px #111
}

.event-day-option small {
    display: block;
    font-size: 7px;
    letter-spacing: .12em;
    color: #777
}

.event-day-option strong {
    font: 800 16px/1 var(--display)
}

.event-day-option em {
    font-style: normal;
    font-size: 7px;
    text-transform: uppercase;
    color: #777;
    text-align: right
}

.form-context {
    margin: 11px 0 0;
    padding: 13px 15px;
    border-radius: 11px;
    background: #0c0d0f;
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.form-context strong {
    font: 800 15px/1 var(--display)
}

.form-context span {
    font-size: 14px;
    text-align: right;
    color: rgba(255, 255, 255, .56)
}

.registration-card fieldset {
    margin-top: 24px
}

.registration-card legend {
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 800;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 17px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 14px
}

.field {
    display: flex;
    flex-direction: column
}

.field[hidden] {
    display: none !important
}

.field label {
    font-size: 9px;
    font-weight: 750;
    margin-bottom: 5px;
    color: #47494d
}

.field input,
.field select {
    width: 100%;
    height: 46px;
    border: 1px solid #d6d7d8;
    border-radius: 10px;
    background: #fff;
    padding: 0 13px;
    outline: none;
    color: #141517;
    transition: border .2s ease, box-shadow .2s ease
}

.field input:focus,
.field select:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .055)
}

.field.has-error input,
.field.has-error select {
    border-color: var(--red)
}

.field-error {
    min-height: 14px;
    color: var(--red);
    font-size: 9px;
    margin-top: 2px
}

.field-note {
    font-size: 14px;
    color: #777;
    margin-top: 4px
}

.form-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 23px
}

.form-options label {
    display: flex;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d7d7d5;
    border-radius: 12px;
    background: #fff;
    font-size: 10px;
    align-items: flex-start
}

.form-options label[hidden] {
    display: none !important
}

.form-options input,
.consents input {
    margin-top: 3px;
    accent-color: var(--red)
}

.form-options span {
    display: flex;
    flex-direction: column
}

.form-options strong {
    font-size: 10px
}

.form-options small {
    font-size: 14px;
    color: #777;
    margin-top: 4px
}

.consents {
    display: grid;
    gap: 9px;
    margin: 23px 0
}

.consents label {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 9px;
    color: #5d6064
}

.link-button {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit
}

.fee-summary {
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding: 17px 0
}

.fee-summary>div {
    /* display: flex; */
    flex-direction: column
}

.fee-summary span {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #777
}

.fee-summary small {
    font-size: 9px;
    color: #999
}

.fee-summary strong {
    font: 850 28px/1 var(--display)
}

.form-footnote {
    text-align: center;
    font-size: 14px;
    color: #989a9d;
    margin: 9px 0 0
}


/* Keep supporting labels readable while preserving the large VW display scale. */

.section-kicker,
.micro-label,
.eyebrow,
.meta-label,
.countdown-label,
.countdown-grid span,
.event-day-option small,
.event-day-option em,
.register-live span,
.register-live small,
.demo-note>span,
.demo-note p,
.demo-note button,
.registration-steps span,
.field label,
.field-error,
.form-context span,
.consents label,
.fee-summary span,
.fee-summary small,
.form-footnote,
.race-header span,
.meter span {
    font-size: 10px;
}

.section-kicker,
.micro-label,
.eyebrow {
    font-family: var(--display);
    color: var(--red);
}


/* =========================================================
   FAQ SECTION
   ========================================================= */

.faq-section {
    background: var(--dark);
    color: #fff;
    padding-bottom: 110px
}

.faq-grid {
    display: grid;
    grid-template-columns: .68fr 1.32fr;
    gap: 80px
}

.faq-intro {
    position: sticky;
    top: 120px;
    align-self: start
}

.faq-list {
    border-top: 1px solid var(--line)
}

.faq-item {
    border-bottom: 1px solid var(--line)
}

.faq-item>button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 21px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-weight: 750;
    cursor: pointer
}

.faq-item>button span {
    color: var(--red);
    font-size: 23px;
    line-height: 1;
    transition: transform .2s ease
}

.faq-item.is-open>button span {
    transform: rotate(45deg)
}

.faq-answer {
    display: none;
    padding: 0 50px 21px 0
}

.faq-answer p {
    font-size: 14px;
    color: var(--muted);
    margin: 0
}

@keyframes mapScan {
    from {
        transform: translateY(-100%)
    }
    to {
        transform: translateY(620%)
    }
}

@media (max-width:1180px) {
    .register-grid {
        gap: 55px
    }
}

@media (max-width:980px) {
    .venue-explorer,
    .facility-grid,
    .display-zones,
    .awards-board,
    .register-grid,
    .faq-grid {
        grid-template-columns: 1fr
    }
    .register-intro,
    .display-intro,
    .faq-intro {
        position: static
    }
    .venue-map {
        min-height: 620px
    }
    .facility-grid figure {
        min-height: 530px
    }
    .display-zones {
        gap: 45px
    }
    .register-grid {
        gap: 65px
    }
    .registration-card {
        max-width: 820px
    }
    .faq-grid {
        gap: 40px
    }
}

@media (max-width:760px) {
    .venue-map {
        min-height: 500px
    }
    .zone-hotspot {
        width: 36px;
        height: 36px
    }
    .zone-readout {
        padding: 35px 25px
    }
    .zone-readout h3 {
        font-size: 39px
    }
    .venue-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .facility-grid {
        gap: 30px
    }
    .facility-grid figure {
        min-height: 430px
    }
    .paddock-gallery {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 190px
    }
    .gallery-wide {
        grid-column: span 2
    }
    .gallery-tall {
        grid-row: span 2
    }
    .paddock-gallery .gallery-card:nth-child(6) {
        grid-row: span 2;
    }
    .display-zones {
        margin-top: 70px
    }
    .award-list {
        grid-template-columns: 1fr
    }
    .award-list span:nth-child(even) {
        padding-left: 0;
        border-left: 0
    }
    .data-panel,
    .event-day-picker,
    .form-grid,
    .form-options {
        grid-template-columns: 1fr
    }
    .form-context {
        display: block
    }
    .form-context span {
        display: block;
        text-align: left;
        margin-top: 5px
    }
    .faq-answer {
        padding-right: 10px
    }
    .registration-card {
        padding: 22px
    }
}

@media (max-width:480px) {
    .venue-facts {
        grid-template-columns: 1fr
    }
    .venue-facts article,
    .venue-facts article+article {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 22px 0
    }
    .venue-facts article:last-child {
        border-bottom: 0
    }
    .paddock-gallery {
        grid-auto-rows: 170px
    }
    .gallery-wide {
        grid-column: span 2
    }
    .awards-hero {
        min-height: 350px
    }
    .registration-head {
        display: block
    }
    .registration-head>span {
        display: block;
        margin-top: 9px
    }
    .registration-steps {
        gap: 9px;
        justify-content: space-between
    }
}


/* =========================================================
   UI Improvements
   ========================================================= */

.faq-item>button {
    color: #e30613;
}

.section {
    padding: 5rem 0;
}

.social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-answer p,
.facility-list p,
.stats-row span {
    font-size: 14px;
}

.section-kicker,
.micro-label,
.eyebrow,
.meta-label,
.countdown-label,
.countdown-grid span,
.event-day-option small,
.event-day-option em,
.register-live span,
.register-live small,
.demo-note>span,
.demo-note p,
.demo-note button,
.registration-steps span,
.field label,
.field-error,
.form-context span,
.consents label,
.fee-summary span,
.fee-summary small,
.form-footnote,
.race-header span,
.meter span,
.footer-grid p,
.footer-grid .link-button {
    font-size: 14px;
}

.gallery-card span,
.venue-facts p,
.zone-controls button,
.journey-readout li,
.mode-btn small,
.day-facts span,
.access-unlocks>span,
.day-facts p,
.access-unlocks li,
.availability,
.day-select em,
.day-select small {
    font-size: 14px;
}

.rail-arrow {
    background: #c00d17;
    color: #fff;
}

.nav-links a {
    font-size: 18px;
}

.day-select strong {
    color: #e30613;
}

.event-day-option strong {
    color: #e30613;
}


/* =========================================================
   FAQ accordion
   ========================================================= */

.display-accordion {
    border-top: 1px solid var(--line-light)
}

.display-item {
    border-bottom: 1px solid var(--line-light)
}

.display-item>button {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    display: grid;
    grid-template-columns: 45px 1fr auto;
    gap: 0px;
    align-items: center;
    text-align: left;
    padding: 23px 0;
    cursor: pointer
}

.display-item>button span {
    font-size: 14px;
    color: var(--red-bright)
}

.display-item>button strong {
    font: 800 18px/1 var(--display)
}

.display-item>button i {
    font-style: normal;
    font-size: 23px;
    color: var(--red);
    transition: transform .25s ease
}

.display-item.is-open>button i {
    transform: rotate(45deg)
}

.display-item>div {
    display: none;
    padding: 0 45px 24px
}

.display-item.is-open>div {
    display: block
}

.display-item p {
    font-size: 18px;
    color: rgba(255, 255, 255, .53);
    margin: 0;
    max-width: 620px
}

.faq-intro p {
    font-size: 18px;
}

.gallery-modal-card {
    position: relative;
    z-index: 2;
    width: min(1050px, 100%);
    max-height: 88vh;
    background: #070809;
    border-radius: 20px;
    padding: 14px;
    color: #fff
}

.gallery-modal-card img {
    max-height: 76vh;
    object-fit: contain;
    border-radius: 12px
}

.gallery-modal-card p {
    margin: 11px 4px 2px;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62)
}

.gallery-modal-card .modal-close {
    background: rgba(0, 0, 0, .58);
    color: #fff
}

.modal-backdrop {
    z-index: 1;
}

.register-bg {
    overflow: hidden;
}


/* =========================================================
   GT DAY - CONDITIONAL OWNERSHIP / VIN FIELDS
   ========================================================= */

.registration-card .ownership-toggle {
    width: 100%;
    margin: 0 0 18px;
    box-sizing: border-box;
}

.registration-card .ownership-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.registration-card .ownership-checkbox input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--red);
    flex: 0 0 16px;
    cursor: pointer;
}

.registration-card .ownership-checkbox span {
    display: block;
    font-size: 10px;
    font-weight: 750;
    color: #47494d;
}

.registration-card .ownership-checkbox strong {
    font-size: 12px;
    font-weight: 750;
    color: #47494d;
}

.registration-card .ownership-checkbox small {
    display: none;
}

.registration-card .owner-vehicle-field {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.registration-card .field[hidden],
.field[hidden] {
    display: none !important;
}


/* Emergency content visibility fix from local working version */

.reveal,
.reveal.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}


/* Keep conditional fields inside the existing senior form layout */

.registration-card fieldset {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.registration-card .form-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    box-sizing: border-box;
}

.registration-card .field {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.registration-card .field input,
.registration-card .field select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width:760px) {
    .registration-card .form-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 550px) {
    .venue-map>img {
        object-fit: unset;
    }
    .register-live strong {
        font: 800 16px / 1 var(--display);
    }
}

@media screen and (max-width: 375px) {
    .header {
        z-index: 77;
    }
    .hero-title {
        font-size: clamp(65px, 19vw, 132px);
    }
    .rail-arrow {
        width: 36px;
        height: 36px;
        font-size: 22px;
        align-items: center;
        justify-content: center;
        display: flex !important;
    }
}

.swiper-slide img,
.swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
    background: #c00d17;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    user-select: none;
}

.swiper-button-next {
    right: -22px;
}

.swiper-button-prev {
    left: -23px;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: '';
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: ''
}

@media screen and (max-width: 767px) {
    .swiper-button-next {
        right: 0;
    }
    .swiper-button-prev {
        left: 0;
    }
    .activity-card h3 {
        font-size: 26px;
    }
}


/* Day 2 session selector: override the general full-width form-input rule. */

.registration-card .session-field {
    grid-column: 1 / -1;
}

.registration-card .session-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding-top: 4px;
}

.registration-card .session-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.registration-card .session-options input[type="radio"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: #001e50;
}

.registration-card .session-options label.is-disabled {
    cursor: not-allowed;
    opacity: .55;
}


/* Keep session counts readable in narrow availability cards. */

.js-availability[data-day="day2"] {
    white-space: pre-line;
    line-height: 24px;
    padding: 10px 20px;
    font-variant-numeric: tabular-nums;
}

.event-day-picker .event-day-option {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
}

.event-day-picker .event-day-option>span {
    gap: 6px;
}

.event-day-picker .event-day-option>em {
    margin-top: auto;
    padding: 10px 0px;
    border-top: 1px solid #e6e6e3;
    text-align: left;
    text-transform: none;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0;
}

.register-live strong.js-availability[data-day="day2"] {
    font-size: 17px;
    font-weight: 600;
    padding: 0px;
}

@media (max-width: 480px) {
    .event-day-picker {
        grid-template-columns: 1fr;
    }
}

small#feeNote {
    display: block;
}