/* _content/Site/Components/Layout/Footer.razor.rz.scp.css */
.site-footer[b-61t9h9tqza] {
    border-top: 1px solid color-mix(in hsl, var(--primary-colour), transparent 85%);
    background: var(--white);
    padding: 0.75rem 1rem 1.25rem 1rem;
}

.site-footer .footer-content[b-61t9h9tqza] {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.site-footer[b-61t9h9tqza]  .page-section {
    padding: 0;
    margin: 0;
}

.site-footer[b-61t9h9tqza]  .page-section h3 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    color: var(--primary-colour);
    font-weight: 600;
}

.site-footer[b-61t9h9tqza]  .page-section .location-name {
    font-weight: 600;
    color: color-mix(in hsl, var(--primary-colour), black 20%);
}

.site-footer[b-61t9h9tqza]  .page-section > div {
    font-size: 0.95rem;
    color: color-mix(in hsl, var(--primary-colour), black 40%);
}

.site-footer .social-links[b-61t9h9tqza] {
    display: flex;
    gap: 0.75rem;
    justify-self: end;
    align-items: center;
}

.site-footer .social-link[b-61t9h9tqza] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in hsl, var(--primary-colour), black 35%);
    transition: color .2s ease, background-color .2s ease, transform .15s ease, box-shadow .2s ease;
    border-radius: 9999px;
    padding: 6px;
    width: 32px;
    height: 32px;
}

.site-footer .social-link .bi[b-61t9h9tqza] {
    font-size: 1.5rem;
    line-height: 1;
    width: 1em;
    height: 1em;
}

.site-footer .social-link:hover[b-61t9h9tqza] {
    color: var(--primary-colour);
    background-color: color-mix(in hsl, var(--primary-colour), white 90%);
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.site-footer .social-link:active[b-61t9h9tqza] {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 640px) {
    .site-footer .footer-content[b-61t9h9tqza] {
        grid-template-columns: 1fr;
    }
    .site-footer .social-links[b-61t9h9tqza] {
        justify-self: start;
        margin-top: 0.25rem;
    }
    .site-footer[b-61t9h9tqza] {
        padding: 0.75rem;
    }
    .site-footer[b-61t9h9tqza]  .page-section h3 {
        font-size: 0.9rem;
    }
    .site-footer[b-61t9h9tqza]  .page-section div {
        font-size: 0.85rem;
    }
}
/* _content/Site/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-izt6un4l4f] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-izt6un4l4f] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Site/Components/Layout/TopMenu.razor.rz.scp.css */
/* Navigation Menu Styles */
nav[b-p0d371zelv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: var(--primary-colour);
    border-bottom: 1px solid var(--primary-dark);
    box-shadow: 0 2px 4px color-mix(in hsl, var(--primary-shadow), transparent 80%);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.menu-home-branding[b-p0d371zelv] {
    font-family: "Rock Salt", cursive;
    font-size: 14px;
}

.menu-home-branding img[b-p0d371zelv] {
    height: 40px;
    width: auto;
    max-width: 150px;
}

#menu-toggle[b-p0d371zelv] { display: none; }

.nav-items[b-p0d371zelv] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav-item[b-p0d371zelv] {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color .2s ease;
}

label.nav-item[b-p0d371zelv] { display: none; }

.nav-item:hover[b-p0d371zelv] {
    background-color: color-mix(in hsl, var(--white), transparent 90%);
}

a.nav-item:focus-visible[b-p0d371zelv] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ================= Mobile ================= */
@media (max-width: 768px) {
    nav[b-p0d371zelv] {
        align-items: flex-start;
        padding: .75rem 1rem;
    }

    .menu-home-branding[b-p0d371zelv] { margin-top: 4px; }

    .nav-items[b-p0d371zelv] {
        position: relative;
        flex-direction: column;
        gap: .5rem;
    }

   
    label.nav-item[b-p0d371zelv] {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        width: 44px;
        height: 44px;
        align-self: flex-end;
        font-size: 0;
        line-height: 0;
        position: relative;
        cursor: pointer;
        z-index: 3;
    }
    label.nav-item[b-p0d371zelv]::before {
        content: "\F479";
        font-family: "bootstrap-icons";
        font-size: 28px;
        line-height: 44px;
        display: inline-block;
        width: 44px;
        height: 44px;
        text-align: center;
        color: var(--white);
    }

   
    .nav-items > a.nav-item[b-p0d371zelv] { display: none; }

    
    #menu-toggle:checked ~ .nav-items[b-p0d371zelv] {
        position: absolute;
        top: 48px;                     
        right: 0;
        left: 0;
        margin: 0 auto;
        padding: 12px;
        background: var(--primary-colour);
        border-radius: 12px;
        box-shadow: 0 12px 24px color-mix(in hsl, var(--primary-shadow), transparent 60%);
        z-index: 2;
        gap: 0;
        max-height: 80vh;              
        overflow: auto;               
    }

    #menu-toggle:checked ~ .nav-items > a.nav-item[b-p0d371zelv] {
        display: block;
        width: 100%;
        padding: 12px 8px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--white);
        font-size: 1rem;
    }

    #menu-toggle:checked ~ .nav-items > a.nav-item:hover[b-p0d371zelv] {
        background: color-mix(in hsl, var(--white), transparent 85%);
    }

  
    #menu-toggle:checked ~ .nav-items > label.nav-item[b-p0d371zelv]::before {
        content: "\F659"; /* bi-x-lg */
        font-size: 26px;
    }
}

 
@media (max-width: 480px) {
    .menu-container[b-p0d371zelv] { padding: .5rem; }
    .menu-item-left img[b-p0d371zelv] { height: 32px; }
    .menu-item-right p[b-p0d371zelv] { font-size: .9rem; }
}


/* _content/Site/Components/Pages/DoorSchedule.razor.rz.scp.css */
.door-schedule-container[b-bxoc6w3lv1] {
    min-height: 100vh;
    padding: 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    background-color: var(--white);
    color: var(--black);
    max-width: 1200px;
    margin: 0 auto;
}

.room-selection[b-bxoc6w3lv1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    text-align: center;
}

.day-block[b-bxoc6w3lv1] {
    margin-bottom: 2rem;
}

.day-title[b-bxoc6w3lv1] {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

.room-grid[b-bxoc6w3lv1] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.room-btn[b-bxoc6w3lv1] {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    background-color: var(--primary-colour);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
}

.room-btn:hover[b-bxoc6w3lv1] {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


.schedule-view[b-bxoc6w3lv1] {
    display: flex;
    flex-direction: column;
    min-height: 95vh;
    justify-content: space-between;
}

.header-row[b-bxoc6w3lv1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-light);
    margin-bottom: 1rem;
}

.room-name[b-bxoc6w3lv1] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 0;
    text-transform: uppercase;
}

.reset-btn[b-bxoc6w3lv1] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #ccc;
    color: #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.reset-btn:hover[b-bxoc6w3lv1] {
    background: #f0f0f0;
    color: #333;
}

.sponsors-top[b-bxoc6w3lv1] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 2rem;
    padding: 1rem 0;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.sponsor-logo[b-bxoc6w3lv1] {
    height: 80px;
    width: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    max-width: 250px;
    filter: grayscale(10%);
    transition: filter 0.3s;
}

.sponsor-logo:hover[b-bxoc6w3lv1] {
    filter: grayscale(0%);
}


.sessions-area[b-bxoc6w3lv1] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    padding: 1rem 0;
}

.current-session[b-bxoc6w3lv1] {
    background-color: var(--white);
    border: 1px solid var(--primary-light);
    border-left: 12px solid var(--primary-colour);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 8px 20px var(--primary-shadow);
}

.time-badge[b-bxoc6w3lv1] {
    display: inline-block;
    background-color: var(--primary-dark);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.session-title[b-bxoc6w3lv1] {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    color: var(--black);
}

.session-speakers[b-bxoc6w3lv1] {
    font-size: 1.4rem;
    color: var(--primary-dark);
    margin-top: 0.5rem;
    font-weight: 500;
}

.next-session[b-bxoc6w3lv1] {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: rgba(255,255,255,0.6);
    border-left: 6px solid var(--primary-light);
    border-radius: 0 8px 8px 0;
}

.next-label[b-bxoc6w3lv1] {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-muted);
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.next-session-details[b-bxoc6w3lv1] {
    display: flex;
    flex-direction: column;
}

.next-time[b-bxoc6w3lv1] {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-muted);
    margin-bottom: 0.2rem;
    display: block;
}

.next-title[b-bxoc6w3lv1] {
    font-size: 1.6rem;
    font-weight: 600;
    color: #444;
    display: block;
}

.next-speakers[b-bxoc6w3lv1] {
    font-size: 1.1rem;
    color: #666;
    margin-top: 0.3rem;
    font-style: italic;
}

.no-more-sessions[b-bxoc6w3lv1] {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary-muted);
    margin-top: 4rem;
    font-weight: 300;
}


.sponsors-bottom[b-bxoc6w3lv1] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    margin-top: auto;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sponsor-logo-small[b-bxoc6w3lv1] {
    height: 50px;
    width: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    max-width: 180px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.sponsor-logo-small:hover[b-bxoc6w3lv1] {
    opacity: 1;
}


@media (max-height: 950px), (max-width: 1024px) {
    .door-schedule-container[b-bxoc6w3lv1] {
        padding: 1rem;
    }

    .room-name[b-bxoc6w3lv1] {
        font-size: 2rem;
    }

    .sponsors-top[b-bxoc6w3lv1] {
        gap: 1.5rem;
        margin-bottom: 1rem;
        padding: 0.5rem 0;
    }

    .sponsor-logo[b-bxoc6w3lv1] {
        height: 60px;
    }

    .sessions-area[b-bxoc6w3lv1] {
        gap: 1.5rem;
    }

    .current-session[b-bxoc6w3lv1] {
        padding: 1.5rem;
    }

    .session-title[b-bxoc6w3lv1] {
        font-size: 1.8rem;
    }

    .session-speakers[b-bxoc6w3lv1] {
        font-size: 1.2rem;
    }

    .time-badge[b-bxoc6w3lv1] {
        font-size: 1.2rem;
        padding: 0.3rem 0.8rem;
        margin-bottom: 0.5rem;
    }

    .next-session[b-bxoc6w3lv1] {
        padding: 1rem;
        margin-top: 0.8rem;
    }

    .next-title[b-bxoc6w3lv1] {
        font-size: 1.4rem;
    }

    .sponsors-bottom[b-bxoc6w3lv1] {
        padding-top: 1rem;
        gap: 1rem;
    }

    .sponsor-logo-small[b-bxoc6w3lv1] {
        height: 40px;
    }
}


@media (max-width: 768px) {
    .room-name[b-bxoc6w3lv1] {
        font-size: 1.8rem;
    }

    .sponsor-logo[b-bxoc6w3lv1] {
        height: 50px;
    }

    .session-title[b-bxoc6w3lv1] {
        font-size: 2rem;
    }

    .next-title[b-bxoc6w3lv1] {
        font-size: 1.5rem;
    }

    .sponsor-logo-small[b-bxoc6w3lv1] {
        height: 35px;
    }
}
/* _content/Site/Components/Pages/Sessions.razor.rz.scp.css */
.session-detail[b-8kmxozk3cg] {
    display: grid;
    grid-template-columns: minmax(180px, max-content) 1fr;
    gap: 0.75rem;
    align-items: start;
}

.session-detail .speaker-aside[b-8kmxozk3cg] {
    float: none;
    margin: 0;
}

.session-detail :deep(.text-block)[b-8kmxozk3cg] {
    margin: 0;
}

.session-detail :deep(.text-block .text)[b-8kmxozk3cg] {
    margin: 0;
    max-width: 100%;
}

@media (max-width: 900px) {
    .session-detail[b-8kmxozk3cg] {
        grid-template-columns: 1fr;
    }
}
/* _content/Site/Components/Pages/Speakers.razor.rz.scp.css */
.speaker-image-centered[b-wkcjhc5g67] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* _content/Site/Components/Pages/SponsorPackage.razor.rz.scp.css */
.complex-layout[b-cuiu8z2bvf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.layout-item-1[b-cuiu8z2bvf] {
    grid-column: 1 / -1; /* spans both columns */
}

/* Mobile */
@media (max-width: 680px) {
    .complex-layout[b-cuiu8z2bvf] {
        grid-template-columns: 1fr;
    }

    .layout-item-1[b-cuiu8z2bvf] {
        grid-column: 1; /* resets to single column */
    }
}

.package-card[b-cuiu8z2bvf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid color-mix(in hsl, var(--primary-colour), transparent 80%);
    border-radius: 12px;
    background-color: var(--white);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px color-mix(in hsl, var(--primary-shadow), transparent 90%);
    width: 100%;
    min-height: 180px;
}

.package-card:hover[b-cuiu8z2bvf] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px color-mix(in hsl, var(--primary-shadow), transparent 80%);
    border-color: var(--primary-colour);
}
/* _content/Site/Components/Pages/Tickets.razor.rz.scp.css */
.tickets-section h2[b-wwukuafr0u] {
    text-align: center;
    margin-bottom: 2rem;
}

.intro-block[b-wwukuafr0u] {
    text-align: center;
    margin-bottom: 3rem;
}

.ticket-card[b-wwukuafr0u] {
    position: relative;
    padding: 2rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    height: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.ticket-card:hover[b-wwukuafr0u] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ticket-card h3[b-wwukuafr0u] {
    color: var(--text);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-right: 5rem;
}

.ticket-card .text[b-wwukuafr0u] {
    color: var(--primary-muted);
    line-height: 1.6;
}

.super-early-bird[b-wwukuafr0u],
.early-bird[b-wwukuafr0u],
.regular-bird[b-wwukuafr0u],
.late-bird[b-wwukuafr0u] {
    background-repeat: no-repeat;
    background-position: top 15px right 10px;
    background-size: 60px 60px;
}

.super-early-bird[b-wwukuafr0u] {
    background-image: url("/img/bird-tickets/SmallCroppedSuperEarlyBird.svg");
}

.early-bird[b-wwukuafr0u] {
    background-image: url("/img/bird-tickets/SmallCroppedEarlyBird.svg");
}

.regular-bird[b-wwukuafr0u] {
    background-image: url("/img/bird-tickets/SmallCroppedRegularBird.svg");
}

.late-bird[b-wwukuafr0u] {
    background-image: url("/img/bird-tickets/SmallCroppedLateBird.svg");
}

@media (max-width: 767.98px) {
    .ticket-card[b-wwukuafr0u] {
        margin-bottom: 1rem;
    }
    
    .ticket-card h3[b-wwukuafr0u] {
        padding-right: 5rem;
    }
}
/* _content/Site/Components/ResuableComponents/ButtonList.razor.rz.scp.css */
.button-container[b-4jem0ogzsm]{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
}

.button[b-4jem0ogzsm] {
    background-color: var(--white);
    color: var(--primary-colour);
    border: var(--primary-colour) 2px solid;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.button:hover[b-4jem0ogzsm] {
    background-color: var(--primary-colour);
    color: var(--white);
}

.button:active[b-4jem0ogzsm] {
    transform: translateY(1px);
}

.button:focus[b-4jem0ogzsm] {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    background-color: var(--primary-muted);
    color: var(--white);
}
/* _content/Site/Components/ResuableComponents/CallForSpeakers.razor.rz.scp.css */
/* Structural mirror of HookSection.razor.css - same colour mapping as Hook (heading = white panel,
   body = solid-magenta panel), but the heading/CTA column sits visually on the right at desktop
   widths - it stays first in the DOM (see CallForSpeakers.razor) so it reads first on mobile,
   and for a screen reader, without needing a separate mobile-only reorder rule. */
.cfp-section[b-17s7lqw9cc] {
    width: 100%;
}

.cfp-columns[b-17s7lqw9cc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.cfp-column[b-17s7lqw9cc] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cfp-column-inner[b-17s7lqw9cc] {
    max-width: 600px;
    padding: var(--space-section-y) var(--space-section-x);
}

/* Heading/CTA column: same white background + brand-magenta heading text HookSection uses for its
   own heading column. In dark mode this instead uses the page's own --background/--text pair
   (below), matching HookSection's own dark-mode treatment - a literal white block reads as glaring
   against an otherwise dark-themed page. */
.cfp-column--heading[b-17s7lqw9cc] {
    background: var(--white);
    color: var(--primary-colour);
    order: 2;
}

@media (prefers-color-scheme: dark) {
    .cfp-column--heading[b-17s7lqw9cc] {
        background: var(--background);
        color: var(--text);
    }
}

.cfp-column--heading h2[b-17s7lqw9cc] {
    font-size: var(--fs-page-heading);
    line-height: var(--lh-page-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
    margin: 0 0 0.75rem;
}

.cfp-column--heading .hairline-divider[b-17s7lqw9cc] {
    margin: 0 0 1rem;
}

.cfp-column--heading h3[b-17s7lqw9cc] {
    font-size: var(--fs-section-heading);
    line-height: var(--lh-section-heading);
    font-weight: 500;
    color: inherit;
    margin: 0 0 1.5rem;
}

.cfp-column--heading .button-container[b-17s7lqw9cc] {
    justify-content: flex-start;
}

/* Body-copy column: dark-magenta background, same off-white text HookSection uses for its own
   solid-magenta body column. */
.cfp-column--body[b-17s7lqw9cc] {
    background: var(--primary-dark);
    color: var(--text-on-brand);
    order: 1;
}

.cfp-column--body p[b-17s7lqw9cc] {
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.cfp-column--body p:last-child[b-17s7lqw9cc] {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .cfp-columns[b-17s7lqw9cc] {
        grid-template-columns: 1fr;
    }

    .cfp-column--heading[b-17s7lqw9cc],
    .cfp-column--body[b-17s7lqw9cc] {
        order: 0;
    }

    .cfp-column-inner[b-17s7lqw9cc] {
        max-width: none;
        padding: var(--space-section-y-mobile) var(--space-section-x-mobile);
    }
}
/* _content/Site/Components/ResuableComponents/CodeOfConductSection.razor.rz.scp.css */
/* Structural mirror of HookSection.razor.css - same colour mapping and heading-first layout (see
   HookSection.razor.css for the full rationale). */
.coc-section[b-hs9po5wkzr] {
    width: 100%;
}

.coc-columns[b-hs9po5wkzr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.coc-column[b-hs9po5wkzr] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.coc-column-inner[b-hs9po5wkzr] {
    max-width: 600px;
    padding: var(--space-section-y) var(--space-section-x);
}

.coc-column--heading[b-hs9po5wkzr] {
    background: var(--white);
    color: var(--primary-colour);
}

@media (prefers-color-scheme: dark) {
    .coc-column--heading[b-hs9po5wkzr] {
        background: var(--background);
        color: var(--text);
    }
}

.coc-column--heading h2[b-hs9po5wkzr] {
    font-size: var(--fs-page-heading);
    line-height: var(--lh-page-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
    margin: 0 0 0.75rem;
}

.coc-column--heading .hairline-divider[b-hs9po5wkzr] {
    margin: 0 0 1rem;
}

.coc-column--heading h3[b-hs9po5wkzr] {
    font-size: var(--fs-section-heading);
    line-height: var(--lh-section-heading);
    font-weight: 500;
    color: inherit;
    margin: 0;
}

.coc-column--body[b-hs9po5wkzr] {
    background: var(--primary-dark);
    color: var(--text-on-brand);
}

.coc-column--body p[b-hs9po5wkzr] {
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.coc-column--body p:last-child[b-hs9po5wkzr] {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .coc-columns[b-hs9po5wkzr] {
        grid-template-columns: 1fr;
    }

    .coc-column-inner[b-hs9po5wkzr] {
        max-width: none;
        padding: var(--space-section-y-mobile) var(--space-section-x-mobile);
    }
}
/* _content/Site/Components/ResuableComponents/CoverImage.razor.rz.scp.css */
.hero[b-9qpxgr26s9] {
    position: relative;
    height: calc(100dvh - var(--nav-height));
    min-height: 480px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-layer[b-9qpxgr26s9] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    /* .hero-layer has higher specificity than app.css's sitewide "*" reduced-motion rule, so this
       wins over it rather than letting the forced 0.001ms/1-iteration animation snap every layer to
       its own final keyframe (opacity: 0), which would leave the hero with no visible image at all. */
    .hero-layer[b-9qpxgr26s9] {
        animation: none !important;
        opacity: 0 !important;
    }

    .hero-layer:first-child[b-9qpxgr26s9] {
        opacity: 1 !important;
    }
}

.hero-scrim[b-9qpxgr26s9] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 8, 9, 0.05) 0%, rgba(10, 8, 9, 0.35) 55%, rgba(10, 8, 9, 0.72) 100%);
}

.hero-cards[b-9qpxgr26s9] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 9fr 2fr 6fr 1fr;
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.hero-card[b-9qpxgr26s9] {
    background: rgba(10, 8, 9, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    color: #F4F0EC;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;
}

.hero-card--identity[b-9qpxgr26s9] {
    grid-column: 1;
}

.hero-card--cta[b-9qpxgr26s9] {
    grid-column: 3;
}

@media (max-width: 768px) {
    .hero[b-9qpxgr26s9] {
        height: calc(100dvh - var(--nav-height-mobile));
    }

    .hero-cards[b-9qpxgr26s9] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .hero-card--identity[b-9qpxgr26s9],
    .hero-card--cta[b-9qpxgr26s9] {
        grid-column: auto;
        width: 100%;
    }
}

.hero-wordmark[b-9qpxgr26s9] {
    font-family: "Rock Salt", cursive;
    font-size: max(8vw, 3rem);
    font-weight: 400;
    line-height: 1;
    margin: 0;
    /* Brand magenta can't clear AAA here at any background darkness - its own luminance is too
       close to near-black regardless of what's behind it (see .hero-card's own dark surface). Same
       off-white used for the rest of the hero's text instead - now a shared token (--text-on-brand)
       since the homepage hook section's body copy needs this exact same shade too. */
    color: var(--text-on-brand);
    display: inline-block;
    text-align: left;
    width: 100%;
    position: relative;
}

/* The fade is on this pseudo-element, behind the text, rather than on .hero-wordmark itself -
   a gradient/mask on the element directly would fade the text along with the background, and the
   text needs to stay fully solid. A soft-edged rectangle (not the ellipse this replaces) needs a
   mask built from two linear gradients - one fading the left/right edges, one the top/bottom -
   intersected so only the overlap (the feathered rectangle) stays visible. */
.hero-wordmark[b-9qpxgr26s9]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: -10rem;
    background: rgba(0, 0, 0, 0.5);
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 25%, #000 75%, transparent),
        linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent, #000 25%, #000 75%, transparent),
        linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
    mask-composite: intersect;
}

.hero-wordmark small[b-9qpxgr26s9] {
    display: block;
    width: fit-content;
    font-family: "IBM Plex Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: max(5vw, 2rem);
    /* Derived from --primary-colour (not --primary-light - that token is far too dark to clear AAA
       on this card, same problem the wordmark had). 88% white is deliberately more than
       --primary-light's 30%: HSL mixing washes out saturation fast as lightness climbs, so it takes
       a much higher white ratio than you'd expect to reach a light-enough background for AAA (~7.7-
       14.7:1 against this card across the bright/dark photo range) while still reading as a faint
       pink rather than going fully neutral. Re-derives automatically if the brand colour changes. */
    color: color-mix(in hsl, var(--primary-colour), white 88%);
    margin-top: 1rem;
}

.hero-tagline[b-9qpxgr26s9] {
    font-size: max(2vw, 1rem);
    color: #D8D2CD;
    margin: 0;
}

.hero-meta[b-9qpxgr26s9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero-meta-label[b-9qpxgr26s9] {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: max(1vw, 0.8rem);
    color: #BDB2AC;
    margin-bottom: 0.2rem;
}

.hero-meta-value[b-9qpxgr26s9] {
    color: #F4F0EC;
    font-size: max(1vw, 0.8rem);
}

.hero-meta-mono[b-9qpxgr26s9] {
    font-family: "IBM Plex Mono", monospace;
    font-variant-numeric: tabular-nums;
}

.hero-venue-map-link[b-9qpxgr26s9] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    color: #F4F0EC;
    font-size: max(1vw, 0.8rem);
    vertical-align: middle;
}

.hero-venue-map-link:hover[b-9qpxgr26s9] {
    color: color-mix(in hsl, #F4F0EC, transparent 20%);
}

/* Hero buttons sit on a translucent dark card regardless of site theme, so they use their own
   fixed palette rather than the sitewide .button colours (which assume a light/white background). */
.hero-card .button[b-9qpxgr26s9] {
    border-color: rgba(244, 240, 236, 0.9);
    color: #F4F0EC;
    background: transparent;
    width: fit-content;
}

.hero-card .button:hover[b-9qpxgr26s9],
.hero-card .button:focus[b-9qpxgr26s9] {
    background-color: rgba(244, 240, 236, 0.9);
    color: #161414;
    border-color: rgba(244, 240, 236, 0.9);
}

.hero-card--cta .button[b-9qpxgr26s9] {
    background: var(--primary-colour);
    border-color: var(--primary-colour);
    color: #fff;
}

.hero-card--cta .button:hover[b-9qpxgr26s9],
.hero-card--cta .button:focus[b-9qpxgr26s9] {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* The hero card is always dark regardless of site theme, so the sitewide --focus-ring token (which
   follows site theme, not this card) can land as magenta-on-dark here in light mode - well under
   both the AAA and the general 3:1 minimum. Pin it to the card's own light ring colour instead. */
.hero-card .button:focus-visible[b-9qpxgr26s9],
.hero-venue-map-link:focus-visible[b-9qpxgr26s9] {
    outline-color: #F4F0EC;
}
/* _content/Site/Components/ResuableComponents/HookSection.razor.rz.scp.css */
/* Deliberately not .page-section - this section's colour needs to reach the true viewport edge on
   each half, not stop at .page-section's 1200px centred content width. <section>/<main> carry no
   width constraint of their own, so a plain block element here is already full-bleed. */
.hook-section[b-l7z6j5lu9x] {
    width: 100%;
}

.hook-columns[b-l7z6j5lu9x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hook-column[b-l7z6j5lu9x] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hook-column-inner[b-l7z6j5lu9x] {
    max-width: 600px;
    padding: var(--space-section-y) var(--space-section-x);
}

/* Heading column (white background, brand-magenta heading text) sits first both in the DOM (see
   HookSection.razor) and visually, so no `order` override is needed to get it reading first on
   mobile. In dark mode this column instead uses the page's own --background/--text pair (below) -
   a literal white block reads as glaring against an otherwise dark-themed page. */
.hook-column--heading[b-l7z6j5lu9x] {
    background: var(--white);
    color: var(--primary-colour);
}

@media (prefers-color-scheme: dark) {
    .hook-column--heading[b-l7z6j5lu9x] {
        background: var(--background);
        color: var(--text);
    }
}

.hook-column--heading h2[b-l7z6j5lu9x] {
    font-size: var(--fs-page-heading);
    line-height: var(--lh-page-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
    margin: 0 0 0.75rem;
}

.hook-column--heading .hairline-divider[b-l7z6j5lu9x] {
    margin: 0 0 1rem;
}

.hook-column--heading h3[b-l7z6j5lu9x] {
    font-size: var(--fs-section-heading);
    line-height: var(--lh-section-heading);
    font-weight: 500;
    color: inherit;
    margin: 0;
}

/* Body-copy column: dark-magenta background, same off-white as the hero wordmark. */
.hook-column--body[b-l7z6j5lu9x] {
    background: var(--primary-dark);
    color: var(--text-on-brand);
}

.hook-column--body p[b-l7z6j5lu9x] {
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.hook-column--body p:last-child[b-l7z6j5lu9x] {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .hook-columns[b-l7z6j5lu9x] {
        grid-template-columns: 1fr;
    }

    .hook-column-inner[b-l7z6j5lu9x] {
        max-width: none;
        padding: var(--space-section-y-mobile) var(--space-section-x-mobile);
    }
}
/* _content/Site/Components/ResuableComponents/LocationDisplay.razor.rz.scp.css */
.location-name[b-8qali2aaho] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.location-address[b-8qali2aaho] {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
/* _content/Site/Components/ResuableComponents/LocationSection.razor.rz.scp.css */
/* Structural mirror of HookSection.razor.css - same colour mapping and heading-first layout. */
.location-section[b-vh54fbg9b1] {
    width: 100%;
}

.location-columns[b-vh54fbg9b1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.location-column[b-vh54fbg9b1] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-column-inner[b-vh54fbg9b1] {
    max-width: 600px;
    padding: var(--space-section-y) var(--space-section-x);
}

.location-column--heading[b-vh54fbg9b1] {
    background: var(--white);
    color: var(--primary-colour);
}

@media (prefers-color-scheme: dark) {
    .location-column--heading[b-vh54fbg9b1] {
        background: var(--background);
        color: var(--text);
    }
}

.location-column--heading h2[b-vh54fbg9b1] {
    font-size: var(--fs-page-heading);
    line-height: var(--lh-page-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
    margin: 0 0 0.75rem;
}

.location-column--heading .hairline-divider[b-vh54fbg9b1] {
    margin: 0 0 1rem;
}

.location-column--heading h3[b-vh54fbg9b1] {
    font-size: var(--fs-section-heading);
    line-height: var(--lh-section-heading);
    font-weight: 500;
    color: inherit;
    margin: 0;
}

.location-column--heading p[b-vh54fbg9b1] {
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0 0 1rem;
    color: inherit;
}

.location-column--heading p:last-of-type[b-vh54fbg9b1] {
    margin-bottom: 0.5rem;
}

.location-map-link[b-vh54fbg9b1] {
    display: inline-block;
    margin-top: 1rem;
    color: var(--primary-colour);
    text-decoration: none;
    font-weight: 500;
}

@media (prefers-color-scheme: dark) {
    .location-map-link[b-vh54fbg9b1] {
        color: var(--primary-light);
    }
}

.location-map-link:hover[b-vh54fbg9b1] {
    text-decoration: underline;
}

.location-column--body[b-vh54fbg9b1] {
    background: var(--primary-dark);
    color: var(--text-on-brand);
}

.location-column--body p[b-vh54fbg9b1] {
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.location-column--body p:last-child[b-vh54fbg9b1] {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .location-columns[b-vh54fbg9b1] {
        grid-template-columns: 1fr;
    }

    .location-column-inner[b-vh54fbg9b1] {
        max-width: none;
        padding: var(--space-section-y-mobile) var(--space-section-x-mobile);
    }
}
/* _content/Site/Components/ResuableComponents/OrganiserList.razor.rz.scp.css */
.organiser-container[b-w3mdljzuhu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    column-gap: 1.5em;
    row-gap: 1.5em;
    padding: 1rem 0;
}

.organiser[b-w3mdljzuhu] {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
    padding: 1rem;
    border: 1px solid color-mix(in hsl, var(--primary-colour), transparent 80%);
    border-radius: 12px;
    background-color: var(--white);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px color-mix(in hsl, var(--primary-shadow), transparent 90%);
    width: 100%;
    min-height: 180px;
}

.organiser img[b-w3mdljzuhu] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 2px solid color-mix(in hsl, var(--primary-colour), transparent 60%);
    justify-self: center;
}

.organiser h3[b-w3mdljzuhu], .organiser h4[b-w3mdljzuhu] {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
    color: var(--primary-colour);
    line-height: 1.3;
}

p[b-w3mdljzuhu] {
    text-align: center;
}
/* _content/Site/Components/ResuableComponents/ScheduleDay.razor.rz.scp.css */
/* File: `Schedule.razor.css` */
.schedule-wrapper[b-49p0a2ztxv] { width:100%; overflow:auto; padding:0.5rem; }
.schedule-grid[b-49p0a2ztxv] {
    display: grid;
    gap: 12px;
    align-items: start;
}

.time-tick[b-49p0a2ztxv] {
    position:absolute;
    transform:translateY(-50%);
    left:6px;
    font-size:0.9rem;
    color:#333;
}
.time-tick span[b-49p0a2ztxv] { background:transparent; padding:0 4px; }

.rooms-area[b-49p0a2ztxv] {
    position:relative;
    border:1px solid var(--primary-dark);
    border-radius:6px;
    padding:0;
    /* allow the rooms area to expand if a session needs more space */
    min-height:720px;
    height:auto;
    overflow:visible;
    background:#fff;
    display:block;
}

.rooms-grid[b-49p0a2ztxv] {
    display:grid;
    /* let the grid height be driven by its container; avoid forcing 100% which can lock in a fixed height */
    height:100%;        /* fill the rooms-area vertical space */
    min-height:100%;
}

.room-column[b-49p0a2ztxv] {
    position:relative;
    border-left:1px solid #eee;
    padding:6px;
    box-sizing:border-box;
    overflow:visible;
    height:100%;        /* make the column full height so absolutely positioned sessions use the full vertical space */
    padding-top:44px; /* space for the room header */
}

.room-header[b-49p0a2ztxv] {
    position:absolute;
    top:6px;
    left:8px;
    font-weight:700;
    font-size:0.95rem;
    color:#222;
}

/* Sessions should sit above lunch bands */
.session[b-49p0a2ztxv] {
    position:relative; /* participate in flow so margin-top drives vertical spacing */
    margin-left:8px;
    margin-right:8px;
    padding:12px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
    overflow:visible;               /* allow content to be readable even if taller than computed height */
    cursor:default;
    border:1px solid rgba(0,0,0,0.2);
    z-index:3;                       /* above lunch-band (z-index:1) */
    /* allow the session to grow to fit its content instead of strictly following inline height */
    min-height:64px;                 /* reasonable minimum */
    /* inline height (px) will be applied from the component */
    white-space:normal;              /* allow wrapping */
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    box-sizing:border-box;
}

.session.normal[b-49p0a2ztxv] { background: var(--white); }
.session.lunch[b-49p0a2ztxv] { 
    background: color-mix(in srgb, var(--primary-colour), white 85%); 
    border: 1px solid color-mix(in srgb, var(--primary-colour), white 70%);
}
.session.fika[b-49p0a2ztxv] { background:var(--primary-light); }
.session.breakfast[b-49p0a2ztxv] { background: var(--primary-light);}
.session.endofday[b-49p0a2ztxv] { background:#f2f4f7; }

.session-time[b-49p0a2ztxv] {
    font-size:0.88rem;
    font-weight:700;
    margin-bottom:6px;
}

.session-title[b-49p0a2ztxv] { font-weight:800; font-size:0.95rem; line-height:1.1; }
.session-meta[b-49p0a2ztxv] { margin-top:6px; color:#666; font-size:0.9rem; }

/* overlay items (lunch bands and plenary) */
.overlay[b-49p0a2ztxv] {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    pointer-events:none; /* allow clicks to pass through to sessions */
    z-index:1;           /* below sessions (z-index:3) */
}

.plenary-block[b-49p0a2ztxv] {
    position:absolute;
    left:0; 
    right:0;
    background:rgba(240,240,240,0.9);
    border-top:1px dashed #ccc;
    border-bottom:1px dashed #ccc;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8px;
    z-index:2; /* above regular background but check vs sessions */
}

.plenary-time[b-49p0a2ztxv] { font-weight:700; color:#555; margin-bottom:4px; }
.plenary-title[b-49p0a2ztxv] { font-weight:800; font-size:1.1rem; }


@media (max-width: 767px) {
    .rooms-grid[b-49p0a2ztxv] {
        display: block;
    }

    .rooms-area[b-49p0a2ztxv] {
        height: auto !important;
        border: none;
    }

    .room-column[b-49p0a2ztxv] {
        width: 100%;
        height: auto !important;
        padding-top: 0;
        margin-bottom: 2rem;
        border-left: none;
        border-bottom: 1px solid #ddd;
        padding-bottom: 1rem;
    }

    .room-header[b-49p0a2ztxv] {
        position: static;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        text-transform: uppercase;
        color: var(--primary-dark);
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--primary-light);
        padding-bottom: 2px;
        width: 100%;
    }

    .session[b-49p0a2ztxv] {
        margin-top: 12px !important;
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 12px;
    }

    .overlay[b-49p0a2ztxv] {
        display: none;
    }
}
/* _content/Site/Components/ResuableComponents/SessionsList.razor.rz.scp.css */
.sessions-list-container[b-m5jqp0pq40] {
    width: 100%;
}

.sessions-main[b-m5jqp0pq40] {
    columns: 2;
    column-gap: 2.5rem;
    column-rule: 1px solid color-mix(in hsl, var(--primary-colour), transparent 80%);
}

.sessions-aside[b-m5jqp0pq40] {
    columns: 1;
}

.session-row[b-m5jqp0pq40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    text-decoration: none;
    color: inherit;
    gap: 2rem;
    border-bottom: 1px solid color-mix(in hsl, var(--primary-colour), transparent 80%);
    transition: background-color 0.2s ease;
    break-inside: avoid-column;
}

.session-row:last-child[b-m5jqp0pq40] {
    border-bottom: none;
}

.session-row:hover[b-m5jqp0pq40],
.session-row:focus-visible[b-m5jqp0pq40] {
    background-color: color-mix(in hsl, var(--primary-colour), transparent 96%);
}

.session-row:focus-visible[b-m5jqp0pq40] {
    outline: 3px solid var(--primary-colour);
    outline-offset: -3px;
}

@media (prefers-color-scheme: dark) {
    .session-row:hover[b-m5jqp0pq40],
    .session-row:focus-visible[b-m5jqp0pq40] {
        background-color: color-mix(in hsl, var(--primary-colour), transparent 92%);
    }
}

.session-row-content[b-m5jqp0pq40] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.session-title-block[b-m5jqp0pq40] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.session-title[b-m5jqp0pq40] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
    padding: 0;
}

.session-placement[b-m5jqp0pq40] {
    font-size: 0.875rem;
    font-family: IBM Plex Mono, monospace;
    color: var(--text-muted);
    margin: 0;
    padding: 0;
}

.session-speakers[b-m5jqp0pq40] {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .sessions-main[b-m5jqp0pq40] {
        columns: 1;
    }

    .session-row[b-m5jqp0pq40] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .session-title[b-m5jqp0pq40] {
        font-size: 0.95rem;
    }

    .session-speakers[b-m5jqp0pq40] {
        font-size: 0.9rem;
    }
}

.sessions-list-wrap[b-m5jqp0pq40] {
    position: relative;
}

/* overflow-anchor: none on the wrap alone doesn't inherit to descendants (the property isn't inherited),
   so an individual row could still be a valid, moving anchor candidate as the list expands. Applied here
   for consistency with SpeakerList.razor.css's equivalent fix, even though this list has no images and
   never showed the jump-on-expand bug those apparently caused there.
   Deliberately NOT excluding `.sessions-more-indicator` here, unlike the speaker grid's equivalent fix -
   see that file's comment for why: excluding the toggle button stops the browser anchoring to it on
   expand (good - fixes the forward jump), but also removes the compensation that made collapsing feel
   right, since nothing then corrects the viewport when the list shrinks out from under a scroll position
   deep inside it. Tried the identical exclusion here "for consistency" and it broke collapse for sessions
   the exact same way, confirmed live - this list's smaller realistic growth had been masking that this
   was never actually free. Left un-excluded: this list's anchor-to-button behavior on expand is apparently
   below whatever threshold makes the browser bother compensating (verified clean at 60 sessions), so it
   gets to keep the natural anchoring that makes collapse work without needing the JS fix speakers now
   has. Revisit only if a session list ever needs a cap large enough to reproduce the forward jump too. */
.sessions-list-wrap.is-capped[b-m5jqp0pq40],
.sessions-list-wrap.is-capped *[b-m5jqp0pq40] {
    overflow-anchor: none;
}

.sessions-list-wrap.is-capped[b-m5jqp0pq40] {
    overflow: hidden;
    max-height: 18rem;
    transition: max-height 200ms ease;
}

.sessions-list-wrap.is-capped[b-m5jqp0pq40]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6rem;
    background: linear-gradient(to bottom, transparent, var(--background));
    pointer-events: none;
    transition: opacity 150ms ease;
}

/* :has() rather than a ~ sibling selector, since the checkbox lives inside .sessions-more-indicator
   (see the markup comment in SessionsList.razor) - #sessions is the nearest ancestor shared with
   .sessions-list-wrap. Expanded max-height is a large fixed value, not `none` - see the matching comment
   in SpeakerList.razor.css for why: `max-height` can't interpolate to/from `none`, so expanding used to
   snap open in a single frame (no smooth frames for scroll-anchoring to track, causing the jump to the
   end of the section) while collapsing animated smoothly. 300rem comfortably exceeds any realistic
   session list's height. */
#sessions:has(.session-expand-toggle:checked) .sessions-list-wrap.is-capped[b-m5jqp0pq40] {
    max-height: 300rem;
}

#sessions:has(.session-expand-toggle:checked) .sessions-list-wrap.is-capped[b-m5jqp0pq40]::after {
    opacity: 0;
}

/* Checkbox-hack expand toggle - same technique SpeakerList.razor uses, but visually
   hidden via clip (not display:none) so it stays keyboard-focusable rather than removed from the tab
   order entirely. position: fixed (not absolute) - see the matching comment in SpeakerList.razor.css:
   pins the focused checkbox to a viewport-relative coordinate that never moves regardless of how much
   the expanding/collapsing content grows or shrinks, so a browser never needs to scroll it back into
   view. Applied here too for consistency, even though this list's smaller realistic height made the bug
   less visible than on the speaker grid. */
.session-expand-toggle[b-m5jqp0pq40] {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sessions-more-indicator[b-m5jqp0pq40] {
    position: relative;
    display: block;
    width: fit-content;
    margin: 1.25rem auto 0;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--primary-colour);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.sessions-more-indicator:hover[b-m5jqp0pq40] {
    border-color: var(--primary-colour);
    background-color: color-mix(in hsl, var(--primary-colour), transparent 90%);
}

.sessions-more-indicator:has(.session-expand-toggle:focus-visible)[b-m5jqp0pq40] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.expand-toggle-text-less[b-m5jqp0pq40] {
    display: none;
}

#sessions:has(.session-expand-toggle:checked) .expand-toggle-text-more[b-m5jqp0pq40] {
    display: none;
}

#sessions:has(.session-expand-toggle:checked) .expand-toggle-text-less[b-m5jqp0pq40] {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .session-row[b-m5jqp0pq40] {
        transition: none;
    }

    .sessions-list-wrap.is-capped[b-m5jqp0pq40],
    .sessions-list-wrap.is-capped[b-m5jqp0pq40]::after {
        transition: none;
    }
}
/* _content/Site/Components/ResuableComponents/SpeakerList.razor.rz.scp.css */
.speaker-container[b-k03go6iytx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 1rem 0;
}

.speaker-aside[b-k03go6iytx] {
    padding: 0;
    margin: 0;
}

.speaker-aside.single-speaker[b-k03go6iytx] { width: 180px; }
.speaker-aside.two-speakers[b-k03go6iytx] { width: 320px; }

.speaker-aside h2[b-k03go6iytx] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.speaker-aside .speaker-container[b-k03go6iytx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.speaker-aside.two-speakers .speaker-container[b-k03go6iytx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.speaker-aside .speaker[b-k03go6iytx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    padding: 0;
}

.speaker-aside .speaker img[b-k03go6iytx] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.speaker-aside.single-speaker .speaker img[b-k03go6iytx] {
    width: 160px;
    height: 160px;
}

.speaker-aside.two-speakers .speaker img[b-k03go6iytx] {
    width: 140px;
    height: 140px;
}

.speaker-aside .speaker h3[b-k03go6iytx],
.speaker-aside .speaker h4[b-k03go6iytx] {
    margin: 0;
    text-align: center;
}

.speaker-aside.single-speaker .speaker:first-child[b-k03go6iytx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.speaker-aside.single-speaker .speaker:first-child h3[b-k03go6iytx],
.speaker-aside.single-speaker .speaker:first-child h4[b-k03go6iytx] {
    text-align: center;
}

.speaker-container .speaker[b-k03go6iytx] {
    flex: 0 0 calc(20% - 1.2rem);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.speaker[b-k03go6iytx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid color-mix(in hsl, var(--primary-colour), transparent 80%);
    border-radius: 12px;
    background-color: var(--white);
    transition: border-color 150ms ease, background-color 150ms ease;
    box-shadow: 0 2px 8px color-mix(in hsl, var(--primary-shadow), transparent 90%);
    width: 100%;
    min-height: 180px;
}

.speaker:hover[b-k03go6iytx] {
    box-shadow: 0 8px 25px color-mix(in hsl, var(--primary-shadow), transparent 80%);
    border-color: var(--primary-colour);
}

.speaker span.tag-ms-mvp[b-k03go6iytx] {
    background-image: url("/img/tags/front-ms-mvp-small.png");
    width: 25px;
    height: 25px;
    position: relative;
    bottom: 35px;
    right: -25px;
}

.speaker img[b-k03go6iytx] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 2px solid color-mix(in hsl, var(--primary-colour), transparent 60%);
}

.speaker h3[b-k03go6iytx], .speaker h4[b-k03go6iytx] {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
    color: var(--primary-colour);
    line-height: 1.3;
}

@media (max-width: 1200px) {
    .speaker-container .speaker[b-k03go6iytx] {
        flex: 0 0 calc(25% - 1.125rem);
    }
}

@media (max-width: 900px) {
    .speaker-container .speaker[b-k03go6iytx] {
        flex: 0 0 calc(33.333% - 1rem);
    } 
}

@media (max-width: 600px) {
    .speaker-container .speaker[b-k03go6iytx] {
        flex: 0 0 calc(50% - 0.75rem);
    }

    .speaker[b-k03go6iytx] {
        padding: 0.75rem;
    }

    .speaker img[b-k03go6iytx] {
        width: 70px;
        height: 70px;
    }

    .speaker h3[b-k03go6iytx], .speaker h4[b-k03go6iytx] {
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    .speaker-container .speaker[b-k03go6iytx] {
        flex: 0 0 100%;
    }
}

.speaker-cards .speaker-container[b-k03go6iytx] {
    /* .page-section is full-bleed (no max-width), so a fixed column count would stretch each tile
       further on a wide monitor than intended. auto-fill against a fixed minimum instead keeps
       tile width roughly constant and adds columns, not giant tiles, as the viewport widens;
       fewer columns, same tile width, as it narrows. 380px picked by Stace over 260/320 in review. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.25rem;
}

/* auto-fill's 380px minimum can't fit inside a narrower mobile viewport - a single column pinned at
   380px overflows the container rather than shrinking. Below the sitewide 768px mobile breakpoint,
   force exactly 2 equal-width columns instead (fr units, no fixed minimum), so tiles shrink to fit
   any phone width rather than overflowing. Mobile should always show two columns, never one. */
@media (max-width: 768px) {
    .speaker-cards .speaker-container[b-k03go6iytx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.speaker-cards .speaker[b-k03go6iytx] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: unset;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0;
    background-color: var(--surface);
    box-shadow: none;
}

.speaker-cards .speaker:hover[b-k03go6iytx],
.speaker-cards .speaker:focus-visible[b-k03go6iytx] {
    border-color: var(--primary-colour);
    background-color: color-mix(in hsl, var(--primary-colour), transparent 90%);
    box-shadow: none;
}

/* aspect-ratio moved here from .speaker-cards .speaker (the tile itself) - see the is-capped/expanded
   comment further down for why: applying aspect-ratio directly to a CSS Grid item is what triggers a
   real Chromium row-auto-sizing bug at high row counts (confirmed with a live browser test, not just
   read from the spec). Putting it on the image instead means the grid's row height is driven by a plain
   `height: auto` box (the anchor), which doesn't hit that bug. Tile is no longer forced into a square -
   it's now a true-square photo plus its caption underneath, slightly taller than wide overall. */
.speaker-cards .speaker img[b-k03go6iytx] {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto; /* .speaker img (base rule) hardcodes height: 100px - must be cleared here, not
                     just left unset, or that fixed height wins the cascade over aspect-ratio */
    margin: 0;
    border: none;
    border-radius: 0;
    object-fit: cover;
    filter: saturate(0.4);
    transition: filter 150ms ease;
}

.speaker-cards .speaker:hover img[b-k03go6iytx],
.speaker-cards .speaker:focus-visible img[b-k03go6iytx] {
    filter: saturate(1);
}

.speaker-cards .speaker h3[b-k03go6iytx],
.speaker-cards .speaker h4[b-k03go6iytx] {
    text-align: center;
    color: var(--text);
    margin: 0.6rem 0.5rem 0;
}

.speaker-cards .speaker-session-count[b-k03go6iytx] {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin: 0.15rem 0.5rem 0.6rem;
}

/* Checkbox-hack expand toggle - same technique TopMenu.razor uses for its mobile menu, but visually
   hidden via clip (not display:none) so it stays keyboard-focusable rather than removed from the tab
   order entirely. position: fixed (not absolute) is deliberate: this checkbox sits right before a block
   whose height can grow by hundreds of rem on expand (a large speaker roster). With `absolute`, the
   focused checkbox's position is still tied to normal document flow (via its nearest positioned
   ancestor), so expanding pushed it far down the page - and browsers scroll a focused element back into
   view once layout changes push it out of the viewport, producing the "jumps to the end of the list"
   bug. `fixed` pins it to a viewport-relative coordinate that never moves regardless of how much
   surrounding content grows or shrinks, so it's always trivially "in view" and never needs correcting.
   It stays visually hidden either way (1x1px, clipped) - only its containing block changes. */
.speaker-expand-toggle[b-k03go6iytx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* overflow-anchor: none on the wrap alone only excludes that one element from being chosen as a scroll
   anchor - it does NOT inherit to descendants (the property isn't inherited), so an individual tile or
   image inside the grid was still a valid, moving anchor candidate as the grid expanded. The session list
   has no images and apparently never hit this; the speaker grid's tiles (each with an <img>) are the
   likely actual anchor being tracked. Excluding every descendant too, not just the wrap itself.
   Confirmed with a live Chromium test (Playwright) that this alone was NOT the actual cause of the
   scroll-jump-on-expand bug: the browser was anchoring to `.speaker-more-indicator` (the toggle button/
   label) instead, which sits as a SIBLING of .speaker-container-wrap, not a descendant - so it was never
   covered by this exclusion. That element's document position moves down by however much the grid above
   it grows, and scroll anchoring "helpfully" scrolls the whole page to keep it at the same viewport
   offset - which is exactly the multi-thousand-pixel jump Stace was seeing. Excluding it (and its
   children, same wildcard pattern) below resolves it - verified zero scroll delta on expand, was
   confirmed as the actual cause by excluding *only* this element and seeing the jump disappear entirely. */
.speaker-container-wrap[b-k03go6iytx],
.speaker-container-wrap *[b-k03go6iytx],
.speaker-more-indicator[b-k03go6iytx],
.speaker-more-indicator *[b-k03go6iytx] {
    overflow-anchor: none;
}

.speaker-container-wrap[b-k03go6iytx] {
    position: relative;
}

/* CSS-only cap, deliberately approximate: the grid's column count (and so each tile's rendered
   height, since tiles are aspect-ratio: 1/1) is fluid via auto-fill, so there's no way to express
   "exactly 2.5 rows" as an exact value here. 65rem is tuned against the ~380px minimum tile size
   plus two 1.25rem gaps (2.5 * ~400px + 2 * 20px =~ 1040px) - close at that size, not pixel-exact
   at every viewport width. See design.md for why an approximation was chosen over exact per-column
   math (which would need a fixed column count or JS to get right, both ruled out here).
   `transition: none` here, not the 200ms max-height transition - deliberately asymmetric with the
   :checked rule below, which keeps its own transition for a smooth expand. Collapsing instantly
   (rather than animating the shrink) turned out to be necessary, not just a style choice: while
   collapsing was animated, a visitor scrolled deep into a large expanded list would see the viewport
   glide through several intermediate scroll positions as the browser continuously re-clamped scrollY
   to the shrinking document across the transition's frames - not CSS scroll-anchoring (ruled out - the
   same glide persisted with anchoring disabled globally), just ordinary "can't scroll past the end of
   the page" clamping, made visible frame-by-frame by the animation's duration. Stace found that glide
   motion-sickness-inducing. Collapsing in a single frame turns that multi-step glide into a single
   instant jump instead - still needs the JS correction below for the *final* resting position (this
   alone doesn't fix which position it lands on), but removes the visible motion getting there. */
.speaker-container-wrap.is-capped[b-k03go6iytx] {
    overflow: hidden;
    max-height: 65rem;
    transition: none;
}

.speaker-container-wrap.is-capped[b-k03go6iytx]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8rem;
    background: linear-gradient(to bottom, transparent, var(--background));
    pointer-events: none;
    transition: opacity 150ms ease;
}

/* :has() rather than a ~ sibling selector, since the checkbox lives inside .speaker-more-indicator
   (see the markup comment) - #speakers is the nearest ancestor shared with .speaker-container-wrap.
   Expanded max-height is a large fixed value, not `none`: `max-height` can't interpolate to/from `none`
   in a CSS transition, so expanding used to snap open in a single frame while collapsing (none -> a
   concrete rem value) animated smoothly - that asymmetry was the actual cause of the scroll jumping to
   the end of the section on expand (no smooth frames for scroll-anchoring to track), while collapse felt
   fine (it already animated smoothly).
   300rem was clipping real rosters: at a realistic 2-4 column width a full-size speaker grid can run to
   hundreds of rem (design.md's own estimate), so 300rem (~4800px) was within reach of a normal-sized
   roster, not just a hypothetical huge one - visible as speakers still cut off after clicking "show all".
   9999rem (~160,000px) has the same non-`none` interpolation behaviour but leaves headroom no realistic
   roster (even at the forced 2-column mobile width) will approach.
   Confirmed with a real Chromium render (Playwright), not just CSS reasoning, that plain `overflow: hidden`
   is safe here at any realistic roster size (tested up to 90 mobile tiles) now that `.speaker-cards .speaker
   img` carries the aspect-ratio instead of the tile itself - see that rule's comment for why putting
   aspect-ratio on the grid item was the actual cause of a real under-measurement bug at high row counts,
   which no max-height value could have fixed on its own. */
#speakers:has(.speaker-expand-toggle:checked) .speaker-container-wrap.is-capped[b-k03go6iytx] {
    max-height: 9999rem;
    transition: max-height 200ms ease;
}

#speakers:has(.speaker-expand-toggle:checked) .speaker-container-wrap.is-capped[b-k03go6iytx]::after {
    opacity: 0;
}

.speaker-more-indicator[b-k03go6iytx] {
    position: relative;
    display: block;
    width: fit-content;
    margin: 1.25rem auto 0;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--primary-colour);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.speaker-more-indicator:hover[b-k03go6iytx] {
    border-color: var(--primary-colour);
    background-color: color-mix(in hsl, var(--primary-colour), transparent 90%);
}

.speaker-more-indicator:has(.speaker-expand-toggle:focus-visible)[b-k03go6iytx] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.expand-toggle-text-less[b-k03go6iytx] {
    display: none;
}

#speakers:has(.speaker-expand-toggle:checked) .expand-toggle-text-more[b-k03go6iytx] {
    display: none;
}

#speakers:has(.speaker-expand-toggle:checked) .expand-toggle-text-less[b-k03go6iytx] {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .speaker-container-wrap.is-capped[b-k03go6iytx],
    .speaker-container-wrap.is-capped[b-k03go6iytx]::after {
        transition: none;
    }
}

/* _content/Site/Components/ResuableComponents/Sponsors.razor.rz.scp.css */
/* Corrected: a full-width border-top is the exact same device .page-section + .page-section uses to
   separate whole PAGE sections from each other - applied here, one level down, it made each tier read
   as its own separate section from the sponsor intro text above it, not a sub-group within one section.
   Replaced with a short, centered hairline under each tier's own heading instead - the same device
   .page-section h2::after already uses under the main "Sponsors" heading, just reused at the tier level
   rather than inventing a new, section-implying pattern. */
.sponsor-group[b-4cv2hgig2u] {
    margin-top: 2.5rem;
}

.sponsor-group:first-of-type[b-4cv2hgig2u] {
    margin-top: 2rem;
}

.sponsor-group h3[b-4cv2hgig2u] {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* var(--text), not --primary-colour: magenta text fails AAA contrast against the dark theme's
       near-black background (see docs/adrs/0002-professional-redesign-visual-system.md) - the same
       reason .page-section h2 already uses --text rather than the brand colour directly. Tier identity
       is carried by the tile borders (sponsor-tier-1/2/3), not by colouring this heading. */
    color: var(--text);
}

.sponsor-group h3[b-4cv2hgig2u]::after {
    content: "";
    display: block;
    width: var(--hairline-width);
    height: var(--hairline-thickness);
    background: var(--primary-colour);
    opacity: var(--hairline-opacity);
    margin: 0.5rem auto 1rem;
}

.sponsor-container[b-4cv2hgig2u] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 0 0;
}

.sponsor-container a[b-4cv2hgig2u] {
    flex: 0 0 calc(33.333% - 1.33rem);
    max-width: 300px;
    text-decoration: none;
    color: inherit;
}

.sponsor[b-4cv2hgig2u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background-color: var(--surface);
    transition: border-color 150ms ease, background-color 150ms ease;
    box-shadow: none;
    width: 100%;
    min-height: 150px;
}

.sponsor:hover[b-4cv2hgig2u] {
    border-color: var(--primary-colour);
    background-color: color-mix(in hsl, var(--primary-colour), transparent 90%);
}

.sponsor-tier-1 .sponsor[b-4cv2hgig2u] {
    border-color: var(--primary-colour);
}

.sponsors-has-tier-3 .sponsor-tier-2 .sponsor[b-4cv2hgig2u] {
    border-color:  color-mix(in hsl, var(--primary-light), white 25%);
}

.sponsor-tier-3 .sponsor[b-4cv2hgig2u] {
    border-color: color-mix(in hsl, var(--primary-colour), white 65%);
}

@media (prefers-color-scheme: dark) {
    .sponsor-tier-3 .sponsor[b-4cv2hgig2u] {
        border-color: color-mix(in hsl, var(--text), black 55%);
    }
}

.sponsor picture[b-4cv2hgig2u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sponsor img[b-4cv2hgig2u] {
    max-width: 120px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Tier sizing - based on sponsor group index among non-empty groups. Scoped to min-width: 901px
   (desktop only, per design.md) rather than relying on source order/specificity to lose to the
   900px/600px mobile breakpoints below - a plain class selector like `.sponsor-tier-1 .sponsor-container a`
   is MORE specific than `.sponsor-container a` inside a @media block, so without this scoping the tier
   rules would keep winning at every viewport width regardless of which media query comes later in the
   file, and mobile would never actually collapse to uniform sizing. */
@media (min-width: 901px) {
    .sponsor-tier-1 .sponsor-container a[b-4cv2hgig2u] {
        flex-basis: calc(33.333% - 1.33rem);
        max-width: 320px;
    }

    .sponsor-tier-1 .sponsor img[b-4cv2hgig2u] {
        max-width: 220px;
        max-height: 100px;
    }

    .sponsor-tier-2 .sponsor-container a[b-4cv2hgig2u] {
        flex-basis: calc(25% - 1rem);
        max-width: 260px;
    }

    .sponsor-tier-2 .sponsor img[b-4cv2hgig2u] {
        max-width: 180px;
        max-height: 80px;
    }

    .sponsor-tier-3 .sponsor-container a[b-4cv2hgig2u] {
        flex-basis: calc(20% - 1rem);
        max-width: 200px;
    }

    .sponsor-tier-3 .sponsor img[b-4cv2hgig2u] {
        max-width: 140px;
        max-height: 64px;
    }
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .sponsor-container a[b-4cv2hgig2u] {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media (max-width: 600px) {
    .sponsor-container a[b-4cv2hgig2u] {
        flex: 0 0 100%;
        max-width: 250px;
    }

    .sponsor[b-4cv2hgig2u] {
        padding: 1rem;
        min-height: 120px;
    }

    .sponsor img[b-4cv2hgig2u] {
        max-width: 100px;
        max-height: 9rem;
    }
}