:root {
    --color-gold-dark: #6f4510;
    --color-gold: #b9791d;
    --color-gold-bright: #e4b24d;
    --color-gold-soft: #f0cf87;
    --color-background: #070707;
    --color-background-soft: #0d0d0d;
    --color-surface: #141414;
    --color-surface-light: #1c1c1c;
    --color-surface-hover: #222222;

    --color-primary: #ba0000;
    --color-primary-dark: #760000;
    --color-primary-bright: #ff2020;

    --color-text: #f7f7f7;
    --color-muted: #b6b6b6;
    --color-border: #343434;
    --color-success: #49c97b;

    --font-body:
        Arial,
        Helvetica,
        sans-serif;

    --font-heading:
        "Arial Black",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --container-width: 1180px;
    --header-height: 76px;

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 22px;

    --shadow-dark: 0 24px 80px rgba(0, 0, 0, 0.45);
    --shadow-red: 0 18px 50px rgba(186, 0, 0, 0.18);

    --transition-fast: 160ms ease;
    --transition-normal: 240ms ease;
}

/* --------------------------------------------------
   Base
-------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(186, 0, 0, 0.18),
            transparent 30%
        ),
        var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
}

body.menu-open {
    overflow: hidden;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
}

address {
    font-style: normal;
}

ul {
    margin-top: 0;
}

::selection {
    background: var(--color-primary-bright);
    color: #ffffff;
}

:focus-visible {
    outline: 3px solid var(--color-primary-bright);
    outline-offset: 4px;
}

.container {
    width: min(calc(100% - 32px), var(--container-width));
    margin-inline: auto;
}

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

.section-dark {
    border-block: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--color-background-soft);
}

.section-label {
    margin: 0 0 12px;
    color: var(--color-primary-bright);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-title {
    max-width: 900px;
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-size: clamp(2.35rem, 5.2vw, 4.8rem);
    font-weight: 900;
    letter-spacing: -0.018em;
    line-height: 1.03;
    text-wrap: balance;
    text-transform: uppercase;
}

.section-description {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.text-red {
    color: var(--color-primary-bright);
}

/* --------------------------------------------------
   Header
-------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: var(--header-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 7, 7, 0.88);
    backdrop-filter: blur(16px);
    transition:
        background var(--transition-normal),
        box-shadow var(--transition-normal);
}

.site-header.is-scrolled {
    background: rgba(7, 7, 7, 0.97);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.header-inner {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    display: inline-flex;
    align-items: center;
    font-family:
        "Arial Black",
        "Arial Narrow",
        Arial,
        sans-serif;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
}

.logo span {
    margin-left: 4px;
    color: var(--color-primary-bright);
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 24px;
}

.main-navigation > a {
    position: relative;
    color: var(--color-muted);
    font-size: 0.93rem;
    font-weight: 800;
    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.main-navigation > a:not(.nav-booking-button)::after {
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    background: var(--color-primary-bright);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
}

.main-navigation > a:hover {
    color: var(--color-text);
    transform: translateY(-2px);
}

.main-navigation > a:hover::after {
    transform: scaleX(1);
}

.main-navigation .nav-booking-button {
    padding: 11px 18px;
    border: 1px solid var(--color-primary-bright);
    border-radius: var(--radius-small);
    background: var(--color-primary);
    color: #ffffff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.main-navigation .nav-booking-button:hover {
    background: var(--color-primary-bright);
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 1.55rem;
}

/* --------------------------------------------------
   Hero
-------------------------------------------------- */

.hero {
    position: relative;
    display: grid;
    min-height: calc(100vh - var(--header-height));
    align-items: center;
    overflow: hidden;
    padding: 110px 0;
    isolation: isolate;
}

.hero::before {
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(0, 0, 0, 0.82) 55%,
            rgba(0, 0, 0, 0.42) 100%
        );
    content: "";
}

.hero::after {
    position: absolute;
    z-index: -2;
    top: -180px;
    right: -160px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: rgba(186, 0, 0, 0.34);
    content: "";
    filter: blur(125px);
}

.hero-decoration {
    position: absolute;
    z-index: -1;
    top: 12%;
    right: 7%;
    width: min(38vw, 520px);
    aspect-ratio: 1;
    border: 2px solid rgba(255, 32, 32, 0.18);
    transform: rotate(17deg);
}

.hero-decoration::before,
.hero-decoration::after {
    position: absolute;
    background: rgba(255, 32, 32, 0.22);
    content: "";
}

.hero-decoration::before {
    top: 50%;
    left: -20%;
    width: 140%;
    height: 2px;
    transform: rotate(-31deg);
}

.hero-decoration::after {
    top: -15%;
    left: 48%;
    width: 2px;
    height: 130%;
    transform: rotate(22deg);
}

.hero-content {
    position: relative;
    max-width: 920px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--color-primary-bright);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.hero-kicker::before {
    width: 38px;
    height: 3px;
    background: var(--color-primary-bright);
    content: "";
}

.hero h1 {
    max-width: 1000px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3.8rem, 9vw, 7.8rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 0.98;
    text-wrap: balance;
    text-transform: uppercase;
}

.hero h1 span {
    display: block;
    color: var(--color-primary-bright);
    text-shadow: 0 12px 35px rgba(255, 32, 32, 0.2);
}

.hero-description {
    max-width: 670px;
    margin: 32px 0 0;
    color: var(--color-muted);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 38px;
}

.hero-note {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 32px;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.hero-note span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-note span::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-bright);
    content: "";
}

/* --------------------------------------------------
   Buttons
-------------------------------------------------- */

.button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 14px 25px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-align: center;
    text-transform: uppercase;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.button:hover {
    transform: translateY(-3px);
}

.button-primary {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: var(--shadow-red);
}

.button-primary:hover {
    background: var(--color-primary-bright);
    box-shadow: 0 20px 55px rgba(255, 32, 32, 0.25);
}

.button-secondary {
    border-color: var(--color-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
}

.button-secondary:hover {
    border-color: var(--color-primary-bright);
    background: rgba(255, 32, 32, 0.08);
}

.button-full {
    width: 100%;
}

/* --------------------------------------------------
   Cards and grids
-------------------------------------------------- */

.steps-grid,
.package-grid,
.reason-grid {
    display: grid;
    gap: 24px;
    margin-top: 48px;
}

.steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.reason-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 45%
        ),
        var(--color-surface);
    box-shadow: var(--shadow-dark);
    transition:
        border-color var(--transition-normal),
        background var(--transition-normal),
        transform var(--transition-normal);
}

.card:hover {
    border-color: rgba(255, 32, 32, 0.55);
    background-color: var(--color-surface-hover);
    transform: translateY(-6px);
}

.card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary);
    content: "";
}

.card-number {
    color: var(--color-primary-bright);
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}

.card h3 {
    margin: 18px 0 10px;
    font-size: 1.35rem;
    line-height: 1.25;
    text-transform: uppercase;
}

.card p {
    margin: 0;
    color: var(--color-muted);
}

.package-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.package-card.featured {
    border-color: var(--color-primary-bright);
    background:
        linear-gradient(
            145deg,
            rgba(186, 0, 0, 0.18),
            transparent 45%
        ),
        var(--color-surface);
    transform: translateY(-12px);
}

.package-card.featured:hover {
    transform: translateY(-18px);
}

.package-category {
    margin: 0 0 10px;
    color: var(--color-primary-bright);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.package-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}

.package-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

.meta-badge {
    display: inline-flex;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.package-price {
    margin: 4px 0 22px;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}

.package-price small {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.package-list,
.safety-list {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.package-list li,
.safety-list li {
    position: relative;
    padding: 9px 0 9px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--color-muted);
}

.package-list li::before,
.safety-list li::before {
    position: absolute;
    top: 15px;
    left: 2px;
    width: 8px;
    height: 8px;
    background: var(--color-primary-bright);
    content: "";
    transform: rotate(45deg);
}

.package-card .button {
    margin-top: auto;
}

/* --------------------------------------------------
   Premium package
-------------------------------------------------- */

.package-card.premium {
    border-color: rgba(228, 178, 77, 0.58);
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(228, 178, 77, 0.2),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(111, 69, 16, 0.28),
            rgba(125, 0, 0, 0.2) 48%,
            rgba(15, 15, 15, 0.98) 82%
        ),
        var(--color-surface);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.52),
        0 14px 45px rgba(185, 121, 29, 0.12);
}

.package-card.premium::before {
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--color-gold-dark),
            var(--color-gold-bright),
            var(--color-primary-bright),
            var(--color-gold)
        );
}

.package-card.premium::after {
    position: absolute;
    top: 18px;
    right: -34px;
    width: 140px;
    padding: 7px 0;
    background:
        linear-gradient(
            90deg,
            var(--color-gold-dark),
            var(--color-gold-bright)
        );
    color: #160d02;
    content: "PREMIUM";
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-align: center;
    transform: rotate(38deg);
}

.package-card.premium .package-category {
    color: var(--color-gold-bright);
}

.package-card.premium .package-name {
    color: var(--color-gold-soft);
}

.package-card.premium .meta-badge {
    border-color: rgba(228, 178, 77, 0.3);
    background: rgba(185, 121, 29, 0.08);
}

.package-card.premium .package-list li::before {
    background: var(--color-gold-bright);
}

.package-card.premium .button-secondary {
    border-color: var(--color-gold);
    background:
        linear-gradient(
            135deg,
            rgba(111, 69, 16, 0.45),
            rgba(125, 0, 0, 0.35)
        );
    color: var(--color-gold-soft);
}

.package-card.premium .button-secondary:hover {
    border-color: var(--color-gold-bright);
    background:
        linear-gradient(
            135deg,
            var(--color-gold-dark),
            #8f0000
        );
    color: #ffffff;
}

/* --------------------------------------------------
   Experience and reasons
-------------------------------------------------- */

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    align-items: center;
    gap: 70px;
}

.intro-stat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.stat-card {
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.stat-card strong {
    display: block;
    color: var(--color-primary-bright);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1;
}

.stat-card span {
    display: block;
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.reason-card {
    min-height: 190px;
}

.reason-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 32, 32, 0.42);
    border-radius: var(--radius-small);
    background: rgba(186, 0, 0, 0.14);
    color: var(--color-primary-bright);
    font-weight: 900;
}

/* --------------------------------------------------
   Bring your own
-------------------------------------------------- */

.bring-own {
    overflow: hidden;
    border-block: 1px solid rgba(255, 32, 32, 0.28);
    background:
        linear-gradient(
            120deg,
            rgba(186, 0, 0, 0.3),
            rgba(186, 0, 0, 0.04) 55%,
            transparent
        ),
        var(--color-surface);
}

.bring-own-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 55px;
}

.warning-box {
    padding: 28px;
    border: 1px solid rgba(255, 32, 32, 0.48);
    border-radius: var(--radius-medium);
    background: rgba(0, 0, 0, 0.32);
}

.warning-box h3 {
    margin: 0 0 12px;
    text-transform: uppercase;
}

.warning-box p {
    margin: 0;
    color: var(--color-muted);
}


/* --------------------------------------------------
   Safety section
-------------------------------------------------- */

.safety-section {
    position: relative;
    overflow: hidden;
    border-block: 1px solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.018),
            transparent 42%
        ),
        #0b0b0b;
}

.safety-section::before {
    position: absolute;
    top: -180px;
    left: -180px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255, 32, 32, 0.09);
    border-radius: 50%;
    content: "";
}

.safety-layout {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(420px, 1.18fr);
    align-items: start;
    gap: 70px;
}

.safety-content {
    position: sticky;
    top: calc(var(--header-height) + 40px);
}

.safety-description {
    max-width: 620px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.safety-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}

.safety-fact {
    min-width: 0;
    padding: 20px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.025);
}

.safety-fact strong {
    display: block;
    color: var(--color-primary-bright);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.1;
    text-transform: uppercase;
}

.safety-fact span {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.safety-rules-panel {
    position: relative;
    overflow: hidden;
    padding: 38px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            transparent 45%
        ),
        #121212;
    box-shadow: var(--shadow-dark);
}

.safety-rules-panel::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background:
        linear-gradient(
            180deg,
            var(--color-primary-bright),
            var(--color-primary-dark)
        );
    content: "";
}

.safety-panel-label {
    margin: 0 0 10px;
    color: var(--color-primary-bright);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.safety-rules-panel > h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.08;
    text-transform: uppercase;
}

.safety-rules-list {
    display: grid;
    gap: 0;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.safety-rules-list li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.safety-rule-number {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 32, 32, 0.35);
    border-radius: 50%;
    background: rgba(186, 0, 0, 0.1);
    color: var(--color-primary-bright);
    font-family: var(--font-heading);
    font-size: 0.76rem;
}

.safety-rules-list strong {
    display: block;
    font-size: 0.98rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.safety-rules-list p {
    margin: 7px 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.safety-notice {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 38px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 32, 32, 0.24);
    border-radius: var(--radius-medium);
    background:
        linear-gradient(
            90deg,
            rgba(186, 0, 0, 0.1),
            rgba(255, 255, 255, 0.015)
        );
}

.safety-notice-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.safety-notice strong {
    display: block;
    text-transform: uppercase;
}

.safety-notice p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

@media (max-width: 950px) {
    .safety-layout {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .safety-content {
        position: static;
    }

    .safety-description {
        max-width: 720px;
    }

    .safety-facts {
        max-width: 720px;
    }
}

@media (max-width: 600px) {
    .safety-facts {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 26px;
    }

    .safety-fact {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 15px 16px;
    }

    .safety-fact span {
        margin-top: 0;
        text-align: right;
    }

    .safety-rules-panel {
        padding: 28px 22px;
    }

    .safety-rules-panel > h3 {
        font-size: 1.65rem;
    }

    .safety-rules-list li {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
        padding: 19px 0;
    }

    .safety-rule-number {
        width: 36px;
        height: 36px;
        font-size: 0.68rem;
    }

    .safety-notice {
        align-items: flex-start;
        padding: 21px;
    }

    .safety-notice-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}

/* --------------------------------------------------
   About
-------------------------------------------------- */

/* --------------------------------------------------
   About section
-------------------------------------------------- */

.about-section {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 70%,
            rgba(186, 0, 0, 0.12),
            transparent 28%
        ),
        var(--color-background);
}

.about-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);
    align-items: start;
    gap: 72px;
}

.about-heading,
.about-content {
    min-width: 0;
}

.about-statement {
    max-width: 700px;
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.02;

    text-wrap: balance;
    text-transform: uppercase;
}

.about-statement span {
    display: block;
    margin-top: 10px;
    color: var(--color-primary-bright);
}

.about-content {
    padding-top: 34px;
}

.about-content > p {
    max-width: 650px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.about-content > p + p {
    margin-top: 18px;
}

.about-content .about-lead {
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.65;
}

.about-values {
    display: grid;
    gap: 0;
    margin-top: 36px;

    border-top: 1px solid var(--color-border);
}

.about-value {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;

    min-width: 0;
    padding: 24px 0;

    border-bottom: 1px solid var(--color-border);
}

.about-value > span {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 32, 32, 0.34);
    border-radius: 50%;

    background: rgba(186, 0, 0, 0.09);
    color: var(--color-primary-bright);

    font-family: var(--font-heading);
    font-size: 0.7rem;
}

.about-value > div {
    min-width: 0;
}

.about-value h3 {
    margin: 0;

    font-size: 1rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.about-value p {
    margin: 7px 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.about-button {
    margin-top: 30px;
}

@media (max-width: 900px) {
    .about-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .about-statement {
        max-width: 760px;
    }

    .about-content {
        max-width: 760px;
        padding-top: 0;
    }
}

@media (max-width: 600px) {
    .about-layout,
    .about-heading,
    .about-content,
    .about-values,
    .about-value {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .about-layout {
        gap: 32px;
    }

    .about-statement {
        font-size: clamp(2.1rem, 10vw, 3rem);
        line-height: 1;
        text-wrap: initial;
    }

    .about-content .about-lead {
        font-size: 1.02rem;
        line-height: 1.6;
    }

    .about-content > p {
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .about-values {
        margin-top: 28px;
    }

    .about-value {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 14px;
        padding: 20px 0;
    }

    .about-value > span {
        width: 36px;
        height: 36px;
        font-size: 0.65rem;
    }

    .about-value h3 {
        font-size: 0.9rem;
    }

    .about-value p {
        font-size: 0.86rem;
        overflow-wrap: anywhere;
    }

    .about-button {
        width: 100%;
        margin-top: 26px;
    }
}

/* --------------------------------------------------
   Collapsible wide FAQ section
-------------------------------------------------- */

.faq-section {
    padding: 54px 0;
}

.faq-disclosure {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(186, 0, 0, 0.16),
            transparent 28%
        ),
        var(--color-surface);
    box-shadow: var(--shadow-dark);
}

.faq-summary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 34px 38px;
    cursor: pointer;
    list-style: none;
    transition:
        background var(--transition-normal),
        border-color var(--transition-normal);
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-summary::marker {
    content: "";
}

.faq-summary:hover {
    background: rgba(255, 255, 255, 0.025);
}

.faq-summary-copy {
    display: block;
    min-width: 0;
}

.faq-summary-copy .section-label {
    display: block;
    margin-bottom: 10px;
}

.faq-summary-title {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 4.5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
    text-transform: uppercase;
}

.faq-summary-description {
    display: block;
    max-width: 680px;
    margin-top: 13px;
    color: var(--color-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}

.faq-summary-action {
    display: inline-flex;
    min-width: 190px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 16px;
    border: 1px solid rgba(255, 32, 32, 0.42);
    border-radius: var(--radius-small);
    background: rgba(186, 0, 0, 0.1);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.faq-close-label {
    display: none;
}

.faq-toggle-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1;
    transition: transform var(--transition-normal);
}

.faq-disclosure[open] .faq-open-label {
    display: none;
}

.faq-disclosure[open] .faq-close-label {
    display: inline;
}

.faq-disclosure[open] .faq-toggle-icon {
    transform: rotate(45deg);
}

.faq-expanded-content {
    padding: 34px 38px 38px;
    border-top: 1px solid var(--color-border);
}

.faq-wide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.faq-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-medium);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 55%
        ),
        rgba(0, 0, 0, 0.18);
}

.faq-card-number {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 32, 32, 0.35);
    border-radius: 50%;
    color: var(--color-primary-bright);
    font-family: var(--font-heading);
    font-size: 0.67rem;
}

.faq-card > div {
    min-width: 0;
}

.faq-card h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.faq-card p {
    margin: 8px 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.faq-contact-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 18px;
    padding: 25px;
    border: 1px solid rgba(255, 32, 32, 0.34);
    border-radius: var(--radius-medium);
    background:
        linear-gradient(
            145deg,
            rgba(186, 0, 0, 0.12),
            transparent 64%
        ),
        rgba(0, 0, 0, 0.2);
}

.faq-contact-cta > div {
    min-width: 0;
}

.faq-contact-cta h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.faq-contact-cta p:last-child {
    margin: 9px 0 0;
    color: var(--color-muted);
    line-height: 1.6;
}

.faq-contact-cta .button {
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .faq-wide-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-contact-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .faq-contact-cta .button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .faq-section {
        padding: 38px 0;
    }

    .faq-summary {
        align-items: stretch;
        flex-direction: column;
        gap: 22px;
        padding: 25px 22px;
    }

    .faq-summary-title {
        font-size: clamp(2rem, 10vw, 2.8rem);
        line-height: 1;
    }

    .faq-summary-description {
        font-size: 0.89rem;
    }

    .faq-summary-action {
        width: 100%;
        min-width: 0;
    }

    .faq-expanded-content {
        padding: 20px;
    }

    .faq-card {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 13px;
        padding: 19px 16px;
    }

    .faq-card-number {
        width: 34px;
        height: 34px;
        font-size: 0.62rem;
    }

    .faq-card h3 {
        font-size: 0.9rem;
    }

    .faq-card p {
        font-size: 0.85rem;
    }
}

/* --------------------------------------------------
   Compact homepage reservation
-------------------------------------------------- */

.booking-section {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(186, 0, 0, 0.12),
            transparent 28%
        ),
        var(--color-background);
}

.booking-compact-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    align-items: center;
    gap: 56px;
}

.booking-compact-copy,
.booking-compact-card {
    min-width: 0;
}

.booking-compact-card {
    padding: 32px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary-bright);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            145deg,
            rgba(186, 0, 0, 0.11),
            transparent 48%
        ),
        var(--color-surface);
    box-shadow: var(--shadow-dark);
}

.booking-compact-label {
    margin: 0 0 10px;
    color: var(--color-primary-bright);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.booking-compact-card h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.08;
    text-transform: uppercase;
}

.booking-compact-card > p:not(.booking-compact-label) {
    margin: 16px 0 24px;
    color: var(--color-muted);
    line-height: 1.65;
}

.booking-compact-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 20px;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.booking-compact-facts span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.booking-compact-facts span::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary-bright);
    content: "";
}

@media (max-width: 850px) {
    .booking-compact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
    }

    .booking-compact-card {
        max-width: 680px;
    }
}

@media (max-width: 600px) {
    .booking-compact-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 24px 20px;
    }

    .booking-compact-card h3 {
        font-size: 1.55rem;
    }

    .booking-compact-facts {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* --------------------------------------------------
   Location
-------------------------------------------------- */

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 44px;
}

.location-card {
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.location-card h3 {
    margin-top: 0;
    line-height: 1.25;
    text-transform: uppercase;
}

.location-card p,
.location-card address {
    color: var(--color-muted);
}

.location-card a {
    color: var(--color-primary-bright);
    font-weight: 800;
}

.location-card a:hover {
    text-decoration: underline;
}

.location-card address a {
    display: inline-flex;
    overflow-wrap: anywhere;
}

.location-map-button {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 32, 32, 0.4);
    border-radius: var(--radius-small);
    background: rgba(186, 0, 0, 0.08);
    text-decoration: none;
}

.location-map-button:hover,
.location-map-button:focus-visible {
    border-color: var(--color-primary-bright);
    background: rgba(186, 0, 0, 0.16);
    text-decoration: none;
}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */

.site-footer {
    padding: 70px 0 26px;
    border-top: 1px solid var(--color-border);
    background: #030303;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
}

.footer-grid h2 {
    margin: 0 0 14px;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-grid p,
.footer-grid address,
.footer-grid a {
    display: block;
    margin: 0 0 8px;
    color: var(--color-muted);
}

.footer-grid a:hover {
    color: var(--color-primary-bright);
}

.footer-logo {
    display: inline-flex;
    margin-bottom: 16px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.9rem;
}

.footer-bottom p {
    margin: 0;
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.legal-links a:hover {
    color: var(--color-primary-bright);
}

/* --------------------------------------------------
   Reveal animation
-------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 650ms ease,
        transform 650ms ease;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------
   Fix package-card hover after reveal animation
-------------------------------------------------- */

.package-card[data-reveal].is-visible,
.package-card.featured[data-reveal].is-visible {
    transform: translateY(0);
}

.package-card[data-reveal].is-visible:hover,
.package-card.featured[data-reveal].is-visible:hover {
    border-color: rgba(255, 32, 32, 0.7);
    transform: translateY(-8px);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.55),
        0 16px 40px rgba(186, 0, 0, 0.2);
}

.package-card.premium[data-reveal].is-visible:hover {
    border-color: var(--color-gold-bright);
    transform: translateY(-8px);
    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.58),
        0 18px 46px rgba(185, 121, 29, 0.23),
        0 10px 35px rgba(186, 0, 0, 0.15);
}

/* --------------------------------------------------
   Responsive
-------------------------------------------------- */

@media (max-width: 1000px) {
    .reason-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .package-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
    }

    .package-card.featured,
    .package-card.featured:hover {
        transform: none;
    }
}

@media (max-width: 850px) {
    :root {
        --header-height: 70px;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .main-navigation {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 26px 16px;
        background: rgba(7, 7, 7, 0.99);
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation > a {
        padding: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 1.08rem;
    }

    .main-navigation > a:not(.nav-booking-button)::after {
        display: none;
    }

    .main-navigation .nav-booking-button {
        margin-top: 12px;
        text-align: center;
    }

    .steps-grid,
    .intro-grid,
    .bring-own-grid,
    .safety-grid,
    .booking-grid,
    .location-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .intro-grid,
    .bring-own-grid,
    .safety-grid,
    .booking-grid {
        gap: 38px;
    }

    .steps-grid {
        max-width: 700px;
    }

    .hero-decoration {
        right: -20%;
        width: 70vw;
        opacity: 0.45;
    }
}

@media (max-width: 600px) {
    .section {
        padding: 76px 0;
    }

    .hero {
        min-height: auto;
        padding: 95px 0;
    }

    .hero h1 {
        font-size: clamp(3.1rem, 15vw, 5rem);
        letter-spacing: -0.018em;
        line-height: 1;
    }

    .section-title {
        font-size: clamp(2.2rem, 11vw, 3.6rem);
        line-height: 1.05;
    }

    .hero-actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero-note {
        flex-direction: column;
        gap: 8px;
    }

    .reason-grid,
    .intro-stat {
        grid-template-columns: 1fr;
    }

    .card,
    .booking-placeholder,
    .safety-panel {
        padding: 26px;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

/* --------------------------------------------------
   Reduced motion
-------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------
   Experience section
-------------------------------------------------- */

.experience-section {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(186, 0, 0, 0.12),
            transparent 28%
        ),
        var(--color-background);
}

.experience-top {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    align-items: stretch;
    gap: 56px;
}

.experience-copy {
    align-self: center;
}

.experience-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.experience-highlights span {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--color-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.experience-highlights span::before {
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--color-primary-bright);
    content: "";
}

.tiktok-preview {
    position: relative;
    display: flex;
    min-height: 430px;
    align-items: flex-end;
    overflow: hidden;
    border: 1px solid rgba(255, 32, 32, 0.35);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            155deg,
            rgba(255, 32, 32, 0.24),
            transparent 42%
        ),
        radial-gradient(
            circle at 75% 25%,
            rgba(255, 32, 32, 0.25),
            transparent 26%
        ),
        #101010;
    box-shadow: var(--shadow-red);
    isolation: isolate;
}

.tiktok-preview::before {
    position: absolute;
    z-index: -1;
    top: -45px;
    right: -25px;
    width: 230px;
    height: 230px;
    border: 2px solid rgba(255, 32, 32, 0.24);
    content: "";
    transform: rotate(24deg);
}

.tiktok-preview::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 20px,
            rgba(255, 255, 255, 0.018) 20px,
            rgba(255, 255, 255, 0.018) 21px
        );
    content: "";
}

.tiktok-preview-content {
    width: 100%;
    padding: 38px;
}

.tiktok-play-link {
    display: flex;
    width: fit-content;
    margin: 0 auto 26px;
    border-radius: 50%;
}

.tiktok-play-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 1.25rem;
    box-shadow: 0 16px 40px rgba(186, 0, 0, 0.35);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.tiktok-play-link:hover .tiktok-play-icon,
.tiktok-play-link:focus-visible .tiktok-play-icon {
    background: var(--color-primary-bright);
    transform: scale(1.08);
    box-shadow: 0 18px 48px rgba(186, 0, 0, 0.5);
}

.tiktok-play-link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 5px;
}

.tiktok-eyebrow {
    margin: 0 0 8px;
    color: var(--color-primary-bright);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tiktok-preview h3 {
    max-width: 420px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.02;
    text-transform: uppercase;
}

.tiktok-preview p:not(.tiktok-eyebrow) {
    max-width: 470px;
    margin: 18px 0 26px;
    color: var(--color-muted);
}

.experience-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 64px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.experience-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 32px;
    border-right: 1px solid var(--color-border);
}

.experience-step:last-child {
    border-right: 0;
}

.experience-step-number {
    color: var(--color-primary-bright);
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
}

.experience-step h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    line-height: 1.25;
    text-transform: uppercase;
}

.experience-step p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.94rem;
}

@media (max-width: 900px) {
    .experience-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tiktok-preview {
        min-height: 380px;
    }

    .experience-steps {
        grid-template-columns: 1fr;
    }

    .experience-step {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .experience-step:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 600px) {
    .tiktok-preview {
        min-height: 350px;
    }

    .tiktok-preview-content {
        padding: 28px;
    }

    .tiktok-preview h3 {
        font-size: 2rem;
    }

    .tiktok-preview .button {
        width: 100%;
    }

    .experience-step {
        padding: 26px 0;
    }
}

/* --------------------------------------------------
   Reasons section
-------------------------------------------------- */

.reasons-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.012),
            transparent 28%
        ),
        #0a0a0a;
}

.reasons-section::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 40px));
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 32, 32, 0.55),
            transparent
        );
    content: "";
    transform: translateX(-50%);
}

.reasons-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(280px, 0.65fr);
    align-items: end;
    gap: 64px;
    margin-bottom: 64px;
}

.reasons-header .section-title {
    margin-bottom: 0;
}

.reasons-intro {
    max-width: 500px;
    margin: 0 0 8px;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.reason-item {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 28px;
    min-height: 245px;
    padding: 42px;
    overflow: hidden;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.012);
    transition:
        background 220ms ease,
        border-color 220ms ease;
}

.reason-item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-primary-bright)
        );
    content: "";
    transition: width 260ms ease;
}

.reason-item::after {
    position: absolute;
    right: -45px;
    bottom: -75px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 32, 32, 0.12);
    border-radius: 50%;
    content: "";
    transition:
        border-color 220ms ease,
        transform 300ms ease;
}

.reason-item:hover {
    border-color: rgba(255, 32, 32, 0.3);
    background:
        linear-gradient(
            135deg,
            rgba(186, 0, 0, 0.1),
            rgba(255, 255, 255, 0.018)
        );
}

.reason-item:hover::before {
    width: 100%;
}

.reason-item:hover::after {
    border-color: rgba(255, 32, 32, 0.28);
    transform: scale(1.12);
}

.reason-number {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.15);
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 4.1rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.9;
    transition: color 220ms ease;
}

.reason-item:hover .reason-number {
    color: var(--color-primary-bright);
}

.reason-content {
    position: relative;
    z-index: 1;
}

.reason-content h3 {
    margin: 0 0 14px;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: uppercase;
}

.reason-content p {
    max-width: 430px;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.96rem;
    line-height: 1.7;
}

.reasons-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 44px;
    padding: 28px 32px;
    border-left: 3px solid var(--color-primary-bright);
    background:
        linear-gradient(
            90deg,
            rgba(186, 0, 0, 0.11),
            rgba(255, 255, 255, 0.015)
        );
}

.reasons-footer p {
    max-width: 720px;
    margin: 0;
    color: var(--color-text);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.6;
}

.reasons-footer .button {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .reasons-header {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 44px;
    }

    .reasons-intro {
        max-width: 650px;
    }

    .reason-item {
        grid-template-columns: 68px minmax(0, 1fr);
        min-height: 220px;
        padding: 34px;
    }

    .reasons-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 650px) {
    .reasons-grid {
        grid-template-columns: 1fr;
    }

    .reason-item {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: auto;
        gap: 18px;
        padding: 30px 22px;
    }

    .reason-number {
        font-size: 2.6rem;
    }

    .reason-content h3 {
        font-size: 1.3rem;
    }

    .reasons-footer {
        padding: 26px 22px;
    }

    .reasons-footer .button {
        width: 100%;
    }
}

/* --------------------------------------------------
   Responsive hero background images
-------------------------------------------------- */

.hero {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    background-color: var(--color-background);
    background-image: url("../images/hero-desktop.webp");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
}

/*
 * Darkens the left side so the hero text remains readable.
 */
.hero::before {
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.84) 15%,
            rgba(0, 0, 0, 0.6) 32%,
            rgba(0, 0, 0, 0.2) 35%,
            transparent 82%

        );
}

/*
 * Adds a subtle top and bottom vignette.
 */
.hero::after {
    z-index: -1;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 55%,
            rgba(0, 0, 0, 0.3) 100%
        );
    filter: none;
}

/*
 * The generated image replaces the old geometric decoration.
 */
.hero-decoration {
    display: none;
}

.hero-content {
    max-width: min(650px, 50vw);
}

.hero h1 {
    max-width: 650px;
    font-size: clamp(3.5rem, 7vw, 6.8rem);
    text-shadow: 0 5px 30px rgba(0, 0, 0, 0.82);
}

.hero-description {
    max-width: 580px;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95);
}

/*
 * Portrait screens use the mobile-specific background.
 */
@media (max-width: 850px) and (orientation: portrait) {
    .hero {
        min-height: calc(100vh - var(--header-height));
        min-height: calc(100svh - var(--header-height));
        align-items: start;
        padding-top: 68px;
        padding-bottom: 56px;
        background-image: url("../images/hero-mobile.webp");
        background-position: center top;
    }

    .hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(0, 0, 0, 0.77) 22%,
                rgba(0, 0, 0, 0.5) 40%,
                rgba(0, 0, 0, 0.12) 62%,
                rgba(0, 0, 0, 0.08) 100%
            );
    }

    .hero::after {
        background:
            linear-gradient(
                180deg,
                transparent 58%,
                rgba(0, 0, 0, 0.72) 100%
            );
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero h1 {
        max-width: 600px;
        font-size: clamp(3.1rem, 14vw, 5.5rem);
        line-height: 0.98;
    }

    .hero-description {
        max-width: 560px;
        margin-top: 22px;
        font-size: 1rem;
        line-height: 1.55;
    }

    .hero-actions {
        margin-top: 26px;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .hero {
        padding-top: 52px;
        padding-bottom: 42px;
    }

    .hero-kicker {
        margin-bottom: 14px;
        font-size: 0.76rem;
        letter-spacing: 0.12em;
    }

    .hero-kicker::before {
        width: 26px;
    }

    .hero h1 {
        font-size: clamp(3rem, 14.5vw, 4.7rem);
        letter-spacing: -0.02em;
        line-height: 0.97;
    }

    .hero-description {
        max-width: 34rem;
        margin-top: 18px;
        font-size: 0.96rem;
    }

    .hero-actions {
        gap: 12px;
        margin-top: 22px;
    }

    .hero-note {
        display: none;
    }
}

/* --------------------------------------------------
   Bring Your Own section
-------------------------------------------------- */

.bring-own-section {
    position: relative;
    display: flex;
    min-height: 660px;
    align-items: center;
    overflow: hidden;
    background-color: #090909;
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.38) 40%,
            rgba(0, 0, 0, 0.14) 72%,
            rgba(0, 0, 0, 0.18) 100%
        ),
        url("../images/bring-your-own-desktop.webp");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
}

.bring-own-section::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.18) 0%,
            transparent 38%,
            rgba(0, 0, 0, 0.5) 100%
        );
    content: "";
}

.bring-own-section::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 32, 32, 0.55),
            transparent
        );
    content: "";
}

.bring-own-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.64fr);
    align-items: center;
    gap: 80px;
}

.bring-own-content {
    max-width: 660px;
}

.bring-own-description {
    max-width: 600px;
    margin: 24px 0 0;
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.75;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.92);
}

.bring-own-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.bring-own-features span {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    color: #e8e8e8;
    font-size: 0.84rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.bring-own-features span::before {
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--color-primary-bright);
    content: "";
}

.bring-own-panel {
    position: relative;
    padding: 38px;
    overflow: hidden;
    border: 1px solid rgba(255, 46, 46, 0.36);
    border-left: 4px solid var(--color-primary-bright);
    background:
        linear-gradient(
            145deg,
            rgba(24, 24, 24, 0.92),
            rgba(8, 8, 8, 0.96)
        );
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.58),
        0 16px 44px rgba(186, 0, 0, 0.16);
    backdrop-filter: blur(12px);
}

.bring-own-panel::before {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 32, 32, 0.16);
    border-radius: 50%;
    content: "";
}

.bring-own-panel-label {
    margin: 0 0 10px;
    color: var(--color-primary-bright);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bring-own-panel h3 {
    position: relative;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 2.8vw, 2.45rem);
    line-height: 1.08;
    text-transform: uppercase;
}

.bring-own-panel > p:not(.bring-own-panel-label) {
    position: relative;
    margin: 18px 0 0;
    color: var(--color-muted);
    line-height: 1.7;
}

.bring-own-rules {
    position: relative;
    display: grid;
    gap: 12px;
    margin: 26px 0 30px;
    padding: 0;
    list-style: none;
}

.bring-own-rules li {
    position: relative;
    padding-left: 24px;
    color: #e1e1e1;
    font-size: 0.93rem;
    line-height: 1.5;
}

.bring-own-rules li::before {
    position: absolute;
    top: 0.53em;
    left: 0;
    width: 9px;
    height: 2px;
    background: var(--color-primary-bright);
    content: "";
}

.bring-own-panel .button {
    position: relative;
}

@media (max-width: 900px) {
    .bring-own-section {
        min-height: auto;
        background-image:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.48) 0%,
                rgba(0, 0, 0, 0.38) 34%,
                rgba(0, 0, 0, 0.54) 68%,
                rgba(0, 0, 0, 0.86) 100%
            ),
            url("../images/bring-your-own-mobile.webp");
        background-position: center top;
    }

    .bring-own-layout {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .bring-own-content {
        max-width: 680px;
    }

    .bring-own-panel {
        max-width: 620px;
    }
}

@media (max-width: 600px) {
    .bring-own-section {
        padding-top: 86px;
        padding-bottom: 72px;
        background-position: center top;
    }

    .bring-own-layout {
        gap: 42px;
    }

    .bring-own-description {
        font-size: 0.98rem;
    }

    .bring-own-features {
        gap: 8px;
        margin-top: 24px;
    }

    .bring-own-features span {
        padding: 8px 11px;
        font-size: 0.78rem;
    }

    .bring-own-panel {
        padding: 28px 24px;
    }

    .bring-own-panel h3 {
        font-size: 1.7rem;
    }

    .bring-own-panel .button {
        width: 100%;
    }
}

/* --------------------------------------------------
   Mobile header and navigation repair
-------------------------------------------------- */

.site-header {
    isolation: isolate;
}

.menu-toggle-icon {
    position: relative;
    display: flex;
    width: 22px;
    height: 18px;
    flex-direction: column;
    justify-content: space-between;
}

.menu-toggle-icon span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
    transform-origin: center;
    transition:
        opacity 180ms ease,
        transform 220ms ease;
}

.menu-toggle[aria-expanded="true"]
.menu-toggle-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"]
.menu-toggle-icon span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"]
.menu-toggle-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 850px) {
    .site-header {
        z-index: 5000;
        background: #070707;
        backdrop-filter: none;
    }

    .header-inner {
        position: relative;
    }

    .menu-toggle {
        position: relative;
        z-index: 5002;
        display: inline-flex;
        padding: 0;
        background: #151515;
    }

    /*
     * The menu is positioned below the header and covers
     * the full remaining viewport.
     */
    .main-navigation {
        position: absolute;
        z-index: 5001;
        top: 100%;
        right: auto;
        bottom: auto;
        left: 50%;

        display: flex;
        width: 100vw;
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        overflow-y: auto;

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding:
            22px
            max(20px, calc((100vw - 720px) / 2))
            36px;

        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background:
            radial-gradient(
                circle at 85% 10%,
                rgba(186, 0, 0, 0.2),
                transparent 28%
            ),
            #070707;

        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translate(-50%, -12px);

        transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 220ms ease;
    }

    .main-navigation.is-open {
        display: flex;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .main-navigation > a {
        display: flex;
        min-height: 58px;
        align-items: center;
        padding: 15px 6px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.09);

        color: #f2f2f2;
        font-family: var(--font-heading);
        font-size: 1.15rem;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    .main-navigation > a:hover {
        color: var(--color-primary-bright);
        transform: none;
    }

    .main-navigation .nav-booking-button {
        min-height: 56px;
        justify-content: center;
        margin-top: 22px;
        padding: 14px 20px;
        border-bottom: 0;
        color: #ffffff;
    }
}

/* --------------------------------------------------
   Mobile hero typography and layout
-------------------------------------------------- */

@media (max-width: 600px) and (orientation: portrait) {
    .hero {
        min-height: calc(100vh - var(--header-height));
        min-height: calc(100svh - var(--header-height));

        align-items: start;

        padding-top: 38px;
        padding-bottom: 34px;

        background-position: center top;
    }

    .hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.74) 0%,
                rgba(0, 0, 0, 0.57) 30%,
                rgba(0, 0, 0, 0.27) 54%,
                rgba(0, 0, 0, 0.08) 73%,
                rgba(0, 0, 0, 0.3) 100%
            );
    }

    .hero::after {
        background:
            linear-gradient(
                180deg,
                transparent 66%,
                rgba(0, 0, 0, 0.42) 100%
            );
    }

    /*
     * Creates more comfortable space on the left and right
     * without changing the containers on the rest of the page.
     */
    .hero-content {
        width: 100%;
        max-width: 390px;
        margin-inline: auto;
    }

    .hero-kicker {
        display: flex;
        max-width: 100%;
        align-items: flex-start;
        gap: 8px;

        margin-bottom: 14px;

        font-size: 0.66rem;
        letter-spacing: 0.1em;
        line-height: 1.35;
    }

    .hero-kicker::before {
        width: 24px;
        height: 2px;
        flex: 0 0 24px;
        margin-top: 0.55em;
    }

    .hero h1 {
        max-width: 360px;

        font-size: clamp(2.65rem, 11.8vw, 3.4rem);
        letter-spacing: -0.03em;
        line-height: 0.95;

        text-wrap: initial;
    }

    .hero h1 span {
        margin-top: 3px;
    }

    .hero-description {
        max-width: 22rem;
        margin-top: 17px;

        font-size: 0.9rem;
        line-height: 1.55;

        text-wrap: pretty;
    }

    .hero-actions {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;

        margin-top: 22px;
    }

    .hero-actions .button {
        min-height: 48px;
        padding: 11px 16px;

        font-size: 0.78rem;
    }

    .hero-actions .button-primary {
        width: 100%;
    }

    /*
     * Keeps the secondary action visible without making it
     * look like another large primary button.
     */
    .hero-actions .button-secondary {
        width: auto;
        min-height: auto;
        align-self: center;

        padding: 7px 0 5px;

        border: 0;
        border-bottom: 2px solid rgba(255, 32, 32, 0.65);
        border-radius: 0;

        background: transparent;
        box-shadow: none;

        font-size: 0.75rem;
        letter-spacing: 0.07em;
    }

    .hero-actions .button-secondary:hover {
        border-color: var(--color-primary-bright);
        background: transparent;
        transform: translateY(-1px);
    }

    .hero-note {
        display: none;
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .hero-content {
        max-width: 340px;
    }

    .hero-kicker {
        font-size: 0.61rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 0.86rem;
    }
}

/* --------------------------------------------------
   Safety section layout repair
   Replaces the rigid split/sticky layout
-------------------------------------------------- */

.safety-section {
    overflow: hidden;
}

.safety-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}

.safety-content {
    position: static;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.safety-content .section-title {
    max-width: 900px;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    line-height: 1;
}

.safety-content .section-title .text-red {
    display: block;
}

.safety-description {
    max-width: 760px;
}

.safety-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 900px;
}

.safety-rules-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 36px;
}

.safety-rules-panel > h3 {
    max-width: 760px;
}

.safety-rules-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.safety-rules-list li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 15px;

    min-width: 0;
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-small);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 55%
        ),
        rgba(0, 0, 0, 0.2);
}

.safety-rules-list li > div {
    min-width: 0;
}

.safety-rules-list strong {
    overflow-wrap: anywhere;
}

.safety-rules-list p {
    overflow-wrap: anywhere;
}

.safety-rule-number {
    width: 40px;
    height: 40px;
}

.safety-notice {
    width: 100%;
    min-width: 0;
}

/* --------------------------------------------------
   Safety section responsive repair
-------------------------------------------------- */

@media (max-width: 800px) {
    .safety-layout {
        gap: 38px;
    }

    .safety-content .section-title {
        max-width: 100%;
        font-size: clamp(2.5rem, 9vw, 3.8rem);
    }

    .safety-facts {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
    }

    .safety-fact {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .safety-fact span {
        margin-top: 0;
        text-align: right;
    }

    .safety-rules-panel {
        padding: 28px;
    }

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

@media (max-width: 600px) {
    .safety-layout,
    .safety-content,
    .safety-rules-panel,
    .safety-rules-list,
    .safety-rules-list li {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .safety-content .section-title {
        font-size: clamp(2.15rem, 10vw, 3rem);
        line-height: 0.98;
        letter-spacing: -0.025em;
    }

    .safety-description {
        font-size: 0.96rem;
        line-height: 1.65;
    }

    .safety-facts {
        margin-top: 26px;
    }

    .safety-fact {
        padding: 15px 16px;
    }

    .safety-fact strong {
        font-size: 1rem;
    }

    .safety-fact span {
        max-width: 160px;
        font-size: 0.75rem;
    }

    .safety-rules-panel {
        padding: 25px 20px;
        border-left-width: 3px;
    }

    .safety-rules-panel > h3 {
        font-size: 1.65rem;
        line-height: 1.05;
    }

    .safety-rules-list {
        gap: 10px;
        margin-top: 24px;
    }

    .safety-rules-list li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 13px;
        padding: 18px 15px;
    }

    .safety-rule-number {
        width: 36px;
        height: 36px;
        font-size: 0.67rem;
    }

    .safety-rules-list strong {
        font-size: 0.9rem;
        line-height: 1.35;
    }

    .safety-rules-list p {
        margin-top: 6px;
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .safety-notice {
        align-items: flex-start;
        gap: 14px;
        padding: 20px 17px;
    }

    .safety-notice p {
        font-size: 0.84rem;
        line-height: 1.55;
    }
}

/* --------------------------------------------------
   Dedicated booking page
-------------------------------------------------- */

.booking-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(186, 0, 0, 0.16),
            transparent 30%
        ),
        var(--color-background);
}

.booking-page-header {
    border-bottom: 1px solid var(--color-border);
    background: rgba(7, 7, 7, 0.96);
}

.booking-page-header-inner {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.booking-back-link {
    color: var(--color-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.booking-back-link:hover {
    color: var(--color-primary-bright);
}

.booking-page-main {
    min-height: calc(100vh - var(--header-height));
}

.booking-page-section {
    padding: 72px 0 96px;
}

.booking-page-heading {
    max-width: 820px;
}

.booking-page-heading h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.7rem, 7vw, 5.6rem);
    letter-spacing: -0.025em;
    line-height: 0.98;
    text-transform: uppercase;
}

.booking-page-heading h1 span {
    display: block;
    color: var(--color-primary-bright);
}

.booking-page-heading > p:last-child {
    max-width: 690px;
    margin: 24px 0 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.booking-page-layout {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.7fr)
        minmax(0, 1.3fr);
    align-items: start;
    gap: 28px;
    margin-top: 48px;
}

.booking-selected-package,
.booking-options-form,
.booking-package-choice {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 48%
        ),
        var(--color-surface);
    box-shadow: var(--shadow-dark);
}

.booking-selected-package {
    padding: 28px;
}

.booking-selected-label {
    margin: 0 0 9px;
    color: var(--color-success);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.booking-selected-package h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.08;
    text-transform: uppercase;
}

.booking-selected-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.booking-selected-meta span {
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.booking-selected-price {
    margin: 24px 0 0;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.booking-selected-price small {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.booking-change-package {
    display: inline-flex;
    margin-top: 26px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--color-primary-bright);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-options-form {
    padding: 30px;
}

.booking-form-section {
    min-width: 0;
    margin: 0;
    padding: 0 0 28px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

.booking-form-section + .booking-form-section {
    margin-top: 32px;
    padding-top: 0;
}

.booking-form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 22px;
    padding: 0;
}

.booking-form-section-heading > span:first-child {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 32, 32, 0.36);
    border-radius: 50%;
    color: var(--color-primary-bright);
    font-family: var(--font-heading);
    font-size: 0.66rem;
}

.booking-form-section-heading h2,
.booking-form-section-heading strong {
    display: block;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.25;
    text-transform: uppercase;
}

.booking-form-section-heading p,
.booking-form-section-heading small {
    display: block;
    margin: 5px 0 0;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.5;
}

.booking-participant-control {
    display: grid;
    grid-template-columns: 52px minmax(80px, 130px) 52px;
    width: max-content;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #0d0d0d;
}

.booking-participant-control button {
    width: 52px;
    height: 50px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 900;
}

.booking-participant-control button:hover:not(:disabled) {
    background: rgba(255, 32, 32, 0.14);
    color: var(--color-primary-bright);
}

.booking-participant-control button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.booking-participant-control output {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    border-inline: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 1.25rem;
}

.booking-radio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.booking-radio-option {
    position: relative;
    display: flex;
    min-width: 0;
    cursor: pointer;
}

.booking-radio-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.booking-radio-option span {
    display: flex;
    width: 100%;
    min-height: 88px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.5;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
}

.booking-radio-option input:checked + span {
    border-color: var(--color-primary-bright);
    background: rgba(186, 0, 0, 0.12);
    color: var(--color-text);
}

.booking-radio-option input:focus-visible + span {
    outline: 3px solid var(--color-primary-bright);
    outline-offset: 3px;
}

.booking-own-item-details {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 32, 32, 0.25);
    border-radius: var(--radius-small);
    background: rgba(186, 0, 0, 0.06);
}

.booking-own-item-details label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-own-item-details textarea {
    width: 100%;
    resize: vertical;
    padding: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #0b0b0b;
    color: var(--color-text);
}

.booking-own-item-details p {
    margin: 9px 0 0;
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.booking-own-item-details[hidden],
.booking-options-result[hidden] {
    display: none !important;
}

.booking-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 28px;
}

.booking-form-actions p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.booking-options-result {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(73, 201, 123, 0.5);
    border-radius: var(--radius-small);
    background: rgba(73, 201, 123, 0.08);
}

.booking-options-result > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-success);
    color: #07130c;
    font-weight: 900;
}

.booking-options-result strong {
    display: block;
    text-transform: uppercase;
}

.booking-options-result p {
    margin: 4px 0 0;
    color: var(--color-text);
    font-size: 0.86rem;
}

.booking-options-result small {
    display: block;
    margin-top: 5px;
    color: var(--color-muted);
    line-height: 1.45;
}

.booking-package-choice {
    margin-top: 44px;
    padding: 30px;
}

.booking-package-choice h2 {
    margin: 0;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.booking-package-choice > div:first-child > p {
    margin: 8px 0 0;
    color: var(--color-muted);
}

.booking-package-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.booking-package-choice-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.02);
    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.booking-package-choice-card:hover {
    border-color: var(--color-primary-bright);
    transform: translateY(-3px);
}

.booking-package-choice-card span {
    color: var(--color-primary-bright);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-package-choice-card strong {
    margin-top: 7px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    text-transform: uppercase;
}

.booking-package-choice-card small {
    margin-top: 8px;
    color: var(--color-muted);
}

@media (max-width: 850px) {
    .booking-page-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .booking-selected-package {
        max-width: 680px;
    }

    .booking-package-choice-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .booking-page-header-inner {
        min-height: 68px;
    }

    .booking-page-header .logo {
        font-size: 1.15rem;
    }

    .booking-back-link {
        font-size: 0.73rem;
    }

    .booking-page-section {
        padding: 52px 0 72px;
    }

    .booking-page-heading h1 {
        font-size: clamp(2.45rem, 12vw, 3.5rem);
    }

    .booking-page-layout {
        margin-top: 34px;
    }

    .booking-selected-package,
    .booking-options-form,
    .booking-package-choice {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 22px 18px;
    }

    .booking-radio-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .booking-radio-option span {
        min-height: 72px;
    }

    .booking-participant-control {
        width: 100%;
        grid-template-columns: 52px minmax(0, 1fr) 52px;
    }

    .booking-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-form-actions .button {
        width: 100%;
    }

    .booking-form-actions p {
        text-align: center;
    }
}


/* --------------------------------------------------
   Dark native date controls
-------------------------------------------------- */

input[type="date"],
input[type="datetime-local"] {
    color-scheme: dark;
}

@supports selector(input::-webkit-calendar-picker-indicator) {
    input[type="date"],
    input[type="datetime-local"] {
        padding-right: 46px;
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 18px 18px;
    }

    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        width: 24px;
        height: 24px;
        margin-right: -34px;
        cursor: pointer;
        opacity: 0;
    }
}

/* --------------------------------------------------
   Corrected section imagery and mobile-first hero composition
-------------------------------------------------- */

.hero-experience-button {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(8, 8, 8, 0.9);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.hero-experience-button:hover {
    border-color: var(--color-primary-bright);
    background: rgba(18, 18, 18, 0.98);
}

#packages,
.reasons-section,
.safety-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#packages {
    background-color: #080808;
}

#packages::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.7) 34%,
            rgba(0, 0, 0, 0.4) 67%,
            rgba(0, 0, 0, 0.62) 100%
        ),
        url("../images/packages-desktop.webp");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
}

#packages::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 30%, rgba(0,0,0,.42));
    content: "";
}

#packages .package-card {
    background:
        linear-gradient(145deg, rgba(24,24,24,.92), rgba(8,8,8,.97));
    backdrop-filter: blur(9px);
}

.reasons-section {
    background-color: #080808;
}

.reasons-section::after {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 38%,
            rgba(0, 0, 0, 0.34) 72%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        url("../images/occasions-desktop.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
}

.reason-item,
.reasons-footer {
    background-color: rgba(9, 9, 9, 0.72);
    backdrop-filter: blur(8px);
}

.safety-section {
    background-color: #080808;
}

.safety-section::after {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.76) 36%,
            rgba(0, 0, 0, 0.34) 72%,
            rgba(0, 0, 0, 0.56) 100%
        ),
        url("../images/safety-desktop.webp");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
}

.safety-rules-panel,
.safety-fact,
.safety-notice {
    background-color: rgba(12, 12, 12, 0.78);
    backdrop-filter: blur(9px);
}

@media (max-width: 900px) {
    #packages::before {
        background-image:
            linear-gradient(
                180deg,
                rgba(0,0,0,.68) 0%,
                rgba(0,0,0,.48) 28%,
                rgba(0,0,0,.64) 66%,
                rgba(0,0,0,.9) 100%
            ),
            url("../images/packages-mobile.webp");
        background-position: center top;
    }

    .reasons-section::after {
        background-image:
            linear-gradient(
                180deg,
                rgba(0,0,0,.66) 0%,
                rgba(0,0,0,.47) 32%,
                rgba(0,0,0,.67) 70%,
                rgba(0,0,0,.92) 100%
            ),
            url("../images/occasions-mobile.webp");
        background-position: center top;
    }

    .safety-section::after {
        background-image:
            linear-gradient(
                180deg,
                rgba(0,0,0,.68) 0%,
                rgba(0,0,0,.48) 30%,
                rgba(0,0,0,.7) 70%,
                rgba(0,0,0,.92) 100%
            ),
            url("../images/safety-mobile.webp");
        background-position: center top;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .hero {
        min-height: calc(100svh - var(--header-height));
        align-items: start;
        padding-top: clamp(48px, 7svh, 64px);
        padding-bottom: 24px;
        background-position: center 42%;
    }

    .hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.92) 0%,
                rgba(0,0,0,.8) 24%,
                rgba(0,0,0,.55) 48%,
                rgba(0,0,0,.14) 69%,
                rgba(0,0,0,.42) 100%
            );
    }

    .hero-content {
        max-width: 390px;
    }

    .hero h1 {
        max-width: 350px;
        font-size: clamp(2.55rem, 11.4vw, 3.35rem);
    }

    .hero-description {
        max-width: 22rem;
        margin-top: 16px;
        font-size: 0.89rem;
        line-height: 1.5;
    }

    .hero-actions {
        gap: 10px;
        margin-top: 20px;
    }

    .hero-actions .button,
    .hero-actions .hero-experience-button {
        width: 100%;
        min-height: 48px;
        align-self: stretch;
        padding: 11px 16px;
        border: 1px solid transparent;
        border-radius: var(--radius-small);
        font-size: 0.76rem;
    }

    .hero-actions .hero-experience-button {
        border-color: rgba(255,255,255,.18);
        background: rgba(8,8,8,.92);
        box-shadow: 0 12px 30px rgba(0,0,0,.28);
    }

    .hero-actions .hero-experience-button:hover {
        border-color: var(--color-primary-bright);
        background: rgba(18,18,18,.98);
        transform: translateY(-2px);
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .hero {
        padding-top: 42px;
    }

    .hero h1 {
        font-size: 2.45rem;
    }

    .hero-description {
        font-size: 0.84rem;
    }
}


/* --------------------------------------------------
   Patch update: experience imagery, stronger mobile section imagery,
   and improved mobile hero composition
-------------------------------------------------- */

.experience-section {
    position: relative;
    isolation: isolate;
}

.tiktok-preview {
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.28) 24%,
            rgba(0, 0, 0, 0.56) 56%,
            rgba(0, 0, 0, 0.88) 100%
        ),
        linear-gradient(
            120deg,
            rgba(0, 0, 0, 0.84) 0%,
            rgba(0, 0, 0, 0.54) 34%,
            rgba(0, 0, 0, 0.18) 72%,
            rgba(0, 0, 0, 0.48) 100%
        ),
        url("../images/experience-desktop.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tiktok-preview::before {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -60px;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(255, 32, 32, 0.18);
    transform: translateX(-50%) rotate(18deg);
}

.tiktok-preview-content {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
}

.tiktok-play-link {
    margin: 0 auto 24px;
}

.tiktok-preview p:not(.tiktok-eyebrow) {
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 900px) {
    .tiktok-preview {
        background-image:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.16) 0%,
                rgba(0, 0, 0, 0.24) 22%,
                rgba(0, 0, 0, 0.54) 56%,
                rgba(0, 0, 0, 0.9) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.52) 0%,
                rgba(0, 0, 0, 0.18) 32%,
                rgba(0, 0, 0, 0.72) 100%
            ),
            url("../images/experience-mobile.webp");
        background-position: center top;
    }

    #packages::before,
    .reasons-section::after,
    .safety-section::after {
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    .hero {
        min-height: calc(100svh - var(--header-height));
        align-items: start;
        padding-top: clamp(72px, 11svh, 112px);
        padding-bottom: 24px;
        background-position: center 38%;
    }

    .hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.94) 0%,
                rgba(0, 0, 0, 0.82) 22%,
                rgba(0, 0, 0, 0.56) 45%,
                rgba(0, 0, 0, 0.24) 72%,
                rgba(0, 0, 0, 0.42) 100%
            );
    }

    .hero-content {
        width: min(100%, 370px);
        max-width: 370px;
        margin-inline: auto;
        padding-inline: clamp(6px, 3.6vw, 16px);
    }

    .hero-kicker {
        margin-bottom: 16px;
        font-size: 0.74rem;
        letter-spacing: 0.12em;
    }

    .hero-kicker::before {
        width: 28px;
    }

    .hero h1 {
        max-width: 310px;
        font-size: clamp(2.85rem, 13vw, 4.2rem);
        line-height: 0.95;
        text-wrap: unset;
    }

    .hero-description {
        max-width: 310px;
        margin-top: 16px;
        font-size: 0.9rem;
        line-height: 1.52;
    }

    .hero-actions {
        width: 100%;
        margin-top: 18px;
        gap: 10px;
    }

    .hero-actions .button,
    .hero-actions .hero-experience-button {
        width: 100%;
        min-height: 50px;
    }

    .hero-note {
        display: flex;
        max-width: 320px;
        margin-top: 18px;
        gap: 10px 14px;
        font-size: 0.84rem;
    }

    .hero-note span {
        width: auto;
    }
}

@media (max-width: 430px) and (orientation: portrait) {
    .hero {
        padding-top: clamp(80px, 12svh, 118px);
        background-position: center 35%;
    }

    .hero-content {
        width: min(100%, 348px);
        max-width: 348px;
        padding-inline: 8px;
    }

    .hero h1 {
        max-width: 286px;
        font-size: clamp(2.65rem, 12.5vw, 3.65rem);
    }

    .hero-description {
        max-width: 290px;
        font-size: 0.88rem;
    }

    .hero-note {
        gap: 8px 12px;
        font-size: 0.8rem;
    }
}


/* --------------------------------------------------
   Patch: desktop occasions intro alignment
-------------------------------------------------- */

@media (min-width: 901px) {
    .reasons-header {
        grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
        align-items: center;
        gap: clamp(40px, 5vw, 72px);
    }

    .reasons-intro {
        position: relative;
        align-self: center;
        max-width: 430px;
        margin: 34px 0 0;
        padding: 20px 24px 20px 28px;
        border-left: 3px solid var(--color-primary-bright);
        background:
            linear-gradient(
                90deg,
                rgba(186, 0, 0, 0.16),
                rgba(0, 0, 0, 0.18) 72%,
                transparent
            );
        color: rgba(255, 255, 255, 0.82);
        line-height: 1.72;
        backdrop-filter: blur(6px);
    }
}