:root {
    --jbrr-pink: #DE047E;
    --jbrr-pink-deep: #B80064;
    --jbrr-turquoise: #79C9D2;
    --jbrr-turquoise-deep: #4FA9B4;
    --jbrr-ink: #1B1F27;

    --cui-font-family: 'Calibre', 'Inter', -apple-system, system-ui, sans-serif;
    --cui-color-accent: var(--jbrr-pink);
    --cui-color-on-accent: #ffffff;
    --cui-color-focus: var(--jbrr-pink);
    --cui-section-space-compact: clamp(2rem, 4.5vi, 3.25rem);
    --cui-section-space: clamp(1rem, 6vi, 2rem);
    --cui-section-space-spacious: clamp(3.5rem, 8vi, 6rem);
    --cui-section-space-hero: clamp(4rem, 10vi, 7.5rem);
}


body {
    font-size: 18px;
    line-height: 1.5;
}
body.cui-site {
    background: #fff;
}

.jbrr-section-eyebrow {
    font-size: clamp(1.125rem, 1rem + 0.5vi, 1.5rem);
}

.cui-navbar {
    --cui-navbar-bg: #ffffff;
    --cui-navbar-border: rgba(27, 31, 39, 0.08);
    --cui-navbar-size: 4.5rem;
    --cui-navbar-gutter: clamp(2rem, 6vi, 5rem);
    --cui-navbar-padding-block: 0;
    color: var(--jbrr-ink);
    box-shadow: 0 4px 4px rgba(27, 31, 39, 0.28);
    overflow: visible;
}

.cui-navbar:not([expanded]) .cui-navbar-collapse-panel {
    padding-block: 0;
}


.cui-navbar .cui-nav-link {
    color: var(--jbrr-ink);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    padding-inline: 1rem;
}

.cui-navbar .cui-nav-link:hover,
.cui-navbar .cui-nav-link[aria-current="page"] {
    background: transparent;
    color: var(--jbrr-pink);
}

.site-brand {
    line-height: 0;
    position: relative;
    z-index: 5;
    overflow: visible;
}

.site-brand img {
    block-size: 8.5rem;
    inline-size: auto;
    display: block;
    margin-block: -0.5rem -3.75rem;
    box-shadow: 0 6px 16px rgba(27, 31, 39, 0.08);
    transition:
        block-size 200ms ease,
        margin-block-start 200ms ease,
        margin-block-end 200ms ease;
}

.cui-navbar[data-scrolled] .site-brand img {
    block-size: var(--cui-navbar-size);
    margin-block: 0;
}

@media (max-width: 48rem) {
    .site-brand img {
        block-size: var(--cui-navbar-size);
        margin-block: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-brand img {
        transition: none;
    }
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    color: #fff;
    text-decoration: none;
}

.footer-brand img {
    block-size: 3.25rem;
    inline-size: auto;
    display: block;
}

.footer-brand-text {
    line-height: 1.15;
    font-weight: 700;
}

.footer-brand-text small {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-block-start: 2px;
}

.jbrr-titles {
    background: var(--jbrr-pink);
    color: #fff;
    font-family: 'DM Sans', 'Calibre', 'Inter', sans-serif;
    display: grid;
    place-items: center;
    min-block-size: min(62vh, 42rem);
    padding-block: clamp(2.5rem, 6vi, 5rem);
    padding-inline: clamp(1.25rem, 5vi, 4rem);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.jbrr-titles::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(222 4 126 / 68%);
    pointer-events: none;
}

.jbrr-titles-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.jbrr-title-scene {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    inline-size: min(100%, 74rem);
    min-block-size: min(44vh, 28rem);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition:
        opacity 280ms ease,
        transform 360ms ease,
        visibility 0s linear 360ms;
}

.jbrr-title-scene.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.jbrr-title-statement {
    gap: clamp(1.25rem, 3vi, 2.5rem);
}

.jbrr-typed {
    font-size: clamp(2rem, 4.3vi, 4.5rem);
    font-weight: 900;
    line-height: 0.98;
    margin: 0;
    padding-inline-start: clamp(0rem, 14vi, 10rem);
}

.jbrr-typed-line {
    display: block;
    min-block-size: 1.25em;
}

.jbrr-typed-line[data-typing]::after {
    content: "";
    display: inline-block;
    inline-size: 0.08em;
    block-size: 0.95em;
    background: currentColor;
    margin-inline-start: 0.06em;
    vertical-align: -0.12em;
    animation: jbrr-caret 0.9s steps(1) infinite;
}

@keyframes jbrr-caret {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

.jbrr-outline {
    font-size: clamp(3rem, 9.2vi, 8.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.055em;
    text-align: center;
    text-wrap: nowrap;
    margin: 0;
    color: var(--jbrr-pink);
    -webkit-text-fill-color: var(--jbrr-pink);
    -webkit-text-stroke: clamp(3px, 0.055em, 8px) #fff;
    paint-order: stroke fill;
    filter: none;
}

.jbrr-titles[data-animate] .jbrr-outline {
    opacity: 0;
    transform: scale(1.35);
}

.jbrr-title-invite {
    justify-items: center;
    gap: clamp(1.5rem, 4vi, 3rem);
    text-align: center;
}

.jbrr-invite-title,
.jbrr-invite-copy {
    margin: 0;
}

.jbrr-invite-title {
    font-size: clamp(2.5rem, 6vi, 6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.jbrr-invite-copy {
    display: grid;
    gap: 0.15em;
    font-size: clamp(1.25rem, 2.6vi, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.jbrr-title-invite.is-active .jbrr-invite-title,
.jbrr-title-invite.is-active .jbrr-invite-copy {
    animation: jbrr-invite-in 500ms both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jbrr-title-invite.is-active .jbrr-invite-copy {
    animation-delay: 140ms;
}

@keyframes jbrr-invite-in {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jbrr-titles[data-animate] .jbrr-outline.is-in {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 620ms ease-out,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

    .jbrr-title-scene,
    .jbrr-title-invite.is-active .jbrr-invite-title,
    .jbrr-title-invite.is-active .jbrr-invite-copy {
        animation: none;
        transition: none;
    }

    .jbrr-typed-line[data-typing]::after {
        animation: none;
    }

    .jbrr-titles[data-animate] .jbrr-outline.is-in {
        transition: none;
    }
}

@media (max-width: 40rem) {
    .jbrr-titles {
        min-block-size: 31rem;
    }

    .jbrr-typed {
        padding-inline-start: 0;
    }

    .jbrr-outline {
        text-wrap: balance;
    }
}

.jbrr-hero-video {
    --cui-media-bg: var(--jbrr-pink);
    --cui-media-fit: contain;
}

.jbrr-hero-video>video {
    max-block-size: min(80vh, 44rem);
}
.cui-hero.jbrr-hero {
    --cui-hero-color: #ffffff;
    --cui-hero-muted-color: rgba(255, 255, 255, 0.92);
    --cui-hero-title-size: clamp(2.5rem, 1.8rem + 3.4vi, 4.5rem);
    --cui-hero-text-size: 54rem;
    background: var(--jbrr-pink);
    color: #fff;
}
.cui-hero.jbrr-hero .cui-eyebrow {
    color: #ffffff;
}

.cui-hero.jbrr-hero cui-button[variant="primary"],
.cui-hero.jbrr-hero .cui-button[data-variant="primary"] {
    --cui-button-bg: #ffffff;
    --cui-button-border: #ffffff;
    --cui-button-color: var(--jbrr-pink);
}

.cui-hero.jbrr-hero cui-button:not([variant="primary"]),
.cui-hero.jbrr-hero .cui-button:not([data-variant="primary"]) {
    --cui-button-bg: transparent;
    --cui-button-border: #ffffff;
    --cui-button-color: #ffffff;
}

.cui-section-accent .cui-container>.cui-eyebrow {
    color: var(--cui-color-on-accent);
}

.jbrr-turquoise {
    --cui-color-accent: var(--jbrr-turquoise-deep);
}

cui-button.navbar-cta {
    --cui-button-bg: var(--jbrr-pink);
    --cui-button-border: var(--jbrr-pink);
    --cui-button-color: #ffffff;
    --cui-control-radius: 999px;
    font-weight: 700;
}

cui-button.navbar-cta:hover {
    --cui-button-bg: var(--jbrr-pink-deep);
    --cui-button-border: var(--jbrr-pink-deep);
}

.cui-surface.cui-feature-card {
    position: relative;
    overflow: hidden;
    border-inline-start: 4px solid var(--jbrr-pink);
}

.cui-surface.cui-feature-card[data-accent="turquoise"] {
    border-inline-start-color: var(--jbrr-turquoise);
}

.cui-surface.cui-feature-card[data-accent="turquoise-deep"] {
    border-inline-start-color: var(--jbrr-turquoise-deep);
}

.cui-feature-card h3 {
    color: var(--jbrr-ink);
    font-size: var(--cui-font-size-2);
    line-height: 1.2;
    margin: 0 0 var(--cui-space-2);
}

.cui-feature-card[data-accent="turquoise"] h3,
.cui-feature-card[data-accent="turquoise-deep"] h3 {
    color: var(--jbrr-turquoise-deep);
}

.cui-feature-card[data-accent="pink"] h3,
.cui-feature-card:not([data-accent]) h3 {
    color: var(--jbrr-pink);
}

.meetgreet-band {
    background: linear-gradient(135deg, var(--jbrr-pink) 0%, #C8006B 100%);
    color: #fff;
}

.meetgreet-band .cui-cta {
    --cui-cta-title-color: var(--jbrr-pink);
}

.meetgreet-band .cui-cta cui-button[variant="primary"] {
    --cui-button-bg: var(--jbrr-pink);
    --cui-button-border: var(--jbrr-pink);
    --cui-button-color: #ffffff;
}

.site-footer {
    background: var(--jbrr-ink);
    color: #fff;
}

.site-footer a {
    color: #fff;
}

.site-footer small {
    color: rgba(255, 255, 255, 0.7);
}

.site-footer .footer-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.site-footer .footer-link-button:hover,
.site-footer .footer-link-button:focus-visible {
    text-decoration: none;
}

/* Cookie banner (Combat UI <cui-cookie-banner>) */
cui-cookie-banner {
    --cui-cookie-banner-max-inline-size: 34rem;
    --cui-cookie-banner-z-index: 1100; /* above the sticky navbar */
}

/*
 * The element resolves button clicks with event.target.closest('[data-action]'). A click on a slotted
 * label lands on our light-DOM <span>, whose ancestors never carry data-action, so the click is ignored.
 * Let those clicks fall through to the shadow-DOM button underneath.
 */
cui-cookie-banner [slot$="-label"] {
    pointer-events: none;
}

.jbrr-list {
    padding-inline-start: 1.1rem;
}

.jbrr-list li {
    margin-block-end: 0.5rem;
}

.jbrr-application-intro {
    margin-block-end: var(--cui-space-5);
}

.jbrr-application-intro .cui-display {
    --cui-display-measure: 17ch;
    --cui-display-size: clamp(2.5rem, 1.85rem + 3vi, 4.75rem);
}

#meetgreet {
    scroll-margin-block-start: calc(var(--cui-navbar-size, 4.5rem) + var(--cui-space-4));
}

.jbrr-application-form {
    --cui-stack-gap: var(--cui-space-5);
    background: var(--cui-color-surface-raised, #fff);
    border: 1px solid var(--cui-color-border, #cfd6df);
    border-radius: var(--cui-radius-3, 0.75rem);
    padding: clamp(1rem, 3vi, 2rem);
    box-shadow: var(--cui-shadow-1);
}

.jbrr-application-form fieldset {
    --cui-stack-gap: var(--cui-space-3);
    min-inline-size: 0;
    border: 1px solid var(--cui-color-border, #cfd6df);
    border-radius: var(--cui-radius-2, 0.5rem);
    background: color-mix(in srgb, var(--cui-color-surface-muted, #eef2f7) 45%, white);
    margin: 0;
    padding: clamp(0.875rem, 2vi, 1.25rem);
}

.jbrr-application-form fieldset + fieldset {
    margin-block-start: var(--cui-space-3);
}

.jbrr-application-form legend {
    color: var(--jbrr-ink);
    font-size: var(--cui-font-size-2, 1.5rem);
    font-weight: 700;
    background: color-mix(in srgb, var(--cui-color-surface-muted, #eef2f7) 45%, white);
    border-radius: 0.25rem;
    padding-inline: 0.375rem;
    margin-inline-start: -0.375rem;
    margin-block-end: var(--cui-space-2);
}

.jbrr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cui-space-3);
}

.jbrr-form-span-2 {
    grid-column: 1 / -1;
}

[data-conditional-field] {
    display: none;
}

.jbrr-form-grid:has(select option[value="other"]:checked) [data-conditional-field="salutation-other"],
.jbrr-application-form fieldset:has(input[value="other"]:checked) [data-conditional-field="background-other"],
.jbrr-application-form fieldset:has(input[value="other"]:checked) [data-conditional-field="referral-other"] {
    display: block;
}

.jbrr-application-form label {
    display: block;
    color: var(--jbrr-ink);
    font-weight: 700;
    margin-block-end: var(--cui-space-1, 0.25rem);
}

.jbrr-application-form input[type="text"],
.jbrr-application-form input[type="email"],
.jbrr-application-form select,
.jbrr-application-form textarea {
    display: block;
    inline-size: 100%;
    border: 1px solid var(--cui-color-border, #cfd6df);
    border-radius: var(--cui-control-radius, 0.25rem);
    background: #fff;
    color: var(--jbrr-ink);
    font: inherit;
    padding: 0.625rem 0.75rem;
}

.jbrr-application-form textarea {
    resize: vertical;
    min-block-size: 6.5rem;
}

.jbrr-application-form input:focus-visible,
.jbrr-application-form select:focus-visible,
.jbrr-application-form textarea:focus-visible {
    border-color: var(--jbrr-pink);
    outline: 3px solid color-mix(in srgb, var(--jbrr-pink) 24%, transparent);
    outline-offset: 1px;
}

.jbrr-application-form input[type="radio"],
.jbrr-application-form input[type="checkbox"] {
    accent-color: var(--jbrr-pink);
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: none;
    margin: 0;
}

.jbrr-choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cui-space-2);
}

.jbrr-choice-group.jbrr-choice-group-compact {
    grid-template-columns: repeat(2, minmax(6rem, 9rem));
}

.jbrr-choice-option {
    display: flex;
    align-items: flex-start;
    gap: var(--cui-space-2);
    min-inline-size: 0;
    border: 1px solid var(--cui-color-border, #cfd6df);
    border-radius: var(--cui-radius-2, 0.5rem);
    background: #fff;
    padding: 0.625rem 0.75rem;
}

.jbrr-choice-option:has(input:checked) {
    border-color: var(--jbrr-pink);
    background: color-mix(in srgb, var(--jbrr-pink) 7%, white);
}

.jbrr-choice-option input[type="radio"],
.jbrr-choice-option input[type="checkbox"] {
    margin-block-start: 0.15rem;
}

.jbrr-choice-option input[type="radio"] + label,
.jbrr-choice-option input[type="checkbox"] + label {
    display: block;
    flex: 1;
    font-weight: 500;
    margin: 0;
    line-height: 1.35;
    cursor: pointer;
}

.jbrr-consent-option {
    background: color-mix(in srgb, var(--jbrr-turquoise) 10%, white);
    padding: var(--cui-space-3);
}

.jbrr-application-form small,
.jbrr-application-form .help-text,
.jbrr-form-privacy {
    color: var(--cui-color-muted, #5d6675);
    font-size: var(--cui-font-size-neg-1, 0.875rem);
}

.jbrr-application-form ul {
    color: #a31332;
    font-weight: 700;
    margin: var(--cui-space-2) 0 0;
    padding-inline-start: 1.25rem;
}

.jbrr-form-success {
    background: color-mix(in srgb, var(--cui-color-success, #27864b) 12%, white);
    border-inline-start: 4px solid var(--cui-color-success, #27864b);
    margin-block-end: var(--cui-space-5);
    padding: var(--cui-space-4);
    font-weight: 700;
}

.jbrr-application-form button[type="submit"] {
    justify-self: start;
    border: 1px solid var(--jbrr-pink);
    border-radius: var(--cui-control-radius, 0.25rem);
    background: var(--jbrr-pink);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0.75rem 1.25rem;
}

@media (max-width: 40rem) {
    .jbrr-form-grid,
    .jbrr-choice-group {
        grid-template-columns: 1fr;
    }

    .jbrr-choice-group.jbrr-choice-group-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}