/* ==========================================================================
   Redesign — homepage refresh and shared component styles.
   Mobile-first, BEM. Tokens are exposed as CSS custom properties so any
   future redesigned component can pull from the same scale.
   ========================================================================== */

:root {
    /* Brand colors (from Figma variables) */
    --rd-orange: #ce4b12;
    --rd-yellow: #ddb03e;
    --rd-amber: #d99132;        /* deep amber — left-most stop of .cta-section__primary's gradient */
    --rd-navy: #333f48;
    --rd-navy-dark: #20272c;
    --rd-dark-gray: #2c3237;
    --rd-light-gray: #70777d;
    --rd-super-light-gray: #e2e2e2;
    --rd-white: #ffffff;

    /* Signature sunset gradient. Default is horizontal (orange → yellow).
       For the hero card the gradient runs bottom → top to match Figma.
       Reverse variant (yellow → orange) backs the Louisiana Bred banner. */
    --rd-gradient-sunset: linear-gradient(96deg, var(--rd-orange) 21%, var(--rd-yellow) 100%);
    --rd-gradient-sunset-vertical: linear-gradient(0deg, var(--rd-orange) 21%, var(--rd-yellow) 100%);
    --rd-gradient-sunset-reverse: linear-gradient(96deg, var(--rd-yellow) 0%, var(--rd-orange) 79%);

    /* Typography */
    --rd-font-sans: "calluna-sans", "Helvetica Neue", Arial, sans-serif;

    --rd-fs-h1: 52px;
    --rd-fs-h2: 48px;
    --rd-fs-h3: 32px;
    --rd-fs-h4: 24px;
    --rd-fs-h5: 20px;
    --rd-fs-h6: 17px;   /* Heading CAPS */
    --rd-fs-h7: 16px;   /* Heading CAPS bold */
    --rd-fs-body: 16px;
    --rd-fs-body-big: 20px;
    --rd-fs-cta: 16px;
    --rd-fs-cta-menu: 18px;
    --rd-fs-caption: 14px;

    --rd-lh-tight: 1.1;
    --rd-lh-snug: 1.2;
    --rd-lh-normal: 1.3;
    --rd-lh-body: 1.4;

    /* Layout */
    --rd-container-max: 1200px;
    --rd-gutter: 24px;
    --rd-gutter-lg: 60px;
    /* Distance from viewport edge to the page-container's edge. Used by
       full-bleed sections so their content still aligns with the container. */
    --rd-page-bleed: max(var(--rd-gutter), calc((100vw - var(--rd-container-max)) / 2));

    --rd-radius-sm: 3px;
    --rd-radius-md: 10px;

    --rd-section-pad: 60px;
    --rd-section-pad-lg: 96px;
}

/* ==========================================================================
   Section
   Shared bottom spacing for every <section> in template-parts/components.
   Component-specific stylesheets must NOT redeclare vertical padding on
   their root section selector — use this class as the single source of
   truth so stacked sections always have predictable spacing.
   ========================================================================== */

.section {
    margin-bottom: 48px;
}

@media (min-width: 1024px) {
    .section {
        margin-bottom: 80px;
    }
}

/* Flex-row sections on mobile: consistent 24px gap between every row. */
@media (max-width: 1023px) {
    .section.flex-row {
        margin-bottom: var(--rd-gutter);
    }
}

/* All timeline rows override the global .section margin-bottom at every
   breakpoint so the 24px gap matches the internal grid and flex spacing. */
.timeline-row-1,
.timeline-row-2,
.timeline-row-3,
.timeline-row-4,
.timeline-row-5,
.timeline-row-6,
.timeline-row-7,
.timeline-row-8 {
    margin-bottom: var(--rd-gutter);
}

/* ==========================================================================
   Accessibility — focus, touch targets, reduced-motion
   ========================================================================== */

/* Visible focus ring using brand color for all interactive redesign elements. */
.anniversary-hero__card:focus-visible,
.timeline-row-1 a:focus-visible,
.timeline-row-2 a:focus-visible,
.timeline-row-3 a:focus-visible,
.timeline-row-4 a:focus-visible,
.timeline-row-5 a:focus-visible,
.timeline-row-6 a:focus-visible,
.timeline-row-7 a:focus-visible,
.timeline-row-8 a:focus-visible,
.news-grid__heading a:focus-visible,
.news-grid__cat:focus-visible,
.cta-vibrant__cta:focus-visible {
    outline: 3px solid var(--rd-orange);
    outline-offset: 3px;
    border-radius: 2px;
}

/* WCAG 2.5.5 — minimum 44×44 CSS px touch target for news grid links. */
.news-grid__heading a {
    display: block;
    padding: 6px 0;
}

/* WCAG 2.5.5 — CTA vibrant button minimum 44px height. */
.cta-vibrant__cta,
.cta-vibrant__cta:link,
.cta-vibrant__cta:visited {
    min-height: 44px;
}

/* Respect reduced-motion preference for any transitions in redesign components. */
@media (prefers-reduced-motion: reduce) {
    .page-hero__cta,
    .professionals-highlight__featured,
    .professionals-highlight__card-media-link,
    .professionals-highlight__card-cta,
    .cta-vibrant__cta,
    .news-grid__heading a {
        transition: none;
    }

    .professionals-highlight__featured::after,
    .professionals-highlight__card-media-link::after {
        transition: none;
    }
}

/* ==========================================================================
   Page Hero
   ========================================================================== */

.page-hero,
.page-hero *,
.page-hero *::before,
.page-hero *::after {
    box-sizing: border-box;
}

/* Mobile-first: the section is a relative box. The background image fills
   the entire section (absolute, inset:0) and the container floats on top
   with equal page-bleed gutter on all four sides — that gutter is where
   the image shows as a frame around the card. */
.page-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.page-hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
}

.page-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-hero__media-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(206, 75, 18, 0.2), rgba(221, 166, 60, 0.2));
    mix-blend-mode: multiply;
}

.page-hero__container {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Mobile: card flushes against the top edge of the section (no top
       gutter), with page-bleed gutter on the other three sides so the
       background image shows on the left, right, and below. Overridden on
       tablet+ where the card pins to the top-right of a max-width container. */
    padding: 0 var(--rd-page-bleed) var(--rd-page-bleed);
}

.page-hero__card {
    position: relative;
    padding: 32px;
    color: var(--rd-white);
    background: var(--rd-gradient-sunset-vertical);
    /* Bottom corners rounded only — the card flushes against the top of the
       section on mobile, matching Figma 3274:3548. */
    border-radius: 0 0 11px 11px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.page-hero__group {
    display: flex;
    flex-direction: column;
}

.page-hero__title {
    margin: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h1);
    font-weight: 400;
    line-height: 57px;
    color: var(--rd-white);
}

/* Image-mode heading: the <h1> wraps an image; reset text properties so
   the image dimensions govern sizing rather than font metrics. */
.page-hero__title--image {
    font-size: 0;
    line-height: 0;
    margin-bottom: 16px;
}

.page-hero__title-img {
    display: block;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    font-size: var(--rd-fs-body);
    line-height: var(--rd-lh-body);
}

/* When the heading is an image, center the CTA button beneath it. */
.page-hero__group:has(.page-hero__title--image) .page-hero__cta,
.page-hero__group:has(.page-hero__title--image) .page-hero__cta:link,
.page-hero__group:has(.page-hero__title--image) .page-hero__cta:visited {
    align-self: center;
}

.page-hero__cta {
    align-self: flex-start;
    margin-top: 16px;
}

.page-hero__cta-icon {
    font-size: 16px;
    line-height: 1.3;
}

/* ----- Tablet+ : media fills the banner, card pins to the top-right ------
   The mobile "frame around the card" layout only applies below 768px. */

@media (min-width: 768px) {
    /* Structural — lets the absolutely-positioned media (inset:0 fills the
       padding box) extend 80px past the card's bottom. This is separate from
       the section-stacking spacing controlled by `.section { margin-bottom }`. */
    .page-hero {
        padding-bottom: 80px;
    }

    /* Standard "100% width object stops at page-bleed" pattern — same as
       every other section's container (page-intro, cta-section, etc.). The
       card sits inside this constrained box and pushes itself to the right
       with `margin-left: auto`, so its right edge always lands on the
       standard content right edge with a guaranteed gutter from the viewport. */
    .page-hero__container {
        width: 100%;
        padding: 0 var(--rd-page-bleed);
    }

    .page-hero__card {
        width: 400px;
        max-width: 100%;
        margin: 0 0 0 auto;
        padding: 50px;
        /* Only the bottom corners rounded — the card flushes against the
           top of the section on desktop. */
        border-radius: 0 0 11px 11px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    }

    .page-hero__cta {
        align-self: center;
    }

    .page-hero__title {
        font-size: var(--rd-fs-h1);
        line-height: 57px;
    }

    .page-hero--card-left .page-hero__card {
        margin: 0 auto 0 0;
    }
}

@media (min-width: 1200px) {
    .page-hero__container {
        padding-left: var(--rd-gutter-lg);
        padding-right: var(--rd-gutter-lg);
    }
}

/* ==========================================================================
   Anniversary Hero
   Full-bleed 540px banner. Background photo fills the section absolutely;
   gradient card floats on the left containing the transparent logo.
   ========================================================================== */

.anniversary-hero,
.anniversary-hero *,
.anniversary-hero *::before,
.anniversary-hero *::after {
    box-sizing: border-box;
}

/* Negate #content's default padding-top so the hero sits at the very top. */
.page-template-template-30th-anniversary #content {
    padding-top: 0;
}

/* CTA Vibrant and News Grid on the anniversary page break out of the content
   container on mobile to span the full viewport width. */
@media (max-width: 1023px) {
    .page-template-template-30th-anniversary .cta-vibrant,
    .page-template-template-30th-anniversary .news-grid {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
    }
}

.anniversary-hero {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    height: 500px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    /* Card is flush with the left viewport edge on desktop */
    padding: 0;
    margin-bottom: var(--rd-section-pad);
}

.anniversary-hero__bg {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    z-index: 0;
}

.anniversary-hero__bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Square card: aspect-ratio 1/1 matches the full hero height.
   Top corners flush with the hero top; bottom corners rounded. */
.anniversary-hero__card {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    align-self: stretch;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--rd-gutter-lg) + var(--rd-gutter));
    background: linear-gradient(180deg, var(--rd-yellow) 0%, var(--rd-orange) 100%);
    border-radius: 0 0 10.75px 10.75px;
}

.anniversary-hero__logo {
    display: block;
    width: 100%;
    height: auto;
}

/* Mobile: card is flush with the top, 24px on left, right, and bottom only.
   No top radius — card butts against the hero top edge.
   Background peeks through on the left, right, and bottom. */
@media (max-width: 767px) {
    .anniversary-hero {
        height: auto;
        padding: 0 var(--rd-gutter) var(--rd-gutter);
        justify-content: center;
        align-items: flex-start;
    }

    .anniversary-hero__card {
        aspect-ratio: auto;
        align-self: auto;
        width: 100%;
        border-radius: 0 0 10.75px 10.75px;
        padding: var(--rd-gutter);
    }

    .anniversary-hero__logo {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   Page Intro
   ========================================================================== */

.page-intro,
.page-intro *,
.page-intro *::before,
.page-intro *::after {
    box-sizing: border-box;
}

/* Container spans the standard content constraint (page-bleed aligned —
   same left/right edges as cta-section, professionals-highlight, etc.). The
   inner text is capped at 950px so the body copy stays readable. */
.page-intro__container {
    width: 100%;
    padding: 0 var(--rd-page-bleed);
}

.page-intro__eyebrow,
.page-intro__title,
.page-intro__content {
    max-width: 950px;
}

.page-intro__eyebrow {
    margin: 0 0 4px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h6);
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rd-dark-gray);
}

.page-intro__title {
    margin: 0 0 20px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h1);
    font-weight: 400;
    line-height: 57px;
    text-transform: none;
    color: var(--rd-dark-gray);
}

.page-intro__content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    font-weight: 400;
    line-height: 1.4;
    color: var(--rd-dark-gray);
}

.page-intro__content p {
    margin: 0 0 16px;
}

.page-intro__content p:last-child {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .page-intro__title {
        font-size: var(--rd-fs-h1);
        line-height: 57px;
    }
}

/* ==========================================================================
   CTA Section
   Two-column section where the left boxes bleed to the viewport's LEFT edge
   and the right box bleeds to the viewport's RIGHT edge. Content inside each
   box is padded so it still aligns with the standard page container.
   ========================================================================== */

.cta-section,
.cta-section *,
.cta-section *::before,
.cta-section *::after {
    box-sizing: border-box;
}

.cta-section {
    position: relative;
    width: 100%;
}

/* Decorative image: child of the left column, fills its full height so it
   spans both the orange and gray boxes. Bleeds left past the section gutter
   so it sits flush with the viewport edge. Hidden on mobile. */
.cta-section__image {
    display: none;
    position: absolute;
    left: calc(-1 * var(--rd-gutter));
    top: 0;
    bottom: 0;
    width: 130px;
    margin: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.cta-section__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.cta-section__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    /* Mobile: no horizontal padding on the grid — individual cards manage
       their own bleed/inset so the primary banner and dark-gray CTAs block
       can run full-bleed while the featured card stays inset.
       Desktop restores its grid layout below. */
    padding: 0;
}

/* Mobile: dissolve __left so its children (image, primary, featured) become
   direct flex children of __grid alongside __right. Combined with the
   `order` rules below, this gives the Figma mobile sequence:
   primary (Louisiana Bred) → right (dark-gray CTAs) → featured (gray card). */
.cta-section__left {
    display: contents;
}

.cta-section__primary { order: 1; }
.cta-section__right { order: 2; }
.cta-section__featured { order: 3; }

/* ----- Louisiana Bred banner (CTA First) -----
   Mobile: full-bleed yellow→orange gradient panel, ~400px tall, with a
   decorative photo bleeding past the viewport's left edge and a
   right-aligned white headline. Desktop overrides restore the amber→orange
   left-column treatment. */

.cta-section__primary {
    position: relative;
    overflow: hidden;
    background: var(--rd-gradient-sunset-reverse);
    color: var(--rd-white);
    border-radius: 0;
    min-height: 400px;
    padding: 60px var(--rd-gutter);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cta-section__primary-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.cta-section__primary-title {
    margin: 0 0 0 auto;
    max-width: 75%;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h2);
    font-weight: 400;
    line-height: 52px;
    color: var(--rd-white);
    text-align: right;
    text-transform: none;
}

/* Decorative photo bleeding off the viewport's left edge — only rendered on
   mobile (matches Figma node 3274:3588 at x=-12, w=129, h=400). On desktop
   the larger `.cta-section__image` takes over. */
.cta-section__primary-media {
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 129px;
    margin: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.cta-section__primary-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ----- Featured blog post (gray) ----- */

.cta-section__featured {
    background: #e2e2e2;
    color: var(--rd-navy-dark);
    border-radius: 0;
    padding: 48px var(--rd-gutter);
    /* Mobile: full-bleed, no side gutters. */
    margin: 0;
}

.cta-section__featured-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cta-section__featured-divider {
    display: block;
    width: 33px;
    height: 6px;
    margin: 38px 0;
    background: var(--rd-orange);
}

.cta-section__featured-title {
    margin: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: 1.2;
    color: var(--rd-navy-dark);
    text-transform: none;
}

.cta-section__featured-title a,
.cta-section__featured-title a:link,
.cta-section__featured-title a:visited {
    color: inherit;
    text-decoration: none;
}

.cta-section__featured-title a:hover,
.cta-section__featured-title a:focus {
    color: var(--rd-orange);
    text-decoration: none;
}

.cta-section__featured-excerpt {
    margin: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big) !important;
    line-height: 1.4;
    color: var(--rd-navy-dark);
}

/* ----- Featured carousel (slides + controls) ----- */

.cta-section__featured-slides {
    display: grid;
}

/* All slides occupy the same grid cell so they stack on top of each other.
   The container's height tracks the tallest slide. */
.cta-section__featured-slide {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.cta-section__featured-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.cta-section__featured-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.cta-section__featured-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cta-section__featured-dots li {
    display: flex;
    margin: 0;
}

.cta-section__featured-dot {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rd-light-gray);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cta-section__featured-dot:hover,
.cta-section__featured-dot:focus {
    background: rgba(112, 119, 125, 0.4);
    outline: none;
}

.cta-section__featured-dot.is-active {
    background: var(--rd-light-gray);
    opacity: 0.5;
}

.cta-section__featured-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rd-light-gray);
    border-radius: 50%;
    background: transparent;
    color: var(--rd-light-gray);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cta-section__featured-toggle:hover,
.cta-section__featured-toggle:focus {
    background: var(--rd-light-gray);
    color: var(--rd-white);
    outline: none;
}

.cta-section__featured-toggle-icon {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
}

/* Pause state: two thin vertical bars matching Figma 3199:1884. */
.cta-section__featured-toggle.is-playing .cta-section__featured-toggle-icon::before,
.cta-section__featured-toggle.is-playing .cta-section__featured-toggle-icon::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: currentColor;
}

.cta-section__featured-toggle.is-playing .cta-section__featured-toggle-icon::before {
    left: 1px;
}

.cta-section__featured-toggle.is-playing .cta-section__featured-toggle-icon::after {
    right: 1px;
}

/* Paused state: right-pointing play triangle in the same circle. */
.cta-section__featured-toggle:not(.is-playing) .cta-section__featured-toggle-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    width: 0;
    height: 0;
    border-left: 10px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translate(-50%, -50%);
}

/* ----- Dark gray block wrapping CTA Second + Third -----
   Mobile: full-bleed dark panel (no rounded corners) holding both CTAs
   stacked vertically. Desktop overrides re-add rounding + side bleed. */

.cta-section__right {
    background: var(--rd-dark-gray);
    color: var(--rd-white);
    border-radius: 0;
    padding: 48px var(--rd-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
}

.cta-section__right-inner {
    display: contents;
}

.cta-section__cta {
    /* Each CTA renders as a stacked eyebrow/title/content block. */
}

.cta-section__cta-eyebrow {
    margin: 0 0 8px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h6);
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rd-white);
}

.cta-section__cta-title {
    margin: 0 0 16px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h2);
    font-weight: 400;
    line-height: 52px;
    color: var(--rd-white);
    text-transform: none;
}

.cta-section__cta-content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: 1.4;
    color: var(--rd-white);
}

.cta-section__cta-content p {
    margin: 0 0 12px;
}

.cta-section__cta-content p:last-child {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .cta-section__image {
        /* Left column starts at viewport-left on desktop, so no negative offset. */
        display: block;
        left: 0;
        width: 225px;
    }

    /* Mobile-only decorative photo inside the primary banner — the larger
       `.cta-section__image` takes over on desktop. */
    .cta-section__primary-media {
        display: none;
    }

    /* Only the featured (gray) box shifts to clear the image; the orange box
       keeps the calc'd padding defined later in this media query. */
    .cta-section--has-image .cta-section__featured {
        padding-left: max(var(--rd-page-bleed), 255px);
    }

    .cta-section__right {
        gap: 130px;
    }

    .cta-section__grid {
        display: grid;
        grid-template-columns: 2fr 3fr;
        column-gap: 24px;
        align-items: stretch;
    }

    /* Restore the left column wrapper (mobile uses `display: contents` so
       primary + featured can interleave with the right column for ordering). */
    .cta-section__left {
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 24px;
    }

    .cta-section__primary,
    .cta-section__right,
    .cta-section__featured {
        order: 0;
    }

    /* Featured returns to its left-column slot; mobile inset margin is reset. */
    .cta-section__featured {
        margin: 0;
    }

    /* Primary returns to the amber → orange desktop gradient + left-aligned
       headline. Mobile-only properties (min-height, overflow, right-flex)
       are reset so the desktop padding rule below controls geometry. */
    .cta-section__primary {
        background: linear-gradient(96deg, var(--rd-amber) 21%, var(--rd-orange) 100%);
        min-height: 0;
        overflow: visible;
        justify-content: flex-start;
    }

    .cta-section__primary-title {
        max-width: none;
        margin: 0;
        text-align: left;
    }

    /* Left boxes bleed to the LEFT viewport edge; content padded so its
       left edge aligns with the page container's left edge. */
    .cta-section__primary,
    .cta-section__featured {
        padding: 64px 48px 64px var(--rd-page-bleed);
        border-radius: 0 var(--rd-radius-md) var(--rd-radius-md) 0;
        flex: 1;
    }

    /* Right box bleeds to the RIGHT viewport edge; content padded so its
       right edge aligns with the page container's right edge. Top padding
       matches the left padding (78px) and content is top-aligned. */
    .cta-section__right {
        padding: 78px var(--rd-page-bleed) 64px 78px;
        border-radius: var(--rd-radius-md) 0 0 var(--rd-radius-md);
        justify-content: flex-start;
    }

    .cta-section__primary {
        padding: 150px 48px 150px calc((100px + var(--rd-page-bleed)) / 2);
    }

    .cta-section__featured-title {
        font-size: 32px;
    }

    .cta-section__cta-content {
        max-width: 661px;
    }
}

/* ==========================================================================
   Professionals Highlight
   Section heading sits above a three-card row. The large featured news
   article on the left bleeds to the viewport's left edge at all widths
   (mirrors the legacy .featured-professional-article behavior); the two
   attorney cards on the right stay inside the page container.
   ========================================================================== */

.professionals-highlight,
.professionals-highlight *,
.professionals-highlight *::before,
.professionals-highlight *::after {
    box-sizing: border-box;
}

/* Title sits inside a constrained head wrapper. Its left edge uses
   --rd-page-bleed so it aligns with the featured card's content padding. */
.professionals-highlight__head {
    width: 100%;
    padding-left: var(--rd-page-bleed);
    padding-right: var(--rd-page-bleed);
}

.professionals-highlight__title {
    margin: 0 0 32px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: 36px;
    color: var(--rd-navy);
    text-transform: none;
}

/* ----- Optional transitional photo between the title and the featured card.
   Mobile: full-bleed, ~361px tall (matches Figma node 3274:3677).
   Tablet+: contained within the page bleed with rounded corners. */

/* Mobile-only image stacked directly above the featured card. Touches the
   card with no gap (matches Figma node 3274:3677 + Group 132). Hidden at
   tablet+, where the featured card shows its own background photo. */
.professionals-highlight__mobile-image {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.professionals-highlight__mobile-image img {
    display: block;
    width: 100%;
    height: 361px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .professionals-highlight__mobile-image {
        display: none;
    }
}

/* Grid spans the full viewport width. Right padding keeps right-side cards
   aligned with the page container; the featured card has no left padding so
   it bleeds to the viewport's left edge. */
/* Mobile keeps the page gutter on both sides — the featured card stays
   inside the container. Tablet+ removes the left gutter so the card can
   bleed to the viewport's left edge. */
.professionals-highlight__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 var(--rd-page-bleed);
}

/* ----- Featured article (left card) — bleeds to viewport-left on tablet+ ----- */

.professionals-highlight__featured,
.professionals-highlight__featured:link,
.professionals-highlight__featured:visited {
    position: relative;
    display: block;
    /* Mobile: plain dark-gray text card (no background photo). Card escapes
       the grid's page-bleed padding so it goes edge-to-edge. Matches Figma
       node 3274:3606. Tablet+ swaps in the photo-background design below. */
    min-height: 0;
    border-radius: 0;
    overflow: hidden;
    color: var(--rd-white);
    text-decoration: none;
    background-color: var(--rd-dark-gray);
    margin: 0 calc(var(--rd-page-bleed) * -1);
    isolation: isolate;
}

/* Specificity needs to beat the global `a:visited:hover` (0,2,1) — that's
   what makes visited links flash orange + underlined on hover. */
.professionals-highlight__featured:hover,
.professionals-highlight__featured:focus,
.professionals-highlight__featured:visited:hover,
.professionals-highlight__featured:visited:focus {
    color: var(--rd-white);
    text-decoration: none;
}

/* Mobile: image renders as a static block above the body text, full-bleed
   (the card itself already escapes the grid gutter). Tablet+: restored to an
   absolute background layer by the media query below. */
.professionals-highlight__featured-media {
    display: block;
    position: static;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.professionals-highlight__featured-media img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: right top;
}

.professionals-highlight__featured-tint {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.5) 38%,
        rgba(0, 0, 0, 0) 80%
    );
}

/* Mobile: simple top-down stack — pill, title, CTA — with even padding
   matching Figma node 3274:3606 (46px top, 32px sides, 45px bottom).
   Tablet+ overrides below switch to the bottom-anchored layout that pairs
   with the background photo. */
.professionals-highlight__featured-body {
    position: relative;
    /* z-index 3 keeps the text above both the dark left-tint (1) and the
       yellow-wash hover overlay (2). */
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 46px 32px 45px;
    min-height: 0;
}

.professionals-highlight__featured-cat {
    display: inline-block;
    margin: 0 0 32px;
    padding: 3px 10px;
    border: 1px solid var(--rd-white);
    border-radius: var(--rd-radius-sm);
    background: #3f3f3f;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-caption);
    font-weight: 700;
    line-height: 18px;
    color: var(--rd-white);
}

.professionals-highlight__featured-title {
    margin: 0 0 22px;
    width: 100%;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h4);
    font-weight: 400;
    line-height: 29px;
    color: var(--rd-white);
    text-transform: none;
}

.professionals-highlight__featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-cta);
    font-weight: 700;
    line-height: 1.25;
    color: var(--rd-white);
    text-decoration: none;
    transition: padding-left 0.2s ease;
}

.professionals-highlight__featured-cta-label {
    color: var(--rd-white);
    text-decoration: none;
}

.professionals-highlight__featured-cta-icon {
    font-size: 16px;
    color: var(--rd-white);
}

/* Keep everything white with no underline on hover/focus — overrides the
   global `a:hover`, `a:hover i`, and `a:visited:hover` rules. */
.professionals-highlight__featured:hover .professionals-highlight__featured-cat,
.professionals-highlight__featured:focus .professionals-highlight__featured-cat,
.professionals-highlight__featured:hover .professionals-highlight__featured-title,
.professionals-highlight__featured:focus .professionals-highlight__featured-title,
.professionals-highlight__featured:hover .professionals-highlight__featured-cta,
.professionals-highlight__featured:focus .professionals-highlight__featured-cta,
.professionals-highlight__featured:hover .professionals-highlight__featured-cta-label,
.professionals-highlight__featured:focus .professionals-highlight__featured-cta-label,
.professionals-highlight__featured:hover .professionals-highlight__featured-cta-icon,
.professionals-highlight__featured:focus .professionals-highlight__featured-cta-icon {
    color: var(--rd-white);
    text-decoration: none;
}

.professionals-highlight__featured:hover .professionals-highlight__featured-cta,
.professionals-highlight__featured:focus .professionals-highlight__featured-cta {
    padding-left: 4px;
}

/* ----- Right-side card stack (wraps the two professional cards) ----- */

.professionals-highlight__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

/* ----- Professional cards ----- */

.professionals-highlight__card {
    display: flex;
    flex-direction: column;
    /* No flex gap — sibling margins below let us tighten the specialties
       label → list pair without disturbing the rest of the card. */
}

.professionals-highlight__card > * + * {
    margin-top: 16px;
}

.professionals-highlight__card-media-link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rd-radius-sm);
    line-height: 0;
}

.professionals-highlight__card-photo {
    display: block;
    width: 100%;
    aspect-ratio: 280 / 180;
    object-fit: cover;
    background: #e6e6e6;
    transition: transform 0.3s ease;
}

.professionals-highlight__card-photo--placeholder {
    background: #e6e6e6;
}

.professionals-highlight__card-media-link:hover .professionals-highlight__card-photo,
.professionals-highlight__card-media-link:focus .professionals-highlight__card-photo {
    transform: scale(1.02);
}

.professionals-highlight__card-name {
    /* 12px above and below the name. Overrides the general 16px sibling
       margin above; the explicit margin-bottom is what spaces the name
       away from the "Specialties" label below (whose own `margin: 0` would
       otherwise leave zero gap). */
    margin: 12px 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h4);
    font-weight: 400;
    line-height: 29px;
    color: var(--rd-navy);
    text-transform: none;
}

.professionals-highlight__card-name a,
.professionals-highlight__card-name a:link,
.professionals-highlight__card-name a:visited {
    color: inherit;
    text-decoration: none;
}

.professionals-highlight__card-name a:hover,
.professionals-highlight__card-name a:focus {
    color: var(--rd-orange);
    text-decoration: none;
}

.professionals-highlight__card-specialties-label {
    margin: 0;
    font-family: var(--rd-font-sans);
    /* H5 token (20px). !important beats legacy `#content article p` rule. */
    font-size: var(--rd-fs-h5) !important;
    font-weight: 400;
    line-height: 1.2;
    color: var(--rd-navy);
}

/* Tighter than the standard 12px sibling gap — the "Specialties" label
   should sit right above the list of specialties. Overrides the
   `.card > * + *` rule above. */
.professionals-highlight__card-specialties {
    margin-top: 4px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-family: var(--rd-font-sans);
    /* Caption token (14px). !important needed to beat the legacy
       `.specialties-container` rule in base.css that sizes this 16px. */
    font-size: var(--rd-fs-caption) !important;
    font-weight: 400;
    line-height: 1.4;
    color: var(--rd-navy);
}

.professionals-highlight__card-specialties a,
.professionals-highlight__card-specialties a:link,
.professionals-highlight__card-specialties a:visited {
    color: inherit;
    text-decoration: underline;
}

.professionals-highlight__card-specialties a:hover,
.professionals-highlight__card-specialties a:focus {
    color: var(--rd-orange);
}

.professionals-highlight__card-cta,
.professionals-highlight__card-cta:link,
.professionals-highlight__card-cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* margin-top handled by `.card > * + *` (16px). */
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-cta);
    font-weight: 700;
    line-height: 1.25;
    color: var(--rd-orange);
    text-decoration: none;
    transition: padding-left 0.2s ease;
}

.professionals-highlight__card-cta:hover,
.professionals-highlight__card-cta:focus {
    padding-left: 4px;
    color: var(--rd-orange);
    text-decoration: none;
}

.professionals-highlight__card-cta-icon {
    font-size: 16px;
}

@media (min-width: 768px) {
    /* Tablet+: featured card escapes the left gutter and bleeds to the
       viewport's left edge; the cards wrapper picks up its own page-bleed
       so the right-side cards still respect the page container. */
    .professionals-highlight__grid {
        padding-left: 0;
    }

    /* Tablet+: restore the photo-backed card. Cancel the mobile dark-gray
       text-only treatment (background, full-bleed margin, no min-height) and
       re-enable the photo + tint layers. */
    .professionals-highlight__featured,
    .professionals-highlight__featured:link,
    .professionals-highlight__featured:visited {
        min-height: 361px;
        border-radius: 0 var(--rd-radius-md) var(--rd-radius-md) 0;
        background-color: var(--rd-navy);
        margin: 0;
    }

    .professionals-highlight__featured-media,
    .professionals-highlight__featured-tint {
        display: block;
    }

    /* Restore the absolute background-photo layer at tablet+. */
    .professionals-highlight__featured-media {
        position: absolute;
        inset: 0;
        width: auto;
        z-index: 0;
    }

    .professionals-highlight__featured-media img {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .professionals-highlight__featured-body {
        padding: 41px 32px 41px var(--rd-page-bleed);
    }

    .professionals-highlight__featured-cat {
        margin: 0 0 40px;
    }

    /* Tablet+: title is capped at 50% so the right half stays clear of the
       photo (mirrors legacy `.featured-professional-article .article-title`). */
    .professionals-highlight__featured-title {
        width: 50%;
    }

    .professionals-highlight__cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding-left: var(--rd-page-bleed);
    }
}

/* ----- Hover overlay: transparent → yellow vertical gradient that fades in
   on hover/focus over both the featured article's photo and every
   professional card's photo. Mirrors the legacy `.featured-professional__overlay`
   behavior. The overlay sits between the dark left-tint (z-index 1) and the
   featured body content (z-index 3) so it never washes the text. */

.professionals-highlight__featured::after,
.professionals-highlight__card-media-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--rd-yellow) 100%);
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}

.professionals-highlight__featured::after {
    z-index: 2;
}

.professionals-highlight__card-media-link::after {
    z-index: 1;
}

.professionals-highlight__featured:hover::after,
.professionals-highlight__featured:focus::after,
.professionals-highlight__card-media-link:hover::after,
.professionals-highlight__card-media-link:focus::after {
    opacity: 0.33;
}

@media (min-width: 1024px) {
    /* Two-column row: featured cell hugs the left (bleeds), the two cards
       share the right cell within the page container. */
    .professionals-highlight__grid {
        grid-template-columns: minmax(0, 681fr) minmax(0, 584fr);
        column-gap: 24px;
        align-items: start;
    }

    .professionals-highlight__cards {
        padding-left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .professionals-highlight__featured-body {
        padding: 41px 40px 41px var(--rd-page-bleed);
    }
}

/* ==========================================================================
   CTA Vibrant
   Full-bleed sunset gradient with a decorative photo overhanging the
   top-right corner on desktop. Mobile collapses to gradient + content only.
   ========================================================================== */

.cta-vibrant,
.cta-vibrant *,
.cta-vibrant *::before,
.cta-vibrant *::after {
    box-sizing: border-box;
}

.cta-vibrant {
    position: relative;
    background: var(--rd-gradient-sunset);
    overflow: hidden;
    isolation: isolate;
}

/* Mobile: decorative photo sits below the title + CTA inside the gradient
   panel, full-bleed so it touches both viewport edges.
   Tablet+ overrides reposition it absolutely against the right edge. */
.cta-vibrant__media {
    display: block;
    width: 100%;
    padding: 0;
    margin: 8px 0 0;
}

.cta-vibrant__media img {
    display: block;
    width: 100%;
    height: 192px;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
}

/* Padding-left/right uses --rd-page-bleed so the title and CTA sit on the
   same left edge as every other section (cta-section, professionals-highlight,
   etc.). No max-width on the container: page-bleed is calculated relative to
   the viewport, so adding max-width would double-offset on wide screens. */
.cta-vibrant__container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 48px var(--rd-page-bleed) 20px;
}

.cta-vibrant__title {
    margin: 0 0 24px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h2);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: var(--rd-white);
    text-transform: none;
    max-width: 400px;
}

.cta-vibrant__cta-icon {
    font-size: 16px;
}

@media (min-width: 768px) {
    /* Tablet: photo is visible (right side, smaller than desktop, no overhang)
       and the content column is reserved on the left so the title doesn't
       overlap the image. Mobile inline-flow styling (padding, margin, height)
       is reset because the photo is now absolutely positioned. */
    .cta-vibrant__media {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 45%;
        max-width: 540px;
        padding: 0;
        margin: 0;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
    }

    .cta-vibrant__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
        /* Anchor the photo to its left edge so the focal subject stays
           visible when the tablet crop hides the right half. */
        object-position: left center;
    }

    .cta-vibrant__title {
        font-size: 36px;
        max-width: 420px;
    }

    .cta-vibrant__container {
        padding: 80px var(--rd-page-bleed);
        /* Reserve the right half for the photo so the title never sits on top of it. */
        padding-right: 50%;
    }
}

@media (min-width: 1024px) {
    /* Section is taller than the gradient panel below it so the photo can
       hang above the panel's top edge (matches Figma node 3199:1889). */
    .cta-vibrant {
        background: transparent;
        overflow: visible;
        min-height: 599px;
    }

    /* The gradient panel sits inset 69px from the section top, with a 10px
       radius — corners are visible on the left where the photo doesn't sit. */
    .cta-vibrant::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 69px;
        bottom: 0;
        background: var(--rd-gradient-sunset);
        border-radius: var(--rd-radius-md);
        z-index: 0;
    }

    .cta-vibrant__media {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 73%;
        height: 100%;
        max-width: 1048px;
        overflow: hidden;
        border-radius: var(--rd-radius-md);
        z-index: 1;
        pointer-events: none;
    }

    .cta-vibrant__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Top padding = 69px image overhang + 183px title offset from gradient top.
       Bottom padding = 599 - title-y - title-h - button-h ≈ 174px. */
    .cta-vibrant__container {
        padding: 252px var(--rd-page-bleed) 174px;
    }

    .cta-vibrant__title {
        font-size: 44px;
        line-height: 1.3;
        letter-spacing: -1.32px;
        max-width: 377px;
    }
}

/* ==========================================================================
   News Grid
   Section title above a 3-col (desktop) grid of the latest 6 posts. Each
   card stacks: optional category eyebrow → date → orange 44×4 divider →
   article title. Typography matches Figma node 3199:1801.
   ========================================================================== */

.news-grid,
.news-grid *,
.news-grid *::before,
.news-grid *::after {
    box-sizing: border-box;
}

.news-grid__container {
    width: 100%;
    padding: 0 var(--rd-page-bleed);
}

.news-grid__title {
    margin: 0 0 48px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);   /* 32px */
    font-weight: 400;
    line-height: 36px;
    color: var(--rd-navy);
    text-transform: none;
}

.news-grid__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-grid__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-grid__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Mobile gap (divider is hidden on mobile, so the card uses a flex gap
       to keep eyebrow/date/title visually separated). Reset on tablet+
       where the divider takes over its own margin-based spacing. */
    gap: 12px;
}

@media (min-width: 768px) {
    .news-grid__card {
        gap: 0;
    }
}

.news-grid__cat,
.news-grid__cat:link,
.news-grid__cat:visited {
    /* H7 token: 16/25 bold uppercase orange. */
    margin: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h7);   /* 16px */
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--rd-orange);
    text-decoration: none;
}

.news-grid__cat:hover,
.news-grid__cat:focus,
.news-grid__cat:visited:hover {
    color: var(--rd-orange);
    text-decoration: underline;
}

.news-grid__date {
    /* H5 token: 20/25 regular navy. Displayed all caps per Figma. */
    margin: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h5);   /* 20px */
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--rd-navy);
}

.news-grid__divider {
    /* Hidden on mobile — Figma node 3274:3653 shows the eyebrow/date/title
       stacking directly without a divider. Restored on tablet+ below. */
    display: none;
    width: 44px;
    height: 4px;
    margin: 13px 0 14px;
    background: var(--rd-orange);
}

@media (min-width: 768px) {
    .news-grid__divider {
        display: block;
    }
}

.news-grid__heading {
    /* H4 token: 24/29 regular navy. */
    margin: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h4);   /* 24px */
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0;
    color: var(--rd-navy);
    text-transform: none;
}

.news-grid__heading a,
.news-grid__heading a:link,
.news-grid__heading a:visited {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-grid__heading a:hover,
.news-grid__heading a:focus {
    color: var(--rd-orange);
    text-decoration: none;
}

@media (min-width: 768px) {
    .news-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 60px 30px;
    }
}

@media (min-width: 1024px) {
    .news-grid__title {
        margin-bottom: 60px;
    }

    .news-grid__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 80px 30px;
    }
}

/* ==========================================================================
   Flex Row — shared class for all 30th Anniversary flexible content layouts.
   Applied to every row's <section> element alongside its specific class.
   Full-viewport-width override on mobile escapes WordPress content gutters.
   ========================================================================== */

@media (max-width: 1023px) {
    .flex-row {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
    }
}

/* ==========================================================================
   Timeline Row 1 (30th Anniversary flexible content layout)
   Mobile-first, BEM. Uses --rd-* tokens throughout.
   ========================================================================== */

.timeline-row-1,
.timeline-row-1 *,
.timeline-row-1 *::before,
.timeline-row-1 *::after {
    box-sizing: border-box;
}

.timeline-row-1__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 var(--rd-page-bleed);
}

@media (min-width: 1024px) {
    .timeline-row-1__container {
        grid-template-columns: 3fr 2fr;
        gap: var(--rd-gutter-lg);
    }
}

/* ----- Left column ----- */

.timeline-row-1__eyebrow {
    margin: 0 0 8px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h6);
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rd-dark-gray);
}

.timeline-row-1__title {
    margin: 0 0 24px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-snug);
    letter-spacing: -0.03em;
    color: var(--rd-dark-gray);
    text-transform: none;
}

@media (min-width: 1024px) {
    .timeline-row-1__title {
        font-size: 44px;
    }
}

.timeline-row-1__content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-dark-gray);
}

.timeline-row-1__content p {
    margin: 0 0 24px;
}

.timeline-row-1__content p:last-child {
    margin-bottom: 0;
}

/* ----- Right column ----- */

/* Mobile: stack year block and milestone full-bleed, column-direction.
   Negative margins cancel out the container's page-bleed padding so the
   boxes run edge-to-edge on small screens. */
.timeline-row-1__right {
    display: flex;
    flex-direction: column;
    margin-left: calc(-1 * var(--rd-page-bleed));
    margin-right: calc(-1 * var(--rd-page-bleed));
}

.timeline-row-1__year-block {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rd-gutter);
    background: linear-gradient(180deg, var(--rd-yellow) 0%, var(--rd-orange) 100%);
}

.timeline-row-1__year {
    font-family: var(--rd-font-sans);
    font-size: 48px;
    font-weight: 400;
    color: var(--rd-white);
    letter-spacing: 0.02em;
}

.timeline-row-1__milestone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--rd-gutter);
    background: linear-gradient(180deg, #F8EED8 0%, #F5DBD0 100%);
}

/* Desktop: side-by-side. The milestone slides 15px left behind the year block
   so its left border-radius is hidden, making them read as one seamless unit.
   margin-right: -15px compensates so the milestone's right edge still reaches
   the container's right edge despite the left shift. z-index keeps the year
   block on top of the overlap area. */
@media (min-width: 1024px) {
    .timeline-row-1__right {
        flex-direction: row;
        align-items: stretch;
        margin-left: 0;
        margin-right: 0;
    }

    .timeline-row-1__year-block {
        flex: 0 0 160px;
        min-height: 220px;
        padding: 0;
        border-radius: 10.75px;
        position: relative;
        z-index: 1;
    }

    .timeline-row-1__milestone {
        flex: 1;
        min-width: 0;
        position: relative;
        left: -15px;
        margin-right: -15px;
        padding: var(--rd-gutter);
        padding-left: calc(var(--rd-gutter) + 15px);
        border-radius: 10.75px;
    }
}

.timeline-row-1__milestone-title {
    margin: 0 0 16px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    color: var(--rd-dark-gray);
    text-transform: none;
}

.timeline-row-1__milestone-content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-dark-gray);
}

.timeline-row-1__milestone-content p {
    margin: 0 0 16px;
}

.timeline-row-1__milestone-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Timeline Row 2 (30th Anniversary flexible content layout)
   Three-column grid: light-gray left box | photo | two dark-gray right boxes.
   ========================================================================== */

.timeline-row-2,
.timeline-row-2 *,
.timeline-row-2 *::before,
.timeline-row-2 *::after {
    box-sizing: border-box;
}

/* Mobile: single column, full-bleed. Desktop: three columns (left-col fixed, center photo fixed, right). */
.timeline-row-2__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .timeline-row-2__container {
        grid-template-columns: 1fr 250px 1fr;
        align-items: stretch;
        gap: var(--rd-gutter);
        padding: 0 var(--rd-page-bleed);
    }
}

/* ----- Left column: gray box stacked above banner image ----- */

.timeline-row-2__left-col {
    display: flex;
    flex-direction: column;
    gap: var(--rd-gutter);
}

@media (max-width: 1023px) {
    .timeline-row-2__left-col {
        gap: 0;
    }
}

.timeline-row-2__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--rd-gutter);
    background: var(--rd-super-light-gray);
}

@media (min-width: 1024px) {
    .timeline-row-2__left {
        border-radius: var(--rd-radius-md);
    }
}

.timeline-row-2__year {
    margin: 0 0 8px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h2);
    font-weight: 400;
    line-height: var(--rd-lh-snug);
    color: var(--rd-dark-gray);
    text-transform: none;
}

.timeline-row-2__title {
    margin: 0 0 16px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    color: var(--rd-dark-gray);
    text-transform: none;
}

.timeline-row-2__content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-dark-gray);
}

.timeline-row-2__content p {
    margin: 0 0 16px;
}

.timeline-row-2__content p:last-child {
    margin-bottom: 0;
}

/* ----- Thin banner image below the left gray box ----- */

.timeline-row-2__banner {
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .timeline-row-2__banner {
        border-radius: var(--rd-radius-md);
    }
}

.timeline-row-2__banner-img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    object-position: center;
}

/* ----- Center photo ----- */

.timeline-row-2__media {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 1023px) {
    .timeline-row-2__media {
        aspect-ratio: 16 / 9;
        margin-top: var(--rd-gutter);
    }
}

@media (min-width: 1024px) {
    .timeline-row-2__media {
        border-radius: var(--rd-radius-md);
    }
}

.timeline-row-2__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ----- Right column: single dark box ----- */

.timeline-row-2__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--rd-gutter);
    background: var(--rd-dark-gray);
}

@media (min-width: 1024px) {
    .timeline-row-2__right {
        border-radius: var(--rd-radius-md);
    }
}

.timeline-row-2__entry-year {
    margin: 0 0 8px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h2);
    font-weight: 400;
    line-height: var(--rd-lh-snug);
    color: var(--rd-white);
    text-transform: none;
}

.timeline-row-2__entry-title {
    margin: 0 0 16px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    color: var(--rd-white);
    text-transform: none;
}

.timeline-row-2__entry-content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-white);
}

.timeline-row-2__entry-content p {
    margin: 0 0 16px;
}

.timeline-row-2__entry-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Timeline Row 3 (30th Anniversary flexible content layout)
   Year block (left) | text block (slides behind) | photo (right).
   Reuses the same year-block gradient and slide-behind offset as Row 1.
   ========================================================================== */

.timeline-row-3,
.timeline-row-3 *,
.timeline-row-3 *::before,
.timeline-row-3 *::after {
    box-sizing: border-box;
}

.timeline-row-3__container {
    display: flex;
    align-items: stretch;
    gap: var(--rd-gutter);
    padding: 0 var(--rd-page-bleed);
}

/* ----- Left group: year block + sliding text ----- */

.timeline-row-3__left {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.timeline-row-3__year-block {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--rd-yellow) 0%, var(--rd-orange) 100%);
    border-radius: 10.75px;
    position: relative;
    z-index: 1;
    min-height: 220px;
}

.timeline-row-3__year {
    font-family: var(--rd-font-sans);
    font-size: 48px;
    font-weight: 400;
    color: var(--rd-white);
    letter-spacing: 0.02em;
}

.timeline-row-3__milestone {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    left: -15px;
    margin-right: -15px;
    padding: var(--rd-gutter);
    padding-left: calc(var(--rd-gutter) + 15px);
    border-radius: 10.75px;
    background: linear-gradient(180deg, #F8EED8 0%, #F5DBD0 100%);
}

.timeline-row-3__milestone-title {
    margin: 0 0 16px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    color: var(--rd-dark-gray);
    text-transform: none;
}

.timeline-row-3__milestone-content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-dark-gray);
}

.timeline-row-3__milestone-content p {
    margin: 0 0 16px;
}

.timeline-row-3__milestone-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Timeline Row 4 (30th Anniversary flexible content layout)
   Dark box (left) | Light box with badge image (right).
   ========================================================================== */

.timeline-row-4,
.timeline-row-4 *,
.timeline-row-4 *::before,
.timeline-row-4 *::after {
    box-sizing: border-box;
}

.timeline-row-4__container {
    display: grid;
    grid-template-columns: 35fr 65fr;
    align-items: stretch;
    gap: var(--rd-gutter);
    padding: 0 var(--rd-page-bleed);
}

/* ----- Shared box styles ----- */

.timeline-row-4__year {
    margin: 0 0 8px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h2);
    font-weight: 400;
    line-height: var(--rd-lh-snug);
    text-transform: none;
}

.timeline-row-4__title {
    margin: 0 0 16px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    text-transform: none;
}

.timeline-row-4__content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
}

.timeline-row-4__content p {
    margin: 0 0 16px;
}

.timeline-row-4__content p:last-child {
    margin-bottom: 0;
}

/* ----- Dark box (left) ----- */

.timeline-row-4__dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--rd-gutter);
    background: var(--rd-dark-gray);
    border-radius: var(--rd-radius-md);
}

.timeline-row-4__dark .timeline-row-4__year,
.timeline-row-4__dark .timeline-row-4__title,
.timeline-row-4__dark .timeline-row-4__content {
    color: var(--rd-white);
}

/* ----- Light box (right) ----- */

/* Right column wrapper: stacks the light box and badge image vertically. */
.timeline-row-4__right {
    display: flex;
    flex-direction: column;
    gap: var(--rd-gutter);
}

.timeline-row-4__light {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--rd-gutter);
    background: var(--rd-super-light-gray);
    border-radius: var(--rd-radius-md);
}

.timeline-row-4__light .timeline-row-4__year,
.timeline-row-4__light .timeline-row-4__title,
.timeline-row-4__light .timeline-row-4__content {
    color: var(--rd-dark-gray);
}

/* ----- Badge / logo image ----- */

.timeline-row-4__badge {
    margin: 0;
    padding: 0;
    line-height: 0;
    border-radius: var(--rd-radius-md);
    overflow: hidden;
}

.timeline-row-4__badge-img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   Timeline Row 5 (30th Anniversary flexible content layout)
   Light gray box (left, 50%) | Photo (right, 50%).
   Image height is determined by the content box — no fixed height.
   ========================================================================== */

.timeline-row-5,
.timeline-row-5 *,
.timeline-row-5 *::before,
.timeline-row-5 *::after {
    box-sizing: border-box;
}

.timeline-row-5__container {
    display: flex;
    align-items: stretch;
    gap: var(--rd-gutter);
    padding: 0 var(--rd-page-bleed);
}

.timeline-row-5__box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--rd-gutter);
    background: var(--rd-super-light-gray);
    border-radius: var(--rd-radius-md);
}

.timeline-row-5__year {
    margin: 0 0 8px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h2);
    font-weight: 400;
    line-height: var(--rd-lh-snug);
    color: var(--rd-dark-gray);
    text-transform: none;
}

.timeline-row-5__title {
    margin: 0 0 16px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    color: var(--rd-dark-gray);
    text-transform: none;
}

.timeline-row-5__content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-dark-gray);
}

.timeline-row-5__content p {
    margin: 0 0 16px;
}

.timeline-row-5__content p:last-child {
    margin-bottom: 0;
}

.timeline-row-5__media {
    flex: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--rd-radius-md);
}

.timeline-row-5__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Mobile: image first, flush against the gray box, full-bleed, no radius */
@media (max-width: 1023px) {
    .timeline-row-5__container {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .timeline-row-5__media {
        order: -1;
        border-radius: 0;
        aspect-ratio: 16 / 9;
    }

    .timeline-row-5__box {
        border-radius: 0;
    }
}

/* Mobile: full-bleed, stacked, no radius */
@media (max-width: 1023px) {
    .timeline-row-4__container {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .timeline-row-4__right {
        gap: 0;
    }

    .timeline-row-4__badge {
        order: -1;
    }

    .timeline-row-4__dark,
    .timeline-row-4__light,
    .timeline-row-4__badge {
        border-radius: 0;
    }
}

/* ----- Right image ----- */

.timeline-row-3__media {
    flex: 0 0 50%;
    max-height: 364px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--rd-radius-md);
}

.timeline-row-3__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Mobile: image first (full-bleed), then year block and milestone stacked full-width */
@media (max-width: 1023px) {
    .timeline-row-3__container {
        flex-direction: column;
        padding: 0;
    }

    .timeline-row-3__media {
        order: -1;
        flex-basis: auto;
        max-height: none;
        border-radius: 0;
        aspect-ratio: 16 / 9;
        margin-bottom: calc(-1 * var(--rd-gutter));
    }

    .timeline-row-3__left {
        flex-direction: column;
    }

    .timeline-row-3__year-block {
        flex: 0 0 auto;
        min-height: 0;
        border-radius: 0;
        padding: var(--rd-gutter);
    }

    .timeline-row-3__milestone {
        left: 0;
        margin-right: 0;
        padding-left: var(--rd-gutter);
        border-radius: 0;
    }
}

/* ==========================================================================
   Timeline Row 6 (30th Anniversary flexible content layout)
   Two stacked images (left, 30%) | Year block + two entries (right, 70%).
   Year block / entries use the same gradient pairing as Timeline Row 1.
   ========================================================================== */

.timeline-row-6,
.timeline-row-6 *,
.timeline-row-6 *::before,
.timeline-row-6 *::after {
    box-sizing: border-box;
}

.timeline-row-6__container {
    display: grid;
    grid-template-columns: 3fr 7fr;
    align-items: stretch;
    gap: var(--rd-gutter);
    padding: 0 var(--rd-page-bleed);
}

/* ----- Left: two stacked images ----- */

.timeline-row-6__images {
    display: flex;
    flex-direction: column;
    gap: var(--rd-gutter);
}

.timeline-row-6__img-wrap {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--rd-radius-md);
}

.timeline-row-6__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ----- Right: year block + entries ----- */

.timeline-row-6__right {
    display: flex;
    align-items: stretch;
}

.timeline-row-6__year-block {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--rd-yellow) 0%, var(--rd-orange) 100%);
    border-radius: 10.75px;
    position: relative;
    z-index: 1;
}

.timeline-row-6__year {
    font-family: var(--rd-font-sans);
    font-size: 48px;
    font-weight: 400;
    color: var(--rd-white);
    letter-spacing: 0.02em;
}

.timeline-row-6__entries {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rd-gutter);
    position: relative;
    left: -15px;
    margin-right: -15px;
    padding: var(--rd-gutter);
    padding-left: calc(var(--rd-gutter) + 15px);
    border-radius: 10.75px;
    background: linear-gradient(180deg, #F8EED8 0%, #F5DBD0 100%);
}

/* Duplicate images — hidden on desktop, revealed on mobile inside each entry. */
.timeline-row-6__entry-img-wrap {
    display: none;
}

.timeline-row-6__entry {
    flex: 1;
}

.timeline-row-6__entry-text {
    /* No extra padding on desktop — entries wrapper provides it. */
}

.timeline-row-6__entry-title {
    margin: 0 0 12px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    color: var(--rd-dark-gray);
    text-transform: none;
}

.timeline-row-6__entry-content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-dark-gray);
}

.timeline-row-6__entry-content p {
    margin: 0 0 16px;
}

.timeline-row-6__entry-content p:last-child {
    margin-bottom: 0;
}

/* Mobile: left image column hidden; duplicate images shown inside each entry,
   full-width against the gradient background. Text padded separately. */
@media (max-width: 1023px) {
    .timeline-row-6__container {
        grid-template-columns: 1fr;
        padding: 0;
    }

    /* Hide the desktop left-column images */
    .timeline-row-6__images {
        display: none;
    }

    .timeline-row-6__right {
        flex-direction: column;
    }

    .timeline-row-6__year-block {
        flex: 0 0 auto;
        min-height: 0;
        padding: var(--rd-gutter);
        border-radius: 0;
    }

    /* Remove padding from entries wrapper so images can be full-width */
    .timeline-row-6__entries {
        padding: 0;
        gap: 0;
        left: 0;
        margin-right: 0;
        border-radius: 0;
    }

    .timeline-row-6__entry {
        flex: 0 0 auto;
    }

    /* Show the duplicate images full-width above each entry's text */
    .timeline-row-6__entry-img-wrap {
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 200px;
    }

    .timeline-row-6__entry-img-wrap .timeline-row-6__img {
        height: 100%;
    }

    /* Restore padding for the text block within each entry */
    .timeline-row-6__entry-text {
        padding: var(--rd-gutter);
    }
}

/* ==========================================================================
   Timeline Row 7 (30th Anniversary flexible content layout)
   ONE dark-gray box (left: year + all entries) | stacked images (right).
   ========================================================================== */

.timeline-row-7,
.timeline-row-7 *,
.timeline-row-7 *::before,
.timeline-row-7 *::after {
    box-sizing: border-box;
}

.timeline-row-7__container {
    display: flex;
    align-items: stretch;
    gap: var(--rd-gutter);
    padding: 0 var(--rd-page-bleed);
}

/* ----- Left: single dark box ----- */

.timeline-row-7__box {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: var(--rd-gutter);
    background: var(--rd-dark-gray);
    border-radius: var(--rd-radius-md);
}

.timeline-row-7__year {
    margin: 0 0 var(--rd-gutter);
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h2);
    font-weight: 400;
    line-height: var(--rd-lh-snug);
    color: var(--rd-white);
    text-transform: none;
}

.timeline-row-7__entries {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rd-gutter);
}

.timeline-row-7__entry {
    flex: 1;
}

/* Mobile-only duplicate images — hidden on desktop */
.timeline-row-7__entry-img-wrap {
    display: none;
}

.timeline-row-7__entry-title {
    margin: 0 0 12px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    color: var(--rd-white);
    text-transform: none;
}

.timeline-row-7__entry-content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-white);
}

.timeline-row-7__entry-content p {
    margin: 0 0 16px;
}

.timeline-row-7__entry-content p:last-child {
    margin-bottom: 0;
}

/* ----- Right: stacked images ----- */

.timeline-row-7__images {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: var(--rd-gutter);
}

.timeline-row-7__img-wrap {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--rd-radius-md);
}

.timeline-row-7__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   Timeline Row 8 (30th Anniversary flexible content layout)
   Year gradient block | sliding light-gradient panel with repeater entries.
   Identical gradient pairing and slide-behind technique as Timeline Row 1.
   ========================================================================== */

.timeline-row-8,
.timeline-row-8 *,
.timeline-row-8 *::before,
.timeline-row-8 *::after {
    box-sizing: border-box;
}

.timeline-row-8__container {
    display: flex;
    align-items: stretch;
    padding: 0 var(--rd-page-bleed);
}

.timeline-row-8__year-block {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--rd-yellow) 0%, var(--rd-orange) 100%);
    border-radius: 10.75px;
    position: relative;
    z-index: 1;
    min-height: 220px;
}

.timeline-row-8__year {
    font-family: var(--rd-font-sans);
    font-size: 48px;
    font-weight: 400;
    color: var(--rd-white);
    letter-spacing: 0.02em;
}

.timeline-row-8__panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rd-gutter);
    position: relative;
    left: -15px;
    margin-right: -15px;
    padding: var(--rd-gutter);
    padding-left: calc(var(--rd-gutter) + 15px);
    border-radius: 10.75px;
    background: linear-gradient(180deg, #F8EED8 0%, #F5DBD0 100%);
}

.timeline-row-8__entry-title {
    margin: 0 0 12px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-h3);
    font-weight: 400;
    line-height: var(--rd-lh-normal);
    color: var(--rd-dark-gray);
    text-transform: none;
}

.timeline-row-8__entry-content {
    font-family: var(--rd-font-sans);
    font-size: var(--rd-fs-body-big);
    line-height: var(--rd-lh-body);
    color: var(--rd-dark-gray);
}

.timeline-row-8__entry-content p {
    margin: 0 0 16px;
}

.timeline-row-8__entry-content p:last-child {
    margin-bottom: 0;
}

/* Mobile: stack full-bleed, no slide-behind, no radius */
@media (max-width: 1023px) {
    .timeline-row-8__container {
        flex-direction: column;
        padding: 0;
    }

    .timeline-row-8__year-block {
        flex: 0 0 auto;
        min-height: 0;
        padding: var(--rd-gutter);
        border-radius: 0;
    }

    .timeline-row-8__panel {
        left: 0;
        margin-right: 0;
        padding-left: var(--rd-gutter);
        border-radius: 0;
    }
}

/* Mobile: dark box loses its box — year strip, then per-entry: image → text */
@media (max-width: 1023px) {
    .timeline-row-7__container {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* Hide the desktop right-side image column */
    .timeline-row-7__images {
        display: none;
    }

    /* Remove box styling — each piece handles its own bg */
    .timeline-row-7__box {
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .timeline-row-7__year {
        padding: var(--rd-gutter) var(--rd-page-bleed);
        margin: 0;
        background: var(--rd-dark-gray);
    }

    .timeline-row-7__entries {
        gap: 0;
    }

    .timeline-row-7__entry {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
    }

    /* Show the mobile duplicate image full-bleed above its entry text */
    .timeline-row-7__entry-img-wrap {
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 200px;
    }

    .timeline-row-7__entry-img-wrap .timeline-row-7__img {
        height: 100%;
    }

    /* Entry text gets its own dark bg on mobile */
    .timeline-row-7__entry-text {
        padding: var(--rd-gutter) var(--rd-page-bleed);
        background: var(--rd-dark-gray);
    }
}