/* =========================================================================
   USA Military Rugby — theme overrides on top of the Kester template
   ====================================================================== */

:root {
    --usamr-red:   #c82033;
    --theme-color: #c82033; /* override Kester's brand red everywhere it's used */
    --usamr-navy:  #0b1017;
    --usamr-ink:   #14181f;
    --usamr-line:  rgba(255, 255, 255, .10);
}

/* wider content area — Kester's .container caps at 1330px */
.container { max-width: 1450px; }

/* Square corners everywhere — no rounded corners on any element:
   buttons, cards, popups, badges, labels, inputs, images, thumbnails, icons. */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

html,
body {
    /* the off-canvas slide-bar is parked at right:-100%, which would otherwise
       add a horizontal scrollbar on every viewport */
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background: var(--usamr-navy);
}

.section-gap {
    padding: 90px 0;
}

@media (max-width: 767px) {
    .section-gap { padding: 60px 0; }
}

.is-hidden { display: none !important; }

/* Navigation lists — no bullet points / indent */
.nav__menu,
.nav__menu li,
.side-mobile-menu ul,
.side-mobile-menu ul li,
#mobile-menu-active,
#mobile-menu-active li,
.footer .footer-widget ul,
.footer .footer-widget ul li {
    list-style: none;
}
.nav__menu,
.side-mobile-menu ul,
#mobile-menu-active,
.footer .footer-widget ul {
    margin-left: 0;
    padding-left: 0;
}

/* mobile slide-out menu — centred, larger text, compact spacing */
.side-mobile-menu ul li a {
    text-align: center;
    font-size: 18px;
    padding: 12px 0;
}
/* footer "ESSENTIAL LINKS" bullets are ::before dots, not list markers */
.footer .cata-widget .widget-list-item::before { display: none !important; }
.footer .cata-widget .widget-list-item { padding-left: 0; }
/* two even columns instead of Kester's ragged flex-wrap (max-height:230px);
   order flows down column 1, then column 2 */
.footer .cata-widget {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 22px;
    max-height: none;
    margin: 0;
    padding: 0;
}
/* footer logo — new mark at 180px wide (override Kester's max-height cap) */
.footer .footer-logo img { width: 180px; height: auto; max-height: none; }

/* -------------------------------------------------------------------------
   Anchored sections
   The sticky bar is fixed at the top and stands ~148px tall, so a raw jump to
   #fixtures etc. lands the section heading underneath it. Offset the scroll
   position for every in-page target.
   ---------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

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

/* --usamr-nav-offset is measured from the real header bar at runtime (see
   custom.js); the value here is the fallback if JS has not run yet. */
:root {
    --usamr-nav-offset: 170px;
}

#hero,
#about,
#fixtures,
#team,
#news,
#gallery,
#partners,
#usamr-form,
#main-content {
    scroll-margin-top: var(--usamr-nav-offset);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.rts-header1 .logo img,
.rts-header1 .logo-sticky img,
.offset-logo img {
    max-height: 64px;
    width: auto;
}

.header-donate-btn {
    display: inline-block;
    padding: 12px 26px;
    background: var(--usamr-red);
    color: #fff !important;
    font-family: oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    border-radius: 2px;
    transition: background .25s ease, transform .25s ease;
}

.header-donate-btn:hover {
    background: #fff;
    color: var(--usamr-red) !important;
    transform: translateY(-2px);
}

/* Desktop nav vs. hamburger.
   The template leaves .hamburger-menu visible at every width on header1 (it is
   a second, optional off-canvas trigger in the demo) and never hides .rts-menu,
   because its rtsmenu.js ships empty. Take explicit control of the switch. */
@media (min-width: 1200px) {
    #rtsHeader.rts-header1 .hamburger-menu {
        display: none;
    }

    /* larger, tighter, centred nav — fits the 10 links on one line */
    #rtsHeader .navbar-part .rts-menu .menu-item {
        padding: 45px 15px;
        font-size: 17px;
        letter-spacing: .4px;
    }
    #rtsHeader.rts-header1 .rts-menu {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 1199px) {
    #rtsHeader.rts-header1 .rts-menu {
        display: none;
    }

    #rtsHeader.rts-header1 .hamburger-menu {
        display: block;
        margin-left: auto;                  /* push it to the right edge on mobile */
    }

    /* Donate lives in the slide-out menu at these widths */
    .header-action-items1 { display: none; }
}

/* Inner page banner */
.inner-page-banner.banner-bg {
    background-image: linear-gradient(rgba(6, 9, 14, .4), rgba(6, 9, 14, .62)),
                      url('../img/original-1.2.jpg');
    background-size: cover;
    background-position: center 68%;
    background-repeat: no-repeat;
    isolation: isolate;
}

/* red tint — matches the gallery / about tints (theme red, darken blend) */
.inner-page-banner.banner-bg::before {
    background: var(--theme-color);
    mix-blend-mode: darken;
    opacity: .82;
}

.inner-page-banner .page-path .current-page {
    color: var(--usamr-red);
}

/* banner copy uppercase */
.inner-page-banner .banner-heading,
.inner-page-banner .page-path { text-transform: uppercase; }

/* Coined Players page — squad photo (Matchday #62) behind the banner */
.inner-page-banner.usamr-banner-coins {
    background-image: linear-gradient(rgba(6, 9, 14, .4), rgba(6, 9, 14, .62)),
                      url('../img/gallery/full/game-62.jpg');
    background-position: center 46%;
}
/* Get Involved page — crowd/fans photo (Matchday #66) behind the banner */
.inner-page-banner.usamr-banner-involved {
    background-image: linear-gradient(rgba(6, 9, 14, .4), rgba(6, 9, 14, .62)),
                      url('../img/gallery/full/game-66.jpg');
    background-position: center 30%;
}
/* Fixtures page — match-action photo behind the banner */
.inner-page-banner.usamr-banner-fixtures {
    background-image: linear-gradient(rgba(6, 9, 14, .4), rgba(6, 9, 14, .62)),
                      url('../img/fixtures-banner.jpg');
    background-position: center 40%;
}

/* -------------------------------------------------------------------------
   Hero — video banner
   ---------------------------------------------------------------------- */

.usamr-hero {
    position: relative;
    min-height: clamp(560px, 100vh, 980px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #06090e;
}

@media (max-width: 767px) {
    .usamr-hero { min-height: 100vh; min-height: 100svh; }
}

.usamr-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* keep mix-blend-mode contained to the media stack */
    isolation: isolate;
    overflow: hidden;
}

.usamr-hero-poster,
.usamr-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.usamr-hero-video {
    opacity: 0;
    transition: opacity .8s ease;
}

.usamr-hero-video.is-playing { opacity: 1; }

/* brand colour wash */
.usamr-hero-tint {
    position: absolute;
    inset: 0;
    background: #003976;
    opacity: .5;
    mix-blend-mode: color;
    pointer-events: none;
    transition: opacity .6s ease;
}

.usamr-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 9, 14, .72) 0%, rgba(6, 9, 14, .38) 45%, rgba(6, 9, 14, .88) 100%);
    pointer-events: none;
    transition: opacity .6s ease;
}

/* white brand mark, pinned top-left at 120% of the hero height */
.usamr-hero-mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 120%;
    aspect-ratio: 1100.2 / 871.6;
    background: url('../img/hero-overlay-white.png') no-repeat left top;
    background-size: contain;
    opacity: .12;
    transform: translateX(-40%);
    pointer-events: none;
    transition: opacity .6s ease, transform .8s ease;
}

@media (max-width: 767px) {
    .usamr-hero-mark { height: 90%; }
}

.usamr-hero .container {
    position: relative;
    z-index: 2;
}

/* two columns inside the capped container: copy left, signet right */
.usamr-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 5vw, 80px);
}

/* signet on the right — white @70% by default, colour version fades in on hover */
.usamr-hero-signet {
    position: relative;
    flex: 0 0 auto;
    width: clamp(220px, 30vw, 440px);
    line-height: 0;
    transition: opacity .7s ease, transform .75s cubic-bezier(.4, 0, .2, 1);
}
.usamr-hero-signet img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .85s cubic-bezier(.4, 0, .2, 1);
}
.usamr-hero-signet-white { opacity: .7; }
.usamr-hero-signet-color {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.usamr-hero-signet:hover .usamr-hero-signet-white { opacity: 0; }
.usamr-hero-signet:hover .usamr-hero-signet-color { opacity: 1; }

@media (max-width: 991px) {
    .usamr-hero-signet { width: 240px; }
}
@media (max-width: 767px) {
    .usamr-hero-inner { flex-direction: column; align-items: flex-start; gap: 0; }
    .usamr-hero-signet { display: none; }
}

.usamr-hero-content {
    max-width: 780px;
    padding: 120px 0 90px;
    transition: opacity .5s ease, transform .6s cubic-bezier(.4, 0, .2, 1);
}

.usamr-hero-content .pretitle {
    color: var(--usamr-red);
    font-family: oswald, sans-serif;
    letter-spacing: .22em;
    font-size: 15px;
    font-weight: 600;
    display: block;
    margin-bottom: 18px;
}

.usamr-hero-content .banner-heading {
    font-family: oswald, sans-serif;
    font-size: clamp(40px, 7vw, 86px);
    line-height: 1.02;
    color: #fff;
    margin-bottom: 20px;
}

.usamr-hero-text {
    color: #d5d8dd !important;
    font-size: 18px !important;
    max-width: 620px;
    margin-bottom: 34px;
}

.usamr-hero .banner-btn-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* WATCH VIDEO — same footprint and wipe-away hover as the sibling banner
   buttons; only the colour differs. Kester's variants carry their own
   margin-right, so zero it and let the flex gap space the row evenly. */
.usamr-hero .banner-btn-area .banner-btn {
    margin-right: 0;
}

.banner-content .banner-btn-area .banner-btn.usamr-watch-btn {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--usamr-red);
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    position: relative;
    transform: perspective(1px) translateZ(0);
    transition-property: color;
    transition-duration: .4s;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
}

/* resting fill is the brand red; it wipes away to the deeper tone on hover */
.banner-content .banner-btn-area .banner-btn.usamr-watch-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--usamr-red);
    transform: scaleX(1);
    transform-origin: 50%;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: ease-out;
}

.banner-content .banner-btn-area .banner-btn.usamr-watch-btn:hover::before {
    transform: scaleX(0);
}

/* bare white triangle — no badge, no rounding */
.banner-content .banner-btn-area .banner-btn.usamr-watch-btn i {
    color: #fff;
    font-size: 13px;
}

.usamr-hero-sound {
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 3;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, opacity .4s ease;
}

.usamr-hero-sound.is-available { display: flex; }
.usamr-hero-sound:hover { background: var(--usamr-red); }

/* -------------------------------------------------------------------------
   Hero cinema mode
   Everything slides away, the video plays unmuted, and one square control at
   the foot of the screen brings the hero back.
   ---------------------------------------------------------------------- */

.usamr-cinema-exit {
    position: absolute;
    bottom: 48px;
    left: 50%;
    z-index: 5;
    width: 72px;
    height: 72px;
    border-radius: 0;
    border: none;
    background: var(--usamr-red);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 20px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.4, 0, .2, 1),
                visibility .35s, background .25s ease;
}

.usamr-cinema-exit svg {
    width: 34px;
    height: auto;
    display: block;
}

.usamr-cinema-exit:hover {
    background: #9c1928;
}

body.usamr-cinema .usamr-cinema-exit {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: .35s;
}

/* Scroll-to-top: a square button with the arrow centred inside; a white
   border traces the square's edge as the page scrolls (JS drives dashoffset). */
.scroll-top-btn.scroll-top-btn1 {
    width: 50px;
    height: 50px;
    justify-content: center;         /* centre the arrow (override column-top) */
    background: var(--usamr-red);
}
.scroll-top-btn .arrow-up {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
}
.scroll-top-btn .usamr-scroll-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    overflow: visible;
    z-index: 1;
}
.scroll-top-btn .usamr-scroll-track {
    fill: none;
    stroke: rgba(255, 255, 255, .22);
    stroke-width: 3;
}
.scroll-top-btn .usamr-scroll-bar {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linejoin: miter;          /* crisp square corners */
    stroke-dasharray: 188;           /* rect perimeter; JS refines via getTotalLength */
    stroke-dashoffset: 188;          /* no border at top; JS lowers toward 0 while scrolling */
    transition: stroke-dashoffset .1s linear;
}

/* Header slides up out of the way.
   #rtsHeader itself is 0px tall — its bar (.navbar-part) is absolutely
   positioned at top:40px — so the transform has to go on the bar, otherwise
   translateY(-100%) resolves to 0 and nothing moves. */
#rtsHeader .navbar-part {
    transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}

body.usamr-cinema #rtsHeader .navbar-part {
    /* clear its own height plus the 40px top offset */
    transform: translateY(calc(-100% - 40px));
    opacity: 0;
    pointer-events: none;
}

body.usamr-cinema #rtsHeader {
    pointer-events: none;
}

/* CINEMA ENTER — staggered (ms delays): navbar up → copy slides left →
   signet slides right → tint/scrim clear. Smooth, sequenced, not jumpy. */

/* 1. navbar up is handled above (no delay = first) */

/* 2. copy + buttons slide off to the left */
body.usamr-cinema .usamr-hero-content {
    opacity: 0;
    transform: translateX(-120%);
    pointer-events: none;
    transition-delay: .15s;
}

/* 3. signet slides off to the right — same time as the copy (they part) */
body.usamr-cinema .usamr-hero-signet {
    opacity: 0;
    transform: translateX(130%);
    pointer-events: none;
    transition-delay: .15s;
}

/* 4. overlays clear last so the footage plays clean */
body.usamr-cinema .usamr-hero-tint,
body.usamr-cinema .usamr-hero-overlay {
    opacity: 0;
    pointer-events: none;
    transition-delay: .5s;
}

body.usamr-cinema .usamr-hero-sound {
    opacity: 0;
    pointer-events: none;
}

/* the hero fills the viewport while playing */
body.usamr-cinema .usamr-hero {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    transition: min-height .6s cubic-bezier(.4, 0, .2, 1), height .6s cubic-bezier(.4, 0, .2, 1);
}

body.usamr-cinema {
    overflow: hidden;
}

@media (max-width: 575px) {
    .usamr-cinema-exit {
        bottom: 28px;
        width: 60px;
        height: 60px;
        font-size: 20px;
    }
    .usamr-watch-btn { padding: 13px 22px; font-size: 14px; gap: 12px; }
}

/* -------------------------------------------------------------------------
   Section titles
   ---------------------------------------------------------------------- */

.section-title-area .pretitle {
    color: var(--usamr-red);
    letter-spacing: .2em;
}

.section-title-area .section-title {
    font-family: oswald, sans-serif;
    color: #fff;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   About — light variant, per kester-html/about.html (.rts-about-section.about)
   ---------------------------------------------------------------------- */

.rts-about-section.about.usamr-about {
    background: #fff !important;
}

/* single photo, rendered at its natural aspect ratio */
.rts-about-section.about .about-inner .about-thumb {
    display: block;
}

.rts-about-section.about .about-inner .about-thumb .img1 {
    margin-right: 0;
}

.rts-about-section.about .about-inner .about-thumb .img1 img {
    width: 100%;
    height: auto;
    display: block;
}

/* right padding keeps the copy clear of the photo window (which starts at 50%) */
.rts-about-section.about .about-inner .contents { padding: 0 80px 0 0; }

@media (max-width: 991px) {
    .rts-about-section.about .about-inner .contents { padding: 0; margin-top: 40px; }
}

.rts-about-section.about .about-inner .contents .section-title-area {
    margin-bottom: 30px;
}

.rts-about-section.about .about-inner .contents .section-title-area .section-title {
    color: #111 !important;
    font-family: oswald, sans-serif;
    line-height: 1.05;
    margin-bottom: 22px;
}

/* first line is the eyebrow, per the template's span treatment */
.rts-about-section.about .about-inner .contents .section-title-area .section-title span {
    font-size: 15px;
    letter-spacing: .22em;
    color: var(--usamr-red) !important;
    display: inline-block;
    margin-bottom: 6px;
}

/* =========================================================================
   About — the photo sits in a window on the right of the section; the rest of
   the section reads as white ("covered with white and cropped").
   ====================================================================== */
.usamr-about { position: relative; overflow: hidden; }
.usamr-about .container { position: relative; z-index: 1; }
.usamr-about .contents { position: relative; z-index: 1; }

/* The window is sized directly (rather than clipping a full-bleed layer), so
   `cover` scales the photo to THIS box — the whole line-up reads, instead of
   the section-sized scaling that magnified a single player. */
.usamr-about-media {
    position: absolute;
    top: 7%;
    right: 4%;
    bottom: 7%;
    left: 50%;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* stacked layout: copy on top, photo BELOW it as a band. */
@media (max-width: 991px) {
    .usamr-about-media {
        top: auto;
        bottom: 30px;               /* sits in the section's 330px bottom padding */
        left: 5%;
        right: 5%;
        height: 300px;
        background-position: center center;
    }
    .usamr-about .about-inner { padding-top: 0; padding-bottom: 330px; }
}

.rts-about-section.about .about-inner .contents .section-title-area p {
    color: #5b6068 !important;
    line-height: 1.85;
    margin-bottom: 16px;
    max-width: 100%;
}

/* stat list removed — the CTA follows the copy directly */
.rts-about-section.about .about-inner .contents .more-btn {
    margin-top: 12px;
}

.rts-about-section.about .about-inner .contents .more-btn {
    color: #fff;
}

.rts-about-section.about .about-inner .contents .more-btn:hover {
    color: #fff;
}

/* -------------------------------------------------------------------------
   Fixtures
   ---------------------------------------------------------------------- */

.usamr-fixtures { background: var(--usamr-ink); }
/* Back-to-home button at the end of every subpage (footer.php) */
.usamr-back-home { padding: 60px 0 80px; text-align: center; }
.usamr-back-home .more-btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #fff;                 /* white base revealed on hover (dark section) */
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    position: relative;
    transform: perspective(1px) translateZ(0);
    transition: color .3s;
}
.usamr-back-home .more-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: scaleX(1);
    transform-origin: 50%;
    background: var(--theme-color);
    transition: transform .3s ease-out;
}
.usamr-back-home .more-btn i { margin-right: 8px; }
.usamr-back-home .more-btn:hover { color: #111; }   /* black text on white reveal */
.usamr-back-home .more-btn:hover::before { transform: scaleX(0); }

.usamr-fixtures-more { text-align: center; margin-top: 44px; }
/* Show-all button styled exactly like the About "MEET THE TEAM" button */
.usamr-fixtures-more .more-btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #fff;                 /* white base revealed on hover (dark section) */
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    position: relative;
    transform: perspective(1px) translateZ(0);
    transition: color .3s;
}
.usamr-fixtures-more .more-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: scaleX(1);
    transform-origin: 50%;
    background: var(--theme-color);
    transition: transform .3s ease-out;
}
.usamr-fixtures-more .more-btn:hover { color: #111; }   /* black text on white reveal */
.usamr-fixtures-more .more-btn:hover::before { transform: scaleX(0); }

.usamr-fixtures .top-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 34px;
}

/* Kester's .filter-button-group is display:flex with the default nowrap, so
   button rows (fixtures tabs, coin-list branch filters) run off the side of
   narrow viewports instead of wrapping. */
.filter-button-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
}

.usamr-fixture-tabs .filter-btn {
    font-family: oswald, sans-serif;
    letter-spacing: .1em;
    padding: 12px 26px;
    color: #9aa0a8;
    border: 1px solid var(--usamr-line);
    background: transparent;
    margin: 0 6px 8px;
    border-radius: 2px;
    transition: all .25s ease;
}

.usamr-fixture-tabs .filter-btn.active,
.usamr-fixture-tabs .filter-btn:hover {
    background: var(--usamr-red);
    border-color: var(--usamr-red);
    color: #fff;
}

/* Match cards, per kester-html/match-schedule.html (.match-single).
   The template's GET TICKETS / WATCH STREAM bar is replaced by the
   Recent / Upcoming switch above the list. */
.rts-match-schedule-section.usamr-fixtures {
    margin-bottom: 0;
}

.rts-match-schedule-section.usamr-fixtures .match-single {
    background: #171717;
    border: 1px solid var(--usamr-line);
    border-radius: 3px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    transition: border-color .3s ease;
}

.rts-match-schedule-section.usamr-fixtures .match-single:hover {
    border-color: rgba(228, 27, 35, .5);
}

.rts-match-schedule-section.usamr-fixtures .match-single .match-single-content {
    padding: 40px 30px;
    text-align: center;
    width: 100%;
}

/* scoreline */
.rts-match-schedule-section.usamr-fixtures .match-scores {
    display: grid;
    grid-template-columns: 1fr 170px 1fr;
    align-items: center;
    margin-bottom: 24px;
}

.rts-match-schedule-section.usamr-fixtures .club {
    flex-direction: row;
    min-width: 0;
}

.rts-match-schedule-section.usamr-fixtures .club.club1 { justify-self: end; }
.rts-match-schedule-section.usamr-fixtures .club.club2 { justify-self: start; }

.rts-match-schedule-section.usamr-fixtures .club .club-logo {
    max-width: none;
    display: flex;
    align-items: center;
    gap: 20px;
}

.rts-match-schedule-section.usamr-fixtures .club.club1 .club-logo { justify-content: flex-end; }
.rts-match-schedule-section.usamr-fixtures .club.club2 .club-logo { justify-content: flex-start; }

.rts-match-schedule-section.usamr-fixtures .club .club-logo img {
    height: 62px;
    width: auto;
    flex: 0 0 auto;
    object-fit: contain;
}

.rts-match-schedule-section.usamr-fixtures .club .club-logo .club-name {
    font-family: oswald, sans-serif;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 600;
    color: #fff !important;
    margin: 0;
}

.rts-match-schedule-section.usamr-fixtures .colon {
    font-family: oswald, sans-serif;
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

/* meta block */
.rts-match-schedule-section.usamr-fixtures .block-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rts-match-schedule-section.usamr-fixtures .match-date {
    font-family: oswald, sans-serif;
    font-size: 13px;
    letter-spacing: .14em;
    padding: 5px 14px;
    color: #fff;
    background: var(--usamr-red);
    margin-bottom: 0;
    line-height: 1.5;
}

.rts-match-schedule-section.usamr-fixtures .stadium-name {
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
}

.usamr-competition {
    font-size: 14px;
    color: #9aa0a8;
    letter-spacing: .06em;
}

.rts-match-schedule-section.usamr-fixtures .usamr-result-badge {
    display: inline-block;
    padding: 5px 16px;
    font-family: oswald, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .14em;
    border-radius: 2px;
}

.rts-match-schedule-section.usamr-fixtures .usamr-result-badge.is-win {
    background: #1c7c3c;
    color: #fff;
}

.rts-match-schedule-section.usamr-fixtures .usamr-result-badge.is-loss {
    background: rgba(228, 27, 35, .16);
    border: 1px solid rgba(228, 27, 35, .55);
    color: #ff6b70;
}

.rts-match-schedule-section.usamr-fixtures .usamr-result-badge.is-draw {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* ---- compact ".sm" rows (template: everything on one line) ----
   The meta spans are promoted into the row grid via display:contents so the
   date, venue and result badge sit on fixed tracks in every row. */
.rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    align-items: center;
    justify-content: unset;
    gap: 20px;
    width: 100%;
    padding: 16px 30px;
    text-align: left;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .block-wrap {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 66px;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .match-scores {
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
    align-items: center;
    margin-bottom: 0;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .club .club-logo {
    gap: 14px;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .club .club-logo img {
    height: 40px;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .club .club-logo .club-name {
    font-size: 16px;
    line-height: 1.1;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .colon {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .match-date {
    margin: 0;
    font-size: 11px;
    letter-spacing: .1em;
    padding: 5px 10px;
    white-space: nowrap;
    text-align: center;
    justify-self: stretch;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .stadium-name {
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .usamr-competition {
    font-size: 13px;
    text-align: left;
}

.rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .usamr-result-badge {
    padding: 4px 0;
    font-size: 11px;
    text-align: center;
    justify-self: stretch;
}

@media (max-width: 1199px) {
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content {
        grid-template-columns: minmax(0, 1fr) 390px;
        padding: 16px 22px;
        gap: 16px;
    }
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .block-wrap {
        grid-template-columns: 132px minmax(0, 1fr) 62px;
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .rts-match-schedule-section.usamr-fixtures .match-scores {
        grid-template-columns: 1fr 130px 1fr;
    }

    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 12px;
    }
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .block-wrap {
        grid-template-columns: 120px minmax(0, 1fr) 58px;
        gap: 10px;
    }
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-scores {
        grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    }
    .rts-match-schedule-section.usamr-fixtures .club .club-logo .club-name { font-size: 20px; }
    .rts-match-schedule-section.usamr-fixtures .colon { font-size: 36px; }
    .rts-match-schedule-section.usamr-fixtures .club .club-logo img { height: 52px; }
}

@media (max-width: 767px) {
    .rts-match-schedule-section.usamr-fixtures .match-single .match-single-content { padding: 30px 18px; }

    /* stack the compact rows rather than squeezing them */
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 22px 18px;
        text-align: center;
        justify-items: center;
    }
    /* meta stacks like the feature card rather than running off the edge */
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .block-wrap {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: auto;
        max-width: 100%;
    }

    .rts-match-schedule-section.usamr-fixtures .match-single.sm .stadium-name {
        text-align: center;
        max-width: 100%;
    }
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .match-date,
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .usamr-result-badge {
        justify-self: auto;
        padding: 4px 12px;
    }
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-single-content .stadium-name { text-align: center; }

    .rts-match-schedule-section.usamr-fixtures .match-scores {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* the 991px rule targets .sm with higher specificity, so it has to be
       overridden by name here or the compact scoreline stays 3-up and gets
       clipped by the card at phone widths */
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .match-scores {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rts-match-schedule-section.usamr-fixtures .match-single.sm .club.club1,
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .club.club2 {
        justify-self: center;
    }

    .rts-match-schedule-section.usamr-fixtures .match-single.sm .club .club-logo,
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .club.club1 .club-logo,
    .rts-match-schedule-section.usamr-fixtures .match-single.sm .club.club2 .club-logo {
        justify-content: center;
    }

    .rts-match-schedule-section.usamr-fixtures .match-single.sm .club.club2 .club-logo {
        flex-direction: row-reverse;
    }

    .rts-match-schedule-section.usamr-fixtures .match-single.sm .colon {
        font-size: 30px;
    }
    .rts-match-schedule-section.usamr-fixtures .club.club1,
    .rts-match-schedule-section.usamr-fixtures .club.club2 { justify-self: center; }
    /* stack each club vertically (name over logo), centred, so both sides line up */
    .rts-match-schedule-section.usamr-fixtures .club .club-logo {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-align: center;
    }
    .rts-match-schedule-section.usamr-fixtures .club.club1 .club-logo { flex-direction: column; }
    .rts-match-schedule-section.usamr-fixtures .club.club2 .club-logo { flex-direction: column-reverse; }
    .rts-match-schedule-section.usamr-fixtures .colon { font-size: 34px; }
}

.usamr-empty-state {
    text-align: center;
    padding: 60px 24px;
    border: 1px dashed var(--usamr-line);
    border-radius: 3px;
}

.usamr-empty-state h3 {
    font-family: oswald, sans-serif;
    color: #fff;
    margin-bottom: 12px;
}

.usamr-empty-state p {
    max-width: 520px;
    margin: 0 auto 24px;
}

.btn-1 {
    display: inline-block;
    padding: 13px 28px;
    background: var(--usamr-red);
    color: #fff !important;
    font-family: oswald, sans-serif;
    letter-spacing: .08em;
    border-radius: 2px;
    border: none;
    transition: background .25s ease, transform .25s ease;
}

.btn-1:hover { background: #fff; color: var(--usamr-red) !important; transform: translateY(-2px); }


/* -------------------------------------------------------------------------
   Meet the Team
   ---------------------------------------------------------------------- */

.usamr-team { background: var(--usamr-navy); }

.usamr-team-card {
    cursor: pointer;
    margin-bottom: 30px;
    outline: none;
}

.rts-team-section .team-section-inner .team-wraper.usamr-team-card .player-card {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid var(--usamr-line);
    background: #10151c;
    padding: 0;
    margin-bottom: 0;
}

.rts-team-section .team-section-inner .team-wraper.usamr-team-card .player-card:hover .image {
    transform: none;
}

.usamr-team-card .player-card .image {
    display: block;
    aspect-ratio: 3 / 4;
}

.usamr-team-card .player-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .6s ease;
}

.usamr-team-card:hover .player-card .image img { transform: scale(1.05); }

.usamr-team-hover {
    position: absolute;
    inset: 0;
    padding: 28px 26px;
    background: linear-gradient(180deg, rgba(11, 16, 23, .94), rgba(11, 16, 23, .98));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* min-height:0 lets the bio shrink below its content height so it can scroll */
    min-height: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

/* the panel only takes pointer input once it is actually shown, otherwise it
   would swallow the wheel over a card that is not being hovered */
.usamr-team-card:hover .usamr-team-hover,
.usamr-team-card:focus-visible .usamr-team-hover,
.usamr-team-card:focus .usamr-team-hover {
    pointer-events: auto;
}

.usamr-team-hover-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.usamr-team-card:hover .usamr-team-hover,
.usamr-team-card:focus-visible .usamr-team-hover,
.usamr-team-card:focus .usamr-team-hover {
    opacity: 1;
    transform: translateY(0);
}

.usamr-team-hover h4 {
    font-family: oswald, sans-serif;
    color: #fff;
    font-size: 22px;
    margin-bottom: 4px;
}

.usamr-team-hover-role {
    color: var(--usamr-red) !important;
    font-size: 13px !important;
    letter-spacing: .1em;
    margin-bottom: 14px;
}

/* long bios scroll inside the panel rather than being clipped */
.usamr-team-hover-bio {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--usamr-red) rgba(255, 255, 255, .12);
}

.usamr-team-hover-bio::-webkit-scrollbar {
    width: 5px;
}

.usamr-team-hover-bio::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .12);
    border-radius: 3px;
}

.usamr-team-hover-bio::-webkit-scrollbar-thumb {
    background: var(--usamr-red);
    border-radius: 3px;
}

.usamr-team-hover-bio p:last-child { margin-bottom: 0; }

.usamr-team-hover-bio p {
    font-size: 14px !important;
    line-height: 1.65;
    margin-bottom: 10px;
    color: #c3c7cd !important;
}

.usamr-team-hover-cue {
    display: inline-block;
    flex: 0 0 auto;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-family: oswald, sans-serif;
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--usamr-red);
}

.usamr-team-card .profile {
    padding: 20px 4px 0;
}

.usamr-team-card .profile .position {
    color: var(--usamr-red) !important;
    font-size: 13px !important;
    letter-spacing: .12em;
    margin-bottom: 4px;
}

.usamr-team-card .profile .name {
    display: block;
    font-family: oswald, sans-serif;
    font-size: 24px;
    color: #fff;
}

.usamr-team-rank {
    font-size: 14px !important;
    color: #8a9099 !important;
    margin-top: 4px;
}

/* -------------------------------------------------------------------------
   Modals (team bios + news)
   ---------------------------------------------------------------------- */

.usamr-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.usamr-modal.is-open { display: flex; }

.usamr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 10, .86);
}

.usamr-modal-dialog {
    position: relative;
    width: min(820px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    background: #10151c;
    border: 1px solid var(--usamr-line);
    border-radius: 4px;
    padding: 34px;
}

.usamr-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    background: none;
}

.usamr-modal-close:hover { color: var(--usamr-red); }

.usamr-modal-head {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--usamr-line);
}

.usamr-modal-avatar img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    object-position: center top;
    border-radius: 3px;
}

.usamr-modal-name {
    font-family: oswald, sans-serif;
    color: #fff;
    font-size: 26px;
    margin-bottom: 4px;
}

.usamr-modal-role {
    color: var(--usamr-red) !important;
    letter-spacing: .1em;
    font-size: 13px !important;
}

.usamr-modal-rank {
    color: #8a9099 !important;
    font-size: 14px !important;
}

.usamr-modal-body p {
    margin-bottom: 14px;
    line-height: 1.8;
}

/* -------------------------------------------------------------------------
   News
   ---------------------------------------------------------------------- */

.usamr-news { background: var(--usamr-navy); }

/* Tall photo tiles — the image fills the card and all the UI sits at the
   bottom over a gradient scrim, so every tile is the same height. */
.rts-blog-section.usamr-news .blog-item.usamr-news-item {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    height: auto;
    margin-bottom: 30px;
    border: 1px solid var(--usamr-line);
    border-radius: 3px;
    overflow: hidden;
    background: #10151c;
    cursor: pointer;
    outline: none;
    transition: transform .3s ease, border-color .3s ease;
}

.rts-blog-section.usamr-news .blog-item.usamr-news-item:hover,
.rts-blog-section.usamr-news .blog-item.usamr-news-item:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(228, 27, 35, .55);
}

/* full-bleed image */
.rts-blog-section.usamr-news .usamr-news-item .blog-picture {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    margin: 0;
    overflow: hidden;
}

.rts-blog-section.usamr-news .usamr-news-item .blog-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.rts-blog-section.usamr-news .usamr-news-item:hover .blog-picture img {
    transform: scale(1.05);
}

/* UI pinned to the bottom */
.rts-blog-section.usamr-news .usamr-news-item .contents-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    display: block;
    padding: 28px 24px 22px;
    background: linear-gradient(180deg,
                rgba(6, 9, 14, 0) 0%,
                rgba(6, 9, 14, .55) 35%,
                rgba(6, 9, 14, .94) 100%);
}

.rts-blog-section.usamr-news .usamr-news-item .contents {
    display: block;
    width: 100%;
}

.rts-blog-section.usamr-news .usamr-news-item .blog-catagory {
    display: inline-block;
    background: var(--usamr-red);
    color: #fff;
    font-family: oswald, sans-serif;
    font-size: 11px;
    letter-spacing: .14em;
    padding: 5px 12px;
    border-radius: 2px;
    margin-bottom: 14px;
}

.rts-blog-section.usamr-news .usamr-news-item .blog-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: oswald, sans-serif;
    font-size: 20px;
    line-height: 1.35;
    color: #fff;
    margin-bottom: 18px;
}

.rts-blog-section.usamr-news .usamr-news-item .author-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.rts-blog-section.usamr-news .usamr-news-item .author-info .content { margin: 0; }

.rts-blog-section.usamr-news .usamr-news-item .date {
    color: #c3c7cd;
    font-size: 13px;
}

.usamr-news-more {
    font-family: oswald, sans-serif;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--usamr-red);
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .rts-blog-section.usamr-news .blog-item.usamr-news-item { aspect-ratio: 4 / 5; }
}

@media (max-width: 575px) {
    .rts-blog-section.usamr-news .blog-item.usamr-news-item { aspect-ratio: 4 / 5; }
    .rts-blog-section.usamr-news .usamr-news-item .blog-title { font-size: 18px; }
}

.usamr-modal-head-news {
    align-items: flex-start;
    border-bottom: 1px solid var(--usamr-line);
}

/* article opens on its image */
.usamr-news-modal-dialog {
    padding: 0 0 34px;
    overflow: hidden;
    overflow-y: auto;
}

.usamr-news-modal-media {
    position: relative;
    margin: 0 0 26px;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: #06090e;
}

.usamr-news-modal-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.usamr-news-modal-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(16, 21, 28, 0), rgba(16, 21, 28, .95));
    pointer-events: none;
}

.usamr-news-modal-tag {
    position: absolute;
    left: 34px;
    bottom: 20px;
    z-index: 1;
    background: var(--usamr-red);
    color: #fff;
    font-family: oswald, sans-serif;
    font-size: 11px;
    letter-spacing: .14em;
    padding: 5px 12px;
    border-radius: 2px;
}

.usamr-news-modal-dialog .usamr-modal-head,
.usamr-news-modal-dialog .usamr-modal-body {
    padding-left: 34px;
    padding-right: 34px;
}

.usamr-news-modal-dialog .usamr-modal-close {
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(6, 9, 14, .6);
    line-height: 1;
}

.usamr-news-modal-title {
    font-size: 24px;
    line-height: 1.25;
}

@media (max-width: 575px) {
    .usamr-news-modal-media { aspect-ratio: 4 / 3; margin-bottom: 20px; }
    .usamr-news-modal-tag { left: 20px; }
    .usamr-news-modal-dialog .usamr-modal-head,
    .usamr-news-modal-dialog .usamr-modal-body {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* -------------------------------------------------------------------------
   Gallery
   ---------------------------------------------------------------------- */

.usamr-gallery { background: #14181f; }

/* -------------------------------------------------------------------------
   Galleries (albums) — home tiles + /gallery/ index + single-album subpage
   ---------------------------------------------------------------------- */
.usamr-album-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}
.usamr-album-grid--2 { grid-template-columns: repeat(2, 1fr); }
.usamr-album-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) {
    .usamr-album-grid,
    .usamr-album-grid--2,
    .usamr-album-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .usamr-album-grid,
    .usamr-album-grid--2,
    .usamr-album-grid--3 { grid-template-columns: 1fr; }
}

.usamr-album-item { position: relative; }
.usamr-album-item.is-hidden { display: none !important; }

.usamr-album-link {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #10161f;
}
.usamr-album-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.usamr-album-link:hover img,
.usamr-album-link:focus-visible img { transform: scale(1.06); }

.usamr-album-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
}
.usamr-album-title {
    color: #fff;
    font-family: oswald, sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.1;
}
.usamr-album-count {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    letter-spacing: .04em;
    margin-top: 4px;
}
/* hover icon on album tiles (front page + /gallery/ index) */
.usamr-album-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%) scale(.8);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
}
.usamr-album-icon svg { width: 100%; height: 100%; display: block; }
.usamr-album-link:hover .usamr-album-icon,
.usamr-album-link:focus-visible .usamr-album-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* red tint on hover — matches the gallery photos (var(--theme-color) + darken) */
.usamr-album-link { isolation: isolate; }
.usamr-album-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--theme-color);
    mix-blend-mode: darken;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity .4s ease;
}
.usamr-album-link:hover::before,
.usamr-album-link:focus-visible::before { opacity: .9; }
.usamr-album-overlay { z-index: 2; }
/* optional short description under the tile — renders nothing when empty */
.usamr-album-cardesc {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.6;
    margin: 12px 2px 0;
}

/* single-album subpage (shares the navy .usamr-gallery background) */
.usamr-album-page .usamr-album-desc {
    color: rgba(255, 255, 255, .75);
    max-width: 640px;
    margin: 0 auto;
}
.usamr-album-back { text-align: center; margin-top: 46px; }
.usamr-album-empty { text-align: center; color: rgba(255, 255, 255, .7); }

.usamr-gallery-container {
    max-width: 1720px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

.usamr-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) { .usamr-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .usamr-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.usamr-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.usamr-gallery-item .gallery-image {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
}

.usamr-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.usamr-gallery-item:hover img { transform: scale(1.06); }

.usamr-gallery-item .pop-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 16, 23, .55);
    color: #fff;
    font-size: 22px;
    opacity: 0;
    transition: opacity .3s ease;
}

.usamr-gallery-item:hover .pop-btn { opacity: 1; }

.usamr-gallery-actions {
    text-align: center;
    margin-top: 34px;
}

/* -------------------------------------------------------------------------
   Partners — light sponsors block, per kester-html/about.html
   ---------------------------------------------------------------------- */

.rts-sponsors-section.usamr-partners {
    background: #fff;
    padding-top: 110px;
    overflow: hidden;
}

/* the template's oversized ghost word sits behind the heading.
   The pretitle is absolutely positioned, so it would otherwise paint over the
   static heading — lift the heading instead of pushing the ghost to z-index:-1,
   which would hide it behind this section's white background. */
.rts-sponsors-section.usamr-partners .section-title-area { position: relative; }

.rts-sponsors-section.usamr-partners .section-title-area .pretitle {
    /* line-height 0.155 collapses the box, so the glyphs overflow it evenly —
       keep top near 0 or the letters get clipped by the section's overflow */
    top: -105px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 190px;
    -webkit-text-fill-color: #ededed;
    -webkit-text-stroke-color: #ededed;
    -webkit-text-stroke-width: 0;
    text-shadow: none;
    pointer-events: none;
    /* the base rule parks this at z-index:-1, which puts it behind this
       section's own white background — keep it in flow and lift the heading */
    z-index: 0;
}

.rts-sponsors-section.usamr-partners .section-title-area .section-title,
.rts-sponsors-section.usamr-partners .section-title-area p {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .rts-sponsors-section.usamr-partners .section-title-area .pretitle { font-size: 140px; top: -80px; }
}

@media (max-width: 768px) {
    .rts-sponsors-section.usamr-partners .section-title-area .pretitle { display: none; }
}

.rts-sponsors-section.usamr-partners .section-title-area .section-title {
    color: #111 !important;
}

.rts-sponsors-section.usamr-partners .section-title-area p {
    color: #5b6068 !important;
    max-width: 620px;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Ghost backdrop headline on the dark home sections (mirrors the Partners
   watermark). The pretitle already exists as a giant absolutely-positioned
   word (Kester) but is parked at z-index:-1 behind each section's own dark
   background — lift it into view and fade it to a faint light tint, keeping
   the real heading on top.
   ---------------------------------------------------------------------- */
.usamr-fixtures .section-title-area,
.usamr-team .section-title-area,
.usamr-news .section-title-area,
.usamr-gallery .section-title-area {
    position: relative;
    /* give the tall watermark room above AND below the heading so it isn't
       clipped by the section top or the content underneath (mb--50 is !important) */
    margin-top: 80px;
    margin-bottom: 100px !important;
}

.usamr-fixtures .section-title-area .pretitle,
.usamr-team .section-title-area .pretitle,
.usamr-staff .section-title-area .pretitle,
.usamr-news .section-title-area .pretitle,
.usamr-testimonials .section-title-area .pretitle,
.usamr-gallery .section-title-area .pretitle {
    /* !important overrides Kester's brighter, larger gallery-only pretitle rule
       (.rts-gallery-section .container … #f7f7f7 / 220px) */
    top: -105px !important;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 190px !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.06) !important;
    -webkit-text-stroke-width: 0;
    text-shadow: none;
    pointer-events: none;
    z-index: 0;
}

.usamr-fixtures .section-title-area .section-title,
.usamr-fixtures .section-title-area p,
.usamr-team .section-title-area .section-title,
.usamr-team .section-title-area p,
.usamr-news .section-title-area .section-title,
.usamr-news .section-title-area p,
.usamr-staff .section-title-area .section-title,
.usamr-staff .section-title-area p,
.usamr-testimonials .section-title-area .section-title,
.usamr-testimonials .section-title-area p,
.usamr-gallery .section-title-area .section-title,
.usamr-gallery .section-title-area p {
    position: relative;
    z-index: 1;
    color: #fff;
}

@media (max-width: 991px) {
    /* watermark hidden on tablet/mobile (matches Kester) — drop the headroom too */
    .usamr-fixtures .section-title-area .pretitle,
    .usamr-team .section-title-area .pretitle,
    .usamr-news .section-title-area .pretitle,
    .usamr-staff .section-title-area .pretitle,
    .usamr-testimonials .section-title-area .pretitle,
    .usamr-gallery .section-title-area .pretitle { display: none !important; }
    .usamr-fixtures .section-title-area,
    .usamr-team .section-title-area,
    .usamr-staff .section-title-area,
    .usamr-news .section-title-area,
    .usamr-testimonials .section-title-area,
    .usamr-gallery .section-title-area { margin-top: 0; margin-bottom: 40px !important; }
}

/* Founding partners callout */
.usamr-founding {
    position: relative;
    z-index: 1;
    margin-bottom: 60px;
    padding-bottom: 54px;
    border-bottom: 1px solid #ececec;
}

.rts-sponsors-section.usamr-partners .sponsors-section-inner {
    position: relative;
    z-index: 1;
}

.usamr-founding-title {
    text-align: center;
    margin-bottom: 34px;
}

.usamr-founding-title span {
    display: inline-block;
    font-family: oswald, sans-serif;
    font-size: 13px;
    letter-spacing: .24em;
    color: #fff;
    background: var(--usamr-red);
    padding: 9px 22px;
    border-radius: 2px;
}

.usamr-founding-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    max-width: 820px;
    margin: 0 auto;
}

@media (max-width: 640px) { .usamr-founding-grid { grid-template-columns: 1fr; } }

.rts-sponsors-section.usamr-partners .sponsor-single.usamr-partner-founding {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* founding logos read at full strength; the slider keeps the template's fade */
.rts-sponsors-section.usamr-partners .usamr-partner-founding .sponsors-logo {
    opacity: 1;
}

.rts-sponsors-section.usamr-partners .usamr-partner-founding .sponsors-logo img {
    max-height: 60px;
}

.rts-sponsors-section.usamr-partners .usamr-partner-founding .author {
    margin-top: 0;
}

.rts-sponsors-section.usamr-partners .usamr-partner-founding .club-name {
    display: block;
    font-family: oswald, sans-serif;
    font-size: 15px;
    letter-spacing: .1em;
    color: #111;
    margin-bottom: 0;
}

/* Brand slider */
.rts-sponsors-section.usamr-partners .sponsors-section-inner {
    padding-bottom: 10px;
}

.rts-sponsors-section.usamr-partners .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.rts-sponsors-section.usamr-partners .sponsors-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: 0 10px;
}

.rts-sponsors-section.usamr-partners .sponsors-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.usamr-partner-wordmark {
    font-family: oswald, sans-serif;
    font-size: 19px;
    letter-spacing: .06em;
    color: #111;
    text-align: center;
    line-height: 1.25;
}

/* -------------------------------------------------------------------------
   Coin list page
   ---------------------------------------------------------------------- */

.usamr-coins { background: var(--usamr-navy); }

.usamr-coin-intro { margin-bottom: 46px; }

.usamr-coin-intro .pretitle {
    display: block;
    color: var(--usamr-red);
    font-family: oswald, sans-serif;
    letter-spacing: .2em;
    margin-bottom: 12px;
}

.usamr-coin-intro .section-title {
    font-family: oswald, sans-serif;
    color: #fff;
    font-size: clamp(28px, 4vw, 44px);
    margin-bottom: 18px;
}

.usamr-coin-narrative {
    font-size: 18px;
    line-height: 1.72;
    color: #e7e9ed;
    max-width: 640px;
    margin-bottom: 18px;
}
.usamr-coin-lede {
    font-size: 18px !important;
    color: #d5d8dd !important;
    max-width: 620px;
}

.usamr-coin-count {
    margin-top: 12px;
    color: #8a9099 !important;
}

.usamr-coin-count strong { color: var(--usamr-red); font-size: 22px; }

/* transparent cut-out — no frame, background or radius */
.usamr-coin-image {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}

.usamr-coin-image img {
    width: 100%;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.usamr-coin-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

@media (max-width: 767px) {
    .usamr-coin-tools { gap: 14px; }
    .usamr-coin-search { max-width: none; flex-basis: 100%; }
    .usamr-coin-filters { width: 100%; }
    .usamr-coin-filters .filter-btn { margin: 0 6px 0 0; }
}

.usamr-coin-search {
    flex: 1 1 260px;
    max-width: 340px;
    padding: 13px 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--usamr-line);
    border-radius: 2px;
    color: #fff;
}

.usamr-coin-search::placeholder { color: #767c85; }

.usamr-coin-filters {
    justify-content: flex-start;
}

.usamr-coin-filters .filter-btn {
    font-family: oswald, sans-serif;
    font-size: 13px;
    letter-spacing: .1em;
    padding: 10px 18px;
    margin: 0 4px 6px;
    color: #9aa0a8;
    border: 1px solid var(--usamr-line);
    border-radius: 2px;
    background: transparent;
    transition: all .25s ease;
}

.usamr-coin-filters .filter-btn.active,
.usamr-coin-filters .filter-btn:hover {
    background: var(--usamr-red);
    border-color: var(--usamr-red);
    color: #fff;
}

.usamr-coin-table-wrap { overflow-x: auto; }

.usamr-coin-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    /* Bootstrap paints table cells white by default — hand control back to us */
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    background: transparent;
}

.usamr-coin-table > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
    color: #fff;
}

/* Kester stripes inner point tables light — restore the dark palette */
.rts-point-table-section.inner table.usamr-coin-table tr:nth-child(odd) td {
    background: transparent;
}

.rts-point-table-section.inner table.usamr-coin-table tr.usamr-coin-row:nth-child(even) td {
    background: rgba(255, 255, 255, .03);
}

.usamr-coin-table th,
.usamr-coin-table td {
    border: 1px solid var(--usamr-line);
    padding: 14px 18px;
    vertical-align: middle;
}

.usamr-coin-table .head-tr th {
    font-family: oswald, sans-serif;
    font-size: 13px;
    letter-spacing: .16em;
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.usamr-coin-table .position-number {
    font-family: oswald, sans-serif;
    font-size: 18px;
    color: var(--usamr-red);
}

.usamr-coin-table .player-name {
    font-family: oswald, sans-serif;
    font-size: 17px;
    color: #fff;
    margin: 0;
}

.usamr-branch {
    display: inline-block;
    font-size: 13px;
    letter-spacing: .08em;
    color: #c3c7cd;
    padding: 5px 12px;
    border: 1px solid var(--usamr-line);
    border-radius: 2px;
}

.usamr-coin-row:nth-child(even) { background: rgba(255, 255, 255, .02); }

.usamr-coin-empty {
    text-align: center;
    padding: 40px 0;
}

/* -------------------------------------------------------------------------
   Get Involved page
   ---------------------------------------------------------------------- */

.usamr-get-involved { background: var(--usamr-navy); }

.usamr-get-involved .address-box {
    margin-bottom: 56px;
}

.usamr-get-involved .address {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 26px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--usamr-line);
    border-radius: 3px;
    height: 100%;
    margin-bottom: 20px;
}

.usamr-get-involved .address .icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--usamr-red);
    color: #fff;
    border-radius: 2px;
}

.usamr-get-involved .address .desc,
.usamr-get-involved .address .desc a {
    color: #c3c7cd !important;
    word-break: break-word;
}

.usamr-get-involved .address .desc a:hover { color: var(--usamr-red) !important; }

/* on box hover the background turns red — force the copy + links white so they
   stay legible (otherwise the red link-hover colour vanishes on the red box) */
.usamr-get-involved .address:hover .desc,
.usamr-get-involved .address:hover .desc a,
.usamr-get-involved .address:hover .desc a:hover {
    color: #fff !important;
}

.usamr-get-involved .address .heading {
    font-family: oswald, sans-serif;
    font-size: 16px;
    letter-spacing: .12em;
    color: #fff;
    margin-bottom: 6px;
}

.usamr-involved-copy .pretitle {
    display: block;
    color: var(--usamr-red);
    font-family: oswald, sans-serif;
    letter-spacing: .2em;
    margin-bottom: 12px;
}

.usamr-involved-copy .section-title {
    font-family: oswald, sans-serif;
    color: #fff;
    font-size: clamp(28px, 4vw, 44px);
    margin-bottom: 18px;
}

.usamr-involved-list {
    margin-top: 24px;
}

.usamr-involved-list li {
    color: #c3c7cd;
    padding: 9px 0;
    border-bottom: 1px solid var(--usamr-line);
}

.usamr-involved-list i {
    color: var(--usamr-red);
    margin-right: 10px;
}

.usamr-involved-form {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--usamr-line);
    border-radius: 3px;
    padding: 34px;
}

@media (max-width: 991px) {
    .usamr-involved-form { margin-top: 40px; }
}

.usamr-involved-form .post-title {
    font-family: oswald, sans-serif;
    color: #fff;
    letter-spacing: .1em;
    font-size: 20px;
    margin-bottom: 26px;
}

.usamr-involved-form input[type="text"],
.usamr-involved-form input[type="email"],
.usamr-involved-form input[type="tel"],
.usamr-involved-form select,
.usamr-involved-form textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--usamr-line);
    border-radius: 2px;
    color: #fff;
    font-size: 15px;
}

.usamr-involved-form textarea { resize: vertical; }

.usamr-involved-form ::placeholder { color: #767c85; }

.usamr-involved-form select option { background: #10151c; color: #fff; }

.usamr-involved-form input:focus,
.usamr-involved-form select:focus,
.usamr-involved-form textarea:focus {
    border-color: var(--usamr-red);
    outline: none;
}

/* Kester overrides the message textarea with a near-invisible #1a1a1a border/bg
   (higher specificity) — match it to the other fields so it reads the same. */
.usamr-involved-form .input-box textarea {
    border: 1px solid var(--usamr-line) !important;
    background: rgba(255, 255, 255, .05) !important;
}
.usamr-involved-form .input-box textarea:focus {
    border-color: var(--usamr-red) !important;
}

.form-btn,
.form-btn4 {
    display: inline-block;
    padding: 15px 34px;
    background: var(--usamr-red);
    color: #fff;
    font-family: oswald, sans-serif;
    letter-spacing: .1em;
    border: none;
    border-radius: 2px;
    transition: background .25s ease, transform .25s ease;
}

.form-btn:hover,
.form-btn4:hover { background: #fff; color: var(--usamr-red); transform: translateY(-2px); }

/* SEND MESSAGE — red border on hover (Kester's high-specificity rule needs
   !important; transparent base border avoids a hover size shift) */
.usamr-involved-form .form-btn,
.usamr-involved-form .form-btn4 { border: 1px solid transparent !important; }
.usamr-involved-form .form-btn:hover,
.usamr-involved-form .form-btn4:hover { border-color: var(--usamr-red) !important; }

.usamr-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.usamr-form-notice {
    padding: 22px 26px;
    border-radius: 3px;
    margin-bottom: 24px;
}

.usamr-form-notice h3 {
    font-family: oswald, sans-serif;
    font-size: 19px;
    margin-bottom: 8px;
    color: #fff;
}

.usamr-form-notice.is-success {
    background: rgba(28, 124, 60, .16);
    border: 1px solid rgba(28, 124, 60, .6);
}

.usamr-form-notice.is-error {
    background: rgba(228, 27, 35, .12);
    border: 1px solid rgba(228, 27, 35, .55);
}

.usamr-form-notice ul { margin: 0; padding-left: 18px; }
.usamr-form-notice li { color: #e7c9cb; list-style: disc; }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.footer1 { background: #06090e; }

.footer-logo img { max-height: 74px; width: auto; }

.footer-widget-title {
    font-family: oswald, sans-serif;
    font-size: 16px;
    letter-spacing: .16em;
    color: #fff;
    margin-bottom: 22px;
}

.footer-widget-title .decorator {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--usamr-red);
    vertical-align: middle;
    margin-right: 10px;
}

.footer .widget-list-item a,
.footer .widget-list-item span {
    color: #9aa0a8;
    font-size: 14px;
    letter-spacing: .06em;
}

.footer .widget-list-item { padding: 6px 0; }
.footer .widget-list-item a:hover { color: var(--usamr-red); }
.footer .widget-list-item i { color: var(--usamr-red); margin-right: 10px; }

.footer-disclaimer {
    margin-top: 20px;
    font-size: 12px !important;
    line-height: 1.7;
    color: #6d737b !important;
}

.footer-bottom-area {
    border-top: 1px solid var(--usamr-line);
    padding: 22px 0;
    margin-top: 40px;
}

.bottom-area-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.bottom-area-inner .copyright { color: #6d737b; font-size: 11.7px; }
.bottom-area-inner .copyright .usamr-cormack-logo {
    height: 16px;
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
}

.footer-bottom-links a {
    color: #9aa0a8;
    font-size: 11.7px;
    letter-spacing: .08em;
    margin-left: 20px;
}

.footer-bottom-links a:hover { color: var(--usamr-red); }

@media (max-width: 767px) {
    .footer-bottom-links a { margin: 0 16px 0 0; }
}

/* =========================================================================
   Testimonials — imported from usamilitaryrugby.com, styled to match
   ====================================================================== */
.usamr-testimonials { background: var(--usamr-navy); }

/* carousel shell — arrows sit in the side padding, cards slide in the viewport */
.usamr-testimonials-carousel { position: relative; padding: 0 58px; }
.usamr-tc-viewport { overflow: hidden; padding: 5px 0; }
.usamr-tc-track {
    display: flex;
    gap: 24px;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.usamr-tc-track .usamr-testimonial-card { flex: 0 0 calc((100% - 48px) / 3); }

.usamr-tc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--usamr-line);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 2;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.usamr-tc-arrow:hover { background: var(--usamr-red); border-color: var(--usamr-red); color: #fff; }
.usamr-tc-arrow svg { width: 20px; height: 20px; }
.usamr-tc-prev { left: 0; }
.usamr-tc-next { right: 0; }

.usamr-testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 30px 30px 26px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--usamr-line);
    border-radius: 4px;
    transition: border-color .25s ease, background .25s ease;
}
.usamr-testimonial-card:hover {
    border-color: rgba(200, 32, 51, .55);
    background: rgba(255, 255, 255, .05);
}

.usamr-testimonial-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    line-height: .7;
    color: var(--usamr-red);
    margin-bottom: 10px;
}

.usamr-testimonial-text {
    position: relative;
    flex: 1 1 auto;
    color: rgba(255, 255, 255, .74);
    font-size: 15px;
    line-height: 1.75;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
    overscroll-behavior: contain;      /* stops the page scrolling at either end */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 32, 51, .75) rgba(255, 255, 255, .07);
}

.usamr-testimonial-text:focus-visible {
    outline: 2px solid var(--usamr-red);
    outline-offset: 4px;
}

/* JS adds .is-scrollable when the quote overflows and .is-at-end at the bottom */
.usamr-testimonial-text.is-scrollable:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%);
}

/* WebKit scrollbar — slim, and visible enough to read as scrollable */
.usamr-testimonial-text::-webkit-scrollbar { width: 6px; }
.usamr-testimonial-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .07);
    border-radius: 3px;
}
.usamr-testimonial-text::-webkit-scrollbar-thumb {
    background: rgba(200, 32, 51, .75);
    border-radius: 3px;
}
.usamr-testimonial-text::-webkit-scrollbar-thumb:hover { background: var(--usamr-red); }
.usamr-testimonial-text p { margin: 0 0 12px; }
.usamr-testimonial-text p:last-child { margin-bottom: 0; }

.usamr-testimonial-author {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--usamr-line);
}
.usamr-testimonial-name {
    display: block;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    font-size: 17px;
}
.usamr-testimonial-role {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
}
.usamr-testimonial-more {
    align-self: flex-start;
    margin-top: 16px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--usamr-red);
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 12px;
}
.usamr-testimonial-more::after {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--usamr-red);
    transition: width .25s ease;
}
.usamr-testimonial-more:hover::after { width: 28px; }

/* Testimonial modal — reuses .usamr-modal base; adds role + quote body */
.usamr-testimonial-modal .usamr-modal-name {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    margin: 0;
}
.usamr-testimonial-modal .usamr-modal-role {
    margin: 4px 0 0;
    color: var(--usamr-red);
    font-size: 14px;
    letter-spacing: .02em;
}
.usamr-testimonial-modal-body {
    color: rgba(255, 255, 255, .8);
    font-size: 15.5px;
    line-height: 1.85;
}
.usamr-testimonial-modal-body p { margin: 0 0 16px; }
.usamr-testimonial-modal-body p:last-child { margin-bottom: 0; }
.usamr-testimonial-modal-body strong { color: #fff; }

@media (max-width: 991px) {
    .usamr-testimonial-text { max-height: 168px; }
    .usamr-tc-track .usamr-testimonial-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 575px) {
    .usamr-testimonials-carousel { padding: 0 42px; }
    .usamr-tc-track .usamr-testimonial-card { flex-basis: 100%; }
    .usamr-tc-arrow { width: 40px; height: 40px; }
    .usamr-tc-arrow svg { width: 18px; height: 18px; }
}

/* =========================================================================
   Staff — coaching + support, four per row (photos & bios to follow)
   ====================================================================== */
.usamr-staff { background: var(--usamr-ink); }

.usamr-staff-group { margin-bottom: 52px; }
.usamr-staff-group:last-child { margin-bottom: 0; }

.usamr-staff-group-title {
    text-align: center;
    margin: 0 0 30px;
    position: relative;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 15px;
    font-weight: 600;
    color: #ff5560 !important;   /* brighter red — brand #c82033 is too low-contrast on the ink bg */
}
.usamr-staff-group-title span { color: #ff5560 !important; }
.usamr-staff-group-title::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--usamr-line);
}
.usamr-staff-group-title span {
    position: relative;
    padding: 0 20px;
    background: var(--usamr-ink);
}

.usamr-staff-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;     /* a short final row centres instead of gapping one side */
    gap: 26px;
}

.usamr-staff-card {
    flex: 0 0 calc((100% - 3 * 26px) / 4);   /* 4 per row — both groups match */
    max-width: calc((100% - 3 * 26px) / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.usamr-staff-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--usamr-line);
    margin-bottom: 15px;
}
.usamr-staff-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usamr-staff-photo.is-placeholder svg { width: 48px; height: 48px; fill: rgba(255, 255, 255, .22); }
.usamr-staff-name {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
}
.usamr-staff-role {
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 991px) {
    .usamr-staff-card {
        flex-basis: calc((100% - 2 * 26px) / 3);   /* 3 per row */
        max-width: calc((100% - 2 * 26px) / 3);
    }
}
@media (max-width: 640px) {
    .usamr-staff-grid { gap: 18px; }
    .usamr-staff-card {
        flex-basis: calc((100% - 18px) / 2);       /* 2 per row */
        max-width: calc((100% - 18px) / 2);
    }
}

/* =========================================================================
   Unified button hover — the MEET THE TEAM "fill wipes away" animation.
   Solid CTAs: a red fill sits on a dark base and wipes away on hover.
   ====================================================================== */
.header-donate-btn,
.btn-1,
.form-btn,
.form-btn4 {
    position: relative;
    transform: perspective(1px) translateZ(0);
    background: #fff !important;          /* white base revealed as the fill wipes away (dark sections) */
    color: #fff !important;              /* text on the red fill */
    transition: color .3s ease;
}
.header-donate-btn::before,
.btn-1::before,
.form-btn::before,
.form-btn4::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--usamr-red);        /* resting fill */
    transform: scaleX(1);
    transform-origin: 50%;
    transition: transform .35s ease-out;
}
.header-donate-btn:hover,
.btn-1:hover,
.form-btn:hover,
.form-btn4:hover {
    background: #fff !important;
    color: #111 !important;              /* black text on the white reveal */
    transform: perspective(1px) translateZ(0);   /* no lift */
}
.header-donate-btn:hover::before,
.btn-1:hover::before,
.form-btn:hover::before,
.form-btn4:hover::before { transform: scaleX(0); }


.usamr-match-video {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.usamr-match-video:hover {
    text-decoration: underline;
}


/* =========================================================================
   Staff — members with a bio are clickable and open the shared bio modal.
   ====================================================================== */
.usamr-staff-card.has-bio { cursor: pointer; }
.usamr-staff-card.has-bio .usamr-staff-photo {
    transition: border-color .25s ease, transform .25s ease;
}
.usamr-staff-card.has-bio:hover .usamr-staff-photo,
.usamr-staff-card.has-bio:focus-visible .usamr-staff-photo {
    border-color: var(--usamr-red);
}
.usamr-staff-card.has-bio:focus-visible {
    outline: 2px solid var(--usamr-red);
    outline-offset: 6px;
}
.usamr-staff-cue {
    margin-top: 8px;
    font-family: "Oswald", sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--usamr-red);
    opacity: 0;
    transition: opacity .25s ease;
}
.usamr-staff-card.has-bio:hover .usamr-staff-cue,
.usamr-staff-card.has-bio:focus-visible .usamr-staff-cue { opacity: 1; }

@media (hover: none) {
    .usamr-staff-cue { opacity: 1; }   /* no hover to reveal it on touch */
}

/* =========================================================================
   Results — "watch the match" link on a result that has a video URL.
   ====================================================================== */
.usamr-result-video {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 16px;
    background: var(--usamr-red);
    color: #fff !important;
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: background .2s ease;
}
.usamr-result-video:hover,
.usamr-result-video:focus-visible { background: #a81a2b; color: #fff !important; }
.usamr-result-video svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* =========================================================================
   Penington tribute — sits under the Partners logos, on the same white ground.
   ====================================================================== */
.usamr-penington {
    margin-top: 70px;
    padding-top: 60px;
    border-top: 1px solid #ececec;
}
.usamr-penington-grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    margin-bottom: 46px;
}
.usamr-penington-photo { margin: 0; }
.usamr-penington-photo img { width: 100%; height: auto; display: block; }
.usamr-penington-statement {
    font-family: "Oswald", sans-serif;
    font-size: 23px;
    line-height: 1.5;
    color: #14181f;
    margin: 0;
}
/* full container width, matching the statement/photo row above — no panel
   background or rule, the letter sits straight on the section's white. */
.usamr-penington-letter {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}
.usamr-penington-letter h4 {
    font-family: "Oswald", sans-serif;
    font-size: 19px;
    line-height: 1.35;
    color: #14181f;
    margin: 0 0 22px;
}
.usamr-penington-letter p {
    color: #5b6068;
    line-height: 1.85;
    margin: 0 0 16px;
}
.usamr-penington-sign {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #e3e3e5;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.usamr-penington-sign-name {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 16px;
    color: #14181f;
}
.usamr-penington-sign-role { font-size: 13px; color: #5b6068; }
.usamr-penington-sign-contact {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13px;
    color: #5b6068;
}
.usamr-penington-sign-contact a { color: var(--usamr-red); }

@media (max-width: 991px) {
    .usamr-penington-grid { grid-template-columns: 1fr; gap: 28px; }
    .usamr-penington-statement { font-size: 20px; }
}

/* =========================================================================
   Bio modal — two columns: large portrait left, copy right. Scoped to the
   bio modal so the testimonial and news modals keep their own layout.
   ====================================================================== */
.usamr-bio-modal .usamr-modal-dialog { width: min(1040px, 100%); }

.usamr-bio-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

/* the portrait matches the staff/team thumbnails: 4:5, filled, top-anchored */
.usamr-bio-modal .usamr-modal-avatar {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--usamr-line);
}
.usamr-bio-modal .usamr-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
}
.usamr-modal-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.usamr-modal-avatar-placeholder svg {
    width: 72px;
    height: 72px;
    fill: rgba(255, 255, 255, .22);
}

/* the name block no longer sits beside the photo, so drop the head's flex row */
.usamr-bio-modal .usamr-modal-head {
    display: block;
    padding-bottom: 18px;
    margin-bottom: 20px;
}
.usamr-bio-modal .usamr-modal-name { font-size: 30px; }

@media (max-width: 767px) {
    .usamr-bio-grid { grid-template-columns: 1fr; gap: 24px; }
    .usamr-bio-modal .usamr-modal-avatar { max-width: 220px; }
    .usamr-bio-modal .usamr-modal-name { font-size: 25px; }
}

/* -------------------------------------------------------------------------
   Get Involved form — grouped sections, labels and the photo upload
   ---------------------------------------------------------------------- */

.usamr-involved-form .post-title { margin-bottom: 12px; }

.usamr-form-intro {
    color: #9aa1aa !important;
    font-size: 14px;
    margin-bottom: 34px;
}

.usamr-req { color: var(--usamr-red) !important; }

.usamr-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0; /* fieldsets otherwise refuse to shrink inside a grid row */
}

.usamr-fieldset + .usamr-fieldset { margin-top: 46px; }

.usamr-involved-form .usamr-legend {
    width: 100%;
    float: left; /* legend + border-bottom needs a block box in older engines */
    font-family: oswald, sans-serif;
    font-size: 14px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff !important;
    padding: 0 0 14px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--usamr-line);
}

.usamr-field { margin-bottom: 26px; }

.usamr-involved-form .usamr-field > label {
    display: block;
    font-family: oswald, sans-serif;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #c3c7cd !important;   /* Kester sets a dark label colour further up */
    margin-bottom: 12px;
}

.usamr-field-hint {
    font-size: 12.5px;
    line-height: 1.55;
    color: #8b929b !important;
    margin: 12px 0 0;
}

/* Kester's theme CSS targets .input-box textarea with a near-invisible border;
   our fields sit outside that wrapper, so state them explicitly. */
.usamr-involved-form .usamr-field textarea,
.usamr-involved-form .usamr-field input[type="text"],
.usamr-involved-form .usamr-field input[type="email"],
.usamr-involved-form .usamr-field input[type="tel"],
.usamr-involved-form .usamr-field select {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--usamr-line) !important;
    border-radius: 2px;
    color: #fff;
    font-size: 15px;
}

.usamr-involved-form .usamr-field textarea:focus,
.usamr-involved-form .usamr-field input:focus,
.usamr-involved-form .usamr-field select:focus {
    border-color: var(--usamr-red) !important;
    outline: none;
}

.usamr-involved-form .usamr-field input:invalid:not(:placeholder-shown) {
    border-color: rgba(228, 27, 35, .55) !important;
}

/* --- Photo upload --- */

.usamr-file-field { margin-top: 4px; }

.usamr-file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    border: 1px dashed var(--usamr-line);
    border-radius: 3px;
    background: rgba(255, 255, 255, .02);
}

/* Visually hidden, still keyboard reachable — the label is the visible button */
.usamr-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.usamr-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    margin: 0;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--usamr-line);
    border-radius: 2px;
    color: #fff;
    font-family: oswald, sans-serif;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.usamr-involved-form .usamr-file-btn { color: #fff !important; margin-bottom: 0; }
.usamr-file-btn:hover { background: var(--usamr-red); border-color: var(--usamr-red); }

.usamr-file input[type="file"]:focus-visible + .usamr-file-btn {
    outline: 2px solid var(--usamr-red);
    outline-offset: 2px;
}

.usamr-file-name {
    flex: 1 1 140px;
    min-width: 0;
    color: #9aa1aa;
    font-size: 14px;
    word-break: break-word;
}

.usamr-file-clear {
    padding: 0;
    background: none;
    border: 0;
    color: var(--usamr-red);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.usamr-file-preview { margin-top: 14px; }

.usamr-file-preview img {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: cover;
    border: 1px solid var(--usamr-line);
    border-radius: 3px;
}

.usamr-file-error {
    margin: 10px 0 0;
    padding: 10px 14px;
    font-size: 13px;
    color: #f0d2d4;
    background: rgba(228, 27, 35, .12);
    border: 1px solid rgba(228, 27, 35, .5);
    border-radius: 2px;
}

.usamr-involved-form .form-btn.is-sending,
.usamr-involved-form .form-btn4.is-sending {
    opacity: .65;
    cursor: progress;
}

@media (max-width: 575px) {
    .usamr-involved-form { padding: 24px 20px; }
    .usamr-file { padding: 14px; }
    .usamr-file-btn { width: 100%; justify-content: center; }
}

/* Get Involved — intro row (copy | bullets), form full width beneath */

.usamr-involved-intro { margin-bottom: 8px; }

.usamr-involved-intro .usamr-involved-copy p { max-width: 560px; }

@media (min-width: 992px) {
    .usamr-involved-intro .usamr-involved-list {
        margin-top: 0;
        padding-left: 40px;
    }
    .usamr-form-wrap { margin-top: 46px; }
    /* full-width form: a little more room inside, and a wider gutter between
       the two field columns so they do not read as one run-on block */
    .usamr-involved-form { padding: 42px 46px; }
    .usamr-involved-form .info-form > .usamr-fieldset > .row { --bs-gutter-x: 40px; }
}

@media (max-width: 991px) {
    .usamr-involved-intro .usamr-involved-list { margin-top: 26px; }
    .usamr-form-wrap { margin-top: 34px; }
    .usamr-involved-form { margin-top: 0; }
}

/* Photo box and the submit button share a row — keep them aligned */
.usamr-submit-col {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 20px;
}

@media (min-width: 992px) {
    .usamr-submit-col { justify-content: flex-end; }
}

@media (max-width: 991px) {
    .usamr-submit-col { padding-bottom: 0; }
    .usamr-submit-col .form-btn { width: 100%; text-align: center; }
}
