/* --- Bootstrap reconciliation ---------------------------------------
           This site's own reset zeroes margins with `* { margin:0; padding:0 }`,
           which loses on specificity to Bootstrap Reboot's element selectors
           (`figure { margin: 0 0 1rem }`, `ul { padding-left: 2rem }`, and so
           on). Re-assert the zeroing at element specificity, after Bootstrap, so the existing pixel-tuned layout is unchanged by loading it.
           Deliberately does NOT touch list-style: the pages already render
           with browser-default markers and zero padding. */
        :where(.rvh-root) h1, :where(.rvh-root) h2, :where(.rvh-root) h3, :where(.rvh-root) h4, :where(.rvh-root) h5, :where(.rvh-root) h6, :where(.rvh-root) p, :where(.rvh-root) figure, :where(.rvh-root) blockquote, :where(.rvh-root) dl, :where(.rvh-root) dd, :where(.rvh-root) ol, :where(.rvh-root) ul, :where(.rvh-root) fieldset, :where(.rvh-root) legend, :where(.rvh-root) pre {
            margin: 0;
            padding: 0;
        }
        :where(.rvh-root) ol, :where(.rvh-root) ul { padding-left: 0; }
        :where(.rvh-root) label { display: inline; margin-bottom: 0; }
        :where(.rvh-root) img, :where(.rvh-root) svg, :where(.rvh-root) video, :where(.rvh-root) canvas { vertical-align: baseline; }
        :where(.rvh-root) button, :where(.rvh-root) input, :where(.rvh-root) select, :where(.rvh-root) textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
        :where(.rvh-root) b, :where(.rvh-root) strong { font-weight: bolder; }
        /* Reboot paints the page background and body type; this site sets its
           own further down, but be explicit so load order can never matter. */
                /* ---- scroll behaviour -------------------------------------------------
           Bootstrap's reboot sets, globally:
               @media (prefers-reduced-motion: no-preference) {
                   :root { scroll-behavior: smooth; }
               }
           That does not just affect anchor links. It makes EVERY scroll correction
           the browser performs animate, including the scroll-anchoring adjustments
           it makes when something above the viewport changes height -- a section
           animating in, an image arriving, a font swapping. Measured here: the
           document grows from 9129px to 9143px as the moodboard section enters
           view. Instantaneous corrections are invisible; the same correction
           animated over ~700ms reads as the page scrolling on its own.
           Restoring the browser default fixes that. Nothing is lost: the few
           deliberate smooth scrolls in home.js/moodboard.js pass
           behavior:'smooth' on the call itself, which still wins.
           NOTE: :root cannot be scoped to .rvh-root, so on a page that already
           loads Bootstrap this restores the default for the whole document.
           Remove this block if smooth anchor-scrolling is wanted site-wide. */
        :root { scroll-behavior: auto; }

.rvh-root { background-color: transparent; color: inherit; font-size: inherit; line-height: inherit; }
    

        :root {
            --brand-color: #6C151C; /* Rich velvet maroon */
            --text-dark: #3b332d;
            --gold: #B5955C;
            --gold-light: #E2CDA6;
            
            /* Realistic Paper Gradient Colors */
            --paper-center: #FDFCF8;
            --paper-mid: #F5EFE3;
            --paper-edge: #EAE0CD;

            /* Section 8 membership seal — see .rvh-rc-seal-art */
            --rc-seal-src: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/seal/rivaah-seal.png");
        }

        /* Scoped with :where() rather than a plain descendant combinator:
           :where() contributes no specificity, so this stays at 0,0,0 exactly
           as the bare `*` was and keeps losing to everything, including
           Bootstrap's component classes. Written as `.rvh-root *` it would
           weigh 0,1,0 and start beating rules it used to lose to. */
        :where(.rvh-root, .rvh-root *) {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        /* ---- stacking containment -------------------------------------------
           This microsite is embedded inside the host storefront's page, whose
           fixed header sits at z-index 9. Our own sections go as high as 999,
           so without a stacking context of its own the microsite paints over
           that header -- "Explore the Traditions" landing on top of the nav.

           isolation:isolate makes .rvh-root a stacking context, so every
           z-index inside it is resolved relative to the wrapper rather than
           competing with the host page. The whole microsite then participates
           in the host's stacking at a single, low level.

           The exception is our own full-screen overlays: those have to cover
           the host chrome or they get clipped by it, so while one is open the
           wrapper lifts above everything. :has() keeps that in CSS rather than
           needing every open/close path to remember to toggle a class. ---- */
        .rvh-root {
            position: relative;
            z-index: 0;
            isolation: isolate;
        }
        /* EVERY full-screen dialog must be listed here. One that is missed does
           not fail loudly -- it simply renders underneath the host page's fixed
           header, which is how the moodboard's share modal slipped through. If a
           dialog is added, add it here too. Matching .rvh-is-open generically
           would be wrong: those classes are also used on non-dialog elements,
           and lifting the wrapper when no dialog is open would put the microsite
           over the host's chrome. */
        .rvh-root:has(.rvh-sd-share-overlay.rvh-is-open),
        .rvh-root:has(.rvh-mb-sd-share-overlay.rvh-is-open),
        .rvh-root:has(.rvh-mb-sd-share-overlay.rvh-mb-is-open),
        .rvh-root:has(.rvh-mb-mood-contact-modal.rvh-mb-is-open),
        .rvh-root:has(.rvh-mb-mood-share-modal.rvh-mb-is-open),
        .rvh-root:has(.rvh-mb-asset-modal.rvh-mb-is-open) {
            z-index: 2147483000;
        }
        .rvh-root {
            margin: 0;
            padding: 0;
            font-family: 'Playfair Display', serif;
            overflow-x: hidden;
            background-color: #f6f0e5;
            background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/paper-warm.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
        }

        /* --- UNIFIED SEAMLESS PAPER WRAPPER --- */

        /* ============================================================
           SITE HEADER — adapted from the live Tanishq site's header
           (logo, search, wishlist/account/cart, full mega-menu nav).
           Colors and logo are kept exactly as Tanishq's own (white
           chrome, #832729 maroon accents/hovers, black nav text) rather
           than reskinned into this page's paper/gold palette — only the
           layout/markup was rebuilt from scratch. Every shopping
           destination (search, mega-menu links, wishlist, account,
           cart) is a real, live tanishq.rvh-co.rvh-in URL opened in a new tab —
           this page has no product catalogue or account system of its
           own to link to internally.
           ============================================================ */
        .rvh-rv-header { position: sticky; top: 0; z-index: 60; width: 100%; background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 2px 10px -6px rgba(0,0,0,.2); }
        .rvh-rv-header-top { display: flex; align-items: center; gap: 22px; max-width: 1560px; margin: 0 auto; padding: 14px 32px; }
        .rvh-rv-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; border: none; background: transparent; cursor: pointer; padding: 0; flex: none; }
        .rvh-rv-hamburger span { display: block; width: 100%; height: 1.5px; background: #000; transition: transform .3s ease, opacity .3s ease; }
        .rvh-rv-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
        .rvh-rv-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
        .rvh-rv-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
        .rvh-rv-logo { display: flex; align-items: center; flex: none; }
        .rvh-rv-logo-mark { height: 38px; width: auto; display: block; }
        .rvh-rv-logo-word { height: 24px; width: auto; display: none; }
        .rvh-rv-search { position: relative; flex: 1 1 auto; max-width: 400px; }
        .rvh-rv-search-input { width: 100%; box-sizing: border-box; padding: 10px 42px 10px 16px; border: 1px solid #e2e1df; border-radius: 999px; background: #fff; font-family: 'Playfair Display', serif; font-size: .85rem; color: #222; outline: none; }
        .rvh-rv-search-input::placeholder { color: #beb3b8; }
        .rvh-rv-search-input:focus { border-color: #832729; }
        .rvh-rv-search-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #000; }
        .rvh-rv-search-btn svg { width: 17px; height: 17px; }
        .rvh-rv-icons { display: flex; align-items: center; gap: 18px; margin-left: auto; flex: none; }
        .rvh-rv-icon { position: relative; color: #000; display: flex; text-decoration: none; }
        .rvh-rv-icon svg { width: 21px; height: 21px; }
        .rvh-rv-icon:hover { color: #832729; }
        .rvh-rv-cart-count { position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #832729; color: #fff; font-family: 'Cinzel', serif; font-size: .55rem; line-height: 15px; text-align: center; }

        /* ---- desktop mega-menu nav ---- */
        .rvh-rv-nav { border-top: 1px solid #eee; }
        .rvh-rv-nav-list { list-style: none; display: flex; justify-content: center; gap: 2px; max-width: 1560px; margin: 0 auto; padding: 0 32px; }
        .rvh-rv-nav-item { position: relative; }
        .rvh-rv-nav-link { display: block; padding: 12px 15px; border: none; background: transparent; cursor: pointer; font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: #000; white-space: nowrap; }
        .rvh-rv-nav-item:hover .rvh-rv-nav-link, .rvh-rv-nav-link[aria-expanded="true"] { color: #832729; }
        .rvh-rv-nav-item::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px; background: #832729; transform: scaleX(0); transition: transform .25s ease; }
        .rvh-rv-nav-item:hover::after, .rvh-rv-nav-item:focus-within::after { transform: scaleX(1); }
        .rvh-rv-mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); display: flex; gap: 38px; background: #fff; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 20px 44px -18px rgba(0,0,0,.3); padding: 26px 32px; min-width: 300px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 5; }
        .rvh-rv-nav-item:hover .rvh-rv-mega, .rvh-rv-nav-item:focus-within .rvh-rv-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        .rvh-rv-nav-item:nth-child(1) .rvh-rv-mega, .rvh-rv-nav-item:nth-child(2) .rvh-rv-mega, .rvh-rv-nav-item:nth-child(3) .rvh-rv-mega { left: 0; transform: translateY(6px); }
        .rvh-rv-nav-item:nth-child(1):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-child(1):focus-within .rvh-rv-mega,
        .rvh-rv-nav-item:nth-child(2):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-child(2):focus-within .rvh-rv-mega,
        .rvh-rv-nav-item:nth-child(3):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-child(3):focus-within .rvh-rv-mega { transform: translateY(0); }
        .rvh-rv-nav-item:nth-last-child(1) .rvh-rv-mega, .rvh-rv-nav-item:nth-last-child(2) .rvh-rv-mega { left: auto; right: 0; transform: translateY(6px); }
        .rvh-rv-nav-item:nth-last-child(1):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-last-child(1):focus-within .rvh-rv-mega,
        .rvh-rv-nav-item:nth-last-child(2):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-last-child(2):focus-within .rvh-rv-mega { transform: translateY(0); }
        .rvh-rv-mega-col { display: flex; flex-direction: column; gap: 9px; min-width: 148px; }
        .rvh-rv-mega-head { font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: #832729; margin-bottom: 3px; text-decoration: none; }
        .rvh-root a.rvh-rv-mega-head:hover { color: #5e1c1d; }
        .rvh-rv-mega-col a:not(.rvh-rv-mega-head) { font-family: 'Playfair Display', serif; font-size: .85rem; color: #000; text-decoration: none; opacity: .82; }
        .rvh-rv-mega-col a:not(.rvh-rv-mega-head):hover { opacity: 1; color: #832729; }
        .rvh-rv-mega-blurb { font-family: 'Playfair Display', serif; font-size: .84rem; color: #444; opacity: .9; max-width: 220px; line-height: 1.5; margin-bottom: 10px; }
        .rvh-rv-mega-view-all { display: inline-block; margin-top: 4px; font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #832729; text-decoration: none; border-bottom: 1px solid #832729; padding-bottom: 2px; }
        .rvh-rv-mega-view-all:hover { color: #5e1c1d; border-color: #5e1c1d; }

        /* ---- mobile: hamburger + slide-in accordion panel ---- */
        .rvh-rv-mobile-panel { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.42); opacity: 0; visibility: hidden; transition: opacity .3s ease; }
        .rvh-rv-mobile-panel.rvh-is-open { opacity: 1; visibility: visible; }
        .rvh-rv-mobile-sheet { position: absolute; top: 0; left: 0; bottom: 0; width: min(86%, 360px); background: #fff; box-shadow: 14px 0 40px -20px rgba(0,0,0,.4); transform: translateX(-100%); transition: transform .35s cubic-bezier(.22,1,.36,1); overflow-y: auto; padding: 18px 0 40px; }
        .rvh-rv-mobile-panel.rvh-is-open .rvh-rv-mobile-sheet { transform: translateX(0); }
        .rvh-rv-mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 16px; border-bottom: 1px solid #eee; margin-bottom: 6px; }
        .rvh-rv-mobile-close { border: none; background: transparent; color: #000; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 6px; }
        .rvh-rv-accordion-item { border-bottom: 1px solid #eee; }
        .rvh-rv-accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: none; border: none; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #000; cursor: pointer; }
        .rvh-rv-accordion-trigger[aria-expanded="true"] { color: #832729; }
        .rvh-rv-accordion-trigger .rvh-rv-accordion-arrow { transition: transform .25s ease; color: #832729; }
        .rvh-rv-accordion-trigger[aria-expanded="true"] .rvh-rv-accordion-arrow { transform: rotate(180deg); }
        .rvh-rv-accordion-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 20px; }
        .rvh-rv-accordion-panel.rvh-is-open { max-height: 620px; padding-bottom: 14px; }
        .rvh-rv-accordion-panel a { display: block; padding: 6px 0; font-family: 'Playfair Display', serif; font-size: .85rem; color: #000; text-decoration: none; opacity: .85; }
        .rvh-rv-accordion-panel a:hover { opacity: 1; color: #832729; }
        .rvh-rv-accordion-panel .rvh-rv-mega-blurb { max-width: none; margin: 6px 0 8px; }

        @media (max-width: 1024px) {
            .rvh-rv-search { display: none; }
            .rvh-rv-hamburger { display: flex; }
            .rvh-rv-logo-mark { display: none; }
            .rvh-rv-logo-word { display: block; }
            .rvh-rv-nav { display: none; }
            .rvh-rv-header-top { padding: 12px 16px; gap: 12px; }
            .rvh-rv-icons { gap: 14px; }
        }
        .rvh-main-wrapper {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: transparent;
            overflow: hidden;
        }

        /* Removed the global grain/film overlay so the paper texture shows cleanly */
        .rvh-main-wrapper::before {
            content: none;
            display: none;
        }

        /* --- HERO SECTION --- */
        .rvh-hero-section {
            display: flex;
            width: 100%;
            max-width: 1400px;
            height: 90vh;
            min-height: 750px;
            position: relative;
            z-index: 2;
        }

        /* Elegant Golden Border Box */
        .rvh-border-frame {
            position: absolute;
            top: 25px; left: 25px; right: 25px; bottom: 25px;
            border: 1px solid rgba(181, 149, 92, 0.4);
            pointer-events: none;
            z-index: 2;
        }
        
        .rvh-border-frame::before, .rvh-border-frame::after {
            content: '✿';
            position: absolute;
            color: rgba(181, 149, 92, 0.7);
            font-size: 14px;
            background: transparent;
            border-radius: 50%;
        }
        .rvh-border-frame::before { top: -9px; left: -9px; }
        .rvh-border-frame::after { bottom: -9px; right: -9px; }

        /* --- LEFT CONTENT: BRANDING --- */
        .rvh-left-content {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 50;
        }

        .rvh-top-note {
            position: absolute;
            top: 8%;
            left: 8%;
            font-family: 'Caveat', cursive;
            font-size: 1.6rem;
            color: var(--text-dark);
            transform: rotate(-4deg);
            line-height: 1.2;
            opacity: 0.8;
        }

        .rvh-branding {
            text-align: center;
            color: var(--brand-color);
            margin-top: -40px;
        }

        .rvh-divider {
            width: 80px;
            height: 1px;
            background-color: var(--gold-light);
            margin: 30px auto;
            position: relative;
        }
        .rvh-divider::after {
            content: '✧';
            position: absolute;
            top: -11px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--gold);
            background: transparent;
            font-size: 16px;
        }

        /* --- RIGHT CONTENT: POLAROIDS & MEMO --- */
        .rvh-right-content {
            flex: 1.2;
            position: relative;
            z-index: 5;
        }

        .rvh-polaroid {
            background: #fff;
            padding: 12px 12px 16px 12px;
            box-shadow: 4px 10px 30px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.05);
            position: absolute;
            transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .rvh-polaroid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .rvh-tape {
            position: absolute;
            width: 80px;
            height: 25px;
            background: rgba(240, 235, 220, 0.85);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 0 4px rgba(0,0,0,0.02);
            backdrop-filter: blur(2px);
            z-index: 20;
            border-left: 2px dotted rgba(0,0,0,0.1);
            border-right: 2px dotted rgba(0,0,0,0.1);
        }

        .rvh-img-main { width: 340px; height: 500px; left: 8%; top: 8%; z-index: 6; transform: rotate(-2deg); }
        .rvh-img-main:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); box-shadow: 6px 15px 40px rgba(0,0,0,0.12); }
        .rvh-tape-main { top: -12px; left: 50%; transform: translateX(-50%) rotate(-1deg); }

        .rvh-img-tr { width: 270px; height: 260px; right: 8%; top: 4%; z-index: 5; transform: rotate(4deg); }
        .rvh-img-tr:hover { transform: rotate(2deg) translateY(-8px) scale(1.02); }
        .rvh-tape-tr { top: -10px; left: 15%; transform: rotate(3deg); }

        .rvh-img-br { width: 260px; height: 280px; right: 12%; bottom: 10%; z-index: 4; transform: rotate(-3deg); }
        .rvh-img-br:hover { transform: rotate(-1deg) translateY(-8px) scale(1.02); }

        .rvh-memo-card {
            position: absolute;
            bottom: 8%;
            left: 15%;
            background: #FDFBF7;
            padding: 30px 20px;
            width: 200px;
            box-shadow: 3px 8px 20px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(181, 149, 92, 0.2);
            z-index: 30; 
            transform: rotate(-3deg);
            font-family: 'Caveat', cursive;
            font-size: 1.5rem;
            color: var(--text-dark);
            text-align: center;
            line-height: 1.4;
            pointer-events: none;
        }

        /* --- BRIDES BOOK SECTION (FULL-VIEWPORT BOOK) --- */
        .rvh-brides-book-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 100vh;
            padding: 40px 24px 60px;
            position: relative;
            z-index: 10;
        }

        .rvh-section-tagline {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.6rem, 3vw, 2.6rem);
            font-weight: 500;
            color: var(--brand-color);
            letter-spacing: 3px;
            text-transform: uppercase;
            line-height: 1.2;
            margin-bottom: 5px;
            z-index: 5;
            text-align: center;
        }

        /* Stage that holds the open book + the closed books beside it */
        .rvh-book-stage {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            width: 100%;
            max-width: 1560px;
            height: 70vh;
            min-height: 520px;
            margin-top: 26px;
            perspective: 2600px;
            perspective-origin: 30% 50%;
        }

        /* ---------- THE OPEN BOOK ---------- */
        .rvh-book-open {
            position: relative;
            flex: 0 0 auto;
            width: min(70%, 1080px);
            height: 100%;
            transform-style: preserve-3d;
            transform-origin: left center;
            border-radius: 3px 8px 8px 3px;
            background:
                radial-gradient(ellipse at 60% 35%, var(--paper-center) 0%, var(--paper-mid) 62%, var(--paper-edge) 100%);
            box-shadow:
                -6px 0 0 0 rgba(120, 96, 52, 0.10),
                -14px 0 26px -10px rgba(0,0,0,0.18),
                34px 40px 70px -20px rgba(0,0,0,0.28),
                inset 0 0 90px rgba(150, 120, 70, 0.10);
            transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.2, 1), opacity 0.5s ease;
            overflow: hidden;
            z-index: 20;
        }

        /* thick page block on the right edge (real book depth) */
        .rvh-book-open::after {
            content: '';
            position: absolute;
            top: 6px; bottom: 6px; right: -14px;
            width: 16px;
            border-radius: 0 4px 4px 0;
            background: repeating-linear-gradient(to right,
                #fdfbf5 0px, #fdfbf5 1px,
                #e6dcc6 1px, #e6dcc6 2px,
                #f7f2e6 2px, #f7f2e6 3px);
            box-shadow: 6px 8px 18px rgba(0,0,0,0.18);
            z-index: 1;
        }

        /* soft inner spine gradient on the left */
        .rvh-book-spine-shadow {
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 70px;
            background: linear-gradient(to right,
                rgba(90, 70, 37, 0.30) 0%,
                rgba(90, 70, 37, 0.12) 35%,
                rgba(90, 70, 37, 0.02) 75%,
                transparent 100%);
            pointer-events: none;
            z-index: 6;
        }

        /* engraved gold frame */
        .rvh-book-frame {
            position: absolute;
            top: 22px; left: 30px; right: 26px; bottom: 22px;
            border: 1px solid rgba(181, 149, 92, 0.55);
            pointer-events: none;
            z-index: 7;
        }
        .rvh-book-frame::before {
            content: '';
            position: absolute;
            top: 7px; left: 7px; right: 7px; bottom: 7px;
            border: 1px solid rgba(181, 149, 92, 0.22);
        }
        .rvh-book-corner {
            position: absolute;
            width: 74px; height: 74px;
            border: 0 solid rgba(181, 149, 92, 0.85);
            pointer-events: none;
            z-index: 8;
        }
        .rvh-book-corner::after {
            content: '❈';
            position: absolute;
            color: rgba(181, 149, 92, 0.9);
            font-size: 15px;
            line-height: 1;
        }
        .rvh-bc-tl { top: 22px; left: 30px; border-top-width: 2px; border-left-width: 2px; }
        .rvh-bc-tl::after { top: 6px; left: 8px; }
        .rvh-bc-tr { top: 22px; right: 26px; border-top-width: 2px; border-right-width: 2px; }
        .rvh-bc-tr::after { top: 6px; right: 8px; }
        .rvh-bc-bl { bottom: 22px; left: 30px; border-bottom-width: 2px; border-left-width: 2px; }
        .rvh-bc-bl::after { bottom: 6px; left: 8px; }
        .rvh-bc-br { bottom: 22px; right: 26px; border-bottom-width: 2px; border-right-width: 2px; }
        .rvh-bc-br::after { bottom: 6px; right: 8px; }

        /* faint damask motif behind everything */
        .rvh-book-motif {
            position: absolute;
            inset: 0;
            opacity: 0.16;
            z-index: 1;
            pointer-events: none;
            background-image:
                radial-gradient(circle at 12% 22%, rgba(181,149,92,0.35) 0 2px, transparent 3px),
                radial-gradient(circle at 26% 68%, rgba(181,149,92,0.3) 0 2px, transparent 3px),
                radial-gradient(circle at 8% 82%, rgba(181,149,92,0.25) 0 2px, transparent 3px);
            background-size: 260px 260px;
        }

        /* left page: the storytelling side */
        .rvh-page-left {
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 52%;
            /* percentages here resolve against the book's WIDTH, so on a wide
               screen the top padding alone pushes the CTA down ~30px further
               while the book itself is no taller -- cap it on height too. */
            padding: min(9%, 12vh) 5% min(8%, 10vh) 8%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            z-index: 10;
        }

        .rvh-book-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(2.4rem, 4.2vw, 4.2rem);
            font-weight: 500;
            line-height: 1.05;
            letter-spacing: 6px;
            color: var(--brand-color);
        }
        .rvh-book-divider {
            width: 190px;
            max-width: 70%;
            height: 1px;
            background: linear-gradient(to right, transparent, var(--gold), transparent);
            position: relative;
            margin: 22px 0 18px;
        }
        .rvh-book-divider::after {
            content: '❖';
            position: absolute;
            top: -10px; left: 50%;
            transform: translateX(-50%);
            color: var(--gold);
            font-size: 13px;
            background: transparent;
        }
        .rvh-book-subtitle {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1rem, 1.25vw, 1.35rem);
            letter-spacing: 1.5px;
            color: var(--text-dark);
            opacity: 0.85;
        }

        /* right page: the bride photograph, bleeding into the paper */
        .rvh-page-right {
            position: absolute;
            top: 0; right: 0; bottom: 0;
            width: 62%;
            z-index: 3;
            overflow: hidden;
        }
        .rvh-page-right img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 22%;
            mask-image: linear-gradient(to left, rgba(0,0,0,1) 52%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 100%);
            -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 52%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 100%);
        }
        /* The cover is masked so its left edge fades into the page -- opaque from
           the right to 52%, fully transparent by 100%. Anything sitting in that
           left band reads as washed out, which is what was reported as the
           Rajasthani bride's face being "in the blurry section".

           rivaah-rajasthan.jpg is now the deck's Rajasthan (1).jpg, 1440x720 like
           the Metro and Marathi covers, and her face moved: it sits at source
           x 555 (39%), not 44% of the old 1600x822 frame. At the default 50%
           object-position the visible window is 548-892, putting her ahead of the
           left edge but still inside the fade; 29% moves the window to 321-664 and
           puts her ~68% across, past the mask's opaque threshold. Only ~24% of the
           image's width is ever visible in the portrait cover, so this only
           changes which slice that is. */
        .rvh-page-right img[src*="rivaah-rajasthan"] { object-position: 29% 22%; }

        /* Same fade, same problem, for the two covers added from the deck. The
           visible window is only ~24% of each source's width (both are 1440x720
           landscape in a portrait cover), so object-position picks which slice
           shows. Metro's bride sits at source x 553 (38%) and Marathi's at x 666
           (46%); at the default 50% both land inside the left 48% of the box that
           the mask fades out. 29% and 39% move each face to ~68% across the
           window -- the same place the Rajasthani fix puts hers. */
        .rvh-page-right img[src*="rivaah-metro"] { object-position: 29% 22%; }
        .rvh-page-right img[src*="rivaah-marathi"] { object-position: 39% 22%; }


        /* pinned polaroids along the bottom of the left page */
        .rvh-book-polaroids {
            position: absolute;
            bottom: 7%;
            left: 7%;
            right: 8%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 28px 36px;
            z-index: 12;
        }
        .rvh-book-cta {
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            position: relative;
            margin-top: 16px;
            padding: 13px 30px;
            border: 0;
            border-radius: 999px;
            cursor: pointer;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            color: #fffaf0;
            font-family: 'Cinzel', serif;
            font-size: .72rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            text-decoration: none;
            white-space: nowrap;
            box-shadow: 0 12px 22px rgba(108,21,28,.3), inset 0 1px 0 rgba(255,255,255,.2);
            transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
        }
        .rvh-book-cta::before {
            content: "";
            position: absolute;
            inset: 3px;
            border: 1px solid rgba(226,205,166,.5);
            border-radius: 999px;
            pointer-events: none;
        }
        .rvh-book-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(108,21,28,.36), inset 0 1px 0 rgba(255,255,255,.24); }
        .rvh-pinned-photo {
            position: relative;
            background: #fff;
            padding: 8px 8px 10px 8px;
            box-shadow: 3px 9px 22px rgba(0,0,0,0.18);
            border: 1px solid rgba(0,0,0,0.05);
            cursor: pointer;
            outline-offset: 6px;
        }
        .rvh-pinned-photo:focus-visible {
            outline: 2px solid rgba(181,149,92,.7);
        }
        .rvh-pinned-photo:hover,
        .rvh-pinned-photo:focus {
            animation: pinnedShake .5s ease;
        }
        @keyframes pinnedShake {
            0%, 100% { transform: rotate(-7deg); }
            15% { transform: rotate(-12deg) translateX(-2px); }
            30% { transform: rotate(-2deg) translateX(2px); }
            45% { transform: rotate(-11deg) translateX(-2px); }
            60% { transform: rotate(-3deg) translateX(1px); }
            75% { transform: rotate(-9deg); }
        }
        .rvh-pinned-photo img {
            /* capped on height as well: uncapped these ran 237px tall on a
               1920-wide screen and collided with the CTA on short viewports */
            width: clamp(110px, min(12vw, 19.5vh), 190px);
            height: clamp(126px, min(13.5vw, 22vh), 215px);
            object-fit: cover;
            display: block;
        }

        /* Short viewports (16:9 laptops, and any window with a lot of browser
           chrome) are where the CTA and the pinned photos collide: the CTA is
           pushed down by width-driven type and width-percentage padding, while
           the book itself gets no taller. These photos are much larger than the
           homepage's, so they compress harder. */
        @media (max-height: 820px) {
            .rvh-page-left { padding-top: min(9%, 9vh); padding-bottom: min(8%, 7vh); }
            .rvh-pinned-photo img {
                width: clamp(96px, min(12vw, 13.5vh), 190px);
                height: clamp(110px, min(13.5vw, 15vh), 215px);
            }
        }
        .rvh-pinned-text {
            position: absolute;
            left: 50%;
            bottom: -26px;
            transform: translateX(-50%) rotate(-2deg);
            padding: 5px 14px;
            background: linear-gradient(to bottom, #f6efdf, #eadfc4);
            box-shadow: 1px 3px 8px rgba(0,0,0,0.12);
            font-family: 'Great Vibes', cursive;
            font-size: clamp(1rem, 1.4vw, 1.5rem);
            color: var(--brand-color);
            white-space: nowrap;
        }
        .rvh-gold-pin {
            position: absolute;
            top: -7px; left: 50%;
            transform: translateX(-50%);
            width: 15px; height: 15px;
            background: radial-gradient(circle at 32% 28%, #f4e3bf, #c9a765 55%, #6d5527);
            border-radius: 50%;
            box-shadow: 1px 3px 6px rgba(0,0,0,0.35);
            z-index: 4;
        }
        .rvh-pp-1 { transform: rotate(-7deg); z-index: 1; margin-bottom: 6px; }
        .rvh-pp-2 { transform: rotate(3deg); z-index: 3; margin-left: -22px; margin-bottom: 26px; }
        .rvh-pp-3 { transform: rotate(-3deg); z-index: 2; margin-left: -18px; }

        /* page-turn animation on switch */
        .rvh-book-open.rvh-turning { transform: rotateY(-16deg) translateX(-1%) scale(0.985); }
        .rvh-book-open.rvh-turning .rvh-page-left,
        .rvh-book-open.rvh-turning .rvh-page-right { opacity: 0; transition: opacity 0.25s ease; }
        .rvh-page-left, .rvh-page-right, .rvh-book-polaroids { transition: opacity 0.45s ease 0.12s; }
        .rvh-book-open.rvh-turning .rvh-book-polaroids { opacity: 0; transition: opacity 0.2s ease; }

        /* turning sheet that sweeps across like a real page */
        .rvh-turn-sheet {
            position: absolute;
            inset: 0;
            transform-origin: left center;
            transform: rotateY(0deg);
            background: linear-gradient(to right, #fdfbf5, #f1e9d7 70%, #e3d8bd);
            box-shadow: 18px 0 40px rgba(0,0,0,0.22);
            opacity: 0;
            pointer-events: none;
            z-index: 30;
        }
        .rvh-book-open.rvh-turning .rvh-turn-sheet {
            animation: sweepPage 0.85s cubic-bezier(0.5, 0, 0.4, 1);
        }
        @keyframes sweepPage {
            0%   { opacity: 1; transform: rotateY(0deg); }
            99%  { opacity: 1; transform: rotateY(-172deg); }
            100% { opacity: 0; transform: rotateY(-172deg); }
        }

        /* ---------- THE CLOSED BOOKS BESIDE IT ---------- */
        .rvh-book-shelf {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
            z-index: 15;
            margin-left: 22px;
        }
        .rvh-book-closed {
            position: relative;
            width: clamp(96px, 9vw, 150px);
            height: 84%;
            margin-left: -14px;
            border-radius: 3px 5px 5px 3px;
            background:
                radial-gradient(ellipse at 50% 25%, var(--paper-center) 0%, var(--paper-mid) 58%, var(--paper-edge) 100%);
            box-shadow:
                -8px 0 18px -6px rgba(0,0,0,0.20),
                14px 26px 40px -18px rgba(0,0,0,0.22),
                inset 0 0 40px rgba(150,120,70,0.10);
            cursor: pointer;
            overflow: hidden;
            transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.2, 1), box-shadow 0.5s ease, filter 0.5s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12% 8px 0;
            text-align: center;
        }
        .rvh-book-closed:nth-child(1) { height: 92%; }
        .rvh-book-closed:nth-child(2) { height: 86%; }
        .rvh-book-closed:nth-child(3) { height: 80%; }
        .rvh-book-closed::before {
            content: '';
            position: absolute;
            top: 10px; left: 8px; right: 8px; bottom: 10px;
            border: 1px solid rgba(181, 149, 92, 0.45);
            z-index: 3;
            pointer-events: none;
        }
        /* spine highlight */
        .rvh-book-closed::after {
            content: '';
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 16px;
            background: linear-gradient(to right, rgba(90,70,37,0.28), transparent);
            z-index: 4;
            pointer-events: none;
        }
        .rvh-book-closed:hover {
            transform: translateY(-14px) translateX(6px);
            box-shadow: -10px 0 22px -6px rgba(0,0,0,0.24), 18px 32px 48px -18px rgba(0,0,0,0.28);
            filter: brightness(1.03);
        }
        .rvh-closed-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(0.75rem, 0.95vw, 1.05rem);
            letter-spacing: 1.6px;
            padding: 0 4px;
            color: var(--brand-color);
            line-height: 1.25;
            z-index: 5;
            margin-top: 8px;
        }
        .rvh-closed-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: clamp(0.6rem, 0.72vw, 0.82rem);
            color: var(--text-dark);
            opacity: 0.75;
            margin-top: 10px;
            z-index: 5;
            line-height: 1.35;
        }
        .rvh-closed-img {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 62%;
            z-index: 2;
        }
        .rvh-closed-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: 50% 20%;
            opacity: 0.9;
            mask-image: linear-gradient(to top, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
            -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
        }

        /* ---------- CONTROLS ---------- */
        .rvh-book-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 22px;
            margin-top: 30px;
            z-index: 40;
        }
        .rvh-slider-arrow {
            background: rgba(253, 252, 248, 0.85);
            border: 1px solid var(--gold);
            color: var(--gold);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        }
        .rvh-slider-arrow:hover { background: var(--gold); color: #fff; box-shadow: 0 6px 16px rgba(181,149,92,0.4); }
        .rvh-book-dots { display: flex; gap: 12px; align-items: center; }
        .rvh-book-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(181,149,92,0.35);
            cursor: pointer;
            transition: all 0.35s ease;
        }
        .rvh-book-dot.rvh-active { background: var(--brand-color); transform: scale(1.5); }
        .rvh-book-hint {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 0.92rem;
            line-height: 1.55;
            color: var(--text-dark);
            opacity: 0.6;
            margin-top: 12px;
            text-align: center;
        }

        @media (max-width: 1024px) {
            .rvh-brides-book-section { min-height: auto; padding: 60px 16px; }
            .rvh-book-stage { height: auto; min-height: 0; flex-direction: column; }
            .rvh-book-open { width: 100%; max-width: 640px; height: 62vh; min-height: 420px; }
            .rvh-book-open::after { display: none; }
            .rvh-page-left { width: 62%; padding: 8% 5%; }
            .rvh-page-right { width: 70%; }
            /* Every card here has exactly one pinned ritual photo (see the
               traditions data below), never several - so instead of the
               desktop's wide left-to-right scatter zone, anchor it as a
               single shrink-wrapped block against the photo page's corner.
               Fixed px insets (not %) so it reliably clears .rvh-book-frame's
               own fixed 22/30/26px insets at every width in this
               breakpoint, and the extra bottom clearance accounts for
               .rvh-pinned-text hanging 22px below the photo itself. */
            .rvh-book-polaroids { left: 56px; right: auto; bottom: 54px; gap: 18px 22px; }
            .rvh-book-cta { padding: 11px 24px; font-size: .64rem; letter-spacing: .14em; }
            .rvh-pinned-photo img { width: 128px; height: 148px; }
            .rvh-pinned-text { font-size: 0.9rem; bottom: -22px; }
            .rvh-book-shelf { margin: 26px 0 0; height: 190px; }
            .rvh-book-closed { width: 100px; margin-left: -10px; }
        }
        @media (max-width: 680px) {
            /* The visible gold frame around the card isn't .rvh-page-left's own edge -
               it's a separate absolutely-positioned .rvh-book-frame/.rvh-book-corner set
               with FIXED pixel insets (22px top/bottom, 30px left, 26px right)
               relative to .rvh-book-open. .rvh-page-left starts at .rvh-book-open's raw (0,0)
               corner, so a percentage padding here is computed against
               .rvh-page-left's own (narrower) width - at this breakpoint that came out
               to less than the frame's 30px inset, which is why text was still
               reading as flush against/crossing the border after the first pass.
               Matching fixed-px padding (safely exceeding every side's inset by
               10-14px) is what actually guarantees clearance regardless of the
               exact rendered width. */
            .rvh-page-left { padding: 72px 34px 34px 44px; }
            .rvh-book-title {
                font-size: clamp(1.125rem, 4.6vw, 1.25rem);
                letter-spacing: .3px;
                max-width: 100%;
                overflow-wrap: break-word;
            }
            .rvh-book-divider { margin: 18px 0 14px; }
            .rvh-book-subtitle { font-size: .8rem; letter-spacing: .5px; max-width: 100%; }
        }
        /* --- DAINTY, DRIFTING ROSE PETALS --- */
        .rvh-petal { position: absolute; background-repeat: no-repeat; background-size: contain; background-position: center; filter: drop-shadow(1px 4px 6px rgba(90,60,55,.22)); z-index: 25; opacity: 0.85; pointer-events: none; will-change: transform; }

        /* Hero Petals */
        .rvh-p1 { width: 26px; height: 26px; top: 12%; right: 42%; --base-transform: rotate(65deg) skew(10deg); transform: var(--base-transform); animation: driftA 9s ease-in-out infinite; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png'); }
        .rvh-p2 { width: 20px; height: 20px; bottom: 20%; left: 35%; --base-transform: rotate(140deg) skew(15deg); transform: var(--base-transform); animation: driftB 11s ease-in-out infinite; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png'); }
        .rvh-p3 { width: 30px; height: 30px; top: 5%; right: 15%; --base-transform: rotate(-20deg); transform: var(--base-transform); opacity: 0.65; animation: driftC 10s ease-in-out infinite; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-c.png'); }

        /* Second section (Book of Traditions) - a soft, constant petal shower */
        .rvh-p7  { width: 30px; height: 30px; top: 10%;  left: 9%;   --base-transform: rotate(85deg) skew(12deg);  transform: var(--base-transform); animation: driftA 7s   ease-in-out infinite; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-c.png'); }
        .rvh-p8  { width: 22px; height: 22px; bottom: 12%; right: 16%; --base-transform: rotate(-35deg) skew(8deg);  transform: var(--base-transform); animation: driftB 8.5s ease-in-out infinite; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-d.png'); }
        .rvh-p9  { width: 17px; height: 17px; top: 38%;  right: 5%;   opacity: 0.55; --base-transform: rotate(120deg) skew(15deg); transform: var(--base-transform); animation: driftC 6.5s ease-in-out infinite; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png'); }
        .rvh-p10 { width: 25px; height: 25px; top: 4%;   right: 32%;  opacity: 0.7;  --base-transform: rotate(30deg) skew(10deg);  transform: var(--base-transform); animation: driftD 9s   ease-in-out infinite; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png'); }
        .rvh-p11 { width: 15px; height: 15px; top: 62%;  left: 5%;    opacity: 0.6;  --base-transform: rotate(-70deg) skew(12deg); transform: var(--base-transform); animation: driftB 7.5s ease-in-out infinite 1.2s; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-c.png'); }
        .rvh-p12 { width: 19px; height: 19px; bottom: 26%; left: 46%; opacity: 0.5;  --base-transform: rotate(155deg) skew(8deg);  transform: var(--base-transform); animation: driftE 8s   ease-in-out infinite 0.6s; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-d.png'); }
        .rvh-p13 { width: 13px; height: 13px; top: 22%;  left: 30%;   opacity: 0.5;  --base-transform: rotate(10deg) skew(14deg);  transform: var(--base-transform); animation: driftC 6s   ease-in-out infinite 2s; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png'); }
        .rvh-p14 { width: 27px; height: 27px; bottom: 4%; left: 24%;  opacity: 0.6;  --base-transform: rotate(-15deg) skew(10deg); transform: var(--base-transform); animation: driftD 10s  ease-in-out infinite 1.6s; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png'); }

        /* Third section petals */
        .rvh-p4 { width: 32px; height: 32px; top: -4%; right: 12%; --base-transform: rotate(45deg) skew(5deg); transform: var(--base-transform); animation: driftD 10s ease-in-out infinite; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-d.png'); }
        .rvh-p5 { width: 24px; height: 24px; bottom: 6%; left: 8%; --base-transform: rotate(-60deg) skew(15deg); transform: var(--base-transform); animation: driftE 11s ease-in-out infinite; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png'); }
        .rvh-p6 { width: 18px; height: 18px; top: 30%; left: 20%; opacity: 0.55; --base-transform: rotate(15deg) skew(10deg); transform: var(--base-transform); animation: driftC 9s ease-in-out infinite 1s; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png'); }

        /* fuller, faster, but still feather-light drifting */
        @keyframes driftA {
            0%   { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
            25%  { transform: var(--base-transform) translate(-34px, 46px) rotate(-70deg); }
            50%  { transform: var(--base-transform) translate(-70px, 96px) rotate(-150deg) scale(1.08); }
            75%  { transform: var(--base-transform) translate(-26px, 52px) rotate(-232deg); }
            100% { transform: var(--base-transform) translate(0, 0) rotate(-360deg); }
        }
        @keyframes driftB {
            0%   { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
            30%  { transform: var(--base-transform) translate(48px, -40px) rotate(90deg); }
            60%  { transform: var(--base-transform) translate(96px, 28px) rotate(200deg) scale(1.12); }
            100% { transform: var(--base-transform) translate(0, 0) rotate(360deg); }
        }
        @keyframes driftC {
            0%   { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
            50%  { transform: var(--base-transform) translate(44px, 82px) rotate(180deg) scale(0.92); }
            100% { transform: var(--base-transform) translate(0, 0) rotate(360deg); }
        }
        @keyframes driftD {
            0%   { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
            35%  { transform: var(--base-transform) translate(-56px, 60px) rotate(-110deg) scale(1.06); }
            70%  { transform: var(--base-transform) translate(30px, 110px) rotate(-220deg) scale(0.95); }
            100% { transform: var(--base-transform) translate(0, 0) rotate(-360deg); }
        }
        @keyframes driftE {
            0%   { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
            40%  { transform: var(--base-transform) translate(70px, 54px) rotate(130deg); }
            80%  { transform: var(--base-transform) translate(18px, 108px) rotate(280deg) scale(1.1); }
            100% { transform: var(--base-transform) translate(0, 0) rotate(360deg); }
        }

        /* Responsive Fixes */
        @media (max-width: 1024px) {
            .rvh-hero-section { flex-direction: column; height: auto; padding-bottom: 2rem; }
            .rvh-left-content { padding: 4rem 0 2rem 0; }
            .rvh-right-content { height: 700px; margin-top: 2rem; }
            .rvh-img-main { left: 0; width: 300px; height: 420px; }
            .rvh-img-tr { width: 220px; height: 220px; right: 0; }
            .rvh-img-br { width: 220px; height: 240px; right: 0; bottom: 25%; }
            .rvh-memo-card { left: 15%; bottom: 5%; }

        }
        /* ============================================================
           SAVE YOUR DATE  —  paper tile, flipping keepsake card
           ============================================================ */
        :root {
            --blush: #F7DCE1;
            --blush-deep: #E9B9C3;
            --blush-soft: #FDF3F4;
            --ink-soft: rgba(59, 51, 45, 0.62);
        }

        .rvh-savedate-section {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1400px;
            padding: 80px 22px 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .rvh-std-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            letter-spacing: 6px;
            text-transform: uppercase;
            color: var(--gold);
            text-align: center;
        }

        /* ---------- THE PAPER TILE (same language as the Traditions book) ---------- */
        .rvh-std-flip {
            position: relative;
            width: 100%;
            max-width: 1240px;
            margin-top: 34px;
            perspective: 2400px;
            perspective-origin: 50% 42%;
        }
        .rvh-std-flip-inner {
            position: relative;
            width: 100%;
            transform-style: preserve-3d;
            will-change: transform;
            transform: rotateY(0deg) translateZ(0);
            transition: transform 1.15s cubic-bezier(0.45, 0.05, 0.15, 1);
            /* height is set directly (not transitioned) to whichever face is
               tallest, so the 3D flip never has to fight a layout reflow
               mid-animation \u2014 this is what was causing the stutter */
        }
        .rvh-savedate-section.rvh-is-sealed .rvh-std-flip-inner { transform: rotateY(180deg); }

        .rvh-std-face {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform-style: preserve-3d;
            will-change: transform;
            transform: translateZ(0);
            border-radius: 10px;
            padding: 56px 58px 62px;
            background: radial-gradient(ellipse at 50% 14%, var(--paper-center) 0%, var(--paper-mid) 54%, var(--paper-edge) 100%);
            /* the tile now floats above the page paper */
            box-shadow:
                0 2px 4px rgba(120, 96, 52, 0.10),
                0 14px 28px -12px rgba(120, 96, 52, 0.24),
                0 48px 90px -38px rgba(112, 78, 62, 0.42),
                0 80px 120px -60px rgba(112, 78, 62, 0.30),
                inset 0 1px 0 rgba(255,255,255,0.9);
            overflow: hidden;
            transition: box-shadow 0.9s ease;
        }
        .rvh-std-face.rvh-back { transform: rotateY(180deg); }
        /* the hidden face must never steal a click mid-flip */
        .rvh-std-face.rvh-back { pointer-events: none; }
        .rvh-savedate-section.rvh-is-sealed .rvh-std-face.rvh-back { pointer-events: auto; }
        .rvh-savedate-section.rvh-is-sealed .rvh-std-face.rvh-front { pointer-events: none; }
        /* a soft cast shadow under the floating tile */
        .rvh-std-flip::after {
            content: '';
            position: absolute;
            left: 6%; right: 6%; bottom: -34px;
            height: 46px;
            border-radius: 50%;
            background: radial-gradient(ellipse at 50% 50%, rgba(112, 78, 62, 0.20) 0%, rgba(112, 78, 62, 0.07) 48%, transparent 74%);
            filter: blur(10px);
            pointer-events: none;
            z-index: -1;
        }
        /* paper grain */
        .rvh-std-face::before {
            content: '';
            position: absolute; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sd)'/%3E%3C/svg%3E");
            opacity: 0.28; mix-blend-mode: multiply; pointer-events: none; z-index: 1;
        }
        .rvh-std-face::after {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(circle at 8% 92%, rgba(120,96,52,0.10), transparent 42%),
                radial-gradient(circle at 96% 6%, rgba(120,96,52,0.08), transparent 40%);
            pointer-events: none; z-index: 1;
        }
        /* engraved gold double frame + corner motifs, exactly like the book */
        .rvh-std-frame {
            position: absolute; inset: 18px;
            border: 1px solid rgba(181, 149, 92, 0.5);
            border-radius: 3px;
            pointer-events: none; z-index: 3;
        }
        .rvh-std-frame::after {
            content: '';
            position: absolute; inset: 7px;
            border: 1px solid rgba(181, 149, 92, 0.2);
            border-radius: 2px;
        }
        .rvh-std-corner {
            position: absolute;
            width: 70px; height: 70px;
            border: 0 solid rgba(181, 149, 92, 0.85);
            pointer-events: none; z-index: 4;
        }
        .rvh-std-corner::after {
            content: '\2748';
            position: absolute;
            color: rgba(181, 149, 92, 0.9);
            font-size: 14px; line-height: 1;
        }
        .rvh-sc-tl { top: 18px; left: 18px; border-top-width: 2px; border-left-width: 2px; }
        .rvh-sc-tl::after { top: 6px; left: 8px; }
        .rvh-sc-tr { top: 18px; right: 18px; border-top-width: 2px; border-right-width: 2px; }
        .rvh-sc-tr::after { top: 6px; right: 8px; }
        .rvh-sc-bl { bottom: 18px; left: 18px; border-bottom-width: 2px; border-left-width: 2px; }
        .rvh-sc-bl::after { bottom: 6px; left: 8px; }
        .rvh-sc-br { bottom: 18px; right: 18px; border-bottom-width: 2px; border-right-width: 2px; }
        .rvh-sc-br::after { bottom: 6px; right: 8px; }
        /* faint damask dots */
        .rvh-std-motif {
            position: absolute; inset: 0;
            opacity: 0.16; z-index: 1; pointer-events: none;
            background-image:
                radial-gradient(circle at 12% 22%, rgba(181,149,92,0.35) 0 2px, transparent 3px),
                radial-gradient(circle at 26% 68%, rgba(181,149,92,0.3) 0 2px, transparent 3px),
                radial-gradient(circle at 8% 82%, rgba(181,149,92,0.25) 0 2px, transparent 3px);
            background-size: 260px 260px;
        }

        .rvh-std-grid {
            position: relative;
            z-index: 6;
            display: grid;
            grid-template-columns: minmax(250px, 0.62fr) minmax(520px, 1.16fr);
            gap: 34px;
            align-items: center;
        }

        /* ---------- PHOTOBOOTH STRIPS ---------- */
        .rvh-strip-theatre {
            position: relative;
            height: 620px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .rvh-photo-strip {
            position: absolute;
            top: 50%;
            width: 190px;
            padding: 13px 13px 32px;
            background: linear-gradient(180deg, #FFFDFB 0%, #FBF5EE 100%);
            box-shadow: 6px 16px 34px -12px rgba(110, 90, 60, 0.42);
            transition: transform 1.5s cubic-bezier(0.62, 0.01, 0.24, 1), box-shadow 1.2s ease, filter 1.2s ease;
            will-change: transform;
        }
        .rvh-photo-strip::before,
        .rvh-photo-strip::after {
            content: '';
            position: absolute;
            top: 0; bottom: 0;
            width: 9px;
            background-image: radial-gradient(circle at 50% 9px, var(--paper-mid) 5px, transparent 5.5px);
            background-size: 9px 18px;
            background-repeat: repeat-y;
        }
        .rvh-photo-strip::before { left: -4px; }
        .rvh-photo-strip::after { right: -4px; }
        .rvh-photo-strip img.rvh-strip-photo {
            display: block;
            width: 100%;
            height: 172px;
            object-fit: cover;
            filter: saturate(1.04) contrast(1.02) brightness(1.02);
            margin-bottom: 11px;
        }
        .rvh-photo-strip img.rvh-strip-photo:last-of-type { margin-bottom: 0; }
        .rvh-strip-caption {
            position: absolute;
            left: 4px; right: 4px; bottom: 8px;
            white-space: nowrap; overflow: hidden; text-align: center;
            font-family: 'Caveat', cursive;
            font-size: 0.98rem;
            color: rgba(108, 21, 28, 0.72);
        }
        /* the real golden clip image */
        .rvh-clip-img {
            position: absolute;
            top: -46px; left: 50%;
            transform: translateX(-50%);
            width: 86px;
            height: auto;
            z-index: 6;
            filter: drop-shadow(0 8px 12px rgba(90, 70, 40, 0.42));
            pointer-events: none;
        }
        .rvh-photo-strip.rvh-at-front { transform: translate(-58%, -50%) rotate(-3.2deg); z-index: 3; }
        .rvh-photo-strip.rvh-at-back {
            transform: translate(24%, -46%) rotate(3.6deg) scale(0.93);
            z-index: 2;
            box-shadow: 4px 12px 26px -14px rgba(110, 90, 60, 0.4);
        }
        .rvh-photo-strip.rvh-at-back .rvh-clip-img { opacity: 0; transition: opacity 0.5s ease; }
        .rvh-photo-strip.rvh-at-front .rvh-clip-img { opacity: 1; transition: opacity 0.6s ease 0.4s; }

        .rvh-back-strips { height: 540px; align-self: center; }

        /* ---------- THE LETTER SIDE ---------- */
        .rvh-std-letter { position: relative; }
        .rvh-std-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.6rem, 3vw, 2.6rem);
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--brand-color);
            line-height: 1.2;
        }
        .rvh-std-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: clamp(0.95rem, 1.3vw, 1.1rem);
            line-height: 1.65;
            color: var(--text-dark);
            opacity: 0.8;
            margin-top: 12px;
            max-width: 380px;
            line-height: 1.6;
        }
        /* the same gold rule-with-diamond divider used on the sealed card
           (.rvh-sealed-rule / .rvh-stage-line), reused here under the section heading */
        .rvh-std-flourish {
            width: min(30%, 136px); height: 1px; margin: 16px auto 53px;
            background: linear-gradient(to right, transparent, var(--gold), transparent);
            position: relative;
        }
        .rvh-std-flourish::after {
            content: '❖';
            position: absolute; top: -9px; left: 50%;
            transform: translateX(-50%);
            color: var(--gold);
            font-size: 11px;
        }

        /* primary step : the date */
        .rvh-step-primary { width: 100%; max-width: 560px; margin-left: 18px; }
        .rvh-step-tag {
            display: flex; align-items: center; gap: 10px;
            font-family: 'Cinzel', serif;
            font-size: 0.62rem; letter-spacing: 3.4px; text-transform: uppercase;
            color: var(--brand-color);
            margin-bottom: 14px;
        }
        .rvh-step-tag i {
            font-style: normal;
            width: 20px; height: 20px; border-radius: 50%;
            display: grid; place-items: center;
            font-size: 0.6rem;
            color: #FFFBEF;
            background: linear-gradient(140deg, var(--gold-light), var(--gold) 55%, #8d7748);
        }
        .rvh-date-row { display: flex; align-items: flex-end; gap: 12px; }
        .rvh-date-cell { display: flex; flex-direction: column; }
        .rvh-date-cell.rvh-yy { flex: 1.3 1 0; }
        .rvh-date-cell.rvh-dd, .rvh-date-cell.rvh-mm { flex: 1 1 0; }
        .rvh-date-label {
            font-family: 'Cinzel', serif;
            font-size: 0.55rem; letter-spacing: 3px; text-transform: uppercase;
            color: rgba(108, 21, 28, 0.6);
            margin-bottom: 8px; text-align: center;
        }
        .rvh-date-input {
            width: 100%; box-sizing: border-box;
            font-family: 'Cinzel', serif;
            font-size: clamp(1.5rem, 2.4vw, 2.1rem);
            letter-spacing: 2px;
            text-align: center;
            color: var(--brand-color);
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(181, 149, 92, 0.45);
            border-radius: 5px;
            padding: 16px 8px 13px;
            outline: none;
            transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }
        .rvh-date-input::placeholder { color: rgba(59,51,45,0.24); letter-spacing: 3px; }
        .rvh-date-input:focus {
            background: #fff;
            border-color: var(--gold);
            box-shadow: 0 10px 22px -14px rgba(120, 96, 52, 0.7);
        }
        .rvh-date-sep {
            font-family: 'Cinzel', serif;
            font-size: 1.4rem;
            color: rgba(181, 149, 92, 0.8);
            padding-bottom: 20px;
        }
        .rvh-date-hint {
            font-family: 'Playfair Display', serif;
            font-style: italic; font-size: 0.82rem;
            color: var(--ink-soft);
            margin-top: 10px;
        }
        .rvh-date-input.rvh-missing { border-color: rgba(150, 40, 48, 0.85); background: rgba(255, 244, 244, 0.95); }

        /* secondary step : names, deliberately quieter */
        .rvh-step-secondary {
            max-width: 470px;
            margin-top: 26px;
            padding-top: 20px;
            border-top: 1px dashed rgba(181, 149, 92, 0.42);
        }
        .rvh-step-secondary .rvh-step-note {
            font-family: 'Caveat', cursive;
            font-size: 1rem;
            color: rgba(59,51,45,0.6);
            margin-bottom: 10px;
        }
        .rvh-name-row { display: flex; gap: 14px; flex-wrap: wrap; }
        .rvh-name-field { flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; }
        .rvh-name-label {
            font-family: 'Cinzel', serif;
            font-size: 0.52rem; letter-spacing: 2.6px; text-transform: uppercase;
            color: rgba(59, 51, 45, 0.45);
            margin-bottom: 6px;
        }
        .rvh-name-input {
            width: 100%; box-sizing: border-box;
            font-family: 'Playfair Display', serif;
            font-size: 0.92rem;
            color: var(--text-dark);
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(181, 149, 92, 0.4);
            padding: 7px 2px 6px;
            outline: none;
            transition: border-color 0.4s ease;
        }
        .rvh-name-input::placeholder { color: rgba(59,51,45,0.26); font-style: italic; }
        .rvh-name-input:focus { border-color: var(--gold); }

        .rvh-btn-seal {
            margin-top: 26px;
            font-family: 'Cinzel', serif;
            font-size: 0.72rem; letter-spacing: 4px; text-transform: uppercase;
            color: #fffaf0;
            padding: 15px 34px;
            border: none; border-radius: 999px; cursor: pointer;
            position: relative;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
            transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
        }
        .rvh-btn-seal::after {
            content: '';
            position: absolute; inset: 4px;
            border: 1px solid rgba(226,205,166,0.5);
            border-radius: 999px;
            pointer-events: none;
        }
        .rvh-btn-seal:hover { transform: translateY(-3px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); }
        .rvh-btn-seal.rvh-ghost {
            background: transparent;
            color: var(--brand-color);
            border: 1px solid rgba(181, 149, 92, 0.75);
            box-shadow: none;
            padding: 13px 28px;
        }
        .rvh-btn-seal.rvh-ghost::after { content: none; }
        .rvh-btn-seal.rvh-ghost:hover { background: rgba(255,255,255,0.7); }

        /* ============ BACK FACE : THE SEALED KEEPSAKE ============ */
        /* ============ BACK FACE : BUILT FROM THE PROVIDED IVORY CARD ASSET ============ */
        .rvh-back-inner {
            position: relative;
            z-index: 6;
            padding: 8px 8px 12px;
            display: grid;
            grid-template-columns: minmax(520px, 1.05fr) minmax(300px, 0.62fr);
            gap: clamp(38px, 4.3vw, 62px);
            align-items: center;
        }
        .rvh-back-card-column { position: relative; width: 100%; max-width: 590px; justify-self: center; }
        .rvh-back-card-shell {
            position: relative; width: 100%;
            aspect-ratio: 1122 / 1402;
            filter: drop-shadow(0 4px 5px rgba(85,60,40,.10)) drop-shadow(0 22px 30px rgba(85,60,40,.18)) drop-shadow(0 46px 54px rgba(85,60,40,.13));
        }
        .rvh-back-card-shell.rvh-is-capturing { filter: none; }
        /* The card artwork used to set the height on its own (shell aspect-ratio +
           an auto-height <img>) while the content was absolutely positioned inside
           it. Content that outgrew the artwork simply spilled: at 320px the Share /
           Invite buttons hung 36px below the card. The image now stretches to fill
           the shell and the content sits in normal flow, so aspect-ratio acts as a
           floor -- the card keeps its proportions whenever the content fits, and
           grows to contain it when it does not. Vertical padding percentages are
           the old inset values x1.2496, because padding resolves against width
           where inset's top/bottom resolved against height. */
        .rvh-back-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; }
        .rvh-back-card-content {
            position:relative; z-index:3; padding:9.5% 10.8% 9.25%;
            display:flex; flex-direction:column; align-items:center; text-align:center; min-height:0;
        }
        .rvh-sealed-eyebrow {
            font-family:'Cinzel',serif; font-size:clamp(.48rem,.64vw,.62rem); letter-spacing:clamp(3px,.38vw,5px);
            text-transform:uppercase; color:var(--gold); margin-top:2%;
        }
        .rvh-sealed-main-date {
            font-family:'Playfair Display',serif;
            font-size:clamp(1.46rem,2.18vw,2.02rem);
            font-weight:500;
            line-height:1.04;
            letter-spacing:.15px;
            color:var(--brand-color);
            margin-top:clamp(10px,.95vw,13px);
            white-space:nowrap;
        }
        .rvh-sealed-forever {
            font-family:'Great Vibes',cursive;
            font-size:clamp(1.05rem,1.62vw,1.46rem);
            line-height:1.08;
            letter-spacing:.45px;
            color:rgba(181,149,92,.72);
            margin-top:clamp(11px,1.05vw,14px);
            transform:translateY(2px);
        }
        .rvh-sealed-date {
            font-family:'Cinzel',serif; font-size:clamp(.5rem,.72vw,.66rem); letter-spacing:clamp(2.6px,.44vw,4.5px); text-transform:uppercase;
            color:rgba(59,51,45,.62); margin-top:clamp(11px,1.35vw,16px); white-space:nowrap;
        }
        .rvh-sealed-rule {
            width:min(30%,136px);
            height:1px;
            margin:clamp(18px,1.75vw,23px) auto 0;
            background:linear-gradient(to right,transparent,var(--gold),transparent);
            position:relative;
        }
        .rvh-sealed-rule::after { content:'❖'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); color:var(--gold); font-size:11px; }

        .rvh-reveal { opacity:0; transform:translateY(14px); }
        .rvh-savedate-section.rvh-is-sealed .rvh-reveal { animation:sealedRise 1.05s cubic-bezier(.22,1,.32,1) forwards; animation-delay:calc(.62s + var(--i,0)*.075s); }
        @keyframes sealedRise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

        .rvh-countdown {
            width:84%;
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:clamp(10px,1.05vw,13px);
            margin-top:clamp(18px,1.8vw,22px);
        }
        .rvh-count-card {
            position:relative; min-width:0; padding:clamp(10px,1.25vw,14px) clamp(4px,.55vw,8px) clamp(8px,1.02vw,11px);
            border-radius:clamp(10px,1vw,13px); text-align:center; background:linear-gradient(168deg,#FBE4EA 0%,#F7D9E2 100%);
            border:1px solid rgba(255,255,255,.75); box-shadow:0 2px 5px rgba(150,104,116,.10),0 10px 18px -13px rgba(150,104,116,.36),0 18px 28px -24px rgba(112,78,62,.25),inset 0 1px 0 rgba(255,255,255,.88);
        }
        .rvh-count-card::before { content:''; position:absolute; inset:5px; border-radius:max(7px,calc(1vw - 2px)); background:linear-gradient(172deg,#FFF7F9 0%,#FDECF1 48%,#F9DDE5 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -7px 12px -11px rgba(160,110,122,.25); }
        .rvh-count-card::after { content:''; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.68); border-radius:max(5px,calc(1vw - 4px)); pointer-events:none; }
        .rvh-count-inner { position:relative; z-index:2; min-width:0; }
        .rvh-count-num { font-family:'Playfair Display',serif; font-weight:400; font-size:clamp(1.34rem,2.2vw,2.08rem); line-height:1; color:var(--brand-color); font-variant-numeric:tabular-nums; white-space:nowrap; }
        .rvh-count-rule { width:clamp(14px,1.6vw,18px); height:1px; margin:clamp(6px,.75vw,8px) auto clamp(4px,.55vw,6px); background:var(--gold); opacity:.72; }
        .rvh-count-label { font-family:'Cinzel',serif; font-size:clamp(.38rem,.48vw,.46rem); letter-spacing:clamp(1.5px,.2vw,2.2px); text-transform:uppercase; color:rgba(59,51,45,.55); white-space:nowrap; }

        .rvh-stage-card {
            position:relative;
            width:100%;
            flex:1 1 auto;
            min-height:0;
            margin:clamp(30px,3.15vw,38px) auto 0;
            padding:clamp(18px,1.8vw,24px) 4px clamp(12px,1.2vw,16px);
            text-align:center;
            display:flex;
            flex-direction:column;
            align-items:center;
        }
        .rvh-stage-card::before { content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(34%,150px); height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); }
        .rvh-stage-chapter {
            font-family:'Caveat',cursive;
            font-size:clamp(.88rem,1.16vw,1.02rem);
            color:rgba(108,21,28,.78);
            margin-bottom:2px;
        }
        .rvh-stage-name {
            font-family:'Great Vibes',cursive;
            font-size:clamp(1.55rem,2.5vw,2.15rem);
            font-weight:400;
            letter-spacing:.3px;
            text-transform:none;
            color:var(--gold);
            margin-top:2px;
            line-height:1.18;
        }
        .rvh-stage-line { width:min(30%,130px); height:1px; margin:clamp(8px,1vw,13px) auto; background:linear-gradient(to right,transparent,var(--gold),transparent); position:relative; }
        .rvh-stage-line::after { content:'❖'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); color:var(--gold); font-size:10px; }
        .rvh-stage-timeframe {
            font-family:'Playfair Display',serif;
            font-weight:600;
            font-style:normal;
            font-size:clamp(.9rem,1.1vw,1.04rem);
            letter-spacing:.2px;
            color:rgba(43,37,32,.86);
            margin:0 auto 4px;
        }
        .rvh-stage-message {
            font-family:'Playfair Display',serif;
            font-style:italic;
            font-size:clamp(.70rem,.84vw,.82rem);
            line-height:1.72;
            color:rgba(59,51,45,.70);
            max-width:84%;
            margin:0 auto;
        }
        .rvh-stage-actions {
            width:min(70%,330px);
            display:grid;
            grid-template-columns:1fr;
            justify-items:center;
            gap:18px;
            margin:auto auto 16px;
            padding-top:clamp(18px,1.7vw,22px);
        }
        /* the bottom "share" action split into two peer CTAs (same style as the
           single share button they replaced) side by side; together they span
           the same width as .rvh-stage-cta.rvh-primary above, since both sit in the
           same width:min(70%,330px) .rvh-stage-actions column */
        .rvh-stage-cta-row { display:flex; gap:10px; width:100%; }
        .rvh-stage-cta-row .rvh-stage-cta.rvh-share { flex:1 1 0; width:auto; min-height:52px; padding:12px 8px; font-size:.6rem; letter-spacing:.09em; }
        .rvh-stage-cta {
            width:100%;
            min-height:40px;
            font-family:'Cinzel',serif;
            font-size:clamp(.44rem,.52vw,.5rem);
            letter-spacing:clamp(1.9px,.21vw,2.45px);
            text-transform:uppercase;
            padding:10px clamp(16px,1.25vw,21px);
            border-radius:999px;
            cursor:pointer;
            border:1px solid rgba(108,21,28,.55);
            color:var(--brand-color);
            background:rgba(255,255,255,.42);
            transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background .35s ease;
        }
        .rvh-stage-cta:hover { transform:translateY(-2px); box-shadow:0 12px 22px -16px rgba(108,21,28,.55); }
        .rvh-stage-cta.rvh-primary {
            position:relative;
            overflow:hidden;
            background:linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            color:#fffaf0;
            border:none;
            padding:14px 34px;
            font-size:.8rem;
            letter-spacing:.24em;
            box-shadow:
                0 14px 26px rgba(108,21,28,.32),
                inset 0 1px 0 rgba(255,255,255,.22);
        }
        .rvh-stage-cta.rvh-primary::before {
            content:'';
            position:absolute;
            inset:4px;
            border-radius:999px;
            border:1px solid rgba(226,205,166,.5);
            pointer-events:none;
        }
        .rvh-stage-cta.rvh-primary:hover {
            box-shadow:
                0 20px 34px rgba(108,21,28,.38),
                inset 0 1px 0 rgba(255,255,255,.28);
        }
        .rvh-stage-cta.rvh-share {
            display:block;
            width:100%;
            padding:14px 34px;
            font-size:.8rem;
            letter-spacing:.24em;
            background:rgba(255,255,255,.06);
            border-color:rgba(108,21,28,.30);
            box-shadow:none;
        }

        .rvh-stage-cta.rvh-share:hover {
            background:rgba(108,21,28,.055);
            border-color:rgba(108,21,28,.48);
            box-shadow:0 8px 16px -14px rgba(108,21,28,.42);
            transform:translateY(-1px);
        }

        /* --- SHARE THE DATE : email / WhatsApp popup --- */
        .rvh-sd-share-overlay {
            position: fixed; inset: 0;
            background: rgba(43,30,22,.45);
            backdrop-filter: blur(2px);
            display: flex; align-items: center; justify-content: center;
            padding: 24px;
            z-index: 999;
            opacity: 0; pointer-events: none;
            transition: opacity .3s ease;
        }
        .rvh-sd-share-overlay.rvh-is-open { opacity: 1; pointer-events: auto; }
        .rvh-sd-share-card {
            position: relative;
            width: min(420px, 100%);
            background: linear-gradient(180deg, var(--paper-center) 0%, var(--paper-mid) 100%);
            border: 1px solid rgba(181,149,92,.4);
            border-radius: 14px;
            padding: 34px 30px 28px;
            box-shadow: 0 40px 70px -20px rgba(43,30,22,.5);
            text-align: center;
            transform: translateY(14px) scale(.98);
            transition: transform .35s cubic-bezier(.2,.8,.2,1);
        }
        .rvh-sd-share-overlay.rvh-is-open .rvh-sd-share-card { transform: translateY(0) scale(1); }
        .rvh-sd-share-close {
            position: absolute; top: 14px; right: 14px;
            width: 30px; height: 30px;
            border-radius: 50%;
            border: 1px solid rgba(108,21,28,.25);
            background: rgba(255,255,255,.6);
            color: var(--brand-color);
            font-size: 1rem; line-height: 1;
            cursor: pointer;
        }
        .rvh-sd-share-kicker {
            font-family: 'Cinzel', serif;
            font-size: .62rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 8px;
        }
        .rvh-sd-share-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            color: var(--brand-color);
            margin: 0 0 8px;
        }
        .rvh-sd-share-copy {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .92rem;
            color: rgba(59,51,45,.72);
            margin: 0 0 22px;
            line-height: 1.55;
        }
        .rvh-sd-share-field { text-align: left; margin-bottom: 16px; }
        .rvh-sd-share-field span {
            display: block;
            font-family: 'Cinzel', serif;
            font-size: .56rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: rgba(59,51,45,.6);
            margin-bottom: 6px;
        }
        .rvh-sd-share-field input {
            width: 100%;
            padding: 11px 14px;
            border-radius: 8px;
            border: 1px solid rgba(181,149,92,.45);
            background: rgba(255,255,255,.8);
            font-family: 'Playfair Display', serif;
            font-size: .88rem;
            color: var(--text-dark);
        }
        .rvh-sd-share-field input:focus { outline: none; border-color: rgba(108,21,28,.55); }
        .rvh-sd-share-field.rvh-has-error input { border-color: rgba(178,40,40,.75); }
        .rvh-sd-share-row { display: flex; gap: 10px; align-items: flex-end; }
        .rvh-sd-share-row[hidden] { display: none; }
        .rvh-sd-share-row .rvh-sd-share-field { flex: 1; margin-bottom: 0; }
        .rvh-sd-share-btn {
            appearance: none; border: none; cursor: pointer;
            position: relative;
            font-family: 'Cinzel', serif;
            font-size: .58rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: #fffaf0;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            padding: 11px 16px;
            border-radius: 999px;
            box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
            transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
            white-space: nowrap;
        }
        .rvh-sd-share-btn::after {
            content: '';
            position: absolute; inset: 3px;
            border: 1px solid rgba(226,205,166,0.5);
            border-radius: 999px;
            pointer-events: none;
        }
        .rvh-sd-share-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); }
        .rvh-sd-share-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
        .rvh-sd-share-status {
            margin-top: 16px;
            min-height: 18px;
            font-family: 'Caveat', cursive;
            font-size: .95rem;
            color: var(--brand-color);
        }
        .rvh-sd-share-status.rvh-is-error { color: #a22; font-family: 'Playfair Display', serif; font-style: italic; font-size: .92rem; }
        .rvh-sd-share-note {
            margin-top: 4px;
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .92rem;
            line-height: 1.55;
            color: rgba(59,51,45,.5);
        }
        @media (max-width: 480px) {
            /* The base .rvh-sd-share-row rule sets align-items:flex-end for its normal
               row layout (aligning the field and button to a shared baseline).
               Switching to flex-direction:column here flips the cross axis to
               horizontal, so that same flex-end silently became "align right"
               instead of the intended centered stack - override it explicitly. */
            .rvh-sd-share-row { flex-direction: column; align-items: stretch; }
        }
        .rvh-sd-share-checkbox-row {
            display: flex; align-items: flex-start; gap: 9px;
            text-align: left;
            margin: 4px 0 20px;
            cursor: pointer;
        }
        .rvh-sd-share-checkbox-row input[type="checkbox"] {
            appearance: none; -webkit-appearance: none;
            flex: none;
            width: 17px; height: 17px;
            margin-top: 1px;
            border-radius: 4px;
            border: 1px solid rgba(181,149,92,.6);
            background: rgba(255,255,255,.85);
            cursor: pointer;
            position: relative;
            transition: background .2s ease, border-color .2s ease;
        }
        .rvh-sd-share-checkbox-row input[type="checkbox"]:checked {
            background: var(--brand-color);
            border-color: var(--brand-color);
        }
        .rvh-sd-share-checkbox-row input[type="checkbox"]:checked::after {
            content: '';
            position: absolute; left: 5px; top: 1px;
            width: 5px; height: 9px;
            border: solid #fffaf0;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .rvh-sd-share-checkbox-row span {
            font-family: 'Playfair Display', serif;
            font-size: .8rem;
            line-height: 1.4;
            color: rgba(59,51,45,.78);
        }
        .rvh-sd-share-checkbox-row.rvh-has-error input[type="checkbox"] { border-color: rgba(178,40,40,.75); }
        .rvh-sd-share-btn-block { display: block; width: 100%; }
        .rvh-sd-share-btn-block[hidden] { display: none; }
        .rvh-sd-share-preview-img {
            display: block;
            width: 100%;
            max-height: 380px;
            object-fit: contain;
            border-radius: 10px;
            border: 1px solid rgba(181,149,92,.35);
            background: rgba(255,255,255,.5);
            margin-bottom: 10px;
        }
        .rvh-sd-share-preview-names {
            font-family: 'Caveat', cursive;
            font-size: 1.2rem;
            color: var(--brand-color);
            margin: 0 0 16px;
        }
        .rvh-sd-share-channel-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
        .rvh-sd-share-back {
            appearance: none; border: none; background: none; cursor: pointer;
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .82rem;
            color: rgba(59,51,45,.55);
            padding: 4px 2px;
        }
        .rvh-sd-share-back:hover { color: var(--brand-color); }

        .rvh-stage-hint {
            font-family:'Playfair Display',serif;
            font-style:italic;
            font-size:clamp(.70rem,.84vw,.82rem);
            line-height:1.6;
            color:rgba(59,51,45,.70);
            max-width:84%;
            margin:6px auto 0;
        }
        .rvh-stage-hint-lead {
            font-style:normal;
            font-weight:600;
            color:rgba(59,51,45,.86);
        }
        .rvh-back-foot {
            margin-top:10px;
            text-align:center;
        }
        .rvh-back-foot .rvh-btn-seal.rvh-ghost { background:transparent; border:0; border-bottom:1px solid rgba(108,21,28,.45); border-radius:0; padding:3px 2px; font-family:'Playfair Display',serif; font-size:.84rem; letter-spacing:0; text-transform:none; box-shadow:none; }
        .rvh-back-strips { height:610px; align-self:center; justify-self:center; transform:translateY(-2px); }

        @media (max-width: 1080px) {
            .rvh-std-face { padding: 40px 22px 48px; }
            .rvh-std-grid { grid-template-columns: 1fr; gap: 26px; }
            .rvh-back-inner { grid-template-columns: 1fr; gap: 12px; }
            .rvh-back-inner .rvh-sealed-col { order: 1; }
            .rvh-back-inner .rvh-strip-theatre { order: 2; }
            .rvh-strip-theatre { height: 540px; order: 2; }
            .rvh-std-letter { order: 1; text-align: center; }
            .rvh-std-sub, .rvh-step-primary, .rvh-step-secondary { margin-left: auto; margin-right: auto; }
            .rvh-std-flourish { margin-left: auto; margin-right: auto; }
            .rvh-step-tag { justify-content: center; }
            .rvh-btn-seal { display: block; margin-left: auto; margin-right: auto; }
            .rvh-photo-strip { width: 152px; }
            .rvh-photo-strip img.rvh-strip-photo { height: 138px; }
            .rvh-clip-img { width: 70px; top: -38px; }
            .rvh-photo-strip.rvh-at-front { transform: translate(-52%, -50%) rotate(-3deg); }
            .rvh-photo-strip.rvh-at-back { transform: translate(18%, -46%) rotate(3.4deg) scale(0.93); }
            .rvh-back-inner { grid-template-columns:1fr; gap:28px; }
            .rvh-back-card-column { max-width:570px; }
            .rvh-back-inner .rvh-back-card-column { order:1; }
            .rvh-back-inner .rvh-back-strips { order:2; }
            .rvh-back-strips { height:520px; transform:none; }
        }
        @media (max-width: 560px) {
            .rvh-savedate-section { padding: 56px 12px 90px; }
            .rvh-strip-theatre { height: 460px; }
            .rvh-photo-strip { width: 122px; padding: 9px 9px 26px; }
            .rvh-photo-strip img.rvh-strip-photo { height: 108px; margin-bottom: 8px; }
            .rvh-strip-caption { font-size: 0.85rem; }
            .rvh-clip-img { width: 58px; top: -30px; }
            .rvh-count-card { width: 42%; }
            .rvh-date-input { font-size: 1.25rem; padding: 13px 4px 11px; }
        }

        @media (max-width: 680px) {
            .rvh-back-card-content { padding:8.75% 8.2% 9.12%; }
            .rvh-sealed-main-date { font-size:clamp(1.45rem,7vw,2rem); }
            .rvh-sealed-forever { font-size:clamp(1.15rem,5vw,1.55rem); }
            .rvh-sealed-date { font-size:clamp(.43rem,2.1vw,.58rem); letter-spacing:clamp(2px,.9vw,4px); }
            .rvh-countdown { width:82%; gap:8px; }
            .rvh-count-card { padding:9px 4px 8px; border-radius:10px; }
            .rvh-count-num { font-size:clamp(1.28rem,6.5vw,1.8rem); }
            .rvh-count-label { font-size:.36rem; letter-spacing:1.3px; }
            .rvh-stage-card { margin-top:13px; padding-top:12px; }
            .rvh-stage-timeframe { font-size:clamp(.78rem,3vw,.92rem); margin:0 auto 3px; }
            .rvh-stage-message { font-size:clamp(.62rem,2.5vw,.76rem); line-height:1.42; }
            .rvh-stage-actions { margin-top:auto; gap:7px; width:82%; padding-top:13px; }
            .rvh-stage-cta { padding:9px 16px; font-size:.47rem; letter-spacing:1.7px; }
            .rvh-stage-hint { font-size:clamp(.62rem,2.5vw,.76rem); line-height:1.5; margin:5px auto 0; }
        }
        @media (max-width: 480px) {
            .rvh-countdown { grid-template-columns:repeat(2,minmax(0,1fr)); width:78%; gap:6px; margin-top:4px; }
            .rvh-back-card-content { padding:4.25% 7.4% 3.25%; }
            .rvh-sealed-eyebrow { margin-top:0; font-size:.40rem; letter-spacing:2.2px; }
            .rvh-sealed-main-date { margin-top:5px; font-size:clamp(1.25rem,6.4vw,1.7rem); }
            .rvh-sealed-forever { margin-top:6px; font-size:clamp(1rem,4.7vw,1.35rem); }
            .rvh-sealed-date { margin-top:6px; font-size:.39rem; letter-spacing:1.7px; }
            .rvh-sealed-rule { margin-top:4px; }
            .rvh-count-card { padding:7px 3px 6px; }
            .rvh-count-num { font-size:clamp(1.05rem,5.8vw,1.45rem); }
            .rvh-count-rule { margin:5px auto 4px; }
            .rvh-count-label { font-size:.31rem; letter-spacing:1px; }
            .rvh-stage-card { margin-top:2px; padding-top:3px; }
            .rvh-stage-chapter { font-size:.72rem; }
            .rvh-stage-name { font-size:clamp(1.15rem,6.6vw,1.45rem); letter-spacing:.2px; }
            .rvh-stage-line { margin:3px auto; }
            .rvh-stage-timeframe { font-size:clamp(.7rem,2.8vw,.82rem); margin:0 auto 2px; }
            .rvh-stage-message { display:block; font-size:clamp(.52rem,2.25vw,.64rem); line-height:1.3; max-width:96%; }
            .rvh-stage-actions { margin-top:4px; gap:4px; width:86%; padding-top:0; }
            .rvh-stage-cta { padding:8px 14px; font-size:.41rem; letter-spacing:1.35px; min-height:32px; }
            .rvh-stage-cta.rvh-primary { padding:14px 26px; font-size:.68rem; letter-spacing:.16em; }
            .rvh-stage-cta.rvh-share { width:78%; padding:14px 26px; font-size:.68rem; letter-spacing:.16em; }
            .rvh-stage-hint { display:block; font-size:clamp(.52rem,2.25vw,.64rem); line-height:1.3; max-width:96%; margin:2px auto 0; }
            .rvh-back-foot { margin-top:6px; }
        }

        /* ---------- THE REAL ENVELOPE, HOLDING ONE COHERENT DATE CARD ---------- */
        .rvh-env-stage {
            position: relative;
            width: 100%;
            max-width: 560px;
            margin: -50px 0 0;
        }
        .rvh-env-tilt {
            position: relative;
            transform: rotate(1.6deg);
            transform-origin: 50% 60%;
            transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .rvh-env-stage:hover .rvh-env-tilt,
        .rvh-env-stage:focus-within .rvh-env-tilt { transform: rotate(2.4deg) translateY(-6px); }
        /* The card is now part of the rendered envelope asset; HTML only overlays editable content. */
        .rvh-env-img {
            position: relative;
            z-index: 2;
            display: block;
            width: 100%;
            height: auto;
            filter:
                drop-shadow(0 1px 1px rgba(74, 58, 52, 0.22))
                drop-shadow(0 8px 14px rgba(74, 58, 52, 0.20))
                drop-shadow(0 30px 46px rgba(74, 58, 52, 0.26));
        }
        /* the soft shadow the envelope casts on the paper below it */
        .rvh-env-tilt::after {
            content: '';
            position: absolute;
            left: 8%; right: 8%; bottom: -3.5%;
            height: 9%;
            background: radial-gradient(50% 50% at 50% 50%, rgba(86, 66, 58, 0.34), rgba(86, 66, 58, 0) 72%);
            filter: blur(7px);
            z-index: -1;
            transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .rvh-env-stage:hover .rvh-env-tilt::after { transform: scale(1.04) translateY(4px); opacity: 0.85; }

        .rvh-env-card-hint {
            position: absolute;
            z-index: 4;
            left: 14.5%; right: 12.5%;
            top: 19.8%;
            margin: 0;
            text-align: left;
            line-height: 1.32;
            white-space: nowrap;
            font-size: clamp(0.64rem, 0.88vw, 0.82rem);
            color: rgba(90, 46, 44, 0.66);
            pointer-events: none;
        }
        .rvh-env-paper {
            position: absolute;
            z-index: 4;
            left: 15.5%; right: 15.5%;
            top: 31.2%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: clamp(6px, 1vw, 11px);
        }
        .rvh-dtile { flex: 1 1 0; min-width: 0; text-align: center; }
        .rvh-dtile.rvh-yy { flex: 1.34 1 0; }
        .rvh-dtile-label {
            display: block;
            font-family: 'Cinzel', serif;
            font-size: clamp(0.4rem, 0.62vw, 0.56rem);
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(150, 106, 74, 0.78);
            margin-bottom: clamp(4px, 0.7vw, 8px);
        }
        .rvh-dtile-inner {
            position: relative;
            border-radius: clamp(8px, 1vw, 13px);
            background: linear-gradient(176deg, #FEFCF7 0%, #F8F2E7 100%);
            border: 1px solid rgba(181, 149, 92, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                inset 0 -8px 14px -10px rgba(150, 118, 78, 0.35),
                0 6px 12px -8px rgba(120, 94, 62, 0.4);
            transition: box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.5s ease;
        }
        .rvh-dtile-input {
            position: relative;
            z-index: 2;
            display: block;
            width: 100%; box-sizing: border-box;
            border: none; background: transparent; outline: none;
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.35rem, 2.5vw, 2.3rem);
            line-height: 1.1;
            letter-spacing: 1px;
            text-align: center;
            color: var(--brand-color);
            padding: clamp(10px, 1.5vw, 18px) 2px clamp(10px, 1.5vw, 18px);
            cursor: text;
        }
        .rvh-dtile-input::placeholder { color: rgba(108, 21, 28, 0.22); }
        .rvh-dtile-slash {
            font-family: 'Playfair Display', serif;
            font-size: clamp(0.9rem, 1.5vw, 1.35rem);
            color: rgba(181, 149, 92, 0.75);
            padding-bottom: clamp(12px, 1.7vw, 20px);
            user-select: none;
        }
        .rvh-dtile:focus-within .rvh-dtile-inner {
            transform: translateY(-2px);
            border-color: rgba(181, 149, 92, 0.95);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                0 0 0 2px rgba(181, 149, 92, 0.18),
                0 12px 20px -10px rgba(120, 94, 62, 0.45);
        }
        .rvh-dtile:has(.rvh-dtile-input.rvh-missing) .rvh-dtile-inner {
            border-color: rgba(150, 40, 48, 0.7);
            box-shadow: 0 0 0 2px rgba(150, 40, 48, 0.14), 0 10px 18px -12px rgba(150, 40, 48, 0.4);
        }

        /* CTA now belongs to the card itself, replacing the old two-line quote. */
        .rvh-env-card-action {
            position: absolute;
            z-index: 5;
            left: 0; right: 0;
            top: 54.2%;
            display: flex;
            justify-content: center;
            pointer-events: none;
        }
        .rvh-env-card-cta {
            pointer-events: auto;
            margin: 0;
            padding: 14px 34px;
            font-size: .8rem;
            letter-spacing: .24em;
            white-space: nowrap;
        }
        @media (max-width: 680px) {
            .rvh-env-card-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
        }
        @media (max-width: 480px) {
            .rvh-env-card-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
        }

        @media (max-width: 1080px) {
            .rvh-step-primary { margin-left: auto; margin-right: auto; }
            .rvh-env-stage { margin-left: auto; margin-right: auto; }
        }
        @media (max-width: 560px) {
            .rvh-env-stage { margin-top: 18px; }
            .rvh-env-card-hint { left: 14%; right: 12%; top: 19.4%; font-size: 0.62rem; text-align: left; white-space: nowrap; }
            .rvh-env-paper { left: 14.5%; right: 14.5%; top: 31%; gap: 4px; }
            .rvh-dtile-label { letter-spacing: 2px; margin-bottom: 3px; }
            .rvh-dtile-inner { border-radius: 8px; }
            .rvh-dtile-input { padding: 8px 1px; }
            .rvh-env-card-action { top: 53.7%; }
        }
    


        /* ---------- DUPLICATE SAVE-THE-DATE LAYOUT : CENTERED HEADING, ELEMENTS BELOW ---------- */
                /* hidden on request -- markup/JS left intact, remove this rule to bring it back */
                #saveDateSectionDuplicate { display: none; }
                .rvh-savedate-duplicate { padding-top: 22px; }
                /* warm ivory glossy card treatment, swapped in for the card's own
                   CSS paper gradient — scoped to this duplicate section only, so
                   the original save-the-date section is untouched. Only the card's
                   surface changes here (background/shadow/border + the two
                   decorative pseudo-elements below); .rvh-std-frame and .rvh-std-corner
                   (the engraved gold inner frame + corner flourishes) are separate
                   elements already in the markup, so they keep showing exactly as
                   before, now against the glossier surface. And since none of this
                   touches .rvh-std-flip-inner, the 3D flip still works exactly as
                   before in both directions. */
                .rvh-savedate-duplicate .rvh-std-face {
                    border-radius: 18px;
                    background:
                        radial-gradient(ellipse at 24% 14%, rgba(255,255,255,.54) 0%, rgba(255,255,255,.28) 28%, rgba(255,255,255,.10) 52%, transparent 72%),
                        linear-gradient(120deg, #fdf9f0 0%, #fbf5e8 18%, #f8efdc 38%, #f5e8cd 58%, #f1dfbc 78%, #ecd5a8 100%);
                    box-shadow:
                        0 24px 56px rgba(88,62,35,.16),
                        0 8px 18px rgba(88,62,35,.10),
                        inset 0 1px 0 rgba(255,255,255,.99),
                        inset 0 -1px 0 rgba(210,191,163,.22);
                    border: 1px solid rgba(220,205,182,.48);
                }
                /* drop the paper-grain noise here — this surface is glossy, not textured */
                .rvh-savedate-duplicate .rvh-std-face::before { content: none; }
                /* the original soft corner-glow, plus this design's satin sheen, layered together */
                .rvh-savedate-duplicate .rvh-std-face::after {
                    background:
                        radial-gradient(circle at 8% 92%, rgba(120,96,52,0.10), transparent 42%),
                        radial-gradient(circle at 96% 6%, rgba(120,96,52,0.08), transparent 40%),
                        linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.10) 24%, rgba(255,255,255,.04) 42%, transparent 58%, rgba(255,255,255,.035) 76%, rgba(255,255,255,.10) 100%);
                    mix-blend-mode: screen;
                    opacity: .9;
                }
                .rvh-savedate-dup-tile {
                    position: relative;
                    width: 100%;
                    max-width: 1240px;
                    border-radius: 10px;
                    padding: 56px 58px 62px;
                    background: radial-gradient(ellipse at 50% 14%, var(--paper-center) 0%, var(--paper-mid) 54%, var(--paper-edge) 100%);
                    box-shadow:
                        0 2px 4px rgba(120, 96, 52, 0.10),
                        0 14px 28px -12px rgba(120, 96, 52, 0.24),
                        0 48px 90px -38px rgba(112, 78, 62, 0.42),
                        0 80px 120px -60px rgba(112, 78, 62, 0.30),
                        inset 0 1px 0 rgba(255,255,255,0.9);
                    overflow: hidden;
                }
                .rvh-savedate-dup-tile::before {
                    content: '';
                    position: absolute; inset: 0;
                    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sd)'/%3E%3C/svg%3E");
                    opacity: 0.28; mix-blend-mode: multiply; pointer-events: none; z-index: 1;
                }
                .rvh-savedate-dup-tile::after {
                    content: '';
                    position: absolute; inset: 0;
                    background:
                        radial-gradient(circle at 8% 92%, rgba(120,96,52,0.10), transparent 42%),
                        radial-gradient(circle at 96% 6%, rgba(120,96,52,0.08), transparent 40%);
                    pointer-events: none; z-index: 1;
                }
                .rvh-savedate-duplicate .rvh-std-dup-head {
                    position: relative;
                    z-index: 6;
                    text-align: center;
                    max-width: 680px;
                    margin: 0 auto 26px;
                }
                .rvh-savedate-duplicate .rvh-std-sub,
                .rvh-savedate-duplicate .rvh-std-flourish { margin-left: auto; margin-right: auto; }
                .rvh-savedate-duplicate .rvh-std-dup-grid {
                    position: relative;
                    z-index: 6;
                    display: grid;
                    grid-template-columns: minmax(260px, 0.62fr) minmax(430px, 0.95fr);
                    gap: 40px;
                    align-items: start;
                    justify-content: center;
                }
                .rvh-savedate-duplicate .rvh-std-letter { text-align: center; }
                .rvh-savedate-duplicate .rvh-step-primary { margin-left: auto; margin-right: auto; }
                .rvh-savedate-duplicate .rvh-env-stage { margin: -10px auto 0; }
        
                @media (max-width: 1080px) {
                    .rvh-savedate-duplicate .rvh-std-dup-grid { grid-template-columns: 1fr; gap: 26px; }
                    .rvh-savedate-duplicate .rvh-std-letter { order: 2; }
                    .rvh-savedate-duplicate .rvh-strip-theatre { order: 1; }
                }
                @media (max-width: 560px) {
                    .rvh-savedate-dup-tile { padding: 46px 22px 52px; }
                    .rvh-savedate-duplicate .rvh-std-dup-head { margin-bottom: 20px; }
                }

        /* ================= RIVAAH WEDDING MOODBOARD ================= */
        .rvh-mood-section {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 90px 24px 110px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: transparent;
        }
        .rvh-mood-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: 0.72rem;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 14px;
        }
        .rvh-mood-heading {
            font-family: 'Cinzel', serif;
            font-weight: 400;
            font-size: clamp(1.5rem, 3.2vw, 2.4rem);
            line-height: 1.25;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--brand-color);
            text-align: center;
            margin: 0;
            text-shadow: 0 1px 0 rgba(255,255,255,0.7);
        }
        .rvh-mood-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: clamp(0.95rem, 1.6vw, 1.12rem);
            color: var(--text-dark);
            opacity: 0.72;
            text-align: center;
            max-width: 560px;
            margin: 14px auto 6px;
        }
        .rvh-mood-rule {
            width: 120px; height: 1px; margin: 20px auto 6px;
            background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent);
        }

        /* ---- the open journal, floating with depth ---- */
        .rvh-mood-stage {
            position: relative;
            width: 100%;
            max-width: 1340px;
            aspect-ratio: 1340 / 1010;
            margin: 52px auto 0;
            perspective: 1600px;
        }
        .rvh-mood-stage::after { /* soft cast shadow on the paper below */
            content: '';
            position: absolute;
            left: 22%; right: 22%;
            bottom: 5%;
            height: 120px;
            background: radial-gradient(ellipse at 50% 50%, rgba(60,44,30,0.30) 0%, rgba(60,44,30,0.12) 45%, rgba(60,44,30,0) 75%);
            filter: blur(10px);
            z-index: 0;
        }
        .rvh-mood-book {
            position: absolute;
            z-index: 1;
            top: 1.5%;
            left: 50%;
            width: 51%;
            margin-left: -25.5%;
            transform: rotate(-1.2deg);
            animation: moodFloat 9s ease-in-out infinite;
        }
        @keyframes moodFloat {
            0%,100% { transform: rotate(-1.2deg) translateY(0); }
            50%     { transform: rotate(-0.7deg) translateY(-10px); }
        }
        .rvh-mood-book > img.rvh-mood-book-img {
            width: 100%; height: auto;
            display: block;
            filter:
                drop-shadow(0 26px 34px rgba(58,42,28,0.34))
                drop-shadow(0 60px 90px rgba(58,42,28,0.22))
                drop-shadow(0 2px 3px rgba(58,42,28,0.18));
        }

        /* ---- items scattered on the pages ---- */
        .rvh-mood-items { position: absolute; inset: 0; }
        .rvh-mood-item {
            position: absolute;
            transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
            will-change: transform;
        }
        .rvh-mood-item:hover { z-index: 30 !important; }

        .rvh-mood-photo {
            background: #fffdf8;
            padding: 11px 11px 38px;
            border-radius: 2px;
            box-shadow: 0 10px 20px rgba(58,42,28,0.26), 0 2px 4px rgba(58,42,28,0.18);
        }
        .rvh-mood-photo img {
            display: block; width: 100%; height: 100%;
            object-fit: cover;
            filter: saturate(0.96) contrast(1.02);
        }
        .rvh-mood-photo .rvh-cap {
            position: absolute; left: 0; right: 0; bottom: 9px;
            text-align: center;
            font-family: 'Caveat', cursive;
            font-size: 1.22rem;
            color: #6b5a49;
        }
        .rvh-mood-photo:hover { transform: var(--t, rotate(0deg)) scale(1.045) translateY(-4px); box-shadow: 0 18px 32px rgba(58,42,28,0.32); }

        /* washi tape strip */
        .rvh-tape {
            position: absolute; top: -15px; left: 50%;
            width: 92px; height: 28px;
            transform: translateX(-50%) rotate(-3deg);
            background: linear-gradient(180deg, rgba(226,205,166,0.85), rgba(200,175,132,0.75));
            box-shadow: 0 2px 4px rgba(58,42,28,0.18);
            opacity: 0.92;
        }
        .rvh-tape::before, .rvh-tape::after {
            content: ''; position: absolute; top: 0; bottom: 0; width: 6px;
            background: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 4px);
        }
        .rvh-tape::before { left: 0; } .rvh-tape::after { right: 0; }
        .rvh-tape.rvh-right { left: 78%; transform: translateX(-50%) rotate(6deg); }
        .rvh-tape.rvh-left  { left: 22%; transform: translateX(-50%) rotate(-8deg); }

        /* handwritten memo notes */
        .rvh-mood-memo {
            background: linear-gradient(180deg, #fffefb 0%, #f7f1e5 100%);
            padding: 18px 20px 19px;
            font-family: 'Caveat', cursive;
            font-size: clamp(1.05rem, 1.45vw, 1.42rem);
            line-height: 1.25;
            color: #4a3c30;
            box-shadow: 0 8px 16px rgba(58,42,28,0.2), 0 1px 2px rgba(58,42,28,0.16);
            border-radius: 1px;
        }
        .rvh-mood-memo::after { /* torn-ish bottom edge */
            content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 5px;
            background: radial-gradient(circle at 4px -2px, #f7f1e5 4px, transparent 4px) repeat-x;
            background-size: 9px 8px;
        }
        .rvh-mood-memo .rvh-pin-note { display: block; font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.26em; color: var(--gold); margin-bottom: 5px; text-transform: uppercase; }
        .rvh-mood-memo:hover { transform: var(--t, rotate(0deg)) scale(1.05); }

        /* pressed serif label */
        .rvh-mood-label {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: clamp(0.95rem, 1.25vw, 1.2rem);
            color: #4a3c30;
            background: rgba(255,253,248,0.92);
            padding: 9px 18px;
            box-shadow: 0 6px 14px rgba(58,42,28,0.16);
        }

        /* paper clip + thread flourishes */
        .rvh-clip {
            position: absolute; top: -18px; left: 50%;
            width: 16px; height: 40px;
            transform: translateX(-50%) rotate(9deg);
            border: 2.5px solid #c9b489;
            border-radius: 10px;
            border-bottom-color: transparent;
            box-shadow: 0 2px 3px rgba(58,42,28,0.2);
        }
        .rvh-mood-ink {
            position: absolute;
            font-family: 'Great Vibes', cursive;
            color: rgba(108,21,28,0.5);
            font-size: clamp(1rem, 1.6vw, 1.5rem);
            pointer-events: none;
        }
        .rvh-mood-dot { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff, #e6d7b8 60%, #c7b189); box-shadow: 0 2px 4px rgba(58,42,28,0.25); }

        /* ---- CTA ---- */
        .rvh-mood-cta-wrap { margin-top: 34px; text-align: center; }
        .rvh-mood-cta {
            appearance: none; border: none; cursor: pointer;
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: #fffaf0;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            padding: 17px 40px;
            border-radius: 999px;
            box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
            transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
            position: relative;
        }
        .rvh-mood-cta::after {
            content: ''; position: absolute; inset: 4px;
            border: 1px solid rgba(226,205,166,0.5);
            border-radius: 999px;
            pointer-events: none;
        }
        .rvh-mood-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); }
        .rvh-mood-cta-hint { margin-top: 14px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.9rem; color: var(--text-dark); opacity: 0.6; }

        /* ---- placements (desktop) ---- */
        .rvh-mi-1 { width: 21%; top: 2%;  left: 3%;    --t: rotate(-5deg);   transform: rotate(-5deg);   z-index: 6; }
        .rvh-mi-1 img { height: 240px; }
        .rvh-mi-2 { width: 18%; top: 60%; left: 4%;    --t: rotate(4deg);    transform: rotate(4deg);    z-index: 8; }
        .rvh-mi-2 img { height: 196px; }
        .rvh-mi-3 { width: 18%; top: 30%; left: 18.5%; --t: rotate(3.5deg);  transform: rotate(3.5deg);  z-index: 7; }
        .rvh-mi-3 img { height: 200px; }
        .rvh-mi-4 { width: 19%; top: 3%;  left: 39.5%; --t: rotate(-3deg);   transform: rotate(-3deg);   z-index: 15; }
        .rvh-mi-4 img { height: 212px; }
        .rvh-mi-5 { width: 16%; top: 62%; left: 33%;   --t: rotate(5deg);    transform: rotate(5deg);    z-index: 16; }
        .rvh-mi-5 img { height: 176px; }
        .rvh-mi-6 { width: 21%; top: 40%; left: 74%;   --t: rotate(-4.5deg); transform: rotate(-4.5deg); z-index: 8; }
        .rvh-mi-6 img { height: 230px; }
        .rvh-mi-7 { width: 17%; top: 4%;  left: 79%;   --t: rotate(6deg);    transform: rotate(6deg);    z-index: 6; }
        .rvh-mi-7 img { height: 182px; }

        .rvh-mm-1 { width: 17%; top: 38%; left: 0.5%;  --t: rotate(-4deg);   transform: rotate(-4deg);   z-index: 12; }
        .rvh-mm-2 { width: 16%; top: 87%; left: 21%;   --t: rotate(3deg);    transform: rotate(3deg);    z-index: 12; }
        .rvh-mm-3 { width: 17%; top: 31%; left: 58.5%; --t: rotate(-2.5deg); transform: rotate(-2.5deg); z-index: 17; }
        .rvh-mm-4 { width: 16%; top: 66%; left: 52.5%;   --t: rotate(5deg);    transform: rotate(5deg);    z-index: 17; }
        .rvh-mm-5 { width: 17%; top: 74%; left: 72%;   --t: rotate(2deg);    transform: rotate(2deg);    z-index: 12; }
        .rvh-ml-1 { top: 2%;  left: 60%; --t: rotate(-2deg);  transform: rotate(-2deg);  z-index: 18; }
        .rvh-ml-2 { top: 90%; left: 41%; --t: rotate(2.5deg); transform: rotate(2.5deg); z-index: 18; }

        .rvh-ink-1 { top: 15%; left: 29%; transform: rotate(-8deg); }
        .rvh-ink-2 { top: 95%; left: 8%; transform: rotate(6deg); }
        .rvh-dot-1 { width: 10px; height: 10px; top: 18%; left: 35%; }
        .rvh-dot-2 { width: 8px; height: 8px; top: 70%; left: 19%; }
        .rvh-dot-3 { width: 9px; height: 9px; top: 48%; left: 69%; }

        /* ---- film reel strip ---- */
        .rvh-mood-reel-wrap { position: relative; width: 100%; max-width: 780px; margin: 44px auto 0; display: flex; justify-content: center; }
        .rvh-mood-reel {
            position: relative;
            display: flex;
            gap: 10px;
            padding: 22px 26px;
            background: #16130f;
            transform: rotate(-1.4deg);
            box-shadow: 0 18px 34px rgba(58,42,28,0.34), 0 3px 6px rgba(58,42,28,0.24);
        }
        .rvh-mood-reel::before, .rvh-mood-reel::after {
            content: '';
            position: absolute; left: 0; right: 0; height: 14px;
            background-image: radial-gradient(#f7f2e6 0 4.4px, transparent 5px);
            background-size: 22px 14px;
            background-repeat: repeat-x;
            background-position: 6px center;
        }
        .rvh-mood-reel::before { top: 4px; }
        .rvh-mood-reel::after { bottom: 4px; }
        .rvh-mood-reel .rvh-frame { width: 152px; height: 112px; overflow: hidden; background: #fffdf8; }
        .rvh-mood-reel .rvh-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95) contrast(1.02); }
        .rvh-mood-reel-cap { font-family: 'Caveat', cursive; font-size: 1.2rem; color: #6b5a49; text-align: center; margin-top: 18px; }

        @media (max-width: 900px) {
            .rvh-mood-section { padding: 64px 14px 84px; }
            .rvh-mood-item .rvh-cap { font-size: 0.8rem; }
            .rvh-mood-photo { padding: 5px 5px 20px; }
            .rvh-mi-1 img, .rvh-mi-3 img, .rvh-mi-4 img, .rvh-mi-6 img { height: 116px; }
            .rvh-mi-2 img, .rvh-mi-5 img, .rvh-mi-7 img { height: 96px; }
            .rvh-mood-memo { padding: 9px 10px 10px; font-size: 0.86rem; }
            .rvh-mood-label { font-size: 0.78rem; padding: 5px 10px; }
            .rvh-tape { width: 52px; height: 17px; top: -9px; }
            .rvh-mood-stage::after { bottom: 8%; height: 54px; }
            .rvh-mood-book { width: 56%; margin-left: -28%; }
            .rvh-mood-reel { gap: 7px; padding: 17px 18px; }
            .rvh-mood-reel .rvh-frame { width: 104px; height: 78px; }
        }
        @media (max-width: 560px) {
            .rvh-mood-stage { aspect-ratio: 1 / 1.12; }
            .rvh-mood-book { width: 62%; margin-left: -31%; }
            .rvh-mood-memo { font-size: 0.72rem; padding: 7px 8px 8px; }
            .rvh-mood-memo .rvh-pin-note { display: none; }
            .rvh-mood-photo { padding: 4px 4px 4px; }
            .rvh-mood-photo .rvh-cap { display: none; }
            .rvh-mi-1 img, .rvh-mi-3 img, .rvh-mi-4 img, .rvh-mi-6 img { height: 78px; }
            .rvh-mi-2 img, .rvh-mi-5 img, .rvh-mi-7 img { height: 64px; }
            .rvh-mood-reel { gap: 5px; padding: 14px 14px; }
            .rvh-mood-reel .rvh-frame { width: 74px; height: 56px; }
            .rvh-mood-reel-cap { font-size: 1rem; }
            .rvh-mood-cta { padding: 14px 26px; font-size: 0.68rem; letter-spacing: 0.16em; }
            .rvh-ink-1, .rvh-ink-2 { display: none; }
        }

    
        /* ================= BRIDE CHECKLIST / BASKET ================= */
        .rvh-bc-section {
            position: relative;
            width: 100%;
            z-index: 2;
            padding: 110px 20px 130px;
            background: transparent;
            overflow: hidden;
        }
        .rvh-bc-section::before,
        .rvh-bc-section::after {
            content: '';
            position: absolute;
            width: 320px; height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(181,149,92,0.16), transparent 70%);
            pointer-events: none;
        }
        .rvh-bc-section::before { top: -90px; left: -110px; }
        .rvh-bc-section::after { bottom: -120px; right: -100px; }


        /* Embedded moodboard/checklist sections */
        .rvh-embedded-section {
            position: relative;
            width: 100%;
            background: transparent;
        }
        .rvh-section-iframe {
            display: block;
            width: 100%;
            border: 0;
            background: transparent;
            position: relative;
            z-index: 1;
        }

        /* ================= LOOKBOOK SECTION (final section, image left / copy right) ================= */
        .rvh-lookbook-section {
            position: relative;
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            padding: 120px 24px 130px;
        }
        /* Soft depth separator before the lookbook section — anchored to the top of
           #lookbookSection itself (not the checklist iframe above it), so it always
           sits at the checklist→lookbook boundary even while the checklist section
           grows taller when its results panel expands. */
        #lookbookSection::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 120px;
            pointer-events: none;
            z-index: 2;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(92, 73, 53, 0.16) 0%, rgba(92, 73, 53, 0.08) 26%, rgba(92, 73, 53, 0.02) 48%, rgba(92, 73, 53, 0) 74%),
                linear-gradient(to bottom, rgba(255, 248, 239, 0.28) 0%, rgba(255, 248, 239, 0.12) 20%, rgba(255, 248, 239, 0) 100%);
        }
        .rvh-lookbook-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
        }
        .rvh-lookbook-image-wrap {
            position: relative;
        }
        .rvh-lookbook-image-wrap img {
            width: 100%;
            height: auto;
            display: block;
            filter:
                drop-shadow(0 10px 10px rgba(40,24,14,.16))
                drop-shadow(0 26px 24px rgba(40,24,14,.20))
                drop-shadow(0 54px 48px rgba(40,24,14,.20));
        }
        .rvh-lookbook-content { text-align: left; }
        .rvh-lookbook-kicker {
            font-family: 'Cinzel', serif;
            font-size: .7rem;
            letter-spacing: .35em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 14px;
        }
        .rvh-lookbook-heading {
            font-family: 'Cinzel', serif;
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--brand-color);
            font-size: clamp(1.6rem, 3vw, 2.6rem);
            line-height: 1.2;
            margin: 0 0 18px;
        }
        .rvh-lookbook-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .92rem;
            line-height: 1.65;
            color: rgba(59,51,45,.75);
            max-width: 440px;
            margin: 0 0 32px;
        }
        .rvh-lookbook-cta {
            display: inline-block;
            position: relative;
            overflow: hidden;
            padding: 14px 34px;
            border: 0;
            border-radius: 999px;
            cursor: pointer;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            color: #fffaf0;
            font-family: 'Cinzel', serif;
            font-size: .8rem;
            letter-spacing: .24em;
            text-transform: uppercase;
            box-shadow: 0 14px 26px rgba(108,21,28,.32), inset 0 1px 0 rgba(255,255,255,.22);
            transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, letter-spacing .25s ease;
        }
        .rvh-lookbook-cta::before {
            content: '';
            position: absolute; inset: 4px;
            border-radius: 999px;
            border: 1px solid rgba(226,205,166,.5);
            pointer-events: none;
        }
        .rvh-lookbook-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 34px rgba(108,21,28,.38), inset 0 1px 0 rgba(255,255,255,.28);
        }
        @media (max-width: 900px) {
            .rvh-lookbook-grid { grid-template-columns: 1fr; gap: 40px; }
            .rvh-lookbook-content { text-align: center; }
            .rvh-lookbook-sub { margin-left: auto; margin-right: auto; }
            .rvh-lookbook-image-wrap { max-width: 460px; margin: 0 auto; }
        }
        @media (max-width: 680px) {
            .rvh-lookbook-section { padding: 76px 20px 72px; }
            #lookbookSection::before { height: 76px; }
            .rvh-lookbook-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
        }
        @media (max-width: 480px) {
            .rvh-lookbook-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
        }
        /* Soft depth separator before the lookbook section — anchored to the top of
           #lookbookSection itself (not the checklist iframe above it), so it always
           sits at the checklist→lookbook boundary even while the checklist section
           grows taller when its results panel expands. */
        #lookbookSection::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 120px;
            pointer-events: none;
            z-index: 2;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(92, 73, 53, 0.16) 0%, rgba(92, 73, 53, 0.08) 26%, rgba(92, 73, 53, 0.02) 48%, rgba(92, 73, 53, 0) 74%),
                linear-gradient(to bottom, rgba(255, 248, 239, 0.28) 0%, rgba(255, 248, 239, 0.12) 20%, rgba(255, 248, 239, 0) 100%);
        }

        .rvh-bc-head { position: relative; text-align: center; z-index: 2; }
        .rvh-bc-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: 0.68rem;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 16px;
        }
        .rvh-bc-heading {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.6rem, 3.4vw, 2.7rem);
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--brand-color);
            line-height: 1.3;
        }
        .rvh-bc-script {
            font-family: 'Great Vibes', cursive;
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            color: #8d7748;
            margin-bottom: 4px;
        }
        .rvh-bc-rule {
            width: 190px; height: 1px; margin: 22px auto 18px;
            background: linear-gradient(to right, transparent, var(--gold), transparent);
        }
        .rvh-bc-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 1.02rem;
            color: rgba(59,51,45,0.66);
            max-width: 620px;
            margin: 0 auto;
            line-height: 1.75;
        }

        /* ===== instructions ===== */
        .rvh-bc-howto {
            position: relative;
            z-index: 3;
            max-width: 940px;
            margin: 40px auto 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            align-items: center;
            background: rgba(255,253,248,0.72);
            border: 1px solid rgba(181,149,92,0.38);
            border-radius: 999px;
            padding: 16px 26px;
            box-shadow: 0 14px 34px rgba(84,62,36,0.10), inset 0 0 0 1px rgba(255,255,255,0.6);
            backdrop-filter: blur(4px);
        }
        .rvh-bc-howto-step {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            padding: 6px 22px;
            text-align: left;
        }
        .rvh-bc-howto-step + .rvh-bc-howto-step { border-left: 1px solid rgba(181,149,92,0.32); }
        .rvh-bc-howto-num {
            width: 26px; height: 26px;
            flex: 0 0 auto;
            border-radius: 50%;
            border: 1px solid var(--gold);
            color: var(--brand-color);
            font-family: 'Cinzel', serif;
            font-size: 0.66rem;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.7);
        }
        .rvh-bc-howto-text {
            font-family: 'Playfair Display', serif;
            font-size: 0.9rem;
            color: rgba(59,51,45,0.8);
            line-height: 1.5;
        }
        .rvh-bc-howto-text b {
            font-family: 'Cinzel', serif;
            font-size: 0.72rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--brand-color);
            display: block;
            margin-bottom: 3px;
            font-weight: 600;
        }

        /* stage — spread across the full viewport */
        .rvh-bc-stage {
            position: relative;
            width: 100%;
            max-width: 1560px;
            margin: 44px auto 0;
            min-height: 78vh;
            aspect-ratio: 1560 / 740;
            z-index: 2;
        }
        .rvh-bc-stage::before {
            /* soft ground so the pieces feel placed, not stuck */
            content: '';
            position: absolute;
            left: 50%; bottom: 4%;
            width: 78%; height: 22%;
            transform: translateX(-50%);
            background: radial-gradient(ellipse at center, rgba(84,62,36,0.16) 0%, rgba(84,62,36,0.06) 46%, transparent 74%);
            filter: blur(20px);
            pointer-events: none;
        }
        .rvh-bc-stage-script {
            position: absolute;
            left: 50%; top: 48%;
            max-width: 340px;
            white-space: normal;
            transform: translate(-50%, -50%);
            text-align: center;
            font-family: 'Great Vibes', cursive;
            font-size: clamp(1.7rem, 4vw, 3.3rem);
            color: rgba(141,119,72,0.34);
            line-height: 1.3;
            pointer-events: none;
            z-index: 1;
        }
        .rvh-bc-stage-script small {
            display: block;
            font-family: 'Cinzel', serif;
            font-size: 0.62rem;
            letter-spacing: 0.4em;
            text-transform: uppercase;
            color: rgba(141,119,72,0.5);
            margin-top: 14px;
        }

        /* checklist items — big, tilted, scattered */
        .rvh-bc-item {
            position: absolute;
            display: block;
            cursor: pointer;
            background: none; border: 0; padding: 0;
            z-index: 4;
            -webkit-tap-highlight-color: transparent;
        }
        .rvh-bc-cut {
            position: relative;
            width: 100%;
            transform: rotate(var(--tilt, 0deg));
            transition: transform 0.55s cubic-bezier(.2,.8,.2,1);
        }
        .rvh-bc-cut img {
            display: block;
            width: 100%;
            filter: drop-shadow(0 18px 26px rgba(76,56,32,0.28)) drop-shadow(0 42px 54px rgba(76,56,32,0.16));
            transition: filter 0.45s ease;
            animation: bcDrift var(--dur, 9s) ease-in-out infinite;
            animation-delay: var(--delay, 0s);
        }
        @keyframes bcDrift {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-9px); }
        }
        .rvh-bc-item:hover { z-index: 8; }
        .rvh-bc-item:hover .rvh-bc-cut { transform: rotate(calc(var(--tilt, 0deg) * 0.3)) translateY(-10px) scale(1.05); }
        .rvh-bc-item:hover .rvh-bc-cut img { filter: drop-shadow(0 28px 36px rgba(76,56,32,0.34)) drop-shadow(0 54px 70px rgba(76,56,32,0.18)); }
        .rvh-bc-item:focus-visible { outline: none; }
        .rvh-bc-item:focus-visible .rvh-bc-tag { border-color: var(--brand-color); }

        .rvh-bc-tag {
            position: absolute;
            top: 40%;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 12px 24px 12px 15px;
            border-radius: 999px;
            background: rgba(255,253,248,0.96);
            border: 1px solid rgba(181,149,92,0.5);
            box-shadow: 0 12px 26px rgba(84,62,36,0.14), inset 0 0 0 1px rgba(255,255,255,0.7);
            backdrop-filter: blur(3px);
            transition: all 0.4s ease;
            z-index: 7;
            transform: rotate(calc(var(--tilt, 0deg) * -0.25));
        }
        .rvh-bc-item.rvh-side-l .rvh-bc-tag { right: 96%; }
        .rvh-bc-item.rvh-side-r .rvh-bc-tag { left: 96%; }
        .rvh-bc-hook {
            position: absolute;
            top: 50%;
            width: 54px;
            color: var(--gold);
            opacity: 0.8;
            pointer-events: none;
        }
        .rvh-bc-item.rvh-side-l .rvh-bc-hook { right: 88%; margin-right: 4px; }
        .rvh-bc-item.rvh-side-r .rvh-bc-hook { left: 88%; margin-left: 4px; transform: scaleX(-1); }
        .rvh-bc-hook svg { width: 100%; height: auto; display: block; }

        .rvh-bc-tick {
            position: relative;
            width: 24px; height: 24px;
            border-radius: 50%;
            border: 1.5px solid var(--gold);
            flex: 0 0 auto;
            transition: all 0.35s ease;
            box-shadow: 0 0 0 0 rgba(181,149,92,0.45);
            animation: bcInvite 2.6s ease-in-out infinite;
        }
        @keyframes bcInvite {
            0%, 100% { box-shadow: 0 0 0 0 rgba(181,149,92,0.42); }
            60% { box-shadow: 0 0 0 9px rgba(181,149,92,0); }
        }
        .rvh-bc-tick::after {
            content: '';
            position: absolute;
            left: 7px; top: 4px;
            width: 7px; height: 13px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(45deg) scale(0);
            transition: transform 0.4s cubic-bezier(.2,1.6,.4,1);
        }
        .rvh-bc-label {
            font-family: 'Cinzel', serif;
            font-size: 0.82rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-dark);
            white-space: nowrap;
        }
        .rvh-bc-hint-tap {
            display: block;
            margin-top: 4px;
            font-family: 'Caveat', cursive;
            text-transform: none;
            letter-spacing: 0;
            font-size: 0.94rem;
            color: rgba(141,119,72,0.85);
        }
        .rvh-bc-item.rvh-is-checked .rvh-bc-hint-tap { color: rgba(253,251,246,0.75); }
        .rvh-bc-item.rvh-is-checked .rvh-bc-tag {
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 55%, #521015 100%);
            border-color: rgba(226,205,166,0.65);
            box-shadow: 0 14px 28px rgba(108,21,28,0.30), inset 0 0 0 1px rgba(226,205,166,0.35);
        }
        .rvh-bc-item.rvh-is-checked .rvh-bc-tick {
            background: var(--gold);
            border-color: var(--gold-light);
            animation: none;
        }
        .rvh-bc-item.rvh-is-checked .rvh-bc-tick::after { transform: rotate(45deg) scale(1); }
        .rvh-bc-item.rvh-is-checked .rvh-bc-label { color: #FDFBF6; }
        .rvh-bc-item.rvh-is-checked .rvh-bc-cut img {
            filter: drop-shadow(0 20px 30px rgba(108,21,28,0.26)) saturate(1.08);
        }
        /* the cute tick animation */
        .rvh-bc-item.rvh-just-ticked .rvh-bc-cut { animation: bcPop 0.75s cubic-bezier(.2,1.5,.35,1); }
        @keyframes bcPop {
            0% { transform: rotate(var(--tilt,0deg)) scale(1); }
            32% { transform: rotate(calc(var(--tilt,0deg) * 0.2)) scale(1.14) translateY(-14px); }
            62% { transform: rotate(var(--tilt,0deg)) scale(0.97) translateY(2px); }
            100% { transform: rotate(var(--tilt,0deg)) scale(1); }
        }
        .rvh-bc-item.rvh-just-ticked .rvh-bc-tag { animation: bcTagPop 0.6s cubic-bezier(.2,1.5,.35,1); }
        @keyframes bcTagPop {
            0%, 100% { transform: rotate(calc(var(--tilt,0deg) * -0.25)) scale(1); }
            40% { transform: rotate(calc(var(--tilt,0deg) * -0.25)) scale(1.09); }
        }
        .rvh-bc-spark {
            position: absolute;
            left: 50%; top: 42%;
            width: 12px; height: 12px;
            pointer-events: none;
            z-index: 9;
            font-family: 'Playfair Display', serif;
            font-size: 15px;
            color: var(--gold);
            animation: bcSpark 0.95s ease-out forwards;
        }
        @keyframes bcSpark {
            0% { opacity: 0; transform: translate(0,0) scale(0.3) rotate(0deg); }
            18% { opacity: 1; }
            100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1.1) rotate(var(--sr)); }
        }
        .rvh-bc-ring {
            position: absolute;
            left: 50%; top: 45%;
            width: 40px; height: 40px;
            margin: -20px 0 0 -20px;
            border-radius: 50%;
            border: 1.5px solid rgba(181,149,92,0.7);
            pointer-events: none;
            z-index: 8;
            animation: bcRing 0.85s ease-out forwards;
        }
        @keyframes bcRing {
            0% { transform: scale(0.4); opacity: 0.9; }
            100% { transform: scale(3.4); opacity: 0; }
        }

        /* item placements — spread right across the stage */
        .rvh-bc-i1 { left: 3%;    top: 6%;   width: 17%;  --tilt: -6deg;  --dur: 9s;   --delay: 0s; }
        .rvh-bc-i2 { left: 30%;   top: 2%;   width: 18%;  --tilt: 5deg;   --dur: 10.5s; --delay: .7s; }
        .rvh-bc-i3 { left: 62%;   top: 4%;   width: 23%;  --tilt: -4deg;  --dur: 9.6s; --delay: 1.3s; }
        .rvh-bc-i4 { left: 8%;    top: 62%;  width: 20%;  --tilt: 7deg;   --dur: 11s;  --delay: .4s; }
        .rvh-bc-i5 { left: 52%;   top: 64%;  width: 24%;  --tilt: -5deg;  --dur: 10s;  --delay: 1s; }

        /* central cta */
        .rvh-bc-actions {
            position: relative;
            z-index: 3;
            text-align: center;
            margin-top: 34px;
        }
        .rvh-bc-progress {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 0.95rem;
            color: rgba(59,51,45,0.6);
            margin-bottom: 18px;
        }
        .rvh-bc-progress b { font-style: normal; color: var(--brand-color); }
        .rvh-bc-cta {
            appearance: none; border: none; cursor: pointer;
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: #fffaf0;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            padding: 17px 40px;
            border-radius: 999px;
            box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
            transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
            position: relative;
        }
        .rvh-bc-cta::after {
            content: ''; position: absolute; inset: 4px;
            border: 1px solid rgba(226,205,166,0.5);
            border-radius: 999px;
            pointer-events: none;
        }
        .rvh-bc-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); }
        .rvh-bc-cta-hint {
            font-family: 'Caveat', cursive;
            font-size: 1.1rem;
            color: rgba(59,51,45,0.6);
            margin-top: 14px;
        }

        /* results */
        .rvh-bc-results {
            position: relative;
            z-index: 3;
            max-width: 1180px;
            margin: 0 auto;
            padding-top: 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.9s ease, opacity 0.7s ease, padding-top 0.6s ease;
        }
        .rvh-bc-results.rvh-is-open {
            max-height: 1400px;
            opacity: 1;
            padding-top: 70px;
        }
        .rvh-bc-res-head { text-align: center; margin-bottom: 34px; }
        .rvh-bc-res-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.05rem, 2vw, 1.4rem);
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--brand-color);
        }
        .rvh-bc-res-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 0.98rem;
            color: rgba(59,51,45,0.62);
            margin-top: 10px;
        }
        .rvh-bc-stagewrap {
            position: relative;
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 74px;
        }
        .rvh-bc-viewport {
            position: relative;
            height: 560px;
            overflow: hidden;
            perspective: 1400px;
        }
        .rvh-bc-card {
            position: absolute;
            left: 50%;
            top: 18px;
            width: 430px;
            max-width: 84%;
            padding: 46px 40px 40px;
            border-radius: 4px;
            text-align: center;
            background:
                radial-gradient(120% 100% at 50% 0%, #FFFDF8 0%, #FBF5E9 100%);
            border: 1px solid rgba(181,149,92,0.42);
            box-shadow: 0 26px 50px rgba(84,62,36,0.20), inset 0 0 0 6px rgba(255,255,255,0.6);
            transition: transform 0.75s cubic-bezier(.2,.8,.2,1), opacity 0.6s ease, filter 0.6s ease;
            will-change: transform;
        }
        .rvh-bc-card::before {
            content: '';
            position: absolute; inset: 12px;
            border: 1px solid rgba(181,149,92,0.35);
            border-radius: 2px;
            pointer-events: none;
        }
        .rvh-bc-card::after {
            content: '';
            position: absolute; left: 50%; top: 0;
            width: 66px; height: 22px;
            transform: translate(-50%, -52%) rotate(-2deg);
            background: linear-gradient(135deg, rgba(226,205,166,0.75), rgba(181,149,92,0.55));
            box-shadow: 0 4px 10px rgba(84,62,36,0.16);
        }
        .rvh-bc-card.rvh-is-side {
            filter: blur(3.6px) saturate(0.86);
            opacity: 0.5;
            box-shadow: 0 16px 30px rgba(84,62,36,0.12);
        }
        .rvh-bc-card.rvh-is-side-2 {
            filter: blur(6px) saturate(0.76);
            opacity: 0.26;
        }
        .rvh-bc-card.rvh-is-far { opacity: 0; pointer-events: none; }
        .rvh-bc-card-kicker {
            font-family: 'Cinzel', serif;
            font-size: 0.6rem;
            letter-spacing: 0.36em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 14px;
        }
        .rvh-bc-card-name {
            font-family: 'Cinzel', serif;
            font-size: 1.18rem;
            letter-spacing: 2.4px;
            text-transform: uppercase;
            font-weight: 600;
            color: var(--brand-color);
            line-height: 1.4;
        }
        .rvh-bc-card-rule {
            width: 96px; height: 1px; margin: 18px auto 22px;
            background: linear-gradient(to right, transparent, var(--gold), transparent);
        }
        .rvh-bc-card-mark {
            font-family: 'Playfair Display', serif;
            font-size: 2.6rem;
            line-height: 0.6;
            color: rgba(181,149,92,0.55);
            display: block;
            margin-bottom: 10px;
        }
        .rvh-bc-card-quote {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 1.06rem;
            line-height: 1.85;
            color: rgba(59,51,45,0.86);
        }
        .rvh-bc-card-by {
            display: block;
            margin-top: 22px;
            font-family: 'Cinzel', serif;
            font-size: 0.68rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--brand-color);
        }
        .rvh-bc-card-role {
            display: block;
            margin-top: 7px;
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 0.82rem;
            color: rgba(59,51,45,0.55);
        }
        .rvh-bc-nav button {
            position: absolute;
            top: 46%;
            transform: translateY(-50%);
            width: 46px; height: 46px;
            border-radius: 50%;
            background: rgba(255,253,248,0.94);
            border: 1px solid rgba(181,149,92,0.55);
            color: var(--brand-color);
            font-size: 1rem;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(84,62,36,0.14);
            transition: all 0.35s ease;
            z-index: 5;
        }
        .rvh-bc-nav button:hover { background: var(--brand-color); color: #FDFBF6; border-color: var(--brand-color); }
        #bcPrev { left: 0; }
        #bcNext { right: 0; }
        .rvh-bc-dots {
            display: flex; justify-content: center; gap: 10px;
            margin-top: 26px;
        }
        .rvh-bc-dots span {
            width: 7px; height: 7px; border-radius: 50%;
            background: rgba(181,149,92,0.35);
            cursor: pointer;
            transition: all 0.35s ease;
        }
        .rvh-bc-dots span.rvh-is-on { background: var(--brand-color); transform: scale(1.35); }
        .rvh-bc-expert { text-align: center; margin-top: 34px; }
        .rvh-bc-expert-btn {
            appearance: none; border: none; cursor: pointer;
            position: relative;
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: #fffaf0;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            padding: 17px 40px;
            border-radius: 999px;
            box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
            transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
        }
        .rvh-bc-expert-btn::after {
            content: ''; position: absolute; inset: 4px;
            border: 1px solid rgba(226,205,166,0.5);
            border-radius: 999px;
            pointer-events: none;
        }
        .rvh-bc-expert-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); }
        .rvh-bc-expert-note {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 0.88rem;
            color: rgba(59,51,45,0.55);
            margin-top: 12px;
        }

        @media (max-width: 1024px) {
            .rvh-bc-label { font-size: 0.66rem; letter-spacing: 0.12em; }
            .rvh-bc-tag { padding: 9px 16px 9px 11px; gap: 9px; }
            .rvh-bc-hint-tap { font-size: 0.8rem; }
            .rvh-bc-hook { width: 38px; }
            .rvh-bc-stagewrap { padding: 0 46px; }
            .rvh-bc-howto { border-radius: 26px; padding: 14px 10px; }
            .rvh-bc-howto-step { padding: 8px 16px; }
            .rvh-bc-howto-text { font-size: 0.82rem; }
        }
        @media (max-width: 760px) {
            .rvh-bc-section { padding: 80px 16px 100px; }
            .rvh-bc-stage {
                aspect-ratio: auto;
                min-height: 0;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 30px 14px;
                margin-top: 34px;
            }
            .rvh-bc-stage::before { display: none; }
            .rvh-bc-stage-script { display: none; }
            .rvh-bc-howto { grid-template-columns: 1fr; gap: 2px; border-radius: 24px; }
            .rvh-bc-label { white-space: normal; font-size: 0.62rem; text-align: left; }
            .rvh-bc-tag { padding: 8px 14px 8px 10px; }
            .rvh-bc-howto-step + .rvh-bc-howto-step { border-left: 0; border-top: 1px solid rgba(181,149,92,0.28); }
            .rvh-bc-item {
                position: relative;
                left: auto; right: auto; top: auto; bottom: auto;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
            }
            .rvh-bc-item.rvh-side-l .rvh-bc-tag, .rvh-bc-item.rvh-side-r .rvh-bc-tag, .rvh-bc-i5 .rvh-bc-tag, .rvh-bc-tag {
                position: relative;
                top: auto; left: auto; right: auto;
                transform: none;
            }
            .rvh-bc-hook { display: none; }
            .rvh-bc-i1, .rvh-bc-i2, .rvh-bc-i3, .rvh-bc-i4, .rvh-bc-i5 { left: auto; top: auto; }
            .rvh-bc-i5 { grid-column: 1 / -1; width: 58%; margin: 0 auto; }
            .rvh-bc-viewport { height: 470px; perspective: none; }
            .rvh-bc-stagewrap { padding: 0 8px; }
            .rvh-bc-nav button { top: auto; bottom: -6px; width: 40px; height: 40px; }
            .rvh-bc-card { padding: 34px 24px 30px; }
            .rvh-bc-card-quote { font-size: 0.98rem; }
            .rvh-bc-results.rvh-is-open { max-height: 1600px; padding-top: 50px; }
        }


        /* --- SECTION 1: RIVAAH SIGNATURE HERO --- */
        /* Banner variant of the first section. The client's deck replaces the
           composed pinboard hero on the community pages with a single 2:1
           campaign banner, so the section keeps its id (#heroSection, which the
           in-page links and scroll handlers still target) and drops the 100vh
           min-height, padding and centring that only made sense for the board. */
        .rvh-r1h-hero.rvh-r1h-is-banner{min-height:0;padding:0;display:block;overflow:visible}
        .rvh-r1h-hero.rvh-r1h-is-banner .rvh-r1h-banner-img{display:block;width:100%;height:auto}
        .rvh-r1h-hero.rvh-r1h-is-banner .rvh-r1h-banner-link{display:block;width:100%}
        .rvh-r1h-hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:58px 54px 50px;background:transparent;width:100%;z-index:2}
        .rvh-r1h-frame{position:absolute;inset:28px;border:1px solid rgba(181,149,92,.55);pointer-events:none}
        .rvh-r1h-frame::before,.rvh-r1h-frame::after{content:"✦";position:absolute;color:rgba(181,149,92,.65);font-size:12px;background:#f7f0e4;padding:2px 5px}
        .rvh-r1h-frame::before{top:-10px;left:22px}.rvh-r1h-frame::after{right:22px;bottom:-10px}
        .rvh-r1h-frame-inner{
            position:absolute; inset:34px; pointer-events:none; padding:1.6px; border-radius:1px;
            background:linear-gradient(115deg,rgba(181,149,92,.22) 0%,#fdf3d4 10%,#e9c273 22%,#8a6a34 34%,#c9a25a 46%,#fdf3d4 58%,rgba(181,149,92,.20) 70%,#e9c273 82%,#fdf3d4 94%,rgba(181,149,92,.22) 100%);
            background-size:260% 260%;
            -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
            -webkit-mask-composite:xor; mask-composite:exclude;
            animation:r1hShine 7s linear infinite;
        }
        @keyframes r1hShine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
        .rvh-r1h-decor{position:absolute;width:15px;height:22px;border-radius:70% 35% 70% 40%;background:linear-gradient(145deg,#edb7b3,#ce7d7b);opacity:.62;box-shadow:0 5px 8px rgba(105,64,52,.12)}
        .rvh-r1h-d1{left:7%;top:9%;transform:rotate(-25deg)}.rvh-r1h-d2{left:6%;bottom:12%;transform:rotate(22deg)}.rvh-r1h-d3{right:7%;bottom:9%;transform:rotate(-22deg)}

        /* three columns: the hero postcard, the signature, the pinned cluster */
        .rvh-r1h-board{
            position:relative;z-index:2;width:min(1420px,100%);
            display:grid;
            grid-template-columns:minmax(300px,1.02fr) minmax(230px,.66fr) minmax(320px,1.02fr);
            gap:52px;align-items:center;
        }

        /* ---- THE POSTCARD FRAME : one treatment, every image ---- */
        .rvh-r1h-card{
            position:relative;
            background:linear-gradient(176deg,#FFFEFB 0%,#FBF6EC 100%);
            padding:13px 13px 17px;
            border:1px solid rgba(101,74,52,.10);
            border-radius:4px;
            box-shadow:
                0 3px 6px rgba(35,22,13,.20),
                0 16px 24px rgba(45,28,17,.24),
                0 40px 60px rgba(40,24,14,.32),
                inset 0 0 0 1px rgba(255,255,255,.78);
            transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
        }
        .rvh-r1h-card:hover{
            box-shadow:
                0 5px 8px rgba(35,22,13,.24),
                0 22px 32px rgba(45,28,17,.28),
                0 54px 76px rgba(40,24,14,.36),
                inset 0 0 0 1px rgba(255,255,255,.78);
        }
        .rvh-r1h-card-photo{position:relative;overflow:hidden;border-radius:2px;background:#efe7d8}
        .rvh-r1h-card-photo::after{
            content:"";position:absolute;inset:0;border-radius:2px;
            border:1.5px solid rgba(230,208,163,.92);
            box-shadow:0 0 0 1px rgba(120,90,40,.16), inset 0 0 14px rgba(255,241,199,.20);
            pointer-events:none;z-index:4;
        }
        .rvh-r1h-card-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
        .rvh-r1h-pin{
            position:absolute;left:50%;top:-9px;transform:translateX(-50%);
            width:18px;height:18px;border-radius:50%;
            background:radial-gradient(circle at 35% 30%,#e8c97d 0 20%,#bd8d3d 42%,#775520 100%);
            box-shadow:0 3px 4px rgba(58,36,20,.28);z-index:6;
        }

        /* ---- LEFT : the hero postcard ---- */
        .rvh-r1h-left{display:flex;justify-content:center;min-width:0}
        .rvh-r1h-hero-card{width:100%;max-width:440px;transform:rotate(-1.6deg)}
        .rvh-r1h-hero-card:hover{transform:rotate(-.4deg) translateY(-8px)}
        .rvh-r1h-hero-card .rvh-r1h-card-photo{aspect-ratio:.84/1.1}
        .rvh-r1h-hero-card .rvh-r1h-card-photo img{transform-origin:center;animation:r1hBreathe 9s ease-in-out infinite}
        @keyframes r1hBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

        /* ---- CENTRE : the signature and the way in ---- */
        .rvh-r1h-centre{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:0 4px}
        .rvh-r1h-eyebrow{
            font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.34em;
            text-transform:uppercase;color:#8d7748;margin-bottom:22px;
        }
        .rvh-r1h-logo{margin:0;line-height:0}
        .rvh-r1h-logo img{
            display:block;width:100%;max-width:300px;max-height:104px;
            height:auto;object-fit:contain;margin:0 auto;
        }
        /* used only if the hosted lockup cannot be reached. Scoped to
           :not([hidden]) rather than the bare class: the class selector and
           the UA stylesheet's [hidden]{display:none} have equal specificity,
           so this rule's own display:block was winning the cascade (author
           styles load after the UA sheet) and showing the wordmark
           permanently underneath the real logo image, regardless of whether
           the JS fallback ever removed the hidden attribute. */
        .rvh-r1h-wordmark:not([hidden]){
            display:block;line-height:1.16;color:var(--brand-color);
            font-family:'Cinzel',serif;font-weight:500;letter-spacing:7px;
            font-size:clamp(24px,2vw,36px);text-transform:uppercase;
        }
        .rvh-r1h-divider{width:190px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:24px auto 14px;position:relative}
        .rvh-r1h-divider::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-53%);background:#f7f0e4;color:var(--gold);padding:0 8px;font-size:14px}
        .rvh-r1h-tagline{
            font-family:'Playfair Display',serif;font-style:italic;
            font-size:.95rem;line-height:1.6;color:rgba(59,51,45,.8);
            max-width:26ch;margin:0 auto 28px;
        }
        .rvh-r1h-explore{padding:14px 34px;border:0;border-radius:999px;background:linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);color:#fffaf0;font-family:'Cinzel',serif;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;position:relative;cursor:pointer;box-shadow:0 14px 26px rgba(108,21,28,.32), inset 0 1px 0 rgba(255,255,255,.22);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,letter-spacing .25s ease}
        .rvh-r1h-explore::before{content:"";position:absolute;inset:4px;border:1px solid rgba(226,205,166,.5);border-radius:999px;pointer-events:none}
        .rvh-r1h-explore:hover{transform:translateY(-2px);box-shadow:0 20px 34px rgba(108,21,28,.38), inset 0 1px 0 rgba(255,255,255,.28)}
        .rvh-r1h-explore:focus-visible{outline:2px solid rgba(181,149,92,.95);outline-offset:4px}

        /* ---- RIGHT : three postcards and a note, pinned ---- */
        /* the cluster is scattered across the full height of the board rather than
           packed into a tight block -- each piece keeps its own tilt and offset */
        .rvh-r1h-right{
            display:grid;grid-template-columns:1fr 1fr;
            gap:74px 54px;max-width:560px;margin-inline:auto;min-width:0;
            align-content:center;
        }
        .rvh-r1h-right .rvh-r1h-card,.rvh-r1h-note{min-width:0}
        .rvh-r1h-right .rvh-r1h-card-photo{aspect-ratio:.84/1}
        .rvh-r1h-r1{width:98%;justify-self:start;transform:rotate(-3.2deg) translate(-14px,-58px)}
        .rvh-r1h-r1:hover{transform:rotate(-1.4deg) translate(-14px,-70px)}
        .rvh-r1h-r2{width:86%;justify-self:end;transform:rotate(3.6deg) translate(26px,28px)}
        .rvh-r1h-r2:hover{transform:rotate(1.6deg) translate(26px,16px)}
        .rvh-r1h-r3{width:94%;justify-self:end;transform:rotate(2.4deg) translate(20px,-30px)}
        .rvh-r1h-r3:hover{transform:rotate(1deg) translate(20px,-42px)}
        .rvh-r1h-note{
            position:relative;display:flex;align-items:center;justify-content:center;
            text-align:center;padding:30px 20px;
            background:linear-gradient(176deg,#FFFEFB 0%,#FBF6EC 100%);
            border:1px solid rgba(101,74,52,.10);border-radius:4px;
            font-family:'Caveat',cursive;font-size:1.45rem;line-height:1.2;color:#4f3b35;
            box-shadow:0 3px 6px rgba(35,22,13,.14),0 14px 22px rgba(45,28,17,.16),0 34px 50px rgba(40,24,14,.20),inset 0 0 0 1px rgba(255,255,255,.78);
            transform:rotate(-2.4deg) translate(-10px,48px);
            transition:transform .45s cubic-bezier(.2,.8,.2,1);
            width:92%;justify-self:start;
        }
        .rvh-r1h-note:hover{transform:rotate(-1deg) translate(-10px,36px)}
        .rvh-r1h-note::after{content:"";position:absolute;inset:8px;border:1px solid rgba(181,149,92,.28);border-radius:2px;pointer-events:none}
        .rvh-r1h-note-text{position:relative;z-index:1}

        .rvh-r1h-mobile-cta { display: none; }
        @media(min-width:1181px){ .rvh-r1h-right{min-height:640px} }
        @media(max-width:1180px){
            .rvh-r1h-board{grid-template-columns:1fr;gap:40px;justify-items:center}
            .rvh-r1h-right{gap:44px 34px}
            .rvh-r1h-centre{order:-1}
            .rvh-r1h-left,.rvh-r1h-right{width:min(560px,100%)}
            .rvh-r1h-hero-card{max-width:100%}
        }
        @media(max-width:680px){
            .rvh-r1h-hero{padding:44px 28px 38px;min-height:auto}
            .rvh-r1h-frame{inset:14px}.rvh-r1h-frame-inner{inset:20px}
            .rvh-r1h-board{gap:26px}
            .rvh-r1h-card{padding:9px 9px 12px}
            /* same width, 30% shorter: .84/1.1 -> .84/.77 keeps the width
               component fixed and scales only the height component by .7 */
            .rvh-r1h-hero-card .rvh-r1h-card-photo{aspect-ratio:.84/.77}
            /* two photos + the note, all in one row - the note takes the third
               slot that r3 used to occupy (r3 itself is hidden at this width).
               align-items:start keeps each cell's own natural height instead
               of stretching the photos to match the note's (likely taller,
               once its text wraps in a column this narrow). */
            /* pulled up over the main photo's bottom edge (negative margin) so
               the row overlays it, per the reference composition, instead of
               sitting in its own clear space below it. */
            .rvh-r1h-right{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:12px;max-width:100%;margin-top:-64px;position:relative;z-index:3}
            .rvh-r1h-r1,.rvh-r1h-r2{width:100%;justify-self:stretch;transform:none;grid-row:1}
            .rvh-r1h-r1{grid-column:1}
            .rvh-r1h-r2{grid-column:2}
            .rvh-r1h-r3{display:none}
            .rvh-r1h-r1:hover,.rvh-r1h-r2:hover{transform:translateY(-6px)}
            /* matches .rvh-r1h-card's own outer aspect ratio (photo ratio .84/1
               plus its 9px/12px top/bottom padding nets out to almost exactly
               the same figure), so the note's box comes out the same size as
               r1/r2 without hardcoding a width-dependent pixel height. */
            .rvh-r1h-note{grid-column:3;grid-row:1;width:100%;aspect-ratio:.84/1;display:flex;align-items:center;justify-self:stretch;transform:none;padding:10px 8px;font-size:.58rem;line-height:1.25;text-align:center;white-space:normal;overflow:hidden}
            .rvh-r1h-note:hover{transform:translateY(-6px)}
            .rvh-r1h-note .rvh-r1h-pin{display:none}
            .rvh-r1h-wordmark{letter-spacing:4px;font-size:24px}
            .rvh-r1h-logo img{max-height:78px}
            /* the eyebrow stays put, above the main photo - only the logo/
               tagline/Explore move after the photos, via the .rvh-r1h-mobile-cta
               copy below (which lands after .rvh-r1h-right in the markup). */
            .rvh-r1h-centre { padding-bottom: 0; }
            .rvh-r1h-centre > .rvh-r1h-logo, .rvh-r1h-centre > .rvh-r1h-divider, .rvh-r1h-centre > .rvh-r1h-tagline, .rvh-r1h-centre > .rvh-r1h-explore { display: none; }
            /* logo left, Explore right (same row); tagline drops to its own
               full-width row below, centered. flex-wrap + explicit order
               rather than reordering the markup, since the fallback-wordmark
               script and .rvh-r1h-logo's own styling don't care about DOM
               position, only that logo/tagline/button are still siblings. */
            .rvh-r1h-mobile-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 14px; margin-top: 4px; }
            .rvh-r1h-mobile-cta .rvh-r1h-logo { order: 1; margin: 0; flex: 0 0 auto; }
            .rvh-r1h-mobile-cta .rvh-r1h-tagline { order: 2; flex: 1 1 160px; min-width: 0; text-align: left; font-size: .78rem; line-height: 1.35; margin: 0; }
            .rvh-r1h-mobile-cta .rvh-r1h-divider { order: 3; flex-basis: 100%; margin: 18px auto; }
            .rvh-r1h-mobile-cta .rvh-r1h-explore { order: 4; flex-basis: 100%; margin: 0 auto; padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
        }
        @media(max-width:480px){.rvh-r1h-explore{padding:14px 26px;font-size:.68rem;letter-spacing:.16em}}
        @media (prefers-reduced-motion: reduce){
            .rvh-r1h-frame-inner{animation:none}
            .rvh-r1h-hero-card .rvh-r1h-card-photo img{animation:none}
            .rvh-r1h-card,.rvh-r1h-note{transition:none}
        }

        /* ============================================================
           SAVE THE DATE — MOBILE REFINEMENT (approved composition)
           Layout only; the flip/swap JS (initSaveDate) is untouched -
           same 1.15s 3D flip, same at-front/at-back strip swap timer,
           same validation/countdown/share flow. Appears after every
           earlier .rvh-savedate-section rule so it wins the cascade at
           these widths without touching desktop/tablet above 680px.
           ============================================================ */
        @media (max-width: 680px) {
            .rvh-root, body { min-width: 0; }
            /* background-attachment:fixed is buggy on mobile Safari, so we drop
               to scroll here - but scroll changes what background-size:cover
               measures against: instead of the viewport, it now covers the
               body's full (very tall, multi-section) scrollable height, which
               blows the paper texture up to many times its intended size.
               An explicit tile size + repeat keeps the grain scale correct
               regardless of page height, matching section6-checklist.html's
               approach for the same bug. */
            .rvh-root { background-attachment: scroll; background-size: 900px auto; background-repeat: repeat; }
            .rvh-main-wrapper { min-height: 100vh; overflow: hidden; }
            .rvh-savedate-section { width: 100%; max-width: 100%; padding: 42px 10px 72px; }
            .rvh-std-flip { width: 100%; max-width: 390px; margin-top: 0; perspective: 2400px; perspective-origin: 50% 42%; }
            .rvh-std-face { padding: 38px 14px 42px; border-radius: 14px; }
            .rvh-std-frame { inset: 10px; }
            .rvh-std-frame::after { inset: 6px; }
            .rvh-std-corner { width: 46px; height: 46px; }
            .rvh-sc-tl { top: 10px; left: 10px; }
            .rvh-sc-tr { top: 10px; right: 10px; }
            .rvh-sc-bl { bottom: 10px; left: 10px; }
            .rvh-sc-br { bottom: 10px; right: 10px; }
            .rvh-std-corner::after { font-size: 10px; }
            .rvh-std-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
            .rvh-std-letter { order: 1; width: 100%; text-align: center; }
            .rvh-std-title { font-size: clamp(1.48rem, 7vw, 1.82rem); line-height: 1.18; letter-spacing: 2.2px; }
            .rvh-std-sub { max-width: 310px; margin: 9px auto 0; font-size: clamp(.84rem, 3.7vw, .98rem); line-height: 1.55; }
            .rvh-std-flourish { margin: 17px auto 0; }
            .rvh-step-primary { width: 100%; margin-left: auto; margin-right: auto; }
            .rvh-env-stage { width: 100%; max-width: 358px; margin: 10px auto 0; }
            .rvh-env-card-hint { left: 13.7%; right: 11.8%; top: 19.1%; font-size: clamp(.52rem, 2.55vw, .64rem); line-height: 1.28; white-space: nowrap; }
            .rvh-env-paper { left: 14.2%; right: 14.2%; top: 30.8%; gap: 4px; }
            .rvh-dtile-label { font-size: .40rem; letter-spacing: 1.5px; margin-bottom: 3px; }
            .rvh-dtile-inner { border-radius: 7px; }
            .rvh-dtile-input { font-size: clamp(1rem, 5vw, 1.30rem); padding: 7px 1px; }
            .rvh-dtile-slash { font-size: .80rem; padding-bottom: 10px; }
            .rvh-env-card-action { top: 53.5%; }
            .rvh-env-card-cta { min-width: 0; padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
            .rvh-strip-theatre { order: 2; position: relative; width: 100%; height: 112px; margin: 4px auto 0; display: block; overflow: visible; }
            .rvh-photo-strip { top: 50%; left: 50%; width: min(94%, 344px); padding: 8px 8px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; box-shadow: 3px 10px 22px -10px rgba(110,90,60,.34); }
            .rvh-photo-strip img.rvh-strip-photo { display: block; width: 100%; height: 78px; object-fit: cover; margin: 0; }
            .rvh-photo-strip::before, .rvh-photo-strip::after { left: 0; right: 0; top: auto; bottom: auto; width: auto; height: 8px; background-image: radial-gradient(circle at 8px 50%, var(--paper-mid) 4px, transparent 4.5px); background-size: 16px 8px; background-repeat: repeat-x; }
            .rvh-photo-strip::before { top: -4px; }
            .rvh-photo-strip::after { bottom: -4px; }
            .rvh-clip-img { width: 48px; top: -25px; }
            .rvh-strip-caption { left: 6px; right: 6px; bottom: 3px; font-size: .72rem; line-height: 1; }
            .rvh-back-inner { padding: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
            .rvh-back-card-column { order: 1; width: 100%; max-width: 350px; justify-self: auto; }
            .rvh-back-inner .rvh-back-strips, .rvh-back-strips { order: 2; width: 100%; height: 112px; margin: 4px auto 0; transform: none; }
            .rvh-back-foot { margin-top: 5px; }
            .rvh-back-foot .rvh-btn-seal.rvh-ghost { font-size: .78rem; }
            .rvh-back-card-shell, .rvh-back-card-content, .rvh-countdown, .rvh-stage-card, .rvh-stage-actions { min-width: 0; }
            .rvh-sd-share-overlay { padding: 14px; }
            .rvh-sd-share-card { padding: 30px 18px 24px; }
        }
        @media (max-width: 380px) {
            .rvh-savedate-section { padding-left: 8px; padding-right: 8px; }
            .rvh-std-face { padding-left: 12px; padding-right: 12px; }
            .rvh-env-stage { max-width: 336px; }
            .rvh-photo-strip { width: 93%; }
            .rvh-photo-strip img.rvh-strip-photo { height: 72px; }
            .rvh-strip-theatre, .rvh-back-strips { height: 105px; }
        }
        @media (max-width: 680px) {
            .rvh-savedate-section { padding: 34px 10px 58px; }
            .rvh-std-flip { max-width: 390px; }
            .rvh-std-face { padding: 30px 12px 28px; border-radius: 13px; }
            /* less side padding than the front face: the back card's own
               width (via .rvh-back-card-column) drives its height through the
               card image's fixed aspect-ratio, so trimming this margin is
               what actually grows the card enough for the share button to
               land inside it, instead of just widening empty gutters. */
            .rvh-std-face.rvh-back { padding-top: 24px; padding-bottom: 24px; padding-left: 6px; padding-right: 6px; }
            .rvh-std-frame { inset: 9px; }
            .rvh-std-frame::after { inset: 6px; }
            .rvh-sc-tl { top: 9px; left: 9px; }
            .rvh-sc-tr { top: 9px; right: 9px; }
            .rvh-sc-bl { bottom: 9px; left: 9px; }
            .rvh-sc-br { bottom: 9px; right: 9px; }
            .rvh-std-grid { gap: 2px; }
            .rvh-std-title { font-size: clamp(1.46rem, 7vw, 1.78rem); letter-spacing: 2.5px; margin-bottom: 0; }
            .rvh-std-sub { max-width: 304px; margin-top: 8px; font-size: clamp(.82rem, 3.55vw, .94rem); line-height: 1.52; }
            .rvh-std-flourish { margin-top: 14px; margin-bottom: 0; }
            .rvh-env-stage { max-width: 362px; margin-top: 5px; }
            .rvh-env-card-hint { left: 16%; right: 16%; top: 19.15%; text-align: center; white-space: nowrap; font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(.54rem, 2.35vw, .62rem); color: rgba(83, 52, 48, .62); letter-spacing: .1px; }
            .rvh-env-paper { left: 15.2%; right: 15.2%; top: 30.7%; gap: 5px; }
            .rvh-dtile-label { font-size: .39rem; letter-spacing: 1.65px; margin-bottom: 4px; color: rgba(143, 101, 68, .74); }
            .rvh-dtile-inner { border-radius: 8px; border-color: rgba(181,149,92,.48); background: linear-gradient(178deg, rgba(255,254,250,.98), rgba(248,241,229,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 10px -8px rgba(118,89,60,.46); }
            .rvh-dtile-input { font-family: 'Playfair Display',serif; font-size: clamp(1.12rem, 5.4vw, 1.38rem); font-weight: 500; padding: 7px 1px 8px; letter-spacing: .4px; }
            .rvh-dtile-slash { font-size: .78rem; padding-bottom: 10px; opacity: .76; }
            .rvh-env-card-action { top: 53.25%; }
            .rvh-env-card-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
            /* Two horizontal strips, always visible, trading upper/lower positions with
               the same at-front/at-back swap the JS already drives on an interval and on
               click - only the mobile transform differs. Matched to desktop's own
               transition (1.5s cubic-bezier(.62,.01,.24,1)) for the same roll/alternate
               feel, and given a top-left transform-origin (matching the clip's
               position, moved off-center below) so the rotation reads as the strip
               swinging from that one pinned corner rather than spinning in place. */
            .rvh-strip-theatre, .rvh-back-strips { position: relative; width: 100%; height: 164px; margin: 4px auto 0; overflow: visible; }
            .rvh-photo-strip {
                top: 50%; left: 50%; width: min(92%, 342px); padding: 8px 8px 18px;
                grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px;
                box-shadow: 3px 11px 24px -10px rgba(104,80,57,.36);
                transform-origin: 24% 6%;
                /* smoother + snappier than the desktop curve: that one holds
                   almost still for the first half before rushing the rest of
                   the way, which reads as a stutter at this faster mobile
                   swap cadence - an ease-out with no near-flat start keeps
                   the motion visibly continuous throughout. */
                transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1s ease, filter 1s ease;
            }
            .rvh-photo-strip img.rvh-strip-photo { height: 74px; margin: 0; border-radius: 1px; }
            .rvh-photo-strip.rvh-at-front { transform: translate(-53%, -72%) rotate(-1.45deg); z-index: 3; filter: saturate(1.02); }
            .rvh-photo-strip.rvh-at-back { transform: translate(-47%, -24%) rotate(1.35deg) scale(.965); z-index: 2; filter: saturate(.94) brightness(.985); box-shadow: 2px 8px 18px -12px rgba(104,80,57,.32); }
            .rvh-clip-img { width: 46px; top: -24px; left: 24%; }
            .rvh-strip-caption { bottom: 3px; font-size: .70rem; }
            .rvh-back-inner { padding: 0; gap: 0; align-items: center; }
            .rvh-back-card-column { width: 98%; max-width: 366px; }
            .rvh-back-card-shell { filter: drop-shadow(0 3px 4px rgba(85,60,40,.08)) drop-shadow(0 16px 24px rgba(85,60,40,.14)) drop-shadow(0 30px 40px rgba(85,60,40,.09)); }
            .rvh-back-card-content { padding: 6.5% 7.6% 6.5%; }
            .rvh-sealed-eyebrow { margin-top: 8px; font-size: .40rem; letter-spacing: 2.35px; }
            .rvh-sealed-main-date { margin-top: 7px; font-size: clamp(1.42rem, 6.9vw, 1.76rem); line-height: 1; letter-spacing: .1px; }
            .rvh-sealed-forever { margin-top: 7px; font-size: clamp(1.08rem, 5vw, 1.38rem); line-height: 1.02; }
            .rvh-sealed-rule { width: 30%; margin-top: 8px; }
            .rvh-countdown { width: 90%; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 10px; }
            .rvh-count-card { width: auto; padding: 7px 2px 6px; border-radius: 9px; background: linear-gradient(168deg, #FBE8EC 0%, #F7DEE4 100%); box-shadow: 0 2px 4px rgba(150,104,116,.07), 0 8px 14px -12px rgba(150,104,116,.28), inset 0 1px 0 rgba(255,255,255,.88); }
            .rvh-count-card::before { inset: 3px; border-radius: 7px; }
            .rvh-count-card::after { inset: 5px; border-radius: 5px; opacity: .82; }
            .rvh-count-num { font-size: clamp(1.08rem, 5.1vw, 1.34rem); }
            .rvh-count-rule { width: 13px; margin: 5px auto 4px; }
            .rvh-count-label { font-size: clamp(.27rem, 1.22vw, .33rem); letter-spacing: .75px; }
            .rvh-stage-card { margin-top: 10px; padding: 10px 2px 4px; }
            .rvh-stage-card::before { width: 30%; }
            .rvh-stage-chapter { font-size: .72rem; line-height: 1; margin-bottom: 3px; }
            .rvh-stage-name { font-size: clamp(1.22rem, 5.9vw, 1.52rem); line-height: 1.05; max-width: 98%; margin-top: 1px; }
            .rvh-stage-line { margin: 5px auto 6px; width: 28%; }
            .rvh-stage-timeframe { font-size: clamp(.74rem, 3.15vw, .86rem); margin-bottom: 3px; }
            .rvh-stage-message, .rvh-stage-hint { display: block; max-width: 94%; font-size: clamp(.59rem, 2.55vw, .69rem); line-height: 1.4; }
            .rvh-stage-message { margin-bottom: 2px; }
            .rvh-stage-hint { margin-top: 16px; }
            .rvh-stage-actions { width: 90%; gap: 6px; margin-top: 20px; padding-top: 0; }
            .rvh-stage-cta { min-height: 31px; padding: 7px 10px; font-size: .40rem; letter-spacing: 1.25px; }
            .rvh-stage-cta.rvh-primary { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
            .rvh-stage-cta.rvh-share { width: 84%; padding: 10px 26px; font-size: .68rem; letter-spacing: .16em; }
            .rvh-back-foot { margin-top: 2px; transform: translateY(-18px); position: relative; z-index: 6; }
            .rvh-back-foot .rvh-btn-seal.rvh-ghost { font-size: .80rem; padding: 3px 2px; }
            .rvh-back-inner .rvh-back-strips, .rvh-back-strips { margin-top: 12px; height: 164px; }
        }
        @media (max-width: 360px) {
            .rvh-std-face { padding-left: 10px; padding-right: 10px; }
            .rvh-env-stage { max-width: 338px; }
            .rvh-photo-strip { width: 91%; }
            .rvh-photo-strip img.rvh-strip-photo { height: 68px; }
            .rvh-strip-theatre, .rvh-back-strips { height: 152px; }
            .rvh-back-card-column { width: 100%; }
            .rvh-countdown { width: 92%; gap: 4px; }
            .rvh-count-label { letter-spacing: .45px; font-size: .26rem; }
            .rvh-stage-name { font-size: 1.18rem; }
            .rvh-stage-message, .rvh-stage-hint { font-size: .56rem; }
        }


        /* ==========================================================================
           SECTION 8 : JOIN THE RIVAAH COMMUNITY  ("The Sealed Reply")
           Built on the Save The Date architecture: one big paper tile that flips,
           with a second card sitting on it. Front = the reply card the bride writes
           on. Back = the certificate of membership, sealed.
           ========================================================================== */
        .rvh-rc-section {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 96px 24px 150px;
            z-index: 10;
            /* the flip resizes .rvh-rc-flip-inner's height via JS right before the
               transform runs; without this, the browser's scroll-anchoring can
               mistake that shift for a reason to re-anchor scroll position onto
               a neighbouring section, producing a visible jump mid-flip. */
            overflow-anchor: none;
        }
        /* The separator that used to sit here, at the lookbook -> certificate
           boundary, is removed by request. */

        /* ---------- THE PAPER TILE (identical language to the Save The Date tile) ---------- */
        .rvh-rc-flip {
            position: relative;
            width: 100%;
            max-width: 1240px;
            perspective: 2400px;
            perspective-origin: 50% 42%;
        }
        .rvh-rc-flip-inner {
            position: relative;
            width: 100%;
            transform-style: preserve-3d;
            will-change: transform;
            transform: rotateY(0deg) translateZ(0);
            transition: transform 1.15s cubic-bezier(0.45, 0.05, 0.15, 1);
        }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-flip-inner { transform: rotateY(180deg); }
        .rvh-rc-flip::after {
            content: '';
            position: absolute;
            left: 6%; right: 6%; bottom: -34px;
            height: 46px;
            border-radius: 50%;
            background: radial-gradient(ellipse at 50% 50%, rgba(112, 78, 62, 0.20) 0%, rgba(112, 78, 62, 0.07) 48%, transparent 74%);
            filter: blur(10px);
            pointer-events: none;
            z-index: -1;
        }
        .rvh-rc-face {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            min-height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform-style: preserve-3d;
            will-change: transform;
            transform: translateZ(0);
            border-radius: 10px;
            padding: 56px 58px 62px;
            background: radial-gradient(ellipse at 50% 14%, var(--paper-center) 0%, var(--paper-mid) 54%, var(--paper-edge) 100%);
            box-shadow:
                0 2px 4px rgba(120, 96, 52, 0.10),
                0 14px 28px -12px rgba(120, 96, 52, 0.24),
                0 48px 90px -38px rgba(112, 78, 62, 0.42),
                0 80px 120px -60px rgba(112, 78, 62, 0.30),
                inset 0 1px 0 rgba(255,255,255,0.9);
            overflow: hidden;
            transition: box-shadow .9s ease;
        }
        .rvh-rc-face.rvh-front { display: flex; align-items: center; }
        .rvh-rc-face.rvh-front > .rvh-rc-grid { width: 100%; }
        .rvh-rc-face.rvh-back { transform: rotateY(180deg); pointer-events: none; }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-face.rvh-back  { pointer-events: auto; }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-face.rvh-front { pointer-events: none; }
        .rvh-rc-face::before {
            content: '';
            position: absolute; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='rc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23rc)'/%3E%3C/svg%3E");
            opacity: .28; mix-blend-mode: multiply; pointer-events: none; z-index: 1;
        }
        .rvh-rc-face::after {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(circle at 8% 92%, rgba(120,96,52,.10), transparent 42%),
                radial-gradient(circle at 96% 6%, rgba(120,96,52,.08), transparent 40%);
            pointer-events: none; z-index: 1;
        }
        .rvh-rc-frame {
            position: absolute; inset: 18px;
            border: 1px solid rgba(181,149,92,.5);
            border-radius: 3px;
            pointer-events: none; z-index: 3;
        }
        .rvh-rc-frame::after {
            content: '';
            position: absolute; inset: 7px;
            border: 1px solid rgba(181,149,92,.2);
            border-radius: 2px;
        }
        .rvh-rc-corner {
            position: absolute;
            width: 70px; height: 70px;
            border: 0 solid rgba(181,149,92,.85);
            pointer-events: none; z-index: 4;
        }
        .rvh-rc-corner::after {
            content: '\2748';
            position: absolute;
            color: rgba(181,149,92,.9);
            font-size: 14px; line-height: 1;
        }
        .rvh-rc-corner.rvh-tl { top: 18px; left: 18px;  border-top-width: 2px; border-left-width: 2px; }
        .rvh-rc-corner.rvh-tl::after { top: 6px; left: 8px; }
        .rvh-rc-corner.rvh-tr { top: 18px; right: 18px; border-top-width: 2px; border-right-width: 2px; }
        .rvh-rc-corner.rvh-tr::after { top: 6px; right: 8px; }
        .rvh-rc-corner.rvh-bl { bottom: 18px; left: 18px;  border-bottom-width: 2px; border-left-width: 2px; }
        .rvh-rc-corner.rvh-bl::after { bottom: 6px; left: 8px; }
        .rvh-rc-corner.rvh-br { bottom: 18px; right: 18px; border-bottom-width: 2px; border-right-width: 2px; }
        .rvh-rc-corner.rvh-br::after { bottom: 6px; right: 8px; }
        .rvh-rc-motif {
            position: absolute; inset: 0;
            opacity: .16; z-index: 1; pointer-events: none;
            background-image:
                radial-gradient(circle at 12% 22%, rgba(181,149,92,.35) 0 2px, transparent 3px),
                radial-gradient(circle at 26% 68%, rgba(181,149,92,.3) 0 2px, transparent 3px),
                radial-gradient(circle at 8% 82%, rgba(181,149,92,.25) 0 2px, transparent 3px);
            background-size: 260px 260px;
        }

        .rvh-rc-grid {
            position: relative;
            z-index: 6;
            display: grid;
            grid-template-columns: minmax(260px, .88fr) minmax(400px, 1.04fr);
            gap: 44px 48px;
            /* the polaroid and the form sit beside each other on the second
               row, centred against each other; .rvh-rc-copy spans both columns
               above them. */
            align-items: center;
        }
        .rvh-rc-copy { grid-column: 1 / -1; }

        /* ---------- LEFT : the invitation ---------- */
        .rvh-rc-kicker {
            font-family: 'Cinzel', serif;
            font-size: .7rem;
            letter-spacing: .35em;
            text-transform: uppercase;
            color: #8d7748;
            margin-bottom: 14px;
        }
        .rvh-rc-heading {
            font-family: 'Cinzel', serif;
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--brand-color);
            font-size: clamp(1.6rem, 3vw, 2.6rem);
            line-height: 1.2;
            margin: 0;
        }
        .rvh-rc-copy .rvh-rc-rule { margin: 18px 0 22px; }
        .rvh-rc-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 1.02rem;
            line-height: 1.68;
            color: rgba(59,51,45,.82);
            max-width: 34ch;
            margin: 0;
        }

        /* ---------- LEFT : a polaroid lifted off the invitation ---------- */
        .rvh-rc-polaroid {
            position: relative;
            width: min(268px, 100%);
            /* the rotation pushes the visual bounding box ~16px left of the
               untransformed one, so nudge it back onto the heading's edge */
            margin: 0 0 0 16px;
            justify-self: start;
            padding: 13px 13px 52px;
            background: linear-gradient(180deg, #fffdf8 0%, #fdf6ea 100%);
            border: 1px solid rgba(181,149,92,.28);
            border-radius: 3px;
            transform: rotate(-3.2deg);
            transform-origin: 60% 100%;
            /* stacked, tightening shadows so it reads as sitting ON the paper
               rather than printed into it. No ::after ground shadow: the
               rotation makes this a stacking context, where a negative
               z-index child would paint over the polaroid's own background. */
            box-shadow:
                0 1px 2px rgba(120,96,52,.16),
                0 8px 14px -6px rgba(112,78,62,.30),
                0 26px 40px -20px rgba(112,78,62,.44);
            transition: transform 1s cubic-bezier(.22,1,.36,1), box-shadow 1s ease;
        }
        .rvh-rc-polaroid:hover {
            transform: rotate(-1.2deg) translateY(-7px);
            box-shadow:
                0 2px 3px rgba(120,96,52,.18),
                0 14px 22px -8px rgba(112,78,62,.34),
                0 40px 60px -24px rgba(112,78,62,.48);
        }
        .rvh-rc-polaroid-photo {
            aspect-ratio: 1 / 1;
            overflow: hidden;
            background: var(--paper-edge);
        }
        .rvh-rc-polaroid-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .rvh-rc-polaroid-caption {
            position: absolute;
            left: 13px; right: 13px; bottom: 14px;
            font-family: 'Caveat', cursive;
            font-size: 1.14rem;
            line-height: 1.2;
            color: rgba(59,51,45,.7);
            text-align: center;
        }
        /* the small note taped to the corner */
        .rvh-rc-polaroid-note {
            position: absolute;
            right: -44px; bottom: 84px;
            width: 104px;
            padding: 15px 9px 12px;
            background: linear-gradient(180deg, #fdf3da 0%, #f6e6c2 100%);
            border: 1px solid rgba(181,149,92,.34);
            border-radius: 2px;
            transform: rotate(7.5deg);
            box-shadow: 0 5px 12px -5px rgba(112,78,62,.5);
            font-family: 'Caveat', cursive;
            font-size: 1.02rem;
            line-height: 1.22;
            color: #8a5a2b;
            text-align: center;
        }
        .rvh-rc-polaroid-note::before {
            content: '';
            position: absolute;
            top: -8px; left: 50%;
            width: 46px; height: 16px;
            transform: translateX(-50%) rotate(-5deg);
            background: linear-gradient(180deg, rgba(236,219,186,.82), rgba(214,190,148,.66));
            border-left: 1px solid rgba(255,255,255,.55);
            border-right: 1px solid rgba(255,255,255,.55);
        }

        /* ---------- RIGHT : the reply card, sitting on the paper ---------- */
        .rvh-rc-stage { position: relative; width: 100%; max-width: 470px; margin: 0 auto; }
        .rvh-rc-tilt {
            position: relative;
            transform-origin: 50% 60%;
            transition: transform 1.1s cubic-bezier(.22,1,.36,1);
        }
        .rvh-rc-stage:hover .rvh-rc-tilt,
        .rvh-rc-stage:focus-within .rvh-rc-tilt { transform: translateY(-6px); }
        .rvh-rc-tilt::after {
            content: '';
            position: absolute;
            left: 8%; right: 8%; bottom: -3.5%;
            height: 9%;
            background: radial-gradient(50% 50% at 50% 50%, rgba(86,66,58,.34), rgba(86,66,58,0) 72%);
            filter: blur(7px);
            z-index: -1;
            transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
        }
        .rvh-rc-stage:hover .rvh-rc-tilt::after { transform: scale(1.04) translateY(4px); opacity: .85; }

        .rvh-rc-reply {
            position: relative;
            z-index: 2;
            border-radius: 12px;
            padding: 34px 34px 32px;
            background: linear-gradient(176deg, #FEFCF7 0%, #F8F2E7 100%);
            border: 1px solid rgba(181,149,92,.55);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.92),
                inset 0 -10px 18px -12px rgba(150,118,78,.35),
                0 1px 1px rgba(74,58,52,.22),
                0 8px 14px rgba(74,58,52,.20),
                0 30px 50px rgba(74,58,52,.28),
                0 60px 90px rgba(74,58,52,.20);
        }
        .rvh-rc-reply::after {
            content: '';
            position: absolute; inset: 9px;
            border: 1px solid rgba(181,149,92,.32);
            border-radius: 7px;
            pointer-events: none;
        }
        .rvh-rc-reply-inner { position: relative; z-index: 2; }

        .rvh-rc-rsvp {
            font-family: 'Cinzel', serif;
            font-size: .6rem;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: #8d7748;
            text-align: center;
        }
        .rvh-rc-flourish {
            width: min(34%, 110px); height: 1px; margin: 12px auto 26px;
            background: linear-gradient(to right, transparent, var(--gold), transparent);
            position: relative;
        }
        .rvh-rc-flourish::after {
            content: '\2756';
            position: absolute; top: -9px; left: 50%;
            transform: translateX(-50%);
            color: var(--gold); font-size: 11px;
        }
        /* ---- fields: their own text-input pattern (.rvh-sd-share-field) on the
               richer .rvh-dtile-inner surface, so this card reads as the same
               stationery as the Save The Date envelope ---- */
        .rvh-rc-field { margin-bottom: 18px; }
        .rvh-rc-label {
            display: block;
            font-family: 'Cinzel', serif;
            font-size: .56rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: rgba(59,51,45,.6);
            margin-bottom: 6px;
        }
        .rvh-rc-tile {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 14px;
            border-radius: 8px;
            background: rgba(255,255,255,.8);
            border: 1px solid rgba(181,149,92,.45);
            transition: border-color .5s ease;
        }
        .rvh-rc-tile:focus-within {
            border-color: rgba(108,21,28,.55);
        }
        .rvh-rc-code {
            font-family: 'Playfair Display', serif;
            font-size: .88rem;
            color: var(--text-dark);
            flex: none;
            padding-bottom: 1px;
        }
        .rvh-rc-input {
            flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box;
            border: none; background: transparent; outline: none;
            font-family: 'Playfair Display', serif;
            font-size: .88rem;
            line-height: 1.3;
            color: var(--text-dark);
            padding: 11px 2px;
            cursor: text;
        }
        .rvh-rc-input::placeholder { color: rgba(59,51,45,.4); }
        .rvh-rc-tile:focus-within { outline: none; }
        .rvh-rc-input:focus-visible { outline: none; }
        .rvh-rc-field:focus-within .rvh-rc-label { color: rgba(59,51,45,.85); }
        .rvh-rc-field.rvh-has-error .rvh-rc-tile { border-color: rgba(178,40,40,.75); }
        .rvh-rc-field.rvh-has-error .rvh-rc-label { color: rgba(150, 40, 48, .95); }

        .rvh-rc-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 2px 0 4px; padding: 6px 0; min-height: 44px; }
        .rvh-rc-consent input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
        .rvh-rc-tickbox {
            flex: none; width: 24px; height: 24px; margin-top: 1px;
            border: 1px solid rgba(181,149,92,.7);
            border-radius: 3px;
            display: grid; place-items: center;
            background: rgba(255,255,255,.6);
            transition: border-color .3s ease, background .3s ease;
        }
        .rvh-rc-tickbox svg { width: 16px; height: 16px; display: block; overflow: visible; }
        .rvh-rc-tickbox path {
            fill: none; stroke: var(--brand-color); stroke-width: 2.2;
            stroke-linecap: round; stroke-linejoin: round;
            stroke-dasharray: 30; stroke-dashoffset: 30;
            transition: stroke-dashoffset .38s cubic-bezier(.2,.8,.2,1);
        }
        .rvh-rc-consent input:checked ~ .rvh-rc-tickbox path { stroke-dashoffset: 0; }
        .rvh-rc-consent input:checked ~ .rvh-rc-tickbox { border-color: var(--gold); background: rgba(255,255,255,.92); }
        .rvh-rc-consent input:focus-visible ~ .rvh-rc-tickbox { outline: 2px solid rgba(181,149,92,.95); outline-offset: 3px; }
        .rvh-rc-consent-text { font-family: 'Caveat', cursive; font-size: 1.15rem; line-height: 1.3; color: rgba(59,51,45,.82); padding-top: 2px; }
        .rvh-rc-consent.rvh-has-error .rvh-rc-tickbox { border-color: rgba(150,40,48,.9); }

        .rvh-rc-actions { margin-top: 14px; text-align: center; }
        .rvh-rc-actions .rvh-btn-seal { margin-top: 8px; }
        /* .rvh-btn-seal's own font-size/letter-spacing/padding never respond to
           viewport width, unlike every other primary CTA on the page (each of
           which has its own override class, e.rvh-g. .rvh-env-card-cta) - #rcSubmit had
           no such class, so it stayed at desktop sizing at every width. */
        #rcSubmit { padding: 14px 34px; font-size: .8rem; letter-spacing: .24em; }
        @media (max-width: 680px) {
            #rcSubmit { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
        }
        .rvh-rc-status {
            text-align: center;
            font-family: 'Playfair Display', serif;
            font-style: italic; font-size: .84rem;
            min-height: 1.3em; margin-top: 10px;
            color: rgba(59,51,45,.7);
        }
        .rvh-rc-status.rvh-is-error { color: #96282f; }

        /* ---------- BACK : the certificate, also a card on the paper ---------- */
        .rvh-rc-face.rvh-back { display: flex; align-items: center; justify-content: center; }
        .rvh-rc-cert-stage { position: relative; z-index: 6; width: 100%; max-width: 520px; margin: 34px auto 0; }
        .rvh-rc-cert {
            position: relative;
            border-radius: 12px;
            padding: 92px 42px 40px;
            text-align: center;
            background: linear-gradient(176deg, #FEFCF7 0%, #F8F2E7 100%);
            border: 1px solid rgba(181,149,92,.55);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.92),
                inset 0 -10px 18px -12px rgba(150,118,78,.35),
                0 1px 1px rgba(74,58,52,.22),
                0 8px 14px rgba(74,58,52,.18),
                0 30px 46px rgba(74,58,52,.24);
        }
        .rvh-rc-cert::after {
            content: '';
            position: absolute; inset: 9px;
            border: 1px solid rgba(181,149,92,.32);
            border-radius: 7px;
            pointer-events: none;
            opacity: 0;
        }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-cert::after { animation: rcFrameIn .9s ease-in-out .3s forwards; }
        @keyframes rcFrameIn { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

        .rvh-rc-seal-wrap {
            position: absolute;
            top: -74px; left: 50%;
            width: 156px; height: 156px;
            transform: translateX(-50%);
            z-index: 9;
            pointer-events: none;
        }
        .rvh-rc-seal {
            position: relative;
            width: 100%; height: 100%;
            opacity: 0;
            transform: scale(2.6);
            filter: drop-shadow(0 4px 8px rgba(74,13,17,.34)) blur(6px);
        }
        /* The artwork is inlined as a data URI rather than referenced from
           assets/seal/, because Chrome blocks mask-image across file:// origins
           and this page is opened straight off disk -- the same reason the
           save-the-date share art is inlined. One source of truth, used by both
           the visible seal and the sheen mask: swap --rc-seal-src to swap the
           seal (a plain url("../seal/....png") works once served over http). */
        .rvh-rc-seal-art {
            position: absolute; inset: 0;
            background-image: var(--rc-seal-src);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            transform-origin: 50% 50%;
        }
        .rvh-rc-seal-sheen {
            position: absolute; inset: 0;
            pointer-events: none;
            background: linear-gradient(115deg, transparent 38%, rgba(255,250,232,.72) 48%, rgba(255,255,255,.9) 51%, rgba(255,250,232,.6) 55%, transparent 66%);
            background-size: 280% 280%;
            background-position: 120% 50%;
            -webkit-mask-image: var(--rc-seal-src);
                    mask-image: var(--rc-seal-src);
            -webkit-mask-size: contain; mask-size: contain;
            -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
            -webkit-mask-position: center; mask-position: center;
            mix-blend-mode: screen;
            opacity: 0;
        }
        .rvh-rc-seal-ring {
            position: absolute; inset: 6%;
            border-radius: 50%;
            border: 2px solid rgba(181,149,92,.55);
            opacity: 0; pointer-events: none;
        }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-seal       { animation: rcPress .42s cubic-bezier(.16,1,.3,1) 1.32s forwards, rcSquish .14s ease-out 1.74s, rcBreathe 8s ease-in-out 2.4s infinite; }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-seal-ring  { animation: rcRing .6s ease-out 1.74s forwards; }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-seal-sheen { animation: rcSheen 4.5s ease-in-out 2.6s infinite; }
        @keyframes rcPress {
            from { opacity: 0; transform: scale(2.6); filter: drop-shadow(0 4px 8px rgba(74,13,17,.20)) blur(6px); }
            to   { opacity: 1; transform: scale(1);   filter: drop-shadow(0 18px 30px rgba(74,13,17,.38)) blur(0); }
        }
        @keyframes rcSquish { 0% { transform: scale(1); } 45% { transform: scaleX(1.06) scaleY(.94); } 100% { transform: scale(1); } }
        @keyframes rcBreathe { 0%,100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
        @keyframes rcRing { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.45); } }
        @keyframes rcSheen {
            0%  { background-position: 120% 50%; opacity: 0; }
            8%  { opacity: .95; }
            26% { background-position: -40% 50%; opacity: 0; }
            100%{ background-position: -40% 50%; opacity: 0; }
        }
        .rvh-rc-spark {
            position: absolute; font-size: 13px;
            color: rgba(242,226,188,.95);
            text-shadow: 0 0 6px rgba(226,205,166,.9);
            opacity: 0; pointer-events: none; z-index: 10;
        }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-spark { animation: rcSpark 2.8s ease-in-out infinite; }
        .rvh-rc-spark.rvh-s1 { top: -46px; left: 26%; animation-delay: 2.8s !important; }
        .rvh-rc-spark.rvh-s2 { top: -22px; right: 24%; animation-delay: 3.5s !important; }
        .rvh-rc-spark.rvh-s3 { top: 46px;  left: 12%; animation-delay: 4.2s !important; }
        .rvh-rc-spark.rvh-s4 { top: 62px;  right: 14%; animation-delay: 4.9s !important; }
        @keyframes rcSpark { 0%,72%,100% { opacity: 0; transform: scale(.6); } 82% { opacity: 1; transform: scale(1.15); } }

        .rvh-rc-sealed-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
            color: #8d7748;
            line-height: 1.6;
        }
        .rvh-rc-script {
            font-family: 'Great Vibes', cursive;
            font-size: clamp(1.7rem, 3.2vw, 2.2rem);
            line-height: 1.1; color: var(--brand-color);
            margin: 16px 0 6px;
        }
        .rvh-rc-name {
            font-family: 'Cinzel', serif; font-weight: 500;
            font-size: clamp(1.2rem, 2.2vw, 1.6rem);
            letter-spacing: .12em; text-transform: uppercase;
            color: var(--brand-color); margin: 0; word-break: break-word;
        }
        .rvh-rc-rule {
            width: min(40%, 150px); height: 1px; margin: 20px auto;
            background: linear-gradient(to right, transparent, var(--gold), transparent);
            position: relative;
        }
        .rvh-rc-rule::after {
            content: '\2756';
            position: absolute; top: -9px; left: 50%;
            transform: translateX(-50%);
            color: var(--gold); font-size: 11px;
        }
        .rvh-rc-body {
            font-family: 'Playfair Display', serif; font-style: italic;
            font-size: .93rem; line-height: 1.72;
            color: rgba(59,51,45,.85);
            max-width: 38ch; margin: 0 auto 22px;
        }
        .rvh-rc-since {
            font-family: 'Cinzel', serif;
            font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
            color: #8d7748; margin-bottom: 26px;
        }
        .rvh-rc-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
        .rvh-rc-secondary {
            position: relative;
            overflow: hidden;
            font-family: 'Cinzel', serif;
            font-size: .8rem; letter-spacing: .24em; text-transform: uppercase;
            color: #fffaf0;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            border: none;
            border-radius: 999px;
            padding: 14px 34px; cursor: pointer;
            box-shadow: 0 14px 26px rgba(108,21,28,.32), inset 0 1px 0 rgba(255,255,255,.22);
            transition: box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
        }
        .rvh-rc-secondary::before {
            content: '';
            position: absolute;
            inset: 4px;
            border-radius: 999px;
            border: 1px solid rgba(226,205,166,.5);
            pointer-events: none;
        }
        .rvh-rc-secondary:hover { box-shadow: 0 20px 34px rgba(108,21,28,.38), inset 0 1px 0 rgba(255,255,255,.28); transform: translateY(-2px); }
        .rvh-rc-secondary:focus-visible { outline: 2px solid rgba(181,149,92,.95); outline-offset: 3px; }
        .rvh-rc-textlink {
            font-family: 'Playfair Display', serif; font-size: .84rem;
            color: var(--brand-color); background: transparent; border: 0;
            padding: 10px 6px; cursor: pointer;
        }
        .rvh-rc-textlink span { border-bottom: 1px solid rgba(108,21,28,.45); padding-bottom: 2px; }
        .rvh-rc-textlink:hover span { border-bottom-color: var(--brand-color); }
        .rvh-rc-textlink:focus-visible { outline: 2px solid rgba(181,149,92,.95); outline-offset: 3px; }

        /* ---------- petals ---------- */
        .rvh-rc-petal {
            position: absolute;
            width: 26px; height: 26px;
            background-repeat: no-repeat; background-size: contain; background-position: center;
            filter: drop-shadow(1px 4px 6px rgba(90,60,55,.22));
            opacity: 0; z-index: 1; pointer-events: none;
        }
        .rvh-rc-petal.rvh-f1 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png"); left: 7%;  bottom: 60px; }
        .rvh-rc-petal.rvh-f2 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png"); left: 20%; bottom: 34px; width: 20px; height: 20px; }
        .rvh-rc-petal.rvh-f3 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-c.png"); right: 11%; bottom: 66px; width: 30px; height: 30px; }
        .rvh-rc-petal.rvh-f4 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-d.png"); right: 25%; bottom: 30px; }
        .rvh-rc-petal.rvh-f5 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png"); left: 46%; bottom: 22px; width: 18px; height: 18px; }
        .rvh-rc-section.rvh-is-settled .rvh-rc-petal { animation: rcSettle 1.5s cubic-bezier(.22,1,.32,1) forwards; }
        .rvh-rc-petal.rvh-f2 { animation-delay: .18s; }
        .rvh-rc-petal.rvh-f3 { animation-delay: .34s; }
        .rvh-rc-petal.rvh-f4 { animation-delay: .52s; }
        .rvh-rc-petal.rvh-f5 { animation-delay: .7s; }
        @keyframes rcSettle {
            from { opacity: 0; transform: translateY(-90px) rotate(-25deg); }
            60%  { opacity: .9; }
            to   { opacity: .82; transform: translateY(0) rotate(6deg); }
        }
        .rvh-rc-rise {
            position: absolute;
            width: 22px; height: 22px;
            background-repeat: no-repeat; background-size: contain;
            opacity: 0; z-index: 8; pointer-events: none;
            filter: drop-shadow(1px 3px 5px rgba(90,60,55,.2));
        }
        .rvh-rc-section.rvh-is-sealed .rvh-rc-rise { animation: rcRise 2.4s ease-out forwards; }
        @keyframes rcRise {
            from { opacity: 0; transform: translateY(40px) rotate(0deg); }
            18%  { opacity: .85; }
            to   { opacity: 0; transform: translateY(-300px) rotate(180deg); }
        }

        /* ---------- the shared .rvh-reveal stagger, pushed past the flip ---------- */
        .rvh-rc-section.rvh-is-sealed .rvh-rc-cert .rvh-reveal {
            animation: sealedRise 1.05s cubic-bezier(.22,1,.32,1) forwards;
            animation-delay: calc(1.62s + var(--i,0) * .09s);
        }

        /* ---------- responsive ---------- */
        @media (max-width: 1000px) {
            .rvh-rc-grid { grid-template-columns: 1fr; gap: 40px; }
            .rvh-rc-copy { text-align: center; }
            .rvh-rc-sub { margin-left: auto; margin-right: auto; }
            .rvh-rc-copy .rvh-rc-rule { margin-left: auto; margin-right: auto; }
            .rvh-rc-polaroid { margin-left: auto; margin-right: auto; }
            .rvh-rc-face { padding: 46px 34px 52px; }
        }
        @media (max-width: 680px) {
            .rvh-rc-section { padding: 58px 12px 92px; }
            .rvh-rc-face { padding: 38px 16px 44px; border-radius: 14px; }
            /* .rvh-rc-face clips its overflow, so the polaroid and the note's
               overhang have to come in on narrow phones. */
            .rvh-rc-polaroid { width: min(236px, 100%); }
            .rvh-rc-polaroid-note { right: -24px; bottom: 78px; width: 92px; font-size: .95rem; }
            .rvh-rc-frame { inset: 10px; }
            .rvh-rc-frame::after { inset: 6px; }
            .rvh-rc-corner { width: 46px; height: 46px; }
            .rvh-rc-corner.rvh-tl, .rvh-rc-corner.rvh-tr { top: 10px; }
            .rvh-rc-corner.rvh-bl, .rvh-rc-corner.rvh-br { bottom: 10px; }
            .rvh-rc-corner.rvh-tl, .rvh-rc-corner.rvh-bl { left: 10px; }
            .rvh-rc-corner.rvh-tr, .rvh-rc-corner.rvh-br { right: 10px; }
            .rvh-rc-reply { padding: 26px 20px 24px; }
            .rvh-rc-cert  { padding: 78px 20px 32px; }
            .rvh-rc-cert-stage { margin-top: 26px; }
            .rvh-rc-seal-wrap { width: 124px; height: 124px; top: -58px; }
            .rvh-rc-line { flex-wrap: wrap; gap: 5px 9px; }
            .rvh-rc-secondary { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; }
        }

        /* ---------- reduced motion ---------- */
        @media (prefers-reduced-motion: reduce) {
            .rvh-rc-flip-inner, .rvh-rc-tilt, .rvh-rc-tilt::after { transition: none !important; }
            .rvh-rc-section.rvh-is-sealed .rvh-rc-seal,
            .rvh-rc-section.rvh-is-sealed .rvh-rc-seal-ring,
            .rvh-rc-section.rvh-is-sealed .rvh-rc-seal-sheen,
            .rvh-rc-section.rvh-is-sealed .rvh-rc-spark,
            .rvh-rc-section.rvh-is-sealed .rvh-rc-rise,
            .rvh-rc-section.rvh-is-settled .rvh-rc-petal,
            .rvh-rc-section.rvh-is-sealed .rvh-rc-cert::after,
            .rvh-rc-section.rvh-is-sealed .rvh-rc-cert .rvh-reveal { animation: none !important; }
            .rvh-rc-section.rvh-is-sealed .rvh-rc-seal { opacity: 1; transform: none; filter: drop-shadow(0 14px 24px rgba(74,13,17,.34)); }
            .rvh-rc-section.rvh-is-sealed .rvh-rc-cert::after { opacity: 1; }
            .rvh-rc-section.rvh-is-sealed .rvh-rc-cert .rvh-reveal { opacity: 1; transform: none; }
            .rvh-rc-section.rvh-is-settled .rvh-rc-petal { opacity: .82; }
            .rvh-rc-tickbox path { transition: none; }
        }


        .rvh-gt-container { position: relative; width: min(1080px, 100%); margin: 0 auto; padding-top: 46px; }
        .rvh-gt-controls { display: none; align-items: center; justify-content: center; gap: 20px; margin-top: 22px; position: relative; z-index: 5; }

        /* Ported from home.css: the Get in Touch section was transplanted to the
           community pages but these two rules did not come with it, so
           .rvh-gt-section had no padding or width and .rvh-gt-sub was entirely
           unstyled -- the subtitle rendered flush left at body font instead of
           centred italic. Same gap as the .rvh-ghost button variant. */
        .rvh-gt-intro { text-align: center; margin-bottom: 50px; }
        .rvh-gt-section { width: 100%; max-width: 1400px; padding: 90px 24px 120px; position: relative; z-index: 5; }
        .rvh-gt-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: clamp(0.95rem, 1.3vw, 1.1rem);
            color: var(--text-dark);
            opacity: 0.8;
            margin-top: 10px;
        }
        .rvh-gt-tabs { position: absolute; top: 0; left: 56px; z-index: 10; display: flex; align-items: flex-end; gap: 5px; max-width: calc(100% - 112px); }
        .rvh-gt-tab {
            appearance: none;
            border: 1px solid rgba(181,149,92,.3);
            border-bottom: 0;
            color: var(--text-dark);
            font-family: 'Cinzel', serif;
            font-size: .62rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: 14px 20px 16px;
            border-radius: 9px 9px 0 0;
            cursor: pointer;
            position: relative;
            transition: transform .24s ease, background-color .24s ease, color .24s ease, box-shadow .24s ease;
            box-shadow: 0 -3px 8px rgba(90,69,56,.035);
            white-space: nowrap;
            background: var(--paper-mid);
        }
        .rvh-gt-tab:nth-child(2) { transform: translateY(3px); background: var(--paper-edge); }
        .rvh-gt-tab:nth-child(3) { transform: translateY(6px); background: var(--gold-light); }
        .rvh-gt-tab:hover { color: var(--brand-color); }
        .rvh-gt-tab.rvh-active {
            background: var(--paper-center);
            color: var(--brand-color);
            font-weight: 600;
            transform: translateY(0);
            box-shadow: 0 -5px 12px rgba(90,69,56,.06);
            z-index: 3;
        }
        .rvh-gt-tab.rvh-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; background: var(--paper-center); }
        .rvh-gt-backing {
            position: absolute; inset: 52px 10px -12px 14px;
            background: var(--paper-edge);
            border: 1px solid rgba(181,149,92,.2);
            border-radius: 10px;
            box-shadow: 0 14px 24px rgba(80,60,50,.06);
            transform: rotate(.25deg);
            z-index: 0;
        }
        .rvh-gt-backing-2 { position: absolute; inset: 58px 20px -20px 24px; background: var(--gold-light); border-radius: 11px; transform: rotate(-.3deg); z-index: -1; opacity: .55; }
        .rvh-gt-card {
            position: relative;
            z-index: 2;
            perspective: 1500px;
            isolation: isolate;
            min-height: 575px;
            background:
                linear-gradient(115deg, rgba(255,255,255,.38), transparent 30%),
                repeating-linear-gradient(0deg, rgba(131,105,86,.018) 0 1px, transparent 1px 4px),
                var(--paper-center);
            border: 1px solid rgba(181,149,92,.25);
            border-radius: 7px;
            overflow: visible;
            box-shadow: 0 28px 50px -30px rgba(66,48,39,.34), 0 8px 20px rgba(76,58,48,.06), inset 0 1px 0 rgba(255,255,255,.9);
        }
        .rvh-gt-grid { display: grid; grid-template-columns: minmax(0,58%) minmax(340px,42%); min-height: 575px; }
        .rvh-gt-left { padding: 92px 48px 52px 56px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; position: relative; z-index: 3; }
        .rvh-gt-tagline { font-family: 'Cinzel', serif; font-size: .62rem; line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
        .rvh-gt-title { font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.08; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-color); margin-bottom: 20px; max-width: 380px; }
        .rvh-gt-desc { font-family: 'Playfair Display', serif; max-width: 410px; font-size: .92rem; line-height: 1.75; color: var(--text-dark); opacity: .82; margin-bottom: 30px; }
        .rvh-gt-cta {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative;
            padding: 14px 32px; border-radius: 999px; border: 0; cursor: pointer;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            color: #fffaf0; text-decoration: none;
            font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
            box-shadow: 0 12px 22px rgba(108,21,28,.3), inset 0 1px 0 rgba(255,255,255,.2);
            transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
        }
        .rvh-gt-cta::before { content: ''; position: absolute; inset: 3px; border-radius: 999px; border: 1px solid rgba(226,205,166,.5); pointer-events: none; }
        .rvh-gt-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(108,21,28,.36), inset 0 1px 0 rgba(255,255,255,.24); }
        .rvh-gt-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s ease; }
        .rvh-gt-cta:hover svg { transform: translateX(2px); }
        .rvh-gt-cta-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
        /* The lounge link reuses .rvh-rc-secondary, which is sized for the
           certificate card a size up from here (.8rem/.24em against this
           section's .68rem/.18em). Sitting next to .rvh-gt-cta it out-measured
           the primary it is meant to defer to, so pull it onto the gt scale --
           and take the ghost's 1px border out of the padding so both buttons
           land on the same 44px height. The fill/outline contrast carries the
           hierarchy; size should not. */
        /* The ghost variant never came across with the Get in Touch transplant,
           so .rvh-ghost matched nothing here and the lounge link rendered as a
           second filled maroon button beside the primary -- two CTAs with equal
           weight and no hierarchy. Ported from home.css. */
        .rvh-rc-secondary.rvh-ghost {
            color: var(--brand-color);
            background: transparent;
            border: 1px solid rgba(108,21,28,.5);
            box-shadow: none;
            text-decoration: none;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .rvh-rc-secondary.rvh-ghost::before { border-color: rgba(181,149,92,.4); }
        .rvh-rc-secondary.rvh-ghost:hover { background: rgba(108,21,28,.06); box-shadow: none; transform: translateY(-2px); }
        .rvh-gt-cta-row .rvh-rc-secondary.rvh-ghost {
            font-size: .68rem;
            letter-spacing: .18em;
            padding: 13px 31px;
        }
        /* below this, "Find Your Nearest Store" and "Visit Rivaah Lounge" no
           longer fit on one line and wrap -- stack them centered instead, at
           a shared width so neither reads as the "main" one by being wider */
        @media (max-width: 640px) {
            .rvh-gt-cta-row { flex-direction: column; align-items: center; width: 100%; }
            .rvh-gt-cta-row .rvh-gt-cta, .rvh-gt-cta-row .rvh-rc-secondary.rvh-ghost { width: 100%; max-width: 320px; }
        }
        .rvh-gt-right { position: relative; min-height: 575px; padding: 0 34px 42px 4px; display: flex; align-items: flex-start; justify-content: flex-end; z-index: 4; }
        .rvh-gt-photo { position: relative; width: min(100%, 410px); height: 500px; margin-top: -9px; transform: rotate(.9deg); transform-origin: 50% 10%; filter: drop-shadow(0 18px 18px rgba(59,43,36,.11)); }
        .rvh-gt-photo-print {
            position: absolute; inset: 0;
            background: var(--paper-center);
            padding: 8px;
            border: 1px solid rgba(181,149,92,.3);
            border-radius: 3px;
            box-shadow: 0 2px 4px rgba(55,39,32,.05), 0 14px 24px rgba(55,39,32,.09);
            overflow: hidden;
        }
        .rvh-gt-photo-print img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 1px; transition: opacity .22s ease, transform .36s ease; }
        .rvh-gt-paperclip {
            position: absolute; top: -18px; right: 38px; width: 25px; height: 74px;
            border: 3px solid var(--gold);
            border-radius: 14px;
            transform: rotate(4deg);
            z-index: 6;
            box-shadow: 1px 2px 2px rgba(59,44,34,.13), inset 1px 0 0 rgba(255,255,255,.55);
            background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(181,149,92,.08));
        }
        .rvh-gt-paperclip::after { content: ''; position: absolute; top: 7px; left: 5px; width: 9px; height: 52px; border: 2px solid var(--gold-light); border-radius: 9px; box-shadow: inset 1px 0 0 rgba(255,255,255,.5); }
        .rvh-gt-paperclip::before { content: ''; position: absolute; left: 50%; bottom: -6px; width: 15px; height: 8px; background: rgba(66,50,40,.09); filter: blur(4px); transform: translateX(-50%); z-index: -1; }

        .rvh-gt-flip-sheet {
            position: absolute; inset: 0; z-index: 30;
            background:
                linear-gradient(115deg, rgba(255,255,255,.38), transparent 30%),
                repeating-linear-gradient(0deg, rgba(131,105,86,.018) 0 1px, transparent 1px 4px),
                var(--paper-center);
            border-radius: 7px;
            transform-origin: 50% 0%;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            will-change: transform, opacity, filter;
            pointer-events: none;
            box-shadow: 0 28px 50px -30px rgba(66,48,39,.28), 0 8px 20px rgba(76,58,48,.05);
            animation: gtFlipPageUp 680ms cubic-bezier(.55,.06,.20,1) forwards;
        }
        .rvh-gt-flip-sheet::after {
            content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
            background: linear-gradient(180deg, rgba(115,88,70,0) 0%, rgba(115,88,70,.035) 52%, rgba(70,49,38,.14) 100%);
            opacity: 0;
            animation: gtFlipShade 680ms cubic-bezier(.55,.06,.20,1) forwards;
        }
        .rvh-gt-grid.rvh-page-incoming { animation: gtIncomingSettle 520ms cubic-bezier(.22,.72,.25,1) both; }
        @keyframes gtFlipPageUp {
            0% { transform: rotateX(0deg) translateZ(0); opacity: 1; filter: brightness(1); }
            38% { transform: rotateX(34deg) translateZ(2px); opacity: 1; filter: brightness(.985); }
            72% { transform: rotateX(76deg) translateZ(4px); opacity: .96; filter: brightness(.95); }
            100% { transform: rotateX(96deg) translateZ(2px); opacity: 0; filter: brightness(.9); }
        }
        @keyframes gtFlipShade { 0% { opacity: 0; } 48% { opacity: .34; } 82% { opacity: .62; } 100% { opacity: .2; } }
        @keyframes gtIncomingSettle { 0% { opacity: .76; transform: translateY(5px); } 45% { opacity: .92; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } }
        .rvh-gt-container.rvh-is-flipping .rvh-gt-backing { animation: gtBackingReact 680ms ease both; }
        @keyframes gtBackingReact { 0%,100% { transform: rotate(.25deg) translateY(0); } 48% { transform: rotate(.25deg) translateY(2px); } }
        @media (prefers-reduced-motion: reduce) {
            .rvh-gt-flip-sheet, .rvh-gt-flip-sheet::after, .rvh-gt-grid.rvh-page-incoming, .rvh-gt-container.rvh-is-flipping .rvh-gt-backing { animation-duration: 1ms !important; }
        }
        @media (max-width: 920px) {
            .rvh-gt-section { padding: 60px 18px 80px; }
            .rvh-gt-intro { margin-bottom: 60px; }
            .rvh-gt-container { padding-top: 54px; }
            .rvh-gt-section { padding: 60px 18px 80px; }
            .rvh-gt-tabs { left: 0; right: 0; max-width: none; overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding-right: 18px; padding-top: 6px; }
            /* the chosen tab jumps to the front of the rail so it is always the
               one visible at the left edge, however far along the row it sits */
            .rvh-gt-tab { order: 1; }
            .rvh-gt-tab.rvh-active { order: 0; }
            .rvh-gt-tabs::-webkit-scrollbar { display: none; }
            .rvh-gt-tab { padding: 15px 16px 17px; font-size: .6rem; }
            .rvh-gt-tab:nth-child(2), .rvh-gt-tab:nth-child(3) { transform: none; }
            .rvh-gt-controls { display: flex; }
            .rvh-gt-grid { grid-template-columns: 1fr; }
            .rvh-gt-card { min-height: 0; }
            .rvh-gt-right { order: 1; min-height: 0; height: 340px; padding: 0 22px; justify-content: center; }
            .rvh-gt-photo { width: min(88%,520px); height: 330px; margin-top: -8px; }
            .rvh-gt-left { order: 2; padding: 56px 28px 40px; align-items: center; text-align: center; }
            .rvh-gt-desc { max-width: 520px; }
            .rvh-gt-backing { inset: 50px 6px -10px 9px; }
            .rvh-gt-backing-2 { inset: 55px 12px -17px 16px; }
        }

        .rvh-section-depth-divider {
            width: 100%;
            max-width: 1100px;
            height: 34px;
            margin: 0 auto;
            background: linear-gradient(to bottom, rgba(43,30,22,.12) 0%, transparent 100%);
            box-shadow: 0 8px 18px -8px rgba(43,30,22,.28);
            position: relative;
            z-index: 6;
            pointer-events: none;
        }
        /* ============================================================
           BRIDAL BLISS — product showcase after Save the Date, matching
           the homepage's Bridal Bliss layout (grid + video-spotlight
           panel), minus the category browser: this section shows a
           fixed set of curated pieces using the product data and card
           styling already established here (was "The Rivaah Edit").
           ============================================================ */
        .rvh-bb-section {
            --rivaah: #6c151c;
            --rivaah-soft: #9a4348;
            --edit-paper-card: rgba(252, 247, 238, 0.93);
            --edit-promo: #f5e8cf;
            --edit-promo-ink: #9b6725;
            padding: 90px 24px 100px;
            position: relative;
            z-index: 10;
            text-align: center;
        }

        /* Soft depth separator, matching #lookbookSection::before: a diffuse
           glow overlaying the section's own edge rather than a hard band
           between sections. ::before shades the top edge, ::after mirrors it
           on the bottom, so a section reads as separated above and below
           without adding any height to the page. */
        .rvh-bb-section::before,
        .rvh-bb-section::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 120px;
            pointer-events: none;
            z-index: 2;
        }
        .rvh-bb-section::before {
            top: 0;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(92, 73, 53, 0.16) 0%, rgba(92, 73, 53, 0.08) 26%, rgba(92, 73, 53, 0.02) 48%, rgba(92, 73, 53, 0) 74%),
                linear-gradient(to bottom, rgba(255, 248, 239, 0.28) 0%, rgba(255, 248, 239, 0.12) 20%, rgba(255, 248, 239, 0) 100%);
        }
        .rvh-bb-section::after {
            bottom: 0;
            background:
                radial-gradient(ellipse at 50% 100%, rgba(92, 73, 53, 0.16) 0%, rgba(92, 73, 53, 0.08) 26%, rgba(92, 73, 53, 0.02) 48%, rgba(92, 73, 53, 0) 74%),
                linear-gradient(to top, rgba(255, 248, 239, 0.28) 0%, rgba(255, 248, 239, 0.12) 20%, rgba(255, 248, 239, 0) 100%);
        }
        .rvh-bb-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: clamp(0.95rem, 1.3vw, 1.1rem);
            color: var(--text-dark);
            opacity: 0.8;
            margin-top: 8px;
        }

        .rvh-bb-content { display: grid; grid-template-columns: 1.35fr .65fr; gap: 54px; align-items: center; max-width: 1080px; margin: 0 auto; text-align: left; }

        .rvh-bb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1vw, 20px); margin-left: -28px; }
        .rvh-bb-grid .rvh-product-card {
            min-width: 0;
            overflow: hidden;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(254,251,245,.98), var(--edit-paper-card));
            border: 1px solid rgba(255,255,255,.68);
            box-shadow: 0 4px 8px rgba(77, 56, 38, .06), 0 14px 26px rgba(77, 56, 38, .10);
            transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
            display: flex;
            flex-direction: column;
        }
        .rvh-bb-grid .rvh-product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 7px 13px rgba(77, 56, 38, .08), 0 22px 36px rgba(77, 56, 38, .15);
        }
        .rvh-bb-grid .rvh-product-card__media { position: relative; aspect-ratio: 1 / 0.94; overflow: hidden; background: #e8d7c7; }
        .rvh-bb-grid .rvh-product-card__media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.005);
            transition: transform .55s cubic-bezier(.2,.75,.25,1);
        }
        .rvh-bb-grid .rvh-product-card:hover .rvh-product-card__media img { transform: scale(1.035); }
        .rvh-bb-grid .rvh-wishlist {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            border: none;
            padding: 0;
            border-radius: 50%;
            display: grid;
            place-items: center;
            cursor: pointer;
            background: rgba(255, 251, 244, .90);
            box-shadow: 0 3px 12px rgba(64,48,36,.13);
            color: rgba(75,67,61,.70);
            transition: transform .2s ease, color .2s ease, background .2s ease;
        }
        .rvh-bb-grid .rvh-wishlist:hover { transform: scale(1.07); }
        .rvh-bb-grid .rvh-wishlist.rvh-is-active { color: var(--rivaah); background: rgba(255, 248, 242, .98); }
        .rvh-bb-grid .rvh-wishlist svg { width: 16px; height: 16px; stroke: currentColor; fill: transparent; stroke-width: 1.7; transition: fill .2s ease; }
        .rvh-bb-grid .rvh-wishlist.rvh-is-active svg { fill: currentColor; }
        .rvh-bb-grid .rvh-product-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 14px; }
        .rvh-bb-grid .rvh-product-name {
            margin: 0 0 8px;
            font-family: 'Playfair Display', serif;
            font-weight: 500;
            font-size: clamp(1rem, 1.15vw, 1.22rem);
            line-height: 1.15;
            color: #231d19;
            min-height: 2em;
        }
        .rvh-bb-grid .rvh-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px; margin-bottom: 14px; }
        .rvh-bb-grid .rvh-price-current {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.08rem, 1.2vw, 1.32rem);
            font-weight: 500;
            line-height: 1;
            white-space: nowrap;
            color: #2a2522;
        }
        .rvh-bb-grid .rvh-price-old {
            color: rgba(47,41,37,.50);
            font-family: 'Playfair Display', serif;
            font-size: clamp(.8rem, .85vw, .92rem);
            text-decoration: line-through;
            white-space: nowrap;
        }
        .rvh-bb-grid .rvh-stock { color: var(--rivaah-soft); font-family: 'Playfair Display', serif; font-size: clamp(.76rem, .8vw, .88rem); white-space: nowrap; }
        .rvh-bb-grid .rvh-offer {
            margin-top: auto;
            min-height: 40px;
            border-radius: 8px;
            background: rgba(247, 232, 205, .88);
            color: var(--edit-promo-ink);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 8px 10px;
            font-family: 'Playfair Display', serif;
            font-weight: 500;
            font-size: .82rem;
            letter-spacing: .01em;
            text-align: center;
        }
        .rvh-bb-grid .rvh-offer__icon { width: 16px; height: 16px; display: inline-grid; place-items: center; flex: 0 0 auto; }
        .rvh-bb-grid .rvh-offer__icon svg { width: 15px; height: 15px; fill: #c48128; }

        .rvh-bb-video-panel { display: flex; flex-direction: column; align-items: center; }
        /* Handset shell: an ivory case with the screen inset inside it, the way
           the reference renders it — not a dark slab with a pale rim. The bar
           lives inside .rvh-bb-phone-screen so it clips to the screen's corners. */
        .rvh-bb-phone {
            width: 100%; max-width: 268px; aspect-ratio: 9 / 16; border-radius: 34px;
            padding: 9px; position: relative;
            border: 1px solid rgba(181,149,92,.42);
            background: linear-gradient(180deg, #fffdf9 0%, var(--paper-center) 100%);
            box-shadow: 0 22px 44px -18px rgba(66,48,39,.4), inset 0 0 0 1px rgba(255,255,255,.85);
        }
        .rvh-bb-phone-bar {
            position: absolute; top: 0; left: 0; right: 0; z-index: 2;
            display: flex; align-items: center; justify-content: space-between; gap: 8px;
            padding: 10px 11px 24px;
            background: linear-gradient(to bottom, rgba(0,0,0,.42), transparent);
            color: #fffaf0; font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .04em;
        }
        .rvh-bb-phone-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .rvh-bb-phone-icons { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
        .rvh-bb-phone-icons svg { width: 15px; height: 15px; stroke: #fffaf0; fill: none; stroke-width: 1.7; }
        .rvh-bb-phone-screen {
            width: 100%; height: 100%; position: relative;
            border-radius: 26px; overflow: hidden; background: #2b2320;
            border: 1px solid rgba(181,149,92,.3);
        }
        .rvh-bb-phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .rvh-bb-video-caption {
            margin-top: 16px; font-family: 'Playfair Display', serif; font-style: italic;
            font-size: .92rem; color: var(--brand-color); text-align: center;
        }

        .rvh-bb-cta-wrap { display: flex; justify-content: center; margin-top: 54px; }
        .rvh-bb-cta {
            display: inline-flex; align-items: center; gap: 10px; position: relative;
            padding: 14px 32px; border-radius: 999px; border: 0; cursor: pointer;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            color: #fffaf0; text-decoration: none;
            font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
            box-shadow: 0 12px 22px rgba(108,21,28,.3), inset 0 1px 0 rgba(255,255,255,.2);
            transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
        }
        .rvh-bb-cta::before { content: ''; position: absolute; inset: 3px; border-radius: 999px; border: 1px solid rgba(226,205,166,.5); pointer-events: none; }
        .rvh-bb-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(108,21,28,.36), inset 0 1px 0 rgba(255,255,255,.24); }
        .rvh-bb-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s ease; }
        .rvh-bb-cta:hover svg { transform: translateX(2px); }

        @media (max-width: 860px) {
            .rvh-bb-content { grid-template-columns: 1fr; gap: 40px; }
            .rvh-bb-phone { max-width: 220px; }
            .rvh-bb-grid { max-width: 480px; margin: 0 auto; }
        }
        @media (max-width: 680px) {
            /* Simple static 2x2 grid of smaller tiles, not a horizontal
               scroll strip - matches the rest of this section's compact,
               at-a-glance sizing on mobile. */
            .rvh-bb-section { padding: 70px 18px 80px; }
            .rvh-bb-grid { gap: 10px; padding: 0; }
            .rvh-bb-grid .rvh-product-card { border-radius: 11px; }
            .rvh-bb-grid .rvh-product-card__media { aspect-ratio: 1 / 0.98; }
            .rvh-bb-grid .rvh-wishlist { width: 26px; height: 26px; top: 8px; right: 8px; }
            .rvh-bb-grid .rvh-wishlist svg { width: 13px; height: 13px; }
            .rvh-bb-grid .rvh-product-card__body { padding: 10px 10px 9px; }
            .rvh-bb-grid .rvh-product-name { min-height: 0; font-size: .84rem; margin-bottom: 5px; line-height: 1.22; }
            .rvh-bb-grid .rvh-price-row { gap: 3px 5px; margin-bottom: 8px; }
            .rvh-bb-grid .rvh-price-current { font-size: .88rem; }
            .rvh-bb-grid .rvh-price-old { font-size: .64rem; }
            .rvh-bb-grid .rvh-stock { font-size: .6rem; }
            .rvh-bb-grid .rvh-offer { min-height: 30px; padding: 5px 7px; font-size: .62rem; gap: 4px; border-radius: 6px; }
            .rvh-bb-grid .rvh-offer__icon { width: 11px; height: 11px; }
            .rvh-bb-grid .rvh-offer__icon svg { width: 10px; height: 10px; }
        }

        /* Desktop: sized off viewport WIDTH to hold the reference's proportions
           (grid : gap : phone = 33 : 12.75 : 16.25), capped in px so the band
           never outgrows .rvh-bb-content, and capped against viewport height so the
           cards and the phone still clear the 108px sticky header together.
           These cards carry a price/offer body, so they run taller than the
           homepage's for the same width, and the body is tightened to match. */
        @media (min-width: 861px) {
            .rvh-bb-section { padding: clamp(26px, 5.2vh, 90px) 24px clamp(28px, 5.6vh, 100px); }
            .rvh-bb-intro .rvh-divider { margin-top: clamp(10px, 2.2vh, 30px); margin-bottom: clamp(10px, 2.2vh, 30px); }
            /* Fixed width, not max-width: the section sits in a shrink-to-fit
               column, so the columns must not pull the whole band narrow. */
            .rvh-bb-content { grid-template-columns: auto auto; justify-content: center; gap: min(12.75vw, 200px); width: 1080px; max-width: 100%; }
            .rvh-bb-grid { width: min(33vw, 500px, (100vh - 148px) * 0.72); gap: clamp(12px, 1.2vw, 18px); margin-left: 0; }
            .rvh-bb-grid .rvh-product-card__body { padding: 10px 11px 9px; }
            /* One line with an ellipsis, as the reference shows the names —
               it also keeps the four card bodies the same height. */
            .rvh-bb-grid .rvh-product-name { min-height: 0; font-size: clamp(.86rem, .95vw, 1.02rem); line-height: 1.2; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .rvh-bb-grid .rvh-price-row { margin-bottom: 8px; gap: 4px 6px; }
            .rvh-bb-grid .rvh-price-current { font-size: clamp(.92rem, 1vw, 1.08rem); }
            .rvh-bb-grid .rvh-price-old { font-size: clamp(.7rem, .75vw, .8rem); }
            .rvh-bb-grid .rvh-stock { font-size: clamp(.66rem, .7vw, .76rem); }
            .rvh-bb-grid .rvh-offer { min-height: 26px; padding: 5px 8px; font-size: .7rem; }
            .rvh-bb-grid .rvh-wishlist { width: 27px; height: 27px; top: 9px; right: 9px; }
            .rvh-bb-grid .rvh-wishlist svg { width: 14px; height: 14px; }
            .rvh-bb-video-panel { width: min(16.25vw, 256px); }
            .rvh-bb-video-caption { margin-top: 14px; font-size: .9rem; }
            .rvh-bb-cta-wrap { margin-top: clamp(20px, 3vh, 54px); }
        }

        /* ============================================================
           MEET THE BRIDES — infinite-loop, true-center 35mm filmstrip.
           Cross-links to the other 6 community pages. Every class is
           "rb-" prefixed so nothing here can collide with the rest of
           this 6000+ line stylesheet.
           ============================================================ */
        .rvh-rb-section { position: relative; width: 100%; overflow: visible; overflow-anchor: none; padding: clamp(64px, 7vw, 108px) 0 clamp(72px, 7.5vw, 112px); }

        .rvh-rb-intro { text-align: center; width: min(900px, calc(100% - 40px)); margin: 0 auto clamp(40px, 5vw, 58px); }
        .rvh-rb-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: .7rem;
            letter-spacing: .35em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 14px;
        }
        .rvh-rb-title {
            font-family: 'Cinzel', serif;
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--brand-color);
            font-size: clamp(1.7rem, 3.2vw, 2.9rem);
            line-height: 1.2;
            margin: 0 0 16px;
        }
        .rvh-rb-subtitle {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .98rem;
            line-height: 1.65;
            color: rgba(59,51,45,.75);
            max-width: 560px;
            margin: 0 auto;
        }

        .rvh-rb-stage { position: relative; width: 100%; padding: 30px 0; overflow: visible; perspective: 1400px; }

        .rvh-rb-shell {
            --hole-w: 15px;
            --hole-h: 22px;
            --hole-rad: 3.5px;
            --hole-step: 29px;
            --perf-track-h: 48px;
            --rb-band: #93703f;
            --rb-mount: #f7ebd6;
            position: relative;
            width: 100%;
            overflow: visible;
            isolation: isolate;
            padding: var(--perf-track-h) 0;
            background:
                linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.05) 28%, rgba(0,0,0,.08) 74%, rgba(255,255,255,.2)),
                var(--rb-band);
            border-top: 1px solid rgba(70,48,24,.4);
            border-bottom: 1px solid rgba(70,48,24,.42);
            box-shadow: 0 22px 44px rgba(70,45,25,.2), 0 5px 12px rgba(70,45,25,.09);
        }
        .rvh-rb-shell::before,
        .rvh-rb-shell::after {
            content: '';
            position: absolute;
            left: 0; right: 0;
            height: var(--perf-track-h);
            z-index: 1;
            pointer-events: none;
            background-color: var(--rb-band);
            background-image:
                linear-gradient(to bottom, rgba(255,255,255,.2), rgba(0,0,0,.14)),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='48'%3E%3Crect x='7' y='13' width='15' height='22' rx='3.5' ry='3.5' fill='%23fffaf3'/%3E%3C/svg%3E");
            background-size: 100% 100%, var(--hole-step) var(--perf-track-h);
            background-repeat: no-repeat, repeat-x;
        }
        .rvh-rb-shell::before { top: 0; box-shadow: 0 1px 0 rgba(255,255,255,.26) inset; }
        .rvh-rb-shell::after { bottom: 0; box-shadow: 0 -1px 0 rgba(0,0,0,.2) inset; }

        .rvh-rb-viewport {
            position: relative;
            z-index: 3;
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            scroll-snap-type: none;
            scroll-behavior: auto;
            overscroll-behavior-x: contain;
            padding: 0 28px;
            padding-top: 126px;
            margin-top: -126px;
            padding-bottom: 76px;
            margin-bottom: -76px;
            cursor: grab;
            touch-action: pan-x pan-y;
        }
        .rvh-rb-viewport::-webkit-scrollbar { display: none; }
        .rvh-rb-viewport.rvh-is-dragging { cursor: grabbing; user-select: none; }

        .rvh-rb-track { position: relative; z-index: 3; display: flex; gap: 0; width: max-content; align-items: center; transform-style: preserve-3d; perspective: 1400px; }

        .rvh-rb-card {
            position: relative;
            z-index: 3;
            width: clamp(380px, 34vw, 500px);
            padding: 0 18px;
            transform-style: preserve-3d;
            transform-origin: 50% 50%;
            border-left: 1px solid rgba(120,85,50,.22);
            border-right: 1px solid rgba(255,255,255,.28);
            transition: transform 600ms cubic-bezier(.22,.85,.15,1), opacity 360ms ease, filter 360ms ease;
            opacity: .7;
            filter: saturate(.88) contrast(.98);
            will-change: transform;
        }
        /* Swiper's own container -- deliberately free of the filmstrip's
           overflow, width and perspective rules, which would stop it laying out. */
        /* overflow:hidden is what keeps the neighbouring brides from spilling out
           sideways, but it clipped the top of the active card too: that card is
           lifted translateY(-76px) and scaled 1.085 so it rides up over the reel's
           upper sprocket track, and everything above the swiper's own top edge was
           being cut off -- so the centre bride never appeared to overlap the reel.
           Padding moves the clip boundary up while the equal negative margin keeps
           the swiper's layout position identical, which is the standard way to give
           a scaled-up active slide room without switching overflow to visible (a
           single visible axis computes to auto and adds a scrollbar).
           110px covers the desktop lift (76px + ~15px of scale growth) and the
           mobile one (54px + ~9px). */
        .rvh-rb-swiper {
            width: 100%;
            overflow: hidden;
            padding-top: 110px;
            margin-top: -110px;
        }
        .rvh-rb-swiper .swiper-wrapper { align-items: center; }
        .rvh-rb-viewport:has(.rvh-rb-swiper) { overflow: visible; padding-left: 0; padding-right: 0; }
        .rvh-rb-track:has(.rvh-rb-swiper) { width: 100%; display: block; }
        .rvh-rb-track.rvh-has-active .rvh-rb-card:not(.swiper-slide-active) { opacity: .63; filter: saturate(.78) contrast(.96); transform: translateZ(-8px) scale(.988); }

        .rvh-rb-select {
            display: block; width: 100%; text-decoration: none;
            border: 0; background: transparent; padding: 0;
            color: inherit; cursor: pointer; text-align: center; outline: none;
            position: relative;
        }
        .rvh-rb-select:focus-visible .rvh-rb-photo { outline: 2px solid var(--brand-color); outline-offset: 6px; }
        /* the centred card opens its region on click, so say so on hover */
        .rvh-rb-card.swiper-slide-active .rvh-rb-select { cursor: pointer; }
        .rvh-rb-card:not(.swiper-slide-active) .rvh-rb-select { cursor: zoom-in; }

        .rvh-rb-frame { position: relative; }

        .rvh-rb-photo {
            display: block; position: relative;
            aspect-ratio: 1.3;
            border-radius: 9px;
            background: #e7d9c6;
            overflow: visible;
            border: 5px solid var(--rb-mount);
            box-shadow: 0 7px 15px rgba(83,54,35,.12), inset 0 0 0 1px rgba(137,101,63,.08);
            transform-style: preserve-3d;
            transition: box-shadow 470ms ease;
        }
        .rvh-rb-photo img {
            width: 100%; height: 100%; display: block; object-fit: cover;
            border-radius: 4px;
            filter: sepia(.07) saturate(.9) contrast(.99);
            transition: transform 650ms cubic-bezier(.2,.8,.25,1);
        }
        .rvh-rb-sheen {
            position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
            background:
                radial-gradient(circle at 90% 10%, rgba(255,195,110,.22) 0%, transparent 45%),
                linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
            mix-blend-mode: screen;
            transition: opacity 470ms ease;
        }

        .rvh-rb-label {
            position: absolute;
            z-index: 2;
            bottom: 14px; left: 14px; right: 14px;
            display: flex; justify-content: space-between; align-items: center;
            gap: 12px;
            padding: 10px 16px;
            background: rgba(255,250,243,.91);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(184,149,97,.3);
            border-radius: 4px;
            box-shadow: 0 6px 14px rgba(73,48,31,.09);
            transform: translateY(6px);
            opacity: .85;
            pointer-events: none;
            transition: transform 420ms ease, opacity 420ms ease, background 420ms ease;
        }
        .rvh-rb-label-text { text-align: left; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .rvh-rb-label strong {
            font-family: 'Cinzel', serif;
            font-weight: 500;
            font-size: 1rem;
            letter-spacing: .3px;
            color: var(--brand-color);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .rvh-rb-label em {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .7rem;
            color: rgba(59,51,45,.6);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        .rvh-rb-discover {
            flex: none;
            pointer-events: auto;
            font-family: 'Cinzel', serif;
            font-size: .62rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--brand-color);
            text-decoration: none;
            white-space: nowrap;
        }
        .rvh-rb-discover:hover { color: var(--gold); }

        .rvh-rb-card.swiper-slide-active {
            z-index: 30 !important;
            opacity: 1 !important;
            filter: none !important;
            transform:
                translateY(-76px)
                translateZ(88px)
                rotateX(1.1deg)
                rotateZ(-0.24deg)
                scale(1.085);
        }
        .rvh-rb-card.swiper-slide-active .rvh-rb-photo {
            border-width: 7px;
            box-shadow:
                0 52px 62px rgba(60,38,22,.24),
                0 24px 32px rgba(60,38,22,.15),
                0 7px 10px rgba(60,38,22,.09),
                inset 0 0 0 1px rgba(147,112,63,.14);
        }
        .rvh-rb-card.swiper-slide-active .rvh-rb-photo::before {
            content: '';
            position: absolute;
            left: 7px; right: -6px; top: 8px; bottom: -12px;
            z-index: -2;
            border-radius: 7px;
            background: linear-gradient(145deg, #f3e8d9 0%, #ddc5a5 100%);
            border: 1px solid rgba(127,91,55,.18);
            transform: translateZ(-4px) rotate(.35deg);
            box-shadow: 0 11px 18px rgba(69,45,30,.1), 0 2px 3px rgba(69,45,30,.06);
        }
        .rvh-rb-card.swiper-slide-active .rvh-rb-photo img { transform: scale(1.075); }
        .rvh-rb-card.swiper-slide-active .rvh-rb-sheen { opacity: 0; }
        .rvh-rb-card.swiper-slide-active::after {
            content: '';
            position: absolute;
            left: 7%; right: 7%; bottom: -61px;
            height: 36px;
            z-index: -1;
            border-radius: 50%;
            background: rgba(60,38,22,.22);
            filter: blur(14px);
            opacity: .82;
            transform: translateZ(-36px) scaleX(.86);
            pointer-events: none;
        }
        .rvh-rb-card.swiper-slide-active .rvh-rb-label {
            transform: translateY(-3px) translateZ(18px);
            opacity: 1;
            background: rgba(255,250,243,.98);
            border-color: rgba(184,149,97,.55);
        }

        @media (hover:hover) and (pointer:fine) {
            .rvh-rb-card:not(.swiper-slide-active):hover {
                z-index: 5;
                opacity: .9 !important;
                filter: none !important;
                transform: translateY(-13px) translateZ(18px) scale(1.018);
            }
            .rvh-rb-card:not(.swiper-slide-active):hover .rvh-rb-photo {
                box-shadow: 0 18px 28px rgba(72,47,31,.16), 0 6px 10px rgba(72,47,31,.09);
            }
        }

        .rvh-rb-control {
            position: relative; z-index: 20; flex: none;
            width: 42px; height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(147,112,63,.4);
            background: radial-gradient(circle at 35% 30%, #fff, #f3e9d6 58%, #dcc9a3);
            color: var(--brand-color);
            box-shadow: 0 9px 20px rgba(78,52,36,.13), inset 0 0 0 4px rgba(255,255,255,.3);
            cursor: pointer;
            font-size: 20px; line-height: 1;
            transition: transform 220ms ease, box-shadow 220ms ease;
        }
        .rvh-rb-control:hover { transform: scale(1.06); box-shadow: 0 12px 25px rgba(78,52,36,.18), inset 0 0 0 4px rgba(255,255,255,.34); }
        .rvh-rb-control:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 3px; }

        .rvh-rb-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 0 26px; }
        /* justify-content:center, not the flex default. The dots row is a flex
           container stretched to the width of the row between the two arrows, so
           without this the bullets pack against its left edge and sit well left of
           the section's centre even though the container itself is centred. */
        .rvh-rb-dots { display: flex; align-items: center; justify-content: center; gap: 10px; }
        .rvh-rb-dot {
            width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
            background: rgba(147,112,63,.4); cursor: pointer;
            transition: transform 220ms ease, background 220ms ease;
        }
        .rvh-rb-dot:hover { background: rgba(147,112,63,.7); }
        .rvh-rb-dot.rvh-is-active { background: var(--brand-color); transform: scale(1.4); }

        .rvh-rb-below { width: min(680px, calc(100% - 40px)); margin: 46px auto 0; text-align: center; }
        .rvh-rb-note { margin: 0 0 22px; min-height: 20px; font-family: 'Playfair Display', serif; font-style: italic; font-size: .92rem; color: rgba(59,51,45,.7); }
        .rvh-rb-hint { margin: 15px 0 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: .8rem; color: rgba(59,51,45,.5); }

        @media (max-width: 720px) {
            .rvh-rb-shell {
                --perf-track-h: 36px;
                --hole-h: 17px;
                --hole-w: 11px;
                --hole-step: 21px;
            }
            .rvh-rb-shell::before, .rvh-rb-shell::after {
                background-image:
                    linear-gradient(to bottom, rgba(255,255,255,.2), rgba(0,0,0,.14)),
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='36'%3E%3Crect x='5' y='7' width='11' height='17' rx='3' ry='3' fill='%23fffaf3'/%3E%3C/svg%3E");
            }
            .rvh-rb-viewport {
                padding-inline: 20px;
                padding-top: 92px;
                margin-top: -92px;
                padding-bottom: 58px;
                margin-bottom: -58px;
            }
            .rvh-rb-card { width: min(88vw, 350px); padding-left: 11px; padding-right: 11px; }
            .rvh-rb-photo { aspect-ratio: 1.2; }
            .rvh-rb-card.swiper-slide-active {
                transform:
                    translateY(-54px)
                    translateZ(56px)
                    rotateX(.7deg)
                    rotateZ(-.14deg)
                    scale(1.055);
            }
            .rvh-rb-card.swiper-slide-active::after { bottom: -42px; height: 28px; filter: blur(11px); }
            .rvh-rb-control { width: 32px; height: 32px; font-size: 16px; }
            .rvh-rb-nav { gap: 14px; margin-bottom: 20px; }
            .rvh-rb-dots { gap: 8px; }
            .rvh-rb-label { padding: 8px 12px; }
            .rvh-rb-label strong { font-size: .84rem; }
            .rvh-rb-label em { font-size: .6rem; }
            .rvh-rb-discover { font-size: .56rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            .rvh-rb-card { transition: none !important; }
            .rvh-rb-card.swiper-slide-active { transform: translateY(-54px) scale(1.055) !important; }
        }

        /* ---------- NOTES FROM THE STYLIST (hanging polaroid carousel) ---------- */
        .rvh-notes-section {
            width: 100%; max-width: 1320px; margin: 0 auto; padding: 90px 24px 180px; position: relative; z-index: 2;
            display: flex; flex-direction: column; align-items: center; text-align: center;
        }
        .rvh-notes-head-note { font-family: 'Caveat', cursive; font-size: 1.35rem; color: var(--text-dark); opacity: 0.72; text-align: center; margin-top: 6px; line-height: 1.45; }

        .rvh-notes-stage { position: relative; width: 100%; max-width: 1100px; margin-top: 46px; display: flex; justify-content: center; align-items: center; gap: 40px; }

        .rvh-notes-carousel-wrap { display: flex; align-items: center; gap: 20px; position: relative; }
        .rvh-notes-nav-arrow { flex: none; }

        .rvh-hang { position: relative; width: 340px; height: 600px; padding-top: 4px; z-index: 4; perspective: 1200px; }
        .rvh-hang-ribbon {
            position: absolute; top: -46px; left: 50%; transform: translateX(-50%) rotate(0.6deg); width: 34px; height: 230px;
            background: linear-gradient(100deg, #a12a33 0%, #7d1b23 26%, var(--brand-color) 58%, #4d0f14 100%);
            box-shadow: inset -5px 0 10px rgba(0,0,0,0.3), inset 5px 0 8px rgba(255,255,255,0.09), 3px 8px 18px rgba(70,15,20,0.26);
            z-index: 1;
        }
        .rvh-hang-ribbon::before {
            content: ''; position: absolute; bottom: 34px; left: -9px; width: 52px; height: 30px;
            background: linear-gradient(160deg, #8d1f27, #5e1218); transform: rotate(-6deg); border-radius: 2px;
            box-shadow: 0 6px 12px rgba(70,15,20,0.28), inset 0 -3px 7px rgba(0,0,0,0.28);
        }
        .rvh-hang-cloth {
            position: absolute; top: 170px; left: 50%; width: 292px; height: 420px; transform: translateX(-50%) rotate(-1.4deg);
            background:
                repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
                linear-gradient(155deg, #8b1f27, var(--brand-color) 55%, #501016);
            border-radius: 6px; filter: blur(0.3px); box-shadow: 6px 16px 32px rgba(80, 18, 24, 0.3); opacity: 0.92; z-index: 2;
        }

        .rvh-polaroid-stack { position: relative; z-index: 3; margin: 128px auto 0; width: 290px; height: 100%; }
        .rvh-note-card {
            position: absolute; left: 50%; top: 0; width: 262px; padding: 14px 14px 40px;
            background: linear-gradient(160deg, #F3EFE6 0%, #E9E3D7 55%, #DED7C8 100%);
            border-radius: 2px; box-shadow: 0 14px 28px -10px rgba(70, 45, 30, 0.4), 0 2px 4px rgba(70,45,30,0.16);
            transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity, visibility; cursor: pointer;
        }
        .rvh-note-card::after {
            content: ''; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: multiply; pointer-events: none; border-radius: 2px;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
        }
        .rvh-note-card img { display: block; width: 100%; height: 268px; object-fit: cover; filter: saturate(0.94) contrast(1.02); }
        .rvh-note-card-cap { position: absolute; left: 17px; right: 17px; bottom: 13px; display: flex; justify-content: space-between; align-items: flex-end; font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-color); opacity: 0.82; }
        .rvh-note-card-cap span:last-child { text-align: right; opacity: 0.65; }

        /* Swiper drives this stack -- index, drag, loop, autoplay, keyboard and
           a11y. Slides stay in normal flow so Swiper can build its snap grid;
           the cards are 327px tall but sat 280px apart, so the 47px overlap
           comes from a negative spaceBetween. The card is an inner element so
           its rotation survives the transform Swiper writes on the slide. */
        /* The fade itself lives here, not in JS: home.js/community.js set the
           target opacity from each slide's progress, and this transition animates
           it. Swiper applies its own transition-duration after the value changes,
           so relying on that alone made the card blink out instead of fading. */
        .rvh-polaroid-stack .swiper-slide { height: auto !important; display: flex; justify-content: center; transition: opacity .75s cubic-bezier(.25, 1, .5, 1); }
        .rvh-polaroid-stack .swiper-slide .rvh-note-card { position: relative; left: auto; transform: rotate(-1deg); transition: transform .75s cubic-bezier(.25,1,.5,1); }
        .rvh-polaroid-stack .swiper-slide-active .rvh-note-card { transform: rotate(-1.5deg); }
        .rvh-polaroid-stack .swiper-slide-next .rvh-note-card { transform: rotate(1.5deg); }
        .rvh-polaroid-stack .swiper-slide-prev .rvh-note-card { transform: rotate(1deg); }
        .rvh-polaroid-stack .swiper-slide-active .rvh-note-card::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(181, 149, 92, 0.75); pointer-events: none; z-index: 3; }

        .rvh-notes-dots-container { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; }
        .rvh-notes-mobile-strip-wrap { display: none; }
        .rvh-notes-dots-mobile { display: none; }
        .rvh-notes-mobile-controls { display: none; }

        .rvh-tip-panel { width: 440px; max-width: 100%; position: relative; z-index: 5; text-align: left; }
        .rvh-tip-paper { position: relative; padding: 40px 42px 36px; background: linear-gradient(150deg, var(--paper-center) 0%, #F6F0E4 60%, var(--paper-edge) 100%); box-shadow: 0 26px 50px -18px rgba(80, 55, 35, 0.34), 0 3px 8px rgba(80,55,35,0.12); border-radius: 2px; }
        .rvh-tip-paper::after {
            content: ''; position: absolute; inset: 0; opacity: 0.32; mix-blend-mode: multiply; pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='tp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23tp)'/%3E%3C/svg%3E");
        }
        .rvh-tip-frame { position: absolute; inset: 12px; border: 1px solid rgba(181, 149, 92, 0.42); pointer-events: none; }
        .rvh-tip-tape { position: absolute; top: -13px; left: 40px; width: 92px; height: 26px; background: linear-gradient(120deg, rgba(226,205,166,0.55), rgba(240,228,205,0.75)); box-shadow: 0 2px 6px rgba(120,95,60,0.16); transform: rotate(-3deg); opacity: 0.9; }

        .rvh-tip-eyebrow { font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); position: relative; z-index: 2; }
        .rvh-tip-title { font-family: 'Cinzel', serif; font-size: 1.62rem; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-color); margin-top: 8px; position: relative; z-index: 2; }
        .rvh-tip-script { font-family: 'Great Vibes', cursive; font-size: 1.5rem; color: var(--gold); margin-top: 2px; position: relative; z-index: 2; }
        .rvh-tip-rule { width: 54px; height: 1px; margin: 16px 0 18px; background: linear-gradient(to right, var(--gold), transparent); position: relative; z-index: 2; }
        .rvh-tip-text { font-family: 'Playfair Display', serif; font-size: 0.97rem; font-style: italic; line-height: 1.85; color: var(--text-dark); opacity: 0.86; position: relative; z-index: 2; min-height: 140px; }
        .rvh-tip-pair { margin-top: 20px; font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 2.6px; text-transform: uppercase; color: var(--text-dark); opacity: 0.62; position: relative; z-index: 2; }
        .rvh-tip-pair b { color: var(--brand-color); font-weight: 500; opacity: 1; }
        .rvh-tip-sign { margin-top: 22px; font-family: 'Caveat', cursive; font-size: 1.22rem; color: var(--text-dark); opacity: 0.7; position: relative; z-index: 2; }

        .rvh-tip-cta {
            display: inline-flex; align-items: center; gap: 10px; position: relative; margin-top: 26px;
            padding: 14px 32px; border-radius: 999px; border: 0; cursor: pointer;
            background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%);
            color: #fffaf0; text-decoration: none;
            font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
            box-shadow: 0 12px 22px rgba(108,21,28,.3), inset 0 1px 0 rgba(255,255,255,.2);
            transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
        }
        .rvh-tip-cta::before { content: ''; position: absolute; inset: 3px; border-radius: 999px; border: 1px solid rgba(226,205,166,.5); pointer-events: none; }
        .rvh-tip-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(108,21,28,.36), inset 0 1px 0 rgba(255,255,255,.24); }
        .rvh-tip-cta span:last-child { font-size: .95rem; letter-spacing: 0; line-height: 1; }

        .rvh-notes-seal {
            position: absolute; right: -25px; bottom: -25px; width: 84px; height: 84px; border-radius: 50%;
            background: radial-gradient(circle at 34% 30%, #93242c, var(--brand-color) 55%, #470d12 100%);
            box-shadow: 0 12px 22px -8px rgba(70, 15, 20, 0.6), inset 0 -4px 10px rgba(0,0,0,0.35), inset 0 4px 8px rgba(255,255,255,0.1);
            display: flex; align-items: center; justify-content: center;
            font-family: 'Cinzel', serif; font-size: 0.5rem; letter-spacing: 2px; color: rgba(226, 205, 166, 0.72); text-align: center; line-height: 1.5; z-index: 6;
        }

        @media (max-width: 900px) {
            .rvh-notes-section { padding: 70px 18px 130px; }
            .rvh-notes-stage { flex-direction: column; gap: 26px; margin-top: 34px; }
            .rvh-notes-carousel-wrap { flex-direction: row; align-items: center; width: 100%; }
            /* the prev/next arrows move below the strip on mobile, so the
               filmstrip itself gets the full width for the rods to breathe */
            .rvh-notes-carousel-wrap > .rvh-notes-nav-arrow { display: none; }
            .rvh-hang { display: none; }
            .rvh-notes-mobile-strip-wrap { display: block; position: relative; width: 100%; padding: 10px 0; }
            /* the rod -- backmost layer, a single maroon bar the full width of
               the strip. Hidden behind the board everywhere except its own
               tips, which poke out past the board's (narrower) edges */
            .rvh-notes-mobile-rod-line {
                position: absolute; left: 6px; right: 6px; top: 94px; height: 14px; z-index: 0;
                border-radius: 999px;
                background: linear-gradient(90deg, #4d0f14 0%, #7d1b23 12%, var(--brand-color) 50%, #7d1b23 88%, #4d0f14 100%);
                box-shadow: inset 0 -3px 5px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.15), 0 3px 8px rgba(70,15,20,.3);
            }
            /* the board -- middle layer, matching the desktop .rvh-hang-cloth
               treatment (same fabric-weave texture, gradient, rotation).
               Shorter than the cards and narrower than the rod, so it covers
               the rod within its own bounds (showing only in the gaps
               between cards, where nothing else covers it) while the rod's
               tips still poke out past both the board and the cards */
            .rvh-notes-mobile-backdrop {
                position: absolute; top: 40px; bottom: 40px; left: 24px; right: 24px;
                transform: rotate(-0.8deg);
                background:
                    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
                    linear-gradient(155deg, #8b1f27, var(--brand-color) 55%, #501016);
                border-radius: 6px; filter: blur(0.3px);
                box-shadow: 6px 10px 22px rgba(80,18,24,.28); opacity: .92; z-index: 1;
            }
            /* Swiper track -- this surface had no touch handling at all before
               (arrows and dots only); Swiper gives it real drag. */
            .rvh-notes-mobile-strip { position: relative; z-index: 2; padding: 8px 0; overflow: hidden; }
            .rvh-notes-mobile-card {
                position: relative;
                width: 120px; height: auto; cursor: pointer;
                border-radius: 2px; overflow: hidden;
                background: linear-gradient(160deg, #F3EFE6 0%, #E9E3D7 55%, #DED7C8 100%);
                padding: 8px 8px 22px;
                box-shadow: 0 12px 22px -10px rgba(70,45,30,.45);
                transition: opacity .3s ease, transform .3s ease; opacity: .6; transform: scale(.9);
            }
            /* decorative peeks beyond the real first/last card, so the strip
               always shows a neighbour on both sides even at the true ends --
               never a snap target themselves, so a swipe always settles back
               on a real card */
            .rvh-notes-mobile-card-clone { scroll-snap-align: none; pointer-events: none; }
            .rvh-notes-mobile-card::after {
                content: ''; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: multiply; pointer-events: none;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
            }
            .rvh-notes-mobile-card.swiper-slide-active { opacity: 1; transform: scale(1); }
            .rvh-notes-mobile-card.swiper-slide-active::before {
                content: ''; position: absolute; inset: 4px; border: 1px solid rgba(181, 149, 92, 0.75); pointer-events: none; z-index: 2;
            }
            .rvh-notes-mobile-card img { width: 100%; height: 140px; object-fit: cover; display: block; filter: saturate(0.94) contrast(1.02); position: relative; z-index: 1; }
            .rvh-notes-mobile-card-label {
                display: block; margin-top: 6px; font-family: 'Cinzel', serif; font-size: .52rem;
                letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-color); text-align: center;
                position: relative; z-index: 1;
            }
            .rvh-notes-dots-mobile { display: flex; position: static; transform: none; margin-top: 0; justify-content: center; }
            .rvh-notes-mobile-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
            .rvh-notes-mobile-controls .rvh-notes-nav-arrow { display: flex; width: 38px; height: 38px; font-size: .85rem; }
            .rvh-tip-panel { text-align: center; }
            .rvh-tip-paper { padding: 32px 26px 30px; }
            .rvh-notes-seal { width: 66px; height: 66px; right: -12px; bottom: -12px; font-size: .42rem; }
        }

    


        /* ---- Save the Date share: WhatsApp only, name + number, an error line per field ---- */
        .rvh-sd-share-stack { flex-direction: column; align-items: stretch; gap: 12px; }
        .rvh-sd-share-stack .rvh-sd-share-field { flex: none; margin-bottom: 0; }
        .rvh-sd-share-field-msg {
            display: block; min-height: 16px; margin-top: 5px;
            font-family: 'Playfair Display', serif; font-style: italic;
            font-size: .78rem; line-height: 1.3; color: #a22; text-align: left;
        }


        /* ---- album spines on phones: the longer per-ritual lines sit a touch smaller ---- */
        @media (max-width: 680px) {
            .rvh-closed-sub { font-size: .54rem; }
        }