:root {
    --tg-pink: #e42b8b;
    --tg-pink-deep: #ba176f;
    --tg-ink: #101019;
    --tg-sand: #fff3cf;
    --tg-cream: #fff7e8;
    --tg-sky: #25d7ff;
    --tg-lagoon: #00c2a8;
    --tg-sunset: #ffb13b;
    --tg-shadow: rgba(5, 8, 18, .62);
    --tg-slant-cut: 0px;
    --tg-img-tilt: 0deg;
}

.tg-skysurf-hero,
.tg-skysurf-hero * {
    box-sizing: border-box;
}

.tg-skysurf-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(560px, 78svh, 860px);
    overflow: hidden;
    color: var(--tg-cream);
    background:
        radial-gradient(circle at 28% 12%, rgba(255,255,255,.34), transparent 16rem),
        linear-gradient(135deg, #111427 0%, #1c2448 38%, #5a1f61 72%, #e42b8b 100%);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transform: translateZ(0);
    --tg-bg-parallax-x: -1px;
    --tg-bg-parallax-y: -1px;
    --tg-speed-parallax-x: 1px;
    --tg-speed-parallax-y: 1px;
    --tg-sun-parallax-x: 1.5px;
    --tg-sun-parallax-y: 1px;
    --tg-badge-parallax-x: 1.2px;
    --tg-badge-parallax-y: -1px;
    --tg-img-base: 1.006;
    --tg-img-drift-from: 1.01;
    --tg-img-drift-to: 1.003;
    --tg-img-drift-left: -1px;
    --tg-img-drift-right: 1px;
    --tg-copy-rise: 4px;
    --tg-badge-rotate: 2deg;
    --tg-badge-pop-start-rotate: 0deg;
    --tg-badge-pop-mid-rotate: 2.6deg;
    --tg-badge-pop-from-scale: .985;
    --tg-badge-pop-mid-scale: 1.004;
    --tg-sun-min: 74px;
    --tg-sun-fluid: 8vw;
    --tg-sun-max: 132px;
    --tg-sun-opacity: .22;
    --tg-speed-opacity: .018;
    --tg-grain-opacity: 0;
    --tg-badge-min: 100px;
    --tg-badge-fluid: 10vw;
    --tg-badge-max: 158px;
    --tg-badge-mobile-min: 68px;
    --tg-badge-mobile-fluid: 17vw;
    --tg-badge-mobile-max: 104px;
    --tg-badge-ring-inset: 8px;
    --tg-badge-ring-label-min: .39rem;
    --tg-badge-ring-label-max: .56rem;
    --tg-badge-ring-text-offset: 9px;
    --tg-badge-claim-min: .76rem;
    --tg-badge-claim-fluid: 1.05vw;
    --tg-badge-claim-max: 1.18rem;
}

.tg-skysurf-hero--motion-tiny {
    --tg-bg-parallax-x: -1px;
    --tg-bg-parallax-y: -1px;
    --tg-speed-parallax-x: 1px;
    --tg-speed-parallax-y: 1px;
    --tg-sun-parallax-x: 1.5px;
    --tg-sun-parallax-y: 1px;
    --tg-badge-parallax-x: 1.2px;
    --tg-badge-parallax-y: -1px;
    --tg-img-base: 1.006;
    --tg-img-drift-from: 1.01;
    --tg-img-drift-to: 1.003;
    --tg-img-drift-left: -1px;
    --tg-img-drift-right: 1px;
    --tg-copy-rise: 4px;
    --tg-badge-rotate: 2deg;
    --tg-badge-pop-start-rotate: 0deg;
    --tg-badge-pop-mid-rotate: 2.6deg;
    --tg-badge-pop-from-scale: .985;
    --tg-badge-pop-mid-scale: 1.004;
}

.tg-skysurf-hero--motion-small {
    --tg-bg-parallax-x: -3px;
    --tg-bg-parallax-y: -2px;
    --tg-speed-parallax-x: 3px;
    --tg-speed-parallax-y: 2px;
    --tg-sun-parallax-x: 4px;
    --tg-sun-parallax-y: 3px;
    --tg-badge-parallax-x: 3px;
    --tg-badge-parallax-y: -2px;
    --tg-img-base: 1.018;
    --tg-img-drift-from: 1.026;
    --tg-img-drift-to: 1.012;
    --tg-img-drift-left: -2px;
    --tg-img-drift-right: 2px;
    --tg-copy-rise: 6px;
    --tg-badge-rotate: 3deg;
    --tg-badge-pop-start-rotate: -1deg;
    --tg-badge-pop-mid-rotate: 3.6deg;
    --tg-badge-pop-from-scale: .97;
    --tg-badge-pop-mid-scale: 1.009;
}

.tg-skysurf-hero--motion-normal {
    --tg-bg-parallax-x: -8px;
    --tg-bg-parallax-y: -6px;
    --tg-speed-parallax-x: 9px;
    --tg-speed-parallax-y: 7px;
    --tg-sun-parallax-x: 12px;
    --tg-sun-parallax-y: 8px;
    --tg-badge-parallax-x: 8px;
    --tg-badge-parallax-y: -6px;
    --tg-img-base: 1.045;
    --tg-img-drift-from: 1.07;
    --tg-img-drift-to: 1.03;
    --tg-img-drift-left: -6px;
    --tg-img-drift-right: 5px;
    --tg-copy-rise: 12px;
    --tg-badge-rotate: 4deg;
    --tg-badge-pop-start-rotate: -2deg;
    --tg-badge-pop-mid-rotate: 5deg;
    --tg-badge-pop-from-scale: .94;
    --tg-badge-pop-mid-scale: 1.015;
}

.tg-skysurf-hero--image-clear {
    --tg-img-base: 1.006;
    --tg-img-drift-from: 1.01;
    --tg-img-drift-to: 1.003;
}

.tg-skysurf-hero--image-clear .tg-skysurf-bg-img {
    filter: none;
}

.tg-skysurf-hero--image-clear .tg-skysurf-wash {
    background:
        linear-gradient(90deg, rgba(7,9,18,.62) 0%, rgba(7,9,18,.32) 31%, rgba(7,9,18,.07) 60%, rgba(7,9,18,.24) 100%),
        radial-gradient(circle at 78% 34%, rgba(255,177,59,.10), transparent 16rem),
        linear-gradient(0deg, rgba(8,8,14,.30) 0%, transparent 34%);
}

.tg-skysurf-hero--image-clear .tg-skysurf-grain {
    opacity: 0;
}

.tg-skysurf-hero--image-clear .tg-skysurf-speedlines {
    opacity: min(var(--tg-speed-opacity, .018), .025);
}

.tg-skysurf-hero--image-clear .tg-skysurf-sun {
    opacity: min(var(--tg-sun-opacity, .22), .28);
}

.tg-skysurf-hero--image-clear.tg-skysurf-hero--slant-gentle { --tg-img-tilt: -.18deg; }
.tg-skysurf-hero--image-clear.tg-skysurf-hero--slant-surf { --tg-img-tilt: -.28deg; }
.tg-skysurf-hero--image-clear.tg-skysurf-hero--slant-epic { --tg-img-tilt: -.45deg; }

.tg-skysurf-hero--image-retro .tg-skysurf-bg-img {
    filter: saturate(1.18) contrast(1.08);
}

.tg-skysurf-hero--image-retro .tg-skysurf-grain { opacity: .16; }
.tg-skysurf-hero--image-retro .tg-skysurf-speedlines { opacity: .18; }
.tg-skysurf-hero--image-retro .tg-skysurf-sun { opacity: .70; }

.tg-skysurf-hero--deco-mini {
    --tg-sun-min: 64px;
    --tg-sun-fluid: 6.5vw;
    --tg-sun-max: 110px;
    --tg-sun-opacity: .18;
    --tg-speed-opacity: .012;
    --tg-grain-opacity: 0;
    --tg-badge-min: 86px;
    --tg-badge-fluid: 8.5vw;
    --tg-badge-max: 134px;
    --tg-badge-mobile-min: 62px;
    --tg-badge-mobile-fluid: 15vw;
    --tg-badge-mobile-max: 88px;
    --tg-badge-ring-inset: 7px;
    --tg-badge-ring-label-min: .34rem;
    --tg-badge-ring-label-max: .48rem;
    --tg-badge-ring-text-offset: 8px;
    --tg-badge-claim-min: .62rem;
    --tg-badge-claim-fluid: .9vw;
    --tg-badge-claim-max: .96rem;
}

.tg-skysurf-hero--deco-small {
    --tg-sun-min: 82px;
    --tg-sun-fluid: 9vw;
    --tg-sun-max: 145px;
    --tg-sun-opacity: .24;
    --tg-speed-opacity: .025;
    --tg-grain-opacity: .02;
    --tg-badge-min: 110px;
    --tg-badge-fluid: 11vw;
    --tg-badge-max: 176px;
    --tg-badge-mobile-min: 72px;
    --tg-badge-mobile-fluid: 18vw;
    --tg-badge-mobile-max: 108px;
    --tg-badge-ring-inset: 8px;
    --tg-badge-ring-label-min: .42rem;
    --tg-badge-ring-label-max: .58rem;
    --tg-badge-ring-text-offset: 9px;
    --tg-badge-claim-min: .78rem;
    --tg-badge-claim-fluid: 1.15vw;
    --tg-badge-claim-max: 1.24rem;
}

.tg-skysurf-hero--deco-normal {
    --tg-sun-min: 118px;
    --tg-sun-fluid: 15vw;
    --tg-sun-max: 230px;
    --tg-sun-opacity: .42;
    --tg-speed-opacity: .08;
    --tg-grain-opacity: .07;
    --tg-badge-min: 170px;
    --tg-badge-fluid: 18vw;
    --tg-badge-max: 270px;
    --tg-badge-mobile-min: 106px;
    --tg-badge-mobile-fluid: 28vw;
    --tg-badge-mobile-max: 142px;
    --tg-badge-ring-inset: 12px;
    --tg-badge-ring-label-min: .54rem;
    --tg-badge-ring-label-max: .72rem;
    --tg-badge-ring-text-offset: 15px;
    --tg-badge-claim-min: 1.05rem;
    --tg-badge-claim-fluid: 1.65vw;
    --tg-badge-claim-max: 1.75rem;
}

.tg-skysurf-hero--slant-straight {
    --tg-slant-cut: 0px;
    --tg-img-tilt: 0deg;
}

.tg-skysurf-hero--slanted {
    --tg-slant-cut: clamp(22px, 3.6vw, 58px);
    --tg-img-tilt: -.75deg;
    margin-block: clamp(16px, 3vw, 46px);
    border-radius: clamp(18px, 2.4vw, 38px);
    clip-path: polygon(0 var(--tg-slant-cut), 100% 0, 100% calc(100% - var(--tg-slant-cut)), 0 100%);
    box-shadow: 0 34px 90px rgba(5, 8, 18, .28), 0 0 0 1px rgba(255,255,255,.08);
}

.tg-skysurf-hero--slanted::before {
    content: "";
    position: absolute;
    inset: clamp(10px, 1.6vw, 22px);
    z-index: 23;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: clamp(14px, 2vw, 30px);
    clip-path: polygon(0 var(--tg-slant-cut), 100% 0, 100% calc(100% - var(--tg-slant-cut)), 0 100%);
    box-shadow: inset 0 0 0 1px rgba(16,16,25,.18), inset 0 0 70px rgba(255,255,255,.08);
}

.tg-skysurf-hero--slanted::after {
    content: "";
    position: absolute;
    z-index: 6;
    left: -10%;
    right: -10%;
    top: calc(var(--tg-slant-cut) * .32);
    height: clamp(2px, .28vw, 5px);
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,243,207,.72), rgba(37,215,255,.6), transparent);
    transform: rotate(-.6deg);
    opacity: .32;
}

.tg-skysurf-hero--slant-gentle {
    --tg-slant-cut: clamp(14px, 2.2vw, 34px);
    --tg-img-tilt: -.35deg;
}

.tg-skysurf-hero--slant-surf {
    --tg-slant-cut: clamp(22px, 3.6vw, 58px);
    --tg-img-tilt: -.75deg;
}

.tg-skysurf-hero--slant-epic {
    --tg-slant-cut: clamp(30px, 5vw, 82px);
    --tg-img-tilt: -1.15deg;
}

.tg-skysurf-hero--compact { min-height: clamp(440px, 62svh, 650px); }
.tg-skysurf-hero--cinema { min-height: clamp(560px, 78svh, 860px); }
.tg-skysurf-hero--full { min-height: min(940px, 100svh); }

.tg-skysurf-track,
.tg-skysurf-slide,
.tg-skysurf-bg,
.tg-skysurf-wash {
    position: absolute;
    inset: 0;
}

.tg-skysurf-slide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 900ms ease;
}

.tg-skysurf-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.tg-skysurf-bg {
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(8,8,19,.35), rgba(8,8,19,.12) 45%, rgba(228,43,139,.12)),
        radial-gradient(circle at 50% 15%, #34ddff 0, #2063a5 36%, #1b1f54 70%, #111 100%);
    background-size: cover;
    background-position: center;
}

.tg-skysurf-bg picture {
    position: absolute;
    inset: 0;
    display: block;
}

.tg-skysurf-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(var(--tg-img-base, 1.035)) rotate(var(--tg-img-tilt, 0deg)) translate3d(calc(var(--mx, 0) * var(--tg-bg-parallax-x, -4px)), calc(var(--my, 0) * var(--tg-bg-parallax-y, -3px)), 0);
    filter: none;
}

.tg-skysurf-slide.is-active .tg-skysurf-bg-img {
    animation: tgSkyDrift 18s ease-out both;
}

.tg-skysurf-wash {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(7,9,18,.76) 0%, rgba(7,9,18,.42) 32%, rgba(7,9,18,.10) 61%, rgba(7,9,18,.38) 100%),
        radial-gradient(circle at 78% 34%, rgba(255,177,59,.18), transparent 18rem),
        linear-gradient(0deg, rgba(8,8,14,.42) 0%, transparent 36%);
}

.tg-skysurf-grain {
    position: absolute;
    inset: -60px;
    z-index: 8;
    opacity: var(--tg-grain-opacity, 0);
    pointer-events: none;
    background-image:
        linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.12), transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,.18), transparent 2px);
    background-size: 7px 7px, 11px 11px, 19px 19px, 23px 23px;
    mix-blend-mode: overlay;
    animation: tgGrain 5.5s steps(2) infinite;
}

.tg-skysurf-speedlines {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: var(--tg-speed-opacity, .018);
    background:
        repeating-linear-gradient(116deg, transparent 0 23px, rgba(255,255,255,.42) 24px 25px, transparent 26px 92px);
    transform: translate3d(calc(var(--mx, 0) * var(--tg-speed-parallax-x, 5px)), calc(var(--my, 0) * var(--tg-speed-parallax-y, 4px)), 0);
    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 48%, transparent 78%);
}

.tg-skysurf-sun {
    position: absolute;
    z-index: 2;
    right: clamp(18px, 7vw, 110px);
    top: clamp(28px, 11vh, 120px);
    width: clamp(var(--tg-sun-min, 74px), var(--tg-sun-fluid, 8vw), var(--tg-sun-max, 132px));
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: var(--tg-sun-opacity, .22);
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,.95) 0 7px, rgba(255,255,255,0) 8px 20px),
        radial-gradient(circle at 36% 28%, #fff6b7, #ffb13b 46%, #e42b8b 72%, rgba(228,43,139,0) 73%);
    filter: drop-shadow(0 0 20px rgba(255,177,59,.28));
    transform: translate3d(calc(var(--mx, 0) * var(--tg-sun-parallax-x, 6px)), calc(var(--my, 0) * var(--tg-sun-parallax-y, 4px)), 0) rotate(-4deg);
}

.tg-skysurf-content {
    position: relative;
    z-index: 10;
    min-height: inherit;
    width: min(1180px, calc(100% - clamp(32px, 7vw, 120px)));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 290px);
    gap: clamp(24px, 6vw, 78px);
    align-items: center;
    padding-block: clamp(58px, 9vh, 110px) clamp(88px, 12vh, 150px);
}

.tg-skysurf-copy {
    width: min(760px, 100%);
    transform: translateY(var(--tg-copy-rise, 8px));
    opacity: 0;
}

.tg-skysurf-slide.is-active .tg-skysurf-copy {
    animation: tgCopyIn 820ms cubic-bezier(.2,.9,.22,1) 160ms forwards;
}

.tg-skysurf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 100%;
    padding: .47rem .82rem;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    background: rgba(10,12,24,.42);
    box-shadow: 0 12px 44px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.08);
    color: var(--tg-sand);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 900;
    font-size: clamp(.7rem, .7vw, .82rem);
    backdrop-filter: blur(12px);
}

.tg-skysurf-eyebrow::before {
    content: "";
    width: .68rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 20%, var(--tg-sky) 21% 46%, var(--tg-pink) 47% 100%);
    box-shadow: 0 0 20px rgba(37,215,255,.75);
}

.tg-skysurf-kicker {
    margin: clamp(18px, 3vh, 28px) 0 .4rem;
    color: #9ff6ff;
    text-transform: uppercase;
    letter-spacing: .27em;
    font-weight: 900;
    font-size: clamp(.76rem, 1.1vw, 1rem);
    text-shadow: 0 2px 20px rgba(0,0,0,.8);
}

.tg-skysurf-title {
    margin: 0;
    max-width: 12ch;
    color: #fff5d7;
    font-family: "Arial Black", Impact, ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(3.15rem, 8.2vw, 8rem);
    line-height: .83;
    letter-spacing: -.08em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        .05em .05em 0 rgba(228,43,139,.95),
        .09em .09em 0 rgba(0,194,168,.85),
        0 .18em 1.2em rgba(0,0,0,.66);
}

.tg-skysurf-text {
    margin: clamp(18px, 3vh, 26px) 0 0;
    width: min(620px, 100%);
    color: rgba(255,247,232,.93);
    font-size: clamp(1.05rem, 1.45vw, 1.42rem);
    line-height: 1.55;
    font-weight: 650;
    text-shadow: 0 2px 20px rgba(0,0,0,.72);
}

.tg-skysurf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: clamp(24px, 4vh, 40px);
}

.tg-skysurf-button {
    --btn-bg: rgba(255,255,255,.13);
    --btn-fg: #fff6da;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .9rem 1.1rem .82rem;
    border: 2px solid rgba(255,255,255,.72);
    border-radius: 999px;
    color: var(--btn-fg);
    background: var(--btn-bg);
    overflow: hidden;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 1000;
    box-shadow: 0 22px 46px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tg-skysurf-button::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: linear-gradient(105deg, transparent 0 36%, rgba(255,255,255,.55) 47%, transparent 58% 100%);
    transform: translateX(-80%);
    transition: transform .75s ease;
}

.tg-skysurf-button:hover,
.tg-skysurf-button:focus-visible {
    transform: translateY(-1px) rotate(-.35deg);
    box-shadow: 0 24px 54px rgba(0,0,0,.36), 0 0 20px rgba(37,215,255,.22);
    border-color: #fff;
}

.tg-skysurf-button:hover::before,
.tg-skysurf-button:focus-visible::before {
    transform: translateX(80%);
}

.tg-skysurf-button span {
    position: relative;
    z-index: 1;
}

.tg-skysurf-button--primary {
    --btn-bg: linear-gradient(135deg, var(--tg-pink), #ff7bbd 44%, var(--tg-sunset));
    color: #180913;
    border-color: rgba(255,255,255,.88);
}

.tg-skysurf-button--ghost {
    backdrop-filter: blur(12px);
}

.tg-skysurf-badge {
    justify-self: end;
    display: grid;
    place-items: center;
    width: clamp(var(--tg-badge-min, 100px), var(--tg-badge-fluid, 10vw), var(--tg-badge-max, 158px));
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--tg-ink);
    background:
        radial-gradient(circle at 50% 50%, #fff9df 0 42%, transparent 43%),
        conic-gradient(from 8deg, var(--tg-pink), var(--tg-sunset), var(--tg-sky), var(--tg-lagoon), var(--tg-pink));
    box-shadow: 0 32px 84px rgba(0,0,0,.38), inset 0 0 0 7px rgba(16,16,25,.84);
    transform: rotate(var(--tg-badge-rotate, 2deg)) translate3d(calc(var(--mx, 0) * var(--tg-badge-parallax-x, 1.2px)), calc(var(--my, 0) * var(--tg-badge-parallax-y, -1px)), 0);
}

.tg-skysurf-slide.is-active .tg-skysurf-badge {
    animation: tgBadgePop 720ms cubic-bezier(.2,.9,.17,1) 300ms both;
}

.tg-skysurf-badge-ring {
    position: absolute;
    inset: var(--tg-badge-ring-inset, 8px);
    border: 2px dashed rgba(16,16,25,.82);
    border-radius: 50%;
    display: grid;
    place-items: center;
    animation: tgSpin 46s linear infinite;
}

.tg-skysurf-badge-ring span {
    width: 82%;
    color: transparent;
    text-align: center;
    font-size: .66rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.tg-skysurf-badge-ring::before,
.tg-skysurf-badge-ring::after {
    position: absolute;
    color: rgba(16,16,25,.9);
    font-weight: 1000;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: clamp(var(--tg-badge-ring-label-min, .39rem), .62vw, var(--tg-badge-ring-label-max, .56rem));
}

.tg-skysurf-badge-ring::before {
    content: "Tandem Guru";
    top: var(--tg-badge-ring-text-offset, 9px);
}

.tg-skysurf-badge-ring::after {
    content: "Surf the Sky";
    bottom: var(--tg-badge-ring-text-offset, 9px);
    transform: rotate(180deg);
}

.tg-skysurf-badge strong {
    position: relative;
    z-index: 1;
    width: 70%;
    text-align: center;
    font-family: "Arial Black", Impact, sans-serif;
    font-size: clamp(var(--tg-badge-claim-min, .76rem), var(--tg-badge-claim-fluid, 1.05vw), var(--tg-badge-claim-max, 1.18rem));
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.035em;
}

.tg-skysurf-nav {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: clamp(44px, 4.4vw, 64px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    color: #fff;
    background: rgba(10,12,24,.33);
    box-shadow: 0 20px 45px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(12px);
    transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

.tg-skysurf-nav:hover,
.tg-skysurf-nav:focus-visible {
    background: rgba(228,43,139,.72);
    transform: translateY(-50%) scale(1.025);
}

.tg-skysurf-nav span {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    margin-top: -.08em;
}

.tg-skysurf-nav--prev { left: clamp(12px, 2.4vw, 34px); }
.tg-skysurf-nav--next { right: clamp(12px, 2.4vw, 34px); }

.tg-skysurf-dots {
    position: absolute;
    z-index: 21;
    left: 50%;
    bottom: clamp(54px, 7vh, 86px);
    display: flex;
    gap: .62rem;
    transform: translateX(-50%);
}

.tg-skysurf-dot {
    width: 32px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    transition: width .22s ease, background .22s ease, transform .22s ease;
}

.tg-skysurf-dot span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.tg-skysurf-dot.is-active {
    width: 46px;
    background: linear-gradient(90deg, var(--tg-pink), var(--tg-sunset), var(--tg-sky));
    transform: translateY(-1px);
}

.tg-skysurf-bottomline {
    position: absolute;
    z-index: 22;
    inset-inline: 0;
    bottom: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vw, 60px);
    padding: .45rem 1rem .5rem;
    color: rgba(16,16,25,.92);
    background: linear-gradient(90deg, var(--tg-sky), var(--tg-sand), var(--tg-pink));
    font-family: "Arial Black", Impact, sans-serif;
    font-size: clamp(.63rem, 1vw, .92rem);
    text-transform: uppercase;
    letter-spacing: .15em;
    white-space: nowrap;
    box-shadow: 0 -18px 55px rgba(0,0,0,.22);
}

.tg-skysurf-bottomline span:not(:first-child)::before {
    content: "✦";
    margin-right: clamp(18px, 4vw, 60px);
}

@keyframes tgSkyDrift {
    from { transform: scale(var(--tg-img-drift-from, 1.045)) rotate(var(--tg-img-tilt, 0deg)) translate3d(calc(var(--mx, 0) * var(--tg-bg-parallax-x, -4px) + var(--tg-img-drift-left, -3px)), calc(var(--my, 0) * var(--tg-bg-parallax-y, -3px)), 0); }
    to { transform: scale(var(--tg-img-drift-to, 1.025)) rotate(var(--tg-img-tilt, 0deg)) translate3d(calc(var(--mx, 0) * var(--tg-bg-parallax-x, -4px) + var(--tg-img-drift-right, 4px)), calc(var(--my, 0) * var(--tg-bg-parallax-y, -3px)), 0); }
}

@keyframes tgCopyIn {
    to { transform: translateY(0); opacity: 1; }
}

@keyframes tgBadgePop {
    0% { opacity: 0; transform: rotate(var(--tg-badge-pop-start-rotate, 0deg)) scale(var(--tg-badge-pop-from-scale, .985)); }
    62% { opacity: 1; transform: rotate(var(--tg-badge-pop-mid-rotate, 2.6deg)) scale(var(--tg-badge-pop-mid-scale, 1.004)); }
    100% { opacity: 1; transform: rotate(var(--tg-badge-rotate, 2deg)) scale(1); }
}

@keyframes tgSpin {
    to { transform: rotate(360deg); }
}

@keyframes tgGrain {
    0% { transform: translate(0,0); }
    50% { transform: translate(8px,-6px); }
    100% { transform: translate(-5px, 6px); }
}

@media (max-width: 960px) {
    .tg-skysurf-content {
        grid-template-columns: 1fr;
        align-items: end;
        width: min(100% - 34px, 760px);
        padding-block: 92px 112px;
    }

    .tg-skysurf-title {
        max-width: 10ch;
        font-size: clamp(2.9rem, 14vw, 5.7rem);
    }

    .tg-skysurf-text {
        font-size: clamp(1rem, 4.2vw, 1.18rem);
        line-height: 1.45;
    }

    .tg-skysurf-badge {
        position: absolute;
        right: 18px;
        top: 22px;
        width: clamp(var(--tg-badge-mobile-min, 68px), var(--tg-badge-mobile-fluid, 17vw), var(--tg-badge-mobile-max, 104px));
        opacity: .88;
    }

    .tg-skysurf-badge strong {
        font-size: clamp(.72rem, 3.2vw, 1rem);
    }

    .tg-skysurf-badge-ring::before,
    .tg-skysurf-badge-ring::after {
        font-size: .44rem;
    }

    .tg-skysurf-nav {
        top: auto;
        bottom: 60px;
        width: 44px;
        background: rgba(10,12,24,.48);
    }

    .tg-skysurf-nav--prev { left: 17px; }
    .tg-skysurf-nav--next { right: 17px; }

    .tg-skysurf-dots {
        bottom: 70px;
    }

    .tg-skysurf-bottomline {
        justify-content: flex-start;
        overflow: hidden;
    }

    .tg-skysurf-bottomline span:nth-child(n+4) {
        display: none;
    }
}

@media (max-width: 520px) {
    .tg-skysurf-hero {
        min-height: 78svh;
    }

    .tg-skysurf-hero--slanted,
    .tg-skysurf-hero--slant-gentle,
    .tg-skysurf-hero--slant-surf,
    .tg-skysurf-hero--slant-epic {
        --tg-slant-cut: clamp(12px, 5.2vw, 28px);
        --tg-img-tilt: -.35deg;
        margin-block: 10px 24px;
        border-radius: 18px;
    }

    .tg-skysurf-content {
        width: min(100% - 24px, 480px);
        padding-block: 86px 120px;
    }

    .tg-skysurf-kicker {
        letter-spacing: .18em;
    }

    .tg-skysurf-title {
        font-size: clamp(2.65rem, 17vw, 4.35rem);
        letter-spacing: -.075em;
    }

    .tg-skysurf-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .68rem;
    }

    .tg-skysurf-button {
        width: 100%;
        min-height: 48px;
        padding-inline: .85rem;
        font-size: .82rem;
    }

    .tg-skysurf-eyebrow {
        font-size: .62rem;
        letter-spacing: .13em;
    }

    .tg-skysurf-wash {
        background:
            linear-gradient(0deg, rgba(7,9,18,.72) 0%, rgba(7,9,18,.34) 54%, rgba(7,9,18,.15) 100%),
            radial-gradient(circle at 78% 21%, rgba(255,177,59,.12), transparent 13rem);
    }

    .tg-skysurf-bg-img {
        object-position: center top;
    }

    .tg-skysurf-dot {
        width: 28px;
        height: 10px;
    }

    .tg-skysurf-dot.is-active {
        width: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-skysurf-slide,
    .tg-skysurf-bg,
    .tg-skysurf-bg-img,
    .tg-skysurf-copy,
    .tg-skysurf-badge,
    .tg-skysurf-badge-ring,
    .tg-skysurf-grain,
    .tg-skysurf-button,
    .tg-skysurf-dot,
    .tg-skysurf-nav {
        animation: none !important;
        transition: none !important;
    }

    .tg-skysurf-copy {
        opacity: 1;
        transform: none;
    }
}