:root {
    --navbar-colour: #0b2852;
    --button-colour: #f2a51a;
    --hover-colour: #e67717;
    --text-colour: #f7f5f0;
    --muted-text: #d9e6f2;
    --background-colour: #061a33;
    --green-light: #638d16;
    --green-dark: #244f24;
}

/* Halloween Virtual Ride participant portal */
.virtual-ride-page {
    min-height: 70vh;
    padding: 72px max(24px, calc((100vw - 1320px) / 2));
    color: #f7f1e7;
    background:
        radial-gradient(circle at 8% 12%, rgb(245 166 35 / 18%), transparent 28rem),
        radial-gradient(circle at 92% 86%, rgb(56 142 60 / 18%), transparent 30rem),
        #061b31;
}

.virtual-ride-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
    gap: clamp(32px, 6vw, 90px);
    align-items: center;
}

.virtual-ride-hero h1,
.virtual-ride-form-shell h1,
.virtual-ride-thanks h1 {
    max-width: 820px;
    margin: 12px 0 22px;
    font-size: clamp(46px, 6vw, 84px);
    line-height: .98;
}

.virtual-ride-hero > div > p:not(.section-label) { max-width: 700px; font-size: clamp(18px, 2vw, 24px); }

.virtual-ride-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.virtual-ride-steps span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    background: rgb(255 255 255 / 7%);
}

.virtual-ride-steps strong {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    color: #061b31;
    border-radius: 50%;
    background: #f5a623;
}

.virtual-ride-login,
.virtual-ride-form-shell,
.virtual-ride-thanks {
    border: 1px solid rgb(121 163 111 / 55%);
    border-radius: 28px;
    background: #0e315d;
    box-shadow: 0 28px 80px rgb(0 0 0 / 25%);
}

.virtual-ride-login { padding: clamp(28px, 5vw, 52px); }
.virtual-ride-login h2 { margin: 8px 0 12px; font-size: clamp(30px, 4vw, 48px); }
.virtual-ride-login form { display: grid; gap: 8px; margin: 28px 0 20px; }
.virtual-ride-login label,
.virtual-ride-form label,
.virtual-ride-form legend { margin-top: 10px; font-weight: 800; }
.virtual-ride-login input,
.virtual-ride-form input,
.virtual-ride-form textarea {
    width: 100%;
    padding: 14px 16px;
    color: #071836;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    font: inherit;
}
.virtual-ride-login input:focus,
.virtual-ride-form input:focus,
.virtual-ride-form textarea:focus { border-color: #f5a623; outline: 3px solid rgb(245 166 35 / 22%); }
.virtual-ride-login .event-button { width: 100%; margin-top: 15px; }

.virtual-ride-form-shell { max-width: 980px; margin-inline: auto; overflow: hidden; }
.virtual-ride-form-shell > header { padding: clamp(30px, 6vw, 68px); background: linear-gradient(135deg, #0e315d, #174b72); }
.virtual-ride-form-shell h1 { font-size: clamp(42px, 6vw, 72px); }
.virtual-ride-form { display: grid; gap: 12px; padding: clamp(30px, 6vw, 68px); }
.virtual-ride-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.virtual-ride-fields > div { display: grid; gap: 8px; }
.virtual-ride-distance-input { position: relative; }
.virtual-ride-distance-input input { padding-right: 62px; }
.virtual-ride-distance-input span { position: absolute; top: 50%; right: 18px; color: #36506b; font-weight: 900; transform: translateY(-50%); }
.virtual-ride-form fieldset { margin: 6px 0; padding: 0; border: 0; }
.virtual-ride-time { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 460px; }
.virtual-ride-time label { display: grid; gap: 8px; }
.virtual-ride-upload { margin: 14px 0; padding: 22px; border: 2px dashed rgb(245 166 35 / 70%); border-radius: 16px; background: rgb(255 255 255 / 5%); }
.virtual-ride-upload p { margin: 6px 0 14px; color: #d8e2ed; }
.virtual-ride-upload input { color: #fff; background: transparent; }
.virtual-ride-confirm { display: flex; gap: 12px; align-items: flex-start; }
.virtual-ride-confirm input { width: 20px; height: 20px; flex: 0 0 auto; }
.virtual-ride-form > .event-button { margin-top: 18px; }
.virtual-ride-form span[data-valmsg-for],
.virtual-ride-login span[data-valmsg-for] { color: #ffc5b9; }

.virtual-ride-thanks { max-width: 980px; margin-inline: auto; padding: clamp(36px, 7vw, 82px); text-align: center; }
.virtual-ride-check { display: grid; width: 76px; height: 76px; margin: 0 auto 24px; place-items: center; color: #061b31; border-radius: 50%; background: #f5a623; font-size: 42px; font-weight: 900; }
.virtual-ride-thanks h1 { margin-inline: auto; font-size: clamp(40px, 6vw, 68px); }
.virtual-ride-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 32px 0; }
.virtual-ride-result > div { padding: 24px 16px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 16px; background: rgb(255 255 255 / 7%); }
.virtual-ride-result span { display: block; margin-bottom: 6px; color: #c8d7e7; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.virtual-ride-result strong { font-size: clamp(20px, 3vw, 30px); }
.virtual-ride-thanks .event-detail-actions { justify-content: center; }
.virtual-ride-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.virtual-ride-evidence-grid a { overflow: hidden; border-radius: 16px; background: #071836; }
.virtual-ride-evidence-grid img { display: block; width: 100%; height: 460px; object-fit: contain; }
.virtual-ride-admin-notes { padding: 20px; border-left: 4px solid #f5a623; background: rgb(255 255 255 / 6%); white-space: pre-wrap; }

.virtual-ride-activity-picker > div {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.virtual-ride-activity-picker label {
    display: grid;
    gap: 7px;
    min-height: 112px;
    padding: 14px 8px;
    place-items: center;
    border: 2px solid rgb(255 255 255 / 16%);
    border-radius: 14px;
    background: rgb(255 255 255 / 6%);
    cursor: pointer;
}

.virtual-ride-activity-picker label:has(input:checked) {
    color: #071836;
    border-color: #f5a623;
    background: #f5a623;
}

.virtual-ride-activity-picker input { width: 18px; height: 18px; padding: 0; }
.virtual-ride-activity-picker label span { font-size: 27px; }
.event-detail-actions > .event-payment-form--donation {
    display: grid;
    grid-template-columns: minmax(155px, .75fr) minmax(230px, 1.2fr) auto;
    gap: 18px;
    width: 100%;
    padding: 20px;
    align-items: end;
    flex: 1 0 100%;
    border: 1px solid rgb(255 208 131 / 38%);
    border-radius: 18px;
    background: rgb(14 49 93 / 72%);
}

.event-payment-summary { display: grid; align-content: center; }
.event-payment-summary > span,
.event-extra-donation > span:first-child { color: #ffd083; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.event-payment-summary strong { margin-block: 2px; color: #fff; font-size: 32px; line-height: 1; }
.event-payment-summary small { color: var(--muted-text); line-height: 1.35; }
.event-extra-donation { display: grid; gap: 8px; margin: 0; }
.event-extra-donation-input { display: flex; min-width: 0; align-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 28%); border-radius: 10px; background: #fff; }
.event-extra-donation-input b { padding-left: 14px; color: #071836; font-weight: 900; }
.event-payment-form--donation .event-extra-donation-input input { width: 100%; min-width: 0; padding: 12px 14px 12px 6px; color: #071836; border: 0; outline: 0; background: transparent; font: inherit; }
.event-payment-form--donation .event-extra-donation-input:focus-within { border-color: #f5a623; box-shadow: 0 0 0 3px rgb(245 166 35 / 22%); }
.event-detail-actions .event-payment-form--donation .event-button { width: auto; min-width: 190px; min-height: 50px; align-self: end; }
.event-secondary-actions { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 14px 28px; align-items: center; }

@media (max-width: 820px) {
    .virtual-ride-page { padding-block: 42px; }
    .virtual-ride-hero { grid-template-columns: 1fr; }
    .virtual-ride-fields,
    .virtual-ride-result { grid-template-columns: 1fr; }
    .virtual-ride-evidence-grid { grid-template-columns: 1fr; }
    .virtual-ride-evidence-grid img { height: auto; max-height: 620px; }
    .virtual-ride-activity-picker > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-detail-actions > .event-payment-form--donation { grid-template-columns: 1fr; align-items: stretch; }
    .event-detail-actions .event-payment-form--donation .event-button { width: 100%; }
    .event-secondary-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 520px) {
    .virtual-ride-time { grid-template-columns: 1fr 1fr; }
    .virtual-ride-login,
    .virtual-ride-form-shell,
    .virtual-ride-thanks { border-radius: 20px; }
}

/* Shared donation and shop checkout */
.checkout-page {
    padding: 190px 24px 80px;
    min-height: 75vh;
    background: var(--background-colour);
    color: var(--text-colour);
    font-family: "Montserrat", sans-serif;
}
.checkout-contained {
    width: min(1150px, 100%);
    margin-inline: auto;
}
.checkout-page h1 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    margin-bottom: 24px;
}
.checkout-page h2 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 24px;
}
.checkout-page p {
    color: var(--muted-text);
    line-height: 1.8;
}
.checkout-page a {
    color: #ffd083;
    text-underline-offset: 4px;
}
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 35px;
}
.checkout-panel {
    padding: 32px;
    background: #0b2852;
    border: 1px solid #466078;
    border-radius: 20px;
}
.checkout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.checkout-wide {
    grid-column: 1 / -1;
}
.checkout-fields label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.checkout-fields input {
    width: 100%;
    border: 1px solid #90a0b0;
    border-radius: 8px;
    padding: 12px;
    color: #061a33;
    background: #fff;
    min-height: 46px;
}
.checkout-error {
    color: #ffcfbf;
    line-height: 1.7;
}
.checkout-error.validation-summary-valid {
    display: none;
}
.checkout-notice {
    padding: 18px;
    background: #153e4a;
    border-left: 3px solid #ffd083;
}
.checkout-line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-block: 18px;
    border-bottom: 1px solid #466078;
}
.checkout-line strong {
    white-space: nowrap;
}
.checkout-total {
    font-size: 21px;
    color: #ffd083;
    margin-bottom: 24px;
}
.checkout-small {
    font-size: 13px;
    margin-top: 20px;
    line-height: 1.7;
}
.checkout-reference {
    overflow-wrap: anywhere;
    margin-top: 30px;
}
.checkout-page .donation-button {
  margin: 24px 0 0;
}
.checkout-page button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.checkout-page a:focus-visible, .checkout-fields input:focus-visible, .cart-item button:focus-visible {
    outline: 3px solid #ffd083;
    outline-offset: 3px;
}
.cart-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-block: 24px;
    border-bottom: 1px solid #466078;
}
.cart-item > div {
    flex: 1 1 180px;
}
.cart-item h2 {
    font-size: 22px;
}
.cart-item input {
    width: 65px;
    padding: 8px;
}
.cart-item button {
    padding: 9px 12px;
    border: 1px solid #ffd083;
    border-radius: 8px;
    background: #061a33;
    color: #ffd083;
}
@media (max-width: 800px) {
    .checkout-page {
        padding: 135px 20px 60px;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        order: -1;
    }

    .checkout-panel {
        padding: 24px;
    }
}
@media (max-width: 500px) {
    .checkout-fields {
        grid-template-columns: 1fr;
    }
}

/* Newsletter reading section and archive */
.newsletter-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr)minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(35px, 6vw, 90px);
    padding: 80px max(24px, 8%);
    background: linear-gradient(120deg, #143c36, #0a2545);
    color: var(--text-colour);
    font-family: "Montserrat", sans-serif;
    scroll-margin-top: 170px;
}
.newsletter-feature h2 {
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}
.newsletter-feature p, 
.newsletter-reading-page p {
    color: var(--muted-text);
    line-height: 1.8;
}
.newsletter-feature.section-label, 
.newsletter-reading-page.section-label {
    color: #ffd083;
}
.newsletter-latest {
    padding: 35px;
    border: 1px solid #58715d;
    border-radius: 22px;
    background: #0b2852;
}
.newsletter-latest > img {
    display: block;
    object-fit: contain;
    margin-bottom: 22px;
}
.newsletter-feature h3, 
.newsletter-reading-page h3 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 18px;
}
.newsletter-reading-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    color: #ffd083;
    font-weight: 700;
    text-underline-offset: 5px;
}
.newsletter-reading-link:hover {
    color: #fff1a8;
}
.newsletter-reading-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 44px;
    padding: 13px 20px;
    border-radius: 10px;
    background: var(--button-colour);
    color: #061a33;
    font-weight: 700;
    text-decoration: none;
}
.newsletter-reading-button:hover {
    background: #ffc34d;
    color: #061a33;
}
.newsletter-reading-link:focus-visible,
.newsletter-reading-button:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 5px;
}
.newsletter-reading-note {
    font-size: 12px;
    margin-top: 18px;
}
.newsletter-reading-page {
    padding: 185px 24px 80px;
    min-height: 75vh;
    color: var(--text-colour);
    background: var(--background-colour);
    font-family: "Montserrat", sans-serif;
}
.newsletter-reading-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}
.newsletter-reading-heading h1 {
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}
.newsletter-archive {
    max-width: 1150px;
    margin-inline: auto;
}
.newsletter-archive > h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 28px;
}
.newsletter-archive-empty {
    text-align: center;
    padding: 45px 25px;
    background: #0b2852;
    border: 1px solid #466078;
    border-radius: 22px;
}
.newsletter-archive-empty img {
    object-fit: contain;
    margin-bottom: 25px;
}
.newsletter-archive-empty p {
    max-width: 580px;
    margin: 0 auto 25px;
}
.newsletter-issue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 24px;
}
.newsletter-issue {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 30px;
    border: 1px solid #466078;
    border-radius: 18px;
    background: #0b2852;
}
.newsletter-issue .newsletter-reading-button {
    margin-top: auto;
}
@media (max-width: 800px) {
    .newsletter-feature {
        grid-template-columns: 1fr;
        padding: 55px 24px;
    }

    .newsletter-reading-page {
        padding: 135px 20px 60px;
    }

    .newsletter-latest {
        padding: 28px;
    }
}

/* Contact */
.contact-page {
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: radial-gradient(ellipse at top, #143a3d, transparent 50%), var(--background-colour);
    padding-bottom: 80px;
}
.contact-contained {
    width: min(1250px, calc(100% - 96px));
    margin-inline: auto;
}
.contact-hero {
    padding-block: 170px 55px;
    text-align: center;
}
.contact-hero img {
    object-fit: contain;
    margin-bottom: 24px;
}
.contact-page .section-label {
    color: #ffd083;
}
.contact-page h1 {
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.04em;
    margin-bottom: 25px;
}
.contact-page p {
    color: var(--muted-text);
    line-height: 1.8;
}
.contact-hero > p:last-child {
    max-width: 730px;
    margin-inline: auto;
    font-size: 19px;
}
.contact-page h2 {
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.2;
}
.contact-section-title {
    text-align: center;
    margin-bottom: 28px;
}
.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.contact-method {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: #0b2852;
    border: 1px solid #3d5a66;
    border-radius: 20px;
}
.contact-method h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}
.contact-method > p:not(.section-label) {
    font-size: 14px;
}
.contact-detail {
    color: #ffd083;
    overflow-wrap: anywhere;
    text-underline-offset: 4px;
    font-size: 15px;
    margin-top: auto;
    padding-top: 15px;
}
.contact-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #3d5a66;
    text-decoration: none;
    color: var(--text-colour);
    font-weight: 600;
}
.contact-page a:hover {
    color: #fff1a8;
}
.contact-page a:focus-visible {
    outline: 3px solid #ffd083;
    outline-offset: 5px;
    border-radius: 4px;
}
.contact-page .contact-app-note {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
}
.contact-help {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
    margin-top: 65px;
    padding-top: 45px;
    border-top: 1px solid #3d5a66;
}
.contact-help > div > p:last-child {
    margin-top: 20px;
}
.contact-help-links {
    display: grid;
    gap: 14px;
}
.contact-help-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    background: #0d2c49;
    border-radius: 12px;
    color: var(--text-colour);
    text-decoration: none;
}
.contact-help-links small {
    display: block;
    margin-top: 7px;
    color: var(--muted-text);
    line-height: 1.6;
}

@media (max-width: 1000px) {
    .contact-methods {
        grid-template-columns: 1fr;
    }

    .contact-help {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .contact-contained {
        width: calc(100% - 40px);
    }

    .contact-hero {
        padding-block: 120px 35px;
    }

    .contact-method {
        padding: 25px;
    }

    .contact-help {
        grid-template-columns: 1fr;
    }
}

/* Shop: Coming Soon and the future product template in Shop.cshtml */
.shop-page {
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: radial-gradient(ellipse at center, #153b3b, transparent 65%), var(--background-colour);
}
.shop-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75vh;
    padding: 180px 24px 90px;
    text-align: center;
}
.shop-coming-soon img {
    object-fit: contain;
    margin-bottom: 28px;
}
.shop-coming-soon .section-label {
    color: #ffd083;
}
.shop-page h1 {
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.shop-featured-book {
    padding: 175px 24px 85px;
}

.shop-featured-book-inner {
    display: grid;
    grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr);
    gap: clamp(45px, 7vw, 95px);
    align-items: center;
    width: min(1180px, 100%);
    margin-inline: auto;
    padding: clamp(30px, 5vw, 65px);
    border: 1px solid #526d61;
    border-radius: 30px;
    background:
        radial-gradient(circle at 15% 18%, rgb(242 165 26 / 18%), transparent 32%),
        linear-gradient(145deg, #143b3c, #0b2852 72%);
    box-shadow: 0 32px 85px rgb(0 0 0 / 28%);
}

.shop-featured-book-visual {
    position: relative;
    display: grid;
    min-height: 540px;
    place-items: center;
    padding: 25px;
    border-radius: 24px;
    background: radial-gradient(ellipse at 50% 48%, #42677a 0%, #1e3d51 48%, #0a1f34 100%);
}

.shop-featured-book-visual::after {
    position: absolute;
    right: 16%;
    bottom: 8%;
    left: 16%;
    height: 28px;
    border-radius: 50%;
    background: rgb(0 0 0 / 38%);
    filter: blur(14px);
    content: "";
}

.shop-featured-book-visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 430px);
    max-height: 520px;
    object-fit: contain;
    filter: drop-shadow(0 22px 24px rgb(0 0 0 / 42%));
}

.shop-featured-book-badge {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 20px;
    padding: 9px 13px;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 999px;
    background: #638d16;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.shop-featured-book-copy .section-label {
    color: #ffd083;
}

.shop-featured-book-copy h1 {
    margin: 8px 0 18px;
}

.shop-featured-book-copy > p,
.shop-featured-book-copy li {
    color: var(--muted-text);
    line-height: 1.75;
}

.shop-featured-book-lead {
    color: #fff1a8 !important;
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 700;
}

.shop-featured-book-copy ul {
    margin-block: 25px;
    padding-left: 22px;
}

.shop-featured-book-copy li {
    margin-bottom: 9px;
}

.shop-featured-book-purchase {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 30px;
}

.shop-featured-book-purchase p {
    display: flex;
    min-width: 110px;
    flex-direction: column;
    margin: 0;
}

.shop-featured-book-purchase p span {
    color: #9fb3c7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.shop-featured-book-purchase strong {
    color: #ffd083;
    font-size: 34px;
}

.shop-featured-book-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    border-radius: 11px;
    background: var(--button-colour);
    color: #061a33;
    font-weight: 800;
    text-decoration: none;
}

.shop-featured-book-button:hover {
    background: #fff1a8;
    color: #061a33;
}

.shop-featured-book-copy > small {
    display: block;
    margin-top: 15px;
    color: #91a8bb;
    line-height: 1.6;
}

.shop-featured-book + .shop-catalogue {
    padding-top: 65px;
}

@media (max-width: 850px) {
    .shop-featured-book-inner {
        grid-template-columns: 1fr;
    }

    .shop-featured-book-visual {
        min-height: 440px;
    }
}

@media (max-width: 560px) {
    .shop-featured-book {
        padding: 130px 18px 55px;
    }

    .shop-featured-book-inner {
        padding: 20px;
        border-radius: 22px;
    }

    .shop-featured-book-visual {
        min-height: 380px;
        padding: 32px 12px 12px;
    }

    .shop-featured-book-purchase {
        align-items: stretch;
        flex-direction: column;
    }

    .shop-featured-book-button {
        width: 100%;
    }
}
.shop-catalogue {
    width: min(1250px, calc(100% - 48px));
    margin-inline: auto;
    padding-block: 180px 80px;
}
.shop-catalogue-heading {
    text-align: center;
    margin-bottom: 45px;
}
.shop-product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
}
.shop-product-card {
    flex: 0 1 calc((100% - 52px) / 3);
    min-width: 0;
    overflow: hidden;
    border: 1px solid #466078;
    border-radius: 20px;
    background: var(--navbar-colour);
}
.shop-product-image {
    aspect-ratio: 1;
    padding: 20px;
    background: #f7f5f0;
}
.shop-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shop-product-content {
    padding: 25px;
}
.shop-product-category {
    color: #ffd083;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
}
.shop-product-content h2,
.shop-product-content h3 {
    font-size: 24px;
    font-weight: 700;
}
.shop-product-description {
    color: var(--muted-text);
    line-height: 1.7;
}
.shop-product-price {
    color: #ffd083;
    font-weight: 700;
    font-size: 25px;
}
.shop-product-button {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--button-colour);
    color: #061a33;
    font-weight: 700;
}
.shop-product-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.shop-additional-products { padding-top: 0; }
.shop-merchandise .shop-catalogue-heading > p:not(.section-label),
.event-ride-kit .shop-catalogue-heading > p:not(.section-label) {
    max-width: 760px;
    margin: 18px auto;
    color: var(--muted-text);
    line-height: 1.7;
}
.ride-merchandise-grid .shop-product-card { display: flex; flex-direction: column; flex-basis: calc((100% - 26px) / 2); }
.ride-merchandise-grid .shop-product-card {
    border-color: #355365;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgb(0 0 0 / 18%);
}
.ride-merchandise-grid .shop-product-image {
    aspect-ratio: 4 / 3;
    padding: 24px;
    background: radial-gradient(ellipse at center, #ffffff, #e9eef1);
}
.jersey-gallery { position: relative; }
.ride-merchandise-grid .jersey-gallery-stage {
    padding: 18px 24px 62px;
}
.ride-merchandise-grid .jersey-gallery-stage,
.ride-merchandise-grid .sock-product-stage {
    background: radial-gradient(ellipse at 50% 42%, #49667d 0%, #253e53 48%, #101f30 100%);
}
.jersey-gallery-stage img,
.sock-product-stage img { filter: drop-shadow(0 14px 14px rgb(0 0 0 / 40%)); }
.jersey-gallery-stage .jersey-view-back { display: none; }
.jersey-gallery:has(input[value="back"]:checked) .jersey-view-front { display: none; }
.jersey-gallery:has(input[value="back"]:checked) .jersey-view-back { display: block; }
.jersey-view-controls {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    width: max-content;
    margin: 0;
    padding: 4px;
    border: 1px solid #5c7488;
    border-radius: 999px;
    background: #14283b;
}
.jersey-view-controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #f7f5f0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.jersey-view-controls label:has(input:checked) { background: #36536c; }
.jersey-view-controls input { accent-color: #f2a51a; margin: 0; }
.jersey-view-controls label:focus-within { outline: 2px solid #fff1a8; outline-offset: 2px; }
.ride-merchandise-grid .shop-product-content { padding: clamp(22px, 3vw, 34px); }
.ride-merchandise-grid .shop-product-price { margin-block: 20px; font-size: 30px; }
.ride-merchandise-grid .shop-product-button { border-radius: 12px; }
@media (max-width: 650px) {
    .ride-merchandise-grid .shop-product-card { flex-basis: 100%; }
    .ride-merchandise-grid .jersey-gallery-stage { aspect-ratio: 1; }
}
.ride-merchandise-grid .shop-product-content { display: flex; flex: 1; flex-direction: column; }
.ride-merchandise-grid .shop-product-button {
    display: block;
    margin-top: auto;
    text-align: center;
    text-decoration: none;
}
.ride-merchandise-grid .shop-product-button:hover { background: #fff1a8; color: #061a33; }
.shop-product-price small { font-size: 14px; }
.merchandise-size-link { color: #ffd083; text-underline-offset: 4px; }
.merchandise-price-note { margin-block: 20px; color: var(--muted-text); }
.event-ride-kit {
    padding: clamp(20px, 4vw, 45px);
    background: #081f3b;
    border: 1px solid #3f5e65;
    border-radius: 24px;
    scroll-margin-top: 165px;
}
.event-ride-kit h2 { font-size: clamp(28px, 3vw, 42px); }
.ride-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 22px; }
.ride-package { padding: 22px; border: 1px solid #3f5e65; border-radius: 18px; background: #081f3b; }
.ride-package--conure { border-top: 4px solid #638d16; }
.ride-package--eagle { border-top: 4px solid #3478c4; }
.ride-package-name { margin: 0 0 4px; color: #ffd083; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ride-package h4 { margin: 0 0 16px; color: var(--text-colour); font-size: clamp(28px, 3vw, 38px); }
.ride-package h4 span { display: block; color: var(--muted-text); font-size: 12px; text-transform: uppercase; }
.ride-package p, .ride-package li { color: var(--muted-text); font-size: 14px; line-height: 1.65; }
.ride-package ul { padding-left: 20px; }
.ride-package-summary { margin-bottom: 0; font-weight: 700; }
@media (max-width: 700px) { .ride-package-grid { grid-template-columns: 1fr; } }
.stories-page #cheeky-beaks,
.stories-page #brainy-birds { scroll-margin-top: 160px; }
.brainy-birds-stories { margin-top: 65px; }
.rescue-story-photo-upright { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; }
.rescue-story-photo-upright img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.7778%;
    max-width: none;
    height: 56.25%;
    transform: translate(-50%, -50%) rotate(90deg);
    object-fit: contain;
    border-radius: 0;
}
.rescue-story-photo { margin: 0; align-self: start; }
.rescue-story-photo img { display: block; width: 100%; height: auto; border-radius: 18px; }
.rescue-story-photo figcaption { margin-top: 12px; color: var(--muted-text); font-size: 12px; line-height: 1.6; }
.stories-page section .event-detail + .event-detail { margin-top: 65px; }
.stories-page #fiela-title,
.stories-page #brandi-story-title,
.stories-page #chicken-nugget-title,
.stories-page #princess-story-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.rescue-story-quote {
    margin: 28px 0;
    padding: 24px 26px;
    border-left: 4px solid var(--button-colour);
    border-radius: 0 14px 14px 0;
    background: #0d2c49;
    color: var(--muted-text);
}
.rescue-story-quote p { margin: 0; line-height: 1.8; }
.rescue-story-quote footer { margin-top: 16px; color: #ffd083; font-size: 13px; font-weight: 700; }
.rescue-story-poster { margin-top: 26px; }
.rescue-story-poster summary { color: #ffd083; cursor: pointer; padding-block: 10px; }
.rescue-story-poster img { display: block; width: 100%; height: auto; margin-top: 15px; border-radius: 12px; }
.shop-product-button:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}
@media (max-width: 1000px) {
    .shop-product-card {
        flex-basis: calc((100% - 26px) / 2);
    }
}
@media (max-width: 650px) {
    .shop-coming-soon {
        padding-top: 130px;
    }

    .shop-catalogue {
        padding-top: 130px;
    }

    .shop-product-card {
        flex-basis: 100%;
    }
}

/* Gift a Feather donations */
.donation-page {
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: var(--background-colour);
    padding-bottom: 75px;
}

.donation-contained {
    width: min(1250px, calc(100% - 96px));
    margin-inline: auto;
}

.donation-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    padding-block: 165px 55px;
}

.donation-hero h1 {
    font-size: clamp(44px, 5.6vw, 76px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.1;
    margin-bottom: 25px;
}

.donation-hero h1 span {
    color: #ffd083;
}

.donation-page p {
    color: var(--muted-text);
    line-height: 1.8;
}

.donation-page .section-label {
    color: #ffd083;
}

.donation-lead {
    font-size: 21px;
}

.donation-hero-feather {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.donation-text-link {
    display: inline-flex;
    gap: 20px;
    color: #ffd083;
    text-underline-offset: 5px;
    font-weight: 600;
    margin-top: 10px;
}

.donation-text-link:hover {
    color: #fff1a8;
}

.donation-selection {
    padding: 48px;
    background: #0b2852;
    border: 1px solid #36566c;
    border-radius: 26px;
    scroll-margin-top: 150px;
}

.donation-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 32px;
}

.donation-page h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.donation-heading > p:last-child {
    margin-top: 18px;
}

.donation-selection fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.donation-selection legend {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.donation-frequency {
    max-width: 600px;
    margin: 0 auto 34px !important;
    text-align: center;
}

.donation-frequency-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 7px;
    background: #031226;
    border: 1px solid #466078;
    border-radius: 18px;
}

.donation-frequency-options label {
    position: relative;
    cursor: pointer;
}

.donation-frequency-options input {
    position: absolute;
    opacity: 0;
}

.donation-frequency-options span {
    display: flex;
    min-height: 68px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 13px;
    color: var(--muted-text);
}

.donation-frequency-options small {
    font-size: 12px;
}

.donation-frequency-options input:checked + span {
    color: #061a33;
    background: #f2a51a;
}

.donation-frequency-options input:focus-visible + span {
    outline: 3px solid #fff1a8;
    outline-offset: 3px;
}

.donation-frequency > p {
    margin-top: 10px;
    color: var(--muted-text);
    font-size: 13px;
}

.donation-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
        "champion hero golden"
        "silver hero starter"
        "custom custom custom";
    gap: 16px;
}

.donation-option--champion { grid-area: champion; }
.donation-option--hero { grid-area: hero; }
.donation-option--golden { grid-area: golden; }
.donation-option--silver { grid-area: silver; }
.donation-option--starter { grid-area: starter; }
.donation-option--custom { grid-area: custom; }

.donation-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.donation-option input {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 19px;
    height: 19px;
    accent-color: #f2a51a;
    z-index: 1;
}

.donation-option-body {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    background: #061a33;
    padding: 24px 14px;
    border: 2px solid #466078;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.donation-option:hover .donation-option-body {
    transform: translateY(-3px);
    border-color: #86a563;
}

.donation-option-body img {
    border-radius: 50%;
    object-fit: cover;
}

.donation-option-body strong {
    font-size: 17px;
}

.donation-option-body > span:last-child {
    color: var(--muted-text);
    font-size: 12px;
}

.donation-option-body small {
    max-width: 28ch;
    color: #aebfd0;
    font-size: 12px;
    line-height: 1.5;
}

.donation-cue {
    color: #fff1a8;
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
}

.donation-choice-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f2a51a;
    color: #061a33;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.donation-option--hero .donation-option-body {
    justify-content: center;
    min-height: 100%;
    padding: 40px 24px 30px;
    background: radial-gradient(circle at 50% 20%, rgb(99 141 22 / 24%), transparent 42%), #0d315d;
    border-color: #c18b24;
    box-shadow: 0 18px 45px rgb(0 0 0 / 24%);
}

.donation-option--hero .donation-option-body strong {
    color: #ffd083;
    font-size: 20px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.donation-option--hero .donation-price {
    color: #fff;
    font-size: clamp(46px, 5vw, 64px);
}

.donation-option--hero .donation-cue {
    font-size: 17px;
}

.donation-option--custom .donation-option-body {
    display: grid;
    grid-template-columns: auto auto minmax(150px, 1fr) auto;
    align-items: center;
    min-height: 130px;
    padding-inline: 26px;
    text-align: left;
}

.donation-option--custom .donation-option-body img { grid-row: 1 / span 3; }
.donation-option--custom .donation-cue { grid-column: 2; }
.donation-option--custom .donation-price { grid-column: 3; grid-row: 1 / span 2; }
.donation-option--custom .donation-option-body > span:nth-last-of-type(1),
.donation-option--custom .donation-option-body small { grid-column: 4; }

.donation-price {
    color: #ffd083;
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 800;
}

.donation-option input:checked + .donation-option-body {
    border-color: #f2a51a;
    box-shadow: 0 0 0 2px rgb(242 165 26 / 15%);
}

.donation-option input:focus-visible + .donation-option-body {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.donation-custom {
    margin-top: 26px;
    max-width: 450px;
}

.donation-custom label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.donation-custom input {
    width: 100%;
    padding: 14px 18px;
    color: #061a33;
    background: #fff;
    border: 2px solid #f2a51a;
    border-radius: 9px;
    font-size: 20px;
}

.donation-custom p {
    font-size: 12px;
    margin-top: 8px;
}

.donation-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 22px;
    margin-top: 30px;
    padding-block: 24px;
    border-top: 1px solid #466078;
}

.donation-summary strong {
    color: #ffd083;
    font-size: 32px;
    overflow-wrap: anywhere;
}

.donation-summary > span:last-child {
    color: var(--muted-text);
}

.donation-button {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 17px 28px;
    border: 0;
    border-radius: 10px;
    background: #f2a51a;
    color: #061a33;
    font-weight: 700;
    line-height: 1.5;
}

.donation-button:hover {
    background: #ffc34d;
}

.donation-button span {
    margin-left: 14px;
}

.donation-payment-note {
    text-align: center;
    font-size: 12px;
    max-width: 570px;
    margin: 18px auto 0;
}

.donation-bank {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid #648665;
    border-radius: 16px;
    background: #061a33;
    scroll-margin-top: 150px;
}

.donation-bank h2 {
    font-size: 28px;
}

.donation-bank dl {
    margin-block: 24px;
}

.donation-bank dl > div {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #29465e;
}

.donation-bank dt {
    color: var(--muted-text);
    font-size: 14px;
}

.donation-bank dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.donation-bank-note {
    font-size: 13px;
    margin-bottom: 0;
}

.donation-impact {
    padding-top: 70px;
}

.donation-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 32px;
}

.donation-impact h3 {
    font-size: 22px;
    color: #ffd083;
    font-weight: 700;
}

.donation-page [hidden] {
    display: none !important;
}

.donation-page a:focus-visible, .donation-button:focus-visible, .donation-custom input:focus-visible, .donation-bank:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 5px;
}

@media (max-width: 1000px) {
    .donation-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "hero hero"
            "champion golden"
            "silver starter"
            "custom custom";
    }

    .donation-selection {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .donation-contained {
        width: calc(100% - 40px);
    }

    .donation-hero {
        grid-template-columns: 1fr;
        padding-top: 125px;
        gap: 10px;
    }

    .donation-hero-feather {
        max-width: 300px;
        margin-inline: auto;
    }

    .donation-selection {
        padding: 28px 18px;
    }

    .donation-option-body {
        padding-inline: 8px;
    }

    .donation-option--custom .donation-option-body {
        display: flex;
        min-height: 0;
        text-align: center;
    }

    .donation-bank {
        padding: 22px 18px;
    }

    .donation-bank dl > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .donation-impact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .donation-selection, .donation-bank {
        scroll-margin-top: 105px;
    }
}

@media (max-width: 360px) {
    .donation-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .donation-options {
        grid-template-columns: 1fr;
        grid-template-areas: "hero" "champion" "golden" "silver" "starter" "custom";
    }
}

/* Learning centre and care guides */
.home-learning {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(1320px, calc(100% - 96px));
    margin: 90px auto;
    overflow: hidden;
    border: 1px solid #648665;
    border-radius: 28px;
    background: #0b2852;
    color: #f7f5f0;
    font-family: "Montserrat", sans-serif;
    box-shadow: 0 24px 70px rgb(2 18 37 / 22%);
}

.home-learning-image { position: relative; overflow: hidden; min-height: 520px; }
.home-learning-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.7778%;
    max-width: none;
    height: 56.25%;
    transform: translate(-50%, -50%) rotate(90deg);
    object-fit: cover;
}
.home-learning-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(4 23 45 / 78%), transparent 52%); }
.home-learning-image span { position: absolute; z-index: 1; left: 30px; bottom: 26px; color: #fff1a8; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-learning-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 70px); }
.home-learning-copy h2 { margin-bottom: 20px; font-size: clamp(31px, 4vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.home-learning-copy p, .home-learning-copy li { color: #d9e6f2; line-height: 1.7; }
.home-learning-copy ul { margin: 10px 0 26px; padding-left: 20px; }
.home-learning-copy li { margin-bottom: 9px; }
.home-learning-button { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; gap: 12px; padding: 14px 19px; border-radius: 10px; background: #f2a51a; color: #061a33; font-weight: 800; text-decoration: none; }
.home-learning-button:hover { background: #ffc34d; color: #061a33; }

.learning-page {
    min-height: 100vh;
    padding-bottom: 76px;
    overflow: hidden;
    background: radial-gradient(circle at 90% 5%, rgb(31 94 72 / 45%), transparent 31%), #061a33;
    color: #f7f5f0;
    font-family: "Montserrat", sans-serif;
}

.learning-contained { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.learning-page .section-label { color: #ffd083; }
.learning-page p { color: #d9e6f2; line-height: 1.75; }
.learning-page h1, .learning-page h2, .learning-page h3 { font-weight: 800; }

.learning-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: center;
    gap: 70px;
    padding-block: 175px 80px;
}

.learning-hero h1, .care-guide-hero h1 {
    margin: 12px 0 24px;
    font-size: clamp(46px, 6vw, 82px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.learning-hero h1 span, .care-guide-hero h1 span { color: #ffd083; }
.learning-lead { max-width: 760px; font-size: clamp(18px, 2vw, 22px); }
.learning-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.learning-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 22px; border-radius: 10px; background: #f2a51a; color: #061a33; font-weight: 800; text-decoration: none; }
.learning-button:hover { background: #ffc34d; color: #061a33; }
.learning-text-link { color: #ffd083; font-weight: 700; text-underline-offset: 5px; }

.learning-hero-note { position: relative; padding: 42px; border: 1px solid #648665; border-radius: 26px; background: linear-gradient(145deg, #10355e, #082340); box-shadow: 0 28px 70px rgb(0 0 0 / 22%); }
.learning-hero-note > span { display: block; margin-bottom: 35px; color: #8baa5b; font-size: 60px; font-weight: 800; line-height: 1; }
.learning-hero-note h2 { font-size: clamp(25px, 3vw, 38px); line-height: 1.2; }

.learning-principles { padding-block: 70px; border-top: 1px solid #29465e; }
.learning-principles header, .learning-section-heading, .care-guide-section > header, .care-guide-section .learning-contained > header { max-width: 820px; margin-bottom: 35px; }
.learning-page h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.035em; line-height: 1.15; }
.learning-principle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.learning-principle-grid article { padding: 25px; border-top: 3px solid #638d16; background: #0b2852; }
.learning-principle-grid article > span { color: #f2a51a; font-size: 13px; font-weight: 800; }
.learning-principle-grid h3 { margin-top: 24px; font-size: 20px; }
.learning-principle-grid p { margin-bottom: 0; font-size: 14px; }

.care-library { padding-block: 80px; }
.care-level { margin-top: 52px; scroll-margin-top: 150px; }
.care-level-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #3b5a70; }
.care-level-heading p { margin: 0; color: #fff; font-size: 21px; font-weight: 800; }
.care-level-heading span { color: #9fb3c7; font-size: 13px; }
.care-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.care-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 17px; min-height: 135px; padding: 20px; border: 1px solid #36566c; border-radius: 16px; background: #0b2852; color: inherit; text-decoration: none; }
.care-card-mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: #173c3d; color: #ffd083; font-weight: 800; }
.care-card h3 { margin: 0 0 5px; font-size: 18px; }
.care-card p { margin: 0; font-size: 13px; }
.care-status { color: #9fb3c7; font-size: 12px; font-weight: 700; white-space: nowrap; }
.care-card--available { border-color: #8baa5b; background: linear-gradient(120deg, #123d55, #0b2852); }
.care-card--available:hover { transform: translateY(-2px); border-color: #ffd083; color: #fff; }
.care-card--available .care-status { color: #ffd083; }

.care-guide-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.care-guide-library-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #36566c;
    border-radius: 20px;
    background: linear-gradient(155deg, #0e3156, #092442 75%);
    box-shadow: 0 18px 45px rgb(0 0 0 / 16%);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.care-guide-library-card:hover {
    border-color: #648665;
    box-shadow: 0 25px 60px rgb(0 0 0 / 26%);
    transform: translateY(-5px);
}

.care-guide-library-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #173c3d;
}

.care-guide-library-image::after {
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(transparent, rgb(4 25 49 / 72%));
    content: "";
}

.care-guide-library-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.care-guide-library-card:hover .care-guide-library-image img {
    transform: scale(1.035);
}

.care-guide-library-image > span {
    position: absolute;
    z-index: 1;
    right: 16px;
    bottom: 14px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    background: rgb(6 26 51 / 84%);
    color: #ffd083;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.care-guide-library-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.care-guide-library-level {
    margin: 0 0 7px;
    color: #8baa5b !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.care-guide-library-body h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 21px;
}

.care-guide-library-body > p:not(.care-guide-library-level) {
    margin: 0 0 24px;
    font-size: 13px;
}

.care-guide-library-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #36566c;
}

.care-guide-library-actions a {
    color: #ffd083;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.care-guide-library-actions a:last-child {
    color: #b9c9d8;
}

.care-guide-library-actions a:hover {
    color: #fff1a8;
}

.care-guide-library-actions a:focus-visible,
.care-guide-library-image:focus-visible {
    outline: 3px solid #ffd083;
    outline-offset: -3px;
}

.learning-download { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-block: 60px 25px; padding: 40px; border: 1px solid #648665; border-radius: 22px; background: #0b2852; }
.learning-download h2 { margin-bottom: 10px; }
.learning-download p { margin-bottom: 0; }
.learning-disclaimer { color: #91a8bb !important; font-size: 12px; text-align: center; }

.care-guide-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 55px; padding-block: 160px 65px; }
.care-guide-hero-photo { position: relative; margin: 0; }
.care-guide-hero img { width: 100%; height: min(520px, 45vw); object-fit: cover; object-position: 50% 46%; border: 1px solid #648665; border-radius: 28px; }
.care-guide-hero-photo figcaption { position: absolute; right: 18px; bottom: 18px; padding: 8px 12px; border-radius: 999px; background: rgb(4 25 49 / 86%); color: #f7f5f0; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.care-guide-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.care-guide-facts span { display: flex; flex-direction: column; min-width: 155px; padding: 15px; border-left: 3px solid #f2a51a; background: #0b2852; color: #b9c9d8; font-size: 12px; }
.care-guide-facts strong { color: #fff; font-size: 17px; }
.care-guide-jumps { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 20px; border-block: 1px solid #29465e; }
.care-guide-jumps a { padding: 9px 13px; border-radius: 999px; background: #0b2852; color: #d9e6f2; font-size: 13px; font-weight: 700; text-decoration: none; }
.care-guide-jumps a:hover { color: #061a33; background: #ffd083; }
.care-guide-section { padding-block: 80px; scroll-margin-top: 120px; }
.care-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.care-guide-grid article { padding: 25px; border: 1px solid #36566c; border-radius: 16px; background: #0b2852; }
.care-guide-grid h3 { color: #ffd083; font-size: 19px; }
.care-guide-grid p { margin-bottom: 0; font-size: 14px; }
.care-guide-grid .care-guide-alert { border-color: #c9773b; background: #39271f; }
.care-guide-section--light, .care-guide-fit { width: 100%; background: #f2eee3; color: #09203e; }
.care-guide-section--light p, .care-guide-fit p { color: #40536a; }
.care-guide-section--light .section-label, .care-guide-fit .section-label { color: #356d43; }
.care-guide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.care-list, .vet-card { padding: 28px; border-radius: 18px; background: #fff; color: #09203e; box-shadow: 0 12px 36px rgb(4 25 49 / 8%); }
.care-list h3, .vet-card h3 { font-size: 21px; }
.care-list li { margin-bottom: 10px; line-height: 1.55; }
.care-list--yes { border-top: 4px solid #638d16; }
.care-list--no { border-top: 4px solid #c7553d; }
.care-guide-callout { margin-top: 20px; padding: 20px; border-left: 4px solid #f2a51a; background: #fff; }
.vet-card { display: flex; flex-direction: column; align-items: flex-start; border-top: 4px solid #638d16; }
.vet-card a { margin-top: 10px; color: #174f7a; font-weight: 700; }
.care-guide-fit .learning-principle-grid article { background: #fff; box-shadow: 0 10px 30px rgb(4 25 49 / 7%); }
.care-guide-support { margin-top: 75px; padding: 48px; border-radius: 24px; background: linear-gradient(120deg, #103d3d, #0b2852); text-align: center; }
.care-guide-support p { margin-bottom: 22px; }

@media (max-width: 900px) {
    .home-learning { grid-template-columns: 1fr; }
    .home-learning-image { min-height: 420px; }
    .learning-hero, .care-guide-hero { grid-template-columns: 1fr; }
    .learning-principle-grid, .care-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .care-card-grid { grid-template-columns: 1fr; }
    .care-guide-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .care-guide-hero img { height: min(520px, 65vw); }
}

@media (max-width: 650px) {
    .home-learning { width: calc(100% - 36px); margin-block: 55px; }
    .home-learning-image { min-height: 330px; }
    .home-learning-copy { padding: 30px 22px; }
    .learning-contained { width: calc(100% - 36px); }
    .learning-hero, .care-guide-hero { padding-top: 125px; gap: 30px; }
    .learning-hero-note { padding: 28px; }
    .learning-principle-grid, .care-guide-grid, .care-guide-columns { grid-template-columns: 1fr; }
    .care-card { grid-template-columns: 48px minmax(0, 1fr); }
    .care-guide-library-grid { grid-template-columns: 1fr; }
    .care-card-mark { width: 44px; height: 44px; }
    .care-status { grid-column: 2; white-space: normal; }
    .learning-download { align-items: flex-start; flex-direction: column; padding: 28px 22px; }
    .learning-download .learning-button { width: 100%; }
    .care-level-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
    .care-guide-hero img { height: 70vw; }
}

/* Events page and homepage poster cards */
.event-card--text-only {
    display: flex;
    flex-direction: column;
}

.event-card-banner {
    display: flex;
    aspect-ratio: 4 / 3;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 15%, rgb(255 208 131 / 22%), transparent 35%), linear-gradient(145deg, #173c3d, #0b2852);
    color: #ffd083;
}

.event-date-panel {
    display: flex;
    aspect-ratio: 2 / 3;
    min-height: 520px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid #648665;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 18%, rgb(255 208 131 / 25%), transparent 28%),
        linear-gradient(150deg, #173c3d, #0b2852 72%);
    color: #ffd083;
    text-align: center;
}

.event-date-panel-day {
    font-size: clamp(90px, 10vw, 148px);
    font-weight: 800;
    line-height: .82;
}

.event-date-panel-month {
    margin-top: 18px;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.event-date-panel strong {
    margin-top: 38px;
    color: #fff;
    font-size: 20px;
}

.event-date-panel p {
    max-width: 290px;
    margin: 12px 0 0;
    color: #c5d2df;
}

.event-card-banner span {
    font-size: clamp(68px, 7vw, 104px);
    font-weight: 800;
    line-height: .9;
}

.event-card-banner small {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .3em;
}

.event-detail--text-only {
    grid-template-columns: 1fr;
}

.event-detail--text-only .event-detail-copy {
    max-width: none;
    padding: clamp(30px, 5vw, 65px);
    border: 1px solid #648665;
    border-radius: 24px;
    background: linear-gradient(135deg, rgb(23 60 61 / 85%), rgb(11 40 82 / 96%));
}

.event-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
}

@media (max-width: 700px) {
    .event-detail-columns { grid-template-columns: 1fr; gap: 12px; }
}

.events-page {
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: radial-gradient(ellipse at top right, #173c3d, transparent 35%), var(--background-colour);
    padding-bottom: 75px;
}

.events-contained {
    width: min(1320px, calc(100% - 96px));
    margin-inline: auto;
}

.events-page-heading {
    padding-block: 190px 65px;
    max-width: 1000px;
    text-align: center;
}

.events-page h1 {
    font-size: clamp(40px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}

.events-page h2 {
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 700;
    margin-bottom: 20px;
}

.events-page h3 {
    font-size: 20px;
    font-weight: 700;
    margin-block: 25px 14px;
}

.events-page p, .events-page li {
    line-height: 1.8;
}

.events-page p:not(.section-label), .events-page li {
    color: var(--muted-text);
}

.events-page-heading > p:not(.section-label) {
    font-size: 19px;
}

.events-jump-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}

.events-jump-links a {
    padding: 12px 18px;
    border: 1px solid #627550;
    border-radius: 30px;
    color: #ffd083;
    text-decoration: none;
}

.events-jump-links a:hover {
    background: #163c3d;
}

.events-list {
    display: grid;
    gap: 65px;
}

.event-detail {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
    padding-top: 40px;
    border-top: 1px solid #355167;
    scroll-margin-top: 150px;
}

.event-poster {
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: #102e49;
    text-decoration: none;
    color: #ffd083;
}

.event-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.event-poster > span {
    display: flex;
    justify-content: space-between;
    padding: 16px 22px;
}

.event-poster:hover {
    color: #fff1a8;
}

.event-detail-lead {
    font-size: 21px;
}

.event-facts {
    margin-block: 28px;
    padding: 22px 26px;
    background: #0d2c49;
    border-radius: 14px;
}

.event-facts > div {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 15px;
    padding-block: 10px;
}

.event-facts dt {
    color: #ffd083;
}

.event-facts dd {
    margin: 0;
    line-height: 1.7;
}

.event-detail-copy ul {
    padding-left: 22px;
}

.event-detail-copy li {
    margin-bottom: 8px;
}

.event-detail-note {
    border-left: 3px solid var(--button-colour);
    padding-left: 18px;
    margin-block: 24px;
    font-size: 14px;
}

.event-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.paint-sponsors {
    margin-top: 38px;
    padding-top: 30px;
    border-top: 1px solid #355167;
}

.paint-sponsors-label {
    margin: 0 0 7px;
    color: #ffd083 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.paint-sponsors h3 {
    margin: 0 0 20px;
    font-size: clamp(22px, 3vw, 30px);
}

.paint-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.paint-sponsor-card {
    display: flex;
    overflow: hidden;
    min-width: 0;
    flex-direction: column;
    color: #071836;
    background: #fff;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgb(0 0 0 / 19%);
    text-decoration: none;
    transition: box-shadow 180ms ease, transform 180ms ease;
}

a.paint-sponsor-card:hover {
    color: #071836;
    box-shadow: 0 18px 42px rgb(0 0 0 / 30%);
    transform: translateY(-4px);
}

.paint-sponsor-card:focus-visible {
    outline: 3px solid #ffd083;
    outline-offset: 4px;
}

.paint-sponsor-media {
    display: grid;
    overflow: hidden;
    min-height: 175px;
    flex: 1;
    place-items: center;
    background: #f8f5ef;
}

.paint-sponsor-media--logo {
    padding: 22px 16px;
}

.paint-sponsor-media--logo img {
    display: block;
    width: 100%;
    max-width: 190px;
    max-height: 125px;
    object-fit: contain;
}

.paint-sponsor-card--portrait .paint-sponsor-media img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center 18%;
}

.paint-sponsor-name {
    display: flex;
    min-height: 92px;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgb(7 24 54 / 10%);
}

.paint-sponsor-name strong {
    font-size: 13px;
    line-height: 1.35;
}

.paint-sponsor-name small {
    color: #537213;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.event-contact-link, .events-help a {
    color: #ffd083;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.event-contact-link:hover, .events-help a:hover {
    color: #fff1a8;
}

.events-help {
    text-align: center;
    margin-top: 70px;
    border-radius: 20px;
    padding: 40px 26px;
    background: #102e49;
}

.events-page a:focus-visible, .event-home-poster:focus-visible {
    outline: 3px solid #ffd083;
    outline-offset: 5px;
}

.event-cards.event-cards--posters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.event-cards--posters .event-card {
    flex: 0 1 430px;
}

.event-cards--posters .event-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    flex-basis: min(1120px, 100%);
    border: 2px solid #ffd083;
    background: linear-gradient(135deg, #10345c, #071d38 68%) padding-box,
        linear-gradient(135deg, #fff1a8, #f2a51a, #638d16) border-box;
    box-shadow: 0 30px 75px rgb(0 0 0 / 42%), 0 0 38px rgb(242 165 26 / 18%);
}

.event-card--featured .event-home-poster {
    min-height: 100%;
}

.event-card--featured .event-content {
    justify-content: center;
    padding: clamp(30px, 5vw, 58px);
}

.event-card--featured .event-content h3 {
    font-size: clamp(32px, 4vw, 52px);
}

.event-featured-label {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 18px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #ffd083;
    color: #061a33;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.event-home-poster {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #061a33;
}

.event-home-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-home-poster--halloween {
    background: linear-gradient(145deg, #f47a24, #4b1d0d);
}

.event-home-poster--halloween img {
    object-position: center 31%;
}

.event-detail--featured {
    padding: clamp(28px, 4vw, 46px);
    border: 2px solid #ffd083;
    border-radius: 24px;
    background: linear-gradient(145deg, rgb(17 54 94 / 88%), rgb(8 31 59 / 96%));
    box-shadow: 0 28px 70px rgb(0 0 0 / 32%), 0 0 28px rgb(242 165 26 / 12%);
}

.event-payment-form {
    display: inline-flex;
    margin: 0;
}

.event-payment-form .event-button {
    width: auto;
    margin: 0;
}

.event-button,
button.ride-package-link {
    border: 0;
    cursor: pointer;
}

.event-button--secondary {
    color: #fff1a8;
    background: #163c3d;
    box-shadow: inset 0 0 0 1px #638d16;
}

button.ride-package-link {
    padding: 0;
    font: inherit;
    text-decoration: underline;
    background: transparent;
}

@media (max-width: 800px) {
    .event-cards--posters .event-card--featured {
        display: flex;
        flex-direction: column;
    }

    .event-card--featured .event-home-poster {
        min-height: 0;
    }

    .events-contained {
        width: calc(100% - 40px);
    }

    .events-page-heading {
        padding-block: 130px 40px;
    }

    .event-detail {
        grid-template-columns: 1fr;
        scroll-margin-top: 105px;
    }

    .event-poster {
        width: min(100%, 480px);
        margin-inline: auto;
    }

    .event-facts > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .events-list {
        gap: 45px;
    }

    .events-jump-links a {
        font-size: 14px;
    }
}

@media (max-width: 560px) {
    .paint-sponsor-grid {
        grid-template-columns: 1fr;
    }

    .paint-sponsor-media {
        min-height: 210px;
    }

    .paint-sponsor-card--portrait .paint-sponsor-media img {
        height: 280px;
    }

    .paint-sponsor-name {
        min-height: 82px;
    }
}

/* Our Work */
.work-page {
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: radial-gradient(ellipse at top right, #163e45, transparent 38%), var(--background-colour);
    padding-bottom: 80px;
}

.work-container {
    width: min(1320px, calc(100% - 96px));
    margin-inline: auto;
}

.work-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(32px, 6vw, 90px);
    padding-block: 190px 70px;
}

.work-page h1 {
    font-size: clamp(42px, 5.4vw, 78px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
    margin-bottom: 26px;
}

.work-page h2 {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-bottom: 22px;
}

.work-page h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 14px;
}

.work-page p {
    line-height: 1.8;
}

.work-page p:not(.section-label):not(.work-tag) {
    color: var(--muted-text);
}

.work-page .work-lead {
    font-size: clamp(18px, 1.8vw, 23px);
}

.work-hero-image {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #47635a;
    background: #0b2852;
}

.work-hero-image img {
    width: 100%;
    height: 470px;
    object-fit: cover;
    display: block;
}

.work-hero-image figcaption {
    padding: 18px 24px;
    font-size: 13px;
    color: var(--muted-text);
}

.work-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--button-colour);
    color: #061a33;
    padding: 15px 24px;
    margin-top: 14px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.5;
}

.work-button:hover {
    background: #ffc34d;
    color: #061a33;
}

.work-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 5px;
}

.work-notice {
    border-left: 3px solid var(--button-colour);
    background: #102e49;
    border-radius: 0 12px 12px 0;
    padding: 20px 26px;
    font-size: 14px;
    margin: 0;
}

.work-notice strong {
    color: var(--text-colour);
}

.work-section {
    padding-block: 78px;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 36px;
}

.work-focus {
    border-top: 1px solid #36516a;
    padding-top: 25px;
}

.work-number {
    display: block;
    color: var(--button-colour);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.work-focus p {
    margin-bottom: 0;
}

.work-movement {
    padding-block: 78px;
    background: linear-gradient(120deg, #102f43, #163b38);
}

.work-movement .work-impact {
    align-items: start;
}

.work-movement p:first-child {
    margin-top: 0;
}

.work-projects {
    background: #0a2341;
    padding-block: 75px;
    scroll-margin-top: 155px;
}

.work-section-intro {
    max-width: 640px;
}

.work-project {
    overflow: hidden;
    border: 1px solid #36516a;
    border-radius: 18px;
    background: #0e2c4a;
}

.work-photo-placeholder {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 24px;
    background: linear-gradient(135deg, #254a3a, #163429);
    border-bottom: 1px solid #36516a;
}

.work-photo-placeholder--care {
    background: linear-gradient(135deg, #294659, #193047);
}

.work-photo-placeholder--shelter {
    background: linear-gradient(135deg, #574931, #37382c);
}

.work-photo-placeholder span {
    border: 1px dashed #aebcb8;
    border-radius: 7px;
    padding: 12px 16px;
    font-size: 12px;
    text-align: center;
    color: #f7f5f0;
}

.work-project-body {
    padding: 28px;
}

.work-tag {
    color: #ffd083;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.work-project-body > p:not(.work-tag) {
    font-size: 14px;
}

.work-project dl {
    border-top: 1px solid #36516a;
    padding-top: 20px;
    margin: 24px 0 0;
    font-size: 13px;
}

.work-project dt {
    color: var(--text-colour);
    margin-top: 12px;
}

.work-project dd {
    color: var(--muted-text);
    margin: 5px 0 0;
    line-height: 1.6;
}

.work-impact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 65px;
    align-items: center;
}

.work-update {
    padding: 32px;
    border: 1px dashed #6d8598;
    border-radius: 18px;
}

.work-update p:last-child {
    margin-bottom: 0;
}

.work-closing {
    text-align: center;
    padding: 50px 30px;
    border-radius: 24px;
    background: linear-gradient(120deg, #173b35, #0d2d48);
    border: 1px solid #36564e;
}

.work-closing h2 {
    max-width: 700px;
    margin-inline: auto;
}

@media (max-width: 1000px) {
    .work-grid {
        gap: 18px;
    }

    .work-project-body {
        padding: 22px;
    }

    .work-hero-image img {
        height: 390px;
    }

    .work-impact {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .work-container {
        width: calc(100% - 40px);
    }

    .work-hero {
        grid-template-columns: 1fr;
        padding-block: 120px 40px;
    }

    .work-hero-image img {
        height: 360px;
    }

    .work-grid, .work-impact {
        grid-template-columns: 1fr;
    }

    .work-grid {
        gap: 28px;
    }

    .work-section, .work-projects {
        padding-block: 48px;
    }

    .work-projects {
        scroll-margin-top: 100px;
    }

    .work-closing {
        padding: 35px 22px;
    }

    .work-page {
        padding-bottom: 48px;
    }
}



html {
    overflow-y: auto;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--background-colour);
}

* {
    box-sizing: border-box;
}

/* Header */
body > header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    width: 100%;
}

/* Navbar */


/* Cart: empty state while the shop is coming soon */
.cart-page {
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: radial-gradient(ellipse at top, #143a3d, transparent 65%), var(--background-colour);
    min-height: 75vh;
    padding: 190px 24px 80px;
}

.cart-contained {
    width: min(850px, 100%);
    margin-inline: auto;
}

.cart-heading {
    text-align: center;
    margin-bottom: 35px;
}

.cart-heading .section-label {
    color: #ffd083;
}

.cart-heading h1 {
    font-size: clamp(40px, 5vw, 62px);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cart-empty {
    text-align: center;
    padding: 55px 30px;
    background: #0b2852;
    border: 1px solid #3d5a66;
    border-radius: 24px;
}

.cart-empty-icon {
    color: #ffd083;
    margin-bottom: 26px;
}

.cart-empty h2 {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
}

.cart-empty p {
    max-width: 520px;
    color: var(--muted-text);
    line-height: 1.8;
    margin: 20px auto 28px;
}

.cart-shop-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    background: var(--button-colour);
    color: #061a33;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
}

.cart-shop-link:hover {
    background: #ffc34d;
    color: #061a33;
}

.cart-support {
    text-align: center;
    margin-top: 25px;
    color: var(--muted-text);
    line-height: 1.8;
}

.cart-support a {
    color: #ffd083;
    text-underline-offset: 4px;
}

.cart-page a:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .cart-page {
        padding: 125px 20px 55px;
    }

    .cart-empty {
        padding: 35px 22px;
    }
}

/* Hero */

.hero {
    position: relative;

    width: 100%;
    min-height: 650px;

    overflow: hidden;
    background: var(--background-colour);
}

/* Fade the bottom into the next section */

.hero::before {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    height: 240px;

    pointer-events: none;

    background: linear-gradient(
            to bottom,
            transparent 0%,
            rgb(6 26 51 / 15%) 25%,
            rgb(6 26 51 / 60%) 65%,
            var(--background-colour) 100%
    );
}

/* Darken the left side behind the hero content */

.hero::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
            90deg,
            rgb(6 26 51 / 65%) 0%,
            rgb(6 26 51 / 30%) 38%,
            transparent 70%
    );
}

/* Hero image */

.hero-image {
    display: block;

    width: 100%;
    height: min(1000px, 100vh);
    min-height: 650px;

    object-fit: cover;
    object-position: center;
}

/* Hero content */

.hero-content {
    position: absolute;
    top: 58%;
    left: 8%;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;

    width: min(500px, 84%);

    transform: translateY(-50%);
}

/* Hero logo */

.hero-logo {
    display: block;

    width: clamp(190px, 22vw, 350px);
    height: auto;

    filter: drop-shadow(0 5px 14px rgb(0 0 0 / 50%)) drop-shadow(0 0 10px rgb(242 165 26 / 12%));
}

/* Hero heading */

.hero-heading {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(28px, 2.7vw, 48px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;

    color: var(--text-colour);

    text-shadow: 0 2px 8px rgb(0 0 0 / 65%),
    0 8px 24px rgb(0 0 0 / 40%);
}

.hero-heading span {
    color: var(--button-colour);
}

/* Hero paragraph */

.hero-content p {
    margin: 0;
    max-width: 480px;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.3vw, 21px);
    font-weight: 500;
    line-height: 1.6;

    color: var(--muted-text);

    text-shadow: 0 2px 8px rgb(0 0 0 / 60%);
}

/* Hero actions */

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 8px;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 13px 24px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;

    transition: background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

/* Primary hero button */

.hero-button-primary {
    color: var(--background-colour);
    background: var(--button-colour);
}

.hero-button-primary:hover,
.hero-button-primary:focus {
    color: var(--background-colour);
    background: #fff1a8;
    transform: translateY(-2px);
}

/* Secondary hero button */

.hero-button-secondary {
    color: var(--text-colour);
    background: rgb(11 40 82 / 70%);
    border-color: var(--green-light);
}

.hero-button-secondary:hover,
.hero-button-secondary:focus {
    color: var(--text-colour);
    background: var(--green-dark);
    border-color: var(--button-colour);
    transform: translateY(-2px);
}

/* Keyboard focus */

.hero-button:focus-visible,
.navbar-links a:focus-visible,
.nav-logo:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

/* Urgent Little Cockatiel medical appeal */
.urgent-appeal-strip {
    position: relative;
    z-index: 12;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 3vw, 42px);
    width: min(1320px, calc(100% - 64px));
    margin: -28px auto 0;
    padding: 20px 24px;
    color: #071836;
    background: linear-gradient(115deg, #fff9eb, #f5ead4 65%, #dce9d3);
    border: 3px solid #c24532;
    border-radius: 24px;
    box-shadow: 0 24px 65px rgb(0 0 0 / 40%), 0 0 0 7px rgb(255 249 235 / 8%);
    font-family: "Montserrat", sans-serif;
}

.urgent-appeal-strip > img {
    display: block;
    width: 116px;
    height: 142px;
    object-fit: cover;
    object-position: center 25%;
    border: 1px solid rgb(7 24 54 / 18%);
    border-radius: 14px;
    box-shadow: 0 10px 25px rgb(7 24 54 / 18%);
}

.urgent-appeal-strip h2 {
    margin: 3px 0 8px;
    font-size: clamp(25px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.urgent-appeal-strip p:not(.urgent-appeal-kicker) {
    max-width: 760px;
    margin: 0;
    color: #29433e;
    line-height: 1.6;
}

.urgent-appeal-kicker {
    margin: 0;
    color: #a52f25;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.urgent-appeal-open,
.urgent-appeal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 23px;
    color: #fff;
    background: #b7352a;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgb(148 35 28 / 28%);
    font: 800 12px/1.2 "Montserrat", sans-serif;
    letter-spacing: .055em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease;
}

.urgent-appeal-open:hover,
.urgent-appeal-open:focus,
.urgent-appeal-submit:hover,
.urgent-appeal-submit:focus {
    color: #fff;
    background: #8d211b;
    transform: translateY(-2px);
}

.urgent-appeal-open:focus-visible,
.urgent-appeal-submit:focus-visible,
.urgent-appeal-close:focus-visible,
.urgent-appeal-amounts input:focus-visible + span,
.urgent-appeal-custom input:focus-visible {
    outline: 3px solid #f2a51a;
    outline-offset: 4px;
}

.urgent-appeal-modal {
    position: relative;
    overflow: hidden;
    width: min(1160px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    color: #071836;
    background: #fffaf0;
    border: 2px solid #d29258;
    border-radius: 24px;
    box-shadow: 0 40px 120px rgb(0 0 0 / 68%);
    font-family: "Montserrat", sans-serif;
}

.urgent-appeal-modal::backdrop {
    background: rgb(2 12 25 / 86%);
    backdrop-filter: blur(10px);
}

.urgent-appeal-modal[open] {
    animation: urgent-appeal-enter 220ms ease-out;
}

@keyframes urgent-appeal-enter {
    from { opacity: 0; transform: translateY(20px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.urgent-appeal-layout {
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(430px, 1.22fr);
    max-height: calc(100vh - 36px);
}

.urgent-appeal-poster {
    display: grid;
    min-height: 0;
    place-items: center;
    padding: 18px;
    background: #e9e8d8;
}

.urgent-appeal-poster img {
    display: block;
    width: 100%;
    height: min(760px, calc(100vh - 72px));
    object-fit: contain;
    filter: drop-shadow(0 18px 35px rgb(7 24 54 / 22%));
}

.urgent-appeal-panel {
    overflow-y: auto;
    padding: clamp(38px, 5vw, 68px);
    background:
        radial-gradient(circle at 100% 0%, rgb(99 141 22 / 15%), transparent 34%),
        #fffaf0;
}

.urgent-appeal-panel h2 {
    margin: 8px 0 15px;
    color: #082447;
    font-size: clamp(34px, 4.5vw, 58px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.045em;
}

.urgent-appeal-panel > p:not(.urgent-appeal-kicker) {
    margin: 0;
    color: #3c4e58;
    font-size: 16px;
    line-height: 1.72;
}

.urgent-appeal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: #082447;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgb(0 0 0 / 25%);
    font-size: 29px;
    line-height: 1;
    cursor: pointer;
}

.urgent-appeal-close:hover {
    background: #b7352a;
}

.urgent-appeal-form {
    display: grid;
    gap: 18px;
    margin-top: 27px;
}

.urgent-appeal-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.urgent-appeal-form legend,
.urgent-appeal-custom label {
    margin-bottom: 10px;
    color: #082447;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.urgent-appeal-amounts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.urgent-appeal-amounts label {
    min-width: 0;
    cursor: pointer;
}

.urgent-appeal-amounts input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.urgent-appeal-amounts span {
    display: grid;
    min-height: 48px;
    place-items: center;
    padding: 9px 6px;
    color: #18344b;
    background: #fff;
    border: 1px solid #b9c5b2;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.urgent-appeal-amounts input:checked + span {
    color: #fff;
    background: #2d6337;
    border-color: #2d6337;
    box-shadow: 0 7px 18px rgb(45 99 55 / 22%);
}

.urgent-appeal-custom {
    display: grid;
}

.urgent-appeal-custom[hidden] {
    display: none;
}

.urgent-appeal-custom input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    color: #071836;
    background: #fff;
    border: 1px solid #a5b69d;
    border-radius: 10px;
    font: inherit;
}

.urgent-appeal-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 19px;
    color: #082447;
    background: #eaf1e3;
    border-left: 4px solid #638d16;
    border-radius: 10px;
}

.urgent-appeal-total span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.urgent-appeal-total strong {
    color: #2d6337;
    font-size: 19px;
    text-align: right;
}

.urgent-appeal-submit {
    width: 100%;
    min-height: 58px;
    border-radius: 12px;
}

.urgent-appeal-note {
    margin: 0;
    color: #607078;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 900px) {
    .urgent-appeal-strip {
        grid-template-columns: 88px minmax(0, 1fr);
        width: calc(100% - 40px);
        margin-top: -18px;
    }

    .urgent-appeal-strip > img {
        width: 88px;
        height: 112px;
    }

    .urgent-appeal-open {
        grid-column: 2;
        justify-self: start;
    }

    .urgent-appeal-layout {
        grid-template-columns: minmax(240px, .72fr) minmax(390px, 1.28fr);
    }

    .urgent-appeal-panel {
        padding: 50px 30px 35px;
    }
}

@media (max-width: 700px) {
    .urgent-appeal-strip {
        grid-template-columns: 1fr;
        padding: 22px;
        text-align: center;
    }

    .urgent-appeal-strip > img {
        display: none;
    }

    .urgent-appeal-open {
        grid-column: 1;
        justify-self: stretch;
    }

    .urgent-appeal-modal {
        overflow-y: auto;
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        border-radius: 18px;
    }

    .urgent-appeal-layout {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .urgent-appeal-poster {
        padding: 18px 18px 0;
    }

    .urgent-appeal-poster img {
        width: min(310px, 100%);
        height: auto;
        max-height: none;
    }

    .urgent-appeal-panel {
        overflow: visible;
        padding: 32px 22px 28px;
    }

    .urgent-appeal-panel h2 {
        font-size: clamp(34px, 11vw, 48px);
    }

    .urgent-appeal-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urgent-appeal-total {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .urgent-appeal-total strong {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .urgent-appeal-modal[open] { animation: none; }
}

/* Sections below the hero */

.home-mission,
.what-we-do,
.featured-story,
.help-cta,
.partners,
.bilbo-legacy {
    position: relative;
    z-index: 3;

    margin: 0;
    background: var(--background-colour);
    color: var(--text-colour);
}

.home-mission {
    padding: 70px 8%;
}

.section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    width: 100%;
    max-width: 800px;
    margin: 0 auto 48px;

    text-align: center;
}

.mission-content {
    width: min(700px, 100%);
    margin: 0 auto;
    text-align: center;
}

.mission-content p {
    margin: 0 0 24px;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.7;

    color: #d9e6f2;
}

.mission-content a {
    display: inline-block;

    padding: 13px 24px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;

    color: #061a33;
    background: #f2a51a;
    border-radius: 999px;
}

.section-label {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #f2a51a;
}

/* Bilbo's Legacy */

.bilbo-legacy {
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(320px, 620px);
    align-items: center;
    justify-content: center;
    gap: clamp(48px, 7vw, 110px);

    padding: clamp(80px, 9vw, 140px) 8%;
}

.bilbo-image-wrapper {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    max-width: 520px;
    aspect-ratio: 4 / 5;

    background: var(--navbar-colour);
    border: 1px solid transparent;
    border-radius: 28px;

    background: linear-gradient(var(--navbar-colour), var(--navbar-colour)) padding-box,
    linear-gradient(
            145deg,
            #fff1a8 0%,
            var(--green-light) 38%,
            var(--green-dark) 72%,
            #163519 100%
    ) border-box;

    box-shadow: 0 24px 60px rgb(0 0 0 / 35%),
    0 0 24px rgb(99 141 22 / 14%);
}

.bilbo-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
            to top,
            rgb(6 26 51 / 42%) 0%,
            transparent 38%
    );
}

.bilbo-image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 48% center;

    filter: brightness(1.08) contrast(1.06) saturate(1.08);
}

.bilbo-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.bilbo-content h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 700;
    line-height: 1.12;

    color: var(--text-colour);
}

.bilbo-content > p:not(.section-label) {
    margin: 0;
    max-width: 590px;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.75;

    color: var(--muted-text);
}

.bilbo-content > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    margin-top: 8px;
    padding: 13px 24px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 999px;

    transition: background-color 200ms ease,
    transform 200ms ease;
}

.bilbo-content > a:hover,
.bilbo-content > a:focus {
    color: var(--background-colour);
    background: #fff1a8;
    transform: translateY(-2px);
}

.bilbo-content > a:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

/* Gift a Feather */

.gift-feather {
    position: relative;
    z-index: 3;

    margin-top: -1px;

    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(520px, 1.2fr);
    align-items: center;
    gap: clamp(50px, 7vw, 110px);

    padding: clamp(90px, 10vw, 150px) 8% 80px;

    color: var(--text-colour);
    background: radial-gradient(circle at 75% 45%, rgb(23 78 166 / 15%), transparent 36%),
    var(--background-colour);
}

.gift-feather::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 48px;

    pointer-events: none;
    background: linear-gradient(
            to bottom,
            var(--background-colour),
            transparent
    );
}

.gift-feather-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;

    max-width: 540px;
}

.gift-feather-heading h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.08;

    color: var(--text-colour);
}

.gift-feather-intro {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.75;

    color: var(--muted-text);
}

.gift-feather-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 8px;
}

.gift-feather-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 13px 23px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;

    border: 1px solid transparent;
    border-radius: 999px;

    transition: color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.gift-feather-button-primary {
    color: var(--background-colour);
    background: var(--button-colour);
}

.gift-feather-button-primary:hover,
.gift-feather-button-primary:focus {
    color: var(--background-colour);
    background: #fff1a8;
    transform: translateY(-2px);
}

.gift-feather-button-secondary {
    color: var(--text-colour);
    background: rgb(11 40 82 / 60%);
    border-color: var(--green-light);
}

.gift-feather-button-secondary:hover,
.gift-feather-button-secondary:focus {
    color: var(--text-colour);
    background: var(--green-dark);
    border-color: var(--button-colour);
    transform: translateY(-2px);
}

.gift-feather-button:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

.gift-feather-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.gift-card {
    position: relative;
    overflow: hidden;

    min-height: 260px;
    padding: 32px;

    background: linear-gradient(var(--navbar-colour), var(--navbar-colour)) padding-box,
    linear-gradient(145deg, #fff1a8, var(--green-light), var(--green-dark)) border-box;

    border: 1px solid transparent;
    border-radius: 22px;

    box-shadow: 0 20px 45px rgb(0 0 0 / 24%),
    0 0 18px rgb(99 141 22 / 10%);

    transition: transform 200ms ease,
    box-shadow 200ms ease;
}

.gift-card::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -70px;

    width: 180px;
    height: 180px;

    background: radial-gradient(circle, rgb(99 141 22 / 20%), transparent 68%);
    pointer-events: none;
}

.gift-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 26px 55px rgb(0 0 0 / 32%),
    0 0 22px rgb(99 141 22 / 16%);
}

.gift-card-number {
    position: absolute;
    top: 22px;
    right: 24px;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: rgb(217 230 242 / 55%);
}

.gift-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    margin-bottom: 30px;

    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 800;

    color: var(--background-colour);
    background: linear-gradient(145deg, #fff1a8, var(--button-colour));
    border-radius: 50%;

    box-shadow: 0 8px 20px rgb(0 0 0 / 25%);
}

.gift-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 14px;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;

    color: var(--button-colour);
}

.gift-card p {
    position: relative;
    z-index: 1;

    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.7;

    color: var(--muted-text);
}

.gift-card-shelter {
    grid-column: 1 / -1;
    min-height: 230px;
}

.upcoming-events {
    position: relative;
    z-index: 3;

    margin-top: -1px;
    padding: 80px 6% 110px;

    color: var(--text-colour);
    background: radial-gradient(circle at 50% 10%, rgb(23 78 166 / 12%), transparent 38%),
    var(--background-colour);
}

.upcoming-events-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;

    width: min(820px, 100%);
    margin: 0 auto 52px;

    text-align: center;
    color: var(--text-colour);
}

.upcoming-events-heading h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.08;

    color: var(--text-colour);
}

.upcoming-events-intro {
    width: min(680px, 100%);
    margin: 4px auto 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.6;

    color: var(--muted-text);
}

/* Event cards grid */

.event-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    width: min(1320px, 100%);
    margin: 0 auto;
}

/* Individual event card */

.event-card {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-width: 0;

    background: linear-gradient(
            var(--navbar-colour),
            var(--navbar-colour)
    ) padding-box,
    linear-gradient(
            145deg,
            #fff1a8,
            var(--button-colour),
            var(--green-light),
            var(--green-dark)
    ) border-box;

    border: 1px solid transparent;
    border-radius: 22px;

    box-shadow: 0 20px 45px rgb(0 0 0 / 28%),
    0 0 18px rgb(99 141 22 / 10%);

    transition: transform 200ms ease,
    box-shadow 200ms ease;
}

.event-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 28px 55px rgb(0 0 0 / 36%),
    0 0 22px rgb(242 165 26 / 14%);
}

/* Event image */

.event-image-wrapper {
    position: relative;

    height: 225px;
    background: var(--green-dark);
}

.event-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* Slight image fade */

.event-image-wrapper::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
            to bottom,
            transparent 55%,
            rgb(11 40 82 / 75%) 100%
    );
}

/* Date badge */

.event-date {
    position: absolute;
    right: 24px;
    bottom: -30px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 112px;
    min-height: 60px;
    padding: 10px 18px;

    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;

    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 16px;

    box-shadow: 0 10px 24px rgb(0 0 0 / 30%);
}

.event-day {
    font-size: 25px;
    font-weight: 800;
}

.event-month {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* Event card content */

.event-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;

    padding: 45px 28px 28px;
}

.event-category {
    margin: 0 0 10px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--green-light);
}

.event-content h3 {
    margin: 0 0 13px;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(23px, 2vw, 31px);
    font-weight: 700;
    line-height: 1.2;

    color: var(--text-colour);
}

/* Event location */

.event-location {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 0 18px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;

    color: #6eb5ff;
}

.event-location span {
    font-size: 9px;
    color: var(--button-colour);
}

/* Event description */

.event-description {
    margin: 0 0 26px;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.65;

    color: var(--muted-text);
}

/* Event button */

.event-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 48px;
    margin-top: auto;
    padding: 13px 22px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 999px;

    transition: background-color 200ms ease,
    transform 200ms ease;
}

.event-button:hover,
.event-button:focus {
    color: var(--background-colour);
    background: #fff1a8;
    transform: translateY(-2px);
}

.event-button:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

/* Tablet */

@media (max-width: 1000px) {
    .upcoming-events {
        padding-inline: 5%;
    }

    .event-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */

@media (max-width: 650px) {
    .upcoming-events {
        padding: 70px 24px;
    }

    .upcoming-events-heading {
        margin-bottom: 38px;
    }

    .event-cards {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .event-image-wrapper {
        height: 230px;
    }

    .event-content {
        padding: 46px 24px 26px;
    }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page {
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: var(--background-colour);
}

.about-contained {
    width: min(1400px, calc(100% - 96px));
    margin-inline: auto;
}

.about-hero {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    align-items: center;
    gap: clamp(50px, 7vw, 120px);

    min-height: 820px;
    padding: 165px max(48px, 7vw) 90px;

    background: radial-gradient(circle at 78% 40%, rgb(99 141 22 / 16%), transparent 31%),
    linear-gradient(125deg, #061a33 0%, #09264a 58%, #0b2852 100%);
}

.about-hero::before,
.about-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.about-hero::before {
    top: 21%;
    left: -110px;
    width: 330px;
    height: 330px;
    border: 1px solid rgb(242 165 26 / 14%);
    border-radius: 50%;
}

.about-hero::after {
    right: 0;
    bottom: -1px;
    left: 0;
    height: 130px;
    background: linear-gradient(to bottom, transparent, var(--background-colour));
}

.about-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.about-hero h1 {
    max-width: 760px;
    margin: 14px 0 28px;

    font-size: clamp(48px, 6vw, 94px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;

    color: var(--text-colour);
}

.about-hero-lead {
    max-width: 690px;
    margin: 0;
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.75;
    color: var(--muted-text);
}

.about-hero-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 32px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--button-colour);
}

.about-hero-kicker::before {
    content: "";
    width: 42px;
    height: 1px;
    background: var(--button-colour);
}

.about-hero-portrait {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    margin: 0 auto;
}

.about-hero-portrait::before {
    content: "";
    position: absolute;
    inset: -16px 18px 32px -16px;
    z-index: -1;
    border: 1px solid rgb(99 141 22 / 70%);
    border-radius: 230px 230px 28px 28px;
}

.about-hero-portrait img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 48% center;
    border-radius: 220px 220px 24px 24px;
    box-shadow: 0 30px 70px rgb(0 0 0 / 38%);
}

.about-hero-portrait figcaption {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: rgb(217 230 242 / 72%);
}

.about-dedication {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vw, 54px);
    padding: 34px 48px;
    text-align: center;
    background: var(--button-colour);
    color: var(--background-colour);
}

.about-dedication p {
    margin: 0;
    font-size: clamp(17px, 2vw, 25px);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.about-feather-mark {
    font-size: 20px;
    color: var(--green-dark);
}

.about-story {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(60px, 9vw, 150px);
    padding-block: clamp(100px, 11vw, 170px);
}

.about-story h2,
.about-purpose h2,
.about-feather h2,
.about-keepers h2,
.about-lessons h2,
.about-promise h2,
.about-closing h2 {
    margin: 14px 0 0;
    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--text-colour);
}

.about-story-copy > p {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.85;
    color: var(--muted-text);
}

.about-story-copy blockquote {
    margin: 42px 0 0;
    padding: 4px 0 4px 28px;
    font-size: clamp(21px, 2.3vw, 32px);
    font-weight: 600;
    line-height: 1.45;
    color: var(--button-colour);
    border-left: 3px solid var(--green-light);
}

.about-purpose {
    padding-block: clamp(90px, 10vw, 150px);
    background: radial-gradient(circle at 85% 15%, rgb(99 141 22 / 15%), transparent 29%),
    #0b2852;
}

.about-purpose-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    column-gap: clamp(60px, 9vw, 150px);
    align-items: end;
}

.about-purpose-intro .section-label {
    grid-column: 1 / -1;
}

.about-purpose-intro > p:last-child {
    margin: 0;
    font-size: 17px;
    line-height: 1.85;
    color: var(--muted-text);
}

.about-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 74px;
}

.about-support-card {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: 38px 34px;
    background: linear-gradient(145deg, rgb(255 255 255 / 6%), rgb(6 26 51 / 46%));
    border: 1px solid rgb(99 141 22 / 54%);
    border-radius: 22px;
    box-shadow: 0 20px 45px rgb(0 0 0 / 18%);
}

.about-support-card::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -48px;
    width: 130px;
    height: 130px;
    border: 26px solid rgb(242 165 26 / 7%);
    border-radius: 50%;
}

.about-card-number {
    display: block;
    margin-bottom: 60px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--button-colour);
}

.about-support-card h3 {
    margin: 0 0 14px;
    font-size: 27px;
    color: var(--text-colour);
}

.about-support-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted-text);
}

.about-feather {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.8fr);
    align-items: center;
    gap: clamp(70px, 10vw, 170px);
    padding-block: clamp(110px, 12vw, 180px);
}

.about-feather-copy > p:not(.section-label) {
    margin: 28px 0;
    font-size: 17px;
    line-height: 1.85;
    color: var(--muted-text);
}

.about-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--button-colour);
}

.about-text-link:hover,
.about-text-link:focus {
    color: #fff1a8;
}

.about-feather-steps {
    position: relative;
    display: grid;
    gap: 18px;
}

.about-feather-steps::before {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 31px;
    width: 1px;
    background: linear-gradient(var(--green-light), var(--button-colour));
}

.about-feather-steps article {
    position: relative;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    min-height: 120px;
    padding: 24px 28px;
    background: #0b2852;
    border: 1px solid rgb(99 141 22 / 46%);
    border-radius: 18px;
    box-shadow: 0 18px 38px rgb(0 0 0 / 20%);
}

.about-feather-steps strong {
    position: relative;
    min-width: 4.5em;
    font-size: clamp(28px, 3vw, 43px);
    color: var(--button-colour);
}

.about-feather-steps span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--muted-text);
}

.about-keepers {
    padding-block: clamp(90px, 10vw, 145px);
    background: linear-gradient(115deg, rgb(36 79 36 / 94%), rgb(11 40 82 / 94%)),
    var(--green-dark);
}

.about-keepers-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
    align-items: center;
    gap: clamp(60px, 9vw, 140px);
}

.about-keepers p:not(.section-label) {
    max-width: 720px;
    margin: 26px 0 0;
    font-size: 17px;
    line-height: 1.85;
    color: var(--muted-text);
}

.about-keepers blockquote {
    margin: 0;
    padding: 36px;
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 700;
    line-height: 1.5;
    color: var(--button-colour);
    border: 1px solid rgb(242 165 26 / 44%);
    border-radius: 22px;
    background: rgb(6 26 51 / 34%);
}

.about-lessons {
    padding-block: clamp(105px, 12vw, 180px);
}

.about-section-heading {
    max-width: 820px;
    margin-bottom: 70px;
}

.about-lessons-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
}

.about-lessons-grid blockquote {
    position: relative;
    grid-column: span 2;
    min-height: 235px;
    margin: 0;
    padding: 68px 32px 32px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--text-colour);
    background: linear-gradient(145deg, #0d315f, #091f3d);
    border: 1px solid rgb(99 141 22 / 36%);
    border-radius: 20px;
}

.about-lessons-grid blockquote::before {
    content: "“";
    position: absolute;
    top: 16px;
    left: 28px;
    font-family: Georgia, serif;
    font-size: 58px;
    line-height: 1;
    color: var(--button-colour);
}

.about-lessons-grid blockquote:nth-last-child(2) {
    grid-column: 2 / span 2;
}

.about-lessons-grid blockquote:last-child {
    grid-column: 4 / span 2;
}

.about-promise {
    padding-block: clamp(90px, 10vw, 150px);
    background: #0b2852;
    border-block: 1px solid rgb(99 141 22 / 25%);
}

.about-promise-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.75fr);
    align-items: center;
    gap: clamp(70px, 10vw, 160px);
}

.about-promise-copy > p:not(.section-label) {
    margin: 26px 0 0;
    font-size: 17px;
    line-height: 1.85;
    color: var(--muted-text);
}

.about-promise-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-promise-list li {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 14px;
    padding: 19px 21px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--muted-text);
    background: rgb(6 26 51 / 54%);
    border-radius: 14px;
}

.about-promise-list span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-weight: 800;
    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 50%;
}

.about-documents {
    padding-block: clamp(100px, 11vw, 165px);
}

.about-documents-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
    align-items: end;
    gap: clamp(50px, 8vw, 130px);
    margin-bottom: 62px;
}

.about-documents h2 {
    margin: 14px 0 0;
    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--text-colour);
}

.about-documents-intro > p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted-text);
}

.about-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.about-document-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    min-height: 285px;
    padding: 34px;
    background: linear-gradient(#0b2852, #0b2852) padding-box,
    linear-gradient(145deg, #fff1a8, var(--button-colour), var(--green-light), var(--green-dark)) border-box;
    border: 1px solid transparent;
    border-radius: 22px;
    box-shadow: 0 22px 48px rgb(0 0 0 / 22%);
}

.about-document-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 72px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 8px 8px 14px 8px;
}

.about-document-copy {
    min-width: 0;
}

.about-document-type {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--green-light);
}

.about-document-copy h3 {
    margin: 0 0 13px;
    font-size: clamp(21px, 2vw, 29px);
    line-height: 1.25;
    color: var(--text-colour);
}

.about-document-copy > p:last-child {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted-text);
}

.about-document-link {
    grid-column: 2;
    align-self: end;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--button-colour);
}

.about-document-link:hover,
.about-document-link:focus {
    color: #fff1a8;
}

.about-document-link:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 5px;
    border-radius: 3px;
}

.about-document-note {
    margin: 20px 0 0;
    font-size: 12px;
    color: rgb(217 230 242 / 64%);
}

.about-closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(100px, 12vw, 175px) 48px;
    text-align: center;
    background: radial-gradient(circle at 50% 30%, rgb(99 141 22 / 19%), transparent 34%),
    var(--background-colour);
}

.about-closing > img {
    width: 112px;
    height: 70px;
    margin-bottom: 28px;
    object-fit: contain;
}

.about-closing h2 {
    max-width: 900px;
}

.about-closing > p:not(.section-label) {
    max-width: 670px;
    margin: 25px 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--muted-text);
}

.about-closing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 38px;
}

@media (max-width: 1000px) {
    .about-contained {
        width: min(100% - 48px, 760px);
    }

    .about-hero {
        grid-template-columns: 1fr;
        gap: 70px;
        padding: 150px 48px 100px;
    }

    .about-hero-copy {
        max-width: 760px;
    }

    .about-hero-portrait {
        width: min(82%, 500px);
    }

    .about-story,
    .about-purpose-intro,
    .about-feather,
    .about-keepers-inner,
    .about-promise-inner,
    .about-documents-intro {
        grid-template-columns: 1fr;
    }

    .about-story,
    .about-feather,
    .about-keepers-inner,
    .about-promise-inner {
        gap: 52px;
    }

    .about-support-grid {
        grid-template-columns: 1fr;
    }

    .about-support-card {
        min-height: 0;
    }

    .about-card-number {
        margin-bottom: 30px;
    }

    .about-lessons-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-lessons-grid blockquote,
    .about-lessons-grid blockquote:nth-last-child(2),
    .about-lessons-grid blockquote:last-child {
        grid-column: auto;
    }

    .about-lessons-grid blockquote:last-child {
        grid-column: 1 / -1;
    }

    .about-document-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .about-contained {
        width: calc(100% - 40px);
    }

    .about-hero {
        min-height: 0;
        padding: 125px 20px 82px;
    }

    .about-hero h1 {
        font-size: clamp(43px, 14vw, 62px);
    }

    .about-hero-portrait {
        width: calc(100% - 14px);
    }

    .about-dedication {
        padding: 28px 20px;
    }

    .about-feather-mark {
        display: none;
    }

    .about-purpose-intro h2,
    .about-story h2,
    .about-feather h2,
    .about-keepers h2,
    .about-lessons h2,
    .about-promise h2,
    .about-documents h2,
    .about-closing h2 {
        font-size: clamp(34px, 10vw, 48px);
    }

    .about-feather-steps article {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .about-feather-steps::before {
        display: none;
    }

    .about-lessons-grid {
        grid-template-columns: 1fr;
    }

    .about-lessons-grid blockquote,
    .about-lessons-grid blockquote:last-child {
        grid-column: auto;
        min-height: 200px;
    }

    .about-document-card {
        grid-template-columns: 1fr;
    }

    .about-document-icon {
        margin-bottom: 22px;
    }

    .about-document-link {
        grid-column: 1;
    }

    .about-closing {
        padding-inline: 20px;
    }

    .about-closing-actions,
    .about-closing-actions .hero-button {
        width: 100%;
    }
}

.help-section {
    position: relative;
    z-index: 3;

    padding: clamp(80px, 9vw, 130px) 8%;

    color: var(--text-colour);

    background: radial-gradient(
            circle at 50% 45%,
            rgb(23 78 166 / 12%),
            transparent 40%
    ),
    var(--background-colour);
}

/* Section introduction */

.help-heading {
    width: min(760px, 100%);
    margin: 0 auto 52px;

    text-align: center;
}

.help-heading h2 {
    margin: 12px 0 20px;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.1;

    color: var(--text-colour);
}

.help-heading > p:last-child {
    width: min(650px, 100%);
    margin: 0 auto;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.65;

    color: var(--muted-text);
}

/* Four-card grid */

.help-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;

    width: min(1400px, 100%);
    margin: 0 auto;
}

/* Individual card */

.help-card {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-height: 340px;
    padding: 30px;

    background: linear-gradient(
            var(--navbar-colour),
            var(--navbar-colour)
    ) padding-box,
    linear-gradient(
            145deg,
            #fff1a8,
            var(--green-light),
            var(--green-dark)
    ) border-box;

    border: 1px solid transparent;
    border-radius: 22px;

    box-shadow: 0 20px 45px rgb(0 0 0 / 25%),
    0 0 18px rgb(99 141 22 / 9%);

    transition: transform 200ms ease,
    box-shadow 200ms ease;
}

.help-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 28px 55px rgb(0 0 0 / 34%),
    0 0 22px rgb(242 165 26 / 12%);
}

/* Card number */

.help-number {
    position: absolute;
    top: 24px;
    right: 26px;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: rgb(217 230 242 / 45%);
}

/* Card icon */

.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin-bottom: 28px;

    font-family: "Montserrat", sans-serif;
    font-size: 21px;
    font-weight: 800;

    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 50%;
}

.help-card-volunteer .help-icon {
    color: var(--text-colour);
    background: var(--green-light);
}

.help-card-sponsor .help-icon {
    color: var(--text-colour);
    background: #174ea6;
}

.help-card-share .help-icon {
    color: var(--text-colour);
    background: transparent;
    border: 1px solid var(--button-colour);
}

/* Card content */

.help-card h3 {
    margin: 0 0 15px;

    font-family: "Montserrat", sans-serif;
    font-size: 28px;
    font-weight: 700;

    color: var(--text-colour);
}

.help-card p {
    margin: 0 0 28px;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.7;

    color: var(--muted-text);
}

/* Card link */

.help-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: auto;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--button-colour);
}

.help-link span {
    font-size: 20px;
    transition: transform 200ms ease;
}

.help-link:hover,
.help-link:focus {
    color: #fff1a8;
}

.help-link:hover span,
.help-link:focus span {
    transform: translateX(5px);
}

.help-link:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 5px;
}

/* Tablet */

@media (max-width: 1050px) {
    .help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */

@media (max-width: 600px) {
    .help-section {
        padding: 70px 24px;
    }

    .help-heading {
        margin-bottom: 38px;
    }

    .help-grid {
        grid-template-columns: 1fr;
    }

    .help-card {
        min-height: auto;
    }
}

/* Ambassadors section */

.ambassadors-section {
    position: relative;
    z-index: 3;

    padding: clamp(80px, 9vw, 130px) 8%;

    color: var(--text-colour);

    background: radial-gradient(
            circle at 50% 35%,
            rgb(99 141 22 / 10%),
            transparent 40%
    ),
    var(--background-colour);
}

/* Section heading */

.ambassadors-heading {
    width: min(760px, 100%);
    margin: 0 auto 52px;

    text-align: center;
}

.ambassadors-heading h2 {
    margin: 12px 0 20px;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.1;

    color: var(--text-colour);
}

.ambassadors-heading > p:last-child {
    width: min(640px, 100%);
    margin: 0 auto;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.65;

    color: var(--muted-text);
}

/* Extended ambassador biographies on About Us */
.about-ambassadors {
    padding-block: 85px;
    scroll-margin-top: 150px;
}

.about-ambassadors-intro {
    max-width: 760px;
    margin: 22px auto 0;
    color: var(--muted-text);
    line-height: 1.8;
}

.about-ambassador-profile {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: clamp(28px, 5vw, 70px);
    padding-top: 48px;
    margin-top: 48px;
    border-top: 1px solid rgb(217 230 242 / 20%);
    scroll-margin-top: 150px;
}

.about-ambassador-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    border: 1px solid rgb(99 141 22 / 45%);
}

.about-ambassador-bio h3 {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    margin: 12px 0;
}

.about-ambassador-bio p {
    color: var(--muted-text);
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-ambassador-bio .section-label,
.about-ambassador-bio .about-ambassador-strapline {
    color: #ffd083;
}

.about-ambassador-bio .about-ambassador-purpose {
    color: var(--text-colour);
    border-left: 3px solid var(--button-colour);
    padding-left: 20px;
    margin: 28px 0 0;
    font-weight: 600;
}

@media (max-width: 800px) {
    .about-ambassadors {
        padding-block: 55px;
    }

    .about-ambassador-profile {
        grid-template-columns: 1fr;
    }

    .about-ambassador-photo {
        max-width: 440px;
        margin-inline: auto;
    }

    .about-ambassadors, .about-ambassador-profile {
        scroll-margin-top: 105px;
    }
}

/* Ambassador grid */

.ambassadors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;

    width: min(1250px, 100%);
    margin: 0 auto;
}

/* Ambassador card */

.ambassador-card {
    flex: 0 1 calc((100% - 52px) / 3);
    min-width: 0;
    overflow: hidden;

    background: linear-gradient(
            var(--navbar-colour),
            var(--navbar-colour)
    ) padding-box,
    linear-gradient(
            145deg,
            #fff1a8,
            var(--green-light),
            var(--green-dark)
    ) border-box;

    border: 1px solid transparent;
    border-radius: 24px;

    box-shadow: 0 20px 45px rgb(0 0 0 / 28%),
    0 0 18px rgb(99 141 22 / 10%);

    transition: transform 200ms ease,
    box-shadow 200ms ease;
}

.ambassador-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 28px 55px rgb(0 0 0 / 36%),
    0 0 22px rgb(242 165 26 / 12%);
}

/* Ambassador image */

.ambassador-image-wrapper {
    position: relative;
    overflow: hidden;

    height: 330px;
}

.ambassador-image-wrapper::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
            to bottom,
            transparent 55%,
            var(--navbar-colour) 100%
    );
}

.ambassador-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition: transform 350ms ease;
}

.ambassador-card:hover .ambassador-image {
    transform: scale(1.03);
}

/* Ambassador content */

.ambassador-content {
    padding: 8px 28px 30px;
}

.ambassador-role {
    margin: 0 0 10px;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: var(--green-light);
}

.ambassador-content h3 {
    margin: 0 0 14px;

    font-family: "Montserrat", sans-serif;
    font-size: 27px;
    font-weight: 700;

    color: var(--text-colour);
}

.ambassador-description {
    margin: 0 0 24px;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.7;

    color: var(--muted-text);
}

/* Ambassador card link */

.ambassador-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--button-colour);
}

.ambassador-link span {
    font-size: 19px;
    transition: transform 200ms ease;
}

.ambassador-link:hover,
.ambassador-link:focus {
    color: #fff1a8;
}

.ambassador-link:hover span,
.ambassador-link:focus span {
    transform: translateX(5px);
}

/* Main section button */

.ambassadors-action {
    display: flex;
    justify-content: center;

    margin-top: 46px;
}

.ambassadors-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 13px 24px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 999px;

    transition: background-color 200ms ease,
    transform 200ms ease;
}

.ambassadors-button:hover,
.ambassadors-button:focus {
    color: var(--background-colour);
    background: #fff1a8;
    transform: translateY(-2px);
}

/* Keyboard focus */

.ambassador-link:focus-visible,
.ambassadors-button:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

/* Tablet */

@media (max-width: 1000px) {
    .ambassador-card {
        flex-basis: calc((100% - 26px) / 2);
    }
}

/* Mobile */

@media (max-width: 650px) {
    .ambassadors-section {
        padding: 70px 24px;
    }

    .ambassadors-heading {
        margin-bottom: 38px;
    }

    .ambassador-card {
        flex-basis: 100%;
    }

    .ambassador-image-wrapper {
        height: 300px;
    }
}

/* Partner profiles on About Us */
.about-partners {
    padding-block: 85px;
    background: #081f3b;
    scroll-margin-top: 165px;
}

.about-partners h2 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 700;
    line-height: 1.15;
}

.about-partners-intro {
    color: var(--muted-text);
    line-height: 1.8;
    margin-top: 24px;
}

.about-partner-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
}

.about-partner-card {
    display: flex;
    flex-direction: column;
    flex: 0 1 calc((100% - 52px) / 3);
    min-width: 0;
    overflow: hidden;
    background: #0b2852;
    border: 1px solid #3f5e65;
    border-radius: 20px;
    scroll-margin-top: 165px;
}

.about-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    padding: 28px;
    background: #061a33;
    border-bottom: 1px solid #3f5e65;
}

.about-partner-logo--light {
    background: #f5f0dc;
}

.about-partner-logo--white {
    background: #ffffff;
}

.about-partner-logo--black {
    background: #050505;
}

.about-partner-logo--green {
    background: rgb(93, 92, 64);
}

.about-partner-logo img {
    display: block;
    max-width: 100%;
    width: 220px;
    height: 115px;
    object-fit: contain;
}

.about-partner-logo--square img {
    width: 125px;
    height: 125px;
    border-radius: 10px;
}

.about-partner-copy {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px;
}

.about-partner-copy .section-label {
    color: #ffd083;
    font-size: 10px;
    line-height: 1.7;
}

.about-partner-copy h3 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.about-partner-copy > p:not(.section-label) {
    color: var(--muted-text);
    font-size: 14px;
    line-height: 1.8;
}

.about-partner-copy a {
    color: #ffd083;
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
    padding-top: 18px;
    text-underline-offset: 4px;
}

.about-partner-copy a:hover {
    color: #fff1a8;
}

.about-partners a:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

.about-partner-invitation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 50px;
    padding: 35px;
    background: #163b38;
    border-radius: 20px;
}

.about-partner-invitation > div {
    flex: 1 1 400px;
}

.about-partner-invitation h3 {
    font-size: 26px;
    font-weight: 700;
}

.about-partner-invitation p:last-child {
    max-width: 730px;
    margin: 15px 0 0;
    color: var(--muted-text);
    line-height: 1.8;
}

@media (max-width: 1100px) {
    .about-partner-card {
        flex-basis: calc((100% - 26px) / 2);
    }
}

@media (max-width: 650px) {
    .about-partners {
        padding-block: 55px;
    }

    .about-partner-card {
        flex-basis: 100%;
    }

    .about-partner-invitation {
        padding: 25px;
    }

    .about-partners, .about-partner-card {
        scroll-margin-top: 110px;
    }
}

/* Partners section */

.partners-section {
    position: relative;
    z-index: 3;

    padding: 80px 8%;

    color: var(--text-colour);
    background: #04162d;

    border-top: 1px solid rgb(99 141 22 / 20%);
}

/* Heading */

.partners-heading {
    width: min(720px, 100%);
    margin: 0 auto 42px;

    text-align: center;
}

.partners-heading h2 {
    margin: 12px 0 18px;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.1;

    color: var(--text-colour);
}

.partners-heading > p:last-child {
    width: min(620px, 100%);
    margin: 0 auto;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.65;

    color: var(--muted-text);
}

/* Logo strip */

.partner-logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    align-items: center;
    gap: 18px;

    width: min(1250px, 100%);
    margin: 0 auto;
}

/* Individual logo */

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 130px;
    padding: 24px;

    background: linear-gradient(var(--navbar-colour), var(--navbar-colour)) padding-box,
    linear-gradient(145deg, #fff1a8, var(--button-colour), var(--green-light), var(--green-dark)) border-box;

    border: 1px solid transparent;
    border-radius: 18px;
    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 16px 34px rgb(0 0 0 / 24%),
    0 0 16px rgb(99 141 22 / 9%);

    transition: transform 200ms ease,
    box-shadow 200ms ease;
}

.partner-logo:hover,
.partner-logo:focus {
    transform: translateY(-4px);

    box-shadow: 0 22px 42px rgb(0 0 0 / 32%),
    0 0 20px rgb(242 165 26 / 13%);
}

.partner-logo--light {
    background: linear-gradient(135deg, #d9e6f2 0%, #fff1a8 68%, #f2a51a 100%) padding-box,
    linear-gradient(145deg, #fff1a8, var(--button-colour), var(--green-light)) border-box;
}

.partner-logo--dark {
    background: linear-gradient(145deg, #0b2852 0%, #061a33 72%, #04162d 100%) padding-box,
    linear-gradient(145deg, #fff1a8, var(--green-light), var(--green-dark)) border-box;
}

.partner-logo--white {
    background: #ffffff;
}

.partner-logo--black {
    background: #050505;
}

.partner-logo--black-darker {
    background: #000000;
}

.partner-logo--green {
    background: rgb(93, 92, 64);
}

.partner-logo img {
    display: block;

    width: 100%;
    max-width: 185px;
    max-height: 78px;

    object-fit: contain;

    filter: none;
    opacity: 1;

    transition: transform 200ms ease;
}

.partner-logo:hover img,
.partner-logo:focus img {
    transform: scale(1.035);
}

.partner-logo--square img {
    width: 78px;
    height: 78px;
    border-radius: 10px;
}



/* Partner call to action */

.partners-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 42px;
}

.partners-action p {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;

    color: var(--muted-text);
}

.partners-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 12px 22px;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 999px;

    transition: background-color 200ms ease,
    transform 200ms ease;
}

.partners-button:hover,
.partners-button:focus {
    color: var(--background-colour);
    background: #fff1a8;
    transform: translateY(-2px);
}

.partner-logo:focus-visible,
.partners-button:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

/* Tablet */

@media (max-width: 1000px) {
    .partner-logos {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

/* Mobile */

@media (max-width: 650px) {
    .partners-section {
        padding: 65px 24px;
    }

    .partner-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .partner-logo {
        min-height: 110px;
        padding: 18px;
    }

    .partners-action {
        flex-direction: column;
        text-align: center;
    }
}

/* Very small screens */

/* Larger brand showcases keep the supplied artwork readable. */
.partner-logo--featured {
    flex-direction: column;
    gap: 12px;
    min-height: 250px;
    text-align: center;
}

.partner-logo--funky { grid-column: span 2; }
.partner-logo--lifestyle { grid-column: span 3; }
.partner-logo--planet { grid-column: 1 / -1; }

.partner-logo--featured img {
    width: 100%;
    max-width: 420px;
    height: 155px;
    max-height: 155px;
}

.partner-brand-name {
    color: var(--text-colour);
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.partner-brand-link { color: #ffd083; font-size: 13px; }
.partner-logo--lifestyle .partner-brand-name { color: #0b2852; }
.partner-logo--lifestyle .partner-brand-link { color: #764500; }
.partner-logo--planet .partner-brand-name { color: #0b2852; }
.partner-logo--planet .partner-brand-link { color: #356d43; }
.partner-logo--planet img { width: 180px; height: 180px; max-width: 180px; max-height: 180px; border-radius: 50%; }
.about-partner-grid--new { margin-top: 26px; }
.about-partner-grid--new .about-partner-logo { height: 240px; }
.about-partner-logo--funky img { width: 200px; height: 200px; }
.about-partner-logo--lifestyle img { width: 100%; height: auto; max-height: 180px; }
.about-partner-logo--planet img { width: 190px; height: 190px; max-height: 190px; border-radius: 50%; }

@media (max-width: 1000px) {
    .partner-logo--featured { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
    .partner-logos {
        grid-template-columns: 1fr;
    }
}

/* Tablet */

@media (max-width: 1200px) {
    .shiny-navbar {
        width: calc(100% - 40px);
        padding: 16px 22px;
    }

    .navbar-links {
        gap: 12px;
    }

    .navbar-links a {
        font-size: 12px;
    }

    .nav-logo h2 {
        font-size: 10px;
    }
}

@media (max-width: 1000px) {
    .hero,
    .hero-image {
        min-height: 700px;
    }

    .hero-image {
        height: 700px;
        object-position: 60% center;
    }

    .hero-content {
        top: 57%;
        left: 6%;
    }

    .hero-logo {
        width: clamp(180px, 28vw, 290px);
    }

    .bilbo-legacy {
        grid-template-columns: minmax(240px, 42%) minmax(300px, 1fr);
        gap: 44px;
        padding-inline: 6%;
    }

    .gift-feather {
        grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.15fr);
        gap: 44px;
        padding-inline: 6%;
    }

    .gift-feather-body {
        gap: 16px;
    }

    .gift-card {
        min-height: 245px;
        padding: 26px;
    }
}

/* Mobile */

@media (max-width: 768px) {
    .shiny-navbar {
        top: 16px;

        width: calc(100% - 32px);
        padding: 14px 18px;
    }

    .nav-logo-img {
        height: 34px;
    }

    .nav-logo h2 {
        font-size: 10px;
        letter-spacing: 0.15em;
    }

    .hero {
        min-height: 760px;
    }

    .hero-image {
        height: 760px;
        min-height: 760px;

        object-position: 68% center;
    }

    .hero::before {
        height: 300px;
    }

    .hero::after {
        background: linear-gradient(
                180deg,
                rgb(6 26 51 / 10%) 0%,
                rgb(6 26 51 / 35%) 45%,
                rgb(6 26 51 / 85%) 100%
        );
    }

    .hero-content {
        top: auto;
        right: 24px;
        bottom: 65px;
        left: 24px;

        align-items: center;
        gap: 18px;

        width: auto;

        text-align: center;
        transform: none;
    }

    .hero-logo {
        width: min(240px, 70vw);
    }

    .hero-heading {
        font-size: clamp(27px, 8vw, 38px);
    }

    .hero-content p {
        font-size: 16px;
    }

    .hero-actions {
        justify-content: center;
    }

    .home-mission {
        padding: 60px 24px;
    }

    .bilbo-legacy {
        grid-template-columns: 1fr;
        gap: 42px;

        padding: 72px 24px;
    }

    .bilbo-image-wrapper {
        justify-self: center;
        max-width: 440px;
    }

    .bilbo-content {
        align-items: center;
        text-align: center;
    }

    .bilbo-content h2 {
        font-size: clamp(32px, 9vw, 46px);
    }

    .bilbo-content > p:not(.section-label) {
        max-width: 620px;
    }

    .gift-feather {
        grid-template-columns: 1fr;
        gap: 46px;

        padding: 72px 24px;
    }

    .gift-feather-heading {
        align-items: center;
        justify-self: center;

        max-width: 650px;
        text-align: center;
    }

    .gift-feather-actions {
        justify-content: center;
    }

    .gift-feather-body {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }
}

/* Small mobile */

@media (max-width: 480px) {
    .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .hero-button {
        width: 100%;
    }

    .gift-feather-body {
        grid-template-columns: 1fr;
    }

    .gift-card-shelter {
        grid-column: auto;
    }

    .gift-card {
        min-height: auto;
    }

    .gift-feather-actions {
        width: 100%;
        flex-direction: column;
    }

    .gift-feather-button {
        width: 100%;
    }
}

/* Footer */

.site-footer {
    position: relative;
    z-index: 3;

    padding: 76px 8% 28px;

    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);

    background: radial-gradient(circle at 12% 15%, rgb(99 141 22 / 12%), transparent 28%),
    #031226;

    border-top: 1px solid rgb(99 141 22 / 28%);
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(150px, 0.75fr)) minmax(230px, 1fr);
    gap: clamp(38px, 5vw, 80px);

    width: min(1400px, 100%);
    margin: 0 auto;
    padding-bottom: 58px;
}

.footer-brand {
    max-width: 390px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 22px;

    color: var(--text-colour);
    text-decoration: none;
}

.footer-logo:hover,
.footer-logo:focus {
    color: var(--button-colour);
}

.footer-logo img {
    display: block;
    width: auto;
    height: 48px;
}

.footer-logo span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.footer-brand > p {
    margin: 0;

    font-size: 14px;
    line-height: 1.75;

    color: var(--muted-text);
}

.footer-brand .footer-message {
    margin-top: 20px;

    font-weight: 700;
    letter-spacing: 0.04em;

    color: var(--button-colour);
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgb(217 230 242 / 35%);
    border-radius: 50%;
    color: var(--text-colour);
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.footer-socials svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
}

.footer-socials svg rect,
.footer-socials svg circle:not(.footer-social-fill) {
    fill: none;
}

.footer-socials a:hover {
    color: #061a33;
    border-color: var(--button-colour);
    background: var(--button-colour);
    transform: translateY(-2px);
}

.footer-socials a:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-column h2 {
    margin: 0 0 9px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: var(--button-colour);
}

.footer-column > a:not(.footer-contact-button) {
    position: relative;

    font-size: 14px;
    text-decoration: none;

    color: var(--muted-text);

    transition: color 200ms ease,
    transform 200ms ease;
}

.footer-column > a:not(.footer-contact-button):hover,
.footer-column > a:not(.footer-contact-button):focus {
    color: var(--text-colour);
    transform: translateX(4px);
}

.footer-contact p {
    margin: 0 0 10px;

    font-size: 14px;
    line-height: 1.7;

    color: var(--muted-text);
}

.footer-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 12px 22px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 999px;

    transition: background-color 200ms ease,
    transform 200ms ease;
}

.footer-contact-button:hover,
.footer-contact-button:focus {
    color: var(--background-colour);
    background: #fff1a8;
    transform: translateY(-2px);
}

.footer-logo:focus-visible,
.footer-column a:focus-visible,
.footer-contact-button:focus-visible,
.footer-legal a:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    width: min(1400px, 100%);
    margin: 0 auto;
    padding-top: 25px;

    border-top: 1px solid rgb(217 230 242 / 13%);
}

.footer-bottom p {
    margin: 0;

    font-size: 12px;
    color: rgb(217 230 242 / 70%);
}

.footer-credit {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.footer-credit p:last-child {
    font-size: 11px;
}

.footer-credit strong {
    color: var(--text-colour);
    font-weight: 600;
}

.footer-credit a {
    color: rgb(217 230 242 / 82%);
    text-decoration: none;
    text-underline-offset: 3px;
}

.footer-credit a:hover {
    color: var(--button-colour);
    text-decoration: underline;
}

.footer-credit a:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 3px;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-legal a {
    font-size: 12px;
    color: rgb(217 230 242 / 70%);
    text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus {
    color: var(--button-colour);
}

.footer-legal span {
    color: var(--green-light);
}

@media (max-width: 1000px) {
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .site-footer {
        padding: 62px 24px 24px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-bottom: 42px;
    }

    .footer-brand {
        max-width: none;
    }

    .footer-bottom,
    .footer-legal {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

/* =========================================================
   NEWSLETTER INVITATION AND MODAL
   ========================================================= */

.newsletter-invitation {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 58px);

    width: min(1400px, calc(100% - 96px));
    margin: clamp(90px, 10vw, 150px) auto;
    padding: clamp(34px, 5vw, 60px);

    background: linear-gradient(125deg, rgb(11 40 82 / 98%), rgb(13 49 95 / 96%)) padding-box,
    linear-gradient(110deg, #fff1a8, var(--button-colour), var(--green-light), var(--green-dark)) border-box;
    border: 1px solid transparent;
    border-radius: 26px;
    box-shadow: 0 26px 60px rgb(0 0 0 / 28%);
}

.newsletter-invitation::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -130px;
    width: 330px;
    height: 330px;
    border: 55px solid rgb(99 141 22 / 9%);
    border-radius: 50%;
    pointer-events: none;
}

.newsletter-mark {
    position: relative;
    z-index: 1;
    width: clamp(86px, 9vw, 130px);
    height: 90px;
    object-fit: contain;
}

.newsletter-invitation-copy {
    position: relative;
    z-index: 1;
}

.newsletter-invitation-copy h2 {
    margin: 8px 0 10px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(32px, 4vw, 55px);
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-colour);
}

.newsletter-invitation-copy > p:last-child {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted-text);
}

.newsletter-open-button,
.newsletter-submit {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 25px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--background-colour);
    background: var(--button-colour);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease;
}

.newsletter-open-button:hover,
.newsletter-open-button:focus,
.newsletter-submit:hover,
.newsletter-submit:focus {
    color: var(--background-colour);
    background: #fff1a8;
    transform: translateY(-2px);
}

.newsletter-open-button:focus-visible,
.newsletter-submit:focus-visible,
.newsletter-close:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

.newsletter-modal {
    position: relative;
    overflow: visible;
    width: min(440px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 34px;
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: radial-gradient(circle at 92% 4%, rgb(99 141 22 / 18%), transparent 34%),
    linear-gradient(145deg, #0d315f, #061a33);
    border: 1px solid rgb(242 165 26 / 72%);
    border-radius: 22px;
    box-shadow: 0 35px 100px rgb(0 0 0 / 58%);
}

.newsletter-modal::backdrop {
    background: rgb(2 12 25 / 78%);
    backdrop-filter: blur(8px);
}

.newsletter-modal[open] {
    animation: newsletter-enter 220ms ease-out;
}

@keyframes newsletter-enter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

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

.modal-is-open {
    overflow: hidden;
}

.newsletter-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 29px;
    font-weight: 400;
    line-height: 1;
    color: var(--text-colour);
    background: rgb(255 255 255 / 7%);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
    cursor: pointer;
}

.newsletter-close:hover,
.newsletter-close:focus {
    color: var(--button-colour);
    background: rgb(255 255 255 / 11%);
}

.newsletter-modal-brand img {
    display: block;
    width: 72px;
    height: 48px;
    margin-bottom: 14px;
    object-fit: contain;
}

.newsletter-modal-copy h2 {
    margin: 8px 0 9px;
    font-size: clamp(31px, 6vw, 41px);
    font-weight: 700;
    line-height: 1.06;
    color: var(--text-colour);
}

.newsletter-modal-copy > p:last-child {
    margin: 0 0 22px;
    color: var(--muted-text);
}

.newsletter-form {
    display: grid;
    gap: 15px;
}

.newsletter-field {
    display: grid;
    gap: 8px;
}

.newsletter-field label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--text-colour);
}

.newsletter-field input {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--text-colour);
    background: rgb(6 26 51 / 74%);
    border: 1px solid rgb(217 230 242 / 22%);
    border-radius: 12px;
    outline: none;
}

.newsletter-field input::placeholder {
    color: rgb(217 230 242 / 44%);
}

.newsletter-field input:focus {
    border-color: var(--button-colour);
    box-shadow: 0 0 0 3px rgb(242 165 26 / 14%);
}

.newsletter-consent {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 12px;
    cursor: pointer;
}

.newsletter-consent input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--button-colour);
}

.newsletter-consent span {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted-text);
}

.newsletter-submit {
    width: 100%;
    margin-top: 3px;
}

.newsletter-privacy,
.newsletter-status {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
    color: rgb(217 230 242 / 60%);
}

.newsletter-status:not(:empty) {
    padding: 11px;
    color: #fff1a8;
    background: rgb(99 141 22 / 15%);
    border-radius: 9px;
}

.newsletter-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Private administration */
.admin-page {
    width: min(1440px, calc(100% - 64px));
    min-height: 100vh;
    margin-inline: auto;
    padding-block: 155px 90px;
    color: var(--text-colour);
}

.admin-login-page { display: grid; place-items: start center; }
.admin-login-card,
.admin-panel {
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid #355167;
    border-radius: 22px;
    background: #0b2852;
    box-shadow: 0 24px 65px rgb(0 0 0 / 25%);
}
.admin-login-card { width: min(520px, 100%); }
.admin-login-card h1,
.admin-heading h1 { margin: 8px 0 16px; font-size: clamp(40px, 6vw, 72px); }
.admin-login-card form { display: grid; gap: 18px; margin-top: 28px; }
.admin-field { display: grid; gap: 8px; }
.admin-field label,
.admin-send-form > label:first-child { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-field input,
.admin-send-form select {
    width: 100%; min-height: 50px; padding: 12px 14px; color: var(--text-colour);
    background: #061a33; border: 1px solid #526d83; border-radius: 10px;
}
.admin-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 38px; }
.admin-heading p { max-width: 720px; color: var(--muted-text); }
.admin-quiet-button,
.admin-table-button { padding: 9px 13px; color: #ffd083; background: transparent; border: 1px solid #526d83; border-radius: 9px; cursor: pointer; }
.admin-alert { margin-bottom: 24px; padding: 15px 18px; border-left: 4px solid #638d16; background: #153a3c; }
.admin-alert--error { border-color: #ff8a6c; background: #432b32; }
.admin-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-bottom: 28px; }
.admin-summary article { padding: 24px; border: 1px solid #355167; border-radius: 16px; background: #0d2c49; }
.admin-summary span { display: block; margin-bottom: 12px; color: var(--muted-text); font-size: 12px; text-transform: uppercase; }
.admin-summary strong { font-size: clamp(26px, 3vw, 40px); }
.admin-panel { margin-bottom: 28px; }
.admin-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.admin-panel-heading h2 { margin: 4px 0 0; font-size: clamp(28px, 4vw, 44px); }
.admin-status { display: inline-flex; width: max-content; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.admin-status--ready { color: #eaf6d9; background: #355d32; }
.admin-status--warning { color: #fff1d7; background: #70471e; }
.admin-send-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 14px 20px; }
.admin-send-form > label:first-child { grid-column: 1 / -1; }
.admin-confirm { display: flex; gap: 10px; align-items: center; color: var(--muted-text); }
.admin-cancel-form { display: grid; gap: 8px; min-width: 155px; }
.admin-cancel-form label { display: flex; gap: 7px; align-items: center; color: var(--muted-text); font-size: 13px; }
.admin-table-button--danger { border-color: #b86b6b; color: #ffd2d2; }
.admin-table-button:disabled { cursor: not-allowed; opacity: .45; }
.admin-send-form .event-button { width: auto; margin: 0; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { color: #ffd083; font-size: 11px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.admin-table th,
.admin-table td { padding: 14px 12px; border-bottom: 1px solid #29465e; vertical-align: top; }
.admin-table td small { display: block; margin-top: 5px; color: var(--muted-text); }
.admin-table a { color: #ffd083; }
.admin-table code { color: #d9e6f2; overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .admin-page { width: calc(100% - 32px); padding-top: 125px; }
    .admin-heading,
    .admin-panel-heading { align-items: flex-start; flex-direction: column; }
    .admin-summary { grid-template-columns: 1fr; }
    .admin-send-form { grid-template-columns: 1fr; }
    .admin-send-form > label:first-child { grid-column: 1; }
    .admin-send-form .event-button { width: 100%; }
}

@media (max-width: 850px) {
    .newsletter-invitation {
        grid-template-columns: auto 1fr;
        width: calc(100% - 48px);
    }

    .newsletter-open-button {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 580px) {
    .newsletter-invitation {
        grid-template-columns: 1fr;
        width: calc(100% - 40px);
        padding: 32px 26px;
        text-align: center;
    }

    .newsletter-mark {
        margin-inline: auto;
    }

    .newsletter-open-button {
        grid-column: 1;
        justify-self: stretch;
    }

    .newsletter-modal {
        overflow-y: auto;
        padding: 42px 24px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .newsletter-modal[open] {
        animation: none;
    }
}

/* =========================================================
   GALLERY AND STORIES PAGE
   ========================================================= */

.gallery-page {
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: var(--background-colour);
}

.gallery-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: min(880px, 94vh);
    padding: 170px max(48px, 8vw) 105px;
    background: #061a33;
}

.gallery-hero-image,
.gallery-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gallery-hero-image {
    z-index: -2;
    object-fit: cover;
    object-position: 66% 30%;
    filter: saturate(0.94) contrast(1.04);
}

.gallery-hero-overlay {
    z-index: -1;
    background: linear-gradient(90deg, rgb(3 18 37 / 95%) 0%, rgb(6 26 51 / 81%) 42%, rgb(6 26 51 / 18%) 76%),
    linear-gradient(0deg, var(--background-colour) 0%, transparent 24%, rgb(6 26 51 / 18%) 100%);
}

.gallery-hero-copy {
    max-width: 760px;
}

.gallery-hero-copy h1 {
    max-width: 740px;
    margin: 14px 0 26px;
    font-size: clamp(48px, 6.2vw, 96px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: var(--text-colour);
}

.gallery-hero-copy > p:not(.section-label) {
    max-width: 670px;
    margin: 0;
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.75;
    color: var(--muted-text);
}

.gallery-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--button-colour);
}

.gallery-hero-link:hover,
.gallery-hero-link:focus {
    color: #fff1a8;
}

.bilbo-slideshow-section {
    padding: clamp(100px, 11vw, 170px) max(32px, 6vw);
    background: radial-gradient(circle at 92% 10%, rgb(99 141 22 / 14%), transparent 28%),
    var(--background-colour);
}

.gallery-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 62px;
    text-align: center;
}

.gallery-section-heading h2,
.flock-stories h2,
.gallery-closing h2 {
    margin: 13px 0 20px;
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--text-colour);
}

.gallery-section-heading > p:last-child {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted-text);
}

.bilbo-slider {
    position: relative;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.bilbo-slides {
    position: relative;
    min-height: 560px;
    background: linear-gradient(#0b2852, #0b2852) padding-box,
    linear-gradient(135deg, #fff1a8, var(--button-colour), var(--green-light), var(--green-dark)) border-box;
    border: 1px solid transparent;
    border-radius: 28px;
    box-shadow: 0 32px 80px rgb(0 0 0 / 36%);
}

.bilbo-slide {
    visibility: hidden;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.82fr);
    min-height: 560px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease, visibility 320ms ease;
}

.bilbo-slide.is-active {
    visibility: visible;
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.bilbo-slide-image {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    background: #031328;
    border-radius: 27px 0 0 27px;
}

.bilbo-slide-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 72%, rgb(11 40 82 / 50%));
}

.bilbo-slide-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center;
}

.bilbo-slide:nth-child(1) .bilbo-slide-image img {
    object-position: 50% 35%;
}

.bilbo-slide:nth-child(2) .bilbo-slide-image img {
    object-position: 50% 35%;
}

.bilbo-slide:nth-child(3) .bilbo-slide-image img {
    object-position: center 42%;
}

.bilbo-slide:nth-child(4) .bilbo-slide-image img {
    object-position: 59% center;
}

.bilbo-slide:nth-child(5) .bilbo-slide-image img,
.bilbo-slide:nth-child(6) .bilbo-slide-image img {
    object-position: center 34%;
}

.bilbo-slide-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 5vw, 66px);
    background: radial-gradient(circle at 90% 8%, rgb(99 141 22 / 17%), transparent 32%),
    #0b2852;
    border-radius: 0 27px 27px 0;
}

.bilbo-slide-story::after {
    content: "“";
    position: absolute;
    right: 42px;
    bottom: 20px;
    font-family: Georgia, serif;
    font-size: 150px;
    line-height: 1;
    color: rgb(242 165 26 / 7%);
}

.bilbo-slide-number {
    margin: 0 0 34px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--button-colour);
}

.bilbo-slide-number span {
    color: rgb(217 230 242 / 50%);
}

.bilbo-slide-label {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-light);
}

.bilbo-slide-story h3 {
    margin: 0 0 24px;
    font-size: clamp(29px, 3vw, 45px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--text-colour);
}

.bilbo-slide-story > p:last-child {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted-text);
}

.bilbo-slider-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px;
    width: min(560px, 100%);
    margin: 34px auto 0;
}

.bilbo-arrow {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    font-size: 22px;
    color: var(--text-colour);
    background: #0b2852;
    border: 1px solid rgb(99 141 22 / 65%);
    border-radius: 50%;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.bilbo-arrow:hover,
.bilbo-arrow:focus {
    color: var(--background-colour);
    background: var(--button-colour);
    transform: translateY(-2px);
}

.bilbo-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

.bilbo-slider-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    background: rgb(217 230 242 / 34%);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width 180ms ease, background-color 180ms ease;
}

.bilbo-slider-dots button.is-active {
    width: 34px;
    background: var(--button-colour);
}

.bilbo-arrow:focus-visible,
.bilbo-slider-dots button:focus-visible,
.flock-story-card button:focus-visible,
.story-modal-close:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 4px;
}

.flock-stories {
    padding: clamp(100px, 11vw, 165px) max(32px, 6vw);
    background: radial-gradient(circle at 12% 80%, rgb(99 141 22 / 13%), transparent 27%),
    #0b2852;
}

.flock-stories-inner {
    width: min(1400px, 100%);
    margin: 0 auto;
}

.gallery-section-heading--left {
    margin-inline: 0;
    text-align: left;
}

.flock-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.72fr);
    gap: 26px;
}

.flock-story-card {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(280px, 0.84fr) minmax(0, 1fr);
    min-height: 430px;
    background: var(--background-colour);
    border: 1px solid rgb(99 141 22 / 45%);
    border-radius: 24px;
    box-shadow: 0 24px 55px rgb(0 0 0 / 24%);
}

.flock-story-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 34px;
    background: radial-gradient(circle at center, rgb(99 141 22 / 20%), transparent 42%),
    linear-gradient(145deg, #0d315f, #061a33);
    border-right: 1px solid rgb(99 141 22 / 25%);
}

.flock-story-placeholder img {
    width: 140px;
    height: 90px;
    object-fit: contain;
    opacity: 0.8;
}

.flock-story-placeholder span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(217 230 242 / 55%);
}

.flock-story-card-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 4vw, 58px);
}

.flock-story-status {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 16px;
    padding: 7px 11px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--background-colour);
    background: var(--button-colour);
    border-radius: 999px;
}

.flock-story-card-copy h3 {
    margin: 0 0 18px;
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--text-colour);
}

.flock-story-card-copy > p:not(.flock-story-status) {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted-text);
}

.flock-story-card-copy button {
    align-self: flex-start;
    padding: 0 0 7px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--button-colour);
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
}

.flock-story-card-copy button:hover,
.flock-story-card-copy button:focus {
    color: #fff1a8;
}

.flock-story-card--coming-soon {
    display: grid;
    place-items: center;
    min-height: 430px;
    background: linear-gradient(145deg, rgb(6 26 51 / 73%), rgb(36 79 36 / 42%)),
    repeating-linear-gradient(135deg, transparent 0 13px, rgb(255 255 255 / 2%) 13px 14px);
    border-style: dashed;
}

.flock-story-coming-soon {
    max-width: 240px;
    padding: 40px 28px;
    text-align: center;
}

.flock-story-coming-soon span {
    display: block;
    margin-bottom: 20px;
    font-size: 30px;
    color: var(--button-colour);
}

.flock-story-coming-soon p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--muted-text);
}

.gallery-closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(100px, 12vw, 175px) max(24px, 6vw);
    text-align: center;
    background: radial-gradient(circle at 50% 30%, rgb(99 141 22 / 18%), transparent 35%),
    var(--background-colour);
}

.gallery-closing h2 {
    max-width: 930px;
    margin-bottom: 36px;
}

.story-modal {
    width: min(670px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: clamp(38px, 6vw, 62px);
    font-family: "Montserrat", sans-serif;
    color: var(--text-colour);
    background: radial-gradient(circle at 95% 5%, rgb(99 141 22 / 19%), transparent 30%),
    linear-gradient(145deg, #0d315f, #061a33);
    border: 1px solid rgb(242 165 26 / 70%);
    border-radius: 24px;
    box-shadow: 0 38px 100px rgb(0 0 0 / 62%);
}

.story-modal::backdrop {
    background: rgb(2 12 25 / 80%);
    backdrop-filter: blur(8px);
}

.story-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 29px;
    line-height: 1;
    color: var(--text-colour);
    background: rgb(255 255 255 / 7%);
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 50%;
    cursor: pointer;
}

.story-modal-close:hover,
.story-modal-close:focus {
    color: var(--button-colour);
}

.story-modal h2 {
    max-width: 520px;
    margin: 20px 0 14px;
    font-size: clamp(34px, 6vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--text-colour);
}

.story-modal-intro {
    margin: 0 0 30px;
    padding-bottom: 24px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--button-colour);
    border-bottom: 1px solid rgb(217 230 242 / 14%);
}

.story-modal-body {
    display: grid;
    gap: 18px;
}

.story-modal-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted-text);
}

@media (max-width: 1050px) {
    .bilbo-slides,
    .bilbo-slide {
        min-height: 520px;
    }

    .bilbo-slide {
        grid-template-columns: minmax(0, 0.95fr) minmax(330px, 0.85fr);
    }

    .bilbo-slide-image,
    .bilbo-slide-image img {
        min-height: 520px;
    }

    .flock-story-grid {
        grid-template-columns: 1fr;
    }

    .flock-story-card--coming-soon {
        min-height: 260px;
    }
}

@media (max-width: 800px) {
    .gallery-hero {
        min-height: 760px;
        padding: 145px 28px 80px;
    }

    .gallery-hero-image {
        object-position: 58% center;
    }

    .gallery-hero-overlay {
        background: linear-gradient(0deg, rgb(3 18 37 / 98%) 0%, rgb(6 26 51 / 72%) 58%, rgb(6 26 51 / 24%) 100%);
    }

    .bilbo-slides,
    .bilbo-slide {
        min-height: 0;
    }

    .bilbo-slide {
        grid-template-columns: 1fr;
    }

    .bilbo-slide-image {
        min-height: 0;
        height: min(58vh, 500px);
        border-radius: 27px 27px 0 0;
    }

    .bilbo-slide-image img {
        min-height: 0;
        height: 100%;
    }

    .bilbo-slide-image::after {
        background: linear-gradient(0deg, rgb(11 40 82 / 58%), transparent 38%);
    }

    .bilbo-slide-story {
        min-height: 350px;
        border-radius: 0 0 27px 27px;
    }

    .bilbo-slide-number {
        margin-bottom: 24px;
    }

    .flock-story-card {
        grid-template-columns: 1fr;
    }

    .flock-story-placeholder {
        min-height: 280px;
        border-right: 0;
        border-bottom: 1px solid rgb(99 141 22 / 25%);
    }
}

@media (max-width: 520px) {
    .gallery-hero-copy h1 {
        font-size: clamp(43px, 14vw, 64px);
    }

    .bilbo-slideshow-section,
    .flock-stories {
        padding-inline: 20px;
    }

    .gallery-section-heading h2,
    .flock-stories h2,
    .gallery-closing h2 {
        font-size: clamp(34px, 11vw, 49px);
    }

    .bilbo-slide-image {
        height: min(55vh, 420px);
    }

    .bilbo-slide-story {
        min-height: 390px;
        padding: 32px 24px;
    }

    .bilbo-slider-controls {
        gap: 14px;
    }

    .bilbo-arrow {
        width: 46px;
        height: 46px;
    }

    .bilbo-slider-dots {
        gap: 7px;
    }

    .bilbo-slider-dots button {
        width: 7px;
        height: 7px;
    }

    .bilbo-slider-dots button.is-active {
        width: 20px;
    }

    .story-modal {
        overflow-y: auto;
        padding: 50px 24px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bilbo-slide {
        transition: none;
    }
}

/* Keep the newsletter form reachable on short screens. */
.newsletter-modal {
    overflow-y: auto;
}

.newsletter-modal-copy {
    padding-top: 24px;
}

@media (min-width: 851px) {
    .newsletter-invitation {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Ride Joburg event hub */
.ride-joburg-page {
    overflow: hidden;
    padding-bottom: 80px;
    background:
        radial-gradient(circle at 88% 5%, rgb(45 122 91 / 30%), transparent 26%),
        radial-gradient(circle at 8% 30%, rgb(31 84 140 / 25%), transparent 24%),
        var(--background-colour);
    color: var(--text-colour);
    font-family: "Montserrat", sans-serif;
}

.ride-contained {
    width: min(1320px, calc(100% - 96px));
    margin-inline: auto;
}

.ride-joburg-page h1 {
    max-width: 780px;
    margin: 16px 0 24px;
    font-size: clamp(48px, 6.5vw, 92px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .98;
}

.ride-joburg-page h2 {
    margin: 8px 0 18px;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.ride-joburg-page p,
.ride-joburg-page li {
    line-height: 1.75;
}

.ride-joburg-page p:not(.section-label),
.ride-joburg-page li {
    color: var(--muted-text);
}

.ride-joburg-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .65fr);
    gap: clamp(45px, 7vw, 100px);
    align-items: center;
    padding-block: 175px 90px;
}

.ride-back-link {
    display: inline-block;
    margin-bottom: 32px;
    color: #ffd083;
    font-weight: 700;
    text-decoration: none;
}

.ride-back-link:hover,
.ride-package-link:hover {
    color: #fff1a8;
}

.ride-joburg-intro {
    max-width: 760px;
    font-size: clamp(18px, 2vw, 23px);
}

.ride-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-block: 35px;
    border: 1px solid #355167;
    border-radius: 16px;
    background: #355167;
}

.ride-hero-facts div {
    padding: 20px;
    background: #0d2c49;
}

.ride-hero-facts span {
    display: block;
    margin-bottom: 6px;
    color: #ffd083;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ride-hero-facts strong {
    display: block;
    font-size: 14px;
    line-height: 1.5;
}

.ride-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.ride-joburg-poster {
    display: block;
    overflow: hidden;
    border: 1px solid #52705d;
    border-radius: 22px;
    background: #102e49;
    box-shadow: 0 30px 80px rgb(0 0 0 / 32%);
    color: #ffd083;
    text-decoration: none;
    transform: rotate(1.2deg);
    transition: transform .2s ease;
}

.ride-joburg-poster:hover {
    color: #fff1a8;
    transform: rotate(0);
}

.ride-joburg-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.ride-joburg-poster > span {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    font-weight: 700;
}

.ride-story,
.ride-package-section,
.ride-community,
.ride-roster,
.ride-training,
.ride-sponsors,
.ride-joburg-page .event-ride-kit,
.ride-final-cta {
    padding-block: 78px;
    border-top: 1px solid #355167;
    scroll-margin-top: 145px;
}

.ride-story {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(35px, 7vw, 100px);
}

.ride-story-copy {
    font-size: 18px;
}

.ride-story-copy p:first-child {
    margin-top: 0;
}

.ride-section-heading {
    max-width: 810px;
    margin-bottom: 38px;
}

.ride-section-heading > p:not(.section-label) {
    font-size: 17px;
}

.ride-package-grid--feature {
    gap: 24px;
}

.ride-package-grid--feature .ride-package {
    position: relative;
    padding: clamp(28px, 4vw, 46px);
    border-radius: 24px;
}

.ride-package-grid--feature .ride-package--eagle {
    background: linear-gradient(155deg, #11365e, #081f3b 70%);
    box-shadow: 0 22px 60px rgb(0 0 0 / 20%);
}

.ride-package-grid--feature h3 {
    margin: 4px 0 18px;
    color: #fff;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 800;
}

.ride-package-grid--feature h3 span {
    display: block;
    color: var(--muted-text);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ride-package-intro {
    min-height: 60px;
}

.ride-package-grid--feature ul {
    margin-block: 24px 32px;
}

.ride-package-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    padding: 7px 11px;
    border-radius: 20px;
    background: #ffd083;
    color: #061a33;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ride-package-link {
    color: #ffd083;
    font-weight: 800;
    text-underline-offset: 5px;
}

.ride-price-note,
.ride-community-note {
    margin: 28px 0 0;
    padding: 20px 24px;
    border-left: 3px solid var(--button-colour);
    background: rgb(13 44 73 / 70%);
}

.ride-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.ride-spotlight-card {
    display: block;
    overflow: hidden;
    border: 1px solid #426153;
    border-radius: 22px;
    background: #0d2c49;
    color: #ffd083;
    text-decoration: none;
    box-shadow: 0 20px 55px rgb(0 0 0 / 20%);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ride-spotlight-card:hover {
    border-color: #6c9734;
    box-shadow: 0 28px 70px rgb(0 0 0 / 30%);
    color: #fff1a8;
    transform: translateY(-5px);
}

.ride-spotlight-card:focus-visible,
.ride-training-poster:focus-visible {
    outline: 3px solid #ffd083;
    outline-offset: 5px;
}

.ride-spotlight-card img {
    display: block;
    width: 100%;
    height: auto;
}

.ride-spotlight-card > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
}

.ride-spotlight-card strong {
    color: #fff;
    font-size: 17px;
}

.ride-spotlight-card small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ride-guest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ride-guest-grid article {
    min-height: 190px;
    padding: 30px;
    border: 1px solid #355167;
    border-radius: 20px;
    background: linear-gradient(145deg, #102e49, #0a223e);
}

.ride-guest-grid article > span {
    color: #ffd083;
    font-size: 13px;
    font-weight: 800;
}

.ride-guest-grid h3 {
    margin: 28px 0 8px;
    font-size: 22px;
}

.ride-guest-grid p {
    margin: 0;
}

.ride-rider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ride-rider-grid li {
    display: flex;
    min-height: 92px;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid #355167;
    border-radius: 16px;
    background: linear-gradient(145deg, rgb(16 46 73 / 95%), rgb(8 31 59 / 95%));
    transition: border-color .2s ease, transform .2s ease;
}

.ride-rider-grid li:hover {
    border-color: #638d16;
    transform: translateY(-2px);
}

.ride-rider-grid li > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 50%;
    background: #173c3d;
    color: #ffd083;
    font-size: 11px;
    font-weight: 800;
}

.ride-rider-grid strong {
    color: #f7f4ea;
    font-size: 15px;
    line-height: 1.45;
}

.ride-training {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .65fr);
    gap: clamp(38px, 7vw, 90px);
    align-items: center;
}

.ride-training-copy {
    max-width: 720px;
}

.ride-training-poster {
    display: block;
    overflow: hidden;
    border: 1px solid #52705d;
    border-radius: 22px;
    background: #102e49;
    color: #ffd083;
    text-decoration: none;
    box-shadow: 0 24px 65px rgb(0 0 0 / 24%);
}

.ride-training-poster:hover {
    color: #fff1a8;
}

.ride-training-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.ride-training-poster > span {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    font-weight: 700;
}

.ride-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.ride-sponsor-card {
    display: flex;
    min-height: 330px;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgb(0 0 0 / 18%);
    color: #071836;
    text-decoration: none;
    transition: box-shadow .22s ease, transform .22s ease;
}

.ride-sponsor-card:hover {
    box-shadow: 0 24px 60px rgb(0 0 0 / 30%);
    color: #071836;
    transform: translateY(-6px);
}

.ride-sponsor-card:focus-visible {
    outline: 3px solid #ffd083;
    outline-offset: 5px;
}

.ride-sponsor-logo {
    display: grid;
    min-height: 242px;
    flex: 1;
    place-items: center;
    padding: 28px;
}

.ride-sponsor-logo img {
    display: block;
    width: 100%;
    max-width: 235px;
    max-height: 175px;
    object-fit: contain;
}

.ride-sponsor-card--light {
    background: #f8f4ec;
}

.ride-sponsor-card--white {
    background: #fff;
}

.ride-sponsor-card--foundation {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
    min-height: 235px;
    border-color: rgb(99 141 22 / 45%);
    background: linear-gradient(120deg, #fff 0%, #fff 48%, #f1f6e8 100%);
}

.ride-sponsor-card--foundation .ride-sponsor-logo {
    min-height: 235px;
    padding: 30px 48px;
}

.ride-sponsor-card--foundation .ride-sponsor-logo img {
    max-width: 330px;
    max-height: 170px;
}

.ride-sponsor-card--foundation .ride-sponsor-meta {
    min-height: 100%;
    padding-inline: clamp(28px, 5vw, 64px);
    border-top: 0;
    border-left: 1px solid rgb(7 24 54 / 12%);
    background: rgb(255 255 255 / 28%);
}

.ride-sponsor-card--foundation .ride-sponsor-meta strong {
    max-width: 390px;
    font-size: clamp(22px, 3vw, 34px);
}

.ride-sponsor-card--dark {
    background: #050505;
    color: #fff;
}

.ride-sponsor-card--dark:hover {
    color: #fff;
}

.ride-sponsor-card--dark .ride-sponsor-meta {
    border-top-color: rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 7%);
}

.ride-sponsor-card--sunskin .ride-sponsor-logo img {
    width: 180px;
}

.ride-sponsor-card--wide-logo .ride-sponsor-logo img {
    max-width: 290px;
    max-height: 125px;
}

.ride-sponsor-card--schaldor {
    background: rgb(7 24 54);
    color: #fff;
}

.ride-sponsor-card--schaldor:hover {
    color: #fff;
}

.ride-sponsor-card--schaldor .ride-sponsor-logo img {
    max-width: 250px;
    max-height: 110px;
}

.ride-sponsor-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 88px;
    padding: 20px 22px;
    border-top: 1px solid rgb(7 24 54 / 12%);
    background: rgb(255 255 255 / 52%);
}

.ride-sponsor-card--schaldor .ride-sponsor-meta {
    border-top-color: rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 5%);
}

.ride-sponsor-meta strong {
    font-size: 14px;
    line-height: 1.35;
}

.ride-sponsor-meta small {
    flex: 0 0 auto;
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ride-sponsor-meta b {
    color: #638d16;
    font-size: 14px;
}

.ride-joburg-page .event-ride-kit {
    width: min(1320px, calc(100% - 96px));
    margin: 0 auto;
}

.ride-final-cta {
    margin-top: 30px;
    padding-inline: clamp(28px, 5vw, 64px);
    border: 1px solid #52705d;
    border-radius: 24px;
    background: linear-gradient(135deg, #173c3d, #0b2852);
}

.ride-final-cta p:not(.section-label) {
    max-width: 720px;
}

@media (max-width: 900px) {
    .ride-contained,
    .ride-joburg-page .event-ride-kit {
        width: calc(100% - 40px);
    }

    .ride-joburg-hero {
        grid-template-columns: 1fr;
        padding-block: 130px 65px;
    }

    .ride-joburg-poster {
        width: min(100%, 520px);
        margin-inline: auto;
        transform: none;
    }

    .ride-story {
        grid-template-columns: 1fr;
    }

    .ride-training {
        grid-template-columns: 1fr;
    }

    .ride-training-poster {
        width: min(100%, 500px);
        margin-inline: auto;
    }

    .ride-guest-grid {
        grid-template-columns: 1fr;
    }

    .ride-rider-grid,
    .ride-sponsor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ride-guest-grid article {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .ride-joburg-page h1 {
        font-size: clamp(42px, 14vw, 62px);
    }

    .ride-hero-facts {
        grid-template-columns: 1fr;
    }

    .ride-story,
    .ride-package-section,
    .ride-community,
    .ride-roster,
    .ride-training,
    .ride-sponsors,
    .ride-joburg-page .event-ride-kit,
    .ride-final-cta {
        padding-block: 55px;
    }

    .ride-rider-grid,
    .ride-sponsor-grid {
        grid-template-columns: 1fr;
    }

    .ride-sponsor-card--foundation {
        grid-template-columns: 1fr;
    }

    .ride-sponsor-card--foundation .ride-sponsor-logo {
        min-height: 220px;
        padding: 28px;
    }

    .ride-sponsor-card--foundation .ride-sponsor-meta {
        min-height: 96px;
        padding: 20px 22px;
        border-top: 1px solid rgb(7 24 54 / 12%);
        border-left: 0;
    }

    .ride-sponsor-card--foundation .ride-sponsor-meta strong {
        font-size: 18px;
    }

    .ride-spotlight-grid {
        grid-template-columns: 1fr;
    }

    .ride-spotlight-card > span {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .ride-package-badge {
        position: static;
        display: inline-block;
        margin-bottom: 18px;
    }

    .event-date-panel {
        width: min(100%, 480px);
        min-height: 420px;
        margin-inline: auto;
    }
}