/* ================================================================
   DZM SKYDIVE MOLDAVIA — style.css  v2
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800;1,900&family=Barlow:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

/* ================================================================
   CSS CUSTOM PROPERTIES
   FIX #7 — ONE variable controls ALL button + input field angles.
   Change --skew and EVERY skewed element updates automatically.
   Border always matches shape: transform skewX() deforms element
   AND its CSS border as a single unified object.
   ================================================================ */
:root {
    --teal: #00E8C6;
    --teal-dark: #00C8AA;
    --black: #0a0a0a;
    --white: #ffffff;
    --gray-light: 75px;
    --text-dark: #1a1a1a;
    --text-gray: #555555;
    --nav-height: 75px;

    /* ┌─────────────────────────────────────────────────────────┐
     │  EDIT THIS ONE VALUE to change ALL skews at once:       │
     │  · nav-book button  · .btn buttons  · form inputs       │
     │  · package cards    · addon items   · summary options   │
     │  · height picker    · footer buttons · gift button      │
     │  Border angle = block angle automatically. Always.      │
     └─────────────────────────────────────────────────────────┘ */
    --skew: -36deg;
    --booking-skew: 0deg;  /* 0 = no skew on booking form elements */
    /* EDIT: change to e.g. -8deg to add skew back */  /* EDIT: one value controls ALL booking form elements */

    /* for transform:skewX elements that have child counter-skew */
    --btn-slant: 36px;

    /* EDIT: slant for ALL .btn buttons — independent of booking form */
    --slant: 29px;

    /* alias kept for nav-book, footer-btn, popup-close */
    /* Instructor card parallelogram — px value means it NEVER
     changes with screen width (FIX #3) */
    --instr-skew: 150px;

    /* EDIT: card parallelogram cut in px — constant angle on all screens */
    --banner-skew: 76px;

    /* Global fluid padding — scales across all screen sizes
     14-inch laptop: ~82px | 32-inch monitor: 160px (FIX GLOBAL) */
    --px: clamp(20px, 6vw, 160px);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Barlow', sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
    background: #fff;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

section,
footer {
    scroll-margin-top: calc(var(--nav-height) + 20px);
}

.section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.0;
    font-size: clamp(2.4rem, 4.5vw, 4.4rem);
}

/* ── SHARED BUTTONS — FIX #7 ────────────────────────────────────
   .btn and all action buttons use clip-path for parallelogram shape.
   text stays horizontal because clip-path only cuts the visual, not the content.
   ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 1.1rem;
    padding: 14px 60px;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    clip-path: polygon(var(--btn-slant) 0%, 100% 0%, calc(100% - var(--btn-slant)) 100%, 0% 100%);
    transition: background .2s ease;
}

.btn-teal {
    background: var(--teal);
    color: var(--black);
}

.btn-teal:hover {
    background: var(--teal-dark);
}

.btn-dark {
    background: var(--black);
    color: var(--white);
}

.btn-dark:hover {
    background: #333;
}

/* ── SECTION LABEL TAGS ─────────────────────────────────────── */
.rates-tag,
.about-label,
.section-tag,
.aff-label,

.loc-label,
.social-label,
.faq-label {
    display: inline-block;
    background: var(--teal);
    color: var(--black);
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 1.5rem;
    padding: 5px 30px;
    clip-path: polygon(29px 0%, 100% 0%, calc(100% - 29px) 100%, 0% 100%);
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.rates-tag-wrap {
    display: block;
    text-align: right;
}

.section-tag-wrap {
    display: block;
    text-align: right;
}

.aff-label-wrap {
    display: block;
    text-align: right;
    margin-top: 10px;
}

.loc-label-wrap {
    display: block;
    text-align: right;
    margin-top: 10px;
}

.social-label-wrap {
    display: block;
    text-align: right;
}

.faq-label-wrap {
    display: block;
    text-align: right;
    margin-top: 10px;
}

.about-label-wrap {
    display: block;
    text-align: left;
    margin-bottom: 1px;
}

/* ── ANIMATIONS ─────────────────────────────────────────────── */
.anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
}

.anim.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================
   NAV
   ================================================================ */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 44px;
    background: rgba(10,28,30,.96);
    backdrop-filter: blur(12px);
    transition: background .5s, backdrop-filter .5s, box-shadow .5s;
    overflow: visible;
    overflow: visible;  /* FIX 6: ensure gift button not clipped */
}

nav.scrolled {
    background: rgba(10,28,30,.42);
    backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: 0 4px 40px rgba(0,0,0,.25);
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo-img {
    height: 44px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-links a {
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    color: var(--white);
    transition: color .2s;
}

.nav-links a:hover {
    color: var(--teal);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-shrink: 0;  /* FIX 6: never shrink — gift button always visible */
}

.nav-book {
    background: var(--teal);
    color: var(--black);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 11px 44px;
    white-space: nowrap;
    display: inline-block;
    clip-path: polygon(var(--slant) 0%, 100% 0%, calc(100% - var(--slant)) 100%, 0% 100%);
    transition: background .2s;
}

.nav-book:hover {
    background: var(--teal-dark);
}

.nav-gift {
    display: none; /* removed from nav per design */
    /* inline-flex;*/
    align-items: center;
}

.nav-gift-i {
    display: flex;
    align-items: center;
    padding: 10px 38px;
    border: 1.5px solid rgba(255,255,255,.6);
    background: transparent;
    transform: skewX(var(--skew));
    transition: background .2s, border-color .2s;
}

.nav-gift:hover .nav-gift-i {
    background: rgba(255,255,255,.1);
    border-color: #fff;
}

.nav-gift-t {
    transform: skewX(calc(-1 * var(--skew)));
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--white);
}

.lang-dropdown {
    position: relative;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

.lang-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
}

.lang-flag-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    line-height: 1;
    border: 1.5px solid rgba(255,255,255,.2);
}

.lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: rgba(8,24,26,.97);
    backdrop-filter: blur(14px);
    min-width: 148px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
    z-index: 1001;
}

.lang-dropdown.open .lang-menu {
    display: block;
}

.lang-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
}

.lang-opt:hover,
.lang-opt.active {
    background: rgba(0,232,198,.12);
    color: var(--teal);
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
}

.nav-hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--white);
    transition: all .3s;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(10,28,30,.98);
    z-index: 999;
    padding: 20px 40px;
    flex-direction: column;
    gap: 14px;
}

.mobile-nav.open {
    display: flex;
}

.mobile-nav a {
    color: var(--white);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    transition: color .2s;
}

.mobile-nav a:hover {
    color: var(--teal);
}

.mobile-lang-sep {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.15);
    margin: 8px 0 12px;
}

.mobile-lang {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 4px 0 8px;
}

.mobile-lang-btn {
    background: none;
    border: 1.5px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.5);
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    padding: 6px 18px;
    transition: all .2s;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.mobile-lang-btn.active {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(0,232,198,.08);
}

.mobile-gift-btn {
    display: flex;
    justify-content: center;
    margin: 4px 0 8px;
    text-decoration: none;
    border-bottom: none;
}

.mobile-gift-btn .nav-gift-i {
    padding: 11px 56px;
    border: 2px solid var(--teal);
    transform: skewX(var(--skew));
    background: transparent;
    transition: background .2s;
}

.mobile-gift-btn:hover .nav-gift-i {
    background: rgba(0,232,198,.12);
}

.mobile-gift-btn .nav-gift-t {
    transform: skewX(calc(-1 * var(--skew)));
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--teal);
}

/* ================================================================
   SITE-WIDE PATTERN IMAGES
   Each pattern is a unique <img> inside its own section.
   To swap an image: change the src attribute in index.html.
   To adjust position/size: edit the specific .pat-* class below.
   z-index: 200 = above all section content, below nav (1000).

   WHY fixed px not %: percentage offsets scale with viewport width.
   On a 32" monitor, left:-28% = -717px which hides a 420px image.
   Fixed px values keep patterns visible on every screen size.
   ================================================================ */
/* ================================================================
   PATTERN IMAGES
   Each pattern sits inside its section (position:absolute).
   Sections have overflow:visible so patterns bleed into neighbours.

   Responsive strategy:
     width: clamp(min, vw%, max)   → scales with viewport
     offset: calc(-1 * clamp(...)) → always partially off-screen
   On large screens: bigger, more visible.
   On small screens: smaller + recedes further off-screen → never covers content.
   ================================================================ */
.site-pat {
    position: absolute;
    pointer-events: none;
    z-index: 200;
    opacity: 1;
}

/* Sections that carry patterns */
.section-hero,

.section-about,

.section-jumpday,

.section-faq {
    position: relative;
    overflow: visible;
}

/* ── S1 → Main_pattern → bottom-left → overlaps DOWN into S2 ── */
.pat-s1-bl {
    bottom: -18%;
    left: calc(-1 * clamp(20px, 3vw, 60px));
    width: clamp(120px, 18vw, 320px);
}

/* ── S3 → Main_pattern copy → top-right → overlaps UP into S2 ── */
/* right:0 + no negative offset = image touches screen edge exactly */
.pat-s3-tr {
    top: -30%;
    right: -20px;

    /* just 20px off screen — barely cropped on right */
    left: auto;
    width: clamp(120px, 18vw, 320px);
}

/* ── S5 → Fly_day-02 → top-right → overlaps UP into S4 ──────── */
/* FIX: right:0 keeps image flush to edge (was losing right side).
   1.2× bigger, lower so half overlaps into S5 from S4. */
.pat-s5-tr {
    top: calc(-1 * clamp(20px, 8vw, 100px));

    /* lower = half in S4, half in S5 */
    right: 0;

    /* flush to right edge */
    left: auto;
    width: clamp(84px, 11.8vw, 235px);

    /* 168px × 1.4 = 235px */
}

/* ── S5 → Fly_day-01 → bottom-left → overlaps DOWN into S6 ──── */
/* FIX: left:0 keeps image flush to edge (was losing left side).
   1.2× bigger */
.pat-s5-bl {
    bottom: calc(-1 * clamp(20px, 4vw, 60px));

    /* raised higher into S5 */
    left: 0;
    width: clamp(63px, 9.2vw, 168px);

    /* 120px × 1.4 = 168px */
}

/* ── S10 → FAQ-02 → top-right → overlaps UP into S9 ────────── */
/* FIX: right:0 flush, 2× smaller, higher */
.pat-s10-tr {
    top: calc(-1 * clamp(80px, 12vw, 220px));

    /* higher — overlaps into S9 */
    right: 0;
    left: auto;
    width: clamp(141px, 19.5vw, 378px);

    /* 420px × 0.9 = 378px */
}

/* ── S10 → FAQ-01 → bottom-left → slightly overlaps S11 ──────── */
.pat-s10-bl {
    bottom: calc(-1 * clamp(30px, 4vw, 80px));
    left: 0;
    width: clamp(319px, 44vw, 850px);

    /* 1000px × 0.85 = 850px */
}

/* Hide patterns on very small screens — they just clutter */
@media (max-width: 380px) {
    .site-pat {
        display: none;
    }
}

/* ================================================================
   S1: HERO
   ================================================================ */
.section-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: #0d3c3c;
}

.hero-video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(135deg,#0e4a4a 0%,#1a6060 45%,#0a3535 100%);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--px);
    max-width: 960px;
    width: 100%;
}

.hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: clamp(2.4rem, 5.5vw, 5.2rem);
    white-space: nowrap;
    color: var(--white);
    line-height: 1.0;
    margin-bottom: 4px;
    text-shadow: 2px 4px 28px rgba(0,0,0,.5);
}

.hero-sub {
    font-family: "Caveat", cursive;
    font-size: clamp(1.4rem, 2.2vw, 2.1rem);
    color: rgba(255,255,255,.88);
    margin-bottom: 60px;
}

.hero-wedge {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 3;
    pointer-events: none;
    background: var(--white);
    clip-path: polygon(0 100%,100% 0%,100% 100%,0 100%);
}

/* ================================================================
   S2: RATES
   ================================================================ */
.section-rates {
    padding: 100px var(--px) 140px;
    background: var(--white);
    position: relative;
    overflow: visible;
}

.rates-header {
    text-align: center;
    margin-bottom: 52px;
}

.rates-title-group {
    display: inline-block;
    text-align: left;
}

.rates-title-group .section-title {
    color: var(--black);
}

.rates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1300px;
    margin: 0 auto;
}

.rate-card {
    position: relative;
    overflow: hidden;
    height: 600px;
    cursor: pointer;
}

.rate-card-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.rate-card-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform .5s ease;
}

.rate-card:hover .rate-card-bg-img {
    transform: scale(1.06);
}

.rate-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 55%,transparent 100%);
    transition: opacity .35s;
}

.rate-card:hover .rate-card-overlay {
    opacity: 0;
}

.rate-card-badge {
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 8;
    background: rgba(0,0,0,.78);
    color: var(--teal);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 6px 18px 6px 12px;
    backdrop-filter: blur(4px);
    --badge-cut: 18px;
    clip-path: polygon(0% 0%,100% 0%,calc(100% - var(--badge-cut)) 100%,0% 100%);
}

.rate-card-static {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 18px;
    z-index: 3;
    transition: opacity .3s;
}

.rate-card:hover .rate-card-static {
    opacity: 0;
}

.rate-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.7rem,3vw,2.3rem);
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.0;
    text-shadow: 2px 2px 14px rgba(0,0,0,.6);
}

.rate-hover {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    background: rgba(0,0,0,.93);
    padding: 18px 20px 22px;
    transform: translateY(100%) translateZ(0);
    will-change: transform;
    transition: transform .38s cubic-bezier(.22,1,.36,1);
}

.rate-card:hover .rate-hover {
    transform: translateY(0) translateZ(0);
}

.rate-hover-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.7rem;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 4px;
}

.rate-hover-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--teal);
    line-height: 1;
    margin-bottom: 12px;
}

.rate-hover-specs {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 12px;
}

.rate-hover-spec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    color: rgba(255,255,255,.82);
}

.ic {
    color: var(--teal);
    min-width: 16px;
}

.rate-hover-desc {
    font-size: .95rem;
    color: rgba(255,255,255,.58);
    line-height: 1.5;
    margin-bottom: 16px;
}

.rate-hover-btn {
    display: block;
    text-align: center;
    background: var(--teal);
    color: var(--black);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 12px 20px;
    clip-path: polygon(var(--slant) 0%, 100% 0%, calc(100% - var(--slant)) 100%, 0% 100%);
    transition: background .2s;
}

.rate-hover-btn:hover {
    background: var(--teal-dark);
}

/* ================================================================
   S3: ABOUT — FIX #1 (text closer to photo) + FIX #2 (alignment)
   ================================================================ */
.section-about {
    display: grid;
    grid-template-columns: 1fr 1fr;

    /* FIX #2: equal columns, image and text same width */
    min-height: 640px;
    background: #ffffff;
    overflow: visible;
    align-items: stretch;

    /* FIX #2: both columns stretch to same height */
}

.about-img-side {
    position: relative;
    overflow: hidden;
    min-height: 640px;
}

/* EDIT: object-position to reframe the photo */
.about-img-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* FIX #1: less left padding → text sits closer to the photo */
.about-content {
    padding: 80px 100px 80px 32px;

    /* left: tight to photo, right: more air */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.about-title {
    font-size: clamp(2.2rem,3.8vw,3.6rem);
    color: var(--black);
    margin-bottom: 24px;
    text-align: left;
}

.about-text {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--text-gray);
    margin-bottom: 16px;
    text-align: left;
}

/* ================================================================
   S4: INSTRUCTORS
   Fixed height + fixed skew px = constant angle on every screen size.
   arctan(40 / 440) ≈ 5.2° — never changes regardless of screen width.
   4 cards fill track width (padded by var(--px)) → always wider than S2's 3 cards.
   ================================================================ */
.section-instructors {
    --ic-skew: 230px;

    /* big parallelogram angle */
    --ic-height: 463px;
    padding: 80px 0 0;
    background: #fff;
    overflow: visible;
}

.section-hdr {
    text-align: center;
    padding: 0 var(--px);
    margin-bottom: 48px;
}

.section-title-group {
    display: inline-block;
    text-align: left;
}

/* Track: same side padding as section content. No max-width → wider than S2 rate-grid. */
.instructors-scroll-outer {
    width: 100%;
    padding: 0 var(--px);
    overflow: hidden;
}

.instructors-track {
    display: flex;

    /* flex required for negative-margin overlap trick */
    width: 100%;
}

/* Seamless parallelogram tiling:
   Each card overlaps the next by exactly ic-skew pixels.
   The overlap fills the transparent triangular corners of clip-path.
   z-index increases left→right so each card appears in front.
   Last card has no negative margin (nothing to the right). */
.instr-card,

.instr-card:first-child,

.instr-card:last-child {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    height: var(--ic-height);
    max-height: var(--ic-height);

    /* never taller than designed */
    cursor: default;
    min-width: 140px;

    /* prevent cards collapsing on small screens */
    margin-right: calc(-1 * var(--ic-skew) + 5px);

    /* 5px visual gap between cards */
    clip-path: polygon(var(--ic-skew) 0%, 100% 0%, calc(100% - var(--ic-skew)) 100%, 0% 100%);
}

.instr-card:last-child {
    margin-right: 0;
}

.instr-card:nth-child(1) {
    z-index: 1;
}

.instr-card:nth-child(2) {
    z-index: 2;
}

.instr-card:nth-child(3) {
    z-index: 3;
}

.instr-card:nth-child(4) {
    z-index: 4;
}

.instr-card-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.instr-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Permanent gradient */
.instr-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.5) 40%, transparent 68%);
}

/* BADGE — top-left.
   Geometry: at y=0 (top), left clip edge = ic-skew.
   badge left = ic-skew + 8px */
.instr-card-badge {
    position: absolute;
    top: 14px;
    left: calc(var(--ic-skew) + 8px);
    z-index: 5;
    background: var(--teal);
    color: var(--black);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 10px;
}

/* SOCIAL ICONS — top-right.
   At y=0 (top), right clip edge = 0 from right (full width visible).
   social right = 8px */
.instr-social {
    position: absolute;
    top: 14px;
    right: 8px;
    z-index: 5;
    display: flex;
    gap: 8px;
}

.instr-soc-btn {
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    transition: opacity .2s;
}

.instr-soc-btn:hover {
    color: var(--teal);
}

/* INFO — always visible at bottom.
   Geometry: at y=ic-height (bottom):
     left clip edge  = ic-skew * (1 - 1) = 0px  → left padding = 12px (safe)
     right clip edge = ic-skew * 1 = ic-skew from right → right padding = ic-skew + 12px */
.instr-card-static {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 14px calc(var(--ic-skew) + 10px) 14px calc(var(--ic-skew) * 0.3 + 10px);
}

.instr-card-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1rem, 1.3vw, 1.6rem);
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.0;
    margin-bottom: 2px;
    text-shadow: 1px 1px 6px rgba(0,0,0,.9);
}

.instr-card-role {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(.68rem, .85vw, .88rem);
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.instr-jumps {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(.8rem, .95vw, 1rem);
    color: var(--white);
    margin-bottom: 1px;
    margin-left: 0;
    padding-left: 0;
}

.instr-jumps strong {
    font-size: clamp(1.2rem, 1.6vw, 1.9rem);
    color: var(--teal);
    font-style: italic;
    margin-right: 2px;
}

.instr-exp {
    font-size: clamp(.65rem, .8vw, .82rem);
    color: rgba(255,255,255,.6);
    margin-left: 0;
    padding-left: 0;
}

/* Banner: aligned with card track edges */
.instructors-banner {
    background: var(--teal);
    margin: 7px 0px 97px;

    /* top gap from card group */
    padding: 22px 60px;
    text-align: center;
    clip-path: polygon(var(--banner-skew) 0%, 100% 0%, calc(100% - var(--banner-skew)) 100%, 0% 100%);
}

.instructors-banner p {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    text-transform: uppercase;
    color: var(--black);
    letter-spacing: .05em;
    line-height: 1.55;
}

/* ================================================================
   S5: JUMP DAY
   ================================================================ */
.section-jumpday {
    position: relative;
    overflow: visible;
    padding: 140px var(--px) 160px;
    background: #0d1a1a;
    min-height: 780px;
    z-index: 4;
}

.jumpday-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.jumpday-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.jumpday-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.62);
}

.jumpday-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jumpday-title-group {
    display: inline-block;
    text-align: left;
    margin-bottom: 72px;
}

.jumpday-label {
    font-family: "Caveat", cursive;
    color: #FFFFFF;
    font-size: 1.8rem;
    margin-bottom: 1px;
    text-align: left;
    padding-left: 50px;
}

.jumpday-title {
    font-size: clamp(2.4rem,5vw,4.4rem);
    color: var(--white);
}

.jumpday-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px clamp(40px,10vw,200px);
    max-width: 1100px;
    margin: 0 auto 56px;
    text-align: left;
    justify-content: center;
}

.step-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 3rem;
    color: var(--teal);
    line-height: 1;
    margin-bottom: 10px;
}

.step-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.3rem,1.8vw,1.7rem);
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 8px;
}

.step-desc {
    font-family: 'Barlow', sans-serif;
    font-size: clamp(.9rem,1.1vw,1.1rem);
    font-weight: 500;
    color: rgba(255,255,255,.72);
    line-height: 1.7;
}

.jumpday-tagline {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.2rem,2.2vw,2rem);
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.5;
}

.section-jumpday::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 70px;
    pointer-events: none;
    z-index: 3;
    background: var(--white);
    clip-path: polygon(0 100%,100% 0%,100% 100%,0 100%);
}

/* ================================================================
   S6: AFF COURSE — FIX #4
   Price overlay moved further from edge with responsive right value
   ================================================================ */
/* section-aff: NO position → not a stacking context → aff-content is non-positioned,
   paints in normal flow, BELOW jumpday (z-index:4). jumpday's dark bg + white wedge
   overlay the top-left of aff-content creating the diagonal. ✓
   aff-img-side z-index:5 > jumpday z-index:4 → photo sits above jumpday. ✓ */
.section-aff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 900px;
    background: transparent;
    margin-top: -70px;
    overflow: visible;
}

.aff-content {
    background: var(--white);
    padding: 162px var(--px) 120px var(--px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aff-title-group {
    display: inline-block;
    text-align: left;
    margin-bottom: 24px;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
}

.aff-title {
    font-size: clamp(2rem,3.5vw,3.4rem);
    color: var(--black);
}

.aff-label-wrap {
    margin-top: 10px;
}

.aff-block {
    margin-bottom: 20px;
}

.aff-block h4 {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--black);
    margin-bottom: 6px;
}

.aff-block p {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-gray);
    line-height: 1.65;
}

.aff-btn {
    margin-top: 12px;
    padding: 14px 44px;
    align-self: flex-start;
}

.aff-img-side {
    position: relative;
    overflow: hidden;
    min-height: 900px;
    background: linear-gradient(135deg,#c8a060,#e8b870);
    clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%);
    z-index: 5;
}

.aff-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* FIX #4: price overlay uses clamp so it's never too close to the clip edge */
.aff-price-overlay {
    position: absolute;
    bottom: 60px;
    right: clamp(32px, var(--px), 120px);
    text-align: right;
}

.aff-price-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.6rem;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 4px;
    text-shadow: 2px 2px 10px rgba(0,0,0,.5);
}

.aff-price-from {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .95rem;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.aff-price-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(2.8rem,4vw,4rem);
    color: var(--teal);
    line-height: 1;
    text-shadow: 2px 2px 20px rgba(0,0,0,.5);
}

.aff-price-cur {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    color: var(--white);
    font-weight: 700;
}

/* ================================================================
   S7: GIFT
   Two certs stacked like playing cards — both centered on the same
   point, different rotation angles. Back cert peeks out from behind.
   Centered vertically in the black box.
   ================================================================ */
.section-gift {
    padding: 100px var(--px);
    background: var(--white);
    overflow: visible;
}

/* gift-outer height = gift-box height (its only in-flow child).
   Cert float uses top:0/bottom:0 to stretch to this height. */
.gift-outer {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

/* Cert zone: top:0/bottom:0 stretches to gift-outer height reliably.
   flex+align-items:center vertically centers gift-cert-stack inside it. */
.gift-certs-float {
    position: absolute;
    left: -40px;
    top: 0;
    bottom: 0;

    /* shifted left so certs appear more left */
    width: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    overflow: visible;
}

/* Fixed-size container — both certs are anchored to its center.
   EDIT width/height to change how much bleed outside the box. */
.gift-cert-stack {
    position: relative;
    width: 600px;

    /* EDIT */
    height: 520px;

    /* EDIT */
    flex-shrink: 0;
    overflow: visible;
}

/* Both certs anchored at the center of gift-cert-stack.
   translate(-50%,-50%) = center the image on that anchor point.
   opacity:1 + transform override prevent .anim class from hiding them. */
.gift-cert-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 580px;

    /* EDIT: cert display width */
    overflow: visible;
    opacity: 1;
    transform-origin: center center;
}

.gift-cert-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Back cert: rotated CCW so it peeks out on the right/bottom.
   EDIT rotate angle — bigger angle = more separation visible. */
.gift-cert-back {
    transform: translate(-50%, -50%) rotate(-13deg);

    /* EDIT: -13deg = peeks left/top */
    z-index: 1;
    box-shadow: 0 28px 60px rgba(0,0,0,.6);
}

/* Front cert: slight CW rotation — clearly "on top" of back cert.
   EDIT rotate angle — a few degrees = natural "placed" look. */
.gift-cert-front {
    transform: translate(-50%, -50%) rotate(4deg);

    /* EDIT: 4deg = slight tilt */
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

/* Black parallelogram. padding-left reserves the cert zone. */
.gift-box {
    background: var(--black);
    clip-path: polygon(0px 0%, 100% 0%, calc(100% - 0px) 100%, 0% 100%);
    padding: 60px 72px 60px 680px;

    /* left = cert zone (640px) + 40px gap */
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    align-items: center;
}

.gift-box-inner {
    display: block;
    width: 100%;
}

.gift-title {
    font-size: clamp(1.6rem,2.5vw,2.4rem);
    color: var(--white);
    margin-bottom: 18px;
}

.gift-text {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,.68);
    line-height: 1.75;
    margin-bottom: 10px;
}

.gift-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin: 24px 0 32px;
}

.gift-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1.5px solid rgba(0,232,198,.45);
    padding: 10px 18px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--white);
    transform: skewX(var(--skew));
}

.gift-feature > * {
    transform: skewX(calc(-1 * var(--skew)));
    display: inline-flex;
    align-items: center;
}

.gift-feat-icon {
    font-size: 1.1rem;
}

.gift-btn-full {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--teal);
    color: var(--black);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 17px 20px;
    margin-top: 4px;
    clip-path: polygon(38px 0%, 100% 0%, calc(100% - 38px) 100%, 0% 100%);
    transition: background .2s;
}

.gift-btn-full:hover {
    background: var(--teal-dark);
}

/* ================================================================
   S8: LOCATION
   ================================================================ */
.section-location {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 580px;
    overflow: visible;
}

.location-content {
    background: var(--teal);
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

/* map-img fills the entire left column absolutely — text sits on top */
.location-map-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}

/* Text content sits above the image */
.loc-title-group,
.location-content p,
.loc-btn {
    position: relative;
    z-index: 1;
}

.location-content > *:not(.location-map-img) {
    margin-left: var(--px);
    margin-right: var(--px);
}

.loc-title-group {
    margin-top: 60px;
    margin-bottom: 22px;
    align-self: flex-start;
}

.location-content p {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(0,0,0,.76);
    line-height: 1.65;
    margin-bottom: 14px;
}

.loc-title-group {
    display: inline-block;
    text-align: left;
    margin-bottom: 22px;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
}

.loc-title {
    font-size: clamp(2rem,3.5vw,3.4rem);
    color: var(--black);
}

.loc-label {
    background: var(--black);
    color: var(--teal);
}

.loc-btn {
    margin-top: 8px;
    padding: 14px 44px;
    align-self: flex-start;
}

.location-map {
    position: relative;
    overflow: hidden;
    background: #e8e0d8;
}

.location-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    min-height: 580px;
}

/* ================================================================
   S9: SOCIAL MEDIA
   ================================================================ */
.section-social {
    padding: 100px var(--px);
    background: var(--white);
    overflow: visible;
}

.social-hdr {
    text-align: center;
    margin-bottom: 36px;
}

.social-title-group {
    display: inline-block;
    text-align: left;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 40px;
}

.social-icon-btn {
    width: 50px;
    height: 50px;
    background: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}

.social-icon-btn:hover {
    background: var(--teal);
    color: var(--black);
    transform: translateY(-3px);
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 260px 260px 240px;
    gap: 4px;
    max-width: min(1400px,96vw);
    margin: 0 auto;
    width: 100%;
}

.social-grid .sg-item:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1;
}

.social-grid .sg-item:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.social-grid .sg-item:nth-child(3) {
    grid-column: 4;
    grid-row: 1/3;
}

.social-grid .sg-item:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
}

.social-grid .sg-item:nth-child(5) {
    grid-column: 2/4;
    grid-row: 2;
}

.social-grid .sg-item:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
}

.social-grid .sg-item:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
}

.social-grid .sg-item:nth-child(8) {
    grid-column: 3;
    grid-row: 3;
}

.social-grid .sg-item:nth-child(9) {
    grid-column: 4;
    grid-row: 3;
}

.sg-item {
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}

.sg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .4s ease;
    display: block;
    pointer-events: none;
}

.sg-item:hover img {
    transform: scale(1.05);
}

.sg-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,232,198,.18);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.sg-item:hover::after {
    opacity: 1;
}

.sg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.sg-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.sg-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0,0,0,.8);
    transform: scale(.92);
    transition: transform .3s ease;
}

.sg-lightbox.open img {
    transform: scale(1);
}

.sg-lb-close {
    position: absolute;
    top: 24px;
    right: 32px;
    background: none;
    border: none;
    color: rgba(255,255,255,.8);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: color .2s, transform .2s;
}

.sg-lb-close:hover {
    color: var(--teal);
    transform: rotate(90deg);
}

/* ================================================================
   S10: FAQ
   ================================================================ */
.section-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 540px;
    background: var(--white);
    overflow: visible;
}

.faq-img-side {
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

.faq-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.faq-content {
    padding: 80px var(--px) 80px clamp(32px,4vw,72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq-title-group {
    display: inline-block;
    text-align: left;
    margin-bottom: 16px;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
}

.faq-title {
    font-size: clamp(1.8rem,3vw,3rem);
    color: var(--black);
}

.faq-list {
    border-top: 2px solid #eee;
}

.faq-item {
    border-bottom: 1px solid #e5e5e5;
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--black);
    gap: 12px;
    transition: color .2s;
}

.faq-q:hover {
    color: var(--teal-dark);
}

.faq-arrow {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    font-size: 1.2rem;
    transition: transform .3s;
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
}

.faq-a {
    display: none;
    padding: 0 0 18px;
    font-size: .95rem;
    color: var(--text-gray);
    line-height: 1.7;
}

.faq-item.open .faq-a {
    display: block;
}

/* ================================================================
   S11: FOOTER
   ================================================================ */
.site-footer {
    background: var(--black);
    padding: 75px 0;
    position: relative;
    overflow: visible;
}

.footer-inner {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 48px clamp(32px,5vw,100px);
    align-items: start;
    max-width: 1799px;
    margin: 0 auto;
    padding: 0 var(--px);
}

.footer-logo-col {
    display: flex;
    align-items: flex-start;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo-img {
    height: 60px;
    width: auto;
    opacity: .9;
}

.footer-col-h {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.9rem;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 22px;
    letter-spacing: .05em;
}

.footer-nav {
    list-style: none;
}

.footer-nav li {
    margin-bottom: 10px;
}

.footer-nav a {
    color: rgba(255,255,255,.6);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .2s;
}

.footer-nav a::before {
    content: '→';
    color: var(--teal);
    font-size: .85rem;
}

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

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-ci-icon {
    color: var(--teal);
    font-size: 1.1rem;
    min-width: 20px;
    margin-top: 2px;
}

.footer-ci-link {
    color: rgba(255,255,255,.6);
    font-size: 1.15rem;
    line-height: 1.5;
    transition: color .2s;
}

.footer-ci-link:hover {
    color: var(--teal);
}

.footer-cta-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.footer-cta-btn {
    display: inline-block;
    text-align: center;
    background: var(--teal);
    color: var(--black);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 12px 36px;
    white-space: nowrap;
    min-width: 160px;
    clip-path: polygon(var(--slant) 0%, 100% 0%, calc(100% - var(--slant)) 100%, 0% 100%);
    transition: background .2s;
}

.footer-cta-btn:hover {
    background: var(--teal-dark);
}

.footer-bottom {
    background: var(--black);
    padding: 16px var(--px);
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
    color: rgba(255,255,255,.28);
    font-size: .8rem;
}

/* ================================================================
   BOOKING PAGE — FIX #6
   .booking-hero is a <div>, not <section>, so JS animation
   observer never fires on it → children stay invisible.
   The JS fix (main.js) immediately adds .visible to them.
   CSS safety net: force opacity:1 on booking hero children.
   ================================================================ */
.booking-hero {
    background: linear-gradient(135deg,#0a1515,#1a2525);
    padding: 120px var(--px) 60px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
}

/* FIX #6 safety net — ensure title is always visible */
.booking-hero h1,

.booking-hero p,

.booking-hero .breadcrumb {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.booking-hero h1 {
    font-size: clamp(2.2rem,5vw,4.5rem);
    color: var(--white);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    display: block;
}

.booking-hero p {
    color: rgba(255,255,255,.7);
    margin-top: 8px;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    font-size: .85rem;
    color: rgba(255,255,255,.5);
    position: relative;
    z-index: 1;
}

.breadcrumb a {
    color: var(--teal);
}

.booking-section {
    padding: 56px var(--px);
    max-width: 1500px;
    margin: 0 auto;
}

.booking-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 48px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.booking-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.booking-steps .step-num {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: rgba(0,0,0,.12);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-gray);
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    transition: all .3s;
}

.booking-steps .step.active .step-num {
    background: var(--teal);
    color: var(--black);
}

.booking-steps .step.done  .step-num {
    background: var(--black);
    color: var(--white);
}

.booking-steps .step-label {
    font-size: .75rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.booking-steps .step-line {
    flex: 1;
    height: 2px;
    background: #ddd;
    margin: 0 8px;
    margin-bottom: 18px;
}

.booking-grid {
    display: grid;
    grid-template-columns: 2fr 1.3fr;
    gap: 48px;
    align-items: start;
}

.booking-side-sticky {
    position: sticky;
    top: calc(var(--nav-height) + 20px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.booking-summary {
    position: static;
    top: unset;
}

.booking-form-title {
    margin-bottom: 28px;
}

/* Package cards — FIX #7: transform skewX, border follows */
.package-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}

.package-card {
    transform: skewX(var(--booking-skew));
    position: relative;
    padding: 20px 24px;
    cursor: pointer;
    background: #f4f4f4;
    border: 1.5px solid rgba(0,0,0,.2);
    transition: border-color .2s, background .2s;
}

.package-card:hover {
    border-color: rgba(0,0,0,.4);
}

.package-card.selected {
    background: rgba(0,232,198,.08);
    border-color: var(--teal);
}

.package-card h3,
.package-card p,
.package-card .pkg-price,
.package-card .package-card-tag {
    transform: skewX(calc(-1 * var(--booking-skew)));
    display: block;
}

.package-card-tag {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--black);
    color: var(--white);
    font-size: .65rem;
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.package-card.selected .package-card-tag {
    background: var(--teal);
    color: var(--black);
}

.package-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    margin: 4px 0;
}

.package-card p {
    font-size: .8rem;
    color: var(--text-gray);
    margin-bottom: 10px;
}

.pkg-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--black);
}

.pkg-price span {
    font-size: 1rem;
    color: var(--text-gray);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-group label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--black);
}

/* FIX #7: all inputs share --skew. One value = border + block always match. */
.form-group input,
.form-group select,
.form-group textarea {
    border: 1.5px solid rgba(0,0,0,.2);
    padding: 12px 16px;
    font-size: .95rem;
    font-family: 'Barlow', sans-serif;
    outline: none;
    background: #f0f0f0;
    color: var(--text-dark);
    width: 100%;
    -webkit-appearance: none;
    transition: border-color .2s, background .2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--teal);
    background: #fff;
    outline: none;
}

.form-group input[type=checkbox],
.form-group input[type=radio] {
    transform: none;
    border: revert;
    outline: revert;
    -webkit-appearance: checkbox;
    background: unset;
}

#agree {
    transform: none;
    -webkit-appearance: checkbox;
    border: revert;
    width: 18px;
    height: 18px;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    appearance: none;
    cursor: pointer;
    padding-right: 36px;
}

.select-wrapper::after {
    content: '▾';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-gray);
    z-index: 1;
}

.addon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.addon-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transform: skewX(var(--booking-skew));
    border: 1.5px solid rgba(0,0,0,.2);
    background: #f4f4f4;
    outline: none;
    transition: border-color .2s, background .2s;
}

.addon-item > * {
    transform: skewX(calc(-1 * var(--booking-skew)));
}

.addon-item:has(input:checked) {
    border-color: var(--teal);
    background: rgba(0,232,198,.07);
}

.addon-item input[type=checkbox] {
    transform: none;
    clip-path: none;
    pointer-events: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    width: 18px;
    height: 18px;
    accent-color: var(--teal);
}

.addon-item label {
    flex: 1;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.addon-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    color: var(--black);
}

.addon-desc {
    font-size: .75rem;
    color: var(--text-gray);
}

.addon-price {
    margin-left: auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    color: var(--teal);
    font-size: .9rem;
    white-space: nowrap;
}

.height-picker-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-dark);
    margin: 20px 0 8px;
    display: block;
}

.height-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.height-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 28px;
    cursor: pointer;
    clip-path: polygon(var(--slant) 0%, 100% 0%, calc(100% - var(--slant)) 100%, 0% 100%);
    border: none;
    background: #f4f4f4;
    color: var(--text-dark);
    transition: background .2s;
}

.height-btn.active {
    outline: 2px solid var(--teal);
    background: rgba(0,232,198,.1);
}

/* Booking page: no skew on height buttons */
.booking-section .height-btn { clip-path: none; }

.form-submit-btn {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    cursor: pointer;
}

.booking-summary {
    background: var(--black);
    padding: 36px;
    color: var(--white);
}

.booking-summary h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 20px;
}

.summary-option {
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transform: skewX(var(--booking-skew));
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.2);
    transition: border-color .2s, background .2s;
}

.summary-option:hover {
    border-color: rgba(255,255,255,.4);
}

.summary-option.selected {
    background: rgba(0,232,198,.1);
    border-color: var(--teal);
}

.summary-option h4,
.summary-option p,
.summary-option .price {
    transform: skewX(calc(-1 * var(--booking-skew)));
    display: block;
}

.summary-option h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.summary-option p {
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    margin-bottom: 4px;
}

.summary-option .price {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--teal);
}

.summary-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.1);
    margin: 14px 0;
}

.summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.summary-total-row .label {
    font-size: .85rem;
    color: rgba(255,255,255,.6);
}

.summary-total-row .value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
}

.summary-total-row.total .label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--white);
}

.summary-total-row.total .value {
    font-size: 1.6rem;
    color: var(--teal);
}

.booking-need-help {
    background: #f4f4f4;
    padding: 32px;
    border-left: 4px solid var(--teal);
    flex-shrink: 0;
}

.booking-need-help-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 8px;
}

.booking-need-help p {
    font-size: .85rem;
    color: var(--text-gray);
    line-height: 1.5;
    margin-bottom: 12px;
}

.booking-need-help a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: var(--teal-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking-popup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.8);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

.booking-popup.open {
    opacity: 1;
    pointer-events: auto;
}

.booking-popup-box {
    background: var(--black);
    color: var(--white);
    max-width: 520px;
    width: 90%;
    padding: 52px 56px;
    clip-path: polygon(35px 0%,100% 0%,calc(100% - 35px) 100%,0% 100%);
    text-align: center;
    transform: scale(.88);
    transition: transform .3s;
}

.booking-popup.open .booking-popup-box {
    transform: scale(1);
}

.booking-popup-icon {
    font-size: 3rem;
    margin-bottom: 14px;
}

.booking-popup-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 12px;
}

.booking-popup-text {
    font-size: .9rem;
    color: rgba(255,255,255,.75);
    line-height: 1.75;
    margin-bottom: 28px;
}

.booking-popup-close {
    background: var(--teal);
    color: var(--black);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 14px 44px;
    border: none;
    cursor: pointer;
    clip-path: polygon(var(--slant) 0%, 100% 0%, calc(100% - var(--slant)) 100%, 0% 100%);
    transition: background .2s;
}

.booking-popup-close:hover {
    background: var(--teal-dark);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
    .booking-grid {
        display: flex;
        flex-direction: column;
    }
    /* Summary and Need Help centered on tablet/mobile */
    .booking-side-sticky {
        align-self: center;
        width: 100%;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    .booking-summary,
    .booking-need-help {
        width: 100%;
    }

    .booking-side-sticky {
        position: static;
        top: unset;
        order: 999;
    }

    .desktop-submit-wrap {
        display: none;
    }

    .mobile-book-submit {
        display: block;
    }
}

@media (min-width: 1101px) {
    .desktop-submit-wrap {
        display: block;
    }

    .mobile-book-submit {
        display: none;
    }
}

.mobile-book-submit .form-submit-btn {
    width: 100%;
    margin-bottom: 12px;
}

.mobile-book-submit p {
    font-size: .78rem;
    color: #999;
    text-align: center;
}

@media (max-width: 900px) {
    /* NAV */
    .nav-links {
        display: none;
    }

    .nav-desktop-only {
        display: none;
    }

    .nav-logo-img {
        height: 36px;
    }

    .nav-book {
        font-size: .8rem;
        padding: 8px 20px;
    }

    .nav-hamburger {
        display: flex;
    }

    /* SECTIONS STACK */
    .section-about {
        grid-template-columns: 1fr;
    }

    .section-aff {
        grid-template-columns: 1fr;
        margin-top: 0;
    }

    .section-location {
        grid-template-columns: 1fr;
    }

    .section-faq {
        grid-template-columns: 1fr;
    }

    .aff-img-side {
        min-height: 300px;
        clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
    }

    .faq-img-side {
        min-height: 260px;
    }

    /* INSTRUCTORS: snap scroll, one card per swipe */
    .section-instructors {
        --ic-skew: 40px;
        --ic-height: 340px;
    }

    .instructors-scroll-outer {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 16px;
    }

    .instructors-scroll-outer::-webkit-scrollbar {
        display: none;
    }

    .instructors-track {
        width: max-content;
    }

    .section-instructors {
        --ic-height: 420px;
    }

    /* taller on mobile */
    .instr-card,
    .instr-card:first-child,
    .instr-card:last-child {
        width: 85vw;
        flex: none;
        margin-right: 8px;
        scroll-snap-align: start;
    }

    .instr-card:last-child {
        margin-right: 0;
    }

    .instr-card-name {
        font-size: 1.5rem;
    }

    .instr-card-role {
        font-size: .85rem;
    }

    .instr-jumps {
        font-size: 1rem;
    }

    .instr-jumps strong {
        font-size: 1.6rem;
    }

    .instr-exp {
        font-size: .8rem;
    }

    /* Ensure mobile snap scroll overrides tablet grid */
    .instructors-scroll-outer {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 16px !important;
    }

    .instructors-track {
        display: flex !important;
        width: max-content !important;
    }

    .instr-card,
    .instr-card:first-child,
    .instr-card:last-child {
        width: 85vw !important;
        flex: none !important;
        margin-right: 8px !important;
        scroll-snap-align: start !important;
    }

    /* FIX 10: pat-main higher so it doesn't cover Rates section */
    .pat-s1-bl {
        bottom: -5%;
        width: clamp(80px, 14vw, 220px);
    }

    /* pat-s3-tr mobile: bottom-right of About, slightly higher */
    .pat-s3-tr {
        top: auto;
        bottom: 0%;
        right: 0;
    }

    /* FIX 12: instructors-banner full width, no skew */
    .instructors-banner {
        margin: 0 0 60px;
        clip-path: none;
        border-radius: 0;
    }

    /* JUMPDAY */
    .jumpday-steps {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* FIX 13+14+15: gift section mobile — certs above box, box full width, no skew */
    .section-gift {
        padding: 40px 0 0;
    }

    .gift-outer {
        display: flex;
        flex-direction: column;
    }

    .gift-certs-float {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        margin-top: 20px;
        margin-bottom: -20px;
        overflow: visible;
    }

    .gift-cert-stack {
        width: 320px;
        height: 220px;
    }

    .gift-cert-item {
        width: 300px;
    }

    .gift-cert-back {
        transform: translate(-50%,-50%) rotate(-13deg);
    }

    .gift-cert-front {
        transform: translate(-50%,-50%) rotate(4deg);
    }

    .gift-box {
        clip-path: none;
        padding: 48px 24px 40px;
        width: 100%;
        min-height: unset;
        display: block;
        position: relative;
        z-index: 2;
    }

    .gift-box-inner {
        display: block;
        text-align: center;
    }

    .gift-title {
        font-size: 1.8rem;
        text-align: center;
    }

    .gift-text {
        font-size: .95rem;
        text-align: center;
    }

    .gift-features {
        justify-items: center;
    }

    /* FIX 9: gift button keeps parallelogram shape on mobile */
    .gift-btn-full {
        clip-path: polygon(var(--btn-slant) 0%, 100% 0%, calc(100% - var(--btn-slant)) 100%, 0% 100%);
    }

    /* FIX 16: pat-faq-bl lower — most overlaps into footer */
    .pat-s10-bl {
        bottom: calc(-1 * clamp(120px, 28vw, 260px));
    }

    /* lower on mobile */
    /* SOCIAL */
    .social-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 160px 180px 160px 180px;
        gap: 3px;
        max-width: 100%;
        width: 100%;
    }

    .social-grid .sg-item:nth-child(1) {
        grid-column: 1/3;
        grid-row: 1;
    }

    .social-grid .sg-item:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .social-grid .sg-item:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .social-grid .sg-item:nth-child(4) {
        grid-column: 1/3;
        grid-row: 3;
    }

    .social-grid .sg-item:nth-child(5) {
        grid-column: 1;
        grid-row: 4;
    }

    .social-grid .sg-item:nth-child(6) {
        grid-column: 2;
        grid-row: 4;
    }

    .social-grid .sg-item:nth-child(7) {
        grid-column: 1/3;
        grid-row: 5;
    }

    .social-grid .sg-item:nth-child(n+8) {
        display: none;
    }

    /* FOOTER */
    .footer-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 20px;
    }

    .footer-logo-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo-col,
    .footer-col {
        width: 100%;
    }

    .footer-nav a {
        justify-content: center;
    }

    .footer-contact-item {
        justify-content: center;
    }

    .footer-cta-btns {
        align-items: center;
    }

    /* FIX 17: remove the explicit separator div — only keep the border-top on .mobile-lang */
    .mobile-lang-sep {
        display: none;
    }

    /* FIX 17 cont: border-top on .mobile-lang IS the separator — only one line */
    .mobile-lang {
        border-top: 1px solid rgba(255,255,255,.15);
        padding: 8px 0 4px;
    }

    /* FIX 18: language buttons use transform:skewX to match the skewed container */
    .mobile-lang-btn {
        clip-path: none;

        /* remove clip-path */
        transform: skewX(var(--skew));

        /* match container skew */
        border: 1.5px solid rgba(255,255,255,.25);
    }

    .mobile-lang-btn span,
    .mobile-lang-btn {
        /* counter-skew the text */
        display: inline-block;
    }

    /* Actually simpler: use clip-path matching the exact --btn-slant angle */
    .mobile-lang-btn {
        transform: skewX(-5deg);
        clip-path: none;
        border: 1.5px solid rgba(255,255,255,.25);
    }

    .section-faq {
        padding-bottom: 120px;
    }

    /* room for pat-faq-bl */
    .booking-section {
        padding: 40px 20px;
    }

    .booking-hero {
        padding: 100px 20px 40px;
    }
}

/* ── 1024px: tablet landscape ─────────────────────────────── */
@media (max-width: 1024px) {
    /* FIX 15: nav links — shrink font to prevent overflow */
    .nav-links a {
        font-size: .82rem;
        letter-spacing: .06em;
    }

    .nav-links {
        gap: 18px;
    }

    .nav-book {
        padding: 10px 28px;
        font-size: .85rem;
    }

    /* pat-s3-tr — clip section overflow, pat barely cropped */
    .section-about {
        overflow: hidden;
    }

    .pat-s3-tr {
        right: -20px;
    }

    /* FIX 4: gift title one line */
    .gift-title {
        white-space: nowrap;
        font-size: clamp(1.2rem, 2vw, 1.8rem);
    }

    /* FIX 5: bigger skew, 3 wider cards at 1024 */
    .section-instructors {
        --ic-skew: 90px;
        --ic-height: 380px;
    }

    .instructors-scroll-outer {
        overflow: hidden;
        padding: 0 var(--px);
    }

    .instructors-track {
        display: flex;
        width: 100%;
    }

    .instr-card,
    .instr-card:first-child,
    .instr-card:last-child {
        width: 100%;
        flex: 1 1 0;
        margin-right: calc(-1 * 90px + 5px);
        scroll-snap-align: unset;
    }

    .instr-card:last-child {
        margin-right: 0;
    }

    /* FIX 16: gift — certs above box, centered */
    .section-gift {
        padding: 60px 0 0;
    }

    .gift-outer {
        display: flex;
        flex-direction: column;
    }

    .gift-certs-float {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        margin-bottom: -40px;
        overflow: visible;
    }

    /* FIX 5: bigger certs + more vertical breathing room */
    .gift-cert-stack {
        width: 560px;
        height: 390px;
    }

    .gift-cert-item {
        width: 530px;
    }

    .gift-cert-back {
        transform: translate(-50%,-50%) rotate(-13deg);
    }

    .gift-cert-front {
        transform: translate(-50%,-50%) rotate(4deg);
    }

    .gift-box {
        clip-path: none;
        padding: 60px 40px 50px;
        width: 100%;
        min-height: unset;
        display: block;
        position: relative;
        z-index: 2;
    }

    .gift-box-inner {
        text-align: center;
    }

    .gift-title {
        text-align: center;
    }

    .gift-text {
        text-align: center;
    }

    .gift-btn-full {
        clip-path: polygon(var(--btn-slant) 0%, 100% 0%, calc(100% - var(--btn-slant)) 100%, 0% 100%);
    }
}

/* ── 820px: tablet portrait ─────────────────────────────── */
@media (max-width: 820px) {
    /* FIX 6: pat-s3-tr a bit lower at this size */
    .pat-s3-tr {
        top: -20%;
        right: -20px;
    }

    /* FIX 7: clip overflow on about section — no white stripe from pat */
    .section-about {
        overflow: hidden;
    }

    /* FIX 6: instructors — taller, not full-width */
    .section-instructors {
        --ic-skew: 50px;
        --ic-height: 320px;
    }

    .instructors-scroll-outer {
        padding: 0 32px;
        overflow: hidden;
    }

    .instructors-track {
        display: flex;
        width: 100%;
    }

    .instr-card,
    .instr-card:first-child,
    .instr-card:last-child {
        flex: 1 1 0;
        min-width: 0;
        margin-right: calc(-1 * 50px + 5px);
        scroll-snap-align: unset;
    }

    .instr-card:last-child {
        margin-right: 0;
    }

    /* FIX 7: pat-faq-bl lower */
    .pat-s10-bl {
        bottom: calc(-1 * clamp(40px, 8vw, 80px));
    }

    /* FIX 18: bigger certs at 820px */
    .gift-cert-stack {
        width: 420px;
        height: 290px;
    }

    .gift-cert-item {
        width: 390px;
    }
}

/* ── 768px: tablet ─────────────────────────────────────── */
@media (max-width: 768px) {
    .section-rates {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-jumpday {
        padding-left: 24px;
        padding-right: 24px;
    }

    .section-social {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-hdr {
        padding-left: 16px;
        padding-right: 16px;
    }

    .aff-content {
        padding: 80px 24px 60px;
    }

    .faq-content {
        padding: 48px 24px;
    }

    .rates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        padding: 0 24px;
    }
}

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

    .section-hdr {
        padding-left: 16px;
        padding-right: 16px;
    }

    .about-content {
        padding: 48px 20px;
    }

    .aff-content {
        padding: 60px 20px;
    }

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

    .location-content {
        padding: 60px 20px;
        min-height: 320px;
    }

    .package-cards {
        grid-template-columns: 1fr;
    }

    .addon-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .booking-hero h1 {
        font-size: 2rem;
    }

    .gift-features {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   BOOKING PAGE — height picker + popup (originally inline in booking.html)
   ================================================================ */
.height-picker-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dark); margin:20px 0 8px; display:block; }
.height-picker { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.height-btn { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; padding:10px 28px; cursor:pointer; border:none; background:#f4f4f4; color:var(--text-dark); clip-path:polygon(var(--btn-slant) 0%,100% 0%,calc(100% - var(--btn-slant)) 100%,0% 100%); transition:background .2s; }
.height-btn.active { outline:2px solid var(--teal); background:rgba(0,232,198,.1); }
.booking-popup { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.8); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .3s; }
.booking-popup.open { opacity:1; pointer-events:auto; }
.booking-popup-box { background:var(--black); color:var(--white); max-width:520px; width:90%; padding:52px 56px; clip-path:polygon(var(--btn-slant) 0%,100% 0%,calc(100% - var(--btn-slant)) 100%,0% 100%); text-align:center; transform:scale(.88); transition:transform .3s; }
.booking-popup.open .booking-popup-box { transform:scale(1); }
.booking-popup-icon { font-size:3rem; margin-bottom:14px; }
.booking-popup-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-style:italic; font-size:2rem; text-transform:uppercase; color:var(--teal); margin-bottom:12px; }
.booking-popup-text { font-size:.9rem; color:rgba(255,255,255,.75); line-height:1.75; margin-bottom:28px; }
.booking-popup-close { background:var(--teal); color:var(--black); font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1rem; letter-spacing:.12em; text-transform:uppercase; padding:14px 44px; border:none; cursor:pointer; clip-path:polygon(var(--btn-slant) 0%,100% 0%,calc(100% - var(--btn-slant)) 100%,0% 100%); transition:background .2s; }
.booking-popup-close:hover { background:var(--teal-dark); }

/* ── BOOKING RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .booking-grid { display:flex; flex-direction:column; }
    .booking-side-sticky { position:static; top:unset; order:999; }
    .desktop-submit-wrap { display:none; }
    .mobile-book-submit  { display:block; }
}
@media (min-width: 1101px) {
    .desktop-submit-wrap { display:block; }
    .mobile-book-submit  { display:none; }
}
.mobile-book-submit .form-submit-btn { width:100%; margin-bottom:12px; }
.mobile-book-submit p { font-size:.78rem; color:#999; text-align:center; }
@media (max-width: 768px) {
    .package-cards { grid-template-columns:1fr; }
    .addon-grid    { grid-template-columns:1fr; }
    .form-row      { grid-template-columns:1fr; gap:0; }
    .booking-section { padding:40px 20px; }
    .booking-hero  { padding:100px 20px 40px; }
    .booking-steps { max-width:100%; }
    .booking-grid  { gap:32px; }
}
@media (max-width: 480px) {
    .booking-hero h1 { font-size:2rem; }
    .height-picker   { flex-direction:column; }
    .height-btn      { width:100%; text-align:center; }
}