/* ============================================================
   LP-NDAP — Non Dues-a-Palooza 2026 campaign LP (/lp/ndap/)
   ============================================================
   The shared association-LP kit lives in /css/lp-asae.css, scoped to
   the `.lp-assoc` body class that this page also carries. That import
   brings the design tokens and every shared `.asae-*` component:
   hero, framing beat, scroll rail, case-study carousel, promo tiles,
   member stats, library, chat FAQ, meet-us, buttons, sticky CTA.

   Editing a rule in that kit changes /lp/asae/ too. Anything that
   should only affect this page goes below, prefixed `.page-lp-ndap`
   so it outranks the kit's own `.lp-assoc ...` rules.

   `ndap-*` classes are the pieces that exist only here: the beat
   source line, the quiz band, the case-study label and closing line,
   How it gets built, the three-up member stats, the article area
   tags, and the single-person meet-us column.
   ============================================================ */

@import url("/css/lp-asae.css");

/* ---------- Hero ----------
   Hero photograph, with the purple/teal wash kept as the layer under it so a
   failed image request still lands on the page's own colours rather than on
   bare ink. The kit's own scrim and bottom fade live on ::before and ::after.

   The art is slide 3 of the /industries/associations/ hero rotation, shared
   rather than copied so the two association pages hold one file each. It
   ships pre-cropped at two ratios: 2560x1440 landscape and 1080x1920
   portrait. This hero's box is landscape down to 767 and portrait below it,
   which is why the <=767 rule swaps to the vertical file rather than letting
   `cover` pick a third of the wide one.

   It replaced the Mississauga skyline when the NDAP event passed (October
   2026). The old files are still in /images/lp/ndap/ and unreferenced. */
.page-lp-ndap .ndap-hero .asae-hero__bg {
    background-image:
        image-set(url("/images/industries/associations/associations-banner-3-hor.webp") type("image/webp")),
        radial-gradient(120% 90% at 12% 0%, rgba(123, 92, 213, 0.42) 0%, rgba(123, 92, 213, 0) 62%),
        radial-gradient(100% 80% at 88% 18%, rgba(0, 161, 172, 0.34) 0%, rgba(0, 161, 172, 0) 60%),
        linear-gradient(160deg, #262636 0%, var(--asae-ink) 62%);
    background-size: cover, cover, cover, cover;
    background-position: center 42%;
    background-repeat: no-repeat;
}

/* Deepened from the kit's 0.86 / 0.62 / 0.30 — and from this page's own
   earlier 0.80 / 0.55 / 0.25, which belonged to the Mississauga photograph.
   The replacement image is brighter in the band the H1 occupies, and on the
   old ramp the H1 measured 2.26:1 at 991 against a 3:1 floor. A scrim is
   tuned to one photograph; swapping the art always means re-measuring.

   Measured against the rendered page with the text layer hidden, taking the
   brightest 1% inside each element's own box: H1 6.17:1 at 1920, 5.78:1 at
   1440, 3.85:1 at 991 (large text needs 3:1) and 4.78:1 at 390 on the
   portrait wash below; subtitle 10.25-13.39:1 and the note 15.32-16.18:1,
   both against a 4.5:1 floor. 991 is the pinch point — check there first. */
.page-lp-ndap .ndap-hero .asae-hero__bg::before {
    background: linear-gradient(95deg,
        rgba(26, 26, 36, 0.90) 0%,
        rgba(26, 26, 36, 0.72) 48%,
        rgba(26, 26, 36, 0.46) 100%);
}

/* Below 1200 the hero is never wider than 1200 CSS pixels, so the 2560px file
   is a full size step of wasted bytes. */
@media (max-width: 1200px) {
    .page-lp-ndap .ndap-hero .asae-hero__bg {
        background-image:
            image-set(url("/images/industries/associations/assoc-hero-3-hor-1280.webp") type("image/webp")),
            radial-gradient(120% 90% at 12% 0%, rgba(123, 92, 213, 0.42) 0%, rgba(123, 92, 213, 0) 62%),
            radial-gradient(100% 80% at 88% 18%, rgba(0, 161, 172, 0.34) 0%, rgba(0, 161, 172, 0) 60%),
            linear-gradient(160deg, #262636 0%, var(--asae-ink) 62%);
    }
}

/* Below 767 the box turns portrait — 0.72 at 479, 0.48 at 390, 0.36 at 320 —
   and `cover` on the wide file would keep only a third of the width, chosen by
   the browser rather than by us. This file is that third, cropped deliberately
   around the Absolute towers and the Civic Centre clock tower. Its own aspect
   is 0.481, matching a common phone, so the horizontal span survives and the
   trimming falls on sky and roadway instead. */
@media (max-width: 767px) {
    .page-lp-ndap .ndap-hero .asae-hero__bg {
        background-image:
            image-set(url("/images/industries/associations/associations-banner-3.webp") type("image/webp")),
            radial-gradient(120% 90% at 12% 0%, rgba(123, 92, 213, 0.42) 0%, rgba(123, 92, 213, 0) 62%),
            radial-gradient(100% 80% at 88% 18%, rgba(0, 161, 172, 0.34) 0%, rgba(0, 161, 172, 0) 60%),
            linear-gradient(160deg, #262636 0%, var(--asae-ink) 62%);
        background-position: center center;
    }

    /* The kit's scrim is a 95deg ramp, dark at the left where the headline
       sits on a wide hero. On a phone the text spans the full width, so that
       ramp lays its darkest end over the whole photo and the skyline goes to
       mush. A flatter vertical wash keeps the type legible and lets the
       buildings read as buildings. Replaces rather than adds. */
    .page-lp-ndap .ndap-hero .asae-hero__bg::before {
        background: linear-gradient(180deg,
            rgba(26, 26, 36, 0.72) 0%,
            rgba(26, 26, 36, 0.62) 22%,
            rgba(26, 26, 36, 0.55) 60%,
            rgba(26, 26, 36, 0.62) 100%);
    }
}

/* ---------- Framing beat ----------
   The kit splits the two columns evenly. Here the left column is one bold
   claim and the right is a paragraph three times its length, so equal halves
   left the left column half empty. 40/60 gives the paragraph the room it
   needs and the claim a measure it fills. */
/* Above 767 only. The kit collapses this grid to one column at <=767, and
   an unscoped override here outranks that media query — which is what kept
   the beat in two columns on phones, at 99px and 148px a track at 320. */
@media (min-width: 768px) {
    .page-lp-ndap .asae-beat__cols {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    }
}

/* ---------- Three-area rail ----------
   Three items instead of four, so the sticky score card sits against a
   shorter column. Trimming the rail's own min-height keeps the card from
   stranding in whitespace after the last area scrolls past. */
.page-lp-ndap .ndap-rail .sfr__media {
    align-self: start;
}

.page-lp-ndap .ndap-score-card .asae-score-card__rows {
    /* Three rows rather than four — a little more air per row keeps the card
       the same visual weight it has on the ASAE page. */
    gap: var(--space-md);
}

/* ---------- Animated example score card ----------
   The card steps through one state per area as the rail scrolls, driven by
   /js/lp-ndap-score.js off the rail's `sfr:activate` event. Only the
   transitions, the per-row "Start here" visibility and the band colours live
   here; the values themselves are set inline by that script.

   Scoped to this page because the score card and its rows come from the shared
   kit, which /lp/asae/ and /industries/associations/ also load. */

/* Every row ships a "Start here" tag; only the weakest row's is shown, so the
   marker moves by class toggle instead of a DOM move. The kit's `is-gap` rules
   already handle its placement — this only controls which one renders. */
.page-lp-ndap .asae-score-card--rail .asae-score-card__row em {
    display: none;
}

.page-lp-ndap .asae-score-card--rail .asae-score-card__row.is-gap em {
    display: block;
}

/* `is-gap` changes the row's grid tracks, so the two rows swapping the marker
   reflow. Transitioning the bar and the ring keeps the eye on the values
   rather than on that reflow. 0.5s matches the number tick's run. */
.page-lp-ndap .asae-score-card__bar i {
    transition: width 0.5s var(--easing-smooth);
}

.page-lp-ndap .asae-score-card__fill {
    transition: stroke-dashoffset 0.5s var(--easing-smooth);
}

@media (prefers-reduced-motion: reduce) {
    .page-lp-ndap .asae-score-card__bar i,
    .page-lp-ndap .asae-score-card__fill {
        transition: none;
    }
}

/* The kit hard-codes the ring to the score /lp/asae/ shows. This page's first
   state is 39 of 100 (35 of 90 raw), so the no-JS render needs its own default
   or the ring and the number disagree. C = 2*pi*52 = 326.73;
   326.73 * (1 - 39/100) = 199.3. */
.page-lp-ndap .asae-score-card__fill {
    stroke-dashoffset: 199.3;
}

/* Band pill colours. The kit paints it one orange whatever it says; this set
   spans Building to Scaling, and the two remaining bands are wired so a future
   state edit cannot land on an unstyled pill. Values mirror the Associations
   page's four so the two example cards read as one system.

   The rail card sits inside .asae-ch, which is white, and .asae-score-card has
   no background of its own — so these are dark, saturated text over a pale
   tint, not dark-card values. Scoped under .asae-ch to outrank the kit's
   single-orange default (equal specificity, later in the cascade). */
.page-lp-ndap .asae-ch .asae-score-card__band--revenue-engine {
    color: #065f46;
    background: rgba(16, 185, 129, 0.18);
}

.page-lp-ndap .asae-ch .asae-score-card__band--scaling {
    color: #05585e;
    background: rgba(0, 161, 172, 0.2);
}

.page-lp-ndap .asae-ch .asae-score-card__band--building {
    color: #8a4e02;
    background: rgba(249, 147, 13, 0.2);
}

.page-lp-ndap .asae-ch .asae-score-card__band--untapped {
    color: #991b1b;
    background: rgba(220, 38, 38, 0.14);
}

/* ---------- Case-study panel additions ---------- */
.page-lp-ndap .ndap-csc__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-secondary);
}


/* Stat labels hold one line each above 560, the same rule the associations
   page uses: equal thirds wrap "to recover the investment", max-content lets
   the slack collect at the right of the row instead. Below that the kit's
   thirds return and labels wrap, which is right on a phone. */
@media (min-width: 561px) {
    .page-lp-ndap .csc-panel__stats {
        grid-template-columns: repeat(3, max-content);
        column-gap: var(--space-2xl);
    }
}

/* ---------- How it gets built ---------- */
.page-lp-ndap .ndap-build {
    padding: var(--space-3xl) var(--space-section-x);
    background: var(--asae-tint);
}

.page-lp-ndap .ndap-build__head {
    max-width: var(--asae-rail-width);
    margin: 0 auto var(--space-2xl);
}

.page-lp-ndap .ndap-build__head h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-tight);
    max-width: 50rem;
}

.page-lp-ndap .ndap-build__grid {
    max-width: var(--asae-rail-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
}

.page-lp-ndap .ndap-build__item {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

.page-lp-ndap .ndap-build__item i {
    display: block;
    margin-bottom: var(--space-md);
    font-size: 1.75rem;
    color: var(--color-accent-primary);
}

/* One card carrying four outcomes, rather than four more cards: these are
   the results of the three above, not a fourth thing you get. */
.page-lp-ndap .ndap-build__outcomes {
    max-width: var(--asae-rail-width);
    margin: var(--space-xl) auto 0;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xl);
}

.page-lp-ndap .ndap-outcome i {
    display: block;
    margin-bottom: var(--space-md);
    font-size: 1.75rem;
    color: var(--color-accent-primary);
}

.page-lp-ndap .ndap-outcome h3 {
    font-size: var(--text-h6);
    line-height: var(--leading-snug);
    margin: 0;
}

.page-lp-ndap .ndap-build__item h3 {
    font-size: var(--text-h6);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-sm);
}

.page-lp-ndap .ndap-build__item p {
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

/* ---------- Member demand: three columns, not four ---------- */
.page-lp-ndap .ndap-members__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Meet Philip: one person, not two ----------
   The kit splits the people column into two portrait cards. With a single
   person that column would leave a hole, so the card takes the full width
   and the column itself narrows toward the form. */
.page-lp-ndap .ndap-meet .asae-meet__row {
    grid-template-columns: minmax(0, 1fr);
}

/* Philip's role and spotlight line read teal rather than the kit's purple,
   which leaves purple to the links alone in this card. Measured on the
   card's own white surface (not the section's #f1f1f6 behind it),
   `--color-accent-tertiary` is 3.14:1, so both use the dark step, which
   measures 5.11:1; neither line is large text. */
.page-lp-ndap .ndap-meet .asae-person__role {
    color: var(--color-accent-tertiary-dark);
}

.page-lp-ndap .ndap-person__session {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--asae-line-light);
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    color: var(--color-accent-tertiary-dark);
}

/* Philip's direct line, under the session row. Same icon+text shape, but
   grey rather than teal so the spotlight line stays the one that stands
   out; the links themselves stay purple. */
.page-lp-ndap .ndap-person__contact {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: var(--space-xs);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

/* Fixed width on all three icons, session included, so the text starts on
   one line however wide each glyph is. */
.page-lp-ndap .ndap-person__session i,
.page-lp-ndap .ndap-person__contact i {
    width: 1rem;
    text-align: center;
}

.page-lp-ndap .ndap-person__contact i {
    color: var(--color-accent-secondary);
}

.page-lp-ndap .ndap-person__contact a {
    color: var(--color-accent-primary);
    text-decoration: none;
}

.page-lp-ndap .ndap-person__contact a:hover {
    text-decoration: underline;
}

/* The session row owns the divider, so the first contact line sits tight
   under it rather than opening another gap. */
.page-lp-ndap .ndap-person__session + .ndap-person__contact {
    margin-top: var(--space-sm);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
    .page-lp-ndap .ndap-members__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .page-lp-ndap .ndap-build__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    /* Four across is too tight once the rail narrows; one per row is too
       sparse for four short lines, so they pair up here and stack below. */
    .page-lp-ndap .ndap-build__outcomes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg) var(--space-xl);
    }
}

@media (max-width: 767px) {
    .page-lp-ndap .ndap-build__outcomes {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-lp-ndap .ndap-members__stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Score card at <=991 ----------
   <=991 is where the kit drops the rail out of two columns and the panel
   stops being a sticky sidebar, so that — not 767 — is where it needs to
   start reading as a centred figure. The kit caps it at 26rem and only
   centres it below 767; 540px is the cap here, and below that the cap stops
   binding and the panel takes the rail's own gutters. width: 100% is needed
   because the panel is a grid item whose used width would otherwise shrink
   to its content rather than fill the track. */
@media (max-width: 991px) {
    .page-lp-ndap .asae-rail .sfr__media {
        width: 100%;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
}