/* Freight Big Pro loads from Adobe Fonts (kit enqueued by functions.php). */
      @font-face { font-family: 'Helvetica Neue'; src: url('../../fonts/HelveticaNeue-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
      @font-face { font-family: 'Helvetica Neue'; src: url('../../fonts/HelveticaNeue-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
      @font-face { font-family: 'Helvetica Neue'; src: url('../../fonts/HelveticaNeue-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
      @font-face { font-family: 'Helvetica Neue'; src: url('../../fonts/HelveticaNeue-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
    

      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%; }

      /* ============================================================
         FEATURED — cover-left, content-right paired layout
         A spotlight on the most recent publication.
         ============================================================ */
      /* Intro blurb above the featured Insight (Zoe, Website Edits-3, 8/25). */
      .insights-intro {
        max-width: var(--content-max);
        margin: 0 auto;
        padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 2.8vw, 1.35rem) 0;
      }
      .insights-intro__lead {
        margin: 0 0 0.8rem;
        font-family: var(--sans);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.012em;
        color: var(--rich-black);
      }
      .insights-intro__body {
        margin: 0;
        max-width: 46rem;
        font-family: var(--sans);
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--ink-muted);
      }

      .featured {
        max-width: var(--content-max);
        margin: 0 auto;
        padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 2.8vw, 1.35rem) clamp(3rem, 6vw, 5rem);
      }
      /* One Insight's own page (single-report.php): same layout, breadcrumbs above, less top air. */
      .rcg-insight-single .rcg-breadcrumbs {
        max-width: var(--content-max);
        margin: 0 auto;
        padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.8vw, 1.35rem) 0;
      }
      .featured--single { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
      .featured__body {
        margin: 1rem 0 0;
        max-width: 40rem;
        font-family: var(--sans);
        font-size: 1rem;
        line-height: 1.65;
        color: var(--ink-muted);
      }
      .featured__body p { margin: 0 0 1rem; }
      .featured__grid {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(2rem, 4.5vw, 4rem);
        align-items: center;
      }
      /* Covers sit flush on the page white — no frame, no tinted box — so the
         reports read as the articles themselves. */
      .featured__cover {
        margin: 0;
        width: 100%;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        background: var(--white);
        transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
      }
      .featured__cover img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: grayscale(100%) contrast(1.06);
        transition: filter 0.3s var(--ease);
      }
      /* Wide covers get a frame the same shape as the file they asked for, so
         object-fit: contain has no leftover white to fill. 4:3 matches the
         1600x1200 horizontal size; 16:9 matches a 1920x1080 slide. */
      .featured__cover--landscape { aspect-ratio: 4 / 3; }
      .featured__cover--slide { aspect-ratio: 16 / 9; }
      .featured__grid:hover .featured__cover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(26, 25, 25, 0.14);
      }
      .featured__grid:hover .featured__cover img { filter: grayscale(0%) contrast(1); }
      .featured__meta {
        margin: 0 0 1rem;
        font-family: var(--sans);
        font-weight: 500;
        font-size: 0.92rem;
        line-height: 1.4;
        color: var(--brand-red);
      }
      .featured__title {
        margin: 0 0 1.5rem;
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(40px, 5.8vw, 76px);
        line-height: 0.9;
        letter-spacing: -0.04em;
        text-transform: uppercase;
        color: var(--rich-black);
      }
      .featured__deck {
        margin: 0 0 1.5rem;
        max-width: 32rem;
        font-family: var(--sans);
        font-weight: 400;
        font-size: 1.05rem;
        line-height: 1.65;
        color: var(--ink-muted);
      }
      .featured__attr {
        margin: 0 0 1.75rem;
        font-family: var(--sans);
        font-size: 0.88rem;
        line-height: 1.55;
        color: var(--ink-muted);
        max-width: 26rem;
      }
      .featured__attr strong {
        color: var(--rich-black);
        font-weight: 500;
      }
      .featured__actions { display: flex; gap: 14px; flex-wrap: wrap; }
      @media (max-width: 820px) {
        .featured__grid { grid-template-columns: 1fr; gap: 2rem; }
        .featured__cover { max-width: 28rem; aspect-ratio: 4 / 5; }
        /* ...but a wide cover keeps its own shape here too, or it gets
           letterboxed into a portrait box on phones. */
        .featured__cover--landscape { aspect-ratio: 4 / 3; }
        .featured__cover--slide { aspect-ratio: 16 / 9; }
      }

      /* ============================================================
         ARCHIVE — 2-col grid; cover (4:5) + date + sans-medium title
         + excerpt + brand-red CTA. Hover reveals full color on cover.
         ============================================================ */
      .archive {
        max-width: var(--content-max);
        margin: 0 auto;
        padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 2.8vw, 1.35rem);
        border-top: 1px solid var(--border);
      }
      .archive__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: clamp(2rem, 4vw, 3rem);
        margin-bottom: clamp(2rem, 4vw, 3rem);
        padding-inline: clamp(0.95rem, 1.8vw, 1.35rem);
      }
      .archive__title {
        margin: 0;
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(1.7rem, 3.2vw, 2.6rem);
        line-height: 0.95;
        letter-spacing: -0.03em;
        text-transform: uppercase;
        color: var(--rich-black);
        max-width: 16ch;
      }
      .archive__count {
        margin: 0;
        font-family: var(--sans);
        font-weight: 500;
        font-size: 0.9rem;
        line-height: 1.4;
        color: var(--ink-muted);
        white-space: nowrap;
        padding-bottom: 0.4rem;
      }
      .archive__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 3.5rem);
      }
      .report { display: flex; flex-direction: column; gap: 1rem; }
      .report__cover {
        margin: 0;
        width: 100%;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--white);
        display: block;
        transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
      }
      .report__cover img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: grayscale(100%) contrast(1.04);
        transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
      }
      .report__cover--landscape { aspect-ratio: 4 / 3; }
      .report__cover--slide { aspect-ratio: 16 / 9; }
      /* Games: a close-up of each board fills the frame (no letterbox). */
      .games { scroll-margin-top: 4rem; }
      .report__cover--game { background: var(--paper); }
      .report__cover--game img { object-fit: cover; }
      .report:hover .report__cover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px rgba(26, 25, 25, 0.14);
      }
      .report:hover .report__cover img { filter: grayscale(0%) contrast(1); transform: scale(1.02); }
      .report__title a { color: inherit; text-decoration: none; transition: color 0.14s var(--ease); }
      .report:hover .report__title a { color: var(--brand-red); }
      .report__title a:hover { text-decoration: none; color: var(--brand-red); }
      /* Date, title and blurb match the Articles cards (blog.css
         .blog-card__meta / __title / __excerpt), Jacken 9/28. */
      .report__date {
        margin: 0;
        font-family: var(--sans);
        font-weight: 400;
        font-size: 0.85rem;
        line-height: 1.4;
        color: var(--rich-black);
      }
      .report__title {
        margin: 0;
        font-family: var(--sans);
        font-weight: 400;
        font-size: clamp(1.15rem, 1.7vw, 1.35rem);
        line-height: 1.2;
        color: var(--rich-black);
      }
      .report__excerpt {
        margin: 0;
        font-family: var(--sans);
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.55;
        color: var(--rich-black);
        max-width: 36rem;
      }
      .report__more {
        margin-top: 0.25rem;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-family: var(--sans);
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--brand-red);
        align-self: flex-start;
      }
      .report__more::after { content: '>'; font-weight: 700; transition: transform 0.14s var(--ease); }
      .report__more:hover { color: var(--brand-red-hover); text-decoration: none; }
      .report__more:hover::after { transform: translateX(2px); }
      @media (max-width: 720px) {
        .archive__grid { grid-template-columns: 1fr; gap: 2.5rem; }
      }

      /* ============================================================
         WEBINARS — carousel above the eBooks (Heidi, 2026-09-22).
         Two .report cards in view (one on phones), same card as the
         eBook grid; the track slides one card at a time and loops.
         ============================================================ */
      .webinars {
        max-width: var(--content-max);
        margin: 0 auto;
        padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 2.8vw, 1.35rem);
        border-top: 1px solid var(--border);   /* divider under the featured hero */
      }
      .webinars__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
      .webinars__nav { display: flex; gap: 0.5rem; flex: none; }
      .webinars__arrow {
        width: 2.6rem;
        height: 2.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 0 0.15rem;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: var(--white);
        color: var(--rich-black);
        font-family: var(--serif);
        font-size: 1.7rem;
        line-height: 1;
        cursor: pointer;
        transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease);
      }
      .webinars__arrow:hover,
      .webinars__arrow:focus-visible { color: var(--white); background: var(--brand-red); border-color: var(--brand-red); outline: none; }
      .webinars__viewport {
        --webinars-gap: clamp(2rem, 4vw, 3.5rem);
        padding-inline: clamp(0.95rem, 1.8vw, 1.35rem);
        overflow-x: auto;               /* no-JS fallback: a plain sideways scroll */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .webinars__viewport.is-enhanced { overflow: hidden; scroll-snap-type: none; }
      .webinars__track {
        display: flex;
        gap: var(--webinars-gap);
        margin: 0;
        padding: 0 0 0.5rem;
        list-style: none;
        will-change: transform;
      }
      .webinars__slide {
        flex: 0 0 calc((100% - var(--webinars-gap)) / 2);
        min-width: 0;
        scroll-snap-align: start;
      }
      .webinars__slide .report__cover { aspect-ratio: 16 / 9; }
      .webinars__dots {
        display: flex;
        justify-content: center;
        gap: 0.55rem;
        margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
      }
      .webinars__dot {
        width: 0.55rem;
        height: 0.55rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--border);
        cursor: pointer;
        transition: background 0.14s var(--ease), transform 0.14s var(--ease);
      }
      .webinars__dot:hover { transform: scale(1.25); }
      .webinars__dot.is-active { background: var(--brand-red); }
      .webinars__dot:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
      .webinars + .archive { border-top: 1px solid var(--border); }
      @media (max-width: 720px) {
        .webinars__slide { flex-basis: 100%; }
        .webinars__head { flex-wrap: wrap; }
      }

      /* ============================================================
         CLOSING — split two-column white with hairline above
         (distinct from what-we-do dark and about paper)
         ============================================================ */
      .closing {
        max-width: var(--content-max);
        margin: 0 auto;
        padding: clamp(4rem, 8vw, 6.5rem) clamp(1rem, 2.8vw, 1.35rem) clamp(4.5rem, 9vw, 7rem);
        border-top: 1px solid var(--border);
      }
      .closing__inner {
        padding-inline: clamp(0.95rem, 1.8vw, 1.35rem);
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 3rem);
        /* start, not end (Jacken 8/25): the headline anchors upper-left and the
           paragraph's first line sits level with it, instead of the short
           headline bottom-aligning against the taller button column. */
        align-items: start;
      }
      .closing__title {
        margin: 0;
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(2rem, 4.6vw, 3.6rem);
        line-height: 0.92;
        letter-spacing: -0.035em;
        text-transform: uppercase;
        color: var(--rich-black);
        max-width: 18ch;
      }
      .closing__body {
        margin: 0 0 1.5rem;
        max-width: 36rem;
        font-family: var(--sans);
        font-size: 1rem;
        line-height: 1.65;
        color: var(--ink-muted);
      }
      .closing__actions { display: flex; gap: 14px; flex-wrap: wrap; }
      @media (max-width: 820px) {
        .closing__inner { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
      }
    
      /* ── Report gate — modal form → ActiveCampaign ─────────────────── */
      .rgate {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.2rem;
      }
      /* Closed by default: the hidden attribute must beat the flex display,
         so the pop-up only ever appears after a report button is clicked. */
      .rgate[hidden] { display: none; }
      .rgate__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(26, 25, 25, 0.55);
        backdrop-filter: blur(3px);
      }
      .rgate__panel {
        position: relative;
        width: 100%;
        max-width: 26rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        background: var(--white);
        padding: 2.2rem 2rem 2rem;
        box-shadow: 0 24px 64px rgba(26, 25, 25, 0.28);
      }
      .rgate__close {
        position: absolute;
        top: 0.6rem;
        right: 0.8rem;
        border: 0;
        background: none;
        font-size: 1.7rem;
        line-height: 1;
        color: var(--ink-muted);
        cursor: pointer;
      }
      .rgate__close:hover { color: var(--brand-red); }
      .rgate__kicker {
        margin: 0 0 0.3rem;
        font-family: var(--sans);
        font-weight: 700;
        font-size: 0.72rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--brand-red);
      }
      .rgate__heading {
        margin: 0 0 1.1rem;
        font-family: var(--serif);
        font-weight: 400;
        font-size: 1.7rem;
        line-height: 1.12;
        letter-spacing: -0.02em;
        color: var(--rich-black);
      }
      .rgate__form { display: flex; flex-direction: column; gap: 0.55rem; }
      .rgate__label {
        font-family: var(--sans);
        font-weight: 500;
        font-size: 0.78rem;
        color: var(--rich-black);
      }
      .rgate__input {
        width: 100%;
        padding: 0.7rem 0.85rem;
        border: 1px solid var(--border);
        background: var(--white);
        font-family: var(--sans);
        font-size: 0.9rem;
        color: var(--rich-black);
      }
      .rgate__input:focus { outline: 2px solid var(--brand-red); outline-offset: -1px; }
      .rgate__submit {
        margin-top: 0.6rem;
        padding: 0.8rem 1rem;
        border: 1px solid var(--brand-red);
        background: var(--brand-red);
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
      }
      .rgate__submit:hover { background: var(--brand-red-hover); border-color: var(--brand-red-hover); }
      .rgate__submit[disabled] { opacity: 0.6; cursor: default; }
      .rgate__note {
        margin: 0.7rem 0 0;
        font-family: var(--sans);
        font-size: 0.74rem;
        line-height: 1.5;
        color: var(--ink-muted);
      }
      .rgate__legal {
        margin: 0.75rem 0 0;
        font-family: var(--sans);
        font-size: 0.68rem;
        line-height: 1.45;
        color: var(--ink-muted);
      }
      .rgate__legal a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .rgate__legal a:hover { color: var(--brand-red); }
      .rgate__error {
        margin: 0.6rem 0 0;
        font-family: var(--sans);
        font-size: 0.8rem;
        color: var(--brand-red);
      }
      .rgate__done-note {
        margin: 0 0 1.1rem;
        font-family: var(--sans);
        font-size: 0.9rem;
        color: var(--ink-muted);
      }
      .rgate__open {
        font-family: var(--sans);
        font-weight: 700;
        font-size: 0.78rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--brand-red);
        text-decoration: none;
      }
      .rgate__open::after { content: ' >'; font-weight: 700; }
      .rgate__open:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }

      /* Logged-in admin bar: keep the report pop-up below WordPress's bar. */
      .admin-bar .rgate { top: 32px; }
      @media screen and (max-width: 782px) { .admin-bar .rgate { top: 46px; } }
      @media screen and (max-width: 600px) { .admin-bar .rgate { top: 0; } }