/* Cinematic site introduction */
body.intro-active {
    overflow: hidden;
}

.intro-seen .site-intro {
    display: none;
}

.intro-seen body.intro-active {
    overflow: auto;
}

.site-intro {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

.site-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 24%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0.72) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35));
}

.site-intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-controls {
    position: absolute;
    right: clamp(20px, 4vw, 56px);
    bottom: clamp(20px, 4vw, 44px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.intro-skip,
.intro-sound {
    padding: 10px 14px;
    border: 1px solid rgba(85, 200, 255, 0.42);
    background: rgba(2, 3, 5, 0.54);
    color: var(--silver);
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.intro-sound {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.intro-sound-bars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 12px;
}

.intro-sound-bars i {
    display: block;
    width: 2px;
    height: 4px;
    background: currentColor;
    opacity: .65;
}

.intro-sound-bars i:nth-child(2) {
    height: 9px;
}

.intro-sound.is-on .intro-sound-bars i {
    animation: intro-sound-pulse .7s ease-in-out infinite alternate;
    opacity: 1;
}

.intro-sound.is-on .intro-sound-bars i:nth-child(2) {
    animation-delay: -.35s;
}

.intro-sound.is-on .intro-sound-bars i:nth-child(3) {
    animation-delay: -.18s;
}

@keyframes intro-sound-pulse {
    to { height: 12px; }
}

.intro-skip:hover,
.intro-sound:hover,
.intro-skip:focus-visible,
.intro-sound:focus-visible {
    color: var(--white);
    border-color: var(--blue-bright);
    box-shadow: 0 0 22px rgba(22, 156, 255, 0.28);
}

@media (max-width: 560px) {
    .intro-controls {
        right: 16px;
        bottom: 18px;
        left: 16px;
        justify-content: flex-end;
    }

    .intro-skip,
    .intro-sound {
        padding: 10px 11px;
        font-size: .62rem;
        letter-spacing: .12em;
    }
}

.site-intro.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-intro.is-hidden {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .site-intro {
        display: none;
    }

    body.intro-active {
        overflow: auto;
    }
}

:root {
    --black: #020305;
    --black-soft: #070a0f;
    --panel: #0b1018;
    --panel-light: #111a27;
    --blue: #169cff;
    --blue-bright: #55c8ff;
    --silver: #c8d0dc;
    --white: #f5f8ff;
    --muted: #8b97a8;
    --border: rgba(85, 200, 255, 0.24);
    --glow: 0 0 24px rgba(22, 156, 255, 0.38);
    --page-width: 1400px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 6%, rgba(15, 75, 126, 0.22), transparent 34%),
        var(--black);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

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

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 36px;
    width: 100%;
    min-height: 76px;
    padding: 10px 4%;
    background: rgba(2, 3, 5, 0.82);
    border-bottom: 1px solid rgba(85, 200, 255, 0.16);
    backdrop-filter: blur(16px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.brand img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.main-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.main-navigation a {
    position: relative;
    padding: 10px 0;
    color: var(--silver);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.main-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 1px;
    background: var(--blue-bright);
    box-shadow: var(--glow);
    transition: width 0.25s ease;
}

.main-navigation a:hover {
    color: var(--white);
}

.main-navigation a:hover::after {
    width: 100%;
}

.main-navigation .nav-button {
    padding: 10px 16px;
    border: 1px solid var(--border);
}

.social-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.social-links a {
    color: var(--silver);
    font-size: 0.76rem;
    font-weight: 700;
    transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

.social-links a:hover {
    color: var(--blue-bright);
    text-shadow: var(--glow);
    transform: translateY(-2px);
}

.menu-toggle {
    display: none;
}

.hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 130px 24px 96px;
    overflow: hidden;
    isolation: isolate;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(to bottom, rgba(2, 3, 5, 0.12), rgba(2, 3, 5, 0.88)),
        radial-gradient(circle at 50% 42%, rgba(14, 89, 151, 0.28), transparent 42%);
}

.hero-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(255,255,255,0.014) 80px),
        repeating-linear-gradient(0deg, transparent 0, transparent 79px, rgba(255,255,255,0.012) 80px);
    opacity: 0.55;
}

.hero-background::after {
    content: "";
    position: absolute;
    inset: 15% 20%;
    border-radius: 50%;
    background: rgba(22, 156, 255, 0.08);
    filter: blur(90px);
}

.hero-content {
    width: min(980px, 100%);
    text-align: center;
}

.hero-logo {
    width: clamp(150px, 16vw, 225px);
    margin: 0 auto 12px;
    filter:
        drop-shadow(0 0 14px rgba(85, 200, 255, 0.28))
        drop-shadow(0 0 34px rgba(22, 156, 255, 0.14));
    animation: logoFloat 5s ease-in-out infinite;
}

.eyebrow,
.section-label {
    color: var(--blue-bright);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 920px;
    margin: 10px auto 0;
    font-size: clamp(2.7rem, 6.3vw, 5.75rem);
    font-weight: 300;
    letter-spacing: 0.085em;
    line-height: 0.98;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #ffffff 15%, #c7cfda 52%, #768394 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

.hero-slogan {
    max-width: 760px;
    margin: 22px auto 34px;
    color: var(--silver);
    font-size: clamp(0.78rem, 1.35vw, 1rem);
    letter-spacing: 0.21em;
    text-transform: uppercase;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 238px;
    padding: 15px 24px;
    background: rgba(5, 13, 24, 0.72);
    border: 1px solid var(--blue);
    box-shadow: inset 0 0 20px rgba(22, 156, 255, 0.05), 0 0 18px rgba(22, 156, 255, 0.2);
    color: var(--white);
    font-size: 0.76rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.primary-button:hover {
    transform: translateY(-3px);
    background: rgba(22, 156, 255, 0.12);
    box-shadow: inset 0 0 25px rgba(22, 156, 255, 0.11), 0 0 30px rgba(22, 156, 255, 0.38);
}

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.62rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.scroll-line {
    display: block;
    width: 1px;
    height: 42px;
    background: linear-gradient(to bottom, var(--blue), transparent);
    box-shadow: var(--glow);
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.pulse-divider {
    position: relative;
    width: 100%;
    height: 34px;
}

.pulse-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(22, 156, 255, 0.62), transparent);
    box-shadow: var(--glow);
}

.pulse-divider span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 28px;
    border-left: 2px solid var(--blue-bright);
    border-bottom: 2px solid var(--blue-bright);
    transform: translate(-50%, -50%) rotate(-45deg) skew(16deg);
    filter: drop-shadow(0 0 6px var(--blue));
}

.section {
    width: min(var(--page-width), 92%);
    margin: 0 auto;
    padding: 86px 0;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}

.section-heading h2 {
    margin-top: 7px;
    font-size: clamp(1.5rem, 3vw, 2.7rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.text-link {
    color: var(--silver);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.text-link:hover { color: var(--blue-bright); }

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

.world-card {
    position: relative;
    min-height: 310px;
    padding: 28px 22px;
    background: linear-gradient(160deg, rgba(17, 26, 39, 0.92), rgba(4, 7, 12, 0.96));
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.world-card::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 40%, rgba(85, 200, 255, 0.13) 50%, transparent 60%);
    transform: translateX(-50%) rotate(10deg);
    transition: transform 0.65s ease;
}

.world-card:hover {
    transform: translateY(-8px);
    border-color: rgba(85, 200, 255, 0.7);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.world-card:hover::before { transform: translateX(50%) rotate(10deg); }

.card-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 54px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--blue-bright);
    font-size: 1.3rem;
    box-shadow: inset 0 0 18px rgba(22, 156, 255, 0.08), 0 0 18px rgba(22, 156, 255, 0.12);
}

.world-card h3,
.world-card p,
.world-card a { position: relative; z-index: 1; }

.world-card h3 {
    margin-bottom: 10px;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.world-card p { color: var(--muted); font-size: 0.86rem; }

.world-card a {
    position: absolute;
    left: 22px;
    bottom: 24px;
    color: var(--blue-bright);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 14px;
}

.portfolio-card {
    position: relative;
    min-height: 300px;
    background: linear-gradient(155deg, rgba(19, 31, 47, 0.95), rgba(3, 7, 13, 0.98));
    border: 1px solid var(--border);
    overflow: hidden;
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    filter: brightness(0.72) saturate(0.88);
    transition: transform 0.5s ease, filter 0.5s ease;
}

.portfolio-card.is-placeholder::before {
    content: "Portfolio image coming soon";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    color: rgba(200, 208, 220, 0.55);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.portfolio-card.is-placeholder img { display: none; }

.portfolio-overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 60px 20px 20px;
    background: linear-gradient(transparent, rgba(2, 3, 5, 0.94));
    transform: translateY(12px);
    transition: transform 0.35s ease;
}

.portfolio-overlay h3 {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.portfolio-overlay p {
    color: var(--blue-bright);
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.portfolio-card:hover img { transform: scale(1.06); filter: brightness(0.95) saturate(1.05); }
.portfolio-card:hover .portfolio-overlay { transform: translateY(0); }

.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 26px;
}

.process-step {
    position: relative;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.process-step::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--black);
    border: 1px solid var(--blue-bright);
    border-radius: 50%;
    box-shadow: var(--glow);
}

.process-number { color: var(--blue-bright); font-size: 0.76rem; letter-spacing: 0.15em; }

.process-step h3 {
    margin: 8px 0;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.process-step p { color: var(--muted); font-size: 0.86rem; }

.cta-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: min(var(--page-width), 92%);
    margin: 30px auto 0;
    padding: 60px;
    background: linear-gradient(120deg, rgba(10, 23, 39, 0.96), rgba(2, 3, 5, 0.96));
    border: 1px solid var(--border);
}

.cta-section h2 {
    margin: 7px 0;
    font-size: clamp(1.7rem, 4vw, 3.5rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cta-section p:not(.section-label) { color: var(--muted); }

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    margin-top: 70px;
    padding: 28px 4%;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.73rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--silver);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.footer-brand img { width: 38px; }
.footer-links { display: flex; justify-content: flex-end; gap: 24px; }
.footer-links a:hover { color: var(--blue-bright); }

@media (max-width: 1180px) {
    .world-grid { grid-template-columns: repeat(3, 1fr); }
    .process-grid { grid-template-columns: repeat(3, 1fr); }
    .site-header { grid-template-columns: auto 1fr; }
    .social-links { display: none; }
}

@media (max-width: 820px) {
    .site-header { display: flex; justify-content: space-between; }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 38px;
        padding: 8px;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .menu-toggle span { width: 100%; height: 1px; background: var(--white); }

    .main-navigation {
        position: absolute;
        top: 76px;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 20px 4%;
        background: rgba(2, 3, 5, 0.97);
        border-bottom: 1px solid var(--border);
    }

    .main-navigation.is-open { display: flex; }
    .main-navigation a { padding: 14px 0; }
    .world-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .section-heading, .cta-section { align-items: flex-start; flex-direction: column; }
    .cta-section { padding: 40px 26px; }
    .site-footer { grid-template-columns: 1fr; text-align: center; }
    .footer-brand, .footer-links { justify-content: center; }
}

@media (max-width: 540px) {
    .brand span { display: none; }
    .hero { min-height: 92vh; padding-top: 118px; }
    .hero h1 { letter-spacing: 0.045em; }
    .hero-slogan { letter-spacing: 0.12em; }
    .world-grid, .process-grid { grid-template-columns: 1fr; }
    .world-card { min-height: 280px; }
    .section { padding: 64px 0; }
}


/* === v1.6 polish === */
.hero{min-height:100vh;padding-top:120px;padding-bottom:140px;}
.hero::before{
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at center,rgba(56,160,255,.18),transparent 45%);
pointer-events:none;
}
.section-divider,.heartbeat-divider{opacity:.45;}


/* =========================================================
   VIVID VIZIONZ — HERO PRODUCTION PASS 2.0
   Real photographic skyline + layered cinematic atmosphere
   ========================================================= */
.hero {
    min-height: 100svh;
    padding: 112px 24px 88px;
    background: #01030a;
}
.hero::before { display:none; }
.hero-background {
    position:absolute;
    inset:0;
    z-index:-3;
    overflow:hidden;
    background:#01030a;
}
.hero-photo {
    position:absolute;
    inset:0;
    background:url("../assets/images/vivid-hero-city.webp") center 52% / cover no-repeat;
    transform:scale(1.025);
    filter:saturate(1.12) contrast(1.08) brightness(.9);
    animation:vividCamera 18s ease-in-out infinite alternate;
}
.hero-atmosphere {
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse at 12% 28%, rgba(0,120,255,.20), transparent 26%),
      radial-gradient(ellipse at 88% 25%, rgba(0,120,255,.18), transparent 28%),
      linear-gradient(to bottom, rgba(0,2,8,.08) 0%, transparent 40%, rgba(0,2,8,.25) 72%, rgba(0,0,0,.82) 100%);
    mix-blend-mode:screen;
}
.hero-stars {
    position:absolute;
    inset:0;
    background:url("../assets/images/vivid-particles.png") center top / cover no-repeat;
    opacity:.58;
    mix-blend-mode:screen;
    animation:vividDrift 26s linear infinite alternate;
}
.hero-energy {
    position:absolute;
    left:50%;
    top:12%;
    width:min(980px,78vw);
    height:62vh;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(10,121,255,.28) 0%, rgba(0,91,255,.09) 42%, transparent 72%);
    filter:blur(12px);
    animation:vividBreathe 5s ease-in-out infinite;
}
.hero-heartbeat {
    position:absolute;
    left:0;
    top:24%;
    width:100%;
    height:180px;
    overflow:visible;
    opacity:.88;
    filter:drop-shadow(0 0 5px #087cff) drop-shadow(0 0 13px rgba(0,132,255,.95));
}
.hero-heartbeat path {
    fill:none;
    stroke:#42b9ff;
    stroke-width:3;
    vector-effect:non-scaling-stroke;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:2200;
    stroke-dashoffset:2200;
    animation:vividDraw 3.5s ease-out .6s forwards, vividPulse 4.2s ease-in-out 4.2s infinite;
}
.hero-grade {
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse at 50% 41%, transparent 24%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.66) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.30) 0%, transparent 18%, transparent 62%, rgba(0,0,0,.76) 100%);
    pointer-events:none;
}
.hero-content {
    position:relative;
    z-index:4;
    width:min(1040px,100%);
    padding:28px 28px 46px;
    background:radial-gradient(ellipse at center, rgba(0,4,13,.55) 0%, rgba(0,4,13,.22) 48%, transparent 74%);
    border-radius:42px;
    text-shadow:0 5px 28px rgba(0,0,0,.94);
}
.hero-logo {
    width:clamp(210px,19vw,330px);
    margin:0 auto -2px;
    filter:drop-shadow(0 0 10px rgba(116,209,255,.46)) drop-shadow(0 0 36px rgba(0,111,255,.30));
}
.eyebrow { margin-top:-4px; }
.hero h1 {
    max-width:1000px;
    margin:5px auto 0;
    font-size:clamp(3.05rem,6.35vw,6.45rem);
    line-height:.96;
    letter-spacing:.075em;
    text-shadow:0 6px 24px rgba(0,0,0,.98),0 0 38px rgba(0,91,255,.13);
}
.hero-slogan {
    margin:20px auto 30px;
    color:#f3f6fc;
    text-shadow:0 3px 17px #000;
}
.primary-button {
    min-width:270px;
    background:rgba(0,5,15,.83);
    border-color:#28aaff;
    box-shadow:inset 0 0 24px rgba(19,142,255,.12),0 0 10px rgba(0,132,255,.72),0 0 34px rgba(0,103,255,.28);
}
.scroll-indicator { bottom:18px; color:rgba(220,231,246,.84); }
@keyframes vividCamera { from{transform:scale(1.025) translate3d(-.35%,0,0)} to{transform:scale(1.055) translate3d(.35%,-.45%,0)} }
@keyframes vividDrift { from{transform:translate3d(-.4%,0,0)} to{transform:translate3d(.6%,-1%,0)} }
@keyframes vividBreathe { 0%,100%{opacity:.72;transform:translateX(-50%) scale(.98)} 50%{opacity:1;transform:translateX(-50%) scale(1.04)} }
@keyframes vividDraw { to{stroke-dashoffset:0} }
@keyframes vividPulse { 0%,100%{opacity:.72} 50%{opacity:1} }
@media(max-width:820px){
 .hero{padding-top:104px;min-height:94svh}
 .hero-photo{background-position:62% center}
 .hero-heartbeat{top:20%;height:130px}
 .hero-content{padding-inline:12px}
 .hero-logo{width:clamp(185px,42vw,260px)}
}
@media(prefers-reduced-motion:reduce){.hero-photo,.hero-stars,.hero-energy,.hero-heartbeat path{animation:none}.hero-heartbeat path{stroke-dashoffset:0}}


/* =========================================================
   VIVID VIZIONZ — HERO PRODUCTION PASS 2.1 "THE CITY LIVES"
   Atmospheric depth, water shimmer, skyline beacons and pulse response
   ========================================================= */
.hero-background::before,
.hero-background::after { pointer-events:none; }

.hero-clouds {
    position:absolute;
    inset:-12% -10% 20%;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 18% 54%, rgba(16,46,87,.62) 0 12%, transparent 34%),
      radial-gradient(ellipse at 38% 30%, rgba(20,58,108,.50) 0 10%, transparent 31%),
      radial-gradient(ellipse at 67% 38%, rgba(18,52,97,.58) 0 12%, transparent 34%),
      radial-gradient(ellipse at 88% 56%, rgba(13,42,82,.62) 0 14%, transparent 36%);
    filter:blur(22px);
    opacity:.62;
    mix-blend-mode:screen;
}
.hero-clouds-back { animation:cloudDriftBack 34s ease-in-out infinite alternate; }
.hero-clouds-front {
    inset:2% -12% 28%;
    opacity:.30;
    filter:blur(34px);
    animation:cloudDriftFront 24s ease-in-out infinite alternate-reverse;
}

.hero-fog {
    position:absolute;
    left:-15%;
    width:130%;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 18% 50%, rgba(143,205,255,.18), transparent 28%),
      radial-gradient(ellipse at 48% 45%, rgba(82,159,220,.15), transparent 30%),
      radial-gradient(ellipse at 78% 52%, rgba(132,199,255,.16), transparent 28%);
    filter:blur(25px);
    mix-blend-mode:screen;
}
.hero-fog-mid {
    bottom:18%;
    height:20%;
    opacity:.54;
    animation:fogSlide 25s linear infinite alternate;
}
.hero-fog-front {
    bottom:-2%;
    height:24%;
    opacity:.44;
    filter:blur(34px);
    animation:fogSlideFront 19s linear infinite alternate-reverse;
}

.hero-water-light {
    position:absolute;
    left:0;
    right:0;
    bottom:-2%;
    height:37%;
    pointer-events:none;
    background:
      repeating-linear-gradient(93deg, transparent 0 34px, rgba(40,167,255,.07) 38px 41px, transparent 46px 88px),
      linear-gradient(to bottom, transparent 0%, rgba(0,95,191,.06) 35%, rgba(24,145,255,.13) 68%, transparent 100%);
    mix-blend-mode:screen;
    mask-image:linear-gradient(to bottom, transparent, #000 28%, #000 82%, transparent);
    animation:waterShimmer 7s ease-in-out infinite;
}

.hero-beacons {
    position:absolute;
    inset:0;
    pointer-events:none;
}
.hero-beacons i {
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#e8f8ff;
    box-shadow:0 0 5px #fff,0 0 13px #23aaff,0 0 24px rgba(35,170,255,.9);
    opacity:.25;
    animation:beaconBlink 3.6s steps(1,end) infinite;
}
.hero-beacons i:nth-child(1){left:10.3%;top:34%;animation-delay:.2s}
.hero-beacons i:nth-child(2){left:25.2%;top:27%;animation-delay:1.35s}
.hero-beacons i:nth-child(3){left:67.3%;top:28.5%;animation-delay:2.15s}
.hero-beacons i:nth-child(4){left:78.4%;top:33.8%;animation-delay:.85s}
.hero-beacons i:nth-child(5){left:91%;top:37%;animation-delay:2.75s}

.hero-heartbeat {
    transition:filter .28s ease,opacity .28s ease;
}
.hero.is-pulsing .hero-heartbeat {
    opacity:1;
    filter:drop-shadow(0 0 8px #8bdcff) drop-shadow(0 0 21px rgba(0,132,255,1));
}
.hero.is-pulsing .hero-energy {
    opacity:1;
    filter:blur(7px) brightness(1.35);
}
.hero.is-pulsing .hero-logo {
    filter:drop-shadow(0 0 15px rgba(170,231,255,.75)) drop-shadow(0 0 48px rgba(0,125,255,.55));
}
.hero.is-pulsing .hero-water-light { opacity:1; transform:scaleY(1.045); }
.hero.is-pulsing .hero-photo { filter:saturate(1.18) contrast(1.1) brightness(.96); }

.hero-logo,.hero-energy,.hero-water-light,.hero-photo { transition:filter .45s ease,opacity .45s ease,transform .45s ease; }

@keyframes cloudDriftBack { from{transform:translate3d(-2%,0,0) scale(1.02)} to{transform:translate3d(2.5%,-1.5%,0) scale(1.08)} }
@keyframes cloudDriftFront { from{transform:translate3d(2%,0,0) scale(1.05)} to{transform:translate3d(-2.5%,1%,0) scale(1.12)} }
@keyframes fogSlide { from{transform:translate3d(-2%,0,0)} to{transform:translate3d(3%,0,0)} }
@keyframes fogSlideFront { from{transform:translate3d(3%,0,0)} to{transform:translate3d(-2%,0,0)} }
@keyframes waterShimmer { 0%,100%{opacity:.48;transform:translateX(-.5%) scaleY(.98)} 50%{opacity:.82;transform:translateX(.5%) scaleY(1.04)} }
@keyframes beaconBlink { 0%,10%,100%{opacity:.18} 11%,16%{opacity:1} 17%,23%{opacity:.25} 24%,27%{opacity:.82} 28%{opacity:.18} }

@media(max-width:820px){
 .hero-clouds{opacity:.42}
 .hero-fog-mid{bottom:16%;opacity:.36}
 .hero-fog-front{opacity:.30}
 .hero-water-light{height:30%}
 .hero-beacons i:nth-child(n+4){display:none}
}
@media(prefers-reduced-motion:reduce){
 .hero-clouds,.hero-fog,.hero-water-light,.hero-beacons i{animation:none}
}

/* =========================================================
   VIVID VIZIONZ — PRODUCTION PASS 2.2 "ENTER THE DEPARTMENTS"
   Premium interactive service worlds with depth and light
   ========================================================= */
.worlds-section {
    position: relative;
    isolation: isolate;
}
.worlds-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 8%;
    width: min(1100px, 94vw);
    height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(13, 112, 209, .13), rgba(4, 22, 46, .045) 48%, transparent 72%);
    filter: blur(18px);
    pointer-events: none;
}
.world-grid {
    perspective: 1400px;
}
.world-card {
    --mx: 50%;
    --my: 50%;
    min-height: 340px;
    padding: 30px 22px 28px;
    border-color: rgba(104, 187, 255, .16);
    background:
      radial-gradient(circle at var(--mx) var(--my), rgba(55, 170, 255, .16), transparent 31%),
      linear-gradient(155deg, rgba(15, 29, 49, .96), rgba(3, 7, 14, .98) 72%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 22px 70px rgba(0,0,0,.22);
    transform-style: preserve-3d;
    transition: transform .42s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.world-card::before {
    inset: -65%;
    opacity: .8;
}
.world-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(125,211,255,.42), transparent 27%, transparent 72%, rgba(12,101,206,.28)) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .28;
    pointer-events: none;
}
.world-card:hover {
    transform: translateY(-12px) rotateX(1.5deg);
    border-color: rgba(91, 197, 255, .68);
    box-shadow: 0 28px 72px rgba(0,0,0,.52), 0 0 34px rgba(0,126,255,.14), inset 0 0 44px rgba(20,133,232,.055);
}
.world-number {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    color: rgba(182, 215, 240, .34);
    font-size: .64rem;
    letter-spacing: .22em;
    transition: color .35s ease, text-shadow .35s ease;
}
.world-card:hover .world-number {
    color: rgba(157, 222, 255, .9);
    text-shadow: 0 0 12px rgba(56,176,255,.85);
}
.world-orbit {
    position: absolute;
    z-index: 0;
    width: 132px;
    height: 132px;
    left: -34px;
    top: -35px;
    border: 1px solid rgba(61, 177, 255, .14);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(0,107,255,.035);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
}
.world-orbit::before,
.world-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(126, 214, 255, .11);
}
.world-orbit::before { inset: 18px; }
.world-orbit::after { inset: 41px; background: rgba(31,153,255,.035); }
.world-card:hover .world-orbit {
    transform: scale(1.16) rotate(28deg);
    border-color: rgba(89,196,255,.38);
}
.card-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 68px;
    border-color: rgba(97, 195, 255, .30);
    background: radial-gradient(circle, rgba(16,124,220,.13), rgba(2,8,17,.64) 69%);
    transform: translateZ(28px);
    transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, color .35s ease;
}
.world-card:hover .card-icon {
    transform: translateZ(38px) translateY(-3px) scale(1.05);
    color: #c7eeff;
    box-shadow: inset 0 0 28px rgba(30,151,255,.16), 0 0 12px rgba(61,184,255,.34), 0 0 38px rgba(0,116,255,.18);
}
.world-card h3 {
    font-size: 1rem;
    transform: translateZ(20px);
}
.world-card p {
    min-height: 48px;
    line-height: 1.65;
    transform: translateZ(14px);
}
.world-card a {
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(102,177,234,.14);
    transform: translateZ(18px);
    transition: color .3s ease, border-color .3s ease, letter-spacing .3s ease;
}
.world-card:hover a {
    color: #bfeaff;
    border-color: rgba(88,190,255,.48);
    letter-spacing: .16em;
}
.world-card[data-service="motion"] .card-icon,
.world-card[data-service="world"] .card-icon { animation: serviceCorePulse 4.6s ease-in-out infinite; }
.world-card[data-service="direction"] .world-orbit { animation: orbitIdle 14s linear infinite; }
.world-card.is-visible {
    animation: serviceReveal .72s cubic-bezier(.2,.75,.2,1) both;
}
.world-card:nth-child(2).is-visible { animation-delay: .07s; }
.world-card:nth-child(3).is-visible { animation-delay: .14s; }
.world-card:nth-child(4).is-visible { animation-delay: .21s; }
.world-card:nth-child(5).is-visible { animation-delay: .28s; }
.world-card:nth-child(6).is-visible { animation-delay: .35s; }
@keyframes serviceReveal {
    from { opacity:0; transform:translateY(36px) scale(.965); filter:blur(5px); }
    to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes serviceCorePulse {
    0%,100% { box-shadow: inset 0 0 18px rgba(22,156,255,.08), 0 0 18px rgba(22,156,255,.10); }
    50% { box-shadow: inset 0 0 28px rgba(35,169,255,.15), 0 0 26px rgba(22,156,255,.22); }
}
@keyframes orbitIdle { to { transform: rotate(360deg); } }
@media (max-width: 1080px) {
    .world-card { min-height: 320px; }
}
@media (hover:none) {
    .world-card { background: linear-gradient(155deg, rgba(15,29,49,.96), rgba(3,7,14,.98) 72%); }
}
@media (prefers-reduced-motion: reduce) {
    .world-card, .world-card.is-visible, .world-orbit, .card-icon { animation:none !important; }
}


/* =========================================================
   v2.5 — TRUE-TO-FORM FEATURED WORLDS
   Built as live, responsive artwork rather than broken image placeholders.
   Official source art can replace each .world-art later without changing layout.
   ========================================================= */
.portfolio-section { position: relative; overflow: hidden; }
.portfolio-section::before {
    content: "";
    position: absolute;
    inset: 5% -15% auto;
    height: 70%;
    background: radial-gradient(circle at 50% 35%, rgba(22,126,255,.10), transparent 62%);
    pointer-events: none;
}
.portfolio-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding-bottom: 0;
}
.portfolio-card {
    --px: 50%;
    --py: 50%;
    isolation: isolate;
    min-height: 390px;
    border-radius: 4px;
    cursor: pointer;
    transform: translateY(28px);
    opacity: 0;
    transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .65s ease, border-color .35s ease, box-shadow .35s ease;
}
.portfolio-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(320px circle at var(--px) var(--py), rgba(255,255,255,.14), transparent 55%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.portfolio-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 0 35px rgba(0,0,0,.4);
    pointer-events: none;
}
.portfolio-card.is-visible { opacity: 1; transform: translateY(0); }
.portfolio-card:nth-child(2).is-visible { transition-delay: .06s; }
.portfolio-card:nth-child(3).is-visible { transition-delay: .12s; }
.portfolio-card:nth-child(4).is-visible { transition-delay: .18s; }
.portfolio-card:nth-child(5).is-visible { transition-delay: .24s; }
.portfolio-card:nth-child(6).is-visible { transition-delay: .30s; }
.portfolio-card:hover,
.portfolio-card:focus-visible {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(79,176,255,.5);
    box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 0 34px rgba(19,135,255,.13);
    outline: none;
}
.portfolio-card:hover::before,
.portfolio-card:focus-visible::before { opacity: 1; }
.world-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease;
}
.portfolio-card:hover .world-art,
.portfolio-card:focus-visible .world-art { transform: scale(1.045); }
.portfolio-overlay {
    z-index: 6;
    padding: 92px 24px 23px;
    background: linear-gradient(transparent, rgba(2,3,6,.72) 34%, rgba(2,3,6,.98));
    transform: none;
}
.portfolio-overlay::before {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 18px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .5s ease;
}
.portfolio-card:hover .portfolio-overlay::before { width: calc(100% - 48px); }
.portfolio-index {
    display: block;
    margin-bottom: 9px;
    color: rgba(255,255,255,.42);
    font-size: .65rem;
    letter-spacing: .22em;
}
.portfolio-overlay h3 { font-size: 1.02rem; }
.portfolio-overlay p { margin-top: 7px; font-size: .68rem; }

/* OFFICIAL WORLD ASSETS */
.world-art {
    isolation: isolate;
    background: #040609;
}
.world-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.06) 48%, rgba(0,0,0,.42));
    pointer-events: none;
}
.world-logo {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-position: center;
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease, opacity .6s ease;
}
.world-logo--contain {
    object-fit: contain;
    padding: 22px 28px 74px;
}
.world-logo--wide,
.world-logo--cover {
    object-fit: cover;
}
.world-logo--homepage {
    object-fit: contain;
    padding: 8px 10px 78px;
}
.world-logo--negro {
    object-fit: contain;
    padding: 34px 42px 112px;
    transform: translateY(-4px);
}
.portfolio-card:hover .world-logo--negro,
.portfolio-card:focus-visible .world-logo--negro {
    transform: translateY(-4px) scale(1.025);
}
.portfolio-card:hover .world-logo,
.portfolio-card:focus-visible .world-logo {
    transform: scale(1.035);
    filter: contrast(1.05) saturate(1.08);
}
.world-light-sweep,
.world-smoke,
.world-electric-pulse,
.world-waveform,
.world-metal-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* MILL¥EN DOLLA BABIE$ */
.world-mysb { background:#050402; }
.world-mysb .world-art { background:radial-gradient(circle at 50% 38%,rgba(218,168,65,.22),transparent 38%),linear-gradient(155deg,#171006,#030302 72%); }
.world-mysb .world-logo { filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)); }
.world-mysb .world-light-sweep {
    inset:-55%;
    background:conic-gradient(from 220deg,transparent 0 39%,rgba(255,220,132,.17) 44%,transparent 50% 100%);
    animation:officialLuxurySweep 8s linear infinite;
}
@keyframes officialLuxurySweep { to { transform:rotate(360deg); } }

/* THIS LIFE OF SIN */
.world-this-life { background:#090603; }
.world-this-life .world-art { background:radial-gradient(circle at 65% 35%,rgba(140,81,24,.19),transparent 44%),#050403; }
.world-this-life .world-logo { object-position:center; }
.world-this-life .world-smoke {
    background:
        radial-gradient(ellipse at 20% 65%,rgba(200,194,182,.14),transparent 36%),
        radial-gradient(ellipse at 72% 35%,rgba(159,147,126,.12),transparent 30%);
    filter:blur(14px);
    opacity:.45;
    animation:sinSmoke 8s ease-in-out infinite alternate;
}
@keyframes sinSmoke { from{transform:translate3d(-3%,2%,0) scale(1)} to{transform:translate3d(4%,-2%,0) scale(1.08)} }

/* CAPTAIN LIGHTING STAR */
.world-captain { background:#020917; }
.world-captain .world-art { background:radial-gradient(circle at 50% 43%,rgba(25,145,255,.25),transparent 42%),linear-gradient(145deg,#071c38,#01050d 80%); }
.world-captain .world-electric-pulse {
    opacity:0;
    background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.92) 49%,rgba(47,164,255,.85) 50%,transparent 57%);
    transform:translateX(-80%);
}
.world-captain:hover .world-electric-pulse,
.world-captain:focus-visible .world-electric-pulse { animation:electricFlash .75s ease-out; }
@keyframes electricFlash { 0%{opacity:0;transform:translateX(-85%)} 28%{opacity:.8} 100%{opacity:0;transform:translateX(85%)} }

.world-hero-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 5%;
    background: #000;
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease;
}

.world-captain:hover .world-hero-video,
.world-captain:focus-visible .world-hero-video {
    transform: scale(1.035);
    filter: contrast(1.04) saturate(1.08);
}

/* TEARS FOR THE WEAK, WINE ON THE WEEKEND */
.world-podcast { background:#100305; }
.world-podcast .world-art { background:radial-gradient(circle at 50% 38%,rgba(174,20,37,.23),transparent 43%),linear-gradient(145deg,#21060b,#050203 76%); }
.world-podcast .world-waveform {
    top:auto;
    bottom:72px;
    height:44px;
    left:8%;
    right:8%;
    opacity:.32;
    background:repeating-linear-gradient(90deg,rgba(226,34,54,.75) 0 2px,transparent 2px 11px);
    clip-path:polygon(0 47%,4% 47%,6% 28%,8% 68%,10% 40%,13% 53%,16% 18%,19% 79%,22% 37%,25% 55%,29% 7%,32% 90%,35% 41%,39% 59%,43% 24%,47% 74%,51% 33%,55% 61%,59% 12%,63% 85%,67% 38%,72% 56%,76% 26%,80% 70%,84% 42%,88% 54%,92% 34%,96% 60%,100% 47%,100% 53%,96% 53%,92% 66%,88% 46%,84% 58%,80% 30%,76% 74%,72% 44%,67% 62%,63% 15%,59% 88%,55% 39%,51% 67%,47% 26%,43% 76%,39% 41%,35% 59%,32% 10%,29% 93%,25% 45%,22% 63%,19% 21%,16% 82%,13% 47%,10% 60%,8% 32%,6% 72%,4% 53%,0 53%);
    animation:podcastBreath 2.6s ease-in-out infinite;
}
@keyframes podcastBreath { 50%{opacity:.7;transform:scaleY(1.18)} }

/* NEGRO MEXICANO */
.world-negro { background:#070504; }
.world-negro .world-art { background:radial-gradient(circle at 50% 42%,rgba(190,121,39,.18),transparent 42%),linear-gradient(145deg,#151006,#030302 78%); }
.world-negro .world-metal-shine {
    inset:-50%;
    opacity:0;
    background:linear-gradient(105deg,transparent 44%,rgba(255,231,166,.30) 49%,rgba(255,255,255,.45) 50%,transparent 56%);
    transform:translateX(-62%);
}
.world-negro:hover .world-metal-shine,
.world-negro:focus-visible .world-metal-shine { animation:metalPass 1s ease-out; }
@keyframes metalPass { 0%{opacity:0;transform:translateX(-62%)} 25%{opacity:.75} 100%{opacity:0;transform:translateX(62%)} }

@media (max-width: 980px) {
    .portfolio-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-card { min-height: 355px; }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-card,.portfolio-card.is-visible,.world-art,.world-hero-video,.world-light-sweep,.world-smoke,.world-electric-pulse,.world-waveform,.world-metal-shine { animation:none !important; transition:none !important; transform:none; opacity:1; }
}


.world-intro{text-align:center;max-width:700px;margin:0 auto 40px;color:#ddd;font-size:1.1rem;letter-spacing:.03em;}

/* BUILD 10 — WEBSITE-SPECIFIC WORLD IDENTITIES */
.world-this-life .world-logo--homepage,
.world-podcast .world-logo--homepage {
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.42));
}
.world-this-life .world-art::after,
.world-podcast .world-art::after {
    background: linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.03) 55%, rgba(0,0,0,.38));
}
@media (max-width: 620px) {
    .world-logo--homepage { padding: 8px 10px 84px; }
    .world-logo--negro { padding: 30px 38px 118px; }
}

/* BUILD 11 — per-world homepage framing refinements */
.world-negro .world-logo--negro {
    inset: auto;
    top: 10px;
    left: 50%;
    width: 66%;
    height: auto;
    padding: 0;
    object-fit: contain;
    transform: translateX(-50%);
    transform-origin: center top;
}
.world-negro:hover .world-logo--negro,
.world-negro:focus-visible .world-logo--negro {
    transform: translateX(-50%) scale(1.02);
}
.world-podcast .world-logo--homepage {
    inset: auto;
    top: 8px;
    left: 50%;
    width: 72%;
    height: auto;
    padding: 0;
    object-fit: contain;
    transform: translateX(-50%);
    transform-origin: center top;
}
.world-podcast:hover .world-logo--homepage,
.world-podcast:focus-visible .world-logo--homepage {
    transform: translateX(-50%) scale(1.02);
}

@media (max-width: 900px) {
    .world-negro .world-logo--negro { width: 62%; }
    .world-podcast .world-logo--homepage { width: 68%; }
}

@media (max-width: 620px) {
    .world-negro .world-logo--negro { width: 70%; }
    .world-podcast .world-logo--homepage { width: 76%; }
}

/* =========================================================
   BUILD 12 — GALLERY COHESION + ORIGINAL TYPOGRAPHY PASS
   Purpose: balance the six official world identities and
   restore the clean, widely tracked typography of the
   original Vivid Vizionz homepage reference.
   ========================================================= */

:root {
    --display-font: "Avenir Next", "Century Gothic", Futura, "Helvetica Neue", Arial, sans-serif;
    --body-font: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--body-font);
    font-weight: 400;
}

.brand,
.main-navigation a,
.social-links a,
.eyebrow,
.section-label,
.section-heading h2,
.text-link,
.portfolio-index,
.portfolio-overlay h3,
.portfolio-overlay p,
.primary-button,
.hero-slogan {
    font-family: var(--display-font);
}

.main-navigation {
    gap: clamp(24px, 2.6vw, 42px);
}

.main-navigation a {
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .135em;
}

.main-navigation .nav-button {
    padding: 10px 18px;
}

.section-heading {
    margin-bottom: 38px;
}

.section-label {
    font-size: .69rem;
    font-weight: 500;
    letter-spacing: .36em;
}

.section-heading h2 {
    margin-top: 8px;
    font-size: clamp(1.55rem, 2.65vw, 2.45rem);
    font-weight: 300;
    letter-spacing: .185em;
    line-height: 1.15;
}

.text-link {
    font-weight: 400;
    letter-spacing: .16em;
}

.portfolio-overlay {
    padding: 92px 24px 22px;
}

.portfolio-index {
    margin-bottom: 8px;
    font-size: .63rem;
    font-weight: 400;
    letter-spacing: .25em;
}

.portfolio-overlay h3 {
    font-size: .98rem;
    font-weight: 500;
    letter-spacing: .095em;
    line-height: 1.3;
    text-transform: uppercase;
}

.portfolio-overlay p {
    margin-top: 7px;
    color: var(--blue-bright);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .105em;
    line-height: 1.45;
    text-transform: uppercase;
}

/* Consistent visual weight: purpose-built framing for each square asset. */
.world-mysb .world-logo--contain,
.world-captain .world-logo--contain {
    inset: auto;
    left: 50%;
    height: auto;
    padding: 0;
    object-fit: contain;
    transform: translateX(-50%);
    transform-origin: center top;
}

.world-mysb .world-logo--contain {
    top: 8px;
    width: 72%;
}

.world-captain .world-logo--contain {
    top: 10px;
    width: 76%;
}

.world-mysb:hover .world-logo--contain,
.world-mysb:focus-visible .world-logo--contain,
.world-captain:hover .world-logo--contain,
.world-captain:focus-visible .world-logo--contain {
    transform: translateX(-50%) scale(1.02);
}

/* Preserve the already-approved Build 11 framing. */
.world-negro .world-logo--negro,
.world-podcast .world-logo--homepage {
    will-change: transform;
}

@media (max-width: 900px) {
    .world-mysb .world-logo--contain { width: 68%; }
    .world-captain .world-logo--contain { width: 72%; }
}

@media (max-width: 620px) {
    .section-heading h2 { letter-spacing: .14em; }
    .portfolio-overlay h3 { letter-spacing: .075em; }
    .world-mysb .world-logo--contain { width: 76%; }
    .world-captain .world-logo--contain { width: 80%; }
}

/* =========================================================
   BUILD 13 — TYPOGRAPHY LOCK + THIS LIFE OF SIN FRAMING
   ========================================================= */
:root {
    --display-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --body-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html,
body,
button,
input,
textarea,
select {
    font-family: var(--body-font) !important;
}

.brand,
.main-navigation a,
.social-links a,
.eyebrow,
.hero-title,
.hero-slogan,
.section-label,
.section-heading h2,
.text-link,
.world-number,
.world-card h3,
.world-card p,
.portfolio-index,
.portfolio-overlay h3,
.portfolio-overlay p,
.primary-button,
.secondary-button,
.footer-content {
    font-family: var(--display-font) !important;
}

.brand {
    font-weight: 300;
    letter-spacing: .24em;
}

.main-navigation a {
    font-weight: 300 !important;
    letter-spacing: .16em !important;
}

.eyebrow,
.section-label {
    font-weight: 400 !important;
    letter-spacing: .34em !important;
}

.section-heading h2 {
    font-weight: 300 !important;
    letter-spacing: .20em !important;
    text-transform: uppercase;
}

.portfolio-index {
    font-weight: 300 !important;
    letter-spacing: .28em !important;
}

.portfolio-overlay h3 {
    font-weight: 400 !important;
    letter-spacing: .14em !important;
}

.portfolio-overlay p {
    font-weight: 400 !important;
    letter-spacing: .16em !important;
}

/* Give the crown and full cinematic artwork clear breathing room. */
.world-this-life .world-logo--homepage {
    inset: auto;
    top: 12px;
    left: 50%;
    width: 92%;
    height: auto;
    padding: 0;
    object-fit: contain;
    transform: translateX(-50%);
    transform-origin: center top;
}

.world-this-life:hover .world-logo--homepage,
.world-this-life:focus-visible .world-logo--homepage {
    transform: translateX(-50%) scale(1.02);
}

@media (max-width: 900px) {
    .world-this-life .world-logo--homepage { width: 89%; }
}

@media (max-width: 620px) {
    .main-navigation a { letter-spacing: .11em !important; }
    .section-heading h2 { letter-spacing: .15em !important; }
    .portfolio-overlay h3 { letter-spacing: .105em !important; }
    .portfolio-overlay p { letter-spacing: .12em !important; }
    .world-this-life .world-logo--homepage { width: 94%; }
}

/* =========================================================
   BUILD 14 — ORIGINAL MOCKUP TYPOGRAPHY MATCH
   Reference system: Orbitron headings + Rajdhani body text.
   Layout, artwork, card sizing, and approved world framing
   remain unchanged.
   ========================================================= */

:root {
    --display-font: "Orbitron", "Eurostile", "Microgramma D Extended", "Arial Narrow", sans-serif;
    --body-font: "Rajdhani", "Avenir Next Condensed", "Arial Narrow", sans-serif;
}

html,
body,
button,
input,
textarea,
select {
    font-family: var(--body-font) !important;
}

/* Mockup display language: squared, futuristic, widely tracked. */
.brand,
.eyebrow,
.hero h1,
.section-label,
.section-heading h2,
.cta-section h2,
.world-card h3,
.portfolio-overlay h3,
.process-step h3 {
    font-family: var(--display-font) !important;
}

/* Mockup interface/body language: narrow, refined, highly legible. */
.main-navigation a,
.social-links a,
.hero-slogan,
.primary-button,
.secondary-button,
.scroll-indicator,
.text-link,
.world-number,
.world-card p,
.world-card a,
.portfolio-index,
.portfolio-overlay p,
.process-number,
.process-step p,
.site-footer,
.intro-skip,
.intro-sound {
    font-family: var(--body-font) !important;
}

.brand {
    font-weight: 500;
    letter-spacing: .18em;
}

.main-navigation a {
    font-size: .78rem;
    font-weight: 500 !important;
    letter-spacing: .055em !important;
}

.eyebrow {
    font-size: .74rem;
    font-weight: 500 !important;
    letter-spacing: .30em !important;
}

.hero h1 {
    font-weight: 500;
    letter-spacing: .12em;
}

.hero-slogan {
    font-size: clamp(.84rem, 1.35vw, 1.04rem);
    font-weight: 500;
    letter-spacing: .16em;
}

.primary-button,
.secondary-button,
.text-link {
    font-weight: 500;
    letter-spacing: .10em !important;
}

.section-label {
    font-size: .76rem;
    font-weight: 500 !important;
    letter-spacing: .23em !important;
}

.section-heading h2 {
    font-weight: 400 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
}

.world-number,
.portfolio-index,
.process-number {
    font-weight: 500 !important;
    letter-spacing: .16em !important;
}

.world-card h3,
.portfolio-overlay h3,
.process-step h3 {
    font-weight: 500 !important;
    letter-spacing: .075em !important;
}

.world-card p,
.portfolio-overlay p,
.process-step p {
    font-weight: 400 !important;
    letter-spacing: .035em !important;
}

.portfolio-overlay p {
    letter-spacing: .09em !important;
}

@media (max-width: 620px) {
    .main-navigation a { letter-spacing: .04em !important; }
    .section-heading h2 { letter-spacing: .095em !important; }
    .portfolio-overlay h3 { letter-spacing: .055em !important; }
    .portfolio-overlay p { letter-spacing: .07em !important; }
}

/* =========================================================
   WEBSITE (16) — ORIGINAL MOCKUP SERVICE ICONS
   Exact icon artwork extracted from the approved design kit.
   Typography, layout, portfolio worlds, and all locked areas
   remain untouched.
   ========================================================= */
.world-card .card-icon {
    width: 100%;
    height: 84px;
    margin: 0 0 42px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.world-card .card-icon img {
    display: block;
    width: 122px;
    height: 74px;
    max-width: 100%;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: screen;
    filter: saturate(1.05) contrast(1.03);
    pointer-events: none;
}


/* =========================================================
   WEBSITE (21) — BLACK-BACKGROUND ICON INTEGRATION
   Built from Website (12), with the original six-card
   structure preserved. The section now shares the exact
   black visual environment of the supplied icon artwork.
   ========================================================= */

.worlds-section {
    position: relative;
    background: #000;
}

.worlds-section .section-heading,
.worlds-section .world-grid {
    position: relative;
    z-index: 1;
}

.world-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.world-card {
    position: relative;
    min-height: 340px;
    padding: 22px 21px 24px;
    display: flex;
    flex-direction: column;
    background: #000;
    border: 1px solid rgba(59, 136, 190, .34);
    overflow: hidden;
    box-shadow: none;
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.world-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 19, 35, .30), transparent 44%);
    pointer-events: none;
    transform: none;
    transition: opacity .28s ease;
}

.world-card::after {
    content: "";
    position: absolute;
    left: 21px;
    right: 21px;
    top: 159px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(44, 184, 255, .28) 18%,
        rgba(57, 199, 255, .58) 50%,
        rgba(44, 184, 255, .28) 82%,
        transparent
    );
    box-shadow: 0 0 8px rgba(44, 184, 255, .16);
    pointer-events: none;
}

.world-card .world-orbit {
    display: none;
}

.card-icon {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 122px;
    margin: 2px 0 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    overflow: hidden;
}

.card-icon img {
    display: block;
    width: auto;
    height: 105px;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
    filter: none;
    opacity: 1;
}

.world-card h3,
.world-card p,
.world-card a {
    position: relative;
    z-index: 1;
}

.world-card h3 {
    margin: 0 0 10px;
    min-height: 43px;
    font-size: .98rem;
    line-height: 1.22;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.world-card p {
    margin: 0 0 18px;
    min-height: 50px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.6;
}

.world-card a {
    position: static;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(61, 125, 168, .25);
    color: var(--blue-bright);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.world-number {
    z-index: 2;
    top: 14px;
    right: 14px;
    color: rgba(149, 182, 207, .50);
}

.world-card:hover {
    transform: translateY(-4px);
    border-color: rgba(69, 187, 245, .62);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}

.world-card:hover::before {
    opacity: .72;
}

.world-card:hover .card-icon img {
    filter: drop-shadow(0 0 9px rgba(39, 145, 255, .20));
}

/* Keep the full six-card composition on desktop while remaining responsive. */
@media (max-width: 1180px) {
    .world-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

    .world-card {
        min-height: 326px;
    }
}


/* =========================================================
   WEBSITE (21) — APPROVED ALICO HERO BUILD
   Uses the exact approved skyline composition as the live
   hero asset. The real site header remains functional.
   ========================================================= */

.hero {
    min-height: min(1029px, calc(100vw * 0.736));
    background:
        #02050c url("../assets/images/vivid-hero-alico-approved.webp")
        center top / cover no-repeat;
    padding: 0;
}

/* The approved composition already contains the complete hero treatment. */
.hero-background,
.hero-content,
.hero .scroll-indicator {
    display: none !important;
}

/* Real social network icons */
.social-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-links a {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.92);
    opacity: .92;
    transition: color .25s ease, opacity .25s ease, transform .25s ease,
                filter .25s ease;
}

.social-links svg {
    width: 20px;
    height: 20px;
    overflow: visible;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.55;
}

.social-links svg rect,
.social-links svg circle {
    fill: none;
}

.social-links svg .social-dot {
    fill: currentColor;
    stroke: none;
}

.social-links a:hover {
    color: #20bdff;
    opacity: 1;
    transform: translateY(-2px);
    filter: drop-shadow(0 0 8px rgba(32,189,255,.48));
}

@media (max-width: 900px) {
    .hero {
        min-height: 78vh;
        background-size: auto 100%;
        background-position: center top;
    }
}

@media (max-width: 620px) {
    .hero {
        min-height: 72vh;
        background-size: auto 100%;
    }

    .social-links {
        gap: 13px;
    }

    .social-links a {
        width: 22px;
        height: 22px;
    }

    .social-links svg {
        width: 18px;
        height: 18px;
    }
}


/* =========================================================
   BUILD 17 — CAPTAIN LIGHTING STAR ANIMATED WORLD
   ========================================================= */
.world-page--captain {
    --captain-blue: #1aa8ff;
    --captain-gold: #ffd448;
    --captain-green: #3fdb72;
    --sin-gold-bright: var(--captain-gold);
    background:
        radial-gradient(circle at 68% 18%, rgba(16, 111, 255, .22), transparent 31%),
        radial-gradient(circle at 30% 72%, rgba(10, 56, 126, .14), transparent 38%),
        #01040a;
}

.world-page--captain .site-header {
    background: rgba(1, 5, 13, .76);
    border-bottom-color: rgba(57, 178, 255, .2);
}

.world-page--captain .sin-sound-toggle {
    border-color: rgba(26, 168, 255, .48);
    background: rgba(1, 5, 13, .88);
    color: #d9f5ff;
}

.captain-world {
    overflow: hidden;
}

.captain-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(390px, .72fr);
    align-items: center;
    gap: clamp(34px, 6vw, 110px);
    min-height: 100svh;
    padding: 118px max(5vw, 28px) 82px;
}

.captain-hero::before,
.captain-hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    pointer-events: none;
}

.captain-hero::before {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(1, 4, 10, .94) 0%, rgba(1, 4, 10, .72) 42%, rgba(1, 4, 10, .15) 70%, rgba(1, 4, 10, .52) 100%),
        repeating-linear-gradient(90deg, transparent 0 119px, rgba(60, 172, 255, .035) 120px),
        repeating-linear-gradient(0deg, transparent 0 119px, rgba(60, 172, 255, .025) 120px);
}

.captain-hero::after {
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(73, 192, 255, .68), transparent);
    box-shadow: 0 0 28px rgba(25, 158, 255, .65);
}

.captain-hero-atmosphere,
.captain-star-field {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.captain-star-field {
    opacity: .62;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255,255,255,.9) 0 1px, transparent 1.6px),
        radial-gradient(circle at 32% 68%, rgba(85,200,255,.8) 0 1px, transparent 1.7px),
        radial-gradient(circle at 58% 16%, rgba(255,212,72,.7) 0 1px, transparent 1.6px),
        radial-gradient(circle at 74% 64%, rgba(255,255,255,.8) 0 1px, transparent 1.6px),
        radial-gradient(circle at 88% 28%, rgba(85,200,255,.9) 0 1px, transparent 1.8px);
    background-size: 280px 280px, 360px 360px, 430px 430px, 510px 510px, 620px 620px;
    animation: captainStars 14s ease-in-out infinite alternate;
}

.captain-energy-ring {
    position: absolute;
    top: 50%;
    right: clamp(-160px, 2vw, 34px);
    width: min(62vw, 850px);
    aspect-ratio: 1;
    border: 1px solid rgba(49, 178, 255, .2);
    border-radius: 50%;
    box-shadow:
        inset 0 0 44px rgba(25, 152, 255, .06),
        0 0 38px rgba(25, 152, 255, .08);
    transform: translateY(-50%);
}

.captain-energy-ring--one {
    animation: captainRing 5s ease-in-out infinite;
}

.captain-energy-ring--two {
    width: min(46vw, 630px);
    right: clamp(-45px, 8vw, 126px);
    border-color: rgba(255, 214, 72, .12);
    animation: captainRing 5s 1.25s ease-in-out infinite reverse;
}

.captain-lightning {
    position: absolute;
    width: 2px;
    height: 36%;
    opacity: .22;
    background: linear-gradient(transparent, #74cfff 22%, #fff 48%, #48b7ff 68%, transparent);
    filter: drop-shadow(0 0 8px #159cff);
    clip-path: polygon(44% 0, 100% 0, 60% 42%, 100% 42%, 0 100%, 38% 55%, 0 55%);
}

.captain-lightning--left {
    left: 44%;
    top: 12%;
    transform: rotate(18deg);
    animation: captainBolt 4.2s ease-in-out infinite;
}

.captain-lightning--right {
    right: 7%;
    bottom: 8%;
    transform: rotate(-22deg);
    animation: captainBolt 4.2s 1.7s ease-in-out infinite;
}

.captain-hero-copy {
    position: relative;
    z-index: 4;
    max-width: 700px;
}

.captain-kicker {
    color: var(--captain-blue);
    font-family: var(--display-font);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .38em;
    text-transform: uppercase;
}

.captain-hero h1 {
    margin-top: 20px;
    font-family: var(--display-font);
    font-size: clamp(3.2rem, 7.1vw, 7.6rem);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .78;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff 4%, #d6e5f4 48%, #7ba3c3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 18px 46px rgba(0,0,0,.55));
}

.captain-hero h1 span {
    display: block;
    margin-bottom: .12em;
    color: var(--captain-gold);
    font-size: .46em;
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1;
    -webkit-text-fill-color: var(--captain-gold);
    text-shadow: 0 0 26px rgba(255, 202, 45, .24);
}

.captain-tagline {
    margin-top: 30px;
    color: #f2f8ff;
    font-family: var(--display-font);
    font-size: clamp(.78rem, 1.2vw, 1rem);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.captain-introduction {
    max-width: 580px;
    margin-top: 18px;
    color: #92a6ba;
    font-size: clamp(.92rem, 1.3vw, 1.08rem);
    line-height: 1.75;
}

.captain-story-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    color: rgba(255,255,255,.55);
    font-family: var(--display-font);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.captain-story-meta::before {
    content: "";
    width: 42px;
    height: 1px;
    background: var(--captain-gold);
    box-shadow: 0 0 12px rgba(255, 212, 72, .45);
}

.captain-story-meta strong {
    color: var(--captain-gold);
    font-weight: 500;
}

.captain-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px 28px;
    margin-top: 34px;
}

.captain-replay {
    cursor: pointer;
    font-family: inherit;
}

.captain-back-link {
    color: #91a7bb;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .25s ease;
}

.captain-back-link:hover {
    color: var(--captain-blue);
}

.captain-motion-stage {
    position: relative;
    z-index: 2;
    justify-self: center;
    width: min(100%, 570px);
    height: min(78vh, 850px);
    min-height: 560px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(68, 180, 255, .13);
    box-shadow: 0 0 70px rgba(19, 119, 210, .1);
}

.captain-motion-stage::before {
    content: "";
    position: absolute;
    inset: 4% -8% 8%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(22, 156, 255, .18), transparent 63%);
    filter: blur(18px);
}

.captain-motion-aura {
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: -1;
    width: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 209, 54, .13), rgba(22, 156, 255, .13) 38%, transparent 70%);
    filter: blur(4px);
    transform: translate(-50%, -50%);
    animation: captainAura 2s ease-in-out infinite;
}

.captain-hero-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 38%, #000 58%, rgba(0,0,0,.9) 72%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 50% at 50% 38%, #000 58%, rgba(0,0,0,.9) 72%, transparent 100%);
    filter: drop-shadow(0 32px 34px rgba(0,0,0,.72));
    transform: scale(1.42);
    transform-origin: 50% 18%;
}

.captain-motion-stage figcaption {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90%;
    color: rgba(169, 205, 231, .62);
    font-family: var(--display-font);
    font-size: .58rem;
    letter-spacing: .28em;
    text-align: center;
    text-transform: uppercase;
}

.captain-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%);
    color: rgba(168, 197, 220, .55);
    font-size: .56rem;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.captain-scroll-cue i {
    width: 1px;
    height: 28px;
    background: linear-gradient(var(--captain-blue), transparent);
    animation: captainScroll 1.8s ease-in-out infinite;
}

.captain-feature {
    position: relative;
    width: min(1320px, 90%);
    margin: 0 auto;
    padding: clamp(88px, 10vw, 150px) 0;
}

.captain-feature-heading {
    display: grid;
    grid-template-columns: minmax(230px, .7fr) 1fr;
    gap: 12px 80px;
    align-items: end;
    max-width: 1020px;
}

.captain-feature-heading .section-label {
    grid-column: 1 / -1;
}

.captain-feature-heading h2,
.captain-world-cta h2 {
    font-family: var(--display-font);
    font-size: clamp(2rem, 4.6vw, 5rem);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: 1;
    text-transform: uppercase;
}

.captain-feature-heading > p:last-child {
    color: #899db0;
    line-height: 1.8;
}

.captain-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 62px;
    background: rgba(77, 182, 255, .16);
    border: 1px solid rgba(77, 182, 255, .16);
}

.captain-feature-grid article {
    min-height: 260px;
    padding: 40px 34px;
    background: linear-gradient(145deg, rgba(9, 24, 44, .95), rgba(2, 7, 15, .98));
}

.captain-feature-grid span {
    color: var(--captain-gold);
    font-size: .64rem;
    letter-spacing: .22em;
}

.captain-feature-grid h3 {
    margin-top: 60px;
    font-family: var(--display-font);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.captain-feature-grid p {
    margin-top: 14px;
    color: #7f94a8;
    font-size: .86rem;
    line-height: 1.65;
}

.captain-world-cta {
    width: min(1320px, 90%);
    margin: 0 auto clamp(50px, 7vw, 100px);
    padding: clamp(70px, 9vw, 120px) 28px;
    border: 1px solid rgba(68, 177, 255, .2);
    background:
        linear-gradient(90deg, rgba(2,9,20,.92), rgba(2,9,20,.48), rgba(2,9,20,.92)),
        radial-gradient(circle at 50% 35%, rgba(22,156,255,.23), transparent 42%);
    text-align: center;
}

.captain-world-cta h2 {
    margin-top: 16px;
    color: var(--captain-gold);
    text-shadow: 0 0 34px rgba(255, 212, 72, .18);
}

.captain-world-cta > p:not(.section-label) {
    margin: 16px 0 30px;
    color: #91a7bb;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

@keyframes captainStars {
    from { opacity: .38; transform: translate3d(0, 0, 0); }
    to { opacity: .7; transform: translate3d(-12px, 8px, 0); }
}

@keyframes captainRing {
    0%, 100% { opacity: .26; transform: translateY(-50%) scale(.96); }
    50% { opacity: .72; transform: translateY(-50%) scale(1.035); }
}

@keyframes captainBolt {
    0%, 18%, 100% { opacity: .06; }
    20% { opacity: .58; }
    24% { opacity: .1; }
    27% { opacity: .42; }
    31% { opacity: .08; }
}

@keyframes captainAura {
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
    50% { opacity: .9; transform: translate(-50%, -50%) scale(1.07); }
}

@keyframes captainScroll {
    0%, 100% { opacity: .25; transform: scaleY(.65); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@media (max-width: 1050px) {
    .captain-hero {
        grid-template-columns: minmax(0, .85fr) minmax(340px, .65fr);
        gap: 30px;
    }

    .captain-hero h1 {
        font-size: clamp(3rem, 7vw, 5.5rem);
    }

    .captain-motion-stage {
        min-height: 500px;
        height: 70vh;
    }
}

@media (max-width: 820px) {
    .captain-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 125px 7vw 76px;
        text-align: center;
    }

    .captain-hero::before {
        background: linear-gradient(180deg, rgba(1,4,10,.92), rgba(1,4,10,.24) 52%, rgba(1,4,10,.78));
    }

    .captain-hero-copy {
        max-width: 680px;
        margin: 0 auto;
    }

    .captain-hero h1 {
        font-size: clamp(3.2rem, 13vw, 6.4rem);
    }

    .captain-introduction {
        margin-right: auto;
        margin-left: auto;
    }

    .captain-story-meta,
    .captain-actions {
        justify-content: center;
    }

    .captain-motion-stage {
        width: min(100%, 570px);
        height: min(80vh, 760px);
        min-height: 520px;
        margin: -20px auto 0;
    }

    .captain-scroll-cue {
        display: none;
    }

    .captain-feature-heading {
        grid-template-columns: 1fr;
    }

    .captain-feature-grid {
        grid-template-columns: 1fr;
    }

    .captain-feature-grid article {
        min-height: 210px;
    }

    .captain-feature-grid h3 {
        margin-top: 42px;
    }
}

@media (max-width: 540px) {
    .captain-hero {
        padding-right: 20px;
        padding-left: 20px;
    }

    .captain-kicker {
        letter-spacing: .24em;
    }

    .captain-hero h1 {
        letter-spacing: -.04em;
        line-height: .83;
    }

    .captain-hero h1 span {
        letter-spacing: .16em;
    }

    .captain-tagline {
        letter-spacing: .13em;
        line-height: 1.6;
    }

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

    .captain-replay {
        width: 100%;
        min-width: 0;
    }

    .captain-motion-stage {
        min-height: 470px;
        height: 66vh;
    }

    .captain-feature,
    .captain-world-cta {
        width: calc(100% - 32px);
    }

    .captain-feature-grid article {
        padding: 34px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .captain-star-field,
    .captain-energy-ring,
    .captain-lightning,
    .captain-motion-aura,
    .captain-scroll-cue i {
        animation: none !important;
    }

    .captain-motion-aura {
        opacity: .65;
    }

    .captain-hero-video {
        transform: scale(1.42);
    }
}

/* ================================================================
   THIS LIFE OF SIN — SOUNDTRACK WORLD
   ================================================================ */

.world-page--sin {
    --sin-gold: #d5a24b;
    --sin-gold-bright: #f1c56d;
    --sin-red: #a31818;
    --sin-purple: #8a33ca;
    --sin-paper: #e8dfcf;
    min-width: 320px;
    overflow-x: hidden;
    background: #030303;
    color: #f5f0e7;
}

.world-page--sin .world-page-header {
    background: linear-gradient(180deg, rgba(3,3,3,.96), rgba(3,3,3,.68), transparent);
}

.world-page--sin .section-label {
    color: var(--sin-gold);
}

.world-page--sin .section-label::before {
    background: var(--sin-red);
    box-shadow: 0 0 12px rgba(163, 24, 24, .35);
}

.sin-world {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 19%, rgba(128, 24, 19, .09), transparent 31%),
        radial-gradient(circle at 88% 61%, rgba(96, 36, 124, .08), transparent 35%),
        #030303;
}

.sin-hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(430px, .7fr);
    align-items: center;
    gap: clamp(40px, 6vw, 100px);
    padding: 130px max(6vw, 30px) 84px;
}

.sin-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(2,2,2,.98) 0%, rgba(2,2,2,.88) 43%, rgba(2,2,2,.3) 78%, rgba(2,2,2,.78) 100%),
        radial-gradient(ellipse at 75% 47%, rgba(209, 158, 60, .15), transparent 34%),
        linear-gradient(180deg, #020202, #080604 62%, #020202);
}

.sin-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 24%;
    background:
        linear-gradient(180deg, transparent, rgba(0,0,0,.96)),
        repeating-linear-gradient(90deg, transparent 0 5.8%, rgba(226,170,77,.08) 5.9% 6%);
    opacity: .8;
}

.sin-hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.sin-smoke {
    position: absolute;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 38%, rgba(214, 168, 83, .14), transparent 24%),
        radial-gradient(circle at 62% 58%, rgba(255,255,255,.06), transparent 25%),
        conic-gradient(from 90deg, transparent, rgba(153, 114, 57, .08), transparent, rgba(101, 35, 31, .11), transparent);
    filter: blur(30px);
    animation: sinSmoke 15s ease-in-out infinite alternate;
}

.sin-smoke--one {
    top: 1%;
    right: -15%;
}

.sin-smoke--two {
    left: 21%;
    bottom: -31%;
    animation-duration: 19s;
    animation-direction: alternate-reverse;
}

.sin-city-glow {
    position: absolute;
    right: 4%;
    bottom: 7%;
    width: 52%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(238, 184, 80, .75), transparent);
    box-shadow: 0 0 54px 15px rgba(219, 144, 45, .18);
}

.sin-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.sin-kicker,
.sin-tagline,
.sin-track-meta,
.sin-player-topline,
.sin-book-details > span {
    font-family: var(--display-font);
    text-transform: uppercase;
}

.sin-kicker {
    color: var(--sin-gold);
    font-size: clamp(.62rem, .8vw, .78rem);
    letter-spacing: .38em;
}

.sin-hero h1 {
    margin-top: 20px;
    color: var(--sin-paper);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4.4rem, 8.8vw, 9rem);
    font-weight: 400;
    letter-spacing: -.075em;
    line-height: .78;
    text-transform: uppercase;
    text-shadow: 0 12px 38px rgba(0,0,0,.82);
}

.sin-hero h1 span {
    display: block;
    margin-top: .11em;
    color: var(--sin-gold);
    font-size: .92em;
    letter-spacing: .015em;
    text-shadow: 0 0 38px rgba(220, 162, 65, .14);
}

.sin-tagline {
    margin-top: 34px;
    color: #f0e7d8;
    font-size: clamp(.78rem, 1.15vw, 1rem);
    letter-spacing: .23em;
}

.sin-introduction {
    max-width: 580px;
    margin-top: 18px;
    color: #aaa092;
    font-size: clamp(.94rem, 1.25vw, 1.08rem);
    line-height: 1.76;
}

.sin-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px 30px;
    margin-top: 36px;
}

.sin-story-link {
    border-color: rgba(221, 167, 73, .72);
    background: linear-gradient(110deg, rgba(155, 30, 23, .95), rgba(73, 8, 8, .96));
    box-shadow: 0 10px 45px rgba(110, 12, 12, .28);
}

.sin-story-link:hover {
    border-color: var(--sin-gold-bright);
    box-shadow: 0 16px 58px rgba(151, 22, 15, .38);
}

.sin-back-link {
    color: #a09688;
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: color .25s ease;
}

.sin-back-link:hover {
    color: var(--sin-gold-bright);
}

.sin-hero-art {
    position: relative;
    z-index: 2;
    justify-self: end;
    width: min(100%, 640px);
    margin: 0;
    border: 1px solid rgba(215, 161, 71, .18);
    background: #000;
    box-shadow: 0 30px 110px rgba(0,0,0,.9), 0 0 65px rgba(180, 115, 34, .08);
}

.sin-hero-art::before,
.sin-hero-art::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.sin-hero-art::before {
    inset: 0;
    border: 1px solid rgba(255,255,255,.025);
    box-shadow: inset 0 0 80px rgba(0,0,0,.48);
}

.sin-hero-art::after {
    inset: -1px;
    background: linear-gradient(130deg, transparent 45%, rgba(238, 189, 91, .09), transparent 62%);
    transform: translateX(-70%);
    animation: sinArtSweep 8s ease-in-out infinite;
}

.sin-hero-art img {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
    opacity: .94;
    filter: saturate(.9) contrast(1.04);
}

.sin-art-halo {
    position: absolute;
    inset: 10%;
    z-index: -1;
    background: radial-gradient(circle, rgba(224, 163, 59, .32), transparent 67%);
    filter: blur(28px);
}

.sin-hero-art figcaption {
    position: absolute;
    z-index: 3;
    right: 5%;
    bottom: 4%;
    color: rgba(238, 203, 136, .64);
    font-family: var(--display-font);
    font-size: .56rem;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.sin-soundtrack {
    position: relative;
    width: min(1320px, 90%);
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    align-items: center;
    gap: clamp(48px, 8vw, 120px);
    margin: 0 auto;
    padding: clamp(90px, 11vw, 160px) 0;
}

.sin-soundtrack::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 70vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(135, 19, 14, .11), transparent 65%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.sin-soundtrack-copy,
.sin-player {
    position: relative;
    z-index: 1;
}

.sin-soundtrack h2,
.sin-story h2,
.sin-books-heading h2,
.sin-world-cta h2 {
    margin-top: 16px;
    color: var(--sin-paper);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.7rem, 5.5vw, 6rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .95;
}

.sin-soundtrack h2 span {
    color: var(--sin-gold);
}

.sin-soundtrack-copy > p:not(.section-label),
.sin-books-heading > p:not(.section-label) {
    margin-top: 22px;
    color: #999084;
    line-height: 1.75;
}

.sin-track-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 28px;
    color: rgba(230, 195, 130, .7);
    font-size: .56rem;
    letter-spacing: .18em;
}

.sin-track-meta span + span::before {
    content: "•";
    margin-right: 24px;
    color: var(--sin-red);
}

.sin-player {
    --sin-progress: 0%;
    min-height: 420px;
    padding: clamp(34px, 5vw, 66px);
    overflow: hidden;
    border: 1px solid rgba(219, 169, 78, .22);
    background:
        linear-gradient(145deg, rgba(22,16,12,.98), rgba(5,4,4,.98)),
        #080605;
    box-shadow: 0 35px 100px rgba(0,0,0,.64);
}

.sin-player::before {
    content: "";
    position: absolute;
    inset: -60% -20%;
    background:
        repeating-radial-gradient(circle at center, transparent 0 17px, rgba(216, 166, 78, .035) 18px 19px),
        radial-gradient(circle at 72% 28%, rgba(134, 21, 18, .22), transparent 32%);
    opacity: .8;
    pointer-events: none;
}

.sin-player > * {
    position: relative;
    z-index: 1;
}

.sin-player-topline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sin-player-topline span {
    color: var(--sin-red);
    font-size: .56rem;
    letter-spacing: .28em;
}

.sin-player-topline strong {
    color: #eee5d7;
    font-size: clamp(.75rem, 1.15vw, 1rem);
    font-weight: 500;
    letter-spacing: .13em;
}

.sin-waveform {
    height: 118px;
    display: flex;
    align-items: center;
    gap: clamp(3px, .5vw, 8px);
    margin: 46px 0 40px;
}

.sin-waveform span {
    flex: 1;
    height: var(--wave, 22%);
    min-width: 3px;
    background: linear-gradient(180deg, var(--sin-gold-bright), var(--sin-red));
    box-shadow: 0 0 12px rgba(186, 58, 31, .12);
    opacity: .38;
    transform: scaleY(.45);
    transition: opacity .3s ease;
}

.sin-waveform span:nth-child(3n) { --wave: 68%; }
.sin-waveform span:nth-child(4n) { --wave: 92%; }
.sin-waveform span:nth-child(5n) { --wave: 48%; }
.sin-waveform span:nth-child(7n) { --wave: 78%; }
.sin-waveform span:nth-child(11n) { --wave: 100%; }

.sin-player.is-playing .sin-waveform span {
    opacity: .9;
    animation: sinWave .72s ease-in-out infinite alternate;
}

.sin-player.is-playing .sin-waveform span:nth-child(2n) { animation-delay: -.18s; }
.sin-player.is-playing .sin-waveform span:nth-child(3n) { animation-delay: -.36s; }
.sin-player.is-playing .sin-waveform span:nth-child(5n) { animation-delay: -.54s; }

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

.sin-play-button {
    min-width: 158px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 16px 20px;
    border: 1px solid rgba(218, 166, 78, .45);
    background: rgba(68, 9, 8, .66);
    color: #f2e8d7;
    font-family: var(--display-font);
    font-size: .62rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.sin-play-button:hover,
.sin-play-button:focus-visible {
    border-color: var(--sin-gold-bright);
    background: rgba(126, 18, 13, .82);
    transform: translateY(-2px);
}

.sin-play-icon {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--sin-gold-bright);
}

.sin-player.is-playing .sin-play-icon {
    width: 10px;
    height: 12px;
    border: 0;
    background: linear-gradient(90deg, var(--sin-gold-bright) 0 36%, transparent 36% 64%, var(--sin-gold-bright) 64%);
}

.sin-progress-wrap {
    min-width: 0;
}

.sin-progress-wrap input {
    --sin-progress: 0%;
    width: 100%;
    height: 18px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.sin-progress-wrap input::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(90deg, var(--sin-gold) 0 var(--sin-progress), rgba(255,255,255,.16) var(--sin-progress));
}

.sin-progress-wrap input::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -5px;
    -webkit-appearance: none;
    border-radius: 50%;
    background: var(--sin-gold-bright);
    box-shadow: 0 0 14px rgba(228, 177, 83, .55);
}

.sin-progress-wrap input::-moz-range-track {
    height: 2px;
    background: rgba(255,255,255,.16);
}

.sin-progress-wrap input::-moz-range-progress {
    height: 2px;
    background: var(--sin-gold);
}

.sin-progress-wrap input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--sin-gold-bright);
}

.sin-time {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    color: #776f65;
    font-size: .6rem;
    letter-spacing: .12em;
}

.sin-player noscript audio {
    width: 100%;
    margin-top: 24px;
}

.sin-story {
    width: min(1320px, 90%);
    display: grid;
    grid-template-columns: 1fr .82fr;
    align-items: end;
    gap: clamp(50px, 10vw, 160px);
    margin: 0 auto;
    padding: clamp(80px, 10vw, 145px) 0;
    border-top: 1px solid rgba(216, 163, 72, .15);
}

.sin-story h2 {
    font-size: clamp(2.9rem, 6.5vw, 7.3rem);
    line-height: .88;
}

.sin-story > p {
    max-width: 590px;
    padding-left: 28px;
    border-left: 1px solid rgba(183, 29, 22, .5);
    color: #aaa094;
    font-size: clamp(.94rem, 1.3vw, 1.12rem);
    line-height: 1.9;
}

.sin-books {
    width: min(1320px, 90%);
    margin: 0 auto;
    padding: clamp(80px, 9vw, 130px) 0 clamp(100px, 12vw, 170px);
}

.sin-books-heading {
    max-width: 760px;
}

.sin-books-heading h2 {
    font-size: clamp(2.7rem, 5.5vw, 5.8rem);
}

.sin-book-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(22px, 3vw, 42px);
    margin-top: 64px;
}

.sin-book-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
}

a.sin-book-card {
    transition: transform .35s ease;
}

a.sin-book-card:hover,
a.sin-book-card:focus-visible {
    transform: translateY(-10px);
}

.sin-book-cover {
    position: relative;
    aspect-ratio: 746 / 1024;
    overflow: hidden;
    background: #050403;
    border: 1px solid rgba(216, 164, 74, .2);
    box-shadow: 0 30px 70px rgba(0,0,0,.62);
}

.sin-book-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.12), transparent 57%);
    transform: translateX(-120%);
    transition: transform .75s ease;
    z-index: 2;
    pointer-events: none;
}

a.sin-book-card:hover .sin-book-cover::after,
a.sin-book-card:focus-visible .sin-book-cover::after {
    transform: translateX(120%);
}

.sin-book-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s ease, filter .7s ease;
}

a.sin-book-card:hover .sin-book-cover img,
a.sin-book-card:focus-visible .sin-book-cover img {
    transform: scale(1.025);
    filter: contrast(1.03) saturate(1.06);
}

.sin-book-cover > span {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    padding: 10px 13px;
    background: rgba(2,2,2,.86);
    border: 1px solid rgba(227, 180, 91, .45);
    color: var(--sin-gold-bright);
    font-family: var(--display-font);
    font-size: .52rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sin-book-card--revelations .sin-book-cover {
    border-color: rgba(144, 50, 207, .28);
}

.sin-book-card--revelations .sin-book-cover > span {
    border-color: rgba(162, 68, 221, .55);
    color: #cf8eff;
}

.sin-book-cover--soon {
    background: #040302;
    border-color: rgba(214, 164, 77, .32);
}

.sin-book-cover--soon img {
    position: static;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    filter: saturate(.94) contrast(1.02);
}

a.sin-book-card:hover .sin-book-cover--soon img,
a.sin-book-card:focus-visible .sin-book-cover--soon img {
    transform: none;
    filter: contrast(1.03) saturate(1.06);
}

.sin-book-cover--soon > span {
    right: 18px;
    bottom: 18px;
    transform: none;
    color: #f4d496;
    white-space: nowrap;
}

.sin-book-details {
    padding: 26px 4px 0;
}

.sin-book-details > span {
    color: var(--sin-gold);
    font-size: .55rem;
    letter-spacing: .22em;
}

.sin-book-card--revelations .sin-book-details > span {
    color: #b567e7;
}

.sin-book-details h3 {
    margin-top: 9px;
    color: #eee7db;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    font-weight: 400;
}

.sin-book-details p {
    margin-top: 8px;
    color: #827a70;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sin-world-cta {
    width: min(1320px, 90%);
    margin: 0 auto clamp(50px, 7vw, 100px);
    padding: clamp(72px, 9vw, 120px) 28px;
    border: 1px solid rgba(214, 163, 74, .2);
    background:
        linear-gradient(90deg, rgba(5,3,3,.96), rgba(51,8,7,.42), rgba(5,3,3,.96)),
        radial-gradient(circle at 50% 35%, rgba(182, 114, 28, .18), transparent 43%);
    text-align: center;
}

.sin-world-cta h2 {
    margin-bottom: 32px;
    color: var(--sin-gold);
}

.world-page--sin .sin-world-cta .primary-button {
    border-color: rgba(221, 167, 73, .66);
    background: linear-gradient(110deg, rgba(126, 19, 14, .96), rgba(55, 7, 7, .96));
    box-shadow: 0 12px 44px rgba(111, 13, 10, .28);
}

.world-page--sin .sin-world-cta .primary-button:hover,
.world-page--sin .sin-world-cta .primary-button:focus-visible {
    border-color: var(--sin-gold-bright);
    box-shadow: 0 16px 58px rgba(151, 22, 15, .36);
}

@keyframes sinSmoke {
    from { opacity: .4; transform: translate3d(-3%, 0, 0) scale(.96) rotate(-4deg); }
    to { opacity: .78; transform: translate3d(4%, -2%, 0) scale(1.08) rotate(7deg); }
}

@keyframes sinArtSweep {
    0%, 30% { transform: translateX(-80%); opacity: 0; }
    45% { opacity: .8; }
    64%, 100% { transform: translateX(80%); opacity: 0; }
}

@keyframes sinWave {
    from { transform: scaleY(.24); }
    to { transform: scaleY(1); }
}

@media (max-width: 1040px) {
    .sin-hero {
        grid-template-columns: minmax(0, .9fr) minmax(360px, .66fr);
        gap: 34px;
    }

    .sin-hero h1 {
        font-size: clamp(4.2rem, 9vw, 7rem);
    }

    .sin-soundtrack {
        grid-template-columns: 1fr;
    }

    .sin-soundtrack-copy {
        max-width: 720px;
    }
}

@media (max-width: 820px) {
    .sin-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 128px 7vw 88px;
        text-align: center;
    }

    .sin-hero::before {
        background:
            linear-gradient(180deg, rgba(2,2,2,.98), rgba(2,2,2,.76) 45%, rgba(2,2,2,.9)),
            radial-gradient(ellipse at 50% 65%, rgba(209,158,60,.14), transparent 42%);
    }

    .sin-hero-copy {
        margin: 0 auto;
    }

    .sin-introduction {
        margin-right: auto;
        margin-left: auto;
    }

    .sin-hero-actions {
        justify-content: center;
    }

    .sin-hero-art {
        justify-self: center;
        width: min(100%, 590px);
    }

    .sin-story {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .sin-story > p {
        max-width: 680px;
    }

    .sin-book-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .sin-hero {
        padding-right: 20px;
        padding-left: 20px;
    }

    .sin-kicker {
        letter-spacing: .24em;
    }

    .sin-hero h1 {
        font-size: clamp(3.55rem, 19vw, 6.3rem);
    }

    .sin-tagline {
        font-size: .68rem;
        letter-spacing: .17em;
        line-height: 1.7;
    }

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

    .sin-story-link {
        width: 100%;
    }

    .sin-soundtrack,
    .sin-story,
    .sin-books,
    .sin-world-cta {
        width: calc(100% - 32px);
    }

    .sin-player {
        min-height: 390px;
        padding: 32px 22px;
    }

    .sin-player-topline strong {
        line-height: 1.6;
    }

    .sin-waveform {
        height: 92px;
        gap: 3px;
        margin: 40px 0 34px;
    }

    .sin-player-controls {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .sin-play-button {
        width: 100%;
    }

    .sin-track-meta {
        justify-content: center;
    }

    .sin-story > p {
        padding-left: 20px;
    }

    .sin-book-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .sin-book-card {
        width: min(100%, 410px);
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sin-smoke,
    .sin-hero-art::after,
    .sin-player.is-playing .sin-waveform span {
        animation: none !important;
    }

    .sin-waveform span {
        transform: scaleY(.7);
    }

    a.sin-book-card,
    .sin-book-cover img,
    .sin-book-cover::after {
        transition: none;
    }
}

/* ================================================================
   BUILD 19 — MILL¥EN DOLLA BABIE$ / FIRST DEPOSIT
   A public-facing luxury lookbook. Production details stay private.
   ================================================================ */

.world-page--millyen {
    --millyen-forest: #082d21;
    --millyen-forest-deep: #031a13;
    --millyen-gold: #bd8d2c;
    --millyen-gold-bright: #e3bd62;
    --millyen-cream: #eee6d7;
    --millyen-ink: #080908;
    --sin-gold-bright: var(--millyen-gold-bright);
    min-width: 320px;
    overflow-x: hidden;
    background: var(--millyen-ink);
    color: var(--millyen-cream);
}

.world-page--millyen .sin-sound-toggle {
    border-color: rgba(227, 189, 98, .5);
    background: rgba(3, 26, 19, .9);
    color: var(--millyen-cream);
}

.world-page--millyen .world-page-header {
    background: linear-gradient(180deg, rgba(3, 15, 11, .96), rgba(3, 15, 11, .74));
    border-bottom-color: rgba(205, 158, 58, .25);
}

.world-page--millyen .main-navigation a::after {
    background: var(--millyen-gold-bright);
    box-shadow: 0 0 22px rgba(221, 177, 74, .36);
}

.world-page--millyen .main-navigation .nav-button {
    border-color: rgba(221, 177, 74, .42);
}

.millyen-world {
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 16%, rgba(34, 98, 69, .2), transparent 31%),
        var(--millyen-ink);
}

.millyen-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, .87fr) minmax(430px, .73fr);
    align-items: center;
    gap: clamp(42px, 6vw, 112px);
    min-height: 100svh;
    padding: 122px max(5vw, 28px) 76px;
}

.millyen-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(2, 10, 7, .98) 0%, rgba(2, 10, 7, .88) 43%, rgba(2, 10, 7, .18) 78%, rgba(2, 10, 7, .66) 100%),
        repeating-linear-gradient(135deg, transparent 0 118px, rgba(221, 177, 74, .025) 119px 120px),
        linear-gradient(145deg, #061a13, #020604 76%);
}

.millyen-hero::after {
    content: "";
    position: absolute;
    inset: auto 6% 0;
    z-index: 2;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225, 184, 89, .7), transparent);
    box-shadow: 0 0 24px rgba(205, 158, 58, .3);
}

.millyen-hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.millyen-orbit {
    position: absolute;
    border: 1px solid rgba(218, 173, 70, .13);
    border-radius: 50%;
    box-shadow: inset 0 0 90px rgba(8, 45, 33, .28);
}

.millyen-orbit--one {
    top: 12%;
    right: -9%;
    width: min(67vw, 930px);
    aspect-ratio: 1;
    animation: millyenOrbit 12s ease-in-out infinite alternate;
}

.millyen-orbit--two {
    top: 28%;
    right: 5%;
    width: min(43vw, 610px);
    aspect-ratio: 1;
    border-color: rgba(238, 230, 215, .08);
    animation: millyenOrbit 12s 1.8s ease-in-out infinite alternate-reverse;
}

.millyen-gold-line {
    position: absolute;
    top: 0;
    left: 23%;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(213, 166, 61, .2), transparent);
}

.millyen-hero-copy {
    position: relative;
    z-index: 3;
    max-width: 760px;
}

.millyen-kicker,
.millyen-section-number {
    color: var(--millyen-gold-bright);
    font-family: var(--body-font);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .31em;
    text-transform: uppercase;
}

.millyen-brand-name {
    margin-top: 28px;
    color: rgba(238, 230, 215, .7);
    font-family: var(--display-font);
    font-size: clamp(.75rem, 1vw, .95rem);
    letter-spacing: .22em;
    text-transform: uppercase;
}

.millyen-hero h1 {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    color: var(--millyen-cream);
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(5.1rem, 9.2vw, 10.2rem);
    font-weight: 400;
    letter-spacing: -.065em;
    line-height: .7;
    text-transform: uppercase;
}

.millyen-hero h1 span {
    margin-left: clamp(20px, 4.5vw, 74px);
    color: transparent;
    -webkit-text-stroke: 1px var(--millyen-gold-bright);
    text-shadow: 0 0 42px rgba(192, 143, 44, .14);
}

.millyen-tagline {
    margin-top: 44px;
    color: var(--millyen-gold-bright);
    font-family: var(--display-font);
    font-size: .74rem;
    letter-spacing: .29em;
    text-transform: uppercase;
}

.millyen-introduction {
    max-width: 610px;
    margin-top: 20px;
    color: rgba(238, 230, 215, .7);
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    line-height: 1.72;
}

.millyen-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
}

.millyen-preview-link,
.millyen-coming-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    font-family: var(--body-font);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.millyen-preview-link {
    gap: 24px;
    background: var(--millyen-cream);
    color: var(--millyen-forest-deep);
    border: 1px solid var(--millyen-cream);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.millyen-preview-link:hover,
.millyen-preview-link:focus-visible {
    background: var(--millyen-gold-bright);
    color: #070805;
    transform: translateY(-2px);
    outline: none;
}

.millyen-coming-soon {
    border: 1px solid rgba(220, 177, 76, .5);
    color: var(--millyen-gold-bright);
    background: rgba(4, 24, 17, .68);
}

.millyen-hero-art {
    position: relative;
    z-index: 1;
    justify-self: end;
    width: min(100%, 690px);
    margin: 0;
    padding: clamp(9px, 1.2vw, 15px);
    border: 1px solid rgba(210, 164, 61, .4);
    background: rgba(1, 4, 3, .64);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .58), 0 0 70px rgba(11, 71, 49, .16);
}

.millyen-hero-art::before,
.millyen-hero-art::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.millyen-hero-art::before {
    inset: -7px;
    border: 1px solid rgba(222, 181, 82, .12);
}

.millyen-hero-art::after {
    inset: 10% -30%;
    width: 34%;
    background: linear-gradient(105deg, transparent, rgba(255, 238, 190, .18), transparent);
    transform: skewX(-12deg) translateX(-120%);
    animation: millyenArtSweep 7.5s ease-in-out infinite;
}

.millyen-hero-art img {
    width: 100%;
    aspect-ratio: 1.11;
    object-fit: cover;
    object-position: center;
}

.millyen-art-frame {
    position: absolute;
    inset: 28px;
    z-index: 2;
    border: 1px solid rgba(226, 185, 85, .16);
    pointer-events: none;
}

.millyen-intro {
    display: grid;
    grid-template-columns: minmax(150px, .32fr) minmax(360px, .75fr) minmax(300px, .6fr);
    align-items: end;
    gap: clamp(28px, 5vw, 90px);
    padding: clamp(78px, 10vw, 150px) max(6vw, 28px);
    background: var(--millyen-cream);
    color: var(--millyen-ink);
}

.millyen-intro .millyen-section-number,
.millyen-collection .millyen-section-number {
    color: #8a631e;
}

.millyen-intro h2,
.millyen-collection h2,
.millyen-vault h2 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 400;
    line-height: .95;
}

.millyen-intro h2 {
    font-size: clamp(3.3rem, 6.7vw, 7.2rem);
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.millyen-intro > p:last-child {
    max-width: 520px;
    padding-left: 28px;
    border-left: 1px solid rgba(111, 78, 22, .34);
    color: #4d4a42;
    font-size: clamp(1rem, 1.55vw, 1.24rem);
    line-height: 1.72;
}

.millyen-collection {
    padding: clamp(76px, 9vw, 140px) max(5vw, 26px);
    background:
        linear-gradient(rgba(239, 231, 216, .96), rgba(239, 231, 216, .96)),
        repeating-linear-gradient(90deg, transparent 0 179px, rgba(11, 45, 33, .07) 180px);
    color: var(--millyen-ink);
}

.millyen-collection-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    width: min(1440px, 100%);
    margin: 0 auto 52px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(66, 54, 32, .25);
}

.millyen-collection h2 {
    margin-top: 12px;
    font-size: clamp(3.1rem, 6vw, 6.6rem);
    letter-spacing: -.045em;
}

.millyen-collection-heading > span {
    padding-bottom: 9px;
    color: #725019;
    font-family: var(--display-font);
    font-size: .67rem;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.millyen-lookbook {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 34px);
    width: min(1440px, 100%);
    margin: 0 auto;
}

.millyen-look {
    min-width: 0;
}

.millyen-look--set {
    grid-column: span 7;
}

.millyen-look--jacket {
    grid-column: span 5;
    padding-top: clamp(40px, 7vw, 100px);
}

.millyen-look--tee {
    grid-column: span 5;
    padding-top: clamp(18px, 4vw, 56px);
}

.millyen-look--cap {
    grid-column: span 7;
    padding-top: clamp(88px, 12vw, 170px);
}

.millyen-look-image {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    border: 1px solid rgba(76, 54, 17, .26);
    background: #f6f0e6;
}

.millyen-look-image::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 12px rgba(255, 255, 255, .18);
    pointer-events: none;
}

.millyen-look-image img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
}

.millyen-look:hover .millyen-look-image img {
    transform: scale(1.025);
    filter: saturate(1.04) contrast(1.02);
}

.millyen-look--set .millyen-look-image {
    aspect-ratio: 1.26;
}

.millyen-look--jacket .millyen-look-image {
    aspect-ratio: 1.05;
}

.millyen-look--jacket .millyen-look-image img,
.millyen-look--cap .millyen-look-image img {
    object-fit: contain;
}

.millyen-look--tee .millyen-look-image {
    aspect-ratio: .82;
}

.millyen-look--tee .millyen-look-image img {
    object-position: center top;
}

.millyen-look--cap .millyen-look-image {
    aspect-ratio: 1.3;
}

.millyen-look-caption {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 22px;
    padding: 24px 4px 0;
}

.millyen-look-caption > span {
    grid-row: span 2;
    color: #8a631e;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
}

.millyen-look-caption h3 {
    font-family: var(--display-font);
    font-size: clamp(.84rem, 1.25vw, 1.08rem);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.millyen-look-caption p {
    margin-top: 4px;
    color: #6e685d;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.millyen-vault {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 620px;
    padding: 100px 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(15, 82, 57, .54), transparent 34%),
        repeating-radial-gradient(circle at center, transparent 0 74px, rgba(214, 169, 67, .06) 75px 76px),
        #03120d;
    text-align: center;
}

.millyen-vault::before {
    content: "M¥$B";
    position: absolute;
    z-index: -1;
    color: rgba(232, 196, 111, .035);
    font-family: Georgia, "Times New Roman", serif;
    font-size: min(35vw, 520px);
    letter-spacing: -.12em;
    white-space: nowrap;
}

.millyen-vault h2 {
    max-width: 960px;
    margin-top: 20px;
    color: var(--millyen-cream);
    font-size: clamp(3rem, 7vw, 7.4rem);
    letter-spacing: -.05em;
}

.millyen-vault > p:not(.millyen-section-number) {
    margin-top: 20px;
    color: rgba(238, 230, 215, .65);
    font-size: .86rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.millyen-vault-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 36px;
}

.millyen-vault-actions span {
    padding: 13px 22px;
    border: 1px solid rgba(224, 179, 74, .56);
    color: var(--millyen-gold-bright);
    font-family: var(--display-font);
    font-size: .65rem;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.millyen-vault-actions a,
.millyen-footer > a {
    color: rgba(238, 230, 215, .72);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .25s ease;
}

.millyen-vault-actions a:hover,
.millyen-vault-actions a:focus-visible,
.millyen-footer > a:hover,
.millyen-footer > a:focus-visible {
    color: var(--millyen-gold-bright);
    outline: none;
}

.millyen-footer {
    margin-top: 0;
    border-top-color: rgba(210, 164, 61, .22);
    background: #020906;
}

@keyframes millyenOrbit {
    from { opacity: .38; transform: scale(.97) rotate(-2deg); }
    to { opacity: .76; transform: scale(1.035) rotate(2deg); }
}

@keyframes millyenArtSweep {
    0%, 34% { opacity: 0; transform: skewX(-12deg) translateX(-120%); }
    49% { opacity: .72; }
    66%, 100% { opacity: 0; transform: skewX(-12deg) translateX(470%); }
}

@media (max-width: 1050px) {
    .millyen-hero {
        grid-template-columns: minmax(0, .86fr) minmax(370px, .68fr);
        gap: 34px;
    }

    .millyen-hero h1 {
        font-size: clamp(4.4rem, 8.8vw, 7.6rem);
    }

    .millyen-intro {
        grid-template-columns: minmax(130px, .28fr) 1fr;
    }

    .millyen-intro > p:last-child {
        grid-column: 2;
    }
}

@media (max-width: 820px) {
    .millyen-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 128px 7vw 92px;
        text-align: center;
    }

    .millyen-hero::before {
        background:
            linear-gradient(180deg, rgba(2,10,7,.98), rgba(2,10,7,.72) 48%, rgba(2,10,7,.96)),
            repeating-linear-gradient(135deg, transparent 0 118px, rgba(221,177,74,.025) 119px 120px),
            linear-gradient(145deg, #061a13, #020604 76%);
    }

    .millyen-hero-copy {
        margin: 0 auto;
    }

    .millyen-hero h1 span {
        margin-left: 0;
    }

    .millyen-introduction {
        margin-right: auto;
        margin-left: auto;
    }

    .millyen-hero-actions {
        justify-content: center;
    }

    .millyen-hero-art {
        justify-self: center;
        width: min(100%, 650px);
        margin-top: 24px;
    }

    .millyen-intro {
        grid-template-columns: 1fr;
        align-items: start;
        text-align: center;
    }

    .millyen-intro > p:last-child {
        grid-column: auto;
        margin: 0 auto;
        padding: 24px 0 0;
        border-top: 1px solid rgba(111, 78, 22, .34);
        border-left: 0;
    }

    .millyen-look--set,
    .millyen-look--jacket,
    .millyen-look--tee,
    .millyen-look--cap {
        grid-column: span 6;
        padding-top: 0;
    }

    .millyen-look-image {
        min-height: 330px;
    }
}

@media (max-width: 580px) {
    .millyen-hero {
        padding-right: 20px;
        padding-left: 20px;
    }

    .millyen-kicker {
        letter-spacing: .22em;
    }

    .millyen-brand-name {
        letter-spacing: .15em;
    }

    .millyen-hero h1 {
        font-size: clamp(4rem, 21vw, 6.4rem);
        line-height: .76;
    }

    .millyen-tagline {
        letter-spacing: .2em;
    }

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

    .millyen-preview-link,
    .millyen-coming-soon {
        width: 100%;
    }

    .millyen-intro,
    .millyen-collection {
        padding-right: 20px;
        padding-left: 20px;
    }

    .millyen-collection-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .millyen-lookbook {
        grid-template-columns: minmax(0, 1fr);
        gap: 52px;
    }

    .millyen-look--set,
    .millyen-look--jacket,
    .millyen-look--tee,
    .millyen-look--cap {
        grid-column: 1 / -1;
    }

    .millyen-look-image,
    .millyen-look--set .millyen-look-image,
    .millyen-look--jacket .millyen-look-image,
    .millyen-look--tee .millyen-look-image,
    .millyen-look--cap .millyen-look-image {
        min-height: 0;
        aspect-ratio: auto;
    }

    .millyen-look-image img {
        min-height: 0;
        height: auto;
        object-fit: contain;
    }

    .millyen-look-caption {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .millyen-look-caption > span {
        grid-row: auto;
    }

    .millyen-vault {
        min-height: 560px;
    }

    .millyen-vault-actions {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .millyen-orbit,
    .millyen-hero-art::after {
        animation: none !important;
    }

    .millyen-look-image img,
    .millyen-preview-link {
        transition: none;
    }
}

/* ================================================================
   BUILD 20 — WORLD-FIRST LANGUAGE + THIS LIFE OF SIN SOUND
   ================================================================ */

.sin-ambient-sound {
    position: fixed;
    right: clamp(16px, 2.4vw, 34px);
    bottom: clamp(16px, 2.4vw, 30px);
    z-index: 900;
}

.sin-ambient-sound > audio {
    display: none;
}

.sin-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(215, 163, 73, .48);
    background: rgba(8, 5, 5, .84);
    color: #d9cbb7;
    font-family: var(--body-font);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .4);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.sin-sound-toggle:hover,
.sin-sound-toggle:focus-visible {
    border-color: var(--sin-gold-bright);
    color: var(--sin-gold-bright);
    background: rgba(25, 7, 6, .92);
    outline: none;
}

.sin-sound-bars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 18px;
    height: 16px;
}

.sin-sound-bars i {
    width: 2px;
    height: 28%;
    background: currentColor;
    transform-origin: center;
}

.sin-ambient-sound.is-playing .sin-sound-bars i {
    animation: sinAmbientBars .7s ease-in-out infinite alternate;
}

.sin-ambient-sound.is-playing .sin-sound-bars i:nth-child(2) {
    animation-delay: -.44s;
}

.sin-ambient-sound.is-playing .sin-sound-bars i:nth-child(3) {
    animation-delay: -.2s;
}

.sin-ambient-sound.is-playing .sin-sound-bars i:nth-child(4) {
    animation-delay: -.58s;
}

.sin-ambient-sound noscript audio {
    width: min(310px, calc(100vw - 32px));
}

@keyframes sinAmbientBars {
    from { transform: scaleY(.38); opacity: .52; }
    to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 580px) {
    .sin-sound-toggle {
        min-height: 42px;
        padding: 0 13px;
        font-size: .58rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sin-ambient-sound.is-playing .sin-sound-bars i {
        animation: none;
        transform: scaleY(.75);
    }
}

/* ================================================================
   BUILD 28 — NEGRO MEXICANO FLAGSHIP WORLD
   ================================================================ */

.world-page--negro {
    --negro-gold: #d6a447;
    --negro-gold-bright: #f0cb79;
    --negro-green: #078347;
    --negro-ivory: #eee3cf;
    --negro-red: #c62026;
    background: #020202;
    color: #eee9df;
}

.negro-world {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0, rgba(214, 164, 71, .075), transparent 29%),
        #020202;
}

.negro-hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
    align-items: center;
    gap: clamp(30px, 5vw, 96px);
    max-width: 1500px;
    margin: 0 auto;
    padding: clamp(130px, 15vh, 185px) clamp(24px, 6vw, 96px) 110px;
}

.negro-hero-atmosphere,
.negro-hero-grid,
.negro-color-field {
    position: absolute;
    pointer-events: none;
}

.negro-hero-atmosphere {
    inset: 0;
    overflow: hidden;
}

.negro-color-field {
    width: min(640px, 62vw);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .12;
}

.negro-color-field--green {
    left: -27%;
    top: 24%;
    background: var(--negro-green);
}

.negro-color-field--gold {
    left: 35%;
    top: -28%;
    background: var(--negro-gold);
    opacity: .08;
}

.negro-color-field--red {
    right: -26%;
    bottom: -12%;
    background: var(--negro-red);
}

.negro-hero-grid {
    inset: 0;
    opacity: .14;
    background-image:
        linear-gradient(rgba(214, 164, 71, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214, 164, 71, .12) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
}

.negro-hero-copy,
.negro-hero-mark {
    position: relative;
    z-index: 2;
}

.negro-kicker,
.negro-section-number {
    color: var(--negro-gold);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.negro-hero-copy h1 {
    margin: 18px 0 10px;
    color: var(--negro-ivory);
    font-family: var(--display-font);
    font-size: clamp(3.3rem, 7vw, 7.8rem);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .82;
    text-transform: uppercase;
}

.negro-hero-copy h1 span {
    display: block;
    color: var(--negro-gold-bright);
}

.negro-tagline {
    margin-top: 28px;
    color: var(--negro-ivory);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.negro-introduction {
    max-width: 590px;
    margin-top: 26px;
    color: #bdb6aa;
    font-size: clamp(1rem, 1.45vw, 1.25rem);
    line-height: 1.8;
}

.negro-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 38px;
}

.negro-enter {
    border-color: rgba(214, 164, 71, .68);
    background: linear-gradient(135deg, #b67f23, #e1b85d);
    color: #080603;
}

.negro-enter:hover,
.negro-enter:focus-visible {
    box-shadow: 0 0 36px rgba(214, 164, 71, .22);
}

.negro-back-link,
.negro-footer > a {
    color: #a8a198;
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    transition: color .25s ease;
}

.negro-back-link:hover,
.negro-back-link:focus-visible,
.negro-footer > a:hover,
.negro-footer > a:focus-visible {
    color: var(--negro-gold-bright);
}

.negro-hero-mark {
    display: grid;
    place-items: center;
    min-height: min(72vw, 780px);
    isolation: isolate;
}

.negro-hero-mark img {
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    height: auto;
    filter: drop-shadow(0 34px 58px rgba(0, 0, 0, .82));
    animation: negroMarkBreathe 7s ease-in-out infinite;
}

.negro-mark-orbit,
.negro-mark-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.negro-mark-orbit {
    z-index: 1;
    width: 74%;
    aspect-ratio: 1;
    border: 1px solid rgba(214, 164, 71, .28);
    box-shadow:
        inset 0 0 46px rgba(214, 164, 71, .06),
        0 0 70px rgba(214, 164, 71, .05);
}

.negro-mark-orbit::before,
.negro-mark-orbit::after {
    content: "";
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(238, 227, 207, .08);
    border-radius: inherit;
}

.negro-mark-orbit::after {
    inset: -12%;
    border-style: dashed;
    animation: negroOrbit 35s linear infinite;
}

.negro-mark-glow {
    width: 58%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(214, 164, 71, .15), transparent 68%);
    filter: blur(24px);
}

.negro-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 3;
    display: grid;
    place-items: center;
    gap: 10px;
    transform: translateX(-50%);
    color: #8d867c;
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.negro-scroll-cue i {
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--negro-gold), transparent);
}

.negro-manifesto,
.negro-pillars,
.negro-signature {
    max-width: 1380px;
    margin: 0 auto;
    padding: clamp(100px, 13vw, 180px) clamp(24px, 6vw, 96px);
}

.negro-manifesto {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
    gap: clamp(48px, 9vw, 150px);
    align-items: start;
    border-top: 1px solid rgba(214, 164, 71, .13);
}

.negro-manifesto h2,
.negro-pillars h2,
.negro-signature h2 {
    margin-top: 20px;
    color: var(--negro-ivory);
    font-family: var(--display-font);
    font-size: clamp(2.7rem, 5vw, 6rem);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: .98;
    text-transform: uppercase;
}

.negro-manifesto-copy > p {
    color: #bdb6aa;
    font-size: clamp(1.08rem, 1.7vw, 1.42rem);
    line-height: 1.85;
}

.negro-manifesto blockquote {
    margin: 54px 0 0;
    padding: 12px 0 12px 30px;
    border-left: 2px solid var(--negro-gold);
    color: var(--negro-gold-bright);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3.3vw, 3.8rem);
    font-style: italic;
    line-height: 1.14;
}

.negro-pillars {
    max-width: none;
    padding-inline: clamp(24px, 7vw, 120px);
    background:
        linear-gradient(90deg, rgba(7, 131, 71, .035), transparent 28%, transparent 72%, rgba(198, 32, 38, .04)),
        #060606;
}

.negro-pillars-heading {
    max-width: 1380px;
    margin: 0 auto 70px;
}

.negro-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1380px;
    margin: 0 auto;
    border-top: 1px solid rgba(214, 164, 71, .18);
    border-bottom: 1px solid rgba(214, 164, 71, .18);
}

.negro-pillar {
    position: relative;
    min-height: 360px;
    padding: 46px 40px;
    overflow: hidden;
}

.negro-pillar + .negro-pillar {
    border-left: 1px solid rgba(214, 164, 71, .18);
}

.negro-pillar::after {
    content: "";
    position: absolute;
    inset: auto -20% -50% -20%;
    height: 70%;
    opacity: .1;
    filter: blur(28px);
}

.negro-pillar--identity::after { background: var(--negro-green); }
.negro-pillar--culture::after { background: var(--negro-gold); }
.negro-pillar--legacy::after { background: var(--negro-red); }

.negro-pillar > span {
    color: var(--negro-gold);
    font-size: .62rem;
    letter-spacing: .22em;
}

.negro-pillar h3 {
    margin-top: 72px;
    color: var(--negro-ivory);
    font-family: var(--display-font);
    font-size: clamp(2rem, 3.2vw, 3.5rem);
    font-weight: 400;
    text-transform: uppercase;
}

.negro-pillar p {
    position: relative;
    z-index: 1;
    max-width: 340px;
    margin-top: 24px;
    color: #aaa39a;
    font-size: 1rem;
    line-height: 1.7;
}

.negro-signature {
    min-height: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at 50% 50%, rgba(214, 164, 71, .08), transparent 42%);
}

.negro-signature h2 {
    color: var(--negro-gold-bright);
}

.negro-signature > p:not(.negro-section-number) {
    max-width: 710px;
    margin: 34px auto 42px;
    color: #b8b0a4;
    font-size: clamp(1.08rem, 1.7vw, 1.34rem);
    line-height: 1.8;
}

.negro-footer {
    border-top-color: rgba(214, 164, 71, .16);
}

@keyframes negroMarkBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.012); }
}

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

@media (max-width: 980px) {
    .negro-hero {
        grid-template-columns: 1fr;
        padding-top: 145px;
        text-align: center;
    }

    .negro-introduction {
        margin-inline: auto;
    }

    .negro-hero-actions {
        justify-content: center;
    }

    .negro-hero-mark {
        min-height: 620px;
    }

    .negro-scroll-cue {
        display: none;
    }

    .negro-manifesto {
        grid-template-columns: 1fr;
    }

    .negro-pillar-grid {
        grid-template-columns: 1fr;
    }

    .negro-pillar {
        min-height: 300px;
    }

    .negro-pillar + .negro-pillar {
        border-left: 0;
        border-top: 1px solid rgba(214, 164, 71, .18);
    }
}

@media (max-width: 620px) {
    .negro-hero {
        padding-inline: 20px;
    }

    .negro-hero-mark {
        min-height: 430px;
    }

    .negro-hero-copy h1 {
        font-size: clamp(3rem, 17vw, 5rem);
    }

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

    .negro-manifesto,
    .negro-pillars,
    .negro-signature {
        padding-inline: 20px;
    }

    .negro-pillar {
        padding: 38px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .negro-hero-mark img,
    .negro-mark-orbit::after {
        animation: none !important;
    }
}

/* ================================================================
   BUILD 29 — NEGRO MEXICANO MUSIC PLAYER
   ================================================================ */

.negro-music {
    max-width: 1500px;
    margin: 0 auto;
    padding: clamp(100px, 12vw, 170px) clamp(24px, 6vw, 96px);
    border-top: 1px solid rgba(214, 164, 71, .13);
}

.negro-music-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: clamp(54px, 7vw, 92px);
}

.negro-music-heading .negro-section-number {
    grid-column: auto;
}

.negro-music-heading h2 {
    max-width: 980px;
    color: var(--negro-ivory);
    font-family: var(--display-font);
    font-size: clamp(2.7rem, 5vw, 6rem);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: .95;
    text-transform: uppercase;
}

.negro-player {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(214, 164, 71, .24);
    background:
        radial-gradient(circle at 18% 25%, rgba(7, 131, 71, .11), transparent 34%),
        radial-gradient(circle at 92% 76%, rgba(198, 32, 38, .1), transparent 32%),
        #070706;
    box-shadow: 0 36px 100px rgba(0, 0, 0, .55);
}

.negro-player::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    background-image:
        linear-gradient(rgba(214, 164, 71, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214, 164, 71, .12) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(115deg, #000, transparent 66%);
}

.negro-player > audio {
    display: none;
}

.negro-player-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, .86fr) minmax(390px, 1.14fr);
    gap: clamp(38px, 6vw, 92px);
    align-items: center;
    padding: clamp(28px, 5vw, 72px);
}

.negro-player-artwork {
    position: relative;
    margin: 0;
    aspect-ratio: 1;
    isolation: isolate;
}

.negro-player-artwork::before,
.negro-player-artwork::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.negro-player-artwork::before {
    inset: -13px;
    z-index: -1;
    border: 1px solid rgba(214, 164, 71, .38);
}

.negro-player-artwork::after {
    inset: 0;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(238, 227, 207, .13);
}

.negro-player-artwork img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #020202;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .62);
    transition: opacity .22s ease, transform .5s ease;
}

.negro-player.is-switching .negro-player-artwork img {
    opacity: .3;
    transform: scale(.985);
}

.negro-player-glow {
    position: absolute;
    inset: 14% -10% -10% 8%;
    z-index: -2;
    background: linear-gradient(135deg, rgba(7, 131, 71, .35), rgba(214, 164, 71, .2), rgba(198, 32, 38, .28));
    filter: blur(54px);
    opacity: .52;
}

.negro-player-console {
    min-width: 0;
}

.negro-now-playing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(214, 164, 71, .16);
}

.negro-now-playing > div:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
}

.negro-now-playing p,
.negro-now-playing span {
    color: var(--negro-gold);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.negro-now-playing span {
    color: #736d64;
}

.negro-sound-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}

.negro-sound-bars i {
    width: 2px;
    height: 100%;
    background: linear-gradient(to top, var(--negro-green), var(--negro-gold-bright), var(--negro-red));
    transform: scaleY(.2);
    opacity: .54;
}

.negro-player.is-playing .negro-sound-bars i {
    animation: negroSoundBars .72s ease-in-out infinite alternate;
}

.negro-player.is-playing .negro-sound-bars i:nth-child(2) { animation-delay: -.35s; }
.negro-player.is-playing .negro-sound-bars i:nth-child(3) { animation-delay: -.6s; }
.negro-player.is-playing .negro-sound-bars i:nth-child(4) { animation-delay: -.18s; }
.negro-player.is-playing .negro-sound-bars i:nth-child(5) { animation-delay: -.48s; }

.negro-player-console h3 {
    max-width: 780px;
    margin-top: clamp(38px, 5vw, 70px);
    color: var(--negro-ivory);
    font-family: var(--display-font);
    font-size: clamp(2.35rem, 5.1vw, 5.7rem);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .92;
    text-transform: uppercase;
}

.negro-player-artist {
    margin-top: 18px;
    color: var(--negro-gold);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.negro-player-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(36px, 5vw, 62px);
}

.negro-player-controls button,
.negro-player-volume button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(214, 164, 71, .28);
    border-radius: 50%;
    background: transparent;
    color: #bdb6aa;
    font: inherit;
    font-size: .68rem;
    cursor: pointer;
    transition: border-color .22s ease, color .22s ease, background .22s ease, transform .22s ease;
}

.negro-player-controls button:hover,
.negro-player-controls button:focus-visible,
.negro-player-volume button:hover,
.negro-player-volume button:focus-visible {
    border-color: var(--negro-gold-bright);
    color: var(--negro-gold-bright);
    transform: translateY(-2px);
}

.negro-player-controls .negro-play-button {
    width: 68px;
    height: 68px;
    border-color: var(--negro-gold);
    background: linear-gradient(135deg, #a66d18, #edc971);
    color: #050403;
    font-size: 1rem;
    box-shadow: 0 12px 34px rgba(214, 164, 71, .18);
}

.negro-player-controls .negro-play-button:hover,
.negro-player-controls .negro-play-button:focus-visible {
    color: #050403;
    background: linear-gradient(135deg, #c28b31, #f3d98f);
}

.negro-player-progress,
.negro-player-volume {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.negro-player-progress span {
    min-width: 34px;
    color: #7f786f;
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
}

.negro-player-progress span:last-child {
    text-align: right;
}

.negro-player input[type="range"] {
    --range-fill: 0%;
    width: 100%;
    height: 3px;
    appearance: none;
    border-radius: 999px;
    background: linear-gradient(to right, var(--negro-gold) var(--range-fill), rgba(238, 227, 207, .16) var(--range-fill));
    cursor: pointer;
}

.negro-player input[type="range"]::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    appearance: none;
    border: 2px solid #080706;
    border-radius: 50%;
    background: var(--negro-gold-bright);
    box-shadow: 0 0 0 1px rgba(214, 164, 71, .55);
}

.negro-player input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: 2px solid #080706;
    border-radius: 50%;
    background: var(--negro-gold-bright);
}

.negro-player-volume {
    grid-template-columns: auto minmax(90px, 160px);
    justify-content: end;
    margin-top: 20px;
}

.negro-player-volume button {
    width: 34px;
    height: 34px;
    border-radius: 0;
    font-size: .52rem;
    letter-spacing: .1em;
}

.negro-player-volume input[type="range"] {
    --range-fill: 80%;
}

.negro-tracklist {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(214, 164, 71, .18);
}

.negro-tracklist li + li {
    border-top: 1px solid rgba(214, 164, 71, .12);
}

.negro-tracklist button {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    width: 100%;
    padding: 24px clamp(26px, 4vw, 64px);
    border: 0;
    background: transparent;
    color: #aaa39a;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .22s ease, background .22s ease;
}

.negro-tracklist button:hover,
.negro-tracklist button:focus-visible {
    color: var(--negro-ivory);
    background: rgba(214, 164, 71, .055);
}

.negro-tracklist button.is-active {
    color: var(--negro-gold-bright);
    background: linear-gradient(90deg, rgba(7, 131, 71, .1), rgba(214, 164, 71, .06), rgba(198, 32, 38, .065));
}

.negro-track-order,
.negro-track-duration {
    font-size: .62rem;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
}

.negro-track-name {
    display: grid;
    gap: 6px;
    font-family: var(--display-font);
    font-size: clamp(.95rem, 1.45vw, 1.26rem);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.negro-track-name small {
    color: #756f66;
    font-family: var(--body-font);
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .22em;
}

.negro-player noscript {
    position: relative;
    z-index: 2;
    display: block;
    padding: 24px;
}

.negro-player noscript audio {
    width: min(480px, 100%);
    margin-top: 14px;
}

@keyframes negroSoundBars {
    from { transform: scaleY(.2); opacity: .46; }
    to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 980px) {
    .negro-music-heading,
    .negro-player-stage {
        grid-template-columns: 1fr;
    }

    .negro-music-heading {
        align-items: start;
    }

    .negro-player-artwork {
        width: min(620px, 100%);
        margin: 0 auto;
    }

    .negro-player-console {
        padding-top: 12px;
    }
}

@media (max-width: 620px) {
    .negro-music {
        padding-inline: 20px;
    }

    .negro-player-stage {
        padding: 28px 20px 36px;
    }

    .negro-player-artwork::before {
        inset: -7px;
    }

    .negro-player-console h3 {
        font-size: clamp(2.05rem, 12vw, 3.8rem);
    }

    .negro-tracklist button {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 20px;
    }

    .negro-track-duration {
        letter-spacing: .08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .negro-player.is-playing .negro-sound-bars i {
        animation: none !important;
        transform: scaleY(.72);
    }
}

/* ================================================================
   BUILD 31 — JUSTMOJO WORLD
   ================================================================ */

/* Homepage world card — Build 33 icon refinement */
.world-justmojo {
    background: #030303;
}

.world-justmojo .world-art {
    background: #000;
}

.world-justmojo .world-logo--justmojo-card {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    object-position: center;
    transform: none;
    transform-origin: center;
    filter: grayscale(.08) contrast(1.03);
}

.world-justmojo:hover .world-logo--justmojo-card,
.world-justmojo:focus-visible .world-logo--justmojo-card {
    transform: none;
    filter: grayscale(0) contrast(1.06) brightness(1.035);
}

/* Dedicated world */
.world-page--justmojo {
    --mojo-black: #030303;
    --mojo-charcoal: #11110f;
    --mojo-white: #f0eeea;
    --mojo-paper: #ddd9d1;
    --mojo-silver: #b3b0aa;
    --mojo-muted: #8e8a84;
    background: var(--mojo-black);
    color: var(--mojo-white);
}

.world-page--justmojo .mojo-sound-toggle {
    border-color: rgba(240, 238, 234, .38);
    background: rgba(3, 3, 3, .88);
    color: var(--mojo-paper);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .52);
}

.world-page--justmojo .mojo-sound-toggle:hover,
.world-page--justmojo .mojo-sound-toggle:focus-visible {
    border-color: var(--mojo-white);
    color: var(--mojo-white);
    background: rgba(17, 17, 15, .95);
}

.mojo-world {
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 5%, rgba(255, 255, 255, .055), transparent 28%),
        var(--mojo-black);
}

.mojo-hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: clamp(50px, 8vw, 130px);
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: clamp(145px, 16vh, 190px) clamp(24px, 6vw, 96px) 110px;
}

.mojo-hero-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(to bottom, transparent 4%, #000 32%, transparent 88%);
}

.mojo-hero-copy,
.mojo-hero-emblem {
    position: relative;
    z-index: 2;
}

.mojo-kicker,
.mojo-section-number {
    color: var(--mojo-silver);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.mojo-hero h1 {
    width: min(100%, 800px);
    margin: 26px 0 0;
}

.mojo-hero h1 img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 45px rgba(255, 255, 255, .055));
}

.mojo-tagline {
    margin-top: 32px;
    color: var(--mojo-white);
    font-size: clamp(.72rem, 1.05vw, .94rem);
    font-weight: 600;
    letter-spacing: .3em;
    line-height: 1.55;
    text-transform: uppercase;
}

.mojo-introduction {
    max-width: 650px;
    margin-top: 26px;
    color: var(--mojo-silver);
    font-size: clamp(1.02rem, 1.5vw, 1.28rem);
    line-height: 1.8;
}

.mojo-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 42px;
}

.mojo-button {
    border-color: rgba(255, 255, 255, .68);
    background: var(--mojo-white);
    color: #050505;
}

.mojo-button:hover,
.mojo-button:focus-visible {
    box-shadow: 0 0 34px rgba(255, 255, 255, .14);
}

.mojo-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--mojo-silver);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.mojo-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mojo-white);
    box-shadow: 0 0 16px rgba(255, 255, 255, .52);
}

.mojo-hero-emblem {
    display: grid;
    place-items: center;
    min-height: 620px;
    margin: 0;
    isolation: isolate;
}

.mojo-hero-emblem::before {
    content: "";
    position: absolute;
    width: min(94%, 580px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .075), transparent 68%);
    filter: blur(20px);
    pointer-events: none;
}

.mojo-hero-emblem img {
    position: relative;
    z-index: 2;
    width: min(88%, 520px);
    height: auto;
    filter: invert(1) drop-shadow(0 24px 48px rgba(0, 0, 0, .42));
    animation: mojoEmblemFloat 6.5s ease-in-out infinite;
}

.mojo-mindset,
.mojo-standard,
.mojo-signature {
    max-width: 1380px;
    margin: 0 auto;
    padding: clamp(100px, 13vw, 180px) clamp(24px, 6vw, 96px);
}

.mojo-mindset {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: clamp(54px, 9vw, 150px);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.mojo-mindset h2,
.mojo-collection h2,
.mojo-standard h2,
.mojo-signature h2 {
    margin-top: 22px;
    color: var(--mojo-white);
    font-family: var(--display-font);
    font-size: clamp(2.7rem, 5vw, 6rem);
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: .95;
    text-transform: uppercase;
}

.mojo-mindset-copy > p {
    color: var(--mojo-silver);
    font-size: clamp(1.06rem, 1.65vw, 1.38rem);
    line-height: 1.85;
}

.mojo-mindset blockquote {
    margin: 52px 0 0;
    padding: 12px 0 12px 28px;
    border-left: 2px solid var(--mojo-white);
    color: var(--mojo-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3.2vw, 3.5rem);
    font-style: italic;
    line-height: 1.15;
}

.mojo-collection {
    padding: clamp(96px, 11vw, 160px) clamp(24px, 7vw, 120px);
    background: var(--mojo-paper);
    color: #070707;
}

.mojo-collection-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 28px;
    max-width: 1380px;
    margin: 0 auto 64px;
}

.mojo-collection-heading .mojo-section-number {
    grid-column: 1 / -1;
    color: #55524d;
}

.mojo-collection h2 {
    color: #080808;
}

.mojo-collection-heading > span {
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, .55);
    color: #090909;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.mojo-collection-hero {
    max-width: 1380px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .22);
    background: #cbc7bf;
}

.mojo-collection-hero img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(.12) contrast(1.02);
}

.mojo-piece-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    max-width: 1380px;
    margin: 1px auto 0;
    background: rgba(0, 0, 0, .24);
}

.mojo-piece {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    min-height: 310px;
    padding: clamp(24px, 3vw, 44px);
    background: #e8e5df;
}

.mojo-piece img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    filter: grayscale(.2);
}

.mojo-piece span,
.mojo-standard article > span {
    color: #69655f;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .23em;
}

.mojo-piece h3 {
    margin-top: 34px;
    color: #080808;
    font-family: var(--display-font);
    font-size: clamp(1.65rem, 2.4vw, 2.8rem);
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.mojo-piece p {
    margin-top: 18px;
    color: #5c5954;
    font-size: .92rem;
    line-height: 1.65;
}

.mojo-standard {
    max-width: none;
    padding-inline: clamp(24px, 7vw, 120px);
    background: #070707;
}

.mojo-standard-heading,
.mojo-standard-grid {
    max-width: 1380px;
    margin-inline: auto;
}

.mojo-standard-heading {
    margin-bottom: 68px;
}

.mojo-standard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.mojo-standard article {
    min-height: 330px;
    padding: 48px 40px;
}

.mojo-standard article + article {
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.mojo-standard article > span {
    color: var(--mojo-muted);
}

.mojo-standard h3 {
    margin-top: 72px;
    color: var(--mojo-white);
    font-family: var(--display-font);
    font-size: clamp(2rem, 3vw, 3.4rem);
    font-weight: 500;
    text-transform: uppercase;
}

.mojo-standard article p {
    max-width: 320px;
    margin-top: 22px;
    color: var(--mojo-muted);
    line-height: 1.7;
}

.mojo-signature {
    min-height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .075), transparent 44%);
}

.mojo-signature h2 {
    max-width: 980px;
}

.mojo-signature > p:not(.mojo-section-number) {
    margin: 34px auto 40px;
    color: var(--mojo-silver);
    font-size: clamp(1rem, 1.4vw, 1.22rem);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mojo-footer {
    border-top-color: rgba(255, 255, 255, .14);
}

.mojo-footer > a {
    color: var(--mojo-silver);
}

@keyframes mojoEmblemFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@media (max-width: 980px) {
    .mojo-hero,
    .mojo-mindset {
        grid-template-columns: 1fr;
    }

    .mojo-hero-copy {
        text-align: center;
    }

    .mojo-hero h1,
    .mojo-introduction {
        margin-inline: auto;
    }

    .mojo-hero-actions {
        justify-content: center;
    }

    .mojo-hero-emblem {
        min-height: 560px;
    }

    .mojo-piece-grid,
    .mojo-standard-grid {
        grid-template-columns: 1fr;
    }

    .mojo-standard article + article {
        border-top: 1px solid rgba(255, 255, 255, .16);
        border-left: 0;
    }
}

@media (max-width: 700px) {
    .mojo-hero,
    .mojo-mindset,
    .mojo-standard,
    .mojo-signature {
        padding-inline: 20px;
    }

    .mojo-hero-emblem {
        min-height: 410px;
    }

    .mojo-collection {
        padding-inline: 20px;
    }

    .mojo-collection-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .mojo-collection-heading > span {
        justify-self: start;
    }

    .mojo-piece {
        grid-template-columns: 1fr;
    }

    .mojo-piece img {
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mojo-hero-emblem img {
        animation: none !important;
    }
}

/* ================================================================
   BUILD 34 — HOMEPAGE WORLD ART SCALE BALANCE
   ================================================================ */

.world-mysb .world-logo--contain {
    top: 0;
    width: min(94%, 400px);
}

.world-negro .world-logo--negro {
    top: 0;
    width: min(90%, 385px);
}

.world-podcast .world-logo--homepage {
    top: 0;
    width: min(86%, 380px);
}

@media (max-width: 620px) {
    .world-mysb .world-logo--contain,
    .world-negro .world-logo--negro,
    .world-podcast .world-logo--homepage {
        width: min(94%, 345px);
    }
}

/* ================================================================
   BUILD 35 — CAPTAIN LIGHTING STAR: METEOR RISING
   ================================================================ */

.captain-origin-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    align-items: center;
    gap: clamp(44px, 7vw, 104px);
}

.captain-origin-lead .captain-feature-heading {
    display: block;
    max-width: 700px;
}

.captain-origin-lead .captain-feature-heading h2 {
    margin-top: 18px;
}

.captain-origin-lead .captain-feature-heading > p:last-child {
    max-width: 620px;
    margin-top: 26px;
}

.captain-origin-meteor {
    position: relative;
    justify-self: end;
    width: min(100%, 400px);
    aspect-ratio: 3 / 4;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(68, 177, 255, .26);
    background: #01050d;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .48), 0 0 42px rgba(24, 145, 236, .12);
}

.captain-origin-meteor::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(1, 5, 13, .9));
    pointer-events: none;
}

.captain-origin-meteor img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.captain-origin-meteor figcaption {
    position: absolute;
    right: 24px;
    bottom: 22px;
    left: 24px;
    z-index: 1;
    color: rgba(234, 244, 252, .82);
    font-family: var(--display-font);
    font-size: .62rem;
    letter-spacing: .22em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.captain-issue-showcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, 380px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(38px, 6vw, 88px);
    padding: clamp(48px, 6vw, 78px);
    overflow: hidden;
    text-align: left;
}

.captain-issue-showcase::after {
    content: "";
    position: absolute;
    top: 12%;
    right: 4%;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 168, 255, .16), transparent 66%);
    filter: blur(16px);
    pointer-events: none;
}

.captain-issue-cover {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: min(100%, 360px);
    margin: 0;
}

.captain-issue-cover::before {
    content: "";
    position: absolute;
    inset: 8% -8% 4%;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(28, 162, 255, .28), rgba(255, 210, 61, .12) 46%, transparent 72%);
    filter: blur(28px);
}

.captain-issue-cover img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(112, 199, 255, .42);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .58), 0 0 34px rgba(23, 154, 255, .16);
}

.captain-issue-copy {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.captain-issue-copy h2 {
    margin-top: 18px;
}

.captain-issue-edition {
    margin-top: 18px;
    color: var(--captain-gold);
    font-family: var(--display-font);
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.captain-issue-description {
    max-width: 570px;
    margin: 22px 0 34px;
    color: #9cb0c2;
    font-size: clamp(.98rem, 1.25vw, 1.12rem);
    line-height: 1.75;
}

@media (max-width: 820px) {
    .captain-origin-lead {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .captain-origin-lead .captain-feature-heading {
        max-width: 680px;
    }

    .captain-origin-lead .captain-feature-heading > p:last-child {
        margin-right: auto;
        margin-left: auto;
    }

    .captain-origin-meteor {
        justify-self: center;
        width: min(76vw, 380px);
    }

    .captain-issue-showcase {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 58px 7vw 66px;
        text-align: center;
    }

    .captain-issue-cover {
        width: min(78vw, 360px);
    }

    .captain-issue-copy {
        max-width: 640px;
    }

    .captain-issue-description {
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 540px) {
    .captain-origin-meteor {
        width: min(82vw, 320px);
    }

    .captain-issue-showcase {
        gap: 36px;
        padding: 40px 20px 52px;
    }

    .captain-issue-cover {
        width: min(80vw, 300px);
    }
}

/* ================================================================
   BUILD 36 — TEARS FOR THE WEAK, WINE ON THE WEEKEND
   ================================================================ */

.world-page--tears {
    --tears-black: #030305;
    --tears-charcoal: #0a0a0d;
    --tears-wine: #76131e;
    --tears-red: #ea273c;
    --tears-blue: #2ca8ff;
    --tears-ice: #bde7ff;
    --tears-paper: #f3f0ec;
    --tears-muted: #9097a3;
    --sin-gold-bright: var(--tears-ice);
    color: var(--tears-paper);
    background: var(--tears-black);
}

.world-page--tears .sin-sound-toggle {
    border-color: rgba(234, 39, 60, .48);
    background: rgba(3, 3, 6, .88);
    color: var(--tears-ice);
}

.world-page--tears .site-header {
    background: rgba(3, 3, 6, .82);
    border-bottom-color: rgba(51, 155, 229, .19);
    backdrop-filter: blur(18px);
}

.world-page--tears .main-navigation .nav-button {
    border-color: rgba(234, 39, 60, .48);
}

.tears-world {
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 18%, rgba(151, 16, 34, .16), transparent 30%),
        radial-gradient(circle at 92% 26%, rgba(28, 140, 220, .13), transparent 34%),
        linear-gradient(180deg, #040407, #07070b 55%, #020203);
}

.tears-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    align-items: center;
    gap: clamp(42px, 5vw, 84px);
    width: min(1500px, 100%);
    min-height: 100svh;
    margin: 0 auto;
    padding: 128px max(5vw, 28px) 94px;
}

.tears-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(3, 3, 5, .97), rgba(3, 3, 5, .56) 48%, rgba(3, 3, 5, .2)),
        repeating-linear-gradient(0deg, transparent 0 118px, rgba(255, 255, 255, .018) 119px),
        repeating-linear-gradient(90deg, transparent 0 118px, rgba(255, 255, 255, .014) 119px);
}

.tears-hero::after {
    content: "";
    position: absolute;
    right: 7%;
    bottom: 0;
    left: 7%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tears-red), var(--tears-blue), transparent);
    box-shadow: 0 0 26px rgba(46, 164, 246, .44);
}

.tears-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.tears-smoke {
    position: absolute;
    width: 54vw;
    height: 54vw;
    border-radius: 50%;
    filter: blur(42px);
    opacity: .24;
}

.tears-smoke--red {
    top: 12%;
    left: -23%;
    background: radial-gradient(circle, rgba(179, 19, 40, .54), transparent 68%);
    animation: tearsSmokeRed 11s ease-in-out infinite alternate;
}

.tears-smoke--blue {
    right: -20%;
    bottom: -17%;
    background: radial-gradient(circle, rgba(24, 137, 224, .46), transparent 67%);
    animation: tearsSmokeBlue 13s ease-in-out infinite alternate;
}

.tears-wine-ring {
    position: absolute;
    top: 18%;
    right: 6%;
    width: min(42vw, 610px);
    aspect-ratio: 1;
    border: 1px solid rgba(176, 30, 48, .15);
    border-radius: 50%;
    box-shadow:
        inset 0 0 50px rgba(152, 19, 38, .08),
        0 0 72px rgba(33, 147, 228, .06);
    animation: tearsRing 8s ease-in-out infinite;
}

.tears-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.tears-kicker {
    color: var(--tears-ice);
    font-size: .67rem;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.tears-hero h1 {
    margin-top: 24px;
    font-family: var(--display-font);
    font-size: clamp(3rem, 4.8vw, 5.2rem);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .9;
    text-transform: uppercase;
    filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .56));
}

.tears-hero h1 span,
.tears-hero h1 em {
    display: block;
}

.tears-hero h1 span {
    color: #f14856;
    text-shadow: 0 0 28px rgba(234, 39, 60, .22);
}

.tears-hero h1 em {
    margin-top: .16em;
    color: #55baff;
    font-style: normal;
    text-shadow: 0 0 28px rgba(44, 168, 255, .2);
}

.tears-tagline {
    margin-top: 34px;
    color: var(--tears-paper);
    font-family: var(--display-font);
    font-size: clamp(.78rem, 1vw, .96rem);
    letter-spacing: .18em;
    line-height: 1.6;
    text-transform: uppercase;
}

.tears-introduction {
    max-width: 690px;
    margin-top: 24px;
    color: var(--tears-muted);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.78;
}

.tears-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 38px;
}

.world-page--tears .tears-primary-button {
    border-color: rgba(255, 255, 255, .12);
    background: linear-gradient(112deg, #9e1929, #d52339 48%, #197bc0 160%);
    box-shadow: 0 16px 42px rgba(139, 17, 35, .22);
}

.world-page--tears .tears-primary-button:hover,
.world-page--tears .tears-primary-button:focus-visible {
    box-shadow: 0 18px 50px rgba(207, 31, 52, .3), 0 0 28px rgba(38, 150, 227, .16);
}

.tears-back-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: rgba(199, 212, 224, .7);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: color .25s ease;
}

.tears-back-link:hover,
.tears-back-link:focus-visible {
    color: var(--tears-blue);
}

.tears-back-link:focus-visible {
    outline: 2px solid var(--tears-blue);
    outline-offset: 5px;
}

.tears-neon-stage {
    position: relative;
    z-index: 2;
    justify-self: center;
    width: min(100%, 650px);
    margin: 0;
    padding: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01));
    border: 1px solid rgba(115, 160, 196, .17);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .62), 0 0 44px rgba(34, 145, 223, .08);
    animation: tearsSignFloat 6s ease-in-out infinite;
}

.tears-neon-stage::after {
    content: "";
    position: absolute;
    inset: 10px;
    background: linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, .62));
    pointer-events: none;
}

.tears-neon-stage img {
    width: 100%;
    height: auto;
    display: block;
}

.tears-neon-haze {
    position: absolute;
    inset: 8% -7%;
    z-index: -1;
    background:
        radial-gradient(circle at 35% 45%, rgba(226, 29, 49, .24), transparent 48%),
        radial-gradient(circle at 67% 59%, rgba(32, 151, 232, .26), transparent 50%);
    filter: blur(32px);
}

.tears-neon-stage figcaption {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    z-index: 1;
    color: rgba(244, 241, 237, .68);
    font-family: var(--display-font);
    font-size: .58rem;
    letter-spacing: .26em;
    text-align: center;
    text-transform: uppercase;
}

.tears-scroll-cue {
    position: absolute;
    bottom: 24px;
    left: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%);
    color: rgba(211, 229, 241, .8);
    font-size: .64rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.tears-scroll-cue:focus-visible {
    outline: 2px solid var(--tears-blue);
    outline-offset: 6px;
}

.tears-scroll-cue i {
    width: 1px;
    height: 28px;
    background: linear-gradient(var(--tears-red), var(--tears-blue), transparent);
    animation: tearsScroll 1.8s ease-in-out infinite;
}

.tears-statement {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .72fr);
    align-items: center;
    gap: clamp(50px, 8vw, 120px);
    width: min(1380px, 90%);
    margin: 0 auto;
    padding: clamp(90px, 11vw, 160px) 0;
}

.world-page--tears .section-label {
    color: #70c6ff;
}

.tears-statement h2,
.tears-first-pour h2,
.tears-invitation h2 {
    font-family: var(--display-font);
    font-size: clamp(2.35rem, 5vw, 5.7rem);
    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .98;
    text-transform: uppercase;
}

.tears-statement h2 {
    max-width: 820px;
    margin-top: 20px;
}

.tears-statement-copy > p:not(.section-label) {
    max-width: 700px;
    margin-top: 30px;
    color: var(--tears-muted);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.8;
}

.tears-statement blockquote {
    position: relative;
    max-width: 730px;
    margin: 42px 0 0;
    padding: 20px 0 20px 28px;
    color: rgba(244, 241, 237, .9);
    font-size: clamp(1.08rem, 1.65vw, 1.42rem);
    font-style: italic;
    line-height: 1.65;
}

.tears-statement blockquote::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(var(--tears-red), var(--tears-blue));
    box-shadow: 0 0 18px rgba(38, 154, 233, .25);
}

.tears-crest {
    position: relative;
    justify-self: end;
    width: min(100%, 520px);
    margin: 0;
}

.tears-crest img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, .55));
}

.tears-crest-glow {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 40%, rgba(201, 25, 45, .28), transparent 52%),
        radial-gradient(circle at 65% 65%, rgba(35, 151, 226, .28), transparent 54%);
    filter: blur(28px);
    animation: tearsCrestGlow 4.5s ease-in-out infinite;
}

.tears-first-pour {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: clamp(50px, 8vw, 112px);
    width: min(1320px, 90%);
    margin: 0 auto clamp(70px, 9vw, 130px);
    padding: clamp(58px, 7vw, 90px);
    overflow: hidden;
    border: 1px solid rgba(85, 170, 230, .17);
    background:
        linear-gradient(112deg, rgba(133, 18, 36, .11), transparent 43%, rgba(28, 131, 204, .1)),
        #08080c;
}

.tears-first-pour-heading h2 {
    margin-top: 20px;
}

.tears-first-pour-heading > p:not(.section-label) {
    max-width: 550px;
    margin-top: 28px;
    color: var(--tears-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.tears-preview-card {
    position: relative;
    min-height: 370px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 15% 0%, rgba(218, 29, 52, .15), transparent 38%),
        radial-gradient(circle at 92% 100%, rgba(36, 151, 229, .15), transparent 42%),
        #050508;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
}

.tears-preview-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -82px;
    width: 240px;
    aspect-ratio: 1;
    border: 1px solid rgba(217, 32, 53, .18);
    border-radius: 50%;
    box-shadow: inset 0 0 42px rgba(217, 32, 53, .08);
}

.tears-preview-topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.tears-preview-topline span,
.tears-status {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 14px;
    border: 1px solid rgba(234, 39, 60, .52);
    color: #ff8590;
    font-size: .59rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.tears-preview-topline p {
    color: rgba(222, 231, 239, .66);
    font-size: .61rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.tears-waveform {
    position: relative;
    z-index: 1;
    height: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, .7vw, 10px);
    margin: 32px 0 26px;
}

.tears-waveform i {
    width: clamp(3px, .38vw, 6px);
    height: var(--h);
    min-height: 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--tears-red), #f1f0ed 49%, var(--tears-blue));
    box-shadow: 0 0 14px rgba(44, 168, 255, .25);
    transform-origin: center;
    animation: tearsWave 1.8s var(--d) ease-in-out infinite alternate;
}

.tears-preview-note {
    position: relative;
    z-index: 1;
    color: rgba(224, 232, 239, .58);
    font-size: .62rem;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
}

.tears-invitation {
    width: min(1120px, 90%);
    margin: 0 auto;
    padding: clamp(75px, 10vw, 140px) 24px;
    text-align: center;
}

.tears-invitation h2 {
    margin-top: 20px;
}

.tears-invitation > p:not(.section-label) {
    max-width: 720px;
    margin: 28px auto 0;
    color: var(--tears-muted);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.75;
}

.tears-invitation .tears-status {
    margin-top: 36px;
}

.tears-invitation .tears-back-link {
    display: block;
    width: max-content;
    margin: 32px auto 0;
}

.tears-footer {
    border-top-color: rgba(62, 155, 220, .16);
}

@keyframes tearsSmokeRed {
    from { transform: translate3d(-3%, 2%, 0) scale(.94); }
    to { transform: translate3d(9%, -4%, 0) scale(1.08); }
}

@keyframes tearsSmokeBlue {
    from { transform: translate3d(4%, 3%, 0) scale(1); }
    to { transform: translate3d(-8%, -5%, 0) scale(1.12); }
}

@keyframes tearsRing {
    0%, 100% { opacity: .45; transform: scale(.96); }
    50% { opacity: .85; transform: scale(1.025); }
}

@keyframes tearsSignFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes tearsScroll {
    0%, 100% { opacity: .24; transform: scaleY(.62); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@keyframes tearsCrestGlow {
    0%, 100% { opacity: .55; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes tearsWave {
    from { opacity: .52; transform: scaleY(.56); }
    to { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 1100px) {
    .tears-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 132px 7vw 98px;
        text-align: center;
    }

    .tears-hero-copy {
        max-width: 900px;
        margin: 0 auto;
    }

    .tears-introduction {
        margin-right: auto;
        margin-left: auto;
    }

    .tears-actions {
        justify-content: center;
    }

    .tears-neon-stage {
        width: min(78vw, 650px);
        margin: 12px auto 0;
    }

    .tears-scroll-cue {
        display: none;
    }
}

@media (max-width: 980px) {
    .tears-statement,
    .tears-first-pour {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tears-statement-copy > p:not(.section-label),
    .tears-statement h2,
    .tears-first-pour-heading > p:not(.section-label) {
        margin-right: auto;
        margin-left: auto;
    }

    .tears-statement blockquote {
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .tears-crest {
        justify-self: center;
        width: min(78vw, 520px);
    }

    .tears-first-pour {
        padding: clamp(52px, 8vw, 78px);
    }
}

@media (max-width: 700px) {
    .tears-hero {
        padding-right: 20px;
        padding-left: 20px;
    }

    .tears-kicker {
        letter-spacing: .23em;
    }

    .tears-hero h1 {
        font-size: clamp(2.65rem, 11vw, 4.5rem);
        line-height: .93;
    }

    .tears-tagline {
        letter-spacing: .12em;
    }

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

    .tears-primary-button {
        width: 100%;
    }

    .tears-neon-stage {
        width: 100%;
        padding: 7px;
    }

    .tears-neon-stage::after {
        inset: 7px;
    }

    .tears-statement,
    .tears-first-pour,
    .tears-invitation {
        width: calc(100% - 32px);
    }

    .tears-statement h2,
    .tears-first-pour h2,
    .tears-invitation h2 {
        font-size: clamp(2.2rem, 10vw, 4rem);
    }

    .tears-first-pour {
        gap: 38px;
        padding: 44px 20px;
    }

    .tears-preview-card {
        min-height: 330px;
        padding: 26px 20px;
    }

    .tears-preview-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .tears-waveform {
        gap: 5px;
    }
}

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

    .tears-smoke,
    .tears-wine-ring,
    .tears-neon-stage,
    .tears-scroll-cue i,
    .tears-crest-glow,
    .tears-waveform i {
        animation: none !important;
        transform: none !important;
    }

    .tears-primary-button,
    .tears-back-link {
        transition: none !important;
        transform: none !important;
    }

    .tears-scroll-cue {
        transition: none !important;
        transform: translateX(-50%) !important;
    }
}

/* ================================================================
   BUILD 37 — NUMBER-FREE STORY SECTIONS + HOMEPAGE CLARITY
   ================================================================ */

#creative-services,
#services,
#about,
#contact {
    scroll-margin-top: 82px;
}

.section-note {
    color: var(--muted);
    font-family: var(--body-font);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.creative-services-section .service-card h3 {
    min-height: 0;
}

.creative-services-section .service-card p {
    min-height: 68px;
}

/* The story and brand names now carry these cards without indices. */
.captain-feature-grid article,
.negro-pillar,
.mojo-standard article {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.captain-feature-grid h3,
.negro-pillar h3,
.mojo-piece h3,
.mojo-standard h3 {
    margin-top: 0;
}

@media (max-width: 820px) {
    .section-note {
        max-width: 420px;
        line-height: 1.65;
    }
}

@media (max-width: 540px) {
    .creative-services-section .service-card p {
        min-height: 0;
    }
}

/* ================================================================
   BUILD 38 — CLEAN LOGO PRESENCE + FIRST DEPOSIT CUTOUTS
   ================================================================ */

/* Standalone brand marks should feel embedded in their worlds, not boxed in. */
.world-mysb .world-logo--contain,
.world-negro .world-logo--negro,
.world-podcast .world-logo--homepage,
.negro-hero-mark img,
.tears-crest img,
.mojo-hero h1 img,
.mojo-hero-emblem img {
    background: transparent;
}

.world-mysb .world-logo--contain {
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .58));
}

.world-negro .world-logo--negro,
.world-podcast .world-logo--homepage {
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .68));
}

.world-mysb:hover .world-logo--contain,
.world-mysb:focus-visible .world-logo--contain {
    filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .66)) contrast(1.03) saturate(1.04);
}

.world-negro:hover .world-logo--negro,
.world-negro:focus-visible .world-logo--negro,
.world-podcast:hover .world-logo--homepage,
.world-podcast:focus-visible .world-logo--homepage {
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .74)) contrast(1.03) saturate(1.05);
}

/* First Deposit garments now rest directly on the collection canvas. */
.millyen-look-image {
    overflow: visible;
    border: 0;
    background: transparent;
}

.millyen-look-image::after {
    display: none;
}

.millyen-look-image img,
.millyen-look--jacket .millyen-look-image img,
.millyen-look--tee .millyen-look-image img,
.millyen-look--cap .millyen-look-image img {
    object-fit: contain;
    object-position: center;
    padding: clamp(2px, .7vw, 10px);
    filter: drop-shadow(0 24px 24px rgba(38, 28, 12, .16));
}

.millyen-look:hover .millyen-look-image img {
    transform: scale(1.018);
    filter: drop-shadow(0 28px 28px rgba(38, 28, 12, .2)) saturate(1.03) contrast(1.015);
}

.millyen-look-caption {
    grid-template-columns: 1fr;
    row-gap: 6px;
}

/* Give the First Pour copy and preview their own space before they can collide. */
.tears-first-pour-heading,
.tears-preview-card {
    position: relative;
    min-width: 0;
}

.tears-first-pour-heading {
    z-index: 2;
}

.tears-preview-card {
    z-index: 1;
}

@media (max-width: 1280px) {
    .tears-first-pour {
        grid-template-columns: 1fr;
        gap: clamp(42px, 6vw, 68px);
        text-align: center;
    }

    .tears-first-pour-heading > p:not(.section-label),
    .tears-first-pour-heading h2 {
        margin-right: auto;
        margin-left: auto;
    }

    .tears-preview-card {
        justify-self: center;
        width: min(100%, 780px);
    }
}

/* ================================================================
   BUILD 39 — MILL¥EN HOMEPAGE RESTORE + PRODUCT CAPTION ALIGNMENT
   ================================================================ */

.millyen-look-caption {
    justify-items: center;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
}

.millyen-look-caption h3,
.millyen-look-caption p {
    width: 100%;
}

.millyen-look--cap .millyen-look-caption {
    margin-right: auto;
    margin-left: auto;
}

/* ================================================================
   BUILD 40 — JUSTMOJO BACKGROUND-FREE PRODUCT LOOKBOOK
   ================================================================ */

.mojo-lookbook {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(28px, 4.5vw, 72px);
    max-width: 1380px;
    margin: 0 auto;
}

.mojo-look {
    min-width: 0;
}

.mojo-look-visual {
    display: grid;
    place-items: center;
    min-height: clamp(380px, 38vw, 540px);
    margin: 0;
}

.mojo-look-visual img {
    display: block;
    max-width: 100%;
    max-height: clamp(360px, 36vw, 520px);
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 28px 28px rgba(0, 0, 0, .18));
    transition: transform .75s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}

.mojo-look--tee .mojo-look-visual img,
.mojo-look--cap .mojo-look-visual img {
    width: 100%;
}

.mojo-look:hover .mojo-look-visual img {
    transform: scale(1.018);
    filter: drop-shadow(0 32px 32px rgba(0, 0, 0, .22)) contrast(1.015);
}

.mojo-look-caption {
    padding: 24px 10px 0;
    text-align: center;
}

.mojo-look-caption h3 {
    color: #080808;
    font-family: var(--display-font);
    font-size: clamp(1.25rem, 2vw, 2.1rem);
    font-weight: 500;
    letter-spacing: .045em;
    line-height: 1.05;
    text-transform: uppercase;
}

.mojo-look-caption p {
    max-width: 320px;
    margin: 14px auto 0;
    color: #5c5954;
    font-size: .82rem;
    letter-spacing: .05em;
    line-height: 1.6;
    text-transform: uppercase;
}

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

    .mojo-look--cap {
        grid-column: 1 / -1;
        width: min(100%, 620px);
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .mojo-lookbook {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .mojo-look--cap {
        grid-column: auto;
        width: 100%;
    }

    .mojo-look-visual {
        min-height: 0;
        aspect-ratio: 1.05;
    }

    .mojo-look-visual img {
        max-height: none;
    }
}


/* =========================================================
   LAUNCH BUILD — ACTIONS, FORMS, ACCESSIBILITY, AND CONTACT
   ========================================================= */

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

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9000;
    padding: 12px 16px;
    border: 1px solid var(--blue-bright);
    background: #020305;
    color: #fff;
    font-family: var(--display-font);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

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

:where(section, main)[id] {
    scroll-margin-top: 92px;
}

button.primary-button {
    font-family: inherit;
    cursor: pointer;
}

/* The approved hero artwork contains the visible button. This is its real,
   keyboard-accessible interaction layer. */
.hero-live-cta {
    position: absolute;
    top: 76.05%;
    left: 50%;
    z-index: 5;
    width: 28.5%;
    height: 7.75%;
    border: 1px solid transparent;
    transform: translateX(-50%);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.hero-live-cta:hover,
.hero-live-cta:focus-visible {
    border-color: rgba(85, 200, 255, .95);
    background: rgba(22, 156, 255, .07);
    box-shadow: 0 0 34px rgba(22, 156, 255, .34), inset 0 0 28px rgba(22, 156, 255, .08);
    outline: 0;
}

.world-art > picture {
    display: block;
    width: 100%;
    height: 100%;
}

.world-art > picture img {
    width: 100%;
    height: 100%;
}

.millyen-look-image picture,
.mojo-look-visual picture,
.tears-crest picture,
.negro-hero-mark picture {
    display: contents;
}

.updates-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    width: min(var(--page-width), 92%);
    margin: 18px auto 86px;
    padding: clamp(34px, 5vw, 64px);
    border: 1px solid rgba(85, 200, 255, .24);
    background:
        linear-gradient(120deg, rgba(10, 23, 39, .97), rgba(2, 3, 5, .97)),
        radial-gradient(circle at 82% 15%, rgba(22, 156, 255, .16), transparent 36%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .26);
}

.updates-banner h2 {
    margin: 8px 0 12px;
    font-family: var(--display-font);
    font-size: clamp(1.65rem, 3.5vw, 3.35rem);
    font-weight: 400;
    letter-spacing: .07em;
    line-height: 1.12;
    text-transform: uppercase;
}

.updates-banner p:not(.section-label) {
    max-width: 720px;
    color: var(--muted);
}

/* Shared form language */
[hidden] {
    display: none !important;
}

.form-field {
    display: grid;
    gap: 9px;
}

.form-field > span,
.service-options legend {
    color: #dce7f3;
    font-family: var(--display-font);
    font-size: .68rem;
    letter-spacing: .13em;
    line-height: 1.45;
    text-transform: uppercase;
}

.form-field strong,
.service-options strong {
    color: var(--blue-bright);
    font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 15px;
    border: 1px solid rgba(119, 170, 207, .28);
    border-radius: 0;
    background: rgba(4, 10, 18, .9);
    color: #f5f8ff;
    font: inherit;
    font-size: 1rem;
    line-height: 1.45;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-field textarea {
    min-height: 170px;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #718094;
    opacity: 1;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: rgba(85, 200, 255, .72);
    background: rgba(5, 15, 26, .98);
    box-shadow: 0 0 0 3px rgba(22, 156, 255, .1), 0 0 26px rgba(22, 156, 255, .08);
    outline: 0;
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.service-options[aria-invalid="true"] {
    border-color: #ff7171;
}

.form-field small,
.field-help,
.form-privacy {
    color: #77869a;
    font-size: .78rem;
}

.form-privacy a,
.consent-field a {
    color: var(--blue-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.consent-field {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: #9eabba;
    font-size: .83rem;
    line-height: 1.55;
    cursor: pointer;
}

.consent-field input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--blue);
}

.honeypot-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.form-status {
    min-height: 1.5em;
    color: #9fb2c7;
    font-size: .84rem;
    line-height: 1.5;
}

.form-status.is-success {
    color: #79e3ae;
}

.form-status.is-error,
.field-error {
    color: #ff9a9a;
}

.field-error {
    min-height: 1.3em;
    font-size: .78rem;
}

/* Project inquiry page */
.contact-page {
    --contact-panel: #07111d;
    background:
        radial-gradient(circle at 16% 18%, rgba(22, 156, 255, .14), transparent 34%),
        radial-gradient(circle at 80% 48%, rgba(31, 74, 126, .11), transparent 32%),
        #020305;
}

.contact-main {
    overflow: hidden;
}

.contact-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 154px 6% 92px;
    text-align: center;
    isolation: isolate;
}

.contact-hero::before {
    content: "";
    position: absolute;
    inset: 76px 0 0;
    z-index: -2;
    background:
        linear-gradient(rgba(2, 3, 5, .58), rgba(2, 3, 5, .9)),
        url("../assets/images/vivid-hero-city.webp") center / cover no-repeat;
    filter: saturate(.72) contrast(1.1);
}

.contact-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 45%;
    background: linear-gradient(to bottom, transparent, #020305);
}

.contact-hero-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: -1;
    width: min(760px, 80vw);
    height: 280px;
    border-radius: 50%;
    background: rgba(22, 156, 255, .16);
    filter: blur(90px);
    transform: translateX(-50%);
}

.contact-hero h1 {
    margin-top: 18px;
    color: #f4f7fb;
    font-family: var(--display-font);
    font-size: clamp(2.55rem, 7vw, 7.2rem);
    font-weight: 400;
    letter-spacing: .035em;
    line-height: .98;
    text-transform: uppercase;
    text-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}

.contact-hero h1 span {
    color: var(--blue-bright);
    text-shadow: 0 0 34px rgba(22, 156, 255, .24);
}

.contact-hero > p:last-child {
    max-width: 720px;
    margin-top: 30px;
    color: #a7b4c3;
    font-size: clamp(1rem, 1.45vw, 1.25rem);
    line-height: 1.75;
}

.project-form-section {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: clamp(40px, 7vw, 110px);
    width: min(1280px, 90%);
    margin: 0 auto;
    padding: clamp(70px, 9vw, 130px) 0;
}

.project-form-intro {
    align-self: start;
    position: sticky;
    top: 118px;
}

.project-form-intro h2 {
    margin-top: 15px;
    font-family: var(--display-font);
    font-size: clamp(2rem, 4.2vw, 4.65rem);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.03;
    text-transform: uppercase;
}

.project-form-intro > p:not(.section-label) {
    margin-top: 26px;
    color: #91a0b1;
    line-height: 1.75;
}

.project-expectations {
    display: grid;
    gap: 24px;
    margin-top: 46px;
}

.project-expectations article {
    padding-left: 20px;
    border-left: 1px solid rgba(85, 200, 255, .32);
}

.project-expectations h3 {
    font-family: var(--display-font);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.project-expectations p {
    margin-top: 7px;
    color: #77869a;
    font-size: .84rem;
}

.project-form {
    position: relative;
    display: grid;
    gap: 28px;
    padding: clamp(26px, 4.7vw, 62px);
    border: 1px solid rgba(85, 200, 255, .2);
    background:
        linear-gradient(145deg, rgba(9, 20, 34, .97), rgba(3, 8, 14, .98));
    box-shadow: 0 36px 100px rgba(0, 0, 0, .34);
}

.project-form::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 8%;
    width: 32%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
    box-shadow: 0 0 20px var(--blue);
}

.form-grid {
    display: grid;
    gap: 22px;
}

.form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-options {
    display: grid;
    gap: 14px;
    border: 0;
}

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

.choice-grid label {
    position: relative;
    cursor: pointer;
}

.choice-grid input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.choice-grid span {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid rgba(119, 170, 207, .22);
    background: rgba(4, 10, 18, .72);
    color: #91a0b1;
    font-size: .82rem;
    transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.choice-grid input:hover + span,
.choice-grid input:focus-visible + span {
    border-color: rgba(85, 200, 255, .58);
    color: #fff;
}

.choice-grid input:checked + span {
    border-color: var(--blue-bright);
    background: rgba(22, 156, 255, .12);
    color: #fff;
    box-shadow: inset 0 0 18px rgba(22, 156, 255, .08), 0 0 22px rgba(22, 156, 255, .08);
}

.project-submit-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.project-submit-row .form-status {
    flex: 1 1 260px;
}

/* Shared release update dialog */
.notify-dialog {
    width: min(620px, calc(100% - 28px));
    max-height: calc(100dvh - 28px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(85, 200, 255, .34);
    background: #050b13;
    color: #f5f8ff;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .72), 0 0 70px rgba(22, 156, 255, .12);
}

.notify-dialog::backdrop {
    background: rgba(0, 3, 8, .82);
    backdrop-filter: blur(8px);
}

.notify-dialog-card {
    position: relative;
    padding: clamp(30px, 6vw, 62px);
    background:
        radial-gradient(circle at 86% 3%, rgba(22, 156, 255, .18), transparent 35%),
        linear-gradient(145deg, rgba(10, 23, 39, .96), rgba(3, 7, 12, .98));
}

.notify-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(85, 200, 255, .2);
    background: rgba(2, 3, 5, .5);
    color: #b9c4d0;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.notify-dialog h2 {
    margin-top: 12px;
    padding-right: 32px;
    font-family: var(--display-font);
    font-size: clamp(1.65rem, 5vw, 3.15rem);
    font-weight: 400;
    letter-spacing: .035em;
    line-height: 1.08;
    text-transform: uppercase;
}

.notify-dialog-card > p:not(.section-label) {
    margin-top: 18px;
    color: #91a0b1;
}

.notify-form {
    display: grid;
    gap: 20px;
    margin-top: 30px;
}

.notify-form .primary-button {
    width: 100%;
}

.notify-inline-button {
    margin-top: 17px;
    padding: 0 0 5px;
    border: 0;
    border-bottom: 1px solid rgba(214, 163, 74, .5);
    background: transparent;
    color: var(--sin-gold);
    font: inherit;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

.notify-inline-button:hover,
.notify-inline-button:focus-visible {
    color: var(--sin-gold-bright);
}

.notify-supporting-copy {
    margin-bottom: 24px !important;
}

.millyen-vault-actions .primary-button {
    border-color: rgba(224, 179, 74, .66);
    background: rgba(8, 25, 17, .76);
    color: var(--millyen-gold-bright);
}

.millyen-vault-actions .primary-button span {
    padding: 0;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
}

.mojo-signature .primary-button + .primary-button {
    margin-top: 18px;
}

.tears-invitation .primary-button {
    margin-top: 34px;
}

.tears-invitation .tears-back-link {
    margin-top: 28px;
}

@media (max-width: 980px) {
    .project-form-section {
        grid-template-columns: 1fr;
    }

    .project-form-intro {
        position: static;
    }
}

@media (max-width: 900px) {
    .hero-live-cta {
        width: min(70vw, 29vh);
    }

    .updates-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .hero-live-cta {
        width: min(72vw, 29vh);
        height: 8.2%;
    }

    .updates-banner {
        margin-bottom: 58px;
        padding: 32px 24px;
    }

    .updates-banner .primary-button,
    .project-submit-row .primary-button {
        width: 100%;
    }

    .contact-hero {
        min-height: 74svh;
        padding: 132px 7% 72px;
    }

    .contact-hero h1 {
        font-size: clamp(2.35rem, 13vw, 4.1rem);
    }

    .project-form-section {
        width: min(92%, 680px);
        padding-top: 62px;
    }

    .project-form {
        gap: 24px;
        padding: 26px 18px;
    }

    .form-grid--two,
    .choice-grid {
        grid-template-columns: 1fr;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 16px;
    }

    .notify-dialog-card {
        padding: 42px 22px 28px;
    }

    .millyen-vault-actions .primary-button,
    .tears-invitation .primary-button,
    .mojo-signature .primary-button {
        width: min(100%, 340px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skip-link,
    .hero-live-cta {
        transition: none;
    }
}

.legal-page {
    background:
        radial-gradient(circle at 50% 0%, rgba(22, 156, 255, .12), transparent 28%),
        #020305;
}

.legal-main {
    width: min(980px, 90%);
    margin: 0 auto;
    padding: 150px 0 70px;
}

.legal-hero {
    padding: clamp(48px, 8vw, 92px) 0;
    border-bottom: 1px solid rgba(85, 200, 255, .2);
    text-align: center;
}

.legal-hero h1 {
    margin-top: 15px;
    font-family: var(--display-font);
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

.legal-hero > p:last-child {
    margin-top: 20px;
    color: var(--muted);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.legal-content {
    padding: clamp(46px, 7vw, 84px) 0;
    color: #a8b4c2;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.82;
}

.legal-content > p:first-child {
    color: #d9e2eb;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}

.legal-content section {
    margin-top: 48px;
}

.legal-content h2 {
    margin-bottom: 13px;
    color: #f2f6fb;
    font-family: var(--display-font);
    font-size: clamp(1.2rem, 2.3vw, 1.8rem);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.legal-content > .primary-button {
    margin-top: 60px;
}

.not-found-page {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at 50% 35%, rgba(22, 156, 255, .16), transparent 34%),
        #020305;
    text-align: center;
}

.not-found-page main {
    display: grid;
    justify-items: center;
    width: min(760px, 100%);
}

.not-found-page img {
    width: min(220px, 60vw);
    margin-bottom: 24px;
}

.not-found-page h1 {
    margin-top: 16px;
    font-family: var(--display-font);
    font-size: clamp(2.2rem, 7vw, 5.5rem);
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1.05;
    text-transform: uppercase;
}

.not-found-page main > p:not(.section-label) {
    margin: 24px 0 34px;
    color: var(--muted);
}