/*
|--------------------------------------------------------------------------
| RSVP POLISH V4
|--------------------------------------------------------------------------
| Focus:
| - Better typography
| - Richer header
| - Better sidebar card
| - Fuller footer
|--------------------------------------------------------------------------
*/

:root {
    --v4-navy: #12305f;
    --v4-navy-deep: #0c2347;
    --v4-magenta: #b61b58;
    --v4-magenta-soft: #fbf2f6;
    --v4-gold: #f0a331;
    --v4-cream: #fffaf5;
    --v4-paper: #ffffff;
    --v4-border: #ece3da;
    --v4-text: #324562;
    --v4-muted: #7c8798;
    --v4-shadow: 0 18px 45px rgba(17, 26, 46, 0.08);
    --v4-shadow-soft: 0 10px 28px rgba(17, 26, 46, 0.05);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

body.rsvp-luxury-page {
    font-family:
        "Plus Jakarta Sans",
        "Segoe UI",
        Arial,
        sans-serif;
    color: var(--v4-text);
    background: #fcfaf7;
}

.rsvp-luxury-page h1,
.rsvp-luxury-page .hero-title,
.rsvp-luxury-page .registration-intro h2 {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
}

.rsvp-luxury-page .hero-title {
    font-weight: 600;
    letter-spacing: -0.05em;
}

.rsvp-luxury-page .hero-description,
.rsvp-luxury-page p,
.rsvp-luxury-page input,
.rsvp-luxury-page textarea,
.rsvp-luxury-page select,
.rsvp-luxury-page button {
    font-family:
        "Plus Jakarta Sans",
        "Segoe UI",
        Arial,
        sans-serif;
}


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

.rsvp-luxury-page .topbar {
    background:
        rgba(255, 252, 248, 0.92);
    border-bottom:
        1px solid rgba(18, 48, 95, 0.07);
    box-shadow:
        0 8px 24px rgba(18, 27, 45, 0.04);
}

.rsvp-luxury-page .topbar-inner {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.rsvp-luxury-page .topbar-left {
    display: flex;
    align-items: center;
    gap: 30px;
    min-width: 0;
}

.rsvp-luxury-page .brand-copy strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--v4-navy);
    letter-spacing: -0.02em;
}

.rsvp-luxury-page .brand-copy small {
    font-size: 13px;
    color: #8a8f98;
    font-weight: 500;
}

.rsvp-luxury-page .topbar-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rsvp-luxury-page .topbar-nav a {
    position: relative;
    text-decoration: none;
    color: #5a6679;
    font-size: 13px;
    font-weight: 700;
    transition:
        color 0.2s ease;
}

.rsvp-luxury-page .topbar-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 1px;
    background: var(--v4-magenta);
    transition: right 0.25s ease;
}

.rsvp-luxury-page .topbar-nav a:hover {
    color: var(--v4-navy);
}

.rsvp-luxury-page .topbar-nav a:hover::after {
    right: 0;
}

.rsvp-luxury-page .topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rsvp-luxury-page .topbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #7f8898;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rsvp-luxury-page .topbar-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rsvp-luxury-page .topbar-meta span:not(:last-child)::after {
    content: "•";
    color: #ccb8c1;
}

.rsvp-luxury-page .topbar-badge {
    padding: 12px 22px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #fff8fb, #fceff4);
    border:
        1px solid rgba(182, 27, 88, 0.10);
    color: var(--v4-magenta);
    font-weight: 800;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9);
}


/* =========================================================
   HERO TEXT REFINEMENT
   ========================================================= */

.rsvp-luxury-page .hero-kicker {
    font-family:
        "Plus Jakarta Sans",
        sans-serif;
}

.rsvp-luxury-page .hero-description {
    max-width: 700px;
    color: #5d6880;
    font-size: 18px;
    line-height: 1.8;
}


/* =========================================================
   LEFT SIDEBAR CARD
   ========================================================= */

.rsvp-luxury-page .registration-sidebar {
    position: sticky;
    top: 108px;
    border-radius: 28px;
    border: 1px solid rgba(18, 48, 95, 0.07);
    background:
        linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
    box-shadow: var(--v4-shadow);
    padding: 28px;
    overflow: hidden;
}

.rsvp-luxury-page .registration-sidebar::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background:
        linear-gradient(90deg, var(--v4-gold), var(--v4-magenta));
}

.rsvp-luxury-page .sidebar-top {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(18, 48, 95, 0.08);
    margin-bottom: 16px;
}

.rsvp-luxury-page .sidebar-top small {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--v4-magenta);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.rsvp-luxury-page .sidebar-top strong {
    display: block;
    color: var(--v4-navy);
    font-size: 31px;
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
    font-weight: 600;
}

.rsvp-luxury-page .registration-progress {
    display: grid;
    gap: 12px;
}

.rsvp-luxury-page .progress-step {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 12px;
    border-radius: 18px;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.rsvp-luxury-page .progress-step:hover {
    transform: translateY(-1px);
    background: #fff8fb;
}

.rsvp-luxury-page .progress-step.is-active {
    background:
        linear-gradient(180deg, #fff7fa, #fdf1f5);
    box-shadow:
        inset 0 0 0 1px rgba(182, 27, 88, 0.05);
}

.rsvp-luxury-page .progress-step.is-complete {
    background: #fffdfa;
}

.rsvp-luxury-page .progress-number {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: #f6f1ed;
    color: #8e97a6;
    font-size: 13px;
    font-weight: 800;
}

.rsvp-luxury-page .progress-step.is-active .progress-number,
.rsvp-luxury-page .progress-step.is-complete .progress-number {
    background:
        linear-gradient(135deg, var(--v4-magenta), #cf2a65);
    color: #fff;
    box-shadow:
        0 10px 18px rgba(182, 27, 88, 0.14);
}

.rsvp-luxury-page .progress-copy strong {
    color: var(--v4-navy);
    font-size: 15px;
    font-weight: 800;
}

.rsvp-luxury-page .progress-copy small {
    color: #929aaa;
    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   FORM TITLES
   ========================================================= */

.rsvp-luxury-page .form-heading h3 {
    color: var(--v4-navy);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.rsvp-luxury-page .form-heading p {
    color: #98a0ac;
}


/* =========================================================
   SUBMIT AREA
   ========================================================= */

.rsvp-luxury-page .submit-area {
    background:
        linear-gradient(180deg, #fffefc 0%, #fbf7f3 100%);
}

.rsvp-luxury-page .submit-copy strong,
.rsvp-luxury-page .submit-area strong {
    color: var(--v4-navy);
    font-size: 18px;
    font-weight: 800;
}


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

.rsvp-luxury-page .footer {
    margin-top: 70px;
    background:
        linear-gradient(180deg, #12305f 0%, #0c2347 100%);
    color: rgba(255,255,255,0.88);
    padding: 0;
}

.rsvp-luxury-page .footer-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 44px;
    padding: 52px 0 36px;
}

.rsvp-luxury-page .footer-brand-block {
    padding-right: 10px;
}

.rsvp-luxury-page .footer-brand-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.rsvp-luxury-page .footer-logo {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #fff;
    display: grid;
    place-items: center;
    padding: 6px;
    box-shadow:
        0 12px 24px rgba(0,0,0,0.12);
}

.rsvp-luxury-page .footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rsvp-luxury-page .footer-title {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.rsvp-luxury-page .footer-tagline {
    margin: 5px 0 0;
    color: rgba(255,255,255,0.62);
    font-size: 13px;
    line-height: 1.6;
}

.rsvp-luxury-page .footer-description {
    max-width: 520px;
    margin: 0;
    color: rgba(255,255,255,0.74);
    font-size: 14px;
    line-height: 1.8;
}

.rsvp-luxury-page .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.rsvp-luxury-page .footer-col {
    display: grid;
    align-content: start;
    gap: 10px;
}

.rsvp-luxury-page .footer-label {
    display: inline-block;
    margin-bottom: 4px;
    color: #f7c15c;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.rsvp-luxury-page .footer-col a {
    text-decoration: none;
    color: rgba(255,255,255,0.86);
    font-size: 14px;
    transition: color 0.2s ease;
}

.rsvp-luxury-page .footer-col a:hover {
    color: #fff0b9;
}

.rsvp-luxury-page .footer-col p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.7;
}

.rsvp-luxury-page .footer-col p strong {
    color: #fff;
}

.rsvp-luxury-page .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 26px;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.48);
    font-size: 12px;
}


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

@media (max-width: 1100px) {
    .rsvp-luxury-page .topbar-inner {
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .rsvp-luxury-page .topbar-left,
    .rsvp-luxury-page .topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .rsvp-luxury-page .footer-shell {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 860px) {
    .rsvp-luxury-page .topbar-nav {
        display: none;
    }

    .rsvp-luxury-page .topbar-meta {
        display: none;
    }

    .rsvp-luxury-page .registration-sidebar {
        position: static;
    }

    .rsvp-luxury-page .sidebar-top strong {
        font-size: 27px;
    }

    .rsvp-luxury-page .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .rsvp-luxury-page .topbar-inner {
        min-height: 76px;
        gap: 12px;
    }

    .rsvp-luxury-page .brand-copy strong {
        font-size: 15px;
    }

    .rsvp-luxury-page .brand-copy small {
        font-size: 11px;
    }

    .rsvp-luxury-page .topbar-badge {
        padding: 10px 16px;
        font-size: 13px;
    }

    .rsvp-luxury-page .registration-sidebar {
        padding: 22px;
        border-radius: 22px;
    }

    .rsvp-luxury-page .sidebar-top strong {
        font-size: 25px;
    }

    .rsvp-luxury-page .progress-step {
        grid-template-columns: 44px 1fr;
        gap: 12px;
        padding: 11px 10px;
    }

    .rsvp-luxury-page .progress-number {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 12px;
    }

    .rsvp-luxury-page .progress-copy strong {
        font-size: 14px;
    }

    .rsvp-luxury-page .progress-copy small {
        font-size: 11px;
    }

    .rsvp-luxury-page .footer {
        margin-top: 48px;
    }

    .rsvp-luxury-page .footer-shell {
        padding: 38px 0 24px;
    }

    .rsvp-luxury-page .footer-brand-head {
        align-items: flex-start;
    }

    .rsvp-luxury-page .footer-title {
        font-size: 18px;
    }

    .rsvp-luxury-page .footer-description {
        font-size: 13px;
    }

    .rsvp-luxury-page .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 0 22px;
    }
}


/* =========================================================
   HERO V5
   Cleaner / less repetitive / modern premium
   ========================================================= */


/* =========================================================
   HEADER - REMOVE DUPLICATED INFORMATION
   ========================================================= */

.rsvp-luxury-page .topbar {
    background: rgba(255, 253, 250, 0.94) !important;
    border-bottom: 1px solid rgba(18, 48, 95, 0.06) !important;
}

.rsvp-luxury-page .topbar-inner {
    min-height: 84px !important;
}

.rsvp-luxury-page .topbar-left {
    flex: 1;
}

.rsvp-luxury-page .topbar-right {
    flex: 0 0 auto;
}

/* Navigation tidak diperlukan pada halaman RSVP satu halaman */
.rsvp-luxury-page .topbar-nav {
    display: none !important;
}

/* Tanggal / waktu / venue tidak perlu diulang di header */
.rsvp-luxury-page .topbar-meta {
    display: none !important;
}

.rsvp-luxury-page .brand {
    gap: 14px !important;
}

.rsvp-luxury-page .brand-mark {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;

    padding: 5px !important;

    border-radius: 16px !important;

    box-shadow:
        0 8px 24px
        rgba(17, 29, 50, 0.055) !important;
}

.rsvp-luxury-page .brand-copy strong {
    color: #12305f !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    letter-spacing: -0.025em !important;
}

.rsvp-luxury-page .brand-copy small {
    color: #9197a2 !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}

.rsvp-luxury-page .topbar-badge {
    padding: 10px 19px !important;

    background: #fbf2f5 !important;

    border:
        1px solid
        rgba(182, 27, 88, 0.09) !important;

    box-shadow: none !important;

    color: #b61b58 !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}


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

.rsvp-luxury-page .lux-hero {
    min-height: calc(100vh - 84px) !important;

    padding:
        72px
        0
        76px !important;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(242, 161, 38, 0.13),
            transparent 26%
        ),
        radial-gradient(
            circle at 7% 90%,
            rgba(182, 27, 88, 0.055),
            transparent 27%
        ),
        linear-gradient(
            115deg,
            #fffdf9 0%,
            #fffaf6 58%,
            #fff5ec 100%
        ) !important;
}


/* Remove duplicated "Surya Inspirasi Schools" kicker */
.rsvp-luxury-page .hero-kicker {
    display: none !important;
}


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

.rsvp-luxury-page .hero-shell {
    width:
        min(
            1210px,
            calc(100% - 54px)
        ) !important;

    grid-template-columns:
        minmax(0, 1.03fr)
        minmax(390px, 0.82fr) !important;

    gap:
        clamp(
            54px,
            7vw,
            105px
        ) !important;

    align-items: center !important;
}

.rsvp-luxury-page .hero-copy {
    max-width: 700px !important;
}


/* =========================================================
   HERO TITLE - REMOVE SERIF
   ========================================================= */

.rsvp-luxury-page .hero-title {
    max-width: 700px !important;

    margin: 0 !important;

    font-family:
        "Plus Jakarta Sans",
        "Segoe UI",
        Arial,
        sans-serif !important;

    color: #12305f !important;

    font-size:
        clamp(
            66px,
            6.5vw,
            104px
        ) !important;

    font-weight: 800 !important;

    line-height: 0.90 !important;

    letter-spacing: -0.075em !important;
}

.rsvp-luxury-page
.hero-title
.hero-title-accent {
    width: fit-content !important;

    margin-top: 5px !important;

    padding: 0 !important;

    font-family:
        "Plus Jakarta Sans",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-style: normal !important;
    font-weight: 800 !important;

    color: #b61b58 !important;

    -webkit-text-fill-color: #b61b58 !important;

    background: none !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.rsvp-luxury-page .hero-description {
    max-width: 650px !important;

    margin-top: 29px !important;

    color: #637086 !important;

    font-size: 17px !important;

    line-height: 1.72 !important;

    letter-spacing: -0.015em !important;
}


/* =========================================================
   CTA
   ========================================================= */

.rsvp-luxury-page .hero-actions {
    margin-top: 31px !important;
    gap: 21px !important;
}

.rsvp-luxury-page .primary-action {
    min-height: 56px !important;

    padding:
        0
        27px !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            120deg,
            #b11752,
            #d02465
        ) !important;

    box-shadow:
        0 15px 31px
        rgba(182, 27, 88, 0.17) !important;

    font-size: 14px !important;
}

.rsvp-luxury-page .secondary-action {
    color: #12305f !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}


/* =========================================================
   EVENT INFO
   Turn 3 separate cards into 1 clean information bar
   ========================================================= */

.rsvp-luxury-page .hero-event-grid {
    display: grid !important;

    grid-template-columns:
        0.95fr
        0.8fr
        1.35fr !important;

    gap: 0 !important;

    max-width: 700px !important;

    margin-top: 36px !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(18, 48, 95, 0.075) !important;

    border-radius: 18px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    box-shadow:
        0 12px 30px
        rgba(25, 31, 48, 0.045) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.rsvp-luxury-page .hero-event-card {
    min-height: 88px !important;

    padding:
        17px
        20px !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;
}

.rsvp-luxury-page
.hero-event-card
+ .hero-event-card {
    border-left:
        1px solid
        rgba(18, 48, 95, 0.075) !important;
}

.rsvp-luxury-page
.hero-event-card:hover {
    transform: none !important;

    background:
        rgba(
            182,
            27,
            88,
            0.025
        ) !important;

    box-shadow: none !important;
}

/* Remove decorative corner */
.rsvp-luxury-page
.hero-event-card::before {
    display: none !important;
}


/* Replace 01 DATE etc with cleaner labels */

.rsvp-luxury-page
.hero-event-card
.event-card-index {
    margin-bottom: 8px !important;

    font-size: 0 !important;
}

.rsvp-luxury-page
.hero-event-card:nth-child(1)
.event-card-index::after {
    content: "DATE";
}

.rsvp-luxury-page
.hero-event-card:nth-child(2)
.event-card-index::after {
    content: "TIME";
}

.rsvp-luxury-page
.hero-event-card:nth-child(3)
.event-card-index::after {
    content: "VENUE";
}

.rsvp-luxury-page
.hero-event-card
.event-card-index::after {
    color: #b61b58;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.13em;
}

/* Remove secondary explanatory copy */
.rsvp-luxury-page
.hero-event-card
small {
    display: none !important;
}

.rsvp-luxury-page
.hero-event-card
strong {
    color: #12305f !important;

    font-size: 13px !important;
    font-weight: 750 !important;

    line-height: 1.45 !important;
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.rsvp-luxury-page .hero-visual {
    min-height: 570px !important;
}


/* Outer orbit */

.rsvp-luxury-page .visual-orbit {
    width: 470px !important;
    height: 470px !important;

    border:
        1px solid
        rgba(182, 27, 88, 0.075) !important;

    background:
        radial-gradient(
            circle at center,
            rgba(182, 27, 88, 0.07),
            transparent 64%
        ) !important;
}


/* Magenta backdrop */

.rsvp-luxury-page
.visual-orbit::before {
    width: 300px !important;
    height: 300px !important;

    top: 92px !important;
    left: 88px !important;

    opacity: 0.92;

    background:
        linear-gradient(
            145deg,
            #a91049,
            #c51d5d
        ) !important;

    box-shadow:
        0 30px 70px
        rgba(182, 27, 88, 0.14) !important;
}


/* Orbit */

.rsvp-luxury-page .visual-ring {
    width: 470px !important;
    height: 470px !important;

    opacity: 0.85;
}

.rsvp-luxury-page
.visual-ring::after {
    width: 175px !important;
    height: 175px !important;

    right: -42px !important;
    bottom: 18px !important;

    border-width: 38px !important;

    opacity: 0.90;
}


/* =========================================================
   NEW POSTER STYLE
   ========================================================= */

.rsvp-luxury-page .poster-card {
    width: 335px !important;

    min-height: 445px !important;

    padding:
        28px
        29px
        26px !important;

    overflow: hidden !important;

    border-radius: 27px !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.92) !important;

    background:
        radial-gradient(
            circle at 102% -5%,
            rgba(242, 161, 38, 0.13),
            transparent 31%
        ),
        radial-gradient(
            circle at -8% 105%,
            rgba(182, 27, 88, 0.07),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #fffefd,
            #fffaf6
        ) !important;

    box-shadow:
        0 35px 75px
        rgba(31, 26, 38, 0.15) !important;

    transform:
        rotate(-2.25deg)
        rotateX(var(--rx))
        rotateY(var(--ry)) !important;
}


/* Back sheet */
.rsvp-luxury-page
.poster-card::before {
    inset:
        -12px
        -12px
        13px
        14px !important;

    border-radius: 28px !important;

    transform:
        rotate(3deg) !important;

    background:
        rgba(
            255,
            249,
            242,
            0.75
        ) !important;
}


/* Logo */
.rsvp-luxury-page
.poster-logo {
    width: 72px !important;
    height: 72px !important;

    margin-bottom: 66px !important;

    border-radius: 19px !important;

    box-shadow:
        0 8px 22px
        rgba(20, 28, 45, 0.065) !important;
}


/* =========================================================
   REMOVE DISCOVER / LEARN / GROW CONTENT
   Use current HTML but replace visible text via CSS
   ========================================================= */

.rsvp-luxury-page
.poster-words {
    display: block !important;
}

.rsvp-luxury-page
.poster-words
span:first-child {
    display: block !important;

    font-size: 0 !important;

    line-height: 1 !important;
}

.rsvp-luxury-page
.poster-words
span:first-child::after {
    content: "DISCOVERY";

    display: block;

    color: #12305f;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 28px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;
}


/* LEARN becomes DAY */

.rsvp-luxury-page
.poster-words
strong {
    display: block !important;

    margin-top: 7px;

    font-size: 0 !important;

    line-height: 1 !important;
}

.rsvp-luxury-page
.poster-words
strong::after {
    content: "DAY";

    display: block;

    color: #b61b58;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 76px;

    font-weight: 800;

    line-height: 0.92;

    letter-spacing: -0.07em;
}


/* GROW becomes 2026 */

.rsvp-luxury-page
.poster-words
span:last-child {
    display: block !important;

    margin-top: 19px;

    font-size: 0 !important;
}

.rsvp-luxury-page
.poster-words
span:last-child::after {
    content: "2026";

    display: block;

    color: #12305f;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.32em;
}


/* Bottom poster copy */

.rsvp-luxury-page
.poster-date {
    margin-top: 54px !important;

    padding-top: 18px !important;

    font-size: 0 !important;

    border-top:
        1px solid
        rgba(18, 48, 95, 0.09) !important;
}

.rsvp-luxury-page
.poster-date::after {
    content:
        "A morning to explore, meet and experience SIS.";

    display: block;

    max-width: 230px;

    color: #8a92a0;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.55;

    letter-spacing: 0.03em;

    text-transform: none;
}


/* =========================================================
   SUBTLE ANIMATIONS
   ========================================================= */

.rsvp-luxury-page
.poster-float {
    animation:
        v5PosterFloat
        7s
        ease-in-out
        infinite !important;
}

.rsvp-luxury-page
.visual-orbit::before {
    animation:
        v5ShapeFloat
        8s
        ease-in-out
        infinite !important;
}

.rsvp-luxury-page
.visual-ring::after {
    animation:
        v5OrangeFloat
        8.5s
        ease-in-out
        infinite !important;
}

@keyframes v5PosterFloat {
    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {
        transform:
            translate3d(
                0,
                -11px,
                0
            );
    }
}

@keyframes v5ShapeFloat {
    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(
                7px,
                -12px,
                0
            )
            rotate(2deg);
    }
}

@keyframes v5OrangeFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-11px);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .rsvp-luxury-page .hero-shell {
        grid-template-columns: 1fr !important;

        max-width: 760px !important;
    }

    .rsvp-luxury-page .hero-copy {
        max-width: 680px !important;

        margin-inline: auto !important;

        text-align: center !important;
    }

    .rsvp-luxury-page .hero-title,
    .rsvp-luxury-page
    .hero-title
    .hero-title-accent {
        margin-inline: auto !important;
    }

    .rsvp-luxury-page
    .hero-description {
        margin-inline: auto !important;
    }

    .rsvp-luxury-page
    .hero-actions {
        justify-content: center !important;
    }

    .rsvp-luxury-page
    .hero-event-grid {
        margin-inline: auto !important;

        text-align: left !important;
    }

    .rsvp-luxury-page
    .hero-visual {
        min-height: 510px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .rsvp-luxury-page
    .topbar-inner {
        min-height: 70px !important;
    }

    .rsvp-luxury-page
    .brand-mark {
        width: 44px !important;
        height: 44px !important;

        flex-basis:
            44px !important;

        border-radius:
            13px !important;
    }

    .rsvp-luxury-page
    .brand-copy strong {
        font-size:
            14px !important;
    }

    .rsvp-luxury-page
    .brand-copy small {
        font-size:
            10px !important;
    }


    .rsvp-luxury-page
    .lux-hero {
        min-height: auto !important;

        padding:
            47px
            0
            58px !important;
    }

    .rsvp-luxury-page
    .hero-shell {
        width:
            min(
                100% - 28px,
                570px
            ) !important;

        gap: 35px !important;
    }

    .rsvp-luxury-page
    .hero-title {
        font-size:
            clamp(
                56px,
                17vw,
                77px
            ) !important;

        line-height:
            0.91 !important;
    }

    .rsvp-luxury-page
    .hero-description {
        margin-top:
            22px !important;

        font-size:
            15px !important;

        line-height:
            1.7 !important;
    }


    .rsvp-luxury-page
    .hero-actions {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 14px !important;

        margin-top:
            26px !important;
    }

    .rsvp-luxury-page
    .primary-action {
        width: 100% !important;

        justify-content:
            center !important;
    }


    /* Event strip -> vertical but one connected component */

    .rsvp-luxury-page
    .hero-event-grid {
        grid-template-columns:
            1fr !important;

        margin-top:
            27px !important;
    }

    .rsvp-luxury-page
    .hero-event-card {
        display: grid !important;

        grid-template-columns:
            74px
            1fr !important;

        align-items: center !important;

        min-height: 64px !important;

        padding:
            13px
            16px !important;
    }

    .rsvp-luxury-page
    .hero-event-card
    + .hero-event-card {
        border-left:
            0 !important;

        border-top:
            1px solid
            rgba(
                18,
                48,
                95,
                0.075
            ) !important;
    }

    .rsvp-luxury-page
    .event-card-index {
        margin: 0 !important;
    }


    /* Visual */

    .rsvp-luxury-page
    .hero-visual {
        min-height:
            405px !important;
    }

    .rsvp-luxury-page
    .visual-orbit,
    .rsvp-luxury-page
    .visual-ring {
        width:
            320px !important;

        height:
            320px !important;
    }

    .rsvp-luxury-page
    .visual-orbit::before {
        width:
            215px !important;

        height:
            215px !important;

        top:
            55px !important;

        left:
            56px !important;
    }

    .rsvp-luxury-page
    .visual-ring::after {
        width:
            120px !important;

        height:
            120px !important;

        right:
            -20px !important;

        bottom:
            13px !important;

        border-width:
            27px !important;
    }

    .rsvp-luxury-page
    .poster-card {
        width:
            235px !important;

        min-height:
            315px !important;

        padding:
            20px !important;

        border-radius:
            21px !important;
    }

    .rsvp-luxury-page
    .poster-logo {
        width:
            56px !important;

        height:
            56px !important;

        margin-bottom:
            39px !important;

        border-radius:
            15px !important;
    }

    .rsvp-luxury-page
    .poster-words
    span:first-child::after {
        font-size:
            19px !important;
    }

    .rsvp-luxury-page
    .poster-words
    strong::after {
        font-size:
            53px !important;
    }

    .rsvp-luxury-page
    .poster-words
    span:last-child::after {
        margin-top:
            12px;

        font-size:
            12px !important;
    }

    .rsvp-luxury-page
    .poster-date {
        margin-top:
            33px !important;
    }

    .rsvp-luxury-page
    .poster-date::after {
        font-size:
            8px !important;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .rsvp-luxury-page
    .poster-float,

    .rsvp-luxury-page
    .visual-orbit::before,

    .rsvp-luxury-page
    .visual-ring::after {
        animation:
            none !important;
    }
}


/* =========================================================
   MOBILE V11
   RSVP registration progress refinement
   ========================================================= */

@media (max-width: 640px) {

    /*
    |--------------------------------------------------------------------------
    | Registration intro
    |--------------------------------------------------------------------------
    */

    .rsvp-luxury-page .lux-registration {
        padding-top: 62px !important;
        padding-bottom: 72px !important;
    }

    .rsvp-luxury-page .registration-intro {
        width: 100%;
        max-width: 360px;

        margin:
            0
            auto
            34px !important;

        padding:
            0
            6px;
    }

    .rsvp-luxury-page .section-kicker {
        margin-bottom: 13px;

        font-size: 9px !important;

        letter-spacing: 0.16em !important;
    }

    .rsvp-luxury-page .registration-intro h2 {
        margin: 0;

        font-family:
            "Plus Jakarta Sans",
            "Segoe UI",
            sans-serif !important;

        color: #12305f;

        font-size:
            clamp(
                31px,
                9vw,
                38px
            ) !important;

        font-weight: 800 !important;

        line-height: 1.08 !important;

        letter-spacing:
            -0.045em !important;
    }

    .rsvp-luxury-page .registration-intro p {
        max-width: 340px;

        margin:
            17px
            auto
            0 !important;

        color: #737e90;

        font-size: 14px !important;

        line-height: 1.7 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Registration layout
    |--------------------------------------------------------------------------
    */

    .rsvp-luxury-page .registration-layout {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 22px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Sidebar becomes compact progress card
    |--------------------------------------------------------------------------
    */

    .rsvp-luxury-page .registration-sidebar {
        position: static !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            20px
            18px
            18px !important;

        overflow: hidden;

        border-radius:
            22px !important;

        border:
            1px solid
            rgba(18, 48, 95, 0.075) !important;

        background:
            #ffffff !important;

        box-shadow:
            0 13px 34px
            rgba(17, 31, 54, 0.07) !important;
    }

    .rsvp-luxury-page .registration-sidebar::before {
        height: 4px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Sidebar title
    |--------------------------------------------------------------------------
    */

    .rsvp-luxury-page .sidebar-top {
        margin: 0 !important;

        padding:
            0
            0
            15px !important;

        border-bottom:
            1px solid
            rgba(18, 48, 95, 0.075) !important;
    }

    .rsvp-luxury-page .sidebar-top small {
        margin-bottom:
            6px !important;

        font-size:
            8px !important;

        letter-spacing:
            0.15em !important;
    }

    .rsvp-luxury-page .sidebar-top strong {
        font-family:
            "Plus Jakarta Sans",
            "Segoe UI",
            sans-serif !important;

        color: #12305f;

        font-size:
            18px !important;

        font-weight:
            800 !important;

        line-height:
            1.3 !important;

        letter-spacing:
            -0.035em !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Five steps
    |
    | On mobile we intentionally hide the long labels.
    | Only 01–05 remain visible, eliminating text collision.
    |--------------------------------------------------------------------------
    */

    .rsvp-luxury-page .registration-progress {
        width: 100%;

        display: grid !important;

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            ) !important;

        gap: 7px !important;

        margin-top:
            15px !important;
    }

    .rsvp-luxury-page .progress-step {
        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 !important;

        padding:
            5px
            2px !important;

        border-radius:
            14px !important;

        background:
            transparent !important;

        transform:
            none !important;

        box-shadow:
            none !important;
    }

    .rsvp-luxury-page .progress-step:hover {
        transform: none !important;

        background:
            transparent !important;
    }


    /*
    | Hide text labels on phones.
    */

    .rsvp-luxury-page .progress-copy {
        display: none !important;
    }


    /*
    | Number pill
    */

    .rsvp-luxury-page .progress-number {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        display: grid !important;

        place-items: center !important;

        margin: 0 !important;

        border-radius:
            13px !important;

        background:
            #f4f1ed !important;

        color:
            #8e97a4 !important;

        font-size:
            11px !important;

        font-weight:
            800 !important;

        box-shadow:
            none !important;
    }

    .rsvp-luxury-page
    .progress-step.is-complete
    .progress-number {
        color: #ffffff !important;

        background:
            #b61b58 !important;

        opacity: 0.72;
    }

    .rsvp-luxury-page
    .progress-step.is-active
    .progress-number {
        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #b61b58,
                #d32968
            ) !important;

        opacity: 1;

        box-shadow:
            0 8px 20px
            rgba(182, 27, 88, 0.20) !important;

        transform:
            scale(1.04);
    }


    /*
    |--------------------------------------------------------------------------
    | Main form card
    |--------------------------------------------------------------------------
    */

    .rsvp-luxury-page .form-card-lux {
        width: 100%;

        border-radius:
            22px !important;

        box-shadow:
            0 13px 35px
            rgba(17,31,54,0.07) !important;
    }

    .rsvp-luxury-page .form-section {
        padding:
            27px
            20px !important;
    }

    .rsvp-luxury-page .form-heading {
        gap: 13px !important;

        margin-bottom:
            24px !important;
    }

    .rsvp-luxury-page .form-heading-index {
        width: 42px !important;
        height: 42px !important;

        flex-basis:
            42px !important;

        border-radius:
            13px !important;
    }

    .rsvp-luxury-page .form-heading h3 {
        font-size:
            19px !important;

        line-height:
            1.25 !important;
    }

    .rsvp-luxury-page .form-heading p {
        font-size:
            11px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .rsvp-luxury-page .registration-sidebar {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }

    .rsvp-luxury-page .registration-progress {
        gap: 4px !important;
    }

    .rsvp-luxury-page .progress-number {
        width: 37px !important;
        height: 37px !important;

        min-width:
            37px !important;

        border-radius:
            11px !important;

        font-size:
            10px !important;
    }

}