/* Freight Big Pro loads from Adobe Fonts (kit enqueued by functions.php). */

      html {
        scroll-behavior: smooth;
        background: var(--white);
        font-size: 18px;
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
        }
      }
      body {
        margin: 0;
        font-family: var(--sans);
        color: var(--rich-black);
        line-height: 1.65;
        background: var(--white);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "lnum" 1;
      }
      main {
        width: 100%;
        padding-top: 3.5rem;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        display: block;
        max-width: 100%;
      }

      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .d1 { transition-delay: 0.06s; }
      .d2 { transition-delay: 0.12s; }
      .d3 { transition-delay: 0.18s; }
      .d4 { transition-delay: 0.24s; }
      @media (prefers-reduced-motion: reduce) {
        .reveal {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }

      .page-hero {
        background: var(--rcg-stage);
        padding: clamp(3.8rem, 8vw, 6.5rem) clamp(1rem, 2.8vw, 1.35rem) clamp(3.2rem, 6vw, 5rem);
      }
      .page-hero__grid {
        max-width: var(--content-max);
        margin: 0 auto;
        display: grid;
        /* Jacken 8/25: same split as the story band, so the photo's left edge
           runs down the same line as the "People are used to subscriptions"
           column. The narrower column also crops more of the window away. */
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: 0;
        align-items: start;
      }
      .page-hero__copy {
        padding-right: clamp(1.5rem, 3vw, 3rem);
      }
      .page-hero__title {
        margin: 0 0 1.15rem;
        max-width: 8.9ch;
        font-family: var(--serif);
        font-size: clamp(2.85rem, 5.45vw, 4.75rem);
        font-weight: 400;
        line-height: 0.9;
        letter-spacing: -0.016em;
        color: var(--rich-black);
      }
      .page-hero__deck {
        margin: 0;
        max-width: 32ch;
        font-family: var(--sans);
        font-size: 0.96rem;
        line-height: 1.58;
        color: var(--ink-muted);
      }
      .page-hero__deck strong {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--brand-red);
        font-weight: 700;
      }
      .page-hero__media {
        margin: -0.6rem 0 0;
        width: 100%;
        align-self: stretch;
        min-height: 22rem;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--rcg-neutral-300);
      }
      .page-hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* 2026-08-20, Gary/Logan call: bias the crop toward the person on the
           left third of the source photo and off the window on the right,
           shifting the subject rather than holding it dead-center. */
        object-position: 25% 42%;
        filter: grayscale(100%) contrast(1.02);
      }

      .story-band {
        padding: clamp(2.8rem, 5.5vw, 4.6rem) clamp(1rem, 2.8vw, 1.35rem) clamp(3rem, 6vw, 5rem);
        background: var(--white);
      }
      .story-band__grid {
        /* 2026-08-20, Gary/Heidi/Logan call: centering lives here (not on
           .story-band) to match .page-hero's pattern. Max-width and padding on
           the same element added an extra left offset, so "Building Members"
           sat to the right of "We Inspire" instead of lining up with it. */
        max-width: var(--content-max);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: 0;
        align-items: start;
      }
      .story-band__left {
        margin: 0;
        padding-right: clamp(1.5rem, 3vw, 3rem);
      }
      .story-band__left-red {
        display: block;
        /* Gary's 8/26 PDF: the two lines read as one tight lockup — red bold
           sans over the serif line, no gap between them. */
        margin: 0 0 0.2rem;
        max-width: 8.8ch;
        font-family: var(--sans);
        font-size: clamp(2rem, 3.45vw, 2.9rem);
        font-weight: 700;
        line-height: 1.02;
        letter-spacing: -0.02em;
        color: var(--brand-red);
      }
      .story-band__left-black {
        display: block;
        max-width: 9.8ch;
        margin: 0;
        font-family: var(--serif);
        font-size: clamp(1.9rem, 2.9vw, 2.5rem);
        font-weight: 400;
        line-height: 0.98;
        letter-spacing: -0.012em;
        color: var(--rich-black);
      }
      .story-band__body {
        display: grid;
        gap: 1.1rem;
      }
      .story-band__body p {
        margin: 0;
        max-width: 57ch;
        font-family: var(--sans);
        font-size: 0.97rem;
        line-height: 1.61;
        color: var(--ink-muted);
      }
      .story-band__body p strong {
        color: var(--rich-black);
        font-weight: 700;
      }

      .chart-band {
        margin: 0;
        background: var(--rcg-neutral-200);
        padding: clamp(2.8rem, 5.8vw, 4.8rem) clamp(1rem, 2.8vw, 1.35rem);
      }
      .chart-band__frame {
        /* Same container as the hero and story band (Jacken 8/25): the old
           1103px frame sat ~25px inside them, so the black box never quite
           hit the page's left line. */
        max-width: var(--content-max);
        margin: 0 auto;
        box-sizing: border-box;
      }
      .chart-band__frame .services__list {
        width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        border: 0;
        background: transparent;
      }
      .chart-band .service-row {
        display: block;
        padding: clamp(2.4rem, 3.7vw, 3.1rem);
        border: 0;
      }
      .chart-band .service-row:first-child {
        background: var(--rich-black);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }
      .chart-band .service-row:last-child {
        background: var(--white);
      }
      .chart-band .service-row__title {
        margin: 0;
        font-family: var(--sans);
        font-size: clamp(2.05rem, 2.95vw, 3rem);
        font-weight: 500;
        line-height: 1.03;
        letter-spacing: -0.016em;
        color: var(--rich-black);
      }
      .chart-band .service-row:first-child .service-row__title {
        color: var(--white);
      }
      .chart-band .service-row__body {
        margin: 1.5rem 0 1.8rem;
        font-family: var(--sans);
        font-size: 0.96rem;
        line-height: 1.58;
        color: var(--ink-muted);
      }
      .chart-band .service-row:first-child .service-row__body {
        color: rgba(255, 255, 255, 0.78);
      }
      .chart-band .service-row__list {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .chart-band .service-row__list li {
        position: relative;
        padding: 0.82rem 0 0.82rem 1.05rem;
        border-top: 1px solid var(--border);
        font-family: var(--sans);
        font-size: 0.95rem;
        line-height: 1.44;
        color: var(--ink-muted);
      }
      .chart-band .service-row:first-child .service-row__list li {
        color: rgba(255, 255, 255, 0.78);
        border-top-color: rgba(255, 255, 255, 0.12);
      }
      .chart-band .service-row__list li:last-child {
        border-bottom: 1px solid var(--border);
      }
      .chart-band .service-row:first-child .service-row__list li:last-child {
        border-bottom-color: rgba(255, 255, 255, 0.12);
      }
      .chart-band .service-row__list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1.4rem;
        width: 0.22rem;
        height: 0.22rem;
        background: var(--brand-red);
      }

      .plate {
        display: none;
      }

      .proof {
        max-width: var(--content-max);
        margin: 0 auto;
        padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 2.8vw, 1.35rem);
      }
      .proof__inner {
        display: block;
        padding-inline: clamp(0.95rem, 1.8vw, 1.35rem);
      }

      .method {
        background: var(--white);
        padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 2.8vw, 1.35rem) clamp(4rem, 8vw, 6.5rem);
      }
      .method__inner {
        /* Same container as the hero and story band (Jacken 8/25). */
        max-width: var(--content-max);
        margin: 0 auto;
        box-sizing: border-box;
      }
      .method__cols {
        display: grid;
        /* Jacken 8/25: same split as the hero and story band, so the photo's
           edges run the same vertical lines as the images above it. */
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: 0;
        align-items: stretch;
      }
      .method__left { padding-right: clamp(1.5rem, 3vw, 3rem); min-width: 0; }
      /* Image spans from the top hairline (under "How we work") to the last one. */
      .method__media { margin: 0; align-self: stretch; }
      .method__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); border: 1px solid var(--border); }
      .method__head {
        margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
      }
      .method__title {
        margin: 0 0 1.25rem;
        font-family: var(--serif);
        font-size: clamp(1.8rem, 3.5vw, 2.8rem);
        font-weight: 400;
        line-height: 0.92;
        letter-spacing: -0.03em;
        text-transform: uppercase;
        color: var(--rich-black);
      }
      .method__intro {
        margin: 0;
        max-width: 24rem;
        font-family: var(--sans);
        font-size: 0.98rem;
        line-height: 1.65;
        color: var(--ink-muted);
      }
      .method__list {
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--soft-rule);
        min-width: 0;
      }
      .step {
        display: block;
        padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
        border-bottom: 1px solid var(--soft-rule);
      }
      /* Drop the final hairline under "Run, Analyze, Fix" (image aligns to it). */
      .step:last-child { border-bottom: none; }
      .step__num { display: none; }
      .step__name {
        margin: 0 0 0.6rem;
        font-family: var(--serif);
        font-size: clamp(1.5rem, 2.6vw, 2.1rem);
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.02em;
        color: var(--brand-red);
      }
      .step__body {
        margin: 0;
        max-width: 40rem;
        font-family: var(--sans);
        font-size: 0.95rem;
        line-height: 1.65;
        color: var(--ink-muted);
      }

      .proof__text {
        margin: 0;
        font-family: var(--sans);
        font-size: clamp(1.35rem, 2.8vw, 2rem);
        font-style: italic;
        font-weight: 400;
        line-height: 1.22;
        letter-spacing: -0.012em;
        color: var(--rich-black);
      }
      .proof__text strong {
        font-style: normal;
        font-weight: 700;
      }

      /* Editor-placed pull-quote / resource callout (e.g. "Recruit, Renew,
         Reclaim Your Membership Goals"). Matches blog.css's
         .rcg-blog-single .pullquote, duplicated here unscoped because
         blog.css is never enqueued on this page template (rcg_enqueue() only
         loads it for is_home/is_archive/is_search/is_404/singular posts, or
         pages with no dedicated page-$key bundle). Without this, the callout
         rendered with no styling at all: default browser bold, no color, no
         rule lines. That is the "pulling formatting from a prior template" bug. */
      .pullquote {
        margin: 3.25rem 0;
        padding: 1.45rem 0;
        background: var(--white);
        color: var(--ink-muted);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .pullquote p { margin: 0; font-size: 0.92rem; line-height: 1.62; }
      .pullquote strong:first-child {
        display: block;
        margin-bottom: 0.55rem;
        font-size: 0.82rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        color: var(--brand-red);
      }
      .pullquote a {
        display: inline-flex;
        margin-top: 0.65rem;
        color: var(--brand-red);
        font-weight: 700;
        font-size: 0.78rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
      }
      .pullquote a::after { content: '>'; margin-left: 0.25rem; }
      .pullquote a strong { font: inherit; color: inherit; }

      .closing {
        background: var(--rich-black);
        color: var(--white);
        padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 2.8vw, 1.35rem) clamp(4.5rem, 9vw, 7rem);
      }
      .closing__inner {
        max-width: var(--content-max);
        margin: 0 auto;
        padding-inline: clamp(0.95rem, 1.8vw, 1.35rem);
      }
      .closing__title {
        margin: 0 auto;
        max-width: min(92vw, 52rem);
        font-family: var(--serif);
        font-size: clamp(2.1rem, 5vw, 3.8rem);
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: var(--white);
        text-align: center;
      }
      .closing__title .em {
        color: var(--brand-red);
        font-style: italic;
      }
      /* Desktop keeps the break after "era"; mobile breaks after "in" (below). */
      .closing__br--m { display: none; }
      .closing__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
      }
      .closing .rcg-pill--filled {
        background: var(--brand-red);
        border-color: var(--brand-red);
        color: var(--white);
      }
      .closing .rcg-pill--filled:hover {
        background: var(--brand-red-hover);
        border-color: var(--brand-red-hover);
      }
      .closing .rcg-pill--outline {
        background: transparent;
        color: var(--white);
        border-color: rgba(255, 255, 255, 0.5);
      }
      .closing .rcg-pill--outline:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--white);
      }

      /* Newsletter band, footer, and mailto styles are shared chrome —
         defined once in assets/css/site-chrome.css. No page-local copies. */

      @media (max-width: 900px) {
        .method__cols {
          grid-template-columns: 1fr;
        }
        /* Stacked on mobile: image becomes a contained full-width block. */
        .method__media { align-self: start; }
        .method__media img { height: auto; aspect-ratio: 3 / 2; }
      }
      @media (max-width: 820px) {
        .page-hero__grid,
        .story-band__grid {
          grid-template-columns: 1fr;
        }
        /* Stacked on mobile: add room between the headline and the paragraphs. */
        .story-band__grid { gap: clamp(1.75rem, 5vw, 2.5rem); }
        /* Stacked: the hero image had a negative top margin (for the desktop
           two-column align) that crowds it against the deck — give it air. */
        .page-hero__media { max-width: 34rem; margin-top: clamp(1.85rem, 5.5vw, 2.75rem); }
        .story-band__left-red,
        .story-band__left-black { max-width: 12ch; }
        .chart-band__frame .services__list {
          grid-template-columns: 1fr;
        }
        .chart-band .service-row:first-child {
          border-right: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        /* Condense the service cards so the two stacked blocks scroll less. */
        .chart-band { padding: clamp(2rem, 5vw, 2.8rem) clamp(1rem, 2.8vw, 1.35rem); }
        .chart-band .service-row { padding: clamp(1.5rem, 5vw, 2rem); }
        .chart-band .service-row__title { font-size: clamp(1.6rem, 6.6vw, 2.05rem); }
        .chart-band .service-row__body { margin: 0.9rem 0 1.1rem; font-size: 0.96rem; line-height: 1.5; }
        .chart-band .service-row__list li { padding: 0.6rem 0 0.6rem 1.05rem; font-size: 0.96rem; line-height: 1.4; }
        .chart-band .service-row__list li::before { top: 1.05rem; }
      }
      @media (max-width: 720px) {
        .plate__frame { aspect-ratio: 16 / 10; }
        .plate__cap { display: block; }
      }
      @media (max-width: 560px) {
        .step {
          grid-template-columns: 1fr;
          gap: 0.25rem;
        }
      }
      @media (max-width: 640px) {
        /* Closing line: "Building members in" / "an era that sells subscriptions."
           Size scales with the screen so the second line stays on one line. */
        .closing__br--m { display: inline; }
        .closing__br--d { display: none; }
        .closing__title { font-size: min(2.5rem, 6vw); }
      }
      /* Type consistency: match the PDF (18pt body; Helvetica where the comp uses it). */
      .page-hero__deck { font-size: 1.1875rem; line-height: 1.55; }
      .story-band__body p,
      .service-row__body,
      .step__body { font-size: 1.0625rem; line-height: 1.6; }
      .service-row__list li { font-size: 1.0625rem; line-height: 1.45; }
      .story-band__left-black { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.45vw, 2.9rem); line-height: 0.98; }
      .method__title { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -0.012em; font-size: clamp(1.55rem, 3vw, 2.15rem); }

      /* ── Mary's type review: leading + tracking (pt → em/ratio) ────────── */
      .page-hero__title      { line-height: 0.9;  letter-spacing: 0.005em; }   /* 83/75pt, +5 */
      /* 2026-08-20, Gary/Logan call: more air between "Rottman Creative helps
         associations..." and the "We develop..." line below it; supersedes
         the 20/28pt leading Mary specced below pending her sign-off. */
      .page-hero__deck       { line-height: 1.65; letter-spacing: 0.025em; }
      /* Gary's 8/26 PDF keeps the lockup lines snug; Mary's 46/51pt leading
         applies to the serif line only. */
      .story-band__left-black{ line-height: 1.1;  letter-spacing: 0.005em; }   /* 46/51pt, +5 */
      .story-band__body p    { line-height: 1.39; letter-spacing: 0.005em; }   /* 18/25pt, +5 */
      .method__title         { line-height: 0.91; letter-spacing: 0; }         /* 34/31pt, 0 */
      .step__body            { line-height: 1.4; }                             /* 20/28pt, 0 */