/* ======================================================================
   GSC-TEMPC — OUR FUTURE PLANS (#future-plans) — NOTCHED ROUTE REDESIGN
   v1.1 — background matched to Home Services / Board of Directors
   ----------------------------------------------------------------------
   File:   assets/css/future-plans.css
   Scope:  every selector starts with #future-plans. Nothing outside this
           section (header, sidebar, hero, other sections, footer, :root,
           body) is touched.

   v1.1 CHANGE (background only; layout, markup and palette unchanged)
     - Section ground now uses the same vertical gradient as
       .home-services and #section-leadership:
         #FFFFFF > #F3F8F2 (30%) > #E9F4E6 (64%) > #FFFFFF
       The old ground started on sage and ended on a deeper green
       (#E3F0E0), which left a visible seam against neighbouring
       sections. Both ends are now pure white, so the section blends in.
     - The wash uses the same two radial glows as Home Services (same
       size, position and opacity).
     - Botanical opacity matches Home Services (.13).

   CONCEPT
   A roadmap should read like a route, so the section is built from two
   ideas only:

     1. THE NOTCH — pictures are not arches and not plain rounded boxes.
        They are rectangles with two opposite corners cut at 45 degrees
        (top-right and bottom-left), like a document tab or a ticket.
        The same cut appears on the dark "Our Strategic Direction" band,
        the caption plates and the year tags, so the section has one
        shape language.

     2. THE ROUTE — a single leaf-green spine runs down the roadmap with
        one round waypoint per plan. On wide sections the plans alternate
        either side of the spine; on narrow sections the spine moves to
        the left edge and everything stacks beside it. A short gold
        connector joins each text block to its waypoint.

   Light green stays the dominant field. Forest green carries headings
   and the single dark band. Champagne gold appears only as thin rules,
   the corner bracket on pictures, year tags and waypoint rings. No gold
   body text, no glows, no looping animation.

   MARKUP ASSUMPTIONS (taken from index.php, nothing is invented)
     section#future-plans.future-plans-section.reveal
       .future-plans-section__wash
       .future-plans-section__botanical--left
       .future-plans-hero
         .future-plans-intro
           .future-plans-eyebrow > .future-plans-eyebrow__line
           h2#future-plans-title (+ br.future-plans-title-break)
           p.future-plans-lead
           a.future-plans-text-link > span + span
         .future-plans-hero-media (.is-empty)
           img | .future-plans-hero-fallback > span + strong
           span.future-plans-hero-caption
       .future-plans-roadmap#future-plans-roadmap
         .future-plans-roadmap__heading > span + .future-plans-roadmap__rule
         .future-plans-empty > .future-plans-empty__eyebrow + p
         article.future-plan (.future-plan--reverse)
           .future-plan-content
             .future-plan-index > __number + __year
             .future-plan-copy > .future-plan-kicker, h3, p,
                                 a.future-plan-link > span + span
           .future-plan-media
             img | video.future-plan-video | .future-plan-media-fallback
             span.future-plan-media-caption

   LAYOUT
   The section is a size container (container-name: fplans), so every
   breakpoint follows the SECTION's width, not the screen's. This matters
   because the fixed "Explore GSC-TEMPC" panel takes about 320px on
   desktop. Browsers without container queries get the single-column
   layout plus a viewport-based @supports fallback near the end.

     below 560px   single column, spine on the left, compact type
     560px  up     roomier single column
     900px  up     two-column hero, three-column alternating roadmap
     1100px up     wider gutters and gaps
     1360px up     largest type and spine

   NOTE ON CLIP-PATH
   Notched shapes use clip-path, which also clips outlines and focus
   rings. For that reason clip-path is applied ONLY to non-interactive
   elements (pictures, plates, tags, the band). Links keep ordinary
   rectangular borders so their keyboard focus ring is never cut off.

   PALETTE
     --fp-brand        #30AA28  logo green (kept for reference)
     --fp-leaf         #B9DDB5  light green fields
     --fp-leaf-soft    #E5F1E3  pale green
     --fp-sage         #F3F8F2  very pale green
     --fp-action       #27883A  buttons (white text 4.5:1)
     --fp-action-deep  #1B6A2E  hover / dark button end
     --fp-forest       #1F5A2D  headings, dark band
     --fp-ink          #173E29  deepest green
     --fp-gold         #D6B56D  champagne rules (never text on white)
     --fp-gold-light   #F6E3AE  light champagne (tags, arrow discs)
   ====================================================================== */


/* ----------------------------------------------------------------------
   1. SECTION ROOT, TOKENS AND SIZE CONTAINER
   ---------------------------------------------------------------------- */
#future-plans.future-plans-section {
    --fp-brand: #30AA28;
    --fp-leaf: #B9DDB5;
    --fp-leaf-soft: #E5F1E3;
    --fp-sage: #F3F8F2;
    --fp-action: #27883A;
    --fp-action-deep: #1B6A2E;
    --fp-forest: #1F5A2D;
    --fp-ink: #173E29;
    --fp-gold: #D6B56D;
    --fp-gold-light: #F6E3AE;
    --fp-white: #FFFFFF;
    --fp-warm: #FBFCF9;
    --fp-text: #3E4C42;
    --fp-muted: #53625A;
    --fp-line: #9FD09A;
    --fp-ease: cubic-bezier(.16, 1, .3, 1);
    --fp-serif: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);

    container-name: fplans;
    container-type: inline-size;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: 0;
    scroll-margin-top: 80px;
    color: var(--fp-forest);
    font-family: inherit;
    /* Same ground as .home-services and #section-leadership: white at both
       ends so the section blends into whatever sits above and below it. */
    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F3F8F2 30%,
        #E9F4E6 64%,
        #FFFFFF 100%
    );
}

/* Padding must never add to widths inside this section */
#future-plans *,
#future-plans *::before,
#future-plans *::after {
    box-sizing: border-box;
}

/* The page-level reveal hook is preserved: once the homepage script adds
   .is-active the section must end fully visible and untransformed. */
#future-plans.future-plans-section.reveal.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

#future-plans a {
    -webkit-tap-highlight-color: transparent;
}

#future-plans img,
#future-plans video {
    max-width: 100%;
}


/* ----------------------------------------------------------------------
   2. BACKDROP — green light only, no decorative shapes
   Same two glows as the Home Services wash.
   ---------------------------------------------------------------------- */
#future-plans .future-plans-section__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 52% 40% at 20% 34%,
            rgba(185, 221, 181, .5),
            transparent 72%
        ),
        radial-gradient(
            ellipse 44% 36% at 94% 12%,
            rgba(185, 221, 181, .3),
            transparent 70%
        );
}

/* One subtle botanical, anchored to the lower-left corner and faded out
   towards the top so it never sits behind the hero text. */
#future-plans .future-plans-section__botanical {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: clamp(100px, 22vw, 200px);
    width: clamp(100px, 13cqi, 200px);
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: .13;
    filter: grayscale(1) sepia(.55) saturate(3) hue-rotate(85deg) brightness(.7);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 78%);
    mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 78%);
}

#future-plans .future-plans-section__botanical--left {
    left: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom left;
    transform: scaleX(-1);
}


/* ----------------------------------------------------------------------
   3. SHARED SPACING TOKENS FOR HERO + ROADMAP
   Hero and roadmap use the same maximum width and the same side gutter,
   so the left and right edges of every block in the section line up.
   These are declared on the children (not the container itself) because
   an element cannot respond to its own container query.
   ---------------------------------------------------------------------- */
#future-plans .future-plans-hero,
#future-plans .future-plans-roadmap {
    --fp-gutter: 18px;
}


/* ----------------------------------------------------------------------
   4. HERO — intro text + notched picture
   ---------------------------------------------------------------------- */
#future-plans .future-plans-hero {
    --fp-cut: 24px;       /* size of the 45deg corner cut */
    --fp-off: 12px;       /* offset of the pale-green panel behind the picture */
    --fp-br: 10px;        /* distance of the gold corner bracket outside the picture */
    --fp-br-len: 56px;    /* length of each bracket arm */

    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 52px;
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 56px var(--fp-gutter) 24px;
}

#future-plans .future-plans-intro {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
}

/* Eyebrow ------------------------------------------------------------- */
#future-plans .future-plans-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    color: var(--fp-action-deep);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
}

#future-plans .future-plans-eyebrow__line {
    flex: 0 0 auto;
    width: 52px;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--fp-gold) 0 60%,
        var(--fp-leaf) 60% 100%
    );
}

/* Title --------------------------------------------------------------- */
#future-plans .future-plans-intro h2 {
    position: relative;
    margin: 0 0 24px;
    padding: 0 0 26px;
    max-width: 12em;
    color: var(--fp-forest);
    font-family: var(--fp-serif);
    font-size: 2.6rem;
    font-size: clamp(2.4rem, 12.5cqi, 3rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
    overflow-wrap: break-word;
    text-shadow: none;
}

/* The gold rule belongs to the title: it starts exactly at the title's
   left edge, so it shares the same alignment guide as the eyebrow rule,
   the lead paragraph and the button. */
#future-plans .future-plans-intro h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--fp-gold) 0 58%,
        var(--fp-leaf) 58% 100%
    );
}

/* The forced break only helps once there is room for two comfortable
   lines; on small sections the title simply wraps by itself. */
#future-plans .future-plans-title-break {
    display: none;
}

/* Lead paragraph ------------------------------------------------------ */
#future-plans .future-plans-lead {
    max-width: 30em;
    margin: 0;
    color: var(--fp-text);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.75;
}

/* Button -------------------------------------------------------------- */
#future-plans .future-plans-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    min-height: 52px;
    margin: 32px 0 0;
    padding: 8px 8px 8px 24px;
    border: 1px solid rgba(214, 181, 109, .8);
    border-radius: 6px;
    background: linear-gradient(
        180deg,
        var(--fp-action) 0%,
        var(--fp-action-deep) 100%
    );
    color: #FFFFFF;
    font-family: inherit;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow:
        0 14px 26px rgba(31, 90, 45, .24),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    transition:
        transform .4s var(--fp-ease),
        box-shadow .4s ease,
        background .3s ease;
}

#future-plans .future-plans-text-link > span:first-child {
    display: block;
    min-width: 0;
}

#future-plans .future-plans-text-link > span:last-child {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fp-gold-light);
    color: var(--fp-ink);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform .4s var(--fp-ease);
}

#future-plans .future-plans-text-link:focus-visible {
    background: linear-gradient(
        180deg,
        var(--fp-action-deep) 0%,
        var(--fp-ink) 100%
    );
    outline: 3px solid var(--fp-forest);
    outline-offset: 4px;
}

#future-plans .future-plans-text-link:focus-visible > span:last-child {
    transform: translateX(3px);
}

#future-plans .future-plans-text-link:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(31, 90, 45, .26);
}

@media (hover: hover) {
    #future-plans .future-plans-text-link:hover {
        transform: translateY(-2px);
        background: linear-gradient(
            180deg,
            var(--fp-action-deep) 0%,
            var(--fp-ink) 100%
        );
        box-shadow:
            0 18px 32px rgba(31, 90, 45, .34),
            inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    #future-plans .future-plans-text-link:hover > span:last-child {
        transform: translateX(3px);
    }
}


/* ----------------------------------------------------------------------
   5. HERO PICTURE — notched frame, pale-green panel, gold corner bracket
   The picture is clipped to a rectangle with its top-right and
   bottom-left corners cut. A pale-green hatched panel of the same shape
   sits behind it, shifted down-right. A gold bracket (two short lines)
   marks the top-left corner, the one corner that is NOT cut, so the
   composition is balanced diagonally.
   ---------------------------------------------------------------------- */
#future-plans .future-plans-hero-media {
    position: relative;
    z-index: 1;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    margin: 0;
    aspect-ratio: 4 / 3;
    background: none;
    filter: drop-shadow(0 22px 28px rgba(23, 62, 41, .16));
}

/* Pale-green panel behind the picture (same notch as the picture) */
#future-plans .future-plans-hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translate(var(--fp-off), var(--fp-off));
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .34) 0 2px,
            transparent 2px 10px
        ),
        linear-gradient(
            170deg,
            rgba(185, 221, 181, .95),
            rgba(185, 221, 181, .45)
        );
    clip-path: polygon(
        0 0,
        calc(100% - var(--fp-cut)) 0,
        100% var(--fp-cut),
        100% 100%,
        var(--fp-cut) 100%,
        0 calc(100% - var(--fp-cut))
    );
    pointer-events: none;
}

/* Gold bracket: two arms forming an L at the top-left corner. Both arms
   run parallel to the picture edges at the same distance, and end with
   square tips, so the mark reads as a deliberate crop mark. */
#future-plans .future-plans-hero-media::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: calc(var(--fp-br) * -1);
    left: calc(var(--fp-br) * -1);
    width: var(--fp-br-len);
    height: var(--fp-br-len);
    background:
        linear-gradient(var(--fp-gold), var(--fp-gold)) top left / 100% 2px no-repeat,
        linear-gradient(var(--fp-gold), var(--fp-gold)) top left / 2px 100% no-repeat;
    pointer-events: none;
}

#future-plans .future-plans-hero-media img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    clip-path: polygon(
        0 0,
        calc(100% - var(--fp-cut)) 0,
        100% var(--fp-cut),
        100% 100%,
        var(--fp-cut) 100%,
        0 calc(100% - var(--fp-cut))
    );
}

/* Caption plate: solid deep green, flush with the bottom-right corner (the
   second corner that is not cut). Its own top-left corner is notched. */
#future-plans .future-plans-hero-caption {
    --fp-chip: 14px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    max-width: 78%;
    padding: 16px 20px 16px 24px;
    background: linear-gradient(160deg, var(--fp-forest) 0%, var(--fp-ink) 100%);
    color: #FFFFFF;
    font-family: var(--fp-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.01em;
    text-align: left;
    text-shadow: none;
    transform: none;
    clip-path: polygon(
        var(--fp-chip) 0,
        100% 0,
        100% 100%,
        0 100%,
        0 var(--fp-chip)
    );
}

#future-plans .future-plans-hero-caption::before {
    content: 'GSC-TEMPC';
    display: block;
    margin: 0 0 8px;
    color: var(--fp-gold-light);
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-shadow: none;
}

#future-plans .future-plans-hero-caption::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin: 12px 0 0;
    background: var(--fp-gold);
}

/* Fallback shown when future.png cannot be found */
#future-plans .future-plans-hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 32px 28px 32px 36px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .05) 0 2px,
            transparent 2px 12px
        ),
        linear-gradient(155deg, var(--fp-action-deep) 0%, var(--fp-ink) 100%);
    color: #FFFFFF;
    clip-path: polygon(
        0 0,
        calc(100% - var(--fp-cut)) 0,
        100% var(--fp-cut),
        100% 100%,
        var(--fp-cut) 100%,
        0 calc(100% - var(--fp-cut))
    );
}

#future-plans .future-plans-hero-fallback span {
    margin: 0 0 10px;
    color: var(--fp-gold-light);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
}

#future-plans .future-plans-hero-fallback strong {
    display: block;
    color: #FFFFFF;
    font-family: var(--fp-serif);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.03em;
}


/* ----------------------------------------------------------------------
   6. ROADMAP SHELL
   ---------------------------------------------------------------------- */
#future-plans .future-plans-roadmap {
    --fp-cut: 16px;       /* size of the 45deg corner cut on pictures and band */
    --fp-spine: 36px;     /* width of the column that carries the route line */
    --fp-node: 18px;      /* diameter of a waypoint */
    --fp-halo: 4px;       /* pale-green ring around a waypoint */
    --fp-index-h: 52px;   /* height of the number + year row; waypoint centres on it */
    --fp-pad: 30px;       /* vertical padding of each plan */
    --fp-inset: 14px;     /* space between the spine column and the content (stacked layouts) */
    --fp-br: 8px;         /* bracket distance */
    --fp-br-len: 48px;    /* bracket arm length */

    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 28px var(--fp-gutter) 72px;
    scroll-margin-top: 80px;
}

/* Heading band: the single deep-forest anchor of the section. Same notch
   as the pictures, so it reads as the first sheet of the same document. */
#future-plans .future-plans-roadmap__heading {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 52px;
    margin: 0 0 6px;
    padding: 8px 18px 8px 22px;
    background: linear-gradient(100deg, var(--fp-forest) 0%, var(--fp-ink) 100%);
    color: #FFFFFF;
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .18em;
    text-transform: uppercase;
    clip-path: polygon(
        0 0,
        calc(100% - var(--fp-cut)) 0,
        100% var(--fp-cut),
        100% 100%,
        var(--fp-cut) 100%,
        0 calc(100% - var(--fp-cut))
    );
}

#future-plans .future-plans-roadmap__heading > span:first-child {
    flex: 0 1 auto;
    min-width: 0;
}

/* The rule belongs to the band text and fades out to the right, so it
   never ends in an abrupt stub next to the notch. */
#future-plans .future-plans-roadmap__rule {
    flex: 1 1 32px;
    min-width: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--fp-gold),
        rgba(214, 181, 109, .12)
    );
}


/* ----------------------------------------------------------------------
   7. EMPTY STATE
   ---------------------------------------------------------------------- */
#future-plans .future-plans-empty {
    margin: 26px 0 0;
    padding: 34px 28px 34px 30px;
    border: 1px solid rgba(48, 170, 40, .18);
    border-radius: 4px;
    background: var(--fp-white);
    box-shadow: inset 4px 0 0 var(--fp-gold);
}

#future-plans .future-plans-empty__eyebrow {
    display: block;
    margin: 0 0 10px;
    color: var(--fp-action-deep);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .2em;
    text-transform: uppercase;
}

#future-plans .future-plans-empty p {
    margin: 0;
    color: var(--fp-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7;
}


/* ----------------------------------------------------------------------
   8. PLAN — one grid per plan: [spine | content] stacked by default.
   Cell map (stacked):      Cell map (900px+, default):   (900px+, reverse):
     col 1   col 2            col 1    col 2   col 3         col 1    col 2   col 3
     node    content          content  node    media         media    node    content
     line    media            (line runs through column 2)
   ---------------------------------------------------------------------- */
#future-plans .future-plan {
    position: relative;
    display: grid;
    grid-template-columns: var(--fp-spine) minmax(0, 1fr);
    align-items: start;
    column-gap: 0;
    row-gap: 22px;
    margin: 0;
    padding: var(--fp-pad) 0;
    border: 0;
    background: none;
}

/* Waypoint --------------------------------------------------------------
   Sits in the spine column, vertically centred on the number/year row. */
#future-plans .future-plan::before {
    content: '';
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    justify-self: center;
    align-self: start;
    width: var(--fp-node);
    height: var(--fp-node);
    margin-top: calc((var(--fp-index-h) - var(--fp-node)) / 2);
    border: 2px solid var(--fp-gold);
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        var(--fp-action) 0 38%,
        var(--fp-white) 41% 100%
    );
    box-shadow: 0 0 0 var(--fp-halo) var(--fp-leaf-soft);
    pointer-events: none;
}

/* Route line --------------------------------------------------------------
   Runs the full height of the plan, including its padding, so consecutive
   plans join into one continuous line. The first plan starts at its own
   waypoint centre and the last plan ends at its own waypoint centre. */
#future-plans .future-plan::after {
    content: '';
    grid-column: 1;
    grid-row: 1 / span 2;
    z-index: 1;
    justify-self: center;
    align-self: stretch;
    width: 2px;
    margin-top: calc(var(--fp-pad) * -1);
    margin-bottom: calc(var(--fp-pad) * -1);
    border-radius: 1px;
    background: var(--fp-line);
    pointer-events: none;
}

#future-plans .future-plan:first-of-type::after {
    margin-top: calc(var(--fp-index-h) / 2);
}

#future-plans .future-plan:last-of-type::after {
    align-self: start;
    height: calc(var(--fp-pad) + var(--fp-index-h) / 2);
    margin-bottom: 0;
}

/* A single plan has no line to draw */
#future-plans .future-plan:only-of-type::after {
    display: none;
}

/* The final waypoint is filled: the route has arrived. */
#future-plans .future-plan:last-of-type::before {
    background: radial-gradient(
        circle at center,
        var(--fp-white) 0 24%,
        var(--fp-forest) 28% 100%
    );
}


/* ----------------------------------------------------------------------
   9. PLAN CONTENT
   ---------------------------------------------------------------------- */
#future-plans .future-plan-content {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
    margin: 0 0 0 var(--fp-inset);
    padding: 0;
}

/* Number + year row. Its height is fixed so the waypoint can be centred
   on it exactly. */
#future-plans .future-plan-index {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: var(--fp-index-h);
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

#future-plans .future-plan-index__number {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    color: var(--fp-forest);
    font-family: var(--fp-serif);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Year tag: notched like everything else; gold-light with an ink label
   (about 10:1 contrast) and a gold left bar. No pulsing dot. */
#future-plans .future-plan-index__year {
    --fp-tag-cut: 8px;
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 30px;
    margin: 0;
    padding: 0 14px 0 13px;
    border: 0;
    border-radius: 0;
    background: var(--fp-gold-light);
    box-shadow: inset 3px 0 0 var(--fp-gold);
    color: var(--fp-ink);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    clip-path: polygon(
        0 0,
        calc(100% - var(--fp-tag-cut)) 0,
        100% var(--fp-tag-cut),
        100% 100%,
        var(--fp-tag-cut) 100%,
        0 calc(100% - var(--fp-tag-cut))
    );
}

#future-plans .future-plan-copy {
    min-width: 0;
    margin: 0;
    padding: 0;
}

#future-plans .future-plan-kicker {
    display: block;
    margin: 0 0 10px;
    color: var(--fp-action-deep);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .2em;
    text-transform: uppercase;
}

#future-plans .future-plan-copy h3 {
    max-width: 22em;
    margin: 0;
    color: var(--fp-forest);
    font-family: var(--fp-serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.025em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

#future-plans .future-plan-copy p {
    max-width: 34em;
    margin: 14px 0 0;
    color: var(--fp-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    overflow-wrap: break-word;
}

/* Text link: plain text with a gold underline plus an arrow disc.
   Not clipped, so its focus ring is always fully visible. */
#future-plans .future-plan-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 12px 0 0;
    padding: 0;
    color: var(--fp-action-deep);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color .3s ease;
}

#future-plans .future-plan-link > span:first-child {
    text-decoration: underline;
    text-decoration-color: var(--fp-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}

#future-plans .future-plan-link > span:last-child {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fp-leaf-soft);
    color: var(--fp-forest);
    font-size: 1rem;
    line-height: 1;
    transition:
        transform .35s var(--fp-ease),
        background .3s ease,
        color .3s ease;
}

#future-plans .future-plan-link:focus-visible {
    color: var(--fp-forest);
    outline: 3px solid var(--fp-forest);
    outline-offset: 4px;
    border-radius: 4px;
}

#future-plans .future-plan-link:focus-visible > span:last-child {
    background: var(--fp-forest);
    color: #FFFFFF;
    transform: translateX(3px);
}

@media (hover: hover) {
    #future-plans .future-plan-link:hover {
        color: var(--fp-forest);
    }

    #future-plans .future-plan-link:hover > span:last-child {
        background: var(--fp-forest);
        color: #FFFFFF;
        transform: translateX(3px);
    }
}


/* ----------------------------------------------------------------------
   10. PLAN PICTURE — notched, with a gold corner bracket
   Same cut as the hero picture, smaller. The bracket marks the corner
   that faces the spine on wide layouts. The picture shows the plan's
   own media (image or video); when neither exists the fallback image or
   the fallback plate is used.
   ---------------------------------------------------------------------- */
#future-plans .future-plan-media {
    position: relative;
    z-index: 1;
    isolation: isolate;
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-width: 0;
    margin: 0 0 0 var(--fp-inset);
    aspect-ratio: 4 / 3;
    background: none;
    filter: drop-shadow(0 16px 22px rgba(23, 62, 41, .14));
}

/* Fallback picture layer: fed by the inline --future-plan-fallback
   custom property, drawn under any real media. */
#future-plans .future-plan-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--fp-leaf-soft);
    background-image: var(--future-plan-fallback, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

#future-plans .future-plan-media::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: calc(var(--fp-br) * -1);
    left: calc(var(--fp-br) * -1);
    width: var(--fp-br-len);
    height: var(--fp-br-len);
    background:
        linear-gradient(var(--fp-gold), var(--fp-gold)) top left / 100% 2px no-repeat,
        linear-gradient(var(--fp-gold), var(--fp-gold)) top left / 2px 100% no-repeat;
    pointer-events: none;
}

/* Every clipped layer shares the same notch */
#future-plans .future-plan-media::before,
#future-plans .future-plan-media img,
#future-plans .future-plan-media .future-plan-video,
#future-plans .future-plan-media .future-plan-media-fallback {
    clip-path: polygon(
        0 0,
        calc(100% - var(--fp-cut)) 0,
        100% var(--fp-cut),
        100% 100%,
        var(--fp-cut) 100%,
        0 calc(100% - var(--fp-cut))
    );
}

#future-plans .future-plan-media img,
#future-plans .future-plan-media .future-plan-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    background: var(--fp-leaf-soft);
    object-fit: cover;
    object-position: var(--future-plan-object-position, center center);
}

#future-plans .future-plan-media .future-plan-media-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 20px 20px 20px 28px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .05) 0 2px,
            transparent 2px 12px
        ),
        linear-gradient(155deg, var(--fp-action-deep) 0%, var(--fp-ink) 100%);
    color: #FFFFFF;
}

#future-plans .future-plan-media-fallback span {
    margin: 0 0 8px;
    color: var(--fp-gold-light);
    font-family: var(--fp-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
}

#future-plans .future-plan-media-fallback strong {
    display: block;
    color: #FFFFFF;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* Caption plate, flush with the bottom-right (uncut) corner */
#future-plans .future-plan-media-caption {
    --fp-chip: 10px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    max-width: 72%;
    padding: 9px 12px 9px 16px;
    background: linear-gradient(160deg, var(--fp-forest) 0%, var(--fp-ink) 100%);
    color: #FFFFFF;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .03em;
    text-align: left;
    clip-path: polygon(
        var(--fp-chip) 0,
        100% 0,
        100% 100%,
        0 100%,
        0 var(--fp-chip)
    );
}


/* ----------------------------------------------------------------------
   11. RESPONSIVE — driven by the SECTION's own width (container queries)
   ---------------------------------------------------------------------- */

/* ===== 560px and up: roomier single column ============================ */
@container fplans (min-width: 560px) {

    #future-plans .future-plans-hero,
    #future-plans .future-plans-roadmap {
        --fp-gutter: 28px;
    }

    /* Hero ------------------------------------------------------------ */
    #future-plans .future-plans-hero {
        --fp-cut: 32px;
        --fp-off: 16px;
        --fp-br: 12px;
        --fp-br-len: 64px;
        gap: 60px;
        padding-top: 72px;
        padding-bottom: 28px;
    }

    #future-plans .future-plans-eyebrow {
        margin-bottom: 24px;
    }

    #future-plans .future-plans-intro h2 {
        font-size: 3.4rem;
        font-size: clamp(3rem, 8.4cqi, 4.2rem);
        padding-bottom: 28px;
        margin-bottom: 26px;
    }

    #future-plans .future-plans-title-break {
        display: inline;
    }

    #future-plans .future-plans-lead {
        font-size: 1.06rem;
    }

    #future-plans .future-plans-text-link {
        margin-top: 34px;
        min-height: 54px;
        font-size: 1rem;
    }

    #future-plans .future-plans-hero-media {
        aspect-ratio: 16 / 10;
    }

    #future-plans .future-plans-hero-caption {
        --fp-chip: 16px;
        padding: 20px 26px 20px 30px;
        font-size: 1.3rem;
    }

    #future-plans .future-plans-hero-caption::before {
        font-size: .7rem;
    }

    #future-plans .future-plans-hero-fallback {
        padding: 40px 36px 40px 48px;
    }

    #future-plans .future-plans-hero-fallback strong {
        font-size: 3rem;
    }

    /* Roadmap --------------------------------------------------------- */
    #future-plans .future-plans-roadmap {
        --fp-cut: 20px;
        --fp-spine: 56px;
        --fp-node: 24px;
        --fp-halo: 5px;
        --fp-index-h: 64px;
        --fp-pad: 38px;
        --fp-inset: 18px;
        --fp-br: 10px;
        --fp-br-len: 56px;
        padding-top: 32px;
        padding-bottom: 88px;
    }

    #future-plans .future-plans-roadmap__heading {
        min-height: 56px;
        padding-left: 26px;
        padding-right: 22px;
        font-size: .78rem;
    }

    #future-plans .future-plan {
        row-gap: 26px;
    }

    #future-plans .future-plan-index {
        gap: 16px;
        margin-bottom: 16px;
    }

    #future-plans .future-plan-index__number {
        font-size: 2.9rem;
    }

    #future-plans .future-plan-index__year {
        min-height: 32px;
        font-size: .8rem;
    }

    #future-plans .future-plan-copy h3 {
        font-size: 1.85rem;
    }

    #future-plans .future-plan-copy p {
        margin-top: 16px;
    }

    #future-plans .future-plan-media {
        aspect-ratio: 3 / 2;
    }

    #future-plans .future-plan-media .future-plan-media-fallback {
        padding: 28px 28px 28px 36px;
    }

    #future-plans .future-plan-media-fallback span {
        font-size: 2rem;
    }

    #future-plans .future-plan-media-caption {
        --fp-chip: 12px;
        padding: 10px 14px 10px 20px;
        font-size: .82rem;
    }

    #future-plans .future-plans-empty {
        padding: 40px 36px 40px 38px;
    }
}

/* ===== 760px and up: wider reading measure in the stacked layout ===== */
@container fplans (min-width: 760px) {

    #future-plans .future-plans-hero-media {
        aspect-ratio: 16 / 9;
    }

    #future-plans .future-plan-media {
        aspect-ratio: 16 / 9;
    }

    #future-plans .future-plan-copy p {
        font-size: 1.04rem;
    }

    #future-plans .future-plan-index__number {
        font-size: 3.1rem;
    }
}

/* ===== 900px and up: two-column hero, alternating three-column route == */
@container fplans (min-width: 900px) {

    #future-plans .future-plans-hero,
    #future-plans .future-plans-roadmap {
        --fp-gutter: 40px;
    }

    /* Hero ------------------------------------------------------------ */
    #future-plans .future-plans-hero {
        --fp-cut: 44px;
        --fp-off: 20px;
        --fp-br: 14px;
        --fp-br-len: 80px;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: 64px;
        gap: clamp(44px, 6cqi, 96px);
        padding-top: 88px;
        padding-bottom: 36px;
    }

    #future-plans .future-plans-eyebrow {
        font-size: .84rem;
        margin-bottom: 26px;
    }

    #future-plans .future-plans-intro h2 {
        font-size: 4rem;
        font-size: clamp(3.2rem, 5.2cqi, 5rem);
        padding-bottom: 30px;
        margin-bottom: 28px;
    }

    #future-plans .future-plans-intro h2::after {
        width: 84px;
        height: 4px;
        border-radius: 2px;
    }

    #future-plans .future-plans-lead {
        font-size: 1.1rem;
        line-height: 1.8;
    }

    #future-plans .future-plans-text-link {
        margin-top: 38px;
    }

    #future-plans .future-plans-hero-media {
        aspect-ratio: 5 / 4;
        align-self: center;
    }

    #future-plans .future-plans-hero-caption {
        --fp-chip: 20px;
        padding: 24px 32px 24px 38px;
        font-size: 1.5rem;
    }

    #future-plans .future-plans-hero-caption::after {
        width: 48px;
        margin-top: 14px;
    }

    /* Roadmap: three columns, spine in the middle -------------------- */
    #future-plans .future-plans-roadmap {
        --fp-cut: 28px;
        --fp-spine: 96px;
        --fp-node: 30px;
        --fp-halo: 6px;
        --fp-index-h: 76px;
        --fp-pad: 48px;
        --fp-inset: 0px;
        --fp-br: 12px;
        --fp-br-len: 64px;
        padding-top: 36px;
        padding-bottom: 104px;
    }

    #future-plans .future-plans-roadmap__heading {
        min-height: 60px;
        padding-left: 30px;
        padding-right: 26px;
        font-size: .82rem;
        letter-spacing: .2em;
    }

    #future-plans .future-plan {
        grid-template-columns:
            minmax(0, 1fr)
            var(--fp-spine)
            minmax(0, 1fr);
        row-gap: 0;
    }

    /* Waypoint and route line move to the centre column */
    #future-plans .future-plan::before,
    #future-plans .future-plan::after {
        grid-column: 2;
    }

    /* Default plans: text on the left, picture on the right */
    #future-plans .future-plan-content {
        grid-column: 1;
        grid-row: 1;
        margin-left: 0;
    }

    #future-plans .future-plan-media {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        margin-left: 0;
        aspect-ratio: 16 / 10;
    }

    /* Reversed plans: picture on the left, text on the right */
    #future-plans .future-plan--reverse .future-plan-content {
        grid-column: 3;
        grid-row: 1;
    }

    #future-plans .future-plan--reverse .future-plan-media {
        grid-column: 1;
        grid-row: 1;
    }

    /* Connector: a short gold line from the text block to its waypoint.
       It starts at the content edge and stops at the waypoint's halo, so it
       ends exactly where the route marker begins. */
    #future-plans .future-plan-content::before {
        content: '';
        position: absolute;
        top: calc(var(--fp-index-h) / 2 - 1px);
        right: calc(var(--fp-spine) / -2 + var(--fp-node) / 2 + var(--fp-halo));
        width: calc((var(--fp-spine) - var(--fp-node)) / 2 - var(--fp-halo));
        height: 2px;
        background: var(--fp-gold);
        pointer-events: none;
    }

    #future-plans .future-plan--reverse .future-plan-content::before {
        right: auto;
        left: calc(var(--fp-spine) / -2 + var(--fp-node) / 2 + var(--fp-halo));
    }

    #future-plans .future-plan-index {
        gap: 18px;
        margin-bottom: 18px;
    }

    #future-plans .future-plan-index__number {
        font-size: 3.4rem;
    }

    #future-plans .future-plan-index__year {
        min-height: 34px;
        padding-right: 16px;
        padding-left: 15px;
        font-size: .82rem;
    }

    #future-plans .future-plan-kicker {
        margin-bottom: 12px;
        font-size: .76rem;
    }

    #future-plans .future-plan-copy h3 {
        font-size: 2rem;
        font-size: clamp(1.7rem, 2.6cqi, 2.4rem);
        line-height: 1.1;
    }

    #future-plans .future-plan-copy p {
        margin-top: 18px;
        font-size: 1.04rem;
        line-height: 1.78;
    }

    #future-plans .future-plan-link {
        margin-top: 14px;
    }

    /* Mirror the notch and bracket on reversed plans so every picture's
       cut corners point away from the spine and its bracket faces it. */
    #future-plans .future-plan--reverse .future-plan-media::before,
    #future-plans .future-plan--reverse .future-plan-media img,
    #future-plans .future-plan--reverse .future-plan-media .future-plan-video,
    #future-plans .future-plan--reverse .future-plan-media .future-plan-media-fallback {
        clip-path: polygon(
            var(--fp-cut) 0,
            100% 0,
            100% calc(100% - var(--fp-cut)),
            calc(100% - var(--fp-cut)) 100%,
            0 100%,
            0 var(--fp-cut)
        );
    }

    #future-plans .future-plan--reverse .future-plan-media::after {
        left: auto;
        right: calc(var(--fp-br) * -1);
        background:
            linear-gradient(var(--fp-gold), var(--fp-gold)) top right / 100% 2px no-repeat,
            linear-gradient(var(--fp-gold), var(--fp-gold)) top right / 2px 100% no-repeat;
    }

    /* The free bottom corner of a mirrored picture is bottom-left */
    #future-plans .future-plan--reverse .future-plan-media-caption {
        right: auto;
        left: 0;
        padding: 10px 16px 10px 14px;
        clip-path: polygon(
            0 0,
            calc(100% - var(--fp-chip)) 0,
            100% var(--fp-chip),
            100% 100%,
            0 100%
        );
    }

    #future-plans .future-plan--reverse .future-plan-media .future-plan-media-fallback {
        align-items: flex-end;
        padding: 28px 36px 28px 28px;
        text-align: right;
    }

    #future-plans .future-plans-empty {
        margin-top: 32px;
    }
}

/* ===== 1100px and up: wider gutters and gaps ========================== */
@container fplans (min-width: 1100px) {

    #future-plans .future-plans-hero,
    #future-plans .future-plans-roadmap {
        --fp-gutter: 48px;
    }

    #future-plans .future-plans-hero {
        --fp-cut: 52px;
        --fp-off: 24px;
        --fp-br: 16px;
        --fp-br-len: 88px;
        padding-top: 104px;
        padding-bottom: 44px;
    }

    #future-plans .future-plans-roadmap {
        --fp-cut: 32px;
        --fp-spine: 112px;
        --fp-node: 32px;
        --fp-index-h: 80px;
        --fp-pad: 56px;
        padding-top: 40px;
        padding-bottom: 120px;
    }

    #future-plans .future-plans-lead {
        font-size: 1.14rem;
    }

    #future-plans .future-plans-hero-caption {
        font-size: 1.65rem;
    }

    #future-plans .future-plan-index__number {
        font-size: 3.7rem;
    }

    #future-plans .future-plan-copy p {
        font-size: 1.08rem;
    }

    #future-plans .future-plan-media-caption {
        font-size: .86rem;
    }
}

/* ===== 1360px and up: the largest, most open version ================== */
@container fplans (min-width: 1360px) {

    #future-plans .future-plans-hero {
        --fp-cut: 60px;
        --fp-off: 26px;
        gap: 96px;
    }

    #future-plans .future-plans-roadmap {
        --fp-cut: 36px;
        --fp-spine: 120px;
        --fp-pad: 60px;
    }

    #future-plans .future-plan-index__number {
        font-size: 4rem;
    }

    #future-plans .future-plan-copy h3 {
        font-size: 2.4rem;
    }
}

/* ===== Very narrow sections (320px phones) ============================ */
@container fplans (max-width: 380px) {

    #future-plans .future-plans-hero,
    #future-plans .future-plans-roadmap {
        --fp-gutter: 16px;
    }

    #future-plans .future-plans-hero {
        --fp-cut: 20px;
        --fp-off: 10px;
        --fp-br: 8px;
        --fp-br-len: 44px;
        gap: 44px;
        padding-top: 48px;
    }

    #future-plans .future-plans-eyebrow {
        gap: 12px;
        font-size: .72rem;
        letter-spacing: .18em;
    }

    #future-plans .future-plans-eyebrow__line {
        width: 40px;
    }

    #future-plans .future-plans-lead {
        font-size: 1rem;
    }

    #future-plans .future-plans-text-link {
        width: 100%;
        gap: 12px;
        padding-left: 20px;
    }

    #future-plans .future-plans-hero-caption {
        --fp-chip: 12px;
        max-width: 86%;
        padding: 12px 14px 12px 18px;
        font-size: .95rem;
    }

    #future-plans .future-plans-hero-caption::before {
        margin-bottom: 6px;
        font-size: .64rem;
        letter-spacing: .2em;
    }

    #future-plans .future-plans-hero-caption::after {
        width: 32px;
        margin-top: 9px;
    }

    #future-plans .future-plans-hero-fallback {
        padding: 22px 20px 22px 28px;
    }

    #future-plans .future-plans-hero-fallback strong {
        font-size: 1.8rem;
    }

    #future-plans .future-plans-roadmap {
        --fp-cut: 14px;
        --fp-spine: 30px;
        --fp-node: 16px;
        --fp-halo: 3px;
        --fp-index-h: 46px;
        --fp-pad: 26px;
        --fp-inset: 12px;
        --fp-br: 7px;
        --fp-br-len: 40px;
        padding-bottom: 60px;
    }

    #future-plans .future-plans-roadmap__heading {
        min-height: 48px;
        padding: 8px 14px 8px 18px;
        font-size: .68rem;
        letter-spacing: .12em;
    }

    /* The fading rule would squeeze the heading text on a phone */
    #future-plans .future-plans-roadmap__rule {
        display: none;
    }

    #future-plans .future-plan-index {
        gap: 10px;
    }

    #future-plans .future-plan-index__number {
        font-size: 2.1rem;
    }

    #future-plans .future-plan-index__year {
        --fp-tag-cut: 6px;
        min-height: 28px;
        padding: 0 11px 0 10px;
        font-size: .72rem;
        letter-spacing: .06em;
    }

    #future-plans .future-plan-kicker {
        font-size: .7rem;
        letter-spacing: .16em;
    }

    #future-plans .future-plan-copy h3 {
        font-size: 1.42rem;
    }

    #future-plans .future-plan-copy p {
        font-size: .98rem;
        line-height: 1.72;
    }

    #future-plans .future-plan-media {
        aspect-ratio: 4 / 3;
    }

    #future-plans .future-plan-media-caption {
        --fp-chip: 8px;
        max-width: 80%;
        padding: 7px 10px 7px 13px;
        font-size: .74rem;
    }

    #future-plans .future-plan-media .future-plan-media-fallback {
        padding: 16px 14px 16px 22px;
    }

    #future-plans .future-plan-media-fallback span {
        font-size: 1.3rem;
    }

    #future-plans .future-plans-empty {
        padding: 26px 20px 26px 24px;
    }

    #future-plans .future-plans-section__botanical {
        display: none;
    }
}


/* ----------------------------------------------------------------------
   12. FALLBACK — browsers without container queries
   The section can no longer measure itself, so viewport widths are used
   instead. The fixed "Explore GSC-TEMPC" panel only exists on wide
   desktop screens, so the three-column layout is held back until 1240px.
   ---------------------------------------------------------------------- */
@supports not (container-type: inline-size) {

    @media (min-width: 560px) {

        #future-plans .future-plans-hero,
        #future-plans .future-plans-roadmap {
            --fp-gutter: 28px;
        }

        #future-plans .future-plans-hero {
            --fp-cut: 32px;
            --fp-off: 16px;
            --fp-br: 12px;
            --fp-br-len: 64px;
            gap: 60px;
            padding-top: 72px;
        }

        #future-plans .future-plans-intro h2 {
            font-size: 3.4rem;
        }

        #future-plans .future-plans-title-break {
            display: inline;
        }

        #future-plans .future-plans-hero-media {
            aspect-ratio: 16 / 9;
        }

        #future-plans .future-plans-hero-caption {
            padding: 20px 26px 20px 30px;
            font-size: 1.3rem;
        }

        #future-plans .future-plans-roadmap {
            --fp-cut: 20px;
            --fp-spine: 56px;
            --fp-node: 24px;
            --fp-halo: 5px;
            --fp-index-h: 64px;
            --fp-pad: 38px;
            --fp-inset: 18px;
            --fp-br: 10px;
            --fp-br-len: 56px;
        }

        #future-plans .future-plan-index__number {
            font-size: 2.9rem;
        }

        #future-plans .future-plan-copy h3 {
            font-size: 1.85rem;
        }

        #future-plans .future-plan-media {
            aspect-ratio: 16 / 9;
        }
    }

    @media (min-width: 1240px) {

        #future-plans .future-plans-hero,
        #future-plans .future-plans-roadmap {
            --fp-gutter: 40px;
        }

        #future-plans .future-plans-hero {
            --fp-cut: 44px;
            --fp-off: 20px;
            --fp-br: 14px;
            --fp-br-len: 80px;
            grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
            gap: 72px;
        }

        #future-plans .future-plans-intro h2 {
            font-size: 4.4rem;
        }

        #future-plans .future-plans-hero-media {
            aspect-ratio: 5 / 4;
        }

        #future-plans .future-plans-roadmap {
            --fp-cut: 28px;
            --fp-spine: 96px;
            --fp-node: 30px;
            --fp-halo: 6px;
            --fp-index-h: 76px;
            --fp-pad: 48px;
            --fp-inset: 0px;
            --fp-br: 12px;
            --fp-br-len: 64px;
        }

        #future-plans .future-plan {
            grid-template-columns:
                minmax(0, 1fr)
                var(--fp-spine)
                minmax(0, 1fr);
            row-gap: 0;
        }

        #future-plans .future-plan::before,
        #future-plans .future-plan::after {
            grid-column: 2;
        }

        #future-plans .future-plan-content {
            grid-column: 1;
            grid-row: 1;
            margin-left: 0;
        }

        #future-plans .future-plan-media {
            grid-column: 3;
            grid-row: 1;
            margin-left: 0;
            aspect-ratio: 16 / 10;
        }

        #future-plans .future-plan--reverse .future-plan-content {
            grid-column: 3;
        }

        #future-plans .future-plan--reverse .future-plan-media {
            grid-column: 1;
        }

        #future-plans .future-plan-content::before {
            content: '';
            position: absolute;
            top: calc(var(--fp-index-h) / 2 - 1px);
            right: calc(var(--fp-spine) / -2 + var(--fp-node) / 2 + var(--fp-halo));
            width: calc((var(--fp-spine) - var(--fp-node)) / 2 - var(--fp-halo));
            height: 2px;
            background: var(--fp-gold);
            pointer-events: none;
        }

        #future-plans .future-plan--reverse .future-plan-content::before {
            right: auto;
            left: calc(var(--fp-spine) / -2 + var(--fp-node) / 2 + var(--fp-halo));
        }

        #future-plans .future-plan-index__number {
            font-size: 3.4rem;
        }

        #future-plans .future-plan-copy h3 {
            font-size: 2rem;
        }

        #future-plans .future-plan--reverse .future-plan-media::before,
        #future-plans .future-plan--reverse .future-plan-media img,
        #future-plans .future-plan--reverse .future-plan-media .future-plan-video,
        #future-plans .future-plan--reverse .future-plan-media .future-plan-media-fallback {
            clip-path: polygon(
                var(--fp-cut) 0,
                100% 0,
                100% calc(100% - var(--fp-cut)),
                calc(100% - var(--fp-cut)) 100%,
                0 100%,
                0 var(--fp-cut)
            );
        }

        #future-plans .future-plan--reverse .future-plan-media::after {
            left: auto;
            right: calc(var(--fp-br) * -1);
            background:
                linear-gradient(var(--fp-gold), var(--fp-gold)) top right / 100% 2px no-repeat,
                linear-gradient(var(--fp-gold), var(--fp-gold)) top right / 2px 100% no-repeat;
        }

        #future-plans .future-plan--reverse .future-plan-media-caption {
            right: auto;
            left: 0;
            padding: 10px 16px 10px 14px;
            clip-path: polygon(
                0 0,
                calc(100% - var(--fp-chip)) 0,
                100% var(--fp-chip),
                100% 100%,
                0 100%
            );
        }
    }
}


/* ----------------------------------------------------------------------
   13. KEYBOARD FOCUS
   The page applies a gold focus outline to everything; gold on the pale
   green field is too faint, so links in this section use forest green.
   Every interactive element in the section is an <a>.
   ---------------------------------------------------------------------- */
#future-plans a:focus-visible {
    outline: 3px solid var(--fp-forest);
    outline-offset: 4px;
}

#future-plans a:focus:not(:focus-visible) {
    outline: none;
}

/* In-page anchors land below the sticky site header */
#future-plans #future-plans-roadmap,
#future-plans .future-plans-roadmap {
    scroll-margin-top: 80px;
}


/* ----------------------------------------------------------------------
   14. TOUCH DEVICES — no hover, so resting states must already look final
   ---------------------------------------------------------------------- */
@media (hover: none) {

    #future-plans .future-plans-text-link {
        box-shadow:
            0 10px 20px rgba(31, 90, 45, .22),
            inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    #future-plans .future-plan-link > span:last-child {
        background: var(--fp-leaf);
    }
}


/* ----------------------------------------------------------------------
   15. REDUCED MOTION
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    #future-plans .future-plans-text-link,
    #future-plans .future-plans-text-link > span:last-child,
    #future-plans .future-plan-link,
    #future-plans .future-plan-link > span:last-child {
        transition: none;
    }

    #future-plans .future-plans-text-link:hover,
    #future-plans .future-plans-text-link:active,
    #future-plans .future-plans-text-link:hover > span:last-child,
    #future-plans .future-plans-text-link:focus-visible > span:last-child,
    #future-plans .future-plan-link:hover > span:last-child,
    #future-plans .future-plan-link:focus-visible > span:last-child {
        transform: none;
    }
}


/* ----------------------------------------------------------------------
   16. HIGH-CONTRAST / FORCED COLORS
   Background colours are overridden in this mode, so the route, the band
   and the plates are given explicit system-colour treatments.
   ---------------------------------------------------------------------- */
@media (forced-colors: active) {

    #future-plans .future-plans-section__botanical,
    #future-plans .future-plans-section__wash {
        display: none;
    }

    #future-plans .future-plans-text-link {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        box-shadow: none;
    }

    #future-plans .future-plans-text-link > span:last-child {
        border: 1px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    #future-plans .future-plans-roadmap__heading,
    #future-plans .future-plans-hero-caption,
    #future-plans .future-plan-media-caption {
        background: Canvas;
        color: CanvasText;
        outline: 1px solid CanvasText;
    }

    #future-plans .future-plan::before {
        border: 2px solid CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    #future-plans .future-plan:last-of-type::before {
        background: CanvasText;
    }

    #future-plans .future-plan::after,
    #future-plans .future-plan-content::before {
        background: CanvasText;
    }

    #future-plans .future-plan-index__year {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }

    #future-plans .future-plan-link > span:first-child {
        text-decoration-color: LinkText;
    }

    #future-plans .future-plan-link > span:last-child {
        border: 1px solid LinkText;
        background: Canvas;
        color: LinkText;
    }

    #future-plans .future-plans-hero-media::before,
    #future-plans .future-plans-hero-media::after,
    #future-plans .future-plan-media::after {
        display: none;
    }

    #future-plans .future-plans-hero-fallback,
    #future-plans .future-plan-media-fallback {
        background: Canvas;
        color: CanvasText;
        outline: 1px solid CanvasText;
    }

    #future-plans .future-plans-hero-fallback span,
    #future-plans .future-plans-hero-fallback strong,
    #future-plans .future-plan-media-fallback span,
    #future-plans .future-plan-media-fallback strong {
        color: CanvasText;
    }
}


/* ----------------------------------------------------------------------
   17. PRINT — flat, ink-friendly, never split a plan across pages
   ---------------------------------------------------------------------- */
@media print {

    #future-plans.future-plans-section {
        overflow: visible;
        background: #FFFFFF;
    }

    #future-plans .future-plans-section__wash,
    #future-plans .future-plans-section__botanical {
        display: none;
    }

    #future-plans .future-plans-hero-media,
    #future-plans .future-plan-media {
        filter: none;
    }

    #future-plans .future-plans-hero-media::before {
        display: none;
    }

    #future-plans .future-plan {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    #future-plans .future-plans-text-link {
        background: #FFFFFF;
        color: #173E29;
        border-color: #173E29;
        box-shadow: none;
    }

    #future-plans .future-plans-text-link > span:last-child {
        background: #FFFFFF;
        color: #173E29;
    }

    #future-plans .future-plans-roadmap__heading,
    #future-plans .future-plans-hero-caption,
    #future-plans .future-plan-media-caption {
        background: #FFFFFF;
        color: #173E29;
        outline: 1px solid #173E29;
    }
}