:root {
      --color-navy: #0c1b2e;
      --color-navy-2: #102540;
      --color-navy-3: #081421;
      --color-gold: #d4af37;
      --color-gold-light: #e8c84a;
      --color-bg: #fafaf8;
      --color-bg-warm: #f2ede6;
      --color-text: #0c1b2e;
      --color-text-light: #ede8e0;
      --color-muted: #4e5c6c;
      --color-gold-ink: #7f6921;    /* gold-toned TEXT on light bg — 4.57:1 on warm */
      --color-gold-ink-lg: #a1852a; /* large display accents on light — 3.05:1 on warm */
      --color-rule: rgba(12, 27, 46, 0.1);
      --color-rule-gold: rgba(212, 175, 55, 0.25);

      /* ── Section spacing scale (Phase 3.5) ──
         Viewport-tied, replaces flat py-32/py-48 Tailwind values.
         tight = connective bands · std = default · generous = set-piece CTAs */
      --sec-tight:    clamp(2.5rem, 6vh, 4.5rem);
      --sec-std:      clamp(4.5rem, 12vh, 7.5rem);
      --sec-generous: clamp(7.5rem, 19vh, 13rem);
    }

    .sec-tight { padding-top: var(--sec-tight);    padding-bottom: var(--sec-tight); }
    .sec-std   { padding-top: var(--sec-std);      padding-bottom: var(--sec-std); }
    .sec-gen   { padding-top: var(--sec-generous); padding-bottom: var(--sec-generous); }

    /* C15 — 108px of #about's bottom pad met 108px of #events' top pad, so
       216px of nothing sat between the founder band and "Upcoming Events".
       Two full section pads never needed to stack at a colour change: the
       boundary already does the separating. Halve the incoming side. */
    #events.sec-std { padding-top: clamp(2.75rem, 6vh, 4rem); }

    /* C5 — the same stacking closed the page. 171px under the "Become a
       Member" button, then the footer's own 64px, for 235px of empty navy
       before the footer columns. A closing section does not need its full
       bottom pad; the footer brings its own. */
    main > section:last-child.sec-gen { padding-bottom: clamp(3rem, 7vh, 5rem); }

    html, body { margin: 0; padding: 0; background: var(--color-navy); }
    body { font-family: "DM Sans", system-ui, sans-serif; color: var(--color-text); overflow-x: hidden; }
    .font-display { font-family: "Cormorant Garamond", Georgia, serif; }

    /* Lenis */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-stopped { overflow: hidden; }

    ::selection { background: var(--color-gold); color: var(--color-navy); }

    /* ── Display type scale (Phase 3.6d) ──────────────────────────────
       Rebuilt from the original px scale, which topped out at 200px, broke
       the ~2.5x clamp min-max bound on three steps, and compressed its
       ratios at the top so the largest four sizes read as one. All values
       are rem so browser font-size settings are respected. */
    .t-hero      { font-size: clamp(3.5rem, 8vw, 6.5rem);   line-height: 0.92; letter-spacing: -0.022em; }
    .t-cta       { font-size: clamp(3.2rem, 7vw, 6rem);     line-height: 0.94; letter-spacing: -0.022em; }
    .t-mission   { font-size: clamp(2.9rem, 6vw, 5rem);     line-height: 1.02; letter-spacing: -0.018em; }
    .t-display   { font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.014em; }
    .t-display-sm{ font-size: clamp(2rem, 3.4vw, 3.25rem);  line-height: 1.12; letter-spacing: -0.01em; }

    /* ── Metadata labels ── */
    .eyebrow {
      font-family: "DM Sans", sans-serif;
      letter-spacing: 0.22em; text-transform: uppercase;
      font-size: 0.78rem; font-weight: 500;
    }
    /* Gold rule */
    .rule-gold { height: 1px; background: var(--color-rule-gold); }

    /* ── Section seam — scroll-drawn gold rule + star at dark-to-dark boundaries ── */
    .seam { display:flex; align-items:center; gap:1.25rem; margin:0 auto; max-width:88rem; padding:0 1.5rem; }
    @media (min-width:768px){ .seam { padding:0 2.5rem; } }
    .seam-rule { height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--color-gold) 30%, var(--color-gold) 70%, transparent); opacity:0.45; transform-origin:center; }
    .seam-star { color:var(--color-gold); opacity:0.7; font-family:"Cormorant Garamond", serif; font-size:1.1rem; line-height:1; }

    /* A restrained entry wash connects each editorial band without blurring the
       strong light/dark rhythm. Content remains above the transition layer. */
    .section-flow { position:relative; --section-edge:rgba(12,27,46,0.09); }
    .section-flow.bg-bg-warm { --section-edge:rgba(127,105,33,0.10); }
    .section-flow.bg-navy,
    .section-flow.bg-navy-2,
    .section-flow.bg-navy-3 { --section-edge:rgba(212,175,55,0.11); }
    .section-flow::after {
      content:""; position:absolute; top:0; left:0; right:0;
      height:clamp(0.85rem,2.4vw,2.25rem); z-index:4; pointer-events:none;
      background:linear-gradient(180deg, var(--section-edge), transparent);
      box-shadow:inset 0 1px 0 rgba(12,27,46,0.07);
    }
    .section-flow.bg-navy::after,
    .section-flow.bg-navy-2::after,
    .section-flow.bg-navy-3::after { box-shadow:inset 0 1px 0 rgba(212,175,55,0.16); }

    /* ── Star-field texture — art-directs "waiting" navy bands ── */
    .navy-stars::before {
      content:""; position:absolute; inset:0; pointer-events:none;
      background-image:
        radial-gradient(rgba(212,175,55,0.20) 1px, transparent 1.6px),
        radial-gradient(rgba(237,232,224,0.10) 1px, transparent 1.6px);
      background-size: 210px 210px, 140px 140px;
      background-position: 0 0, 70px 90px;
      opacity:0.5;
    }

    /* ── Line mask reveal ── */
    .line-mask { display: block; overflow: hidden; }
    .line-mask > * { display: block; will-change: transform; }

    /* ══ HERO — bright flag + Dallas sunset (2026-08-20) ═════════════════
       Desktop and portrait sources preserve the flag and skyline independently.
       A richer cobalt-to-gold field keeps the scene lively while a lighter
       directional scrim protects the copy at every breakpoint. */
    .hero-flagfield {
      isolation:isolate;
      background:var(--color-navy);
    }

    .hero-photo { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
    .hero-photo picture { display:block; width:100%; height:100%; }
    .hero-photo-img {
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      /* The generated source is already vivid; retain detail without clipping colour. */
      filter:saturate(1.04) contrast(1.03) brightness(1.02);
    }
    .hero-photo::after {
      content:""; position:absolute; inset:0; z-index:2;
      background:
        linear-gradient(94deg, rgba(8,20,33,0.80) 0%, rgba(8,20,33,0.70) 28%, rgba(8,20,33,0.50) 42%, rgba(8,20,33,0.12) 57%, rgba(8,20,33,0) 72%),
        linear-gradient(180deg, rgba(8,20,33,0.08) 0%, rgba(8,20,33,0) 34%, rgba(8,20,33,0.06) 62%, rgba(5,13,22,0.38) 100%);
    }

    /* ══ HERO TYPE SCALE (Phase 3.6b) ═══════════════════════════════════
       The previous hero measured 10.4 · 11.2 · 16 · 17 · 109.4px — four
       sizes bunched under 17px, then a single 6.4:1 leap to the headline,
       with no subheading tier between them. Sizes that close together read
       as muddy rather than as ranks, and the lone jump reads as a cliff.

       This is a real ramp with ~1.75-2.6x between steps:
         caption  11.5px   metadata, scroll cue  (one caption size, not two)
         lead     17-20px  hero paragraph
         lead-in  24-40px  H1 first line
         display  56-104px H1 payload word
       Every clamp() stays within the ~2.5x min-max band so large viewports
       scale smoothly instead of shouting.                                  */
    :root {
      --hero-caption: 0.72rem;
      --hero-lead:    clamp(1.0625rem, 1.15vw, 1.25rem);
      --hero-lead-in: clamp(1.5rem, 2.8vw, 2.5rem);
      --hero-display: clamp(3.5rem, 8vw, 6.5rem);
    }

    .hero-title { margin: 0; }

    /* Lead-in: small, tracked, lighter weight — a spoken preamble, not a
       co-equal line. Optical left-align pulls the cap "T" flush with the
       eyebrow and rule above it. */
    .hero-title-lead {
      display: block;
      font-size: var(--hero-lead-in);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: 0.005em;
      color: rgba(237, 232, 224, 0.82);
      margin-left: -0.02em;
    }

    /* Payload word: the size, weight and colour contrast all land here. */
    .hero-title-word {
      display: block;
      font-size: var(--hero-display);
      font-weight: 500;
      line-height: 0.92;
      letter-spacing: -0.025em;
      margin-left: -0.045em;   /* optical align — Cormorant's "S" sits inset */
      margin-top: 0.04em;
    }

    /* Hero lead paragraph — light-on-dark compensation on all three axes
       (weight 300 -> 400, opened leading, a touch of tracking), per the
       perceived-weight drop of light text on a dark field. */
    .hero-sub {
      font-size: var(--hero-lead);
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: 0.006em;
      color: rgba(237, 232, 224, 0.86);
      max-width: 46ch;
    }

    @media (max-height: 720px) {
      :root { --hero-display: clamp(3rem, 6.4vw, 5rem); --hero-lead-in: clamp(1.35rem, 2.2vw, 2rem); }
    }

    /* ══ HERO VERTICAL RHYTHM (Phase 3.6b) ══════════════════════════════
       Measured gaps were 23 · 7 · 54 · 6px — arbitrary, and the grouping was
       inverted: the paragraph sat 54px from the headline but only 6px from
       the buttons, so it read as belonging to the CTAs rather than to the
       copy. Regrouped into three blocks, tight within / generous between:

         [ rule ]  --28px--  [ HEADLINE ]  --40px--  [ lead + CTAs ]

       Values come off a 4pt scale (12 / 28 / 40 / 26), not ad-hoc numbers. */
    .hero-rule {
      width: 64px; height: 2px;
      background: var(--color-gold);
      margin: 0.75rem 0 1.75rem;   /* 12px above (tight to eyebrow), 28px below */
    }

    .hero-sub  { margin: 2.5rem 0 0; }   /* 40px — separates from the headline */
    .hero-cta  { margin-top: 1.625rem; gap: 0.875rem; }  /* 26px — grouped with the lead */

    /* CTA rank. Both buttons were identical 16px/500 with the same padding, so
       the secondary competed with the primary for the same visual weight. */
    .btn-lg { font-size: 1rem;      font-weight: 500; padding: 1rem 2.1rem; letter-spacing: 0.005em; }
    .btn-sm { font-size: 0.9375rem; font-weight: 400; padding: 0.8rem 1.5rem; letter-spacing: 0.005em; }
    .btn-outline.btn-sm { border-color: rgba(212, 175, 55, 0.34); }

    /* Ghost watermark typography */
    .ghost {
      position:absolute; pointer-events:none; user-select:none;
      font-family:"Cormorant Garamond", serif; font-weight:500;
      line-height:0.8; white-space:nowrap;
    }

    /* ── Buttons ── */
    .btn-gold {
      border-radius: 2px;
      background: var(--color-gold); color: var(--color-navy);
      transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
      box-shadow: 0 8px 24px -10px rgba(212,175,55,0.6);
    }
    .btn-gold:hover { background: var(--color-gold-light); transform: translateY(-3px); box-shadow:0 16px 34px -12px rgba(212,175,55,0.7); }
    .btn-outline {
      border-radius: 2px;
      border: 1px solid var(--color-rule-gold); color: var(--color-text-light);
      transition: border-color .3s ease, color .3s ease, transform .3s ease;
    }
    .btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold); transform: translateY(-3px); }

    /* ── Marquee ── */
    .marquee { display:flex; width:max-content; will-change:transform; }
    .marquee span { white-space:nowrap; letter-spacing:0.015em; }
    .marquee-mask {
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }

    /* ── Bento ── */
    .bento-card {
      position:relative; border-radius:24px; background:#fff;
      border:1px solid var(--color-rule);
      box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 48px -32px rgba(12,27,46,0.35);
      transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
      overflow:hidden;
    }
    /* hover lift handled by GSAP tilt (transform) — CSS keeps shadow/border feedback */
    .bento-card:hover { box-shadow:0 36px 60px -34px rgba(12,27,46,0.45); border-color:var(--color-rule-gold); }
    .bento-card::before {
      content:""; position:absolute; top:0; left:0; right:0; height:4px;
      background:linear-gradient(90deg, var(--color-gold), transparent 70%);
      opacity:.85; z-index:1;
    }
    /* gold wash on hover — fades in from the top edge */
    .bento-card::after {
      content:""; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(170deg, rgba(212,175,55,0.10) 0%, transparent 45%);
      opacity:0; transition:opacity .45s ease;
    }
    .bento-card:hover::after { opacity:1; }
    .bento-card svg { transition:transform .45s cubic-bezier(.2,.7,.2,1); }
    .bento-card:hover svg { transform:translateY(-4px) scale(1.06); }
    .bento-feature { background:linear-gradient(160deg,#0c1b2e 0%,#102540 70%,#081421 100%); border-color:rgba(212,175,55,0.25); }
    .bento-feature::before { background:linear-gradient(90deg, var(--color-gold), transparent 55%); }

    /* icon chips — consistent gold badges across all bento cells */
    .wj-icon {
      display:inline-grid; place-items:center; width:3.25rem; height:3.25rem;
      border-radius:999px; color:var(--color-gold);
      border:1px solid rgba(212,175,55,0.28); background:rgba(212,175,55,0.08);
      transition:transform .45s cubic-bezier(.2,.7,.2,1), background .45s ease;
    }
    .bento-card:hover .wj-icon { transform:translateY(-3px) scale(1.06); background:rgba(212,175,55,0.14); }
    .wj-icon-dark { border-color:rgba(212,175,55,0.4); background:rgba(212,175,55,0.12); }

    /* ── Why Join — framed editorial membership cards ── */
    .wj-tiles {
      display:grid;
      gap:clamp(0.9rem,1.35vw,1.4rem);
      background:transparent;
      border:0;
    }
    .wj-tile {
      position:relative; overflow:hidden; isolation:isolate;
      min-height:clamp(27rem,30vw,30rem); display:flex; flex-direction:column; justify-content:flex-end;
      background:var(--color-navy);
      border:1px solid rgba(127,105,33,0.68);
      border-top:3px solid var(--color-gold-ink);
      border-radius:4px;
      box-shadow:0 18px 34px -24px rgba(12,27,46,0.52);
      transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease;
    }
    .wj-photo {
      position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
      filter:brightness(0.68) saturate(0.92) contrast(1.06);
      transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
    }
    @media (pointer:fine) {
      .wj-tile:hover {
        transform:translateY(-7px);
        border-color:var(--color-gold-ink);
        box-shadow:0 30px 52px -28px rgba(12,27,46,0.64);
      }
      .wj-tile:hover .wj-photo { transform:scale(1.07); filter:brightness(0.8) saturate(1.02) contrast(1.08); }
    }
    /* navy grade — anchors text at the base, keeps the gold index legible up top */
    .wj-tile::after {
      content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
      background:linear-gradient(to top, rgba(8,20,33,0.95) 0%, rgba(12,27,46,0.60) 46%, rgba(12,27,46,0.42) 100%);
    }
    .wj-tile-top, .wj-body { position:relative; z-index:2; }
    .wj-tile-top {
      display:flex; align-items:flex-start; justify-content:space-between;
      padding:1.75rem 1.75rem 0;
    }
    .wj-body {
      display:grid; grid-template-rows:3.75rem 2px minmax(0,1fr);
      align-items:start; height:15.5rem; margin-top:auto; padding:1.7rem 1.75rem 2rem;
    }
    .wj-card-title { display:flex; align-items:flex-start; margin:0; font-size:clamp(1.7rem,2vw,2.05rem); }
    .wj-card-copy { margin:0; padding-top:1rem; font-size:clamp(0.9rem,1vw,1rem); }
    .wj-rule2 { width:2.8rem; height:2px; background:var(--color-gold); margin:0; transition:width .5s ease; }
    .wj-tile:hover .wj-rule2 { width:58px; }
    .wj-tile:hover .wj-icon { transform:translateY(-3px) scale(1.06); background:rgba(212,175,55,0.16); }
    @media (max-width: 1199px) {
      .wj-tiles { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
      .wj-tile { min-height:27rem; }
      .wj-body { height:14.5rem; }
    }
    @media (max-width: 639px) {
      .wj-tiles { grid-template-columns:minmax(0,1fr) !important; }
      .wj-tile { min-height:25rem; }
      .wj-body { height:13.5rem; grid-template-rows:3.25rem 2px minmax(0,1fr); padding-inline:1.4rem; }
      .wj-tile-top { padding-inline:1.4rem; }
    }

    /* ── Magazine 3D ── */
    .mag-stage { width:min(31rem,42vw); perspective:1800px; }
    .mag {
      position:relative; width:100%; aspect-ratio:1100/1424;
      transform-style:preserve-3d; will-change:transform;
    }
    /* Page block behind the cover. Mirrored to the LEFT because the cover is
       turned spine-forward (positive rotateY) to match the approved mockup —
       on the far right edge it would read as pages growing out of the trim. */
    .mag::before {
      content:""; position:absolute; z-index:0;
      top:0.7rem; left:-0.6rem; bottom:-0.7rem; right:0.7rem;
      border-radius:7px 4px 4px 7px;
      background:linear-gradient(270deg,#d6d0c5 0%,#f6f1e8 74%,#c7bfae 100%);
      box-shadow:0 28px 55px rgba(0,0,0,0.42);
      transform:translateZ(-10px);
    }
    .mag-glow {
      position:absolute; inset:-18% -16% -22%;
      background:radial-gradient(ellipse at 55% 48%,rgba(212,175,55,0.34),rgba(212,175,55,0.08) 46%,transparent 72%);
      filter:blur(46px); z-index:0; pointer-events:none;
    }
    .mag-cover {
      position:relative; z-index:1; display:block; width:100%; height:100%; overflow:hidden;
      border:1px solid rgba(212,175,55,0.34); border-radius:7px 4px 4px 7px;
      background:#eee8de;
      box-shadow:24px 32px 58px rgba(0,0,0,0.54),inset 0 0 0 1px rgba(255,255,255,0.18);
      transform:translateZ(2px);
    }
    .mag-cover img { display:block; width:100%; height:100%; object-fit:cover; }
    /* Spine shading — the near edge now, so it carries a little more weight. */
    .mag-cover::before { content:""; position:absolute; top:0; bottom:0; left:0; width:20px;
      z-index:2; background:linear-gradient(90deg,rgba(0,0,0,0.48),rgba(255,255,255,0.08) 66%,transparent); border-radius:7px 0 0 7px; }
    .mag-cover::after { content:""; position:absolute; inset:0;
      z-index:2; background:linear-gradient(245deg,rgba(255,255,255,0.14) 0%,transparent 28%,transparent 72%,rgba(255,255,255,0.05) 100%); pointer-events:none; }

    /* Chamber statement: the seal is decoration behind the words. */
    #about { padding-block: 8.75rem; --statement-drop: 40px; }
    .statement-inner { max-width: 900px; }
    .statement-seal { position: absolute; top: 50%; left: 50%; width: min(520px, 100vw); aspect-ratio: 1; background: url("../images/dfw-new-logo-seal.png") center / contain no-repeat; opacity: .08; transform: translate(-50%, -50%); pointer-events: none; user-select: none; }
    .statement-ornament { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 14px; margin: 0 auto 40px; color: var(--color-gold); }
    .statement-ornament::before { content: ""; position: absolute; width: 64px; height: 1px; background: var(--color-gold); }
    .statement-ornament span { position: relative; padding-inline: 6px; background: var(--color-navy-2); font-size: 14px; line-height: 1; }
    .statement-quote { max-width: 20em; margin: 0 auto; font-family: var(--font-display); font-size: clamp(1.875rem, 4vw, 3.375rem); font-weight: 400; line-height: 1.2; color: var(--color-text-light); text-wrap: balance; }
    .statement-quote em { color: var(--color-gold-light); }
    .statement-link { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 44px; margin-top: 3rem; color: var(--color-gold); font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-underline-offset: 6px; }
    .statement-link span { transition: transform .2s ease; }
    .statement-link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 6px; }
    @media (hover: hover) and (pointer: fine) {
      .statement-link:hover { color: var(--color-gold-light); text-decoration: underline; }
      .statement-link:hover span { transform: translateX(4px); }
    }
    .statement-exit { position: absolute; inset: auto 0 0; height: var(--statement-drop); background: var(--color-bg); clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; }
    .statement-exit::before { content: ""; position: absolute; inset: 0; background: var(--color-gold); clip-path: polygon(0 calc(100% - 1px), 100% 0, 100% 1px, 0 100%); }
    .chamber-statement.is-pending .statement-ornament, .chamber-statement.is-pending .statement-quote, .chamber-statement.is-pending .statement-link { opacity: 0; transform: translateY(12px); }
    .statement-ornament, .statement-quote, .statement-link { transition: opacity .65s ease, transform .65s ease; }
    .statement-quote { transition-delay: .12s; }
    .statement-link { transition-delay: .24s; }
    @media (max-width: 767px) { #about { padding-block: 5.625rem; --statement-drop: 24px; } }
    @media (prefers-reduced-motion: reduce) {
      .chamber-statement.is-pending .statement-ornament, .chamber-statement.is-pending .statement-quote, .chamber-statement.is-pending .statement-link { opacity: 1; transform: none; }
      .statement-ornament, .statement-quote, .statement-link, .statement-link span { transition: none; }
    }

    /* Corporate sponsor inventory. Warm ground keeps full-color logos legible.
       Order: header row → featured plaque → real silver/bronze tiles (only when
       they exist; never placeholders) → the navy placement band that sells the
       homepage inventory. */
    #sponsors { padding-block: 7.5rem; }
    .sponsors-header { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }
    .sponsors-header > div { min-width: 0; }
    .sponsors-label { margin: 0 0 1.25rem; color: var(--color-gold-ink); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
    .sponsors-header h2 { max-width: 14em; margin: 0; color: var(--color-navy); font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 400; line-height: 1.05; text-wrap: balance; }
    .sponsors-header h2 em { color: var(--color-gold-ink); }
    .sponsors-header-link, .sponsor-visit { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--color-navy); font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-underline-offset: 6px; }
    .sponsors-header-link span, .sponsor-visit span { transition: transform .2s ease; }
    .sponsors-header-link:focus-visible, .sponsor-visit:focus-visible, .sponsor-feature__logo:focus-visible, .sponsor-tile:focus-visible { outline: 2px solid var(--color-gold-ink); outline-offset: 5px; }
    @media (hover: hover) and (pointer: fine) {
      .sponsors-header-link:hover, .sponsor-visit:hover { text-decoration: underline; text-decoration-color: var(--color-gold-ink); }
      .sponsors-header-link:hover span, .sponsor-visit:hover span { transform: translateX(4px); }
    }
    .sponsor-feature, .sponsor-tile { position: relative; background: var(--color-bg); border: 1px solid var(--color-rule); box-shadow: 0 20px 50px rgba(12,27,46,.08); transition: border-color .25s ease, box-shadow .25s ease, opacity .6s ease, transform .6s ease; }
    .sponsor-feature::before, .sponsor-tile::before { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--color-gold-ink) 40%, transparent); pointer-events: none; }
    .sponsor-feature { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); margin-top: 3.5rem; padding: 4rem; align-items: center; }
    .sponsor-feature__logo { grid-column: 1 / 8; display: grid; place-items: center; min-width: 0; min-height: 10rem; }
    /* Capped so the mark reads as a plaque, not a billboard: 96px tall at most,
       60% of its field. The wide crop keeps its 5.5:1 ratio inside that cap. */
    .sponsor-feature__logo img { display: block; max-width: 60%; max-height: 96px; height: auto; object-fit: contain; }
    .sponsor-feature__logo .sponsor-logo--wide { width: min(60%, 528px); max-height: 96px; }
    .sponsor-logo--wide { width: min(80%, 660px); aspect-ratio: 5.5 / 1; object-fit: cover !important; object-position: center; }
    .sponsor-feature__copy { grid-column: 9 / 13; min-width: 0; border-left: 1px solid var(--color-rule); padding-left: 2rem; }
    .sponsor-tier { display: block; margin: 0; color: var(--color-gold-ink); font-size: .6875rem; font-weight: 500; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; }
    .sponsor-blurb { margin: 1rem 0 1.25rem; color: color-mix(in srgb, var(--color-navy) 80%, transparent); font-size: 1.0625rem; font-weight: 300; line-height: 1.6; }
    .sponsor-feature + .sponsor-feature { margin-top: 1.5rem; }
    /* Flex, not a 3-col grid: one or two real tiles centre instead of leaving
       an empty two-thirds row. */
    .sponsor-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
    .sponsor-tile { flex: 0 1 calc((100% - 3rem) / 3); min-width: 0; min-height: 14rem; padding: 2.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-navy); text-align: center; text-decoration: none; }
    .sponsor-tile img { display: block; max-width: 80%; max-height: 64px; height: auto; margin-bottom: 1.25rem; object-fit: contain; }
    .sponsor-tile .sponsor-logo--wide { width: min(80%, 352px); aspect-ratio: 5.5 / 1; object-fit: cover; }
    .sponsor-tile--bronze img { max-width: 65%; max-height: 48px; }
    .sponsor-tile__name { display: block; margin-bottom: .4rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
    @media (hover: hover) and (pointer: fine) {
      .sponsor-feature:hover, .sponsor-tile:hover { border-color: color-mix(in srgb, var(--color-gold-ink) 40%, transparent); box-shadow: 0 26px 56px rgba(12,27,46,.12); }
    }

    /* Placement band. A navy plate the same width as the plaque, framed by the
       plaque's own 10px inset hairline (in brass, since it is dark). Brass is
       re-lit for it in site.css's dark-card list. */
    .sponsor-band {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(max-content, 2fr);
      align-items: center;
      column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
      margin-top: 2rem;
      padding: 3.5rem 4rem;
      border-radius: 0;
      background: var(--color-navy);
      color: var(--color-text-light);
      transition: opacity .6s ease, transform .6s ease;
    }
    .sponsor-band::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(212,175,55,.3); pointer-events: none; }
    .sponsor-band__label { margin: 0 0 .9rem; color: var(--color-gold); font-size: .6875rem; font-weight: 500; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
    .sponsor-band__title { margin: 0; color: var(--color-text-light); font-family: var(--font-display); font-size: 2rem; font-weight: 400; line-height: 1.1; text-wrap: balance; }
    .sponsor-band__title em { color: var(--color-gold-light); font-style: italic; }
    .sponsor-band__tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
    .sponsor-band__tier { min-width: 0; padding: .25rem clamp(1rem, 1.6vw, 1.5rem); }
    .sponsor-band__tier + .sponsor-band__tier { border-left: 1px solid rgba(212,175,55,.2); }
    .sponsor-band__tier-copy { margin-top: 1rem; }
    .sponsor-band__tier-name { margin: 0; color: var(--color-gold); font-size: .75rem; font-weight: 500; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; }
    .sponsor-band__tier-line { margin: .4rem 0 0; color: rgba(237,232,224,.75); font-size: .875rem; font-weight: 300; line-height: 1.5; }
    .sponsor-band__cta { justify-self: end; }
    .sponsor-band__cta .btn-gold { white-space: nowrap; }
    .sponsor-band .btn-gold:focus-visible { outline: 3px solid var(--color-gold-light); outline-offset: 4px; }

    .sponsor-glyph { display: block; width: 40px; height: 52px; overflow: visible; }
    .sponsor-glyph__page { fill: none; stroke: rgba(237,232,224,.4); stroke-width: 1; }
    .sponsor-glyph__fill { fill: var(--color-gold); transform-box: fill-box; transform-origin: 0 0; transition: fill .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
    @media (hover: hover) and (pointer: fine) {
      .sponsor-band__tier:hover .sponsor-glyph__fill { fill: var(--color-gold-light); }
    }

    /* Reveal: the section's existing stagger, then the glyph fills draw in —
       Gold grows in height (the top half of the page), Silver and Bronze grow
       from their top-left corner. */
    #sponsors.is-pending .sponsor-reveal { opacity: 0; transform: translateY(12px); }
    #sponsors.is-pending .sponsor-band__tier--gold .sponsor-glyph__fill { transform: scaleY(0); }
    #sponsors.is-pending .sponsor-band__tier--silver .sponsor-glyph__fill,
    #sponsors.is-pending .sponsor-band__tier--bronze .sponsor-glyph__fill { transform: scale(0); }
    .sponsors-header { transition: opacity .6s ease, transform .6s ease; }
    .sponsor-feature { transition-delay: .1s; }
    .sponsor-tile:nth-child(1) { transition-delay: .2s; }
    .sponsor-tile:nth-child(2) { transition-delay: .3s; }
    .sponsor-tile:nth-child(3) { transition-delay: .4s; }
    .sponsor-band { transition-delay: .25s; }
    .sponsor-band__tier--gold .sponsor-glyph__fill { transition-delay: 0s, .75s; }
    .sponsor-band__tier--silver .sponsor-glyph__fill { transition-delay: 0s, .85s; }
    .sponsor-band__tier--bronze .sponsor-glyph__fill { transition-delay: 0s, .95s; }

    @media (max-width: 1023px) {
      .sponsors-header { display: block; }
      .sponsors-header-link { margin-top: 1.5rem; }
      .sponsor-feature { grid-template-columns: minmax(0,1fr); gap: 1.5rem; padding: 3rem; }
      .sponsor-feature__logo, .sponsor-feature__copy { grid-column: 1; }
      .sponsor-feature__copy { border-left: 0; border-top: 1px solid var(--color-rule); padding: 1.5rem 0 0; }
      .sponsor-band { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; padding: 3rem; }
      .sponsor-band__tier:first-child { padding-left: 0; }
      .sponsor-band__tier:last-child { padding-right: 0; }
      .sponsor-band__cta { justify-self: stretch; }
      .sponsor-band__cta .btn-gold { width: 100%; }
    }
    @media (max-width: 767px) {
      #sponsors { padding-block: 5rem; }
      .sponsor-feature { padding: 2rem; }
      .sponsor-feature__logo { min-height: 6rem; }
      .sponsor-feature__logo img { max-height: 80px; }
      .sponsor-feature__logo .sponsor-logo--wide { width: min(80%, 440px); max-height: 80px; }
      .sponsor-tile { flex-basis: 100%; }
      .sponsor-band { row-gap: 2rem; padding: 2.5rem 2rem; }
      .sponsor-band__tiers { grid-template-columns: minmax(0, 1fr); }
      .sponsor-band__tier { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 1.25rem; align-items: center; padding: 1.25rem 0; }
      .sponsor-band__tier:first-child { padding-top: 0; }
      .sponsor-band__tier:last-child { padding-bottom: 0; }
      .sponsor-band__tier + .sponsor-band__tier { border-left: 0; border-top: 1px solid rgba(212,175,55,.2); }
      .sponsor-band__tier-copy { margin-top: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      #sponsors.is-pending .sponsor-reveal { opacity: 1; transform: none; }
      #sponsors.is-pending .sponsor-glyph__fill { transform: none; }
      .sponsors-header, .sponsor-feature, .sponsor-tile, .sponsor-band, .sponsor-glyph__fill, .sponsors-header-link span, .sponsor-visit span { transition: none; }
    }

    /* ── Event cards — stable editorial grid in normal document flow ── */
    #events-pin { position:relative; }
    .events-viewport { overflow:visible; }
    .events-track {
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch;
      gap:clamp(1rem,2vw,2rem); width:min(88rem,100%); margin-inline:auto;
      padding-inline:clamp(1.5rem,4vw,2.5rem);
      transform:none !important;
    }
    .event-card { min-width:0; width:auto; }
    .event-inner {
      display:flex; flex-direction:column;
      min-height:clamp(34rem,48vw,41rem);
      transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
      box-shadow:0 24px 48px -34px rgba(12,27,46,0.4);
    }
    .event-visual {
      min-height:clamp(17rem,22vw,21rem); isolation:isolate; overflow:hidden;
      background-position:center; background-size:cover;
    }
    .event-visual::before {
      content:""; position:absolute; inset:0; z-index:-1;
      background:linear-gradient(180deg,rgba(8,20,33,0.18),rgba(8,20,33,0.88));
    }
    /* The chamber meeting is in person now, so the old remote-call frame
       no longer describes it. */
    /* C13 — the supplied venue photograph. The card previously showed a
       generic boardroom stand-in, itself a replacement for the laptop-on-a-
       video-call image that contradicted the copy once the meeting moved
       in person. This is the actual Original Pancake House on Belt Line Rd.
       The file is named .png but is really a WebP; browsers sniff image
       content, and for a CSS background the extension is not consulted at
       all, so it is referenced as supplied and left for Cristie to confirm
       before any rename. */
    .event-visual-meeting { background-image:url('../images/the-original-pancake-house.png'),linear-gradient(145deg,var(--color-navy),var(--color-navy-2)); }
    .event-visual-carrollton { background-image:url('../images/event-carrollton.jpg'),linear-gradient(145deg,var(--color-navy-2),var(--color-navy-3)); }
    .event-visual-mckinney { background-image:url('../images/event-mckinney.jpg'),linear-gradient(145deg,var(--color-navy),var(--color-navy-2)); }
    .event-visual > .font-display { font-size:clamp(2.75rem,3.5vw,4.25rem); text-shadow:0 3px 28px rgba(4,10,18,0.72); }
    .event-content { display:flex; flex:1; flex-direction:column; justify-content:flex-start; padding:clamp(1.75rem,2.5vw,2.5rem); }
    .event-content h3 { font-size:clamp(2rem,2.7vw,3rem); line-height:1; }
    .event-content p { max-width:38rem; font-size:clamp(0.95rem,1.1vw,1.08rem); }
    @media (pointer:fine) {
      .event-card:hover .event-inner { transform:translateY(-6px); box-shadow:0 42px 80px -38px rgba(12,27,46,0.46); border-color:var(--color-rule-gold); }
    }
    @media (max-width:1099px) {
      .events-track {
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .event-card:last-child { grid-column:1 / -1; }
      .event-card:last-child .event-inner {
        display:grid; grid-template-columns:minmax(18rem,0.9fr) minmax(0,1.1fr);
        min-height:24rem;
      }
      .event-card:last-child .event-visual { min-height:100%; }
      .event-inner { min-height:34rem; }
      .event-visual > .font-display { font-size:clamp(3rem,6vw,4.5rem); }
    }
    @media (max-width:699px) {
      .events-track { grid-template-columns:minmax(0,1fr); padding-inline:1.25rem; gap:1.25rem; }
      .event-card:last-child { grid-column:auto; }
      .event-card:last-child .event-inner { display:flex; min-height:0; }
      .event-card:last-child .event-visual { min-height:16rem; }
      .event-inner { min-height:0; }
      .event-visual { min-height:16rem; }
      .event-content { min-height:17rem; padding:1.75rem 1.5rem 2rem; }
      .event-content h3 { font-size:clamp(2rem,10vw,3rem); }
    }

    /* Newsroom card rules moved to site.css (R4, 2026-10-01): the posts
       archive renders the same card through template-parts/news-card.php. */

    /* ── Newsletter input ── */
    .nl-input {
      background:var(--color-navy-2); border:1px solid var(--color-rule-gold); color:var(--color-text-light);
      transition:border-color .3s ease, box-shadow .3s ease;
    }
    .nl-input::placeholder { color:rgba(237,232,224,0.4); }
    .nl-input:focus { outline:none; border-color:var(--color-gold); box-shadow:0 0 0 3px rgba(212,175,55,0.18); }

    /* ── Nav (section-aware theme) ── */
    #site-header { transition: background .45s ease, backdrop-filter .45s ease, box-shadow .45s ease, border-color .45s ease; }
    #site-header .logo-text, #site-header .nav-link { transition: color .45s ease; }
    #site-header .logo-accent { color: var(--color-gold); font-style: italic; }

    /* dark mode — over navy sections */
    #site-header.nav-dark { background: transparent; box-shadow: none; }
    #site-header.nav-dark .logo-text { color: #ffffff; }
    #site-header.nav-dark .nav-link { color: rgba(237,232,224,0.85); }

    /* dark mode, scrolled — fixes Cristie's flagged bug where page content
       (BW section CTAs) collided with nav links through the transparent header */
    #site-header.nav-dark.nav-scrolled {
      background: rgba(12,27,46,0.90);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(212,175,55,0.14), 0 8px 24px rgba(8,20,33,0.35);
    }

    /* light mode — over cream/warm sections */
    #site-header.nav-light { background: rgba(250,250,248,0.96); backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(12,27,46,0.08), 0 4px 20px rgba(12,27,46,0.06); }
    #site-header.nav-light .logo-text { color: #0c1b2e; }
    #site-header.nav-light .nav-link { color: rgba(12,27,46,0.75); }

    .nav-link { position:relative; }
    .nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--color-gold); transition:width .35s ease; }
    .nav-link:hover::after { width:100%; }
    #site-header .nav-link:hover { color: var(--color-gold); }

    /* Hero line clearance — prevents descender/ascender clipping in the mask reveal */
    #hero .line-mask, .hero-line-wrap { padding-top: 0.08em; padding-bottom: 0.18em; }
    /* …and collapse the clearance between stacked lines so the centered H1 reads as one block */
    #hero .hero-line-wrap + .hero-line-wrap { margin-top: -0.22em; }

    /* ══ EDITORIAL SECTION BRIDGES (2026-08-21) ═══════════════════════════
       The mission now sits directly beside the hero as a compact editorial
       plate: verified copy occupies the reading column, Dallas fills a clipped
       image wedge, and reference-inspired rules/stars replace unused space. */
    #mission {
      isolation:isolate;
      min-height:clamp(39rem,61vw,49rem);
      --color-gold:var(--color-gold-ink);
      background:
        radial-gradient(circle at 18% 38%,rgba(255,255,255,0.72),transparent 34%),
        linear-gradient(105deg,#faf8f3 0%,#f7f3ec 60%,#efe8de 100%);
    }
    #mission::before {
      content:"";
      position:absolute; z-index:6;
      top:-1px; left:0; right:0;
      height:clamp(5rem,9vw,8.5rem);
      background:linear-gradient(180deg,
        rgba(5,13,22,0.90) 0%,
        rgba(8,20,33,0.54) 24%,
        rgba(12,27,46,0.18) 58%,
        transparent 100%);
      pointer-events:none;
    }
    #mission.section-flow::after {
      inset:0; z-index:0; height:auto;
      background:
        repeating-radial-gradient(ellipse at 76% 28%,transparent 0 1.35rem,rgba(127,105,33,0.055) 1.42rem 1.47rem),
        linear-gradient(180deg,rgba(12,27,46,0.14),transparent 2.5rem);
      box-shadow:inset 0 -1px 0 rgba(127,105,33,0.28);
      opacity:0.9;
    }
    .mission-layout {
      position:relative; z-index:1;
      min-height:inherit;
      width:min(100%,112rem);
      margin-inline:auto;
    }
    .mission-copy {
      position:relative; z-index:4;
      width:min(62vw,62rem);
      padding:clamp(4.25rem,7vw,6.75rem) 2rem clamp(3.75rem,6vw,5.5rem) clamp(3rem,3vw,4rem);
    }
    .mission-stars {
      width:max-content;
      margin-bottom:clamp(1.4rem,2.3vw,2.25rem);
      padding-bottom:0.75rem;
      border-bottom:1px solid rgba(127,105,33,0.62);
      color:var(--color-gold-ink);
      font-size:0.82rem;
      letter-spacing:0.06em;
    }
    .mission-statement {
      max-width:16ch;
      font-size:clamp(3.25rem,6.4vw,5.65rem);
      line-height:1.01;
      text-wrap:balance;
    }
    .mission-word { opacity:0.15; display:inline; }
    .mission-word.key-word { color:var(--color-gold-ink-lg); font-style:italic; }
    .mission-outro {
      max-width:36rem;
      margin-top:clamp(1.5rem,2.5vw,2.25rem);
      padding-top:1.2rem;
      border-top:1px solid rgba(127,105,33,0.56);
      color:var(--color-text);
      font-size:clamp(1rem,1.3vw,1.2rem);
      line-height:1.55;
    }
    .mission-photo {
      --mission-edge-bleed:max(0px,calc((100vw - 112rem) / 2));
      position:absolute; z-index:3;
      inset:0 calc(0px - var(--mission-edge-bleed)) 0 auto;
      width:calc(43% + var(--mission-edge-bleed)); margin:0;
      overflow:hidden;
      clip-path:polygon(29% 0,100% 0,100% 100%,0 100%);
      background:var(--color-navy);
      will-change:clip-path;
    }
    .mission-photo picture,
    .mission-photo img { display:block; width:100%; height:100%; }
    .mission-photo img {
      object-fit:cover; object-position:54% center;
      filter:saturate(0.68) contrast(1.08) brightness(0.66);
      transform:scale(1.02);
    }
    .mission-photo::after {
      content:""; position:absolute; inset:0;
      background:
        linear-gradient(90deg,rgba(12,27,46,0.55),rgba(12,27,46,0.04) 48%),
        linear-gradient(180deg,rgba(12,27,46,0.12),rgba(5,13,22,0.38));
      pointer-events:none;
    }
    .mission-art { position:absolute; inset:0; z-index:2; pointer-events:none; }
    .mission-star-shape {
      position:absolute; width:clamp(21rem,35vw,42rem); aspect-ratio:1;
      right:26%; top:12%;
      background:rgba(255,255,255,0.46);
      clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 94%,50% 71%,21% 94%,32% 56%,2% 35%,39% 35%);
      filter:drop-shadow(0 0 1px rgba(127,105,33,0.52));
    }
    .mission-dot-field {
      position:absolute; left:45%; bottom:11%; width:10rem; height:5.5rem;
      background:radial-gradient(circle,var(--color-gold-ink) 0 1.5px,transparent 1.8px) 0 0 / 1.25rem 1.25rem;
      opacity:0.72;
    }
    .mission-line { position:absolute; height:1px; background:rgba(127,105,33,0.58); transform-origin:left center; will-change:transform; }
    .mission-line-a { left:50%; top:27%; width:25%; transform:rotate(-67deg); }
    .mission-line-b { left:52%; bottom:18%; width:19%; transform:rotate(-67deg); }

    #benefits {
      isolation:isolate;
      z-index:2;
      overflow:visible;
      /* C7 — the top pad ran to 128px of empty cream between the gold band
         and the heading, on top of the intro's own margin. Cristie: "you
         should never leave this much space because people loose interest." */
      padding-block:clamp(3.25rem,5vw,5.5rem) clamp(3.5rem,4vw,5rem);
      background:
        radial-gradient(circle at 82% 14%,rgba(255,255,255,0.62),transparent 30%),
        linear-gradient(110deg,#f3eee7 0%,#f7f3ed 52%,#efe8de 100%);
    }
    #benefits::before {
      content:"";
      position:absolute; inset:0; z-index:0;
      background:url('../images/dfw-skyline-line.svg') right -5rem top 1.5rem / min(54rem,56vw) auto no-repeat;
      opacity:0.18;
      pointer-events:none;
    }
    #benefits::after {
      content:""; top:auto; bottom:0; z-index:0;
      height:clamp(14rem,22vw,20rem);
      background:
        radial-gradient(circle,rgba(212,175,55,0.28) 0 1.35px,transparent 1.9px) center 57% / clamp(5rem,9vw,9rem) 1rem repeat-x,
        linear-gradient(180deg,
          transparent 0%,
          rgba(12,27,46,0.08) 18%,
          rgba(12,27,46,0.34) 44%,
          rgba(12,27,46,0.78) 72%,
          var(--color-navy) 100%);
      box-shadow:none;
    }
    .benefits-inner { position:relative; z-index:2; }
    /* C7 — two voids flanked the heading at desktop: an 8rem left inset
       plus an 8rem column gap, against a 13ch headline and a 34rem
       paragraph that could not reach across either. Inset and gap both come
       down and the headline gets two more characters to fill its column, so
       the pair reads as one line of thought instead of two islands. */
    .benefits-intro {
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(21rem,0.95fr);
      align-items:end;
      gap:clamp(2rem,3.5vw,4rem);
      margin-bottom:clamp(2rem,3vw,3.25rem);
      padding-inline:clamp(0rem,1.5vw,2.5rem) clamp(0rem,1vw,1.5rem);
    }
    #benefits .wj-title {
      max-width:15ch;
      font-size:clamp(3.25rem,5.25vw,5.25rem);
      line-height:0.99;
      letter-spacing:-0.018em;
      text-wrap:balance;
    }
    /* C8 — Cristie flagged this paragraph as too small and too light for an
       older readership, and she is right on both counts: it sat at 16px
       against a 52-84px headline, and --color-muted measured 4.36:1 on the
       darkest stop of this section's own gradient, under the 4.5 AA bar.
       The token is darker site-wide now; this steps the size up too. */
    #benefits .wj-sub {
      max-width:34rem;
      margin:0 0 0.5rem;
      padding:0.35rem 0 0.35rem clamp(1.25rem,2vw,1.85rem);
      border-left:1px solid rgba(127,105,33,0.72);
      font-size:clamp(1.0625rem,1.35vw,1.3rem);
      line-height:1.7;
    }
    /* C6 — the star used to start 5rem ABOVE this section, so its top arm
       ran under the gold values band and stopped dead on the band's bottom
       edge: a tangent. Cristie: "it is disturbing and people won't like it
       -even if they don't notice it. give it some space." Dropping it below
       the section's own top edge puts clear cream between the two. */
    .benefits-ghost-star {
      position:absolute; z-index:1; left:-7rem; top:3rem;
      width:clamp(19rem,31vw,36rem); aspect-ratio:1;
      background:rgba(255,255,255,0.33);
      clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 94%,50% 71%,21% 94%,32% 56%,2% 35%,39% 35%);
      filter:drop-shadow(0 0 1px rgba(127,105,33,0.34));
      pointer-events:none;
    }
    .values-marquee-band { position:relative; z-index:3; }
    .benefits-bw-seam {
      position:absolute; z-index:3; right:0; bottom:-1.25rem; left:0;
      display:flex; align-items:center; gap:1.25rem;
      padding-inline:clamp(1.5rem,4vw,4rem);
      pointer-events:none;
    }
    .benefits-bw-rule {
      height:1px; flex:1;
      background:linear-gradient(90deg,transparent,rgba(212,175,55,0.74));
    }
    .benefits-bw-rule:last-child { background:linear-gradient(90deg,rgba(212,175,55,0.74),transparent); }
    .benefits-bw-star {
      color:var(--color-gold); font-family:"Cormorant Garamond",Georgia,serif;
      font-size:1.5rem; line-height:1; text-shadow:0 0 18px rgba(212,175,55,0.25);
    }

    /* Membership and the publication share one continuous gradient field.
       The light section lands on this exact navy; the publication begins with
       the same colour and puts its artwork directly against the boundary. */
    #business-week {
      isolation:isolate;
      z-index:1;
      margin-top:-1px;
      /* D4 — the handoff into the founder quote was the worst transition on
         the page: 126px of bottom pad here, then 108px of top pad there, then
         the seam, for 285px of empty navy between the last button and the
         first word of the quote. Both sections are navy, so no colour change
         was doing any work and the page simply read as having stalled.

         The bottom pad comes down to roughly match the top one. It stays a
         little longer than the top because the cover is the tallest object on
         the page and needs room to land, but it is no longer answering a
         chasm. The seam star keeps its job — it now separates two things that
         are actually near each other. */
      padding-block:clamp(6rem,11vh,9rem) clamp(3.5rem,7vh,5.5rem);
      background:
        radial-gradient(circle at 72% 44%,rgba(212,175,55,0.08),transparent 30%),
        linear-gradient(180deg,var(--color-navy) 0%,var(--color-navy-2) 48%,var(--color-navy-3) 100%);
    }
    /* C9 — column widths follow the source-order flip: copy takes the wide
       first column, the cover the narrow second one. The .mag depth stack is
       deliberately NOT mirrored. It is built spine-forward on the left, and
       with the cover now on the right that spine faces the copy, which is the
       way round a magazine standing next to a column of text should turn. */
    .bw-layout {
      display:grid; grid-template-columns:minmax(28rem,1.14fr) minmax(20rem,0.86fr);
      align-items:center; gap:clamp(4rem,8vw,8.5rem);
    }
    .bw-art { position:relative; padding-right:clamp(0rem,3vw,3.5rem); }
    .bw-copy { position:relative; padding-block:clamp(0.5rem,2.5vw,2.5rem); }
    /* Flagship headline sits one step above the shared .t-display step so the
       publication reads as the section's lead voice next to the cover art. */
    .bw-copy .reveal-head { font-size:clamp(3.1rem,6.4vw,5.5rem); line-height:1.02; }
    /* Mirrored with the layout (C9): the skyline is ground texture for the
       copy, so it follows the copy to the left rather than sitting behind the
       cover art, where it only competed with it. */
    .bw-skyline {
      position:absolute; z-index:0; left:-4rem; bottom:-2rem;
      width:min(62rem,70vw); height:min(34rem,58vw);
      background:url('../images/dfw-skyline-line.svg') left bottom / contain no-repeat;
      filter:sepia(1) saturate(0.65); opacity:0.12;
      pointer-events:none;
      -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 28%,#000 100%);
      mask-image:linear-gradient(270deg,transparent 0%,#000 28%,#000 100%);
    }
    #bw-ghost {
      left:47%; top:50%; transform:translate(-50%,-50%);
      font-size:clamp(20rem,42vw,52rem);
    }
    #business-week.section-flow::after {
      content:"DFW";
      top:clamp(0.75rem,2vh,1.5rem); right:clamp(1.5rem,5vw,6rem); left:auto; z-index:1;
      width:auto; height:auto;
      color:transparent;
      background:none;
      box-shadow:none;
      font-family:"Cormorant Garamond",Georgia,serif;
      font-size:clamp(8rem,18vw,18rem);
      font-weight:300;
      line-height:0.78;
      letter-spacing:0.045em;
      -webkit-text-stroke:1px rgba(212,175,55,0.17);
      opacity:1;
    }

    @media (max-width: 1100px) {
      #mission { min-height:42rem; }
      .mission-copy { width:66%; padding-left:clamp(2rem,4vw,3rem); }
      .mission-statement { font-size:clamp(2.8rem,5.7vw,4.4rem); max-width:14ch; }
      .mission-photo { width:39%; }
      .mission-star-shape { right:22%; }
    }

    @media (max-width: 900px) {
      #benefits { padding-block:4.75rem 8rem; }
      #benefits::before {
        background-position:right -17rem top 1rem;
        background-size:44rem auto;
        opacity:0.13;
      }
      .benefits-intro {
        grid-template-columns:minmax(0,1fr);
        align-items:start;
        gap:1.75rem;
        padding-inline:0;
      }
      #benefits .wj-title { max-width:13ch; }
      #benefits .wj-sub { max-width:36rem; margin:0; }
      .benefits-ghost-star { left:-10rem; top:2.5rem; opacity:0.7; }
      #business-week { padding-top:clamp(4.5rem,9vw,6.5rem); }
      /* Already copy-first when stacked, so the <=900px order is unchanged by
         C9 — only the desktop inset needs resetting. */
      .bw-layout { grid-template-columns:minmax(0,1fr); gap:4rem; }
      .bw-copy { grid-row:1; }
      .bw-art { grid-row:2; justify-content:center; padding-right:0; }
      .mag-stage { width:min(30rem,76vw); }
    }

    @media (max-width: 760px) {
      #mission { min-height:0; }
      .mission-layout { display:flex; flex-direction:column; }
      .mission-copy { width:100%; padding:4rem 1.5rem 3.25rem; }
      .mission-statement { max-width:13ch; font-size:clamp(2.7rem,12vw,4rem); line-height:1.02; text-wrap:wrap; }
      .mission-outro { max-width:29rem; font-size:1rem; }
      .mission-photo {
        position:relative; inset:auto; width:100%; height:18rem;
        clip-path:polygon(0 16%,100% 0,100% 100%,0 100%);
      }
      .mission-photo img { object-position:54% 58%; }
      .mission-art { inset:auto 0 15rem 0; height:18rem; }
      .mission-star-shape { width:18rem; right:-4rem; top:-5rem; opacity:0.55; }
      .mission-dot-field { left:auto; right:1rem; bottom:0; }
      .mission-line { display:none; }
    }

    @media (max-width: 640px) {
      #benefits { padding-block:4rem 7rem; }
      .benefits-intro { margin-bottom:2.5rem; }
      #benefits .wj-title { font-size:clamp(2.8rem,13vw,3.75rem); }
      #benefits .wj-sub { padding-left:1.15rem; font-size:1rem; }
      .benefits-bw-seam { gap:0.75rem; padding-inline:1rem; }
      #business-week { padding-block:4.5rem 6.5rem; }
      .bw-layout { gap:3.25rem; }
      .bw-copy { padding-block:0; }
      .bw-copy .reveal-head { font-size:clamp(2.7rem,11vw,3.6rem); }
      .bw-actions { align-items:stretch; }
      .bw-actions a { width:100%; text-align:center; }
      #business-week.section-flow::after { right:0.75rem; font-size:clamp(7rem,38vw,10rem); }
    }

    /* reveal init */
    .reveal, .reveal-stagger > * { will-change:transform, opacity; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * { animation:none !important; scroll-behavior:auto !important; transition:none !important; }
      .line-mask > * { transform:none !important; }
      .mission-word { opacity: 1 !important; }
    }
  /* ══ WCAG AA contrast guard (Phase 3.6) ══════════════════════════════
       Gold is a DARK-background colour: 8.24:1 on navy, but only 2.01:1 on
       --color-bg and 1.81:1 on --color-bg-warm. Any gold TEXT sitting on a
       light section therefore fails AA. These rules swap it for the ink
       golds inside light sections only; gold on navy is untouched.
       Attribute selector catches opacity variants (text-gold/70 etc).      */
    .bg-bg      [class*="text-gold"],
    .bg-bg-warm [class*="text-gold"],
    .bg-white   [class*="text-gold"] { color: var(--color-gold-ink); }

    /* Large display accents clear AA at 3:1, so they keep more chroma. */
    .bg-bg      .t-hero [class*="text-gold"], .bg-bg-warm .t-hero [class*="text-gold"],
    .bg-bg   .t-mission [class*="text-gold"], .bg-bg-warm .t-mission [class*="text-gold"],
    .bg-bg   .t-display [class*="text-gold"], .bg-bg-warm .t-display [class*="text-gold"],
    .bg-bg .t-display-sm [class*="text-gold"], .bg-bg-warm .t-display-sm [class*="text-gold"],
    .bg-bg       .t-cta [class*="text-gold"], .bg-bg-warm .t-cta [class*="text-gold"] { color: var(--color-gold-ink-lg); }

    /* ══ WCAG AA contrast guard (Phase 3.6) ══════════════════════════════
       Gold is a DARK-background colour: 8.24:1 on navy, but only 2.01:1 on
       --color-bg and 1.81:1 on --color-bg-warm, so gold TEXT on any light
       section fails AA. Rather than chase every call site, we redefine the
       gold custom properties *inside* light sections — every var(--color-gold)
       consumer below them inherits the AA-safe tone automatically.
       #a1852a = 3.05:1 on warm (clears the 3:1 bar for large text + UI).     */
    .bg-bg, .bg-bg-warm, .bg-white {
      --color-gold: #7f6921;
      --color-gold-light: #6d5a1c;
    }

    /* Dark cards nested inside a light section keep the real gold. */
    .bg-navy, .bg-navy-2, .bg-navy-3, .rcard.is-dark, [data-theme="dark"] {
      --color-gold: #d4af37;
      --color-gold-light: #e8c84a;
    }

    /* Small gold text on light needs the full 4.5:1, not just 3:1. */
    .bg-bg      [class*="text-gold"],
    .bg-bg-warm [class*="text-gold"],
    .bg-white   [class*="text-gold"],
    .bg-bg .eyebrow, .bg-bg-warm .eyebrow { color: var(--color-gold-ink); }

    /* …but large display accents keep the richer tone. */
    .bg-bg .t-hero [class*="text-gold"], .bg-bg-warm .t-hero [class*="text-gold"],
    .bg-bg .t-mission [class*="text-gold"], .bg-bg-warm .t-mission [class*="text-gold"],
    .bg-bg .t-display [class*="text-gold"], .bg-bg-warm .t-display [class*="text-gold"],
    .bg-bg .t-display-sm [class*="text-gold"], .bg-bg-warm .t-display-sm [class*="text-gold"],
    .bg-bg .t-cta [class*="text-gold"], .bg-bg-warm .t-cta [class*="text-gold"] { color: var(--color-gold-ink-lg); }
/* Large custom-class accents (all >=2.6rem) clear 3:1 with the richer tone. */
    .bg-bg .mission-word.key-word, .bg-bg-warm .mission-word.key-word,
    .bg-bg .tm-quote,   .bg-bg-warm .tm-quote { color: var(--color-gold-ink-lg); }
/* ══ Keyboard accessibility (Phase 3.6) ══════════════════════════════
       Four of the six page bundles previously defined no focus styles at
       all, so keyboard users had no visible indication of position. The
       ring is gold on dark and ink on light so it stays visible on every
       section background this theme alternates between.                  */
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 3px;
      border-radius: 1px;
    }
    .bg-bg a:focus-visible, .bg-bg-warm a:focus-visible, .bg-white a:focus-visible,
    .bg-bg button:focus-visible, .bg-bg-warm button:focus-visible {
      outline-color: var(--color-text);
    }

    /* Never remove the ring for keyboard users, even if a component resets it. */
    :focus-visible { outline-style: solid; }

    /* Skip link — first tab stop, visually hidden until focused. */
    .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 300;
      background: var(--color-gold); color: var(--color-navy);
      padding: 0.7rem 1.15rem; font-weight: 500; font-size: 0.9rem;
      border-radius: 2px; transition: top .18s ease;
    }
    .skip-link:focus { top: 1rem; }

    /* Touch targets — WCAG 2.5.5. Inline .eyebrow links rendered at 11px
       gave a 14px-tall hit area; pad them to a thumb-friendly 44px without
       changing how they look. */
    a.eyebrow, .eyebrow a {
      display: inline-flex; align-items: center;
      min-height: 44px;
    }
/* Footer + mobile-menu link hit areas (WCAG 2.5.5). These render at
       ~18px tall; padding brings them to 44px without shifting the layout
       they sit in, since they are stacked in flex columns already. */
    footer nav a, footer ul a, #mobile-menu a {
      display: inline-flex; align-items: center; min-height: 44px;
    }

    /* ══ HERO CAPTION TIER (Phase 3.6b) ═════════════════════════════════
       The scroll cue resolves to the single caption step. All-caps needs
       open tracking to stop the capitals colliding. */
    .hero-cue-label {
      font-family: "DM Sans", system-ui, sans-serif;
      font-size: var(--hero-caption);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.24em;
      line-height: 1;
    }
    .hero-cue-label { color: rgba(237, 232, 224, 0.9); font-weight: 400; }

    /* Production homepage hero — full-bleed editorial composition. */
#hero { min-height:42rem; }
#hero-content { z-index:4; }
.hero-col { position:relative; max-width:44rem; }
.hero-foot {
  display: block;
  margin-top: 2.25rem;
  max-width:41rem;
  padding-left:1.4rem;
  border-left:1px solid rgba(212,175,55,0.38);
}
.hero-photo {
  inset:0;
  width:100%;
  height:100%;
  clip-path:none;
  box-shadow:none;
}
.hero-photo-img { object-position:center center; }
.hero-title { padding-top:0; }
.hero-title-lead {
  display: block;
  margin:0 0 0.2em -0.01em;
  color: rgba(237, 232, 224, 0.90);
  font-size:clamp(1.7rem,2.5vw,3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing:0.16em;
  text-transform: uppercase;
}
.hero-title-word {
  display: block;
  margin: 0 0 0 -0.055em;
  font-size:clamp(5.5rem,9.5vw,11rem);
  font-weight: 400;
  line-height:0.84;
  letter-spacing: -0.045em;
  text-shadow:0 0 42px rgba(8,20,33,0.30);
}
.hero-rule {
  width:clamp(3rem,6vw,6rem);
  height: 1px;
  margin:0 0 1.75rem;
  background: var(--color-gold);
  box-shadow:0 0 18px rgba(212,175,55,0.16);
}
.hero-sub {
  max-width:40ch;
  margin: 0;
  font-size:clamp(1.125rem,1.25vw,1.375rem);
  line-height:1.5;
  color:rgba(237,232,224,0.88);
  text-shadow:none;
}
.hero-cta { margin:1.75rem 0 0; gap:0.75rem; }
.hero-cta > a { font-size:clamp(.875rem,.9vw,1rem); }
#hero .btn-gold {
  box-shadow:0 14px 34px -16px rgba(212,175,55,0.70);
}
#hero .btn-outline {
  border-color:rgba(212,175,55,0.64);
  background:rgba(5,13,22,0.46);
}
#hero .btn-outline:hover {
  border-color: var(--color-gold);
  background:rgba(212,175,55,0.10);
}

/* Tablet landscape uses the panorama with a stronger text-side ramp. */
@media (min-width:900px) and (max-width:1279px) {
  .hero-col { max-width:33rem; }
  .hero-photo-img { object-position:54% center; }
  .hero-photo::after {
    background:
      linear-gradient(94deg, rgba(8,20,33,0.84) 0%, rgba(8,20,33,0.74) 34%, rgba(8,20,33,0.56) 52%, rgba(8,20,33,0.12) 72%, rgba(8,20,33,0) 100%),
      linear-gradient(180deg, rgba(8,20,33,0.10) 0%, rgba(8,20,33,0) 34%, rgba(8,20,33,0.08) 62%, rgba(5,13,22,0.44) 100%);
  }
}

/* Portrait art direction keeps the complete flag in the upper-right and the
   skyline low. The stronger lower scrim protects copy and stacked controls. */
@media (orientation:portrait) {
  .hero-photo-img { object-position:right center; }
}

@media (max-width:899px) {
  #hero {
    height:max(100svh,48.75rem);
    min-height:48.75rem;
    justify-content:flex-end;
  }
  .hero-photo {
    inset:0;
    width:100%;
    height:100%;
    clip-path:none;
    box-shadow:none;
  }
  .hero-photo-img { object-position:right center; }
  .hero-photo::after {
    background:
      linear-gradient(90deg, rgba(8,20,33,0.76) 0%, rgba(8,20,33,0.56) 58%, rgba(8,20,33,0.24) 100%),
      linear-gradient(180deg, rgba(8,20,33,0.08) 0%, rgba(8,20,33,0.04) 28%, rgba(8,20,33,0.30) 58%, rgba(5,13,22,0.84) 100%);
  }
  #hero-content { padding-bottom:3.75rem; }
  .hero-col { max-width:38rem; }
  .hero-rule { width:3.25rem; margin-bottom:1.25rem; }
  .hero-title-lead { font-size:clamp(1.35rem,5.2vw,1.75rem); letter-spacing:0.14em; }
  .hero-title-word { font-size:clamp(5rem,23vw,7.25rem); }
  .hero-foot { margin-top:1.5rem; padding-left:1rem; }
  .hero-sub { max-width:34ch; font-size:clamp(1rem,2.8vw,1.1rem); }
  .hero-cta { width:min(100%,21rem); margin-top:1.35rem; flex-direction:column; align-items:stretch; }
  .hero-cta > a { width:100%; min-height:44px; justify-content:space-between; }
  .hero-cue { display:none; }
}

@media (min-width:900px) and (max-height:720px) {
  #hero { min-height:40rem; }
  .hero-foot { margin-top:1.5rem; }
  .hero-title-word { font-size:clamp(5rem,8.6vw,8.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rule { box-shadow: none; }
}

    /* Closing CTA — one navy-2 band above the (darker) footer. Membership is
       the primary ask on the left; the newsletter is a secondary dark plaque on
       the right, framed with the sponsor plaque's 10px inset brass hairline. */
    .closing-cta { padding-block: 7.5rem; background: var(--color-navy-2); color: var(--color-text-light); }
    .closing-cta__grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: 4rem;
      align-items: center;
      width: min(100%, 88rem);
      margin-inline: auto;
      padding-inline: 2.5rem;
    }
    .closing-cta__primary { grid-column: 1 / 8; min-width: 0; }
    .closing-cta__label { margin: 0 0 1.25rem; color: var(--color-gold); font-size: .75rem; font-weight: 500; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
    .closing-cta__title { margin: 0 0 1.5rem; color: var(--color-text-light); font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
    .closing-cta__title em, .closing-cta__plaque-title em { color: var(--color-gold-light); font-style: italic; }
    .closing-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }
    .closing-cta__link { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--color-text-light); font-size: .8125rem; font-weight: 500; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; text-decoration: none; text-underline-offset: 6px; }
    .closing-cta__link span { transition: transform .2s ease; }

    .closing-cta__plaque { position: relative; grid-column: 8 / 13; min-width: 0; padding: 3rem; border: 1px solid rgba(237,232,224,.1); border-radius: 0; background: var(--color-navy); }
    .closing-cta__plaque::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(212,175,55,.3); pointer-events: none; }
    .closing-cta__plaque-title { position: relative; margin: 0 0 2rem; color: var(--color-text-light); font-family: var(--font-display); font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 400; line-height: 1.05; }
    .closing-cta__subscribe {
      position: relative;
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .8rem;
      padding: .85rem 1.25rem;
      border: 1px solid rgba(212,175,55,.6);
      border-radius: 2px;
      background: transparent;
      color: var(--color-text-light);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .11em;
      line-height: 1.1;
      text-transform: uppercase;
      text-decoration: none;
      transition: color .25s ease, background-color .25s ease, border-color .25s ease;
    }
    .closing-cta__btn:focus-visible, .closing-cta__subscribe:focus-visible, .closing-cta__link:focus-visible { outline: 3px solid var(--color-gold-light); outline-offset: 4px; }
    @media (hover: hover) and (pointer: fine) {
      .closing-cta__link:hover { text-decoration: underline; text-decoration-color: var(--color-gold); }
      .closing-cta__link:hover span { transform: translateX(4px); }
      .closing-cta__subscribe:hover { border-color: var(--color-gold); background: var(--color-gold); color: var(--color-navy-3); }
    }

    /* Reveal: fade/rise 12px, primary block then plaque. Visible by default;
       home.js only adds .is-pending when it can also remove it. */
    .closing-reveal { transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
    .closing-cta__plaque.closing-reveal { transition-delay: .12s; }
    .closing-cta.is-pending .closing-reveal { opacity: 0; transform: translateY(12px); }

    .closing-cta__subscribe { white-space: nowrap; }
    /* 1024–1279: the 5-col plaque is ~370px; a 64px gap and 48px pad would wrap
       the Subscribe button, so both relax here. */
    @media (min-width: 1024px) and (max-width: 1279px) {
      .closing-cta__grid { column-gap: 2rem; }
      .closing-cta__plaque { padding: 2.25rem; }
    }
    @media (max-width: 1023px) {
      /* One column: drop the 12-track grid entirely — its 11 gaps alone would
         force a 704px minimum width. */
      .closing-cta__grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
      .closing-cta__primary, .closing-cta__plaque { grid-column: 1; }
      .closing-cta__plaque { margin-top: 3rem; }
    }
    @media (max-width: 767px) {
      .closing-cta { padding-block: 5rem; }
      .closing-cta__grid { padding-inline: 1.5rem; }
      /* Keep membership clearly primary on phones: ~41px vs the plaque's 26px. */
      .closing-cta__title { font-size: clamp(2.25rem, 10.5vw, 3rem); }
      .closing-cta__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
      .closing-cta__btn, .closing-cta__subscribe { width: 100%; white-space: normal; }
      .closing-cta__link { justify-content: center; }
      .closing-cta__plaque { padding: 2.5rem 1.75rem; }
      .closing-cta__subscribe { padding-inline: 1rem; letter-spacing: .08em; }
      .closing-cta__plaque-title { font-size: 1.625rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .closing-cta.is-pending .closing-reveal { opacity: 1; transform: none; }
      .closing-reveal, .closing-cta__link span, .closing-cta__subscribe { transition: none; }
    }