/* =============================================================
   Regina Bianca Music — Design System
   Cinematic, theatrical, premium live-performance brand
   ============================================================= */

/* 1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
    /* Brand palette — cinematic dark with warm champagne gold */
    --rb-bg:           #0B0B0D;   /* near-black stage */
    --rb-bg-alt:       #131317;   /* lifted surface */
    --rb-bg-elev:      #1B1B21;   /* card / modal surface */
    --rb-ink:          #F4EFE6;   /* warm off-white text */
    --rb-ink-soft:     #C9C2B6;   /* secondary copy */
    --rb-ink-muted:    #8B867C;   /* tertiary copy */
    --rb-line:         rgba(244, 239, 230, 0.12);

    --rb-gold:         #C9A961;   /* champagne primary */
    --rb-gold-bright:  #E2C079;   /* hover / highlight */
    --rb-gold-deep:    #8E7536;   /* pressed / shadow */
    --rb-gold-soft:    rgba(201, 169, 97, 0.18);

    --rb-success:      #6FB28A;
    --rb-error:        #D86B6B;

    /* Typography
       - display: editorial serif headlines (h2-h6)
       - script:  flowing cursive for the hero title
       - body:    modern sans for everything else (copy + UI)
    */
    --rb-font-display: 'Playfair Display', Georgia, serif;
    --rb-font-script:  'Corinthia', cursive;
    --rb-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rb-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Modular type scale (mobile-first; clamp scales up) */
    --rb-fs-eyebrow:  0.78rem;
    --rb-fs-body:     1rem;
    --rb-fs-lead:     clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
    --rb-fs-h6:       1.1rem;
    --rb-fs-h5:       1.25rem;
    --rb-fs-h4:       clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem);
    --rb-fs-h3:       clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
    --rb-fs-h2:       clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
    --rb-fs-h1:       clamp(2.6rem, 1.8rem + 4vw, 5rem);

    /* Spacing scale */
    --rb-space-1: 0.25rem;
    --rb-space-2: 0.5rem;
    --rb-space-3: 0.75rem;
    --rb-space-4: 1rem;
    --rb-space-5: 1.5rem;
    --rb-space-6: 2rem;
    --rb-space-7: 3rem;
    --rb-space-8: 4rem;
    --rb-space-9: 6rem;
    --rb-space-10: 8rem;

    /* Section padding rhythm */
    --rb-section-y: clamp(4rem, 3rem + 4vw, 7rem);

    /* Effects */
    --rb-radius-sm: 2px;
    --rb-radius:    4px;
    --rb-radius-lg: 12px;
    --rb-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
    --rb-shadow-glow: 0 0 40px rgba(201, 169, 97, 0.18);

    --rb-ease:  cubic-bezier(0.4, 0, 0.2, 1);
    --rb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --rb-dur:   0.3s;
    --rb-dur-slow: 0.6s;

    /* Bootstrap variable overrides (kept narrow on purpose) */
    --bs-primary: var(--rb-gold);
    --bs-primary-rgb: 201, 169, 97;
    --bs-body-bg: var(--rb-bg);
    --bs-body-color: var(--rb-ink);
    --bs-body-font-family: var(--rb-font-body);
    --bs-body-font-size: var(--rb-fs-body);
    --bs-body-line-height: 1.65;
    --bs-border-color: var(--rb-line);
    --bs-link-color: var(--rb-gold);
    --bs-link-hover-color: var(--rb-gold-bright);
}

/* 2. BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    background-color: var(--rb-bg);
    color: var(--rb-ink);
    font-family: var(--rb-font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.65;
    overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.rb-display {
    font-family: var(--rb-font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
}

h1 { font-size: var(--rb-fs-h1); }
h2 { font-size: var(--rb-fs-h2); }
h3 { font-size: var(--rb-fs-h3); }
h4 { font-size: var(--rb-fs-h4); }

p {
    font-family: var(--rb-font-body);
    color: var(--rb-ink-soft);
    line-height: 1.7;
}

a { color: var(--rb-gold); text-decoration: none; transition: color var(--rb-dur) var(--rb-ease); }
a:hover { color: var(--rb-gold-bright); }

::selection { background: var(--rb-gold); color: var(--rb-bg); }

/* 3. LAYOUT PRIMITIVES
   ---------------------------------------------------------- */
.rb-section { padding-top: var(--rb-section-y); padding-bottom: var(--rb-section-y); }

.rb-eyebrow {
    display: inline-block;
    font-family: var(--rb-font-ui);
    font-size: var(--rb-fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rb-gold);
}

.rb-script {
    font-family: var(--rb-font-script);
    font-weight: 400;
    font-style: normal;
    color: var(--rb-gold);
    line-height: 0.9;
}

/* 4. BUTTONS — minimal editorial style
   ---------------------------------------------------------- */
.rb-btn {
    --rb-btn-color:        var(--rb-ink);
    --rb-btn-bg:           transparent;
    --rb-btn-border:       transparent;
    --rb-btn-color-hover:  var(--rb-bg);
    --rb-btn-bg-hover:     var(--rb-gold);
    --rb-btn-border-hover: var(--rb-gold);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    padding: 0.85em 1.4em;
    font-family: var(--rb-font-ui);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--rb-btn-color);
    background: var(--rb-btn-bg);
    border: 1px solid var(--rb-btn-border);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--rb-dur) var(--rb-ease),
                background-color var(--rb-dur) var(--rb-ease),
                border-color var(--rb-dur) var(--rb-ease);
}
.rb-btn:hover {
    color: var(--rb-btn-color-hover);
    background: var(--rb-btn-bg-hover);
    border-color: var(--rb-btn-border-hover);
}
.rb-btn:focus-visible {
    outline: 1px solid var(--rb-gold-bright);
    outline-offset: 4px;
}

/* Primary — bottom border only. Pure editorial link with arrow.
   No box, no fill, no border-radius — just a 1px gold underline. */
.rb-btn--primary {
    --rb-btn-color: var(--rb-gold);
    --rb-btn-color-hover: var(--rb-gold-bright);
    --rb-btn-bg-hover: transparent;
    --rb-btn-border: var(--rb-gold);
    --rb-btn-border-hover: var(--rb-gold-bright);
    padding: 0.65em 0.4em;
    font-weight: 300;
    letter-spacing: 0.26em;
    border: 0;
    border-bottom: 1px solid var(--rb-btn-border);
    box-shadow: none;
    transition: color var(--rb-dur) var(--rb-ease),
                border-bottom-color var(--rb-dur) var(--rb-ease);
}
.rb-btn--primary:hover {
    background: transparent;
    border-bottom-color: var(--rb-btn-border-hover);
}
.rb-btn--primary .rb-btn__arrow {
    width: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    transition: width var(--rb-dur-slow) var(--rb-ease-out),
                margin-left var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-btn--primary:hover .rb-btn__arrow {
    width: 1.6em;
    margin-left: 0.4em;
}
.rb-btn--primary .rb-btn__arrow svg {
    width: 1.2em;
    height: 0.7em;
    flex-shrink: 0;
}
.rb-btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    animation: rb-spin 0.75s linear infinite;
}
.rb-btn.is-loading { opacity: 0.75; cursor: wait; pointer-events: none; }
.rb-btn.is-loading .rb-btn__spinner { display: block; }
.rb-btn.is-loading .rb-btn__arrow { display: none; }
@keyframes rb-spin { to { transform: rotate(360deg); } }

/* Secondary — borderless link with a thin animated underline.
   Reads as "watch" not "click". */
.rb-btn--link {
    --rb-btn-color: var(--rb-ink);
    --rb-btn-bg-hover: transparent;
    --rb-btn-border-hover: transparent;
    --rb-btn-color-hover: var(--rb-gold-bright);
    padding: 0.85em 0;
    border: 0;
    gap: 0.65em;
}
.rb-btn--link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.35em;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
    transform-origin: left center;
    transition: opacity var(--rb-dur) var(--rb-ease),
                transform var(--rb-dur) var(--rb-ease-out);
}
.rb-btn--link:hover::after {
    opacity: 1;
    transform: scaleX(1.04);
}
.rb-btn--link .rb-btn__play {
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color var(--rb-dur) var(--rb-ease),
                color var(--rb-dur) var(--rb-ease),
                border-color var(--rb-dur) var(--rb-ease);
}
.rb-btn--link:hover .rb-btn__play {
    background: var(--rb-gold);
    border-color: var(--rb-gold);
    color: var(--rb-bg);
}
.rb-btn--link .rb-btn__play svg {
    width: 0.55em;
    height: 0.55em;
    margin-left: 0.08em;
}

.rb-btn__icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
}

/* 5. NAVBAR
   ---------------------------------------------------------- */
.rb-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    padding: var(--rb-space-5) 0;
    background: linear-gradient(to bottom, rgba(11, 11, 13, 0.7), rgba(11, 11, 13, 0));
    transition: background-color var(--rb-dur) var(--rb-ease),
                padding var(--rb-dur) var(--rb-ease);
}
.rb-nav.is-scrolled {
    background: rgba(11, 11, 13, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--rb-space-3) 0;
}

.rb-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-6);
}

.rb-nav__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.rb-nav__logo {
    height: 56px;
    width: auto;
    display: block;
    transition: height var(--rb-dur) var(--rb-ease);
}
.rb-nav.is-scrolled .rb-nav__logo { height: 44px; }

.rb-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--rb-space-7);
    list-style: none;
    margin: 0;
    padding: 0;
}
.rb-nav__item { position: relative; }
.rb-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: var(--rb-space-2) 0;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rb-ink);
    text-decoration: none;
    transition: color var(--rb-dur) var(--rb-ease);
}
/* Submenu parent is a hover/focus trigger, not a link — keep the link cursor
   and stop text selection so it still feels interactive. */
.rb-nav__link--trigger {
    cursor: pointer;
    user-select: none;
}
.rb-nav__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.85em;
    height: 0.6em;
    margin-top: 0.15em;       /* optical alignment with caps */
    color: var(--rb-gold);    /* gold so it reads as an interactive indicator */
    transition: transform var(--rb-dur) var(--rb-ease),
                color var(--rb-dur) var(--rb-ease);
}
.rb-nav__chevron svg { width: 100%; height: 100%; }
.rb-nav__item--has-submenu:hover .rb-nav__chevron,
.rb-nav__item--has-submenu:focus-within .rb-nav__chevron {
    transform: rotate(-180deg);
    color: var(--rb-gold-bright);
}

/* Submenu — desktop dropdown.
   No vertical margin between trigger and menu — instead the menu has top
   padding so there's no "dead zone" the cursor can fall into between
   link and dropdown (which would drop hover state and close the menu). */
.rb-nav__submenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translate(-50%, -10px);
    margin: 0;
    padding: 0.7rem 0;
    list-style: none;
    background: rgba(11, 11, 13, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--rb-line);
    min-width: 320px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--rb-dur) var(--rb-ease),
                visibility var(--rb-dur) var(--rb-ease),
                transform var(--rb-dur) var(--rb-ease-out);
    z-index: 5;
}
/* Invisible hover-bridge that fills the gap between link and submenu so
   the cursor can travel from one to the other without dropping :hover. */
.rb-nav__item--has-submenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.8rem;
    pointer-events: auto;
}
.rb-nav__item--has-submenu:hover .rb-nav__submenu,
.rb-nav__item--has-submenu:focus-within .rb-nav__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.rb-nav__sublink {
    display: block;
    padding: 0.7rem 1.5rem;
    font-family: var(--rb-font-display);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 400;
    color: var(--rb-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--rb-dur) var(--rb-ease),
                background var(--rb-dur) var(--rb-ease);
}
.rb-nav__sublink:hover {
    color: var(--rb-gold);
    background: rgba(201, 169, 97, 0.06);
}
.rb-nav__submenu-divider {
    height: 1px;
    background: var(--rb-line);
    margin: 0.5rem 1.5rem;
}

/* Mobile — submenu just renders inline below the parent (no toggle). */
@media (max-width: 991.98px) {
    .rb-nav__chevron { display: none; }
    .rb-nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        border: 0;
        min-width: 0;
        padding: var(--rb-space-3) 0 0;
        margin: var(--rb-space-3) 0 0;
    }
    .rb-nav__sublink {
        padding: 0.45rem 0;
        font-size: 0.95rem;
    }
    .rb-nav__submenu-divider {
        margin: var(--rb-space-3) 0;
    }
}
.rb-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--rb-gold);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--rb-dur) var(--rb-ease-out);
}
.rb-nav__link:hover { color: var(--rb-gold-bright); }
.rb-nav__link:hover::after,
.rb-nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.rb-nav__link.is-active { color: var(--rb-gold); }

/* Mobile toggle */
.rb-nav__toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    color: var(--rb-ink);
}
.rb-nav__toggle-line {
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    margin: 6px auto;
    transition: transform var(--rb-dur) var(--rb-ease),
                opacity var(--rb-dur) var(--rb-ease);
}
.rb-nav.is-open .rb-nav__toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rb-nav.is-open .rb-nav__toggle-line:nth-child(2) { opacity: 0; }
.rb-nav.is-open .rb-nav__toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .rb-nav__toggle { display: block; }
    .rb-nav__menu {
        position: fixed;
        top: 0; right: 0;
        height: 100dvh;
        width: min(360px, 80vw);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--rb-space-6);
        padding: var(--rb-space-9) var(--rb-space-7);
        background: var(--rb-bg-alt);
        border-left: 1px solid var(--rb-line);
        transform: translateX(100%);
        transition: transform var(--rb-dur-slow) var(--rb-ease-out);
    }
    .rb-nav.is-open .rb-nav__menu { transform: translateX(0); }
    .rb-nav__link { font-size: 1rem; }
}

/* 6. HERO
   ---------------------------------------------------------- */
.rb-hero {
    position: relative;
    min-height: 92vh;
    min-height: 92dvh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    color: var(--rb-ink);
    background-color: #050507;
}

.rb-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
.rb-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transform-origin: 50% 50%;
    will-change: transform;
    animation: rb-ken-burns 28s ease-in-out infinite alternate;
}

/* Cinematic overlay tuned for a centered, small subject:
   - top scrim for nav legibility
   - very gentle vignette (subject sits in the centre)
   - strong bottom scrim only on the lower 35% so the copy block is readable
*/
.rb-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 100% 80% at 50% 45%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.15) 60%,
            rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom,
            rgba(11, 11, 13, 0.5) 0%,
            rgba(11, 11, 13, 0.05) 22%,
            rgba(11, 11, 13, 0) 55%,
            rgba(11, 11, 13, 0.78) 88%,
            rgba(11, 11, 13, 0.96) 100%);
    pointer-events: none;
}

.rb-hero__inner {
    position: relative;
    width: 100%;
    padding-top: var(--rb-space-10);
    padding-bottom: var(--rb-space-9);
}

.rb-hero__content {
    max-width: 760px;
}

.rb-hero__eyebrow {
    margin-bottom: var(--rb-space-5);
}

.rb-hero__headline {
    /* Full romantic script — Italianno needs more visual size than a serif
       at the same point size, so this clamp runs larger than the global h1. */
    font-family: var(--rb-font-script);
    font-size: clamp(4rem, 2.6rem + 6vw, 8rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0;
    margin: 0 0 var(--rb-space-5) 0;
    color: var(--rb-ink);
}

.rb-hero__sub {
    font-family: var(--rb-font-body);
    font-size: var(--rb-fs-lead);
    font-weight: 400;
    line-height: 1.55;
    color: var(--rb-ink-soft);
    max-width: 560px;
    margin: 0 0 var(--rb-space-7) 0;
}

.rb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rb-space-6);
}

@media (max-width: 767.98px) {
    .rb-hero { min-height: 85vh; min-height: 85dvh; }
    .rb-hero__media img { object-position: center center; }
    .rb-hero__inner { padding-bottom: var(--rb-space-8); }
    .rb-hero__actions { flex-direction: column; align-items: flex-start; }
}

/* 6a. HERO — NAME-LED VARIANT (Option 1 layout)
   ----------------------------------------------------------
   Hero text (name + eyebrow + tagline) is grouped together and
   anchored to the vertical centre of the hero. Buttons stay anchored
   to the bottom-left. Beige signature mark sits in the bottom-right.
*/
.rb-hero--name-led {
    align-items: stretch;
}
.rb-hero--name-led .rb-hero__inner {
    display: flex;
    flex-direction: column;
    padding-top: clamp(6rem, 10vh, 9rem); /* clear the fixed nav */
    padding-bottom: clamp(2rem, 4vh, 4rem);
}
/* TOP group + tagline form a single vertically-centred text block.
   Use auto margins to push the block to the centre of the flex column. */
.rb-hero--name-led .rb-hero__top {
    margin-top: auto;
    max-width: 760px;
}
.rb-hero--name-led .rb-hero__headline {
    margin-bottom: var(--rb-space-3);
    line-height: 1;
}
.rb-hero--name-led .rb-hero__eyebrow--below {
    display: block;
    margin: 0;
}
.rb-hero--name-led .rb-hero__middle {
    /* Sits directly below the name group; the auto-margin on .rb-hero__top
       and on .rb-hero__content--bottom centres the whole text stack. */
    margin-bottom: auto;
    padding-top: var(--rb-space-6);
    max-width: 760px;
}
.rb-hero--name-led .rb-hero__middle .rb-hero__sub {
    /* Script font — matches the "Regina Bianca" headline. */
    font-family: var(--rb-font-script);
    font-style: normal;
    font-size: clamp(2rem, 1.4rem + 1.6vw, 3.25rem);
    line-height: 1.05;
    color: var(--rb-ink);
    letter-spacing: 0;
    margin: 0;
    max-width: 720px;
}
.rb-hero--name-led .rb-hero__content--bottom {
    max-width: 760px;
}

/* Safety net — the GSAP stagger entrance on the hero proved unreliable in
   the name-led layout (later targets in the stagger can get stuck at
   opacity:0 when the tab is briefly inactive or the page is busy). Make
   every hero element visible by default so the page is never trapped with
   invisible critical content. GSAP's gsap.to(opacity:1, y:0) becomes a
   no-op when it does run, which is fine. */
.rb-hero--name-led .rb-anim-up,
.rb-hero__signature.rb-anim-up {
    opacity: 1;
    transform: none;
}
.rb-hero--name-led .rb-hero__sub.rb-anim-up {
    opacity: 0.92;
}
.rb-hero__signature.rb-anim-up {
    opacity: 0.95;
}

.rb-hero__signature {
    position: absolute;
    right: clamp(1.5rem, 4vw, 4rem);
    bottom: clamp(1.5rem, 3vw, 3rem);
    width: clamp(120px, 14vw, 200px);
    height: auto;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .rb-hero--name-led .rb-hero__inner {
        padding-top: 6rem;
    }
    .rb-hero__signature {
        width: 96px;
        right: 1rem;
        bottom: 1rem;
    }
}

/* 7. ENTRANCE ANIMATION HOOKS (used by GSAP; CSS fallback)
   ---------------------------------------------------------- */
.rb-anim-up {
    opacity: 0;
    transform: translateY(24px);
}

/* If JS hasn't marked the doc as ready, animate via CSS so content
   never gets trapped invisible (e.g. GSAP CDN blocked). */
html:not(.js-loaded) .rb-anim-up {
    animation: rb-fade-up 0.8s var(--rb-ease-out) 0.2s forwards;
}
@keyframes rb-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* Slow cinematic zoom-in — pure scale, no pan. Alternates so the loop
   reads as a continuous breath rather than a snap-back. */
@keyframes rb-ken-burns {
    0%   { transform: scale(1.02); }
    100% { transform: scale(1.16); }
}

/* 6b. ABOUT SYNOPSIS — homepage introduction section
   ---------------------------------------------------------- */
.rb-about {
    /* Background is set in the divider block (transparent so the watermark
       behind shows through). */
    /* Allow the cascade to extend off the viewport's left edge without
       producing a horizontal scrollbar. */
    overflow: hidden;
}

.rb-about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
    align-items: center;
}
@media (min-width: 992px) {
    .rb-about__grid {
        /* Slightly favour the text column so the editorial headline doesn't orphan */
        grid-template-columns: 0.9fr 1.1fr;
        gap: clamp(2.5rem, 1.5rem + 3vw, 5.5rem);
    }
}

/* Cascade — three stacked portraits.
   Position 0 is the primary slot (full opacity, no offset).
   Positions 1+ peek out to the left with progressive offset, scale-down
   and dimming. The wrapper allows them to extend leftward; the section
   uses overflow:hidden to clip at the viewport edge. */
.rb-about__media {
    position: relative;
    margin: 0;
}
.rb-about__cascade {
    position: relative;
    aspect-ratio: 4 / 5;
}
.rb-about__slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--rb-bg-alt);
    transform-origin: center center;
    transition: transform 1.6s var(--rb-ease-out),
                opacity 1.6s var(--rb-ease-out),
                filter 1.6s var(--rb-ease-out);
    will-change: transform, opacity;
}
.rb-about__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

/* Position 0 = primary slot. Slow zoom only on the foreground slide. */
.rb-about__slide[data-pos="0"] {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    z-index: 3;
    filter: none;
}
.rb-about__slide[data-pos="0"] img {
    animation: rb-slow-zoom 24s ease-in-out infinite alternate;
}

/* Position 1 = first peek, offset left + slightly smaller + dimmer. */
.rb-about__slide[data-pos="1"] {
    transform: translate3d(-32%, 0, 0) scale(0.92);
    opacity: 0.55;
    z-index: 2;
    filter: brightness(0.78) saturate(0.85);
}

/* Position 2 = furthest peek, drifting toward / off the viewport edge. */
.rb-about__slide[data-pos="2"] {
    transform: translate3d(-62%, 0, 0) scale(0.84);
    opacity: 0.32;
    z-index: 1;
    filter: brightness(0.62) saturate(0.7);
}

@keyframes rb-slow-zoom {
    0%   { transform: scale(1.02); }
    100% { transform: scale(1.12); }
}

.rb-about__content {
    max-width: 640px;
}

.rb-about__headline {
    font-family: var(--rb-font-display);
    font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.3rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: var(--rb-space-5) 0 var(--rb-space-6);
    /* Each sentence breaks where forced (<br>); keep the rest from wrapping
       awkwardly in mid-sentence on tight desktop widths. */
    text-wrap: balance;
}
.rb-about__headline em {
    font-style: italic;
    font-weight: 500;
    color: var(--rb-ink);
}

.rb-about__lead {
    font-size: var(--rb-fs-lead);
    color: var(--rb-ink);
}

.rb-about__copy {
    font-family: var(--rb-font-body);
    color: var(--rb-ink-soft);
    margin-bottom: var(--rb-space-5);
}

.rb-about__quote {
    font-family: var(--rb-font-script);
    font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.6rem);
    font-weight: 400;
    line-height: 1;
    color: var(--rb-gold);
    margin: var(--rb-space-7) 0;
    padding-left: var(--rb-space-5);
    border-left: 1px solid var(--rb-gold);
    quotes: none;
}
.rb-about__quote::before,
.rb-about__quote::after { content: ""; }

.rb-about .rb-btn--primary {
    margin-top: var(--rb-space-3);
}

@media (max-width: 767.98px) {
    /* On mobile the cascade reads as visual noise — show only the main slide. */
    .rb-about__media { max-width: 480px; margin-inline: auto; }
    .rb-about__slide:not([data-pos="0"]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rb-about__slide { transition: none; }
    .rb-about__slide[data-pos="0"] img { animation: none; transform: scale(1.04); }
}

/* 6b2. SCRIPT WATERMARK DIVIDER — "Lyrically yours" tucked behind the sections
   ----------------------------------------------------------
   Approach: zero-height element placed between about and experiences in
   source order. The text is absolutely positioned and crosses the section
   boundary (half above, half below). z-index:-1 puts the watermark behind
   sibling sections, which sit at z-index:1; about's transparent background
   lets the watermark show through its padding area, with section content
   painting above it. */
.rb-divider-script {
    position: relative;
    z-index: -1;
    height: 0;
    margin: 0;
    padding: 0;
    overflow-x: clip;          /* prevent horizontal scroll from rotated wide text */
    overflow-y: visible;       /* allow the text to bleed up + down into adjacent sections */
    pointer-events: none;
    user-select: none;
}
.rb-divider-script__text {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-4deg);
    font-family: var(--rb-font-script);
    font-size: clamp(5rem, 3rem + 10vw, 14rem);
    font-weight: 400;
    line-height: 1;
    /* Solid colour, NOT opacity — Corinthia letterforms overlap, and stacked
       transparency compounds at the joins. A flat colour just slightly
       lighter than the page background reads cleanly. */
    color: #1a1a1f;
    white-space: nowrap;
}

/* Sections sit above the watermark and have no opaque background, so the
   script reads through their padding areas while their content paints
   cleanly on top. */
.rb-about,
.rb-experiences {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* 6c. SIGNATURE EXPERIENCES — service entry-point cards
   ---------------------------------------------------------- */
.rb-experiences__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--rb-space-9);
}
.rb-experiences__heading {
    font-family: var(--rb-font-display);
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: 0 0 var(--rb-space-4);
}
.rb-experiences__sub {
    font-size: var(--rb-fs-lead);
    color: var(--rb-ink-soft);
    margin: 0;
}

.rb-experiences__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
}
@media (min-width: 768px) {
    .rb-experiences__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
    }

    /* Initial state — outer cards translated toward the middle and dimmed,
       sitting behind it. The middle card stays prominent. When the section
       gets the `.is-revealed` class (driven by IntersectionObserver), the
       spread animation runs once. */
    .rb-experiences__grid > .rb-experience {
        position: relative;
    }
    .rb-experiences__grid > .rb-experience:nth-child(1) {
        transform: translateX(72%) scale(0.94);
        opacity: 0.5;
        z-index: 1;
        pointer-events: none;
    }
    .rb-experiences__grid > .rb-experience:nth-child(2) {
        z-index: 2;
    }
    .rb-experiences__grid > .rb-experience:nth-child(3) {
        transform: translateX(-72%) scale(0.94);
        opacity: 0.5;
        z-index: 1;
        pointer-events: none;
    }

    /* Reveal — fires once when the section reaches its threshold. */
    .rb-experiences.is-revealed .rb-experiences__grid > .rb-experience:nth-child(1) {
        animation: rb-experience-spread-left 1.4s var(--rb-ease-out) forwards;
        pointer-events: auto;
    }
    .rb-experiences.is-revealed .rb-experiences__grid > .rb-experience:nth-child(3) {
        animation: rb-experience-spread-right 1.4s var(--rb-ease-out) forwards;
        pointer-events: auto;
    }
}

@keyframes rb-experience-spread-left {
    from { transform: translateX(72%) scale(0.94); opacity: 0.5; }
    to   { transform: translateX(0) scale(1);       opacity: 1; }
}
@keyframes rb-experience-spread-right {
    from { transform: translateX(-72%) scale(0.94); opacity: 0.5; }
    to   { transform: translateX(0) scale(1);        opacity: 1; }
}

/* Card — whole-card link, no chrome. Image leads, text follows. */
.rb-experience {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-5);
    color: var(--rb-ink);
    text-decoration: none;
    transition: transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-experience:hover,
.rb-experience:focus-visible {
    transform: translateY(-4px);
    color: var(--rb-ink);
}
.rb-experience:focus-visible {
    outline: 1px solid var(--rb-gold-bright);
    outline-offset: 6px;
}

.rb-experience__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--rb-bg-alt);
}
.rb-experience__media::after {
    /* Soft bottom gradient — adds depth, lifts on hover */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(11, 11, 13, 0) 45%,
        rgba(11, 11, 13, 0.55) 100%);
    opacity: 1;
    transition: opacity var(--rb-dur-slow) var(--rb-ease);
    pointer-events: none;
}
.rb-experience__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1);
    transition: transform 1.6s var(--rb-ease-out);
    will-change: transform;
}
.rb-experience:hover .rb-experience__media img {
    transform: scale(1.05);
}
.rb-experience:hover .rb-experience__media::after {
    opacity: 0.55;
}

.rb-experience__body {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-4);
    flex: 1;   /* fill remaining card height so the CTA can pin to the bottom */
}
.rb-experience__title {
    font-family: var(--rb-font-display);
    font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: 0;
}
.rb-experience__copy {
    font-family: var(--rb-font-body);
    font-size: 0.95rem;
    color: var(--rb-ink-soft);
    line-height: 1.65;
    margin: 0;
}

/* CTA — same minimal bottom-border + arrow language as the primary button.
   margin-top:auto pushes the CTA to the bottom of the body so all three
   cards' CTAs line up horizontally regardless of description length. */
.rb-experience__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.7em;
    margin-top: auto;
    padding: 0.55em 0.4em;
    font-family: var(--rb-font-ui);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--rb-gold);
    border-bottom: 1px solid var(--rb-gold);
    transition: color var(--rb-dur) var(--rb-ease),
                border-bottom-color var(--rb-dur) var(--rb-ease);
}
.rb-experience:hover .rb-experience__cta {
    color: var(--rb-gold-bright);
    border-bottom-color: var(--rb-gold-bright);
}
.rb-experience__cta-arrow {
    width: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    transition: width var(--rb-dur-slow) var(--rb-ease-out),
                margin-left var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-experience:hover .rb-experience__cta-arrow {
    width: 1.6em;
    margin-left: 0.4em;
}
.rb-experience__cta-arrow svg {
    width: 1.2em;
    height: 0.7em;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .rb-experience,
    .rb-experience__media img,
    .rb-experience__media::after,
    .rb-experience__cta,
    .rb-experience__cta-arrow {
        transition: none;
    }
    .rb-experience:hover { transform: none; }
    .rb-experience:hover .rb-experience__media img { transform: none; }
    /* Skip the overlap entry — show cards in their natural positions. */
    .rb-experiences__grid > .rb-experience:nth-child(1),
    .rb-experiences__grid > .rb-experience:nth-child(3) {
        transform: none;
        opacity: 1;
        pointer-events: auto;
        animation: none;
    }
}

/* 6d. PERFORMANCE SPOTLIGHT — featured video + small supporting thumbnails
   ---------------------------------------------------------- */
.rb-spotlight {
    position: relative;
    z-index: 1;        /* keeps the section above the script watermark */
}

.rb-spotlight__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--rb-space-8);
}
.rb-spotlight__heading {
    font-family: var(--rb-font-display);
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: 0 0 var(--rb-space-4);
}
.rb-spotlight__sub {
    font-size: var(--rb-fs-lead);
    color: var(--rb-ink-soft);
    margin: 0;
}

.rb-spotlight__featured {
    margin: 0 auto var(--rb-space-7);
    max-width: 1100px;
}

.rb-spotlight__supporting {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-5);
    margin: 0 auto var(--rb-space-8);
    max-width: 1100px;
}
@media (min-width: 768px) {
    .rb-spotlight__supporting {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--rb-space-6);
    }
}

.rb-spotlight__cta {
    text-align: center;
}

/* Video facade — thumbnail button that swaps to an iframe on click */
.rb-video {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--rb-bg-alt);
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    color: var(--rb-ink);
    transition: transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-video:hover { transform: translateY(-2px); }

.rb-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 1.4s var(--rb-ease-out),
                filter var(--rb-dur) var(--rb-ease);
    will-change: transform;
}
.rb-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(11, 11, 13, 0.10) 0%,
        rgba(11, 11, 13, 0.45) 100%);
    transition: opacity var(--rb-dur) var(--rb-ease);
    pointer-events: none;
}
.rb-video:hover img,
.rb-video:focus-visible img {
    transform: scale(1.04);
    filter: brightness(0.92);
}
.rb-video:hover::after { opacity: 0.55; }

.rb-video:focus-visible {
    outline: 1px solid var(--rb-gold-bright);
    outline-offset: 4px;
}

/* Play badge — circular outline with a centered triangle */
.rb-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 239, 230, 0.75);
    border-radius: 50%;
    background: rgba(11, 11, 13, 0.45);
    color: var(--rb-ink);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    transition: background var(--rb-dur) var(--rb-ease),
                border-color var(--rb-dur) var(--rb-ease),
                color var(--rb-dur) var(--rb-ease),
                transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-video:hover .rb-video__play,
.rb-video:focus-visible .rb-video__play {
    background: var(--rb-gold);
    border-color: var(--rb-gold);
    color: var(--rb-bg);
    transform: translate(-50%, -50%) scale(1.05);
}
.rb-video__play svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.18rem;   /* optical centring of the play triangle */
}
.rb-video--featured .rb-video__play {
    width: 6rem;
    height: 6rem;
}
.rb-video--featured .rb-video__play svg {
    width: 2rem;
    height: 2rem;
}

/* Iframe injected after click */
.rb-video.is-playing iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .rb-video,
    .rb-video img,
    .rb-video__play,
    .rb-video::after {
        transition: none;
    }
    .rb-video:hover { transform: none; }
    .rb-video:hover img { transform: none; }
}

/* 6e. PRE-FOOTER CTA — quiet emotional finale before the footer
   ---------------------------------------------------------- */
.rb-cta {
    position: relative;
    z-index: 1;
    text-align: center;
}
.rb-cta__inner {
    max-width: 760px;
    margin: 0 auto;
}
.rb-cta__headline {
    font-family: var(--rb-font-display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: var(--rb-space-5) 0 var(--rb-space-5);
    text-wrap: balance;
}
.rb-cta__headline em {
    font-style: italic;
    font-weight: 500;
    color: var(--rb-gold);
}
.rb-cta__sub {
    font-size: var(--rb-fs-lead);
    color: var(--rb-ink-soft);
    margin: 0 0 var(--rb-space-7);
}
.rb-cta .rb-btn--primary {
    display: inline-flex;
}

/* ============================================================
   ABOUT PAGE — cinematic editorial layout (7 acts)
   ============================================================ */

/* Act 1 — Intimate hero (full-bleed left image)
   ---------------------------------------------------------- */
.rb-about-hero {
    overflow-x: clip;
    /* No top padding — the image's top edge sits flush with the bottom of
       the fixed nav. The text column is vertically centred against the
       (much taller) image, so the headline naturally clears the nav. */
    padding-top: 0;
}
.rb-about-hero__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
    align-items: center;
    padding: 0 var(--rb-space-4);
}
@media (min-width: 992px) {
    .rb-about-hero__layout {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 1.5rem + 3vw, 5.5rem);
        /* No left padding — image's left edge meets the viewport's left edge.
           Right padding aligns text to where the container's right edge would be. */
        padding-left: 0;
        padding-right: max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
    }
}
.rb-about-hero__media {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--rb-bg-alt);
}
@media (max-width: 991.98px) {
    .rb-about-hero__media { max-width: 520px; margin: 0 auto; }
}
.rb-about-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    will-change: transform;
    animation: rb-slow-zoom 24s ease-in-out infinite alternate;
}
.rb-about-hero__copy { max-width: 660px; }
.rb-about-hero__headline {
    font-family: var(--rb-font-display);
    font-size: clamp(2.4rem, 1.7rem + 2.8vw, 4rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--rb-ink);
    margin: var(--rb-space-5) 0 0;
    text-wrap: balance;
}
.rb-about-hero__headline-script {
    display: block;
    font-family: var(--rb-font-script);
    font-size: 1.85em;       /* up from 1.55 — Corinthia needs more visual mass */
    line-height: 0.65;       /* tight so the script wraps close to itself */
    letter-spacing: -0.005em;
    color: var(--rb-gold);
    margin-top: 0.2em;       /* gap above so script ascenders clear the serif line */
}

/* Act 2 — Sticky scroll narrative (full-bleed left image, same alignment as hero)
   ---------------------------------------------------------- */
.rb-about-chapters {
    position: relative;
    overflow-x: clip;
}
.rb-about-chapters__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
    padding: 0 var(--rb-space-4);
}
@media (min-width: 992px) {
    .rb-about-chapters__layout {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 1.5rem + 3vw, 5.5rem);
        align-items: start;
        padding-left: 0;
        padding-right: max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
    }
}

/* Sticky image stack — desktop only */
.rb-about-chapters__sticky { display: none; }
@media (min-width: 992px) {
    .rb-about-chapters__sticky {
        display: block;
        position: sticky;
        top: 7rem;
        height: fit-content;
    }
}
.rb-about-chapters__images {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--rb-bg-alt);
}
.rb-about-chapters__image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s var(--rb-ease-out);
    will-change: opacity;
}
.rb-about-chapters__image.is-active { opacity: 1; }
.rb-about-chapters__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scrolling text column — generous gap between chapters so each one has
   a long scroll runway while the sticky image stays put. */
.rb-about-chapters__scroll {
    display: flex;
    flex-direction: column;
    gap: clamp(12rem, 10rem + 10vw, 24rem);
}
.rb-about-chapters__chapter {
    /* Mobile: image inline above text */
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-5);
}
.rb-about-chapters__inline {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--rb-bg-alt);
}
.rb-about-chapters__inline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 992px) {
    /* On desktop the inline images are redundant — sticky frame handles it. */
    .rb-about-chapters__inline { display: none; }
}
.rb-about-chapters__num {
    display: inline-block;
    font-family: var(--rb-font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rb-gold);
    margin-bottom: var(--rb-space-3);
}
.rb-about-chapters__chapter p {
    font-family: var(--rb-font-body);
    color: var(--rb-ink);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
    font-weight: 300;
    line-height: 1.7;
    margin: 0 0 var(--rb-space-5);
    max-width: 56ch;
}
.rb-about-chapters__chapter p em {
    font-family: var(--rb-font-display);
    font-style: italic;
    color: var(--rb-ink);
    font-size: 1.05em;
}

/* Act 3 — Pull-quote takeover with looping video background
   ---------------------------------------------------------- */
.rb-about-quote {
    position: relative;
    padding: clamp(6rem, 4rem + 8vw, 12rem) 0;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

/* Background layer — holds either a static image (default) or a YouTube
   iframe (swapped in by main.js when motion is OK). */
.rb-about-quote__bg-video {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

/* Image fallback (no-JS / reduced-motion) */
.rb-about-quote__bg-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(0.4) saturate(0.6);
    transform: scale(1.1);
}

/* YouTube iframe — sized to cover any container/viewport ratio.
   max() picks whichever dimension is larger so 16:9 always covers. */
.rb-about-quote__bg-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100vw, calc(100vh * 16 / 9));
    height: max(100vh, calc(100vw * 9 / 16));
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    /* Sharp video, lifted brightness — overlay handles text legibility. */
    filter: brightness(0.95) saturate(0.9);
}

/* Cinematic overlay sits above the video, below the text. */
.rb-about-quote__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at center,
            rgba(11, 11, 13, 0.4) 0%,
            rgba(11, 11, 13, 0.85) 80%),
        linear-gradient(to bottom,
            rgba(11, 11, 13, 0.55) 0%,
            rgba(11, 11, 13, 0.30) 35%,
            rgba(11, 11, 13, 0.30) 65%,
            rgba(11, 11, 13, 0.65) 100%);
    pointer-events: none;
}
.rb-about-quote__text {
    margin: 0;
    font-family: var(--rb-font-script);
    font-size: clamp(3.5rem, 2.5rem + 6vw, 8rem);
    font-weight: 400;
    line-height: 1;
    color: var(--rb-ink);
    text-wrap: balance;
    quotes: none;
}
.rb-about-quote__text::before,
.rb-about-quote__text::after { content: none; }
.rb-about-quote__open,
.rb-about-quote__close {
    color: var(--rb-gold);
    margin: 0 0.05em;
}
.rb-about-quote__cite {
    display: block;
    margin-top: var(--rb-space-5);
    font-family: var(--rb-font-ui);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rb-ink-muted);
}

/* Act 4 — Notable Stages
   ---------------------------------------------------------- */
.rb-about-stages__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--rb-space-9);
}
.rb-about-stages__heading {
    font-family: var(--rb-font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: var(--rb-space-4) 0 0;
    text-wrap: balance;
}
.rb-about-stages__sub {
    font-family: var(--rb-font-body);
    font-size: var(--rb-fs-lead);
    line-height: 1.6;
    color: var(--rb-ink-soft);
    margin: var(--rb-space-5) 0 0;
    text-wrap: balance;
}
.rb-about-stages__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
}
@media (min-width: 768px) {
    .rb-about-stages__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
    }
}
.rb-about-stages__card {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-4);
}
.rb-about-stages__media {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--rb-bg-alt);
    position: relative;
}
.rb-about-stages__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11,11,13,0.05) 50%, rgba(11,11,13,0.45));
    pointer-events: none;
}
.rb-about-stages__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--rb-ease-out);
    will-change: transform;
}
.rb-about-stages__card:hover .rb-about-stages__media img {
    transform: scale(1.04);
}
.rb-about-stages__year {
    font-family: var(--rb-font-ui);
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rb-gold);
    display: inline-block;
}
.rb-about-stages__name {
    font-family: var(--rb-font-display);
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: 0;
}
.rb-about-stages__name small {
    display: block;
    font-family: var(--rb-font-body);
    font-size: 0.85rem;
    color: var(--rb-ink-soft);
    letter-spacing: 0;
    text-transform: none;
    margin-top: 0.2em;
    font-style: italic;
}

/* Act 5 — The Repertoire
   ---------------------------------------------------------- */
.rb-about-repertoire__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--rb-space-9);
}
.rb-about-repertoire__heading {
    font-family: var(--rb-font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: var(--rb-space-4) 0 0;
    text-wrap: balance;
}

.rb-about-repertoire__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-8);
    align-items: start;
}
@media (min-width: 992px) {
    .rb-about-repertoire__layout {
        /* Two groups now — words (languages + genres tightly together) on
           the left, listen/watch on the right with breathing room. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
        column-gap: clamp(3rem, 2rem + 2vw, 5.5rem);
        row-gap: var(--rb-space-7);
    }
}

/* Words wrapper — languages directly above genres, no third-column gap */
.rb-about-repertoire__words {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-7);
}

/* Languages — flowing prose, not a stacked list */
.rb-about-repertoire__languages {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-2);
}
.rb-about-repertoire__lang-lead {
    font-family: var(--rb-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
    line-height: 1.3;
    color: var(--rb-ink-soft);
    margin: 0;
}
.rb-about-repertoire__lang-list {
    font-family: var(--rb-font-script);
    font-weight: 400;
    font-size: clamp(2.3rem, 1.6rem + 2.5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--rb-ink);
    margin: 0;
    text-wrap: balance;
}

/* Genre list */
.rb-about-repertoire__genres { display: flex; flex-direction: column; gap: var(--rb-space-4); }
.rb-about-repertoire__genre-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-3);
}
.rb-about-repertoire__genre-list li {
    font-family: var(--rb-font-display);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--rb-ink);
    padding-bottom: var(--rb-space-3);
    border-bottom: 1px solid var(--rb-line);
}
.rb-about-repertoire__genre-list li:last-child { border-bottom: 0; }
/* Subhead within the genre stack, e.g. "Modern arrangements of". */
.rb-about-repertoire__genre-subhead {
    display: block;
    margin-top: var(--rb-space-2);
    color: var(--rb-ink-soft);
}

/* Listen column — Spotify card + small YouTube grid */
.rb-about-repertoire__listen {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-5);
}

/* Spotify card — opens artist page directly. No iframe, no upsell. */
.rb-spotify-card {
    --rb-spotify-green: #1DB954;
    display: flex;
    align-items: center;
    gap: var(--rb-space-4);
    padding: 1.1rem 1.4rem;
    background: var(--rb-bg-alt);
    border: 1px solid var(--rb-line);
    border-radius: 12px;
    color: var(--rb-ink);
    text-decoration: none;
    transition: background var(--rb-dur) var(--rb-ease),
                border-color var(--rb-dur) var(--rb-ease),
                transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-spotify-card:hover {
    background: var(--rb-bg-elev);
    border-color: rgba(29, 185, 84, 0.45);
    transform: translateY(-1px);
}
.rb-spotify-card__icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rb-spotify-green);
}
.rb-spotify-card__icon svg { width: 100%; height: 100%; }
.rb-spotify-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
}
.rb-spotify-card__label {
    font-family: var(--rb-font-ui);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rb-ink-soft);
}
.rb-spotify-card__name {
    font-family: var(--rb-font-display);
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--rb-ink);
}
.rb-spotify-card__arrow {
    flex-shrink: 0;
    width: 1.6em;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    color: var(--rb-gold);
    transition: transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-spotify-card:hover .rb-spotify-card__arrow {
    transform: translateX(0.3em);
}
.rb-spotify-card__arrow svg { width: 1.4em; height: 0.7em; }
.rb-about-repertoire__videos {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-4);
}
.rb-about-repertoire__video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rb-space-3);
}
.rb-about-repertoire__video {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rb-bg-alt);
    text-decoration: none;
    transition: transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-about-repertoire__video:hover { transform: translateY(-2px); }
.rb-about-repertoire__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--rb-ease-out),
                filter var(--rb-dur) var(--rb-ease);
    will-change: transform;
}
.rb-about-repertoire__video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11,11,13,0.05) 0%, rgba(11,11,13,0.55) 100%);
    transition: opacity var(--rb-dur) var(--rb-ease);
    pointer-events: none;
}
.rb-about-repertoire__video:hover img { transform: scale(1.05); filter: brightness(0.92); }
.rb-about-repertoire__video:hover::after { opacity: 0.55; }
.rb-about-repertoire__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 239, 230, 0.7);
    border-radius: 50%;
    background: rgba(11, 11, 13, 0.4);
    color: var(--rb-ink);
    pointer-events: none;
    transition: background var(--rb-dur) var(--rb-ease),
                border-color var(--rb-dur) var(--rb-ease),
                color var(--rb-dur) var(--rb-ease);
}
.rb-about-repertoire__video:hover .rb-about-repertoire__video-play {
    background: var(--rb-gold);
    border-color: var(--rb-gold);
    color: var(--rb-bg);
}
.rb-about-repertoire__video-play svg {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.1rem;
}

/* Inline gallery CTA — same minimal language as the primary buttons */
.rb-about-repertoire__videos-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.6em;
    padding: 0.4em 0;
    font-family: var(--rb-font-ui);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--rb-gold);
    border-bottom: 1px solid var(--rb-gold);
    text-decoration: none;
    transition: color var(--rb-dur) var(--rb-ease),
                border-bottom-color var(--rb-dur) var(--rb-ease);
}
.rb-about-repertoire__videos-cta svg { width: 1.4em; height: 0.7em; }
.rb-about-repertoire__videos-cta:hover {
    color: var(--rb-gold-bright);
    border-bottom-color: var(--rb-gold-bright);
}

/* Act 6 — Closing manifesto with parallax
   ---------------------------------------------------------- */
.rb-about-closing {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    /* Generous padding gives the parallax bg room to translate without
       exposing the background. */
    padding: clamp(8rem, 6rem + 6vw, 14rem) 0;
}

/* Parallax bg — extends beyond section bounds so it never reveals an
   empty edge as it translates with scroll. */
.rb-about-closing__bg {
    position: absolute;
    top: -35%;
    left: 0;
    right: 0;
    bottom: -35%;
    z-index: -2;
    will-change: transform;
}
.rb-about-closing__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pull the focal point up to her face. Package 03 is a portrait
       composition where the subject's head sits in the upper third. */
    object-position: center 18%;
}

/* Cinematic overlay — radial vignette plus top/bottom scrims. */
.rb-about-closing__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(11, 11, 13, 0.35) 0%,
            rgba(11, 11, 13, 0.78) 100%),
        linear-gradient(to bottom,
            rgba(11, 11, 13, 0.55) 0%,
            rgba(11, 11, 13, 0.05) 30%,
            rgba(11, 11, 13, 0.05) 70%,
            rgba(11, 11, 13, 0.55) 100%);
}

.rb-about-closing__inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-4);
}
.rb-about-closing__line {
    font-family: var(--rb-font-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--rb-ink-soft);
    margin: 0;
    text-wrap: balance;
}
.rb-about-closing__line--major {
    font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.6rem);
    color: var(--rb-ink);
    margin: var(--rb-space-3) 0;
}
/* ---------------------------------------------------------------
   Script-em — shared treatment for inline script emphasis inside
   serif headlines/lines. Corinthia has a small x-height and a
   visually-low baseline, so it's scaled up and lifted to align
   with the host serif's optical centre.
   --------------------------------------------------------------- */
.rb-about-stages__heading em,
.rb-about-repertoire__heading em,
.rb-about-closing__line em {
    font-family: var(--rb-font-script);
    font-style: normal;
    font-weight: 400;
    font-size: 1.7em;
    line-height: 0.7;
    letter-spacing: -0.005em;
    color: var(--rb-gold);
    display: inline-block;
    vertical-align: baseline;
    /* Lift the script word so its visual centre matches the serif x-height
       around it. Tuned by eye for Corinthia. */
    transform: translateY(-0.12em);
    margin: 0 0.04em;
}
/* On the very large closing __major line, the host font is bigger —
   nudge values slightly so the script doesn't look bloated. */
.rb-about-closing__line--major em {
    font-size: 1.55em;
    transform: translateY(-0.1em);
}

@media (prefers-reduced-motion: reduce) {
    .rb-about-hero__media img { animation: none; transform: scale(1.02); }
    .rb-about-chapters__image { transition: none; }
    .rb-about-stages__media img { transition: none; }
    .rb-about-stages__card:hover .rb-about-stages__media img { transform: none; }
    .rb-about-closing__bg { transform: none !important; }
}

/* ============================================================
   SERVICE PAGES — shared editorial layout
   (currently used by /services/ceremony — reused as we build out)
   ============================================================ */

/* Hero — same full-bleed left-image pattern as the about hero */
.rb-service-hero {
    overflow-x: clip;
    padding-top: 0;
}
.rb-service-hero__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
    align-items: center;
    padding: 0 var(--rb-space-4);
}
@media (min-width: 992px) {
    .rb-service-hero__layout {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 1.5rem + 3vw, 5.5rem);
        padding-left: 0;
        padding-right: max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
    }
}
.rb-service-hero__media {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--rb-bg-alt);
}
@media (max-width: 991.98px) {
    .rb-service-hero__media { max-width: 520px; margin: 0 auto; }
}
.rb-service-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    will-change: transform;
    animation: rb-slow-zoom 24s ease-in-out infinite alternate;
}
.rb-service-hero__copy { max-width: 660px; }
.rb-service-hero__headline {
    font-family: var(--rb-font-display);
    font-size: clamp(2.4rem, 1.7rem + 2.8vw, 4rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--rb-ink);
    margin: var(--rb-space-5) 0 var(--rb-space-5);
    text-wrap: balance;
}
.rb-service-hero__headline-script {
    display: block;
    font-family: var(--rb-font-script);
    font-size: 1.85em;
    line-height: 0.65;
    letter-spacing: -0.005em;
    color: var(--rb-gold);
    margin-top: 0.2em;
}
.rb-service-hero__lead {
    font-family: var(--rb-font-body);
    font-size: var(--rb-fs-lead);
    line-height: 1.6;
    color: var(--rb-ink-soft);
    margin: 0;
    max-width: 56ch;
}

/* Promise — single emotional paragraph centred for visual rest */
.rb-service-promise__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.rb-service-promise__text {
    font-family: var(--rb-font-display);
    font-style: italic;
    font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
    line-height: 1.45;
    color: var(--rb-ink);
    margin: 0;
    text-wrap: balance;
}

/* Two-column variant cards (Sonata / Cantata) */
.rb-service-variants__header,
.rb-service-moments__header,
.rb-service-included__header,
.rb-service-process__header,
.rb-service-faq__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--rb-space-9);
}
.rb-service-variants__heading,
.rb-service-moments__heading,
.rb-service-included__heading,
.rb-service-process__heading,
.rb-service-faq__heading {
    font-family: var(--rb-font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: var(--rb-space-4) 0 0;
    text-wrap: balance;
}
.rb-service-variants__heading em,
.rb-service-moments__heading em,
.rb-service-process__heading em {
    font-family: var(--rb-font-script);
    font-style: normal;
    font-size: 1.55em;
    line-height: 0.75;
    color: var(--rb-gold);
    display: inline-block;
    transform: translateY(-0.08em);
    margin: 0 0.04em;
}

.rb-service-variants__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
}
@media (min-width: 768px) {
    .rb-service-variants__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(2rem, 1.5rem + 1.5vw, 4rem);
    }
    .rb-service-variants__grid--three {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1.75rem, 1.5rem + 1vw, 3rem);
    }
}
.rb-service-variant {
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    background: var(--rb-bg-alt);
    border: 1px solid var(--rb-line);
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-4);
}
.rb-service-variant__num {
    font-family: var(--rb-font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--rb-gold);
    margin: 0;
}
.rb-service-variant__name {
    font-family: var(--rb-font-display);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: 0;
}
.rb-service-variant__tag {
    font-family: var(--rb-font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--rb-gold);
    margin: 0;
}
.rb-service-variant__copy {
    font-family: var(--rb-font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--rb-ink-soft);
    margin: 0;
}
.rb-service-variant__notes {
    list-style: none;
    margin: var(--rb-space-3) 0 0;
    padding: var(--rb-space-4) 0 0;
    border-top: 1px solid var(--rb-line);
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-3);
}
.rb-service-variant__notes li {
    position: relative;
    padding-left: 1.4em;
    font-family: var(--rb-font-body);
    font-size: 0.95rem;
    color: var(--rb-ink-soft);
    line-height: 1.55;
}
.rb-service-variant__notes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.8em;
    height: 1px;
    background: var(--rb-gold);
}

/* Optional photo at the top of a variant card. Used on the Signature
   Enhancements page. Imageless cards on ceremony/wedding are unaffected. */
.rb-service-variant--media {
    padding: 0;
    overflow: hidden;
}
.rb-service-variant--media .rb-service-variant__body {
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-4);
}
.rb-service-variant__media {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rb-bg-alt);
}
.rb-service-variant__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-service-variant--media:hover .rb-service-variant__media img {
    transform: scale(1.04);
}

/* Four ceremony moments — numbered editorial blocks */
.rb-service-moments__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
    max-width: 880px;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .rb-service-moments__list {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(2.5rem, 2rem + 2vw, 4rem);
    }
}
.rb-service-moment {
    border-top: 1px solid var(--rb-line);
    padding-top: var(--rb-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-3);
}
.rb-service-moment__num {
    font-family: var(--rb-font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rb-gold);
}
.rb-service-moment__name {
    font-family: var(--rb-font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: 0;
}
.rb-service-moment p {
    font-family: var(--rb-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--rb-ink-soft);
    margin: 0;
}

/* What's included — 4 quadrants */
.rb-service-included__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
    max-width: 1000px;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .rb-service-included__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.rb-service-included__item {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-3);
    padding-top: var(--rb-space-5);
    border-top: 1px solid var(--rb-line);
}
.rb-service-included__num {
    font-family: var(--rb-font-display);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rb-gold);
}
.rb-service-included__item h3 {
    font-family: var(--rb-font-display);
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: 0;
}
.rb-service-included__item p {
    font-family: var(--rb-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--rb-ink-soft);
    margin: 0;
}

/* Process — 3-step timeline */
.rb-service-process__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rb-space-7);
    max-width: 1000px;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .rb-service-process__list {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
    }
}
.rb-service-process__step {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-3);
    padding-top: var(--rb-space-5);
    border-top: 1px solid var(--rb-gold);
}
.rb-service-process__num {
    font-family: var(--rb-font-display);
    font-style: italic;
    font-size: 2rem;
    line-height: 1;
    color: var(--rb-gold);
}
.rb-service-process__step h3 {
    font-family: var(--rb-font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
    font-weight: 400;
    color: var(--rb-ink);
    margin: 0;
}
.rb-service-process__step p {
    font-family: var(--rb-font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--rb-ink-soft);
    margin: 0;
}

/* FAQ — minimal definition list */
.rb-service-faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.rb-service-faq__item {
    padding: var(--rb-space-5) 0;
    border-bottom: 1px solid var(--rb-line);
}
.rb-service-faq__item:first-child { border-top: 1px solid var(--rb-line); }
.rb-service-faq__item dt {
    font-family: var(--rb-font-display);
    font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
    line-height: 1.3;
    color: var(--rb-ink);
    margin: 0 0 var(--rb-space-2);
    letter-spacing: -0.005em;
}
.rb-service-faq__item dd {
    font-family: var(--rb-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--rb-ink-soft);
    margin: 0;
    max-width: 64ch;
}

@media (prefers-reduced-motion: reduce) {
    .rb-service-hero__media img { animation: none; transform: scale(1.02); }
}

/* ============================================================
   VIDEO LIGHTBOX MODAL — used on the performance spotlight page
   (and any other page that wants modal playback)
   ============================================================ */
.rb-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2vw, 3rem);
}
.rb-video-modal[hidden] { display: none; }

.rb-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 13, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s var(--rb-ease-out);
}
.rb-video-modal.is-open .rb-video-modal__backdrop {
    opacity: 1;
}

.rb-video-modal__panel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    transform: scale(0.96);
    opacity: 0;
    transition: transform 0.4s var(--rb-ease-out),
                opacity 0.4s var(--rb-ease-out);
}
.rb-video-modal.is-open .rb-video-modal__panel {
    transform: scale(1);
    opacity: 1;
}

.rb-video-modal__frame {
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.rb-video-modal__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.rb-video-modal__close {
    position: absolute;
    top: -3.4rem;
    right: -0.5rem;
    width: 2.4rem;
    height: 2.4rem;
    background: transparent;
    border: 1px solid rgba(244, 239, 230, 0.4);
    border-radius: 50%;
    color: var(--rb-ink);
    cursor: pointer;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--rb-dur) var(--rb-ease),
                border-color var(--rb-dur) var(--rb-ease),
                background var(--rb-dur) var(--rb-ease);
}
.rb-video-modal__close:hover,
.rb-video-modal__close:focus-visible {
    color: var(--rb-bg);
    background: var(--rb-gold);
    border-color: var(--rb-gold);
}
.rb-video-modal__close svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 767.98px) {
    .rb-video-modal__close {
        top: -3rem;
        right: 0;
        width: 2rem;
        height: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb-video-modal__backdrop,
    .rb-video-modal__panel { transition: none; }
}


/* ============================================================
   PERFORMANCE SPOTLIGHT PAGE
   ============================================================ */
.rb-spotlight-page {
    overflow-x: clip;
}

/* Hero — text-led, no image */
.rb-spotlight-page__hero {
    padding-top: clamp(8rem, 6rem + 4vw, 11rem);
    text-align: center;
}
.rb-spotlight-page__hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.rb-spotlight-page__heading {
    font-family: var(--rb-font-display);
    font-size: clamp(2.6rem, 1.8rem + 4vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--rb-ink);
    margin: var(--rb-space-5) 0 var(--rb-space-5);
    text-wrap: balance;
}
.rb-spotlight-page__heading-script {
    display: block;
    font-family: var(--rb-font-script);
    font-size: 1.85em;
    line-height: 0.65;
    letter-spacing: -0.005em;
    color: var(--rb-gold);
    margin-top: 0.2em;
}
.rb-spotlight-page__lead {
    font-family: var(--rb-font-body);
    font-size: var(--rb-fs-lead);
    line-height: 1.6;
    color: var(--rb-ink-soft);
    max-width: 640px;
    margin: 0 auto;
}

/* Featured video — full-width 16:9 */
.rb-spotlight-page__featured {
    margin-top: clamp(3rem, 2rem + 4vw, 6rem);
}
.rb-spotlight-page__featured-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rb-bg-alt);
    cursor: pointer;
    border: 0;
    padding: 0;
    color: inherit;
    transition: transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-spotlight-page__featured-frame:hover { transform: translateY(-2px); }
.rb-spotlight-page__featured-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--rb-ease-out),
                filter var(--rb-dur) var(--rb-ease);
    will-change: transform;
}
.rb-spotlight-page__featured-frame:hover img,
.rb-spotlight-page__featured-frame:focus-visible img {
    transform: scale(1.03);
    filter: brightness(0.92);
}
.rb-spotlight-page__featured-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11,11,13,0.10) 0%, rgba(11,11,13,0.55) 100%);
    transition: opacity var(--rb-dur) var(--rb-ease);
    pointer-events: none;
}
.rb-spotlight-page__featured-frame:hover::after { opacity: 0.55; }

.rb-spotlight-page__featured-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7rem;
    height: 7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 239, 230, 0.7);
    border-radius: 50%;
    background: rgba(11, 11, 13, 0.4);
    color: var(--rb-ink);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    transition: background var(--rb-dur) var(--rb-ease),
                border-color var(--rb-dur) var(--rb-ease),
                color var(--rb-dur) var(--rb-ease),
                transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-spotlight-page__featured-frame:hover .rb-spotlight-page__featured-play,
.rb-spotlight-page__featured-frame:focus-visible .rb-spotlight-page__featured-play {
    background: var(--rb-gold);
    border-color: var(--rb-gold);
    color: var(--rb-bg);
    transform: translate(-50%, -50%) scale(1.05);
}
.rb-spotlight-page__featured-play svg {
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 0.2rem;
}
@media (max-width: 767.98px) {
    .rb-spotlight-page__featured-play {
        width: 4.5rem;
        height: 4.5rem;
    }
    .rb-spotlight-page__featured-play svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.rb-spotlight-page__featured-caption {
    margin-top: var(--rb-space-4);
    text-align: center;
    font-family: var(--rb-font-display);
    font-style: italic;
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
    color: var(--rb-ink-soft);
}

/* Reel header */
.rb-spotlight-page__reel-header {
    text-align: center;
    margin: clamp(5rem, 4rem + 4vw, 9rem) auto var(--rb-space-8);
    max-width: 720px;
}
.rb-spotlight-page__reel-heading {
    font-family: var(--rb-font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rb-ink);
    margin: var(--rb-space-4) 0 0;
    text-wrap: balance;
}

/* The Reel — editorial mosaic.
   Top row: 2 wide cards (cols 1-3, 4-6).
   Bottom row: 3 cards (cols 1-2, 3-4, 5-6). */
.rb-spotlight-page__reel {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
@media (min-width: 768px) {
    .rb-spotlight-page__reel {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .rb-spotlight-page__reel {
        grid-template-columns: repeat(6, 1fr);
    }
    .rb-spotlight-page__reel-item:nth-child(1) { grid-column: 1 / 4; }
    .rb-spotlight-page__reel-item:nth-child(2) { grid-column: 4 / 7; }
    .rb-spotlight-page__reel-item:nth-child(n+3) { grid-column: span 2; }
}

/* Reel card — same hover language as the homepage video facade */
.rb-spotlight-page__reel-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rb-bg-alt);
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    transition: transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-spotlight-page__reel-item:hover { transform: translateY(-3px); }
.rb-spotlight-page__reel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--rb-ease-out),
                filter var(--rb-dur) var(--rb-ease);
    will-change: transform;
}
.rb-spotlight-page__reel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11,11,13,0.05) 0%, rgba(11,11,13,0.55) 100%);
    transition: opacity var(--rb-dur) var(--rb-ease);
    pointer-events: none;
}
.rb-spotlight-page__reel-item:hover img,
.rb-spotlight-page__reel-item:focus-visible img {
    transform: scale(1.04);
    filter: brightness(0.92);
}
.rb-spotlight-page__reel-item:hover::after { opacity: 0.55; }

.rb-spotlight-page__reel-num {
    position: absolute;
    top: 0.9rem;
    left: 1rem;
    z-index: 2;
    font-family: var(--rb-font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--rb-ink);
    letter-spacing: 0.05em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.rb-spotlight-page__reel-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.4rem;
    height: 3.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 239, 230, 0.7);
    border-radius: 50%;
    background: rgba(11, 11, 13, 0.4);
    color: var(--rb-ink);
    pointer-events: none;
    transition: background var(--rb-dur) var(--rb-ease),
                border-color var(--rb-dur) var(--rb-ease),
                color var(--rb-dur) var(--rb-ease),
                transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-spotlight-page__reel-item:hover .rb-spotlight-page__reel-play,
.rb-spotlight-page__reel-item:focus-visible .rb-spotlight-page__reel-play {
    background: var(--rb-gold);
    border-color: var(--rb-gold);
    color: var(--rb-bg);
    transform: translate(-50%, -50%) scale(1.05);
}
.rb-spotlight-page__reel-play svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.12rem;
}

.rb-spotlight-page__reel-item:focus-visible {
    outline: 1px solid var(--rb-gold-bright);
    outline-offset: 4px;
}

/* Listen on Spotify section */
.rb-spotlight-page__listen {
    margin-top: clamp(5rem, 4rem + 4vw, 9rem);
}
.rb-spotlight-page__listen-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.rb-spotlight-page__listen-heading {
    font-family: var(--rb-font-display);
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--rb-ink);
    margin: var(--rb-space-4) 0 var(--rb-space-3);
}
.rb-spotlight-page__listen-sub {
    color: var(--rb-ink-soft);
    margin: 0 0 var(--rb-space-7);
}
.rb-spotlight-page__listen .rb-spotify-card {
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */
.rb-contact-page {
    position: relative;
    overflow-x: clip;
    isolation: isolate;       /* keeps the fixed bg + overlay scoped to this page */
}

/* Fixed background photo + overlay — both sit at the bottom of the
   stacking context so all section content paints cleanly on top. */
.rb-contact-page__bg,
.rb-contact-page__overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.rb-contact-page__bg {
    z-index: -2;
}
.rb-contact-page__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.rb-contact-page__overlay {
    z-index: -1;
    background:
        radial-gradient(ellipse 90% 80% at 50% 45%,
            rgba(11, 11, 13, 0.55) 0%,
            rgba(11, 11, 13, 0.88) 100%),
        linear-gradient(to bottom,
            rgba(11, 11, 13, 0.55) 0%,
            rgba(11, 11, 13, 0.55) 100%);
}

/* Hero */
.rb-contact-page__hero {
    padding-top: clamp(8rem, 6rem + 4vw, 11rem);
    text-align: center;
}
.rb-contact-page__hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.rb-contact-page__heading {
    font-family: var(--rb-font-display);
    font-size: clamp(2.4rem, 1.7rem + 3vw, 4.4rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--rb-ink);
    margin: var(--rb-space-5) 0 var(--rb-space-5);
    text-wrap: balance;
}
.rb-contact-page__heading-script {
    display: inline-block;
    font-family: var(--rb-font-script);
    font-size: 1.6em;
    line-height: 0.7;
    color: var(--rb-gold);
    transform: translateY(-0.08em);
    margin-left: 0.04em;
}
.rb-contact-page__lead {
    font-family: var(--rb-font-body);
    font-size: var(--rb-fs-lead);
    line-height: 1.65;
    color: var(--rb-ink-soft);
    max-width: 640px;
    margin: 0 auto;
}

/* Form section */
.rb-contact-page__form-section {
    padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.rb-contact-form {
    max-width: 720px;
    margin: 0 auto;
}

.rb-form-row {
    display: grid;
    gap: var(--rb-space-5);
}
.rb-form-row--2 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
    .rb-form-row--2 { grid-template-columns: 1fr 1fr; }
}

.rb-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--rb-space-5);
}
.rb-form-row .rb-form-field { margin-bottom: 0; }
.rb-form-row { margin-bottom: var(--rb-space-5); }

.rb-form-field label {
    font-family: var(--rb-font-ui);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rb-ink-soft);
}
.rb-form-field__optional {
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--rb-ink-muted);
    text-transform: none;
    margin-left: 0.4em;
    font-style: italic;
}

/* Underline-style inputs — matches the cinematic editorial aesthetic */
.rb-form-field input,
.rb-form-field select,
.rb-form-field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rb-line);
    border-radius: 0;
    padding: 0.75rem 0;
    font-family: var(--rb-font-body);
    font-size: 1rem;
    color: var(--rb-ink);
    transition: border-bottom-color var(--rb-dur) var(--rb-ease);
    -webkit-appearance: none;
    appearance: none;
}
.rb-form-field input::placeholder,
.rb-form-field textarea::placeholder {
    color: var(--rb-ink-muted);
    font-style: italic;
}
.rb-form-field input:focus,
.rb-form-field select:focus,
.rb-form-field textarea:focus {
    outline: none;
    border-bottom-color: var(--rb-gold);
}
.rb-form-field input:focus-visible,
.rb-form-field select:focus-visible,
.rb-form-field textarea:focus-visible {
    border-bottom-color: var(--rb-gold);
}

/* Date / time inputs render slightly differently in browsers — pull the
   indicator colour into the gold tone for visual consistency. */
.rb-form-field input[type="date"]::-webkit-calendar-picker-indicator,
.rb-form-field input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8) sepia(1) saturate(0.9) hue-rotate(355deg);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--rb-dur) var(--rb-ease);
}
.rb-form-field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.rb-form-field input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.rb-form-field textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.55;
}

/* Custom select wrapper — chevron overlay because native select arrows
   look out of place against the underline aesthetic */
.rb-form-select {
    position: relative;
}
.rb-form-select select {
    cursor: pointer;
    padding-right: 2.5rem;
}
.rb-form-select__chevron {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 0.85em;
    height: 0.6em;
    color: var(--rb-gold);
}
.rb-form-select__chevron svg { width: 100%; height: 100%; }

/* Native select dropdown styling — limited cross-browser, but darken what
   we can. The dropdown itself is OS-rendered. */
.rb-form-field select option {
    background: var(--rb-bg-elev);
    color: var(--rb-ink);
}

/* Submit row */
.rb-form-actions {
    margin-top: var(--rb-space-7);
    display: flex;
    justify-content: center;
}
.rb-form-field-error {
    display: none;
    font-size: 0.78rem;
    color: var(--rb-error, #c0392b);
    margin-top: 0.3rem;
    font-family: var(--rb-font-sans);
    letter-spacing: 0;
}
.is-validated .rb-form-field input:invalid ~ .rb-form-field-error,
.is-validated .rb-form-field textarea:invalid ~ .rb-form-field-error,
.is-validated .rb-form-field select:invalid ~ .rb-form-field-error {
    display: block;
}
.rb-form-error-banner {
    margin-top: var(--rb-space-5);
    padding: var(--rb-space-4) var(--rb-space-5);
    background: rgba(192, 57, 43, 0.12);
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-radius: 4px;
    color: var(--rb-ink);
    font-size: 0.875rem;
}
.rb-form-error-banner p { margin: 0; }

/* Submit popup */
.rb-submit-popup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rb-space-5);
}
.rb-submit-popup[hidden] { display: none; }
.rb-submit-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.rb-submit-popup__card {
    position: relative;
    z-index: 1;
    background: var(--rb-bg);
    border: 1px solid var(--rb-line);
    border-radius: 8px;
    padding: var(--rb-space-8) var(--rb-space-7);
    max-width: 440px;
    width: 100%;
    text-align: center;
}
.rb-submit-popup__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--rb-space-5);
    color: var(--rb-gold);
}
.rb-submit-popup__icon svg { width: 100%; height: 100%; }
.rb-submit-popup__title {
    font-family: var(--rb-font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--rb-ink);
    margin: 0 0 var(--rb-space-3);
}
.rb-submit-popup__body {
    color: var(--rb-ink-muted);
    margin: 0 0 var(--rb-space-6);
}
.rb-submit-popup__close { margin: 0 auto; }

/* Closing signoff (per doc tagline) */
.rb-contact-page__signoff {
    text-align: center;
    padding-top: clamp(4rem, 3rem + 3vw, 7rem);
    padding-bottom: clamp(5rem, 4rem + 4vw, 9rem);
}
.rb-contact-page__signoff-text {
    font-family: var(--rb-font-display);
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    color: var(--rb-ink);
    margin: 0;
    max-width: 760px;
    margin-inline: auto;
}
.rb-contact-page__signoff-script {
    display: inline-block;
    font-family: var(--rb-font-script);
    font-style: normal;
    font-size: 1.65em;
    line-height: 0.7;
    color: var(--rb-gold);
    transform: translateY(-0.08em);
    margin-left: 0.06em;
}


/* 7b. FOOTER
   ---------------------------------------------------------- */
.rb-footer {
    position: relative;
    z-index: 1;
    padding: var(--rb-space-8) 0 var(--rb-space-5);
    background: var(--rb-bg);
    border-top: 1px solid var(--rb-line);
}

/* Top row — motto on the left, logo on the right */
.rb-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-6);
    margin-bottom: var(--rb-space-7);
}
.rb-footer__motto {
    font-family: var(--rb-font-script);
    font-size: clamp(2.5rem, 1.8rem + 2.5vw, 4.25rem);
    font-weight: 400;
    line-height: 1;
    color: var(--rb-gold);
}
.rb-footer__brand {
    display: inline-block;
    line-height: 0;
}
.rb-footer__logo {
    height: clamp(60px, 4vw + 40px, 96px);
    width: auto;
    display: block;
}

/* Bottom row — copyright on the left, design credit on the right */
.rb-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-4);
    padding-top: var(--rb-space-5);
    border-top: 1px solid var(--rb-line);
    flex-wrap: wrap;
}
.rb-footer__copy,
.rb-footer__credit {
    font-family: var(--rb-font-ui);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rb-ink-muted);
    margin: 0;
}
.rb-footer__credit a {
    color: var(--rb-ink-muted);
    text-decoration: none;
    transition: color var(--rb-dur) var(--rb-ease);
}
.rb-footer__credit a:hover {
    color: var(--rb-gold);
}

@media (max-width: 767.98px) {
    .rb-footer__top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--rb-space-5);
    }
    .rb-footer__bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--rb-space-3);
    }
}

/* 8. ACCESSIBILITY
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .rb-anim-up { opacity: 1; transform: none; }
    .rb-hero__media img { animation: none; transform: scale(1.06); }
}

.rb-skip-link {
    position: absolute;
    top: -100px;
    left: var(--rb-space-4);
    z-index: 9999;
    padding: var(--rb-space-3) var(--rb-space-5);
    background: var(--rb-gold);
    color: var(--rb-bg);
    border-radius: var(--rb-radius);
    font-weight: 500;
}
.rb-skip-link:focus { top: var(--rb-space-4); }