/* ==========================================================================
   /homepage-updated — sections rebuilt from Figma node 11932:58753.

   Every selector is scoped to .hu-* so nothing here can reach the rest of the
   page, which still carries the original homepage's large inline <style>
   blocks. Component rules repeat the section class where they need to outrank
   those globals — the same lesson the footer taught.
   ========================================================================== */

/* Tokens must be declared on every section root, not just the first two: a
   section that uses var(--hu-teal) without inheriting it renders the fallback
   (transparent rules, un-tinted numbers) with no error anywhere. */
.hu-hero,
.hu-section,
.hu-explore,
.hu-stats,
.hu-journey {
    --hu-ink: #232e33;
    --hu-heading: #f3f5f5;
    --hu-muted: #bcbfc1;
    --hu-body: #515b60;
    --hu-teal: #00acc1;
    --hu-font: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
    --hu-font-action: 'Nunito Sans', 'Nunito Sans Fallback', Arial, sans-serif;
    --hu-inset: 144px;
}

.hu-hero *,
.hu-section * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hu-hero {
    position: relative;
    height: 400px;
    overflow: hidden;
    font-family: var(--hu-font);
}

.hu-hero .hu-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Figma applies a 4px foreground blur, which renders as a 2px CSS blur. */
    filter: blur(2px);
}

/* The tint is a multiply layer over the photo, not a flat overlay, so the
   image keeps its texture instead of being washed out. */
.hu-hero .hu-hero__tint {
    position: absolute;
    inset: 0;
    background: #1f4353;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* The hero copy is inset to match the current homepage rather than the 144px
   the rest of this page uses: that hero sits in a 1170px centred container with
   24px of padding, so the text lands at the same place on both pages. */
.hu-hero .hu-hero__wrapper {
    position: absolute;
    top: 50%;
    left: max(24px, calc((100% - 1170px) / 2 + 24px));
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 567px;
    max-width: calc(100% - 48px);
    transform: translateY(-50%);
}

.hu-hero .hu-hero__eyebrow {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: var(--hu-muted);
}

.hu-hero .hu-hero__title {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: var(--hu-heading);
}

.hu-hero .hu-hero__cta {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 4px;
    background: #fff;
    font-family: var(--hu-font-action);
    font-size: 14px;
    color: var(--hu-ink);
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: 0.28px;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.hu-hero .hu-hero__cta:hover,
.hu-hero .hu-hero__cta:focus-visible {
    background: #e9ebeb;
}

.hu-hero .hu-hero__cta:focus-visible {
    outline: 2px solid var(--hu-teal);
    outline-offset: 2px;
}

@media (max-width: 1199px) {
    .hu-hero,
    .hu-section {
        --hu-inset: 44px;
    }
}

@media (max-width: 767px) {
    .hu-hero,
    .hu-section {
        --hu-inset: 16px;
    }

    .hu-hero {
        height: auto;
        min-height: 320px;
        padding: 48px 0;
    }

    .hu-hero .hu-hero__wrapper {
        position: static;
        width: 100%;
        max-width: none;
        padding: 0 var(--hu-inset);
        transform: none;
    }

    .hu-hero .hu-hero__title {
        font-size: 20px;
    }
}

/* --------------------------------------------------------------------------
   Two-column section: copy on the left, 640x360 video on the right.
   Used by "Discover the Integrated..." and "Beyond Awards".
   -------------------------------------------------------------------------- */

/* Figma draws these two video sections ending at 1322 while every other section
   ends at 1222, because they use a 44px right padding instead of the centred
   1078 content column. Aligned to 1222 here so the page has one right edge. */
.hu-section {
    display: flex;
    gap: 44px;
    align-items: center;
    width: 1078px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 24px 0;
    font-family: var(--hu-font);
}

.hu-section .hu-section__copy {
    display: flex;
    flex: 0 0 494px;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    min-width: 0;
}

.hu-section .hu-section__title {
    width: 480px;
    max-width: 100%;
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #263238;
}

.hu-section .hu-section__list {
    margin: 0;
    padding-left: 21px;
    list-style: disc;
    font-size: 14px;
    line-height: normal;
    color: #6e767a;
}

.hu-section .hu-section__list li {
    margin: 0;
}

.hu-section .hu-section__cta {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 0.5px solid #bcbfc1;
    background: none;
    font-family: var(--hu-font-action);
    font-size: 14px;
    color: var(--hu-ink);
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: 0.28px;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.hu-section .hu-section__cta:hover,
.hu-section .hu-section__cta:focus-visible {
    background: #263238;
    color: #f3f5f5;
}

.hu-section .hu-section__cta:focus-visible {
    outline: 2px solid var(--hu-teal);
    outline-offset: 2px;
}

/* 640x360 is the design's frame; the ratio is what survives narrower screens. */
.hu-section .hu-section__media {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #dfdfdf;
}

.hu-section .hu-section__media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 1199px) {
    .hu-section .hu-section__copy {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .hu-section {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .hu-section .hu-section__title {
        font-size: 20px;
    }
}

/* --------------------------------------------------------------------------
   "Explore your assessment needs" — Figma 11932:58771
   -------------------------------------------------------------------------- */

.hu-explore {
    padding: 24px 0;
    font-family: var(--hu-font);
}

.hu-explore *{ box-sizing: border-box; }

.hu-explore .hu-explore__head {
    width: 500px;
    max-width: calc(100% - 32px);
    margin: 0 auto 24px;
    text-align: center;
}

.hu-explore .hu-explore__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #263238;
}

.hu-explore .hu-explore__subtitle {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: normal;
    color: #6e767a;
}

.hu-explore .hu-explore__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 1078px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
}

/* Card: dark panel, logo left, copy right. Figma 11932:58777. */
.hu-explore .hu-card {
    display: flex;
    gap: 16px;
    align-items: center;
    min-height: 194px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid #515b60;
    border-radius: 4px;
    background: #232e33;
}

.hu-explore .hu-card__logo {
    flex: 0 0 auto;
    width: 200px;
    height: 64px;
    object-fit: contain;
}

.hu-explore .hu-card__body {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    min-width: 0;
}

.hu-explore .hu-card__badge {
    align-self: flex-end;
    padding: 2px 4px;
    background: #005f6a;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    color: #fff;
    white-space: nowrap;
}

.hu-explore .hu-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: #f3f5f5;
}

.hu-explore .hu-card__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #bcbfc1;
}

.hu-explore .hu-card__cta {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 8px 4px 8px 12px;
    border: 0.5px solid #6e767a;
    font-family: var(--hu-font-action);
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: 0.28px;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.hu-explore .hu-card__cta:hover,
.hu-explore .hu-card__cta:focus-visible { background: #2f3b41; }

.hu-explore .hu-card__cta:focus-visible {
    outline: 2px solid var(--hu-teal);
    outline-offset: 2px;
}

.hu-explore .hu-card__cta svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.hu-explore .hu-explore__note {
    width: 1078px;
    max-width: calc(100% - 32px);
    margin: 24px auto 0;
    font-size: 14px;
    line-height: normal;
    color: #6e767a;
    text-align: center;
}

@media (max-width: 991px) {
    .hu-explore .hu-explore__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    /* The 200px logo and the copy cannot share a 343px row legibly. */
    .hu-explore .hu-card { flex-direction: column; align-items: flex-start; }
    .hu-explore .hu-card__logo { width: 160px; }
    .hu-explore .hu-explore__title { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   Stats band — Figma 11932:58782. Four figures on a dark teal field.
   -------------------------------------------------------------------------- */

.hu-stats {
    padding: 44px 0;
    background: #024d59;
    font-family: var(--hu-font);
}

.hu-stats * { box-sizing: border-box; }

.hu-stats .hu-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    width: 1078px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
}

.hu-stats .hu-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

/* Was a blank white disc until the real artwork was found in assets/other. */
.hu-stats .hu-stat__mark {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.hu-stats .hu-stat__figure {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #fff;
}

.hu-stats .hu-stat__text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #f3f5f5;
}

@media (max-width: 991px) {
    .hu-stats .hu-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}

@media (max-width: 575px) {
    .hu-stats .hu-stats__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   "Our Learning Journey" — Figma 11932:58800. Dark field, three white cards.
   Header follows the same eyebrow + title + teal rule pattern as the insights
   section, so the two read as one family.
   -------------------------------------------------------------------------- */

.hu-journey {
    padding: 32px 0 44px;
    background: #151c1f;
    font-family: var(--hu-font);
}

.hu-journey * { box-sizing: border-box; }

.hu-journey .hu-journey__shell {
    width: 1078px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
}

.hu-journey .hu-journey__eyebrow {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: normal;
    color: #bcbfc1;
}

.hu-journey .hu-journey__heading {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
}

.hu-journey .hu-journey__heading h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #f3f5f5;
    white-space: nowrap;
}

.hu-journey .hu-journey__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--hu-teal);
}

.hu-journey .hu-journey__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.hu-journey .hu-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    border-radius: 8px;
    background: #fff;
}

.hu-journey .hu-step__number {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    color: var(--hu-teal);
}

.hu-journey .hu-step__title {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: #232e33;
}

.hu-journey .hu-step__list {
    flex: 1 1 auto;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
    color: #515b60;
}

.hu-journey .hu-step__list li + li { margin-top: 8px; }
.hu-journey .hu-step__list strong { color: #232e33; font-weight: 600; }

.hu-journey .hu-step__cta {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: 4px;
    background: #232e33;
    font-family: var(--hu-font-action);
    font-size: 14px;
    color: #f3f5f5;
    text-decoration: none;
    letter-spacing: 0.28px;
    transition: background-color .2s ease;
}

.hu-journey .hu-step__cta:hover,
.hu-journey .hu-step__cta:focus-visible { background: #0d1416; }

.hu-journey .hu-step__cta:focus-visible {
    outline: 2px solid var(--hu-teal);
    outline-offset: 2px;
}

.hu-journey .hu-step__cta svg { width: 16px; height: 16px; fill: currentColor; }

.hu-journey .hu-journey__more {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    font-family: var(--hu-font-action);
    font-size: 14px;
    color: #f3f5f5;
    text-decoration: underline;
    letter-spacing: 0.28px;
}

.hu-journey .hu-journey__more svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 991px) {
    .hu-journey .hu-journey__grid { grid-template-columns: minmax(0, 1fr); }
    .hu-journey .hu-journey__heading h2 { white-space: normal; }
}

/* --------------------------------------------------------------------------
   "Become Part of the Ambassadors Networks" — Figma 11932:58812.
   Two alternating rows; each is a light panel with copy on one side and an
   image on the other, offset so the panels stagger rather than align.
   -------------------------------------------------------------------------- */

.hu-networks {
    padding: 44px 0;
    font-family: var(--hu-font);
}

.hu-networks * { box-sizing: border-box; }

.hu-networks .hu-networks__head {
    width: 640px;
    max-width: calc(100% - 32px);
    margin: 0 auto 32px;
    text-align: center;
}

.hu-networks .hu-networks__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #263238;
}

.hu-networks .hu-networks__subtitle {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: normal;
    color: #6e767a;
}

/* Both rows sit in the same 1078px column as the rest of the page — the photo
   simply swaps sides between them. The copy/photo split keeps the proportion the
   design draws (683:539), rescaled to this narrower column. */
.hu-networks .hu-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 476px;
    align-items: stretch;
    width: 1078px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    min-height: 268px;
    background: #fafafa;
}

.hu-networks .hu-row + .hu-row {
    grid-template-columns: 476px minmax(0, 1fr);
    margin-top: 24px;
}

.hu-networks .hu-row + .hu-row .hu-row__copy { order: 2; }
.hu-networks .hu-row + .hu-row .hu-row__media { order: 1; }

/* The copy column grows with the viewport because its row bleeds to the screen
   edge. Capping it at the width the design gives it at 1366 and pushing row 1's
   toward the image keeps both rows reading the same way: text beside the photo,
   not stranded against the edge of the screen. At 1366 the cap is exactly the
   column width, so the design is reproduced unchanged. */
/* The copy column grows with the viewport because its row bleeds to the screen
   edge, which would strand the text against the edge while the photo sits far
   away. The padding on the bleeding side absorbs that growth so the text keeps
   its 639px measure right next to the photo, the same way both rows read at
   1366. max() resolves to the design's plain 44px at 1366, so the macheta is
   reproduced unchanged there. Padding rather than an auto margin: an auto
   margin on a grid item makes it shrink to its content and shifts the text. */
.hu-networks .hu-row__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 44px;
}

.hu-networks .hu-row__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #263238;
}

.hu-networks .hu-row__subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    color: #232e33;
}

.hu-networks .hu-row__list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
    color: #6e767a;
}

.hu-networks .hu-row__media {
    min-height: 220px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #bcbfc1;
}

@media (max-width: 991px) {
    .hu-networks .hu-row,
    .hu-networks .hu-row + .hu-row {
        grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Image first on narrow screens, whichever side it sat on. */
    .hu-networks .hu-row__media { order: 1; min-height: 200px; }
    .hu-networks .hu-row__copy { order: 2; padding: 24px; }
    .hu-networks .hu-row + .hu-row { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   Teal strip — Figma 11932:58818. One line of copy, one link, full bleed.
   -------------------------------------------------------------------------- */

.hu-strip {
    padding: 24px 0;
    background: #007b8a;
    font-family: var(--hu-font);
}

.hu-strip * { box-sizing: border-box; }

.hu-strip .hu-strip__inner {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    width: 1078px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
}

.hu-strip .hu-strip__title {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #fff;
}

.hu-strip .hu-strip__cta {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex: 0 0 auto;
    font-family: var(--hu-font-action);
    font-size: 14px;
    color: #fff;
    text-decoration: underline;
    letter-spacing: 0.28px;
    white-space: nowrap;
}

.hu-strip .hu-strip__cta svg { width: 16px; height: 16px; fill: currentColor; }

.hu-strip .hu-strip__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .hu-strip .hu-strip__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hu-strip .hu-strip__title { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   "What Our Clients Say" — Figma 11932:58833. Logo grid with the selected
   client's testimonial expanding beneath its row.
   -------------------------------------------------------------------------- */

.hu-clients {
    padding: 44px 0;
    font-family: var(--hu-font);
}

.hu-clients * { box-sizing: border-box; }

.hu-clients .hu-clients__head {
    width: 640px;
    max-width: calc(100% - 32px);
    margin: 0 auto 24px;
    text-align: center;
}

.hu-clients .hu-clients__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #263238;
}

.hu-clients .hu-clients__subtitle {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: normal;
    color: #6e767a;
}

.hu-clients .hu-clients__shell {
    width: 1024px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
}

.hu-clients .hu-clients__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
}

/* The tile — not the image — owns the height. Case-study covers vary in shape
   and an image that fails to load would otherwise size itself to its alt text
   and drag the whole grid out of shape. */
.hu-clients .hu-client {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #f3f5f5;
    cursor: pointer;
}

.hu-clients .hu-client.is-active {
    border-color: #e5e9ec;
}

.hu-clients .hu-client img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Unselected tiles read as muted; the active one comes forward. */
    filter: grayscale(1);
    opacity: .65;
    transition: filter .2s ease, opacity .2s ease;
}

.hu-clients .hu-client.is-active img,
.hu-clients .hu-client:hover img {
    filter: none;
    opacity: 1;
}

.hu-clients .hu-client:focus-visible {
    outline: 2px solid var(--hu-teal);
    outline-offset: -2px;
}

.hu-clients .hu-quote {
    padding: 24px;
    border: 1px solid #e5e9ec;
}

.hu-clients .hu-quote__title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #263238;
}

.hu-clients .hu-quote__text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #6e767a;
}

.hu-clients .hu-quote__cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 0.5px solid #bcbfc1;
    font-family: var(--hu-font-action);
    font-size: 14px;
    color: var(--hu-ink);
    text-decoration: none;
    letter-spacing: 0.28px;
}

.hu-clients .hu-quote__cta:hover,
.hu-clients .hu-quote__cta:focus-visible { background: #263238; color: #f3f5f5; }

@media (max-width: 767px) {
    .hu-clients .hu-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hu-clients .hu-clients__title { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   "Honoring Excellence in Every Frame" — Figma 11932:58827.
   One large frame flanked by faded neighbours, with a thumbnail strip below.
   -------------------------------------------------------------------------- */

.hu-gallery {
    padding: 44px 0;
    background: #fafafa;
    font-family: var(--hu-font);
    overflow: hidden;
}

.hu-gallery * { box-sizing: border-box; }

.hu-gallery .hu-gallery__head {
    width: 640px;
    max-width: calc(100% - 32px);
    margin: 0 auto 24px;
    text-align: center;
}

.hu-gallery .hu-gallery__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #263238;
}

.hu-gallery .hu-gallery__subtitle {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: normal;
    color: #6e767a;
}

.hu-gallery .hu-gallery__stage {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.hu-gallery .hu-gallery__side,
.hu-gallery .hu-gallery__main {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
}

/* Neighbours are pushed back so the centre frame carries the eye. */
.hu-gallery .hu-gallery__side {
    cursor: pointer;
    flex: 0 0 auto;
    width: 190px;
    height: 210px;
    opacity: .45;
}

.hu-gallery .hu-gallery__main {
    flex: 0 0 auto;
    width: 700px;
    max-width: calc(100% - 32px);
    aspect-ratio: 700 / 440;
}

.hu-gallery .hu-gallery__thumbs {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 1024px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.hu-gallery .hu-gallery__thumbs::-webkit-scrollbar { display: none; }

.hu-gallery .hu-thumb {
    flex: 0 0 auto;
    width: 74px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s ease, border-color .2s ease;
}

.hu-gallery .hu-thumb.is-active,
.hu-gallery .hu-thumb:hover { opacity: 1; }
.hu-gallery .hu-thumb.is-active { border-color: var(--hu-teal); }

.hu-gallery .hu-gallery__side:focus-visible {
    outline: 2px solid var(--hu-teal);
    outline-offset: 2px;
}

.hu-gallery .hu-thumb:focus-visible {
    outline: 2px solid var(--hu-teal);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    /* The flanking frames stop earning their space once the centre shrinks. */
    .hu-gallery .hu-gallery__side { display: none; }
}

@media (max-width: 767px) {
    .hu-gallery .hu-gallery__title { font-size: 20px; }
}