/* ==========================================================================
   The Founders Arena — Site stylesheet
   Depends on tokens.css. Ports 1:1 to the WordPress block theme:
   every value here is a token, so theme.json can own them later.
   ========================================================================== */

/* ---- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* overflow-x:hidden here would silently kill position:sticky on the header —
   it turns body into a scroll container, and iOS Safari in particular then
   scrolls the header away. `clip` gives the same guard against sideways
   scroll without creating that container. Older browsers fall back to
   visible, which is safe: no page currently overflows horizontally. */
body{margin:0;background:var(--bg-page);color:var(--text-primary);
     font-family:var(--font-body);font-size:var(--step-0);
     line-height:var(--leading-body);-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px}
::selection{background:var(--tfa-magenta-600);color:#fff}

/* ---- Layout primitives -------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;
           padding-inline:var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.container--text{max-width:76ch}
.section{padding-block:clamp(3rem,6.5vw,5.5rem);position:relative}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--alt{background:var(--bg-surface)}
.section--light{background:#fff;color:var(--text-primary-light)}
.section--light p{color:var(--text-secondary-light)}
.stack > * + *{margin-top:var(--space-4)}

/* ---- Type --------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;
            letter-spacing:var(--tracking-display);
            line-height:var(--leading-heading);margin:0 0 var(--space-4);
            text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-h1)}
/* "Commercialization" is ~8.55x the font-size wide and cannot wrap, so below
   roughly 550px the fluid scale outruns the viewport and the word gets clipped.
   The vw cap only ever wins on narrow screens; desktop sizing is untouched.
   break-word is the backstop if copy ever introduces a longer word.        */
.hero h1{font-size:var(--fs-h1)}
h1,h2,h3,h4{overflow-wrap:break-word}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-h4)}
p{margin:0 0 var(--space-4);color:var(--text-secondary);max-width:var(--container-text);
  text-wrap:pretty}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.22em;
  transition:color var(--dur) var(--ease)}
a:hover{color:var(--link-hover)}
.lede{font-size:var(--fs-body-lg);color:var(--text-secondary);max-width:60ch}
.eyebrow{display:block;font-family:var(--font-display);font-size:var(--step--1);
         font-weight:500;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
         color:var(--tfa-magenta-500);margin:0 0 var(--space-4)}
.section--light .eyebrow{color:var(--tfa-purple-700)}
.grad-text{background:var(--tfa-gradient-text);-webkit-background-clip:text;
           background-clip:text;color:transparent}
/* On light surfaces the weak end flips — magenta is what fades on white. */
.section--light .grad-text,.inset .grad-text,.is-style-tfa-inset .grad-text{
  background:var(--tfa-gradient-text-light);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.rule{height:3px;width:88px;border:0;border-radius:2px;background:var(--tfa-gradient);
      margin:0 0 var(--space-6)}
.muted{color:var(--text-muted)}
.fineprint{font-size:var(--step--1);color:var(--text-muted);max-width:62ch}

/* ---- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
     font-family:var(--font-body);font-weight:600;font-size:var(--fs-btn);
     letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
     padding:1em 2em;border-radius:var(--radius-pill);border:1px solid transparent;
     cursor:pointer;white-space:nowrap;
     transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease),color var(--dur) var(--ease),
                background var(--dur) var(--ease)}
.btn--primary{background:var(--tfa-gradient);color:#fff;
              background-size:160% 100%;background-position:0 0}
.btn--primary:hover{color:#fff;transform:translateY(-2px);
                    box-shadow:var(--shadow-glow);background-position:100% 0}
.btn--secondary{background:transparent;color:var(--text-primary);
                border-color:var(--border-strong)}
.btn--secondary:hover{color:var(--tfa-magenta-500);border-color:var(--tfa-magenta-500);
                      transform:translateY(-2px)}
.section--light .btn--secondary{color:var(--text-primary-light);
                                border-color:var(--border-subtle-light)}
.section--light .btn--secondary:hover{color:var(--tfa-purple-700);
                                      border-color:var(--tfa-purple-700)}
.btn--ghost{background:none;border:0;padding:0;color:var(--tfa-purple-300);
            text-transform:none;letter-spacing:0;font-size:var(--fs-btn)}
.btn--ghost .arw{transition:transform var(--dur) var(--ease)}
.btn--ghost:hover .arw{transform:translateX(5px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}

/* ---- WordPress core button blocks --------------------------------------
   The block editor emits .wp-block-button__link, not .btn. Map it onto the
   same design so a button placed by the client in the Site Editor is
   identical to one hard-coded in a pattern. The class is doubled so it beats
   WordPress's own :root :where() global styles without !important.        */
.wp-block-button__link.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-display);font-weight:600;font-size:var(--step--1);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:1em 2em;border:1px solid transparent;border-radius:var(--radius-pill);
  background:var(--tfa-gradient);background-size:160% 100%;background-position:0 0;
  color:#fff;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),color var(--dur) var(--ease),
             background-position var(--dur) var(--ease)}
.wp-block-button__link.wp-block-button__link:hover{
  color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-glow);
  background-position:100% 0}
.wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link{
  background:transparent;color:var(--text-primary);border-color:var(--border-strong);
  box-shadow:none}
.wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:hover{
  color:var(--tfa-magenta-500);border-color:var(--tfa-magenta-500);box-shadow:none}
.is-style-tfa-inset .wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link{
  color:var(--text-primary-light);border-color:var(--border-subtle-light)}

/* Block-editor columns use the design-system gaps, not the core defaults. */
.wp-block-columns.split{gap:clamp(2rem,5vw,4.5rem)}
.wp-block-columns.pillars,.wp-block-columns.impact{gap:var(--space-5)}

/* The Columns block prints display:flex inline in the head at single-class
   specificity, after this stylesheet, so a bare .pillars{display:grid} loses
   and the four cards stayed four-across at every width above 782px — 174px
   wide on an iPad, which broke the headings mid-word. Doubling the selector
   wins it back, and auto-fit then drops to two columns where it should. Same
   fix, same reason, as .impact below. */
.wp-block-columns.pillars{display:grid;
                          grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* Query Loop: the post-template <ul> carries .companies / .feed directly. */
.wp-block-post-template{list-style:none;margin:0;padding:0}

/* Core prints, inline in the head:
       :root :where(.is-layout-flow) > *          { margin-block-start: 1.5rem }
       :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
   The post-template <ul> keeps its is-layout-flow class even though this theme
   restyles it as a grid, so every card got a 24px top margin except the first.
   Grid rows size to the tallest item including its margin, and grid children
   stretch — so the first card's box grew by exactly that 24px and rendered
   visibly larger than the rest. It looked like an image problem and was not:
   all 36 logos are identical 400 x 100 files.
   The grid's own gap is the spacing here, so the flow margins go. */
.companies > li,
.feed > li{margin-block:0}
.wp-block-post-title{font-size:var(--fs-h3);margin:var(--space-2) 0}
.feed .wp-block-post-title a{color:var(--text-primary);text-decoration:none}
.feed .wp-block-post-title a:hover{color:var(--tfa-magenta-500)}
.wp-block-post-terms.tag a{color:inherit;text-decoration:none}

/* WordPress nav block adopts the prototype nav styling. */
.hdr .wp-block-navigation{gap:clamp(.9rem,1.9vw,1.75rem)}
.hdr .wp-block-navigation .wp-block-navigation-item__content{
  font-family:var(--font-display);font-size:.8rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--text-secondary);white-space:nowrap;position:relative;
  padding-block:.5em}
.hdr .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--text-primary)}

/* ---- Form status banner ------------------------------------------------- */
.formnote{border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);
          margin-bottom:var(--space-5);font-size:var(--step--1);max-width:640px}
.formnote--ok{background:rgba(76,32,190,.16);border:1px solid var(--tfa-purple-700);
              color:var(--text-primary)}
.formnote--error{background:rgba(190,56,119,.14);border:1px solid var(--tfa-magenta-700);
                 color:var(--text-primary)}

/* ---- Skip link ---------------------------------------------------------- */
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:200;
      background:var(--tfa-magenta-600);color:#fff;padding:.75em 1.25em;
      border-radius:var(--radius-sm);text-decoration:none;
      transition:top var(--dur) var(--ease)}
.skip:focus{top:var(--space-4);color:#fff}

/* ---- Header ------------------------------------------------------------- */
/* The block editor wraps a template part in its own div, and that wrapper is
   only as tall as the header — a sticky child can only travel inside its
   parent's box, so sticking it here does nothing. The wrapper itself has to
   be the sticky element; it is a direct child of .wp-site-blocks, which spans
   the page. */
.site-header-slot{position:sticky;top:0;z-index:100}
.hdr{position:relative;z-index:100;
     background:rgba(11,13,16,.72);backdrop-filter:blur(14px) saturate(1.4);
     -webkit-backdrop-filter:blur(14px) saturate(1.4);
     border-bottom:1px solid transparent;
     transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--border-subtle);background:rgba(11,13,16,.92)}
.hdr__inner{display:flex;align-items:center;justify-content:space-between;
            gap:var(--space-5);min-height:76px;
            max-width:var(--container-wide);margin-inline:auto;
            padding-inline:var(--gutter)}
.hdr__logo{display:flex;align-items:center;flex:0 0 auto;
           padding:var(--logo-clearspace)}   /* brand-sheet clear space */
.hdr__logo img{width:132px}
.nav{display:flex;align-items:center;gap:clamp(.9rem,1.9vw,1.75rem)}
.nav > .btn{display:none}          /* in-nav CTA is mobile-only */
.nav a{font-family:var(--font-body);font-size:var(--fs-btn);font-weight:600;
       letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
       color:var(--text-secondary);position:relative;padding-block:.5em;
       white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
              background:var(--tfa-gradient);border-radius:2px;
              transform:scaleX(0);transform-origin:left;
              transition:transform var(--dur) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text-primary)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__cta{flex:0 0 auto}
.hdr__cta .btn{padding:.8em 1.5em}
.navtoggle{display:none;background:none;border:1px solid var(--border-strong);
           border-radius:var(--radius-sm);width:44px;height:44px;cursor:pointer;
           align-items:center;justify-content:center;color:var(--text-primary)}
.navtoggle svg{width:20px;height:20px}
.navtoggle .x{display:none}
.navtoggle[aria-expanded="true"] .x{display:block}
.navtoggle[aria-expanded="true"] .bars{display:none}

/* The header row cannot shrink: the logo and CTA are flex:0 0 auto and every
   nav link is nowrap. Logo 138 + nav ~900 + CTA 254 + gaps and gutters needs
   about 1430px, so between the 1181px desktop-nav breakpoint and ~1415px the
   row pushed the whole page sideways — a horizontal scrollbar on 1280 and 1366
   laptops, two of the most common widths there are. Earlier QA ran at 1440,
   834 and 390 and stepped straight over the band.

   The nav itself is the part worth keeping, so the duplicate CTA is what gives
   way: it returns once the row genuinely fits. The hero CTA is the primary
   path on the homepage and Contact remains in the nav, so nothing is lost. */
@media (max-width:1399px){
  .hdr__cta{display:none}
}

@media (max-width:1180px){
  .navtoggle{display:flex}
  .nav > .btn{display:inline-flex}
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;
       gap:0;background:var(--tfa-ink-950);border-bottom:1px solid var(--border-subtle);
       padding:var(--space-4) var(--gutter) var(--space-6);
       max-height:calc(100dvh - 76px);overflow-y:auto;
       transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
       transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
                  visibility 0s linear var(--dur)}
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto;
               transition-delay:0s}
  .nav a{font-size:var(--fs-btn);padding:var(--space-4) 0;
         border-bottom:1px solid var(--border-subtle)}
  .nav a::after{display:none}
  .nav .btn{margin-top:var(--space-5);text-align:center}
}

/* ---- Hero --------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;
      padding-block:clamp(4.5rem,13vw,10rem) clamp(4rem,10vw,8rem)}
.hero__glow{position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:0;
            background:radial-gradient(60% 55% at 22% 22%,rgba(76,32,190,.42),transparent 62%),
                       radial-gradient(52% 48% at 82% 12%,rgba(218,83,143,.30),transparent 60%);
            filter:blur(28px);pointer-events:none}
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
            background-image:linear-gradient(var(--tfa-ink-800) 1px,transparent 1px),
                             linear-gradient(90deg,var(--tfa-ink-800) 1px,transparent 1px);
            background-size:76px 76px;
            -webkit-mask-image:radial-gradient(75% 62% at 50% 32%,#000,transparent 78%);
            mask-image:radial-gradient(75% 62% at 50% 32%,#000,transparent 78%)}
.hero > .container{position:relative;z-index:1}
.hero h1{max-width:17ch;margin-bottom:var(--space-6)}
.hero h1 .line{display:block}
.hero__body{max-width:60ch}
.hero__body p{font-size:var(--fs-body-lg);color:var(--text-secondary)}
.hero__body p + p{margin-top:var(--space-4)}

/* ---- Section heading block ---------------------------------------------- */
.sec-head{max-width:64ch;margin-bottom:var(--space-8)}
.sec-head p{font-size:var(--fs-body-lg)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .rule{margin-inline:auto}
.sec-head--center p{margin-inline:auto}

/* ---- Split (text + media) ----------------------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
       grid-template-columns:1fr}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-media{grid-template-columns:5fr 7fr}
  .split--media-lead{grid-template-columns:4fr 8fr}
  .split--wide-text{grid-template-columns:7fr 5fr}
  .split--flip .split__media{order:-1}
}
/* Headings sitting in a narrow split column shouldn't run at full display size */
.split h2{font-size:var(--fs-h2)}
.split__media img{border-radius:var(--radius-lg);width:100%}
.figure{position:relative;border-radius:var(--radius-lg);overflow:hidden;
        border:1px solid var(--border-subtle)}
.figure img{width:100%;display:block}
.figure figcaption{font-size:var(--step--1);color:var(--text-muted);
                   padding:var(--space-3) var(--space-4);background:var(--bg-surface)}

/* ---- Pillar cards (What We Do) ------------------------------------------ */
.pillars{display:grid;gap:var(--space-5);
         grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pillar{position:relative;background:var(--bg-surface);
        border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
        padding:var(--space-6);overflow:hidden;
        transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pillar::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
                background:var(--tfa-gradient);transform:scaleY(0);transform-origin:top;
                transition:transform var(--dur-slow) var(--ease)}
.pillar:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.pillar:hover::before{transform:scaleY(1)}
/* Card headings sit one step below the section h3 scale. On the four-across
   desktop grid a card gives 192px of content, and "Commercialize" at --fs-h3
   with .04em tracking needs 223px — so it broke mid-word, and "Create Impact"
   wrapped as well. Sized down and tracked tighter across all four cards rather
   than special-casing one, per the launch brief. At --fs-h4 the longest label
   needs ~172px, which leaves real headroom if Playfair falls back to Georgia.
   overflow-wrap:normal is deliberate: a card heading may never break mid-word,
   and .pillar already clips, so this cannot push the page wide. */
.pillar h3{font-size:var(--fs-h4);letter-spacing:.02em;margin-bottom:var(--space-3);
           overflow-wrap:normal}
.pillar p{font-size:var(--step--1);margin:0;color:var(--text-muted)}

/* ---- Proof Card section (light inset) ----------------------------------- */
.inset{background:#fff;color:var(--text-primary-light);
       border-radius:clamp(20px,3vw,36px);overflow:hidden;
       padding:clamp(2rem,5vw,4rem)}
.inset h2,.inset h3{color:var(--tfa-purple-900)}
.inset p{color:var(--text-secondary-light)}
.proof-list{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;
            gap:var(--space-4)}
.proof-list li{position:relative;padding-left:2.1rem;color:var(--text-secondary-light);
               max-width:66ch}
.proof-list li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;
                       border-radius:2px;background:var(--tfa-gradient)}
.proof-diagram{width:100%;height:auto;max-width:1120px;margin-inline:auto}
@media (max-width:640px){
  /* The five-column diagram is unreadable below ~620px — swap to the stacked
     mobile layout, per the client's IMPLEMENTATION_NOTES.md. Now an SVG rather
     than the original webp export, so the two versions share one set of labels
     and a copy change no longer means re-exporting a raster. */
  .proof-diagram{content:url("../img/TFA_Founder_Proof_Card_Mobile.svg")}
}
.split--top{align-items:start}
.callout{position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-5);
         margin:var(--space-6) 0}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
                 border-radius:2px;background:var(--tfa-gradient)}
.callout p{margin:0;font-size:var(--fs-body-lg);color:var(--tfa-purple-900);font-weight:500}

/* ---- Why We Care (statement blocks) ------------------------------------- */
.statement{max-width:26ch;font-family:var(--font-display);font-weight:700;
           font-size:var(--step-3);line-height:var(--leading-heading);
           letter-spacing:var(--tracking-display);color:var(--text-primary);
           margin:0 0 var(--space-6)}
.beats{display:grid;gap:var(--space-6);margin-top:var(--space-7)}
@media (min-width:820px){.beats{grid-template-columns:repeat(3,1fr);gap:var(--space-7)}}
.beat{border-top:1px solid var(--border-subtle);padding-top:var(--space-5)}
.beat h3{font-size:var(--fs-h3);margin-bottom:var(--space-3)}
.beat p{font-size:var(--step--1);color:var(--text-muted);margin:0}

/* ---- Impact ------------------------------------------------------------- */
.impact{display:grid;gap:var(--space-6)}
@media (min-width:900px){.impact{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}}
.impact__col{background:var(--bg-surface);border:1px solid var(--border-subtle);
             border-radius:var(--radius-lg);padding:var(--space-6);
             display:flex;flex-direction:column;gap:var(--space-3)}
.impact__for{font-family:var(--font-display);font-size:var(--fs-caption);font-weight:600;
  /* two-line reserve so every card's body copy starts on the same line */
  min-height:2.6em;display:block;
             letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
             background:var(--tfa-gradient-text);-webkit-background-clip:text;
             background-clip:text;color:transparent}
.impact__col p{margin:0;font-size:var(--fs-body);color:var(--text-secondary)}

/* ---- Marquee ------------------------------------------------------------ */
.marquee{overflow:hidden;position:relative;padding-block:var(--space-4);
         -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee ul{display:flex;align-items:center;gap:clamp(2.5rem,5vw,4.5rem);
            list-style:none;margin:0;padding:0;width:max-content;
            animation:tfa-scroll 60s linear infinite}
.marquee:hover ul{animation-play-state:paused}
.marquee img{height:38px;width:auto;opacity:.5;
             transition:opacity var(--dur) var(--ease)}
.marquee li:hover img{opacity:1}

/* Partner logos are not a matched set as their owners publish them — the range
   runs from a 9.6:1 Wells Fargo wordmark to a 1:1 Texas Venture Alliance seal,
   and several arrived on a white panel or punched out of a grey tile. All ten
   are now normalised upstream to the treatment Discover uses: a white mark on a
   transparent canvas, tiles removed, and each mark sized toward a common ink
   area so a square seal and a long wordmark carry the same visual weight.

   That normalisation is what lets the CSS here be trivial. Every file shares
   the cell's exact 25:8 ratio, so one rule sizes all ten with no aspect
   handling, no per-format special case, and nothing to keep in sync when a
   logo is replaced.

   Note there is no opacity override any more. Both strips now take the 50%
   wash from the rule above — that wash is the light grey the brief asks for —
   and both lift to full opacity on hover. */
.marquee--partner li{display:flex;align-items:center;justify-content:center;
                     width:200px;height:64px}
.marquee.marquee--partner img{width:100%;height:100%;
                              object-fit:contain;object-position:center}

/* Placeholder card for a partner whose official logo has not arrived yet.
   Every card is the same width and height so the row reads as deliberate
   rather than half-finished; the longest names wrap to a second line inside
   that fixed box. These disappear on their own — the moment a logo is
   attached, that entry renders as an image instead. */
.marquee__name{display:flex;align-items:center;justify-content:center;
               box-sizing:border-box;width:240px;height:56px;
               padding-inline:var(--space-4);text-align:center;
               border:1px solid var(--border-strong);border-radius:var(--radius-sm);
               font-family:var(--font-body);font-size:var(--fs-caption);
               font-weight:600;letter-spacing:.06em;text-transform:uppercase;
               line-height:1.25;color:var(--text-muted);
               transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.marquee li:hover .marquee__name{color:var(--text-primary);border-color:var(--tfa-magenta-500)}
@keyframes tfa-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee ul{animation:none;flex-wrap:wrap;width:auto;justify-content:center;
              gap:var(--space-6) var(--space-7)}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- CTA band ----------------------------------------------------------- */
.band{position:relative;overflow:hidden;border-radius:clamp(20px,3vw,36px);
      padding:clamp(2.5rem,6vw,5rem);background:var(--bg-surface);
      border:1px solid var(--border-subtle)}
.band::before{content:"";position:absolute;inset:0;z-index:0;opacity:.9;
              background:radial-gradient(70% 120% at 12% 0%,rgba(76,32,190,.34),transparent 62%),
                         radial-gradient(60% 110% at 92% 100%,rgba(218,83,143,.26),transparent 60%)}
.band > *{position:relative;z-index:1}
.band h2{max-width:20ch}
.band p{max-width:58ch}

/* ---- Forms -------------------------------------------------------------- */
.form{display:grid;gap:var(--space-5);max-width:640px}
.field{display:grid;gap:var(--space-2)}
.field label{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:600;
             letter-spacing:.04em;color:var(--text-secondary)}
.field .req{color:var(--tfa-magenta-500)}
.field input,.field select,.field textarea{
  background:var(--bg-surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:.85em 1em;color:var(--text-primary);
  width:100%;transition:border-color var(--dur) var(--ease),
                        box-shadow var(--dur) var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--tfa-ink-500)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--tfa-purple-500);
  box-shadow:0 0 0 3px rgba(124,77,234,.22)}
.field textarea{min-height:150px;resize:vertical}
.field__hint{font-size:var(--step--1);color:var(--text-muted)}
.field--row{display:grid;gap:var(--space-5)}
@media (min-width:640px){.field--row{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Insights feed ------------------------------------------------------ */
.feed{display:grid;gap:0;list-style:none;margin:0;padding:0;
      border-top:1px solid var(--border-subtle)}
.feed__item,
.feed > li{display:grid;gap:var(--space-3) var(--space-6);
            padding-block:var(--space-6);border-bottom:1px solid var(--border-subtle);
            grid-template-columns:1fr;align-items:start;
            transition:background var(--dur) var(--ease)}
@media (min-width:820px){
  .feed__item{grid-template-columns:auto 1fr auto;align-items:baseline}
}
.feed__item:hover,
.feed > li:hover{background:var(--bg-surface)}
.feed__meta{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.tag{display:inline-block;font-family:var(--font-body);font-size:var(--fs-caption);
     font-weight:600;letter-spacing:.14em;text-transform:uppercase;
     padding:.35em .85em;border-radius:var(--radius-pill);
     border:1px solid var(--tfa-purple-800);color:var(--tfa-purple-300);
     background:rgba(76,32,190,.14);white-space:nowrap}
.feed__date{font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-muted);
            white-space:nowrap}
.feed__item h3{font-size:var(--fs-h3);margin:0}
.feed__item h3 a{color:var(--text-primary);text-decoration:none}
.feed__item h3 a:hover{color:var(--tfa-magenta-500)}
.feed__item p{font-size:var(--step--1);color:var(--text-muted);margin:var(--space-2) 0 0}

/* ---- Company grid (Discover) -------------------------------------------- */
.companies{display:grid;gap:var(--space-4);list-style:none;margin:0;padding:0;
           grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.company,
.companies > li{display:flex;align-items:center;justify-content:center;
         min-height:118px;padding:var(--space-5);
         background:var(--bg-surface);border:1px solid var(--border-subtle);
         border-radius:var(--radius-md);
         transition:border-color var(--dur) var(--ease),
                    transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.company img,
.companies > li img{max-height:42px;width:auto;opacity:.62;
             transition:opacity var(--dur) var(--ease)}
.company:hover,
.companies > li:hover{transform:translateY(-3px);border-color:var(--tfa-purple-700);
               background:var(--bg-surface-raised)}
.company:hover img,
.companies > li:hover img{opacity:1}

/* ---- People ------------------------------------------------------------- */
.people{display:grid;gap:var(--space-6);
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.person figure{margin:0}
.person__ph{aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;
            border:1px solid var(--border-subtle);background:var(--bg-surface)}
.person__ph img{width:100%;height:100%;object-fit:cover;
                filter:grayscale(1) contrast(1.04);
                transition:filter var(--dur-slow) var(--ease),
                           transform var(--dur-slow) var(--ease)}
.person:hover .person__ph img{filter:grayscale(0);transform:scale(1.04)}
.person__name{display:block;font-family:var(--font-display);font-weight:600;
              font-size:var(--step-0);margin-top:var(--space-4)}
.person__role{display:block;font-size:var(--step--1);color:var(--text-muted)}
.person__bio{font-size:var(--step--1);color:var(--text-muted);margin-top:var(--space-2)}

/* ---- Footer ------------------------------------------------------------- */
.ftr{background:var(--bg-surface);border-top:1px solid var(--border-subtle);
     padding-block:var(--space-8) var(--space-6);margin-top:var(--space-9)}
.ftr__top{display:grid;gap:var(--space-7);
          grid-template-columns:1fr}
@media (min-width:820px){.ftr__top{grid-template-columns:2fr 1fr 1fr 1.4fr}}
.ftr__logo img{width:150px;margin-bottom:var(--space-5)}
.ftr h4{font-family:var(--font-display);font-size:var(--fs-h5);font-weight:var(--fw-h5);
        letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
        color:var(--text-muted);margin-bottom:var(--space-4)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.ftr ul a{color:var(--text-secondary);text-decoration:none;font-size:var(--step--1)}
.ftr ul a:hover{color:var(--tfa-magenta-500)}
.ftr address{font-style:normal;color:var(--text-secondary);font-size:var(--step--1);
             display:grid;gap:var(--space-2)}
.ftr address a{color:var(--text-secondary);text-decoration:none}
.ftr address a:hover{color:var(--tfa-magenta-500)}
.ftr__social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.ftr__social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
               border:1px solid var(--border-subtle);color:var(--text-secondary)}
.ftr__social a:hover{border-color:var(--tfa-magenta-500);color:var(--tfa-magenta-500)}
.ftr__social svg{width:17px;height:17px}

/* Candid transparency seal.
   The brand column was always wider than its content — 2fr against 1fr for the
   link columns — so the seal goes into that unused right-hand half rather than
   under the tagline, which is where the client marked it: after the logo block,
   before Explore.

   It is a grid track, not a float or an absolute position, which is what
   guarantees the "no overlap" requirement holds at every width instead of only
   at the one I measured. Tracks cannot intersect, so as the viewport narrows
   the tagline reflows inside its own column and the seal keeps its lane.
   minmax(0,1fr) on the text side is what lets it actually shrink — a bare 1fr
   floors at min-content and would push the seal out of the column. */
.ftr__seal a{display:inline-block;line-height:0;border-radius:50%;
             transition:opacity var(--dur) var(--ease)}
.ftr__seal a:hover{opacity:.82}
/* Candid serves the seal as a 108px square SVG. The declared aspect-ratio means
   the footer reserves the right box before it arrives, so a slow third-party
   response cannot shift the layout under the reader. */
/* 100-120px on desktop is the client's spec. The floor is 100 rather than a
   smaller value because 8vw only reaches 100px at around 1250px wide, and
   without it every laptop between 820 and 1250 would sit under the spec. */
.ftr__seal img{display:block;width:clamp(100px,8vw,120px);height:auto;aspect-ratio:1}

@media (min-width:820px){
  .ftr__brand{display:grid;grid-template-columns:minmax(0,1fr) auto;
              gap:var(--space-6);align-items:start}
}
/* Stacked below 820px, where the footer is a single column: the seal sits under
   the social icons, still in the brand block and still nowhere near Explore. */
@media (max-width:819px){
  .ftr__seal{margin-top:var(--space-6)}
}
.ftr__bot{margin-top:var(--space-8);padding-top:var(--space-5);
          border-top:1px solid var(--border-subtle);
          display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);
          align-items:center;justify-content:space-between}
.ftr__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
            list-style:none;margin:0;padding:0}
.ftr__legal a{font-size:var(--fs-caption);color:var(--text-muted);text-decoration:none}
.ftr__legal a:hover{color:var(--text-secondary)}
.ftr__copy{font-size:var(--fs-caption);color:var(--text-muted);margin:0}


/* WP renders post-terms as a block-level div; keep the pill hugging its text. */
.wp-block-post-terms.tag{display:inline-block;width:fit-content;max-width:100%}
/* .ftr ul is the stacked link-column rule; the legal row must beat it. */
.ftr .ftr__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
                 align-items:center}


/* ---- Single insight / company article ----------------------------------
   The block editor's constrained layout centres direct children, which pushed
   the tag pill and the rule out of alignment with the rest of the page. These
   explicit wrappers keep the article on the same left edge as every other
   section and hold body copy to a readable measure.                        */
.insight-head{max-width:var(--container-text);margin-bottom:var(--space-7)}
.insight-head .wp-block-post-terms.tag{margin:0 0 var(--space-4)}
.insight-head .wp-block-post-title{font-size:var(--fs-h1);line-height:var(--leading-heading);
                                   margin:0 0 var(--space-3)}
.insight-head .feed__date{display:block;margin-bottom:var(--space-5)}
.insight-head .is-style-tfa-rule{margin-inline:0}
.insight-media{margin:0 0 var(--space-7);max-width:var(--container-text)}
/* Never upscale: several migrated covers are only 600px wide, and stretching
   them to the column width makes them visibly soft. */
.insight-media img,
.insight-media.wp-block-post-featured-image img{border-radius:var(--radius-lg);
  width:auto;max-width:100%;height:auto}
.company-mark{margin:0 0 var(--space-5)}
.company-mark img{max-height:56px;width:auto}
.insight-body{max-width:var(--container-text)}
.insight-body > * + *{margin-top:var(--space-5)}
.insight-body p{font-size:var(--fs-body);color:var(--text-secondary)}
.insight-body h2{font-size:var(--fs-h3);margin-top:var(--space-7)}
.insight-body h3{font-size:var(--fs-h4);margin-top:var(--space-6)}
.insight-body ul,.insight-body ol{padding-left:1.3em;color:var(--text-secondary)}
.insight-body li + li{margin-top:var(--space-2)}
.insight-body img{border-radius:var(--radius-md)}
.insight-body blockquote{position:relative;padding-left:var(--space-5);
  border-left:3px solid var(--tfa-purple-700);font-size:var(--step-1);
  color:var(--text-primary)}

/* ---- Scroll reveal ------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(18px);
        transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Utilities ---------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---- Announcement bar (temporary, admin-controlled) --------------------- *
   Sits above the sticky header so it scrolls away rather than eating viewport
   on every screen. Removed entirely from Settings → TFA Announcement.        */
.announce{background:var(--tfa-gradient);color:#fff;position:relative;z-index:120}
.announce p{margin:0;padding:.7rem 0;color:#fff;max-width:none;
            font-family:var(--font-display);font-size:var(--step--1);
            font-weight:600;letter-spacing:.06em;text-transform:uppercase;
            display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
            gap:.55rem .9rem;text-align:center}
.announce__detail{font-weight:500;opacity:.92}
.announce__sep{opacity:.5}
.announce__link{color:#fff;text-decoration:underline;text-underline-offset:.25em;
                text-decoration-thickness:1px}
.announce__link:hover{color:#fff;opacity:.85}
@media (max-width:560px){
  .announce__sep{display:none}
  .announce p{gap:.15rem .8rem;font-size:var(--fs-caption)}
}

/* ---- Photography -------------------------------------------------------- *
   figure--plain drops the bordered/captioned treatment: the client asked for
   photographs placed cleanly, with no text over them.                        */
.figure--plain{border:0;background:none;border-radius:var(--radius-lg);
               overflow:hidden;margin:0}
.figure--plain img{display:block;width:100%;height:auto}
.figure--wide{margin:0 0 var(--space-8);max-width:var(--container-wide)}
.figure--tall img{width:100%;max-width:520px;margin-inline:auto}
.media-pair{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr);
            margin-top:var(--space-7)}
@media (min-width:760px){.media-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Impact: five audiences, 3 + 2 -------------------------------------- *
   The columns block prints its own `display:flex` layout rule inline in the
   head, at the same specificity as a single class and *after* this file — so
   a bare `.impact{display:grid}` silently loses. Doubling the class beats it. */
.wp-block-columns.impact{display:grid}
.wp-block-columns.impact--five{gap:var(--space-5)}
@media (min-width:900px){
  /* Six tracks so three cards fill the top row and two centre underneath. */
  .wp-block-columns.impact--five{grid-template-columns:repeat(6,minmax(0,1fr))}
  .wp-block-columns.impact--five > .impact__col{grid-column:span 2}
  .wp-block-columns.impact--five > .impact__col:nth-child(4){grid-column:2 / span 2}
  .wp-block-columns.impact--five > .impact__col:nth-child(5){grid-column:4 / span 2}
}
@media (min-width:600px) and (max-width:899px){
  .wp-block-columns.impact--five{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.impact__for{overflow-wrap:normal;word-break:normal}
.impact__close{margin-top:var(--space-8)}

/* ---- What Brings You to TFA? — four pathways ---------------------------- */
.pathways{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr);
          margin-top:var(--space-7)}
@media (min-width:820px){.pathways{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pathway{background:var(--bg-surface);border:1px solid var(--border-subtle);
         border-radius:var(--radius-lg);padding:var(--space-6);
         display:flex;flex-direction:column;align-items:flex-start;
         gap:var(--space-4);
         transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pathway:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.pathway h3{font-size:var(--fs-h3);margin:0}
.pathway p{margin:0;color:var(--text-secondary)}
/* Every CTA pins to the bottom edge of its card, so all four line up whatever
   the copy length — the founder disclaimer sits above its button rather than
   pushing it out of line. */
.pathway .btn{margin-top:auto;align-self:flex-start}
.pathway .fineprint{margin:0;font-size:var(--fs-caption);line-height:1.55}

/* ---- Contact split ------------------------------------------------------ */
@media (min-width:900px){
  .split--contact{grid-template-columns:7fr 5fr}
}

/* Long addresses (worthmeeting@thefoundersarena.com) must not break mid-word
   on a 390px screen. */
address a,.ftr address a{overflow-wrap:anywhere}
@media (max-width:420px){
  .split--contact address a[href^="mailto"]{font-size:var(--step--1)}
}

/* Anchored sections must clear the sticky header when jumped to. */
.section[id],.hero[id]{scroll-margin-top:96px}

/* Uppercase Arial button labels are long. Below 520px let them wrap and tighten
   the padding, so a card never sets a track minimum wider than the container. */
@media (max-width:520px){
  .btn{white-space:normal;text-align:center;padding:.85em 1.4em;line-height:1.25}
  .pathway{padding:var(--space-5)}
}