.btn.on-white{background:var(--white); color:var(--ink);}
  .btn.on-white:hover{background:var(--paper);}
  .btn.outline-maroon{background:transparent; color:var(--maroon); border:2px solid var(--maroon); box-shadow:none; padding:15px 28px;}
  .btn.outline-maroon:hover{background:var(--maroon); color:var(--white); box-shadow:none;}
  .link-play{
    display:inline-flex; align-items:center; gap:12px;
    font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
    color:var(--white);
  }
  .link-play .dot{
    width:40px; height:40px; border-radius:50%; border:none; background:var(--white);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:background .18s ease, transform .18s ease;
  }
  .link-play:hover .dot{background:var(--gold); transform:scale(1.06);}
  .link-play svg{width:13px; height:13px; fill:var(--ink);}

  /* ---------- NAV ---------- */
  header.site-nav{position:absolute; top:0; left:0; right:0; z-index:60;}
  .nav-inner{max-width:var(--max); margin:0 auto; padding:30px 32px 0; display:flex; align-items:center; justify-content:space-between;}

  /* ---------- HERO ---------- */
  .hero{position:relative; background:linear-gradient(120deg, #201C17 0%, #14120F 45%, var(--ink) 75%); min-height:94vh; overflow:hidden;}
  .hero-photo{
    position:absolute; top:0; right:0; bottom:0; width:72%;
    filter:saturate(0.95) contrast(1.08) brightness(1.02);
    -webkit-mask-image:linear-gradient(to left, black 42%, transparent 96%), linear-gradient(to bottom, transparent 0%, black 22%);
    mask-image:linear-gradient(to left, black 42%, transparent 96%), linear-gradient(to bottom, transparent 0%, black 22%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  /* Real <img> (WebP via <picture>, JPG fallback) replaces the old CSS background.
     object-fit/object-position reproduce the previous background-size/position exactly. */
  .hero-photo-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:76% 42%; display:block;}
  .hero-photo::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0.045; mix-blend-mode:overlay; z-index:1;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='hn'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23hn)'/></svg>");
  }
  .hero-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(13,12,11,0.4) 0%, rgba(13,12,11,0) 26%),
               radial-gradient(circle at 70% 30%, rgba(134,38,51,0.12), transparent 60%);
  }
  .hero-inner{
    position:relative; z-index:2; max-width:var(--max); margin:0 auto; width:100%;
    padding:150px 32px 110px; display:grid; grid-template-columns:0.9fr 0.5fr; gap:20px;
  }
  .hero-eyebrow{color:var(--gold); margin-bottom:22px;}
  .hero-eyebrow .diamond{background:var(--gold);}
  .hero h1{color:var(--white); font-size:clamp(56px,9vw,110px); max-width:620px; line-height:0.96; position:relative;}
  .hero h1 .accent{color:var(--gold);}
  .hero-statement{color:var(--white); font-family:'Oswald',sans-serif; font-weight:500; text-transform:none; letter-spacing:0; font-size:clamp(17px,1.8vw,20px); margin-top:24px; max-width:440px;}
  .hero-copy{color:rgba(255,255,255,0.68); font-size:15px; max-width:480px; margin:12px 0 36px;}
  .hero-copy em{color:var(--gold); font-style:italic; font-weight:500;}
  .hero-actions{display:flex; align-items:center; gap:34px; flex-wrap:wrap;}

  .scroll-cue{
    position:absolute; left:32px; bottom:120px; z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  .scroll-cue .txt{
    font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.6);
    writing-mode:vertical-rl; transform:rotate(180deg);
  }
  .scroll-cue .ln{width:1px; height:56px; background:rgba(255,255,255,0.3); position:relative; overflow:hidden;}
  .scroll-cue .ln::after{content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold); animation:cueMove 1.8s ease-in-out infinite;}
  @keyframes cueMove{0%{top:-100%;} 50%{top:0%;} 100%{top:100%;}}

  /* ---------- SECTION GENERIC ---------- */
  section{padding:96px 0;}
  .sec-head{display:flex; justify-content:space-between; gap:50px; flex-wrap:wrap; margin-bottom:46px;}
  .sec-head .label{color:var(--maroon); margin-bottom:14px;}
  .sec-head h2{font-size:clamp(28px,3.8vw,44px); max-width:540px;}
  .sec-head p.dek{max-width:360px; font-size:14.5px; color:var(--grey-text); padding-top:6px; font-family:'Inter',sans-serif; text-transform:none; font-weight:400;}

  /* ---------- ABOUT ---------- */
  .about{background:var(--white);}
  .about .sec-head{margin-bottom:66px;}
  /* align-items:start puts the photo column's box-top at the same row-start as the copy
     column's box-top. But a box-top isn't a visual top: the lead paragraph has real leading
     (line-height 1.5 on a 19px face) sitting above its capital letters, while the photo is a
     hard edge with no equivalent whitespace. That mismatch is what reads as "low and
     disconnected" even though the grid is technically aligned. The negative margin on the
     photo column below is an optical correction, pulling the image up to meet the lead
     paragraph's text rather than its box-top — never as high as the section title above the
     grid, which sits outside the grid entirely. Desktop only; mobile (which reorders the
     photo above the copy) is untouched. Column gap is trimmed slightly (44px → 41px, ~7%)
     so the two columns read as more connected while the text measure stays effectively the
     same, since .about-copy already caps its own paragraphs at max-width:480px. */
  .about-grid{display:grid; grid-template-columns:1fr 0.72fr; gap:41px; align-items:start;}
  @media (min-width: 981px){
    .about-grid .about-photo-col{margin-top:-26px;}
  }
  .photo-caption{
    margin-top:12px; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--grey-text);
  }
  .about-copy p{font-size:16px; margin-bottom:16px; max-width:480px; color:#3d3b34;}
  .about-copy p.lead{font-weight:600; font-size:19px; color:var(--ink); line-height:1.5; margin-bottom:18px;}
  .players-note{
    font-family:'Permanent Marker', cursive; font-weight:400; font-size:38px; color:var(--gold);
    margin-top:52px; transform:rotate(-2.2deg); display:block; line-height:1; text-align:left;
    letter-spacing:0.01em;
  }

  .photo-frame{
    position:relative; margin:0; border-radius:4px; overflow:hidden; aspect-ratio:4/5;
    background:linear-gradient(135deg, #EDEAE2 0%, #E3DFD4 100%); border:1px solid var(--line);
  }
  .photo-frame img{width:100%; height:100%; display:block; object-fit:cover; object-position:50% 38%; filter:saturate(0.92) contrast(1.08) brightness(0.98);}
  .photo-frame::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; z-index:1;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='pn'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23pn)'/></svg>");
  }
  /* Tighter, slightly off-center editorial crop for the About photo specifically — avoids the
     perfectly centered "team photo" feel without touching the shared .photo-frame base. */
  .photo-frame.about-photo{aspect-ratio:2/3;}
  .photo-frame.about-photo img{object-position:41% 30%;}

  /* ---------- COOPERSTOWN — cohesive two-column editorial layout. White background —
     From the Dugout above it is cream, Be Part of the Journey below it is cream, so this
     keeps the page's white/cream alternation intact in the current section order
     (Hero / About / Dugout / Cooperstown / Journey). ---------- */
  .cooperstown{background:var(--white); position:relative; overflow:hidden;}
  .big-year{
    position:absolute; top:-40px; right:-20px; z-index:0; pointer-events:none; user-select:none;
    font-family:'Oswald',sans-serif; font-weight:700; color:var(--ink); opacity:0.045;
    line-height:1; font-size:clamp(180px, 20vw, 320px);
  }
  .cooperstown .wrap{position:relative; z-index:1;}
  .coop-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center;}
  /* Subtle 5% shift off-center — keeps the walk candid and environmental rather than symmetric */
  .photo-frame.coop-photo img{object-position:41% 44%;}
  /* Desktop only: align-items:center otherwise centers the text block a touch lower than the
     photo's own visual weight (the photo's content sits slightly above its box's vertical
     center). A small upward nudge reconnects the two without changing the grid, copy, or
     image themselves. */
  @media (min-width: 981px){
    .coop-copy{margin-top:-22px;}
  }
  .coop-copy p{font-size:16px; margin-bottom:16px; max-width:480px; color:#3d3b34;}
  .coop-copy p.lead{font-weight:600; font-size:19px; color:var(--ink); line-height:1.5; margin-bottom:18px;}
  .coop-quote{
    margin-top:40px; padding-left:26px; border-left:3px solid var(--maroon); position:relative;
  }
  .coop-quote p{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:clamp(24px,3.2vw,34px); line-height:1.35;
    color:var(--ink); text-transform:none; letter-spacing:0; max-width:480px;
  }

  /* ---------- BE PART OF THE JOURNEY — a closing editorial navigation bridge between From
     the Dugout and the footer, not a fundraising block or card grid. Cream band (reusing the
     same --paper token as Cooperstown, not a new tone), centered headline/dek, then three
     equal options in one row split by thin vertical rules — all identical plain oxblood
     text-link treatment (Meet the Team, Events, and Become a Partner alike); no filled button
     anywhere in this section. Top padding is pulled in slightly (desktop only) so the
     transition from From the Dugout feels more connected; bottom padding is left at the
     standard section rhythm so the footer transition still feels intentional. ---------- */
  .journey{background:var(--paper);}
  .journey-wrap{max-width:700px; margin:0 auto; text-align:center;}
  .journey .label{justify-content:center; color:var(--maroon); margin-bottom:0;}
  .journey h2{font-size:clamp(27px,3.1vw,36px); margin-top:12px;}
  .journey-dek{
    font-family:'Inter',sans-serif; text-transform:none; font-size:16px; line-height:1.55;
    color:#3d3b34; max-width:560px; margin:14px auto 0;
  }

  .journey-actions{
    margin-top:40px;
    display:flex; justify-content:center; align-items:stretch; gap:0;
  }
  .journey-action{
    flex:1 1 240px; max-width:280px; padding:0 26px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .journey-action-title{
    display:inline-flex; align-items:center; gap:7px; width:fit-content;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em;
    font-size:15px; font-weight:700; padding-bottom:4px;
    color:var(--maroon); border-bottom:2px solid var(--maroon);
    transition:color .15s ease, border-color .15s ease;
  }
  .journey-action-title:hover{color:var(--maroon-dark); border-color:var(--maroon-dark);}
  .journey-action-sub{
    font-family:'Inter',sans-serif; font-size:13px; line-height:1.5; color:var(--grey-text); max-width:210px;
  }
  .journey-action .arrow{transition:transform .15s ease;}
  .journey-action-title:hover .arrow{transform:translateX(3px);}

  .journey-divider{width:1px; align-self:stretch; background:var(--line); opacity:0.55; margin:4px 0;}

  /* Desktop only: tighten the gap above this section slightly so it reads as more connected
     to From the Dugout above it, without touching the generous bottom padding that keeps the
     footer transition feeling intentional. */
  @media (min-width: 981px){
    .journey{padding-top:68px;}
  }

  /* ---------- FROM THE DUGOUT — built on the exact same section rhythm as About ("More Than
     Baseball") and Cooperstown: no custom section padding, same .wrap/.sec-head components,
     oxblood/gold/white palette (no Sedona red in this section — that's the nav's own CTA
     color, not this one). Structure is now two stacked pieces: a full-width GameChanger
     strip directly under the heading (a live-score utility band, not a featured block),
     then an editorial story grid below it — one large featured story beside two smaller
     secondary stories. No text-on-image overlay anywhere on the story cards: image-on-top,
     metadata/headline/excerpt/CTA below it. */
  /* Cream background (--paper) — About above it and Cooperstown below it are both white,
     keeping the page's white/cream alternation intact now that Dugout sits between them. */
  .dugout{background:var(--paper); position:relative;}
  .dugout .wrap{position:relative; z-index:1;}
  .dugout .sec-head{margin-bottom:22px; position:relative; z-index:1;}
  .dugout .sec-head .label{color:var(--maroon);}
  .dugout .sec-head .label .diamond{background:var(--maroon);}

  /* ---------- FULL-WIDTH GAMECHANGER STRIP — no label, no panel, minimal padding, just
     the widget on the section's own cream background spanning the full content width. We
     never style or touch the widget's own internal markup here (vendor-controlled; might
     be an iframe, might be shadow DOM — can't tell from a screenshot and can't execute the
     SDK here to check).

     OVERFLOW HANDLING — the same on desktop and mobile now: overflow:hidden on
     .dugout-scores-widget is a safety net against the embed somehow rendering wider than
     its column (we can't fully test a third-party black box from here, so this guarantees
     no page-level horizontal scroll even in that unlikely case). On mobile the widget's
     own responsive logic collapses to a vertical list at this width — that was briefly
     overridden to force horizontal mode instead, but a sideways-scrolling strip turned out
     to be a worse experience than a vertical list that shows every game with no scrolling
     at all, so that override was removed. .dugout-scores-scroll exists purely as a stable
     wrapper at this point — it's not doing anything desktop's layout doesn't already do on
     its own.

     SIZE — the widget's fonts, card heights, and spacing are all set by its own internal
     markup, which we can't edit directly (same reachability problem as the header). But
     `zoom` is a real CSS property applied to OUR wrapper, not anything inside the embed:
     it scales the whole rendered subtree — box sizes, fonts, spacing, everything — as one
     proportional unit, the same way a browser's own page-zoom would, and (unlike
     `transform: scale()`) it actually reflows, so the widget's layout footprint shrinks to
     match rather than leaving blank space behind. Nothing gets cut off at any zoom value,
     so unlike the header crop below, this is safe to set now rather than waiting on a
     measurement — tune --gc-zoom lower/higher if 0.82 (18% smaller) isn't quite right.

     NATIVE HEADER CROP — set up but OFF by default (--gc-header-crop: 0px below). This
     does NOT reach into the widget's own markup at all (so it works the same whether it's
     an iframe or a shadow DOM): overflow:hidden on this wrapper, combined with a negative
     margin-top on the widget's own root div, clips exactly N pixels off the TOP of the
     whole rendered embed from the outside. The risk is purely in the number — cropping too
     little leaves header behind, cropping too much cuts into a real game row — and that
     number can only be measured by opening this page in a real browser and checking the
     header's actual rendered height in dev tools (Inspect → the pale-blue GAMECHANGER/
     team-name block → height in px), AFTER zoom is applied, since zoom changes that
     rendered height too. We can't execute the SDK here to measure it ourselves, so
     guessing risks exactly the "cut into real score content" outcome this kind of change
     needs to avoid. Once measured, set it on one line below:
         --gc-header-crop: 110px;   (110 is a placeholder — replace with the real number) */
  .dugout-scores-strip{position:relative; z-index:1; margin-bottom:14px; width:100%; max-width:100%; background:var(--paper);}
  /* Plain full-width wrapper on desktop. Explicit min-width:0 is defensive: it's what
     stops a wide child from ever forcing this box (and everything above it — .wrap,
     .dugout, the page) to grow past 100%. The mobile override below is what actually
     turns this into the horizontal-scroll boundary; nothing here on desktop changes. */
  .dugout-scores-scroll{width:100%; max-width:100%; min-width:0; background:var(--paper);}
  .dugout-scores-widget{
    --gc-header-crop: 0px;
    --gc-zoom: 0.7;
    zoom: var(--gc-zoom);
    overflow:hidden;
    background:var(--paper);
  }
  .dugout-scores-widget > div{margin-top:calc(-1 * var(--gc-header-crop)); background:var(--paper);}
  /* On mobile, the widget's own responsive logic switches to a narrow vertical list once
     its container gets this small — which produced a confirmed bug (a blank white area
     next to the list, since the list's own fixed-width card didn't fill whatever width we
     gave the wrapper) and, separately, wasn't the presentation wanted on mobile anyway.
     The mobile override below forces the widget to keep rendering in its wide/horizontal
     mode instead — the same mode the desktop screenshots show working cleanly, with no
     blank-area bug — and gives .dugout-scores-scroll a real overflow-x:auto boundary so
     that extra width scrolls inside it instead of ever reaching .wrap/.dugout/the page. */

  /* Thin muted-gold rule separating the live-score strip from the editorial story grid
     below it. Reduced opacity (not a sub-1px height, which isn't reliably renderable) is
     what makes this read as "thinner and more subtle" — a quiet separator, not a design
     feature in its own right. Restrained spacing on both sides. */
  .dugout-rule{height:1px; background:var(--gold); opacity:0.45; margin-bottom:14px;}

  /* ---------- STORY GRID — featured story (large, left) beside two secondary stories
     (compact, stacked, right). Single column by default; the min-width:981px query below
     introduces the ~67/33 split, so mobile automatically falls back to one column with
     the featured story first — no extra reordering rules needed. */
  .dugout-story-grid{display:grid; gap:40px; align-items:start;}
  @media (min-width: 981px){
    .dugout-story-grid{grid-template-columns:2fr 1fr; gap:48px;}
  }

  /* Shared story component — base sizing is the mobile scale, used by both the featured
     and secondary stories alike until the min-width:981px query below splits them apart. */
  .dugout-story{position:relative; z-index:1; display:flex; flex-direction:column;}
  .dugout-story-photo{width:100%; aspect-ratio:16/9; border-radius:0;}
  .dugout-story-photo img{width:100%; height:100%; display:block; object-fit:cover;}
  .dugout-story-body{padding-top:16px;}
  .dugout-meta{font-family:'Oswald',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold);}
  .dugout-story-body h3{margin-top:8px; font-size:22px; line-height:1.15; color:var(--ink);}
  .dugout-story-body > p{margin-top:7px; font-family:'Inter',sans-serif; font-size:15px; font-weight:400; text-transform:none; letter-spacing:0; color:#3d3b34; line-height:1.55;}

  .dugout-cta{
    margin-top:11px; display:inline-flex; align-items:center; gap:7px;
    font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.04em; font-size:11.5px; text-transform:uppercase;
    color:var(--maroon); border-bottom:2px solid var(--maroon); padding-bottom:2px;
    transition:color .15s ease, border-color .15s ease;
  }
  .dugout-cta:hover{color:var(--maroon-dark); border-color:var(--maroon-dark);}
  .dugout-cta .arrow{transition:transform .15s ease;}
  .dugout-cta:hover .arrow{transform:translateX(3px);}

  /* Secondary column: the two smaller stories stacked with a thin divider between them —
     same sibling-divider pattern used elsewhere on the site for stacked cards. */
  .dugout-secondary{display:flex; flex-direction:column; position:relative; z-index:1;}
  .dugout-secondary .dugout-story + .dugout-story{border-top:1px solid var(--line); margin-top:10px; padding-top:10px;}

  /* ---------- DESKTOP-ONLY TYPE SCALE — the featured story steps UP from the shared mobile
     base above (sports-magazine lead-story scale); the secondary stories step DOWN to a
     compact scale, so the hierarchy between the two is unmistakable. Below 981px neither
     applies, so the single-column mobile stack uses one consistent scale throughout. ---------- */
  @media (min-width: 981px){
    /* Slightly shorter than the shared 16/9 base (same width, less height) — purely to
       help the featured story's overall height sit closer to the two stacked secondary
       stories beside it, per spec. Crop and width are otherwise unchanged. */
    .dugout-story--featured .dugout-story-photo{aspect-ratio:2/1;}
    .dugout-story--featured .dugout-story-body{padding-top:14px;}
    .dugout-story--featured .dugout-story-body h3{margin-top:7px; font-size:clamp(28px,3.4vw,38px); line-height:1.08;}
    .dugout-story--featured .dugout-story-body > p{margin-top:8px; font-size:16.5px; line-height:1.6; max-width:520px;}
    .dugout-story--featured .dugout-cta{margin-top:12px;}

    .dugout-story--secondary .dugout-meta{font-size:10.5px;}
    .dugout-story--secondary .dugout-story-body h3{font-size:17px; line-height:1.2;}
    .dugout-story--secondary .dugout-story-body > p{font-size:12.5px; line-height:1.4;}
    .dugout-story--secondary .dugout-cta{margin-top:4px;}
  }
  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .nav-links{display:none;}
    .hero-inner{grid-template-columns:1fr; padding-top:150px;}
    .hero-photo{width:100%; -webkit-mask-image:linear-gradient(to top, black 12%, transparent 94%); mask-image:linear-gradient(to top, black 12%, transparent 94%);}
    .hero-photo-img{object-position:66% 40%;}
    .hero-photo::after{
      background:
        radial-gradient(ellipse 130% 65% at 32% 58%, rgba(8,7,6,0.72) 0%, rgba(8,7,6,0.25) 55%, rgba(8,7,6,0) 85%),
        linear-gradient(to top, rgba(13,12,11,0.4) 0%, rgba(13,12,11,0) 26%),
        radial-gradient(circle at 70% 30%, rgba(134,38,51,0.12), transparent 60%);
    }
    .scroll-cue{display:none;}
    .about-grid{grid-template-columns:1fr; gap:34px;}
    .about-grid .about-photo-col{order:-1;}
    .about-grid .about-photo-col .about-photo{aspect-ratio:16/10;}
    .about .sec-head{margin-bottom:48px;}
    .players-note{margin-top:38px;}
    .coop-grid{grid-template-columns:1fr; gap:34px;}
    .coop-grid .photo-frame{aspect-ratio:16/10;}
    .coop-grid .photo-frame img{object-position:center;}
    .join{padding:43px 0;}
    /* Mobile preserves the same hierarchy as desktop (strip, then featured story, then
       secondary stories) because .dugout-story-grid is single-column by default and the
       featured/secondary split only applies at min-width:981px — so nothing extra is
       needed here to reorder or restack anything. */

    /* GAMECHANGER ON MOBILE — settled: ANY zoom value breaks this widget's layout on
       mobile, not just aggressive ones. 0.7 broke the width fit; 0.92 (a much lighter
       touch) broke it too, plus compressed it vertically this time. That rules out "how
       much" zoom shrinks things as the variable — it's zoom itself, at any value, on
       this widget, on mobile. zoom:1 (fully off) is the only combination that's actually
       rendered correctly on a real phone, so that's where this stays. Font size on mobile
       is consequently not something we can touch without breaking the layout — those two
       goals are in direct conflict for this specific embed, and correct layout wins.
       Desktop keeps the base --gc-zoom:0.7 (never touched here), since that's a separate,
       already-confirmed-working configuration. */
    .dugout-scores-widget{zoom:1;}

    /* STORY SPACING — more breathing room at every transition below the score strip:
       strip-to-featured, featured-to-secondary-1, and between the two secondary stories.
       None of this touches the desktop values (40px column gap, 10px secondary gap). */
    .dugout-scores-strip{margin-bottom:26px;}
    .dugout-rule{margin-bottom:26px;}
    .dugout-story-grid{gap:52px;}
    .dugout-secondary .dugout-story + .dugout-story{margin-top:28px; padding-top:28px;}

    /* BE PART OF THE JOURNEY — stack the three options and swap the vertical dividers for
       thin horizontal ones (same element, just restyled — not removed and replaced). All
       three options already share one plain-link markup, so no CTA-specific swap is needed
       here. */
    .journey-actions{flex-direction:column; align-items:center; gap:0;}
    /* flex:1 1 240px from the desktop rule sets a *width* basis there, but once the main axis
       flips to vertical here, that same 240px gets reinterpreted as a *height* basis — forcing
       every action to a 240px minimum height and leaving huge gaps under the short content.
       Reset to natural content sizing. */
    .journey-action{flex:0 0 auto; max-width:320px; width:100%; padding:28px 0;}
    .journey-action:first-child{padding-top:0;}
    .journey-action:last-child{padding-bottom:0;}
    .journey-divider{width:100%; max-width:200px; height:1px; align-self:center; margin:0 auto;}
  }
  @media (max-width: 640px){
    .wrap{padding:0 20px;}
    section{padding:64px 0;}
    .journey-wrap{max-width:100%;}
    .hero-inner{padding-bottom:110px;}
    .about .sec-head{margin-bottom:34px;}
    .players-note{margin-top:28px;}
    .dugout .sec-head{margin-bottom:24px;}
  }
  @media (prefers-reduced-motion: reduce){*{transition-duration:0.01ms !important;}}