/*
 * Pacific Multisports company website (the Pages/Company razor pages, served on
 * pacificmultisports.com). Standalone: shares no CSS with the platform chrome, and
 * takes only the Bootstrap grid and utilities the layout already loads.
 *
 * The accent is the same brand blue the race sites use (event-site.css).
 */

:root {
    /* The brand blue is the cyan in the logo wordmark, the same #52b9e9 the platform's own
       chrome uses. The indigo this file started with came from event-site.css, which is a
       generic race-site accent and not Pacific Multisports at all.

       Cyan on white is about 2:1 contrast, nowhere near readable, so there are two:
       --pm-brand is the real brand colour, used on dark grounds and for icons and rules;
       --pm-brand-deep is the darkened version used for link text and solid buttons on
       white, where it clears 4.5:1. */
    --pm-brand: #52b9e9;
    --pm-brand-deep: #1c7ca8;
    --pm-brand-deeper: #15607f;

    /* Dark ground. A neutral ink with a trace of the brand's teal, so the light-cyan
       logo and the white event logos sit on it correctly. */
    --pm-navy: #0f1d26;
    --pm-navy-soft: #16303d;

    /* Kept as aliases so nothing that still names them breaks. */
    --pm-blue: var(--pm-brand-deep);
    --pm-blue-light: var(--pm-brand);

    --pm-ink: #15171f;
    --pm-body: #3c4250;
    --pm-muted: #6c757d;
    --pm-line: #e3e6ea;
    --pm-wash: #f6f7f9;
    --pm-white: #ffffff;
    --pm-radius: 10px;
    --pm-shadow: 0 1px 2px rgba(21, 23, 31, .06), 0 8px 24px rgba(21, 23, 31, .06);
    --pm-shadow-lift: 0 2px 4px rgba(21, 23, 31, .08), 0 16px 40px rgba(21, 23, 31, .12);
}

body.pm-site {
    margin: 0;
    color: var(--pm-body);
    background: var(--pm-white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.pm-site h1, .pm-site h2, .pm-site h3, .pm-site h4 {
    color: var(--pm-ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.pm-site a:not(.pm-btn) { color: var(--pm-blue); text-decoration: none; }
.pm-site a:not(.pm-btn):hover { color: var(--pm-blue-light); text-decoration: underline; }
.pm-site a.pm-btn { text-decoration: none; }

.pm-shell { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }

/* Skip link, so the nav is not a keyboard trap on every page. */
.pm-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--pm-white); color: var(--pm-blue);
    padding: .75rem 1rem; border-radius: 0 0 var(--pm-radius) 0; font-weight: 600;
}
.pm-skip:focus { left: 0; }

/* The pre-launch preview bar (admins only, see CompanySitePageModel). Loud on purpose, so
   nobody mistakes the preview for the public site. */
.pm-preview-bar {
    background: #fff3cd; color: #5c4400; border-bottom: 1px solid #f0d78c;
    padding: .5rem 1.25rem; font-size: .875rem; text-align: center;
}
.pm-site .pm-preview-bar a:not(.pm-btn) { color: #5c4400; text-decoration: underline; font-weight: 600; margin-left: .35rem; }

/* ----------------------------------------------------------------- header */

.pm-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(15, 29, 38, .97);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.pm-header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }

.pm-logo { display: flex; align-items: center; flex: 0 0 auto; }
.pm-logo img { height: 34px; width: auto; display: block; }

.pm-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }

.pm-nav a {
    font-weight: 500; font-size: .9375rem;
    padding: .5rem .7rem; border-radius: 6px;
}
.pm-nav a:not(.pm-btn) { color: rgba(255, 255, 255, .88); }
.pm-nav a:not(.pm-btn):hover { background: rgba(255, 255, 255, .10); color: #fff; text-decoration: none; }
.pm-nav a.is-current:not(.pm-btn) { color: var(--pm-brand); background: rgba(255, 255, 255, .08); }
.pm-nav .pm-cta { margin-left: .5rem; }

/* Services dropdown. Opens on hover and on focus-within, so it works from the keyboard
   without JavaScript. On touch there is no hover: tapping the parent goes to the Services
   page, which lists the same things, so nothing is unreachable. */
.pm-nav-item { position: relative; display: inline-flex; align-items: center; }

.pm-subnav {
    display: none; position: absolute; top: 100%; left: 0; min-width: 240px;
    background: var(--pm-white); border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius); box-shadow: var(--pm-shadow-lift);
    padding: .4rem; z-index: 110;
}
.pm-nav-item:hover .pm-subnav,
.pm-nav-item:focus-within .pm-subnav { display: block; }
/* The dropdown panel is white but it lives inside .pm-nav, whose links were turned white
   for the dark header: without this the items are white on white. Needs to outrank
   `.pm-nav a:not(.pm-btn)` (0,2,1), hence the extra class. */
.pm-nav .pm-subnav a:not(.pm-btn) {
    display: block; white-space: nowrap;
    color: var(--pm-ink); padding: .5rem .7rem;
}
.pm-nav .pm-subnav a:not(.pm-btn):hover { background: var(--pm-wash); color: var(--pm-brand-deep); }
.pm-nav .pm-subnav a.is-current:not(.pm-btn) { color: var(--pm-brand-deep); background: var(--pm-wash); }

.pm-btn {
    display: inline-block; font-weight: 600; text-align: center;
    padding: .6rem 1.15rem; border-radius: 7px; border: 1px solid transparent;
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease;
    cursor: pointer;
}
.pm-btn:hover { text-decoration: none; transform: translateY(-1px); }
.pm-btn-primary { background: var(--pm-blue); border-color: var(--pm-blue); color: #fff; }
.pm-btn-primary:hover { background: var(--pm-blue-light); color: #fff; }
.pm-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.pm-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pm-btn-outline { background: transparent; border-color: var(--pm-line); color: var(--pm-ink); }
.pm-btn-outline:hover { border-color: var(--pm-blue); color: var(--pm-blue); }
.pm-btn-lg { padding: .8rem 1.6rem; font-size: 1.0625rem; }

/* On a dark ground the deep button goes muddy, so there the brand cyan is used at full
   strength with dark text on it: about 9:1, and it is the one place the real brand colour
   can carry a solid fill without failing contrast. */
.pm-btn-brand { background: var(--pm-brand); border-color: var(--pm-brand); color: #0b1a22; }
.pm-site a.pm-btn-brand { color: #0b1a22; }
.pm-btn-brand:hover { background: #76c9ef; border-color: #76c9ef; color: #0b1a22; }
.pm-site a.pm-btn-brand:hover { color: #0b1a22; }

/* Mobile nav: a checkbox toggle, so the site needs no JavaScript to navigate. */
.pm-nav-toggle { display: none; }
.pm-burger { display: none; font-size: 1.4rem; color: #fff; cursor: pointer; padding: .4rem .6rem; }

@media (max-width: 860px) {
    .pm-burger { display: block; margin-left: auto; }
    .pm-nav {
        display: none; width: 100%; order: 3; margin: 0;
        flex-direction: column; align-items: stretch; gap: 0; padding-bottom: .75rem;
    }
    .pm-nav a { padding: .7rem .5rem; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0; }
    .pm-nav .pm-cta { margin: .75rem 0 0; }
    .pm-nav-toggle:checked ~ .pm-nav { display: flex; }
    .pm-header-inner { flex-wrap: wrap; }

    .pm-nav-item { display: block; width: 100%; }
    .pm-subnav {
        display: block; position: static; min-width: 0;
        border: 0; box-shadow: none; padding: 0 0 0 1rem; background: transparent;
    }
    .pm-nav .pm-subnav a:not(.pm-btn) { font-size: .9rem; color: rgba(255, 255, 255, .72); }
    .pm-nav .pm-subnav a:not(.pm-btn):hover { background: rgba(255, 255, 255, .10); color: #fff; }
    .pm-nav-item > a .fa-chevron-down { display: none; }
}

/* ------------------------------------------------------------------- hero */

.pm-hero {
    position: relative; background: var(--pm-navy); color: #fff;
    padding: 5.5rem 0 5rem; overflow: hidden;
}
.pm-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; opacity: .38;
}
.pm-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(15, 29, 38, .93) 0%, rgba(15, 29, 38, .66) 58%, rgba(22, 48, 61, .48) 100%);
}
.pm-hero .pm-shell { position: relative; z-index: 2; }
.pm-hero h1 { color: #fff; font-size: clamp(2.1rem, 5.2vw, 3.4rem); margin: 0 0 1rem; max-width: 20ch; }
.pm-hero p.pm-lede {
    font-size: clamp(1.05rem, 2.1vw, 1.2rem);
    max-width: 58ch; margin: 0 0 2rem; color: rgba(255, 255, 255, .92);
}
.pm-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.pm-eyebrow {
    text-transform: uppercase; letter-spacing: .14em;
    font-size: .78rem; font-weight: 700; color: var(--pm-blue); margin: 0 0 .6rem;
}
.pm-hero .pm-eyebrow { color: rgba(255, 255, 255, .72); }

/* A hero whose background photo is the point (About, Services): the default hero dims its
   photo to 38% under a heavy gradient, which buries the people in it. Here the photo runs
   near full strength and only the text side is darkened. */
.pm-hero-photo .pm-hero-bg { opacity: .9; }
.pm-hero-photo::after {
    background: linear-gradient(100deg, rgba(15, 29, 38, .9) 0%, rgba(15, 29, 38, .62) 48%, rgba(15, 29, 38, .12) 100%);
}

/* Home hero: copy on the left, three photos on the right. No background photo, so the
   mosaic is the only imagery and nothing competes with the faces in it. */
.pm-hero-split { padding: 4.5rem 0 4.75rem; }
.pm-hero-split::after {
    background: radial-gradient(ellipse at 85% 20%, rgba(82, 185, 233, .18), transparent 60%);
}
.pm-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem; align-items: center;
}
.pm-hero-split h1 { max-width: 14ch; }
.pm-mosaic {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr 1fr;
    gap: .75rem; height: 470px;
}
.pm-mosaic > :first-child { grid-column: 1 / -1; }
/* Four photos: one wide on top, three below. The count class comes from the page, so a
   client dropping off (three left) falls back to the two-column layout above. */
.pm-mosaic.pm-mosaic-4 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1.2fr 1fr; }
.pm-mosaic-4 .pm-next { display: none; }
.pm-mosaic-4 > :not(:first-child) .pm-cap { font-size: .7rem; }

@media (max-width: 960px) {
    .pm-hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .pm-mosaic { height: 380px; }
}
@media (max-width: 520px) {
    .pm-mosaic { height: 300px; gap: .5rem; }
}

/* ----------------------------------------------------------------- photos */

/* A captioned photo that fills whatever cell it sits in. The caption names the event, in
   a small pill over the bottom-left corner so it never pushes the layout around. */
.pm-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--pm-radius); background: var(--pm-navy-soft); }
.pm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-photo figcaption, .pm-photo .pm-cap {
    position: absolute; left: .6rem; bottom: .6rem; max-width: calc(100% - 1.2rem);
    font-size: .75rem; font-weight: 600; line-height: 1.3; color: #fff;
    background: rgba(15, 29, 38, .72); padding: .25rem .55rem; border-radius: 999px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The next date of a customer's race, as its own badge so it never truncates the caption. */
.pm-next {
    position: absolute; top: .6rem; right: .6rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #0b1a22; background: var(--pm-brand); padding: .2rem .55rem; border-radius: 999px;
}

/* A customer's photo links to their race: a slow zoom and a brand-coloured caption say so. */
a.pm-photo-link { display: block; }
a.pm-photo-link img { transition: transform .5s ease; }
a.pm-photo-link:hover img { transform: scale(1.04); }
.pm-site a.pm-photo-link:hover { text-decoration: none; }
a.pm-photo-link:hover .pm-cap, a.pm-photo-link:focus-visible .pm-cap { background: var(--pm-brand); color: #0b1a22; }

.pm-credit {
    position: absolute; right: .6rem; bottom: .6rem;
    font-size: .7rem; color: rgba(255, 255, 255, .9);
    background: rgba(15, 29, 38, .6); padding: .15rem .5rem; border-radius: 999px;
}

/* The photo wall. Four columns; the first two photos span two columns and the third spans
   two rows, which with nine photos fills three rows exactly. "dense" back-fills any gap if
   the list in CompanySiteAssets.PeopleWall changes length. */
.pm-wall {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px;
    grid-auto-flow: dense; gap: .75rem;
}
.pm-wall .pm-photo:nth-child(1), .pm-wall .pm-photo:nth-child(2) { grid-column: span 2; }
.pm-wall .pm-photo:nth-child(3) { grid-row: span 2; }
@media (max-width: 860px) {
    .pm-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: .5rem; }
}
@media (max-width: 520px) {
    .pm-wall { grid-auto-rows: 140px; }
}

/* ----------------------------------------------------------- our own races */

.pm-own-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.pm-own {
    background: var(--pm-white); border: 1px solid var(--pm-line); border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow); overflow: hidden; display: flex; flex-direction: column;
}
.pm-own-photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.pm-own-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pm-own:hover .pm-own-photo img { transform: scale(1.03); }
.pm-own-body { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.pm-own-body h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.pm-own-body h3 a:not(.pm-btn) { color: var(--pm-ink); }
.pm-own-body p { margin: 0 0 1rem; }
.pm-own-body .pm-card-more { margin-top: auto; font-weight: 600; }
.pm-own-body .pm-own-when {
    font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--pm-brand-deep); margin: 0 0 .4rem;
}
.pm-own-note { margin: 1.75rem 0 0; color: var(--pm-muted); }

/* ------------------------------------------------------- rooted in Bellingham */

.pm-place { position: relative; overflow: hidden; background: var(--pm-navy); color: #fff; padding: 5rem 0 4.5rem; }
.pm-place-bg { position: absolute; inset: 0; background-size: cover; background-position: center 60%; }
.pm-place::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 29, 38, .55) 0%, rgba(15, 29, 38, .35) 40%, rgba(15, 29, 38, .88) 100%);
}
.pm-place .pm-shell { position: relative; z-index: 2; }
.pm-place-copy { max-width: 56ch; margin-bottom: 2.75rem; }
.pm-place-copy h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .7rem; }
.pm-place-copy p { margin: 0; font-size: 1.125rem; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.pm-place .pm-eyebrow { color: rgba(255, 255, 255, .8); }
.pm-place-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.pm-place-strip .pm-photo { aspect-ratio: 4 / 3; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
@media (max-width: 720px) {
    .pm-place-strip { grid-template-columns: 1fr 1fr; }
}

/* With four columns of copy over it, the communities photo needs a heavier scrim than
   the old two-line band did. */
#communities::after {
    background: linear-gradient(180deg, rgba(15, 29, 38, .78) 0%, rgba(15, 29, 38, .7) 45%, rgba(15, 29, 38, .92) 100%);
}

/* The four ways we support a community, as plain white-on-photo blocks. */
.pm-community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; margin-bottom: 2.75rem; }
.pm-community-grid i { color: var(--pm-brand); font-size: 1.35rem; margin-bottom: .75rem; display: block; }
.pm-community-grid h3 { color: #fff; font-size: 1.0625rem; margin: 0 0 .45rem; }
.pm-community-grid p { margin: 0; font-size: .9375rem; color: rgba(255, 255, 255, .86); }
@media (max-width: 960px) { .pm-community-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pm-community-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ------------------------------------------------------------ split section */

/* Photo on one side, copy on the other (How we support racers). */
.pm-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: start; }
.pm-split-media { position: relative; padding-bottom: 3rem; }
.pm-split-media > .pm-photo { aspect-ratio: 4 / 5; box-shadow: var(--pm-shadow-lift); }
.pm-split-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 .8rem; }
.pm-split-lede { font-size: 1.0625rem; color: var(--pm-muted); margin: 0 0 2rem; max-width: 60ch; }
@media (max-width: 960px) {
    .pm-split { grid-template-columns: 1fr; gap: 2rem; }
    /* Heading and copy first on a phone; the photo and quote follow them. */
    .pm-split-media { order: 2; }
    .pm-split-media > .pm-photo { aspect-ratio: 16 / 10; }
}

.pm-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.pm-points li { display: flex; gap: 1rem; align-items: flex-start; }
.pm-points .pm-card-icon { flex: 0 0 46px; margin: 0; }
.pm-points h3 { font-size: 1.0625rem; margin: .1rem 0 .3rem; }
.pm-points p { margin: 0; font-size: .9375rem; }
@media (max-width: 640px) { .pm-points { grid-template-columns: 1fr; } }

/* A customer's words over the corner of a photo, or on a dark band. */
.pm-pull {
    position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0; margin: 0;
    background: var(--pm-white); border-left: 3px solid var(--pm-brand);
    border-radius: var(--pm-radius); padding: 1.1rem 1.25rem; box-shadow: var(--pm-shadow-lift);
}
.pm-pull p { margin: 0 0 .5rem; font-size: .9875rem; color: var(--pm-ink); }
.pm-pull cite { font-style: normal; font-size: .8125rem; color: var(--pm-muted); }
.pm-pull-dark {
    position: static; margin: 2.5rem 0 0; max-width: 62ch;
    background: rgba(15, 29, 38, .6); box-shadow: none; backdrop-filter: blur(4px);
}
.pm-pull-dark p { color: #fff; font-size: 1.0625rem; }
.pm-pull-dark cite { color: rgba(255, 255, 255, .75); }
@media (max-width: 960px) {
    .pm-split-media .pm-pull { position: relative; z-index: 1; margin: -2rem 1rem 0; }
    .pm-split-media { padding-bottom: 0; }
}

/* About page pillars: a photo over each of Community, Competition, Connection. */
.pm-pillar .pm-photo { aspect-ratio: 4 / 3; margin-bottom: 1.1rem; }
.pm-pillar h3 { margin: 0 0 .5rem; }
.pm-pillar p { color: var(--pm-muted); margin: 0; }

.pm-aside-photo { aspect-ratio: 3 / 2; margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------ store */

/* The store teaser on the home page: a quiet band, not an ad (Marc: not "in your face"). */
.pm-store {
    display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
    border: 1px solid var(--pm-line); border-radius: var(--pm-radius);
    padding: 1.75rem 2rem; background: var(--pm-white); box-shadow: var(--pm-shadow);
}
.pm-store-icon {
    flex: 0 0 64px; height: 64px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(82, 185, 233, .16); color: var(--pm-brand-deep); font-size: 1.6rem;
}
.pm-store-copy { flex: 1 1 320px; }
.pm-store-copy h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .35rem; }
.pm-store-copy .pm-eyebrow .pm-badge { margin-left: .5rem; letter-spacing: .07em; }
.pm-store-lede { margin: 0 0 .25rem; font-size: 1.0625rem; color: var(--pm-ink); }
.pm-store-note { margin: 0; color: var(--pm-muted); font-size: .9375rem; }

/* --------------------------------------------------------- organizer band */

.pm-organizer-band {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    background: var(--pm-navy); color: rgba(255, 255, 255, .88);
    border-radius: var(--pm-radius); padding: 2rem 2.25rem;
}
.pm-organizer-band h2 { color: #fff; margin: 0 0 .35rem; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.pm-organizer-band p { margin: 0; max-width: 56ch; }

/* ------------------------------------------------------- work with us page */

.pm-services-two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.pm-service h3 { font-size: 1.35rem; }
.pm-checks { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.pm-checks li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: var(--pm-ink); }
.pm-checks li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: .1rem; color: var(--pm-brand-deep); font-size: .85rem;
}
.pm-step h3 { font-size: 1.125rem; margin: .75rem 0 .4rem; }
.pm-step p { margin: 0; color: var(--pm-body); }
.pm-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--pm-brand-deep); color: #fff; font-weight: 700;
}

/* Big, complicated races (Ski to Sea): copy beside three stat tiles. */
.pm-bigrace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.pm-bigrace-copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 .75rem; }
.pm-bigrace-copy p:not(.pm-eyebrow) { margin: 0; color: rgba(255, 255, 255, .82); font-size: 1.0625rem; max-width: 58ch; }
.pm-section-dark .pm-eyebrow { color: var(--pm-brand); }
.pm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pm-stat {
    display: flex; flex-direction: column; gap: .35rem;
    background: rgba(255, 255, 255, .06); border-top: 3px solid var(--pm-brand);
    border-radius: var(--pm-radius); padding: 1.25rem 1rem;
}
.pm-stat-num { color: #fff; font-size: clamp(1.45rem, 2.6vw, 2.05rem); font-weight: 800; line-height: 1; white-space: nowrap; }
.pm-stat-label { color: rgba(255, 255, 255, .72); font-size: .875rem; line-height: 1.3; }
@media (max-width: 860px) { .pm-bigrace { grid-template-columns: 1fr; gap: 1.75rem; } }
@media (max-width: 420px) { .pm-stats { gap: .6rem; } .pm-stat { padding: 1rem .75rem; } }

/* --------------------------------------------------- about: why we're here */

.pm-meet { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 2.5rem; align-items: center; max-width: 1000px; }
.pm-meet-photo { aspect-ratio: 4 / 5; }
.pm-meet h2 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.pm-meet p { margin: 0 0 1rem; }
.pm-meet .pm-meet-thanks { color: var(--pm-muted); font-style: italic; }
.pm-meet-quote { margin: 0 0 1.25rem; padding: .25rem 0 .25rem 1.1rem; border-left: 3px solid var(--pm-brand); }
.pm-meet-quote p { margin: 0 0 .3rem; font-size: 1.125rem; color: var(--pm-ink); }
.pm-meet-quote cite { font-style: normal; font-size: .875rem; color: var(--pm-muted); }
@media (max-width: 720px) {
    .pm-meet { grid-template-columns: 1fr; gap: 1.5rem; }
    .pm-meet-photo { max-width: 260px; }
}

/* Interior page banner. */
.pm-pagehead { background: var(--pm-navy); color: #fff; padding: 3rem 0 2.6rem; }
.pm-pagehead h1 { color: #fff; margin: 0 0 .4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.pm-pagehead p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 62ch; }

/* --------------------------------------------------------------- sections */

.pm-section { padding: 4.5rem 0; }
.pm-section-wash { background: var(--pm-wash); }
.pm-section-dark { background: var(--pm-navy); }
.pm-section-dark h2 { color: #fff; }
.pm-section-dark .pm-section-head p { color: rgba(255, 255, 255, .72); }
.pm-section-head { max-width: 62ch; margin-bottom: 2.5rem; }
.pm-section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 .6rem; }
.pm-section-head p { margin: 0; color: var(--pm-muted); font-size: 1.0625rem; }

.pm-grid { display: grid; gap: 1.25rem; }
.pm-grid-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.pm-grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ------------------------------------------------------------ service card */

.pm-card {
    background: var(--pm-white); border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius); padding: 1.6rem;
    box-shadow: var(--pm-shadow); display: flex; flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
a.pm-card:hover {
    box-shadow: var(--pm-shadow-lift); transform: translateY(-2px);
    border-color: #cfd4dc; text-decoration: none;
}
.pm-card h3 { font-size: 1.1875rem; margin: 0 0 .5rem; }
.pm-card p { margin: 0 0 1rem; color: var(--pm-body); font-size: .9875rem; }
.pm-card .pm-card-more { margin-top: auto; font-weight: 600; color: var(--pm-blue); font-size: .9375rem; }

.pm-card-icon {
    width: 46px; height: 46px; border-radius: 9px;
    background: rgba(82, 185, 233, .16); color: var(--pm-brand-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; margin-bottom: 1.1rem;
}

/* A service that is advertised but not switched on yet. */
.pm-card.is-inactive { background: var(--pm-wash); box-shadow: none; }
.pm-card.is-inactive .pm-card-icon { background: rgba(108, 117, 125, .12); color: var(--pm-muted); }
.pm-card.is-inactive h3 { color: var(--pm-muted); }

.pm-badge {
    display: inline-block; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    padding: .2rem .5rem; border-radius: 999px;
    background: #fff3cd; color: #7a5b00; border: 1px solid #f3e0a3;
    margin-left: .5rem; vertical-align: middle;
}

/* ------------------------------------------------------------ event strip */

.pm-event {
    display: flex; align-items: center; gap: 1rem;
    background: var(--pm-white); border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius); padding: 1rem 1.15rem; box-shadow: var(--pm-shadow);
}
a.pm-event:hover { box-shadow: var(--pm-shadow-lift); text-decoration: none; }
.pm-event-date {
    flex: 0 0 56px; text-align: center; line-height: 1.1;
    border-right: 1px solid var(--pm-line); padding-right: 1rem;
}
.pm-event-date .mon { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--pm-blue); letter-spacing: .08em; }
.pm-event-date .day { display: block; font-size: 1.45rem; font-weight: 700; color: var(--pm-ink); }
.pm-event-date .yr  { display: block; font-size: .68rem; color: var(--pm-muted); }
.pm-event-name { font-weight: 600; color: var(--pm-ink); }
.pm-event-meta { font-size: .875rem; color: var(--pm-muted); }

/* ------------------------------------------------------------------ logos */

.pm-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1.75rem 2rem; align-items: center; }
.pm-logos img {
    max-width: 100%; max-height: 62px; width: auto; margin: 0 auto; display: block;
    filter: grayscale(100%); opacity: .62; transition: filter .2s ease, opacity .2s ease;
}
.pm-logos img:hover { filter: none; opacity: 1; }
/* max-width keeps a long wordmark (Premier Tents is 7:1) from dwarfing the square logos. */
.pm-logos.pm-logos-plain img { filter: none; opacity: 1; max-height: 74px; max-width: 200px; }

/* Event logos are the light-on-dark nav variants, so they keep their colour here and get
   a little more room; greyscaling a white logo on a dark ground just dims it. */
.pm-logos-dark { gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pm-logos-dark a {
    display: flex; align-items: center; justify-content: center;
    min-height: 92px; padding: .75rem 1rem; border-radius: var(--pm-radius);
    background: rgba(255, 255, 255, .04);
    transition: background .18s ease, transform .18s ease;
}
.pm-logos-dark a:hover { background: rgba(255, 255, 255, .10); transform: translateY(-2px); }
.pm-logos-dark img { filter: none; opacity: .92; max-height: 64px; }
.pm-logos-dark a:hover img { opacity: 1; }

/* ----------------------------------------------------------- testimonials */

.pm-quote {
    background: var(--pm-white); border: 1px solid var(--pm-line);
    border-left: 3px solid var(--pm-blue); border-radius: var(--pm-radius);
    padding: 1.6rem 1.75rem; box-shadow: var(--pm-shadow);
}
.pm-quote blockquote { margin: 0 0 1rem; font-size: 1.0125rem; }
.pm-quote cite { font-style: normal; font-weight: 600; color: var(--pm-ink); display: block; }
.pm-quote .pm-quote-role { font-size: .875rem; color: var(--pm-muted); }

/* ------------------------------------------------------------------- team */

.pm-person { text-align: center; }
.pm-person img {
    width: 128px; height: 128px; object-fit: cover; border-radius: 50%;
    margin: 0 auto .85rem; display: block; background: var(--pm-wash);
}
.pm-person .nm { font-weight: 600; color: var(--pm-ink); }
.pm-person .rl { font-size: .875rem; color: var(--pm-muted); }

/* ------------------------------------------------------------------ prose */

/* Wrapper for migrated WordPress markup. Scoped tightly: the imported HTML keeps its
   own inline styles and Fusion classes, and this only sets what it relies on. */
.pm-prose { max-width: 74ch; }
.pm-prose.pm-prose-wide { max-width: none; }
.pm-prose h2 { font-size: 1.6rem; margin: 2.4rem 0 .8rem; }
.pm-prose h3 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.pm-prose p { margin: 0 0 1.15rem; }
.pm-prose ul, .pm-prose ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.pm-prose li { margin-bottom: .4rem; }
.pm-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.pm-prose figure { margin: 1.75rem 0; }
.pm-prose figcaption { font-size: .875rem; color: var(--pm-muted); margin-top: .5rem; }
.pm-prose blockquote {
    margin: 1.75rem 0; padding: .25rem 0 .25rem 1.25rem;
    border-left: 3px solid var(--pm-line); color: var(--pm-body);
}
.pm-prose hr { border: 0; border-top: 1px solid var(--pm-line); margin: 2.5rem 0; }

/* WordPress alignment classes. The migrated posts lean on these heavily (alignleft,
   alignright, aligncenter on nearly every image) and WordPress's own stylesheet is what
   used to define them. Without these the images render as inline elements sitting on the
   text baseline, which is why a photo would appear in the middle of a sentence. */
.pm-prose .alignleft {
    float: left; margin: .35rem 1.5rem 1rem 0; max-width: 42%; height: auto;
}
.pm-prose .alignright {
    float: right; margin: .35rem 0 1rem 1.5rem; max-width: 42%; height: auto;
}
.pm-prose .aligncenter {
    display: block; margin: 1.75rem auto; height: auto;
}
.pm-prose .alignnone { display: block; margin: 1.75rem 0; height: auto; }

/* A floated image must not hang past the end of its own section, or the next person's
   paragraph wraps around someone else's photo. */
.pm-prose h2, .pm-prose h3, .pm-prose h4 { clear: both; }

/* The posts are one contributor after another, each a <p><strong>Name</strong></p>
   followed by a floated photo. Clearing after every paragraph would break legitimate
   wrapping, so the float is instead bounded by the headings above and by the overflow
   context the prose wrapper establishes. */
.pm-prose::after { content: ""; display: table; clear: both; }

/* On a phone a 200px float leaves a 150px column of text beside it. Stack instead. */
@media (max-width: 640px) {
    .pm-prose .alignleft,
    .pm-prose .alignright {
        float: none; display: block; max-width: 100%; margin: 1.5rem auto;
    }
}

/* Wide migrated tables (the SwimRun rankings are 335 rows by 11 columns) scroll
   inside their own box rather than pushing the page sideways. */
.pm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; }
.pm-prose table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.pm-prose table th, .pm-prose table td {
    border: 1px solid var(--pm-line); padding: .45rem .6rem; text-align: left; vertical-align: top;
}
.pm-prose table th { background: var(--pm-wash); font-weight: 600; color: var(--pm-ink); white-space: nowrap; }
.pm-prose table tr:nth-child(even) td { background: #fbfcfd; }

/* ------------------------------------------------------------------- blog */

.pm-post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.pm-post-card .pm-post-thumb {
    aspect-ratio: 16 / 9; background: var(--pm-wash) center/cover no-repeat;
    border-bottom: 1px solid var(--pm-line);
}
.pm-post-card .pm-post-body { padding: 1.35rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.pm-post-card h3 { font-size: 1.0625rem; margin: 0 0 .5rem; }
.pm-post-date { font-size: .8125rem; color: var(--pm-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }

/* ------------------------------------------------------------------ forms */

.pm-field { margin-bottom: 1.1rem; }
.pm-field label { display: block; font-weight: 600; color: var(--pm-ink); font-size: .9375rem; margin-bottom: .35rem; }
.pm-field .pm-hint { font-size: .8125rem; color: var(--pm-muted); margin-top: .3rem; }
.pm-field input, .pm-field textarea, .pm-field select {
    width: 100%; padding: .6rem .75rem; font-size: 1rem; font-family: inherit;
    color: var(--pm-ink); background: var(--pm-white);
    border: 1px solid #ccd2da; border-radius: 7px;
}
.pm-field input:focus, .pm-field textarea:focus, .pm-field select:focus {
    outline: none; border-color: var(--pm-blue); box-shadow: 0 0 0 3px rgba(82, 185, 233, .35);
}
.pm-field textarea { min-height: 120px; resize: vertical; }
.pm-field .field-validation-error, .pm-form-error { color: #b00020; font-size: .875rem; display: block; margin-top: .3rem; }
.pm-form-panel {
    background: var(--pm-white); border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius); padding: 1.75rem; box-shadow: var(--pm-shadow);
}
.pm-alert { border-radius: var(--pm-radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; border: 1px solid; }
.pm-alert-success { background: #e8f6ed; border-color: #b7e0c5; color: #1b5e34; }
.pm-alert-info { background: #eef2fb; border-color: #c5d2ef; color: #22347a; }

/* Rentals picker rows */
.pm-rental { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--pm-line); }
.pm-rental:first-of-type { border-top: 0; }
.pm-rental img { width: 96px; height: 72px; object-fit: cover; border-radius: 7px; background: var(--pm-wash); flex: 0 0 96px; }
.pm-rental-qty { flex: 0 0 90px; }
.pm-rental-qty input { width: 100%; }
.pm-rental-info { flex: 1 1 auto; min-width: 0; }
.pm-rental-info .nm { font-weight: 600; color: var(--pm-ink); }
.pm-rental-info .ds { font-size: .9rem; color: var(--pm-muted); }

/* ----------------------------------------------------------------- footer */

.pm-footer { background: var(--pm-navy); color: rgba(255, 255, 255, .82); padding: 3.25rem 0 2rem; }
.pm-footer h4 { color: var(--pm-brand); font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .9rem; }
.pm-footer a { color: rgba(255, 255, 255, .86); }
.pm-footer a:hover { color: var(--pm-brand); }
.pm-footer ul { list-style: none; margin: 0; padding: 0; }
.pm-footer li { margin-bottom: .45rem; font-size: .9375rem; }
.pm-footer-logo img { height: 30px; margin-bottom: 1rem; }
.pm-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.pm-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 2.5rem; padding-top: 1.25rem;
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .875rem;
}
.pm-social a { font-size: 1.1rem; margin-right: .9rem; }

@media (max-width: 860px) {
    .pm-footer-grid { grid-template-columns: 1fr 1fr; }
    .pm-section { padding: 3.25rem 0; }
    .pm-hero { padding: 3.75rem 0 3.25rem; }
}
@media (max-width: 520px) { .pm-footer-grid { grid-template-columns: 1fr; } }

/* A reduced-motion preference: the lifts and transforms are decoration. */
@media (prefers-reduced-motion: reduce) {
    .pm-site * { transition: none !important; }
    a.pm-card:hover, .pm-btn:hover { transform: none; }
}

/* Testimonials page: quotes run long and vary a lot in length, so they flow in columns
   rather than a grid that would leave ragged gaps beside the short ones. */
.pm-testimonials { columns: 2 380px; column-gap: 1.25rem; }
.pm-testimonials .pm-quote { break-inside: avoid; margin-bottom: 1.25rem; }