/* ============================================================================
   AAPSCM homepage — 2026 design
   ----------------------------------------------------------------------------
   Everything is scoped to .hx. Two reasons it is written by hand rather than in
   Tailwind utilities:

   1. resources/css/app.css pins `p, li, td, th, blockquote, dd, span, aside,
      main, div` to `font-size: 13px !important` and justifies them site wide.
      Anything here has to restate its size at a weight that beats that, which
      utility classes cannot do.
   2. A Tailwind class that has never been used before does not exist until the
      JIT rescans the Blade sources, and a stale dev build drops it silently.
      grid-cols-4 and gap-14 were both missing from the compiled bundle while
      this page was being built.

   Served straight from public/, like cert-design-system.css.
   ========================================================================= */

.hx {
    --hx-green: #1A5223;
    --hx-green-dk: #123A19;
    --hx-green-lt: #2E7D3E;
    --hx-accent: #3FBF5F;
    --hx-navy: #0B2143;
    --hx-navy-2: #12355B;
    --hx-red: #9E2A2B;
    --hx-red-dk: #7C2122;
    --hx-gold: #C9A227;
    --hx-ink: #1A2233;
    --hx-muted: #5A6472;
    --hx-line: #E3E8EF;
    --hx-bg: #F7F9FC;

    font-family: "Poppins", sans-serif;
    color: var(--hx-ink);
    font-size: 16px;
    line-height: 1.6;
    background: #ffffff;
}

/* Undo the global 13px floor and justification inside this page only. */
.hx :is(p, li, td, th, blockquote, dd, span, aside, div, a, h1, h2, h3, h4, h5, h6) {
    text-align: left;
    font-size: inherit;
    hyphens: manual;
}
.hx p { margin: 0 0 14px !important; }
.hx p:last-child { margin-bottom: 0 !important; }
.hx a { text-decoration: none !important; color: inherit; }
.hx img { max-width: 100%; display: block; }
.hx ul { margin: 0; padding: 0; list-style: none; }

.hx-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Shared type ------------------------------------------------------------- */
.hx-eyebrow {
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hx-muted);
    margin: 0 0 10px !important;
}
.hx-h2 {
    font-size: 30px !important;
    line-height: 1.2;
    font-weight: 800;
    color: var(--hx-navy);
    margin: 0 0 8px !important;
}
.hx-sub {
    font-size: 15px !important;
    color: var(--hx-muted);
    margin: 0 !important;
}
.hx-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.hx-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-size: 14px !important;
    font-weight: 700;
    color: var(--hx-navy-2) !important;
    white-space: nowrap;
}
.hx-more:hover { color: var(--hx-red) !important; }
.hx-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Buttons ----------------------------------------------------------------- */
.hx-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 4px;
    font-size: 14.5px !important;
    font-weight: 700;
    transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.hx-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0; }
.hx-btn-red { background: var(--hx-red); color: #fff !important; }
.hx-btn-red:hover { background: var(--hx-red-dk); transform: translateY(-1px); }
.hx-btn-green { background: var(--hx-green); color: #fff !important; }
.hx-btn-green:hover { background: var(--hx-green-dk); transform: translateY(-1px); }
.hx-btn-navy { background: var(--hx-navy); color: #fff !important; }
.hx-btn-navy:hover { background: var(--hx-navy-2); transform: translateY(-1px); }
.hx-btn-ghost {
    background: transparent;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, .7);
}
.hx-btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */
.hx-hero {
    position: relative;
    isolation: isolate;
    background: var(--hx-navy);
    overflow: hidden;
}
/* Every slide occupies the same space; only one is visible. The first is
   laid out normally so it sets the hero's height, and the rest are taken out
   of flow on top of it — a hero as tall as its tallest slide would jump
   between them otherwise. */
.hx-hero-slide {
    position: relative;
    z-index: 0;
    opacity: 1;
}
.hx-hero-slide ~ .hx-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease-in-out, visibility 0s linear .9s;
}
.hx-hero-slide ~ .hx-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity .9s ease-in-out, visibility 0s;
}
/* The first slide hides by fading under whichever one is showing, rather than
   collapsing the hero's height with it. */
.hx-hero-slide:first-of-type { transition: opacity .9s ease-in-out; }
.hx-hero-slide:first-of-type:not(.is-active) { opacity: 0; }

/* The photograph drifts slowly across while its slide is up, so the hero is
   never quite still and the change between slides is a continuation rather
   than the only thing that moves.

   Nine seconds against a five-second slide, deliberately: the drift never
   reaches its end and settles, it is simply interrupted by the next slide.
   Restarting it is free — the animation is bound to .is-active, so removing
   that class ends it and adding it again begins it from the start.

   It begins already scaled up. Translating a photograph at scale 1 would walk
   its edge into frame; starting at 1.06 gives the movement somewhere to go. */
@media (prefers-reduced-motion: no-preference) {
    .hx-hero-slide.is-active .hx-hero-photo {
        animation: hx-hero-pan 9s ease-out both;
    }
}

@keyframes hx-hero-pan {
    from { transform: scale(1.06) translate3d(1.1%, 0, 0); }
    to   { transform: scale(1.12) translate3d(-1.1%, 0, 0); }
}

.hx-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Weighted right: the navy panel covers the left half, so the half of the
       photograph worth seeing is the one that has to survive the crop. */
    object-position: right 32%;
    z-index: 0;
}
/* The navy panel and the red/green ribbon that separates it from the montage.
   Both are clip-paths rather than images so they stay crisp at any width. */
.hx-hero-panel {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Semi-transparent, as in the design: the cranes read faintly behind the
       headline rather than the copy sitting on flat navy. */
    background: linear-gradient(100deg, rgba(11, 33, 67, .95) 0%, rgba(11, 33, 67, .9) 46%, rgba(11, 33, 67, .82) 100%);
    clip-path: polygon(0 0, 40% 0, 55% 100%, 0 100%);
}
.hx-hero-ribbon {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
/* The word rail and the script line sit over whatever the photograph happens
   to be doing at the right edge — here a bright sunset. This keeps them
   legible without darkening the montage as a whole. */
.hx-hero-slide::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(270deg, rgba(11, 33, 67, .62) 0%, rgba(11, 33, 67, .28) 45%, rgba(11, 33, 67, 0) 100%);
}
.hx-hero-ribbon span {
    position: absolute;
    top: -6%;
    height: 112%;
    width: 34px;
    transform: skewX(19deg);
}
.hx-hero-ribbon .r-green { left: 47.2%; background: var(--hx-green); }
.hx-hero-ribbon .r-red { left: 49.8%; background: var(--hx-red); width: 30px; }

.hx-hero-inner {
    position: relative;
    z-index: 3;
    max-width: 1440px;
    margin: 0 auto;
    padding: 76px 32px 64px;
    min-height: 620px;
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}
.hx-hero-eyebrow {
    font-size: 12.5px !important;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    line-height: 1.7;
    margin: 0 0 18px !important;
}
.hx-hero .hx-hero-h {
    font-size: 40px !important;
    line-height: 1.16;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20px !important;
    letter-spacing: -.01em;
}
.hx-hero .hx-hero-h .hx-hero-accent { color: var(--hx-accent); font-size: inherit !important; }
.hx-hero-lede {
    font-size: 15.5px !important;
    line-height: 1.66;
    color: rgba(255, 255, 255, .86);
    max-width: 625px;
    margin: 0 0 28px !important;
}
.hx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }

.hx-hero-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
}
.hx-feature { display: flex; align-items: center; gap: 9px; }
.hx-feature-ring {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 2px solid var(--hx-gold);
    background: #143A1C;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hx-feature-ring svg { width: 18px; height: 18px; fill: currentColor; }
.hx-feature-label {
    font-size: 11.5px !important;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

/* Right-hand word rail and the script line, both from the design. */
.hx-hero-rail {
    justify-self: end;
    align-self: start;
    text-align: right;
    padding-top: 6px;
}
.hx-hero-rail li {
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 11px;
    text-align: right !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.hx-hero-rail .hx-rail-rule {
    display: block;
    width: 52px;
    height: 3px;
    background: var(--hx-red);
    margin-left: auto;
    margin-top: 14px;
}
.hx-hero-script {
    position: absolute;
    right: 44px;
    bottom: 34px;
    z-index: 3;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 21px !important;
    line-height: 1.25;
    color: #fff;
    text-align: right !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}


/* ── Hero controls ───────────────────────────────────────────
   Bottom left, over the navy panel where there is nothing to cover. */
.hx-hero-controls {
    position: absolute;
    left: 32px;
    bottom: 22px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hx-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .34);
    cursor: pointer;
    transition: background .18s, width .18s;
}
.hx-hero-dot:hover { background: rgba(255, 255, 255, .62); }
.hx-hero-dot.is-active { background: var(--hx-accent); width: 26px; }
.hx-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    /* Shorter, not absent: the change still needs to read as a change. */
    .hx-hero-slide ~ .hx-hero-slide,
    .hx-hero-slide:first-of-type { transition-duration: .6s; }
}

/* ── 2. Stats ────────────────────────────────────────────────────────────── */
/* Welcome ------------------------------------------------------------------
   The association's own introduction, between the carousel and the numbers,
   on alternating ground because .hx-stats under it is white.

   One column, heading centred over it. Everything here has to be scoped
   under .hx and marked important: `.hx :is(p, ...)` forces text-align left
   and `.hx p` sets a margin, both with !important, and at equal weight the
   more specific selector wins — so a lone class silently loses. */
.hx-welcome { background: var(--hx-bg); padding: 44px 0 48px; }

.hx .hx-welcome-h {
    max-width: 34ch;
    margin: 0 auto !important;
    text-align: center !important;
}
.hx-welcome-rule {
    display: block;
    width: 54px;
    height: 3px;
    border-radius: 2px;
    background: var(--hx-green);
    margin: 16px auto 20px;
}

/* Held in from the band's edges. Full bleed put the justified text hard
   against both sides of the section and gave it a very long line. */
.hx-welcome-body { padding: 0 72px; }

.hx .hx-welcome-body p {
    margin: 0 0 15px !important;
    font-size: 15px !important;
    line-height: 1.72;
    color: var(--hx-muted);
    text-align: justify !important;
    text-justify: inter-word;
}
.hx .hx-welcome-body p:last-child { margin-bottom: 0 !important; }

@media (max-width: 1365.98px) {
    .hx-welcome-body { padding: 0 40px; }
}
@media (max-width: 1023.98px) {
    .hx-welcome { padding: 32px 0 36px; }
    .hx .hx-welcome-h { max-width: none; }
    /* The wrap's own 32px gutter is enough this narrow. */
    .hx-welcome-body { padding: 0; }
}

.hx-stats { background: #fff; border-bottom: 1px solid var(--hx-line); }
.hx-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 20px 0;
}
.hx-stat {
    text-align: center;
    padding: 6px 14px;
    border-right: 1px solid var(--hx-line);
}
.hx-stat:last-child { border-right: 0; }
.hx-stat svg {
    width: 27px;
    height: 27px;
    margin: 0 auto 9px;
    display: block;
    fill: currentColor;
    color: #1E5B2A;
}
.hx-stat-value {
    font-size: 25px !important;
    font-weight: 800;
    color: var(--hx-navy);
    line-height: 1.1;
    text-align: center !important;
}
.hx-stat-label {
    font-size: 12.5px !important;
    color: var(--hx-muted);
    margin-top: 3px !important;
    text-align: center !important;
}

/* ── 3. Program areas ────────────────────────────────────────────────────── */
.hx-programs { background: var(--hx-bg); padding: 40px 0 44px; }
.hx-cards-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}
.hx-program {
    background: #fff;
    border: 1px solid var(--hx-line);
    border-radius: 8px;
    padding: 15px 14px 16px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .16s, transform .16s, border-color .16s;
}
.hx-program:hover {
    box-shadow: 0 14px 30px rgba(11, 33, 67, .11);
    transform: translateY(-3px);
    border-color: #CBD5E4;
}
.hx-program-icon {
    width: 94px;
    height: 62px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
}
/* Filled white glyphs, at the size measured off the approved screenshot.
   `color` is set as well as `fill`, and it is not redundant: the chart icon
   draws its trend arrow with stroke="currentColor", so without this the arrow
   inherits the card's dark navy and all but vanishes into the red tile. That
   is how it renders on the live site today. `stroke` is deliberately left
   alone — setting it to none here would erase that arrow instead. */
.hx-program-icon svg {
    width: 42px;
    height: 42px;
    fill: #ffffff;
    color: #ffffff;
}
/* The duotone back shape ships at opacity .2, which all but vanishes on a
   saturated tile. .32 keeps the two tones readable without the back layer
   competing with the front one. */
.hx-program-icon svg [opacity] { opacity: .32; }
/* A gradient and a glow in the tile's own colour, so the tile reads as a lit
   object rather than a swatch. The inset highlight is the top edge catching
   the light; without it the gradient alone looks like a printing error. */
.hx-program-icon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .18s ease, box-shadow .18s ease;
}
.hx-program-icon.is-red {
    background: linear-gradient(145deg, #B23E36 0%, #8F2E2A 55%, #70201C 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 15px -7px rgba(143, 46, 42, .85);
}
.hx-program-icon.is-green {
    background: linear-gradient(145deg, #2C8343 0%, #1E5B2A 55%, #11401C 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 15px -7px rgba(30, 91, 42, .85);
}
/* The whole card is the link target, so the tile lifts with it. */
.hx-program:hover .hx-program-icon { transform: translateY(-2px) scale(1.04); }
.hx-program:hover .hx-program-icon.is-red { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 20px -8px rgba(143, 46, 42, .95); }
.hx-program:hover .hx-program-icon.is-green { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 20px -8px rgba(30, 91, 42, .95); }
.hx-program h3 {
    font-size: 15px !important;
    font-weight: 800;
    line-height: 1.3;
    color: var(--hx-navy);
    margin: 0 0 8px !important;
}
.hx-program p {
    font-size: 13px !important;
    line-height: 1.55;
    color: var(--hx-muted);
    margin: 0 0 12px !important;
    flex: 1;
}
.hx-program-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px !important;
    font-weight: 700;
    color: var(--hx-red) !important;
}
.hx-program-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.hx-program:hover .hx-program-link { text-decoration: underline !important; }

/* ── 4. Featured certifications ──────────────────────────────────────────── */
.hx-certs { background: #fff; padding: 40px 0 44px; }
.hx-cards-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.hx-cert {
    border: 1px solid var(--hx-line);
    border-radius: 8px;
    padding: 20px 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    transition: box-shadow .16s, transform .16s, border-color .16s;
}
.hx-cert:hover {
    box-shadow: 0 16px 34px rgba(11, 33, 67, .12);
    transform: translateY(-3px);
    border-color: #CBD5E4;
}
/* The certificate artwork, where the drawn seal used to sit, and the badge
   closing the card — the two images the credential pages carry. Centred, as
   the seal was; the heading and copy below stay left aligned. */
.hx-cert-art {
    width: 118px;
    height: 118px;
    object-fit: contain;
    margin: 0 auto 14px;
    flex-shrink: 0;
}
.hx-cert-badge {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin: 15px auto 0;
    flex-shrink: 0;
}
.hx-cert h3 {
    font-size: 15px !important;
    font-weight: 800;
    line-height: 1.34;
    color: var(--hx-navy);
    margin: 0 0 9px !important;
}
.hx-cert p {
    font-size: 13px !important;
    line-height: 1.55;
    color: var(--hx-muted);
    margin: 0 0 14px !important;
    flex: 1;
}

/* ── 5. Impact band ──────────────────────────────────────────────────────── */
.hx-impact {
    position: relative;
    isolation: isolate;
    background: var(--hx-green-dk);
    overflow: hidden;
    min-height: 292px;
    display: flex;
    align-items: center;
}
.hx-impact-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}
.hx-impact-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* The design keeps the middle of the photograph bright — the people are
       the point — with solid green only under the copy and a navy tint under
       the pull quote. The old veil darkened the whole band. */
    background: linear-gradient(95deg, #123A19 0%, #123A19 36%, rgba(18, 58, 25, .82) 46%,
        rgba(18, 58, 25, .30) 58%, rgba(18, 58, 25, .06) 68%, rgba(11, 33, 67, .30) 86%, rgba(11, 33, 67, .58) 100%);
}
.hx-impact-inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 34px 32px;
    width: 100%;
    display: grid;
    grid-template-columns: 96px minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 260px);
    gap: 28px;
    align-items: center;
}
/* The ring is part of the drawn mark, not a CSS border — having both left a
   thin outer circle with a tiny emblem floating inside it. */
.hx-impact-emblem {
    width: 94px;
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hx-impact-emblem svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(255, 255, 255, .92);
}
.hx-impact-eyebrow {
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 10px !important;
}
.hx-impact h2 {
    font-size: 27px !important;
    line-height: 1.22;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px !important;
}
.hx-impact-lede {
    font-size: 13.5px !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 20px !important;
    max-width: 420px;
}
.hx-impact-quote {
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    text-align: left !important;
}
.hx-impact-quote span {
    display: block;
    width: 54px;
    height: 3px;
    background: var(--hx-red);
    margin-top: 16px;
}

.hx-values { background: #fff; border-bottom: 1px solid var(--hx-line); }
.hx-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 15px 0;
}
.hx-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 12px;
}
.hx-value svg { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; color: #1E5B2A; }
.hx-value span {
    font-size: 13.5px !important;
    font-weight: 700;
    color: var(--hx-navy);
}

/* ── 6. Event + why join ─────────────────────────────────────────────────── */
.hx-event { background: var(--hx-bg); padding: 34px 0 38px; }
.hx-event-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 26px;
    align-items: stretch;
}
.hx-event-card {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    background: #fff;
    border: 1px solid var(--hx-line);
    border-radius: 8px;
    overflow: hidden;
}
.hx-event-card img { width: 100%; height: 100%; object-fit: cover; }
.hx-event-body { padding: 20px 22px 22px; }
.hx-event-body h3 {
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1.28;
    color: var(--hx-navy);
    margin: 0 0 14px !important;
}
.hx-event-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px !important;
    color: var(--hx-muted);
    margin-bottom: 8px !important;
}
.hx-event-line svg { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; fill: var(--hx-red); }
.hx-event-body .hx-btn { margin-top: 14px; }

.hx-join {
    position: relative;
    isolation: isolate;
    background: #fff;
    border: 1px solid var(--hx-line);
    border-radius: 8px;
    padding: 22px 24px 24px;
    overflow: hidden;
}
/* The faint world map behind the checklist, drawn as a dot grid rather than
   shipped as another photograph. */
.hx-join::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(circle, #C8D6EA 1.1px, transparent 1.2px);
    background-size: 13px 13px;
    opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 72% 52%, #000 38%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 62% at 72% 52%, #000 38%, transparent 72%);
}
.hx-join > * { position: relative; z-index: 1; }
.hx-join h3 {
    font-size: 21px !important;
    font-weight: 800;
    color: var(--hx-navy);
    margin: 0 0 16px !important;
}
.hx-join li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px !important;
    color: var(--hx-ink);
    margin-bottom: 10px;
}
.hx-join li svg { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; fill: var(--hx-green-lt); }
.hx-join .hx-btn { margin-top: 14px; }

/* ── 7. News ─────────────────────────────────────────────────────────────── */
.hx-news { background: #fff; padding: 38px 0 42px; }
.hx-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.hx-post {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    border: 1px solid var(--hx-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .16s, transform .16s;
}
.hx-post:hover { box-shadow: 0 14px 30px rgba(11, 33, 67, .11); transform: translateY(-3px); }
.hx-post img { width: 100%; height: 100%; object-fit: cover; }
.hx-post-body { padding: 14px 16px 15px; }
.hx-chip {
    display: inline-block;
    font-size: 9.5px !important;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    padding: 3px 9px;
    border-radius: 3px;
    margin-bottom: 9px;
}
.hx-chip-green { background: var(--hx-green); }
.hx-chip-red { background: var(--hx-red); }
.hx-chip-navy { background: var(--hx-navy); }
.hx-post h3 {
    font-size: 14.5px !important;
    font-weight: 800;
    line-height: 1.34;
    color: var(--hx-navy);
    margin: 0 0 9px !important;
}
.hx-post-date {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px !important;
    color: var(--hx-muted);
    margin: 0 0 10px !important;
}
.hx-post-date svg { width: 12px; height: 12px; fill: currentColor; }

/* ── 8. Partners ─────────────────────────────────────────────────────────── */
.hx-partners { background: var(--hx-bg); padding: 30px 0 34px; }
.hx-partners-row {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.hx-partner {
    flex: 1 1 0;
    min-width: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-right: 1px solid var(--hx-line);
}
.hx-partner:last-of-type { border-right: 0; }
.hx-partner img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
    opacity: .88;
    transition: opacity .18s, transform .18s;
}
.hx-partner:hover img { opacity: 1; transform: scale(1.04); }
.hx-partners-row .hx-btn { flex-shrink: 0; margin-left: 20px; }

/* ── Rails ───────────────────────────────────────────────────
   A strip the visitor slides, used by the credentials band and the news band.
   The scrolling is the browser's own: a trackpad, a touch screen, the arrow
   keys and a scrollbar all work before any script runs. The buttons only page
   it along, so losing the script costs the buttons, not the content. */
.hx-rail { position: relative; }
.hx-rail-track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 4px 2px 6px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* No scrollbar: the rail scrolls exactly the same by touch, trackpad,
       keyboard and the buttons, it simply does not draw a bar under the
       cards. The buttons are what says there is more to the right. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* While the strip is walking itself, mandatory snap would drag every frame
   back to the nearest card and the stylesheet's smooth scrolling would animate
   on top of the animation. The class is added by the script, so a rail without
   JavaScript keeps both. */
.hx-rail-track.is-autoplaying { scroll-snap-type: none; scroll-behavior: auto; }
.hx-rail-track.is-autoplaying .hx-rail-item { scroll-snap-align: none; }

.hx-rail-track::-webkit-scrollbar { height: 0; width: 0; }
.hx-rail-track:focus-visible { outline: 2px solid var(--hx-navy); outline-offset: 3px; }
.hx-rail-item {
    flex: 0 0 304px;
    scroll-snap-align: start;
    display: flex;
}
.hx-rail-item > * { width: 100%; }
/* .hx-post is a 150px thumbnail beside its text; below about 420px the text
   column is narrow enough that every headline wraps to three lines. */
.hx-rail-item.is-post { flex-basis: 424px; }

.hx-rail-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--hx-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(11, 33, 67, .17);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.hx-rail-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--hx-navy); stroke-width: 2.2; }
.hx-rail-btn:hover { background: var(--hx-navy); border-color: var(--hx-navy); }
.hx-rail-btn:hover svg { stroke: #fff; }
.hx-rail-btn.is-prev { left: -8px; }
.hx-rail-btn.is-next { right: -8px; }
/* Hidden at the ends rather than greyed out: there is nothing to go back to. */
.hx-rail-btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hx-rail-track { scroll-behavior: auto; }
}

/* ── Partner marquee ────────────────────────────────────────
   Twenty-two logos do not fit a row, so the row moves. The list is rendered
   twice and the track travels exactly half its own width, which puts the
   second copy where the first began — the loop closes with nothing to jump
   back from. Pausing on hover lets someone actually read a logo. */
.hx-marquee {
    overflow: hidden;
    border-top: 1px solid var(--hx-line);
    border-bottom: 1px solid var(--hx-line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}
.hx-marquee-track {
    display: flex;
    width: max-content;
    animation: hx-marquee 54s linear infinite;
}
.hx-marquee:hover .hx-marquee-track,
.hx-marquee:focus-within .hx-marquee-track { animation-play-state: paused; }
.hx-marquee-set {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* .hx-partner is written to share a row equally; on the track it keeps its
   own width instead, or the logos stretch as the copy is added. */
.hx-marquee .hx-partner {
    flex: 0 0 auto;
    width: 158px;
    min-width: 0;
    border-right: 1px solid var(--hx-line);
}
@keyframes hx-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* The association asked for this to slide on its own, so it does — including
   for a visitor who asks for reduced motion, where it previously stopped and
   turned into a scroller with a scrollbar. It is slowed instead of stopped:
   still moving, gently, and still pausing the moment a cursor lands on it. */
@media (prefers-reduced-motion: reduce) {
    .hx-marquee-track { animation-duration: 108s; }
}

.hx-partners-cta {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1279.98px) {
    .hx-hero-inner { min-height: 560px; padding: 60px 26px 74px; }
    .hx-hero .hx-hero-h { font-size: 36px !important; }
    .hx-cards-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hx-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
    .hx-stat:nth-child(3n) { border-right: 0; }
    .hx-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-cards-3 { grid-template-columns: minmax(0, 1fr); }
    .hx-impact-inner { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 240px); }
    .hx-impact-inner > .hx-impact-spacer { display: none; }
    .hx-event-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023.98px) {
    .hx-hero-panel { clip-path: none; background: linear-gradient(100deg, rgba(11, 33, 67, .97) 0%, rgba(11, 33, 67, .92) 62%, rgba(11, 33, 67, .8) 100%); }
    .hx-hero-ribbon { display: none; }
    .hx-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .hx-hero-rail, .hx-hero-script { display: none; }
    .hx-h2 { font-size: 28px !important; }
    .hx-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .hx-impact-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .hx-impact-quote { max-width: 420px; }
}

@media (max-width: 767.98px) {
    .hx-wrap { padding: 0 18px; }
    .hx-hero-inner { padding: 44px 18px 72px; min-height: 0; }
    .hx-hero-controls { left: 18px; bottom: 18px; }
    .hx-hero .hx-hero-h { font-size: 31px !important; }
    .hx-hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .hx-hero-actions { gap: 10px; }
    .hx-btn { padding: 12px 18px; font-size: 13.5px !important; }
    .hx-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hx-cards-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-cards-4 { grid-template-columns: minmax(0, 1fr); }
    .hx-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-stat { border-right: 0; }
    .hx-event-card { grid-template-columns: minmax(0, 1fr); }
    .hx-event-card img { height: 190px; }
    .hx-post { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); }
    .hx-partners-row { justify-content: center; }
    .hx-partner { flex: 0 0 33.333%; border-right: 0; }
    .hx-partners-row .hx-btn { margin: 18px auto 0; }
    .hx-h2 { font-size: 25px !important; }
    .hx-programs, .hx-certs, .hx-news { padding: 38px 0 42px; }
}

/* ── Photography credit ──────────────────────────────────────────────────
   Required by the Pexels API guidelines: a link back to Pexels and the
   photographers' names. Set quiet, but present on the page rather than
   buried in a file nobody reads. */
.hx-credits {
    background: var(--hx-bg);
    border-top: 1px solid var(--hx-line);
    padding: 12px 0 14px;
}
.hx-credits p {
    font-size: 11.5px !important;
    color: var(--hx-muted);
    margin: 0 !important;
}
.hx-credits a {
    color: var(--hx-muted) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
.hx-credits a:hover { color: var(--hx-red) !important; }