/* ==========================================================
   PREMIUM DESIGN PASS — ISABELLA DELLE CASTELLE
   Final visual harmonisation layer
========================================================== */

:root{
    --pdp-bg:#050505;
    --pdp-ivory:#F7F2EA;
    --pdp-ivory-soft:rgba(247,242,234,.72);
    --pdp-muted:rgba(247,242,234,.58);
    --pdp-gold:#C7A45D;
    --pdp-gold-soft:rgba(199,164,93,.42);
    --pdp-panel:rgba(247,242,234,.035);
    --pdp-panel-strong:rgba(247,242,234,.06);
    --pdp-border:rgba(247,242,234,.12);
    --pdp-border-gold:rgba(199,164,93,.28);
    --pdp-shadow:0 34px 90px rgba(0,0,0,.42);
    --pdp-serif:"Cormorant Garamond", Georgia, serif;
    --pdp-sans:Inter, Arial, sans-serif;
}

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

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:var(--pdp-bg);
    color:var(--pdp-ivory);
}

body{
    font-family:var(--pdp-sans);
}

/* ==========================================================
   HEADER
========================================================== */

.site-header{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    z-index:2000;
    height:104px;
    padding:0 clamp(28px,5vw,92px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:42px;
    background:
        linear-gradient(to bottom, rgba(5,5,5,.94), rgba(5,5,5,.60));
    backdrop-filter:blur(26px);
    border-bottom:1px solid rgba(247,242,234,.10);
}

.site-header .brand{
    min-width:210px;
    color:var(--pdp-ivory);
    text-decoration:none;
    display:flex;
    flex-direction:column;
    line-height:1;
}

.site-header .brand span{
    font-family:var(--pdp-serif);
    font-size:clamp(38px,3.6vw,54px);
    font-weight:400;
    letter-spacing:-.055em;
}

.site-header .brand small{
    margin-top:10px;
    color:var(--pdp-gold);
    font-size:11px;
    letter-spacing:.42em;
    text-transform:uppercase;
}

.site-header nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:clamp(20px,2.2vw,38px);
    white-space:nowrap;
}

.site-header nav a{
    color:rgba(247,242,234,.78);
    text-decoration:none;
    font-size:15px;
    line-height:1;
    transition:color .35s ease, opacity .35s ease;
}

.site-header nav a:hover{
    color:var(--pdp-ivory);
}

.site-header nav a.lang{
    width:60px;
    height:60px;
    margin-left:6px;
    border-radius:50%;
    border:1px solid rgba(247,242,234,.22);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--pdp-ivory);
    background:rgba(247,242,234,.025);
}

/* ==========================================================
   GLOBAL SECTION RHYTHM
========================================================== */

main.page{
    background:var(--pdp-bg);
}

.hero-final-v2,
.artist-cinema,
.performance-cinema,
.road-usa,
.gallery-v3,
.booking-v3,
.footer-premium{
    position:relative;
    background:var(--pdp-bg) !important;
    color:var(--pdp-ivory) !important;
}

.artist-cinema,
.performance-cinema,
.road-usa,
.gallery-v3,
.booking-v3{
    padding-top:clamp(120px,11vw,180px) !important;
    padding-bottom:clamp(110px,10vw,160px) !important;
}

/* ==========================================================
   TITLES / CHAPTERS / GOLD LINES
========================================================== */

.hero-final-v2-kicker,
.artist-cinema-text > p:first-child,
.performance-eyebrow,
.road-kicker,
.road-eyebrow,
.gallery-eyebrow,
.booking-kicker,
.footer-kicker{
    color:var(--pdp-gold) !important;
    text-transform:uppercase !important;
    letter-spacing:.34em !important;
    font-size:11px !important;
    font-weight:650 !important;
    line-height:1.7 !important;
    margin:0 0 32px !important;
}

.hero-final-v2 h1,
.artist-cinema h2,
.performance-cinema h2,
.road-usa h2,
.gallery-v3 h2,
.booking-v3 h2,
.footer-brand h2{
    font-family:var(--pdp-serif) !important;
    font-weight:400 !important;
    letter-spacing:-.055em !important;
    color:var(--pdp-ivory) !important;
}

.artist-cinema h2,
.performance-cinema h2,
.road-usa h2,
.gallery-v3 h2,
.booking-v3 h2{
    font-size:clamp(56px,7.8vw,124px) !important;
    line-height:.86 !important;
    margin:0 !important;
}

.artist-line,
.performance-line,
.road-line,
.gallery-line,
.booking-line{
    display:block !important;
    width:96px !important;
    height:1px !important;
    background:var(--pdp-gold) !important;
    margin:42px 0 !important;
    opacity:1 !important;
}

.artist-copy,
.performance-intro,
.road-copy,
.gallery-copy,
.booking-copy,
.booking-copy-v3 p{
    color:var(--pdp-ivory-soft) !important;
    font-size:19px !important;
    line-height:1.9 !important;
    max-width:740px !important;
}

/* ==========================================================
   HERO
========================================================== */

.hero-final-v2{
    min-height:100svh !important;
    height:100svh !important;
    overflow:hidden !important;
}

.hero-final-v2-video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

.hero-final-v2-content{
    position:relative !important;
    z-index:5 !important;
    min-height:100svh !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    padding:130px clamp(28px,5vw,92px) 90px !important;
    max-width:980px !important;
}

.hero-final-v2 h1{
    font-size:clamp(78px,10vw,162px) !important;
    line-height:.78 !important;
    margin:0 !important;
}

.hero-final-v2-subtitle{
    margin-top:34px !important;
    color:rgba(247,242,234,.78) !important;
    font-size:clamp(21px,2vw,31px) !important;
    line-height:1.45 !important;
    max-width:760px !important;
}

/* ==========================================================
   PREMIUM CTA SYSTEM
========================================================== */

.hero-final-v2-actions,
.road-actions{
    display:flex !important;
    gap:24px !important;
    flex-wrap:wrap !important;
    margin-top:48px !important;
}

.hero-final-v2-actions a,
.road-btn,
.booking-form-v3 button{
    min-width:250px;
    min-height:64px;
    padding:0 34px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:15px;
    font-weight:650;
    letter-spacing:.075em;
    text-transform:uppercase;
    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        background .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        opacity .45s ease;
}

.hero-final-v2-actions a:first-child,
.road-btn.primary,
.booking-form-v3 button{
    background:var(--pdp-ivory) !important;
    color:#050505 !important;
    border:1px solid var(--pdp-ivory) !important;
    box-shadow:0 22px 58px rgba(199,164,93,.20) !important;
}

.hero-final-v2-actions a.ghost,
.road-btn.ghost{
    background:rgba(247,242,234,.035) !important;
    color:var(--pdp-ivory) !important;
    border:1px solid rgba(199,164,93,.46) !important;
    box-shadow:inset 0 0 0 1px rgba(247,242,234,.035) !important;
    backdrop-filter:blur(18px);
}

.hero-final-v2-actions a:hover,
.road-btn:hover,
.booking-form-v3 button:hover{
    transform:translateY(-4px);
}

.hero-final-v2-actions a:first-child:hover,
.road-btn.primary:hover,
.booking-form-v3 button:hover{
    background:#fff !important;
    box-shadow:0 30px 78px rgba(199,164,93,.30) !important;
}

.hero-final-v2-actions a.ghost:hover,
.road-btn.ghost:hover{
    background:rgba(199,164,93,.12) !important;
    border-color:var(--pdp-gold) !important;
    box-shadow:
        inset 0 0 0 1px rgba(247,242,234,.08),
        0 20px 56px rgba(199,164,93,.18) !important;
}

/* ==========================================================
   ARTIST / PERFORMANCE IMAGE SYSTEM
========================================================== */

.artist-cinema-media,
.performance-cinema-media{
    overflow:hidden !important;
    border-radius:0 !important;
}

.artist-cinema-media img,
.performance-cinema-media img,
.gallery-v3 img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==========================================================
   PERFORMANCE EDITORIAL NAV
========================================================== */

.performance-editorial-nav{
    margin-top:58px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    max-width:740px !important;
}

.performance-editorial-item{
    color:var(--pdp-ivory) !important;
    text-decoration:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:28px !important;
    padding:14px 0 !important;
    border-bottom:1px solid rgba(247,242,234,.09) !important;
}

.performance-editorial-item span{
    text-transform:uppercase !important;
    letter-spacing:.13em !important;
    font-size:13px !important;
    color:rgba(247,242,234,.82) !important;
}

.performance-editorial-item i{
    flex:0 0 70px !important;
    width:70px !important;
    height:1px !important;
    background:var(--pdp-gold) !important;
    opacity:.9 !important;
}

/* ==========================================================
   ROAD TO USA
========================================================== */

.road-usa{
    overflow:hidden !important;
}

.road-inner{
    position:relative !important;
    z-index:3 !important;
    width:100% !important;
    max-width:1480px !important;
    margin:0 auto !important;
    padding:0 clamp(28px,5vw,92px) !important;
}

.road-copy{
    max-width:820px !important;
}

.road-steps{
    margin-top:86px !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:34px !important;
    align-items:stretch !important;
}

.road-step{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    min-height:310px !important;
    overflow:hidden !important;
    padding:42px 42px 46px !important;
    border:1px solid var(--pdp-border-gold) !important;
    border-radius:30px !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(199,164,93,.08), transparent 30%),
        linear-gradient(145deg, rgba(247,242,234,.06), rgba(247,242,234,.018)) !important;
    box-shadow:var(--pdp-shadow) !important;
}

.road-step::before{
    content:"" !important;
    position:absolute !important;
    left:42px !important;
    top:96px !important;
    width:86px !important;
    height:1px !important;
    background:var(--pdp-gold) !important;
}

.road-step span{
    display:block !important;
    color:var(--pdp-gold) !important;
    font-size:13px !important;
    letter-spacing:.28em !important;
    margin:0 0 58px !important;
}

.road-step strong{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    font-family:var(--pdp-serif) !important;
    font-weight:400 !important;
    color:var(--pdp-ivory) !important;
    font-size:clamp(30px,2.45vw,43px) !important;
    line-height:1.03 !important;
    letter-spacing:-.035em !important;
    margin:0 0 22px !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
}

.road-step p{
    width:100% !important;
    max-width:100% !important;
    color:var(--pdp-ivory-soft) !important;
    font-size:17px !important;
    line-height:1.75 !important;
    margin:0 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
}

/* ==========================================================
   GALLERY
========================================================== */

.gallery-v3{
    overflow:hidden !important;
}

.gallery-v3-head{
    max-width:1480px !important;
    margin:0 auto 70px !important;
    padding:0 clamp(28px,5vw,92px) !important;
}

.gallery-v3-grid{
    max-width:1480px !important;
    margin:0 auto !important;
    padding:0 clamp(28px,5vw,92px) !important;
    display:grid !important;
    grid-template-columns:1.25fr .85fr .85fr !important;
    gap:24px !important;
}

.g-item{
    position:relative !important;
    min-height:420px !important;
    overflow:hidden !important;
    border:1px solid var(--pdp-border) !important;
    background:var(--pdp-panel) !important;
}

.g-item img{
    position:absolute !important;
    inset:0 !important;
    opacity:.76 !important;
    transform:scale(1.02);
}

.g-item span,
.g-item h3{
    position:relative !important;
    z-index:2 !important;
}

.g-item span{
    display:block !important;
    padding:34px 34px 0 !important;
    color:var(--pdp-gold) !important;
    text-transform:uppercase !important;
    letter-spacing:.22em !important;
    font-size:11px !important;
}

.g-item h3{
    position:absolute !important;
    left:34px !important;
    right:34px !important;
    bottom:34px !important;
    font-family:var(--pdp-serif) !important;
    font-weight:400 !important;
    font-size:clamp(34px,3.6vw,62px) !important;
    line-height:.92 !important;
    letter-spacing:-.045em !important;
    margin:0 !important;
}

.g-large{
    grid-row:span 2 !important;
    min-height:864px !important;
}

.g-wide{
    grid-column:span 2 !important;
}

/* ==========================================================
   BOOKING
========================================================== */

.booking-card-v3{
    max-width:1480px !important;
    margin:0 auto !important;
    padding:0 clamp(28px,5vw,92px) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(380px,560px) !important;
    gap:clamp(54px,7vw,120px) !important;
    align-items:start !important;
}

.booking-form-v3{
    display:grid !important;
    gap:16px !important;
    padding:36px !important;
    border:1px solid var(--pdp-border-gold) !important;
    border-radius:30px !important;
    background:linear-gradient(145deg, rgba(247,242,234,.06), rgba(247,242,234,.02)) !important;
    box-shadow:var(--pdp-shadow) !important;
}

.booking-form-v3 input,
.booking-form-v3 select,
.booking-form-v3 textarea{
    width:100% !important;
    min-height:56px !important;
    padding:0 20px !important;
    border-radius:0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(247,242,234,.18) !important;
    background:transparent !important;
    color:var(--pdp-ivory) !important;
    font-size:15px !important;
    outline:none !important;
}

.booking-form-v3 textarea{
    padding-top:18px !important;
    min-height:150px !important;
    resize:vertical;
}

.booking-form-v3 input::placeholder,
.booking-form-v3 textarea::placeholder{
    color:rgba(247,242,234,.46) !important;
}

.booking-form-v3 select{
    color:rgba(247,242,234,.76) !important;
}

.booking-form-v3 button{
    margin-top:18px !important;
    width:100% !important;
}

/* ==========================================================
   FOOTER
========================================================== */

.footer-premium{
    padding:130px clamp(28px,5vw,92px) 46px !important;
    overflow:hidden !important;
}

.footer-premium-inner{
    max-width:1480px !important;
}

.footer-columns{
    gap:54px !important;
}

.footer-col span{
    color:var(--pdp-gold) !important;
    letter-spacing:.30em !important;
}

.footer-col a,
.footer-col p{
    color:var(--pdp-ivory-soft) !important;
}

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

@media(max-width:1180px){
    .site-header{
        height:auto;
        min-height:96px;
        align-items:flex-start;
        padding:20px 24px;
    }

    .site-header nav{
        max-width:70vw;
        overflow-x:auto;
        padding-bottom:10px;
        gap:18px;
    }

    .road-steps,
    .gallery-v3-grid,
    .booking-card-v3{
        grid-template-columns:1fr !important;
    }

    .g-large,
    .g-wide{
        grid-column:auto !important;
        grid-row:auto !important;
        min-height:520px !important;
    }

    .road-step{
        min-height:auto !important;
    }
}

@media(max-width:720px){
    .site-header .brand{
        min-width:145px;
    }

    .site-header .brand span{
        font-size:34px;
    }

    .site-header nav{
        max-width:58vw;
    }

    .hero-final-v2-content{
        padding:120px 24px 70px !important;
    }

    .hero-final-v2 h1{
        font-size:64px !important;
    }

    .artist-cinema,
    .performance-cinema,
    .road-usa,
    .gallery-v3,
    .booking-v3{
        padding-top:96px !important;
        padding-bottom:92px !important;
    }

    .road-inner,
    .gallery-v3-head,
    .gallery-v3-grid,
    .booking-card-v3{
        padding-left:24px !important;
        padding-right:24px !important;
    }

    .hero-final-v2-actions a,
    .road-btn,
    .booking-form-v3 button{
        width:100%;
        min-width:0;
    }

    .road-step{
        padding:34px 28px 38px !important;
        border-radius:24px !important;
    }

    .road-step::before{
        left:28px !important;
    }

    .road-step strong{
        font-size:34px !important;
    }

    .g-item,
    .g-large,
    .g-wide{
        min-height:420px !important;
    }

    .booking-form-v3{
        padding:26px !important;
    }
}

/* ==========================================================
   SHAYLA ACADEMY CTA — HERO
   Added 2026-08-09
========================================================== */

.hero-final-v2-actions a.academy-cta{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(199,164,93,.10),
            rgba(247,242,234,.025)
        ) !important;

    color:var(--pdp-ivory) !important;

    border:1px solid rgba(199,164,93,.78) !important;

    box-shadow:
        inset 0 0 0 1px rgba(247,242,234,.025),
        0 12px 34px rgba(199,164,93,.08) !important;
}

.hero-final-v2-actions a.academy-cta::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.12) 48%,
            transparent 76%
        );

    transform:translateX(-140%);
    transition:transform .75s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
}

.hero-final-v2-actions a.academy-cta:hover{
    background:
        linear-gradient(
            135deg,
            rgba(199,164,93,.20),
            rgba(199,164,93,.08)
        ) !important;

    border-color:var(--pdp-gold) !important;

    box-shadow:
        inset 0 0 0 1px rgba(247,242,234,.06),
        0 22px 58px rgba(199,164,93,.22) !important;
}

.hero-final-v2-actions a.academy-cta:hover::before{
    transform:translateX(140%);
}

.hero-final-v2-actions a.academy-cta:focus-visible{
    outline:2px solid var(--pdp-gold);
    outline-offset:4px;
}


/* ==========================================================
   HERO CTA — 3 BUTTON RESPONSIVE CONTROL
========================================================== */

@media (min-width:721px) and (max-width:1180px){

    .hero-final-v2-actions{
        max-width:760px;
        gap:16px !important;
    }

    .hero-final-v2-actions a{
        min-width:220px;
        padding-left:24px;
        padding-right:24px;
    }
}

@media (max-width:720px){

    .hero-final-v2-actions{
        width:100%;
        gap:14px !important;
    }

    .hero-final-v2-actions a{
        width:100% !important;
        min-width:0 !important;
    }
}

@media (prefers-reduced-motion:reduce){

    .hero-final-v2-actions a.academy-cta::before{
        display:none;
    }
}