/* Font Awesome — only the Solid and Regular faces are vendored, so there are no
   brand icons (Instagram, WhatsApp) available. */
@font-face {
    font-family: 'FontAwesome';
    src: url('Resources/Fonts/fa-solid-900.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'FontAwesome';
    src: url('Resources/Fonts/fa-regular-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

.fa {
    display: inline-block;
    font-family: 'FontAwesome';
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-regular {
    font-weight: 400;
}

.fa-envelope::before { content: "\f0e0"; }
.fa-phone::before { content: "\f095"; }
.fa-location-dot::before { content: "\f3c5"; }
.fa-clock::before { content: "\f017"; }
.fa-paper-plane::before { content: "\f1d8"; }
.fa-comment::before { content: "\f075"; }
.fa-arrow-right::before { content: "\f061"; }
.fa-user::before { content: "\f007"; }
.fa-calendar::before { content: "\f073"; }
.fa-check::before { content: "\f00c"; }

:root {
    color-scheme: dark;

    /* Brand — blue */
    --brand-blue-300: #C2D6FF;
    --brand-blue-500: #8CB0FF;
    --brand-blue-600: #6A9BFF;
    --brand-blue-800: #2F4FA8;
    --brand-blue-900: #1B2E63;

    /* Brand — magenta */
    --brand-magenta-300: #FF9DD0;
    --brand-magenta-500: #F25CAC;
    --brand-magenta-600: #E8409A;
    --brand-magenta-800: #8C1E56;
    --brand-magenta-900: #4A0E2C;

    /* Brand — violet (accent) */
    --brand-violet-300: #C4B5FD;
    --brand-violet-500: #8B5CF6;
    --brand-violet-600: #7C3AED;
    --brand-violet-800: #4C1D95;
    --brand-violet-900: #2E1160;

    /* Surfaces — slate */
    --surface-0: #23272F;
    --surface-1: #2B3038;
    --surface-2: #343A44;
    --surface-3: #3E4550;
    --surface-sunken: #1C1F25;

    /* Text */
    --text-primary: #EDEFF2;
    --text-secondary: #A8AEB9;
    --text-muted: #767D8A;

    /* Lines */
    --border: #3C424D;
    --border-strong: #525A68;

    /* Roles */
    --brand-primary: var(--brand-blue-600);
    --brand-primary-hover: var(--brand-blue-500);
    --brand-accent: var(--brand-violet-600);
    --brand-accent-hover: var(--brand-violet-500);
    --brand-highlight: var(--brand-magenta-600);
    --brand-highlight-hover: var(--brand-magenta-500);

    /* Status */
    --status-success: #17B98A;
    --status-warning: #E9A23B;
    --status-danger: #E1462C;

    /* Bootstrap overrides */
    --bs-body-bg: var(--surface-0);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-border-color: var(--border);
    --bs-primary: var(--brand-primary);
    --bs-link-color: var(--brand-blue-300);
    --bs-link-hover-color: #FFFFFF;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--surface-0);
    color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Hero */
.hero {
    /* How far the photo is pulled left. Widening the media layer past the hero
       guarantees horizontal slack at any aspect ratio — `cover` alone leaves
       none on wide viewports, where the overflow is all vertical. */
    --hero-shift: 26%;
    /* Pushes the text block right, off the subject. */
    --hero-text-shift: 6%;
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    overflow: hidden;
}

/* Holds the photo and its scrim so they can be masked together, and so the mask
   box matches the hero box exactly — .hero-media is wider than the hero. */
.hero-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--hero-shift) * -1);
    width: calc(100% + var(--hero-shift));
    background-image: url('img/hero.jpg');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

/* Darkens the photo for legibility, then drifts blue to magenta across it. */
.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12, 14, 20, 0.55) 0%, rgba(12, 14, 20, 0.35) 45%, rgba(12, 14, 20, 0.75) 100%),
        linear-gradient(100deg, rgba(27, 46, 99, 0.62) 0%, rgba(46, 17, 96, 0.45) 52%, rgba(74, 14, 44, 0.62) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 820px;
    margin-right: var(--hero-text-shift);
    padding: 8rem 1.5rem 9rem;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brand-violet-300);
    margin-bottom: 0.75rem;
}

    .hero-eyebrow::before,
    .hero-eyebrow::after {
        content: "";
        width: 2.5rem;
        height: 2px;
        border-radius: 1px;
    }

    .hero-eyebrow::before {
        background: linear-gradient(90deg, transparent 0%, var(--brand-blue-500) 100%);
    }

    .hero-eyebrow::after {
        background: linear-gradient(90deg, var(--brand-magenta-500) 0%, transparent 100%);
    }

.hero-title {
    font-size: clamp(2.75rem, 9vw, 6rem);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    margin: 0 0 1.25rem;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 46ch;
    margin: 0 auto 2rem;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

    .hero-actions .btn-outline-brand {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.55);
        background-color: rgba(255, 255, 255, 0.06);
    }

        .hero-actions .btn-outline-brand:hover {
            background-color: rgba(255, 255, 255, 0.16);
            border-color: #fff;
        }

.hero--compact {
    min-height: 58vh;
    justify-content: center;
    --hero-shift: 8%;
    --hero-text-shift: 0%;
}

    .hero--compact .hero-content {
        margin-right: 0;
        padding: 7rem 1.5rem 7rem;
    }

/* Glowing wave outline at the boundary between bands. No fill — the sections
   stay connected through the page gradient behind them. */
.curve-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    pointer-events: none;
}

    .curve-divider.flip {
        transform: scaleX(-1);
    }

    /* Between two sections rather than pinned to a band's lower edge. */
    .curve-divider.standalone {
        position: static;
    }

    .curve-divider svg {
        display: block;
        width: 100%;
        height: clamp(56px, 8vw, 110px);
        overflow: visible;
    }

.curve-line {
    opacity: 0.95;
}

.curve-glow {
    opacity: 0.55;
    filter: blur(5px);
}

/* Slow violet swell behind the line. */
.curve-pulse {
    opacity: 0.3;
    filter: blur(13px);
    animation: wave-pulse 5.5s ease-in-out infinite;
}

@keyframes wave-pulse {
    0%, 100% { opacity: 0.16; }
    50% { opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
    .curve-pulse {
        animation: none;
    }
}

/* Full-bleed photo strip between sections. */
.photo-band {
    position: relative;
    height: var(--band-height, clamp(280px, 42vh, 460px));
}

/* Fades a backdrop out along the wave rather than on a straight line.
   Two mask layers: a solid block for everything above the wave band, then a
   blurred silhouette of the same curve the divider draws, so the fade follows it.
   The paths mirror CurveDivider's — change one and change the other. */
.wave-masked {
    --wave-h: clamp(56px, 8vw, 110px);
    --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath d='M0,-60 L1440,-60 L1440,62 C1240,96 1000,48 760,26 C520,4 240,96 0,44 Z' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");

    -webkit-mask-image: linear-gradient(#000, #000), var(--wave-mask);
    mask-image: linear-gradient(#000, #000), var(--wave-mask);
    -webkit-mask-size: 100% calc(100% - var(--wave-h) + 1px), 100% var(--wave-h);
    mask-size: 100% calc(100% - var(--wave-h) + 1px), 100% var(--wave-h);
    -webkit-mask-position: top left, bottom left;
    mask-position: top left, bottom left;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
}

/* Mirrored curve, matching .curve-divider.flip. */
.photo-band--flip .wave-masked {
    --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath d='M0,-60 L1440,-60 L1440,44 C1200,96 920,4 680,26 C440,48 200,96 0,62 Z' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
}

.photo-band-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* A band meets page background on both edges, so it dissolves at the top as well
   — otherwise it reads as a rectangle pasted onto the page. Three mask layers:
   top wave, solid middle, bottom wave. The hero keeps the bottom layer only,
   since its top edge sits under the nav. */
.photo-band-inner.wave-masked {
    --wave-h-top: clamp(40px, 5vw, 72px);
    --wave-mask-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath d='M0,44 C240,96 520,4 760,26 C1000,48 1240,96 1440,62 L1440,170 L0,170 Z' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");

    -webkit-mask-image: var(--wave-mask-top), linear-gradient(#000, #000), var(--wave-mask);
    mask-image: var(--wave-mask-top), linear-gradient(#000, #000), var(--wave-mask);
    -webkit-mask-size: 100% var(--wave-h-top), 100% calc(100% - var(--wave-h-top) - var(--wave-h) + 2px), 100% var(--wave-h);
    mask-size: 100% var(--wave-h-top), 100% calc(100% - var(--wave-h-top) - var(--wave-h) + 2px), 100% var(--wave-h);
    -webkit-mask-position: top left, left calc(var(--wave-h-top) - 1px), bottom left;
    mask-position: top left, left calc(var(--wave-h-top) - 1px), bottom left;
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat, no-repeat;
}

.photo-band--flip .photo-band-inner.wave-masked {
    --wave-mask-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath d='M0,62 C200,96 440,48 680,26 C920,4 1200,96 1440,44 L1440,170 L0,170 Z' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
}

.photo-band-media {
    position: absolute;
    top: -12%;
    left: 0;
    right: 0;
    height: 124%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

.photo-band-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12, 14, 20, 0.5) 0%, rgba(12, 14, 20, 0.3) 50%, rgba(12, 14, 20, 0.65) 100%),
        linear-gradient(100deg, rgba(27, 46, 99, 0.5) 0%, rgba(46, 17, 96, 0.35) 52%, rgba(74, 14, 44, 0.5) 100%);
}

.photo-band-caption {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem 2rem;
    text-align: center;
}

    .photo-band-caption p {
        margin: 0;
        font-size: clamp(1.1rem, 2.4vw, 1.6rem);
        letter-spacing: 0.02em;
        color: #fff;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
        max-width: 28ch;
    }

/* The title's accent word — light 300 stops so it stays legible on the photo. */
.hero-title .accent {
    background: linear-gradient(90deg, var(--brand-blue-300) 0%, var(--brand-violet-300) 45%, var(--brand-magenta-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 700px) {
    .hero {
        --hero-shift: 12%;
        --hero-text-shift: 0%;
        min-height: 78vh;
        justify-content: center;
    }

    .hero-content {
        margin-right: 0;
        padding: 7rem 1.25rem 7rem;
    }

    .hero-eyebrow::before,
    .hero-eyebrow::after {
        width: 1.25rem;
    }
}

/* Sections */
.section {
    position: relative;
    padding: 5.5rem 0;
}

/* Left transparent so the page gradient runs straight through — the wave
   dividers do the separating now. */
.section--alt {
    overflow: hidden;
}

.section > .container {
    position: relative;
    z-index: 1;
}

.section-head {
    margin-bottom: 3rem;
}

    .section-head h2 {
        margin-bottom: 0;
    }

/* Section heading promoted to carry the section on its own. */
.section-head--lead h2 {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}


/* Text beside a photo, alternating side to side. */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    align-items: center;
}

.split-text p:last-child {
    margin-bottom: 0;
}

.framed-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    background-color: var(--surface-2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

    /* Brand hairline around the photo, drawn as a gradient ring. */
    .framed-photo::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 16px;
        padding: 2px;
        background: linear-gradient(135deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

.framed-photo--wide {
    aspect-ratio: 3 / 2;
}

/* Portrait source photos — a landscape frame crops heads off. */
.framed-photo--tall {
    aspect-ratio: 4 / 5;
}

/* Career timeline */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

    /* The spine, only drawn once there is room for the two-column layout. */
    .timeline::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: linear-gradient(180deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
        opacity: 0.45;
    }

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
}

    .timeline-item:last-child {
        margin-bottom: 0;
    }


    /* Odd rows put the photo on the right instead. */
    .timeline-item:nth-child(even) .timeline-media {
        order: 2;
    }

    .timeline-item:nth-child(even) .timeline-body {
        order: 1;
        text-align: right;
    }

    .timeline-item:nth-child(even) .timeline-entries {
        padding-left: 0;
        padding-right: 1.1rem;
    }

        .timeline-item:nth-child(even) .timeline-entries li::before {
            left: auto;
            right: -1.1rem;
        }

.timeline-media,
.timeline-body {
    position: relative;
    z-index: 1;
}

/* Ghost year, sitting above the row as its heading rather than behind the copy. */
.timeline-year {
    display: block;
    font-size: clamp(3.5rem, 7vw, 5.75rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: #fff;
    opacity: 0.13;
    margin: 0 0 1rem;
    user-select: none;
}

.timeline-entries {
    list-style: none;
    margin: 0 0 0.75rem;
    padding-left: 1.1rem;
}

    .timeline-entries li {
        position: relative;
        color: var(--text-secondary);
        line-height: 1.7;
    }

        .timeline-entries li::before {
            content: "";
            position: absolute;
            top: 0.7em;
            left: -1.1rem;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--brand-violet-500);
        }

.timeline-highlight {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.9rem;
    background-color: rgba(232, 64, 154, 0.16);
    color: var(--brand-magenta-300);
}

/* Daily motivation */
.motivation {
    padding: 5rem 0;
}

.quote-panel {
    position: relative;
    margin: 0;
    padding: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 8vw, 6.5rem);
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    background-color: var(--surface-1);
    background-image:
        radial-gradient(48% 70% at 8% 18%, rgba(106, 155, 255, 0.26) 0%, transparent 66%),
        radial-gradient(46% 66% at 50% 92%, rgba(124, 58, 237, 0.24) 0%, transparent 66%),
        radial-gradient(48% 70% at 94% 22%, rgba(232, 64, 154, 0.24) 0%, transparent 66%);
}

    /* Same gradient hairline ring as the standing panel. */
    .quote-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        padding: 1px;
        background: linear-gradient(105deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

/* Oversized marks anchored to opposite corners, as artwork not punctuation. */
.quote-mark {
    position: absolute;
    font-size: clamp(7rem, 16vw, 14rem);
    line-height: 0.7;
    font-weight: 700;
    color: #fff;
    opacity: 0.07;
    user-select: none;
    pointer-events: none;
}

.quote-mark--open {
    top: 0.1em;
    left: 0.08em;
}

.quote-mark--close {
    right: 0.08em;
    bottom: -0.12em;
}

.quote {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 46ch;
}

    .quote p {
        margin: 0;
        font-size: clamp(1.35rem, 2.2vw, 2rem);
        line-height: 1.45;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: var(--text-primary);
    }

/* Ghost heading above the quote, matching the timeline years. */
.quote-caption {
    position: relative;
    z-index: 1;
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: #fff;
    opacity: 0.13;
    margin-bottom: 1.5rem;
    user-select: none;
}

/* The full GDC lockup. Sizing comes from whichever modifier is alongside it. */
.gdc-logo {
    display: block;
    aspect-ratio: 2.95;
    background-image: url('img/TextLogoTransparent.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.55));
}

/* Home — the lockup stands in for the h1 in the hero. */
.gdc-logo--hero {
    margin: 0 auto 1.25rem;
    width: clamp(280px, 50vw, 660px);
}

.gdc-logo--footer {
    width: clamp(200px, 26vw, 300px);
}

/* Home — what/where/goal */
.pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.pillar {
    padding: 2rem 1.75rem;
    border-radius: 16px;
    background-color: var(--surface-1);
    border: 1px solid var(--border);
}

    .pillar h3 {
        font-size: 1.2rem;
        margin: 1.15rem 0 0.6rem;
    }

    .pillar p {
        margin: 0;
        color: var(--text-secondary);
    }

.pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.2rem;
    color: #fff;
}

.pillar:nth-child(1) .pillar-icon {
    background: linear-gradient(135deg, var(--brand-blue-600) 0%, var(--brand-blue-500) 100%);
}

.pillar:nth-child(2) .pillar-icon {
    background: linear-gradient(135deg, var(--brand-violet-600) 0%, var(--brand-violet-500) 100%);
}

.pillar:nth-child(3) .pillar-icon {
    background: linear-gradient(135deg, var(--brand-magenta-600) 0%, var(--brand-magenta-500) 100%);
}

.pillar:nth-child(4) .pillar-icon {
    background: linear-gradient(135deg, var(--brand-blue-500) 0%, var(--brand-violet-600) 100%);
}

.pillar:nth-child(5) .pillar-icon {
    background: linear-gradient(135deg, var(--brand-violet-500) 0%, var(--brand-magenta-600) 100%);
}

.pillar:nth-child(6) .pillar-icon {
    background: linear-gradient(135deg, var(--brand-magenta-500) 0%, var(--brand-blue-600) 100%);
}

/* No icon tile above, so the heading does not need to clear one. */
.pillar--plain h3 {
    margin-top: 0;
}

/* Numerals need to sit smaller than the glyphs the tile was drawn for. */
.pillar-icon--num {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Six items read better as a fixed 3 × 2 than as an auto-fit row of four
   with two stragglers underneath. */
.pillar-grid--3up {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .pillar-grid--3up {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pillar-grid--3up {
        grid-template-columns: 1fr;
    }
}

/* Home — how a first session runs. One path down the page that ends on the
   booking button, so the last step of the story is the call to action. */
.roadmap {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 780px;
}

.roadmap-step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 1.75rem;
    padding-bottom: 3rem;
}

    /* Drawn per step rather than once on the list, so the line stops after the
       last node instead of running on past the button. */
    .roadmap-step::before {
        content: "";
        position: absolute;
        top: 56px;
        bottom: 0;
        left: 27px;
        width: 2px;
        background: linear-gradient(180deg, var(--node-color) 0%, rgba(255, 255, 255, 0.12) 100%);
    }

    .roadmap-step:last-of-type {
        padding-bottom: 0;
    }

        .roadmap-step:last-of-type::before {
            display: none;
        }

/* Blue at the top of the path, running to magenta at the button. */
.roadmap-step:nth-of-type(1) {
    --node-color: var(--brand-blue-600);
    --node-color-soft: var(--brand-blue-500);
}

.roadmap-step:nth-of-type(2) {
    --node-color: var(--brand-blue-500);
    --node-color-soft: var(--brand-violet-600);
}

.roadmap-step:nth-of-type(3) {
    --node-color: var(--brand-violet-600);
    --node-color-soft: var(--brand-violet-500);
}

.roadmap-step:nth-of-type(4) {
    --node-color: var(--brand-violet-500);
    --node-color-soft: var(--brand-magenta-600);
}

.roadmap-step:nth-of-type(5) {
    --node-color: var(--brand-magenta-600);
    --node-color-soft: var(--brand-magenta-500);
}

.roadmap-step:nth-of-type(6) {
    --node-color: var(--brand-magenta-500);
    --node-color-soft: var(--brand-magenta-600);
}

.roadmap-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background-image: linear-gradient(135deg, var(--node-color) 0%, var(--node-color-soft) 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.roadmap-node--end {
    font-size: 1.25rem;
}

.roadmap-body h3 {
    font-size: 1.25rem;
    margin: 0.75rem 0 0.5rem;
}

.roadmap-body p {
    margin: 0;
    color: var(--text-secondary);
    /* Narrow enough that the copy never reaches the column the line runs down
       on the far side of the row. */
    max-width: 44ch;
}

/* Closes out the last step, under its copy. */
.roadmap-book {
    margin-top: 1.5rem;
}

/* The winding path is a wide-viewport idea only — hidden until there is room. */
.roadmap-path {
    display: none;
}

@media (max-width: 560px) {
    .roadmap-step {
        grid-template-columns: 44px 1fr;
        column-gap: 1.1rem;
        padding-bottom: 2.25rem;
    }

        .roadmap-step::before {
            top: 44px;
            left: 21px;
        }

    .roadmap-node {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
    }

    .roadmap-body h3 {
        margin-top: 0.5rem;
    }
}

/* Wide viewports swap the straight spine for a road that swings side to side
   across the full width and finishes on the centre line, with the booking
   button beside the final node.

   Node positions come from the same list that generates the SVG path, so the
   two cannot drift apart — see Home.razor. Rows are equal-height `fr` tracks
   because the path assumes each node sits at the centre of its own row. */
@media (min-width: 781px) {
    .roadmap {
        position: relative;
        max-width: none;
        display: grid;
        grid-auto-rows: minmax(230px, 1fr);
    }

    .roadmap-path {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
        overflow: visible;
    }

    .roadmap-path-glow {
        opacity: 0.4;
        filter: blur(7px);
    }

    .roadmap-step {
        position: relative;
        z-index: 1;
        display: block;
        padding-bottom: 0;
    }

        /* The SVG draws the connection now. */
        .roadmap-step::before {
            display: none;
        }

    .roadmap-node {
        position: absolute;
        top: 50%;
        left: var(--node-x);
        transform: translate(-50%, -50%);
    }

    .roadmap-body {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }

        .roadmap-body h3 {
            margin-top: 0;
        }

    /* Copy clears both the node and the column the line runs down beside it. */
    .roadmap-step--left .roadmap-body {
        padding-left: calc(var(--node-x) + 3.25rem);
    }

    .roadmap-step--right .roadmap-body {
        padding-right: calc(100% - var(--node-x) + 3.25rem);
        text-align: right;
    }

        /* Without this the max-width box would hug the left edge and the
           right-aligned text would float in the middle of the row. */
        .roadmap-step--right .roadmap-body p {
            margin-left: auto;
        }

    /* The finale sits on the centre line and reads downward: last node, then the
       copy, then the button. Below the node rather than above because the road
       arrives from the top — the space above the node is where the line is. */
    .roadmap-step--end .roadmap-body {
        top: calc(50% + 2.75rem);
        bottom: auto;
        transform: none;
        text-align: center;
    }

        /* Centred rather than left-hugging, so the capped width sits under the node. */
        .roadmap-step--end .roadmap-body p {
            margin-left: auto;
            margin-right: auto;
        }
}

/* Home — the three routes onward */
.route-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.route-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: var(--surface-1);
    border: 1px solid var(--border);
    transition: border-color 0.25s ease, box-shadow 0.25s ease,
                transform 0.36s cubic-bezier(0.34, 1.4, 0.64, 1);
}

    .route-card:hover {
        border-color: var(--card-accent);
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    }

    .route-card:active {
        transform: translateY(-1px) scale(0.99);
        transition-duration: 0.08s;
    }

.route-card-media {
    display: block;
    height: 170px;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    /* Accent bar reading as the card's colour before you even hover. */
    border-bottom: 3px solid var(--card-accent);
}

.route-card-body {
    display: block;
    padding: 1.5rem 1.5rem 1.65rem;
}

.route-card-label {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.route-card-text {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 1.1rem;
}

.route-card-go {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--card-accent);
}

    .route-card-go .fa {
        margin-left: 0.55rem;
        transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
    }

.route-card:hover .route-card-go .fa {
    transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
    .route-card,
    .route-card:hover,
    .route-card:active,
    .route-card:hover .route-card-go .fa {
        transform: none;
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
}

/* Session rows — hover reveals a preview and washes the row in its accent. */
.session-rows {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.session-row {
    border-bottom: 1px solid var(--border);
}

.session-row-link {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 2rem;
    padding: 2.25rem 1.75rem 2.25rem 2.5rem;
    text-decoration: none;
    color: inherit;
    /* Wash is a background layer whose width animates, so it sweeps in from the left. */
    background-image: linear-gradient(90deg, var(--row-tint) 0%, transparent 75%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

    /* Accent bar wiping down the left edge — full brand gradient on every row. */
    .session-row-link::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-image: linear-gradient(180deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .session-row-link:hover,
    .session-row-link:focus-visible,
    .session-row-link.is-selected {
        background-size: 100% 100%;
    }

        .session-row-link:hover::before,
        .session-row-link:focus-visible::before,
        .session-row-link.is-selected::before {
            transform: scaleY(1);
        }

/* Booking page — the same row, acting as a picker rather than a link. */
.session-row-btn {
    width: 100%;
    border: 0;
    background-color: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.session-price {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--row-accent);
}

.session-num {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.3);
    transition: -webkit-text-stroke-color 0.32s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.session-title {
    display: block;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    transition: color 0.32s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Rolls open on hover. 0fr -> 1fr animates to the copy's own height, so nothing
   is clipped and no fixed height has to be guessed. */
.session-desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.48s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.session-desc-clip {
    overflow: hidden;
}

.session-desc {
    display: block;
    max-width: 62ch;
    padding-top: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.65;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.34s ease 0.08s, transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s;
}

.session-row-link:hover .session-desc-wrap,
.session-row-link:focus-visible .session-desc-wrap,
.session-row-link.is-selected .session-desc-wrap {
    grid-template-rows: 1fr;
}

.session-row-link:hover .session-desc,
.session-row-link:focus-visible .session-desc,
.session-row-link.is-selected .session-desc {
    opacity: 1;
    transform: none;
}

.session-row-link:hover .session-num,
.session-row-link:focus-visible .session-num,
.session-row-link.is-selected .session-num {
    -webkit-text-stroke-color: var(--row-accent);
    transform: translateX(6px);
}

.session-row-link:hover .session-title,
.session-row-link:focus-visible .session-title,
.session-row-link.is-selected .session-title {
    color: var(--row-accent);
    transform: translateX(10px);
}

.session-preview {
    display: block;
    width: 230px;
    height: 108px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--row-accent);
    opacity: 0;
    transform: translateX(28px) scale(0.94);
    transition: opacity 0.36s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

.session-row-link:hover .session-preview,
.session-row-link:focus-visible .session-preview,
.session-row-link.is-selected .session-preview {
    opacity: 1;
    transform: none;
}

.session-arrow {
    font-size: 1.1rem;
    color: var(--row-accent);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.32s ease, transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: 0.08s;
}

.session-row-link:hover .session-arrow,
.session-row-link:focus-visible .session-arrow,
.session-row-link.is-selected .session-arrow {
    opacity: 1;
    transform: none;
}

@media (max-width: 820px) {
    .session-row-link {
        grid-template-columns: auto 1fr auto;
        gap: 1.25rem;
        padding: 1.75rem 1.25rem 1.75rem 1.75rem;
    }

    /* No room for the preview beside the copy at this width. */
    .session-preview {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .session-num,
    .session-title,
    .session-desc,
    .session-desc-wrap,
    .session-preview,
    .session-arrow,
    .session-row-link {
        transition-duration: 0.01ms;
    }

        .session-row-link:hover .session-num,
        .session-row-link:hover .session-title {
            transform: none;
        }
}

/* Booking — calendar. Runs the full width of the container: at 460px it read as a
   widget dropped into a corner rather than the thing the page is for. */
.calendar {
    width: 100%;
    padding: 1.75rem 2rem 2rem;
    border-radius: 18px;
    background-color: var(--surface-1);
    border: 1px solid var(--border);
}

.calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Month name left, both arrows together on the right — the source order is
   prev / month / next so the arrows stay a sensible tab order. */
.calendar-month {
    order: 0;
    margin-right: auto;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.calendar-nav {
    order: 1;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: var(--surface-2);
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

    .calendar-nav:hover:not(:disabled) {
        color: #fff;
        border-color: transparent;
        background-image: linear-gradient(135deg, var(--brand-violet-600) 0%, var(--brand-magenta-600) 100%);
    }

    .calendar-nav:disabled {
        color: var(--text-muted);
        cursor: not-allowed;
        opacity: 0.5;
    }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.calendar-dow {
    padding-bottom: 0.6rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Landscape cells: square ones would make a full-width month over 600px tall. */
.calendar-day {
    aspect-ratio: 1.6;
    min-height: 3rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: transparent;
    color: var(--text-muted);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    cursor: not-allowed;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Days spilling in from the neighbouring months keep the grid rectangular but
   should not read as content. */
.calendar-day--outside {
    opacity: 0.25;
}

.calendar-day--open {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background-color: var(--surface-2);
    cursor: pointer;
}

    .calendar-day--open:hover {
        color: #fff;
        border-color: var(--brand-violet-500);
        background-color: var(--surface-3);
    }

.calendar-day.is-selected {
    color: #fff;
    border-color: transparent;
    background-image: linear-gradient(135deg, var(--brand-violet-600) 0%, var(--brand-magenta-600) 100%);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}

.calendar-day:focus-visible {
    outline: 2px solid var(--brand-blue-500);
    outline-offset: 2px;
}

.calendar-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* A full-width month gets too cramped to stay landscape on a phone. */
@media (max-width: 700px) {
    .calendar {
        padding: 1.25rem 1rem 1.5rem;
    }

    .calendar-grid {
        gap: 0.3rem;
    }

    .calendar-day {
        aspect-ratio: 1;
        min-height: 0;
        border-radius: 10px;
        font-size: 0.9rem;
    }
}

.calendar-legend-key {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
}

    .calendar-legend-key--open {
        background-color: var(--surface-2);
    }

    .calendar-legend-key--closed {
        border-color: transparent;
        background-color: transparent;
        box-shadow: inset 0 0 0 1px var(--border);
    }

    .calendar-legend-key:not(:first-child) {
        margin-left: 0.75rem;
    }

/* Booking — time slots */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.6rem;
}

.slot {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background-color: var(--surface-2);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

    .slot:hover:not(:disabled) {
        color: #fff;
        border-color: var(--brand-violet-500);
        background-color: var(--surface-3);
    }

    .slot:disabled {
        cursor: not-allowed;
        opacity: 0.45;
    }

    .slot.is-selected {
        color: #fff;
        border-color: transparent;
        background-image: linear-gradient(135deg, var(--brand-violet-600) 0%, var(--brand-magenta-600) 100%);
        box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
    }

.slot-time {
    font-size: 1rem;
    font-weight: 700;
}

.slot-seats {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.slot.is-selected .slot-seats {
    color: rgba(255, 255, 255, 0.85);
}

/* Booking — the slide-in drawer */
body.is-locked {
    overflow: hidden;
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    background-color: rgba(8, 10, 15, 0.65);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s;
}

    .drawer-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    width: min(480px, 100%);
    display: flex;
    flex-direction: column;
    background-color: var(--surface-0);
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.36s;
}

    .drawer.is-open {
        transform: none;
        visibility: visible;
    }

    /* Brand edge, so the panel reads as part of the site rather than a system sheet. */
    .drawer::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background-image: linear-gradient(180deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
    }

.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.drawer-eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-violet-300);
}

.drawer-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.drawer-close {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: var(--surface-2);
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

    .drawer-close:hover {
        color: #fff;
        background-color: var(--surface-3);
    }

/* The panel is fixed to the viewport, so its own body is what scrolls. */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.75rem 2.5rem;
}

.drawer-section {
    margin-bottom: 2rem;
}

.drawer-heading {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    font-weight: 700;
}

.drawer-note {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.drawer-note--centred {
    text-align: center;
}

.drawer-error {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--status-danger);
}

.drawer-error--banner {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background-color: rgba(225, 70, 44, 0.12);
    border: 1px solid rgba(225, 70, 44, 0.45);
}

.drawer-action {
    width: 100%;
    margin-top: 0.5rem;
}

.drawer-action--quiet {
    margin-top: 0.75rem;
}

.drawer-confirmed {
    margin-bottom: 1.5rem;
    text-align: center;
}

    .drawer-confirmed h3 {
        margin: 0 0 0.35rem;
    }

    .drawer-confirmed p {
        margin: 0;
        color: var(--text-secondary);
    }

/* Booking — who else is in this group slot */
.roster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.roster-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background-color: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.roster-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(135deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 100%);
}

/* Booking — keeper name rows */
.keeper-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.keeper-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.keeper-remove {
    flex: none;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--surface-2);
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

    .keeper-remove:hover {
        color: var(--status-danger);
        border-color: var(--status-danger);
    }

.keeper-add {
    margin-top: 0.75rem;
}

/* Booking — receipt */
.receipt {
    padding: 1.35rem 1.5rem 1.5rem;
    border-radius: 14px;
    background-color: var(--surface-1);
    border: 1px solid var(--border);
}

.receipt-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-strong);
}

.receipt-brand {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: linear-gradient(90deg, var(--brand-blue-300) 0%, var(--brand-magenta-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.receipt-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.receipt-ref {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.75rem 0 0.25rem;
    text-align: center;
}

.receipt-caption {
    margin: 1.25rem 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Booking — details form and running total */
.field-optional {
    margin-left: 0.4rem;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.summary-rows {
    margin: 0;
}

.summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

    .summary-row dt {
        color: var(--text-secondary);
        font-weight: 400;
    }

    .summary-row dd {
        margin: 0;
        text-align: right;
        font-weight: 600;
    }

.summary-row--total {
    border-bottom: 0;
    padding-top: 1rem;
}

    .summary-row--total dt {
        color: var(--text-primary);
        font-weight: 700;
    }

    .summary-row--total dd {
        font-size: 1.5rem;
        font-weight: 800;
        background: linear-gradient(90deg, var(--brand-blue-300) 0%, var(--brand-magenta-300) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

/* Booking — confirmation */
.booking-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #fff;
    background-image: linear-gradient(135deg, var(--brand-violet-600) 0%, var(--brand-magenta-600) 100%);
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.45);
}

.booking-ref-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.booking-ref-value {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

/* FAQ — the session picker's bars, driven by click instead of hover. Kept separate from
   .session-row so that hovering a question does not give away its answer. */
.faq-rows {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.faq-row {
    border-bottom: 1px solid var(--border);
}

.faq-trigger {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 1.75rem;
    width: 100%;
    padding: 1.75rem 1.5rem 1.75rem 2.25rem;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    /* Wash is a background layer whose width animates, so it sweeps in from the left. */
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--row-tint) 0%, transparent 75%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

    /* Accent bar wiping down the left edge — full brand gradient on every row. */
    .faq-trigger::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-image: linear-gradient(180deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .faq-trigger:hover,
    .faq-trigger:focus-visible,
    .faq-trigger.is-open {
        background-size: 100% 100%;
    }

        .faq-trigger:hover::before,
        .faq-trigger:focus-visible::before,
        .faq-trigger.is-open::before {
            transform: scaleY(1);
        }

.faq-num {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 800;
    line-height: 1.5;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.3);
    transition: -webkit-text-stroke-color 0.32s ease;
}

.faq-trigger:hover .faq-num,
.faq-trigger.is-open .faq-num {
    -webkit-text-stroke-color: var(--row-accent);
}

.faq-question {
    display: block;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary);
    transition: color 0.32s ease;
}

.faq-trigger.is-open .faq-question {
    color: var(--row-accent);
}

/* Rolls open on click. 0fr -> 1fr animates to the copy's own height, so nothing is
   clipped and no fixed height has to be guessed. */
.faq-answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.44s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-answer-clip {
    overflow: hidden;
}

.faq-answer {
    display: block;
    max-width: 68ch;
    padding-top: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.7;
    opacity: 0;
    transition: opacity 0.32s ease 0.06s;
}

.faq-trigger.is-open .faq-answer-wrap {
    grid-template-rows: 1fr;
}

.faq-trigger.is-open .faq-answer {
    opacity: 1;
}

.faq-chevron {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--row-accent);
    opacity: 0.5;
    transition: transform 0.36s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.24s ease;
}

.faq-trigger:hover .faq-chevron {
    opacity: 1;
}

.faq-trigger.is-open .faq-chevron {
    opacity: 1;
    transform: rotate(90deg);
}

@media (max-width: 640px) {
    .faq-trigger {
        gap: 1rem;
        padding: 1.35rem 1rem 1.35rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-trigger,
    .faq-num,
    .faq-question,
    .faq-answer,
    .faq-answer-wrap,
    .faq-chevron {
        transition-duration: 0.01ms;
    }
}

/* Contact */
.contact-layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The quickest way to reach Abby, given the weight to match. */
.contact-primary {
    position: relative;
    overflow: hidden;
    padding: 1.75rem;
    border-radius: 18px;
    border: 1px solid transparent;
    background-color: var(--surface-1);
    background-image:
        linear-gradient(var(--surface-1), var(--surface-1)),
        linear-gradient(135deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

    /* Brand wash bleeding in from the corner behind the content. */
    .contact-primary::after {
        content: "";
        position: absolute;
        top: -40%;
        right: -30%;
        width: 70%;
        height: 180%;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(232, 64, 154, 0.22), transparent);
        pointer-events: none;
    }

    .contact-primary > * {
        position: relative;
        z-index: 1;
    }

.contact-primary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.1rem;
    border-radius: 16px;
    font-size: 1.2rem;
    color: #fff;
    background-image: linear-gradient(135deg, var(--brand-violet-600) 0%, var(--brand-magenta-600) 100%);
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.4);
}

.contact-primary-value {
    margin: 0.15rem 0 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.reply-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.15rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Cross-link out to the thing most visitors actually came for. */
.contact-jump {
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    background-color: var(--surface-sunken);
    border: 1px dashed var(--border-strong);
}

    .contact-jump p {
        margin: 0 0 0.9rem;
        color: var(--text-secondary);
    }

.contact-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 14px;
    background-color: var(--surface-1);
    border: 1px solid var(--border);
}

.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.15rem;
    color: #fff;
}

/* One brand colour per card, top to bottom. */
.contact-card:nth-child(1) .contact-icon {
    background: linear-gradient(135deg, var(--brand-blue-600) 0%, var(--brand-blue-500) 100%);
}

.contact-card:nth-child(2) .contact-icon {
    background: linear-gradient(135deg, var(--brand-violet-600) 0%, var(--brand-violet-500) 100%);
}

.contact-card:nth-child(3) .contact-icon {
    background: linear-gradient(135deg, var(--brand-magenta-600) 0%, var(--brand-magenta-500) 100%);
}

.contact-label {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.contact-value {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

/* Tappable phone and email, without looking like links in a paragraph. */
.contact-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s ease;
}

    .contact-link:hover,
    .contact-link:focus-visible {
        color: inherit;
        border-bottom-color: currentColor;
    }

.contact-cta-text {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

    .contact-cta-text .fa {
        color: var(--brand-violet-300);
    }

.btn .fa {
    margin-left: 0.55rem;
    font-size: 0.85em;
    vertical-align: -1px;
}

/* Contact form */
.contact-form {
    padding: 2.5rem;
    border-radius: 18px;
    background-color: var(--surface-1);
    border: 1px solid var(--border);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.field {
    margin-bottom: 1.5rem;
}

    .field label {
        display: block;
        margin-bottom: 0.55rem;
        font-size: 0.92rem;
        color: var(--text-secondary);
    }

    .field .form-control {
        min-height: 3.35rem;
        padding: 0.9rem 1.15rem;
        font-size: 1.02rem;
        border-radius: 11px;
    }

    .field textarea.form-control {
        resize: vertical;
        min-height: 11rem;
    }

    .field .validation-message {
        display: block;
        margin-top: 0.35rem;
        font-size: 0.85rem;
    }

.form-sent {
    text-align: center;
    padding: 2rem 1rem;
}

.form-sent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
}

.form-sent p {
    margin: 0;
    color: var(--text-secondary);
}

@media (max-width: 820px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form {
        padding: 1.5rem;
    }
}

/* Closing feature panel — the run that is still going. */
.standing {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 4.5rem;
    padding: 2.25rem 2.5rem;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--surface-2);
    background-image: linear-gradient(105deg, rgba(106, 155, 255, 0.14) 0%, rgba(124, 58, 237, 0.16) 50%, rgba(232, 64, 154, 0.16) 100%);
}

    /* Gradient hairline ring drawn with a mask so the fill stays clear. */
    .standing::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(105deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

.standing-body {
    position: relative;
    z-index: 1;
    min-width: 260px;
    flex: 1;
}

    .standing-body h3 {
        font-size: 1.65rem;
        margin: 0.75rem 0 0.4rem;
    }

    .standing-body p {
        margin: 0;
        color: var(--text-secondary);
    }

.standing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--brand-magenta-500);
    box-shadow: 0 0 0 0 rgba(242, 92, 172, 0.7);
    animation: pulse-dot 2s ease-out infinite;
}

@keyframes pulse-dot {
    70% { box-shadow: 0 0 0 8px rgba(242, 92, 172, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 92, 172, 0); }
}

.standing-years {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.standing-year {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, var(--brand-blue-300) 0%, var(--brand-violet-300) 55%, var(--brand-magenta-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.standing-arrow {
    width: 2.5rem;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--brand-violet-500) 0%, var(--brand-magenta-500) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .pulse-dot {
        animation: none;
    }
}

@media (max-width: 820px) {
    .timeline::before {
        display: none;
    }

    .standing {
        padding: 1.75rem;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

        .timeline-item:nth-child(even) .timeline-media {
            order: 0;
        }

        .timeline-item:nth-child(even) .timeline-body {
            order: 0;
            text-align: left;
        }

        .timeline-item:nth-child(even) .timeline-entries {
            padding-left: 1.1rem;
            padding-right: 0;
        }

            .timeline-item:nth-child(even) .timeline-entries li::before {
                left: -1.1rem;
                right: auto;
            }
}

/* Scroll reveals.
   Scoped to html.js — without scripting the content just stays visible. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}

.js [data-reveal="left"] {
    transform: translateX(-44px);
}

.js [data-reveal="right"] {
    transform: translateX(44px);
}

.js [data-reveal].in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .photo-band-media {
        transform: none !important;
    }
}

.eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-violet-300);
    margin-bottom: 0.5rem;
}

.lead {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 60ch;
}

.brand-rule {
    max-width: 6rem;
    margin: 1.25rem 0 1.5rem;
}

.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

    .section-grid h3 {
        font-size: 1.1rem;
        margin: 0.75rem 0 0.5rem;
    }

    .section-grid p {
        color: var(--text-secondary);
        margin: 0;
    }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 500;
}

a, .btn-link {
    color: var(--brand-blue-300);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: #FFFFFF;
}

.btn-primary {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: #fff;
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* Every button shares the nav's press feel: snap down fast, spring back slow. */
.btn {
    border-radius: 999px;
    font-weight: 500;
    transition: background-color 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease,
                filter 0.18s ease,
                transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover {
    transform: scale(1.05) translateY(-2px);
}

.btn:active {
    transform: scale(0.93) translateY(2px);
    transition-duration: 0.18s, 0.18s, 0.18s, 0.18s, 0.06s;
}

.btn:disabled,
.btn.disabled {
    transform: none;
}

.btn-lg {
    padding: 0.85rem 1.9rem;
    font-size: 1.02rem;
}

.btn-accent {
    color: #fff;
    border: 0;
    background-color: var(--brand-accent);
    background-image: linear-gradient(120deg, var(--brand-violet-600) 0%, var(--brand-magenta-600) 100%);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}

.btn-accent:hover, .btn-accent:focus {
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.5);
}

.btn-accent:active {
    color: #fff;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.45);
}

.btn-outline-brand:hover {
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.btn-outline-brand:active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn:hover,
    .btn:active {
        transform: none;
        transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
}

.btn-highlight {
    color: #fff;
    background-color: var(--brand-highlight);
    border-color: var(--brand-highlight);
}

.btn-highlight:hover, .btn-highlight:active, .btn-highlight:focus {
    color: #fff;
    background-color: var(--brand-highlight-hover);
    border-color: var(--brand-highlight-hover);
}

.btn-outline-brand {
    color: var(--text-primary);
    background-color: transparent;
    border-color: var(--border-strong);
}

.btn-outline-brand:hover {
    color: #fff;
    background-color: var(--surface-2);
    border-color: var(--brand-accent);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.4);
}

.card, .list-group-item, .dropdown-menu, .modal-content, .offcanvas {
    background-color: var(--surface-1);
    border-color: var(--border);
    color: var(--text-primary);
}

.form-control, .form-select {
    background-color: var(--surface-1);
    border-color: var(--border);
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface-1);
    border-color: var(--brand-accent);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-check-input {
    background-color: var(--surface-2);
    border-color: var(--border-strong);
}

.form-check-input:checked {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--surface-1);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text-primary);
}

/* Brand presence */
::selection {
    background-color: var(--brand-violet-600);
    color: #fff;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--surface-0);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--brand-violet-600);
    }

.brand-gradient {
    background: linear-gradient(90deg, var(--brand-blue-500) 0%, var(--brand-violet-500) 50%, var(--brand-magenta-500) 100%);
}

.text-brand-gradient {
    background: linear-gradient(90deg, var(--brand-blue-300) 0%, var(--brand-violet-300) 50%, var(--brand-magenta-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-rule {
    height: 3px;
    border: 0;
    border-radius: 2px;
    opacity: 1;
    background: linear-gradient(90deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
}

.card-brand {
    position: relative;
    overflow: hidden;
}

    .card-brand::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--brand-blue-600) 0%, var(--brand-violet-600) 50%, var(--brand-magenta-600) 100%);
    }

.badge-blue {
    background-color: rgba(75, 110, 245, 0.18);
    color: var(--brand-blue-300);
}

.badge-violet {
    background-color: rgba(124, 58, 237, 0.20);
    color: var(--brand-violet-300);
}

.badge-magenta {
    background-color: rgba(232, 64, 154, 0.18);
    color: var(--brand-magenta-300);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--status-success);
}

.invalid {
    outline: 1px solid var(--status-danger);
}

.validation-message {
    color: var(--status-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--border-strong);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}